/* GOLDGCP city service pages: long-form article layout with a sticky table of contents (left)
   and a sticky quote form (right). Colors and fonts come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--porcelain); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive); text-underline-offset: 3px; }
a:hover { color: var(--olive-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.cp-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cp-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }

/* Reading progress */
.cp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; }
.cp-progress span { display: block; height: 100%; width: 0; background: var(--gold); }

/* Header */
.cp-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 241, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); }
.cp-header .cp-wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.cp-logo img { width: 168px; height: auto; }
.cp-nav { display: flex; gap: 22px; margin-right: auto; margin-left: 16px; }
.cp-nav a { color: var(--ink); text-decoration: none; font-size: 15px; }
.cp-nav a:hover { color: var(--olive); }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--radius); background: var(--olive); color: var(--on-dark); font: 600 15px/1 var(--font-sans); text-decoration: none; border: 1px solid var(--olive); cursor: pointer; white-space: nowrap; }
.cp-btn:hover { background: var(--olive-hover); color: var(--on-dark); }
.cp-btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.cp-btn-ghost:hover { background: var(--stone); color: var(--ink); }
.cp-btn-block { width: 100%; padding: 14px; }

/* Hero */
.cp-hero { padding-top: 32px; }
.cp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }
.cp-crumbs a { color: var(--muted); }
.cp-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.01em; margin: 18px 0 16px; max-width: 920px; }
.cp-lede { font-size: 20px; color: var(--muted); max-width: 820px; margin: 0 0 16px; }
.cp-meta { font-size: 14px; color: var(--muted); margin: 0 0 28px; }
.cp-cover { margin: 0; }
.cp-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.cp-cover figcaption { font-size: 12px; color: #5b5e63; margin-top: 6px; }

/* Three-column body */
.cp-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 48px; align-items: start; padding-top: 48px; padding-bottom: 64px; }
.cp-toc, .cp-side { position: sticky; top: 96px; }
.cp-toc details > summary { list-style: none; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: default; margin-bottom: 12px; }
.cp-toc details > summary::-webkit-details-marker { display: none; }
.cp-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline); }
.cp-toc li a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.4; }
.cp-toc li a:hover { color: var(--ink); }
.cp-toc li a.is-active { color: var(--ink); border-left-color: var(--olive); font-weight: 500; }
.cp-share { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 13px; color: var(--muted); }
.cp-share button { background: none; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 6px 10px; font: inherit; color: var(--ink); cursor: pointer; }

/* Article typography */
.cp-article, .cp-side, .cp-toc { min-width: 0; }
.cp-article h2 { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.15; margin: 56px 0 16px; }
.cp-article h2:first-child { margin-top: 0; }
.cp-article h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 32px 0 10px; }
.cp-article p, .cp-article li { color: #2a2c2f; }
.cp-article ul, .cp-article ol { padding-left: 22px; }
.cp-article li { margin: 6px 0; }
.cp-callout { margin: 28px 0; padding: 20px 24px; background: var(--stone); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.cp-callout p { margin: 0 0 8px; }
.cp-callout p:last-child { margin: 0; }
.cp-table { overflow-x: auto; margin: 24px 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: #fff; }
.cp-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.cp-table th { text-align: left; background: var(--stone); font-weight: 600; padding: 12px 14px; white-space: nowrap; }
.cp-table td { padding: 11px 14px; border-top: 1px solid var(--hairline); vertical-align: top; }
.cp-prices td:nth-child(n+2) { white-space: nowrap; }
.cp-note { font-size: 13px; color: var(--muted); margin-top: -8px; }

/* Calculator block */
.cp-calc { margin: 36px 0; padding: 28px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); }
.cp-calc h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; margin: 0 0 16px; }
.cp-calc [data-city-calc] { display: flex; flex-direction: column; gap: 24px; min-height: 420px; }

/* FAQ */
.cp-faq details { border-top: 1px solid var(--hairline); padding: 4px 0; }
.cp-faq details:last-child { border-bottom: 1px solid var(--hairline); }
.cp-faq summary { cursor: pointer; font-weight: 600; font-size: 18px; padding: 16px 32px 16px 0; position: relative; list-style: none; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: var(--olive); }
.cp-faq details[open] summary::after { content: "–"; }
.cp-faq details > p, .cp-faq details > ul { margin-top: 0; }

/* Author box */
.cp-author { display: flex; gap: 20px; align-items: flex-start; margin-top: 56px; padding: 24px; background: var(--stone); border-radius: var(--radius); }
.cp-author img { flex-shrink: 0; }
.cp-author p:last-child { margin: 0; font-size: 15px; }

/* Quote form */
.cp-form { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); }
.cp-form h2 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; margin: 0 0 4px; }
.cp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.cp-form input, .cp-form textarea { font: 400 16px/1.4 var(--font-sans); color: var(--ink); padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--porcelain); }
.cp-form input[aria-invalid="true"] { border-color: var(--error); }
.cp-honey { position: absolute; left: -9999px; }
.cp-form-msg { margin: 0; font-size: 14px; color: var(--error); }
.cp-small { margin: 0; font-size: 12px; color: var(--muted); }
.cp-trust { margin-top: 16px; padding: 0 4px; font-size: 14px; color: var(--muted); }
.cp-trust p { margin: 0 0 10px; }

