/* SiteCrew — public site.
   ==========================================================================
   Same dark instrument language as the operations console: gradient ground
   with radial light, glowing accents, precise type. The previous light
   version read like a different product sitting next to the CRM.

   Prefixed .p* so nothing here can collide with the console or the
   field-facing portals, which stay deliberately light and plain. */

:root {
    --p-ink-950: #04101f;
    --p-ink-900: #071527;
    --p-ink-800: #0e2440;
    --p-line: rgba(194, 210, 229, .14);
    --p-line-hot: rgba(249, 134, 47, .38);
    --p-steel: #93a8c2;
    --p-steel-2: #c2d2e5;
    --p-text: #e9f0fa;
    --p-orange: #f9862f;
    --p-orange-soft: #ffb066;
    --p-blue: #4b7fe8;
    --p-green: #33d69f;
}

.public-body {
    margin: 0;
    color: var(--p-text);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1200px 700px at 8% -12%, rgba(75, 127, 232, .18), transparent 60%),
        radial-gradient(900px 800px at 108% 12%, rgba(249, 134, 47, .12), transparent 55%),
        linear-gradient(165deg, var(--p-ink-950), var(--p-ink-900) 55%, #050f1d);
    min-height: 100vh;
}

.public-body a { color: inherit; text-decoration: none; }
.pub h1, .pub h2, .pub h3 { color: #fff; }

/* ---- Header ------------------------------------------------------------ */

.public-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 13px clamp(16px, 4vw, 48px);
    background: rgba(5, 15, 29, .8);
    border-bottom: 1px solid var(--p-line);
    backdrop-filter: blur(12px);
}

.public-brand { display: flex; align-items: center; gap: 11px; }
.public-brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 8px 22px rgba(249, 134, 47, .26); }
.public-brand strong { display: block; font-size: 19px; font-weight: 900; color: #fff; line-height: 1; }
.public-brand em { display: block; font-style: normal; color: var(--p-orange); font-size: 10.5px; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; margin-top: 3px; }

.public-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 700; }
.public-nav a:not(.pbtn) { color: var(--p-steel-2); }
.public-nav a:not(.pbtn):hover { color: var(--p-orange); }

/* ---- Buttons ----------------------------------------------------------- */

.pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 15px;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

a.pbtn--primary,
.pbtn--primary {
    background: linear-gradient(135deg, var(--p-orange-soft), var(--p-orange));
    /* Near-black on orange. Ancestor anchor rules were overriding this and
       leaving orange text on an orange button — hence the explicit a.pbtn
       selector, which outranks .public-nav a and .pub a. */
    color: #14213d;
    box-shadow: 0 12px 30px rgba(249, 134, 47, .3);
}
a.pbtn--primary:hover,
.pbtn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(249, 134, 47, .4); color: #14213d; }

a.pbtn--ghost,
.pbtn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
a.pbtn--ghost:hover,
.pbtn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.pbtn--sm { min-height: 38px; padding: 8px 16px; font-size: 13.5px; border-radius: 10px; }

/* ---- Hero -------------------------------------------------------------- */

.phero {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 6vw, 84px) clamp(16px, 5vw, 64px) clamp(40px, 5vw, 72px);
}

.pshot { display: block; overflow: hidden; }
.pshot img, .pshot svg { display: block; width: 100%; height: 100%; object-fit: cover; }

.phero__photo { position: absolute; inset: 0; z-index: 0; }
.phero__photo .pshot { width: 100%; height: 100%; }

/* Lifted from brightness(.68). The photograph was being suppressed twice —
   once here and once by a near-opaque scrim — so the roof, the chimney and
   the bare trees were all but invisible. */
.phero__photo img { object-position: 72% center; filter: saturate(.92) brightness(.84); }

/* The scrim is dark only where words actually sit.

   It used to be a straight left-to-right ramp starting at 96% opacity, which
   meant the entire left half of the hero was flat navy and the photograph only
   appeared past the job card. Now it darkens the copy column and clears at both
   edges, so the picture reads to the left of the headline and to the right of
   the card — with the two boxes still sitting on ground dark enough to keep
   white type legible. */
