/*==============================================================
  West LA Mobile Auto Glass — Location Page Theme (self-contained)
  location-style.css
  Premium teal theme for the nearme/ location pages. Restyles the
  existing markup classes (#about hero, .benefit-box, .damage-box,
  .h2-gradient, .hover-highlight, FAQ, area tags, image showcase)
  into the homepage aesthetic — WITHOUT changing page content.
  Self-contained: provides base + premium styles so pages render
  correctly even without style.css. Scoped under #main.loc-page.
  (Bootstrap grid + bootstrap-icons load separately.)
==============================================================*/
:root {
  --lc-teal:       #2bbf9f;
  --lc-teal-dark:  #1a8f80;
  --lc-teal-deep:  #143a34;
  --lc-ink:        #112e2a;
  --lc-body:       #51635e;
  --lc-muted:      #66756f;
  --lc-line:       #edf2f0;
  --lc-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  /* fixed-header chrome height (topbar + header). Single source of truth
     for the hero offset so the form/heading never hides behind the header. */
  --lc-chrome:     117px;
  --lc-hero-gap:   46px;   /* extra breathing room below the header */
}

/* ── base typography ── */
#main.loc-page {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 1.78;
  color: var(--lc-body);
  background: #fff;
}
#main.loc-page h1, #main.loc-page h2, #main.loc-page h3,
#main.loc-page h4, #main.loc-page h5 {
  font-family: "Poppins", sans-serif;
  color: var(--lc-ink);
  line-height: 1.25;
  letter-spacing: -0.3px;
}
#main.loc-page p { margin: 0 0 18px; }
#main.loc-page a { color: var(--lc-teal-dark); text-decoration: none; transition: color 0.2s; }
#main.loc-page a:hover { color: var(--lc-ink); }
#main.loc-page ul { margin: 0; padding: 0; }
#main.loc-page img { max-width: 100%; height: auto; }
#main.loc-page .hidden { display: none !important; }
#main.loc-page section { overflow: clip; }
#main.loc-page section.py-5 { padding: 72px 0 !important; }

/* tinted alternating sections */
#main.loc-page section[style*="#f4f4f4"] {
  background:
    radial-gradient(ellipse 50% 45% at 0% 0%, rgba(89,212,185,0.07), transparent 55%),
    linear-gradient(180deg, #f6fefc 0%, #ffffff 100%) !important;
}

/* ── gradient titles ── */
#main.loc-page .h2-gradient {
  display: inline-block;
  background: linear-gradient(100deg, var(--lc-ink) 0%, #1a8f80 55%, #35b1a4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.6px;
  line-height: 1.22;
}
#main.loc-page .h2-gradient.text-center { display: block; }
#main.loc-page .h3-gradient {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--lc-teal-dark);
  margin: 18px 0 10px;
}
/* base theme for content h3s that have no gradient class
   (e.g. "Service for All Vehicle Makes and Models"). The special-purpose
   h3s — FAQ questions, pricing/eco cards, footer — are excluded so their
   own rules keep winning. */
/* base theme ONLY for plain content h3s that carry no styling class.
   Kept low-specificity (single class on the h3) so any component rule
   (.faq-item h3, .pricing-card, eco cards, form) easily overrides it. */
#main.loc-page h3:not([class]),
#main.loc-page h3[class=""] {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--lc-teal-dark);
  line-height: 1.3;
}
/* FAQ questions are bare <h3> too — keep them neat: dark ink, normal size.
   Placed right after the base rule and uses a descendant class so it wins. */
#main.loc-page .faq-item h3:not([class]) {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lc-ink);
  line-height: 1.4;
}


/*───────────────────────────────────────────────
  LEGACY BANNER (#hero from banner.php)
───────────────────────────────────────────────*/
#hero { position: relative; }
#hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(11,26,23,0.82) 0%, rgba(20,58,52,0.62) 55%, rgba(26,143,128,0.45) 100%);
  pointer-events: none;
}
#hero .hero-container { position: relative; z-index: 2; }
#hero .Banner-text {
  font-family: "Poppins", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 6px 30px rgba(0,0,0,0.4);
}
#hero .Slogan-text { text-shadow: 0 3px 16px rgba(0,0,0,0.4); }


