/* ============================================================
   CROSS-BROWSER BASELINE
   ============================================================ */

/* Universal box-sizing — predictable widths in Safari, Firefox,
   Chrome and Opera */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Prevent iOS Safari from auto-scaling fonts on rotation */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: only light;
}

body {
	margin: 0;
	padding: 0;
	/* Matches card colour — prevents a white flash between sections */
	background-color: #000000;
	/* Stop horizontal overflow / rogue scrollbar on all browsers */
	overflow-x: hidden;
}

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
	--border-curve: 20px;
	--darkgrey: #1b1b1b;
	--black: #000000;
	--white: #ffffff;
	--video-card-poster-alpha: 0.45;
	--video-card-poster-shadow: 0.5;
	--grayscale-percent: 90%;
	--gradient-start: #3b82f6;
	--gradient-mid: #ec4899;
	--gradient-end: #f59e0b;
	--expandable-padding: 0 0 48px 0;
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-size: 1rem;
	font-family: "Bai Jamjuree", sans-serif;
	font-weight: 600;
	font-style: normal;
}

/* Responsive images — max-width prevents overflow on narrow viewports.
   logo-lockup and client-icon images have specific overrides below.   */
img {
	max-width: 100%;
	height: auto;
	-webkit-user-select: none;
	user-select: none;
}

a:link    { color: var(--white); text-decoration: none; }
a:hover   { text-decoration: underline; }
a:visited { color: var(--white); }

p {
	font-size: 0.84rem;
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.h2-arvo {
	font-size: 1rem;
	font-family: "Arvo", serif;
	font-weight: 100;
	font-style: normal;
}

.p-body-arvo {
	font-size: 0.82rem;
	font-family: "Arvo", serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}

.p-contact-info {
	font-size: 0.9rem;
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	line-height: 1.38;
}

.p-panel-body {
	font-size: 0.8rem;
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

.spacer { margin-bottom: 40%; }

/* ============================================================
   MODEL VIEWER
   ============================================================ */

/* model-viewer is a custom element. Giving it display:block stops
   Safari and Firefox from treating it as inline (zero height).   */
model-viewer {
	display: block;
	width: 100%;
	height: 43rem;
	--poster-color: transparent; /* suppress white box before model loads */
}

.model { height: 100%; width: auto; }

/* ============================================================
   MAIN HEADER
   ============================================================ */

.main-header-background {
	background-image: url("/images/backgrounds/abstract_background_06b.jpg");
	/* "fixed" causes scroll-jank on iOS Safari; "scroll" is safe everywhere */
	background-attachment: scroll;
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

.contact-info {
	padding: 20px;
	overflow-y: hidden;
}

/* ============================================================
   IFRAME — AI CHAT
   ============================================================ */

.ai-chat-frame {
	width: 88%;
	border: none;
	background-color: transparent; /* "none" is not a valid color value */
	padding-top: 40px;
	-webkit-overflow-scrolling: touch; /* momentum scroll on iOS Safari */
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.section-break-wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	width: 100%;
	height: 0.75rem;
}

/* ============================================================
   EXPANDABLE CARDS — CHECKBOX MECHANISM
   ============================================================ */

.card-checkbox { display: none; }

/* Collapsed state */
.expandable-card {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	position: relative;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	background-color: var(--darkgrey);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--white);
	border-radius: var(--border-curve);
	width: calc(100vw - 40px);
	height: 250px;
	max-height: 250px;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	cursor: default;
	overflow: hidden;
}

.expandable-card:hover { filter: none; }

.expandable-card h2 { font-size: 1.5rem; margin-bottom: 1rem; }

/* Dark overlay on card background image */
.expandable-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: var(--border-curve);
	z-index: -1;
	-webkit-transition: background-color 0.6s ease-in-out;
	transition: background-color 0.6s ease-in-out;
}

/* EXPANDED STATE
   "fit-content" needs a -webkit-fit-content fallback in older Safari and
   is unsupported in IE / legacy Edge. "height:auto + max-height:none"
   achieves the same result universally.                               */
.card-checkbox:checked + .expandable-card {
	width: calc(100vw - 40px);
	max-width: 600px;
	height: auto;
	max-height: none;
	overflow: visible;
	filter: none;
}

.card-checkbox:checked + .expandable-card model-viewer {
	height: 400px;
}

.card-checkbox:checked + .expandable-card::before {
	background-image: linear-gradient(to top, var(--darkgrey), var(--black));
	opacity: 0.95;
	background-blend-mode: saturation;
	background-color: var(--darkgrey);
}

/* Rotate + to x when card is open */
.card-checkbox:checked + .expandable-card .toggle-icon::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	opacity: 0;
}

