/*
Theme Name:   Holomedia Salient Child
Theme URI:    https://holomedia.ai/
Description:  Holomedia AI design layer for Salient. Site-wide colours, type and buttons, plus hm-* section classes for WPBakery rows and columns.
Author:       compgovpartners
Template:     salient
Version: 2.14.1
Text Domain:  holomedia-salient-child
*/

/* =====================================================================
   1. TOKENS
   Change a value here and it changes everywhere.
   ===================================================================== */
:root {
	--hm-ink-0: #07080f;   /* page background */
	--hm-ink-1: #0e1120;   /* alternate band */
	--hm-ink-2: #141830;   /* cards */
	--hm-line:  #262b4a;   /* hairlines and borders */
	--hm-fg:    #eef0fa;   /* headings */
	--hm-fg-2:  #a7accb;   /* body text */
	--hm-fg-3:  #6f7598;   /* captions */
	--hm-violet:#6b5cff;   /* brand glow */
	--hm-teal:  #2fe0c4;   /* accent */
	--hm-teal-hover: #5ff0d8;
	--hm-teal-ink:   #05231e;

	--hm-f-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--hm-f-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--hm-f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--hm-r: 14px;
	--hm-band-pad: clamp(64px, 9vw, 112px);
}

/* =====================================================================
   2. GLOBAL (applies to every page)
   Heading sizes are left to Salient on legacy pages; only family,
   colour and tracking change globally. Sizes are set inside .hm-band.
   ===================================================================== */
html body,
html body .container-wrap,
html body .container-wrap .main-content {
	background-color: var(--hm-ink-0);
}
html body {
	color: var(--hm-fg-2);
	font-family: var(--hm-f-body);
	-webkit-font-smoothing: antialiased;
}
body p, body li, body .wpb_text_column {
	font-family: var(--hm-f-body);
}
body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--hm-f-display);
	color: var(--hm-fg);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
body a { color: var(--hm-teal); }
body a:hover { color: var(--hm-teal-hover); }
body ::selection { background: var(--hm-teal); color: var(--hm-teal-ink); }
body a:focus-visible,
body button:focus-visible { outline: 2px solid var(--hm-teal); outline-offset: 3px; }

/* =====================================================================
   3. BUTTONS
   Use in a Text Block:  <a class="hm-btn hm-btn--primary" href="...">Label</a>
   ===================================================================== */
body .hm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
body a.hm-btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--hm-f-body); font-weight: 600; font-size: 16px; line-height: 1.2;
	padding: 14px 22px; border-radius: 999px; text-decoration: none;
	border: 1px solid transparent;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
body a.hm-btn--primary { background: var(--hm-teal); color: var(--hm-teal-ink); }
body a.hm-btn--primary:hover { background: var(--hm-teal-hover); color: var(--hm-teal-ink); transform: translateY(-1px); }
body a.hm-btn--ghost { border-color: var(--hm-line); color: var(--hm-fg); }
body a.hm-btn--ghost:hover { border-color: var(--hm-fg-3); color: var(--hm-fg); }
body a.hm-btn--primary::after { content: "\2192"; font-size: 15px; }

/* =====================================================================
   4. SECTION BANDS  (WPBakery Row → Extra class name)
   hm-band            standard section
   hm-band hm-band--alt   alternate (slightly lighter, bordered)
   ===================================================================== */
body .wpb_row.hm-band {
	padding-top: var(--hm-band-pad) !important;
	padding-bottom: var(--hm-band-pad) !important;
	margin-bottom: 0 !important;
}
body .wpb_row.hm-band--alt { border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
body .wpb_row.hm-band--alt > .row-bg-wrap .row-bg,
body .wpb_row.hm-band--alt { background-color: var(--hm-ink-1); }

.hm-band, .hm-band p { font-size: 17px; line-height: 1.6; color: var(--hm-fg-2); }
.hm-band h1 { font-size: clamp(38px, 5.6vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 22px; }
.hm-band h1 em { font-style: normal; color: var(--hm-teal); }
.hm-band h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; font-weight: 800; margin-bottom: 14px; }
.hm-band h3 { font-size: 21px; line-height: 1.25; font-weight: 700; margin-bottom: 10px; }

/* Text helpers (use inside Text Blocks) */
.hm-band .hm-eyebrow,
.hm-eyebrow {
	font-family: var(--hm-f-mono); font-size: 12px; font-weight: 600; line-height: 1.4;
	letter-spacing: .16em; text-transform: uppercase; color: var(--hm-teal);
	margin-bottom: 14px;
}
.hm-band .hm-lead { font-size: 18px; max-width: 62ch; }
.hm-band .hm-small { font-size: 14px; color: var(--hm-fg-3); }
.hm-sec-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }

/* =====================================================================
   5. HERO  (Row: hm-band hm-hero)
   ===================================================================== */
body .wpb_row.hm-hero { overflow: hidden; }
body .wpb_row.hm-hero::before {
	content: ""; display: block !important; position: absolute; top: 0; left: 0; width: 100% !important; height: 100%;
	background: radial-gradient(ellipse 42% 58% at 56% 12%, rgba(107,92,255,.24), transparent 100%);
	pointer-events: none; z-index: 2;
}
/* Salient's row background layer sits at z-index 1: glow and grid at 2, content at 3 */
body .wpb_row.hm-hero > .row_col_wrap_12,
body .wpb_row.hm-hero > .col { position: relative; z-index: 3; }
.hm-hero .hm-lead { font-size: 19px; }

/* Hero visual (Raw HTML element) */
.hm-frame {
	position: relative; aspect-ratio: 4 / 5; max-width: 100%;
	border-radius: 22px; border: 1px solid var(--hm-line); overflow: hidden;
	background: linear-gradient(180deg, #1b1f3d 0%, #0d1022 100%);
	box-shadow: 0 30px 80px -30px rgba(107,92,255,.45);
}
.hm-frame svg.hm-figure { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 82%; }
.hm-frame .hm-chip, .hm-frame .hm-lang {
	position: absolute; top: 16px; font-family: var(--hm-f-mono); font-size: 11px; font-weight: 600;
	letter-spacing: .12em; line-height: 1; background: rgba(7,8,15,.6); border: 1px solid var(--hm-line);
	padding: 7px 10px; border-radius: 999px;
}
.hm-frame .hm-chip { left: 16px; color: var(--hm-fg); display: flex; align-items: center; gap: 8px; }
.hm-frame .hm-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--hm-teal); box-shadow: 0 0 10px var(--hm-teal); }
.hm-frame .hm-lang { right: 16px; color: var(--hm-fg-2); letter-spacing: .06em; }
.hm-track {
	position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 10px;
	background: rgba(7,8,15,.78); border: 1px solid var(--hm-line); border-radius: 12px; padding: 12px 14px;
}
.hm-track .hm-caption { color: var(--hm-fg); font-size: 15px; font-weight: 500; margin: 0; padding: 0; }
.hm-visemes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.hm-viseme { display: grid; gap: 4px; justify-items: center; }
.hm-viseme b {
	display: block; width: 100%; height: 22px; border-radius: 4px;
	background: linear-gradient(180deg, var(--hm-teal), rgba(47,224,196,.15));
	transform-origin: bottom; transform: scaleY(var(--h, .6));
	animation: hm-talk 1.6s ease-in-out infinite;
}
.hm-viseme span { font-family: var(--hm-f-mono); font-size: 10px; color: var(--hm-fg-3); }
@keyframes hm-talk { 0%,100% { transform: scaleY(var(--h, .6)); } 50% { transform: scaleY(calc(var(--h, .6) * .35)); } }

/* =====================================================================
   6. STATS BAR  (Row: hm-stats, four 1/4 columns)
   ===================================================================== */
body .wpb_row.hm-stats {
	margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
	border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line);
}
body .wpb_row.hm-stats > .row-bg-wrap .row-bg { background-color: var(--hm-ink-1); }
.hm-stats .wpb_column { padding-top: 28px; padding-bottom: 28px; margin-bottom: 0 !important; }
.hm-stats .wpb_column + .wpb_column { border-left: 1px solid var(--hm-line); }
.hm-stats .wpb_column .vc_column-inner { padding-left: 20px; }
.hm-stats .wpb_column:first-child .vc_column-inner { padding-left: 0; }
.hm-stat-num {
	display: block; font-family: var(--hm-f-display); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1;
	font-weight: 800; color: var(--hm-fg); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hm-stat-label { display: block; font-size: 14px; color: var(--hm-fg-3); line-height: 1.4; margin-top: 4px; }

/* =====================================================================
   7. CARDS  (Column: hm-card, optionally hm-card--featured)
   Used for avatar types, flow steps, and any boxed item.
   ===================================================================== */
.wpb_column.hm-card > .vc_column-inner {
	background: var(--hm-ink-2); border: 1px solid var(--hm-line); border-radius: var(--hm-r);
	padding: 28px !important; height: 100%;
}
.wpb_column.hm-card--featured > .vc_column-inner {
	border-color: rgba(47,224,196,.45);
	background: linear-gradient(180deg, rgba(47,224,196,.07), var(--hm-ink-2) 60%);
}
.hm-tag {
	display: inline-block; font-family: var(--hm-f-mono); font-size: 11px; font-weight: 600; line-height: 1;
	letter-spacing: .1em; text-transform: uppercase; color: var(--hm-teal);
	border: 1px solid rgba(47,224,196,.35); padding: 6px 10px; border-radius: 999px; margin-bottom: 16px;
}
.hm-card-foot {
	margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--hm-line);
	font-size: 14px !important; color: var(--hm-fg-3) !important;
}
.hm-card-foot strong { color: var(--hm-fg-2); }

/* Icon heading: add class "hm-ih hm-ih--NAME" to an h3 in a Text Block.
   Names: wave, people, hand, mic, data, brain, person (more in section 24) */
