/* =========================================================
   MARU MOVEMENT — Site-wide styles
   NOTE: colors, fonts, and exact spacing below are a first-pass
   placeholder based on "black + beige, soft/minimal" — swap the
   tokens in :root once we have real photos / a homepage screenshot
   to sample the exact palette from.
   ========================================================= */

:root {
  /* Brand Colors — desert palette from Tyler's mood boards (paint chips +
     Painted Desert reference), replacing the earlier black/beige guess */
  --background: #f7f2ea;
  --foreground: #2b1f1c;
  --primary: #2b1f1c;
  --primary-foreground: #f7f2ea;
  --secondary: #ddcdb8;
  --muted: #e8dcc9;
  --muted-foreground: #6e5850;
  --accent: #bb6a34;
  --accent-foreground: #f7f2ea;
  --accent-deep: #5a3f42;
  --border: #ddccb8;

  /* Header — warm cream instead of stark white, per "instead of the
     heavy black and white look" */
  --header-bg: #f7f2ea;

  /* Layout */
  --header-height: 96px;
  --container-width: 1200px;

  /* Font */
  --font-sans: 'Jost', system-ui, sans-serif;
  --font-display: 'Caudex', Georgia, serif;
}

/* =========================
   RESET & BASE
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* So a link to #studio-etiquette, #faq, etc. doesn't land the section
   underneath the fixed header. */
#studio-etiquette,
#faq,
#contact,
#signup,
#create-account {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

::selection {
  background: var(--accent-deep);
  color: var(--primary-foreground);
}

/* Fine paper grain over the whole site — a little imperfection so the
   flat color fields don't read as slick/machine-made. Fixed so it
   doesn't scroll with the page; pointer-events off so it never blocks
   clicks. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.content {
  padding: 96px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-label {
  position: relative;
  display: inline-block;
  padding-bottom: 26px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* A tiny brush-circle mark instead of a machine-straight rule — the same
   hand-painted circle graphic used on the Enter the Circle landing page
   ("Maru means circle"), scaled down. */
.section-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../images/circle-small.webp");
}

.text-link {
  position: relative;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

.text-link-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.text-link:hover .text-link-underline {
  transform: scaleX(0);
  transform-origin: right center;
}

/* =========================
   HEADER
   ========================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: height 0.5s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.5s ease;
}

.header.scrolled {
  border-color: var(--border);
}

.header-inner {
  height: 100%;
}

.header-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1000px) {
  .header-content {
    padding: 0 24px;
  }
}

.logo {
  flex-shrink: 0;
}

.logo-static {
  cursor: default;
}

.logo-scale-wrap {
  display: inline-block;
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.logo-img {
  height: 27px;
  width: auto;
  animation: logo-breathe 7s linear infinite;
}

/* Desktop only: logo starts larger, eases down to normal size on scroll.
   Narrower desktop widths get a smaller boost so the 8-item nav has room. */
@media (min-width: 900px) {
  .logo-scale-wrap {
    transform: scale(1.1);
  }
  .header.scrolled .logo-scale-wrap {
    transform: scale(1);
  }

  /* Header padding eases down in step with the logo shrinking */
  .header.scrolled {
    height: calc(var(--header-height) - 20px);
  }
}

@media (min-width: 1200px) {
  .logo-scale-wrap {
    transform: scale(1.25);
  }
}

/* Gentle idle motion — soft pulse + slow left-right drift, matches the live site */
@keyframes logo-breathe {
  0%, 100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(5px) scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-img {
    animation: none;
  }
  .logo-scale-wrap {
    transition: none;
  }
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1000px) {
  .nav-desktop {
    gap: 8px;
  }
}

@media (min-width: 1200px) {
  .nav-desktop {
    gap: 36px;
  }
}

.nav-link {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foreground);
  padding-bottom: 4px;
  white-space: nowrap;
}

@media (min-width: 1000px) {
  .nav-link {
    font-size: 13px;
    letter-spacing: 0.12em;
  }
}

/* Active page indicator — small orange dots below the nav item, no underline */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-dots {
  display: flex;
  gap: 4px;
  height: 4px;
  /* margin-top: 7px; */
}

.nav-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Hover: dots appear one at a time */
.nav-item:hover .nav-dots span {
  opacity: 1;
  transform: scale(1);
}

.nav-item:hover .nav-dots span:nth-child(1) { transition-delay: 0ms; }
.nav-item:hover .nav-dots span:nth-child(2) { transition-delay: 90ms; }
.nav-item:hover .nav-dots span:nth-child(3) { transition-delay: 180ms; }

/* Active page: all three dots always shown */
.nav-link.active ~ .nav-dots span {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0ms;
}

.nav-link.active {
  color: var(--accent);
}

/* Mobile menu button */
.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  z-index: 110;
}

