/* D-247: the VASSiSTECH website and app (vassistech.com). One look for the public pages and the account pages:
   the brand teal and coral of the current vassistech.com, framed like TheGem's "AI Solutions" header (a deep frame
   around a rounded light panel, the logo in a tab notched into the panel), Manrope headings over Inter text.
   Contrast: text on white at least 4.5:1 (teal 8.0, muted 4.9, coral button white 5.2). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/sora-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  --vt-frame: #0E3A46; --vt-frame-2: #0A2D37; --vt-teal: #135868; --vt-teal-2: #1B6B7D; --vt-teal-soft: #E6F1F2;
  --vt-coral: #EC5C43; --vt-coral-ink: #C93A20; --vt-coral-dark: #B0301A;
  /* owner, 2026-10-11: every orange word is the brand colour. --vt-brand is the logo's own red orange (measured in logo-white.png);
     on dark sections the same hue a step brighter, as in the hero title, because the logo shade is 2.7:1 there */
  --vt-brand: #DB4327; --vt-brand-on-dark: #EC5C43;
  /* D-398 (Codex audits F05, owner's choice 2026-10-13): small text reaches WCAG AA 4.5:1. On light surfaces the brand
     red orange in a deeper shade (5.46:1 on white, 4.65:1 or more on every soft grey and card gradient stop); on the dark
     teal surfaces small labels are white (the owner chose white over a light coral, as he had rejected salmon before).
     The logo colours stay for fills, icons, rules and the hero's orange words. */
  --vt-label: #C03920; --vt-label-on-dark: #FFFFFF;
  /* owner, 2026-10-11: the brand is deep green + red orange. Headings take the logo's green (#135868, measured in
     logo-dark.png, the same green the former site's headings used; 8:1 on white); small labels take the red orange */
  --vt-brand-green: #135868;
  --vt-ink: #0B2430; --vt-text: #33465A; --vt-muted: #637085; --vt-line: #E1E7EF; --vt-soft: #F1F5FD;
  --vt-bg: #FFFFFF; --vt-panel: #FFFFFF; --vt-panel-2: #F6F8FC;
  --vt-accent: var(--vt-teal); --vt-accent-ink: #FFFFFF; --vt-ok: #1F7A57; --vt-err: #B42318; --vt-info: var(--vt-teal);
  --vt-radius: 18px; --vt-radius-lg: 28px; --vt-gap: 22px; --vt-frame-gap: 12px; --vt-tab: 26px; --vt-header-h: 78px;
  --vt-shadow: 0 18px 40px -24px rgba(11, 36, 48, .35);
  /* owner, 2026-10-10: a dark teal hero with white words; the panel island and the seal ring take the middle tone so the cut-outs still read */
  --vt-hero-mid: #0F4350; --vt-hero-bg: linear-gradient(135deg, #0A2C36 0%, #0F4350 50%, #14596A 100%);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.vt { margin: 0; background: var(--vt-frame); color: var(--vt-text); font: 400 16px/1.7 'Inter', system-ui, sans-serif; }
.vt img { max-width: 100%; height: auto; }
.vt a { color: var(--vt-teal); }
/* TheGem: Sora headings at regular weight, large and calm */
.vt h1, .vt h2, .vt h3, .vt h4 { font-family: 'Sora', 'Manrope', 'Inter', sans-serif; font-weight: 400; line-height: 1.16; color: var(--vt-brand-green); margin: 0 0 12px; letter-spacing: -.015em; }
.vt h3, .vt h4 { font-weight: 500; }
.vt strong { font-weight: 600; color: var(--vt-ink); }
.vt-skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--vt-coral-ink); color: #fff; border-radius: 8px; }
.vt-skip:focus { left: 8px; }
.vt-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vt-icon { flex: none; }
.vt-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.vt-form-wrap { max-width: 860px; }
.vt-narrow .vt-wrap { max-width: 540px; }

/* ---------- frame, panel, header (TheGem frame with the notched logo tab) ---------- */
.vt-frame { padding: var(--vt-frame-gap); min-height: 100vh; }
.vt-panel { position: relative; background: var(--vt-bg); border-radius: var(--vt-radius-lg); overflow: clip; }
/* the dark logo tab fills the top left corner in the frame colour; a rounded white corner under it showed as a thin white arc */
.vt-panel { border-top-left-radius: 0; }
.vt-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; min-height: var(--vt-header-h); padding: 0 24px 0 0; transition: background .2s, box-shadow .2s; }
.vt-header.is-stuck { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -20px rgba(11, 36, 48, .45); }
.vt-logo-tab { position: relative; align-self: stretch; display: flex; align-items: center; padding: 0 30px 4px 26px; background: var(--vt-frame); border-bottom-right-radius: var(--vt-tab); }
.vt-logo-tab::before, .vt-logo-tab::after { content: ''; position: absolute; width: var(--vt-tab); height: var(--vt-tab); background: radial-gradient(circle at 100% 100%, transparent calc(var(--vt-tab) - .5px), var(--vt-frame) var(--vt-tab)); }
.vt-logo-tab::before { left: 100%; top: 0; }
.vt-logo-tab::after { left: 0; top: 100%; }
.vt-logo-tab img { width: 190px; height: auto; display: block; }
/* owner, 2026-10-10: the sticky header keeps the same dark tab and white logo as at the top; it only gains a light background */
.vt-nav { margin-left: auto; }
.vt-menu { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.vt-menu > li { position: relative; }
.vt-menu > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 999px; color: var(--vt-ink); font: 500 16px/1.2 'Sora', 'Manrope', sans-serif; text-decoration: none; }
.vt-menu > li > a:hover, .vt-menu > li > a[aria-current="page"] { background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-menu > li > a .vt-icon { transition: transform .2s; }
.vt-has-mega:hover > a .vt-icon, .vt-has-mega:focus-within > a .vt-icon { transform: rotate(180deg); }
.vt-mega { position: absolute; top: calc(100% + 10px); left: 50%; width: min(860px, 92vw); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; background: #fff; border: 1px solid var(--vt-line); border-radius: 22px; box-shadow: var(--vt-shadow); padding: 18px; }
.vt-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.vt-has-mega:hover .vt-mega, .vt-has-mega:focus-within .vt-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.vt-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vt-mega-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--vt-text) !important; }
.vt-mega-item:hover { background: var(--vt-soft); }
.vt-mega-item strong { display: block; font: 600 15px/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-mega-item small { display: block; font-size: 13px; line-height: 1.45; color: var(--vt-muted); margin-top: 2px; }
.vt-mega-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--vt-teal-soft); color: var(--vt-teal); flex: none; }
.vt-mega-all { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 8px; padding: 10px 12px 2px; border-top: 1px solid var(--vt-line); font: 600 14px/1 'Manrope', sans-serif; text-decoration: none; color: var(--vt-label) !important; }
.vt-header-actions { display: flex; align-items: center; gap: 12px; }
.vt-account { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1 'Manrope', sans-serif; color: var(--vt-ink) !important; text-decoration: none; }
.vt-account:hover { color: var(--vt-teal) !important; }
.vt-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--vt-line); background: #fff; color: var(--vt-ink); cursor: pointer; }

/* ---------- buttons, links, eyebrows ---------- */
.vt-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--vt-teal); background: var(--vt-teal); color: #fff !important; font: 600 15px/1 'Manrope', sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.vt-button:hover { background: var(--vt-frame); border-color: var(--vt-frame); }
.vt-button-coral { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); }
.vt-button-coral:hover { background: var(--vt-coral-dark); border-color: var(--vt-coral-dark); }
.vt-button-quiet { background: transparent; color: var(--vt-ink) !important; border-color: var(--vt-line); }
.vt-button-quiet:hover { background: var(--vt-soft); border-color: var(--vt-line); }
.vt-button-ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.vt-button-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.vt-button-small { min-height: 42px; padding: 9px 18px; font-size: 14px; }
.vt-button .vt-icon { transition: transform .15s; }
.vt-button:hover .vt-icon { transform: translateX(3px); }
.vt-link { color: var(--vt-teal); font-weight: 500; }
.vt-more { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-label) !important; text-decoration: none; }
.vt-eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .16em; font: 700 12px/1.4 'Manrope', sans-serif; color: var(--vt-label); margin: 0 0 12px; }
.vt-eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--vt-coral); }
.vt-lead { font-size: clamp(17px, 2vw, 19px); color: var(--vt-muted); max-width: 62ch; }
.vt-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- sections ---------- */
.vt-main { min-height: 60vh; }
.vt-section { padding: 48px 0 64px; }
.vt-block { padding: 88px 0; }
.vt-block-soft { background: var(--vt-soft); }
.vt-block-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.vt-block-head h2 { font-size: clamp(30px, 3.6vw, 42px); }
.vt-block-head p { color: var(--vt-muted); margin: 0; }
.vt-h1 { font-size: clamp(28px, 3.6vw, 38px); }
.vt-h2 { font-size: 22px; }
.vt-h3 { font-size: 18px; margin: 18px 0 8px; }
.vt-muted, .vt-hint { color: var(--vt-muted); }
.vt-hint { font-size: 14px; margin: 4px 0 8px; }

/* hero: text left, framed picture right with a notched caption (TheGem) */
.vt-hero { position: relative; margin-top: calc(-1 * var(--vt-header-h)); padding: calc(var(--vt-header-h) + 40px) 0 72px; background: linear-gradient(160deg, #E9F4F4 0%, #F4F8FD 55%, #FFFFFF 100%); }
.vt-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.vt-hero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; font-weight: 600; max-width: 17ch; }
.vt-hero h1 em { font-style: normal; color: var(--vt-teal); }
.vt-hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 26px 0 0; color: var(--vt-ink); font: 500 15px/1.4 'Manrope', sans-serif; }
.vt-hero-points li { display: inline-flex; gap: 8px; align-items: center; }
.vt-hero-points .vt-icon { color: var(--vt-coral); }
.vt-hero-visual { position: relative; border-radius: var(--vt-radius-lg); overflow: hidden; min-height: 460px; background: var(--vt-frame) center/cover no-repeat; box-shadow: var(--vt-shadow); }
.vt-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 45, 55, 0) 40%, rgba(10, 45, 55, .55) 100%); }
.vt-hero-badge { position: absolute; z-index: 2; left: 0; bottom: 0; max-width: 78%; padding: 18px 22px 16px; background: #fff; border-top-right-radius: var(--vt-radius); display: flex; gap: 14px; align-items: center; }
.vt-hero-badge::before, .vt-hero-badge::after { content: ''; position: absolute; width: var(--vt-radius); height: var(--vt-radius); background: radial-gradient(circle at 100% 0, transparent calc(var(--vt-radius) - .5px), #fff var(--vt-radius)); }
.vt-hero-badge::before { left: 0; bottom: 100%; }
.vt-hero-badge::after { left: 100%; bottom: 0; }
.vt-hero-badge-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--vt-coral-ink); color: #fff; }
.vt-hero-badge strong { display: block; font: 600 16px/1.3 'Manrope', sans-serif; }
.vt-hero-badge span { font-size: 14px; color: var(--vt-muted); }
.vt-hero-mark { position: absolute; z-index: 2; top: 18px; right: 18px; width: 74px; height: 74px; border-radius: 20px; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.vt-hero-mark img { position: static; width: 54px; height: 54px; }

/* tiles below the hero */
.vt-tiles { margin-top: 56px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 16px; }
.vt-tile { background: #fff; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: 22px; box-shadow: var(--vt-shadow); }
.vt-tile h3 { font-size: 17px; margin: 12px 0 6px; }
.vt-tile p { margin: 0; font-size: 14.5px; color: var(--vt-muted); line-height: 1.6; }
.vt-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-tile-cta { background: var(--vt-teal); border-color: var(--vt-teal); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.vt-tile-cta h3 { color: #fff; margin-top: 0; }
.vt-tile-cta p { color: rgba(255, 255, 255, .82); }
.vt-tile-cta .vt-button { align-self: flex-start; }

/* divisions */
.vt-divisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vt-division { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--vt-radius); background: #fff; border: 1px solid var(--vt-line); text-decoration: none; color: var(--vt-text) !important; transition: transform .2s, box-shadow .2s, background .2s; min-width: 0; }
.vt-division:hover { transform: translateY(-4px); box-shadow: var(--vt-shadow); }
.vt-division h3 { font-size: 20px; margin: 6px 0 0; }
.vt-division p { margin: 0; color: var(--vt-muted); font-size: 15px; flex: 1; }
.vt-division .vt-tile-icon { width: 52px; height: 52px; border-radius: 16px; }
.vt-division.is-featured, .vt-division:hover { background: var(--vt-teal); border-color: var(--vt-teal); }
.vt-division.is-featured h3, .vt-division:hover h3, .vt-division.is-featured p, .vt-division:hover p { color: #fff; }
.vt-division.is-featured .vt-tile-icon, .vt-division:hover .vt-tile-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.vt-division.is-featured .vt-more, .vt-division:hover .vt-more { color: #fff !important; }

/* about */
.vt-about { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.vt-about-visual { position: relative; border-radius: var(--vt-radius-lg); overflow: hidden; min-height: 520px; }
.vt-about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-about-quote { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 20px 22px; border-radius: var(--vt-radius); background: rgba(14, 58, 70, .82); color: #fff; backdrop-filter: blur(6px); display: flex; gap: 12px; font-size: 15px; line-height: 1.6; }
.vt-about-quote .vt-icon { color: var(--vt-coral); }
.vt-about h2 { font-size: clamp(30px, 3.4vw, 40px); }
.vt-about p { color: var(--vt-muted); }
.vt-points { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.vt-points li { display: flex; gap: 10px; align-items: center; font: 500 15px/1.4 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-points .vt-icon { color: var(--vt-teal); }
.vt-signature { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--vt-line); }
.vt-signature img { width: 220px; }
.vt-signature span { font: 500 14px/1.4 'Manrope', sans-serif; color: var(--vt-muted); }

/* how we work */
.vt-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step; position: relative; }
.vt-process-step { position: relative; padding: 28px 24px; border-radius: var(--vt-radius); background: #fff; border: 1px solid var(--vt-line); }
.vt-process-step h3 { font-size: 19px; margin: 16px 0 8px; }
.vt-process-step p { margin: 0; color: var(--vt-muted); font-size: 15px; }
.vt-process-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--vt-frame); color: #fff; font: 700 17px/1 'Manrope', sans-serif; box-shadow: 0 0 0 6px var(--vt-teal-soft); }

/* two paths */
.vt-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vt-path { position: relative; overflow: hidden; padding: 40px; border-radius: var(--vt-radius-lg); background: var(--vt-frame); color: rgba(255, 255, 255, .85); }
.vt-path.is-light { background: var(--vt-teal-soft); color: var(--vt-text); }
.vt-path h3 { color: #fff; font-size: 26px; }
.vt-path.is-light h3 { color: var(--vt-brand-green); }
.vt-path ol { margin: 18px 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: path; }
.vt-path li { counter-increment: path; display: flex; gap: 12px; align-items: baseline; }
.vt-path li::before { content: counter(path, decimal-leading-zero); font: 700 13px/1 'Manrope', sans-serif; color: var(--vt-coral); min-width: 24px; }

/* plans */
.vt-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.vt-plan { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--vt-radius-lg); background: #fff; border: 1px solid var(--vt-line); }
.vt-plan.is-featured { background: var(--vt-frame); border-color: var(--vt-frame); color: rgba(255, 255, 255, .85); }
.vt-plan.is-featured h3, .vt-plan.is-featured .vt-plan-hours { color: #fff; }
.vt-plan h3 { font-size: 22px; margin: 0; }
.vt-plan p { margin: 0; }
.vt-plan-hours { font: 700 30px/1.1 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-plan ul { list-style: none; padding: 16px 0 0; margin: 0; display: grid; gap: 8px; border-top: 1px solid var(--vt-line); flex: 1; }
.vt-plan.is-featured ul { border-color: rgba(255, 255, 255, .15); }
.vt-plan li { display: flex; gap: 10px; align-items: center; }
.vt-plan li .vt-icon { color: var(--vt-coral); }
.vt-plan-price { font: 500 14px/1.4 'Manrope', sans-serif; color: var(--vt-muted); }
.vt-plan.is-featured .vt-plan-price { color: rgba(255, 255, 255, .7); }
.vt-plan .vt-button { align-self: flex-start; }
.vt-table-wrap { overflow-x: auto; border: 1px solid var(--vt-line); border-radius: var(--vt-radius); background: #fff; }
.vt-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.vt-table th, .vt-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--vt-line); }
.vt-table thead th { background: var(--vt-frame); color: #fff; font: 600 14px/1.3 'Manrope', sans-serif; }
.vt-table tbody th { font: 600 15px/1.4 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-table tbody tr:last-child > * { border-bottom: 0; }
.vt-table tbody tr:nth-child(even) { background: var(--vt-panel-2); }

/* trust, group, roles */
.vt-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vt-trust-item { padding: 26px; border-radius: var(--vt-radius); background: #fff; border: 1px solid var(--vt-line); }
.vt-trust-item h3 { font-size: 18px; margin: 14px 0 8px; }
.vt-trust-item p { margin: 0; font-size: 15px; color: var(--vt-muted); }
.vt-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 34px; }
/* owner, 2026-10-11: the logos in their own colours, no grey; a small zoom under the pointer */
.vt-group img { height: 54px; width: auto; transition: transform .25s ease; }
.vt-group img:hover { transform: scale(1.12); }
.vt-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vt-role { padding: 26px; border-radius: var(--vt-radius); background: #fff; border: 1px solid var(--vt-line); }
.vt-role h3 { font-size: 18px; margin: 14px 0 6px; }
.vt-role p { margin: 0 0 12px; color: var(--vt-muted); font-size: 15px; }
.vt-role ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.vt-role li { display: flex; gap: 8px; }
.vt-role li .vt-icon { color: var(--vt-teal); margin-top: 4px; }

/* call to action band */
.vt-cta { position: relative; overflow: hidden; margin: 0 24px 24px; border-radius: var(--vt-radius-lg); padding: 64px 48px; color: rgba(255, 255, 255, .85); background: var(--vt-frame); }
.vt-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.vt-cta-inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.vt-cta h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); max-width: 18ch; }
.vt-cta p { max-width: 58ch; margin: 0; }
.vt-cta .vt-eyebrow { color: var(--vt-label-on-dark); }

/* inner page banner */
.vt-banner { margin: 6px 24px 0; padding: 64px 48px 56px; border-radius: var(--vt-radius-lg); background: linear-gradient(140deg, #E5F1F2 0%, #F2F6FD 70%); position: relative; overflow: hidden; }
.vt-banner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(236, 92, 67, .12), transparent 70%); }
.vt-banner h1 { font-size: clamp(32px, 4.4vw, 52px); max-width: 22ch; }
.vt-banner p { max-width: 64ch; color: var(--vt-muted); margin: 0; }
.vt-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--vt-muted); margin-bottom: 18px; list-style: none; padding: 0; }
.vt-crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--vt-line); }
.vt-crumbs a { color: var(--vt-muted); text-decoration: none; }
.vt-crumbs a:hover { color: var(--vt-teal); }

/* division page */
.vt-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.vt-overview h2 { font-size: clamp(26px, 3vw, 34px); }
.vt-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vt-service { display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: var(--vt-radius); background: #fff; border: 1px solid var(--vt-line); min-width: 0; }
.vt-service h3 { font-size: 20px; margin: 0; }
.vt-service p { margin: 0; color: var(--vt-muted); }
.vt-service-label { font: 700 12px/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-ink); }
.vt-scope { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vt-scope li { padding: 6px 12px; border-radius: 999px; background: var(--vt-soft); font-size: 14px; color: var(--vt-ink); }
.vt-outcome { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--vt-teal-soft); font-size: 15px; color: var(--vt-ink); margin-top: auto; }
.vt-outcome .vt-icon { color: var(--vt-teal); margin-top: 3px; }
.vt-callout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.vt-callout > div { padding: 34px; border-radius: var(--vt-radius-lg); background: var(--vt-soft); }
.vt-callout > div.is-dark { background: var(--vt-frame); color: rgba(255, 255, 255, .85); }
.vt-callout > div.is-dark h2 { color: #fff; }
.vt-callout h2 { font-size: 24px; }

/* FAQ */
.vt-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 48px; padding: 44px 0; border-bottom: 1px solid var(--vt-line); }
.vt-faq:last-child { border-bottom: 0; }
.vt-faq h2 { font-size: clamp(26px, 2.6vw, 34px); }
.vt-faq-items { display: grid; gap: 10px; }

/* contact */
.vt-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.vt-honeypot { position: absolute; left: -5000px; }

/* legal pages */
.vt-legal { max-width: 820px; }
.vt-legal h2 { font-size: 22px; margin-top: 34px; }
.vt-legal p, .vt-legal li { color: var(--vt-text); }

/* ---------- footer: the current vassistech.com footer (appointment card over the edge, dark columns, the division
   line), ending in TheGem's mint strip with the socials in a dark tab rising from the frame ---------- */
.vt-footer { --vt-footer-bg: #012733; position: relative; margin-top: 40px; padding-top: 0; color: #B7BFCB; background: linear-gradient(to bottom, transparent 0, transparent 150px, var(--vt-footer-bg) 150px); font-size: 15px; }
.vt-footer a { text-decoration: none; }
.vt-footer p { margin: 0; }
.vt-footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; padding: 44px 56px; background: #10343F; /* owner, 2026-10-11: the footer's own colour under it (#012733), just a little lighter (6% white mixed in), so the card and the footer read as one family */ border-radius: 50px 0; color: rgba(255, 255, 255, .9); }
.vt-footer-cta > div { max-width: 700px; }
.vt-footer-cta-eyebrow { font: 600 14px/1.3 'Manrope', sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--vt-label-on-dark); margin-bottom: 14px !important; }
.vt-footer-cta h2 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 14px; }
.vt-footer-cta-button { display: inline-flex; align-items: center; justify-content: center; min-width: 192px; padding: 15px 40px; background: #fff; border-radius: 20px 0; color: var(--vt-teal) !important; font: 700 14px/1 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; transition: background .15s, color .15s; }
.vt-footer-cta-button:hover { background: var(--vt-coral-ink); color: #fff !important; }
/* every column as wide as its longest line, spread across the row, so no link breaks onto two lines */
.vt-footer-grid { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 32px 28px; padding: 72px 0 56px; }
.vt-footer-grid .vt-footer-list a, .vt-footer-contact li { white-space: nowrap; }
/* the nine divisions in two columns where the about text was; the about lives higher on the page */
.vt-footer-divisions .vt-footer-list { grid-template-columns: repeat(2, max-content); gap: 12px 26px; }
.vt-footer-divisions .vt-footer-list a { align-items: flex-start; }
.vt-footer-divisions .vt-footer-list .vt-icon { margin-top: 2px; }
.vt-footer-title { color: #fff !important; font: 500 18px/1.3 'Manrope', sans-serif !important; margin: 10px 0 26px !important; }
.vt-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vt-footer-list a { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; }
.vt-footer-list a:hover { color: var(--vt-label-on-dark); }
.vt-footer-list .vt-icon { color: var(--vt-coral); }
.vt-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vt-footer-contact li { display: flex; gap: 12px; align-items: flex-start; color: #fff; }
.vt-footer-contact a { color: #fff; }
.vt-footer-contact a:hover { color: var(--vt-label-on-dark); }
.vt-footer-contact .vt-icon { color: var(--vt-coral); margin-top: 3px; }
/* the strip is tall enough for the logo to sit over the social tab, as on TheGem; the text lines up with the tab */
.vt-footer-strip { position: relative; display: flex; align-items: flex-end; gap: 12px 40px; flex-wrap: wrap; min-height: 196px; padding: 26px clamp(24px, 9vw, 150px) 30px; padding-right: calc(clamp(24px, 6vw, 110px) + 330px); border-radius: var(--vt-radius-lg) var(--vt-radius-lg) 0 0; background: linear-gradient(110deg, #C9F0F6 0%, #E1F8F4 45%, #EAFBF4 100%); color: var(--vt-ink); font: 400 15px/1.5 'Manrope', sans-serif; }
/* owner, 2026-10-11: the aqua mint did not sit with the brand (a light green tint was tried first and rejected) */
.vt-footer-strip { background: #10343F; } /* owner, 2026-10-11: same as the appointment card above, the footer's colour a little lighter */
/* owner, 2026-10-11 (second try): darker. The strip is the logo green itself, deeper on the left; it stays lighter than
   the dark footer above and the social tab, so the cut-out tab still reads. Words go white, the logo is the white one. */
.vt .vt-footer-strip, .vt .vt-footer-copy { color: rgba(255, 255, 255, .86); }
.vt .vt-footer-strip a { color: rgba(255, 255, 255, .86); }
.vt .vt-footer-strip a:hover { color: #fff; }
.vt .vt-footer-copy span { border-left-color: rgba(255, 255, 255, .28); }
.vt .vt-footer-copy a { color: #fff !important; }
.vt .vt-footer-copy a:hover { color: var(--vt-label-on-dark) !important; }
.vt-footer-strip a { color: var(--vt-ink); }
.vt-footer-strip a:hover { color: var(--vt-teal); }
.vt-footer-legal { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto !important; }
.vt-footer-strip-logo { position: absolute; right: clamp(24px, 6vw, 110px); bottom: 104px; width: 292px; display: flex; justify-content: center; }
.vt-footer-strip-logo img { width: 230px; display: block; }
.vt-footer-social { position: absolute; right: clamp(24px, 6vw, 110px); bottom: 0; display: flex; gap: 8px; padding: 22px 30px 20px; background: var(--vt-frame); border-radius: 30px 30px 0 0; }
.vt-footer-social::before, .vt-footer-social::after { content: ''; position: absolute; bottom: 0; width: 30px; height: 30px; }
.vt-footer-social::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 29.5px, var(--vt-frame) 30px); }
.vt-footer-social::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 29.5px, var(--vt-frame) 30px); }
.vt-footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--vt-frame) !important; transition: background .15s, color .15s; }
.vt-footer-social a:hover { background: var(--vt-coral-ink); color: #fff !important; }

/* ---------- overlay menu (phones and tablets) ---------- */
.vt-overlay { position: fixed; inset: 0; z-index: 60; background: var(--vt-frame); color: #fff; display: flex; flex-direction: column; padding: 18px 22px 28px; overflow-y: auto; }
.vt-overlay[hidden] { display: none; }
.vt-overlay-head { display: flex; justify-content: space-between; align-items: center; }
.vt-overlay-logo img { width: 160px; }
.vt-burger-close { display: inline-flex; background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.vt-overlay-nav { display: grid; gap: 4px; margin: 30px 0; }
.vt-overlay-nav a { font: 500 28px/1.3 'Manrope', sans-serif; color: #fff; text-decoration: none; padding: 6px 0; }
.vt-overlay-nav a:hover { color: var(--vt-label-on-dark); }
.vt-overlay-foot { margin-top: auto; display: grid; gap: 12px; }
.vt-overlay-foot p { margin: 12px 0 0; }
.vt-overlay-foot a:not(.vt-button) { color: rgba(255, 255, 255, .8); }
body.vt-locked { overflow: hidden; }

/* ---------- app pages (account, forms, agreements, jobs): the same tokens ---------- */
.vt-grid-3, .vt-grid-2 { display: grid; gap: var(--vt-gap); margin-bottom: var(--vt-gap); }
.vt-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.vt-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.vt-card { background: var(--vt-panel); border: 1px solid var(--vt-line); border-radius: var(--vt-radius); padding: 26px; margin-bottom: var(--vt-gap); min-width: 0; }
.vt-grid-2 > .vt-card, .vt-grid-3 > .vt-card { margin-bottom: 0; }
.vt-step { font: 700 13px/1 'Manrope', sans-serif; color: var(--vt-label); letter-spacing: .1em; margin: 0 0 14px; }
.vt-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vt-head-row form { margin: 0; }
.vt-card-form { display: grid; gap: 14px; }
.vt fieldset { border: 0; border-top: 1px solid var(--vt-line); padding: 18px 0 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
/* D-250: an element the page hides stays hidden, whatever display its class gives it (the job form's sections) */
.vt [hidden] { display: none !important; }
.vt fieldset:first-of-type { border-top: 0; padding-top: 0; }
.vt legend { font: 600 18px/1.3 'Manrope', sans-serif; color: var(--vt-ink); padding: 0; margin-bottom: 6px; }
.vt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.vt-field { display: grid; gap: 6px; min-width: 0; }
.vt-field label { font: 500 15px/1.4 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-field input, .vt-field select, .vt-field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--vt-line); background: var(--vt-panel-2); color: var(--vt-ink); font: 400 16px/1.4 'Inter', sans-serif; }
.vt-field textarea { min-height: 120px; resize: vertical; }
.vt-field input:focus, .vt-field select:focus, .vt-field textarea:focus, .vt-check input:focus, .vt a:focus-visible, .vt button:focus-visible, .vt summary:focus-visible { outline: 2px solid var(--vt-coral); outline-offset: 2px; }
.vt-field-error input, .vt-field-error select, .vt-field-error textarea { border-color: var(--vt-err); }
.vt-error { color: var(--vt-err); font-size: 14px; margin: 0; }
.vt-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.vt-check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--vt-teal); }
.vt-check .vt-error { grid-column: 2; }
.vt-check-strong label { font-weight: 500; color: var(--vt-ink); }
.vt-inline-form { display: grid; gap: 10px; margin-top: 8px; }
.vt-notice { border-radius: 12px; padding: 13px 16px; margin: 0 0 var(--vt-gap); border: 1px solid var(--vt-line); background: var(--vt-panel-2); color: var(--vt-ink); }
.vt-notice-success { border-color: #A8D8C4; background: #EEF8F3; }
.vt-notice-error { border-color: #F2B8B0; background: #FDF1EF; }
.vt-notice-info { border-color: #B8D7DC; background: var(--vt-teal-soft); }
.vt-steps { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.vt-steps li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--vt-line); border-radius: 14px; background: var(--vt-panel-2); }
.vt-steps li > a, .vt-steps li > form, .vt-steps li > p { grid-column: 1 / -1; }
.vt-steps-title { font-weight: 600; color: var(--vt-ink); }
.vt-steps-state { color: var(--vt-muted); font-size: 14px; }
.vt-steps li.is-done .vt-steps-state { color: var(--vt-ok); }
.vt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vt-list li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--vt-line); }
.vt-agreement { max-height: 60vh; overflow: auto; }
.vt-agreement h3 { font-size: 17px; margin-top: 18px; }
.vt-agreement p { margin: 0 0 12px; white-space: pre-line; }
.vt-identity-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.vt-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--vt-line); color: var(--vt-muted); font-size: 14px; white-space: nowrap; background: #fff; }
.vt-badge.is-done { color: var(--vt-ok); border-color: #A8D8C4; background: #EEF8F3; }
.vt-option { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
.vt-option-number[hidden] { display: none; }
.vt-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; align-items: end; }
.vt-filters-action { display: flex; }
.vt-job-list { display: grid; gap: var(--vt-gap); margin-bottom: var(--vt-gap); }
.vt-job-list > .vt-card { margin-bottom: 0; }
.vt-job-card h2 a { color: var(--vt-brand-green); text-decoration: none; }
.vt-job-card h2 a:hover { color: var(--vt-teal); }
.vt-job-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--vt-muted); font-size: 14px; margin: 8px 0 0; }
.vt-rate { color: var(--vt-ink); font-weight: 600; }
.vt-pages { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.vt-dl { margin: 0 0 12px; display: grid; gap: 8px; }
.vt-dl div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 12px; }
.vt-dl dt { color: var(--vt-muted); }
.vt-dl dd { margin: 0; overflow-wrap: anywhere; color: var(--vt-ink); }
.vt-pre { white-space: pre-line; overflow-wrap: anywhere; }
.vt-checks { border: 1px solid var(--vt-line) !important; border-radius: 14px; padding: 14px 16px 10px !important; margin: 0 0 14px !important; min-width: 0; }
.vt-checks legend { padding: 0 6px; font-size: 15px; }
.vt-checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px 18px; }
.vt-checks .vt-check label { font-size: 15px; }
.vt-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px 18px; }
.vt-level { display: grid; grid-template-columns: 1fr 150px; gap: 8px; align-items: center; font-size: 15px; }
.vt-level select { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--vt-line); background: var(--vt-panel-2); color: var(--vt-ink); font: 400 14px/1.3 'Inter', sans-serif; }
.vt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.vt-tags li { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--vt-soft); color: var(--vt-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .vt-footer-grid { grid-template-columns: repeat(3, max-content); }
  .vt-footer-grid > .vt-footer-divisions { grid-column: 1 / -1; }
  .vt-footer-divisions .vt-footer-list { grid-template-columns: repeat(3, max-content); }
  .vt-menu > li > a { padding: 10px 10px; font-size: 15px; }
  .vt-account span { display: none; }
}
@media (max-width: 1024px) {
  .vt-nav, .vt-account, .vt-header-cta { display: none; }
  .vt-burger { display: inline-flex; }
  .vt-header-actions { margin-left: auto; }
  .vt-hero-grid, .vt-about, .vt-overview, .vt-contact, .vt-callout { grid-template-columns: 1fr; }
  .vt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .vt-divisions, .vt-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-process, .vt-trust, .vt-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-footer-divisions .vt-footer-list { grid-template-columns: repeat(2, max-content); }
  .vt-footer-strip { padding-right: clamp(24px, 9vw, 150px); padding-bottom: 196px; min-height: 0; }
  .vt-footer-legal { margin-left: 0 !important; }
  .vt-footer-social { left: 50%; right: auto; transform: translateX(-50%); }
  .vt-footer-strip-logo { left: 50%; right: auto; transform: translateX(-50%); }
  .vt-faq { grid-template-columns: 1fr; gap: 16px; }
  .vt-hero-visual { min-height: 360px; }
  .vt-about-visual { min-height: 420px; }
}
@media (max-width: 700px) {
  :root { --vt-frame-gap: 8px; --vt-radius-lg: 22px; --vt-tab: 20px; --vt-header-h: 66px; }
  .vt-wrap { padding: 0 16px; }
  .vt-header { padding-right: 12px; }
  .vt-logo-tab { padding: 0 18px 2px 16px; }
  .vt-logo-tab img { width: 150px; }
  .vt-block { padding: 60px 0; }
  .vt-tiles, .vt-divisions, .vt-plans, .vt-process, .vt-trust, .vt-roles, .vt-services, .vt-paths, .vt-points { grid-template-columns: 1fr; }
  .vt-footer-grid { grid-template-columns: 1fr 1fr; justify-content: stretch; padding-top: 52px; }
  .vt-footer-divisions .vt-footer-list { grid-template-columns: 1fr; }
  .vt-footer-grid .vt-footer-list a, .vt-footer-contact li { white-space: normal; }
  .vt-footer-grid > div:last-child { grid-column: 1 / -1; }
  .vt-footer-cta { padding: 34px 26px; border-radius: 34px 0; }
  .vt-footer-strip { padding: 24px 22px 180px; }
  .vt-footer-strip-logo { bottom: 92px; }
  .vt-footer-strip-logo img { width: 200px; }
  .vt-footer-social { padding: 18px 20px 16px; }
  .vt-footer-social a { width: 36px; height: 36px; }
  .vt-banner, .vt-cta { margin-left: 8px; margin-right: 8px; padding: 44px 22px; }
  .vt-path { padding: 30px 24px; }
  .vt-hero-badge { max-width: 92%; }
  .vt-option { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .vt-dl div { grid-template-columns: 1fr; gap: 2px; }
  .vt-level { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vt *, .vt *::before, .vt *::after { transition: none !important; }
}

/* ================= D-247: home page in TheGem's AI Solutions composition ================= */
.vt-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 26px; border-radius: 999px; background: var(--vt-frame); color: #fff !important; font: 500 16px/1.2 'Sora', sans-serif; text-decoration: none; transition: background .15s; }
.vt-pill:hover { background: var(--vt-teal); }
.vt-pill-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vt-coral); color: #fff; transition: transform .2s; }
.vt-pill:hover .vt-pill-dot { transform: translateX(3px); }
.vt-pill-coral { background: var(--vt-coral-ink); }
.vt-pill-coral:hover { background: var(--vt-coral-dark); }
.vt-pill-coral .vt-pill-dot { background: #fff; color: var(--vt-label); }
.vt-pill-light { background: #fff; color: var(--vt-ink) !important; }
.vt-pill-light:hover { background: var(--vt-teal-soft); }

/* hero */
.vt-hx { --hx-bg: var(--vt-hero-mid); position: relative; margin-top: calc(-1 * var(--vt-header-h)); padding: calc(var(--vt-header-h) + 34px) 24px 40px; background: var(--vt-hero-bg); }
.vt-hx-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 32px; align-items: center; max-width: 1380px; margin: 0 auto; }
.vt-hx-copy { padding-left: clamp(0px, 4vw, 70px); }
.vt-hx-lines { font: 400 clamp(18px, 1.7vw, 26px)/1.4 'Sora', sans-serif; color: var(--vt-ink); margin: 0 0 clamp(28px, 6vw, 80px); }
.vt-hx-title { font: 400 clamp(46px, 6.2vw, 92px)/1.02 'Sora', sans-serif !important; letter-spacing: -.025em !important; margin: 0 !important; }
.vt-hx-stage { position: relative; height: clamp(540px, 46vw, 640px); margin-top: 24px; } /* room for the seal above the panel */
.vt-hx-pic { position: absolute; top: 0; bottom: 0; width: 41%; margin: 0; border-radius: 40px; overflow: hidden; background: var(--vt-frame); }
.vt-hx-pic img { width: 100%; height: 100%; object-fit: cover; }
.vt-hx-pic-a { left: 0; }
.vt-hx-pic-b { right: 0; }
.vt-hx-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; padding: 40px 30px; border-radius: 44px; background: var(--hx-bg); box-shadow: 0 0 0 18px var(--hx-bg); text-align: center; }
/* owner, 2026-10-10: smaller and in another type: light Manrope, the second line bold in teal */
.vt-hx-panel h2 { font: 300 clamp(22px, 1.9vw, 30px)/1.25 'Manrope', sans-serif !important; letter-spacing: -.01em !important; margin-bottom: 14px; }
.vt-hx-panel h2 strong { display: block; font-weight: 700; color: var(--vt-teal); }
.vt-hx-panel p { margin: 0 0 24px; color: var(--vt-ink); font-size: 16px; }
.vt-hx-facts { position: relative; z-index: 3; display: flex; gap: 22px; flex-wrap: wrap; max-width: 1380px; margin: -40px auto 0; padding-left: clamp(0px, 4vw, 70px); }
.vt-fact { display: flex; align-items: center; gap: 16px; padding: 18px 26px; border-radius: 40px; background: #fff; box-shadow: 0 20px 40px -26px rgba(11, 36, 48, .4); color: var(--vt-ink) !important; text-decoration: none; }
.vt-fact strong { display: block; font: 400 24px/1.2 'Sora', sans-serif; color: var(--vt-teal); }
.vt-fact small { display: block; font-size: 14px; color: var(--vt-ink); }
.vt-fact-ring { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--vt-teal-2); color: var(--vt-teal-2); }
.vt-fact-ring .vt-icon { transform: rotate(-90deg); }
.vt-fact-spark { width: 90px; height: 30px; color: var(--vt-teal-2); }
.vt-ring { position: relative; width: 74px; height: 74px; }
.vt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vt-ring circle { fill: none; stroke-width: 7; }
.vt-ring-track { stroke: #E2EEF0; }
.vt-ring-bar { stroke: var(--vt-teal-2); stroke-linecap: round; }
.vt-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 20px/1 'Sora', sans-serif; color: var(--vt-ink); }

/* dark band with the plan card over its edge */
.vt-band-wrap { padding: 0 24px; margin: 70px 0 30px; }
.vt-band { position: relative; max-width: 1380px; margin: 0 auto; border-radius: 40px; background: var(--vt-frame); padding: 44px 420px 44px 52px; display: grid; gap: 28px; color: rgba(255, 255, 255, .78); }
.vt-band-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vt-band-item { display: flex; gap: 16px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; }
.vt-band-item p { margin: 0; }
.vt-band-item strong { display: block; color: #fff; font: 400 18px/1.35 'Sora', sans-serif; margin-bottom: 4px; }
.vt-band-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .08); color: var(--vt-brand-on-dark); flex: none; }
.vt-band > .vt-pill { justify-self: start; }
.vt-band-card { position: absolute; right: 40px; top: -46px; width: 340px; padding: 24px 26px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -30px rgba(11, 36, 48, .55); color: var(--vt-ink); }
.vt-band-card-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 16px; font: 400 18px/1.3 'Sora', sans-serif; }
.vt-band-card-head small { font: 400 13px 'Inter', sans-serif; color: var(--vt-muted); }
.vt-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vt-bars li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 54px; gap: 12px; align-items: center; font-size: 14px; }
.vt-bars i { position: relative; display: block; height: 10px; border-radius: 6px; background: var(--vt-teal-soft); }
.vt-bars i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--vt-teal), var(--vt-teal-2)); }
.vt-bars li:nth-child(1) i::after { width: 18.75%; }
.vt-bars li:nth-child(2) i::after { width: 50%; }
.vt-bars li:nth-child(3) i::after { width: 100%; }
.vt-bars b { font: 400 15px 'Sora', sans-serif; text-align: right; }

/* about with the accordion */
.vt-block-tight { padding-top: 24px; }
.vt-split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: 48px; }
.vt-split-head h2 { font-size: clamp(32px, 3.8vw, 54px) !important; margin: 0 !important; }
.vt-split-head p { color: var(--vt-muted); margin: 0 0 10px; }
.vt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.vt-split-media { position: relative; min-height: 600px; border-radius: 40px; overflow: hidden; }
.vt-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-split-title { font: 400 clamp(28px, 3vw, 42px)/1.15 'Sora', sans-serif !important; margin-bottom: 22px !important; }
.vt-accordion { display: grid; gap: 12px; }
.vt-accordion details { border-radius: 30px; }
.vt-accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 12px 12px 28px; border-radius: 999px; background: #fff; border: 1px solid var(--vt-line); box-shadow: 0 10px 26px -20px rgba(11, 36, 48, .5); cursor: pointer; list-style: none; font: 400 19px/1.3 'Sora', sans-serif; color: var(--vt-ink); }
.vt-accordion summary::-webkit-details-marker { display: none; }
.vt-accordion summary i { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--vt-teal-2); flex: none; }
.vt-accordion summary i::before, .vt-accordion summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--vt-teal-2); transform: translate(-50%, -50%); transition: transform .2s; }
.vt-accordion summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.vt-accordion details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.vt-accordion details p { margin: 0; padding: 16px 28px 8px; color: var(--vt-muted); }