/* Related links */
.cp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 72px; border-top: 1px solid var(--hairline); }
.cp-related h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0 0 12px; }
.cp-related ul { list-style: none; padding: 0; margin: 0; }
.cp-related li { margin: 8px 0; }

/* Footer */
.cp-footer { background: var(--cement-deep); color: var(--on-dark-muted); padding: 48px 0 96px; font-size: 14px; }
.cp-footer a { color: var(--on-dark); }
.cp-footer img { margin-bottom: 12px; }

.cp-mbar { display: none; }

/* Tablet: drop the left column, keep the form beside the article */
@media (max-width: 1180px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .cp-toc { position: static; grid-column: 1 / -1; }
  .cp-toc details > summary { cursor: pointer; }
  .cp-toc ol { columns: 2; column-gap: 32px; }
  .cp-nav { display: none; }
}
/* Phone: one column, form after the article, sticky contact bar */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .cp-wrap { padding: 0 16px; }
  .cp-header .cp-wrap { height: 60px; gap: 12px; }
  .cp-logo img { width: 132px; }
  .cp-hide-m { display: none; }
  .cp-header .cp-btn { margin-left: auto; padding: 9px 14px; font-size: 14px; }
  .cp-lede { font-size: 18px; }
  .cp-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; }
  .cp-toc details { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; }
  .cp-toc details > summary { margin: 0; }
  .cp-toc details[open] > summary { margin-bottom: 10px; }
  .cp-toc ol { columns: 1; }
  .cp-share { display: none; }
  .cp-side { position: static; }
  .cp-article h2 { font-size: 28px; margin-top: 44px; }
  .cp-calc { padding: 18px; }
  .cp-table table { font-size: 14px; }
  .cp-table th, .cp-table td { padding: 10px; }
  .cp-prices td:nth-child(n+2), .cp-table th { white-space: normal; }
  .cp-author { flex-direction: column; }
  .cp-mbar { display: grid; grid-template-columns: 1fr 1fr 1.4fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--porcelain); border-top: 1px solid var(--hairline); }
  .cp-mbar a { padding: 15px 8px; text-align: center; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
  .cp-mbar-primary { background: var(--olive); color: var(--on-dark) !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.cp-calc .g { background: transparent; }

/* Key facts box under the lede: short, quotable answers for readers and AI search engines */
.cp-keyfacts { margin: 0 0 28px; padding: 20px 24px; background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--olive); border-radius: var(--radius); max-width: 920px; }
.cp-keyfacts ul { margin: 0; padding-left: 20px; }
.cp-keyfacts li { margin: 6px 0; font-size: 16px; }
.cp-metros td:nth-child(2) { color: var(--muted); }

/* Methodology and sources */
.cp-method, .cp-sources { margin-top: 48px; padding-top: 8px; }
.cp-method p { font-size: 15px; color: var(--muted); }
.cp-sources ol { font-size: 14px; color: var(--muted); padding-left: 20px; }
.cp-sources li { margin: 6px 0; }
.cp-sources cite { font-style: normal; }
.cp-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--on-dark); padding: 8px 14px; }
.cp-skip:focus { left: 16px; }

