/* ==========================================================================
   40-content: "Field & Formula" content pages
   Blog (index, card, sidebar, post, inline blocks), policy pages (.doc-*), FAQs and generic pages (.cpage-*),
   About (.about-*), Contact (.contact-*), city hub + city pages (.city-*), 404 (.err-*), simple message (.msg-*).
   Shared components (.btn, .page-banner, .faq, .pcard, .carousel, .prose) are only re-used, never restyled
   globally; context variants are scoped. Colours come only from tokens.
   ========================================================================== */

/* ---------- 0. Shared micro-type: mono labels ---------- */
.blog-side__label, .blog-facts dt, .post-facts dt, .post-toc__title, .post-author__label, .post-explore__title,
.blog-products__kicker, .blog-bar__count, .blog-main__page, .doc-nav__title, .doc-sheet__meta, .cpage__faq-count,
.cpage-help__note, .about-figure__label, .about-fact dt, .about-awards__count, .about-cta__range-title,
.contact-row__label, .contact-next__title, .city-hub__fact dt, .city-dir__count, .err-hero__label, .err-art__cap {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; line-height: 1.35; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted);
}

/* ---------- 1. Blog card (blog index, related posts, home page) ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(18px, 2vw, 28px); }
.blog-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.blog-card {
  position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--c-primary) 22%, var(--c-border)); }
.blog-card__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-tint); }
.blog-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__ph {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--c-primary);
  background: radial-gradient(circle at 50% 50%, var(--c-surface) 0%, transparent 62%), var(--c-tint);
}
.blog-card__ph .icon { width: 46px; height: 46px; opacity: .5; }
.blog-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 18px; }
.blog-card__cat { position: relative; z-index: 2; align-self: flex-start; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.blog-card__cat::before { content: ""; position: absolute; inset: -12px -6px; }
.blog-card__cat:hover { background: var(--c-primary-dark); color: var(--c-on-primary); text-decoration: none; }
.blog-card__title { margin: 2px 0 0; font-size: 1.1875rem; line-height: 1.3; font-weight: 740; letter-spacing: -.016em; }
.blog-card__title a { color: var(--c-text); transition: color var(--dur) var(--ease); }
.blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-card__title a:hover { text-decoration: none; }
.blog-card:hover .blog-card__title a { color: var(--c-primary-dark); }
.blog-card__excerpt {
  margin: 0; color: var(--c-muted); font-size: .9375rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding-top: 14px;
  border-top: 1px solid var(--c-line); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-muted);
}
.blog-card__facts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.blog-card__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--c-line-strong); }
.blog-card__go {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-line); color: var(--c-primary-dark);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.blog-card__go .icon { width: 15px; height: 15px; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card:hover .blog-card__go { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-on-primary); }
.blog-card:hover .blog-card__go .icon { transform: translateX(2px); }

/* ---------- 2. Blog index ---------- */
.blog-index { padding-top: clamp(26px, 3.2vw, 44px); }
.blog-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  margin-bottom: clamp(22px, 2.8vw, 34px); padding-bottom: 18px; border-bottom: 1px solid var(--c-line);
}
.blog-cats { min-width: 0; }
.blog-cats__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.blog-cats__list li { margin: 0; flex: none; }
.blog-cats__link {
  display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: .45rem 1.05rem; border-radius: var(--radius-pill);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text); font-size: .9rem; font-weight: 650; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.blog-cats__link:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)); color: var(--c-primary-dark); text-decoration: none; }
.blog-cats__link.is-active { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-on-primary); }
.blog-cats__count {
  min-width: 24px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--c-paper); font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; text-align: center; color: var(--c-muted);
}
.blog-cats__link.is-active .blog-cats__count { background: color-mix(in srgb, var(--c-on-primary) 16%, transparent); color: var(--c-on-dark); }
.blog-bar__count { margin: 0; }
.blog-bar__count span { color: var(--c-text); font-weight: 600; }

/* Featured article: a large horizontal card */
.blog-feature {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); margin-bottom: clamp(40px, 5vw, 72px);
  overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease);
}
.blog-feature:hover { box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--c-primary) 20%, var(--c-border)); }
.blog-feature__media { position: relative; display: block; min-height: 360px; overflow: hidden; background: var(--c-tint); }
.blog-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.blog-feature:hover .blog-feature__media img { transform: scale(1.04); }
.blog-feature__media .blog-card__ph { position: absolute; inset: 0; }
.blog-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(24px, 3.6vw, 52px); }
.blog-feature__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-feature__tags a.tag { position: relative; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.blog-feature__tags a.tag::before { content: ""; position: absolute; inset: -12px -4px; }
.blog-feature__tags a.tag:hover { background: var(--c-primary-dark); color: var(--c-on-primary); text-decoration: none; }
.blog-feature__title { margin: 0; font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: var(--track-tight); font-weight: 780; }
.blog-feature__title a { color: var(--c-text); }
.blog-feature__title a:hover { color: var(--c-primary-dark); text-decoration: none; }
.blog-feature__excerpt { margin: 0; max-width: 52ch; color: var(--c-ink-soft); font-size: var(--fs-md); line-height: 1.65; }
.blog-feature__cta { align-self: flex-start; margin-top: 4px; }
.blog-feature__cta .icon { transition: transform var(--dur) var(--ease); }
.blog-feature__cta:hover .icon { transform: translateX(3px); }

/* Mono facts strip with hairline dividers (featured card) */
.blog-facts { display: flex; flex-wrap: wrap; margin: 2px 0 0; border-block: 1px solid var(--c-line); }
.blog-facts__item { flex: 0 1 auto; min-width: 0; padding: 12px 22px 12px 0; }
.blog-facts__item + .blog-facts__item { padding-left: 22px; border-left: 1px solid var(--c-line); }
.blog-facts dt { margin-bottom: 4px; }
.blog-facts dd { margin: 0; color: var(--c-text); font-size: .9375rem; font-weight: 650; }

/* Index layout: articles + sticky sidebar */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 64px); align-items: start; }
.blog-main { min-width: 0; }
.blog-main__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.blog-main__title { margin: 0; font-size: var(--fs-xl); }
.blog-main__page { margin: 0; }

