/* ==========================================================================
   Pool Perf® brand site — v4
   Black theme, per Jason: "I like the black background as it has a very
   professional feel, like the LookPastIt concept."

   THREE HOUSE RULES, all of which have already cost a build:

   1. Photographs and video are NEVER dimmed on arrival. The picture lands at
      100% and holds. The message is revealed by scroll (see .pp-rev).
   2. NEVER set overflow-x:hidden on html/body. It creates a scroll container
      and silently breaks every position:sticky descendant, including the pins.
   3. Shared component CSS is copied into every stylesheet that uses it.

   Brand colours are taken from the supplied logo suite, not guessed:
   navy #053054, teal #00b9c6, plate #0f3154.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------
     v11 — DARK NAVY, not black.
     Every value below is sampled from the real "Get That Pool Perf
     Feeling" artwork (Logos/PoolPerf/Style #1), not invented:
       #00263e  the deep navy ground
       #0b3555  the mid navy the artwork sits on
       #00b9b9  the teal
       #f37032  the orange
     To warm or cool the whole page, change --pp-black only.
     ------------------------------------------------------------------ */
  --pp-black:#001a2b;        /* the page ground - was #000, then #00263e */
  --pp-ink:#04263c;          /* bands, one step lifted */
  --pp-ink-2:#072b45;        /* cards */
  --pp-navy:#00121f;         /* top bar and footer - the deep bookends */
  --pp-plate:#0f3154;
  --pp-teal:#00b9c6;         /* the real brand teal, from the logo SVG */
  --pp-teal-lift:#2ad7e3;
  --pp-sun:#ffc531;
  --pp-orange:#f37032;       /* from Get That Pool Perf Feeling */
  --pp-mute:#8a9bab;
  --pp-line:rgba(255,255,255,.11);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pp{margin:0;background:var(--pp-black);color:#fff;overflow-x:clip;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.pp img,.pp video,.pp svg{display:block;max-width:100%}
.pp-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
:focus-visible{outline:2px solid var(--pp-teal);outline-offset:3px}

/* ---------- shared type ---------- */
.pp-eyebrow{font:800 11px/1 Montserrat,sans-serif;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pp-teal);margin:0 0 22px}
.pp-h1,.pp-h2{font-weight:900;letter-spacing:-.034em;line-height:.94;margin:0;text-transform:uppercase}
.pp-h1{font-size:clamp(31px,5.9vw,88px)}
.pp-h2{font-size:clamp(26px,4.4vw,62px)}
.pp-h1 em,.pp-h2 em{font-style:normal;color:var(--pp-teal)}
.pp-h1 .thin,.pp-h2 .thin{font-weight:300}
.pp-lede{margin:26px 0 0;max-width:56ch;color:#c0d2de;font-weight:300;
  font-size:clamp(15px,1.45vw,19px);line-height:1.68}
