/* =========================================================
   Legal Lead Marketing — Custom CSS
   Bootstrap 5 handles the grid, spacing, and utilities.
   This file covers only what Bootstrap can't achieve.
   ========================================================= */

/* ---- Global Tokens ---- */
:root {
  --clr-brand:   #FFC107;   /* warning yellow – primary accent */
  --clr-dark:    #0d0d0d;
  --clr-navy:    #111827;
  --clr-muted:   #6b7280;
  --font-main:   'Inter', system-ui, sans-serif;
  --font-display:'Playfair Display', Georgia, serif;
}

/* ---- Base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Prevent horizontal scroll / white overspill on all viewports */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-main);
  color: #1f2937;
  font-size: 15px;
  line-height: 1.65;
}

/* containers keep their natural Bootstrap max-width & auto side margins */

/* Utility helpers not in Bootstrap */
.fw-800  { font-weight: 800 !important; }
.fw-900  { font-weight: 900 !important; }
.fw-600  { font-weight: 600 !important; }
.ls-wide { letter-spacing: .12em; }
.text-white-75 { color: rgba(255,255,255,.75); }
.tiny { font-size: .65rem; }

/* =========================================================
   NAVBAR
   ========================================================= */
.llm-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #111827;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  padding: .55rem 0;
}
.llm-navbar .llm-container { max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; }
.llm-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: 100%;
}
.llm-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none !important;
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}
.llm-brand i { font-size: 1.5rem; color: var(--clr-brand); }
.llm-brand-name    { display: block; font-weight: 900; font-size: .95rem; letter-spacing: .5px; color: #fff; line-height: 1.2; }
.llm-brand-tagline { display: block; font-size: .6rem; letter-spacing: 2px; color: var(--clr-brand); font-weight: 600; line-height: 1.2; }
.llm-brand--light .llm-brand-name { color: #fff; }

/* Nav links — grown to fill middle space */
.llm-nav-menu {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}
.llm-nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
/* Note: wp_nav_menu() is called with 'container' => false, so WordPress
   does NOT add a wrapper div here. The old ".llm-nav-menu > div { display:
   contents }" rule below used to target that (non-existent) wrapper, but
   it was also matching .llm-nav-actions (also a direct child <div>), which
   silently killed its flex/gap/margin-auto behavior. Removed. */
.llm-nav-list li a {
  display: block;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: .45rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.llm-nav-list li a:hover { color: #fff; background: rgba(255,255,255,.08); }
.llm-nav-list li.current-menu-item > a { color: var(--clr-brand); }

.llm-nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.llm-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.llm-nav-phone i { color: var(--clr-brand); }
.llm-nav-phone svg { color: var(--clr-brand); flex-shrink: 0; }

/* Mobile hamburger — hidden by default on desktop */
.llm-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  flex-shrink: 0;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}
.llm-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
/* Hamburger → X morph when the mobile menu is open */
.llm-nav-toggle span:nth-child(1) { transform-origin: center; }
.llm-nav-toggle span:nth-child(3) { transform-origin: center; }
.llm-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.llm-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.llm-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
#mainNav { /* legacy ID kept for JS scroll listener */
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero-section {
  min-height: 620px;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Courthouse background image */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1800&q=80')
              center / cover no-repeat;
  z-index: 0;
}

/* Dark gradient overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(10, 14, 30, 0.93) 0%,
    rgba(10, 14, 30, 0.80) 55%,
    rgba(10, 14, 30, 0.55) 100%
  );
  z-index: 1;
}

.hero-section .container-xl { z-index: 2; }

/* Hero headline */
.hero-headline {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Translucent value-prop badges */
.hero-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}

/* Trust badge pills */
.trust-badges .badge-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: .25rem .75rem;
  font-size: .72rem;
  font-weight: 600;
}

/* Lead capture form card */
.lead-form-card {
  background: #fff;
  border-top: 4px solid var(--clr-brand);
}
.lead-form-card .form-control,
.lead-form-card .form-select {
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  font-size: .875rem;
  padding: .55rem .9rem;
  transition: border-color .2s;
}
.lead-form-card .form-control:focus,
.lead-form-card .form-select:focus {
  border-color: var(--clr-brand);
  box-shadow: 0 0 0 3px rgba(255,193,7,.2);
}
.lead-form-card .btn-warning {
  background-color: var(--clr-brand);
  border: none;
  font-size: .95rem;
  letter-spacing: .04em;
  transition: background .2s, transform .15s;
}
.lead-form-card .btn-warning:hover {
  background-color: #e0a800;
  transform: translateY(-1px);
}

/* =========================================================
   TRUST BAR
   ========================================================= */
.client-logo {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: #374151;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: .5rem 1rem;
  text-align: center;
  line-height: 1.3;
}
.google-rating {
  background: #fff;
}

/* =========================================================
   CASE STUDY CARDS
   ========================================================= */
.case-card { transition: box-shadow .25s; }
.case-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.12) !important; }

.case-card-header { background-color: #1a1a2e !important; }

.metric-chip {
  background: rgba(255,255,255,.1);
  border-radius: 6px;
  padding: .3rem .5rem;
  font-size: .72rem;
  color: #fff;
  line-height: 1.3;
}
.metric-chip strong { font-size: .85rem; color: #fff; }
.metric-chip.metric-green { background: rgba(34,197,94,.25); }
.metric-chip.metric-blue  { background: rgba(59,130,246,.25); }

/* =========================================================
   SERVICES GRID
   ========================================================= */
.service-card {
  border: 1.5px solid #f1f5f9;
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.service-card:hover {
  border-color: var(--clr-brand);
  box-shadow: 0 4px 20px rgba(255,193,7,.15);
  transform: translateY(-3px);
}
.service-icon i { transition: transform .2s; }
.service-card:hover .service-icon i { transform: scale(1.1); }

/* =========================================================
   RESULTS / STATS SECTION
   ========================================================= */
.stat-item .display-5 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

/* Chart cards in dark section */
.chart-card { border: 1px solid #e5e7eb; }
.chart-card svg { display: block; }

/* Bar chart items */
.bar-item { transition: height .4s ease; min-width: 0; border-radius: 4px 4px 0 0; }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-card {
  border-radius: 12px;
  transition: background .2s, transform .2s;
}
.why-card:hover {
  background: #fafafa;
  transform: translateY(-2px);
}

/* =========================================================
   4-STEP PROCESS
   ========================================================= */
.process-connector {
  position: absolute;
  top: 40px;
  left: calc(25% - 12px);
  right: calc(25% - 12px);
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--clr-brand) 0, var(--clr-brand) 12px,
    transparent 12px, transparent 24px
  );
  z-index: 0;
}

.process-step {
  z-index: 1;
  transition: box-shadow .2s, transform .2s;
}
.process-step:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1) !important;
  transform: translateY(-3px);
}
.step-num {
  font-family: var(--font-main);
  position: relative;
  z-index: 2;
}

