/* Park Details "Stroll closer to sea." (client mockup 2026-10-19).
   --u is one mockup pixel. The stage spans the hero's rails: its left edge is the text column (mockup x=147)
   and its right edge is the painting's right edge (mockup x=1665), so both ends land on the hero rails. The
   first row of the text column (mockup y=133) sits 150px under the top of the section. */

body.park-home-header .psm-sec{
  --psm-ink:#073b57;--psm-tan:#a58b6e;--psm-gold:#b19168;--psm-line:#d3b999;
  position:relative;margin-top:100px;padding:150px max(clamp(80px,8.947vw,170px),calc((100% - 1560px) / 2));overflow:hidden;
  background:#faf7ef;color:var(--psm-ink)
}
.psm-sec .psm{container-type:inline-size}
.psm-sec .psm__stage{--u:calc(100cqw / 1518);position:relative;min-height:calc(690 * var(--u))}

/* Slightly smaller painting, shifted right to open a gap beside the copy.
   Painting + grass plate. The photo box is the painting's own region (mockup x 684..1672, y 28..900);
   the plate is 1712 wide because it carries 40px of extra grass on its left edge. */
.psm-sec .psm__photo{position:absolute;z-index:0;left:calc(600 * var(--u));top:calc(-95 * var(--u));width:calc(925 * var(--u));height:calc(816.4 * var(--u));--v:calc(.9362348 * var(--u));pointer-events:none}
.psm-sec .psm__plate{position:absolute;left:calc(-724 * var(--v));top:calc(-28 * var(--v));width:calc(1712 * var(--v));height:auto;max-width:none;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(24 * var(--v)));mask-image:linear-gradient(90deg,transparent,#000 calc(24 * var(--v)))}
.psm-sec .psm__badge{
  position:absolute;left:calc(638 * var(--v));top:calc(142 * var(--v));width:calc(258 * var(--v));height:calc(78 * var(--v));margin:0;
  border-radius:999px;background:#fdfbf6;box-shadow:0 calc(8 * var(--v)) calc(22 * var(--v)) #1f4a6d26
}
.psm-sec .psm__pin{position:absolute;left:calc(22 * var(--v));top:calc(16 * var(--v));width:calc(38 * var(--v));height:calc(46 * var(--v));color:#a98a63}
.psm-sec .psm__badge i{position:absolute;left:calc(79 * var(--v));top:calc(19 * var(--v));width:max(1px,calc(1.4 * var(--v)));height:calc(41 * var(--v));background:var(--psm-line)}
.psm-sec .psm__badge-num{position:absolute;left:calc(105 * var(--v));top:calc(23 * var(--v));font:400 calc(46 * var(--v))/1 var(--hp-display);letter-spacing:-.03em;color:var(--psm-ink);-webkit-text-stroke:.0086em currentColor}
.psm-sec .psm__badge-unit{position:absolute;left:calc(179 * var(--v));top:calc(37 * var(--v));font:400 calc(21.5 * var(--v))/1 var(--hp-display);letter-spacing:-.02em;color:#9d8263}

.psm-sec .psm__copy{position:relative;z-index:2;width:calc(515 * var(--u))}
.psm-sec .psm__eyebrow{position:relative;height:calc(35 * var(--u));margin:0}
.psm-sec .psm__eyebrow svg{position:absolute;left:calc(-3 * var(--u));top:calc(-4 * var(--u));width:calc(43 * var(--u));height:calc(41 * var(--u));color:#a98a63}
.psm-sec .psm__eyebrow i{position:absolute;left:calc(60 * var(--u));top:calc(18 * var(--u));width:calc(90 * var(--u));height:1px;background:var(--psm-line)}
body.park-home-header .psm-sec .psm__title{
  margin:calc(54.5 * var(--u)) 0 0;font:400 calc(116 * var(--u))/calc(94 * var(--u)) var(--hp-display);letter-spacing:-.03em;color:var(--psm-ink);
  -webkit-text-stroke:.0025em currentColor
}
.psm-sec .psm__title>span{display:block;white-space:nowrap}
.psm-sec .psm__title>span+span{color:var(--psm-tan);letter-spacing:0;word-spacing:.06em;-webkit-text-stroke:.0086em currentColor}
.psm-sec .psm__lead{margin:calc(10.5 * var(--u)) 0 0;max-width:calc(475 * var(--u));font:400 calc(24.6 * var(--u))/calc(34 * var(--u)) var(--hp-text);letter-spacing:0;color:var(--psm-ink)}
.psm-sec .psm__ln{white-space:nowrap}
.psm-sec .psm__distance{position:relative;width:calc(309 * var(--u));height:calc(91 * var(--u));margin:calc(40 * var(--u)) 0 0;border:1px solid #e6e1d6;border-radius:999px;background:#ffffff8c;box-sizing:border-box}
.psm-sec .psm__measure{position:static;margin:0}
.psm-sec .psm__num{position:absolute;left:calc(44 * var(--u));top:calc(21 * var(--u));font:400 calc(62 * var(--u))/1 var(--hp-display);letter-spacing:-.03em;color:var(--psm-ink);-webkit-text-stroke:.0086em currentColor}
.psm-sec .psm__distance i{position:absolute;left:calc(157 * var(--u));top:calc(22 * var(--u));width:max(1px,calc(1.4 * var(--u)));height:calc(46 * var(--u));background:var(--psm-line)}
.psm-sec .psm__unit{position:absolute;left:calc(188 * var(--u));top:calc(36.5 * var(--u));font:400 calc(28.3 * var(--u))/1 var(--hp-display);letter-spacing:-.02em;color:#9d8263}
.psm-sec .psm__link{
  display:flex;align-items:center;gap:calc(30 * var(--u));width:calc(322 * var(--u));height:calc(72 * var(--u));margin:calc(26 * var(--u)) 0 0;padding:0 calc(40 * var(--u)) 0 calc(50 * var(--u));box-sizing:border-box;
  border-radius:999px;background:var(--psm-ink);color:#fffdf5;text-decoration:none;box-shadow:0 calc(10 * var(--u)) calc(22 * var(--u)) #073b5717;
  font:400 calc(26 * var(--u))/1.2 var(--hp-text);letter-spacing:0;white-space:nowrap;transition:background .25s
}
.psm-sec .psm__link:hover{background:#0b566d;color:#fff}
.psm-sec .psm__link:focus-visible{outline:2px solid var(--psm-ink);outline-offset:5px}
.psm-sec .psm__link svg{flex:none;width:calc(24 * var(--u));height:auto;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* Tablet and phone: copy first, painting below. The hero's rails are 24px at 900px and below. */
@media(max-width:900px){body.park-home-header .psm-sec{padding-left:24px;padding-right:24px}}
@media(max-width:1250px){
  .psm-sec .psm__stage{--u:1px;display:flex;flex-direction:column;min-height:0}
  .psm-sec .psm__copy{width:auto;max-width:640px;order:1}
  .psm-sec .psm__photo{position:relative;left:auto;top:auto;order:2;width:96%;height:auto;aspect-ratio:988 / 872;margin:60px 0 0 auto;overflow:hidden;container-type:inline-size;--v:calc(100cqw / 988)}
  .psm-sec .psm__plate{-webkit-mask-image:none;mask-image:none}
  body.park-home-header .psm-sec .psm__title{margin:26px 0 0;font-size:clamp(42px,20.5cqw,98px);line-height:.88}
  .psm-sec .psm__lead{margin:24px 0 0;max-width:525px;font-size:22.5px;line-height:1.4}
  .psm-sec .psm__lead br{display:none}
  .psm-sec .psm__ln{white-space:normal}
  .psm-sec .psm__distance{margin-top:32px}
  .psm-sec .psm__link{width:min(100%,322px);margin-top:24px}
}
@media(max-width:700px){
  .psm-sec .psm__badge{transform:scale(1.5);transform-origin:100% 0}
}
@media(max-width:540px){
  .psm-sec .psm__lead{font-size:20.5px;line-height:1.4}
  .psm-sec .psm__link{padding:0 26px 0 34px;gap:18px;font-size:22px}
}