@import url("./design.css");

/* Direct color values live only in these theme contracts; components use semantic tokens. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --template-bg: #ffffff;
  --template-surface: #ffffff;
  --template-surface-soft: #e8eef5;
  --template-surface-cool: #dde4ec;
  --template-surface-warm: #f6f7f9;
  --template-ink: #202a3a;
  --template-muted: #5e6b7c;
  --template-link: #33445c;
  --template-link-hover: #172033;
  --template-primary: #253247;
  --template-primary-hover: #172033;
  --template-secondary: #36465d;
  --template-danger: #c73a4a;
  --template-success: #2f6d59;
  --template-focus: rgba(37, 50, 71, .24);
  --template-border: #d6dee8;
  --template-shadow-sm: 0 5px 18px rgba(32, 42, 58, .08);
  --template-card-shadow: 0 10px 28px rgba(37, 50, 71, .15);
  --template-shadow-md: 0 14px 34px rgba(32, 42, 58, .12);
  --template-shadow-lg: 0 22px 68px rgba(32, 42, 58, .2);
  --template-header-bg: rgba(255, 255, 255, .82);
  --template-header-bg-scrolled: rgba(255, 255, 255, .9);
  --template-header-solid-bg: #ffffff;
  --template-button-highlight: 0 1px 0 rgba(255, 255, 255, .7) inset;
  --template-button-hover-bg: #dde6f0;
  --template-on-primary: #ffffff;
  --template-primary-shadow: 0 10px 24px rgba(37, 50, 71, .24);
  --template-secondary-soft: #e8eef5;
  --template-secondary-soft-hover: #dde6f0;
  --template-tag-ink: #36465d;
  --template-tag-bg: #e8eef5;
  --template-review-rating-star: #253247;
  --template-review-rating-thumb: #253247;
  --template-pagination-active-ink: #ffffff;
  --template-placeholder-bg: rgba(255, 255, 255, .72);
  --template-form-bg: rgba(255, 255, 255, .9);
  --template-control-shadow: 0 0 0 1px rgba(32, 42, 58, .06) inset;
  --template-control-focus-bg: #ffffff;
  --template-danger-soft: #fdf1f3;
  --template-danger-shadow: 0 0 0 1px rgba(199, 58, 74, .62) inset;
  --template-danger-outline: rgba(199, 58, 74, .34);
  --template-modal-backdrop: rgba(255, 255, 255, .78);
  --template-modal-bg: rgba(255, 255, 255, .94);
  --template-header-height: 64px;
  --template-header-shift: 0px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --template-bg: #121314;
  --template-surface: #1b1d1f;
  --template-surface-soft: #222426;
  --template-surface-cool: #2b2e31;
  --template-surface-warm: #15181c;
  --template-ink: #f3f4f6;
  --template-muted: #a8b0bb;
  --template-link: #d6d9dd;
  --template-link-hover: #ffffff;
  --template-primary: #eceef1;
  --template-primary-hover: #ffffff;
  --template-secondary: #c7cdd5;
  --template-danger: #ff8f8f;
  --template-success: #78c9a0;
  --template-focus: rgba(226, 229, 233, .38);
  --template-border: rgba(255, 255, 255, .08);
  --template-shadow-sm: 0 8px 22px rgba(0, 0, 0, .24);
  --template-card-shadow: 0 10px 28px rgba(226, 229, 233, .08);
  --template-shadow-md: 0 14px 34px rgba(0, 0, 0, .34);
  --template-shadow-lg: 0 22px 68px rgba(0, 0, 0, .52);
  --template-header-bg: rgba(20, 23, 27, .84);
  --template-header-bg-scrolled: rgba(20, 23, 27, .94);
  --template-header-solid-bg: #171a1e;
  --template-button-highlight: 0 1px 0 rgba(255, 255, 255, .06) inset;
  --template-button-hover-bg: #343b45;
  --template-on-primary: #17191b;
  --template-primary-shadow: 0 10px 24px rgba(0, 0, 0, .34);
  --template-secondary-soft: #303337;
  --template-secondary-soft-hover: #3a3e42;
  --template-tag-ink: #dbe1e8;
  --template-tag-bg: #292c2f;
  --template-review-rating-star: #eceef1;
  --template-review-rating-thumb: #eceef1;
  --template-pagination-active-ink: #17191b;
  --template-placeholder-bg: rgba(30, 34, 39, .78);
  --template-form-bg: rgba(26, 29, 33, .9);
  --template-control-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
  --template-control-focus-bg: #292e35;
  --template-danger-soft: #351f24;
  --template-danger-shadow: 0 0 0 1px rgba(255, 143, 143, .62) inset;
  --template-danger-outline: rgba(255, 143, 143, .4);
  --template-modal-backdrop: rgba(7, 9, 12, .78);
  --template-modal-bg: rgba(25, 29, 34, .92);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--template-header-height) + 18px);
}

html.template-modal-open,
body.template-modal-open {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--template-ink);
  background: var(--template-bg);
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--template-link);
  text-decoration: none;
}

a:visited { color: var(--template-link); }
a:hover { color: var(--template-link-hover); }

button,
input,
textarea,
select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--template-focus);
  outline-offset: 3px;
}

.template-site-header-shell {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 0;
  pointer-events: none;
  transform: translate3d(0, calc(-1 * var(--template-header-shift)), 0);
  will-change: transform;
}

.template-site-footer {
  width: 100%;
  margin: auto 0 0;
}

.template-site-header {
  position: relative;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 8px max(16px, calc(50vw - 560px));
  border-radius: 0;
  pointer-events: auto;
  background: var(--template-header-bg);
  box-shadow: var(--template-shadow-sm);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
}

.template-site-header-shell.is-scrolled .template-site-header {
  background: var(--template-header-bg-scrolled);
  box-shadow: var(--template-shadow-md);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .template-site-header,
  .template-modal {
    background: var(--template-header-solid-bg);
  }
}

.template-site-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  color: var(--template-ink);
  font-size: 16px;
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
}

.template-site-brand__content {
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.template-site-brand__content--below-logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.template-site-brand__mark {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-site-brand__image {
  display: block;
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}

.template-site-brand__annotation {
  flex: 0 1 auto;
  max-width: 220px;
  color: var(--template-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-decoration: none;
}

.template-site-brand:hover {
  color: var(--template-ink);
}

.template-site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-site-nav__links,
.template-site-footer__nav,
.template-site-footer__documents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.template-site-nav__links a,
.template-site-footer__nav a,
.template-site-footer__documents a {
  /* Navigation is a link context, not secondary-button copy. Keeping those
   * contracts separate prevents a dark button palette from producing white
   * menu text on a light header or footer. */
  color: var(--template-link);
  font-weight: 560;
  text-decoration: none;
}

.template-site-nav__links a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
}

.template-site-nav__links a:hover,
.template-site-nav__links a:focus-visible {
  color: var(--template-ink);
  background: var(--template-surface-soft);
}

.template-menu-toggle {
  display: none;
  width: 44px;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  color: var(--template-ink);
  background: var(--template-surface-cool);
  cursor: pointer;
}

.template-menu-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.template-menu-toggle__icon {
  width: 20px;
  display: grid;
  gap: 4px;
}

.template-menu-toggle__icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform .16s ease, opacity .16s ease;
}

.template-site-header-shell.is-menu-open .template-menu-toggle__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.template-site-header-shell.is-menu-open .template-menu-toggle__icon span:nth-child(2) {
  opacity: 0;
}

.template-site-header-shell.is-menu-open .template-menu-toggle__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.template-button,
.template-lead-form-block .ncrm-form__submit {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  color: var(--template-ink);
  background: var(--template-surface-cool);
  font: inherit;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--template-button-highlight);
}

.template-button:hover,
.template-button:visited {
  color: var(--template-ink);
  background: var(--template-button-hover-bg);
}

.template-button:disabled,
.template-lead-form-block .ncrm-form__submit:disabled {
  cursor: not-allowed;
  opacity: .68;
}

.template-button--primary,
.template-button--primary:visited,
.template-lead-form-block .ncrm-form__submit {
  color: var(--template-on-primary);
  background: var(--template-primary);
  box-shadow: var(--template-primary-shadow);
}

.template-button--primary:hover,
.template-button--primary:focus-visible,
.template-lead-form-block .ncrm-form__submit:hover,
.template-lead-form-block .ncrm-form__submit:focus-visible {
  color: var(--template-on-primary);
  background: var(--template-primary-hover);
}

.template-button--secondary {
  color: var(--template-secondary);
  background: var(--template-secondary-soft);
}

.template-button--secondary:hover,
.template-button--secondary:visited {
  color: var(--template-primary-hover);
  background: var(--template-secondary-soft-hover);
}

.template-site-main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 64px;
  flex: 1 0 auto;
}

.template-hero {
  display: grid;
  gap: 14px;
  padding: clamp(28px, 5vw, 58px) 0 clamp(24px, 4vw, 42px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.template-hero h1,
.template-section-heading h1,
.template-section-heading h2 {
  margin: 0;
  max-width: 840px;
  color: var(--template-ink);
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 540;
}

.template-section-heading h1,
.template-section-heading h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.12;
}

.template-hero__lead {
  margin: 0;
  max-width: 740px;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.45;
}

.template-hero__meta,
.template-section-heading p,
.template-card p {
  color: var(--template-muted);
  line-height: 1.65;
}

.template-hero__meta {
  margin: 0;
  max-width: 720px;
}

.template-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.template-section {
  padding: 46px 0 0;
}

.template-section--narrow {
  max-width: 840px;
}

.template-section--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 36px;
  align-items: start;
}

