/* ==========================================================================
  Global Rest
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
*::before, *::after {
  position: absolute;
  content: "";
}
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 100%;
}
body {
  min-height: 100%;
  overflow-x: hidden;
}
input, button, textarea, select {
  font: inherit;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
ol, ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  cursor: pointer;
  border: none;
  color: inherit;
}
div, article, section, a, ul, li, aside, address, form, picture, blockquote, button, figure, span, img, header, footer, h1, h1, h3, h4 {
  position: relative;
}
p a {
  border-bottom: solid 1px currentColor;
}
p, li {
  max-width: 60ch;
}
li {
  line-height: 1.1;
}
address, cite {
  font-style: normal;
}
::selection {
  background: var(--primary-800);
  color: var(--white);
}
.hide-this-row {
    display: none;
}
/* ==========================================================================
  Color Check
   ========================================================================== */
.color-check {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 100px;
}
.color-check div:nth-child(1) {
  background: var(--primary-50);
}
.color-check div:nth-child(2) {
  background: var(--primary-100);
}
.color-check div:nth-child(3) {
  background: var(--primary-200);
}
.color-check div:nth-child(4) {
  background: var(--primary-300);
}
.color-check div:nth-child(5) {
  background: var(--primary-400);
}
.color-check div:nth-child(6) {
  background: var(--primary-500);
}
.color-check div:nth-child(7) {
  background: var(--primary-600);
}
.color-check div:nth-child(8) {
  background: var(--primary-700);
}
.color-check div:nth-child(9) {
  background: var(--primary-800);
}
.color-check div:nth-child(10) {
  background: var(--primary-900);
}
.color-check div:nth-child(11) {
  background: var(--primary-1000);
}
.color-check div:nth-child(12) {
  background: var(--primary-1100);
}
/* ==========================================================================
  Body Styling
   ========================================================================== */
body {
  --body-background: var(--white);
  --body-color: var(--gray-1000);
  --body-fw: 425;
  --headline-color: var(--gray-1100);
  --accent-intro: var(--primary-600);
  --global-border: var(--gray-400);
}
body {
  font-family: var(--font-base);
  color: var(--body-color);
  background-color: var(--body-background);
  font-size: 1.1rem;
  font-weight: var(--body-fw);
  line-height: 1.25;
}
@media (min-width: 700px) {
  body {
    font-size: 1.3rem;
    line-height: 1.4;
  }
}
@media (min-width: 1200px) {
  body {
    font-size: 1.4rem;
  }
}
@media (min-width: 1800px) {
  body {
    font-size: 1.45rem;
  }
}
/* ==========================================================================
  Global CSS Poperties
   ========================================================================== */
* {}
body {
  /* ==========================================================================
   Colors
   ========================================================================== */
  /*	 Grays    */
  --gray-hue: 160;
  --gray-sat: 2%;
  --white: hsl(var(--gray-hue), var(--gray-sat), 98%);
  --black: hsl(var(--gray-hue), var(--gray-sat), 5%);
  --gray-50: hsl(0, var(--gray-sat), 95%);
  --gray-100: hsl(0, var(--gray-sat), 93%);
  --gray-200: hsl(0, var(--gray-sat), 90%);
  --gray-300: hsl(0, var(--gray-sat), 89%);
  --gray-400: hsl(0, var(--gray-sat), 84%);
  --gray-500: hsl(0, var(--gray-sat), 78%);
  --gray-600: hsl(0, var(--gray-sat), 67%);
  --gray-700: hsl(0, var(--gray-sat), 50%);
  --gray-800: hsl(0, var(--gray-sat), 40%);
  --gray-900: hsl(0, var(--gray-sat), 30%);
  --gray-1000: hsl(0, var(--gray-sat), 20%);
  --gray-1100: hsl(0, var(--gray-sat), 7%);
  /*	Primary Branding Color */
  /*  --primary-hue: 160;*/
  --primary-saturation: 40%;
  --primary-50: hsl(var(--primary-hue), 35%, 98.24%);
  --primary-100: hsl(var(--primary-hue), 35%, 94.76%);
  --primary-200: hsl(var(--primary-hue), 35%, 89.61%);
  --primary-300: hsl(var(--primary-hue), 35%, 82.37%);
  --primary-400: hsl(var(--primary-hue), var(--primary-saturation), 70.77%);
  --primary-500: hsl(var(--primary-hue), var(--primary-saturation), 51.59%);
  --primary-600: hsl(var(--primary-hue), var(--primary-saturation), 43.06%);
  --primary-700: hsl(var(--primary-hue), var(--primary-saturation), 35.83%);
  --primary-800: hsl(var(--primary-hue), var(--primary-saturation), 25.92%);
  --primary-900: hsl(var(--primary-hue), var(--primary-saturation), 18.30%);
  --primary-1000: hsl(var(--primary-hue), var(--primary-saturation), 12.68%);
  --primary-1100: hsl(var(--primary-hue), var(--primary-saturation), 5.33%);
  /*	CTA Colors */
  --action-color: linear-gradient(180deg, #ffa500, #ffaf28, #ffb940, #ffc254, #ffc254, #ffb940, #ffaf28, #ffa500);
  /* ==========================================================================
   Fonts
   ========================================================================== */
  /*	 Font Stack   */
  --font-base: Figtree, Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  /*	Font Sizes*/
  --fs-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --fs-base: clamp(1.1rem, 0.34vw + 0.91rem, 1.35rem);
  --fs-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --fs-lg: clamp(1.56rem, 1vw + 1rem, 1.8rem);
  --fs-xl: clamp(1.75rem, 1.56vw + 1.56rem, 2.41rem);
  --fs-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --fs-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
  /*	Font Weights*/
  --fw-light: 300;
  --fw-normal: 400;
  --fw-semibold: 550;
  --fw-bold: 620;
  --fw-black: 825;
  /* ==========================================================================
   Spacing
   ========================================================================== */
  --space-xxxs: 2px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 36px;
  --space-xl: 48px;
  --space-xxl: 84px;
  --space-xxxl: 128px;
  /* ==========================================================================
   Padding Clamps
   ========================================================================== */
  --clamp-s: clamp(16px, 2vw, 36px);
  --clamp-m: clamp(18px, 3vw, 64px);
  --clamp-l: clamp(24px, 5vw, 96px);
  --clamp-xl: clamp(24px, 6vw, 128px);
  /* ==========================================================================
   Shadows
   ========================================================================== */
  --shadow-color: 286deg 2% 56%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36), 5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34), 2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34), 4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34), 7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34), 11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34), 17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34), 25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
  --dotted: radial-gradient(circle at 2px 2px, var(--gray-200) 2px, transparent 0);
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  src: local(''), url('../fonts/Figtree-VariableFont.woff2') format('woff2');
  font-display: swap;
}
body.body-electrician {
  --primary-hue: 225;
}
/* ==========================================================================
   Typography
   ========================================================================== */
