/* ============================================================
   CONCRETE: CMS pages (blog, hubs, case, location, plain page).
   Loaded after styles.css, detail.css and footer.css, only on generated pages.
   <html> keeps its transparent background (detail.css) so body.sd-page's
   colour propagates behind the z-index:-2 .wall-bg glow. Never colour <html>.
   No animated filter: blur() anywhere; motion is transform, opacity, colour.
   ============================================================ */

body.sd-page.cms-page{ background:var(--bg); }
.cms-page .wall-bg{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background-color:var(--bg);
  background-image:
    radial-gradient(64% 56% at 50% 28%, color-mix(in srgb, var(--wall-glow) 26%, transparent) 0%, transparent 62%),
    linear-gradient(180deg,#0d0d11 0%,#0a0a0e 50%,#070709 100%); }
/* long reads: arrive gently, a big zoom fights the text */
@keyframes cmsIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.cms-page main{ animation:cmsIn 620ms cubic-bezier(.2,.72,.24,1) both; }
@media (prefers-reduced-motion: reduce){ .cms-page main{ animation:none; } }

.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cms-page .dot{ color:var(--faint); }

/* ---------- breadcrumbs ---------- */
.crumbs ol{ list-style:none; margin:0 0 clamp(18px,2.6vh,26px); padding:0; display:flex; flex-wrap:wrap; gap:6px 0;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dim); }
.crumbs li{ display:flex; align-items:center; min-width:0; }
/* the separator closes the crumb before it, so a wrapped line starts on a name, never on a "/" */
.crumbs li:not(:last-child)::after{ content:"/"; margin:0 10px; color:var(--faint); }
.crumbs a{ color:var(--ink-2); text-decoration:none; transition:color .2s; }
.crumbs a:hover{ color:var(--ig); }
.crumbs [aria-current]{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34ch; }

/* ---------- article hero ---------- */
.ar-hero{ padding:clamp(120px,16vh,178px) 0 clamp(22px,3.4vh,34px); }
.ar-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 clamp(16px,2.4vh,22px); }
.ar-pill{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px 6px; border:1px solid rgba(255,255,255,.2); border-radius:var(--r-pill);
  color:var(--ink-2); font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; white-space:nowrap; }
.ar-pill svg{ width:13px; height:13px; margin-top:-1px; color:var(--ig); }
.ar-badge{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:7px 12px 6px;
  border:1px solid color-mix(in srgb, var(--ig) 60%, transparent); border-radius:var(--r-pill); color:var(--ig); text-decoration:none;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; transition:background .25s, color .25s; }
.ar-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ig); }
.ar-badge:hover{ background:var(--ig); color:var(--bg); }
.ar-badge:hover::before{ background:var(--bg); }
.ar-title{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d2); line-height:var(--lh-display); letter-spacing:var(--ls-display);
  color:#fff; margin:0; max-width:18ch; text-wrap:balance; }
.ar-byline{ display:flex; align-items:center; gap:14px; margin-top:clamp(22px,3.2vh,32px); }
.ar-av{ width:46px; height:46px; flex:none; object-fit:contain; }
.av-ph.ar-av{ border-radius:50%; border:1px solid rgba(255,255,255,.18); }
.ar-by{ margin:0; color:var(--ink); font-size:var(--fs-body); font-weight:var(--fw-semi); }
.ar-by a{ color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--ig) 50%, transparent); }
.ar-role{ font-weight:var(--fw-regular); color:var(--dim); margin-left:10px; font-size:.92em; }
.ar-dates{ margin:4px 0 0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); color:var(--dim); }
.av-ph{ display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--ig) 22%, #141019);
  color:#fff; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); }

