/* ==========================================================================
   HAPEI CAMPUS PEACE AMBASSADOR PAGE (v4)
   Replaces 07-ambassador.css in full.
   ========================================================================== */

/* GLOBAL */

.hp-amb.hp-amb--v4 {
	--a-red: var(--hp-red,#e10d0d);
	--a-red-dark: var(--hp-deep,#a40000);
	--a-flame: var(--hp-flame,#ff4b2b);
	--a-ink: var(--hp-ink,#1a0b0b);
	--a-mist: var(--hp-mist,#fbf6f5);
	--a-soft: var(--hp-soft,#fff1ed);
	--a-body: var(--hp-body,"Inter",sans-serif);
	--a-head: var(--hp-head,"Outfit",sans-serif);
	--a-radius: 20px;
	--a-muted: rgba(26,11,11,.66);
	color: var(--a-ink);
	overflow-x: clip;
}

.hp-amb .hp-wrap {
	width: min(1180px,calc(100% - 40px));
	margin-inline: auto;
}

.hp-amb .hp-sec {
	position: relative;
}

.hp-amb .hp-pt-xl {
	padding-top: clamp(64px,8vw,110px);
}

.hp-amb .hp-pb-xl {
	padding-bottom: clamp(64px,8vw,110px);
}

.hp-amb .hp-sec--white {
	background: #fff;
}

.hp-amb .hp-sec--mist {
	background: var(--a-mist);
}

.hp-amb .hp-sec--soft {
	background: var(--a-soft);
}

.hp-amb [id] {
	scroll-margin-top: 90px;
}

/* HEADINGS */

.hp-ambx-secH {
	max-width: 760px;
	margin: 0 0 52px;
}

.hp-ambx-secH--center {
	margin-inline: auto;
	text-align: center;
}

.hp-ambx-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	color: var(--a-red);
	font: 700 12px/1.3 var(--a-body);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.hp-ambx-eyebrow--light {
	color: #fff;
	opacity: .9;
}

.hp-ambx-secH h2 {
	margin: 0 0 16px;
	color: var(--a-ink);
	font: 800 clamp(30px,4vw,48px)/1.08 var(--a-head);
	letter-spacing: -.025em;
}

.hp-ambx-secH p {
	margin: 0;
	color: var(--a-muted);
	font: 400 16px/1.7 var(--a-body);
}

.hp-ambx-secH--on-dark h2 {
	color: #fff;
}

.hp-ambx-secH--on-dark p {
	color: rgba(255,255,255,.72);
}

/* BUTTONS */

.hp-ambx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: 700 14px/1 var(--a-body);
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}

.hp-ambx-btn:hover {
	text-decoration: none;
}

.hp-ambx-btn--fill {
	background: var(--a-red);
	color: #fff;
	box-shadow: 0 10px 24px rgba(225,13,13,.24);
}

.hp-ambx-btn--fill:hover,
.hp-ambx-btn--fill:focus-visible {
	background: var(--a-red-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(225,13,13,.28);
}

.hp-ambx-btn--fill[disabled] {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.hp-ambx-btn--ghost {
	background: transparent;
	color: var(--a-ink);
	border-color: rgba(26,11,11,.18);
}

.hp-ambx-btn--ghost:hover,
.hp-ambx-btn--ghost:focus-visible {
	border-color: var(--a-red);
	color: var(--a-red);
}

/* 1. HERO */

.hp-ambx-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px,7vw,96px) 0 clamp(56px,7vw,96px);
	background: linear-gradient(180deg,#fff 0%,var(--a-soft) 100%);
}

.hp-ambx-hero__glow {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60vw;
	height: 60vw;
	max-width: 760px;
	max-height: 760px;
	border-radius: 50%;
	background: radial-gradient(circle,rgba(225,13,13,.14),transparent 65%);
	pointer-events: none;
}

.hp-ambx-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
	gap: clamp(32px,6vw,80px);
	align-items: center;
}

.hp-ambx-hero__eyebrow {
	display: inline-block;
	margin: 0 0 20px;
	padding: 7px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(225,13,13,.18);
	color: var(--a-red);
	font: 700 11px/1.3 var(--a-body);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.hp-ambx-hero__title {
	margin: 0 0 16px;
	color: var(--a-ink);
	font: 800 clamp(38px,5.4vw,66px)/1.04 var(--a-head);
	letter-spacing: -.035em;
	text-wrap: balance;
}

.hp-ambx-hero__lead {
	margin: 0 0 30px;
	color: var(--a-red);
	font: 600 clamp(19px,2.2vw,26px)/1.3 var(--a-head);
	letter-spacing: -.01em;
}

.hp-ambx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.hp-ambx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-ambx-chips li {
	padding: 7px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(26,11,11,.08);
	color: rgba(26,11,11,.78);
	font: 600 13px/1.3 var(--a-body);
}

.hp-ambx-collage {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 14px;
	max-width: 520px;
	margin-inline: auto;
}

.hp-ambx-collage--1 {
	grid-template-columns: minmax(0,300px);
	justify-content: center;
}

.hp-ambx-portrait {
	position: relative;
	margin: 0;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 18px;
	background: var(--a-mist);
	box-shadow: 0 24px 50px -28px rgba(26,11,11,.45);
}

.hp-ambx-collage:not(.hp-ambx-collage--1) .hp-ambx-portrait:nth-child(even) {
	transform: translateY(28px);
}

.hp-ambx-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.hp-ambx-portrait:hover img {
	transform: scale(1.04);
}

.hp-ambx-portrait figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 44px 14px 14px;
	background: linear-gradient(180deg,transparent,rgba(0,0,0,.7));
	opacity: 0;
	transition: opacity .3s;
}

.hp-ambx-portrait:hover figcaption,
.hp-ambx-portrait:focus-within figcaption {
	opacity: 1;
}

.hp-ambx-portrait figcaption span {
	display: block;
	color: #fff;
	font: 600 13px/1.4 var(--a-body);
}

.hp-ambx-emblem {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: min(340px,80%);
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	background: linear-gradient(140deg,var(--a-red),var(--a-red-dark));
	color: #fff;
	text-align: center;
	box-shadow: 0 30px 70px -30px rgba(164,0,0,.7),inset 0 0 0 14px rgba(255,255,255,.08);
}

.hp-ambx-emblem__small {
	font: 700 12px/1 var(--a-body);
	letter-spacing: .3em;
	text-transform: uppercase;
	opacity: .85;
}

.hp-ambx-emblem strong {
	font: 800 clamp(38px,6vw,56px)/1 var(--a-head);
	letter-spacing: .02em;
}

.hp-ambx-emblem__label {
	font: 600 13px/1.3 var(--a-body);
	letter-spacing: .06em;
	max-width: 160px;
}

/* HERO: ambassador faces. One continuous auto-scrolling row on every screen size.
   Name and campus always visible. Pauses on hover/touch. Reduced motion: swipeable row. */

.hp-ambx-hero--center {
	text-align: center;
	padding-top: clamp(64px,10vw,120px);
	padding-bottom: clamp(40px,5vw,60px);
}

.hp-ambx-hero--center .hp-ambx-hero__glow {
	left: 50%;
	top: -30%;
	right: auto;
	transform: translateX(-50%);
}

.hp-ambx-hero--center .hp-ambx-hero__copy {
	position: relative;
	max-width: 810px;
	margin: 0 auto 40px;
}

.hp-ambx-hero--center .hp-ambx-hero__title {
	margin-bottom: 24px;
}

.hp-ambx-hero--center .hp-ambx-hero__lead {
	color: var(--a-muted);
	font-size: clamp(20px,3vw,36px);
}

.hp-ambx-hero--center .hp-ambx-hero__actions {
	justify-content: center;
}

.hp-ambx-faces-sec {
	margin-bottom: clamp(64px,8vw,110px);
}

.hp-ambx-faces {
	overflow: hidden;
	padding: 6px 0 14px;
	-webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
	mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

.hp-ambx-faces__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: hp-ambx-faces-run var(--hp-faces-speed,48s) linear infinite;
	will-change: transform;
}

.hp-ambx-faces:hover .hp-ambx-faces__track,
.hp-ambx-faces:focus-within .hp-ambx-faces__track,
.hp-ambx-faces:active .hp-ambx-faces__track {
	animation-play-state: paused;
}

@keyframes hp-ambx-faces-run {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.hp-ambx-face {
	flex: 0 0 auto;
	width: clamp(190px,19vw,260px);
	margin-right: 16px;
}

.hp-ambx-face figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 16px;
	background: var(--a-mist);
	box-shadow: 0 24px 50px -30px rgba(26,11,11,.5);
}

.hp-ambx-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.hp-ambx-face:hover img {
	transform: scale(1.04);
}

.hp-ambx-face figcaption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 56px 16px 16px;
	text-align: left;
	background: linear-gradient(180deg,transparent,rgba(20,4,4,.82));
}

.hp-ambx-face figcaption strong {
	color: #fff;
	font: 700 16px/1.25 var(--a-head);
}

.hp-ambx-face figcaption span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: rgba(255,255,255,.85);
	font: 500 12.5px/1.35 var(--a-body);
}

.hp-ambx-face--empty figure {
	display: grid;
	place-items: center;
	min-height: 240px;
}

.hp-ambx-face--empty figure span {
	color: rgba(26,11,11,.35);
	font: 800 18px/1 var(--a-head);
	letter-spacing: .18em;
}

@media (max-width:720px) {
	.hp-ambx-face {
		width: 62vw;
		max-width: 250px;
		margin-right: 12px;
	}
}

/* Reduced motion: no auto-scroll, the row becomes a normal swipeable strip. */
@media (prefers-reduced-motion: reduce) {
	.hp-ambx-faces {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
		scrollbar-width: none;
	}
	.hp-ambx-faces__track {
		animation: none;
	}
	.hp-ambx-face[aria-hidden="true"] {
		display: none;
	}
}

/* 2. BENEFITS */

.hp-ambx-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 22px;
}

.hp-ambx-benefit-card {
	position: relative;
	padding: 28px;
	background: var(--a-mist);
	border: 1px solid rgba(26,11,11,.04);
	border-radius: var(--a-radius);
	transition: transform .3s,box-shadow .3s,border-color .3s;
}

.hp-ambx-benefit-card:hover {
	transform: translateY(-5px);
	border-color: rgba(225,13,13,.12);
	box-shadow: 0 20px 42px rgba(26,11,11,.08);
}

.hp-ambx-benefit-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.hp-ambx-benefit-card__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: rgba(225,13,13,.09);
	color: var(--a-red);
}

.hp-ambx-benefit-card__icon svg {
	width: 28px;
	height: 28px;
}

.hp-ambx-benefit-card__number {
	color: rgba(26,11,11,.16);
	font: 800 34px/1 var(--a-head);
}

.hp-ambx-benefit-card:nth-child(2) .hp-ambx-benefit-card__icon {
	background: rgba(107,59,220,.1);
	color: #6b3bdc;
}

.hp-ambx-benefit-card:nth-child(3) .hp-ambx-benefit-card__icon {
	background: rgba(15,143,86,.1);
	color: #0f8f56;
}

.hp-ambx-benefit-card:nth-child(4) .hp-ambx-benefit-card__icon {
	background: rgba(245,158,11,.12);
	color: #d97706;
}

.hp-ambx-benefit-card:nth-child(5) .hp-ambx-benefit-card__icon {
	background: rgba(14,116,144,.1);
	color: #0e7490;
}

.hp-ambx-benefit-card:nth-child(6) .hp-ambx-benefit-card__icon {
	background: rgba(219,39,119,.1);
	color: #db2777;
}

.hp-ambx-benefit-card:nth-child(7) .hp-ambx-benefit-card__icon {
	background: rgba(124,58,237,.1);
	color: #7c3aed;
}

.hp-ambx-benefit-card h3 {
	margin: 0 0 10px;
	color: var(--a-ink);
	font: 700 20px/1.25 var(--a-head);
}

.hp-ambx-benefit-card p {
	margin: 0;
	color: var(--a-muted);
	font: 400 14.5px/1.65 var(--a-body);
}

.hp-ambx-benefit-card--wide {
	grid-column: 1/-1;
	display: flex;
	align-items: center;
	gap: 28px;
	background: linear-gradient(135deg,var(--a-soft),#fff);
}

.hp-ambx-benefit-card--wide .hp-ambx-benefit-card__top {
	flex: 0 0 auto;
	margin: 0;
	gap: 18px;
}

.hp-ambx-benefit-card--wide .hp-ambx-benefit-card__text {
	max-width: 640px;
}

/* 3. QUALITIES BAND */

.hp-ambx-band {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg,var(--a-red) 0%,var(--a-red-dark) 100%);
	color: #fff;
}

.hp-ambx-band--qualities {
	padding: clamp(64px,8vw,96px) 0;
}

.hp-ambx-band__pattern {
	position: absolute;
	inset: 0;
	opacity: .13;
	pointer-events: none;
	background-image: radial-gradient(circle at 15% 25%,rgba(255,255,255,.42),transparent 48%),radial-gradient(circle at 85% 75%,rgba(255,255,255,.32),transparent 48%),repeating-linear-gradient(45deg,transparent 0 22px,rgba(255,255,255,.05) 22px 23px);
}

.hp-ambx-band__inner {
	position: relative;
	z-index: 1;
}

/* Rotator redesign: statement stage on the left, numbered qualities on the right */

.hp-ambx-qr__grid {
	display: grid;
	grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
	gap: clamp(36px,6vw,88px);
	align-items: center;
}

.hp-ambx-qr__tag {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: rgba(255,255,255,.85);
	font: 700 12px/1.3 var(--a-body);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.hp-ambx-qr__tag::before {
	content: "";
	width: 34px;
	height: 2px;
	background: #ffdb50;
}

.hp-ambx-qr__lead {
	max-width: 34ch;
	margin: 0 0 clamp(28px,4vw,44px);
	color: rgba(255,255,255,.88);
	font: 500 clamp(17px,1.8vw,21px)/1.55 var(--a-body);
}

.hp-ambx-qr__rot {
	position: relative;
	padding: clamp(26px,3.4vw,40px) clamp(22px,3vw,40px) 22px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 24px;
	background: linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
	box-shadow: 0 30px 60px -34px rgba(0,0,0,.5);
	backdrop-filter: blur(6px);
}

.hp-ambx-qr__mark {
	position: absolute;
	top: -6px;
	left: clamp(18px,2.6vw,32px);
	color: #ffdb50;
	font: 800 clamp(70px,8vw,110px)/1 var(--a-head);
	opacity: .9;
	pointer-events: none;
}

.hp-ambx-qr__lines {
	display: grid;
	margin-top: clamp(22px,3vw,34px);
}

.hp-ambx-qr__line {
	grid-area: 1/1;
	margin: 0;
	color: #fff;
	font: 800 clamp(26px,3.4vw,42px)/1.18 var(--a-head);
	letter-spacing: -.02em;
	text-wrap: balance;
	opacity: 0;
	visibility: hidden;
	transform: translateY(22px);
	transition: opacity .55s ease,transform .55s ease,visibility 0s linear .55s;
}

.hp-ambx-qr__line.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.hp-ambx-qr__line.is-leaving {
	opacity: 0;
	visibility: visible;
	transform: translateY(-22px);
}

.hp-ambx-qr__ctrl {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: clamp(24px,3vw,34px);
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.18);
}

.hp-ambx-qr__count {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	color: rgba(255,255,255,.7);
	font: 600 13px/1 var(--a-head);
	letter-spacing: .08em;
}

.hp-ambx-qr__count b {
	color: #fff;
	font-size: 20px;
	font-weight: 800;
}

.hp-ambx-qr__count i {
	font-style: normal;
	opacity: .55;
}

.hp-ambx-qr__bar {
	flex: 1 1 auto;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255,255,255,.2);
}