p {
  margin-bottom: var(--space-m);
}
p.upsize {
  font-size: 1.15em;
}
@media (min-width: 700px) {
  p.upsize {
    font-size: 1.25em;
    text-wrap: balance;
  }
}
@media (min-width: 1200px) {
  p {
    margin-bottom: var(--space-l);
  }
}
h1, h2, h3, h4 {
  line-height: 1;
  color: var(--headline-color);
  text-wrap: balance;
}
h1, h2 {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-m);
  letter-spacing: -0.02em;
}
h1 {
  font-size: 2rem;
	font-weight: var(--fw-bold);
}
h2 {
  max-width: 1200px;
  font-size: 1.7rem;
}
h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
  font-weight: var(--fw-semibold);
}
h2.section-title {
  font-size: clamp(2rem, 12vw, 13rem);
  white-space: nowrap;
  /*	   letter-spacing: 0.03em;*/
}
@media (min-width: 700px) {
  h1 {
    font-size: var(--fs-xxl);
  }
  h2 {
    font-size: var(--fs-xxl);
  }
  h3 {
    font-size: var(--fs-lg);
  }
}

@media (min-width: 1200px) {
	  h1 {
    font-size: var(--fs-xxxl);
  }
}
h4 {
  font-size: var(--fs-base);
  margin-bottom: var(--space-s);
  font-weight: var(--fw-semibold);
}
.headline-line-accent {
  padding-bottom: var(--space-l);
  position: relative;
  max-width: max-content;
}
.headline-line-accent::after {
  width: 50%;
  height: 2px;
  background: currentColor;
  left: 0;
  bottom: 0;
  opacity: 0.5;
}
/* ==========================================================================
  Little accent tags to introduce sections
   ========================================================================== */
.accent-intro {
  color: var(--accent-intro);
  margin-bottom: var(--space-m);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  font-size: 1rem;
  display: block;
  line-height: 1;
  letter-spacing: 0.04em;
}
.accent-intro-inverted {
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  background-color: var(--primary-800);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  max-width: max-content;
}
.accent-intro-flex {
  display: flex;
  gap: 6px;
}
.accent-intro-flex svg {
  height: 0.9lh;
  fill: currentColor;
}
/* ==========================================================================
   Utility classes
   ========================================================================== */
.isolate {
  isolation: isolate;
}
.object-fit {
  overflow: hidden;
}
.object-fit img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.center-block-limit {
  width: 100%;
}
.margin-top-auto {
  margin-top: auto;
}
@media (max-width: 899px) {
  .center-block-limit {
    max-width: 540px;
    margin-inline: auto;
  }
}


body.body-patio {
  --primary-hue: 205;
}
.body-patio .logo {
  max-width: 320px;
  padding: 10px 0;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-row {
  background-image: repeating-linear-gradient(90deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
}
.hero-review-wrap {
  display: grid;
  max-width: max-content;
  font-size: 1.2rem;
  gap: var(--space-s);
}
.hero-review {
  padding-top: 20px;
  background: url("../images/review-stars.svg") center top no-repeat;
  background-size: 80px;
  text-align: center;
}
@media (min-width: 600px) {
  .hero-review-wrap {
    grid-template-columns: repeat(4, auto);
    gap: var(--space-m);
  }
}
.hero-copy a {
  background: var(--primary-900);
  color: var(--primary-100);
  border-radius: 100px;
  padding: 16px 24px;
  display: flex;
  gap: 6px;
  line-height: 1;
  max-width: max-content;
  transition: all 0.1s;
  outline: solid 2px transparent;
  outline-offset: 0;
}
.hero-copy a svg {
  width: 0.9lh;
}
@media (hover:hover) and (pointer:fine) {
  .hero-copy a:hover {
    outline: solid 2px var(--primary-500);
    outline-offset: 4px;
  }
}
.hero-grid {
  display: grid;
  gap: var(--space-s);
}
.hero-grid-intro {
  display: flex;
  gap: var(--space-l);
  flex-direction: column;
  justify-content: center;
}
.hero-grid-pics {
  display: grid;
  gap: var(--space-xs);
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.hero-grid-pics > div:first-child, .hero-grid-pics > div:last-child {
  grid-column: span 2;
  background-image: radial-gradient(circle at 16% 83%, rgba(148, 148, 148, 0.06) 0%, rgba(148, 148, 148, 0.06) 50%, rgba(63, 63, 63, 0.06) 50%, rgba(63, 63, 63, 0.06) 100%), radial-gradient(circle at 68% 87%, rgba(66, 66, 66, 0.06) 0%, rgba(66, 66, 66, 0.06) 50%, rgba(105, 105, 105, 0.06) 50%, rgba(105, 105, 105, 0.06) 100%), radial-gradient(circle at 38% 50%, rgba(123, 123, 123, 0.06) 0%, rgba(123, 123, 123, 0.06) 50%, rgba(172, 172, 172, 0.06) 50%, rgba(172, 172, 172, 0.06) 100%), linear-gradient(90deg, hsl(18, 0%, 1%), hsl(18, 0%, 1%));
}
.hero-grid-pics > div {
  background: var(--primary-300);
  border-radius: 8px;
  overflow: hidden;
}
.hero-grid-pics > div:nth-child(3) {
	background: var(--primary-300);
	
}
.hero-grid-pics > div:nth-child(5) {
	background: var(--primary-400);
/*	background: radial-gradient(circle at 50% 50%, #c2e2e2, #bce0e0, #b6dddd, #b0dbdb, #aad9d9, #a4d7d7, #9dd4d4, #97d2d2);*/
}
.hero-grid-pics img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 699px) {
  .hero-copy {
    text-align: center;
  }
  .hero-copy a {
    margin-inline: auto;
  }
  .hero-review-wrap {
    margin-inline: auto;
  }
}
@media (max-width: 999px) {
  .hero-grid-pics {
    aspect-ratio: 1/1;
  }
}
@media (min-width: 700px) {
  .hero-grid-pics {
    gap: var(--space-s);
  }
}
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 2/1;
  }
  .hero-copy a {
    margin-bottom: var(--space-xxl);
  }

}

/* ==========================================================================
   Layout Elements
   ========================================================================== */
