/* ================================
   TATTOO PAGE BASE
================================ */
/* .tattoo-page section {
    min-height: 100vh;
    scroll-margin-top: 35px;
} */

.tattoo-hero,
.flash,
.booking-section,
.aftercare-section,
.studio-section {
    min-height: 100vh;
    scroll-margin-top: 35;
}

.project-section {
    margin-top: 0vh;
}

.tattoo-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--white);
    text-align: center;
    padding: 120px 80px;
}

.tattoo-hero h1 {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 1200;
    letter-spacing: -0.02em;
    color: var(--carbon-black);
    left: 2em;
    top: 2em;
}

.tattoo-hero p {
    margin-top: 1rem;
    font-size: 1.1rem;
    opacity: 0.5;
}

.hero-info {
    text-align: end;
}

/* =========================
    BLEED TITLES
========================= */

/* Soft bleed — like ink bleeding into paper */
.tattoo-hero h1,
.flash-section h2,
.booking-section h2,
.aftercare-section h2,
.studio-section h2 {
    text-shadow:
        0 0 5px rgba(0, 0, 0, 0.7),
        0 0 12px rgba(0, 0, 0, 0.08);
}

/* Stronger glow version — more luminous */


/* ================================
    NAVBAR
================================ */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px;
    height: 35px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--white );
    z-index: 1000;
    font-family: 'Hanken Grotesk';
}

nav .left a {
    color: var(--light-grey);
    padding-left: 20px;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Hanken Grotesk';
}

nav .left a:hover {
    color: var(--carbon-black);
}

nav .right a {
    display: inline-flex;    
    align-items: center;     
    margin: 0 20px;
    padding: 0 40px;
    color: var(--light-grey);
    transform: translateY(-4px);
    font-weight: 200;
    font-size: 14px;

}

nav .right a:hover {
    color: var(--carbon-black);
}

nav .right a span {
    display: inline-flex;
    align-items: center;
    transform: translateY(4px);
    font-family: 'Hanken Grotesk', sans-serif; /* add this */
}

nav .right a svg {
  height: 1.1em;
  width: 1.1em;
}

@media(max-width: 600px) {
    /*NAVBAR*/
    nav {
        padding: 20px;
    }

    nav .right a {
        font-size: 24px;

    }

    nav .right a:last-child {
        color: var(--carbon-black);
        background: transparent;
        padding: 0;
    }

    nav .right a span {
        display: none;
    }

    /* Adjust section text for mobile */
    .quote-overlay h1 {
        font-size: 2rem;
    }

    .quote-overlay p {
        font-size: 1.2rem;
    }

    .section-overlay h2 {
        font-size: 2rem;
    }

    .section-overlay p {
        font-size: 1rem;
    }

    /* Disable parallax on mobile */
    section {
        background-attachment: scroll;
    }
}

/* ================================
   HERO
================================ */
.hero-title-wrap {
    position: absolute;
    bottom: 27vh;        /* distance from bottom — increase to move up */
    left: 16px;         /* distance from left edge */
    pointer-events: none;
    z-index: 0;
}

.tattoo-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    /* background: #171717; */
}

.tattoo-hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: -0.12em;
    font-size: clamp(5rem, 14vw, 9rem);
    text-decoration: none;
}

.tattoo-hero p {
    opacity: 20%;
    font-size: clamp(1rem, 2vw, 1rem);
}

/* ================================
   PROJECT SECTION
================================ */
.project-section {
    min-height: 50vh
}

/* ================================
   SECTION 1: FLASH GALLERY
================================ */
#flash {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 50px 20px 100px 20px;
    box-sizing: border-box;
    counter-reset: flash-counter;
}

.flash-section h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-family: 'Inter', sans-serif;
    margin: 0.5rem 2rem 1rem;
    letter-spacing: -0.12em;
    margin-left: 20px;
}    


.flash-row {
    display: grid;
    gap: 20px;
    height: 60vh;
}

.flash-row.two-col {
    grid-template-columns: 2fr 1fr;
}

.flash-row.row-2 {
    grid-template-columns: 3fr 1fr;
}



/* ---- Cols fill the row height ---- */
.col {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

/* ---- Carousel ---- */
.carousel {
    position: relative;
    height: 100%;
    overflow: hidden;   /* clips the clones */
}

.carousel .track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
    /* NO gap here — gap pushes clones into view */
}

.carousel .slide {
    flex: 0 0 100%;
    width: 100%;        /* explicit width keeps clones sized correctly */
    height: 100%;
    background: #f3f3f3;
}

