:root {
  /* hero section */
  --hero-hdg: clamp(0.875rem, 0.411rem + 2.321vw, 2.5rem);
  --hero-txt: clamp(0.75rem, 0.607rem + 0.714vw, 1.25rem);
  
  /* header and footer */
  --hdr-ftr-md: clamp(0.625rem, 0.482rem + 0.714vw, 1.125rem);
  --hdr-ftr-sm: clamp(0.625rem, 0.589rem + 0.179vw, 0.75rem);
  --hdr-pdng: 0 clamp(0rem, -0.429rem + 2.143vw, 1.5rem);
  --hdr-gap: clamp(1rem, 0.571rem + 2.143vw, 2.5rem);
  --ftr-gap: clamp(1.5rem, 1.357rem + 0.714vw, 2rem);
  
  /* past build cards */
  --bld-hdg: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem);
  --bld-txt: var(--fs-md);
  
  /* policy and testimonial text */  
  --plcy-test: clamp(0.75rem, 0.679rem + 0.357vw, 1rem);
  
  /* plan of action */
  --plan-hdg: clamp(1.25rem, 0.964rem + 1.429vw, 2.25rem);
  --plan-txt: clamp(1rem, 0.714rem + 1.429vw, 2rem);
  --plan-hdg-padding: var(--plcy-test);
  --plan-itm-padding: var(--hero-txt);
  
  /* defaults */     
  --fs-xs: clamp(0.75rem, 0.714rem + 0.179vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.839rem + 0.179vw, 1rem);
  --fs-md: clamp(1rem, 0.929rem + 0.357vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.107rem + 0.714vw, 1.75rem);
  --fs-xl: clamp(0.875rem, 0.482rem + 1.964vw, 2.25rem);
  --fs-xxl: clamp(2rem, 1.714rem + 1.429vw, 3rem);

  /* spacing */
  --common5-10: clamp(0.5rem, 0.357rem + 0.714vw, 1rem);
  --common75-150: clamp(0.75rem, 0.536rem + 1.071vw, 1.5rem);
  --common100-200: var(--plan-txt);
  --pricing150-275: clamp(1.5rem, 1.143rem + 1.786vw, 2.75rem);
  --cntr-mrgn: initial auto;
  --cntr-sctn: 1.5rem auto;
  --xxs-spc: 0.5rem;
  --xs-spc: 0.75rem;
  --sm-spc: 0.875rem;
  --md-spc: 1rem;
  --lg-spc: 1.25rem;
  --xl-spc: 1.5rem;

  /* radius */
  --radius: var(--common5-10);
  --md-rad: var(--md-spc);
  --lg-rad: var(--xl-spc);
  --xl-rad: 2rem;
  
  /* body */
  --body-hdg: var(--fs-xl);
  --body-txt: var(--common75-150);
  
  /* buttons */
  --btn-width: clamp(8rem, 7.143rem + 4.286vw, 11rem);
  --btn-height: clamp(2.75rem, 2.679rem + 0.357vw, 3rem);
  --btn-eng-height: clamp(3.25rem, 3.179rem + 0.357vw, 3.5rem);
  --btn-txt: var(--plcy-test);
  --btn-radius: 2rem;

  /* colors */
  --main-blue: #004aad;
  --lt-bg: #f2f2f2;
  --dk-bg: #333333;
  --lt-txt: #ffffff;
  --dk-txt: #1a1a1a;
  --wood-tone: #c9a46a;
  --skp-lnk-bg: var(--lt-txt);
  --skp-lnk-txt: #111111;
  --skp-lnk-rgb: rgba(0, 0, 0, 0.15);
  --hero-rgb: rgba(51, 51, 51, 0.8);
  --ftr-break-rgb: rgba(0, 0, 0, 0.8);

  /* Box Shadows */
  --skp-link-shadow: 0 2px 8px var(--skp-lnk-rgb);
  --wood-shadow: 10px 10px 20px var(--wood-tone);
  --wood-subtle: 5px 5px 10px var(--wood-tone);
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-sm); }
h6 { font-size: var(--fs-xs); }

h1,
h2,
h3,
h4,
h5,
h6,
#hero-section p {
  font-family: "Montserrat", sans-serif;
  margin-bottom: var(--md-spc);
}

ul {
    list-style-type: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Lato", sans-serif;
  font-size: var(--body-txt);
  background-color: var(--lt-bg);
  color: var(--dk-txt);
  line-height: 1.6;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 1rem; 
  top: 1rem;
  width: auto; height: auto;
  padding: 0.5rem 0.75rem;
  background: var(--skp-lnk-bg);
  color: var(--skp-lnk-txt);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px var(--skp-link-shadow);
  z-index: 10000;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--dk-bg);
  color: var(--lt-txt);
  padding: var(--hdr-pdng);
}

