@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {
  /* Spacing Scale (4px base unit) */
  --sp-1: 0.25rem; /*  4px */
  --sp-2: 0.5rem; /*  8px */
  --sp-3: 0.75rem; /* 12px */
  --sp-4: 1rem; /* 16px */
  --sp-5: 1.25rem; /* 20px */
  --sp-6: 1.5rem; /* 24px */
  --sp-8: 2rem; /* 32px */
  --sp-10: 2.5rem; /* 40px */
  --sp-12: 3rem; /* 48px */
  --sp-16: 4rem; /* 64px */
  /* Spacing Scale (4px base unit) */

  /* Font Sizes — fluid clamp() scale */
  --font-family: "Plus Jakarta Sans", sans-serif;
  --ff-header: "Lexend", sans-serif;
  --fs-small: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14px → 16px */
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px → 18px */
  --fs-medium: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); /* 18px → 24px */
  --fs-large: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); /* 24px → 36px */
  --fs-xlarge: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); /* 32px → 56px */
  --fw-bold: 700;
  --fw-vbold: 800; /* Font Sizes — fluid clamp() scale */
  /* ── Brand Colors ── */
  --clr-primary: rgba(34, 153, 104, 1); /* main green */
  --clr-primary-hover: rgba(27, 122, 83, 1); /* darkened green for hover */
  --clr-primary-light: rgba(34, 153, 104, 0.1); /* tinted surface */
  --clr-primary-acc: #91fec4; /* light mint accent */
  --clr-white: #ffffff;

  --clr-secondary: rgba(255, 202, 40, 1); /* yellow */
  --clr-secondary-hover: rgba(204, 160, 28, 1); /* darkened yellow for hover */
  --clr-secondary-light: rgba(255, 202, 40, 0.15); /* tinted surface */

  --clr-accent: rgba(79, 195, 247, 1); /* sky blue */
  --clr-accent-hover: rgba(56, 163, 214, 1); /* darkened blue for hover */
  --clr-accent-light: rgba(79, 195, 247, 0.1); /* tinted surface */
  /* ── Text ── */
  --clr-text: rgba(26, 26, 26, 1); /* primary body text */
  --clr-text-muted: rgba(107, 114, 128, 1); /* captions, labels */
  --clr-text-faint: rgba(156, 163, 175, 1); /* placeholders, disabled */
  --clr-text-inverse: rgba(255, 255, 255, 1); /* text on dark backgrounds */
}

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default spacing */
* {
  margin: 0;
  padding: 0;
}

/* Core page defaults */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  font-family: var(--font-family);
  background-color: var(--clr-primary-light);
}

/* Media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Form elements inherit typography */
input,
button,
textarea,
select {
  font-family: inherit;
}

/* Prevent long text overflow */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Lists without bullets when used as UI */
ul,
ol {
  list-style: none;
}

ul li {
  margin-bottom: 0.75rem;
}

.container-item ul  li:before {
   content: "✔";
  display: inline-flex;
  width: 1.5em;
  height: 1.5em;
  color: var(--clr-primary);
  margin-right: 0.5em;
} 

hr.style-one {
  border: 0;
  height: 1px;
  margin: var(--sp-4) 0;
  background-color: var(--clr-primary);
}

/* Links */
a {
  text-decoration: none;
  color: inherit;
}

/* Headings — fluid scale per level */
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ff-header);
  line-height: 1.2;
  text-wrap: wrap;
  white-space: wrap;
  font-weight: var(--fw-bold);
  text-transform: capitalize;
  margin-bottom: var(--sp-2);
}

h1 {
  font-size: var(--fs-xlarge); /* 32px → 56px */
  font-weight: var(--fw-vbold);
}

h2 {
  font-size: var(--fs-large); /* 24px → 36px */
  font-weight: var(--fw-vbold);
}

h3 {
  font-size: var(--fs-medium); /* 18px → 24px */
  font-weight: var(--fw-bold);
}

h4 {
  font-size: var(--fs-base); /* 16px → 18px */
  font-weight: var(--fw-bold);
}

h5,
h6 {
  font-size: var(--fs-small); /* 14px → 16px */
  font-weight: var(--fw-bold);
}
/* Headings — fluid scale per level */

