/* QnC Systems — www.qncsystems.com
   ------------------------------------------------------------------
   Navy, cream, brass. Wide.

   The page is built to read as an established firm's site, so it uses
   its full width and carries weight through solid colour fields rather
   than through decoration: a solid navy masthead and hero at the top, a
   navy close at the bottom, white bordered panels on a cream ground in
   between. Content spans the container — there is no narrow column down
   the middle and no empty margin column.

   Serif headings over sans body. No gradients, no shadows, no rounded
   corners, no icons. Brass appears only as a short rule above a heading
   and on small labels. */

:root {
  --navy:        #12314f;
  --navy-deep:   #0c2035;
  --navy-line:   #2a4e70;
  --on-navy:     #eceff3;
  --on-navy-2:   #a8bccf;

  --cream:       #f7f5f1;
  --panel:       #ffffff;
  --ink:         #1a1d21;
  --ink-2:       #4d5259;
  --ink-3:       #676d74;
  --rule:        #dcd7cd;
  --rule-2:      #c6c0b4;

  --brass:       #7d6228;   /* text-safe on cream */
  --brass-line:  #a8873f;   /* decorative rules only */
  --brass-navy:  #c9a961;   /* on navy */

  --container: 78rem;
  --pad: 2.5rem;

  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy:      #10222f;
    --navy-deep: #0b1720;
    --navy-line: #26414f;
    --on-navy:   #e4e8ec;
    --on-navy-2: #97a9b7;

    --cream:     #15171b;
    --panel:     #1c1f24;
    --ink:       #e9e6e0;
    --ink-2:     #b2b7bd;
    --ink-3:     #8b9198;
    --rule:      #2d3138;
    --rule-2:    #3c424a;

    --brass:      #cbab68;
    --brass-line: #9c7f42;
    --brass-navy: #cbab68;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }

/* balance keeps compounds like "long-term care" off a line break in the
   display sizes; browsers without it just wrap normally. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.008em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.018em; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); letter-spacing: -0.014em; }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass-line); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; z-index: 30;
  background: var(--navy-deep); color: #fff;
  font-size: .85rem; padding: .6rem 1rem;
}
.skip:focus { left: 0; top: 0; }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
@media (max-width: 48rem) { :root { --pad: 1.25rem; } }

/* Kicker + the brass rule that opens a section heading. */
.kicker {
  font-size: .73rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 1rem;
}
.kicker--navy { color: var(--brass-navy); }

/* CSP has no unsafe-inline, so hold-together spans need a class. */
.nowrap { white-space: nowrap; }

.ruled::before {
  content: ""; display: block;
  width: 2.75rem; height: 2px; margin-bottom: 1.5rem;
  background: var(--brass-line);
}

/* ── Masthead ────────────────────────────────────────────────────── */

.masthead { background: var(--navy); color: var(--on-navy); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 4.5rem;
}

.wordmark { display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none; color: inherit; }
.wm-a { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.wm-b { font-size: .73rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--on-navy-2); }

/* The mark. The box sits on the wordmark's baseline and the tail hangs below
   it, the way a Q's tail does. The tail is 22.5% of the drawing box's height,
   so the downward shift is .225 x the mark's size — a property of the artwork
   rather than a fudge. Keep the two in step if the size changes. */
.wm-mark { width: 2.04rem; height: 2.04rem; flex: none; position: relative; top: .459rem; }
.wm-mark .m-ink { stroke: currentColor; }
.wm-mark .m-chk { stroke: var(--brass-navy); }
@media (max-width: 26rem) { .wm-mark { width: 1.8rem; height: 1.8rem; top: .405rem; } }

.nav { display: flex; align-items: center; gap: 2rem; font-size: .88rem; }
.nav a { color: var(--on-navy-2); text-decoration: none; padding: .3rem 0; }
.nav a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--brass-navy); }
.nav .nav-cta {
  color: var(--navy); background: var(--brass-navy);
  padding: .5rem 1.05rem; font-weight: 600; font-size: .84rem; letter-spacing: .01em;
}
.nav .nav-cta:hover { background: #fff; color: var(--navy); box-shadow: none; }
@media (max-width: 60rem) { .nav a:not(.nav-cta) { display: none; } }
@media (max-width: 26rem) { .wm-b { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────── */

.hero { background: var(--navy); color: var(--on-navy); padding: 5rem 0 5.5rem; border-top: 1px solid var(--navy-line); }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem 5rem; align-items: start; }
@media (max-width: 62rem) { .hero-grid { grid-template-columns: 1fr; gap: 3.2rem; } .hero { padding: 3.4rem 0 3.8rem; } }

.hero h1 { color: #fff; max-width: 20ch; }
.hero-lede { font-size: 1.2rem; line-height: 1.55; color: var(--on-navy); max-width: 34rem; margin-top: 1.5rem; }
.hero-lede strong { color: #fff; font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.4rem; }

/* The index in the hero's right column: the whole product, named, before
   the reader scrolls. */
.hero-index { border-top: 1px solid var(--navy-line); }
.hero-index h2 {
  font-family: var(--sans); font-size: .73rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brass-navy);
  margin: 1.1rem 0 .9rem;
}
.hero-index ol { list-style: none; margin: 0; padding: 0; counter-reset: mod; }
.hero-index li {
  counter-increment: mod;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .68rem 0; border-bottom: 1px solid var(--navy-line);
  font-size: .96rem;
}
.hero-index li::before {
  content: counter(mod, decimal-leading-zero);
  font-size: .74rem; font-weight: 600; color: var(--on-navy-2);
  font-variant-numeric: tabular-nums; flex: none; min-width: 1.4rem;
}
.hero-index b { font-weight: 500; color: #fff; }
.hero-index span { margin-left: auto; font-size: .78rem; color: var(--on-navy-2); text-align: right; }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
  display: inline-block; border: 1px solid transparent;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: .01em;
  padding: .85rem 1.7rem; text-decoration: none;
}
.btn-brass { background: var(--brass-navy); color: var(--navy); }
.btn-brass:hover { background: #fff; color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-outline { border-color: var(--navy-line); color: var(--on-navy); background: transparent; }
.btn-outline:hover { border-color: var(--brass-navy); color: #fff; }

.textlink {
  font-size: .92rem; color: var(--on-navy); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--brass-navy); padding-bottom: 2px;
}
.textlink:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--brass-navy); }
.textlink--ink { color: var(--ink); box-shadow: inset 0 -1px 0 var(--brass-line); }
.textlink--ink:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass-line); }

