/* Muryn Mechanical — ported from design_handoff_muryn_mechanical/.
   Design values live in the tokens below; nothing else should hardcode a colour. */

:root {
  /* Colour */
  --ink:            #0d1014;  /* page background, review cards */
  --ink-raised:     #11151a;  /* services, reviews, contact rows */
  --ink-deep:       #0a0c0f;  /* footer */
  --gold:           #d8a94b;
  --gold-hover:     #f0c877;
  --gold-contrast:  #14100a;  /* text on gold */
  --bone:           #f7f2e8;  /* headings */
  --bone-body:      #f2ede4;  /* base text */
  --muted:          #b7b0a3;  /* ledes */
  --muted-dim:      #a49d91;  /* card body */
  --quote:          #c9c2b5;
  --label:          #8d8578;  /* eyebrows, labels */
  /* Design spec says #6f6961, which is 3.61:1 on --ink-deep and fails AA at 13px.
     Nudged up to 4.68:1. Visually indistinguishable, and the footer fine print is
     where the licensed-and-insured claim lives — it should be readable. */
  --footer-dim:     #827b71;

  --hairline:       rgba(242, 237, 228, 0.09);
  --card-border:    rgba(242, 237, 228, 0.1);
  --rule:           rgba(242, 237, 228, 0.12);
  --ghost-border:   rgba(242, 237, 228, 0.3);

  --gold-line:      rgba(216, 169, 75, 0.22);  /* header border */
  --gold-line-mid:  rgba(216, 169, 75, 0.45);  /* pill */

  /* The parchment discs from the design handoff are gone. The logo art is drawn for
     a dark ground — keyed to transparent (see scripts/build-assets.mjs) it sits on
     the ink directly at full contrast. Multiplying it over parchment was what made
     it look washed out. A soft gold glow replaces the disc as the hero anchor. */
  --logo-glow: radial-gradient(circle at 50% 50%,
                 rgba(216, 169, 75, 0.20) 0%,
                 rgba(216, 169, 75, 0.06) 55%,
                 rgba(216, 169, 75, 0) 72%);

  /* Type */
  --display: Staatliches, Impact, "Haettenschweiler", sans-serif;
  --body: Barlow, system-ui, -apple-system, Segoe UI, sans-serif;

  /* Layout */
  --measure: 1240px;
  --gutter: 28px;
  --radius: 2px;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone-body);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Set globally so anything added later never renders browser-default blue. */
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); }
a:focus-visible,
.skip-link:focus {
  outline: 2px solid var(--gold-hover);
  outline-offset: 3px;
}

img { max-width: 100%; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

.gold { color: var(--gold); }
.tabular { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--gold-contrast);
  padding: 12px 18px; font-family: var(--display); font-size: 18px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ───────────── Header ───────────── */

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 12px var(--gutter);
  background: rgba(13, 16, 20, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-line);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-badge {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex: none;
}
.brand-badge img { height: 54px; width: auto; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--display); font-size: 22px; letter-spacing: 0.06em;
  color: var(--bone-body); text-transform: uppercase;
}
.brand-place {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--label); margin-top: 4px;
}

.header-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; min-height: 44px;
  background: var(--gold); color: var(--gold-contrast);
  font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}
.header-cta:hover { background: var(--gold-hover); color: var(--gold-contrast); }
.header-cta-label {
  font-family: var(--display); font-size: 19px; letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ───────────── Hero ───────────── */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center; gap: 56px;
  padding: 80px var(--gutter) 88px;
  max-width: var(--measure); margin: 0 auto;
}

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; margin: 0 0 26px;
  border: 1px solid var(--gold-line-mid); border-radius: 999px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}

.hero h1 {
  font-size: clamp(40px, 6.6vw, 96px);
  line-height: 0.92; letter-spacing: 0.01em;
  color: var(--bone); text-transform: uppercase;
  text-wrap: balance; margin: 0 0 22px;
}

.lede {
  font-size: 19px; line-height: 1.55; color: var(--muted);
  max-width: 46ch; margin: 0 0 34px; text-wrap: pretty;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 30px; min-height: 44px;
  font-family: var(--display); font-size: 24px; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: var(--radius);
}
.btn-primary { background: var(--gold); color: var(--gold-contrast); }
.btn-primary:hover { background: var(--gold-hover); color: var(--gold-contrast); }
.btn-ghost { border: 1px solid var(--ghost-border); color: var(--bone-body); }
.btn-ghost:hover { border-color: var(--gold-hover); color: var(--gold-hover); }

.hero-art { display: flex; justify-content: center; }

.hero-logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 500px; aspect-ratio: 1;
  background: var(--logo-glow);
}
.hero-logo img { width: 100%; height: auto; display: block; }

