/* Moe's Mobile Detailing, homepage mockup.

   This is the WEBSITE MOCKUP (HOMEPAGE) panel of brand/brand-kit-3.0.png,
   built as a page. It is one to one with that panel on purpose: the layout,
   the order, the proportions and the wording are the captain's, not mine.

   Every number below was measured off the panel. The panel is 496 by 215 in
   the kit's own pixels, which is 2.307 to 1, so a hero 1440 wide is 624 tall.
   Positions are written as percentages of that panel so they hold at any size.

   Colours, spacing and radius come from tokens.css. Nothing is restated here. */

@import url("tokens.css");

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--panel-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

/* The blue the kit sets text in on a dark ground. It is not Royal Blue: the
   panel's own pixels are lighter than that, and Royal Blue on this ground
   measures 2.5 to 1, which no one could read. Mixed from the two palette
   blues so the page still holds to six colours. Measures 5.9 to 1. */
:root {
  --hero-blue: color-mix(in srgb, var(--royal) 55%, var(--ice));
  --hero-inset: 3.6%; /* the panel's own left and right margin */
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* the panel's own proportion, 496 by 215 in the kit's pixels */
  aspect-ratio: 2.307 / 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("img/hero-car.webp");
  background-size: 132% auto;
  background-position: 86% 64%;
  background-repeat: no-repeat;
  /* The kit shoots this car dark and hard, wet ground, bright edges. Moe's
     own frame was taken in daylight, so it is graded toward that here rather
     than swapped for something that is not his. */
  filter: contrast(1.35) brightness(1.1) saturate(0.8);
}

/* Navy over the photograph, heavy on the left where the words sit and
   thinning to the right so the car stays in the picture. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      94deg,
      rgba(3, 11, 22, 0.99) 0%,
      rgba(4, 15, 30, 0.97) 30%,
      rgba(6, 22, 42, 0.86) 44%,
      rgba(8, 28, 52, 0.58) 60%,
      rgba(10, 32, 58, 0.3) 78%,
      rgba(10, 32, 58, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 11, 22, 0.9) 0%,
      rgba(3, 11, 22, 0.3) 26%,
      rgba(3, 11, 22, 0) 46%
    ),
    linear-gradient(0deg, rgba(3, 11, 22, 0.5) 0%, rgba(3, 11, 22, 0) 26%),
    linear-gradient(0deg, rgba(12, 35, 64, 0.22), rgba(12, 35, 64, 0.22));
}

.hero__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--hero-inset);
}

/* ------------------------------------------------------------------- nav */

.nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-top: clamp(21px, 1.806vw, 26px);
  padding-bottom: var(--s3);
}

.nav__logo img {
  height: clamp(59px, 5vw, 72px);
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(39px, 3.333vw, 48px);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav__links a {
  font-size: clamp(10.7px, 0.903vw, 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  transition: color 120ms linear;
}

.nav__links a:hover {
  color: var(--ice);
}

.nav__book {
  margin-left: clamp(39px, 3.333vw, 48px);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: clamp(11.5px, 0.972vw, 14px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--r-tile);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 140ms linear, border-color 140ms linear;
}

.btn--fill {
  background: var(--royal);
  color: var(--white);
}

.btn--fill:hover {
  background: color-mix(in srgb, var(--royal) 84%, var(--white));
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.62);
}

.btn--outline:hover {
  border-color: var(--white);
}

.btn--nav {
  height: clamp(41px, 3.472vw, 50px);
  padding: 0 clamp(21px, 1.806vw, 26px);
  font-size: clamp(10.2px, 0.868vw, 12.5px);
}

.btn--hero {
  height: clamp(45px, 3.819vw, 55px);
  padding: 0 var(--s4);
  min-width: clamp(193px, 16.389vw, 236px);
}

.hero__actions .btn--fill {
  min-width: clamp(220px, 18.681vw, 269px);
}

/* ------------------------------------------------------------ hero words */

.hero__body {
  display: flex;
  align-items: center;
}

.hero__copy {
  max-width: 50%;
}

.hero__eyebrow {
  margin: 0;
  font-size: clamp(12.3px, 1.042vw, 15px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-blue);
}

.hero__headline {
  margin: clamp(15px, 1.25vw, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(39px, 3.333vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--white);
}

.hero__headline span {
  display: block;
  color: var(--hero-blue);
}

.hero__lede {
  margin: clamp(20px, 1.667vw, 24px) 0 0;
  max-width: 30em;
  font-size: clamp(14.7px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--silver);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: clamp(23px, 1.944vw, 28px);
}

/* ----------------------------------------------------------------- strip */

.strip {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 14, 28, 0.5);
}

.strip__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 25px var(--hero-inset) 25px;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
}

.strip__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 0.833vw, 12px);
  align-items: center;
}

.strip__item svg {
  width: clamp(46px, 3.889vw, 56px);
  height: clamp(46px, 3.889vw, 56px);
  color: var(--white);
  flex: none;
}

.strip__item p {
  margin: 0;
}

.strip__item b {
  display: block;
  font-size: clamp(13.1px, 1.111vw, 16px);
  font-weight: 700;
  letter-spacing: 0.055em;
  white-space: nowrap;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--white);
}

.strip__item span {
  display: block;
  font-size: clamp(12.3px, 1.042vw, 15px);
  line-height: 1.45;
  color: var(--silver);
}

/* ------------------------------------------------------------- narrower */

@media (max-width: 1180px) {
  .hero {
    aspect-ratio: auto;
  }

  .hero__copy {
    max-width: 60%;
  }

  .hero__body {
    padding-top: 7%;
    padding-bottom: 9%;
  }

  .hero__headline {
    font-size: 40px;
  }
}

@media (max-width: 900px) {
  .nav__links,
  .nav__book {
    display: none;
  }

  .nav {
    padding-top: var(--s4);
    padding-bottom: var(--s3);
  }

  .hero__photo {
    background-position: 70% 58%;
  }

  .hero__photo {
    background-size: cover;
    background-position: 78% 62%;
  }

  .hero__photo::after {
    background:
      linear-gradient(
        180deg,
        rgba(4, 14, 28, 0.9) 0%,
        rgba(5, 18, 34, 0.82) 40%,
        rgba(7, 25, 46, 0.5) 72%,
        rgba(7, 25, 46, 0.42) 100%
      ),
      linear-gradient(0deg, rgba(12, 35, 64, 0.22), rgba(12, 35, 64, 0.22));
  }

  .hero__copy {
    max-width: none;
  }

  .hero__headline {
    font-size: 34px;
  }

  .strip__inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--s4) var(--s3);
    padding-top: var(--s4);
    padding-bottom: var(--s4);
  }

  .strip__item {
    flex: 0 0 calc(50% - var(--s2));
  }
}

@media (max-width: 560px) {
  :root {
    --hero-inset: var(--s3);
  }

  .hero__headline {
    font-size: 29px;
  }

  .hero__lede {
    font-size: 16px;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .strip__item {
    flex: 0 0 100%;
  }

  .nav__logo img {
    height: 52px;
  }
}