/* ═══════════════════════════════════════════════════════════════
   DIE FOR ART TATTOO STUDIO — STYLES
   Premium dark aesthetic · Gold accents · Cinzel + Jost
═══════════════════════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ─── */
:root {
  --black:       #080808;
  --dark-1:      #0E0E0E;
  --dark-2:      #141414;
  --dark-3:      #1C1C1C;
  --dark-4:      #252525;
  --dark-5:      #2E2E2E;

  --gold-100:    #F7EBCC;
  --gold-200:    #EDD07A;
  --gold-300:    #C9A84C;
  --gold-400:    #A5801A;
  --gold-500:    #7A5C0E;

  --red:         #8B1C1F;
  --red-bright:  #C0292D;
  --neon-red:    #FF2540;
  --neon-blue:   rgba(80, 200, 255, 0.75);

  --white:       #F4EEE2;
  --off-white:   #D9D0C0;
  --grey-300:    #B0A898;
  --grey-500:    #6E6558;
  --grey-700:    #3A352E;

  --font-display: 'Marcellus', 'Cinzel', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   16px;

  --transition:  0.3s ease;
  --transition-slow: 0.6s ease;

  --container:   1200px;
  --gap:         clamp(1.5rem, 4vw, 3rem);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--black);
  color: var(--off-white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain texture overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* ─── CONTAINER ─── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9em 2em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on all buttons */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 140%; }

.btn-primary {
  background: var(--red-bright);
  color: var(--white);
  border-color: var(--red-bright);
}
.btn-primary:hover {
  background: #d93a3e;
  border-color: #d93a3e;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(192, 41, 45, 0.45), 0 0 20px rgba(192, 41, 45, 0.2);
}

.btn-outline {
  background: transparent;
  color: var(--red-bright);
  border-color: var(--red-bright);
}
.btn-outline:hover {
  background: rgba(192, 41, 45, 0.08);
  border-color: #d93a3e;
  color: #d93a3e;
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.25), 0 0 32px rgba(201, 168, 76, 0.1);
}

/* Red CTA variant */
.btn-red {
  background: transparent;
  color: var(--neon-red);
  border-color: var(--neon-red);
}
.btn-red:hover {
  background: rgba(255, 37, 64, 0.1);
  box-shadow: 0 0 18px rgba(255, 37, 64, 0.35), 0 0 36px rgba(255, 37, 64, 0.12);
  transform: translateY(-2px);
  color: #ff6070;
  border-color: #ff6070;
}

.btn-ig {
  color: var(--white);
  border-color: var(--white);
  font-size: 0.85rem;
}
.btn-ig:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 12px rgba(255,255,255,0.12);
}

/* ─── SECTION SHARED STYLES ─── */
.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.section-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 0.9rem;
}
.section-label::before {
  content: '//';
  color: var(--neon-red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 0 10px var(--neon-red), 0 0 20px rgba(255,37,64,0.4);
  animation: labelPulse 4s ease-in-out infinite;
}
.section-label::after {
  content: '//';
  color: rgba(255,37,64,0.35);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}
@keyframes labelPulse {
  0%, 100% { text-shadow: 0 0 8px var(--neon-red), 0 0 16px rgba(255,37,64,0.3); }
  50%       { text-shadow: 0 0 14px var(--neon-red), 0 0 28px rgba(255,37,64,0.6); }
}

.section-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  color: var(--white);
  margin-bottom: 1.25rem;
  text-shadow:
    0 0 40px rgba(201, 168, 76, 0.12),
    0 0 80px rgba(255, 37, 64, 0.06);
}

.section-sub {
  font-size: 1.05rem;
  color: var(--grey-300);
  max-width: 560px;
  margin-inline: auto;
}

.gold-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.gold-rule::before,
.gold-rule::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300));
}
.gold-rule::after {
  transform: scaleX(-1);
}
.gold-rule::before,
.gold-rule::after {
  flex: 0 0 60px;
}
/* Central diamond via pseudo trick */
.gold-rule {
  position: relative;
}

/* ─── REVEAL ANIMATIONS ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════
   NAVIGATION
═══════════════════════════════════ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #060102;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  padding: 1rem 0;
  transition: padding var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.site-nav.scrolled {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.6rem 0;
  border-bottom-color: rgba(201, 168, 76, 0.22);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

.nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-logo img {
  height: 50px;
  width: auto;
  transition: transform var(--transition);
}
.nav-logo:hover img { transform: scale(1.04); }

.nav-links {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.nav-link {
  font-family: var(--font-display);
  /* Scales with viewport so the bar never outgrows its width on smaller
     laptops — the old fixed 0.92rem + wide tracking was overflowing. */
  font-size: clamp(0.7rem, 0.68vw + 0.42rem, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--off-white);
  padding: 0.5em 0.62em;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 70%;
  height: 1px;
  background: var(--gold-300);
  transition: transform var(--transition);
}
.nav-link:hover { color: var(--gold-300); }
.nav-link:hover::after { transform: translateX(-50%) scaleX(1); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--red-bright);
  color: var(--white);
  padding: 0.65em 1.4em;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  flex-shrink: 0;
}
.nav-cta:hover {
  background: #d93a3e;
  box-shadow: 0 4px 20px rgba(192, 41, 45, 0.45);
  transform: translateY(-1px);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold-300);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  background: #060102;
  border-top: 1px solid transparent;
  transition: grid-template-rows 0.28s ease, border-color 0.28s ease;
}
.mobile-menu > .mobile-menu-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem);
  transition: padding 0.28s ease;
}
.mobile-menu.open {
  grid-template-rows: 1fr;
  border-top-color: rgba(201, 168, 76, 0.15);
}
.mobile-menu.open > .mobile-menu-inner {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.mobile-link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 0;
  color: var(--off-white);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--transition);
}
.mobile-link:last-child { border-bottom: none; }
.mobile-link:hover { color: var(--gold-300); }

.mobile-cta {
  margin-top: 0.75rem;
  color: var(--gold-300) !important;
  border-bottom: none !important;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #060102;
}

/* Background photo with blur */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: image-set(url('../imgs/hero-section-tattoo-background.webp') type('image/webp'), url('../imgs/hero-section-tattoo-background.png') type('image/png'));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: blur(2px) brightness(0.32) saturate(0.85);
  transform: scale(1.06);
  z-index: 0;
}

/* CRT scanline overlay */
.hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.1) 3px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, rgba(139,28,31,0.08) 35%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  z-index: 2;
  animation: heroPulse 6s ease-in-out infinite;
}

@keyframes heroPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* Corner bracket decorations */
.hero-corners {
  position: absolute;
  inset: clamp(1.5rem, 4vw, 3rem);
  pointer-events: none;
  z-index: 3;
}

.corner {
  position: absolute;
  width: clamp(28px, 4vw, 44px);
  height: clamp(28px, 4vw, 44px);
}
.corner-tl { top: 0; left: 0;  border-top: 1px solid rgba(201,168,76,0.5); border-left: 1px solid rgba(201,168,76,0.5); }
.corner-tr { top: 0; right: 0; border-top: 1px solid rgba(201,168,76,0.5); border-right: 1px solid rgba(201,168,76,0.5); }
.corner-bl { bottom: 0; left: 0;  border-bottom: 1px solid rgba(201,168,76,0.5); border-left: 1px solid rgba(201,168,76,0.5); }
.corner-br { bottom: 0; right: 0; border-bottom: 1px solid rgba(201,168,76,0.5); border-right: 1px solid rgba(201,168,76,0.5); }