main .row {
  padding: clamp(1.5rem, 8vw, 12rem) 0;
}
main .row:first-of-type {
  padding-top: 32px;
}
/*
main .row:nth-of-type(even) {
  background: var(--gray-300);
}
*/
/*
.stack-wrapper > .wrapper:not(:first-of-type) {
  margin-block-start: var(--space-xxl);

}
*/
/*
.stack-wrapper > .wrapper {
  margin-block-start: var(--space-xxl);

}
*/
.stack-wrapper > .wrapper ~ .wrapper {
  margin-block-start: clamp(16px, 5vw, 84px);
}
.wrapper {
  width: 100%;
  max-width: 1596px;
  padding: 0 16px;
  margin: auto;
}
@media (min-width: 700px) {
  .wrapper {
    padding: 0 24px;
  }
}
.inner-wrapper {
  padding: clamp(1rem, 4vw, 5rem);
  background: var(--gray-200);
}
.center-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  text-align: center;
  align-items: center;
}
.center-wrapper P {
  text-wrap: balance;
}
.wrapper-limit {
  max-width: 720px;
}
@media (min-width: 1200px) {
  .stack-wrapper > .wrapper:not(.wrapper: first-of-type) {
    margin-block-start: var(--space-xxl);
  }
  .dotted-container::before, .dotted-container::after {
    width: 20%;
    height: 40%;
    background-image: radial-gradient(circle at 2px 2px, var(--gray-400) 2px, transparent 0);
    background-size: 20px 20px;
    z-index: -1;
  }
  .dotted-container::before {
    right: 0;
    top: 0;
  }
  .dotted-container::after {
    left: 0;
    bottom: 0;
  }
}
/* ==========================================================================
   Row Colors
   ========================================================================== */
.row-dark {
  --accent-intro: var(--white);
  --headline-color: var(--white);
  --body-background: var(--primary-1100);
  --global-border: var(--primary-1000);
  background-color: var(--body-background);
  color: var(--gray-200);
  font-weight: 300;
}
.row-p-50 {
  background-color: var(--primary-50);
}
.row-p-100 {
  background-color: var(--primary-100);
}
.row-p-200 {
  background-color: var(--primary-200);
}
.row-p-800 {
  background-color: var(--primary-800);
}
.row-g-50 {
  background-color: var(--gray-50);
}
.row-g-100 {
  background-color: var(--gray-100);
}
.row-g-200 {
  background-color: var(--gray-200);
}
.row-about {
  /*
background-image: radial-gradient(circle at center center, transparent,rgb(255,255,255)),repeating-linear-gradient(135deg, rgb(255,255,255) 0px, rgb(255,255,255) 1px,transparent 1px, transparent 4px),repeating-linear-gradient(45deg, rgb(245,245,245) 0px, rgb(245,245,245) 3px,transparent 3px, transparent 6px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
	background: var(--white);
*/
}
.row-review {
  /*  background-image: repeating-linear-gradient(90deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));*/
}
.row-gift {
  /*
  background-image: radial-gradient(circle at center center, rgba(217, 217, 217, 0.05) 0%, rgba(217, 217, 217, 0.05) 15%, rgba(197, 197, 197, 0.05) 15%, rgba(197, 197, 197, 0.05) 34%, rgba(178, 178, 178, 0.05) 34%, rgba(178, 178, 178, 0.05) 51%, rgba(237, 237, 237, 0.05) 51%, rgba(237, 237, 237, 0.05) 75%, rgba(138, 138, 138, 0.05) 75%, rgba(138, 138, 138, 0.05) 89%, rgba(158, 158, 158, 0.05) 89%, rgba(158, 158, 158, 0.05) 100%), radial-gradient(circle at center center, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 6%, rgb(255, 255, 255) 6%, rgb(255, 255, 255) 12%, rgb(255, 255, 255) 12%, rgb(255, 255, 255) 31%, rgb(255, 255, 255) 31%, rgb(255, 255, 255) 92%, rgb(255, 255, 255) 92%, rgb(255, 255, 255) 97%, rgb(255, 255, 255) 97%, rgb(255, 255, 255) 100%);
  background-size: 42px 42px;
*/
}
.row-contact {
  background: white;
}
/* ==========================================================================
   SVG Section slants, curves and swoops
   ========================================================================== */
/*
#swoop {
  width: 100%;
  height: 160%;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0.08;
  z-index: -1;
}
*/
.side-swoop {
  height: 35%;
  width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.15;
}
.swoop-highlight {
  fill: var(--primary-300);
}
.swoop-base {
  fill: var(--primary-400);
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
	z-index: 20;
}
header .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
	
  /*
  justify-content: space-between;
  align-items: center;
*/
}
.header-contact {
  display: flex;
  gap: 12px;
}
.header-contact a {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  background: black;
  color: white;
  line-height: 1;
  border-radius: 120px;
  font-size: 1rem;
  align-items: center;
  z-index: 3;
  transition: all 0.1s;
  outline: solid 2px transparent;
  outline-offset: 0;
}
.header-contact a.header-contact-phone {
  background: none;
  border: solid 2px currentColor;
  color: black;
}
.header-contact a svg {
  width: 1lh;
}
.body-electrician .logo {
  max-width: 200px;
}
.hide-tiny-screens {
  display: none;
}
@media (hover:hover) and (pointer:fine) {
  .header-contact a:hover {
    outline: solid 2px black;
    outline-offset: 5px;
  }
}
@media (min-width: 380px) {
  .hide-tiny-screens {
    display: revert;
  }
}
@media (min-width: 900px) {
  header .wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .header-contact a {
    padding: 12px 24px;
    font-size: 1.2rem;
  }
}
/* ==========================================================================
   Photostrips
   ========================================================================== */
.photostrip {
  --photo-spacing: 12px;
  padding: var(--photo-spacing);
}
.photostrip img {
  border-radius: 8px;
}
.photostrip-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--photo-spacing);
}
@media (min-width: 768px) {
  .photostrip {
    padding: var(--photo-spacing);
  }
  .photostrip-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ==========================================================================
   SVG Icons in standard grids
   ========================================================================== */
.grid-icon svg, .grid-icon-solid svg {
  width: 48px;
  aspect-ratio: 1/1;
  margin-bottom: var(--space-s);
}
.grid-icon svg {
  background: var(--primary-100);
  fill: var(--primary-600);
  background: var(--primary-800);
  fill: white;
  padding: 10px;
  border-radius: 8px;
}
.grid-icon-solid svg {
  fill: var(--primary-800);
}
@media (min-width: 700px) {
  .grid-icon-left > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-gap: var(--space-m);
  }
}
/* ==========================================================================
   Standard Grids
   ========================================================================== */
.grid {
  display: grid;
}
.standard-gap {
  grid-row-gap: 1rem;
  grid-column-gap: var(--space-xl);
}
.mini-gap {
  grid-gap: var(--space-s);
}
.grid-inner-space {
  grid-gap: var(--space-s);
}
.grid-inner-space > * {
  padding: var(--clamp-s);
  border: solid 1px var(--gray-400);
  border-radius: 8px;
  background: white;
  font-size: 1.1rem;
}
.grid-inner-space > * p:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 700px) {
  .grid-2-small {
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-m);
  }
  .grid-2-1 {
    grid-template-columns: 2fr 1fr;
  }
}
@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1100px) {
  .grid-1-2 {
    grid-template-columns: 30% 1fr;
  }
}
/* ==========================================================================
   50/50 Color Grid with extra spacing
   ========================================================================== */
