/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --green: #28533a;
  --green-dark: #173b29;
  --green-light: #e8f0ea;
  --cream: #f7f5ef;
  --tan: #c99b64;
  --charcoal: #242824;
  --muted: #687169;
  --line: #dfe4de;
  --white: #fff;
  --radius: 20px;
  --shadow: 0 20px 60px rgba(22, 52, 34, .12)
}


/* ---- Base reset ---- */

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: var(--charcoal);
  background: #fff;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6
}

img {
  max-width: 100%
}

a {
  color: inherit
}


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto
}

.section {
  padding: 110px 0
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  background: #fff;
  padding: 10px;
  z-index: 99
}

.skip-link:focus {
  left: 10px
}

.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
}


/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(30, 62, 42, .08)
}

.nav-wrap {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 700 22px Manrope
}

.brand strong {
  color: var(--green)
}

.brand-mark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 32px;
  height: 29px
}

.brand-mark i {
  display: block;
  width: 7px;
  background: var(--green);
  border-radius: 2px 2px 0 0
}

.brand-mark i:nth-child(1) {
  height: 17px
}

.brand-mark i:nth-child(2) {
  height: 27px
}

.brand-mark i:nth-child(3) {
  height: 21px
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px
}

.site-nav>a:not(.button) {
  text-decoration: none;
  font-weight: 600;
  font-size: 14px
}

.site-nav>a:not(.button):hover {
  color: var(--green)
}


/* ---- Buttons ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 23px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: white;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(40, 83, 58, .25);
  transition: .2s transform, .2s background
}

.button:hover {
  transform: translateY(-2px);
  background: var(--green-dark)
}

.button-small {
  padding: 11px 18px;
  font-size: 14px
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  margin: 5px
}


/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(155deg, #bad2bb 0%, #6e9971 56%, #31563d 100%)
}

.hero-content {
  position: relative;
  z-index: 3;
  color: #fff;
  padding-top: 70px
}

.hero-content h1 {
  max-width: 780px;
  margin: 12px 0 22px;
  font: 800 clamp(48px, 7vw, 84px)/1.02 Manrope;
  letter-spacing: -.045em
}

.hero-copy {
  max-width: 680px;
  font-size: 20px;
  color: rgba(255, 255, 255, .9)
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 800;
  color: var(--green)
}

.hero .eyebrow {
  color: #d9ead9
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px
}

.hero .button {
  background: #fff;
  color: var(--green-dark)
}

.text-link {
  font-weight: 700;
  text-decoration: none
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 37, 24, .82) 0%, rgba(17, 50, 31, .55) 44%, rgba(18, 48, 30, .1) 74%);
  z-index: 2
}


/* Hero background photo (fills .hero-art, sits behind .hero-shade) */
.hero-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* ============================================================
   TRUST STRIP
   ============================================================ */

.trust-strip {
  position: relative;
  z-index: 4;
  margin-top: -38px
}

.trust-grid {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 12px
}

.trust-grid div {
  padding: 6px 26px;
  border-right: 1px solid var(--line)
}

.trust-grid div:last-child {
  border: 0
}

.trust-grid strong,
.trust-grid span {
  display: block
}

.trust-grid strong {
  font: 700 17px Manrope;
  color: var(--green-dark)
}

.trust-grid span {
  font-size: 13px;
  color: var(--muted)
}


/* ============================================================
   SHARED SECTION HEADING
   ============================================================ */

.section-heading {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 50px
}

.section-heading h2,
.delivery h2,
.contact h2 {
  font: 800 clamp(36px, 5vw, 58px)/1.08 Manrope;
  letter-spacing: -.035em;
  margin: 10px 0 0;
  color: var(--green-dark)
}

.section-heading>p {
  color: var(--muted);
  font-size: 17px;
  margin: 0
}


/* ============================================================
   PRODUCT CARDS
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px
}

.product-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 35px rgba(30, 58, 39, .06);
  transition: .25s transform, .25s box-shadow
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow)
}

.product-featured,
.product-wide {
  grid-column: 1/-1;
  grid-template-columns: 1.25fr .75fr
}

.product-image {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background: #c9dacb
}


/* Product photo fills the image half of each card, edge to edge, no matter how tall
   the card ends up (that's set by the body copy, not the photo). Absolutely
   positioning the <img> takes it out of normal flow entirely, so its own aspect
   ratio can never inflate .product-image's height — .product-image just stretches
   to match the card's row height (CSS Grid's default), and the <img> fills that box. */
