/* ============================================================================
   Legacy → design-system migration layer
   ----------------------------------------------------------------------------
   Maps the page-specific component classes onto the shared tokens WITHOUT
   touching 25 template files. Each legacy selector was classified by how it is
   actually used in markup, not by its name:

     .crm-btn / .am-btn / .fm-btn / .amar-btn / .st-ai-btn-* / .st-shero-btn
         -> real <a>/<button> CTAs   -> .st-btn geometry
     .ehc-*-pill / .st-ai-eyebrow / .st-ar-eyebrow
         -> static <span> above a heading -> .st-eyebrow, NOT a button.
            These were the pale-red outlined pills that read as broken CTAs.
     .*-tag / .*-chip / .ph-chip / .crm-chip
         -> taxonomy / metadata      -> .st-chip
     .ehc-show-badge / .ehc-cyb-demo-badge / .st-shero-badge
         -> state                    -> .st-status

   Container classes that merely matched on substring (.pillar, .pillars-row,
   .*-tags, .*-chips, .*-tagline) are deliberately NOT mapped — they are layout
   wrappers, not components.

   Loaded after style.css and the page-level <style> blocks are inline, so the
   few properties that must win carry !important. Everything else inherits.
   ========================================================================== */

/* ---------------------------------------------------------------- BUTTONS */
.crm-btn, .am-btn, .fm-btn, .amar-btn,
.st-ai-btn-primary, .st-ai-btn-ghost,
.st-shero-btn, .st-shero-btn-ghost,
.crm-btn-ghost, .am-btn-ghost, .fm-btn-ghost, .amar-btn-ghost,
.ehc-chat-cta, .ehc-chat-cta-ghost,
.ehc-rd-submit, .st-quote-submit, .st-quote-btn,
.ehc-owms-btn, .ehc-owms-btn-ghost, .ehc-owms-btn-outline,
.btn, .ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-2);
  min-height: var(--st-control-standard);
  padding-inline: var(--st-space-5);
  border-radius: var(--st-radius-md) !important;   /* was 999px on most */
  font-size: var(--st-ui-md);
  font-weight: var(--st-fw-semibold) !important;
  line-height: 1.2;
  letter-spacing: 0 !important;                    /* drop decorative tracking */
  text-transform: none !important;                 /* drop ALL CAPS */
  text-decoration: none;
  transition: background-color var(--st-ease), border-color var(--st-ease),
              color var(--st-ease), transform var(--st-ease);
}

