/******************************************************************
Theme Name: Lanelink
Description: This site was built using the Bones Development Theme. For more information about Bones or to view documentation, you can visit the <a href="https://github.com/eddiemachado/bones/issues" title="Bones Issues">Bones Issues</a> page on Github. You'll want to customize this for your clients with your own information.
Author: Your Name Here
Author URI: http://www.openlane.ca
Version: 1.0
******************************************************************/


.sticky {}          /* DO NOT EDIT THIS */
.gallery-caption {} /* THESE ARE USELESS */
.bypostauthor {}    /* THEY ARE ONLY TO KEEP THEME CHECK HAPPY */

/* ============================================================
   LaneLink — Universal design tokens & typography
   ============================================================ */

:root {
  --gaps-spaces-xl: 96px;
  --gaps-spaces-lg: 64px;
  --gaps-spaces-lg-sm: 55px;
  --gaps-spaces-md: 48px;
  --gaps-spaces-sm: 32px;
  --gaps-spaces-sm-xs: 24px;
  --gaps-spaces-xs: 16px;

  --Font-H1: 96px;
  --Font-H2: 56px;
  --Font-H3: 48px;
  --Font-H4: 32px;
  --Font-H5: 26px;
  --Font-H6: 24px;

  --Font-Body-Large: 20px;
  --Font-Body: 16px;
  --Font-Label: 14px;
  --Font-Caption-Footnote: 12px;

  --width-container: 1440px;
  --width-content: 1238px;

  --max-width-765: 765px;
  --max-width-813: 813px;
  --max-width-635: 635px;
  --max-width-493: 493px;

  --color-white: #ffffff;
  --color-black: #000000;
  --color-navy: #000040;
  --color-navy-deep: #000033;
  --color-lime: #d3ee14;
  --color-blue: #4c67e4;
  --color-gray: #c3c3c3;
  --font-body: "Onest", sans-serif;
  --font-btn: "Poppins", sans-serif;
  --header-height: 78px;
  --page-max: 1440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1024px) {
  :root {
    --gaps-spaces-xl: 80px;
    --gaps-spaces-lg: 40px;
    --gaps-spaces-md: 40px;
    --gaps-spaces-sm: 24px;
    --gaps-spaces-xs: 16px;

    --Font-H1: 80px;
    --Font-H2: 48px;
    --Font-H3: 40px;
    --Font-H4: 32px;
    --Font-H5: 26px;
    --Font-H6: 22px;

    --Font-Body-Large: 20px;
    --Font-Body: 16px;
    --Font-Label: 14px;
    --Font-Caption-Footnote: 12px;

    --width-container: 1024px;
    --width-content: 960px;
  }
}

@media (max-width: 768px) {
  :root {
    --gaps-spaces-xl: 80px;
    --gaps-spaces-lg: 40px;
    --gaps-spaces-md: 32px;
    --gaps-spaces-sm: 20px;
    --gaps-spaces-xs: 12px;
    --gaps-spaces-lg-sm: 28px;

    --Font-H1: 64px;
    --Font-H2: 40px;
    --Font-H3: 32px;
    --Font-H4: 32px;
    --Font-H5: 22px;
    --Font-H6: 22px;

    --Font-Body-Large: 18px;
    --Font-Body: 16px;
    --Font-Label: 14px;
    --Font-Caption-Footnote: 12px;
  }
}

@media (max-width: 390px) {
	:root {
		--gaps-spaces-xl: 64px;
		--gaps-spaces-lg: 32px;
		--gaps-spaces-md: 24px;
		--gaps-spaces-sm: 16px;
		--gaps-spaces-xs: 8px;
    --gaps-spaces-lg-sm: 28px;
    --gaps-spaces-sm-xs: 20px;

		--Font-H1: 48px;
		--Font-H2: 32px;
		--Font-H3: 32px;
		--Font-H4: 20px;
		--Font-Body-Large: 18px;
		--Font-Body: 16px;
		--Font-Label: 14px;
		--Font-Caption-Footnote: 12px;
	}

	.universal-h1 {
		line-height: 1 !important;
	}
}

/* ---------- Universal headings (Figma type scale) ---------- */

.universal-h1 {
  color: #FFF;
  text-align: center;
  font-family: Onest;
  font-size: var(--Font-H1, 96px);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0.619px;
  margin-bottom: 0;
  margin-top: 0;
}

.universal-h2 {
  color: #FFF;
  text-align: center;
  font-family: Onest;
  font-size: var(--Font-H2, 56px);
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 61.6px */
  letter-spacing: 0.619px;
  margin-bottom: 0;
  margin-top: 0;
}

.universal-h3 {
  color: #FFF;
  text-align: center;
  font-family: Onest;
  font-size: var(--Font-H3, 48px);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0.619px;
  margin-bottom: 0;
  margin-top: 0;
}