.phero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(4, 16, 31, .52) 0%,
            rgba(4, 16, 31, .88) 20%,
            rgba(4, 16, 31, .88) 50%,
            rgba(4, 16, 31, .34) 66%,
            rgba(4, 16, 31, .30) 100%),
        linear-gradient(180deg, rgba(4, 16, 31, .38), transparent 32%, rgba(4, 16, 31, .66));
}

.phero__sweep {
    position: absolute;
    z-index: 2;
    left: 0; right: 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(249, 134, 47, .07), transparent);
    animation: pSweep 9s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pSweep { 0% { top: -170px; } 100% { top: 100%; } }

.phero__inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 48px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.peyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--p-line-hot);
    background: rgba(249, 134, 47, .1);
    color: var(--p-orange);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
}

.phero__title {
    font-size: clamp(38px, 5.4vw, 64px);
    line-height: 1.03;
    letter-spacing: -1px;
    margin: 0 0 20px;
}

.phero__title .grad {
    background: linear-gradient(120deg, var(--p-orange-soft), var(--p-orange) 45%, var(--p-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.phero__lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--p-steel-2); max-width: 54ch; line-height: 1.65; margin: 0; }

.phero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

.phero__fee {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 0;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--p-line);
    background: rgba(14, 36, 64, .5);
    max-width: 460px;
}
.phero__fee strong {
    font-size: 30px;
    font-weight: 900;
    color: var(--p-orange);
    text-shadow: 0 0 20px rgba(249, 134, 47, .35);
    line-height: 1;
}
.phero__fee span { font-size: 13.5px; color: var(--p-steel-2); font-weight: 600; }

/* Hero job card */

.phero__panel { min-width: 0; }

.pcard {
    background: linear-gradient(180deg, rgba(14, 36, 64, .95), rgba(7, 21, 39, .95));
    border: 1px solid var(--p-line);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
    position: relative;
}
.pcard::before, .pcard::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.pcard::before {
    top: -1px; left: -1px;
    border-top: 2px solid var(--p-orange); border-left: 2px solid var(--p-orange);
    border-top-left-radius: 18px; filter: drop-shadow(0 0 6px rgba(249, 134, 47, .7));
}
.pcard::after {
    bottom: -1px; right: -1px;
    border-bottom: 2px solid var(--p-orange); border-right: 2px solid var(--p-orange);
    border-bottom-right-radius: 18px; filter: drop-shadow(0 0 6px rgba(249, 134, 47, .7));
}

.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--p-steel); }
.pcard__title { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.pcard__meta { margin: 0 0 16px; font-size: 13px; color: var(--p-steel); }

.pcard__money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); margin-bottom: 16px; }
.pcard__money span { display: block; }
.pcard__money em { display: block; font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--p-steel); font-weight: 700; }
.pcard__money b { display: block; margin-top: 3px; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.pcard__money b.good { color: var(--p-green); }

.psteps { display: grid; gap: 9px; }
.pstep { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 600; color: var(--p-steel); }
.pstep span {
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(147, 168, 194, .12); color: var(--p-steel);
    font-size: 11px; font-weight: 800; flex: none;
}
.pstep.done { color: var(--p-steel-2); }
.pstep.done span { background: rgba(51, 214, 159, .16); color: var(--p-green); }
.pstep.active { color: #fff; }
.pstep.active span { background: var(--p-orange); color: #1b0d02; box-shadow: 0 0 0 4px rgba(249, 134, 47, .16); }

.ppill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ppill--blue { background: rgba(75, 127, 232, .18); color: #9dbcff; }
.ppill--good { background: rgba(51, 214, 159, .16); color: var(--p-green); }

/* ---- Stat band --------------------------------------------------------- */

.pstats {
    background: rgba(2, 8, 16, .55);
    border-top: 1px solid var(--p-line-hot);
    border-bottom: 1px solid var(--p-line);
    padding: clamp(24px, 3vw, 38px) clamp(16px, 4vw, 32px);
}
.pstats__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 22px; text-align: center; }
.pstat strong { display: block; font-size: clamp(26px, 3.2vw, 40px); font-weight: 900; color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(249, 134, 47, .2); }
.pstat span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--p-steel); }

/* ---- Sections ---------------------------------------------------------- */

.psection { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 5.5vw, 78px) clamp(16px, 4vw, 32px); }
.psection--tint { max-width: none; background: rgba(2, 8, 16, .4); border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); }
.psection--tint > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.phead { max-width: 700px; margin-bottom: 34px; }
.phead h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; margin: 0 0 10px; letter-spacing: -.5px; }
.phead p { margin: 0; font-size: 16.5px; color: var(--p-steel); }

