/* 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);
}

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
}
.topbar .dhi-mark { width: 72px; }
.topbar .wa { font-size: 12px; padding: 9px 16px; }

/* ---- 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 .sub { color: #B7C4D6; font-size: 16px; margin: var(--s-4) 0 var(--s-6); max-width: 38ch; }
.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); }

/* ---- Featured equipment ---- */
.feature { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 600px) { .feature { grid-template-columns: 1fr 1fr; align-items: center; } }
.feature .photo {
  border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
  background: var(--c-mist) url("assets/c185-1.jpg") center / cover no-repeat;
  aspect-ratio: 4 / 3;
}
.feature .photo img { width:100%; height:100%; object-fit: cover; }
.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); }

/* ---- Sticky mobile CTA ---- */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex; gap: var(--s-2); padding: 10px 12px;
  background: rgba(255,255,255,0.96); border-top: 1px solid var(--c-line);
  backdrop-filter: saturate(180%) blur(6px);
}
.sticky-cta .btn { flex: 1; text-align: center; padding: 13px; }
@media (min-width: 760px) { .sticky-cta { display: none; } }
body { padding-bottom: 72px; }
@media (min-width: 760px) { body { padding-bottom: 0; } }