/* ==========================================================================
   Blog — listing, article, sticky sidebar.

   Loads only on the blog: none of the 21 ranking service pages pays for it.
   Every value is a token already defined in style.css, so this inherits the
   site's palette and type scale rather than starting a second design system.
   ========================================================================== */

/* ---------- Listing toolbar ---------- */
.blogbar{padding-block:var(--s-8) 0}
.blogbar__inner{display:flex;flex-direction:column;gap:var(--s-5)}

.blogsearch{
  display:flex;align-items:center;gap:var(--s-3);position:relative;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  box-shadow:var(--sh-1);
}
.blogsearch__ico{width:20px;height:20px;color:var(--ink-3);flex:none}
.blogsearch input[type=search]{
  flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);
  padding-block:var(--s-3);
}
.blogsearch input[type=search]::placeholder{color:var(--ink-3)}
.blogsearch input[type=search]:focus{outline:none}
.blogsearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.blogsearch .btn{flex:none}

.blogfil__list{
  display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0;
}
.blogfil__btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:40px;padding:0 var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);
  font-family:var(--font-head);font-size:.875rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;letter-spacing:var(--tr-ui);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.blogfil__btn:hover{border-color:var(--brand);color:var(--brand-deep)}
.blogfil__btn.is-on{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--white)}
.blogfil__n{
  font-size:.75rem;font-weight:700;opacity:.7;
  padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.06);
}
.blogfil__btn.is-on .blogfil__n{background:rgba(255,255,255,.18);opacity:.9}

/* ---------- Card grid ---------- */
.bloglist{padding-block:var(--s-8) var(--sec-y)}
.bloglist__count{color:var(--ink-3);font-size:var(--fs-sm);margin-bottom:var(--s-6)}
.bloglist__grid{
  display:grid;gap:var(--s-6);
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}

.bcard{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--brand-line)}
/* Aspect ratio reserved before the image arrives — zero CLS on the listing. */
.bcard__media{display:block;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.bcard__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.bcard:hover .bcard__img{transform:scale(1.04)}

.bcard__body{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);flex:1}
.bcard__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);margin:0}
.bcard__badge{
  display:inline-block;padding:3px var(--s-3);border-radius:var(--r-pill);
  background:var(--brand-wash);color:var(--brand-deep);
  border:1px solid var(--brand-line);
  font-family:var(--font-head);font-size:.75rem;font-weight:600;
  letter-spacing:var(--tr-ui);text-decoration:none;
}
.bcard__badge:hover{background:var(--white)}
.bcard__date{color:var(--ink-3);font-size:var(--fs-xs)}
.bcard__t{
  margin:0;font-family:var(--font-head);font-size:var(--fs-h4);
  line-height:var(--lh-h4);letter-spacing:var(--tr-h4);color:var(--ink);
}
.bcard__t a{color:inherit;text-decoration:none}
.bcard:hover .bcard__t a{color:var(--brand-deep)}
.bcard__x{margin:0;font-size:var(--fs-xs);line-height:1.65;color:var(--ink-3);flex:1}
.bcard__more{margin:0}
.bcard__more a{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-head);font-size:.9375rem;font-weight:600;
  color:var(--brand-deep);text-decoration:none;
}
.bcard__more svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.bcard__more a:hover svg{transform:translateX(3px)}

/* ==========================================================================
   Article hero — editorial, left-aligned.

   The listing and utility pages keep the centred .hero--svc--compact treatment;
   an article does not, because its hero has to line up with the body copy
   underneath it. Everything here sits in the same .wrap as the article, so the
   breadcrumb, H1, meta line and first paragraph all share one left edge and the
   page reads as a single column.
   ========================================================================== */
.arthero{padding-block:var(--s-6) var(--s-7);text-align:left}

.arthero .hero--svc__copy{max-width:none;margin-inline:0}
.arthero .crumbs__list{justify-content:flex-start}
.arthero .crumbs--on-dark{padding-block:0 var(--s-5)}

.arthero .eyebrow{margin:0 0 var(--s-3)}

/* Full container width — a narrower cap pushed long headlines onto a third
   line while leaving the right half of the band empty. */
.arthero h1{max-width:100%;margin:0;text-wrap:balance}

.arthero__meta{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:var(--s-3);
  margin-top:var(--s-4);color:#a9c4b0;font-size:var(--fs-sm);
}
.arthero__sep{opacity:.5}

