:root {
  --ink: #151215;
  --ink-soft: #332a2d;
  --muted: #6f6266;
  --line: rgba(110, 34, 51, 0.14);
  --paper: #ffffff;
  --wash: #f8f7f5;
  --wine: #6E2233;
  --wine-2: #8D3A46;
  --wine-soft: #f9f0f2;
  --gold: #d8a24f;
  --green: #20b486;
  --dark: #0a0b10;
  --radius: 8px;
  --shadow-sm: 0 10px 28px rgba(30, 20, 24, 0.08);
  --shadow-md: 0 22px 60px rgba(30, 20, 24, 0.14);
  --shadow-lg: 0 34px 90px rgba(30, 20, 24, 0.2);
  --ease-water: cubic-bezier(0.19, 1, 0.22, 1);
  --container: 1160px;
}

[data-theme="dark"] {
  --ink: #fff8f5;
  --ink-soft: #f0ded8;
  --muted: #c9b7b1;
  --line: rgba(255,255,255,0.13);
  --paper: #0b0d12;
  --wash: #121018;
  --wine-soft: rgba(110,34,51,0.18);
  --dark: #07080d;
  --shadow-sm: 0 10px 28px rgba(0,0,0,0.28);
  --shadow-md: 0 22px 60px rgba(0,0,0,0.36);
  --shadow-lg: 0 34px 90px rgba(0,0,0,0.46);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

h1, h2, h3, h4, .brand span:last-child {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  line-height: 1.02;
}

.site-shell {
  overflow: clip;
  background: linear-gradient(180deg, #fbf7f4 0%, #fff 18%, var(--wash) 100%);
}
[data-theme="dark"] .site-shell { background: var(--paper); }
.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-140%);
}
.skip-link:focus { transform: translateY(0); }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(0);
  transition: transform 520ms var(--ease-water), background 520ms var(--ease-water), border-color 520ms var(--ease-water), box-shadow 520ms var(--ease-water);
}
.nav.nav-solid,
.nav:hover,
.nav:focus-within,
body.menu-open .nav {
  background: rgba(255,255,255,0.82);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(30,20,24,0.05);
}
[data-theme="dark"] .nav { background: rgba(8,9,13,0.1); }
[data-theme="dark"] .nav.nav-solid,
[data-theme="dark"] .nav:hover,
[data-theme="dark"] .nav:focus-within,
[data-theme="dark"] body.menu-open .nav { background: rgba(8,9,13,0.76); }
.nav.nav-hidden { transform: translateY(-110%); }
.nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), var(--wine-2));
  box-shadow: 0 14px 30px rgba(110,34,51,0.25);
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand span:last-child { font-size: 1.16rem; letter-spacing: -0.035em; }
.nav-links { display: none; align-items: center; gap: 24px; color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.nav-links a:not(.btn):hover, .nav-links a.active { color: var(--wine); }

.menu-toggle,
.drawer-close {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.58);
  color: var(--ink);
  cursor: pointer;
  transition: transform 360ms var(--ease-water), background 360ms var(--ease-water), border-color 360ms var(--ease-water);
}
.menu-toggle:active, .drawer-close:active { transform: scale(0.94); }
.menu-toggle svg, .drawer-close svg { width: 22px; height: 22px; }

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 8, 12, 0.44);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease-water), visibility 420ms var(--ease-water);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  width: min(86vw, 380px);
  height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 18px 24px;
  background: rgba(255,255,255,0.94);
  border-left: 1px solid var(--line);
  box-shadow: -28px 0 80px rgba(0,0,0,0.22);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: translateX(105%);
  transition: transform 540ms var(--ease-water);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
