/* Norman Lift Works — ported from the Monad system.
   Light parchment canvas, serif display at 400, monospace for every UI string.
   Lake Blue is substituted for a deep marine blue; the pastels stay out of UI. */

:root {
  /* surfaces */
  --parchment: #f6f3f1;   /* canvas — never pure white */
  --periwinkle: #e7ecf5;  /* muted low-emphasis surface */
  --ash: #cecac8;         /* every border, 1px, no exceptions */

  /* ink */
  --ink: #000000;
  --offblack: #242424;    /* primary button fill on light */
  --graphite: #4e4d4d;    /* body copy */
  --smoke: #797776;       /* helper + tertiary */

  /* the single action color (Lake Blue substituted for a marine tone) */
  --marine: #1b4965;

  /* type */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;

  /* scale — Minor Third 1.2 from 16 */
  --t-display: clamp(2.75rem, 7vw, 5rem);   /* 80 */
  --t-h2: clamp(2rem, 4vw, 3rem);           /* 48 */
  --t-h3: 2.5rem;                           /* 40 */
  --t-h4: 2rem;                             /* 32 */
  --t-sub: 1.5rem;                          /* 24 */
  --t-lg: 1.25rem;                          /* 20 */
  --t-label: 1.125rem;                      /* 18 */
  --t-meta: .75rem;                         /* 12 */

  /* space */
  --unit: 8px;
  --maxw: 1432px;
  --section: 64px;
  --pad-card: 40px;
  --gap: 16px;

  /* shape */
  --r-card: 40px;
  --r-pill: 100px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--graphite);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.014px;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;            /* locked at 400 at every size */
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h4); }
h4 { font-size: var(--t-sub); }

p { margin: 0; }
a { color: inherit; }

.wrap { width: min(var(--maxw), 100% - 48px); margin-inline: auto; }
.section { padding-block: var(--section); }
.rule { border: 0; border-top: 1px solid var(--ash); margin: 0; }

/* mono UI strings: uppercase + tight tracking */
.label, .nav a, .btn, .tag, .meta {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.label { font-size: var(--t-meta); color: var(--smoke); }
.meta { font-size: var(--t-meta); color: var(--smoke); }

.body-copy { font-size: var(--t-lg); line-height: 1.35; color: var(--graphite); max-width: 62ch; }

/* ── nav ─────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 24px; gap: var(--gap);
}
.nav__brand {
  font-family: var(--mono); font-weight: 500; font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink);
  text-decoration: none;
}
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: var(--t-label); color: var(--smoke); text-decoration: none; }
.nav a:hover { color: var(--ink); }
@media (max-width: 820px) { .nav__links a:not(.btn) { display: none; } }

/* ── buttons — pill only ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-meta); font-weight: 500;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.btn--primary { background: var(--marine); color: var(--parchment); }   /* one per screen */
.btn--dark    { background: var(--offblack); color: var(--parchment); }
.btn--ghost   { background: transparent; color: var(--ink); border-color: var(--ash); }
.btn--ghost:hover { background: var(--periwinkle); }

/* ── hero ────────────────────────────────────────────── */
.hero { padding-top: 40px; }
.hero__grid {
  display: grid; grid-template-columns: 1.4fr .8fr;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { max-width: 14ch; }
.hero__sub { margin-top: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ── cards — 40px radius, hairline border, never a shadow ── */
.card {
  background: var(--parchment);
  border: 1px solid var(--ash);
  border-radius: var(--r-card);
  padding: var(--pad-card);
}
.card--tint { background: var(--periwinkle); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

.card h4 { margin-bottom: 12px; }
.card p { font-size: 1rem; line-height: 1.5; color: var(--graphite); }

/* ── diagnostic table — the technical-manual moment ──── */
.diag { width: 100%; border-collapse: collapse; font-size: 1rem; }
.diag th, .diag td { text-align: left; padding: 18px 16px; border-top: 1px solid var(--ash); vertical-align: top; }
.diag th {
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--smoke); font-weight: 500; border-top: 0;
}
.diag td:first-child { color: var(--ink); width: 34%; }
.diag td:last-child { color: var(--graphite); }
@media (max-width: 760px) {
  .diag, .diag tbody, .diag tr, .diag td { display: block; width: 100%; }
  .diag thead { display: none; }
  .diag tr { border-top: 1px solid var(--ash); padding-block: 8px; }
  .diag td { border: 0; padding: 6px 0; }
  .diag td:first-child { width: auto; font-size: var(--t-label); }
}

/* ── intake ──────────────────────────────────────────── */
.intake .field { margin-bottom: 14px; }
.intake label { display: block; font-size: var(--t-meta); text-transform: uppercase; letter-spacing: -0.02em; color: var(--smoke); margin-bottom: 7px; }
.intake input, .intake textarea {
  width: 100%; font-family: var(--mono); font-size: 1rem; color: var(--ink);
  background: var(--parchment); border: 1px solid var(--ash);
  border-radius: 16px;              /* never below 16px on containers */
  padding: 13px 15px;
}
.intake textarea { resize: vertical; min-height: 84px; }
.intake input:focus, .intake textarea:focus { outline: none; border-color: var(--marine); }
.intake .btn { width: 100%; margin-top: 4px; }
.intake__fine { font-size: var(--t-meta); color: var(--smoke); margin-top: 14px; line-height: 1.5; }

/* ── coverage list ───────────────────────────────────── */
.places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tag {
  font-size: var(--t-meta); color: var(--graphite);
  border: 1px solid var(--ash); border-radius: var(--r-pill);
  padding: 9px 18px;
}

/* ── footer ──────────────────────────────────────────── */
.foot { padding-block: 48px; }
.foot__grid { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between; align-items: end; }
.foot p { font-size: var(--t-meta); color: var(--smoke); line-height: 1.6; max-width: 56ch; }

.callbar { display: none; }
@media (max-width: 700px) {
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--marine); text-align: center;
  }
  .callbar a {
    display: block; padding: 16px; color: var(--parchment); text-decoration: none;
    font-family: var(--mono); font-size: var(--t-meta); font-weight: 500;
    text-transform: uppercase; letter-spacing: -0.02em;
  }
  body { padding-bottom: 56px; }
}

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

/* ---------- generated sub-pages ---------- */
/* Added when the site expanded from one page to the full architecture. */

.crumbs { display: flex; align-items: center; gap: 9px; padding-top: 18px; }
.crumbs a, .crumbs span {
  font-family: var(--mono); font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--smoke); text-decoration: none;
}
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--graphite); }

/* sub-page hero is a section opener, not a first impression */
.hero--sub { padding-top: 34px; padding-bottom: var(--section); }
.hero--sub h1 { font-size: clamp(2.5rem, 6vw, 4rem); max-width: 16ch; }
.hero--sub .body-copy { max-width: 60ch; }

/* linked cards keep the hairline language; the hover is a border shift,
   never a shadow */
.card--link {
  display: block; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.card--link:hover { border-color: var(--marine); background: var(--periwinkle); }
.card--link h4 { color: var(--ink); }

/* footer link columns */
.foot__grid a:not(.btn) {
  display: block; color: var(--graphite); text-decoration: none;
  font-size: 1rem; margin-top: 9px;
}
.foot__grid a:not(.btn):hover { color: var(--marine); }
.foot__grid .label { margin-bottom: 4px; }