.carousel .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Carousel cursor icons ---- */
.carousel.single {
    cursor: none;    /* hide default cursor over the carousel */
}

.carousel.single.cursor-prev {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 32 32'%3E%3Cpolyline points='20,8 12,16 20,24' fill='none' stroke='%23d3d3d3' stroke-width='3' stroke-linecap='straight' stroke-linejoin='corner'/%3E%3C/svg%3E") 16 16, pointer;
}

.carousel.single.cursor-next {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 32 32'%3E%3Cpolyline points='12,8 20,16 12,24' fill='none' stroke='%23d3d3d3' stroke-width='3' stroke-linecap='straight' stroke-linejoin='corner'/%3E%3C/svg%3E") 16 16, pointer;
}

/* ---- Landscape row 2 ---- */
.grid-3.hover-scribble {
    display: block;   /* or flex — no need for grid with a single child */
    height: 100%;
    overflow: hidden;
}

.grid-3.hover-scribble > div {
    height: 100%;
    overflow: hidden;
}

.grid-3.hover-scribble > div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 80%;
}

/* ---- Video rotator ---- */
.rotator-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========
    GRIDS
========== */
.grid-3,
.grid-4,
.grid-6 {
    display: grid;
    gap: 10px;
    height: 100%;
    /*background: #ff1919;*/
}

.grid-7 {
    display: grid;
    gap: 10px;
    padding: 0px 0px;
    height: 110%;
    width: 100%;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }
.grid-7 { grid-template-columns: repeat(3, 1fr); }

.grid-3 > div,
.grid-4 > div,
.grid-6 > div,
.grid-7 > div {
    height: 100%;
    /*background: #f1f4f5;*/
}

/* ==================
IMAGE COUNTER 
================== */

/* Every image-holding element increments */
.carousel .slide,
.grid-3 > div,
.grid-4 > div,
.grid-6 > div {
    counter-increment: flash-counter;
    position: relative;
}

/* The number label */
.carousel .slide::after,
.grid-3 > div::after,
.grid-4 > div::after,
.grid-6 > div::after {
    content: counter(flash-counter, decimal-leading-zero);
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--white);
    opacity: 0.5;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: difference; /* stays visible on both light and dark images */
}

/* Only count real slides, not clones */
.carousel .slide:not(.clone) {
    counter-increment: flash-counter;
}

.carousel .slide:not(.clone)::after {
    content: counter(flash-counter, decimal-leading-zero);
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--white);
    opacity: 0.5;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: difference;
}

/* =================
ROW 3 Collab Section
================= */

.flash-row.equal-col {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* equal halves */
  gap: 20px;
  height: 50vh;
}

.flash-row.equal-col .col {
  height: 100%;
  min-height: 0;
}

.flash-row.equal-col .grid-6,
.flash-row.equal-col .grid-4 {
  height: 100%;
}

.flash-row.equal-col .grid-6 > div,
.flash-row.equal-col .grid-4 > div {
  background: #efefef;
}

/* Video Grid 4*/
.grid-4 > div {
    overflow: hidden;  /* clips the video to the box */
    position: relative;
}

.grid-4-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* fills the box, cropping the excess */
    position: absolute;
    top: 0;
    left: 0;
}

/* Images Grid 4 */
.grid-4 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}

.grid-4-topleft img {
    object-position: left bottom;
    
}

/* Give the 6-cell grid explicit equal rows */
.grid-6 {
    grid-template-rows: repeat(2, 1fr);
}

/* Make each cell a positioning context and clip overflow */
.grid-6 > div {
    overflow: hidden;
    position: relative;
}

/* Fill each cell with the image */
.grid-6 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.grid-6 > div:hover,
.grid-4 > div:hover {
    transform: scale(120%);
    z-index: 20;
    box-shadow:
        0 0 5px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(0, 0, 0, 0.08);
}

.tomasi-full-sheet {
    width: 100%;
    height: 100%;
}

/* =====================
   PROJECT SECTION
===================== */

.flash-row.project {
    grid-template-columns: 2fr 1.5fr 2fr 2fr;

}

