/*
 * VUG Social theme styles.
 *
 * Tokens (colours, fonts, sizes) come from theme.json as --wp--preset--* variables.
 * Everything below is layout that blocks cannot express: the header bar with the
 * overhanging logo, the homepage art (hands, sticker cloud, marquees) and the blog
 * card layout inherited from the old Avada site.
 *
 * --u is the homepage design unit: 1px on screens 1440px and wider, and shrinks
 * proportionally below that, so the compositions keep their geometry on every width.
 */

:root {
	/* The whole homepage composition is drawn in this unit, so one number sets
	   its size. The Avada original (1.0) was oversized; 0.8 was still too loud
	   next to the rest of the site, so the founder asked for it smaller again.
	   Still shrinks proportionally on narrower screens; phones override it. */
	--u: min(0.65px, calc(100vw / 1800));
	--vs-sky: var(--wp--preset--color--sky);
	--vs-yellow: var(--wp--preset--color--yellow);
	--vs-yellow-deep: var(--wp--preset--color--yellow-deep);
	--vs-blue: var(--wp--preset--color--blue);
	--vs-coral: var(--wp--preset--color--coral);
	--vs-bar-shadow: var(--wp--preset--shadow--bar);
	--vs-pill-shadow: var(--wp--preset--shadow--pill);
	--vs-content: 1200px;
	--vs-mobile-bar: 71px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: clip; margin: 0; }
.vs-main > .wp-block-post-content,
.vs-blog,
.vs-single__body { padding-left: 30px; padding-right: 30px; }
.vs-page .wp-block-post-content > .alignfull { margin-left: -30px !important; margin-right: -30px !important; max-width: none; }
.vs-home > .wp-block-post-content { padding-left: 0; padding-right: 0; }

/* WordPress adds padding to any group with a background and a gap between
   siblings; our sections manage their own spacing. */
.wp-block-group.has-background { padding: 0; }
.wp-site-blocks > *,
.vs-home .wp-block-post-content > *,
.vs-home-header > *,
.vs-cloud > *,
.vs-feel > *,
.vs-embrace > *,
.vs-vision > *,
.vs-demo > *,
.vs-hero > *,
.vs-footer > *,
.vs-header > *,
.vs-title-band > * { margin-block-start: 0; margin-block-end: 0; }
/* <main> is a flow layout, so WordPress hands every one of its sections a
   block-gap margin on top of the padding they already carry. */
.vs-main > * { margin-block-start: 0; margin-block-end: 0; }
img, video { max-width: 100%; height: auto; }
figure { margin: 0; }
a { transition: color .2s ease, background-color .2s ease, opacity .2s ease; }
strong, b { font-weight: 700; }

/* Keep block gap sane inside prose. */
.vs-main .wp-block-paragraph + .wp-block-paragraph,
.vs-main p + p { margin-top: 1.2em; }

/* ------------------------------------------------------------------ */
/* Heading style: thin rule on each side (Avada "double solid")        */
/* ------------------------------------------------------------------ */
.wp-block-heading.is-style-lines {
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.wp-block-heading.is-style-lines::before,
.wp-block-heading.is-style-lines::after {
	content: "";
	flex: 1 1 0;
	height: 3px;
	border-top: 1px solid #e0dede;
	border-bottom: 1px solid #e0dede;
}
.wp-block-heading.is-style-lines.has-text-align-left::before { display: none; }

/* Sticky image (About Us photo) */
.wp-block-image.is-style-sticky { position: sticky; top: 24px; }

/* Pill button */
.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: 25px;
	background: var(--vs-yellow);
	box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.wp-block-button.is-style-pill .wp-block-button__link:hover { background: var(--vs-yellow-deep); }

/* ------------------------------------------------------------------ */
/* Global header (yellow bar)                                          */
/* ------------------------------------------------------------------ */
.wp-block-group.vs-header {
	position: relative;
	z-index: 20;
	box-shadow: var(--vs-bar-shadow);
	padding: 0 30px;
}
.vs-header__bar {
	position: relative;
	height: 80px;
	max-width: var(--vs-content);
}
.vs-logo {
	position: absolute;
	left: 32px;
	top: 9px;
	z-index: 30;
	display: block;
	width: 150px;
	line-height: 0;
	transition: transform .25s ease;
}
.vs-logo:hover { transform: scale(1.04); }
.vs-logo img { width: 100%; height: auto; display: block; }

.vs-header .wp-block-group.vs-header__bar { justify-content: flex-end; }
.vs-header .vs-header__dl { display: none; }
.vs-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
	padding: 6px 0;
}
.vs-nav .wp-block-navigation-item__content:hover,
.vs-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--vs-coral); }
.vs-nav .vs-nav__mobile-only { display: none; }

/* Mobile overlay (core navigation) */
.vs-nav .wp-block-navigation__responsive-container-open,
.vs-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
	padding: 6px;
}
.vs-nav .wp-block-navigation__responsive-container-open svg,
.vs-nav .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
.vs-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 88px 32px 40px;
}
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 6px;
	align-items: flex-start;
}
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--baloo);
	font-size: 28px;
	padding: 8px 0;
}
.vs-nav .wp-block-navigation__responsive-container.is-menu-open .vs-nav__mobile-only { display: block; }

