/* ==========================================================================
   REDBIRD FIRE & LIFE SAFETY - SHARED BRAND SYSTEM
   The single source of truth for all five comps. Palette, type, and brand
   primitives live here so every comp is provably the same brand. Comps only
   override composition/layout in their own comp.css. Do not add color, font,
   or aesthetic variants here or anywhere else.
   ========================================================================== */

:root {
  /* Palette (BRAND.md, verbatim hex) */
  --cream:    #F5ECDD;
  --navy:     #12374A;
  --red:      #C84646;
  --charcoal: #292E31;
  --cream-2:  #EFE4D0; /* faint cream step for flat banding, no gradients */
  --navy-2:   #0E2C3B; /* faint navy step for flat banding */
  --line-navy: rgba(18, 55, 74, 0.18);

  /* Type */
  --display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --body:    "Inter", Arial, sans-serif;

  /* Type scale (BRAND.md proposed web scale) */
  --fs-display-xl: clamp(2.75rem, 6.2vw, 4.75rem);
  --fs-display:    clamp(1.9rem, 3.4vw, 2.6rem);
  --fs-subhead:    clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-body:       1.125rem;   /* 18px, never below 16px */
  --fs-caption:    0.9rem;
  --fs-tag:        0.78rem;

  /* Rhythm */
  --edge: clamp(1.25rem, 5vw, 5rem); /* shared page edge; everything aligns here */
  --maxw: 1200px;
  --radius: 2px; /* calm, near-square edges */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--body-lh, 1.62);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; }

/* Display / utility headlines: Roboto Condensed, tight, uppercase */
.display-xl, .display {
  font-family: var(--display);
  color: var(--navy);
  text-transform: uppercase;
  line-height: var(--display-lh, 0.98);
  letter-spacing: var(--display-tracking, -0.005em);
}
.display-xl { font-size: var(--fs-display-xl); }
.display    { font-size: var(--fs-display); letter-spacing: 0; }

/* A single red word is allowed on cream, NEVER on navy (guide: no red text on
   navy). On navy/band-navy it renders cream with a red underline accent so the
   emphasis survives without breaking the rule. */
.hl-red { color: var(--red); }
.on-navy .hl-red,
.band-navy .hl-red { color: var(--cream); border-bottom: 0.09em solid var(--red); }

.subhead {
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--fs-subhead);
  color: var(--charcoal);
  line-height: 1.4;
}

.lead { font-size: 1.2rem; line-height: 1.6; color: var(--charcoal); max-width: 46ch; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); }

/* --- Layout helpers ------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--edge); }
.section { padding-block: var(--section-pad, clamp(3rem, 7vw, 6rem)); }
.rule { height: 2px; background: var(--navy); border: 0; margin: 0; }
.rule-red { height: 3px; background: var(--red); border: 0; margin: 0; }
.rule-thin { height: 1px; background: var(--line-navy); border: 0; }

/* --- Tag eyebrow (inspection-tag motif, disciplined) ---------------------- */
.tag {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-tag);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.32em 0.7em;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
}
.tag--red   { background: var(--red); color: var(--cream); }
.tag--ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  padding: 0.85em 1.5em;
  border-radius: var(--radius);
  border: 2px solid var(--red);
  background: var(--red);
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.btn--onnavy { border-color: var(--red); }
.btn--onnavy:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

.btn-ghost {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.05rem; padding: 0.85em 1.5em;
  border-radius: var(--radius); border: 2px solid var(--navy);
  background: transparent; color: var(--navy); text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-ghost:hover { background: var(--navy); color: var(--cream); }
.btn-ghost:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Plain email shown beside CTA */
.email-plain { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em;
  text-transform: none; color: var(--navy); text-decoration: none; font-size: 1.05rem; }
.email-plain:hover { color: var(--red); }

/* --- Image / asset slots (flat, labeled, swap-in-place) ------------------- */
.slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  min-height: 240px;
  padding: 1.5rem;
  overflow: hidden;
}
.slot--cream { background: var(--cream-2); color: var(--navy); border: 2px solid var(--navy); }
.slot__label {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.82rem; line-height: 1.5; max-width: 34ch;
}
.slot__tag {
  position: absolute; top: 0.7rem; left: 0.7rem;
  font-family: var(--display); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--red); color: var(--cream);
  padding: 0.2em 0.55em; border-radius: var(--radius);
}

/* --- "Inspected by Redbird" stamp (single restrained accent) -------------- */
.stamp {
  display: inline-block;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.85rem; line-height: 1.2;
  color: var(--red);
  border: 2.5px solid var(--red);
  padding: 0.7em 0.9em;
  border-radius: var(--radius);
  transform: rotate(-4deg);
  text-align: center;
}
.stamp span { display: block; font-size: 0.62rem; letter-spacing: 0.2em; color: var(--navy); }

/* --- Wordmark (real logo art, painted per context via CSS mask) ----------
   One asset: redbird-wordmark.png (red script on transparent). Used as an alpha
   mask so background-color paints it: brand red on cream, brand cream on navy.
   Approved artwork only; never typeset to imitate it. */
.wordmark {
  display: inline-flex; flex-direction: column; line-height: 1;
  text-decoration: none; position: relative;
}
.wordmark__name {
  display: block;
  width: 129px; height: 42px;              /* logo aspect 374:122 ~= 3.07:1 */
  font-size: 0; color: transparent;         /* hide fallback text glyphs */
  background-color: var(--red);
  -webkit-mask: url(redbird-wordmark.png) left center / contain no-repeat;
          mask: url(redbird-wordmark.png) left center / contain no-repeat;
}
.wordmark__desc {
  font-family: var(--display); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.28em; color: var(--red); text-transform: uppercase; margin-top: 0.35em;
}
.on-navy .wordmark__name { background-color: var(--cream); }
/* descriptor is red on cream, but must not be red text on navy */
.on-navy .wordmark__desc { color: var(--cream); }

/* --- Header --------------------------------------------------------------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--edge);
  border-bottom: 2px solid var(--navy);
}
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a.navlink {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem; color: var(--navy); text-decoration: none;
}
.site-nav a.navlink:hover { color: var(--red); }
@media (max-width: 720px) { .site-nav .navlink { display: none; } }

/* --- Status chip (color + word, never color alone) ------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--body); font-weight: 600; font-size: 1rem;
  color: var(--navy);
}
.chip::before {
  content: ""; width: 0.7em; height: 0.7em; background: var(--red);
  border-radius: var(--radius); flex: none;
}

/* --- Footer --------------------------------------------------------------- */
.site-foot { background: var(--navy); color: var(--cream); }
.site-foot a { color: var(--cream); }
.foot-sig {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--cream);
}

/* --- Restrained reveal (respects reduced-motion) -------------------------- */
.reveal { opacity: 0; transform: translateY(var(--reveal-dist, 14px));
  transition: opacity var(--reveal-dur, 0.6s) ease, transform var(--reveal-dur, 0.6s) ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy); color: var(--cream);
  padding: 0.6em 1em; z-index: 100; font-family: var(--display); text-transform: uppercase;
}
.skip-link:focus { left: 0; }