/* Vault overview, mock 06: sections 1-3 match owner reference ref-a4bc9d22 (1001px wide).
   Desktop sizes are reference pixels expressed as vw (1 ref px = 0.0999vw). Page-only; shared sources unchanged. */

/* 1. Hero (shared image 10): quiet text left; the landing page's antique vault (static) in the right half, 1536x1024 at its native 1.5 aspect. */
.page--vault main > .v-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 33.4vw; padding: 3vw var(--pad-x); background: #050505; }
/* Hero 11: fill the first viewport below the fixed header. main already carries padding-top = header height, so subtract it once. min-height only: taller content grows the hero. */
.page--vault main > .v-hero { min-height: max(33.4vw, calc(100vh - var(--fashion-header-height))); min-height: max(33.4vw, calc(100svh - var(--fashion-header-height))); }
.page--vault .v-hero__media { position: absolute; top: 0; right: 0; left: auto; width: 56vw; height: 100%; object-fit: cover; object-position: 50% 45%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.v-hero__copy { position: relative; z-index: 1; max-width: 44vw; }
.page--vault .v-hero .k-eyeline { margin-bottom: 1.4vw; font-size: clamp(.62rem, .8vw, .78rem); letter-spacing: .2em; color: var(--soft); }
.page--vault .v-hero h1 { margin: 0 0 1.5vw; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3vw, 3.3rem); line-height: 1.08; letter-spacing: -.005em; color: var(--paper); }
.page--vault .v-hero h1 span { display: inline; }
@media (max-width: 999px) { .page--vault .v-hero h1 span { display: block; } }
.page--vault .v-hero__support { margin: 0 0 2.4vw; max-width: 46ch; font-size: clamp(.95rem, 1.12vw, 1.1rem); line-height: 1.6; color: var(--soft); }
.page--vault .v-hero__support span { display: block; }
.v-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.page--vault .v-hero__actions .k-cta { white-space: nowrap; }

/* Compact titles shared by sections 2 and 3 (ref ~40px serif, no eyebrow). */
.page--vault .v-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.1vw, 4.4rem); line-height: 1.05; letter-spacing: -.01em; color: var(--paper); }

