/* Manji Motorsports home page. Values copied from the approved design ("Mix 2 with new
   photos"); see apps/site/README.md before changing anything visual. */
:root {
  --bg: #0a0a0b;
  --bg-alt: #111113;
  --card: #17171a;
  --border: #2a2a2e;
  --border-strong: #4a4a50;
  --text: #f2efea;
  --text-2: #bdb9b2;
  --text-3: #cfcbc4;
  --text-on-photo: #e4e1db;
  --muted: #8e8a84;
  --accent: #7c3aed;
  --accent-text: #c4a5ff;
  --error: #ffb4b4;
  /* Content runs nearly edge to edge: the side gutter grows with the screen, and only
     ultra-wide monitors get a cap. */
  --gutter: clamp(32px, 4vw, 96px);
  --content-max: 2400px;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--text);
}
a:hover {
  color: #ffffff;
}
input,
textarea,
button {
  font: inherit;
}
input::placeholder,
textarea::placeholder {
  color: #6e6e76;
}
img {
  max-width: 100%;
}

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

.page {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.accent {
  color: var(--accent-text);
}
.muted {
  color: var(--muted);
}

/* ---------- Header ---------- */
.site-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo-link {
  display: flex;
  align-items: center;
}
.logo {
  height: 46px;
  width: auto;
  display: block;
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-link {
  text-decoration: none;
  color: var(--text-3);
  padding: 12px 0;
}
.nav-call {
  text-decoration: none;
  background: var(--accent);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 8px;
}
/* Customer portal sign-in: outline style so Call stays the main action. */
.nav-portal {
  text-decoration: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 11px 17px;
  border-radius: 8px;
  margin-right: -12px;
}
.nav-portal:hover {
  border-color: var(--text);
}

/* ---------- Shared pieces ---------- */
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.section-title {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
}
.section-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 112px var(--gutter);
  display: flex;
  flex-direction: column;
}
.gap-40 {
  gap: 40px;
}
.gap-56 {
  gap: 56px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  border-radius: 8px;
  line-height: 1.6;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  padding: 15px 24px;
}
.btn-primary:hover {
  background: #6d28d9;
  color: #ffffff;
}
.btn-outline-light {
  border: 1px solid var(--text);
  color: var(--text);
  padding: 14px 24px;
}
.btn-outline {
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 14px 24px;
}
.btn-outline:hover {
  border-color: var(--text);
}
.btn-dark {
  background: var(--bg);
  color: #ffffff;
  padding: 16px 26px;
}

/* Photo blocks: photo, dark gradient, text on top. */
.photo-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  background: var(--card);
}
.photo,
.shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.photo {
  display: block;
  object-fit: cover;
  max-width: none;
}
.shade-side {
  background: linear-gradient(
    90deg,
    rgba(10, 10, 11, 0.94) 0%,
    rgba(10, 10, 11, 0.7) 38%,
    rgba(10, 10, 11, 0) 75%
  );
}
.shade-bottom {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 11, 0) 30%,
    rgba(10, 10, 11, 0.6) 62%,
    rgba(10, 10, 11, 0.94) 100%
  );
}

