/* =========================================================================
   Wiblify Studio — main stylesheet
   Mirrors the React/Tailwind build using plain CSS + custom properties.
   ========================================================================= */

:root {
  --cream-50:  #fdfaf3;
  --cream-100: #f6f1e7;
  --cream-200: #ece4d2;
  --cream-300: #dccfb1;
  --ink-400:   #6b6359;
  --ink-600:   #3a342c;
  --ink-800:   #1a1714;
  --ink-900:   #0d0b09;
  --ink-950:   #050403;
  --accent-500: #e8503a;
  --accent-600: #d23f29;

  --shadow-card: 0 30px 60px -30px rgba(13, 11, 9, 0.25);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1400px;
  --pad-x: clamp(1.25rem, 3vw, 3rem);
}

/* ---------- Reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream-100);
  color: var(--ink-900);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }

::selection { background: var(--ink-900); color: var(--cream-100); }

/* Slim themed scrollbar */
html { scrollbar-width: thin; scrollbar-color: rgba(13, 11, 9, 0.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(13, 11, 9, 0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(13, 11, 9, 0.45); background-clip: padding-box; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---------- Typography ---------- */

.font-display { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -0.01em; }
.italic-display { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; }

.h-display-xl { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: 0.95; letter-spacing: -0.04em; }
.h-display-lg { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.h-display-md { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; }

/* ---------- Layout ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* No top padding on main — every first section sets its own pt to clear the fixed nav. */
.site-main { padding-top: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(13, 11, 9, 0.15);
  background: var(--cream-50);
  border-radius: 999px;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-500);
}
.eyebrow.dark {
  background: rgba(246, 241, 231, 0.05);
  border-color: rgba(246, 241, 231, 0.2);
  color: var(--cream-100);
}

.section-title-block { text-align: center; max-width: 48rem; margin: 0 auto; }
.section-title-block p { color: var(--ink-600); margin: 1.25rem auto 0; max-width: 36rem; }
.section-title-block h2 { margin-top: 1.25rem; }

/* ---------- Reveal animations ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

/* Scroll-driven per-character reveal */
[data-scroll-reveal] .char {
  display: inline-block;
  opacity: 0.18;
  transition: opacity 0.4s var(--ease-out);
}
[data-scroll-reveal] .char.is-on { opacity: 1; }

/* Image mask reveal */
.img-reveal { overflow: hidden; }
.img-reveal img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.15);
  transition: transform 1.4s var(--ease-out);
}
.img-reveal.is-visible img { transform: scale(1); }
.img-reveal.hover-zoom img:hover { transform: scale(1.05); }

/* Marquee */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track     { animation: marquee 40s linear infinite; }
.marquee-track-rev { animation: marquee 50s linear infinite reverse; }

/* ---------- Pill buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 999px;
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.pill .pill-circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
}
.pill .pill-circle > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.5s var(--ease-out);
}
.pill .pill-circle svg { width: 16px; height: 16px; }
.pill .pill-circle .icon-leave { transform: translate(0, 0); }
.pill .pill-circle .icon-enter { transform: translate(-140%, 140%); }
.pill:hover .pill-circle .icon-leave { transform: translate(140%, -140%); }
.pill:hover .pill-circle .icon-enter { transform: translate(0, 0); }

.pill.dark {
  background: var(--ink-900);
  color: var(--cream-100);
}
.pill.dark:hover { background: var(--ink-800); }
.pill.dark .pill-circle { background: var(--cream-100); color: var(--ink-900); }

.pill.light {
  background: var(--cream-100);
  color: var(--ink-900);
}
.pill.light:hover { background: var(--cream-50); }
.pill.light .pill-circle { background: var(--ink-900); color: var(--cream-100); }

.pill.outline {
  background: var(--cream-50);
  color: var(--ink-900);
  border: 1px solid rgba(13, 11, 9, 0.2);
}
.pill.outline:hover { background: var(--cream-100); }
.pill.outline .pill-circle { background: var(--ink-900); color: var(--cream-100); }

.pill.sm { padding: 0.25rem 0.25rem 0.25rem 1rem; }
.pill.sm .pill-circle { width: 28px; height: 28px; }
.pill.sm .pill-circle svg { width: 13px; height: 13px; }

/* ---------- Nav ---------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
}
.site-nav.is-scrolled,
.site-nav.menu-open {
  background: rgba(246, 241, 231, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(13, 11, 9, 0.1);
}
.site-nav .nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.brand svg { width: 32px; height: 32px; }
.nav-links {
  display: none;
  gap: 2rem;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--ink-800);
}
.nav-links button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.2s ease;
}
.nav-links button:hover,
.nav-links button[aria-expanded="true"] { color: var(--ink-950); }
.nav-links button .chevron { transition: transform 0.3s ease; opacity: 0.7; }
.nav-links button[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.nav-links button sup { font-size: 10px; color: var(--ink-400); transform: translateY(-4px); }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
}

/* Mobile nav: end cluster + hamburger + drawer */
.nav-end { display: flex; align-items: center; gap: 0.75rem; }
@media (max-width: 1023px) {
  .nav-end > .pill { display: none; }
}
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(13, 11, 9, 0.15);
  padding: 0 10px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 1.5px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1024px) {
  .nav-burger { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 45;
  background: var(--cream-100);
  padding: 2rem var(--pad-x) 3rem;
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  border-bottom: 1px solid rgba(13, 11, 9, 0.08);
}
.mobile-menu nav a sup {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--ink-400);
  transform: translateY(-6px);
}
.mobile-menu .cta-li { margin-top: 1.5rem; border: 0; }
.mobile-menu .cta-li a {
  background: var(--ink-900);
  color: var(--cream-100);
  border-radius: 999px;
  padding: 1rem 1.5rem;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  border-bottom: 0;
}
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