.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

/* Hero reveal */
.reveal-hero {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.9s ease forwards;
  animation-delay: var(--delay, 0s);
}

/* Studio label overline */
.hero-studio-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.2vw, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.hero-label-line {
  display: block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
  flex-shrink: 0;
}
.hero-label-line + * { /* second line reverses */ }
.hero-studio-label .hero-label-line:last-child {
  background: linear-gradient(270deg, transparent, var(--gold-400));
}

/* Main title */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10.5vw, 7.5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  text-shadow:
    0 0 40px rgba(201, 168, 76, 0.35),
    0 0 80px rgba(201, 168, 76, 0.15),
    0 2px 0 rgba(0,0,0,0.8);
  position: relative;
}

/* Glitch effect */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  line-height: inherit;
}

.glitch-text::before {
  color: var(--neon-red);
  text-shadow: none;
  animation: glitch-a 6s infinite;
}

.glitch-text::after {
  color: var(--neon-blue);
  text-shadow: none;
  animation: glitch-b 6s infinite 0.6s;
}

@keyframes glitch-a {
  0%, 84%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
  85%  { clip-path: inset(8% 0 58% 0);  opacity: 0.85; transform: translate(-5px, 1px); }
  87%  { clip-path: inset(45% 0 25% 0); opacity: 0.6;  transform: translate(5px, -1px); }
  89%  { clip-path: inset(65% 0 8% 0);  opacity: 0.85; transform: translate(-3px, 2px); }
  91%  { clip-path: inset(0 0 100% 0);  opacity: 0;    transform: translate(0); }
}

@keyframes glitch-b {
  0%, 88%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
  89%  { clip-path: inset(15% 0 65% 0); opacity: 0.7;  transform: translate(4px, 2px); }
  91%  { clip-path: inset(72% 0 3% 0);  opacity: 0.5;  transform: translate(-4px, -2px); }
  93%  { clip-path: inset(40% 0 38% 0); opacity: 0.7;  transform: translate(3px, 1px); }
  95%  { clip-path: inset(0 0 100% 0);  opacity: 0;    transform: translate(0); }
}

.hero-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 280px;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}
.divider-line:last-child {
  background: linear-gradient(270deg, transparent, var(--gold-400));
}
.divider-diamond {
  width: 8px;
  height: 8px;
  background: var(--gold-300);
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.6);
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-200);
}

.hero-sub {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--grey-300);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--gold-400);
  font-weight: 400;
}
.hero-location i { font-size: 0.8em; color: var(--gold-300); }

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.25rem;
}

.hero-stars { color: var(--gold-300); font-size: 0.8rem; letter-spacing: 0.1em; }
.hero-rating-text { font-size: 0.82rem; color: var(--grey-300); letter-spacing: 0.05em; }

.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--grey-500);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-display);
  animation: scrollBounce 2.5s ease-in-out infinite;
  z-index: 5;
  transition: color var(--transition);
}
.hero-scroll-hint:hover { color: var(--gold-300); }

.scroll-label { font-size: 0.65rem; }
.scroll-arrow { font-size: 0.9rem; }

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ═══════════════════════════════════
   STATS BAR
═══════════════════════════════════ */
.stats-bar {
  background: linear-gradient(90deg, var(--dark-3), #1A1400, var(--dark-3));
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  padding: 2.5rem 0;
}

.stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.stat-item {
  flex: 1 1 0;
  min-width: 0;
}

.stat-item {
  text-align: center;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
}

.stat-sep {
  width: 1px;
  height: 40px;
  background: rgba(201, 168, 76, 0.25);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--gold-300);
  line-height: 1;
  display: inline;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--gold-400);
  display: inline;
  margin-left: 0.1em;
}

.stat-label {
  display: block;
  width: 100%;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-300);
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
}

/* ═══════════════════════════════════
   ABOUT
═══════════════════════════════════ */
.about {
  padding: clamp(4rem, 10vw, 8rem) 0;
  background: var(--dark-1);
  position: relative;
}

.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about-text .about-lead {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--white);
  font-weight: 500;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.about-text p {
  color: var(--grey-300);
  margin-bottom: 1.1rem;
  font-size: 0.97rem;
}

.about-cta { margin-top: 2rem; }

.about-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.badge-card {
  background: var(--dark-3);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}

.badge-card:hover {
  border-color: rgba(201, 168, 76, 0.35);
  transform: translateY(-3px);
  background: var(--dark-4);
}

.badge-icon {
  width: 42px;
  height: 42px;
  background: rgba(201, 168, 76, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-300);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
  transition: background var(--transition);
}
.badge-card:hover .badge-icon { background: rgba(201, 168, 76, 0.18); }

.badge-card h3 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.badge-card p {
  font-size: 0.85rem;
  color: var(--grey-300);
  line-height: 1.55;
}

/* ═══════════════════════════════════
   SERVICES
═══════════════════════════════════ */
.services {
  padding: clamp(4rem, 10vw, 8rem) 0;
  background: var(--black);
  position: relative;
}

.services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.service-card {
  background: var(--dark-2);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  position: relative;
  transition: all var(--transition);
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}

.service-card:hover {
  border-color: rgba(201, 168, 76, 0.3);
  transform: translateY(-4px);
  background: var(--dark-3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 48px;
  height: 48px;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-300);
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
  transition: all var(--transition);
}
.service-card:hover .service-icon {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--gold-300);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.2);
}

/* Alternate service cards get red icons */
.service-card:nth-child(even) .service-icon {
  color: var(--neon-red);
  background: rgba(255, 37, 64, 0.07);
  border-color: rgba(255, 37, 64, 0.2);
}
.service-card:nth-child(even):hover .service-icon {
  background: rgba(255, 37, 64, 0.14);
  border-color: var(--neon-red);
  box-shadow: 0 0 16px rgba(255, 37, 64, 0.3);
}
.service-card:nth-child(even):hover {
  border-color: rgba(255, 37, 64, 0.28);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(255,37,64,0.08);
}
.service-card:nth-child(even)::before {
  background: linear-gradient(90deg, var(--red), var(--neon-red), var(--red));
}

.service-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--white);
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.service-desc {
  font-size: 0.85rem;
  color: var(--grey-300);
  line-height: 1.6;
}

.service-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 100px;
  padding: 0.25em 0.75em;
  margin-top: 1rem;
}

.services-cta {
  text-align: center;
  margin-top: 1rem;
}
.services-cta p {
  color: var(--grey-300);
  margin-bottom: 1.25rem;
  font-size: 1rem;
}

