/* Home, polished-marble comparison (10-07): the same river cuts re-rendered with the real floor's finish (glossy
   metallic epoxy, pearl and silver veins; tools/imagegen/prompts/marble-polish.md). Only the image paths change, so the
   placement, masks and fades are Home's own. */
.c-home-idea{--mimg:url(../assets/marble-polish/c-home-idea-b.webp)}
.c-home-flow{--mimg:url(../assets/marble-polish/c-home-flow-b.webp)}
.c-home-cover{--mimg:url(../assets/marble-polish/c-home-cover-b.webp)}
.c-home-meet{--mimg:url(../assets/marble-polish/c-home-meet-b.webp)}
.home-studio{--mimg:url(../assets/marble-polish/c-home-studio-b.webp)}
.c-home-visit{--mimg:url(../assets/marble-polish/c-home-visit-b.webp)}
.cta-final.m-finale{--mimg:url(../assets/marble-polish/finale-home-b.webp)}
.home-faq{--mimg:url(../assets/marble-polish/c-faq-under-b.webp)}
.vanity::before{background-image:url(../assets/marble-polish/c-home-idea-b.webp)}

/* ===== The content veil (10-07, Tannis): instead of the scattered pools and boxes, one soft column. Every river layer
   gets a horizontal mask on top of its own vertical fades: full marble out at the edges, easing down to --veil across
   the content column (content edge to content edge), so the text sits on a calm, darker middle the whole way down.
   Elementor: each section's background image + a horizontal overlay gradient (page black, transparent at the edges)
   with the same stops; no per-block shadows. ===== */