.hp-ambx-qr__bar i {
	display: block;
	width: 0;
	height: 100%;
	background: #ffdb50;
}

.hp-ambx-qr__btns {
	display: inline-flex;
	gap: 8px;
}

.hp-ambx-qr__btns button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	cursor: pointer;
	transition: background .2s,color .2s,border-color .2s;
}

.hp-ambx-qr__btns button:hover {
	background: #fff;
	border-color: #fff;
	color: var(--a-red);
}

.hp-ambx-qr__btns svg {
	width: 16px;
	height: 16px;
}

.hp-ambx-qr__btns .is-play {
	display: none;
}

.hp-ambx-qr__rot.is-paused .is-play {
	display: block;
}

.hp-ambx-qr__rot.is-paused .is-pause {
	display: none;
}

.hp-ambx-qr__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255,255,255,.2);
}

.hp-ambx-qr__list li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 17px 4px;
	border-bottom: 1px solid rgba(255,255,255,.2);
	transition: padding .25s ease,background .25s ease;
}

.hp-ambx-qr__list li:hover {
	padding-left: 14px;
	background: linear-gradient(90deg,rgba(255,255,255,.1),transparent);
}

.hp-ambx-qr__n {
	flex: 0 0 auto;
	min-width: 2ch;
	color: #ffdb50;
	font: 800 14px/1 var(--a-head);
	letter-spacing: .06em;
}

