/* Metric-matched fallback for Space Mono.
   Measured in Chrome: Space Mono's advance width is 111.3% of Consolas, so mono text
   reflowed when the webfont swapped in — the article byline went from one line to two
   and pushed the body down 26px (CLS 0.096). Scaling the fallback removes the reflow
   without blocking render. Every mono element here sets an explicit unitless
   line-height, so size-adjust changes width only. Verified on Windows/Consolas;
   platforms without Consolas fall through to the stack below, unchanged. */
@font-face{font-family:'Space Mono Fallback';src:local('Consolas');size-adjust:111.3%}
/* Editorial system for the blog: index, articles, and the long-form reading furniture.
   Every rule is scoped to .blog-page so portfolio and service pages are untouched. */
.blog-page{
  --ink:#151713;
  --ink-soft:#62675b;
  --ink-faint:#8a8f80;/* decorative marks only: 3:1 on paper */
  --paper:#f4f4ef;
  --surface:#e9ebe1;
  --surface-deep:#e2e5d8;
  --line:#d6d9cd;
  --rule:#c9cdbe;
  --accent:#d8ff33;
  --header-height:5.5rem;
  --shell:min(calc(100% - 2.5rem),82rem);
  --measure:46ch;/* ~68-70 characters in Outfit at the sizes below */
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Outfit','Segoe UI',system-ui,sans-serif;
  --mono:'Space Mono','Space Mono Fallback',Consolas,monospace;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.blog-page *,.blog-page *::before,.blog-page *::after{box-sizing:border-box}
/* :where() keeps the reset at zero specificity so the layout rules below win. */
.blog-page :where(h1,h2,h3,h4,p,figure,ul,ol,blockquote,table){margin:0}
.blog-page a{color:inherit;text-underline-offset:.22em}
.blog-page img{display:block;max-width:100%;height:auto}
.blog-page ::selection{background:var(--accent);color:var(--ink)}
.blog-root{scroll-padding-top:calc(5.5rem + 1.5rem);scroll-behavior:smooth}

/* ---------- Site chrome ---------- */
.blog-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.blog-header-inner{width:var(--shell);margin-inline:auto;min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.blog-brand{display:inline-flex;align-items:center;gap:.8rem;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.blog-brand>span{display:grid;place-items:center;width:2.5rem;height:2.5rem;background:var(--ink);color:var(--paper);border-radius:.25rem;font-size:.7rem;transform:rotate(-5deg)}
.blog-nav{display:flex;align-items:center;gap:1.75rem;font-size:.88rem}
.blog-nav a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.blog-nav a:hover{text-decoration:underline}
.blog-nav a[aria-current='page']{font-weight:500;text-decoration:underline;text-underline-offset:.35em}
.blog-nav .blog-nav-cta{padding:.6rem 1rem;min-height:2.6rem;background:var(--accent);border-radius:999px;white-space:nowrap}

.blog-shell{width:var(--shell);margin-inline:auto}
.blog-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-block:1.75rem .5rem;color:var(--ink-soft);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em}
.blog-breadcrumb a{text-decoration:none}
.blog-breadcrumb a:hover{text-decoration:underline}
.blog-breadcrumb [aria-current='page']{color:var(--ink-soft)}

/* ---------- Index ---------- */
.blog-index-head{padding-block:clamp(2rem,4vw,3.5rem) clamp(2.5rem,4vw,3.5rem);border-bottom:1px solid var(--rule)}
.blog-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.blog-index-head h1{max-width:16ch;margin-top:1.1rem;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,1.4rem + 4vw,4.25rem);line-height:1.05;letter-spacing:-.03em}
.blog-index-head p{max-width:46ch;margin-top:1.4rem;color:var(--ink-soft);font-size:1.0625rem;line-height:1.7}
.blog-count{margin-top:1.75rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem;padding-block:clamp(2.5rem,4vw,3.5rem) clamp(3rem,6vw,5rem)}
.blog-card{position:relative;display:flex;flex-direction:column;min-width:0;padding-top:1.4rem;border-top:1px solid var(--line)}
.blog-card-thumb{margin:0 0 1.25rem;aspect-ratio:16/10;background:var(--surface);border:1px solid var(--line);border-radius:.35rem;overflow:hidden}
.blog-card-thumb img{width:100%;height:100%;object-fit:contain;padding:1.25rem}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.blog-card-meta span[aria-hidden]{color:var(--ink-faint)}
.blog-card h2{margin-top:.9rem;font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.22;letter-spacing:-.015em;text-wrap:balance}
.blog-card h2 a{text-decoration:none}
.blog-card h2 a::after{content:'';position:absolute;inset:0}
.blog-card:hover h2 a{text-decoration:underline;text-underline-offset:.18em}
.blog-card p{margin-top:.8rem;color:var(--ink-soft);font-size:.95rem;line-height:1.65}
.blog-card-more{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;margin-top:auto;padding-top:1rem;font-size:.85rem;font-weight:500}
.blog-card-more span{transition:transform 180ms cubic-bezier(.22,1,.36,1)}
.blog-card:hover .blog-card-more span{transform:translate(2px,-2px)}

/* ---------- Article ---------- */
/* Article pages run to a narrower shell so the measure fills its column instead of stranding whitespace. */
.blog-shell--article{width:min(calc(100% - 2.5rem),64rem)}
.blog-article-shell{display:grid;grid-template-columns:minmax(0,1fr) 14rem;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-bottom:clamp(3rem,5vw,4.5rem)}
.blog-article-col{min-width:0}
.blog-article{min-width:0}
.blog-article-shell--plain{grid-template-columns:minmax(0,1fr)}
.article-head{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem);border-bottom:1px solid var(--rule)}
.article-category{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.article-head h1{
  max-width:19ch;
  margin-top:1rem;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.95rem,1.2rem + 3.2vw,3.75rem);
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.article-head h1.is-long{font-size:clamp(1.9rem,1.05rem + 3.05vw,3.25rem);max-width:22ch}
.article-standfirst{max-width:52ch;margin-top:1.4rem;color:var(--ink-soft);font-size:1.125rem;line-height:1.7}
.article-byline{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin-top:1.8rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--ink-soft)}
.article-byline a{font-weight:700;text-decoration:none}
.article-byline a:hover{text-decoration:underline}
.article-byline .sep{color:var(--ink-faint)}