.ar-shot, .cs-shot{ margin:0 0 clamp(22px,3.4vh,34px); border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--sh-lift); background:#0c090f; }
.ar-shot img, .cs-shot img{ display:block; width:100%; height:auto; }
/* a tall featured image must not push the article below two screens */
.ar-shot img{ max-height:min(72vh,640px); object-fit:cover; }
/* hero video: the poster with a play button until played, then the player */
.ar-vid{ position:relative; aspect-ratio:16 / 9; }
.ar-vid img, .ar-vid video, .ar-vid iframe{ display:block; width:100%; height:100%; max-height:none; object-fit:cover; border:0; }
.ar-vid video{ object-fit:contain; background:#000; }
.ar-vid-play{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(10,10,13,0) 40%, rgba(10,10,13,.45)); }
.ar-vid-btn{ width:clamp(64px,7vw,88px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--ig); color:#fff;
  box-shadow:0 18px 50px -12px color-mix(in srgb, var(--ig) 70%, transparent); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.ar-vid-btn svg{ width:42%; height:42%; margin-left:6%; }
.ar-vid-play:hover .ar-vid-btn, .ar-vid-play:focus-visible .ar-vid-btn{ transform:scale(1.08); }
.ar-vid-play:focus-visible{ outline:2px solid var(--ig); outline-offset:-4px; }
@media (prefers-reduced-motion: reduce){ .ar-vid-btn{ transition:none; } }

/* ---------- compact top lead capture ---------- */
.cms-quick{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); align-items:center; gap:10px clamp(18px,2.4vw,32px);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,26px); margin:0 0 clamp(30px,5vh,56px); }
.cq-k{ margin:0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ig); }
.cq-t{ margin:4px 0 0; color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); grid-column:1; }
.cms-quick .cq-k{ grid-column:1; }
.cq-fields{ grid-column:2; grid-row:1 / span 2; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto; gap:10px; align-items:stretch; }
.cms-quick .ctf-field input{ height:100%; min-height:48px; }
.cms-quick .ct-submit{ margin:0; align-self:stretch; }
.cms-quick .ctf-note{ grid-column:1 / -1; margin:0; }
.cms-quick .ctf-note:empty, .cms-quick .cf-ts:empty{ display:none; }
.cms-quick .cf-ts{ grid-column:1 / -1; }
.cms-quick .ctf-done{ grid-column:1 / -1; padding:8px; text-align:left; }
.cms-quick .ctf-done h3{ font-size:var(--fs-d5); margin:0 0 6px; }

/* ---------- body + table of contents ---------- */
.ar-grid{ display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:clamp(30px,4.4vw,72px); align-items:start; }
.ar-grid.no-toc{ grid-template-columns:minmax(0,1fr); }
.ar-main{ min-width:0; max-width:760px; }
.ar-grid.no-toc .ar-main{ margin:0 auto; }
.ar-tldr{ margin:0 0 clamp(28px,4vh,40px); padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px); border-radius:var(--r-lg);
  background:linear-gradient(158deg, color-mix(in srgb, var(--ig) 14%, rgba(12,9,15,.8)), rgba(12,9,15,.6));
  border:1px solid color-mix(in srgb, var(--ig) 34%, rgba(255,255,255,.08)); }
