/* City landing pages — the few components those pages need that the rest of
   the site does not already define. Scoped to classes only used there, so it
   cannot affect the homepage or the service pages. Tokens come from site.css. */

.hero-sub{
  padding:clamp(6.5rem,12vw,9rem) 0 clamp(2.5rem,5vw,3.5rem);
  position:relative;
}
.hero-sub h1{
  font-size:clamp(2.1rem,5.6vw,3.6rem);
  line-height:1.05;
  letter-spacing:-.03em;
  margin:.6rem 0 0;
}
.hero-sub .lede{max-width:62ch;margin-top:1.1rem}
.hero-sub .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}

.crumbs{
  font-size:.82rem;color:var(--muted-2);display:flex;gap:8px;align-items:center;
}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{color:var(--accent-2)}

.wrap.narrow{max-width:820px}

/* service cards ------------------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:1.6rem;
}
.card{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 20px;
  text-decoration:none;
  color:inherit;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  background:var(--surface-2);
}
.card h3{
  font-size:1.06rem;
  letter-spacing:-.02em;
  margin:0 0 .5rem;
}
.card p{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
  margin:0 0 .9rem;
}
.card .pill{font-size:.78rem}

/* FAQ accordion ------------------------------------------------------- */
.qa{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  margin-bottom:10px;
  overflow:hidden;
}
.qa[open]{border-color:var(--line-2)}
.qa summary{
  cursor:pointer;
  list-style:none;
  padding:16px 48px 16px 18px;
  font-weight:600;
  font-size:1rem;
  position:relative;
  color:var(--text);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-2)}
.qa summary::after{
  content:"";
  position:absolute;right:18px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.qa[open] summary::after{transform:rotate(135deg)}
.qa .ans{padding:0 18px 18px}
.qa .ans p{color:var(--muted);font-size:.94rem;line-height:1.7;margin:0}

@media (prefers-reduced-motion:reduce){
  .card,.qa summary::after{transition:none}
}

/* .sec is not defined elsewhere in the stylesheet, so define the section
   rhythm the city pages rely on rather than inheriting nothing. */
.sec{padding:clamp(2.6rem,6vw,4.5rem) 0;position:relative}
.sec h2{
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  letter-spacing:-.025em;
  margin:0 0 .4rem;
}
.sec p{color:var(--muted);line-height:1.7}
.sec .wrap.narrow p + p{margin-top:1rem}
.sec a{color:var(--accent)}
.sec a:hover{color:var(--accent-2)}

/* the sub-page hero replaces .hero, so it carries its own backdrop */
.hero-sub::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(88vw,860px);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 64%);
}
.hero-sub{isolation:isolate;overflow:hidden}

/* Alignment: the sub-page hero is left-aligned, so the buttons and the lower
   sections have to follow it. .hero-cta centres itself for the homepage hero
   and .wrap.narrow centres its column, both of which fight the left edge here. */
.hero-sub .hero-cta{justify-content:flex-start}
.sec .wrap.narrow{max-width:none}
.sec .wrap.narrow > *{max-width:70ch}
.sec h2{margin:0 0 1rem}
.sec p{margin:0 0 1rem}
.sec p:last-child{margin-bottom:0}
.qa{max-width:70ch}