/* ═══════════════════════════════════
   WHY CHOOSE US
═══════════════════════════════════ */
.why-us {
  padding: clamp(4rem, 10vw, 8rem) 0;
  background: linear-gradient(180deg, var(--dark-1) 0%, #100D00 50%, var(--dark-1) 100%);
  position: relative;
  overflow: hidden;
}

.why-us::after {
  content: 'DIE FOR ART';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(201, 168, 76, 0.025);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

.why-us .container { position: relative; z-index: 1; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.why-card {
  padding: 2.5rem 1.5rem;
  border-top: 2px solid var(--dark-5);
  transition: border-color var(--transition);
  position: relative;
}

.why-card:nth-child(odd):hover  { border-top-color: var(--gold-300); }
.why-card:nth-child(even):hover { border-top-color: var(--neon-red); box-shadow: 0 0 20px rgba(255,37,64,0.08) inset; }

.why-number {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(255, 37, 64, 0.18);
  line-height: 1;
  margin-bottom: 0.75rem;
  transition: color var(--transition), text-shadow var(--transition);
  text-shadow: 0 0 20px rgba(255, 37, 64, 0);
}
.why-card:hover .why-number {
  color: rgba(255, 37, 64, 0.45);
  text-shadow: 0 0 20px rgba(255, 37, 64, 0.3);
}

.why-card h3 {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.85rem;
}

.why-card p {
  font-size: 0.88rem;
  color: var(--grey-300);
  line-height: 1.65;
}

/* ═══════════════════════════════════
   PORTFOLIO
═══════════════════════════════════ */
.portfolio {
  padding: clamp(4rem, 10vw, 8rem) 0;
  background: var(--black);
  position: relative;
}

.portfolio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.portfolio-item {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--dark-3);
  border: 1px solid rgba(201, 168, 76, 0.1);
  transition: all var(--transition);
  animation-delay: calc(var(--i, 1) * 0.08s);
}
.portfolio-item:hover {
  border-color: rgba(201, 168, 76, 0.3);
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 2;
}

.portfolio-item--tall { grid-row: span 2; }
.portfolio-item--wide { grid-column: span 2; }

.portfolio-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--grey-700);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(201,168,76,0.02) 20px,
    rgba(201,168,76,0.02) 40px
  );
  transition: color var(--transition);
}

.portfolio-item:hover .portfolio-placeholder { color: var(--grey-500); }

.portfolio-placeholder i { font-size: 1.8rem; }
.portfolio-placeholder span {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Replace placeholder when image provided */
.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.portfolio-item:hover img { transform: scale(1.05); }

/* Behold live feed wrapper */
.behold-feed {
  margin-bottom: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.12);
}

/* Connect notice (shown in fallback state) */
.portfolio-connect-notice {
  margin-top: 1.5rem;
}

.connect-notice-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--dark-2);
  border: 1px dashed rgba(201, 168, 76, 0.25);
  border-radius: var(--radius);
  padding: 1.25rem 1.75rem;
  flex-wrap: wrap;
}

.connect-notice-inner > i {
  font-size: 1.8rem;
  color: var(--gold-400);
  flex-shrink: 0;
}

.connect-notice-inner > div { flex: 1; min-width: 180px; }

.connect-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.3rem !important;
}

.connect-sub {
  font-size: 0.82rem !important;
  color: var(--grey-500) !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

.connect-sub strong { color: var(--gold-400); font-weight: 500; }

.btn-sm {
  font-size: 0.68rem !important;
  padding: 0.65em 1.25em !important;
  flex-shrink: 0;
}

.portfolio-ig {
  text-align: center;
  padding-top: 1rem;
}
.portfolio-ig p {
  color: var(--grey-500);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════
   REVIEWS
═══════════════════════════════════ */
.reviews {
  padding: clamp(4rem, 10vw, 8rem) 0;
  background: var(--dark-1);
  position: relative;
}

.reviews::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

.rating-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--dark-3);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius);
  padding: 1.25rem 2rem;
  min-width: 220px;
  transition: border-color var(--transition);
}
.rating-badge:hover { border-color: rgba(201, 168, 76, 0.4); }

.rating-badge > i {
  font-size: 2rem;
  color: var(--gold-300);
  flex-shrink: 0;
}

.rating-badge-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rating-stars { color: var(--gold-300); font-size: 0.85rem; letter-spacing: 0.1em; }
.rating-recommend { color: var(--gold-300); font-size: 1.1rem; }

.rating-score {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.rating-count {
  font-size: 0.75rem;
  color: var(--grey-500);
  letter-spacing: 0.05em;
}

/* ── Reviews Carousel ── */
.reviews-carousel {
  position: relative;
  padding: 0 3.5rem;
  margin-bottom: 3rem;
}

.carousel-track-wrap {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  align-items: stretch;
}

.carousel-track .testimonial-card {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 0;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(14, 14, 14, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.22);
  color: var(--gold-300);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-arrow:hover {
  background: rgba(201, 168, 76, 0.14);
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.25);
}

.carousel-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.18);
  border: 1px solid rgba(201, 168, 76, 0.28);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}

.carousel-dot.is-active {
  background: var(--gold-300);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.65);
  transform: scale(1.3);
}

.testimonial-card {
  background: var(--dark-2);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(201, 168, 76, 0.1);
  pointer-events: none;
}

.testimonial-card:hover {
  border-color: rgba(201, 168, 76, 0.28);
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
}

.t-stars {
  color: var(--gold-300);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.t-text {
  font-size: 0.9rem;
  color: var(--grey-300);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 0.75rem;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}



.t-author {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-style: normal;
  margin-top: auto;
  gap: 0.75rem;
}

.t-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.t-platform {
  font-size: 0.72rem;
  color: var(--grey-500);
  display: flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  flex-shrink: 0;
}

.reviews-cta { text-align: center; }


/* ── Reviews mobile: hide arrows, full-width cards ── */
@media (max-width: 639px) {
  .reviews-carousel {
    padding: 0;
    margin-left: calc(-1 * clamp(1.25rem, 5vw, 2.5rem));
    margin-right: calc(-1 * clamp(1.25rem, 5vw, 2.5rem));
  }
  .carousel-track .testimonial-card {
    flex: 0 0 100%;
    border-radius: 0;
  }
  .carousel-arrow {
    display: none;
  }
}


/* ═══════════════════════════════════
   BOOKING CTA
═══════════════════════════════════ */
.booking-cta {
  position: relative;
  padding: clamp(4rem, 10vw, 8rem) 0;
  overflow: hidden;
}

.booking-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(139,28,31,0.25) 0%, transparent 65%),
    linear-gradient(180deg, var(--dark-1), #100800, var(--dark-1));
  z-index: 0;
}

.booking-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 60px,
      rgba(201,168,76,0.03) 60px,
      rgba(201,168,76,0.03) 61px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(201,168,76,0.03) 60px,
      rgba(201,168,76,0.03) 61px
    );
}

.booking-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.booking-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  color: var(--white);
  margin: 0.75rem 0 1.25rem;
  line-height: 1.15;
}

.booking-sub {
  max-width: 540px;
  margin: 0 auto 3rem;
  font-size: 1rem;
  color: var(--grey-300);
  line-height: 1.7;
}

.booking-options {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.booking-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--dark-3);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: var(--radius);
  padding: 1.25rem 1.75rem;
  min-width: 220px;
  transition: all var(--transition);
}

.booking-option:hover {
  border-color: rgba(201, 168, 76, 0.4);
  transform: translateY(-3px);
  background: var(--dark-4);
}

.booking-option--primary {
  border-color: rgba(37, 211, 102, 0.3);
  background: rgba(37, 211, 102, 0.05);
}
.booking-option--primary:hover {
  border-color: rgba(37, 211, 102, 0.6);
  background: rgba(37, 211, 102, 0.1);
}

.booking-option-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold-300);
}

.booking-option--primary .booking-option-icon {
  background: rgba(37, 211, 102, 0.15);
  color: #25D366;
}

.booking-option-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.booking-option-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey-500);
}

.booking-option-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
}

.booking-note {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

/* ═══════════════════════════════════
   LOCATION / CONTACT
═══════════════════════════════════ */
.location {
  padding: clamp(4rem, 10vw, 8rem) 0;
  background: var(--dark-1);
  position: relative;
}

.location::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.location-detail {
  display: flex;
  gap: 1.1rem;
  margin-bottom: 2rem;
  align-items: flex-start;
}

.location-detail-icon {
  width: 40px;
  height: 40px;
  background: rgba(201, 168, 76, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-300);
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 0.15rem;
}

.location-detail h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.4rem;
}

