/* Black Ink Tattoo — Redesigned layout */
:root{
  --ink:#111827;
  --panel:#0b0f17;
  --panel-2:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --red:#ef4444;
  --gold:#eab308;
  --border:#1f2937;
  --radius:16px;
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --header-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding-top:var(--header-h);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background: radial-gradient(900px 450px at 0% -10%, rgba(239,68,68,.06), transparent), linear-gradient(180deg, #0a0d13, #0a1220);
  line-height:1.65;
}
img{max-width:100%; display:block}
.container{width:min(1180px,92%); margin-inline:auto}

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:1000; background:rgba(11,15,23,.7);
  backdrop-filter: blur(10px); border-bottom:1px solid transparent; transition: box-shadow .25s ease, border-color .25s ease;
}
.topbar.has-shadow{ box-shadow: var(--shadow); border-color:var(--border); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px; }
.brand-mark{ width:36px; height:36px; border-radius:50%; border:2px solid var(--red); object-fit:cover; }
.nav ul{ list-style:none; display:flex; gap:.6rem; padding:0; margin:0; }
.nav a{ color:var(--text); text-decoration:none; padding:.5rem .75rem; border-radius:10px; font-weight:600; }
.nav a:hover{ background:#0b1220; }
.topbar-cta{ display:flex; gap:.5rem; align-items:center; }
.nav-toggle{ background:none; border:0; display:grid; gap:4px; cursor:pointer; }
.nav-toggle .bar{ width:24px; height:2px; background:var(--text); display:block; }

@media (max-width: 960px){
  .nav{ position:fixed; top:var(--header-h); right:-100%; background:var(--panel-2); border-left:1px solid var(--border); height:calc(100dvh - var(--header-h)); width:min(320px,85vw); padding:1rem; transition:right .25s ease; }
  .nav.open{ right:0; }
  .nav ul{ display:grid; gap:.5rem; }
  .nav-toggle{ display:grid; }
}

/* Buttons */
.btn{ display:inline-block; border:1px solid var(--gold); color:#0b0f17; background:var(--gold); padding:.7rem 1rem; border-radius:12px; font-weight:800; text-decoration:none; }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn--sm{ padding:.5rem .75rem; font-size:.9rem; }
.btn--primary{ background:linear-gradient(90deg, var(--gold), #f59e0b); border-color:transparent; color:#111; }

/* Split hero */
.hero-split{ display:grid; grid-template-columns: 1fr 1fr; min-height: min(84vh, 920px); }
.hero-panel{ position:relative; }
.hero-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-right{ background: radial-gradient(800px 400px at 100% 0%, rgba(239,68,68,.08), transparent); }
.hero-right-content{ position:relative; z-index:1; display:flex; flex-direction:column; gap:1rem; justify-content:end; height:100%; padding: 12vh 6vw; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(10,12,18,.85)); }
.hero-right h1{ font-family:"Playfair Display", serif; font-size: clamp(2rem, 4vw, 3.4rem); line-height:1.1; margin:0; }
.hero-right .script{ color:var(--gold); }

/* Marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--border); background:#0a1120; }
.marquee-track{ white-space:nowrap; padding:.5rem 0; animation: scroll 18s linear infinite; color:#d1d5db; }
@keyframes scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* Sections */
.section{ padding: clamp(2.5rem, 5vw, 5rem) 0; }
.section--alt{ background:#0a1120; border-block:1px solid var(--border); }
.section--accent{ background: radial-gradient(900px 450px at 0% -10%, rgba(239,68,68,.08), transparent), #0a1120; border-top:1px solid var(--border); }
.section-head h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin:.25rem 0; }
.section-head p{ margin:0; color:var(--muted); }

/* About */
.about-grid{ display:grid; grid-template-columns: 1.4fr .8fr; gap:1rem; }
.about-card{ background:#0a1326; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.badges span{ background:#0a1326; border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px; font-size:.9rem; color:#e5e7eb; }

/* Cards & styles grid */
.cards{ display:grid; gap:1rem; }
.styles-grid{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.card{ background:linear-gradient(180deg,#0a1326,#090f1d); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.card img{ aspect-ratio:4/3; object-fit:cover; }
.card-body{ padding:1rem; }
.card h3{ margin:.25rem 0; }

/* Team */
.team-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.team-card{ display:flex; gap:.9rem; background:#0a1326; border:1px solid var(--border); border-radius:var(--radius); padding:.9rem; align-items:center; }
.team-card img{ width:72px; height:72px; border-radius:50%; border:2px solid var(--red); object-fit:cover; }

/* Masonry gallery */
.masonry{ column-count: 2; column-gap:.6rem; }
.masonry img{ width:100%; border-radius:12px; border:1px solid var(--border); margin:0 0 .6rem; box-shadow:var(--shadow); transition: transform .2s ease; }
.masonry img:hover{ transform: scale(1.015); }
@media (min-width:720px){ .masonry{ column-count: 3; } }

/* Map */
.map-card{ background:#0a1326; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); }
.map-embed{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--border); margin:.75rem 0; }
.map-embed iframe{ width:100%; height:100%; border:0; }
.map-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); background:#070d19; }
.footer-grid{ display:grid; gap:1rem; grid-template-columns: 1fr; padding:2rem 0 1rem; }
.footer-bottom{ display:flex; justify-content:center; padding:1rem 0 2rem; color:#a3aab7; }
@media (min-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* Reveal on scroll */
[data-reveal]{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }


/* v3: force nav to be always visible; removed hamburger */
@media (max-width: 960px){
  .nav{ position: static !important; width:auto !important; height:auto !important; padding:0 !important; background:transparent !important; border:0 !important; }
  .nav ul{ display:flex !important; gap:.35rem; }
}