/* =========================================================================
   TELDIO DESIGN SYSTEM — BASE + COMPONENT STYLES
   --------------------------------------------------------------------------
   Component classes are prefixed `tdo-` and are intentionally simple so a
   WordPress theme can map Gutenberg blocks / ACF flexible content rows
   straight onto them.
   ========================================================================= */

/* -- Reset (minimal) ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tdo-font-body);
  font-size: var(--tdo-fs-body);
  line-height: var(--tdo-lh-normal);
  color: var(--tdo-text);
  background: var(--tdo-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
hr {
  border: 0;
  border-top: var(--tdo-border-hairline) solid var(--tdo-border);
  margin: var(--tdo-space-7) 0;
}

/* -- Typography helpers -------------------------------------------------- */
.tdo-display-xl,
.tdo-display-lg,
.tdo-display-md,
.tdo-display-sm,
.tdo-title {
  font-family: var(--tdo-font-display);
  font-weight: 600;
  letter-spacing: var(--tdo-tracking-tight);
  line-height: var(--tdo-lh-tight);
  margin: 0;
  text-wrap: balance;
}
.tdo-display-xl { font-size: var(--tdo-fs-display-xl); font-weight: 700; }
.tdo-display-lg { font-size: var(--tdo-fs-display-lg); font-weight: 700; }
.tdo-display-md { font-size: var(--tdo-fs-display-md); }
.tdo-display-sm { font-size: var(--tdo-fs-display-sm); }
.tdo-title      { font-size: var(--tdo-fs-title); letter-spacing: -0.01em; line-height: var(--tdo-lh-snug); }

.tdo-lead {
  font-size: var(--tdo-fs-body-lg);
  line-height: var(--tdo-lh-normal);
  color: var(--tdo-text-muted);
  text-wrap: pretty;
  max-width: 60ch;
}
.tdo-body  { font-size: var(--tdo-fs-body); line-height: var(--tdo-lh-normal); }
.tdo-meta  { font-size: var(--tdo-fs-body-sm); color: var(--tdo-text-muted); }
.tdo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tdo-space-2);
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-micro);
  font-weight: 500;
  letter-spacing: var(--tdo-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tdo-text-muted);
}
.tdo-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.tdo-mono { font-family: var(--tdo-font-mono); font-size: 0.875em; }

.tdo-text-accent { color: var(--tdo-accent); }
.tdo-text-muted  { color: var(--tdo-text-muted); }
.tdo-text-on-dark { color: var(--tdo-paper); }

/* -- Layout primitives --------------------------------------------------- */
.tdo-container {
  width: 100%;
  max-width: var(--tdo-container-max);
  margin-inline: auto;
  padding-inline: var(--tdo-container-px);
}
.tdo-container--narrow { max-width: var(--tdo-container-narrow); }
.tdo-section { padding-block: var(--tdo-section-py); }
.tdo-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.tdo-section--dark {
  background: var(--tdo-graphite-2);
  color: var(--tdo-paper);
  --tdo-text: var(--tdo-paper);
  --tdo-text-muted: var(--tdo-grey-400);
  --tdo-border: #2E2E2E;
  --tdo-border-strong: #3A3A3A;
}
.tdo-section--tint {
  background: var(--tdo-bg-subtle);
}

.tdo-grid { display: grid; gap: var(--tdo-space-5); }
.tdo-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tdo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tdo-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Kill Gutenberg block-gap margin injection — our gap/padding handles all spacing */
.wp-block-post-content > *,
.tdo-grid > *,
.tdo-stats > * { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (max-width: 900px) {
  .tdo-grid--3, .tdo-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tdo-grid--2, .tdo-grid--3, .tdo-grid--4 { grid-template-columns: 1fr; }
}

.tdo-stack { display: flex; flex-direction: column; gap: var(--tdo-space-4); }
.tdo-row   { display: flex; align-items: center; gap: var(--tdo-space-3); flex-wrap: wrap; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.tdo-btn {
  --btn-bg:     var(--tdo-accent);
  --btn-fg:     var(--tdo-text-on-accent);
  --btn-bd:     var(--tdo-accent);
  --btn-bg-h:   var(--tdo-accent-hover);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tdo-space-2);
  padding: 14px 22px;
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--tdo-border-emphasis) solid var(--btn-bd);
  border-radius: var(--tdo-radius-pill);
  transition: background var(--tdo-dur-base) var(--tdo-ease-standard),
              border-color var(--tdo-dur-base) var(--tdo-ease-standard),
              color var(--tdo-dur-base) var(--tdo-ease-standard),
              transform var(--tdo-dur-fast) var(--tdo-ease-standard);
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.tdo-btn:hover  { background: var(--btn-bg-h); border-color: var(--btn-bg-h); }
.tdo-btn:active { transform: translateY(1px); }
.tdo-btn:focus-visible { outline: none; box-shadow: var(--tdo-shadow-focus); }
.tdo-btn .tdo-btn__arrow {
  display: inline-block;
  transition: transform var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-btn:hover .tdo-btn__arrow { transform: translateX(4px); }

.tdo-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--tdo-text);
  --btn-bd: var(--tdo-border-emphasis-c);
  --btn-bg-h: var(--tdo-text);
}
.tdo-btn--secondary:hover { color: var(--tdo-bg); }

