/**
 * Bright Private Suite — foundation.
 *
 * Brand primitives shared by every section: fonts, the Figma type and
 * spacing scale, buttons, links, the card hover, form fields, the reveal
 * motion and the request overlay.
 *
 * Colours come from Vendo Kit's Design System (--vk-color-*). The aliases
 * below carry the Figma variable names (ps/velvet, ps/ivory…) so a section
 * stylesheet reads like the design file.
 *
 * Sizes: the design is drawn at 1920px. `--bo-s` is one design pixel —
 * 1px at 1920 and wider, shrinking in proportion below it — so display type
 * and large spacing keep the design's proportions on a laptop. Body copy,
 * buttons and fields stay at their real size. Each scaled value has a floor
 * for phones.
 */

/* -------------------------------------------------------------------------
 * Fonts (self-hosted, latin subset)
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Libre Caslon Display';
	src: url('../fonts/libre-caslon-display-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Libre Caslon Text';
	src: url('../fonts/libre-caslon-text-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/bebas-neue-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

:root,
.editor-styles-wrapper {
	/* Figma colour variables → Design System */
	--ps-velvet: var(--vk-color-dark);
	--ps-ivory: var(--vk-color-bg);
	--ps-paper: var(--vk-color-surface);
	--ps-emerald: var(--vk-color-accent);
	--ps-brass-light: var(--vk-color-brand);
	--ps-brass: var(--vk-color-brass);
	--ps-ink: var(--vk-color-ink);
	--ps-ink-muted: var(--vk-color-muted);
	--ps-line-light: var(--vk-color-border);
	--ps-line-dark: var(--vk-color-line-dark);
	--ps-on-dark-muted: var(--vk-color-mist);
	--ps-blush: var(--vk-color-blush);
	--ps-stone: var(--vk-color-stone);
	--ps-mint: var(--vk-color-mint);

	/* Tints used by hover / focus states in the Figma prototypes */
	--ps-emerald-wash: color-mix(in srgb, var(--ps-emerald) 6%, transparent);
	--ps-brass-wash: color-mix(in srgb, var(--ps-brass-light) 6%, transparent);
	--ps-ivory-wash: color-mix(in srgb, var(--ps-ivory) 6%, transparent);
	--ps-scrim: color-mix(in srgb, var(--ps-velvet) 72%, transparent);
	--ps-moulding: color-mix(in srgb, #fff 55%, transparent);

	/* One design pixel (design canvas = 1920px) */
	--bo-s: min(1px, calc(100vw / 1920));

	/* Layout */
	--bo-content: 1624px;
	--bo-gutter: max(20px, calc(148 * var(--bo-s)));
	--bo-header-h: 120px;

	/* Families */
	--bo-font-display: var(--vk-font-heading);
	--bo-font-body: var(--vk-font-body);
	--bo-font-accent: var(--vk-font-accent);
	--bo-font-logo: var(--vk-font-logo);

	/* Type scale — the Figma text styles (PS/…) */
	--bo-fs-hero: max(52px, calc(272 * var(--bo-s)));       /* hero headline 272/270 */
	--bo-fs-display-l: max(44px, calc(112 * var(--bo-s)));  /* PS/Display L 112/118 */
	--bo-fs-display-m: max(36px, calc(72 * var(--bo-s)));   /* PS/Display M 72/82 */
	--bo-fs-display-s: max(30px, calc(48 * var(--bo-s)));   /* PS/Display S 48/58 */
	--bo-fs-body-l: max(19px, calc(24 * var(--bo-s)));      /* PS/Body L 24/38 */
	--bo-fs-accent: max(22px, calc(28 * var(--bo-s)));      /* PS/Accent Italic 28/40 */
	--bo-fs-body: 18px;                                     /* PS/Body 18/30 */
	--bo-fs-button: 17px;                                   /* PS/Button 17/22 */
	--bo-fs-small: 15px;                                    /* PS/Small 15/24 */
	--bo-fs-label: 14px;                                    /* PS/Label 14/20 */

	/* Motion */
	--bo-ease: cubic-bezier(.22, .61, .36, 1);
	--bo-ease-out: cubic-bezier(.16, 1, .3, 1);
	--bo-hover: 240ms;
	--bo-reveal: 1000ms;

	/* Shape */
	--bo-radius-field: 12px;
	--bo-radius-card: 20px;
	--bo-radius-media: 28px;
	--bo-radius-panel: 24px;
}

