/* ==========================================================================
   Home page ("/") styles.

   Every selector is namespaced under .hp / .hp-* so nothing here can reach
   the shared layout rules in default.css and responsive.css, which are also
   used by the directory, discussion and membership pages. The page's own
   text uses the system sans-serif (--hp-font); the header, the footer and
   the search bar keep the site's Poppins, because the font is set on the
   page's text blocks and never on .hp itself.
   ========================================================================== */

.hp {
    --hp-green: var(--serden-evergreen);
    --hp-green-hover: var(--serden-evergreen-hover);
    --hp-sage: var(--serden-sage);
    /* Near-black for headings and labels, a gray that reads at 5.1:1 on white and 4.7:1 on the light gray. */
    --hp-ink: #1D1D1F;
    --hp-gray: #6E6E73;
    /* A step darker, for the gray lines that sit on the hero's photo: 5:1 or better on its lightened lawn and wall. */
    --hp-gray-strong: #515154;
    --hp-surface: #F5F5F7;
    /* The light green behind a popular service on hover: the site's soft success green. */
    --hp-mint: #E5F3EB;
    --hp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* One spacing scale for the gaps between the hero's blocks. */
    --hp-space-sm: 16px;
    --hp-space-md: 24px;
    --hp-space-lg: 40px;
    --hp-space-xl: 64px;
    --hp-section: clamp(64px, 8vw, 112px);
}

.hp-shell {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}

/* --------------------------------------------------------------- buttons */

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 28px;
    border: 0;
    border-radius: 999px;
    font-family: var(--hp-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hp-btn i {
    font-size: 0.85em;
}

.hp-btn-primary {
    background-color: var(--hp-green);
    color: #fff;
}

.hp-btn-primary:hover,
.hp-btn-primary:focus-visible {
    background-color: var(--hp-green-hover);
    color: #fff;
    text-decoration: none;
}

/* The light button only sits on the green professionals panel. */
.hp-btn-light {
    background-color: #fff;
    color: var(--hp-green);
}

.hp-btn-light:hover,
.hp-btn-light:focus-visible {
    background-color: var(--hp-surface);
    color: var(--hp-green);
    text-decoration: none;
}

/* A text link with an arrow: Browse all categories, Learn more, Contact us. */
.hp-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--hp-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--hp-green);
    text-decoration: none;
    text-underline-offset: 4px;
}

.hp-arrow-link:hover,
.hp-arrow-link:focus-visible {
    color: var(--hp-green-hover);
    text-decoration: underline;
}

.hp-arrow-link i {
    font-size: 0.85em;
}

.hp-arrow-link--light,
.hp-arrow-link--light:hover,
.hp-arrow-link--light:focus-visible {
    color: #fff;
}

/* Keyboard focus is always visible: green on light backgrounds, white on the green panel. */
.hp-btn:focus-visible,
.hp-arrow-link:focus-visible,
.hp-popular a:focus-visible,
.hp-photo-card:focus-visible,
.hp-states-list a:focus-visible,
.hp-states-empty a:focus-visible,
.hp-hero .fpc-inline a:focus-visible {
    outline: 2px solid var(--hp-green);
    outline-offset: 3px;
}

.hp-panel--pro .hp-btn:focus-visible,
.hp-panel--pro .hp-arrow-link:focus-visible {
    outline-color: #fff;
}

/* ------------------------------------------------------------------ hero */

/* The hero is as tall as its content: the headline, the search, the Get matched line and the row of popular
   services, on a photo of a house that runs from behind the fixed header (which the top padding clears) to the
   hero's bottom edge. The services sit on a soft pool of white of their own; to either side of them the photo is not
   faded at all. White is what shows if the photo doesn't load. */
.hp-hero {
    position: relative;
    background-color: #fff;
    color: var(--hp-ink);
}

/* Only the photo's own layer is clipped: the hero itself is not, so the search's suggestion lists can open past it. */
.hp-hero-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Kept by its top edge, and a little right of centre, so the porch and front door stay in view on a laptop, where
   the photo is cropped at the sides. */