.menu-btn-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
}

.menu-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--foreground);
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease, background 0.3s ease;
}

.menu-bar-1 { margin-top: -5px; }
.menu-bar-2 { margin-top: 0; }
.menu-bar-3 { margin-top: 5px; }

/* Open state — circle fills with the accent color, bars form an X */
.menu-btn.open .menu-btn-circle {
  background: var(--accent);
  border-color: var(--accent);
}

.menu-btn.open .menu-bar {
  background: var(--primary-foreground);
}

.menu-btn.open .menu-bar-1 {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-btn.open .menu-bar-2 {
  opacity: 0;
}

.menu-btn.open .menu-bar-3 {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Slide-out mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 380px;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 105;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-bg {
  position: absolute;
  inset: 0;
  background: var(--background);
  border-left: 1px solid var(--border);
}

.mobile-menu-nav {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 0 48px;
}

.mobile-nav-link {
  position: relative;
  font-family: var(--font-display);
  font-size: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.3s ease;
}

.mobile-menu.open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.open .mobile-nav-link:nth-child(1) { transition-delay: 0ms; }
.mobile-menu.open .mobile-nav-link:nth-child(2) { transition-delay: 60ms; }
.mobile-menu.open .mobile-nav-link:nth-child(3) { transition-delay: 120ms; }
.mobile-menu.open .mobile-nav-link:nth-child(4) { transition-delay: 180ms; }
.mobile-menu.open .mobile-nav-link:nth-child(5) { transition-delay: 240ms; }
.mobile-menu.open .mobile-nav-link:nth-child(6) { transition-delay: 300ms; }

.mobile-nav-link-underline {
  display: block;
  height: 1px;
  width: 0;
  background: var(--accent);
  margin-top: 4px;
  transition: width 0.4s ease;
}

.mobile-nav-link.active .mobile-nav-link-underline {
  width: 100%;
}

.mobile-menu-footer {
  opacity: 0;
  transition: opacity 0.4s ease 0.25s;
}

.mobile-menu.open .mobile-menu-footer {
  opacity: 1;
}

.mobile-menu-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--muted-foreground);
  margin-top: 12px;
}

.mobile-menu-tagline span {
  color: var(--accent);
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
  }
  .menu-btn {
    display: none;
  }
}

/* =========================
   HERO
   ========================= */
.hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  padding-top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-bg-drift 26s linear infinite;
}

/* Slow, constant breathing drift — moves diagonally (left/right AND
   up/down) so the gradient's colors visibly shift across the frame.
   Scale stays just above what object-fit: cover already needs, so the
   pan never reveals an edge, without piling extra upscale on top of
   the photo's native resolution. The old range (1.16–1.22) was most of
   what made the hero photo read as gritty/blurry on larger screens —
   cover alone already scales a ~1400px-wide photo well past 100% on a
   1920px viewport, so this only needed a few more percent of headroom
   for the pan, not 20+. */
@keyframes hero-bg-drift {
  0% {
    transform: scale(1.03) translate(-1.5%, -1.2%);
  }
  25% {
    transform: scale(1.06) translate(1.5%, -1%);
  }
  50% {
    transform: scale(1.04) translate(1.2%, 1.5%);
  }
  75% {
    transform: scale(1.06) translate(-1.2%, 1.2%);
  }
  100% {
    transform: scale(1.03) translate(-1.5%, -1.2%);
  }
}

/* Breathing color glow — same warm-ember movement as the Enter the
   Circle hero, layered between the drifting background and the dark
   overlay so the gradient itself has its own independent motion.
   11/3 follow-up: the cream stop in the sweep (plus `screen`, which
   only ever brightens) was reading as a blown-out burst of white light
   over the photo — not the look Scott wanted. Dropped the cream stop
   entirely (plum/orange only now, no light tone to blow out) and
   switched to `multiply`, which darkens the photo toward the gradient
   color instead of lightening it — closer to how the current (darker)
   hero photo already reads on its own. */
.hero-bg-glow {
  position: absolute;
  inset: -15%;
  background: conic-gradient(
    from 200deg at 30% 65%,
    var(--accent-deep) 0deg,
    var(--accent) 130deg,
    var(--accent-deep) 240deg,
    var(--accent-deep) 360deg
  );
  filter: blur(90px);
  opacity: 0.55;
  mix-blend-mode: multiply;
  animation: hero-glow-breathe 9s ease-in-out infinite;
}

@keyframes hero-glow-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 31, 28, 0.55), rgba(43, 31, 28, 0.05) 55%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px;
  text-align: center;
  color: var(--primary-foreground);
}

.hero-word {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  text-align: center;
}

.hero-word-img {
  display: block;
  width: clamp(200px, 32vw, 460px);
  height: auto;
  margin: 0 auto;
}