/* ------------------------------------------------------------------ */
/* Home header (sky band with the pill)                                */
/* ------------------------------------------------------------------ */
.vs-home-header { position: relative; z-index: 20; }
.vs-home-header__desktop { position: relative; height: 104px; padding: 0 30px; }
.vs-home-header__desktop > * { margin: 0; }
.vs-home-header__mobile { display: none; }

.vs-pill {
	position: absolute;
	left: 50%;
	top: 56px;
	transform: translateX(-50%);
	z-index: 10;
	display: grid;
	grid-template-columns: 140px 124px 140px;
	grid-template-rows: 48px;
	width: 404px;
	height: 48px;
	margin: 0;
	border-radius: 25px;
	background: var(--vs-yellow-deep);
	box-shadow: var(--vs-pill-shadow);
}
.vs-pill__link {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}
.vs-pill__link--left { grid-column: 1; padding-left: 24px; border-radius: 25px 0 0 25px; }
.vs-pill__link--right { grid-column: 3; padding-right: 24px; border-radius: 0 25px 25px 0; }
.vs-pill__link:hover { color: var(--vs-sky); }
.vs-pill__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: block;
	width: 112px;
	margin: 0;
	line-height: 0;
	animation: vs-pulse 2.5s ease-in-out infinite;
}
.vs-pill__logo img { width: 100%; height: auto; display: block; }

