/* EDIT COLORS in :root; EDIT HERO IMAGE in .hero */

:root {
  --dark:#101915;
  --green:#b7cc79;
  --orange:#f29b45;
  --white:#f8f8f2;
  --muted:#c5cbc5}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  color:#17231d}
a {
  text-decoration:none;
  color:inherit}
img {
  display:block;
  width:100%}
header {
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  width:100%;
  border-bottom:1px solid #ffffff35;
  color:white;
  background:#0d1712a6;
  backdrop-filter:blur(12px)}
.nav {
  max-width:1240px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:17px 24px}
.logo {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.08;
  font-size:17px}
.logo-mark {
  display:grid;
  place-items:center;
  background:var(--orange);
  color:#111;
  border-radius:8px;
  width:48px;
  height:48px;
  font-size:27px}
.navlinks {
  display:flex;
  align-items:center;
  gap:25px;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.07em}
.navlinks a:hover {
  color:var(--green)}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:5px;
  padding:15px 23px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .2s,background .2s}
.btn:hover {
  transform:translateY(-3px)}
.primary {
  background:var(--orange);
  color:#151a15}
.outline {
  border:1px solid #ffffffa0;
  color:white}
.hero {
  min-height:740px;
  position:relative;
  display:flex;
  align-items:center;
  color:white;
  background:#101915 url('images/reliable.webp') center 53%/cover no-repeat}
.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#09110eef 0%,#09110ecf 39%,#09110e50 76%),linear-gradient(0deg,#0b130edb,transparent 60%)}
.hero-inner {
  position:relative;
  max-width:1240px;
  width:100%;
  margin:0 auto;
  padding:150px 24px 100px}
.eyebrow {
  color:var(--green);
  font-size:13px;
  letter-spacing:.22em;
  font-weight:900;
  text-transform:uppercase}
.hero h1 {
  font-size:clamp(48px,7vw,98px);
  line-height:.98;
  max-width:860px;
  margin:22px 0 24px;
  letter-spacing:-.055em;
  text-transform:uppercase}
.hero h1 span {
  color:var(--orange)}
.hero p {
  max-width:580px;
  font-size:19px;
  line-height:1.65;
  color:#e1e4dd}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px}
.stats {
  background:#1c2b22;
  color:white}
.stats-inner {
  max-width:1240px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:27px 24px;
  gap:20px}
.stat {
  border-left:3px solid var(--orange);
  padding-left:18px}
.stat strong {
  display:block;
  font-size:20px;
  text-transform:uppercase}
.stat small {
  display:block;
  color:#bac9b9;
  margin-top:5px}
.wrap {
  max-width:1240px;
  margin:auto;
  padding:94px 24px}
.section-top {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:36px}
.section-top h2 {
  font-size:clamp(34px,4.5vw,60px);
  letter-spacing:-.05em;
  text-transform:uppercase;
  line-height:1.05;
  margin:13px 0 0}
.section-top p {
  max-width:410px;
  color:#5c6b62;
  line-height:1.7}
.services {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px}
.service {
  background:white;
  padding:30px 24px;
  min-height:185px;
  border:1px solid #e2e7e0;
  transition:transform .25s,box-shadow .25s}
.service:hover {
  transform:translateY(-6px);
  box-shadow:0 15px 30px #00000012}
.service .icon {
  font-size:29px}
.service h3 {
  font-size:19px;
  margin:18px 0 9px}
.service p {
  font-size:14px;
  color:#627065;
  line-height:1.6;
  margin:0}
.gallery-section {
  background:#111c16;
  color:white}
.gallery-section .section-top p {
  color:#b4c3b8}
.gallery {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:210px;
  gap:13px}
.tile {
  position:relative;
  overflow:hidden;
  background:#2b392d;
  grid-column:span 4;
  border-radius:3px}
.tile.wide {
  grid-column:span 8}
.tile.tall {
  grid-row:span 2}
.tile img {
  height:100%;
  object-fit:cover;
  transition:transform .5s}
.tile:hover img {
  transform:scale(1.06)}
.tile:after {
  content:"";
  position:absolute;
  inset:40% 0 0;
  background:linear-gradient(transparent,#000b)}
.tile b {
  position:absolute;
  z-index:1;
  bottom:19px;
  left:20px;
  font-size:16px;
  text-shadow:0 2px 5px #000}
.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center}
.about img {
  height:480px;
  object-fit:cover;
  border-radius:4px}
.about h2 {
  font-size:clamp(35px,4vw,56px);
  line-height:1.07;
  text-transform:uppercase;
  letter-spacing:-.04em}
.about p {
  line-height:1.8;
  color:#56655b}
.feature {
  padding:15px 0;
  border-bottom:1px solid #d9e0d7;
  font-weight:800}
.contact {
  background:#e9eee5}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px}
.contact-card {
  background:#142119;
  color:white;
  padding:40px}
.contact-card h3 {
  font-size:29px;
  margin-top:0}
.contact-card p {
  line-height:1.9;
  color:#d4ddd2}
.contact-card a:not(.btn) {
  color:var(--green)}
.map {
  border:0;
  width:100%;
  height:360px;
  border-radius:4px}
footer {
  background:#0c150f;
  color:#c8d0c6;
  text-align:center;
  padding:32px 20px;
  font-size:13px}
.reveal {
  opacity:0;
  transform:translateY(25px);
  transition:opacity .6s,transform .6s}
.reveal.visible {
  opacity:1;
  transform:none}
@media(max-width:850px) {
  .navlinks {
  display:none}
.hero {
  min-height:660px}
.services {
  grid-template-columns:repeat(2,1fr)}
.about,.contact-grid {
  grid-template-columns:1fr}
.gallery {
  grid-auto-rows:180px}
.tile,.tile.wide {
  grid-column:span 6}
.tile.tall {
  grid-row:span 1}
.stats-inner {
  grid-template-columns:1fr 1fr}
}
@media(max-width:550px) {
  .nav {
  padding:12px 16px}
.logo {
  font-size:12px}
.logo-mark {
  width:40px;
  height:40px}
.nav>.btn {
  padding:11px;
  font-size:10px}
.hero-inner {
  padding:150px 20px 70px}
.hero p {
  font-size:16px}
.stats-inner {
  grid-template-columns:1fr}
.wrap {
  padding:66px 18px}
.section-top {
  display:block}
.services {
  grid-template-columns:1fr}
.gallery {
  grid-auto-rows:230px}
.tile,.tile.wide {
  grid-column:span 12}
.about img {
  height:340px}
.contact-card {
  padding:26px}
}


/* EDIT PRICING SECTION STYLES HERE */
.pricing-section{background:#f4f5f0;color:#152018}.pricing-section .eyebrow{color:#647a3c}.pricing-section .section-top p{color:#526052}.pricing-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}.pricing-list{background:white;border:1px solid #dfe5db;border-radius:7px;overflow:hidden}.pricing-list>div{display:flex;justify-content:space-between;gap:18px;padding:15px 20px;border-bottom:1px solid #e7eae4;font-size:15px}.pricing-list>div:last-child{border:0}.pricing-list strong{color:#ac5d1a;white-space:nowrap;font-size:17px}.pricing-photo img{width:100%;max-height:370px;object-fit:cover;border-radius:7px}.pricing-photo p{font-size:13px;line-height:1.7;color:#56655b}.pricing-photo .btn{display:inline-block;margin-top:8px}@media(max-width:850px){.pricing-layout{grid-template-columns:1fr}}