.template-section-heading {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.template-section-heading p {
  margin: 0;
  max-width: 760px;
}

/* Norm CRM managed catalog-link styles: start */
.template-section-heading--with-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(12px, 2vw, 24px);
}

.template-section-heading--with-action h1,
.template-section-heading--with-action h2 {
  grid-column: 1;
}

.template-section-heading--with-action p {
  grid-column: 1 / -1;
}

.template-section-heading__action {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.template-section__action,
.ncrm-services-section__action {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.template-catalog-link {
  min-height: 42px;
  padding-inline: 16px;
  border: 1px solid var(--template-border);
  box-shadow: none;
}

.template-catalog-link::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform .18s ease;
}

.template-catalog-link:hover::after,
.template-catalog-link:focus-visible::after {
  transform: translateX(3px);
}

.template-section-heading__action .template-catalog-link,
.template-section-heading__action .template-catalog-link:visited {
  min-height: 0;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--template-link);
  background: transparent;
  box-shadow: none;
  font-size: .925rem;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

.template-section-heading__action .template-catalog-link:hover,
.template-section-heading__action .template-catalog-link:focus-visible {
  border: 0;
  color: var(--template-link-hover);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

.template-section-heading__action .template-catalog-link:hover .template-catalog-link__label,
.template-section-heading__action .template-catalog-link:focus-visible .template-catalog-link__label {
  text-decoration: underline;
  text-underline-offset: .18em;
}
/* Norm CRM managed catalog-link styles: end */

.template-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.template-card,
.template-lead-form-block {
  border-radius: 10px;
  background: var(--template-surface);
  box-shadow: var(--template-card-shadow, var(--template-shadow-sm));
}

.template-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 18px;
  border: 0;
}

/* Norm CRM managed specialist-surface styles: start */
/*
 * White list and form surfaces separate from the page through one cool shadow,
 * never through a one-pixel outline. The wider gap keeps repeated cards from
 * visually merging while secondary surfaces continue to distinguish tags.
 */
.template-card-grid {
  gap: 18px;
}

.template-card,
.template-lead-form-block {
  border: 0;
  background: var(--template-surface);
  box-shadow: var(--template-card-shadow, var(--template-shadow-sm));
}

/* Light card shadows become pale halos on dark surfaces. Keep list cards and
 * the shared contact/widget form surface shadowless in dark mode. */
[data-theme="dark"] .template-lead-form-block,
[data-theme="dark"] .template-card {
  box-shadow: none;
}
/* Norm CRM managed specialist-surface styles: end */

.template-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 520;
}

.template-card p {
  margin: 0;
}

.template-card h3 a,
.template-card__link,
.template-link-list a,
.template-contact-list a {
  color: var(--template-link);
  font-weight: 520;
}

.template-card__meta {
  color: var(--template-secondary);
  font-size: 13px;
  font-weight: 520;
}

.template-card__text {
  color: var(--template-muted);
  line-height: 1.65;
}

.template-card .template-card__annotation,
.template-card .template-card__annotation p {
  color: var(--template-ink);
  font-style: normal;
  font-weight: 400;
}

.template-card[hidden] {
  display: none;
}

.template-card > p:not(.template-card__meta):not(.template-tags),
.template-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Norm CRM managed postorama-cover styles: start */
.template-content-card__content,
.template-postorama-card__content {
  /* Services, portfolio works and blog publications share one card rhythm. */
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 12px;
  overflow-wrap: anywhere;
}

.template-content-card--with-cover,
.template-postorama-card--with-cover {
  grid-template-columns: minmax(150px, 23%) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 12px;
}

.template-content-card__media,
.template-postorama-card__media {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 118px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 8px;
  background: var(--template-surface-soft);
  aspect-ratio: 16 / 10;
}

.template-content-card__media img,
.template-postorama-card__media img,
.template-content-cover img,
.template-publication-cover img {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-content-card--with-cover .template-content-card__content,
.template-postorama-card--with-cover .template-postorama-card__content {
  align-content: center;
  padding: 4px 6px 4px 0;
}

.template-content-cover,
.template-publication-cover {
  width: 100%;
  max-height: 520px;
  margin: 0 0 28px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--template-surface-soft);
  aspect-ratio: 16 / 9;
}

