/* ==========================================================
   velvettheory 2026 site system (Vigilante Marketing)
   Utility classes used by the 2026 rebuild. Applied via el_class.
   Breakpoints match Theme Options: laptops 1280, tablets 1024, mobiles 600.
   ========================================================== */

/* Eyebrow / kicker label: 11.2px ExtraBold, wide tracking */
.vt-eyebrow { font-size: 11.2px !important; line-height: 1.5 !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase; }
.vt-eyebrow .vt-n { font-weight: 400; letter-spacing: 0; margin-right: 3.5em; }

/* Small section/card number */
.vt-num { font-size: 11.2px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: 0 !important; }

/* Topline (hero) */
.vt-topline { font-size: 10.72px !important; line-height: 1.5 !important; letter-spacing: 0.14em !important; text-transform: uppercase; }

/* Lead paragraph 28.8 / 1.35 */
.vt-lead, .vt-lead p { font-size: 28.8px; line-height: 1.35; font-weight: 400; letter-spacing: 0; }
/* Large lead 43.2 / 1.1 (manifesto answer) */
.vt-lead-lg, .vt-lead-lg p { font-size: 43.2px; line-height: 1.1; font-weight: 400; }
/* Body sizes */
.vt-body-sm, .vt-body-sm p { font-size: 15.04px; line-height: 1.5; }
.vt-body-md, .vt-body-md p { font-size: 18.24px; line-height: 1.5; }

/* Display heading larger than h2 (manifesto / process) */
.vt-display { font-size: 124px !important; line-height: 0.88 !important; letter-spacing: -0.065em !important; font-weight: 300 !important; }

