/* =============================================================
   Leveredge Media - base.css
   Loaded on every page. Scope: tokens, reset, typography,
   navigation, footer, buttons, utility classes, keyframe
   animations, and scroll-reveal helpers.
   v1.0.0
============================================================= */


/* ── DESIGN TOKENS ─────────────────────────────────────────── */

:root {
  /* Base backgrounds */
  --ink:            #080B12;
  --ink-2:          #0A0D16;
  --ink-3:          #0D1120;

  /* Card surfaces */
  --card:           #111520;
  --card-2:         #171C2A;
  --card-3:         #1C2133;

  /* Orange palette */
  --orange:         #FF5F1F;
  --orange-mid:     #E8541A;
  --orange-dim:     #CC4A17;
  --orange-soft:    rgba(255, 95, 31, 0.10);
  --orange-soft-2:  rgba(255, 95, 31, 0.06);
  --orange-border:  rgba(255, 95, 31, 0.22);
  --orange-glow:    rgba(255, 95, 31, 0.35);

  /* Text */
  --white:          #F0EEE8;
  --white-2:        #C8C6C0;
  --muted:          #7A7A8A;
  --muted-2:        #464658;
  --muted-3:        #282838;

  /* Borders */
  --border:         rgba(255, 255, 255, 0.06);
  --border-2:       rgba(255, 255, 255, 0.11);
  --border-3:       rgba(255, 255, 255, 0.035);

  /* Status - green */
  --green:          #22c55e;
  --green-2:        #16a34a;
  --green-soft:     rgba(34, 197, 94, 0.08);
  --green-border:   rgba(34, 197, 94, 0.22);

  /* Status - blue */
  --blue:           #3B82F6;
  --blue-soft:      rgba(59, 130, 246, 0.08);
  --blue-border:    rgba(59, 130, 246, 0.22);

  /* Status - red (validation / warning) */
  --red:            #ef4444;
  --red-soft:       rgba(239, 68, 68, 0.08);
  --red-border:     rgba(239, 68, 68, 0.22);

  /* Typography */
  --font-display:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --max:            1160px;
  --r:              12px;
  --r-lg:           18px;
  --r-xl:           24px;

  /* Fluid spacing - use these instead of hardcoded px values */
  --pg:             clamp(16px, 3.5vw, 40px);   /* horizontal padding, scales 16px→40px */
  --section-pad:    clamp(56px, 8vw,  96px);     /* vertical section padding */
}


/* ── RESET ─────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Defensive reset: WordPress core Navigation and Page List blocks
 * render as bare unstyled <a> tags if their block CSS is not loaded
 * in the right context. These blocks do not belong inside editable
 * body content (legal pages, about page, post content) - only the
 * theme's own header/footer should control site navigation. If one
 * of these blocks is accidentally left in a page's content, this
 * hides it instead of letting it render as a raw, unstyled link list.
 */
.legal-content .wp-block-navigation,
.legal-content .wp-block-page-list,
.legal-content .wp-block-pages-list,
.article-body .wp-block-navigation,
.article-body .wp-block-page-list,
.article-body .wp-block-pages-list {
  display: none !important;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: var(--font-body);
}

/* Removes default WP styles that could conflict */
/* Reset Gutenberg block image margin only on non-article contexts.
   Article body alignment is handled per-template in single.css.   */
:not(.article-body) > .wp-block-image { margin: 0; }


/* ── LAYOUT UTILITIES ───────────────────────────────────────── */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.accent { color: var(--orange); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ── TYPOGRAPHY COMPONENTS ──────────────────────────────────── */

.overline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.overline::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--white);
}

.section-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 60px;
}
.section-header .section-title {
  font-size: clamp(30px, 4.5vw, 50px);
  margin-bottom: 16px;
}
.section-header p {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.68;
}


/* ── KEYFRAME ANIMATIONS ────────────────────────────────────── */

@keyframes float-a {
  0%,  100% { transform: translate(0, 0) rotate(0deg); }
  25%        { transform: translate(22px, -18px) rotate(45deg); }
  50%        { transform: translate(-12px, -30px) rotate(90deg); }
  75%        { transform: translate(-28px, 10px) rotate(135deg); }
}