/* Text-only tertiary actions keep their inline rhythm. */
.crm-btn-text, .am-btn-text, .fm-btn-text, .amar-btn-text {
  min-height: auto;
  padding-inline: 0;
  border-radius: 0 !important;
  font-weight: var(--st-fw-semibold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Icons inside any legacy button stop sizing themselves. */
.crm-btn i, .am-btn i, .fm-btn i, .amar-btn i, .btn i, .ph-btn i,
.st-ai-btn-primary i, .st-shero-btn i,
.crm-btn svg, .am-btn svg, .fm-btn svg, .amar-btn svg, .btn svg, .ph-btn svg,
.crm-btn .lucide, .am-btn .lucide, .fm-btn .lucide, .amar-btn .lucide,
.btn .lucide, .ph-btn .lucide {
  inline-size: var(--st-icon-md) !important;
  block-size: var(--st-icon-md) !important;
  flex: 0 0 auto;
}

/* Accessible focus for every legacy control. */
.crm-btn:focus-visible, .am-btn:focus-visible, .fm-btn:focus-visible,
.amar-btn:focus-visible, .btn:focus-visible, .ph-btn:focus-visible,
.st-ai-btn-primary:focus-visible, .st-shero-btn:focus-visible,
.ehc-rd-submit:focus-visible, .st-quote-submit:focus-visible,
.crm-btn-ghost:focus-visible, .am-btn-ghost:focus-visible,
.fm-btn-ghost:focus-visible, .amar-btn-ghost:focus-visible {
  outline: 2px solid var(--secondary, #002f6c);
  outline-offset: 2px;
}

/* Ghost variants become the neutral control instead of a pale brand echo. */
.crm-btn-ghost, .am-btn-ghost, .fm-btn-ghost, .amar-btn-ghost,
.st-ai-btn-ghost, .btn-outline, .btn-outline-primary {
  background: #fff !important;
  border: 1px solid var(--st-border-strong) !important;
  color: var(--st-ink) !important;
}
.crm-btn-ghost:hover, .am-btn-ghost:hover, .fm-btn-ghost:hover,
.amar-btn-ghost:hover, .st-ai-btn-ghost:hover,
.btn-outline:hover, .btn-outline-primary:hover {
  background: var(--st-surface-quiet) !important;
  border-color: #b6bdca !important;
  color: var(--st-ink) !important;
}

/* Ghost buttons sitting on dark hero photography need the light treatment. */
.crm-hero .crm-btn-ghost, .am-hero .am-btn-ghost, .page-header .ph-btn-ghost,
.st-shero-btn-ghost {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #fff !important;
}
.crm-hero .crm-btn-ghost:hover, .am-hero .am-btn-ghost:hover,
.page-header .ph-btn-ghost:hover, .st-shero-btn-ghost:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------- EYEBROWS */
/* The flagged pattern: pale-red fill + hairline red outline + 999px pill +
   ALL CAPS + wide tracking. Rebuilt as quiet typography with a hairline rule. */
.ehc-rd-pill, .ehc-owms-pill, .ehc-cyb-pill, .ehc-mil-pill, .ehc-def-pill,
.ehc-ws-pill, .ehc-wst-pill, .ehc-seccomp-pill, .ehc-osx-pill, .ehc-sira-pill,
.ehc-show-pill, .fm-pill, .st-ai-eyebrow, .st-ar-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: var(--st-space-2);
  margin-block-end: var(--st-space-3);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--primary, #E22222) !important;
  font-size: var(--st-ui-sm) !important;
  font-weight: var(--st-fw-semibold) !important;
  line-height: 1.3;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.ehc-rd-pill i, .ehc-owms-pill i, .ehc-cyb-pill i, .ehc-mil-pill i,
.ehc-def-pill i, .ehc-ws-pill i, .ehc-wst-pill i, .ehc-seccomp-pill i,
.ehc-osx-pill i, .ehc-sira-pill i, .ehc-show-pill i, .fm-pill i,
.st-ai-eyebrow i, .st-ar-eyebrow i,
.ehc-rd-pill svg, .ehc-owms-pill svg, .ehc-cyb-pill svg, .ehc-osx-pill svg,
.st-ai-eyebrow svg, .st-ar-eyebrow svg {
  inline-size: var(--st-icon-sm) !important;
  block-size: var(--st-icon-sm) !important;
  flex: 0 0 auto;
}
.ehc-rd-pill::after, .ehc-owms-pill::after, .ehc-cyb-pill::after,
.ehc-mil-pill::after, .ehc-def-pill::after, .ehc-ws-pill::after,
.ehc-wst-pill::after, .ehc-seccomp-pill::after, .ehc-osx-pill::after,
.ehc-sira-pill::after, .fm-pill::after, .st-ai-eyebrow::after,
.st-ar-eyebrow::after {
  content: "";
  inline-size: 22px;
  block-size: 1px;
  background: currentColor;
  opacity: .4;
  margin-inline-start: var(--st-space-1);
}
/* Eyebrows over dark hero art switch to the accent so they stay legible. */
.crm-hero .st-ai-eyebrow, .page-header .st-ai-eyebrow,
.ehc-osx-hero .ehc-osx-pill, .st-ar-hero .st-ar-eyebrow, .ehc-show-pill {
  color: var(--accent, #e8a317) !important;
}

/* ------------------------------------------------------------------ CHIPS */
.crm-chip, .am-chip, .fm-chip, .amar-chip, .ph-chip, .ehc-mz-chip,
.ehc-osx-int-chip, .st-tag, .am-tag, .fm-tag, .amar-tag,
.ehc-mil-tag, .ehc-ws-mini-tag, .ehc-cyb-mini-tag, .ehc-def-mini-tag,
.ehc-osx-tile-tag, .ehc-owms-variant-tag, .ehc-def-variant-tag,
.ehc-sira-doc-tag {
  display: inline-flex !important;
  align-items: center;
  gap: var(--st-space-2);
  min-height: 28px;
  padding-block: 4px !important;
  padding-inline: var(--st-space-3) !important;
  border-radius: var(--st-radius-pill) !important;
  font-size: var(--st-ui-xs) !important;
  font-weight: var(--st-fw-medium) !important;
  line-height: 1.35;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}
.crm-chip i, .am-chip i, .fm-chip i, .amar-chip i, .ph-chip i,
.crm-chip svg, .am-chip svg, .fm-chip svg, .ph-chip svg {
  inline-size: 14px !important;
  block-size: 14px !important;
  opacity: .75;
}

/* --------------------------------------------------------------- STATUSES */
.ehc-show-badge, .ehc-cyb-demo-badge, .st-shero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding-block: 3px !important;
  padding-inline: var(--st-space-2) !important;
  border-radius: var(--st-radius-sm) !important;
  font-size: var(--st-ui-xs) !important;
  font-weight: var(--st-fw-semibold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* -------------------------------------------------------- RTL corrections */
[dir="rtl"] .st-btn .lucide-arrow-right,
[dir="rtl"] .btn .lucide-arrow-right,
[dir="rtl"] .crm-btn .lucide-arrow-right,
[dir="rtl"] .ph-btn .lucide-arrow-right,
[dir="rtl"] .st-btn .lucide-arrow-left,
[dir="rtl"] .btn .lucide-arrow-left,
[dir="rtl"] .crm-btn .lucide-arrow-left,
[dir="rtl"] .ph-btn .lucide-arrow-left,
[dir="rtl"] .st-btn .lucide-chevron-right,
[dir="rtl"] .btn .lucide-chevron-right {
  transform: scaleX(-1);
}


/* --- Selectable contact chips on the appointment form ------------------- */
/* Pill geometry is right here (a selectable filter chip), but the typography
   was shouting: 700 weight with tracking. Quieten it to the chip token. */
.ehc-rd-radio {
  min-height: 34px;
  padding-block: 5px !important;
  padding-inline: var(--st-space-3) !important;
  font-size: var(--st-ui-xs) !important;
  font-weight: var(--st-fw-medium) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ehc-rd-radio span { display: inline-flex; align-items: center; gap: 6px; }
.ehc-rd-radio i, .ehc-rd-radio svg, .ehc-rd-radio .lucide {
  inline-size: 14px !important;
  block-size: 14px !important;
  flex: 0 0 auto;
  opacity: .8;
}
.ehc-rd-radio:has(input:checked) span { font-weight: var(--st-fw-semibold) !important; }
.ehc-rd-radio:focus-within { outline: 2px solid var(--secondary, #002f6c); outline-offset: 2px; }

/* Navigation phone CTA joins the button scale. */
.nav-cta-phone {
  border-radius: var(--st-radius-md) !important;
  font-weight: var(--st-fw-semibold) !important;
  letter-spacing: 0 !important;
}

/* Chip ink is neutral by default; only the selected state carries colour.
   Something upstream was forcing brand red onto every label and icon. */
.ehc-rd-radio, .ehc-rd-radio span, .ehc-rd-radio i, .ehc-rd-radio svg {
  color: var(--st-ink-muted) !important;
}
.ehc-rd-radio:has(input:checked),
.ehc-rd-radio:has(input:checked) span,
.ehc-rd-radio:has(input:checked) i,
.ehc-rd-radio:has(input:checked) svg {
  color: #0B5F33 !important;
}


/* --- Octopus WMS controls join the scale ------------------------------- */
/* This page is the visual reference for the upcoming hero work, so its buttons
   must sit on the same 8px radius and 48px height as everything else. */
.ehc-owms-btn, .ehc-owms-btn-ghost, .ehc-owms-btn-outline {
  min-height: var(--st-control-large) !important;
  max-height: var(--st-control-large) !important;
  padding-block: 0 !important;
  padding-inline: var(--st-space-6) !important;
}
.ehc-owms-btn-outline, .ehc-owms-btn-ghost {
  background: #fff !important;
  border: 1px solid var(--st-border-strong) !important;
  color: var(--st-ink) !important;
}
.ehc-owms-hero .ehc-owms-btn-ghost, .ehc-owms-hero .ehc-owms-btn-outline {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #fff !important;
}

/* --- Text buttons are type, not boxes ---------------------------------- */
/* They were inheriting 13px block padding and rendering 48px tall, which made a
   tertiary link look like a third primary button. */
.crm-btn-text, .am-btn-text, .fm-btn-text, .amar-btn-text {
  padding-block: 0 !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
}

/* --- Floating contact rail --------------------------------------------- */
/* Circular by design; keep 50% but hold a consistent 52px target. */
.ehc-rail-btn {
  inline-size: 52px !important;
  block-size: 52px !important;
  border-radius: 50% !important;
}
.ehc-rail-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Section eyebrow ("Get To Know About") — was uppercase 700 with 2px tracking. */
.section-title .label,
.about-preview-content .label,
.contact-left .label {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2);
  text-transform: none !important;
  font-size: var(--st-ui-sm) !important;
  font-weight: var(--st-fw-semibold) !important;
  letter-spacing: .01em !important;
  color: var(--primary, #E22222);
  margin-bottom: var(--st-space-3);
}
.section-title .label::after {
  content: "";
  inline-size: 22px; block-size: 1px;
  background: currentColor; opacity: .4;
  margin-inline-start: var(--st-space-1);
}

/* ============================================================================
   Orphan card rows
   ----------------------------------------------------------------------------
   The card grids use repeat(auto-fit, minmax(...,1fr)), so when the last row is
   not full its cards sit hard against the start edge and the block reads as
   unfinished. Switching to centred flex wrapping keeps full rows identical and
   centres the remainder, which is what the eye expects.

   flex-basis mirrors each family's original minmax floor; max-width stops two
   orphans from stretching into two half-width slabs.
   ========================================================================== */
.crm-grid, .am-grid, .amar-grid, .fm-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.crm-grid > *, .am-grid > *, .amar-grid > *, .fm-grid > * { min-width: 0; }

.crm-g2 > *, .am-g2 > *, .amar-g2 > *, .fm-g2 > * { flex: 1 1 320px; max-width: 480px; }
.crm-g3 > *, .am-g3 > *, .amar-g3 > *, .fm-g3 > * { flex: 1 1 250px; max-width: 340px; }
.crm-g4 > *, .am-g4 > *, .amar-g4 > *, .fm-g4 > * { flex: 1 1 210px; max-width: 290px; }

@media (max-width: 640px) {
  .crm-grid > *, .am-grid > *, .amar-grid > *, .fm-grid > * { flex: 1 1 100%; max-width: none; }
}