/* ---- Two ways ---------------------------------------------------------- */

.pways { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

.pway {
    position: relative;
    background: linear-gradient(180deg, rgba(14, 36, 64, .8), rgba(7, 21, 39, .8));
    border: 1px solid var(--p-line);
    border-radius: 18px;
    padding: 26px;
    transition: transform .16s ease, border-color .16s ease;
}
.pway:hover { transform: translateY(-3px); border-color: var(--p-line-hot); }
.pway--lead { border-color: var(--p-line-hot); box-shadow: 0 24px 56px rgba(0, 0, 0, .38); }

.pway__tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(249, 134, 47, .14);
    color: var(--p-orange);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .03em;
}
.pway__tag--quiet { background: rgba(147, 168, 194, .14); color: var(--p-steel-2); }

.pway h3 { font-size: 23px; margin: 0 0 8px; }
.pway__lead { color: var(--p-steel-2); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }

.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plist li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--p-steel-2); line-height: 1.5; }
.plist li::before {
    content: "";
    position: absolute;
    left: 0; top: 6px;
    width: 13px; height: 7px;
    border-left: 2.5px solid var(--p-orange);
    border-bottom: 2.5px solid var(--p-orange);
    transform: rotate(-45deg);
}
.plist strong { color: #fff; }

/* ---- Duo cards --------------------------------------------------------- */

.pduo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.pduo__card {
    background: linear-gradient(180deg, rgba(14, 36, 64, .72), rgba(7, 21, 39, .72));
    border: 1px solid var(--p-line);
    border-radius: 18px;
    padding: 26px;
}
.pduo__card h3 { font-size: 20px; margin: 0 0 8px; }
.pduo__card p { color: var(--p-steel-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }

.pminicard { padding: 14px; border-radius: 12px; background: rgba(4, 16, 31, .6); border: 1px solid var(--p-line); }
.pminicard__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pminicard__row b { color: #fff; font-size: 14px; }
.pminicard__meta { margin: 6px 0 0; font-size: 12.5px; color: var(--p-steel); }

/* ---- Flow -------------------------------------------------------------- */

.pflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.pflow__step {
    background: linear-gradient(180deg, rgba(14, 36, 64, .66), rgba(7, 21, 39, .66));
    border: 1px solid var(--p-line);
    border-radius: 16px;
    padding: 22px 20px;
}
.pflow__num {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--p-orange-soft), var(--p-orange));
    color: #1b0d02;
    font-weight: 900;
    font-size: 17px;
    margin-bottom: 14px;
}
.pflow__step h3 { font-size: 16px; margin: 0 0 6px; line-height: 1.3; }
.pflow__step p { margin: 0; font-size: 13.5px; color: var(--p-steel); line-height: 1.55; }

/* ---- Trades ------------------------------------------------------------ */

.ptrades { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ptrades__photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ptrades__photos .pshot { aspect-ratio: 800 / 420; border: 1px solid var(--p-line); border-radius: 14px; background: var(--p-ink-800); }
.ptrades__photos .pshot img { filter: saturate(.78) brightness(.78); transition: filter .18s ease, transform .18s ease; }
.ptrades__photos .pshot:hover img { filter: saturate(.94) brightness(.94); transform: scale(1.025); }
.ptrade { background: rgba(14, 36, 64, .5); border: 1px solid var(--p-line); border-radius: 16px; padding: 20px; }
.ptrade h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--p-orange); margin: 0 0 12px; }
.ptrade ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ptrade li { font-size: 14px; color: var(--p-steel-2); font-weight: 600; }

