/* ==========================================================================
   Auto Dealerships SEO — premium cinematic upgrade (page-id-181 ONLY)
   Structural inspiration: clipstream.us (eyebrow pills, dot-grid accents,
   circular gradient icon badges, glow-framed media, layered blobs) —
   recolored to this site's own dark/teal cinematic palette, not copied
   1:1. Touches ONLY existing homepage-system classes already used by the
   auto-dealerships-seo page; does not modify main.css/main.min.css and
   does not affect any of the other pages sharing the AI SEO template.
   Header/hero (#asm-hero) is intentionally untouched — scoped rules below
   start at .asm-mission (the first section AFTER the hero).
   ========================================================================== */

/* ---------- Eyebrow -> soft pill badge ---------- */
body.page-id-181 .asm-eyebrow{
  display:inline-flex; align-items:center;
  padding:.4em 1.1em .4em .55em; border-radius:999px;
  border:1px solid rgba(0,224,198,.32);
  background:rgba(0,224,198,.08);
  backdrop-filter:blur(2px);
}
body.page-id-181 .asm-mission .asm-eyebrow,
body.page-id-181 .asm-houston .asm-eyebrow{
  border-color:rgba(0,224,198,.4);
  background:rgba(0,224,198,.1);
}

/* ---------- Decorative dot-grid + glow blob accents ----------
   NOTE: .asm-houston is intentionally EXCLUDED here. That section
   already uses its OWN ::before (dark navy overlay) and ::after
   (grid-line texture) in main.css for its structural background.
   Re-declaring the same pseudo-elements here would silently
   replace (not layer on top of) that background and blow out the
   dark backdrop behind its white text — confirmed as a real bug
   during QA. .asm-mission has no such pseudo-element usage (its
   dark color comes from a plain `background` on the section
   itself), so it's safe to decorate here. */
body.page-id-181 .asm-mission,
body.page-id-181 .asm-pillars,
body.page-id-181 .asm-help{
  position:relative;
}
body.page-id-181 .asm-mission::before{
  content:"";
  position:absolute; top:0; right:0; width:min(46vw,620px); height:100%;
  background-image:radial-gradient(rgba(0,224,198,.55) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 80% 30%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 60% 60% at 80% 30%, #000 0%, transparent 72%);
  opacity:.5; pointer-events:none; z-index:0;
}
body.page-id-181 .asm-mission::after{
  content:"";
  position:absolute; inset:-20% -10% auto auto; width:60%; height:70%;
  background:radial-gradient(closest-side, rgba(0,224,198,.16), transparent 70%);
  filter:blur(10px); opacity:.8; pointer-events:none; z-index:0;
}
body.page-id-181 .asm-mission__grid{ position:relative; z-index:1; }
body.page-id-181 .asm-houston__grid{ position:relative; z-index:1; }

body.page-id-181 .asm-pillars::before,
body.page-id-181 .asm-help::before{
  content:"";
  position:absolute; top:-10%; left:50%; width:70%; height:55%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(0,224,198,.09), transparent 72%);
  pointer-events:none; z-index:0;
}
body.page-id-181 .asm-pillars__head,
body.page-id-181 .asm-pillars__grid,
body.page-id-181 .asm-pillars__lead,
body.page-id-181 .asm-help__head,
body.page-id-181 .asm-help__cards,
body.page-id-181 .asm-help > .asm-wrap > *{ position:relative; z-index:1; }

/* ---------- Icon badges -> circular gradient, glow ring ---------- */
body.page-id-181 .asm-pillar__icon{
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%, #00E0C6 0%, #0E9E8E 60%, #075c52 100%);
  box-shadow:0 8px 22px -6px rgba(0,224,198,.55), inset 0 0 0 1px rgba(255,255,255,.28);
}
body.page-id-181 .asm-hcard__icon{
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%, rgba(0,224,198,.28) 0%, rgba(14,158,142,.16) 60%, rgba(14,158,142,.08) 100%);
  border:1px solid rgba(0,224,198,.35);
  box-shadow:0 6px 18px -8px rgba(14,158,142,.4);
}

