#velmora .vx-hero-actions{display:flex;align-items:center;justify-content:center;gap:23px;margin-top:25px}
#velmora .vx-hero .vx-hero-actions .vm-button,#velmora .vx-hero .vx-hero-actions .vx-text-link{margin-top:0}
#velmora .vx-hero .vm-copy>p.vx-hero-risk{font-size:10px;margin-top:13px;color:#969080}
#velmora .vx-assurance{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff15;border-bottom:1px solid #ffffff15;padding:27px 0;gap:25px}
#velmora .vx-assurance div{display:flex;gap:14px;align-items:center;justify-content:center}
#velmora .vx-assurance div>span{font-size:22px;color:#bda87d;font-weight:300}
#velmora .vx-assurance strong{display:block;font-size:12px;font-weight:400;color:#d9d8d1}
#velmora .vx-assurance small{display:block;font-size:10px;color:#91918a;margin-top:2px}
#velmora .vx-faq{padding:60px 0 100px;display:grid;grid-template-columns:1fr 1.2fr;gap:10%;border-top:1px solid #ffffff13}
#velmora .vx-faq h2{font-size:clamp(35px,3.7vw,55px)}
#velmora .vx-faq details{border-bottom:1px solid #ffffff19}
#velmora .vx-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:24px 0;color:#dbd9d1;font-size:16px}
#velmora .vx-faq summary::-webkit-details-marker{display:none}
#velmora .vx-faq summary:after{content:'+';font-size:22px;color:#bfa779;font-weight:300}
#velmora .vx-faq details[open] summary:after{content:'−'}
#velmora .vx-faq details p{color:#9e9b90;font-size:14px;line-height:1.75;padding-bottom:24px;max-width:520px}
#velmora .vx-faq details a{text-decoration:underline;text-underline-offset:3px;color:#d2bd91}
#velmora .vx-contact{padding-top:70px}
#velmora .vx-next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:45px auto 0;max-width:820px;list-style:none;padding:28px;border:1px solid #ffffff19;border-radius:20px;background:linear-gradient(135deg,#11110d,#060606);text-align:left}
#velmora .vx-next-steps span{display:block;color:#b9a37a;font-size:10px;letter-spacing:1px;margin-bottom:10px}
#velmora .vx-next-steps strong{display:block;font-size:14px;font-weight:400;color:#dfddd4}
#velmora .vx-next-steps p{font-size:12px;line-height:1.7;color:#9a978c;margin-top:9px}
#velmora .vx-contact .vm-copy>p.vx-contact-note{font-size:11px;color:#9a9383;margin-top:16px}
#velmora .vx-contact .vx-direct-email{display:inline-block;font-size:12px;color:#c5b490;margin-top:15px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){#velmora .vx-assurance{gap:15px}#velmora .vx-assurance div{gap:8px}#velmora .vx-assurance strong{font-size:11px}#velmora .vx-assurance small{font-size:9px}#velmora .vx-faq{gap:7%;padding-top:50px}#velmora .vx-faq summary{font-size:14px}#velmora .vx-next-steps{gap:18px;padding:24px}}
@media(max-width:540px){#velmora .vx-hero{min-height:800px}#velmora .vx-hero-actions{flex-direction:column;gap:12px}#velmora .vx-hero-actions .vx-text-link{font-size:11px;border:0}#velmora .vx-hero .vm-copy>p.vx-hero-risk{font-size:9px}#velmora .vx-assurance{grid-template-columns:1fr;gap:19px;padding:25px 0}#velmora .vx-assurance div{justify-content:flex-start;gap:16px;padding-left:15px}#velmora .vx-assurance strong{font-size:13px}#velmora .vx-assurance small{font-size:11px}#velmora .vx-faq{display:block;padding:55px 0}#velmora .vx-faq-list{margin-top:30px}#velmora .vx-faq summary{font-size:15px}#velmora .vx-next-steps{grid-template-columns:1fr;gap:22px;max-width:400px;padding:27px}#velmora .vx-next-steps li+li{padding-top:20px;border-top:1px solid #ffffff14}#velmora .vx-contact h2{font-size:49px}}

/* One V turns with scroll through the four philosophy chapters. */
#velmora main{position:relative}
#velmora main>section,#velmora main>.vx-assurance{position:relative;z-index:1}
#velmora .vx-hero{height:calc(100svh - 90px);min-height:650px;max-height:none;justify-content:center;padding:70px 6% 90px}
#velmora .vx-hero-copy{width:100%;margin-inline:auto}
#velmora .vx-journey-art{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
#velmora .vx-journey-position{position:absolute;top:0;left:0;width:clamp(250px,62vw,680px);height:clamp(250px,62vw,680px);opacity:.58;transform:translate3d(calc(50vw - 50%),calc(50vh - 50%),0);will-change:transform,opacity}
#velmora .vx-journey-position img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;will-change:transform;mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%)}
#velmora .vx-sticky-art{justify-content:flex-end;padding-bottom:50px;pointer-events:none}
#velmora .vx-chapter-status{background:#0009;border-radius:20px;padding:12px 16px;width:100%}
#velmora .vx-contact,#velmora .vm-footer{background:#000;position:relative;z-index:2}
@media(max-width:800px){
  #velmora .vx-hero{height:calc(100svh - 76px);min-height:620px;padding:55px 6% 85px}
  #velmora .vx-story-grid{display:block}
  #velmora .vx-chapter{max-width:580px;min-height:52svh}
  #velmora .vx-chapter p{max-width:460px}
  #velmora .vx-sticky-art{position:relative;top:auto;height:auto;width:100%;padding:0 0 25px}
  #velmora .vx-chapter-status{max-width:340px;margin-inline:auto}
}
@media(max-width:540px){
  #velmora .vx-hero{min-height:630px;padding-top:50px;padding-bottom:80px}
  #velmora .vx-chapter{min-height:0;padding:45px 0}
}
@media(prefers-reduced-motion:reduce){
  #velmora .vx-journey-art{position:absolute;height:calc(100svh - 90px);min-height:650px}
  #velmora .vx-journey-position{top:50%;left:50%;width:min(80vw,550px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.40;will-change:auto}
  #velmora .vx-journey-position img{transform:none!important;will-change:auto}
}
@media print{#velmora .vx-journey-art{display:none}}

/* Keep the centered copy readable over the brighter entrance sculpture. */
#velmora .vx-hero-copy h1{text-shadow:0 2px 24px #000,0 1px 5px #000}
#velmora .vx-hero-copy>p:not(.vx-pill),#velmora .vx-hero-actions .vx-text-link{text-shadow:0 1px 5px #000,0 1px 12px #000}
#velmora .vx-journey-position img{transform:perspective(1200px) rotateY(0deg);filter:brightness(1.15) contrast(1.04)}

/* Black loading stage, then a centered cinematic zoom into the homepage. */
#velmora .vx-loader{display:none}
html.vx-loading{overflow:hidden}
html.vx-loading #velmora .vx-loader{display:block;position:fixed;inset:0;z-index:1000;background:#000;overflow:hidden;color:#8c8c88}
#velmora .vx-loader-v{position:absolute;left:50%;top:47%;width:clamp(280px,34vw,480px);height:auto;aspect-ratio:1;object-fit:contain;transform:translate(-50%,-50%);transform-origin:center;filter:brightness(1.15);will-change:transform,opacity;mask-image:radial-gradient(ellipse,#000 45%,transparent 72%)}
#velmora .vx-loader-progress{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);font-size:clamp(32px,3vw,48px);font-weight:400;letter-spacing:-2px;font-variant-numeric:tabular-nums;transition:opacity .2s}
#velmora .vx-loader-progress small{font-size:1em}
#velmora .vx-loader-skip{position:absolute;right:6%;bottom:5%;border:0;background:none;padding:12px;color:#a7a59c;font-size:11px;letter-spacing:.4px;transition:opacity .2s}
#velmora .vx-loader-skip span{margin-left:10px}
html.vx-loading #velmora .vx-journey-art{visibility:hidden!important}
@media(prefers-reduced-motion:reduce){html.vx-loading{overflow:auto}html.vx-loading #velmora .vx-loader{display:none}}

#velmora .vx-chapter h2,#velmora .vx-chapter p{text-shadow:0 2px 18px #000,0 1px 4px #000}

#velmora .vx-journey-art{mask-image:linear-gradient(to bottom,#000 calc(var(--vx-end,100vh) - 100px),transparent var(--vx-end,100vh))}
@media(prefers-reduced-motion:reduce){#velmora .vx-journey-art{mask-image:none}}

/* The regulatory notice the site carries on every other page. It sits on its
   own row under the footer so the brand, nav and contact keep their layout. */
#velmora .vm-footer{flex-wrap:wrap}
#velmora .vm-footer-notice{flex:1 0 100%;order:9;margin:14px 0 0;padding-top:16px;border-top:1px solid rgba(213,181,120,.16);font-size:9px;line-height:1.8;letter-spacing:.2px;color:#8c8a83;max-width:none}
@media(max-width:800px){#velmora .vm-footer-notice{text-align:center}}

/* At desktop width the V sits directly behind the hero copy at full strength,
   which costs the small print its contrast. A soft radial scrim sits behind
   the words only — the artwork keeps its brightness everywhere else. */
@media(min-width:801px){
	#velmora .vx-hero-copy{background:radial-gradient(ellipse 70% 76% at 50% 50%,rgba(4,4,4,.88) 0%,rgba(4,4,4,.7) 44%,rgba(4,4,4,0) 78%);padding:34px 46px}
}

/* ---------- Facts still to be supplied ----------
   The home page carries the same marked placeholders as the rest of the site,
   so an unverified detail looks unverified wherever it appears. */

.vx-hero-note {
	margin-top: 14px;
	font-size: 0.88rem;
	line-height: 1.7;
	opacity: 0.72;
	max-width: 52ch;
}

.ph {
	background: rgba(212, 175, 55, 0.14);
	border-bottom: 1px dotted #d4af37;
	color: #e8d5a0;
	padding: 0 2px;
	font-style: normal;
}

/* ==========================================================================
   Document blocks
   --------------------------------------------------------------------------
   The one-page site carries the whole of the investment information, not a
   summary of it: parameter tables, the allocation split, the documentation
   steps, the risk disclosures and the questions. These are the components
   that carry it, in the home page's own gold and cream.

   All of it sits inside .vx-doc so nothing here can reach the cinematic
   sections above it.
   ========================================================================== */

#velmora .vx-doc { padding: 74px 0 84px; }
#velmora .vx-doc .vx-doc-head { max-width: 640px; margin-bottom: 42px; }
#velmora .vx-doc h2 { margin-bottom: 18px; }
#velmora .vx-doc h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--cream);
	margin-bottom: 9px;
}
#velmora .vx-doc p { color: var(--muted); line-height: 1.75; max-width: 68ch; }
#velmora .vx-doc p + p { margin-top: 16px; }
#velmora .vx-doc ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.8; max-width: 68ch; }
#velmora .vx-doc li::marker { color: var(--gold); }
#velmora .vx-doc a:not(.vm-button) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
#velmora .vx-doc strong { color: var(--cream); font-weight: 600; }

/* A row of the page, separated by a rule rather than a change of background. */
#velmora .vx-doc-row { padding-top: 46px; margin-top: 46px; border-top: 1px solid var(--line); }
#velmora .vx-doc-row:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

#velmora .vx-cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
#velmora .vx-panel {
	border: 1px solid var(--line);
	background: rgba(214, 183, 126, 0.035);
	padding: 26px 26px 24px;
	border-radius: 2px;
}

/* A labelled fact. The label is the question an investor would ask. */
#velmora .vx-facts { border-top: 1px solid var(--line); }
#velmora .vx-facts > div {
	display: grid;
	grid-template-columns: minmax(210px, 0.85fr) 1.15fr;
	gap: 4px 30px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
#velmora .vx-facts dt { color: var(--cream); }
#velmora .vx-facts dd { margin: 0; color: var(--muted); }

#velmora .vx-table-wrap { border: 1px solid var(--line); border-radius: 2px; overflow-x: auto; background: rgba(214, 183, 126, 0.03); }
#velmora .vx-doc table { width: 100%; border-collapse: collapse; }
#velmora .vx-doc caption {
	text-align: left;
	color: #9d9a93;
	font-size: 12px;
	line-height: 1.65;
	padding: 17px 22px 13px;
}
#velmora .vx-doc th, #velmora .vx-doc td {
	text-align: left;
	padding: 14px 22px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--muted);
}
#velmora .vx-doc tbody tr:last-child th, #velmora .vx-doc tbody tr:last-child td { border-bottom: 0; }
#velmora .vx-doc th[scope="row"] { color: var(--cream); font-weight: 400; }
#velmora .vx-doc thead th {
	font-size: 10px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #9d9a93;
}
#velmora .vx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The risk note. A gold rule, a label and the text — nothing to dismiss. */
#velmora .vx-risk {
	border: 1px solid var(--line);
	border-left: 2px solid var(--gold);
	background: rgba(214, 183, 126, 0.05);
	padding: 21px 25px;
	max-width: 74ch;
	border-radius: 2px;
}
#velmora .vx-risk .vm-eyebrow { margin-bottom: 9px; }
#velmora .vx-note {
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.022);
	padding: 19px 23px;
	max-width: 74ch;
	border-radius: 2px;
}