@media (max-width: 620px) {
  .template-content-card--with-cover,
  .template-postorama-card--with-cover {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .template-content-card__media,
  .template-postorama-card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .template-content-card--with-cover .template-content-card__content,
  .template-postorama-card--with-cover .template-postorama-card__content {
    padding: 2px 6px 6px;
  }
}
/* Norm CRM managed postorama-cover styles: end */

/* Norm CRM managed card-matrix styles: start */
/* Compact publications, portfolio, reviews and the service card design share one
   matrix. The section owns the container so the same block also responds when
   it is mounted inside a narrow layout slot rather than the full page. */
:where(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget,
  .template-section--reviews-widget
) {
  container-type: inline-size;
  container-name: ncrm-card-matrix;
}

:is(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget,
  .template-section--reviews-widget
) > .template-card-grid {
  --ncrm-card-matrix-visible-gap: 18px;
  align-items: start;
  gap: var(--ncrm-card-matrix-visible-gap);
}

:where(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget,
  .template-section--reviews-widget
) > .template-card-grid > .template-card {
  min-width: 0;
  align-self: start;
}

/* Matrix cards preserve their available CRM text. Full catalogs and service
   lists deliberately keep their independent presentation contract. */
:where(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget,
  .template-section--reviews-widget
) :is(
  .template-card > p:not(.template-card__meta):not(.template-tags),
  .template-card__text
) {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

/* Presentation variables keep the three card types on one structural
   contract. One-card and two-card layouts switch these variables without
   creating an empty technical column when media or copy is missing. */
:is(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget
) > .template-card-grid > :is(
  .template-content-card--with-cover,
  .template-postorama-card--with-cover
) {
  grid-template-columns: var(--ncrm-matrix-cover-columns, 1fr);
  align-items: var(--ncrm-matrix-cover-align, start);
  gap: var(--ncrm-matrix-cover-gap, 12px);
}

:is(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget
) > .template-card-grid > :is(
  .template-content-card--with-cover,
  .template-postorama-card--with-cover
) :is(
  .template-content-card__media,
  .template-postorama-card__media
) {
  min-height: var(--ncrm-matrix-media-min-height, 0);
  aspect-ratio: var(--ncrm-matrix-media-ratio, 16 / 9);
}

:is(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget
) > .template-card-grid > :is(
  .template-content-card--with-cover,
  .template-postorama-card--with-cover
) :is(
  .template-content-card__content,
  .template-postorama-card__content
) {
  align-content: var(--ncrm-matrix-content-align, start);
  padding: var(--ncrm-matrix-content-padding, 2px 6px 6px);
}

:where(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget
) > .template-card-grid > .template-content-card.template-card--with-body:not(.template-content-card--with-cover) .template-content-card__content {
  grid-template-columns: var(--ncrm-matrix-body-columns, 1fr);
  column-gap: var(--ncrm-matrix-body-gap, 0);
}

:where(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget
) > .template-card-grid > .template-content-card.template-card--with-body:not(.template-content-card--with-cover) .template-content-card__content > h3 {
  grid-column: var(--ncrm-matrix-title-column, auto);
  grid-row: var(--ncrm-matrix-title-row, auto);
}

:where(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget
) > .template-card-grid > .template-content-card.template-card--with-body:not(.template-content-card--with-cover) .template-content-card__content > :is(.template-card__annotation, .template-card__text) {
  grid-column: var(--ncrm-matrix-copy-column, auto);
  grid-row: var(--ncrm-matrix-copy-row, auto);
}

:where(
  .template-section--publications-widget,
  .template-section--services-vertical-cards,
  .template-section--portfolio-widget
) > .template-card-grid > .template-content-card.template-card--with-body:not(.template-content-card--with-cover) .template-content-card__content > :is(.template-card__meta, .template-tags) {
  grid-column: var(--ncrm-matrix-meta-column, auto);
  grid-row: var(--ncrm-matrix-meta-row, auto);
}

:where(.template-section--reviews-widget) > .template-card-grid > .ncrm-review-card.template-card--with-body {
  grid-template-columns: var(--ncrm-matrix-review-columns, 1fr);
  column-gap: var(--ncrm-matrix-review-gap, 0);
}

:where(.template-section--reviews-widget) > .template-card-grid > .ncrm-review-card.template-card--with-body .ncrm-review-card__identity {
  grid-column: var(--ncrm-matrix-identity-column, auto);
  grid-row: var(--ncrm-matrix-identity-row, auto);
}

:where(.template-section--reviews-widget) > .template-card-grid > .ncrm-review-card.template-card--with-body .ncrm-review-card__rating {
  grid-column: var(--ncrm-matrix-rating-column, auto);
  grid-row: var(--ncrm-matrix-rating-row, auto);
}

:where(.template-section--reviews-widget) > .template-card-grid > .ncrm-review-card.template-card--with-body .ncrm-review-card__body {
  grid-column: var(--ncrm-matrix-review-copy-column, auto);
  grid-row: var(--ncrm-matrix-review-copy-row, auto);
  max-width: var(--ncrm-matrix-review-copy-width, none);
}

/* The natural grid is a safe fallback for editor canvases and blocked scripts.
   The runtime opts into measured rows only after every visible card has a span.
   DOM order remains untouched; dense packing only closes visual gaps. */
@container ncrm-card-matrix (min-width: 40rem) {
  :is(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  :is(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix][data-ncrm-card-matrix-ready] {
    grid-auto-rows: 1px;
    row-gap: 0;
  }

  :where(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix][data-ncrm-card-matrix-ready] > .template-card {
    grid-row-end: span var(--ncrm-card-row-span, 1);
  }

  :where(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix] > .template-card:not(:only-child) {
    grid-column: span 1;
    --ncrm-matrix-cover-columns: 1fr;
    --ncrm-matrix-cover-align: start;
    --ncrm-matrix-cover-gap: 12px;
    --ncrm-matrix-media-min-height: 0;
    --ncrm-matrix-media-ratio: 16 / 9;
    --ncrm-matrix-content-align: start;
    --ncrm-matrix-content-padding: 2px 6px 6px;
    --ncrm-matrix-body-columns: 1fr;
    --ncrm-matrix-body-gap: 0;
    --ncrm-matrix-title-column: auto;
    --ncrm-matrix-title-row: auto;
    --ncrm-matrix-copy-column: auto;
    --ncrm-matrix-copy-row: auto;
    --ncrm-matrix-meta-column: auto;
    --ncrm-matrix-meta-row: auto;
    --ncrm-matrix-review-columns: 1fr;
    --ncrm-matrix-review-gap: 0;
    --ncrm-matrix-identity-column: auto;
    --ncrm-matrix-identity-row: auto;
    --ncrm-matrix-rating-column: auto;
    --ncrm-matrix-rating-row: auto;
    --ncrm-matrix-review-copy-column: auto;
    --ncrm-matrix-review-copy-row: auto;
    --ncrm-matrix-review-copy-width: none;
  }

  :where(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix] > .template-card:only-child {
    grid-column: 1 / -1;
    --ncrm-matrix-cover-columns: minmax(150px, 23%) minmax(0, 1fr);
    --ncrm-matrix-cover-align: stretch;
    --ncrm-matrix-cover-gap: 16px;
    --ncrm-matrix-media-min-height: 118px;
    --ncrm-matrix-media-ratio: 16 / 10;
    --ncrm-matrix-content-align: center;
    --ncrm-matrix-content-padding: 4px 6px 4px 0;
    --ncrm-matrix-body-columns: minmax(9.5rem, .7fr) minmax(0, 1.3fr);
    --ncrm-matrix-body-gap: 16px;
    --ncrm-matrix-title-column: 1;
    --ncrm-matrix-title-row: 1;
    --ncrm-matrix-copy-column: 2;
    --ncrm-matrix-copy-row: 1 / span 2;
    --ncrm-matrix-meta-column: 1;
    --ncrm-matrix-meta-row: 2;
  }
}

@container ncrm-card-matrix (min-width: 56rem) {
  :is(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Keep this selector equally specific to the medium-width rule above. The
     later declaration must promote regular cards from one of six technical
     tracks to one of three visible columns. */
  :where(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix] > .template-card:not(:only-child) {
    grid-column: span 2;
  }

  :where(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix] > :is(
    .template-card:first-child:nth-last-child(2),
    .template-card:nth-child(2):last-child
  ) {
    grid-column: span 3;
    --ncrm-matrix-cover-columns: minmax(132px, 34%) minmax(0, 1fr);
    --ncrm-matrix-cover-align: stretch;
    --ncrm-matrix-cover-gap: 16px;
    --ncrm-matrix-media-min-height: 118px;
    --ncrm-matrix-media-ratio: 16 / 10;
    --ncrm-matrix-content-align: center;
    --ncrm-matrix-content-padding: 4px 6px 4px 0;
    --ncrm-matrix-body-columns: minmax(8.5rem, .8fr) minmax(0, 1.2fr);
    --ncrm-matrix-body-gap: 16px;
    --ncrm-matrix-title-column: 1;
    --ncrm-matrix-title-row: 1;
    --ncrm-matrix-copy-column: 2;
    --ncrm-matrix-copy-row: 1 / span 2;
    --ncrm-matrix-meta-column: 1;
    --ncrm-matrix-meta-row: 2;
    --ncrm-matrix-review-columns: minmax(10rem, .75fr) minmax(0, 1.25fr);
    --ncrm-matrix-review-gap: 20px;
    --ncrm-matrix-identity-column: 1;
    --ncrm-matrix-identity-row: 1;
    --ncrm-matrix-rating-column: 1;
    --ncrm-matrix-rating-row: 2;
    --ncrm-matrix-review-copy-column: 2;
    --ncrm-matrix-review-copy-row: 1 / span 2;
    --ncrm-matrix-review-copy-width: 65ch;
  }

  :where(
    .template-section--publications-widget,
    .template-section--services-vertical-cards,
    .template-section--portfolio-widget,
    .template-section--reviews-widget
  ) > .template-card-grid[data-ncrm-card-matrix] > .template-card:only-child {
    grid-column: 1 / -1;
  }
}

:where(.template-section--reviews-widget) .ncrm-review-card__body-shell {
  grid-column: var(--ncrm-matrix-review-copy-column, auto);
  grid-row: var(--ncrm-matrix-review-copy-row, auto);
  max-width: var(--ncrm-matrix-review-copy-width, none);
  min-width: 0;
}

.ncrm-review-card__body-shell {
  display: grid;
  gap: 10px;
}

.ncrm-review-card__read-more {
  width: fit-content;
  color: var(--template-link);
  font-weight: 600;
  text-decoration: none;
}

.ncrm-review-card__read-more:hover,
.ncrm-review-card__read-more:focus-visible {
  color: var(--template-link-hover);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ncrm-review-card__body--preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

/* Norm CRM managed card-matrix styles: end */

.template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-tags {
  margin: 0;
}

.template-post-tags {
  margin-top: 24px;
}

.template-tags span,
.template-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--template-tag-ink);
  background: var(--template-tag-bg);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}

.template-tags a:hover {
  color: var(--template-link-hover);
}

.template-publication-annotation {
  color: var(--template-ink) !important;
  font-size: clamp(18px, 2.2vw, 21px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55 !important;
}

/* Norm CRM managed entity-detail styles: start */
/* A page heading and the first text block share the standard prose rhythm. */
[data-ncrm-standalone-page-heading] + .ncrm-content-block {
  padding-top: 0;
}

/* Every CRM detail renderer uses this shell. The title keeps the regular
   section padding used by catalogs; the icon sits at the bottom of that
   reserved space, close to the title without participating in document flow. */
.template-site-main {
  display: flex;
  flex-direction: column;
}

.template-detail-page {
  font-size: clamp(1rem, .25vw + .95rem, 1.0625rem);
}

.ncrm-entity-detail > .template-detail-page:first-child {
  position: relative;
}

.template-detail-page__header > .template-back-link {
  position: absolute;
  inset: 14px auto auto 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--template-muted);
  background: transparent;
  box-shadow: none;
  line-height: 1;
  text-decoration: none;
}

.template-detail-page__header > .template-back-link:visited {
  color: var(--template-muted);
}

.template-detail-page__header > .template-back-link:hover,
.template-detail-page__header > .template-back-link:focus-visible {
  color: var(--template-ink);
  background: transparent;
}

.template-back-link__icon {
  width: 24px;
  height: 24px;
  display: block;
}

@media (max-width: 760px) {
  .template-detail-page__header > .template-back-link {
    inset: 4px auto auto 0;
  }
}

.ncrm-entity-detail__related,
.ncrm-entity-detail__reviews,
.ncrm-entity-detail__neighbors {
  margin-top: clamp(28px, 4vw, 40px);
}

.ncrm-entity-detail__neighbors {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 24px;
  padding-top: 0;
  border-top: 0;
}

/* The standalone pager spans the shared content container, just like compact
   CRM widgets; only the legacy pager remains constrained by the detail body. */
.ncrm-entity-navigation {
  width: 100%;
  max-width: none;
}

/* On short detail pages the pager consumes the remaining main-column space
   and settles immediately before the footer. Legacy embedded pagers follow
   the same behavior without rewriting their saved block tree. */
.template-site-main > .ncrm-entity-navigation:last-child {
  margin-top: auto;
}

.template-site-main > .ncrm-entity-detail:last-child:has(
  > .ncrm-entity-detail__neighbors:last-child
) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.template-site-main > .ncrm-entity-detail:last-child
  > .ncrm-entity-detail__neighbors:last-child {
  margin-top: auto;
}

.template-site-main:has(> .ncrm-entity-navigation:last-child),
.template-site-main:has(
  > .ncrm-entity-detail:last-child > .ncrm-entity-detail__neighbors:last-child
) {
  padding-bottom: 24px;
}

.ncrm-entity-navigation .ncrm-entity-detail__neighbors {
  margin-top: 0;
}

.ncrm-entity-detail__neighbor {
  display: grid;
  gap: 4px;
  min-width: min(100%, 220px);
  color: var(--template-link);
  text-decoration: none;
}

.ncrm-entity-detail__neighbor--next {
  margin-left: auto;
  text-align: right;
}

.ncrm-entity-detail__neighbor-direction {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--template-muted);
}

.ncrm-entity-detail__neighbor--next .ncrm-entity-detail__neighbor-direction {
  justify-content: flex-end;
}

.ncrm-entity-detail__neighbor-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.ncrm-entity-detail__neighbor strong {
  overflow-wrap: anywhere;
}
/* Norm CRM managed entity-detail styles: end */

.template-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.template-pagination a {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid var(--template-border);
  border-radius: 8px;
  color: var(--template-secondary);
  background: var(--template-surface);
  font-weight: 500;
  text-decoration: none;
}

.template-pagination a:hover,
.template-pagination a:focus-visible {
  color: var(--template-ink);
  background: var(--template-surface-soft);
}

.template-pagination a[aria-current="page"] {
  color: var(--template-pagination-active-ink);
  background: var(--template-primary);
  border-color: var(--template-primary);
}

.template-placeholder {
  margin: 0;
  padding: 18px;
  border-radius: 8px;
  color: var(--template-muted);
  background: var(--template-placeholder-bg);
  box-shadow: var(--template-shadow-sm);
}

.template-prose {
  max-width: 760px;
  color: var(--template-ink);
}

.template-prose p {
  color: var(--template-ink);
  line-height: 1.65;
}

/* Norm CRM managed rich-text styles: start */
/* Prose needs its own accents: neutral navigation colors blend into body text.
   Keep these tokens in the managed fragment so existing sites get them too. */
:root,
[data-theme="light"] {
  --template-prose-link: #1d4ed8;
  --template-prose-link-hover: #1e40af;
}

[data-theme="dark"] {
  --template-prose-link: #7db8ff;
  --template-prose-link-hover: #b3d6ff;
}

.template-prose a[href] {
  color: var(--template-prose-link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.template-prose a[href]:is(:hover, :focus-visible) {
  color: var(--template-prose-link-hover);
  text-decoration-line: underline;
}

/*
 * A section heading belongs to the content below it: keep noticeably more
 * space above than below in every long-form rich-text document.
 */
[data-ncrm-agreement-page] {
  font-size: clamp(1rem, .25vw + .95rem, 1.0625rem);
}

.template-prose h2,
.template-prose h3,
.template-prose h4 {
  margin: 2em 0 0.55em;
  line-height: 1.25;
}

.template-prose > :first-child {
  margin-top: 0;
}

/* Keep the list box flush with the copy, reserving a marker gutter so wrapped
   lines align with the item text. Nested lists retain their own indentation. */
:is(.template-detail-page, [data-ncrm-agreement-page])
  .template-prose > :is(ul, ol) {
  margin-inline-start: 0;
  padding-inline-start: 1.25em;
  list-style-position: outside;
}

:is(.template-detail-page, [data-ncrm-agreement-page])
  .template-prose > :is(ul, ol) :is(ul, ol) {
  padding-inline-start: 1.5em;
  list-style-position: outside;
}

/*
 * Quotes share one theme contract across publication prose and managed
 * content blocks, so the editor preview matches the public page.
 */
.template-prose blockquote,
.ncrm-content-block blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: 18px 20px 18px 48px;
  border: 1px solid var(--template-border);
  border-radius: 12px;
  color: var(--template-ink);
  background: var(--template-surface-soft);
  font-size: 1.05em;
  font-style: normal;
  line-height: 1.65;
}

.template-prose blockquote::before,
.ncrm-content-block blockquote::before {
  content: "“";
  position: absolute;
  top: 10px;
  left: 16px;
  color: var(--template-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.template-prose blockquote > :first-child,
.ncrm-content-block blockquote > :first-child {
  margin-top: 0;
}

.template-prose blockquote > :last-child,
.ncrm-content-block blockquote > :last-child {
  margin-bottom: 0;
}
/* Norm CRM managed rich-text styles: end */

.template-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--template-shadow-sm);
}

.template-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.template-lead-form-block {
  padding: 24px;
  background: var(--template-form-bg);
}

.template-lead-form-block .ncrm-form {
  display: grid;
  gap: 10px;
}

.template-lead-form-block .ncrm-form__field {
  display: grid;
  gap: 6px;
  color: var(--template-ink);
  font-weight: 520;
}

.template-lead-form-block .ncrm-form__control {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--template-ink);
  background: var(--template-surface-soft);
  box-shadow: var(--template-control-shadow);
}

.template-lead-form-block textarea.ncrm-form__control {
  min-height: 128px;
  resize: vertical;
}

.template-lead-form-block .ncrm-form__control:focus {
  background: var(--template-control-focus-bg);
}

.template-lead-form-block .ncrm-form__checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--template-ink);
  line-height: 1.5;
}

