/* Tenavant - Charter identity
   Navy #16283C, Paper #FBFBFA, Warm gray #666B70, Hairline #D8D6D2.
   Light only, deliberately. This is a paper-and-plaque identity; a dark variant
   would be a second thing to maintain on a site that changes almost never. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "InterSite";
  src: url("fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "InterSite";
  src: url("fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --navy:     #16283C;
  --paper:    #FBFBFA;
  --white:    #FFFFFF;
  --gray:     #666B70;
  --hairline: #D8D6D2;
  --muted:    #9DAAB8;

  --heading: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body: "InterSite", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1060px;
  --prose: 40rem;     /* ~68 characters at body size. 34rem was too tight in a 1000px shell. */
  --gap: clamp(3.5rem, 8vw, 6.5rem);

  /* Band grid geometry. Kept as variables because the full-bleed table below
     offsets itself by exactly these two values. */
  --band-head-col: 16rem;
  --band-col-gap: 4.5rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.prose { max-width: var(--prose); }

/* ---------------------------------------------------------------- type */

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 600;
  letter-spacing: -0.008em;   /* the category runs -3% to -5%; restraint is the point */
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.16; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.65rem); line-height: 1.25; }
h3 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: 0; }

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

strong { font-weight: 600; }

a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: var(--hairline); }
a:hover { text-decoration-color: var(--navy); }
a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font-family: var(--heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 1.1rem;
}

.lede { font-size: 1.1875rem; line-height: 1.6; }
.muted { color: var(--gray); }
.small { font-size: 0.875rem; line-height: 1.55; }

/* ---------------------------------------------------------------- header */

.site-header { border-bottom: 1px solid var(--hairline); background: var(--paper); }
.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 5rem; flex-wrap: wrap;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { display: block; width: 150px; height: auto; }

.nav { margin-left: auto; display: flex; gap: 1.75rem; flex-wrap: wrap; }
.nav a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--gray);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); }

@media (max-width: 620px) {
  .site-header .wrap { min-height: 0; padding-top: 1.25rem; padding-bottom: 1rem; }
  .nav { margin-left: 0; width: 100%; gap: 1.25rem; }
  .brand img { width: 132px; }
}

/* ---------------------------------------------------------------- sections */

.hero { padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero h1 { max-width: 24ch; }
.hero .lede { margin-top: 1.5rem; max-width: var(--prose); }

/* On wide screens the headline spans the full grid and the standfirst drops into
   the right-hand column, so it lines up with the body copy of every band below. */
@media (min-width: 64rem) {
  .hero > .wrap.band-grid > .eyebrow,
  .hero > .wrap.band-grid > h1 { grid-column: 1 / -1; }
  .hero > .wrap.band-grid > h1 { margin-bottom: 1.75rem; }
  .hero > .wrap.band-grid > .lede { grid-column: 2; margin-top: 0; }
}

section.band { padding: var(--gap) 0; border-top: 1px solid var(--hairline); }

/* Two-column editorial layout on wide screens: heading left, content right.
   Single column left-aligned inside a centered shell leaves a large void on the
   right of a wide display and reads as a bug rather than as restraint. */
.band-head .eyebrow { margin-bottom: 0.7rem; }
.band-head h2 { max-width: 20ch; }
.band-body > :first-child { margin-top: 0; }

@media (min-width: 64rem) {
  .band-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--band-head-col)) minmax(0, var(--prose));
    gap: 0 var(--band-col-gap);
    align-items: start;
  }
  .band-head h2 { max-width: none; }
}
@media (max-width: 63.999rem) {
  .band-body { margin-top: 1.5rem; }
}

/* ---------------------------------------------------------------- pillars */

.pillars {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 2.25rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.pillars h3 { margin: 0 0 0.5rem; }
.pillars p { color: var(--gray); font-size: 0.9875rem; margin: 0; }

/* ---------------------------------------------------------------- steps */

.steps { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: step; max-width: 44rem; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1.25rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--hairline);
}
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / -1;            /* span every row, or the copy is pushed into this column */
  font-family: var(--heading); font-weight: 600; font-size: 0.8125rem;
  color: var(--gray); padding-top: 0.28rem;
}
.steps h3 { grid-column: 2; margin: 0 0 0.25rem; }
.steps p  { grid-column: 2; margin: 0; color: var(--gray); font-size: 0.9875rem; }

@media (max-width: 480px) {
  .steps li { grid-template-columns: 1.75rem 1fr; gap: 0 0.85rem; }
}

/* ---------------------------------------------------------------- lists */

.plain { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: var(--prose); }
.plain li { padding: 0.85rem 0; border-top: 1px solid var(--hairline); }
.plain li:last-child { border-bottom: 1px solid var(--hairline); }
.plain strong { display: block; }
.plain span { color: var(--gray); font-size: 0.9875rem; }

.ticks { margin: 1.35rem 0 0; padding: 0 0 0 1.1rem; max-width: var(--prose); color: var(--gray); }
.ticks li { margin: 0 0 0.6rem; padding-left: 0.3rem; }
.ticks li::marker { color: var(--muted); }

/* ---------------------------------------------------------------- table */

.table-scroll { margin: 2rem 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The comparison table is the one element that needs more than prose width. At
   40rem its narrowest column lands around 99px and most cells wrap to three
   lines, which defeats the point of a table. Pull it left across the heading
   column rather than reparenting it out of .band-body, which would drop it below
   the rest of the section and break the reading order. */
@media (min-width: 64rem) {
  .band-body .table-scroll {
    margin-left: calc(-1 * (var(--band-head-col) + var(--band-col-gap)));
    width: calc(100% + var(--band-head-col) + var(--band-col-gap));
  }
}

table.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 0.9375rem;
  background: var(--white);
}
table.compare caption {
  caption-side: bottom; text-align: left; padding-top: 0.9rem;
  font-size: 0.8125rem; color: var(--gray);
}
table.compare th, table.compare td {
  text-align: left; padding: 0.85rem 1rem; vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
table.compare thead th {
  font-family: var(--heading); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: var(--navy); border-bottom: 0;
}
table.compare tbody th { font-weight: 600; white-space: nowrap; }
table.compare td { color: var(--gray); }
table.compare tr.ours th, table.compare tr.ours td { background: #F1F4F7; color: var(--navy); }
table.compare tr.ours th { box-shadow: inset 3px 0 0 var(--navy); }

/* ---------------------------------------------------------------- callout */

.callout {
  margin: 2.25rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--navy);
  max-width: 44rem;
}
.callout p { font-size: 0.9875rem; }

/* ---------------------------------------------------------------- contact */

.contact-line { margin-top: 2rem; font-size: 1.0625rem; }
.contact-line a { font-weight: 600; text-decoration-color: var(--muted); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: var(--gap);
  padding: 3rem 0 3.5rem;
  color: var(--gray);
}
.site-footer .cols {
  display: grid; gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.site-footer h2 {
  font-family: var(--heading); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray);
  margin: 0 0 0.75rem;
}
.site-footer p { font-size: 0.875rem; line-height: 1.6; margin: 0 0 0.35rem; }
.site-footer a { color: var(--gray); text-decoration-color: var(--hairline); }
.site-footer a:hover { color: var(--navy); }
.site-footer nav { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer nav a { font-size: 0.875rem; text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

.colophon {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem; color: var(--gray);
}

/* ---------------------------------------------------------------- utility */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--paper);
  padding: 0.75rem 1.25rem; z-index: 10; text-decoration: none;
}
.skip:focus { left: 0; }

hr.rule { border: 0; border-top: 1px solid var(--hairline); margin: var(--gap) 0; }