@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&display=swap');

:root {
  --circle-bg: #dedede;
}

html {
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  padding: 0;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

#contact textarea {
	font-family: "Inter", sans-serif;
}

h1,
h2,
h3 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0;
  padding: 0;
}

h1, 
h2 {
	margin-bottom: 1rem;
}


section {
  box-sizing: border-box;
  width: 100%;
  /*min-height: 100vh;*/
    padding: 4rem 6rem;

}

p {
	margin: 0 0 1rem 0;
}

.nav a.button,
a.button {
	background-color: #000;
	color: #fff;
}

/* Reset the UL to look like a nav bar */
.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make items sit inline */
.nav li {
  display: inline-block;
}

/* Space items without touching the first */
.nav li + li {
  margin-left: 1rem; /* tweak to taste */
}

/* Links */
.nav a,
.button {
  display: block;              /* bigger tap/click target */
  padding: .6rem 1rem;
  text-decoration: none;
}

/* Hover/focus states */
.nav a:hover,
.nav a:focus,
a.button:hover,
a.button:focus {
  text-decoration: underline;
}

.nav a:focus-visible {
  outline: 2px solid #000; /* accessibility */
  outline-offset: 2px;
}

.button {
 display: inline-block;          /* lets padding work without filling the row */
  padding: 0.6rem 1rem;  
  background: #000;
  color: #fff;
  text-decoration: none;
  line-height: 1;                 /* tidy vertical sizing */
  /* remove any inherited flex growth */
  flex: 0 0 auto;                 
  align-self: flex-start;   
}



#downloadButton {
	text-align: right;
}

#hero {
  display: grid;
  grid-template-rows: auto 1fr;
	padding-top:1.5rem;
	padding-bottom: 0;
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hero-inner .col {
  flex: 1 1 50%;
  min-width: 0;
}

.smallText {
	font-size: 0.9rem;
	font-style: italic;
}

/* make each span sit on its own line */
.hero-title .line {
  display: block;            /* forces a line per span */
 
}

	.hero-inner .col:first-child {
  position: relative;
  z-index: 3;            /* text above everything in the hero */
}


.site-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  /* optional if you want it to float over content as you scroll */
  /* position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); */
}

/* Reset the UL to look like a nav bar */
.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make items sit inline */
.nav li {
  display: inline-block;
}

/* Space items without touching the first */
.nav li + li {
  margin-left: 1rem; /* tweak to taste */
}

/* Links */
.nav a {
  display: block;              /* bigger tap/click target */
  padding: .6rem 1rem;
  text-decoration: none;
	color: #000;
}

/* Hover/focus states */
.nav a:hover,
.nav a:focus {
  text-decoration: underline;
}

.nav a:focus-visible {
  outline: 2px solid #000; /* accessibility */
  outline-offset: 2px;
}


.navCol {
  flex: 1;
}

.col {
  flex: 1;
}


  .circle-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center; /* ✅ stops stretching */
  width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
  z-index: 1;
}

.heroCircle {
width: 90%;
  height: auto; /* ✅ let aspect-ratio determine height */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--circle-bg, #dedede);
}

.emp {
  border-bottom: 2px solid;
}

.heroImg {
  position: absolute;
  display: block;
  height: auto;
}



 .img-a {
   width: 36%;
    top: 4%;
    left: 14%;
    z-index: 3;
    transform: rotate(358deg);
}

.img-b {
         transform: rotate(5deg);
    width: 32%;
    bottom: 12%;
    left: 41%;
    z-index: 2;
}

.img-c {
     width: 28%;
    top: 17%;
    right: 6%;
    z-index: 1;
    transform: rotate(11deg);
}



.circle {
  border-radius: 50%;
  background: var(--circle-bg, #dedede);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* The magic centering */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  padding: 11%;
}



#faqContainer h2 {
	 font-size: 5rem;
}

.person {
  position: absolute;
  bottom: 0;
  height: auto;
  object-fit: contain;
  z-index: 3;
  pointer-events: none; /* clicks go through (optional) */
}

#not-happy {
  width: 33%;
  left: -17%;
}

#full-set {
  right: -22%;
  width: 50%;
}

.compare {
  width: 70vw;
  border-collapse: collapse;
  table-layout: fixed; /* makes column widths predictable */
}

#mainFeatures th {
        padding: 0 0.4rem;
}

/* Column widths (CSS-only) */
.compare thead th:nth-child(1),
.compare tbody td:nth-child(1) { width: 40%; }

.compare thead th:nth-child(2),
.compare tbody td:nth-child(2) { width: 12%; text-align: center;}