.tdo-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--tdo-text);
  --btn-bd: transparent;
  --btn-bg-h: var(--tdo-bg-subtle);
  padding: 12px 18px;
}
.tdo-btn--ghost:hover { border-color: transparent; }

.tdo-btn--inverse {
  --btn-bg: var(--tdo-paper);
  --btn-fg: var(--tdo-graphite-2);
  --btn-bd: var(--tdo-paper);
  --btn-bg-h: #E8E8E0;
}

.tdo-btn--sm { padding: 10px 16px; font-size: var(--tdo-fs-body-sm); }
.tdo-btn--lg { padding: 18px 28px; font-size: var(--tdo-fs-body-lg); }

/* Inline arrow link */
.tdo-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tdo-space-2);
  font-family: var(--tdo-font-display);
  font-weight: 500;
  color: var(--tdo-text);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: gap var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-link-arrow:hover { gap: var(--tdo-space-3); color: var(--tdo-accent); }

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
.tdo-field { display: flex; flex-direction: column; gap: var(--tdo-space-2); }
.tdo-label {
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-body-sm);
  font-weight: 500;
  color: var(--tdo-text);
}
.tdo-label__hint { color: var(--tdo-text-subtle); font-weight: 400; margin-left: 4px; }
.tdo-input, .tdo-textarea, .tdo-select {
  font: inherit;
  font-family: var(--tdo-font-body);
  background: var(--tdo-bg-elevated);
  color: var(--tdo-text);
  border: var(--tdo-border-hairline) solid var(--tdo-border-strong);
  border-radius: var(--tdo-radius-sm);
  padding: 12px 14px;
  transition: border-color var(--tdo-dur-base) var(--tdo-ease-standard),
              box-shadow var(--tdo-dur-base) var(--tdo-ease-standard);
  width: 100%;
}
.tdo-input:focus, .tdo-textarea:focus, .tdo-select:focus {
  outline: none;
  border-color: var(--tdo-accent);
  box-shadow: var(--tdo-shadow-focus);
}
.tdo-textarea { resize: vertical; min-height: 120px; }
.tdo-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234D4D4D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.tdo-check {
  display: inline-flex;
  align-items: center;
  gap: var(--tdo-space-2);
  cursor: pointer;
  font-size: var(--tdo-fs-body-sm);
}
.tdo-check input { accent-color: var(--tdo-accent); width: 18px; height: 18px; }

/* =========================================================================
   CARDS
   ========================================================================= */
.tdo-card {
  background: var(--tdo-bg-elevated);
  border: var(--tdo-border-hairline) solid var(--tdo-border);
  border-radius: var(--tdo-radius-md);
  padding: var(--tdo-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--tdo-space-4);
  transition: border-color var(--tdo-dur-base) var(--tdo-ease-standard),
              transform var(--tdo-dur-base) var(--tdo-ease-standard);
}
/* Pin links/CTAs to the bottom of every card */
.tdo-card .tdo-link-arrow,
.tdo-card .tdo-btn { margin-top: auto; }