.grid-50-50 {
  grid-gap: 2rem;
}
@media (min-width: 1000px) {
  .row-50-50 {
    background: linear-gradient(90deg, white 50%, var(--primary-800) 50%);
  }
  .grid-50-50 {
    grid-template-columns: 1fr 1fr;
    place-items: center;
    grid-gap: 0;
  }
  .grid-50-50 > div:first-of-type {
    padding-right: var(--space-xl);
  }
  .grid-50-50 > div:last-of-type {
    color: var(--gray-100);
    padding-left: var(--space-xl);
  }
  .grid-50-50 > div:last-of-type > div:last-of-type p:last-of-type {
    margin-bottom: 0;
  }
}
/* ==========================================================================
  About Us
   ========================================================================== */
.founder {
  display: grid;
  grid-gap: var(--space-s);
}
.team {
  display: flex;
  gap: var(--space-m);
  justify-content: center;
  flex-wrap: wrap;
}
.team > * {
  flex: 1 0 320px;
  max-width: 450px;
  min-width: 200px;
}
/*
.team {
  display: grid;
  grid-gap: var(--space-m);
  text-align: center;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
*/
.team > *, .founder-image {
  padding: var(--clamp-s);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.05);
  background: white;
  border-radius: 8px;
  text-align: center;
}
.team img {
  margin-bottom: var(--space-s);
}
.team h3 {
  margin-bottom: 2px;
}
.team span {
  text-transform: uppercase;
  font-size: 0.875rem;
}
@media (max-width:899px) {
  .founder-image {
    max-width: min(500px, 100%);
  }
}
@media (min-width:900px) {
  .founder {
    grid-template-columns: 40% 1fr;
    grid-gap: var(--space-xl);
    align-items: start;
  }
  .founder img {
    max-width: 100%;
  }
}
/* ==========================================================================
   4 pack of pictures on right with paragraphs and big data on left
   ========================================================================== */
.right-pic-pack-wrap {
  display: grid;
  place-items: start;
  gap: var(--space-m);
}
.right-pic-pack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
  padding-top: 24px;
}
.right-pic-pack img {
  border-radius: 12px;
}
.right-pic-pack figure {
  display: grid;
  place-items: center;
}
.right-pic-pack figure:nth-of-type(even) {
  margin-top: -24px;
}
.bold-stats-wrap {
  width: 100%;
}
.bold-stats-wrap p {
  border-bottom: solid 1px var(--global-border);
  padding-bottom: var(--space-m);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}
.bold-stats {
  line-height: 1;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  white-space: nowrap;
}
.bold-stats span {
  font-size: var(--fs-xxxl);
  font-weight: var(--fw-bold);
  display: block;
}
@media (min-width: 700px) {
  .right-pic-pack {
    grid-template-columns: repeat(4, 1fr);
  }
  .bold-stats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  .right-pic-pack-wrap {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: var(--space-l);
    padding-top: var(--space-xl);
  }
  .right-pic-pack {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l);
    padding-top: 0;
    grid-column: 2;
    grid-row: 1 / -1;
  }
  .right-pic-pack figure:nth-of-type(even) {
    margin-top: -128px;
  }
}
@media (min-width: 1300px) {
  .right-pic-pack-wrap {
    column-gap: var(--space-xxl);
  }
}
/* ==========================================================================
   Flair
   ========================================================================== */
/* ==========================================================================
   Download Checklist / Free Gift
   ========================================================================== */
.free-gift-wrap {
  display: grid;
  max-width: 1100px;
  margin-inline: auto;
  border: solid 1px var(--gray-400);
  font-size: 1.2rem;
  border-radius: 12px;
  box-shadow: var(--shadow-elevation-medium);
  overflow: hidden;
}
.free-gift-copy ul {
  margin-bottom: var(--space-l);
}
/*
.free-gift-copy ul {
  display: grid;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}
.free-gift-copy ul li span {
  font-weight: 600;
}
*/
.free-gift-copy {
  padding: var(--clamp-m);
  background: white;
}
/*
.free-gift-copy ul li {
  padding-left: 24px;
  text-wrap: balance;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: left 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23256F56' fill-rule='evenodd' d='M5.57.116a.857.857 0 0 1 .855-.003L12 3.298 17.575.113a.857.857 0 0 1 1.282.744v6a6.86 6.86 0 0 1-5.571 6.737v5.776A5.144 5.144 0 0 1 18 16.286h3.429c.473 0 .857.383.857.857v1.714A5.143 5.143 0 0 1 17.143 24H6.857a5.143 5.143 0 0 1-5.143-5.143v-1.714c0-.474.384-.857.857-.857H6a5.144 5.144 0 0 1 4.714 3.084v-5.776a6.86 6.86 0 0 1-5.571-6.737v-6c0-.305.163-.588.427-.741Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
*/
.free-gift-copy a {
  background: var(--action-color);
  padding: 12px 24px;
  border-radius: 100px;
  display: flex;
  gap: 12px;
  max-width: max-content;
  font-weight: 500;
  font-size: 1.1rem;
  margin-inline: auto;
  box-shadow: var(--shadow-elevation-medium);
  transition: all 0.1s;
  outline: solid 2px transparent;
  outline-offset: 0;
}

@media (hover:hover) and (pointer:fine) {
  .free-gift-copy a:hover {
    outline: solid 2px black;
    outline-offset: 4px;
    box-shadow: none;
  }
}
.free-gift-copy a svg {
  width: 1lh;
  overflow: visible;
}

  .free-gift-intro {
    
    background-size: cover;
	  background-repeat: no-repeat;
	  background-position: center center;
   

  }




