/* ==========================================================================
   Cronk Companies — shared design system
   Single source of truth for tokens, page scaffolding (hero, sections,
   cards, contact box), header, nav, mobile menu, footer and buttons.
   Pages add only what is unique to them in their own <style> block.
   ========================================================================== */

:root {
  --navy: #1f3864;
  --navy-dk: #152845;
  --ink: #1c1f24;
  --grey: #5b6472;
  /* 4.6:1 on --bg and 4.8:1 on --panel: passes WCAG AA for small text.
     The previous #707986 measured 4.25:1 and did not. */
  --grey-lt: #68717e;
  --bg: #fbfbfa;
  --panel: #ffffff;
  --line: #e7e6e2;
  --amber: #c8862b;
  --amber-dk: #7a4f18;
  --good: #1a7f4f;
  --bad: #b23a3a;
  --header-h: 76px;
  --f:
    "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
}

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

/* Anchored sections stop short of the sticky header instead of under it. */
[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

.wrap-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Visually hidden, still read by assistive technology. */
.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;
}

/* Skip link for keyboard/screen reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Header / nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  background: rgba(251, 251, 250, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 28px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

.brand {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.brand span {
  color: var(--amber);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links {
  display: flex;
  gap: 22px;
  font-size: 13px;
}

.nav-links a {
  color: var(--grey);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active,
.mobile-nav a.active {
  color: var(--navy);
}

.nav-links a.active {
  font-weight: 600;
}

.nav-ctas {
  display: flex;
  gap: 10px;
}

.btn-cta {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.btn-cta.solid {
  background: var(--navy);
  color: #fff;
}

.btn-cta.solid:hover {
  background: var(--navy-dk);
}

.btn-cta.outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
}

.btn-cta.outline:hover {
  border-color: var(--navy);
}

/* Custom hamburger — three drawn bars, no icon font/emoji */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 60;
}

.menu-toggle .bar {
  position: absolute;
  left: 8px;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    top 0.25s ease;
}

.menu-toggle .bar:nth-child(1) {
  top: 14px;
}
.menu-toggle .bar:nth-child(2) {
  top: 20px;
}
.menu-toggle .bar:nth-child(3) {
  top: 26px;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
  top: 20px;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}

/* Mobile nav panel. Closed it takes no space at all (no padding, no border,
   nothing focusable); open it can be as tall as the viewport allows and
   scrolls inside itself, so the last links are always reachable. */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--panel);
  padding: 0 28px;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease,
    visibility 0s linear 0.3s;
}

.mobile-nav.open {
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 8px 28px 20px;
  border-bottom: 1px solid var(--line);
  visibility: visible;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease,
    visibility 0s;
}

.mobile-nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.mobile-nav a:last-child {
  border-bottom: none;
}

.mobile-nav .mobile-cta {
  margin-top: 14px;
  text-align: center;
  border-radius: 3px;
  padding: 12px;
  border-bottom: none;
}

.mobile-nav .mobile-cta.solid {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
}

.mobile-nav .mobile-cta.outline {
  border: 1.5px solid var(--line);
  color: var(--navy);
  font-weight: 600;
}

/* Eight links plus two buttons need about 1000px. Below that the menu
   collapses into the drawer, which is also what tablets in portrait get. */