/* A fact we do not have. */
#velmora .ph {
	background: rgba(214, 183, 126, 0.16);
	border-bottom: 1px dotted var(--gold);
	color: #f0dcb4;
	padding: 0 3px;
	font-style: normal;
}

/* The allocation, labelled on the bar and again beneath, so it never depends
   on colour or on the bar being seen at all. */
#velmora .vx-alloc { max-width: 700px; }
#velmora .vx-alloc-bar { display: flex; height: 62px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
#velmora .vx-alloc-seg { display: flex; align-items: center; justify-content: center; letter-spacing: 0.6px; font-size: 13px; }
#velmora .vx-alloc-gold { flex: 0 0 80%; background: linear-gradient(105deg, #e9d09e, #cba66c); color: #17130c; font-weight: 600; }
#velmora .vx-alloc-fx { flex: 0 0 20%; background: #1a1916; color: var(--cream); }
#velmora .vx-alloc-key { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; color: var(--muted); font-size: 13px; }
#velmora .vx-alloc-key span { display: inline-flex; align-items: center; gap: 9px; }
#velmora .vx-alloc-key i { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto; }

/* The questions. Native details, so they work with the script blocked. */
#velmora .vx-qa { border-top: 1px solid var(--line); max-width: 900px; }
#velmora .vx-qa details { border-bottom: 1px solid var(--line); }
#velmora .vx-qa summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	padding: 21px 2px;
	list-style: none;
	color: var(--cream);
	font-size: 14px;
}
#velmora .vx-qa summary::-webkit-details-marker { display: none; }
#velmora .vx-qa .vx-a { padding: 0 2px 22px; }

