/* Board finder SFH2026 */
/* The band keeps its proportion on a wide screen.
 *
 * Height comes from the padding, and 6vw reached the old 80px cap at a 1333px
 * viewport — above that the photo kept widening while the band stopped growing,
 * so it flattened: measured 3.63 wide-to-tall at 1180 (matching the Figma
 * frame) but 5.35 at 2000. Only the CAP is raised, so every width at or below
 * 1333 is byte-for-byte what it was and the design width is untouched.
 *
 * NOT min-height with a flex box, which was the first attempt: making this a
 * flex container stops the children's margins collapsing into it, and the band
 * grew 325 -> 392 at the design width as a side effect. */
.sfh-finder { position: relative; overflow: hidden; background: #17181a; padding: clamp(65px, 6vw, 160px) 0; }
.sfh-finder-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sfh-finder-shade { 
    position: absolute; 
    inset: 0; 
    /* background: rgba(10,11,12,.72);  */
}
/* 1320 = 1280 content + 2×20 gutter, so text lands exactly on the .sfh-container edge */
.sfh-finder-in { position: relative; z-index: 1; max-width: calc(var(--cms2-max-width, 1280px) + 40px); margin: 0 auto; padding: 0 20px 30px 20px; }

.sfh-finder-heading {
    /* An explicit line-height, which this heading never had. `normal` resolved
       to 1.5 in Poppins -- a 42px heading in a 63px box -- and since the text is
       all caps, none of that leading is used by a descender or an accent. Half
       of it sat between the eyebrow and the cap line and read as a gap nobody
       had asked for. 1.05 matches the other SFH display headings.
       margin-top is gone with it: the eyebrow's own 14px already separates the
       two, and the 6px was compensating for a line box that is no longer loose.
       margin-bottom goes UP to keep the distance to the form unchanged -- the
       tighter line box gave back space below as well as above. */
    margin: 0 0 32px; color: #fff; text-transform: uppercase;
    line-height: 1.05;
    font-weight: 800; font-size: clamp(36px, 3.4vw, 42px);
}
.sfh-finder-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.sfh-finder-field { display: flex; flex-direction: column; gap: 7px; flex: 1 1 200px; }
.sfh-finder-field span {
    color: rgba(255,255,255,.75); font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
}
.sfh-finder-field select {
    appearance: none; -webkit-appearance: none; width: 100%;
    backdrop-filter: blur(8px);                  
    -webkit-backdrop-filter: blur(8px);  
    background: rgba(255,255,255,.20) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="white" stroke-width="2"/></svg>') no-repeat right 16px center;
    border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
    color: #fff; font: inherit; font-size: 14px; padding: 12.9px 40px 12.9px 18px; cursor: pointer;
}
.sfh-finder-field select option { color: #17181a; }
.sfh-finder-form .sfh-btn { flex: 0 0 auto; }

@media (max-width: 760px) {
    .sfh-finder-in { padding-bottom: 0; }
    .sfh-finder-form { flex-direction: column; align-items: stretch; }
    /* in a column the 200px flex-basis would become each field's HEIGHT */
    .sfh-finder-field { flex: 0 0 auto; }
    .sfh-finder-form .sfh-btn { align-self: flex-start; margin-top: 8px; }
}