:root {
  --wrs-night: #10282a;
  --wrs-night-2: #18383a;
  --wrs-fog: #edf2f1;
  --wrs-glass: rgba(237, 242, 241, .82);
  --wrs-blue: #1687f8;
  --wrs-green: #79a86d;
  --wrs-sand: #b8aa8e;
  --wrs-ink: #17292b;
  --wrs-line: rgba(224, 237, 234, .18);
  --wrs-radius: 28px;
}

.wrs-page { background: var(--wrs-night); color: var(--wrs-fog); }
.wrs-page::selection { background: var(--wrs-blue); color: white; }
.wrs-page .skip-link { background: var(--wrs-blue); color: white; }
.wrs-header { background: rgba(16,40,42,.78); border-color: var(--wrs-line); backdrop-filter: blur(24px) saturate(1.2); }
.wrs-header .brand { color: var(--wrs-fog); }
.wrs-header nav a::after { background: var(--wrs-blue); }
.wrs-header nav a[aria-current="page"] { color: #8fd2ff; }
.wrs-header .menu-button { border-color: var(--wrs-line); color: var(--wrs-fog); }
.wrs-eyebrow { margin: 0 0 17px; color: #8fd2ff; font: 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .11em; }

.wrs-hero { position: relative; min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(390px,.76fr) minmax(620px,1.24fr); gap: clamp(42px,5vw,90px); align-items: center; overflow: hidden; padding: clamp(72px,8vw,130px) max(32px,calc((100vw - 1440px)/2)); background: radial-gradient(circle at 73% 30%, rgba(121,168,109,.22), transparent 31%), radial-gradient(circle at 13% 80%, rgba(22,135,248,.19), transparent 28%), var(--wrs-night); }
.wrs-hero-copy { position: relative; z-index: 2; }
.wrs-product-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 34px; padding: 8px 13px 8px 8px; border: 1px solid var(--wrs-line); border-radius: 999px; background: rgba(237,242,241,.07); color: #bfd1ce; font: 10px var(--mono); text-transform: uppercase; }
.wrs-product-mark img { width: 30px; height: 30px; image-rendering: pixelated; }
.wrs-hero h1 { margin: 0; color: var(--wrs-fog); font: clamp(72px,8.6vw,150px)/.78 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.wrs-hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 2px #8fd2ff; }
.wrs-lede { max-width: 670px; margin: 34px 0 0; color: #b9ceca; font: clamp(15px,1.2vw,19px)/1.7 var(--mono); }
.wrs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.wrs-primary, .wrs-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 0 18px; border-radius: 13px; font: 11px var(--mono); text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.wrs-primary { background: var(--wrs-blue); color: white; box-shadow: 0 12px 30px rgba(22,135,248,.22); }
.wrs-secondary { border: 1px solid var(--wrs-line); background: rgba(237,242,241,.06); color: var(--wrs-fog); }
.wrs-primary:hover, .wrs-secondary:hover { transform: translateY(-3px); }
.wrs-secondary:hover { background: rgba(237,242,241,.12); }
.wrs-hero-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--wrs-line); list-style: none; color: #8da6a3; font: 10px var(--mono); }
.wrs-hero-facts b { color: var(--wrs-fog); font-weight: 500; text-transform: uppercase; }
.wrs-hero-window { position: relative; z-index: 2; overflow: visible; border: 1px solid rgba(255,255,255,.34); border-radius: 26px; background: var(--wrs-fog); box-shadow: 0 40px 100px rgba(0,0,0,.42); transform: perspective(1500px) rotateY(-5deg) rotateX(2deg); }
.wrs-hero-window > img { width: 100%; border-radius: 25px; }
.wrs-float { position: absolute; z-index: 3; padding: 10px 13px; border: 1px solid rgba(255,255,255,.54); border-radius: 12px; background: var(--wrs-glass); color: var(--wrs-ink); font: 10px var(--mono); box-shadow: 0 14px 34px rgba(0,0,0,.25); backdrop-filter: blur(15px); }
.float-view { left: -40px; top: 18%; }
.float-safe { right: -26px; bottom: 9%; color: #42633e; }
.wrs-orb { position: absolute; border-radius: 50%; filter: blur(12px); opacity: .7; }
.orb-one { width: 280px; height: 280px; right: 2%; top: 5%; background: rgba(184,170,142,.18); }
.orb-two { width: 190px; height: 190px; left: 36%; bottom: 3%; background: rgba(22,135,248,.16); }

.wrs-foundation, .wrs-story, .wrs-repair, .wrs-added, .wrs-downloads, .wrs-credit { width: min(1440px,calc(100% - 64px)); margin-inline: auto; }
.wrs-foundation, .wrs-repair, .wrs-added { padding-block: clamp(95px,11vw,170px); }
.wrs-section-label { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid currentColor; opacity: .56; font: 10px var(--mono); text-transform: uppercase; }
.wrs-foundation { color: var(--wrs-ink); }
.wrs-foundation::before { content: ""; position: absolute; inset: 0 calc((100vw - 100%) / -2); z-index: -1; background: var(--wrs-fog); }
.wrs-foundation { position: relative; z-index: 1; }
.wrs-foundation .wrs-eyebrow { color: #1676c8; }
.wrs-foundation-copy { display: grid; grid-template-columns: .5fr 1.3fr 1fr; gap: 44px; align-items: start; margin-top: 70px; }
.wrs-foundation-copy .wrs-eyebrow { grid-column: 1; }
.wrs-foundation-copy h2 { grid-column: 2; margin: 0; font: clamp(52px,6.5vw,100px)/.9 var(--display); text-transform: uppercase; }
.wrs-foundation-copy > p { grid-column: 3; margin: 0 0 18px; color: #52605e; line-height: 1.7; }
.wrs-foundation-copy > p + p { margin-top: 165px; }
.wrs-foundation-copy a { color: #126db8; text-decoration: underline; text-underline-offset: 4px; }
.wrs-foundation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 72px; }
.wrs-foundation-grid article { min-height: 280px; padding: 30px; border-radius: var(--wrs-radius); background: white; box-shadow: 0 20px 60px rgba(16,40,42,.08); }
.wrs-foundation-grid article:last-child { background: var(--wrs-night); color: var(--wrs-fog); }
.wrs-foundation-grid span { color: #64817d; font: 10px var(--mono); text-transform: uppercase; }
.wrs-foundation-grid h3 { margin: 60px 0 14px; font: clamp(38px,4vw,62px)/.92 var(--display); text-transform: uppercase; }
.wrs-foundation-grid p { max-width: 650px; margin: 0; color: #63706e; line-height: 1.65; }
.wrs-foundation-grid article:last-child p { color: #abc0bc; }

.wrs-story { padding-block: clamp(100px,12vw,180px); }
.wrs-story-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 44px; margin: 70px 0 80px; }
.wrs-story-heading h2 { margin: 0; font: clamp(58px,7.5vw,116px)/.86 var(--display); text-transform: uppercase; }
.wrs-story-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(38px,7vw,110px); align-items: start; }
.wrs-story-steps { padding-bottom: 35vh; }
.wrs-step { min-height: 58vh; padding: 36px 0 70px; border-top: 1px solid var(--wrs-line); opacity: .28; transition: opacity .35s ease, transform .35s ease; }
.wrs-step.is-active { opacity: 1; transform: translateX(12px); }
.wrs-step span { color: #8fd2ff; font: 10px var(--mono); text-transform: uppercase; }
.wrs-step h3 { max-width: 590px; margin: 28px 0 18px; font: clamp(45px,5.2vw,78px)/.93 var(--display); text-transform: uppercase; }
.wrs-step p { max-width: 590px; margin: 0; color: #a9bfbb; font: 15px/1.75 var(--mono); }
.wrs-story-stage { position: sticky; top: 100px; height: calc(100vh - 140px); min-height: 610px; overflow: hidden; border: 1px solid var(--wrs-line); border-radius: 34px; background: #091c1e; box-shadow: 0 36px 100px rgba(0,0,0,.3); }
.wrs-stage-image { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05); transition: opacity .65s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
.wrs-stage-image.is-active { opacity: 1; transform: scale(1); }
.wrs-stage-image img { width: 100%; height: 100%; object-fit: cover; }
.wrs-stage-image figcaption { position: absolute; left: 22px; bottom: 22px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(237,242,241,.84); color: var(--wrs-ink); font: 10px var(--mono); backdrop-filter: blur(13px); }

.wrs-repair { color: var(--wrs-ink); }
.wrs-repair::before { content: ""; position: absolute; inset: 0 calc((100vw - 100%) / -2); z-index: -1; background: #dfe8e5; }
.wrs-repair { position: relative; z-index: 1; }
.wrs-repair .wrs-eyebrow { color: #1676c8; }
.wrs-repair-intro { display: grid; grid-template-columns: .55fr 1.2fr .7fr; gap: 45px; margin-top: 70px; }
.wrs-repair-intro h2 { margin: 0; font: clamp(58px,7vw,108px)/.87 var(--display); text-transform: uppercase; }
.wrs-repair-intro > p:last-child { margin: 0; color: #536561; line-height: 1.75; }
.wrs-repair-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 80px; background: rgba(16,40,42,.2); }
.wrs-repair-grid article { min-height: 310px; padding: 24px; background: #edf2f1; }
.wrs-repair-grid b { color: #1676c8; font: 11px var(--mono); }
.wrs-repair-grid h3 { margin: 80px 0 16px; font: 34px/.95 var(--display); text-transform: uppercase; }
.wrs-repair-grid p { margin: 0; color: #5b6966; line-height: 1.65; }
.wrs-safety { display: grid; grid-template-columns: .25fr 1fr; gap: 30px; margin-top: 24px; padding: 24px; border-radius: 18px; background: var(--wrs-blue); color: white; }
.wrs-safety strong { font: 24px var(--display); text-transform: uppercase; }
.wrs-safety span { font: 13px/1.6 var(--mono); }

.wrs-added { color: var(--wrs-fog); }
.wrs-added-heading { display: grid; grid-template-columns: .4fr 1.6fr; gap: 44px; margin: 70px 0; }
.wrs-added-heading h2 { max-width: 1000px; margin: 0; font: clamp(58px,7.2vw,112px)/.87 var(--display); text-transform: uppercase; }
.wrs-added-list { border-top: 1px solid var(--wrs-line); }
.wrs-added-list article { display: grid; grid-template-columns: .12fr .88fr; gap: 30px; padding: 34px 0; border-bottom: 1px solid var(--wrs-line); }
.wrs-added-list > article > span { color: #8fd2ff; font: 10px var(--mono); }
.wrs-added-list article div { display: grid; grid-template-columns: .65fr 1fr; gap: 36px; }
.wrs-added-list h3 { margin: 0; font: clamp(32px,3.4vw,50px)/.95 var(--display); text-transform: uppercase; }
.wrs-added-list p { max-width: 680px; margin: 0; color: #9db4b0; line-height: 1.7; }

.wrs-gallery { padding-block: clamp(95px,11vw,160px); overflow: hidden; background: var(--wrs-fog); color: var(--wrs-ink); }
.wrs-gallery-heading { width: min(1440px,calc(100% - 64px)); display: grid; grid-template-columns: 1fr .45fr; gap: 50px; align-items: end; margin: 0 auto 48px; }
.wrs-gallery .wrs-eyebrow { color: #1676c8; }
.wrs-gallery-heading h2 { max-width: 1020px; margin: 0; font: clamp(55px,7vw,108px)/.87 var(--display); text-transform: uppercase; }
.wrs-gallery-heading > p { color: #5d6b68; font: 12px/1.7 var(--mono); }
.wrs-gallery-track { display: flex; gap: 18px; overflow-x: auto; padding: 0 max(32px,calc((100vw - 1440px)/2)) 28px; scroll-snap-type: x mandatory; scrollbar-color: var(--wrs-blue) rgba(16,40,42,.14); }
.wrs-gallery-track figure { flex: 0 0 min(78vw,1100px); margin: 0; scroll-snap-align: center; }
.wrs-gallery-track img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 70px rgba(16,40,42,.18); }
.wrs-gallery-track figcaption { display: flex; justify-content: space-between; gap: 30px; padding: 16px 4px 0; font-family: var(--mono); }
.wrs-gallery-track b { color: #1676c8; font-size: 11px; text-transform: uppercase; }
.wrs-gallery-track span { color: #6b7976; font-size: 11px; }

.wrs-downloads { padding-block: clamp(100px,12vw,180px); }
.wrs-download-heading { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.wrs-download-heading h2 { margin: 0; font: clamp(65px,8vw,126px)/.84 var(--display); text-transform: uppercase; }
.wrs-download-heading > a { color: #8fd2ff; font: 11px var(--mono); text-transform: uppercase; }
.wrs-download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 62px; }
.wrs-download-grid article { min-height: 300px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--wrs-line); border-radius: 24px; background: rgba(237,242,241,.055); transition: transform .25s ease, background .25s ease; }
.wrs-download-grid article:hover { transform: translateY(-5px); background: rgba(237,242,241,.1); }
.wrs-os { align-self: start; padding: 7px 9px; border-radius: 8px; background: rgba(143,210,255,.12); color: #8fd2ff; font: 9px var(--mono); text-transform: uppercase; }
.wrs-download-grid h3 { margin: 48px 0 10px; font: 38px/1 var(--display); text-transform: uppercase; }
.wrs-download-grid p { margin: 0; color: #9bb0ac; line-height: 1.6; }
.wrs-download-grid a { margin-top: auto; padding-top: 25px; color: #8fd2ff; font: 11px var(--mono); text-transform: uppercase; }
.wrs-signing-note { max-width: 810px; margin: 28px 0 0; color: #829b97; font: 10px/1.65 var(--mono); }

.wrs-credit { display: grid; grid-template-columns: .35fr 1fr; gap: 70px; align-items: center; margin-bottom: 120px; padding: 60px; border-radius: 40px; background: var(--wrs-fog); color: var(--wrs-ink); }
.wrs-credit > img { width: min(100%,260px); justify-self: center; image-rendering: pixelated; filter: drop-shadow(0 30px 25px rgba(16,40,42,.2)); }
.wrs-credit .wrs-eyebrow { color: #1676c8; }
.wrs-credit h2 { margin: 0; font: clamp(48px,6vw,90px)/.88 var(--display); text-transform: uppercase; }
.wrs-credit p { max-width: 820px; color: #5c6c69; line-height: 1.7; }
.wrs-credit div div { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.wrs-credit a { color: #126db8; font: 10px var(--mono); text-transform: uppercase; }
.wrs-footer { display: flex; justify-content: space-between; gap: 25px; padding: 26px 32px; border-top: 1px solid var(--wrs-line); color: #809995; font: 10px var(--mono); text-transform: uppercase; }
.wrs-footer a { color: #8fd2ff; }

@media (max-width: 1100px) {
  .wrs-hero { grid-template-columns: 1fr; }
  .wrs-hero-window { transform: none; }
  .wrs-foundation-copy { grid-template-columns: .35fr 1fr; }
  .wrs-foundation-copy h2 { grid-column: 2; }
  .wrs-foundation-copy > p { grid-column: 2; }
  .wrs-foundation-copy > p + p { margin-top: 0; }
  .wrs-story-grid { grid-template-columns: 1fr; }
  .wrs-story-steps { padding-bottom: 0; }
  .wrs-step { min-height: auto; }
  .wrs-story-stage { position: relative; top: 0; height: 70vw; min-height: 540px; }
  .wrs-repair-intro { grid-template-columns: .35fr 1fr; }
  .wrs-repair-intro > p:last-child { grid-column: 2; }
  .wrs-repair-grid { grid-template-columns: repeat(2,1fr); }
  .wrs-download-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px) {
  .wrs-page .site-header nav { background: rgba(16,40,42,.97); }
  .wrs-hero { min-height: auto; grid-template-columns: 1fr; padding: 70px 16px 90px; }
  .wrs-hero h1 { font-size: clamp(66px,22vw,95px); }
  .wrs-hero-window { border-radius: 16px; }
  .wrs-hero-window > img { border-radius: 15px; }
  .wrs-float { display: none; }
  .wrs-foundation, .wrs-story, .wrs-repair, .wrs-added, .wrs-downloads, .wrs-credit { width: calc(100% - 32px); }
  .wrs-foundation-copy, .wrs-story-heading, .wrs-repair-intro, .wrs-added-heading { grid-template-columns: 1fr; gap: 22px; margin-top: 44px; }
  .wrs-foundation-copy .wrs-eyebrow, .wrs-foundation-copy h2, .wrs-foundation-copy > p, .wrs-repair-intro > p:last-child { grid-column: auto; }
  .wrs-foundation-grid, .wrs-repair-grid, .wrs-download-grid { grid-template-columns: 1fr; }
  .wrs-foundation-grid article { min-height: 240px; }
  .wrs-step { padding-block: 28px 52px; }
  .wrs-story-stage { min-height: 360px; height: 76vw; border-radius: 20px; }
  .wrs-stage-image figcaption { left: 12px; bottom: 12px; }
  .wrs-safety { grid-template-columns: 1fr; }
  .wrs-added-list article { grid-template-columns: .14fr .86fr; }
  .wrs-added-list article div { grid-template-columns: 1fr; gap: 14px; }
  .wrs-gallery-heading { width: calc(100% - 32px); grid-template-columns: 1fr; }
  .wrs-gallery-track { padding-inline: 16px; }
  .wrs-gallery-track figure { flex-basis: calc(100vw - 32px); }
  .wrs-gallery-track figcaption { flex-direction: column; gap: 6px; }
  .wrs-download-heading { grid-template-columns: 1fr; }
  .wrs-credit { grid-template-columns: 1fr; padding: 30px 22px; border-radius: 24px; }
  .wrs-credit > img { width: 150px; }
  .wrs-footer { flex-direction: column; padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wrs-stage-image, .wrs-step, .wrs-hero-window, .wrs-gallery-track { transition: none; scroll-behavior: auto; }
}