/* Slightly richer top accent bar on pillar cards (was flat teal, now a gradient sweep). */
body.page-id-181 .asm-pillar::before{
  background:linear-gradient(90deg, var(--accent-2), var(--accent) 60%, #0A7D71);
}

/* ---------- Media frames -> soft glow ring (no layout/box changes) ---------- */
body.page-id-181 .asm-mission__figure,
body.page-id-181 .asm-houston__links{
  box-shadow:0 0 0 1px rgba(0,224,198,.28), 0 26px 60px -20px rgba(0,224,198,.22), 0 30px 70px -20px rgba(0,0,0,.45);
}

/* ---------- Overview prose rhythm (this page's imported copy runs long
   before its first real heading, so give the paragraphs more breathing
   room instead of a dense wall of text). ---------- */
body.page-id-181 .asm-mission__lead.asm-prose p{
  margin:0 0 1.35em;
}
body.page-id-181 .asm-mission__lead.asm-prose p:first-of-type{
  font-size:1.05em;
}
body.page-id-181 .asm-mission__lead.asm-prose a{
  color:var(--accent-2); text-decoration-color:rgba(0,224,198,.45); text-underline-offset:.2em;
}

/* ---------- CTA band -> extra depth glow layered under existing gradient ---------- */
body.page-id-181 .asm-cta--band{
  background:
    radial-gradient(60% 140% at 12% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(120deg, var(--accent-2) 0%, var(--accent) 52%, #0A7D71 100%);
}

/* ---------- DARK THEME CONVERSION ----------
   .asm-pillars and .asm-help (both instances on this page) were the only
   remaining light "paper"/white bands — everything else on the page
   (.asm-mission, .asm-houston, hero, CTA) is already dark. Converted here
   to the same navy gradient so the whole page reads as one consistent
   dark cinematic experience. A separate LIGHT theme variant is planned
   for later as its own deliverable — this block only affects the dark
   version and should stay isolated so a future light-theme stylesheet
   can simply not load it (or override it) without conflict. */
body.page-id-181 .asm-pillars,
body.page-id-181 .asm-help{
  background:linear-gradient(160deg,#071B23 0%,#051620 55%,#04121A 100%);
  color:#EAF6F4;
}
body.page-id-181 .asm-pillars__title,
body.page-id-181 .asm-help__head h2{
  color:#ffffff;
}
body.page-id-181 .asm-help__head h2 .accent{
  /* was a solid teal fill tuned for white backgrounds; switch to the same
     transparent-stroke glow used by every other dark accent-title on
     this page for visual consistency. */
  color:transparent; -webkit-text-stroke:1.5px var(--accent-2); text-stroke:1.5px var(--accent-2);
  text-shadow:0 0 30px var(--accent-glow);
}
body.page-id-181 .asm-help__head .asm-eyebrow{
  color:var(--accent-2);
}
body.page-id-181 .asm-help__lead,
body.page-id-181 .asm-help__introlede{
  color:rgba(234,245,243,.86);
}
body.page-id-181 .asm-pillars__lead,
body.page-id-181 .asm-pillars__lead .text,
body.page-id-181 .asm-help .asm-prose,
body.page-id-181 .asm-help .asm-prose p,
body.page-id-181 .asm-help .asm-prose .text{
  color:rgba(234,245,243,.82);
}
body.page-id-181 .asm-help .asm-prose h4.title a{
  color:#EAF6F4;
}
body.page-id-181 .asm-help .asm-prose h4.title a:hover{
  color:var(--accent-2);
}

/* Pillar cards: dark elevated surface instead of paper/cream cards */
body.page-id-181 .asm-pillar{
  background:#0B2430;
  border-color:rgba(0,224,198,.16);
}
body.page-id-181 .asm-pillar__icon{
  border-color:#0B2430; /* ring was matched to the old paper card bg */
}
body.page-id-181 .asm-pillar__media{
  background:#0B2430; /* was var(--line), a light placeholder behind the photo */
}
body.page-id-181 .asm-pillar__num{
  color:var(--accent-2);
}
body.page-id-181 .asm-pillar h2{
  color:#ffffff;
}
body.page-id-181 .asm-pillar p{
  color:rgba(234,245,243,.78);
}
body.page-id-181 .asm-pillar__ghost{
  color:#ffffff;
}
body.page-id-181 .asm-pillar:hover{
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55), 0 0 0 1px var(--accent-2) inset;
}

/* White "selling point" cards (.asm-hcard) inside .asm-help, kept dark
   for consistency in case this page's template ever renders them. */
body.page-id-181 .asm-hcard{
  background:#0B2430; border-color:rgba(0,224,198,.16);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.6);
}

/* ---------- Responsive: tame the decorative accents on small screens ---------- */
@media (max-width: 900px){
  body.page-id-181 .asm-mission::before,
  body.page-id-181 .asm-mission::after,
  body.page-id-181 .asm-pillars::before,
  body.page-id-181 .asm-help::before{
    opacity:.35;
  }
}
@media (prefers-reduced-motion: reduce){
  body.page-id-181 .asm-pillar__icon{ transition:none; }
}

/* ==== Auto-Dealerships-SEO polish pass: pillars whitespace fix, offer grid, FAQ accordion, related-links carousel ==== */

/* ==========================================================================
   Follow-up polish pass — pillars lead spacing, offer grid, FAQ, and the
   new "More Resources" link carousel (page-id-181 ONLY). All new classes
   below (.asm-offer-*, .asm-faq-*, .asm-more-resources, .asm-rcard) are
   PAGES-owned, defined fresh here; .asm-tslider/.asm-tslide/.asm-tslider__*
   are DESIGN-owned classes already shipped in main.min.css and are only
   being fed new page-scoped markup, never redeclared structurally here
   (only cosmetic tweaks where noted).
   ========================================================================== */

/* ---------- Fix: "Let's work together" lead had ~92px/110px of unused
   vertical padding inherited from the shared .asm-prose component (a
   value tuned for long-form intros, not a one-sentence lead-in). ---------- */
body.page-id-181 .asm-pillars__lead.asm-prose{
  padding-top:clamp(6px,1vw,16px);
  padding-bottom:clamp(20px,2.6vw,32px);
}
body.page-id-181 .asm-pillars__lead .text{
  font-size:1.05em;
  color:rgba(234,245,243,.86);
}

/* ---------- "Check Out What We Have to Offer" -> 4-column card grid ---------- */
body.page-id-181 .asm-offer-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin:8px 0 4px;
}
body.page-id-181 .asm-offer-card{
  display:flex; flex-direction:column; gap:14px;
  padding:26px 22px 24px;
  background:#0B2430;
  border:1px solid rgba(0,224,198,.16);
  border-radius:14px;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.page-id-181 .asm-offer-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,224,198,.4);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.55), 0 0 0 1px var(--accent-2) inset;
}
body.page-id-181 .asm-offer-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  color:#04121A;
  background:radial-gradient(120% 120% at 30% 22%, #00E0C6 0%, #0E9E8E 60%, #075c52 100%);
  box-shadow:0 8px 22px -6px rgba(0,224,198,.55), inset 0 0 0 1px rgba(255,255,255,.28);
}
body.page-id-181 .asm-offer-card__title{
  font-size:1.02rem; line-height:1.4; font-weight:600;
  color:#EAF6F4;
  flex:1 1 auto;
}
body.page-id-181 .asm-offer-card__cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--accent-2);
}
body.page-id-181 .asm-offer-card__cta svg{ transition:transform .25s ease; }
body.page-id-181 .asm-offer-card:hover .asm-offer-card__cta svg{ transform:translateX(3px); }