@media (max-width: 1023px) {
	:root {
		--bo-header-h: 88px;
	}
}

@media (max-width: 767px) {
	:root {
		--bo-header-h: 76px;
		--bo-fs-body: 17px;
	}
}

/* -------------------------------------------------------------------------
 * Page
 * ---------------------------------------------------------------------- */

html {
	scroll-padding-top: var(--bo-header-h);
}

body {
	margin: 0;
	background: var(--ps-ivory);
	color: var(--ps-ink);
	font-family: var(--bo-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.vk-main {
	display: block;
	overflow-x: clip;
}

/* Every Bright section resets the kit's generic section rhythm and type
   margins: spacing comes from the design, per section. Kept at single-class
   specificity so a section's own rule (in sections/*.css, loaded later)
   always wins. */
.vk-section:where(.bo-section) {
	padding-block: 0;
	background: var(--bo-bg, var(--ps-ivory));
	color: var(--bo-fg, var(--ps-ink));
}

.bo-section :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
	margin: 0;
}

.bo-section :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	text-wrap: wrap;
}

.bo-section ul,
.bo-section ol {
	padding: 0;
	list-style: none;
}

.bo-section a {
	text-decoration: none;
}

.bo-section img,
.bo-section video {
	max-width: none;
}

.bo-tone-velvet  { --bo-bg: var(--ps-velvet);  --bo-fg: var(--ps-ivory); }
.bo-tone-emerald { --bo-bg: var(--ps-emerald); --bo-fg: var(--ps-ivory); }
.bo-tone-ivory   { --bo-bg: var(--ps-ivory);   --bo-fg: var(--ps-ink); }
.bo-tone-paper   { --bo-bg: var(--ps-paper);   --bo-fg: var(--ps-ink); }
.bo-tone-blush   { --bo-bg: var(--ps-blush);   --bo-fg: var(--ps-ink); }
.bo-tone-stone   { --bo-bg: var(--ps-stone);   --bo-fg: var(--ps-ink); }

.bo-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--bo-content) + 2 * var(--bo-gutter));
	margin-inline: auto;
	padding-inline: var(--bo-gutter);
}

/* -------------------------------------------------------------------------
 * Type
 * ---------------------------------------------------------------------- */

.bo-t-hero,
.bo-section .bo-t-hero {
	font-family: var(--bo-font-display);
	font-weight: 400;
	font-size: var(--bo-fs-hero);
	line-height: 0.9926;
	letter-spacing: -0.02em;
}

.bo-t-display-l,
.bo-section .bo-t-display-l {
	font-family: var(--bo-font-display);
	font-weight: 400;
	font-size: var(--bo-fs-display-l);
	line-height: 1.0536;
	letter-spacing: -0.015em;
}

.bo-t-display-m,
.bo-section .bo-t-display-m {
	font-family: var(--bo-font-display);
	font-weight: 400;
	font-size: var(--bo-fs-display-m);
	line-height: 1.1389;
	letter-spacing: -0.01em;
}

.bo-t-display-s,
.bo-section .bo-t-display-s {
	font-family: var(--bo-font-display);
	font-weight: 400;
	font-size: var(--bo-fs-display-s);
	line-height: 1.2083;
	letter-spacing: -0.005em;
}

.bo-t-body-l,
.bo-section .bo-t-body-l {
	font-family: var(--bo-font-body);
	font-weight: 400;
	font-size: var(--bo-fs-body-l);
	line-height: 1.5833;
	letter-spacing: -0.01em;
}

.bo-t-body,
.bo-section .bo-t-body {
	font-family: var(--bo-font-body);
	font-weight: 400;
	font-size: var(--bo-fs-body);
	line-height: 1.6667;
	letter-spacing: -0.01em;
}