/* "Find a pro near you" finder and the all-services list on SEO pages */
.cp-near { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 14px; align-items: end; margin: 24px 0 32px; padding: 22px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); }
.cp-near label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.cp-near select, .cp-near input { font: 400 16px/1.4 var(--font-sans); color: var(--ink); padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--porcelain); }
.cp-near input[aria-invalid="true"] { border-color: var(--error); }
.cp-near-msg { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--error); }
.cp-services { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.cp-services li { margin: 0 0 8px; break-inside: avoid; }
.cp-related-wide { grid-column: 1 / -1; }
.cp-related-wide .cp-services { columns: 4; }
@media (max-width: 820px) { .cp-near { grid-template-columns: 1fr; } .cp-related-wide .cp-services { columns: 2; } }

/* ===== Richer layout for national guide pages (hubs and topic pages) ===== */
/* Hero: topic pages split text and photo; hubs sit on a dark cement band */
.cp-hero-x { padding: 36px 0 44px; }
.cp-hero-x .cp-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cp-hero-x h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.01em; margin: 10px 0 16px; }
.cp-hero-x .cp-lede { font-size: 19px; }
.cp-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.cp-kicker::before { content: ""; width: 28px; height: 2px; background: var(--gold); }
.cp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.cp-hero-x .cp-cover img { aspect-ratio: 16 / 9; box-shadow: 0 24px 48px -28px rgba(27, 29, 31, .45); }
.cp-hero-topic { background: linear-gradient(180deg, var(--stone) 0%, var(--porcelain) 100%); }
.cp-hero-hub { background: var(--cement-deep); color: var(--on-dark); padding-bottom: 96px; }
.cp-hero-hub .cp-crumbs, .cp-hero-hub .cp-crumbs a, .cp-hero-hub .cp-lede, .cp-hero-hub .cp-meta { color: var(--on-dark-muted); }
.cp-hero-hub .cp-kicker { color: var(--gold); }
.cp-hero-hub .cp-btn-ghost { color: var(--on-dark); border-color: rgba(247, 245, 241, .35); }
.cp-hero-hub .cp-btn-ghost:hover { background: rgba(247, 245, 241, .08); color: var(--on-dark); }
.cp-hero-hub .cp-btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.cp-hero-hub .cp-btn:hover { background: #cfa962; }
.cp-hero-hub .cp-cover figcaption { color: var(--on-dark-muted); }

/* Key facts as stat cards */
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; margin: -28px 0 0; position: relative; box-shadow: 0 18px 40px -30px rgba(27, 29, 31, .5); }
.cp-hero-topic + .cp-wrap .cp-stats { margin-top: 0; }
.cp-stat { background: #fff; padding: 20px 20px 18px; border-top: 3px solid var(--gold); }
.cp-stat p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cp-stat .cp-stat-num { font-family: var(--font-display); font-size: 25px; line-height: 1.15; color: var(--ink); margin-bottom: 8px; }
.cp-stat a { color: var(--muted); }

/* Sections: numbered headings, answer box, tinted bands */
.cp-article { counter-reset: sec; }
.cp-sec > h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); display: block; font: 600 13px/1 var(--font-sans); letter-spacing: .14em; color: var(--gold); margin-bottom: 10px; }
.cp-sec-first > h2::before { content: none; counter-increment: none; }
.cp-answer { margin: 8px 0 28px; padding: 22px 26px; background: #fff; border: 1px solid var(--hairline); border-left: 4px solid var(--olive); border-radius: var(--radius); }
.cp-answer p:last-child { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink); }
.cp-sec-band { margin: 56px 0 0; padding: 8px 32px 28px; background: var(--stone); border-radius: var(--radius); }
.cp-sec-band > h2 { margin-top: 32px; }
.cp-sec-near { margin-top: 56px; padding: 8px 32px 4px; background: var(--olive); color: var(--on-dark); border-radius: var(--radius); }
.cp-sec-near > h2 { color: var(--on-dark); margin-top: 32px; }
.cp-sec-near > h2::before { color: var(--gold); }
.cp-sec-near p { color: var(--on-dark-muted) !important; }
.cp-sec-near .cp-near { border-color: transparent; }
.cp-sec-near .cp-near p { color: var(--error) !important; }