.ar-tldr-k{ margin:0 0 10px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ig); }
.ar-tldr p:last-child{ margin:0; color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); }
/* the dedicated Key Takeaways field: a lamp mark and room for a short list */
.ar-tldr-x .ar-tldr-k{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ar-tldr-i{ width:22px; height:22px; flex:none; padding:5px; box-sizing:content-box; border-radius:50%; color:var(--bg); background:var(--ig); }
.ar-tldr-b{ color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); }
.ar-tldr-b > :first-child{ margin-top:0; }
.ar-tldr-b > :last-child{ margin-bottom:0; }
.ar-tldr-b p{ margin:0 0 .7em; }
.ar-tldr-b ul, .ar-tldr-b ol{ margin:0; padding-left:1.2em; }
.ar-tldr-b li{ margin:0 0 .45em; padding-left:.2em; }
.ar-tldr-b li:last-child{ margin-bottom:0; }
.ar-tldr-b ul li::marker{ color:var(--ig); }
.ar-tldr-b strong{ color:#fff; }
.ar-tldr-b a{ color:#fff; border-bottom:1px solid color-mix(in srgb, var(--ig) 60%, transparent); text-decoration:none; }

.toc-d{ position:sticky; top:104px; max-height:calc(100vh - 128px); overflow:auto; padding:4px 0 4px 18px; border-left:1px solid rgba(255,255,255,.1); }
.toc-k{ margin:0 0 14px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--dim); }
.toc-list{ list-style:none; margin:0; padding:0; }
.toc-list li{ margin:0; }
.toc-list a{ position:relative; display:block; padding:7px 0; color:var(--ink-2); text-decoration:none; font-size:var(--fs-small); line-height:var(--lh-body); transition:color .2s; }
.toc-list .toc-l3 a{ padding-left:14px; font-size:var(--fs-small); color:var(--dim); }
.toc-list a:hover{ color:#fff; }
.toc-d .toc-list a::before{ content:""; position:absolute; left:-19px; top:6px; bottom:6px; width:2px; background:var(--ig);
  transform:scaleY(0); transform-origin:top; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.toc-list a.is-active{ color:#fff; }
.toc-d .toc-list a.is-active::before{ transform:scaleY(1); }
.toc-m{ display:none; margin:0 0 clamp(22px,3vh,30px); padding:0; border-radius:var(--r-lg); }
.toc-m summary{ cursor:pointer; list-style:none; padding:15px 18px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; }
.toc-m summary::-webkit-details-marker{ display:none; }
.toc-m summary::after{ content:"+"; color:var(--ig); font-size:16px; transition:transform .25s; }
.toc-m[open] summary::after{ transform:rotate(45deg); }
.toc-m nav{ padding:0 18px 12px; border-top:1px solid rgba(255,255,255,.08); }
.toc-m .toc-list a.is-active{ color:var(--ig); }
@media (max-width:960px){
  .ar-grid{ grid-template-columns:minmax(0,1fr); }
  .toc-d{ display:none; }
  .toc-m{ display:block; }
  .ar-main{ max-width:none; }
}

/* ---------- rich body ---------- */
.prose{ color:var(--ink-2); font-size:var(--fs-body); line-height:var(--lh-prose); }
.prose-narrow{ max-width:760px; }
.prose > :first-child{ margin-top:0; }
.prose p{ margin:0 0 1.1em; }
.prose h2, .prose h3, .prose h4{ color:#fff; scroll-margin-top:104px; text-wrap:balance; }
.prose h2{ font-family:var(--disp); text-transform:uppercase; font-weight:var(--fw-regular); font-size:var(--fs-d4); line-height:var(--lh-tight); letter-spacing:var(--ls-display); margin:1.9em 0 .6em; }
.prose h3{ font-family:var(--sans); font-weight:var(--fw-bold); font-size:clamp(19px,2vw,24px); line-height:var(--lh-snug); margin:1.6em 0 .5em; }
.prose h4{ font-family:var(--mono); font-weight:var(--fw-regular); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ig); margin:1.6em 0 .6em; }
.prose a{ color:#fff; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--ig) 60%, transparent); transition:color .2s, border-color .2s; }
.prose a:hover{ color:var(--ig); border-color:var(--ig); }
.prose a[rel~="nofollow"]{ border-bottom-style:dashed; }
.prose strong{ color:#fff; font-weight:var(--fw-bold); }
.prose ul, .prose ol{ margin:0 0 1.2em; padding-left:1.3em; }
.prose li{ margin:0 0 .5em; padding-left:.2em; }
.prose ul li::marker{ color:var(--ig); }
.prose ol li::marker{ color:var(--ig); font-family:var(--mono); font-size:.8em; }
.prose hr{ border:0; height:1px; background:rgba(255,255,255,.12); margin:2.4em 0; }
.prose img{ max-width:100%; height:auto; border-radius:var(--r-md); }
.prose code{ font-size:.9em; background:rgba(255,255,255,.07); padding:.1em .35em; border-radius:var(--r-sm); }
.prose blockquote{ margin:1.8em 0; padding:.2em 0 .2em clamp(18px,2.2vw,28px); border-left:3px solid var(--ig);
  color:var(--ink); font-size:var(--fs-quote); line-height:var(--lh-body); }
.prose blockquote p:last-child{ margin-bottom:0; }
.cms-tip{ margin:1.8em 0; padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,26px); border-radius:var(--r-lg);
  background:rgba(12,9,15,.62); border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--ig); }
.cms-tip-title{ margin:0 0 .5em !important; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ig); }
.cms-tip-title::before{ content:"\2726"; margin-right:8px; }
.cms-tip > :last-child{ margin-bottom:0; }
.cms-table{ margin:1.6em 0; overflow-x:auto; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); background:rgba(12,9,15,.5);
  -webkit-overflow-scrolling:touch; }
.cms-table:focus-visible{ outline:2px solid var(--ig); outline-offset:2px; }
.cms-table table{ width:100%; min-width:520px; border-collapse:collapse; font-size:var(--fs-small); line-height:var(--lh-body); }
.cms-table th{ text-align:left; font-family:var(--mono); font-weight:var(--fw-regular); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ig);
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.14); white-space:nowrap; }
.cms-table td{ padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:top; }
.cms-table tr:last-child td{ border-bottom:0; }
.cms-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.025); }
/* first column is the row label: keep it on one line ("E-commerce", not "E- / commerce") */
.cms-table td:first-child{ white-space:nowrap; }
/* cms.js marks a table that scrolls: the edge with more fades out */
.cms-table.is-more-r{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent); }
.cms-table.is-more-l{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent); }
.cms-table.is-more-l.is-more-r{ -webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent); }