@media (max-width: 720px) {
	#velmora .vx-doc { padding: 52px 0 58px; }
	#velmora .vx-facts > div { grid-template-columns: 1fr; gap: 3px; }
	#velmora .vx-facts dt { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: #9d9a93; }
	#velmora .vx-alloc-seg { font-size: 11px; }
	#velmora .vx-alloc-fx { justify-content: flex-start; padding-left: 9px; }
}

/* ==========================================================================
   Short-page components
   --------------------------------------------------------------------------
   The page was seventeen sections of prose and tables. It is now eight, and
   the detail that used to be scrolled past lives inside .vx-fold — open it
   and nothing has been lost, leave it closed and the page is half as long.
   ========================================================================== */

#velmora .vx-block { padding: 96px 0 104px; }
#velmora .vx-block-head { max-width: 640px; margin-bottom: 46px; }
#velmora .vx-block-head h2 { margin-bottom: 18px; }
#velmora .vx-block-head p { color: var(--muted); line-height: 1.75; max-width: 62ch; }

/* --- Bento: one idea per card, a label above it, and no card taller than
   the sentence it holds. The lead card takes two columns so the eye has
   somewhere to land before it starts scanning. */
#velmora .vx-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#velmora .vx-bento-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 1px solid rgba(255, 255, 255, 0.075);
	background: rgba(255, 255, 255, 0.022);
	border-radius: 14px;
	padding: 30px 30px 32px;
	min-height: 210px;
}
#velmora .vx-bento-lead {
	grid-column: span 2;
	background: radial-gradient(120% 140% at 88% 8%, rgba(214, 183, 126, 0.11), transparent 62%), rgba(255, 255, 255, 0.028);
	border-color: rgba(214, 183, 126, 0.22);
}
#velmora .vx-bento-card .vx-kicker { margin: 0; }
#velmora .vx-bento-card h3 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 1.24;
	letter-spacing: -0.4px;
	color: var(--cream);
}
#velmora .vx-bento-lead h3 { font-size: 36px; }
#velmora .vx-bento-card p { margin: auto 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.72; max-width: 46ch; }

/* --- Split: words on the left, the thing itself on the right. */
#velmora .vx-split { display: grid; grid-template-columns: 0.76fr 1.24fr; align-items: center; gap: 6%; padding: 86px 0 96px; }
#velmora .vx-split-copy p { color: var(--muted); line-height: 1.75; max-width: 46ch; }
#velmora .vx-split-copy .vm-button { margin-top: 30px; }
#velmora .vx-split-copy .vx-illustration-label { margin-top: 26px; font-size: 11px; }
#velmora .vx-split-stage { min-width: 0; }

/* --- Fold: a hairline, a label, and a sign that says which way it goes.
   Native <details>, so it opens with the script blocked and find-in-page
   can still reach the text inside it. */