/* =========================================================
   TESTIMONIALS — CUSTOM MULTI-CARD SLIDER  (old Bootstrap classes)
   Kept for backwards compat with index.html static file.
   ========================================================= */
.testimonials-section { overflow: hidden; }
.tslider-wrap { display: flex; align-items: center; }
.tslider-viewport { overflow: hidden; flex: 1; min-width: 0; }
.tslider-track { display: flex; gap: 1.25rem; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; align-items: stretch; }
.tslider-card  { flex: 0 0 auto; display: flex; flex-direction: column; }

/* The visible card */
.testimonial-card {
  border-top: 4px solid var(--clr-brand);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
}
.testimonial-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.11);
  transform: translateY(-3px);
}

/* Prev / Next arrow buttons */
.tslider-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--clr-brand);
  color: #111;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  cursor: pointer;
  transition: background .2s, transform .15s;
  z-index: 2;
  flex-shrink: 0;
}
.tslider-prev { margin-right: .75rem; }
.tslider-next { margin-left:  .75rem; }
.tslider-btn:hover { background: #e0a800; transform: scale(1.08); }
.tslider-btn:disabled { background: #e5e7eb; color: #9ca3af; cursor: default; transform: none; }

/* Dot indicators */
.tslider-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  padding: 0;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.tslider-dots button.active {
  background: var(--clr-brand);
  transform: scale(1.3);
}

/* =========================================================
   CREDENTIALS / PROMISE
   ========================================================= */
.credential-badge { transition: border-color .2s, transform .2s; }
.credential-badge:hover {
  border-color: var(--clr-brand) !important;
  transform: translateY(-2px);
}

.promise-box { background: #fffbeb; }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.accordion-button:not(.collapsed) {
  color: #111827;
  background-color: transparent;
  box-shadow: none;
}
.accordion-button::after {
  filter: none;
}
.accordion-button:focus { box-shadow: none; }

/* =========================================================
   BOTTOM CTA SECTION
   ========================================================= */
.cta-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.cta-inner {
  background: linear-gradient(110deg, #1d4ed8 0%, #1e40af 50%, #1d4ed8 100%);
  border: 1px solid rgba(255,255,255,.15);
}

/* =========================================================
   FOOTER
   ========================================================= */
footer a:hover { color: var(--clr-brand) !important; }

/* =========================================================
   SECTION TITLE
   ========================================================= */
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: -.02em;
}

/* =========================================================
   SCROLL-TO-TOP BUTTON (rendered by app.js)
   ========================================================= */
#scrollTopBtn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-brand);
  color: #111;
  border: none;
  font-size: 1.1rem;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .2s, opacity .2s;
}
#scrollTopBtn.visible {
  display: flex;
}
#scrollTopBtn:hover { transform: translateY(-2px); }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */

/* Tablet */
@media (max-width: 991.98px) {
  .hero-section { padding-top: 3rem; }
  .hero-overlay {
    background: rgba(10, 14, 30, 0.88);
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .hero-headline { font-size: 1.75rem; }
  .lead-form-card { padding: 1.5rem !important; }
  .cta-inner { padding: 2rem !important; text-align: center; }
  .process-connector { display: none; }
  .trust-badges .badge-pill { font-size: .65rem; padding: .2rem .55rem; }
  .stat-item .display-5 { font-size: 1.75rem; }
}

/* =========================================================
   WORDPRESS THEME — Additional Styles
   Prefixed with .llm- for zero conflict with Elementor or other plugins.
   ========================================================= */

/* ── Reset scoped to theme ── */
.llm-container { max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; }
.llm-fullwidth { padding: 0; }
.llm-main { padding-block: 2rem; }

/* Navbar, nav-inner, brand, nav-menu, nav-list, nav-actions, and
   nav-toggle are already fully defined above in the NAVBAR section
   (this used to be a second, conflicting copy of those same rules —
   removed to stop the cascade fighting itself). */

/* ── Buttons ── */
.llm-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.75rem; border-radius: 6px; font-weight: 700;
  font-size: .9rem; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: background .2s, transform .15s, border-color .2s;
  white-space: nowrap;
}
.llm-btn-warning { background: var(--clr-brand); color: #111; border-color: var(--clr-brand); }
.llm-btn-warning:hover { background: #e0a800; border-color: #e0a800; transform: translateY(-1px); color: #111; }
.llm-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.llm-btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.llm-btn-sm { padding: .4rem 1rem; font-size: .8rem; }
.llm-btn-full { width: 100%; justify-content: center; }

/* ── Section helpers ── */
.llm-section-header { text-align: center; margin-bottom: 3rem; }
.llm-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--clr-muted); margin-bottom: .5rem;
}
.llm-section-title { font-size: clamp(1.6rem,3vw,2.25rem); font-weight: var(--weight-heading, 900); letter-spacing: -.02em; }

