/* Moe's Mobile Detailing, style guide.
   Built from brand/brand-kit-3.0.png. Plain CSS, no build step.
   Every colour on this page comes from the six tokens below.
   The three brand element rules near the bottom repeat their colours as
   rgba on purpose, because that block is meant to be copied out on its own. */

/* ---------------------------------------------------------------- tokens */

:root {
  /* the six brand colours, exactly as printed in Brand Kit 3.0 */
  --navy: #0c2340;
  --royal: #0057d8;
  --ice: #6ccbff;
  --white: #ffffff;
  --silver: #b8c2cc;
  --graphite: #2c2f36;

  /* grounds and rules, all drawn from the six above */
  --page: var(--white);
  --panel-dark: #060b14; /* the near black the kit uses behind the brand elements */
  --rule: color-mix(in srgb, var(--silver) 34%, var(--white)); /* hairlines only */
  --muted: color-mix(in srgb, var(--graphite) 72%, var(--silver)); /* secondary text, 7.2 on white */
  --surface: color-mix(in srgb, var(--silver) 16%, var(--white)); /* the one raised surface */
  --rule-dark: rgba(184, 194, 204, 0.22); /* Silver on a dark ground */

  /* spacing, measured off the kit and scaled to this page's column */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 32px;
  --s5: 64px;

  /* radius */
  --r-flat: 0;
  --r-tile: 4px;
  --r-panel: 8px;

  --column: 1120px;

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
}

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

a {
  color: var(--royal);
  text-underline-offset: 3px;
  transition: color 120ms linear;
}

a:hover {
  color: var(--navy);
}

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

.column {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 var(--s4);
}

/* ------------------------------------------------------------- masthead */

.masthead {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  background: var(--navy);
  color: var(--white);
}

.masthead__title {
  position: relative;
  padding: var(--s5) var(--s4) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 460px;
  overflow: hidden;
}

.masthead__photo {
  position: absolute;
  inset: 0;
  background-image: url("img/masthead-rear-quarter.webp");
  background-size: cover;
  background-position: 46% 62%;
}

.masthead__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(6, 11, 20, 0.95) 0%,
    rgba(12, 35, 64, 0.88) 40%,
    rgba(12, 35, 64, 0.6) 72%,
    rgba(12, 35, 64, 0.86) 100%
  );
}

.masthead__inner {
  position: relative;
  max-width: 640px;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice);
  margin: 0 0 var(--s3);
}

.masthead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--white);
}

.masthead__tagline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: var(--s3) 0 0;
  color: var(--white);
}

.masthead__rule {
  width: 72px;
  height: 3px;
  background: var(--ice);
  margin: var(--s3) 0 0;
  border: 0;
}

.masthead__note {
  margin: var(--s4) 0 0;
  max-width: 44ch;
  font-size: 15px;
  color: var(--silver);
}

.masthead__mark {
  padding: var(--s5) var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-left: 1px solid var(--rule-dark);
}

.masthead__mark img {
  width: 232px;
  height: auto;
}

.promise-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice);
  margin: var(--s4) 0 var(--s2);
}

.promise {
  font-size: 19px;
  line-height: 1.45;
  color: var(--white);
  margin: 0;
  max-width: 22ch;
}

.promises {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--navy);
  border-top: 1px solid var(--rule-dark);
}

.promises li {
  list-style: none;
  padding: var(--s3) var(--s2);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white);
  border-left: 1px solid var(--rule-dark);
}

.promises li:first-child {
  border-left: 0;
}

.promises {
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------------------- sections */

.section {
  border-top: 1px solid var(--rule);
  padding: var(--s4) 0;
}

.section:first-of-type {
  border-top: 0;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

.section__lead {
  margin: var(--s2) 0 var(--s4);
  max-width: 66ch;
  font-size: 17px;
  color: var(--graphite);
}

.label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--s3);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--navy);
}

.caption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin: var(--s3) 0 0;
}

.note {
  font-size: 14px;
  color: var(--muted);
  max-width: 74ch;
  margin: var(--s3) 0 0;
}

/* two columns split by a hairline, the way the kit splits its sections */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.split > * + * {
  border-left: 1px solid var(--rule);
  padding-left: var(--s5);
}

.split > *:first-child {
  padding-right: var(--s5);
}

/* --------------------------------------------------------------- colour */

.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s2);
  margin: 0;
  padding: 0;
}

.swatch {
  list-style: none;
}

