* {
	margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --blue: rgba(0, 122, 255, 1);
  --lightlightgray: rgba(245, 245, 247, 1);
  --lightgray: rgba(242, 242, 247, 1);
  --black: #1d1d1f;
  --gray: rgba(110, 110, 115, 1);
  --border-radius-large: 28px;
  --border-radius-medium: 20px;
  --border-radius-small: 6px;
  --bg-white-to-gray: linear-gradient(180deg, #FFF 0%, #F7F7F7 100%);
  --bg-gray-to-white: linear-gradient(180deg, #F7F7F7 0%, #FFF 100%);
  --lr-padding-page: 5vw;
  --lr-padding-content: 32px;
}

.bg-white-to-gray {
	background: var(--bg-white-to-gray);
}

.bg-gray-to-white {
	background: var(--bg-gray-to-white);
}

.bg-gray {
	background: #F7F7F7;
}


@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html {
	padding: env(safe-area-inset);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
	color: white;
	text-decoration: none;
}

a:hover { 
	text-decoration: underline;
	cursor: pointer;
}

body { 
	font-family: Google Sans Flex, Inter, serif;
	-webkit-font-feature-settings: "cv11" 1;
  -moz-font-feature-settings: "cv11" 1;
  -o-font-feature-settings: "cv11" 1;
	font-feature-settings: "cv11" 1;
	color: var(--black);
	-webkit-font-feature-settings: "ss01" on;
	-moz-font-feature-settings: "ss01" on;
	-o-font-feature-settings: "ss01" on;
	font-feature-settings: "ss01" on;
}

button:focus { 
	outline: 0; 
}

h1 {
	font-size: 60px;
	font-weight: 750;
	line-height: 100%;
	margin: 0;
}

h2 {
	font-size: 48px;
	font-weight: 700;
	line-height: 100%;
	margin: 0;
}

h3 {
	font-size: 32px;
	font-weight: 700;
	line-height: 130%;
	margin: 0;
}

h4 {
	font-size: 26px;
	font-weight: 700;
	line-height: 120%;
	margin: 0;
}

h5 {

	font-size: 20px;
	font-weight: 700;
	line-height: 130%;
	margin: 0;
}

h6 {
	font-size: 22px;
	font-weight: 600;
	line-height: 130%;
	margin: 0;
}

p.large {
	font-size: 24px;
	font-weight: 500;
	line-height: 130%;
	margin: 0;
}

p.medium {
	font-size: 20px;
	font-weight: 500;
	line-height: 130%;
	margin: 0;
}

p.small {
	font-size: 14px;
	font-weight: 500;
	line-height: 120%;
	margin: 0;
}

.no-scroll {
	overflow: hidden;
}

.mobile-only {
	display: none;
}

.br {
	border-radius: var(--border-radius-large);
}

.cc {
	/* cc = content container */
	width: 100%;
	padding: 0 var(--lr-padding-page);
	position: relative;
}

.cci {
	/* cci = content container inside */
	margin: 0 32px;
}

.spacer {
	width: 100%;
	padding-top: 80px;
}


/* Header */
.fixed-header {
	position: fixed;
	top: 12px;
  left: 0;
  right: 0;
  padding: 0 calc(var(--lr-padding-page) + 12px);
  z-index: 1000;
}

.header {
  position: relative;
  width: 100%;
  padding: 8px 8px 8px calc(var(--lr-padding-content) - 12px);
  background: rgba(255, 255, 255, 1);
	backdrop-filter: blur(6px);
  border-radius: 99px;
  display: flex;
  justify-content: space-between;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	leading-trim: both;
	align-items: center;
/*	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);*/
}

button.blue {
	background-color: var(--blue);
	background-position: 12px center;
	background-repeat: no-repeat;
	background-size: 16px;
	border-radius: 99px;
	border: 0;
	color: white;
	cursor: pointer;
	font-family: Inter;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	leading-trim: both;
	line-height: 28px;
	height: 32px;
	padding-left: 36px;
	padding-right: 12px;
	text-edge: cap;
}

button.blue:hover {
	background-color: #3D82FF;
}

button.blue.contact {
	background-image: url(img/linkedin.svg);
}

/* Content */

:root {
	--header: 72px;
}

.hero2 {
  width: 100vw;                   /* start full‐viewport */
  height: calc(100vh - (2* var(--header)));
  margin: var(--header) auto 0 auto;
  border-radius: 0;               /* start square */
  background: url(img/lead-bg.png) center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  will-change: width, border-radius;
  overflow: hidden;

  background-image: url(img/lead-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1400px auto; /* ← lock the image at viewport width */ 
}

.hero2 .text {
  width: 50vw;                   
  height: 100%;
  background: url(img/lead-copy-2.png) 0 50%/contain no-repeat;

  will-change: width;
}


.hero {
	width: 100%;
	height: 680px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	display: flex;
	border-radius: var(--border-radius-large);
}

.hero.lead {
	background-image: url(img/lead-bg.png);
	margin: 64px 0 20px 0;
}

.hero.me {
	background-image: url(img/contact-photo.png);
}



/* intro */

.intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--Spacer-Height, 68px);
	align-self: stretch;
	padding: 32px 0;
}

.intro .top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 800px;
	gap: 28px;
	text-align: center;
}