.product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* WPC Composite Fence (.product-wide) is a deliberate exception to the crop-to-fit-box
   rule above: it's a single-color card with no swatch to keep visually stable across, so
   there's no reflow risk in letting its photo drive the card's height instead. Back to
   normal flow (not the absolute-fill every other .product-image img gets) so the full
   exploded-components shot stays visible rather than getting cropped at a fixed height. */
.product-wide .product-image img {
  position: static;
  height: auto;
  object-fit: contain;
}


.product-body {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.product-number {
  font: 800 13px Manrope;
  letter-spacing: .16em;
  color: var(--tan);
  margin: 0
}

.product-body h3 {
  font: 750 27px Manrope;
  margin: 8px 0 12px;
  color: var(--green-dark)
}

.product-body>p:not(.product-number) {
  color: var(--muted);
  margin: 0
}

.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 2px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

.price {
  font: 800 26px Manrope;
  color: var(--green-dark)
}

.price-prefix {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted)
}

.price sup {
  font-size: 14px;
  font-weight: 700;
  top: -.8em
}

.price-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted)
}

.price-note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted)
}

.color-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px
}

.color-row>span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  margin-right: 4px
}

.swatch {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55)
}

/* Swatches with a data-price get a pointer + a ring on hover/focus/selection —
   these are the ones script.js wires up to swap the price-row on interaction. */
.swatch[data-price] {
  cursor: pointer;
  transition: box-shadow .15s ease
}

.swatch[data-price]:hover,
.swatch[data-price]:focus-visible,
.swatch[data-price].active {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 2px var(--green-dark);
  outline: none
}

.swatch.white {
  background: #f7f7f3
}

.swatch.tan {
  background: #d8c99a
}

.swatch.gray {
  background: #b7b9bf
}

.swatch.teak {
  background: linear-gradient(90deg, #9a5a35, #c77b43, #87502f)
}

.image-label {
  position: absolute;
  left: 20px;
  top: 20px;
  background: rgba(255, 255, 255, .9);
  padding: 8px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em
}

.spec-links {
  display: flex;
  gap: 24px;
  margin-top: 28px
}

.spec-links a {
  font-weight: 700;
  color: var(--green)
}


/* ============================================================
   WHY US / COMPARISON TABLE
   ============================================================ */

.why-us {
  background: var(--green-dark);
  color: #fff
}

.light-heading h2,
.light-heading .eyebrow {
  color: #fff
}

.light-heading>p {
  color: #cbd9ce
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 40px
}

.benefit-grid div {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, .08);
  padding: 18px;
  border-radius: 12px
}

.benefit-grid span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #cfe3d2;
  color: var(--green-dark);
  font-weight: 900
}

.benefit-grid strong {
  font-size: 14px
}

.comparison-wrap {
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  color: var(--charcoal);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .2)
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px
}

th,
td {
  text-align: left;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  vertical-align: top
}

thead th {
  background: #eef3ef;
  color: var(--green-dark);
  font: 700 14px Manrope;
  text-transform: uppercase;
  letter-spacing: .07em
}

thead th:nth-child(2) {
  background: #dbe9dd
}

tbody th {
  font: 700 14px Manrope;
  width: 19%
}

tbody td {
  font-size: 14px;
  color: #596159
}

tbody td:nth-child(2) {
  background: #f2f7f3;
  color: var(--green-dark);
  font-weight: 600
}


/* ============================================================
   GALLERY
   ============================================================ */

.gallery {
  background: var(--cream)
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #aec5af;
  aspect-ratio: 4/3
}

.gallery-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(16, 40, 25, .75))
}

.gallery-item span {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: #fff;
  z-index: 2;
  font-weight: 700;
  font-size: 14px
}


/* Gallery photo fills each tile; .gallery-item:after adds the caption gradient on top */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* ============================================================
   DELIVERY
   ============================================================ */

.delivery-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 90px;
  align-items: center
}

.lead {
  font-size: 19px;
  color: var(--muted)
}

.delivery-note {
  margin-top: 30px;
  padding: 22px;
  border-left: 4px solid var(--tan);
  background: var(--cream)
}

