/* BLOG. The list (/blog, /blogue) and the article pages (/blog/<slug>), rendered on the server (api/blog) into
   this page's markup. Same quiet dark palette as FAQ / Industries (info.css supplies the hero, eyebrow, button and
   closing call to action); this file adds the reading column, the article list and the short contact form. */
html:has(body[data-page=blog]){--bg:#030504;--fg:#EEF1EF;--fg2:#A9B0AC;--mute:#6F7672;--line:rgba(255,255,255,.12);background:#030504}
html:has(body[data-page=blog]) .brand img{filter:invert(1)}
html:has(body[data-page=blog]) .links{background:#111614;border-color:rgba(255,255,255,.08)}
html:has(body[data-page=blog]) .links a:hover,html:has(body[data-page=blog]) .talk{color:#0b0d0c}
body[data-page=blog]{background:#030504 radial-gradient(80% 55% at 78% 8%,#0b2a1d 0%,#030504 62%) no-repeat;color:var(--fg);min-height:100vh}

.blg .in-hero{min-height:clamp(380px,52vh,620px)}
.blg header.in-hero{width:var(--w);margin:0 auto;position:relative}
.bl-alt a[href^="tel:"]{white-space:nowrap}
.blg .in-lede{max-width:40rem}
.bl-h{font-size:clamp(2.3rem,4.2vw,4rem);line-height:1.02;letter-spacing:-.045em;max-width:22ch}
.bl-back{display:inline-flex;align-items:center;gap:.5rem;color:var(--fg2);font-size:.95rem;margin-bottom:2.2rem;align-self:flex-start;transition:color .4s}
.bl-back:hover{color:var(--g)}
.bl-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;color:var(--mute);font-size:.95rem;margin-top:1.6rem}

/* article: a side note with the related service, then one reading column */
.bl-main{display:grid;grid-template-columns:4fr 8fr;gap:4rem;padding:2rem 0 8vh;align-items:start;border-top:1px solid var(--line)}
.bl-side{position:sticky;top:7.5rem;padding-top:2.4rem;color:var(--fg2);font-size:.98rem;line-height:1.55;max-width:20rem;display:grid;gap:1rem}
.bl-side b{color:var(--fg);font-weight:500;font-size:1.2rem;letter-spacing:-.02em}
.bl-go{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;color:var(--fg);font-size:.95rem;border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:color .4s,border-color .4s}
.bl-go:hover{color:var(--g);border-color:var(--g)}
.bl-side .bl-go+.bl-go{margin-top:-.2rem}

.bl-body{pointer-events:auto;-webkit-user-select:text;user-select:text;max-width:44rem;padding-top:2.4rem;color:#D3D8D5;font-size:1.1rem;line-height:1.72}
.bl-body>*+*{margin-top:1.15rem}
.bl-body h2{color:var(--fg);font-weight:500;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.15;letter-spacing:-.035em;margin-top:3rem}
.bl-body h3{color:var(--fg);font-weight:500;font-size:1.28rem;line-height:1.25;letter-spacing:-.02em;margin-top:2.2rem}
.bl-body h2+*,.bl-body h3+*{margin-top:.8rem}
.bl-body a{color:var(--g);border-bottom:1px solid rgba(22,196,127,.35);transition:border-color .4s}
.bl-body a:hover{border-color:var(--g)}
.bl-body strong{color:var(--fg);font-weight:500}
.bl-body ul,.bl-body ol{display:grid;gap:.5rem;padding-left:1.2rem}
.bl-body ul{list-style:none;padding-left:0}
.bl-body ul>li{position:relative;padding-left:1.2rem}
.bl-body ul>li:before{content:'';position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--g)}
.bl-body ol>li{padding-left:.3rem}
.bl-body ol>li::marker{color:var(--fg2)}
.bl-body li>ul,.bl-body li>ol{margin-top:.5rem}
.bl-body blockquote{border-left:2px solid var(--g);padding:.2rem 0 .2rem 1.4rem;color:var(--fg);font-size:1.18rem;line-height:1.55}
.bl-body code{font-family:inherit;background:#0E1412;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:.05em .35em;font-size:.95em}
.bl-body figure{margin-top:2rem;margin-bottom:.8rem}
.bl-body img{display:block;width:100%;height:auto;border-radius:14px;background:#0E1412}
.bl-body figcaption{color:var(--mute);font-size:.9rem;margin-top:.7rem}

/* short contact form after the article */
.bl-cta{display:grid;grid-template-columns:5fr 7fr;gap:4rem;padding:6rem 0;border-top:1px solid var(--line);align-items:start}
.bl-cta h2{font-weight:500;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.04;letter-spacing:-.045em;margin-top:1.4rem;max-width:15ch}
.bl-cta .bl-say{color:var(--fg2);line-height:1.55;margin-top:1.2rem;max-width:26rem}
.bl-cta .bl-alt{color:var(--mute);font-size:.95rem;line-height:1.55;margin-top:1.6rem;max-width:26rem}
.bl-cta .bl-alt a{color:var(--fg);border-bottom:1px solid var(--line);transition:color .4s,border-color .4s}
.bl-cta .bl-alt a:hover{color:var(--g);border-color:var(--g)}
.bl-form{background:#0A0F0D;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:1.5rem}
.bl-form .two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.bl-form .f{display:flex;flex-direction:column}
.bl-form label{color:var(--fg2);font-size:.92rem;margin-bottom:.35rem}
.bl-form label span{color:var(--mute)}
.bl-form input,.bl-form textarea{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.18);color:#F3F6F4;font:400 1.08rem/1.4 var(--d);padding:.55rem 0 .7rem;border-radius:0;outline:none;resize:vertical;cursor:text;transition:border-color .4s}
.bl-form textarea{min-height:5.5rem}
.bl-form input:focus,.bl-form textarea:focus{border-color:var(--g)}
.bl-form input::placeholder,.bl-form textarea::placeholder{color:#59605C}
.bl-form .f.err input,.bl-form .f.err textarea{border-color:#E5484D}
.bl-form .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.bl-form button{border:0;cursor:pointer}
.bl-form button[aria-busy=true]{opacity:.7}
.bl-note{color:var(--fg2);font-size:.92rem;min-height:1.3em}
.bl-note.bad{color:#FF8A8E}

/* the list: one hairline row per article */
.bl-index{padding:1rem 0 6rem}
.bl-index+.in-cta{border-top:0;padding-top:2rem}
.bl-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.bl-cats a{padding:.55rem 1rem;border-radius:99px;background:#0E1412;border:1px solid rgba(255,255,255,.08);font-size:.92rem;color:#DDE2DF;transition:background .4s,color .4s,border-color .4s}
.bl-cats a:hover{border-color:rgba(22,196,127,.5)}
.bl-cats a[aria-current]{background:var(--fg);color:#0b0d0c;border-color:var(--fg)}
.bl-list{border-top:1px solid var(--line)}
.bl-row{display:grid;grid-template-columns:6fr 6fr;gap:3rem;padding:2.2rem 0;border-bottom:1px solid var(--line);transition:color .4s}
.bl-row h2,.bl-row h3{font-weight:500;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.035em;line-height:1.15;transition:color .4s}
.bl-row:hover h2,.bl-row:hover h3{color:var(--g)}
.bl-rm{color:var(--mute);font-size:.92rem;margin-top:.7rem}
.bl-row .d{color:var(--fg2);font-size:1rem;line-height:1.6;max-width:36rem}
.bl-empty{color:var(--fg2);padding:2.4rem 0;border-bottom:1px solid var(--line)}
.bl-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2.2rem}
.bl-pager a{color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:color .4s,border-color .4s}
.bl-pager a:hover{color:var(--g);border-color:var(--g)}
.bl-more{padding:2rem 0 8rem}
.bl-more>h2{font-weight:500;font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.035em;margin-bottom:1.6rem}

@media (hover:none){.bl-form button{cursor:pointer}}
@media (max-width:900px){
  .blg .in-hero{min-height:auto;padding:7.5rem 0 2.4rem}
  .bl-h{font-size:clamp(2rem,8.4vw,2.8rem)}
  .bl-main{grid-template-columns:1fr;gap:0;padding:0 0 6vh}
  .bl-side{position:static;order:2;max-width:none;padding-top:2.4rem;margin-top:2.4rem;border-top:1px solid var(--line)}
  .bl-body{font-size:1.04rem}
  .bl-cta{grid-template-columns:1fr;gap:2rem;padding:4rem 0}
  .bl-form .two{grid-template-columns:1fr}
  .bl-row{grid-template-columns:1fr;gap:.9rem;padding:1.8rem 0}
  .bl-more{padding-bottom:5rem}
}
.bl-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1.6rem}
.bl-tbl table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.bl-tbl th,.bl-tbl td{text-align:left;vertical-align:top;padding:.7rem .9rem .7rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.bl-tbl th{color:var(--fg);font-weight:500;white-space:nowrap}