/* Hallmark · genre: editorial · macrostructure: Manifesto (explicit client request — repeats Get Rite Auto Services' macrostructure by name; differentiated via nav/footer archetype, monochrome custom theme, and content)
 * nav: N7 Brutal slab · footer: Ft5 Statement
 * enrichment: E8 Hero photography (single high-contrast B&W bleed photo, per Manifesto's own image convention) — no custom illustration, only 3 real client photos supplied
 * theme: Manifesto (custom monochrome recolour) · accent: neutral (near-white, no chroma) · studied: no
 * motion: horizontal sweep reveal on section entry (view-timeline, progressive enhancement) · dumbbell CTA press feedback · nav slab, no blur/rounded (brutal vocabulary)
 */

@import url("tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Geist:wght@400;500;600&family=Geist+Mono:wght@500&display=swap");

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

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

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.0;
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

p { margin: 0; }

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

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--page-gutter); }

/* ============ NAV — N7 Brutal slab ============ */
.nav-slab {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--page-gutter);
  border-bottom: 2px solid var(--color-ink);
  background: var(--color-paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.slab-mark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: var(--text-lg);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.slab-nav { margin-inline-start: auto; }
.slab-nav ul { display: flex; gap: var(--space-md); }
.slab-nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.slab-nav a:hover { color: var(--color-ink); }
.nav-slab .cta-fill { margin-inline-start: var(--space-md); }

@media (max-width: 40rem) {
  .nav-slab { flex-wrap: wrap; row-gap: var(--space-2xs); }
  .slab-nav ul { gap: var(--space-sm); }
  .nav-slab .cta-fill { margin-inline-start: 0; width: 100%; justify-content: center; order: 3; }
}

/* ============ BUTTONS ============ */
.cta-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.85rem 1.6rem;
  background: var(--color-accent);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cta-fill:hover { transform: translateY(-2px); }
.cta-fill:active { transform: translateY(0); }
.cta-fill--slab { border-radius: 0; }

.cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.85rem 1.6rem;
  border: 1.5px solid var(--color-ink-2);
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cta-outline:hover { border-color: var(--color-ink); background: color-mix(in oklch, var(--color-ink) 8%, transparent); }

/* dumbbell CTA — pure-CSS Tier-A build: two end-plates + a bar, per "make some buttons dumbbells" */
.btn--dumbbell {
  position: relative;
  margin-inline: 1.1rem;
}
.btn--dumbbell::before,
.btn--dumbbell::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 11px;
  height: 38px;
  background: var(--color-accent);
  border-radius: 3px;
  box-shadow: 0 0 0 3px var(--color-paper);
}
.btn--dumbbell::before { left: -20px; }
.btn--dumbbell::after  { right: -20px; }
.btn--dumbbell.cta-outline::before,
.btn--dumbbell.cta-outline::after { background: var(--color-ink-2); }

@media (max-width: 26rem) {
  .btn--dumbbell { margin-inline: 1.3rem; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: clamp(70vh, 88dvh, 92dvh);
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-xl) calc(var(--space-2xl) * 1.2);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  filter: grayscale(1) contrast(1.15) brightness(0.85);
}
.hero__fade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    color-mix(in oklch, var(--color-paper) 97%, transparent) 8%,
    color-mix(in oklch, var(--color-paper) 62%, transparent) 48%,
    color-mix(in oklch, var(--color-paper) 30%, transparent) 78%,
    color-mix(in oklch, var(--color-paper) 55%, transparent) 100%);
}
.hero__body { position: relative; max-width: 46rem; }
.hero__title {
  font-size: var(--text-display);
  line-height: 0.98;
  transform: rotate(-1.6deg);
  transform-origin: left center;
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero__lede {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  max-width: 40ch;
  margin-block-start: var(--space-md);
  line-height: 1.5;
  text-transform: none;
}
.hero__lede strong { color: var(--color-ink); font-weight: 600; }
.hero__ctas { display: flex; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-xl); flex-wrap: wrap; }