.hp-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 0;
}

.hp-hero-inner {
    position: relative;
    width: 100%;
    padding: 152px 0 var(--hp-space-md);
}

.hp-hero-copy {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}

/* About 88px on large screens down to 40px on a phone; the two lines are one heading. */
.hp-hero h1 {
    margin: 0;
    font-family: var(--hp-font);
    font-size: clamp(2.5rem, 1.385rem + 4.57vw, 5.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--hp-ink);
    text-wrap: balance;
}

/* A soft white glow behind each of the three text blocks that sit on the photo (the headline, the line under it and
   the Get matched line), so they read whatever part of the house is behind them, while the rest of the photo stays
   clear. Each glow belongs to its own text, so it follows it at every width, and is never wider than the screen
   less 32px, which keeps it inside the page even beside a scroll bar. Each block is its own small stacking context so
   its glow can sit behind its text; none of them holds the search, whose suggestion lists open over the page. */
.hp-hero h1,
.hp-hero-sub,
.hp-hero .fpc-inline {
    position: relative;
    z-index: 0;
}

.hp-hero h1::before,
.hp-hero-sub::before,
.hp-hero .fpc-inline::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hp-hero h1::before {
    width: min(calc(100% + 160px), calc(100vw - 32px));
    height: calc(100% + 80px);
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0));
}

.hp-hero-sub::before {
    width: min(calc(100% + 120px), calc(100vw - 32px));
    height: calc(100% + 56px);
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0.4) 85%, rgba(255, 255, 255, 0));
}

.hp-hero .fpc-inline::before {
    width: min(620px, 100%);
    height: calc(100% + 48px);
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78) 60%, rgba(255, 255, 255, 0));
}

.hp-hero-line {
    display: block;
}

.hp-hero-line--brand {
    color: var(--hp-green);
}

.hp-hero-sub {
    max-width: 760px;
    margin: 20px auto 0;
    font-family: var(--hp-font);
    font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.5rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--hp-gray-strong);
}

.hp-hero-search {
    max-width: 1000px;
    margin: var(--hp-space-lg) auto 0;
}

/* On desktop the photo has room to show between the search and the services row. */
@media (min-width: 992px) {
    .hp-hero-search {
        margin-top: 48px;
    }

    .hp-hero .hp-popular {
        margin-top: 56px;
    }
}

/* "Prefer to tell us about your project?" in gray, then "Get matched" in brand green, straight under the search. */
.hp-hero .fpc-inline {
    gap: 4px 6px;
    margin-top: var(--hp-space-md);
    font-family: var(--hp-font);
    font-size: 17px;
    color: var(--hp-gray-strong);
}

.hp-hero .fpc-inline a {
    font-weight: 600;
    color: var(--hp-green);
    text-decoration: none;
    text-underline-offset: 3px;
}

.hp-hero .fpc-inline a:hover,
.hp-hero .fpc-inline a:focus-visible {
    color: var(--hp-green-hover);
    text-decoration: underline;
}

/* The popular services: a line icon over a short label, eight in one row on desktop and four to a row on a phone. */
.hp-popular {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    margin: var(--hp-space-lg) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--hp-font);
}

/* The pool of white behind the services: it fades in from just above the row, is white behind the labels and down to
   the hero's edge, and fades out over 140px past the first and last service, so the photo to either side runs on
   unfaded. Below 1200px the row fills nearly the whole width, so the ends fade over 48px and the first and last
   service still sit on white. It is never wider than the screen less 32px, so the page doesn't scroll sideways. */
.hp-hero .hp-popular {
    --hp-pool-fade: 140px;
    position: relative;
    z-index: 0;
}

.hp-hero .hp-popular::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40px;
    bottom: calc(-1 * var(--hp-space-md));
    left: 50%;
    width: min(calc(100% + 160px), calc(100vw - 32px));
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 40%, #fff 70%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hp-pool-fade), #000 calc(100% - var(--hp-pool-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--hp-pool-fade), #000 calc(100% - var(--hp-pool-fade)), transparent);
    pointer-events: none;
}