.template-lead-form-block .ncrm-form__agreement .ncrm-form__checkbox a {
  color: var(--template-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.template-lead-form-block .ncrm-form__checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--template-primary);
}

.template-lead-form-block .ncrm-form__required {
  color: var(--template-danger);
  font-weight: 700;
}

.template-lead-form-block .ncrm-form__field:has([aria-invalid="true"]),
.template-lead-form-block .ncrm-form__agreement:has([aria-invalid="true"]) {
  color: var(--template-danger);
}

.template-lead-form-block .ncrm-form__field [aria-invalid="true"] {
  color: var(--template-ink);
  background: var(--template-danger-soft);
  box-shadow: var(--template-danger-shadow);
}

.template-lead-form-block .ncrm-form__checkbox input[aria-invalid="true"] {
  outline: 2px solid var(--template-danger-outline);
  outline-offset: 2px;
}

.ncrm-form__agreements {
  display: grid;
  gap: 8px;
}

.ncrm-form__error,
.ncrm-form__status {
  margin: 0;
  min-height: 18px;
  font-size: 14px;
  line-height: 1.45;
}

.ncrm-form__error,
.ncrm-form__status[data-state="error"] {
  color: var(--template-danger);
}

.ncrm-form__status[data-state="success"] {
  color: var(--template-success);
}

.template-lead-form-block .ncrm-form__actions {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-top: 2px;
}

.ncrm-form-success-modal__button {
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  color: var(--template-on-primary);
  background: var(--template-primary);
  cursor: pointer;
}

.ncrm-form-success-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--template-modal-backdrop);
}

.ncrm-form-success-modal[hidden] {
  display: none;
}

.ncrm-form-success-modal__dialog {
  position: relative;
  width: min(520px, 100%);
  padding: 28px;
  border-radius: 14px;
  color: var(--template-ink);
  background: var(--template-surface);
}

.ncrm-form-success-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

/* Norm CRM managed contact-layout styles: start */
/* The canonical contacts page and its form use the same vertical section
   rhythm as the other page types. Compact contact widgets keep their card grid. */
.template-contact-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.template-contact-list li {
  color: var(--template-ink);
}

.ncrm-contacts-block--full {
  display: block;
  font-size: clamp(1rem, .25vw + .95rem, 1.0625rem);
}

.template-contact-list__item {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: 12px;
}

.template-contact-list__label,
.template-contact-list__value {
  color: var(--template-ink);
  font-size: inherit;
  font-weight: 400;
}

.template-contact-list__value {
  overflow-wrap: anywhere;
}

.template-contact-list__value a {
  color: inherit;
  font-weight: inherit;
}

.ncrm-form-block {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: 18px;
}

