/* Vanity Ink v2: Aftercare (after pages.css and v2.css). 10-13 copy: the timeline row (an H3 per stage), the routine
   on the light trail (each stage's H2 and its stage line left, the copy right; week one's three steps a numbered list),
   What not to do keeps the .avoid rows; What's normal keeps the healing stats beside its two paragraphs and the
   doctor-signs list; Caring for a healed tattoo keeps the healed/fresh pair; the three questions are the FAQ accordion;
   the strip ends with the hours and the phone link (no booking button in the copy). */

/* The routine (10-13): the stage's heading sits where the large figure was, beside the trail, with its stage line
   ("Days 1 to 5") as a plain small line under it; the marker level with the heading's first line. pages.css draws the
   trail, the markers and the sticky column; only the label column's contents change here.
   Elementor: per stage a two-column container (left: Heading h2 + Text Editor for the stage line, Sticky on desktop,
   the marker an absolute Image widget; right: Text Editor). */
#routine .timeline{--tl-h2:clamp(28px,2.5vw,36px);--tl-m:calc(var(--tl-h2) * .52 - 12px)}
#routine .tl-when{justify-self:stretch}
#routine .tl-when h2{margin:0;font-size:var(--tl-h2);line-height:1.15;text-wrap:balance}
#routine .tl-when .stage{margin:14px 0 0;font:500 14px/1.5 var(--sans);letter-spacing:.04em;color:var(--text-muted)}
#routine .tl-body{padding-top:calc(var(--tl-h2) * .08)}
#routine .tl-body>:first-child{margin-top:0}
@media (max-width:1023px){#routine .timeline{--tl-h2:26px}}
@media (max-width:767px){
  #routine .timeline{--tl-h2:24px;--tl-m:calc(var(--tl-h2) * .52 - 12px)}
  #routine .tl-when{width:auto;margin-bottom:18px}
  #routine .tl-when::before{inset:-40% -14%}
  #routine .tl-body{padding-top:0;gap:0}
}

/* week one's steps: Cinzel violet numerals, words beside them (Book's What Happens Next recipe, no line).
   Elementor: a column container, per step a row (Heading tag p the numeral, Text Editor). */
.care-steps{display:flex;flex-direction:column;gap:14px;margin:4px 0 26px;counter-reset:cs}
.care-steps li{position:relative;padding-left:40px;counter-increment:cs;font-size:var(--body-sm);color:var(--text);text-wrap:pretty}
.care-steps li::before{content:counter(cs);position:absolute;left:0;top:0;font:500 22px/1.25 var(--display);color:var(--purple-light)}

/* Until it's healed: the heading and the four rows on a pool, the reason under them */
.avoid h2{margin-bottom:26px}
.avoid .avoid-why{margin-top:26px;text-wrap:pretty}
.avoid li{font-size:var(--body-sm);text-wrap:pretty}

/* What's normal: the stats stay in view while the long column scrolls past (desktop); the list labels as small caps */
@media (min-width:1024px){
  .normal-grid{align-items:start}
  .normal-grid .stats{position:sticky;top:150px}
}
.normal-grid .dash-list{margin-top:6px}
.normal-grid .dash-list li{font-size:var(--body-sm)}

/* After it heals: the link row under the words */
#after .link-row{margin-top:18px}

/* Tattoo aftercare questions: heading left, accordion right (Home's questions block) */
.care-faq{padding:120px 0 140px}
.cfaq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.cfaq-head h2{margin-bottom:8px}
.care-faq .acc{background:rgba(6,6,7,.55)}
@media (max-width:1023px){.cfaq-grid{grid-template-columns:1fr;gap:28px}}

/* the strip: two contact links instead of a button */
.strip .strip-hours{margin-top:14px;color:var(--text)}
.strip .strip-hours .lbl{color:var(--purple-light)}
.care-actions{align-items:flex-start;gap:6px}
.care-actions .mail-lc{text-transform:none;letter-spacing:.04em;font-size:13px}
.care-actions .call-link span{font-size:13px}
@media (max-width:767px){.strip .care-actions{align-items:flex-start}.strip .care-actions .call-link{align-self:flex-start}}

/* Tattoo aftercare timeline (10-07): Home's At a glance row (v2-home.css .glance-row), the stage as a small caps label
   over its one line. Elementor: 4-column container, Heading + Text Editor per column, borders as hairlines. */
.care-glance{position:relative;z-index:2;padding:72px 0 24px}
.care-glance h2{font-size:var(--h2-sm);margin:0 0 14px}
.care-glance-head{margin-bottom:28px;max-width:640px}
.care-glance-head p{margin:0;font-size:var(--body-sm);color:var(--text);text-wrap:pretty}
.care-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)}
.care-glance-row li{padding:28px 28px 30px}
.care-glance-row li:first-child{padding-left:0}
.care-glance-row li+li{border-left:1px solid var(--line-soft)}
.care-glance-row p{margin:0;font-size:var(--body-sm);line-height:1.55;color:#C4C4CB;text-wrap:pretty}
.care-glance-row h3{margin:0 0 10px;font:600 11px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--purple-light);background:none;-webkit-text-fill-color:currentColor}
@media (max-width:1023px){.care-glance-row{grid-template-columns:repeat(2,minmax(0,1fr))}.care-glance-row li:nth-child(3){border-left:0;padding-left:0}.care-glance-row li:nth-child(n+3){border-top:1px solid var(--line-soft)}}
@media (max-width:600px){.care-glance{padding-top:56px}.care-glance-row{grid-template-columns:1fr}.care-glance-row li{padding:22px 0;border-left:0!important}.care-glance-row li+li{border-top:1px solid var(--line-soft)}}

/* Hero photo (10-07, generated: a hand smoothing ointment over a fresh rose tattoo, the set's violet rim light):
   shown at full height and anchored right, so the applying hand isn't cropped and the arm stays clear of the words;
   on phones it sits behind the text, so it dims. Elementor: background image, size auto 100%, position right. */
.page-hero.tall .page-hero-img.hero-care{background-size:auto 100%;background-position:right top}
@media (max-width:767px){.page-hero.tall .page-hero-img.hero-care{background-size:cover;background-position:72% 30%;opacity:.45}}