/* Mega menu */
.mega-backdrop {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 40;
  background: rgba(5, 4, 3, 0.3);
  backdrop-filter: blur(2px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mega-backdrop.is-open { opacity: 1; }

.mega-wrap {
  position: fixed;
  top: 72px;
  left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.mega-panel {
  position: relative;
  width: min(1200px, 92vw);
  background: var(--cream-50);
  border: 1px solid rgba(13, 11, 9, 0.1);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  transform-origin: top center;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events: auto;
  display: none;
}
.mega-panel.is-open { display: grid; }
.mega-panel.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; }
.mega-col-title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 0.75rem; }
.mega-link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}
.mega-link:hover { background: var(--cream-100); }
.mega-link .label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-900); }
.mega-link .label svg { width: 13px; height: 13px; opacity: 0; transform: translateX(-4px); transition: all 0.2s ease; }
.mega-link:hover .label svg { opacity: 1; transform: translateX(0); }
.mega-link .desc { font-size: 0.75rem; color: var(--ink-600); margin-top: 0.125rem; }

.mega-feature {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink-900);
  color: var(--cream-100);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}
.mega-feature .feature-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.5; transition: opacity 0.3s ease;
}
.mega-feature:hover .feature-bg { opacity: 0.7; }
.mega-feature > * { position: relative; }
.mega-feature .tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(246, 241, 231, 0.25);
  background: rgba(246, 241, 231, 0.1);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mega-feature .tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-500);
}
.mega-feature h3 { font-size: 1.5rem; margin-top: 1rem; line-height: 1.2; }
.mega-feature p { font-size: 0.875rem; color: rgba(246, 241, 231, 0.75); max-width: 28ch; line-height: 1.5; }
.mega-feature .cta {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500;
}
.mega-feature .cta-circle {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 999px; background: var(--cream-100); color: var(--ink-900);
  transition: transform 0.3s ease;
}
.mega-feature:hover .cta-circle { transform: translateX(4px); }