/* ---------- forms (same look as /contact) ---------- */
.cms-form-sec{ margin:clamp(56px,9vh,110px) 0 0; max-width:860px; }
.cms-form-lede{ margin:-6px 0 clamp(20px,3vh,28px); color:var(--ink-2); font-size:var(--fs-body); line-height:var(--lh-body); max-width:52ch; }
.prose .cms-form-sec{ margin:2.2em 0; }
.prose .cms-form-sec .sd-head{ font-size:var(--fs-d4); }
.ct-form{ padding:clamp(24px,2.6vw,40px); display:flex; flex-direction:column; gap:clamp(15px,2vh,22px); }
.ctf-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,20px); }
.ctf-field{ display:flex; flex-direction:column; gap:8px; }
.ctf-field > span{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dim); }
.ctf-field input, .ctf-field select, .ctf-field textarea{ width:100%; box-sizing:border-box; background:rgba(9,7,13,.55); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  color:var(--ink); font-family:var(--sans); font-size:var(--fs-body); padding:12px 14px; transition:border-color .25s, box-shadow .25s; }
.ctf-field textarea{ resize:vertical; min-height:128px; line-height:var(--lh-body); }
.ctf-field input::placeholder, .ctf-field textarea::placeholder{ color:var(--faint); }
.ctf-field input:focus, .ctf-field select:focus, .ctf-field textarea:focus{ outline:none; border-color:var(--ig); box-shadow:0 0 0 3px color-mix(in srgb, var(--ig) 24%, transparent); }
.ctf-field select{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23c8c3d4' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.ctf-field select option{ background:#141019; color:var(--ink); }
.ct-submit{ align-self:flex-start; margin-top:4px; }
.ctf-note{ margin:2px 0 0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); color:var(--dim); }
.ctf-note a{ color:var(--ig); text-decoration:underline; }
.ctf-done{ text-align:center; padding:clamp(30px,5vh,60px) 8px; }
.ctf-done h3{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d4); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:#fff; margin:0 0 12px; }
.ctf-done p{ font-family:var(--sans); font-size:var(--fs-body); color:var(--ink-2); margin:0; }
.cf-ts:empty{ display:none; }
@media (max-width:720px){
  .cms-quick{ grid-template-columns:1fr; }
  .cq-fields{ grid-column:1; grid-row:auto; grid-template-columns:1fr; }
  .cms-quick .ct-submit{ justify-self:start; }
}
@media (max-width:560px){ .ctf-row{ grid-template-columns:1fr; } }

/* ---------- author card ---------- */
.ar-author{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.4vw,32px); align-items:start;
  margin:clamp(48px,8vh,90px) 0 0; padding:clamp(22px,2.6vw,36px); max-width:860px; }
.au-av{ width:clamp(72px,8vw,104px); height:clamp(72px,8vw,104px); object-fit:contain; font-size:20px; }
.av-ph.au-av{ border-radius:50%; border:1px solid rgba(255,255,255,.18); }
.au-k{ margin:0 0 8px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ig); }
.au-name{ margin:0; font-family:var(--disp); text-transform:uppercase; font-weight:var(--fw-regular); font-size:var(--fs-d4); line-height:var(--lh-tight); color:#fff; }
.au-role{ margin:8px 0 0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--dim); }
.au-bio{ margin:clamp(12px,1.8vh,16px) 0 0; color:var(--ink-2); font-size:var(--fs-body); line-height:var(--lh-body); max-width:62ch; }
.au-li{ margin-top:clamp(16px,2.2vh,22px); }
@media (max-width:560px){ .ar-author{ grid-template-columns:1fr; } }

/* ============================================================
   BLOG INDEX: an editorial index, not a card grid.
   One lead story in full colour; every other post is a row on a date rail.
   Rows rest muted (grayscale thumb, soft title) and ignite on hover/focus:
   the thumb floods with colour, the title takes the accent, a bar draws in.
   ============================================================ */
.bh-hero{ padding:clamp(120px,16vh,178px) 0 clamp(26px,4vh,44px); }
.bh-h1{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d1); line-height:var(--lh-display); letter-spacing:var(--ls-display); color:#fff; margin:0; }
.bh-lede{ max-width:44ch; margin:clamp(18px,2.6vh,26px) 0 0; font-size:var(--fs-lede); line-height:var(--lh-body); color:var(--ink); }
.bh-body{ padding:0 0 clamp(60px,10vh,120px); }
.bh-layout{ display:grid; grid-template-columns:210px minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }

.bh-cats{ position:sticky; top:104px; }
.bh-cats-k{ margin:0 0 12px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--dim); }
.bh-cats ul{ list-style:none; margin:0; padding:0; border-left:1px solid rgba(255,255,255,.1); }
.bh-cats a{ position:relative; display:flex; justify-content:space-between; gap:12px; padding:9px 0 9px 16px; color:var(--dim); text-decoration:none; font-size:var(--fs-small); transition:color .2s; }
.bh-cats a b{ font-family:var(--mono); font-weight:var(--fw-regular); font-size:var(--fs-label); color:var(--faint); padding-top:3px; }
.bh-cats a::before{ content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:2px; background:var(--ig); transform:scaleY(0); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.bh-cats a:hover{ color:#fff; }
.bh-cats a[aria-current]{ color:#fff; }
.bh-cats a[aria-current]::before{ transform:scaleY(1); }
.bh-cats a[aria-current] b{ color:var(--ig); }

.bh-hit{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.bh-hit:focus-visible{ outline:2px solid var(--ig); outline-offset:4px; }
.bh-title a, .bh-lead-title a{ position:relative; z-index:2; color:inherit; text-decoration:none; }
.bh-ex{ margin:10px 0 0; color:var(--ink-2); font-size:var(--fs-body); line-height:var(--lh-body); max-width:60ch; }
.bh-meta{ margin:12px 0 0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); color:var(--dim); }
.bh-date{ margin:0; display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dim); }
.bh-cat{ color:var(--ig); }

/* the lead story: the one thing in focus */
.bh-lead{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(20px,2.6vw,36px); align-items:end;
  padding:0 0 clamp(30px,4.4vh,48px); margin:0 0 clamp(8px,1.4vh,14px); border-bottom:1px solid rgba(255,255,255,.12); }
.bh-lead-shot{ border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0c090f; aspect-ratio:4 / 3;
  box-shadow:0 44px 92px -40px color-mix(in srgb, var(--ig) 40%, rgba(0,0,0,.7)); }
.bh-lead-shot img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.001); transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.bh-lead:hover .bh-lead-shot img, .bh-lead:focus-within .bh-lead-shot img{ transform:scale(1.04); }
.bh-lead .bh-date{ flex-direction:row; gap:14px; }
.bh-lead-title{ margin:12px 0 0; font-family:var(--disp); text-transform:uppercase; font-weight:var(--fw-regular); font-size:var(--fs-d3); line-height:var(--lh-display); letter-spacing:var(--ls-display); color:#fff; text-wrap:balance; transition:color .25s; }
.bh-lead:hover .bh-lead-title, .bh-lead:focus-within .bh-lead-title{ color:var(--ig); }

/* the rows */
.bh-list{ display:flex; flex-direction:column; }
.bh-row{ position:relative; display:grid; grid-template-columns:132px minmax(0,1fr) clamp(140px,16vw,210px); gap:clamp(16px,2.4vw,34px); align-items:center;
  padding:clamp(22px,3.2vh,32px) 0; border-bottom:1px solid rgba(255,255,255,.09); }
.bh-row::before{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ig); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.bh-row:hover::before, .bh-row:focus-within::before{ transform:scaleX(1); }
.bh-row .bh-date{ align-self:start; padding-top:6px; }
.bh-title{ margin:0; font-family:var(--sans); font-weight:var(--fw-bold); font-size:clamp(20px,2.2vw,28px); line-height:var(--lh-snug); color:var(--ink); text-wrap:balance; transition:color .25s, transform .35s cubic-bezier(.2,.7,.2,1); }
.bh-row:hover .bh-title, .bh-row:focus-within .bh-title{ color:var(--ig); transform:translateX(6px); }
.bh-thumb{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:4 / 3; background:#0c090f; border:1px solid rgba(255,255,255,.1); }
.bh-thumb img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(.55) brightness(.86); transform:scale(1.02);
  transition:filter .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.bh-row:hover .bh-thumb img, .bh-row:focus-within .bh-thumb img{ filter:none; transform:scale(1.06); }
@media (hover:none){ .bh-thumb img{ filter:grayscale(.3) brightness(.92); } }

.ar-related{ padding:clamp(60px,10vh,120px) 0 clamp(30px,5vh,60px); }

@media (max-width:960px){
  .bh-layout{ grid-template-columns:minmax(0,1fr); }
  .bh-cats{ position:static; }
  .bh-cats-k{ display:none; }
  .bh-cats ul{ display:flex; gap:8px; overflow-x:auto; border-left:0; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .bh-cats a{ padding:8px 14px; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill); white-space:nowrap; }
  .bh-cats a::before{ display:none; }
  .bh-cats a[aria-current]{ border-color:var(--ig); }
  .bh-lead{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .bh-row{ grid-template-columns:minmax(0,1fr) 96px; grid-template-areas:"date thumb" "words thumb"; gap:6px 16px; align-items:start; }
  .bh-row .bh-date{ grid-area:date; flex-direction:row; gap:12px; padding-top:0; }
  .bh-row .bh-words{ grid-area:words; }
  .bh-row .bh-thumb{ grid-area:thumb; }
  .bh-date > *{ white-space:nowrap; }
  .bh-ex{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; margin-top:8px; font-size:var(--fs-small); line-height:var(--lh-body); }
  .bh-row .bh-meta{ margin-top:8px; }
}
@media (prefers-reduced-motion: reduce){
  .bh-row::before, .bh-title, .bh-thumb img, .bh-lead-shot img{ transition:none; }
}

/* ============================================================
   CASE STUDY: the same layout as the hand-written case pages
   (case-studies/storecan.html inline styles), shared here.
   ============================================================ */
.cs-hero{ padding:clamp(130px,17vh,200px) 0 clamp(30px,5vh,60px); }
.cs-title{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d1); line-height:var(--lh-display); letter-spacing:var(--ls-display); color:#fff; margin:0; text-shadow:none; }
.cs-lede{ max-width:44ch; margin:clamp(20px,3vh,30px) 0 0; font-size:var(--fs-lede); line-height:var(--lh-body); color:var(--ink); text-shadow:0 1px 20px rgba(8,6,12,.6); }
.cs-hero-grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); gap:clamp(30px,4.5vw,70px); align-items:start; }
/* the title is sized to its own column, so one long word never runs under the details card */
.cs-hero-left{ min-width:0; container-type:inline-size; }
.cs-hero-left .cs-title{ font-size:min(clamp(52px,11vw,150px), 18.5cqi); }
.cs-info{ align-self:start; padding:clamp(26px,2.4vw,40px); }
.cs-info-logo{ display:flex; align-items:center; min-height:46px; margin-bottom:clamp(20px,2.6vh,30px); }
.cs-info-logo img{ height:clamp(30px,3.2vw,42px); width:auto; max-width:74%; display:block; }
.cs-info-ctas{ display:grid; grid-template-columns:max-content; gap:10px; margin-top:clamp(22px,3vh,30px); }
/* the two hero buttons stack at one shared width (the card has no room for a pair); full width on phones, like the CTA strip */
.cs-info-ctas .btn{ width:100%; } .cs-info-ctas .btn .bl{ flex:1; }
@media (max-width:860px){ .cs-info-ctas{ grid-template-columns:minmax(0,1fr); } }
.cs-panel{ padding:clamp(24px,2.6vw,38px); }
.cs-stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(14px,1.6vw,22px); }
.cs-stats .n{ display:block; font-family:var(--disp); font-size:var(--fs-d3); line-height:var(--lh-tight); color:var(--ig); }
.cs-stats .l{ display:block; margin-top:6px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); color:var(--ink-2); line-height:var(--lh-body); }
.cs-sec{ padding:clamp(44px,7vh,96px) 0; }
.cs-sec-tight{ padding:clamp(28px,4vh,56px) 0; }
@media (max-width:860px){ .cs-hero-grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); } .cs-info-logo img{ max-width:210px; } }

