/* Fixology Hub city acquisition layout polish.
 * Keeps city SEO context useful while carrying the approved homepage visual
 * language into Berkeley, San Francisco, and Walnut Creek acquisition pages.
 * Presentation only: intake, routing, serviceability, pricing, booking, payment,
 * and policy authority remain unchanged.
 */

/* Reserve media space so external city-hub photography cannot shift card copy. */
body.fx-city-hub .fx-service-card .fx-card-image,
body.fx-city-hub .fx-article-card > a > img {
  aspect-ratio: 4 / 3;
}
body.fx-city-hub .fx-service-card .fx-card-image{display:block;overflow:hidden}
body.fx-city-hub .fx-service-card .fx-card-image img,
body.fx-city-hub .fx-article-card > a > img {
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
}

body.fx-city-hub{background:#fff}
body.fx-city-hub .fx-hero.fx-hero-home{max-width:none;padding:68px max(28px,calc((100vw - 1144px)/2)) 76px;grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr);gap:clamp(48px,5vw,76px);background:radial-gradient(circle at 86% 14%,rgba(0,141,210,.10),transparent 28%),linear-gradient(180deg,var(--paper) 0%,var(--blue-soft) 100%);border-bottom:1px solid var(--line)}
body.fx-city-hub .fx-hero-copy{max-width:650px}
/* Match the owner-approved homepage's calmer 63px desktop headline ceiling so
 * acquisition pages feel like the same product rather than a louder SEO layer. */
body.fx-city-hub .fx-hero h1{max-width:650px;font-size:clamp(48px,4.7vw,63px);line-height:1;letter-spacing:-.045em;color:var(--ink)}
body.fx-city-hub .fx-lede{max-width:620px;margin-top:22px;color:var(--muted);font-size:18px;line-height:1.62}
body.fx-city-hub .fx-context-note{max-width:620px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--blue-soft);color:var(--blue-dark);box-shadow:var(--shadow-sm)}
body.fx-city-hub .fx-hero-notes{gap:9px;margin-top:20px}
body.fx-city-hub .fx-hero-notes span{padding:8px 12px;border-color:var(--line);background:#fff;color:var(--ink-2)}
body.fx-city-hub .fx-intake-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;padding:28px;background:#fff;box-shadow:var(--shadow)}
body.fx-city-hub .fx-intake-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue) 0 68%,var(--red) 68% 100%)}
body.fx-city-hub .fx-intake-heading{margin-bottom:18px;padding-top:2px}
body.fx-city-hub .fx-intake-heading strong{color:var(--ink);font-size:15px}
body.fx-city-hub textarea,body.fx-city-hub .fx-location{border-color:var(--line);background:var(--paper)}
body.fx-city-hub .fx-photo{border-color:var(--line);background:var(--blue-soft)}
body.fx-city-hub .fx-primary{min-height:52px;border-radius:14px}
body.fx-city-hub .fx-proof.fx-proof-home{max-width:1200px;margin-top:34px;margin-bottom:104px;gap:14px}
body.fx-city-hub .fx-proof>div{min-height:150px;padding:25px 26px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-sm)}
body.fx-city-hub .fx-proof>div:first-child,body.fx-city-hub .fx-proof>div:last-child{border-radius:22px}
body.fx-city-hub .fx-proof strong{color:var(--ink);font-size:17px;letter-spacing:-.015em}
body.fx-city-hub .fx-proof span{color:var(--muted);line-height:1.58}
body.fx-city-hub .fx-proof>div:nth-child(2){background:var(--blue-soft);border-color:var(--line)}
body.fx-city-hub .fx-editorial-image{border-radius:22px;box-shadow:var(--shadow-sm)}
body.fx-city-hub .fx-mini-points span{border-color:var(--line);border-radius:13px;background:var(--blue-soft)}
body.fx-city-hub .fx-service-card,body.fx-city-hub .fx-article-card{border-color:var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm)}
body.fx-city-hub .fx-service-card:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}

@media (min-width: 681px) {
  body.fx-city-hub .fx-article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  body.fx-city-hub .fx-service-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 681px) and (max-width: 1099px) {
  body.fx-city-hub .fx-service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:900px){body.fx-city-hub .fx-hero.fx-hero-home{grid-template-columns:1fr;gap:34px;padding-top:52px}body.fx-city-hub .fx-hero-copy,body.fx-city-hub .fx-hero h1,body.fx-city-hub .fx-lede,body.fx-city-hub .fx-context-note{max-width:720px}body.fx-city-hub .fx-intake-card{width:100%;max-width:720px}}