/* Only the featured article so far: a deliberate "more on the way" panel with the product range */
.blog-next {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--radius-xl); background: var(--c-paper); border: 1px solid var(--c-line);
}
.blog-next::before {
  content: ""; position: absolute; z-index: -1; right: -18%; top: -46%; width: 560px; aspect-ratio: 1; pointer-events: none;
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  -webkit-mask: var(--mask-contours) center / cover no-repeat; mask: var(--mask-contours) center / cover no-repeat;
}
.blog-next__head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.blog-next__head .eyebrow { margin-bottom: .7rem; }
.blog-next__title { margin: 0 0 .4em; font-size: var(--fs-xl); }
.blog-next__text { margin: 0; max-width: 60ch; color: var(--c-muted); }
.blog-range { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.blog-range li { margin: 0; }
.blog-range__link {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 10px 16px 10px 10px;
  border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease);
}
.blog-range__link:hover { color: var(--c-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--c-primary) 28%, var(--c-border)); }
.blog-range__img { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: var(--c-tint); color: var(--c-primary); }
.blog-range__img img { width: 100%; height: 100%; padding: 6px; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease-out); }
.blog-range__link:hover .blog-range__img img { transform: scale(1.08); }
.blog-range__name { display: block; font-weight: 700; line-height: 1.3; }
.blog-range__meta { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.blog-range__go { width: 18px; height: 18px; color: var(--c-primary); transition: transform var(--dur) var(--ease); }
.blog-range__link:hover .blog-range__go { transform: translateX(3px); }
.blog-next__foot { margin: 22px 0 0; }
.blog-empty p { max-width: 52ch; margin-inline: auto; }
.blog-empty__actions { justify-content: center; margin-top: 18px; }

/* ---------- 3. Blog sidebar (hook: .blog-sidebar + --side-top from the inline script) ---------- */
.blog-sidebar { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 961px) {
  .blog-sidebar { position: sticky; top: var(--side-top, calc(var(--header-h) + 24px)); }
}
.blog-side { min-width: 0; padding: 22px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.blog-side__label { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.blog-side__label::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 2px; background: var(--c-primary); }
.blog-side__heading { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.014em; }
.blog-side__text { margin: 0 0 16px; color: var(--c-muted); font-size: .9rem; line-height: 1.55; }
.blog-side__more { margin-top: 12px; font-size: .9rem; }

/* Search */
.blog-search { position: relative; display: flex; align-items: center; }
.blog-search__ic { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--c-muted); pointer-events: none; }
.blog-search__input { padding-left: 44px; padding-right: 56px; border-radius: var(--radius-pill); }
.blog-search__btn { position: absolute; right: 5px; width: 40px; min-height: 40px; height: 40px; padding: 0; }

/* Compact product rows */
.blog-sp { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.blog-sp li { margin: 0; }
.blog-sp__link {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 -8px; padding: 7px 8px;
  border-radius: 14px; color: var(--c-text); transition: background-color var(--dur) var(--ease);
}
.blog-sp__link:hover { background: var(--c-paper); color: var(--c-text); text-decoration: none; }
.blog-sp__img { display: block; width: 60px; height: 60px; overflow: hidden; border-radius: 12px; background: var(--c-tint); }
.blog-sp__img img { width: 100%; height: 100%; padding: 5px; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease-out); }
.blog-sp__link:hover .blog-sp__img img { transform: scale(1.08); }
.blog-sp__txt { min-width: 0; }
.blog-sp__cat { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); }
.blog-sp__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.blog-sp__go { width: 16px; height: 16px; color: var(--c-muted); opacity: .6; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.blog-sp__link:hover .blog-sp__go { color: var(--c-primary); opacity: 1; transform: translate(2px, -2px); }

/* Dark "talk to us" card (inquiry + WhatsApp) */
.blog-side--talk { padding: 24px; }
.blog-side--talk .eyebrow { margin-bottom: 10px; }
.blog-side--talk .blog-side__heading { color: var(--c-on-dark); font-size: 1.3rem; }
.blog-side--talk .blog-side__text { color: var(--c-on-dark-muted); }
.blog-side__actions { display: grid; gap: 8px; }
.blog-side__wa .icon { color: var(--c-whatsapp); }

/* Lead form card */
.blog-side--lead { background: var(--c-tint); border-color: color-mix(in srgb, var(--c-primary) 12%, var(--c-border)); }
.blog-side--lead .icon-badge { margin-bottom: 14px; }

/* Lead form (sidebar + inline blocks). [data-form-msg] loses its class to .form-success/.form-error (site.js) */
.lead-form { display: grid; gap: 10px; min-width: 0; }
.lead-form .form-row { margin: 0; min-width: 0; }
.lead-form > [data-form-msg] { margin: 0; }
.lead-form__btn .icon { transition: transform var(--dur) var(--ease); }
.lead-form__btn:hover .icon { transform: translateX(3px); }
.lead-form__note { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--c-muted); font-size: .78rem; line-height: 1.4; }
.lead-form__note .icon { width: 13px; height: 13px; color: var(--c-primary); }

/* Categories + popular */
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list li { margin: 0; border-top: 1px solid var(--c-line); }
.blog-list li:first-child { border-top: 0; }
.blog-list__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 8px 0; color: var(--c-text); font-size: .9375rem; font-weight: 600; }
.blog-list__link:hover, .blog-list__link[aria-current] { color: var(--c-primary-dark); text-decoration: none; }
.blog-list__count { min-width: 26px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--c-paper); font-family: var(--font-mono); font-size: .72rem; text-align: center; color: var(--c-muted); }
.blog-pop { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.blog-pop li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; margin: 0; padding: 12px 0; border-top: 1px solid var(--c-line); counter-increment: pop; }
.blog-pop li:first-child { border-top: 0; padding-top: 2px; }
.blog-pop li::before { content: counter(pop, decimal-leading-zero); padding-top: 2px; font-family: var(--font-mono); font-size: .75rem; color: var(--c-primary); }
.blog-pop__link { color: var(--c-text); font-size: .9375rem; font-weight: 650; line-height: 1.4; }
.blog-pop__link:hover { color: var(--c-primary-dark); }

/* ---------- 4. Blog post: header, hero, TOC, takeaways ---------- */
.post-preview { margin: 14px 0; }
.post-header { position: relative; isolation: isolate; overflow: hidden; background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.post-header::before {
  content: ""; position: absolute; z-index: -1; right: -10%; top: -34%; width: min(820px, 90vw); aspect-ratio: 1; pointer-events: none;
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  -webkit-mask: var(--mask-contours) center / cover no-repeat; mask: var(--mask-contours) center / cover no-repeat;
}
.post-header__inner { padding-block: clamp(18px, 2.2vw, 28px) clamp(32px, 4vw, 52px); }
.post-header .breadcrumbs { padding-top: 0; margin-bottom: clamp(28px, 4vw, 56px); }
.post-header .breadcrumbs ol { flex-wrap: nowrap; }
.post-header .breadcrumbs li { flex: none; }
.post-header .breadcrumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.post-header .breadcrumbs [aria-current="page"] { display: block; max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-header__main { max-width: 920px; }
.post-header__kicker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.post-header__cat { position: relative; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.post-header__cat::before { content: ""; position: absolute; inset: -12px -6px; }
.post-header__cat:hover { background: var(--c-primary-dark); color: var(--c-on-primary); text-decoration: none; }
.post-header__title { margin: 0; max-width: 21ch; font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.65rem); line-height: 1.05; letter-spacing: -.034em; font-weight: 790; }
.post-header__lead { margin: 20px 0 0; max-width: 60ch; color: var(--c-ink-soft); font-size: var(--fs-lg); line-height: 1.6; }
.post-facts { display: flex; flex-wrap: wrap; max-width: 920px; margin: clamp(26px, 3.2vw, 40px) 0 0; padding-top: 18px; border-top: 1px solid var(--c-line-strong); }
.post-facts__item { min-width: 0; padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--c-line); }
.post-facts__item:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.post-facts dt { margin-bottom: 7px; }
.post-facts dd { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0; color: var(--c-text); font-size: .9375rem; font-weight: 650; }
.post-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-badge); color: var(--c-accent); font-size: 1.3rem; font-weight: 760; line-height: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-primary) 12%, transparent);
}
.post-avatar--sm { width: 28px; height: 28px; font-size: .78rem; }

.post-body { padding-block: clamp(30px, 4vw, 56px) var(--section-y); }
.post-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5.4vw, 88px); }
.post { min-width: 0; max-width: 780px; }
.post-hero { margin: 0 0 clamp(28px, 3.4vw, 44px); overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--c-line); background: var(--c-tint); }
.post-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }

.post-takeaways { margin: 0 0 24px; padding: 24px 26px; border-radius: var(--radius-lg); background: var(--c-tint); border: 1px solid color-mix(in srgb, var(--c-primary) 14%, var(--c-border)); }
.post-takeaways__title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.0625rem; }
.post-takeaways__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-badge); color: var(--c-accent); }
.post-takeaways__ic .icon { width: 17px; height: 17px; }
.post-takeaways__list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.post-takeaways__list li { display: flex; gap: 11px; margin: 0; color: var(--c-ink-soft); line-height: 1.55; }
.post-takeaways__list .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--c-primary); }

