*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {margin: 0; padding: 0;}
body {min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased;}
img, picture, video, canvas, svg {max-width: 100%; height: auto; display: block;}
input, button, textarea, select {font: inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
h1, h2, h3 {text-wrap: balance;}
a, button {font-family: inherit; text-decoration: none;}
div {position: relative;}
ul, li {margin: 0; padding: 0; list-style: none;}


body {
	font-family: var(--font-body);
	font-optical-sizing: auto;
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
	color: var(--dark);
  background: var(--white);
	letter-spacing: .02em;
	line-height: 1.6;
}

/*-------- DESIGN TOKENS --------*/


:root {
  --white: #ffffff;
  --light: #f6f6f6;
  --light-gray: #CCCCCC ;
  --dark-alt: #262626;
  --dark: #141213;
  --accent: #D4F013;
  --accent-hover: #C9E410;

  --font-head: "Source Serif 4", serif;
  --font-body: "Google Sans", Arial, sans-serif;

  --r: 4px;
  --ease: 300ms ease;
}


/*-------- LAYOUT --------*/

.full {
	padding: 0 6rem;
	width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 3rem;
}

.full.grid {
	padding-top: 10rem;
	padding-bottom: 10rem;
}

.grid-4-3 {
	grid-template-columns: 4fr 3fr;
}

/*Animations*/
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
  will-change: transform, opacity; /* Optimizes browser rendering performance */
}

.reveal.show {
  opacity: 1;
  transform: translateY(0px);
}


/*-------- UTILITIES --------*/

.pad-s {padding: 2rem;}
.pad-m {padding: 2.75rem;}

.round {border-radius: 4px;}

.bg-white {background-color: #FFFFFF; color: var(--dark);}
.bg-light {background-color: var(--light); color: var(--dark);}
.bg-dark {background-color: var(--dark); color: var(--light);}

.bg-gray {background-color: var(--dark-alt); color: var(--white);}

.text-gray {color: #999999;}
.text-center {text-align: center;}
.accent {color: var(--accent);}
.underline {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--accent);
	text-underline-offset: 10px;
}


/*-------- TYPE --------*/


h1, h2, h3, h4 {
	line-height: 1.1;
	margin-bottom: .4em;
}

h1, h2 {
	font-family: var(--font-head);
	font-size: 3.625rem;
	font-weight: 600;
	letter-spacing: -.03em;
}

h3 {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -.01em;
	margin-bottom: .6em;
}

.eyebrow {
	display: block;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 1.5em;
}

.text-l {font-size: 1.15rem;}
.text-m {font-size: 1rem;}
.text-s {font-size: .9rem;}

p + p {margin-top: 1.25rem;}


/*-------- LINKS + BUTTONS --------*/

a {
	text-decoration: none;
	color: var(--dark);
	font-weight: 700;
	transition: var(--ease);
}

.btn, button.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 700;
  padding: .5em 1em;
  margin-top: 1.5em;
  border: none;
  border-radius: var(--r);
  transition: var(--ease);
}

.btn-primary, button.btn-primary {
	color: var(--dark);
	background-color: var(--accent);
	min-height: 44px;
}

.btn:hover, button.btn:hover {
	background-color: var(--accent-hover);
	gap: 1rem;
}

.btn-secondary {
	min-height: 36px;
	padding: .25em .8em;
	border: 1px dashed #DDDDDD;
}


/*-------- NAVIGATION --------*/

.nav ul {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 72px;
}

.nav ul li a {
	font-weight: 400;
	border-radius: 20px;
	padding: .4rem 1.1rem;
	min-height: 36px;
	display: inline-flex;
  	align-items: center;
  	justify-content: center;
  	transition: var(--ease);
}

.nav ul li a:hover {
	background-color: #EEEEEE;
}

.nav ul li a.nav-cta {background-color: #EEEEEE;}
.nav ul li a.nav-cta:hover {background-color: var(--accent);}

/*-- Dropdown --*/

.nav-dropdown {position: relative;}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: .3rem;
  cursor: default;
  user-select: none;
}

.nav-dropdown-menu {
  position: absolute;
  left: 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--r);
  padding: 1rem;
  margin-top: .5rem;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ease);
  z-index: 1;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown-item {
  display: block;
  margin-top: .4rem;
  transition: all var(--ease);
}


/* Mobile Navigation */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 199;
  flex-direction: column;
  gap: .125rem;
}
.nav-mobile.open {display: flex;}

.nav-mobile-link {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--dark);
  padding: 1rem;
  border-bottom: 1px solid #DDDDDD;
  display: block;
}

.nav-mobile-link:hover {background: var(--light); }

.nav-mobile .btn {margin-top: 1.5rem; text-align: center;}


/*-------- HERO GRAPHIC --------*/

.service-page .hero {
    position: relative;
    overflow: hidden;
}
#hero-graphic {
    position: absolute;
    top: 0;
    right: -8vw;
    width: 55vw;
    height: 100%;
    pointer-events: none;
}
#hero-graphic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0.35;
}
@media (max-width: 768px) {
    .service-page .hero { overflow: visible; }
    #hero-graphic {
        position: relative;
        right: 0;
        width: 100%;
        height: auto;
        min-height: 220px;
    }
}


/*-------- HERO --------*/

.homepage .hero {
	background: url('images/hero-bg.png') right no-repeat;
}

.hero.grid {
	grid-template-columns: 3fr 2fr;
	padding-top: 7rem;
}

.hero h1 {
	font-size: 4.5rem;
}


/*-------- PROBLEM --------*/

