/* VueChat — Custom styles supplementing Tailwind */

:root {
  --bg-dark: #0F0E0E;
  --bg-light: #F8F6F2;
  --accent-coral: #E8A598;
  --accent-gold: #C9A961;
  --text-dark: #E8E5DF;
  --text-light: #1A1A1A;
  --text-muted: #9A9490;
}

/* ─── Base ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-dark);
  color: var(--text-dark);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─── Typography ────────────────────────────────────── */
.font-display { font-family: 'Fraunces', serif; }

.display-hero {
  font-family: 'Fraunces', serif;
  font-size: clamp(3.2rem, 7.5vw, 6.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero-italic {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

.display-section {
  font-family: 'Fraunces', serif;
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.display-sm {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

/* ─── Colour utilities ──────────────────────────────── */
.text-coral  { color: var(--accent-coral); }
.text-gold   { color: var(--accent-gold); }
.text-muted  { color: var(--text-muted); }
.bg-dark     { background-color: var(--bg-dark); }
.bg-off      { background-color: #161413; }
.bg-light    { background-color: var(--bg-light); }

/* ─── Nav ───────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

#site-header.scrolled {
  background: rgba(15, 14, 14, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(232, 165, 152, 0.1);
}

.nav-logo {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-dark);
  text-decoration: none;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--accent-coral); }

.btn-primary {
  display: inline-block;
  background-color: var(--accent-coral);
  color: #0F0E0E;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover {
  background-color: #d4907e;
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-block;
  border: 1px solid var(--accent-coral);
  color: var(--accent-coral);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-outline:hover {
  background-color: var(--accent-coral);
  color: #0F0E0E;
  transform: translateY(-1px);
}

/* ─── Mobile menu ───────────────────────────────────── */
#mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: 80vw;
  max-width: 360px;
  height: 100vh;
  background: #161413;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid rgba(232, 165, 152, 0.15);
}
#mobile-menu.open { transform: translateX(0); }

#mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
#mobile-overlay.open { opacity: 1; pointer-events: all; }

/* ─── Hamburger ─────────────────────────────────────── */
.hamburger { cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-dark);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Hero ──────────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 14vh 5vw 8vh;
  position: relative;
  overflow: hidden;
}

.hero-image-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: grayscale(20%);
}
.hero-image-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg-dark) 55%, transparent 100%),
              linear-gradient(to top, var(--bg-dark) 15%, transparent 70%);
}

/* ─── Photo collage strip ───────────────────────────── */
.collage-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.collage-strip::-webkit-scrollbar { height: 3px; }
.collage-strip::-webkit-scrollbar-track { background: transparent; }
.collage-strip::-webkit-scrollbar-thumb { background: var(--accent-coral); }

.collage-img {
  flex: 0 0 auto;
  width: 220px;
  height: 320px;
  object-fit: cover;
  scroll-snap-align: start;
  filter: grayscale(15%) contrast(1.05);
  transition: filter 0.3s;
}
.collage-img:hover { filter: grayscale(0%) contrast(1.1); }

@media (min-width: 768px) {
  .collage-img { width: 260px; height: 380px; }
}

/* ─── Testimonial cards ─────────────────────────────── */
.testimonial-card {
  background: #161413;
  border: 1px solid rgba(232, 165, 152, 0.1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.3s;
}
.testimonial-card:hover { border-color: rgba(232, 165, 152, 0.35); }

.testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(20%);
}

/* ─── Stats strip ───────────────────────────────────── */
.stat-block {
  border-left: 1px solid rgba(232, 165, 152, 0.2);
  padding: 1.5rem 2rem;
  flex: 1;
}
.stat-block:first-child { border-left: none; }
.stat-value {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--accent-coral);
  line-height: 1;
}
.stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ─── Blog cards ────────────────────────────────────── */
.blog-card {
  background: #161413;
  overflow: hidden;
  border: 1px solid rgba(232, 165, 152, 0.08);
  transition: border-color 0.3s, transform 0.3s;
}
.blog-card:hover {
  border-color: rgba(232, 165, 152, 0.3);
  transform: translateY(-4px);
}
.blog-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter 0.3s;
}
.blog-card:hover .blog-card-img { filter: grayscale(0%); }

.tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  background: rgba(232, 165, 152, 0.12);
  color: var(--accent-coral);
}

/* ─── Service cards ─────────────────────────────────── */
.service-block {
  border-top: 1px solid rgba(232, 165, 152, 0.2);
  padding-top: 2rem;
}

