/* The Story of the Business.
   CGFB's own look: Maven Pro, gold #EDAA02, blue #3DB3E5. Built to be read, on a phone or a desk,
   by a customer who has never heard of us and by a staff member on their first morning.
   Key lines are black, never colour alone: Frank is colour blind. */
:root{
  --gold:#EDAA02; --blue:#3DB3E5; --ink:#141414; --mute:#5b6670;
  --line:#d9dee2; --bg:#f4f6f7; --card:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 "Maven Pro",system-ui,-apple-system,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* ---- the masthead */
.top{background:var(--ink);color:#fff;padding:44px 0 38px;border-bottom:7px solid var(--gold)}
.top .eyebrow{margin:0 0 6px;color:var(--gold);font-weight:700;font-size:12.5px;
  letter-spacing:.17em;text-transform:uppercase}
.top h1{margin:0 0 10px;font-size:clamp(28px,4.4vw,44px);line-height:1.12;font-weight:800;
  letter-spacing:-.02em;text-wrap:balance}
.top .lead{margin:0;max-width:62ch;color:#e3e7ea;font-size:17.5px}
.top .lead strong{color:#fff}

/* ---- layout */
.grid{display:grid;grid-template-columns:252px minmax(0,1fr);gap:40px;
  align-items:start;padding-top:34px;padding-bottom:50px}
main{min-width:0}

/* ---- contents */
.toc{position:sticky;top:16px;font-size:14.5px}
.toc-h{margin:0 0 7px;font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.toc-h2{margin-top:20px}
.toc a{display:block;padding:6px 10px;margin-left:-10px;border-radius:6px;
  color:var(--ink);text-decoration:none;border-left:3px solid transparent}
.toc a:hover{background:#e9edef;border-left-color:var(--gold)}
.toc .swap{font-weight:700;color:#0b5f85}

/* ---- sections */
.intro{background:var(--card);border-top:4px solid var(--blue);padding:22px 26px;margin-bottom:26px}
.intro p{margin:0 0 10px;max-width:70ch}
.intro .meta{margin:0;color:var(--mute);font-size:13.5px}
.sec{background:var(--card);padding:28px 30px 24px;margin-bottom:22px;border:1px solid var(--line)}
.sec>h2{margin:0 0 16px;padding-bottom:11px;border-bottom:2px solid var(--ink);
  font-size:25px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.body{max-width:74ch}
.body h2{margin:26px 0 8px;font-size:20px;font-weight:700}
.body h3{margin:20px 0 6px;font-size:17.5px;font-weight:700;color:#23323b}
.body p{margin:0 0 13px}
.body ul,.body ol{margin:0 0 14px;padding-left:22px}
.body li{margin-bottom:6px}
.body a{color:#0b5f85}
.body strong{font-weight:700}

/* ---- tables: rows and columns, never panels */
table,.grid-t{border-collapse:collapse;width:100%;margin:6px 0 18px;font-size:15.5px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{border-bottom:2px solid var(--ink);font-weight:700;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:#23323b}
tbody tr:nth-child(even){background:#fafbfb}
.body table{display:block;overflow-x:auto;white-space:normal}

/* ---- bits */
.staff{display:inline-block;vertical-align:middle;margin-left:7px;padding:2px 8px;
  background:var(--ink);color:#fff;border-radius:11px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.muted{color:var(--mute)}
.small{font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:11px 17px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:600;border-radius:7px}
.btn:hover{background:#2c3b45}
.cta{border-top:4px solid var(--gold)}

/* ---- foot */
.foot{background:var(--ink);color:#c9d1d6;padding:26px 0 34px}
.foot p{margin:0 0 8px;max-width:78ch}
.foot a{color:var(--gold)}
.foot .small{color:#97a3ab;font-size:13.5px}

@media (max-width:860px){
  .grid{grid-template-columns:1fr;gap:22px;padding-top:22px}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:14px}
  .sec{padding:22px 18px 18px}
  .sec>h2{font-size:21px}
}

/* ---- the nine sections, and the chapters inside them.
   The left list has two levels now: a section in black, its chapters indented and lighter.
   Added 27 Oct 2026 when Frank asked for real sections rather than 38 flat links. */
.toc a.part{font-weight:700;margin-top:11px;color:var(--ink)}
.toc a.part:first-of-type{margin-top:0}
.toc a.chap{padding:3px 10px 3px 20px;font-size:13.5px;color:#4a5760;border-left:3px solid #e4e8ea}
.toc a.chap:hover{color:var(--ink);border-left-color:var(--gold);background:#eef1f2}

/* Scoped to main: the left-hand links carry the same class name, and without "main" they were
   painted as black blocks down the contents list. Found on screen before Frank saw it. */
main .part{background:var(--ink);color:#fff;padding:20px 26px 18px;margin:30px 0 0;
  border-left:7px solid var(--gold)}
main .part:first-of-type{margin-top:0}
main .part .partno{margin:0 0 4px;color:var(--gold);font-weight:700;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase}
main .part h2{margin:0 0 5px;font-size:27px;font-weight:800;letter-spacing:-.02em;color:#fff}
main .part .blurb{margin:0;color:#d4dadd;font-size:15.5px;max-width:62ch}
main .part .staff{background:var(--gold);color:var(--ink)}
.toc a.part .staff{background:#e4e8ea;color:#4a5760}

/* a chapter sits under its section */
.sec>h3{margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid var(--ink);
  font-size:22px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.sec .body h3{margin:22px 0 7px;font-size:17.5px;font-weight:700;color:#23323b;
  border:0;padding:0;letter-spacing:0}

/* ---- the number */
.signin{border-top:4px solid var(--gold)}
.numform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:14px 0 10px}
.numform label{width:100%;font-weight:700;font-size:13.5px;margin-bottom:-2px}
.numform input{padding:12px 14px;border:1px solid #b9c2c8;border-radius:7px;
  font:17px "Maven Pro",sans-serif;background:#fcfdfd;min-width:190px;letter-spacing:.14em}
.numform input:focus{outline:2px solid var(--ink);outline-offset:1px}
.numform button{border:0;cursor:pointer;font:600 16px "Maven Pro",sans-serif}
.body .shot img,.shot img{max-width:100%;height:auto;border:1px solid var(--line)}