.hp-ambx-qr__t {
	color: rgba(255,255,255,.96);
	font: 600 clamp(15px,1.5vw,17px)/1.4 var(--a-body);
}

/* 4. CAMPUSES */

.hp-ambx-campus .hp-ambx-secH {
	margin-bottom: 42px;
}

.hp-ambx-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 12px;
	max-width: 1040px;
	margin: 0 auto;
}

.hp-ambx-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 17px;
	background: #fff;
	border: 1px solid rgba(26,11,11,.08);
	border-radius: 999px;
	color: rgba(26,11,11,.85);
	font: 500 14px/1.35 var(--a-body);
	transition: border-color .2s,transform .2s,box-shadow .2s;
}

.hp-ambx-pill:hover {
	border-color: rgba(225,13,13,.35);
	box-shadow: 0 8px 20px rgba(26,11,11,.05);
	transform: translateY(-2px);
}

.hp-ambx-pill__dot {
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--a-red);
}

.hp-ambx-reach-cta {
	margin-top: 40px;
	text-align: center;
}

/* 5. VIDEOS */

.hp-ambx-vsec {
	position: relative;
	overflow: hidden;
	padding: clamp(64px,8vw,110px) 0;
	background: var(--a-ink);
	color: #fff;
}

.hp-ambx-vsec::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto auto;
	width: 70%;
	height: 90%;
	background: radial-gradient(ellipse at center,rgba(225,13,13,.28),transparent 68%);
	pointer-events: none;
}

