/* Mike's Hydraulics, the live site (started as mockup 4: industrial dark, with the sign).
   Gunmetal and safety yellow, with the shop photo up front
   and a big nameplate so it's clear whose shop this is. */

:root {
  --gunmetal: #2D3236;
  --plate: #383E43;
  --well: #24282C;
  --rule: #50585F;
  --text: #E6E9EB;
  --muted: #B3BBC1;
  --safety: #F2BE22;
  --safety-dark: #D9A70F;
  --hot: #D9473A;
  --sign-red: #B3262A;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
  background: var(--gunmetal);
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--condensed); font-weight: 700; line-height: 1; text-transform: uppercase; }
h2 { font-size: clamp(40px, 5vw, 60px); }
a { color: inherit; }

:focus-visible { outline: 5px solid var(--safety); outline-offset: 5px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.skip { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 15px 20px; background: var(--safety); color: var(--well); }
.skip:focus { top: 20px; }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 30px;
  border: 5px solid transparent;
  border-radius: 0;
  font-family: var(--condensed);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-yellow { background: var(--safety); color: var(--well); }
.btn-yellow:hover { background: var(--safety-dark); }
.btn-outline { border-color: var(--text); color: var(--text); background: transparent; }
.btn-outline:hover { background: var(--text); color: var(--well); }

.actions { display: flex; flex-wrap: wrap; gap: 15px; }

/* Header */

.site-header { background: var(--well); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 40px; padding-top: 15px; padding-bottom: 15px; }

.nameplate {
  padding: 5px 15px;
  border: 5px solid var(--safety);
  font-family: var(--condensed);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-left: auto; }
.nav a { padding: 10px 0; font-weight: 600; text-decoration: none; }
.nav a:hover { color: var(--safety); }

.call-short { display: none; }

/* Hero: the shop photo in full color, with a nameplate bolted over its bottom edge */

.hero { padding-bottom: 100px; background: var(--well); }

.hero-photo { position: relative; height: clamp(260px, 36vw, 500px); background: var(--plate); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 10% 40%; }
/* Hazard stripe along the bottom edge */
.hero-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background: repeating-linear-gradient(-45deg, var(--safety) 0 20px, var(--well) 20px 40px);
}

/* Two lines like the painted sign. The negative margin is half the plate's
   height (two lines at 0.9 plus the padding), so it straddles the stripe. */