/* Image card variant — full-bleed image bleeds to card edges at top */
.tdo-card--img {
  padding-top: 0;
  overflow: hidden;
}
.tdo-card__img {
  margin: 0 calc(-1 * var(--tdo-space-6));
  margin-top: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tdo-bg-subtle);
  margin-bottom: var(--tdo-space-5);
}
.tdo-card__img img,
.tdo-card__img .tdo-imgph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}
.tdo-card--hover:hover {
  border-color: var(--tdo-border-emphasis-c);
  transform: translateY(-2px);
}
.tdo-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--tdo-radius-sm);
  display: grid; place-items: center;
  background: var(--tdo-accent-tint);
  color: var(--tdo-graphite-2);
}
.tdo-card__title {
  font-family: var(--tdo-font-display);
  font-weight: 600;
  font-size: var(--tdo-fs-title);
  letter-spacing: -0.01em;
  line-height: var(--tdo-lh-snug);
  margin: 0;
}
/* Card titles that are links need a resting affordance, not just a hover
   state — a muted underline that strengthens (and goes accent) on hover. */
.tdo-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
}
.tdo-card__title a:hover {
  text-decoration-color: currentColor;
}
.tdo-card__body { color: var(--tdo-text-muted); margin: 0; }
.tdo-card__media {
  margin: calc(var(--tdo-space-6) * -1) calc(var(--tdo-space-6) * -1) 0;
  aspect-ratio: 16 / 10;
  background: var(--tdo-bg-subtle);
  border-bottom: var(--tdo-border-hairline) solid var(--tdo-border);
  border-radius: var(--tdo-radius-md) var(--tdo-radius-md) 0 0;
  overflow: hidden;
}

/* Product card variant — has accent stripe on top */
.tdo-card--product {
  position: relative;
  padding-top: calc(var(--tdo-space-6) + 4px);
}
.tdo-card--product::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--card-stripe, var(--tdo-accent));
  border-radius: var(--tdo-radius-md) var(--tdo-radius-md) 0 0;
}

/* =========================================================================
   BADGES / TAGS
   ========================================================================= */
.tdo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tdo-space-1);
  padding: 4px 10px;
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-micro);
  font-weight: 500;
  letter-spacing: var(--tdo-tracking-wide);
  text-transform: uppercase;
  background: var(--tdo-bg-subtle);
  color: var(--tdo-text);
  border-radius: var(--tdo-radius-pill);
  border: 1px solid var(--tdo-border);
}
.tdo-badge--accent { background: var(--tdo-accent-tint); border-color: transparent; color: var(--tdo-graphite-2); }
.tdo-badge--orange { background: var(--tdo-brand-orange-100); border-color: transparent; color: var(--tdo-brand-orange-600); }
.tdo-badge--blue   { background: var(--tdo-brand-blue-100); border-color: transparent; color: var(--tdo-brand-blue-600); }
.tdo-badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tdo-accent);
}

/* =========================================================================
   NAV
   ========================================================================= */
/* The rendered site header (parts/header*.html). Positioned + raised so nav
   dropdowns hit-test above hero content: without this the lower half of a
   long submenu paints but the hero underneath captures the pointer, closing
   the menu while the cursor moves down it. */
.tdo-site-header {
  position: relative;
  z-index: var(--tdo-z-nav);
}
.tdo-nav {
  position: sticky;
  top: 0;
  z-index: var(--tdo-z-nav);
  background: color-mix(in oklab, var(--tdo-bg), transparent 8%);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--tdo-border-hairline) solid var(--tdo-border);
  transition: background var(--tdo-dur-base) var(--tdo-ease-standard),
              border-color var(--tdo-dur-base) var(--tdo-ease-standard),
              color var(--tdo-dur-base) var(--tdo-ease-standard);
}

/* Transparent over a dark hero. Pair with a scroll handler that REMOVES
   this class once the user scrolls past the hero — see Homepage.html. */
.tdo-nav--transparent {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--tdo-paper);
}
.tdo-nav--transparent .tdo-nav__logo,
.tdo-nav--transparent .tdo-nav__link { color: var(--tdo-paper); }
.tdo-nav--transparent .tdo-nav__link::after { background: var(--tdo-accent); }
.tdo-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdo-space-6);
  padding-block: var(--tdo-space-4);
}
.tdo-nav__logo { display: inline-flex; align-items: center; gap: var(--tdo-space-2); }
.tdo-nav__links {
  display: flex;
  align-items: center;
  gap: var(--tdo-space-6);
}
.tdo-nav__link {
  font-family: var(--tdo-font-display);
  font-weight: 500;
  font-size: var(--tdo-fs-body-sm);
  color: var(--tdo-text);
  padding: 8px 0;
  position: relative;
}
.tdo-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--tdo-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-nav__link:hover::after { transform: scaleX(1); }
@media (max-width: 800px) {
  .tdo-nav__links { display: none; }
}