@media (max-width:1000px){
  body.page-id-181 .asm-offer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  body.page-id-181 .asm-offer-grid{ grid-template-columns:1fr; }
}

/* ---------- FAQ accordion -> native <details>/<summary>, white text,
   custom plus/minus icon (no Font Awesome, no JS dependency). ---------- */
body.page-id-181 .asm-faq-list{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  margin:6px 0 4px;
}
body.page-id-181 .asm-faq-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,224,198,.18);
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
body.page-id-181 .asm-faq-item__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px;
  cursor:pointer;
  list-style:none;
  font-weight:600; font-size:1.02rem;
  color:#ffffff;
}
body.page-id-181 .asm-faq-item__q::-webkit-details-marker{ display:none; }
body.page-id-181 .asm-faq-item__q::marker{ content:""; }
body.page-id-181 .asm-faq-item__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  color:var(--accent-2);
  border:1px solid rgba(0,224,198,.4);
  transition:transform .25s ease, background .25s ease;
}
body.page-id-181 .asm-faq-item[open] .asm-faq-item__toggle{
  transform:rotate(45deg);
  background:rgba(0,224,198,.14);
}
body.page-id-181 .asm-faq-item__a{
  padding:0 22px 20px;
  color:rgba(234,245,243,.86);
  line-height:1.7;
}

/* ---------- New "More Resources" carousel section, reusing the existing
   .asm-tslider engine/JS/CSS as-is; only the section wrapper + card
   (.asm-rcard) styling below are new. ---------- */
body.page-id-181 .asm-more-resources{
  position:relative; z-index:1;
  margin-top:18px;
  padding-top:34px;
  border-top:1px solid rgba(0,224,198,.14);
}
body.page-id-181 .asm-more-resources__title{
  color:#ffffff;
  margin:6px 0 20px;
}
body.page-id-181 .asm-more-resources .asm-tslide{
  padding:0 10px;
  box-sizing:border-box;
}
body.page-id-181 .asm-rcard{
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  height:100%;
  min-height:104px;
  padding:20px 22px;
  background:#0B2430;
  border:1px solid rgba(0,224,198,.16);
  border-radius:12px;
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.page-id-181 .asm-rcard:hover{
  transform:translateY(-3px);
  border-color:rgba(0,224,198,.4);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
}
body.page-id-181 .asm-rcard__title{
  font-size:.96rem; line-height:1.45; font-weight:600;
  color:#EAF6F4;
}
body.page-id-181 .asm-rcard__cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--accent-2);
}