/* ---------------------------------------------------------------------------
   Florida Cement: public site stylesheet

   Palette is sampled straight off the brand mark: the navy that outlines the
   lettering, the flag red of the state outline, the charcoal of "CEMENT" and
   the concrete grey it sits on.

   Every fill is flat, with no gradients anywhere: the mark is heavy and
   high-contrast, and soft shading fights it. Colour does the separating, helped
   by 1px rules and a small radius that keeps the blocks looking cut rather than
   rounded off.
--------------------------------------------------------------------------- */

:root {
  /* Brand */
  --navy: #0a1c44;
  --navy-line: #24406f;
  --red: #b4000c;
  --charcoal: #3c3c3c;

  /* Surfaces */
  --paper: #d4d4d6;

  /* Text */
  --text: #23272e;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #a7b3ca;

  --radius: 3px;
  --shell: 620px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
}

p {
  margin: 0 0 1em;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Brand rule ------------------------------------------------------------
   The red off the state outline, run full bleed across the top. */

.brand-rule {
  height: 5px;
  background: var(--red);
}

/* --- Masthead -------------------------------------------------------------- */

.page {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 64px 0;
}

.masthead {
  text-align: center;
  margin-bottom: 40px;
}

.masthead h1 {
  margin: 0 0 18px;
}

.masthead img {
  width: 320px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.kicker {
  margin: 0;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* --- Panel ----------------------------------------------------------------- */

.panel {
  background: var(--navy);
  color: var(--text-on-dark);
  border-radius: var(--radius);
  border-top: 6px solid var(--red);
  padding: 4px 30px 30px;
}

.panel-block {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--navy-line);
}

.panel-block:first-child {
  margin-top: 0;
  border-top: 0;
}

.panel-label {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-on-dark-muted);
}

.panel-note {
  font-size: 0.92rem;
  color: var(--text-on-dark-muted);
  margin-bottom: 0;
}

.address {
  font-style: normal;
  font-size: 1.08rem;
  line-height: 1.75;
}

/* --- Contacts -------------------------------------------------------------- */

.contact-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.contact-list li {
  margin: 0 0 18px;
}

.contact-list li:last-child {
  margin-bottom: 0;
}

.contact-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8ea0bf;
  margin-bottom: 2px;
}

.contact-list a {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-on-dark);
  word-break: break-word;
}

.contact-list a:hover {
  color: #ffc9c9;
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal);
  color: #d2d5d9;
  padding: 20px 0;
  font-size: 0.85rem;
  text-align: center;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .page {
    padding: 44px 0;
  }

  .masthead img {
    width: 260px;
  }

  .panel {
    padding: 4px 22px 24px;
  }
}