@media (max-width: 900px) {
  .mega-panel { grid-template-columns: 1fr; }
  .mega-cols { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */

.hero { position: relative; padding: 6.5rem 0 4rem; overflow: hidden; }
.fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero > .container,
.logo-cloud > .container { position: relative; z-index: 1; }
.hero .eyebrow-row { display: flex; justify-content: center; }
.hero .pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.hero h1 { text-align: center; margin-top: 1.5rem; }
.hero p {
  max-width: 38rem;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--ink-600);
  font-size: 1.125rem;
}
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---------- Logo cloud ---------- */

.logo-cloud { padding: 1rem 0 4rem; position: relative; overflow: hidden; }
.logo-cloud .heading { text-align: center; color: var(--ink-600); font-size: 0.875rem; letter-spacing: 0.04em; }
.logo-cloud .rows { position: relative; margin-top: 2.5rem; display: grid; gap: 2rem; }
.marquee {
  overflow: hidden;
}
.marquee-inner {
  display: flex;
  width: max-content;
  gap: 4rem;
  white-space: nowrap;
}
.marquee-inner span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: rgba(26, 23, 20, 0.7);
  transition: color 0.2s ease;
}
.marquee-inner span:hover { color: var(--ink-900); }

.logo-cloud .rows::before,
.logo-cloud .rows::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 8rem;
  pointer-events: none;
  z-index: 1;
}
.logo-cloud .rows::before { left: 0; background: linear-gradient(to right, var(--cream-100), transparent); }
.logo-cloud .rows::after  { right: 0; background: linear-gradient(to left, var(--cream-100), transparent); }

/* ---------- Value ---------- */

.value { padding: 7rem 0; }
.value .grid {
  display: grid;
  gap: 4rem;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .value .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.value .image-card { min-width: 0; }

.value h2 { margin-top: 1.5rem; }
.value p.lead { margin-top: 1.5rem; max-width: 32rem; color: var(--ink-600); font-size: 1.125rem; }
.value ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.75rem; color: var(--ink-800); }
.value ul li { display: flex; gap: 0.75rem; align-items: flex-start; }
.value ul li::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-500); margin-top: 0.5rem;
}
.value .image-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ink-900);
  min-height: 480px;
}
@media (min-width: 1024px) { .value .image-card { min-height: 100%; } }
.value .image-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.value .image-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(45deg, rgba(232, 80, 58, 0.4), transparent 60%);
}

/* ---------- Stats ---------- */

/* Cursor-tracked paint-brush reveal — canvas erases dark, exposes gradient + logo beneath */
[data-spotlight] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #c8b5e8 0%, #e9d6ec 28%, #f5dcb6 55%, #efd889 78%, #d4dd91 100%);
}
[data-spotlight] .spotlight-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 12vw, 140px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
[data-spotlight] .spotlight-logo svg { width: 100%; height: 100%; }
[data-spotlight] .spotlight-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
[data-spotlight] > .container { position: relative; z-index: 3; }

.stats { color: var(--cream-100); padding: 6rem 0; }
.stats h2 { margin-top: 0.75rem; max-width: 36rem; }
.stats .heading p { font-size: 0.875rem; color: rgba(246, 241, 231, 0.6); letter-spacing: 0.04em; }
.stats .grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 3.5rem 5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .stats .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stats .stat-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  border-top: 1px solid rgba(246, 241, 231, 0.15);
  padding-top: 2.5rem;
  min-width: 0;
}
.stats .stat-label {
  color: rgba(246, 241, 231, 0.8);
  max-width: 16rem;
  font-size: 0.95rem;
  flex-shrink: 1;
  min-width: 0;
}
.stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.stat-value em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.5em;
  margin-left: 0.15em;
  letter-spacing: 0.02em;
}

/* ---------- Services ---------- */

.services { padding: 7rem 0; }
.services .grid {
  margin-top: 4rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .services .grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  border-radius: 24px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid rgba(13, 11, 9, 0.05);
  background-image: linear-gradient(135deg, var(--from), var(--cream-100));
}
.service-card.span-2 { grid-column: span 1; }
@media (min-width: 1024px) { .service-card.span-2 { grid-column: span 2; } }

