/* ===========================================================
   qcSPECS - shared site styles. One stylesheet, linked by every page.
   Rewritten clean 2026-10-03: every style is defined ONCE, here, like a
   Word template. Change a style here and every page follows.
   Previous layered version: _Backup-2026-10-03-BeforeCSSCleanup\styles-2.css

   FONTS   Newsreader (serif) - every heading in the text column
           Public Sans (sans) - everything else: text, menu, the whole left bar incl. the mark
           Both free (SIL Open Font License), self-hosted in fonts\ via fonts.css

   SIZES   Title 40 · Heading 24 · Body 16.5 · Small 14 · Label 12
   COLORS  page near-white · left bar charcoal grey · text charcoal
           red   - the spine, the current page in the menu, link underlines,
                   the Fees table group labels, the form button
           gold  - hover only
   =========================================================== */

/* ---------- 1. Settings ---------- */
:root{
  --font:'Public Sans',Arial,sans-serif;
  --font-head:'Newsreader',Georgia,serif;

  --t-title:2.5rem;     /* Title      */
  --t-head:1.5rem;      /* Heading    */
  --t-body:1.03rem;     /* Body       */
  --t-small:.88rem;     /* Small      */
  --t-label:.75rem;     /* Label      */

  --bg:#f7f6f2;         /* page */
  --ink:#1a1713;        /* text */
  --line:#d9d3c7;       /* thin rules */
  --bg-rail:#2d2b28;    /* left bar */
  --rail-ink:#ece7da;   /* left bar text */
  --rail-line:#4a443b;  /* left bar rules */
  --red:#ff2a2a;
  --gold:#9a7400;

  --gutter:3vw;
  --maxw:1560px;
  --rail:230px;         /* left bar width */
  --textw:760px;        /* text column width */
}

/* ---------- 2. Page ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--red);color:#000;}
a{color:inherit;text-decoration:none;}
b.plus{font-weight:700;}

/* ---------- 3. Menu (top banner) ---------- */
.banner{
  position:sticky;top:0;z-index:50;
  background:rgba(247,246,242,.95);backdrop-filter:blur(8px);
  border-bottom:4px solid var(--ink);          /* same weight as the red spine */
}
.banner-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:flex-end;gap:20px;
}
.banner nav ul{list-style:none;display:flex;gap:26px;}
.banner nav a{
  font-family:var(--font);font-size:var(--t-body);font-weight:600;color:var(--ink);
  padding:4px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.banner nav a:hover{border-color:var(--gold);}
.banner nav a.active{border-color:var(--red);}

/* ---------- 4. Layout: left bar + text column, red spine between ---------- */
.layout{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:44px;align-items:start;
}
.layout::after{
  content:"";position:absolute;z-index:0;top:0;bottom:0;width:4px;
  left:calc(var(--gutter) + var(--rail) + 20px);background:var(--red);
}

/* ---------- 5. Left bar ---------- */
.rail{
  position:sticky;top:26px;z-index:1;
  padding:30px 22px 26px 22px;background:var(--bg-rail);color:var(--rail-ink);
  max-height:calc(100vh - 52px);overflow-y:auto;scrollbar-width:thin;
  display:flex;flex-direction:column;
  font-size:var(--t-body);
}
.rail .railbrand{                                /* the mark - sans, like the rest of the left bar */
  display:block;font-family:var(--font);font-weight:600;
  font-size:1.875rem;line-height:1;margin-bottom:4px;
}
.rail .railbrand .pipe{color:var(--red);font-weight:400;margin:0 .14em;}   /* qc | Specs - red pipe, quarter letter each side */
.rail .raillineage{margin-bottom:20px;}
.rail .railservice{margin-top:6px;}
.hero-golden{
  width:100%;aspect-ratio:506/358;border:0;display:block;margin:0 0 14px;
  flex:0 1 auto;min-height:0;
}
.rail .railrule{height:1px;background:var(--rail-line);width:100%;margin:14px 0 18px;}
.rail .railmaxim{line-height:1.3;margin:0 0 14px;}
.rail .railfoot{padding-top:20px;border-top:1px solid var(--rail-line);}
.rail .rcontact{margin-top:12px;}
.rail .rcontact a{border-bottom:1px solid var(--rail-line);}
.rail .rcontact a:hover{color:var(--red);border-color:var(--red);}

/* ---------- 6. Text column ---------- */
.body{padding:22px 0 84px;}

/* Headings - all serif */
.body h1,.body h2,.body h3{font-family:var(--font-head);font-weight:600;}
.body h1{font-size:var(--t-title);line-height:1.1;margin-bottom:18px;}                /* Title      */
.body h2{font-size:var(--t-head);line-height:1.25;margin:46px 0 14px;}                /* Heading    */
.body h3{font-size:var(--t-body);line-height:1.25;margin:28px 0 8px;}                 /* Subheading */

/* Body - all sans */
.body p{font-size:var(--t-body);margin-bottom:18px;max-width:var(--textw);}
.body ul{list-style:none;margin:14px 0 18px;max-width:var(--textw);}
.body ol{max-width:var(--textw);}
.body ul li{position:relative;padding-left:22px;margin-bottom:9px;font-size:var(--t-body);}
.body ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:currentColor;border-radius:50%;}
.body .rule{width:100%;height:1px;background:var(--line);margin:18px 0;}
.meta{margin-top:30px;}

