/* The Water Report, embedded on the homepage.
   Everything here is scoped to .wr-block / .wr-modal so it cannot
   touch the rest of the site's styles. */
.wr-block, .wr-modal {
  --wrNavy:#0d2340; --wrBlue:#2a5eaa; --wrRed:#c0392b;
  --wrPaper:#f4f3ef; --wrInk:#14181d; --wrMuted:#6b7684;
}

/* ---- Scene ----
   Canvas and copy are both pinned. The block supplies the scroll
   distance; scrolling swaps which caption is showing. The whole pinned
   layer only appears while the block fills the viewport, so it can never
   bleed over the nav above or the hero below. */
.wr-block { position:relative; height:200vh; background:var(--wrPaper); }

.wr-pin {
  position:fixed; top:0; left:0; width:100vw; height:100vh; height:100svh;
  z-index:0; pointer-events:none;
  /* opacity is driven from scroll so the scene fades out as the section
     hands over, rather than cutting. visibility, not display, so the
     canvas keeps its size and the fade can actually animate. */
  opacity:0; visibility:hidden;
  transform:translate3d(0, var(--wrLift, 0px), 0);
  transition:visibility 0s linear .45s;
}
.wr-block.active .wr-pin { visibility:visible; transition:visibility 0s; }

/* Belt and braces: everything after the block paints above the pinned
   layer, so even if the toggle ever missed, it could not show through. */
.wr-block ~ section,
.wr-block ~ footer,
.wr-block ~ div:not(.wr-modal) { position:relative; z-index:1; }

.wr-pin .sys { position:absolute; inset:0; width:100%; height:100%; }

.wr-scene {
  position:absolute; inset:0;
  display:flex; align-items:center;
  /* top offset clears the site's sticky header, measured in JS */
  padding:var(--wrHeader, 0px) clamp(1.4rem, 6vw, 6rem) 0;
  opacity:0; transition:opacity .45s ease;
}
.wr-scene.on { opacity:1; }
.wr-scene.on .wr-txt { pointer-events:auto; }