.hero-tagline {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}

.hero-word.gsap-in,
.hero-tagline.gsap-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   VISION
   ========================= */
/* Wraps both the Vision copy and the MARU photo-letter collage below
   it so they share one background declaration and can never drift out
   of sync in color — it's one sand-colored band, not two. */
.vision-section {
  background: var(--background);
}

/* The text half of that band. Keeps its own position:relative/overflow
   so the oversized "movement" wordmark stays scoped to the copy's own
   height instead of re-centering across the collage below it too. */
.vision-copy {
  position: relative;
  overflow: hidden;
}

/* Oversized faint wordmark sitting behind the copy — a quiet layer of
   depth rather than a flat text block on a flat background. Centered
   with width:100% + text-align instead of a translateX(-50%) trick,
   since that approach drifts off-center at these letter-spacing/
   font-size values (the trailing letter-spacing throws the midpoint
   translate off). */
.vision-copy::before {
  content: 'movement';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(140px, 24vw, 360px);
  letter-spacing: 0.04em;
  color: var(--foreground);
  opacity: 0.045;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.vision-copy .container {
  position: relative;
  z-index: 1;
}

.vision-text {
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}

.vision-text p {
  margin-bottom: 18px;
  color: var(--muted-foreground);
}

.vision-text p:last-child {
  margin-bottom: 0;
}

/* =========================
   MARRU COLLAGE
   ========================= */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The vision text and the MARRU photo collage share the same cream
   background (no override needed — that's the page default). White
   starts right after the collage and runs through the teacher and
   offerings sections, then hands back to cream for the contact form. */
.teacher-section,
.offerings-section {
  background-color: #ffffff;
}

.marru-collage-section {
  padding: 12px 0 72px;
}

.marru-photo-logo-wrap {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.marru-photo-logo {
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.marru-photo-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Two versions of the same wordmark share one set of letter-shape
   clip-paths (defined once, off-screen, right before this section):
   a vertical cascade on small screens, a wide edge-to-edge row once
   there's room for it. */
.marru-photo-logo-desktop {
  display: none;
}

@media (min-width: 700px) {
  .marru-photo-logo-mobile {
    display: none;
  }
  .marru-photo-logo-desktop {
    display: block;
  }
}

/* =========================
   TEACHER
   ========================= */
.teacher-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.teacher-images {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 14px 0;
}

/* Framed like a couple of printed photos tucked slightly askew, not a
   flat machine-perfect grid. */
.teacher-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  border: 8px solid var(--background);
  box-shadow: 0 18px 36px -14px rgba(43, 31, 28, 0.4);
}

.teacher-img-1 {
  transform: rotate(-2deg);
}

.teacher-img-2 {
  margin-top: 32px;
  transform: rotate(1.5deg);
}

/* Single-photo variant — one final teacher photo instead of the two-up
   scrapbook grid, centered with a max-width so it doesn't stretch too
   wide/tall on desktop. */
.teacher-images-single {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin: 0 auto;
}

.teacher-images-single .teacher-img {
  aspect-ratio: 4 / 5;
}

.teacher-text .section-label {
  display: block;
  margin-bottom: 12px;
}

/* The label here is a full-width block (so margin-bottom pushes the
   heading down), but the text itself stays left-aligned — so the
   squiggle needs to anchor under the text's left edge instead of the
   centered positioning it uses everywhere else. */
.teacher-text .section-label::after {
  left: 0;
  transform: none;
}

.teacher-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  margin-bottom: 20px;
}

.teacher-text p {
  color: var(--muted-foreground);
  margin-bottom: 18px;
}

.teacher-text .text-link {
  margin-top: 8px;
  color: var(--accent);
}

@media (min-width: 900px) {
  .teacher-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

/* =========================
   OFFERINGS
   ========================= */
.offerings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.offering-card {
  text-align: center;
}

/* Wraps the photo + its overlapping title tag. Left un-clipped on
   purpose (unlike the photo itself) so the tag can hang half on, half
   off the image — the "card" feel Scott asked for, closer to the live
   site's boxed labels instead of a plain caption underneath. */
.offering-media {
  position: relative;
  margin-bottom: 48px;
}

.offering-img-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.offering-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.offering-card:hover .offering-img {
  transform: scale(1.04);
}

.offering-title {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 72%;
  max-width: 220px;
}

/* Solid desert-red fill instead of an outlined cream box — gives the
   homepage a third strong dose of the accent palette (alongside the
   squiggles/CTA) and doubles as the whole card's click target. */
.offering-title a {
  display: block;
  padding: 16px 18px;
  background: var(--accent-deep);
  box-shadow: 0 10px 24px -12px rgba(43, 31, 28, 0.4);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.offering-title a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.offering-text {
  color: var(--muted-foreground);
  font-size: 15px;
  margin-bottom: 16px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.offering-card .text-link {
  color: var(--accent);
}

@media (min-width: 700px) {
  .offerings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  /* A slight, deliberate asymmetry so the row doesn't read like a
     machine-generated 3-up grid — the middle card sits a touch lower,
     like it was laid out by hand and eyeballed rather than snapped to it. */
  .offering-card:nth-child(2) {
    transform: translateY(28px);
  }
}

/* =========================
   CONTACT FORM
   ========================= */
.home-contact-form {
  max-width: 560px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.home-contact-form input,
.home-contact-form textarea,
.home-contact-form select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 2px;
  font-family: inherit;
  font-size: 15px;
  color: var(--foreground);
  transition: border-color 0.3s ease;
  resize: vertical;
}

.home-contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a08c78' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px 7px;
}

.home-contact-form select:invalid {
  color: var(--muted-foreground);
}

.home-contact-form input::placeholder,
.home-contact-form textarea::placeholder {
  color: var(--muted-foreground);
}

.home-contact-form input:focus,
.home-contact-form textarea:focus,
.home-contact-form select:focus {
  outline: none;
  border-color: var(--accent);
}

@media (min-width: 600px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.recaptcha-wrap {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.form-error,
.form-success {
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  font-size: 14px;
  text-align: center;
  border-radius: 2px;
}

.form-error {
  color: #8c2f24;
  background: #f6e4e0;
  border: 1px solid #d9a99f;
}

.form-success {
  color: #3d5c3a;
  background: #e7edde;
  border: 1px solid #b7c9a8;
}

.form-error[hidden],
.form-success[hidden] {
  display: none;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cta-btn:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.cta-btn-arrow {
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
}

/* Secondary-emphasis variant — same shape/spacing as .cta-btn, but
   outlined instead of filled so it doesn't compete with a primary CTA
   sitting nearby (e.g. "Studio Etiquette" next to "Book Your Intro"). */
.cta-btn-outline {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cta-btn-outline:hover {
  background: var(--foreground);
  color: var(--primary-foreground);
  border-color: var(--foreground);
}

/* Cream-on-maroon variant for a CTA that sits inside a dark
   accent-deep card (e.g. the "New to Maru" intro-offer banner) —
   reversed contrast so the button reads as part of the banner itself
   instead of a separate stark black box floating below it. */
.cta-btn-on-dark {
  background: var(--primary-foreground);
  color: var(--accent-deep);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.cta-btn-on-dark:hover {
  background: var(--accent);
  color: var(--primary-foreground);
}

/* An element that's both a hover-interactive button AND a scroll-reveal
   target (e.g. "Studio Etiquette", which carries [data-reveal] so it
   fades in on scroll) needs its own transition list to win the cascade
   over [data-reveal]'s. Both rules set the `transition` *property*, and
   since one doesn't merge into the other, whichever rule the browser
   applies wins outright — [data-reveal] (opacity/transform only) was
   winning, so background/color/border-color changed instantly on hover
   instead of easing, and the hover lift used its 0.8s reveal duration
   instead of 0.3s. This selector is more specific than either rule
   alone, so it wins regardless of source order. */
.cta-btn[data-reveal],
.cta-btn-outline[data-reveal],
.cta-btn-on-dark[data-reveal] {
  transition: opacity 0.8s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cta-btn-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* =========================
   FOOTER
   ========================= */
.footer {
  background: var(--secondary);
  padding: 64px 0 24px;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.footer-logo-img {
  height: 47px;
  width: auto;
  margin-bottom: 12px;
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted-foreground);
}

.footer-nav-label,
.footer-social-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(43, 31, 28, 0.18);
}

.footer-nav-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 10px 24px;
}

.footer-nav-link {
  font-size: 14px;
  color: var(--foreground);
  transition: color 0.3s ease;
}

.footer-nav-link:hover {
  color: var(--accent);
}

.footer-social-links {
  display: flex;
  gap: 16px;
}

.footer-social-link {
  width: 18px;
  height: 18px;
  color: var(--foreground);
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social-link svg {
  width: 100%;
  height: 100%;
}

.footer-social-link:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

.sub-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.sub-footer-text a {
  color: var(--muted-foreground);
  transition: color 0.3s ease;
}

.sub-footer-text a:hover {
  color: var(--accent);
}

@media (min-width: 700px) {
  .footer-main {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer-main.footer-main-minimal {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .sub-footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-logo-static {
  cursor: default;
}

/* =========================
   SCROLL REVEALS (gentle fade + rise)
   ========================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-reveal].gsap-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero-word,
  .hero-tagline {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-bg-img {
    animation: none !important;
    transform: scale(1.04) !important;
  }
  .hero-bg-glow {
    animation: none !important;
  }
}