/* Simplified-homepage density for phones: preserve the problem-first conversion
 * path while removing the old page's oversized vertical rhythm. */
@media(max-width:680px){
 body.fx-city-hub .fx-hero.fx-hero-home{padding:32px 18px 38px;gap:24px}
 body.fx-city-hub .fx-hero h1{font-size:clamp(38px,11vw,48px);line-height:.98;letter-spacing:-.045em}
 body.fx-city-hub .fx-lede{margin-top:14px;font-size:16px;line-height:1.48}
 body.fx-city-hub .fx-context-note{margin-top:14px;padding:12px 13px;border-radius:12px;font-size:14px;line-height:1.45}
 body.fx-city-hub .fx-hero-notes{gap:7px;margin-top:14px}
 body.fx-city-hub .fx-hero-notes span{padding:7px 10px;font-size:11px;line-height:1.3}
 body.fx-city-hub .fx-intake-card{padding:18px;border-radius:18px;box-shadow:var(--shadow-sm)}
 body.fx-city-hub .fx-intake-heading{margin-bottom:14px;gap:8px;flex-wrap:wrap}
 body.fx-city-hub .fx-intake-heading small{width:100%;margin-left:0}
 body.fx-city-hub textarea{min-height:108px}
 body.fx-city-hub .fx-proof.fx-proof-home{grid-template-columns:1fr;gap:10px;padding-left:18px;padding-right:18px;margin-top:20px;margin-bottom:52px}
 body.fx-city-hub .fx-proof>div,body.fx-city-hub .fx-proof>div:first-child,body.fx-city-hub .fx-proof>div:last-child{min-height:0;padding:18px;border-radius:14px}
 body.fx-city-hub .fx-feature-split,body.fx-city-hub .fx-service-band,body.fx-city-hub .fx-guides-home{padding-left:18px;padding-right:18px}
 body.fx-city-hub .fx-feature-split{margin-bottom:52px}
 body.fx-city-hub .fx-service-band,body.fx-city-hub .fx-guides-home{padding-top:50px;padding-bottom:50px}
 body.fx-city-hub .fx-feature-copy h2,body.fx-city-hub .fx-section-heading h2,body.fx-city-hub .fx-page-narrative h2,body.fx-city-hub .fx-final-cta h2{font-size:clamp(30px,9vw,38px);line-height:1.04;letter-spacing:-.035em}
 body.fx-city-hub .fx-editorial-image{border-radius:16px}
 body.fx-city-hub .fx-editorial-image img{height:68vw;min-height:220px;max-height:310px}
 body.fx-city-hub .fx-service-cards{grid-template-columns:1fr;gap:12px}
 body.fx-city-hub .fx-service-card{min-width:0;border-radius:14px;overflow:hidden}
 body.fx-city-hub .fx-service-card .fx-card-image{aspect-ratio:16/9}
 body.fx-city-hub .fx-article-grid{grid-template-columns:1fr;gap:12px}
 body.fx-city-hub .fx-article-card{min-width:0;border-radius:14px}
 body.fx-city-hub .fx-article-card > a > img{aspect-ratio:16/9}
 body.fx-city-hub .fx-page-narrative{margin-left:18px;margin-right:18px;margin-bottom:52px}
 body.fx-city-hub .fx-final-cta{margin-left:18px;margin-right:18px}
}
@media(max-width:430px){
 body.fx-city-hub .fx-hero.fx-hero-home{padding:28px 14px 34px;gap:20px}
 body.fx-city-hub .fx-hero h1{font-size:37px}
 body.fx-city-hub .fx-intake-card{padding:16px}
 body.fx-city-hub .fx-proof.fx-proof-home,body.fx-city-hub .fx-feature-split,body.fx-city-hub .fx-service-band,body.fx-city-hub .fx-guides-home{padding-left:14px;padding-right:14px}
 body.fx-city-hub .fx-service-cards{gap:10px}
 body.fx-city-hub .fx-page-narrative,body.fx-city-hub .fx-final-cta{margin-left:14px;margin-right:14px}
}