.wr-txt {
  max-width:min(44ch, 46vw);
  transform:translate3d(0,18px,0);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.wr-scene.on .wr-txt { transform:none; }

.wr-scene h2 {
  font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase;
  color:var(--wrNavy); font-size:clamp(2rem, 5.2vw, 4.2rem); line-height:1;
  margin:.9rem 0 1rem; letter-spacing:.005em;
  text-shadow:0 0 30px var(--wrPaper), 0 0 12px var(--wrPaper);
}
.wr-scene h2 .accent { color:var(--wrRed); }
.wr-scene p { color:var(--wrMuted); font-size:1.02rem; line-height:1.65; max-width:32ch;
              text-shadow:0 0 18px var(--wrPaper); }
.wr-scene .btn { margin-top:1.6rem; }

@media (max-width:900px) {
  /* Copy sits in the top third, the scene lives below it, so nothing
     is read through the animation. */
  .wr-scene {
    align-items:flex-start;
    padding:calc(var(--wrHeader, 0px) + 1.6vh) 1.1rem 0;
  }
  .wr-txt { max-width:100%; }
  .wr-scene h2 { font-size:clamp(1.65rem, 7.2vw, 2.3rem); line-height:.98; margin:.6rem 0 .7rem; text-shadow:none; }
  .wr-scene p  { font-size:.88rem; line-height:1.5; max-width:36ch; text-shadow:none; }
  .wr-scene .pill { font-size:.62rem; padding:.3rem .8rem; }
  .wr-pin .sys { opacity:.9; }        /* no overlap now, so let it show */
}

/* ---- Quiz overlay ---- */
.wr-modal {
  position:fixed !important; inset:0; z-index:9999 !important; background:var(--wrPaper);
  /* dvh so the iOS address bar cannot push the scrollable area off screen */
  height:100vh; height:100dvh;
  display:flex; flex-direction:column; animation:wrIn .32s ease both;
  font-family:'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color:var(--wrInk);
}
@keyframes wrIn { from { opacity:0; } to { opacity:1; } }
.wr-modal[hidden] { display:none; }
.wr-modal-bar { display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.8rem; }
.wr-modal .wr-tag { font-size:.72rem; font-weight:700; letter-spacing:.22em;
                    text-transform:uppercase; color:var(--wrNavy); }
.wr-modal .wr-close { background:none; border:0; font-size:2rem; line-height:1;
                      color:var(--wrNavy); cursor:pointer; opacity:.55; padding:0 .3rem; }
.wr-modal .wr-close:hover { opacity:1; }
/* The report is taller than the screen, so this has to scroll. It used to
   be a centring flex container with no overflow, which meant the content
   simply could not be reached on a phone. */
.wr-modal-body {
  flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  touch-action:pan-y;
  display:block; padding:1rem clamp(1rem, 4vw, 1.8rem) 3rem;
}
.wr-modal .panel { display:none; width:100%; max-width:860px; margin:0 auto; text-align:center; }
/* short steps still sit centred; the long ones just scroll */
.wr-modal .panel[data-panel="1"].is-on,
.wr-modal .panel[data-panel="4"].is-on {
  display:flex; flex-direction:column; justify-content:center; min-height:70vh;
}
.wr-modal .panel.is-on { display:block; animation:wrRise .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wrRise { from { opacity:0; transform:translate3d(0,22px,0); } to { opacity:1; transform:none; } }
body.wr-open { overflow:hidden; width:100%; }   /* position/top set in JS for iOS */

/* Sentence builder */
.wr-modal .sentence { font-family:'Anton', Impact, sans-serif; text-transform:uppercase; color:var(--wrNavy); }
.wr-modal .line {
  font-size:clamp(1.9rem, 6.2vw, 4.2rem); line-height:1.12;
  opacity:0; transform:translate3d(0,16px,0); pointer-events:none;
  max-height:0; overflow:hidden; margin:0;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), max-height .55s ease;
}
.wr-modal .line.show { opacity:1; transform:none; pointer-events:auto; max-height:3em; }
.wr-modal .line.done { opacity:.32; }
.wr-modal .slot { display:inline-block; }
.wr-modal .slot input {
  font:inherit; color:var(--wrNavy); background:transparent;
  border:0; border-bottom:3px solid rgba(13,35,64,.16);
  padding:0 .12em .04em; text-align:center; text-transform:uppercase;
  width:8ch; min-width:6ch; max-width:min(92vw, 20ch);
  transition:border-color .2s, width .18s ease; border-radius:0;
}
.wr-modal .slot input::placeholder { color:rgba(13,35,64,.26); }
.wr-modal .slot input:focus { outline:none; border-bottom-color:var(--wrRed); }
.wr-modal .slot input#f-email { text-transform:lowercase; }

.wr-modal .err { min-height:1.4em; margin-top:1.1rem; color:var(--wrRed); font-weight:600; font-size:.95rem; }
.wr-modal .nav { display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-top:1.4rem; }
.wr-modal .link { background:none; border:0; font:inherit; font-weight:600; color:var(--wrNavy);
                  border-bottom:1px solid var(--wrNavy); cursor:pointer; padding:.2rem 0; opacity:.75; }
.wr-modal .link:hover { opacity:1; }
.wr-modal .link[hidden] { display:none; }
.wr-modal .btn {
  display:inline-block; background:var(--wrNavy); color:#fff; border:0;
  font:inherit; font-weight:700; font-size:1rem; padding:1rem 2.6rem;
  border-radius:2px; cursor:pointer; text-decoration:none; transition:background .18s, transform .18s;
}
.wr-modal .btn:hover { background:var(--wrRed); transform:translateY(-2px); }
.wr-modal .fine { margin-top:1.8rem; font-size:.8rem; line-height:1.6; color:var(--wrMuted);
                  max-width:32rem; margin-inline:auto; }

/* Building */
.wr-modal .building { font-family:'Anton', Impact, sans-serif; text-transform:uppercase; color:var(--wrNavy);
                      font-size:clamp(1.3rem, 3.6vw, 2.2rem); line-height:1.25; }
.wr-modal .bar { width:min(340px, 74vw); height:3px; margin:2rem auto 0; background:rgba(13,35,64,.12); overflow:hidden; }
.wr-modal .bar span { display:block; height:100%; width:0; background:var(--wrRed); }

/* Report */
.wr-modal .eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--wrMuted); }
.wr-modal .rtitle { font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase;
                    color:var(--wrNavy); font-size:clamp(2.1rem, 7vw, 4.4rem); line-height:1; margin:.6rem 0 1rem; }
