:root {
  --ink: #070b15;
  --navy: #101a34;
  --steel: #7e8592;
  --mist: #eef1f4;
  --accent: #e32d33;
  --aqua: #6ccbe2;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--white); font-family: Montserrat, sans-serif; font-weight: 500; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { margin: 0 auto; max-width: 1180px; padding: 0 28px; }
.design-section { background: #eee; color: var(--navy); text-shadow: none; }
#design .row { align-items: center; display: flex; }
#design h2 { color: var(--navy); font-size: 24px; text-transform: uppercase; }
#design p { color: var(--navy); line-height: 1.65; }
#design .design-product-image { max-width: 100%; }

#features { background-color: #221f20; }
#features .feature-icon { background: transparent; border-radius: 0; display: block; height: 120px; margin: 0 auto 28px; object-fit: contain; width: 120px; }
#features > .container > .row:first-child h2 { font-size: 24px; }
#features h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; }
#features p { line-height: 1.65; }

.raymote-section { background: #221f20; color: rgba(255, 255, 255, .9); text-shadow: none; }
#raymote .row { align-items: center; display: flex; }
#raymote .showcase { background: transparent; min-height: 0; padding: 0; position: static; }
#raymote .showcase::before, #raymote .showcase::after { display: none; }
#raymote .showcase img { margin: 0 auto; max-height: 520px; max-width: 100%; position: static; }
#raymote h2 { font-size: 24px; }
#raymote p { line-height: 1.65; }
#raymote .store-badges { margin: 30px 0 0; }
#raymote .store-badges li { padding: 0 10px 0 0; }
#raymote .store-badges img { display: block; height: 54px; width: auto; }

.warranty { aspect-ratio: 6824 / 2639; background: url('assets/warranty-install.png') center/cover no-repeat; color: var(--navy); overflow: hidden; padding: 0; position: relative; }
.warranty .container { inset: 0; max-width: none; padding: 0; position: absolute; text-align: center; width: 100%; }
.warranty img { left: 50%; max-width: none; position: absolute; top: 52%; transform: translate(-50%, -50%); width: clamp(280px, 28vw, 540px); }
.warranty h2 { bottom: 5%; color: var(--navy); font-size: clamp(1.25rem, 3vw, 2.1rem); font-weight: 700; left: 0; line-height: 1.1; margin: 0 auto; max-width: 100%; padding: 0 28px; position: absolute; right: 0; text-transform: uppercase; }

@media (max-width: 760px) {
  .warranty { aspect-ratio: auto; background-position: 42% center; min-height: 540px; }
  .warranty .container { min-height: inherit; position: relative; }
  .warranty img { max-width: min(68vw, 320px); top: 49%; }
  .warranty h2 { bottom: 6%; padding: 0 20px; }
  .warranty { padding: 0; }
}

/* Keep product renders and their captions aligned despite different aspect ratios. */
.product-section { background: #eee; color: var(--navy); text-shadow: none; }
#products .row { display: flex; flex-wrap: wrap; }
#products .col-sm-6 { align-items: center; display: flex; flex-direction: column; }
#products .product-image { align-items: center; display: flex; height: 420px; justify-content: center; width: 100%; }
#products .product-image img { max-height: 400px; width: auto; }
#products h2, #products p { color: var(--navy); }
#products h2 { font-size: 18px; line-height: 1.25; margin-bottom: 4px; }
#products p { line-height: 1.4; margin-bottom: 30px; }
#products .product-button { background: transparent; border: 1px solid var(--navy); color: var(--navy) !important; min-width: 170px; }
#products .product-button:hover { background: var(--navy); color: var(--white) !important; }

.site-footer { background: #221f20; color: rgba(255, 255, 255, .65); padding: 55px 20px 40px; }
.site-footer img { display: block; margin: 0 auto 28px; width: 150px; }
.site-footer p { font-size: 12px; margin: 0; }
/* First screen: preserve the template intro layout and adapt it to the supplied artwork. */
.intro .intro-body:before { background: transparent; }
.intro h1 { letter-spacing: .05em; text-transform: uppercase; }
.intro .intro-body p { line-height: 1.65; }

@media (max-width: 767px) {
  #design .row { display: block; }
  #design .design-product-image { margin-top: 30px; }
  #features .col-sm-4 + .col-sm-4 { margin-top: 45px; }
  #raymote .row { display: block; }
  #raymote .showcase { margin-bottom: 40px; }
  #raymote .store-badges img { height: 48px; }
  #products .product-image { height: 320px; }
  #products .product-image img { max-height: 300px; }
  .site-footer img { width: 128px; }
}