@media (max-width: 760px) {
  .template-contact-list__item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
/* Norm CRM managed contact-layout styles: end */

.template-site-footer {
  padding: 22px 0 26px;
  color: var(--template-muted);
  background: var(--template-surface-soft);
}

.template-site-footer p {
  margin: 0;
}

.template-site-footer__inner {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
  gap: 18px 32px;
  align-items: start;
  justify-content: space-between;
}

.template-site-footer__primary,
.template-site-footer__links {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.template-site-footer__brand {
  min-width: 0;
  color: var(--template-ink);
  font-weight: 520;
  overflow-wrap: anywhere;
}

.template-site-footer__brand .template-theme-toggle {
  margin-inline-start: 8px;
  vertical-align: middle;
}

.template-site-footer__freeform {
  max-width: 60ch;
  color: var(--template-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.template-theme-toggle {
  appearance: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--template-muted);
  background: transparent;
  cursor: pointer;
  box-shadow: none;
}

.template-theme-toggle:hover,
.template-theme-toggle:focus-visible {
  color: var(--template-ink);
  background: transparent;
}

/* Norm CRM managed theme-preference styles: start */
.template-theme-toggle .template-theme-toggle__icon {
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

[data-theme-preference="light"] .template-theme-toggle .template-theme-toggle__icon--sun,
[data-theme-preference="dark"] .template-theme-toggle .template-theme-toggle__icon--moon,
[data-theme-preference="system"] .template-theme-toggle .template-theme-toggle__icon--system,
[data-theme="light"]:not([data-theme-preference]) .template-theme-toggle .template-theme-toggle__icon--sun,
[data-theme="dark"]:not([data-theme-preference]) .template-theme-toggle .template-theme-toggle__icon--moon {
  display: inline-flex;
}
/* Norm CRM managed theme-preference styles: end */

.template-theme-toggle__svg {
  width: 16px;
  height: 16px;
}

.template-site-footer__nav,
.template-site-footer__documents {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.template-site-footer__documents {
  color: var(--template-muted);
  font-size: 0.92em;
}

.template-site-footer__nav a:hover,
.template-site-footer__documents a:hover {
  color: var(--template-link-hover);
}

.template-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding-inline: 16px;
  background: var(--template-modal-backdrop);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.template-modal-backdrop[hidden] { display: none; }

.template-modal {
  position: relative;
  width: min(620px, 100%);
  padding: clamp(22px, 4vw, 34px);
  border-radius: 14px;
  overflow: visible;
  background: var(--template-modal-bg);
  box-shadow: var(--template-shadow-lg);
  backdrop-filter: blur(22px) saturate(122%);
  -webkit-backdrop-filter: blur(22px) saturate(122%);
}

/* Norm CRM managed modal-layout styles: start */
.template-modal-backdrop {
  padding-block: 24px;
}

/* Auto margins center a short dialog and collapse for a tall one, keeping its
 * top and close button reachable while the backdrop scrolls. */
.template-modal-backdrop > .template-modal {
  margin-block: auto;
}

@media (max-width: 760px) {
  .template-modal-backdrop {
    padding-block: 12px;
  }
}
/* Norm CRM managed modal-layout styles: end */

.template-modal__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.template-modal-title {
  margin: 0;
  color: var(--template-ink);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 560;
}

.template-modal-close {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  color: var(--template-ink);
  background: var(--template-surface-cool);
  cursor: pointer;
}

.template-modal-close span::before,
.template-modal-close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.template-modal-close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.template-modal-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.template-modal__body {
  display: grid;
  gap: 18px;
}

.template-modal .template-lead-form-block {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Dark surfaces are separated by borders and backdrop contrast. Light-toned
 * elevation shadows create a dirty halo there, so both form modal variants
 * remain deliberately flat in the dark theme, including the editor preview. */
:is(html, body[data-public-site-theme-preview-root])[data-theme="dark"] .template-modal,
:is(html, body[data-public-site-theme-preview-root])[data-theme="dark"] .ncrm-form-success-modal__dialog {
  box-shadow: none;
}

.template-form-success__dialog {
  width: min(520px, 100%);
}

.template-form-success__message {
  margin: 0;
  color: var(--template-muted);
  font-size: 16px;
  line-height: 1.6;
}

.template-form-success__actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .template-site-header-shell {
    padding: 0;
  }

  .template-site-main,
  .template-site-footer__inner {
    width: min(100% - 20px, 1120px);
  }

  .template-site-footer__inner {
    grid-template-columns: 1fr;
  }

  .template-site-footer__nav,
  .template-site-footer__documents {
    justify-content: flex-start;
  }

  .template-site-header {
    min-height: 58px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 10px;
    background: var(--template-header-solid-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .template-site-header-shell.is-scrolled .template-site-header {
    background: var(--template-header-solid-bg);
  }

  .template-js-ready .template-site-header {
    flex-wrap: nowrap;
  }

  .template-site-brand {
    max-width: calc(100% - 58px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .template-site-brand__image {
    max-width: 100%;
  }

  .template-site-brand__content {
    gap: 8px;
  }

  .template-site-brand__mark {
    max-width: min(52vw, 180px);
  }

  .template-site-brand__annotation {
    max-width: min(34vw, 160px);
  }

  .template-site-nav {
    width: 100%;
    margin-left: 0;
  }

  .template-js-ready .template-menu-toggle {
    display: inline-flex;
  }

  .template-js-ready .template-site-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    display: none;
    margin-left: 0;
    padding: 10px;
    border-radius: 0;
    background: var(--template-header-solid-bg);
    box-shadow: var(--template-shadow-md);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .template-js-ready .template-site-header-shell.is-menu-open .template-site-nav {
    display: grid;
    gap: 8px;
  }

  .template-js-ready .template-site-nav__links {
    display: grid;
    gap: 4px;
  }

  .template-js-ready .template-site-nav a {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    padding: 9px 10px;
  }

  .template-js-ready .template-site-nav__cta {
    width: 100%;
    margin-top: 4px;
  }

  .template-site-main {
    padding-top: 18px;
    padding-bottom: 50px;
  }

  .template-hero {
    padding: 28px 0;
  }

  .template-hero__actions,
  .template-lead-form-block .ncrm-form__actions {
    align-items: stretch;
  }

  .template-hero__actions .template-button,
  .template-lead-form-block .ncrm-form__submit {
    width: 100%;
  }

  .template-section {
    padding-top: 36px;
  }

  .template-section--split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .template-card-grid {
    grid-template-columns: 1fr;
  }

  .template-card,
  .template-lead-form-block {
    padding: 18px;
  }

  .template-modal-backdrop {
    padding-inline: 12px;
  }

  .template-modal {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .template-menu-toggle__icon span {
    transition: none;
  }

  .template-catalog-link::after {
    transition: none;
  }
}
/* Norm CRM managed header theme controls: start */
/* Shared by marketing shells in both languages. Private CRM theme controls
   continue to use their own styles and the same NormTheme preference. */
.marketing-header--theme-cord .marketing-header__actions {
  align-self: stretch;
  /* Match the desktop action spacing at every viewport width. */
  gap: 12px;
}

.marketing-theme-cord {
  position: relative;
  align-self: stretch;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0 0 12px 12px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.marketing-theme-cord:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The hinge touches the upper edge of the header. Only its children stretch,
   so pulling the handle never detaches the cord from the ceiling. */
.marketing-theme-cord__pendulum {
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  width: 20px;
  height: calc(50% + 10px);
  pointer-events: none;
}

.marketing-theme-cord__strand {
  position: absolute;
  top: 0;
  left: 9px;
  width: 2px;
  height: calc(100% - 8px);
  /* Stop at the ring's edge, including during the pull animation. */
  clip-path: inset(0 0 4px);
  border-radius: 0 0 1px 1px;
  background: currentColor;
}

.marketing-theme-cord__handle {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.marketing-theme-cord:hover,
.marketing-theme-cord:focus-visible {
  color: var(--color-primary);
}

/* The mobile control is shared with exported site headers. Host styles only
   map its color tokens and choose the breakpoint at which it becomes visible. */
.marketing-icon-button[data-marketing-theme-icon] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--theme-cord-icon-color, var(--marketing-mobile-icon-color, var(--color-text-strong)));
  cursor: pointer;
  touch-action: manipulation;
}
.marketing-icon-button[data-marketing-theme-icon]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.marketing-icon-button[data-marketing-theme-icon] .theme-toggle__icon {
  position: absolute;
  display: inline-flex;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.marketing-icon-button[data-marketing-theme-icon] .theme-toggle__icon--sun {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 4px));
}
[data-theme="dark"] .marketing-icon-button[data-marketing-theme-icon] .theme-toggle__icon--moon {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 4px));
}
[data-theme="dark"] .marketing-icon-button[data-marketing-theme-icon] .theme-toggle__icon--sun {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* The mobile icon is a sibling of the hamburger, outside its popup. */
@media (max-width: 980px) {
  .marketing-theme-cord { display: none; }

  .marketing-header--theme-cord .marketing-header-mobile-nav {
    --marketing-mobile-icon-color: #000;
    gap: 6px;
    align-items: center;
  }

  [data-theme="dark"] .marketing-header--theme-cord .marketing-header-mobile-nav {
    --marketing-mobile-icon-color: var(--color-text-strong);
  }

  /* Both header icons share a neutral color, including hover and focus. */
  .marketing-header--theme-cord .marketing-header-mobile-nav > .marketing-icon-button {
    color: var(--marketing-mobile-icon-color);
  }

  .marketing-header--theme-cord .marketing-header-mobile-nav > .marketing-theme-toggle {
    margin-right: 0;
    flex-shrink: 0;
  }

  /* Give the language row the same text inset and weight as the anchor rows,
     with no extra padding from the former two-control settings container. */
  .marketing-header--theme-cord .marketing-header__settings--mobile {
    margin-top: 0;
    padding: 0;
  }

  .marketing-header--theme-cord .marketing-header__settings--mobile .marketing-header-lang-form,
  .marketing-header--theme-cord .marketing-header__settings--mobile .marketing-header-lang {
    width: 100%;
  }

  .marketing-header--theme-cord .marketing-header__settings--mobile .marketing-language-button {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: 10px 11px;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: inherit;
  }
}

/* Reserve space for both mobile icons at 320px, preserving the 12px gap
   between Demo and Log in and the full brand name. */
@media (max-width: 430px) {
  .marketing-header--theme-cord .marketing-header__inner { gap: 6px; }
  .marketing-header--theme-cord .marketing-header__action { padding-inline: 6px; }
}

/* Capture fully resolved theme colors; existing component transitions must not
   leave the new snapshot half recolored. No duplicate page DOM is created. */
html.marketing-theme-reveal *,
html.marketing-theme-reveal *::before,
html.marketing-theme-reveal *::after {
  transition: none !important;
}

html.marketing-theme-reveal::view-transition-group(root) {
  animation: none;
}

html.marketing-theme-reveal::view-transition-image-pair(root) {
  isolation: isolate;
}

html.marketing-theme-reveal::view-transition-old(root),
html.marketing-theme-reveal::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: none;
}

html.marketing-theme-reveal::view-transition-old(root) { z-index: 1; }

html.marketing-theme-reveal::view-transition-new(root) {
  z-index: 2;
  /* Constant radial speed also keeps the edge moving on tall mobile screens. */
  animation: marketing-theme-reveal 680ms linear both;
}

@keyframes marketing-theme-reveal {
  from { clip-path: circle(0px at var(--theme-cord-x) var(--theme-cord-y)); }
  to { clip-path: circle(var(--theme-cord-radius) at var(--theme-cord-x) var(--theme-cord-y)); }
}

@media (prefers-reduced-motion: reduce) {
  html.marketing-theme-reveal::view-transition-new(root) {
    animation: none;
  }
}


/* Only theme tokens belong here. public_site_header.css owns positioning;
   the cord appearance and reveal remain shared with marketing. */
.template-header-theme-control {
  --color-text-muted: var(--template-muted);
  --color-primary: var(--template-primary);
  --color-focus: var(--template-primary);
  --theme-cord-icon-color: var(--template-ink);
  display: none;
  flex-shrink: 0;
}

/* Norm CRM managed header theme controls: end */
/* Norm CRM managed responsive header: start */
/* This layout is shared by the exported site and isolated editor bodies. */
[data-template-header].template-site-header-shell {
  width: 100%;
  max-width: none;
  padding: 0;
}
[data-template-header] .template-site-header {
  --template-header-mobile: 0;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 24px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 64px;
  overflow: visible;
}
[data-template-header].template-site-header-shell > .template-site-header {
  width: 100%;
  margin: 0;
  /* One content boundary for public pages and previews. Percent padding uses
     the containing block, unlike the viewport padding in older design assets.
     The component selector also takes precedence over those saved assets. */
  padding-block: 0;
  padding-inline: max(16px, calc((100% - var(--ncrm-design-content-width, 1120px)) / 2));
}
[data-template-header] .template-site-brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 35%;
  min-width: 0;
  padding-block: 12px;
}
[data-template-header] .template-site-header .template-site-nav {
  --template-header-navigation-align: flex-end;
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  margin-left: auto;
}
[data-template-header] .template-site-nav .template-site-nav__links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: var(--template-header-navigation-align);
  justify-self: stretch;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
}
[data-template-header-ready] .template-site-nav .template-site-nav__links { overflow: visible; }
[data-template-header] .template-site-nav[data-template-nav-centered] {
  --template-header-navigation-align: center;
}
[data-template-header] .template-nav-primary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 24px;
  min-width: 0;
  overflow: visible;
}
[data-template-header] .template-site-nav a {
  flex-shrink: 0;
  white-space: nowrap;
}
[data-template-header] .template-site-nav .template-site-nav__cta {
  align-self: center;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin: 0;
}
[data-template-header] .template-header-theme-control--desktop { align-self: stretch; }
[data-template-header] .template-header-theme-control--desktop .marketing-theme-cord { display: block; }
[data-template-header] .template-menu-toggle,
[data-template-header] .template-nav-overflow__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 32px;
  width: 32px;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--template-ink);
  cursor: pointer;
}
[data-template-header] .template-menu-toggle { display: none; }
[data-template-header] .template-menu-toggle__label { display: none; }
[data-template-header] .template-menu-toggle:focus-visible,
[data-template-header] .template-nav-overflow__toggle:focus-visible {
  outline: 2px solid var(--template-focus);
  outline-offset: 2px;
}
[data-template-header] .ui-icon__menu-top { transform-origin: 12px 8px; }
[data-template-header] .ui-icon__menu-bottom { transform-origin: 12px 16px; }
[data-template-header] .ui-icon__menu-top,
[data-template-header] .ui-icon__menu-bottom { transition: transform 180ms ease; }
[data-template-header] [aria-expanded="true"] .ui-icon__menu-top { transform: translateY(4px) rotate(45deg); }
[data-template-header] [aria-expanded="true"] .ui-icon__menu-bottom { transform: translateY(-4px) rotate(-45deg); }
[data-template-header] .template-nav-overflow { position: relative; flex: 0 0 auto; }
[data-template-header] [hidden] { display: none !important; }

/* Both menus retain the site's own type, surface and focus tokens. */
[data-template-header] .template-nav-overflow__menu,
[data-template-header] .template-site-nav[data-header-mobile-menu] {
  position: absolute;
  inset: auto 0 auto auto;
  top: 100%;
  box-sizing: border-box;
  width: 260px;
  max-width: calc(100vw - 24px);
  max-height: min(420px, 70vh);
  margin: 8px 0 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--template-border);
  border-radius: 12px;
  background: var(--template-surface);
  box-shadow: var(--template-shadow-md);
  color: var(--template-ink);
  z-index: 20;
}
[data-template-header] .template-site-header [data-header-popup-open] {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
[data-template-header] [data-header-floating] {
  position: fixed !important;
  inset: var(--header-popup-top) auto auto var(--header-popup-left) !important;
  width: var(--header-popup-width) !important;
  max-width: var(--header-popup-width) !important;
  max-height: var(--header-popup-height) !important;
  margin: 0 !important;
}
[data-template-header] .template-nav-overflow__menu a,
[data-template-header] [data-header-mobile-menu] a {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 4px 0;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--template-link);
  text-decoration: none;
}
[data-template-header] .template-nav-overflow__menu a:hover,
[data-template-header] .template-nav-overflow__menu a:focus-visible { text-decoration: underline; }
[data-template-header] [data-header-mobile-menu] .template-site-nav__cta {
  align-self: flex-start;
  padding: 10px 14px;
  color: var(--template-on-primary);
}
/* Explicit desktop rules also win when width media queries are mirrored as
   container queries by the editor after the saved theme's legacy rules. */
@media (min-width: 761px) {
  [data-template-header] .template-site-header { --template-header-mobile: 0; }
  [data-template-header] .template-site-header .template-site-nav { display: flex; align-items: stretch; }
  [data-template-header] .template-header-theme-control--desktop { display: flex; margin-block: 0; }
  [data-template-header] .template-header-theme-control--mobile { display: none; }
}
@media (max-width: 760px) {
  [data-template-header] .template-header-theme-control--desktop { display: none; }
  [data-template-header] .template-site-header { --template-header-mobile: 1; gap: 12px; min-height: 62px; }
  [data-template-header] .template-site-brand { flex: 1 1 auto; max-width: none; }
  [data-template-header-ready] .template-menu-toggle { display: inline-flex; }
  [data-template-header] .template-header-theme-control--mobile { display: flex; align-self: center; }
  [data-template-header] [data-header-mobile-menu] .template-site-nav__links,
  [data-template-header] [data-header-mobile-menu] .template-nav-primary {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-template-header] .ui-icon__menu-top,
  [data-template-header] .ui-icon__menu-bottom { transition: none; }
}
/* Norm CRM managed responsive header: end */


/*
 * Theme 1.1 owns image presentation. The typed block payload stays neutral,
 * so later theme versions can reinterpret the same default/wide/full_bleed modes.
 */
.ncrm-image-block {
  --ncrm-image-width: min(100%, 760px);
  width: var(--ncrm-image-width);
  margin: clamp(28px, 5vw, 64px) auto;
}

.ncrm-image-block--wide {
  --ncrm-image-width: min(100%, 1080px);
}

.ncrm-image-block--full_bleed {
  --ncrm-image-width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ncrm-image-block__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 16px;
  box-shadow: var(--template-shadow);
}

.ncrm-image-block--full_bleed .ncrm-image-block__image {
  border-radius: 0;
}

.ncrm-image-block__caption {
  max-width: min(100% - 32px, 760px);
  margin: 12px auto 0;
  color: var(--template-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 720px) {
  .ncrm-image-block {
    margin-top: 24px;
    margin-bottom: 32px;
  }

  .ncrm-image-block:not(.ncrm-image-block--full_bleed) .ncrm-image-block__image {
    border-radius: 10px;
  }
}

/*
 * Theme 1.2 owns responsive layout. Structural slot names stay stable while
 * later themes may reinterpret widths, gaps and breakpoints.
 */
.ncrm-layout-block {
  --ncrm-layout-gap: clamp(18px, 3vw, 32px);
  display: grid;
  gap: var(--ncrm-layout-gap);
  width: 100%;
  min-width: 0;
}

.ncrm-layout-block--spacing-compact {
  --ncrm-layout-gap: clamp(10px, 2vw, 18px);
}

.ncrm-layout-block--spacing-relaxed {
  --ncrm-layout-gap: clamp(28px, 5vw, 56px);
}

.ncrm-layout-block--stack > .ncrm-layout-block__slot,
.ncrm-layout-block--grid > .ncrm-layout-block__slot {
  display: grid;
  gap: var(--ncrm-layout-gap);
  min-width: 0;
}

.ncrm-layout-block--grid > .ncrm-layout-block__slot {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.ncrm-layout-block--split_equal {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ncrm-layout-block--split_primary_wide {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.ncrm-layout-block--split_secondary_wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.ncrm-layout-block__slot {
  min-width: 0;
}

@media (max-width: 720px) {
  .ncrm-layout-block--split_equal,
  .ncrm-layout-block--split_primary_wide,
  .ncrm-layout-block--split_secondary_wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Norm CRM immutable hero@1 presentation layer for theme 1.4. */
.ncrm-hero-block {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2rem, 7vw, 6rem);
}

.ncrm-hero-block--media-left .ncrm-hero-block__content { order: 2; }
.ncrm-hero-block--media-left .ncrm-hero-block__media { order: 1; }

.ncrm-hero-block--text-only {
  display: block;
  max-width: 58rem;
}

.ncrm-hero-block__headline {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.5rem, 6vw, 5.75rem);
  line-height: .98;
  overflow-wrap: anywhere;
}

.ncrm-hero-block__annotation {
  max-width: 48rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.55;
}

.ncrm-hero-block__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: 1.25rem;
  color: var(--ncrm-muted, currentColor);
}

.ncrm-hero-block__metadata > * + *::before {
  content: "·";
  margin-right: 1rem;
  opacity: .55;
}

.ncrm-hero-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.ncrm-hero-block__media {
  min-width: 0;
}

.ncrm-hero-block__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ncrm-radius-lg, 1.25rem);
}

@media (max-width: 760px) {
  .ncrm-hero-block {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncrm-hero-block--media-left .ncrm-hero-block__content,
  .ncrm-hero-block--media-left .ncrm-hero-block__media {
    order: initial;
  }

  .ncrm-hero-block__content { order: 1; }
  .ncrm-hero-block__media { order: 2; }
}
/* Norm CRM managed hero theme photos: start */
/* The site theme switcher sets data-theme for explicit and system preferences. */
.ncrm-hero-block > .ncrm-hero-block__media--dark,
[data-theme="dark"] .ncrm-hero-block > .ncrm-hero-block__media--light {
  display: none;
}
[data-theme="dark"] .ncrm-hero-block > .ncrm-hero-block__media--dark {
  display: block;
}
/* Norm CRM managed hero theme photos: end */

/* Norm CRM managed FAQ styles: start */
.ncrm-faq { min-width: 0; overflow-wrap: anywhere; color: var(--template-ink); }
.ncrm-faq__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 0; }
/* Use the shared card surface and shadow for the whole question/answer pair. */
.ncrm-faq__item { min-width: 0; overflow: hidden; border-radius: 8px; background: var(--template-surface); box-shadow: var(--template-card-shadow, var(--template-shadow-sm)); }
/* Tint the open card beneath its opaque question: full-width answer surface,
 * while the shared prose keeps its readable line width. */
.ncrm-faq__item[open] { background: color-mix(in srgb, var(--template-surface) 40%, var(--template-surface-soft)); }
/* Reset older FAQ-specific typography as well when this CSS overlays a saved theme. */
.ncrm-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; cursor: pointer; list-style: none; font: inherit; }
.ncrm-faq__question { min-width: 0; }
.ncrm-faq__item summary::-webkit-details-marker { display: none; }
.ncrm-faq__item summary::marker { content: ""; }
/* Override the persistent open-state tint in previously saved FAQ styles. */
.ncrm-faq__item[open] summary { background: var(--template-surface); }
.ncrm-faq__item summary:hover, .ncrm-faq__item summary:focus-visible { background: color-mix(in srgb, var(--template-ink) 5%, var(--template-surface)); }
.ncrm-faq__item summary:focus-visible { outline: 2px solid var(--template-primary); outline-offset: -3px; }
.ncrm-faq__chevron { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--template-surface); color: var(--template-primary); transition: transform .18s ease, background-color .18s ease; }
.ncrm-faq__chevron svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ncrm-faq__chevron::after { content: none; }
.ncrm-faq__item[open] .ncrm-faq__chevron { transform: rotate(180deg); }
.ncrm-faq__answer { padding: 16px 20px 18px; font: inherit; }
.ncrm-faq__answer > :first-child { margin-top: 0; }
.ncrm-faq__answer > :last-child { margin-bottom: 0; }
.ncrm-faq__answer img { max-width: 100%; height: auto; }
.ncrm-faq__answer figure { margin: 0; }
.ncrm-faq__answer table { max-width: 100%; }
/* Keep dark FAQ surfaces flat, including when overlaying saved theme styles. */
[data-theme="dark"] .ncrm-faq__item,
[data-theme="dark"] .ncrm-faq__item summary,
[data-theme="dark"] .ncrm-faq__answer { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .ncrm-faq__chevron { transition: none; } }
/* Norm CRM managed FAQ styles: end */