@media (min-width: 700px) {
  .free-gift-copy a::before {
    display: revert;
  }
  .free-gift-copy a {
    padding: 16px 32px;
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   Right image in row same height as content
   ========================================================================== */
.row-right-image {
  width: 30%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.row-right-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  object-fit: cover;
}
.left-content {
  width: 70%;
}
/* ==========================================================================
   Simple Checklist With Check Marks - Larger Font
   ========================================================================== */
.simple-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  grid-row-gap: var(--space-m);
  grid-column-gap: var(--space-l);
}
.simple-checklist li {
  font-size: var(--fs-md);
  font-weight: 480;
  padding-left: 30px;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: left 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23262626' fill-rule='evenodd' d='M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm6.005-15.054a1.286 1.286 0 0 0-2.008-1.606l-6.079 7.598-2.432-1.824a1.286 1.286 0 1 0-1.542 2.057l3.428 2.572a1.286 1.286 0 0 0 1.776-.226l6.857-8.571Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.row-dark .simple-checklist li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm6.005-15.054a1.286 1.286 0 0 0-2.008-1.606l-6.079 7.598-2.432-1.824a1.286 1.286 0 1 0-1.542 2.057l3.428 2.572a1.286 1.286 0 0 0 1.776-.226l6.857-8.571Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
@media (min-width: 1200px) {
  .simple-checklist {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  }
}
/* ==========================================================================
   Bullet list with icons
   ========================================================================== */
.icon-style-list {
  display: grid;
  gap: var(--space-s);
  font-size: 1.2rem;
}
.icon-style-list-mini {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.icon-style-list li {
  padding-left: 24px;
  text-wrap: balance;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: left 3px;
}
.icon-style-list li span {
  font-weight: 600;
  font-size: 1.2em;
  display: block
}
.icon-style-list-landscaping li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23256F56' fill-rule='evenodd' d='M5.57.116a.857.857 0 0 1 .855-.003L12 3.298 17.575.113a.857.857 0 0 1 1.282.744v6a6.86 6.86 0 0 1-5.571 6.737v5.776A5.144 5.144 0 0 1 18 16.286h3.429c.473 0 .857.383.857.857v1.714A5.143 5.143 0 0 1 17.143 24H6.857a5.143 5.143 0 0 1-5.143-5.143v-1.714c0-.474.384-.857.857-.857H6a5.144 5.144 0 0 1 4.714 3.084v-5.776a6.86 6.86 0 0 1-5.571-6.737v-6c0-.305.163-.588.427-.741Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-style-list-plumbing li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M17.961.147a7.372 7.372 0 0 0-8.373 9.737L.79 18.682a2.571 2.571 0 0 0 .038 3.673l.961.923a2.571 2.571 0 0 0 3.59-.027l8.918-8.822a7.388 7.388 0 0 0 9.533-8.423 2.157 2.157 0 0 0-.994-1.446.857.857 0 0 0-1.054.125l-3.429 3.428-.01.012a.857.857 0 0 1-1.235 0 .855.855 0 0 0-.046-.044l-1.278-1.144a.857.857 0 0 1 .014-1.18l3.425-3.426a.857.857 0 0 0 .182-.942A2.16 2.16 0 0 0 17.961.147Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-style-list-electrical li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M9.779 2.964c.992-1.701 3.45-1.701 4.442 0l9.015 15.455c1 1.714-.236 3.867-2.22 3.867H2.984C1 22.286-.237 20.133.763 18.419L9.78 2.964Zm3.752 7.126a1.286 1.286 0 1 0-2.205-1.323l-2.571 4.286A1.286 1.286 0 0 0 9.857 15h2.015l-1.403 2.338a1.286 1.286 0 0 0 2.205 1.324l2.571-4.286a1.286 1.286 0 0 0-1.102-1.947h-2.015l1.403-2.339Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-style-list-painting li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5.143 3.429A2.571 2.571 0 0 1 7.714.857h12.857a2.571 2.571 0 0 1 2.572 2.572v3.428A2.571 2.571 0 0 1 20.57 9.43H7.714a2.571 2.571 0 0 1-2.571-2.572V6.43H3.857a.429.429 0 0 0-.428.428v1.714c0 1.184.959 2.143 2.142 2.143h5.572a4.716 4.716 0 0 1 4.64 3.882A2.572 2.572 0 0 1 18 17.143v5.143a.857.857 0 0 1-.857.857H12a.857.857 0 0 1-.857-.857v-5.143a2.571 2.571 0 0 1 1.992-2.505 2.144 2.144 0 0 0-1.992-1.352H5.57A4.714 4.714 0 0 1 .857 8.57V6.857a3 3 0 0 1 3-3h1.286V3.43Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-style-list-checklist li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm6.005-15.054a1.286 1.286 0 0 0-2.008-1.606l-6.079 7.598-2.432-1.824a1.286 1.286 0 1 0-1.542 2.057l3.428 2.572a1.286 1.286 0 0 0 1.776-.226l6.857-8.571Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
/* ==========================================================================
   Service Cities
   ========================================================================== */
.service-cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-s);
}
.service-cities li {
  padding-left: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' aria-hidden='true'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m7.693 14.9.047.027.019.011a.507.507 0 0 0 .482 0l.018-.01.048-.027a11.317 11.317 0 0 0 .762-.495 13.053 13.053 0 0 0 1.789-1.521C12.154 11.558 13.5 9.565 13.5 7a5.5 5.5 0 0 0-11 0c0 2.564 1.347 4.558 2.642 5.885a13.053 13.053 0 0 0 1.788 1.521 11.317 11.317 0 0 0 .763.495ZM8 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: left 2px;
  background-size: 16px;
  background-repeat: no-repeat;
  /*  font-size: 1.2rem;*/
}
.row-dark .service-cities li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' aria-hidden='true'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='m7.693 14.9.047.027.019.011a.507.507 0 0 0 .482 0l.018-.01.048-.027a11.317 11.317 0 0 0 .762-.495 13.053 13.053 0 0 0 1.789-1.521C12.154 11.558 13.5 9.565 13.5 7a5.5 5.5 0 0 0-11 0c0 2.564 1.347 4.558 2.642 5.885a13.053 13.053 0 0 0 1.788 1.521 11.317 11.317 0 0 0 .763.495ZM8 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
@media (min-width: 1300px) {
  .grid-80-20 {
    display: grid;
    grid-template-columns: 1fr 30%;
  }
  .service-city-map {
    background: url("../images/service-map.jpg") center center no-repeat;
    background-size: cover;
    opacity: 0.5;
    filter: hue-rotate(-10deg);
    /*		filter: saturate(0);*/
    mask: radial-gradient(50% 50% at 50% 50%, #000000 48.74366554054054%, rgba(0, 0, 0, 0) 100%) add;
  }
}
/* ==========================================================================
   Guarantee
   ========================================================================== */
.guarantee-wrap {
  display: grid;
  gap: var(--space-m);
  max-width: 1000px;
  margin-inline: auto;
  overflow: hidden;
}
.guarantee-wrap p:last-of-type {
  margin-bottom: 0;
}
.guarantee-badge {
  margin-inline: auto;
  background: var(--primary-200);
  width: 100%;
}
.guarantee-copy {
  padding: var(--clamp-s) 16px;
}
@media (max-width: 699px) {
  .guarantee-badge img {
    margin-inline: auto;
    width: 50%;
  }
  .guarantee-badge {
    clip-path: polygon(0% 0%, 100% 1%, 100% 80%, 50% 100%, 0 80%);
    padding: 16px 16px 32px 16px;
  }
}
.guarantee-wrap {
  border: solid 1px var(--gray-300);
  border-radius: 8px;
  box-shadow: var(--shadow-elevation-medium);
  background: white;
  background-image: repeating-radial-gradient(circle at center center, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.03) 5px, rgba(0, 0, 0, 0.03) 7px), repeating-radial-gradient(circle at center center, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 9px, rgb(255, 255, 255) 9px, rgb(255, 255, 255) 21px, rgb(255, 255, 255) 21px, rgb(255, 255, 255) 31px, rgb(255, 255, 255) 31px, rgb(255, 255, 255) 40px);
  background-size: 20px 20px;
}
@media (min-width: 700px) {
  .guarantee-wrap {
    grid-template-columns: 25% 1fr;
  }
  .guarantee-badge {
    padding: 10px 30px 10px 10px;
    display: grid;
    place-items: center;
    clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%);
  }
}
/* ==========================================================================
   List with pics on the left side of the row
   ========================================================================== */