/* ---- Who / areas ------------------------------------------------------- */

.pwho { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 30px; }
.pwho__card { overflow: hidden; background: rgba(14, 36, 64, .5); border: 1px solid var(--p-line); border-left: 3px solid var(--p-orange); border-radius: 14px; }
.pwho__card > .pshot { aspect-ratio: 800 / 460; background: var(--p-ink-800); }
.pwho__card > .pshot img { filter: saturate(.72) brightness(.75); }
.pwho__card h3 { font-size: 17px; margin: 16px 20px 6px; }
.pwho__card p { margin: 0 20px 20px; font-size: 14px; color: var(--p-steel); line-height: 1.55; }

.pareas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.parea { padding: 10px 18px; border-radius: 999px; background: rgba(14, 36, 64, .6); border: 1px solid var(--p-line); font-weight: 800; color: #fff; font-size: 14px; }
.parea--more { background: transparent; border-style: dashed; color: var(--p-steel); font-weight: 600; }

/* ---- Straight talk ----------------------------------------------------- */

.pplain { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pplain__item { padding: 22px; border-radius: 16px; background: rgba(255, 190, 85, .05); border: 1px solid rgba(255, 190, 85, .2); }
.pplain__item h3 { font-size: 16.5px; margin: 0 0 8px; line-height: 1.35; }
.pplain__item p { margin: 0; font-size: 14px; color: var(--p-steel-2); line-height: 1.6; }
.pplain__item a { color: var(--p-orange); font-weight: 700; text-decoration: underline; }

/* ---- Close ------------------------------------------------------------- */

.pclose {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(48px, 6vw, 84px) clamp(16px, 4vw, 32px);
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(249, 134, 47, .14), transparent 65%),
        rgba(2, 8, 16, .5);
    border-top: 1px solid var(--p-line);
}
.pclose__photo { position: absolute; inset: 0; z-index: 0; }
.pclose__photo .pshot { width: 100%; height: 100%; }
.pclose__photo img { filter: saturate(.6) brightness(.5); }
.pclose__photo::after { content: ""; position: absolute; inset: 0; background: rgba(4,16,31,.78); }
.pclose > :not(.pclose__photo) { position: relative; z-index: 1; }
.pclose h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 10px; }
.pclose p { color: var(--p-steel-2); font-size: 16.5px; margin: 0 0 24px; }
.pclose__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pclose__note { margin: 26px 0 0; font-size: 14px; color: var(--p-steel); }
.pclose__note a { color: var(--p-orange); font-weight: 700; }

/* ---- Terms page -------------------------------------------------------- */

.pub .terms-draft { background: rgba(255, 190, 85, .12); border-color: rgba(255, 190, 85, .4); color: #ffbe55; }
.pub h2 { margin-top: 34px; font-size: 22px; }
.pub p { color: var(--p-steel-2); line-height: 1.7; }
.pub strong { color: #fff; }
.pub a:not(.pbtn) { color: var(--p-orange); font-weight: 700; }

/* ---- Footer on dark ---------------------------------------------------- */

.public-body .site-footer { background: transparent; border-top: 1px solid var(--p-line); color: #6b7f9c; }
.public-body .site-footer a { color: var(--p-orange); }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 980px) {
    .phero__inner { grid-template-columns: 1fr; gap: 34px; }
    .public-nav a:not(.pbtn) { display: none; }
}

@media (max-width: 640px) {
    .phero__title { font-size: 34px; }
    .phero__cta .pbtn, .pclose__cta .pbtn { width: 100%; }
    .pcard__money { grid-template-columns: 1fr 1fr; }
    .ptrades__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .phero__sweep { display: none; }
    .pway, .pbtn { transition: none; }
    .pway:hover, .pbtn:hover { transform: none; }
}

/* ---- The two fears ------------------------------------------------------ */

.pfears { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }

.pfear {
    background: linear-gradient(180deg, rgba(14, 36, 64, .8), rgba(7, 21, 39, .8));
    border: 1px solid var(--p-line);
    border-radius: 18px;
    padding: 26px;
}

.pfear__who { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--p-steel); font-weight: 800; margin-bottom: 12px; }

.pfear__quote {
    margin: 0 0 20px;
    padding-left: 16px;
    border-left: 3px solid #ff5d6c;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.4;
    color: #fff;
    font-weight: 700;
}

.pfear__fix { padding: 16px; border-radius: 12px; background: rgba(51, 214, 159, .07); border: 1px solid rgba(51, 214, 159, .22); }
.pfear__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--p-green); font-weight: 800; margin-bottom: 6px; }
.pfear__fix p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--p-steel-2); }

