:root{
  --brand: #B5551F; --brand-dark:#12303A; --accent: #2F4858;
  --ink:#1B2430; --body:#4a5568; --line:#e4e8ef; --bg:#fff; --soft:#f6f8fb;
  --radius:14px; --shadow:0 4px 24px rgba(14,20,32,.08);
  --shadow-lg:0 18px 50px rgba(14,20,32,.16);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--body);background:var(--bg);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.narrow{max-width:780px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:18px;height:96px}
.logo{display:flex;align-items:baseline;gap:2px;font-weight:900;font-size:1.5rem;
  color:var(--ink);letter-spacing:-.04em;text-decoration:none}
.logo b{color:var(--brand)}
.logo span.sub{display:block;font-size:.62rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);margin-top:-4px}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{color:var(--ink);font-weight:600;font-size:1.06rem;text-decoration:none}
nav.main a:hover{color:var(--brand)}
/* current page marker */
nav.main a.on{color:var(--brand);position:relative}
nav.main a.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;
  border-radius:2px;background:var(--brand)}
/* logo: was far too small against the nav */
.logo img{display:block;height:76px;width:auto}
@media(max-width:900px){.logo img{height:56px}}
/* header call button: white text, always */
.btn.hdr-cta,.btn.hdr-cta:hover,.btn.hdr-cta:visited,.btn.hdr-cta:focus{color:#fff!important}
/* trade marks replace the emoji icons */
.card .ico{display:flex!important;align-items:center;justify-content:center;
  width:68px;height:68px;flex:0 0 68px;padding:0;line-height:0;font-size:0;
  border-radius:18px;background:var(--brand);color:#fff;margin:0 0 18px;
  box-shadow:0 6px 16px rgba(0,0,0,.12)}
.card .ico svg{display:block;width:40px;height:40px;stroke-width:1.85}
@media(max-width:600px){.card .ico{width:60px;height:60px;flex:0 0 60px}
  .card .ico svg{width:35px;height:35px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:#fff;border:0;padding:14px 26px;border-radius:10px;
  font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  font-family:var(--font)}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.16);text-decoration:none;color:#fff}
.btn.accent{background:#fff;color:var(--brand-dark)}
.btn.accent:hover{background:#f2f6f3;color:var(--brand-dark)}
.btn.sm{padding:13px 22px;font-size:1rem}
.btn.block{width:100%;padding:17px 26px;font-size:1.06rem}
.burger{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer;padding:4px 8px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(140deg,var(--brand-dark) 0%,var(--brand) 55%,var(--brand-dark) 100%);
  color:#fff;padding:70px 0 78px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:radial-gradient(circle at 78% 22%,#fff 0%,transparent 46%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.hero h1{color:#fff;margin-bottom:.35em}
.hero .lede{font-size:1.16rem;color:rgba(255,255,255,.93);max-width:38em;margin-bottom:26px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);color:#fff;padding:7px 16px;border-radius:100px;
  font-size:.79rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:22px}
.dot{width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.hero-points{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:11px}
.hero-points li{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.95);font-weight:600}
.tick{flex:0 0 22px;height:22px;border-radius:50%;background:#fff;color:var(--brand-dark);
  display:grid;place-items:center;font-size:.76rem;font-weight:900;margin-top:2px}

/* ---------- form card ---------- */
.card-form{background:#fff;border-radius:18px;padding:30px;box-shadow:var(--shadow-lg);color:var(--body)}
.card-form h2{font-size:1.42rem;margin-bottom:4px}
.card-form .sub{font-size:.94rem;margin-bottom:20px;color:var(--body)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:6px;
  letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:10px;font-size:1rem;font-family:var(--font);color:var(--ink);background:#fff;
  transition:border-color .12s ease,box-shadow .12s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.field textarea{min-height:88px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  overflow:hidden!important}
.formnote{font-size:.79rem;color:#7a8699;text-align:center;margin:12px 0 0;line-height:1.5}
.formerr{display:none;background:#fdecec;border:1px solid #f5c2c2;color:#a02020;padding:11px 14px;
  border-radius:9px;font-size:.9rem;margin-bottom:12px}

/* ---------- sections ---------- */
section{padding:74px 0}
section.soft{background:var(--soft)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 46px}
.sec-head p{font-size:1.06rem}
.kicker{display:block;font-size:.79rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:12px}
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.card h3{margin-bottom:8px}
.card p{font-size:.96rem;margin:0}
.card a.more{display:inline-block;margin-top:14px;font-weight:700;font-size:.92rem}

/* ---------- trust bar ---------- */
.trust{background:var(--ink);color:#fff;padding:0}
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;padding-top:34px;padding-bottom:34px}
.trust .t{text-align:center}
.trust .n{font-size:1.85rem;font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.03em}
.trust .l{font-size:.83rem;color:rgba(255,255,255,.72);font-weight:600;margin-top:4px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:s}
.step{position:relative;padding-top:8px}
.step:before{counter-increment:s;content:counter(s);display:grid;place-items:center;
  width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;
  font-weight:900;font-size:1.1rem;margin-bottom:16px}
.step h3{margin-bottom:6px}
.step p{font-size:.96rem;margin:0}

/* ---------- cities ---------- */
table.rate{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.95rem}
table.rate th{text-align:left;background:var(--soft);border:1px solid var(--line);padding:11px 13px;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
table.rate td{border:1px solid var(--line);padding:11px 13px;vertical-align:top}
.prose ul{padding-left:1.15em;margin:0 0 22px}
.prose ul li{margin-bottom:.55em}
.pill-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:9px}
.pill-list li{background:var(--soft);border:1px solid var(--line);border-radius:100px;
  padding:7px 15px;font-size:.9rem;font-weight:600;color:var(--ink)}
.pill-list.zips li{font-variant-numeric:tabular-nums;color:var(--body);font-weight:500}
.prose h2{font-size:1.25rem;margin-top:1.4em}
.citygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.citygrid a{display:block;padding:13px 16px;background:#fff;border:1px solid var(--line);
  border-radius:10px;font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;
  transition:all .12s ease}
.citygrid a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);
  text-decoration:none;box-shadow:var(--shadow)}

/* ---------- faq ---------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;
  overflow:hidden}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:700;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:1.5rem;color:var(--brand);font-weight:400;line-height:1;
  transition:transform .18s ease}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .ans{padding:0 24px 20px;font-size:.98rem}
.faq .ans p:last-child{margin:0}

/* ---------- cta band ---------- */
.band{background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;text-align:center}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.92);font-size:1.08rem;max-width:620px;margin:0 auto 26px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:rgba(255,255,255,.68);padding:56px 0 26px;font-size:.93rem}
footer.site h4{color:#fff;font-size:.84rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
footer.site a{color:rgba(255,255,255,.68);text-decoration:none}
footer.site a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:38px}
.fgrid ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.5)}
.flogo{display:block;height:68px;width:auto;margin-bottom:18px}


