/* =====================================================================
   Pug IT Solution — base & typography
   ---------------------------------------------------------------------
   Element defaults and the type scale every page writes its text in, on
   top of the foundation shared with the admin panel
   (ui/shared/static/css/foundation.css: box model, selection, focus ring,
   skip link, reduced motion).
   Pages carry structure and content only: not a single inline style
   attribute and not one <style> element, which is also why the server can
   send a style-src policy without 'unsafe-inline'.
   ===================================================================== */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a {
  color: var(--gold-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: #FFF0C4; }

.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--text);
}

.display { font-size: clamp(44px, 6.4vw, 82px); }
.h1 { font-size: clamp(38px, 5.2vw, 64px); }
.h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; }
.h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -0.025em; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--text-soft);
}

.small { font-size: 15px; line-height: 1.6; }

/* Mono capitals used for short factual rows, e.g. under the hero headline */
.meta-row {
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(201, 162, 39, 0.7);
}

/* The quiet second voice: platinum instead of gold */
.eyebrow--alt { color: var(--platinum); }
.eyebrow--alt::before {
  background: var(--platinum);
  box-shadow: 0 0 12px 2px rgba(195, 203, 214, 0.45);
}

.eyebrow--green { color: var(--green); }
.eyebrow--green::before {
  background: var(--green);
  box-shadow: 0 0 12px 2px rgba(111, 207, 151, 0.6);
}

.eyebrow--danger { color: var(--danger); }
.eyebrow--danger::before {
  background: var(--danger);
  box-shadow: 0 0 12px 2px rgba(224, 108, 91, 0.6);
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---------------------------------------------------------------------
   Reduced motion: no smooth scrolling. The animations and transitions are
   cut by foundation.css.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body { font-size: 16px; }
}