:where(
  a.as-btn,
  button.as-btn,
  .as-btn.elementor-button,
  .as-btn .elementor-button
) {
  --as-btn-background: var(--as-color-navy-900);
  --as-btn-border: var(--as-color-navy-900);
  --as-btn-color: var(--as-color-surface);
  align-items: center;
  background: var(--as-btn-background);
  border: var(--as-border-width) solid var(--as-btn-border);
  border-radius: var(--as-radius-md);
  box-sizing: border-box;
  color: var(--as-btn-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--as-font-family-base);
  font-size: var(--as-font-size-base);
  font-weight: var(--as-font-weight-semibold);
  gap: var(--as-space-2);
  justify-content: center;
  line-height: var(--as-line-height-ui);
  min-block-size: var(--as-control-size-sm);
  min-inline-size: var(--as-control-size-sm);
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    border-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    opacity var(--as-motion-duration-state) var(--as-motion-ease-standard);
  -webkit-tap-highlight-color: transparent;
}

:where(
  a.as-btn,
  button.as-btn,
  .as-btn.elementor-button,
  .as-btn .elementor-button
):focus-visible {
  outline: var(--as-focus-ring-width) solid var(--as-color-signal-400);
  outline-offset: var(--as-focus-ring-offset);
}

:where(.as-btn--primary.elementor-button, a.as-btn.as-btn--primary, button.as-btn.as-btn--primary, .as-btn--primary .elementor-button) {
  --as-btn-background: var(--as-color-navy-900);
  --as-btn-border: var(--as-color-navy-900);
  --as-btn-color: var(--as-color-surface);
}

:where(.as-btn--secondary.elementor-button, a.as-btn.as-btn--secondary, button.as-btn.as-btn--secondary, .as-btn--secondary .elementor-button) {
  --as-btn-background: transparent;
  --as-btn-border: var(--as-color-navy-900);
  --as-btn-color: var(--as-color-navy-900);
}

:where(.as-btn--urgent.elementor-button, a.as-btn.as-btn--urgent, button.as-btn.as-btn--urgent, .as-btn--urgent .elementor-button) {
  --as-btn-background: var(--as-color-urgent-500);
  --as-btn-border: var(--as-color-urgent-600);
  --as-btn-color: var(--as-color-navy-950);
}

:where(.as-btn--ghost.elementor-button, a.as-btn.as-btn--ghost, button.as-btn.as-btn--ghost, .as-btn--ghost .elementor-button) {
  --as-btn-background: transparent;
  --as-btn-border: transparent;
  --as-btn-color: var(--as-color-navy-900);
}

:where(.as-btn--sm.elementor-button, a.as-btn.as-btn--sm, button.as-btn.as-btn--sm, .as-btn--sm .elementor-button) {
  min-block-size: var(--as-control-size-sm);
  padding: var(--as-space-2) var(--as-space-4);
}

:where(.as-btn--md.elementor-button, a.as-btn.as-btn--md, button.as-btn.as-btn--md, .as-btn--md .elementor-button) {
  min-block-size: var(--as-control-size-md);
  padding: var(--as-space-3) var(--as-space-6);
}

:where(.as-btn--lg.elementor-button, a.as-btn.as-btn--lg, button.as-btn.as-btn--lg, .as-btn--lg .elementor-button) {
  min-block-size: var(--as-control-size-lg);
  padding: var(--as-space-4) var(--as-space-8);
}

:where(a.as-btn, button.as-btn, .as-btn.elementor-button, .as-btn .elementor-button).is-pressed,
.as-btn.is-pressed .elementor-button {
  opacity: var(--as-opacity-pressed);
}

:where(a.as-btn, button.as-btn, .as-btn.elementor-button, .as-btn .elementor-button).is-processing,
.as-btn.is-processing .elementor-button {
  cursor: wait;
}

:where(a.as-btn, button.as-btn, .as-btn.elementor-button, .as-btn .elementor-button).is-success,
.as-btn.is-success .elementor-button {
  --as-btn-background: var(--as-color-signal-100);
  --as-btn-border: var(--as-color-signal-600);
  --as-btn-color: var(--as-color-navy-950);
}