.location-detail p,
.location-detail address {
  font-size: 0.9rem;
  color: var(--grey-300);
  line-height: 1.65;
}

.location-detail a {
  color: var(--off-white);
  transition: color var(--transition);
}
.location-detail a:hover { color: var(--gold-300); }

.hours-note {
  font-size: 0.82rem;
  color: var(--grey-500);
}

.location-social h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  width: 42px;
  height: 42px;
  background: var(--dark-3);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--grey-300);
  transition: all var(--transition);
}
.social-link:hover {
  background: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--black);
  transform: translateY(-2px);
}

.location-map {
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.15);
}

.location-map iframe {
  filter: grayscale(0.7) invert(0.9) hue-rotate(175deg);
  transition: filter var(--transition-slow);
}
.location-map:hover iframe { filter: grayscale(0.3) invert(0.85) hue-rotate(175deg); }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.site-footer {
  background: #060102;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  padding: clamp(3rem, 7vw, 5rem) 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-brand img {
  height: 90px;
  width: auto;
  margin-bottom: 1rem;
  opacity: 0.95;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.75rem;
}

.footer-location {
  font-size: 0.83rem;
  color: var(--grey-500);
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
}
.footer-location i { color: var(--gold-400); margin-top: 0.25em; flex-shrink: 0; }

.footer-nav h4,
.footer-services h4,
.footer-contact h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1.25rem;
}

.footer-nav nav,
.footer-services nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-nav a,
.footer-services a {
  font-size: 0.85rem;
  color: var(--grey-300);
  transition: color var(--transition);
}
.footer-nav a:hover,
.footer-services a:hover { color: var(--gold-300); }

.footer-contact p {
  font-size: 0.85rem;
  color: var(--grey-300);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  line-height: 1.5;
}
.footer-contact p i { color: var(--gold-400); margin-top: 0.25em; flex-shrink: 0; font-size: 0.85em; }
.footer-contact a { transition: color var(--transition); }
.footer-contact a:hover { color: var(--gold-300); }

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  background: var(--dark-4);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--grey-300);
  transition: all var(--transition);
}
.footer-social a:hover {
  background: var(--gold-300);
  color: var(--black);
  border-color: var(--gold-300);
}

.footer-bottom {
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-credit {
  font-size: 0.72rem;
  color: var(--grey-700);
  letter-spacing: 0.04em;
}
.footer-credit span {
  color: var(--neon-red);
  font-size: 0.75rem;
}
.footer-credit a {
  color: var(--gold-400);
  transition: color var(--transition);
}
.footer-credit a:hover { color: var(--gold-300); }

.footer-copy {
  font-size: 0.75rem;
  color: var(--grey-700);
}

.footer-region {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-700);
}

/* ═══════════════════════════════════
   FLOATING WHATSAPP
═══════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 0;
  background: #25D366;
  color: #fff;
  border-radius: 100px;
  padding: 0.9rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: all var(--transition);
  overflow: hidden;
  max-width: 56px;
}

.whatsapp-float i {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.whatsapp-float-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.whatsapp-float:hover {
  max-width: 220px;
  padding-right: 1.25rem;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55);
  transform: translateY(-2px);
}

.whatsapp-float:hover .whatsapp-float-label {
  max-width: 150px;
  opacity: 1;
  padding-left: 0.75rem;
}

/* ═══════════════════════════════════
   RESPONSIVE — TABLET
═══════════════════════════════════ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-item--wide { grid-column: span 2; }
  .about-badges { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  .about-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .location-map { height: 320px; }
  .carousel-track .testimonial-card { flex: 0 0 calc(50% - 0.75rem); }

  .stat-item { padding: 0.75rem 1.5rem; }
}

/* ═══════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════ */
@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
  }
  .portfolio-item--tall { grid-row: span 1; }
  .portfolio-item--wide { grid-column: span 1; }

  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .about-badges { grid-template-columns: 1fr; }


  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .stat-sep { display: none; }
  .stat-item { padding: 1.25rem 1rem; }

  .reviews-carousel { padding: 0 2.5rem; }
  .carousel-track .testimonial-card { flex: 0 0 100%; }

  .booking-options { flex-direction: column; align-items: center; }
  .booking-option { width: 100%; max-width: 340px; }

  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 300px; justify-content: center; }

  .rating-badges { flex-direction: column; align-items: center; }
  .rating-badge { width: 100%; max-width: 300px; }

  .footer-bottom { flex-direction: column; text-align: center; }

  .whatsapp-float { bottom: 1.5rem; right: 1.5rem; }
}

/* ═══════════════════════════════════
   CYBERPUNK ENHANCEMENTS
═══════════════════════════════════ */

/* ── Global page scan line removed (user request) ── */

/* ── Red accent on section dividers ── */
.about::before,
.services::before,
.portfolio::before,
.location::before,
.reviews::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 37, 64, 0.4) 30%,
    rgba(201, 168, 76, 0.4) 50%,
    rgba(255, 37, 64, 0.4) 70%,
    transparent 100%
  );
}

/* ── Stats: terminal-style glow ── */
.stat-number {
  text-shadow: 0 0 20px rgba(201, 168, 76, 0.4), 0 0 40px rgba(201, 168, 76, 0.2);
}
.stat-item:nth-child(odd) .stat-number {
  color: var(--gold-300);
}
.stat-item:nth-child(even) .stat-number {
  color: #ff8090;
  text-shadow: 0 0 20px rgba(255, 37, 64, 0.5), 0 0 40px rgba(255, 37, 64, 0.25);
}
.stat-item:nth-child(even) .stat-suffix {
  color: rgba(255, 128, 144, 0.8);
}

/* ── Stat bar: red pulse glow ── */
@keyframes statBarPulse {
  0%, 100% { box-shadow: inset 0 0 30px rgba(255,37,64,0); }
  50%       { box-shadow: inset 0 0 30px rgba(255,37,64,0.04); }
}
.stats-bar { animation: statBarPulse 5s ease-in-out infinite; }

/* ── Section title: red underline accent ── */
.section-header .section-title {
  position: relative;
  display: inline-block;
}

/* ── Gold-rule: red center glow ── */
.gold-rule span {
  box-shadow: 0 0 10px rgba(255, 37, 64, 0.5), 0 0 20px rgba(201, 168, 76, 0.4) !important;
  background: var(--neon-red) !important;
}

/* ── About badges: red hover ── */
.about-badges .badge-card:nth-child(even):hover {
  border-color: rgba(255, 37, 64, 0.35);
  box-shadow: 0 0 20px rgba(255,37,64,0.1);
}
.about-badges .badge-card:nth-child(even):hover .badge-icon {
  background: rgba(255, 37, 64, 0.12);
  color: var(--neon-red);
  box-shadow: 0 0 12px rgba(255,37,64,0.25);
}

/* ── Portfolio items: red corner on hover ── */
@keyframes cornerPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
.portfolio-item:hover {
  box-shadow:
    0 0 0 1px rgba(255,37,64,0.25),
    0 12px 40px rgba(0,0,0,0.5),
    0 0 30px rgba(255,37,64,0.08);
}

/* ── Why-us: grid lines pulse ── */
.why-card {
  position: relative;
}
.why-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,37,64,0.12), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}
.why-card:hover::after { transform: scaleX(1); }

