/* ==========================================================================
   Base — element defaults driven by tokens.css
   Guide page 7: 60% white/light neutral, 25% charcoal/slate, 15% red.
   White carries the page. Red is emphasis only, never a page background.
   ========================================================================== */

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

body {
  background: var(--hbr-bg);
  color: var(--hbr-text);
  font-family: var(--hbr-font-body);
  font-size: var(--hbr-size-body);
  line-height: var(--hbr-lh-body);
  font-weight: var(--hbr-w-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hbr-font-head);
  color: var(--hbr-text);
  margin: 0 0 var(--hbr-space-4);
  text-wrap: balance;
}

h1 { font-size: var(--hbr-size-h1); line-height: var(--hbr-lh-h1); font-weight: var(--hbr-w-extrabold); }
h2 { font-size: var(--hbr-size-h2); line-height: var(--hbr-lh-h2); font-weight: var(--hbr-w-bold); }
h3 { font-size: var(--hbr-size-h3); line-height: var(--hbr-lh-h3); font-weight: var(--hbr-w-bold); }
h4 { font-size: var(--hbr-size-h4); line-height: var(--hbr-lh-h4); font-weight: var(--hbr-w-semibold); }

p { margin: 0 0 var(--hbr-space-4); }
p:last-child { margin-bottom: 0; }

/* Links inherit by default. Red is CTA and accent only (guide page 7), so a
   blanket red link rule would turn the nav and the footer red — it did, and
   that is why this inherits. Use .hbr-link for a deliberate red inline link. */
a { color: inherit; text-decoration: none; transition: color var(--hbr-duration) var(--hbr-ease); }
a:hover { color: var(--hbr-accent); }

.hbr-link { color: var(--hbr-accent); text-decoration: underline; text-underline-offset: 3px; }
.hbr-link:hover { color: var(--hbr-red-hover); }

/* Visible focus. Never remove it — the guide's accessibility floor. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--hbr-red-focus);
  outline-offset: 2px;
}

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

/* --- Layout helpers ------------------------------------------------------ */

.hbr-container {
  width: 100%;
  max-width: var(--hbr-container);
  margin-inline: auto;
  padding-inline: var(--hbr-gutter);
}
.hbr-container--wide { max-width: var(--hbr-container-wide); }

.hbr-section { padding-block: var(--hbr-section-y); }

/* Ground treatments. These are how the 60/25/15 balance gets enforced:
   most sections are --light or --alt, few are --dark, none are red. */
.hbr-section--light { background: var(--hbr-bg); }
.hbr-section--alt   { background: var(--hbr-bg-alt); }
.hbr-section--dark  { background: var(--hbr-bg-dark); color: var(--hbr-text-on-dark); }

.hbr-section--dark h1,
.hbr-section--dark h2,
.hbr-section--dark h3,
.hbr-section--dark h4 { color: var(--hbr-text-on-dark); }

/* Roof-pitch diagonal. Guide page 8: "diagonal accents inspired by roof
   pitches". Applied to a section, it cuts the top or bottom edge on an angle. */
.hbr-pitch-top    { clip-path: polygon(0 var(--hbr-pitch-drop), 100% 0, 100% 100%, 0 100%); }
.hbr-pitch-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hbr-pitch-drop)), 0 100%); }

@media (max-width: 767px) {
  :root { --hbr-pitch-drop: 24px; }
}

/* Utilities */
.hbr-eyebrow {
  font-family: var(--hbr-font-head);
  font-size: var(--hbr-size-eyebrow);
  line-height: var(--hbr-lh-eyebrow);
  font-weight: var(--hbr-w-semibold);
  color: var(--hbr-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--hbr-space-3);
  display: block;
}
.hbr-lead  { font-size: calc(var(--hbr-size-body) + 2px); color: var(--hbr-text-muted); }
.hbr-muted { color: var(--hbr-text-muted); }

/* Screen-reader only */
.hbr-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}