/*
Theme Name: NotDigital Signal
Theme URI: https://notdigital.com
Author: NotDigital
Author URI: https://notdigital.com
Description: A block theme for NotDigital.com — cloud phone systems, business networks and cloud email for Southern California. Full site editing, a video hero, and a palette taken from Ethernet pair colours.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: notdigital-signal
Tags: full-site-editing, block-patterns, business, one-column, block-styles, wide-blocks
*/

/* ------------------------------------------------------------------ base */

:root {
  --nd-trace: rgba(157, 176, 196, 0.28);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
  The root blockGap puts a margin between every top-level block — header, main
  and footer included — which shows as a white bar under the sticky header and
  above the dark footer. Sections carry their own padding, so zero it here and
  let blockGap keep doing its job inside them.
*/
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* Same seam between the full-width sections stacked inside <main>. */
main.wp-block-group > .alignfull + .alignfull {
  margin-block-start: 0;
}

::selection {
  background: var(--wp--preset--color--pair-two);
  color: var(--wp--preset--color--ink);
}

/* Visible keyboard focus everywhere, not just on links. */
:where(a, button, input, textarea, select, summary, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--pair-two);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- header */

.nd-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
  Width-based, not height-based. An earlier version pinned the height here,
  which silently overrode the Site Logo block's resize handle — the handle sets
  width, and a fixed height wins. Desktop width now comes from the block's own
  attribute so the handle works; only the mobile step-down is enforced here.
*/
.nd-header .wp-block-site-logo,
.nd-header .wp-block-site-logo img {
  height: auto;
  max-width: 100%;
}

/* Footer logo is inline SVG, so it is sized here rather than by the image block. */
.nd-logo-link { display: inline-block; line-height: 0; }

.nd-logo-footer {
  width: 300px;
  height: auto;
  max-width: 100%;
  display: block;
  margin-bottom: 1rem;
}

/*
  !important is needed only here: the Site Logo block writes its desktop width
  as an inline style, which otherwise outranks this rule.
*/
@media (max-width: 781px) {
  .nd-header .wp-block-site-logo { width: 200px !important; }
  .nd-header .wp-block-site-logo img { width: 200px; }
  .nd-logo-footer { width: 200px; }
}

.nd-header .wp-block-navigation a {
  color: var(--wp--preset--color--ink);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.nd-header .wp-block-navigation a:hover,
.nd-header .wp-block-navigation .current-menu-item a {
  color: var(--wp--preset--color--ink);
  border-bottom-color: var(--wp--preset--color--pair-two);
  text-decoration: none;
}

/* ------------------------------------------------------- utility labels */

/* Small mono eyebrow used above section headings. */
.nd-label {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--steel);
}

.nd-label--on-dark { color: var(--wp--preset--color--haze); }

/* ---------------------------------------------- signature: patch panel */

/*
  A patch panel strip. The ports are the three things NotDigital actually
  installs, numbered the way a real panel is numbered, with a link light
  that pulses on the active one.
*/
.nd-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid rgba(157, 176, 196, 0.22);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(11, 18, 32, 0.55);
}

.nd-panel__port {
  flex: 1 1 200px;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  border-right: 1px solid rgba(157, 176, 196, 0.18);
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--haze);
  text-decoration: none;
  transition: background 0.18s ease;
}

.nd-panel__port:last-child { border-right: 0; }
.nd-panel__port:hover { background: rgba(157, 176, 196, 0.08); text-decoration: none; }

.nd-panel__num { color: rgba(157, 176, 196, 0.55); }
.nd-panel__name { color: #fff; }

.nd-panel__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--link-light);
  box-shadow: 0 0 8px var(--wp--preset--color--link-light);
  margin-left: auto;
  align-self: center;
  animation: nd-blink 2.6s ease-in-out infinite;
}

.nd-panel__port:nth-child(2) .nd-panel__led { animation-delay: 0.5s; }
.nd-panel__port:nth-child(3) .nd-panel__led { animation-delay: 1s; }