.post-toc { margin: 0 0 clamp(30px, 3.6vw, 46px); padding: 20px 24px 12px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-xs); }
.post-toc__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.post-toc__count { color: var(--c-primary); }
.post-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.post-toc__item { margin: 0; }
.post-toc__item a {
  display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 8px 0; border-top: 1px solid var(--c-line);
  color: var(--c-ink-soft); font-size: .9375rem; font-weight: 600; line-height: 1.4; transition: color var(--dur) var(--ease);
}
.post-toc__item:first-child a { border-top: 0; }
.post-toc__item a:hover { color: var(--c-primary-dark); text-decoration: none; }
.post-toc__item--l2 { counter-increment: toc; }
.post-toc__item--l2 a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 24px; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; color: var(--c-primary); }
.post-toc__item--l3 a { padding-left: 38px; color: var(--c-muted); font-size: .875rem; font-weight: 550; }
.post-toc__item--l3 a::before { content: ""; flex: none; width: 10px; height: 1.5px; margin-left: -24px; margin-right: 0; background: var(--c-line-strong); }

/* ---------- 5. Post content: admin-authored article HTML (blocks inside it are excluded) ---------- */
.post-content { counter-reset: sec; color: var(--c-ink-soft); font-size: 1.0625rem; line-height: 1.8; overflow-wrap: break-word; }
.post-content > :first-child { margin-top: 0; }
.post-content > p:first-child { color: var(--c-text); font-size: 1.16em; line-height: 1.65; }
.post-content :where(p, ul, ol, blockquote, figure, table, pre, iframe, video):not(:where(.blog-block *, .blog-faq *)) { margin: 0 0 1.3em; }
.post-content :where(h2, h3, h4):not(:where(.blog-block *, .blog-faq *)) { color: var(--c-text); scroll-margin-top: calc(var(--header-h) + 24px); text-wrap: balance; }
.post-content :where(h2):not(:where(.blog-block *, .blog-faq *, .blog-faq)) {
  counter-increment: sec; margin: 2em 0 .55em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); line-height: 1.18; letter-spacing: -.024em; font-weight: 760;
}
.post-content :where(h2):not(:where(.blog-block *, .blog-faq *, .blog-faq))::before {
  content: counter(sec, decimal-leading-zero); display: block; width: fit-content; margin-bottom: .7rem; padding: .2em .5em;
  border-radius: 5px; background: var(--c-primary-soft); color: var(--c-primary-dark);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; line-height: 1.3;
}
.post-content :where(h3):not(:where(.blog-block *, .blog-faq *)) { margin: 1.7em 0 .45em; font-size: 1.28rem; line-height: 1.3; letter-spacing: -.014em; }
.post-content :where(h4):not(:where(.blog-block *, .blog-faq *)) { margin: 1.5em 0 .4em; font-size: 1.0625rem; }
.post-content :where(h2) + :where(h3) { margin-top: .9em; }
.post-content :where(strong, b):not(:where(.blog-block *, .blog-faq *)) { color: var(--c-text); }
.post-content :where(a):not(:where(.blog-block *, .blog-faq *, .btn)) {
  color: var(--c-primary-dark); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--c-primary) 45%, transparent); transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.post-content :where(a):not(:where(.blog-block *, .blog-faq *, .btn)):hover { color: var(--c-primary); text-decoration-color: currentColor; }
.post-content :where(ul, ol):not(:where(.blog-block *, .blog-faq *, [class])) { padding-left: 0; list-style: none; }
.post-content :where(ul, ol):not(:where(.blog-block *, .blog-faq *, [class])) > li { position: relative; margin: .55em 0; padding-left: 1.8em; }
.post-content :where(ul):not(:where(.blog-block *, .blog-faq *, [class])) > li::before {
  content: ""; position: absolute; left: .3em; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 15%, transparent);
}
.post-content :where(ol):not(:where(.blog-block *, .blog-faq *, [class])) { counter-reset: li; }
.post-content :where(ol):not(:where(.blog-block *, .blog-faq *, [class])) > li { counter-increment: li; }
.post-content :where(ol):not(:where(.blog-block *, .blog-faq *, [class])) > li::before {
  content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .28em; font-family: var(--font-mono); font-size: .78em; font-weight: 500; color: var(--c-primary);
}
.post-content :where(li > ul, li > ol) { margin: .4em 0 0; }
.post-content :where(blockquote):not(:where(.blog-block *, .blog-faq *)) {
  position: relative; margin: 2em 0; padding: 22px 26px 22px 62px; border-radius: var(--radius-lg); border-left: 3px solid var(--c-accent-dark);
  background: var(--c-paper); color: var(--c-text); font-size: 1.1em; font-weight: 550; line-height: 1.6; letter-spacing: -.008em;
}
.post-content :where(blockquote):not(:where(.blog-block *, .blog-faq *))::before {
  content: "\201C"; position: absolute; left: 20px; top: 14px; color: var(--c-primary); font-size: 3.2rem; font-weight: 800; line-height: 1;
}
.post-content :where(blockquote) > :last-child { margin-bottom: 0; }
.post-content :where(blockquote cite) { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: .75rem; font-style: normal; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.post-content :where(img):not(:where(.blog-block *, .blog-faq *)) { border-radius: var(--radius-lg); }
.post-content :where(figure):not(:where(.blog-block *, .blog-faq *)) { margin: 2em 0; }
.post-content :where(figure img) { display: block; margin-inline: auto; }
.post-content :where(figcaption):not(:where(.blog-block *, .blog-faq *)) { margin-top: 10px; color: var(--c-muted); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; line-height: 1.5; text-align: center; }
.post-content :where(table):not(:where(.blog-block *, .blog-faq *)) {
  width: 100%; margin: 1.8em 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0;
  font-size: .9375rem; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.post-content :where(th, td):not(:where(.blog-block *, .blog-faq *)) { padding: 12px 16px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.post-content :where(thead th, tr:first-child > th):not(:where(.blog-block *, .blog-faq *)) {
  background: var(--c-paper); color: var(--c-muted); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.post-content :where(tbody tr:nth-child(even)):not(:where(.blog-block *, .blog-faq *)) { background: color-mix(in srgb, var(--c-paper) 60%, transparent); }
.post-content :where(tr:last-child > *) { border-bottom: 0; }
.post-content :where(hr):not(:where(.blog-block *, .blog-faq *)) { width: 72px; margin: 2.6em 0; border: 0; border-top: 2px solid var(--c-line-strong); }
.post-content :where(code):not(:where(.blog-block *, .blog-faq *, pre *)) { padding: .12em .4em; border-radius: 6px; background: var(--c-tint); color: var(--c-primary-dark); font-size: .86em; }
.post-content :where(pre):not(:where(.blog-block *, .blog-faq *)) { padding: 18px 20px; overflow-x: auto; border-radius: var(--radius); background: var(--c-forest-deep); color: var(--c-on-dark); font-size: .86rem; line-height: 1.6; }
.post-content :where(mark) { padding: 0 .15em; border-radius: 3px; background: color-mix(in srgb, var(--c-accent) 55%, transparent); color: var(--c-text); }
.post-content :where(iframe, video):not(:where(.blog-block *, .blog-faq *)) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); }

/* ---------- 6. Post inline blocks: lead form, CTA, products, FAQ; foot (author, explore), related ---------- */
.blog-block { margin: clamp(34px, 4.4vw, 52px) 0; font-size: 1rem; line-height: 1.6; color: var(--c-text); }
.post-conclusion { margin: clamp(40px, 5vw, 60px) 0 0; }
.post-conclusion > .blog-block { margin: 0; }

.blog-leadbox { position: relative; overflow: hidden; padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.blog-leadbox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-brand); }
.blog-leadbox__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.blog-leadbox__copy { min-width: 0; }
.blog-leadbox__title { margin: 0 0 4px; color: var(--c-text); font-size: 1.2rem; font-weight: 750; line-height: 1.3; letter-spacing: -.016em; }
.blog-leadbox__text { margin: 0; max-width: 56ch; color: var(--c-muted); font-size: .9375rem; }
.blog-leadbox .lead-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: start; }
.blog-leadbox .lead-form > :is([data-form-msg], .lead-form__note, .cf-turnstile) { grid-column: 1 / -1; }
.blog-leadbox .lead-form__btn { min-height: 48px; }