.hp-ambx-vsec>.hp-wrap {
	position: relative;
	z-index: 1;
}

.hp-ambx-vids {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 20px;
}

.hp-ambx-vid {
	position: relative;
	display: block;
	aspect-ratio: 3/4;
	overflow: hidden;
	background: rgba(0,0,0,.25);
	border-radius: 17px;
	color: inherit;
	text-decoration: none;
	transition: transform .35s,box-shadow .35s;
}

.hp-ambx-vid:hover {
	color: inherit;
	transform: translateY(-6px);
	box-shadow: 0 28px 55px rgba(0,0,0,.45);
}

.hp-ambx-vid__media {
	position: absolute;
	inset: 0;
	display: block;
}

.hp-ambx-vid__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s,filter .3s;
}

.hp-ambx-vid:hover .hp-ambx-vid__media img {
	transform: scale(1.06);
	filter: brightness(.75);
}

.hp-ambx-vid__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
}

.hp-ambx-vid__play svg {
	box-sizing: content-box;
	width: 28px;
	height: 28px;
	padding: 18px;
	background: rgba(255,255,255,.96);
	border-radius: 50%;
	color: var(--a-red);
	box-shadow: 0 12px 30px rgba(0,0,0,.4);
	transition: transform .3s;
}

.hp-ambx-vid:hover .hp-ambx-vid__play svg {
	transform: scale(1.08);
}

.hp-ambx-vid__meta {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 46px 18px 18px;
	background: linear-gradient(180deg,transparent,rgba(0,0,0,.78));
}

.hp-ambx-vid__meta strong {
	color: #fff;
	font: 700 16px/1.3 var(--a-head);
}

.hp-ambx-vid__meta span {
	color: rgba(255,255,255,.75);
	font: 400 12px/1.4 var(--a-body);
}

/* PLACEHOLDERS (videos + articles) */

.hp-ambx-ghosts {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 20px;
	margin-bottom: 34px;
}

.hp-ambx-ghosts--3 {
	grid-template-columns: repeat(3,minmax(0,1fr));
}

.hp-ambx-ghost {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 3/4;
	border-radius: 17px;
	overflow: hidden;
}

.hp-ambx-ghost--wide {
	aspect-ratio: 4/3;
}

.hp-ambx-ghost i {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: currentColor;
	opacity: .2;
	position: relative;
}

.hp-ambx-ghost i::after {
	content: "";
	position: absolute;
	left: 21px;
	top: 16px;
	border-left: 16px solid #fff;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}

.hp-ambx-ghost--wide i {
	border-radius: 12px;
}

.hp-ambx-ghost--wide i::after {
	display: none;
}

.hp-ambx-ghosts--dark .hp-ambx-ghost {
	color: #fff;
	background: linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
	border: 1px dashed rgba(255,255,255,.22);
}

.hp-ambx-ghosts--light .hp-ambx-ghost {
	color: var(--a-red);
	background: rgba(255,255,255,.7);
	border: 1px dashed rgba(225,13,13,.28);
}

.hp-ambx-soon {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.hp-ambx-soon h3 {
	margin: 0 0 8px;
	font: 700 22px/1.3 var(--a-head);
}

.hp-ambx-soon p {
	margin: 0;
	font: 400 15px/1.65 var(--a-body);
}

.hp-ambx-soon--dark h3 {
	color: #fff;
}

.hp-ambx-soon--dark p {
	color: rgba(255,255,255,.7);
}

.hp-ambx-soon--light h3 {
	color: var(--a-ink);
}

.hp-ambx-soon--light p {
	color: var(--a-muted);
}

/* 6. WRITTEN */

.hp-ambx-reads {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 24px;
}

.hp-ambx-read {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(26,11,11,.07);
	border-radius: 18px;
	color: inherit;
	text-decoration: none;
	transition: transform .3s,box-shadow .3s,border-color .3s;
}

.hp-ambx-read:hover {
	color: inherit;
	transform: translateY(-5px);
	border-color: rgba(225,13,13,.2);
	box-shadow: 0 20px 42px rgba(26,11,11,.08);
}

.hp-ambx-read__media {
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--a-mist);
}

.hp-ambx-read__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}

.hp-ambx-read:hover .hp-ambx-read__media img {
	transform: scale(1.04);
}

.hp-ambx-read__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,rgba(225,13,13,.1),rgba(255,75,43,.05));
}

.hp-ambx-read__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
}

.hp-ambx-read__body h3 {
	margin: 0;
	color: var(--a-ink);
	font: 700 19px/1.3 var(--a-head);
	transition: color .2s;
}

.hp-ambx-read:hover .hp-ambx-read__body h3 {
	color: var(--a-red);
}

.hp-ambx-read__body p {
	flex: 1;
	margin: 0;
	color: var(--a-muted);
	font: 400 14px/1.6 var(--a-body);
}