/* Norm CRM managed specialist-header styles: start */
/*
 * Theme 1.5 keeps the shared header markup, while this managed layer owns its
 * current visual rhythm. Preview/publish can therefore refresh existing 1.5
 * sites without replacing unrelated owner-authored CSS or changing versions.
 * The marker also owns shell-wide interaction and footer typography so these
 * cross-page rules are upgraded atomically with the header.
 */
:root {
  --template-header-height: 72px;
  --template-shell-text-weight: 400;
}

.template-site-nav__links a,
.template-button--cta {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--template-shell-text-weight);
}

/* Catalog links stay in the immutable page snapshot so a managed content
 * release can reactivate them. Author-level display rules must still respect
 * the content-derived hidden state. */
.template-site-nav__links a[hidden],
.template-site-footer__nav a[hidden],
.template-site-footer__documents a[hidden] {
  display: none !important;
}

/* Navigation and action links share one container but not one color role.
 * Explicit shell selectors also repair this contract in already-created sites
 * when their managed style fragment is refreshed. */
.template-site-nav__links a,
.template-site-footer__nav a,
.template-site-footer__documents a {
  color: var(--template-link);
}

.template-button--cta,
.template-button--cta:visited {
  color: var(--template-on-primary);
  background: var(--template-primary);
}