:root{--veil:.13;--veil-ramp:180px;
  /* the strip reaches 90px past the content edge on each side (10-07: "a little wider") */
  --cx:max(var(--gutter,24px),calc((100vw - var(--container,1240px)) / 2 - 90px));
  /* the fade ends at the content edge (not across it), so text at the edge of the column already sits on the veil */
  --hveil:linear-gradient(90deg,#000 0,#000 calc(var(--cx) - var(--veil-ramp)),rgba(0,0,0,var(--veil)) var(--cx),rgba(0,0,0,var(--veil)) calc(100% - var(--cx)),#000 calc(100% - var(--cx) + var(--veil-ramp)),#000 100%)}
.marble::before,.m-under::after{-webkit-mask-image:var(--hveil),var(--mmask,var(--mfade));mask-image:var(--hveil),var(--mmask,var(--mfade));-webkit-mask-composite:source-in;mask-composite:intersect}
.studio::before{-webkit-mask-image:var(--hveil),var(--s-mask);mask-image:var(--hveil),var(--s-mask);-webkit-mask-composite:source-in;mask-composite:intersect}
.home-faq::before{-webkit-mask-image:var(--hveil),var(--mfade-faq);mask-image:var(--hveil),var(--mfade-faq);-webkit-mask-composite:source-in;mask-composite:intersect}
.vanity::before{--vfade: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%);
  -webkit-mask-image:var(--hveil),var(--vfade);mask-image:var(--hveil),var(--vfade);-webkit-mask-composite:source-in;mask-composite:intersect}
/* the veil does the pools' job, so the scattered shadows and the boxes behind text go */
.pool::before{display:none}
.home-faq .acc{background:none}
@media (max-width:767px){:root{--veil:.13;--veil-ramp:40px}}
@media (max-width:767px){.marble::before,.m-under::after{-webkit-mask-image:var(--hveil),var(--mmask-m,var(--mfade));mask-image:var(--hveil),var(--mmask-m,var(--mfade))}}

/* ===== No other shadows (10-07, Tannis: "kill all other shadows"): the veil is the only darkening. Off: the dark blots
   behind the process steps and in the studio's river, Meet's flat black overlay, the hero's pool behind the words
   (an even veil keeps the photo calm instead), the drop shadows under headings, and the cast shadows under photos and
   the map. ===== */
.vstep::before{display:none}
.studio::before{background:var(--mimg) no-repeat center top/100% auto}
.artists-flow::after{background:var(--mimg) no-repeat var(--mpos,center top)/var(--msize,100% auto) var(--black)}
/* the hero joins the strip: the same column, the photo let through at the strip's level in the middle (1 - --veil),
   lighter out at the edges, then the usual fade to black at the bottom */
.hero::before{background:linear-gradient(90deg,rgba(6,6,7,.4) 0,rgba(6,6,7,.4) calc(var(--cx) - var(--veil-ramp)),rgba(6,6,7,calc(1 - var(--veil))) var(--cx),rgba(6,6,7,calc(1 - var(--veil))) calc(100% - var(--cx)),rgba(6,6,7,.4) calc(100% - var(--cx) + var(--veil-ramp)),rgba(6,6,7,.4) 100%),linear-gradient(180deg,rgba(6,6,7,0) 0%,rgba(6,6,7,0) 62%,var(--black) 92%)}
h1,h2,h3,.hero-tag,.metal{filter:none}
.framed,.reel .shot,.map-frame,.cov-before{box-shadow:none}
@media (max-width:767px){.artists-flow::after{background-size:var(--msize-m,250% auto)}}

/* ===== One seamless tile (10-07, Tannis: "no hard cuts"): every section's own river layer is off; the page runs one
   vertically seamless strip of the polished marble (assets/marble-polish/tile.webp, 1920x3840, top and bottom
   rows continuous) down the whole of main, repeating, with the content strip painted over it in the same background.
   No section starts or ends its own image, so there is nothing to cut or stitch. Elementor: the page (or the main
   wrapper) gets the background image, repeat-y, width 100%, plus the strip as a background overlay gradient; sections
   are transparent. ===== */
.marble::before,.m-under::after,.studio::before,.home-faq::before,.vanity::before,.artists-flow::after,.flow-steps::before{display:none}
main{background:
  linear-gradient(180deg,rgba(6,6,7,0) calc(100% - 420px),var(--black) 100%),
  /* back to one page-long gradient (10-07), now full width: the content column at the strip's darkness, tapering
     across the outer gutters to a lighter --edge-dim at the viewport edge (the marble shows most out there, but
     nothing is left at full strength) */
  linear-gradient(90deg,rgba(6,6,7,var(--edge-dim)) 0,rgba(6,6,7,calc(1 - var(--veil))) var(--cx),rgba(6,6,7,calc(1 - var(--veil))) calc(100% - var(--cx)),rgba(6,6,7,var(--edge-dim)) 100%),
  url(../assets/marble-polish/tile-river.webp?v=2) repeat-y center top/100% auto,
  var(--black)}
@media (max-width:767px){main{background-size:auto,auto,180% auto,auto}}

/* the two ends: the hero photo dissolves into the tile (no black floor under it, the photo's own bottom fades out),
   and the tile eases to black over its last 420px before the footer (the first background layer above) */
.hero{background:none}
.hero-img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.hero::before{background:linear-gradient(90deg,rgba(6,6,7,.4) 0,rgba(6,6,7,.4) calc(var(--cx) - var(--veil-ramp)),rgba(6,6,7,calc(1 - var(--veil))) var(--cx),rgba(6,6,7,calc(1 - var(--veil))) calc(100% - var(--cx)),rgba(6,6,7,.4) calc(100% - var(--cx) + var(--veil-ramp)),rgba(6,6,7,.4) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}

/* ===== Header (10-07): the client's new chrome wordmark (references/logos/vanity-ink-chrome-logo-2026-10-07.png); the
   full-width bar's dark overlay, blur and rule are gone so the page runs behind it, and the logo, links and actions sit
   in one dark box instead (square corners, a hairline). Elementor: header container transparent, an inner boxed
   container with a background colour, border and padding; Site Logo widget with the new file. ===== */
.site-header{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;padding-top:14px}
.site-header .hdr{background:rgba(6,6,7,.78);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  min-height:70px;padding:0 26px;max-width:calc(var(--container) + 52px)}
.wordmark img{height:48px}
@media (max-width:1023px){.site-header{padding-top:10px}.site-header .hdr{margin:0 12px;width:auto;padding:0 14px;min-height:62px}.wordmark img{height:38px}}

/* ===== Hero (10-07, Tannis): the marble runs behind the hero photo (never over it), no overlay on the photo, and the hero's
   words and buttons sit in one dark hairline box, like the header's. Elementor: the hero container transparent (the
   page background shows), an inner boxed container with a background colour, border and padding. ===== */
/* corrected (10-07): the studio photo stays, with the marble behind it, not over it: no overlay on the photo, its
   bottom dissolving into the page's marble, the words boxed */
.hero::before{display:none}
.hero{background:none}
.hero-img{display:block;filter:saturate(.95) brightness(.95);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.hero .hero-copy{background:rgba(6,6,7,.78);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  max-width:1140px;padding:52px clamp(24px,4vw,56px) 56px}
.hero .hero-copy .hero-actions{margin-bottom:0}
@media (max-width:767px){.hero .hero-copy{padding:40px 22px 44px}}

/* ===== Section panels (10-07, Tannis): the strip, section by section instead of one page-long column. Each section's
   content gets its own dark panel reaching --pad past the content on every side (as far up and down as left and
   right), with the same soft 120px edges, so where two sections sit far apart the marble shows between them.
   The hero keeps its own box. Elementor: each section's inner container gets the dark background, with padding equal
   on all sides and a soft edge (a mask, or a gradient border image). ===== */
:root{--pad:150px;--soft:120px;--edge-dim:.2}
main section:not(.hero)>.container{position:relative;isolation:isolate}
main section:not(.hero)>.container::before{display:none;content:"";position:absolute;inset:calc(0px - var(--pad));z-index:-1;pointer-events:none;
  background:rgba(6,6,7,calc(1 - var(--veil)));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--soft),#000 calc(100% - var(--soft)),transparent),linear-gradient(180deg,transparent,#000 var(--soft),#000 calc(100% - var(--soft)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--soft),#000 calc(100% - var(--soft)),transparent),linear-gradient(180deg,transparent,#000 var(--soft),#000 calc(100% - var(--soft)),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (max-width:767px){:root{--pad:60px;--soft:50px}}
/* Inside the studio: the photo stays inside the content width instead of running to the right edge */
.home-studio .studio-shot{margin-right:0}

/* ===== One vertical rhythm (10-07, Tannis: "section spacing consistent"). The sections had grown their own paddings
   (150/0, 160/140, 120/160, 180/120, 160/160, 220/240...), mostly to stage the old per-section rivers. With one tile
   behind the page those reasons are gone, so every section after the hero (the glance row stays attached to it) takes
   the house rhythm, --section-y top and bottom: 84px, 68px on tablets, 52px on phones (vanity.css; 120 / 96 / 72 until the 10-13 audit). Every gap between
   two sections' content is then the same 2 x --section-y. Elementor: each section container's padding = the global
   section spacing, top and bottom. ===== */
main section:not(.hero):not(.glance):not(.page-hero){padding-top:var(--section-y);padding-bottom:var(--section-y)}
.studio{--s-pt:var(--section-y);--s-pb:var(--section-y)}

/* ===== Hero options (10-07 review, stacked in order; one gets picked). No box in any of them.
   1 a soft dark band across the full width behind the words; 2 one even black overlay over the whole photo, light
   enough that the room still reads; 3 a dark side, the words left-aligned over it, the room clear on the right;
   4 a violet multiply tint (the brand colour over the room), a little deeper behind the words. ===== */
.hero.hv1 .hero-copy,.hero.hv2 .hero-copy,.hero.hv3 .hero-copy,.hero.hv4 .hero-copy{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.hero.hv1::before,.hero.hv2::before,.hero.hv3::before,.hero.hv4::before{display:block;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.hero.hv1::before{background:linear-gradient(180deg,rgba(6,6,7,0) 12%,rgba(6,6,7,.8) 34%,rgba(6,6,7,.8) 70%,rgba(6,6,7,0) 90%)}
.hero.hv2::before{background:rgba(0,0,0,.52)}
.hero.hv3::before{background:linear-gradient(90deg,rgba(6,6,7,.92) 0,rgba(6,6,7,.82) 38%,rgba(6,6,7,.25) 68%,rgba(6,6,7,0) 85%)}
.hero.hv3 .hero-copy{max-width:780px;margin:0;text-align:left}
.hero.hv3 h1,.hero.hv3 .sub{text-align:left;margin-left:0}
.hero.hv3 .hero-tag{justify-content:flex-start;font-size:clamp(28px,2.9vw,42px)}
.hero.hv3 .sub{max-width:560px}
.hero.hv3 .hero-actions{justify-content:flex-start}
.hero.hv4::before{background:linear-gradient(rgb(92,62,134),rgb(92,62,134));mix-blend-mode:multiply}
.hero.hv4::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 42% at 50% 46%,rgba(6,6,7,.45),rgba(6,6,7,0))}
@media (max-width:767px){.hero.hv3::before{background:rgba(6,6,7,.62)}}

/* ===== Trust strip options (10-07 review, under the current one; one gets picked).
   A Aftercare's timeline row: a small violet label over one line, hairline columns, no icons.
   B centred columns: the icon on top, the title in the display face, the line under it, no rules.
   C one line: the four claims in the display face, separated by the logo's violet gem. ===== */
.glance.gl-a,.glance.gl-b,.glance.gl-c{padding:56px 0 0}
.gla-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)}
.gla-row li{padding:26px 28px 28px}
.gla-row li:first-child{padding-left:0}
.gla-row li+li{border-left:1px solid var(--line-soft)}
.gla-row b{display:block;margin-bottom:10px;font:600 11px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--purple-light)}
.gla-row p{margin:0;font-size:var(--body-sm);line-height:1.55;color:#C4C4CB}
.glb-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;text-align:center}
.glb-row svg{display:block;width:40px;height:40px;margin:0 auto 18px}
.glb-row b{display:block;margin-bottom:8px;font:400 20px/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--text)}
.glb-row p{margin:0;font-size:14px;color:var(--text-muted)}
.glc-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin:0;padding:26px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  font:400 clamp(16px,1.5vw,20px)/1.3 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.glc-line .gem{width:auto;height:.8em}
@media (max-width:1023px){.gla-row,.glb-row{grid-template-columns:repeat(2,minmax(0,1fr))}.gla-row li:nth-child(3){border-left:0;padding-left:0}.gla-row li:nth-child(n+3){border-top:1px solid var(--line-soft)}}
@media (max-width:600px){.gla-row,.glb-row{grid-template-columns:1fr}.gla-row li{padding:20px 0;border-left:0!important}.gla-row li+li{border-top:1px solid var(--line-soft)}.glc-line{flex-direction:column;gap:12px}}