/* ---------- location + plain page hero ---------- */
.cms-hero{ padding:clamp(130px,18vh,210px) 0 clamp(26px,4vh,48px); }
.cms-title{ font-size:var(--fs-d1); max-width:16ch; text-wrap:balance; }
.cms-hero-cta{ margin-top:clamp(24px,3.6vh,36px); }

/* ── hub pager (/blog/page/2) ── */
.bh-h1-pg{ display:block; margin-top:14px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); color:var(--dim); text-transform:uppercase; line-height:var(--lh-tight); }
.bh-pager{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
.bh-pg-step{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink); text-decoration:none; transition:color .2s; }
.bh-pg-step[rel="next"]{ justify-self:end; }
.bh-pg-step:hover, .bh-pg-step:focus-visible{ color:var(--ig); }
.bh-pg-nums{ display:flex; gap:4px; }
.bh-pg-n{ min-width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-pill); font-family:var(--mono); font-size:var(--fs-label); color:var(--dim); text-decoration:none; transition:background .2s, color .2s; }
a.bh-pg-n:hover, a.bh-pg-n:focus-visible{ color:#fff; background:rgba(255,255,255,.08); }
.bh-pg-n[aria-current]{ color:var(--bg); background:#fff; }
@media (max-width:560px){ .bh-pager{ grid-template-columns:1fr 1fr; } .bh-pg-nums{ grid-column:1 / -1; grid-row:2; justify-content:center; } }

/* ── case study: client quote in the results panel ── */
.cs-result .cs-quote{ margin:clamp(22px,3vh,34px) 0 0; padding-top:clamp(22px,3vh,34px); border-top:1px solid rgba(255,255,255,.12); }
.cs-result .cs-quote p{ margin:0 0 14px; color:var(--ink); font-size:var(--fs-quote); line-height:var(--lh-snug); letter-spacing:var(--ls-text); max-width:30ch; }
.cs-result .cs-quote cite{ font-style:normal; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); color:var(--ink-2); }

/* ── case study: details card, verdict and brief, as the hand-written case pages have them inline ── */
.cms-case .cs-info-block{ margin-top:clamp(18px,2.4vh,24px); padding-top:clamp(18px,2.4vh,24px); border-top:1px solid rgba(255,255,255,.1); }
.cms-case .cs-info-k{ font-family:var(--mono); font-size:var(--fs-label); font-weight:var(--fw-bold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ig); margin:0 0 10px; }
.cms-case .cs-info-v{ margin:0; color:var(--ink); font-size:var(--fs-body); }
.cms-case .cs-info-svc{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px 18px; }
.cms-case .cs-info-svc li{ display:flex; align-items:center; gap:8px; color:var(--ink); font-size:var(--fs-small); }
.cms-case .cs-info-svc li::before{ content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1.4px solid color-mix(in srgb, var(--ig) 65%, transparent); color:var(--ig); font-size:9px; line-height:1; flex:none; }
.cms-case .cs-info-cta{ margin-top:clamp(22px,3vh,30px); }
.cms-case .cs-result{ display:flex; flex-direction:column; justify-content:center; }
.cms-case .cs-verdict{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d3); line-height:var(--lh-display); letter-spacing:var(--ls-display); color:#fff; margin:0; }
.cms-case .cs-verdict em{ font-style:normal; color:var(--ig); }
.cms-case .cs-verdict + .cs-stats{ margin-top:clamp(20px,2.8vh,30px); padding-top:clamp(20px,2.8vh,30px); border-top:1px solid rgba(255,255,255,.12); }
.cms-case .cs-overview{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(20px,3vh,34px); }
.cms-case .cs-card{ padding:clamp(24px,2.6vw,36px); }
.cms-case .cs-card h3{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d5); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:#fff; margin:0 0 10px; }
.cms-case .cs-card p{ margin:0; color:var(--ink-2); font-size:var(--fs-body); line-height:var(--lh-body); }
@media (max-width:820px){ .cms-case .cs-overview{ grid-template-columns:1fr; } .cms-case .cs-stats{ grid-template-columns:1fr; gap:16px; } }
.bh-list + .bh-pager{ border-top:0; padding-top:0; }

/* ── article sidebar: categories and featured scroll away, contents + audit stay in view ── */
.ar-grid{ align-items:stretch; }
.ar-side{ display:flex; flex-direction:column; gap:clamp(26px,3.4vh,36px); min-width:0; }
/* The sticky column never outgrows the screen: the audit card keeps its size
   and the contents list is the part that shrinks and scrolls. */
.ar-sticky{ position:sticky; top:104px; display:flex; flex-direction:column; gap:22px; max-height:calc(100vh - 128px); }
.ar-sticky .toc-d{ position:static; flex:1 1 auto; min-height:0; max-height:none; overflow:auto; }
.ar-sticky .ar-audit{ flex:none; }
.ar-w-k, .ar-audit-k{ margin:0 0 12px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--dim); }
.ar-cats{ list-style:none; margin:0; padding:0; border-left:1px solid rgba(255,255,255,.1); }
.ar-cats a{ display:flex; justify-content:space-between; gap:12px; padding:7px 0 7px 16px; color:var(--dim); text-decoration:none; font-size:var(--fs-small); transition:color .2s; }
.ar-cats a b{ font-family:var(--mono); font-weight:var(--fw-regular); font-size:var(--fs-label); color:var(--faint); padding-top:3px; }
.ar-cats a:hover, .ar-cats a[aria-current]{ color:#fff; }
.ar-cats a[aria-current]{ box-shadow:inset 2px 0 0 var(--ig); }
.ar-feat{ list-style:none; margin:0; padding:0; counter-reset:feat; display:flex; flex-direction:column; gap:14px; }
.ar-feat li{ counter-increment:feat; display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 8px; }
.ar-feat li::before{ content:counter(feat, decimal-leading-zero); grid-row:span 2; font-family:var(--mono); font-size:var(--fs-label); color:var(--ig); padding-top:3px; }
.ar-feat a{ color:var(--ink); text-decoration:none; font-size:var(--fs-small); line-height:var(--lh-body); }
.ar-feat a:hover{ color:var(--ig); }
.ar-feat span{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); text-transform:uppercase; color:var(--faint); }
.ar-audit{ padding:20px; border-radius:var(--r-lg); background:linear-gradient(158deg, color-mix(in srgb, var(--ig) 22%, rgba(12,9,15,.85)), rgba(12,9,15,.7)); border:1px solid color-mix(in srgb, var(--ig) 40%, rgba(255,255,255,.08)); }
.ar-audit-k{ color:var(--ig); margin-bottom:8px; }
.ar-audit-t{ margin:0 0 8px; font-family:var(--disp); font-weight:var(--fw-regular); text-transform:uppercase; font-size:var(--fs-d5); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:#fff; text-wrap:balance; }
.ar-audit-p{ margin:0 0 16px; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink-2); }
.ar-audit-f{ display:flex; flex-direction:column; gap:8px; }
.ar-audit-f .ctf-field input{ padding:10px 12px; font-size:var(--fs-body); border-radius:var(--r-md); }
.ar-audit-f .ct-submit{ margin-top:4px; align-self:flex-start; }
.ar-audit-f .ctf-note{ margin:0; }
.ar-audit-f .ctf-note:empty{ display:none; }
.ar-audit .ctf-done{ padding:6px 0 0; text-align:left; }
.ar-audit .ctf-done h3{ font-size:var(--fs-d5); margin:0 0 6px; }
.ar-audit .ctf-done p{ font-size:var(--fs-small); }
@media (max-width:960px){
  .ar-side{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px clamp(20px,4vw,40px); margin:clamp(28px,4vh,40px) 0 0; }
  .ar-sticky{ position:static; order:-1; grid-column:1 / -1; max-height:none; }
  /* the audit card leads the sidebar on narrow screens, right after the article */
  .ar-audit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:6px clamp(18px,3vw,32px); align-items:center; padding:clamp(20px,3vw,28px); }
  .ar-audit > p, .ar-audit > h2{ grid-column:1; }
  .ar-audit-p{ margin-bottom:0; }
  .ar-audit-f{ grid-column:2; grid-row:1 / span 3; }
}
@media (max-width:640px){
  .ar-side{ grid-template-columns:minmax(0,1fr); }
  .ar-audit{ display:block; }
  .ar-audit-t{ font-size:28px; }
  .ar-audit-p{ margin-bottom:16px; }
}