.pmiddle {
    margin: 0;
    padding: 20px 24px;
    border-radius: 16px;
    background: rgba(249, 134, 47, .08);
    border: 1px solid var(--p-line-hot);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--p-steel-2);
}
.pmiddle strong { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }

/* ---- Contractor join banner -------------------------------------------- */

.pjoin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-top: 22px;
    padding: 28px;
    border-radius: 18px;
    background:
        radial-gradient(600px 220px at 90% 0%, rgba(249, 134, 47, .16), transparent 65%),
        linear-gradient(180deg, rgba(14, 36, 64, .85), rgba(7, 21, 39, .85));
    border: 1px solid var(--p-line-hot);
}

.pjoin__copy h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 8px; }
.pjoin__copy > p { color: var(--p-steel-2); font-size: 15px; line-height: 1.6; margin: 0 0 16px; max-width: 62ch; }

.pjoin__cta { text-align: center; }
.pjoin__big { display: block; font-size: 54px; font-weight: 900; line-height: 1; color: var(--p-orange); text-shadow: 0 0 26px rgba(249, 134, 47, .4); }
.pjoin__small { display: block; margin: 4px 0 16px; font-size: 13px; font-weight: 800; color: var(--p-steel); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 780px) {
    .pjoin { grid-template-columns: 1fr; }
    .pjoin__cta .pbtn { width: 100%; }
}

/* ==========================================================================
   Intake funnel — one question per screen.
   ==========================================================================
   Deliberately narrow and quiet compared with the landing page. A person on
   this screen has already decided; the job now is to remove every reason to
   stop. Choice tiles are whole-row tap targets at 56px minimum, because these
   screens are used one-handed on a phone, outdoors, often in gloves. */

.fnl {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px) clamp(52px, 7vw, 90px);
}

.fnl__head { margin-bottom: 26px; }

.fnl__bar { display: flex; gap: 6px; margin: 12px 0 8px; }

.fnl__tick {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(194, 210, 229, .14);
    transition: background .25s ease;
}

.fnl__tick.is-done { background: linear-gradient(90deg, var(--p-orange), var(--p-orange-soft)); }

.fnl__count { font-size: 13px; font-weight: 700; color: var(--p-steel); margin: 0; }

.fnl__title {
    font-size: clamp(27px, 4.4vw, 40px);
    line-height: 1.14;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: #fff;
}

.fnl__help { font-size: 16px; line-height: 1.6; color: var(--p-steel-2); margin: 0 0 26px; max-width: 56ch; }

.fnl__form { display: grid; gap: 26px; }

.fnl__field { display: grid; gap: 10px; }

.fnl__label { font-size: 15px; font-weight: 800; color: #fff; }

.fnl__hint { font-size: 14px; line-height: 1.55; color: var(--p-steel); margin: -2px 0 0; }

.fnl__group {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--p-steel);
    margin: 14px 0 2px;
}

.fnl__group:first-of-type { margin-top: 0; }

.fnl__tiles { display: grid; gap: 10px; }

/* Trade pickers hold forty-odd options, so they go two-up on anything wider
   than a phone. Everything else stays one per row: those are real decisions. */
.fnl__tiles--compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.fnl__tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 14px 52px 14px 16px;
    border-radius: 14px;
    background: rgba(14, 36, 64, .5);
    border: 1px solid var(--p-line);
    cursor: pointer;
    /* Only the press animates. Colour changes here mean "this is selected",
       and a selection should read as instant rather than fade in. */
    transition: transform .16s ease;
}

.fnl__tile:hover { border-color: rgba(249, 134, 47, .4); background: rgba(14, 36, 64, .75); }