/* ── Review cards: alternate red ── */
.testimonial-card:nth-child(even):hover {
  border-color: rgba(255, 37, 64, 0.28);
  box-shadow: 0 10px 35px rgba(0,0,0,0.35), 0 0 20px rgba(255,37,64,0.08);
}
.testimonial-card:nth-child(even)::before {
  color: rgba(255, 37, 64, 0.12);
}

/* ── Booking section: enhanced cyber grid ── */
.booking-bg::before {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 58px,
      rgba(255, 37, 64, 0.025) 58px,
      rgba(255, 37, 64, 0.025) 59px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 58px,
      rgba(255, 37, 64, 0.025) 58px,
      rgba(255, 37, 64, 0.025) 59px
    );
}

/* ── Location social: red alternate ── */
.social-link:nth-child(even):hover {
  background: var(--neon-red);
  border-color: var(--neon-red);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,37,64,0.5);
}

/* ── Footer: red neon top border pulse ── */
@keyframes footerBorderPulse {
  0%, 100% { border-top-color: rgba(201,168,76,0.2); }
  50%       { border-top-color: rgba(255,37,64,0.3); }
}
.site-footer {
  animation: footerBorderPulse 6s ease-in-out infinite;
}

/* ── Section backgrounds: subtle circuit vein ── */
.about,
.why-us {
  background-image:
    radial-gradient(ellipse 1px 60px at 15% 40%, rgba(255,37,64,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 1px 40px at 85% 70%, rgba(201,168,76,0.04) 0%, transparent 100%);
}

/* ── Nav links: red active glow ── */
.nav-link:hover {
  color: var(--gold-300);
  text-shadow: 0 0 12px rgba(201,168,76,0.4);
}

/* ── Floating WhatsApp: cyber pulse ring ── */
@keyframes cyberPulse {
  0%   { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.3); }
  70%  { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-float {
  animation: cyberPulse 3s ease-out infinite;
}

/* ═══════════════════════════════════
   PER-SECTION NEON / GLITCH EFFECTS
═══════════════════════════════════ */

/* ── Section title: neon flicker on hover ── */
@keyframes neonFlicker {
  0%, 100% { opacity: 1; text-shadow: 0 0 12px rgba(201,168,76,0.25), 0 0 30px rgba(255,37,64,0.12); }
  8%        { opacity: 0.92; text-shadow: 0 0 4px rgba(201,168,76,0.1); }
  9%        { opacity: 1;    text-shadow: 0 0 20px rgba(201,168,76,0.5), 0 0 40px rgba(255,37,64,0.25); }
  50%       { opacity: 1;    text-shadow: 0 0 14px rgba(201,168,76,0.3), 0 0 28px rgba(255,37,64,0.15); }
  68%       { opacity: 0.96; }
  69%       { opacity: 1;    text-shadow: 0 0 22px rgba(201,168,76,0.55), 0 0 44px rgba(255,37,64,0.28); }
}
.section-header .section-title {
  animation: neonFlicker 7s ease-in-out infinite;
}

/* ── About: neon corner pins on badge-card ── */
.badge-card {
  position: relative;
}
.badge-card::before,
.badge-card::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.badge-card::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--neon-red);
  border-left: 2px solid var(--neon-red);
  box-shadow: -2px -2px 6px rgba(255,37,64,0.3);
}
.badge-card::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--gold-300);
  border-right: 2px solid var(--gold-300);
  box-shadow: 2px 2px 6px rgba(201,168,76,0.3);
}
.badge-card:hover::before,
.badge-card:hover::after { opacity: 1; }

/* ── Services: neon icon pulse on hover ── */
@keyframes iconGlow {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50%       { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor); }
}
.service-card:hover .service-icon i {
  animation: iconGlow 1.4s ease-in-out infinite;
}

/* ── Why-us: neon number glow ── */
@keyframes numberGlow {
  0%, 100% { opacity: 0.18; text-shadow: none; }
  50%       { opacity: 0.28; text-shadow: 0 0 30px rgba(255,37,64,0.35); }
}
.why-number { animation: numberGlow 4s ease-in-out infinite; }

/* ── Portfolio: overlay on hover for lightbox ── */
.portfolio-item { position: relative; }
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6,1,2,0.85) 0%,
    rgba(6,1,2,0.3) 50%,
    rgba(6,1,2,0.05) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}
.portfolio-overlay i {
  font-size: 1.6rem;
  color: var(--white);
  text-shadow: 0 0 14px var(--neon-red), 0 0 28px rgba(255,37,64,0.5);
  transform: scale(0.7);
  transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item:hover .portfolio-overlay i { transform: scale(1); }

/* ── Portfolio grid: dense fill ── */
.portfolio-grid { grid-auto-flow: dense; }

/* ── Reviews: neon open-quote ── */
@keyframes quoteGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(201,168,76,0.2); opacity: 0.08; }
  50%       { text-shadow: 0 0 16px rgba(255,37,64,0.3), 0 0 30px rgba(201,168,76,0.2); opacity: 0.14; }
}
.testimonial-card::before {
  animation: quoteGlow 5s ease-in-out infinite;
}

/* ── Booking: neon pulse on primary option ── */
@keyframes bookingPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.2), inset 0 0 0 rgba(37,211,102,0); }
  50%       { box-shadow: 0 4px 30px rgba(37,211,102,0.35), inset 0 0 20px rgba(37,211,102,0.04); }
}
.booking-option--primary { animation: bookingPulse 4s ease-in-out infinite; }

/* ── Booking options: red neon corner on hover ── */
.booking-option {
  position: relative;
  overflow: hidden;
}
.booking-option::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-red), var(--gold-300), transparent);
  transition: left 0.5s ease;
}
.booking-option:hover::after { left: 100%; }

/* ── Location: neon map border glow ── */
@keyframes mapGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(201,168,76,0.15), 0 0 20px rgba(201,168,76,0.05); }
  50%       { box-shadow: 0 0 0 1px rgba(255,37,64,0.2), 0 0 30px rgba(255,37,64,0.08); }
}
.location-map { animation: mapGlow 6s ease-in-out infinite; }

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(6,1,2,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-content {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,37,64,0.1),
    0 30px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(201,168,76,0.08);
}
.lightbox-img {
  display: block;
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(6,1,2,0.8);
  border: 1px solid rgba(255,37,64,0.3);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10001;
}
.lightbox-close:hover {
  background: var(--neon-red);
  border-color: var(--neon-red);
  box-shadow: 0 0 16px rgba(255,37,64,0.5);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(6,1,2,0.7);
  border: 1px solid rgba(201,168,76,0.25);
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10001;
}
.lightbox-nav:hover {
  background: rgba(201,168,76,0.15);
  border-color: var(--gold-300);
  box-shadow: 0 0 14px rgba(201,168,76,0.3);
}
.lightbox-prev { left: 1.2rem; }
.lightbox-next { right: 4.4rem; }
@media (max-width: 600px) {
  .lightbox-nav { display: none; }
}

/* ── Booking section canvas ── */
.booking-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Cursor comet trail canvas ── */
#cursor-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9996;
}

/* ═══════════════════════════════════════════════════════════════
   POLICY PAGES — Privacy Policy & Terms of Service
═══════════════════════════════════════════════════════════════ */

/* ─── HERO ─── */
.policy-hero {
  padding: 7rem 0 3.5rem;
  background: linear-gradient(180deg, var(--dark-1) 0%, var(--black) 100%);
  border-bottom: 1px solid var(--dark-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.policy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.policy-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1rem;
}
.policy-hero-label::before {
  content: '//';
  color: var(--neon-red);
  font-size: 0.75rem;
}
.policy-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--white);
  margin-bottom: 1rem;
}
.policy-hero .gold-rule {
  margin: 1.25rem auto 1.5rem;
}
.policy-updated {
  font-size: 0.85rem;
  color: var(--grey-300);
  letter-spacing: 0.05em;
}
.policy-updated-icon {
  color: var(--gold-400);
  margin-right: 0.4rem;
}