.vs-dl-pill {
	position: absolute;
	right: 48px;
	/* Centred on the nav pill's midline (its 56px top + half of its 48px height)
	   rather than given a top of its own, so the two read as one row whatever
	   this button's text and padding add up to. The Avada site had it sitting
	   ~15px high; that was not deliberate. `translate` composes with the hover
	   `transform`, so the lift still works. */
	top: 80px;
	translate: 0 -50%;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-radius: 25px;
	background: var(--vs-yellow-deep);
	color: #fff;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .2s ease, box-shadow .2s ease;
}
.vs-dl-pill:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .35); }
.vs-dl-pill__icon { flex: none; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.wp-block-group.vs-footer { padding: 0 30px; }
.vs-footer__row {
	position: relative;
	height: 112px;
	padding: 0 31px 18px;
	max-width: var(--vs-content);
}
.vs-footer__vuggie {
	position: absolute;
	left: 288px;
	top: 16px;
	width: 88px;
	height: auto;
}
.vs-social.wp-block-social-links { gap: 20px; margin: 0; }
.vs-social .wp-social-link { margin: 0; }
.vs-social .wp-social-link a { padding: 0; }
.vs-social .wp-social-link svg { width: 22px; height: 22px; }
.vs-social .wp-social-link-facebook { color: #3b5998 !important; }
.vs-social .wp-social-link-instagram { color: #c13584 !important; }
.vs-social .wp-social-link-tiktok { color: #010101 !important; }
.vs-social .wp-social-link-linkedin { color: #0077b5 !important; }
.vs-social .wp-social-link a:hover { transform: scale(1.15); }

.vs-footer-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 13.3px;
	line-height: 1.2;
	color: #fff;
}
.vs-footer-nav .wp-block-navigation-item__content:hover,
.vs-footer-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--vs-yellow); }

.wp-block-group.vs-copyright { padding: 12px 30px; }
.vs-copyright__text {
	font-family: var(--wp--preset--font-family--baloo);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.72;
	color: #d9d9d9;
	margin: 0;
}
.vs-copyright__text a { color: #fff; }
.vs-copyright__text a:hover { color: var(--vs-yellow); }

/* ------------------------------------------------------------------ */
/* Inner pages: ONE system                                             */
/* ------------------------------------------------------------------ */
/* Every content page (About, FAQ, Terms, Careers, Press, Investors, blog...)
   uses the same pieces: a soft hero band with the title, an 820px reading
   column, white cards with a 20px radius, one pill button. Change these
   tokens, not the pages. */
:root {
	--vs-prose-size: var(--wp--preset--font-size--body);   /* 16-18px */
	--vs-prose-lh: 1.7;
	--vs-h1: var(--wp--preset--font-size--xxx-large);      /* 30-40px */
	--vs-h2: var(--wp--preset--font-size--xx-large);       /* 26-32px */
	--vs-h3: var(--wp--preset--font-size--x-large);        /* 20-23px */
	--vs-radius: 20px;
	--vs-card-shadow: 0 1px 2px rgba(20, 60, 90, .05), 0 14px 40px rgba(20, 60, 90, .10);
	--vs-line: rgba(20, 60, 90, .10);
	--vs-muted: #5b6b78;
	--vs-tint: #eefaff;
	--vs-hero-bg: linear-gradient(180deg, #d4f3ff 0%, #ecf9ff 70%, #ffffff 100%);
	--vs-section-y: clamp(40px, 5vw, 72px);
}

/* Hero band under the yellow bar */
.wp-block-group.vs-title-band {
	position: relative;
	background: var(--vs-hero-bg);
	padding: clamp(44px, 5.5vw, 80px) 30px clamp(26px, 2.6vw, 38px);
	margin-top: 0;
	text-align: center;
	overflow: hidden;
}
.wp-block-group.vs-title-band::before,
.wp-block-group.vs-title-band::after {
	/* two soft blobs, brand yellow + sky */
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: .55;
	pointer-events: none;
}
.wp-block-group.vs-title-band::before { width: 340px; height: 340px; left: -120px; top: -160px; background: #ffe6a6; }
.wp-block-group.vs-title-band::after { width: 420px; height: 420px; right: -160px; top: -200px; background: #a8eaff; }
.vs-title-band > * { position: relative; z-index: 1; }
.vs-title-band__title {
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0;
	color: #10202a;
}
.vs-title-band__sub,
.vs-single__date { margin: 12px 0 0; color: var(--vs-muted); font-size: 16px; }
.vs-single__date { font-size: 14px; }
.vs-title-band .vs-breadcrumbs { margin-bottom: 14px; justify-content: center; display: flex; }
/* The band already pads below the title and its gradient ends white, so a full
   --vs-section-y on top of the body just reads as a hole under the heading. */
.vs-main > .vs-title-band + .wp-block-post-content,
.vs-main > .vs-title-band + .vs-single__body,
.vs-main > .vs-title-band + .vs-blog,
.vs-main > .vs-title-band + .vs-404__body { padding-top: clamp(22px, 2.2vw, 32px); }

/* Reading column */
.vs-page .wp-block-post-content,
.vs-single__body .wp-block-post-content {
	font-size: var(--vs-prose-size);
	line-height: var(--vs-prose-lh);
	color: #1f2a33;
}
.vs-page .wp-block-post-content { padding-top: var(--vs-section-y); padding-bottom: var(--vs-section-y); }
.vs-page .wp-block-post-content > * + * { margin-top: 1.1em; }
.vs-page .wp-block-post-content p,
.vs-single__body .wp-block-post-content p { font-size: inherit !important; font-family: inherit !important; }
.vs-page .wp-block-post-content h2, .vs-single__body .wp-block-post-content h2 { font-size: var(--vs-h2); margin-top: 1.6em; letter-spacing: -.01em; }
.vs-page .wp-block-post-content h3, .vs-single__body .wp-block-post-content h3 { font-size: var(--vs-h3); margin-top: 1.5em; }
.vs-page .wp-block-post-content h2 + p, .vs-page .wp-block-post-content h3 + p,
.vs-single__body .wp-block-post-content h2 + p, .vs-single__body .wp-block-post-content h3 + p { margin-top: .5em; }
.vs-page .wp-block-post-content ul, .vs-page .wp-block-post-content ol,
.vs-single__body .wp-block-post-content ul, .vs-single__body .wp-block-post-content ol { padding-left: 1.3em; }
.vs-page .wp-block-post-content li + li, .vs-single__body .wp-block-post-content li + li { margin-top: .35em; }
.vs-page .wp-block-post-content a:not(.wp-block-button__link),
.vs-single__body .wp-block-post-content a:not(.wp-block-button__link) { color: #d98900; text-decoration: underline; text-decoration-color: rgba(217, 137, 0, .35); text-underline-offset: 3px; }
.vs-page .wp-block-post-content a:not(.wp-block-button__link):hover,
.vs-single__body .wp-block-post-content a:not(.wp-block-button__link):hover { color: #b06f00; text-decoration-color: currentColor; }
.vs-page .wp-block-post-content img { border-radius: var(--vs-radius); }
.vs-lead { font-size: 1.1em !important; color: var(--vs-muted); max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.vs-doc-title { margin-top: 2.2em !important; padding-top: 1.2em; border-top: 1px solid var(--vs-line); }
.vs-doc-title:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }

/* Cards */
.wp-block-group.vs-card {
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	box-shadow: var(--vs-card-shadow);
	padding: clamp(28px, 3.5vw, 48px);
}
.wp-block-group.vs-card > * + * { margin-top: 18px; }
.wp-block-group.vs-card--tint { background: var(--vs-tint); border-color: transparent; box-shadow: none; }
.wp-block-group.vs-card--cta { text-align: center; }
.vs-card__mascot { width: 96px; margin: 0 auto 6px !important; }
.vs-card__mascot img { width: 96px; height: auto; border-radius: 0 !important; }
.vs-card .wp-block-buttons { margin-top: 26px; }

/* Buttons (pill) */
.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: 999px;
	padding: 14px 30px;
	font-size: 16px;
	background: var(--vs-yellow);
	color: #10202a;
	box-shadow: 0 8px 20px rgba(255, 195, 56, .35);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wp-block-button.is-style-pill .wp-block-button__link:hover { background: var(--vs-yellow-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 195, 56, .45); color: #10202a; }
.vs-header .is-style-pill .wp-block-button__link { color: #fff; }

/* FAQ accordion */
.wp-block-details.vs-faq {
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: 16px;
	padding: 0;
	margin-top: 12px !important;
	transition: box-shadow .2s ease;
}
.wp-block-details.vs-faq:hover, .wp-block-details.vs-faq[open] { box-shadow: var(--vs-card-shadow); }
.vs-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 56px 18px 22px;
	font-family: var(--wp--preset--font-family--baloo);
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.35;
	position: relative;
}
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	border-radius: 50%;
	background: var(--vs-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 1v10M1 6h10' stroke='%2310202a' stroke-width='2' stroke-linecap='round'/></svg>") center / 12px no-repeat;
	transition: transform .25s ease;
}
.vs-faq[open] summary::after { transform: rotate(45deg); }
.vs-faq > p { padding: 0 22px 20px; margin: 0 !important; color: #34434e; }

/* Careers openings */
.vs-openings { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 10px; }
.vs-openings li {
	margin: 0 !important;
	padding: 16px 20px 16px 52px;
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: 14px;
	position: relative;
	font-weight: 500;
}
.vs-openings li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	background: var(--vs-yellow) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%2310202a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
}

/* About */
.vs-about__photo img { border-radius: var(--vs-radius); box-shadow: var(--vs-card-shadow); }
.wp-block-image.is-style-sticky { position: sticky; top: 100px; }
.wp-block-group.vs-founders {
	margin-top: var(--vs-section-y) !important;
	margin-bottom: calc(-1 * var(--vs-section-y)) !important;
	padding: var(--vs-section-y) 30px;
	background: var(--vs-hero-bg);
}
.vs-founders__title { margin: 0 !important; }
.vs-founders .vs-lead { margin-top: 10px !important; }
.vs-founders__cols { margin-top: 40px !important; }
.wp-block-column.vs-founder {
	background: #fff;
	border-radius: var(--vs-radius);
	border: 1px solid var(--vs-line);
	box-shadow: var(--vs-card-shadow);
	padding: 36px 32px 34px;
	text-align: center;
}
.vs-founder__photo { width: 120px; margin: 0 auto 18px !important; }
.vs-founder__photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 50% !important; box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--vs-yellow); }
.vs-founder__name { margin: 0 !important; font-size: var(--vs-h3); }
.vs-founder__role { display: inline-block; margin: 8px 0 14px !important; padding: 4px 12px; border-radius: 999px; background: var(--vs-tint); color: #1f6a86; font-size: 13px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vs-founder__bio { color: #34434e; font-size: 16px !important; margin: 0 !important; }

/* Blog list */
.vs-blog { padding: var(--vs-section-y) 30px; }
.vs-blog__list { margin-top: 0; display: grid; gap: 20px; }
.vs-post-card {
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	padding: 28px 32px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.vs-post-card:hover { transform: translateY(-3px); box-shadow: var(--vs-card-shadow); }
.vs-post-card__title { margin: 0 0 10px; font-size: var(--vs-h3); line-height: 1.3; }
.vs-post-card__title a { color: #10202a; text-decoration: none; }
.vs-post-card__title a:hover { color: #d98900; }
.vs-post-card__excerpt { margin: 0 0 18px; color: #34434e; font-size: 16px; }
.vs-post-card__excerpt p { margin: 0; }
.vs-post-card__meta { font-size: 13px; line-height: 1.4; color: var(--vs-muted); }
.vs-read-more { color: #d98900; font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.vs-read-more::after { content: "\2192"; transition: transform .2s ease; }
.vs-read-more:hover::after { transform: translateX(3px); }
.vs-pagination { margin-top: 24px; font-size: 14px; }
.vs-pagination a, .vs-pagination .page-numbers { color: #333; padding: 6px 12px; border-radius: 999px; }
.vs-pagination a:hover { background: var(--vs-tint); }
.vs-pagination .current { background: var(--vs-yellow); color: #10202a; }
.vs-no-results { text-align: center; color: var(--vs-muted); }

/* Single post */
.vs-single__body { padding-top: var(--vs-section-y); padding-bottom: var(--vs-section-y); }
.vs-single__body .wp-block-post-content > * + * { margin-top: 1.1em; }
.vs-single__body .wp-block-post-content img { height: auto; border-radius: 12px; }
.vs-share {
	margin-top: 48px;
	background: var(--vs-tint);
	border-radius: var(--vs-radius);
	padding: 22px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.vs-share__title { font-family: var(--wp--preset--font-family--baloo); font-weight: 700; font-size: 16px; color: #10202a; margin: 0; }
.vs-share__links { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.vs-share__links a { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #34434e; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, background-color .2s ease; }
.vs-share__links a:hover { background: var(--vs-yellow); color: #10202a; transform: translateY(-2px); }
.vs-share__links svg { width: 16px; height: 16px; fill: currentColor; }

.vs-breadcrumbs { font-size: 13px; color: var(--vs-muted); font-family: var(--wp--preset--font-family--inter); line-height: 1.4; }
.vs-breadcrumbs a { color: var(--vs-muted); }
.vs-breadcrumbs a:hover { color: #d98900; }
.vs-breadcrumbs__sep { margin: 0 6px; }

/* Search form */
.vs-search .wp-block-search__inside-wrapper { border: 1px solid var(--vs-line); border-radius: 999px; padding: 0 8px 0 14px; background: #fff; box-shadow: var(--vs-card-shadow); }
.vs-search .wp-block-search__input { border: 0; height: 48px; font-size: 16px; font-family: var(--wp--preset--font-family--inter); padding: 0 8px; background: transparent; }
.vs-search .wp-block-search__input:focus { outline: none; }
.vs-search .wp-block-search__button { background: transparent; color: #7a8791; padding: 0 8px; border: 0; }
.vs-title-band .vs-search { width: min(100%, 520px); margin: 20px auto 0; }

/* 404 */
.vs-404__code { font-family: var(--wp--preset--font-family--baloo); font-weight: 800; font-size: clamp(64px, 8vw, 110px); line-height: 1; color: var(--vs-yellow); margin: 0 0 6px !important; letter-spacing: -.03em; }
.vs-404__body { padding: var(--vs-section-y) 30px; }
.vs-404 h3 { font-size: var(--vs-h3); margin: 0 0 16px; }
.vs-404__links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 16px; }
.vs-404__links a { color: #1f2a33; text-decoration: none; }
.vs-404__links a:hover { color: #d98900; }

/* ------------------------------------------------------------------ */
/* Homepage                                                            */
/* ------------------------------------------------------------------ */
.vs-home .wp-block-post-content > * { max-width: none; margin-left: 0; margin-right: 0; }
.vs-display {
	font-family: var(--wp--preset--font-family--anton);
	font-weight: 400;
	font-size: calc(126 * var(--u));
	line-height: 1;
	color: #fff;
	margin: 0;
	letter-spacing: 0;
}

/* Floating things */
.vs-float { animation: vs-float 4s ease-in-out infinite; }
@keyframes vs-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 calc(-10 * var(--u)); }
}
@keyframes vs-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}
@keyframes vs-marquee-right {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}
@keyframes vs-marquee-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Hero */
.wp-block-group.vs-hero {
	position: relative;
	height: calc(675 * var(--u));
	padding: calc(47 * var(--u)) 30px 0;
}
.vs-hero__line1,
.vs-hero__line2 { color: #fff; margin: 0; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.vs-hero__line1 { font-size: calc(144 * var(--u)); line-height: 1.16; }
.vs-hero__line2 { font-size: calc(512 * var(--u)); line-height: .9; }
.vs-hero__vuggie {
	position: absolute;
	right: calc(44 * var(--u));
	top: calc(574 * var(--u));
	width: calc(86 * var(--u));
	margin: 0;
	animation-duration: 3.5s;
}
.vs-hero__vuggie img { border-radius: 50%; display: block; }

/* Hands + phone */
.vs-embrace {
	position: relative;
	height: calc(1436 * var(--u));
	overflow: clip;
}
.vs-embrace__hands {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(337 * var(--u));
	height: calc(1039 * var(--u));
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 100%;
	pointer-events: none;
}
/* Shared iPhone frame: used by the hero phone and the three demo clips.

   The media are real iPhone 17 Pro Max captures (1320x2868), so the status bar
   and the Dynamic Island are genuine pixels - the frame only has to be a
   believable device. Proportions are lifted from the App Store panel generator
   (~/Downloads/.../gen.py), which the founder has already signed off on: for a
   device 990 wide, bezel 22, outer radius 134, screen radius 112, buttons 9 wide
   standing 7 proud. The old frame used radius 46/38 on a 490-wide phone, barely
   half that, and square-ish corners are the first thing that makes a mock read
   as "not an iPhone".

   Each phone sets --vs-dw to its own outer width and every measurement is a
   fraction of it, so one rule covers the hero, the clips and mobile. (Container
   units cannot do this: cqw on a container resolves against its ANCESTOR, not
   itself, so a container cannot size its own padding that way.) */
.vs-iphone {
	position: relative;
	width: var(--vs-dw);
	padding: calc(var(--vs-dw) * 0.022222);                 /* 22 / 990 */
	border-radius: calc(var(--vs-dw) * 0.135354);           /* 134 / 990 */
	background: linear-gradient(148deg, #464c57 0%, #191d23 26%, #0a0c10 60%, #31363f 100%);
	box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(30, 60, 90, .28), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.vs-iphone::before {
	/* volume rocker: three bars down the left edge, 990-scale tops 352/486/646 */
	content: "";
	position: absolute;
	left: calc(var(--vs-dw) * -0.007071);
	width: calc(var(--vs-dw) * 0.009091);
	top: 16.77%;
	height: 20.3%;
	border-radius: calc(var(--vs-dw) * 0.0035) 0 0 calc(var(--vs-dw) * 0.0035);
	background: linear-gradient(#5a616c 0 17.39%, transparent 17.39% 31.43%,
		#4d545e 31.43% 62.41%, transparent 62.41% 69.01%, #3d434c 69.01% 100%);
}
.vs-iphone::after {
	/* side button on the right */
	content: "";
	position: absolute;
	right: calc(var(--vs-dw) * -0.007071);
	width: calc(var(--vs-dw) * 0.009091);
	top: 26.68%;
	height: 9.53%;
	border-radius: 0 calc(var(--vs-dw) * 0.0035) calc(var(--vs-dw) * 0.0035) 0;
	background: linear-gradient(180deg, #5a616c, #23272e);
}
.vs-iphone > img,
.vs-iphone > video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1320 / 2868;                              /* the real screen */
	border-radius: calc(var(--vs-dw) * 0.113131);           /* 112 / 990 */
	background: #000;
}

.vs-embrace__phone {
	--vs-dw: calc(490 * var(--u));
	position: absolute;
	left: calc(50% - 290 * var(--u));
	top: calc(60 * var(--u));
	margin: 0;
	z-index: 3;
	rotate: 4.1deg;
	animation-duration: 6s;
}
.vs-embrace__snorkel {
	position: absolute;
	left: calc(50% - 595 * var(--u));
	top: calc(264 * var(--u));
	width: calc(100 * var(--u));
	margin: 0;
	z-index: 2;
	rotate: -10deg;
	animation-duration: 4.5s;
	animation-delay: 1s;
}

/* NEED A VUG? */
.wp-block-group.vs-demo {
	position: relative;
	padding: calc(44 * var(--u)) 30px calc(70 * var(--u));
}
.vs-demo__row {
	margin: calc(24 * var(--u)) auto 0;
	max-width: var(--vs-content);
	padding: 0 calc(34 * var(--u));
	gap: calc(116 * var(--u));
}
/* Each demo clip sits in the shared .vs-iphone bezel. No controls: it just
   loops, muted. */
.vs-demo__video {
	--vs-dw: calc(300 * var(--u));
	flex: 0 0 var(--vs-dw);
	margin: 0;
	transition: transform .3s ease;
}
.vs-demo__video:hover { transform: translateY(calc(-6 * var(--u))); }

/* VUGSOCIAL marquee + sticker diamond */
.wp-block-group.vs-cloud { position: relative; overflow: clip; padding: 0 0 calc(40 * var(--u)); }
.wp-block-group.vs-marquee {
	position: relative;
	height: calc(114 * var(--u));
	padding: calc(50 * var(--u)) 0 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.vs-marquee__text {
	display: inline-flex;
	white-space: nowrap;
	gap: 0;
	margin: 0;
	font-size: calc(36.6 * var(--u));
	line-height: 1.2;
	font-weight: 400;
	will-change: transform;
	animation: vs-marquee-right 50s linear infinite;
}
.vs-marquee__text > span { padding-right: .32em; }

.vs-diamond {
	position: relative;
	height: calc(830 * var(--u));
}
.vs-diamond::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vs-blue);
	clip-path: polygon(0 0, 100% 0, 100% calc(107 * var(--u)), 50% 100%, 0 calc(107 * var(--u)));
}
.vs-stickers { position: absolute; inset: 0; }
.vs-sticker {
	position: absolute;
	margin: 0;
	rotate: -2.9deg;
	animation-duration: 5s;
}
.vs-sticker img { display: block; width: 100%; height: auto; }
.vs-stickers .vs-sticker:nth-child(1){left:calc(50% + -589*var(--u));top:calc(31*var(--u));width:calc(119*var(--u));animation-delay:0.37s} /* rizz */
.vs-stickers .vs-sticker:nth-child(2){left:calc(50% + -474*var(--u));top:calc(25*var(--u));width:calc(104*var(--u));animation-delay:0.74s} /* npc */
.vs-stickers .vs-sticker:nth-child(3){left:calc(50% + -374*var(--u));top:calc(16*var(--u));width:calc(185*var(--u));animation-delay:1.11s} /* whatever */
.vs-stickers .vs-sticker:nth-child(4){left:calc(50% + -195*var(--u));top:calc(9*var(--u));width:calc(151*var(--u));animation-delay:1.48s} /* over it */
.vs-stickers .vs-sticker:nth-child(5){left:calc(50% + -50*var(--u));top:calc(4*var(--u));width:calc(109*var(--u));animation-delay:1.85s} /* vibes */
.vs-stickers .vs-sticker:nth-child(6){left:calc(50% + 52*var(--u));top:calc(-6*var(--u));width:calc(211*var(--u));animation-delay:2.22s} /* killin */
.vs-stickers .vs-sticker:nth-child(7){left:calc(50% + 253*var(--u));top:calc(-18*var(--u));width:calc(247*var(--u));animation-delay:2.59s} /* simp */
.vs-stickers .vs-sticker:nth-child(8){left:calc(50% + 491*var(--u));top:calc(-23*var(--u));width:calc(94*var(--u));animation-delay:0.36s} /* chill */
.vs-stickers .vs-sticker:nth-child(9){left:calc(50% + -527*var(--u));top:calc(232*var(--u));width:calc(214*var(--u));animation-delay:0.73s} /* based */
.vs-stickers .vs-sticker:nth-child(10){left:calc(50% + -323*var(--u));top:calc(220*var(--u));width:calc(252*var(--u));animation-delay:1.10s} /* next */
.vs-stickers .vs-sticker:nth-child(11){left:calc(50% + -79*var(--u));top:calc(207*var(--u));width:calc(256*var(--u));animation-delay:1.47s} /* no cap */
.vs-stickers .vs-sticker:nth-child(12){left:calc(50% + 168*var(--u));top:calc(195*var(--u));width:calc(253*var(--u));animation-delay:1.84s} /* stan */
.vs-stickers .vs-sticker:nth-child(13){left:calc(50% + 412*var(--u));top:calc(188*var(--u));width:calc(131*var(--u));animation-delay:2.21s} /* say less */
.vs-stickers .vs-sticker:nth-child(14){left:calc(50% + -394*var(--u));top:calc(434*var(--u));width:calc(164*var(--u));animation-delay:2.58s} /* bussin */
.vs-stickers .vs-sticker:nth-child(15){left:calc(50% + -236*var(--u));top:calc(428*var(--u));width:calc(115*var(--u));animation-delay:0.35s} /* tea */
.vs-stickers .vs-sticker:nth-child(16){left:calc(50% + -126*var(--u));top:calc(422*var(--u));width:calc(131*var(--u));animation-delay:0.72s} /* chat */
.vs-stickers .vs-sticker:nth-child(17){left:calc(50% + -2*var(--u));top:calc(412*var(--u));width:calc(201*var(--u));animation-delay:1.09s} /* oh okay */
.vs-stickers .vs-sticker:nth-child(18){left:calc(50% + 189*var(--u));top:calc(400*var(--u));width:calc(251*var(--u));animation-delay:1.46s} /* feeling good */

/* OUR VISION */
.wp-block-group.vs-vision {
	position: relative;
	padding: calc(48 * var(--u)) 30px calc(90 * var(--u));
	scroll-margin-top: 20px;
}
.vs-vision__cols {
	max-width: var(--vs-content);
	margin: calc(56 * var(--u)) auto 0 !important;
	align-items: center;
}
.vs-vision__col-collage { padding-right: calc(24 * var(--u)); }
.vs-vision__collage img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 43% 44%; }
.vs-vision__col-phone { display: flex; justify-content: center; }
.vs-vision__phone {
	width: calc(300 * var(--u));
	max-width: none;
	margin: calc(-40 * var(--u)) 0 0;
	rotate: -6deg;
	animation-duration: 7s;
	position: relative;
	z-index: 2;
}
.vs-vision__phone img {
	display: block;
	width: 100%;
	border: calc(4 * var(--u)) solid transparent;
	border-radius: calc(28 * var(--u));
	box-shadow: var(--wp--preset--shadow--phone);
}
.vs-vision__text { padding-left: calc(48 * var(--u)); }
.vs-vision__text p {
	font-family: var(--wp--preset--font-family--baloo);
	font-weight: 700;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.75;
	color: #fff;
	margin: 0;
}
.vs-vision__text p + p { margin-top: 18px; }

/* Vuggie parade + HOW DO YOU FEEL? */
.wp-block-group.vs-feel {
	position: relative;
	height: calc(528 * var(--u));
	padding: calc(33 * var(--u)) 0 0;
	overflow: hidden;
}
.vs-vuggies {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.vs-vuggies__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: max-content;
	will-change: transform;
	animation: vs-marquee-left 36s linear infinite;
}
.vs-vuggies__item { flex: none; width: calc(216 * var(--u)); margin: 0; }
.vs-vuggies__item img { display: block; width: 100%; }
.vs-feel__title {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(410 * var(--u));
	margin: 0;
	font-size: calc(72 * var(--u));
	line-height: 1.16;
	font-weight: 400;
}
.vs-feel__title a { color: #fff; text-decoration: none; }
.vs-feel__title a:hover { color: var(--vs-yellow); }

/* Pause the marquees for people who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	.vs-float, .vs-pill__logo, .vs-marquee__text, .vs-vuggies__track { animation: none !important; }
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ */
/* Cookie bar + back to top (markup from vugsocial-core)               */
/* ------------------------------------------------------------------ */
.vs-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 15px 30px;
	background: #363839;
	color: #8c8989;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 1.4;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .15);
}
.vs-cookie[hidden] { display: none; }
.vs-cookie p { margin: 0; }
.vs-cookie__ok {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	color: #fff;
	background: var(--vs-yellow);
	border: 0;
	border-radius: 4px;
	padding: 13px 29px;
	cursor: pointer;
}
.vs-cookie__ok:hover { background: var(--vs-yellow-deep); }

.vs-totop {
	position: fixed;
	right: 75px;
	bottom: 0;
	z-index: 100000;
	width: 48px;
	height: 35px;
	border-radius: 6px 6px 0 0;
	background: #333;
	color: var(--vs-yellow);
	display: none;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .3s ease;
	border: 0;
	cursor: pointer;
}
.vs-totop.is-visible { opacity: 1; }
.vs-totop svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ */
/* Contact form (block from vugsocial-core)                            */
/* ------------------------------------------------------------------ */
.vs-form { max-width: 960px; margin: 0 auto; }
.vs-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.vs-form__field--wide, .vs-form__actions { grid-column: 1 / -1; }
.vs-form p, .vs-form .vs-form__field, .vs-form .vs-form__actions, .vs-form .vs-form__notice { margin: 0; }
.vs-form *, .vs-form *::before, .vs-form *::after { box-sizing: border-box; }
.vs-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vs-form input, .vs-form select, .vs-form textarea {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--vs-line);
	border-radius: 12px;
	background: #f7fbfd;
	color: #000;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.vs-form textarea { height: 120px; padding: 13px 14px; resize: vertical; }
.vs-form ::placeholder { color: #8a97a1; opacity: 1; }
.vs-form select { color: #8a97a1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23aaa9a9' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.vs-form select.is-filled { color: #000; }
.vs-form select option { color: #000; text-transform: none; }
.vs-form input:focus, .vs-form select:focus, .vs-form textarea:focus { outline: none; background: #fff; border-color: var(--vs-yellow-deep); box-shadow: 0 0 0 4px rgba(255, 195, 56, .25); }
.vs-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vs-form__submit {
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 999px;
	background: var(--vs-yellow);
	color: #10202a;
	box-shadow: 0 8px 20px rgba(255, 195, 56, .35);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.vs-form__submit:hover { background: var(--vs-yellow-deep); }
.vs-form__submit[disabled] { opacity: .6; cursor: wait; }
.vs-form .vs-form__notice { margin: 0 0 24px; padding: 14px 18px; border-radius: 6px; font-size: 16px; line-height: 1.5; }
.vs-form__notice[hidden] { display: none; }
.vs-form__notice--success { background: #e6f7ea; color: #1f6b34; }
.vs-form__notice--error { background: #fdecea; color: #a12622; }
.vs-form .is-invalid { border-color: #e0494b; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	.vs-totop { display: flex; }
}

@media (max-width: 1024px) {
	.vs-footer__row > .vs-footer__vuggie { position: static; width: 80px; margin: 0 16px; }
	.vs-footer-nav .wp-block-navigation__container { gap: 20px; }
	.vs-footer-nav .wp-block-navigation-item__content { font-size: 12.5px; }
	.vs-header__bar { height: 76px; }
	.vs-logo { width: 140px; top: 9px; }
	.vs-nav .wp-block-navigation-item__content { font-size: 15px; }
	.vs-nav .wp-block-navigation__container { gap: 20px; }
}

@media (max-width: 800px) {
	/* Header: hamburger left, logo centred, Download pill right, sticky */
	.vs-site-header { position: sticky; top: 0; z-index: 30; }
	.wp-block-group.vs-header { padding: 0 12px; }
	.vs-header__bar { height: var(--vs-mobile-bar); }
	.vs-logo { left: 50%; top: 9px; width: 111px; transform: translateX(-50%); }
	.vs-logo:hover { transform: translateX(-50%) scale(1.04); }
	.vs-header .wp-block-group.vs-header__bar { justify-content: space-between; }
	.vs-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.vs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.vs-header .vs-header__dl { display: flex; }
	.vs-header .vs-header__dl .wp-block-button.is-style-pill .wp-block-button__link { font-size: 12px; line-height: 1.2; padding: 9px 14px; white-space: nowrap; color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }

	.vs-home-header__desktop { display: none; }
	.vs-home-header__mobile { display: block; }

	/* Footer stacks: icons + vuggie row, then the link list */
	.wp-block-group.vs-footer { padding: 0; }
	.wp-block-group.vs-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto; padding: 20px 24px 0; gap: 0; }
	.vs-footer__row > .vs-footer__vuggie { position: static; display: block; width: 84px; margin: 0; }
	.vs-footer__row > .vs-social.wp-block-social-links { margin: 0; }
	.vs-footer__row > .wp-block-navigation.vs-footer-nav { display: block; width: calc(100% + 48px); margin: 16px -24px 0; }
	.vs-footer-nav .wp-block-navigation__container { display: block; }
	.vs-footer-nav .wp-block-navigation-item { display: block; border-top: 1px solid rgba(255, 255, 255, .5); }
	.vs-footer-nav .wp-block-navigation-item__content { display: block; padding: 8px 20px; font-family: var(--wp--preset--font-family--baloo); font-size: 15px; }

	/* Inner pages */
	.vs-page--flush { padding-top: 0; padding-bottom: 0; }
	.wp-block-image.is-style-sticky { position: static; }
	.wp-block-group.vs-title-band { padding: 36px 24px 28px; }
	.vs-post-card { padding: 22px 20px; }
	.vs-404__links { grid-template-columns: 1fr; }
	.vs-founders__cols { flex-wrap: wrap; }
	.vs-founders__cols .wp-block-column { flex-basis: 100% !important; }
	.vs-form__grid { grid-template-columns: 1fr; gap: 24px; }
	.vs-share { padding: 20px; }

	/* Home: larger unit so the art fills the phone width */
	.wp-block-group.vs-hero { --u: calc(100vw / 1080); padding: 32px 30px 12px; height: auto; }
	.vs-hero__line1 { font-size: clamp(40px, 12.4vw, 100px); line-height: 1.05; white-space: normal; }
	.vs-hero__line2 { font-size: clamp(96px, 27vw, 300px); line-height: .9; }
	.vs-hero__vuggie { position: static; width: 64px; margin: 8px 12px 0 auto; }

	.vs-embrace { --u: calc(100vw / 900); }
	.vs-embrace__hands { background-size: cover; }

	.wp-block-group.vs-demo { padding: 32px 0 40px; }
	.vs-display { font-size: clamp(44px, 12vw, 100px); }
	.vs-demo__row {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 24px;
		margin: 24px 0 0;
		padding: 12px 30px 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.vs-demo__row::-webkit-scrollbar { display: none; }
	.vs-demo__video { --vs-dw: min(280px, 72vw); flex: 0 0 var(--vs-dw); scroll-snap-align: center; }

	.wp-block-group.vs-cloud { padding: 0 0 8px; }
	.wp-block-group.vs-marquee { height: 64px; padding: 22px 0 0; }
	.vs-marquee__text { font-size: 24px; }
	.vs-diamond { height: auto; padding: 20px 12px 52vw; }
	.vs-diamond::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46vw), 50% 100%, 0 calc(100% - 46vw)); }
	.vs-stickers { position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
	.vs-stickers .vs-sticker { position: static; width: auto; height: 62px; margin: 0; }
	.vs-stickers .vs-sticker:nth-child(3n) { rotate: 6deg; }
	.vs-stickers .vs-sticker:nth-child(3n+1) { rotate: -5deg; }
	.vs-stickers .vs-sticker img { width: auto; height: 100%; }

	.wp-block-group.vs-vision { padding: 32px 30px 56px; }
	.vs-vision__cols { margin-top: 24px !important; flex-wrap: wrap; }
	.vs-vision__cols .wp-block-column { flex-basis: 100% !important; padding: 0; }
	.vs-vision__col-phone { order: -1; margin-bottom: 8px; }
	.vs-vision__phone { width: min(60vw, 280px); margin: 0; }
	.vs-vision__col-collage { margin: 16px 0 24px; }

	.wp-block-group.vs-feel { height: auto; padding: 24px 0 40px; }
	.vs-vuggies__item { width: 132px; }
	.vs-feel__title { position: static; margin: 32px 20px 0; font-size: clamp(40px, 11vw, 72px); }

	.vs-cookie { padding: 14px 20px; }
	.vs-404__cols { flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.vs-header .vs-header__dl .wp-block-button.is-style-pill .wp-block-button__link { font-size: 11px; padding: 8px 11px; }
}