/* Park Details — "Choose your site" as Opening panels (concept 3 of /sandpiper/site-concepts-2/, copied rule for rule,
   without the "Every site includes" features bar, client 2026-10-01). Four tall photo panels; the one you point at,
   focus or tap opens wide (park-details-sites-panels.js). Scoped under .sd3. Desktop lengths are frame px x --u
   (100vw / 1900). The section's side padding uses the hero header's rails (170 / clamp(80px, 8.947vw) / 24px),
   so the heading, the Book Now pill and the panels sit on the same left and right lines as the hero content. */
.sd3{
  --u:calc(100vw / 1900);
  --rail:calc(170 * var(--u));
  --navy:#073b57; --sand:#917658; --kick:#9c8268; --lead:#0b4b69; --cap:#667080;
  --paper:#faf7ef; --gold:#b89a6a;
  --display:"HP Display",Georgia,serif; --accent:"HP Accent",cursive; --text:"HP Text",Arial,sans-serif; --label:"HP Label",Arial,sans-serif;
  --ease:cubic-bezier(.4,.1,.2,1);
  position:relative;
  color:var(--navy);
  font:400 16px/normal var(--text);
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:1450px){.sd3{--rail:clamp(80px,8.947vw,170px)}}
@media (max-width:900px){.sd3{--rail:24px}}
.sd3,.sd3 *,.sd3 *::before,.sd3 *::after{box-sizing:border-box}
.sd3 :where(h2,h3,p,ul,figure){margin:0}
.sd3 img{display:block;max-width:100%}
.sd3 svg{max-width:none}
.sd3 :focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sd3 .ac-k{display:flex;align-items:center;gap:calc(20 * var(--u));font:400 max(11px,calc(14.26 * var(--u)))/1 var(--label);letter-spacing:.39em;text-transform:uppercase;color:var(--kick);white-space:nowrap}
.sd3 .ac-k::before{content:"";width:calc(40 * var(--u));min-width:24px;height:1px;background:#b0977f}
.sd3 .ac-title{font:400 calc(85.8 * var(--u))/.99 var(--display);letter-spacing:-.01em;color:var(--navy);text-wrap:wrap}
.sd3 .ac-title em{display:inline-block;font:400 1.1em/.72 var(--accent);font-style:normal;color:var(--sand);white-space:nowrap}
.sd3 .ac-pill{display:inline-flex;align-items:center;gap:calc(18 * var(--u));height:max(46px,calc(62 * var(--u)));padding:0 max(6px,calc(9 * var(--u))) 0 max(20px,calc(30 * var(--u)));border:1px solid rgba(7,59,87,.32);border-radius:999px;font:500 max(14px,calc(19 * var(--u)))/1 var(--text);color:var(--navy);text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.sd3 .ac-pill span{display:grid;place-items:center;width:max(34px,calc(44 * var(--u)));height:max(34px,calc(44 * var(--u)));border-radius:50%;background:var(--navy);color:#fff;transition:transform .25s var(--ease),background .25s}
.sd3 .ac-pill svg{width:45%;height:45%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd3 .ac-pill:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.sd3 .ac-pill:hover span{background:#fff;color:var(--navy);transform:translateX(3px)}
.sd3 h3{font:500 calc(30 * var(--u))/1.15 var(--text);letter-spacing:-.01em;color:var(--lead)}
.sd3 article p{margin-top:calc(8 * var(--u));font:400 max(13.5px,calc(17.5 * var(--u)))/1.45 var(--text);color:var(--cap)}
.sd3 .sd3__size{margin-top:calc(6 * var(--u))!important;font:500 max(14px,calc(19 * var(--u)))/1.3 var(--text)!important;color:var(--sand)!important}
.sd3 .sd3__head .ac-title{margin-top:calc(32 * var(--u))}
.sd3 .sd3__head{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(60 * var(--u))}
/* ---------- 3. Opening panels ---------- */
.sd3{padding:150px var(--rail);background:var(--paper)}
.sd3 .sd3__wrap{position:relative;margin-top:calc(70 * var(--u))}
.sd3 .sd3__panels{display:flex;gap:calc(14 * var(--u));height:calc(700 * var(--u))}
.sd3 .sd3__p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:calc(14 * var(--u));cursor:pointer;transition:flex-grow .7s var(--ease);box-shadow:0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(60,44,20,.14)}
.sd3 .sd3__p:first-child{border-top-left-radius:calc(150 * var(--u))}.sd3 .sd3__p:last-child{border-top-right-radius:calc(150 * var(--u))}
.sd3 .sd3__p.is-on{flex-grow:2.6}
.sd3 .sd3__p > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .6s}
.sd3 .sd3__p:not(.is-on) > img{filter:saturate(.8) brightness(.88)}
.sd3 .sd3__p::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,32,46,.72) 0,rgba(4,32,46,.3) 28%,rgba(4,32,46,0) 52%)}
.sd3 .sd3__c{position:absolute;z-index:1;left:calc(36 * var(--u));right:calc(30 * var(--u));top:calc(40 * var(--u));color:#fff;-webkit-user-select:text;user-select:text}
.sd3 .sd3__c span{font:400 calc(54 * var(--u))/1 var(--display);color:#ecd3a4}
.sd3 .sd3__c h3{margin-top:calc(8 * var(--u));font:400 calc(36 * var(--u))/1.1 var(--display)!important;color:#fff!important;white-space:nowrap}
.sd3 .sd3__c .sd3__size{color:#ecd3a4!important;white-space:nowrap}
.sd3 .sd3__c p:last-child{max-width:calc(440 * var(--u));color:rgba(255,255,255,.9)!important;opacity:0;transition:opacity .4s}
.sd3 .sd3__p.is-on .sd3__c p:last-child{opacity:1;transition-delay:.3s}
/* ---------- below 1000px: stacks ---------- */
@media (max-width:999px){
  .sd3 .ac-k{gap:14px;font-size:12px;letter-spacing:.3em}
  .sd3 .ac-title{font-size:clamp(40px,9vw,66px)!important;line-height:1.02;margin:18px 0 0!important}
  .sd3 h3{font-size:26px!important}
  .sd3 article p{font-size:15.5px!important;max-width:none!important;min-height:0!important}
  .sd3 .sd3__size{font-size:16px!important}
  .sd3{display:block;padding:72px var(--rail);text-align:left}
  .sd3 .ac-pill{margin-top:22px}
  .sd3 .sd3__head{display:block}
  .sd3 .sd3__wrap{margin-top:34px}.sd3 .sd3__panels{flex-direction:column;height:auto;gap:12px}
  .sd3 .sd3__p,.sd3 .sd3__p.is-on{flex:none;height:260px;border-radius:14px!important}
  .sd3 .sd3__c{left:22px;right:18px;top:20px}.sd3 .sd3__c span{font-size:30px}.sd3 .sd3__c h3{font-size:26px!important}.sd3 .sd3__c p:last-child{opacity:1}
  .sd3 .sd3__p::after{background:linear-gradient(to bottom,rgba(4,32,46,.78) 0,rgba(4,32,46,.45) 55%,rgba(4,32,46,.1) 100%)}
  .sd3 .sd3__p:not(.is-on) > img{filter:none}
}
/* Top spacing: the amenities section above already ends with 150 frame px of padding, so this section's own top padding
   only makes up the difference. Result: exactly 150px from the "See every amenity" button to "CHOOSE YOUR SITE". */
@media (min-width:1000px){.sd3{padding-top:max(0px,calc(150px - 150 * 100vw / 1900))}}
/* The closing section below has 150px of padding above its content, so on desktop this section adds none at its foot:
   the space from these panels to the sunset arch is exactly that 150px. Lifted above the closing section so the
   panels' shadows fall softly over its top instead of being cut at the seam. */
@media (min-width:1000px){.sd3{padding-bottom:0;position:relative;z-index:3}}