@keyframes float-b {
  0%,  100% { transform: translate(0, 0) scale(1); }
  33%        { transform: translate(-35px, -25px) scale(1.08); }
  66%        { transform: translate(18px, 20px) scale(0.95); }
}

@keyframes float-c {
  0%,  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  20%        { transform: translate(30px, 15px) rotate(72deg) scale(1.1); }
  40%        { transform: translate(-15px, 30px) rotate(144deg) scale(0.92); }
  60%        { transform: translate(-30px, -10px) rotate(216deg) scale(1.05); }
  80%        { transform: translate(10px, -28px) rotate(288deg) scale(0.98); }
}

@keyframes float-d {
  0%,  100% { transform: translateY(0) rotate(0deg); }
  50%        { transform: translateY(-40px) rotate(180deg); }
}

@keyframes drift {
  0%,  100% { transform: translate(0, 0); }
  50%        { transform: translate(-60px, -40px); }
}

@keyframes breathe {
  0%,  100% { opacity: 0.22; transform: scale(1); }
  50%        { opacity: 0.45; transform: scale(1.08); }
}

@keyframes pulse-dot {
  0%,  100% { opacity: 1; transform: scale(1); }
  50%        { opacity: 0.4; transform: scale(0.85); }
}

@keyframes spin-slow         { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes spin-slow-reverse { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes blink-cursor {
  0%,  100% { opacity: 1; }
  50%        { opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glow-pulse {
  0%,  100% { box-shadow: 0 0 20px rgba(255, 95, 31, 0.15); }
  50%        { box-shadow: 0 0 44px rgba(255, 95, 31, 0.38); }
}

@keyframes scanner {
  0%           { transform: translateY(0); opacity: 0; }
  10%          { opacity: 1; }
  90%          { opacity: 1; }
  100%         { transform: translateY(160px); opacity: 0; }
}

@keyframes build-block {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ── REDUCED MOTION ─────────────────────────────────────────── */

@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;
  }
}


/* ── BUTTONS ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-mid);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(255, 95, 31, 0.30);
}
.btn-primary:active { transform: none; box-shadow: none; }

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--border-2);
}
.btn-outline:hover { background: var(--card-2); }

.btn-lg {
  padding: 17px 34px;
  font-size: 16px;
  border-radius: 11px;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn-arrow::after {
  content: '';
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.btn-arrow:hover::after { transform: translateX(4px); }

.btn-success {
  background: #14532d !important;
  border-color: #14532d !important;
  pointer-events: none;
  cursor: default;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


/* ── NAVIGATION ─────────────────────────────────────────────── */

#lm-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  padding: 22px 0;
  transition: background 0.3s, padding 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}

#lm-header.scrolled {
  background: rgba(8, 11, 18, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 15px 0;
  border-bottom-color: var(--border);
}

/*
 * backdrop-filter on a fixed-position header triggers a known
 * Android Chrome GPU compositing bug on certain devices - the
 * blur layer corrupts into visual static/noise during scroll.
 * Disabling it below 1024px removes the bug entirely. The solid
 * 0.97 opacity background looks effectively identical to the
 * blurred version, so there is no visible quality loss.
 */
@media (max-width: 1024px) {
  #lm-header.scrolled {
    background: rgba(8, 11, 18, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--white);
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.logo:hover { opacity: 0.85; }
.logo span  { color: var(--orange); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.primary-nav a {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.primary-nav a:hover  { color: var(--white); background: var(--card-2); }
.primary-nav a.active { color: var(--white); }

.header-actions { flex-shrink: 0; }

/* Burger button */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
  cursor: pointer;
  background: none;
  border: none;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* When mobile nav is open, burger transforms into an X */
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── MOBILE NAV OVERLAY ─────────────────────────────────────── */

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  padding: 9px 26px;
  transition: color 0.18s;
}
.mobile-nav a:hover { color: var(--orange); }

.mobile-nav .btn {
  margin-top: 18px;
  font-size: 17px;
  padding: 17px 38px;
}

.mobile-nav-close {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.18s;
}
.mobile-nav-close:hover { background: var(--card-2); }


/* ── MARQUEE STRIP ──────────────────────────────────────────── */

.lm-marquee {
  background: var(--orange);
  padding: 12px 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 0 30px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.marquee-sep {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── PROOF BAR ──────────────────────────────────────────────── */

.proof-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 15px 24px;
}

.proof-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.proof-icon {
  width: 17px;
  height: 17px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.proof-icon::after {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--orange);
  border-radius: 50%;
}


/* ── FOOTER ─────────────────────────────────────────────────── */

#lm-footer {
  background: var(--ink-3);
  border-top: 1px solid var(--border);
  padding: 76px 24px 34px;
  padding-bottom: max(34px, env(safe-area-inset-bottom, 34px));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 52px;
  max-width: var(--max);
  margin: 0 auto 60px;
}

.footer-brand {}

.footer-logo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--white);
  display: block;
  margin-bottom: 15px;
  transition: opacity 0.2s;
}
.footer-logo:hover { opacity: 0.85; }
.footer-logo span  { color: var(--orange); }

.footer-brand p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.68;
  max-width: 270px;
  margin-bottom: 26px;
}

.footer-socials {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.social-btn {
  width: 36px;
  height: 36px;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.social-btn:hover {
  background: var(--orange-soft);
  border-color: var(--orange-border);
}
.social-btn svg {
  width: 15px;
  height: 15px;
  fill: var(--muted);
  transition: fill 0.2s;
}
.social-btn:hover svg { fill: var(--orange); }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-nav a {
  font-size: 15px;
  color: var(--muted);
  transition: color 0.2s;
  line-height: 1.4;
}
.footer-nav a:hover       { color: var(--white); }
.footer-nav-orange        { color: var(--orange) !important; }
.footer-nav-orange:hover  { opacity: 0.8; }

.footer-divider {
  max-width: var(--max);
  margin: 0 auto 26px;
  height: 1px;
  background: var(--border);
}

.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom p { font-size: 14px; color: var(--muted-2); }

.footer-legal {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 14px;
  color: var(--muted-2);
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--muted); }


/* ── BREADCRUMB ─────────────────────────────────────────────── */

/*
 * Used on about, contact, legal, and single post templates.
 * Defined here once so every template that loads base.css gets it.
 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--muted-2);
}
.breadcrumb a { color: var(--muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb > span { color: var(--muted-2); }


/* ── FAQ ACCORDION (shared component) ──────────────────────── */

/*
 * The list container layout (.faq-list, .contact-faq-grid, etc.)
 * lives in each page's own CSS file. These styles handle the
 * accordion behavior shared across homepage and contact page.
 */

.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color 0.28s;
}
.faq-item.open { border-color: var(--orange-border); }

.faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--white);
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1.4;
}