.hm-band h3.hm-ih::before {
	content: ""; display: block; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 10px;
	border: 1px solid rgba(107,92,255,.35);
	background: rgba(107,92,255,.14) var(--hm-ih) center / 20px 20px no-repeat;
}
.hm-ih--wave { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h1M6.5%208v8M10%205v14M13.5%208v8M17%2010v4M20.5%2012h.5%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--people { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M2.5%2019c.6-3.4%202.8-5%205.5-5s4.9%201.6%205.5%205M13.5%2015.2c1-.8%202.2-1.2%203.5-1.2%202.3%200%204%201.4%204.5%204%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--hand { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2013V5.5a1.5%201.5%200%200%201%203%200V11M11%2010V4.5a1.5%201.5%200%200%201%203%200V11M14%2010.5V6a1.5%201.5%200%200%201%203%200v7c0%204-2.5%207-6%207-2.6%200-4-1.3-5.4-3.4L4%2013.6a1.5%201.5%200%200%201%202.4-1.8L8%2013.5%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--mic { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5.5%2011a6.5%206.5%200%200%200%2013%200M12%2017.5V21%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--data { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226%22%20rx%3D%227%22%20ry%3D%222.8%22%2F%3E%3Cpath%20d%3D%22M5%206v12c0%201.5%203.1%202.8%207%202.8s7-1.3%207-2.8V6M5%2012c0%201.5%203.1%202.8%207%202.8s7-1.3%207-2.8%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--brain { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M12%204v16M4%2012h16M7%207c2%202%202%208%200%2010M17%207c-2%202-2%208%200%2010%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--person { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4.5%2020.5c.8-4%203.8-6%207.5-6s6.7%202%207.5%206%22%2F%3E%3C%2Fsvg%3E"); }

/* =====================================================================
   8. FEATURE GRID  (Inner rows: hm-features; columns: hm-feature)
   Hairline-divided 2x2 grid.
   ===================================================================== */
.hm-features { margin-bottom: 0 !important; }
.hm-features .wpb_column.hm-feature { margin-bottom: 0 !important; }
.hm-features .wpb_column.hm-feature > .vc_column-inner {
	padding: clamp(24px, 3vw, 36px) !important; border: 1px solid var(--hm-line); height: 100%;
}
.hm-features + .hm-features .wpb_column.hm-feature > .vc_column-inner { border-top: 0; }
.hm-features .wpb_column.hm-feature + .wpb_column.hm-feature > .vc_column-inner { border-left: 0; }
.hm-features--top .wpb_column:first-child > .vc_column-inner { border-top-left-radius: var(--hm-r); }
.hm-features--top .wpb_column:last-child > .vc_column-inner { border-top-right-radius: var(--hm-r); }
.hm-features--bottom .wpb_column:first-child > .vc_column-inner { border-bottom-left-radius: var(--hm-r); }
.hm-features--bottom .wpb_column:last-child > .vc_column-inner { border-bottom-right-radius: var(--hm-r); }

/* =====================================================================
   9. PROCESS FLOW  (Inner row: hm-flow; columns: hm-card hm-step)
   Arrows between steps are drawn automatically.
   ===================================================================== */
.hm-flow-panel > .vc_column-inner {
	border: 1px solid var(--hm-line); border-radius: 18px; padding: clamp(22px, 3.5vw, 40px) !important;
	background: radial-gradient(ellipse at 40% 0%, rgba(107,92,255,.22), transparent 60%), var(--hm-ink-0);
}
.hm-flow { margin-bottom: 0 !important; }
.hm-flow .wpb_column.hm-step { position: relative; }
.hm-flow .wpb_column.hm-step > .vc_column-inner { padding: 22px !important; position: relative; overflow: visible; }
.hm-flow .wpb_column.hm-step > .vc_column-inner::before {
	content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
	border-radius: var(--hm-r) var(--hm-r) 0 0;
	background: linear-gradient(90deg, var(--hm-violet), var(--hm-teal));
}
.hm-band .hm-step-num { position: absolute; top: 34px; right: 22px; margin: 0; font-family: var(--hm-f-mono); font-size: 12px; font-weight: 600; color: var(--hm-teal); letter-spacing: .12em; line-height: 1; }
.hm-step p { font-size: 14.5px !important; line-height: 1.55; }
.hm-step h3 { font-size: 19px !important; }
@media (min-width: 1000px) {
	.hm-flow .wpb_column.hm-step:not(:last-child)::after {
		content: "\2192"; position: absolute; top: 50%; right: -0.9em; transform: translateY(-50%);
		font-size: 22px; color: var(--hm-fg-3); z-index: 2;
	}
}
.hm-flow-foot { margin-top: 22px !important; font-size: 13.5px !important; color: var(--hm-fg-3) !important; }

/* =====================================================================
   10. LIST COLUMNS  (Inner row: hm-list; columns: hm-list-item)
   Top-ruled items for use cases, integrations, etc.
   ===================================================================== */
.hm-list .wpb_column.hm-list-item > .vc_column-inner { border-top: 1px solid var(--hm-line); padding-top: 22px !important; }
.hm-list .hm-list-item h3 { font-size: 19px; }
.hm-list .hm-list-item p { font-size: 15.5px; }

/* =====================================================================
   11. LANGUAGE PILLS  (Text Block: <div class="hm-pills"><span>…</span></div>)
   ===================================================================== */
.hm-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-pills span {
	font-size: 17px; color: var(--hm-fg); padding: 10px 16px; border-radius: 999px;
	border: 1px solid var(--hm-line); background: var(--hm-ink-2); line-height: 1.3;
}
.hm-pills span:nth-child(3n) { border-color: rgba(47,224,196,.35); }
.hm-pills span.hm-more { color: var(--hm-teal); font-family: var(--hm-f-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; }

/* =====================================================================
   12. FAQ  (Salient Toggle Panels inside a column with class hm-faq)
   ===================================================================== */
.hm-faq .toggles { border-top: 1px solid var(--hm-line); }
.hm-faq .toggle {
	background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--hm-line) !important;
	border-radius: 0 !important; margin: 0 !important; box-shadow: none !important;
}
.hm-faq .toggle > .toggle-title a,
.hm-faq .toggle h3 a {
	font-family: var(--hm-f-display) !important; font-weight: 700 !important; font-size: 19px !important;
	color: var(--hm-fg) !important; padding: 22px 40px 22px 0 !important; background: transparent !important;
	letter-spacing: -0.01em;
}
.hm-faq .toggle i, .hm-faq .toggle .toggle-icon { color: var(--hm-teal) !important; border-color: var(--hm-teal) !important; }
.hm-faq .toggle > div { padding: 0 0 24px !important; background: transparent !important; }
.hm-faq .toggle > div p { max-width: 62ch; }

/* =====================================================================
   13. CALL TO ACTION BOX  (Column: hm-cta-box)
   ===================================================================== */
.wpb_column.hm-cta-box > .vc_column-inner {
	border: 1px solid var(--hm-line); border-radius: 22px; padding: clamp(36px, 6vw, 72px) !important;
	background:
		radial-gradient(ellipse at 85% 20%, rgba(47,224,196,.18), transparent 55%),
		radial-gradient(ellipse at 10% 100%, rgba(107,92,255,.3), transparent 60%),
		var(--hm-ink-1);
}
.hm-cta-box h2 { font-size: clamp(32px, 4.6vw, 52px) !important; line-height: 1.05; max-width: 16ch; }

/* =====================================================================
   14. RESPONSIVE
   ===================================================================== */
@media (max-width: 999px) {
	.hm-stats .wpb_column { width: 50% !important; float: left; }
	.hm-stats .wpb_column + .wpb_column { border-left: 0; }
	.hm-stats .wpb_column:nth-child(even) .vc_column-inner { padding-left: 16px; border-left: 1px solid var(--hm-line); }
	.hm-stats .wpb_column:nth-child(odd) .vc_column-inner { padding-left: 0; }
	.hm-features .wpb_column.hm-feature + .wpb_column.hm-feature > .vc_column-inner { border-left: 1px solid var(--hm-line); border-top: 0; }
	.hm-features .wpb_column > .vc_column-inner { border-radius: 0 !important; }
	.hm-flow .wpb_column.hm-step, .hm-cards .wpb_column.hm-card { margin-bottom: 16px !important; }
}
@media (max-width: 690px) {
	.hm-stats .wpb_column { width: 100% !important; }
	.hm-stats .wpb_column .vc_column-inner { padding-left: 0 !important; border-left: 0 !important; }
	.hm-stats .wpb_column + .wpb_column { border-top: 1px solid var(--hm-line); }
	.hm-stats .wpb_column { padding-top: 20px; padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.hm-viseme b { animation: none; }
	body a.hm-btn { transition: none; }
}

/* =====================================================================
   15. STAGING FIXES (v1.1) — overrides for how Salient renders these
   ===================================================================== */

/* Buttons: Salient was forcing white text on the teal button */
body a.hm-btn.hm-btn--primary,
body a.hm-btn.hm-btn--primary:hover { color: var(--hm-teal-ink) !important; }
body a.hm-btn.hm-btn--ghost,
body a.hm-btn.hm-btn--ghost:hover { color: var(--hm-fg) !important; }

/* Hero accent words: keep them in Manrope (Salient set italics to a serif) */
body .hm-band h1 em, body .hm-band h2 em {
	font-family: var(--hm-f-display) !important; font-style: normal; font-weight: inherit; letter-spacing: inherit;
}

/* Bold text: inherit the surrounding font instead of Salient's Public Sans */
body strong, body b { font-family: inherit; }

/* Logo text */
body #header-outer #logo,
body #header-outer #logo:hover {
	font-family: var(--hm-f-display) !important; font-weight: 800 !important;
	font-size: 22px !important; letter-spacing: 0.04em !important; color: var(--hm-fg) !important;
}

/* Section heading spacing (Salient was zeroing the gap below headings) */
body .wpb_text_column.hm-sec-head { margin-bottom: clamp(36px, 5vw, 56px) !important; }
body .hm-band .wpb_text_column p:last-child { padding-bottom: 0; margin-bottom: 0; }

/* Full-width rules on alternate bands and the stats bar (were inset to the content width) */
body .wpb_row.hm-band--alt, body .wpb_row.hm-stats { border-top: 0 !important; border-bottom: 0 !important; }
body .wpb_row.hm-band--alt > .row-bg-wrap,
body .wpb_row.hm-stats > .row-bg-wrap { border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); box-sizing: border-box; }

/* Feature grid: remove the gutter so the cells share one hairline grid */
body .hm-features > .row_col_wrap_12_inner { margin-left: 0 !important; margin-right: 0 !important; }
body .hm-features .wpb_column.hm-feature { padding-left: 0 !important; padding-right: 0 !important; }

/* Card tag sits closer to the title */
body .hm-card .wpb_text_column p:first-child { padding-bottom: 6px !important; margin-bottom: 0 !important; }

/* Flow: show the arrows (Salient's clearfix was hiding them) and space the list below */
@media (min-width: 1000px) {
	body .hm-flow .wpb_column.hm-step:not(:last-child)::after {
		visibility: visible !important; display: block !important; clear: none !important;
		width: auto !important; height: auto !important; line-height: 1 !important; overflow: visible !important;
		right: -12px !important;
	}
}
body .wpb_column.hm-flow-panel { margin-bottom: 40px !important; }

/* Language section: centre the pills against the heading */
body #languages > .row_col_wrap_12 { align-items: center; }

/* FAQ: closed answers were peeking through */
body .hm-faq .toggle > div { padding: 0 !important; }
body .hm-faq .toggle .inner-toggle-wrap { padding: 0 0 24px !important; }

/* Footer */
body #footer-outer h1, body #footer-outer h2, body #footer-outer h3,
body #footer-outer h4, body #footer-outer .widget h4 { color: var(--hm-fg) !important; }
body #footer-outer strong {
	font-family: var(--hm-f-mono); font-size: 12px; letter-spacing: .14em; color: var(--hm-teal);
}
body #footer-outer a { color: var(--hm-fg-2); text-decoration: none; }
body #footer-outer a:hover { color: var(--hm-teal); }

/* Header phone button: beats Salient's per-menu-item colours */
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a,
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a .menu-title-text,
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a i { color: var(--hm-fg) !important; }
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a::before {
	background-color: transparent !important; border: 1px solid var(--hm-line) !important; opacity: 1 !important;
}
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a::after {
	background-image: linear-gradient(90deg, var(--hm-violet), var(--hm-teal)) !important;
}
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a:hover,
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a:hover .menu-title-text,
#header-outer#header-outer #top#top nav .sf-menu .menu-item[class*="menu-item-btn-style-button"] > a:hover i { color: var(--hm-teal-ink) !important; }

/* Wrapped card titles: tighter line spacing than Salient's default */
body .hm-band h3 { line-height: 1.25 !important; }

/* Copyright bar matches the page instead of pure black */
body #footer-outer #copyright { background-color: var(--hm-ink-0) !important; border-top: 1px solid var(--hm-line) !important; }
body #footer-outer #copyright p { color: var(--hm-fg-3) !important; }

/* =====================================================================
   16. FORMS (Contact Form 7) + CONTACT PAGE  (v1.2)
   Wrap a CF7 form in a column with class hm-form-card.
   ===================================================================== */

/* Transparent header with dark text (used on some pages): keep it light */
#header-outer#header-outer.transparent #top #logo,
#header-outer#header-outer.transparent #top #logo:hover { color: var(--hm-fg) !important; }

/* Form card */
.wpb_column.hm-form-card > .vc_column-inner { padding: clamp(24px, 3.5vw, 44px) !important; }
.hm-band h2.hm-form-title { font-size: clamp(24px, 2.4vw, 30px) !important; line-height: 1.15 !important; margin-bottom: 6px; }
.hm-form-alt { margin-top: 22px !important; padding-top: 18px !important; border-top: 1px solid var(--hm-line); font-size: 15px !important; color: var(--hm-fg-3) !important; }
.hm-form-alt a { color: var(--hm-fg) !important; text-decoration: none; border-bottom: 1px solid var(--hm-line); }
.hm-form-alt a:hover { color: var(--hm-teal) !important; border-color: var(--hm-teal); }

/* Layout */
.hm-form { display: grid; gap: 18px; margin-top: 20px; }
.hm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 690px) { .hm-field-row { grid-template-columns: 1fr; } }
.hm-field, .hm-legend {
	display: grid; gap: 8px; font-family: var(--hm-f-body); font-size: 14px; font-weight: 500;
	color: var(--hm-fg-2); line-height: 1.3; margin: 0;
}
.hm-label { display: block; }
.hm-req { color: var(--hm-teal); }
body .hm-form-card .wpcf7 form.init .wpcf7-response-output,
body .hm-form-card .wpcf7 form.resetting .wpcf7-response-output,
body .hm-form-card .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.hm-form .wpcf7-form-control-wrap { display: block; }

/* Fields (beat Salient's form styling) */
body .hm-form input[type="text"], body .hm-form input[type="email"], body .hm-form input[type="tel"],
body .hm-form select, body .hm-form textarea {
	width: 100% !important; box-sizing: border-box; margin: 0 !important;
	background: var(--hm-ink-0) !important; color: var(--hm-fg) !important;
	border: 1px solid var(--hm-line) !important; border-radius: 10px !important; box-shadow: none !important;
	padding: 13px 14px !important; font-family: var(--hm-f-body) !important; font-size: 16px !important; line-height: 1.4 !important;
	transition: border-color .15s ease;
}
body .hm-form textarea { min-height: 120px; resize: vertical; }
body .hm-form select {
	appearance: none; -webkit-appearance: none; padding-right: 42px !important; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232fe0c4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 16px center !important;
}
body .hm-form input::placeholder, body .hm-form textarea::placeholder { color: var(--hm-fg-3); opacity: 1; }
body .hm-form input:focus, body .hm-form select:focus, body .hm-form textarea:focus {
	outline: none !important; border-color: var(--hm-teal) !important; box-shadow: 0 0 0 3px rgba(47,224,196,.15) !important;
}

/* Radio choices as pills */
.hm-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-form .wpcf7-radio .wpcf7-list-item { margin: 0 !important; }
.hm-form .wpcf7-radio label { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.hm-form .wpcf7-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hm-form .wpcf7-radio .wpcf7-list-item-label {
	display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hm-line);
	background: var(--hm-ink-0); color: var(--hm-fg-2); font-size: 15px; font-weight: 500; line-height: 1.2;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.hm-form .wpcf7-radio input:checked + .wpcf7-list-item-label {
	border-color: var(--hm-teal); color: var(--hm-fg); background: rgba(47,224,196,.1);
}
.hm-form .wpcf7-radio input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--hm-teal); outline-offset: 2px; }

/* Submit = primary button */
body .hm-form .hm-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body .hm-form input[type="submit"].wpcf7-submit {
	background: var(--hm-teal) !important; color: var(--hm-teal-ink) !important; border: 0 !important;
	border-radius: 999px !important; padding: 15px 28px !important; margin: 0 !important;
	font-family: var(--hm-f-body) !important; font-size: 16px !important; font-weight: 600 !important;
	letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; box-shadow: none !important;
	transition: background-color .15s ease, transform .15s ease;
}
body .hm-form input[type="submit"].wpcf7-submit:hover { background: var(--hm-teal-hover) !important; transform: translateY(-1px); }
body .hm-form .wpcf7-spinner { background-color: var(--hm-fg-3); }

/* Validation and response messages */
body .hm-form-card .wpcf7-not-valid-tip { color: #ff8a8a; font-size: 13px; margin-top: 6px; }
body .hm-form-card .wpcf7-not-valid { border-color: #ff8a8a !important; }
body .hm-form-card .wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0 !important; padding: 12px 16px !important; border-radius: 10px;
	border: 1px solid var(--hm-line) !important; color: var(--hm-fg); font-size: 15px;
}
body .hm-form-card .wpcf7 form.sent .wpcf7-response-output { border-color: var(--hm-teal) !important; background: rgba(47,224,196,.08); }
body .hm-form-card .wpcf7 form.invalid .wpcf7-response-output,
body .hm-form-card .wpcf7 form.failed .wpcf7-response-output { border-color: #ff8a8a !important; }

/* Numbered steps (ordered list in a Text Block: <ol class="hm-steps">) */
.hm-band ol.hm-steps { list-style: none; margin: 36px 0 0 !important; padding: 0 !important; counter-reset: hm-step; display: grid; gap: 0; }
.hm-band ol.hm-steps li {
	counter-increment: hm-step; position: relative; padding: 18px 0 18px 52px !important; margin: 0 !important;
	border-top: 1px solid var(--hm-line); color: var(--hm-fg-2); font-size: 15.5px; line-height: 1.55; list-style: none;
}
.hm-band ol.hm-steps li:last-child { border-bottom: 1px solid var(--hm-line); }
.hm-band ol.hm-steps li::before {
	content: counter(hm-step, decimal-leading-zero); position: absolute; left: 0; top: 20px;
	font-family: var(--hm-f-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--hm-teal);
}
.hm-band ol.hm-steps li strong { display: block; color: var(--hm-fg); font-family: var(--hm-f-display); font-weight: 700; font-size: 17px; margin-bottom: 4px; }

/* Contact hero: align columns to the top (the form is taller than the copy) */
body .hm-contact-hero > .row_col_wrap_12 { align-items: flex-start !important; }

/* Photo in a Text Block */
.hm-photo { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--hm-line); }
body .hm-hq > .row_col_wrap_12 { align-items: center; }

/* =====================================================================
   17. DROPDOWNS + SCROLLED HEADER  (v1.3)
   ===================================================================== */
/* Salient swaps <select> for a "select2" dropdown: style it to match the fields.
   Classes are repeated on purpose to outrank Salient's fancy-form rules. */
body .hm-form .select2-container { width: 100% !important; }
body .hm-form .select2-container.select2-container.select2-container--default .select2-selection--single,
body .hm-form .select2-container.select2-container.select2-container--default .select2-selection--single:hover,
body .hm-form .select2-container.select2-container.select2-container--default.select2-container--open .select2-selection--single {
	height: auto !important; min-height: 50px; display: flex; align-items: center;
	background: var(--hm-ink-0) !important; border: 1px solid var(--hm-line) !important; border-radius: 10px !important;
	box-shadow: none !important; transition: border-color .15s ease;
}
body .hm-form .select2-container.select2-container.select2-container--default .select2-selection__rendered {
	padding: 13px 44px 13px 14px !important; line-height: 1.4 !important; color: var(--hm-fg) !important;
	font-family: var(--hm-f-body) !important; font-size: 16px !important; font-weight: 400 !important;
}
body .hm-form .select2-container.select2-container.select2-container--default .select2-selection__arrow { height: 100% !important; right: 14px !important; top: 0 !important; }
body .hm-form .select2-container.select2-container.select2-container--default .select2-selection__arrow b { border-color: var(--hm-teal) transparent transparent transparent !important; }
body .hm-form .select2-container.select2-container.select2-container--default.select2-container--open .select2-selection__arrow b { border-color: transparent transparent var(--hm-teal) transparent !important; }
body .hm-form .select2-container.select2-container.select2-container--default.select2-container--open .select2-selection--single,
body .hm-form .select2-container.select2-container.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--hm-teal) !important; box-shadow: 0 0 0 3px rgba(47,224,196,.15) !important;
}
/* The open list (Salient attaches it to the page body) */
body .select2-container.select2-container.select2-container--default.select2-container--open .select2-dropdown {
	background: var(--hm-ink-2) !important; border: 1px solid var(--hm-line) !important; border-radius: 10px !important;
	overflow: hidden; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6) !important; margin-top: 6px;
}
body .select2-container.select2-container.select2-container--default.select2-container--open .select2-results__option {
	padding: 11px 14px !important; color: var(--hm-fg-2) !important; background: transparent !important;
	font-family: var(--hm-f-body) !important; font-size: 15px !important; font-weight: 400 !important;
}
body .select2-container.select2-container.select2-container--default.select2-container--open .select2-results__option[aria-selected="true"],
body .select2-container.select2-container.select2-container--default.select2-container--open .select2-results__option--selected {
	color: var(--hm-teal) !important; background: transparent !important;
}
body .select2-container.select2-container.select2-container--default.select2-container--open .select2-results__option.select2-results__option--highlighted,
body .select2-container.select2-container.select2-container--default.select2-container--open .select2-results__option.select2-results__option--highlighted[aria-selected] {
	background: rgba(47,224,196,.12) !important; color: var(--hm-fg) !important;
}
body .hm-form .select2-container.select2-container.select2-container--default .select2-selection--single { padding: 0 !important; min-height: 0 !important; }

/* Pages set to a permanently transparent header: give it a background once scrolled,
   so the logo and menu don't sit on top of the page content */
#header-outer#header-outer.transparent.scrolled-down {
	background-color: rgba(7,8,15,.92) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--hm-line) !important;
}