.headerlogo {
  width: 15%;
}

.headerlogo img,
.footer-logo img {
  height: auto;
  width: 100%;
}

.sticky-nav {
  margin: var(--cntr-mrgn);
}

.nav-list {
  display: flex;
  gap: var(--hdr-gap);
  justify-content: center;
  align-items: center;
}

.nav-list a {
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: var(--hdr-ftr-md);
  color: var(--lt-txt);
}

.header-btn {
  display: none;
}

section {
  width: 90%;
  margin: var(--cntr-sctn);
}

.hero-wrapper {
    position: relative;
    width: 100%;
    height: clamp(23rem, 21.286rem + 8.571vw, 29rem);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
}

#hero-section {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    height: 90%;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
    background: var(--hero-rgb);
    color: var(--lt-txt);
    border-radius: var(--radius);
}

#hero-section h1,
#hero-section h2 {
  font-size: var(--hero-hdg);
  text-align: center;
}

#hero-section h3,
#hero-section p {
    font-size: var(--hero-txt);
}

#hero-section .btn-link {
  margin: var(--xs-spc);
}

.hero-cta {
  display: flex;
}

.btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-blue);
    color: var(--lt-txt);
    text-align: center;
    border-radius: var(--btn-radius);
    font-weight: bold;
    text-decoration: none;
    height: var(--btn-height);
    width: var(--btn-width);
    font-size: var(--btn-txt);
    border: 2px outset buttonborder;
}

#customer-focus h2,
#guide-intro h2,
#plan-of-action h2,
#build-options h2,
#testimonials h2,
#final-call h2,
.build-caption h2,
#build-start h2,
#engraved h2,
#materials h2,
#different h2,
#pricing h2,
#call-to-action h2 {
  text-align: center;
  margin-bottom: var(--xxs-spc);
}

#customer-focus li,
#guide-intro li,
#build-options li,
.policy-text li,
#engraved li,
#different li,
#pricing li {
    padding-left: 0.25rem;
}

#customer-focus li::before,
#guide-intro li::before,
#build-options li::before,
.contact-text ul li::before,
.policy-text li::before,
#engraved li::before,
#different li::before,
#pricing li::before {
    content: "🪵 ";
}

.guide-text {
  margin-bottom: var(--sm-spc);
}

.guide-container picture {
  border-radius: var(--radius);
  box-shadow: var(--wood-shadow);
}

.guide-container picture,
.guide-container img {
  display: block;
}

.guide-container picture img {
  object-fit: contain;
  border-radius: var(--radius);
  width: 100%;
}

#plan-of-action {
  background-color: var(--dk-bg);
  color: var(--lt-txt);
  text-align: center;
  padding: var(--common75-150);
  border-radius: var(--radius);
  box-shadow: var(--wood-shadow);
}

#plan-of-action h2,
#plan-of-action .plan-steps {
  background-color: var(--main-blue);
  border-style: inset;
  border-color: var(--main-blue);
  border-radius: var(--radius);
  width: 100%;
  padding: var(--common5-10);
  margin-bottom: var(--common75-150);
  font-size: var(--plan-hdg);
}

.plan-item {
  background-color: var(--main-blue);
  border-style: inset;
  border-color: var(--main-blue);
  border-radius: var(--radius);
  padding: var(--plan-hdg);
  margin-bottom: var(--common75-150);
}

.plan-item:last-of-type {
  margin-bottom: initial;
}

.plan-item h3 {
  font-size: var(--plan-hdg);
}

.plan-item p {
  text-align: justify;
  font-size: var(--plan-txt);
}

.plan-cust {
  font-weight: bold;
  text-decoration: underline;
}

.testimonials-heading {
  text-align: left;
  margin-bottom: var(--common75-150);
}

.build-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--dk-bg);
  border-radius: var(--radius);
  padding: var(--common75-150);
  margin-top: var(--common75-150);
  box-shadow: var(--wood-shadow);
}

.testimonials {
  padding: var(--common75-150);
  background-color: var(--dk-bg);
  border-radius: var(--radius);
  box-shadow: var(--wood-shadow);
}

.testimonial {
  background-color: var(--main-blue);
  padding: var(--common5-10);
  border-radius: var(--radius);
  border-style: inset;
  border-color: var(--main-blue);
  color: var(--lt-txt);
  text-align: left;
  margin-bottom: var(--common75-150);
}

.testimonial:last-of-type {
  margin-bottom: initial;
}

.testimonial .statement {
  font-style: italic;
  margin-bottom: var(--xxs-spc);
}

.testimonial .buyer {
  font-weight: bold;
  font-size: var(--plcy-test);
  text-align: end;
}

.build-first-p {
  margin-bottom: var(--common5-10);
}