.faq-toggle {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    background: var(--card-2);
    border: 1px solid var(--border-2);
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}
.faq-toggle::before,
.faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    background: var(--muted);
    border-radius: 2px;
    transition: transform 0.28s, opacity 0.28s, background 0.2s;
}
.faq-toggle::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-toggle::after  { width: 1.5px; height: 11px; transform: translate(-50%, -50%); }

.faq-item.open .faq-toggle {
    background: var(--orange-soft);
    border-color: var(--orange-border);
}
.faq-item.open .faq-toggle::after  { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item.open .faq-toggle::before { background: var(--orange); }

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
}
.faq-item.open .faq-body { max-height: 700px; }

.faq-body-inner {
    padding: 0 22px 20px;
    font-size: 16px;
    color: var(--muted);
    line-height: 1.72;
}


/* ── HONEYPOT ────────────────────────────────────────────────── */

.lm-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


/* ── SCROLL REVEAL ──────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.58s ease, transform 0.58s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-children.in-view > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.00s; }
.stagger-children.in-view > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.09s; }
.stagger-children.in-view > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.18s; }
.stagger-children.in-view > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.27s; }
.stagger-children.in-view > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.36s; }
.stagger-children.in-view > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.45s; }


/* ── SHARED CARD PATTERN ────────────────────────────────────── */

/*
 * Used across multiple page templates. Defined here once so page
 * CSS files only need overrides.
 */