#velmora .vx-fold {
	margin-top: 40px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	max-width: 900px;
}
#velmora .vx-fold + .vx-fold { margin-top: -1px; }
#velmora .vx-fold-full { max-width: none; }
#velmora .vx-fold > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 23px 2px;
	list-style: none;
	cursor: pointer;
	color: var(--cream);
	font-size: 14px;
	letter-spacing: 0.2px;
	transition: color 0.25s ease;
}
#velmora .vx-fold > summary::-webkit-details-marker { display: none; }
#velmora .vx-fold > summary:hover { color: #efdcb2; }
#velmora .vx-fold > summary i { position: relative; flex: 0 0 auto; width: 13px; height: 13px; }
#velmora .vx-fold > summary i::before,
#velmora .vx-fold > summary i::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--gold);
	transition: transform 0.3s ease;
}
#velmora .vx-fold > summary i::after { transform: rotate(90deg); }
#velmora .vx-fold[open] > summary i::after { transform: rotate(0deg); }
#velmora .vx-fold-body { padding: 4px 2px 34px; }
#velmora .vx-fold-body > * + * { margin-top: 24px; }
#velmora .vx-fold-body h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--cream);
	margin-bottom: 9px;
}
#velmora .vx-fold-body p { color: var(--muted); line-height: 1.75; max-width: 68ch; }
#velmora .vx-fold-body strong { color: var(--cream); font-weight: 600; }
#velmora .vx-fold-body a:not(.vm-button) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
#velmora .vx-fold-note { color: #9d9a93 !important; font-size: 12.5px; line-height: 1.7; }

/* Tables and ordered lists appear inside folds and, for the referral
   example, directly in a block. Both need the document typography that
   used to come from .vx-doc. */
#velmora .vx-block table,
#velmora .vx-fold-body table { width: 100%; border-collapse: collapse; }
#velmora .vx-block caption,
#velmora .vx-fold-body caption { text-align: left; color: #9d9a93; font-size: 12px; line-height: 1.65; padding: 17px 22px 13px; }
#velmora .vx-block th, #velmora .vx-block td,
#velmora .vx-fold-body th, #velmora .vx-fold-body td {
	text-align: left;
	padding: 14px 22px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--muted);
}
#velmora .vx-block tbody tr:last-child th, #velmora .vx-block tbody tr:last-child td,
#velmora .vx-fold-body tbody tr:last-child th, #velmora .vx-fold-body tbody tr:last-child td { border-bottom: 0; }
#velmora .vx-block th[scope="row"],
#velmora .vx-fold-body th[scope="row"] { color: var(--cream); font-weight: 400; }
#velmora .vx-table-compact { max-width: 620px; }

#velmora .vx-steps { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.8; max-width: 68ch; }
#velmora .vx-steps li { padding-left: 4px; }
#velmora .vx-steps li + li { margin-top: 12px; }
#velmora .vx-steps li::marker { color: var(--gold); font-variant-numeric: tabular-nums; }
#velmora .vx-steps strong { color: var(--cream); font-weight: 600; }

/* --- Strip: five answers to the five questions people ask first. */
#velmora .vx-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid rgba(255, 255, 255, 0.075);
	background: rgba(255, 255, 255, 0.022);
	border-radius: 14px;
	overflow: hidden;
	margin: 0;
}
#velmora .vx-strip > div { padding: 26px 24px 28px; border-left: 1px solid rgba(255, 255, 255, 0.06); }
#velmora .vx-strip > div:first-child { border-left: 0; }
#velmora .vx-strip dt { font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: #9d9a93; margin-bottom: 11px; }
#velmora .vx-strip dd { margin: 0; color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.3; }

#velmora .vx-faq .vx-fold { grid-column: 1 / -1; }

@media (max-width: 1000px) {
	#velmora .vx-bento { grid-template-columns: repeat(2, 1fr); }
	#velmora .vx-bento-lead { grid-column: span 2; }
	#velmora .vx-strip { grid-template-columns: repeat(3, 1fr); }
	#velmora .vx-strip > div:nth-child(3n+1) { border-left: 0; }
	#velmora .vx-strip > div:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, 0.06); }
}

@media (max-width: 800px) {
	#velmora .vx-split { display: block; padding: 60px 0 70px; }
	#velmora .vx-split-stage { margin-top: 38px; }
	#velmora .vx-block { padding: 64px 0 70px; }
	#velmora .vx-block-head { margin-bottom: 32px; }
}

@media (max-width: 620px) {
	#velmora .vx-bento { grid-template-columns: 1fr; }
	#velmora .vx-bento-lead { grid-column: auto; }
	#velmora .vx-bento-card { min-height: 0; padding: 24px 22px 26px; }
	#velmora .vx-bento-card h3 { font-size: 22px; }
	#velmora .vx-bento-lead h3 { font-size: 27px; }
	#velmora .vx-strip { grid-template-columns: repeat(2, 1fr); }
	#velmora .vx-strip > div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 20px 18px 22px; }
	#velmora .vx-strip > div:nth-child(-n+2) { border-top: 0; }
	#velmora .vx-strip > div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.06); }
	#velmora .vx-strip dd { font-size: 17px; }
	#velmora .vx-fold > summary { font-size: 13px; padding: 20px 2px; gap: 16px; }
	#velmora .vx-block caption, #velmora .vx-fold-body caption { padding: 14px 16px 11px; }
	#velmora .vx-block th, #velmora .vx-block td,
	#velmora .vx-fold-body th, #velmora .vx-fold-body td { padding: 12px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	#velmora .vx-fold > summary,
	#velmora .vx-fold > summary i::before,
	#velmora .vx-fold > summary i::after { transition: none; }
}

@media print {
	#velmora .vx-fold-body { display: block !important; }
	#velmora .vx-fold > summary i { display: none; }
}

/* ==========================================================================
   Footer
   --------------------------------------------------------------------------
   The regulatory text lives here rather than in a panel halfway up the page:
   a mark and the social links, a thin row of the two policy links and the
   copyright, a rule, and then the disclosures in justified columns.
   ========================================================================== */

#velmora .vm-footer {
	display: block;
	padding: 54px 6% 60px;
	min-height: 0;
	background: #000;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}
#velmora .vm-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
#velmora .vm-foot-social { display: flex; gap: 12px; }
#velmora .vm-foot-social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 9px;
	color: #cfccc3;
	transition: border-color 0.25s ease, color 0.25s ease;
}
#velmora .vm-foot-social a:hover { border-color: rgba(214, 183, 126, 0.5); color: #f0dcb4; }
#velmora .vm-foot-social svg { width: 16px; height: 16px; }