.hp-popular a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 14px 4px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--hp-ink);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hp-popular a:hover,
.hp-popular a:focus-visible {
    background-color: var(--hp-mint);
    color: var(--hp-green);
}

.hp-service-icon {
    display: block;
    flex: none;
    width: 40px;
    height: 40px;
}

/* ----------------------------------------------------- service discovery */

/* The light gray holds the heading and the four cards and no more: the same space under the cards as above the
   heading, a step tighter than the white sections. */
.hp-discover {
    padding: clamp(48px, 5.5vw, 80px) 0;
    background-color: var(--hp-surface);
    font-family: var(--hp-font);
}

.hp-discover-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 32px;
    margin-bottom: clamp(28px, 3.5vw, 48px);
}

.hp-discover h2,
.hp-how h2 {
    margin: 0;
    font-family: var(--hp-font);
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.hp-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each card is one link: the photo, then the service, its arrow and its line on white. */
.hp-photo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background-color: #fff;
    color: var(--hp-ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.hp-photo-card:hover,
.hp-photo-card:focus-visible {
    color: var(--hp-ink);
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.hp-photo-media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: #E8E8ED;
}

/* The photos are 4:5, so only the phone's 4:3 crop trims them; it keeps the upper part, where the faces, pendant
   lights and rooflines are. */
.hp-photo-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}

/* A card without a photo shows the service's line icon, large and fine, on sage. */
.hp-photo-media--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hp-sage);
    color: var(--hp-green);
}

.hp-photo-media--icon .hp-service-icon {
    width: 34%;
    height: auto;
    aspect-ratio: 1 / 1;
    stroke-width: 0.8;
}

.hp-photo-body {
    display: grid;
    gap: 6px;
    padding: 20px 22px 24px;
}

.hp-photo-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-family: var(--hp-font);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--hp-ink);
}

.hp-photo-title i {
    flex: none;
    font-size: 0.8em;
}

.hp-photo-text {
    font-size: 1rem;
    line-height: 1.45;
    color: var(--hp-gray);
}

/* ---------------------------------------------------------- how it works */

.hp-how {
    padding: var(--hp-section) 0;
    background-color: #fff;
    font-family: var(--hp-font);
}

.hp-how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px clamp(24px, 4vw, 56px);
    margin: clamp(32px, 4vw, 56px) 0 0;
    padding: 0;
    list-style: none;
}

.hp-how-num {
    display: block;
    margin-bottom: 12px;
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--hp-green);
}

.hp-how-steps h3 {
    margin: 0 0 8px;
    font-family: var(--hp-font);
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--hp-ink);
}

.hp-how-steps p {
    max-width: 30ch;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--hp-gray);
}

/* ---------------------------------------------------------------- states */

.hp-states {
    padding: 0 0 var(--hp-section);
    background-color: #fff;
    font-family: var(--hp-font);
}

.hp-states-head {
    max-width: 720px;
    margin: 0 auto clamp(24px, 3vw, 40px);
    text-align: center;
}