/*───────────────────────────────────────────────
  HERO / ABOUT  (content left + FORM right)
───────────────────────────────────────────────*/
/* the form hero is now the top of the page — clear the fixed header
   (topbar 41 + header 76 = 117px) so content isn't hidden behind it */
#main.loc-page { padding-top: var(--lc-chrome); }

#main.loc-page #about {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(ellipse 55% 50% at 0% 0%, rgba(89,212,185,0.14), transparent 60%),
    radial-gradient(ellipse 45% 55% at 100% 100%, rgba(53,177,164,0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4fdfa 55%, #effdf8 100%);
  /* pull up under the header and re-add as padding so the tinted bg fills
     flush under the navbar with no white gap. Derived from --lc-chrome so the
     hero always clears the fixed header at every breakpoint. */
  margin-top: calc(-1 * var(--lc-chrome));
  padding: calc(var(--lc-chrome) + var(--lc-hero-gap)) 0 70px !important;
}
#main.loc-page #about .about-container { align-items: stretch; }

/* content column heading + intro */
#main.loc-page #about h1.h2-gradient {
  text-align: left !important;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important;
  line-height: 1.16 !important;
  margin-bottom: 16px;
}
#main.loc-page #about .col-lg-6 .p-4 { padding: 8px 6px !important; }
#main.loc-page #about p { font-size: 15.5px; line-height: 1.78; }
#main.loc-page #about .custom-btn { text-align: left; }

/* the form column — premium card with teal top accent */
#main.loc-page #about .loc-form-col { display: flex; }
#main.loc-page #about .loc-form-shell {
  background: #fff;
  border: 1px solid var(--lc-line);
  border-radius: 22px;
  padding: 30px 28px;
  width: 100%;
  box-shadow: 0 30px 70px -34px rgba(18,46,42,0.4), 0 0 0 1px rgba(26,59,54,0.04);
  position: relative;
  overflow: hidden;
}
#main.loc-page #about .loc-form-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #59d4b9, #35b1a4, #1a8f80);
}
#main.loc-page .loc-form-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
#main.loc-page .loc-form-head i {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--lc-teal), var(--lc-teal-dark));
  color: #fff; font-size: 20px; border-radius: 13px;
  box-shadow: 0 10px 22px -8px rgba(43,191,159,0.7);
}
#main.loc-page .loc-form-head h3 {
  font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 800;
  color: var(--lc-ink); margin: 0;
}
#main.loc-page .loc-form-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--lc-muted); }


/*───────────────────────────────────────────────
  BUTTONS
───────────────────────────────────────────────*/
#main.loc-page .custom-btn .btn-get-started,
#main.loc-page a.btn-get-started,
#hero a.btn-get-started {
  display: inline-block;
  background: linear-gradient(135deg, var(--lc-teal), var(--lc-teal-dark));
  border: none;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 14px;
  box-shadow: 0 16px 34px -12px rgba(26,143,128,0.7);
  transition: transform 0.3s var(--lc-ease), box-shadow 0.3s var(--lc-ease), background 0.3s;
}
#main.loc-page .custom-btn .btn-get-started:hover,
#main.loc-page a.btn-get-started:hover,
#hero a.btn-get-started:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -12px rgba(26,143,128,0.85);
  background: linear-gradient(135deg, var(--lc-teal-dark), #14756a);
}


/*───────────────────────────────────────────────
  BENEFIT BOXES
───────────────────────────────────────────────*/
#main.loc-page .benefit-box {
  background: #fff;
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  padding: 28px 20px;
  text-align: center;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 10px 30px -18px rgba(18,46,42,0.28);
  transition: transform 0.4s var(--lc-ease), box-shadow 0.4s var(--lc-ease), border-color 0.3s;
}
#main.loc-page .benefit-box:hover {
  transform: translateY(-6px);
  border-color: rgba(89,212,185,0.4);
  box-shadow: 0 28px 56px -26px rgba(18,46,42,0.38);
}
#main.loc-page .benefit-icon {
  width: 64px; height: 64px;
  margin: 0 auto 15px;
  background: linear-gradient(135deg, var(--lc-teal), var(--lc-teal-dark));
  color: #fff;
  font-size: 26px;
  line-height: 64px;
  border-radius: 50%;
  box-shadow: 0 12px 24px -10px rgba(26,143,128,0.6);
  transition: transform 0.4s var(--lc-ease);
}
#main.loc-page .benefit-box:hover .benefit-icon { transform: translateY(-2px) scale(1.06); }
#main.loc-page .benefit-text { font-weight: 700; font-size: 16px; color: var(--lc-ink); }