#velmora .vm-foot-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	margin-top: 46px;
	padding-bottom: 34px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px;
	color: #8c8a83;
}
#velmora .vm-foot-bar p { margin: 0; text-align: center; }
#velmora .vm-foot-bar a { color: #8c8a83; }
#velmora .vm-foot-bar a:last-child { text-align: right; }
#velmora .vm-foot-bar a:hover { color: #f0dcb4; }

#velmora .vm-foot-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px 7%;
	margin-top: 40px;
}
#velmora .vm-foot-col h2 {
	margin: 0 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.3px;
	color: #cfccc3;
	text-transform: none;
}
#velmora .vm-foot-col p {
	margin: 0;
	color: #85837c;
	font-size: 12px;
	line-height: 1.85;
	text-align: justify;
	hyphens: auto;
	max-width: none;
}
#velmora .vm-foot-col p + p { margin-top: 18px; }
#velmora .vm-foot-col .ph { background: rgba(214, 183, 126, 0.13); color: #e4cfa6; hyphens: manual; }

@media (max-width: 800px) {
	#velmora .vm-footer { padding: 40px 6% 48px; }
	#velmora .vm-foot-bar { grid-template-columns: 1fr; gap: 12px; text-align: center; margin-top: 34px; padding-bottom: 28px; }
	#velmora .vm-foot-bar a, #velmora .vm-foot-bar a:last-child { text-align: center; }
	#velmora .vm-foot-cols { grid-template-columns: 1fr; gap: 34px; margin-top: 32px; }
	#velmora .vm-foot-col p { text-align: left; hyphens: manual; }
}

/* The questions section styles every summary inside it, which used to put a
   second plus sign in the middle of a fold's row. */
#velmora .vx-faq .vx-fold > summary::after { content: none; }

/* ==========================================================================
   Referral flow, and the portal preview
   --------------------------------------------------------------------------
   The reward is three steps rather than a table, and the portal preview is a
   copy of the real dashboard built in markup rather than a screenshot, so it
   stays sharp and reflows on a phone. Its figures are examples and the page
   says so directly beneath it.
   ========================================================================== */

#velmora .vx-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
#velmora .vx-flow-step {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.075);
	background: rgba(255, 255, 255, 0.022);
	border-radius: 14px;
	padding: 30px 30px 32px;
}
#velmora .vx-flow-step::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -14px;
	width: 14px;
	height: 1px;
	background: rgba(214, 183, 126, 0.32);
}
#velmora .vx-flow-end::after { display: none; }
#velmora .vx-flow-num {
	display: block;
	margin-bottom: 16px;
	font-size: 11px;
	letter-spacing: 1.8px;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}
#velmora .vx-flow-step h3 {
	margin: 0 0 12px;
	/* The display rule sets -2.7px for 50px headings. At 21px that swallows
	   the spaces between words. */
	letter-spacing: -0.3px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.3;
	color: var(--cream);
}
#velmora .vx-flow-step p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.72; }
#velmora .vx-flow-figure {
	margin: 0 0 12px !important;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 33px !important;
	line-height: 1.1 !important;
	letter-spacing: -1px;
	color: var(--cream) !important;
	font-variant-numeric: tabular-nums;
}
#velmora .vx-flow-gold { color: #edd5a6 !important; }
#velmora .vx-flow-note { margin-top: 22px; color: #8c8a83; font-size: 12px; line-height: 1.7; max-width: 70ch; }

/* --- The portal preview --------------------------------------------------
   Monochrome, because the real dashboard is: the accent variable is set to
   white there, and a gold preview would be a picture of a product that does
   not exist. */
#velmora .vp-frame {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 13px;
	overflow: hidden;
	background: #0a0a0a;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
	--vp-fg: #f2f0ea;
	--vp-dim: #8f8d87;
	--vp-line: rgba(255, 255, 255, 0.075);
}
#velmora .vp-chrome {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--vp-line);
	background: rgba(255, 255, 255, 0.025);
}
#velmora .vp-chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.17); }
#velmora .vp-chrome b {
	margin-left: 12px;
	padding: 4px 14px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--vp-dim);
	font-weight: 400;
	font-size: 9.5px;
	letter-spacing: 0.3px;
}
#velmora .vp-body { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
#velmora .vp-side {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 10px;
	border-right: 1px solid var(--vp-line);
	font-size: 9.5px;
	color: var(--vp-dim);
}
#velmora .vp-side span { padding: 7px 9px; border-radius: 6px; }
#velmora .vp-mark {
	margin-bottom: 12px;
	color: var(--vp-fg);
	font-family: Georgia, serif;
	font-size: 14px;
	letter-spacing: 1px;
}
#velmora .vp-side .is-on { background: rgba(255, 255, 255, 0.07); color: var(--vp-fg); }
#velmora .vp-main { padding: 16px; display: grid; gap: 12px; min-width: 0; }
#velmora .vp-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#velmora .vp-kpi {
	border: 1px solid var(--vp-line);
	border-radius: 9px;
	padding: 12px 13px 13px;
	background: rgba(255, 255, 255, 0.015);
	min-width: 0;
}
#velmora .vp-kpi span { display: block; font-size: 8px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--vp-dim); }
#velmora .vp-kpi strong {
	display: block;
	margin: 9px 0 5px;
	font-family: Georgia, serif;
	font-weight: 400;
	font-size: 19px;
	color: var(--vp-fg);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#velmora .vp-kpi small { font-size: 8.5px; color: var(--vp-dim); }
