/* Benson's Plumbing Company — production stylesheet
   Tokens copied from Design System/tokens/*.css (bundled into one file to
   avoid an @import waterfall — see Design System/ for the source of truth). */

:root {
  /* --- Brand core (sampled from the logo) --- */
  --navy-900: #03121f;
  --navy-800: #051c36;
  --navy-700: #0a2b4d;
  --navy-600: #123f6b;
  --navy-400: #4a6b8f;
  --navy-200: #a8bacd;
  --navy-100: #d9e2eb;

  --green-700: #4f7a08;
  --green-600: #659a0d;
  --green-500: #7ebc11;
  --green-400: #96d02f;
  --green-200: #cdeb95;
  --green-100: #eaf7d2;

  --white: #ffffff;
  --paper: #f7f9fa;
  --paper-alt: #eef2f5;
  --line-100: #e2e8ed;
  --line-200: #ccd6de;
  --ink-500: #5b6c78;
  --ink-700: #2c3b47;

  --text-strong: var(--navy-800);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-200);
  --text-link: var(--green-700);
  --text-link-hover: var(--navy-800);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--paper-alt);
  --surface-inverse: var(--navy-800);

  --border-subtle: var(--line-100);
  --border-default: var(--line-200);
  --border-strong: var(--navy-800);

  --action-primary: var(--green-500);
  --action-primary-hover: var(--green-600);
  --action-primary-press: var(--green-700);
  --action-primary-text: var(--navy-900);

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  --size-2xs: 12px;
  --size-xs: 14px;
  --size-sm: 16px;
  --size-md: 18px;
  --size-lg: 22px;
  --size-2xl: 36px;
  --size-5xl: 72px;

  --leading-tight: 0.95;
  --leading-snug: 1.15;
  --leading-normal: 1.5;

  --tracking-display: -0.02em;
  --tracking-caps: 0.12em;
  --tracking-caps-wide: 0.2em;

  --type-hero-font: var(--weight-black) var(--size-5xl) / var(--leading-tight) var(--font-display);
  --type-h2-font: var(--weight-bold) var(--size-2xl) / var(--leading-snug) var(--font-display);
  --type-h3-font: var(--weight-bold) var(--size-lg) / var(--leading-snug) var(--font-display);
  --type-body-font: var(--weight-regular) var(--size-md) / var(--leading-normal) var(--font-body);
  --type-body-sm-font: var(--weight-regular) var(--size-sm) / var(--leading-normal) var(--font-body);
  --type-caption-font: var(--weight-regular) var(--size-xs) / var(--leading-normal) var(--font-body);
  --type-eyebrow-font: var(--weight-bold) var(--size-2xs) / var(--leading-snug) var(--font-mono);
  --type-label-font: var(--weight-medium) var(--size-xs) / var(--leading-snug) var(--font-mono);

  --space-2: 8px;
  --space-5: 24px;
  --card-padding: var(--space-5);

  --radius-sm: 6px;
  --radius-md: 12px;
  --border-width-default: 2px;

  --shadow-hard-sm: 2px 2px 0 var(--navy-800);
  --shadow-hard-md: 4px 4px 0 var(--navy-800);

  --control-height-md: 48px;
  --transition-control: background 0.15s ease, transform 0.15s ease;
  --hover-lift: translate(-2px, -2px);
  --press-translate: translate(0, 0);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-body);
}

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

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

.card {
  background: var(--surface-card);
  padding: var(--card-padding);
  border: var(--border-width-default) solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-md);
}

.card--wide { grid-column: 1 / -1; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-5);
  font: var(--weight-bold) var(--size-sm) / 1 var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: var(--action-primary);
  color: var(--action-primary-text);
  border: var(--border-width-default) solid var(--navy-800);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard-md);
  transition: var(--transition-control);
}
.btn-primary:hover { background: var(--action-primary-hover); color: var(--action-primary-text); transform: var(--hover-lift); }
.btn-primary:active { background: var(--action-primary-press); transform: var(--press-translate); box-shadow: var(--shadow-hard-sm); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 96px;
  padding-bottom: 64px;
}

.hero h1 {
  font: var(--type-hero-font);
  font-size: clamp(40px, 9vw, 72px);
  color: var(--text-strong);
  text-transform: uppercase;
  margin: 0 0 24px;
  max-width: 20ch;
}

.hero-logo { height: 180px; width: 180px; flex-shrink: 0; }

@media (max-width: 900px) {
  .hero { padding-top: 64px; }
  .hero-logo { height: 120px; width: 120px; }
}

.eyebrow {
  font: var(--type-eyebrow-font);
  letter-spacing: var(--tracking-caps-wide);
  margin: 0 0 16px;
}

.hero-cta {
  font: var(--type-h3-font);
  color: var(--text-link);
  text-decoration: none;
  display: block;
  margin: 0 0 16px;
}

.section { padding: 0 0 96px; }

.section-heading {
  font: var(--type-h2-font);
  color: var(--text-strong);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
}

.section-intro {
  font: var(--type-body-font);
  color: var(--text-body);
  max-width: 66ch;
  margin: 0 auto 40px;
  text-align: center;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.card h3 {
  font: var(--type-h3-font);
  color: var(--text-strong);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.card .hook {
  font: var(--type-body-sm-font);
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.card .body {
  font: var(--type-body-sm-font);
  color: var(--text-body);
  margin: 0;
}

.card .detail {
  font: var(--type-caption-font);
  color: var(--text-muted);
  margin: 0 0 8px;
  max-width: 66ch;
}
.card .detail:last-child { margin-bottom: 0; }

.service-area {
  background: var(--surface-inverse);
  padding: 40px 0;
  text-align: center;
}
.service-area .eyebrow { color: var(--green-500); }
.service-area p {
  font: var(--type-body-font);
  color: var(--text-on-dark);
  margin: 0;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 64px;
  padding: 96px 0;
}

.two-col h2 {
  font: var(--type-h2-font);
  color: var(--text-strong);
  text-transform: uppercase;
  margin: 0 0 12px;
  text-align: center;
}

.two-col .hook {
  font: var(--type-body-font);
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 16px;
  text-align: center;
}

.two-col p:not(.hook) {
  font: var(--type-body-font);
  color: var(--text-body);
  margin: 0 0 20px;
}

.two-col .cta-link {
  font: var(--type-eyebrow-font);
  color: var(--text-link);
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  display: block;
  text-align: center;
}

.about {
  background: var(--surface-sunken);
  padding: 96px 0;
}
.about .eyebrow { color: var(--text-link); }
.about h2 {
  font: var(--type-h2-font);
  color: var(--text-strong);
  text-transform: uppercase;
  margin: 0 0 24px;
}
.about p {
  font: var(--type-body-font);
  color: var(--text-body);
  max-width: 66ch;
  margin: 0 0 16px;
}
.about p.quote { font-style: italic; }
.about p.cta { color: var(--text-strong); margin-bottom: 0; }

.contact {
  background: var(--surface-inverse);
  padding: 80px 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
}
.contact .eyebrow { color: var(--text-on-dark-muted); margin-bottom: 12px; }
.contact-phone {
  font: var(--type-h2-font);
  color: var(--text-on-dark);
  text-decoration: none;
}
.contact-address {
  font: var(--type-h3-font);
  color: var(--text-on-dark);
  font-weight: var(--weight-regular);
}

footer p {
  font: var(--type-body-sm-font);
  color: var(--text-muted);
  margin: 0;
}
footer .copyright {
  font: var(--type-label-font);
  color: var(--text-muted);
  letter-spacing: var(--tracking-caps);
}

@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .section-heading, .about h2 { font-size: 28px; }
}