/* the "process" benefit-box used as a content panel (has inline border) */
#main.loc-page .benefit-box[style] {
  display: block;
  text-align: left;
  border-radius: 22px !important;
  border: 1px solid var(--lc-line) !important;
  box-shadow: 0 20px 50px -30px rgba(18,46,42,0.35) !important;
}


/*───────────────────────────────────────────────
  DAMAGE BOXES (teal cards)
───────────────────────────────────────────────*/
#main.loc-page .damage-box {
  background: linear-gradient(160deg, var(--lc-teal-deep), #1b5247);
  border: 1px solid rgba(89,212,185,0.18);
  border-radius: 18px;
  padding: 26px 24px;
  height: 100%;
  box-shadow: 0 18px 40px -20px rgba(18,46,42,0.45);
  transition: transform 0.4s var(--lc-ease), box-shadow 0.4s var(--lc-ease);
}
#main.loc-page .damage-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -24px rgba(18,46,42,0.55);
}
#main.loc-page .damage-title { color: #fff; font-weight: 700; margin-bottom: 8px; font-size: 18px; }
#main.loc-page .damage-desc { color: rgba(255,255,255,0.82); font-size: 15px; }
#main.loc-page .damage-desc strong { color: #fff; }
/* links inside the dark teal damage cards: the markup hard-codes
   style="color:black" which is invisible here — force a light, legible color */
#main.loc-page .damage-box a,
#main.loc-page .damage-box a[style] {
  color: #aef3e4 !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(174,243,228,0.5);
  transition: color 0.2s ease;
}
#main.loc-page .damage-box a:hover,
#main.loc-page .damage-box a[style]:hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
}


/*───────────────────────────────────────────────
  PROCESS STEPS  (numbered cards — "Our Process",
  "ADAS Calibration", etc.)  Used on el-segundo,
  hermosa-beach, hollywood, and others.
───────────────────────────────────────────────*/
#main.loc-page .process-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--lc-line);
  border-radius: 18px;
  padding: 30px 24px 26px;
  height: 100%;
  box-shadow: 0 12px 32px -20px rgba(18,46,42,0.3);
  transition: transform 0.4s var(--lc-ease), box-shadow 0.4s var(--lc-ease), border-color 0.3s;
  overflow: hidden;
}
#main.loc-page .process-step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--lc-teal), var(--lc-teal-dark));
  opacity: 0; transition: opacity 0.3s ease;
}
#main.loc-page .process-step:hover {
  transform: translateY(-6px);
  border-color: rgba(89,212,185,0.4);
  box-shadow: 0 28px 56px -26px rgba(18,46,42,0.38);
}
#main.loc-page .process-step:hover::before { opacity: 1; }
#main.loc-page .process-step .step-number {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--lc-teal), var(--lc-teal-dark));
  border-radius: 14px;
  box-shadow: 0 12px 24px -10px rgba(26,143,128,0.6);
  transition: transform 0.4s var(--lc-ease);
}
#main.loc-page .process-step:hover .step-number { transform: translateY(-2px) scale(1.05); }
#main.loc-page .process-step h5 {
  font-family: "Poppins", sans-serif;
  font-size: 17px; font-weight: 700 !important; color: var(--lc-ink);
  margin: 0 0 10px;
  /* some pages mark the heading text-center while the body copy is left —
     keep the whole card left-aligned so heading + text line up cleanly */
  text-align: left !important;
}
/* themed gradient heading variant used inside process cards (.h5-gradient) */
#main.loc-page .process-step h5.h5-gradient {
  background: linear-gradient(100deg, var(--lc-ink) 0%, #1a8f80 60%, #35b1a4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
}
#main.loc-page .process-step p {
  font-size: 15px !important; color: var(--lc-body); line-height: 1.7; margin: 0;
  text-align: left !important;
}
/* trailing copy that sits right after the process-step grid (e.g. the ADAS
   "This technical expertise…" line). In the markup this <p> is the LAST child
   *inside* the .row (after the cards + a stray <br>), so it must break to full
   width and clear the cards above it. */