.project-img {
    display: block;
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-video {
    overflow: hidden;
    min-height: 0;
}

.project-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-text-space {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 0;
    min-height: 0;
}

.project-text-space p {
    font-size: 1rem;
    font-weight: 100;
    line-height: 1;
    margin: 0;
    padding: 0px 0px 0px 0px;
}

/* .project-text-space p.pt-a { margin-top: 0;     font-size: 0.85rem; color: var(--light-grey);} */
.project-text-space p.pt-b { margin-top: -0.3rem; font-size: 1.2rem; font-weight: 400; color: var(--light-grey); letter-spacing: -0.12em;}
.project-text-space p.pt-c { margin-top: 4rem;  font-size: 2rem; font-weight: 700; letter-spacing: -0.12em; font-family: 'Inter', sans-serif; color: var(--light-grey); }
.project-text-space p.pt-d { margin-top: 4rem; color: var(--light-grey);}
.project-text-space p.pt-e { margin-top: 1.5rem; color: var(--light-grey);}
.project-text-space p.pt-f { margin-top: 1.5rem; color: var(--light-grey);}

.project-text-space p.pt-b:hover { color: var(--carbon-black); font-weight: 700;}
.project-text-space p.pt-c:hover { color: var(--carbon-black); text-shadow: 0 0 5px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.08);}
.project-text-space p.pt-d:hover { color: var(--carbon-black); font-weight: 400;}
.project-text-space p.pt-e:hover { color: var(--carbon-black); font-weight: 400;}
.project-text-space p.pt-f:hover  { color: var(--carbon-black); font-weight: 400;}


/* ======
FLASH GAP
====== */

.flash-gap {
    height: 10vh;
    display: grid;
    grid-template-columns: 2.05fr 1fr 1fr;
    gap: 4rem;
    padding: 5px 0px;
}

/* Each gap gets its own column ratio */
.flash-gap--1 {
    grid-template-columns: 1.1fr 3fr 1fr 1fr;
}

.flash-gap--2 {
    grid-template-columns: 3fr 3fr 1fr;
    margin-right: 13vw;
}

.flash-gap--3 {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0rem;
    height: 5vh;
    opacity: 0;
}

.marquee {
    height: 2.1vh;
    background-color: var(--light-grey);
    color: var(--white);
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 10px;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

.flash-gap--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    height: 9vh;
}

.gap-text,
.gap-text-2,
.gap-text-3 {
    display: flex;
}

.gap-text,
.gap-text-2,
.gap-text-3 p {
    font-size: 0.85rem;
    line-height: 1.2;
    margin: 0;
}

/* Control each individually */
.gap-text--a {
    align-self: flex-start;   /* top */
    margin-top: 10px;
}

.gap-text--b {
    /*align-self: center;*/       /* middle */
    align-items: flex-start;
    margin-top: 10px;
}

.gap-text--c {
    /*align-self: flex-end;*/    /* bottom */
    align-items: flex-start;
    margin-top: 10px;
}

.gap-text--d {
    align-self: flex-start;   
    margin-top: 10px;
    opacity: 0;
}

.gap-text--e {
    align-self: flex-start;   
    margin-top: 10px;
    opacity: 0;
}

.gap-text--f {
    align-self: flex-start;   
    margin-top: 10px;
}

.gap-text--g {
    align-self: flex-end;  
    margin-bottom: 10px; 
    font-weight: 800; 
    font-size: 2rem
}

.gap-text--h {
    align-self: flex-end;
    opacity: 0; 
}

.gap-text--i {
    align-self: flex-end; 
    opacity: 0;
}

.gap-text--j {
    align-self: flex-start;   
    margin-top: 10px;
}

.gap-text--k {
    align-self: flex-start;   
    margin-top: 10px;
}

.gap-text--l {
    align-self: flex-start;   
    margin-top: 10px;
}
.gap-text--l p {
    color: var(--carbon-black)
}

/* ================================
   BOOKING CARDS
================================ */
.booking-section {
    background: var(--white);
    color: var(--carbon-black);
    padding: 40px 0px 0px 0px;
    min-height: 100vh;
}

.section-label {
    margin-left: 5rem;
}

.booking-section h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-family: 'Inter', sans-serif;
    margin: 0.5rem 2rem 1rem;
    letter-spacing: -0.12em;
    margin-left: 20px;
}

.booking-section > p {
    opacity: 0.5;
    margin-bottom: 4rem;
    font-size: 1.05rem;
    margin-left: 20px;
    margin: 20px 20px 20px;
}

.booking-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;  
    margin-left: 20px; 
    margin: 20px 25px 20px;                       /* gap becomes border between cards */
}

.booking-card {
    background: var(--white);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    transition: background 0.2s;
}

.booking-card:hover {
    background: #efefef;
}

.booking-duration {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.booking-card h3 {
    font-size: 1.4rem;
    margin: 0 0rem 0.6rem;
    letter-spacing: -0.01em;
}

.booking-card p {
    font-size: 0.93rem;
    line-height: 1.7;
    opacity: 0.55;
    margin: 0rem 0rem 0rem;
}

.booking-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--carbon-black);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
    transition: opacity 0.2s;
}