.service-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.875rem; }
.service-card p  { color: var(--ink-600); margin: 0.75rem 0 0; max-width: 28rem; line-height: 1.55; }

.service-card .img-card {
  margin-top: auto;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(13, 11, 9, 0.05);
  aspect-ratio: 16 / 10;
}
.service-card .img-card.portrait {
  aspect-ratio: auto;
  flex: 1;
  min-height: 360px;
}

/* ---------- Case Studies ---------- */

.case-studies { padding: 7rem 0; }
.case-studies .cs-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap; margin-bottom: 3.5rem;
}
.case-studies .cs-head h2 { margin: 0; line-height: 1.05; }

.cs-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .cs-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cs-grid { grid-template-columns: repeat(3, 1fr); } }

.cs-card { display: block; }
.cs-link { display: block; cursor: pointer; }

.cs-media {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 4 / 3;
}
.cs-img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 1.4s var(--ease-out), filter 0.7s var(--ease-out);
}
.img-reveal.is-visible .cs-img,
.cs-card .cs-img { transform: scale(1); }

.cs-link:hover .cs-img { filter: blur(10px); transform: scale(1.05); }

.cs-overlay {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.cs-overlay::before {
  content: '';
  position: absolute;
  left: var(--cs-mx, 50%);
  top:  var(--cs-my, 50%);
  width: 0; height: 0;
  background: rgba(13, 11, 9, 0.55);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: width 0.7s var(--ease-out), height 0.7s var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
.cs-link:hover .cs-overlay { opacity: 1; }
.cs-link:hover .cs-overlay::before {
  width: 220%;
  height: 220%;
}

.cs-desc {
  color: var(--cream-100);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 500;
  max-width: 24rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  margin: 0;
}

.cs-view {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cream-100);
  color: var(--ink-900);
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
}
.cs-view-circle {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--cream-100);
}

.cs-meta { margin-top: 1rem; }
.cs-meta h3 { font-weight: 500; color: var(--ink-900); font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; margin: 0; }
.cs-meta p  { color: var(--ink-600); font-size: 0.875rem; margin: 0.25rem 0 0; }

/* ---------- CTA banner ---------- */

.cta-banner { padding: 5rem 0; }
.cta-banner > .container {
  max-width: none;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.cta-banner .card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  transform: scale(var(--cta-scale, 0.9));
  transform-origin: center;
  will-change: transform;
  background: var(--ink-900);
  color: var(--cream-100);
  min-height: 420px;
  display: flex;
}
.cta-banner .card .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 1;
}
.cta-banner .card .gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(13,11,9,0.92) 0%, rgba(13,11,9,0.7) 45%, rgba(13,11,9,0.15) 100%);
}
.cta-banner .card .body {
  position: relative;
  max-width: 36rem;
  padding: 4rem clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-banner h2 { line-height: 1.05; }
.cta-banner p { color: rgba(246, 241, 231, 0.75); margin: 1.5rem 0 0; max-width: 28rem; }
.cta-banner .pill-row { margin-top: 2rem; }

/* ---------- Awards ---------- */

.awards { background: var(--ink-900); color: var(--cream-100); padding: 7rem 0; position: relative; overflow: hidden; }
.awards .section-title-block p { color: rgba(246, 241, 231, 0.7); }
.awards .grid {
  margin-top: 4rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .awards .grid { grid-template-columns: repeat(3, 1fr); } }

.award-card {
  position: relative;
  background: var(--cream-100);
  color: var(--ink-900);
  border-radius: 24px;
  padding: 1.75rem;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.award-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.award-card .badge-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.5rem; }
.award-card .badge-name + span { color: var(--ink-400); font-size: 0.875rem; margin-left: 0.5rem; }
.award-chips { display: flex; gap: 6px; }
.award-chips span { width: 8px; height: 20px; border-radius: 2px; }
.award-card .title-block { margin-top: 3rem; }
.award-card .title-block h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.875rem; line-height: 1.1; }
.award-card .title-block p  { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.875rem; margin: 0.25rem 0 0; }
.award-card .body { color: var(--ink-800); font-size: 1rem; line-height: 1.55; padding-right: 5rem; margin-top: auto; }