.lm-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.28s, transform 0.28s;
}
.lm-card:hover {
  border-color: var(--orange-border);
  transform: translateY(-3px);
}

.lm-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lm-icon-wrap svg { width: 22px; height: 22px; }

/* Shared check mark list item pattern */
.lm-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lm-check-list li {
  font-size: 15px;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}
.lm-check-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' stroke='%23FF5F1F' stroke-opacity='.3'/%3E%3Cpath d='M5 8l2.3 2.3L11 5' stroke='%23FF5F1F' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Shared comparison table pattern */
.compare-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ── GRID OVERFLOW PREVENTION ───────────────────────────────────
   CSS Grid children default to min-width: auto - they refuse to
   compress below their content's natural width. This forces every
   tracked grid cell across the theme to respect its fr allocation.
   Without this, any wide child (text, image, nested grid) expands
   the column and clips adjacent content on narrow screens.
============================================================= */
.container > *,
.hero-layout > *,
.diff-layout > *,
.problem-grid > *,
.services-grid > *,
.process-grid > *,
.packages-grid > *,
.packages-grid-additional > *,
.results-grid > *,
.service-section-inner > *,
.service-card-inner > *,
.service-card-inner-crm > *,
.contact-hero-inner > *,
.contact-layout > *,
.contact-faq-grid > *,
.contact-sidebar > *,
.article-layout > *,
.footer-grid > *,
.story-layout > *,
.mission-layout > *,
.why-layout > *,
.values-grid > *,
.approach-grid > *,
.markets-grid > *,
.hero-stat-strip > *,
.related-grid > *,
.faq-inner > *,
.hs-grid > * { min-width: 0; }

.compare-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: var(--card-2);
  border-bottom: 1px solid var(--border-2);
}
.compare-header div {
  padding: 13px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-right: 1px solid var(--border);
}
.compare-header div:last-child { border-right: none; color: var(--orange); }
.compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  transition: background 0.18s;
}
.compare-row:last-child { border-bottom: none; }
.compare-row:hover { background: var(--card-2); }
.compare-cell {
  padding: 12px 18px;
  font-size: 14px;
  color: var(--muted);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
}
.compare-cell:last-child { border-right: none; color: var(--white); }
.compare-cell:first-child { color: var(--muted-2); font-size: 13px; }

.chk-y {
  width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' stroke='%23FF5F1F' stroke-opacity='.3'/%3E%3Cpath d='M5 8l2.3 2.3L11 5' stroke='%23FF5F1F' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}
.chk-n {
  width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' stroke='%23464658' stroke-opacity='.5'/%3E%3Cpath d='M5.5 10.5l5-5M10.5 10.5l-5-5' stroke='%23464658' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}


/* ── RESPONSIVE - NAVIGATION + FOOTER ──────────────────────── */

@media (max-width: 1000px) {
  .primary-nav,
  .header-actions { display: none; }
  .burger { display: flex; }
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 580px) {
  body { font-size: 17px; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-brand p { max-width: 100%; }

  .mobile-nav a { font-size: 28px; }

  .section-header .section-title {
    font-size: clamp(26px, 8vw, 38px);
  }
  .section-header p { font-size: 16px; }

  .proof-inner { gap: 16px; }
  .proof-item  { font-size: 12px; }
}

/* Compare table - scrolls horizontally on mobile instead of overflowing */
@media (max-width: 680px) {
  .compare-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
  }
  .compare-header,
  .compare-row {
    min-width: 500px;
  }
}

@media (max-width: 480px) {
  /* Tighten container horizontal padding on very small phones */
  .container { padding: 0 16px; }

  /* Reduce section spacing so content doesn't feel cramped */
  .section-header { margin-bottom: 32px; }
}


/* =============================================================
   EDITOR CONTENT
   -------------------------------------------------------------
   Output of lm_editor_content(). Anything a writer adds in the
   block editor on the homepage, About, Services, Contact, or a
   service page renders inside this wrapper.

   Lives in base.css rather than its own file because it can appear
   on any template, and a separate stylesheet would either load
   everywhere (defeating per-template loading) or need a condition
   in every enqueue branch.

   The rules match the article body on single.php so a paragraph
   written in the editor is indistinguishable from one built into
   the page.
============================================================= */

.lm-editor-content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pg) clamp(48px, 7vw, 88px);
  font-size: 18px;
  line-height: 1.8;
  color: var(--white-2);
}