@keyframes nd-blink {
  0%, 62%, 100% { opacity: 1; }
  70%, 78%      { opacity: 0.25; }
}

/* ------------------------------------------------------------ hero video */

/*
  The video sits in a wp:html block behind the content rather than in a Cover
  block, so nothing here depends on core's Cover markup staying still.
*/
.nd-hero {
  position: relative;
  isolation: isolate;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/*
  The hero Group uses WordPress's constrained layout, whose generated rule
  (`.wp-container-... > *`) caps EVERY direct child at the content width. That
  silently squeezed the video layer to 760px and centred it. These two rules
  carry higher specificity than the generated one, so no !important is needed.

  Anything added as a direct child of .nd-hero gets the same treatment, so give
  new full-bleed layers the .nd-hero__media class or add them to this selector.
*/
.nd-hero > .nd-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  max-width: none;
  width: auto;
  margin: 0;
}

/* The patch panel should line up with the wide content above it, not the
   narrower default content width. */
.nd-hero > .nd-panel {
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-left: auto;
  margin-right: auto;
}

.nd-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  Weighted left rather than a flat dim: the headline sits in the darkest part
  and the trace stays visible on the right, where nothing has to be read.
*/
.nd-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 18, 32, 0.86) 0%,
    rgba(11, 18, 32, 0.62) 55%,
    rgba(11, 18, 32, 0.5) 100%
  );
}

.nd-hero__copy {
  margin-bottom: var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
  .nd-hero { min-height: auto; }
  .nd-hero__scrim { background: rgba(11, 18, 32, 0.78); }
}

.nd-hero__rule {
  width: 56px;
  height: 3px;
  background: var(--wp--preset--color--pair-two);
  border: 0;
  border-radius: 2px;
}

/* ------------------------------------------------------------- cards */

.nd-card {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  padding: 1.75rem;
  background: #fff;
  height: 100%;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.nd-card:hover {
  border-color: rgba(27, 84, 245, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(11, 18, 32, 0.45);
}

.nd-card--dark {
  background: var(--wp--preset--color--carbon);
  border-color: rgba(157, 176, 196, 0.18);
}

.nd-card__kicker {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--pair-one);
}

/* Checklist used on the 3CX pages. */
.nd-check ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.nd-check li {
  position: relative;
  padding-left: 1.75rem;
}

.nd-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--wp--preset--color--pair-two);
}

/* ---------------------------------------------------------------- stats */

.nd-stat__value {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--wp--preset--color--ink);
}

.nd-stat__label {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--steel);
}

/* -------------------------------------------------------------- footer */