.hp-ambx-read__date {
	color: rgba(26,11,11,.45);
	font: 600 12px/1 var(--a-body);
	letter-spacing: .04em;
}

/* 7. BADGE */

.hp-ambx-badge {
	padding: clamp(64px,8vw,100px) 0;
	background: var(--a-mist);
}

.hp-ambx-badge__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(36px,7vw,90px);
	align-items: center;
}

.hp-ambx-badge__content h2 {
	margin: 0 0 14px;
	color: var(--a-ink);
	font: 800 clamp(32px,4vw,50px)/1.08 var(--a-head);
	letter-spacing: -.025em;
}

.hp-ambx-badge__content>p {
	margin: 0 0 26px;
	color: var(--a-muted);
	font: 400 16px/1.7 var(--a-body);
}

.hp-ambx-badgeform {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 460px;
	padding: 26px;
	background: #fff;
	border: 1px solid rgba(26,11,11,.07);
	border-radius: 20px;
	box-shadow: 0 24px 50px -36px rgba(26,11,11,.4);
}

.hp-ambx-badgeform label {
	color: rgba(26,11,11,.7);
	font: 700 12px/1.3 var(--a-body);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hp-ambx-badgeform input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
	padding: 13px 15px;
	border: 1px solid rgba(26,11,11,.14);
	border-radius: 10px;
	background: #fff;
	color: var(--a-ink);
	font: 400 15px/1.4 var(--a-body);
	transition: border-color .2s,box-shadow .2s;
}

.hp-ambx-badgeform input:focus {
	outline: none;
	border-color: var(--a-red);
	box-shadow: 0 0 0 3px rgba(225,13,13,.12);
}

.hp-ambx-badgeform .hp-ambx-btn {
	margin-top: 6px;
}

.hp-ambx-badgeform__note {
	margin: 8px 0 0;
	color: rgba(26,11,11,.5);
	font: 400 12px/1.5 var(--a-body);
}

.hp-ambx-badge__visual {
	display: flex;
	justify-content: center;
}

#hp-badge-canvas {
	display: block;
	width: min(440px, 100%);
	height: auto;
	aspect-ratio: 1;
	border-radius: 24px;
	box-shadow: 0 36px 70px -30px rgba(164, 0, 0, 0.55);
}

/* 8. FAQ */

.hp-ambx-faq-wrap {
	max-width: 820px;
}

.hp-ambx-faq {
	border-top: 1px solid rgba(26,11,11,.1);
}

.hp-ambx-faq__item {
	border-bottom: 1px solid rgba(26,11,11,.1);
}

.hp-ambx-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	color: var(--a-ink);
	font: 600 17px/1.4 var(--a-head);
	cursor: pointer;
	list-style: none;
	transition: color .2s;
}

.hp-ambx-faq__item summary::-webkit-details-marker {
	display: none;
}

.hp-ambx-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--a-red);
	font: 300 26px/1 var(--a-body);
	transition: transform .3s;
}

.hp-ambx-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.hp-ambx-faq__item[open] summary,
.hp-ambx-faq__item summary:hover {
	color: var(--a-red);
}

.hp-ambx-faq__item>div {
	padding: 0 4px 24px;
	color: rgba(26,11,11,.72);
	font: 400 15px/1.7 var(--a-body);
}

/* 9. APPLICATION */

.hp-ambx-form-sec {
	position: relative;
	overflow: hidden;
	padding: clamp(64px,8vw,110px) 0;
	background: var(--a-ink);
	color: #fff;
}

.hp-ambx-form-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 15% 25%,rgba(225,13,13,.26),transparent 38%),radial-gradient(circle at 85% 75%,rgba(255,75,43,.14),transparent 42%);
}

.hp-ambx-form-wrap {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: clamp(32px,5vw,64px);
	align-items: start;
}

.hp-ambx-form-side {
	position: sticky;
	top: 100px;
	padding-top: 12px;
}

.hp-ambx-form-side h2 {
	margin: 0 0 18px;
	color: #fff;
	font: 800 clamp(30px,3.5vw,44px)/1.08 var(--a-head);
	letter-spacing: -.025em;
}

.hp-ambx-form-side>p {
	margin: 0 0 28px;
	color: rgba(255,255,255,.7);
	font: 400 15px/1.65 var(--a-body);
}

.hp-ambx-form-side__list {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-ambx-form-side__list li {
	display: flex;
	gap: 10px;
	color: rgba(255,255,255,.8);
	font: 400 14px/1.5 var(--a-body);
}

.hp-ambx-form-side__list li span {
	flex: 0 0 auto;
	color: var(--a-flame);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.hp-ambx-form-card {
	padding: 40px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 24px;
	backdrop-filter: blur(10px);
}

/* FORM INTERNALS (markup comes from inc/ambassador.php) */

.hp-ambx-form-card .hp-amb-notice {
	margin-bottom: 24px;
	padding: 16px 20px;
	border-radius: 12px;
	font: 400 14px/1.55 var(--a-body);
}

.hp-ambx-form-card .hp-amb-notice--ok {
	background: rgba(46,200,100,.12);
	border: 1px solid rgba(46,200,100,.3);
	color: #b6ffcc;
}

.hp-ambx-form-card .hp-amb-notice--err {
	background: rgba(225,13,13,.15);
	border: 1px solid rgba(225,13,13,.4);
	color: #ffc9c9;
}

.hp-ambx-form-card .hp-amb-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 8px;
	margin-bottom: 40px;
}

.hp-ambx-form-card .hp-amb-step-tab {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px 20px;
	color: rgba(255,255,255,.4);
	font: 600 11px/1 var(--a-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: color .3s;
	cursor: default;
}

.hp-ambx-form-card .hp-amb-step-tab.is-active,
.hp-ambx-form-card .hp-amb-step-tab.is-done {
	color: #fff;
	cursor: pointer;
}

.hp-ambx-form-card .hp-amb-step-tab__n {
	display: grid;
	flex: 0 0 26px;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: rgba(255,255,255,.6);
	font-size: 12px;
	font-weight: 700;
	transition: background .3s,color .3s;
}

.hp-ambx-form-card .hp-amb-step-tab.is-active .hp-amb-step-tab__n,
.hp-ambx-form-card .hp-amb-step-tab.is-done .hp-amb-step-tab__n {
	background: var(--a-red);
	color: #fff;
}

.hp-ambx-form-card .hp-amb-progress {
	position: absolute;
	inset: auto 0 0 0;
	grid-column: 1/-1;
	height: 3px;
	overflow: hidden;
	background: rgba(255,255,255,.07);
	border-radius: 3px;
}

.hp-ambx-form-card .hp-amb-progress__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg,var(--a-red),var(--a-flame));
	border-radius: 3px;
	transition: width .4s cubic-bezier(.4,0,.2,1);
}

