/* /pool-gates - this page's own additions (prefix gt-). 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.
   Nothing here depends on another page's stylesheet: the viewer rules below are copied in, renamed, on purpose. */

.gt-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 bottom left over the shaded corner; the gate itself stays clear on the right ---- */
.gt-lead{align-items:flex-end}
.gt-lead .pk-lead__pic img{object-position:56% 46%}
.gt-lead::before{background:linear-gradient(18deg,rgba(0,12,21,.84) 0,rgba(0,12,21,.5) 30%,rgba(0,12,21,0) 56%)}
.gt-lead .pk-lead__copy{padding-top:0;padding-bottom:clamp(40px,8vh,90px)}
.gt-lead .pp-h1{font-size:clamp(36px,5vw,76px);max-width:15ch}
.gt-lead .pp-h1 em{display:block}
.gt-lead__cap{margin:18px 0 0;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)}
.gt-lead__cap .pp-nm b{color:#6ff0f8}

/* ---- intro ---- */
.gt-intro__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.gt-intro .pp-lede{max-width:62ch}
.gt-law{border-left:3px solid var(--pp-teal);padding-left:18px;color:#e6f2f7}
.gt-law a{color:var(--pp-teal);font-weight:700}
.gt-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.gt-facts>li{background:var(--pp-ink-2);padding:clamp(20px,2.4vw,32px);border-top:3px solid var(--pp-teal);min-width:0}
.gt-facts>li>b{display:block;font:900 clamp(32px,3.6vw,54px)/.9 Montserrat,sans-serif;letter-spacing:-.04em;color:var(--pp-teal);white-space:nowrap}
.gt-facts>li>b small{font-size:.5em;margin:0 .06em;letter-spacing:0;vertical-align:.2em}
.gt-facts>li>span{display:block;margin-top:10px;color:#c0d2de;font-weight:300;font-size:15px;line-height:1.45}
@media (max-width:960px){.gt-intro__grid{grid-template-columns:1fr}.gt-facts{max-width:640px}}

/* ---- shared bits ---- */
.gt-h3{margin:0;font:900 clamp(22px,2.4vw,34px)/1.04 Montserrat,sans-serif;letter-spacing:-.025em;text-transform:uppercase;color:#fff}
.gt-h3 em{font-style:normal;color:var(--pp-teal)}
.gt-note{margin:22px 0 0;color:var(--pp-mute);font-size:13.5px;line-height:1.6;max-width:84ch}
.gt-note a{color:var(--pp-teal)}
.gt-links{margin:22px 0 0}
.gt-pic figure{margin:0}
.gt-pic figcaption{margin-top:10px;color:#9fb6c6;font:700 10.5px/1.5 Montserrat,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.gt-pic img{cursor:zoom-in}
.gt-by{display:block;margin-top:3px;font-weight:600;letter-spacing:.06em;text-transform:none;color:#cfe3ee;font-size:12px}
.gt-cap{margin:0;font:700 10.5px/1.5 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9fb6c6}
/* a caption sitting on a photo that fills its box (split sections) */
.pk-split__pic.gt-pic figure{position:absolute;inset:0}
.pk-split__pic.gt-pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,12,21,.72) 0,rgba(0,12,21,0) 100%);font:700 10.5px/1.5 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.pk-split__pic.gt-pic figcaption .gt-by{color:#dfeef5}

/* ---- the three ways ---- */
.gt-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(28px,5vh,50px)}
.gt-card{position:relative;display:flex;flex-direction:column;background:var(--pp-ink-2);border-radius:6px;overflow:hidden;min-width:0;border-top:3px solid var(--pp-teal)}
.gt-card figure{margin:0}
.gt-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.gt-card__txt{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.gt-card__k{margin:0;font:800 10.5px/1 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pp-teal)}
.gt-card h3{margin:0;font:900 clamp(20px,2vw,28px)/1.04 Montserrat,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.gt-card h3 em{font-style:normal;color:var(--pp-teal)}
.gt-card p{margin:0;color:#adc2d0;font-weight:300;font-size:15px;line-height:1.6}
.gt-card a.gt-go{margin-top:auto;padding-top:8px;color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
.gt-card a.gt-go span{color:var(--pp-teal)}
.gt-card a.gt-go:hover{color:var(--pp-teal)}
.gt-card .gt-cap{padding:0 22px 16px}
@media (max-width:900px){.gt-cards{grid-template-columns:1fr;max-width:560px}}

/* ---- PurePerf split ---- */
.gt-pure .pk-split__pic img{object-position:50% 55%}

/* ---- PurePerf all round, a design on the gate: the gallery ---- */
.gt-mix__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px)}
.gt-mix__intro .pp-lede{margin-top:clamp(14px,2vh,22px)}
@media (max-width:820px){.gt-mix__intro{grid-template-columns:1fr;gap:0}}
.gt-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,5vh,50px)}
.gt-gal figure{margin:0;min-width:0;position:relative}
.gt-gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;cursor:zoom-in}
.gt-gal figcaption{margin-top:9px;color:#9fb6c6;font:700 10.5px/1.5 Montserrat,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.gt-gal .gt-gal__big{grid-column:span 2;grid-row:span 2}
.gt-gal .gt-gal__big img{aspect-ratio:auto;height:calc(100% - 28px);min-height:280px}
.gt-gal blockquote{margin:0;grid-column:span 3;align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:var(--pp-ink-2);
  border-left:3px solid var(--pp-teal);border-radius:0 6px 6px 0;padding:clamp(20px,2.4vw,34px)}
.gt-gal blockquote p{margin:0;color:#fff;font-weight:700;font-size:clamp(18px,1.9vw,26px);line-height:1.3;letter-spacing:-.01em}
.gt-gal blockquote cite{display:block;margin-top:14px;font:700 11px/1.5 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pp-mute);font-style:normal}
@media (max-width:1000px){.gt-gal{grid-template-columns:repeat(2,minmax(0,1fr))}.gt-gal .gt-gal__big{grid-column:span 2;grid-row:auto}.gt-gal .gt-gal__big img{height:auto;aspect-ratio:4/3;min-height:0}}
@media (max-width:1000px){.gt-gal blockquote{grid-column:span 2}}
@media (max-width:520px){.gt-gal{grid-template-columns:1fr}.gt-gal .gt-gal__big,.gt-gal blockquote{grid-column:auto}}

/* ---- designer gates and one-offs: an even grid ---- */
.gt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(28px,5vh,50px)}
.gt-grid figure{margin:0;min-width:0}
.gt-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;cursor:zoom-in}
.gt-grid figcaption{margin-top:10px;color:#9fb6c6;font:700 10.5px/1.5 Montserrat,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.gt-grid figcaption b{display:block;margin-bottom:3px;font:800 13px/1.35 Montserrat,sans-serif;letter-spacing:.06em;color:#fff}
.gt-grid--sq img{aspect-ratio:1/1}
@media (max-width:900px){.gt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gt-grid{grid-template-columns:1fr}}

/* ---- quotes ---- */
.gt-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:60ch}
.gt-say p{margin:0;color:#fff;font-weight:600;font-size:clamp(16px,1.4vw,19px);line-height:1.4;letter-spacing:-.01em}
.gt-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}
.pp-band--black .gt-say,.gt-frame .gt-say{background:var(--pp-ink)}
.gt-says{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);margin-top:clamp(30px,5vh,50px)}
.gt-says .gt-say{margin:0;max-width:none}
@media (max-width:760px){.gt-says{grid-template-columns:1fr}}