.fnl__tile:active { transform: scale(.995); }

/* The input is the accessible control and stays focusable; it is simply not
   drawn, because the tile around it is the thing people aim at. */
.fnl__tile input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.fnl__tile:has(input:focus-visible) { outline: 3px solid var(--p-orange); outline-offset: 2px; }

.fnl__tile:has(input:checked) {
    border-color: var(--p-orange);
    background: rgba(249, 134, 47, .13);
    box-shadow: 0 0 0 1px rgba(249, 134, 47, .4);
}

.fnl__tileBody { display: grid; gap: 4px; }

.fnl__tileName { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; }

.fnl__tileHint { font-size: 13.5px; line-height: 1.5; color: var(--p-steel); }

.fnl__tick2 {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid rgba(194, 210, 229, .3);
}

.fnl__tile:has(input:checked) .fnl__tick2 {
    border-color: var(--p-orange);
    background: var(--p-orange);
}

/* The mark is drawn rather than typed so it never depends on a font. */
.fnl__tile:has(input:checked) .fnl__tick2::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #07131f;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(42deg);
}

/* Older phone browsers have no :has(), and a good share of the contractors
   this page is written for are on exactly those phones. The input is the first
   child of the label, so plain sibling selectors carry the same signal
   everywhere — the tick fills and the name lights up even where the tile
   itself cannot be tinted. */
.fnl__tile input:checked ~ .fnl__tick2 {
    border-color: var(--p-orange);
    background: var(--p-orange);
}

.fnl__tile input:checked ~ .fnl__tick2::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #07131f;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(42deg);
}

.fnl__tile input:checked ~ .fnl__tileBody .fnl__tileName { color: var(--p-orange-soft); }

.fnl__input {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    font: inherit;
    font-size: 16px; /* under 16px, iOS zooms the page on focus */
    color: #fff;
    background: rgba(4, 16, 31, .72);
    border: 1px solid var(--p-line);
    border-radius: 14px;
}

.fnl__input::placeholder { color: rgba(147, 168, 194, .7); }

.fnl__input:focus { outline: none; border-color: var(--p-orange); box-shadow: 0 0 0 3px rgba(249, 134, 47, .22); }

textarea.fnl__input { min-height: 0; line-height: 1.55; resize: vertical; }

.fnl__field.has-error .fnl__input { border-color: #ff7a6b; }

.fnl__error { font-size: 14px; font-weight: 700; color: #ff9b8f; margin: 0; }

.fnl__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 6px;
}

.fnl__actions--center { justify-content: center; flex-wrap: wrap; }

/* Forward is the wide one. Back is present but never competes with it. */
.fnl__next { flex: 1; justify-content: center; }

.fnl__foot { font-size: 13.5px; color: var(--p-steel); margin: 22px 0 0; }

/* ---- End of funnel ---------------------------------------------------- */

.fnl--done { text-align: center; }

.fnl--done .fnl__help,
.fnl--done .fnl__foot { margin-left: auto; margin-right: auto; }

.fnl__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 999px;
    font-size: 30px;
    color: #07131f;
    background: linear-gradient(135deg, var(--p-green), #7ff0c9);
    box-shadow: 0 14px 34px rgba(51, 214, 159, .28);
}

.fnl__ref {
    display: inline-block;
    padding: 12px 20px;
    margin: 0 0 30px;
    border-radius: 14px;
    background: rgba(14, 36, 64, .6);
    border: 1px solid var(--p-line);
    font-size: 15px;
    color: var(--p-steel-2);
}

.fnl__ref strong { color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

.fnl__next3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    text-align: left;
    margin-bottom: 30px;
}

.fnl__nextCard {
    padding: 18px;
    border-radius: 16px;
    background: rgba(14, 36, 64, .5);
    border: 1px solid var(--p-line);
}

.fnl__nextCard strong { display: block; color: #fff; font-size: 15.5px; margin-bottom: 6px; }

.fnl__nextCard p { font-size: 14px; line-height: 1.55; color: var(--p-steel); margin: 0; }

.fnl__nextNum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    color: var(--p-orange);
    background: rgba(249, 134, 47, .15);
    border: 1px solid rgba(249, 134, 47, .35);
}

@media (max-width: 640px) {
    .fnl__actions { position: sticky; bottom: 0; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(4, 16, 31, 0), var(--p-ink-950) 34%); }
    .fnl__tiles--compact { grid-template-columns: 1fr; }
}