.bo-t-body-medium,
.bo-section .bo-t-body-medium,
.bo-t-price,
.bo-section .bo-t-price {
	font-family: var(--bo-font-body);
	font-weight: 500;
	font-size: var(--bo-fs-body);
	line-height: 1.6667;
	letter-spacing: -0.01em;
}

.bo-t-small,
.bo-section .bo-t-small {
	font-family: var(--bo-font-body);
	font-weight: 400;
	font-size: var(--bo-fs-small);
	line-height: 1.6;
	letter-spacing: 0;
}

.bo-t-label,
.bo-section .bo-t-label {
	font-family: var(--bo-font-body);
	font-weight: 500;
	font-size: var(--bo-fs-label);
	line-height: 1.4286;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bo-t-accent,
.bo-section .bo-t-accent {
	font-family: var(--bo-font-accent);
	font-style: italic;
	font-weight: 400;
	font-size: var(--bo-fs-accent);
	line-height: 1.4286;
	letter-spacing: 0;
}

.bo-muted { color: var(--ps-ink-muted); }
.bo-on-dark-muted { color: var(--ps-on-dark-muted); }
.bo-brass { color: var(--ps-brass); }
.bo-brass-light { color: var(--ps-brass-light); }

/* -------------------------------------------------------------------------
 * Buttons — PS / Button (Brass, Emerald, Ghost on dark, Ghost on light)
 * Default → Hover → Pressed, exactly as the component set.
 * ---------------------------------------------------------------------- */

.bo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 19px 36px;
	border: 0;
	border-radius: 999px;
	font-family: var(--bo-font-body);
	font-weight: 500;
	font-size: var(--bo-fs-button);
	line-height: 22px;
	letter-spacing: -0.005em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--bo-hover) var(--bo-ease),
		border-color var(--bo-hover) var(--bo-ease),
		color var(--bo-hover) var(--bo-ease);
	-webkit-tap-highlight-color: transparent;
}

.bo-section a.bo-btn,
a.bo-btn { text-decoration: none; }

.bo-btn:focus-visible {
	outline: 2px solid var(--ps-brass);
	outline-offset: 3px;
}

.bo-btn.bo-btn--brass { background: var(--ps-brass-light); color: var(--ps-velvet); }
.bo-btn.bo-btn--brass:hover { background: var(--ps-ivory); color: var(--ps-velvet); }
.bo-btn.bo-btn--brass:active { background: var(--ps-stone); }

.bo-btn.bo-btn--emerald { background: var(--ps-emerald); color: var(--ps-paper); }
.bo-btn.bo-btn--emerald:hover { background: var(--ps-velvet); color: var(--ps-paper); }
.bo-btn.bo-btn--emerald:active { background: var(--ps-ink); }

.bo-btn.bo-btn--ghost-dark {
	border: 1px solid var(--ps-brass-light);
	background: transparent;
	color: var(--ps-ivory);
}
.bo-btn.bo-btn--ghost-dark:hover { background: var(--ps-brass-light); border-color: var(--ps-brass-light); color: var(--ps-velvet); }
.bo-btn.bo-btn--ghost-dark:active { background: var(--ps-ivory); border-color: var(--ps-ivory); color: var(--ps-velvet); }

.bo-btn.bo-btn--ghost-light {
	border: 1px solid var(--ps-ink);
	background: transparent;
	color: var(--ps-ink);
}
.bo-btn.bo-btn--ghost-light:hover { background: var(--ps-ink); border-color: var(--ps-ink); color: var(--ps-paper); }
.bo-btn.bo-btn--ghost-light:active { background: var(--ps-velvet); border-color: var(--ps-velvet); color: var(--ps-paper); }

.bo-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* -------------------------------------------------------------------------
 * Links — PS / Nav link and PS / Footer link
 * Text turns brass, the 1.5px underline fades in.
 * ---------------------------------------------------------------------- */

.bo-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding-block: 4px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--bo-hover) var(--bo-ease);
}

.bo-link::after {
	content: '';
	display: block;
	width: 100%;
	height: 1.5px;
	background: var(--ps-brass-light);
	opacity: 0;
	transition: opacity var(--bo-hover) var(--bo-ease);
}

.bo-link:hover,
.bo-link.is-current,
.bo-link:focus-visible {
	color: var(--ps-brass-light);
}

