/* Vanity Ink v2: Home's new and changed sections (after home.css and v2.css). */

/* 10-07 order: hero, At a glance, the work (on Your Idea's river, home.css's own mask again), the artists as two equal
   cards, Why we called it Vanity, cover-ups, process, studio, reviews (empty slot), FAQ, find us, CTA. */

/* the work's river (10-07): its wrapper now holds only the work section, so home.css's fixed-pixel fade (full to 1010px,
   gone by 1800px) ended in a hard cut. The fade is measured from the wrapper's bottom instead, and the artists' river
   (artists-flow, c-home-meet) rises under the join as before. */
.flow-idea{--mmask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 120px,rgba(0,0,0,.8) 260px,#000 380px,#000 calc(100% - 420px),rgba(0,0,0,.45) calc(100% - 180px),transparent 100%)}

/* Hero: the quieter second action, beside the button */
.hero-more{font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--purple);padding-bottom:4px}
.hero-more:hover{color:var(--purple-light)}

/* ===== At a glance: four proof points in one row, hairlines between and above/below, chrome engraved icons.
   Elementor: 4-column container, Icon Box widgets (icon left or top), borders for the hairlines. ===== */
.glance{position:relative;z-index:2;padding:0;margin-top:-1px}
.glance-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.glance-row li{display:flex;gap:16px;align-items:flex-start;padding:30px 28px}
.glance-row li+li{border-left:1px solid var(--line-soft)}
.glance-row svg{width:30px;height:30px;flex:none}
.glance-row p{margin:0;font-size:var(--body-sm);line-height:1.55;color:#C4C4CB;text-wrap:pretty}   /* one style, title and line together (10-07) */
@media (max-width:1023px){.glance-row{grid-template-columns:repeat(2,minmax(0,1fr))}.glance-row li:nth-child(3){border-left:0}.glance-row li:nth-child(n+3){border-top:1px solid var(--line-soft)}}
@media (max-width:600px){.glance-row{grid-template-columns:1fr}.glance-row li{padding:22px 4px;border-left:0!important}.glance-row li+li{border-top:1px solid var(--line-soft)}}

/* the work: the Instagram link centred under the reel */
.work-links{margin-top:36px}

/* ===== Why we called it Vanity: What You Can Expect's pattern (sticky heading left, hairline rows right), the
   heading carrying its two paragraphs. Elementor: as Expect (spec 4.5), the left column a Heading + Text Editor. ===== */
.vanity{padding-top:160px;padding-bottom:140px}
.vanity .expect-head h2{margin-bottom:28px}
.vanity .expect-head p{font-size:var(--body);color:#C4C4CB;max-width:460px;text-wrap:pretty}
.vanity .expect-list{margin-top:8px}
.vanity .expect-head .link-row{margin-top:24px}
@media (min-width:1024px){.vanity .expect-head{top:130px}}

/* ===== The hands behind the work: two equal cards (portrait over role, name, lines, link), the section link under them.
   Elementor: 2-column container, each column Image + Heading + Text Editor + link. ===== */

/* Cover-ups: the button, then the FAQ link under it (Home's stacked actions) */
.cov-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:12px}
.cov-actions .btn{margin-top:0}
.cov-link{font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--purple);padding-bottom:4px}
.cov-link:hover{color:var(--purple-light)}

/* How it goes: the heading and its one-line intro centred on a pool, the steps on the vein (numerals and words only,
   no step titles in the copy), then the rate line and link centred under the last step */
.process-intro{max-width:780px;margin:0 auto;text-align:center}
.process-intro .process-h{margin-bottom:0}
.vstep h3{font-size:var(--h3);margin-bottom:12px}
.process-intro p{color:#C4C4CB;max-width:620px;margin:0 auto;text-wrap:pretty}
.vstep .num{margin-bottom:10px}
.vstep p{font-size:var(--body-sm);color:var(--text-muted)}
.process-foot{max-width:640px;margin:40px auto 0;text-align:center}
.process-foot p{text-wrap:pretty}

/* ===== Questions before you book (new; the old Reviews slot): heading left, the accordion right, on a faint river
   of its own (FAQ's retired cut, never shown on Home). Elementor: 2-column container, Nested Accordion. ===== */
.home-faq{--mimg:url(../assets/marble/c-faq-under-b.webp);--mop:var(--m-under);--mpos:center 20%;padding:140px 0 120px}
.home-faq{position:relative;isolation:isolate}
.home-faq::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--mimg) no-repeat var(--mpos)/100% auto;opacity:var(--mop);
  -webkit-mask-image:var(--mfade-faq);mask-image:var(--mfade-faq);
  --mfade-faq:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 120px,#000 240px,#000 calc(100% - 240px),rgba(0,0,0,.5) calc(100% - 120px),transparent 100%)}
