/* ============================================================
   LOCATION PAGES — visual refresh to match /for-agencies/
   ============================================================
   Linked only on the 45 /locations/*/ pages, after /style.css.
   Copy/section-types are unchanged — this file only restyles.

   Rules here override shared classes (.svc-hero, .ghl-services-grid,
   .faq-list, .section-tag, etc.) that also exist on service pages.
   That's safe: this stylesheet is only ever <link>ed on location
   pages, so nothing here reaches the other 39+ pages that share
   those class names. No :root block is defined, so there is no
   custom-property collision with style.css or partner.css either.
   ============================================================ */

/* ---------- section header polish (loc-section-head is location-only) ---------- */
.loc-section-head h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}

/* ---------- hero: two-column split + facts panel ---------- */
/* style.css only pads .svc-hero below 768px, but .navbar is fixed at 100px
   (76px on mobile) — so the top of the hero sat underneath it. */
.svc-hero{padding:calc(100px + clamp(1.5rem,3vw,3rem)) 0 clamp(2.5rem,6vw,4.5rem)}
@media(max-width:768px){.svc-hero{padding:calc(76px + 1.25rem) 0 clamp(2rem,6vw,3rem)}}
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;text-align:left}
.hero-split .breadcrumb{justify-content:flex-start;display:flex}
.hero-split .section-tag{display:inline-flex}
.hero-split .section-title{text-align:left}
.hero-split .section-subtitle{margin:1rem 0 1.75rem!important;max-width:520px;text-align:left}
.hero-split .sf-hero-ctas,.hero-split .kw-pills{justify-content:flex-start!important}
/* .kw-pills has justify-content but no display:flex in style.css, so the pills
   were inline and broke across lines mid-label. */
.kw-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.hero-split .kw-pills{margin-top:1rem}
.kw-pill{white-space:nowrap}
/* .btn is white-space:nowrap sitewide, so the longest city CTAs
   ("… — Washington, D.C.") got clipped on narrow phones. Let this one wrap. */
@media(max-width:420px){
  .hero-split .sf-hero-ctas .btn{white-space:normal;max-width:100%;line-height:1.35;text-align:center}
}
.hero-facts{align-self:center}
.facts-panel{border:2px solid #0A0A0A;border-radius:16px;background:#fff;padding:1.5rem 1.6rem 1.7rem;box-shadow:0 20px 60px rgba(10,10,10,.12)}
.facts-panel h3{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#6B6869;padding-bottom:.9rem;margin-bottom:.2rem;border-bottom:1px solid rgba(10,10,10,.14)}
.facts-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(10,10,10,.1);font-size:.87rem}
.facts-row:last-of-type{border-bottom:none}
.facts-row span:first-child{color:#6B6869;flex:0 0 auto}
.facts-row span:last-child{font-weight:800;text-align:right;color:#0A0A0A}
@media(max-width:900px){
  /* mirror /for-agencies/'s stacked hero order — heading, then the facts panel,
     then the body copy. .hero-copy dissolves so the two columns can interleave;
     gap goes to 0 because each child already carries its own margins. */
  .hero-split{grid-template-columns:1fr;gap:0}
  .hero-copy{display:contents}
  .hero-split .breadcrumb{order:1}
  .hero-split .section-tag{order:2;justify-self:start}
  .hero-split .section-title{order:3}
  .hero-facts{order:4;max-width:460px;margin:1.5rem 0 .5rem}
  .hero-split .section-subtitle{order:5}
  .hero-split .sf-hero-ctas{order:6}
  .hero-split .kw-pills{order:7}
}

/* ---------- card grids: services / industries / related / results / process ---------- */
.ghl-svc-card,.loc-info-card,.loc-related-card,.loc-result-card,.loc-step-card{
  border-radius:16px;box-shadow:0 2px 10px rgba(10,10,10,.04);transition:border-color .2s,transform .2s,box-shadow .2s
}
.ghl-svc-card:hover,.loc-info-card:hover,.loc-result-card:hover,.loc-step-card:hover{
  border-color:rgba(229,29,42,.35);transform:translateY(-3px);box-shadow:0 10px 30px rgba(10,10,10,.08)
}
.loc-related-card:hover{box-shadow:0 8px 20px rgba(10,10,10,.08)}

/* numbered badge on "Our Process" step cards */
.loc-steps{counter-reset:locstep}
.loc-step-card{position:relative;padding-top:2.1rem!important}
.loc-step-card::before{
  counter-increment:locstep;content:counter(locstep);position:absolute;top:-16px;left:1.6rem;
  width:32px;height:32px;border-radius:50%;background:#E51D2A;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800
}

/* ---------- dark CTA bands ---------- */
.loc-section--dark{position:relative;overflow:hidden}
.loc-section--dark::before{
  content:'';position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(229,29,42,.22) 0%,transparent 68%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none
}
.loc-section--dark .container{position:relative;z-index:1}
.loc-cta-panel h3{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:.75rem}

/* ---------- FAQ: single-column accordion (matches /for-agencies/'s .lb-faq) ---------- */
/* .sf-faq-section .faq-list in style.css is a 2-class selector (grid, 3 cols) —
   matched here at equal specificity so this rule (loaded after style.css) wins. */
.sf-faq-section .faq-list{display:block;max-width:820px;margin:0 auto}
/* .sf-faq-section .faq-col in style.css is a 2-class selector too — match it. */
.sf-faq-section .faq-col{display:contents}
/* the items are split across several .faq-col wrappers, so an adjacent-sibling
   margin leaves every column boundary flush — give each item its own margin. */
.sf-faq-section .faq-item{margin:0 0 14px}
.sf-faq-section .faq-col:last-child .faq-item:last-child{margin-bottom:0}
.faq-icon{transition:transform .25s ease}
.faq-item[open] .faq-icon{transform:rotate(180deg);background:rgba(229,29,42,.12)}
.faq-item[open] .faq-icon i{color:#E51D2A}

/* ---------- testimonial / review sections: consistent rhythm ---------- */
.sf-testimonial-section,.sf-faq-section{padding:clamp(3.5rem,7vw,6rem) 0}