/* ─── BODY LAYOUT ─── */
.policy-body {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.policy-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .policy-layout { grid-template-columns: 1fr; }
  .policy-toc    { display: none; }
}

/* ─── TABLE OF CONTENTS ─── */
.policy-toc {
  position: sticky;
  top: 90px;
  background: var(--dark-2);
  border: 1px solid var(--dark-5);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.policy-toc h3 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--dark-5);
}
.policy-toc ol {
  list-style: none;
  counter-reset: toc-counter;
  padding: 0;
}
.policy-toc ol li {
  counter-increment: toc-counter;
  margin-bottom: 0.5rem;
}
.policy-toc ol li::before {
  content: counter(toc-counter, decimal-leading-zero) '. ';
  color: var(--gold-400);
  font-size: 0.72rem;
  font-family: var(--font-display);
}
.policy-toc a {
  font-size: 0.82rem;
  color: var(--grey-300);
  transition: color var(--transition);
  line-height: 1.4;
}
.policy-toc a:hover { color: var(--gold-200); }

/* ─── CONTENT ─── */
.policy-content { color: var(--off-white); }

.policy-section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--dark-4);
}
.policy-section:last-child { border-bottom: none; margin-bottom: 0; }

.policy-section-num {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-red);
  margin-bottom: 0.5rem;
  display: block;
}
.policy-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  color: var(--gold-200);
  margin-bottom: 1.25rem;
}
.policy-section p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--off-white);
  margin-bottom: 1rem;
}
.policy-section p:last-child { margin-bottom: 0; }
.policy-section p.policy-mt { margin-top: 1.25rem; }
.policy-section ul,
.policy-section ol {
  margin: 0.75rem 0 1rem 1.25rem;
}
.policy-section li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--off-white);
  margin-bottom: 0.4rem;
}
.policy-section h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-300);
  margin: 1.75rem 0 0.75rem;
  letter-spacing: 0.04em;
}
.policy-section strong { color: var(--white); font-weight: 600; }
.policy-section a {
  color: var(--gold-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy-section a:hover { color: var(--gold-200); }

/* ─── HIGHLIGHT BOX ─── */
.policy-highlight {
  background: var(--dark-2);
  border-left: 3px solid var(--gold-400);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.25rem 0;
  font-size: 0.92rem;
  color: var(--off-white);
  line-height: 1.75;
}
.policy-highlight.red { border-left-color: var(--neon-red); }

/* ─── TABLE ─── */
.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.88rem;
}
.policy-table th {
  background: var(--dark-3);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--dark-5);
}
.policy-table td {
  padding: 0.65rem 1rem;
  border: 1px solid var(--dark-5);
  color: var(--off-white);
  line-height: 1.6;
  vertical-align: top;
}
.policy-table tr:nth-child(even) td { background: var(--dark-2); }
.policy-table .tap-pay-note {
  color: var(--grey-300);
  font-size: 0.8rem;
}

/* ─── RIGHTS GRID ─── */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.right-card {
  background: var(--dark-2);
  border: 1px solid var(--dark-5);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: border-color var(--transition);
}
.right-card:hover { border-color: var(--gold-500); }
.right-card-icon {
  color: var(--gold-300);
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}
.right-card h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.right-card p {
  font-size: 0.82rem;
  color: var(--grey-300);
  line-height: 1.6;
  margin: 0;
}

/* ─── DEPOSIT CARDS ─── */
.deposit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.deposit-card {
  background: var(--dark-2);
  border: 1px solid var(--dark-5);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  text-align: center;
  transition: border-color var(--transition);
}
.deposit-card:hover { border-color: var(--gold-500); }
.deposit-card-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold-200);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.deposit-card-type {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--grey-300);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.deposit-card-desc {
  font-size: 0.82rem;
  color: var(--off-white);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.deposit-card-qr {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto 1.75rem;
  object-fit: contain;
}
.deposit-card-btn {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, var(--gold-600), var(--gold-400));
  color: var(--dark-1);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity var(--transition), transform var(--transition);
}
.deposit-card-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: var(--dark-1);
  text-decoration: none;
}