/* ─── FAQ accordion ─────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid rgba(232, 165, 152, 0.12);
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  user-select: none;
  gap: 1rem;
}
.faq-question:hover { color: var(--accent-coral); }

.faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid rgba(232, 165, 152, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--accent-coral);
  transition: transform 0.3s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  padding-bottom: 1.5rem;
}

/* ─── Form ──────────────────────────────────────────── */
.form-field {
  width: 100%;
  background: #161413;
  border: 1px solid rgba(232, 165, 152, 0.2);
  color: var(--text-dark);
  padding: 0.85rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.form-field:focus { border-color: var(--accent-coral); }
.form-field::placeholder { color: var(--text-muted); }

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

select.form-field option { background: #161413; }

/* ─── Splash intro ───────────────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0F0E0E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), visibility 0.9s;
}
#splash.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-logo {
  font-family: 'Fraunces', serif;
  font-size: clamp(3.5rem, 12vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #E8E5DF;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  line-height: 1;
}
.splash-logo.in { opacity: 1; transform: translateY(0); }
.splash-line {
  width: 0;
  height: 1px;
  background: #E8A598;
  margin: 20px auto 18px;
  transition: width 0.55s ease 0.45s;
}
.splash-line.in { width: 56px; }
.splash-tag {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9A9490;
  opacity: 0;
  transition: opacity 0.55s ease 0.75s;
  text-align: center;
}
.splash-tag.in { opacity: 1; }

/* ─── Cookie banner ─────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: #161413;
  border-top: 1px solid rgba(232,165,152,0.15);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  flex-wrap: wrap;
}
#cookie-banner p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; max-width: 640px; }
#cookie-banner a { color: var(--accent-coral); }
.cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-accept {
  background: var(--accent-coral); color: #0F0E0E;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 20px; border: none; cursor: pointer;
}
.cookie-decline {
  background: transparent; color: var(--text-muted);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px; border: 1px solid rgba(232,165,152,0.2); cursor: pointer;
}
.cookie-decline:hover { color: var(--text-dark); }

/* ─── Results stat cards ─────────────────────────────── */
.result-card {
  background: var(--bg-dark);
  border: 1px solid rgba(26,26,26,0.15);
  padding: 36px 32px;
}
.result-card .result-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--accent-coral);
  line-height: 1;
  margin-bottom: 8px;
}
.result-card .result-label {
  font-size: 0.82rem;
  color: #6b6662;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.result-card .result-niche {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a4845;
  margin-top: 12px;
}

/* ─── Divider line ──────────────────────────────────── */
.divider {
  width: 60px;
  height: 1px;
  background: var(--accent-coral);
  margin: 1.5rem 0;
}

/* ─── Trust strip ───────────────────────────────────── */
.trust-item {
  padding: 1.25rem 2rem 1.25rem 0;
}
@media (min-width: 768px) {
  .trust-item { padding: 1.5rem 2.5rem; }
}
.trust-value {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.3rem;
}
.trust-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* ─── Hero load animations ──────────────────────────── */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim-1 { animation: heroIn 1s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
.hero-anim-2 { animation: heroIn 1s cubic-bezier(0.16,1,0.3,1) 0.4s  both; }
.hero-anim-3 { animation: heroIn 1s cubic-bezier(0.16,1,0.3,1) 0.65s both; }
.hero-anim-4 { animation: heroIn 1s cubic-bezier(0.16,1,0.3,1) 0.85s both; }

/* ─── Scroll reveal — directional ───────────────────── */
.reveal {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.up    { transform: translateY(55px); }
.reveal.left  { transform: translateX(-70px); }
.reveal.right { transform: translateX(70px); }
.reveal.scale { transform: scale(0.88) translateY(24px); }
.reveal.visible { opacity: 1; transform: none; }

/* delay variants */
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.45s; }
.reveal.d5 { transition-delay: 0.6s; }

/* ─── Stagger grid reveal ───────────────────────────── */
.stagger-grid > * {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.stagger-grid.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-grid.visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-grid.visible > *:nth-child(3) { transition-delay: 0.24s; }
.stagger-grid.visible > *:nth-child(4) { transition-delay: 0.36s; }
.stagger-grid.visible > *:nth-child(5) { transition-delay: 0.48s; }
.stagger-grid.visible > *:nth-child(6) { transition-delay: 0.60s; }
.stagger-grid.visible > * { opacity: 1; transform: none; }

/* legacy compat */
.fade-in-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* ─── Image parallax wrapper ────────────────────────── */
.parallax-wrap {
  overflow: hidden;
  position: relative;
}
.parallax-img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  display: block;
}

/* ─── Horizontal scroll collage ─────────────────────── */
.h-scroll-section {
  position: relative;
  height: 220vh;
}
.h-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #161413;
  gap: 2rem;
}
.h-scroll-label {
  padding: 0 5vw;
}
.h-scroll-track {
  display: flex;
  gap: 14px;
  padding: 0 5vw;
  will-change: transform;
}
.h-scroll-img {
  flex: 0 0 auto;
  width: 200px;
  height: 300px;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.05);
  transition: filter 0.4s;
}
.h-scroll-img:nth-child(even)  { margin-top: 40px; }
.h-scroll-img:nth-child(3n)    { margin-top: -20px; }
.h-scroll-img:hover { filter: grayscale(0%) contrast(1.1); }