#velmora .vp-up { color: #9fd3a8 !important; }
#velmora .vp-split { display: grid; grid-template-columns: 1fr; gap: 12px; }
#velmora .vp-card {
	border: 1px solid var(--vp-line);
	border-radius: 9px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.015);
	min-width: 0;
}
#velmora .vp-card h4 {
	margin: 0 0 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--vp-fg);
}
#velmora .vp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#velmora .vp-card-head h4 { margin: 0 0 12px; }
#velmora .vp-pills { display: flex; gap: 4px; margin-bottom: 12px; }
#velmora .vp-pills b, #velmora .vp-pills span {
	padding: 3px 9px;
	border-radius: 20px;
	font-size: 8.5px;
	font-weight: 400;
	color: var(--vp-dim);
}
#velmora .vp-pills b { background: rgba(255, 255, 255, 0.08); color: var(--vp-fg); }
#velmora .vp-chart { display: block; width: 100%; height: 96px; }
#velmora .vp-months { display: flex; justify-content: space-between; margin-top: 8px; font-size: 8px; color: var(--vp-dim); }
#velmora .vp-alloc { display: flex; align-items: center; gap: 22px; }
#velmora .vp-alloc svg { width: 104px; height: 104px; flex: 0 0 auto; }
#velmora .vp-alloc-rows { display: grid; gap: 12px; flex: 1 1 auto; min-width: 0; font-size: 10px; color: var(--vp-dim); }
#velmora .vp-alloc-rows > div { display: flex; align-items: center; gap: 7px; }
#velmora .vp-alloc-rows i { width: 8px; height: 8px; border-radius: 2px; background: #efece4; flex: 0 0 auto; }
#velmora .vp-alloc-rows .vp-sq2 { background: #5d5f66; }
#velmora .vp-alloc-rows span { flex: 1 1 auto; }
#velmora .vp-alloc-rows b { color: var(--vp-fg); font-weight: 400; font-variant-numeric: tabular-nums; }
#velmora .vp-rows > div {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid var(--vp-line);
	font-size: 9.5px;
	color: var(--vp-dim);
}
#velmora .vp-rows b { color: var(--vp-fg); font-weight: 400; font-variant-numeric: tabular-nums; }
#velmora .vx-split-stage .vx-illustration-label { margin-top: 16px; font-size: 11px; text-align: center; }

@media (max-width: 1000px) {
	#velmora .vx-flow { grid-template-columns: 1fr; }
	#velmora .vx-flow-step::after { top: auto; right: auto; bottom: -14px; left: 50%; width: 1px; height: 14px; }
}

@media (max-width: 760px) {
	#velmora .vp-body { grid-template-columns: 1fr; }
	#velmora .vp-side { flex-direction: row; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--vp-line); padding: 10px; }
	#velmora .vp-mark { margin: 0 6px 0 0; align-self: center; }
	/* The sidebar becomes a tab row on a phone. The last item would be cut in
	   half by the frame edge, so it is dropped rather than clipped. */
	#velmora .vp-side > span:last-child { display: none; }
	#velmora .vp-kpis { grid-template-columns: repeat(2, 1fr); }
	#velmora .vp-split { grid-template-columns: 1fr; }
	#velmora .vp-alloc svg { width: 88px; height: 88px; }
	#velmora .vx-flow-step { padding: 24px 22px 26px; }
	#velmora .vx-flow-figure { font-size: 28px !important; }
}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   Two pieces of behaviour, both scrubbed rather than fired: the 80% counts
   against the scroll position, so scrolling back up runs it backwards, and
   the portal preview follows the pointer. Neither runs under
   prefers-reduced-motion, and the preview's tilt needs a real pointer.
   ========================================================================== */

#velmora .vx-target-number {
	background-size: 230% 100%;
	background-position: 100% 0;
	will-change: transform, background-position;
}

#velmora .vx-split-stage { perspective: 1500px; }
#velmora .vp-frame {
	position: relative;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.55s ease;
	will-change: transform;
}
#velmora .vp-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.45s ease;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 26%), rgba(255, 255, 255, 0.085), transparent 64%);
}
#velmora .vp-frame.is-hot {
	box-shadow: 0 44px 92px rgba(0, 0, 0, 0.66);
	border-color: rgba(255, 255, 255, 0.18);
}
#velmora .vp-frame.is-hot::after { opacity: 1; }

#velmora .vp-kpi {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.5s ease, border-color 0.5s ease;
}
#velmora .vp-frame.is-hot .vp-kpi {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.038);
	border-color: rgba(255, 255, 255, 0.14);
}
#velmora .vp-frame.is-hot .vp-kpi:nth-child(2) { transition-delay: 0.05s; }
#velmora .vp-frame.is-hot .vp-kpi:nth-child(3) { transition-delay: 0.1s; }
#velmora .vp-frame.is-hot .vp-kpi:nth-child(4) { transition-delay: 0.15s; }

#velmora .vp-side span, #velmora .vp-card, #velmora .vp-rows > div {
	transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}
#velmora .vp-frame.is-hot .vp-side .is-on { background: rgba(255, 255, 255, 0.13); }
#velmora .vp-frame.is-hot .vp-card { border-color: rgba(255, 255, 255, 0.11); }
#velmora .vp-frame.is-hot .vp-rows > div:first-of-type { color: #c9c7c1; }
#velmora .vp-line { stroke-linecap: round; }

/* A pointer is the only thing that can hover. On a phone the preview simply
   sits there, and the chart still draws itself when it is scrolled to. */
@media (hover: none), (pointer: coarse) {
	#velmora .vp-frame { transition: none; }
	#velmora .vp-frame::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	#velmora .vx-target-number { background-position: 0 0; transform: none !important; }
	#velmora .vp-frame,
	#velmora .vp-kpi,
	#velmora .vp-side span,
	#velmora .vp-card,
	#velmora .vp-rows > div { transition: none; }
	#velmora .vp-frame::after { display: none; }
	#velmora .vp-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   Tagline
   --------------------------------------------------------------------------
   Two rules and three words under the hero heading, and the same words locked
   to the mark in the footer. Gold, because it is the only line on the page
   allowed to be a claim about the firm rather than about the investment.
   ========================================================================== */

#velmora .vx-tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 26px 0 30px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(17px, 1.5vw, 21px);
	letter-spacing: 0.3px;
	color: #e7cfa1;
}
#velmora .vx-tagline span { flex: 0 0 auto; }
#velmora .vx-tagline i {
	flex: 0 1 74px;
	height: 1px;
	min-width: 26px;
	background: linear-gradient(90deg, transparent, rgba(214, 183, 126, 0.62));
}
#velmora .vx-tagline i:last-child { background: linear-gradient(90deg, rgba(214, 183, 126, 0.62), transparent); }

#velmora .vm-foot-brand { display: flex; flex-direction: column; gap: 11px; }
#velmora .vm-foot-tagline {
	margin: 0;
	padding-left: 2px;
	font-size: 10px;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: #a08c63;
}