#main.loc-page .container > .row + p,
#main.loc-page .container > .row + br + p {
  margin-top: 30px;
  font-size: 15.5px; color: var(--lc-body); line-height: 1.78;
}
#main.loc-page .row > p {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 22px;
  margin-bottom: 0;
  font-size: 15.5px; color: var(--lc-body); line-height: 1.78;
}
/* the stray <br> before that trailing <p> adds an extra gap — neutralize it */
#main.loc-page .row > br { display: none; }


/*───────────────────────────────────────────────
  ECO / SOLUTIONS PANEL  ("Auto Glass Solutions
  We Offer") — re-skin the inline teal boxes to
  the premium light theme.  Beats inline styles.
───────────────────────────────────────────────*/
#main.loc-page .eco-box[style] {
  background: linear-gradient(180deg, #ffffff 0%, #f6fefc 100%) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 24px !important;
  padding: 48px 40px !important;
  box-shadow: 0 30px 70px -38px rgba(18,46,42,0.4) !important;
}
/* the inner solid-teal service tiles -> clean white cards w/ teal accent */
#main.loc-page .eco-box .row > [class*="col-"] > div[style] {
  background: #fff !important;
  color: var(--lc-body) !important;
  border: 1px solid var(--lc-line) !important;
  border-left: 5px solid var(--lc-teal) !important;
  border-radius: 16px !important;
  padding: 26px 26px !important;
  height: 100%;
  box-shadow: 0 12px 30px -20px rgba(18,46,42,0.3) !important;
  transition: transform 0.4s var(--lc-ease), box-shadow 0.4s var(--lc-ease), border-color 0.3s;
}
#main.loc-page .eco-box .row > [class*="col-"] > div[style]:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -26px rgba(18,46,42,0.4) !important;
}
#main.loc-page .eco-box .row .h4-gradient,
#main.loc-page .eco-box .row h4 {
  display: inline-block;
  background: linear-gradient(100deg, var(--lc-ink) 0%, #1a8f80 58%, #35b1a4 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-family: "Poppins", sans-serif !important; font-weight: 700 !important;
  font-size: 1.12rem !important; line-height: 1.35 !important;
  margin: 0 0 10px !important;
}
#main.loc-page .eco-box .row p { color: var(--lc-body) !important; font-size: 15px; line-height: 1.7; }
#main.loc-page .eco-box .row a { color: var(--lc-teal-dark) !important; font-weight: 600; }
#main.loc-page .eco-box .row a:hover { color: var(--lc-ink) !important; }
/* the bottom phone CTA inside the panel */
#main.loc-page .eco-box .btn-get-started[style] {
  background: linear-gradient(135deg, var(--lc-teal), var(--lc-teal-dark)) !important;
  color: #fff !important;
  padding: 13px 34px !important;
  border-radius: 30px !important;
  box-shadow: 0 16px 30px -12px rgba(26,143,128,0.55) !important;
  transition: transform 0.3s var(--lc-ease), box-shadow 0.3s var(--lc-ease);
}
#main.loc-page .eco-box .btn-get-started[style]:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -14px rgba(26,143,128,0.65) !important;
}