.left-pic-list li {
  display: grid;
  padding-block: 24px;
  border-top: solid 1px var(--global-border);
  gap: var(--space-xs);
}
.left-pic-list p:last-of-type {
  margin-bottom: 0;
}
.left-pic-list h3 {
  font-size: var(--fs-xl);
}
.left-pic-list li:last-of-type {
  border-bottom: solid 1px var(--global-border);
}
.left-pic-list img {
  max-width: 128px;
  border-radius: 12px;
}
.lp-list-count {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}
@media (min-width:1000px) {
  .left-pic-list li {
    padding-block: 36px;
    gap: var(--space-m);
    grid-template-columns: 40% auto 1fr;
  }
  .left-pic-list li {
    max-width: revert;
  }
  .left-pic-list img {
    max-width: 192px;
  }
}
/* ==========================================================================
   Icon list on left with big vertical picture on right
   ========================================================================== */
.vert-with-list {
  max-width: 540px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-l);
}
.vert-icon-list {
  margin-top: auto;
}
.vert-icon-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-s);
  border-top: 1px solid var(--global-border);
  padding-block: 24px;
}
.vert-icon-list li:last-of-type {
  border-bottom: 1px solid var(--global-border);
}
.vert-icon-list li > div {
  color: var(--white);
  aspect-ratio: 1/1;
  background: var(--primary-800);
  border-radius: 8px;
  padding: 20%;
}
.vert-image-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
}
.vert-image-wrap img {
  border-radius: 12px;
}
.vert-image-wrap svg {
  position: absolute;
  width: 15%;
  aspect-ratio: 1/1;
  fill: var(--body-background);
}
.vert-image-wrap svg:first-of-type {
  right: -1px;
  top: -1px;
}
.vert-image-wrap svg:last-of-type {
  left: -1px;
  bottom: -1px;
  transform: rotate(180deg);
}
@media (min-width: 900px) {
  .vert-with-list {
    max-width: 100%;
    gap: var(--space-xl);
    grid-template-columns: 1fr 50%;
  }
  .vert-icon-list li {
    grid-template-columns: 64px 1fr;
    padding-block: var(--space-l);
    text-wrap: balance;
  }
  .vert-image-wrap {
    aspect-ratio: 1/1;
  }
  .vert-image-wrap img {
    border-radius: 36px;
  }
}
/* ==========================================================================
   Animated Photo Covers
   ========================================================================== */
.photo-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--primary-900);
  z-index: 2;
}
/* ==========================================================================
   Zig Zag Panels
   ========================================================================== */
.zig-zag-image {
  min-height: 300px;
  margin-bottom: var(--space-s);
  border-radius: 8px;
  overflow: hidden;
}
.zig-zag:not(.zig-zag:last-of-type) {
  margin-bottom: var(--space-xl);
}
.zig-zag-image img {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.zig-zag-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 700px) {
  .zig-zag {
    display: flex;
    flex-direction: row;
    gap: var(--space-xl);
  }
  .zig-zag:nth-child(odd) {
    flex-direction: row-reverse;
  }
  .zig-zag > * {
    flex: 1 1 50%;
    min-height: 40vh;
  }
  .zig-zag-image {
    margin-bottom: 0;
    aspect-ratio: 1/1;
  }
  .zig-zag-clipped .zig-zag:nth-of-type(odd) .zig-zag-image {
    clip-path: polygon(15% 0, 100% 0%, 100% 100%, 15% 100%, 0% 50%);
  }
  .zig-zag-clipped .zig-zag:nth-of-type(even) .zig-zag-image {
    clip-path: polygon(0% 0%, 85% 0, 100% 50%, 85% 100%, 0% 100%);
  }
}
/* ==========================================================================
   Side Card
   ========================================================================== */
.side-card {
  display: flex;
  flex-direction: column-reverse;
  background-image: repeating-linear-gradient(45deg, rgba(194, 194, 194, 0.1) 0px, rgba(194, 194, 194, 0.1) 2px, transparent 2px, transparent 4px), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255));
}
.side-card > * {
  padding: var(--clamp-m);
}
@media (max-width: 699px) {
  .side-card > div:last-of-type {
    aspect-ratio: 1/1;
    width: 100%;
  }
}
@media (min-width: 700px) {
  .side-card-clipped .side-card:nth-of-type(odd) > *:nth-child(2) {
    /* slant*/
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    /* arrow shape*/
    /*	  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);*/
  }
  .side-card-clipped .side-card:nth-of-type(even) > *:nth-child(2) {
    /* slant*/
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    /* arrow shape*/
    /*    	  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);*/
  }
  .side-card {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--space-l);
    flex-direction: row;
  }
  .side-card:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  .side-card > * {
    flex: 0 0 50%;
  }
  /*
  .side-card > *:first-of-type {
    flex: 0 0 60%;
  }	
  .side-card > *:last-of-type {
    flex: 0 0 40%;
  }		
*/
}
/* ==========================================================================
      Flip Gallery
   ========================================================================== */
