/* VARIABLES */

:root { 
  font-size: 14px; 
  --s0: 4px; 
  --s05: 6px; 
  --s1: 8px; 
  --s15: 12px; 
  --s2: 16px; 
  --s25: 20px; 
  --s3: 24px; 
  --s35: 28px; 
  --s4: 32px; 
  --s5: 40px; 
  --s6: 48px; 
  --s7: 56px; 
  --s8: 64px; 
  --s9: 72px; 
  --s10: 80px; 
  --s11: 88px; 
  --s12: 96px; 
  --s16: 128px; 
  
  --gold: #ffb700; 
  --red: #c61a3a; 
  --green1: hsl(152, 15%, 75%); 
  --green2: hsl(120, 58%, 70%); 
  --green3: hsl(161, 100%, 26%); 
  --green3alpha: hsla(161, 100%, 26%,.90); 
  --green35: hsl(161, 100%, 21%); 
  --green4: hsl(161, 100%, 15%); 
  --green5: hsl(163, 100%, 11%); 
  --gray0: hsl(0, 0%, 95%); 
  --gray1: hsl(0, 0%, 90%); 
  --gray2: hsl(0, 0%, 75%); 
  --gray3: hsl(0, 0%, 50%); 
  --gray4: hsl(0, 0%, 34%); 
  --gray5: hsl(0, 0%, 25%); 
  --tan: hsl(38, 49%, 87%);
  --grad1: linear-gradient(to left, hsl(161, 100%, 26%), hsl(161, 100%, 20%));

  --shadow: 4px 4px 16px hsla(0, 0%, 0%, .25); 
  --shadow-large: 4px 16px 64px hsla(0, 0%, 0%, .3); 
  --shadow-large-dark: 4px 16px 64px hsla(0, 0%, 0%, .6); 
  --shadow-light: 4px 4px 16px hsla(0, 0%, 0%, .1); 
  --shadow-button: 2px 2px 4px hsla(0, 0%, 0%, .4);
  --shadow-button-hover: 2px 4px 8px hsla(0, 0%, 0%, .4)
} 


/* GLOBAL */
*,body,html { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; scroll-behavior: smooth; } 
body { display: flex; flex-flow: column nowrap; background-color: white; } 
h1 { font-size: var(--s8); margin-bottom: var(--s8); font-weight: 900; } 
h2 { font-size: var(--s6); margin-bottom: var(--s6); font-weight: 900; } 
h3 { font-size: var(--s4); margin-bottom: var(--s4); font-weight: 900; } 
h4 { font-size: var(--s3); margin-bottom: var(--s2); } 
p { line-height: 1.5; margin-bottom: var(--s2); color: var(--gray4); } 
li { list-style-position: outside; margin-left: var(--s2); margin-bottom: var(--s0); color: var(--gray4); } 
a { text-decoration: none; color: var(--gray5); } 
img { width: 100%; display: block; height: auto; } 
picture { width: 100%; display: block; height: auto; } 


.h1 { font-size: var(--s8); margin-bottom: var(--s8); font-weight: 900; } 
.h2 { font-size: var(--s6); margin-bottom: var(--s6); font-weight: 900; } 
.h3 { font-size: var(--s4); margin-bottom: var(--s2); font-weight: 900; } 
.h4 { font-size: var(--s3); margin-bottom: var(--s2); font-weight: 900; } 
.h5 { font-size: var(--s25); margin-bottom: var(--s2); font-weight: 300; line-height: 1.5; } 
.text-lg { font-size: var(--s25); font-weight: 300; margin-bottom: var(--s25); line-height: 1.5; } 
.text-xl { font-size: var(--s3); margin-bottom: var(--s4); } 

.green3 { color: var(--green3); } 
.card { height: 100%; border-radius: var(--s1); overflow: hidden; background-color: white; box-shadow: var(--shadow-button); transition: all 150ms ease-in-out; } 
.hover-scale:hover { transform: scale(1.03); box-shadow: var(--shadow); } 