/*───────────────────────────────────────────────
  PRICING / DAMAGE-TYPE CARDS  ("Our Mobile Service
  covers all windshield damage types") — re-skin the
  inline-styled .pricing-card row to the theme and
  make the row wrap responsively.
───────────────────────────────────────────────*/
#main.loc-page .pricing-card[style] {
  background: linear-gradient(180deg, #ffffff 0%, #f6fefc 100%) !important;
  border: 1px solid var(--lc-line) !important;
  border-top: 4px solid var(--lc-teal) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  width: auto !important;
  flex: 1 1 200px;
  box-shadow: 0 12px 30px -20px rgba(18,46,42,0.3) !important;
  transition: transform 0.4s var(--lc-ease), box-shadow 0.4s var(--lc-ease), border-color 0.3s;
  /* column layout so BOTH variants line up cleanly: the single-line damage
     cards and the title + price cards (e.g. "Crack Repair" / "$120–$250") */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px;
}
#main.loc-page .pricing-card[style]:hover {
  transform: translateY(-6px);
  border-color: rgba(89,212,185,0.4) !important;
  box-shadow: 0 26px 52px -26px rgba(18,46,42,0.4) !important;
}
#main.loc-page .pricing-card .card-title-small {
  font-family: "Poppins", sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--lc-ink);
  margin: 0; line-height: 1.4; text-align: center;
}
/* title + price variant ("Chip Repair" / "$50–$100") — re-theme the inline
   teal h3 and the price line, and align them centered as a stacked pair */
#main.loc-page .pricing-card h3[style] {
  font-family: "Poppins", sans-serif !important;
  font-size: 1.12rem !important; font-weight: 700 !important;
  color: var(--lc-teal-dark) !important;
  margin: 0 !important; line-height: 1.3 !important; text-align: center !important;
}
#main.loc-page .pricing-card h3[style] + p[style] {
  font-family: "Poppins", sans-serif !important;
  font-size: 1.15rem !important; font-weight: 800 !important;
  color: var(--lc-ink) !important;
  margin: 0 !important; line-height: 1.2 !important; text-align: center !important;
}
/* let the flex row of pricing cards wrap on small screens */
#main.loc-page .pricing-card[style] { min-width: 0; }
@media (max-width: 991px) {
  #main.loc-page div[style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; }
  #main.loc-page .eco-box[style] { padding: 32px 22px !important; }
}


/*───────────────────────────────────────────────
  PROCESS / TIMELINE (hover-highlight cards)
───────────────────────────────────────────────*/
#main.loc-page .hover-highlight {
  border: 1px solid var(--lc-line) !important;
  border-radius: 14px !important;
  transition: all 0.3s var(--lc-ease) !important;
}
#main.loc-page .hover-highlight:hover {
  border-color: rgba(89,212,185,0.5) !important;
  box-shadow: 0 16px 38px -20px rgba(89,212,185,0.32) !important;
  transform: translateY(-3px);
}


/*───────────────────────────────────────────────
  TAG BOX
───────────────────────────────────────────────*/
#main.loc-page .tag-box {
  background: #fff;
  border: 1px solid var(--lc-line);
  border-left: 5px solid var(--lc-teal);
  border-radius: 14px;
  padding: 24px 26px;
  height: 100%;
  box-shadow: 0 10px 30px -18px rgba(18,46,42,0.25);
}


/*───────────────────────────────────────────────
  CTA banner (teal background section)
───────────────────────────────────────────────*/
#main.loc-page section[style*="#59d4b9"] {
  background: linear-gradient(135deg, #0c211d 0%, var(--lc-teal-deep) 50%, var(--lc-teal-dark) 100%) !important;
  padding: 72px 0 !important;
}
#main.loc-page section[style*="#59d4b9"] > .container > div {
  border-radius: 26px !important;
  box-shadow: 0 36px 80px -34px rgba(11,26,23,0.7) !important;
}


/*───────────────────────────────────────────────
  Service-coverage accordion (already styled inline; refine)
───────────────────────────────────────────────*/
#main.loc-page .svc-coverage-acc .uk-accordion-title {
  box-shadow: 0 10px 30px -18px rgba(18,46,42,0.3);
}