/* Prose */
/* Prose holds the measure; package cards, price rows and tables use the whole column. */
.article-body{padding-top:clamp(1.75rem,3vw,2.5rem)}
.article-body>:not(.pkg-grid):not(.article-table-scroll):not(.pricing-grid){max-width:var(--measure)}
.article-body>*+*{margin-top:1.35rem}
.article-body p{line-height:1.78}
.article-body [id]{scroll-margin-top:calc(var(--header-height) + 1.5rem)}
.article-body strong{font-weight:600}
.article-body em{font-style:italic}
.article-body a:not(.btn){color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--rule)}
.article-body a:not(.btn):hover{text-decoration-color:currentColor}

.article-body .section-block{display:flex;align-items:baseline;gap:1rem;margin-top:3.25rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.article-body .section-number,.article-body .step-badge{flex:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-soft);padding-top:.35rem}
.article-body h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,1.15rem + 1vw,2rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.article-body h2 em{font-style:italic}
.article-body h3{margin-top:2.25rem;font-size:clamp(1.1rem,1rem + .35vw,1.25rem);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.article-body h3+p{margin-top:.7rem}

.article-body ul,.article-body ol{padding-left:1.35rem}
.article-body li+li{margin-top:.6rem}
.article-body li::marker{color:var(--ink-faint)}
.article-body ol.numbered-list,.article-body ol.checklist{list-style:none;padding-left:0;counter-reset:step}
.article-body ol.numbered-list>li,.article-body ol.checklist>li{position:relative;counter-increment:step;padding-left:2.6rem}
.article-body ol.numbered-list>li::before,.article-body ol.checklist>li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.28em;
  font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);
}

.article-body blockquote{
  margin-top:2.25rem;
  padding:.25rem 0 .25rem 1.6rem;
  border-left:2px solid var(--ink);
  font-family:var(--display);
  font-size:1.2rem;
  font-style:italic;
  line-height:1.55;
}
.article-body .article-divider{height:1px;margin-block:2.75rem;background:var(--rule)}
/* A divider immediately before a section heading would otherwise draw two rules. */
.article-body .article-divider+.section-block{margin-top:2.75rem;padding-top:0;border-top:0}
.article-body .highlight-box{padding:1.15rem 1.35rem;border-left:2px solid var(--rule);background:var(--surface);border-radius:0 .3rem .3rem 0}
.article-body .highlight-box p{font-size:.975rem;line-height:1.7}
.article-body .highlight-box+.highlight-box{margin-top:.75rem}