.hp-states h2 {
    margin: 0;
    font-family: var(--hp-font);
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.hp-states-head p {
    margin: 12px 0 0;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.45;
    color: var(--hp-gray);
}

/* "Find a state": narrows the list as someone types. */
.hp-states-find {
    position: relative;
    max-width: 440px;
    margin: 24px auto 0;
}

.hp-states-find i {
    position: absolute;
    top: 50%;
    left: 18px;
    font-size: 15px;
    color: var(--hp-gray);
    transform: translateY(-50%);
    pointer-events: none;
}

.hp-states-find input {
    width: 100%;
    height: 48px;
    padding: 0 18px 0 46px;
    border: 1px solid #D2D2D7;
    border-radius: 14px;
    background-color: #fff;
    font-family: var(--hp-font);
    font-size: 17px;
    color: var(--hp-ink);
    -webkit-appearance: none;
    appearance: none;
}

.hp-states-find input::placeholder {
    color: var(--hp-gray);
}

.hp-states-find input:focus {
    border-color: var(--hp-green);
    outline: 2px solid var(--hp-green);
    outline-offset: 1px;
}

/* Alphabetical down each column, five across on desktop. */
.hp-states-list {
    columns: 5;
    column-gap: clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-states-list li {
    break-inside: avoid;
}

.hp-states-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid #E5E5EA;
    border-radius: 0;
    font-size: 17px;
    line-height: 1.3;
    color: var(--hp-ink);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hp-states-list a i {
    font-size: 0.8em;
    opacity: 0;
}

.hp-states-list a:hover,
.hp-states-list a:focus-visible {
    border-bottom-color: transparent;
    border-radius: 10px;
    background-color: var(--hp-sage);
    font-weight: 600;
    color: var(--hp-green);
    text-decoration: none;
}

.hp-states-list a:hover i,
.hp-states-list a:focus-visible i {
    opacity: 1;
}

.hp-states-empty {
    margin: 8px 0 0;
    font-size: 17px;
    text-align: center;
    color: var(--hp-gray);
}

.hp-states-empty a {
    font-weight: 600;
    color: var(--hp-green);
}

/* ---------------------------------------------------------- final panels */

.hp-panels {
    padding: 0 0 var(--hp-section);
    background-color: #fff;
    font-family: var(--hp-font);
}

.hp-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.hp-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(32px, 5vw, 64px);
    border-radius: 28px;
}

.hp-panel--pro {
    background-color: var(--hp-green);
    color: #fff;
}

.hp-panel--help {
    background-color: var(--hp-surface);
    color: var(--hp-ink);
}

.hp-panel-eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.hp-panel h2 {
    max-width: 14ch;
    margin: 0;
    font-family: var(--hp-font);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.hp-panel--pro h2 {
    color: #fff;
}

.hp-panel--help h2 {
    color: var(--hp-ink);
}

.hp-panel-text {
    max-width: 32ch;
    margin: 16px 0 0;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.45;
}

.hp-panel--pro .hp-panel-text {
    color: rgba(255, 255, 255, 0.82);
}

.hp-panel--help .hp-panel-text {
    color: var(--hp-gray);
}

.hp-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 32px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1199.98px) {
    .hp-hero .hp-popular {
        --hp-pool-fade: 48px;
    }
}

@media (max-width: 1099.98px) {
    .hp-states-list {
        columns: 4;
    }
}

@media (max-width: 991.98px) {
    .hp-hero-inner {
        padding-top: 140px;
    }

    .hp-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-states-list {
        columns: 3;
    }
}

@media (max-width: 767.98px) {
    /* On a phone the photo would sit behind every line of text, washed out to nothing. It is a band behind the header
       instead, showing the porch and the front door, and it has faded to white by the headline, so the text needs no
       glow. */
    .hp-hero-photo {
        bottom: auto;
        height: 300px;
    }

    .hp-hero-photo img {
        object-position: 100% 0;
    }

    .hp-hero h1::before,
    .hp-hero-sub::before,
    .hp-hero .fpc-inline::before,
    .hp-hero .hp-popular::before {
        display: none;
    }

    .hp-hero-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.9) 78%, #fff 96%);
    }

    .hp-hero-inner {
        padding-top: 232px;
    }

    .hp-popular {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .hp-popular a {
        gap: 8px;
        padding: 12px 2px;
        font-size: 13px;
    }

    .hp-service-icon {
        width: 34px;
        height: 34px;
    }

    .hp-how-steps,
    .hp-panels-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    /* One card to a row: a wider crop of the same photo keeps the column short enough to scroll past. */
    .hp-photo-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .hp-photo-media {
        aspect-ratio: 4 / 3;
    }

    .hp-panel {
        border-radius: 24px;
    }

    .hp-states-list {
        columns: 2;
        column-gap: 16px;
    }

    .hp-states-list a {
        padding: 11px 6px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-btn,
    .hp-popular a,
    .hp-photo-card,
    .hp-states-list a {
        transition: none;
    }
}