.lm-editor-content > *:first-child { margin-top: 0; }
.lm-editor-content > *:last-child  { margin-bottom: 0; }

.lm-editor-content h2,
.lm-editor-content h3,
.lm-editor-content h4 {
  font-family: var(--font-display);
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.25;
  font-weight: 700;
}

.lm-editor-content h2 { font-size: clamp(25px, 3.2vw, 32px); margin: 52px 0 16px; }
.lm-editor-content h3 { font-size: clamp(20px, 2.4vw, 23px); margin: 40px 0 12px; }
.lm-editor-content h4 { font-size: 18px;                     margin: 30px 0 10px; }

.lm-editor-content p { margin: 0 0 22px; }

.lm-editor-content a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lm-editor-content a:hover { color: var(--orange-mid); }

.lm-editor-content strong { color: var(--white); font-weight: 600; }

.lm-editor-content ul,
.lm-editor-content ol { margin: 0 0 24px; padding-left: 24px; }
.lm-editor-content ul { list-style: disc; }
.lm-editor-content ol { list-style: decimal; }
.lm-editor-content li { margin-bottom: 9px; }
.lm-editor-content li::marker { color: var(--orange); }

.lm-editor-content blockquote {
  border-left: 3px solid var(--orange);
  padding: 4px 0 4px 24px;
  margin: 34px 0;
}
.lm-editor-content blockquote p {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 10px;
}
.lm-editor-content blockquote cite {
  font-style: normal;
  font-size: 14px;
  color: var(--muted);
}

.lm-editor-content code {
  font-family: var(--font-mono);
  font-size: 15px;
  background: var(--card-2);
  color: var(--orange);
  padding: 2px 6px;
  border-radius: 5px;
}

.lm-editor-content pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 0 0 26px;
  overflow-x: auto;
}
.lm-editor-content pre code {
  background: none;
  color: var(--white-2);
  padding: 0;
  font-size: 14px;
}

.lm-editor-content img,
.lm-editor-content .wp-block-image img { border-radius: var(--r); }

/*
   Inline SVG carried over from a previous build has no intrinsic size, so
   without a cap it paints at whatever the viewport allows, which is how a
   16px icon ends up 900px tall. Constrained here rather than trusting the
   pasted markup to carry its own dimensions.
*/
.lm-editor-content svg {
  max-width: 100%;
  max-height: 320px;
  height: auto;
}

.lm-editor-content iframe,
.lm-editor-content video {
  max-width: 100%;
  border-radius: var(--r);
}

.lm-editor-content figure { margin: 0 0 28px; }
.lm-editor-content figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* A wide table is the easiest way to reintroduce horizontal scroll
   on a phone, so it scrolls inside its own box instead. */
.lm-editor-content .wp-block-table { overflow-x: auto; margin: 0 0 28px; }
.lm-editor-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lm-editor-content th,
.lm-editor-content td {
  border: 1px solid var(--border-2);
  padding: 11px 14px;
  text-align: left;
}
.lm-editor-content th {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--card);
}

.lm-editor-content hr {
  border: 0;
  border-top: 1px solid var(--border-2);
  margin: 44px 0;
}

/* Wide and full alignment, enabled by add_theme_support('align-wide'). */
.lm-editor-content .alignwide { max-width: 1160px; margin-inline: calc(50% - 580px); }
.lm-editor-content .alignfull { max-width: none; margin-inline: calc(-1 * var(--pg)); }

@media (max-width: 1220px) {
  .lm-editor-content .alignwide { max-width: 100%; margin-inline: 0; }
}

/* Same defensive reset the article body already carries: site
   navigation blocks do not belong inside page content. */
.lm-editor-content .wp-block-navigation,
.lm-editor-content .wp-block-page-list,
.lm-editor-content .wp-block-pages-list { display: none !important; }