@media (max-width: 1040px) {
  .nav-desktop {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .mobile-nav {
    display: flex;
  }
}

/* ---------- Page scaffolding shared by every page ---------- */
.hero {
  padding: 64px 0 16px;
}

.hero h1,
h1 {
  font-size: 36px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 10px;
  max-width: 760px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--amber-dk);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.lede {
  color: var(--grey);
  font-size: 15.5px;
  max-width: 640px;
  margin: 0 0 20px;
}

section {
  padding: 44px 0;
}

h2 {
  font-size: 26px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.section-alt {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* The standard card grid: two across, one on a phone. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 20px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}

.card .num {
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--amber-dk);
  margin-bottom: 12px;
}

.card h3 {
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 10px;
  font-weight: 700;
}

.card p {
  font-size: 14px;
  color: var(--grey);
  margin: 0 0 12px;
  line-height: 1.6;
}

.card p:last-child {
  margin-bottom: 0;
}

.card ul {
  padding-left: 18px;
  margin: 0;
}

.card li {
  font-size: 13.5px;
  color: var(--grey);
  margin-bottom: 5px;
}

/* A quiet footer line inside a card: the concrete result behind the claim. */
.card .what {
  font-size: 13px;
  color: var(--grey-lt);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 14px;
}

.card .what b {
  color: var(--ink);
  font-weight: 600;
}

/* Three or four short items with an amber rule down the left. */
.rule-row {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.rule-item {
  flex: 1;
  min-width: 200px;
  border-left: 3px solid var(--amber);
  padding-left: 18px;
}

.rule-item .n {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-dk);
  opacity: 0.35;
  margin-bottom: 6px;
}

.rule-item h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}

.rule-item p {
  font-size: 13px;
  color: var(--grey);
  margin: 0;
}

/* Closing call to action on inner pages. */
.contact-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 40px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.contact-box h3 {
  font-size: 19px;
  color: var(--navy);
  margin: 0 0 6px;
}

.contact-box p {
  color: var(--grey);
  font-size: 14px;
  margin: 0;
}

/* Long-form reading: articles, legal pages, FAQ. */
.legal {
  padding: 60px 0 80px;
}

.legal h1 {
  font-size: 34px;
  margin-bottom: 8px;
}

.legal .updated {
  color: var(--grey-lt);
  font-size: 13.5px;
  margin-bottom: 36px;
}

.legal h2 {
  font-size: 19px;
  margin: 34px 0 10px;
}

.legal p,
.legal li {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 12px;
}

.legal ul {
  padding-left: 22px;
}

.plain > * {
  max-width: 720px;
}

.plain p {
  font-size: 15.5px;
  color: var(--grey);
  line-height: 1.7;
  margin: 0 0 16px;
}

.plain p b {
  color: var(--ink);
  font-weight: 600;
}

/* Small honest label: something designed and sized but not yet running. */
.tag-planned {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--amber-dk);
  border: 1px solid var(--amber);
  border-radius: 3px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 8px;
}

/* ---------- Buttons (content areas) ---------- */
.btn {
  padding: 12px 24px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--navy-dk);
}

.btn-outline {
  border: 1.5px solid var(--line);
  color: var(--navy);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--navy);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 28px;
  color: var(--grey-lt);
  font-size: 13px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 28px;
}

.footer-brand p {
  margin: 10px 0 0;
  max-width: 34ch;
  line-height: 1.6;
}

.footer-brand a:not(.brand) {
  color: var(--grey);
}

.site-footer h4 {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-dk);
  font-weight: 700;
  margin: 0 0 10px;
}

.footer-col a {
  display: block;
  color: var(--grey-lt);
  text-decoration: none;
  padding: 3px 0;
}

.footer-col a:hover {
  color: var(--navy);
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}

.footer-legal a {
  color: var(--grey-lt);
  text-decoration: none;
  margin-left: 18px;
}

.footer-legal a:hover {
  color: var(--navy);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-legal a {
    margin-left: 0;
    margin-right: 16px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

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

/* A closing qualifier under a section: the concrete detail that backs the claim
   above it. Deliberately quieter than body text — it is for the reader who wants
   to know what it actually runs on. */
.section-note {
  max-width: 62ch;
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--amber);
  font-size: 14px;
  color: var(--grey);
}

a:focus-visible,
.btn:focus-visible,
.btn-cta:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ---------- Print ---------- */
@media print {
  header.site-header,
  footer.site-footer,
  .skip-link,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  a {
    color: inherit;
  }
  .section-alt,
  .card,
  .contact-box {
    border-color: #999;
    background: #fff;
  }
}