/* ── Header & Nav Layout ── */
header {
  background-color: var(--clr-primary-light);
  position: relative;
  top: 0;
  z-index: 10;
  font-family: var(--ff-header);
}

nav {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* links sit on the right */
  padding: 1rem 2rem;
  position: relative;
}

/* ── Nav Links ── */
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.menu-links a {
  color: var(--clr-grey);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.menu-links a:hover {
  color: var(--clr-secondary);
}

/* ── CTA Button (Free Estimate) ── */
.cta-link {
  background-color: var(--clr-secondary);
  color: var(--clr-grey) !important;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.2s ease !important;
}

.cta-link:hover {
  background-color: #c73652 !important;
  color: #fff !important;
}

/* ── Hamburger Button ── */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

/* Build the 3 bars using ::before, ::after, and a middle shadow */
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  background-color: black;
  border-radius: 3px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* Middle bar via box-shadow on ::before */
.menu-toggle::before {
  box-shadow: 0 8px 0 #fff;
}

/* ── Hamburger X Animation ── */
.menu-toggle.active::before {
  transform: translateY(0px) rotate(45deg);
  box-shadow: none;
}

.menu-toggle.active::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Mobile Styles ── */
@media (max-width: 768px) {
  nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    .menu-toggle {
      display: flex;
    }

    .nav-links {
      display: none;
      flex-direction: column;
      gap: 0;
      width: 100%;
      padding: 0.5rem 0;
    }

    .nav-links.active {
      display: flex;
    }

    .menu-links a {
      display: block;
      padding: 0.85rem 2rem;
      border-bottom: 1px solid var(--clr-primary);
    }

    .menu-links a:hover {
      background-color: var(--clr-primary);
    }

    /* CTA still stands out on mobile */
    .cta-link {
      display: inline-block;
      border-radius: 4px;
    }
  }
}
/* ── Mobile Styles ── */

.section {
  padding-block: clamp(var(--sp-8), 6vw, var(--sp-10));

  .container-sm {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    padding-inline: var(--sp-2);

    @media (width <= 569px) {
      flex-wrap: wrap;
    }
    p {
      margin-bottom: 1rem;
      line-height: 1.7;
    }
  }

  .container-md {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    padding-inline: var(--sp-4);
  }

  .container-lg {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin-inline: auto;
    padding-inline: var(--sp-4);
  }
}

/*Color Classes*/
.bg-primary {
  background-color: var(--clr-primary-light);
}

.bg-secondary {
  background-color: var(--clr-secondary);
}
.bg-accent {
  background-color: var(--clr-accent);
}
.bg-white {
  background-color: var(--clr-white);
}

.tx-primary {
  color: var(--clr-primary);
}
.tx-secondary {
  color: var(--clr-secondary);
}

.fw-bold {
  font-weight: var(--fw-bold);
}
.lrg-text {
  font-size: var(--fs-large);
}

.border-bottom {
  border-bottom: 1px solid var(--clr-primary);
  padding-bottom: var(--sp-2);
  @media (width >= 757px) {
    border: none;
  }
}

/*Color Classes*/

/*Buttons Styling*/
.primary-btn {
  display: inline-block;
  background-color: var(--clr-primary);
  color: var(--clr-white);
  font-family: var(--ff-header);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  border-radius: 10px;
  border: none;
  padding: 0.5rem 1.25rem;
  margin-top: var(--sp-4);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

  &:hover {
    background-color: var(--clr-secondary);
    border-color: var(--clr-secondary);
    color: var(--clr-text);
  }
}

.secondary-btn {
  display: inline-block;
  background-color: transparent;
  color: var(--clr-primary);
  font-family: var(--ff-header);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  border: none;
  padding: 1rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

  &:hover {
    background-color: var(--clr-primary);
    color: var(--clr-white);
  }
}

.outline-btn {
  display: inline-block;
  background-color: transparent;
  color: var(--clr-primary);
  font-family: var(--ff-header);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  border: 2px solid var(--clr-primary);
  padding: 0.5rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

  &:hover {
    background-color: var(--clr-primary);
    color: var(--clr-white);
  }
}
/*Buttons Styling*/

/*Flexbox Classes */
.flex-row-center-wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  @media (width <= 757px) {
    flex-wrap: wrap;
  }
}

