/* The ad landing pages (locksmith near me, locked out, emergency), 15 Oct 2026, second version.
   Same brand as the rest of the site (navy, green, Inter): a real photo behind the promise, the call button and the postcode
   check first, then the proof (reviews when there are real ones, insurance, the company), the locksmiths at work, the areas,
   the prices. Loaded after styles.css on body.lp only. */

/* ---------------------------------------------------------------- hero */
.lp-hero { position: relative; background: var(--navy); color: var(--white); overflow: hidden; }
.lp-hero-media { position: absolute; inset: 0; background: url(images/lp-hero-portrait.webp) center top / cover no-repeat; }
@media (min-width: 560px) { .lp-hero-media { background-image: url(images/lp-hero-900.webp); background-position: center 30%; } }
@media (min-width: 900px) { .lp-hero-media { background-image: url(images/lp-hero.webp); } }
.lp-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,19,29,.9) 0%, rgba(6,19,29,.5) 28%, rgba(6,19,29,.72) 60%, rgba(6,19,29,.97) 100%),
    linear-gradient(90deg, rgba(6,19,29,.75) 0%, rgba(6,19,29,.3) 55%, rgba(6,19,29,.05) 100%);
}
.lp-hero-inner { position: relative; padding: 92px 0 28px; }
.lp-hero .crumbs { margin-bottom: 14px; }
.lp-hero h1 { font-size: clamp(34px, 8vw, 58px); font-weight: 900; letter-spacing: -.04em; line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.lp-promise { margin: 14px 0 0; font-size: 17.5px; line-height: 1.4; color: #e3e9ee; max-width: 36ch; font-weight: 500; }

/* the rating line under the title: filled by main.js, real reviews only */
.lp-rating { display: none; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 15px; color: #e3e9ee; }
.lp-rating.is-on { display: flex; flex-wrap: wrap; }
.lp-rating .lp-stars { color: #ffb400; letter-spacing: 1px; font-size: 18px; line-height: 1; }
.lp-rating strong { color: var(--white); font-weight: 800; }

.lp-call {
  display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 18px; min-height: 68px;
  background: var(--green); color: var(--green-ink); border-radius: var(--radius); text-decoration: none; font-weight: 800;
  box-shadow: 0 14px 28px -12px rgba(69,240,139,.55);
}
.lp-call:hover { background: #5ff59a; }
.lp-call .ico { width: 26px; height: 26px; flex: none; }
.lp-call-t { display: flex; flex-direction: column; line-height: 1.15; }
.lp-call-t strong { font-size: 19px; font-weight: 900; }
.lp-call-t span { font-size: 15px; font-weight: 600; color: #0a3c20; }
.lp-call .ico-arrow { margin-left: auto; }

.lp-pc { margin-top: 12px; padding: 14px; background: var(--white); color: var(--text); border-radius: var(--radius); box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); }
.lp-pc label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.lp-pc-row { display: flex; gap: 8px; }
.lp-pc input { flex: 1; min-width: 0; min-height: 54px; padding: 0 14px; border: 1.5px solid #c7d2da; border-radius: 12px; background: #fff; color: var(--text); font: inherit; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.lp-pc input::placeholder { text-transform: none; font-weight: 500; color: #7a8792; }
.lp-pc input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-color: var(--navy); }
.lp-pc button { min-height: 54px; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer; background: var(--navy); color: #fff; font: inherit; font-size: 16px; font-weight: 800; }
.lp-pc button:hover { background: #0f2635; }
.lp-pc .pc-result { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.lp-pc .pc-result:empty { display: none; }
.lp-pc .pc-result strong { display: block; color: var(--text); font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.lp-pc .pc-result.is-yes strong { color: #17703d; }
.lp-pc .pc-result.is-no strong, .lp-pc .pc-result.is-error strong { color: #a3231d; }
.lp-pc .pc-result .btn { display: flex; justify-content: center; margin-top: 10px; }

.lp-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.lp-points li { display: flex; gap: 8px; align-items: flex-start; }
.lp-points svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 1px; }

/* ---------------------------------------------------------------- trust strip */
.lp-trust { background: var(--navy); color: var(--white); padding: 18px 0; border-top: 1px solid var(--line-dark); }
.lp-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.lp-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #d6dee5; }
.lp-trust .ico { color: var(--green); width: 22px; height: 22px; }

/* ---------------------------------------------------------------- sections */
.lp-sec { padding: clamp(36px, 6vw, 72px) 0; }
.lp-sec h2 { font-size: clamp(26px, 5vw, 38px); font-weight: 900; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 8px; }
.lp-sub { margin: 0 0 22px; color: var(--muted); font-size: 16.5px; line-height: 1.5; max-width: 60ch; }
.lp-sec.section-dark { background: var(--navy); color: var(--white); }
.section-dark .lp-sub { color: #b9c4cd; }
.lp-sec .prose-inner { display: grid; gap: 24px; }
.lp-sec .prose-text h2 { margin-bottom: 12px; }
.lp-sec .prose-text p { color: var(--text); font-size: 16.5px; line-height: 1.6; max-width: 65ch; }
.lp-sec .includes h2 { font-size: 20px; margin-bottom: 10px; }
.lp-sec .includes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-sec .includes li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.lp-sec .includes .ico { width: 22px; height: 22px; margin-top: 1px; }

/* reviews: Google-style cards (only real ones reach visitors) */
.lp-revhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.lp-revhead .lp-big { font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.lp-revhead .lp-stars { color: #ffb400; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.lp-revhead .lp-count { font-size: 15px; color: var(--muted); }
.lp-revs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-rev { background: var(--white); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.lp-rev .lp-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--green); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.lp-rev .lp-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lp-rev .lp-name { font-weight: 800; font-size: 15px; }
.lp-rev .lp-meta { font-size: 13px; color: var(--muted); }
.lp-rev .lp-stars { color: #ffb400; font-size: 15px; letter-spacing: 1px; margin: 4px 0 6px; }
.lp-rev q { quotes: "“" "”"; display: block; font-size: 15.5px; line-height: 1.5; }
.lp-sample { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #fde8e6; color: #a3231d; font-size: 11px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }

/* the locksmiths at work: three real photos */
.lp-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-photos li { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy-3); }
.lp-photos figure { margin: 0; }
.lp-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.lp-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(180deg, rgba(6,19,29,0), rgba(6,19,29,.85)); }

/* three steps */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-step { background: var(--white); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.lp-step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--green-ink); display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.lp-step h3 { margin: 6px 0 4px; font-size: 18px; font-weight: 800; }
.lp-step p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }

/* why us: facts one under the other, on the dark ground */
.lp-why { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-dark); }
.lp-why li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.lp-why .ico { color: var(--green); width: 24px; height: 24px; margin-top: 1px; }
.lp-why h3 { margin: 0 0 2px; font-size: 17px; font-weight: 800; }
.lp-why p { margin: 0; color: #b9c4cd; font-size: 15px; line-height: 1.5; }
.lp-why a { color: var(--green); }

/* areas */
.lp-areas .area-groups { display: grid; gap: 18px; }
.lp-areas .area-group h3 { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.lp-areas .area-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.lp-areas .area-group li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e3e8ec; font-size: 15px; }
.lp-areas .area-group li b { color: var(--navy); font-weight: 800; }
.lp-areas .area-group li a { color: var(--text); font-weight: 700; }

/* prices on the dark ground: the site's dark table, plus room above the link */
.lp-sec .price-list { margin-top: 6px; }
.lp-sec .fine { margin-top: 14px; }

/* questions */
.lp-faq details { background: var(--white); border-radius: 12px; margin-bottom: 8px; box-shadow: var(--shadow); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative; font-weight: 800; font-size: 16.5px; line-height: 1.3; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.lp-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.lp-faq p { margin: 0; padding: 0 16px 16px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* the close */
.lp-close { background: var(--navy); color: var(--white); text-align: center; padding-bottom: clamp(56px, 8vw, 96px); }
.lp-close h2 { max-width: 20ch; margin-inline: auto; }
.lp-close .lp-sub { margin-inline: auto; color: #b9c4cd; }
.lp-close .lp-call { max-width: 30rem; margin-inline: auto; text-align: left; }

@media (min-width: 760px) {
  .lp-hero-inner { padding: 128px 0 48px; }
  .lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .lp-hero h1 { max-width: 14ch; }
  .lp-trust ul { grid-template-columns: repeat(4, 1fr); }
  .lp-trust li { font-size: 15px; }
  .lp-revs { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .lp-photos { grid-template-columns: repeat(3, 1fr); }
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
  .lp-step { grid-template-columns: 1fr; row-gap: 10px; }
  .lp-why { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .lp-areas .area-groups { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .lp-areas .area-group ul { grid-template-columns: 1fr; }
  .lp-sec .prose-inner { grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .lp-faq summary::after { transition: none; } }