/* Numbered lists as a step timeline */
.cp-article ol.cp-steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0; }
.cp-steps > li { counter-increment: step; position: relative; padding: 2px 0 22px 56px; margin: 0; }
.cp-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--olive); color: var(--on-dark); font: 600 15px/36px var(--font-sans); text-align: center; }
.cp-steps > li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--hairline); }
.cp-steps > li:last-child { padding-bottom: 4px; }
.cp-steps > li:last-child::after { content: none; }
.cp-sec-band .cp-steps > li::before { background: var(--ink); }

/* Comparison tables: zebra rows, first column as a label */
.cp-table-compare tbody tr:nth-child(even) td { background: #FBFAF7; }
.cp-table-compare td:first-child { font-weight: 600; color: var(--ink); }
.cp-table thead th { background: var(--olive); color: var(--on-dark); }
.cp-table tbody tr:hover td { background: #F3F0EA; }

/* Unordered lists: small gold markers */
.cp-article .cp-sec > ul { list-style: none; padding-left: 0; }
.cp-article .cp-sec > ul > li { position: relative; padding-left: 22px; }
.cp-article .cp-sec > ul > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }

/* Calculator stands out */
.cp-calc { border-top: 4px solid var(--gold); box-shadow: 0 20px 44px -34px rgba(27, 29, 31, .5); }

/* FAQ in cards */
.cp-faq details { background: #fff; border: 1px solid var(--hairline) !important; border-radius: var(--radius); padding: 2px 20px; margin-bottom: 10px; }
.cp-faq details[open] { border-left: 3px solid var(--olive) !important; }

/* Guide cards with photos */
.cp-guides { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--hairline); }
.cp-guides-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 34px; margin: 0 0 24px; }
.cp-guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.cp-guide { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.cp-guide:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(27, 29, 31, .55); color: var(--ink); }
.cp-guide img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cp-guide-t { font-family: var(--font-display); font-size: 21px; line-height: 1.2; padding: 16px 18px 6px; }
.cp-guide-d { font-size: 14px; line-height: 1.5; color: var(--muted); padding: 0 18px 18px; }

@media (max-width: 1180px) {
  .cp-hero-x .cp-wrap { gap: 36px; }
}
@media (max-width: 820px) {
  .cp-hero-x { padding: 20px 0 28px; }
  .cp-hero-x .cp-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cp-hero-hub { padding-bottom: 64px; }
  .cp-hero-x .cp-cover img { aspect-ratio: 16 / 9; }
  .cp-stats { grid-template-columns: 1fr 1fr; margin-top: -36px; }
  .cp-stat { padding: 14px; }
  .cp-stat .cp-stat-num { font-size: 20px; }
  .cp-sec-band, .cp-sec-near { padding: 4px 18px 18px; margin-left: -4px; margin-right: -4px; }
  .cp-answer { padding: 18px; }
  .cp-answer p:last-child { font-size: 17px; }
  .cp-guides-head h2 { font-size: 28px; }
}
@media (max-width: 480px) { .cp-stats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cp-guide { transition: none; } .cp-guide:hover { transform: none; } }
.cp-sec-near a { color: var(--gold); }
.cp-sec-near .cp-near { grid-template-columns: 1fr 1fr; margin-bottom: 28px; }
.cp-sec-near .cp-near button, .cp-sec-near .cp-near .cp-btn { grid-column: 1 / -1; width: 100%; }
@media (max-width: 820px) { .cp-sec-near .cp-near { grid-template-columns: 1fr; } }
.cp-estimator { margin: 36px 0; }