.flex-row-stretch-wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: space-between;
  padding: 1rem 0;
  margin-top: var(--sp-4);
  @media (width <= 757px) {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}

.flex-space-between-wrap {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 1rem;
  @media (width <= 757px) {
    flex-direction: column;
  }
}

.flex-col {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 0.75rem;
}

.flex-col-start {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 0.75rem;
  @media (width <= 757px) {
    flex-wrap: wrap;
  }
}
.flex-row-between-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.flex-col-start {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 0.75rem;
}

.flex-container {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--sp-4);
  container-type: inline-size;
  @media (width <= 569px) {
    flex-wrap: wrap;
  }
}
.flex-center {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  place-items: center;
}
/*Flexbox Classes */

/* Wrapper */
.frame-wrapper {
  border-radius: 10px;
  padding: var(--sp-6);
  background-color: white;
}
.text-wrapper {
 padding:1rem 0; 
  text-align: center;
  margin-bottom: var(--sp-4);
  @media (width <= 767px) {
   margin-bottom: var(--sp-2);
  }
}

.img-wrapper {
  max-width: 700px;
  height: auto;
}

.container-wrapper {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  border-radius: 16px;
  background: white;
  .container-item {
    flex: 1 1 450px;
    padding: 1rem;
    max-width: 450px;
    @media (width <= 569px) {
      flex: 1 1 100%;
    }
  }
}

/* Wrapper */

/*Accordion--Styling*/
.accordion {
  background-color: var(--clr-primary-light);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-family: var(--ff-header);
  max-width: 600px;

  .accordion-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    gap: var(--sp-4);

    &::-webkit-details-marker {
      display: none;
    }

    .accordion-label {
      font-weight: var(--fw-bold);
      font-size: var(--fs-base);
      color: var(--clr-primary);
    }

    .accordion-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.3s ease;

      &::after {
        content: "+";
        font-size: var(--fs-medium);
        color: var(--clr-grey);
        line-height: 1;
      }
    }
  }

  .accordion-body {
    padding-block: var(--sp-3);
    padding-inline: var(--sp-2);
    overflow: clip;
    transition:
      all 0.4s ease,
      content-visibility 0.4s ease allow-discrete;

    p {
      color: var(--clr-text);
      font-weight: var(--fw-norm);
      font-size: var(--fs-base);
      line-height: 1.7;
    }
  }

  &[open] {
    border-color: var(--clr-primary);

    .accordion-summary .accordion-icon {
      transform: rotate(45deg);
    }
  }
}
/*Accordion--Styling*/

/*Card Setup*/
.card__wrapper {
  border-radius: 10px;
  padding: 2rem;
  background-color: #fff;
  max-width: 400px;
  text-align: left;
  border-width: 1px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

  .card__title {
    font-family: var(--ff-header);
    font-weight: var(--fw-vbold);
    font-size: var(--fs-medium);
    color: var(--clr-primary);

    cursor: pointer;
  }
  .card__text {
    color: var(--clr-primary);
    line-height: 1.625;
  }
  .card__svg {
    border-radius: 50px;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;

    @media (width <= 569px) {
      width: 3rem;
      height: auto;
      border-radius: 15px;
      padding: 5px;
    }
  }
}
.card__wrapper:hover {
  transform: translateY(-4px); /* optional: lifts the card up */
}

.form-container {
  background: white;
  padding: 2rem 2em;
  margin: 1rem;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 500px;
  .form-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  form > label {
    font-family: var(--ff-header);
    color: var(--clr-primary);
    font-weight: 800;
    margin-top: 0.5rem;
  }
  input#name,
  input#email,
  textarea#msg,
  input#phone,
  select {
    border: none;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #cccc;
  }

  input::placeholder,
  textarea::placeholder {
    color: #999;
    font-size: 0.9rem;
    opacity: 1; /* Firefox reduces opacity by default */
  }
}

input#name,
input#email,
textarea#msg:hover {
  border: 1px solid var(--clr-primary);
}

.site-footer {
  margin: 0 auto;
  padding: 1rem 0.75rem;
  background-color: #ffffff;
  a {
    text-decoration: none;
    color: var(--clr-primary);
    font-size: 0.85rem;
  }
}