/* wp:navigation dropdown — force light bg + dark text regardless of header colour */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background: color-mix(in srgb, var(--tdo-paper) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--tdo-border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  padding: var(--tdo-space-2) 0;
  min-width: 200px;
  z-index: var(--tdo-z-nav); /* sit above hero content (tdo-hero__inner z-index:1) */
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--tdo-ink) !important;
  padding: var(--tdo-space-2) var(--tdo-space-4);
  font-size: var(--tdo-fs-body-sm);
  font-weight: 500;
  white-space: nowrap;
  display: block;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--tdo-ink) !important;
  background: color-mix(in oklab, var(--tdo-accent) 18%, transparent);
}
/* dropdown entrance: core toggles visibility/opacity; we add the slide */
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  transform: translateY(0);
}
/* nav-icons.js decorates dropdown links with sprite icons */
.tdo-navicon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--tdo-text-muted);
  transition: color var(--tdo-dur-fast, 120ms) ease;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content.has-tdo-navicon {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .tdo-navicon {
  color: var(--tdo-accent);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation .wp-block-navigation__submenu-container { transform: none; transition: none; }
}

/* Mobile overlay — reset floating-dropdown styles so submenus render as inline accordions */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: var(--tdo-space-1) 0 var(--tdo-space-2) var(--tdo-space-4) !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  z-index: auto !important;
}

/* Mobile header row — never let flex crush the CTA below its text width
   (core's word-break:break-word otherwise wraps it letter-by-letter) */
.tdo-site-header .wp-block-button__link {
  white-space: nowrap;
}
.tdo-site-header .wp-block-buttons,
.tdo-site-header .wp-block-button {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .tdo-site-header .wp-block-group .wp-block-group {
    gap: var(--tdo-space-2);
  }
  /* standard mobile order: logo ... CTA, burger anchors the far corner */
  .tdo-site-header .wp-block-group .wp-block-group .wp-block-buttons {
    order: -1;
  }
  .tdo-site-header .wp-block-button__link {
    padding: 11px 16px;
    font-size: var(--tdo-fs-body-sm);
  }
  .tdo-site-header svg[aria-label="Teldio"] {
    height: 32px !important;
  }
}

/* Mobile burger — a bare 24px icon next to the Book-a-demo pill reads as
   noise; the outlined pill gives it equal weight and a 44px tap target. */
.wp-block-navigation__responsive-container-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 44px;
  color: var(--tdo-paper);
  border: 1px solid color-mix(in oklab, var(--tdo-paper) 45%, transparent);
  border-radius: var(--tdo-radius-pill);
}
.wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
}

/* Mobile overlay — close button gets a real tap target, inset from the corner */
.wp-block-navigation__responsive-container-close {
  color: var(--tdo-ink) !important; /* close × is the button itself; SVG uses currentColor */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: var(--tdo-space-3);
  border: 1px solid var(--tdo-border);
  border-radius: var(--tdo-radius-pill);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 24px;
  height: 24px;
}

/* Mobile overlay — anchor the list top-left; the block's desktop
   justify:right otherwise leaves it floating right-aligned mid-screen.
   Core carries the justification through these custom props. */
.wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-justify: flex-start;
  text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: var(--tdo-space-4) var(--tdo-space-5) var(--tdo-space-6) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%;
}
/* every item is its own column flex; justified-right sets align-items:flex-end
   on each li, which is what right-ragged the overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
  margin-top: var(--tdo-space-5) !important;
  padding-top: var(--tdo-space-5);
  border-top: 1px solid var(--tdo-border);
}

/* Mobile overlay — group labels (Products / Solutions / Company) as
   eyebrows so they read as headings, not more menu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: var(--tdo-text-muted) !important;
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-micro) !important;
  font-weight: 500;
  letter-spacing: var(--tdo-tracking-eyebrow);
  text-transform: uppercase;
  padding: 0 0 var(--tdo-space-2) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  color: var(--tdo-ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  white-space: normal !important;
  font-size: var(--tdo-fs-body-lg) !important;
  font-weight: 500;
  padding: var(--tdo-space-2) 0 !important;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.tdo-footer {
  background: var(--tdo-ink);
  color: var(--tdo-paper);
  padding-block: var(--tdo-space-9) var(--tdo-space-6);
}
.tdo-footer a { color: var(--tdo-grey-300); }
.tdo-footer a:hover { color: var(--tdo-paper); }
.tdo-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--tdo-space-7);
  padding-bottom: var(--tdo-space-8);
  border-bottom: 1px solid #2E2E2E;
}
.tdo-footer__col-title {
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-micro);
  font-weight: 500;
  letter-spacing: var(--tdo-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tdo-grey-400);
  margin: 0 0 var(--tdo-space-4);
}
.tdo-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--tdo-space-2); }
/* Certification badges (MOTOTRBO Authorized Application Provider, Avigilon
   Technology Partner) — official colours, never grayscaled. */
