/* DHUGGINS INC. — brand.css (canonical, per STYLE_GUIDE.md Direction 01) */

:root {
  /* Color */
  --c-ink:#0F1B2D; --c-navy:#152A47; --c-blue:#3E8DDB;
  --c-mist:#E9F0F8; --c-paper:#F6F8FB; --c-slate:#5A6B83; --c-line:#C9D4E2;

  /* Type */
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'DM Sans', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;

  /* Space (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Radius */
  --r-sm:2px; --r-md:4px; --r-lg:8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin:0; padding:0; }
body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-navy);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
}
h1 { font-size: clamp(34px, 8vw, 56px); letter-spacing: -0.03em; }
h2 { font-size: clamp(24px, 5.5vw, 32px); }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--c-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Eyebrow / labels */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin: 0 0 var(--s-2);
}
.section-rule { border-top: 2px solid var(--c-blue); padding-top: var(--s-2); }

/* Layout */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--s-4); }
.section { padding: var(--s-8) 0; }
.section + .section { border-top: 1px solid var(--c-line); }

/* Logo lockups (CSS mask, tintable) */
.dhi-lockup {
  display: inline-block; width: 150px; aspect-ratio: 1050 / 600;
  background-color: var(--c-blue);
  -webkit-mask: url("assets/dhi-mask.png") center / contain no-repeat;
          mask: url("assets/dhi-mask.png") center / contain no-repeat;
}
.dhi-lockup.on-dark { background-color: var(--c-paper); }
.dhi-mark {
  display: inline-block; width: 84px; aspect-ratio: 771 / 363;
  background-color: var(--c-blue);
  -webkit-mask: url("assets/dhi-mark-mask.png") center / contain no-repeat;
          mask: url("assets/dhi-mark-mask.png") center / contain no-repeat;
}
.dhi-mark.on-dark { background-color: var(--c-paper); }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 22px; border-radius: var(--r-md);
  border: 0; cursor: pointer; text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.btn--accent  { background: var(--c-blue); color: #fff; }
.btn--accent:hover  { background: #2F7BC8; }
.btn--primary { background: var(--c-navy); color: var(--c-paper); }
.btn--primary:hover { background: var(--c-ink); }
.btn--ghost   { background: transparent; color: var(--c-paper); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn--ghost-dark { background: transparent; color: var(--c-navy); box-shadow: inset 0 0 0 1.5px var(--c-navy); }

/* Cards */
.card { background:#fff; border:1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-5); }
.card--tinted { background: var(--c-mist); border-color: transparent; }
.card--dark { background: var(--c-navy); color: var(--c-paper); border-color: transparent; }

/* Meta tag (Space Mono) */
.meta-tag {
  font-family: var(--font-mono); font-weight: 400; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-slate);
}

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: 10px var(--s-4) 6px;
}
.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo .dhi-mark { width: 64px; }
.nav__cta { flex: 0 0 auto; font-size: 12px; padding: 9px 16px; }
.nav__tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  padding: 0 var(--s-4) 10px;
}
.nav__tabs a {
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #B7C4D6; text-decoration: none;
  padding: 4px 0;
  transition: color 120ms ease;
}
.nav__tabs a:hover { color: #fff; }

/* Offset anchored sections so the sticky nav doesn't cover headings */
.hero, .section { scroll-margin-top: 110px; }

/* ---- Quote form ---- */
.quote-form { margin-top: var(--s-5); display: grid; gap: var(--s-4); max-width: 520px; }
.quote-form .field { display: grid; gap: 6px; }
.quote-form label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-slate);
}
.quote-form input, .quote-form textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--c-ink);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 11px 12px; width: 100%;
}
.quote-form input:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(62,141,219,0.15);
}
.quote-form textarea { min-height: 96px; resize: vertical; }
.quote-form button { justify-self: start; cursor: pointer; }

/* ---- Hero ---- */
.hero { background: var(--c-navy); color: var(--c-paper); padding: var(--s-8) 0 var(--s-9); }
.hero .eyebrow { color: var(--c-blue); }
.hero h1 { color: var(--c-paper); }
.hero .lead { color: var(--c-paper); font-size: 18px; font-weight: 500; line-height: 1.5; margin: var(--s-4) 0 var(--s-3); max-width: 44ch; }
.hero .sub { color: #B7C4D6; font-size: 15px; margin: 0 0 var(--s-6); max-width: 44ch; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---- Category groups ---- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.cat h3 { margin-bottom: var(--s-2); }
.cat p { font-size: 13px; color: var(--c-slate); line-height: 1.7; }
.cat p b { color: var(--c-ink); font-weight: 700; }

/* ---- Brands strip ---- */
.brands { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
.brands img { height: 26px; width: auto; opacity: 0.7; filter: grayscale(1); }

/* ---- Equipment card grid (Available Now) ---- */
.equip-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 600px) { .equip-grid { grid-template-columns: 1fr 1fr; } }
.equip-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.equip-card:hover { border-color: var(--c-blue); box-shadow: 0 2px 14px rgba(15,27,45,0.10); }
.equip-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-mist); }
.equip-card__body { padding: var(--s-4); }
.equip-card__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--c-navy); margin-top: var(--s-2); }
.equip-card__spec { font-size: 13px; color: var(--c-slate); margin-top: 4px; }
.equip-card__link { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-blue); margin-top: var(--s-3); display: inline-block; }

/* ---- Featured equipment / unit detail ---- */
.feature { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 600px) { .feature { grid-template-columns: 1fr 1fr; align-items: start; } }
.unit-title { font-size: clamp(26px, 6vw, 38px); }
.gallery__main {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-mist);
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
.gallery__thumb {
  padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  overflow: hidden; background: var(--c-mist); cursor: pointer;
  aspect-ratio: 1 / 1; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb.is-active { border-color: var(--c-blue); box-shadow: inset 0 0 0 2px var(--c-blue); }
.badge {
  display:inline-block; background: var(--c-mist); color: var(--c-navy);
  font-family: var(--font-display); font-weight:700; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; padding:5px 10px; border-radius: var(--r-sm);
}
.spec-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--c-line); font-size:13px; }
.spec-row:last-child { border-bottom:0; }
.spec-row .k { color: var(--c-slate); }
.spec-row .v { color: var(--c-navy); font-weight:600; }

/* ---- How it works ---- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step .n { font-family: var(--font-mono); color: var(--c-blue); font-size: 13px; letter-spacing:0.2em; }
.step h3 { margin: var(--s-2) 0 var(--s-1); }
.step p { font-size: 13px; color: var(--c-slate); }

/* ---- Contact ---- */
.contact-block { font-size: 15px; line-height: 1.9; }
.contact-block .name { font-family: var(--font-display); font-weight: 800; color: var(--c-navy); font-size: 18px; }

/* ---- Footer ---- */
.footer { background: var(--c-ink); color: #9FB0C4; padding: var(--s-7) 0; font-size: 13px; }
.footer .dhi-mark { margin-bottom: var(--s-3); }
.footer a { color: var(--c-blue); }


/* ---- Documentary photos (category pages, About) ---- */
.photo-figure { margin: var(--s-5) 0 0; }
.photo-figure img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.photo-figure figcaption {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-slate); margin-top: 8px;
}