:root{
  --bg:#050505;
  --fg:#f2f0ed;
  --muted:#aaa7a2;
  --line:#2b2b2b;
  --panel:#191919;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"DM Sans",sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
body.no-scroll{overflow:hidden}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;z-index:20;top:0;left:0;right:0;height:82px;
  display:flex;align-items:center;padding:0 40px;gap:34px;
  background:linear-gradient(#050505,transparent);
}
.brand{font-family:Oswald,sans-serif;font-weight:600;font-size:31px;letter-spacing:-.7px}
.desktop-nav{display:flex;gap:28px;margin-left:auto;font-size:11px;letter-spacing:2px}
.book-top{
  border:1px solid #777;background:transparent;color:inherit;
  padding:18px 38px;font-size:15px;letter-spacing:.5px;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.book-top:hover{background:#f1f0ee;color:#080808;border-color:#f1f0ee}

/* three-line menu button — always visible */
.menu-btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:38px;height:34px;
  background:none;border:0;padding:5px;cursor:pointer;
}
.menu-btn span{
  display:block;height:2px;width:100%;
  background:#fff;border-radius:2px;margin:0;
  transition:transform .3s ease,opacity .3s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{height:100svh;min-height:700px;position:relative;overflow:hidden}

.hero-grid{
  position:absolute;inset:0;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  gap:5px;background:#111;
}

.tile{position:relative;overflow:hidden;background:linear-gradient(135deg,#222,#080808)}

.tile img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity 1.8s ease,transform 12s ease;
}
.tile.active img{opacity:.9;transform:scale(1.13) translate3d(1%,-1%,0)}

.tile.empty:after{
  content:"TATTOO PHOTO";position:absolute;inset:0;
  display:grid;place-items:center;color:#555;letter-spacing:3px;font-size:10px;
}

.hero-shade{
  position:absolute;inset:0;z-index:2;
  background:rgba(0,0,0,.38);
  pointer-events:none;
}

.hero-content{
  position:absolute;z-index:3;
  left:7vw;right:7vw;top:50%;transform:translateY(-42%);
  text-align:center;
}

.eyebrow{font-size:11px;letter-spacing:4px;color:#d2d0cc;margin:0 0 22px}
.hero h1,.intro h2,.statement h2,.about h2,.booking-info h2{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  line-height:.82;letter-spacing:-2px;margin:0;
}
.hero h1{font-size:clamp(58px,8vw,128px)}
em{font-style:normal}
.hero-copy{max-width:600px;margin:30px auto;font-size:18px;line-height:1.5;color:#ddd}

.cta,.submit{
  display:inline-flex;align-items:center;justify-content:center;
  background:#f1f0ee;color:#080808;border:0;padding:20px 34px;
  font-size:13px;letter-spacing:1.2px;cursor:pointer;
  font-family:inherit;
}

.hero-status{
  position:absolute;z-index:3;left:35px;bottom:28px;
  font-size:14px;color:#ddd;
}
.clock{font-size:25px;margin-right:10px}

/* =========================================================
   INTRO
   ========================================================= */
.intro{padding:150px 8vw;display:grid;grid-template-columns:1.3fr 1fr;gap:8vw}
.intro h2{font-size:clamp(55px,7vw,105px)}
.intro p:last-child{
  font-size:18px;line-height:1.7;color:#b8b5b0;
  max-width:520px;align-self:end;
}

/* =========================================================
   GALLERY (stacked, one by one)
   ========================================================= */
.gallery{padding:40px 5vw 140px}

.section-head{
  display:flex;justify-content:space-between;
  border-top:1px solid var(--line);padding:18px 0;
  font-size:10px;letter-spacing:3px;color:#aaa;
}

.gallery-stack{
  display:flex;
  flex-direction:column;
  gap:110px;
  margin-top:80px;
}

.work-item{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  cursor:pointer;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease, transform .9s ease;
  outline:none;
}
.work-item.in-view{opacity:1;transform:none}
.work-item:focus-visible .work-image{outline:2px solid #f1f0ee;outline-offset:4px}

.work-image{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#151515;
}
.work-image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.work-item:hover .work-image img{transform:scale(1.03)}

.work-image.empty:after{
  content:"TATTOO PHOTO";position:absolute;inset:0;
  display:grid;place-items:center;color:#555;letter-spacing:3px;font-size:10px;
}

.work-text{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 26px;
  align-items:baseline;
}
.work-index{
  font-family:Oswald,sans-serif;
  font-size:12px;letter-spacing:2px;color:#888;
  grid-row:1 / span 3;
}
.work-title{
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:clamp(32px,4vw,58px);
  line-height:1;letter-spacing:-1px;
  margin:0;
}
.work-desc{
  margin:0;
  font-size:16px;line-height:1.65;color:#b8b5b0;
  max-width:64ch;
}
.work-meta{
  font-size:11px;letter-spacing:2px;color:#888;
  text-transform:uppercase;
}

/* =========================================================
   STATEMENT
   ========================================================= */
.statement{
  padding:160px 8vw;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.statement-inner{max-width:1200px;margin:auto}
.statement h2{font-size:clamp(65px,9vw,140px)}
.steps{
  margin-top:100px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.steps div{padding:25px;border-right:1px solid var(--line);display:flex;gap:25px}
.steps b{font-size:11px;letter-spacing:2px}
.steps span{font-size:14px;color:#bbb}

/* =========================================================
   ABOUT
   ========================================================= */
.about{padding:160px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:12vw}
.about h2{font-size:clamp(55px,7vw,105px)}
.about>p{font-size:20px;line-height:1.7;color:#bdbab5;max-width:570px}

/* =========================================================
   BOOKING (inline section)
   ========================================================= */
.booking{padding:150px 8vw 180px;display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw}
.booking-info h2{font-size:clamp(75px,9vw,140px)}
.contact-lines{margin-top:75px}
.contact-lines p{margin:0 0 27px}
.contact-lines small{display:block;color:#999;margin-bottom:7px}
.contact-lines span{font-size:18px}
.policy{
  display:block;margin-top:80px;font-size:12px;letter-spacing:2px;
  text-decoration:underline;text-underline-offset:5px;
}
.booking-form{display:flex;flex-direction:column;gap:25px;align-self:end}
.booking-form label{font-size:14px;color:#c6c3bf}
.booking-form input,
.booking-form select,
.booking-form textarea{
  display:block;width:100%;margin-top:10px;
  background:var(--panel);border:1px solid #292929;border-radius:7px;
  color:#eee;padding:19px 22px;outline:none;
}
.booking-form textarea{min-height:170px;resize:vertical}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{border-color:#777}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.check{display:flex !important;align-items:center;gap:12px;font-size:14px !important}
.check input{width:31px !important;height:31px;margin:0 !important}
.submit{width:100%;font-size:15px}

/* =========================================================
   FORM MESSAGE — sending / success / error
   ========================================================= */
.form-message{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  margin-top:6px;
  font-size:15px;
  letter-spacing:.2px;
  color:#aaa;
  transition:color .25s ease, opacity .25s ease;
}
.form-message:empty{ min-height:20px; }

.form-message.success{ color:#8ff0a8; }
.form-message.error  { color:#ff8a8a; }

/* green circle + checkmark */
.check-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#1e8a3f;
  color:#fff;
  flex:0 0 auto;
  animation:checkPop .4s cubic-bezier(.2,.7,.2,1.3);
}
.check-circle svg{ display:block; }

@keyframes checkPop{
  0%   { transform:scale(.3); opacity:0; }
  60%  { transform:scale(1.15); opacity:1; }
  100% { transform:scale(1); }
}

/* =========================================================
   MODAL (booking popup)
   ========================================================= */
.modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  padding:5vw;
}
.modal.open{opacity:1;pointer-events:auto}

.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.modal-panel{
  position:relative;z-index:2;
  width:100%;max-width:640px;max-height:90vh;
  overflow-y:auto;
  background:#0e0e0e;
  border:1px solid #232323;
  border-radius:10px;
  padding:44px 40px 40px;
  transform:translateY(20px) scale(.98);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.modal.open .modal-panel{transform:none}

.modal-head{margin-bottom:32px}
.modal-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(42px,5vw,72px);
  line-height:.95;letter-spacing:-1.5px;
  margin:0 0 12px;
}
.modal-sub{font-size:14px;color:#9c9995;margin:0;line-height:1.5}

.modal-form-slot .booking-form{align-self:auto}
.modal-form-slot .booking-form textarea{min-height:120px}

.modal-close{
  position:absolute;top:14px;right:18px;
  background:transparent;border:0;color:#eee;
  font-size:34px;line-height:1;cursor:pointer;padding:6px 12px;
  transition:opacity .2s ease;
}
.modal-close:hover{opacity:.7}

/* =========================================================
   SIDE DRAWER
   ========================================================= */
.drawer{
  position:fixed;inset:0;z-index:110;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.drawer.open{opacity:1;pointer-events:auto}

.drawer-backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,5,.55);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}

.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,88vw);
  background:rgba(15,15,15,.85);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-left:1px solid rgba(255,255,255,.08);
  padding:100px 40px 40px;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}
.drawer.open .drawer-panel{transform:none}

.drawer-close{
  position:absolute;top:18px;right:22px;
  background:transparent;border:0;color:#eee;
  font-size:34px;line-height:1;cursor:pointer;padding:6px 12px;
  transition:opacity .2s ease;
}
.drawer-close:hover{opacity:.7}

.drawer-nav{display:flex;flex-direction:column}

.drawer-link{
  display:flex;align-items:center;justify-content:space-between;
  background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#f2f0ed;text-align:left;cursor:pointer;
  padding:22px 0;
  font-family:"Cormorant Garamond",serif;
  font-size:34px;font-weight:400;letter-spacing:-.5px;
  transition:padding-left .25s ease,color .25s ease;
}
.drawer-link:hover{padding-left:10px}
.drawer-link:first-child{border-top:1px solid rgba(255,255,255,.09)}

.drawer-link .chev{
  font-family:"DM Sans",sans-serif;
  font-size:22px;color:#888;
  transition:transform .25s ease,color .25s ease;
}
.drawer-link:hover .chev{transform:translateX(4px);color:#ddd}

.drawer-foot{margin-top:auto;padding-top:40px;color:#888}
.drawer-foot .eyebrow{color:#a8a5a0;margin:0 0 6px}
.drawer-foot p{margin:0;font-size:13px}

/* =========================================================
   FAQ PANEL
   ========================================================= */
.faq-panel{
  position:fixed;inset:0;z-index:115;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.faq-panel.open{opacity:1;pointer-events:auto}

.faq-backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,5,.75);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}

.faq-inner{
  position:absolute;top:0;right:0;bottom:0;
  width:min(720px,100vw);
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-left:1px solid rgba(255,255,255,.08);
  padding:100px 48px 60px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.faq-panel.open .faq-inner{transform:none}

.faq-close{
  position:absolute;top:18px;right:22px;
  background:transparent;border:0;color:#eee;
  font-size:34px;line-height:1;cursor:pointer;padding:6px 12px;
  transition:opacity .2s ease;
}
.faq-close:hover{opacity:.7}

.faq-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(44px,5.5vw,80px);
  line-height:.95;letter-spacing:-1.5px;
  margin:0 0 50px;
}

.faq-section-head{
  margin-top:80px;padding-top:40px;
  border-top:1px solid rgba(255,255,255,.09);
}
.faq-section-head .eyebrow{margin:0 0 8px}

.faq-list{
  display:flex;flex-direction:column;
  border-top:1px solid rgba(255,255,255,.09);
}
.faq-item{border-bottom:1px solid rgba(255,255,255,.09)}

.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:transparent;border:0;color:#f2f0ed;
  cursor:pointer;text-align:left;
  padding:22px 0;
  font-size:19px;font-weight:400;line-height:1.4;
  transition:opacity .2s ease;
}
.faq-q:hover{opacity:.8}

.faq-chev{
  font-size:24px;color:#888;line-height:1;
  transition:color .2s ease;
}

.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .45s ease;
}
.faq-a-inner{
  padding:0 0 26px;
  font-size:15px;line-height:1.75;color:#b8b5b0;
  white-space:pre-line;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.94);
  padding:5vw;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.lightbox.open{opacity:1;pointer-events:auto}

.lb-inner{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:50px;
  width:100%;max-width:1200px;max-height:88vh;
  transform:translateY(20px) scale(.98);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.lightbox.open .lb-inner{transform:none}

.lb-media{
  display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;overflow:hidden;
}
.lb-img{
  width:100%;height:100%;max-height:88vh;
  object-fit:contain;
  display:block;
}

.lb-text{align-self:center;color:#e9e6e1;padding-right:10px}
.lb-index{
  display:block;
  font-family:Oswald,sans-serif;font-size:12px;letter-spacing:3px;color:#888;
  margin-bottom:16px;
}
.lb-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(34px,4.2vw,66px);
  line-height:1;letter-spacing:-1px;
  margin:0 0 22px;
}
.lb-desc{
  font-size:17px;line-height:1.65;color:#c9c6c1;
  margin:0 0 22px;
}
.lb-meta{
  font-size:11px;letter-spacing:2px;color:#888;text-transform:uppercase;
}

.lb-close{
  position:absolute;top:22px;right:24px;
  background:transparent;border:0;color:#eee;
  font-size:40px;line-height:1;cursor:pointer;padding:8px 14px;
  transition:opacity .2s ease;
}
.lb-close:hover{opacity:.7}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  border-top:1px solid var(--line);padding:35px 5vw;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  font-size:9px;letter-spacing:2px;color:#777;
}
.footer-brand{color:#ddd;font-family:Oswald,sans-serif;font-size:18px}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:760px){
  /* header */
  .site-header{height:72px;padding:0 20px;gap:10px}
  .brand{font-size:25px}
  .desktop-nav{display:none}
  .book-top{
    margin-left:auto;padding:14px 24px;
    background:#f2f0ed;color:#080808;border-color:#f2f0ed;
  }
  .menu-btn{display:flex}

  /* hero */
  .hero{min-height:720px}
  .hero-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:4px}
  .hero-content{top:49%;left:20px;right:20px}
  .hero h1{font-size:54px;letter-spacing:-1px}
  .hero-copy{font-size:15px;margin:25px auto}
  .cta{width:100%;padding:19px}
  .hero-status{left:20px;bottom:20px}

  /* intro / about / booking */
  .intro,.about,.booking{display:block;padding:100px 20px}
  .intro h2,.about h2{font-size:58px}
  .intro p:last-child,.about>p{margin-top:45px;font-size:16px}

  /* gallery */
  .gallery{padding:30px 20px 90px}
  .gallery-stack{gap:64px;margin-top:50px}
  .work-image{aspect-ratio:3/4}
  .work-text{grid-template-columns:1fr;gap:10px}
  .work-index{grid-row:auto}
  .work-title{font-size:34px}
  .work-desc{font-size:15px}

  /* statement */
  .statement{padding:100px 20px}
  .statement h2{font-size:62px}
  .steps{display:block;margin-top:60px}
  .steps div{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}

  /* booking */
  .booking-info h2{font-size:85px}
  .contact-lines{margin-top:55px}
  .policy{margin:60px 0}
  .two{grid-template-columns:1fr}
  .booking-form{margin-top:70px}

  /* modal */
  .modal{padding:0;align-items:stretch}
  .modal-panel{
    max-height:100vh;height:100vh;
    border-radius:0;border-left:0;border-right:0;
    padding:80px 22px 40px;
    transform:translateY(100%);
  }
  .modal.open .modal-panel{transform:none}
  .modal-title{font-size:48px}
  .modal-form-slot .booking-form{gap:20px}

  /* drawer */
  .drawer-panel{width:100vw;padding:90px 26px 40px;border-left:0}
  .drawer-link{font-size:30px;padding:20px 0}

  /* FAQ panel */
  .faq-inner{width:100vw;padding:80px 22px 60px;border-left:0}
  .faq-title{font-size:52px;margin-bottom:36px}
  .faq-q{font-size:17px;padding:20px 0}
  .faq-a-inner{font-size:14px}

  /* lightbox */
  .lightbox{padding:20px}
  .lb-inner{
    grid-template-columns:1fr;
    gap:20px;
    max-height:100vh;
    overflow-y:auto;
  }
  .lb-img{max-height:52vh}
  .lb-title{font-size:36px;margin-bottom:14px}
  .lb-desc{font-size:15px;margin-bottom:14px}
  .lb-close{top:10px;right:14px;font-size:34px}

  /* footer */
  footer{grid-template-columns:1fr;gap:15px;padding:30px 20px}
}