.hp-ambx-form-card .hp-amb-step {
	display: none;
	animation: hp-amb-fadein .4s ease-out;
}

.hp-ambx-form-card .hp-amb-step.is-active {
	display: block;
}

@keyframes hp-amb-fadein {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hp-ambx-form-card .hp-amb-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.hp-ambx-form-card .hp-amb-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.hp-ambx-form-card .hp-amb-field--full {
	grid-column: 1/-1;
}

.hp-ambx-form-card .hp-amb-label {
	margin: 0;
	color: rgba(255,255,255,.75);
	font: 600 12px/1.3 var(--a-body);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hp-ambx-form-card .hp-amb-req {
	color: var(--a-flame);
	font-weight: 700;
}

.hp-ambx-form-card .hp-amb-field input[type=text],
.hp-ambx-form-card .hp-amb-field input[type=email],
.hp-ambx-form-card .hp-amb-field input[type=tel],
.hp-ambx-form-card .hp-amb-field input[type=url],
.hp-ambx-form-card .hp-amb-field input[type=number],
.hp-ambx-form-card .hp-amb-field input[type=date],
.hp-ambx-form-card .hp-amb-field textarea,
.hp-ambx-form-card .hp-amb-field select {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px;
	outline: none;
	background: rgba(0,0,0,.3);
	color: #fff;
	font: 400 15px/1.4 var(--a-body);
	transition: border-color .2s,background .2s,box-shadow .2s;
}

.hp-ambx-form-card .hp-amb-field textarea {
	min-height: 120px;
	resize: vertical;
}

.hp-ambx-form-card .hp-amb-field input:focus,
.hp-ambx-form-card .hp-amb-field textarea:focus,
.hp-ambx-form-card .hp-amb-field select:focus {
	border-color: var(--a-red);
	background: rgba(0,0,0,.4);
	box-shadow: 0 0 0 3px rgba(225,13,13,.12);
}

.hp-ambx-form-card .hp-amb-field .is-invalid {
	border-color: #ff6b6b;
	background: rgba(255,107,107,.07);
}

.hp-ambx-form-card .hp-amb-field ::placeholder {
	color: rgba(255,255,255,.32);
}

.hp-ambx-form-card .hp-amb-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.hp-ambx-form-card .hp-amb-field select option {
	background: var(--a-ink);
	color: #fff;
}

.hp-ambx-form-card .hp-amb-help {
	margin: 0;
	color: rgba(255,255,255,.55);
	font: 400 12px/1.5 var(--a-body);
}

.hp-ambx-form-card .hp-amb-radios,
.hp-ambx-form-card .hp-amb-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hp-ambx-form-card .hp-amb-radio,
.hp-ambx-form-card .hp-amb-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 10px;
	background: rgba(0,0,0,.2);
	color: rgba(255,255,255,.88);
	font: 400 14px/1.4 var(--a-body);
	cursor: pointer;
	transition: border-color .15s,background .15s;
}

.hp-ambx-form-card .hp-amb-radio:hover,
.hp-ambx-form-card .hp-amb-check:hover {
	border-color: rgba(225,13,13,.45);
	background: rgba(0,0,0,.3);
}

.hp-ambx-form-card .hp-amb-radio input,
.hp-ambx-form-card .hp-amb-check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--a-red);
}

.hp-ambx-form-card .hp-amb-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid rgba(225,13,13,.25);
	border-radius: 12px;
	background: rgba(225,13,13,.09);
	color: rgba(255,255,255,.92);
	font: 400 14px/1.5 var(--a-body);
	cursor: pointer;
}

.hp-ambx-form-card .hp-amb-consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--a-red);
}

.hp-ambx-form-card .hp-amb-file {
	position: relative;
}

.hp-ambx-form-card .hp-amb-file input[type=file] {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.hp-ambx-form-card .hp-amb-file__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 26px 20px;
	border: 2px dashed rgba(255,255,255,.18);
	border-radius: 12px;
	background: rgba(0,0,0,.25);
	text-align: center;
	transition: border-color .2s,background .2s;
}

.hp-ambx-form-card .hp-amb-file:hover .hp-amb-file__drop {
	border-color: var(--a-red);
	background: rgba(225,13,13,.08);
}

.hp-ambx-form-card .hp-amb-file__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(225,13,13,.18);
	color: var(--a-flame);
}

.hp-ambx-form-card .hp-amb-file__icon svg {
	width: 20px;
	height: 20px;
}

.hp-ambx-form-card .hp-amb-file__text {
	color: rgba(255,255,255,.88);
	font-size: 14px;
}

.hp-ambx-form-card .hp-amb-file__text strong {
	color: var(--a-flame);
}

.hp-ambx-form-card .hp-amb-file__meta {
	color: rgba(255,255,255,.45);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hp-ambx-form-card .hp-amb-file__picked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid rgba(46,200,100,.3);
	border-radius: 10px;
	background: rgba(46,200,100,.1);
	color: #b6ffcc;
	font-size: 13px;
}