/* the divisions as rows over a watermark */
.vt-rows-wrap { padding: 0 24px; margin: 30px 0; }
.vt-rows { position: relative; overflow: hidden; max-width: 1380px; margin: 0 auto; border-radius: 40px; background: linear-gradient(165deg, #10414E 0%, #0B2F39 70%); padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 64px); color: rgba(255, 255, 255, .75); }
.vt-rows-mark { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); margin: 0; font: 600 clamp(80px, 15vw, 230px)/1 'Sora', sans-serif; letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .09); pointer-events: none; user-select: none; }
.vt-rows-head { position: relative; max-width: 760px; margin-bottom: 44px; }
.vt-rows-head h2 { color: #fff !important; font-size: clamp(32px, 4.2vw, 60px) !important; }
.vt-rows-head .vt-eyebrow { color: var(--vt-label-on-dark); }
.vt-rows-list { position: relative; list-style: none; margin: 0; padding: 0; }
.vt-rows-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .12); color: inherit; text-decoration: none; }
.vt-rows-list li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.vt-rows-name { color: #fff; font: 400 clamp(22px, 2.5vw, 34px)/1.2 'Sora', sans-serif; transition: color .15s; }
.vt-rows-text { font-size: 15px; }
.vt-rows-go { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; transition: background .15s, border-color .15s; }
.vt-rows-list a:hover .vt-rows-name { color: var(--vt-label-on-dark); }
.vt-rows-list a:hover .vt-rows-go { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); }