/* ───────────── Services ─────────────
   Replaces the design handoff's 01/02/03 card grid. Three numbered cards with
   equal-length blurbs is the house style of every generated marketing page going,
   and it read as exactly that. A statement plus a plain list of real work reads
   like a shop's sign instead — and every line is indexable text that doubles as
   the Google Business Profile services list. */

.services {
  background: var(--ink-raised);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.services-inner {
  max-width: var(--measure); margin: 0 auto;
  padding: 72px var(--gutter) 76px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px; align-items: start;
}
.services-head h2 {
  font-size: clamp(38px, 4.4vw, 60px); line-height: 0.98; letter-spacing: 0.02em;
  color: var(--bone); text-transform: uppercase; margin: 0;
}
.services-head .eyebrow { color: var(--gold); margin-bottom: 16px; }

.service-list {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 40px;
}
.service-list li {
  break-inside: avoid;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--hairline);
  font-size: 17px; color: var(--bone-body);
  position: relative;
}
/* Square gold tick rather than a bullet — matches the 2px-radius, no-round-corners
   rule the rest of the page follows. */
.service-list li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  background: var(--gold);
}

@media (max-width: 520px) {
  .service-list { columns: 1; }
}

/* ───────────── Photo band ───────────── */

.band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0; align-items: stretch;
}
/* Two photos in this band now, so they share the row and must crop to a
   common height — one is landscape and one is portrait. */
.band-photo {
  width: 100%; height: 100%; max-height: 420px; min-height: 300px;
  object-fit: cover; display: block;
}
.band-copy {
  padding: 48px 56px; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
/* Shared by the services and racing bands too — keep it here, it is not
   band-specific despite living in this block. */
.eyebrow {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--label); margin: 0 0 18px;
}
.band-statement {
  font-family: var(--display); font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12; letter-spacing: 0.02em; color: var(--bone);
  text-transform: uppercase; margin: 0 0 20px; text-wrap: balance;
}
.band-body { font-size: 17px; line-height: 1.6; color: var(--muted-dim); margin: 0; }

/* ───────────── Racing ─────────────
   Sits after the reviews, not next to the lift band: two contained landscape
   photos back to back read as the same device twice, and the race car competed
   with the shop photo instead of adding to it. Down here it also lands right
   under Paul Genovese's review, which raises the racing unprompted — the review
   sets it up and the band pays it off.

   Full-bleed with the copy overlaid, so it is visibly a different treatment from
   the framed shop photo. The scrim doubles as cover for a soft source image. */

.racing {
  position: relative;
  border-bottom: 1px solid var(--hairline);
  background: var(--ink-deep);
  overflow: hidden;
}
/* The photo is a cropped backdrop: it fills the band and the copy sits on top of it.
   The band's height comes from the copy, not the image, which is what keeps this
   section from swallowing the page — the uncropped alternative was proportionally
   half again as tall. `cover` crops top and bottom rather than the sides, so the run
   down the strip survives; object-position keeps the car off the vertical centre.

   Because the copy drives the height, this needs no breakpoint: the image covers
   whatever height the text ends up at, on any screen. */
.racing-figure {
  position: absolute; inset: 0; margin: 0; line-height: 0;
}
.racing-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  display: block;
}

/* Two scrims: a flat wash knocking the whole image back, and a vertical gradient so
   the text always has something dark under it. Also flatters a soft source. */
.racing::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,12,15,0.50) 0%, rgba(10,12,15,0.74) 60%, rgba(10,12,15,0.92) 100%),
    rgba(10, 12, 15, 0.24);
}
.racing-inner {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto;
  padding: 116px var(--gutter) 112px;
  text-align: center;
}
.racing h2 {
  font-size: clamp(28px, 4.2vw, 58px); line-height: 1.0; letter-spacing: 0.02em;
  color: var(--bone); text-transform: uppercase; margin: 0 0 18px;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
}
.racing .eyebrow { margin-bottom: 14px; color: var(--gold); }
.racing-body {
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--bone-body);
  margin: 0 auto 22px; max-width: 50ch; text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}