.pp-lede strong{color:#fff;font-weight:600}
.pp-cta{margin:36px 0 0;display:flex;gap:13px;flex-wrap:wrap}
.pp-btn{display:inline-block;text-decoration:none;border-radius:6px;padding:16px 26px;
  font:800 13px/1 Montserrat,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .25s,background .25s,border-color .25s,color .25s}
.pp-btn--solid{background:var(--pp-teal);color:#04222c}
.pp-btn--solid:hover{background:var(--pp-teal-lift);transform:translateY(-2px)}
.pp-btn--ghost{border:1px solid rgba(255,255,255,.42);color:#fff}
.pp-btn--ghost:hover{border-color:#fff;transform:translateY(-2px)}

/* ---------- reveal on enter ---------- */
.pp-r{opacity:0;transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.pp-r.is-in{opacity:1;transform:none}
.pp-r.d1{transition-delay:.09s}.pp-r.d2{transition-delay:.18s}
.pp-r.d3{transition-delay:.27s}
/* ==========================================================================
   THE ANIMATED LOGO
   The mark is 579 perforation holes. So the logo perforates itself: the holes
   punch in on a diagonal sweep, then the wordmark arrives. Nothing is faked —
   every circle is a real path from the supplied logo suite SVG.
   ========================================================================== */
.pp-logo{width:100%;height:auto;overflow:visible}
.pp-logo__plate{fill:var(--pp-plate)}
.pp-logo__dots circle{fill:var(--pp-teal);transform-box:fill-box;transform-origin:center;
  transform:scale(0);opacity:0}
.pp-logo.is-on .pp-logo__dots circle{
  animation:pp-punch .5s cubic-bezier(.2,1.4,.4,1) forwards;
  animation-delay:calc(var(--i) * 1.05ms + 120ms)}
@keyframes pp-punch{to{transform:scale(1);opacity:1}}
.pp-logo__word--a path{fill:var(--pp-teal)}
.pp-logo__word--b path{fill:#fff}        /* "Perf" is navy in the supplied file; navy on black is invisible */
.pp-logo__word{opacity:0;transform:translateX(-14px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) .68s,transform .7s cubic-bezier(.16,1,.3,1) .68s}
.pp-logo.is-on .pp-logo__word{opacity:1;transform:none}
.pp-logo__word--b{transition-delay:.8s}

/* the header lockup, sitting over the film */
.pp-mark{position:absolute;z-index:5;top:clamp(14px,2.4vw,28px);left:clamp(14px,2.4vw,28px);
  width:clamp(168px,18vw,246px);
  /* a SOLID panel, not a wash — the white half of the wordmark has to survive
     landing on a white house, and the picture behind it is untouched */
  background:var(--pp-black);border-radius:8px;padding:14px 18px;
  box-shadow:0 6px 26px rgba(0,0,0,.4)}

/* ==========================================================================
   THE SCROLL-REVEAL  (Jason's idea)
   The picture lands at 100% brightness and is held there for the first quarter
   of the pin. Only then does the veil rise and the message arrive.
   Only composited properties are driven: opacity, transform.
   ========================================================================== */
.pp-rev{position:relative;background:#000;height:150svh}
.pp-rev--short{height:130svh}
.pp-rev__stick{position:sticky;top:0;height:100svh;overflow:hidden}
.pp-rev__media{position:absolute;inset:0;z-index:1}
.pp-rev__media img,.pp-rev__media video{width:100%;height:100%;object-fit:cover}
.pp-rev__media video{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.pp-rev__media video.is-playing{opacity:1}
.pp-rev__veil{position:absolute;inset:0;z-index:2;background:var(--pp-black);
  opacity:0;pointer-events:none;will-change:opacity}
.pp-rev__copy{position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:clamp(26px,5vw,72px) clamp(20px,4vw,48px) clamp(30px,6vw,78px);
  max-width:1200px;margin:0 auto}
.pp-rev--centre .pp-rev__copy{top:0;display:flex;flex-direction:column;justify-content:center}
.pp-rev__copy>[data-in]{opacity:0;will-change:opacity,transform}
.pp-rev__copy .pp-h1,.pp-rev__copy .pp-h2{text-shadow:0 2px 40px rgba(0,0,0,.5)}
.pp-rev__copy .pp-lede{color:#dceaf3;max-width:52ch;text-shadow:0 1px 24px rgba(0,0,0,.55)}
.pp-cue{position:fixed;z-index:50;bottom:clamp(16px,3vw,30px);left:50%;
  transform:translateX(-50%);margin:0;pointer-events:none;
  width:34px;height:34px;opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.pp-cue.is-on{opacity:1;visibility:visible}
.pp-cue i{display:block;width:34px;height:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v17M5.5 13.5 12 20.5l6.5-7' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:34px 34px;
  animation:pp-arrow 2.1s cubic-bezier(.5,0,.5,1) infinite}

/* ---------- the fact band ---------- */
.pp-facts{background:var(--pp-ink);border-top:1px solid var(--pp-line);
  border-bottom:1px solid var(--pp-line)}
.pp-facts ul{list-style:none;margin:0 auto;max-width:1200px;
  padding:clamp(20px,2.8vw,30px) clamp(20px,4vw,48px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.pp-facts li{font:800 10.5px/1.5 Montserrat,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#93aabb}
.pp-facts b{display:block;color:var(--pp-teal);font-size:clamp(20px,2.5vw,32px);
  letter-spacing:-.02em;margin-bottom:6px;font-weight:900}

/* ---------- the film lightbox ---------- */
.pp-lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);
  display:grid;place-items:center;padding:clamp(16px,4vw,48px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.pp-lb[open],.pp-lb.is-open{opacity:1;visibility:visible}
.pp-lb__inner{width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.pp-lb video{width:100%;max-height:76svh;background:#000;border-radius:6px}
.pp-lb__bar{display:flex;justify-content:space-between;align-items:center;gap:20px}
.pp-lb__title{margin:0;font:800 12px/1.4 Montserrat,sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pp-teal)}
.pp-lb__close{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  border-radius:999px;padding:10px 18px;cursor:pointer;font:800 11px/1 Montserrat,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;font-family:inherit}
.pp-lb__close:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- bands ---------- */
.pp-band{background:var(--pp-ink);padding:clamp(56px,9vh,116px) 0}
.pp-band--black{background:var(--pp-black)}

/* ---------- reviews ---------- */
.pp-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(30px,5vh,54px)}
.pp-rev-card{margin:0;background:var(--pp-ink-2);padding:clamp(24px,2.6vw,34px);
  display:flex;flex-direction:column;gap:16px}
.pp-stars{color:var(--pp-teal);font-size:14px;letter-spacing:.24em;line-height:1}
.pp-rev-card p{margin:0;font-weight:600;letter-spacing:-.012em;line-height:1.34;
  font-size:clamp(16px,1.5vw,20px);color:#eaf4f8}
.pp-rev-card em{font-style:normal;color:var(--pp-teal)}
.pp-rev-card cite{margin-top:auto;font-style:normal;color:var(--pp-mute);
  font:700 11px/1.5 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.pp-revs-foot{margin:30px 0 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  color:var(--pp-mute);font-size:13.5px;font-weight:300}
.pp-revs-foot a{color:var(--pp-teal);font-weight:600}

/* ---------- the solution grid ---------- */
.pp-sol{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(30px,5vh,54px)}
.pp-sol div{background:var(--pp-ink-2);padding:clamp(24px,2.6vw,34px)}
.pp-sol h3{margin:0 0 12px;font:900 clamp(17px,1.7vw,23px)/1.15 Montserrat,sans-serif;
  letter-spacing:-.02em;text-transform:uppercase}
.pp-sol h3 em{font-style:normal;color:var(--pp-teal)}
.pp-sol p{margin:0;color:#adc2d0;font-weight:300;font-size:14.5px;line-height:1.66}
.pp-sol a{color:var(--pp-teal)}

.pp-closer{margin-top:clamp(34px,5vh,58px);border-left:3px solid var(--pp-teal);
  padding:4px 0 4px 24px}
.pp-closer p{margin:0;font-weight:800;letter-spacing:-.014em;line-height:1.26;
  font-size:clamp(19px,2.3vw,31px)}
.pp-closer span{color:var(--pp-teal)}
.pp-closer small{display:block;margin-top:18px;color:#c8dbe8;font-weight:300;
  font-size:clamp(15px,1.25vw,17px);line-height:1.75;letter-spacing:.004em;max-width:74ch}


/* ---------- foot ---------- */
.pp-foot{background:var(--pp-black);border-top:1px solid var(--pp-line);
  padding:clamp(34px,5vh,58px) 0;color:var(--pp-mute);font-size:13px;font-weight:300}
.pp-foot .pp-wrap{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.pp-foot p{margin:0;max-width:62ch}

@media(max-width:900px){
  .pp-rev{height:135svh}
  .pp-rev--short{height:120svh}
  .pp-facts ul{grid-template-columns:repeat(2,1fr);gap:22px}
  .pp-revs,.pp-sol{grid-template-columns:1fr}
  .pp-mark{width:150px}
}

/* Reduced motion: end state, rendered directly. The message is never lost and
   nobody is made to scroll three screens of static picture. */
@media(prefers-reduced-motion:reduce){
  .pp *{animation:none!important;transition-duration:.01ms!important}
  .pp-r{opacity:1;transform:none}
  .pp-rev{height:auto!important}
  .pp-rev__stick{position:static;height:100svh}
  .pp-rev__veil{opacity:.55!important}
  .pp-rev__copy>*{opacity:1!important;transform:none!important}
  .pp-cue{display:none}
  .pp-rev__media video{display:none}
  .pp-logo__dots circle{transform:none;opacity:1}
  .pp-logo__word{opacity:1;transform:none}
}

/* ==========================================================================
   v5 ADDITIONS
   Jason: every photograph and every film is now its own hero shot, split up,
   each carrying one message. The three-across strip and the three-across
   film list are gone.
   ========================================================================== */

/* ---------- a hero that plays a film ---------- */
.pp-rev--film .pp-rev__copy{padding-bottom:clamp(30px,6vw,78px)}
.pp-play{position:absolute;z-index:4;top:44%;left:50%;transform:translate(-50%,-50%);
  width:clamp(74px,8vw,118px);aspect-ratio:1;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.34);border:1.5px solid rgba(255,255,255,.9);
  display:grid;place-items:center;padding:0;
  transition:background .3s,transform .3s,border-color .3s}
.pp-play::after{content:"";width:0;height:0;margin-left:6px;
  border-left:clamp(18px,2vw,26px) solid #fff;
  border-top:clamp(11px,1.2vw,16px) solid transparent;
  border-bottom:clamp(11px,1.2vw,16px) solid transparent;transition:border-left-color .3s}
.pp-play:hover,.pp-play:focus-visible{background:var(--pp-teal);border-color:var(--pp-teal);
  transform:translate(-50%,-50%) scale(1.07)}
.pp-play:hover::after,.pp-play:focus-visible::after{border-left-color:#04222c}
.pp-play span{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font:800 10px/1 Montserrat,sans-serif;letter-spacing:.26em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.9)}

/* ---------- the logo showcase ---------- */
.pp-show{background:var(--pp-black);min-height:86svh;display:grid;place-items:center;
  padding:clamp(60px,12vh,140px) clamp(20px,4vw,48px);text-align:center}
.pp-show__in{width:min(1020px,100%)}
.pp-show .pp-logo{width:100%;margin:0 auto}
.pp-show__line{margin:clamp(30px,5vh,52px) 0 0;font-weight:300;color:#c0d2de;
  font-size:clamp(15px,1.6vw,21px);line-height:1.6}
.pp-show__line b{display:block;color:#fff;font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1;margin-bottom:16px;font-size:clamp(24px,3.4vw,46px)}
.pp-show__line b em{font-style:normal;color:var(--pp-teal)}

/* ---------- the two-card call to action ---------- */
.pp-ask{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:clamp(30px,5vh,54px)}
.pp-ask__card{background:var(--pp-ink-2);padding:clamp(26px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  border-left:3px solid var(--pp-teal)}
.pp-ask__card--guide{background:var(--pp-navy);border-left-color:var(--pp-teal-lift);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.6vw,36px);align-items:start}
.pp-ask h3{margin:0 0 12px;font:900 clamp(19px,2vw,27px)/1.14 Montserrat,sans-serif;
  letter-spacing:-.022em}
.pp-ask p{margin:0;color:#adc2d0;font-weight:300;font-size:14.5px;line-height:1.66}
.pp-ask__card--guide p{color:#bdd4e2}
.pp-ask__cover{width:clamp(124px,12vw,182px);height:auto;align-self:start;border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.pp-ask ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pp-ask li{position:relative;padding-left:26px;color:#cfe2ee;font-weight:300;
  font-size:14.5px;line-height:1.5}
.pp-ask li::before{content:"";position:absolute;left:2px;top:4px;width:11px;height:6px;
  border-left:2px solid var(--pp-teal);border-bottom:2px solid var(--pp-teal);
  transform:rotate(-45deg)}
.pp-ask .pp-btn{align-self:start;margin-top:6px}

/* ---------- the footer, matching the rest of the network ---------- */
.pp-foot{background:var(--pp-navy);border-top:0;
  padding:clamp(44px,7vh,78px) 0 0;color:#a9c3d4;font-size:14px;font-weight:300}
.pp-foot .pp-wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(26px,3.4vw,52px);align-items:start;justify-content:initial}
.pp-foot__brand .pp-logo{width:190px;margin-bottom:22px}
.pp-foot h4{margin:0 0 18px;font:800 11px/1 Montserrat,sans-serif;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pp-teal)}
.pp-foot p{margin:0;line-height:1.65}
.pp-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pp-foot a{color:#d6e6f1;text-decoration:none}
.pp-foot a:hover{color:#fff;text-decoration:underline}
.pp-foot__more{display:inline-block;margin-top:16px;color:var(--pp-teal)!important;font-weight:600}
.pp-foot__contact li{display:flex;gap:11px;align-items:flex-start}
.pp-foot__contact svg{width:15px;height:15px;flex:none;margin-top:3px;fill:var(--pp-teal)}
.pp-foot__social{display:flex;gap:11px;margin-top:22px}
.pp-foot__social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center}
.pp-foot__social a:hover{background:var(--pp-teal)}
.pp-foot__social svg{width:17px;height:17px;fill:#fff}
.pp-foot__coat{margin-top:28px}
.pp-foot__coat span{display:block;font:800 10px/1 Montserrat,sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:#7f9cb2;margin-bottom:12px}
.pp-foot__coat b{display:inline-block;background:#fff;color:var(--pp-navy);border-radius:4px;
  padding:9px 14px;margin:0 8px 8px 0;font:800 11px/1 Montserrat,sans-serif;letter-spacing:.1em}
.pp-legal{margin:clamp(34px,5vh,58px) 0 0;border-top:1px solid rgba(255,255,255,.13);
  padding:22px clamp(20px,4vw,48px);text-align:center;font-size:13px;color:#8fadc2;
  max-width:none}
.pp-foot .pp-legal{margin-bottom:0}
.pp-legal a{color:#c8dced}

@media(max-width:1000px){
  .pp-foot .pp-wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .pp-ask{grid-template-columns:1fr}
  .pp-ask__card--guide{grid-template-columns:1fr}
  .pp-ask__cover{width:150px}
  .pp-foot .pp-wrap{grid-template-columns:1fr}
  .pp-play{top:40%}
}
@media(prefers-reduced-motion:reduce){
  .pp-show .pp-logo circle{transform:none;opacity:1}
}

/* the small lockups are rastered from the same SVG — the 579-circle animated
   version is inlined once, where it is big enough to be worth watching */
.pp-lockup{width:100%;height:auto}
.pp-foot__lockup{width:190px;margin-bottom:22px}

/* ==========================================================================
   v6 — THE UTILITY BAR
   Matches the strip across the rest of the network, minus the DIY / installed
   split (this is the brand site, so the SEO payload replaces it).
   Static, never sticky: a fixed bar would sit over every pinned hero.
   ========================================================================== */
.pp-top{background:var(--pp-navy);font-size:clamp(11.5px,0.92vw,13.5px);
  position:relative;z-index:20}
.pp-top .pp-wrap{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,28px);flex-wrap:nowrap;white-space:nowrap;
  padding-top:10px;padding-bottom:10px}
.pp-top p{margin:0;display:flex;align-items:center;gap:9px;color:#d6e6f1}
.pp-top__flag{width:22px;height:15px;flex:none;border-radius:1px}
.pp-top ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:clamp(12px,1.8vw,30px);flex-wrap:nowrap}
.pp-top li{display:flex;align-items:center;gap:7px;color:#d6e6f1}
.pp-top a{color:#d6e6f1;text-decoration:none}
.pp-top a:hover{color:#fff;text-decoration:underline}
.pp-top svg:not(.pp-top__flag){width:14px;height:14px;fill:var(--pp-teal);flex:none}
.pp-top__seo{color:#fff;font-weight:600}
.pp-top__seo b{color:var(--pp-teal);font-weight:600}

/* ==========================================================================
   v6 — THE BEAT
   Jason: a black space between one hero and the next, so the big images and
   films never butt straight up against each other. One short line only.
   ========================================================================== */
.pp-beat{background:var(--pp-black);padding:clamp(52px,11vh,124px) 0;text-align:center}
.pp-beat p{margin:0 auto;max-width:30ch;font-weight:300;color:#9fb6c6;
  font-size:clamp(17px,2.1vw,29px);line-height:1.34;letter-spacing:-.012em}
.pp-beat strong{color:#fff;font-weight:700}
.pp-beat em{font-style:normal;color:var(--pp-teal);font-weight:700}
.pp-beat cite{display:block;margin-top:18px;font-style:normal;color:var(--pp-mute);
  font:700 11px/1.5 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.pp-beat::before{content:"";display:block;width:38px;height:2px;background:var(--pp-teal);
  margin:0 auto clamp(24px,3.4vh,38px)}

/* the FACT label on the glass closer */
.pp-closer__fact{margin:0 0 10px!important;font:900 11px/1 Montserrat,sans-serif!important;
  letter-spacing:.3em;text-transform:uppercase;color:var(--pp-sun)}

/* The SEO line drops out before the bar can push the page sideways.
   NOTE the `li.` — `.pp-top li{display:flex}` outranks a bare `.pp-top__seo`,
   so the plain class did nothing and the bar overflowed at 600-820px. */
@media(max-width:860px){
  .pp-top li.pp-top__seo{display:none}
}
@media(max-width:520px){
  .pp-top .pp-wrap{flex-wrap:wrap;justify-content:center;text-align:center;row-gap:7px}
  .pp-top ul{flex-wrap:wrap;justify-content:center}
}

/* the lightbox tells you when a film is missing, instead of showing black */
.pp-lb__msg{margin:0;padding:14px 18px;border-radius:6px;background:rgba(255,197,49,.1);
  border-left:2px solid var(--pp-sun);color:#f0e2c0;font-size:14px;line-height:1.6;font-weight:300}
.pp-lb__msg code{color:#fff;font-size:13px}

/* ==========================================================================
   v8 — FIXES AND NAVIGATION
   ========================================================================== */

/* ---------- the menu button and full-screen navigation ----------
   Cinematic pages still have to be navigable. One small solid button, and a
   full-screen overlay behind it — nothing else is added to the page chrome. */
.pp-menu-btn{position:fixed;z-index:60;top:clamp(46px,5vw,64px);right:clamp(14px,2.4vw,28px);
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--pp-black);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:11px 17px;font:800 10.5px/1 Montserrat,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;font-family:inherit;
  box-shadow:0 6px 26px rgba(0,0,0,.45);transition:background .3s,border-color .3s,color .3s}
.pp-menu-btn:hover,.pp-menu-btn:focus-visible{background:var(--pp-teal);color:#04222c;
  border-color:var(--pp-teal)}
.pp-menu-btn i{display:block;width:15px;height:9px;position:relative;flex:none}
.pp-menu-btn i::before,.pp-menu-btn i::after{content:"";position:absolute;left:0;right:0;
  height:2px;background:currentColor;transition:transform .3s}
.pp-menu-btn i::before{top:0}.pp-menu-btn i::after{bottom:0}
/* the middle bar - a real element, not a pseudo-element (::before/::after
   already carry the top and bottom bars). Positioned with an explicit
   `top`, matching how ::before/::after are anchored (top:0 / bottom:0),
   not top:50%+translateY(-50%) - the two methods can round to different
   sub-pixel offsets and render as visibly different bar thicknesses even
   with identical `height` values. Bar thickness is a whole pixel (2px),
   not 1.5px, for the same reason - fractional heights can rasterise a
   real element and a pseudo-element at visibly different weights even
   when both report the same computed value. top = (box height - bar
   height) / 2: base (9 - 2) / 2 = 3.5px. The two other breakpoints below
   set their own `top` to match their own box/bar sizes. Fades out on
   open rather than rotating - a middle bar has nowhere sensible to
   rotate to. */
.pp-menu-btn i .mid{position:absolute;left:0;right:0;top:3.5px;height:2px;
  background:currentColor;transition:opacity .3s}
.pp-menu-btn[aria-expanded="true"] i .mid{opacity:0}
.pp-menu-btn[aria-expanded="true"] i::before{transform:translateY(3.5px) rotate(45deg)}
.pp-menu-btn[aria-expanded="true"] i::after{transform:translateY(-3.5px) rotate(-45deg)}

.pp-nav{position:fixed;inset:0;z-index:55;background:var(--pp-black);
  padding:clamp(76px,10vh,110px) clamp(20px,4vw,48px) clamp(30px,6vh,60px);
  overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.pp-nav.is-open{opacity:1;visibility:visible}
.pp-nav__in{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.pp-nav h3{margin:0 0 20px;font:800 10.5px/1 Montserrat,sans-serif;letter-spacing:.26em;
  text-transform:uppercase;color:var(--pp-teal)}
.pp-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.4vh,16px)}
.pp-nav a{color:#fff;text-decoration:none;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(19px,2.2vw,30px);line-height:1.1;display:inline-block;
  transition:color .25s,transform .25s}
.pp-nav a:hover,.pp-nav a:focus-visible{color:var(--pp-teal);transform:translateX(6px)}
.pp-nav small{display:block;margin-top:5px;color:var(--pp-mute);font-weight:300;
  font-size:13px;letter-spacing:0}

/* ---------- the "learn more" link that sits under a hero message ---------- */
.pp-more{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  color:var(--pp-teal);text-decoration:none;font:800 11.5px/1 Montserrat,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(0,185,198,.45);padding-bottom:7px;
  transition:color .25s,border-color .25s,gap .25s}
.pp-more:hover,.pp-more:focus-visible{color:#fff;border-color:#fff;gap:14px}
.pp-rev__copy .pp-more{text-shadow:0 1px 18px rgba(0,0,0,.7)}

@media(max-width:900px){
  .pp-nav__in{grid-template-columns:1fr;gap:34px}
  .pp-nav a{font-size:20px}
}

/* ---------- small phones: the hero copy must never reach the logo ---------- */
@media(max-width:430px){
  .pp-mark{width:126px;padding:10px 12px;top:12px;left:12px}
  /* top-right on phones: bottom-right collides with the hero buttons */
  .pp-menu-btn{top:64px;right:12px;bottom:auto;padding:10px 14px;font-size:10px}
  .pp-rev__copy{padding:20px 20px 24px}
  .pp-rev__copy .pp-eyebrow{font-size:9.5px;letter-spacing:.16em;margin-bottom:14px}
  .pp-h1{font-size:clamp(25px,7.6vw,34px)}
  .pp-h2{font-size:clamp(23px,7vw,32px)}
  .pp-rev__copy .pp-lede{font-size:14px;line-height:1.62;margin-top:18px}
  .pp-rev__copy .pp-cta{margin-top:24px;gap:9px}
  .pp-btn{padding:13px 18px;font-size:11.5px}
  .pp-play{width:64px}
}
@media(max-width:360px){
  .pp-rev__copy .pp-lede{display:none}   /* the headline and the buttons win */
}
@media(max-width:520px){ .pp-nb{display:none} }

/* a vertical film should not be letterboxed into a 16:9 box on a phone */
@media(max-width:820px){
  .pp-lb video{max-height:70svh}
}

/* the copy column is a flex column, so an inline-flex link stretches to full
   width and drags its underline with it */
.pp-rev__copy .pp-more{align-self:flex-start}
.pp-rev__copy{align-items:flex-start}

/* ==========================================================================
   v10
   ========================================================================== */

/* ---------- the hero sound toggle ----------
   The hero must start muted or the browser will not autoplay it at all.
   This turns it on, and it is a real button so it is keyboard reachable. */
.pp-sound{position:absolute;z-index:6;right:clamp(14px,2.4vw,28px);
  top:clamp(102px,12vh,132px);display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;background:var(--pp-black);color:#fff;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:11px 17px;
  font:800 10.5px/1 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  font-family:inherit;box-shadow:0 6px 26px rgba(0,0,0,.45);
  transition:background .3s,border-color .3s,color .3s}
.pp-sound:hover,.pp-sound:focus-visible{background:var(--pp-teal);color:#04222c;
  border-color:var(--pp-teal)}
.pp-sound svg{width:16px;height:16px;fill:currentColor;flex:none}
.pp-sound .on{display:none}
.pp-sound[aria-pressed="true"] .on{display:block}
.pp-sound[aria-pressed="true"] .off{display:none}

/* ---------- STOP. WATCH THIS FIRST. ---------- */
.pp-stop{background:var(--pp-black);padding:clamp(50px,9vh,110px) 0}
.pp-stop__in{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px);
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:center}
.pp-stop p.pp-stop__word{margin:0 0 10px;font:900 clamp(38px,7vw,104px)/0.9 Montserrat,sans-serif;
  letter-spacing:-.045em;color:var(--pp-sun);text-transform:uppercase}
.pp-stop h2{margin:0;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;
  line-height:.95;font-size:clamp(26px,4.2vw,58px)}
.pp-stop h2 em{font-style:normal;color:var(--pp-teal)}
.pp-stop p{margin:22px 0 0;color:#c0d2de;font-weight:300;max-width:44ch;
  font-size:clamp(15px,1.45vw,18px);line-height:1.68}
.pp-stop cite{display:block;margin-top:18px;font-style:normal;color:var(--pp-mute);
  font:700 11px/1.5 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.pp-stop__pic{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:6px;background:#000;cursor:pointer;border:0;padding:0;display:block}
.pp-stop__pic img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.pp-stop__pic:hover img{transform:scale(1)}
.pp-stop__pic .pp-play{position:absolute;top:50%;width:clamp(66px,7vw,96px)}
.pp-stop__rule{width:56px;height:3px;background:var(--pp-sun);margin:0 0 22px}

@media(max-width:900px){
  .pp-stop__in{grid-template-columns:1fr;gap:26px}
}
@media(max-width:430px){
  .pp-sound{top:112px;right:12px;padding:9px 13px;font-size:9.5px}
}

/* On a phone the sound control is the icon alone - the label is not worth the
   real estate on a small screen. */
@media(max-width:820px){
  .pp-sound{padding:0;width:42px;height:42px;border-radius:50%;justify-content:center;gap:0}
  .pp-sound span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pp-sound svg{width:18px;height:18px}
}


/* ==========================================================================
   v11 — Jason's review, 19 Aug 2026
   Everything in this block is an override of something above it, so the
   original rule is still readable and this file diffs cleanly.
   ========================================================================== */

/* --- 1. the logo over the film: no black plate ---------------------------
   The plate was there so the white half of the wordmark survived landing on
   a pale house. A drop shadow does the same job without a box. */
.pp-mark{background:none;border-radius:0;padding:0;box-shadow:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 6px 34px rgba(0,0,0,.45))}

/* --- 2. Menu and Sound: no pill, bigger Menu ---------------------------- */
.pp-menu-btn,.pp-sound{background:none;border:0;box-shadow:none;border-radius:0;
  padding:6px 2px;text-shadow:0 1px 10px rgba(0,0,0,.75),0 2px 26px rgba(0,0,0,.6)}
.pp-menu-btn{font-size:14px;letter-spacing:.16em;gap:12px}
.pp-menu-btn i{width:20px;height:12px}
.pp-menu-btn i::before,.pp-menu-btn i::after,.pp-menu-btn i .mid{height:2px}
.pp-menu-btn i .mid{top:5px}
.pp-menu-btn[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.pp-menu-btn[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}
.pp-menu-btn:hover,.pp-menu-btn:focus-visible,
.pp-sound:hover,.pp-sound:focus-visible{background:none;color:var(--pp-teal);border-color:transparent}
.pp-sound svg{filter:drop-shadow(0 1px 8px rgba(0,0,0,.8))}
@media(max-width:820px){
  .pp-sound{width:auto;height:auto;padding:6px;border-radius:0;background:none}
}
@media(max-width:430px){
  .pp-menu-btn{font-size:12.5px;padding:6px 2px}
  .pp-sound{padding:6px}
}

/* --- 3. the scroll cue's bounce animation - the cue itself (.pp-cue) is
   defined once near the top of the file, fixed to the viewport ------------ */
@keyframes pp-arrow{
  0%,100%{transform:translateY(-4px);opacity:.55}
  50%{transform:translateY(4px);opacity:1}}

/* --- 4. the utility bar: centred claim, contact hard right -------------- */
.pp-top .pp-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,2vw,28px)}
.pp-top__claim{grid-column:2;justify-self:center;display:flex;align-items:center;
  gap:10px;flex-wrap:nowrap;text-align:center}
.pp-top__sep{color:var(--pp-teal);opacity:.9;padding:0 9px;font-weight:700}
.pp-top ul{grid-column:3;justify-self:end}
@media(max-width:1080px){ .pp-top__claim .pp-top__seo{display:none} }
@media(max-width:640px){
  .pp-top .pp-wrap{grid-template-columns:1fr;row-gap:7px;justify-items:center}
  .pp-top__claim,.pp-top ul{grid-column:1;justify-self:center}
}

/* --- 5. navy: anything that hard-coded black ---------------------------- */
.pp-rev{background:var(--pp-black)}
.pp-rev__veil{background:#000c15}
.pp-lb{background:rgba(0,14,23,.95)}
.pp-lb video{background:#000c15}
.pp-stop__pic{background:var(--pp-ink-2)}
.pp-btn--solid{color:#00212e}
.pp-menu-btn:hover,.pp-menu-btn:focus-visible{color:var(--pp-teal)}

/* --- 6. the menu overlay: lighter type, more air ------------------------ */
.pp-nav{background:var(--pp-black);
  padding:clamp(96px,13vh,150px) clamp(28px,6vw,84px) clamp(48px,9vh,96px)}
.pp-nav__in{gap:clamp(38px,5vw,84px)}
.pp-nav h3{margin-bottom:28px;letter-spacing:.28em}
.pp-nav ul{gap:clamp(14px,2vh,22px)}
.pp-nav a{font-weight:400;letter-spacing:-.008em;font-size:clamp(20px,2.3vw,31px);
  line-height:1.16}
.pp-nav a:hover,.pp-nav a:focus-visible{font-weight:400}
.pp-nav small{margin-top:7px;font-size:13.5px}
@media(max-width:900px){
  .pp-nav{padding:clamp(88px,12vh,120px) clamp(22px,6vw,40px) 56px}
  .pp-nav a{font-size:21px}
}

/* --- 7. STOP removed: the rule carries the section now ------------------ */
.pp-stop__word{display:none}

/* --- 8. the wave, wherever a decorative horizontal rule used to be ------ */
.pp-beat::before{width:64px;height:20px;background:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 20'%3E%3Cpath d='M2 15.8 C9 15.2 15.5 10.4 20 3.4 C24 11.5 27.5 16.6 32 16.6 C36.5 16.6 40 11.5 44 3.4 C48.5 10.4 55 15.2 62 15.8' fill='none' stroke='%2300b9c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='miter' stroke-miterlimit='8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:64px 20px}
.pp-stop__rule{width:86px;height:27px;background:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 20'%3E%3Cpath d='M2 15.8 C9 15.2 15.5 10.4 20 3.4 C24 11.5 27.5 16.6 32 16.6 C36.5 16.6 40 11.5 44 3.4 C48.5 10.4 55 15.2 62 15.8' fill='none' stroke='%2300b9c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='miter' stroke-miterlimit='8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left center;background-size:86px 27px;
  margin:0 0 28px}

/* --- 9. the six solution icons: thin line, medium, always just moving --- */
.pp-sol div{position:relative}
.pp-ico{width:38px;height:38px;margin:0 0 18px;display:block;overflow:visible}
.pp-ico *{fill:none;stroke:var(--pp-teal);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pp-ico .solid{fill:var(--pp-teal);stroke:none}
.pp-sol div:hover .pp-ico *{stroke:var(--pp-teal-lift)}
.pp-sol div:hover .pp-ico .solid{fill:var(--pp-teal-lift)}

/* measure - the arrowheads breathe outward */
.pp-ico--size .a{animation:pp-i-sizeL 3.4s ease-in-out infinite}
.pp-ico--size .b{animation:pp-i-sizeR 3.4s ease-in-out infinite}
@keyframes pp-i-sizeL{0%,100%{transform:translateX(0)}50%{transform:translateX(-1.6px)}}
@keyframes pp-i-sizeR{0%,100%{transform:translateX(0)}50%{transform:translateX(1.6px)}}
/* colour - the three swatches trade places */
.pp-ico--colour circle{animation:pp-i-fade 3.6s ease-in-out infinite}
.pp-ico--colour circle:nth-of-type(2){animation-delay:.4s}
.pp-ico--colour circle:nth-of-type(3){animation-delay:.8s}
@keyframes pp-i-fade{0%,100%{opacity:.45}50%{opacity:1}}
/* safety - the tick draws itself */
.pp-ico--safe .tick{stroke-dasharray:14;stroke-dashoffset:14;
  animation:pp-i-draw 3.8s ease-in-out infinite}
@keyframes pp-i-draw{0%{stroke-dashoffset:14}18%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
/* designs - the perforations punch in, the same idea as the logo */
.pp-ico--designs circle{animation:pp-i-punch 3.2s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
.pp-ico--designs circle:nth-of-type(2){animation-delay:.12s}
.pp-ico--designs circle:nth-of-type(3){animation-delay:.24s}
.pp-ico--designs circle:nth-of-type(4){animation-delay:.36s}
.pp-ico--designs circle:nth-of-type(5){animation-delay:.48s}
.pp-ico--designs circle:nth-of-type(6){animation-delay:.6s}
.pp-ico--designs circle:nth-of-type(7){animation-delay:.72s}
.pp-ico--designs circle:nth-of-type(8){animation-delay:.84s}
.pp-ico--designs circle:nth-of-type(9){animation-delay:.96s}
@keyframes pp-i-punch{0%,62%,100%{transform:scale(1);opacity:1}31%{transform:scale(.6);opacity:.65}}
/* australian made - the coastline traces */
.pp-ico--aus .coast{animation:pp-i-aus 3.8s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
@keyframes pp-i-aus{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* never clean it - the drop falls, and never lands */
.pp-ico--clean .drop{animation:pp-i-drop 3.4s ease-in-out infinite}
@keyframes pp-i-drop{0%,100%{transform:translateY(-1.4px)}50%{transform:translateY(1.6px)}}

/* --- 10. the footer disclaimer: one long, thin line under everything ---- */
.pp-foot .pp-legal{grid-column:1/-1;width:100%;max-width:none;
  margin:clamp(30px,4.5vh,50px) 0 0;padding:16px 0 4px;
  font-size:11.5px;line-height:1.9;letter-spacing:.055em;color:#7fa0b8;
  text-align:center;font-weight:300}
.pp-legal a{color:#a9c8dd;text-decoration:none}
.pp-legal a:hover{color:#fff;text-decoration:underline}

/* --- 11. FACT is orange now, not yellow -------------------------------- */
.pp-closer__fact{color:var(--pp-orange)!important}
.pp-closer{border-left-color:var(--pp-orange)}

/* --- v11.1 · the utility bar runs to the page edges ---------------------
   .pp-wrap caps at 1200px, so on a wide screen the phone number stopped
   120px short of the right edge. The bar is chrome, not content: it gets
   the full width, while everything below it keeps the 1200px measure. */
.pp-top .pp-wrap{max-width:none;padding-left:clamp(16px,2.2vw,34px);
  padding-right:clamp(16px,2.2vw,34px)}


/* ==========================================================================
   THE PUNCH. Appended block - nothing above this line is altered.
   ========================================================================== */

/* --- 1. the header. The wave replaces the middot. ---
   TWO things about this one line of markup:
   a. the wave sits INSIDE .pp-top__seo, inline in the text, not as a flex child
      of .pp-top__claim - so align-items:center on the claim does nothing to it.
   b. the global reset .pp img{display:block} is (0,1,1) and beats a bare
      .pp-top__wave (0,1,0). Without the two-class selector below the wave renders
      as a block and floats above the line. Same trap as .pp-foot p vs .pp-legal. */
.pp-top__seo .pp-top__wave{display:inline-block;vertical-align:middle;
  width:clamp(26px,2.6vw,36px);height:auto;margin:0 9px;opacity:.95}
/* No breakpoint rule is needed: .pp-top__seo already hides at 1080px and the
   wave goes with it, exactly as the middot did. */

/* --- 2. the hero. The film runs clean, then the logo is punched into it. --- */
.pp-rev--punch{height:200svh}            /* a longer pin: the punch needs room to land */
.pp-rev--punch .pp-rev__copy{display:none}
.pp-punch{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;
  pointer-events:none}
.pp-rev--punch .pp-sound{z-index:6}

/* --- 3. the logo section. Canvas replaces the SVG, same ground, no seam. --- */
.pp-show__punch{position:relative;display:block;width:100%;
  aspect-ratio:1363/330;margin:0 auto}
@media (max-width:820px){ .pp-show__punch{aspect-ratio:1363/460} }

/* --- 4. the pull quote, the breath between the two heroes --- */
.pp-quote{background:var(--pp-ink);border-top:1px solid var(--pp-line);
  border-bottom:1px solid var(--pp-line);padding:clamp(44px,7vh,86px) 0}
.pp-quote__in{max-width:1000px;margin:0 auto;padding:0 clamp(20px,4vw,48px);text-align:center}
.pp-quote__stars{margin:0 0 clamp(16px,2.4vh,24px);color:var(--pp-teal);
  font-size:clamp(15px,1.6vw,19px);letter-spacing:.32em}
.pp-quote blockquote{margin:0;font:600 clamp(21px,2.9vw,38px)/1.28 Montserrat,sans-serif;
  letter-spacing:-.014em;color:#fff;text-wrap:balance}
.pp-quote blockquote em{font-style:normal;color:var(--pp-teal)}
.pp-quote cite{display:block;margin-top:clamp(16px,2.4vh,26px);font-style:normal;
  color:var(--pp-mute);font:600 11px/1.5 Montserrat,sans-serif;letter-spacing:.2em;
  text-transform:uppercase}

/* --- 5. the moved hero copy, now on its own picture ---
   The copy sits at the TOP of this one, in the sky, so the fence and the pool
   are never covered. Every other pinned hero keeps its copy at the bottom. */
@media(min-width:821px){
  .pp-rev--moved .pp-rev__copy{top:0;bottom:auto;
    padding-top:clamp(58px,8.5vh,104px);
    padding-bottom:clamp(18px,3vw,36px)}
}
/* Below 821px this section uses the PORTRAIT crop, where the sky band is short
   and the top-right menu button sits exactly where the headline would land -
   the very collision the original bottom placement was written to avoid
   ("small phones: the hero copy must never reach the logo", above). So on
   phones the copy stays at the bottom, over the paving rather than the fence. */


/* ==========================================================================
   THE MENU - four options.  Append this to css/site.css.
   Approved by Jason 8 September 2026.

   It replaces the old three-column overlay. The old .pp-nav, .pp-nav__in,
   .pp-nav h3, .pp-nav ul, .pp-nav a and .pp-nav small rules are dead once the
   markup changes and can be deleted - the new overlay is .pp-m4, on purpose,
   so nothing of the old block reaches it.

   Every colour is var(--pp-...) with the sampled hex as a fallback, so this
   works whether or not it lands after the :root block.
   ========================================================================== */

/* ---------- the overlay ---------- */
.pp-m4{position:fixed;inset:0;z-index:55;overflow-y:auto;
  background:var(--pp-black,#001a2b);
  padding:clamp(96px,12vh,132px) clamp(20px,5vw,48px) clamp(40px,7vh,72px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.pp-m4.is-open{opacity:1;visibility:visible}
.pp-m4__in{width:100%;max-width:1080px;margin:0 auto;flex:1;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.8vh,30px)}

/* ---------- the mark ----------
   height:auto is NOT optional - width/height on an <img> are presentational
   hints, so without it the mark renders 234px tall. */
.pp-m4__logo{display:block;width:min(690px,82vw);height:auto;margin:0 auto}
@media(max-width:640px){ .pp-m4__logo{width:min(690px,80vw)} }
@media(min-width:641px) and (max-height:820px){ .pp-m4__logo{width:min(560px,78vw)} }
@media(min-width:641px) and (max-height:700px){ .pp-m4__logo{width:min(470px,72vw)} }

/* ---------- the eyebrow ---------- */
.pp-m4__kicker{margin:0;text-align:center;
  font:800 11px/1 Montserrat,sans-serif;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pp-teal,#00b9c6)}
@media(max-width:430px){ .pp-m4__kicker{font-size:9.5px;letter-spacing:.24em} }

/* ---------- the four rows ---------- */
.pp-m4__list{display:flex;flex-direction:column;
  border-top:1px solid var(--pp-line,rgba(255,255,255,.11))}
.pp-m4__list a{display:flex;align-items:center;gap:clamp(16px,2vw,26px);
  padding:clamp(16px,2.2vh,24px) clamp(4px,1.4vw,18px);
  border-bottom:1px solid var(--pp-line,rgba(255,255,255,.11));
  color:#fff;text-decoration:none;min-height:78px;
  transition:background .28s,padding-left .28s}
.pp-m4__list a:hover,.pp-m4__list a:focus-visible,.pp-m4__list a:active{
  background:var(--pp-ink,#04263c);padding-left:clamp(12px,2.2vw,28px)}
.pp-m4__txt{flex:1;min-width:0}
.pp-m4__lab{display:block;font-weight:600;letter-spacing:-.012em;line-height:1.16;
  font-size:clamp(19px,2vw,25px)}
.pp-m4__list small{display:block;margin-top:6px;line-height:1.5;letter-spacing:0;
  color:var(--pp-mute,#8a9bab);font-weight:300;font-size:clamp(12.5px,1.05vw,14px)}
.pp-m4__arrow{width:22px;height:22px;flex:none;fill:none;
  stroke:var(--pp-teal,#00b9c6);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .28s,stroke .28s}
.pp-m4__list a:hover .pp-m4__arrow,
.pp-m4__list a:focus-visible .pp-m4__arrow{transform:translateX(5px);
  stroke:var(--pp-teal-lift,#2ad7e3)}
@media(max-width:430px){
  .pp-m4__list a{min-height:72px;gap:15px}
  .pp-m4__lab{font-size:19px}
}

/* ---------- the symbols ----------
   The .pp-ico system from section 9 of this stylesheet, renamed so the two
   cannot collide. Same thin teal line at 1.5, same always-just-moving idea. */
.pp-m4__ico{width:38px;height:38px;display:block;flex:none;overflow:visible}
.pp-m4__ico *{fill:none;stroke:var(--pp-teal,#00b9c6);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pp-m4__ico .solid{fill:var(--pp-teal,#00b9c6);stroke:none}
.pp-m4__list a:hover .pp-m4__ico *,
.pp-m4__list a:focus-visible .pp-m4__ico *{stroke:var(--pp-teal-lift,#2ad7e3)}
.pp-m4__list a:hover .pp-m4__ico .solid,
.pp-m4__list a:focus-visible .pp-m4__ico .solid{fill:var(--pp-teal-lift,#2ad7e3)}
@media(max-width:430px){ .pp-m4__ico{width:32px;height:32px} }

/* DIY - the spanner turns a few degrees and comes back */
.pp-m4__ico--diy .wrench{animation:pp-m4-turn 3.6s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
@keyframes pp-m4-turn{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
/* Professional installer - the hat tips, then settles back on the brim */
.pp-m4__ico--pro .hat{animation:pp-m4-tip 3.5s ease-in-out infinite;
  transform-box:fill-box;transform-origin:bottom center}
@keyframes pp-m4-tip{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-1.4px) rotate(-3.5deg)}}
/* Learn more - the perforations punch in, the same idea as the logo */
.pp-m4__ico--grid circle{animation:pp-m4-punch 3.2s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center}
.pp-m4__ico--grid circle:nth-of-type(2){animation-delay:.12s}
.pp-m4__ico--grid circle:nth-of-type(3){animation-delay:.24s}
.pp-m4__ico--grid circle:nth-of-type(4){animation-delay:.36s}
.pp-m4__ico--grid circle:nth-of-type(5){animation-delay:.48s}
.pp-m4__ico--grid circle:nth-of-type(6){animation-delay:.6s}
.pp-m4__ico--grid circle:nth-of-type(7){animation-delay:.72s}
.pp-m4__ico--grid circle:nth-of-type(8){animation-delay:.84s}
.pp-m4__ico--grid circle:nth-of-type(9){animation-delay:.96s}
@keyframes pp-m4-punch{0%,62%,100%{transform:scale(1);opacity:1}
  31%{transform:scale(.6);opacity:.65}}
/* Inspiration - the filament draws itself, the glass breathes */
.pp-m4__ico--idea .fil{stroke-dasharray:9;stroke-dashoffset:9;
  animation:pp-m4-draw 3.8s ease-in-out infinite}
@keyframes pp-m4-draw{0%{stroke-dashoffset:9}18%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:9}}
.pp-m4__ico--idea .bulb{animation:pp-m4-fade 3.8s ease-in-out infinite}
@keyframes pp-m4-fade{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){ .pp-m4__ico *{animation:none!important} }

/* ---------- the foot ---------- */
.pp-m4__foot{display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2vh,22px);padding-top:clamp(4px,1.2vh,10px)}
.pp-m4__badge{display:block;width:clamp(138px,13.5vw,159px);height:auto}
@media(max-height:900px){ .pp-m4__badge{width:clamp(123px,12vw,144px)} }
@media(max-width:560px){ .pp-m4__badge{width:117px} }
.pp-m4__call{display:inline-flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;transition:color .25s;
  font:800 12.5px/1 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.pp-m4__call:hover,.pp-m4__call:focus-visible{color:var(--pp-teal,#00b9c6)}
.pp-m4__call svg{width:16px;height:16px;fill:var(--pp-teal,#00b9c6);stroke:none;display:block}


/* ==========================================================================
   UX CHANGES - 8 September 2026
   Append this to the very end of css/site.css on the brand site.
   Everything here is an override of a rule further up the file, so the
   original stays readable and the file still diffs cleanly.
   Nothing here is deleted from above. Nothing above needs touching.
   ========================================================================== */

/* --- 1. a bigger Menu button, desktop only -------------------------------
   The button is currently 14px. On a large screen it reads as an
   afterthought, and it is the only way into the site.

   Every rule sits inside min-width:821px on purpose: phones and small
   tablets keep exactly the size they have today. Do not lift these rules
   out of the media query.

   The two translateY values are not arbitrary. The bars close into an X by
   meeting in the middle, so the distance is (bar box height - bar
   thickness) / 2 = (16 - 2) / 2 = 7px. If you change the height, change
   these to match or the X sits crooked.

   Bar thickness is a whole pixel (2px), not 2.5px - a fractional height
   on a real element (.mid, an actual span) can rasterise at a visibly
   different weight than the same fractional height on a pseudo-element
   (::before/::after), even though both report the same computed value in
   devtools. Whole pixels round the same way for both, every time. */
@media(min-width:821px){
  .pp-menu-btn{font-size:19px;letter-spacing:.14em;gap:14px;padding:9px 4px}
  .pp-menu-btn i{width:27px;height:16px}
  .pp-menu-btn i::before,.pp-menu-btn i::after,.pp-menu-btn i .mid{height:2px}
  .pp-menu-btn i .mid{top:7px}
  .pp-menu-btn[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
  .pp-menu-btn[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}
}
/* ==========================================================================
   AUSTRALIAN MADE - the map in the bar, and the window behind it
   Append to the END of css/site.css. Nothing above it changes.
   ========================================================================== */

/* --- 1. the bar. The flag SVG is gone; the mark is a 30px file. ---------- */
.pp-top__mark{width:30px;height:auto;display:block;flex:none;
  transition:transform .3s ease}

/* the claim is now a button. It must look like the text it replaced. */
.pp-top__aus{display:inline-flex;align-items:center;gap:10px;
  background:none;border:0;padding:4px 2px;margin:0;cursor:pointer;
  color:inherit;font:inherit;line-height:inherit;border-radius:2px;
  -webkit-appearance:none;appearance:none}
.pp-top__aus span{border-bottom:1px dotted rgba(0,185,198,.55);padding-bottom:2px;
  transition:color .25s,border-color .25s}
.pp-top__aus:hover span,
.pp-top__aus:focus-visible span{color:var(--pp-teal);
  border-bottom-color:var(--pp-teal);border-bottom-style:solid}
.pp-top__aus:hover .pp-top__mark{transform:scale(1.08)}
.pp-top__aus:focus-visible{outline:2px solid var(--pp-teal);outline-offset:3px}

/* --- 2. the window ------------------------------------------------------
   Behaves exactly like the menu: fixed, full screen, its own scroller.
   HOUSE RULE 2 - no overflow:hidden on html or body. That creates a scroll
   container and breaks every position:sticky pin on the page. The overlay is
   fixed and covers the viewport, which is enough. -------------------------- */
.pp-aus{position:fixed;inset:0;z-index:80;overflow-y:auto;
  background:var(--pp-black);
  padding:clamp(70px,9vh,104px) clamp(18px,5vw,48px) clamp(34px,6vh,64px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.pp-aus.is-open{opacity:1;visibility:visible}

.pp-aus__in{width:100%;max-width:960px;margin:0 auto;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.1vh,24px);text-align:center}

/* the logo punch. The engine draws the mark at 72% of the canvas width and
   44% of its height, so the box has to be 1.389x wider and 2.27x taller than
   the mark you want. The spare space is transparent; the negative margins
   claw it back so the badge sits directly under the logo. */
.pp-aus__punch{--pw:min(600px,92vw);width:var(--pw);height:calc(var(--pw)*.281);
  margin:-44px 0 -46px;flex:none;pointer-events:none}
.pp-aus__punch canvas{display:block;width:100%;height:100%}

.pp-aus__badge{width:min(300px,50vw);
  --b-field:#0f3154;--b-dot:var(--pp-teal);--b-type:#fff;--b-rule:var(--pp-teal);
  --b-sub:#8aa6b4;--b-pool:var(--pp-teal);--b-perf:#fff}
.pp-aus__badge svg{width:100%;height:auto;display:block}

/* the words arrive once both animations have landed, so the button reads as
   the end of the moment rather than something that was waiting. */
.pp-aus__line,.pp-aus__cta,.pp-aus__sub{opacity:0;translate:0 12px;
  transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.3,1)}
.pp-aus.is-settled .pp-aus__line{opacity:1;translate:0 0}
.pp-aus.is-settled .pp-aus__cta{opacity:1;translate:0 0;transition-delay:.12s}
.pp-aus.is-settled .pp-aus__sub{opacity:1;translate:0 0;transition-delay:.22s}

.pp-aus__line{margin:0;font-weight:300;color:#c8dced;
  font-size:clamp(15px,1.6vw,20px);line-height:1.6;max-width:54ch}
.pp-aus__line b{color:#fff;font-weight:800}

.pp-aus__cta{display:inline-flex;align-items:center;justify-content:center;
  background:var(--pp-teal);color:#00212e;text-decoration:none;border-radius:6px;
  padding:16px 28px;font:800 13px/1 Montserrat,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;transition:background .25s,transform .25s}
.pp-aus__cta:hover{background:var(--pp-teal-lift);transform:translateY(-2px);
  color:#00212e;text-decoration:none}
.pp-aus__cta b{font-weight:900;letter-spacing:.15em}
.pp-aus__sub{margin:0;color:var(--pp-mute);font-size:13px}

/* the Close matches the menu's, top right */
.pp-aus__close{position:fixed;top:clamp(18px,3vw,30px);right:clamp(14px,2.4vw,28px);
  z-index:81;display:inline-flex;align-items:center;gap:12px;
  background:none;border:0;cursor:pointer;color:#fff;
  font:800 19px/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 4px;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.pp-aus__close:hover{color:var(--pp-teal)}
.pp-aus__close i{display:block;width:27px;height:16px;position:relative}
.pp-aus__close i::before,.pp-aus__close i::after{content:"";position:absolute;
  left:0;right:0;height:2px;background:currentColor;top:7px}
.pp-aus__close i::before{transform:rotate(45deg)}
.pp-aus__close i::after{transform:rotate(-45deg)}

@media(max-width:640px){
  .pp-aus{padding-top:74px}
  .pp-aus__punch{margin:-26px 0 -27px}
  .pp-aus__badge{width:min(268px,66vw)}
  .pp-aus__cta{width:100%}
  .pp-aus__line{font-size:15px;line-height:1.55}
}

@media(prefers-reduced-motion:reduce){
  .pp-aus__line,.pp-aus__cta,.pp-aus__sub{opacity:1!important;translate:none!important}
}

/* --- 3. FREE reads as emphasis inside an all-caps button ----------------- */
.pp-btn b,.pp-m4__call b{font-weight:900;letter-spacing:.15em}