.blog-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 32px; padding: clamp(24px, 3.4vw, 38px); border-radius: var(--radius-xl); }
.blog-cta .eyebrow { margin-bottom: 10px; }
.blog-cta__title { margin: 0 0 6px; color: var(--c-on-dark); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 760; line-height: 1.2; letter-spacing: -.022em; }
.blog-cta__lead { margin: 0; max-width: 46ch; color: var(--c-on-dark-muted); font-size: .9688rem; }
.blog-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.blog-products__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 18px; }
.blog-products__kicker { margin: 0 0 6px; color: var(--c-primary); }
.blog-products__title { margin: 0; color: var(--c-text); font-size: 1.25rem; font-weight: 750; line-height: 1.25; letter-spacing: -.016em; }
.blog-products__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.blog-products__item { min-width: 0; }
.blog-products__item > .pcard, .blog-products__item > .pcs-more { height: 100%; }
.blog-products .pcs-more { min-height: 300px; }

.blog-faq { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 1rem; line-height: 1.6; }
.blog-faq .eyebrow { margin-bottom: .7rem; }
.blog-faq__title { margin: 0 0 20px; font-size: var(--fs-xl); }

.post-foot { display: grid; gap: 24px; margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--c-line); }
.post-author { display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--c-paper); border: 1px solid var(--c-line); }
.post-author__body { min-width: 0; }
.post-author__label { margin: 0 0 4px; }
.post-author__name { margin: 0 0 6px; color: var(--c-text); font-size: 1.125rem; font-weight: 750; letter-spacing: -.012em; }
.post-author__bio { margin: 0; color: var(--c-muted); font-size: .9375rem; line-height: 1.6; }
.post-explore__title { margin: 0 0 12px; }
.post-explore__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.post-explore__list li { margin: 0; }
.post-explore__link {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .45rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text); font-size: .875rem; font-weight: 600;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.post-explore__link .icon { width: 15px; height: 15px; color: var(--c-primary); }
.post-explore__link:hover { border-color: color-mix(in srgb, var(--c-primary) 42%, var(--c-border)); color: var(--c-primary-dark); text-decoration: none; }
.post-explore__link--tag { background: var(--c-paper); font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; }

/* ---------- 7. Policy pages: compact banner + legal reading layout ---------- */
.doc { padding-top: clamp(30px, 4vw, 56px); }
.doc__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.doc__main { display: grid; gap: 20px; min-width: 0; }
.doc__grid > .doc__main:first-child { grid-column: 1 / -1; width: 100%; max-width: 920px; margin-inline: auto; }
.doc__rail { display: grid; gap: 24px; min-width: 0; }
.doc-nav__title { margin: 0 0 10px; padding-left: 12px; }
.doc-nav__list, .doc-toc__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.doc-nav__list li, .doc-toc__list li { margin: 0; }
.doc-nav__link {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; color: var(--c-ink-soft);
  font-size: .9375rem; font-weight: 600; line-height: 1.3; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.doc-nav__link .icon { width: 17px; height: 17px; color: var(--c-muted); }
.doc-nav__link:hover { background: var(--c-surface); color: var(--c-text); text-decoration: none; }
.doc-nav__link[aria-current="page"] { background: var(--c-surface); color: var(--c-primary-dark); box-shadow: var(--shadow-xs), inset 3px 0 0 var(--c-primary); }
.doc-nav__link[aria-current="page"] .icon { color: var(--c-primary); }
.doc-toc { padding-top: 20px; border-top: 1px solid var(--c-line); }
.doc-toc__item a { display: block; padding: 7px 12px; border-left: 2px solid var(--c-line); color: var(--c-muted); font-size: .875rem; line-height: 1.4; }
.doc-toc__item--l3 a { padding-left: 24px; }
.doc-toc__item a:hover { border-left-color: var(--c-primary); color: var(--c-primary-dark); text-decoration: none; }
.doc-sheet { padding: clamp(24px, 4.4vw, 60px) clamp(20px, 5vw, 68px); border-radius: var(--radius-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
.doc-sheet__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 clamp(22px, 3vw, 34px); padding-bottom: 18px; border-bottom: 1px solid var(--c-line); }
.doc-sheet__meta > span { display: inline-flex; align-items: center; }
.doc-sheet__meta > span + span::before { content: ""; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%; background: var(--c-line-strong); }
.doc-sheet__kind { gap: 8px; color: var(--c-primary-dark); }
.doc-sheet__kind .icon { width: 15px; height: 15px; color: var(--c-primary); }
.doc-sheet__body { max-width: 72ch; }
.doc-sheet__body > :last-child { margin-bottom: 0; }
.doc-sheet__body :where(h2, h3) { scroll-margin-top: calc(var(--header-h) + 24px); color: var(--c-text); }
.doc-sheet__body > :where(h2) { padding-top: 1.2em; border-top: 1px solid var(--c-line); }
.doc-sheet__faq { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.doc-sheet__faq .eyebrow { margin-bottom: .7rem; }
.doc-sheet__faq h2 { margin-bottom: 18px; font-size: var(--fs-xl); }
.doc-help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 22px; padding: 22px 26px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.doc-help__title { margin: 0 0 3px; font-size: 1.0625rem; }
.doc-help__text p { margin: 0; color: var(--c-muted); font-size: .9rem; line-height: 1.55; }
.doc-help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.doc-help__link { margin-left: 6px; font-size: .9rem; }

/* ---------- 8. FAQs, landing and generic pages ---------- */
.cpage { padding-top: clamp(34px, 4.4vw, 64px); }
.cpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.cpage__main { display: grid; gap: clamp(28px, 3.6vw, 44px); min-width: 0; }
.cpage__doc { max-width: 72ch; }
.cpage__doc > :last-child { margin-bottom: 0; }
.cpage__faq .eyebrow { margin-bottom: .7rem; }
.cpage__faq h2 { font-size: var(--fs-xl); }
.cpage__faq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cpage__faq-head h2 { margin: 0; }
.cpage__faq-count { margin: 0; }
/* FAQ page: numbered questions (scoped variant of the shared accordion) */
.cpage--faq .faq { counter-reset: q; }
.cpage--faq .faq__item { counter-increment: q; }
.cpage--faq .faq__q { padding-block: 18px; }
.cpage--faq .faq__q::before { content: counter(q, decimal-leading-zero); flex: none; width: 26px; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; color: var(--c-primary); }
.cpage--faq .faq__q-text { flex: 1; }
.cpage--faq .faq__a { padding-left: 60px; }
.cpage-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: start; padding: clamp(22px, 3.2vw, 36px); border-radius: var(--radius-xl); background: var(--c-paper); border: 1.5px dashed var(--c-line-strong); }
.cpage-empty .icon-badge { grid-row: span 2; }
.cpage-empty__title { margin: 4px 0 0; font-size: var(--fs-xl); }
.cpage-empty__text { margin: 0; max-width: 58ch; color: var(--c-muted); }
.cpage-topics__title { margin: 0 0 16px; font-size: var(--fs-lg); }
.cpage-topics__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.cpage-topics__grid li { margin: 0; }
.cpage-topic {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 16px 18px;
  border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease);
}
.cpage-topic:hover { color: var(--c-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--c-primary) 28%, var(--c-border)); }
.cpage-topic__txt { min-width: 0; }
.cpage-topic__txt strong { display: block; font-size: .975rem; line-height: 1.3; }
.cpage-topic__txt span { display: block; margin-top: 2px; color: var(--c-muted); font-size: .8125rem; line-height: 1.4; }
.cpage-topic__go { width: 18px; height: 18px; color: var(--c-primary); transition: transform var(--dur) var(--ease); }
.cpage-topic:hover .cpage-topic__go { transform: translateX(3px); }
.cpage-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; padding: clamp(24px, 3.4vw, 36px); border-radius: var(--radius-xl); }
.cpage-cta .eyebrow { margin-bottom: 10px; }
.cpage-cta h2 { margin: 0 0 6px; color: var(--c-on-dark); font-size: var(--fs-xl); }
.cpage-cta__text > p:not(.eyebrow) { margin: 0; color: var(--c-on-dark-muted); }
.cpage-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cpage-help { padding: 26px; border-radius: var(--radius-xl); }
.cpage-help .icon-badge { margin-bottom: 18px; }
.cpage-help__title { margin: 0 0 6px; color: var(--c-on-dark); font-size: 1.35rem; }
.cpage-help__text { margin: 0 0 20px; color: var(--c-on-dark-muted); font-size: .9375rem; }
.cpage-help__actions { display: grid; gap: 8px; }
.cpage-help__note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--c-dark-line); color: var(--c-on-dark-muted); }
.cpage-help__note .icon { width: 14px; height: 14px; color: var(--c-accent); }
.cpage-help__link { margin-top: 12px; font-size: .9rem; }
@media (min-width: 961px) {
  .cpage__aside { position: sticky; top: calc(var(--header-h) + 24px); }
  .doc__rail { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- 9. About ---------- */
.about-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
.about-collage { position: relative; aspect-ratio: 5 / 5.5; }
.about-collage__main { position: absolute; left: 0; top: 0; width: 72%; height: 88%; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow); background: var(--c-tint); }
.about-collage__sub { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); border: 6px solid var(--c-surface); box-shadow: var(--shadow-lg); background: var(--c-tint); }
.about-collage__main img, .about-collage__sub img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-collage__badge {
  position: absolute; right: 3%; top: 9%; display: flex; flex-direction: column; gap: 2px; width: min(190px, 40%); padding: 18px 20px;
  border-radius: var(--radius-lg); background: var(--grad-forest); box-shadow: var(--shadow-lg);
}
.about-collage__est { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.about-collage__num { color: var(--c-on-dark); font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.about-collage__cap { color: var(--c-on-dark-muted); font-size: .8125rem; line-height: 1.4; }
.about-collage__iso {
  position: absolute; left: 5%; bottom: 5%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-pill);
  background: var(--c-surface); box-shadow: var(--shadow); color: var(--c-text); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
}
.about-collage__iso .icon { width: 15px; height: 15px; color: var(--c-primary); }
.about-story__text { min-width: 0; }
.about-story__prose { max-width: 60ch; }
.about-story__prose h2 { margin-top: 0; font-size: var(--fs-2xl); letter-spacing: var(--track-tight); color: var(--c-text); }
.about-story__prose > :last-child { margin-bottom: 0; }
.about-points { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.about-point { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.about-point__title { display: block; margin-bottom: 2px; color: var(--c-text); font-size: 1rem; }
.about-point__text { display: block; color: var(--c-muted); font-size: .9375rem; line-height: 1.55; }
.about-story__actions { gap: 12px 24px; margin-top: 28px; }

/* Figures band */
.about-figures { padding-block: clamp(52px, 5.4vw, 88px); }
.about-figures .container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 28px clamp(32px, 5vw, 72px); align-items: start; }
.about-figures__head h2 { margin: 0; color: var(--c-on-dark); font-size: var(--fs-2xl); }
.about-figures__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.about-figure { min-width: 0; margin: 0; padding: 22px 20px 24px; border-top: 1px solid var(--c-dark-line); border-left: 1px solid var(--c-dark-line); }
.about-figure:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.about-figure__value { margin: 0 0 8px; color: var(--c-on-dark); font-size: clamp(2rem, 1.3rem + 1.9vw, 3.1rem); font-weight: 780; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.about-figure__suffix { color: var(--c-accent); }
.about-figure__unit { margin-left: 2px; color: var(--c-accent); font-size: .4em; font-weight: 600; letter-spacing: 0; }
.about-figure__label { margin: 0; color: var(--c-on-dark-muted); }

/* Facilities */
.about-facility__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 24px clamp(32px, 5vw, 80px); margin-bottom: clamp(28px, 3.4vw, 44px); }
.about-facility__intro h2 { margin-bottom: .4em; }
.about-facility__lead { margin: 0; max-width: 60ch; color: var(--c-muted); font-size: var(--fs-md); }
.about-facility__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--c-line-strong); }
.about-fact { min-width: 0; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--c-line); }
.about-fact:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--c-line); }
.about-fact dt { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.about-fact dt .icon { width: 14px; height: 14px; color: var(--c-primary); }
.about-fact dd { margin: 0; color: var(--c-text); font-size: .9375rem; font-weight: 650; line-height: 1.4; }
.about-gallery { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; list-style: none; margin: 0; padding: 0; }
.about-gallery__item { min-width: 0; margin: 0; }
.about-shot { position: relative; isolation: isolate; height: clamp(320px, 34vw, 480px); margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--c-tint); }
.about-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.about-shot:hover img { transform: scale(1.05); }
.about-shot::after { content: ""; position: absolute; inset: 40% 0 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c-forest-deep) 88%, transparent) 100%); }
.about-shot__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: grid; gap: 2px; }
.about-shot__no { margin-bottom: 6px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; color: var(--c-accent); }
.about-shot__cap strong { color: var(--c-on-dark); font-size: 1.0625rem; font-weight: 720; line-height: 1.3; }
.about-shot__cap span:last-child { color: var(--c-on-dark-muted); font-size: .84rem; line-height: 1.45; }