/* ---------- Hero ---------- */
.hero {
  justify-content: center;
  /* Shorter on small screens so the photo does not leave a tall empty band. */
  min-height: clamp(560px, 88vh, 860px);
}
/* The photo text lines up with the content column at every width. */
.hero-copy,
.feature-copy {
  align-self: center;
  width: 100%;
  /* border-box: the content column plus its gutters, like .section-inner. */
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  padding: 64px var(--gutter);
}
.hero-copy {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-copy > * {
  max-width: 760px;
}
.hero-title {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.9;
}
.hero-lead {
  margin: 0;
  font-size: 19px;
  color: var(--text-on-photo);
  max-width: 560px;
}

/* ---------- Statement ---------- */
.statement {
  max-width: 1100px;
  margin: 0 auto;
  padding: 112px 32px;
  text-align: center;
}
.statement p {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.05;
}

/* ---------- From the shop floor ---------- */
.work {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 112px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Fixed column counts so no card is left alone on a row: 1 on phones, 3 from tablets up. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.photo-card {
  justify-content: flex-end;
  min-height: clamp(420px, 44vw, 620px);
  border-radius: 12px;
}
.card-copy {
  box-sizing: border-box;
  position: relative;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-title {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 0.95;
}
.card-text {
  margin: 0;
  font-size: 16px;
  color: var(--text-on-photo);
  max-width: 360px;
}

/* ---------- Purple bar ---------- */
.promise {
  background: var(--accent);
}
.promise-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 72px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.promise-text {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1;
  color: #ffffff;
  max-width: 900px;
}

/* ---------- Review ---------- */
.feature {
  justify-content: flex-end;
  min-height: clamp(460px, 70vh, 700px);
}
.feature-copy {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  max-width: 900px;
}
.review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.review-source {
  color: var(--text-on-photo);
}
.review-link {
  color: var(--accent-text);
  font-weight: 600;
}
.review-link:hover {
  color: #ffffff;
}

/* ---------- What we do ---------- */
.services {
  background: var(--bg);
}
.service-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 7 services: 1 column on phones, 2 on tablets (the last one spans the row), 4 on desktops. */
  grid-template-columns: 1fr;
  gap: 16px;
}
.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-num,
.service-name,
.step-num {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 1;
}
.service-num {
  font-weight: 800;
  font-size: 40px;
  color: var(--accent-text);
}
.service-name {
  font-weight: 700;
  font-size: 28px;
}

/* ---------- How it works ---------- */
.method {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.step-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step-num {
  font-weight: 800;
  font-size: 64px;
  color: var(--accent-text);
}
.step-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.step-text {
  margin: 0;
  color: var(--text-2);
}

/* ---------- Visit ---------- */
.visit {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.visit-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 112px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
}
.visit-info {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 18px;
  font-style: normal;
}
.hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.request-form {
  flex: 1 1 460px;
  display: grid;
  /* Name and phone side by side, the rest full width; one column on phones. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-content: start;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-wide {
  grid-column: 1 / -1;
}
.field label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea {
  box-sizing: border-box;
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 10px 0;
  font-size: 20px;
  min-height: 48px;
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--accent-text);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline-offset: 4px;
}
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-bottom-color: var(--error);
}
.field-error {
  font-size: 14px;
  color: var(--error);
}
.field-error:empty {
  display: none;
}
/* SMS consent: the whole card is the label, so a tap anywhere ticks the box. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.consent:hover {
  border-color: var(--border-strong);
}
.consent:has(input:checked) {
  border-color: var(--accent);
  background: #1b1625;
}
.consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.consent input::after {
  content: '';
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border-left: 2.5px solid #ffffff;
  border-bottom: 2.5px solid #ffffff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
}
.consent input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.consent input:checked::after {
  transform: rotate(-45deg) scale(1);
}
.consent input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
.consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.consent-text a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-text a:hover {
  color: var(--text);
}
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.btn-submit {
  font-size: 16px;
  border: 0;
  padding: 16px 32px;
  min-height: 52px;
  cursor: pointer;
  line-height: 1.25;
}
.btn-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}
.form-status {
  margin: 0;
  font-size: 16px;
}
.form-status:empty {
  display: none;
}
.form-status.is-ok {
  color: var(--accent-text);
  font-weight: 600;
}
.form-status.is-error {
  color: var(--error);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-icon {
  height: 24px;
  width: auto;
  display: block;
}
/* ---------- Grid columns by width ---------- */
@media (min-width: 600px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 768px) {
  .card-grid,
  .step-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .step-grid {
    gap: 32px;
  }
}
@media (min-width: 1200px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .service-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }
  .step-grid {
    gap: 48px;
  }
}

/* ---------- Small screens ----------
   The design is drawn at 1440 px. Below 768 px only the photo text padding shrinks (64 px
   leaves too little room for the copy) and the hero shade reaches further, so the copy
   stays readable over the headlight. */
@media (max-width: 767px) {
  .request-form {
    grid-template-columns: 1fr;
  }
  .main-nav {
    gap: 8px 20px;
  }
  .hero-copy,
  .feature-copy {
    padding: 48px 32px;
  }
  .shade-side {
    background: linear-gradient(
      90deg,
      rgba(10, 10, 11, 0.94) 0%,
      rgba(10, 10, 11, 0.75) 60%,
      rgba(10, 10, 11, 0.35) 100%
    );
  }
}

/* Privacy policy and terms of use */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 16px 96px;
  color: #cfcbc4;
  line-height: 1.6;
}
.legal h1 {
  color: #f2efea;
  margin: 24px 0 8px;
}
.legal h2 {
  color: #f2efea;
  font-size: 1.15rem;
  margin: 32px 0 8px;
}
.legal h3 {
  color: #f2efea;
  font-size: 1rem;
  margin: 20px 0 4px;
}
.legal a {
  color: #c4a5ff;
}
.legal-date {
  color: #8e8a84;
}