/*───────────────────────────────────────────────
  FAQ  (self-contained accordion + premium skin)
───────────────────────────────────────────────*/
#main.loc-page .autoglass-faq-section {
  padding: 80px 20px;
  background: #f6fefc;
  position: relative;
}
#main.loc-page .faq-container { max-width: 900px; margin: 0 auto; }
#main.loc-page .faq-header { text-align: center; margin-bottom: 48px; }
#main.loc-page .faq-accordion { display: flex; flex-direction: column; gap: 16px; }
#main.loc-page .faq-item {
  background: #fff;
  border: 1px solid var(--lc-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px -18px rgba(18,46,42,0.3);
  transition: border-color 0.3s, box-shadow 0.3s;
}
#main.loc-page .faq-item:hover {
  border-color: rgba(89,212,185,0.4);
  box-shadow: 0 16px 36px -22px rgba(18,46,42,0.34);
}
#main.loc-page .faq-question { padding: 22px 26px; cursor: pointer; transition: background 0.3s; }
#main.loc-page .faq-question:hover { background: rgba(89,212,185,0.05); }
#main.loc-page .question-content { display: flex; align-items: center; gap: 16px; }
#main.loc-page .faq-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--lc-teal), var(--lc-teal-dark));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(26,143,128,0.6);
}
#main.loc-page .faq-icon svg { width: 22px; height: 22px; color: #fff; }
#main.loc-page .faq-item h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem; font-weight: 700; color: var(--lc-ink);
  margin: 0; flex: 1; line-height: 1.4;
}
#main.loc-page .toggle-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(89,212,185,0.18);
  transition: all 0.3s ease;
}
#main.loc-page .toggle-icon svg { width: 18px; height: 18px; color: var(--lc-teal-dark); transition: transform 0.3s ease; }
#main.loc-page .answer-content { padding: 4px 26px 24px 78px; }
#main.loc-page .answer-content p { color: var(--lc-body); font-size: 1rem; line-height: 1.7; margin: 0; }
#main.loc-page .faq-item.open .toggle-icon { background: rgba(89,212,185,0.3); }
#main.loc-page .faq-item.open .toggle-icon svg { transform: rotate(180deg); }

#main.loc-page .fade-in-up { opacity: 0; transform: translateY(20px); animation: lcFadeUp 0.7s ease forwards; }
#main.loc-page .delay-1 { animation-delay: 0.05s; }
#main.loc-page .delay-2 { animation-delay: 0.12s; }
#main.loc-page .delay-3 { animation-delay: 0.19s; }
@keyframes lcFadeUp { to { opacity: 1; transform: translateY(0); } }


/*───────────────────────────────────────────────
  IMAGE SHOWCASE (credentials badges)
───────────────────────────────────────────────*/
#main.loc-page #image-showcase { background: #f6fefc !important; }
#main.loc-page #image-showcase .card > div {
  /* the inline height:200px tiles are oversized — trim them down */
  height: 140px !important;
  padding: 16px !important;
  border: 1px solid var(--lc-line) !important;
  box-shadow: 0 10px 30px -18px rgba(18,46,42,0.25) !important;
  transition: transform 0.3s var(--lc-ease), box-shadow 0.3s var(--lc-ease);
}
#main.loc-page #image-showcase .card:hover > div {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -24px rgba(18,46,42,0.34) !important;
}


/*───────────────────────────────────────────────
  RESPONSIVE
───────────────────────────────────────────────*/
@media (max-width: 991px) {
  /* smaller fixed header on tablet/mobile — shrink the chrome var so the
     #about offset (which derives from it) follows automatically */
  #main.loc-page { --lc-chrome: 102px; --lc-hero-gap: 28px; }
  #main.loc-page section.py-5 { padding: 52px 0 !important; }
  /* keep the header-clearance offset; only reduce the bottom padding */
  #main.loc-page #about { padding: calc(var(--lc-chrome) + var(--lc-hero-gap)) 0 40px !important; }
  #main.loc-page #about h1.h2-gradient { text-align: center !important; }
  #main.loc-page #about .custom-btn { text-align: center; }
}
@media (max-width: 767px) {
  #main.loc-page .answer-content { padding: 4px 22px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #main.loc-page .benefit-box,
  #main.loc-page .benefit-icon,
  #main.loc-page .damage-box,
  #main.loc-page .hover-highlight { transition: none; }
  #main.loc-page .fade-in-up { animation: none; opacity: 1; transform: none; }
}