/* ==========================================================================
   Shared components.
   These were originally written inside home.css and city.css, which meant the
   service, solution, portfolio and terms pages used them without ever loading
   them. That is why breadcrumb chevrons and FAQ icons rendered at their default
   300x150 size and blew the hero open. They live here now and load everywhere.
   ========================================================================== */

/* Safety net. An inline SVG with no size defaults to 300x150 in every browser.
   Specificity 0,0,1 so any component rule still wins. */
svg{width:1em;height:1em}

/* Section title used on service, solution and legal pages. */
.sec-title{font-family:var(--f-display);font-weight:700;color:var(--ink);line-height:1.15}

.section{padding:52px 0}

.section-alt{background:var(--light-gray)}

.sec-head{text-align:center;max-width:62ch;margin:0 auto 28px}

.sec-head .mono-label{display:inline-block;margin-bottom:10px}

.sec-head h2{font-size:clamp(1.6rem,5.6vw,2.5rem);margin-bottom:10px}

.sec-head p{color:var(--muted);font-size:.98rem}

.section-dark .sec-head p{color:var(--on-dark-muted)}

.rule{width:56px;height:3px;background:var(--primary);border-radius:3px;margin:0 auto 14px}

.section-dark .rule{background:var(--accent)}

.hero .mono-label{color:#8FD3BA;display:inline-flex;align-items:center;gap:.5rem}

.hero .mono-label::before,.hero .mono-label::after{content:"";width:22px;height:1px;background:#8FD3BA}

.faq{max-width:800px;margin:0 auto}

.faq-item{border-bottom:1px solid var(--border)}

.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:58px;padding:14px 0;text-align:left;
  font-size:1rem;font-weight:600;color:var(--ink);
}

.faq-q svg{width:18px;height:18px;color:var(--primary);flex:0 0 auto;transition:transform .28s ease}

.faq-q[aria-expanded="true"]{color:var(--primary)}

.faq-q[aria-expanded="true"] svg{transform:rotate(45deg)}

.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}

.faq-a[data-open="true"]{grid-template-rows:1fr}

.faq-a > div{overflow:hidden}

.faq-a p{padding:0 0 18px;font-size:.93rem;color:var(--muted);line-height:1.7;max-width:70ch}

.cta-band{
  background:var(--primary-dark);color:var(--white);text-align:center;padding:44px 0;
  position:relative;overflow:hidden;
}

.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 50% 0%,rgba(46,155,120,.35),transparent 70%);
}

.cta-band > .container{position:relative}

.cta-band h2{font-size:clamp(1.6rem,5.6vw,2.4rem);color:var(--white);margin-bottom:10px}

.cta-band p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto 22px;font-size:.98rem}

.cta-actions{display:grid;gap:10px;max-width:330px;margin:0 auto}

.cta-actions .btn-gold{background:var(--white);color:var(--primary-dark)}

@media (min-width:600px){
  .section{padding:64px 0}
  .hero-actions,.cta-actions{grid-template-columns:1fr 1fr;max-width:430px}
}

@media (min-width:900px){
  .section{padding:84px 0}
  .sec-head{margin-bottom:38px}
}

.crumb{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem;margin-bottom:14px;
  font-size:.74rem;color:rgba(255,255,255,.55);
}

.crumb a{color:rgba(255,255,255,.75)}

.crumb a:hover{color:var(--white)}

.crumb svg{width:12px;height:12px;opacity:.6}

.city-hero .lede{
  color:rgba(255,255,255,.8);font-size:clamp(.95rem,3.4vw,1.1rem);
  max-width:58ch;margin:0 auto 22px;
}

.nearby{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

.nearby a{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:9px 15px;border-radius:10px;
  background:var(--white);border:1px solid var(--border);
  font-size:.88rem;font-weight:500;color:var(--ink-2);transition:var(--transition);
}

.nearby a svg{width:14px;height:14px;color:var(--accent)}

@media (hover:hover){
  .nearby a:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
}