.hp-ambx-form-card .hp-amb-file__picked[hidden] {
	display: none;
}

.hp-ambx-form-card .hp-amb-file__picked button {
	padding: 4px 8px;
	border: 0;
	background: transparent;
	color: #ff8a8a;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.hp-ambx-form-card .hp-amb-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.09);
}

.hp-ambx-form-card .hp-amb-nav .hp-btn:only-child {
	margin-left: auto;
}

.hp-ambx-form-card .hp-amb-form .hp-btn,
.hp-ambx-form-card .hp-amb-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 0;
	border-radius: 10px;
	font: 700 14px/1 var(--a-body);
	text-decoration: none;
	cursor: pointer;
	transition: background .2s,color .2s,transform .2s,box-shadow .2s;
}

.hp-ambx-form-card .hp-amb-form .hp-btn--primary,
.hp-ambx-form-card .hp-amb-submit {
	background: var(--a-red);
	color: #fff;
	box-shadow: 0 8px 20px rgba(225,13,13,.28);
}

.hp-ambx-form-card .hp-amb-form .hp-btn--primary:hover,
.hp-ambx-form-card .hp-amb-submit:hover {
	background: var(--a-red-dark);
	color: #fff;
	transform: translateY(-2px);
}

.hp-ambx-form-card .hp-amb-form .hp-btn--ghost {
	background: transparent;
	color: rgba(255,255,255,.82);
	border: 1px solid rgba(255,255,255,.18);
	box-shadow: none;
}

.hp-ambx-form-card .hp-amb-form .hp-btn--ghost:hover {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.32);
	color: #fff;
	transform: none;
}

.hp-ambx-form-card .hp-amb-submit {
	width: 100%;
	padding: 16px 32px;
	font-size: 15px;
}

/* FOCUS */

.hp-amb a:focus-visible,
.hp-amb button:focus-visible,
.hp-amb summary:focus-visible,
.hp-amb input:focus-visible {
	outline: 3px solid var(--a-red);
	outline-offset: 3px;
}

.hp-ambx-band a:focus-visible,
.hp-ambx-vsec a:focus-visible,
.hp-ambx-form-sec :focus-visible {
	outline-color: #fff;
}

/* RESPONSIVE */

