/* Dismantlix Labs — global foundation stylesheet.
   Token values are never hardcoded here; see tokens/ for the source of truth. */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/layout.css";
@import "tokens/borders.css";
@import "tokens/motion.css";

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dl-surface-page);
  color: var(--dl-text-primary);
  font-family: var(--dl-font-sans);
  font-size: var(--dl-body-size-mobile);
  line-height: var(--dl-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 834px) {
  body { font-size: var(--dl-body-size); }
}

img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, dl, dd, dt, figure { margin: 0; }

/* Focus — approved treatment: 2px #B24A12 ring at 2px offset. Never color-only, always visible on :focus-visible. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--dl-focus-ring-width) solid var(--dl-focus-ring);
  outline-offset: var(--dl-focus-ring-offset);
  border-radius: var(--dl-radius-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute; top: var(--dl-space-1); left: var(--dl-space-1); z-index: 100;
  transform: translateY(-150%);
  display: inline-flex; align-items: center; min-height: var(--dl-target-min); padding: 0 18px;
  background: var(--dl-surface-emphasis); color: var(--dl-on-emphasis-text);
  border-radius: var(--dl-radius-sm); font-size: var(--dl-button-size); font-weight: var(--dl-button-weight);
  transition: transform var(--dl-duration-fast) var(--dl-ease);
}
.skip-link:focus-visible { transform: translateY(0); }
main:focus { outline: none; }

/* Container */
.container {
  max-width: var(--dl-container-desktop-lg);
  margin: 0 auto;
}

/* ---- Site header / navigation ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--dl-surface-page);
  border-bottom: var(--dl-border-hairline) solid var(--dl-border-default);
}
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--dl-gutter-mobile);
}
.site-nav__logo { display: flex; align-items: center; min-height: var(--dl-target-min); }
.site-nav__logo .logo-desktop { display: none; }
@media (min-width: 834px) {
  .site-nav__logo .logo-mobile { display: none; }
  .site-nav__logo .logo-desktop { display: block; }
}
.site-nav__links {
  display: none;
  align-items: center;
  gap: var(--dl-space-4);
}
.site-nav__link {
  display: inline-flex; align-items: center; min-height: var(--dl-target-min);
  font-size: var(--dl-nav-size); font-weight: var(--dl-nav-weight); color: var(--dl-text-body);
  border-bottom: var(--dl-border-medium) solid transparent;
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
.site-nav__link:hover { color: var(--dl-text-accent); }
.site-nav__link[aria-current="page"] {
  color: var(--dl-text-primary);
  border-bottom-color: var(--dl-accent-graphic);
}
.site-nav__cta {
  display: inline-flex; align-items: center; min-height: var(--dl-target-min); padding: 0 18px;
  border: var(--dl-border-hairline) solid var(--dl-border-stronger); border-radius: var(--dl-radius-sm);
  font-size: var(--dl-nav-size); font-weight: var(--dl-nav-weight); color: var(--dl-text-primary);
  transition: background var(--dl-duration-fast) var(--dl-ease);
}
.site-nav__cta:hover { background: var(--dl-border-default); }

.nav-toggle {
  width: var(--dl-target-min); height: var(--dl-target-min);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: none; padding: 0; cursor: pointer;
}
.nav-toggle__bar { width: 22px; height: 2px; background: var(--dl-text-primary); }

.mobile-menu {
  border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  padding: var(--dl-space-1) var(--dl-gutter-mobile) var(--dl-space-3);
  display: flex; flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__link {
  display: flex; align-items: center; min-height: var(--dl-target-min);
  font-size: 16px; font-weight: var(--dl-nav-weight); color: var(--dl-text-primary);
  border-top: var(--dl-border-hairline) solid var(--dl-border-default);
}
.mobile-menu__link--sub {
  font-size: 15px; font-weight: var(--dl-weight-regular); color: var(--dl-text-body); padding-left: 16px;
}
.mobile-menu__cta {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; min-height: var(--dl-target-min);
  background: var(--dl-surface-emphasis); color: var(--dl-on-emphasis-text);
  border-radius: var(--dl-radius-sm); font-size: 15px; font-weight: var(--dl-button-weight);
}

@media (min-width: 834px) {
  .site-nav { padding: 16px var(--dl-gutter-tablet); }
  .site-nav__links { display: flex; gap: var(--dl-space-3); }
  .nav-toggle, .mobile-menu { display: none; }
}
@media (min-width: 1200px) {
  .site-nav { padding: 16px var(--dl-gutter-laptop); }
  .site-nav__links { gap: 28px; }
}
@media (min-width: 1440px) {
  .site-nav { padding: 20px var(--dl-gutter-desktop); }
  .site-nav__links { gap: var(--dl-space-4); }
  .site-nav__link { font-size: 14px; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--dl-target-min); padding: 0 24px;
  font-family: var(--dl-font-sans); font-size: var(--dl-button-size); font-weight: var(--dl-button-weight);
  border-radius: var(--dl-radius-sm); border: none; cursor: pointer;
  transition: background var(--dl-duration-fast) var(--dl-ease), color var(--dl-duration-fast) var(--dl-ease);
}
.btn-primary { background: var(--dl-graphite); color: var(--dl-paper); padding: 0 26px; }
.btn-primary:hover { background: var(--dl-text-body); }
.btn-secondary {
  background: transparent; color: var(--dl-text-primary);
  border: var(--dl-border-hairline) solid var(--dl-border-stronger); padding: 0 22px;
}
.btn-secondary:hover { background: var(--dl-steel-100); }
.btn-secondary--dark { color: var(--dl-on-emphasis-text); border-color: var(--dl-steel-300); }
.btn-secondary--dark:hover { background: color-mix(in srgb, var(--dl-paper) 8%, transparent); }
.btn-block { width: 100%; }

.text-link {
  display: inline-flex; width: fit-content; font-size: 14px; font-weight: var(--dl-nav-weight);
  color: var(--dl-text-primary); border-bottom: 1px solid currentColor;
}
.text-link:hover { color: var(--dl-text-accent); }

/* Inline "[X REQUIRED]" verification flag — never invent the value, only ever this literal marker */
.flag-required { font-family: var(--dl-font-mono); font-size: 12px; color: var(--dl-text-accent); }

