/* The last-build box on the home page: a window into the Rivers Edge Pools site as it renders on a computer.
   His top bar and his hero are drawn at the size his page draws them, 1440 x 900, on a stage that scales
   to the box's width. His loop plays under it. Nothing inside the window is a link; the whole box is one link
   to his live site in a new tab.
   Scale: /assets/js/c01-hero-window.js sets --rew-s to the box width / 1440 (and again on every resize).
   With no script the fixed values below hold: 0.391 for the 563 px box on a computer, 0.2403 for the 346 px box
   on a 390 px phone. */

@font-face { font-family: "c01 Playfair Display"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("/assets/fonts/c01/playfair-display.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "c01 Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/c01/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* the metric stand-ins his own page declares, so a slow font load does not move his lines */
@font-face { font-family: "c01 Playfair Fallback"; src: local("Times New Roman"); ascent-override: 97.25%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 111.26%; }
@font-face { font-family: "c01 Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

/* the box: one link, no underline, the site's blue focus ring */
.case__pic .case__window { display: block; color: inherit; text-decoration: none; }
.case__pic .case__window:focus-visible { outline: 2px solid #5AA9FF; outline-offset: 3px; }

/* the frame keeps its corner notch; the picture under the notch line (88% of the frame) is 16:10, his 1440 x 900 */
.case__pic .s2-aperture.rew-frame { aspect-ratio: 1.408; }
.case__pic .rew-frame .av video { object-fit: cover; object-position: 50% 50%; }
.case__pic .rew-frame .av .vidstill { object-fit: cover; object-position: 24% 50%; }

.case__pic .rew { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; --rew-s: 0.391; }
@media (max-width: 900px) { .case__pic .rew { --rew-s: 0.2403; } }

.rew .rew__stage { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; margin: 0; padding: 0;
  transform-origin: 0 0; transform: scale(var(--rew-s)); box-sizing: border-box;
  font-family: "c01 Inter", "c01 Inter Fallback", system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;
  color: #fff; text-align: center; letter-spacing: normal; text-transform: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.rew .rew__stage * { box-sizing: border-box; }
.rew .rew__stage p { margin: 0; padding: 0; max-width: none; }

/* his gradient over the loop: laid on the box itself (not the scaled stage), so it meets the loop's edge exactly */
.case__pic .rew { background: linear-gradient(180deg, rgba(6, 6, 7, 0.55), rgba(6, 6, 7, 0.25) 45%, rgba(10, 10, 11, 0.92)); }

/* his top bar, fixed at the top of his page: 87 px, the inner row 1200 px wide and centred */
.rew .rew__bar { position: absolute; left: 0; top: 0; z-index: 3; width: 1440px; height: 87px; background: rgba(5, 5, 6, 0.92); color: #eef2f4; text-align: left; }
.rew .rew__barin { display: flex; align-items: center; gap: 28px; width: 1200px; height: 87px; margin: 0 auto; padding: 20px 28px; }
.rew .rew__brand { display: flex; align-items: center; gap: 10px; flex: none;
  font-family: "c01 Playfair Display", "c01 Playfair Fallback", serif; font-size: 23px; font-weight: 800; line-height: 34.5px; color: #fff; white-space: nowrap; }
.rew .rew__brand img { display: block; width: 36px; height: 36px; max-width: none; }
.rew .rew__pools { color: #5fe3ef; }
.rew .rew__nav { display: flex; align-items: center; gap: 28px; margin-left: auto; flex: none;
  font-size: 13.5px; font-weight: 600; line-height: 20.25px; color: #d7f1f4; white-space: nowrap; }
.rew .rew__svc { display: flex; align-items: center; gap: 4px; }
/* his chevron (his path, stroke 3, round caps), drawn by the stylesheet in the text's own colour */
.rew .rew__svc::after { content: ""; display: block; width: 12px; height: 12px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.rew .rew__tel { color: #fff; }

/* his glass button */
.rew .rew__glass { display: block; border-radius: 9999px; color: #eaffff; font-weight: 700;
  border: 1px solid rgba(95, 227, 239, 0.6);
  background: linear-gradient(135deg, rgba(22, 194, 216, 0.26), rgba(95, 227, 239, 0.12));
  box-shadow: 0 16px 40px -14px rgba(22, 194, 216, 0.45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rew .rew__quote { padding: 12px 24px; font-size: 14px; line-height: 21px; }

/* his hero: the text block centred in the 900 px screen */
.rew .rew__hero { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.rew .rew__block { position: relative; width: 92%; max-width: 880px; padding: 112px 16px 40px; }
.rew .rew__stage .rew__kick { font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: 0.26em; text-transform: uppercase; color: #5fe3ef; }
.rew .rew__stage .rew__h { font-family: "c01 Playfair Display", "c01 Playfair Fallback", Georgia, serif; font-size: 96px; font-weight: 700;
  line-height: 102.72px; letter-spacing: -0.96px; color: #fff; text-shadow: 0 4px 40px rgba(0, 20, 30, 0.6); }
/* his "In." runs aqua into a warm yellow; here it runs into his own pale aqua, since this site carries no yellow-gold.
   The end colour is this one value. */
.rew .rew__in { --rew-in-end: #ffd277;
  background: linear-gradient(120deg, #5fe3ef, var(--rew-in-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rew .rew__stage .rew__sub { max-width: 493.33px; margin: 20px auto 0; font-size: 17px; line-height: 25.5px; color: #dff4f7; }
.rew .rew__stage .rew__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.rew .rew__cta { padding: 16px 36px; font-size: 15px; line-height: 22.5px; }
.rew .rew__ring { display: block; padding: 16px 32px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 9999px;
  font-size: 15px; font-weight: 700; line-height: 22.5px; color: #fff; }
.rew .rew__stage .rew__note { margin-top: 16px; font-size: 13px; line-height: 19.5px; color: #9aa7ac; }