/* Vanity Ink v2: About (after pages.css and v2.css). Layout 2, picked by Tannis 10-13: hero · Our story (one centred
   paragraph, on the first river) · the studio wide (one photo, the carousel of every studio photo; lightbox) · Who you'll
   meet (words left, a consultation right) · What we believe (a sticky heading beside three icon rows, Home's Why choose
   pattern) · the studio and clean room (a lead, six photo cards, three icon notes) · the closing strip. */

/* the first river runs under one section: the same soft entry, full behind the words, eased out over the wrapper's last
   420px so it never ends on a line. Elementor: the flow container's overlay gradient, its last stops counted from the bottom. */
.flow-about{--mmask:linear-gradient(180deg,var(--entry),#000 380px,#000 calc(100% - 420px),rgba(0,0,0,.5) calc(100% - 200px),transparent 100%)}

/* Who you'll meet: the link under the paragraph, one photo kept to a portrait's size at the column's outer edge */
#people .link-row{margin-top:20px}
#people .people-shot{width:100%;max-width:440px;justify-self:end;margin:0}
#people .people-shot .shot{aspect-ratio:4/5;margin:0}
@media (max-width:767px){#people .people-shot{justify-self:start}}

/* the closing strip: one short paragraph and a link on the left */
.cta-strip .strip .link-row{margin-top:20px}

/* Icon rows, the wide studio, the cards. Elementor: Icon Box, Image + Image Carousel (Lightbox: Yes), a grid of
   Image + Heading + Text. */
.t-ico{display:block;width:40px;height:40px;margin:0 0 16px}
.a-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.a-head{position:sticky;top:150px}
.a-head h2{max-width:460px}
.a-head p,.a-head h2{margin-bottom:18px}
.belief-list,.amen-list,.extras,.room-grid{list-style:none;margin:0;padding:0}
.belief-list li{position:relative;padding:36px 0 40px}
.belief-list li::before,.extras li::before{content:"";position:absolute;left:0;top:0;right:0;height:1px;background:linear-gradient(90deg,rgba(200,200,204,.55),rgba(136,88,184,.35) 45%,transparent 85%)}
.belief-list h3,.amen-list h3,.extras h3,.room h3{font-size:var(--h3-sm);margin-bottom:10px}
.a-sub{font-size:13px;font-family:var(--sans);letter-spacing:.22em;color:var(--purple-light);margin:0 0 8px}

.a-intro .txt{max-width:760px;margin:0 auto;text-align:center}
.a-wide-shot{aspect-ratio:21/9;margin:0}
.a-wide .car-track{grid-auto-columns:calc((100% - 36px) / 4)}
.a-rooms-head{max-width:720px;margin-bottom:48px}
.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.room .shot{aspect-ratio:4/5;margin:0 0 18px}
.room p,.extras p,.amen-list p{margin:0;text-wrap:pretty}
.extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:72px}
.extras li{position:relative;padding-top:28px}

@media (max-width:1023px){
  .a-split{grid-template-columns:minmax(0,1fr);gap:40px}
  .a-head{position:static}
  .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .a-wide-shot{aspect-ratio:3/2}
  .a-wide .car-track{grid-auto-columns:calc((100% - 8px) / 2)}
  .room-grid{gap:32px 12px}
  .extras{grid-template-columns:minmax(0,1fr);gap:28px}
}
