/* ============================================================
   CRAFTWEB HOME
============================================================ */

.craft-home {
    --home-ink: #12151d;
    --home-muted: #5c6068;
    --home-cream: #f0efe9;
    --home-white: #ffffff;
    --home-border: #e3e1d9;
    --home-accent: #2b4bdb;
    --home-accent-soft: #e9edfb;
    --home-dark: #12151d;

    font-family: var(--font-body);
}

.craft-home h1,
.craft-home h2,
.craft-home h3,
.craft-home strong {
    font-family: var(--font-display);
}


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

.home-hero {
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #faf9f6 0%,
            #eef0f9 100%
        );

    border-bottom: 1px solid var(--home-border);
}

.home-hero__grid {
    min-height: 720px;

    display: grid;
    align-items: center;

    gap: 4rem;

    padding-block: 5rem;
}

.home-hero__content {
    position: relative;
    z-index: 2;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    margin: 0 0 1rem;

    color: var(--home-accent);

    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
}

.home-eyebrow::before {
    content: "";

    width: 7px;
    height: 7px;
    flex-shrink: 0;

    background: var(--home-accent);
    border-radius: 50%;
}

.home-hero h1 {
    max-width: 800px;

    margin: 0 0 1.5rem;

    color: var(--home-ink);

    font-size: clamp(2.9rem, 7.5vw, 6rem);

    line-height: 1.03;
    letter-spacing: -0.03em;
}

.home-hero__lead {
    max-width: 610px;

    margin: 0 0 2rem;

    color: var(--home-muted);

    font-size: 1.2rem;
    line-height: 1.65;
}


/* ============================================================
   BUTTONS
============================================================ */

.home-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 0.75rem;
}