@media (min-width: 768px) {
  .h-scroll-img { width: 260px; height: 380px; }
  .h-scroll-img:nth-child(even)  { margin-top: 60px; }
  .h-scroll-img:nth-child(3n)    { margin-top: -30px; }
}

/* ─── Footer ────────────────────────────────────────── */
footer {
  background: #0A0909;
  border-top: 1px solid rgba(232, 165, 152, 0.1);
}
.footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
  display: block;
  margin-bottom: 0.6rem;
}
.footer-link:hover { color: var(--accent-coral); }

/* ─── Utility ───────────────────────────────────────── */
.section-pad { padding: 6rem 5vw; }
@media (min-width: 768px) { .section-pad { padding: 8rem 6vw; } }
@media (min-width: 1280px) { .section-pad { padding: 10rem 8vw; } }

.max-w-site { max-width: 1400px; margin: 0 auto; }

.light-section {
  background-color: var(--bg-light);
  color: var(--text-light);
}
.light-section .text-muted { color: #6b6662; }

/* ─── Success state ─────────────────────────────────── */
#form-success {
  display: none;
  text-align: center;
  padding: 4rem 2rem;
}
#form-success.visible { display: block; }

/* ─── Responsive nav hide ───────────────────────────── */
@media (max-width: 767px) {
  .desktop-nav { display: none; }
}
@media (min-width: 768px) {
  .mobile-hamburger { display: none; }
}

/* ─── Creator carousel ──────────────────────────────── */
.carousel-track-wrap {
  overflow: hidden;
  width: 100%;
  cursor: grab;
}
.carousel-track-wrap:active { cursor: grabbing; }

@keyframes carouselScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.carousel-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: carouselScroll 28s linear infinite;
  will-change: transform;
}
.carousel-track.paused { animation-play-state: paused; }

.carousel-slide {
  flex: 0 0 auto;
  width: 280px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(12%) brightness(0.88);
  transition: filter 0.4s ease, transform 0.5s ease;
  display: block;
}
.carousel-slide:hover img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.03);
}

@media (min-width: 768px) {
  .carousel-slide { width: 420px; height: 520px; }
}

/* ═══════════════════════════════════════════════════════
   UTILITY CLASSES — replaces Tailwind CDN dependency
   ═══════════════════════════════════════════════════════ */

/* Display */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.grid          { display: grid; }
.hidden        { display: none; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }

/* Flex alignment */
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Column span */
.col-span-2  { grid-column: span 2 / span 2; }

/* Order */
.order-1 { order: 1; }
.order-2 { order: 2; }

/* Gap */
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Width / Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-8    { width: 2rem; }
.h-8    { height: 2rem; }

/* Max-width */
.max-w-xs  { max-width: 20rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }

/* Margin auto */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-4    { margin-left: 1rem; }

/* Margin bottom */
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }

/* Margin top */
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }

/* Padding */
.p-10  { padding: 2.5rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8  { padding-left: 2rem; padding-right: 2rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-2  { padding-top: 0.5rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.pt-20 { padding-top: 5rem; }

/* Z-index */
.z-10 { z-index: 10; }

/* Position offsets */
.top-6   { top: 1.5rem; }
.right-6 { right: 1.5rem; }

/* Typography — font size */
.text-xs   { font-size: 0.75rem; line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl  { font-size: 3rem; line-height: 1; }

/* Typography — font weight */
.font-normal   { font-weight: 400; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Typography — letter spacing */
.tracking-normal  { letter-spacing: 0; }
.tracking-widest  { letter-spacing: 0.1em; }

/* Typography — line height */
.leading-relaxed { line-height: 1.625; }

/* Typography — transform */
.uppercase    { text-transform: uppercase; }
.normal-case  { text-transform: none; }
.text-center  { text-align: center; }

/* Borders */
.border   { border-width: 1px; border-style: solid; border-color: rgba(232,165,152,0.15); }
.border-t { border-top: 1px solid rgba(232,165,152,0.1); }
.border-b { border-bottom: 1px solid rgba(232,165,152,0.1); }

/* Misc */
.overflow-hidden { overflow: hidden; }
.object-cover    { object-fit: cover; }
.opacity-80      { opacity: 0.8; }

/* Space-y (vertical gaps via margin) */
.space-y-5 > * + *  { margin-top: 1.25rem; }
.space-y-6 > * + *  { margin-top: 1.5rem; }
.space-y-8 > * + *  { margin-top: 2rem; }
.space-y-px > * + * { margin-top: 1px; }

/* ─── Responsive utilities ─────────────────────────── */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:px-10       { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:gap-0       { gap: 0; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:border-l    { border-left: 1px solid rgba(232,165,152,0.12); }
  .md\:col-span-1  { grid-column: span 1 / span 1; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-2   { grid-column: span 2 / span 2; }
  .lg\:col-span-3   { grid-column: span 3 / span 3; }
  .lg\:order-1      { order: 1; }
  .lg\:order-2      { order: 2; }
}