.badge-glyph {
  position: absolute;
  bottom: -1.5rem; right: -1.5rem;
  width: 7rem; height: 7rem;
}
.badge-glyph .square {
  position: absolute; inset: 0;
  border-radius: 16px;
  transform: rotate(-12deg);
  display: grid;
  place-items: center;
  color: var(--cream-100);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 2.25rem;
  box-shadow: var(--shadow-card);
}
.badge-glyph .dot {
  position: absolute; top: -4px; left: -4px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(246, 241, 231, 0.9);
}

/* ---------- Process ---------- */

.process { padding: 7rem 0; }
.process .timeline { margin-top: 5rem; position: relative; }
.process .timeline-line {
  display: none;
}
@media (min-width: 1024px) {
  .process .timeline-line {
    display: block;
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 0; bottom: 0;
    width: 1px;
    background: rgba(13, 11, 9, 0.1);
    overflow: hidden;
  }
  .process .timeline-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-500);
    transform-origin: top center;
    transform: scaleY(var(--progress, 0));
    will-change: transform;
  }
}
.process .steps { display: grid; gap: 5rem; }
.process .step {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .process .step {
    grid-template-columns: 1fr auto 1fr;
  }
  .process .step.odd .text { text-align: right; }
}
.process .text .meta {
  display: inline-flex;
  border: 1px solid rgba(13, 11, 9, 0.15);
  background: var(--cream-50);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}
.process .text .name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2.25rem;
  color: var(--ink-400);
  margin: 0.75rem 0 0;
}
.process .text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.875rem;
  margin-top: 0.5rem;
}
.process .text p { color: var(--ink-600); margin-top: 0.75rem; max-width: 28rem; line-height: 1.55; }
@media (min-width: 1024px) {
  .process .step.odd .text p,
  .process .step.odd .text .meta { margin-left: auto; }
}

.process .dot-wrap {
  display: flex;
  justify-content: center;
}
.process .dot {
  position: relative;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(13, 11, 9, 0.2);
  box-shadow: 0 0 0 8px var(--cream-100), var(--shadow-card);
  transition: background 0.4s var(--ease-out);
}
.process .dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--accent-500);
  opacity: 0;
}
.process .dot-wrap.is-active .dot { background: var(--accent-500); }
.process .dot-wrap.is-active .dot::after {
  opacity: 1;
  animation: pulse-ring 3s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.4); opacity: 0; }
}

.process .step .image {
  max-width: 28rem;
  margin: 0 auto;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(13, 11, 9, 0.05);
  aspect-ratio: 16 / 10;
}
@media (min-width: 1024px) {
  .process .step.even .image { margin-right: 0; }
  .process .step.odd .image  { margin-left: 0; }
}

/* Order swap on desktop for alternating layouts */
@media (min-width: 1024px) {
  .process .step .text { order: 1; }
  .process .step .dot-wrap { order: 2; }
  .process .step .image { order: 3; }
  .process .step.even .text { order: 3; }
  .process .step.even .image { order: 1; }
}
.process .step .text { order: 1; }
.process .step .dot-wrap { order: 2; display: none; }
@media (min-width: 1024px) { .process .step .dot-wrap { display: flex; } }

/* ---------- Pricing ---------- */

.pricing {
  padding: 7rem 0;
  background: var(--cream-100);
  color: var(--ink-900);
  position: relative;
}
.pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  opacity: var(--p-shift, 0);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.05s linear;
}
.pricing > .container { position: relative; z-index: 1; }