/* Quality + R&D */
.about-quality__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
.about-quality__text { min-width: 0; }
.about-quality__lead { max-width: 56ch; margin: 0 0 26px; color: var(--c-muted); font-size: var(--fs-md); }
.about-quality__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.about-check { display: flex; gap: 12px; margin: 0; padding: 16px; border-radius: var(--radius-lg); background: var(--c-paper); border: 1px solid var(--c-line); }
.about-check__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--grad-badge); color: var(--c-accent); }
.about-check__ic .icon { width: 18px; height: 18px; }
.about-check__body { min-width: 0; }
.about-check__body strong { display: block; margin-bottom: 3px; color: var(--c-text); font-size: .975rem; line-height: 1.3; }
.about-check__body span { display: block; color: var(--c-muted); font-size: .84rem; line-height: 1.5; }
.about-quality__media { position: relative; aspect-ratio: 1 / .9; }
.about-quality__img { position: absolute; overflow: hidden; border-radius: var(--radius-xl); background: var(--c-tint); box-shadow: var(--shadow); }
.about-quality__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-quality__img--a { left: 0; top: 0; width: 76%; height: 66%; }
.about-quality__img--b { right: 0; bottom: 0; width: 60%; height: 50%; border: 6px solid var(--c-surface); box-shadow: var(--shadow-lg); }

/* Awards: framed certificate cards */
.about-awards__head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.about-awards__count { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.about-awards__count span { color: var(--c-text); font-family: var(--font); font-size: 2.5rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; text-transform: none; }
.about-awards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); list-style: none; margin: 0; padding: 0; }
.about-awards__item { min-width: 0; margin: 0; }
.about-award {
  display: flex; flex-direction: column; height: 100%; margin: 0; padding: 12px; border-radius: var(--radius-lg); background: var(--c-surface);
  border: 1px solid var(--c-line); box-shadow: var(--shadow-xs);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.about-award:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.about-award__frame {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: clamp(14px, 1.8vw, 22px);
  border-radius: 10px; background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line);
}
.about-award__frame img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-footer-bg) 10%, transparent), 0 10px 24px color-mix(in srgb, var(--c-footer-bg) 14%, transparent);
  transition: transform .8s var(--ease-out);
}
.about-award:hover .about-award__frame img { transform: scale(1.03); }
.about-award__cap { display: flex; align-items: flex-start; gap: 14px; padding: 16px 8px 8px; }
.about-award__no { flex: none; padding: 3px 7px; border-radius: 5px; background: var(--c-primary-soft); color: var(--c-primary-dark); font-family: var(--font-mono); font-size: .72rem; line-height: 1.3; }
.about-award__txt { min-width: 0; }
.about-award__txt strong { display: block; margin-bottom: 4px; color: var(--c-text); font-size: 1rem; line-height: 1.3; }
.about-award__txt span { display: block; color: var(--c-muted); font-size: .84rem; line-height: 1.5; }