/* Match the primary Norm CRM header: hover gets a restrained underline, while
 * the server-authored current section keeps a stronger two-pixel marker. */
.template-site-nav__links a:hover,
.template-site-nav__links a:focus-visible {
  color: var(--template-link-hover);
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--template-link) 52%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}

.template-site-nav__links a[aria-current="page"],
.template-site-nav__links a[aria-current="page"]:hover,
.template-site-nav__links a[aria-current="page"]:focus-visible {
  color: var(--template-ink);
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--template-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

.template-site-footer__brand {
  color: var(--template-ink);
}

/* The native sticky shell remains in document flow. Before scrolling, the
 * full-width shell and bar use the page background without a glass seam. */
.template-site-header-shell:not(.is-scrolled),
.template-site-header-shell:not(.is-scrolled) .template-site-header {
  background: var(--template-bg);
}

.template-site-header-shell:not(.is-scrolled) .template-site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Keep the in-flow header flat, then add a restrained depth cue only while the
 * sticky shell is moving over page content. */
.template-site-header {
  box-shadow: none;
}

.template-site-header-shell.is-scrolled .template-site-header {
  box-shadow: var(--template-shadow-sm);
}

/* Dark themes use border and backdrop contrast instead of a light shadow halo
 * below the sticky bar. The preview body mirrors the published html root. */
:is(html, body[data-public-site-theme-preview-root])[data-theme="dark"]
  .template-site-header-shell.is-scrolled .template-site-header {
  box-shadow: none;
}

/* Brightness and saturation are increased from the actual resting CTA color.
 * Unlike mixing with white, this keeps the scheme's hue and never turns the
 * button into a washed-out, visually duller version of itself. */
.template-button--cta,
.template-lead-form-block .ncrm-form__submit {
  filter: none;
  transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.template-button--cta:hover,
.template-button--cta:focus-visible,
.template-lead-form-block .ncrm-form__submit:hover,
.template-lead-form-block .ncrm-form__submit:focus-visible {
  color: var(--template-on-primary);
  background: var(--template-primary);
  filter: brightness(1.22) saturate(1.14);
}

/* Footer copy and navigation follow the same regular shell typography as the
 * header navigation; local legacy weights must not make the footer look bold. */
.template-site-footer,
.template-site-footer .template-site-footer__brand,
.template-site-footer .template-site-footer__freeform,
.template-site-footer .template-site-footer__nav a,
.template-site-footer .template-site-footer__documents a {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--template-shell-text-weight);
}

.template-site-footer .template-site-footer__documents {
  font-size: inherit;
}

/* Long agreement labels must wrap inside the links column instead of taking
 * its max-content width and collapsing copyright to a few characters. */
.template-site-footer__inner {
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
}

/* Keep the footer distinguishable from the page without turning it into a
 * separate gray panel. The semantic mix follows every saved color scheme and
 * remains noticeably softer than the secondary surface used by controls. */
.template-site-footer {
  background: var(--template-surface-soft);
  background: color-mix(in srgb, var(--template-bg) 64%, var(--template-surface-soft));
}

.template-site-brand__content--below-logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Header geometry and navigation alignment are owned by public_site_header.css
 * for every theme version, including the editor's container-based previews. */

@media (max-width: 760px) {
  :root {
    --template-header-height: 68px;
  }

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

}
/* Norm CRM managed specialist-header styles: end */

/* Actively maintained hero refinements for the "Сайт специалиста" 1.5 theme. */
.ncrm-hero-block__headline {
  max-width: 20ch;
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.ncrm-hero-block--text-only {
  width: 100%;
  max-width: none;
}

.ncrm-hero-block--text-only .ncrm-hero-block__content {
  width: 100%;
  max-width: none;
}

.ncrm-hero-block--text-only .ncrm-hero-block__headline {
  max-width: 28ch;
}

/* Without a portrait, the information panel defines the visible block width. */
.ncrm-hero-block--text-only .ncrm-hero-block__metadata {
  box-sizing: border-box;
  width: 100%;
}

/* Keep the portrait on the narrow track regardless of which side it uses. */
.ncrm-hero-block--media-left {
  grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr);
}

.ncrm-hero-block__photo--placeholder {
  background: var(--template-surface-cool);
}

.ncrm-hero-block__metadata {
  display: grid;
  gap: .875rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  color: var(--template-muted);
  border: 1px solid var(--template-border);
  border-radius: var(--ncrm-design-card-radius, 1rem);
  background: var(--template-surface-soft);
  box-shadow: var(--template-shadow-sm);
}

.ncrm-hero-block__metadata > * + *::before {
  content: none;
  margin: 0;
}

.ncrm-hero-block__profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
}

