/* ==========================================================================
   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.
   ========================================================================== */

.hp {
    --hp-green: var(--serden-evergreen);
    --hp-green-deep: #0e2a1f;
    --hp-green-mid: #2d4e41;
    --hp-green-hover: var(--serden-evergreen-hover);
    --hp-ivory: var(--serden-ivory);
    --hp-sage: var(--serden-sage);
    --hp-tint: var(--serden-ivory);
    --hp-muted: var(--serden-text-secondary);
    --hp-line: var(--serden-stone);
    --hp-shadow: 0 18px 44px rgba(14, 42, 31, 0.10);
    --hp-shadow-lg: 0 26px 70px rgba(6, 24, 17, 0.28);

    /* 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-shell {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.hp-section {
    padding: clamp(64px, 7vw, 112px) 0;
}

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

.hp-kicker {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hp-green);
}

.hp-section-head h2 {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--hp-green);
}

.hp-section-head p {
    margin: 18px 0 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--hp-muted);
}

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

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hp-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

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

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

/* The accent button only appears on the evergreen pro band, so it is the light, inverted primary. */
.hp-btn-accent {
    background-color: var(--hp-ivory);
    border-color: var(--hp-ivory);
    color: var(--hp-green);
}

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

.hp-btn-outline {
    background-color: transparent;
    border-color: var(--hp-line);
    color: var(--hp-green);
}

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

.hp-btn-ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
}

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

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

.hp-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--hp-green-deep);
    color: #fff;
}

@supports (min-height: 100svh) {
    .hp-hero {
        min-height: 100svh;
    }
}

.hp-hero-media,
.hp-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hp-hero-media {
    z-index: 0;
    background-image: url(../images/hero-poster.jpg);
    background-position: center;
    background-size: cover;
}

.hp-hero-media video {
    object-fit: cover;
    border: 0;
}

/* Scrim keeps the copy legible over any frame of the video, and is what the
   hero falls back to when the video never loads. The footage is already
   graded dark, so the scrim is heaviest behind the headline and fades out
   towards the bottom, where the people at work are. */
.hp-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(9, 28, 20, 0.72) 0%, rgba(9, 28, 20, 0.5) 45%, rgba(9, 28, 20, 0.22) 78%, rgba(9, 28, 20, 0.08) 100%);
}

/* The copy is centred in the space above the trust strip; the top padding clears the fixed header. */
.hp-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    width: 100%;
    padding: 152px 0 var(--hp-space-xl);
}

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

/* Archivo ExtraBold is loaded by the home page for this headline only; the rest of the page stays Poppins. */
.hp-hero h1 {
    margin: 0;
    font-family: "Archivo", "Poppins", sans-serif;
    font-size: clamp(1.85rem, 4.2vw, 3.5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
}

.hp-hero-sub {
    max-width: 760px;
    margin: var(--hp-space-sm) auto 0;
    font-size: clamp(0.9375rem, 1.1vw, 1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

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

/* On desktop the headline and subhead sit a little higher, and the search stays where it was: the
   extra gap under the subhead is matched by the same extra space below the copy. */
@media (min-width: 992px) {
    .hp-hero-search {
        margin-top: var(--hp-space-xl);
    }

    .hp-hero-inner {
        padding-bottom: calc(var(--hp-space-xl) + var(--hp-space-md));
    }
}

/* Popular categories and the Find Pros line are secondary to the search, so they are small, quiet text.
   The shadow keeps them, and the trust points, legible over the lighter bottom of the video. */
.hp-popular,
.hp-hero .fpc-inline,
.hp-hero-trust {
    text-shadow: 0 1px 2px rgba(6, 24, 17, 0.45);
}

/* One line of text that wraps between links, with each separator kept at the end of its line. */
.hp-popular {
    margin-top: var(--hp-space-md);
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
    color: rgba(255, 255, 255, 0.68);
}

.hp-popular-label {
    margin-right: 8px;
}

.hp-popular ul {
    display: inline;
}

.hp-popular li {
    display: inline-block;
}

.hp-popular li:not(:last-child)::after {
    content: "\00B7";
    content: "\00B7" / "";
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.45);
}

.hp-popular a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.32);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.hp-popular a:hover,
.hp-popular a:focus-visible {
    color: #fff;
    text-decoration-color: currentColor;
}

.hp-hero .fpc-inline {
    gap: 4px 8px;
    margin-top: var(--hp-space-sm);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
}

.hp-hero .fpc-inline a {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-decoration-color: rgba(255, 255, 255, 0.32);
}

.hp-hero .fpc-inline a:hover,
.hp-hero .fpc-inline a:focus-visible {
    color: #fff;
    text-decoration-color: currentColor;
}

/* The trust points sit in a thin strip along the bottom of the hero, clear of the search, straight on the video. */
.hp-hero-strip {
    position: relative;
    z-index: 2;
    padding: var(--hp-space-sm) 0;
}

.hp-hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px var(--hp-space-lg);
}

