/* ---------- Placeholder art (abstract ink linework, original) ---------- */
  .art{
    position:relative;
    overflow:hidden;
  }
  .art svg{position:absolute;inset:0;width:100%;height:100%;}
  .art::after{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06), transparent 60%);
  }


  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:400;
    line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}

  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}

  .btn{
    display:inline-flex;align-items:center;gap:10px;padding:14px 30px;
    border:1px solid currentColor;border-radius:999px;font-family:var(--mono);
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    transition:background .35s ease, color .35s ease;
  }
  .btn--light{color:var(--paper);border-color:var(--paper);}
  .btn--light:hover{background:var(--paper);color:var(--ink);}

  .art{position:relative;overflow:hidden;background:linear-gradient(160deg,#2b2722,#100e0c 70%);}
  .art svg{position:absolute;inset:0;width:100%;height:100%;}
  .art::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06), transparent 60%);}

  section{position:relative;}
  .section-pad{padding:clamp(60px,8vw,120px) var(--pad);}

  /* ---------- Hero ---------- */
  .qhero{
    position:relative;min-height:105vh;display:flex;align-items:flex-end;justify-content:center;
    overflow:hidden;background:var(--ink);
  }
  .qhero__bg{position:absolute;inset:0;z-index:0;}
  .qhero__video{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  .qhero__bg .art{position:absolute;inset:0;}
  .qhero__bg .fade{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(11,10,8,0.1) 0%, rgba(11,10,8,0.4) 45%, rgba(11,10,8,0.94) 88%);
  }
  .qhero__label{
    position:absolute;top:110px;left:var(--pad);z-index:2;
    font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-light);
  }
  .qhero__content{
    position:relative;z-index:2;text-align:center;padding:0 24px 17vh;max-width:1200px;width:100%;
    margin:0 auto;
    opacity:0;transform:translateY(30px);transition:opacity 1.1s ease, transform 1.1s ease;
  }
  .qhero__content.in{opacity:1;transform:none;}
  .qhero__content h2{
    font-family:var(--display);font-weight:400;font-size:clamp(28px,4.4vw,52px);line-height:1.15;color:var(--paper);
    margin:0 auto;text-align:center;
  }
  .qhero__content h2 span{display:block;}
  @media (min-width:1025px){
    .qhero__content h2 span{white-space:nowrap;}
  }
  .qhero__content .sub{
    font-family:var(--display);font-style:italic;color:var(--ash-light);
    font-size:clamp(14px,1.5vw,18px);margin-top:16px;text-align:center;
  }
  .qhero__scroll{
    position:absolute;bottom:calc(24px + 5vh);left:50%;transform:translateX(-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ash-light);
  }
  .qhero__scroll span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;}
  .qhero__scroll .line{width:2px;height:34px;background:#444;position:relative;overflow:hidden;}
  .qhero__scroll .line::after{
    content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--blood);
    animation:cueDrop 2.2s ease-in-out infinite;
  }
  @keyframes cueDrop{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

  /* ---------- Preparation ---------- */
  .prep{background:var(--charcoal);}
  .prep__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;}
  .prep__copy h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,34px);margin:0 0 12px;}
  .prep__copy h3:not(:first-child){margin-top:34px;}
  .prep__copy p{color:var(--ash-light);font-size:14.5px;line-height:1.8;max-width:100%;}
  .prep__copy .note{
    margin-top:30px;font-family:var(--display);font-style:italic;color:var(--ash);
    font-size:14px;line-height:1.8;max-width:100%;
  }
  .prep__art{aspect-ratio:860/880;border:1px solid var(--line);}
  .prep__art img{width:100%;height:100%;object-fit:cover;}

  /* ---------- Section header block (heading + intro col) ---------- */
  .sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin-bottom:8px;}
  .sec-head .sub{font-family:var(--display);font-style:italic;font-size:clamp(15px,1.5vw,19px);margin-bottom:16px;}
  .sec-head p{font-size:14.5px;line-height:1.8;max-width:36ch;}

  /* ---------- Tattoo Styles (light) ---------- */
  .styles{background:var(--paper);color:var(--ink);}
  .styles .sec-head p{color:var(--ink);}
  .styles-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start;}
  .style-col{display:flex;flex-direction:column;gap:26px;}
  .style-item h4{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:8px;color:var(--ink);}
  .style-item p{font-size:13.5px;line-height:1.7;color: var(--ink);}

  /* ---------- Guide sections (aftercare / precare) ---------- */
  .guide{background:var(--paper-dim);color:var(--ink);}
  .guide.alt{background:var(--paper);}
  .guide .sec-head p{color:var(--ink);}
  .guide-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start;}
  .guide-col{display:flex;flex-direction:column;gap:24px;}
  .guide-item b{
    display:block;font-family:var(--body);font-weight:600;font-size:16px;margin-bottom:5px;color:var(--ink);
  }
  .guide-item p{font-size:13.5px;line-height:1.7;color:#5a5546;}

  /* ---------- Policy sections ---------- */
  .policy{
    background:#000 url('../images/tattoo-artist.webp') center / cover fixed no-repeat;
    color:var(--paper);
    isolation:isolate;
  }
  .policy::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:rgba(0,0,0,.7);
  }
  .policy-grid{position:relative;}
  .policy .sec-head h2,
  .policy .sec-head p,
  .policy .qa-item h4,
  .policy .qa-item p{color:var(--paper);}
  .policy-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start;}
  .qa-col{display:flex;flex-direction:column;gap:24px;}
  .qa-item h4{font-family:var(--body);font-weight:600;font-size:14.5px;margin-bottom:6px;color:var(--ink);}
  .qa-item p{font-size:13.5px;line-height:1.7;color:#5a5546;}

  /* ---------- Piercing Policy (red) ---------- */
  .ppolicy{background:url('../images/rebg.webp') center / cover no-repeat var(--blood);color:var(--paper);}
  .ppolicy .eyebrow{color:rgba(243,238,227,.7);}
  .ppolicy .sec-head h2{color:var(--paper);}
  .ppolicy .qa-item h4{color:var(--paper);}
  .ppolicy .qa-item p{color:rgba(243,238,227,.78);}
  .ppolicy-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start;}
  .ppolicy__logo{
    display:block;width:150px;height:auto;
    border:0;border-radius:0;background:transparent;
    margin-bottom:28px;
  }
  .ppolicy__close{
    font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.2;color:var(--paper);
  }

  /* ---------- Footer ---------- */
  footer{background:var(--ink);border-top:1px solid var(--line);}
  .footer-top{
    display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
    padding:60px var(--pad) 50px;border-bottom:1px solid var(--line);
  }
  .footer-top .eyebrow{margin-bottom:14px;display:block;}
  .brands{display:flex;gap:26px;flex-wrap:wrap;align-items:center;}
  .brand-chip{
    width:100px;height:56px;border:none;outline:none;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:9px;color:var(--ash);letter-spacing:.08em;text-align:center;padding:6px;
  }
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px;padding:56px var(--pad);}
  .footer-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
  .footer-grid .mark{font-family:var(--display);font-size:20px;margin-bottom:14px;}
  .footer-grid p{font-size:13px;color:var(--ash-light);line-height:1.9;}
  .footer-grid ul li{font-size:13px;color:var(--ash-light);margin-bottom:10px;}
  .footer-grid ul li a:hover{color:var(--paper);}
  .footer-bottom{text-align:center;padding:22px var(--pad) 34px;font-family:var(--mono);font-size:11px;color:var(--ash);}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1;transform:none;}

  /* ---------- Responsive ---------- */
  @media (max-width:1100px){
    .styles-grid,.guide-grid,.policy-grid,.ppolicy-grid{grid-template-columns:1fr 1fr;}
    .styles-grid .sec-head,.guide-grid .sec-head,.policy-grid .sec-head{grid-column:1 / -1;}
    .ppolicy-grid .close-col{grid-column:1 / -1;}
  }
  @media (max-width:1024px){
    .prep__grid{grid-template-columns:1fr;}
    .prep__art{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .qhero{min-height:100vh;}
    .styles-grid,.guide-grid,.policy-grid,.ppolicy-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-top{flex-direction:column;align-items:flex-start;}
  }