.swatch__chip {
  aspect-ratio: 1 / 1.05;
  border-radius: var(--r-tile);
}

.swatch__chip--white {
  box-shadow: inset 0 0 0 1px var(--rule);
}

.swatch__hex {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin: var(--s3) 0 0;
}

.swatch__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 2px 0 0;
}

.swatch__role {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: var(--s2) 0 0;
}

.contrast {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s4);
  font-size: 14px;
}

.contrast caption {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: var(--s3);
}

.contrast th,
.contrast td {
  text-align: left;
  padding: 10px var(--s3) 10px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

.contrast th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.contrast td:first-child,
.contrast th:first-child {
  width: 1%;
  white-space: nowrap;
  padding-right: var(--s5);
}

.contrast td:nth-child(2),
.contrast th:nth-child(2) {
  width: 1%;
  padding-right: var(--s5);
}

.contrast td:nth-child(2) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sample {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-tile);
  font-size: 14px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- typography */

.face {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

.face--body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pangram {
  font-size: 19px;
  line-height: 1.5;
  color: var(--graphite);
  margin: var(--s3) 0 0;
  max-width: 26ch;
}

.face-note {
  font-size: 14px;
  color: var(--muted);
  margin: var(--s3) 0 0;
}

.scale {
  margin-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.scale__row {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: var(--s5);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}

.scale__spec {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.scale__spec b {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s1);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

.t-section {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

.t-sub {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--graphite);
  margin: 0;
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
}

.t-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.t-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}

/* ------------------------------------------------------ spacing and radius */

.measures {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s5);
}

.steps {
  margin: 0;
  padding: 0;
}

.steps li {
  list-style: none;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s3);
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.steps li:first-child {
  border-top: 1px solid var(--rule);
}

.bar {
  height: 16px;
  background: var(--royal);
  border-radius: 1px;
}

.step__text {
  font-size: 14px;
  line-height: 1.5;
}

.step__text b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--navy);
  margin-right: var(--s2);
}

.step__text span {
  color: var(--muted);
}

.radii {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  margin: 0;
  padding: 0;
}

.radii li {
  list-style: none;
}

.radius__demo {
  height: 74px;
  background: var(--navy);
}

.radius__demo--round {
  border-radius: 999px;
  width: 74px;
}

.radius__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: var(--s2) 0 0;
}

.radius__text b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--navy);
  display: block;
}

/* ------------------------------------------------------- brand elements */

.elements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.element__panel {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-tile);
  overflow: hidden;
}

/* Gloss line: one specular streak across a near black panel, the way a light
   bar reads on polished paint. The first layer paints the ground back over
   both ends of the streak so it fades out instead of running off the edge. */
.gloss-line {
  background:
    linear-gradient(
      55deg,
      #060b14 0%,
      #060b14 22%,
      rgba(6, 11, 20, 0) 44%,
      rgba(6, 11, 20, 0) 56%,
      #060b14 78%,
      #060b14 100%
    ),
    linear-gradient(
      145deg,
      transparent 49.3%,
      rgba(200, 236, 255, 0.8) 49.8%,
      #ffffff 50%,
      rgba(200, 236, 255, 0.8) 50.2%,
      transparent 50.7%
    ),
    linear-gradient(
      145deg,
      transparent 46.5%,
      rgba(0, 87, 216, 0.34) 50%,
      transparent 53.5%
    ),
    linear-gradient(
      145deg,
      transparent 40%,
      rgba(0, 87, 216, 0.14) 50%,
      transparent 60%
    ),
    #060b14;
}

/* Water wave: two strands, each the visible arc of a large circle whose centre
   sits well outside the panel. One rises from the lower left, one falls from
   the upper right, and they cross twice. The radii are worked out for a panel
   4 wide by 3 tall. Change the ratio and the second radius has to change. */