/* ── Sections ────────────────────────────────────────────────────── */

.section { padding: 5.2rem 0; border-top: 1px solid var(--rule); }
.section:first-child { border-top: 0; }
@media (max-width: 48rem) { .section { padding: 3.4rem 0; } }

/* Two real columns: the heading column carries a lede, so neither side is
   an empty margin. */
.split { display: grid; grid-template-columns: 23rem minmax(0, 1fr); gap: 2.5rem 5rem; align-items: start; }
@media (max-width: 66rem) { .split { grid-template-columns: 1fr; gap: 2rem; } }
.split-head h2 { margin-bottom: .7rem; }
.split-head p { color: var(--ink-2); font-size: 1.02rem; }
.split-body p { color: var(--ink-2); }
.split-body > p { max-width: 42rem; }

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head p { color: var(--ink-2); font-size: 1.08rem; margin-top: .8rem; }

/* ── Module panels ───────────────────────────────────────────────── */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 66rem) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--panel); border: 1px solid var(--rule);
  padding: 1.7rem 1.6rem 1.75rem;
  display: flex; flex-direction: column;
}
.panel-n {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--brass);
  font-variant-numeric: tabular-nums; margin: 0 0 .85rem;
}
.panel h3 { margin: 0 0 .55rem; }
.panel-cite {
  font-size: .74rem; color: var(--ink-3); margin: 0 0 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--rule);
}
.panel p:last-child { color: var(--ink-2); font-size: .95rem; margin: 0; }