/* Phones (10-07 mobile pass): the gutters are only 24px, so the lighter gradient edges read as bright stripes down
   both sides; on phones the edges stay nearly as dark as the column. Inner hero photos sit right under the words on
   a phone, so they dim (Aftercare already did). */
@media (max-width:767px){
  :root{--edge-dim:.72}
  .page-hero.tall .page-hero-img{opacity:.45}
}

/* Hero on phones (10-07): "Art ◆ Precision" on the first line and "Passion" under it (the second gem drops, so no
   gem is left hanging at a line end); the band starts at the top of the hero, so the small violet line above the
   tagline sits on it too, and that line is a step lighter. */
@media (max-width:767px){
  /* 10-15 (Tannis): the three words on one line again, sized to the screen's width (the line runs about 17.5 times its
     type size), the gems and gaps a little tighter; the hero a little taller */
  .hero-tag{flex-direction:row;flex-wrap:nowrap;gap:.3em;font-size:clamp(17px,6vw,30px);letter-spacing:.02em}
  .hero-tag .gem{height:.5em;transform:translateY(-.04em)}
  .hero{min-height:92svh}
  .hero h1{color:#C9B3EA}
}

/* The river starts under the trust strip (10-07): the hero photo now fades into solid black instead of into the
   marble, the strip sits on black, and the work section eases the marble in over its first 280px. The band behind
   the hero's words is a little darker. */
.hero{background:var(--black)}
.glance{background:var(--black)}
/* 10-13: the studio now sits between the strip and the work, so the work no longer starts from black (its black top
   cut the studio's river off in a hard line); the two rivers hand off through their own fades */
.hero.hv1::before{background:linear-gradient(180deg,rgba(6,6,7,0) 12%,rgba(6,6,7,.88) 34%,rgba(6,6,7,.88) 70%,rgba(6,6,7,0) 90%)}
@media (max-width:767px){.hero.hv1::before{background:linear-gradient(180deg,rgba(6,6,7,.66) 0,rgba(6,6,7,.88) 16%,rgba(6,6,7,.88) 78%,rgba(6,6,7,0) 94%)}}

/* Inner heroes (10-07): the photo used to end in a hard line where the river began. Now the hero sits on solid black,
   its photo fades out over the bottom 40%, and the first block after the hero eases the river in over 280px (the same
   hand-off as Home under the trust strip). Elementor: hero container background black, the image's bottom fade as an
   overlay gradient; the next container a top gradient from black to transparent. */
.page-hero{background:var(--black)}
.page-hero.tall .page-hero-img,.page-hero .page-hero-img{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
.page-hero+section,.page-hero+div{background-image:linear-gradient(180deg,var(--black) 0,rgba(6,6,7,0) 280px)}

/* Home hero, every width (10-14, Tannis; phones since the same day): the dark backing only just past the words, shaped like them: widest at the top
   (the tagline is the widest line) and drawing in toward the button, a soft trapezoid (a blurred polygon, stretched
   to the copy block plus a margin). Elementor: the hero copy container's
   background image (this SVG), size 100% 100%, the container set to inline width. */
.hero.hv1::before{display:none}
.hero.hv1 .hero-copy{position:relative;isolation:isolate;width:fit-content;max-width:min(1140px,100%);margin-inline:auto}   /* 1140: the tagline runs ~1000px at desktop sizes; a narrower cap let it overflow and cut its outer letters */
/* the chrome fill is clipped to the line's own box: a little room each side keeps the A's overhang whole */
.hero.hv1 .hero-tag{padding-inline:.12em}
.hero.hv1 .hero-copy::before{content:"";position:absolute;inset:-185px -265px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Cpolygon points='10,9 90,9 71,91 29,91' fill='%23060607' fill-opacity='.8' filter='url(%23b)'/%3E%3C/svg%3E") no-repeat center/100% 100%}
/* phones: the words fill the width, so the shape draws in less (keeping the button on it) and is lighter (10-15: it
   covers most of the hero there, so at full strength it read much darker than on desktop) */
@media (max-width:767px){.hero.hv1 .hero-copy::before{inset:-110px -80px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Cpolygon points='6,8 94,8 84,92 16,92' fill='%23060607' fill-opacity='.8' filter='url(%23b)'/%3E%3C/svg%3E")}}

/* ===== Home: the marble starts at the proof strip (10-14, Tannis: "the top of the marble flow should be always aligned
   top here", at every window width). The tile moves from main to .flow-page, the wrapper from the strip down, so its
   top edge is the strip's top edge. The hero photo fades to black at its bottom; the wrapper starts in the same black and
   lets the marble in over its first 160px (most of it already behind the strip), so there is no hard line between them, and the strip sits on a lighter dark
   than the old solid black band. Elementor: the background (tile, veil, top fade) on the container that starts at the
   strip and holds the rest of the page. ===== */
body[data-page="home"] main{background:var(--black)}
.glance{background:none}
.flow-page{background:
  linear-gradient(180deg,var(--black) 0,rgba(6,6,7,.35) 70px,rgba(6,6,7,0) 160px),
  linear-gradient(180deg,rgba(6,6,7,0) calc(100% - 420px),var(--black) 100%),
  linear-gradient(90deg,rgba(6,6,7,var(--edge-dim)) 0,rgba(6,6,7,calc(1 - var(--veil))) var(--cx),rgba(6,6,7,calc(1 - var(--veil))) calc(100% - var(--cx)),rgba(6,6,7,var(--edge-dim)) 100%),
  url(../assets/marble-polish/tile-river.webp?v=2) repeat-y center top/100% auto,
  var(--black)}
/* the tile starts 69% of the screen's width into itself (where the river shows brightest under the strip, as before), a
   fixed share of the width so it lines up the same at every window size; phones scale the tile 180%, so 124% */
.flow-page{background-position:0 0,0 0,0 0,center -69vw,0 0}
@media (max-width:767px){.flow-page{background-size:auto,auto,auto,180% auto,auto;background-position:0 0,0 0,0 0,center -124vw,0 0}}