/* ---------- misc ---------- */
.crumb{font-size:.85rem;color:#8792a4;padding:20px 0 0}
.crumb a{color:#8792a4}
.pagehead{background:var(--soft);border-bottom:1px solid var(--line);padding:40px 0 48px}
.pagehead h1{margin-bottom:.3em}
.pagehead p{font-size:1.08rem;max-width:44em;margin:0}
.prose h2{margin-top:1.6em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}
/* The form follows the reader down long pages. Capped and scrollable, because a
   sticky block taller than the viewport hides its own submit button. */
.stickycol{align-self:start}
/* On mobile the grid collapses and the form would land ~45% down the page,
   behind 1,500 words. Pull it above the copy so it is reachable immediately. */
@media(max-width:960px){
  .hero-grid{display:flex;flex-direction:column}
  .stickycol{order:-1;margin-bottom:8px}
}
@media(min-width:961px){
  .stickycol{position:sticky;top:112px;max-height:calc(100vh - 132px);overflow-y:auto;
    overscroll-behavior:contain;padding-right:2px}
  .stickycol::-webkit-scrollbar{width:8px}
  .stickycol::-webkit-scrollbar-thumb{background:#d7dde5;border-radius:4px}
}
.mobilebar{display:none}
/* ---------- floating lead widget ---------- */
.pk-btn{position:fixed;right:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;
  gap:10px;background:var(--brand);color:#fff;border:0;border-radius:100px;padding:15px 24px;
  font-family:var(--font);font-size:1rem;font-weight:700;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.24);transition:transform .16s ease,box-shadow .16s ease}
.pk-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.pk-btn svg{width:21px;height:21px}
.pk-btn.hide{display:none}
.pk-card{position:fixed;right:22px;bottom:22px;z-index:91;width:min(390px,calc(100vw - 30px));
  background:#fff;border-radius:18px;box-shadow:0 22px 64px rgba(0,0,0,.32);overflow:hidden;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:all .2s ease;
  max-height:calc(100vh - 44px);overflow-y:auto}
.pk-card.open{opacity:1;transform:none;pointer-events:auto}
.pk-head{background:var(--brand);color:#fff;padding:20px 22px 17px;position:relative}
.pk-head h3{color:#fff;margin:0 0 4px;font-size:1.2rem}
.pk-head p{margin:0;font-size:.9rem;color:rgba(255,255,255,.9)}
.pk-x{position:absolute;top:9px;right:12px;background:none;border:0;color:rgba(255,255,255,.85);
  font-size:1.7rem;line-height:1;cursor:pointer;padding:4px 8px}
.pk-body{padding:18px 22px 22px}
.card-form.bare{box-shadow:none;padding:0;border-radius:0}
@media(max-width:960px){
  /* the mobile bar already offers Call Now and Free Quote; a third floating CTA
     on top of it just covered the form */
  .pk-btn{display:none}
  .pk-card{right:8px;left:8px;bottom:78px;width:auto;max-height:calc(100vh - 96px)}
}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .g3,.g4,.steps,.fgrid{grid-template-columns:1fr 1fr}
  .trust .wrap{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:720px){
  body{font-size:16px}
  section{padding:56px 0}
  nav.main{position:fixed;inset:96px 0 auto 0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:10px 22px 22px;border-bottom:1px solid var(--line);
    display:none;box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;border-bottom:1px solid var(--line)}
  nav.main .btn{margin-top:14px;border-bottom:0}
  .burger{display:block}
  .g3,.g4,.steps,.fgrid,.row2{grid-template-columns:1fr}
  .hero{padding:44px 0 56px}
  .card-form{padding:24px 20px}
  body{padding-bottom:70px}
  .mobilebar{display:grid;grid-template-columns:1fr;gap:0;position:fixed;bottom:0;left:0;right:0;
    z-index:60;background:#fff;border-top:1px solid var(--line);padding:10px 14px;
    box-shadow:0 -4px 18px rgba(0,0,0,.09)}
  .mobilebar.two{grid-template-columns:1fr 1fr;gap:10px}
}

.photo-band h2{color:#fff;margin:0 0 6px;font-size:1.6rem}
.photo-band p{color:rgba(255,255,255,.88);margin:0;max-width:560px}
@media(max-width:700px){.photo-band{min-height:300px}.photo-band h2{font-size:1.25rem}}

/* --- photos --- */
.pill-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:18px 0}
.pill-list li{margin:0}
.pill-list li a,.pill-list li{display:inline-block;background:#fff;border:1px solid #e3e0dd;
  border-radius:999px;padding:7px 15px;font-weight:600;font-size:.93rem;color:var(--ink);text-decoration:none}
.pill-list li a:hover{border-color:var(--brand);color:var(--brand)}
.steps-list{padding-left:20px}
.steps-list li{margin:0 0 12px}
.btn.ghost{background:transparent;border:2px solid var(--brand);color:var(--brand)}

.hero{background:
  linear-gradient(100deg,rgba(32,20,13,1) 0%, rgba(32,20,13,.97) 38%, rgba(32,20,13,.62) 68%, rgba(32,20,13,.35) 100%),
  url(/assets/img/generator-hero.jpg) center 38%/cover no-repeat}
@media(max-width:960px){.hero{background:linear-gradient(rgba(32,20,13,.94), rgba(32,20,13,.94)),url(/assets/img/generator-hero.jpg) center/cover no-repeat}}
.photo-band{position:relative;min-height:380px;background:url(/assets/img/generator-band.jpg) center/cover no-repeat}
.photo-band .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,.05) 30%,rgba(10,14,20,.72) 100%)}
.photo-band .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 0}
.photo-band .cap h2{color:#fff;margin:0 0 6px}
.photo-band .cap p{color:rgba(255,255,255,.88);margin:0;max-width:640px}

/* ==========================================================================
   City page template
   --------------------------------------------------------------------------
   City pages used to render as a light .pagehead followed by an undifferentiated
   column of <p>. On a 1,500-word page that is a wall of text with no entry
   point and nothing to look at. This gives them the same hero treatment the
   homepage already uses and gives the body some structure to breathe in.

   Everything here is built on the existing :root tokens, so each site picks up
   its own --brand with no per-site CSS.
   ========================================================================== */

.cp-hero{
  background:linear-gradient(140deg,var(--brand-dark) 0%,var(--brand) 58%,var(--brand-dark) 100%);
  color:#fff;padding:52px 0 60px;position:relative;overflow:hidden}
/* a soft light source behind the headline so the band is not a flat fill */
.cp-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 18% 8%,rgba(255,255,255,.17),transparent 62%)}
.cp-hero>.wrap{position:relative;z-index:1}

