/* ===========================================================================
   CernoGlobus — Field Intelligence briefs
   One stylesheet for every service. Change --accent per service via
   the data-service attribute overrides at the bottom.
   =========================================================================== */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --ink:#14181F; --body:#333A42; --muted:#7C6F63; --rule:#E5E1DB;
  --paper:#EDEBE7; --card:#FFFFFF;
  --accent:#B4460E; --accent-lt:#E8873F; --accent-dk:#9B3C0C;
  --tint:#F6F4F1; --tint2:#FAF8F6;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--body);font-family:var(--serif);line-height:1.65;}
.sans{font-family:var(--sans);}
[hidden]{display:none !important;}

/* ---------------- nav ---------------- */
nav{background:var(--ink);position:sticky;top:0;z-index:50;}
.navin{max-width:1000px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{font-family:var(--sans);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent-lt);font-weight:700;text-decoration:none;}
.navlinks{display:flex;gap:24px;align-items:center;}
.navlinks a{font-family:var(--sans);font-size:13px;color:#9AA3AF;text-decoration:none;letter-spacing:.2px;}
.navlinks a:hover{color:#fff;}
.navcta{background:var(--accent);color:#fff !important;padding:8px 16px;font-weight:600;font-size:12.5px !important;}
.navcta:hover{background:var(--accent-dk);}

/* ---------------- shell ---------------- */
.shell{max-width:760px;margin:0 auto;padding:0 20px 80px;}
.shell.wide{max-width:1000px;}
.card{background:var(--card);border:1px solid #DCD8D2;border-top:none;}

/* ---------------- masthead ---------------- */
header.mast{background:var(--ink);color:#fff;padding:38px 26px 30px;}
header.mast .kick{font-family:var(--sans);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent-lt);font-weight:700;margin-bottom:14px;}
header.mast h1{font-size:36px;line-height:1.04;font-weight:400;letter-spacing:-1px;color:#fff;}
header.mast .rule{border-top:1px solid #333A45;margin:18px 0 12px;}
header.mast .meta{font-family:var(--sans);font-size:13px;color:#9AA3AF;letter-spacing:.2px;}
@media(min-width:681px){
  header.mast{padding:56px 56px 44px;}
  header.mast h1{font-size:54px;}
  header.mast .rule{margin:22px 0 14px;}
}

/* ---------------- body ---------------- */
.pad{padding:0 26px;}
@media(min-width:681px){.pad{padding:0 56px;}}

.lede{font-size:16.5px;line-height:1.7;color:#24292F;margin-top:18px;}
.lede:first-child{margin-top:40px;}
@media(min-width:681px){.lede{font-size:19px;}}

.toc{background:var(--tint);border-left:3px solid var(--accent);padding:22px 26px;margin:32px 0 8px;}
.toc .lbl{font-family:var(--sans);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:12px;}
.toc ul{list-style:none;}
.toc li{font-family:var(--sans);font-size:14.5px;line-height:1.65;color:#33383F;padding-left:16px;position:relative;margin-bottom:4px;}
.toc li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;background:var(--accent);border-radius:50%;}
.toc a{color:#33383F;text-decoration:none;border-bottom:1px solid transparent;}
.toc a:hover{border-bottom-color:var(--accent);}

article.item{padding-top:44px;}
article.item + article.item{border-top:1px solid var(--rule);margin-top:44px;}
.kicker{font-family:var(--sans);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:12px;}
article.item h2{font-size:25px;line-height:1.22;font-weight:400;color:var(--ink);letter-spacing:-.4px;margin-bottom:18px;}
article.item p{font-size:16.5px;line-height:1.72;color:var(--body);margin-bottom:16px;}
@media(min-width:681px){
  article.item h2{font-size:31px;}
  article.item p{font-size:17.5px;}
}
.why{background:var(--tint2);border-left:2px solid #C9C2B8;padding:16px 20px;margin:22px 0 14px;
  font-family:var(--sans);font-size:15px;line-height:1.6;color:#4A5058;}
.why b{color:var(--ink);}
.src{font-family:var(--sans);font-size:13.5px;}
.src a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.18);}
.src a:hover{border-bottom-color:var(--accent);}

/* ---------------- subscribe ---------------- */
.sub{background:var(--tint);border:1px solid #E0DBD3;padding:26px 24px;margin-top:52px;}
@media(min-width:681px){.sub{padding:34px 36px;}}
.sub h3{font-size:25px;font-weight:400;color:var(--ink);margin-bottom:10px;letter-spacing:-.3px;}
.sub p{font-family:var(--sans);font-size:15px;color:#5B554D;margin-bottom:20px;line-height:1.6;}
.subform{display:flex;gap:10px;flex-wrap:wrap;}
.subform input{flex:1 1 260px;min-width:0;padding:13px 15px;border:1px solid #CFC8BE;background:#fff;
  font-family:var(--sans);font-size:15px;color:var(--ink);}
.subform input:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.subform input.err{border-color:var(--accent);}
.subform button{padding:13px 26px;background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;}
.subform button:hover{background:var(--accent-dk);}
.subform button:disabled{opacity:.6;cursor:default;}
.subnote{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:14px;margin-bottom:0 !important;}
.subok{font-family:var(--sans);font-size:15px;color:#1E6B3A;font-weight:600;}

/* ---------------- product ---------------- */
.prod{background:var(--ink);color:#fff;padding:28px 26px;margin-top:52px;}
@media(min-width:681px){.prod{padding:38px 40px;}}
.prod .k{font-family:var(--sans);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--accent-lt);font-weight:700;margin-bottom:14px;}
.prod .intro{font-size:17px;color:#C8CDD4;margin-bottom:26px;}
.cols{display:flex;gap:34px;flex-wrap:wrap;}
.col{flex:1 1 220px;min-width:0;}
.col h4{font-family:var(--sans);font-size:16px;color:#fff;font-weight:700;margin-bottom:8px;}
.col p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:#9AA3AF;}
.btn{display:inline-block;margin-top:28px;background:var(--accent);color:#fff;text-decoration:none;
  padding:13px 28px;font-family:var(--sans);font-size:14.5px;font-weight:700;}
.btn:hover{background:var(--accent-dk);}

/* ---------------- signoff / footer ---------------- */
.signoff{padding:42px 26px 0;font-size:16.5px;line-height:1.72;}
@media(min-width:681px){.signoff{padding:42px 56px 0;font-size:17.5px;}}
.signoff .name{margin-top:16px;}
.signoff .role{font-family:var(--sans);font-size:14px;color:var(--muted);}
footer.pg{padding:28px 26px 36px;margin-top:34px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:13px;line-height:1.7;color:#8A8177;}
@media(min-width:681px){footer.pg{padding:34px 56px 46px;}}
footer.pg a.back{color:var(--accent);text-decoration:none;font-weight:600;}
footer.pg .arch{margin-top:14px;}

/* ---------------- archive / directory ---------------- */
.listwrap{padding:36px 26px 46px;}
@media(min-width:681px){.listwrap{padding:44px 56px 56px;}}
.rowlink{display:block;text-decoration:none;color:inherit;padding:22px 0;border-bottom:1px solid var(--rule);}
.rowlink:first-of-type{border-top:1px solid var(--rule);}
.rowlink:hover h3{color:var(--accent);}
.rowmeta{font-family:var(--sans);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:7px;}
.rowlink h3{font-size:22px;font-weight:400;line-height:1.28;color:var(--ink);letter-spacing:-.3px;margin-bottom:7px;}
.rowlink p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:#5B554D;}
.rowcount{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:8px;}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.tile{display:block;text-decoration:none;color:inherit;background:var(--tint);
  border:1px solid #E0DBD3;padding:24px;transition:border-color .15s;}
.tile:hover{border-color:var(--accent);}
.tile .t{font-family:var(--sans);font-size:10px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:9px;}
.tile h3{font-size:21px;font-weight:400;color:var(--ink);line-height:1.25;margin-bottom:8px;letter-spacing:-.2px;}
.tile p{font-family:var(--sans);font-size:14px;line-height:1.55;color:#5B554D;}

/* ---------------- states ---------------- */
.state{padding:70px 26px;text-align:center;font-family:var(--sans);color:var(--muted);font-size:15px;}
.state h2{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);margin-bottom:10px;}
.state a{color:var(--accent);}
.skel{height:14px;background:#E9E5DF;border-radius:2px;margin:0 auto 12px;max-width:520px;
  animation:pulse 1.3s ease-in-out infinite;}
.skel.w1{max-width:300px;height:30px;margin-bottom:22px;}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:.95}}

/* ---------------- per-service accent overrides ----------------
   Add one block per service. The <html> tag gets data-service="<id>".
   ------------------------------------------------------------- */
[data-service="hvac"]      {--accent:#B4460E;--accent-lt:#E8873F;--accent-dk:#9B3C0C;}
[data-service="plumbing"]  {--accent:#1D5B7E;--accent-lt:#5FA8CE;--accent-dk:#164A67;}
[data-service="electrical"]{--accent:#8A6A0B;--accent-lt:#D9AF3C;--accent-dk:#715708;}
[data-service="roofing"]   {--accent:#5C4033;--accent-lt:#A98266;--accent-dk:#483227;}
[data-service="landscaping"]{--accent:#2F6B3A;--accent-lt:#6FAE7B;--accent-dk:#25552E;}

/* ---- product CTA: centred so the dark panel doesn't trail off empty ---- */
.prodcta{text-align:center;margin-top:30px;}
.prodcta .btn{margin-top:0;}

/* ---- subscribe: links out to the contact form rather than posting inline ---- */
.sub .subbtn{margin-top:4px;}

/* ---- secondary "or email us" line under the product CTA ---- */
.ctaalt{margin-top:14px;font-family:var(--sans);font-size:14px;color:#9AA3AF;}
.ctaalt a{color:var(--accent-lt);text-decoration:none;border-bottom:1px solid rgba(232,135,63,.4);}
.ctaalt a:hover{border-bottom-color:var(--accent-lt);}