[x-cloak] { display: none !important; } 

.selector { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--s3); justify-content: flex-start; align-items: center; align-self: flex-start; } 
.section { width: 100%; padding: var(--s12) var(--s6) var(--s8) } 
.container { max-width: 1080px; margin: auto; } 
.row { display: flex; gap: var(--s4); margin-bottom: var(--s8); } 
.col { flex-basis: 100%; } 
.col-2 { flex-basis: 50% } 
.col-34 { flex-basis: 75% } 
.col-14 { flex-basis: 25% } 
.icon { height: var(--s2); width: var(--s2); position: relative; top: var(--s0); display: inline-block; } 
.inline-link { color: var(--green3); text-decoration: underline; } 
.inline { display: inline!important } 
.pill { display: inline-block; padding: var(--s2) var(--s3); background: var(--gold); color: black; font-size: var(--s2); margin-right: var(--s1); margin-left: 0; font-weight: 700; margin-bottom: var(--s1); border-radius: var(--s16); } 
.hide--desktop { display: none; } 
.green-wrapper { padding-top: 0; padding-bottom: var(--s16); background-color: var(--green3); background-image: linear-gradient(to bottom, var(--green3), var(--green4)) } 
.green-container { background-color: var(--gray0); border-top: solid var(--green3) var(--s2); border-radius: var(--s1); padding: var(--s12); margin-top: calc(-1 * var(--s10)); box-shadow: var(--shadow-large-dark); } 
.btn { background-color: var(--gold); color: black; cursor: pointer; box-shadow: var(--shadow-button); padding: var(--s3) var(--s4); border-radius: var(--s1); border: none; transition: all 150ms; } 
.btn:hover { box-shadow: var(--shadow-button-hover); transform: scale(1.03); } 


/* FORMS GLOBAL*/
fieldset { border: none; margin-bottom: var(--s4); } 
legend { font-size: var(--s4); font-weight: 900; padding-bottom: var(--s2); } 
label { color: var(--gray5); width: 100%; } 
input[type='checkbox'] { width: var(--s3); height: var(--s3); margin-right: var(--s1); } 
input[type='radio'] { width: var(--s3); height: var(--s3); margin-right: var(--s1); } 
input[type='text'],input[type='date'],input[type='tel'],input[type='email'],input[type='number'], select,textarea { width: 100%; margin-top: var(--s0); margin-bottom: var(--s2); border: 1px solid var(--gray2); border-radius: var(--s0); padding: var(--s2); } 
.required { color: var(--red) } 
.label--inline { margin-bottom: var(--s2); display: flex; align-items: center; font-size: var(--s2); } 
.row--form { gap: var(--s2); margin-bottom: var(--s1); } 
.form__heading { font-size: var(--s25); font-weight: 700; margin-top: var(--s4) } 
.form__label { margin-top: var(--s2); font-weight: bold; color: black; } 
.form__short { flex-basis: var(--s16); } 
.form__submit { min-width: 50%; font-size: var(--s25); font-weight: 700; margin-top: var(--s2); } 