/* Two-column FAQ (about + city pages) */
.about-faq__grid, .city-faq__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; gap: 24px clamp(32px, 5vw, 80px); }
.about-faq__head h2, .city-faq__head h2 { margin-bottom: .45em; }
.about-faq__head p:not(.eyebrow), .city-faq__head p:not(.eyebrow) { margin: 0; color: var(--c-muted); }
@media (min-width: 961px) {
  .about-faq__head, .city-faq__head { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Closing CTA band over a field photo */
.about-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 6vw, 104px); background: var(--c-forest-deep); color: var(--c-on-dark-muted); }
.about-cta__bg { position: absolute; inset: 0; z-index: -2; }
.about-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.about-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c-forest-deep) 95%, transparent) 0%, color-mix(in srgb, var(--c-primary-dark) 88%, transparent) 55%, color-mix(in srgb, var(--c-primary-dark) 72%, transparent) 100%);
}
.about-cta__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 32px clamp(32px, 5vw, 80px); }
.about-cta h2 { max-width: 20ch; margin: 0 0 .4em; color: var(--c-on-dark); font-size: var(--fs-2xl); }
.about-cta__text > p:not(.eyebrow) { max-width: 52ch; margin: 0; color: var(--c-on-dark-muted); font-size: var(--fs-md); }
.about-cta__actions { margin-top: 26px; }
.about-cta__range { padding: 20px; border-radius: var(--radius-xl); background: color-mix(in srgb, var(--c-forest-deep) 62%, transparent); border: 1px solid var(--c-dark-line); }
.about-cta__range-title { margin: 0 0 8px 10px; color: var(--c-on-dark-muted); }
.about-cta__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.about-cta__list li { margin: 0; }
.about-cta__chip { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 10px; border-radius: 12px; color: var(--c-on-dark); font-weight: 650; transition: background-color var(--dur) var(--ease); }
.about-cta__chip:hover { background: var(--c-dark-fill); color: var(--c-on-dark); text-decoration: none; }
.about-cta__chip-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--c-dark-fill); border: 1px solid var(--c-dark-line); color: var(--c-accent); }
.about-cta__chip-ic .icon { width: 16px; height: 16px; }
.about-cta__chip-go { width: 16px; height: 16px; margin-left: auto; color: var(--c-accent); opacity: .75; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.about-cta__chip:hover .about-cta__chip-go { opacity: 1; transform: translateX(3px); }
.about-cta__chip--all { color: var(--c-accent); }
.about-cta__chip--all:hover { color: var(--c-accent); }

/* ---------- 10. Contact ---------- */
.contact { padding-top: clamp(34px, 4.4vw, 64px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 2.6vw, 32px); }
.contact-form-card { min-width: 0; padding: clamp(22px, 3.6vw, 44px); border-radius: var(--radius-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.contact-form-card__head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--c-line); }
.contact-form-card__head .eyebrow { margin-bottom: .75rem; }
.contact-form-card__title { margin: 0 0 8px; font-size: var(--fs-2xl); }
.contact-form-card__lead { margin: 0; max-width: 56ch; color: var(--c-muted); }
.contact-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.contact-form .form-row { min-width: 0; margin-bottom: 18px; }
.contact-form__req { color: var(--c-danger); }
.contact-form .textarea { min-height: 150px; }
.contact-form > [data-form-msg] { margin: 0 0 16px; }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.contact-form__foot .btn .icon { transition: transform var(--dur) var(--ease); }
.contact-form__foot .btn:hover .icon { transform: translate(2px, -2px); }
.contact-form__note { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.contact-form__note .icon { width: 14px; height: 14px; color: var(--c-primary); }
.contact__aside { display: grid; gap: 20px; min-width: 0; }
.contact-details { padding: clamp(22px, 2.8vw, 30px); border-radius: var(--radius-xl); background: var(--c-surface); border: 1px solid var(--c-line); }
.contact-details .eyebrow { margin-bottom: .7rem; }
.contact-details__name { margin: 0 0 12px; font-size: var(--fs-xl); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-row { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 13px 0; border-top: 1px solid var(--c-line); }
.contact-row__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); }
.contact-row__ic .icon { width: 18px; height: 18px; }
.contact-row__ic--wa { background: var(--c-wa-soft); color: var(--c-wa-ink); }
.contact-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.contact-row__value { color: var(--c-text); font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
a.contact-row__value:hover { color: var(--c-primary-dark); }
.contact-row__value--mono { font-family: var(--font-mono); font-weight: 500; }
.contact-details__link { width: 100%; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: .9375rem; }
.contact-talk { padding: clamp(22px, 2.8vw, 30px); border-radius: var(--radius-xl); }
.contact-talk .eyebrow { margin-bottom: .7rem; }
.contact-talk__title { margin: 0 0 8px; color: var(--c-on-dark); font-size: var(--fs-xl); }
.contact-talk__text { margin: 0 0 20px; color: var(--c-on-dark-muted); font-size: .9375rem; }
.contact-talk__actions { display: grid; gap: 10px; }
.contact-next { margin-top: clamp(32px, 4vw, 56px); padding: clamp(22px, 3.2vw, 38px); border-radius: var(--radius-xl); background: var(--c-surface); border: 1px solid var(--c-line); }
.contact-next__title { margin: 0 0 22px; }
.contact-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.contact-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic no" "t t" "x x"; align-items: center; gap: 14px 12px;
  min-width: 0; margin: 0; padding: 0 28px 0 0;
}
.contact-step + .contact-step { padding-left: 28px; border-left: 1px solid var(--c-line); }
.contact-step__ic { grid-area: ic; }
.contact-step__no { grid-area: no; justify-self: end; padding: .25em .55em; border-radius: 5px; background: var(--c-primary-soft); color: var(--c-primary-dark); font-family: var(--font-mono); font-size: .75rem; line-height: 1.3; }
.contact-step__title { grid-area: t; margin: 4px 0 0; font-size: 1.0625rem; }
.contact-step__text { grid-area: x; margin: -6px 0 0; color: var(--c-muted); font-size: .9rem; line-height: 1.55; }

/* ---------- 11. City hub + city pages ---------- */
.city-preview { padding-top: 14px; }
.city-preview .alert { margin: 0 0 14px; }
.city-banner__meta { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 8px; margin: 0 0 6px; }
.city-banner__chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px; border-radius: var(--radius-pill);
  background: var(--c-dark-fill); border: 1px solid var(--c-glass-border); color: var(--c-on-dark); font-size: .875rem; font-weight: 600;
}
.city-banner__chip .icon { width: 15px; height: 15px; color: var(--c-accent); }