.hfaq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.hfaq-head h2{margin-bottom:8px}
.home-faq .acc{background:rgba(6,6,7,.55)}
@media (min-width:1024px){.hfaq-head{position:sticky;top:130px}}
@media (max-width:1023px){.hfaq-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:767px){.home-faq{padding:96px 0 80px}.home-faq::before{background-size:180% auto}}

/* Find us: the area line sits under the heading now (the copy leads with it) */
.visit-info .serving{margin:0 0 4px;color:#C4C4CB}
.visit-info .visit-details{margin-top:22px}

/* the closing call has no paragraph in the copy: the separator, then the actions */
.cta-inner .sep+.cta-actions{margin-top:8px}

/* the details table now carries Email and Instagram rows too; "Instagram" needs a wider label column than 96px */
.visit-home .contact-table th{width:124px}
@media (max-width:767px){.visit-home .contact-table th{width:auto}}

/* ===== Reviews: an empty slot until the Google profile has reviews (copy [CONFIRM]). Elementor: a reviews widget. ===== */
.home-reviews{padding:120px 0 0}
.home-reviews h2{margin-bottom:32px}
.rev-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:40px}
.rev-head h2{margin:0}
.rev-note{margin:0;font-size:12px;letter-spacing:.06em;color:var(--text-muted)}
.stars{display:block;font-size:14px;letter-spacing:.2em;color:#C9C7D0;margin-bottom:14px}
.rev-card blockquote{margin:0 0 16px;font-size:var(--body);line-height:1.55;color:var(--text);text-wrap:pretty}
.rev-card cite{font:500 11px/1.4 var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-light)}

@media (max-width:767px){.home-reviews{padding-top:88px}}

/* Reviews as a card carousel (10-07): native scroll-snap, about two and a half cards showing so it reads as scrollable,
   the arrows scroll one card. Elementor: Testimonial Carousel (Pro) or a Loop Carousel. */
.rev-head{align-items:flex-end}
.rev-nav{display:flex;gap:10px}
.rev-btn{width:46px;height:46px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);color:var(--text);cursor:pointer;transition:border-color .2s,color .2s}
.rev-btn:hover{border-color:var(--purple);color:var(--purple-light)}
.rev-btn svg,.acard-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.rev-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 2.4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:0}
.rev-track::-webkit-scrollbar{display:none}
.rev-card{scroll-snap-align:start;display:flex;flex-direction:column;padding:34px 32px 30px;border:1px solid var(--line-soft);background:rgba(19,18,22,.6)}
.rev-card blockquote{flex:1}
@media (max-width:1023px){.rev-track{grid-auto-columns:calc((100% - 24px) / 1.6)}}
@media (max-width:600px){.rev-track{grid-auto-columns:86%}.rev-head{flex-direction:column;align-items:flex-start}}

/* Closing call: a line of content under the heading */
.cta-p{max-width:560px;margin:18px auto 6px;font-size:var(--body);color:#C4C4CB;text-wrap:pretty}

/* ===== The hands behind the work: photo cards (10-07, idea B) ===== */
.artists-opt{padding:120px 0}
.opt-h{margin-bottom:44px}
.artists-opt .link-row{margin-top:48px}
.artists-opt .role{margin-bottom:10px}
.acard-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
a:hover .acard-more{color:var(--purple-light)}
.pcard h3{font-size:28px;line-height:1.1;margin:0 0 12px}
.pcard-p{display:block;font-size:var(--body-sm);color:var(--text-muted);margin-bottom:18px;text-wrap:pretty}
/* B: medium photo cards, name over the bottom of the photo */
.pcard-row{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:40px;justify-content:start}
.pcard{display:flex;flex-direction:column}
.pcard-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line-soft)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .pcard-img img{transform:scale(1.03)}
.pcard-cap{position:relative;margin:-96px 0 18px;padding:20px 22px 0;background:linear-gradient(180deg,transparent,rgba(6,6,7,.92) 45%)}
@media (max-width:600px){.pcard-row{grid-template-columns:none}.artists-opt{padding:88px 0}}

/* the ten-year test's icons (10-07): chrome engraved glyphs beside each benefit. Elementor: Icon Box (SVG icon, left). */
.vanity .t-ico{display:block;width:44px;height:44px;margin:0 0 18px}   /* above the heading (10-07) */
@media (max-width:600px){.vanity .t-ico{width:38px;height:38px;margin-bottom:14px}}

/* Why we called it Vanity gets a river of its own (10-07; it sat on flat black between Meet's tail and Cover-ups):
   Your Idea's cut, mirrored, faded in at the top over Meet's tail and out at the bottom under Cover-ups' rise.
   Elementor: section background image (mirrored file) + the same fades baked or as overlay gradients. */