.booking-btn:hover { opacity: 0.7; }

.booking-btn i svg {
    width: 0.75em;
    height: 0.75em;
    stroke: var(--white);
}

.booking-image-row {
    display: grid;
    grid-template-columns: 1fr; /* or whatever split you want */
    gap: 20px;
    margin-top: 20px;
    height: 10vh; /* adjust to taste */
}

.booking-image-row img {
    width: 100%;
    height: 65%;
    object-fit: cover;
    display: block;
}

@media (max-width: 800px) {
    .booking-cards {
        grid-template-columns: 1fr;
    }
    .booking-section {
        padding: 80px 30px;
    }
}

/* ================================
   AFTERCARE
================================ */
.aftercare-section {
    color: var(--carbon-black);
    padding: 20px 0px;
    margin: 20px;
}

.aftercare-section > img {
    padding: 0;
    margin: 0;
}

.aftercare-section h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-family: 'Inter', sans-serif;
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.12em;
}

.section-label {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.aftercare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* adjust ratio to taste */
    gap: 40px;
    align-items: start;
    margin-right: 20px;
}

.aftercare-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* keeps your existing 2-col step layout */
    gap: 20px;
}

.aftercare-image {
    overflow: hidden;
    padding: 40px 0px 0px 0px;
    max-height: 400px;
}

.aftercare-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.step-num {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    opacity: 0.35;
    margin-bottom: 0.75rem;
}

.aftercare-step h3 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

.aftercare-step p {
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.7;
}

.aftercare-note {
    border-top: 1px solid var(--carbon-black);
    padding-top: 2rem;
    font-size: 0.9rem;
    opacity: 0.5;
}

.aftercare-note a {
    color: var(--carbon-black);
    text-decoration: underline;
}

@media (max-width: 700px) {
    .aftercare-grid { grid-template-columns: 1fr; }
}



/* ================================
   STUDIO
================================ */
.studio-section {
    background: var(--white);
    color: var(--carbon-black);
    overflow: hidden;
    min-height: 100vh;
}

.studio-inner {
    display: flex;
    align-items: center;
    gap: 4rem;
    min-height: inherit;
}

.studio-text {
    flex: 1;
    padding-left: 80px;
    padding-top: 120px;
}

.studio-section h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.02em;
}

.studio-intro {
    font-size: 1.1rem;
    opacity: 0.6;
    max-width: 500px;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

/* section-label stays unstyled here, inherits from its own rule */

.studio-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--carbon-black);
    border-bottom: 1px solid var(--carbon-black);
    padding-bottom: 4px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.studio-link:hover { opacity: 0.5; }

.studio-image {
    flex: 2;                  /* takes equal half of the section */
    align-self: stretch;      /* fills full section height */
    object-fit: cover;
    object-position: left center;  /* crops from the right, anchors left edge */
    display: block;
}

.studio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* crops nicely without distorting */
    display: block;
}

@media (max-width: 768px) {
    .studio-inner {
        flex-direction: column;
    }
    .studio-text {
        padding-left: 30px;
        padding-right: 30px;
    }
    .studio-image {
        width: 100%;
        height: 60vw;
    }
}

/* ============
    FOOTER INFO
============ */

.studio-wrapper {
    position: relative;
}

.studio-section {
    position: sticky;
    top: 0;
    z-index: 1;      /* sits below contact */
}

.contact-section {
    background: var(--carbon-black);
    color: var(--white);
    height: 20vh;
    display: flex;
    align-items: center;
    padding: 0 80px;
    position: relative;
    z-index: 2;      /* slides over the top of studio */
    
}

.contact-inner {
    display: flex;        /* this was missing */
    align-items: flex-start;
    gap: 4rem;
    width: 100%;
}

.contact-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-col .section-label {
    padding-left: 0;
    opacity: 0.4;
}

.contact-col p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.85;
}

.contact-col a {
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    transition: opacity 0.2s;
}

.contact-col a:hover { opacity: 0.5; }

/* Push copyright to the far right */
.contact-col--right {
    margin-left: auto;
}

.contact-credit {
    font-size: 0.8rem;
    opacity: 0.35;
}

@media (max-width: 768px) {
    .contact-section {
        padding: 0 30px;
        height: auto;
        min-height: 40vh;
        align-items: center;
    }
    .contact-inner {
        flex-wrap: wrap;
        gap: 2rem;
        padding: 40px 0;
    }
    .contact-col--right {
        margin-left: 0;
        width: 100%;
    }
}