/* ============================================================
   CARD CONTENT — HIDDEN / SHOWN
   ============================================================ */

.card-content {
	opacity: 0;
	visibility: hidden;
	max-height: 0;
	padding-bottom: 0;
	overflow: auto;
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* IE / old Edge */
	border-radius: var(--border-curve);
	-webkit-overflow-scrolling: touch; /* iOS Safari momentum */
}

/* Chrome / Safari / Opera scrollbar hide */
.card-content::-webkit-scrollbar { display: none; width: 0; height: 0; }

.card-checkbox:checked + .expandable-card .card-content {
	opacity: 1;
	visibility: visible;
	max-height: none; /* universally supported; fit-content is not */
}

/* ============================================================
   TOGGLE ICON
   ============================================================ */

.toggle-icon {
	position: absolute;
	top: 0; right: 0;
	width: 40px; height: 40px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.toggle-icon::before,
.toggle-icon::after {
	content: '';
	position: absolute;
	background-color: white;
	-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.toggle-icon::before { width: 60%; height: 2px; }
.toggle-icon::after  { width: 2px; height: 60%; }

.toggle-icon:hover { background-color: rgba(255,255,255,0.4); }

.toggle-icon--dark       { background-color: grey; }
.toggle-icon--dark:hover { background-color: rgba(128,128,128,0.4); }

/* ============================================================
   CARD BACKGROUND VARIANTS
   ============================================================ */

.expandable-card--clean {
	background-color: var(--white);
	color: var(--darkgrey);
	border: 0.1rem solid var(--white);
	border-radius: var(--border-curve);
	filter: none;
	padding: var(--expandable-padding);
}

.expandable-card--ident {
	background-image: url('/images/backgrounds/abstract_background_06b.jpg');
	background-color: var(--darkgrey);
	color: var(--white);
	border-radius: var(--border-curve);
	-webkit-justify-content: center; justify-content: center;
	-webkit-align-items: center;     align-items: center;
	background-size: cover;
	background-position: bottom;
	background-attachment: scroll;
	padding: 24px 0;
}

.expandable-card--hero {
	background-color: white;
	color: var(--darkgrey);
	border: 0.1rem solid white;
	border-radius: var(--border-curve);
	filter: none;
	z-index: 1;
	padding: var(--expandable-padding);
}

.expandable-card--instructions {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.75)), url('/images/backgrounds/abstract_background_05b.jpg');
	background-size: cover;
	background-attachment: scroll;
	padding: var(--expandable-padding);
}