.contact-text h2:last-of-type,
.contact-form {
  margin-top: var(--common5-10);
}

.contact-text ul,
.contact-text ol {
  list-style-position: inside;
  margin-bottom: var(--xxs-spc);
}

.contact-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  border-radius: var(--radius);
  padding: var(--common5-10);
  background-color: var(--lt-bg);
  color: var(--dk-txt);
  font-family: "Lato", sans-serif;
  margin-bottom: var(--common5-10);
}

.contact-form textarea {
  border: 2px inset rgb(118, 118, 118);
}

.contact-form input[type="text"]::placeholder,
.contact-form input[type="email"]::placeholder,
.contact-form input[type="tel"]::placeholder,
.contact-form textarea::placeholder {
  font-family: "Lato", sans-serif;
  color: var(--dk-txt);
}

.radio-answers,
.file-upload,
.form-optin {
  border-bottom: 1px solid var(--dk-bg);
}

.radio-answers {
  display: flex;
}

.radio-selection {
  min-width: 220px;
  margin-left: var(--common5-10);
  margin-right: var(--common5-10);
  margin-bottom: var(--common5-10);
}

.form-note {
  font-size: var(--body-txt);
  font-style: italic;
}

.form-optin {
  margin-bottom: var(--common5-10);
}

.contact-form .btn-link,
.contact-form .btn-eng-link {
  margin: var(--common5-10) auto;
  cursor: pointer;
}

.build-email {
  margin: var(--cntr-mrgn);
  padding-bottom: var(--common5-10);
  text-align: center;
}

.build-email a {
  color: var(--dk-txt);
  margin-left: 0.25rem;
}

.past-build-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--common100-200);
  padding: var(--xl-spc) 0;  
}

.build {
  background-color: var(--dk-bg);
  color: var(--lt-txt);
  padding: var(--common75-150);
  border-radius: var(--radius);
  box-shadow: var(--wood-shadow);
  text-align: center;
  display: flex;
  flex: 1 1 280px;
  max-width: 280px;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: clamp(28rem, 26.671rem + 4.81vw, 31rem);
  gap: var(--common5-10);
  position: static;
  float: none;
  cursor: pointer;
}

.build img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: inset var(--dk-bg);
}

.build-caption h2 {
  font-size: var(--bld-hdg);
}

.build-caption p {
  font-size: var(--bld-txt);
}

.build-callout {
  text-align: center;
  margin-top: initial;
}

.build-callout h2 {
  margin-bottom: initial;
}

.build-callout .btn-link {
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--common5-10);
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  justify-content: center;
  align-items: center;
  background-color: rgba(51, 51, 51, 0.9);
  z-index: 1001;
  margin: initial;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
  border-style: groove;
}

.lightbox-picture picture,
.lightbox-picture img{
  display: block;
}

.lightbox-picture picture img {
  object-fit: contain;
  border-radius: var(--radius);
}

.close-btn {
  position: absolute;
  top: var(--md-spc);
  right: var(--md-spc);
  cursor: pointer;
}

#shop-policies {
  display: flex;
  flex-direction: column;
}

.policy-item {
  align-items: start;
  color: var(--dk-txt);
  padding: var(--common5-10);
  border-radius: var(--radius);
  box-shadow: var(--wood-subtle);
  border: 1px outset var(--wood-tone);
  border-left: 6px solid var(--main-blue);
  margin-bottom: var(--common75-150);
}

.policy-text {
  font-size: var(--plcy-test);
  line-height: 1.2;
}

.policy-text p {
  margin-bottom: var(--xs-spc);
}

.policy-text ul {
  padding-left: var(--md-spc);
}

.returns-list,
.accepted-payments {
  margin-bottom: var(--xs-spc);
}

.policy-text li {
  text-indent: -1.25rem;
}

.policy-item a {
  color: var(--dk-txt);
}

.hero-cta-eng {
  align-self: center;
}

.btn-eng-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-blue);
    color: var(--lt-txt);
    text-align: center;
    border-radius: var(--btn-radius);
    font-weight: bold;
    text-decoration: none;
    height: var(--btn-eng-height);
    width: var(--btn-width);
    font-size: var(--btn-txt);
    border: 2px outset buttonborder;
}

#pricing ul > p,
#pricing ul > ul,
.shipping-note {
  margin-left: var(--pricing150-275);
}

.shipping-note {
  padding-left: var(--common5-10);
  border-left: 3px solid var(--main-blue);
  border-radius: var(--radius);
  font-size: var(--body-txt);
  font-style: italic;
}

#pricing h3 {
  margin-top: var(--common5-10);
  margin-bottom: var(--common5-10);
}

footer {
  background-color: var(--dk-bg);
  color: var(--lt-txt);
}

.footer-content {
  max-width: 100vw;
  margin: var(--cntr-mrgn);
  padding: var(--xl-spc);
}