.wr-modal .rsub { max-width:36rem; margin:0 auto 2.2rem; color:var(--wrMuted); line-height:1.65; }
.wr-modal .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2.4rem; text-align:left; }
.wr-modal .card { background:#fff; border:1px solid rgba(13,35,64,.1); padding:1.3rem; }
.wr-modal .card h3 { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wrMuted);
                     margin-bottom:.5rem; font-weight:700; }
.wr-modal .card .val { font-family:'Anton', Impact, sans-serif; font-size:1.9rem; color:var(--wrNavy); line-height:1; }
.wr-modal .card .val.bad { color:var(--wrRed); }
.wr-modal .card p { margin-top:.5rem; font-size:.88rem; color:var(--wrMuted); line-height:1.5; }
@media (max-width:760px) { .wr-modal .cards { grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce) {
  .wr-scene, .wr-modal .panel.is-on, .wr-modal .line { transition:none !important; animation:none !important; }
}

/* ---- Zip prompt, sits between the scene and the hero ---- */
.wr-ask {
  --wrNavy:#0d2340; --wrRed:#c0392b; --wrPaper:#f4f3ef; --wrMuted:#6b7684;
  position:relative; z-index:1;
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  background:var(--wrPaper);
  min-height:82vh; display:flex; align-items:center; justify-content:center;
  padding:6rem clamp(1.4rem, 6vw, 5rem);
  text-align:center;
}
.wr-ask.lit { opacity:1; transform:none; }
.wr-ask-inner { max-width:60rem; }
.wr-ask-h {
  font-family:'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:400; color:var(--wrNavy);
  font-size:clamp(1.7rem, 4.2vw, 3.3rem); line-height:1.16; letter-spacing:-.5px;
}
.wr-ask-line {
  margin-top:.5rem;
  font-family:'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:400; color:var(--wrNavy);
  font-size:clamp(1.7rem, 4.2vw, 3.3rem); line-height:1.3; letter-spacing:-.5px;
}
.wr-ask-slot { display:inline-block; }
.wr-ask-slot input {
  font:inherit; color:var(--wrNavy); background:transparent; border:0;
  border-bottom:2px solid rgba(13,35,64,.14);
  text-align:center; width:9ch; max-width:80vw; padding:0 .1em .05em;
  transition:border-color .2s;
}
.wr-ask-slot input::placeholder { color:rgba(13,35,64,.25); }
.wr-ask-slot input:focus { outline:none; border-bottom-color:var(--wrRed); }
.wr-ask .btn { margin-top:2.6rem; }
.wr-ask-note { min-height:1.4em; margin-top:1.1rem; color:var(--wrRed); font-weight:600; font-size:.95rem; }

/* ---- Report ---- */
.wr-report { max-width:1000px !important; }
.wr-modal .rtitle .wr-accent { color:var(--wrRed); }
.wr-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; margin:2rem 0 0; text-align:left; }

.wr-card {
  position:relative; background:#fff; border:1px solid rgba(13,35,64,.10);
  border-radius:4px; padding:1.5rem 1.4rem; text-align:center;
}
.wr-card h3 { font-size:1.02rem; font-weight:700; color:var(--wrNavy); margin-bottom:.9rem; }
.wr-card-lead { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
                color:var(--wrMuted); font-weight:600; }
.wr-card-times {
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:clamp(2rem, 5vw, 2.9rem); line-height:1.05; color:var(--wrRed); margin:.35rem 0;
}
.wr-card-rows { margin-top:1.1rem; font-size:.84rem; }
.wr-card-rows > div { display:flex; justify-content:space-between; gap:1rem;
                      padding:.34rem 0; border-top:1px solid rgba(13,35,64,.07); }