.water-wave {
  background:
    radial-gradient(
      126.9% 169.2% at 60% 175.3%,
      transparent 0 80%,
      rgba(255, 255, 255, 0.65) 80% 80.5%,
      rgba(108, 203, 255, 0.92) 80.5% 82.4%,
      rgba(108, 203, 255, 0.2) 82.4% 87%,
      transparent 87%
    ),
    radial-gradient(
      115.7% 154.3% at 40% -56.8%,
      transparent 0 80%,
      rgba(0, 87, 216, 0.95) 80% 82.6%,
      rgba(108, 203, 255, 0.16) 82.6% 88%,
      transparent 88%
    ),
    radial-gradient(
      121% 161.3% at 56% 179.7%,
      transparent 0 80%,
      rgba(0, 87, 216, 0.3) 80% 90%,
      transparent 90%
    ),
    linear-gradient(170deg, #0c2340, #061223);
}

/* Reflection gradient: light entering at the top right and falling away to
   near black at the lower left. The standing ground for any dark section. */
.reflection-gradient {
  background:
    linear-gradient(
      212deg,
      rgba(200, 236, 255, 0.5) 0%,
      rgba(108, 203, 255, 0.16) 16%,
      rgba(0, 87, 216, 0.06) 34%,
      transparent 52%
    ),
    linear-gradient(212deg, #1d4f80 0%, #0c2340 46%, #030b16 100%);
}

.code {
  margin: var(--s4) 0 0;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--graphite);
  tab-size: 2;
}

/* ---------------------------------------------------------- photography */

.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
}

.photo {
  margin: 0;
}

.photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-tile);
  background: var(--panel-dark);
}

.photo figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--s2);
}

.direction {
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s5);
}

.direction li {
  list-style: none;
  font-size: 15px;
  padding-left: var(--s3);
  border-left: 2px solid var(--ice);
  line-height: 1.5;
}

/* ------------------------------------------------------------- voice */

.voice {
  margin: 0;
  padding: 0;
}

.voice li {
  list-style: none;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
  align-items: start;
  padding: 10px 0;
  font-size: 17px;
  color: var(--graphite);
}

.voice svg {
  width: 18px;
  height: 18px;
  margin-top: 6px;
  color: var(--navy);
}

.keywords {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px var(--s4);
}

.keywords li {
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--royal);
}

/* -------------------------------------------------------------- logo */

.logo-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s4);
  align-items: stretch;
}

.logo-ground {
  display: grid;
  place-items: center;
  padding: var(--s4);
  border-radius: var(--r-panel);
  min-height: 240px;
}

.logo-ground--navy {
  background: var(--navy);
}

.logo-ground--white {
  background: var(--white);
  border: 1px solid var(--rule);
}

.logo-ground img {
  width: 100%;
  max-width: 250px;
  height: auto;
}

.slot {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 240px;
  padding: var(--s4);
  border: 1px dashed var(--silver);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.slot p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.slot strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s2);
}

.slot em {
  display: block;
  font-style: normal;
  margin-top: var(--s2);
  font-weight: 600;
  color: var(--navy);
}

.logo-captions {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s4);
  margin-top: var(--s2);
}

.logo-captions p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------ footer */

.footer {
  background: var(--navy);
  color: var(--white);
  margin-top: var(--s5);
}

.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s5);
  padding: var(--s4) var(--s4);
  margin: 0;
  list-style: none;
}

.footer__contacts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.footer__contacts svg {
  width: 17px;
  height: 17px;
  color: var(--white);
  flex: none;
}

.footer__status {
  border-top: 1px solid var(--rule-dark);
  padding: var(--s4);
  max-width: 82ch;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--silver);
}

.footer__status strong {
  color: var(--white);
  font-weight: 600;
}

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

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

  .masthead__title {
    min-height: 380px;
    padding: var(--s5) var(--s4);
  }

  .masthead__mark {
    border-left: 0;
    border-top: 1px solid var(--rule-dark);
    padding: var(--s4);
  }

  .promises {
    grid-template-columns: repeat(2, 1fr);
  }

  .promises li {
    border-top: 1px solid var(--rule-dark);
  }

  .swatches {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split > * + * {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: var(--s4);
    margin-top: var(--s4);
  }

  .split > *:first-child {
    padding-right: 0;
  }

  .scale__row {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }

  .measures,
  .elements,
  .photos,
  .logo-row,
  .logo-captions {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .direction {
    grid-template-columns: 1fr;
  }

  .t-display {
    font-size: 44px;
  }
}

@media (max-width: 620px) {
  .column {
    padding: 0 var(--s3);
  }

  .masthead__title {
    padding: var(--s4) var(--s3);
  }

  .masthead__tagline {
    font-size: 12.5px;
    letter-spacing: 0.14em;
  }

  .masthead__mark {
    padding: var(--s4) var(--s3);
  }

  .swatches {
    grid-template-columns: repeat(2, 1fr);
  }

  .radii {
    grid-template-columns: 1fr;
  }

  .keywords {
    grid-template-columns: 1fr;
  }
}

@media print {
  .masthead__photo::after {
    background: rgba(12, 35, 64, 0.9);
  }
}