/* Text link with arrow, e.g. VIEW CASE STUDY -> */
.vt-arrow-link { font-size: 11.52px !important; line-height: 1.5 !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
.vt-arrow-link a { color: inherit; }
.vt-arrow-link a:hover { color: var(--color-pink); }

/* Hairline rules */
.vt-rule-top { border-top: 1px solid currentColor; }
.vt-rule-bottom { border-bottom: 1px solid currentColor; }
.vt-rules-faint .vt-rule-top, .vt-rules-faint .vt-rule-bottom { border-color: rgba(40,21,44,0.5); }
.color_alternate .vt-rule-top, .color_alternate .vt-rule-bottom { border-color: rgba(255,255,255,0.45); }

/* Card columns divided by vertical hairlines (Our Sweet Spot) */
.vt-divided > .vc_column-inner, .vt-divided-wrap .wpb_column + .wpb_column > .vc_column-inner { }
.vt-divided-wrap .g-cols > .wpb_column:not(:first-child) { border-left: 1px solid rgba(40,21,44,0.6); }

/* Circular CTA (hero "See the work") */
.vt-circle-cta { display: inline-flex; flex-direction: column; justify-content: space-between; width: 132px; height: 132px; padding: 20px; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; color: #fff !important; text-decoration: none; transition: background-color .3s, color .3s, border-color .3s; }
.vt-circle-cta .vt-cc-label { font-size: 10.4px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.2; }
.vt-circle-cta .vt-cc-arrow { font-size: 32px; line-height: 1; align-self: flex-end; }
.vt-circle-cta:hover { background-color: #fff; color: var(--color-plum) !important; border-color: #fff; }

/* Outcome ribbon: single line on desktop, wraps on smaller */
.vt-ribbon { font-size: 12.48px !important; line-height: 1.4 !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase; }
.vt-ribbon .vt-star { margin: 0 1.4em; }

/* Project visual: offset colour block behind a grey placeholder image */
.vt-project-visual { position: relative; overflow: hidden; aspect-ratio: 736 / 390; }
.vt-project-visual .w-image { position: absolute !important; left: 0; top: 0; width: 76.1%; margin: 0 !important; }
.vt-project-visual .w-image img { aspect-ratio: 560 / 315; object-fit: cover; width: 100%; }
.vt-project-visual .vt-pv-caption { position: absolute; left: 20px; top: 65.4%; color: #fff; z-index: 2; }

.vt-pv-caption .vt-pv-kicker { display: block; font-size: 10.56px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 4px; }
.vt-pv-caption .vt-pv-title { display: block; font-size: 20px; line-height: 1.2; }

/* Project meta (client / services) */
.vt-project-meta { font-size: 10.88px !important; line-height: 1.35 !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase; }

/* Panel list with hairlines (Every engagement brings) */
.vt-panel-list ul { list-style: none; margin: 0; padding: 0; }
.vt-panel-list li { font-size: 18.24px; line-height: 1.5; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--color-plum); }
.vt-panel-list li:last-child { border-bottom: 0; }

/* FAQ accordion to match Figma */
.vt-faq .w-tabs-section { border-bottom: 1px solid var(--color-plum) !important; border-top: 0 !important; }
.vt-faq .w-tabs-section-header { padding: 24px 0 !important; }
.vt-faq .w-tabs-section-title { font-size: 17.92px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: #000; }
.vt-faq .w-tabs-section-control { color: var(--color-pink) !important; }
.vt-faq .w-tabs-section-content-h { padding: 0 0 24px !important; font-size: 16px; line-height: 1.5; max-width: 650px; color: #000; }

/* Footer small text */
.vt-footer-text, .vt-footer-text p { font-size: 13.76px; line-height: 1.5; color: #000; }
.vt-footer-text a { color: #000; }
.vt-footer-text a:hover { color: var(--color-pink); }
.vt-copyright { font-size: 10.4px !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: #000; }

/* Responsive steps */
@media (max-width: 1280px) {
	.vt-display { font-size: 104px !important; }
	.vt-lead-lg, .vt-lead-lg p { font-size: 36px; }
}
@media (max-width: 1024px) {
	.vt-display { font-size: 80px !important; }
	.vt-lead, .vt-lead p { font-size: 24px; }
	.vt-lead-lg, .vt-lead-lg p { font-size: 30px; }
	.vt-divided-wrap .g-cols > .wpb_column:not(:first-child) { border-left: 0; }
}
@media (max-width: 600px) {
	.vt-display { font-size: 56px !important; line-height: 0.9 !important; }
	.vt-lead, .vt-lead p { font-size: 19.2px; line-height: 1.3; }
	.vt-lead-lg, .vt-lead-lg p { font-size: 24px; line-height: 1.2; }
	.vt-circle-cta { width: 104px; height: 104px; padding: 14px; }
	.vt-circle-cta .vt-cc-label { font-size: 9.5px; }
	.vt-circle-cta .vt-cc-arrow { font-size: 28px; }
	.vt-ribbon .vt-star { margin: 0 0.6em; }
}

/* Inline-tag hooks (us_text only allows simple tags, no class attributes) */
.vt-pink-i i { font-style: normal; color: var(--color-pink); }
.vt-eyebrow small { font-size: inherit; font-weight: 400; letter-spacing: 0; margin-right: 3.6em; }
.vt-ribbon small { font-size: inherit; margin: 0 1.4em; }
@media (max-width: 600px) { .vt-ribbon small { margin: 0 0.6em; } .vt-eyebrow small { margin-right: 2.4em; } }

/* Divided card grid (works whether the class lands on .g-cols or a wrapper) */
.vt-divided-wrap > .wpb_column:not(:first-child),
.vt-divided-wrap .g-cols > .wpb_column:not(:first-child) { border-left: 1px solid rgba(40,21,44,0.5); }
@media (max-width: 1024px) {
	.vt-divided-wrap > .wpb_column:not(:first-child),
	.vt-divided-wrap .g-cols > .wpb_column:not(:first-child) { border-left: 0; }
	.vt-divided-wrap > .wpb_column:nth-child(n+2),
	.vt-divided-wrap .g-cols > .wpb_column:nth-child(n+2) { border-top: 1px solid rgba(40,21,44,0.5); }
}
@media (min-width: 601px) and (max-width: 1024px) {
	.vt-divided-wrap > .wpb_column:nth-child(2), .vt-divided-wrap .g-cols > .wpb_column:nth-child(2) { border-top: 0; }
}

/* Flush inner rows: cancel the gutter offset so backgrounds align to the content edge */
.l-main .g-cols.vt-flush { margin-left: 0 !important; margin-right: 0 !important; }
.vt-project-visual { position: relative; padding: 0 !important; }
.vt-project-visual > .vc_column-inner { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; padding: 0 !important; }

/* Header menu spacing (Figma gap 28.8px) */
@media (min-width: 1025px) {
	.l-header .w-nav.type_desktop .w-nav-anchor.level_1 { padding-left: 14.4px !important; padding-right: 14.4px !important; }
	.l-header .w-nav.type_desktop .w-nav-list.level_1 > li:last-child > .w-nav-anchor { padding-right: 0 !important; }
}
.vt-faq .w-tabs-section-content-h { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 600px) {
	.vt-pv-caption .vt-pv-title { font-size: 15px; }
	.vt-project-visual .vt-pv-caption { left: 14px; right: 30%; top: auto; bottom: 26%; }
}

/* Case study template */
.vt-lead-28, .vt-lead-28 p { font-size: 28px; line-height: 1.4; }
.vt-case-num { font-size: 100px !important; line-height: 0.8 !important; font-weight: 300 !important; letter-spacing: -0.06em !important; color: var(--color-pink); text-align: right; }
.vt-role-list, .vt-role-list p { font-size: 34px; line-height: 1.3; }
.vt-next-case { transition: background-color .3s; }
.vt-next-case:hover .w-text { color: #fff; }
.vt-case-gallery .w-grid-item-h { background: #b9b9b9; }
@media (max-width: 1024px) {
	.vt-case-num { text-align: left; font-size: 72px !important; margin-top: 24px; }
	.vt-lead-28, .vt-lead-28 p { font-size: 22px; }
	.vt-role-list, .vt-role-list p { font-size: 26px; }
	.vt-case-num, .vt-eyebrow { }
}
@media (max-width: 600px) {
	.vt-case-num { font-size: 56px !important; }
	.vt-lead-28, .vt-lead-28 p { font-size: 19.2px; line-height: 1.4; }
	.vt-role-list, .vt-role-list p { font-size: 20px; }
}

/* Humans / Careers */
.vt-body-23, .vt-body-23 p { font-size: 23px; line-height: 1.5; }
.vt-body-24, .vt-body-24 p { font-size: 24px; line-height: 1.5; }
.vt-body-24 a { text-decoration: underline; text-underline-offset: 3px; }
.vt-label-sm { font-size: 11.2px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
@media (max-width: 1024px) {
	.vt-body-23, .vt-body-23 p, .vt-body-24, .vt-body-24 p { font-size: 20px; }
}
@media (max-width: 600px) {
	.vt-body-23, .vt-body-23 p, .vt-body-24, .vt-body-24 p { font-size: 18px; }
}

/* Flush inner rows whose columns should align with a hairline */
.g-cols.vt-flush-pad > .vc_column_container:first-child > .vc_column-inner { padding-left: 0; }
.g-cols.vt-flush-pad > .vc_column_container:last-child > .vc_column-inner { padding-right: 0; }
@media (max-width: 1024px) {
  .g-cols.via_flex.vt-flush-pad > .wpb_column.vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }
}

/* Case Study page template: accent bar under the hero image (ACF "Accent colour") */
.vt-accent-bar { background-color: var(--color-pink); }
.vt-accent-violet .vt-accent-bar { background-color: var(--color-violet); }
.vt-accent-citron .vt-accent-bar { background-color: var(--color-citron); }
.vt-accent-sand .vt-accent-bar { background-color: var(--color-sand); }
.vt-accent-plum .vt-accent-bar { background-color: var(--color-plum); }
.vt-cf-text p:last-child { margin-bottom: 0; }
.vt-accent-bar .w-image, .vt-accent-bar .w-image-h { display: block; width: 100%; }
.vt-accent-bar .w-image img { width: 100%; height: 100%; object-fit: cover; }

/* Case study listings (Post List + Grid Layout "VT Case Study Row") */
.vt-case-list .w-grid-item-h { background: none; overflow: visible; }
.vt-case-card { display: flex !important; align-items: center; gap: 0 !important; }
.vt-pv-box { position: relative; flex: 0 0 60%; aspect-ratio: 736 / 390; overflow: hidden; background-color: var(--color-pink); }
.vt-tile-violet .vt-pv-box { background-color: var(--color-violet); }
.vt-tile-citron .vt-pv-box { background-color: var(--color-citron); }
.vt-tile-sand .vt-pv-box { background-color: var(--color-sand); }
.vt-tile-plum .vt-pv-box { background-color: var(--color-plum); }
.vt-pv-box .vt-pv-img { position: absolute !important; left: 0; top: 0; width: 76.1%; margin: 0 !important; }
.vt-pv-box .vt-pv-img img { display: block; width: 100%; aspect-ratio: 560 / 315; object-fit: cover; }
.vt-pv-box .vt-pv-caption { position: absolute; left: 20px; top: 65.4%; right: 20px; z-index: 2; color: #fff; font-size: 20px; line-height: 1.2; }
/* Captions are always white: the tiles carry a dark overlay for legibility (Oct 2026) */
.vt-pv-caption .w-post-elm-before { display: block; font-size: 10.56px; line-height: 1.5; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 4px; }
.vt-pv-copy { flex: 1 1 auto; min-width: 0; padding-left: 72px; }
.vt-case-list .w-grid-item:nth-child(even) .vt-case-card { flex-direction: row-reverse; }
.vt-case-list .w-grid-item:nth-child(even) .vt-pv-copy { padding-left: 0; padding-right: 72px; }
.vt-pv-headline { line-height: 0.94 !important; letter-spacing: -0.05em !important; margin: 0 !important; }
.vt-pv-headline a { color: inherit; }
.vt-case-list--work .w-grid-item { padding: 40px 0 !important; border-top: 1px solid rgba(40,21,44,0.24); }
.vt-case-list--work .vt-pv-caption { display: none; }
.vt-case-list--home .vt-pv-copy, .vt-case-list--home .vt-pv-copy a { color: #fff; }
.vt-case-list--home .w-grid-item { padding: 80px 0 0 !important; }
.vt-case-list--home .w-grid-item:first-child { padding-top: 40px !important; }
@media (max-width: 1280px) {
  .vt-pv-copy { padding-left: 48px; }
  .vt-case-list .w-grid-item:nth-child(even) .vt-pv-copy { padding-right: 48px; }
}
@media (max-width: 1024px) {
  .vt-case-card, .vt-case-list .w-grid-item:nth-child(even) .vt-case-card { flex-direction: column !important; align-items: stretch; }
  .vt-pv-box { flex: none; width: 100%; }
  .vt-pv-copy, .vt-case-list .w-grid-item:nth-child(even) .vt-pv-copy { padding: 28px 0 0 0; }
  .vt-pv-box .vt-pv-caption { font-size: 15px; left: 14px; right: 30%; top: auto; bottom: 26%; }
}
@media (max-width: 600px) {
  .vt-case-list--work .w-grid-item { padding: 28px 0 !important; }
  .vt-case-list--home .w-grid-item { padding: 48px 0 0 !important; }
  .vt-case-list--home .w-grid-item:first-child { padding-top: 24px !important; }
}

/* Case study video: hero */
.vt-hero-video-wrap, .vt-hero-video-wrap > .wpb_wrapper > p { margin: 0 !important; }
.vt-hero-video { position: relative; width: 100%; aspect-ratio: 1440 / 566; overflow: hidden; background: var(--color-plum); }
.vt-hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Case study video: gallery tiles + popup */
.w-gallery-item-img video.vt-gallery-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-plum); }
.vt-is-video .w-gallery-item-img { position: relative; }
.vt-is-video .w-gallery-item-img::after { content: ''; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; pointer-events: none;
  background: rgba(40,21,44,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% 50% / 30px no-repeat; transition: transform .2s ease; }
.vt-is-video:hover .w-gallery-item-img::after { transform: scale(1.08); }
.vt-video-popup { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }
.vt-video-popup.mfp-hide { display: none !important; }
.vt-video-popup video { display: block; width: 100%; height: auto; max-height: 85vh; background: #000; }
.vt-video-popup .mfp-close { top: -44px; right: 0; color: #fff; width: auto; }
@media (max-width: 600px) { .vt-is-video .w-gallery-item-img::after { width: 52px; height: 52px; margin: -26px 0 0 -26px; background-size: 22px; } }