.city-hub__head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 24px 56px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.city-hub__intro h2 { margin-bottom: .35em; }
.city-hub__intro p:not(.eyebrow) { max-width: 60ch; margin: 0; color: var(--c-muted); font-size: var(--fs-md); }
.city-hub__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--c-line-strong); }
.city-hub__fact { min-width: 0; padding: 14px 16px 0 0; }
.city-hub__fact + .city-hub__fact { padding-left: 18px; border-left: 1px solid var(--c-line); }
.city-hub__fact dt { margin-bottom: 6px; }
.city-hub__fact dd { margin: 0; color: var(--c-text); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 780; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.city-dir { border-top: 1px solid var(--c-line); }
.city-dir__state { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px 32px; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.city-dir__head { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.city-dir__name { margin: 0; font-size: 1.25rem; }
.city-dir__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.city-dir__list li { min-width: 0; margin: 0; }
.city-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 10px 14px 10px 10px;
  border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease);
}
.city-tile:hover { color: var(--c-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); }
.city-tile__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--c-tint); color: var(--c-primary); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.city-tile__ic .icon { width: 18px; height: 18px; }
.city-tile:hover .city-tile__ic { background: var(--c-primary-dark); color: var(--c-accent); }
.city-tile__txt { min-width: 0; }
.city-tile__kicker { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); line-height: 1.35; }
.city-tile__name { display: block; font-size: 1rem; font-weight: 720; line-height: 1.3; }
.city-tile__go { width: 17px; height: 17px; color: var(--c-primary); opacity: .55; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.city-tile:hover .city-tile__go { opacity: 1; transform: translateX(3px); }
.city-empty p { max-width: 52ch; margin-inline: auto; }
.city-empty__actions { justify-content: center; margin-top: 16px; }

.city-service__head { max-width: 760px; }
.city-service__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; gap: 20px; }
.city-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.city-info:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; }
.city-info__item { min-width: 0; margin: 0; padding: 24px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.city-info__item .icon-badge { margin-bottom: 16px; }
.city-info__item h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.city-info__item p { margin: 0; color: var(--c-muted); font-size: .9375rem; line-height: 1.6; }
.city-info__contact { display: grid; gap: 6px; }
.city-info__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--c-primary-dark); font-weight: 650; overflow-wrap: anywhere; }
.city-info__contact .icon { width: 16px; height: 16px; }
.city-steps { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-xl); }
.city-steps .eyebrow { margin-bottom: .7rem; }
.city-steps__title { margin: 0 0 16px; color: var(--c-on-dark); font-size: 1.3rem; }
.city-steps__list { display: grid; list-style: none; margin: 0 0 22px; padding: 0; }
.city-steps__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; margin: 0; padding: 14px 0; border-top: 1px solid var(--c-dark-line); }
.city-steps__no { padding-top: 2px; font-family: var(--font-mono); font-size: .78rem; color: var(--c-accent); }
.city-steps__body strong { display: block; margin-bottom: 2px; color: var(--c-on-dark); font-size: .975rem; }
.city-steps__body span { display: block; color: var(--c-on-dark-muted); font-size: .875rem; line-height: 1.5; }
.city-steps > .btn { margin-top: auto; }
.city-figure { margin: 24px 0 0; overflow: hidden; border-radius: var(--radius-xl); }
.city-figure img { display: block; width: 100%; height: auto; }
.city-nearby__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 22px; }
.city-nearby__head .eyebrow { margin-bottom: .7rem; }
.city-nearby__head h2 { margin: 0; font-size: var(--fs-xl); }
.city-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.city-pills li { margin: 0; }
.city-pill {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .45rem 1rem; border-radius: var(--radius-pill);
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text); font-size: .9rem; font-weight: 600;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.city-pill .icon { width: 15px; height: 15px; color: var(--c-primary); }
.city-pill:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)); color: var(--c-primary-dark); text-decoration: none; }
.city-pill--more { background: transparent; border-style: dashed; border-color: var(--c-line-strong); }
.city-cta { padding-block: clamp(48px, 5vw, 84px); }
.city-cta__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 48px; }
.city-cta__text { max-width: 660px; }
.city-cta .eyebrow { margin-bottom: .8rem; }
.city-cta h2 { margin: 0 0 .35em; color: var(--c-on-dark); font-size: var(--fs-2xl); }
.city-cta__text > p:not(.eyebrow) { margin: 0; color: var(--c-on-dark-muted); font-size: var(--fs-md); }
.city-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 12. 404 + simple message ---------- */
.err-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 6vw, 96px); background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.err-hero::before {
  content: ""; position: absolute; z-index: -1; left: -14%; bottom: -50%; width: min(900px, 110vw); aspect-ratio: 1; pointer-events: none;
  background: color-mix(in srgb, var(--c-primary) 9%, transparent);
  -webkit-mask: var(--mask-contours) center / cover no-repeat; mask: var(--mask-contours) center / cover no-repeat;
}
.err-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 40px clamp(40px, 6vw, 96px); }
.err-hero__text { min-width: 0; }
.err-hero__title { max-width: 16ch; margin: 0 0 .35em; font-size: var(--fs-3xl); }
.err-hero__lead { max-width: 52ch; margin: 0 0 28px; color: var(--c-ink-soft); font-size: var(--fs-lg); }
.err-search { position: relative; display: flex; align-items: center; max-width: 580px; margin-bottom: 30px; }
.err-search__ic { position: absolute; left: 20px; width: 20px; height: 20px; color: var(--c-muted); pointer-events: none; }
.err-search__input { min-height: 60px; padding-left: 52px; padding-right: 128px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.err-search__btn { position: absolute; right: 6px; min-height: 48px; }
.err-hero__label { margin: 0 0 12px; }
.err-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.err-links li { margin: 0; }
.err-link {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .45rem 1rem; border-radius: var(--radius-pill);
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text); font-size: .9rem; font-weight: 600;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.err-link .icon { width: 15px; height: 15px; color: var(--c-primary); }
.err-link:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)); color: var(--c-primary-dark); text-decoration: none; }
.err-hero__actions { margin: 0; }
.err-hero--plain { display: flex; align-items: center; min-height: 100vh; }
.err-art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; aspect-ratio: 1; padding: 32px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.err-art__code { display: flex; align-items: center; gap: .04em; margin: 0; color: var(--c-on-dark); font-family: var(--font-mono); font-size: clamp(5rem, 2.6rem + 7vw, 9.5rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.err-art__zero { display: inline-flex; align-items: center; justify-content: center; width: .62em; height: .84em; border: .085em solid var(--c-accent); border-radius: var(--radius-pill); color: var(--c-accent); }
.err-art__zero .icon { width: .3em; height: .3em; }
.err-art__cap { display: flex; gap: 12px; margin: 0; color: var(--c-on-dark-muted); }
.err-art__cap span:first-child { color: var(--c-accent); }
.err-help { padding-block: clamp(40px, 4.6vw, 72px); }
.err-help__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; }
.err-help h2 { margin: 0 0 4px; color: var(--c-on-dark); font-size: var(--fs-xl); }
.err-help__text p { margin: 0; color: var(--c-on-dark-muted); }
.err-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.msg-page { display: flex; align-items: center; min-height: 56vh; }
.msg-card { max-width: 580px; margin-inline: auto; padding: clamp(28px, 5vw, 52px); border-radius: var(--radius-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); text-align: center; }
.msg-card .icon-badge { margin-bottom: 20px; }
.msg-card__title { margin: 0 0 10px; font-size: var(--fs-2xl); }
.msg-card__text { margin: 0 0 26px; color: var(--c-muted); font-size: var(--fs-md); }
.msg-card__actions { justify-content: center; }

/* ---------- 13. Dark forest surfaces with the contour texture ---------- */
.blog-side--talk, .blog-cta, .cpage-help, .cpage-cta, .contact-talk, .city-steps, .city-cta, .err-help, .err-art, .about-figures {
  position: relative; isolation: isolate; overflow: hidden; background: var(--grad-forest); border-color: transparent; color: var(--c-on-dark-muted);
}
.blog-side--talk::before, .blog-cta::before, .cpage-help::before, .cpage-cta::before, .contact-talk::before, .city-steps::before,
.city-cta::before, .err-help::before, .err-art::before, .about-figures::before {
  content: ""; position: absolute; z-index: -1; right: -24%; bottom: -42%; width: max(340px, 92%); aspect-ratio: 1; pointer-events: none;
  background: color-mix(in srgb, var(--c-accent) 15%, transparent);
  -webkit-mask: var(--mask-contours) center / cover no-repeat; mask: var(--mask-contours) center / cover no-repeat;
}
.city-cta::before, .err-help::before, .about-figures::before { right: -8%; bottom: -70%; width: min(820px, 90vw); }
.err-art::before { right: -30%; bottom: -30%; width: 130%; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 1180px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .post-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .cpage__grid { grid-template-columns: minmax(0, 1fr) 310px; }
  .doc__grid { grid-template-columns: 220px minmax(0, 1fr); }
  .blog-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .blog-products__grid { gap: 12px; }
  .about-figures .container { grid-template-columns: 1fr; }
  .doc-help { grid-template-columns: auto minmax(0, 1fr); }
  .doc-help__actions { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .blog-layout, .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post { max-width: none; }
  .blog-sidebar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
  .post-layout .blog-side--products { display: none; }
  .blog-feature { grid-template-columns: minmax(0, 1fr); }
  .blog-feature__media { min-height: 0; aspect-ratio: 1200 / 630; }

  .doc__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .doc__rail { gap: 18px; }
  .doc-nav__title { padding-left: 0; }
  .doc-nav__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; }
  .doc-nav__list::-webkit-scrollbar { display: none; }
  .doc-nav__list li { flex: none; }
  .doc-nav__link { border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-surface); white-space: nowrap; }
  .doc-nav__link[aria-current="page"] { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-on-primary); box-shadow: none; }
  .doc-nav__link[aria-current="page"] .icon { color: var(--c-accent); }
  .doc-toc { padding-top: 16px; }
  .doc-toc__item a { min-height: 44px; display: flex; align-items: center; }

  .cpage__grid { grid-template-columns: minmax(0, 1fr); }

  .about-story__grid, .about-quality__grid, .about-facility__head, .about-cta__inner,
  .about-faq__grid, .city-faq__grid, .city-hub__head, .city-service__grid, .err-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .about-collage { width: 100%; max-width: 640px; aspect-ratio: 16 / 12; }
  .about-collage__main { width: 66%; height: 90%; }
  .about-collage__sub { width: 50%; }
  .about-quality__media { order: -1; width: 100%; max-width: 640px; aspect-ratio: 16 / 11; }
  .about-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-gallery__item--1 { grid-column: 1 / -1; }
  .about-gallery__item--1 .about-shot { height: clamp(260px, 46vw, 400px); }
  .about-shot { height: clamp(300px, 56vw, 460px); }
  .about-awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }

  .err-art { order: -1; aspect-ratio: auto; min-height: 220px; padding: 28px; }
  .err-art__code { font-size: clamp(4.4rem, 3rem + 6vw, 6.5rem); }
}

