/* Editorial pages: marketing, industries, areas and the blog (rendered by tools/build-content.js).
   Built only from site.css tokens. Grotesk states. Serif turns. Mono annotates. */
.ed { --card: #FFFDF8; --line: color-mix(in srgb, var(--fg) 13%, transparent); }
.ed h1, .ed h2 { font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 96; text-wrap: balance; }
.ed h1 { font-size: clamp(46px, 6.3vw, 100px); line-height: .94; letter-spacing: -.04em; margin-top: 18px; }
.ed h1:has(.ed-hero__lead) { margin-top: 0; }
.ed h1 .ed-hero__lead { display: block; margin-bottom: 18px; font-weight: 400; font-variation-settings: normal; text-wrap: pretty; }
.ed h2 { font-size: var(--h2); line-height: 1; letter-spacing: -.03em; font-weight: 700; }
.ed h1 em, .ed h2 em { display: block; font-family: var(--font-aside); font-style: italic; font-weight: 400; letter-spacing: -.02em; line-height: 1.04; color: var(--violet); }
.ed.env-ink h2 em, .ed.env-grape h2 em { color: #D2C3FF; }
.ed h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.env-grape { --bg: #27154C; --fg: #F3EEFB; --fg-2: #D8CDEA; --rule: rgba(255,255,255,.18); --ring: var(--lime); background: var(--bg); color: var(--fg); }

/* ---------- opening ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 500 var(--mono)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.ed-hero { padding-block: clamp(28px, 4vw, 48px) clamp(72px, 9vw, 136px); overflow-x: clip; }
.ed-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 104px); align-items: center; margin-top: clamp(32px, 4.5vw, 64px); }
.ed-hero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.ed-lede { margin-top: 28px; max-width: 36ch; font-size: var(--body-l); line-height: 1.5; color: var(--fg-2); }
.ed-turn { margin-top: 14px; max-width: 34ch; font: italic 400 23px/1.35 var(--font-aside); color: var(--fg); }
.ed-hero__visual { position: relative; min-width: 0; padding: 18px 8px 26px; }
/* Guides without art read wider; before-and-after pictures (cream, labelled) sit in the visual column. */
.ed-hero__grid--solo .ed-lede { max-width: 56ch; }
.ed-hero__grid--solo .ed-turn { max-width: 48ch; }
.ed-hero__visual > img { display: block; width: 100%; height: auto; border-radius: 24px; }

/* ---------- sections ---------- */
.ed-section { padding-block: clamp(80px, 10vw, 150px); }
/* Desktop: as little dead space as possible (Troy, 2 Nov 2026). Phones keep their spacing. */
@media (min-width: 900px) { .ed-hero { padding-bottom: clamp(48px, 3.9vw, 64px); } .ed-section { padding-block: clamp(56px, 4.5vw, 72px); } }
.ed-head { max-width: 760px; }
.ed-head h2 { margin-top: 14px; max-width: 22ch; }
.ed-sub { margin-top: 22px; max-width: 58ch; font-size: 19px; line-height: 1.55; color: var(--fg-2); }
.ed-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ed-split > .ed-head { position: sticky; top: 96px; }
.ed-prose { max-width: 62ch; font-size: 19px; line-height: 1.65; color: var(--fg-2); }
.ed-prose p + p { margin-top: 18px; }
.ed-prose strong { color: var(--fg); font-weight: 600; }
.ed-prose a, .ed-list a, .pillar a, .ed-sub a { color: var(--fg); text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* lists: lime dots for what we do, coral rings for what hurts */
.ed-list li { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid var(--line); }
.ed-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1px rgba(13, 16, 36, .28); }
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin-top: 48px; }
.pains li { position: relative; padding: 24px 0 24px 40px; border-top: 1px solid var(--line); font: 500 20px/1.4 var(--font-body); letter-spacing: -.005em; }
.pains li::before { content: ""; position: absolute; left: 2px; top: 31px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--coral); }
.pains li::after { content: ""; position: absolute; left: 9px; top: 34px; width: 2px; height: 6px; border-radius: 1px; background: var(--coral); box-shadow: 0 8px 0 var(--coral); }
.pains em { font-family: var(--font-aside); font-size: 1.08em; }

/* service cards */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.svc { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(13, 16, 36, .04), 0 14px 34px -22px rgba(39, 21, 76, .35); }
.svc__n { font: 500 var(--mono)/1 var(--font-mono); letter-spacing: .1em; color: var(--violet); }
.svc h3 { font-size: 24px; }
.svc > p { color: var(--muted); }
.svc .ed-list { margin-top: auto; font-size: var(--small); }
.svc .ed-list li { padding-block: 8px; }
.svc .ed-list li::before { top: 14px; width: 10px; height: 10px; }
.svc-more { margin-top: 28px; max-width: 70ch; color: var(--fg-2); }

/* three or four columns: website, marketing, the work behind it */
.pillars { display: grid; gap: 16px; margin-top: 56px; }
.pillars--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillar { --accent: var(--violet); padding: 30px 26px 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--accent); }
.pillar:nth-child(2) { --accent: var(--coral); }
.pillar:nth-child(3) { --accent: var(--turquoise); }
.pillar:nth-child(4) { --accent: var(--orange); }
.pillar h3 { margin-bottom: 16px; }
.pillar .ed-list { font-size: 16px; }
.pillar__note { margin-top: 16px; font: italic 400 18px/1.4 var(--font-aside); color: var(--fg-2); }
.env-ink .pillar, .env-grape .pillar { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); border-top-color: var(--accent); }

