/* /custom-pool-fencing - this page's own additions (prefix cp-). Everything else comes from the live site.min.css,
   glass.min.css and perforated.min.css, which this page links exactly as /designs-in-action does. Shared component
   rules (the gallery and its viewer) are copied here from designs-in-action.css on purpose: a page never relies on
   another page's stylesheet. */

.cp-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the lead: words top left over the evening sky; the caption bottom left ---- */
.cp-lead .pk-lead__pic img{object-position:50% 60%}
.cp-lead__cap{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(14px,3vh,28px);margin:0;z-index:2;
  font:700 11px/1.4 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 1px 14px rgba(0,0,0,.8)}
@media (max-width:820px){.cp-lead__cap{position:static;margin-top:16px}}

/* ---- intro: the facts under the film ---- */
.cp-intro .pf-duo{align-items:center}
.cp-facts{list-style:none;margin:clamp(34px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.cp-facts li{background:var(--pp-ink-2);padding:clamp(20px,2.4vw,32px);border-top:3px solid var(--pp-teal);min-width:0}
.cp-facts b{display:block;font:900 clamp(34px,3.8vw,56px)/.9 Montserrat,sans-serif;letter-spacing:-.04em;color:var(--pp-teal);white-space:nowrap}
.cp-facts span{display:block;margin-top:10px;color:#c0d2de;font-weight:300;font-size:15px;line-height:1.45}
@media (max-width:960px){.cp-facts{grid-template-columns:1fr 1fr}}

/* ---- the drawings ---- */
.cp-dia{display:block;width:100%;height:auto}
.cp-dia-box{margin:clamp(24px,3vh,34px) 0 0;background:var(--pp-navy);border:1px solid var(--pp-line);border-radius:8px;padding:clamp(10px,1.4vw,18px)}
.cp-dia-box figcaption{margin:8px 4px 2px;color:var(--pp-mute);font:700 10.5px/1.4 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase}

/* ---- the three special panels ---- */
.cp-shapes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(28px,5vh,50px)}
.cp-shape{display:flex;flex-direction:column;background:var(--pp-ink-2);border-radius:8px;overflow:hidden;color:#fff;text-decoration:none;
  border-top:3px solid var(--pp-teal);transition:transform .2s,background .2s;min-width:0}
.cp-shape:hover,.cp-shape:focus-visible{background:#0a3452;transform:translateY(-2px);color:#fff}
.cp-shape__dia{background:var(--pp-navy);padding:clamp(10px,1.2vw,16px)}
.cp-shape__dia .cp-dia{aspect-ratio:2/1}
.cp-shape__txt{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.cp-shape__txt h3{margin:0;font:900 clamp(20px,2vw,26px)/1.05 Montserrat,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.cp-shape__txt p{margin:12px 0 0;color:#bcd0dc;font-weight:300;font-size:15px;line-height:1.6}
.cp-shape__use{margin-top:14px!important;padding-top:12px;border-top:1px solid var(--pp-line)}
.cp-shape__use b{display:block;margin-bottom:4px;font:800 10.5px/1.3 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pp-teal)}
.cp-shape__go{margin-top:auto;padding-top:16px;font:800 11.5px/1.3 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-teal)}
@media (max-width:980px){.cp-shapes__grid{grid-template-columns:1fr;max-width:640px}}

/* ---- a special panel section: words and drawing on one side, the gallery on the other ---- */
.cp-sec{scroll-margin-top:70px}
.cp-sec__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(26px,4vw,64px);align-items:start}
.cp-sec--rev .cp-sec__txt{order:2}
@media (min-width:901px){.cp-sec--rev .cp-sec__grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}}
.cp-sec__txt{min-width:0}
.cp-sec .pp-lede{max-width:56ch}
.cp-best{margin:22px 0 0;color:#c8dae5;font-weight:300;font-size:15.5px;line-height:1.6;padding-top:14px;border-top:1px solid var(--pp-line);max-width:56ch}
.cp-best b{display:block;margin-bottom:4px;font:800 11px/1.3 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pp-teal)}
.cp-say{margin:24px 0 0;padding:18px 20px;background:var(--pp-ink-2);border-left:3px solid var(--pp-teal);border-radius:0 6px 6px 0;max-width:56ch}
.pp-band--black .cp-say{background:var(--pp-ink)}
.cp-say p{margin:0;color:#fff;font-weight:600;font-size:clamp(16px,1.4vw,19px);line-height:1.38;letter-spacing:-.01em}
.cp-say cite{display:block;margin-top:10px;font:700 11px/1.5 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-mute);font-style:normal}
@media (max-width:900px){.cp-sec__grid{grid-template-columns:1fr}.cp-sec--rev .cp-sec__txt{order:0}}

/* the gallery: one big, the rest underneath. Every image opens big, with arrows */
.cp-gal{min-width:0;position:sticky;top:90px}
@media (max-width:900px){.cp-gal{position:static}}
.cp-gal figure{margin:0;position:relative;overflow:hidden;border-radius:6px;background:var(--pp-ink-2)}
.cp-gal img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .5s}
.cp-gal figure:hover img{transform:scale(1.03)}
.cp-gal__main{aspect-ratio:4/3}
.cp-gal__main figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 13px;font:700 11px/1.45 Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(0,12,21,.78) 0,rgba(0,12,21,0) 100%);text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
.cp-gal__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.cp-gal__thumbs figure{aspect-ratio:1/1}
.cp-gal__count{margin:10px 0 0;font:700 10.5px/1.4 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-mute)}
@media (max-width:560px){.cp-gal__thumbs{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}.cp-gal__main{aspect-ratio:4/3}}