.hiimhenry {
	background: linear-gradient(102deg, #33095F 0%, #5856D6 33%, #FF2D55 66%, #E77505 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 120%;
}

.intro .bottom {
	display: flex;
	align-items: flex-start;
	gap: 36px;
	justify-content: center;
}

.blahblah {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	flex: 1 0 0;
	width: 280px;
}

.blahblah .copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex: 1 0 0;
}

.blahblah .icon-1 {
	width: 62.993px;
	height: 50px;
	aspect-ratio: 62.99/50.00;
	background-image: url(img/intro-1.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.blahblah .icon-2 {
	width: 49.287px;
	height: 50px;
	aspect-ratio: 49.29/50.00;
	background-image: url(img/intro-2.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.blahblah .icon-3 {
	width: 54.661px;
	height: 50px;
	aspect-ratio: 54.66/50.00;
	background-image: url(img/intro-3.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.content-section-header {
	display: flex;
	padding: 20px var(--lr-padding-content);
	gap: 40px;
	justify-content: space-between;
	align-items: flex-end;
	align-self: stretch;
}

.content-section-header h2 {
	max-width: 520px;
}

.content-section-header .icon {
	width: 78px;
	height: 78px;
	aspect-ratio: 1/1;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.content-section-header .icon.designwins { background-image: url(img/section-header-icon-1.svg);}
.content-section-header .icon.ravereviews { background-image: url(img/section-header-icon-2.svg);}
.content-section-header .icon.goodlooks { background-image: url(img/section-header-icon-3.svg);}
.content-section-header .icon.letsbuild { background-image: url(img/section-header-icon-4.svg); transform: rotate(15deg);}



/* horizontal scroller */

.horizontal-scroll {
	display: flex;
	padding: 20px var(--lr-padding-page);
	align-items: flex-start;
	gap: 20px;
	align-self: stretch;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	 scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--lr-padding-page); 
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll-nav {
	width: 100%;
	display: flex;
	padding-top: 8px;
	padding-bottom: 12px;
	justify-content: flex-end;
	gap: 12px;
}

.horizontal-scroll-nav button {
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	padding: 0;
	margin: 0;
	outline: 0;
	border: 0;
	background-color: #fff;
	cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s, transform 0.1s;
  border-radius: 99px;
}

.horizontal-scroll-nav button.left {
	background-image: url(img/icon-left.svg);
}

.horizontal-scroll-nav button.right {
	background-image: url(img/icon-right.svg);
}

button.disabled {
	cursor: default;
	opacity: 0.25;
}


/* case studies */

.case {
	scroll-snap-align: start;
	flex-shrink: 0;
	width: 700px;
	height: 500px;
	background-color: gray;
	padding: 32px var(--lr-padding-content) 0 var(--lr-padding-content);
	display: flex;
	flex-direction: column;
	gap: 4px;
/*	border: 1px solid var(--Light-Grey, #F2F2F7);*/
	overflow: hidden;
	position: relative;
	border-radius: var(--border-radius-large);
	box-shadow: inset -10px 0 100px -5px rgba(0, 0, 0, 4%);
}

.case:hover {
	cursor: pointer;
}

.case h4 {
	max-width: 400px;
}

.case .locked {
	background-image: url(img/icon-lock.svg);
	width: 32px;
	height: 32px;
	background-size: cover;
	position: absolute;
	right: 24px;
	top: 24px;
}

.case.econsults {
	background: linear-gradient(102deg, #4CD964 0%, #5AC8FA 50%, #007AFF 100%);
	color: white;
}

.case.gfx {
	background: url(img/gfx-bg.svg), linear-gradient(142deg, #DFB2FF 7.81%, #F5E4F5 104.15%);
	background-repeat: repeat;
}

.case.sc {
	background: url(img/sc-bg.png);
	background-size: cover;
	background-position: center;
}

.case.ems {
	background: url(img/ems-bg.png);
	background-size: cover;
	background-position: center;
	color: white;
}

.case.fire {
	background: url(img/fire-bg.svg), linear-gradient(180deg, #F96 0%, #F5E9B6 100%);
	background-size: cover;
	background-position: center;
}


.case .thumbnail {
	width: 100%;
	height: 100%;
	margin-top: 24px;
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
/*	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 32%));*/
	border-radius: var(--border-radius-small);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
/*	box-shadow: inset 0px -10px 100px -5px rgba(0, 0, 0, 44%);*/
}

.case.econsults .thumbnail {
	background-image: url(screenshots/case-thumb-econsults.png);
}

.case.gfx .thumbnail {
	background-image: url(screenshots/case-thumb-gfx.png);
}

.case.sc .thumbnail {
	background-image: url(screenshots/case-thumb-sc.png);
}

.case.ems .thumbnail {
	background-image: url(screenshots/case-thumb-ems.png);
}

.case.fire .thumbnail {
	background-image: url(screenshots/case-thumb-fire.png);
}



/* reviews */
.review {
	scroll-snap-align: start;
	flex-shrink: 0;
	display: flex;
	width: 320px;
	height: 500px;
	padding: var(--lr-padding-content);
	align-items: flex-start;
	border-radius: var(--border-radius-large);
	background-color: gray;
	background: var(--Light-Grey, #F2F2F7);
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

.review .openquote {
	position: absolute;
	left: 20px;
}

.review h6 {
	padding-left: 12px;
}

.content-section-header span {
	background: linear-gradient(102deg, #33095F 0%, #5856D6 40%, #FF2D55 80%, #E77505 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.review .attribution {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	align-self: stretch;
}

.attribution p {
	color: var(--gray);
	width: 80%;
}

.attribution .image {
	background-size: cover;
	width: 40px;
	height: 40px;
	border-radius: 99px;
}

.image.quote-1 { background-image: url(img/quote-1.png); }
.image.quote-2 { background-image: url(img/quote-2.png); }
.image.quote-3 { background-image: url(img/quote-3.png); }
.image.quote-4 { background-image: url(img/quote-4.png); }
.image.quote-5 { background-image: url(img/quote-5.png); }
.image.quote-6 { background-image: url(img/quote-6.png); }
.image.quote-7 { background-image: url(img/quote-7.png); }



/* screenshots */

.screenshots {
	margin: 20px 0;
	padding: var(--lr-padding-content);
	gap: 12px;
	background: var(--Gradient, linear-gradient(180deg, #F96 0%, #FDF7EE 100%));
	display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1vw;
  width: 100%;
}

.screenshots .screenshot {
	aspect-ratio: 192/131;
	padding: 10px;
	border-radius: var(--border-radius-small);
	background-size: cover;
	background-repeat: no-repeat;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 4%));
}



/* contact */

.contact-copy {
	color: var(--gray);
	padding: 0 var(--lr-padding-content) 32px var(--lr-padding-content);
}

.contact-copy a {
	color: var(--blue);
	font-weight: 600;
}



/* copyright */

.copyright {
	align-items: center;
	align-self: stretch;
	color: var(--light-mode-gray-2, #A6A6A6);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	font-weight: 500;
	gap: 32px;
	height: 160px;
	justify-content: center;
	line-height: 120%;
	padding: 40px 100px;
}



/* Screenshots */

.analytics-1 { background-image: url('screenshots/Analytics-1.png'); }
.analytics-2 { background-image: url('screenshots/Analytics-2.png'); }
.analytics-3 { background-image: url('screenshots/Analytics-3.png'); }
.bh-1 { background-image: url('screenshots/BH-1.png'); }
.bh-2 { background-image: url('screenshots/BH-2.png'); }
.bh-3 { background-image: url('screenshots/BH-3.png'); }
.bh-4 { background-image: url('screenshots/BH-4.png'); }
.check-1 { background-image: url('screenshots/Checklists-1.png'); }
.check-2 { background-image: url('screenshots/Checklists-2.png'); }
.check-3 { background-image: url('screenshots/Checklists-Dashboards-2.png'); }
.check-4 { background-image: url('screenshots/Checklists-Dashboards-3.png'); }
.check-5 { background-image: url('screenshots/Checklists-Dashboards-1.png'); }
.check-6 { background-image: url('screenshots/Checklists-Mobile-3.png'); background-color: transparent; }
.dailylog-1 { background-image: url('screenshots/DailyLog-1.png'); }
.dailylog-2 { background-image: url('screenshots/DailyLog-2.png'); }
.ehr-1 { background-image: url('screenshots/EHR-1.png'); }
.ehr-2 { background-image: url('screenshots/EHR-2.png'); }
.ehr-3 { background-image: url('screenshots/EHR-3.png'); }
.ehr-4 { background-image: url('screenshots/EHR-4.png'); }
.econsults-1 { background-image: url('screenshots/econsults-1.png'); }
.econsults-2 { background-image: url('screenshots/econsults-2.png'); }
.econsults-3 { background-image: url('screenshots/econsults-3.png'); }
.econsults-4 { background-image: url('screenshots/econsults-4.png'); }
.econsults-5 { background-image: url('screenshots/econsults-5.png'); }
.gfx-1 { background-image: url('screenshots/gfx-1.png'); }
.gfx-2 { background-image: url('screenshots/gfx-2.png'); }
.gfx-3 { background-image: url('screenshots/gfx-3.png'); }
.internaltools-1 { background-image: url('screenshots/InternalTools-1.png'); }
.internaltools-2 { background-image: url('screenshots/InternalTools-2.png'); }
.internaltools-3 { background-image: url('screenshots/InternalTools-3.png'); }
.internaltools-4 { background-image: url('screenshots/InternalTools-4.png'); }
.login-1 { background-image: url('screenshots/LogInPage-1.png'); }
.login-2 { background-image: url('screenshots/LogInPage-2.png'); }
.login-3 { background-image: url('screenshots/LogInPage-3.png'); }
.personnel-1 { background-image: url('screenshots/Personnel-1.png'); }
.personnel-2 { background-image: url('screenshots/Personnel-2.png'); }
.personnel-3 { background-image: url('screenshots/Personnel-3.png'); }
.prop-1 { background-image: url('screenshots/Properties-1.png'); }
.prop-2 { background-image: url('screenshots/Properties-2.png'); }
.prop-3 { background-image: url('screenshots/Inspections-1.png'); }
.prop-4 { background-image: url('screenshots/Inspections-2.png'); }
.qm-1 { background-image: url('screenshots/QM-1.png'); }
.qm-2 { background-image: url('screenshots/QM-2.png'); }
.qm-3 { background-image: url('screenshots/QM-3.png'); }
.scheduling-1 { background-image: url('screenshots/scheduling-1.png'); }
.scheduling-2 { background-image: url('screenshots/scheduling-2.png'); }
.scheduling-3 { background-image: url('screenshots/scheduling-3.png'); }
.cloudhelp-1 { background-image: url('screenshots/cloudhelp-1.png'); }
.cloudhelp-2 { background-image: url('screenshots/cloudhelp-2.png'); }
.cloudhelp-3 { background-image: url('screenshots/cloudhelp-3.png'); }






/* lightboxes */

.overlay {
  backdrop-filter: blur(20px);
  background: rgba(0,0,0,0.6);
  height: 100%;
  left: 0;
  opacity: 0; 
  position: fixed;
  top: 0; 
  transition: opacity .3s ease;
  visibility: hidden;
  width: 100%; 
  z-index: 9999;
  overflow: scroll;
}

.overlay.active {
  opacity: 1; visibility: visible;
}

.overlay-content {
  position: relative;
  width: 90vw;
  max-width: 1000px;
  margin: 40px auto; 
  padding: 80px 60px 60px 60px;
  background: #fff;
  border-radius: var(--border-radius-large);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overlay-content h3 {
	max-width: 700px;
}

.overlay-content::-webkit-scrollbar { 
	display: none; 
}

.case-study-detail-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	overflow: hidden;
	margin-top: 32px;
}

.case-study-detail {
	padding: 48px 0 48px 48px;
	display: flex;
	flex-direction: column;
	gap:20px;
	background-color: var(--lightlightgray);
	border-radius: var(--border-radius-large);
}

.case-study-overview {
	font-size: 19px;
	font-weight: 500;
	color: var(--gray);
	padding-right: 48px;
}

.case-study-detail-content {
	display: flex;
	flex-direction: row;
	gap: 48px;
}

.case-study-detail-copy {
	font-size: 19px;
	font-weight: 500;
	leading-trim: both;
	text-edge: cap;
	line-height: 140%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%;
}

.case-study-detail-copy p {
	color: var(--gray);
}

.case-study-detail-copy p strong {
	color: var(--black);
}

.case-study-detail-image {
	background-position: top left;
	background-size: cover;
	width: 50%;
	overflow: visible;
	border-radius: 4px 0 0 4px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 25%));
	box-shadow: inset -10px 0 100px -5px rgba(0, 0, 0, 4%);
}

.case-study-locked {
	align-items: center;
	background-color: var(--lightlightgray);
	border-radius: var(--border-radius-large);
	color: var(--gray);
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 20px;
	padding: 52px 72px;
	text-align: center;
}

.case-study-locked .icon {
	height: 88px;
	width: 120px;
	background-image: url(img/icon-lock-folder.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.case-study-locked button {
	font-size: 18px;
	background-position: 16px center;
	background-size: 24px;
	line-height: 32px;
	height: 48px;
	padding-left: 52px;
	padding-right: 20px;
}

.close-btn {
	background-position: center;
	background-size: cover;
	background: url("img/icon-close.svg");
  border: none;
  cursor: pointer;
  height: 28px;
  position: absolute;
  right: 24px;
  top: 24px; 
  width: 28px;
}






/* Breakpoints */

@media all and (min-width: 1400px) {
	.hero2 { background-size: cover; }
}


@media all and (max-width: 1080px) {
	.bottom { flex-direction: column; }
	.blahblah, .blahblah .copy, .blahblah .copy h4 { width: auto; max-width: 600px; align-items: center; text-align: center; }
	.screenshots { grid-template-columns: repeat(4, 1fr); }
	.overlay-content { padding: 80px 48px 48px 48px; }
	.case-study-detail-content { flex-direction: column; align-items: center; }
	.case-study-detail-copy { width: 100%; }
	.case-study-detail { padding: 48px; }
	.case-study-overview { padding: 0; }
	.case-study-detail-image { 
		aspect-ratio: 192/131; 
		border-radius: var(--border-radius-small);
		box-shadow: none;
		max-height: 400px; 
		background-size: cover; 
		background-repeat: no-repeat; 
		background-position: top; 
		width: 100%;
	}
	.contain-on-mobile {
		background-size: contain;
	}
}


@media all and (max-width: 750px) {
	.blahblah, .blahblah .copy { max-width: 470px; }
	.case .thumbnail { 
		background-position: 
		top left; border-top-right-radius: 0;  
		background-size: 640px; 
/*		border-bottom-right-radius: calc(var(--border-radius-large)-10); */
		filter: none; 
	}
	.case { width:90%; padding-right: 0; overflow: hidden;}
	.case-study-detail { padding: 48px 36px; }
	
	.content-section-header .icon { height:60px; }
	.content-section-header, .contact-copy { padding-left: calc(var(--lr-padding-content)/2); padding-right: calc(var(--lr-padding-content)/2);}
	.hide-on-mobile { display: none; }
	.overlay-content { padding: 80px 24px 24px 24px; width: 100%; }
	.screenshots { grid-template-columns: repeat(3, 1fr); }
	h1 { font-size: 44px; }
	h2 { font-size: 32px; }
	h3 { font-size: 24px; }
	h4 { font-size: 20px; }
	h5 { font-size: 16px; }
	p.large { font-size: 20px; }
	p.medium { font-size: 16px; }
	:root {
		--lr-padding-page: 20px;
	}
	.hero2 { background-size: 1000px; }
}


@media all and (max-width: 500px) {
	.hide-at-500 { display: none; }
	.review { width: 90%; }
	.fixed-header { padding: 0; top: 0; }
	.header { border-radius: 0; padding-left: 20px; padding-right: 20px; }
	.overlay-content { padding: 80px 20px 20px 20px; }
}