/* 2. Care journey (ref y450-800): three image panels, 245 ref px tall. */
.page--vault main > .v-journey { padding: 2.7vw var(--pad-x) 2.5vw; }
.v-steps { list-style: none; margin: 1.6vw 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9vw; }
.v-step { position: relative; overflow: hidden; aspect-ratio: 300 / 245; padding: 2.6vw 1.8vw 1.8vw; background: #0b0a09; }
.page--vault .v-step__media { position: absolute; left: auto; top: 0; right: 0; width: var(--share, 56%); height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.v-step > :not(img) { position: relative; z-index: 1; }
.v-step__n { display: block; width: 5.5vw; padding-bottom: 1.1vw; margin-bottom: 1.4vw; border-bottom: 1px solid rgba(247,247,245,.55); font-family: var(--serif); font-size: clamp(1.6rem, 3.3vw, 3.4rem); line-height: 1; color: var(--paper); }
.page--vault .v-step__label { margin: 0 0 2.6vw; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 2.1rem); line-height: 1.1; color: var(--paper); }
.page--vault .v-step__text { margin: 0; max-width: 40%; font-size: clamp(.8rem, 1.2vw, 1.15rem); line-height: 1.45; color: var(--soft); }

/* 3. Five portfolios (ref y800-1365): three 249px tiles, then two 211px tiles, 11px gutters, wider than the text column. */
.page--vault main > .v-portfolios { padding: 1.5vw var(--pad-x) 2.4vw; }
.v-collection { list-style: none; margin: 1.5vw calc(2.5vw - var(--pad-x)) 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1vw; }
.v-entry { grid-column: span 2; scroll-margin-top: 8rem; }
.v-entry--wide { grid-column: span 3; }
.page--vault .v-entry__link { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 311 / 249; background: #0b0a09; color: var(--paper); text-decoration: none; }
.page--vault .v-entry--wide .v-entry__link { aspect-ratio: 471 / 211; }
.v-entry__link::before { content: ""; position: absolute; inset: -12%; z-index: -2; background: var(--img) center bottom / cover; filter: blur(14px) brightness(.42); }
.v-entry__link img { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 73.5%; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); transition: transform .6s ease; transform-origin: 50% 0; }
.v-entry--wide .v-entry__link img { height: 70.1%; }
.v-entry__link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,7,6,.72) 0%, rgba(8,7,6,.35) 32%, rgba(8,7,6,0) 55%); }
.v-entry__text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0 2vw; padding: 0 2.2vw 1.6vw 2.1vw; }
.v-entry__n { padding-bottom: .35vw; border-bottom: 1px solid rgba(247,247,245,.55); font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 2.6rem); line-height: 1; }
.v-entry__copy { display: grid; gap: .45vw; }
.v-entry__name { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.9rem); line-height: 1.05; }
.v-entry__purpose { font-size: clamp(.75rem, 1.2vw, 1.15rem); line-height: 1.35; color: #e4e1dc; }
.v-entry__arrow { padding-bottom: .2vw; font-size: clamp(1rem, 1.8vw, 1.8rem); line-height: 1; transition: transform .3s ease; }
.page--vault .v-entry__link:hover img, .page--vault .v-entry__link:focus-visible img { transform: scale(1.03); }
.page--vault .v-entry__link:hover .v-entry__arrow { transform: translateX(3px); }
.page--vault .v-entry__link:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.v-directory-end { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4vw; }
.page--vault .v-directory-end .k-note { margin: 0; }
@media (prefers-reduced-motion: reduce) { .v-entry__link img, .v-entry__arrow { transition: none; } .page--vault .v-entry__link:hover img { transform: none; } }

/* Review-only notice, outside the composition. */
.page--vault main > .v-review-notice { padding: .9rem var(--pad-x); border-top: 1px solid var(--hairline); }
.page--vault .v-review-notice p { margin: 0; font-size: .62rem; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }

/* Closing strip (unchanged from mock 02). */
.page--vault .v-next { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2rem; }
.page--vault .v-next h2 { font-size: clamp(3rem,5vw,5rem); margin-bottom: 1.5rem; }

/* Tablet: keep the reference geometry; let text-bearing boxes grow rather than clip. */
@media (max-width: 999px) {
 /* Hero 11: stacked hero below 1000px; the image grows to fill the first viewport, never below a 4:3 crop. */
 .page--vault main > .v-hero { flex-direction: column; align-items: stretch; padding: 2.5rem 0 0; min-height: calc(100vh - var(--fashion-header-height)); min-height: calc(100svh - var(--fashion-header-height)); }
 .v-hero__copy { max-width: none; padding: 0 var(--pad-x) 2rem; }
 .page--vault .v-hero__media { order: 2; position: static; width: 100%; height: auto; flex: 1 1 auto; min-height: min(75vw, 50svh); max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 52% 45%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
 .v-step { aspect-ratio: auto; min-height: 24.5vw; padding: 1.4rem 1.1rem; }
 .v-step__n { width: 3rem; }
 .page--vault .v-step__label { margin-bottom: 1rem; }
 .v-entry__text { gap: 0 .9rem; padding: 0 1rem .9rem; }
}
@media (max-width: 900px) {
 .page--vault .v-next { grid-template-columns: minmax(0,1fr); }
}

/* Mobile: hero image below the copy; panels and tiles stack. */
@media (max-width: 699px) {
 .v-hero__actions { flex-wrap: wrap; }
 .page--vault .v-hero .k-eyeline { margin-bottom: 1rem; }
 .page--vault .v-hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); margin-bottom: .9rem; }
 .page--vault .v-hero__support { margin-bottom: 1.6rem; }
 .page--vault .v-hero__support span { display: inline; }
 .page--vault main > .v-journey, .page--vault main > .v-portfolios { padding-top: 2.25rem; padding-bottom: 2.25rem; }
 .v-steps { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: 1.25rem; }
 .v-step { min-height: 15rem; }
 .page--vault .v-step__text { max-width: 48%; }
 .v-collection { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 1.25rem 0 0; }
 .v-entry, .v-entry--wide { grid-column: auto; }
 .page--vault .v-entry__link, .page--vault .v-entry--wide .v-entry__link { aspect-ratio: 311 / 249; }
 .v-entry--wide .v-entry__link img { height: 73.5%; }
 .v-directory-end { margin-top: 1.25rem; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
 .page--vault .k-cta { padding: 0 1.1rem; font-size: .64rem; gap: .85rem; }
 .page--vault .k-cta--text { padding: 0; }
 .page--vault .v-next .k-cta { max-width: 100%; }
}

/* Rhythm 12: hero -> journey -> collection. One owner per gap (no compounded margins):
   hero bottom -> journey heading = journey padding-top; heading -> panels = .v-steps margin-top;
   panels -> collection heading = collection padding-top (journey padding-bottom is 0). Section dividers off. */
.page--vault main > .v-hero { background: var(--black); }
.page--vault .v-hero__media { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 84%, transparent 100%); mask-composite: intersect; }
.page--vault main > .v-journey { border-top: 0; padding-top: clamp(5rem, 6.1vw, 6.5rem); padding-bottom: 0; }
.page--vault .v-journey .v-title { font-size: clamp(1.6rem, 3.2vw, 3.45rem); }
.page--vault .v-journey .v-steps { margin-top: clamp(1.5rem, 2.5vw, 2.5rem); }
.page--vault main > .v-portfolios { border-top: 0; padding-top: clamp(5.5rem, 7vw, 6.75rem); }
@media (max-width: 999px) {
 .page--vault .v-hero__media { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
}
@media (max-width: 699px) {
 .page--vault main > .v-journey { padding-top: 3.5rem; padding-bottom: 0; }
 .page--vault .v-journey .v-steps { margin-top: 1.5rem; }
 .page--vault main > .v-portfolios { padding-top: 4rem; }
}
/* 2026-10-22: portfolio contents and shared terms (owner: say what customers receive). */
.page--vault .v-entry__detail{display:block;margin-top:.35rem;font:400 .82rem/1.4 var(--sans);color:var(--paper);opacity:.8}
.page--vault .v-terms{padding:clamp(3rem,6vw,6rem) var(--pad-x, 5vw)}
.page--vault .v-terms ul{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;border-top:1px solid rgba(247,247,245,.25)}
.page--vault .v-terms li{padding-top:1.25rem;color:var(--paper);opacity:.85;line-height:1.55}
.page--vault .v-terms strong{display:block;font:500 1.15rem/1.3 var(--serif);margin-bottom:.4rem;opacity:1}
@media (max-width:900px){.page--vault .v-terms ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.page--vault .v-terms ul{grid-template-columns:1fr}}
.page--vault img[src*="men-m1-14252009"]{filter:grayscale(1) brightness(.6) contrast(1.1);object-position:50% 25%}
.page--vault img[src*="treat-men-injection"],.page--vault img[src*="treatment-laser-timebank"]{filter:grayscale(.35) brightness(.8)}