/* HEADER */
.announcements { padding: var(--s1); background-color: var(--green3); text-align: center; color: #fff; } 
.announcement__link { color: white; text-decoration: underline; margin-left: var(--s0); } 
.header--secondary { display: flex; justify-content: flex-end; padding: var(--s3) var(--s1) } 
.nav__phone { padding-right: var(--s3); font-size: var(--s2); } 
.header__payment { font-size: var(--s2); color: var(--red); font-weight: 700; text-decoration: underline; } 
.header--primary { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 0 var(--s1); align-items: center; } 
.header .logo { width: 160px; } 
.nav { display: flex; gap: var(--s3); align-items: center; } 
.nav__quote { display: block; padding: var(--s2) var(--s4); background-color: var(--gold); position: relative; border-radius: var(--s0); text-align: center; } 
.nav__quote__notification { display: none; border-radius: 100%; height: 20px; width: 20px; background-color: var(--red); position: absolute; top: -8px; right: -8px; color: #fff; text-align: center; padding-top: 2px; } 
.dropdown__button { z-index: 10; border: none; background-color: transparent; cursor: pointer; padding:var(--s2); font-size: var(--s2); } 
.dropdown__button:hover { text-decoration: underline; } 
.dropdown__active { display: block; position: absolute; width: 100%; left: 0; margin-top:var(--s4); } 
.dropdown__inactive { display: none } 
.dropdown__grid { max-width: 1200px; margin: auto; display: grid; background-color: var(--green3alpha); backdrop-filter: blur(var(--s2)); grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: var(--s2); padding: var(--s6); z-index: 1; box-shadow: var(--shadow-large-dark); border-radius: var(--s1); } 
.dropdown__item { color: white; text-align: center; } 
.dropdown__item__image { height: 100px; object-fit: cover; } 
.dropdown__item__text { padding-top: var(--s1); } 

/* FOOTER */
.footer { background-color: var(--green4); color: white; } 
.footer__top { padding: var(--s6) var(--s6) var(--s8) } 
.footer__tip { padding-bottom: var(--s16); } 
.footer__tip__heading { color: var(--green2); font-size: var(--s2); text-transform: uppercase; letter-spacing: 4px; text-align: center; } 
.footer__tip__text { color: white; font-size: var(--s4); font-weight: 700; letter-spacing: 1px; text-align: center; } 
.footer__heading { font-size: var(--s3); margin-bottom: var(--s2); color: white;} 
.footer__list { margin-bottom: var(--s4); list-style: none; } 
.footer__list__item { margin-bottom: var(--s1); margin-left: 0; } 
.footer__link { color: var(--green1); text-decoration: underline; } 
.footer__hours { color: var(--green1); } 
.footer__logo { display:inline-block; margin-bottom: var(--s4); } 
.footer__text { color: var(--green1); } 
.footer .icon { filter: invert(1); height: var(--s4); width: var(--s4); margin-right: var(--s2); } 
.footer .icon--phone { height: var(--s3); width: var(--s3); margin-right: var(--s2); } 
.footer__phone { color: white; font-size: var(--s3); font-weight: 700; margin-bottom: var(--s1); } 
.footer__address { color: white; } 
.footer__bottom { padding-top: 0; color: white; text-align: center; background-color: var(--green5); padding-top: var(--s4); padding-bottom: var(--s3); } 


/* HOME-HERO */
.hero__selector { grid-template-columns: 1fr 1fr 1fr; width: 100%; } 
.hero__button { display: block; text-align: center; font-size: var(--s25); padding: var(--s3) var(--s4); border-radius: var(--s1); margin-bottom: var(--s4); margin-top: var(--s4); transition: all 300ms; } 
.hero__button--inactive { background-color: var(--gray1); color: var(--gray4); pointer-events: none; } 


.tile { background-color: var(--green35); position: relative; } 
.tile:hover { cursor: pointer; } 
.tile:hover:not(.tile--selected) { transform: scale(1.03); background-color: var(--green3); box-shadow: var(--shadow); } 
.tile--selected { transform: scale(1.1); box-shadow: var(--shadow-large); z-index: 1; background-color: var(--green3); } 
.tile--selected .tile__checkbox__checkmark { display: block; color: var(--red); } 
.tile__img { aspect-ratio: 16/9; object-fit: cover; } 
.tile__name { text-align: center; padding: var(--s1); margin-bottom: 0; color: white; } 
.tile__checkbox { position: absolute; top: var(--s1); right: var(--s1); width: var(--s3); height: var(--s3); background-color: #fff; border-radius: var(--s1); } 
.tile__checkbox__checkmark { display: none; } 
/* HOME-ABOUT */
.about__list { columns: 2; padding-bottom: var(--s4); } 
/* HOME-SERVICES */
.services__deck { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; } 
.service__card__image { aspect-ratio: 16/9; object-fit: cover; } 
.service__name { font-size: var(--s3); margin-bottom: var(--s2); color:var(--green3) } 
.service__card__bottom { padding: var(--s4) var(--s4) var(--s6); } 

/* HOME-OUTDOORS */
.outdoors__list { padding-top: var(--s6); font-size: var(--s2); line-height: 1.5; } 
.outdoors__list__item { padding-top: var(--s2) } 

/* QUOTE PAGE */
.quote__heading { padding-bottom: var(--s8); } 
.quote-container { border-top: var(--gold) solid var(--s2); } 
.quote__selector { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; margin-bottom: var(--s8); } 
.quote__form { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s6); } 
.quote__form__submit { grid-column: 1/-1; display: flex; justify-content: center; min-width: 50%; justify-self: center; font-size: var(--s25); font-weight: 700; } 
.quote__service__deck { padding: var(--s8) 0 0; margin-bottom: var(--s8); border-bottom: solid var(--s0) var(--gold); } 


/* CONTACT PAGE */
.contact__form { display: grid; grid-template-columns: 1fr; gap: var(--s6); } 


/* CATEGORY HERO */
.category__list { margin-top: var(--s2); } 
.category__list__link { font-weight: 700; color: var(--green3) } 
.category__list__item { margin-bottom: var(--s1); } 
.category__image { aspect-ratio: 4/3; object-fit: cover; } 

/* CATEGORY-SERVICES */
.service__item { display: flex; gap: var(--s6); padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: solid 2px var(--gray1); align-items: start; } 
.service__item:last-child { border-bottom: none; margin-bottom: 0; } 
.service__item__text { flex-basis: 66%; } 
.service__item__img { flex-basis: 33%; } 
.service__item h2 { font-size: var(--s35); margin-bottom: var(--s2); color: var(--green3); } 
.service__item h3 { font-size: var(--s25); } 
.service__item h4 { font-size: var(--s2); margin-bottom: 0; color: var(--green3); font-weight: 900; } 
.service__item p { margin-bottom: var(--s3); color: var(--gray4); } 
.service__item--cat h2 { display: none; } 
.service__item--cat h3 { font-size: var(--s3); } 
.service__item__cta { display: flex; padding-top: var(--s6);text-align: center;justify-content: center; flex-direction: column; gap: var(--s4);}
.service__item__cta__button {font-size: var(--s3);}
.service__item__cta__phone {text-align:center; font-size:var(--s3); font-weight: 700; margin-bottom: var(--s1); } 
.service__item__cta__icon { height: var(--s3); width: var(--s3); margin-right: var(--s2); } 


/* PAYMENTS PAGE */
.payment { max-width: 750px; margin-bottom: var(--s6); } 
.payment__wrapper { padding-top: var(--s4); } 



/* APPLY PAGE */
.apply__form { margin-top: var(--s8); } 


/* PRIVACY PAGE */
.privacy h1 { font-size: var(--s3); margin: var(--s4) 0;  font-weight: 900; } 
.privacy h2 { font-size: var(--s2); margin: var(--s3) 0; font-weight: 900; } 
.privacy h3 { font-size: var(--s2); margin: var(--s2) 0; font-weight: 900; } 
.privacy p { line-height: 1.5; margin-bottom: var(--s1); color: var(--gray4); } 
.privacy li { line-height: 1.5;} 



@media screen and (max-width:1080px) { 
  .services__deck{
    grid-template-columns: 1fr 1fr;
  }
  .hero__selector {
    grid-template-columns: 1fr 1fr;
  }
  .tile__img { aspect-ratio: 2.5; } 

}

@media screen and (max-width:600px) { 
  h2 { font-size: var(--s4); margin-bottom: var(--s3); font-weight: 900; } 
  h3 { font-size: var(--s3); margin-bottom: var(--s3); font-weight: 900; } 
 .section { padding:var(--s4) var(--s15) } 
 .row { flex-direction: column; gap: var(--s2); } 
 .green-wrapper { padding-bottom: var(--s12); } 
 .green-container { padding: var(--s5) var(--s3); margin-top: calc(-1 * var(--s12)); } 
 .hide--mobile { display: none; } 
 .hide--desktop { display: block; } 


 .h2 { font-size: var(--s4); margin-bottom: var(--s3); font-weight: 900; } 
 .text-lg { font-size: var(--s2); font-weight: 300; margin-bottom: var(--s2); line-height: 1.5; } 
 .text-xl { font-size: var(--s2); margin-bottom: var(--s2); } 
 .reverse { flex-direction: column-reverse; } 



/* HEADER */
.header--secondary { display: flex; justify-content: space-evenly; padding: var(--s3) var(--s1) } 
.nav__quote { padding: var(--s1) var(--s1); width: 90px; } 
.nav { gap: var(--s1) } 
.header .logo { width: 120px; } 
.dropdown__wrapper { padding: var(--s1) var(--s1); margin-top: var(--s4); } 
.dropdown__grid { grid-template-columns: 1fr 1fr; gap: var(--s2); padding: var(--s25); } 
.dropdown__item__image { height: 80px; } 
.dropdown__button {padding-left:var(--s0); padding-right: var(--s0); } 

/* FOOTER */
.footer__top { padding: var(--s2); } 
.footer__list { margin-bottom: var(--s4); list-style: none; } 
.footer__list__item { display: block; padding-bottom: var(--s15); margin-bottom: var(--s1); margin-left: 0; } 
.footer__tip { padding-bottom: var(--s6); } 
.footer__tip__text { color: white; font-size: var(--s25); font-weight: 700; letter-spacing: 1px; text-align: center; padding: 0 var(--s2); } 


 /* HOME - HERO */
 .hero { margin-top: var(--s2); } 
 .hero__heading { font-size: var(--s4); margin-bottom: var(--s2); } 
 .hero__selector { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s15) } 
 .hero__subheading { font-size: var(--s2); font-weight: 300; margin-bottom: 0; line-height:1.4 } 
 .tile--selected { transform: scale(1.05); } 
 .tile__img { aspect-ratio: 2.5; } 
 .tile__name { font-size: var(--s15); padding: var(--s0); } 
 .hero__button { font-size: var(--s2); } 
 /* HOME - ABOUT */
 .services__deck { grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s6); margin-bottom: var(--s6); } 
 .about__list { columns: 1; color: var(--gray4); } 


/* SERVICE PAGE */
.category__row { flex-direction: column-reverse; } 
.category__image { aspect-ratio: 3; } 
 
/* QUOTE PAGE */
 .quote__service__deck { padding: var(--s4) 0 0; margin-bottom: var(--s8); border-bottom: solid var(--s0) var(--gold); } 
 .pill { padding: var(--s05) var(--s1); font-size: var(--s15); margin-right: var(--s1); margin-left: 0; font-weight: 700; margin-bottom: var(--s1); border-radius: var(--s16); } 

/* FORMS*/
.row--form { gap: var(--s0); margin-bottom: var(--s0); } 
legend { font-size: var(--s3); } input[type='text'],input[type='date'],input[type='tel'],input[type='email'],select,textarea { margin-top: var(--s0); margin-bottom: var(--s0); } 
.form__short { flex-basis: 100%; width: var(--s8); } 

.quote__form { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); } 
.quote__form__submit { width: 100%; } 
.quote__service__deck { padding: var(--s8) 0 0; margin-bottom: var(--s8); border-bottom: solid var(--s0) var(--gold); } 
.form__submit { width: 100%; } 
 }