/* The image straddles the hero boundary: dark behind its top, page white behind
   its bottom. Same .wrap as the hero and the article, so all three align. */
.artmedia{
  margin:0;
  background:linear-gradient(to bottom,var(--brand-ink) 62%,var(--white) 62%);
}
.artmedia .wrap{padding-block:0}
.artmedia__img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
}

.article{padding-block:var(--s-8)}

.article__shell{display:grid;gap:var(--s-8);align-items:start}
.article__main{min-width:0}
.article__body>*+*{margin-top:var(--s-5)}

/* ---------- Injected photography ---------- */
.artfig{margin:var(--s-8) 0}
.artfig img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.artfig figcaption{
  margin-top:var(--s-3);font-size:var(--fs-xs);line-height:1.6;
  color:var(--ink-3);border-left:3px solid var(--brand-line);padding-left:var(--s-3);
}
/* Images that came with the article keep the same treatment. */
.article__body .wp-block-image{margin:var(--s-8) 0}
.article__body .wp-block-image img{border-radius:var(--r-lg)}
.article__body figcaption{
  margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--ink-3);
}

/* ---------- In-article CTA ---------- */
.artcta{
  margin:var(--s-8) 0;padding:var(--s-6);
  border-radius:var(--r-lg);border:1px solid var(--brand-line);
  background:var(--brand-wash);
}
.artcta--urgent{border-color:#f0c88a;background:#fdf6ea}
.artcta__eyebrow{
  margin:0 0 var(--s-2);font-family:var(--font-head);font-size:.75rem;font-weight:700;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--brand-deep);
}
.artcta--urgent .artcta__eyebrow{color:#8a5a11}
.artcta__t{
  margin:0 0 var(--s-2);font-family:var(--font-head);
  font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4);
  font-weight:700;color:var(--ink);
}
.artcta__x{margin:0 0 var(--s-5);font-size:var(--fs-xs);line-height:1.65;color:var(--ink-2)}
.artcta__act{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4);margin:0}
.artcta__call{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--font-head);font-weight:700;color:var(--brand-deep);text-decoration:none;
}
.artcta__call small{font-weight:500;color:var(--ink-3)}
.artcta__call:hover{color:var(--brand-darker)}

/* ---------- Sidebar ---------- */
.article__aside{min-width:0}

.toc{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);padding:var(--s-5);margin-bottom:var(--s-6);
}
.toc__h{
  display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);
  font-family:var(--font-head);font-size:.8125rem;font-weight:700;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3);
}
.toc__h svg{width:16px;height:16px;flex:none}
.toc__list{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc__item{margin:0}
.toc__item a{
  display:block;padding:7px var(--s-3);border-left:2px solid var(--line);
  font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2);text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.toc__item--h3 a{padding-left:var(--s-6);font-size:.8125rem;color:var(--ink-3)}
.toc__item a:hover{color:var(--brand-deep);background:var(--brand-wash)}
.toc__item a[aria-current]{
  color:var(--brand-deep);border-left-color:var(--brand-deep);
  background:var(--brand-wash);font-weight:600;
}

.artform{
  border:1px solid var(--brand-line);border-radius:var(--r-lg);
  background:var(--white);padding:var(--s-5);box-shadow:var(--sh-1);
}
.artform__eyebrow{
  margin:0 0 var(--s-1);font-family:var(--font-head);font-size:.75rem;font-weight:700;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--brand-deep);
}
.artform__t{
  margin:0 0 var(--s-4);font-family:var(--font-head);font-size:1.0625rem;
  font-weight:700;line-height:1.3;letter-spacing:var(--tr-h4);color:var(--ink);
}
.artform .quote-form{padding:0;background:none;border:0;box-shadow:none}
.artform__call{
  display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--line);
  color:var(--ink-2);text-decoration:none;
}
.artform__call svg{width:20px;height:20px;color:var(--brand-deep);flex:none}
.artform__call small{display:block;font-size:.75rem;color:var(--ink-3)}
.artform__call strong{font-family:var(--font-head);color:var(--brand-deep)}

.arttrust{
  list-style:none;margin:var(--s-4) 0 0;padding:var(--s-4) 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s-3);
}
.arttrust li{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--fs-xs);color:var(--ink-2);
}
.arttrust svg{width:16px;height:16px;flex:none;color:var(--brand-deep)}
.arttrust .ico--star{color:var(--warn)}