.tdo-footer__badges {
  display: flex;
  align-items: center;
  gap: var(--tdo-space-5);
  margin-top: var(--tdo-space-7);
}
.tdo-footer__badges img { display: block; width: auto; }
.tdo-footer__badges img[src*="mototrbo"] { height: 72px; }
.tdo-footer__badges img[src*="avigilon"] { height: 60px; }
.tdo-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--tdo-space-5);
  font-size: var(--tdo-fs-body-sm);
  color: var(--tdo-grey-400);
}
@media (max-width: 800px) {
  .tdo-footer__top { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   PROMO BAR
   ========================================================================= */
.tdo-promo {
  background: var(--tdo-graphite-2);
  color: var(--tdo-paper);
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-body-sm);
  font-weight: 500;
}
.tdo-promo__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tdo-space-3);
  padding-block: 10px;
  text-align: center;
}
.tdo-promo--accent { background: var(--tdo-accent); color: var(--tdo-graphite-2); }
.tdo-promo a { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   HERO
   ========================================================================= */
.tdo-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 12vw, 160px);
}
.tdo-hero__eyebrow { margin-bottom: var(--tdo-space-4); }
.tdo-hero__title { max-width: 18ch; margin-bottom: var(--tdo-space-5); }
.tdo-hero__lead  { margin-bottom: var(--tdo-space-7); max-width: 56ch; }
.tdo-hero__cta-row { display: flex; gap: var(--tdo-space-3); flex-wrap: wrap; }

/* Split hero — text left, media right */
.tdo-hero--split .tdo-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--tdo-space-8);
  align-items: center;
}
@media (max-width: 960px) {
  .tdo-hero--split .tdo-hero__inner { grid-template-columns: 1fr; }
}

/* Dark hero variant */
.tdo-hero--dark {
  background: var(--tdo-graphite-2);
  color: var(--tdo-paper);
  --tdo-text: var(--tdo-paper);
  --tdo-text-muted: var(--tdo-grey-400);
}

/* =========================================================================
   STATS BLOCK
   ========================================================================= */
.tdo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tdo-space-7); }
@media (max-width: 800px) { .tdo-stats { grid-template-columns: repeat(2, 1fr); } }
.tdo-stat__num {
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-display-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tdo-tracking-tight);
}
.tdo-stat__label {
  margin-top: var(--tdo-space-3);
  font-size: var(--tdo-fs-body-sm);
  color: var(--tdo-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tdo-tracking-wide);
  font-family: var(--tdo-font-display);
}

/* =========================================================================
   LOGO WALL
   ========================================================================= */