.compare thead th:nth-child(3),
.compare tbody td:nth-child(3) { width: 12%; text-align: center;}

/* (Optional) keep long text from overflowing */
.compare th, .compare td { word-wrap: break-word; }


.compare p {
	padding: 0;
    margin: 0;
}

.featuresHeadings {
font-weight:bold;
	text-align: left;
}

#mainFeatures {
	font-family: "Oswald", sans-serif;
	font-size: 1.6rem;
}



/* accordian for faq */
#faqContainer {
  width: 100%;
  margin: auto;
}

summary {
  position: relative;
  cursor: pointer;
  background-color: #000;
  color: #fff;
 padding: .7rem 1.5rem;
    border-radius: 200px;
	margin-bottom: 2px;
}

.details::details-content {
  display: block;
  block-size: 0;
  overflow: hidden;
  transition-property: block-size, content-visibility;
  transition-duration: 0.5s;
  transition-behavior: allow-discrete;
}

.details[open]::details-content {
  /* Fallback for browsers that don't support calc-size() function */
  block-size: auto;

  /* calc-size() function allows transition to height: auto; */
  block-size: calc-size(auto, size);
}

/* make space for the icon */
summary {
  position: relative;
  padding-right: 3rem;
  border-radius: 9999px;
}

/* hide the native details marker */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

/* white circle + centered black chevron */
summary::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);      /* vertical centering */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;

  /* perfectly centered chevron */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M8 5l8 7-8 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

/* optional: rotate arrow when the row is open */
details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.details__content {
	padding: 1.5rem;
}


bold {
  font-weight: bold;
}



td {
  padding:  0;
}

.compare th {
	padding-top: 1rem;
}



#elements .row{display:flex;align-items:center;gap:3rem; width:80%;     margin: 2rem auto;}
  #elements .row.reverse{flex-direction:row-reverse}

  #elements .media{width:20%;  aspect-ratio:1/1; border-radius:50%; background: var(--circle-bg, #dedede); object-fit:cover; display:block}
  #elements .copy{width:60%}
  #elements .center{text-align:center}

/* Right-align copy in the reversed (middle) row */
#elements .row.reverse .copy { 
  text-align: right;
}

#elements .resp-video{
    display:block;
    width:40%;
    height:auto;  
}

	#elements h2 {
	    font-size: 2rem;
	}

.footerNav {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make items sit inline */
.footerNav li {
  display: inline-block;
}

/* Space items without touching the first */
.footerNav li + li {
  margin-left: 1rem; /* tweak to taste */
}

/* Links */
.footerNav a {
  display: block;              /* bigger tap/click target */
  padding: .6rem 1rem;
  text-decoration: none;
}

/* Hover/focus states */
.footerNav a:hover,
.footerNav a:focus {
  text-decoration: underline;
}

.footerNav a:focus-visible {
  outline: 2px solid #000; /* accessibility */
  outline-offset: 2px;
}

.footerNav a {
	color: #000;
}

/*contact us page*/


  /* --- Contact form (overwrite block) --- */
#contact .wrap{
  max-width: 80%;           /* fixed, avoids ultra-wide rows */
  margin: 0 auto;
  padding: 0 1rem;            /* small side padding for safety */
}

#contact h1{
  font-family: Oswald, system-ui, sans-serif;
  font-size: 1.8rem;
  margin: 0 0 .25rem;
}

#contact p.lead{ margin: 0 0 1rem; color:#444; }

#contact .row{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;     /* prevents cross-axis “overlap” look */
}

#contact .row .col{
  flex: 1 1 320px;            /* two columns; wrap below ~320px each */
  min-width: 0;               /* let inputs shrink inside flex items */
}

#contact label{
  display: block;
  margin: .75rem 0 .35rem;
}

.consent a {
	color: #000;
	font-weight: bold;
}

#contact input[type=text],
#contact input[type=email],
#contact select,
#contact textarea{
  box-sizing: border-box;     /* stops padding/border from overflowing */
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1rem;
  background: #fff;
}

#contact textarea{ min-height: 160px; }

#contact .consent{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-top: .6rem;
}

#contact .hp{                 /* honeypot */
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#contact button {
    margin-top: 1rem;
    padding: .85rem 1.25rem;
    border: 0;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
}



#contact button[disabled]{ opacity: .6; cursor: not-allowed; }

#contact .ok{
  background:#ecfff1;
  border:1px solid #b5e2c4;
  padding:.75rem;
  border-radius:10px;
  margin:.5rem 0;
}

#contact .err{
  background:#fff3f3;
  border:1px solid #f0c2c2;
  padding:.75rem;
  border-radius:10px;
  margin:.5rem 0;
}

