/* SAMLLC front. Appearance comes from theme/samllc.theme.css.
   Column width (72rem), the 52rem breakpoint, grid tracks, the skip-link
   offset, the honeypot clip, and the Pigeon stage size are structural
   layout, not theme values. Edges are the component box-shadow tokens
   (native border width stays zero). select uses appearance: none so the
   control's box-shadow is visible. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--cte-canvas);
  color: var(--cte-text);
}

body {
  margin: var(--space-zero);
  background: var(--cte-canvas);
  color: var(--cte-text);
  font-family: var(--font-ui);
  font-size: var(--size-l);
  font-weight: var(--weight-ui-regular);
  line-height: var(--line-l);
  letter-spacing: var(--letter-spacing-l);
  font-synthesis: none;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--space-xxs);
}

.skip {
  position: absolute;
  left: var(--space-m);
  top: var(--space-m);
  z-index: var(--z-palette);
  transform: translateY(-200%);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-s);
  background: var(--cte-surface);
  color: var(--cte-text);
}

.skip:focus {
  transform: translateY(0);
}

.site-header {
  background: var(--cte-canvas);
  box-shadow: inset var(--space-zero) calc(var(--separator-default-separator-rest-border-width) * -1) var(--space-zero) var(--space-zero) var(--separator-default-separator-rest-border-color);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: min(100%, 72rem);
  margin-inline: auto;
  padding: var(--space-m) var(--space-l);
}

.brand {
  font-family: var(--font-brand);
  font-size: var(--size-s);
  font-weight: var(--weight-brand-heavy);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
  color: var(--cte-text);
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--navigation-menu-default-list-rest-gap);
}

.nav a {
  padding: var(--navigation-menu-default-link-rest-padding-top) var(--navigation-menu-default-link-rest-padding-x);
  border-radius: var(--navigation-menu-default-link-rest-radius);
  background: var(--navigation-menu-default-link-rest-background);
  color: var(--navigation-menu-default-link-rest-foreground);
  font-family: var(--navigation-menu-default-link-rest-font);
  font-size: var(--navigation-menu-default-link-rest-text-size);
  font-weight: var(--navigation-menu-default-link-rest-weight);
  line-height: var(--navigation-menu-default-link-rest-line-height);
  letter-spacing: var(--navigation-menu-default-link-rest-letter-spacing);
  text-decoration: none;
  transition-property: background-color, color, box-shadow;
  transition-duration: var(--motion-duration);
  transition-timing-function: var(--motion-easing);
}

.nav a:hover {
  background: var(--navigation-menu-default-link-hover-background);
  color: var(--navigation-menu-default-link-hover-foreground);
}

.nav a:focus-visible {
  background: var(--navigation-menu-default-link-focus-background);
  color: var(--navigation-menu-default-link-focus-foreground);
  box-shadow: var(--navigation-menu-default-link-focus-box-shadow);
}

.nav a[aria-current="page"] {
  background: var(--navigation-menu-default-link-selected-background);
  color: var(--navigation-menu-default-link-selected-foreground);
  border-radius: var(--navigation-menu-default-link-selected-radius);
}

.shell {
  width: min(100%, 72rem);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-l) var(--space-xxl);
}

h1 {
  margin: var(--space-zero) var(--space-zero) var(--space-m);
  color: var(--cte-text);
  font-family: var(--font-brand);
  font-size: var(--size-xxl);
  font-weight: var(--weight-brand-heavy);
  line-height: var(--line-xxl);
  letter-spacing: var(--letter-spacing-xxl);
}

h2 {
  margin: var(--space-zero) var(--space-zero) var(--space-xs);
  color: var(--cte-text);
  font-family: var(--font-brand);
  font-size: var(--size-xl);
  font-weight: var(--weight-brand-medium);
  line-height: var(--line-xl);
  letter-spacing: var(--letter-spacing-xl);
}

p {
  margin: var(--space-zero) var(--space-zero) var(--space-m);
  max-width: var(--measure-reading);
}

a {
  color: var(--preview-card-default-trigger-rest-foreground);
}

main a:not(.button) {
  font-family: var(--preview-card-default-trigger-rest-font);
  font-size: var(--preview-card-default-trigger-rest-text-size);
  font-weight: var(--preview-card-default-trigger-rest-weight);
  line-height: var(--preview-card-default-trigger-rest-line-height);
  letter-spacing: var(--preview-card-default-trigger-rest-letter-spacing);
  text-decoration: underline;
  text-underline-offset: var(--space-xxs);
}

main a:not(.button):hover {
  color: var(--preview-card-default-trigger-hover-foreground);
}

main a:not(.button):focus-visible {
  color: var(--preview-card-default-trigger-focus-foreground);
  box-shadow: var(--preview-card-default-trigger-focus-box-shadow);
}

.kicker,
.status {
  font-family: var(--font-ui);
  font-size: var(--size-s);
  font-weight: var(--weight-ui-medium);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
  color: var(--cte-text-secondary);
}

.kicker {
  margin: var(--space-zero) var(--space-zero) var(--space-s);
}

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
  margin-block-start: var(--space-xxl);
}

.service {
  margin: var(--space-zero);
  padding: var(--preview-card-default-popover-rest-padding-top) var(--preview-card-default-popover-rest-padding-x);
  border-width: var(--border-none);
  border-radius: var(--preview-card-default-popover-rest-radius);
  background: var(--preview-card-default-popover-rest-background);
  color: var(--preview-card-default-popover-rest-foreground);
  box-shadow: var(--preview-card-default-popover-rest-box-shadow);
}

.service h2 {
  color: var(--preview-card-default-title-rest-foreground);
  font-family: var(--preview-card-default-title-rest-font);
  font-size: var(--preview-card-default-title-rest-text-size);
  font-weight: var(--preview-card-default-title-rest-weight);
  line-height: var(--preview-card-default-title-rest-line-height);
  letter-spacing: var(--preview-card-default-title-rest-letter-spacing);
}

.service p {
  color: var(--preview-card-default-description-rest-foreground);
  font-family: var(--preview-card-default-description-rest-font);
  font-size: var(--preview-card-default-description-rest-text-size);
  font-weight: var(--preview-card-default-description-rest-weight);
  line-height: var(--preview-card-default-description-rest-line-height);
  letter-spacing: var(--preview-card-default-description-rest-letter-spacing);
}

.how {
  margin-block-start: var(--space-xl);
  color: var(--cte-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--size-l);
  font-weight: var(--weight-ui-regular);
  line-height: var(--line-l);
  letter-spacing: var(--letter-spacing-l);
}

.section {
  margin-block-start: var(--space-xxl);
}

.button,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-zero);
  border-width: var(--border-none);
  border-style: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: var(--motion-duration);
  transition-timing-function: var(--motion-easing);
}

.button {
  padding: var(--button-primary-control-rest-padding-top) var(--button-primary-control-rest-padding-x);
  border-radius: var(--button-primary-control-rest-radius);
  background: var(--button-primary-control-rest-background);
  color: var(--button-primary-label-rest-foreground);
  box-shadow: var(--button-primary-control-rest-box-shadow);
  font-family: var(--button-primary-label-rest-font);
  font-size: var(--button-primary-label-rest-text-size);
  font-weight: var(--button-primary-label-rest-weight);
  line-height: var(--button-primary-label-rest-line-height);
  letter-spacing: var(--button-primary-label-rest-letter-spacing);
}

.button:hover {
  background: var(--button-primary-control-hover-background);
  color: var(--button-primary-label-hover-foreground);
  box-shadow: var(--button-primary-control-hover-box-shadow);
}

.button:focus-visible {
  background: var(--button-primary-control-focus-background);
  color: var(--button-primary-label-focus-foreground);
  box-shadow: var(--button-primary-control-focus-box-shadow);
}

.button:disabled {
  background: var(--button-primary-control-disabled-background);
  color: var(--button-primary-label-disabled-foreground);
  box-shadow: var(--button-primary-control-disabled-box-shadow);
  cursor: default;
}

.button-secondary {
  padding: var(--button-secondary-control-rest-padding-top) var(--button-secondary-control-rest-padding-x);
  border-radius: var(--button-secondary-control-rest-radius);
  background: var(--button-secondary-control-rest-background);
  color: var(--button-secondary-label-rest-foreground);
  box-shadow: var(--button-secondary-control-rest-box-shadow);
  font-family: var(--button-secondary-label-rest-font);
  font-size: var(--button-secondary-label-rest-text-size);
  font-weight: var(--button-secondary-label-rest-weight);
  line-height: var(--button-secondary-label-rest-line-height);
  letter-spacing: var(--button-secondary-label-rest-letter-spacing);
}

.button-secondary:hover {
  background: var(--button-secondary-control-hover-background);
  color: var(--button-secondary-label-hover-foreground);
  box-shadow: var(--button-secondary-control-hover-box-shadow);
}

.button-secondary:focus-visible {
  background: var(--button-secondary-control-focus-background);
  color: var(--button-secondary-label-focus-foreground);
  box-shadow: var(--button-secondary-control-focus-box-shadow);
}

.button-secondary:disabled {
  background: var(--button-secondary-control-disabled-background);
  color: var(--button-secondary-label-disabled-foreground);
  box-shadow: var(--button-secondary-control-disabled-box-shadow);
  cursor: default;
}

.button:active:not(:disabled),
.button-secondary:active:not(:disabled) {
  transform: translateY(var(--motion-press-distance));
}

.theme-toggle-dark {
  display: inline;
}

.theme-toggle-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle-light {
    display: inline;
  }

  :root:not([data-theme]) .theme-toggle-dark {
    display: none;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle-dark {
    display: inline;
  }

  :root:not([data-theme]) .theme-toggle-light {
    display: none;
  }
}

:root[data-theme="dark"] .theme-toggle-light {
  display: inline;
}

:root[data-theme="dark"] .theme-toggle-dark {
  display: none;
}

:root[data-theme="light"] .theme-toggle-dark {
  display: inline;
}

:root[data-theme="light"] .theme-toggle-light {
  display: none;
}

.form {
  position: relative;
  display: grid;
  gap: var(--space-m);
  max-width: var(--measure-reading);
  margin-block-start: var(--space-l);
}

.field {
  display: grid;
  gap: var(--field-default-group-rest-gap);
}

.field label {
  color: var(--field-default-label-rest-foreground);
  font-family: var(--field-default-label-rest-font);
  font-size: var(--field-default-label-rest-text-size);
  font-weight: var(--field-default-label-rest-weight);
  line-height: var(--field-default-label-rest-line-height);
  letter-spacing: var(--field-default-label-rest-letter-spacing);
}

.field-control {
  width: 100%;
  margin: var(--space-zero);
  padding: var(--input-default-control-rest-padding-top) var(--input-default-control-rest-padding-x);
  border-width: var(--border-none);
  border-style: none;
  border-radius: var(--input-default-control-rest-radius);
  background: var(--input-default-control-rest-background);
  color: var(--input-default-control-rest-foreground);
  box-shadow: var(--input-default-control-rest-box-shadow);
  font-family: var(--input-default-control-rest-font);
  font-size: var(--input-default-control-rest-text-size);
  font-weight: var(--input-default-control-rest-weight);
  line-height: var(--input-default-control-rest-line-height);
  letter-spacing: var(--input-default-control-rest-letter-spacing);
  transition-property: box-shadow, background-color, color;
  transition-duration: var(--motion-duration);
  transition-timing-function: var(--motion-easing);
}

select.field-control {
  appearance: none;
  padding: var(--select-default-control-rest-padding-top) var(--select-default-control-rest-padding-x);
  border-radius: var(--select-default-control-rest-radius);
  background: var(--select-default-control-rest-background);
  color: var(--select-default-control-rest-foreground);
  box-shadow: var(--select-default-control-rest-box-shadow);
  font-family: var(--select-default-control-rest-font);
  font-size: var(--select-default-control-rest-text-size);
  font-weight: var(--select-default-control-rest-weight);
  line-height: var(--select-default-control-rest-line-height);
  letter-spacing: var(--select-default-control-rest-letter-spacing);
}

.field-control:hover {
  background: var(--input-default-control-hover-background);
  box-shadow: var(--input-default-control-hover-box-shadow);
}

select.field-control:hover {
  background: var(--select-default-control-hover-background);
  box-shadow: var(--select-default-control-hover-box-shadow);
}

.field-control:focus-visible {
  background: var(--input-default-control-focus-background);
  box-shadow: var(--input-default-control-focus-box-shadow);
}

select.field-control:focus-visible {
  background: var(--select-default-control-focus-background);
  box-shadow: var(--select-default-control-focus-box-shadow);
}

.field-control:disabled {
  background: var(--input-default-control-disabled-background);
  color: var(--input-default-control-disabled-foreground);
  box-shadow: var(--input-default-control-disabled-box-shadow);
}

select.field-control:disabled {
  background: var(--select-default-control-disabled-background);
  color: var(--select-default-control-disabled-foreground);
  box-shadow: var(--select-default-control-disabled-box-shadow);
}

.field-control[aria-invalid="true"] {
  background: var(--input-default-control-invalid-background);
  color: var(--input-default-control-invalid-foreground);
  box-shadow: var(--input-default-control-invalid-box-shadow);
}

/* :user-invalid stays in its own rule. An unknown pseudo in a grouped
   selector drops the whole rule, including aria-invalid. */
