/* Homepage section 05 — "234 yards to the sand" (client mockup 1672x941, third revision).
   plate = the mockup with the words, rules and button removed (LaMa) plus 40 mockup px mirrored on the left so the photo bleeds off-screen.
   Its top, right and bottom edges are baked into the file as uneven, cloud-like transparency, so the photo dissolves into the page paper with no
   straight line anywhere. Everything is laid out in mockup pixels x --k, where 1635 mockup px (left viewport edge -> the title's right edge) span
   viewport -> hero right rail (170px / clamp(80px,8.947vw,170px) / 24px), so the copy ends on the hero rail.
   Fonts keep the homepage system (families are re-declared in font-system-calm-coast-plus.css). Below 1151px the photo sits above the copy. */
@font-face{font-family:"Beach Flow Bodoni";src:url("../fonts/library/bauer-bodoni/bauer-bodoni-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Beach Flow Newsreader";src:url("../fonts/hero/newsreader-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Beach Flow Text";src:url("../fonts/library/univers-next-paneuropean/univers-next-paneuropean-400.woff2") format("woff2");font-weight:400;font-display:swap}
.bsf{--bsf-rail:170px;--bsf-top:0px;position:relative;isolation:isolate;overflow:hidden;padding:0;background:#faf6ef;color:#073b57}
.bsf,.bsf *{box-sizing:border-box}
.bsf__frame{position:relative;max-width:1900px;margin-inline:auto;container-type:inline-size}
.bsf__canvas{--k:calc((100cqw - var(--bsf-rail)) / 1635);position:relative;height:calc(var(--bsf-top) + 941 * var(--k))}
.bsf__art{position:absolute;z-index:-1;left:calc(-40 * var(--k));top:var(--bsf-top);width:calc(1912 * var(--k));height:auto;max-width:none;display:block;pointer-events:none;user-select:none}
.bsf__photo{display:none}
.bsf__copy{position:absolute;left:calc(1151 * var(--k));top:calc(var(--bsf-top) + 444.3 * var(--k));width:calc(500 * var(--k))}
.bsf__title{margin:0;color:#073b57;font:400 max(46px,111.5 * var(--k))/calc(106 * var(--k)) "Beach Flow Bodoni",Georgia,serif;letter-spacing:-.012em}
.bsf__title>span{display:block;white-space:nowrap}
.bsf__title em{color:#947352;font:400 1.12em/0 "SP Accent Hand",cursive;font-style:normal;letter-spacing:0}
.bsf__lead{width:max-content;margin:calc(2.8 * var(--k)) 0 0 calc(1 * var(--k));color:#074b69;font:400 max(14px,20.6 * var(--k))/max(20px,30 * var(--k)) "Beach Flow Text",Arial,sans-serif;letter-spacing:0;white-space:nowrap}
.bsf__button{display:inline-flex;align-items:center;justify-content:space-between;width:calc(331 * var(--k));min-width:210px;height:calc(68 * var(--k));min-height:46px;margin:calc(17.4 * var(--k)) 0 0 calc(1 * var(--k));padding:0 calc(40 * var(--k)) 0 calc(50 * var(--k));border-radius:999px;background:#035272;color:#fffaf2;box-shadow:0 7px 17px #794e2d40;font:400 max(16px,24 * var(--k))/1.1 "Beach Flow Newsreader",Georgia,serif;font-variation-settings:"opsz" 14;text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .2s}
.bsf__button svg{display:block;flex:none;width:max(7px,7 * var(--k));height:max(12px,14 * var(--k));fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bsf__button:hover{background:#075771;box-shadow:0 9px 20px #794e2d45}
.bsf__button:focus-visible{outline:3px solid #0f6f86;outline-offset:5px}
/* The review dots share a row with the arrows on mobile; only the dots catch clicks. */
.bsf + .gr .rv-slider__dots{pointer-events:none}
.bsf + .gr .rv-slider__dot{pointer-events:auto}
@media(min-width:1901px){.bsf__art{-webkit-mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}}
@media(max-width:1450px){.bsf{--bsf-rail:clamp(80px,8.947vw,170px)}}
/* stacked: photo first (its edges are already soft), copy below on the hero rails */
@media(max-width:1150px){
 .bsf{padding:150px 0 70px}
 .bsf__canvas{height:auto}
 .bsf__art{display:none}
 .bsf__photo{display:block;width:100%;max-width:820px;margin:0 auto}
 .bsf__photo img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
 .bsf__copy{position:relative;left:auto;top:auto;width:auto;max-width:640px;margin:0;padding:0 var(--bsf-rail)}
 .bsf__title{margin-top:6px;font-size:clamp(48px,9.4cqw,76px);line-height:.98}
 .bsf__title em{font-size:1.05em}
 .bsf__lead{width:auto;max-width:540px;margin:24px 0 0;font-size:20px;line-height:1.5;white-space:normal;text-wrap:pretty}
 .bsf__lb{display:none}
 .bsf__button{width:290px;height:auto;min-height:60px;gap:28px;padding:15px 29px;margin:25px 0 0;font-size:24px}
 .bsf__button svg{width:11px;height:18px}
}
@media(max-width:900px){.bsf{--bsf-rail:24px;padding-top:110px}}
@media(max-width:540px){
 .bsf{padding-top:90px}
 .bsf__copy{margin-top:0}
 .bsf__title{font-size:clamp(40px,14.1cqw,66px);letter-spacing:-.02em}
 .bsf__lead{font-size:18px}
 .bsf__button{width:270px;min-height:57px;font-size:23px;padding-inline:28px}
}
@media(max-width:360px){.bsf__title{font-size:38px}.bsf__lead{font-size:17px}.bsf__button{width:250px;font-size:21px;min-height:55px;padding-inline:25px}}
@media(prefers-reduced-motion:reduce){.bsf__button{transition:none}}

/* "234 yards to the sand" pushed 60px lower: space above the whole section (photo + copy move together; the section keeps its own height, so the reviews height match is unchanged). */
.bsf{margin-top:60px}

/* "Sandpiper RV Resort" label + dashes removed again from this section (client request). With them gone the title leads the copy; start the block 36 mockup px lower
   than the old label's top (390 -> 426) so the remaining text stays centred in the panel. The 2-class selector beats beach-reference-20261007.css regardless of load order. Desktop art layout only. */
@media(min-width:1151px){.bsf .bsf__copy{top:calc(426 * var(--k))}}

/* Longer lead (6 lines in the narrow panel): between 1151 and 1330px the button used to end right at the section's bottom edge; this space is plain paper (the art fades into it). */
@media(min-width:1151px) and (max-width:1330px){.bsf{padding-bottom:clamp(0px,calc((1331px - 100vw) * .36),64px)}}