/* ---- custom: the four steps ---- */
.gt-steps-wrap{margin-top:clamp(44px,7vh,76px)}
.gt-steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.gt-steps li{background:var(--pp-ink-2);padding:clamp(20px,2.4vw,32px);border-top:3px solid var(--pp-teal);min-width:0}
.gt-steps>li>b{display:block;font:900 clamp(34px,3.4vw,48px)/.9 Montserrat,sans-serif;letter-spacing:-.04em;color:var(--pp-teal)}
.gt-steps h4{margin:14px 0 8px;font:900 clamp(16px,1.5vw,19px)/1.15 Montserrat,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.gt-steps p{margin:0;color:#adc2d0;font-weight:300;font-size:14.5px;line-height:1.6}
@media (max-width:1000px){.gt-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gt-steps{grid-template-columns:1fr}}

/* ---- sizes ---- */
.gt-size__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.gt-size .pp-lede{max-width:62ch}
.gt-size__how{margin-top:clamp(34px,5vh,50px)}
.gt-size__side{display:grid;gap:clamp(16px,2vw,24px);position:sticky;top:90px}
.gt-size__pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.gt-size__pic figcaption{margin-top:10px}
@media (max-width:960px){.gt-size__grid{grid-template-columns:minmax(0,1fr)}.gt-size__side{position:static;max-width:620px}}
.gt-size__grid>*,.gt-size__side>*,.gt-frame__grid>*{min-width:0}

/* ---- the drawings ---- */
.gt-draw{margin:0;background:var(--pp-ink-2);border-radius:8px;padding:clamp(14px,2vw,24px)}
.gt-draw .gt-svg{display:block;width:100%;height:auto}
.gt-draw figcaption{margin-top:12px;color:var(--pp-mute);font-size:13px;line-height:1.55;font-weight:300}
.gt-draw figcaption .pp-nm{color:var(--pp-mute)}
.gt-draw figcaption .pp-nm b{color:var(--pp-teal)}
.gt-swipe{display:none;margin:0 0 10px;color:var(--pp-teal);font:700 11px/1.4 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:600px){
  .gt-draw__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px;padding:0 6px}
  .gt-draw--frame .gt-svg{width:620px;max-width:none}
  .gt-draw--size .gt-svg{width:470px;max-width:none}
  .gt-swipe{display:block}}

/* ---- colours ---- */
.gt-colrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(26px,4vh,40px)}
.gt-colrow figure{margin:0;min-width:0}
.gt-colrow img{display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:6px;cursor:zoom-in}
.gt-colrow figcaption{margin-top:10px;font:800 12.5px/1.3 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.gt-colrow figcaption span{display:block;margin-top:4px;font-weight:600;font-size:10.5px;color:var(--pp-mute);letter-spacing:.1em}
@media (max-width:820px){.gt-colrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gt-rules2{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:clamp(34px,5vh,54px)}
.gt-rules2>div{background:var(--pp-ink-2);padding:clamp(22px,2.6vw,34px);border-top:3px solid var(--pp-teal)}
.gt-rules2 p{margin:14px 0 0;color:#c0d2de;font-weight:300;font-size:15.5px;line-height:1.62}
@media (max-width:760px){.gt-rules2{grid-template-columns:1fr}}

/* ---- the frame ---- */
.gt-frame__lede{max-width:70ch}
.gt-frame__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,40px);margin-top:clamp(28px,5vh,48px)}
.gt-draw--frame{max-width:980px}
.gt-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;counter-reset:gt}
.gt-points li{background:var(--pp-ink);padding:clamp(18px,2vw,26px);border-top:3px solid var(--pp-teal);min-width:0;counter-increment:gt}
.gt-points h3{margin:0 0 8px;font:900 clamp(15px,1.4vw,18px)/1.15 Montserrat,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.gt-points h3::before{content:counter(gt,decimal-leading-zero);display:block;margin-bottom:8px;font:900 13px/1 Montserrat,sans-serif;letter-spacing:.1em;color:var(--pp-teal)}
.gt-points p{margin:0;color:#adc2d0;font-weight:300;font-size:14.5px;line-height:1.58}
@media (max-width:1000px){.gt-frame__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.gt-points{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gt-points{grid-template-columns:1fr}}
.gt-badge{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,60px);align-items:center;margin-top:clamp(44px,7vh,76px)}
.gt-badge__pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:6px}
.gt-badge__pic figcaption{margin-top:10px}
.gt-badge .pp-lede{margin-top:18px}
@media (max-width:820px){.gt-badge{grid-template-columns:1fr}.gt-badge__pic{max-width:420px}}

/* ---- soft close: the film fills its half ---- */
.gt-soft .pk-split__pic{background:var(--pp-black)}
.gt-soft .pk-film{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.gt-soft .pk-film__pic{aspect-ratio:auto;height:100%}
.gt-soft .pk-film__pic img{object-position:50% 40%}
@media (max-width:900px){.gt-soft .pk-film{position:relative;inset:auto;height:auto}.gt-soft .pk-film__pic{aspect-ratio:1/1;height:auto}}

/* ---- hinges and latches ---- */
.gt-hw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:clamp(28px,5vh,48px)}
.gt-hw__card{background:var(--pp-ink-2);padding:clamp(20px,2.4vw,32px);border-top:3px solid var(--pp-teal);min-width:0}
.gt-hw__card--up{border-top-color:var(--pp-orange)}
.gt-hw__card small{display:block;font:800 10.5px/1.3 Montserrat,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--pp-mute)}
.gt-hw__card--up small{color:var(--pp-orange)}
.gt-hw__card h3{margin:12px 0 10px;font:900 clamp(18px,1.7vw,22px)/1.1 Montserrat,sans-serif;letter-spacing:-.015em;text-transform:uppercase;color:#fff}
.gt-hw__card h3 em{font-style:normal;color:var(--pp-teal);font-size:.8em}
.gt-hw__card p{margin:0;color:#adc2d0;font-weight:300;font-size:14.5px;line-height:1.6}
.gt-hw__card a{color:var(--pp-teal);font-weight:700}
@media (max-width:1000px){.gt-hw{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gt-hw{grid-template-columns:1fr}}

/* ---- the rules ---- */
.gt-rules__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:clamp(26px,4vw,60px);align-items:start}
.gt-rules__pic{position:sticky;top:90px}
.gt-rules__pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.gt-rules__pic figcaption{margin-top:10px}
.gt-table tbody th{width:40%}
.gt-table td:nth-child(2)::before{content:"A PoolPerf\00AE  gate"}
.gt-table td{color:#c8dbe8;font-weight:300}
.pk-src a{color:var(--pp-teal)}
@media (max-width:960px){.gt-rules__grid{grid-template-columns:1fr}.gt-rules__pic{position:static;max-width:420px}}

/* ---- replacing a glass gate (a small photo: the owner's own, 722 px wide, so it is never blown up) ---- */
.gt-glass__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(26px,4vw,60px);align-items:center}
.gt-glass__pic{max-width:440px;justify-self:end;width:100%}
.gt-glass__pic img{display:block;width:100%;height:auto;border-radius:6px}
.gt-glass .pp-lede{max-width:60ch}
@media (max-width:820px){.gt-glass__grid{grid-template-columns:1fr}.gt-glass__pic{justify-self:start;max-width:360px}}

/* ---- reviews and proof ---- */
.gt-revs{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,5vh,48px)}
@media (max-width:820px){.gt-revs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gt-revs{grid-template-columns:1fr}}
.gt-proof__h{margin-top:clamp(48px,8vh,84px)}
.gt-proof{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.gt-proof li{background:var(--pp-ink-2);padding:clamp(18px,2.2vw,28px);border-left:3px solid var(--pp-teal);min-width:0}
.gt-proof>li>b{display:block;font:900 clamp(16px,1.5vw,20px)/1.15 Montserrat,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.gt-proof>li>span{display:block;margin-top:8px;color:#adc2d0;font-weight:300;font-size:14.5px;line-height:1.58}
@media (max-width:900px){.gt-proof{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gt-proof{grid-template-columns:1fr}}
.gt-made{display:flex;align-items:center;gap:clamp(18px,3vw,34px);margin-top:clamp(30px,5vh,48px)}
.gt-made__badge{width:clamp(96px,11vw,150px);height:auto;flex:none}
.gt-made p{margin:0;font:900 clamp(22px,3vw,40px)/1.05 Montserrat,sans-serif;letter-spacing:-.03em;text-transform:uppercase;color:#fff}
.gt-made p em{display:block;font-style:normal;color:var(--pp-teal)}

/* ---- the brochure ---- */
.gt-bro{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:center}
.gt-bro__cover{margin:0;max-width:420px}
.gt-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}
.gt-bro__how{font-size:15px}
@media (max-width:820px){.gt-bro{grid-template-columns:1fr}.gt-bro__cover{max-width:300px}}

/* ---- where to from here ---- */
.gt-where .pk-split__pic img{object-position:50% 60%}

/* ---- the photo viewer (steps through a [data-gal] group). Copied from /designs-in-action and renamed. ---- */
.gt-lb .pp-lb__inner{width:min(1500px,100%);height:100%;justify-content:center;position:relative}
.gt-lb figure{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;min-height:0}
.gt-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}
.gt-lb figcaption{margin:12px auto 0;max-width:80ch;text-align:center;color:#c8dbe8;font-weight:400;font-size:14px;line-height:1.5}
.gt-lb figcaption .gt-by{display:inline;margin-left:6px;color:var(--pp-mute)}
.gt-lb figcaption b{color:#fff}
.gt-lb__n{margin:0;color:var(--pp-mute);font:700 11px/1 Montserrat,sans-serif;letter-spacing:.16em}
.gt-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,.55);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;appearance:none;transition:border-color .2s,background .2s}
.gt-lb__nav[hidden]{display:none}
.gt-lb__nav:hover{border-color:#fff;background:rgba(0,185,198,.25)}
.gt-lb__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.gt-lb__prev{left:4px}.gt-lb__next{right:4px}
@media (max-width:700px){.gt-lb__nav{position:fixed;top:auto;bottom:max(22px,env(safe-area-inset-bottom));transform:none;width:50px;height:50px}.gt-lb__prev{left:calc(50% - 62px)}.gt-lb__next{right:calc(50% - 62px)}
  .gt-lb figcaption{margin-bottom:70px}}
.gt-lb .pp-lb__title .pp-nm{color:#fff}.gt-lb .pp-lb__title .pp-nm b{color:var(--pp-teal)}