@media (max-width: 620px) {
	#velmora .vx-tagline { gap: 13px; margin: 20px 0 24px; }
	#velmora .vx-tagline i { flex: 0 1 44px; min-width: 18px; }
	#velmora .vm-foot-tagline { font-size: 9px; letter-spacing: 2.8px; }
}

/* The hero styles every paragraph it contains with
   `#velmora .vx-hero .vm-copy > p:not(.vx-pill)`, which outranks a plain
   class. The tagline has to match that weight to keep its own colour and
   size, so the selector is written out in full rather than reached for with
   !important. */
#velmora .vx-hero .vm-copy > p.vx-tagline:not(.vx-pill) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 26px 0 30px;
	max-width: none;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.3;
	letter-spacing: 0.3px;
	color: #e7cfa1;
}

@media (max-width: 620px) {
	#velmora .vx-hero .vm-copy > p.vx-tagline:not(.vx-pill) { gap: 13px; margin: 20px 0 24px; }
}

/* ==========================================================================
   Enquiry dialog
   --------------------------------------------------------------------------
   A native <dialog>: Escape closes it and the browser handles the focus trap.
   The trigger stays a mailto link underneath, which is what a visitor with
   the script blocked gets instead.
   ========================================================================== */

dialog.vx-enquiry {
	width: min(520px, calc(100vw - 32px));
	max-height: min(86vh, 760px);
	padding: 38px 38px 34px;
	border: 1px solid rgba(214, 183, 126, 0.26);
	border-radius: 16px;
	background: #0b0b0a;
	color: #f4eee1;
	box-shadow: 0 40px 110px rgba(0, 0, 0, 0.7);
	overflow: auto;
}
dialog.vx-enquiry::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }
dialog.vx-enquiry .vx-pill { margin: 0 0 18px; }
dialog.vx-enquiry h2 {
	margin: 0 0 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 33px);
	line-height: 1.18;
	letter-spacing: -0.6px;
	color: #f4eee1;
}
dialog.vx-enquiry .vx-enquiry-intro { margin: 0 0 26px; color: #b9b7b1; font-size: 13.5px; line-height: 1.7; }
dialog.vx-enquiry .vx-enquiry-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	background: none;
	color: #b9b7b1;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}
dialog.vx-enquiry .vx-enquiry-close:hover { border-color: rgba(214, 183, 126, 0.55); color: #f0dcb4; }
dialog.vx-enquiry .vx-field { margin: 0 0 18px; }
dialog.vx-enquiry label {
	display: block;
	margin-bottom: 8px;
	font-size: 10px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #9d9a93;
}
dialog.vx-enquiry label small { letter-spacing: 1.4px; text-transform: none; color: #77746d; }
dialog.vx-enquiry input,
dialog.vx-enquiry textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	color: #f4eee1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.25s ease, background 0.25s ease;
}
dialog.vx-enquiry textarea { resize: vertical; min-height: 96px; }
dialog.vx-enquiry input:focus,
dialog.vx-enquiry textarea:focus {
	outline: none;
	border-color: rgba(214, 183, 126, 0.6);
	background: rgba(255, 255, 255, 0.05);
}
dialog.vx-enquiry .vx-enquiry-hint { margin: 0 0 18px; color: #77746d; font-size: 11.5px; line-height: 1.65; }
dialog.vx-enquiry .vx-enquiry-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
dialog.vx-enquiry .vx-enquiry-note { margin: 0 0 16px; font-size: 13px; line-height: 1.6; }
dialog.vx-enquiry .vx-enquiry-note:empty { margin: 0; }
dialog.vx-enquiry .vx-enquiry-note.is-bad { color: #e9b0a4; }
dialog.vx-enquiry .vx-enquiry-note.is-good { color: #a9d4b0; }
dialog.vx-enquiry button[type="submit"] { width: 100%; justify-content: center; }
dialog.vx-enquiry button[type="submit"][disabled] { opacity: 0.55; cursor: default; }

@media (max-width: 520px) {
	dialog.vx-enquiry { padding: 30px 22px 26px; }
	dialog.vx-enquiry .vx-enquiry-close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	dialog.vx-enquiry .vx-enquiry-close,
	dialog.vx-enquiry input,
	dialog.vx-enquiry textarea { transition: none; }
}

/* --- The dialog, with motion -------------------------------------------
   It appeared instantly and reported itself with a line of green text.
   Now it arrives, the fields stagger in behind it, the button shows it is
   working, and a send replaces the form with a panel rather than a sentence. */

dialog.vx-enquiry { opacity: 0; transform: translateY(14px) scale(0.985); }
dialog.vx-enquiry[open] { animation: vx-enq-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
dialog.vx-enquiry.is-closing { animation: vx-enq-out 0.22s ease forwards; }
@keyframes vx-enq-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vx-enq-out {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to   { opacity: 0; transform: translateY(8px) scale(0.99); }
}
dialog.vx-enquiry[open]::backdrop { animation: vx-enq-fade 0.42s ease forwards; }
@keyframes vx-enq-fade { from { opacity: 0; } to { opacity: 1; } }

dialog.vx-enquiry[open] .vx-pill,
dialog.vx-enquiry[open] h2,
dialog.vx-enquiry[open] .vx-enquiry-intro,
dialog.vx-enquiry[open] .vx-field,
dialog.vx-enquiry[open] .vx-enquiry-hint,
dialog.vx-enquiry[open] button[type="submit"] {
	animation: vx-enq-row 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes vx-enq-row {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: translateY(0); }
}
dialog.vx-enquiry[open] .vx-pill              { animation-delay: 0.06s; }
dialog.vx-enquiry[open] h2                    { animation-delay: 0.10s; }
dialog.vx-enquiry[open] .vx-enquiry-intro     { animation-delay: 0.14s; }
dialog.vx-enquiry[open] .vx-field:nth-of-type(1) { animation-delay: 0.18s; }
dialog.vx-enquiry[open] .vx-field:nth-of-type(2) { animation-delay: 0.22s; }
dialog.vx-enquiry[open] .vx-field:nth-of-type(3) { animation-delay: 0.26s; }
dialog.vx-enquiry[open] .vx-field:nth-of-type(4) { animation-delay: 0.30s; }
dialog.vx-enquiry[open] .vx-enquiry-hint      { animation-delay: 0.34s; }
dialog.vx-enquiry[open] button[type="submit"] { animation-delay: 0.38s; }

/* A field that has been typed in keeps its label lifted and lit. */
dialog.vx-enquiry .vx-field { position: relative; transition: opacity 0.3s ease; }
dialog.vx-enquiry label { transition: color 0.25s ease; }
dialog.vx-enquiry .vx-field:focus-within label { color: #e7cfa1; }
dialog.vx-enquiry input:focus,
dialog.vx-enquiry textarea:focus { box-shadow: 0 0 0 3px rgba(214, 183, 126, 0.12); }
dialog.vx-enquiry .vx-field.is-wrong input,
dialog.vx-enquiry .vx-field.is-wrong textarea { border-color: rgba(233, 176, 164, 0.6); }

/* Working. */
dialog.vx-enquiry button[type="submit"] { position: relative; transition: opacity 0.25s ease; }
dialog.vx-enquiry.is-sending button[type="submit"] { color: transparent; }
dialog.vx-enquiry.is-sending button[type="submit"] span { opacity: 0; }
dialog.vx-enquiry.is-sending button[type="submit"]::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(20, 17, 12, 0.3);
	border-top-color: #14110c;
	border-radius: 50%;
	animation: vx-spin 0.7s linear infinite;
}
@keyframes vx-spin { to { transform: rotate(360deg); } }

/* Sent. The form steps aside for a panel that says so properly. */
dialog.vx-enquiry .vx-enquiry-done { display: none; text-align: center; padding: 8px 0 6px; }
dialog.vx-enquiry.is-done .vx-enquiry-form,
dialog.vx-enquiry.is-done .vx-enquiry-intro,
dialog.vx-enquiry.is-done .vx-pill,
dialog.vx-enquiry.is-done h2 { display: none; }
dialog.vx-enquiry.is-done .vx-enquiry-done { display: block; animation: vx-enq-row 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
dialog.vx-enquiry .vx-enquiry-tick {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 6px auto 24px;
	border: 1px solid rgba(169, 212, 176, 0.45);
	border-radius: 50%;
	color: #a9d4b0;
}
dialog.vx-enquiry .vx-enquiry-tick svg { width: 26px; height: 26px; }
dialog.vx-enquiry .vx-enquiry-tick path {
	stroke-dasharray: 32;
	stroke-dashoffset: 32;
	animation: vx-tick 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}
@keyframes vx-tick { to { stroke-dashoffset: 0; } }
dialog.vx-enquiry .vx-enquiry-done h3 {
	margin: 0 0 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 25px;
	color: #f4eee1;
}
dialog.vx-enquiry .vx-enquiry-done p { margin: 0 auto 26px; max-width: 34ch; color: #b9b7b1; font-size: 13.5px; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
	dialog.vx-enquiry,
	dialog.vx-enquiry[open],
	dialog.vx-enquiry[open]::backdrop,
	dialog.vx-enquiry.is-closing,
	dialog.vx-enquiry[open] .vx-pill,
	dialog.vx-enquiry[open] h2,
	dialog.vx-enquiry[open] .vx-enquiry-intro,
	dialog.vx-enquiry[open] .vx-field,
	dialog.vx-enquiry[open] .vx-enquiry-hint,
	dialog.vx-enquiry[open] button[type="submit"],
	dialog.vx-enquiry.is-done .vx-enquiry-done,
	dialog.vx-enquiry .vx-enquiry-tick path { animation: none; }
	dialog.vx-enquiry { opacity: 1; transform: none; }
	dialog.vx-enquiry .vx-enquiry-tick path { stroke-dashoffset: 0; }
	dialog.vx-enquiry.is-sending button[type="submit"]::after { animation: none; }
}

/* ==========================================================================
   Dialog spacing
   --------------------------------------------------------------------------
   hp-base.css carries `#velmora p { margin: 0 }`. The dialog sits inside
   #velmora, so every margin set on a <p> in it — the fields, the intro, the
   hint, the note — lost to that one ID and the form collapsed into a single
   column of touching rows. With no gap, the focus ring on one input landed on
   the label of the next.

   These are the same values as above, written with an ID so they actually
   apply. Anything added to this dialog later needs the same prefix.
   ========================================================================== */

#velmora dialog.vx-enquiry .vx-field { margin: 0 0 20px; }
#velmora dialog.vx-enquiry .vx-enquiry-intro { margin: 0 0 28px; }
#velmora dialog.vx-enquiry .vx-enquiry-hint { margin: 2px 0 20px; }
#velmora dialog.vx-enquiry .vx-enquiry-note { margin: 0 0 16px; }
#velmora dialog.vx-enquiry .vx-enquiry-note:empty { margin: 0; }
#velmora dialog.vx-enquiry .vx-pill { margin: 0 0 18px; }
#velmora dialog.vx-enquiry .vx-enquiry-done p { margin: 0 auto 26px; }

/* A ring that reaches into the row below is worse than no ring. Two pixels,
   inside the 20px gap, with the border doing most of the work. */
#velmora dialog.vx-enquiry input:focus,
#velmora dialog.vx-enquiry textarea:focus {
	outline: none;
	border-color: rgba(214, 183, 126, 0.72);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 0 0 2px rgba(214, 183, 126, 0.14);
}
#velmora dialog.vx-enquiry .vx-field.is-wrong input,
#velmora dialog.vx-enquiry .vx-field.is-wrong textarea {
	border-color: rgba(233, 176, 164, 0.7);
	box-shadow: 0 0 0 2px rgba(233, 176, 164, 0.12);
}

/* The heading is one line now, so it does not need to be the size of the
   hero's. */
#velmora dialog.vx-enquiry h2 {
	margin: 0 0 14px;
	font-size: clamp(25px, 2.6vw, 30px);
	line-height: 1.14;
}
#velmora dialog.vx-enquiry .vx-enquiry-done h3 { margin: 0 0 12px; }