.ncrm-hero-block__profile > * + * {
  padding-left: .75rem;
  border-left: 1px solid var(--template-border);
}

.ncrm-hero-block__name {
  color: var(--template-ink);
  font-weight: 650;
}

.ncrm-hero-block__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}

.ncrm-hero-block__contact,
.ncrm-hero-block__contact:visited {
  display: inline-flex;
  min-width: 0;
  min-height: 2.5rem;
  align-items: center;
  gap: .55rem;
  padding: .45rem .75rem .45rem .5rem;
  color: var(--template-link);
  border: 1px solid var(--template-border);
  border-radius: var(--ncrm-design-button-radius, .75rem);
  background: var(--template-surface);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.ncrm-hero-block__contact:hover {
  color: var(--template-link-hover);
  border-color: currentColor;
  background: var(--template-surface-cool);
}

.ncrm-hero-block__contact:focus-visible {
  outline: 3px solid var(--template-focus);
  outline-offset: 2px;
}

.ncrm-hero-block__contact-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  color: var(--template-ink);
  border-radius: 50%;
  background: var(--template-surface-cool);
}

.ncrm-hero-block__contact-icon .ui-icon {
  display: block;
}

@media (max-width: 760px) {
  .ncrm-hero-block--media-left {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .ncrm-hero-block__metadata {
    width: 100%;
    padding: .875rem;
  }

  .ncrm-hero-block__profile {
    display: grid;
    gap: .25rem;
  }

  .ncrm-hero-block__profile > * + * {
    padding-left: 0;
    border-left: 0;
  }

  .ncrm-hero-block__contacts {
    display: grid;
  }

  .ncrm-hero-block__contact {
    width: 100%;
  }
}

/* Norm CRM managed specialist-hero styles: start */
/*
 * The specialist and interface-designer themes share this final hero rhythm.
 * Scoped selectors keep later visual layers free to change palette tokens,
 * while typography and action geometry stay consistent across templates.
 */
.ncrm-hero-block {
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.ncrm-hero-block .ncrm-hero-block__headline,
.ncrm-hero-block.ncrm-hero-block--text-only .ncrm-hero-block__headline {
  font-size: clamp(1.8rem, 3.4vw, 3.125rem);
  font-weight: 520;
  line-height: 1.16;
  letter-spacing: -.02em;
}

/* A slightly shorter portrait keeps the offer dominant without changing the
 * stored 4:5 source crop or its reusable asset contract. */
.ncrm-hero-block .ncrm-hero-block__photo {
  aspect-ratio: 6 / 7;
}

@media (max-width: 760px) {
  .ncrm-hero-block > .ncrm-hero-block__media {
    /* Keep the narrow desktop portrait size instead of filling the stacked
     * track. Both photo themes and both desktop sides use the same slot. */
    width: min(100%, 17rem);
    justify-self: start;
    order: -1;
  }
}

.ncrm-hero-block .ncrm-hero-block__annotation {
  max-width: 44rem;
  margin-top: 1.125rem;
  color: var(--template-muted);
  font-size: clamp(.9375rem, 1.35vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
}

.ncrm-hero-block .ncrm-hero-block__actions {
  gap: .875rem;
  margin-top: 1.5rem;
}

/* With no annotation the actions follow the offer directly, so they need a
 * little more separation than in the annotated three-part composition. */
.ncrm-hero-block .ncrm-hero-block__headline + .ncrm-hero-block__actions {
  margin-top: 2rem;
}

.ncrm-hero-block .ncrm-hero-block__actions .template-button {
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--ncrm-design-button-radius, .75rem);
  box-shadow: none;
  font-size: 1rem;
  font-weight: 520;
}

.ncrm-hero-block .ncrm-hero-block__actions .template-button--secondary,
.ncrm-hero-block .ncrm-hero-block__actions .template-button--secondary:visited {
  color: var(--template-secondary);
  border-color: var(--template-border);
  background: var(--template-surface);
  box-shadow: none;
}

.ncrm-hero-block .ncrm-hero-block__actions .template-button--secondary:hover,
.ncrm-hero-block .ncrm-hero-block__actions .template-button--secondary:focus-visible {
  color: var(--template-link-hover);
  border-color: var(--template-secondary);
  background: var(--template-surface);
}
/* Norm CRM managed specialist-hero styles: end */

/* Norm CRM managed review styles: start */
/* Review-specific content layers on the shared .template-card surface used by
   services, portfolio works and publications. */

.template-section--reviews .ncrm-review-card h3 {
  margin: 0;
  color: var(--template-ink);
  font-size: 1rem;
  font-weight: 650;
}

.ncrm-review-card__identity,
.ncrm-review-detail__identity {
  display: grid;
  gap: .25rem;
}

.ncrm-review-card__identity,
.ncrm-review-detail__header {
  display: flex;
  align-items: center;
  gap: .875rem;
}

.ncrm-review-card__identity-text {
  display: grid;
  min-width: 0;
  gap: .25rem;
}

.ncrm-review-detail__summary {
  display: grid;
  min-width: 0;
  gap: .375rem;
}

.ncrm-review-detail__identity {
  margin-bottom: 0;
}

.ncrm-review-card__avatar,
.ncrm-review-detail__avatar {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.ncrm-review-card__avatar {
  width: 3rem;
  height: 3rem;
}

.ncrm-review-detail__avatar {
  width: 6rem;
  height: 6rem;
}

.ncrm-review-card__position {
  margin: 0;
}

.ncrm-review-card__rating,
.review-rating-static,
.review-rating-static__stars,
.review-rating-static__star,
.review-rating-static__thumb {
  display: inline-flex;
  align-items: center;
}

.ncrm-review-card__rating {
  width: fit-content;
  min-height: 1.5rem;
}

.review-rating-static {
  gap: .5rem;
}

.review-rating-static__stars {
  gap: .2rem;
}

.review-rating-static__star,
.review-rating-static__thumb {
  justify-content: center;
  line-height: 0;
}

.review-rating-static__star {
  color: var(--template-review-rating-star);
}

.review-rating-static__star.is-active {
  color: var(--template-review-rating-star);
}

.review-rating-static.review-rating-static--binary .review-rating-static__thumb {
  width: auto;
  height: auto;
  color: var(--template-review-rating-thumb);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.review-rating-static__empty {
  color: var(--template-secondary);
  font-size: .8125rem;
  font-weight: 520;
}

.review-rating-static .ui-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.template-card .ncrm-review-card__body {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.65;
}

.ncrm-review-detail__body {
  margin: .875rem 0 0;
  padding: 0;
  border: 0;
  line-height: 1.65;
}

/* Norm CRM managed review styles: end */

/* Norm CRM managed service-presentation styles: start */
.template-section--services-simple-list {
  container: ncrm-service-list / inline-size;
}

.template-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.template-service-list__row {
  display: grid;
  gap: .375rem;
  min-width: 0;
  padding-block: 1rem;
  line-height: 1.6;
  color: var(--template-ink);
}

.template-service-list__row + .template-service-list__row {
  border-top: 1px solid var(--template-border);
}

.template-service-list__name,
.template-service-list__price {
  min-width: 0;
  overflow-wrap: anywhere;
}

.template-service-list__price {
  font-variant-numeric: tabular-nums;
}

.template-service-list__leader { display: none; }

@container ncrm-service-list (min-width: 40rem) {
  .template-service-list__row--priced {
    /* Flexible names and prices can both wrap; the leader follows the last
       text line and cannot push either value outside the container. */
    grid-template-columns: fit-content(50%) minmax(1rem, 1fr) fit-content(42%);
    align-items: end;
    column-gap: .75rem;
  }

  .template-service-list__row + .template-service-list__row { border-top: 0; }

  .template-service-list__leader {
    display: block;
    border-bottom: 1px dotted var(--template-border);
    margin-bottom: .5em;
  }

  .template-service-list__price { text-align: right; }
}

/* A single review stays stacked. Service cards follow that same exception
   while pairs continue to use the shared matrix's horizontal composition. */
.template-section--services-vertical-cards > .template-card-grid > .template-card:only-child {
  --ncrm-matrix-cover-columns: 1fr;
  --ncrm-matrix-cover-align: start;
  --ncrm-matrix-cover-gap: 12px;
  --ncrm-matrix-media-min-height: 0;
  --ncrm-matrix-media-ratio: 16 / 9;
  --ncrm-matrix-content-align: start;
  --ncrm-matrix-content-padding: 2px 6px 6px;
  --ncrm-matrix-body-columns: 1fr;
  --ncrm-matrix-body-gap: 0;
  --ncrm-matrix-title-column: auto;
  --ncrm-matrix-title-row: auto;
  --ncrm-matrix-copy-column: auto;
  --ncrm-matrix-copy-row: auto;
  --ncrm-matrix-meta-column: auto;
  --ncrm-matrix-meta-row: auto;
}
/* Norm CRM managed service-presentation styles: end */