/* why us: short claims with room to breathe */
.claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 6vw, 96px); margin-top: 64px; }
.claims li { padding-top: 22px; border-top: 1px solid var(--rule); }
.claims h3 { font-size: 26px; }
.claims p { margin-top: 10px; color: var(--fg-2); max-width: 44ch; }

.ed-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; margin-top: 56px; counter-reset: step; }
.ed-steps li { padding-top: 20px; border-top: 2px solid var(--fg); }
.ed-steps__n { font: 500 var(--mono)/1 var(--font-mono); letter-spacing: .1em; color: var(--fg-2); }
.ed-steps h3 { margin-top: 18px; }
.ed-steps p { margin-top: 10px; color: var(--fg-2); }

/* industries */
.ind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.ind-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform var(--hover) var(--settle), border-color var(--hover) var(--settle), box-shadow var(--hover) var(--settle); }
.ind-card:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: 0 22px 40px -24px rgba(39, 21, 76, .45); }
.ind-card__art { position: relative; display: grid; place-items: center; height: 140px; margin: -12px -10px 6px; overflow: hidden; border-radius: 16px; background: var(--tint, var(--wash-violet)); color: var(--ink); }
.ind-card__art svg { position: relative; z-index: 1; width: 44px; height: 44px; padding: 14px; box-sizing: content-box; border-radius: 20px; background: #FFFDF8; box-shadow: 0 10px 22px -12px rgba(13, 16, 36, .45); transition: transform var(--hover) var(--settle); }
.ind-card__art i { position: absolute; width: 90px; height: 90px; border: 1px solid rgba(13, 16, 36, .14); border-radius: 50%; transform: scaleX(1.8) rotate(-20deg); }
.ind-card__art i:nth-of-type(2) { width: 150px; height: 150px; }
.ind-card__art i:nth-of-type(3) { width: 210px; height: 210px; }
.ind-card:hover .ind-card__art svg { transform: scale(1.06) rotate(-4deg); }
.ind-card:nth-child(2) .ind-card__art { --tint: #FFE1D6; }
.ind-card:nth-child(3) .ind-card__art { --tint: #FFF1C2; }
.ind-card:nth-child(4) .ind-card__art { --tint: #D6F7EE; }
.ind-card:nth-child(5) .ind-card__art { --tint: #EAFFC2; }
.ind-card:nth-child(6) .ind-card__art { --tint: var(--wash-cyan); }
.ind-card .tag { align-self: flex-start; }
.ind-card h3 { font-size: 24px; }
.ind-card p { color: var(--muted); }
.ind-card small { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font: 500 11px/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.env-ink .ind-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--paper); }
.env-ink .ind-card p, .env-ink .ind-card small { color: var(--mist); }
.env-ink .ind-card__go { color: #D2C3FF; }

/* proof: a real project, a picture and a way in */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 56px; }
.proof figure { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(13, 16, 36, .55); transform: rotate(-1.2deg); }
.proof img { width: 100%; height: auto; }
.proof--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.proof .ed-head h2 { max-width: 20ch; }
.proof h3 { font-size: 30px; }
.proof p { margin-top: 14px; color: var(--fg-2); max-width: 48ch; }

/* local: places and numbers */
.areas-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.areas-list li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.areas-list li.is-home { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.stats-row div { padding: 24px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.stats-row b { display: block; font: 800 clamp(40px, 5vw, 64px)/1 var(--font-display); letter-spacing: -.04em; font-variation-settings: "opsz" 96; }
.stats-row span { display: block; margin-top: 10px; color: var(--muted); font-size: var(--small); }
.stats-note { margin-top: 16px; font-size: 13px; color: var(--fg-2); }

/* the Site Check nudge */
.cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--wash-violet); color: var(--ink); }
.cta-card h2, .cta-card h3 { font: 800 clamp(28px, 3.4vw, 44px)/1.02 var(--font-display); letter-spacing: -.03em; }
.cta-card h2 em, .cta-card h3 em { font-family: var(--font-aside); font-style: italic; font-weight: 400; color: var(--violet); }
.cta-card p { margin-top: 12px; max-width: 54ch; color: var(--muted); }


/* ---------- decorative product UI in the hero (role="img", described once) ---------- */
.mock { position: relative; z-index: 1; max-width: 460px; margin-inline: auto; padding: 22px; border-radius: 22px; background: #FFFDF8; color: var(--ink); border: 1px solid #DCD3EA; box-shadow: -12px 16px 0 rgba(179, 146, 211, .22), 0 30px 60px -28px rgba(39, 21, 76, .42); transform: rotate(-1.6deg); font-size: 14px; line-height: 1.35; }
.mock__photo { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; margin-bottom: 16px; background: #EFE3D2; }
.mock__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #ECE6F3; font: 600 13px/1.2 var(--font-body); }
.mock__bar b { margin-left: auto; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 106, 61, .18); }
.mock__label { margin-top: 14px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mock__label:first-of-type { margin-top: 0; }
.mock__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mock__chips span { padding: 7px 11px; border-radius: 999px; border: 1px solid #DCD3EA; font-size: 12.5px; }
.mock__chips .is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mock__chips .is-full { color: var(--muted); text-decoration: line-through; }
.mock__field { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #F3F0EA; font-size: 13px; }
.mock__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.mock__thumbs i { aspect-ratio: 1; border-radius: 9px; background: linear-gradient(145deg, #CFC6DE, #9C8FB8); }
.mock__thumbs i:nth-child(2) { background: linear-gradient(145deg, #F2C0A6, #C98468); }
.mock__thumbs i:nth-child(3) { background: linear-gradient(145deg, #B6E3CC, #6FAE8F); }
.mock__thumbs i:last-child { background: #F3F0EA; border: 1px dashed #CFC6DE; }
.mock__btn { margin-top: 18px; padding: 13px 16px; border-radius: 999px; background: var(--coral); color: var(--ink); text-align: center; font-weight: 600; }
.mock__rows { margin-top: 8px; }
.mock__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #ECE6F3; }
.mock__rows li:first-child { border-top: 0; }
.mock__rows small { font: 500 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.mock__rows .is-ok { color: #0A6B54; }
.mock__search { padding: 11px 16px; border-radius: 999px; border: 1px solid #DCD3EA; box-shadow: 0 4px 12px rgba(39, 21, 76, .08); font-size: 13px; }
.mock__map { position: relative; height: 104px; margin-top: 12px; border-radius: 14px; background: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, .95) 48% 52%, transparent 52%) 0 0 / 56px 100%, linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .95) 46% 54%, transparent 54%) 0 0 / 100% 40px, #E6ECE9; overflow: hidden; }
.mock__map::after { content: ""; position: absolute; left: -10%; right: -10%; top: 58%; height: 16px; background: #CFE3EA; transform: rotate(-8deg); }
.mock__map i, .mock__map b { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #9C9FB2; }
.mock__map b { width: 22px; height: 22px; background: var(--violet); box-shadow: 0 6px 14px rgba(122, 59, 255, .45); }
.mock__result { margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid #ECE6F3; }
.mock__result b { display: block; font: 700 15px/1.25 var(--font-display); letter-spacing: -.01em; }
.mock__result > span { display: block; margin-top: 3px; font-size: 12.5px; color: #9A5B00; }
.mock__result small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.mock__result.is-top { border-color: #B69CF5; box-shadow: 0 12px 26px -12px rgba(122, 59, 255, .35); }
.mock__result.is-dim b { color: #6B6F80; }
.mock__result.is-dim > span { color: #8A6A3A; }
.mock__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mock__actions span { padding: 5px 10px; border-radius: 999px; background: var(--wash-violet); font-size: 11.5px; font-weight: 600; color: #4A2A99; }
.mock__ai { margin-top: 10px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--wash-violet); font-size: 12.5px; color: #2C2F45; }
.mock__ai small { display: block; margin-bottom: 3px; font: 500 9px/1 var(--font-mono); letter-spacing: .12em; color: #6030B2; }
.mock-toast { position: absolute; z-index: 2; right: -6px; top: -4px; display: flex; gap: 10px; align-items: center; max-width: 250px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -18px rgba(13, 16, 36, .7); transform: rotate(2.5deg); font-size: 12.5px; line-height: 1.35; }
.mock-toast i { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--lime); display: grid; place-items: center; font-style: normal; color: var(--ink); font-weight: 700; }
.mock-note { position: absolute; z-index: 2; left: -18px; bottom: -22px; padding: 14px 16px 12px; background: var(--lime); color: var(--ink); transform: rotate(-4deg); box-shadow: 0 14px 26px -14px rgba(13, 16, 36, .5); font: italic 400 18px/1.2 var(--font-aside); }
.mock-note::before { content: ""; position: absolute; left: 50%; top: -9px; width: 54px; height: 16px; margin-left: -27px; background: rgba(255, 255, 255, .55); transform: rotate(3deg); }

/* ---------- the blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: transform var(--hover) var(--settle), border-color var(--hover) var(--settle); }
.post-card:hover { transform: translateY(-3px); border-color: var(--violet); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-card h3 { font-size: 24px; line-height: 1.15; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card p { color: var(--muted); }
.post-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px 56px; align-items: end; padding: clamp(28px, 4vw, 52px); background: var(--ink); color: var(--paper); border-color: var(--ink); }
.post-card--lead .post-card__meta { grid-column: 1 / -1; color: var(--mist); }
.post-card--lead h3 { font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.035em; }
.post-card--lead p { color: var(--mist); font-size: 19px; }
.post-card--lead:hover { border-color: var(--lime); }
.blog-list { margin-top: 56px; }

.post-head { max-width: 900px; padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.post-head h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: .98; }
.post-head .ed-lede { max-width: 48ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--small); color: var(--fg-2); }
.byline img { width: 44px; height: 44px; border-radius: 50%; background: var(--wash-violet); }
.byline b { display: block; color: var(--fg); font-weight: 600; }
.byline time, .byline .byline__read { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.byline__who { margin-right: auto; }
.prose { max-width: 70ch; font-size: 19px; line-height: 1.7; color: #262A40; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 56px; font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--ink); scroll-margin-top: 80px; }
.prose h3 { margin-top: 40px; font: 700 24px/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--violet); }
.prose a { color: var(--ink); text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose blockquote { padding: 6px 0 6px 24px; border-left: 3px solid var(--violet); font: italic 400 24px/1.4 var(--font-aside); color: var(--ink); }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--warm); font: 500 .85em var(--font-mono); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 48px; }
.prose .callout { padding: 22px 24px; border-radius: 18px; background: var(--wash-violet); font-size: 17px; }
.prose .callout b { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #6030B2; margin-bottom: 8px; }
.post-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(64px, 8vw, 112px); }
.post-aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.post-aside .cta-card { grid-template-columns: 1fr; padding: 26px; border-radius: 22px; }
.post-aside .cta-card h3 { font-size: 26px; }
.post-aside .cta-card .btn { width: 100%; }
.post-end { margin-top: 56px; }

/* No dead space (Troy, 6 Oct 2026): three points sit side by side, and a lone last card in two columns spans the row. */
@media (min-width: 901px) {
  .claims:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .claims > li:last-child:nth-child(odd):not(:nth-child(3)) { grid-column: 1 / -1; }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .svc-grid > :last-child:nth-child(odd), .ind-cards > :last-child:nth-child(odd),
  .post-grid:not(.blog-list) > :last-child:nth-child(odd), .blog-list > :last-child:nth-child(even) { grid-column: 1 / -1; }
  /* A card spanning the row lies on its side: picture left, words right; a service keeps its list beside it. */
  :is(.post-grid:not(.blog-list) > .post-card:last-child:nth-child(odd), .blog-list > .post-card:last-child:nth-child(even)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; gap: 12px 32px; }
  :is(.post-grid:not(.blog-list) > .post-card:last-child:nth-child(odd), .blog-list > .post-card:last-child:nth-child(even)) > .editorial-thumb { grid-column: 1; grid-row: 1 / -1; margin: -26px 0 -28px -24px; border-bottom: 0; border-right: 1px solid var(--line); border-radius: 21px 0 0 21px; justify-content: center; }
  :is(.post-grid:not(.blog-list) > .post-card:last-child:nth-child(odd), .blog-list > .post-card:last-child:nth-child(even)) > .post-card__meta { grid-area: 2 / 2; }
  :is(.post-grid:not(.blog-list) > .post-card:last-child:nth-child(odd), .blog-list > .post-card:last-child:nth-child(even)) > h3 { grid-area: 3 / 2; }
  :is(.post-grid:not(.blog-list) > .post-card:last-child:nth-child(odd), .blog-list > .post-card:last-child:nth-child(even)) > p { grid-area: 4 / 2; }
  .svc-grid > .svc:last-child:nth-child(odd) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 12px 40px; }
  .svc-grid > .svc:last-child:nth-child(odd) > :not(.ed-list) { grid-column: 1; }
  .svc-grid > .svc:last-child:nth-child(odd) > .ed-list { grid-column: 2; grid-row: 1 / -1; margin-top: 0; align-self: center; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .svc-grid, .ind-cards, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars--4, .stats-row, .ed-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-body { grid-template-columns: minmax(0, 1fr); }
  .post-aside { position: static; max-width: 560px; }
}
@media (max-width: 900px) {
  .ed-hero__grid, .ed-split, .proof, .cta-card, .post-card--lead { grid-template-columns: minmax(0, 1fr); }
  .ed-split > .ed-head { position: static; }
  .pillars--2, .pillars--3, .claims, .pains { grid-template-columns: minmax(0, 1fr); }
  .ed-hero__visual { padding: 12px 0 30px; }
  .pains li { font-size: 18px; }
}
@media (max-width: 620px) {
  .svc-grid, .ind-cards, .post-grid, .pillars--4, .ed-steps { grid-template-columns: minmax(0, 1fr); }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock { padding: 18px; transform: rotate(-1deg); }
  .mock-toast { right: 0; top: -14px; max-width: 210px; }
  .prose { font-size: 18px; }
  .prose blockquote { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .ind-card, .post-card { transition: none; } .ind-card:hover, .post-card:hover { transform: none; } }
/* The cost guide by email on /website-cost (31 Oct 2026). Inputs use the site's .field look. */
.guide-form { position: relative; display: grid; gap: 16px; max-width: 640px; margin-top: 28px; }
.guide-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guide-form .field { font-weight: 500; }
.guide-form .field small { font-size: inherit; font-weight: 400; color: var(--muted); }
.guide-form__tick { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.guide-form__tick input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.guide-form .btn { justify-self: start; }
.guide-form__fine, .guide-form__status { margin: 0; font-size: 13px; color: var(--muted); }
.guide-form__status:empty { display: none; }
.guide-form__done { margin: 0; font-size: 18px; }
.guide-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .guide-form__row { grid-template-columns: 1fr; } }
/* Pricing: every price at a glance, and the free-website offer once (1 Nov 2026). */
.price-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.price-cards li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.price-cards h3 { font-size: 18px; }
.price-cards b { font: 800 clamp(28px, 3vw, 34px)/1.05 var(--font-display); letter-spacing: -.03em; }
.price-cards b small { display: block; margin-top: 6px; font: 500 13px/1 var(--font-body); letter-spacing: 0; color: var(--fg-2); }
.price-cards p { margin: 0 0 8px; color: var(--fg-2); font-size: 15px; line-height: 1.45; }
.price-cards .btn { margin-top: auto; }
.offer-band { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; padding: 20px 24px; border-radius: 22px; background: var(--lime); color: var(--ink); }
.offer-band b { font: 700 22px/1.2 var(--font-display); }
.offer-band span { flex: 1 1 260px; }
.price-cards li { transition: translate .3s var(--settle, ease), box-shadow .3s var(--settle, ease); }
@media (hover: hover) { .price-cards li:hover { translate: 0 -4px; box-shadow: 0 22px 44px -28px rgba(13, 16, 36, .4); } }
/* Link chips, shared by Marketing and the area pages (1 Nov 2026). */
.area-chips { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none; }
.area-chips a { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px; border:1px solid var(--ink); border-radius:999px; background:#fffdf8; color:var(--ink); font-weight:600; text-decoration:none; transition:translate .25s var(--settle), background .25s var(--settle); }
.area-chips a::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--violet); }
@media (hover:hover) { .area-chips a:hover { translate:0 -2px; background:var(--wash-violet,#ece8fb); } }
.area-chips + .offer-band { margin-top:clamp(40px,5vw,64px); }
.reduce-motion .area-chips a { transition:none; }
.chip-label { margin-top:36px; }
.chip-label + .area-chips { margin-top:12px; }
/* Area pages (Troy, 1 Nov 2026): a local client, the four tiles from Home, a two-figure stats row. */
@media (min-width: 1101px) { .svc-grid--four { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.svc > .btn { margin-top:auto; align-self:flex-start; }
.stats-row--two { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:760px; }
.local-work { margin-top:40px; }
.local-work figure { border:1px solid var(--ink); }
/* Guides (Troy, 1 Nov 2026): the short answer up top, and tables people can scan. */
.answer-box { display:grid; gap:8px; max-width:780px; margin:0 0 64px; padding:26px 30px; border-radius:24px; background:var(--lime); color:var(--ink); }
.answer-box .fig { margin:0; color:var(--ink); }
.answer-box b { font:800 clamp(32px,4.4vw,52px)/1.02 var(--font-display); letter-spacing:-.04em; }
.answer-box p:not(.fig) { margin:0; font-size:17px; line-height:1.5; max-width:58ch; }
.guide-table-wrap { margin-top:40px; overflow-x:auto; border:1px solid var(--line); border-radius:20px; background:var(--card); }
.guide-table { width:100%; min-width:640px; border-collapse:collapse; font-size:15px; line-height:1.5; }
.guide-table th, .guide-table td { padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.guide-table thead th { font:500 11px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:rgba(13,16,36,.035); }
.guide-table tbody th { font:700 17px/1.3 var(--font-display); letter-spacing:-.01em; }
.guide-table td:nth-child(2) { font-weight:600; }
.guide-table tr:last-child > * { border-bottom:0; }
#at-a-glance .guide-table td:nth-child(2) { font-weight:400; }
#at-a-glance .guide-table tbody tr:first-child td { font-weight:600; }
#results .guide-table td:nth-child(2) { font-weight:400; color:var(--muted); }
#results .guide-table td:nth-child(3) { font-weight:600; }
/* Blog posts (Troy, 1 Nov 2026): the short answer up top, and a Site Check box halfway down. */
.prose .answer-box--post { margin:0 0 40px; padding:22px 26px; }
.prose .answer-box--post p:not(.fig) { font-size:18px; line-height:1.55; }
.post-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin:48px 0; padding:22px 24px; border-radius:20px; background:var(--wash-violet); }
.prose .post-cta p { flex:1 1 280px; margin:0; font-size:17px; line-height:1.5; }
.prose .post-cta .btn { color:var(--paper); text-decoration:none; }
/* The free website check page (1 Nov 2026): the website box in the hero, the 12 areas, what the report gives you. */
.check-form { flex:1 1 100%; display:flex; flex-wrap:wrap; gap:10px; max-width:560px; }
.check-form input[type="text"] { flex:1 1 220px; min-height:52px; padding:0 18px; border:1px solid var(--ink); border-radius:999px; background:#fffdf8; color:var(--ink); font:inherit; font-size:17px; }
.check-form input[type="text"]:focus { outline:2px solid var(--electric); outline-offset:2px; }
.check-areas { counter-reset:area; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:40px 0 0; padding:0; list-style:none; }
.check-areas li { counter-increment:area; display:flex; align-items:center; gap:14px; min-height:68px; padding:14px 18px; border-radius:18px; background:var(--card); border:1px solid var(--line); font-weight:700; font-size:17px; line-height:1.25; }
.check-areas li::before { content:counter(area, decimal-leading-zero); flex:none; font:500 12px/1 var(--font-mono); letter-spacing:.06em; color:var(--violet); }
.get-list { display:grid; gap:22px; margin:0; padding:0; list-style:none; }
.get-list li { padding-top:18px; border-top:1px solid var(--rule); }
.get-list h3 { font-size:24px; }
.get-list p { margin-top:6px; color:var(--fg-2); }
@media (max-width: 900px) { .check-areas { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .check-areas li { font-size:15px; min-height:60px; padding:12px 14px; } }
/* Blog posts: the key takeaways at the end (1 Nov 2026). */
.prose .takeaways { margin:48px 0 0; padding:22px 26px; border-radius:20px; border:1px solid var(--ink); background:#fffdf8; }
.prose .takeaways .fig { margin:0 0 12px; }
.prose .takeaways ul { margin:0; padding:0; list-style:none; }
.prose .takeaways li { position:relative; padding-left:32px; font-size:17px; line-height:1.5; }
.prose .takeaways li::before { content:""; position:absolute; left:0; top:.25em; width:18px; height:18px; border-radius:50%; background:var(--lime); box-shadow:inset 0 0 0 1px var(--ink); }
/* A picture inside a blog post (1 Nov 2026). */
.prose .post-figure { margin:40px 0; }
.prose .post-figure img { width:100%; height:auto; border-radius:20px; border:1px solid var(--line); }
.prose .post-figure figcaption { margin-top:10px; font-size:14px; color:var(--muted); }
/* A table inside a blog post fits the phone instead of scrolling sideways: its numbers are the point (1 Nov 2026). */
.prose .guide-table { min-width:0; }
.prose .guide-table th, .prose .guide-table td { padding:12px 14px; }
.prose .guide-table td { white-space:nowrap; }