/* Light state (default, p < 0.5): cream bg, ink text, dark pill */
.pricing h2 { color: var(--ink-900); transition: color 0.3s ease; }
.pricing .head p { color: var(--ink-600); transition: color 0.3s ease; }
.pricing .pill.light {
  background-color: var(--ink-900);
  color: var(--cream-100);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pricing .pill.light .pill-circle {
  background-color: var(--cream-100);
  color: var(--ink-900);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark state (snapped on at p >= 0.5): text inverts to cream, pill flips */
.pricing.is-dark { color: var(--cream-100); }
.pricing.is-dark h2 { color: var(--cream-100); }
.pricing.is-dark .head p { color: rgba(246, 241, 231, 0.7); }
.pricing.is-dark .pill.light {
  background-color: var(--cream-100);
  color: var(--ink-900);
}
.pricing.is-dark .pill.light .pill-circle {
  background-color: var(--ink-900);
  color: var(--cream-100);
}
.pricing .head-grid {
  display: grid;
  gap: 4rem 4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .pricing .head-grid { grid-template-columns: 1fr auto; } }
.pricing h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.05; }
.pricing .head p { color: var(--ink-600); margin-top: 1.5rem; max-width: 28rem; line-height: 1.5; }

.pricing .cards {
  margin-top: 1rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
}
@media (min-width: 768px) { .pricing .cards { grid-template-columns: 1fr 1fr; } }

.plan {
  background: var(--cream-50);
  border: 1px solid rgba(13, 11, 9, 0.05);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink-900);
}
.plan .body { padding: 1.75rem; flex: 1; }
.plan .plan-head { display: flex; align-items: baseline; justify-content: space-between; }
.plan .plan-head .name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.875rem; color: var(--ink-900); }
.plan .plan-head .price { font-family: 'Cormorant Garamond', serif; font-size: 2.25rem; color: var(--ink-900); }
.plan ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; color: var(--ink-800); }
.plan ul li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; }
.plan ul li::before {
  content: '✓';
  color: var(--accent-500);
  font-weight: 600;
}
.plan .pill-row { margin-top: 1.75rem; }
.plan .visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.plan .visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Testimonials ---------- */