.tdo-logowall {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tdo-space-6);
}
.tdo-logowall__item {
  display: grid; place-items: center;
  height: 56px;
  color: var(--tdo-text-muted);
  font-family: var(--tdo-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
  transition: opacity var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-logowall__item:hover { opacity: 1; }
/* Partner logo SVGs — grayscale at rest (matches the muted text treatment),
   official brand colour on hover. Per-logo heights balance the marks' very
   different aspect ratios / built-in padding. Double-class selectors so these
   beat patterns.css's `.wp-block-post-content img { height: auto }` (the blog
   image rule), which otherwise zeroes out lazy SVGs with no intrinsic size. */
.tdo-logowall .tdo-logowall__item img {
  display: block;
  width: auto;
  height: 26px;
  filter: grayscale(1);
  transition: filter var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-logowall .tdo-logowall__item:hover img { filter: none; }
.tdo-logowall .tdo-logowall__item--motorola img { height: 24px; }
.tdo-logowall .tdo-logowall__item--avtec img { height: 44px; }
/* Size tiers for mixed logo shapes: --tall for square marks, --wide for
   ultra-wide wordmarks (used by the customer wall on About). */
.tdo-logowall .tdo-logowall__item--tall img { height: 46px; }
.tdo-logowall .tdo-logowall__item--wide img { height: 20px; }
@media (max-width: 600px) { .tdo-logowall { gap: var(--tdo-space-6); } }

/* =========================================================================
   CUSTOMER CAROUSEL
   ========================================================================= */
.tdo-cust-carousel { position: relative; }

/* Stack all slides in the same grid cell — cross-fade via opacity */
.tdo-cust-carousel__track {
  display: grid;
}
.tdo-cust-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  /* outgoing slide drops fast; the incoming one (below) waits it out —
     overlapping half-faded slides read as ghosted double-exposure */
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tdo-cust-carousel__slide--active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s ease 0.3s;
}
.tdo-cust-carousel__row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tdo-space-3) var(--tdo-space-5);
  min-height: 56px;
}
.tdo-cust-carousel__name {
  color: var(--tdo-text-muted);
  font-family: var(--tdo-font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  letter-spacing: 0.04em;
  opacity: 0.7;
}
/* Customer logo images in the carousel — grayscale like the About wall.
   Double-class selectors beat `.wp-block-post-content img { height:auto }`
   (the blog image rule); --tall/--wide balance the marks' shapes. */
.tdo-cust-carousel .tdo-cust-carousel__row img {
  display: block;
  width: auto;
  height: 26px;
  filter: grayscale(1);
  opacity: 0.75;
}
.tdo-cust-carousel .tdo-cust-carousel__row img.tdo-cl--tall { height: 44px; }
.tdo-cust-carousel .tdo-cust-carousel__row img.tdo-cl--wide { height: 20px; }
.tdo-cust-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--tdo-space-2);
  margin-top: var(--tdo-space-5);
}
.tdo-cust-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tdo-border-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--tdo-dur-base) var(--tdo-ease-standard),
              transform var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-cust-carousel__dot--active {
  background: var(--tdo-accent);
  transform: scale(1.5);
}

/* =========================================================================
   TESTIMONIAL / QUOTE
   ========================================================================= */
.tdo-quote {
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-display-sm);
  font-weight: 500;
  line-height: var(--tdo-lh-snug);
  letter-spacing: -0.01em;
  max-width: 28ch;
  margin: 0 0 var(--tdo-space-7);
  text-wrap: balance;
}
.tdo-quote__attr {
  display: flex; align-items: center; gap: var(--tdo-space-4);
  font-family: var(--tdo-font-body);
  font-size: var(--tdo-fs-body);
}
.tdo-quote__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--tdo-bg-subtle);
  border: 1px solid var(--tdo-border);
}
.tdo-quote__name { font-weight: 700; }
.tdo-quote__role { color: var(--tdo-text-muted); font-size: var(--tdo-fs-body-sm); }

/* =========================================================================
   ACCORDION / TABS — minimal
   ========================================================================= */
.tdo-accordion { border-top: 1px solid var(--tdo-border); }
.tdo-accordion details {
  border-bottom: 1px solid var(--tdo-border);
}
.tdo-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--tdo-space-5) 0;
  font-family: var(--tdo-font-display);
  font-weight: 500;
  font-size: var(--tdo-fs-body-lg);
  color: var(--tdo-text);
}
.tdo-accordion summary::-webkit-details-marker { display: none; }
.tdo-accordion summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tdo-text-muted);
  transition: transform var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-accordion details[open] summary::after { content: "–"; }
.tdo-accordion__body {
  padding: 0 0 var(--tdo-space-5);
  color: var(--tdo-text-muted);
  max-width: 70ch;
}

/* =========================================================================
   PAGE HEADER + BREADCRUMB
   ========================================================================= */
.tdo-crumb {
  display: flex; align-items: center; gap: var(--tdo-space-2);
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-body-sm);
  color: var(--tdo-text-muted);
}
.tdo-crumb a:hover { color: var(--tdo-accent); }
.tdo-crumb__sep { opacity: 0.5; }

/* =========================================================================
   PRICING / COMPARISON
   ========================================================================= */