.field-control:user-invalid {
  background: var(--input-default-control-invalid-background);
  color: var(--input-default-control-invalid-foreground);
  box-shadow: var(--input-default-control-invalid-box-shadow);
}

select.field-control[aria-invalid="true"] {
  background: var(--input-default-control-invalid-background);
  color: var(--input-default-control-invalid-foreground);
  box-shadow: var(--input-default-control-invalid-box-shadow);
}

select.field-control:user-invalid {
  background: var(--input-default-control-invalid-background);
  color: var(--input-default-control-invalid-foreground);
  box-shadow: var(--input-default-control-invalid-box-shadow);
}

textarea.field-control {
  min-height: calc(var(--space-xxl) * 4);
  resize: vertical;
}

.hp {
  position: absolute;
  width: var(--space-xxs);
  height: var(--space-xxs);
  margin: var(--space-zero);
  padding: var(--space-zero);
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border-width: var(--border-none);
}

.form-status {
  margin-block-start: var(--space-s);
  padding: var(--toast-default-popover-rest-padding-top) var(--toast-default-popover-rest-padding-x);
  border-width: var(--border-none);
  border-radius: var(--toast-default-popover-rest-radius);
  background: var(--toast-default-popover-rest-background);
  color: var(--toast-default-title-rest-foreground);
  box-shadow: var(--toast-default-popover-rest-box-shadow);
  font-family: var(--toast-default-title-rest-font);
  font-size: var(--toast-default-title-rest-text-size);
  font-weight: var(--toast-default-title-rest-weight);
  line-height: var(--toast-default-title-rest-line-height);
  letter-spacing: var(--toast-default-title-rest-letter-spacing);
}