#contact small{ color:#666; }
#contact .note{ font-size:.9rem; color:#555; margin-top:.25rem; }

/* Stack to single-column on small screens */
@media (max-width: 640px){
  #contact .row .col{ flex: 1 1 100%; }
}





/* 1730px and up */
@media (min-width: 1730px) {
	
	#logo img {
max-width: 30%;
}
	
	.hero-title .line:nth-child(1) { font-size:5.7rem; line-height:5.5rem; }
.hero-title .line:nth-child(2) { font-size: 11rem; line-height: 11rem;}
.hero-title .line:nth-child(3) { font-size: 3.28rem; line-height: 3.28rem;}
 

	

	
	.compare {
    width: 23vw;
}
	

	
	.circle {
    padding: 6%;
}
	
	.circle h2 {
    font-size: 8rem;
    top: -4rem;
    text-align: center;
		       
        position: absolute;
      
        left: 0;
        right: 0;
        text-align: center;
}
	
	#faqContainer h2 {
    font-size: 7rem;
}
	
	#faqContainer {
    width: 80%;
    margin: auto;
}
	
}

@media (min-width: 1200px) and (max-width: 1729px) {
	
	#logo img {
max-width: 40%;
}
	
	nav {
		margin-bottom: 2rem;
	}
	
	.hero-title .line:nth-child(1) { font-size: 3.7rem; line-height:3.5rem; }
.hero-title .line:nth-child(2) { font-size: 7.1rem; line-height: 7.1rem;}
.hero-title .line:nth-child(3) { font-size: 2.13rem; line-height: 3.13rem;}

 .hero-inner .col {
    flex: 0 1 auto; /* stop using 50% (which becomes 50% height in column) */
    width: 100%;
  }

  .circle h2 {
           font-size: 8rem;
        top: -3rem;
         position: absolute;
    left: 0;
    right: 0;
	 text-align: center;
	}
	  
	  #faqContainer h2 {
    font-size: 8rem;
}
  

  .circle {
    font-size: 1rem;
  }

  #full-set {
    right: 9%;
    width: 30%;
  }

  #not-happy {
    width: 20%;
    left: 11%;
  }


  .person {
    position: absolute;
    bottom: 25%;
  }

.compare {
    width: 35vw;
}
	
	    #full-set {
        right: -8%;
        width: 35%;
    }
	
	    #not-happy {
        width: 23%;
        left: -6%;
    }
	
}
@media (min-width: 881px) and (max-width: 1199px) {
	
	#logo img {
max-width: 55%;
}
	
	nav {
		margin-bottom: 3rem;
	}
	
	.hero-title .line:nth-child(1) { font-size: 2.5rem; line-height:2.3rem; }
.hero-title .line:nth-child(2) { font-size: 4.7rem; line-height: 4.7rem;}
.hero-title .line:nth-child(3) { font-size: 1.4rem; line-height: 2.4rem;}
	
 
  .hero-inner .col {
    flex: 0 1 auto; /* stop using 50% (which becomes 50% height in column) */
    width: 100%;
  }

  .circle h2 {
           font-size: 8rem;
        top: -3rem;
         position: absolute;
    left: 0;
    right: 0;
	 text-align: center;
	}
	  
	  #faqContainer h2 {
    font-size: 8rem;
}
  

  .circle {
    font-size: 1rem;
  }

  #full-set {
    right: 9%;
    width: 30%;
  }

  #not-happy {
    width: 20%;
    left: 11%;
  }


  .person {
    position: absolute;
    bottom: 25%;
  }

.compare {
    width: 35vw;
}
	
	    #full-set {
        right: -8%;
        width: 35%;
    }
	
	    #not-happy {
        width: 23%;
        left: -6%;
    }
	
}

@media (max-width: 880px) {
	
	#logo img {
max-width: 100%;
}
	
	nav {
		margin-bottom: 3rem;
	}
	
	.hero-title .line:nth-child(1) { font-size: 2.3rem; line-height:2.1rem; }
.hero-title .line:nth-child(2) { font-size: 4.4rem; line-height: 4.4rem;}
.hero-title .line:nth-child(3) { font-size: 1.31rem; line-height: 1.6rem;}
	
	
  section {
    padding: 2rem 2rem;
  }
	
	#elements .row,
#elements .row.reverse {
  flex-direction: column;    /* stack items vertically */
  align-items: stretch;      /* let children fill width */
  gap: 1rem;                 /* a bit less vertical gap on mobile */
  width: 100%;               /* full width on small screens */
}

#elements .row .resp-video,
#elements .row.reverse .resp-video {
  width: 100%;      /* make the video fill the row */
  max-width: 720px; /* optional limit so it doesn't go huge on some devices */
  height: auto;
  margin: 0 auto;   /* centre the video */
}