.hp-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
}

.hp-hero-trust i {
    font-size: 14px;
    color: var(--hp-ivory);
}

/* ------------------------------------------------------------ categories */

.hp-categories {
    background-color: var(--hp-tint);
    border-top: 1px solid var(--hp-line);
}

.hp-cat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}

.hp-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    height: 100%;
    padding: 30px 16px;
    border: 1px solid var(--hp-line);
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hp-cat-card:hover {
    transform: translateY(-6px);
    border-color: var(--hp-green);
    box-shadow: var(--hp-shadow);
}

.hp-cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: var(--hp-green);
    transition: background-color 0.22s ease;
}

.hp-cat-card:hover .hp-cat-icon {
    background-color: var(--hp-green-hover);
}

.hp-cat-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    /* The icon set mixes white fills, accent-colored strokes and white raster
       art; flattening them to white keeps the grid consistent. */
    filter: brightness(0) invert(1);
}

.hp-cat-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hp-green);
}

.hp-cat-actions {
    margin-top: clamp(36px, 4vw, 52px);
    text-align: center;
}

/* ----------------------------------------------------------------- steps */

.hp-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hp-step {
    padding: 38px 34px;
    border: 1px solid var(--hp-line);
    border-radius: 24px;
    background-color: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.hp-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow);
}

.hp-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 24px;
    border-radius: 50%;
    background-color: var(--hp-sage);
    font-size: 16px;
    font-weight: 700;
    color: var(--hp-green);
}

.hp-step h3 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--hp-green);
}

.hp-step p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--hp-muted);
}

/* --------------------------------------------------------------- pro cta */

/* A slim green band: the pitch on the left, the points and buttons on the right. */
.hp-pro {
    padding: clamp(40px, 4.5vw, 64px) 0;
    background-color: var(--hp-green);
    color: #fff;
}

.hp-pro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.hp-pro-copy .hp-kicker {
    color: var(--hp-ivory);
}

.hp-pro-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: #fff;
}

.hp-pro-copy h2 em {
    font-style: normal;
    color: var(--hp-ivory);
}

.hp-pro-copy > p {
    max-width: 520px;
    margin: 18px 0 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.76);
}

.hp-pro-list {
    display: grid;
    gap: 14px;
    margin: 0 0 28px;
}

.hp-pro-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.hp-pro-list i {
    margin-top: 4px;
    color: var(--hp-ivory);
}

.hp-pro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ------------------------------------------------------------------ help */

.hp-help {
    position: relative;
    overflow: hidden;
    padding-top: clamp(56px, 6vw, 88px);
    background-color: var(--hp-sage);
}

.hp-help-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

.hp-help-media {
    position: relative;
    display: flex;
    justify-content: center;
    align-self: end;
}

.hp-help-media::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: min(480px, 112%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
}

.hp-help-media img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}

.hp-help-copy {
    padding-bottom: clamp(56px, 6vw, 88px);
}

.hp-help-copy .hp-kicker {
    color: var(--hp-green);
}

.hp-help-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--hp-green);
}

.hp-help-copy p {
    max-width: 560px;
    margin: 18px 0 30px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--hp-muted);
}

.hp-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: center;
}

.hp-help-contact {
    font-weight: 600;
    color: var(--hp-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

@media (max-width: 1280px) {
    .hp-cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .hp-hero {
        min-height: auto;
    }

    .hp-hero-inner {
        padding: 140px 0 var(--hp-space-xl);
    }

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

    .hp-pro-grid {
        gap: 28px;
    }

    .hp-pro-copy {
        text-align: center;
    }

    .hp-pro-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .hp-pro-list {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .hp-pro-actions {
        justify-content: center;
    }

    .hp-help-grid {
        gap: 40px;
    }

    .hp-help-copy {
        order: 0;
        padding-bottom: 0;
        text-align: center;
    }

    .hp-help-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .hp-help-actions {
        justify-content: center;
    }

    .hp-help-media {
        order: 1;
    }
}

@media (max-width: 820px) {
    .hp-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .hp-shell {
        padding: 0 18px;
    }

    .hp-hero-inner {
        padding: 124px 0 var(--hp-space-lg);
    }

    .hp-hero-trust {
        gap: 8px var(--hp-space-md);
    }

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

    .hp-cat-card {
        gap: 14px;
        padding: 24px 12px;
    }

    .hp-cat-icon {
        width: 58px;
        height: 58px;
    }

    .hp-step {
        padding: 30px 24px;
    }

    .hp-btn {
        padding: 13px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-btn,
    .hp-cat-card,
    .hp-cat-icon,
    .hp-step,
    .hp-popular a {
        transition: none;
    }

    .hp-btn:hover,
    .hp-cat-card:hover,
    .hp-step:hover {
        transform: none;
    }
}