.testimonials { padding: 7rem 0; }
.testimonials h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 56rem;
}
.testimonials .grid {
  margin-top: 4rem;
  display: grid;
  gap: 3rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .testimonials .grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.testimonial-stage {
  position: relative;
  height: 320px;
}
.testimonial {
  position: absolute;
  inset: 0;
  background: var(--cream-50);
  border: 1px solid rgba(13, 11, 9, 0.05);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.testimonial.is-active { opacity: 1; transform: none; pointer-events: auto; }
.testimonial .meta { display: flex; align-items: center; justify-content: space-between; }
.testimonial .meta-left { display: flex; align-items: center; gap: 0.75rem; }
.testimonial .source { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }
.testimonial .tags { color: var(--ink-600); font-size: 0.75rem; display: flex; gap: 0.5rem; }
.testimonial .stars { color: #fbbf24; font-size: 0.875rem; letter-spacing: 1px; }
.testimonial blockquote {
  margin: 2.5rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.2;
}
.testimonial .name { color: var(--ink-600); margin-top: 2rem; }

.testimonial-nav {
  position: absolute;
  left: 0;
  bottom: -64px;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.testimonial-arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(13, 11, 9, 0.15);
  color: var(--ink-900);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.testimonial-arrow:hover {
  background: var(--ink-900);
  color: var(--cream-100);
  border-color: var(--ink-900);
}
.testimonial-arrow.prev:hover { transform: translateX(-2px); }
.testimonial-arrow.next:hover { transform: translateX(2px); }

.test-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; min-width: 0; }
.test-stat .v { font-family: 'Cormorant Garamond', serif; font-size: 3rem; }
.test-stat .l { color: var(--ink-600); font-size: 0.875rem; line-height: 1.2; margin-top: 0.5rem; }
.test-stat .stars { color: #fbbf24; margin-top: 0.25rem; font-size: 0.75rem; letter-spacing: 1px; }

/* ---------- Blog ---------- */

section.blog { padding: 7rem 0; }
section.blog .section-title-block { max-width: 64rem; }
section.blog .grid { margin-top: 4rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { section.blog .grid { grid-template-columns: repeat(3, 1fr); } }

.post .img {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: rgba(13, 11, 9, 0.05);
}
.post .meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; font-size: 0.75rem; color: var(--ink-600); }
.post .meta .dot { width: 4px; height: 4px; border-radius: 999px; background: rgba(13, 11, 9, 0.3); }
.post h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.5rem; margin-top: 0.5rem; line-height: 1.3; }
.post:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.post p { color: var(--ink-600); font-size: 0.875rem; margin-top: 0.75rem; line-height: 1.55; }

section.blog .footer-cta { display: flex; justify-content: center; margin-top: 3.5rem; }

/* ---------- FAQ ---------- */

.faq { padding: 7rem 0; }
.faq .grid {
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .faq .grid { grid-template-columns: 1fr 1.4fr; } }
.faq h2 { line-height: 1.02; }
.faq .lead { color: var(--ink-600); margin: 1.25rem 0 0; max-width: 28rem; line-height: 1.5; }

.faq .card {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, #d1fae5, var(--cream-50));
  border: 1px solid rgba(13, 11, 9, 0.05);
  border-radius: 24px;
  padding: 1.5rem;
  max-width: 22rem;
}
.faq .card .head { display: flex; align-items: center; gap: 0.75rem; }
.faq .card .head .avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--cream-200);
  display: grid; place-items: center;
  font-family: 'Cormorant Garamond', serif;
}
.faq .card .head p { font-size: 0.875rem; font-weight: 500; margin: 0; }
.faq .card .head small { font-size: 0.75rem; color: var(--ink-600); display: block; margin-top: 2px; }
.faq .card .desc { color: var(--ink-600); font-size: 0.875rem; margin-top: 1rem; line-height: 1.5; }
.faq .card .pill-row { margin-top: 1.25rem; }
.faq .card .email-line { font-size: 0.75rem; color: var(--ink-600); margin-top: 1.25rem; }
.faq .card .email-line a { text-decoration: underline; text-underline-offset: 2px; }

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(13, 11, 9, 0.1);
  border-bottom: 1px solid rgba(13, 11, 9, 0.1);
}
.faq-item { border-bottom: 1px solid rgba(13, 11, 9, 0.1); }
.faq-item:last-child { border-bottom: 0; }
.faq-item button.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
}
.faq-item .icon-circle {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(13, 11, 9, 0.15);
  background: var(--cream-50);
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}
.faq-item.is-open .icon-circle { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { color: var(--ink-600); padding: 0 3rem 1.5rem 0; line-height: 1.55; margin: 0; }

/* ---------- Footer ---------- */

.site-footer { background: var(--cream-100); }
.site-footer .footer-top { padding: 6rem 0 2.5rem; }
.site-footer .top-grid {
  display: grid;
  gap: 3.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .site-footer .top-grid { grid-template-columns: 1.2fr 2fr 1fr; } }

.site-footer p.lead {
  color: var(--ink-600);
  max-width: 20rem;
  font-size: 0.875rem;
  margin: 1.25rem 0 0;
  line-height: 1.55;
}

.site-footer .col-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .site-footer .col-grid { grid-template-columns: repeat(4, 1fr); } }

.site-footer .col-title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-400);
}
.site-footer .col ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.625rem; font-size: 0.875rem; color: var(--ink-800); }
.site-footer .col a:hover { color: var(--ink-950); }

.site-footer .contact { display: grid; gap: 1.75rem; align-content: start; }
.site-footer .contact a { display: block; margin-top: 0.75rem; font-size: 1rem; font-weight: 500; }
.site-footer .contact .text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.3s var(--ease-out);
}
.site-footer .contact .text-link svg { transition: transform 0.3s var(--ease-out); }
.site-footer .contact .text-link:hover { gap: 0.65rem; }
.site-footer .contact .text-link:hover svg { transform: translate(2px, -2px); }

.site-footer .legal {
  background: var(--ink-950);
  color: rgba(246, 241, 231, 0.7);
}
.site-footer .legal-inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--pad-x);
  max-width: var(--container);
  margin: 0 auto;
  font-size: 0.75rem;
}
.site-footer .legal a:hover { color: var(--cream-100); }