.racing-link {
  margin: 0;
  font-family: var(--display); font-size: 20px; letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ───────────── Reviews ───────────── */

.reviews { background: var(--ink-raised); border-top: 1px solid var(--hairline); }
.reviews-inner { max-width: var(--measure); margin: 0 auto; padding: 80px var(--gutter) 88px; }

.reviews-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px; margin-bottom: 44px;
}
.reviews-head h2 {
  font-size: clamp(38px, 4.4vw, 62px); line-height: 0.98;
  letter-spacing: 0.02em; color: var(--bone); text-transform: uppercase;
}
.rating { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.rating-score { font-family: var(--display); font-size: 52px; line-height: 1; color: var(--gold); }
.rating-detail { display: flex; flex-direction: column; gap: 5px; }
.rating-count {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}
.reviews-head .stars { font-size: 19px; }

.stars { color: var(--gold); letter-spacing: 0.14em; }

.review-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;
}
.review {
  display: flex; flex-direction: column; margin: 0;
  padding: 30px 28px; background: var(--ink);
  border: 1px solid var(--card-border);
}
.review .stars { font-size: 15px; margin: 0 0 18px; }
.review blockquote {
  font-size: 16px; line-height: 1.62; color: var(--quote);
  margin: 0 0 24px; text-wrap: pretty;
}
.review figcaption {
  margin-top: auto;
  font-family: var(--display); font-size: 21px; letter-spacing: 0.06em;
  color: var(--bone); text-transform: uppercase;
}

/* ───────────── Fabrication strip ─────────────
   Deliberately not a full section: same ink-deep ground as the racing band above and
   no border between them, so it reads as evidence for that sentence rather than a
   new topic. The page does not need another headline.

   The 1px gap is the divider, the same trick the services grid uses — the grid's own
   background shows through, which keeps the dividers behaving when it stacks. */

.fab {
  background: var(--ink-deep);
  padding: 0 0 4px;
}
.fab-label {
  max-width: var(--measure); margin: 0 auto;
  padding: 30px var(--gutter) 20px;
  color: var(--gold);
}
.fab-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--hairline);
}
.fab-strip img {
  width: 100%; height: 300px; object-fit: cover; display: block;
}

/* Quoted reviews are only as credible as a reader's ability to go and check them.
   This is the check. */
.reviews-link {
  margin: 30px 0 0;
  font-family: var(--display); font-size: 20px; letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ───────────── Contact ───────────── */

.contact {
  max-width: var(--measure); margin: 0 auto;
  padding: 88px var(--gutter) 96px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px; align-items: center;
}
.contact h2 {
  font-size: clamp(44px, 5vw, 72px); line-height: 0.95; letter-spacing: 0.02em;
  color: var(--bone); text-transform: uppercase; margin: 0 0 18px;
}
.contact .lede { max-width: 40ch; margin: 0; }

/* Natural aspect ratio, never object-fit cover — see the note in index.html.
   Capped so it supports the call to action rather than competing with it. */
.contact-portrait { margin: 0; display: flex; justify-content: center; }
.contact-portrait img {
  width: 100%; max-width: 340px; height: auto; display: block;
  border: 1px solid var(--card-border);
}

.details {
  display: flex; flex-direction: column; gap: 1px; margin: 0;
  background: var(--rule); border: 1px solid var(--rule);
}
.detail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 22px 26px; background: var(--ink-raised);
}
.detail-row dt {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--label);
}
.detail-row dd {
  margin: 0;
  font-family: var(--display); font-size: 30px; letter-spacing: 0.04em;
  color: var(--bone); text-transform: uppercase; text-align: right;
}

/* Email is deliberately quieter than the phone number — body face, lowercase,
   smaller. Call and text are the business's real contact route; this is the
   alternative for people who'd rather write. */
/* Needs the `dd` in the selector to out-specify `.detail-row dd` above. */
.detail-row dd.detail-email {
  font-family: var(--body); font-size: 17px; font-weight: 500;
  letter-spacing: 0; text-transform: none; word-break: break-word;
}

/* ───────────── Footer ───────────── */

.site-footer {
  background: var(--ink-deep); border-top: 1px solid var(--hairline);
  padding: 34px var(--gutter);
}
.footer-inner {
  max-width: var(--measure); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
}
.footer-name {
  font-family: var(--display); font-size: 18px; letter-spacing: 0.1em;
  color: var(--label); text-transform: uppercase;
}
.footer-social {
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
}
.footer-fine { font-size: 13px; color: var(--footer-dim); }

/* Quieter than the Facebook link — a credit, not a call to action. The other client
   sites dim theirs with opacity: .65; --footer-dim is already only just over AA, so
   inheriting the colour is as quiet as this one can safely go. */
.site-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-credit a:hover { color: var(--gold-hover); }

/* ───────────── Narrow screens ─────────────
   The design has no breakpoints — every multi-column area uses auto-fit/minmax and
   collapses on its own. These two rules only undo padding that reads as a stray
   indent once the grids are single-column. */

@media (max-width: 640px) {
  .service-list { columns: 1; }
  .band-copy { padding: 40px var(--gutter); }
}

/* 116px of vertical padding is generous on a phone, where the copy already fills
   most of the band. The image still covers whatever height results. */
@media (max-width: 640px) {
  .racing-inner { padding: 72px var(--gutter) 68px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}