#elements .row .copy,
#elements .row.reverse .copy {
  width: 100%;
  padding: 0 1rem;  /* breathing room for the text */
  box-sizing: border-box;
  text-align: left; /* keep text left-aligned (change to center if you prefer) */
}

/* Ensure the visual order is video first, text second on all rows */
#elements .row .resp-video { order: 0; }
#elements .row .copy      { order: 1; }
#elements .row.reverse .resp-video { order: 0; }
#elements .row.reverse .copy      { order: 1; }
	
	.img-a {
          width: 45%;
        top: -3%;
        left: 2%;
        z-index: 3;
        transform: rotate(357deg);
}
	
	.img-b {
          width: 39%;
        bottom: 0%;
        left: 34%;
        z-index: 2;
        transform: rotate(4deg);
}
	
	.img-c {
              width: 34%;
        top: 14%;
        right: 3%;
        z-index: 1;
        transform: rotate(8deg);
}
	
	.person {
    position: absolute;
    bottom: 54%;
		display: none;
  }
	
	#full-set
 {
    right: 9%;
        width: 19%;
    
}
	
	#not-happy {
		width: 13%;
        left: 10.5%;
}
	
	
  
    .heroCircle {
    position: absolute;      /* out of flow, won’t widen layout */
    width: 120vw;            /* big background circle */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--circle-bg, #dedede);
    top: 50%;
    right: -22vw;            /* overhang to the right */
    transform: translateY(-50%);
    pointer-events: none;
    z-index: -1;            
  
  }
	
	.circle h2
 {
    font-size: 5rem;
    position: absolute;
    top: -3rem;
    left: 0;
    right: 0;
	 text-align: center;
}

  .hero-inner {
    flex-direction: column;
  }
	
	.circle_content {
		width: 68vw;
	}

  .hero-inner .col {
    flex: 0 1 auto; /* stop using 50% (which becomes 50% height in column) */
    width: 100%;
  }

  h1 {
    font-size: 4rem;
    line-height: 4rem;
  }
	
.compare {
    width: 80vw;
}
	
	#mainFeatures {
    font-size: 1.3rem;
}
	
 /* Turn the first column into a pass-through */
  .hero-inner .col:first-child {
    display: contents; /* exposes H1 + P as siblings in the flex flow */
  }

  /* Order the three pieces */
  .hero-title { order: 0; }
  .hero-inner .col:last-child { order: 1; } /* the circle column */
  #hero p { order: 2; }

  /* Keep text above the background circle */
  .hero-title,
  #hero p {
    position: relative;
    z-index: 3;
  }

  /* Optional spacing polish */
  .hero-title { margin-bottom: 1rem; }
  #hero p { margin-top: 1rem; }



}




/* base */
.nav-toggle{ display:none; }

/* hamburger look */
.nav-toggle{
  background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative;
}
.nav-toggle .bar,
.nav-toggle::before,
.nav-toggle::after{
  content:"";
  position:absolute; left: 10px; right: 10px; height: 2px; background:#111;
  transition: transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
}
.nav-toggle .bar{ top: 21px; }
.nav-toggle::before{ top: 14px; }
.nav-toggle::after{ bottom: 14px; }

/* open state (turn into an X) */
body.nav-open .nav-toggle .bar{ opacity:0; }
body.nav-open .nav-toggle::before{ top: 21px; transform: rotate(45deg); }
body.nav-open .nav-toggle::after{ bottom: 21px; transform: rotate(-45deg); }

/* responsive menu */
@media (max-width: 880px){
  .site-nav-container{ position: relative; }

  .nav-toggle{ display:block; }

  /* hide the inline nav; show as dropdown when open */
  .nav{
    display:none;
    position:absolute; top:100%; right:0;
    background:#fff;
    margin:0; 
	list-style:none;
    min-width: 220px; box-shadow: 0 12px 30px rgba(0,0,0,.12);
    z-index: 20;
  }
  body.nav-open .nav{ display:block; }

  /* vertical items */
  .nav li{ display:block; }
  .nav li + li{ margin-left:0; }       /* override your inline spacing */
  .nav a{ display:block; padding:.8rem 1rem; }
}


@media (max-width: 880px){
  .site-nav-container{ justify-content: flex-start; } /* stop auto spacing */
  #logo{ order: 0; }
  #downloadButton{ order: 1; }          /* keeps the UL anchor point for dropdown */
  .nav-toggle{
    order: 2;                            /* make it the last flex item */
    margin-left: auto;                   /* push it to the far right */
  }
}