.article-body .case-study{margin-top:2.5rem;padding:1.6rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface)}
.article-body .case-study-label{font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.article-body .case-study h3{margin-top:.7rem;font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.article-body .case-study p{margin-top:.9rem;font-size:.975rem}
.article-body .results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.article-body .result-card{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.article-body .result-card .num{font-family:var(--display);font-size:1.5rem;line-height:1.1}
.article-body .result-card .label{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);line-height:1.4}

.article-body .process-step{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1.25rem;margin-top:2.25rem}
.article-body .step-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--rule);border-radius:50%;font-family:var(--mono);font-size:.8rem}
.article-body .step-content h3{margin-top:.3rem}
.article-body .step-content p+p{margin-top:.9rem}

.article-body .pricing-grid{margin-top:1.5rem;border-top:1px solid var(--line)}
.article-body .pricing-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1.5rem;padding-block:.95rem;border-bottom:1px solid var(--line)}
.article-body .pricing-label{font-size:.975rem}
.article-body .pricing-label strong{font-weight:600}
.article-body .pricing-value{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);white-space:nowrap}

.article-body .pkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.75rem}
.article-body .pkg-card{display:flex;flex-direction:column;min-width:0;padding:1.4rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface)}
.article-body .pkg-card.featured{border-color:var(--ink);background:var(--surface-deep)}
.article-body .pkg-name{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.article-body .pkg-title{margin-top:.6rem;font-family:var(--display);font-size:1.2rem;line-height:1.2}
.article-body .pkg-price{margin-top:.4rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
.article-body .pkg-list{margin-top:1rem;padding-left:0;list-style:none;font-size:.9rem}
.article-body .pkg-list li{position:relative;padding-left:1.1rem;line-height:1.6}
.article-body .pkg-list li+li{margin-top:.45rem}
.article-body .pkg-list li::before{content:'';position:absolute;left:0;top:.62em;width:.4rem;height:1px;background:var(--ink-faint)}

.article-table-scroll{margin-top:1.75rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9rem}
.article-body table caption{margin-bottom:.85rem;color:var(--ink-soft);font-size:.8rem;text-align:left}
.article-body th,.article-body td{padding:.8rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.article-body thead th{border-bottom:1px solid var(--ink);font-weight:600;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase}
.article-body tbody tr:nth-child(even){background:rgba(21,23,19,.025)}

.article-body .faq-section{margin-top:1rem}
.article-body .faq-item{padding-block:1.15rem;border-bottom:1px solid var(--line)}
.article-body .faq-q{display:flex;align-items:baseline;gap:.75rem;font-weight:600;line-height:1.45}
.article-body .faq-q svg{display:none}
.article-body .faq-a{margin-top:.6rem;color:var(--ink-soft)}
.article-body .faq-a p{font-size:.975rem}

.article-body .article-cta{margin-top:3rem;padding:1.6rem 1.75rem;border:1px solid var(--rule);border-radius:.4rem;background:var(--surface)}
.article-body .article-cta h3{margin-top:0;font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:-.01em}
.article-body .article-cta p{margin-top:.75rem;color:var(--ink-soft);font-size:.975rem}
.article-body .article-cta>div{display:flex!important;flex-wrap:wrap;gap:.75rem!important;justify-content:flex-start!important;margin-top:1.25rem}
.article-body .btn{
  display:inline-flex;align-items:center;gap:.7rem;min-height:2.75rem;padding:.55rem 1.1rem;
  border:1px solid var(--ink);border-radius:999px;
  font-size:.85rem;font-weight:500;text-decoration:none;
  transition:background-color 180ms,color 180ms;
}
.article-body .btn:first-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.article-body .btn:first-child:hover{background:#2a2e26}
.article-body .btn:not(:first-child):hover{background:var(--surface-deep)}
.article-body .btn svg{flex:none}

/* Table of contents */
.article-aside{position:sticky;top:calc(var(--header-height) + 1.5rem);max-height:calc(100vh - var(--header-height) - 3rem);overflow-y:auto;padding-top:clamp(1.5rem,3vw,2.5rem)}
.toc-title{font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.toc-list{list-style:none;margin:1rem 0 0;padding:0;border-left:1px solid var(--line)}
.toc-list a{display:block;padding:.5rem 0 .5rem 1rem;margin-left:-1px;border-left:1px solid transparent;color:var(--ink-soft);font-size:.85rem;line-height:1.45;text-decoration:none}
.toc-list a:hover{color:var(--ink)}
.toc-list a[aria-current='true']{border-left-color:var(--ink);color:var(--ink);font-weight:500}
.toc-mobile{display:none;margin-top:1.5rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface)}
.toc-mobile>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding:.65rem 1rem;cursor:pointer;font-size:.9rem;font-weight:500;list-style:none}
.toc-mobile>summary::-webkit-details-marker{display:none}
.toc-mobile>summary::after{content:'+';font-family:var(--mono);font-size:1rem;color:var(--ink-soft)}
.toc-mobile[open]>summary::after{content:'–'}
.toc-mobile .toc-list{margin:0 1rem 1rem;border-left:1px solid var(--line)}

/* Article end matter */
.article-end{max-width:var(--measure);margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.75rem;border-top:1px solid var(--rule)}
.article-context{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;color:var(--ink-soft);font-size:.95rem}
.article-context a{font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule)}
.article-context a:hover{text-decoration-color:currentColor}
.article-related{margin-top:2rem}
.article-related h2{font-family:var(--mono);font-size:.65rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.article-related ul{list-style:none;margin:.75rem 0 0;padding:0}
.article-related li{border-top:1px solid var(--line)}
.article-related a{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;min-height:3.25rem;padding-block:.85rem;text-decoration:none;line-height:1.4}
.article-related a:hover .related-title{text-decoration:underline;text-underline-offset:.2em}
.article-related .related-title{font-size:1rem}
.article-related .related-mark{flex:none;color:var(--ink-faint);font-size:.85rem}
/* The SEO internal-link band sits below the article; keep it quiet and on-palette. */
.blog-page .related-service-note{width:var(--shell);margin-inline:auto;padding-inline:0;border-top:1px solid var(--rule);background:transparent;color:var(--ink-soft);font-family:var(--sans);font-size:.85rem}
.blog-page .related-service-note a{color:var(--ink);text-decoration-color:var(--rule)}
.article-all{display:inline-flex;align-items:center;gap:.7rem;min-height:2.75rem;margin-top:1.5rem;font-size:.9rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)}
.article-all:hover{border-color:var(--ink)}

/* ---------- Responsive ---------- */
@media(min-width:1440px){.blog-page{--shell:min(calc(100% - 8rem),82rem)}.blog-shell--article{width:min(calc(100% - 8rem),64rem)}}
@media(max-width:1100px){
  .blog-article-shell{grid-template-columns:minmax(0,1fr)}
  .article-aside{display:none}
  .toc-mobile{display:block}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .blog-page{--header-height:4.5rem}
  .blog-root{scroll-padding-top:calc(4.5rem + 1rem)}
  .blog-header-inner{flex-wrap:wrap;gap:.5rem 1rem;padding-block:.75rem}
  .blog-nav{gap:1rem;font-size:.82rem}
  .article-body .results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-body .pkg-grid{grid-template-columns:minmax(0,1fr)}
  .article-body .process-step{grid-template-columns:2rem minmax(0,1fr);gap:1rem}
  .article-body .step-icon{width:2rem;height:2rem;font-size:.7rem}
  .article-body .article-cta{padding:1.25rem}
}
@media(max-width:560px){
  .blog-page{--shell:calc(100% - 2.5rem)}
  .blog-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .blog-nav{width:100%;justify-content:space-between;gap:.5rem}
  .article-body .section-block{gap:.75rem;margin-top:2.5rem}
  .article-body .results{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .article-body blockquote{padding-left:1.1rem;font-size:1.1rem}
  .article-related a{flex-direction:row;gap:1rem}
}
@media(prefers-reduced-motion:reduce){
  .blog-root{scroll-behavior:auto}
  .blog-page *,.blog-page *::before,.blog-page *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .blog-header,.article-aside,.toc-mobile,.article-end{display:none}
  .blog-article-shell{display:block}
  .article-body{max-width:none}
}