/* Links in the text - one style */
.pillar p a,.body .meta a{border-bottom:1px solid var(--red);}
.pillar p a:hover,.body .meta a:hover{color:var(--gold);border-color:var(--gold);}

/* Home: the two client blocks */
.pillars{display:grid;gap:0;margin-top:26px;}
.pillar{border-top:1px solid var(--line);padding:20px 0;}
.pillar:last-child{border-bottom:1px solid var(--line);}
.pillar h3{margin:0 0 6px;}
.pillar p{margin:0;}

/* ---------- 7. Fees table ---------- */
.ptable{width:100%;border-collapse:collapse;margin:18px 0 6px;}
.ptable th{
  text-align:left;font-size:var(--t-small);line-height:1.3;font-weight:600;
  padding:0 14px 8px 0;border-bottom:1px solid var(--line);vertical-align:bottom;
}
.ptable td{font-size:var(--t-body);padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.ptable th:last-child,.ptable td:last-child{text-align:right;padding-right:0;}
.ptable td:last-child{white-space:nowrap;}
.ptable .fee{font-weight:600;}
.ptable th.subhead,.ptable th.subhead:last-child{            /* group labels - serif, red */
  text-align:left;font-family:var(--font-head);font-size:var(--t-body);
  color:var(--red);border-bottom:none;padding-top:.8em;
}

/* ---------- 8. Contact form ---------- */
.inquiry{margin:30px 0 10px;max-width:520px;}
.inquiry .field{margin-bottom:18px;}
.inquiry label{display:block;font-size:var(--t-small);margin-bottom:7px;}
.inquiry label .opt{font-size:var(--t-small);opacity:.7;}
.inquiry input[type=text],.inquiry input[type=email],.inquiry select,.inquiry textarea{
  width:100%;background:#fff;border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:var(--t-body);padding:11px 12px;border-radius:2px;
}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{outline:0;border-color:var(--gold);}
.inquiry input[type=file]{font-family:inherit;font-size:var(--t-small);}
.inquiry textarea{resize:vertical;}
.inquiry button{
  background:var(--red);color:#000;border:0;border-radius:2px;
  font-family:inherit;font-weight:600;font-size:var(--t-body);
  padding:13px 30px;cursor:pointer;transition:background .2s;
}
.inquiry button:hover{background:var(--gold);}
.inquiry .hp{position:absolute;left:-9999px;}
.inquiry .filerow{margin-top:10px;}

/* ---------- 9. Margin notes - OFF (build-v2.py SHOW_NOTES = False) ---------- */
.railnotes,.body .mnote{display:none;}

/* ---------- 10. Narrow screens ---------- */
@media(max-width:820px){
  :root{--t-title:2rem;}
  .layout{grid-template-columns:1fr;gap:0;}
  .layout::after{display:none;}
  .banner-inner{flex-wrap:wrap;gap:10px;justify-content:flex-start;}
  .banner nav ul{gap:6px 16px;flex-wrap:wrap;}
  .banner nav a{white-space:nowrap;}
  .rail{position:static;max-height:none;overflow:visible;padding:20px 18px;
        flex-direction:row;align-items:flex-start;gap:20px;flex-wrap:wrap;}
  .hero-golden{max-width:190px;margin:0;}
  .rail .railfoot{flex:1 1 100%;border:0;padding:0;}
  .body{padding:30px 0 60px;}
}
@media(max-width:640px){
  .ptable thead{display:none;}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%;}
  .ptable tr{border-bottom:1px solid var(--line);padding:12px 0;}
  .ptable td,.ptable td:last-child{border:0;padding:3px 0;text-align:left;white-space:normal;}
  .ptable td:first-child{font-weight:600;padding-bottom:6px;}
  .ptable td[data-label]:not(:first-child){padding:5px 0;}
  .ptable td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-weight:400;font-size:var(--t-small);}
  .ptable th.subhead{display:block;padding:14px 0 0;}
}