.project-gallery-wrapper {
  max-width: 1300px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-l);
}
.project-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  background-color: white;
  padding: var(--clamp-s);
  border: solid 1px var(--gray-400);
  grid-gap: var(--space-xs);
  aspect-ratio: 1.25/1;
  border-radius: 4px;
}
.project-gallery-wrapper h2 {
  text-align: center;
}
.project-gallery img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  border: solid 2px transparent;
}
figure[data-grid="img-1"] {
  grid-area: 1 / 1 / 5 / 7;
}
figure[data-grid="img-2"] {
  grid-area: 5 / 1 / 6 / 2;
}
figure[data-grid="img-3"] {
  grid-area: 5 / 2 / 6 / 3;
}
figure[data-grid="img-4"] {
  grid-area: 5 / 3 / 6 / 4;
}
figure[data-grid="img-5"] {
  grid-area: 5 / 4 / 6 / 5;
}
figure[data-grid="img-6"] {
  grid-area: 5 / 5 / 6 / 6;
}
figure[data-grid="img-7"] {
  grid-area: 5 / 6 / 6 / 7;
}
@media (min-width: 700px) {
  .project-gallery-wrapper {
    gap: var(--space-xxl);
  }
  .project-gallery {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: var(--space-s);
    aspect-ratio: 2/1;
    border-radius: 8px;
  }
  figure[data-grid="img-1"] {
    grid-area: 1 / 1 / 4 / 5;
  }
  figure[data-grid="img-2"] {
    grid-area: 1 / 5 / 2 / 6;
  }
  figure[data-grid="img-3"] {
    grid-area: 1 / 6 / 2 / 7;
  }
  figure[data-grid="img-4"] {
    grid-area: 2 / 5 / 3 / 6;
  }
  figure[data-grid="img-5"] {
    grid-area: 2 / 6 / 3 / 7;
  }
  figure[data-grid="img-6"] {
    grid-area: 3 / 5 / 4 / 6;
  }
  figure[data-grid="img-7"] {
    grid-area: 3 / 6 / 4 / 7;
  }
}
@media (hover:hover) and (pointer:fine) {
  .project-gallery img:hover {
    border: solid 2px var(--primary-500);
  }
}
/* ==========================================================================
   Reviews
   ========================================================================== */
.review-slider-control {
  /*
  background: var(--gray-1100);	
  border: solid 1px var(--gray-600);
  border-radius: 8px;
*/
  margin-inline: auto;
  overflow: hidden;
}
.review-slider-wrapper {
  display: grid;
  max-width: 800px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .review-slider-wrapper {
    width: 90%;
  }
}
.review-slide {
  grid-row: 1;
  grid-column: 1;
  padding: var(--clamp-s);
  display: grid;
  place-items: center;
}
.review-slide-inner {
  background: var(--primary-50);
  border: solid 1px var(--gray-500);
  border-radius: 8px;
  padding: var(--clamp-l);
}
.review-slide:nth-of-type(odd) .review-slide-inner {
  background: var(--primary-900);
  color: white;
}
.review-slide:nth-of-type(odd) .review-author {
  color: white;
}
.review-slide-inner::before, .review-slide-inner::after {
  background: url("../images/quotes.svg") center center no-repeat;
  opacity: 0.25;
  aspect-ratio: 319/252;
}
.review-slide-inner::before {
  width: 5%;
  left: 3%;
  top: 3%;
  transform: rotate(180deg);
}
.review-slide-inner::after {
  width: 18%;
  bottom: 3%;
  right: 3%;
}
.review-slide-stars {
  width: 100px;
  aspect-ratio: 162/29;
  background: url("../images/review-stars.svg") left center no-repeat;
  margin-bottom: var(--space-m);
}
.review-author {
  font-size: 1.1rem;
  color: var(--gray-800);
  text-transform: uppercase;
  margin-bottom: 0;
}
.dragger-icon {
  width: 64px;
  aspect-ratio: 148/169;
  margin-bottom: var(--space-m)
}
/* ==========================================================================
      Mini-CTA Strip of icons
   ========================================================================== */
.mini-cta-wrap {
  /*	background: linear-gradient(180deg, var(--gray-300) 50%, var(--white) 50%);*/
}
.mini-cta {
  padding: 30px 0;
  font-size: 1.1rem;
  line-height: 1.1;
  display: none;
  border-radius: 12px;
  color: white;
}
.mini-cta > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-xs);
}
.mini-cta span {
  display: block;
  font-size: 1.25em;
  font-weight: 600;
}
.mini-cta svg {
  width: 36px;
  fill: var(--white);
  margin-right: 12px;
}
@media (min-width: 768px) {
  .mini-cta {
    display: flex;
    justify-content: space-around;
    margin: auto;
    background: linear-gradient(115deg, var(--primary-700) 35%, var(--primary-800) 35.1%, var(--primary-800) 68%, var(--primary-900) 68.1%);
  }
}
/* ==========================================================================
   Main Contact Section
   ========================================================================== */
.contact-wrap {
  max-width: max-content;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--clamp-l);
  background-image: repeating-linear-gradient(135deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 12px, transparent 12px, transparent 13px), repeating-linear-gradient(45deg, rgb(234, 234, 234) 0px, rgb(234, 234, 234) 4px, transparent 4px, transparent 18px), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  border-radius: 12px;
  box-shadow: var(--shadow-elevation-high);
}
.contact-stars {
  max-width: 120px;
  margin-bottom: var(--space-s);
}
.contact-review-count {
  font-size: 0.875rem;
}
.contact-wrap p {
  text-wrap: balance;
}
.avatars {
  display: flex;
  margin-bottom: var(--space-s);
}
.avatars img {
  border-radius: 100%;
  max-width: 48px;
  border: solid 2px white;
}
.avatars > *:not(:last-child) {
  margin-right: -8px;
}
.contact-wrap a {
  background: var(--action-color);
  background: var(--primary-800);
  color: white;
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 550;
  display: block;
  max-width: max-content;
  display: flex;
  gap: 8px;
  line-height: 1;
  outline: solid 2px transparent;
  transition: all 0.15s linear;
  outline-offset: 0;
}
.contact-wrap a svg {
  width: 0.9lh;
}
.contact-methods {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-s);
  align-items: center;
}
@media (hover:hover) and (pointer:fine) {
  .contact-wrap a:hover {
    outline: solid 2px var(--primary-700);
    outline-offset: 5px;
    ;
  }
}
@media (min-width: 700px) {
  .contact-wrap a {
    padding: 16px 32px;
  }
  .contact-methods {
    flex-direction: row;
  }
}
@media (min-width: 1000px) {
  .contact-wrap::after {
    width: 120px;
    aspect-ratio: 291 /587;
    right: 12px;
    bottom: 0;
    background: url("../images/mailbox.svg") center center no-repeat;
    background-size: contain;
    transform: translateY(20%);
  }
}
/* ==========================================================================
   Clickble FAQ Sections
   ========================================================================== */
.faq-master-control {
  display: grid;
}
.faq-parent-wrap {
  max-width: 920px;
  display: grid;
  gap: 16px;
}
.faq-wrap {
  background: white;
  border: solid 1px var(--gray-200);
  border-radius: 24px;
  cursor: pointer;
}
.faq-question {
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: 20px 40px 0 24px;
  gap: 8px;
}
.faq-wrap h3 {
  color: var(--primary-800);
  line-height: 0.95;
  height: 100%;
  margin-bottom: 20px;
  font-size: 1.4rem;
}
/* ============================
   Plus icon by FAQs
   =========================== */