/* ── related articles: three cards ── */
.ar-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:clamp(20px,3vh,32px); }
.ar-card{ position:relative; display:flex; flex-direction:column; gap:10px; }
.ar-card .bh-hit{ position:absolute; inset:0; z-index:1; }
.ar-card-shot{ aspect-ratio:16/10; max-width:100%; border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#0c090f; }
.ar-card-shot img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(.55) brightness(.88); transition:filter .4s, transform .6s cubic-bezier(.2,.7,.2,1); }
.ar-card:hover .ar-card-shot img, .ar-card:focus-within .ar-card-shot img{ filter:none; transform:scale(1.03); }
.ar-card .bh-date{ margin:4px 0 0; display:flex; gap:12px; }
.ar-card-t{ margin:0; font-size:clamp(18px,1.7vw,21px); line-height:var(--lh-snug); font-weight:var(--fw-semi); }
.ar-card-t a{ color:#fff; text-decoration:none; }
.ar-card-m{ margin:0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-ui); color:var(--dim); }
@media (max-width:820px){ .ar-cards{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .ar-card-shot img{ transition:none; } }

/* ── table of contents: glide to the section, and stop clear of the fixed header ── */
@media (prefers-reduced-motion: no-preference) { html:has(body.cms-page) { scroll-behavior: smooth; } }
.prose h2[id], .prose h3[id], .prose h4[id] { scroll-margin-top: 110px; }
.au-more{ display:inline-block; margin:clamp(14px,2vh,18px) 18px 0 0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:#fff; text-decoration:none; border-bottom:1px solid var(--ig); padding-bottom:2px; }
.au-more:hover{ color:var(--ig); }

/* ── authored CMS pages: a compact byline under the hero ── */
.cms-byline{ margin-top:clamp(20px,3vh,30px); }