@media (max-width: 40rem) {
  .hero { align-items: end; padding-block: var(--space-lg) var(--space-xl); }
  .hero__title { transform: rotate(-1deg); }
  .hero__ctas .cta-fill, .hero__ctas .cta-outline { width: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn--dumbbell { width: calc(100% - 2.2rem); align-self: center; }
}

/* ============ SECTION SCAFFOLDING ============ */
.section { padding-block: var(--space-2xl); }
.section--bleed { background: var(--color-paper-2); }
.section-head { max-width: 34rem; margin-block-end: var(--space-lg); }
.section-head h2 {
  font-size: var(--text-display-s);
  transform: rotate(-1deg);
  transform-origin: left center;
}
.section-head p { color: var(--color-ink-2); font-size: var(--text-md); margin-block-start: var(--space-2xs); text-transform: none; }

@supports (animation-timeline: view()) {
  .reveal-sweep {
    animation: sweep-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}
@keyframes sweep-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-sweep { animation: none; }
}

/* ============ CREDIBILITY / TRAINER ============ */
.trainer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: center; }
.trainer__copy p { font-size: var(--text-md); max-width: 46ch; text-transform: none; }
.trainer__copy p + p { margin-block-start: var(--space-sm); color: var(--color-ink-2); }
.trainer__badges { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-md); }
.trainer__badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  border: 1.5px solid var(--color-ink-2);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.trainer__photo { border-radius: var(--radius-md); overflow: hidden; }
.trainer__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.08); aspect-ratio: 4/5; }

@media (max-width: 56rem) {
  .trainer { grid-template-columns: 1fr; }
  .trainer__photo { order: -1; aspect-ratio: 16/10; }
  .trainer__photo img { aspect-ratio: 16/10; }
}

/* ============ SERVICES — numbered declarations ============ */
.services__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-2xl); align-items: center; }
.services__photo {
  justify-self: center;
  align-self: center;
  transform: rotate(3deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.services__photo:hover,
.services__photo:focus-within { transform: rotate(0deg) scale(1.03); }
.services__photo img {
  width: clamp(14rem, 22vw, 22rem);
  height: clamp(14rem, 22vw, 22rem);
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  border: 1.5px solid var(--color-ink-2);
  box-shadow: 0 1.75rem 3rem -1.25rem oklch(0% 0 0 / 0.55);
}

.services__list { display: grid; gap: 0; }
.services__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  align-items: baseline;
}
.services__item:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.services__num { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-muted); }
.services__name { font-size: var(--text-2xl); text-transform: uppercase; }
.services__desc { grid-column: 2; color: var(--color-ink-2); font-size: var(--text-md); max-width: 52ch; text-transform: none; margin-block-start: var(--space-2xs); }

@media (max-width: 56rem) {
  .services__layout { grid-template-columns: 1fr; }
  .services__photo { margin-block-start: var(--space-lg); }
}

@media (max-width: 40rem) {
  .services__item { grid-template-columns: 3rem minmax(0, 1fr); }
  .services__name { font-size: var(--text-xl); }
  .services__desc { grid-column: 2; }
  .services__photo img { width: clamp(11rem, 45vw, 15rem); height: clamp(11rem, 45vw, 15rem); }
}

/* ============ PROOF / REVIEWS ============ */
.proof__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-block-end: var(--space-xl); }
.proof__stat { border-top: 2px solid var(--color-ink); padding-block-start: var(--space-sm); }
.proof__stat b { display: block; font-family: var(--font-display); font-size: var(--text-3xl); text-transform: uppercase; line-height: 1; }
.proof__stat span { color: var(--color-ink-2); font-size: var(--text-sm); }

.proof__quotes { display: grid; gap: var(--space-lg); }
.proof__quote { max-width: 48rem; }
.proof__quote p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  text-transform: none;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.proof__quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-block-start: var(--space-sm);
}

@media (max-width: 40rem) {
  .proof__stats { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ============ FIND US ============ */
.find-us__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: start; }
.find-us__row { margin-block-end: var(--space-md); }
.find-us__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-block-end: var(--space-3xs); }
.find-us__value { font-size: var(--text-md); text-transform: none; }
.find-us__value a { text-decoration: underline; text-underline-offset: 3px; }
.find-us__map { border: 1.5px solid var(--color-ink-2); aspect-ratio: 4/3; overflow: hidden; filter: grayscale(1) invert(0.92) contrast(0.92); }
.find-us__map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 56rem) {
  .find-us__grid { grid-template-columns: 1fr; }
  .find-us__map { aspect-ratio: 16/10; }
}

/* ============ FOOTER — Ft5 Statement ============ */
.foot-stmt { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-xl); border-top: 2px solid var(--color-ink); }
.foot-stmt__line {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  max-width: 22ch;
  transform: rotate(-1deg);
  transform-origin: left center;
}
.foot-stmt__cta { margin-block-start: var(--space-sm); }
.foot-stmt__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.foot-stmt__meta .wordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
.foot-stmt__links { display: flex; gap: var(--space-md); }
.foot-stmt__links a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.foot-stmt__links a:hover { color: var(--color-ink); }
.foot-stmt__copy { color: var(--color-muted); font-size: var(--text-xs); }

@media (max-width: 40rem) {
  .foot-stmt__meta { flex-direction: column; align-items: flex-start; }
}