[data-theme="dark"] .mobile-drawer { background: rgba(13,14,20,0.95); }
.mobile-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-links { display: grid; gap: 8px; }
.drawer-links a, .drawer-links button {
  min-height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.52);
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
[data-theme="dark"] .drawer-links a, [data-theme="dark"] .drawer-links button { background: rgba(255,255,255,0.06); }
.drawer-note { margin-top: auto; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

.theme-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.62);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  transition: transform 360ms var(--ease-water), background 360ms var(--ease-water);
}
.theme-toggle:active { transform: scale(0.97); }
.theme-icon { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--wine), var(--gold)); box-shadow: inset -5px -5px 0 rgba(255,255,255,0.35); }
[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.07); color: var(--ink); }
[data-theme="dark"] .theme-icon { box-shadow: inset -7px -7px 0 rgba(0,0,0,0.55); }

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius);
  padding: 0 18px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 380ms var(--ease-water), box-shadow 380ms var(--ease-water), background 380ms var(--ease-water), border-color 380ms var(--ease-water);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(135deg, var(--ink), #34272c); color: #fff; box-shadow: 0 18px 38px rgba(30,20,24,0.22); }
.btn-brand { background: linear-gradient(135deg, var(--wine), var(--wine-2)); color: #fff; box-shadow: 0 18px 38px rgba(110,34,51,0.24); }
.btn-soft { background: rgba(255,255,255,0.84); border-color: rgba(255,255,255,0.7); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-outline { background: rgba(255,255,255,0.58); border-color: var(--line); color: var(--ink); }
.btn-dark-outline { background: transparent; border-color: rgba(255,255,255,0.22); color: #fff; }
.btn-full { width: 100%; }

.hero {
  position: relative;
  padding: 118px 0 34px;
  background:
    radial-gradient(circle at 15% 8%, rgba(216, 162, 79, 0.2), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(110, 34, 51, 0.17), transparent 26%),
    linear-gradient(180deg, #fbf7f4 0%, #fff 70%);
}
/* PLACEHOLDER: add your mobile hero image here. Example: */
   /* @media (max-width: 767px) { .hero { background-image: linear-gradient(...), url('../images/11.jpg'); } } */

[data-theme="dark"] .hero { background: radial-gradient(circle at 15% 8%, rgba(216,162,79,0.14), transparent 28%), radial-gradient(circle at 88% 0%, rgba(110,34,51,0.28), transparent 26%), #0b0d12; }
.hero-grid { display: grid; gap: 30px; align-items: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(110,34,51,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  color: var(--wine);
  font-weight: 800;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.eyebrow.dark { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.86); }
.hero h1 {
  margin: 18px 0;
  max-width: 760px;
  font-size: clamp(3.1rem, 12vw, 6.05rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.page-hero h1 {
  margin: 18px 0;
  max-width: 840px;
  font-size: clamp(2.55rem, 11vw, 5.45rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.gradient-text { color: transparent; background: linear-gradient(100deg, var(--wine), var(--wine-2) 58%, var(--gold)); -webkit-background-clip: text; background-clip: text; }
.hero-copy, .section-copy { color: var(--muted); font-size: clamp(1.02rem, 3.5vw, 1.18rem); line-height: 1.75; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 30px; }
.proof-card, .metric, .stat, .card, .portfolio-cta {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.82);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .proof-card, [data-theme="dark"] .metric, [data-theme="dark"] .stat, [data-theme="dark"] .card, [data-theme="dark"] .portfolio-cta { background: rgba(255,255,255,0.06); }
.proof-card { padding: 14px 12px; }
.proof-card strong { display: block; font-size: 1.2rem; letter-spacing: -0.04em; }
.proof-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

.hero-visual { position: relative; min-height: 410px; }
.visual-card { position: absolute; border: 1px solid rgba(255,255,255,0.18); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
[data-theme="dark"] .visual-card { background: #1c1c22; border-color: rgba(255,255,255,0.1); }
.dashboard-card { inset: 14px 0 56px 16px; padding: 16px; }
.dashboard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dots { display: flex; gap: 6px; }
.dots span { width: 9px; height: 9px; border-radius: 50%; background: #d9e0ec; }
.dots span:nth-child(1) { background: var(--wine-2); }
.dots span:nth-child(2) { background: var(--gold); }
.dots span:nth-child(3) { background: var(--green); }
.dashboard-top small { color: var(--muted); font-weight: 700; }
.chart { height: 180px; border-radius: 12px; background: linear-gradient(180deg, #fbf1f3, #fff); position: relative; overflow: hidden; }
[data-theme="dark"] .chart { background: linear-gradient(180deg, #171018, #101015); }
.chart::before { content: ""; position: absolute; inset: 35px 18px 18px; background: linear-gradient(135deg, transparent 0 12%, var(--gold) 12% 15%, transparent 15% 32%, var(--wine) 32% 35%, transparent 35% 52%, var(--wine-2) 52% 55%, transparent 55% 72%, var(--green) 72% 75%, transparent 75%); clip-path: polygon(0 68%, 18% 56%, 35% 62%, 50% 34%, 67% 42%, 83% 18%, 100% 26%, 100% 100%, 0 100%); opacity: 0.94; }
.chart:has(img)::before { display: none; }
.chart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.metric { padding: 12px; box-shadow: none; }
.metric strong { display: block; font-size: 1.08rem; }
.metric span { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.floating-card { right: 0; bottom: 0; width: min(260px, 74vw); padding: 16px; }
.floating-card .label { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.floating-card strong { display: block; margin-top: 6px; font-size: 1.85rem; letter-spacing: -0.035em; }
.floating-card p { margin: 3px 0 0; color: var(--muted); font-size: 0.9rem; }

.logo-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,0.7); }
[data-theme="dark"] .logo-strip { background: var(--wash); }
.logo-strip .container { display: flex; gap: 14px; overflow-x: auto; padding-block: 14px; scrollbar-width: none; }
.logo-strip .container::-webkit-scrollbar, .cards-scroll::-webkit-scrollbar { display: none; }
.logo-pill { flex: 0 0 auto; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.8rem; font-weight: 700; background: rgba(255,255,255,0.8); }
[data-theme="dark"] .logo-pill { background: rgba(255,255,255,0.06); }

.section { padding: 76px 0; }
.section.alt { background: var(--wash); }
.section.dark { background: radial-gradient(circle at 80% 0%, rgba(110,34,51,0.24), transparent 35%), var(--dark); color: #fff; }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-title { margin: 12px 0; font-size: clamp(2.15rem, 8vw, 4.15rem); line-height: 1.02; letter-spacing: -0.035em; }
.dark .section-copy, .dark-copy { color: rgba(255,255,255,0.68); }

.grid { display: grid; gap: 16px; }
.cards-scroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 16px; margin-inline: -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cards-scroll > * { flex: 0 0 84vw; max-width: 350px; scroll-snap-align: start; }
.card { overflow: hidden; transition: transform 520ms var(--ease-water), box-shadow 520ms var(--ease-water), border-color 520ms var(--ease-water); }
.card:hover, .card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(110,34,51,0.24); }
.card.is-tapped { transform: translateY(-6px) scale(0.99); box-shadow: var(--shadow-md); }
.service-card, .process-card, .testimonial { padding: 22px; }
.service-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, rgba(110,34,51,0.12), rgba(216,162,79,0.18)); color: var(--wine); font-family: 'Poppins', sans-serif; font-weight: 900; margin-bottom: 20px; }
.service-card h3, .case-card h3, .testimonial h3, .process-card h3 { margin: 0 0 10px; font-size: 1.35rem; letter-spacing: -0.02em; }
.service-card p, .case-card p, .testimonial p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 0.96rem; }
.service-link { display: inline-flex; margin-top: 20px; color: var(--wine); font-weight: 800; font-size: 0.9rem; }
.media-tile { height: 164px; position: relative; overflow: hidden; background: linear-gradient(135deg, #fbebee, #fff8ef 55%, #f8f7f5); }
.media-tile.has-image { height: 200px; background: #000; }
.media-tile.social { background: linear-gradient(135deg, #fbebee, #fff8ef 55%, #f8f7f5); }
.media-tile.games { background: radial-gradient(circle at 28% 22%, rgba(216,162,79,0.28), transparent 25%), radial-gradient(circle at 82% 72%, rgba(110,34,51,0.38), transparent 28%), linear-gradient(135deg, #09090d, #22131a); }
.media-tile.branding { background: linear-gradient(135deg, #fbf1f3, #f8f7f5); }
.media-tile::after { content: ""; position: absolute; inset: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.5); background: linear-gradient(135deg, rgba(255,255,255,0.56), rgba(255,255,255,0.08)); }
.media-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.media-tile img ~ .media-caption { z-index: 4; }
.media-tile:has(img)::after { display: none; }
.media-tile:has(img)::before { opacity: 0.45; }
.media-caption { position: absolute; left: 18px; bottom: 18px; z-index: 2; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,0.78); color: var(--ink); font-size: 0.76rem; font-weight: 800; }
.case-body { padding: 18px; }
.case-metric { color: var(--wine); font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 900; letter-spacing: -0.05em; }
.case-card[role="button"] { cursor: pointer; }

.process-grid { display: grid; gap: 14px; }
.step { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--wine); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 850; margin-bottom: 16px; }
.testimonial .quote-mark { color: var(--wine); font-size: 2rem; line-height: 1; margin-bottom: 10px; }
.testimonial .person { margin-top: 20px; color: var(--wine); font-size: 0.86rem; font-weight: 780; }

.cta-band { padding: 70px 0; background: linear-gradient(135deg, var(--ink), #33252b 45%, var(--wine)); color: #fff; }
.cta-panel { display: grid; gap: 22px; align-items: center; }
.cta-panel h2 { margin: 0; font-size: clamp(2.15rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -0.035em; }
.cta-panel p { margin: 12px 0 0; color: rgba(255,255,255,0.72); line-height: 1.65; max-width: 650px; }

.footer { background: #07080d; color: #fff; padding: 54px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.footer p, .footer a { color: rgba(255,255,255,0.62); }
.footer a:hover { color: #fff; }
.footer h3, .footer h4 { margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.45); font-size: 0.86rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-links a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); font-size: 1.05rem; transition: transform 360ms var(--ease-water), color 360ms var(--ease-water), border-color 360ms var(--ease-water); }
.social-links a:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.34); }

/* Per-platform brand colours on hover */
.social-links a[aria-label="Instagram"]:hover  { color: #E1306C; border-color: #E1306C; }
.social-links a[aria-label="LinkedIn"]:hover   { color: #0A66C2; border-color: #0A66C2; }
.social-links a[aria-label="TikTok"]:hover     { color: #ff0050; border-color: #ff0050; }
.social-links a[aria-label="WhatsApp"]:hover   { color: #25D366; border-color: #25D366; }
.social-links a[aria-label="Upwork"]:hover     { color: #6FDA44; border-color: #6FDA44; }

.page-hero { position: relative; padding: 132px 0 58px; color: #fff; background: radial-gradient(circle at 72% 20%, rgba(216,162,79,0.2), transparent 30%), radial-gradient(circle at 8% 6%, rgba(110,34,51,0.28), transparent 28%), #080d19; }
.page-hero p { max-width: 660px; color: rgba(255,255,255,0.72); font-size: 1.08rem; line-height: 1.72; }
.portfolio-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.showcase-banner { min-height: 430px; display: flex; align-items: flex-end; position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: #111827; }
.showcase-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.74) 72%); z-index: 1; }
.showcase-banner.social-bg { background: radial-gradient(circle at 20% 20%, rgba(110,34,51,0.62), transparent 24%), radial-gradient(circle at 74% 34%, rgba(216,162,79,0.28), transparent 26%), linear-gradient(135deg, #160f14, #6e2233); }
.showcase-banner.games-bg { background: radial-gradient(circle at 18% 26%, rgba(216,162,79,0.32), transparent 23%), radial-gradient(circle at 78% 40%, rgba(243,182,75,0.3), transparent 25%), linear-gradient(135deg, #06060a, #23131c 55%, #4a1831); }
.showcase-banner::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.65; }
.banner-content { position: relative; z-index: 2; padding: 28px; max-width: 790px; }
.banner-content h2 { margin: 10px 0; color: #fff; font-size: clamp(2rem, 7vw, 4.2rem); line-height: 1; letter-spacing: -0.035em; }
.banner-content p { color: rgba(255,255,255,0.72); line-height: 1.7; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0 28px; }
.stat { padding: 18px 16px 16px; box-shadow: none; display: flex; flex-direction: column; gap: 6px; }
.stat strong { display: block; font-size: 1.65rem; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.stat span { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; display: block; }
.dark .stat { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.dark .stat strong { color: #fff; }
.dark .stat span { color: rgba(255,255,255,0.55); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { padding: 6px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: var(--wine); background: rgba(110,34,51,0.1); }
.dark .tag { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.1); }
.portfolio-cta { display: grid; gap: 18px; padding: 20px; }
.portfolio-cta p { margin: 4px 0 0; color: var(--muted); }
.dark .portfolio-cta p { color: rgba(255,255,255,0.58); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8,8,12,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms ease, visibility 350ms ease;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
/* ── Desktop modal content ── */
.modal-content {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55);
  padding: 28px 26px;
  /* Entry animation */
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 350ms ease, transform 350ms ease;
}
.modal.is-open .modal-content {
  opacity: 1;
  transform: scale(1);
}
[data-theme="dark"] .modal-content {
  background: #1e1e26;
  color: #e5e4e2;
}
/* ── Mobile: compact centred card ── */
@media (max-width: 767px) {
  .modal {
    align-items: center;
    padding: 20px 16px;
  }
  .modal-content {
    width: 100%;
    max-height: 78dvh;
    border-radius: 18px;
    padding: 20px 16px 24px;
    transform: scale(0.93);
  }
  .modal.is-open .modal-content {
    opacity: 1;
    transform: scale(1);
  }
  .modal-content::before { display: none; }
  .modal-content h3 {
    font-size: 1.15rem;
    padding-right: 36px;
    margin: 8px 0 12px;
  }
  .modal-visual { height: 160px; margin-bottom: 14px; }
  .modal-content p { font-size: 0.875rem; margin-bottom: 10px; }
  .modal-content ul { font-size: 0.875rem; }
  .modal-close { width: 32px; height: 32px; font-size: 1rem; top: 12px; right: 12px; }
}

/* ══════════════════════════════════════════
   CUSTOM SCROLLBAR — modal + global
══════════════════════════════════════════ */

/* Webkit (Chrome, Safari, Edge) */
.modal-content::-webkit-scrollbar {
  width: 4px;
}
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.modal-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6E2233, #8D3A46);
  border-radius: 99px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background: #6E2233;
}

/* Firefox */
.modal-content {
  scrollbar-width: thin;
  scrollbar-color: #6E2233 transparent;
}

/* Global page scrollbar — subtle, branded */
html::-webkit-scrollbar { width: 5px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6E2233 0%, #8D3A46 100%);
  border-radius: 99px;
}
html::-webkit-scrollbar-thumb:hover { background: #6E2233; }
html { scrollbar-width: thin; scrollbar-color: #6E2233 transparent; }
/* ── Modal internals ── */
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(110,34,51,0.2);
  background: rgba(110,34,51,0.08);
  color: #6E2233;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: #6E2233; color: #fff; }
[data-theme="dark"] .modal-close {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #e5e4e2;
}
[data-theme="dark"] .modal-close:hover { background: #6E2233; color: #fff; }
.modal-content h3 {
  margin: 12px 0 16px;
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  padding-right: 40px;
  color: #1a1a1a;
  line-height: 1.2;
}
[data-theme="dark"] .modal-content h3 { color: #f1f0ee; }
.modal-visual {
  height: 190px;
  border-radius: 12px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #f9f0f2, #fff8ef);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  position: relative;
}
[data-theme="dark"] .modal-visual {
  border-color: rgba(255,255,255,0.1);
  background: #2a2030;
}
.modal-content p { color: #6b7280; line-height: 1.72; margin-bottom: 12px; }
[data-theme="dark"] .modal-content p { color: #9ca3af; }
.modal-content strong { color: #1a1a1a; }
[data-theme="dark"] .modal-content strong { color: #f1f0ee; }
.modal-content ul { color: #6b7280; line-height: 1.9; padding-left: 1.2rem; margin-bottom: 12px; }
[data-theme="dark"] .modal-content ul { color: #9ca3af; }
.modal-content .eyebrow { color: #6E2233; }

@media (min-width: 640px) {
  .hero-actions { flex-direction: row; }
  .btn-full { width: auto; }
  .portfolio-cta { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 768px) {
  .container { width: min(var(--container), calc(100% - 48px)); }
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .hero { padding: 150px 0 58px; }
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.8fr); gap: 46px; }
  .hero-copy { font-size: 1.18rem; }
  .section { padding: 104px 0; }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .cards-scroll { display: grid; overflow: visible; padding: 0; margin: 0; }
  .cards-scroll > * { max-width: none; width: auto; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-panel { grid-template-columns: 1fr auto; }
  .footer-grid { grid-template-columns: 1.35fr 0.7fr 0.9fr 0.9fr; }
  .page-hero { padding: 154px 0 82px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .stat strong { font-size: 1.55rem; }
  .stat span { font-size: 0.68rem; }
  .banner-content { padding: 44px; }
}
@media (min-width: 1024px) {
  .hero-visual { min-height: 520px; }
  .dashboard-card { inset: 0 0 70px 0; }
}
@media (hover: none) {
  .card:hover { transform: none; box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ===========================
   ACCESSIBILITY + PLACEHOLDER HARDENING
   These additions preserve the current visual direction while improving mobile access,
   contrast, future image overlays, and tap behavior.
=========================== */
:root {
  --surface: rgba(255,255,255,0.88);
  --surface-strong: #ffffff;
  --text-on-surface: #151215;
  --text-muted-strong: #584b50;
  --image-scrim: linear-gradient(90deg, rgba(8,8,12,0.78), rgba(8,8,12,0.38) 56%, rgba(8,8,12,0.18));
}
[data-theme="dark"] {
  --surface: rgba(255,255,255,0.075);
  --surface-strong: #151017;
  --text-on-surface: #fff8f5;
  --text-muted-strong: #decac3;
  --image-scrim: linear-gradient(90deg, rgba(0,0,0,0.82), rgba(0,0,0,0.48) 56%, rgba(0,0,0,0.28));
}

/* Mobile-only fixed theme button: always reachable, independent of the drawer. */
.theme-fab {
  position: fixed;
  top: calc(max(1rem, env(safe-area-inset-top)) + 58px);
  right: 1rem;
  z-index: 9999;
  min-width: 46px;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .theme-fab { display: none; }
}

/* Explicit card/UI colors for WCAG-friendly contrast in both themes. */
.card,
.proof-card,
.metric,
.stat,
.portfolio-cta,
.drawer-links a,
.drawer-links button {
  background-color: var(--surface);
  color: var(--text-on-surface);
}
.card h3,
.card h4,
.service-card h3,
.case-card h3,
.testimonial h3,
.process-card h3,
.stat strong,
.metric strong,
.proof-card strong,
.portfolio-cta h3 {
  color: var(--text-on-surface);
}
.card p,
.service-card p,
.case-card p,
.testimonial p,
.process-card p,
.metric span,
.proof-card span,
.stat span,
.portfolio-cta p,
.drawer-note {
  color: var(--text-muted-strong);
}
.section-copy,
.hero-copy { color: var(--text-muted-strong); }
.dark .case-card p,
.dark .portfolio-cta p,
.dark .section-copy,
.dark-copy { color: rgba(255,255,255,0.82) !important; }
.dark .case-card h3,
.dark .portfolio-cta h3 { color: #fff !important; }

/* Hero background placeholders: uncomment one url per breakpoint when final imagery is ready. */
.hero {
  /* DESKTOP HERO BACKGROUND PLACEHOLDER: recommended 2400x1400 or wider, landscape, subject away from left-side text. */
  /* --hero-desktop-image: url('images/hero-desktop.jpg'); */
  background-image:
    var(--hero-desktop-image, none),
    radial-gradient(circle at 15% 8%, rgba(216, 162, 79, 0.2), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(110, 34, 51, 0.17), transparent 26%),
    linear-gradient(180deg, #fbf7f4 0%, #fff 70%);
  background-size: cover, auto, auto, auto;
  background-position: center, center, center, center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.74) 52%, rgba(255,255,255,0.44));
}
[data-theme="dark"] .hero::before { background: var(--image-scrim); }
.hero > .container { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .hero {
    /* MOBILE HERO BACKGROUND PLACEHOLDER: recommended 900x1400 portrait or 4:5 image with calm space behind text. */
    --hero-mobile-image: url('../images/11.jpg');
    background-image:
      var(--hero-mobile-image, none),
      radial-gradient(circle at 15% 8%, rgba(216, 162, 79, 0.2), transparent 28%),
      radial-gradient(circle at 88% 0%, rgba(110, 34, 51, 0.17), transparent 26%),
      linear-gradient(180deg, #fbf7f4 0%, #fff 70%);
  }
  .hero::before { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)); }
  [data-theme="dark"] .hero::before { background: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.58)); }
}

/* Image-overlay readiness: banners and media tiles keep text readable over any future image. */
.showcase-banner::before,
.media-tile::before,
.modal-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--image-scrim);
  opacity: 0.72;
  pointer-events: none;
}
.media-tile::before,
.modal-visual::before { opacity: 0.34; }
.media-caption,
.banner-content,
.modal-visual > * { position: relative; z-index: 2; }
.banner-content h2,
.banner-content p { text-shadow: 0 2px 18px rgba(0,0,0,0.55); }

/* Case-study CTA links inside cards. */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--wine);
  font-weight: 800;
  font-size: 0.92rem;
}
.case-link:hover { text-decoration: underline; }

/* Screenshot review cards for Fiverr/Upwork proof screenshots. */
.image-review { padding: 14px; }
.image-review img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--wine-soft);
  display: block;
}
.image-review .person { margin: 14px 4px 2px; }

/* Mailto contact form: no backend required, opens user's email client with prefilled content. */
.contact-form-card { padding: 22px; }
.contact-form-card form { display: grid; gap: 14px; margin-top: 18px; }
.form-grid { display: grid; gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-field label { color: var(--text-on-surface); font-weight: 700; font-size: 0.9rem; }
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--text-on-surface);
  padding: 13px 14px;
  outline: none;
  transition: border-color 260ms var(--ease-water), box-shadow 260ms var(--ease-water);
}
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field textarea { background: rgba(255,255,255,0.06); }
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 4px rgba(110,34,51,0.12);
}
.form-field textarea { min-height: 150px; resize: vertical; }
@media (min-width: 768px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-field.full { grid-column: 1 / -1; }
}

/* Visually hidden text used by icon-only controls. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }



/* ===========================
   GLOBAL BADGE/TAG + DARK CONTRAST PATCH
   Fixes floating overlay labels globally and gives all tag/button variants explicit
   high-contrast theme-aware colors.
=========================== */
:root {
  --badge-bg: rgba(255, 255, 255, 0.9);
  --badge-text: #4f1725;
  --badge-border: rgba(110, 34, 51, 0.2);
  --tag-bg: rgba(110, 34, 51, 0.1);
  --tag-text: #5c1d2b;
  --tag-border: rgba(110, 34, 51, 0.18);
  --button-soft-bg: rgba(255, 255, 255, 0.92);
  --button-soft-text: #151215;
  --button-outline-bg: rgba(255, 255, 255, 0.72);
  --button-outline-text: #151215;
}
[data-theme="dark"] {
  --badge-bg: rgba(255, 248, 245, 0.94);
  --badge-text: #4f1725;
  --badge-border: rgba(255, 255, 255, 0.28);
  --tag-bg: rgba(255, 248, 245, 0.14);
  --tag-text: #fff8f5;
  --tag-border: rgba(255, 255, 255, 0.24);
  --button-soft-bg: rgba(255, 248, 245, 0.94);
  --button-soft-text: #151215;
  --button-outline-bg: rgba(255, 255, 255, 0.1);
  --button-outline-text: #fff8f5;
}

/* Establish positioning contexts for every component that can contain floating labels. */
.card,
.case-card,
.service-card,
.testimonial,
.image-review,
.media-tile,
.modal-visual,
.showcase-banner,
.banner-content,
.portfolio-cta,
.visual-card,
.hero-visual {
  position: relative;
}

/* Keep floating media/category captions inside their media parent no matter text size. */
.media-caption,
.floating-badge,
.badge-overlay {
  position: absolute;
  left: clamp(10px, 4vw, 18px);
  bottom: clamp(10px, 4vw, 18px);
  top: auto;
  right: auto;
  z-index: 4;
  max-width: calc(100% - clamp(20px, 8vw, 36px));
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  line-height: 1.15;
}

/* Non-floating tags use the same contrast system, but stay in normal flow. */
.tag,
.logo-pill,
.eyebrow:not(.dark) {
  border: 1px solid var(--tag-border);
  background: var(--tag-bg);
  color: var(--tag-text);
}
[data-theme="dark"] .tag,
[data-theme="dark"] .logo-pill,
[data-theme="dark"] .eyebrow:not(.dark) {
  color: var(--tag-text) !important;
  background: var(--tag-bg) !important;
  border-color: var(--tag-border) !important;
}

/* Dark sections need their inline tags to remain readable on dark cards/backgrounds. */
.dark .tag,
[data-theme="dark"] .dark .tag {
  color: #fff8f5 !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}

/* Button contrast normalization across both themes. */
.btn-primary,
.btn-brand {
  color: #ffffff !important;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-brand {
  background: linear-gradient(135deg, var(--wine), var(--wine-2)) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.14) !important;
}
.btn-soft {
  background: var(--button-soft-bg) !important;
  color: var(--button-soft-text) !important;
  border-color: rgba(110,34,51,0.16) !important;
}
.btn-outline {
  background: var(--button-outline-bg) !important;
  color: var(--button-outline-text) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-dark-outline {
  color: #fff8f5 !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .drawer-links button.theme-toggle {
  color: #fff8f5 !important;
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.26) !important;
}

/* Preserve overlay legibility when real image backgrounds are added later. */
.media-tile,
.modal-visual,
.showcase-banner {
  isolation: isolate;
}
.media-tile::before,
.modal-visual::before,
.showcase-banner::before {
  z-index: 1;
}
.media-tile::after,
.showcase-banner::after {
  z-index: 2;
}
.banner-content,
.media-caption {
  z-index: 4;
}

/* ── COPYABLE PHONE NUMBER ─────────────────────── */
.phone-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.phone-copy .copy-icon {
  opacity: 0;
  font-size: 0.78rem;
  color: #6E2233;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.phone-copy:hover .copy-icon,
.phone-copy:focus .copy-icon { opacity: 1; }
.phone-copy:hover,
.phone-copy:focus { color: #6E2233; }
/* Tooltip — only shows when JS adds .copied, never by default */
.phone-copy .copy-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #6E2233;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.phone-copy.copied .copy-icon { opacity: 1; color: #6E2233; }
.phone-copy.copied .copy-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--wine), #c45a6e);
  z-index: 200;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ══════════════════════════════════════════
   SCROLL-REVEAL ANIMATIONS
══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ══════════════════════════════════════════
   CARD TILT / SHINE
══════════════════════════════════════════ */
.card {
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 800px;
}
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.08) 0%,
    transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.card:hover .card-shine { opacity: 1; }

/* ══════════════════════════════════════════
   BUTTON RIPPLE
══════════════════════════════════════════ */
.btn {
  position: relative;
  overflow: hidden;
}
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: ripple-out 0.55s linear;
  pointer-events: none;
}
@keyframes ripple-out {
  to { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════
   SCROLL HINT — desktop only, subtle
══════════════════════════════════════════ */
.scroll-hint {
  display: none; /* hidden on mobile */
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.35;
  margin-top: 1.5rem;
  animation: bounce-hint 2.4s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
@media (min-width: 768px) {
  .scroll-hint { display: flex; }
}
.scroll-hint span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scroll-hint svg { width: 14px; height: 14px; }
@keyframes bounce-hint {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ══════════════════════════════════════════
   STAT COUNTER ANIMATION
══════════════════════════════════════════ */
.stat strong, .metric strong, .proof-card strong, .case-metric {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat:hover strong,
.metric:hover strong,
.proof-card:hover strong {
  transform: scale(1.12);
}

/* Page load fade — opacity only, NO transform (transform breaks position:fixed children) */
.site-shell {
  animation: page-fade-in 0.45s ease both;
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════
   MOBILE EXPERIENCE IMPROVEMENTS
══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Cards — tighter, better proportioned for small screens */
  .cards-scroll > * { flex: 0 0 78vw; max-width: 300px; }

  /* Section spacing — breathes better on small screens */
  .section { padding: 52px 0; }
  .section-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }

  /* Hero — tighter padding, no wasted space */
  .hero { padding: 100px 0 40px; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .hero-proof { flex-wrap: wrap; gap: 10px; }
  .proof-card { padding: 10px 14px; min-width: 80px; }

  /* Hero visual dashboard — hide floating card on smallest screens,
     give dashboard card proper proportions */
  .floating-card { display: none; }
  .hero-visual { min-height: 240px; margin-top: 28px; }
  .dashboard-card { position: relative; inset: auto; margin: 0; width: 100%; }

  /* Buttons — full width, good tap targets */
  .btn { min-height: 52px; font-size: 0.95rem; }
  .hero-actions { gap: 10px; }

  /* Nav — tighter */
  .nav-inner { height: 58px; }

  /* Testimonials — full width on mobile */
  .testimonial { padding: 18px; }
  .testimonial p { font-size: 0.9rem; }

  /* Footer — single column, readable */
  .footer-grid { gap: 24px; }
  .footer { padding: 40px 0 24px; }

  /* Case study metric — slightly smaller */
  .case-metric { font-size: 1.6rem; }

  /* Stats grid — 2 col on mobile */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 14px 12px; gap: 5px; }
  .stat strong { font-size: 1.35rem; }
  .stat span { font-size: 0.68rem; }

  /* Phone copy — always show icon on mobile (no hover) */
  .phone-copy .copy-icon { opacity: 0.6; }
}

@media (max-width: 400px) {
  .cards-scroll > * { flex: 0 0 86vw; }
  .hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
}

/* ══════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════ */
.lightbox-content {
  position: relative;
  width: min(900px, calc(100vw - 32px));
  max-height: 90dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.16,1,0.3,1),
              opacity 380ms cubic-bezier(0.16,1,0.3,1);
}
.modal.is-open .lightbox-content {
  transform: scale(1);
  opacity: 1;
}
#lightbox-img {
  width: 100%;
  height: auto;
  max-height: 90dvh;
  object-fit: contain;
  display: block;
  border-radius: 16px;
}
.lightbox-content .modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  z-index: 10;
}
.lightbox-content .modal-close:hover {
  background: #6E2233;
  border-color: #6E2233;
}
/* Clickable review images — show zoom cursor + subtle scale hint */
.lightbox-trigger {
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s ease;
  display: block;
  width: 100%;
}
.lightbox-trigger:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
@media (max-width: 767px) {
  .lightbox-content {
    width: calc(100vw - 24px);
    border-radius: 12px;
  }
}