.home-button {
    min-height: 54px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0.9rem 1.7rem;

    border: 1px solid transparent;
    border-radius: 999px;

    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.home-button:hover {
    transform: translateY(-2px);
}

.home-button--primary {
    background: var(--home-accent);
    color: #fff;
    box-shadow: 0 14px 30px rgba(43, 75, 219, 0.28);
}

.home-button--primary:hover {
    background: #1d38b3;
}

.home-button--secondary {
    background: transparent;

    border-color: var(--home-border);

    color: var(--home-ink);
}

.home-button--secondary:hover {
    background: #fff;
    border-color: var(--home-accent);
    color: var(--home-accent);
}


/* ============================================================
   HERO NOTE
============================================================ */

.home-hero__note {
    display: flex;
    flex-wrap: wrap;

    gap: 1.4rem;

    margin-top: 2rem;
}

.home-hero__note span {
    position: relative;

    color: #747a78;

    font-size: 0.68rem;
    font-weight: 750;
}

.home-hero__note span:not(:last-child)::after {
    content: "";

    position: absolute;

    right: -0.75rem;
    top: 50%;

    width: 3px;
    height: 3px;

    background: var(--home-accent);

    border-radius: 50%;
}


/* ============================================================
   HERO BROWSER
============================================================ */

.home-hero__visual {
    position: relative;

    min-height: 450px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.home-browser {
    position: relative;
    z-index: 2;

    width: min(100%, 540px);

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(18,21,29,0.12);
    border-radius: 14px;

    box-shadow:
        0 35px 80px rgba(18,21,29,0.16);

    transform: rotate(2deg);
}

.home-browser__bar {
    height: 38px;

    display: flex;

    align-items: center;

    gap: 1rem;

    padding-inline: 1rem;

    background: #efeee9;

    border-bottom: 1px solid #ddd9d1;
}

.home-browser__dots {
    display: flex;

    gap: 5px;
}

.home-browser__dots span {
    width: 6px;
    height: 6px;

    background: #aaa7a0;

    border-radius: 50%;
}

.home-browser__address {
    flex: 1;

    padding: 0.3rem 0.7rem;

    background: #faf9f6;

    color: #858883;

    font-size: 0.58rem;

    border: 1px solid #dedbd4;
}

.home-browser__screen {
    min-height: 370px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 3rem;

    background:
        linear-gradient(
            145deg,
            #f7f8fc,
            #e4e8f8
        );
}

.home-browser__small {
    margin-bottom: 1rem;

    color: var(--home-accent);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.06em;
}

.home-browser__screen strong {
    max-width: 410px;

    color: var(--home-ink);

    font-size: clamp(2rem, 4.2vw, 3.2rem);

    line-height: 1.05;
    letter-spacing: -0.02em;
}

.home-browser__lines {
    margin-top: 2rem;
}

.home-browser__lines span {
    display: block;

    width: 62%;
    height: 7px;
    border-radius: 4px;

    margin-bottom: 7px;

    background: #ccd2e8;
}

.home-browser__lines span:nth-child(2) {
    width: 45%;
}

.home-browser__lines span:nth-child(3) {
    width: 28%;
}

.home-browser__buttons {
    display: flex;

    gap: 0.5rem;

    margin-top: 1.5rem;
}

.home-browser__buttons i {
    display: block;

    width: 85px;
    height: 28px;

    background: var(--home-ink);
}

.home-browser__buttons i:last-child {
    width: 65px;

    background: transparent;

    border: 1px solid #c8c4bb;
}


/* ============================================================
   FLOATING CARD
============================================================ */

.home-floating-card {
    position: absolute;

    z-index: 4;

    right: 0;
    bottom: 5%;

    width: 190px;

    padding: 1.25rem;
    border-radius: 12px;

    background: var(--home-ink);

    color: #fff;

    box-shadow:
        0 20px 45px rgba(18,21,29,0.22);

    transform: rotate(-3deg);
}

.home-floating-card span {
    display: block;

    margin-bottom: 0.6rem;

    color: #8fa0f2;

    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
}

.home-floating-card strong {
    display: block;

    font-size: 0.95rem;

    line-height: 1.15;
}


/* ============================================================
   INTRO
============================================================ */

.home-intro {
    padding-block: 7rem;

    background: #fff;
}

.home-intro__grid {
    display: grid;

    gap: 3rem;
}

.home-intro h2 {
    max-width: 680px;

    margin: 0;

    color: var(--home-ink);

    font-size: clamp(2.7rem, 6vw, 5.3rem);

    line-height: 1.05;
    letter-spacing: -0.03em;
}

.home-intro__grid > div:last-child {
    max-width: 590px;

    color: var(--home-muted);

    font-size: 1.1rem;

    line-height: 1.75;
}

.home-intro__grid p {
    margin: 0 0 1.25rem;
}

.home-intro__grid p:last-child {
    margin-bottom: 0;
}


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

.home-section-heading {
    max-width: 720px;

    margin-bottom: 3.5rem;
}

.home-section-heading h2 {
    margin: 0 0 1rem;

    color: var(--home-ink);

    font-size: clamp(2.7rem, 6vw, 5rem);

    line-height: 1.05;
    letter-spacing: -0.03em;
}

.home-section-heading > p:last-child {
    max-width: 620px;

    margin: 0;

    color: var(--home-muted);

    line-height: 1.65;
}


/* ============================================================
   INDUSTRIES
============================================================ */

.home-industries {
    padding-block: 7rem;

    background: var(--home-cream);
}

.home-industry-grid {
    display: grid;

    gap: 1px;

    background: var(--home-border);

    border: 1px solid var(--home-border);
}

.home-industry {
    position: relative;

    min-height: 250px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 2rem;

    overflow: hidden;

    transition:
        transform 200ms ease;
}

.home-industry:hover {
    z-index: 2;

    transform: translateY(-4px);
}

.home-industry > span {
    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}

.home-industry strong {
    position: relative;
    z-index: 2;

    font-size: clamp(2rem, 4vw, 3.5rem);

    line-height: 1.05;
    letter-spacing: -0.03em;
}

.home-industry small {
    position: relative;
    z-index: 2;

    font-size: 0.72rem;
    font-weight: 800;
}


/* Individual industry treatments */

.home-industry--plumbing {
    background: #e7ddd0;
    color: #233238;
}

.home-industry--plumbing > span,
.home-industry--plumbing small {
    color: #a85f36;
}

.home-industry--roofing {
    background: #d8d5cc;
    color: #252b29;
}

.home-industry--roofing > span,
.home-industry--roofing small {
    color: #8b603d;
}

.home-industry--hvac {
    background: #dcecef;
    color: #1d3b43;
}

.home-industry--hvac > span,
.home-industry--hvac small {
    color: #277f91;
}

.home-industry--electric {
    background: #252a2c;
    color: #fff;
}

.home-industry--electric > span,
.home-industry--electric small {
    color: #f4c430;
}


/* Decorative shapes */

.home-industry::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -80px;
    bottom: -100px;

    border: 40px solid rgba(255,255,255,0.2);

    border-radius: 50%;
}

.home-industry--electric::after {
    border-color: rgba(244,196,48,0.1);
}


/* ============================================================
   WHY
============================================================ */

.home-why {
    padding-block: 7rem;

    background: #fff;
}

.home-benefits {
    display: grid;

    gap: 1px;

    background: var(--home-border);

    border: 1px solid var(--home-border);
}

.home-benefit {
    padding: 2.25rem;

    background: #fff;
}

.home-benefit__number {
    display: block;

    margin-bottom: 2.5rem;

    color: var(--home-accent);

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}

.home-benefit h3 {
    margin: 0 0 0.65rem;

    color: var(--home-ink);

    font-size: 1.3rem;

    letter-spacing: -0.04em;
}

.home-benefit p {
    max-width: 400px;

    margin: 0;

    color: var(--home-muted);

    font-size: 1.02rem;

    line-height: 1.65;
}


/* ============================================================
   FEATURED WORK
============================================================ */

.home-work {
    padding-block: 7rem;

    background: var(--home-cream);
}

.home-work__top {
    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    margin-bottom: 3rem;
}

.home-work__top h2 {
    margin: 0;

    color: var(--home-ink);

    font-size: clamp(2.7rem, 6vw, 5rem);

    line-height: 1.05;
    letter-spacing: -0.03em;
}

.home-text-link {
    align-self: flex-start;

    color: var(--home-ink);

    font-size: 0.8rem;
    font-weight: 850;
}

.home-featured {
    display: grid;

    background: #fff;

    border: 1px solid var(--home-border);
}

.home-featured__visual {
    min-height: 420px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 2rem;

    background:
        linear-gradient(
            135deg,
            #dbe1f7,
            #a9b7e0
        );
}

.home-featured__window {
    width: min(100%, 560px);

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 30px 65px rgba(25,35,37,0.2);

    transform: rotate(-1.5deg);
}

.home-featured__bar {
    height: 32px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding-inline: 0.8rem;

    background: #efeee9;

    border-bottom: 1px solid #ddd9d2;
}

.home-featured__bar span {
    width: 5px;
    height: 5px;

    background: #aaa7a0;

    border-radius: 50%;
}

.home-featured__screen {
    min-height: 350px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 2.5rem;

    background: #f8f8fb;
}

.home-featured__screen small {
    margin-bottom: 1rem;

    color: var(--home-accent);

    font-size: 0.62rem;
    font-weight: 850;

    letter-spacing: 0.1em;
}

.home-featured__screen strong {
    max-width: 420px;

    color: var(--home-ink);

    font-size: clamp(2.2rem, 5vw, 4.5rem);

    line-height: 1.05;
    letter-spacing: -0.03em;
}

.home-featured__screen div {
    width: 55%;
    height: 7px;

    margin-top: 1.5rem;

    background: #d7d2c7;
}

.home-featured__screen div:last-child {
    width: 32%;

    margin-top: 0.5rem;
}

.home-featured__content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 3rem;
}