.footnote { margin-top: 2rem; font-size: .9rem; color: var(--ink-3); max-width: 48rem; }
.footnote strong { color: var(--ink-2); font-weight: 600; }

/* ── Definition rows (data, security, terms) ─────────────────────── */

.defs { display: grid; gap: 0; }
.defs > div { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.defs > div:first-child { border-top: 0; padding-top: 0; }
.defs h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: .005em; margin: 0 0 .35rem; }
.defs p { color: var(--ink-2); font-size: .97rem; margin: 0; max-width: 44rem; }

.controls { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--rule); }
.controls li {
  padding: .82rem 1.4rem; border-top: 1px solid var(--rule);
  font-size: .95rem; color: var(--ink-2);
}
.controls li:first-child { border-top: 0; }

/* Three-up terms strip. */
.trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
@media (max-width: 60rem) { .trio { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }
.trio > div { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.trio h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.trio p { color: var(--ink-2); font-size: .95rem; margin: 0; }

/* ── Closing band ────────────────────────────────────────────────── */

.band { background: var(--navy); color: var(--on-navy); padding: 4.6rem 0; }
.band-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem 5rem; align-items: center; }
@media (max-width: 62rem) { .band-grid { grid-template-columns: 1fr; } .band { padding: 3.4rem 0; } }
.band h2 { color: #fff; margin-bottom: .8rem; max-width: 16ch; }
.band p { color: var(--on-navy); max-width: 36rem; }
.band-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* ── Colophon ────────────────────────────────────────────────────── */

.colophon { background: var(--navy-deep); color: var(--on-navy-2); padding: 2.8rem 0; font-size: .9rem; }
.colophon a { color: var(--on-navy); text-decoration: none; box-shadow: inset 0 -1px 0 var(--navy-line); }
.colophon a:hover { color: #fff; box-shadow: inset 0 -1px 0 var(--brass-navy); }
.colophon-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; align-items: flex-start; }
.colophon .wm-a { color: #fff; }
/* The colophon underlines its links; the wordmark is a link but is not read as
   one, and the rule collided with the mark's tail. */
.colophon .wordmark { box-shadow: none; }
.colophon p { margin: 0; }
.colophon-legal {
  width: 100%; margin-top: 1.8rem; padding-top: 1.2rem;
  border-top: 1px solid var(--navy-line);
  font-size: .78rem; line-height: 1.7; max-width: 58rem;
}

/* ── Notice page ─────────────────────────────────────────────────── */

.notice { padding: 6rem 0 7rem; }
.notice p { color: var(--ink-2); max-width: 34rem; margin-bottom: 2rem; }

@media print {
  .masthead, .nav, .btn, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .hero, .band { background: #fff; color: #000; }
  .hero h1, .band h2 { color: #000; }
}

/* ── Founder (Concept A — portrait split) ─────────────────────────── */

.founder-grid {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 2.5rem 3.5rem;
  align-items: start;
  max-width: 56rem;
  margin-top: 0.25rem;
}
@media (max-width: 48rem) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* Square crop frame — never let the photo stretch with the text column. */
.founder-shot {
  margin: 0;
  width: 17.5rem;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--rule);
  align-self: start;
}
.founder-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
@media (max-width: 48rem) {
  .founder-shot { width: 14rem; }
}

.founder-name {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 0.2rem;
}
.founder-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brass);
  margin: 0 0 1.1rem;
}
.founder-bio > p:not(.founder-role):not(.founder-oneline) {
  color: var(--ink-2);
  max-width: 36rem;
}
.founder-oneline {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--ink-3);
  max-width: 36rem;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */

.faq-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 0;
  background: transparent;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
  padding: 1.15rem 0;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--brass);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.2;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p {
  margin: 0 0 1.25rem;
  color: var(--ink-2);
  max-width: 40rem;
  padding-right: 2rem;
}