/* ─── WARNING BOX ─── */
.policy-warning {
  background: rgba(139, 28, 31, 0.15);
  border: 1px solid rgba(192, 41, 45, 0.4);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.policy-warning-icon {
  color: var(--neon-red);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.policy-warning p {
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.7;
}

/* ─── FOOTER LEGAL LINKS ─── */
.footer-legal {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.footer-legal a {
  font-size: 0.8rem;
  color: var(--grey-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.footer-legal a:hover { color: var(--gold-200); }

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — light-first pages, dark anchors
   The site was black end to end, so nothing stood out. Content bands now
   sit on paper; the hero, the services strip, the portfolio, the location
   block and the footer stay black because that is where the brand and the
   artwork belong. Every override below targets a class that actually
   exists in the markup — the earlier pass guessed names and left black
   cards stranded on light grounds.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Light grounds */
  --paper:      #FAF7F0;
  --paper-alt:  #F2ECDF;
  --card:       #FFFFFF;
  /* Ink for light grounds */
  --ink:        #14100A;
  --ink-muted:  #554E3E;
  --ink-faint:  #857C6C;
  /* Bright gold measures 2.3:1 on white and is unreadable. This is 5.4:1. */
  --gold-deep:  #8B6F1F;
  --line:       rgba(20,16,10,.13);
  --line-strong:rgba(20,16,10,.28);
  --red-deep:   #C4121F;

  /* Headings: Playfair Display replaces Cinzel. Same classical serif
     register, but it sets tight instead of sprawling and its sturdier
     strokes hold up on the light bands (Bodoni's hairlines read as too
     sharp-edged). Micro-labels move to Jost — a display serif at 11px
     uppercase loses its detail entirely. */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-label:   'Jost', 'Helvetica Neue', sans-serif;
}

/* ── GLOBAL: token remap on light surfaces ────────────────────────────
   Inside any light surface the dark-theme tokens resolve to light-ground
   equivalents. This is the systemic fix: it reaches every component that
   colours itself with var(--white)/--grey/--gold/--dark — including
   inline styles, which no selector override can touch — so nothing dark
   or washed-out can strand itself on paper again. The explicit component
   rules further down remain as fine-tuning on top. ─────────────────── */
.about, .why-us, .reviews, .faq-section, .surface-light,
.policy-body, .enquiry-page {
  /* text */
  --white:     var(--ink);
  --off-white: #2A2419;
  --grey-300:  var(--ink-muted);
  --grey-500:  var(--ink-faint);
  --grey-700:  #C9C2B2;
  /* gold: bright inscription gold is unreadable on paper — deepen it */
  --gold-100:  #6B561A;
  --gold-200:  #7A6320;
  --gold-300:  var(--gold-deep);
  --gold-400:  #755C1B;
  --gold-500:  #67511A;
  --neon-red:  var(--red-deep);
  /* surfaces: panels that were near-black flip to white/paper */
  --dark-1:    #FFFFFF;
  --dark-2:    #F6F1E7;
  --dark-3:    #F2ECDF;
  --dark-4:    #E7DFCE;
  --dark-5:    #D9D0BC;
}

/* ── Type roles ───────────────────────────────────────────────────────── */
.section-title, .hero-title, .booking-title, .policy-hero h1,
.about-lead, h1, h2 { letter-spacing: 0.01em; }
.section-title { font-weight: 600; }
.hero-title { font-weight: 700; letter-spacing: 0.04em; }

/* Small uppercase furniture reads better in the sans */
.section-label, .btn, .nav-link, .nav-cta, .mobile-link, .stat-label,
.t-name, .badge-card h3, .why-card h3, .service-tag, .hero-tagline,
.hero-studio-label, .connect-title, .portfolio-placeholder span {
  font-family: var(--font-label);
  font-weight: 600;
}
.stat-label, .hero-tagline, .hero-studio-label { font-weight: 500; }

/* ── Sharp text: no halos anywhere ────────────────────────────────────
   Headings, labels, stats and the hero all carried gold/red text-shadow
   blooms plus looping flicker/pulse animations. On paper they read as a
   smudge; on black as haze. Text is sharp now — the red and gold accents
   stay as solid lines and marks, never as glow. ─────────────────────── */
.section-title { text-shadow: none; }
.section-header .section-title { animation: none; }
.section-label::before,
.section-label::after { text-shadow: none; animation: none; }
.gold-rule span { box-shadow: none !important; }
.divider-diamond { box-shadow: none; }
.why-number { animation: none; text-shadow: none; }
.why-card:hover .why-number { text-shadow: none; }
.hero-title { text-shadow: 0 2px 0 rgba(0,0,0,0.8); } /* keep the crisp offset, drop the bloom */
.stat-number,
.stat-item:nth-child(even) .stat-number { text-shadow: none; }
.nav-link:hover { text-shadow: none; }
.hero-tagline, .hero-studio-label { text-shadow: none; }

/* The `//` marks beside labels: solid red, no neon wash on paper */
.about .section-label::before, .why-us .section-label::before,
.reviews .section-label::before, .faq-section .section-label::before { color: var(--red-deep); }

/* ── Band rhythm: dark, light, dark, light … footer dark ─────────────── */
.about       { background: var(--paper);     color: var(--ink); }
.why-us      { background: var(--paper-alt); color: var(--ink); }
.reviews     { background: var(--paper);     color: var(--ink); }
.faq-section { background: var(--paper-alt); color: var(--ink); position: relative; }

.services  { background: linear-gradient(180deg,#0C0C0E 0%,#0A0A0B 100%); }
.portfolio { background:
  radial-gradient(ellipse 80% 55% at 50% 0%, rgba(201,168,76,.06) 0%, transparent 70%), #08080A; }
.location  { background: linear-gradient(180deg,#0C0D10 0%,#090A0C 100%); }

/* The studio watermark behind Why Us was set for black. Re-tint for paper. */
.why-us::after { color: rgba(20,16,10,.035); }

/* Seam between bands — keeps the red + gold edge the studio likes */
.about::before, .services::before, .why-us::before, .portfolio::before,
.reviews::before, .faq-section::before, .location::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background: linear-gradient(90deg, transparent 0%, rgba(196,18,31,.35) 30%,
              rgba(139,111,31,.5) 50%, rgba(196,18,31,.35) 70%, transparent 100%);
}

/* ── Type on the light bands ─────────────────────────────────────────── */
.about .section-title, .why-us .section-title,
.reviews .section-title, .faq-section .section-title { color: var(--ink); }
.about .section-label, .why-us .section-label,
.reviews .section-label, .faq-section .section-label { color: var(--gold-deep); }
.about .section-label::after, .why-us .section-label::after,
.reviews .section-label::after, .faq-section .section-label::after { color: rgba(196,18,31,.45); }
.about .section-sub, .why-us .section-sub,
.reviews .section-sub, .faq-section .section-sub { color: var(--ink-muted); }
.about .gold-rule::before, .about .gold-rule::after,
.why-us .gold-rule::before, .why-us .gold-rule::after,
.reviews .gold-rule::before, .reviews .gold-rule::after,
.faq-section .gold-rule::before, .faq-section .gold-rule::after {
  background: linear-gradient(90deg, transparent, rgba(139,111,31,.75));
}

/* ── About ───────────────────────────────────────────────────────────── */
.about-text .about-lead { color: var(--ink); }
.about-text p           { color: var(--ink-muted); }
.about-text strong      { color: var(--ink); }

.badge-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,16,10,.05);
}
.badge-card:hover {
  background: var(--card);
  border-color: rgba(196,18,31,.5);
  box-shadow: 0 12px 30px rgba(20,16,10,.11);
}
.badge-icon { background: rgba(196,18,31,.07); color: var(--red-deep); }
.badge-card:hover .badge-icon { background: rgba(196,18,31,.13); }
.badge-card h3 { color: var(--ink); }
.badge-card p  { color: var(--ink-muted); }
.about-badges .badge-card:nth-child(even):hover { border-color: rgba(196,18,31,.5); }

/* ── Why us ──────────────────────────────────────────────────────────── */
.why-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: 0 1px 2px rgba(20,16,10,.05);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.why-card:nth-child(odd):hover,
.why-card:nth-child(even):hover {
  border-color: rgba(196,18,31,.45);
  border-top-color: var(--red-deep);
  box-shadow: 0 12px 30px rgba(20,16,10,.11);
  transform: translateY(-3px);
}
.why-number { color: rgba(196,18,31,.28); }
.why-card:hover .why-number { color: rgba(196,18,31,.6); }
.why-card h3 { color: var(--ink); }
.why-card p  { color: var(--ink-muted); }

/* ── Reviews ─────────────────────────────────────────────────────────── */
.rating-badge {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,16,10,.05);
}
.rating-badge:hover { border-color: rgba(196,18,31,.45); }
.rating-badge > i     { color: var(--gold-deep); }
.rating-stars,
.rating-recommend     { color: var(--gold-deep); }
.rating-score         { color: var(--ink); }
.rating-count         { color: var(--ink-faint); }

.testimonial-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,16,10,.05);
}
.testimonial-card::before { color: rgba(139,111,31,.16); }
.testimonial-card:hover {
  border-color: rgba(196,18,31,.5);
  box-shadow: 0 12px 30px rgba(20,16,10,.12);
}
.t-stars    { color: var(--gold-deep); }
.t-text     { color: var(--ink-muted); }
.t-name     { color: var(--ink); }
.t-platform { color: var(--ink-faint); }

.carousel-arrow {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}
.carousel-arrow:hover {
  background: var(--card);
  border-color: var(--red-deep);
  color: var(--red-deep);
  box-shadow: 0 6px 18px rgba(20,16,10,.14);
}
.carousel-dot          { background: rgba(20,16,10,.14); border-color: rgba(20,16,10,.22); }
.carousel-dot.is-active{ background: var(--red-deep); border-color: var(--red-deep); box-shadow: none; }

/* ── BUTTONS — black carries the work, red marks the one key action ──── */
.btn {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn-primary {
  background: var(--red-deep);
  color: #fff;
  border-color: var(--red-deep);
}
.btn-primary:hover {
  background: #A50D18;
  border-color: #A50D18;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(196,18,31,.3);
}
/* Black — the everyday action. Flips to bone white on dark grounds. */
.btn-black { background: var(--ink); color: #F4EEE2; border-color: var(--ink); }
.btn-black:hover { background:#000; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,16,10,.28); }
.services .btn-black, .portfolio .btn-black, .location .btn-black, .hero .btn-black {
  background: #F4EEE2; color: var(--ink); border-color: #F4EEE2;
}
/* Outline picks up a red edge rather than gold */
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--red-deep); color: var(--red-deep); background: rgba(196,18,31,.04); transform: translateY(-2px); }
.services .btn-outline, .portfolio .btn-outline, .location .btn-outline, .hero .btn-outline {
  color: var(--white); border-color: rgba(244,238,226,.32);
}
.services .btn-outline:hover, .portfolio .btn-outline:hover,
.location .btn-outline:hover, .hero .btn-outline:hover {
  border-color: var(--neon-red); color:#fff; background: rgba(255,37,64,.08);
}

/* ── Cards on the dark bands keep the red hover too ──────────────────── */
.services .service-card:hover, .portfolio .portfolio-item:hover {
  border-color: var(--neon-red);
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}

/* ── Long-form pages: dark hero, light body ──────────────────────────────
   The base .policy-section rules colour text for the old black ground and
   out-rank a .policy-content override, so they are re-declared here at
   matching specificity. Gold stays on the dark hero only — on paper every
   accent (links, callout edges, ToC numbering) is red or ink. ──────────── */
.policy-body { background: var(--paper); color: var(--ink); }
.policy-content { color: var(--ink-muted); }
.policy-content h2, .policy-content h3 { color: var(--ink); }
.policy-content strong { color: var(--ink); }
.policy-content a { color: var(--red-deep); }
.policy-section { border-bottom-color: var(--line); }
.policy-section p, .policy-section li { color: var(--ink-muted); }
.policy-section h2, .policy-section h3 { color: var(--ink); }
.policy-section strong { color: var(--ink); }
.policy-section a { color: var(--red-deep); }
.policy-section a:hover { color: #A50D18; }
.policy-section-num { color: var(--red-deep); }
.policy-toc { background: var(--card); border: 1px solid var(--line); }
.policy-toc h3 { color: var(--ink); border-bottom-color: var(--line); }
.policy-toc ol li::before { color: var(--red-deep); }
.policy-toc a { color: var(--ink-muted); }
.policy-toc a:hover { color: var(--red-deep); }
.policy-highlight { background: rgba(20,16,10,.04); border-left: 3px solid var(--red-deep); color: var(--ink-muted); }
.policy-highlight strong { color: var(--ink); }
.policy-warning { background: rgba(196,18,31,.06); border-color: rgba(196,18,31,.35); }
.policy-warning p { color: var(--ink-muted); }
.policy-warning strong { color: var(--ink); }
.policy-table th {
  background: var(--paper-alt); color: var(--gold-deep);
  border-color: var(--line); font-family: var(--font-label);
}
.policy-table td { border-color: var(--line); color: var(--ink-muted); }
.policy-table tr:nth-child(even) td { background: rgba(20,16,10,.022); }
.policy-table .tap-pay-note { color: var(--ink-faint); }

/* Aftercare page pieces on light (the quick-reference icon strip is
   styled inline on the page itself) */
.ac-timeline li { border-left-color: var(--line); }
.ac-timeline li::before { background: var(--red-deep); }
.ac-timeline strong { color: var(--ink); }
.ac-col.do   { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.35); }
.ac-col.dont { background: rgba(196,18,31,.06);  border-color: rgba(196,18,31,.35); }
.ac-faq-item { background: var(--card); border-color: var(--line); }
.ac-faq-item[open] { background: #FFFDF7; border-color: rgba(196,18,31,.45); }
.ac-faq-item summary { color: var(--ink); }
.ac-faq-item summary:hover, .ac-faq-item[open] summary { color: var(--red-deep); }
.ac-faq-chevron { color: var(--red-deep); }
.ac-faq-answer { color: var(--ink-muted); }

/* Homepage FAQ on light */
.faq-item { background: var(--card); border-color: var(--line); }
.faq-item[open] { background: #FFFDF7; border-color: rgba(196,18,31,.45); }
.faq-item summary { color: var(--ink); }
.faq-item summary:hover, .faq-item[open] summary { color: var(--red-deep); }
.faq-chevron { color: var(--red-deep); border-color: rgba(196,18,31,.35); }
.faq-item[open] .faq-chevron { background: rgba(196,18,31,.1); }
.faq-answer { color: var(--ink-muted); }
.faq-answer p, .faq-answer li { color: var(--ink-muted); }
.faq-answer strong { color: var(--ink); }
.faq-cta p { color: var(--ink-faint); }

/* Reusable table */
.dfa-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.dfa-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .92rem; }
.dfa-table th {
  background: var(--paper-alt); font-family: var(--font-label); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
  text-align: left; padding: .8rem 1rem; border-bottom: 2px solid rgba(196,18,31,.3);
}
.dfa-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.dfa-table tbody tr:nth-child(even) { background: rgba(20,16,10,.022); }
.dfa-table tbody tr:hover { background: rgba(196,18,31,.045); }
.dfa-table tbody tr:last-child td { border-bottom: 0; }
.dfa-table td strong { color: var(--ink); }

/* ── Enquiry form on light — testing whether it converts better ──────── */
.enquiry-page { background: var(--paper); color: var(--ink); }
.enquiry-page .eq-card { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(20,16,10,.06); }
.enquiry-page .eq-card-header { background: var(--paper-alt); border-bottom: 1px solid var(--line); }
.enquiry-page .eq-card-title { color: var(--ink); }
.enquiry-page .eq-card-step { background: var(--red-deep); color: #fff; }
.enquiry-page .eq-label { color: var(--ink-faint); }
.enquiry-page .eq-input, .enquiry-page .eq-textarea, .enquiry-page .eq-select {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.enquiry-page .eq-input:focus, .enquiry-page .eq-textarea:focus, .enquiry-page .eq-select:focus {
  border-color: var(--red-deep); box-shadow: 0 0 0 3px rgba(196,18,31,.13); outline: none;
}
.enquiry-page .eq-input::placeholder, .enquiry-page .eq-textarea::placeholder { color: #B9B1A2; }
.enquiry-page .eq-radio-card, .enquiry-page .eq-proceed-card {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.enquiry-page .eq-radio-card:hover, .enquiry-page .eq-proceed-card:hover { border-color: rgba(196,18,31,.45); }
.enquiry-page .eq-proceed-card.is-active,
.enquiry-page .eq-radio-card:has(input:checked) {
  border-color: var(--red-deep); background: rgba(196,18,31,.05);
}
.enquiry-page .eq-radio-text, .enquiry-page .eq-proceed-title { color: var(--ink); }
.enquiry-page .eq-proceed-sub { color: var(--ink-muted); }
.enquiry-page .eq-proceed-sub strong, .enquiry-page .eq-proceed-title strong { color: var(--ink); }
.enquiry-page .eq-day-chip, .enquiry-page .eq-slot-chip {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.enquiry-page .eq-day-chip.is-active, .enquiry-page .eq-slot-chip.is-active {
  background: var(--red-deep); border-color: var(--red-deep); color: #fff;
}
.enquiry-page .eq-slot-note, .enquiry-page .eq-privacy, .enquiry-page .eq-hint { color: var(--ink-faint); }
.enquiry-page .eq-optional-hint { color: var(--ink-faint); }
.enquiry-page .eq-ref-add { background: rgba(196,18,31,.05); border-color: rgba(196,18,31,.4); color: var(--red-deep); }
.enquiry-page .eq-ref-thumb { border-color: var(--line); background: #fff; }
.enquiry-page .enquiry-time-note, .enquiry-page .hero-rating-text { color: var(--ink-muted); }