@media (max-width: 760px) {
  .post-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .post-facts__item { padding: 0; margin: 0; border: 0; }
  .post-facts__item--author { grid-column: 1 / -1; }
  .post-header .breadcrumbs [aria-current="page"] { max-width: 26ch; }
  .post-content { font-size: 1.0313rem; line-height: 1.75; }
  .post-content :where(table):not(:where(.blog-block *, .blog-faq *)) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-content :where(blockquote):not(:where(.blog-block *, .blog-faq *)) { padding: 52px 20px 20px; }
  .post-content :where(blockquote):not(:where(.blog-block *, .blog-faq *))::before { top: 10px; left: 18px; }
  .blog-cta, .cpage-cta { grid-template-columns: minmax(0, 1fr); }
  .blog-leadbox .lead-form { grid-template-columns: minmax(0, 1fr); }
  .blog-feature__body { gap: 14px; }
  .blog-facts__item { padding-right: 16px; }
  .blog-facts__item + .blog-facts__item { padding-left: 16px; }
  .doc-help, .err-help__inner { grid-template-columns: minmax(0, 1fr); }
  .city-dir__state { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .city-dir__head { flex-direction: row; align-items: baseline; justify-content: space-between; padding-top: 0; }
  .contact-form__pair { grid-template-columns: minmax(0, 1fr); }
  .contact-steps { grid-template-columns: minmax(0, 1fr); }
  .contact-step { padding: 18px 0 0; }
  .contact-step + .contact-step { margin-top: 18px; padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .about-facility__facts { grid-template-columns: minmax(0, 1fr); }
  .about-fact:nth-child(even) { padding-left: 0; border-left: 0; }
  .cpage--faq .faq__a { padding-left: 18px; }
}

@media (max-width: 640px) {
  .blog-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .blog-cats__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; }
  .blog-cats__list::-webkit-scrollbar { display: none; }
  .blog-feature__media { aspect-ratio: 16 / 10; }
  .blog-facts { flex-direction: column; }
  .blog-facts__item, .blog-facts__item + .blog-facts__item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-left: 0; }
  .blog-facts__item + .blog-facts__item { border-top: 1px solid var(--c-line); }
  .blog-facts dt { margin: 0; }
  .blog-feature__cta { align-self: stretch; }
  .blog-next__head { flex-direction: column; gap: 16px; }
  .blog-sidebar { grid-template-columns: minmax(0, 1fr); }

  /* Product blocks inside a post: a swipe row (Req 4.3) */
  .blog-products__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .blog-products__grid::-webkit-scrollbar { display: none; }
  .blog-products__item { scroll-snap-align: start; }

  .post-author { flex-direction: column; gap: 14px; }
  .post-takeaways, .post-toc { padding-inline: 18px; }
  .blog-cta__actions .btn, .cpage-cta__actions .btn { flex: 1 1 160px; }

  .doc-sheet__meta > span + span::before { margin: 0 10px; }
  .doc-help__actions .btn { flex: 1 1 150px; }
  .doc-help__link { margin-left: 0; }
  .cpage-empty { grid-template-columns: minmax(0, 1fr); }
  .cpage-empty .icon-badge { grid-row: auto; }

  .about-collage { aspect-ratio: 1 / 1.02; }
  .about-collage__main { width: 74%; height: 80%; }
  .about-collage__sub { width: 56%; }
  .about-collage__badge { padding: 14px 15px; width: 46%; top: 6%; right: 0; }
  .about-collage__iso { left: 4%; bottom: 3%; }
  .about-figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-figure, .about-figure:nth-child(3n + 1) { padding: 18px 14px 20px; border-left: 1px solid var(--c-dark-line); }
  .about-figure:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .about-quality__list { grid-template-columns: minmax(0, 1fr); }
  .about-quality__media { aspect-ratio: 1 / .82; }
  /* Facility photos and awards: swipe rows */
  .about-gallery, .about-awards__grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  }
  .about-gallery::-webkit-scrollbar, .about-awards__grid::-webkit-scrollbar { display: none; }
  .about-gallery__item, .about-awards__item { scroll-snap-align: start; }
  .about-gallery__item--1 { grid-column: auto; }
  .about-gallery__item .about-shot, .about-gallery__item--1 .about-shot { height: 400px; }
  .about-awards__head { gap: 14px; }

  .contact__aside { grid-template-columns: minmax(0, 1fr); }
  .contact-form__foot .btn { width: 100%; }
  .contact-row__ic { width: 36px; height: 36px; }

  .city-hub__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-info { grid-template-columns: minmax(0, 1fr); }
  .city-cta__actions, .err-help__actions { width: 100%; }
  .city-cta__actions .btn, .err-help__actions .btn { flex: 1 1 160px; }
  .city-banner__chip { font-size: .8125rem; }

  .err-search__input { min-height: 54px; padding-right: 108px; }
  .err-search__btn { min-height: 42px; padding-inline: 1rem; }
  .err-art { min-height: 0; padding: 24px; }
}

@media (max-width: 380px) {
  .blog-card__body { padding: 18px 18px 16px; }
  .blog-side { padding: 18px; }
  .doc-sheet { padding-inline: 18px; }
  .about-collage__num { font-size: 1.8rem; }
  .about-collage__cap { font-size: .75rem; }
  .err-search__input { padding-right: 16px; }
  .err-search { flex-wrap: wrap; gap: 8px; }
  .err-search__btn { position: static; width: 100%; }
  .err-search__ic { top: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card:hover, .blog-range__link:hover, .cpage-topic:hover, .city-tile:hover, .about-award:hover { transform: none; }
  .blog-card:hover .blog-card__img img, .blog-feature:hover .blog-feature__media img, .about-shot:hover img { transform: none; }
}