.vanity{position:relative;isolation:isolate}
.vanity::before{content:"";position:absolute;inset:-120px 0 -160px;z-index:-1;pointer-events:none;
  background:url(../assets/marble/c-home-idea-b.webp) no-repeat center 30%/100% auto;transform:scaleX(-1);opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 160px,#000 320px,#000 calc(100% - 320px),rgba(0,0,0,.5) calc(100% - 160px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 160px,#000 320px,#000 calc(100% - 320px),rgba(0,0,0,.5) calc(100% - 160px),transparent 100%)}
.vanity .expect-head.pool::before{opacity:1}
@media (max-width:767px){.vanity::before{background-size:220% auto;inset:-80px 0 -100px}}

/* Inside the studio (10-13): the large photo, then the shared carousel (site.css .car) of the rest of the studio */

/* Artist cards (10-13): the caption shares the photo's grid cell, pinned to its bottom and growing upward, and the dark fade
   sits on the photo itself, so the fade always reaches the photo's bottom edge and a two-line role never pushes the name
   past it (the old 96px overlap left a strip of bare photo under a short caption). Elementor: the image as the container's
   background, the caption as its bottom-aligned content, a gradient overlay. */
.pcard{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.pcard-img,.pcard-cap{grid-row:1;grid-column:1}
.pcard-img::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(6,6,7,.92) 70%);pointer-events:none}
.pcard-cap{align-self:end;margin:0;padding:20px 22px 18px;background:none}
.pcard-cap h3{margin:0}
.pcard-p{margin-top:18px}

/* Artist cards with an Instagram link (10-13): the card is a plain container now (links can't nest); the photo is the
   link to the artist, the caption over it lets clicks through, then the lines, the Instagram link (glyph + handle) and
   the artist's link, each under its own text. Elementor: Image (link), Heading, Text Editor, Icon List, a link. */
.pcard-cap{pointer-events:none}
.pcard-p{margin:18px 0 4px}
.pcard .ig-link{justify-self:start}
.pcard .acard-more{justify-self:start;margin-top:12px}
.acard-more:hover{color:var(--purple-light)}

/* Our tattoo process: the intro line under the heading (10-13) */
.process-intro .process-h{margin-bottom:18px}

/* The proof strip (10-13 copy: "Custom designs only", "Consultation first" are longer): a touch smaller so the four
   claims hold one line from 1280 up; narrower, they sit as two centred pairs without the gems (never a gem alone at a
   line's end); phones keep the stack. Elementor: the Text Editor's font size per breakpoint; tablet, a 2-column Icon List. */
.glance .glc-line{font-size:18px;letter-spacing:.04em;gap:14px 18px}   /* 18px desktop, 16px phones (Tannis 10-17) */
/* phones only (10-14, Tannis: desktop and tablets keep the one line): two rows of two with the gem between each pair, the claims set against it
   (right-aligned before it, left-aligned after) so both rows centre on the same gem line */
@media (max-width:767px){
  .glance .glc-line{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 18px}
  .glance .glc-line>span:nth-of-type(odd){text-align:right}
  .glance .glc-line>span:nth-of-type(even){text-align:left}
  .glance .glc-line .gem:nth-of-type(2){display:none}   /* the gem between the two rows; the other two sit between each pair */
}
/* phones: a size smaller so most claims stay on one line */
@media (max-width:767px){.glance .glc-line{gap:14px 10px;font-size:16px;letter-spacing:.03em}}

/* Phones (10-13 copy): the portfolio's two links stack centred; a two-line eyebrow gets room between its lines;
   "Cover-up" never breaks at its hyphen (a plain span in the heading, white-space only). */
.nowrap{white-space:nowrap}
@media (max-width:600px){
  .work-links{flex-direction:column;align-items:center;text-align:center;gap:18px}
  .work-links a{letter-spacing:.1em}   /* the Instagram link holds one line from 390 wide */
  .eyebrow{line-height:1.6}
}

/* Inside the studio (10-13 later, Tannis: "a tiny bit more content… then a button to about"): a short scan list under
   the paragraphs, each item a hairline row with a small violet diamond, then the button to /about.
   Elementor: Icon List (a small diamond icon, dividers on), then a Button. */
.studio-list{list-style:none;margin:24px 0 0;padding:0}
.studio-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(200,200,204,.16);color:var(--text);font:500 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.studio-list li:last-child{border-bottom:1px solid rgba(200,200,204,.16)}
.studio-list li::before{content:"";flex:none;width:6px;height:6px;background:var(--purple);transform:rotate(45deg)}
.home-studio .studio-actions{margin-top:32px}

/* Artist cards as a carousel on phones (10-14, Tannis): one card and the edge of the next, swipe or drag (site.js), the
   row running to the screen edges. Elementor: Loop Carousel / Nested Carousel, 1.2 slides on Mobile. */
@media (max-width:767px){
  .pcard-row{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(0px - var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .pcard-row::-webkit-scrollbar{display:none}
  .pcard-row>*{scroll-snap-align:start}
}