:where(a.as-btn, button.as-btn, .as-btn.elementor-button, .as-btn .elementor-button).is-error,
.as-btn.is-error .elementor-button {
  --as-btn-background: var(--as-color-urgent-100);
  --as-btn-border: var(--as-color-urgent-600);
  --as-btn-color: var(--as-color-navy-950);
}

:where(a.as-btn, button.as-btn, .as-btn.elementor-button, .as-btn .elementor-button).is-disabled,
.as-btn.is-disabled .elementor-button {
  cursor: not-allowed;
  opacity: var(--as-opacity-disabled);
  pointer-events: none;
}

.as-btn__label-viewport {
  display: inline-grid;
  overflow: hidden;
  position: relative;
}

.as-btn__label,
.as-btn__processing-visual {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.as-btn__label {
  display: inline-block;
}

.as-btn__processing-visual {
  color: var(--as-btn-color);
  display: grid;
  pointer-events: none;
}

.as-btn__processing-label {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.is-processing .as-btn__label {
  opacity: 0;
}


/* Component library — opt-in primitives only. */
.as-section-heading {
  display: grid;
  gap: var(--as-space-3);
  max-inline-size: 50rem;
}

.as-section-heading--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.as-section-heading__eyebrow {
  align-items: center;
  color: var(--as-color-signal-600);
  display: inline-flex;
  font-size: var(--as-font-size-xs);
  font-weight: var(--as-font-weight-semibold);
  gap: var(--as-space-2);
  letter-spacing: 0.05em;
  margin: 0;
}

.as-section-heading__eyebrow::before {
  background: currentColor;
  block-size: 0.125rem;
  border-radius: var(--as-radius-pill);
  content: "";
  inline-size: 1.5rem;
}

.as-section-heading__title {
  color: var(--as-color-navy-950);
  font-size: var(--as-font-size-2xl);
  font-weight: var(--as-font-weight-extrabold);
  line-height: var(--as-line-height-heading);
  margin: 0;
}

.as-section-heading__description {
  color: var(--as-color-muted);
  font-size: var(--as-font-size-base);
  margin: 0;
  max-inline-size: 65ch;
}

.as-badge,
.as-area-chip {
  align-items: center;
  border: var(--as-border-width) solid var(--as-color-border);
  border-radius: var(--as-radius-pill);
  display: inline-flex;
  font-size: var(--as-font-size-xs);
  font-weight: var(--as-font-weight-semibold);
  gap: var(--as-space-2);
  line-height: var(--as-line-height-ui);
  min-block-size: 2rem;
  padding: var(--as-space-1) var(--as-space-3);
  text-decoration: none;
}

.as-badge {
  background: var(--as-color-signal-100);
  color: var(--as-color-navy-900);
}

.as-badge--urgent {
  background: var(--as-color-urgent-100);
  border-color: color-mix(in srgb, var(--as-color-urgent-600) 30%, var(--as-color-border));
  color: var(--as-color-urgent-600);
}

.as-area-chip {
  background: var(--as-color-surface);
  color: var(--as-color-navy-900);
  transition: background-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    border-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    transform var(--as-motion-duration-state) var(--as-motion-ease-standard);
}

.as-area-chip:is(:hover, :focus-visible),
.as-area-chip.is-active {
  background: var(--as-color-signal-100);
  border-color: var(--as-color-signal-500);
  color: var(--as-color-navy-950);
  transform: translateY(-0.125rem);
}

.as-icon-button {
  align-items: center;
  background: var(--as-color-surface);
  border: var(--as-border-width) solid var(--as-color-border);
  border-radius: var(--as-radius-pill);
  color: var(--as-color-navy-900);
  cursor: pointer;
  display: inline-flex;
  inline-size: var(--as-control-size-md);
  justify-content: center;
  min-block-size: var(--as-control-size-md);
  padding: 0;
  transition: background-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    border-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    transform var(--as-motion-duration-state) var(--as-motion-ease-standard);
}

.as-icon-button:is(:hover, :focus-visible) {
  background: var(--as-color-signal-100);
  border-color: var(--as-color-signal-500);
  color: var(--as-color-navy-950);
  transform: translateY(-0.125rem);
}

.as-icon-button:focus-visible,
.as-area-chip:focus-visible,
.as-faq summary:focus-visible,
.as-field__control:focus-visible {
  outline: var(--as-focus-ring-width) solid var(--as-color-signal-400);
  outline-offset: var(--as-focus-ring-offset);
}

.as-feature-item {
  align-items: flex-start;
  display: grid;
  gap: var(--as-space-4);
  grid-template-columns: auto minmax(0, 1fr);
}

.as-feature-item__icon,
.as-service-card__icon,
.as-contact-card__icon {
  align-items: center;
  background: var(--as-color-signal-100);
  border: var(--as-border-width) solid color-mix(in srgb, var(--as-color-signal-600) 22%, transparent);
  border-radius: var(--as-radius-md);
  color: var(--as-color-navy-900);
  display: inline-flex;
  inline-size: var(--as-component-icon-size);
  justify-content: center;
  min-block-size: var(--as-component-icon-size);
}

.as-feature-item__title,
.as-service-card__title,
.as-project-card__title,
.as-article-card__title,
.as-contact-card__title {
  color: var(--as-color-navy-950);
  font-size: var(--as-font-size-lg);
  font-weight: var(--as-font-weight-semibold);
  line-height: var(--as-line-height-heading);
  margin: 0;
}

.as-feature-item__text,
.as-service-card__text,
.as-project-card__text,
.as-article-card__excerpt,
.as-contact-card__text {
  color: var(--as-color-muted);
  margin: var(--as-space-1) 0 0;
}

.as-service-card,
.as-project-card,
.as-article-card,
.as-testimonial-card,
.as-contact-card {
  background: var(--as-color-surface);
  border: var(--as-border-width) solid var(--as-color-border);
  border-radius: var(--as-radius-lg);
  box-shadow: var(--as-shadow-sm);
  color: var(--as-color-text);
  overflow: hidden;
  position: relative;
  transition: border-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    box-shadow var(--as-motion-duration-enter) var(--as-motion-ease-standard),
    transform var(--as-motion-duration-enter) var(--as-motion-ease-standard);
}

.as-service-card:is(:hover, :focus-within),
.as-project-card:is(:hover, :focus-within),
.as-article-card:is(:hover, :focus-within),
.as-testimonial-card:is(:hover, :focus-within),
.as-contact-card:is(:hover, :focus-within) {
  border-color: var(--as-component-card-border-hover);
  box-shadow: var(--as-component-card-shadow-hover);
  transform: translateY(var(--as-component-card-lift));
}

.as-service-card {
  display: grid;
  gap: var(--as-space-6);
  min-block-size: 100%;
  padding: var(--as-space-6);
}

.as-service-card__header {
  align-items: flex-start;
  display: flex;
  gap: var(--as-space-4);
  justify-content: space-between;
}

.as-service-card__number {
  color: var(--as-color-signal-600);
  font-size: var(--as-font-size-xs);
  font-weight: var(--as-font-weight-semibold);
}

.as-service-card__link,
.as-article-card__link,
.as-project-card__link {
  align-items: center;
  color: var(--as-color-navy-900);
  display: inline-flex;
  font-weight: var(--as-font-weight-semibold);
  gap: var(--as-space-2);
  margin-block-start: auto;
  text-decoration: none;
}

.as-service-card__link::after,
.as-article-card__link::after,
.as-project-card__link::after {
  content: none;
}

.as-service-card__link:is(:hover, :focus-visible)::after,
.as-article-card__link:is(:hover, :focus-visible)::after,
.as-project-card__link:is(:hover, :focus-visible)::after {
  transform: translateX(-0.25rem);
}

.as-project-card,
.as-article-card {
  display: grid;
}

.as-project-card__media,
.as-article-card__media {
  aspect-ratio: var(--as-component-media-ratio);
  background-color: var(--as-color-surface-soft);
  overflow: hidden;
  position: relative;
}

.as-project-card__media::after,
.as-article-card__media::after {
  content: none;
}

.as-project-card__media img,
.as-article-card__media img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  transition: transform 600ms var(--as-motion-ease-standard);
}

.as-project-card:is(:hover, :focus-within) .as-project-card__media img,
.as-article-card:is(:hover, :focus-within) .as-article-card__media img {
  transform: scale(1.035);
}

.as-project-card__body,
.as-article-card__body {
  display: grid;
  gap: var(--as-space-3);
  padding: var(--as-space-6);
}

.as-project-card__meta,
.as-article-card__meta {
  color: var(--as-color-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--as-font-size-xs);
  gap: var(--as-space-2) var(--as-space-4);
}

.as-testimonial-card {
  display: grid;
  gap: var(--as-space-6);
  padding: var(--as-space-6);
}

.as-testimonial-card__quote {
  color: var(--as-color-navy-950);
  font-size: var(--as-font-size-lg);
  line-height: 2;
  margin: 0;
}

.as-testimonial-card__quote::before {
  color: var(--as-color-signal-500);
  content: "“";
  display: block;
  font-size: var(--as-font-size-3xl);
  font-weight: var(--as-font-weight-extrabold);
  line-height: 0.7;
}

.as-testimonial-card__author {
  align-items: center;
  display: flex;
  gap: var(--as-space-3);
}

.as-testimonial-card__avatar {
  align-items: center;
  background: var(--as-color-surface-soft);
  border-radius: var(--as-radius-pill);
  color: var(--as-color-navy-900);
  display: inline-flex;
  font-weight: var(--as-font-weight-semibold);
  inline-size: var(--as-control-size-md);
  justify-content: center;
  min-block-size: var(--as-control-size-md);
}

.as-testimonial-card__name {
  color: var(--as-color-navy-950);
  display: block;
  font-weight: var(--as-font-weight-semibold);
}

.as-testimonial-card__meta {
  color: var(--as-color-muted);
  display: block;
  font-size: var(--as-font-size-xs);
}

.as-faq {
  background: var(--as-color-surface);
  border: var(--as-border-width) solid var(--as-color-border);
  border-radius: var(--as-radius-md);
  overflow: hidden;
}

.as-faq + .as-faq {
  margin-block-start: var(--as-space-3);
}

.as-faq summary {
  align-items: center;
  color: var(--as-color-navy-950);
  cursor: pointer;
  display: flex;
  font-size: var(--as-font-size-base);
  font-weight: var(--as-font-weight-semibold);
  gap: var(--as-space-4);
  justify-content: space-between;
  list-style: none;
  min-block-size: var(--as-control-size-lg);
  padding: var(--as-space-4) var(--as-space-6);
}

.as-faq summary::-webkit-details-marker {
  display: none;
}

.as-faq summary::after {
  align-items: center;
  border: var(--as-border-width) solid var(--as-color-border);
  border-radius: var(--as-radius-pill);
  color: var(--as-color-signal-600);
  content: "+";
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: 2rem;
  justify-content: center;
  min-block-size: 2rem;
  transition: background-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    transform var(--as-motion-duration-enter) var(--as-motion-ease-standard);
}

.as-faq[open] summary::after {
  background: var(--as-color-signal-100);
  transform: rotate(45deg);
}

.as-faq__content {
  border-block-start: var(--as-border-width) solid var(--as-color-border);
  color: var(--as-color-muted);
  padding: var(--as-space-4) var(--as-space-6) var(--as-space-6);
}

.as-field {
  display: grid;
  gap: var(--as-space-2);
}

.as-field__label {
  color: var(--as-color-navy-950);
  font-size: var(--as-font-size-sm);
  font-weight: var(--as-font-weight-semibold);
}

.as-field__control {
  background: var(--as-color-surface);
  border: var(--as-border-width) solid var(--as-color-border);
  border-radius: var(--as-radius-sm);
  color: var(--as-color-text);
  font: inherit;
  inline-size: 100%;
  min-block-size: var(--as-control-size-md);
  padding: var(--as-space-3) var(--as-space-4);
  transition: border-color var(--as-motion-duration-state) var(--as-motion-ease-standard),
    box-shadow var(--as-motion-duration-state) var(--as-motion-ease-standard);
}

textarea.as-field__control {
  min-block-size: 8rem;
  resize: vertical;
}

.as-field__control:focus-visible {
  border-color: var(--as-component-control-border-focus);
  box-shadow: var(--as-component-focus-shadow);
}

.as-field__hint,
.as-field__error {
  font-size: var(--as-font-size-xs);
  margin: 0;
}

.as-field__hint {
  color: var(--as-color-muted);
}

.as-field__error {
  color: var(--as-color-urgent-600);
}

.as-field.is-error .as-field__control {
  border-color: var(--as-color-urgent-600);
}

.as-contact-card {
  align-items: center;
  display: grid;
  gap: var(--as-space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--as-space-6);
}

.as-contact-card__action {
  white-space: nowrap;
}

.as-breadcrumb {
  color: var(--as-color-muted);
  font-size: var(--as-font-size-sm);
}

.as-breadcrumb ol {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.as-breadcrumb li:not(:last-child)::after {
  color: var(--as-color-border);
  content: "/";
  margin-inline-start: var(--as-space-2);
}

.as-breadcrumb a {
  color: var(--as-color-navy-900);
  text-decoration: none;
}

.as-floating-phone {
  align-items: center;
  background: var(--as-color-urgent-500);
  border: var(--as-border-width) solid var(--as-color-urgent-600);
  border-radius: var(--as-radius-pill);
  bottom: max(var(--as-space-6), env(safe-area-inset-bottom));
  box-shadow: var(--as-shadow-md);
  color: var(--as-color-navy-950);
  display: inline-flex;
  font-weight: var(--as-font-weight-semibold);
  gap: var(--as-space-2);
  inset-inline-end: var(--as-space-6);
  min-block-size: var(--as-control-size-lg);
  padding: var(--as-space-3) var(--as-space-6);
  position: fixed;
  text-decoration: none;
  z-index: var(--as-z-sticky);
}

.as-mobile-contact-bar {
  align-items: stretch;
  background: rgb(255 255 255 / 94%);
  border-block-start: var(--as-border-width) solid var(--as-color-border);
  bottom: 0;
  box-shadow: 0 -0.75rem 2rem rgb(6 24 38 / 8%);
  display: none;
  gap: var(--as-space-2);
  inset-inline: 0;
  padding: var(--as-space-2) var(--as-space-3) max(var(--as-space-2), env(safe-area-inset-bottom));
  position: fixed;
  z-index: var(--as-z-sticky);
}

.as-mobile-contact-bar > * {
  flex: 1 1 0;
}

@media (hover: hover) and (pointer: fine) {
  .as-service-card__icon,
  .as-contact-card__icon {
    transition: transform var(--as-motion-duration-enter) var(--as-motion-ease-standard);
  }

  .as-service-card:hover .as-service-card__icon,
  .as-contact-card:hover .as-contact-card__icon {
    transform: translateY(-0.1875rem);
  }
}

@media (max-width: 48rem) {
  .as-contact-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .as-contact-card__action {
    grid-column: 1 / -1;
    inline-size: 100%;
  }
}

@media (max-width: 40rem) {
  .as-floating-phone {
    display: none;
  }

  .as-mobile-contact-bar {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .as-area-chip,
  .as-icon-button,
  .as-service-card,
  .as-project-card,
  .as-article-card,
  .as-testimonial-card,
  .as-contact-card,
  .as-project-card__media img,
  .as-article-card__media img,
  .as-faq summary::after,
  .as-service-card__icon,
  .as-contact-card__icon {
    transition-duration: 80ms;
  }

  .as-area-chip:is(:hover, :focus-visible),
  .as-icon-button:is(:hover, :focus-visible),
  .as-service-card:is(:hover, :focus-within),
  .as-project-card:is(:hover, :focus-within),
  .as-article-card:is(:hover, :focus-within),
  .as-testimonial-card:is(:hover, :focus-within),
  .as-contact-card:is(:hover, :focus-within),
  .as-project-card:is(:hover, :focus-within) .as-project-card__media img,
  .as-article-card:is(:hover, :focus-within) .as-article-card__media img,
  .as-service-card:hover .as-service-card__icon,
  .as-contact-card:hover .as-contact-card__icon {
    transform: none;
  }
}
