* { box-sizing: border-box; scroll-behavior: smooth; }

:root {
    --brand: hsl(120, 35%, 22%);
    --accent: hsl(42, 90%, 50%);
    --text: hsl(0, 0%, 20%);
}

html { font-size: 62.5%; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: hsl(0, 0%, 95%);
    color: var(--text);
}

.container0 { font-size: 40px; font-weight: 400; text-align: center; padding: 5px; margin: 0; }

/* ── Hero ── */
.websiteContainer { position: relative; width: 100%; display: flow-root; }

.background {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(160deg, hsl(120, 40%, 18%) 0%, hsl(95, 35%, 30%) 55%, hsl(42, 45%, 40%) 100%);
}
.background>img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.background>div { position: absolute; inset: 0; background-color: hsla(0, 0%, 0%, 0.35); }

.header { position: relative; display: flex; align-items: center; width: 100%; height: 130px; }

.logo {
    display: flex; align-items: center; gap: 12px; height: 120px; margin: 5px 5px 5px 10vw;
    color: hsl(0, 0%, 98%); text-decoration: none; font-size: 26px; font-weight: 700;
    text-shadow: 0 0 6px hsla(0, 0%, 0%, 0.5);
}
.logo>img { width: 90px; height: 90px; flex: none; padding: 4px; border-radius: 50%; background-color: hsl(0, 0%, 100%); }

.navContainer { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: auto; width: 80px; height: 80px; }
.hamburgerCheckBox { position: absolute; margin: 0; width: 80px; height: 80px; opacity: 0; z-index: 5; cursor: pointer; }
.hamburgerDivs { position: relative; width: 40px; height: 6px; margin: 5px; background-color: hsl(0, 0%, 90%); transition-duration: .3s; }
input:checked~.hamburgerDivs:nth-child(2) { transform: rotate(45deg) translate(11px, 11px); }
input:checked~.hamburgerDivs:nth-child(3) { background-color: transparent; transform: rotate(180deg); }
input:checked~.hamburgerDivs:nth-child(4) { transform: rotate(-45deg) translate(11px, -11px); }

.side-menu {
    position: absolute; display: flex; flex-direction: column; align-items: center;
    background-color: rgba(30, 50, 30, 0.6); right: 0; top: 80px; width: 1px; height: 370px;
    transition-duration: .1s; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 4;
}
.side-menu>a { color: hsl(0, 0%, 95%); text-decoration: none; font-size: 36px; padding: 6px; white-space: nowrap; }
input:checked~.side-menu { width: 100vw; }

.container1 {
    min-height: 370px; width: 340px; max-width: calc(100% - 20px); margin: 10px 10px 10px 10vw;
    text-shadow: 0 0 6px hsla(0, 0%, 0%, 0.5); color: hsl(0, 0%, 97%);
    display: flex; flex-direction: column; justify-content: center; padding-bottom: 30px;
}
.container1>h1 { display: flex; flex-direction: column; margin: 0; font-weight: 300; }
.container1>h1>span:nth-child(1) { font-size: 56px; line-height: 1; }
.container1>h1>span:nth-child(2) { font-size: 44px; line-height: 1.3; }
.container1>p { margin: 0; font-size: 22px; line-height: 1.4; }
.container1>button {
    margin-top: 14px; font-family: inherit; font-size: 24px; font-weight: 700; color: hsl(0, 0%, 15%);
    background-color: var(--accent); border: none; width: 100%; height: 52px; border-radius: 26px; cursor: pointer;
}

/* ── Service strip ── */
.container15 { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-around; background-color: hsl(0, 0%, 90%); padding: 5px; }
.container15>a { text-align: center; font-size: 2.2rem; line-height: 1; color: inherit; text-decoration: none; padding: 6px; }

/* ── About + services ── */
.container2 { display: flex; flex-wrap: wrap; width: 100%; background-color: #f2f2f2; }
.one { width: 50%; max-height: 491px; }
.one>img, .one>svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.two { width: 50%; padding: 16px; font-size: 16px; line-height: 1.5; background-color: hsl(0, 0%, 95%); }
.twogrid { display: grid; grid-template-columns: auto auto; gap: 10px; }
.twogrid>div>div { font-weight: 700; font-size: 1.6rem; }
.twogrid ul { margin: 0; padding-left: 20px; }

/* ── How it works ── */
.container4 { display: grid; grid-template-columns: 1fr 1fr; margin: auto; width: 100%; max-width: 1000px; }
.container4>div { background-color: hsl(0, 0%, 98%); border-radius: 10px; margin: 10px; padding: 10px; text-align: center; }
.container4>div>div:nth-child(2) { font-size: 22px; font-weight: 500; padding: 5px; color: hsl(0, 0%, 25%); }
.container4>div>div:nth-child(3) { font-size: 18px; font-weight: 300; line-height: 1.4; }
.container4>div>.svg { width: 90px; height: 90px; }

/* ── Service pages ── */
.c2 { display: flex; justify-content: center; background-color: hsl(0, 0%, 98%); }
.c2>div { display: flex; flex-wrap: wrap; flex-direction: row-reverse; width: 100%; max-width: 1000px; gap: 40px; margin: 40px 10px; }
.c2>div>div { flex: 1 1 400px; display: flex; flex-direction: column; gap: 20px; }
.c2>div>div>h2 { margin: 0; font-size: 30px; font-weight: 700; text-align: center; }
.c2>div>div>p, .c2>div>div>ul { margin: 0; font-size: 18px; line-height: 1.5; }
.c2>div>div>img, .c2>div>div>svg { width: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; }

/* ── Free quote ── */
.containerform { width: 100%; padding: 30px 20px 40px; text-align: center; color: rgb(60, 60, 60); background: linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 90%)); }
.quoteTitle { font-size: 40px; font-weight: 400; margin: 0 0 10px; }
.quoteSteps { font-size: 18px; line-height: 1.6; margin: 0 auto 10px; }
.svg { width: 90px; height: 90px; padding: 10px 0 6px; }
.contactIcon { display: block; margin: 10px auto 0; cursor: pointer; }
.reveal { min-height: 30px; color: var(--brand); font-size: 20px; font-weight: bold; cursor: pointer; }
.reveal a { color: var(--brand); }

/* ── Footer ── */
.footer { text-align: center; background-color: hsl(120, 20%, 18%); color: hsl(0, 0%, 90%); padding: 10px 6px; }
.footer>div:nth-child(1) { font-size: 22px; padding: 4px; }
.footer>div { font-size: 14px; padding: 3px; }

@media screen and (max-width: 800px) {
    .one { width: 100%; height: 300px; }
    .two { width: 100%; }
    .container4 { grid-template-columns: 1fr; max-width: 600px; }
}
@media screen and (max-width: 450px) {
    .header { height: 100px; }
    .logo { height: 90px; margin-left: 5vw; font-size: 20px; }
    .logo>img { width: 70px; height: 70px; }
    .side-menu>a { font-size: 30px; }
    .container15>a { font-size: 1.8rem; }
    .container1>h1>span:nth-child(1) { font-size: 44px; }
    .container1>h1>span:nth-child(2) { font-size: 34px; }
}