.cp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}

.cp-hero .crumb{font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:16px}
.cp-hero .crumb a{color:rgba(255,255,255,.88);text-decoration:none}
.cp-hero .crumb a:hover{color:#fff;text-decoration:underline}

.cp-hero h1{font-size:clamp(1.95rem,4.3vw,2.95rem);line-height:1.09;letter-spacing:-.02em;
  margin:0 0 16px;color:#fff}
.cp-stand{font-size:1.07rem;line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 26px;max-width:58ch}

.cp-proof{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:11px}
.cp-proof li{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.95);
  font-weight:600;font-size:.97rem;line-height:1.5}

.cp-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cp-cta .cp-or{color:rgba(255,255,255,.66);font-size:.9rem}

/* the card on the right of the hero - the same visual weight as the homepage
   form card, without duplicating the form itself on every city page */
.cp-aside{background:#fff;border-radius:18px;padding:28px 30px;box-shadow:var(--shadow-lg);
  color:var(--body)}
.cp-aside-h{font-size:1.18rem;font-weight:800;margin:0 0 6px;color:var(--ink);line-height:1.3}
.cp-aside p{font-size:.95rem;line-height:1.6;margin:0 0 18px}
.cp-aside .btn{width:100%}
.cp-aside .cp-note{font-size:.84rem;color:#7c8798;margin:14px 0 0;text-align:center;line-height:1.5}
.cp-aside-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.cp-aside-list li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
  font-size:.93rem;line-height:1.5;color:var(--body)}
.cp-aside-list .d{width:7px;height:7px;border-radius:50%;background:var(--brand);margin-top:7px}

/* ---- body ---------------------------------------------------------------- */

.citybody{padding:56px 0 12px}
/* The body shares the hero's left edge rather than sitting in its own centred
   column - a 180px step between the H1 and the first paragraph reads as a
   mistake. Measure is controlled per element instead of by a narrower wrap. */
/* one measure for every block in the body, so the column has a straight right
   edge. ch units scale with font-size, which made the H2 run 300px wider than
   the paragraphs under it. */
.citybody .wrap>*,.citybody .faq,.citybody .cp-checks,
.citybody .cp-callout,.citybody .cp-pull{max-width:760px}
.citybody p{line-height:1.75;margin:0 0 18px;color:var(--body)}

/* the opening paragraph carries the page - give it some size */
.citybody .wrap>p:first-child{font-size:1.16rem;line-height:1.66;color:var(--ink);
  font-weight:500}

.citybody h2{font-size:clamp(1.35rem,2.7vw,1.9rem);line-height:1.22;letter-spacing:-.01em;
  color:var(--ink);margin:50px 0 18px;padding-top:30px;border-top:1px solid var(--line)}
.citybody h2:first-of-type{margin-top:44px}

/* a bordered aside for the one thing on the page that is about safety or money */
.cp-callout{border-left:3px solid var(--brand);background:var(--soft);
  border-radius:0 12px 12px 0;padding:20px 24px;margin:28px 0}
.cp-callout p{margin:0;color:var(--ink)}
.cp-callout p+p{margin-top:12px}
.cp-callout .cp-label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:8px}

/* list items that are genuinely a list, not prose pretending to be one */
.cp-checks{list-style:none;padding:0;margin:26px 0;display:grid;gap:12px}
.cp-checks li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;
  line-height:1.65;color:var(--body)}
.cp-checks li strong{color:var(--ink);display:block;margin-bottom:3px}
.cp-checks .tk{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--brand);
  color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:900;margin-top:1px}

.cp-pull{font-size:1.2rem;line-height:1.55;font-weight:600;color:var(--ink);
  border-left:3px solid var(--brand);padding-left:22px;margin:34px 0}

@media(max-width:900px){
  .cp-hero-grid{grid-template-columns:1fr;gap:32px}
  .cp-hero{padding:38px 0 44px}
  .cp-aside{padding:24px}
  .citybody{padding:40px 0 8px}
  .citybody h2{margin:38px 0 14px;padding-top:24px}
  .citybody>p:first-child{font-size:1.08rem}
}