.expandable-card--astronaut {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.95)), url('/images/backgrounds/lucybear_astronaut.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--astronaut:hover {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.25)), url('/images/backgrounds/lucybear_astronaut.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--partnerships {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.95)), url('/images/backgrounds/high_five_cartoon.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--partnerships:hover {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.25)), url('/images/backgrounds/high_five_cartoon.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--tldr {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.95)), url('/images/backgrounds/old-french-newspaper-top-view.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--tldr:hover {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.25)), url('/images/backgrounds/old-french-newspaper-top-view.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--logogallery {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.95)), url('/images/cards/ld_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--logogallery:hover {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(27,27,27,0.25)), url('/images/cards/ld_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-chubb {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/chubb_usopen_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-chubb:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/chubb_usopen_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-rockies {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/rockies_card_cover.jpg');
	background-repeat: repeat;
	background-color: #340070;
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-rockies:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/rockies_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-spritedj {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/sprite_dj_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-spritedj:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/sprite_dj_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-usaaqbqr {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/usaa_qbqr_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-usaaqbqr:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/usaa_qbqr_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-dolphinsar {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/dolphins_ar_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-dolphinsar:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/dolphins_ar_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-titansar {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/titans_ar_card_cover_2.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-titansar:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/titans_ar_card_cover_2.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-dynamodashar {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/bobble_buddy_ar_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-dynamodashar:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/bobble_buddy_ar_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-columbialionssynq {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/columbia_synq_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-columbialionssynq:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/columbia_synq_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-gogosqueezgesture {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/gogo_squeez_card_cover_3.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-gogosqueezgesture:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/gogo_squeez_card_cover_3.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-capitalonegesture {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/capital_one_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-capitalonegesture:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/capital_one_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-laclippersgesture {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/la_clippers_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-laclippersgesture:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/la_clippers_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-aflacsensor {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/aflac_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-aflacsensor:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/aflac_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-cbjsensor {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/cbj_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-cbjsensor:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/cbj_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-flyerstouch {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/flyers_card_cover_2.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-flyerstouch:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/flyers_card_cover_2.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-vikingsvr {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/videos/posters/Minnesota_Vikings_VR_QB.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-vikingsvr:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/videos/posters/Minnesota_Vikings_VR_QB.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

.expandable-card--video-hisensevpkgesture {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.95)), url('/images/cards/hisense_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}
.expandable-card--video-hisensevpkgesture:hover {
	background-image: linear-gradient(rgba(0,0,0,var(--video-card-poster-alpha)), rgba(27,27,27,0.25)), url('/images/cards/hisense_card_cover.jpg');
	z-index: 1; padding: var(--expandable-padding);
}

/* ============================================================
   FONT SCALE
   ============================================================ */

.p-title         { font-size: 1.5rem; padding: 0; margin: 0; }
.p-title-arvo    { font-size: 1.5rem; font-family: "Arvo", serif; font-weight: 200; font-style: normal; padding: 0; margin: 0; }
.p-title-smaller { font-size: 1rem; font-optical-sizing: auto; }

.p-instructions-special {
	font-size: 0.5rem;
	font-family: "Sixtyfour", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "BLED" 0, "SCAN" 0;
	margin-top: 4rem;
}

sup {
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 0.7rem;
	font-style: normal;
	line-height: 1rem;
	overflow-wrap: anywhere;
}

.text-title-big-arvo  { font-size: 10rem; font-family: "Arvo", serif; font-weight: 400; color: var(--white); }
.text-title-small-arvo { font-size: 7rem; font-family: "Arvo", serif; font-weight: 400; }
.text-small-arvo       { font-size: 1rem; font-family: "Arvo", serif; font-weight: 200; }

.text-title-big    { font-size: 2rem;  font-family: "Bai Jamjuree", sans-serif; font-weight: 600; line-height: 1.3; }
.text-title-light  { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 400; }
.text-title-small  { font-size: 1rem;   font-family: "Bai Jamjuree", sans-serif; font-weight: 600; }
.text-semibold     { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 600; }
.text-extra-light  { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 200; }
.text-light        { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 400; }
.text-medium       { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 500; }
.text-bold         { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 700; }

.text-extra-light-italic { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 200; font-style: italic; }
.text-light-italic       { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 300; font-style: italic; }
.text-regular-italic     { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 400; font-style: italic; }
.text-medium-italic      { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 500; font-style: italic; }
.text-semibold-italic    { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 600; font-style: italic; }
.text-bold-italic        { font-size: 0.8rem; font-family: "Bai Jamjuree", sans-serif; font-weight: 700; font-style: italic; }

/* ============================================================
   DIVIDER RULES
   ============================================================ */

.hr-title-container {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	width: 100%;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

.hr-title-container-padded {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	width: 100%;
	padding-top: 1rem; padding-left: 2rem; padding-bottom: 0.5rem;
}

.hr-title {
	/* white-space: nowrap is universally supported;
	   text-wrap: nowrap is a newer draft property not in all browsers */
	white-space: nowrap;
	-webkit-flex-shrink: 0; flex-shrink: 0;
}

.hr-title-rule { color: var(--darkgrey); border-color: var(--darkgrey); float: right; width: 100%; }

/* .hr-thin was referenced in HTML but previously undefined.
   White rule visible on all dark card backgrounds.           */
.hr-thin            { border-color: var(--white);    border-style: solid;  border-width: 0.05rem; margin: 0; }
.hr-thick-grey      { border-color: var(--darkgrey); border-style: solid;  border-width: 0.18rem; }
.hr-thin-grey       { border-color: var(--darkgrey); border-style: solid;  border-width: 0.05rem; }
.hr-thin-grey-dashed{ border-color: var(--darkgrey); border-style: dotted; border-width: 0.05rem; }
.hr-thin-white      { border-color: white;           border-style: solid;  border-width: 0.05rem; }
.hr-thick-white     { border-color: white;           border-style: solid;  border-width: 0.18rem; }
.hr-thin-white-dashed  { border-color: white; border-style: dashed; border-width: 0.05rem; }
.hr-thick-white-dashed { border-color: white; border-style: dashed; border-width: 0.1rem;  }

/* ============================================================
   LOGO LOCKUPS
   ============================================================ */

.logo-card {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	padding-bottom: 3rem;
}

.logo-lockup {
	display: -webkit-box; display: -webkit-flex; display: flex;
	width: 100%;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	margin-top: 0.3rem; margin-left: 0.6rem;
}

/* Override global img — these logos stay a fixed size */
.logo-lockup img {
	width: 2.5rem;
	max-width: 2.5rem;
	height: auto;
	margin-right: 0.5rem;
	-webkit-flex-shrink: 0; flex-shrink: 0;
}

.logo-lockup-tight {
	display: block;
	width: 6rem;
	padding: 1rem 3rem 1rem 1rem;
	text-align: center;
}

/* ============================================================
   VIDEO
   ============================================================ */

/* Ensure videos fill their container and scale responsively */
video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	background: #212526;
	background: linear-gradient(180deg, rgba(33,37,38,1) 0%, rgba(97,91,80,1) 100%);
	border-radius: 0 0 20px 20px;
}

.video-card { width: 100%; height: auto; }

.video-card-title {
	color: var(--white);
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: 0.8rem;
	font-style: normal;
	padding: 0.5rem 0rem 0.5rem 1rem;
	word-wrap: break-word;
}

.video-card-padding-header { padding: 24px; }
.video-card-padding-body   { padding: 0 24px; }

/* ============================================================
   CONTACT CARD WRAPPER
   ============================================================ */

.contact-card-wrapper {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
	color: var(--white);
	padding: 0.8rem;
	width: calc(100vw - 40px);
	/* Removed "max-height: fit-content" — not supported in Safari/IE */
	margin-top: 24px;
}

/* ============================================================
   CLIENT ICON
   ============================================================ */

.client-icon {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start;
	margin: 24px 0;
}

.client-icon img { max-width: 100%; height: auto; }

/* ============================================================
   XP / TICKER
   ============================================================ */

.xp-container {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-flex: auto; -webkit-flex: auto; flex: auto;
	position: relative;
	min-width: 100%;
	height: 1.55rem;
	-webkit-box-align: center;  -webkit-align-items: center;  align-items: center;
	-webkit-box-pack: center;   -webkit-justify-content: center; justify-content: center;
	border-radius: 999px;
	padding: 20px;
}

.xp-text         { color: var(--white); font-size: 4rem; }
.yearsHoursLarge { color: var(--white); font-size: 4rem; }
.yearsHoursSmall { color: var(--white); font-size: 1rem; }

.hmove {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-flex: auto; -webkit-flex: auto; flex: auto;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
}

.hitem {
	-webkit-flex-shrink: 0; flex-shrink: 0;
	margin: 0 0.5rem;
	font-size: 0.75rem;
	font-family: "Bai Jamjuree", sans-serif;
	font-weight: 600;
}

.hwrap { overflow: hidden; }

@-webkit-keyframes tickerh {
	0%   { -webkit-transform: translateX(100%);  transform: translateX(100%);  }
	100% { -webkit-transform: translateX(-200%); transform: translateX(-200%); }
}
@keyframes tickerh {
	0%   { transform: translateX(100%);  }
	100% { transform: translateX(-200%); }
}

.hmove {
	-webkit-animation: tickerh linear 20s infinite;
	animation:         tickerh linear 20s infinite;
}
.hmove:hover {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

/* ============================================================
   POPOUT
   ============================================================ */

.popout { margin-bottom: -5rem; }