/* ==========================================================================
   Phase — Local Visibility (services/local-visibility)
   The flow system (css/flow.css) in the poster theme (css/home.css: the
   palette, the sticker hero, the manifesto, the kind words and the close;
   js/home.js), with the pricing page's dealt packages and location-pages
   card (css/pricing.css, js/pricing.js). What's particular to this page:

   - a yellow disc (local visibility's colour on the homepage)
   - the search card: a local search types itself out and puts "Your
     business" first (js/local-visibility.js), on a blue slab
   - the two cases as colour slabs, each with its numbers and its chart
     (js/proof-charts.js) on a white card
   - the town and industry pages as chips
   ========================================================================== */

body.lv-page{--hm-ground:var(--p-yellow)}

/* ==========================================================================
   HERO
   ========================================================================== */
.lv-page .hm-sun{--s:clamp(250px,28vw,480px);left:66%;top:50%}
.lv-page .hm-hero h1{font-size:clamp(3.8rem,13vw,13rem);letter-spacing:-.06em}
.lv-page .hm-hero__sub{font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.01em;color:#0a0a0a}

/* ==========================================================================
   THE SEARCH
   ========================================================================== */
.lv-find{padding:clamp(120px,13vw,190px) 0 clamp(100px,11vw,160px);background:var(--fl-bg);overflow-x:clip}
.lv-find__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px);align-items:center}
.lv-find .fl-h2{max-width:11ch}
.lv-find__demo{
  position:relative;
  padding:clamp(34px,5vw,72px) clamp(22px,4vw,60px);
  border-radius:40px;
  background:var(--p-blue);
}
.lv-find__sticker{position:absolute;z-index:2;height:auto;filter:drop-shadow(0 16px 20px rgba(10,10,10,.22))}
.lv-find__sticker--a{right:clamp(-30px,-2vw,-12px);top:clamp(-46px,-3.4vw,-24px);width:clamp(80px,8.6vw,128px);transform:rotate(14deg)}
.lv-find__sticker--b{left:clamp(-26px,-1.8vw,-10px);bottom:clamp(-40px,-3vw,-20px);width:clamp(54px,5.4vw,80px);transform:rotate(-16deg)}
.lv-search{
  position:relative;
  z-index:1;
  padding:clamp(14px,1.6vw,20px);
  border-radius:26px;
  color:#0a0a0a;
  background:var(--fl-surface);
  box-shadow:0 40px 70px -36px rgba(10,10,10,.65);
  transform:rotate(-2deg);
}
.lv-search__bar{
  display:flex;
  align-items:center;
  gap:12px;
  height:clamp(52px,4.6vw,62px);
  padding:0 20px;
  border-radius:var(--radius-pill);
  border:2.5px solid #0a0a0a;
  font-size:clamp(1rem,1.4vw,1.2rem);
  font-weight:500;
}
.lv-search__bar svg{flex:none;width:20px;height:20px}
.lv-search__q{white-space:nowrap}
.lv-search__caret{width:2px;height:1.25em;margin-left:-8px;background:#0a0a0a;animation:lv-blink 1s steps(1) infinite}
@keyframes lv-blink{50%{opacity:0}}
.lv-search__results{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lv-result{display:flex;align-items:center;gap:14px;min-height:70px;padding:12px 16px;border-radius:18px;background:var(--fl-bg-2)}
.lv-result__pin{
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  border-radius:50%;
  font-family:var(--fl-mono);
  font-size:.82rem;
  font-weight:500;
  color:#fff;
  background:rgba(10,10,10,.28);
}
.lv-result--you{background:var(--p-yellow);box-shadow:0 18px 30px -20px rgba(10,10,10,.55)}
.lv-result--you .lv-result__pin{background:var(--p-red)}
.lv-result__body{min-width:0}
.lv-result__name{display:block;font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:700;letter-spacing:-.01em}
.lv-result__meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font-size:.86rem;color:rgba(10,10,10,.72)}
.lv-result__stars{letter-spacing:1px;color:#0a0a0a}
.lv-result__badge{
  flex:none;
  margin-left:auto;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  font-family:var(--fl-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:#0a0a0a;
  transform:rotate(6deg);
}
.lv-result__lines{display:flex;flex:1;flex-direction:column;gap:8px}
.lv-result__lines i{display:block;width:80%;height:9px;border-radius:5px;background:rgba(10,10,10,.12)}
.lv-result__lines i:first-child{width:50%}

/* ==========================================================================
   PROOF — the cases
   ========================================================================== */
.lv-proof{padding:clamp(110px,12vw,170px) 0;background:var(--fl-bg-2);overflow-x:clip}
.lv-case{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  padding:clamp(28px,4.4vw,64px);
  border-radius:40px;
  color:var(--fg);
  background:var(--c);
  box-shadow:0 50px 90px -60px rgba(10,10,10,.55);
}
.lv-case + .lv-case{margin-top:clamp(28px,3.4vw,48px)}
.lv-case--briar{--c:var(--p-green);--fg:#0a0a0a}
.lv-case--mastering{--c:var(--p-blue);--fg:#fff}
.lv-case__sticker{
  position:absolute;
  right:clamp(-30px,-2vw,-12px);
  top:clamp(-50px,-3.6vw,-26px);
  z-index:2;
  width:clamp(80px,8.4vw,124px);
  height:auto;
  transform:rotate(12deg);
  filter:drop-shadow(0 16px 20px rgba(10,10,10,.22));
}
.lv-case--mastering .lv-case__sticker{width:clamp(56px,5.6vw,84px);transform:rotate(-14deg)}
.lv-case__client{font-family:var(--fl-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:inherit;opacity:.8}
.lv-case__title{max-width:13ch;margin-top:14px;font-size:clamp(2rem,3.6vw,3.3rem);font-weight:600;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.lv-case__lede{max-width:46ch;margin-top:18px;font-size:1.05rem;line-height:1.6;color:inherit;opacity:.86}
.lv-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
  padding-top:24px;
  border-top:2px solid color-mix(in srgb,var(--fg) 30%,transparent);
}
.lv-stats b{display:block;font-size:clamp(2rem,3.4vw,3rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.lv-stats span{display:block;margin-top:8px;font-size:.88rem;line-height:1.35;opacity:.82}
.lv-case__quote{display:flex;align-items:flex-start;gap:14px;margin-top:28px}
.lv-case__quote img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 3px var(--fg)}
.lv-case__quote blockquote{max-width:52ch;font-size:1rem;font-weight:500;line-height:1.5}
.lv-case__quote figcaption{margin-top:8px;font-size:.85rem;opacity:.75}
.lv-case__btn{margin-top:28px;color:var(--c);background:var(--fg)}
.lv-case__btn:hover{box-shadow:0 14px 30px -14px rgba(10,10,10,.6)}

/* the chart on a white card, inked to match */
.lv-case__chart .cs-chart{
  --cs-rgb:10,10,10;
  margin:0;
  color:#0a0a0a;
  border:0;
  border-radius:28px;
  background:var(--fl-surface);
  box-shadow:0 40px 70px -40px rgba(10,10,10,.6);
  transform:rotate(1.5deg);
}
.lv-case--mastering .cs-chart{transform:rotate(-1.5deg)}
.lv-case__chart .cs-chart__eyebrow{font-family:var(--fl-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.lv-case__chart .cs-chart__line{stroke-width:4.5}
.lv-case__chart .cs-chart__num{font-size:clamp(2.4rem,3.6vw,3.2rem);font-weight:600;letter-spacing:-.05em}
.lv-case__chart .cs-chart__hit{background:var(--p-red);border-color:#0a0a0a;box-shadow:0 0 0 5px rgba(255,77,54,.25)}
.lv-case__chart .cs-chart__hit::before,
.lv-case__chart .cs-chart__hit::after{border-color:var(--p-red)}
.lv-case__chart .cs-chart__callout{border:2px solid #0a0a0a;background:#fff;box-shadow:0 14px 28px -12px rgba(10,10,10,.45)}
.lv-case__chart .cs-chart__callout::after{border-color:#0a0a0a;border-width:0 2px 2px 0;border-style:solid}
.lv-case__chart .cs-chart__callout-icon{color:#0a0a0a;background:var(--p-yellow);box-shadow:none}

/* ==========================================================================
   LOCAL WORK / PROCESS / OUR OWN PAGES
   ========================================================================== */
.lv-work .fl-run__stage{padding-top:clamp(120px,12vw,170px)}
.lv-page .fl-process{background:var(--fl-bg)}
.lv-areas{padding:clamp(110px,12vw,170px) 0 clamp(90px,10vw,140px);background:var(--fl-bg-2)}
.lv-areas__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,100px);align-items:start}
.lv-areas__head{position:sticky;top:calc(var(--fl-nav) + 30px)}
.lv-areas__group + .lv-areas__group{margin-top:36px}
.lv-areas__title{margin-bottom:14px;font-family:var(--fl-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fl-faint)}
.lv-chips{display:flex;flex-wrap:wrap;gap:10px}
.lv-chips a{
  display:inline-flex;
  align-items:center;
  padding:11px 18px;
  border-radius:var(--radius-pill);
  border:2px solid #0a0a0a;
  background:var(--fl-surface);
  font-size:.95rem;
  font-weight:500;
  transition:background-color .25s,color .25s,transform .35s var(--fl-ease);
}
.lv-chips a:hover{--h:var(--p-yellow);background:var(--h);transform:translateY(-3px) rotate(-2deg)}
.lv-chips a:nth-child(4n+2):hover{--h:var(--p-pink);transform:translateY(-3px) rotate(2deg)}
.lv-chips a:nth-child(4n+3):hover{--h:var(--p-green)}
.lv-chips a:nth-child(4n+4):hover{color:#fff;--h:var(--p-blue);transform:translateY(-3px) rotate(2deg)}

/* ==========================================================================
   PACKAGES / KIND WORDS / QUESTIONS / CLOSE
   ========================================================================== */
.lv-page .pr-packages{background:var(--fl-bg)}
.lv-page .pr-loc{background:var(--fl-bg)}
.lv-words{padding:clamp(100px,11vw,160px) 0 clamp(50px,6vw,80px);background:var(--fl-bg-2)}
.lv-words .fl-head{margin-bottom:clamp(20px,2.4vw,34px)}
.lv-faq{padding:clamp(90px,10vw,150px) 0 clamp(60px,7vw,100px)}
.lv-faq .faq-list{max-width:860px;margin:0 auto}
.lv-faq__more{margin-top:28px;text-align:center}
.lv-cta .fl-cta__title{max-width:12ch}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .lv-find__grid{grid-template-columns:minmax(0,1fr)}
  .lv-case{grid-template-columns:minmax(0,1fr);border-radius:32px}
  .lv-areas__grid{grid-template-columns:minmax(0,1fr)}
  .lv-areas__head{position:static}
}
@media (max-width:600px){
  .lv-page .hm-hero .fl-actions{flex-direction:column;align-items:center}
  .lv-find__demo{border-radius:30px}
  .lv-result__badge{position:absolute;right:10px;top:-12px}
  .lv-result--you{position:relative}
  .lv-stats{gap:12px}
  .lv-stats b{font-size:1.7rem}
  .lv-stats span{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .lv-search__caret{animation:none}
}