.home-featured__content h3 {
    max-width: 550px;

    margin: 0 0 1rem;

    color: var(--home-ink);

    font-size: clamp(2.2rem, 5vw, 4.2rem);

    line-height: 1.05;
    letter-spacing: -0.03em;
}

.home-featured__content > p:not(.home-eyebrow) {
    max-width: 560px;

    margin: 0 0 2rem;

    color: var(--home-muted);

    line-height: 1.7;
}


/* ============================================================
   PROCESS
============================================================ */

.home-process {
    padding-block: 7rem;

    background: #fff;
}

.home-process-grid {
    display: grid;

    gap: 1px;

    background: var(--home-border);

    border: 1px solid var(--home-border);
}

.home-process-grid article {
    padding: 2.25rem;

    background: #fff;
}

.home-process-grid article > span {
    display: block;

    margin-bottom: 2.5rem;

    color: var(--home-accent);

    font-size: 0.65rem;
    font-weight: 850;
}

.home-process-grid h3 {
    max-width: 330px;

    margin: 0 0 0.7rem;

    color: var(--home-ink);

    font-size: 1.3rem;

    line-height: 1.05;
    letter-spacing: -0.04em;
}

.home-process-grid p {
    max-width: 400px;

    margin: 0;

    color: var(--home-muted);

    font-size: 1.02rem;

    line-height: 1.65;
}


/* ============================================================
   FINAL CTA
============================================================ */

.home-final {
    padding-block: 8rem;

    background: var(--home-dark);

    color: #fff;
}

.home-final__inner {
    max-width: 900px;
}

.home-final .home-eyebrow {
    color: #8fa0f2;
}

.home-final h2 {
    margin: 0 0 1.25rem;

    color: #fff;

    font-size: clamp(3.2rem, 8vw, 7rem);

    line-height: 1.03;
    letter-spacing: -0.03em;
}

.home-final__inner > p:not(.home-eyebrow) {
    max-width: 600px;

    margin: 0 0 2rem;

    color: rgba(255,255,255,0.65);

    font-size: 1.1rem;

    line-height: 1.7;
}

.home-final .home-button--primary {
    background: #fff;

    color: var(--home-ink);
}

.home-final .home-button--primary:hover {
    background: #eef0f9;
}

.home-final .home-button--secondary {
    border-color: rgba(255,255,255,0.25);

    color: #fff;
}

.home-final .home-button--secondary:hover {
    background: rgba(255,255,255,0.08);
}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 650px) {

    .home-industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 900px) {

    .home-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(420px, 0.85fr);
    }

    .home-intro__grid {
        grid-template-columns: 1.05fr 0.95fr;

        align-items: center;
    }

    .home-benefits {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-work__top {
        flex-direction: row;

        align-items: flex-end;

        justify-content: space-between;
    }

    .home-featured {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .home-featured__visual {
        min-height: 600px;
    }

    .home-process-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .home-hero__grid {
        min-height: 760px;
    }

    .home-floating-card {
        right: -35px;
    }

}