@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');.site-shell { overflow: hidden; background: radial-gradient(circle at 20% 0%, #18130b 0, #070707 34%); }
.site-header { position: fixed; inset: 0 0 auto; height: 82px; z-index: 100; display:flex; align-items:center; justify-content:space-between; padding: 0 5vw; background: rgba(5,5,5,.84); backdrop-filter: blur(16px); border-bottom:1px solid rgba(255,255,255,.06); }
.brand img { width: 92px; max-height: 68px; object-fit: contain; }
.nav { display:flex; align-items:center; gap:24px; }
.nav a { color:#ddd7cc; font-size:14px; font-weight:600; transition:.2s; }
.nav a:hover { color:var(--gold); }
.nav-cta { padding:12px 18px; border:1px solid var(--gold); color:var(--gold)!important; }
.menu-button { display:none; border:0; background:none; color:white; }
.hero { min-height:100vh; display:flex; align-items:center; padding:130px 7vw 80px; background-size:cover; background-position:center; }
.hero-content { width:min(760px,100%); }
.eyebrow { margin:0 0 14px; color:var(--gold); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-weight:700; }
h1,h2,h3 { font-family:'Cormorant Garamond',serif; }
h1 { margin:0; font-size:clamp(52px,8vw,104px); line-height:.9; letter-spacing:-2px; }
h1 span { color:var(--gold); }
.hero-copy { max-width:660px; color:#d0cbc2; font-size:18px; line-height:1.75; margin:28px 0 34px; }
.hero-actions,.hero-points,.social-row { display:flex; flex-wrap:wrap; gap:14px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 22px; font-weight:700; border:1px solid transparent; transition:.25s; }
.btn.primary { background:var(--gold); color:#111; }
.btn.primary:hover {
  background:#c79a3b;
  color:#ffffff;
  transform:translateY(-2px);
}
.btn.secondary { border-color:rgba(255,255,255,.24); color:white; }
.btn.secondary:hover { border-color:var(--gold); color:var(--gold); }
.hero-points { margin-top:36px; color:#d6d0c6; }
.hero-points span { display:flex; align-items:center; gap:8px; font-size:14px; }
.quick-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0c0c0c; }
.quick-strip div { padding:28px; text-align:center; border-right:1px solid var(--line); }
.quick-strip div:last-child { border:0; }
.quick-strip strong { display:block; color:var(--gold); font-family:'Cormorant Garamond'; font-size:28px; }
.quick-strip span { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.section { padding:110px 7vw; }
.split-section { display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; }
.image-stack { position:relative; min-height:560px; }
.main-image { width:82%; height:520px; object-fit:cover; border:1px solid var(--line); }
.floating-image { position:absolute; right:0; bottom:0; width:48%; height:280px; object-fit:cover; border:10px solid #070707; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.section-copy h2,.section-heading h2 { margin:0 0 20px; font-size:clamp(38px,5vw,64px); line-height:1; }
.section-copy > p:not(.eyebrow), .section-heading > p:not(.eyebrow) { color:var(--muted); line-height:1.8; }
.feature-list { display:grid; gap:14px; margin:28px 0; }
.feature-list span { display:flex; align-items:center; gap:10px; color:#e5dfd6; }
.feature-list svg { color:var(--gold); }
.text-link { display:inline-flex; align-items:center; color:var(--gold); font-weight:700; }
.dark-panel { background:#0d0d0d; border-block:1px solid rgba(255,255,255,.05); }
.section-heading { max-width:820px; margin-bottom:48px; }
.section-heading.center { text-align:center; margin-inline:auto; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.service-card { min-height:250px; padding:30px; background:linear-gradient(145deg,#151515,#0c0c0c); border:1px solid rgba(255,255,255,.07); transition:.25s; }
.service-card:hover { transform:translateY(-6px); border-color:var(--line); }
.service-number { color:var(--gold); font-size:12px; letter-spacing:2px; }
.service-card h3 { font-size:28px; margin:38px 0 12px; }
.service-card p { color:var(--muted); line-height:1.7; font-size:14px; }
.artist-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.artist-card { position:relative; min-height:620px; overflow:hidden; border:1px solid var(--line); background:#111; }
.artist-card img { width:100%; height:100%; object-fit:cover; }
.artist-card > div { position:absolute; inset:auto 0 0; padding:34px; background:linear-gradient(transparent,rgba(0,0,0,.96)); }
.artist-card p { color:var(--gold); text-transform:uppercase; letter-spacing:2px; font-size:11px; }
.artist-card h3 { font-size:42px; margin:4px 0 8px; }
.artist-card span { color:#d1cbc1; line-height:1.6; }
.gallery-section { background:#0b0b0b; }
.filter-row { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.filter-row button { background:transparent; color:#c8c1b7; border:1px solid rgba(255,255,255,.12); padding:10px 16px; cursor:pointer; }
.filter-row button.active,.filter-row button:hover { color:#111; background:var(--gold); border-color:var(--gold); }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-card { position:relative; aspect-ratio:4/5; padding:0; border:0; overflow:hidden; background:#111; cursor:pointer; }
.gallery-card img { width:100%; height:100%; object-fit:cover; transition:.45s; }
.gallery-card:hover img { transform:scale(1.06); }
.gallery-overlay { position:absolute; inset:auto 0 0; display:grid; grid-template-columns:1fr auto; align-items:end; gap:3px 12px; text-align:left; padding:24px; background:linear-gradient(transparent,rgba(0,0,0,.94)); color:white; }
.gallery-overlay small { grid-column:1; color:var(--gold); text-transform:uppercase; letter-spacing:2px; }
.gallery-overlay strong { grid-column:1; font-family:'Cormorant Garamond'; font-size:23px; }
.gallery-overlay svg { grid-column:2; grid-row:1/3; color:var(--gold); }
.piercing-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
.piercing-grid figure { margin:0; background:#111; border:1px solid rgba(255,255,255,.07); }
.piercing-grid img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.piercing-grid figcaption { padding:14px 10px; text-align:center; color:#d7d0c5; font-size:13px; }
.center-action { text-align:center; margin-top:34px; }
.reviews-section { background:#0d0d0d; }
.stars { display:flex; justify-content:center; gap:4px; color:var(--gold); margin-bottom:10px; }
.stars svg { fill:currentColor; }
.reviews-widget-wrap { min-height:340px; padding:18px; background:white; border-radius:8px; }
.faq-list { max-width:900px; margin:0 auto; border-top:1px solid rgba(255,255,255,.12); }
.faq-list article { border-bottom:1px solid rgba(255,255,255,.12); }
.faq-list button { width:100%; display:flex; justify-content:space-between; gap:24px; padding:24px 0; color:white; background:none; border:0; text-align:left; font-weight:700; cursor:pointer; }
.faq-list button span:last-child { color:var(--gold); font-size:24px; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-answer p { margin:0; padding:0 0 24px; color:var(--muted); line-height:1.75; }
.faq-list article.open .faq-answer { max-height:220px; }
.contact-section { padding-bottom:0; }
.contact-card { display:grid; grid-template-columns:1.1fr .9fr; gap:55px; padding:55px; background:linear-gradient(135deg,#17130d,#0f0f0f); border:1px solid var(--line); }
.contact-card h2 { font-size:clamp(40px,5vw,62px); margin:0 0 18px; }
.contact-card p { color:var(--muted); line-height:1.8; }
.contact-list { display:grid; gap:15px; margin:28px 0; }
.contact-list a,.contact-list span { display:flex; align-items:flex-start; gap:12px; color:#e1dbd1; }
.contact-list svg { flex:0 0 auto; color:var(--gold); }
.social-row a { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); color:var(--gold); }
.contact-visual { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact-visual img { width:100%; height:100%; min-height:360px; object-fit:cover; }
.contact-section iframe { width:100%; height:420px; border:0; margin-top:26px; display:block; filter:grayscale(1) invert(.9) contrast(.9); }
.footer { display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:50px; padding:70px 7vw 28px; background:#050505; border-top:1px solid var(--line); }
.footer img { width:120px; }
.footer p { max-width:380px; color:var(--muted); line-height:1.7; }
.footer h4 { color:var(--gold); margin:0 0 18px; }
.footer a { display:block; margin:10px 0; color:#cfc8bd; }
.copyright { grid-column:1/-1; padding-top:28px; margin-top:20px; border-top:1px solid rgba(255,255,255,.08); color:#827d75; font-size:13px; }
.floating-whatsapp { position:fixed; right:22px; bottom:22px; z-index:80; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:white; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.lightbox { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:30px; background:rgba(0,0,0,.94); }
.lightbox img { max-height:82vh; max-width:90vw; object-fit:contain; }
.lightbox button { position:absolute; right:25px; top:25px; border:0; background:none; color:white; cursor:pointer; }
.lightbox p { margin:10px 0 0; color:var(--gold); }

@media (max-width: 1100px) {
  .service-grid,.gallery-grid { grid-template-columns:repeat(2,1fr); }
  .piercing-grid { grid-template-columns:repeat(4,1fr); }
  .split-section { grid-template-columns:1fr; }
  .image-stack { max-width:760px; }
}
@media (max-width: 780px) {
  .site-header { height:70px; padding:0 20px; }
  .brand img { width:78px; }
  .menu-button { display:block; }
  .nav { position:absolute; top:70px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:24px; background:#080808; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .nav a { padding:8px 0; }
  .nav-cta { text-align:center; margin-top:6px; }
  .hero { min-height:92vh; padding:110px 22px 60px; background-position:65% center; }
  h1 { font-size:54px; }
  .hero-copy { font-size:16px; }
  .hero-actions .btn { width:100%; }
  .quick-strip { grid-template-columns:repeat(2,1fr); }
  .quick-strip div:nth-child(2) { border-right:0; }
  .section { padding:78px 22px; }
  .image-stack { min-height:430px; }
  .main-image { height:390px; width:88%; }
  .floating-image { width:52%; height:210px; }
  .service-grid,.artist-grid,.gallery-grid { grid-template-columns:1fr; }
  .artist-card { min-height:560px; }
  .piercing-grid { grid-template-columns:repeat(2,1fr); }
  .contact-card { grid-template-columns:1fr; padding:30px 22px; }
  .contact-visual { min-height:300px; }
  .contact-visual img { min-height:300px; }
  .footer { grid-template-columns:1fr; gap:28px; }
}

.hero-tagline {
  margin: 12px 0 0;
  color: #f1e8d8;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: .02em;
}
.artist-card > div > p {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.booking-form {
  align-self: stretch;
  padding: 30px;
  background: rgba(7,7,7,.72);
  border: 1px solid var(--line);
}
.booking-form h3 { margin: 0 0 22px; font-size: 34px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid label { display:grid; gap:8px; color:#e9e0d3; font-size:13px; font-weight:700; }
.form-grid input,.form-grid select,.form-grid textarea {
  width:100%; border:1px solid rgba(255,255,255,.14); background:#0b0b0b; color:white;
  padding:13px 14px; font:inherit; outline:none;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:var(--gold); }
.form-grid textarea { resize:vertical; min-height:110px; }
.full-field { grid-column:1/-1; }
.booking-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.booking-actions .btn { border:1px solid var(--gold); cursor:pointer; }
.form-note { display:block; margin-top:14px; color:#8f887e; line-height:1.5; }
.form-honey { position:absolute !important; left:-9999px !important; opacity:0 !important; }
.floating-socials { position:fixed; right:22px; bottom:22px; z-index:80; display:grid; gap:10px; }
.floating-social { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:white; box-shadow:0 12px 30px rgba(0,0,0,.35); transition:transform .2s ease; }
.floating-social:hover { transform:translateY(-3px); }
.floating-social.whatsapp { background:#25d366; }
.floating-social.instagram { background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.floating-social.facebook { background:#1877f2; }

@media (max-width: 780px) {
  .form-grid { grid-template-columns:1fr; }
  .full-field { grid-column:auto; }
  .booking-form { padding:24px 18px; }
  .booking-actions .btn { width:100%; }
  .floating-socials { right:14px; bottom:14px; gap:8px; }
  .floating-social { width:50px; height:50px; }
}
.btn.primary:hover,
a.btn.primary:hover,
button.btn.primary:hover {
  background: #c79a3b !important;
  color: #ffffff !important;
  border-color: #c79a3b !important;
  transform: translateY(-2px);
}
.booking-actions .btn.secondary:hover {
  background: #c79a3b !important;
  color: #111 !important;
  border-color: #c79a3b !important;
  transform: translateY(-2px);
}
.booking-actions .btn.secondary {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
}

.booking-actions .btn.secondary:hover {
  background: var(--gold) !important;
  color: #111 !important;
}
.booking-actions .btn.secondary {
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
  transition: all 0.3s ease;
}

.booking-actions .btn.secondary:hover {
  background: #1DA851;
  border-color: #1DA851;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

:root {
  font-family: 'Inter', sans-serif;
  color: #f5f1e8;
  background: #070707;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --gold: #d6b36a;
  --gold-soft: #aa8a4e;
  --ink: #070707;
  --panel: #111111;
  --muted: #b7b1a7;
  --line: rgba(214, 179, 106, 0.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #070707; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #111; }