/* ---- big quote ---- */
.cp-quote blockquote{max-width:30ch;margin-left:auto;margin-right:auto}

/* ---- more problems ---- */
.cp-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(28px,5vh,50px)}
.cp-prob{margin:0;background:var(--pp-ink-2);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.cp-prob img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.cp-prob figcaption{padding:18px 20px 22px}
.cp-prob h3{margin:0 0 8px;font:900 clamp(17px,1.5vw,20px)/1.18 Montserrat,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.cp-prob p{margin:0;color:#adc2d0;font-weight:300;font-size:15px;line-height:1.58}
.cp-prob__cap{display:block;margin-top:12px;font:700 10px/1.5 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--pp-mute)}
@media (max-width:1000px){.cp-more__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cp-more__grid{grid-template-columns:1fr}}

/* ---- how it works ---- */
.cp-h3{margin:0;font:900 clamp(22px,2.4vw,34px)/1.04 Montserrat,sans-serif;letter-spacing:-.025em;text-transform:uppercase;color:#fff}
.cp-h3 em{font-style:normal;color:var(--pp-teal)}
.cp-steps{list-style:none;margin:clamp(26px,4vh,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.cp-steps li{background:var(--pp-ink-2);padding:clamp(20px,2vw,28px);border-top:3px solid var(--pp-teal);min-width:0}
.cp-steps b{display:block;font:900 clamp(34px,3.2vw,46px)/.9 Montserrat,sans-serif;letter-spacing:-.04em;color:var(--pp-teal)}
.cp-steps h4{margin:14px 0 8px;font:900 clamp(15px,1.3vw,18px)/1.15 Montserrat,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.cp-steps p{margin:0;color:#adc2d0;font-weight:300;font-size:14.5px;line-height:1.6}
@media (max-width:1100px){.cp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.cp-steps{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.cp-steps{grid-template-columns:1fr}}
.cp-send{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(26px,4vw,64px);align-items:center;margin-top:clamp(40px,7vh,72px)}
.cp-send__note{margin:20px 0 0;color:#adc2d0;font-weight:300;font-size:15px;line-height:1.62;max-width:60ch}
.cp-send .cp-say{margin-top:0}
@media (max-width:900px){.cp-send{grid-template-columns:1fr}}

/* ---- reviews ---- */
.cp-revs4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cp-revs4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cp-revs4{grid-template-columns:1fr}}

/* ---- brochure / where ---- */
.cp-bro{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:center}
.cp-bro__cover{margin:0;max-width:420px}
.cp-bro__cover img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.55);cursor:zoom-in}
.cp-bro__how{font-size:15px}
@media (max-width:820px){.cp-bro{grid-template-columns:1fr}.cp-bro__cover{max-width:300px}}
.cp-where .pk-split__pic img{object-position:50% 55%}

/* ---- the gallery viewer (opens over the page; Menu and Contact hide while it is open) ---- */
.cp-lb .pp-lb__inner{width:min(1500px,100%);height:100%;justify-content:center;position:relative}
.cp-lb figure{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;min-height:0}
.cp-lb img{display:block;max-width:100%;max-height:78svh;width:auto;height:auto;border-radius:6px;background:#000c15;object-fit:contain;touch-action:pan-y}
.cp-lb figcaption{margin:12px auto 0;max-width:80ch;text-align:center;color:#c8dbe8;font-weight:400;font-size:14px;line-height:1.5}
.cp-lb__n{margin:0;color:var(--pp-mute);font:700 11px/1 Montserrat,sans-serif;letter-spacing:.16em}
.cp-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,12,21,.6);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:2}
.cp-lb__nav:hover{border-color:#fff;background:rgba(0,185,198,.25)}
.cp-lb__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.cp-lb__prev{left:4px}.cp-lb__next{right:4px}
@media (max-width:700px){.cp-lb__nav{position:fixed;top:auto;bottom:max(22px,env(safe-area-inset-bottom));transform:none;width:50px;height:50px}.cp-lb__prev{left:calc(50% - 62px)}.cp-lb__next{right:calc(50% - 62px)}
  .cp-lb figcaption{margin-bottom:70px}}
body.gl-lb-open .pk-dock{visibility:hidden!important}
.cp-lb .pp-lb__title .pp-nm{color:#fff}.cp-lb .pp-lb__title .pp-nm b{color:var(--pp-teal)}
/* the wordmark keeps its two colours in the film card's small line and in the film viewer's title */
.cp-intro .pk-film__txt small .pp-nm b{color:#00b9c6}
.pp-lb__title .pp-nm{color:#fff}.pp-lb__title .pp-nm b{color:#00b9c6}