/* Inline "coming soon" badge — for real, known-not-yet-available items (not a missing-content flag) */
.badge-soon {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--dl-accent-text-light);
}

/* mailto / verified contact links */
.email-link {
  font-family: var(--dl-font-mono); font-size: 12px; color: var(--dl-text-accent);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
.email-link:hover { color: var(--dl-accent-hover); }

/* ---- Status labels (media provenance — never color-only) ---- */
.status {
  margin: 0; display: inline-flex; align-items: center; gap: var(--dl-inline-gap-tight);
  font-family: var(--dl-font-mono); font-size: var(--dl-caption-size); letter-spacing: var(--dl-label-tracking);
  text-transform: uppercase; color: var(--dl-text-secondary);
}
.status__marker { flex-shrink: 0; width: 8px; height: 8px; }
.status--verified .status__marker { background: var(--dl-status-verified); }
.status--required .status__marker { border: 2px solid var(--dl-status-required); background: none; }
.status__label { color: var(--dl-text-primary); }
.status--on-dark { color: var(--dl-on-emphasis-secondary); }
.status--on-dark .status__label { color: var(--dl-on-emphasis-text); }

/* ---- Footer ---- */
.site-footer {
  background: var(--dl-surface-emphasis); color: var(--dl-on-emphasis-text);
  padding: var(--dl-space-4) var(--dl-gutter-mobile);
}
.site-footer__grid {
  display: flex; flex-direction: column; gap: var(--dl-space-4);
}
.site-footer__brand { display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.site-footer__products {
  margin: 0; font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  text-transform: uppercase; color: var(--dl-on-emphasis-secondary);
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col-title {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  text-transform: uppercase; color: var(--dl-on-emphasis-secondary);
}
.site-footer__col a {
  display: flex; align-items: center; min-height: var(--dl-target-min);
  font-size: 14px; color: var(--dl-paper); transition: color var(--dl-duration-fast) var(--dl-ease);
}
.site-footer__col a:hover { color: var(--dl-on-emphasis-accent); }

/* Official business identity — real visible text, no CSS/JS hiding, matches the Organization JSON-LD. */
.site-footer__business {
  margin: var(--dl-space-3) 0 0; padding-top: 18px;
  border-top: var(--dl-border-hairline) solid var(--dl-on-emphasis-border);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-style: normal; font-size: 14px; line-height: 1.5; color: var(--dl-paper);
}
.site-footer__business-name { font-weight: var(--dl-weight-semibold); }
.site-footer__business-sep { color: var(--dl-on-emphasis-secondary); }
.site-footer__business-address { color: var(--dl-on-emphasis-text); }
.site-footer__business-phone {
  color: var(--dl-paper); text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
.site-footer__business-phone:hover { color: var(--dl-on-emphasis-accent); }

.site-footer__legal {
  margin-top: 10px;
  font-family: var(--dl-font-mono); font-size: 12px; color: var(--dl-on-emphasis-secondary);
}
@media (min-width: 834px) {
  .site-footer { padding: var(--dl-space-5) var(--dl-gutter-tablet) var(--dl-space-3); }
  .site-footer__grid { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--dl-space-6); }
}
@media (min-width: 1440px) {
  .site-footer { padding: var(--dl-space-6) var(--dl-gutter-desktop) var(--dl-space-4); }
  .site-footer__grid { gap: var(--dl-space-7); }
}