.form-status[data-state="sent"] {
  background: var(--status-sent-background);
  color: var(--status-sent-foreground);
  box-shadow: var(--status-sent-box-shadow);
}

.form-status[data-state="failed"] {
  background: var(--status-failed-background);
  color: var(--status-failed-foreground);
  box-shadow: var(--status-failed-box-shadow);
}

.site-footer {
  padding: var(--space-l);
  color: var(--cte-text-secondary);
  background: var(--cte-canvas);
  box-shadow: inset var(--space-zero) var(--separator-default-separator-rest-border-width) var(--space-zero) var(--space-zero) var(--separator-default-separator-rest-border-color);
  font-family: var(--font-ui);
  font-size: var(--size-xs);
  font-weight: var(--weight-ui-regular);
  line-height: var(--line-xs);
  letter-spacing: var(--letter-spacing-xs);
}

.site-footer p {
  width: min(100%, 72rem);
  margin: var(--space-zero) auto;
  color: var(--cte-text-secondary);
  font-size: var(--size-xs);
  font-weight: var(--weight-ui-regular);
  line-height: var(--line-xs);
  letter-spacing: var(--letter-spacing-xs);
}

.pigeon-stage {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 12rem);
}

.pigeon-mark {
  width: min(100%, 16rem);
  height: auto;
}

@media (max-width: 52rem) {
  .services {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Home: video, then the contact button (Ron, 2026-10-23). Structure only; values are theme tokens. */
.hero-video-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  background-color: var(--neutral-2);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; }
}