/* ---- Guide on the public site ------------------------------------------- */
/* The guide is the one page reachable both signed in and signed out, so the
   card, step and tab styles it needs are duplicated here in the public
   palette. Kept minimal and additive. */

.psection .c-card { background: rgba(14, 36, 64, .5); border: 1px solid var(--p-line); border-radius: 18px; margin-bottom: 20px; }
.psection .c-card .head { padding: 18px 18px 4px; }
.psection .c-card .head h3 { margin: 0 0 4px; font-size: 18px; color: #fff; }
.psection .c-card .head .sub { margin: 0; font-size: 14px; color: var(--p-steel); }

.steps { list-style: none; margin: 0; padding: 4px 18px 18px; display: grid; gap: 4px; }
.step { display: flex; gap: 14px; padding: 12px 0; position: relative; }
.step::before { content: ""; position: absolute; left: 15px; top: 46px; bottom: -4px; width: 1px; background: var(--p-line); }
.step:last-child::before { display: none; }

.step__num {
    flex: 0 0 auto; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 14px; font-weight: 900;
    color: var(--p-orange); background: rgba(249, 134, 47, .15);
    border: 1px solid rgba(249, 134, 47, .35);
}

.step__body { display: grid; gap: 5px; min-width: 0; }
.step__body b { font-size: 15.5px; color: #fff; }
.step__body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--p-steel-2); }
.step__note { font-size: 13px !important; color: var(--p-steel) !important; padding-left: 10px; border-left: 2px solid rgba(255, 190, 85, .45); }
.step__go { font-size: 13.5px; font-weight: 700; color: var(--p-orange); justify-self: start; }

.fitem { display: grid; gap: 4px; padding: 14px 18px; border-top: 1px solid var(--p-line); }
.fitem b { font-size: 15px; color: #fff; }
.fitem span { font-size: 14px; line-height: 1.6; color: var(--p-steel-2); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tab { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--p-line); font-size: 14px; font-weight: 700; color: var(--p-steel-2); }
.tab.active { border-color: var(--p-orange); color: #fff; background: rgba(249, 134, 47, .14); }

/* ---- Language switcher and draft notice -------------------------------
   The switcher has to be usable by somebody who cannot read the rest of the
   page, so it sits in the header at full size rather than hiding behind an
   icon or a flag. Flags are wrong for languages anyway — Spanish is not
   Spain, and Russian is not Russia. */

.langpick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
}

.langpick select {
    appearance: auto;
    font: inherit;
    font-size: 14px;
    padding: 7px 10px;
    min-height: 40px;
    color: var(--p-text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--p-line);
    border-radius: 8px;
    cursor: pointer;
    max-width: 190px;
}

.langpick select:focus-visible {
    outline: 2px solid var(--p-orange);
    outline-offset: 2px;
}

/* The dropdown list itself is drawn by the operating system, so its own
   colours have to be set or it renders dark-on-dark on some platforms. */
.langpick option {
    color: #14202e;
    background: #ffffff;
}

.draftnote {
    padding: 12px 20px;
    background: rgba(249, 134, 47, .12);
    border-bottom: 1px solid var(--p-line-hot);
    color: var(--p-text);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.draftnote a {
    color: var(--p-orange);
    margin-left: 8px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .langpick { margin-left: 0; width: 100%; }
    .langpick select { max-width: none; width: 100%; }
}

/* ---- The fee table ------------------------------------------------------
   Printed from fee_schedule on the terms page. It exists because the terms
   say "the whole fee table is on this page", and a promise like that has to
   be kept by rendering the actual rows rather than by typing them out. */

.feetable {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 26px;
    border: 1px solid var(--p-line);
    border-radius: 12px;
    overflow: hidden;
}

.feetable th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--p-steel);
    background: rgba(14, 36, 64, .55);
    border-bottom: 1px solid var(--p-line);
}