.bo-link:hover::after,
.bo-link.is-current::after,
.bo-link:focus-visible::after {
	opacity: 1;
}

.bo-link:focus-visible {
	outline: none;
}

.bo-link--nav { font-weight: 500; font-size: 18px; line-height: 30px; letter-spacing: -0.01em; }
.bo-link--footer { font-weight: 400; font-size: 18px; line-height: 30px; letter-spacing: -0.01em; }

/* -------------------------------------------------------------------------
 * Card hover — Proto / Card hover
 * A full-card link layered over the card. Default: invisible. Hover: a
 * 6% wash, a 2px rule and the arrow chip sliding up into the corner.
 * ---------------------------------------------------------------------- */

.bo-card {
	position: relative;
	isolation: isolate;
}

.bo-card-hover {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	border-radius: var(--bo-card-radius, var(--bo-radius-card));
	background: transparent;
	box-shadow: inset 0 0 0 0 transparent;
	transition:
		background-color var(--bo-hover) var(--bo-ease),
		box-shadow var(--bo-hover) var(--bo-ease);
}

.bo-card-hover__chip {
	position: absolute;
	top: 30px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 28px;
	opacity: 0;
	transition:
		opacity var(--bo-hover) var(--bo-ease),
		top 360ms var(--bo-ease-out),
		right 360ms var(--bo-ease-out);
}

.bo-card-hover__chip img {
	display: block;
	width: 22px;
	height: 22px;
}

.bo-card-hover--light .bo-card-hover__chip { background: var(--ps-emerald); }
.bo-card-hover--dark .bo-card-hover__chip { background: var(--ps-brass-light); }

.bo-card:hover > .bo-card-hover--light,
.bo-card-hover--light:focus-visible {
	background: var(--ps-emerald-wash);
	box-shadow: inset 0 0 0 2px var(--ps-emerald);
}

.bo-card:hover > .bo-card-hover--dark,
.bo-card-hover--dark:focus-visible {
	background: var(--ps-brass-wash);
	box-shadow: inset 0 0 0 2px var(--ps-brass-light);
}

.bo-card:hover > .bo-card-hover .bo-card-hover__chip,
.bo-card-hover:focus-visible .bo-card-hover__chip {
	top: 18px;
	right: 18px;
	opacity: 1;
}

.bo-card-hover:focus-visible {
	outline: none;
}

/* -------------------------------------------------------------------------
 * Fields — Proto / Field (on velvet) and Proto / Chip
 * ---------------------------------------------------------------------- */

.bo-field {
	display: block;
	position: relative;
}

.bo-field__input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 72px;
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--ps-line-dark);
	border-radius: var(--bo-radius-field);
	background: transparent;
	color: var(--ps-ivory);
	font-family: var(--bo-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: -0.01em;
	box-shadow: inset 0 0 0 0 transparent;
	appearance: none;
	transition:
		border-color var(--bo-hover) var(--bo-ease),
		background-color var(--bo-hover) var(--bo-ease),
		box-shadow var(--bo-hover) var(--bo-ease);
}

.bo-field__input::placeholder {
	color: var(--ps-on-dark-muted);
	opacity: 1;
}

.bo-field__input:hover {
	border-color: color-mix(in srgb, var(--ps-brass-light) 55%, var(--ps-line-dark));
}

.bo-field__input:focus,
.bo-field__input:focus-visible {
	outline: none;
	border-color: var(--ps-brass-light);
	background: var(--ps-ivory-wash);
	box-shadow: inset 0 0 0 0.5px var(--ps-brass-light);
}

textarea.bo-field__input {
	resize: vertical;
	min-height: 140px;
}

select.bo-field__input {
	padding-right: 56px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23dcc48f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	cursor: pointer;
}

select.bo-field__input:invalid,
select.bo-field__input.is-placeholder {
	color: var(--ps-on-dark-muted);
}

select.bo-field__input option {
	color: var(--ps-ink);
	background: var(--ps-ivory);
}

.bo-field.is-invalid .bo-field__input,
.bo-field__input[aria-invalid='true'] {
	border-color: var(--vk-color-error);
}