.nd-footer a { color: var(--wp--preset--color--haze); }
.nd-footer a:hover { color: #fff; }

.nd-footer .wp-block-social-links {
  margin-top: 1.5rem;
  gap: 0.5rem;
}

.nd-footer .wp-block-social-links .wp-social-link {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.nd-footer .wp-block-social-links .wp-social-link:hover { background: rgba(255, 255, 255, 0.16); }
.nd-footer .wp-block-social-links .wp-social-link svg { fill: var(--wp--preset--color--haze); }

/* Phone numbers set large in the utility face. */
.nd-tel { font-size: 1.375rem; letter-spacing: -0.02em; }

.nd-bignum {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* --------------------------------------------------------- motion prefs */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .nd-card:hover { transform: none; }
}

/* ==================================================================
   Belt and braces, added in 1.2.0 after seeing the theme live.

   Every rule below is a plain declaration with a literal value. If a
   theme.json preset resolves, WordPress's own !important rule wins and
   these never apply. If a preset fails to resolve, that declaration is
   invalid and dropped, and these take over. Either way the page is right.
   ================================================================== */

:where(h1), .wp-block-heading.has-display-font-size   { font-size: clamp(2.875rem, 6vw, 6rem); }
.wp-block-heading.has-title-xl-font-size              { font-size: clamp(2.5rem, 5vw, 4.25rem); }
:where(h2), .wp-block-heading.has-title-l-font-size   { font-size: clamp(2rem, 3.6vw, 3rem); }
:where(h3), .wp-block-heading.has-title-m-font-size   { font-size: clamp(1.5rem, 2.4vw, 2rem); }
:where(h4), .wp-block-heading.has-title-s-font-size   { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

/* ---------------------------------------------------- hero alignment */

/*
  A constrained layout centres its children. The hero copy is meant to sit
  hard left against the wide column, so pull the inner content back.
*/
.nd-hero .wp-block-cover__inner-container > *,
.nd-hero > * {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.nd-hero .wp-block-group.alignwide > *,
.nd-hero .nd-hero__copy > * {
  margin-left: 0;
  margin-right: auto;
}

/*
  The patch panel was inheriting the 760px content width and wrapping its
  three ports onto two rows. Match it to the copy above it.
*/
.nd-hero .nd-panel {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 782px) {
  .nd-panel__port { flex: 1 1 0; white-space: nowrap; }
}

/* ------------------------------------------------------ link colours */

/* Header phone number was picking up the global link blue. */
.nd-header .nd-label a,
.nd-header .nd-label a:hover {
  color: var(--wp--preset--color--ink, #0B1220);
  text-decoration: none;
}

/* Same on the dark call-to-action band. */
.nd-cta a:not(.wp-block-button__link) { color: #fff; }
.nd-cta .nd-bignum a { color: #fff; }
.nd-cta a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--pair-two, #FF7A18); }

/* ---------------------------------------------------- footer tidy-up */

/* Nav lists in the footer are navigation, not prose — no bullets. */
.nd-footer ul:not(.wp-block-social-links) {
  list-style: none;
  padding-left: 0;
}

.nd-footer .wp-block-social-links .wp-social-link,
.nd-footer .wp-block-social-links .wp-social-link a {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--wp--preset--color--haze, #9DB0C4);
}

.nd-footer .wp-block-social-links .wp-social-link svg { fill: currentColor; }
.nd-footer .wp-block-social-links .wp-social-link:hover { background-color: rgba(255, 255, 255, 0.18); }

/* --------------------------------------------------------- hero size */

/* 86vh plus the panel was leaving a lot of dead air. */
.nd-hero { min-height: min(86vh, 820px); }

/* ==================================================================
   1.3.0 — interior page components
   ================================================================== */

/* ---------------------------------------------- signal path diagram */

.nd-flow { width: 100%; height: auto; display: block; }
.nd-flow text { font-family: var(--wp--preset--font-family--utility); }

/* ------------------------------------------------- rack elevation */

.nd-rack {
  border: 1px solid rgba(157, 176, 196, 0.22);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(11, 18, 32, 0.55);
}

.nd-rack__u {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(157, 176, 196, 0.14);
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.8125rem;
  color: var(--wp--preset--color--haze);
}

.nd-rack__u:last-child { border-bottom: 0; }
.nd-rack__u:hover { background: rgba(157, 176, 196, 0.06); }
.nd-rack__slot { color: rgba(157, 176, 196, 0.5); min-width: 2.5rem; }
.nd-rack__name { color: #fff; flex: 1; }
.nd-rack__note { color: rgba(157, 176, 196, 0.75); text-align: right; }

.nd-rack__leds { display: flex; gap: 4px; }
.nd-rack__leds i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wp--preset--color--link-light);
  box-shadow: 0 0 6px var(--wp--preset--color--link-light);
  animation: nd-blink 3.2s ease-in-out infinite;
}
.nd-rack__leds i:nth-child(2) { animation-delay: 0.4s; }
.nd-rack__leds i:nth-child(3) { animation-delay: 0.9s; background: var(--wp--preset--color--pair-two); box-shadow: 0 0 6px var(--wp--preset--color--pair-two); }

/* ------------------------------------------------------- timeline */

.nd-timeline { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); }

.nd-timeline__step {
  position: relative;
  padding: 2.5rem 1.25rem 0 0;
  border-top: 2px solid rgba(157, 176, 196, 0.2);
}

.nd-timeline__step::before {
  content: "";
  position: absolute;
  top: -7px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--pair-two);
}

.nd-timeline__step:first-child { border-top-color: var(--wp--preset--color--pair-two); }
.nd-timeline__when {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--pair-two);
}
.nd-timeline__what { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.125rem; margin: 0.5rem 0 0.4rem; }
.nd-timeline__detail { font-size: 0.9375rem; color: var(--wp--preset--color--steel); margin: 0; }
.nd-timeline--dark .nd-timeline__what { color: #fff; }
.nd-timeline--dark .nd-timeline__detail { color: var(--wp--preset--color--haze); }

@media (max-width: 781px) {
  .nd-timeline { grid-template-columns: 1fr; }
  .nd-timeline__step { padding: 1.5rem 0 2rem 1.5rem; border-top: 0; border-left: 2px solid rgba(157,176,196,0.2); }
  .nd-timeline__step::before { top: 1.35rem; left: -7px; }
}

/* ---------------------------------------------------- spec table */

.nd-spec { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.nd-spec th, .nd-spec td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.nd-spec thead th {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--steel); border-bottom-width: 2px;
}
.nd-spec tbody th { font-weight: 500; color: var(--wp--preset--color--ink); width: 34%; }
.nd-spec td { color: var(--wp--preset--color--steel); }
.nd-spec .yes { color: var(--wp--preset--color--ink); font-weight: 500; }
.nd-spec .yes::before { content: "■ "; color: var(--wp--preset--color--pair-two); }
.nd-spec tr:last-child th, .nd-spec tr:last-child td { border-bottom: 0; }
.nd-spec-wrap { overflow-x: auto; }

/* --------------------------------------------------- numbered steps */

.nd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nd-step { border-left: 2px solid var(--wp--preset--color--pair-two); padding-left: 1.25rem; }
.nd-step__n {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--wp--preset--color--pair-two);
}
.nd-step h3 { font-size: 1.25rem; margin: 0.5rem 0 0.4rem; }
.nd-step p { margin: 0; color: var(--wp--preset--color--steel); font-size: 0.9375rem; }
@media (max-width: 781px) { .nd-steps { grid-template-columns: 1fr; } }

/* -------------------------------------------------- dial / contact */

.nd-dial {
  font-family: var(--wp--preset--font-family--utility);
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}
.nd-dial a { color: #fff; text-decoration: none; }
.nd-dial a:hover { color: var(--wp--preset--color--pair-two); text-decoration: none; }

.nd-form-slot {
  border: 2px dashed rgba(74, 90, 110, 0.4);
  border-radius: 12px;
  padding: 2.5rem;
  background: var(--wp--preset--color--paper);
  text-align: center;
}
.nd-form-slot p { color: var(--wp--preset--color--steel); margin: 0.5rem 0 0; font-size: 0.9375rem; }
.nd-form-slot code {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.8125rem; background: #fff; padding: 0.15rem 0.4rem; border-radius: 4px;
  border: 1px solid var(--wp--preset--color--line);
}

/* ------------------------------------------------------ symptom list */

.nd-symptom { display: grid; gap: 0; }
.nd-symptom__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
.nd-symptom__row:last-child { border-bottom: 0; }
.nd-symptom__q { font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.nd-symptom__a { color: var(--wp--preset--color--steel); font-size: 0.9375rem; margin: 0; }
@media (max-width: 781px) { .nd-symptom__row { grid-template-columns: 1fr; gap: 0.4rem; } }

/* ==================================================================
   1.3.1 — full-width page template

   post-content is a layout container in its own right. If it inherits a
   width cap from the template's main group, every alignfull section inside
   it is trapped at that width. These rules make the escape hatch explicit
   so the page works even if the template markup is edited or reset.
   ================================================================== */

/*
  main is a top-level full-width block, so WordPress gives it the root padding.
  post-content then has to be pulled back out by exactly that much to reach the
  viewport edges. Version 1.3.1 set margin-left/right to 0 here, which outranked
  WordPress's own negative-margin rule and left a strip of page background down
  both sides of every dark section. Negate the root padding explicitly instead.
*/
main.wp-block-group.alignfull > .wp-block-post-content,
main.wp-block-group.alignfull > .entry-content {
  max-width: none;
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/* Sections inside the post content still need to reach the viewport edge. */
.wp-block-post-content > .alignfull,
.entry-content > .alignfull {
  max-width: none;
  width: auto;
}

/*
  And the seam between two stacked full-width sections. The root blockGap was
  already zeroed for direct children of main, but these sections sit one level
  deeper, inside post-content. Scoped to alignfull siblings so ordinary
  paragraph spacing on prose pages is untouched.
*/
.wp-block-post-content > .alignfull + .alignfull,
.entry-content > .alignfull + .alignfull {
  margin-block-start: 0;
}

/* Long figures were breaking across lines in the narrow column. */
.nd-stat__value { white-space: nowrap; }

/* ==================================================================
   1.5.0 — 3CX certification block

   3CX's marketing guidelines say the logo must not be altered and that you
   must not add other graphics or your own text to it. The earlier version
   wrapped the seal and supporting copy in one bordered pill, which reads as a
   modified lockup. Here the seal stands alone with clear space and the copy
   sits beside it as separate page content.

   It also sits on a light section so the near-black seal needs no plate behind
   it — another thing that could be read as altering the mark.
   ================================================================== */

.nd-cert {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  flex-wrap: wrap;
}

/* Clear space around the mark, per the guidelines. Never scale one axis. */
.nd-cert__seal {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  display: block;
  margin: 0.75rem;
}

.nd-cert__body { flex: 1 1 320px; min-width: 0; }

.nd-cert__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.nd-cert__body p {
  margin: 0;
  color: var(--wp--preset--color--steel);
  font-size: 0.9375rem;
}

.nd-cert__body .nd-cert__cta { margin-top: 1.25rem; }

@media (max-width: 600px) {
  .nd-cert__seal { width: 84px; height: 84px; }
}

/* ---------------------------------------------------- referral trial band */

.nd-trial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  flex-wrap: wrap;
}
.nd-trial__copy { flex: 1 1 420px; min-width: 0; }

/* ==================================================================
   1.6.0 — 3CX co-branding

   Their logo, used as supplied: never restretched, never redrawn, never
   with text or graphics attached to it. Width is set and height stays auto
   so a single axis can't be scaled by accident.

   3CX blue (#0596D5) appears only inside the vendor sections, as a hairline
   and a label. It's a guest colour here, not a second brand colour — the
   NotDigital palette still runs the page.
   ================================================================== */

.nd-3cx-mark {
  width: 108px;
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
}

.nd-3cx-mark--sm { width: 84px; }

/* Vendor credibility band */
.nd-vendor {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.nd-vendor__intro { flex: 1 1 300px; min-width: 0; }
.nd-vendor__figures {
  flex: 2 1 520px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.nd-vendor__fig b {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.nd-vendor__fig span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--haze);
}

/* The one place 3CX blue is allowed to appear. */
.nd-vendor__rule {
  width: 48px;
  height: 3px;
  background: #0596D5;
  border: 0;
  border-radius: 2px;
  margin: 0 0 1.25rem;
}

@media (max-width: 781px) {
  .nd-vendor__figures { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
}

/* "Did it first" list */
.nd-firsts { display: grid; gap: 0; }
.nd-firsts__row {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(157, 176, 196, 0.16);
}
.nd-firsts__row:last-child { border-bottom: 0; }
.nd-firsts__yr {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #0596D5;
  flex: 0 0 5.5rem;
}
.nd-firsts__what { color: #fff; font-size: 0.9375rem; }

@media (max-width: 600px) {
  .nd-firsts__row { flex-direction: column; gap: 0.25rem; }
}