@media (max-width:1100px) {
	.hp-ambx-benefits-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	.hp-ambx-qr__grid {
		grid-template-columns: 1fr;
	}
	.hp-ambx-qr__lead {
		max-width: 52ch;
	}
	.hp-ambx-vids,
	.hp-ambx-ghosts {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	.hp-ambx-reads {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	.hp-ambx-ghosts--3 {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	.hp-ambx-ghosts--3 .hp-ambx-ghost:nth-child(3) {
		display: none;
	}
}

@media (max-width:900px) {
	.hp-amb .hp-wrap {
		width: min(100% - 32px,760px);
	}
	.hp-ambx-hero__inner {
		grid-template-columns: 1fr;
	}
	.hp-ambx-hero__visual {
		order: -1;
	}
	.hp-ambx-collage {
		max-width: 420px;
	}
	.hp-ambx-hero__copy {
		text-align: center;
	}
	.hp-ambx-hero__actions,
	.hp-ambx-chips {
		justify-content: center;
	}
	.hp-ambx-form-wrap {
		grid-template-columns: 1fr;
	}
	.hp-ambx-form-side {
		position: static;
	}
	.hp-ambx-form-card {
		padding: 30px 24px;
	}
	.hp-ambx-badge__inner {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.hp-ambx-badge__content {
		text-align: center;
	}
	.hp-ambx-badgeform {
		margin-inline: auto;
		text-align: left;
	}
	.hp-ambx-badge__visual {
		order: -1;
	}
	#hp-badge-canvas {
		width: min(320px,100%);
	}
}

@media (max-width:720px) {
	.hp-ambx-benefits-grid {
		grid-template-columns: 1fr;
	}
	.hp-ambx-benefit-card--wide {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.hp-ambx-benefit-card--wide .hp-ambx-benefit-card__top {
		margin-bottom: 22px;
	}
	.hp-ambx-qr__ctrl {
		flex-wrap: wrap;
	}
	.hp-ambx-qr__bar {
		order: 3;
		flex-basis: 100%;
	}
	.hp-ambx-qr__btns {
		margin-left: auto;
	}
	.hp-ambx-reads {
		grid-template-columns: 1fr;
	}
	.hp-ambx-vids,
	.hp-ambx-ghosts {
		gap: 14px;
	}
	.hp-ambx-vid__meta {
		padding: 36px 13px 13px;
	}
	.hp-ambx-vid__meta strong {
		font-size: 14px;
	}
	.hp-ambx-portrait figcaption {
		opacity: 1;
		padding: 34px 10px 10px;
	}
	.hp-ambx-faq__item summary {
		padding: 20px 2px;
		font-size: 16px;
	}
	.hp-ambx-form-card {
		padding: 24px 18px;
	}
}

@media (max-width:640px) {
	.hp-amb .hp-wrap {
		width: calc(100% - 28px);
	}
	.hp-ambx-secH {
		margin-bottom: 36px;
	}
	.hp-ambx-secH p {
		font-size: 15px;
	}
	.hp-ambx-hero__actions .hp-ambx-btn {
		width: 100%;
	}
	.hp-ambx-pill {
		padding: 9px 13px;
		font-size: 13px;
	}
	.hp-ambx-form-card .hp-amb-fields {
		grid-template-columns: 1fr;
	}
	.hp-ambx-form-card .hp-amb-step-tab__l {
		display: none;
	}
	.hp-ambx-form-card .hp-amb-step-tab {
		justify-content: center;
	}
	.hp-ambx-form-card .hp-amb-nav {
		flex-direction: column;
	}
	.hp-ambx-form-card .hp-amb-nav .hp-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width:480px) {
	.hp-ambx-vids,
	.hp-ambx-ghosts {
		grid-template-columns: 1fr;
	}
	.hp-ambx-vid,
	.hp-ambx-ghost {
		aspect-ratio: 4/5;
	}
	.hp-ambx-ghost--wide {
		aspect-ratio: 16/10;
	}
}

/* REDUCED MOTION */

@media (prefers-reduced-motion:reduce) {
	.hp-amb *,
	.hp-amb *::before,
	.hp-amb *::after {
		animation-duration: .01ms!important;
		animation-iteration-count: 1!important;
		scroll-behavior: auto!important;
		transition-duration: .01ms!important;
	}
}


/* BADGE REQUEST FORM */

.hp-ambx-badgeform__photo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.hp-ambx-badgeform input[type="file"] {
	flex: 1 1 220px;
	margin-bottom: 0;
	padding: 10px 12px;
	border-style: dashed;
	background: var(--a-mist);
	font-size: 14px;
	cursor: pointer;
}

.hp-ambx-badgeform__remove {
	padding: 8px 14px;
	border: 1px solid rgba(26, 11, 11, 0.16);
	border-radius: 999px;
	background: #fff;
	color: var(--a-red);
	font: 700 12px/1 var(--a-body);
	cursor: pointer;
}

.hp-ambx-badgeform__remove:hover {
	border-color: var(--a-red);
}

.hp-ambx-badgeform__remove[hidden],
.hp-ambx-badgedone[hidden],
.hp-ambx-badgeform[hidden] {
	display: none;
}

/* Honeypot: hidden from people, visible to bots */

.hp-ambx-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hp-ambx-badgeform__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 8px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
}

.hp-ambx-badgeform__consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	padding: 0;
	accent-color: var(--a-red);
}

.hp-ambx-badgeform__status {
	min-height: 1.3em;
	margin: 6px 0 0;
	color: #1f7a34;
	font: 600 13px/1.4 var(--a-body);
}

.hp-ambx-badgeform__status.is-error {
	color: #b3262d;
}

.hp-ambx-badge__visual {
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.hp-ambx-badge__caption {
	margin: 0;
	color: rgba(26, 11, 11, 0.55);
	font: 500 13px/1.5 var(--a-body);
	text-align: center;
}

/* Success panel */

.hp-ambx-badgedone {
	max-width: 460px;
	padding: 30px;
	background: #fff;
	border: 1px solid rgba(31, 122, 52, 0.25);
	border-radius: 20px;
	text-align: left;
	box-shadow: 0 24px 50px -36px rgba(26, 11, 11, 0.4);
}

.hp-ambx-badgedone__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: #eef9f0;
	color: #1f7a34;
	font-size: 22px;
	font-weight: 800;
}

.hp-ambx-badgedone h3 {
	margin: 0 0 8px;
	color: var(--a-ink);
	font: 700 22px/1.3 var(--a-head);
}

.hp-ambx-badgedone p {
	margin: 0;
	color: var(--a-muted);
	font: 400 15px/1.65 var(--a-body);
}


/* =========================================================================
   v5 additions: moving campus rows + badge photo angle guide
   ========================================================================= */

/* Campus rows. Static and wrapped by default; the script adds .is-live to move them. */
.hp-ambx-campus {
	overflow: hidden;
}

.hp-ambx-mq {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 3vw, 32px);
	margin-top: 8px;
}

.hp-ambx-mq__row {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hp-ambx-mq__track {
	display: flex;
	align-items: center;
	width: max-content;
	max-width: none;
	will-change: transform;
}

.hp-ambx-mq__set {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
	padding: 0 8px;
}

/* Static fallback: wrap and centre inside the page width. */
.hp-ambx-mq:not(.is-live) .hp-ambx-mq__track {
	width: 100%;
	justify-content: center;
}

.hp-ambx-mq:not(.is-live) .hp-ambx-mq__set {
	max-width: 1040px;
}

/* Live marquee: one long line, soft fade on both edges. */
.hp-ambx-mq.is-live .hp-ambx-mq__set {
	flex-wrap: nowrap;
	flex: 0 0 auto;
	justify-content: flex-start;
	gap: 16px;
	padding: 0 16px 0 0;
}

.hp-ambx-mq.is-live .hp-ambx-mq__row {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.hp-ambx-mq__item {
	flex: 0 0 auto;
	padding: 14px 32px;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	color: var(--a-ink);
	font: 500 16px/1.25 var(--a-body);
	white-space: nowrap;
	cursor: default;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.hp-ambx-mq__item:hover {
	background: var(--a-ink);
	border-color: var(--a-ink);
	color: #fff;
	transform: translateY(-2px);
}

.hp-ambx-mq__spark {
	flex: 0 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #febe10;
	font-size: 22px;
	line-height: 1;
}

/* The decorative spark is noise when names wrap, so only show it in live mode. */
.hp-ambx-mq:not(.is-live) .hp-ambx-mq__spark {
	display: none;
}

@media (max-width: 768px) {
	.hp-ambx-mq__item {
		padding: 11px 20px;
		font-size: 13px;
	}

	.hp-ambx-mq__spark {
		flex-basis: 16px;
		width: 16px;
		height: 16px;
		font-size: 17px;
	}
}

/* Badge photo angle guide */
.hp-ambx-shot {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 10px 0 4px;
	padding: 14px 16px;
	background: rgba(225, 13, 13, .06);
	border: 1px dashed rgba(225, 13, 13, .35);
	border-radius: 14px;
	color: var(--a-ink);
}

.hp-ambx-shot__art {
	flex: 0 0 84px;
	color: var(--a-red);
}

.hp-ambx-shot__txt strong {
	display: block;
	margin-bottom: 4px;
	font: 700 13px/1.3 var(--a-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--a-red);
}

.hp-ambx-shot__txt ul {
	margin: 0;
	padding-left: 18px;
	font: 400 13px/1.55 var(--a-body);
}

@media (max-width: 480px) {
	.hp-ambx-shot {
		flex-direction: column;
	}
}