.universal-h4 {
  color: #FFF;
  text-align: center;
  font-family: Onest;
  font-size: var(--Font-H4, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0.5px;
  margin-bottom: 0;
  margin-top: 0;
}

.universal-h5 {
  color: #FFF;
  text-align: center;
  font-family: Onest;
  font-size: var(--Font-H5, 26px);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0.619px;
  margin-bottom: 0;
  margin-top: 0;
}

.universal-h6 {
  color: #FFF;
  text-align: center;
  font-family: Onest;
  font-size: var(--Font-H6, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0.619px;
  margin-bottom: 0;
  margin-top: 0;
}
.universal-body-large {
	font-family: Poppins !important;
	font-size: var(--Font-Body-Large, 20px) !important;
	font-style: normal;
	font-weight: 400;
	line-height: 150% !important;
	font-size: 20px;
	margin-bottom: 0;
	margin-top: 0;
}

.universal-body {
	font-family: Poppins !important;
	font-size: var(--Font-Body, 16px) !important;
	font-style: normal;
	font-weight: 400;
	line-height: 150% !important;
	font-size: 16px;
	margin-bottom: 0;
	margin-top: 0;
}

.universal-label {
	font-family: Poppins !important;
	font-size: var(--Font-Label, 14px) !important;
	font-style: normal;
	font-weight: 400;
	line-height: 175% !important;
	font-size: 14px;
	margin-bottom: 0;
	margin-top: 0;
}

.universal-caption {
	font-family: Poppins !important;
	font-size: var(--Font-Caption-Footnote, 12px) !important;
	font-style: normal;
	font-weight: 400;
	line-height: 175% !important;
	font-size: 12px;
	margin-bottom: 0;
	margin-top: 0;
}
.mr-auto {
    margin-right: auto !important;
}
.ml-auto {
    margin-left: auto !important;
}

.space-xl {
	height: var(--gaps-spaces-xl) !important;
	max-height: var(--gaps-spaces-xl) !important;
}

.space-lg {
	height: var(--gaps-spaces-lg) !important;
	max-height: var(--gaps-spaces-lg) !important;
}

.space-lg-sm {
	height: var(--gaps-spaces-lg-sm) !important;
	max-height: var(--gaps-spaces-lg-sm) !important;
}

.space-md {
	height: var(--gaps-spaces-md) !important;
	max-height: var(--gaps-spaces-md) !important;
}

.space-sm {
	height: var(--gaps-spaces-sm) !important;
	max-height: var(--gaps-spaces-sm) !important;
}

.space-sm-xs {
	height: var(--gaps-spaces-sm-xs) !important;
	max-height: var(--gaps-spaces-sm-xs) !important;
}

.space-xs {
	height: var(--gaps-spaces-xs) !important;
	max-height: var(--gaps-spaces-xs) !important;
}

.z-10 {
    z-index: 10;
    position: relative;
}

.max-width-765 {
    max-width: var(--max-width-765);
    margin: 0 auto;
    width: 100%;
}
.max-width-813 {
    max-width: var(--max-width-813);
    margin: 0 auto;
    width: 100%;
}
.max-width-635 {
    max-width: var(--max-width-635);
    margin: 0 auto;
    width: 100%;
}
.max-width-493 {
    max-width: var(--max-width-493);
    margin: 0 auto;
    width: 100%;
}
.margin-bottom {
  margin-bottom: 0 !important;
}

.universal-text-color-white {
  color: var(--color-white);
}

.universal-text-color-black {
  color: var(--color-black);
}

.universal-text-color-navy {
  color: var(--color-navy);
}

.universal-text-color-navy-deep {
  color: var(--color-navy-deep);
}

.universal-text-color-lime {
  color: var(--color-lime);
}

.universal-text-color-blue {
  color: var(--color-blue);
}

.universal-text-color-gray {
  color: var(--color-gray);
}

.universal-bg-color-white {
  background-color: var(--color-white);
}

.universal-bg-color-black {
  background-color: var(--color-black);
}

.universal-bg-color-navy {
  background-color: var(--color-navy);
}

.universal-bg-color-navy-deep {
  background-color: var(--color-navy-deep);
}

.universal-bg-color-lime {
  background-color: var(--color-lime);
}

.universal-bg-color-blue {
  background-color: var(--color-blue);
}

.universal-bg-color-gray {
  background-color: var(--color-gray);
}

.font-weight-light {
	font-weight: 300 !important;
}

.font-weight-regular {
	font-weight: 400 !important;
}

.font-weight-medium {
	font-weight: 500 !important;
}

.font-weight-semibold {
	font-weight: 600 !important;
}

.font-weight-bold {
	font-weight: 700 !important;
}

.font-weight-extrabold {
	font-weight: 800 !important;
}

.font-weight-black {
	font-weight: 900 !important;
}
.letter-spacing-zero {
  letter-spacing: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-btn);
  font-weight: 600;
  font-size: 15.25px;
  line-height: 1;
  letter-spacing: 0;
  padding: 14px 33px;
  border-radius: 25px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

.btn-lime {
  background: var(--color-lime);
  color: var(--color-navy);
}

.btn-lime:hover {
  background-color: #E9F1B1;
  color: #000040;
}

.btn-navy {
  background: var(--color-navy-deep);
  color: var(--color-white);
  border-color: var(--color-navy-deep);
}

.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  padding: 16px 32px;
  border-radius: 26px;
}

.btn-lg {
  font-size: 21.67px;
  padding: 22px 43px;
  border-radius: 35px;
  min-width: 252px;
}

.wp-block-button.wp-default-btn a.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-btn);
  font-weight: 600;
  font-size: 16px;
  padding: 18px 43px;
  border-radius: 35px;
  min-width: 252px;
  letter-spacing: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
  background: var(--color-lime);
  color: var(--color-navy); 
  max-width: 320px;
  width: 100%;
  min-width: 320px;
}

.wp-block-button.wp-default-btn a.wp-element-button:hover {
  background-color: #E9F1B1;
  color: #000040;
}


@media (max-width: 1024px) {
  .wp-block-button.wp-default-btn a.wp-element-button {
      max-width: 320px;
      width: 100%;
      min-width: 320px;
  }
}
@media (max-width: 767px) {
  .wp-block-button.wp-default-btn a.wp-element-button {
      font-size: 16px;
      padding: 12px 30px;
      width: 100%;
      min-width: 280px;
  }
  br {
      display: none;
  }
}

.better-outcomes p { letter-spacing: 0.5px; line-height: 30px; }