/* plans with the notched tab */
.vt-tplans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.vt-tplan { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; min-height: 300px; padding: 70px 30px 30px; border-radius: 32px; background: linear-gradient(140deg, #D9F2F0, #EEF8FA); }
.vt-tplan.is-dark { background: var(--vt-frame); color: rgba(255, 255, 255, .8); }
.vt-tplan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.vt-tplan li { display: flex; gap: 8px; align-items: center; }
.vt-tplan li .vt-icon { color: var(--vt-teal-2); }
.vt-tplan.is-dark li .vt-icon { color: var(--vt-brand-on-dark); }
.vt-tplan-price { order: -1; }
.vt-tplan-price h3 { font-size: 20px !important; margin: 0 !important; }
.vt-tplan.is-dark h3, .vt-tplan.is-dark .vt-tplan-hours { color: #fff; }
.vt-tplan-hours { font: 400 clamp(34px, 3.4vw, 46px)/1.1 'Sora', sans-serif; color: var(--vt-teal); margin: 6px 0 !important; }
.vt-tplan-price p:last-child { font-size: 13px; color: var(--vt-muted); margin: 0; }
.vt-tplan.is-dark .vt-tplan-price p:last-child { color: rgba(255, 255, 255, .65); }
.vt-tplan-tab { position: absolute; top: 0; right: 0; padding: 0 0 12px 14px; background: var(--vt-bg); border-bottom-left-radius: 26px; }
.vt-tplan-tab::before, .vt-tplan-tab::after { content: ''; position: absolute; width: 26px; height: 26px; background: radial-gradient(circle at 0 100%, transparent 25.5px, var(--vt-bg) 26px); }
.vt-tplan-tab::before { right: 100%; top: 0; }
.vt-tplan-tab::after { right: 0; top: 100%; }
.vt-tplan-btn { display: inline-block; padding: 11px 24px; border-radius: 999px; background: var(--vt-frame); color: #fff !important; font: 500 14px/1 'Sora', sans-serif; text-decoration: none; }
.vt-tplan.is-dark .vt-tplan-btn { background: var(--vt-coral-ink); }

/* bento of roles */
.vt-bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr .95fr; gap: 18px; }
.vt-bento-intro, .vt-bento-cta { grid-row: 1 / span 2; border-radius: 32px; }
.vt-bento-intro { grid-column: 1; }
.vt-bento-cta { grid-column: 4; }
.vt-bento-intro { position: relative; overflow: hidden; min-height: 470px; color: #fff !important; text-decoration: none; }
.vt-bento-intro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-bento-intro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 45, 55, .05) 30%, rgba(10, 45, 55, .85) 100%); }
.vt-bento-intro span { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 28px; }
.vt-bento-intro small { display: block; font-size: 14px; color: var(--vt-label-on-dark); margin-bottom: 6px; }
.vt-bento-intro strong { display: block; font: 400 clamp(26px, 2.6vw, 36px)/1.15 'Sora', sans-serif; color: #fff; }
.vt-bento-card { padding: 26px; border-radius: 32px; background: linear-gradient(140deg, #D9F2F0, #EEF8FA); }
.vt-bento-card.is-dark { background: var(--vt-frame); color: rgba(255, 255, 255, .78); }
.vt-bento-card.is-dark h3 { color: #fff; }
.vt-bento-card.is-dark .vt-tile-icon { background: rgba(255, 255, 255, .1); color: var(--vt-brand-on-dark); }
.vt-bento-card h3 { font-size: 19px !important; margin: 16px 0 6px !important; }
.vt-bento-card p { margin: 0 0 10px; font-size: 14.5px; }
.vt-bento-card ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.vt-bento-cta { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 28px; background: linear-gradient(160deg, var(--vt-teal), var(--vt-frame)); color: rgba(255, 255, 255, .85) !important; text-decoration: none; }
.vt-bento-cta p { margin: 0; font: 400 22px/1.35 'Sora', sans-serif; color: #fff; }
.vt-bento-cta small { font-size: 14px; color: var(--vt-label-on-dark); }
.vt-bento-go { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--vt-coral-ink); color: #fff; transition: transform .2s; }
.vt-bento-cta:hover .vt-bento-go { transform: translateX(4px); }

/* reviews */
.vt-reviews { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.vt-reviews-head h2 { font-size: clamp(32px, 3.6vw, 50px) !important; }
.vt-reviews-head p { color: var(--vt-muted); }
.vt-sample-note { display: inline-block; padding: 8px 14px; border-radius: 12px; background: #FDF1EF; border: 1px solid #F2B8B0; color: var(--vt-coral-dark) !important; font-size: 14px; }
.vt-slider { position: relative; overflow: hidden; }
.vt-slider-track { display: flex; gap: 18px; transition: transform .35s ease; }
.vt-review { position: relative; flex: 0 0 calc(50% - 9px); margin: 0; padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--vt-line); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 260px; }
.vt-review.is-sample { border-style: dashed; padding-top: 58px; }
.vt-review blockquote { margin: 0; font: 400 17px/1.6 'Sora', sans-serif; color: var(--vt-ink); }
.vt-review figcaption strong { display: block; color: var(--vt-teal); font-family: 'Sora', sans-serif; font-weight: 500; }
.vt-review figcaption span { font-size: 14px; color: var(--vt-muted); }
.vt-sample-badge { position: absolute; top: 18px; right: 18px; padding: 3px 10px; border-radius: 999px; border: 1px solid #F2B8B0; color: var(--vt-coral-dark); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.vt-slider-nav { display: flex; gap: 10px; margin-top: 20px; }
.vt-slider-nav button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--vt-line); background: #fff; color: var(--vt-ink); cursor: pointer; }
.vt-slider-nav button:hover:not(:disabled) { border-color: var(--vt-teal-2); color: var(--vt-teal); }
.vt-slider-nav button:disabled { opacity: .35; cursor: default; }
.vt-slider-nav [data-vt-prev] .vt-icon { transform: rotate(180deg); }

/* video */
.vt-video { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: clamp(40px, 5vw, 64px); border-radius: 40px; background: linear-gradient(165deg, #10414E 0%, #0B2F39 70%); color: rgba(255, 255, 255, .78); }
.vt-video-copy img { width: 84px; height: 84px; margin-bottom: 22px; }
.vt-video-copy h2 { color: #fff !important; font-size: clamp(30px, 3.4vw, 48px) !important; }
.vt-video-copy p { margin: 0 0 26px; font-size: 17px; font-style: italic; }
.vt-video-frame { border-radius: 30px; overflow: hidden; background: #000; aspect-ratio: 2047 / 1080; }
.vt-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1180px) {
  .vt-band { padding-right: 52px; }
  .vt-band-card { position: relative; order: -1; top: auto; right: auto; width: min(380px, 100%); box-shadow: none; }
  .vt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-bento-intro, .vt-bento-cta { grid-row: auto; }
  .vt-bento-intro { min-height: 320px; grid-column: 1 / -1; }
  .vt-bento-cta { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .vt-hx-grid { grid-template-columns: 1fr; }
  .vt-hx-copy { padding-left: 0; }
  .vt-hx-facts { margin-top: 24px; padding-left: 0; }
  .vt-band-items, .vt-tplans { grid-template-columns: 1fr; }
  .vt-split-head, .vt-split, .vt-reviews, .vt-video { grid-template-columns: 1fr; }
  .vt-split-media { min-height: 420px; }
}
@media (max-width: 700px) {
  .vt-hx { padding-left: 12px; padding-right: 12px; }
  .vt-hx-stage { height: auto; display: grid; gap: 14px; }
  .vt-hx-pic { position: relative; width: 100%; height: 220px; border-radius: 28px; }
  .vt-hx-pic-b { display: none; }
  .vt-hx-panel { position: relative; left: auto; top: auto; transform: none; width: auto; padding: 28px 20px; box-shadow: none; border-radius: 28px; background: #fff; }
  .vt-band-wrap, .vt-rows-wrap { padding: 0 8px; }
  .vt-band { padding: 22px 22px 30px; border-radius: 30px; }
  .vt-band-card { width: 100%; }
  .vt-rows-list a { grid-template-columns: minmax(0, 1fr) 44px; }
  .vt-rows-text { display: none; }
  .vt-tplan { min-height: 0; }
  .vt-bento { grid-template-columns: 1fr; }
  .vt-review { flex-basis: 100%; }
  .vt-split-media { min-height: 340px; }
}

/* ================= D-247: inner pages in the same composition ================= */
/* page head: the hero's mint, the header over it */
.vt-ph { position: relative; margin-top: calc(-1 * var(--vt-header-h)); padding: calc(var(--vt-header-h) + 44px) 24px 64px; background: var(--vt-hero-bg); }
.vt-ph-grid { max-width: 1380px; margin: 0 auto; display: grid; gap: 48px; align-items: center; }
.vt-ph.has-side .vt-ph-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.vt-ph-copy { padding-left: clamp(0px, 4vw, 70px); }
.vt-ph h1 { font: 400 clamp(40px, 5vw, 76px)/1.04 'Sora', sans-serif !important; letter-spacing: -.025em !important; margin: 0 0 22px !important; max-width: 16ch; }
.vt-ph-text { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--vt-text); }
.vt-ph .vt-crumbs { margin-bottom: 26px; }
.vt-ph-pic { position: relative; margin: 0; height: clamp(320px, 32vw, 470px); }
.vt-ph-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 40px; display: block; }
.vt-ph-card { position: absolute; left: -32px; bottom: 32px; }
.vt-ph-badge { display: grid; gap: 14px; justify-items: start; padding: clamp(32px, 4vw, 52px); border-radius: 40px; background: linear-gradient(160deg, var(--vt-teal), var(--vt-frame)); color: rgba(255, 255, 255, .8); box-shadow: 0 30px 60px -36px rgba(11, 36, 48, .6); }
.vt-ph-badge-icon { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 28px; background: rgba(255, 255, 255, .1); color: var(--vt-brand-on-dark); }
.vt-ph-badge-count { margin: 10px 0 0; font: 400 18px/1.2 'Sora', sans-serif; color: #fff; }
.vt-ph-badge-count strong { font: 400 clamp(54px, 6vw, 84px)/1 'Sora', sans-serif; letter-spacing: -.03em; margin-right: 6px; color: #fff; }
.vt-ph-badge-text { margin: 0; font-size: 16px; }
.vt-split-head-center { align-items: center; }
.vt-split-head > div > .vt-pill, .vt-split-head .vt-actions { margin-top: 18px; }
.vt-actions .vt-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Sora', sans-serif; text-decoration: none; }
.vt-space { height: 40px; }

/* the divisions with their services (Services page) */
.vt-rows-list.has-services > li { border-top: 1px solid rgba(255, 255, 255, .12); }
.vt-rows-list.has-services > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.vt-rows-list.has-services > li > a { border: 0 !important; padding-bottom: 14px; }
.vt-rows-services { list-style: none; margin: 0; padding: 0 70px 26px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vt-rows-services a { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .82); font-size: 14px; text-decoration: none; transition: background .15s, border-color .15s; }
.vt-rows-services a:hover { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); color: #fff; }

/* one division: an index on the left, the service cards on the right */
.vt-svc { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 48px; align-items: start; }
.vt-svc-nav { position: sticky; top: calc(var(--vt-header-h) + 24px); }
.vt-svc-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vt-svc-nav a { display: flex; gap: 12px; padding: 10px 14px; border-radius: 14px; color: var(--vt-ink); font-size: 15px; line-height: 1.35; text-decoration: none; transition: background .15s; }
.vt-svc-nav a span { font: 400 13px/1.6 'Sora', sans-serif; color: var(--vt-label); }
.vt-svc-nav a:hover { background: var(--vt-teal-soft); }
.vt-svc-list { display: grid; gap: 18px; }
.vt-svc-card { scroll-margin-top: calc(var(--vt-header-h) + 24px); padding: clamp(26px, 3vw, 40px); border-radius: 32px; background: linear-gradient(140deg, #D9F2F0, #EEF8FA); color: var(--vt-text); }
.vt-svc-card.is-dark { background: var(--vt-frame); color: rgba(255, 255, 255, .78); }
.vt-svc-num { margin: 0 0 10px; font: 400 15px/1 'Sora', sans-serif; color: var(--vt-label); }
.vt-svc-card.is-dark .vt-svc-num { color: var(--vt-label-on-dark); }
.vt-svc-card h3 { font-size: clamp(22px, 2.2vw, 30px) !important; font-weight: 400 !important; margin: 0 0 12px !important; }
.vt-svc-card.is-dark h3 { color: #fff; }
.vt-svc-card > p { margin: 0 0 18px; max-width: 70ch; }
.vt-svc-label { margin: 0 0 10px !important; font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-label); }
.vt-svc-card.is-dark .vt-svc-label { color: var(--vt-label-on-dark); }
.vt-chips { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vt-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; color: var(--vt-ink); font-size: 14px; }
.vt-chips .vt-icon { color: var(--vt-teal-2); }
.vt-svc-card.is-dark .vt-chips li { background: rgba(255, 255, 255, .08); color: #fff; }
.vt-svc-card.is-dark .vt-chips .vt-icon { color: var(--vt-brand-on-dark); }
.vt-svc-outcome { display: flex; gap: 14px; align-items: baseline; margin: 0; padding-top: 18px; border-top: 1px solid rgba(11, 36, 48, .1); color: var(--vt-ink); font: 400 17px/1.5 'Sora', sans-serif; }
.vt-svc-outcome strong { flex: none; font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-label); }
.vt-svc-card.is-dark .vt-svc-outcome { color: #fff; border-top-color: rgba(255, 255, 255, .14); }
.vt-svc-card.is-dark .vt-svc-outcome strong { color: var(--vt-label-on-dark); }

/* why it matters, and the request */
.vt-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.vt-why-card { padding: clamp(32px, 4vw, 52px); border-radius: 40px; background: linear-gradient(140deg, #D9F2F0, #EEF8FA); }
.vt-why-card h2 { font-size: clamp(28px, 2.8vw, 40px) !important; }
.vt-why-card p { color: var(--vt-text); }
.vt-why-card.is-dark { background: var(--vt-frame); }
.vt-why-card.is-dark h2 { color: #fff; }
.vt-why-card.is-dark p { color: rgba(255, 255, 255, .78); }
.vt-why-card.is-dark .vt-eyebrow { color: var(--vt-label-on-dark); }
.vt-why-card .vt-pill { margin-top: 10px; }

/* about: trust on dark, the steps as numbered cards */
.vt-dark-items { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.vt-dark-items .vt-band-item { flex-direction: column; color: rgba(255, 255, 255, .75); }
.vt-dark-tiles { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); }
.vt-dark-tiles p { margin: 0; font-size: 15px; }
.vt-dark-tiles strong { display: block; color: #fff; font: 400 22px/1.3 'Sora', sans-serif; margin-bottom: 6px; }
.vt-howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vt-howto-step { display: flex; flex-direction: column; min-height: 270px; padding: 30px; border-radius: 32px; background: linear-gradient(140deg, #D9F2F0, #EEF8FA); }
.vt-howto-step.is-dark { background: var(--vt-frame); color: rgba(255, 255, 255, .78); }
.vt-howto-step.is-dark h3 { color: #fff; }
.vt-howto-num { margin-bottom: auto; font: 400 58px/1 'Sora', sans-serif; letter-spacing: -.03em; color: var(--vt-teal-2); }
.vt-howto-step.is-dark .vt-howto-num { color: var(--vt-label-on-dark); }
.vt-howto-step h3 { font-size: 21px !important; margin: 28px 0 8px !important; }
.vt-howto-step p { margin: 0; font-size: 15px; }

/* pricing tables and the closing bar */
.vt-table-wrap { border-radius: 28px; }
.vt-table thead th { font: 400 15px/1.3 'Sora', sans-serif; padding: 18px; }
.vt-table tbody th { font: 400 15px/1.4 'Sora', sans-serif; }
.vt-table td.is-off { color: var(--vt-muted); }
.vt-yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-note-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 28px; padding: 22px 22px 22px 32px; border-radius: 32px; background: linear-gradient(140deg, #D9F2F0, #EEF8FA); }
.vt-note-bar p { margin: 0; color: var(--vt-ink); max-width: 70ch; }

/* FAQ */
.vt-faq-head { position: sticky; top: calc(var(--vt-header-h) + 24px); align-self: start; }
.vt-faq-num { display: block; margin-bottom: 10px; font: 400 15px/1 'Sora', sans-serif; color: var(--vt-label); }
.vt-faq .vt-accordion summary { font-size: 17px; }

/* contact */
.vt-contact-form { border-radius: 32px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 30px 60px -40px rgba(11, 36, 48, .5); }

@media (max-width: 1024px) {
  .vt-ph.has-side .vt-ph-grid { grid-template-columns: 1fr; }
  .vt-ph-copy { padding-left: 0; }
  .vt-ph-card { left: 20px; bottom: 20px; }
  .vt-svc { grid-template-columns: 1fr; }
  .vt-svc-nav { display: none; }
  .vt-why, .vt-faq { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vt-faq-head { position: static; }
  .vt-dark-items, .vt-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-dark-tiles { grid-template-columns: 1fr; }
  .vt-rows-services { padding-right: 0; }
}
@media (max-width: 700px) {
  .vt-ph { padding: calc(var(--vt-header-h) + 26px) 12px 40px; }
  .vt-ph-pic { height: auto; }
  .vt-ph-pic img { height: 240px; border-radius: 28px; }
  .vt-ph-card { position: relative; left: auto; bottom: auto; margin: -36px 14px 0; }
  .vt-ph-badge { border-radius: 30px; }
  .vt-dark-items, .vt-howto { grid-template-columns: 1fr; }
  .vt-howto-step { min-height: 0; }
  .vt-svc-card { border-radius: 26px; }
  .vt-svc-outcome { flex-direction: column; gap: 8px; }
  .vt-why-card { border-radius: 30px; }
  .vt-note-bar { padding: 22px; border-radius: 26px; }
  .vt-pill { white-space: normal; max-width: 100%; }
}

/* D-250: a division's services on the job form and the worker profile, folded until opened */
.vt-pick-group { border: 1px solid var(--vt-line); border-radius: 18px; background: #fff; margin: 0 0 10px; }
.vt-pick-group > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font: 500 16px/1.35 'Sora', 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-pick-group > summary::-webkit-details-marker { display: none; }
.vt-pick-group > summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--vt-teal-2); color: var(--vt-teal-2); font: 400 18px/1 'Sora', sans-serif; }
.vt-pick-group[open] > summary::after { content: '\2212'; }
.vt-pick-group > summary small { margin-left: auto; font: 400 13px 'Inter', sans-serif; color: var(--vt-muted); white-space: nowrap; }
.vt-pick-group > .vt-checks-grid, .vt-pick-group > .vt-levels { padding: 4px 18px 18px; }

/* owner, 2026-10-10: the turning seal of fikhsons.com on the hero: a dark ring with the words turning, the logo still in a white centre,
   sitting on the panel's top edge between the two pictures */
.vt-seal { --seal: 132px; position: absolute; z-index: 4; left: 50%; top: calc(var(--seal) / -2); width: var(--seal); height: var(--seal); margin-left: calc(var(--seal) / -2); border-radius: 50%; background: var(--vt-frame); box-shadow: 0 0 0 8px var(--hx-bg, var(--vt-hero-mid)), 0 18px 40px -18px rgba(11, 36, 48, .6); }
.vt-hx-panel { padding-top: calc(66px + 24px); }
.vt-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: vt-seal-turn 20s linear infinite; }
.vt-seal-text { font: 300 11px 'Sora', sans-serif; letter-spacing: 3px; fill: #BFE3E4; }
.vt-seal-mark { position: absolute; inset: 22%; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 36, 48, .08); }
.vt-seal-mark img { width: 74%; height: auto; display: block; }
@keyframes vt-seal-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vt-seal-ring { animation: none; } }
@media (max-width: 1024px) { .vt-hx-stage { margin-top: 48px; } }
/* on phones the seal sits on the top edge of the picture, as on the desktop it sits at the top between the pictures
   (owner, 2026-10-10); the picture is 220px tall and the stage gap 14px, so the seal is placed from the panel above them */
@media (max-width: 700px) {
  .vt-seal { --seal: 112px; top: calc(-220px - 14px - var(--seal) / 2); }
  .vt-hx-panel { padding-top: 28px; }
  .vt-hx-stage { margin-top: 56px; }
}

/* ===== the dark hero (owner, 2026-10-10): white words on dark teal, on the home hero and every page head ===== */
.vt-hx-lines { color: rgba(255, 255, 255, .86); }
.vt-hx-title, .vt-ph h1 { color: #fff !important; }
.vt-hx-panel h2, .vt-hx-panel p { color: #fff !important; }
.vt-hx-panel p { color: rgba(255, 255, 255, .8) !important; }
.vt-hx-panel h2 strong { color: #8FD9D2; }
.vt-hx-panel .vt-pill { background: var(--vt-coral-ink); }
.vt-hx-panel .vt-pill:hover { background: var(--vt-coral-dark); }
.vt-hx-panel .vt-pill .vt-pill-dot { background: #fff; color: var(--vt-label); }
.vt-seal { border: 1px solid rgba(255, 255, 255, .18); }
.vt-ph-text { color: rgba(255, 255, 255, .82); }
.vt-ph .vt-crumbs, .vt-ph .vt-crumbs a { color: rgba(255, 255, 255, .72); }
.vt-ph .vt-crumbs a:hover { color: #fff; }
.vt-ph .vt-crumbs li + li::before { color: rgba(255, 255, 255, .35); }
.vt-ph .vt-eyebrow { color: var(--vt-label-on-dark); }
.vt-ph-badge { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
/* the header over a dark head reads white until it sticks and gains its light bar */
.vt-panel:has(.vt-hx, .vt-ph) .vt-header:not(.is-stuck) .vt-menu > li > a { color: #fff; }
.vt-panel:has(.vt-hx, .vt-ph) .vt-header:not(.is-stuck) .vt-menu > li > a:hover,
.vt-panel:has(.vt-hx, .vt-ph) .vt-header:not(.is-stuck) .vt-menu > li > a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }
.vt-panel:has(.vt-hx, .vt-ph) .vt-header:not(.is-stuck) .vt-account { color: #fff !important; }
@media (max-width: 700px) {
  .vt-hx-panel { background: var(--vt-hero-mid); border: 1px solid rgba(255, 255, 255, .12); }
}

/* owner, 2026-10-10: the seal set into the video card's top left corner, 25% smaller, in a smooth round cut-out.
   Geometry (px, measured from the card's corner): the seal (radius a) touches the card's top and left lines, so its
   centre is (a, a); the cut is a disc of radius r = a + gap around it; where the disc meets the top and left edges, a
   fillet of radius f rounds the join. The fillet centre sits at (fx, f), with fx = a + sqrt((r + f)^2 - (a - f)^2), so
   it touches the edge and the disc; the page colour fills from the edge down to the touching point
   ty = a - r (a - f) / (r + f), so no sliver of the card is left between fillet and cut. Desktop: seal 112, gap 12,
   f 20 -> r 68, fx 136.3, ty 28.2. Phone: seal 84, gap 10, f 16 -> r 52, fx 104.8, ty 22.1. */
.vt-video { position: relative; }
.vt-video-notch { --seal: 112px; --gap: 12px; --f: 20px; --fx: 136.3px; --ty: 28.2px; position: absolute; z-index: 2; left: calc(-1 * var(--gap)); top: calc(-1 * var(--gap)); width: calc(var(--seal) + 2 * var(--gap)); height: calc(var(--seal) + 2 * var(--gap)); border-radius: 50%; background: var(--vt-bg); }
.vt-video-notch::before, .vt-video-notch::after { content: ''; position: absolute; z-index: 0; left: var(--gap); top: var(--gap); }
.vt-video-notch::before { width: var(--fx); height: var(--ty); background: radial-gradient(circle at 100% var(--f), transparent calc(var(--f) - .5px), var(--vt-bg) var(--f)); }
.vt-video-notch::after { width: var(--ty); height: var(--fx); background: radial-gradient(circle at var(--f) 100%, transparent calc(var(--f) - .5px), var(--vt-bg) var(--f)); }
.vt-video-notch .vt-seal { --seal: inherit; position: absolute; z-index: 1; left: var(--gap); top: var(--gap); margin: 0; width: var(--seal); height: var(--seal); box-shadow: none; }
.vt-video-copy { padding-top: 84px; }
@media (max-width: 1024px) { .vt-video-copy { padding-top: 104px; } }
@media (max-width: 700px) {
  .vt-video-notch { --seal: 84px; --gap: 10px; --f: 16px; --fx: 104.8px; --ty: 22.1px; }
  .vt-video-copy { padding-top: 80px; }
}

/* ===== owner, 2026-10-10: the hero words finer and premium, the two fact cards as glass on the dark hero ===== */
.vt-hx-lines { font: 300 clamp(16px, 1.3vw, 20px)/1.65 'Manrope', sans-serif; letter-spacing: .01em; color: rgba(255, 255, 255, .74); }
.vt-hx-title { font: 200 clamp(40px, 5vw, 76px)/1.03 'Manrope', sans-serif !important; letter-spacing: -.035em !important; }
/* owner, 2026-10-11: the shade runs into the logo's red orange (logo #DB4327 reads 2.72:1 on the hero, so its brighter twin #EC5C43, 3.47:1) */
.vt-hx-title em { font-style: normal; font-weight: 600; color: #EC5C43; background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 35%, #EC5C43 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vt-hx-facts .vt-fact { position: relative; gap: 18px; padding: 16px 26px 16px 16px; border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 48px -30px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff !important; transition: transform .25s, border-color .25s, background .25s; }
.vt-hx-facts .vt-fact:hover { transform: translateY(-3px); border-color: rgba(143, 217, 210, .55); background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); }
.vt-hx-facts .vt-fact strong { font: 300 24px/1.15 'Manrope', sans-serif; letter-spacing: -.01em; color: #fff; }
.vt-hx-facts .vt-fact small { margin-top: 3px; font: 400 13px/1.4 'Manrope', sans-serif; letter-spacing: .02em; color: var(--vt-label-on-dark); }
.vt-hx-facts .vt-fact-ring { width: 52px; height: 52px; border: 1px solid rgba(143, 217, 210, .55); background: rgba(143, 217, 210, .1); color: #8FD9D2; }
.vt-hx-facts .vt-fact-spark { color: #8FD9D2; }
.vt-hx-facts .vt-ring { width: 60px; height: 60px; }
.vt-hx-facts .vt-ring-track { stroke: rgba(255, 255, 255, .14); }
.vt-hx-facts .vt-ring-bar { stroke: #8FD9D2; }
.vt-hx-facts .vt-ring b { font: 500 16px/1 'Manrope', sans-serif; color: #fff; }

/* ===== owner, 2026-10-10: the left column lines up with the pictures, as in TheGem's AI Solutions hero (measured there:
   the tagline sits at the top, the title right under it, the fact card at the bottom of the column). Here the
   tagline's capital line starts on the pictures' top edge, the title follows it, and the fact cards end on the
   pictures' bottom edge; the title is sized to the column, so it fills its width at every desktop size. ===== */
.vt-hx-grid { align-items: stretch; }
.vt-hx-copy { container-type: inline-size; display: flex; flex-direction: column; padding-top: 24px; } /* 24px = the stage's top margin */
.vt-hx-lines { margin: 0 0 clamp(26px, 2.8vw, 42px); text-box: trim-start cap alphabetic; }
.vt-hx-title { font-size: clamp(38px, 14.6cqi, 78px) !important; }
.vt-hx-facts { z-index: 3; margin: auto 0 0; padding: 32px 0 0; max-width: none; width: min(100%, 420px); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
.vt-hx-facts .vt-fact-spark { margin-left: auto; }
@media (max-width: 1024px) {
  .vt-hx-grid { row-gap: 22px; }
  .vt-hx-copy { display: contents; }
  .vt-hx-lines { order: 1; margin: 0; }
  .vt-hx-title { order: 2; }
  .vt-hx-stage { order: 3; }
  .vt-hx-facts { order: 4; width: auto; padding: 8px 0 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}
@media (max-width: 700px) {
  .vt-hx-facts { flex-direction: column; align-items: stretch; }
  .vt-hx-title { font-size: 12.8vw !important; } /* "Virtual Assistant" is 6.6em wide: one line on a phone */
}

/* ===== owner, 2026-10-10: one alignment for the whole site (measured, not judged by eye).
   Two rails only. The frame rail: the dark cards and the hero pictures span the 1380px frame. The content rail: every
   text column and every light card starts and ends --vt-inset inside the frame. At 1530px wide the frame is 75 to 1455
   and the content 139 to 1391; before this the text started at 127, 136, 139 or 189 depending on the section. ===== */
:root { --vt-inset: clamp(24px, 4.5vw, 64px); }
.vt-block > .vt-wrap, .vt-section > .vt-wrap.vt-legal, .vt-footer > .vt-wrap { max-width: calc(1380px + 48px); padding-left: calc(24px + var(--vt-inset)); padding-right: calc(24px + var(--vt-inset)); }
.vt-hx-copy, .vt-ph-copy { padding-left: var(--vt-inset); }
.vt-band { padding-left: var(--vt-inset); }
.vt-band-card { right: var(--vt-inset); }
.vt-rows, .vt-video { padding-left: var(--vt-inset); padding-right: var(--vt-inset); }
.vt-legal > * { max-width: 820px; }
.vt-rows-go { justify-self: end; } /* the arrow ends on the content rail */ /* legal text keeps its reading width on the content rail */

/* the about head: the title's capital line and the first paragraph's start on one line (was 114px apart) */
.vt-split-head { align-items: start; }
.vt-split-head h2, .vt-split-head > div > p:first-child { text-box: trim-start cap alphabetic; }
/* the about picture is exactly as tall as the column beside it (was 29px taller) */
.vt-split { align-items: stretch; }
.vt-split-media { min-height: 0; }
.vt-split-side > :last-child { margin-bottom: 0; }

/* the hero cards: one grid inside both, so the icons are the same size and the words start on one line (were 8px apart) */
.vt-hx-facts .vt-fact { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
.vt-hx-facts .vt-fact-ring, .vt-hx-facts .vt-ring { width: 56px; height: 56px; }

@media (max-width: 1024px) {
  .vt-hx-copy { padding-left: 0; }
  .vt-hx-lines, .vt-hx-title, .vt-hx-facts { padding-left: var(--vt-inset); padding-right: var(--vt-inset); }
  .vt-ph-copy { padding-left: var(--vt-inset); }
  .vt-band { padding-right: var(--vt-inset); }
  .vt-split-media { min-height: 420px; }
}
@media (max-width: 700px) {
  .vt-split-media { min-height: 340px; }
}
/* cards side by side: a title takes two lines' room, so the words under it start on one line in every card
   (the bento's "Executive Assistant" is one line beside "Sales Outreach Specialist" on two: 22px apart before) */
.vt-bento-card h3, .vt-howto-step h3 { min-height: calc(2 * 1.16em); }
/* how we work: number, title and text from the top in every card (a longer text pushed the 4th title 25px up) */
.vt-howto-num { margin-bottom: 0; }
.vt-howto-step h3 { margin-top: 40px !important; }
/* phones: the same two rails. Frame 8px inside the panel (where the dark cards already sat), content --vt-inset
   inside the frame; measured at 375px before this: text at 40, 44 or 56 depending on the section */
@media (max-width: 700px) {
  .vt-hx, .vt-ph { padding-left: 8px; padding-right: 8px; }
  .vt-block > .vt-wrap, .vt-section > .vt-wrap.vt-legal, .vt-footer > .vt-wrap { padding-left: calc(8px + var(--vt-inset)); padding-right: calc(8px + var(--vt-inset)); }
}

/* ===== owner, 2026-10-10 (second pass): ONE rail for everything. The hero's words and cards, the dark cards' outer
   edges, every light card and every heading start on the same line and end on the same line: --vt-rail from the
   panel's edge, at most 1252px wide (at 1530px wide: 139 to 1391). A dark card's own words sit inside its padding. */
:root { --vt-rail: calc(24px + var(--vt-inset)); --vt-rail-max: 1252px; }
.vt-hx, .vt-ph { padding-left: var(--vt-rail); padding-right: var(--vt-rail); }
.vt-hx-grid, .vt-ph-grid { max-width: var(--vt-rail-max); }
.vt-hx-copy, .vt-ph-copy { padding-left: 0; }
.vt-band-wrap, .vt-rows-wrap { padding-left: var(--vt-rail); padding-right: var(--vt-rail); }
.vt-band, .vt-rows, .vt-video { max-width: var(--vt-rail-max); }
.vt-block > .vt-wrap, .vt-section > .vt-wrap.vt-legal, .vt-footer > .vt-wrap { max-width: calc(var(--vt-rail-max) + 2 * var(--vt-rail)); padding-left: var(--vt-rail); padding-right: var(--vt-rail); }
@media (max-width: 1024px) {
  .vt-hx-lines, .vt-hx-title, .vt-hx-facts { padding-left: 0; padding-right: 0; }
  .vt-ph-copy { padding-left: 0; }
}
@media (max-width: 700px) {
  :root { --vt-rail: 16px; --vt-inset: 22px; }
  .vt-hx, .vt-ph, .vt-band-wrap, .vt-rows-wrap { padding-left: var(--vt-rail); padding-right: var(--vt-rail); }
  .vt-block > .vt-wrap, .vt-section > .vt-wrap.vt-legal, .vt-footer > .vt-wrap { padding-left: var(--vt-rail); padding-right: var(--vt-rail); }
}
/* the band's three promises: icon above the words, so each title stays on one line in the narrower band */
.vt-band-items .vt-band-item { flex-direction: column; gap: 16px; }

/* ===== owner, 2026-10-10 (third pass): the content runs between the header's own edges, as in TheGem, where the
   header and the content share one left and one right line. The logo starts --vt-rail inside the panel and the
   last header button ends --vt-rail inside it; every section uses the same two lines, at every width
   (measured at 1880px before this: header 38 to 1844, content 314 to 1566). ===== */
:root { --vt-rail: 24px; --vt-rail-max: 100000px; }
.vt-logo-tab { padding-left: var(--vt-rail); }
.vt-header { padding-right: var(--vt-rail); }
@media (max-width: 700px) {
  :root { --vt-rail: 16px; }
  .vt-logo-tab { padding-left: var(--vt-rail); }
  .vt-header { padding-right: var(--vt-rail); }
}

/* ===== owner, 2026-10-10: the footer's words. The strip's copyright and links start on the site rail like everything
   above them; the columns use the site's type (Sora titles, Manrope links) at one size and one line spacing. ===== */
.vt-footer-strip { padding-left: var(--vt-rail); }
.vt-footer-copy { margin: 0; color: var(--vt-ink); font: 400 14px/1.6 'Manrope', sans-serif; }
.vt-footer-copy span { display: inline-block; margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(11, 36, 48, .25); }
.vt-footer-copy a { color: var(--vt-teal) !important; font-weight: 600; text-decoration: none; }
.vt-footer-copy a:hover { color: var(--vt-label) !important; }
.vt-footer-legal { font: 400 14px/1.6 'Manrope', sans-serif; }
.vt-footer-title { font: 400 18px/1.3 'Sora', sans-serif !important; letter-spacing: -.005em; margin: 0 0 22px !important; }
.vt-footer-list { gap: 13px; }
.vt-footer-list a, .vt-footer-contact li, .vt-footer-contact a { font: 400 15px/1.45 'Manrope', sans-serif; color: rgba(255, 255, 255, .82); text-decoration: none; }
.vt-footer-list a:hover, .vt-footer-contact a:hover { color: var(--vt-label-on-dark); }
.vt-footer-list .vt-icon, .vt-footer-contact .vt-icon { flex: none; }
@media (max-width: 700px) {
  .vt-footer-copy span { display: block; margin: 4px 0 0; padding: 0; border: 0; }
}

/* the trademark sign after every FiKHSONS, the same rule and size as on fikhsons.com (its .fik-tm), from the shared pass */
.fik-tm { font-size: .22em; font-weight: 400; line-height: 0; letter-spacing: .02em; margin-inline-start: .05em; position: relative; vertical-align: baseline; top: -2.25em; }
.vt-footer-copy .fik-tm { font-size: .5em; top: -.9em; }

/* ===== owner, 2026-10-10: the footer logo stands exactly over the social tab: as wide as the tab, so their left and
   right edges are one line, and with equal room above (from the strip's top) and below (to the tab's top).
   Measured before: logo 230 wide over a 292 tab, 48px above it and 22px below. The logo image has no transparent
   margin (alpha bounds 0..639 x 0..121 of 640 x 122), so its box is its visible edge. ===== */
.vt-footer-strip { --zone: 196px; --tab-w: 292px; --tab-h: 82px; }
.vt-footer-strip-logo { width: var(--tab-w); bottom: calc(var(--tab-h) + (var(--zone) - var(--tab-h) - var(--tab-w) * 122 / 640) / 2); }
.vt-footer-strip-logo img { width: 100%; height: auto; }
@media (max-width: 700px) {
  .vt-footer-strip { --zone: 180px; --tab-w: 252px; --tab-h: 70px; }
}
/* owner, 2026-10-10: the footer logo 25% smaller (75% of the tab's width), centred over the tab, equal room above and below */
.vt-footer-strip { --logo-scale: .75; }
.vt-footer-strip-logo { bottom: calc(var(--tab-h) + (var(--zone) - var(--tab-h) - var(--tab-w) * var(--logo-scale) * 122 / 640) / 2); }
.vt-footer-strip-logo img { width: calc(100% * var(--logo-scale)); }
/* owner, 2026-10-10: the footer logo lower, close over the social tab: 20px between the logo and the tab */
.vt-footer-strip-logo { bottom: calc(var(--tab-h) + 20px); }
/* owner, 2026-10-10: the footer logo lower still (10px over the tab) and on the left: its left edge on the first
   social icon's left edge (the tab's inner padding: 30px, 20px on phones) */
.vt-footer-strip { --tab-pad: 30px; }
.vt-footer-strip-logo { bottom: calc(var(--tab-h) + 10px); justify-content: flex-start; padding-left: var(--tab-pad); box-sizing: border-box; }
.vt-footer-strip-logo img { width: calc((var(--tab-w)) * var(--logo-scale)); }
@media (max-width: 700px) { .vt-footer-strip { --tab-pad: 20px; } }
/* owner, 2026-10-10: the social icons 30% smaller (40 to 28px, 36 to 25px on phones), their marks with them; the tab's
   size follows (desktop 232 x 70, phone 197 x 59) and the logo keeps its own width, 10px over the tab, on the first icon */
.vt-footer-social a { width: 28px; height: 28px; }
.vt-footer-social a svg { width: 12px; height: 12px; }
.vt-footer-strip { --tab-w: 232px; --tab-h: 70px; }
.vt-footer-strip-logo img { width: 219px; }
@media (max-width: 700px) {
  .vt-footer-social a { width: 25px; height: 25px; }
  .vt-footer-social a svg { width: 11px; height: 11px; }
  .vt-footer-strip { --tab-w: 197px; --tab-h: 59px; }
  .vt-footer-strip-logo img { width: 189px; }
}
.vt-footer-strip-logo img { max-width: none; } /* the logo keeps its width even where it reaches past the smaller tab */
/* owner, 2026-10-10: the footer logo further left: its left edge on the social tab's own left edge */
.vt-footer-strip-logo { padding-left: 0; }
/* owner, 2026-10-10: the mint strip ends 24px above the logo (it stood 74px above it): its height is the tab, the
   10px under the logo, the logo itself (its width x 122 / 640) and 24px */
.vt-footer-strip { --logo-w: 219px; --logo-top-gap: 24px; --logo-stack: calc(var(--tab-h) + 10px + var(--logo-w) * 122 / 640 + var(--logo-top-gap)); min-height: var(--logo-stack); }
@media (max-width: 1024px) { .vt-footer-strip { padding-bottom: var(--logo-stack); min-height: 0; } }
@media (max-width: 700px) { .vt-footer-strip { --logo-w: 189px; } }
/* owner, 2026-10-10: the footer logo 5% smaller (219 to 208px, 189 to 180px on phones); the strip follows its height */
.vt-footer-strip { --logo-w: 208px; }
.vt-footer-strip-logo img { width: var(--logo-w); }
@media (max-width: 700px) { .vt-footer-strip { --logo-w: 180px; } }


/* owner, 2026-10-10: the footer menus kept off the panel's edges: the columns sit inside the same 56px (26px on phones)
   as the appointment card's words above, so "Support Divisions" starts under "Make Appointment" and the Contact column
   ends where the card's button ends */
.vt-footer-grid { padding-left: 56px; padding-right: 56px; }
@media (max-width: 700px) { .vt-footer-grid { padding-left: 26px; padding-right: 26px; } }
/* the strip's copyright starts on the same line as the footer columns above it */
.vt-footer-strip { padding-left: calc(var(--vt-rail) + 56px); }
@media (max-width: 700px) { .vt-footer-strip { padding-left: calc(var(--vt-rail) + 26px); padding-right: calc(var(--vt-rail) + 26px); } }

/* ===== owner, 2026-10-10: the divisions as TCS's folding panels. Closed: a 64px strip with the division's icon on top
   and its name turned to read upwards, a hairline between strips. Open: a white card with the tagline, name, intro,
   the first six services and the way in. Wide screens fold sideways; below 1180px it is an accordion that opens
   downwards (as tcs.com does on small screens). Without the script every panel is shown open. ===== */
.vt-fold { position: relative; margin-top: 8px; display: grid; gap: 12px; }
.vt-fold-head { margin: 0 !important; }
.vt-fold-button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 0; border: 0; background: none; color: rgba(255, 255, 255, .82); font: 400 19px/1.25 'Sora', sans-serif; text-align: left; cursor: pointer; }
.vt-fold-button:hover, .vt-fold-button:focus-visible { color: #fff; }
.vt-fold-button:focus-visible { outline: 2px solid #8FD9D2; outline-offset: 4px; border-radius: 12px; }
.vt-fold-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--vt-brand-on-dark); transition: background .2s, color .2s; }
.vt-fold-item.is-open .vt-fold-icon { background: var(--vt-coral-ink); color: #fff; }
.vt-fold-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #fff; color: var(--vt-text); }
.vt-fold-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vt-fold-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-fold-count { padding: 6px 14px; border-radius: 999px; background: var(--vt-teal-soft); color: var(--vt-teal); font: 500 13px/1.4 'Manrope', sans-serif; }
.vt-fold-tagline { margin: 6px 0 0; font: 600 12px/1.4 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-label); }
.vt-fold-title { margin: 0 !important; font: 400 clamp(24px, 2.3vw, 32px)/1.15 'Sora', sans-serif !important; color: var(--vt-brand-green) !important; }
.vt-fold-text { margin: 0; max-width: 62ch; font: 400 15.5px/1.65 'Inter', sans-serif; color: var(--vt-muted); }
.vt-fold-services { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.vt-fold-services a { display: flex; gap: 8px; align-items: baseline; color: var(--vt-ink) !important; font: 500 14.5px/1.4 'Manrope', sans-serif; text-decoration: none; }
.vt-fold-services a::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--vt-coral); transform: translateY(-2px); }
.vt-fold-services a:hover { color: var(--vt-teal) !important; }
.vt-fold-card > .vt-pill { align-self: flex-start; margin-top: auto; }
/* folded once the script runs: an accordion that opens downwards */
.vt-fold.is-ready { gap: 0; }
.vt-fold.is-ready .vt-fold-item { border-top: 1px solid rgba(255, 255, 255, .14); }
.vt-fold.is-ready .vt-fold-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.vt-fold.is-ready .vt-fold-item:not(.is-open) .vt-fold-body { display: none; }
.vt-fold.is-ready .vt-fold-item.is-open .vt-fold-body { padding: 0 0 20px; animation: vt-fold-in .35s ease both; }
@keyframes vt-fold-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vt-fold.is-ready .vt-fold-body { animation: none !important; } }
/* wide screens: the panels fold sideways */
@media (min-width: 1181px) {
  .vt-fold.is-ready { display: flex; height: 470px; }
  .vt-fold.is-ready .vt-fold-item { display: flex; flex: 0 0 66px; min-width: 0; overflow: hidden; border-top: 0; border-bottom: 0 !important; border-left: 1px solid rgba(255, 255, 255, .14); transition: flex-grow .5s ease, flex-basis .5s ease; }
  .vt-fold.is-ready .vt-fold-item:first-child { border-left: 0; }
  .vt-fold.is-ready .vt-fold-item.is-open { flex: 1 1 0; }
  .vt-fold.is-ready .vt-fold-head { flex: 0 0 66px; height: 100%; }
  .vt-fold.is-ready .vt-fold-button { flex-direction: column; justify-content: flex-start; gap: 22px; width: 66px; height: 100%; padding: 18px 0 22px; }
  .vt-fold.is-ready .vt-fold-label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 18px; }
  .vt-fold.is-ready .vt-fold-item.is-open .vt-fold-label { color: #fff; }
  .vt-fold.is-ready .vt-fold-item.is-open .vt-fold-body { flex: 1 1 auto; min-width: 0; padding: 0 0 0 6px; animation: vt-fold-side .45s .12s ease both; }
  .vt-fold.is-ready .vt-fold-card { height: 100%; box-sizing: border-box; min-width: 520px; }
  @keyframes vt-fold-side { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 1181px) {
  .vt-fold.is-ready { height: 580px; }
  .vt-fold.is-ready .vt-fold-card { min-width: 440px; }
}
@media (min-width: 1181px) and (max-width: 1399px) {
  .vt-fold.is-ready { height: 640px; }
  .vt-fold.is-ready .vt-fold-item { flex-basis: 60px; }
  .vt-fold.is-ready .vt-fold-head { flex-basis: 60px; }
  .vt-fold.is-ready .vt-fold-button { width: 60px; }
}
@media (max-width: 700px) { .vt-fold-services { grid-template-columns: 1fr; } } /* one column of services on phones */

/* ===== owner, 2026-10-11: the home About as on the former vassistech.com, measured there at 1231px: picture 504 x 719
   with 50px rounded top left and bottom right; the quote card rgba(19,88,104,.9), 20px corners, starting 88px into the
   picture and running 28px past its right edge, 78px above its foot, a large quote mark behind the words; eyebrow 14px
   600 tracked 2.1px; title 36px 600 in #135868; story 16px/1.7 300 justified; six points in two columns with a filled
   teal tick; the signature 258px wide over the title line in teal. The old coral #D94227 (4.41:1) and grey #717C90
   (4.21:1) fail 4.5:1 on white, so the site's #C93A20 (5.11) and #637085 (5.02) stand in. ===== */
.vt-about2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 8vw, 110px); align-items: stretch; }
.vt-about2-media { position: relative; margin: 0; min-height: 640px; }
.vt-about2-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50px 0; }
.vt-about2-quote { position: absolute; left: 17%; right: -28px; bottom: 78px; margin: 0; padding: 40px 30px; overflow: hidden; border-radius: 20px 0; background: rgba(19, 88, 104, .9); }
.vt-about2-quote p { position: relative; margin: 0; font: italic 400 16px/1.7 'Inter', sans-serif; color: #fff; }
.vt-about2-mark { position: absolute; right: 14px; top: -28px; font: 400 190px/1 Georgia, 'Times New Roman', serif; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .32); pointer-events: none; }
.vt-about2-copy { align-self: start; max-width: 620px; }
.vt-about2-eyebrow { margin: 0 0 16px; font: 600 14px/1.4 'Manrope', sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--vt-label); }
.vt-about2-copy h2 { margin: 0 0 26px !important; font: 600 clamp(28px, 2.9vw, 36px)/1.3 'Sora', sans-serif !important; letter-spacing: -.01em !important; color: var(--vt-teal) !important; }
.vt-about2-text { margin: 0 0 12px; font: 300 16px/1.7 'Inter', sans-serif; color: var(--vt-muted); text-align: justify; hyphens: auto; }
.vt-about2-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.vt-about2-points li { display: flex; align-items: center; gap: 12px; font: 400 16px/1.7 'Inter', sans-serif; color: var(--vt-muted); }
.vt-about2-tick { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--vt-teal); color: #fff; }
.vt-about2-sign { margin-top: 40px; }
.vt-about2-sign img { width: 258px; height: auto; display: block; }
.vt-about2-sign p { margin: 8px 0 0; font: 400 16px/1.5 'Inter', sans-serif; color: var(--vt-teal); }
@media (max-width: 1024px) {
  .vt-about2-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .vt-about2-media { min-height: 520px; }
  .vt-about2-quote { right: 24px; }
  .vt-about2-copy { max-width: none; }
}
@media (max-width: 700px) {
  .vt-about2-media { min-height: 380px; }
  .vt-about2-media img { border-radius: 34px 0; }
  .vt-about2-quote { left: 14px; right: 14px; bottom: 14px; padding: 26px 22px; }
  .vt-about2-mark { font-size: 130px; top: -20px; }
  .vt-about2-points { grid-template-columns: minmax(0, 1fr); }
  .vt-about2-text { text-align: left; }
}

/* ===== owner, 2026-10-11: every section heading carries the small deep-orange label above it, as on the former
   vassistech.com (measured there: 600 14px, 2.1px tracking, uppercase, #D94227, 16px under it, no line before it).
   #D94227 is 4.41:1 on white, so the site's #C93A20 (5.11:1) stands in; on dark sections the light coral #FF9A85. Superseded the same day: the owner wants the brand colour itself, so light sections use the logo's #DB4327 and dark ones #EC5C43 (tokens --vt-brand and --vt-brand-on-dark). ===== */
.vt-eyebrow, .vt-about2-eyebrow { display: block; margin: 0 0 16px; font: 600 14px/1.3 'Manrope', sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--vt-label); }
.vt-eyebrow::before { content: none; display: none; }
.vt-video .vt-eyebrow, .vt-band .vt-eyebrow { color: var(--vt-label-on-dark); }
.vt-split-head > div > h2 { margin-top: 0 !important; }
.vt-block-head .vt-eyebrow { text-align: center; }

/* ===== owner, 2026-10-11: the reviews as on the former vassistech.com (measured there: a dark section with a picture
   behind it, the heading centred in white, cards rgba(0,0,0,.3) with 20px padding, a 30px round photo, the name 15px
   bold, the company 12px, yellow stars, the review 15px/1.45 light cut at four lines, "Read more", arrows each side) ===== */
.vt-testi { position: relative; overflow: hidden; max-width: var(--vt-rail-max); margin: 0 auto; border-radius: 40px; padding: clamp(56px, 6vw, 90px) var(--vt-inset); background: #0B2F39; color: #fff; isolation: isolate; }
.vt-testi-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(.7); }
.vt-testi::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 47, 57, .55) 0%, rgba(11, 47, 57, .82) 100%); }
.vt-testi-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.vt-testi-head .vt-eyebrow { color: var(--vt-label-on-dark); }
.vt-testi-head h2 { margin: 0 0 16px !important; font: 600 clamp(28px, 3vw, 36px)/1.2 'Sora', sans-serif !important; color: #fff !important; }
.vt-testi-head p:not(.vt-eyebrow):not(.vt-sample-note) { margin: 0; font: 300 16px/1.7 'Inter', sans-serif; color: rgba(255, 255, 255, .8); }
.vt-testi-head .vt-sample-note { margin-top: 18px; }
.vt-testi-slider { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 16px; }
.vt-testi-viewport { overflow: hidden; }
.vt-testi .vt-slider-track { display: flex; gap: 18px; align-items: stretch; transition: transform .45s ease; }
.vt-testi-card { position: relative; flex: 0 0 calc((100% - 36px) / 3); margin: 0; padding: 20px; border-radius: 8px; background: rgba(0, 0, 0, .3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; flex-direction: column; }
.vt-testi-who { display: flex; align-items: center; gap: 12px; padding-right: 64px; }
.vt-testi-who img, .vt-testi-initial { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.vt-testi-initial { display: grid; place-items: center; background: var(--vt-teal); color: #fff; font: 600 13px/1 'Manrope', sans-serif; }
.vt-testi-who strong { display: block; font: 700 15px/1.4 'Manrope', sans-serif; color: #fff; }
.vt-testi-who small { display: block; font: 300 12px/1.4 'Inter', sans-serif; color: rgba(255, 255, 255, .72); }
.vt-testi-stars { display: flex; gap: 2px; margin: 14px 0 10px; }
.vt-testi-stars svg.is-on { fill: #F6BB06; }
.vt-testi-stars svg.is-off { fill: rgba(255, 255, 255, .3); }
.vt-testi-text { margin: 0; }
.vt-testi-text p { margin: 0; font: 300 15px/1.45 'Inter', sans-serif; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.vt-testi-card.is-open .vt-testi-text p { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.vt-testi-more { align-self: flex-start; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 13.5px/1.4 'Manrope', sans-serif; color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; }
.vt-testi-more:hover { color: #fff; }
.vt-testi-card .vt-sample-badge { top: 16px; right: 16px; color: var(--vt-label-on-dark); border-color: rgba(255, 180, 166, .5); }
.vt-testi-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; cursor: pointer; }
.vt-testi-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.vt-testi-arrow:disabled { opacity: .3; cursor: default; }
.vt-testi-arrow[data-vt-prev] .vt-icon { transform: rotate(90deg); }
.vt-testi-arrow[data-vt-next] .vt-icon { transform: rotate(-90deg); }
.vt-testi-playback { grid-column: 1 / -1; justify-self: center; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 6px; background: var(--vt-teal); color: #fff; font: 500 14px/1.4 'Manrope', sans-serif; cursor: pointer; }
.vt-testi-playback[hidden] { display: none; }
@media (max-width: 1024px) { .vt-testi-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 700px) {
  .vt-testi { border-radius: 30px; }
  .vt-testi-slider { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 8px; }
  .vt-testi-arrow { width: 32px; height: 32px; }
  .vt-testi-card { flex-basis: 100%; }
}
/* the labels keep their own look inside every section (".vt-split-head p", ".vt-block-head p", ".vt-why-card p" and
   ".vt-video-copy p" are stronger than one class and turned them grey, moved their margin or enlarged them) */
.vt p.vt-eyebrow, .vt p.vt-about2-eyebrow { display: block; margin: 0 0 16px; font: 600 14px/1.3 'Manrope', sans-serif; font-style: normal; letter-spacing: .15em; text-transform: uppercase; color: var(--vt-label); }
.vt .vt-rows-head p.vt-eyebrow, .vt .vt-ph p.vt-eyebrow, .vt .vt-why-card.is-dark p.vt-eyebrow, .vt .vt-video p.vt-eyebrow,
.vt .vt-testi p.vt-eyebrow, .vt .vt-dark-grid p.vt-eyebrow, .vt .vt-band p.vt-eyebrow, .vt .vt-fold-wrap p.vt-eyebrow { color: var(--vt-label-on-dark); }

/* owner, 2026-10-11: the reviews band runs the full width, edge to edge of the panel, as on the former site (measured
   there: full width, 100px over the heading and 50px under the cards, the home21 picture behind; two 404px cards in
   view with 16px between them and arrows beside; 40px round photos) */
.vt-testi-band { margin: 40px 0; }
.vt-testi { max-width: none; margin: 0; border-radius: 0; padding: 100px var(--vt-rail) 70px; }
.vt-testi-bg { opacity: .55; filter: none; object-position: left top; }
.vt-testi::after { background: linear-gradient(180deg, rgba(11, 47, 57, .78) 0%, rgba(11, 47, 57, .86) 100%); }
.vt-testi-slider { max-width: 900px; margin: 0 auto; grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 14px; }
.vt-testi .vt-slider-track { gap: 16px; }
.vt-testi-card { flex-basis: calc((100% - 16px) / 2); border-radius: 5px; min-height: 232px; }
.vt-testi-who { padding-right: 0; }
.vt-testi-who img, .vt-testi-initial { width: 40px; height: 40px; }
.vt-testi-more { text-decoration: none; color: rgba(255, 255, 255, .6); }
.vt-testi-arrow { width: 26px; height: 40px; border: 0; border-radius: 0; }
.vt-testi-arrow .vt-icon { width: 26px; height: 26px; }
@media (max-width: 1024px) { .vt-testi-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 700px) {
  .vt-testi { padding: 72px var(--vt-rail) 56px; border-radius: 0; }
  .vt-testi-card { flex-basis: 100%; }
}

/* ===== owner, 2026-10-11: the video text as on the former vassistech.com (measured there: italic title, the line in
   curly quotes in italic, then "Learn by our video tutorial." as an italic orange link right under it, 15px, no
   underline, no button). Sizes stay on this site's scale; the orange is the brand colour on dark. ===== */
.vt .vt-video-copy h2 em { font-style: italic; }
.vt .vt-video-copy p:not(.vt-eyebrow):not(.vt-video-link) { margin: 0 0 6px; }
.vt .vt-video-copy p.vt-video-link { margin: 0; font: italic 400 16px/1.6 'Manrope', sans-serif; }
.vt .vt-video-link a { color: var(--vt-label-on-dark); text-decoration: none; }
.vt .vt-video-link a:hover, .vt .vt-video-link a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* owner, 2026-10-11: the pricing head as on the former site, the agreement line in small italic right under the title
   (measured there: 13px italic, dark, no gap); 14px here, the ink colour */
.vt .vt-split-head p.vt-plans-note { margin: 10px 0 0; font: italic 400 14px/1.6 'Manrope', sans-serif; color: var(--vt-ink); }

/* ===== owner, 2026-10-11: the group logos slide from right to left without end. Two copies of the row; the track
   moves left by exactly one copy (each row carries the gap as its right padding, so -50% lands on the seam). Pauses
   while the pointer is on it; edges fade out. ===== */
.vt-group.vt-marquee { display: block; overflow: hidden; padding: 8px 0; -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%); }
.vt-marquee-track { display: flex; width: max-content; animation: vt-marquee 45s linear infinite; }
.vt-marquee-row { display: flex; align-items: center; gap: 56px; padding-right: 56px; flex: none; }
.vt-marquee:hover .vt-marquee-track { animation-play-state: paused; }
@keyframes vt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .vt-marquee-row { gap: 36px; padding-right: 36px; } .vt-marquee-row img { height: 44px; } .vt-marquee-track { animation-duration: 32s; } }
/* owner, 2026-10-11: one line on every screen and always moving, however many logos are added (no wrap, no still mode) */
.vt-marquee-row { flex-wrap: nowrap; }

/* ===== owner, 2026-10-11: the social tab and the strip had become one colour. After tries drawn on the tab and a
   single line round it, the owner asked for option 1 turned to the bottom. Option 1 was: .vt-footer-strip { border: 1px
   solid transparent; border-bottom: 0; background: linear-gradient(#10343F, #10343F) padding-box, radial-gradient(70%
   160% at 50% 0%, rgba(236, 92, 67, .9) 0%, rgba(236, 92, 67, .55) 60%, rgba(236, 92, 67, .12) 100%) border-box;
   box-shadow: 0 -12px 28px -10px rgba(0, 0, 0, .55); }. Now the same gradient line runs along the strip's lower
   outline (sides, rounded bottom corners, bottom, round the tab) and the shade falls below it, inside the tab's
   cut-out; drawn as one SVG by vassistech.js. ===== */
.vt-strip-line { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
/* owner, 2026-10-11: the footer tab's line, also on the header's logo tab (drawn by vassistech.js) */
.vt-logo-line { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }

/* ===== owner, 2026-10-11: the review cards rounded again and the slider running by itself from the right, made more
   premium: the site's card radius, a fine light edge, a deep soft shadow, a slow eased slide and a small lift under
   the pointer. The copies that close the loop look the same. ===== */
.vt-testi-card { border-radius: var(--vt-radius); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .35s ease, border-color .35s ease; }
.vt-testi-card:hover { transform: translateY(-3px); border-color: rgba(236, 92, 67, .35); }
.vt-testi .vt-slider-track { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.vt-testi .vt-slider-track.is-still { transition: none; }
.vt-testi-viewport { padding: 6px 0 14px; margin: -6px 0 -14px; }

/* ===== owner, 2026-10-11: type on the former vassistech.com's scale ("the fonts have become very thick and big").
   Measured there: section titles 36px (34 for the appointment card), card titles 22 to 24px, the video title 22px,
   body 16px light (300), card text 15px, menu 15px regular, footer links 13 to 15px light. Here: every section title
   36px at most and regular weight (Sora 400, never 600), card titles 20 to 22px regular, display numbers smaller,
   running text light (300) as on the former site; the hero keeps its approved look. ===== */
.vt .vt-block-head h2, .vt .vt-split-head h2, .vt .vt-rows-head h2, .vt .vt-about2-copy h2, .vt .vt-testi-head h2 { font-size: clamp(28px, 2.6vw, 36px) !important; font-weight: 400 !important; line-height: 1.2 !important; }
.vt .vt-footer-cta h2 { font-size: clamp(26px, 2.4vw, 34px) !important; font-weight: 400 !important; }
.vt .vt-video-copy h2 { font-size: clamp(24px, 2.2vw, 30px) !important; font-weight: 400 !important; }
.vt .vt-howto-step h3, .vt .vt-tplan h3 { font-size: 22px !important; font-weight: 400 !important; }
.vt .vt-bento-card h3 { font-size: 20px !important; font-weight: 400 !important; }
.vt .vt-fold-title { font-size: clamp(22px, 2vw, 26px) !important; }
.vt-howto-num { font-size: 46px; }
.vt-tplan-hours { font-size: clamp(28px, 2.6vw, 34px); }
:where(.vt main) p { font-weight: 300; }
.vt-menu > li > a { font-size: 15px; font-weight: 400; }
.vt-pill { font-weight: 400; }
.vt-footer-list a, .vt-footer-contact li, .vt-footer-contact a { font-size: 14px; font-weight: 300; }
.vt .vt-fold-text { font-weight: 300; }
.vt .vt-fold-services a { font-weight: 400 !important; }
.vt .vt-video-copy p:not(.vt-eyebrow):not(.vt-video-link) { font-size: 16px; }
.vt-footer-cta p:not(.vt-footer-cta-eyebrow) { font-weight: 300; }
.vt-bento-intro strong { font-size: clamp(26px, 2.4vw, 32px); }
/* inner pages on the same scale: the former site's page titles were 38 to 40px, section titles 36px */
.vt .vt-ph h1 { font-size: clamp(32px, 3.2vw, 42px) !important; max-width: 22ch; }
.vt .vt-split-title, .vt .vt-why-card h2 { font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 400 !important; }

/* ===== owner, 2026-10-11: section by section, as on the former vassistech.com (measured there: every section a full
   band, white and a soft blue #F1F5FD in turn, 100px above and 50 to 120px below, the reviews a dark band). Each home
   section is now its own band edge to edge of the page, white and soft in turn, with the same room above and below
   (96px; 64px on phones), so the content reads section by section instead of one long page. ===== */
.vt .vt-zone { margin: 0 !important; padding-top: 96px; padding-bottom: 96px; background: #fff; }
.vt .vt-zone-soft { --vt-bg: var(--vt-soft); background: var(--vt-soft); } /* cut-outs drawn in the page colour (the video seal notch) follow the band */
.vt .vt-band-wrap.vt-zone { padding-top: 110px; } /* room for the plan card that stands over the band's top edge */
.vt .vt-testi-band.vt-zone-dark { margin: 0; }
@media (max-width: 700px) { .vt .vt-zone { padding-top: 64px; padding-bottom: 64px; } .vt .vt-band-wrap.vt-zone { padding-top: 80px; } }
/* the inner pages the same way: after the page head, every section its own band, white and soft in turn */
.vt .vt-main:has(> .vt-ph) > section:not(.vt-ph) { margin: 0 !important; padding-top: 96px; padding-bottom: 96px; background: #fff; }
.vt .vt-main:has(> .vt-ph) > section:not(.vt-ph):nth-of-type(odd) { --vt-bg: var(--vt-soft); background: var(--vt-soft); }
@media (max-width: 700px) { .vt .vt-main:has(> .vt-ph) > section:not(.vt-ph) { padding-top: 64px; padding-bottom: 64px; } }
/* inside a band the band's own padding is the room; a last block's bottom margin would make that side deeper */
.vt .vt-main > section > :last-child, .vt .vt-main > section > .vt-wrap > :last-child { margin-bottom: 0 !important; }
/* owner, 2026-10-11: Our process and the video sit in one band, as on the former site: the video's band carries on from
   the process band with no new top room */
.vt .vt-zone.vt-zone-join { padding-top: 0; }
.vt .vt-zone:has(+ .vt-zone-join) { padding-bottom: 60px; } /* the former site: 50px between the process cards and the video */
@media (max-width: 700px) { .vt .vt-zone:has(+ .vt-zone-join) { padding-bottom: 44px; } }

/* ===== owner, 2026-10-11: the promises band looked ordinary. Premium pass, layout unchanged: a deep layered ground
   (the hero's deep greens with a faint brand-orange glow in one corner and a teal light in the other, a fine light
   edge), each promise numbered 01 to 03 in the brand orange and set apart by a fine fading rule, the icons in glass
   tiles with a light edge and a soft orange glow beneath that lift a little under the pointer; the plan card gets a
   brand gradient hairline on top, a soft edge and deeper bars with a light end. ===== */
.vt-band { overflow: visible; background:
    radial-gradient(520px 260px at 6% 0%, rgba(236, 92, 67, .13), transparent 70%),
    radial-gradient(680px 380px at 78% 130%, rgba(27, 107, 125, .55), transparent 70%),
    linear-gradient(135deg, #0A2F3A 0%, #0E3A46 55%, #114B59 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -40px rgba(4, 24, 31, .8); }
.vt-band-items { counter-reset: vt-promise; gap: 0; }
.vt-band-items .vt-band-item { position: relative; padding: 0 28px; counter-increment: vt-promise; }
.vt-band-items .vt-band-item:first-child { padding-left: 0; }
.vt-band-items .vt-band-item + .vt-band-item::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 30%, rgba(236, 92, 67, .35) 70%, rgba(255, 255, 255, 0)); }
.vt-band-items .vt-band-item strong::before { content: counter(vt-promise, decimal-leading-zero); display: block; margin-bottom: 8px; font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .18em; color: var(--vt-brand-on-dark); }
.vt-band-item strong { font-size: 19px; }
.vt-band-item p { color: rgba(255, 255, 255, .7); }
.vt-band-icon { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 26px -16px rgba(236, 92, 67, .7); transition: transform .3s ease, border-color .3s ease; }
.vt-band-item:hover .vt-band-icon { transform: translateY(-3px); border-color: rgba(236, 92, 67, .5); }
.vt-band-card { border-radius: 24px; border: 1px solid rgba(19, 88, 104, .08); box-shadow: 0 34px 60px -32px rgba(4, 24, 31, .65), 0 2px 0 rgba(255, 255, 255, .6) inset; overflow: hidden; }
.vt-band-card::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(236, 92, 67, 0), #EC5C43 35%, #135868 75%, rgba(19, 88, 104, 0)); }
.vt-band-card-head span { color: var(--vt-brand-green); }
.vt-bars i { height: 8px; background: rgba(19, 88, 104, .1); }
.vt-bars i::after { background: linear-gradient(90deg, #135868, #1B6B7D 70%, #2A8597); box-shadow: 0 0 0 1px rgba(19, 88, 104, .06), 0 4px 10px -4px rgba(19, 88, 104, .6); }
.vt-bars b { color: var(--vt-brand-green); }
@media (max-width: 1024px) { .vt-band-items { gap: 28px; } .vt-band-items .vt-band-item { padding: 0; } .vt-band-items .vt-band-item + .vt-band-item::before { display: none; } }

/* ===== owner, 2026-10-11: the process cards animated like the former site's (measured there: under the pointer the
   card fills with the brand red orange in 0.4 to 0.6s, from the left, the title and text turn white, and a large
   faint mark rises from the bottom right corner; the cards come in rising as the section scrolls into view). Here the
   fill slides in from the left, the number, title and text turn white, the card lifts a little, and the card's own
   number rises large and faint in the corner. ===== */
.vt-howto-step { position: relative; overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, opacity .7s ease; }
.vt-howto-step::before { content: ''; position: absolute; top: 0; bottom: 0; left: -101%; width: 100%; z-index: -1; background: linear-gradient(135deg, #CB4A2E 0%, #B23C24 55%, #9C3220 100%); transition: left .6s cubic-bezier(.22, .61, .36, 1); }
.vt-howto-step::after { content: attr(data-step); position: absolute; right: 18px; bottom: -60px; z-index: -1; font: 400 120px/1 'Sora', sans-serif; letter-spacing: -.04em; color: rgba(255, 255, 255, .14); opacity: 0; transition: bottom .45s ease, opacity .45s ease; pointer-events: none; }
.vt-howto-step h3, .vt-howto-step p, .vt-howto-step .vt-howto-num { transition: color .4s ease; }
.vt-howto-step:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(156, 50, 32, .5); }
.vt-howto-step:hover::before { left: 0; }
.vt-howto-step:hover::after { bottom: -24px; opacity: 1; }
.vt .vt-howto-step:hover h3, .vt .vt-howto-step:hover p, .vt .vt-howto-step:hover .vt-howto-num { color: #fff !important; }
/* coming in: set by vassistech.js only, so the cards show at once without script */
.vt-howto-step.is-waiting { opacity: 0; transform: translateY(28px); }

/* ===== owner, 2026-10-11: the roles section animated the same way as the process cards (D-278). Role cards: under the
   pointer the brand red orange slides in from the left, title, text, list and icon turn white, the card lifts, and a
   large faint briefcase rises in the bottom right corner. The picture card slowly zooms its photo, the appointment card
   lifts and its arrow moves on. All six rise into place one after another when the section scrolls into view. ===== */
.vt-bento-card { position: relative; overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, opacity .7s ease; }
.vt-bento-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: -101%; width: 100%; z-index: -1; background: linear-gradient(135deg, #CB4A2E 0%, #B23C24 55%, #9C3220 100%); transition: left .6s cubic-bezier(.22, .61, .36, 1); }
.vt-bento-card::after { content: ''; position: absolute; right: 14px; bottom: -70px; z-index: -1; width: 110px; height: 110px; background: rgba(255, 255, 255, .16); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transition: bottom .45s ease, opacity .45s ease; pointer-events: none; }
.vt-bento-card h3, .vt-bento-card p, .vt-bento-card li, .vt-bento-card .vt-tile-icon { transition: color .4s ease, background-color .4s ease; }
.vt-bento-card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(156, 50, 32, .5); }
.vt-bento-card:hover::before { left: 0; }
.vt-bento-card:hover::after { bottom: -30px; opacity: 1; }
.vt .vt-bento-card:hover h3, .vt .vt-bento-card:hover p, .vt .vt-bento-card:hover li { color: #fff !important; }
.vt .vt-bento-card:hover .vt-tile-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.vt-bento-intro img { transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.vt-bento-intro:hover img { transform: scale(1.06); }
.vt-bento-intro, .vt-bento-cta { transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, opacity .7s ease; }
.vt-bento-cta:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(4, 24, 31, .6); }
.vt-bento > .is-waiting { opacity: 0; transform: translateY(28px); }
/* owner, 2026-10-11: the hover fill on the process and role cards was too red for the eye; now a deep burnt orange
   (#C25A28 to #9E4520 at first; then the brand red orange itself, deepened so it does not glare: #CB4A2E, #B23C24, #9C3220; white text 4.8:1 at the light end) */

/* ===== owner, 2026-10-11: the plan cards gave no sign of life under the pointer. Professional, quiet movement:
   the cards rise into place one after another as the section scrolls into view and their hours count up once; under
   the pointer the card lifts, a soft light sweeps across it once, the ticks turn brand orange and the list steps in a
   little, one after another, and "See plan" takes the brand colour while a small arrow slides in. No outer shadow,
   so the cut-out corner that holds the button stays clean. ===== */
.vt-tplan { isolation: isolate; transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .7s ease; }
/* the sheen is a band of light moved across a layer the card's own shape (no clipping box, so the button in the
   cut-out corner is never cut) */
.vt-tplan::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 58%) no-repeat; background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
.vt-tplan.is-dark::after { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, 0) 58%); }
.vt-tplan:hover { transform: translateY(-6px); }
.vt-tplan:hover::after { animation: vt-sheen 1.1s cubic-bezier(.22, .61, .36, 1) 1; }
@keyframes vt-sheen { 0% { background-position: 130% 0; opacity: 1; } 100% { background-position: -30% 0; opacity: 1; } }
.vt-tplan li { transition: transform .35s ease; }
.vt-tplan li .vt-icon { transition: color .35s ease, transform .35s ease; }
.vt-tplan:hover li { transform: translateX(6px); }
.vt-tplan:hover li:nth-child(2) { transition-delay: .06s; }
.vt-tplan:hover li:nth-child(3) { transition-delay: .12s; }
.vt-tplan:hover li .vt-icon { color: var(--vt-brand-on-dark); transform: scale(1.12); }
.vt-tplan-hours { transition: color .4s ease; }
.vt-tplan:hover .vt-tplan-hours { color: #B23C24; }
.vt-tplan.is-dark:hover .vt-tplan-hours { color: #fff; }
.vt-tplan-btn { display: inline-flex; align-items: center; gap: 0; transition: background-color .35s ease, color .35s ease, gap .35s ease, padding .35s ease; }
.vt-tplan-arrow { display: inline-grid; width: 0; overflow: hidden; opacity: 0; transition: width .35s ease, opacity .35s ease; }
.vt-tplan-arrow .vt-icon { width: 14px; height: 14px; }
.vt-tplan:hover .vt-tplan-btn { gap: 8px; background: var(--vt-coral-ink); } /* the site's button colour */
.vt-tplan.is-dark:hover .vt-tplan-btn { background: var(--vt-brand-green); color: #fff !important; } /* owner, 2026-10-11: red orange at rest, the brand green under the pointer */
.vt-tplan:hover .vt-tplan-arrow { width: 14px; opacity: 1; }
.vt-tplans > .is-waiting { opacity: 0; transform: translateY(28px); }

/* ===== owner, 2026-10-11: the Services menu made high end. Read from current product menus (Stripe, Linear, Vercel):
   a labelled list beside a dark feature panel, quick links at the foot, a calm open with the items arriving one after
   another, and items that answer the pointer with an icon fill and a small arrow. The panel now opens under the header
   at its right rail, so it never runs off a narrower screen. ===== */
.vt .vt-menu > li.vt-has-mega { position: static; }
.vt-mega { left: auto; right: var(--vt-rail); top: calc(100% + 6px); width: min(1080px, calc(100vw - 2 * var(--vt-rail) - 24px)); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; overflow: hidden; border-radius: 24px; border: 1px solid rgba(19, 88, 104, .09); box-shadow: 0 44px 90px -36px rgba(4, 24, 31, .42), 0 14px 28px -18px rgba(4, 24, 31, .2); transform: translateY(10px) scale(.985); transform-origin: top right; transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility .25s; }
.vt-has-mega:hover .vt-mega, .vt-has-mega:focus-within .vt-mega { transform: translateY(0) scale(1); }
.vt-mega::before { top: -34px; height: 34px; }
.vt-mega::after { content: ''; position: absolute; left: 28px; right: 328px; top: 0; height: 2px; background: linear-gradient(90deg, rgba(236, 92, 67, 0), #EC5C43 30%, #135868 75%, rgba(19, 88, 104, 0)); }
.vt-mega-main { padding: 26px 22px 0; }
.vt-mega-label { margin: 0 0 12px 12px !important; font: 600 12px/1 'Manrope', sans-serif !important; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label) !important; }
.vt-mega-grid { gap: 4px; }
.vt-mega-item { position: relative; padding: 12px 34px 12px 12px; transition: background-color .25s ease, opacity .35s ease, transform .35s ease; }
.vt-mega-item:hover { background: var(--vt-soft); }
.vt-mega-item strong { font-weight: 500; transition: color .25s ease; }
.vt-mega-item:hover strong { color: var(--vt-brand-green); }
.vt-mega-icon { transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.vt-mega-icon { background: var(--vt-brand-green); color: #fff; }
.vt-mega-item:hover .vt-mega-icon { background: var(--vt-coral-ink); color: #fff; transform: scale(1.05); } /* owner, 2026-10-11: icon tiles filled in the brand green with a white mark, filled red orange under the pointer */
.vt-mega-go { position: absolute; right: 12px; top: 14px; color: var(--vt-label); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.vt-mega-go .vt-icon { width: 14px; height: 14px; }
.vt-mega-item:hover .vt-mega-go { opacity: 1; transform: translateX(0); }
/* the items arrive one after another as the menu opens */
.vt-mega .vt-mega-item { opacity: 0; transform: translateY(6px); }
.vt-has-mega:hover .vt-mega-item, .vt-has-mega:focus-within .vt-mega-item { opacity: 1; transform: none; }
.vt-has-mega:hover .vt-mega-item:nth-child(2), .vt-has-mega:focus-within .vt-mega-item:nth-child(2) { transition-delay: .02s; }
.vt-has-mega:hover .vt-mega-item:nth-child(3), .vt-has-mega:focus-within .vt-mega-item:nth-child(3) { transition-delay: .04s; }
.vt-has-mega:hover .vt-mega-item:nth-child(4), .vt-has-mega:focus-within .vt-mega-item:nth-child(4) { transition-delay: .06s; }
.vt-has-mega:hover .vt-mega-item:nth-child(5), .vt-has-mega:focus-within .vt-mega-item:nth-child(5) { transition-delay: .08s; }
.vt-has-mega:hover .vt-mega-item:nth-child(6), .vt-has-mega:focus-within .vt-mega-item:nth-child(6) { transition-delay: .1s; }
.vt-has-mega:hover .vt-mega-item:nth-child(7), .vt-has-mega:focus-within .vt-mega-item:nth-child(7) { transition-delay: .12s; }
.vt-has-mega:hover .vt-mega-item:nth-child(8), .vt-has-mega:focus-within .vt-mega-item:nth-child(8) { transition-delay: .14s; }
.vt-has-mega:hover .vt-mega-item:nth-child(9), .vt-has-mega:focus-within .vt-mega-item:nth-child(9) { transition-delay: .16s; }
.vt-mega-item:hover { transition-delay: 0s !important; }
.vt-mega-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 18px -22px 0; padding: 16px 34px; border-top: 1px solid var(--vt-line); background: #F7F9FD; }
.vt-mega-foot a { font: 500 14px/1 'Manrope', sans-serif; color: var(--vt-text) !important; text-decoration: none; transition: color .2s ease; }
.vt-mega-foot a:hover { color: var(--vt-brand-green) !important; }
.vt-mega-foot .vt-mega-all { margin: 0 auto 0 0; padding: 0; border: 0; justify-content: flex-start; font-weight: 600; color: var(--vt-label) !important; }
.vt-mega-foot .vt-mega-all .vt-icon { transition: transform .2s ease; }
.vt-mega-foot .vt-mega-all:hover .vt-icon { transform: translateX(4px); }
.vt-mega-feature { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; color: rgba(255, 255, 255, .78); background:
    radial-gradient(260px 180px at 100% 0%, rgba(236, 92, 67, .22), transparent 70%),
    radial-gradient(300px 220px at 0% 110%, rgba(27, 107, 125, .6), transparent 70%),
    linear-gradient(160deg, #0E3A46 0%, #0A2F3A 100%); }
.vt-mega-feature p { margin: 0 !important; }
.vt-mega-feature-label { font: 600 12px/1 'Manrope', sans-serif !important; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label-on-dark) !important; }
.vt-mega-feature-title { font: 400 22px/1.3 'Sora', sans-serif !important; color: #fff !important; }
.vt-mega-feature-text { font: 300 14px/1.6 'Inter', sans-serif !important; }
.vt-mega-stats { list-style: none; margin: 6px 0 0; padding: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.vt-mega-stats li { display: grid; gap: 2px; }
.vt-mega-stats b { font: 400 20px/1.2 'Sora', sans-serif; color: #fff; }
.vt-mega-stats span { font-size: 12.5px; color: var(--vt-label-on-dark); }
.vt-mega-feature-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 999px; background: var(--vt-coral-ink); color: #fff !important; font: 600 14px/1 'Manrope', sans-serif; text-decoration: none; transition: background-color .25s ease; }
.vt-mega-feature-btn:hover { background: var(--vt-coral-dark); } /* the site's one button colour, as Hire VASSiSTECH in the header */
.vt-mega-feature-btn .vt-icon { transition: transform .2s ease; }
.vt-mega-feature-btn:hover .vt-icon { transform: translateX(4px); }
@media (max-width: 1180px) { .vt-mega { grid-template-columns: minmax(0, 1fr) 250px; } .vt-mega::after { right: 278px; } }

/* ===== owner, 2026-10-11: content in a 1140px box, as on the former vassistech.com (measured there: every section's
   content at most 1140px wide and centred, the backgrounds running the full width; 390px each side at 1920, 175 at
   1490, 113 at 1366, full width under 1140). Every content line already follows --vt-rail-max; it is now 1140px. The
   header keeps one line with the content: its left (the logo inside its tab) and its right (the last button) sit on
   the box's edges, worked out from the panel's own width (a container), so a scrollbar never shifts them. ===== */
:root { --vt-rail-max: 1140px; }
.vt-panel { container-type: inline-size; container-name: vt-panel; }
.vt-panel > * { --vt-gutter: max(var(--vt-rail), calc((100cqw - var(--vt-rail-max)) / 2)); }
.vt .vt-logo-tab { padding-left: var(--vt-gutter); }
.vt .vt-header { padding-right: var(--vt-gutter); }
.vt .vt-mega { right: var(--vt-gutter); }
.vt .vt-footer-strip { padding-left: calc(var(--vt-gutter) + 56px); }
@media (min-width: 1025px) { .vt .vt-footer-strip { padding-right: calc(var(--vt-gutter) + 56px + 300px); } .vt .vt-footer-social, .vt .vt-footer-strip-logo { right: calc(var(--vt-gutter) + 56px); } }
@media (max-width: 700px) { .vt .vt-footer-strip { padding-left: calc(var(--vt-rail) + 26px); } }
/* laptops with short screens (1366x768, 1280x720, 1280x800): the hero's pictures give way to the screen's height so
   the whole hero shows above the fold; tall screens keep the full 640px */
@media (min-width: 1025px) { .vt-hx-stage { height: max(440px, min(clamp(540px, 46vw, 640px), calc(100svh - 196px))); } }

/* ===== owner, 2026-10-11: in the 1140px box the division panels clipped (the open card kept a 440px minimum in a
   418px space and its button fell below the panel's 580px height). Inside the box: a slimmer frame (40px), slimmer
   closed tabs (54px), the open card filling its space, and the panel as tall as its content needs (at least 600px).
   The footer strip in the box: its words start on the box's left edge and keep to one line beside the social tab. ===== */
@media (min-width: 1181px) {
  .vt .vt-fold-wrap { padding-left: 40px; padding-right: 40px; }
  .vt .vt-fold.is-ready { height: 640px; }
  .vt .vt-fold.is-ready .vt-fold-item { flex-basis: 54px; }
  .vt .vt-fold.is-ready .vt-fold-item.is-open { flex: 1 1 0; }
  .vt .vt-fold.is-ready .vt-fold-head { flex-basis: 54px; }
  .vt .vt-fold.is-ready .vt-fold-button { width: 54px; }
  .vt .vt-fold.is-ready .vt-fold-card { min-width: 0; height: 100%; padding: 32px; }
  .vt .vt-footer-grid { padding-left: 0; padding-right: 0; }
  .vt .vt-footer-strip { padding-left: var(--vt-gutter); padding-right: calc(var(--vt-gutter) + 280px); }
  .vt .vt-footer-social, .vt .vt-footer-strip-logo { right: var(--vt-gutter); } /* the logo stays over the tab */
}

/* owner, 2026-10-11: the hero's centre panel read crowded inside the 1140px box; the seal stays, the words get
   smaller and lighter so the panel breathes: title 18 to 22px (its second line 600, not 700), text 14px, the button
   a size smaller */
@media (min-width: 701px) {
  .vt .vt-hx-panel { padding-left: 14px; padding-right: 14px; } /* room for the larger title on two lines */
  .vt .vt-hx-panel h2 { font-size: clamp(22.8px, 1.84vw, 27.8px) !important; line-height: 1.3 !important; margin-bottom: 12px; }
  .vt .vt-hx-panel h2 strong { font-weight: 600; }
  .vt .vt-hx-panel p { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
  .vt .vt-hx-panel .vt-pill { font-size: 14px; gap: 10px; padding: 5px 5px 5px 20px; }
  .vt .vt-hx-panel .vt-pill .vt-pill-dot { width: 32px; height: 32px; }
}
/* owner, 2026-10-11: the Services menu spans the content box exactly, its left edge on the logo's line and its right
   edge on the last button's, and loses the light outline that showed round it on dark heads */
.vt .vt-mega { left: var(--vt-gutter); right: var(--vt-gutter); width: auto; border: 0; transform-origin: top center; }
.vt .vt-mega::after { right: 330px; }
@media (max-width: 1180px) { .vt .vt-mega::after { right: 280px; } }
/* owner, 2026-10-11: "Modern Businesses" in the hero panel in the brand red orange (the dark-ground shade) */
.vt .vt-hx-panel h2 strong { color: var(--vt-brand-on-dark) !important; }
/* owner, 2026-10-11: the panel's line broke with one word alone below ("business."); its lines are now balanced,
   same size: "Dedicated remote teams / for your business." */
.vt .vt-hx-panel p, .vt .vt-hx-panel h2 { text-wrap: balance; }
/* owner, 2026-10-11: the one-line try was undone (two balanced lines were right); the button sits a little lower */
@media (min-width: 701px) { .vt .vt-hx-panel p { margin-bottom: 46px; } .vt .vt-hx-panel { padding-bottom: 24px; } } /* the card keeps its size: the button moves down 16px and the room under it gives the same 16px */
/* owner, 2026-10-11: the footer strip's words thinner: copyright and links light (300), FiKHSONS regular (400, was 600) */
.vt .vt-footer-copy, .vt .vt-footer-legal, .vt .vt-footer-legal a { font-weight: 300; }
.vt .vt-footer-copy a { font-weight: 400; }

/* ===== owner, 2026-10-11: a trust row in the footer, as on Lisra: six marks, each a small caption over an icon and a
   name, between fine rules, true today only (see layout.njk) ===== */
.vt-trust { list-style: none; margin: 0 0 40px; padding: 22px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 12px; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.vt-trust li { display: grid; justify-items: center; gap: 8px; text-align: center; }
/* D-408 (review N-05): small text on the dark surfaces is white (D-398 token); the 45 and 62 percent whites measured 4.23 and 3.94 to 4.07 to 1 */
.vt-trust small { font: 500 10.5px/1.2 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label-on-dark); }
.vt-trust span { display: inline-flex; align-items: center; gap: 8px; font: 300 14px/1.3 'Manrope', sans-serif; color: rgba(255, 255, 255, .86); }
.vt-trust .vt-icon { flex: none; color: var(--vt-brand-on-dark); }
@media (max-width: 1024px) { .vt-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vt-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 28px; } }
/* the identity promise under the trust row (owner, 2026-10-11) */
.vt-trust { margin-bottom: 40px; }
.vt-trust-note { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin: 0 0 40px !important; padding: 16px 0 0; text-align: center; font: 300 13.5px/1.6 'Manrope', sans-serif; color: var(--vt-label-on-dark); }
.vt-trust-note .vt-icon { flex: none; margin-top: 3px; color: var(--vt-brand-on-dark); }
@media (max-width: 700px) { .vt-trust-note { text-align: left; justify-content: flex-start; margin-bottom: 28px !important; } }

/* ===== owner, 2026-10-11: the trust marks get their own drawn icons (duotone: a soft fill under the line and a small
   seal badge), each in a glass tile, the caption and name beside it ===== */
.vt-trust li { grid-template-columns: 44px auto; justify-content: center; align-items: center; gap: 0 12px; text-align: left; }
.vt-trust .vt-trust-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 20px -14px rgba(236, 92, 67, .6); }
.vt-trust .vt-trust-ico .vt-icon { width: 24px; height: 24px; color: var(--vt-brand-on-dark); stroke-width: 1.5; }
.vt-trust .vt-trust-txt { display: grid; gap: 4px; }
.vt-trust .vt-trust-txt small { font: 500 10px/1.2 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label-on-dark); }
.vt-trust .vt-trust-txt strong { font: 400 14px/1.25 'Manrope', sans-serif; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.vt-trust { padding: 26px 0; }
@media (max-width: 700px) { .vt-trust li { justify-content: start; } }
.vt-trust li { grid-template-columns: 40px auto; gap: 0 10px; }
.vt-trust .vt-trust-ico { width: 40px; height: 40px; border-radius: 12px; }
@media (max-width: 1180px) { .vt-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; } }
@media (max-width: 700px) { .vt-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .vt-trust .vt-trust-txt strong { white-space: normal; } }
/* owner, 2026-10-11: the trust marks a size smaller, and alive under the pointer: the tile lifts, its edge warms to
   the brand orange with a soft glow, the icon grows a little and turns, the name brightens */
.vt-trust li { grid-template-columns: 34px auto; gap: 0 9px; cursor: default; }
.vt-trust .vt-trust-ico { width: 34px; height: 34px; border-radius: 10px; transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease, background-color .35s ease; }
.vt-trust .vt-trust-ico .vt-icon { width: 19px; height: 19px; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.vt-trust .vt-trust-txt small { font-size: 9.5px; }
.vt-trust .vt-trust-txt strong { font-size: 13px; transition: color .3s ease; }
.vt-trust li:hover .vt-trust-ico { transform: translateY(-3px); border-color: rgba(236, 92, 67, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 22px -10px rgba(236, 92, 67, .75); }
.vt-trust li:hover .vt-trust-ico .vt-icon { transform: scale(1.12) rotate(-6deg); }
.vt-trust li:hover .vt-trust-txt strong { color: #fff; }

/* owner, 2026-10-11: the footer strip on tablets and phones laid out as one centred column: the copyright and Powered
   by lines centred, the legal links centred with even gaps, the logo centred over the centred social tab */
@media (max-width: 1024px) {
  .vt .vt-footer-strip { flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding-left: var(--vt-rail); padding-right: var(--vt-rail); text-align: center; }
  .vt .vt-footer-copy { text-align: center; }
  .vt .vt-footer-copy span { display: block; margin: 6px 0 0; padding: 0; border: 0; }
  .vt .vt-footer-legal { justify-content: center; gap: 10px 22px; margin: 0 !important; }
  .vt .vt-footer-strip-logo { left: 50%; right: auto; transform: translateX(-50%); justify-content: center; padding-left: 0; }
  .vt .vt-footer-strip-logo img { margin: 0 auto; }
}

/* ===== owner, 2026-10-11: twenty divisions in three groups (Business Support, Technology & Engineering, Industry
   Specialists). Home: one row of group tabs over the folding panels, the open group's panels only, so the section
   stays as calm as it was with nine. Services page: a small heading over each group's list. Menu: one column per
   group, each division a compact row. ===== */
.vt-fold-tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.vt-fold-tab { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .78); font: 400 15px/1.2 'Manrope', sans-serif; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.vt-fold-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.vt-fold-tab[aria-selected="true"] { background: var(--vt-coral-ink); color: #fff; }
.vt-fold-tab:focus-visible { outline: 2px solid #8FD9D2; outline-offset: 2px; }
.vt-fold-tab-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 500 12px/1 'Manrope', sans-serif; }
.vt-fold-tab[aria-selected="true"] .vt-fold-tab-count { background: rgba(255, 255, 255, .22); }
.vt-fold-tab-short { display: none; }
.vt-fold-panel[hidden] { display: none; }
.vt-fold-panel { animation: vt-fold-in .35s ease both; }
@media (prefers-reduced-motion: reduce) { .vt-fold-panel { animation: none; } }
@media (max-width: 860px) { .vt-fold-tab-long { display: none; } .vt-fold-tab-short { display: inline; } } /* the full names need 685px */
@media (max-width: 700px) {
  .vt-fold-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; box-sizing: border-box; gap: 4px; padding: 4px; }
  .vt-fold-tab { justify-content: center; gap: 6px; padding: 10px 6px; font-size: 13.5px; }
  .vt-fold-tab-long { display: none; }
  .vt-fold-tab-short { display: inline; }
  .vt-fold-tab-count { min-width: 20px; height: 20px; font-size: 11px; padding: 0 5px; }
}

.vt-rows-group + .vt-rows-group { margin-top: 48px; }
.vt .vt-rows-group-head { display: flex; flex-wrap: wrap; row-gap: 6px; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px !important; font: 400 clamp(20px, 1.8vw, 24px)/1.25 'Sora', sans-serif !important; color: #fff !important; }
.vt-rows-group-head span { font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label-on-dark); white-space: nowrap; }

.vt-mega-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.vt-mega-group { min-width: 0; }
.vt .vt-mega-group .vt-mega-label { margin: 0 0 8px 10px !important; }
.vt .vt-mega-group .vt-mega-grid { grid-template-columns: 1fr; gap: 1px; }
.vt .vt-mega-group .vt-mega-item { align-items: center; gap: 10px; padding: 7px 28px 7px 8px; border-radius: 12px; }
.vt .vt-mega-group .vt-mega-icon { width: 32px; height: 32px; border-radius: 10px; }
.vt .vt-mega-group .vt-mega-item strong { font-size: 14px; line-height: 1.3; }
.vt .vt-mega-group .vt-mega-go { top: 50%; margin-top: -7px; right: 10px; }
@media (max-width: 700px) { .vt-footer-divisions .vt-footer-list { grid-template-columns: 1fr; gap: 12px; } .vt-footer-divisions .vt-footer-list a { white-space: nowrap; } } /* owner, 2026-10-12 (D-340): one column on phones, each name on one line (was two columns, D-304) */

/* footer polish, owner 2026-10-12 ("aro premium"): layout, columns, strip, tab and trust marks unchanged (D-253, D-269,
   D-271, D-302); only finer details. A thin thread over the columns, a short red orange line under each heading, links
   that answer the pointer, and the contact icons in the same glass tiles as the trust marks */
.vt-footer-grid { position: relative; }
.vt-footer-grid::before { content: ''; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: linear-gradient(90deg, rgba(236, 92, 67, 0), rgba(236, 92, 67, .45) 18%, rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, 0)); }
.vt-footer-title { position: relative; padding-bottom: 14px; }
.vt-footer-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #EC5C43, rgba(236, 92, 67, .2)); }
.vt-footer-list a { transition: color .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.vt-footer-list a:hover { transform: translateX(3px); }
.vt-footer-list a .vt-icon { transition: color .25s ease; }
.vt-footer-list a:hover .vt-icon { color: #EC5C43; }
.vt-footer-contact li { align-items: center; }
.vt-footer-contact li:first-child { align-items: flex-start; }
.vt-footer-contact .vt-icon { box-sizing: content-box; width: 16px; height: 16px; margin-top: 0; padding: 8px; border-radius: 11px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 14px -8px rgba(236, 92, 67, .5); color: #EC5C43; }

/* header polish, owner 2026-10-12: bar, logo tab and its line, menu layout and colours unchanged (D-272, D-282, D-283,
   D-286); the AI half in the Services menu, and a finer phone menu */

.vt-overlay { background: radial-gradient(70% 40% at 100% 0%, rgba(236, 92, 67, .16), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(31, 122, 142, .25), transparent 70%), var(--vt-frame); }
.vt-overlay-nav { gap: 0; margin: 26px 0 30px; }
.vt-overlay-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid rgba(255, 255, 255, .1); font: 400 24px/1.25 'Manrope', sans-serif; }
.vt-overlay-nav a .vt-icon { flex: none; opacity: .45; transition: transform .25s ease, opacity .25s ease; }
.vt-overlay-nav a:hover .vt-icon, .vt-overlay-nav a[aria-current="page"] .vt-icon { opacity: 1; transform: translateX(3px); color: var(--vt-brand-on-dark); }
.vt-overlay-nav a[aria-current="page"] span { color: var(--vt-label-on-dark); }
.vt-overlay-nav a[aria-current="page"] span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 10px 3px 0; border-radius: 50%; background: var(--vt-brand-on-dark); vertical-align: middle; }
.vt-overlay:not([hidden]) .vt-overlay-nav a, .vt-overlay:not([hidden]) .vt-overlay-foot { animation: vt-row-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.vt-overlay-nav a:nth-child(2) { animation-delay: .04s !important; } .vt-overlay-nav a:nth-child(3) { animation-delay: .08s !important; }
.vt-overlay-nav a:nth-child(4) { animation-delay: .12s !important; } .vt-overlay-nav a:nth-child(5) { animation-delay: .16s !important; }
.vt-overlay-nav a:nth-child(6) { animation-delay: .2s !important; } .vt-overlay-nav a:nth-child(7) { animation-delay: .24s !important; }
.vt-overlay-nav a:nth-child(8) { animation-delay: .28s !important; } .vt-overlay:not([hidden]) .vt-overlay-foot { animation-delay: .32s; }
@keyframes vt-row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vt-overlay-contact { display: grid; gap: 10px; margin: 16px 0 0 !important; }
.vt-overlay-contact a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.vt-overlay-contact .vt-icon { flex: none; box-sizing: content-box; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--vt-brand-on-dark); }
@media (prefers-reduced-motion: reduce) { .vt-overlay:not([hidden]) .vt-overlay-nav a, .vt-overlay:not([hidden]) .vt-overlay-foot { animation: none; } }

/* home hero, owner 2026-10-12 ("aro premium"): words, title, panel, seal and sizes unchanged (D-251, D-261, D-284,
   D-285, D-287, D-288). The two fact cards lose the last mint (brand colours only, D-263) and get the brand hairline the
   hours card has (D-277); the ring and the line draw themselves once; a faint brand light behind the stage; the two
   pictures drift very slowly */
.vt-hx { isolation: isolate; }
.vt-hx::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 46% at 70% 42%, rgba(236, 92, 67, .12), transparent 70%), radial-gradient(30% 40% at 12% 78%, rgba(31, 122, 142, .22), transparent 70%); }
.vt-hx-facts .vt-fact { overflow: hidden; }
.vt-hx-facts .vt-fact::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(236, 92, 67, 0), rgba(236, 92, 67, .8) 30%, rgba(31, 122, 142, .8) 75%, rgba(31, 122, 142, 0)); }
.vt-hx-facts .vt-fact:hover { border-color: rgba(236, 92, 67, .5); }
.vt-hx-facts .vt-fact-ring { border-color: rgba(236, 92, 67, .5); background: rgba(236, 92, 67, .1); color: #EC5C43; }
.vt-hx-facts .vt-fact-spark { color: #EC5C43; }
.vt-hx-facts .vt-fact-spark path { stroke-dasharray: 120; stroke-dashoffset: 0; animation: vt-draw 1.6s .5s cubic-bezier(.3, .7, .2, 1) both; }
.vt-hx-facts .vt-ring-bar { stroke: #EC5C43; animation: vt-ring-in 1.6s .4s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes vt-draw { from { stroke-dashoffset: 120; } }
@keyframes vt-ring-in { from { stroke-dashoffset: 100; } }
.vt-hx-pic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; }
.vt-hx-pic img { transform-origin: 50% 40%; animation: vt-drift 22s ease-in-out infinite alternate; }
.vt-hx-pic-b img { animation-delay: -11s; }
@keyframes vt-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .vt-hx-pic img, .vt-hx-facts .vt-fact-spark path, .vt-hx-facts .vt-ring-bar { animation: none; } }

/* Most Requested Roles, owner 2026-10-12 ("aro premium"): layout, hover fill and motion unchanged (D-279, D-293).
   Each role now has its own icon (and its own faint mark under the pointer) instead of four briefcases, and the light
   cards lose the last mint tint for white with the logo green (brand colours only, D-263) and a fine edge */
.vt-bento-card:not(.is-dark) { background: linear-gradient(150deg, #FFFFFF 0%, #F4F8F9 60%, #E9F1F3 100%); box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .08), 0 18px 36px -30px rgba(11, 36, 48, .35); }
.vt-bento-card:not(.is-dark) .vt-tile-icon { background: rgba(19, 88, 104, .08); color: var(--vt-brand-green); box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .1); }
.vt-bento-card.is-dark .vt-tile-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.vt-bento-card.is-admin::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4M7 8h6M7 11h10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4M7 8h6M7 11h10'/%3E%3C/svg%3E"); }
.vt-bento-card.is-software::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8h18M8 12l-2 2 2 2M16 12l2 2-2 2M13 11.5l-2 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8h18M8 12l-2 2 2 2M16 12l2 2-2 2M13 11.5l-2 5'/%3E%3C/svg%3E"); }
.vt-bento-card.is-security::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8.4-7.5 9.9-4.3-1.5-7.5-5.3-7.5-9.9V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8.4-7.5 9.9-4.3-1.5-7.5-5.3-7.5-9.9V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }
.vt-bento-card.is-ai::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3Cpath d='M10 10h4v4h-4zM9.5 3v4M14.5 3v4M9.5 17v4M14.5 17v4M3 9.5h4M3 14.5h4M17 9.5h4M17 14.5h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3Cpath d='M10 10h4v4h-4zM9.5 3v4M14.5 3v4M9.5 17v4M14.5 17v4M3 9.5h4M3 14.5h4M17 9.5h4M17 14.5h4'/%3E%3C/svg%3E"); }

/* About (home), owner 2026-10-12 ("aro premium"): the former site's layout, sizes and words kept (D-255). The story
   stays justified but no longer breaks words with hyphens; the quote card reads as glass with a fine edge, a deeper
   shadow and the brand hairline; the ticks get a soft ring */
.vt-about2-text { hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
.vt-about2-quote { background: rgba(19, 88, 104, .86); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -30px rgba(11, 36, 48, .65); }
.vt-about2-quote::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(236, 92, 67, 0), rgba(236, 92, 67, .85) 30%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 0)); }
.vt-about2-tick { box-shadow: 0 0 0 4px rgba(19, 88, 104, .1); transition: background-color .25s ease, box-shadow .25s ease; }
.vt-about2-points li:hover .vt-about2-tick { background: var(--vt-coral-ink); box-shadow: 0 0 0 4px rgba(219, 67, 39, .14); }

/* Support expertise fold, owner 2026-10-12 ("aro premium"): the TCS fold, tabs, sizes and words unchanged (D-254, D-262,
   D-304). The open card: the brand hairline along its top, the services beyond the six it lists named beside the button,
   and the division's own icon resting faintly in the empty corner */
.vt-fold-card { position: relative; overflow: hidden; isolation: isolate; }
.vt-fold-card::before { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(219, 67, 39, 0), rgba(219, 67, 39, .85) 30%, rgba(19, 88, 104, .7) 75%, rgba(19, 88, 104, 0)); }
.vt-fold-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: auto; }
.vt-fold-card .vt-fold-foot > .vt-pill { margin-top: 0; }
.vt-fold-more { font: 500 14px/1.3 'Manrope', sans-serif; color: var(--vt-brand-green) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(19, 88, 104, .3); }
.vt-fold-more:hover { color: var(--vt-label) !important; text-decoration-color: currentColor; }
.vt-fold-watermark { position: absolute; right: -18px; bottom: -22px; z-index: -1; color: var(--vt-brand-green); opacity: .06; pointer-events: none; }
.vt-fold-watermark .vt-icon { width: 170px; height: 170px; stroke-width: 1.1; }
@media (max-width: 700px) { .vt-fold-watermark .vt-icon { width: 120px; height: 120px; } }
.vt-fold-foot > .vt-pill { flex: none; white-space: nowrap; }

/* Our process, owner 2026-10-12 ("aro premium"): heading, words, hover fill and rising number unchanged (D-265, D-278).
   The light cards lose the last mint for white into the logo green with a fine edge (D-263), every card gets the brand
   hairline along its top, and on wide screens a dashed brand line at the numbers' height runs behind the cards so the
   four steps read as one flow */
.vt-howto-step:not(.is-dark) { background: linear-gradient(90deg, rgba(219, 67, 39, 0), rgba(219, 67, 39, .8) 30%, rgba(19, 88, 104, .6) 75%, rgba(19, 88, 104, 0)) 30px 0 / calc(100% - 60px) 2px no-repeat, linear-gradient(150deg, #FFFFFF 0%, #F4F8F9 60%, #E9F1F3 100%); box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .08), 0 18px 36px -30px rgba(11, 36, 48, .35); }
.vt-howto-step.is-dark { background: linear-gradient(90deg, rgba(236, 92, 67, 0), rgba(236, 92, 67, .85) 30%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, 0)) 30px 0 / calc(100% - 60px) 2px no-repeat, var(--vt-frame); }
@media (min-width: 1025px) {
  .vt-howto { position: relative; }
  .vt-howto::before { content: ''; position: absolute; left: 30px; right: 30px; top: 53px; height: 2px; background: repeating-linear-gradient(90deg, rgba(219, 67, 39, .55) 0 6px, transparent 6px 12px); pointer-events: none; }
}

/* Video tutorial, owner 2026-10-12 ("aro premium"): words, link, seal and sizes unchanged (D-251, D-264). The card takes
   the promises band's ground (D-277: deep greens in layers, a faint red orange light, a fine light edge); the video sits in
   a frame with a light edge and a deeper shadow; a small play mark leads the link so it reads as a video */
.vt-video { background:
    radial-gradient(520px 260px at 96% 0%, rgba(236, 92, 67, .12), transparent 70%),
    radial-gradient(680px 380px at 10% 130%, rgba(27, 107, 125, .5), transparent 70%),
    linear-gradient(165deg, #10414E 0%, #0B2F39 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -40px rgba(4, 24, 31, .8); }
.vt-video-frame { position: relative; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.vt-video-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; }
.vt .vt-video-link a { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.vt .vt-video-link a::before { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(236, 92, 67, .14); box-shadow: inset 0 0 0 1px rgba(236, 92, 67, .6); transition: background-color .25s ease; }
.vt .vt-video-link a::after { content: ''; position: absolute; left: 10px; top: 50%; margin-top: -5px; border-left: 8px solid #EC5C43; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: border-left-color .25s ease; }
.vt .vt-video-link a:hover::before { background: #EC5C43; }
.vt .vt-video-link a:hover::after { border-left-color: #fff; }

/* Pricing plan cards, owner 2026-10-12 ("aro premium"): words, cut-out tab, hover sheen and no outer shadow kept (D-266,
   D-281). The light cards lose the last mint for white into the logo green with a fine inner edge (D-263); the featured
   plan carries a small Recommended mark; the hours say "a month" */
.vt-tplan:not(.is-dark) { background: linear-gradient(150deg, #FFFFFF 0%, #F4F8F9 60%, #E9F1F3 100%); box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .08); }
.vt-tplan.is-dark { background: radial-gradient(420px 220px at 0% 100%, rgba(236, 92, 67, .14), transparent 70%), var(--vt-frame); }
.vt-tplan-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 5px 11px; border-radius: 999px; background: rgba(236, 92, 67, .14); box-shadow: inset 0 0 0 1px rgba(236, 92, 67, .55); font: 600 11px/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-label-on-dark); }
.vt-tplan-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #EC5C43; }
.vt-tplan-hours small { margin-left: 4px; font: 300 15px/1 'Inter', sans-serif; letter-spacing: 0; color: var(--vt-muted); }
.vt-tplan.is-dark .vt-tplan-hours small { color: rgba(255, 255, 255, .6); }

/* Testimonials, owner 2026-10-12 ("aro premium"): band, slider, cards and motion unchanged (D-257, D-274); still only real
   reviews on the live site (D-256). A large faint quote mark rests in each card's top right corner, the reviewer's photo
   gets a fine ring, and the Read more link (now working) reads as a link in the brand orange */
.vt-testi-card::before { content: '\201D'; position: absolute; right: 18px; top: -6px; font: 400 96px/1 Georgia, 'Times New Roman', serif; color: rgba(236, 92, 67, .22); pointer-events: none; }
.vt-testi-who img, .vt-testi-initial { box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 0 4px rgba(236, 92, 67, .25); }
.vt .vt-testi-more { color: var(--vt-label-on-dark); font-weight: 500; }
.vt .vt-testi-more:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* footer appointment card, owner 2026-10-12 ("aro premium"): its colour (D-270), shape, words and button kept; a faint red
   orange light in its top right corner, the brand hairline along its top, and an arrow that moves on in the button */
.vt-footer-cta { position: relative; overflow: hidden; background: radial-gradient(520px 240px at 100% 0%, rgba(236, 92, 67, .14), transparent 70%), #10343F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.vt-footer-cta::before { content: ''; position: absolute; left: 56px; right: 56px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(236, 92, 67, 0), rgba(236, 92, 67, .85) 30%, rgba(255, 255, 255, .35) 75%, rgba(255, 255, 255, 0)); }
.vt-footer-cta-button { gap: 10px; }
.vt-footer-cta-arrow { display: inline-flex; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.vt-footer-cta-button:hover .vt-footer-cta-arrow { transform: translateX(4px); }

/* header, second pass, owner 2026-10-12 ("aro premium"): bar, logo tab and its line, menu, colours unchanged (D-248,
   D-272, D-282, D-283, D-341). The page you are on gets a small red orange dot under its pill; the Sign in icon sits in
   a fine ring; Hire VASSiSTECH lifts a little with a soft warm shadow (fill stays solid); once the bar turns light on
   scroll, a brand hairline runs along its foot */
.vt-menu > li > a { position: relative; }
.vt-menu > li > a[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #EC5C43; }
.vt-account .vt-icon { box-sizing: content-box; padding: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; opacity: .9; transition: background-color .25s ease; }
.vt-account:hover .vt-icon { background: rgba(19, 88, 104, .08); }
.vt-header-cta { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.vt-header-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(201, 58, 32, .7); }
.vt-header.is-stuck::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(219, 67, 39, 0), rgba(219, 67, 39, .5) 30%, rgba(19, 88, 104, .35) 70%, rgba(19, 88, 104, 0)); pointer-events: none; }

/* inner page hero (about, services, divisions, pricing, faq, contact, jobs), owner 2026-10-12 ("aro premium"): words,
   layout and sizes unchanged (D-249). The same faint brand lights as the home hero (D-343), a fine light edge on the
   picture, and on a division the glass badge gets the brand hairline, a warm corner light and a soft blur */
.vt-ph { isolation: isolate; }
.vt-ph::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(36% 50% at 78% 40%, rgba(236, 92, 67, .12), transparent 70%), radial-gradient(30% 40% at 8% 90%, rgba(31, 122, 142, .22), transparent 70%); }
.vt-ph-pic::after { content: ''; position: absolute; inset: 0; border-radius: 40px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; }
.vt-ph-pic img { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .65); }
.vt-ph-badge { position: relative; overflow: hidden; background: radial-gradient(360px 200px at 100% 0%, rgba(236, 92, 67, .16), transparent 70%), rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -40px rgba(0, 0, 0, .6); }
.vt-ph-badge::before { content: ''; position: absolute; left: 40px; right: 40px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(236, 92, 67, 0), rgba(236, 92, 67, .85) 30%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, 0)); }
@media (max-width: 700px) { .vt-ph-pic::after { border-radius: 28px; top: 0; bottom: auto; height: 240px; } }

/* Services page division list, owner 2026-10-12 ("aro premium"): every division, service and word kept (D-249, D-304).
   A glass bar under the header jumps to each group and marks the one in view; each division name carries its own icon
   tile (as in the menu and the fold) */
.vt-rows { overflow: clip; } /* was hidden: clip keeps the watermark cut and lets the bar below stay under the header */
.vt-rows-jump { position: sticky; top: calc(var(--vt-header-h) + 10px); z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 0 30px; padding: 5px; border-radius: 999px; background: rgba(8, 36, 44, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px -20px rgba(0, 0, 0, .6); }
.vt-rows-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font: 400 14px/1 'Manrope', sans-serif; color: rgba(255, 255, 255, .82) !important; text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.vt-rows-jump a span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 600 12px/1 'Manrope', sans-serif; }
.vt-rows-jump a:hover { background: rgba(255, 255, 255, .1); color: #fff !important; }
.vt-rows-jump a.is-current { background: #C93A20; color: #fff !important; }
.vt-rows-jump a.is-current span { background: rgba(255, 255, 255, .22); }
.vt-rows-group { scroll-margin-top: calc(var(--vt-header-h) + 84px); }
.vt-rows-name { display: flex; align-items: center; gap: 16px; }
.vt-rows-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #EC5C43; transition: background-color .25s ease, color .25s ease; }
.vt-rows-list a:hover .vt-rows-ico { background: #C93A20; color: #fff; }
@media (max-width: 700px) {
  .vt-rows-jump { border-radius: 18px; }
  .vt-rows-jump a { padding: 8px 12px; font-size: 13px; }
  .vt-rows-ico { width: 36px; height: 36px; border-radius: 12px; }
  .vt-rows-name { gap: 12px; }
}
.vt-rows-jump b { font-weight: inherit; }
.vt-rows-jump .is-short { display: none; }
@media (max-width: 700px) {
  .vt-rows-jump { flex-wrap: nowrap; border-radius: 999px; }
  .vt-rows-jump .is-full { display: none; }
  .vt-rows-jump .is-short { display: inline; }
}

/* About page, owner 2026-10-12 ("aro premium"): words and layout kept (D-249, D-360). The quote card's mark is a real
   quotation mark (the line icon read like "55"); the story picture gets a fine light edge; the Trust panel takes the
   promises band's ground (D-277) and its four promises are set apart by fine fading rules on wide screens */
.vt-about-quote-mark { flex: none; margin-top: -6px; font: 400 54px/1 Georgia, 'Times New Roman', serif; color: #EC5C43; }
.vt-about-quote { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -24px rgba(0, 0, 0, .6); }
.vt-split-media { position: relative; }
.vt-split-media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); pointer-events: none; }
.vt-dark-grid { background:
    radial-gradient(520px 260px at 96% 0%, rgba(236, 92, 67, .13), transparent 70%),
    radial-gradient(680px 380px at 6% 120%, rgba(27, 107, 125, .5), transparent 70%),
    linear-gradient(165deg, #10414E 0%, #0B2F39 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -40px rgba(4, 24, 31, .8); }
@media (min-width: 1025px) {
  .vt-dark-items .vt-band-item { position: relative; }
  .vt-dark-items .vt-band-item + .vt-band-item::before { content: ''; position: absolute; left: -14px; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 30%, rgba(236, 92, 67, .35) 70%, rgba(255, 255, 255, 0)); }
}

/* Pricing page, owner 2026-10-12 ("aro premium"): words and tables kept (D-249, D-266); plan cards done in D-351.
   Each level in the comparison is a small pill from light to deep; the Growth column (the Recommended plan) carries a
   faint red orange tint in both tables with a dot in its head; the note bar loses the last mint (D-263) */
.vt-plan-level { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font: 400 13.5px/1.2 'Manrope', sans-serif; white-space: nowrap; }
.vt-plan-level.is-off { padding-left: 0; color: var(--vt-muted); }
.vt-plan-level.is-off::before { content: ''; width: 10px; height: 1.5px; margin-right: 8px; background: currentColor; opacity: .6; }
.vt-plan-level.is-low { background: rgba(19, 88, 104, .06); color: var(--vt-brand-green); }
.vt-plan-level.is-mid { background: rgba(19, 88, 104, .12); color: var(--vt-brand-green); }
.vt-plan-level.is-high { background: var(--vt-brand-green); color: #fff; }
.vt-plan-level.is-custom { box-shadow: inset 0 0 0 1px rgba(219, 67, 39, .5); color: var(--vt-label); }
.vt-table tbody tr > :nth-child(3) { background: rgba(219, 67, 39, .04); }
.vt-table thead th:nth-child(3) { position: relative; background: #0B2F39; }
.vt-table thead th:nth-child(3)::after { content: 'Recommended'; display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(236, 92, 67, .18); color: #EC5C43; font: 600 10px/1 'Manrope', sans-serif; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.vt-note-bar { background: linear-gradient(150deg, #FFFFFF 0%, #F4F8F9 60%, #E9F1F3 100%); box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .1); }

/* FAQ page, owner 2026-10-12 ("aro premium"): groups, numbering, sticky group heads and every answer kept (D-249).
   A search narrows the 36 questions as you type, links lead to each group, and an open question becomes a white card
   with a red orange minus and its answer easing in */
.vt-faq-tools { display: grid; gap: 16px; margin: 0 0 18px; }
.vt-faq-search { display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 6px 8px 6px 20px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--vt-line), 0 14px 30px -24px rgba(11, 36, 48, .4); color: var(--vt-muted); transition: box-shadow .25s ease; }
.vt-faq-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--vt-brand-green), 0 14px 30px -24px rgba(11, 36, 48, .4); }
.vt-faq-search input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; font: 400 16px/1.2 'Inter', sans-serif; color: var(--vt-ink); }
.vt-faq-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-faq-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(19, 88, 104, .06); color: var(--vt-brand-green) !important; font: 400 14px/1 'Manrope', sans-serif; text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.vt-faq-jump a span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #fff; font: 600 11.5px/1 'Manrope', sans-serif; }
.vt-faq-jump a:hover { background: #C93A20; color: #fff !important; }
.vt-faq-jump a:hover span { background: rgba(255, 255, 255, .22); }
.vt-faq-none { margin: 24px 0; padding: 18px 22px; border-radius: 18px; background: rgba(219, 67, 39, .06); color: var(--vt-ink); }
.vt-faq-none a { color: var(--vt-label); font-weight: 500; }
.vt-faq { scroll-margin-top: calc(var(--vt-header-h) + 16px); }
.vt-faq .vt-accordion details { transition: background-color .3s ease, box-shadow .3s ease; }
.vt-faq .vt-accordion details[open] { background: #fff; box-shadow: inset 0 0 0 1px var(--vt-line), 0 22px 44px -32px rgba(11, 36, 48, .45); }
.vt-faq .vt-accordion details[open] summary { border-color: transparent; box-shadow: none; background: none; }
.vt-faq .vt-accordion details[open] summary i { background: #C93A20; border-color: #C93A20; }
.vt-faq .vt-accordion details[open] summary i::before, .vt-faq .vt-accordion details[open] summary i::after { background: #fff; }
.vt-faq .vt-accordion details[open] > p { padding: 0 28px 22px; animation: vt-faq-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes vt-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vt-faq .vt-accordion details[open] > p { animation: none; } }
.vt-faq[hidden], .vt-faq .vt-accordion details[hidden] { display: none; }

/* Contact page, premium pass (D-364): one white list instead of four mint cards, a quiet "what happens next",
   topic chips instead of a dropdown, a titled form card. Brand colours only. */
.vt-contact { gap: clamp(28px, 4vw, 56px); }
.vt-contact-list { list-style: none; margin: 26px 0 0; padding: 6px; border: 1px solid var(--vt-line); border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -40px rgba(11, 36, 48, .45); }
.vt-contact-list li + li { border-top: 1px solid var(--vt-line); }
.vt-contact-row { display: flex; align-items: center; gap: 16px; padding: 16px 16px; border-radius: 18px; color: var(--vt-text); text-decoration: none; }
a.vt-contact-row { transition: background .2s; }
a.vt-contact-row:hover { background: var(--vt-soft); }
.vt-contact-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--vt-teal-soft); color: var(--vt-teal); transition: background .2s, color .2s; }
a.vt-contact-row:hover .vt-contact-ico { background: var(--vt-teal); color: #fff; }
.vt-contact-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.vt-contact-txt small { font: 500 11px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-contact-txt strong { font: 400 17px/1.35 'Manrope', sans-serif; color: var(--vt-ink); overflow-wrap: anywhere; }
.vt-contact-txt span { font-size: 15px; line-height: 1.5; }
.vt-contact-txt a { color: var(--vt-teal); text-underline-offset: 3px; }
.vt-contact-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--vt-line); color: var(--vt-teal); transition: transform .2s, background .2s, color .2s, border-color .2s; }
a.vt-contact-row:hover .vt-contact-go { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); color: #fff; transform: translateX(3px); }
.vt-contact-next { margin-top: 28px; }
.vt-contact-next-title { margin: 0 0 14px; font: 500 12px/1.3 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-contact-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.vt-contact-next li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding-bottom: 18px; position: relative; }
.vt-contact-next li:last-child { padding-bottom: 0; }
.vt-contact-next li:not(:last-child)::before { content: ''; position: absolute; left: 15.5px; top: 34px; bottom: 2px; width: 1px; background: linear-gradient(var(--vt-teal), rgba(19, 88, 104, .1)); }
.vt-contact-next li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--vt-teal); color: var(--vt-teal); font: 400 14px/1 'Manrope', sans-serif; background: #fff; }
.vt-contact-next strong { display: block; font: 400 16px/1.35 'Manrope', sans-serif; color: var(--vt-ink); margin-top: 5px; }
.vt-contact-next p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--vt-muted); }
.vt-contact-form { position: relative; border: 1px solid var(--vt-line); overflow: clip; }
.vt-contact-form::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--vt-teal), var(--vt-coral)); }
.vt-contact-form-head { padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--vt-line); }
.vt-contact-form-head h3 { margin: 0; font: 400 clamp(22px, 2vw, 26px)/1.25 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-contact-form-head p { margin: 6px 0 0; font-size: 14px; color: var(--vt-muted); }
.vt-topics { border: 0; padding: 0; margin: 0; min-width: 0; }
.vt-topics legend { padding: 0; margin-bottom: 10px; font: 500 15px/1.4 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-topic-chip { position: relative; display: inline-flex; cursor: pointer; }
.vt-topic-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vt-topic-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--vt-line); background: var(--vt-panel-2, #F7F9FC); color: var(--vt-text); font-size: 14.5px; line-height: 1.3; transition: background .2s, border-color .2s, color .2s; }
.vt-topic-chip:hover span { border-color: var(--vt-teal); color: var(--vt-teal); }
.vt-topic-chip input:checked + span { background: var(--vt-teal); border-color: var(--vt-teal); color: #fff; }
.vt-topic-chip input:focus-visible + span { outline: 2px solid var(--vt-coral); outline-offset: 2px; }
.vt-topics.vt-field-error .vt-topic-chip span { border-color: var(--vt-coral-ink); }
/* tablet: one column, so the three steps sit side by side and the line runs across */
@media (min-width: 640px) and (max-width: 1024px) {
  .vt-contact-next ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .vt-contact-next li { grid-template-columns: 1fr; gap: 10px; padding-bottom: 0; }
  .vt-contact-next li:not(:last-child)::before { left: 44px; right: -12px; top: 15.5px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--vt-teal), rgba(19, 88, 104, .1)); }
  .vt-contact-next strong { margin-top: 0; }
}
@media (max-width: 560px) {
  .vt-contact-row { gap: 12px; padding: 14px 10px; }
  .vt-contact-ico { width: 40px; height: 40px; }
  .vt-contact-txt strong { font-size: 16px; }
  /* inner hero phone badge: the number stays on one line on phones */
  .vt-ph-card { padding: 14px 18px; gap: 12px; }
  .vt-ph-card strong { font-size: 20px; white-space: nowrap; }
}

/* Jobs board, premium pass (D-365): the inner hero like every page, a slim rates gate, one filter bar,
   job cards that open as a whole, an empty state that says what to do next. Brand colours only. */
.vt-jobs-gate { display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 16px; margin-bottom: 22px; border-radius: 20px; background: linear-gradient(120deg, var(--vt-frame), var(--vt-teal)); color: rgba(255, 255, 255, .86); }
.vt-jobs-gate p { margin: 0; flex: 1; font-size: 15px; line-height: 1.55; }
.vt-jobs-gate strong { color: #fff; font-weight: 500; }
.vt-jobs-gate-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #EC5C43; }
.vt-jobs-gate .vt-button { flex: none; white-space: nowrap; }
.vt-jobs-filters { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 18px; border: 1px solid var(--vt-line); border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -42px rgba(11, 36, 48, .5); }
.vt-jobs-filters .vt-field { margin: 0; min-width: 0; }
.vt-jobs-filters label { font-size: 13px; color: var(--vt-muted); }
.vt-jobs-q-in { position: relative; display: block; }
.vt-jobs-q-in .vt-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--vt-teal); pointer-events: none; }
.vt-jobs-q-in input { padding-left: 42px; }
.vt-jobs-filters-action .vt-button { min-height: 48px; padding-inline: 26px; }
.vt-jobs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 34px 0 16px; }
.vt-jobs-head h2 { margin: 0; font: 400 clamp(22px, 2.2vw, 28px)/1.25 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-jobs-head p { margin: 0; font-size: 14px; color: var(--vt-muted); }
.vt-jobs-clear { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--vt-coral-ink); text-decoration: none; }
.vt-jobs-clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.vt-job-list { gap: 16px; }
.vt-job-card { position: relative; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--vt-line); border-radius: 24px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.vt-job-card:not(.is-sample):hover { border-color: rgba(19, 88, 104, .35); box-shadow: 0 26px 50px -36px rgba(11, 36, 48, .45); transform: translateY(-2px); }
.vt-job-card.is-sample { border-style: dashed; }
.vt-job-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vt-job-cat { margin: 0; font: 500 12px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-job-sample { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--vt-muted); color: var(--vt-muted); }
.vt-job-card h3 { margin: 8px 0 0; font: 400 clamp(19px, 1.8vw, 22px)/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-job-card h3 a { color: inherit; text-decoration: none; }
.vt-job-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.vt-job-card:hover h3 a { color: var(--vt-teal); }
.vt-job-desc { margin: 8px 0 0; color: var(--vt-text); font-size: 15px; line-height: 1.6; max-width: 820px; }
.vt-job-card .vt-tags { margin-top: 14px; }
.vt-job-card .vt-tags li { background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-job-foot { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vt-line); }
.vt-job-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; }
.vt-job-facts li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--vt-muted); }
.vt-job-facts .vt-icon { color: var(--vt-teal); flex: none; }
.vt-job-rate { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--vt-teal); color: #fff; font: 400 15px/1.2 'Manrope', sans-serif; }
.vt-job-rate.is-locked { background: transparent; border: 1px solid var(--vt-line); color: var(--vt-muted); font: 400 13px/1.2 'Inter', sans-serif; }
.vt-job-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vt-line); color: var(--vt-teal); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.vt-job-card:hover .vt-job-go { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); color: #fff; transform: translateX(3px); }
.vt-job-card .vt-badge { position: relative; z-index: 1; }
.vt-jobs-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(32px, 5vw, 56px) 20px; border: 1px dashed rgba(19, 88, 104, .3); border-radius: 28px; background: linear-gradient(180deg, #fff, var(--vt-soft)); }
.vt-jobs-empty-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--vt-teal-soft); color: var(--vt-teal); margin-bottom: 4px; }
.vt-jobs-empty h3 { margin: 0; font: 400 clamp(20px, 2vw, 24px)/1.3 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-jobs-empty p { margin: 0 0 8px; max-width: 520px; color: var(--vt-muted); line-height: 1.6; }
.vt-jobs-toggle { display: none !important; }
@media (max-width: 1100px) {
  /* search and the button on the first row, the four lists on the second */
  .vt-jobs-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vt-jobs-q { grid-column: 1 / 4; grid-row: 1; }
  .vt-jobs-filters-action { grid-column: 4; grid-row: 1; }
  .vt-jobs-filters-action .vt-button { width: 100%; justify-content: center; }
}
@media (max-width: 700px) {
  .vt-jobs-gate { flex-wrap: wrap; }
  .vt-jobs-gate p { flex-basis: calc(100% - 60px); }
  .vt-jobs-gate .vt-button { width: 100%; justify-content: center; }
  /* phones: search, then Filters and Search; the four lists open under them */
  .vt-jobs-filters { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .vt-jobs-q, .vt-jobs-filters-action { grid-column: 1; grid-row: auto; }
  .vt-jobs-filters-action { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .vt-jobs-filters .vt-field:not(.vt-jobs-q) { order: 2; }
  /* with script the lists fold behind Filters; without it they simply show */
  .vt-jobs-filters.has-toggle .vt-jobs-toggle { display: inline-flex !important; }
  .vt-jobs-filters:not(.has-toggle) .vt-jobs-filters-action { grid-template-columns: 1fr; }
  .vt-jobs-filters.has-toggle:not(.is-open) .vt-field:not(.vt-jobs-q) { display: none; }
  .vt-job-facts { flex-basis: 100%; }
  .vt-job-go { display: none; }
}
.vt-fact-ring.is-upright .vt-icon { transform: none; }

/* Sign in and the start of Hire VASSiSTECH (D-366): the card on the right, on the left why you sign in and what
   comes next (hire, work, or both paths). Phones show the card first. */
.vt-sign { padding: clamp(36px, 6vw, 80px) 0; background: radial-gradient(900px 420px at 0% 0%, rgba(19, 88, 104, .07), transparent 70%), radial-gradient(700px 380px at 100% 100%, rgba(236, 92, 67, .06), transparent 70%); }
.vt-sign-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.vt-sign-intro { order: 1; }
.vt-sign-card { order: 2; }
.vt-sign-intro h2 { margin: 6px 0 0; font: 300 clamp(32px, 3.6vw, 46px)/1.12 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-sign-lead { margin: 14px 0 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--vt-text); }
.vt-sign-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; }
.vt-sign-steps li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding-bottom: 20px; }
.vt-sign-steps li:last-child { padding-bottom: 0; }
.vt-sign-steps li:not(:last-child)::before { content: ''; position: absolute; left: 17.5px; top: 40px; bottom: 4px; width: 1px; background: linear-gradient(var(--vt-teal), rgba(19, 88, 104, .12)); }
.vt-sign-steps li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vt-teal); background: #fff; color: var(--vt-teal); font: 400 15px/1 'Manrope', sans-serif; }
.vt-sign-steps li.is-now > span { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); color: #fff; box-shadow: 0 0 0 6px rgba(236, 92, 67, .14); }
.vt-sign-steps strong { display: block; margin-top: 6px; font: 400 17px/1.35 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-sign-steps p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--vt-muted); }
.vt-sign-alt { margin: 26px 0 0; font-size: 15px; color: var(--vt-muted); }
.vt-sign-alt a { color: var(--vt-teal); text-underline-offset: 3px; }
.vt-sign-paths { display: grid; gap: 12px; margin-top: 26px; max-width: 520px; }
.vt-sign-paths a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--vt-line); border-radius: 20px; background: #fff; color: var(--vt-ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.vt-sign-paths a:hover { border-color: rgba(19, 88, 104, .35); box-shadow: 0 20px 40px -32px rgba(11, 36, 48, .5); transform: translateY(-2px); }
.vt-sign-paths a > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.vt-sign-paths strong { font: 400 17px/1.3 'Manrope', sans-serif; }
.vt-sign-paths small { font-size: 14px; color: var(--vt-muted); }
.vt-sign-paths a > .vt-icon { color: var(--vt-coral-ink); flex: none; }
.vt-sign-path-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-sign-card { position: relative; padding: clamp(26px, 3.2vw, 40px); border: 1px solid var(--vt-line); border-radius: 32px; background: #fff; box-shadow: 0 40px 80px -50px rgba(11, 36, 48, .55); overflow: clip; }
.vt-sign-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--vt-teal), var(--vt-coral)); }
.vt-sign-card-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--vt-teal-soft); color: var(--vt-teal); margin-bottom: 18px; }
.vt-sign-card h1 { margin: 0; font: 400 clamp(26px, 2.6vw, 32px)/1.2 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-sign-card > p { margin: 10px 0 0; color: var(--vt-text); line-height: 1.6; }
.vt-sign-card form { display: grid; gap: 16px; margin-top: 22px; }
.vt-sign-card form .vt-field { margin: 0; }
.vt-sign-card form .vt-button { width: 100%; justify-content: center; min-height: 52px; }
.vt-sign-card .vt-hint { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--vt-line); font-size: 13.5px; line-height: 1.55; }
.vt-sign-card .vt-hint a { color: var(--vt-teal); }
.vt-sign-code { letter-spacing: .4em; font: 400 22px/1.2 'Manrope', sans-serif !important; text-align: center; }
@media (max-width: 900px) {
  .vt-sign-grid { grid-template-columns: 1fr; }
  .vt-sign-intro, .vt-sign-card { order: 0; }
  .vt-sign-card { max-width: 560px; width: 100%; justify-self: center; }
  .vt-sign-intro { max-width: 560px; width: 100%; justify-self: center; }
}

/* Hire VASSiSTECH, client details (D-366): where you are in the four steps, company or person as two chips,
   the form as one calm card with numbered sections. */
.vt-hire-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; counter-reset: none; }
.vt-hire-bar li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--vt-line); background: #fff; font-size: 14px; color: var(--vt-muted); }
.vt-hire-bar li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vt-soft); color: var(--vt-teal); font: 400 12px/1 'Manrope', sans-serif; }
.vt-hire-bar li.is-done { color: var(--vt-teal); }
.vt-hire-bar li.is-done > span { background: var(--vt-teal); color: #fff; }
.vt-hire-bar li.is-now { border-color: var(--vt-coral-ink); color: var(--vt-ink); }
.vt-hire-bar li.is-now > span { background: var(--vt-coral-ink); color: #fff; }
.vt-hire-form { position: relative; border: 1px solid var(--vt-line); border-radius: 28px; overflow: clip; box-shadow: 0 30px 60px -44px rgba(11, 36, 48, .5); counter-reset: hire; }
.vt-hire-form::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--vt-teal), var(--vt-coral)); }
.vt-hire-form > fieldset:first-of-type { border-top: 0; padding-top: 0; }
.vt-hire-form > fieldset > legend { counter-increment: hire; display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--vt-teal); }
.vt-hire-form > fieldset > legend::before { content: counter(hire); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--vt-teal); font: 400 13px/1 'Manrope', sans-serif; }
.vt-kind .vt-topic-chip span { gap: 8px; padding: 10px 18px; font-size: 15px; }
.vt-kind .vt-topic-chip .vt-icon { color: var(--vt-teal); }
.vt-kind .vt-topic-chip input:checked + span .vt-icon { color: #fff; }
/* two fields side by side: labels on one line, boxes on one line, whatever the hints (D-366) */
.vt-hire-form .vt-row > .vt-field { display: flex; flex-direction: column; }
.vt-hire-form .vt-row > .vt-field > input, .vt-hire-form .vt-row > .vt-field > select, .vt-hire-form .vt-row > .vt-field > textarea { margin-top: auto; }

/* My account (D-367): a dark band with the member and both progress counts, then calm white cards; steps as a
   numbered list with ticks, each action as a small arrow link, lists as rows. Brand colours only. */
.vt-acct-band { position: relative; overflow: clip; background: radial-gradient(700px 300px at 85% 0%, rgba(236, 92, 67, .16), transparent 70%), linear-gradient(120deg, var(--vt-frame-2), var(--vt-frame) 55%, var(--vt-teal)); color: rgba(255, 255, 255, .8); padding: clamp(28px, 4vw, 48px) 0; }
.vt-acct-head { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.vt-acct-who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.vt-acct-avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: 300 28px/1 'Manrope', sans-serif; }
.vt-acct-who .vt-eyebrow { color: var(--vt-label-on-dark); margin: 0; }
.vt-acct-who h1 { margin: 4px 0 0; font: 300 clamp(24px, 3vw, 36px)/1.2 'Manrope', sans-serif; color: #fff; overflow-wrap: anywhere; }
.vt-acct-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 14px; }
.vt-acct-meta span + span::before { content: '·'; margin-right: 14px; opacity: .6; }
.vt-acct-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vt-acct-count { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.vt-acct-count:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.vt-acct-count-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(236, 92, 67, .16); color: #fff; font: 300 22px/1 'Manrope', sans-serif; }
.vt-acct-count-num small { font-size: 13px; opacity: .7; }
.vt-acct-count > span:last-child { display: grid; gap: 2px; font: 400 15px/1.25 'Manrope', sans-serif; }
.vt-acct-count > span:last-child small { font: 400 12.5px/1.2 'Inter', sans-serif; color: rgba(255, 255, 255, .65); }
.vt-acct-out { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; font: 400 14px/1 'Inter', sans-serif; cursor: pointer; transition: background .2s; }
.vt-acct-out:hover { background: rgba(255, 255, 255, .1); }
.vt-acct { padding-top: clamp(28px, 4vw, 44px); }
.vt-acct-card { position: relative; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--vt-line); border-radius: 26px; background: #fff; box-shadow: 0 24px 50px -44px rgba(11, 36, 48, .5); margin-bottom: var(--vt-gap); }
.vt-acct-card h2 { margin: 0; font: 400 clamp(20px, 2vw, 24px)/1.25 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-acct-card .vt-muted { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }
.vt-acct-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-acct-card-head { display: flex; gap: 16px; align-items: flex-start; }
.vt-acct-id { display: flex; gap: 18px; align-items: flex-start; border-left: 3px solid var(--vt-coral-ink); }
.vt-acct-id.is-done { border-left-color: var(--vt-teal); }
.vt-acct-id-body { flex: 1; min-width: 0; }
.vt-acct-id-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.vt-acct-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(201, 58, 32, .35); color: var(--vt-coral-ink); background: rgba(236, 92, 67, .06); font-size: 13.5px; white-space: nowrap; }
.vt-acct-pill.is-done { border-color: var(--vt-teal); background: var(--vt-teal); color: #fff; }
.vt-acct-id-form { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--vt-soft); }
.vt-acct-soon { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 14px; border-radius: 12px; background: var(--vt-soft); color: var(--vt-text); font-size: 14px; }
.vt-acct-soon .vt-icon { color: var(--vt-teal); flex: none; }
.vt-acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: var(--vt-gap); margin-bottom: var(--vt-gap); }
.vt-acct-grid > .vt-acct-card { margin-bottom: 0; }
.vt-acct-bar { height: 6px; margin: 20px 0 6px; border-radius: 999px; background: var(--vt-soft); overflow: hidden; }
.vt-acct-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--vt-teal), var(--vt-coral)); }
.vt-acct-bar .is-w1of3 { width: 33.34%; } .vt-acct-bar .is-w2of3 { width: 66.67%; } .vt-acct-bar .is-w3of3, .vt-acct-bar .is-w4of4 { width: 100%; }
.vt-acct-bar .is-w1of4 { width: 25%; } .vt-acct-bar .is-w2of4 { width: 50%; } .vt-acct-bar .is-w3of4 { width: 75%; }
.vt-acct-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.vt-acct-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--vt-line); flex-wrap: wrap; }
.vt-acct-steps li:last-child { border-bottom: 0; padding-bottom: 4px; }
.vt-acct-step-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--vt-line); color: var(--vt-muted); font: 400 14px/1 'Manrope', sans-serif; }
.vt-acct-steps li.is-done .vt-acct-step-mark { background: var(--vt-teal); border-color: var(--vt-teal); color: #fff; }
.vt-acct-steps li.is-wait .vt-acct-step-mark { border-color: var(--vt-teal); color: var(--vt-teal); border-style: dashed; }
.vt-acct-steps li.is-no .vt-acct-step-mark { border-color: var(--vt-coral-ink); color: var(--vt-coral-ink); }
.vt-acct-step-txt, .vt-acct-row-txt { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.vt-acct-step-txt strong, .vt-acct-row-txt strong { font: 400 16px/1.35 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-acct-step-txt small, .vt-acct-row-txt small { font-size: 13.5px; color: var(--vt-muted); }
.vt-acct-steps li.is-done .vt-acct-step-txt small { color: var(--vt-teal); }
.vt-acct-steps li.is-no .vt-acct-step-txt small { color: var(--vt-coral-ink); }
.vt-acct-go { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--vt-line); color: var(--vt-teal); font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.vt-acct-go:hover { border-color: var(--vt-teal); background: var(--vt-teal-soft); }
.vt-acct-go.is-act { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); color: #fff; }
.vt-acct-go.is-act:hover { background: var(--vt-coral-dark); }
.vt-acct-sub { margin: 24px 0 6px; font: 500 12px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-acct-rows { list-style: none; margin: 0; padding: 0; }
.vt-acct-rows li { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--vt-line); }
.vt-acct-rows li:last-child { border-bottom: 0; }
.vt-acct-row-go { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.vt-acct-cta { margin: 18px 0 0; }
.vt-acct-empty { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--vt-line); color: var(--vt-muted); font-size: 14.5px; }
@media (max-width: 700px) {
  .vt-acct-head { align-items: flex-start; }
  .vt-acct-side { width: 100%; }
  .vt-acct-count { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .vt-acct-side form { width: 100%; }
  .vt-acct-out { width: 100%; justify-content: center; }
  .vt-acct-id { flex-direction: column; }
  /* phones: the step reads on one line and its action sits under it */
  .vt-acct-step-txt { min-width: 0; flex-basis: calc(100% - 46px); }
  .vt-acct-steps li .vt-acct-go { margin-left: 46px; }
  .vt-acct-row-txt { min-width: 0; flex-basis: 100%; }
}
.vt-acct-count-num { display: flex; align-items: baseline; justify-content: center; padding-top: 2px; line-height: 46px; }
.vt-acct-count > span:last-child { color: #fff; }

/* Worker profile (D-368): the step bar, a sticky list of the seven sections that marks where you are and which are
   complete, numbered sections, every service group folding with its count, and a save bar that stays in reach.
   (The pricing pills were renamed .vt-plan-level: as .vt-level they broke these service rows.) */
.vt-form-wrap.vt-profile-wrap { max-width: 1140px; }
.vt-profile-wrap > .vt-muted { max-width: 760px; }
.vt-profile-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.vt-profile-nav { position: sticky; top: calc(var(--vt-header-h) + 24px); padding: 18px 14px; border: 1px solid var(--vt-line); border-radius: 22px; background: #fff; }
.vt-profile-nav > p { margin: 0 0 10px 8px; font: 500 12px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-profile-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vt-profile-nav a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; color: var(--vt-text); font-size: 14.5px; text-decoration: none; transition: background .2s, color .2s; }
.vt-profile-nav a:hover { background: var(--vt-soft); }
.vt-profile-nav a > span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--vt-line); font: 400 12px/1 'Manrope', sans-serif; color: var(--vt-muted); }
.vt-profile-nav a.is-now { background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-profile-nav a.is-now > span { border-color: var(--vt-teal); color: var(--vt-teal); }
.vt-profile-nav a.is-done > span { background: var(--vt-teal); border-color: var(--vt-teal); color: transparent; position: relative; }
.vt-profile-nav a.is-done > span::after { content: ''; position: absolute; width: 9px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.vt-profile-nav a.has-error > span { border-color: var(--vt-coral-ink); color: var(--vt-coral-ink); }
.vt-profile-form { margin: 0; }
.vt-profile-form > fieldset { scroll-margin-top: calc(var(--vt-header-h) + 24px); }
.vt-profile-form .vt-pick-group > summary { font-weight: 400; }
.vt-profile-form .vt-levels { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 0 22px; }
.vt-profile-form .vt-level { grid-template-columns: minmax(0, 1fr) 150px; padding: 8px 0; border-top: 1px solid var(--vt-line); font-size: 14.5px; }
.vt-profile-form .vt-level select { width: 100%; }
.vt-profile-form .vt-level:has(option:checked:not([value=""])) label { color: var(--vt-teal); }
.vt-profile-save { position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 10px; padding: 14px 16px 14px 20px; border: 1px solid var(--vt-line); border-radius: 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -24px rgba(11, 36, 48, .45); }
.vt-profile-save p { margin: 0; font-size: 14px; color: var(--vt-muted); }
@media (max-width: 1024px) {
  .vt-profile-layout { grid-template-columns: 1fr; }
  .vt-profile-nav { display: none; }
}
@media (max-width: 560px) {
  .vt-profile-save { padding: 12px; }
  .vt-profile-save p { display: none; }
  .vt-profile-save .vt-button { width: 100%; justify-content: center; }
  .vt-profile-form .vt-level { grid-template-columns: 1fr; gap: 6px; }
}
.vt-pick-head { margin: 18px 0 10px; font: 500 12px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.vt-pick-grid > .vt-pick-group { margin: 0; }
.vt-pick-grid > .vt-pick-group[open] { grid-column: 1 / -1; }
.vt-pick-grid > .vt-pick-group > summary { font-size: 15px; padding: 12px 14px; }
@media (max-width: 700px) { .vt-pick-grid { grid-template-columns: minmax(0, 1fr); } }
.vt-pick-grid > .vt-pick-group > summary > span { min-width: 0; overflow-wrap: anywhere; }

/* Describe the work (D-369): the profile's layout (step bar, section list, numbered sections, save bar) and the
   needs as tiles; a services head disappears when every group under it is hidden by the needs. */
.vt-profile-nav li[hidden] { display: none; }
.vt-job-needs .vt-checks { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.vt-job-needs .vt-checks > legend { font: 400 15px/1.4 'Inter', sans-serif; color: var(--vt-muted); margin-bottom: 10px; padding: 0; }
.vt-job-needs .vt-checks-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.vt-job-needs .vt-check { position: relative; align-items: start; padding: 14px 16px; border: 1px solid var(--vt-line); border-radius: 16px; background: var(--vt-panel-2, #F7F9FC); transition: border-color .2s, background .2s; }
.vt-job-needs .vt-check:hover { border-color: rgba(19, 88, 104, .4); }
.vt-job-needs .vt-check:has(input:checked) { border-color: var(--vt-teal); background: var(--vt-teal-soft); }
.vt-job-needs .vt-check:has(input:checked) label { color: var(--vt-teal); }
.vt-job-needs .vt-check input { margin: 2px 0 0; }
.vt-job-needs .vt-check label { font-size: 15px; line-height: 1.5; }
.vt-job-needs .vt-check label { cursor: pointer; }
.vt-job-needs .vt-check label::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.vt-pick-section:not(:has(> .vt-pick-grid > .vt-pick-group:not([hidden]))) { display: none; }
.vt-job-form .vt-pick-group .vt-checks-grid { padding: 4px 14px 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.vt-job-form .vt-check:has(input:checked) label { color: var(--vt-teal); }
/* the list numbers itself like the form does, so a hidden section never leaves a gap (D-369) */
.vt-profile-nav ol { counter-reset: vtnav; }
.vt-profile-nav li:not([hidden]) { counter-increment: vtnav; }
.vt-profile-nav a > span::before { content: counter(vtnav); }
.vt-profile-nav a.is-done > span::before { content: ''; }

/* Agreements and the Order (D-370): the text reads as a document with the VASSiSTECH letterhead, beside it a panel
   with its parts and the confirm that stays in view; a confirmed Order shows where it stands. */
.vt-doc-lead { max-width: 760px; }
.vt-doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 10px; }
.vt-doc { border: 1px solid var(--vt-line); border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -48px rgba(11, 36, 48, .5); overflow: clip; margin-bottom: var(--vt-gap); }
.vt-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px clamp(20px, 3.4vw, 44px); border-bottom: 1px solid var(--vt-line); background: linear-gradient(180deg, #fff, var(--vt-soft)); }
.vt-doc-head img { width: 150px; height: auto; display: block; }
.vt-doc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px dashed rgba(201, 58, 32, .45); color: var(--vt-coral-ink); font-size: 13px; }
.vt-doc-chip.is-done { border: 1px solid var(--vt-teal); background: var(--vt-teal); color: #fff; }
.vt-doc-body { padding: clamp(22px, 3.4vw, 44px); max-width: 78ch; font-size: 15.5px; line-height: 1.75; color: var(--vt-text); }
.vt-doc-body h3 { position: relative; margin: 28px 0 8px; padding-left: 14px; font: 400 18px/1.35 'Manrope', sans-serif; color: var(--vt-teal); scroll-margin-top: calc(var(--vt-header-h) + 24px); }
.vt-doc-body h3::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--vt-coral); }
.vt-doc-body h3:first-child { margin-top: 0; }
.vt-doc-body p { margin: 0 0 12px; white-space: pre-line; }
.vt-doc-side { position: sticky; top: calc(var(--vt-header-h) + 24px); }
.vt-doc-panel { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--vt-line); border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -40px rgba(11, 36, 48, .5); max-height: calc(100vh - var(--vt-header-h) - 48px); overflow: auto; }
.vt-doc-toc summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font: 500 12px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-doc-toc summary::-webkit-details-marker { display: none; }
.vt-doc-toc summary small { letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--vt-muted); }
.vt-doc-toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: part; }
.vt-doc-toc li { counter-increment: part; }
.vt-doc-toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--vt-text); font-size: 14px; line-height: 1.4; text-decoration: none; }
.vt-doc-toc a::before { content: counter(part); flex: none; width: 18px; color: var(--vt-muted); font: 400 12.5px/1.6 'Manrope', sans-serif; }
.vt-doc-toc a:hover { background: var(--vt-soft); color: var(--vt-teal); }
.vt-doc-confirm, .vt-doc-blocked { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--vt-line); }
.vt-doc-toc + .vt-doc-confirm, .vt-doc-toc + .vt-doc-blocked { margin-top: 0; }
.vt-doc-panel > .vt-doc-confirm:first-child, .vt-doc-panel > .vt-doc-blocked:first-child { border-top: 0; padding-top: 0; }
.vt-doc-panel-title { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 17px/1.35 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-doc-panel-title .vt-icon { color: var(--vt-teal); flex: none; }
.vt-doc-confirm .vt-check { padding: 14px; border-radius: 16px; background: var(--vt-soft); }
.vt-doc-confirm .vt-check label { font-size: 14.5px; line-height: 1.55; }
.vt-doc-confirm .vt-button { width: 100%; justify-content: center; min-height: 50px; }
.vt-doc-confirm .vt-hint, .vt-doc-blocked .vt-notice { margin: 0; font-size: 13.5px; line-height: 1.55; }
.vt-doc-edit { justify-self: start; font-size: 14px; color: var(--vt-teal); text-underline-offset: 3px; }
.vt-ordered-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.vt-ordered-head .vt-acct-pill { margin-top: 30px; }
.vt-ordered-track { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 22px 0; padding: 18px 20px; border: 1px solid var(--vt-line); border-radius: 22px; background: #fff; }
.vt-ordered-track li { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; padding-right: 12px; }
.vt-ordered-track li > span { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--vt-line); color: var(--vt-muted); font: 400 14px/1 'Manrope', sans-serif; }
.vt-ordered-track li.is-done > span { background: var(--vt-teal); border-color: var(--vt-teal); color: #fff; }
.vt-ordered-track li.is-next > span { border-color: var(--vt-coral-ink); color: var(--vt-coral-ink); box-shadow: 0 0 0 5px rgba(236, 92, 67, .12); }
.vt-ordered-track strong { font: 400 16px/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-ordered-track small { font-size: 13px; color: var(--vt-muted); }
.vt-ordered-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.vt-acct-row-txt .vt-pre { margin-top: 6px; font-size: 14.5px; }
@media (max-width: 1024px) {
  .vt-doc-layout { grid-template-columns: 1fr; }
  .vt-doc-side { position: static; }
  .vt-doc-panel { max-height: none; }
}
@media (max-width: 640px) {
  .vt-ordered-track { grid-template-columns: 1fr; gap: 14px; }
  .vt-ordered-actions .vt-button { width: 100%; justify-content: center; }
  .vt-ordered-head .vt-acct-pill { margin-top: 0; }
}

/* Invoice and receipt (D-371): the invoice as a document beside the way to pay; brand colours only. */
.vt-inv-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 30px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; border: 1px solid var(--vt-line); color: var(--vt-muted); }
.vt-inv-pill.is-open { border-color: rgba(201, 58, 32, .4); background: rgba(236, 92, 67, .07); color: var(--vt-coral-ink); }
.vt-inv-pill.is-paid { border-color: var(--vt-teal); background: var(--vt-teal); color: #fff; }
.vt-inv-kind { font: 300 26px/1 'Manrope', sans-serif; letter-spacing: .02em; color: var(--vt-teal); }
.vt-inv-body { position: relative; padding: clamp(22px, 3.4vw, 40px); }
.vt-inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--vt-line); }
.vt-inv-meta > div { display: grid; gap: 4px; min-width: 0; }
.vt-inv-meta small { font: 500 11px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-inv-meta strong { font: 400 15.5px/1.4 'Manrope', sans-serif; color: var(--vt-ink); overflow-wrap: anywhere; }
.vt-inv-lines { width: 100%; border-collapse: collapse; margin-top: 18px; }
.vt-inv-lines th, .vt-inv-lines td { padding: 14px 0; text-align: left; vertical-align: top; }
.vt-inv-lines thead th { padding-top: 0; font: 500 11px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-muted); border-bottom: 1px solid var(--vt-line); }
.vt-inv-lines .is-num { text-align: right; white-space: nowrap; padding-left: 16px; }
.vt-inv-lines tbody td { border-bottom: 1px solid var(--vt-line); }
.vt-inv-lines tbody td strong { display: block; font: 400 16px/1.45 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-inv-lines tbody td span { display: block; margin-top: 4px; font-size: 14px; color: var(--vt-muted); }
.vt-inv-lines tbody td a { color: var(--vt-teal); text-underline-offset: 3px; }
.vt-inv-lines tbody .is-num { font: 400 16px/1.45 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-inv-lines tfoot th, .vt-inv-lines tfoot td { padding-top: 18px; font: 400 15px/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-inv-lines tfoot td { font: 300 clamp(24px, 2.6vw, 30px)/1.1 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-inv-void { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--vt-soft); color: var(--vt-text); font-size: 14.5px; }
.vt-inv-stamp { position: absolute; left: 40%; bottom: clamp(20px, 3vw, 34px); margin: 0; padding: 6px 18px; border: 2px solid rgba(19, 88, 104, .35); border-radius: 12px; color: rgba(19, 88, 104, .45); font: 400 28px/1 'Manrope', sans-serif; letter-spacing: .18em; text-transform: uppercase; transform: rotate(-12deg); pointer-events: none; }
.vt-inv-pay { display: grid; gap: 14px; }
.vt-inv-pay form { display: grid; gap: 12px; margin: 0; }
.vt-inv-pay form .vt-button { width: 100%; justify-content: center; min-height: 52px; gap: 8px; }
.vt-inv-pay .vt-hint, .vt-inv-pay .vt-muted { margin: 0; font-size: 13.5px; line-height: 1.55; }
.vt-inv-amount { display: grid; gap: 4px; margin: 0; font: 300 34px/1.1 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-inv-amount small { font: 500 11px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-inv-or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--vt-muted); font-size: 13px; }
.vt-inv-or::before, .vt-inv-or::after { content: ''; flex: 1; height: 1px; background: var(--vt-line); }
.vt-inv-bank { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--vt-soft); }
.vt-inv-bank p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--vt-text); }
.vt-inv-bank .vt-doc-panel-title { font-size: 15.5px; color: var(--vt-ink); }
.vt-inv-links { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--vt-line); }
.vt-inv-links .vt-button { justify-content: center; gap: 8px; }
@media (max-width: 640px) {
  .vt-inv-pill { margin-top: 0; }
  .vt-inv-stamp { left: auto; right: 22px; bottom: 74px; font-size: 20px; }
}

/* an open invoice on a phone or tablet: how to pay comes first, the invoice under it */
@media (max-width: 1024px) { .vt-doc-layout.is-pay > .vt-doc-side { order: -1; } }

/* Verified talent (D-372): profile cards two to a row, an alias mark instead of a photo (no name, no face), the
   badges, why they fit, and the shortlist; a shortlisted card turns teal. */
.vt-talent-back { display: inline-block; margin-bottom: 14px; }
.vt-talent-count { display: inline-flex; align-items: center; gap: 8px; margin: 30px 0 0; padding: 8px 16px; border: 1px solid var(--vt-line); border-radius: 999px; background: #fff; font-size: 14px; color: var(--vt-muted); }
.vt-talent-count strong { font: 400 16px/1 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-talent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 18px; margin-top: 8px; }
.vt-talent-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--vt-line); border-radius: 26px; background: #fff; box-shadow: 0 24px 50px -44px rgba(11, 36, 48, .5); transition: border-color .2s, box-shadow .2s; }
.vt-talent-card:hover { border-color: rgba(19, 88, 104, .3); box-shadow: 0 30px 60px -40px rgba(11, 36, 48, .5); }
.vt-talent-card.is-picked { border-color: var(--vt-teal); box-shadow: inset 0 0 0 1px var(--vt-teal), 0 24px 50px -44px rgba(11, 36, 48, .5); }
.vt-talent-top { display: flex; align-items: center; gap: 14px; }
.vt-talent-avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(140deg, var(--vt-frame), var(--vt-teal)); color: #fff; font: 300 18px/1 'Manrope', sans-serif; letter-spacing: .04em; box-shadow: 0 0 0 4px var(--vt-teal-soft); }
.vt-talent-id { flex: 1; min-width: 0; display: grid; gap: 4px; }
.vt-talent-id strong { font: 400 17px/1.2 'Manrope', sans-serif; color: var(--vt-ink); letter-spacing: .02em; }
.vt-talent-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--vt-muted); }
.vt-talent-facts li { display: inline-flex; align-items: center; gap: 5px; }
.vt-talent-facts .vt-icon { color: var(--vt-teal); flex: none; }
.vt-talent-best { flex: none; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--vt-coral-ink); color: #fff; font-size: 12.5px; }
.vt-talent-card h2 { margin: 0; font: 400 clamp(19px, 1.8vw, 22px)/1.3 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-talent-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vt-talent-badges li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--vt-line); font-size: 13px; color: var(--vt-text); }
.vt-talent-badges li.is-ok { border-color: rgba(19, 88, 104, .3); background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-talent-badges li.is-hot { border-color: rgba(201, 58, 32, .35); background: rgba(236, 92, 67, .07); color: var(--vt-coral-ink); }
.vt-talent-dl { display: grid; gap: 8px; margin: 0; }
.vt-talent-dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.vt-talent-dl dt { font: 500 11px/1.9 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-talent-dl dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--vt-text); overflow-wrap: anywhere; }
.vt-talent-card .vt-tags { margin: 0; }
.vt-talent-card .vt-tags li { background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-talent-exp { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--vt-soft); font-size: 14.5px; line-height: 1.6; color: var(--vt-text); }
.vt-talent-exp summary { cursor: pointer; list-style: none; }
.vt-talent-exp summary::-webkit-details-marker { display: none; }
.vt-talent-exp summary em { display: block; margin-top: 6px; font-style: normal; font-size: 13.5px; color: var(--vt-teal); text-decoration: underline; text-underline-offset: 3px; }
.vt-talent-exp[open] summary { display: none; }
.vt-talent-exp p { margin: 0; }
.vt-talent-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--vt-line); }
.vt-talent-foot form { margin: 0; }
.vt-talent-foot .vt-button { width: 100%; justify-content: center; gap: 8px; }
.vt-talent-picked { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; min-height: 46px; border-radius: 999px; background: var(--vt-teal); color: #fff; font-size: 14.5px; }
@media (max-width: 640px) {
  .vt-talent-count { margin-top: 0; }
  .vt-talent-dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Engagement (D-373): rate, pay and dates as three tiles, the stage track, the work report form, reports and payouts
   with a status tag each, the Job Acceptance as a document. */
.vt-eng-stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin: 18px 0 0; }
.vt-eng-stats > div { display: grid; gap: 4px; align-content: start; padding: 18px; border: 1px solid var(--vt-line); border-radius: 20px; background: #fff; min-width: 0; }
.vt-eng-stats > div.is-main { border: 0; background: linear-gradient(130deg, var(--vt-frame), var(--vt-teal)); color: rgba(255, 255, 255, .78); }
.vt-eng-stats small { font: 500 11px/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-coral-ink); }
.vt-eng-stats .is-main small { color: var(--vt-label-on-dark); }
.vt-eng-stats strong { font: 400 17px/1.3 'Manrope', sans-serif; color: var(--vt-ink); overflow-wrap: anywhere; }
.vt-eng-stats .is-main strong { font: 300 clamp(26px, 2.8vw, 32px)/1.1 'Manrope', sans-serif; color: #fff; }
.vt-eng-stats span { font-size: 13.5px; color: var(--vt-muted); }
.vt-eng-stats .is-main span { color: rgba(255, 255, 255, .7); }
.vt-eng-form { margin-bottom: var(--vt-gap); }
.vt-eng-form .vt-acct-card-head { margin-bottom: 6px; }
.vt-eng-form .vt-acct-card-head .vt-h2 { margin: 0; font: 400 clamp(20px, 2vw, 24px)/1.25 'Manrope', sans-serif; color: var(--vt-teal); }
.vt-eng-tag { flex: none; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--vt-line); font-size: 13px; white-space: nowrap; color: var(--vt-muted); }
.vt-eng-tag.is-ok { border-color: var(--vt-teal); background: var(--vt-teal); color: #fff; }
.vt-eng-tag.is-wait { border-style: dashed; border-color: var(--vt-teal); color: var(--vt-teal); }
.vt-eng-tag.is-no { border-color: rgba(201, 58, 32, .4); background: rgba(236, 92, 67, .07); color: var(--vt-coral-ink); }
@media (max-width: 760px) {
  .vt-eng-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vt-eng-stats > .is-main { grid-column: 1 / -1; }
  .vt-eng-stats > div { padding: 14px; }
  .vt-eng-stats strong { font-size: 15.5px; }
}

/* Job detail (D-374): four fact tiles, the work as a document, and the interest panel beside it. */
.vt-eng-stats.vt-jd-stats { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); margin-bottom: 22px; }
.vt-jd-locked { display: inline-flex; align-items: center; gap: 8px; font-size: 22px !important; }
.vt-jd-locked .vt-icon { color: #EC5C43; flex: none; }
.vt-jd-dl { margin-top: 4px; }
.vt-jd-tags { margin-top: 12px; }
.vt-jd-tags li { background: var(--vt-teal-soft); color: var(--vt-teal); }
.vt-jd-act .vt-button { width: 100%; justify-content: center; min-height: 50px; gap: 8px; }
.vt-jd-act .vt-hint { margin: 0; font-size: 14px; line-height: 1.55; }
.vt-doc-panel > .vt-jd-act:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .vt-eng-stats.vt-jd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vt-eng-stats.vt-jd-stats > .is-main { grid-column: 1 / -1; } }
@media (max-width: 560px) { .vt-eng-stats.vt-jd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vt-eng-stats.vt-jd-stats > div:last-child { grid-column: 1 / -1; } }
.vt-eng-stats.vt-jd-stats .is-main strong { font-size: clamp(20px, 2vw, 24px); }

/* Sign in, second pass (D-375): the email box with its icon, a quiet trust line under the button, a larger code box. */
.vt-sign-in { position: relative; display: block; }
.vt-sign-in .vt-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--vt-teal); pointer-events: none; }
.vt-sign-in input { padding-left: 46px; min-height: 52px; font-size: 16.5px; }
.vt-sign-card input::placeholder { color: #9AA6B5; }
.vt-sign-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--vt-muted); }
.vt-sign-trust li { display: inline-flex; align-items: center; gap: 6px; }
.vt-sign-trust .vt-icon { color: var(--vt-teal); flex: none; }
.vt-sign-card .vt-sign-code { min-height: 64px; font-size: 30px !important; letter-spacing: .5em; padding-left: .5em; border-radius: 16px; }
.vt-sign-card .vt-sign-code::placeholder { color: #C9D2DD; }
.vt-sign-card .vt-notice { margin: 16px 0 0; }

/* Legal pages (D-376): the side list of the three pages and of the parts, the text as a document, a way to ask. */
.vt-legal-layout { align-items: start; }
.vt-legal-page .vt-profile-nav { top: calc(var(--vt-header-h) + 24px); }
.vt-legal-docs { list-style: none; margin: 0 0 16px; padding: 0 0 14px; display: grid; gap: 2px; border-bottom: 1px solid var(--vt-line); }
.vt-legal-docs a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; color: var(--vt-text); font-size: 14.5px; text-decoration: none; }
.vt-legal-docs a .vt-icon { color: var(--vt-muted); flex: none; }
.vt-legal-docs a:hover { background: var(--vt-soft); }
.vt-legal-docs a[aria-current="page"] { background: var(--vt-teal); color: #fff; }
.vt-legal-docs a[aria-current="page"] .vt-icon { color: #fff; }
.vt-legal-nav ol a { font-size: 13.5px; line-height: 1.35; }
.vt-legal-main { min-width: 0; }
.vt-legal .vt-doc-body { max-width: 76ch; }
.vt-legal .vt-doc-body ul { margin: 0 0 14px; padding-left: 20px; }
.vt-legal .vt-doc-body li { margin: 0 0 8px; }
.vt-legal .vt-doc-body li::marker { color: var(--vt-coral); }
.vt-legal-toc { display: none; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--vt-line); border-radius: 18px; background: #fff; }
.vt-legal-ask { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--vt-line); border-radius: 20px; background: var(--vt-soft); }
.vt-legal-ask strong { font: 400 16px/1.35 'Manrope', sans-serif; color: var(--vt-ink); }
.vt-legal-ask p { margin: 2px 0 0; font-size: 14.5px; color: var(--vt-text); }
.vt-legal-ask a { color: var(--vt-teal); text-underline-offset: 3px; }
@media (max-width: 1024px) { .vt-legal-toc { display: block; } }

/* Division page (D-378): the last mint goes (D-263): light service cards and the "why" card take the brand light of
   the home cards; the service list marks the one you are reading and keeps the request in reach. */
.vt-svc-card:not(.is-dark), .vt-why-card:not(.is-dark) { background: linear-gradient(150deg, #FFFFFF 0%, #F4F8F9 60%, #E9F1F3 100%); box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .08), 0 24px 48px -40px rgba(11, 36, 48, .45); }
.vt-svc-card:not(.is-dark) .vt-chips li { box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .1); }
.vt-svc-card:not(.is-dark) .vt-chips .vt-icon { color: var(--vt-brand-green); }
.vt-svc-num { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(219, 67, 39, .35); }
.vt-svc-card.is-dark .vt-svc-num { border-color: rgba(236, 92, 67, .45); }
.vt-svc-nav ol { counter-reset: none; }
.vt-svc-nav a { position: relative; }
.vt-svc-nav a.is-now { background: #fff; box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .14), 0 10px 24px -20px rgba(11, 36, 48, .5); color: var(--vt-brand-green); }
.vt-svc-nav a.is-now::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--vt-coral); }
.vt-svc-nav-cta { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0 14px; padding: 10px 18px; border-radius: 999px; background: var(--vt-coral-ink); color: #fff !important; font-size: 14.5px; text-decoration: none; transition: background .2s; }
.vt-svc-nav-cta:hover { background: var(--vt-coral-dark); }
@media (max-width: 560px) { .vt-chips { gap: 6px; } .vt-chips li { font-size: 13.5px; padding: 6px 12px 6px 9px; } }

/* Home, second look (D-379): the hero picture element must not break the figure's fill. */
.vt-hx-pic picture { display: contents; }

/* D-405: owner-supplied final2 portraits, no image retouch. Apple Vision measures face heights 620.4396/1505
   (him) and 477.8857/1177 (her). Each face is 23.5% of its strip height, capped equally by the strip width.
   Eye centres are aligned at 27% of the strip height and anchored in the outer thirds, clear of the centre card.
   Scaling preserves each photo's aspect ratio. The fade starts below the faces, on the chest. */
.vt-hx-pic.is-person { background: radial-gradient(70% 32% at 50% 24%, rgba(236, 92, 67, .18), transparent 70%), radial-gradient(80% 45% at 50% 72%, rgba(27, 107, 125, .5), transparent 72%), linear-gradient(175deg, #1B6B7D 0%, #12505F 45%, #0E3A46 75%, #0A2D37 100%); }
.vt-hx-pic.is-person img { position: absolute; width: auto; max-width: none; object-fit: contain; animation: none; -webkit-mask-image: linear-gradient(to bottom, #000 75%, rgba(0, 0, 0, .55) 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 75%, rgba(0, 0, 0, .55) 88%, transparent 100%); }
.vt-hx-pic.is-person { container-type: inline-size; }
/* Wide screens make the strip taller but not wider, so the height is also capped by the width (cqw): the face stays clear of the card ring. */
.vt-hx-pic.is-him img { --vt-person-height: min(57.004%, 125.280cqw); height: 57.004%; height: var(--vt-person-height); top: calc(27% - var(--vt-person-height) * .374902); left: 33%; transform: translateX(-57.9853%); }
.vt-hx-pic.is-her img { --vt-person-height: min(57.879%, 127.203cqw); height: 57.879%; height: var(--vt-person-height); top: calc(27% - var(--vt-person-height) * .395351); left: 67%; transform: translateX(-50.7436%); }
@media (max-width: 700px) {
  .vt-hx-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-hx-stage .vt-hx-panel { grid-column: 1 / -1; }
  .vt-hx-pic-b.is-person { display: block; }
  .vt-hx-pic.is-person { height: 230px; }
  /* The portrait row is 230px tall; keep the seal above it, clear of both faces. */
  .vt-hx-stage .vt-hx-panel .vt-seal { top: calc(-230px - 14px - var(--seal) / 2 - 8px); }
  /* no card over the pictures on phones: faces 33% of the height, centred */
  .vt-hx-pic.is-him img { --vt-person-height: 80.048%; height: var(--vt-person-height); top: calc(35% - var(--vt-person-height) * .374902); left: 50%; }
  .vt-hx-pic.is-her img { --vt-person-height: 81.277%; height: var(--vt-person-height); top: calc(35% - var(--vt-person-height) * .395351); left: 50%; }
}


/* D-388, owner: on tablets and phones the quote card covered the person in the About picture. Below 1025px the quote
   now sits under the picture and only touches its lower edge (chair and desk), so the face and the work stay clear.
   The signature reads as pen ink: a soft graphite, not deep black. */
@media (max-width: 1024px) {
  .vt-about2-media { min-height: 0; display: flex; flex-direction: column; }
  .vt-about2-media img { position: relative; inset: auto; height: 520px; object-position: 50% 58%; }
  .vt-about2-quote { position: relative; left: auto; right: auto; bottom: auto; margin: -44px 24px 0 17%; }
}
@media (max-width: 700px) {
  .vt-about2-media img { height: 380px; }
  .vt-about2-quote { margin: -32px 14px 0; }
}
.vt-about2-sign img, .vt-signature img { filter: invert(36%) sepia(10%) saturate(140%) hue-rotate(170deg); opacity: .92; }
/* D-391: the group logos are links; the link box hugs the logo so the hover lift stays the same. */
.vt-marquee-row a { display: block; flex: none; line-height: 0; border-radius: 8px; }
.vt-marquee-row a:focus-visible { outline: 2px solid var(--vt-teal); outline-offset: 6px; }

/* D-395: with Humans in the menu the header holds seven links; between 1025px and 1180px the links sit a little
   closer and the Hire button never breaks onto two lines. */
.vt-header-cta { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1180px) {
  .vt-menu > li > a { padding: 10px 8px; }
}

/* D-396 (Codex audit F07): without scripts every tab panel shows; with them the panels behind a tab wait hidden */
.vt-js [data-js-hidden] { display: none !important; }

/* D-398: a long email on the sign-in pages breaks onto the next line instead of running out of the card */
.vt-sign-card strong { overflow-wrap: anywhere; }