.feetable td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--p-line);
    vertical-align: top;
}

.feetable tr:last-child td { border-bottom: 0; }

.feetable td b {
    display: block;
    color: #fff;
    font-size: 15.5px;
}

.feetable td span {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--p-steel);
}

/* The charge column carries the number people came to read. */
.feetable td:last-child b {
    font-size: 21px;
    color: var(--p-orange);
    letter-spacing: -.01em;
}

@media (max-width: 560px) {
    .feetable th:last-child,
    .feetable td:last-child { text-align: right; }
    .feetable td { padding: 12px; }
}

/* ---- The contractor photograph beside "No work, no fees" ---------------
   Added to match the approved mockup. The block was a two-column grid of
   copy and a $0 badge; it is now three, with the photograph leading, because
   this is the pitch to the side of the marketplace that is hardest to fill
   and it was the only major block on the page carrying no image at all. */

.pjoin { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; }

.pjoin__shot {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--p-line);
    aspect-ratio: 13 / 10;
}

.pjoin__shot .pshot,
.pjoin__shot img,
.pjoin__shot svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    /* Two columns first — the badge drops under the copy before the
       photograph does, because the number is the thing that must stay
       beside the words it belongs to. */
    .pjoin { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
    .pjoin__cta { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .pjoin { grid-template-columns: 1fr; }
    .pjoin__shot { aspect-ratio: 16 / 9; }
}

/* ---- Third-party trust badge ------------------------------------------
   Rendered by partials/trust_badge from the shared footer, so it appears on
   the public site and on every CRM screen from one place. Held back to a quiet
   opacity until hover: it is evidence, not a selling point. */

.trustbadge {
    margin: 0 0 18px;
    display: flex;
    justify-content: center;
}

.trustbadge a {
    display: inline-block;
    line-height: 0;
    opacity: .72;
    transition: opacity .18s ease, transform .18s ease;
    border-radius: 10px;
}

.trustbadge a:hover,
.trustbadge a:focus-visible { opacity: 1; transform: translateY(-2px); }

.trustbadge a:focus-visible { outline: 2px solid var(--p-orange); outline-offset: 4px; }

.trustbadge img { display: block; max-width: 100%; height: auto; }

/* ---- Real jobs, before and after ---------------------------------------
   The one section that proves a claim rather than making one. The two frames
   sit flush against each other with a hairline between, so the eye reads them
   as one continuous thing that changed — a gap would read as two unrelated
   photographs. */

.pproof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pproof__card {
    border: 1px solid var(--p-line);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(14, 36, 64, .4);
}

.pproof__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--p-line);
}

.pproof__pair figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 10 / 7;
}

.pproof__pair .pshot,
.pproof__pair img,
.pproof__pair svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pproof__pair figcaption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    font: 700 10.5px/1 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 9px;
    border-radius: 5px;
    background: rgba(4, 16, 31, .82);
    border: 1px solid var(--p-line);
    color: var(--p-text);
}

.pproof__pair figcaption.is-after {
    background: rgba(51, 214, 159, .16);
    border-color: rgba(51, 214, 159, .4);
    color: #b6f2dc;
}

.pproof__body { padding: 16px 18px 18px; }
.pproof__body b { display: block; font-size: 16px; color: #fff; margin-bottom: 4px; }
.pproof__body p { margin: 0 0 12px; font-size: 14.5px; color: var(--p-steel); }

.pproof__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: var(--p-steel);
    border-top: 1px solid var(--p-line);
    padding-top: 11px;
}

@media (max-width: 860px) {
    .pproof { grid-template-columns: 1fr; }
}

/* The switcher's Go button. Visible by default so the control works even if
   the script never loads — app.js hides it once it takes over. */
.langpick button {
    border: 1px solid var(--p-line);
    background: rgba(255, 255, 255, .06);
    color: var(--p-text);
    font: inherit;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 6px;
}
.langpick button:hover { border-color: var(--p-line-hot); }
.langpick[data-langpick] { display: inline-flex; align-items: center; }

.footer-lang { display: flex; justify-content: center; margin: 0 0 14px; }