/* Plain version: no numbered section headings, no rule line before labels */
.cp-sec > h2::before{content:none!important;counter-increment:none!important}
.cp-kicker::before{display:none!important}
.cp-kicker{letter-spacing:.04em;text-transform:none;font-size:14px}

/* Same logo size as the design pages: 44px tall on desktop, 40px on phones */
.cp-logo img{width:auto!important;height:44px!important}
@media (max-width:820px){.cp-logo img{height:40px!important}}

/* Header identical to the design pages: top bar, full menu, 1440px frame with 64px sides */
.cp-wrap.cp-wide{max-width:1440px;padding:0 64px}
.cp-topbar{background:var(--porcelain);border-bottom:1px solid var(--hairline);font-size:13px;color:var(--muted)}
.cp-topbar .cp-wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.cp-top-links{display:flex;gap:28px}
.cp-top-links a{color:var(--muted);text-decoration:none}
.cp-top-links a:hover{color:var(--ink)}
.cp-header .cp-wrap.cp-wide{height:88px;gap:24px}
.cp-header .cp-nav{gap:28px;margin-left:24px}
.cp-header .cp-btn{padding:14px 22px}
@media (max-width:1380px){.cp-header .cp-nav{gap:16px;margin-left:12px}.cp-header .cp-nav a{font-size:14px}.cp-wrap.cp-wide{padding:0 32px}}
@media (max-width:1180px){.cp-header .cp-wrap.cp-wide{height:72px}}
@media (max-width:820px){.cp-topbar{display:none}.cp-wrap.cp-wide{padding:0 16px}.cp-header .cp-wrap.cp-wide{height:64px}.cp-header .cp-btn{padding:9px 14px}}
.cp-header .cp-nav a{white-space:nowrap}
.cp-header .cp-logo,.cp-header .cp-btn{flex-shrink:0}
.cp-header .cp-nav{gap:22px;margin-left:16px}
@media (max-width:820px){.cp-header .cp-btn{font-size:13px;padding:9px 12px}}

/* 3D illustration after the short answer */
.cp-visual{display:grid;gap:12px;margin:28px 0 8px}
.cp-visual-2{grid-template-columns:1.5fr 1fr}
.cp-visual-img{border-radius:10px;overflow:hidden;background:#EDEAE4;aspect-ratio:16/10;display:grid;place-items:center}
.cp-visual-img img{width:100%;height:100%;object-fit:cover}
.cp-visual-img.is-object{background:linear-gradient(180deg,#F3F0EA,#E6E1D8)}
.cp-visual-img.is-object img{object-fit:contain;padding:18px}
.cp-visual-1 .cp-visual-img.is-object{aspect-ratio:16/9}
@media (max-width:820px){.cp-visual-2{grid-template-columns:1fr 1fr}.cp-visual-img.is-object img{padding:10px}}
.cp-visual{margin:4px 0 28px}
.cp-visual-1{max-width:520px}
.cp-visual-1 .cp-visual-img.is-object{aspect-ratio:4/3}
.cp-visual-1 .cp-visual-img.is-object img{padding:24px}
.cp-visual-2 .cp-visual-img{aspect-ratio:auto;height:230px}
.cp-visual-1{max-width:440px}
@media (max-width:820px){.cp-visual-2 .cp-visual-img{height:150px}}

/* Images inside blog posts */
.cp-figure{margin:24px 0 28px}
.cp-figure img{width:100%;height:auto;border-radius:10px;background:#EDEAE4}
.cp-figure figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.cp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 28px}
.cp-gallery figure{margin:0}
.cp-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#EDEAE4}
@media (max-width:820px){.cp-gallery{grid-template-columns:1fr 1fr}}