.tdo-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tdo-space-4);
}
@media (max-width: 900px) { .tdo-pricing { grid-template-columns: 1fr; } }
.tdo-price-card {
  background: var(--tdo-bg-elevated);
  border: 1px solid var(--tdo-border);
  border-radius: var(--tdo-radius-md);
  padding: var(--tdo-space-6);
  display: flex; flex-direction: column; gap: var(--tdo-space-4);
}
.tdo-price-card--featured {
  border-color: var(--tdo-text);
  border-width: var(--tdo-border-emphasis);
  position: relative;
}
.tdo-price-card--featured::before {
  content: "Most popular";
  position: absolute;
  top: -12px; left: var(--tdo-space-6);
  background: var(--tdo-accent);
  color: var(--tdo-graphite-2);
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-micro);
  font-weight: 600;
  letter-spacing: var(--tdo-tracking-wide);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--tdo-radius-pill);
}
.tdo-price-card__price {
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-display-md);
  font-weight: 700;
  line-height: 1;
}
.tdo-price-card__price small { font-size: var(--tdo-fs-body); font-weight: 400; color: var(--tdo-text-muted); }
.tdo-price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--tdo-space-2); }
.tdo-price-card li {
  display: flex; align-items: center; gap: var(--tdo-space-2);
  font-size: var(--tdo-fs-body-sm);
}
.tdo-price-card li::before {
  content: "";
  width: 14px; height: 14px;
  background: var(--tdo-accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7l3 3 7-7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7l3 3 7-7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

/* =========================================================================
   IMAGE PLACEHOLDER — striped, with monospace caption
   ========================================================================= */
.tdo-imgph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      var(--tdo-bg-subtle),
      var(--tdo-bg-subtle) 12px,
      var(--tdo-bg-elevated) 12px,
      var(--tdo-bg-elevated) 24px
    );
  border: 1px solid var(--tdo-border);
  border-radius: var(--tdo-radius-md);
  display: grid;
  place-items: center;
  color: var(--tdo-text-muted);
  font-family: var(--tdo-font-mono);
  font-size: var(--tdo-fs-body-sm);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tdo-imgph::after {
  content: attr(data-label);
  background: var(--tdo-bg);
  border: 1px solid var(--tdo-border);
  padding: 6px 10px;
  border-radius: var(--tdo-radius-sm);
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
.tdo-hide-sm { }
@media (max-width: 700px) { .tdo-hide-sm { display: none; } }
.tdo-divider { border: 0; border-top: 1px solid var(--tdo-border); margin: var(--tdo-space-7) 0; }

/* Reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
  .tdo-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--tdo-dur-reveal) var(--tdo-ease-standard),
                transform var(--tdo-dur-reveal) var(--tdo-ease-standard);
  }
  .tdo-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Copy-to-clipboard tooltip for mailto: links (assets/js/copy-email.js).
   Positioned in document coords by the script; centered above the link. */
.tdo-copytip {
	position: absolute;
	z-index: 1000;
	transform: translate(-50%, calc(-100% - 8px));
	padding: var(--tdo-space-1) var(--tdo-space-2);
	background: var(--tdo-graphite-2);
	color: var(--tdo-paper);
	font-family: var(--tdo-font-mono);
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	border-radius: var(--tdo-radius-sm);
	box-shadow: var(--tdo-shadow-md);
	pointer-events: none;
	opacity: 0;
	transition: opacity 120ms ease;
}
.tdo-copytip.is-visible {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.tdo-copytip { transition: none; }
}

/* HubSpot form containers (Contact, Book a Demo). The embed script loads
   async, so reserve roughly a form's height to keep the sections below from
   jumping when the iframe injects. */
.tdo-hsform { min-height: 560px; }

/* =========================================================================
   MEDIA LOADING SHIMMER
   media-shimmer.js marks photo containers while their image is in flight;
   the sweep reads as "loading" instead of an unfinished grey box. Neutral
   translucent greys work on both paper and dark bands. Class is removed on
   load, so the animation never runs behind a settled image.
   ========================================================================= */
.tdo-media-loading {
  background-image: linear-gradient(100deg,
    rgba(127, 127, 127, 0.10) 35%,
    rgba(127, 127, 127, 0.22) 50%,
    rgba(127, 127, 127, 0.10) 65%);
  background-size: 200% 100%;
  animation: tdo-shimmer 1.4s linear infinite;
}
@keyframes tdo-shimmer { to { background-position: -200% 0; } }
.tdo-media-loading img { opacity: 0; }
.tdo-media-loaded img { transition: opacity 0.35s ease; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tdo-media-loading { animation: none; }
  .tdo-media-loaded img { transition: none; }
}