/* ── Hero ── */
.llm-hero {
  position: relative; min-height: 620px;
  padding-block: 5rem;
  background-image: var(--hero-bg);
  background-size: cover; background-position: center;
}
.llm-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(10,14,30,.93) 0%, rgba(10,14,30,.80) 55%, rgba(10,14,30,.55) 100%);
}
.llm-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 420px; gap: 3rem; align-items: center;
}
.llm-eyebrow.hero { color: var(--clr-brand); }
.llm-hero-headline { font-size: clamp(2rem,4vw,3rem); font-weight: var(--weight-heading, 900); color: #fff; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 1rem; }
.llm-hero-sub { color: rgba(255,255,255,.8); max-width: 480px; margin-bottom: 1.5rem; }
/* Both value-prop rows live inside one card ("same section/row") with a
   single shared accent border. No divider between rows by default — add
   the "Show divider between rows" widget option to opt back in. Narrower
   than full width on desktop (matches the lead-form column width); goes
   back to full width once the layout stacks on smaller screens. */
.llm-hero-badges {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-left: 4px solid var(--clr-brand);
  backdrop-filter: blur(6px); border-radius: 8px; overflow: hidden;
  margin-bottom: 1.5rem;
  max-width: 420px;
}
.llm-hero-badge {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem;
}
.llm-hero-badges--divided .llm-hero-badge + .llm-hero-badge {
  border-top: 1px solid rgba(255,255,255,.12);
}
.llm-badge-icon { width: 40px; height: 40px; background: var(--clr-brand); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.llm-badge-icon i { font-size: 1rem; color: #111; }
/* Title = the bold, larger line in each row (badge1's highlight / badge2's label).
   Note = the smaller supporting line (badge1's label / badge2's sub). Using
   these two classes (instead of relying on p/strong/span order) keeps both
   rows the same visual weight regardless of which field holds which line.
   Sizes read from --badge-title-size / --badge-note-size so they're
   editable per-widget; fall back to the original sizes when unset. */
.llm-hero-badge .llm-badge-title { display: block; color: #fff; margin: 0; font-size: var(--badge-title-size, 1.05rem); font-weight: 800; line-height: 1.3; }
.llm-hero-badge .llm-badge-note { display: block; color: rgba(255,255,255,.75); margin: .15rem 0 0; font-size: var(--badge-note-size, .85rem); }
/* Wrap only the specific word(s) that should stand out — e.g. "$150/Week" or
   "No Management Fee" — never the whole line. Set from admin via **text**. */
.llm-badge-highlight { color: var(--clr-brand); }
.llm-hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Bullet List — dynamically replaces Value Badges in their spot, above
   the CTA buttons. Repeater-driven (icon + text per item), so it can
   hold any number of rows unlike the fixed two-item Value Badges card. */
.llm-hero-bullets {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.llm-hero-bullet { display: flex; align-items: flex-start; gap: .6rem; }
.llm-bullet-icon { color: var(--clr-brand); font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.llm-bullet-text { color: #fff; font-size: .95rem; font-weight: 500; line-height: 1.4; }

/* USP list — shown below the CTA buttons. Auto-fit naturally shows
   4-5 items in a row on desktop regardless of how many items are
   configured; explicit overrides below guarantee 2 per row on
   tablets and 1 per row on small phones, per spec. */
.llm-hero-usps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .65rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.llm-hero-usp { display: flex; align-items: flex-start; gap: .5rem; }
.llm-usp-icon { color: #facc15; font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.llm-usp-text { color: #fff; font-size: .9rem; font-weight: 500; line-height: 1.4; }
@media (max-width: 768px) {
  .llm-hero-usps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .llm-hero-usps { grid-template-columns: repeat(1, 1fr); }
}


/* Lead form card */
.llm-hero-form-wrap { position: relative; z-index: 2; }
.llm-lead-form {
  background: #fff; border-radius: 12px; padding: 2rem;
  border-top: 4px solid var(--clr-brand);
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
.llm-lead-form h4 { font-weight: 800; font-size: 1.2rem; margin-bottom: .25rem; }
.llm-lead-form p { color: #6b7280; font-size: .85rem; margin-bottom: 1.25rem; }
.llm-lead-form-fields { display: flex; flex-direction: column; gap: .75rem; }
.llm-lead-form-external { width: 100%; }
.llm-lead-form-external form { width: 100% !important; }
.llm-input, .llm-select {
  width: 100%; padding: .6rem .9rem; border: 1.5px solid #e2e8f0;
  border-radius: 6px; font-size: .875rem; font-family: inherit;
  transition: border-color .2s, box-shadow .2s; background: #fff; color: #111;
}
.llm-input:focus, .llm-select:focus {
  outline: none; border-color: var(--clr-brand);
  box-shadow: 0 0 0 3px rgba(255,193,7,.2);
}
.llm-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.llm-form-privacy { text-align: center; font-size: .75rem; color: #9ca3af; margin: .5rem 0 0; }
.llm-form-msg { font-size: .875rem; padding: .5rem; border-radius: 4px; display: none; }
.llm-form-msg.success { display: block; background: #d1fae5; color: #065f46; }
.llm-form-msg.error   { display: block; background: #fee2e2; color: #991b1b; }

/* ── Trust Bar ── */
.llm-trust-bar { padding: 2rem 0; background: #fff; border-bottom: 1px solid #f1f5f9; }
.llm-trust-label { text-align: center; text-transform: uppercase; font-weight: 700; font-size: .7rem; letter-spacing: .12em; color: #9ca3af; margin-bottom: 1.25rem; }
.llm-trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
.llm-review-platforms-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #eef0f2; }
.llm-client-logo { font-size: .7rem; font-weight: 800; letter-spacing: .05em; color: #374151; border: 1.5px solid #e2e8f0; border-radius: 6px; padding: .5rem 1rem; text-align: center; }
.llm-client-logo--img { padding: .35rem .75rem; display: flex; align-items: center; }
.llm-client-logo--img img { display: block; object-fit: contain; }
.llm-google-rating, .llm-review-platform { display: flex; align-items: center; gap: .6rem; border: 1.5px solid #e2e8f0; border-radius: 6px; padding: .5rem 1rem; text-decoration: none; }
.llm-google-rating i, .llm-review-platform i { font-size: 1.2rem; color: #ea4335; }
.llm-review-platform img { object-fit: contain; }
.llm-review-platform div { color: #374151; }
.llm-stars { color: #f59e0b; }

/* ── Case Studies ── */
.llm-cases-section { padding: 4rem 0; background: #f8fafc; }
/* minmax(280px, 1fr) used a hard 280px floor per column — below ~312px
   viewport (280px + container gutters) that floor is wider than the
   container itself, so the grid overflowed and got silently clipped by
   the global overflow-x:hidden safety net instead of wrapping/shrinking.
   Wrapping the floor in min(280px, 100%) lets it shrink to the
   container's own width once there's no room for even one full 280px
   column, so cards always fit instead of getting cut off. */
.llm-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; }
.llm-case-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: box-shadow .25s; }
.llm-case-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.llm-case-header { background: var(--llm-case-header-bg, #1a1a2e); color: var(--llm-case-header-text, #fff); padding: 1rem; }
.llm-case-firm { font-size: .8rem; font-weight: 600; margin-bottom: .6rem; }
.llm-case-metrics { display: flex; gap: .4rem; flex-wrap: wrap; }
.llm-metric { background: rgba(255,255,255,.1); border-radius: 5px; padding: .3rem .5rem; font-size: .7rem; line-height: 1.3; }
.llm-metric span { display: block; color: rgba(255,255,255,.6); }
.llm-metric strong { color: #fff; }
.llm-metric--clicks { background: var(--llm-metric-clicks-bg, rgba(255,255,255,.1)); }
.llm-metric--clicks span { color: var(--llm-metric-clicks-text, rgba(255,255,255,.6)); }
.llm-metric--clicks strong { color: var(--llm-metric-clicks-text, #fff); }
.llm-metric--convs { background: var(--llm-metric-convs-bg, rgba(255,255,255,.1)); }
.llm-metric--convs span { color: var(--llm-metric-convs-text, rgba(255,255,255,.6)); }
.llm-metric--convs strong { color: var(--llm-metric-convs-text, #fff); }
.llm-metric--green { background: var(--llm-metric-cpl-bg, rgba(34,197,94,.25)); }
.llm-metric--green span { color: var(--llm-metric-cpl-text, rgba(255,255,255,.6)); }
.llm-metric--green strong { color: var(--llm-metric-cpl-text, #fff); }
.llm-metric--blue  { background: var(--llm-metric-roas-bg, rgba(59,130,246,.25)); }
.llm-metric--blue span { color: var(--llm-metric-roas-text, rgba(255,255,255,.6)); }
.llm-metric--blue strong { color: var(--llm-metric-roas-text, #fff); }
.llm-case-body { padding: 1rem; }
.llm-case-chart { height: 70px; background: linear-gradient(135deg,#e8f5e9,#c8e6c9); border-radius: 6px; margin-bottom: .75rem; }
.llm-case-chart--img { height: auto; background: none; overflow: hidden; }
.llm-case-chart--img img { width: 100%; height: 100%; display: block; border-radius: 6px; object-fit: cover; }
.llm-text-success { color: #16a34a; font-weight: 600; }

/* ── Services ── */
.llm-services-section { padding: 4rem 0; background: #fff; }
.llm-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
@media (max-width: 767px) {
  .llm-services-grid { grid-template-columns: repeat(var(--grid-cols-mobile, 2), 1fr); }
}
.llm-service-card { border: 1.5px solid #f1f5f9; border-radius: 12px; padding: 1.25rem; text-align: center; transition: border-color .2s, box-shadow .2s, transform .2s; }
.llm-service-card:hover { border-color: var(--clr-brand); box-shadow: 0 4px 20px rgba(255,193,7,.15); transform: translateY(-3px); }
.llm-service-icon { font-size: 2rem; color: var(--clr-brand); display: block; margin-bottom: .75rem; }
.llm-service-card h6 { font-weight: var(--weight-heading, 700); font-size: var(--size-heading, .875rem); color: var(--clr-heading, inherit); margin-bottom: .5rem; }
.llm-service-card p { color: var(--clr-body-text, #6b7280); font-size: var(--size-subheading, .8rem); margin: 0; }

/* ── Stats ── */
.llm-stats-section { padding: 4rem 0; background: #111827; color: #fff; }
.llm-stats-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.llm-stats-section .llm-eyebrow { color: var(--clr-brand); }
.llm-stats-section .llm-section-title { color: #fff; }
.llm-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.llm-stat-item { border-left: 3px solid var(--clr-brand); padding-left: .85rem; }
.llm-stat-number { font-size: clamp(2rem,4vw,2.8rem); font-weight: 900; color: var(--clr-brand); line-height: 1; }
.llm-stat-label  { color: rgba(255,255,255,.75); font-size: .8rem; margin-top: .25rem; }
.llm-stats-right { display: flex; flex-direction: column; gap: 1rem; }
.llm-chart-card { background: #fff; color: #111; border-radius: 10px; padding: 1.25rem; }
.llm-chart-card h6 { font-weight: var(--weight-heading, 700); margin-bottom: .75rem; }
.llm-cost-chart { display: block; width: 100%; }
.llm-bar-chart { display: flex; align-items: flex-end; gap: .35rem; height: 70px; }
.llm-bar { flex: 1; background: var(--clr-brand); border-radius: 4px 4px 0 0; }
.llm-bar--active { background: #111827; border: 2px solid var(--clr-brand); }
.llm-leads-num   { font-size: 2rem; font-weight: 900; line-height: 1; margin-top: .5rem; }
.llm-leads-delta { color: #16a34a; font-size: .8rem; font-weight: 600; }

/* ── Why Choose Us ── */
.llm-why-section { padding: 4rem 0; background: #fff; }
.llm-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
@media (max-width: 767px) {
  .llm-why-grid { grid-template-columns: repeat(var(--grid-cols-mobile, 2), 1fr); }
}
/* Same card border treatment as Services, so the two grids match visually. */
.llm-why-card { text-align: center; padding: 1.25rem; border: 1.5px solid #f1f5f9; border-radius: 12px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.llm-why-card:hover { border-color: var(--clr-brand); box-shadow: 0 4px 20px rgba(255,193,7,.15); transform: translateY(-3px); }
.llm-why-card i  { font-size: 2rem; color: var(--clr-brand); display: block; margin-bottom: .75rem; }
.llm-why-card h6 { font-weight: var(--weight-heading, 700); font-size: var(--size-heading, .875rem); color: var(--clr-heading, inherit); margin-bottom: .4rem; }
.llm-why-card p  { color: var(--clr-body-text, #6b7280); font-size: var(--size-subheading, .8rem); margin: 0; }

/* ── Process ── */
.llm-process-section { padding: 4rem 0; background: #f8fafc; }
.llm-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.llm-process-card { background: #fff; border-radius: 12px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; }
.llm-process-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
.llm-step-num { width: 48px; height: 48px; background: var(--clr-brand); color: #111; font-weight: 900; font-size: 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.llm-process-icon { font-size: 1.75rem; display: block; margin-bottom: .75rem; }
.llm-process-card h6 { font-weight: var(--weight-heading, 700); font-size: var(--size-heading, 1rem); color: var(--clr-heading, inherit); margin-bottom: .5rem; }
.llm-process-card p  { color: var(--clr-body-text, #6b7280); font-size: var(--size-subheading, .85rem); margin: 0; }


/* ── Testimonials ── */
.llm-testimonials-section { padding: 4rem 0; background: #fff; overflow: hidden; }
.llm-tslider-wrap { display: flex; align-items: center; gap: 0; }
.llm-tslider-viewport { overflow: hidden; flex: 1; min-width: 0; }
.llm-tslider-track { display: flex; gap: 1.25rem; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; align-items: stretch; }
.llm-tslider-card { flex: 0 0 auto; display: flex; flex-direction: column; }
.llm-t-card { border-top: 4px solid var(--clr-brand); background: #f8fafc; border-radius: 10px; padding: 1.5rem; display: flex; flex-direction: column; height: 100%; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: box-shadow .2s, transform .2s; }
.llm-t-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1); transform: translateY(-3px); }
.llm-t-stars { color: #f59e0b; font-size: 1rem; margin-bottom: .75rem; }
.llm-t-quote { color: #1f2937; font-style: italic; flex: 1; margin-bottom: 1.25rem; font-size: .925rem; line-height: 1.65; }
.llm-t-author { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.llm-t-photo { border-radius: 50%; border: 2px solid var(--clr-brand); width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.llm-t-author strong { display: block; font-weight: 700; font-size: .9rem; }
.llm-t-author span   { display: block; color: #6b7280; font-size: .78rem; }
.llm-tslider-btn { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--clr-brand); color: #111; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; transition: background .2s, transform .15s; flex-shrink: 0; }
.llm-tslider-prev { margin-right: .75rem; }
.llm-tslider-next { margin-left:  .75rem; }
.llm-tslider-btn:hover { background: #e0a800; transform: scale(1.08); }
.llm-tslider-btn:disabled { background: #e5e7eb; color: #9ca3af; cursor: default; transform: none; }
.llm-tslider-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.25rem; }
.llm-tslider-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: #d1d5db; padding: 0; cursor: pointer; transition: background .25s, transform .25s; }
.llm-tslider-dots button.active { background: var(--clr-brand); transform: scale(1.3); }

/* ── FAQ ── */
.llm-faq-section { padding: 4rem 0; background: #fff; }
.llm-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 2rem; }
@media (min-width: 992px) {
  .llm-faq-grid { grid-template-columns: repeat(var(--grid-cols-desktop, 3), 1fr); }
}
.llm-faq-item { border-bottom: 1px solid #e5e7eb; }
.llm-faq-q { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: .9rem; font-weight: var(--weight-heading, 600); color: #111827; cursor: pointer; gap: 1rem; text-align: left; }
.llm-faq-q i { flex-shrink: 0; transition: transform .25s; }
.llm-faq-q[aria-expanded="true"] i { transform: rotate(45deg); }
.llm-faq-a { padding-bottom: 1rem; }
.llm-faq-a p { color: #6b7280; font-size: .875rem; margin: 0; }

/* ── CTA Section ── */
.llm-cta-section { padding: 4rem 0; background: linear-gradient(135deg,#0f172a,#1e293b); }
.llm-cta-inner { background: var(--llm-cta-bg, linear-gradient(110deg,#1d4ed8,#1e40af)); border-radius: 12px; border: 1px solid rgba(255,255,255,.15); padding: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.llm-cta-text h3 { color: #fff; font-weight: 800; margin-bottom: .5rem; }
.llm-cta-text p  { color: rgba(255,255,255,.8); margin: 0; max-width: 520px; }
.llm-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.llm-cta-phone { color: #fff; text-align: center; }
.llm-cta-phone span  { display: block; font-size: .8rem; color: rgba(255,255,255,.7); }
.llm-cta-phone strong { font-weight: 700; }

/* ── Footer ── */
.llm-footer { background: #111827; color: #fff; padding: 4rem 0 0; }
.llm-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: 2rem; padding-bottom: 3rem; }
.llm-footer-col h6 { color: var(--clr-brand); font-weight: var(--weight-heading, 700); font-size: .85rem; margin-bottom: 1rem; }
.llm-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.llm-footer-col ul a { color: rgba(255,255,255,.7); text-decoration: none; font-size: .82rem; transition: color .2s; }
.llm-footer-col ul a:hover { color: var(--clr-brand); }
.llm-footer-brand p { color: rgba(255,255,255,.7); font-size: .82rem; }
.llm-social-links { display: flex; gap: .75rem; margin-top: .75rem; }
.llm-social-links a { color: rgba(255,255,255,.7); font-size: 1.1rem; text-decoration: none; transition: color .2s; }
.llm-social-links a:hover { color: var(--clr-brand); }
.llm-footer-contact li { display: flex; gap: .6rem; color: rgba(255,255,255,.7); font-size: .82rem; margin-bottom: .5rem; align-items: center; }
.llm-footer-contact i { color: var(--clr-brand); flex-shrink: 0; }
.llm-footer-contact svg { color: var(--clr-brand); flex-shrink: 0; }
.llm-footer-contact a { color: rgba(255,255,255,.7); text-decoration: none; }
.llm-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.llm-footer-bottom p { color: rgba(255,255,255,.6); font-size: .8rem; margin: 0; }
.llm-footer-legal { display: flex; gap: 1.25rem; }
.llm-footer-legal a { color: rgba(255,255,255,.6); font-size: .8rem; text-decoration: none; transition: color .2s; }
.llm-footer-legal a:hover { color: var(--clr-brand); }

/* ── Scroll top btn ── */
#scrollTopBtn { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; background: var(--clr-brand); color: #111; border: none; font-size: 1.1rem; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer; transition: transform .2s; }
#scrollTopBtn.visible { display: flex; }
#scrollTopBtn:hover { transform: translateY(-2px); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .llm-hero-inner { grid-template-columns: 1fr; }
  .llm-hero-form-wrap { max-width: 520px; }
  .llm-hero-badges { max-width: 100%; }
  .llm-stats-inner { grid-template-columns: 1fr; }
  .llm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Mobile nav: collapse to hamburger */
  .llm-nav-toggle { display: flex; }
  .llm-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #111827;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    z-index: 999;
  }
  .llm-nav-menu.open { display: flex; }
  .llm-nav-list {
    flex-direction: column;
    align-items: flex-start;   /* override the desktop center-alignment */
    width: 100%;
    flex-wrap: nowrap;
  }
  .llm-nav-list li a { padding: .55rem .25rem; font-size: .9rem; }
  .llm-nav-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    margin-top: 1rem;
  }
  .llm-hero { padding-block: 3rem; }
  .llm-hero-headline { font-size: 1.85rem; }
  .llm-cta-inner { flex-direction: column; text-align: center; }
  .llm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .llm-footer-grid { grid-template-columns: 1fr; }
  .llm-footer-bottom { flex-direction: column; text-align: center; }
  .llm-lead-form { padding: 1.25rem; }

  /* Narrow phones (iPhone SE/mini, small Android — as small as 320px wide):
     the desktop-sized paddings below leave too little room for content and
     make Hero, Testimonials, and CTA look cramped/off. Tighten the shared
     container gutter and each section's own inner padding so there's more
     room for the actual content at these widths. */
  .llm-container { padding-inline: 1rem; }

  .llm-hero { padding-block: 2.25rem; }
  .llm-hero-headline { font-size: 1.55rem; }
  .llm-hero-sub { font-size: .9rem; }

  .llm-cta-inner { padding: 1.5rem; gap: 1.25rem; }

  /* Testimonial slider: the two 42px arrow buttons were eating a large
     share of an already-narrow viewport, squeezing each card down to
     ~164px at 320px wide — too tight for the photo/name/stars/quote to
     sit comfortably. Shrink the arrows and their margins to give cards
     back most of that width. */
  .llm-tslider-btn { flex-basis: 30px; width: 30px; height: 30px; font-size: .85rem; }
  .llm-tslider-prev { margin-right: .4rem; }
  .llm-tslider-next { margin-left: .4rem; }
  .llm-t-card { padding: 1.1rem; }
}

/* =========================================================
   FRONT-PAGE EXTRA STYLES
   (credentials section, trust pills, checklist, promise box)
   ========================================================= */

/* Trust pills (hero section) */
.llm-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
.llm-trust-pills span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: .25rem .75rem;
  font-size: .72rem;
  font-weight: 600;
}

/* Credentials / Who We Work With / Promise section */
.llm-credentials-section {
  padding: 4rem 0;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}
.llm-credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.llm-cred-heading {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

/* Checklist */
.llm-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.llm-checklist li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}
.llm-checklist i {
  color: var(--clr-brand);
  flex-shrink: 0;
}

/* Credential badges */
.llm-cred-badges {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.llm-cred-badge {
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: .75rem 1rem;
  text-align: center;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  transition: border-color .2s, transform .2s;
}
.llm-cred-badge:hover {
  border-color: var(--clr-brand);
  transform: translateY(-2px);
}

/* Compliant badge */
.llm-compliant-badge {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  color: #166534;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Promise box */
.llm-promise-box {
  border: 2px solid var(--clr-brand);
  border-radius: 10px;
  padding: 1.5rem;
  background: #fffbeb;
}
.llm-promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.llm-promise-list li {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .9rem;
}
.llm-promise-list i { color: var(--clr-brand); }

/* Responsive: credentials */
@media (max-width: 900px) {
  .llm-credentials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .llm-credentials-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ELEMENTOR HEADER WIDGET STYLES
   Applied when using LLM Header widget in Theme Builder
   ========================================================= */
.llm-el-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #111827;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  padding: .55rem 0;
  width: 100%;
}
.llm-el-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: 100%;
}
.llm-el-nav-link {
  display: block;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: .45rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.llm-el-nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.llm-el-cta { color: #111 !important; }

/* Elementor removes sticky from inner elements — override */
.elementor-section .llm-el-header { position: relative; }
.e-con .llm-el-header { position: relative; }

/* =========================================================
   STICKY HEADER — real fix
   The rules above make position:sticky fall back to relative whenever
   the header widget sits inside a normal Elementor section, which is
   true almost all the time. The ".elementor-location-header" overrides
   further down only apply when Elementor PRO's Theme Builder renders
   the header — but this theme's own "Custom Header" Customizer setting
   (llm_render_custom_layout(), used when Elementor Pro isn't present)
   never outputs that wrapper class, so sticky silently never re-enabled.
   Fix: header.php wraps that output in a dedicated ".llm-sticky-header-wrap"
   div; make THAT div the sticky element instead of the widget deep
   inside it, and force every Elementor wrapper in between back to
   overflow:visible in case Elementor's own styles clip it. */
.llm-sticky-header-wrap {
  position: sticky;
  top: 0;
  z-index: 9999;
  overflow: visible;
}
.llm-sticky-header-wrap .elementor-section,
.llm-sticky-header-wrap .elementor-container,
.llm-sticky-header-wrap .elementor-column,
.llm-sticky-header-wrap .elementor-widget-wrap,
.llm-sticky-header-wrap .elementor-element,
.llm-sticky-header-wrap .e-con {
  overflow: visible;
}
.llm-sticky-header-wrap .llm-el-header {
  position: relative;
  top: auto;
}

/* =========================================================
   ELEMENTOR THEME BUILDER — Full width sections
   ========================================================= */
/* When Elementor renders header/footer via Theme Builder,
   ensure they stretch full width with no Elementor padding */
.elementor-location-header .elementor-section-wrap,
.elementor-location-footer .elementor-section-wrap {
  width: 100%;
}
.elementor-location-header .llm-el-header,
.elementor-location-header .llm-navbar {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Prevent Elementor default padding on header/footer containers */
.elementor-location-header .elementor-container,
.elementor-location-footer .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* =========================================================
   ELEMENTOR PAGE BUILDER — ensure llm-container inside
   Elementor sections stays within content width
   ========================================================= */
.elementor-section .llm-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}

/* =========================================================
   TRUST BAR LOGO SLIDER
   ========================================================= */
.llm-trust-bar { padding: 2rem 0; background: #fff; border-bottom: 1px solid #f1f5f9; }
.llm-trust-label { text-align: center; text-transform: uppercase; font-weight: 700; font-size: .7rem; letter-spacing: .12em; color: #9ca3af; margin-bottom: 1.25rem; }

.llm-trust-slider-wrap { display: flex; align-items: center; gap: .5rem; }
.llm-trust-viewport { overflow: hidden; flex: 1; min-width: 0; }
.llm-trust-track {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.llm-trust-slide { flex: 0 0 auto; }

.llm-trust-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: .6rem 1rem;
  min-height: 56px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #374151;
  text-align: center;
  white-space: nowrap;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.llm-trust-logo-item:hover { border-color: var(--clr-brand); box-shadow: 0 2px 12px rgba(255,193,7,.15); }
.llm-trust-logo-item img { max-height: 40px; width: auto; object-fit: contain; }
.llm-trust-logo-item a { text-decoration: none; color: inherit; display: flex; align-items: center; }

.llm-trust-logo-item.llm-google-rating { gap: .6rem; padding: .5rem 1rem; }
.llm-trust-logo-item.llm-google-rating .bi-google { font-size: 1.2rem; color: #ea4335; }
.llm-stars { color: #f59e0b; font-size: .85rem; }

/* Trust slider arrow buttons */
.llm-trust-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--clr-brand);
  color: #111;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.llm-trust-btn:hover { background: #e0a800; transform: scale(1.08); }
.llm-trust-btn:disabled { background: #e5e7eb; color: #9ca3af; cursor: default; transform: none; }

/* Trust slider dots */
.llm-trust-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1rem; }
.llm-trust-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: #d1d5db; padding: 0; cursor: pointer; transition: background .25s, transform .25s; }
.llm-trust-dots button.active { background: var(--clr-brand); transform: scale(1.3); }

/* =========================================================
   HERO FORM – AJAX STATES
   ========================================================= */
.llm-form-msg { font-size: .875rem; padding: .6rem .9rem; border-radius: 6px; display: none; margin-bottom: .25rem; }
.llm-form-msg.llm-success { display: block; background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.llm-form-msg.llm-error   { display: block; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.llm-form-submit { transition: background .2s, opacity .2s, transform .15s; }
.llm-form-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.llm-input.llm-invalid, .llm-select.llm-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

/* =========================================================
   ELEMENTOR COLUMN PADDING FIX
   Elementor adds 10px padding to every populated column by
   default (.elementor-element-populated). Our widgets already
   build their own internal container/padding (.llm-container,
   .llm-navbar, etc.), so that default padding just adds an
   unwanted extra margin around header/footer/section widgets
   when they're placed in a normal Elementor Section > Column.

   Rather than disabling Elementor's default globally (which
   would remove that padding from every column on every future
   page, including ones that want it), this removes it only on
   columns that directly contain one of our own widgets — every
   other column on the site keeps Elementor's normal default
   spacing untouched.

   Uses :has() to zero the padding at its source rather than a
   negative-margin trick, which can cause a few px of horizontal
   overflow/clipping on narrow mobile viewports.
   ========================================================= */
.elementor-element-populated:has(> .elementor-widget-llm_header),
.elementor-element-populated:has(> .elementor-widget-llm_footer),
.elementor-element-populated:has(> .elementor-widget-llm_hero),
.elementor-element-populated:has(> .elementor-widget-llm_trust_bar),
.elementor-element-populated:has(> .elementor-widget-llm_case_studies),
.elementor-element-populated:has(> .elementor-widget-llm_services),
.elementor-element-populated:has(> .elementor-widget-llm_stats),
.elementor-element-populated:has(> .elementor-widget-llm_why_us),
.elementor-element-populated:has(> .elementor-widget-llm_process),
.elementor-element-populated:has(> .elementor-widget-llm_testimonials),
.elementor-element-populated:has(> .elementor-widget-llm_faq),
.elementor-element-populated:has(> .elementor-widget-llm_cta) {
  padding: 0;
}

/* A one-sided (right-only) gap on mobile is usually horizontal overflow —
   something rendering a hair wider than the viewport (a slider track,
   fixed-width chart, etc.) rather than a padding/margin mismatch, which
   would show up symmetrically on both sides. Safe universal guard: only
   clips accidental overflow, doesn't change any intended layout. */
html, body { overflow-x: hidden; max-width: 100%; }

/* On-page anchor navigation (menu items linking to #services, #results,
   etc.) — without this, the sticky header covers the top of whichever
   section the browser jumps to. */
#home, #services, #results, #process, #faq, #about, #case-studies {
  scroll-margin-top: 90px;
}

/* =========================================================
   STICKY HEADER TOGGLE
   Controlled from Appearance → Customize → Legal Lead Options →
   Header, Footer & Homepage → "Sticky Header". Covers the theme's
   built-in navbar, the Elementor "LLM Header" widget, and header
   templates assigned via Elementor Theme Builder — all three normally
   share `position: sticky` and end up here.
   ========================================================= */
body.llm-sticky-header-off .llm-navbar,
body.llm-sticky-header-off .llm-el-header,
body.llm-sticky-header-off .llm-sticky-header-wrap,
body.llm-sticky-header-off .elementor-location-header .llm-el-header,
body.llm-sticky-header-off .elementor-location-header .llm-navbar {
  position: relative;
  top: auto;
}
body.llm-sticky-header-off #home,
body.llm-sticky-header-off #services,
body.llm-sticky-header-off #results,
body.llm-sticky-header-off #process,
body.llm-sticky-header-off #faq,
body.llm-sticky-header-off #about,
body.llm-sticky-header-off #case-studies {
  scroll-margin-top: 0;
}

/* =========================================================
   ELEMENTOR COLUMN PADDING RESET
   Removes Elementor's default inner column padding so sections/columns
   built with the default "column gap" setting sit flush, matching how
   the theme's own sections are designed.
   NOTE: needs !important — Elementor generates a per-page stylesheet
   that sets this same padding, and it's enqueued/printed AFTER this
   theme's css/theme.css, so without !important Elementor's rule wins
   the cascade tie regardless of selector specificity.
   ========================================================= */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0px !important;
}

/* =========================================================
   HOMEPAGE ROW ISOLATION
   Each homepage block (Hero, Trust Bar, Case Studies, Services, Stats,
   Why Us, Process, Testimonials, FAQ, CTA) is a fully independent
   section — no shared margins, no sibling-relative CSS, no scroll
   tracking that assumes a fixed order. Hiding/deleting/reordering any
   one of them in Elementor only removes its own space in the page flow;
   it cannot resize, recolor, or reposition another row. `contain: layout
   style` reinforces this at the browser level, so a change inside one
   row's content can never leak into how neighboring rows are laid out
   or painted.
   ========================================================= */
.llm-hero,
.llm-trust-bar,
.llm-cases-section,
.llm-services-section,
.llm-stats-section,
.llm-why-section,
.llm-process-section,
.llm-testimonials-section,
.llm-faq-section,
.llm-cta-section {
  contain: layout style;
}

@media (max-width: 768px) {
  .llm-cta-phone {
    width: 100%;
  }
  .llm-btn {
    width: 100%;
    justify-content: center;
  }

  /* Every section carries its own 4rem (64px) top+bottom padding, so two
     adjacent sections stack 128px of empty space at their shared seam
     (e.g. FAQ's bottom + CTA's top) — over a fifth of a typical 610px
     mobile viewport with nothing in it. Tighten this on mobile so
     sections still get clear separation without that much dead space. */
  .llm-trust-bar,
  .llm-cases-section,
  .llm-services-section,
  .llm-stats-section,
  .llm-why-section,
  .llm-process-section,
  .llm-testimonials-section,
  .llm-faq-section,
  .llm-cta-section {
    padding: 2.5rem 0;
  }
}

@media (max-width: 480px) {
  .llm-trust-bar,
  .llm-cases-section,
  .llm-services-section,
  .llm-stats-section,
  .llm-why-section,
  .llm-process-section,
  .llm-testimonials-section,
  .llm-faq-section,
  .llm-cta-section {
    padding: 2rem 0;
  }

  /* Explicit single-column fallback for very narrow phones (belt-and-braces
     alongside the min(280px, 100%) fix above) and tighter vertical gap
     since there's no second column to need the full 1.5rem row gap. */
  .llm-cases-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* Geo-currency swap targets — inherit all styling from their parent so
   wrapping text in these spans never visibly changes anything. */
.llm-currency-aware,
.llm-currency-aware-html { color: inherit; font: inherit; }

/* 1024px Screens, e.g. iPad and Tablets */
@media (max-width: 1024px) {
  .llm-hero-form-wrap {
    max-width: 100%;
  }
  .llm-hero-sub {
    max-width: 100%;
  }
  .llm-cta-text p {
    max-width: 100%;
  }
}

/* ── Extra-narrow phones (≤340px, e.g. 297×538, 320×610) ──
   Root cause: .llm-hero-form-wrap was capped at a hard 270px here even
   though the container gutters (1rem each side) leave less than that on
   screens under ~334px wide — e.g. only 265px at 297px wide. The fixed
   270px floor was 5px+ wider than the space available, so it silently
   overflowed and got clipped instead of shrinking to fit. Capping both
   the form wrap and the copy column to 87% keeps a small margin either
   side instead of touching the viewport edges on these very narrow
   screens (e.g. 297px wide). */
@media (max-width: 340px) {
  .llm-hero-form-wrap {
    max-width: 87% !important;
  }
  .llm-hero-copy {
    width: 87% !important;
  }
  .llm-cta-inner {
    flex-direction: inherit !important;
  }
  .llm-cta-actions .llm-btn {
    gap: 0 !important;
    padding: 10px !important;
    font-size: 12px !important;
  }
  .llm-cf7-form input[type="submit"] {
    font-size: 10px !important;
  }
}

/* Contact Form 7 - Landing Page Form */
.llm-cf7-form {
    width: 100%;
}
.llm-cf7-form p {
    margin: 0 0 10px;
}
.llm-cf7-form input[type="text"],
.llm-cf7-form input[type="tel"],
.llm-cf7-form input[type="email"],
.llm-cf7-form select,
.llm-cf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-size: 14px;
    font-family: inherit;
    padding: 0 13px;
    height: 34px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.llm-cf7-form textarea {
    height: 75px;
    padding-top: 10px;
    padding-bottom: 10px;
    resize: vertical;
}
.llm-cf7-form input::placeholder,
.llm-cf7-form textarea::placeholder {
    color: #777;
    opacity: 1;
}
.llm-cf7-form input:focus,
.llm-cf7-form select:focus,
.llm-cf7-form textarea:focus {
    border-color: #0088cc;
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.08);
}
.llm-cf7-form select {
    appearance: auto;
    cursor: pointer;
}
.llm-cf7-form input[type="submit"] {
    width: 100%;
    height: 42px;
    margin-top: 0;
    padding: 0 15px;
    border: 0;
    border-radius: 6px;
    background: #ffc107;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}
.llm-cf7-form input[type="submit"]:hover {
    background: #ffca28;
}
.llm-cf7-form input[type="submit"]:active {
    transform: translateY(1px);
}
.llm-cf7-privacy {
    margin-top: 12px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}
.llm-cf7-lock {
    font-size: 12px;
    margin-right: 3px;
}

/* CF7 validation messages */
.llm-cf7-form .wpcf7-not-valid {
    border-color: #dc3545 !important;
}
.llm-cf7-form .wpcf7-not-valid-tip {
    display: none;
}
.llm-cf7-form .wpcf7-response-output {
    margin: 10px 0 0 !important;
    padding: 8px 10px !important;
    border-radius: 5px;
    font-size: 13px;
}
.llm-cf7-form .wpcf7-spinner {
    display: none;
}
.wpcf7-response-output {
    display: none !important;
}