.plate {
  --plate-size: clamp(42px, 13vw, 130px);
  --plate-pad: 30px;
  --bolt: radial-gradient(circle, rgba(36, 40, 44, 0.45) 0 5px, transparent 6px);
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: calc(-0.9 * var(--plate-size) - var(--plate-pad));
  padding: var(--plate-pad) calc(var(--plate-pad) * 1.6);
  background:
    var(--bolt) left 12px top 12px / 14px 14px no-repeat,
    var(--bolt) right 12px top 12px / 14px 14px no-repeat,
    var(--bolt) left 12px bottom 12px / 14px 14px no-repeat,
    var(--bolt) right 12px bottom 12px / 14px 14px no-repeat,
    var(--safety);
  color: var(--sign-red);
  font-size: var(--plate-size);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.plate span { display: block; }

.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; padding-top: 60px; }
.hero-copy { display: grid; gap: 30px; }
.headline {
  max-width: 10em;
  font-family: var(--condensed);
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.lead { max-width: 30em; font-size: 25px; line-height: 1.45; color: var(--muted); }

.gauge-figure { display: grid; gap: 20px; justify-items: center; }
.gauge { width: min(100%, 450px); min-width: 300px; height: auto; }
.gauge-figure figcaption { max-width: 20em; color: var(--muted); text-align: center; }

.g-face { fill: var(--well); stroke: var(--rule); stroke-width: 10; }
.g-arc, .g-red { fill: none; stroke-width: 5; }
.g-arc { stroke: var(--muted); }
.g-red { stroke: var(--hot); stroke-width: 10; }
.g-ticks line { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.g-ticks .g-major { stroke: var(--text); stroke-width: 5; }
.g-nums text { fill: var(--text); font-family: var(--condensed); font-size: 35px; font-weight: 700; text-anchor: middle; }
.g-unit { fill: var(--muted); font-family: var(--condensed); font-size: 25px; font-weight: 600; text-anchor: middle; letter-spacing: 0.04em; }
.g-hub { fill: var(--plate); stroke: var(--safety); stroke-width: 5; }

/* The one moment of motion: the needle climbs to 3,000 PSI as the page opens */
.needle {
  fill: var(--safety);
  transform-origin: 200px 200px;
  transform: rotate(27deg);
  animation: needle-up 1800ms cubic-bezier(0.2, 1.15, 0.4, 1) 400ms both;
}
@keyframes needle-up {
  from { transform: rotate(-135deg); }
  to { transform: rotate(27deg); }
}

/* Section headings get a yellow bar, like a stencilled plate */

.bar-heading { padding-left: 20px; border-left: 10px solid var(--safety); }

/* Services: a spec sheet, not a card grid */

.services { padding: 100px 0; background: var(--gunmetal); }
.services .bar-heading { margin-bottom: 50px; }

.spec { width: 100%; border-collapse: separate; border-spacing: 0 5px; }
.spec thead th { padding: 0 25px 10px; color: var(--muted); font-size: 20px; font-weight: 600; text-align: left; }
.spec tbody th, .spec td { padding: 25px; background: var(--plate); text-align: left; vertical-align: middle; }
.spec tbody th {
  width: 30%;
  font-family: var(--condensed);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.spec td:last-child { width: 20%; color: var(--safety); font-weight: 600; }
.spec-icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
  vertical-align: middle;
  fill: none;
  stroke: var(--safety);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--safety);
}

/* Shop details: where to find it and when it's open */

.visit { padding: 100px 0; background: var(--well); }
.visit .bar-heading { margin-bottom: 50px; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.panel { display: grid; align-content: start; gap: 25px; padding: 40px; background: var(--plate); }
.panel h3 { font-size: 35px; }
address { font-size: 25px; font-style: normal; font-weight: 600; line-height: 1.4; }
.phone-link { font-family: var(--condensed); font-size: 35px; font-weight: 700; color: var(--safety); text-decoration: none; }
.phone-link:hover { text-decoration: underline; }
.hours { display: grid; gap: 15px; font-size: 25px; }
.hours div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 20px; }
.hours dt { color: var(--muted); }
.hours dd { font-weight: 600; text-align: right; }
.find { color: var(--muted); }
.panel .btn { justify-self: start; }

/* Footer */

.site-footer { padding: 50px 0; background: var(--gunmetal); border-top: 5px solid var(--safety); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.copyright { font-size: 18px; color: var(--muted); }

/* Smaller screens */

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .gauge-figure { justify-self: start; justify-items: start; }
  .gauge-figure figcaption { text-align: left; }
  .visit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr { margin-bottom: 15px; padding: 25px; background: var(--plate); }
  .spec tbody th, .spec td { padding: 0; background: none; }
  .spec tbody th { width: auto; margin-bottom: 15px; white-space: normal; }
  .spec td + td { margin-top: 15px; }
  .spec td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 18px; font-weight: 500; }
  .spec td:last-child { width: auto; }
}

@media (max-width: 900px) {
  .nav { order: 3; width: 100%; margin-left: 0; gap: 10px 25px; }
  .header-call { margin-left: auto; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .header-row { column-gap: 20px; }
  .nameplate { font-size: 20px; }
  .call-long { display: none; }
  .call-short { display: inline; }
  .services, .visit { padding: 60px 0; }
  .hero { padding-bottom: 60px; }
  .hero-grid { padding-top: 40px; }
  .plate { --plate-pad: 20px; }
  .visit .bar-heading { margin-bottom: 30px; }
  .panel { padding: 25px; }
}

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