/* =====================================================================
   18. HERO VIDEO  (v1.4)  — tall avatar video with "Play with sound"
   Raw HTML element: <div class="hm-video" data-hm-video> … </div>
   ===================================================================== */
.hm-video {
	position: relative; aspect-ratio: 9 / 16;
	height: min(68vh, 720px); max-width: 100%; margin-left: auto; margin-right: auto;
	border-radius: 22px; overflow: hidden; border: 1px solid var(--hm-line);
	background: #fff;
	box-shadow: 0 30px 80px -30px rgba(107,92,255,.5);
}
.hm-video__media { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.hm-video__name {
	position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px;
	font-family: var(--hm-f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--hm-fg); background: rgba(7,8,15,.78); border: 1px solid var(--hm-line);
	padding: 7px 11px; border-radius: 999px; line-height: 1; pointer-events: none;
	transition: opacity .2s ease;
}
.hm-video__name i { width: 7px; height: 7px; border-radius: 50%; background: var(--hm-teal); box-shadow: 0 0 10px var(--hm-teal); }
body .hm-video .hm-video__sound {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
	font-family: var(--hm-f-body); font-size: 15px; font-weight: 600; line-height: 1;
	color: var(--hm-teal-ink); background: var(--hm-teal); border: 0; border-radius: 999px;
	padding: 14px 20px; min-height: 44px; cursor: pointer;
	box-shadow: 0 10px 30px -8px rgba(7,8,15,.55);
	transition: background-color .15s ease, transform .15s ease;
}
body .hm-video .hm-video__sound:hover { background: var(--hm-teal-hover); transform: translateX(-50%) translateY(-1px); }
body .hm-video .hm-video__sound:focus-visible { outline: 2px solid var(--hm-fg); outline-offset: 3px; }
body .hm-video .hm-video__sound[hidden] { display: none !important; }
.hm-video.is-playing .hm-video__name { opacity: 0; }

/* Hero row: centre the two columns vertically against the taller video */
body .hm-hero > .row_col_wrap_12 { align-items: center; }

@media (max-width: 999px) {
	.hm-video { height: auto; width: min(100%, 420px); margin: 32px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
	body .hm-video .hm-video__sound, .hm-video__name { transition: none; }
}

/* =====================================================================
   19. AVATAR MARQUEE  (v1.6) — full-width row of avatar stills that
   scrolls slowly; pauses on hover; still for reduced-motion visitors.
   Raw HTML: <div class="hm-marquee"><div class="hm-marquee__track">
               <figure class="hm-marquee__item"><img …></figure> × 2 sets
   ===================================================================== */
.hm-marquee {
	position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 8px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hm-marquee__track {
	display: flex; gap: 20px; width: max-content; padding-right: 20px;
	animation: hm-marquee 90s linear infinite;
}
.hm-marquee:hover .hm-marquee__track { animation-play-state: paused; }
.hm-marquee__item {
	flex: none; width: 200px; height: 356px; margin: 0 !important; padding: 0;
	border-radius: 14px; overflow: hidden; border: 1px solid var(--hm-line); background: #c9cacd;
}
body .hm-marquee__item img {
	display: block; width: 100%; height: 100%; margin: 0 !important; max-width: none;
	object-fit: cover; object-position: top; border-radius: 0;
}
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 690px) {
	.hm-marquee__item { width: 150px; height: 267px; }
	.hm-marquee__track { gap: 14px; padding-right: 14px; animation-duration: 70s; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-marquee { overflow-x: auto; }
	.hm-marquee__track { animation: none; }
}
html { overflow-x: clip; }

/* =====================================================================
   20. HERO VIDEO FULLSCREEN  (v1.7) — show the whole tall video in
   fullscreen instead of cropping it to the screen width
   ===================================================================== */
.hm-video__media:fullscreen,
.hm-video__media:-webkit-full-screen {
	object-fit: contain !important; width: 100% !important; height: 100% !important; background: #000 !important;
}
.hm-video:fullscreen, .hm-video:-webkit-full-screen { border-radius: 0; border: 0; background: #000; }

/* =====================================================================
   21. SPACING UNDER A SEE-THROUGH HEADER + ROOMIER FORM  (v1.8)
   On pages where Salient's header sits over the content, the first
   (hero) band gets the header's height added to its top padding.
   ===================================================================== */
body:has(#header-outer[data-transparent-header="true"]) .wpb_row.hm-hero {
	padding-top: calc(var(--hm-band-pad) + 88px) !important;
}
@media (max-width: 999px) {
	body:has(#header-outer[data-transparent-header="true"]) .wpb_row.hm-hero {
		padding-top: calc(var(--hm-band-pad) + 64px) !important;
	}
}
.wpb_column.hm-form-card > .vc_column-inner { padding: clamp(28px, 4vw, 52px) !important; }
.hm-form { gap: 22px; margin-top: 26px; }
.hm-field-row { gap: 20px; }
.hm-field, .hm-legend { gap: 10px; }

/* =====================================================================
   22. PAGE PARTS ADDED FOR AI WAYFINDER  (v1.9)
   ===================================================================== */

/* Placeholder box for a video or image still to come (Text Block):
   <div class="hm-placeholder hm-placeholder--tall"><span>Label</span></div> */
.hm-placeholder {
	display: flex; align-items: center; justify-content: center; text-align: center;
	border-radius: 22px; border: 1px dashed #3a4170; padding: 24px; box-sizing: border-box;
	background: repeating-linear-gradient(135deg, var(--hm-ink-2) 0 14px, #171b36 14px 28px);
	aspect-ratio: 16 / 9; width: 100%;
}
.hm-placeholder--tall { aspect-ratio: 9 / 16; width: auto; height: min(68vh, 720px); max-width: 100%; margin-left: auto; margin-right: auto; }
.hm-placeholder span {
	font-family: var(--hm-f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: #8a90b4; line-height: 1.6;
}
@media (max-width: 999px) { .hm-placeholder--tall { height: auto; width: min(100%, 420px); margin: 32px auto 0; } }

/* Results grid: <div class="hm-metrics"><div><span class="hm-stat-num">…</span><span class="hm-stat-label">…</span></div>…</div> */
.hm-metrics {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--hm-line); border-left: 1px solid var(--hm-line);
}
.hm-metrics > div { padding: 24px 22px; border-right: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
.hm-metrics .hm-stat-num { font-size: clamp(26px, 3vw, 36px); }
@media (max-width: 999px) { .hm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Photo strip: <div class="hm-photos"><img …><img …><img …></div> */
.hm-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; }
body .hm-photos img {
	display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover;
	border-radius: 14px; border: 1px solid var(--hm-line); margin: 0 !important;
}
@media (max-width: 690px) { .hm-photos { grid-template-columns: 1fr; } }

/* Small source / footnote line */
.hm-band p.hm-source { font-size: 13px; color: #8a90b4; margin-top: 14px; }

/* Checklist inside cards: <ul class="hm-checklist"><li>…</li></ul> */
.hm-band ul.hm-checklist { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.hm-band ul.hm-checklist li {
	position: relative; padding-left: 26px !important; margin: 0 !important; list-style: none;
	font-size: 15.5px; line-height: 1.5; color: var(--hm-fg-2);
}
.hm-band ul.hm-checklist li::before {
	content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px;
	border-left: 2px solid var(--hm-teal); border-bottom: 2px solid var(--hm-teal); transform: rotate(-45deg);
}
.hm-band .hm-big { font-family: var(--hm-f-display); font-weight: 800; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; color: var(--hm-fg); letter-spacing: -0.03em; margin: 4px 0 8px; }

/* Embedded video (WPBakery Video Player) inside a column with class hm-embed */
.hm-embed .wpb_video_widget .wpb_wrapper, .hm-embed iframe { border-radius: 14px; overflow: hidden; }
.hm-embed .wpb_video_widget { margin-bottom: 0 !important; }

/* =====================================================================
   23. CASE STUDIES: FILTERS, CARD GRID AND POP-UP  (v2.1)
   ===================================================================== */
body .wpb_row.hm-cs-hero { padding-bottom: 36px !important; }
body .wpb_row.hm-cs-section { padding-top: 24px !important; }

.hm-cs-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
body .hm-chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
	border-radius: 999px; border: 1px solid var(--hm-line); background: transparent; color: var(--hm-fg-2);
	font-family: var(--hm-f-body); font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
body .hm-chip span { font-family: var(--hm-f-mono); font-size: 12px; opacity: .7; }
body .hm-chip:hover { border-color: var(--hm-fg-3); color: var(--hm-fg); }
body .hm-chip[aria-pressed="true"] { border-color: var(--hm-teal); color: var(--hm-fg); background: rgba(47,224,196,.1); }
body .hm-chip:focus-visible { outline: 2px solid var(--hm-teal); outline-offset: 3px; }

/* Grid: one inner row holding every card column */
body .hm-cs-grid > .row_col_wrap_12_inner {
	display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 !important;
}
body .hm-cs-grid .wpb_column.hm-cs-card { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer; }
body .hm-cs-grid .wpb_column.hm-cs-card[hidden] { display: none !important; }
.hm-cs-card > .vc_column-inner {
	height: 100%; padding: 0 !important; overflow: hidden; border-radius: 14px;
	background: var(--hm-ink-2); border: 1px solid var(--hm-line);
	transition: border-color .2s ease, transform .2s ease;
}
.hm-cs-card:hover > .vc_column-inner { border-color: #3a4170; transform: translateY(-3px); }
.hm-cs-card:focus-visible { outline: none; }
.hm-cs-card:focus-visible > .vc_column-inner { outline: 2px solid var(--hm-teal); outline-offset: 3px; }
.hm-cs-card > .vc_column-inner > .wpb_wrapper,
.hm-cs-card .wpb_text_column:not(.hm-cs-detail),
.hm-cs-card .wpb_text_column:not(.hm-cs-detail) > .wpb_wrapper { height: 100%; display: flex; flex-direction: column; margin: 0 !important; }
.hm-cs-card .wpb_text_column:not(.hm-cs-detail) { flex: 1; }
body .hm-cs-card img.hm-cs-thumb {
	display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover;
	margin: 0 !important; border-radius: 0; border-bottom: 1px solid var(--hm-line);
}
.hm-cs-text { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 20px 20px 22px; }
.hm-cs-text .hm-tag { margin: 0; align-self: flex-start; }
.hm-band .hm-cs-text h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.hm-band .hm-cs-text p { margin: 0; padding: 0; }
.hm-band .hm-cs-text .hm-cs-teaser { font-size: 15px; line-height: 1.55; }
.hm-cs-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 6px !important; padding-top: 14px !important; border-top: 1px solid var(--hm-line); }
.hm-cs-stat .hm-stat-num { display: inline; font-size: 23px; }
.hm-cs-stat .hm-stat-label { display: inline; margin: 0; font-size: 13px; }
.hm-band .hm-cs-text .hm-cs-more { margin-top: auto; padding-top: 12px; font-size: 15px; font-weight: 600; color: var(--hm-teal); }
.hm-cs-card .hm-cs-detail { display: none !important; }
@media (max-width: 1199px) { body .hm-cs-grid > .row_col_wrap_12_inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 999px) { body .hm-cs-grid > .row_col_wrap_12_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 690px) { body .hm-cs-grid > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); } }

/* Pop-up */
html.hm-cs-open { overflow: hidden; scrollbar-gutter: stable; }
body .hm-cs-grid .wpb_column.hm-cs-card { will-change: transform, opacity; }
dialog.hm-cs-dialog {
	width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
	padding: 0; margin: auto; border: 1px solid var(--hm-line); border-radius: 18px; overflow: auto;
	background: var(--hm-ink-1); color: var(--hm-fg-2); box-shadow: 0 40px 100px -30px rgba(0,0,0,.8);
}
dialog.hm-cs-dialog::backdrop { background: rgba(4,5,10,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hm-cs-dialog__media img { display: block; width: 100%; aspect-ratio: 21 / 9; height: auto; object-fit: cover; margin: 0; border-bottom: 1px solid var(--hm-line); }
body .hm-cs-dialog__close {
	position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--hm-line); background: rgba(7,8,15,.8); color: var(--hm-fg); cursor: pointer;
	display: grid; place-items: center; padding: 0;
}
body .hm-cs-dialog__close:hover { border-color: var(--hm-teal); color: var(--hm-teal); }
.hm-cs-dialog__body { padding: 36px 40px 40px; }
.hm-cs-dialog__body h2 { font-size: clamp(28px, 3.4vw, 38px) !important; margin-bottom: 14px; }
.hm-cs-dialog__body h3 { font-size: 18px !important; margin: 28px 0 12px; }
.hm-cs-dialog__body .hm-lead { margin-bottom: 24px; }
.hm-cs-dialog__body .hm-metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 8px; }
.hm-cs-dialog__body .hm-quote {
	margin: 28px 0 0; padding: 22px 24px; border: 1px solid var(--hm-line); border-radius: 14px; background: var(--hm-ink-2);
	font-size: 16px; line-height: 1.6; color: var(--hm-fg); quotes: none;
}
.hm-cs-dialog__body .hm-quote cite { display: block; margin-top: 12px; font-size: 13px; font-style: normal; color: #8a90b4; }
.hm-cs-dialog__body .hm-actions { margin-top: 32px; }
@media (max-width: 690px) { .hm-cs-dialog__body { padding: 28px 22px 32px; } }
@media (prefers-reduced-motion: reduce) { .hm-cs-card > .vc_column-inner { transition: none; } .hm-cs-card:hover > .vc_column-inner { transform: none; } }

/* =====================================================================
   24. PLATFORM PAGE  (v2.2): extra icons, principles strip, card placeholders
   ===================================================================== */
.hm-ih--create { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%203l1.9%205.1L18%2010l-5.1%201.9L11%2017l-1.9-5.1L4%2010l5.1-1.9z%22%2F%3E%3Cpath%20d%3D%22M18.5%2015l.8%202.2%202.2.8-2.2.8-.8%202.2-.8-2.2-2.2-.8%202.2-.8z%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--deploy { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015V4M7.5%208.5L12%204l4.5%204.5%22%2F%3E%3Cpath%20d%3D%22M5%2014v4a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-4%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--manage { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h9M19%207h1M4%2017h3M13%2017h7%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%227%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2217%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--optimize { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16M7%2016v-4M12%2016V8M17%2016V5%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--layers { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5z%22%2F%3E%3Cpath%20d%3D%22M3%2012.5l9%205%209-5%22%2F%3E%3Cpath%20d%3D%22M3%2017l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--cloud { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2018.5a4.5%204.5%200%200%201-.7-8.95A6%206%200%200%201%2017.8%209a4.75%204.75%200%200%201%20.2%209.5z%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--pulse { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l2.5-6%205%2012%202.5-6h4%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--refresh { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19.5%2010A8%208%200%200%200%205.2%207M4.5%203.5V7.5h4%22%2F%3E%3Cpath%20d%3D%22M4.5%2014a8%208%200%200%200%2014.3%203M19.5%2020.5v-4h-4%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--monitor { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8.5%2020h7M12%2016v4%22%2F%3E%3C%2Fsvg%3E"); }
.hm-ih--shield { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v5.5c0%204.3-2.9%207.7-7%209.5-4.1-1.8-7-5.2-7-9.5V6z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }

/* Five-word strip: <p class="hm-principles"><span>Attract</span>…</p> */
.hm-band .hm-principles {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; margin: 0 0 28px !important; padding: 0;
	font-family: var(--hm-f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
	font-size: clamp(30px, 4.2vw, 52px); color: var(--hm-fg);
}
.hm-principles span:not(:last-child)::after { content: "\00B7"; margin: 0 .28em; color: var(--hm-fg-3); font-weight: 500; }
.hm-principles span:last-child {
	background: linear-gradient(90deg, var(--hm-violet), var(--hm-teal)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Placeholder at the top of a card */
.hm-card .hm-placeholder--card { aspect-ratio: 16 / 10; border-radius: 12px; margin: 0 0 20px; padding: 16px; }
.hm-sec-link { margin-top: 18px !important; font-weight: 600; }
.hm-band .hm-sec-link a { color: var(--hm-teal); text-decoration: none; }
.hm-band .hm-sec-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
body .wpb_row.hm-band:has(.hm-principles) { padding-bottom: 0 !important; }
/* List items: keep trailing links aligned along the bottom */
.hm-list .wpb_column.hm-list-item > .vc_column-inner > .wpb_wrapper,
.hm-list .hm-list-item .wpb_text_column, .hm-list .hm-list-item .wpb_text_column > .wpb_wrapper { height: 100%; display: flex; flex-direction: column; }
.hm-list .hm-list-item .wpb_text_column { flex: 1; margin-bottom: 0 !important; }
.hm-list .hm-list-item .hm-sec-link { margin-top: auto !important; padding-top: 14px; }

/* =====================================================================
   25. HOMEPAGE  (v2.3)
   ===================================================================== */
/* Hero: rotating avatars with a visitor question outside the frame */
.hm-home-art { position: relative; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
.hm-home-frame {
	position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #fff;
	border: 1px solid #2c3260; box-shadow: 0 0 0 8px var(--hm-ink-1), 0 0 0 9px var(--hm-line), 0 28px 80px -22px rgba(47,224,196,.38);
}
.hm-home-frame figure { position: absolute; inset: 0; margin: 0; opacity: 0; animation: hm-cyc 20s infinite; }
.hm-home-frame img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; }
.hm-home-frame figcaption {
	position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; border-radius: 14px 14px 14px 4px;
	background: rgba(7,8,15,.88); border: 1px solid var(--hm-line); color: var(--hm-fg); font-size: 14px; line-height: 1.45;
}
.hm-home-frame figcaption span { display: block; margin-top: 4px; font-family: var(--hm-f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-teal); }
.hm-home-asks { position: absolute; top: 40px; left: -120px; width: 230px; height: 60px; z-index: 2; }
.hm-home-asks p {
	position: absolute; top: 0; right: 0; margin: 0 !important; padding: 12px 16px !important; opacity: 0; animation: hm-cyc 20s infinite;
	border-radius: 16px 16px 4px 16px; background: var(--hm-fg); color: var(--hm-ink-0) !important;
	font-size: 15px !important; font-weight: 600; line-height: 1.4 !important; white-space: nowrap; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6);
}
.hm-home-frame figure:nth-child(2), .hm-home-asks p:nth-child(2) { animation-delay: 5s; }
.hm-home-frame figure:nth-child(3), .hm-home-asks p:nth-child(3) { animation-delay: 10s; }
.hm-home-frame figure:nth-child(4), .hm-home-asks p:nth-child(4) { animation-delay: 15s; }
@keyframes hm-cyc { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 999px) {
	.hm-home-art { margin: 64px auto 0; }
	.hm-home-asks { left: auto; right: -10px; top: -34px; width: auto; }
}

/* Step cards: label line */
.hm-band .hm-step-label { margin: 0 0 12px !important; font-family: var(--hm-f-mono); font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-teal) !important; }
.hm-cards .hm-sec-link { margin-top: 12px !important; }
.hm-cards .hm-card .wpb_text_column, .hm-cards .hm-card .wpb_text_column > .wpb_wrapper { height: 100%; display: flex; flex-direction: column; }
.hm-cards .hm-card .hm-sec-link { margin-top: auto !important; padding-top: 12px; }

/* Create your own: numbered steps + before/after */
.hm-band ol.hm-home-steps { list-style: none; margin: 0 0 28px !important; padding: 0 !important; border-top: 1px solid var(--hm-line); }
.hm-home-steps li { display: flex; gap: 16px; padding: 14px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--hm-line); list-style: none; }
.hm-home-steps li::before { display: none !important; }
.hm-home-steps b { font-family: var(--hm-f-mono); font-size: 13px; font-weight: 600; color: var(--hm-teal); padding-top: 2px; }
.hm-home-steps strong { color: var(--hm-fg); font-weight: 600; }
.hm-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; }
.hm-ba figure { margin: 0; }
.hm-ba__img { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 1px solid var(--hm-line); background: #fff; }
.hm-ba__img img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; }
.hm-ba__img--live { border-color: #2c3260; box-shadow: 0 0 0 6px var(--hm-ink-1), 0 0 0 7px var(--hm-line), 0 40px 90px -30px rgba(47,224,196,.4); }
.hm-ba__rec { position: absolute; inset: 14px; border: 2px solid rgba(255,255,255,.85); border-radius: 10px;
	-webkit-mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat;
	mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat; }
.hm-ba__tag { position: absolute; top: 20px; left: 22px; display: flex; align-items: center; gap: 6px; font-family: var(--hm-f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #fff; }
.hm-ba__tag i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; }
.hm-ba__say { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(7,8,15,.88); border: 1px solid var(--hm-line); font-size: 12px; line-height: 1.4; color: var(--hm-fg); }
.hm-ba figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: var(--hm-fg-2); }
.hm-ba figure:last-child figcaption { color: var(--hm-fg); }

/* Faces: row aligned with the copy, scrolling right to the screen edge */
body .wpb_row.hm-home-faces { padding-top: 0 !important; }
.hm-faces { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 16px; margin-right: calc(50% - 50vw); padding-right: max(20px, 4vw); scrollbar-width: thin; scrollbar-color: var(--hm-line) transparent; }
.hm-face { flex: 0 0 200px; scroll-snap-align: start; border: 1px solid var(--hm-line); border-radius: 16px; overflow: hidden; background: var(--hm-ink-2); }
.hm-face img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; background: #fff; margin: 0 !important; }
.hm-face p { margin: 0 !important; padding: 0 !important; }
.hm-face div { padding: 14px 16px 16px; }
.hm-face .hm-face__name { font-family: var(--hm-f-display); font-weight: 700; font-size: 18px; color: var(--hm-fg); }
.hm-face .hm-face__role { font-size: 14px; }
.hm-band h3.hm-sub { font-size: 26px; margin: 0 0 6px; }

/* Industry links */
.hm-ind-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: end; margin-bottom: 44px; }
.hm-ind-head h2 { margin: 0 !important; }
.hm-ind-head p { margin: 0 !important; font-size: 18px; }
.hm-ind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.hm-band .hm-ind a { display: block; padding: 22px 0 24px; border-top: 1px solid var(--hm-line); text-decoration: none; color: var(--hm-fg-2); }
.hm-ind h3 { margin: 0 0 6px !important; font-size: 20px !important; }
.hm-ind h3 span { color: var(--hm-teal); transition: margin .2s ease; }
.hm-ind a:hover h3 span { margin-left: 4px; }
.hm-ind p { margin: 0 !important; font-size: 16px; }

/* Deployment cards with one shared colour treatment */
.hm-dep-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 40px; }
.hm-dep-head h2 { margin: 0 !important; }
.hm-dep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hm-band .hm-dep a { display: flex; flex-direction: column; border: 1px solid var(--hm-line); border-radius: 16px; overflow: hidden; background: var(--hm-ink-2); text-decoration: none; color: var(--hm-fg-2); transition: border-color .2s ease, transform .2s ease; }
.hm-dep a:hover { border-color: #3a4170; transform: translateY(-3px); }
.hm-grade { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--hm-line); background: var(--hm-ink-2); }
.hm-grade img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; margin: 0 !important; filter: saturate(.7) contrast(1.06) brightness(.94); transition: filter .3s ease; }
.hm-grade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(107,92,255,.28), rgba(14,17,32,.15) 45%, rgba(7,8,15,.55)); mix-blend-mode: multiply; transition: opacity .3s ease; }
.hm-dep a:hover .hm-grade img { filter: none; }
.hm-dep a:hover .hm-grade::after { opacity: 0; }
.hm-dep__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.hm-dep__body p { margin: 0 !important; padding: 0 !important; font-size: 15px; }
.hm-dep__tag { font-family: var(--hm-f-mono); font-size: 11px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-teal); }
.hm-dep__body h3 { margin: 0 !important; font-size: 19px !important; line-height: 1.3; }
.hm-dep__more { margin-top: auto !important; padding-top: 6px !important; font-weight: 600; color: var(--hm-teal); }

/* Quote */
.hm-quote-box { border: 1px solid var(--hm-line); border-radius: 18px; padding: clamp(28px, 5vw, 56px); background: var(--hm-ink-1); }
.hm-band .hm-quote-box .hm-quote-text { margin: 0 0 22px !important; font-family: var(--hm-f-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -0.015em; color: var(--hm-fg); max-width: 46ch; }
.hm-band .hm-quote-box .hm-quote-by { margin: 0 !important; font-size: 15px; color: #c9cce0; }
.hm-quote-by span { color: #8a90b4; }
body .wpb_row.hm-home-quote { padding-top: 0 !important; }

/* Company facts */
.hm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--hm-line); }
.hm-facts div { padding: 16px 0; border-bottom: 1px solid var(--hm-line); }
.hm-facts p { margin: 0 !important; padding: 0 !important; }
.hm-facts .hm-facts__k { font-family: var(--hm-f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a90b4; }
.hm-facts .hm-facts__v { margin-top: 2px !important; font-family: var(--hm-f-display); font-weight: 700; font-size: 19px; color: var(--hm-fg); }

/* Client logos */
body .wpb_row.hm-home-clients { padding-bottom: 0 !important; }
.hm-band .hm-clients-label { margin: 0 0 24px !important; text-align: center; font-family: var(--hm-f-mono); font-size: 11px !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a90b4; }
.hm-logos { overflow: hidden; margin: 0 calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-logos__track { display: flex; width: max-content; animation: hm-logos 42s linear infinite; }
.hm-logos:hover .hm-logos__track { animation-play-state: paused; }
.hm-logos__set { display: flex; align-items: center; gap: 104px; padding-right: 104px; }
@media (max-width: 640px) { .hm-logos__set { gap: 64px; padding-right: 64px; } }
.hm-logos img { display: block; width: auto; opacity: .78; margin: 0 !important; }
@keyframes hm-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 999px) {
	.hm-ind-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.hm-ind { grid-template-columns: minmax(0, 1fr); }
	.hm-dep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hm-ba { margin-top: 40px; }
}
@media (max-width: 640px) {
	.hm-dep { grid-template-columns: minmax(0, 1fr); }
	.hm-home-asks p { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-home-frame figure, .hm-home-asks p, .hm-logos__track { animation: none; }
	.hm-home-frame figure:first-child, .hm-home-asks p:first-child { opacity: 1; }
}

/* =====================================================================
   26. SPACING PASS  (v2.3.3) — roomier section heads and cards
   ===================================================================== */
.hm-band h2 { margin-bottom: 20px; }
.hm-sec-head { margin-bottom: clamp(44px, 5.5vw, 68px); }
.hm-sec-head .hm-lead { margin-top: 0 !important; }
.wpb_column.hm-card > .vc_column-inner { padding: clamp(28px, 2.8vw, 38px) !important; }
.hm-band .hm-card h3 { margin-bottom: 12px !important; line-height: 1.25; }
.hm-band .hm-card p { line-height: 1.65; }
.hm-band .hm-step-label { margin-bottom: 16px !important; }
.hm-cards .hm-card .hm-sec-link { padding-top: 22px !important; }
.hm-ind-head, .hm-dep-head { margin-bottom: clamp(44px, 5.5vw, 64px); }
.hm-ind-head h2, .hm-dep-head h2 { margin-top: 0 !important; }
.hm-band h3.hm-sub { margin-bottom: 10px; }
.hm-home-faces .wpb_text_column { margin-bottom: 32px !important; }
body .hm-card .wpb_text_column p.hm-step-label:first-child { margin-bottom: 14px !important; }
/* v2.3.5: quieter before/after, more room above the ready-made faces */
.hm-ba { gap: 26px; max-width: 732px; margin: 56px auto 0; }
.hm-ba figcaption { margin-top: 14px; }
body .wpb_row.hm-home-faces { padding-top: clamp(40px, 6vw, 80px) !important; }

/* v2.4.0: avatar video gets the homepage frame: ring + teal glow */
body .hm-video { border-color: #2c3260; box-shadow: 0 0 0 8px var(--hm-ink-1), 0 0 0 9px var(--hm-line), 0 28px 80px -22px rgba(47,224,196,.38); }
body .hm-video:fullscreen, body .hm-video:-webkit-full-screen { box-shadow: none; }
/* v2.4.1: same frame on hero placeholders now, and on real hero media later.
   Use class "hm-frame" on a hero image or wrapper; the Wayfinder video will use hm-video. */
body .hm-hero .hm-placeholder,
body .hm-frame {
	border: 1px solid #2c3260; border-radius: 22px; overflow: hidden;
	box-shadow: 0 0 0 8px var(--hm-ink-1), 0 0 0 9px var(--hm-line), 0 28px 80px -22px rgba(47,224,196,.38);
}
body .hm-frame img { display: block; width: 100%; height: auto; margin: 0 !important; }

/* v2.4.2: ready-made faces scroll continuously, with a "create your own" card */
.hm-faces-marq { overflow: hidden; margin: 0 calc(50% - 50vw); padding: 4px 0 10px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hm-faces-track { display: flex; width: max-content; animation: hm-logos 80s linear infinite; }
.hm-faces-marq:hover .hm-faces-track, .hm-faces-marq:focus-within .hm-faces-track { animation-play-state: paused; }
.hm-faces-set { display: flex; gap: 18px; padding-right: 18px; }
.hm-faces-set .hm-face { flex: 0 0 200px; }
.hm-band a.hm-face--create { display: block; text-decoration: none; border: 1px dashed rgba(47,224,196,.5); background: var(--hm-ink-2); transition: border-color .2s ease; }
.hm-face--create:hover { border-color: var(--hm-teal) !important; }
.hm-face__new { aspect-ratio: 3 / 4; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 35%, rgba(47,224,196,.16), transparent 65%), radial-gradient(ellipse at 50% 100%, rgba(107,92,255,.22), transparent 60%), var(--hm-ink-1); }
.hm-face .hm-face__cta { font-size: 14px; font-weight: 600; color: var(--hm-teal); }
@media (prefers-reduced-motion: reduce) {
	.hm-faces-track { animation: none; }
	.hm-faces-marq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.hm-faces-set[aria-hidden] { display: none; }
}
.hm-ba__img--live { box-shadow: 0 0 0 6px var(--hm-ink-1), 0 0 0 7px var(--hm-line) !important; }

/* v2.4.5: one gap for every card grid and card row */
:root { --hm-grid-gap: 32px; }
body .hm-cs-grid > .row_col_wrap_12_inner { gap: var(--hm-grid-gap) !important; }
.hm-dep { gap: var(--hm-grid-gap); }
.hm-faces-set { gap: var(--hm-grid-gap); padding-right: var(--hm-grid-gap); }
@media (max-width: 640px) { :root { --hm-grid-gap: 20px; } }
body .hm-marquee__track { gap: var(--hm-grid-gap) !important; padding-right: var(--hm-grid-gap) !important; }
.hm-photos { gap: var(--hm-grid-gap); margin-bottom: var(--hm-grid-gap); }

/* =====================================================================
   27. HOMEPAGE POLISH  (v2.5.0): video slide, step icons, avatar in CTA,
   scroll reveal
   ===================================================================== */
.hm-ih--chat { --hm-ih: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c9c3ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3Cpath%20d%3D%22M8%209.5h8M8%2012.5h5%22%2F%3E%3C%2Fsvg%3E"); }
/* Hero video slide */
.hm-home-frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #fff; }
/* Step cards: label top right, icon heading top left */
.hm-cards .wpb_column.hm-card > .vc_column-inner { position: relative; }
body .hm-cards .hm-card .wpb_text_column p.hm-step-label:first-child { position: absolute; top: clamp(28px, 2.8vw, 38px); right: clamp(28px, 2.8vw, 38px); margin: 0 !important; padding: 0 !important; line-height: 40px; }
/* Closing box with an avatar */
.wpb_column.hm-cta-avatar > .vc_column-inner { position: relative; overflow: hidden; }
.hm-cta-avatar .wpb_text_column { position: relative; z-index: 1; max-width: 58%; }
.hm-cta-avatar__fig { position: absolute; right: 7%; bottom: 0; top: 24px; width: 34%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; margin: 0; }
.hm-cta-avatar__fig::before { content: ""; position: absolute; left: 0; right: 0; bottom: -10%; height: 80%; background: radial-gradient(ellipse at 50% 70%, rgba(47,224,196,.28), transparent 65%); }
.hm-cta-avatar__fig img { position: relative; display: block; height: 100% !important; width: auto !important; max-width: none; object-fit: contain; object-position: bottom; margin: 0 !important; }
@media (max-width: 860px) { .hm-cta-avatar__fig { display: none; } .hm-cta-avatar .wpb_text_column { max-width: none; } }
/* Scroll reveal (only when JS is running and motion is welcome) */
html.hm-reveal-on .hm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--hm-d, 0s); }
html.hm-reveal-on .hm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.hm-reveal-on .hm-reveal { opacity: 1; transform: none; transition: none; } }

/* v2.5.2: taller 9:16 hero frame (matches portrait avatar video); text column centred against it */
body .hm-hero .vc_col-sm-7 > .vc_column-inner { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 480px) { .hm-home-art { max-width: 300px; } }

/* v2.5.3: smaller embedded video, centred in its column */
body .hm-embed .wpb_video_widget { max-width: 600px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 999px) { body .hm-embed .wpb_video_widget { margin-top: 32px !important; } }

/* =====================================================================
   28. HOMEPAGE HERO BACKGROUND (v2.6.0) — faint dot grid with a cursor
   light, and slow rings radiating from behind the avatar frame
   ===================================================================== */
/* Cursor light on every hero (desktop only; JS sets --hm-mx/--hm-my and .hm-glow-on) */
body .wpb_row.hm-hero { --hm-mx: 68%; --hm-my: 45%; }
body .wpb_row.hm-hero::after {
	content: ""; display: block !important; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 2; pointer-events: none;
	background: radial-gradient(380px circle at var(--hm-mx) var(--hm-my), rgba(47,224,196,.11), transparent 70%);
	opacity: 0; transition: opacity .5s ease;
}
body .wpb_row.hm-hero.hm-glow-on::after { opacity: 1; }
.hm-halo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.hm-home-art { z-index: 1; }
.hm-halo::before {
	content: ""; position: absolute; left: -280px; top: -280px; width: 560px; height: 560px; border-radius: 50%;
	background: radial-gradient(circle, rgba(47,224,196,.12), transparent 65%);
}
.hm-halo i {
	position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; border-radius: 50%;
	border: 1px solid rgba(47,224,196,.22); opacity: 0; animation: hm-ring 9s linear infinite;
}
.hm-halo i:nth-child(2) { animation-delay: 3s; }
.hm-halo i:nth-child(3) { animation-delay: 6s; }
@keyframes hm-ring { 0% { transform: scale(.45); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@media (max-width: 690px) { .hm-halo i { left: -260px; top: -260px; width: 520px; height: 520px; } }
@media (prefers-reduced-motion: reduce) {
	.hm-halo i { animation: none; opacity: .45; transform: scale(.8); }
	.hm-halo i:nth-child(n+2) { display: none; }
}

/* v2.7.1: before/after sits tighter and to the right, leaving more room after the text column */
@media (min-width: 1000px) { body .hm-ba { gap: 10px; max-width: 666px; margin-left: auto; margin-right: 0; } }

/* v2.7.2: name tag on the closing-box avatar, styled like the hero caption tag */
.hm-cta-avatar__tag {
	position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1;
	padding: 8px 14px; border-radius: 12px 12px 12px 4px; background: rgba(7,8,15,.88); border: 1px solid var(--hm-line);
	font-family: var(--hm-f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-teal); white-space: nowrap;
}

/* v2.7.3: Salient's text-column rule was shrinking the gap under the Industries and Deployments headings to 24px; match other section heads */
body .wpb_wrapper > .hm-ind-head,
body .wpb_wrapper > .hm-dep-head { margin-bottom: clamp(44px, 5.5vw, 64px) !important; }

/* =====================================================================
   29. WORDMARK (v2.8.0) — HOLOMEDIA in white, AI in teal, header and footer
   ===================================================================== */
body #header-outer #logo, body #footer-outer h3.hm-wordmark { letter-spacing: .02em; }
.hm-wm-ai { color: var(--hm-teal); margin-left: .26em; letter-spacing: .04em; }

/* v2.8.1: spokesperson is now filmed on white — dark REC frame and tag so they read on a light background */
body .hm-ba__rec { border-color: rgba(7,8,15,.55) !important; }
body .hm-ba__tag { color: var(--hm-ink-0); }

/* v2.8.2: second line under the before/after captions */
.hm-ba figcaption .hm-ba__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--hm-fg-3); }

/* =====================================================================
   30. TOOLTIP (v2.9.0) — dotted-underline term with an explanation on hover or focus
   ===================================================================== */
.hm-tip { position: relative; display: inline; color: var(--hm-fg); text-decoration: underline dotted rgba(47,224,196,.7); text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: help; outline: none; }
.hm-tip:focus-visible { border-radius: 3px; box-shadow: 0 0 0 2px var(--hm-teal); }
.hm-tip__text {
	position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 20; width: min(320px, 80vw); transform: translate(-50%, 6px);
	padding: 12px 14px; border-radius: 12px; background: var(--hm-ink-2); border: 1px solid #3a4170; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
	color: var(--hm-fg-2); font-size: 14px; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hm-tip__text::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #3a4170; }
.hm-tip:hover .hm-tip__text, .hm-tip:focus .hm-tip__text, .hm-tip:focus-within .hm-tip__text { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 690px) { .hm-tip__text { left: 0; transform: translate(0, 6px); } .hm-tip:hover .hm-tip__text, .hm-tip:focus .hm-tip__text { transform: none; } .hm-tip__text::after { left: 24px; } }
@media (prefers-reduced-motion: reduce) { .hm-tip__text { transition: none; } }

/* =====================================================================
   31. PLATFORM DASHBOARD VIDEO (v2.10.0) — same ring and glow as other hero media
   ===================================================================== */
.hm-dash { margin: 0 10px; border-radius: 16px; overflow: hidden; background: var(--hm-ink-0); border: 1px solid #2c3260;
	box-shadow: 0 0 0 8px var(--hm-ink-1), 0 0 0 9px var(--hm-line), 0 28px 80px -22px rgba(47,224,196,.38); }
.hm-dash video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 999px) { .hm-dash { margin-top: 40px; } }

/* v2.10.2: photos in the Platform display cards, same size and position as the placeholders they replace */
body .hm-card img.hm-card-photo { display: block; width: 100% !important; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin: 0 0 20px !important; border: 1px solid var(--hm-line); }

/* v2.11.0: Wayfinder hero video, sized like the 9:16 placeholder it replaces, with the site's frame ring and glow */
.hm-wf-video { display: block; aspect-ratio: 9 / 16; width: auto; height: min(68vh, 720px); max-width: 100%; margin: 0 auto; object-fit: cover; background: var(--hm-ink-1);
	border: 1px solid #2c3260; border-radius: 22px; box-shadow: 0 0 0 8px var(--hm-ink-1), 0 0 0 9px var(--hm-line), 0 28px 80px -22px rgba(47,224,196,.38); }
@media (max-width: 999px) { .hm-wf-video { height: auto; width: min(100%, 420px); margin: 32px auto 0; } }

/* v2.11.1: Wayfinder hero photo (4:5), same frame ring and glow */
img.hm-wf-photo { display: block; width: 100% !important; max-width: 370px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin: 0 auto !important;
	border: 1px solid #2c3260; border-radius: 22px; box-shadow: 0 0 0 8px var(--hm-ink-1), 0 0 0 9px var(--hm-line), 0 28px 80px -22px rgba(47,224,196,.38); }
@media (max-width: 999px) { img.hm-wf-photo { max-width: 340px; margin: 32px auto 0 !important; } }

/* v2.11.3: Salient's ".row .col img" max-width was overriding the size above */
body .row .col img.hm-wf-photo { max-width: 410px; }
@media (max-width: 999px) { body .row .col img.hm-wf-photo { max-width: 340px; } }

/* =====================================================================
   32. WAYFINDER HERO PROMPTS (v2.12.0) — visitor questions outside the frame,
   avatar replies inside, cycling like the homepage hero
   ===================================================================== */
.hm-wf-art { position: relative; width: 100%; max-width: 410px; margin: 0 auto; }
body .row .col .hm-wf-art img.hm-wf-photo { max-width: 100%; margin: 0 !important; }
.hm-wf-art .hm-home-asks p:nth-child(2), .hm-wf-replies p:nth-child(2) { animation-delay: 5s; }
.hm-wf-art .hm-home-asks p:nth-child(3), .hm-wf-replies p:nth-child(3) { animation-delay: 10s; }
.hm-wf-art .hm-home-asks p:nth-child(4), .hm-wf-replies p:nth-child(4) { animation-delay: 15s; }
.hm-wf-replies { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }
.hm-wf-replies p {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: 12px 14px !important; opacity: 0; animation: hm-cyc 20s infinite;
	border-radius: 14px 14px 14px 4px; background: rgba(7,8,15,.88); border: 1px solid var(--hm-line); color: var(--hm-fg) !important; font-size: 14px !important; line-height: 1.45 !important;
}
.hm-wf-replies p span { display: block; margin-top: 4px; font-family: var(--hm-f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-teal); }
@media (max-width: 999px) { .hm-wf-art { max-width: 340px; margin-top: 56px; } body .row .col .hm-wf-art img.hm-wf-photo { margin: 0 !important; } }
@media (prefers-reduced-motion: reduce) {
	.hm-wf-replies p { animation: none; } .hm-wf-replies p:first-child { opacity: 1; }
	.hm-wf-art .hm-home-asks p { animation: none; } .hm-wf-art .hm-home-asks p:first-child { opacity: 1; }
}

/* v2.12.1: Wayfinder questions appear in different places around the frame (desktop) */
@media (min-width: 1000px) {
	.hm-wf-art .hm-home-asks { inset: 0; width: auto; height: auto; left: 0; top: 0; pointer-events: none; }
	.hm-wf-art .hm-home-asks p { right: auto; }
	.hm-wf-art .hm-home-asks p:nth-child(1) { top: 7%;  left: -64px; border-radius: 16px 16px 4px 16px; }
	.hm-wf-art .hm-home-asks p:nth-child(2) { top: 34%; right: -56px; left: auto; border-radius: 16px 16px 16px 4px; }
	.hm-wf-art .hm-home-asks p:nth-child(3) { top: 52%; left: -72px; border-radius: 16px 16px 4px 16px; }
	.hm-wf-art .hm-home-asks p:nth-child(4) { top: 15%; right: -48px; left: auto; border-radius: 16px 16px 16px 4px; }
}

/* v2.12.2: mobile header "Talk to us" button used Salient's default blue/red animated border; use the site's violet and teal */
body #header-outer .nectar-mobile-only .menu-item-btn-style-button-border-white-animated_extra-color-gradient > a:after,
body #header-outer .menu-item-btn-style-button-border-white-animated_extra-color-gradient > a:after {
	background-image: linear-gradient(90deg, #6b5cff, #2fe0c4, #6b5cff) !important;
}

/* v2.12.3: mobile slide-out menu items smaller (were 34px) */
body #slide-out-widget-area .off-canvas-menu-container li a,
body #slide-out-widget-area .menu li a { font-size: 24px !important; line-height: 1.3 !important; }
body #slide-out-widget-area .off-canvas-menu-container li,
body #slide-out-widget-area .menu li { margin-bottom: 10px; }

/* =====================================================================
   33. MOBILE TYPE AND MENU (v2.13.0)
   ===================================================================== */
/* Slide-out menu: site heading font on dark navy, more space between items */
body #slide-out-widget-area, body #slide-out-widget-area-bg { background-color: var(--hm-ink-0) !important; }
body #slide-out-widget-area .off-canvas-menu-container li a,
body #slide-out-widget-area .menu li a { font-family: var(--hm-f-display) !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--hm-fg) !important; }
body #slide-out-widget-area .off-canvas-menu-container li,
body #slide-out-widget-area .menu li { margin: 0 0 18px !important; }
body #slide-out-widget-area .off-canvas-social-links a, body #slide-out-widget-area .off-canvas-social-links i { color: var(--hm-fg-2) !important; }

@media (max-width: 690px) {
	/* Intro paragraphs: a touch smaller so heroes don't run long */
	body .hm-lead, body .hm-hero .hm-lead { font-size: 17px !important; line-height: 1.6 !important; }
	/* Large headings: a little more line spacing so descenders don't touch */
	body .container-wrap h1 { line-height: 1.08 !important; }
	body .container-wrap h2 { line-height: 1.12 !important; }
	/* Before/after: smaller speech bubble so it doesn't cover the avatar */
	body .hm-ba__say { font-size: 11px !important; line-height: 1.35 !important; padding: 6px 8px !important; left: 8px !important; right: 8px !important; bottom: 8px !important; }
	body .hm-ba figcaption { font-size: 13px; }
}

/* v2.13.2: big figure in cards (e.g. Delivery 4–6 weeks) was stretching to fill the card, pushing its description to the bottom */
body .hm-band .hm-card .hm-big { flex: 0 0 auto !important; height: auto; margin: 8px 0 14px !important; padding-bottom: 0 !important; line-height: 1.05 !important; }
body .hm-band .hm-card .hm-big + p { margin-top: 0 !important; max-width: 32ch; }

/* v2.13.4: deployment photos are now colour-corrected at source, so the CSS colour fade is switched off */
body .hm-grade img, body .hm-grade:hover img { filter: none !important; }
body .hm-grade::before, body .hm-grade::after { display: none !important; }