.delivery-note p {
  margin: 4px 0 0;
  color: var(--muted)
}

.delivery-steps {
  display: grid;
  gap: 14px
}

.delivery-steps article {
  display: flex;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px
}

.delivery-steps article>span {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  font-weight: 800
}

.delivery-steps h3 {
  font: 700 19px Manrope;
  margin: 0 0 6px
}

.delivery-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 14px
}


/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  background: #dce9de
}

.contact-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 80px;
  align-items: start
}

.contact-copy>p:not(.eyebrow) {
  font-size: 17px;
  color: #526256
}

.contact-prompt {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(38, 82, 55, .2)
}

.contact-prompt span {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em
}

.contact-prompt p {
  margin: 5px 0
}

.contact-form {
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow)
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 18px
}

input,
textarea {
  width: 100%;
  font: inherit;
  border: 1px solid #ccd5cd;
  border-radius: 11px;
  padding: 14px 15px;
  background: #fbfcfb
}

input:focus,
textarea:focus {
  outline: 3px solid rgba(40, 83, 58, .15);
  border-color: var(--green)
}

.button-submit {
  cursor: pointer
}

.form-note {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 12px
}

.form-note code {
  background: #eef1ee;
  padding: 2px 5px;
  border-radius: 4px
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: #132d20;
  color: #d4ded6;
  padding: 70px 0 24px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr .65fr .65fr 1fr;
  gap: 50px
}

.footer-brand {
  color: #fff;
  align-self: start
}

.footer-grid>div:not(.brand) {
  display: grid;
  align-content: start;
  gap: 7px
}

.footer-grid strong {
  color: #fff;
  margin-bottom: 6px
}

.footer-grid a:not(.brand) {
  text-decoration: none;
  color: #bdcbbf;
  font-size: 14px
}

.footer-grid p {
  margin: 0;
  color: #aebdb1
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 45px;
  padding-top: 24px;
  font-size: 13px;
  color: #93a797
}


/* ============================================================
   RESPONSIVE: TABLET & BELOW (<=900px)
   ============================================================ */

@media(max-width:900px) {
  .site-nav {
    position: absolute;
    top: 78px;
    left: 20px;
    right: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    background: white;
    border-radius: 14px;
    box-shadow: var(--shadow)
  }

  .site-nav.open {
    display: flex
  }

  .nav-toggle {
    display: block
  }

  .hero {
    min-height: 690px
  }

  .hero-content h1 {
    font-size: 55px
  }

  

  

  .trust-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .trust-grid div:nth-child(2) {
    border-right: 0
  }

  .trust-grid div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line)
  }

  .section {
    padding: 82px 0
  }

  .section-heading,
  .delivery-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .product-card,
  .product-featured,
  .product-wide {
    grid-template-columns: 1fr
  }

  .product-grid {
    grid-template-columns: 1fr 1fr
  }

  .product-featured,
  .product-wide {
    grid-column: 1/-1
  }

  .benefit-grid {
    grid-template-columns: 1fr 1fr
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .delivery-layout,
  .contact-layout {
    gap: 48px
  }
}


/* ============================================================
   RESPONSIVE: MOBILE (<=640px)
   ============================================================ */

@media(max-width:640px) {
  .container {
    width: min(100% - 28px, 1180px)
  }

  .hero {
    min-height: 650px
  }

  .hero-content h1 {
    font-size: 43px
  }

  .hero-copy {
    font-size: 17px
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px
  }

  

  .trust-grid {
    grid-template-columns: 1fr
  }

  .trust-grid div {
    border-right: 0;
    border-bottom: 1px solid var(--line) !important
  }

  .trust-grid div:last-child {
    border-bottom: 0 !important
  }

  .section-heading h2,
  .delivery h2,
  .contact h2 {
    font-size: 37px
  }

  .product-grid {
    grid-template-columns: 1fr
  }

  .product-featured,
  .product-wide {
    grid-column: auto
  }

  .product-body {
    padding: 28px
  }

  .product-image {
    min-height: 250px
  }

  .benefit-grid {
    grid-template-columns: 1fr
  }

  .gallery-grid {
    grid-template-columns: 1fr
  }

  .field-row {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .spec-links {
    flex-direction: column;
    gap: 10px
  }
}