/* ============================================================================
   Valmont Web — Generated SEO landing pages
   /websites · /services · /locations · every city page · every service page

   These pages are emitted by scripts/build-seo-pages.mjs. They build on
   shared.css (tokens, .wrap, .btn), legal.css (.topbar, .logo, .back, .foot)
   and pricing.css (.pg-hero, .pg-wrap, .pg-sec, .pg-table, .pg-row, .pg-note),
   so the brand stays identical to /pricing without duplicating it.

   Everything below is prefixed .lp- (landing page) except the small number of
   rules that extend an existing component.
   ========================================================================== */

/* --- top bar nav ---------------------------------------------------------- */
.lp-nav { display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; }
.lp-nav a {
  color:#b9c4dd; text-decoration:none; font-size:13px; font-weight:700;
  letter-spacing:.01em; padding:6px 0; transition:color .2s; white-space:nowrap;
}
.lp-nav a:hover { color:#fff; }
.lp-nav a[aria-current="page"] { color:var(--orange-2); }
@media (max-width:900px) {
  .topbar .wrap { flex-wrap:wrap; justify-content:center; gap:10px; }
  .lp-nav { order:3; width:100%; justify-content:center; }
}

/* --- breadcrumbs ---------------------------------------------------------- */
.lp-crumbs { background:#fff; border-bottom:1px solid var(--line); padding:11px 0; }
.lp-crumbs ol {
  display:flex; flex-wrap:wrap; gap:6px; list-style:none;
  font-size:12.5px; font-weight:600; color:var(--muted);
}
.lp-crumbs li { display:flex; align-items:center; gap:6px; }
.lp-crumbs li + li::before { content:"›"; color:#b6bfd4; font-weight:400; }
.lp-crumbs a { color:var(--body); text-decoration:none; }
.lp-crumbs a:hover { color:var(--orange); text-decoration:underline; }
.lp-crumbs [aria-current="page"] { color:var(--ink); font-weight:800; }

/* --- hero ----------------------------------------------------------------- */
.lp-price-hero {
  margin:20px auto 0; display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.02em; color:#fff;
  background:rgba(245,140,20,.14); border:1px solid rgba(245,140,20,.38);
  border-radius:16px; padding:14px 26px;
}
.lp-price-hero small {
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold); text-align:center; max-width:420px; line-height:1.5;
}
.lp-hero-cta { margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* --- cards ---------------------------------------------------------------- */
.lp-card {
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:clamp(24px,4vw,40px); box-shadow:0 14px 38px rgba(14,29,61,.06);
}
.lp-card .pg-sec-head { text-align:left; }
.lp-card .pg-sec-head h2 { font-size:clamp(20px,3vw,25px); }
.lp-card .pg-sec-head p { margin-left:0; max-width:none; }

/* --- inclusions ----------------------------------------------------------- */
.lp-includes { list-style:none; display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.lp-includes li {
  display:flex; gap:11px; align-items:flex-start;
  background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:13px 15px;
  font-size:14.5px; line-height:1.6; color:var(--body); font-weight:500;
}
.lp-includes svg { width:17px; height:17px; color:#1a9c53; flex:0 0 auto; margin-top:2px; }

/* --- how buying works ----------------------------------------------------- */
.lp-steps { list-style:none; display:grid; gap:14px; counter-reset:none; }
.lp-steps li {
  display:flex; gap:16px; align-items:flex-start;
  background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:18px 20px;
}
.lp-step-num {
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
  box-shadow:0 6px 16px rgba(245,140,20,.3);
}
.lp-steps h3 { font-size:15.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.lp-steps p { margin-top:5px; font-size:14px; line-height:1.7; color:var(--body); }

.lp-promise {
  margin-top:18px; display:flex; gap:14px; align-items:flex-start;
  background:rgba(245,140,20,.09); border:1px solid rgba(245,140,20,.3);
  border-radius:16px; padding:18px 20px; font-size:14.5px; line-height:1.75; color:var(--ink);
}
.lp-promise svg { width:22px; height:22px; color:var(--orange); flex:0 0 auto; margin-top:1px; }
.lp-promise a, .lp-honest a, .lp-card a { color:var(--orange); font-weight:700; text-decoration:none; }
.lp-promise a:hover, .lp-honest a:hover, .lp-card a:hover { text-decoration:underline; }
.lp-honest { margin-top:14px; font-size:13.5px; line-height:1.7; color:var(--muted); }

/* --- also searched as (the visible synonym line) -------------------------- */
.lp-also { background:linear-gradient(180deg,#fff, #fbfcff); }
.lp-terms { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.lp-terms li {
  background:#fff; border:1px solid var(--line); border-radius:100px;
  padding:7px 14px; font-size:13px; font-weight:600; color:var(--body);
}
.lp-terms li:hover { border-color:var(--orange); color:var(--orange); }
.lp-phrases {
  margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:13.5px; color:var(--muted);
}
.lp-phrases span { font-weight:800; color:var(--ink); }
.lp-phrases em { font-style:normal; background:var(--bg); border:1px dashed #cdd6e8; border-radius:8px; padding:5px 10px; color:var(--body); }

/* --- demos ---------------------------------------------------------------- */
.lp-demos { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.lp-demo {
  display:flex; flex-direction:column; gap:5px; text-decoration:none;
  background:var(--navy); color:#fff; border-radius:16px; padding:18px 20px;
  transition:transform .16s, box-shadow .16s;
}
.lp-demo:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(14,29,61,.24); text-decoration:none; }
.lp-demo strong { font-size:15.5px; font-weight:800; letter-spacing:-.01em; }
.lp-demo span { font-size:13px; line-height:1.6; color:#b9c4dd; }
.lp-demo em { font-style:normal; margin-top:6px; font-size:12.5px; font-weight:800; color:var(--orange-2); display:flex; align-items:center; gap:6px; }
.lp-demo em svg { width:14px; height:14px; }
.lp-demo-all { margin-top:14px; font-size:14px; }
.lp-demo-all a { display:inline-flex; align-items:center; gap:6px; }
.lp-demo-all svg { width:15px; height:15px; }
.lp-pop {
  background:var(--orange); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; border-radius:100px; padding:3px 8px; vertical-align:middle;
}

/* --- FAQ ------------------------------------------------------------------ */
.lp-faq { display:grid; gap:10px; }
.lp-faq details {
  background:var(--bg); border:1px solid var(--line); border-radius:14px;
  padding:0; overflow:hidden; transition:border-color .2s;
}
.lp-faq details[open] { border-color:rgba(245,140,20,.45); background:#fff; }
.lp-faq summary {
  cursor:pointer; list-style:none; padding:16px 18px;
  font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after {
  content:"+"; flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:1px solid var(--line);
  color:var(--orange); font-size:17px; font-weight:800; line-height:1;
}
.lp-faq details[open] summary::after { content:"–"; }
.lp-faq details > div { padding:0 18px 18px; }
.lp-faq details p { font-size:14.5px; line-height:1.8; color:var(--body); }

/* --- related / cross links ------------------------------------------------ */
.lp-related { display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.lp-related a {
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:15px 17px;
  transition:border-color .16s, transform .16s;
}
.lp-related a:hover { border-color:var(--orange); transform:translateY(-2px); text-decoration:none; }
.lp-related strong { font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.lp-related span { font-size:12.5px; line-height:1.6; color:var(--muted); }

.lp-cities-strip { margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); }
.lp-cities-strip > span { display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--ink); }
.lp-cities-strip > span svg { width:15px; height:15px; color:var(--orange); }
.lp-cities-strip a {
  text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:100px;
  padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--body);
}
.lp-cities-strip a:hover { border-color:var(--orange); color:var(--orange); text-decoration:none; }
.lp-cities-big { gap:10px; }
.lp-cities-big a { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; border-radius:14px; padding:11px 15px; }
.lp-cities-big a svg { width:14px; height:14px; color:var(--orange); display:inline-block; margin-right:6px; vertical-align:-2px; }
.lp-cities-big em { font-style:normal; font-size:11px; font-weight:600; color:var(--muted); }

/* --- city coverage list --------------------------------------------------- */
.lp-areas { list-style:none; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.lp-areas li {
  display:flex; gap:9px; align-items:center; background:var(--bg);
  border:1px solid var(--line); border-radius:12px; padding:10px 13px;
  font-size:13.5px; font-weight:600; color:var(--body);
}
.lp-areas svg { width:15px; height:15px; color:var(--orange); flex:0 0 auto; }

/* --- row link inside a price table ---------------------------------------- */
.lp-rowlink { color:var(--ink); text-decoration:none; }
.lp-rowlink:hover { color:var(--orange); text-decoration:underline; }

/* --- hub grid + search ---------------------------------------------------- */
.lp-search { margin:6px 0 20px; }
.lp-search label { display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.lp-search input {
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:100px;
  padding:13px 20px; transition:border-color .18s, box-shadow .18s;
}
.lp-search input:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(245,140,20,.13); background:#fff; }
.lp-search-empty { margin-top:12px; font-size:13.5px; color:var(--muted); }

.lp-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.lp-tile {
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:18px 19px;
  transition:border-color .16s, transform .16s, box-shadow .16s;
}
.lp-tile:hover { border-color:var(--orange); transform:translateY(-2px); box-shadow:0 12px 28px rgba(14,29,61,.09); text-decoration:none; }
.lp-tile[hidden] { display:none; }
.lp-tile-kind {
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--orange);
}
.lp-tile strong { font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.015em; line-height:1.3; }
.lp-tile-note { font-size:13px; line-height:1.65; color:var(--body); }
.lp-tile-price {
  margin-top:4px; font-size:13.5px; font-weight:800; color:var(--navy);
  border-top:1px solid var(--line); padding-top:9px;
}

/* --- final CTA ------------------------------------------------------------ */
.lp-cta {
  margin:46px 0 10px; text-align:center; color:#fff;
  background:linear-gradient(160deg,#0e1d3d,#1a3160);
  border-radius:24px; padding:clamp(30px,5vw,50px);
  box-shadow:0 18px 44px rgba(14,29,61,.2);
}
.lp-cta h2 { font-size:clamp(22px,3.6vw,30px); font-weight:800; letter-spacing:-.02em; }
.lp-cta p { margin:12px auto 0; max-width:560px; color:#c4cfe6; font-size:15px; line-height:1.7; }
.lp-cta-btns { margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.lp-cta .btn-ghost-l { background:#fff; border-color:#fff; color:var(--navy); }
.lp-cta .btn-ghost-l:hover { border-color:var(--orange-2); color:var(--orange); }
.lp-cta .btn-solid { display:inline-flex; align-items:center; gap:9px; }
.lp-cta .btn-solid svg { width:17px; height:17px; }

@media (max-width:620px) {
  .lp-includes, .lp-related, .lp-demos, .lp-grid { grid-template-columns:1fr; }
  .lp-steps li { padding:15px 16px; }
}

/* ------------------------------------------------------------------ *
 * City pages: what local businesses actually ask for.
 * Replaces the nationwide 13-row table that was duplicated verbatim on
 * all eight city pages (the doorway-page pattern). Each city shows only
 * the four kinds of site its own economy asks for, priced live.
 * ------------------------------------------------------------------ */
.lp-local { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 860px) { .lp-local { grid-template-columns: 1fr; } }
.lp-local-item {
  background: var(--surface, #12234a);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px; padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s ease, transform .2s ease;
}
.lp-local-item:hover { border-color: rgba(255, 138, 43, .45); transform: translateY(-2px); }
.lp-local-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-local-top a {
  color: #fff; font-weight: 800; font-size: 1.02rem; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease;
}
.lp-local-top a:hover { color: var(--orange, #ff8a2b); border-bottom-color: currentColor; }
.lp-local-price {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: .9rem;
  color: var(--orange, #ff8a2b); white-space: nowrap;
}
.lp-local-item p { margin: 0; color: rgba(255, 255, 255, .74); font-size: .93rem; line-height: 1.62; }
.lp-local-cta {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.lp-local-cta a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  color: rgba(255, 255, 255, .82); transition: color .2s ease;
}
.lp-local-cta a:hover { color: var(--orange, #ff8a2b); }
.lp-local-cta svg { width: 15px; height: 15px; flex: none; }

/* Compact buying strip — the full four-step process lives on /pricing. */
.lp-buying .pg-sec-head p { color: rgba(255, 255, 255, .74); }
.lp-buying .pg-sec-head a { color: var(--orange, #ff8a2b); font-weight: 700; text-decoration: none; }
.lp-buying .pg-sec-head a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * "Why it matters" — the authored problem statement plus the pages
 * this one is genuinely bought with, each priced live from the price
 * list. Added because the service pages were thin: ~1,100 words each
 * but only ~200 of them unique once site-wide scaffolding is removed.
 * ------------------------------------------------------------------ */
.lp-why .pg-sec-head p { color: rgba(255, 255, 255, .76); }
.lp-fits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .lp-fits { grid-template-columns: 1fr; } }
.lp-fit {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.lp-fit:hover { border-color: rgba(255, 138, 43, .5); background: rgba(255, 138, 43, .06); transform: translateY(-2px); }
.lp-fit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lp-fit-top strong { color: #fff; font-size: .99rem; font-weight: 800; }
.lp-fit-top em {
  font-style: normal; font-weight: 800; font-size: .82rem; white-space: nowrap;
  color: var(--orange, #ff8a2b); font-variant-numeric: tabular-nums;
}
.lp-fit-note { color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.6; }
.lp-fit-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .8);
  transition: color .2s ease;
}
.lp-fit:hover .lp-fit-go { color: var(--orange, #ff8a2b); }
.lp-fit-go svg { width: 14px; height: 14px; flex: none; }