.bo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.bo-chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.bo-chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.bo-chip span {
	display: inline-flex;
	padding: 12px 22px;
	border: 1px solid var(--ps-line-dark);
	border-radius: 999px;
	background: transparent;
	color: var(--ps-ivory);
	font-weight: 500;
	font-size: 17px;
	line-height: 22px;
	letter-spacing: -0.005em;
	white-space: nowrap;
	transition:
		background-color var(--bo-hover) var(--bo-ease),
		border-color var(--bo-hover) var(--bo-ease),
		color var(--bo-hover) var(--bo-ease);
}

.bo-chip:hover span {
	border-color: var(--ps-brass-light);
}

.bo-chip input:checked + span {
	background: var(--ps-brass-light);
	border-color: var(--ps-brass-light);
	color: var(--ps-velvet);
}

.bo-chip input:focus-visible + span {
	outline: 2px solid var(--ps-brass-light);
	outline-offset: 3px;
}

/* Kit form feedback, restyled for the velvet panels */
.bo-section .vk-form-message {
	margin: 0;
	font-size: var(--bo-fs-small);
	line-height: 1.6;
}
.bo-section .vk-form-message.is-error { color: var(--ps-blush); }
.bo-section .vk-form-submit[disabled] { opacity: .7; cursor: progress; }

/* -------------------------------------------------------------------------
 * Reveal motion — the Start → End states of the "Proto / …" frames
 *
 * Mark an element with data-bo-reveal and give it its Start offset:
 *   style="--bo-from-y: 36px; --bo-delay: 0ms"
 * (also --bo-from-x, --bo-from-rotate, --bo-from-scale, --bo-duration)
 * data-bo-reveal="fade" also fades it in. Sections reveal when they scroll
 * into view; heroes (data-bo-reveal-on="load") on page load. Without
 * JavaScript, or with reduced motion, everything simply sits in its End
 * position.
 * ---------------------------------------------------------------------- */

.bo-js [data-bo-reveal] {
	transform: translate3d(var(--bo-from-x, 0), var(--bo-from-y, 0), 0) rotate(var(--bo-from-rotate, 0deg)) scale(var(--bo-from-scale, 1));
	transition:
		transform var(--bo-duration, var(--bo-reveal)) var(--bo-ease-out) var(--bo-delay, 0ms),
		opacity var(--bo-duration, var(--bo-reveal)) var(--bo-ease) var(--bo-delay, 0ms);
	will-change: transform;
}

.bo-js [data-bo-reveal='fade'] {
	opacity: 0;
}

.bo-js .is-revealed [data-bo-reveal],
.bo-js [data-bo-reveal].is-revealed {
	transform: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bo-js [data-bo-reveal] {
		transform: none;
		opacity: 1;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Overlay: Request sent
 * ---------------------------------------------------------------------- */

.bo-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 20px;
	background: var(--ps-scrim);
	opacity: 0;
	visibility: hidden;
	transition: opacity 320ms var(--bo-ease), visibility 0s linear 320ms;
}

.bo-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 320ms var(--bo-ease);
}

.bo-overlay__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	max-width: 760px;
	padding: clamp(32px, 3.75vw, 72px);
	border-radius: var(--bo-radius-panel);
	background: var(--ps-ivory);
	color: var(--ps-ink);
	transform: translateY(24px);
	transition: transform 520ms var(--bo-ease-out);
}

.bo-overlay.is-open .bo-overlay__panel {
	transform: none;
}

.bo-overlay .bo-overlay__title {
	margin: 0;
	color: var(--ps-ink);
	font-family: var(--bo-font-display);
	font-weight: 400;
	font-size: clamp(40px, 3.75vw, 72px);
	line-height: 1.1389;
	letter-spacing: -0.01em;
}

.bo-overlay .bo-overlay__text {
	max-width: 616px;
	margin: 0;
	color: var(--ps-ink-muted);
	font-size: clamp(19px, 1.25vw, 24px);
	line-height: 1.5833;
	letter-spacing: -0.01em;
}

.bo-overlay__actions {
	margin-top: 8px;
}

html.bo-overlay-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.bo-overlay,
	.bo-overlay__panel { transition: none; }
}