.footer-logo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.footer-logo {
  width: 25%;
}

.footer-nav ul {
  display: flex;
  gap: var(--ftr-gap);
}

.footer-nav a {
  color: var(--lt-txt);
  font-size: var(--hdr-ftr-md);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--ftr-gap);
}

.footer-subscribe {
  width: 100%;
  max-width: 25rem;
}

.footer-subscribe h3 {
  text-align: center;
}

.footer-subscribe form {
  display: flex;
}

.footer-subscribe input[type="email"] {
  padding: 0.25rem var(--md-spc);
  border-radius: var(--xl-rad) 0 0 var(--xl-rad);
  border: none;
  flex: 1;
}

.footer-subscribe button {
  background-color: var(--main-blue);
  color: var(--lt-txt);
  padding: var(--xxs-spc) var(--md-spc);
  border: none;
  border-radius: 0 var(--xl-rad) var(--xl-rad) 0;
}

.footer-social {
  display: flex;
  gap: var(--ftr-gap);
  justify-content: center;
}

.footer-social a {
  color: var(--lt-txt);
  transition: color 0.3s;
}

.footer-social a:hover {
  color: var(--lt-txt);
}

.footer-bottom {
  text-align: center;
  margin-top: var(--md-spc);
  padding-top: var(--md-spc);
  color: var(--lt-txt);
  border-top: 1px solid var(--ftr-break-rgb);
}

.footer-bottom p {
  font-size: var(--hdr-ftr-sm);
}

#thank-you {
  display: flex;
  flex-direction: column;
}

#thank-you p {
  margin-bottom: var(--common5-10);
}

.signature {
  align-self: flex-end;
}

.not-found {
  text-align: center;
}

.not-found a {
  text-decoration: none;
  color: var(--lt-txt);
}

.not-found a:hover {
  font-weight: bold;
  text-decoration: underline;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
}

.icon-20 {
  width: 20px;
  height: 20px; 
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .header-btn {
    display: block;
  }

  #hero-section h2 {
    text-align: left;
  }

  .hero-cta {
    align-self: center;
  }

  .guide-picture {
    max-width: 50%;
    margin: 0 auto;
  }

  .btn-link {
    width: 175px;
  }

  .build {
    min-height: 508px;
  }

  .build-caption h2 {
    min-height: 74px;
  }

  .policy-text li {
    text-indent: -2rem;
  }

  .footer-content {
    display: flex;
    justify-content: space-around;
  }

  .footer-logo-nav {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 50%;
  }
}

@media (min-width: 1280px) {
  header {
    position: sticky;
    top: 0;
    z-index: 5;
  }
  
  .headerlogo {
    max-width: 125px;
    margin-right: 50px;
  }

  .nav-list {
    gap: 2.5rem;
  }

  .nav-list a:hover {
    text-decoration: underline;
    font-weight: bold;
  }

  section {
    max-width: 1400px;
  }

  #customer-focus h2,
  #build-options h2,
  #testimonials h2 {
    text-align: left;
  }

  .guide-container {
    display: flex;
    flex-direction: row-reverse;
    gap: 4rem;
  }

  .guide-text {
    width: 50%;
  }

  .guide-picture {
    width: 50%;
  }

  .guide-picture img {
    width: 100%;
  }

  #plan-of-action {
    padding: 2rem;
  }

  #plan-of-action h2 {
    margin-bottom: 2rem;
  }

  .plan-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  .plan-list.laser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .plan-item {
    min-height: 305px;
    margin-bottom: 0;
  }

  .plan-cust {
    min-height: 78px;
  }

  .build-button {
    padding: 2rem;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem;
  }

  .testimonial {
    margin-bottom: 0;
  }

  .build { 
    min-height: 516px;
  }

  .lightbox {
    max-width: 100dvw;
  }

  .policy-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 2rem;
    margin-bottom: 2rem;
  }

  .policy-text {
    text-indent: 0;
  }

  .build-container {
    display: flex;
    gap: 2rem;
  }

  .contact-text {
    width: 50%;
  }

  .contact-form {
    width: 50%;
  }

  .pricing-examples {
  display: flex;
  gap: var(--common100-200);
  align-items: center;
  }

  .pricing-aside {
  width: 33%;
  background-color: var(--dk-bg);
  color: var(--lt-txt);
  border-radius: var(--radius);
  border: inset var(--dk-bg);
  padding: var(--common5-10);
  }

  .pricing-aside h3 {
  text-align: center;
  font-size: var(--fs-md);
  }

  .pricing-aside p {
  margin-bottom: var(--common5-10);
  font-size: var(--fs-sm);

  }

  .footer-logo {
    max-width: 125px;
  }

  #thank-you {
    width: 60%;
  }
}