.wr-card-rows dt { color:var(--wrMuted); }
.wr-card-rows dd { color:var(--wrNavy); font-weight:600; }

/* held back until they book */
.wr-card.is-locked { user-select:none; }
.wr-card.is-locked h3,
.wr-card.is-locked .wr-card-times,
.wr-card.is-locked .wr-card-rows,
.wr-card.is-locked .wr-card-lead { filter:blur(7px); opacity:.55; }
.wr-card.is-locked::after {
  content:''; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(to bottom, rgba(244,243,239,0) 0%, rgba(244,243,239,.75) 100%);
}

.wr-gate {
  margin-top:1.4rem; padding:2.2rem 1.6rem;
  background:var(--wrNavy); color:#fff; border-radius:4px; text-align:center;
}
.wr-gate[hidden] { display:none; }
.wr-gate h3 { font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase;
              font-size:clamp(1.4rem, 3.4vw, 2.1rem); line-height:1.05;
              color:#fff;   /* the site sets headings navy, which is invisible here */ }
.wr-gate p { max-width:38rem; margin:.9rem auto 1.6rem; color:#c8d6e8; line-height:1.6; font-size:.97rem; }
.wr-gate .btn { background:var(--wrRed); }
.wr-gate .btn:hover { background:#fff; color:var(--wrNavy); }
.wr-gate-list { list-style:none; margin:1.6rem auto 0; max-width:34rem;
                display:grid; gap:.45rem; font-size:.86rem; color:#a9bdd6; }
.wr-gate-list li::before { content:'✓'; color:#fff; margin-right:.5rem; font-weight:700; }

@media (max-width:760px) { .wr-grid { grid-template-columns:1fr; } }

/* Optional copy by email, offered after the report is visible */
.wr-copyto { margin-top:1.6rem; }
.wr-copyto .link { font-size:.88rem; }
.wr-copyto-form { display:flex; gap:.6rem; justify-content:center; margin-top:.4rem; }
.wr-copyto-form[hidden] { display:none; }
.wr-copyto-form input {
  font:inherit; font-size:.92rem; padding:.62rem .9rem; min-width:15rem;
  border:1px solid rgba(13,35,64,.18); border-radius:2px; background:#fff; color:var(--wrInk);
}
.wr-copyto-form input:focus { outline:none; border-color:var(--wrBlue); }
.wr-modal .btn.btn-sm { padding:.62rem 1.3rem; font-size:.9rem; }
.wr-copyto-done { margin-top:.5rem; font-size:.88rem; color:var(--wrMuted); }
.wr-copyto-done[hidden] { display:none; }

/* Sticky ask, so the booking button is never scrolled out of reach */
.wr-sticky-cta {
  position:sticky; bottom:0; z-index:5;
  background:rgba(244,243,239,.94); backdrop-filter:blur(8px);
  border-top:1px solid rgba(13,35,64,.10);
  padding:.9rem clamp(1rem,4vw,2rem);
}
.wr-sticky-cta[hidden] { display:none; }
.wr-sticky-inner {
  max-width:1000px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.wr-sticky-text { font-size:.92rem; font-weight:600; color:var(--wrNavy); }
.wr-sticky-cta .btn { background:var(--wrRed); padding:.85rem 1.8rem; }
.wr-sticky-cta .btn:hover { background:var(--wrNavy); }
@media (max-width:620px) {
  .wr-sticky-inner { justify-content:center; }
  .wr-sticky-text { display:none; }
  .wr-sticky-cta .btn { width:100%; }
}

/* Booking step */
.wr-book { max-width:900px !important; }
.wr-book #wr-cal { margin-top:1.6rem; }
.wr-book .link { margin-top:1.2rem; }

/* Craig on what happens next, inside the gate */
.wr-gate-grid {
  display:grid; grid-template-columns:minmax(180px, 230px) 1fr;
  gap:2rem; align-items:center; text-align:left;
}
.wr-gate-copy h3, .wr-gate-copy p { text-align:left; margin-left:0; }
.wr-gate-copy p { margin:.8rem 0 1.5rem; }
.wr-gate-copy .wr-gate-list { margin-left:0; text-align:left; }

.wr-gate-video { position:relative; }
.wr-vid-play {
  display:block; width:100%; aspect-ratio:9/16; position:relative;
  border:0; padding:0; background:#0a1728; border-radius:6px; overflow:hidden;
  cursor:pointer; box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.wr-vid-play img { width:100%; height:100%; object-fit:cover; display:block; opacity:.62;
                   transition:opacity .25s, transform .4s; }
.wr-vid-play:hover img { opacity:.78; transform:scale(1.03); }
.wr-vid-icon {
  position:absolute; top:42%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:var(--wrRed);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.wr-vid-icon::after {
  content:''; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.wr-vid-label {
  position:absolute; left:0; right:0; bottom:0; padding:.9rem .8rem;
  color:#fff; font-size:.82rem; font-weight:700; line-height:1.3; text-align:center;
  background:linear-gradient(to top, rgba(10,23,40,.92), rgba(10,23,40,0));
}
.wr-vid-label small { display:block; font-weight:400; opacity:.72; font-size:.74rem; margin-top:.2rem; }
.wr-gate-video iframe { width:100%; aspect-ratio:9/16; border:0; border-radius:6px; display:block; }

@media (max-width:760px) {
  .wr-gate-grid { grid-template-columns:1fr; gap:1.4rem; }
  .wr-gate-video { max-width:230px; margin:0 auto; }
  .wr-gate-copy h3, .wr-gate-copy p, .wr-gate-copy .wr-gate-list { text-align:center; }
  .wr-gate-copy p { margin-inline:auto; }
}

/* Next steps video, sitting with the results rather than at the very bottom */
.wr-nextsteps {
  display:flex; align-items:center; gap:1.2rem; text-align:left;
  background:#fff; border:1px solid rgba(13,35,64,.10); border-radius:4px;
  padding:1rem; margin-top:1.6rem;
}
.wr-nextsteps[hidden] { display:none; }
.wr-nextsteps .wr-vid-play { width:96px; flex:0 0 96px; }
.wr-nextsteps .wr-vid-icon { width:38px; height:38px; top:50%; }
.wr-nextsteps .wr-vid-icon::after { border-left-width:12px; border-top-width:7px; border-bottom-width:7px; }
.wr-nextsteps-copy h3 { font-size:1rem; color:var(--wrNavy); margin-bottom:.25rem; }
.wr-nextsteps-copy p { font-size:.88rem; color:var(--wrMuted); line-height:1.5; }
.wr-nextsteps iframe { width:100%; aspect-ratio:9/16; border:0; border-radius:6px; display:block; }
.wr-nextsteps.is-playing { display:block; max-width:300px; margin-inline:auto; }
.wr-gate-grid-solo { grid-template-columns:1fr; }
.wr-gate-grid-solo .wr-gate-copy h3,
.wr-gate-grid-solo .wr-gate-copy p,
.wr-gate-grid-solo .wr-gate-list { text-align:center; margin-inline:auto; }

/* Introduction video beside the zip prompt */
.wr-ask-grid {
  display:grid; grid-template-columns:minmax(190px, 250px) 1fr;
  gap:clamp(1.8rem, 5vw, 4rem); align-items:center;
  max-width:70rem; margin:0 auto; width:100%;
}
.wr-ask-grid .wr-ask-inner { max-width:none; text-align:left; }
.wr-ask-grid .wr-ask-h, .wr-ask-grid .wr-ask-line { text-align:left; }
.wr-ask-video { width:100%; }
.wr-ask-video iframe { width:100%; aspect-ratio:9/16; border:0; border-radius:6px; display:block; }

@media (max-width:820px) {
  .wr-ask-grid { grid-template-columns:1fr; gap:1.8rem; }
  .wr-ask-video { max-width:220px; margin:0 auto; }
  .wr-ask-grid .wr-ask-inner,
  .wr-ask-grid .wr-ask-h,
  .wr-ask-grid .wr-ask-line { text-align:center; }
  .wr-ask { min-height:auto; padding:3.5rem 1.2rem 4rem; }
}