.faq-toggle {
  aspect-ratio: 1/1;
  margin-top: -8px;
}
.faq-toggle-horizontal, .faq-toggle-vertical {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: var(--primary-700);
}
.faq-toggle-horizontal {
  width: 50%;
  height: 4px;
}
.faq-toggle-vertical {
  height: 50%;
  width: 4px;
}
.faq-answer {
  padding: 0 40px 0 72px;
  height: 0;
  overflow: hidden;
  font-size: 1.4rem;
  color: var(--black);
}
@media (min-width: 920px) {
  .faq-master-control {
    grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 1200px) {
  .faq-wrap h3 {
    font-size: 2rem;
  }
  .faq-toggle {
    aspect-ratio: 1/1;
    margin-top: -4px;
  }
}
/* ==========================================================================
   Footer a tags focus-visible
   ========================================================================== */
footer a:focus-visible {
  transition: outline-offset 50ms ease-out;
  outline: solid 2px currentColor;
  border-radius: 4px;
}
footer a:not(:active):focus-visible {
  outline-offset: 0.3rem;
  transition-duration: 0.25s;
}
/* ==========================================================================
  Footer
   ========================================================================== */
footer {
  isolation: isolate;
  background: var(--primary-1100);
  /*  background-image: radial-gradient(circle at 11% 37%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 50%, transparent 50%, transparent 56%, transparent 56%, transparent 100%), radial-gradient(circle at 82% 7%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 46%, transparent 46%, transparent 88%, transparent 88%, transparent 100%), radial-gradient(circle at 81% 79%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 33%, transparent 33%, transparent 89%, transparent 89%, transparent 100%), radial-gradient(circle at 68% 96%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 8%, transparent 8%, transparent 26%, transparent 26%, transparent 100%), radial-gradient(circle at 69% 20%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 84%, transparent 84%, transparent 86%, transparent 86%, transparent 100%), radial-gradient(circle at 49% 22%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 71%, transparent 71%, transparent 78%, transparent 78%, transparent 100%), radial-gradient(circle at 23% 60%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 6%, transparent 6%, transparent 40%, transparent 40%, transparent 100%), radial-gradient(circle at 86% 33%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 13%, transparent 13%, transparent 98%, transparent 98%, transparent 100%), radial-gradient(circle at 38% 60%, hsla(251, 0%, 28%, 0.05) 0%, hsla(251, 0%, 28%, 0.05) 15%, transparent 15%, transparent 61%, transparent 61%, transparent 100%), linear-gradient(0deg, rgb(9, 28, 22), rgb(9, 28, 22));*/
  padding: var(--space-xl) 0;
  font-size: 1.25rem;
}
footer.has-inner-footer {
  background: none;
}
footer.has-inner-footer .inner-footer {
  background: var(--gray-1100);
  padding: var(--clamp-m);
  border-radius: 16px;
}
footer p {
  margin-bottom: 0;
}
.inner-footer {
  color: white;
}
.inner-footer > *:not(:last-child) {
  margin-bottom: var(--space-m);
}
.footer-section-headline {
  font-size: var(--fs-xl);
  font-weight: 300;
}
/* ==========================
    Social Links
   ========================== */
.social-links-wrap {
  padding: var(--clamp-s);
  display: grid;
  place-items: center;
  max-width: max-content;
  gap: var(--space-s);
  margin-inline: auto;
}
.social-links {
  display: flex;
  gap: var(--space-xxxs);
}
.social-links a {
  transition: scale 0.2s;
}
@media (hover:hover) and (pointer:fine) {
  .social-links a:hover {
    scale: 1.1;
  }
}
.social-links svg {
  fill: white;
  width: 48px;
}
/* ==========================
    Final CTA Email Us
   ========================== */
.footer-email {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-email a {
  background: var(--action-color);
  padding: 12px 24px;
  color: black;
  border-radius: 100px;
  display: flex;
  gap: 6px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  outline: solid 2px transparent;
  transition: all 0.15s linear;
  outline-offset: 0;
  max-width: max-content;
}
.footer-email svg {
  width: 1lh;
}
@media (min-width: 700px) {
  .footer-email a {
    padding: 24px 48px;
    font-size: 2rem;
  }
  .inner-footer > *:not(:last-child) {
    margin-bottom: var(--space-xl);
  }
}
@media (hover:hover) and (pointer:fine) {
  .footer-email a:hover {
    outline: solid 2px white;
    outline-offset: 5px;
    ;
  }
}
/* ==========================
    4 Pack Meta Data
   ========================== */
.footer-meta-wrap, .footer-meta-column {
  display: grid;
  gap: var(--space-m);
}
.footer-meta-wrap > * {}
.footer-meta {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-xs);
}
.footer-meta ul {
  display: grid;
  gap: var(--space-xxs);
}
.footer-meta span {
  display: block;
  font-size: 0.75em;
  font-weight: 300;
}
.footer-meta svg {
  fill: var(--primary-200);
  margin-top: 2px;
}
@media (min-width: 700px) {
  .footer-meta-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-xxl);
  }
  .footer-meta {
    grid-template-columns: 26px 1fr;
    gap: var(--space-xs);
    font-size: 1.4rem;
  }
}
/* ==========================
   Big Footer Text
   ========================== */
.footer-big-text {
  font-size: 6vw;
  font-weight: 650;
  text-align: center;
}
/* ==========================
    Copyright and payments
   ========================== */
.footer-floor {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
  font-size: 1rem;
  padding-top: var(--space-xl);
  border-top: solid 1px rgba(255, 255, 255, 0.1);
}
p.licensed {
  font-size: 1rem;
  text-transform: uppercase;
  text-align: center;
}
@media (min-width: 700px) {
  .footer-floor {
    flex-direction: row;
    justify-content: space-between;
    font-size: revert;
  }
}
.payments {
  display: flex;
  gap: var(--space-xxxs)
}
.payments > * {
  width: 36px;
}
/* ===========================  Footer Memberships ===================== */
.memberships {
  display: flex;
  max-width: max-content;
  margin: auto;
  justify-content: center;
  flex-flow: row wrap;
  background: white;
  padding: 12px var(--clamp-s);
  border-radius: 8px;
}
.memberships > div {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.memberships img {
  max-width: 110px;
  max-height: 80px;
  width: auto;
  height: auto;
}
@media only screen and (min-width:1200px) {
  .memberships img {
    max-width: 200px;
    max-height: 100px;
  }
}
border-radius: 8px;
}
.memberships > div {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.memberships img {
  max-width: 110px;
  max-height: 80px;
  width: auto;
  height: auto;
}
@media only screen and (min-width:1200px) {
  .memberships img {
    max-width: 200px;
    max-height: 100px;
  }
}