/* ---------- Share, author, prev/next ---------- */
.artshare{
  margin-top:var(--s-9);padding-top:var(--s-6);border-top:1px solid var(--line);
}
.artshare__h{
  margin:0 0 var(--s-4);font-family:var(--font-head);font-size:.8125rem;font-weight:700;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3);
}
.artshare__list{display:flex;flex-wrap:wrap;gap:var(--s-3);list-style:none;margin:0;padding:0}
.artshare__list a{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:40px;padding:0 var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.artshare__list svg{width:16px;height:16px}
.artshare__list a:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-wash)}

.authorbox{
  display:flex;gap:var(--s-5);align-items:flex-start;
  margin-top:var(--s-8);padding:var(--s-6);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.authorbox__img{border-radius:50%;display:block}
.authorbox__label{
  margin:0;font-size:.75rem;letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.authorbox__name{margin:2px 0 var(--s-2);font-family:var(--font-head);font-weight:700;color:var(--ink)}
.authorbox__bio{margin:0;font-size:var(--fs-xs);line-height:1.65;color:var(--ink-2)}

.artnav{display:grid;gap:var(--s-4);margin-top:var(--s-8)}
.artnav__link{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);
  text-decoration:none;background:var(--white);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.artnav__link:hover{border-color:var(--brand-line);box-shadow:var(--sh-2)}
.artnav__link--next{text-align:right}
.artnav__dir{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--brand-deep);
}
.artnav__link--next .artnav__dir{justify-content:flex-end}
.artnav__dir svg{width:14px;height:14px}
.artnav__t{font-family:var(--font-head);font-weight:600;color:var(--ink);line-height:1.4}

/* ---------- Related ---------- */
.artrelated{background:var(--surface);padding-block:var(--sec-y)}
.artrelated__block+.artrelated__block{margin-top:var(--s-10)}
.artrelated__h{
  font-family:var(--font-head);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:var(--tr-h3);color:var(--ink);margin:0 0 var(--s-6);
}
.svccards{display:grid;gap:var(--s-4);list-style:none;margin:0;padding:0}
.svccard a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  text-decoration:none;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.svccard a:hover{border-color:var(--brand-line);transform:translateY(-2px);box-shadow:var(--sh-2)}
.svccard__t{font-family:var(--font-head);font-weight:600;color:var(--ink)}
.svccard__arrow{width:18px;height:18px;color:var(--brand-deep);flex:none;transition:transform var(--dur) var(--ease)}
.svccard a:hover .svccard__arrow{transform:translateX(3px)}

/* ---------- Reading aids the content can opt into ---------- */
.article__body blockquote{
  margin:var(--s-8) 0;padding:var(--s-5) var(--s-6);
  border-left:4px solid var(--brand);background:var(--brand-wash);
  border-radius:0 var(--r) var(--r) 0;
  font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--ink-2);
}
.article__body table{
  width:100%;border-collapse:collapse;margin:var(--s-8) 0;
  font-size:var(--fs-sm);
}
.article__body thead th{
  background:var(--brand-ink);color:var(--white);text-align:left;
  font-family:var(--font-head);font-weight:600;
}
.article__body th,.article__body td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.article__body tbody tr:nth-child(even){background:var(--surface)}
.article__body ul,.article__body ol{padding-left:var(--s-6)}
.article__body li+li{margin-top:var(--s-2)}
.article__body ul{list-style:disc}
.article__body ol{list-style:decimal}
.article__body li::marker{color:var(--brand-deep)}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .blogbar__inner{gap:var(--s-6)}
  .artnav{grid-template-columns:1fr 1fr}
  .svccards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

@media (min-width:1024px){
  .article__shell{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-9)}
  /* The nav is the only pinned bar on inner pages, so the sidebar clears it. */
  .article__aside{position:sticky;top:calc(var(--svcnav-h) + var(--s-5));max-height:calc(100vh - var(--svcnav-h) - var(--s-8));overflow-y:auto;scrollbar-width:thin}
  .toc__list{max-height:38vh;overflow-y:auto;scrollbar-width:thin}
  .artmedia__img{max-height:520px;object-fit:cover}
}

@media (max-width:1023px){
  /* The sidebar becomes a normal block below the article; the fixed bottom bar
     already carries Call and Free Quote, so nothing floats over the text. */
  .article__aside{margin-top:var(--s-9)}
  .toc{position:relative}
}

@media (prefers-reduced-motion:reduce){
  .bcard,.bcard__img,.svccard a,.svccard__arrow,.bcard__more svg{transition:none!important}
  .bcard:hover{transform:none}
}