.problem.full.grid {
	background: url('images/wavs-bg.svg') bottom no-repeat;
	background-size: 100% auto;
	background-color: var(--light);
	padding-bottom: 16rem;
}

.problem img {
	margin-bottom: 1.5rem;
}


/*-------- OUTCOMES --------*/

.outcomes.grid {
	grid-template-columns: 2fr 3fr;
}

.outcomes img {margin-top: 4rem;}

div.outcome {
	display: flex;
	gap: 2rem;
	background: var(--dark-alt);
	color: var(--white);
	border-radius: var(--r);
	padding: 2rem;
	margin-bottom: 2rem;
	transition: var(--ease);
}

div.outcome:hover {
	background-color: var(--white);
	color: var(--dark);
	cursor: default;
}

div.outcome svg {
	width: 58px;
	height: auto;
	flex-shrink: 0;
}

div.outcome:hover .svg-circle {
	fill: var(--accent);
	stroke: 0;
}
div.outcome:hover .svg-path {
	stroke: var(--dark);
	stroke-width: 2px;
}


/*-------- CAPABLITIES --------*/

.capabilities.grid {
	grid-template-columns: 2fr 4fr;
}

.border-dot {
	background-image: url('images/dotted.svg');
	background-repeat: repeat-x;
	background-position: 0 44px;
	padding-top: 5rem;
}

.super {
	color: #888888;
	font-size: .8rem;
	position: absolute;
	display: inline-block;
	inset: 14px auto auto 2rem;
}

.super.right {
	inset: 12px 2rem auto auto;
}


/*-------- INTERIOR PAGES --------*/

.service-page .full.grid, .footer.full.grid {
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.border-top {border-top: 1px dashed #BBBBBB;}

.service-page h2 {margin-bottom: 3rem;}

.service-overview.section-pad {
	padding-bottom: 0;
}

.service-overview div {
	background-color: var(--white);
	border-radius: var(--r);
	padding: 2.5rem;
	gap: 5rem;
	font-size: 1.2rem;
	color: var(--dark-alt);
}

.service-overview p + p {margin-top: 0;}

.how-it-works {
	padding-bottom: 7rem;}
.how-it-works img {
	margin-bottom: 1.2rem;
}

.checked-list li {
	background: url('images/i-check.svg') no-repeat;
	background-position-y: .5rem;
	padding: 0 0 0 2rem;
	margin: 0 0 1rem 0;
	vertical-align: middle;
}

.about img {
	margin-bottom: 3rem;
}

/*-------- FOOTER --------*/

.footer.border-top {border-top: 1px dashed #555555;}

.footer.grid {grid-template-columns: repeat(3, 1fr);}

.footer h4 {margin-bottom: 1rem;}

.footer ul li {
	color: #AAAAAA;
}

.footer a {
	color: var(--light);
	display: inline-block;
	text-decoration: none;
	font-weight: 400;
	padding: .6rem 0;
	color: #AAAAAA;
}

.footer a:hover {
	color: #FFFFFF;
}


/*-------- FORMS --------*/

.form {
	margin: 5rem 0;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form__group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.form__label {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--dark);
}
.form__label span {
  color: #999999;
  font-weight: 400;
}

.form__input,
.form__textarea {
  width: 100%;
  padding: .75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--dark);
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--r);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form__input:focus,
.form__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,115,42,.12);
}
.form__textarea { resize: vertical; min-height: 140px; }

.form__success {
  display: none;
  background: #EAF4B6;
  border: 1px solid #ACC501;
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  color: #4B5C0D;
  font-size: .9375rem;
  margin-top: 1rem;
}

.form-section .btn-secondary {
	margin: .5rem 0;
}


/*-------- CALENDLY STYLE OVERRIDES --------*/


div.b5DUopirRGtCo7WwEuHi {				/* data-booking-layout background color */
	background: none;
}

div.bBg9CNOlW2mi0kNJPd0J {				/* data-booking-page-wrapper - remove margins */
	margin-top: 0;
	margin-bottom: 0;
}




/*-------- RESPONSIVE STYLES --------*/

@media (max-width: 960px) {
	.full {padding: 0 2rem;}
  .grid {grid-template-columns: 1fr 1fr;}
  .footer.grid {grid-template-columns: 1fr 1fr;}
  .full.grid, .hero.full.grid {padding-top: 6rem; padding-bottom: 6rem;}
	.capabilities.grid, .hero.grid, .outcomes.grid, .form__row {grid-template-columns: 1fr;}
}

@media (max-width: 768px) {
  .nav ul {display: none;}
  .nav-hamburger {display: flex;}
  .grid, .outcomes.grid, .capabilities.grid, .hero.grid {grid-template-columns: 1fr;}
  .full.grid, .hero.full.grid, .problem.full.grid {padding-top: 4rem; padding-bottom: 4rem;}
  .pad-s, .pad-m, div.outcome {padding: 1.4rem;}
}

@media (max-width: 560px) {
	.full {padding: 0 1.2rem;}
  .footer.grid {grid-template-columns: 1fr;}
  .form__row {grid-template-columns: 1fr;}
  .capabilities .grid {gap: 1.2rem}

  h1, .hero h1, h2 {font-size: 2.2rem;}
  h3 {font-size: 1.4rem;}
  .homepage .hero {background: none;}
  span.super {display: none;}
  .border-dot {background: var(--white);}
  div.outcome {display: block;}
  div.outcome svg {width: 10%; height: auto; margin-bottom: 1rem;}
  .outcomes img {width: 60%;height: auto;}


}