/* =========================================================
   City Shift Finance — Office Move Budget Template (Page)
   Match workshop typography + pill CTAs
   Paste into: Squarespace 7.1 → Design → Custom CSS
   ========================================================= */

/* ---- Brand tokens ---- */
:root{
  --csf-navy:#0d2545;          /* headings + primary */
  --csf-copy:#1f2a44;          /* body text */
  --csf-line:#e6ebf3;          /* hairline borders */
}

/* ---- Typography base (Inter / Helvetica Neue) ---- */
#csf-office-move-budget, #csf-office-move-budget * ,
.csf-seo-wrap, .csf-seo-wrap *{
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Headings: deep navy, tighter line-height, responsive clamp ---- */
#csf-office-move-budget h1, #csf-office-move-budget h2, #csf-office-move-budget h3,
.csf-seo-wrap h1, .csf-seo-wrap h2, .csf-seo-wrap h3{
  color: var(--csf-navy);
  line-height: 1.18;                 /* tight headlines */
  letter-spacing: .1px;
  margin: 0 0 .55em;
  text-wrap: balance;
}

/* If a page H1 exists inside the SEO section */
.csf-seo-wrap h1{ font-weight: 750; font-size: clamp(28px, 4.0vw, 40px); }
.csf-seo-wrap h2{ font-weight: 700; font-size: clamp(22px, 3.0vw, 30px); }
.csf-seo-wrap h3{ font-weight: 600; font-size: clamp(18px, 2.3vw, 22px); }

/* ---- Body copy: roomy line-height, readable sizes ---- */
#csf-office-move-budget p, #csf-office-move-budget li,
.csf-seo-wrap p, .csf-seo-wrap li{
  color: var(--csf-copy);
  font-size: clamp(15px, 2.1vw, 17px);
  line-height: 1.8;                  /* wider for readability */
}

/* ---- Readable text width 68–72ch ---- */
.csf-seo-wrap p, .csf-seo-wrap ul, .csf-seo-wrap .csf-card p{
  max-width: 72ch;                   /* sweet spot */
  margin-left: auto; margin-right: auto;
}

/* ---- Lists: consistent spacing ---- */
.csf-seo-wrap ul{ padding-left: 1.2em; margin: .35em auto 1em; }
.csf-seo-wrap li{ margin: .35em 0; }

/* ---- Containers / alignment ---- */
#csf-office-move-budget{
  background:#fff;
  border-radius:12px;
  padding: clamp(16px, 2.4vw, 24px);
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
}
.csf-seo-wrap{
  max-width: 980px;
  margin: 28px auto 0;
  padding: 0 clamp(12px, 2.8vw, 24px) 28px;
  background:#fff;
  text-align: center;
}

/* ---- Card & divider (SEO section) ---- */
.csf-seo-wrap .csf-card{
  border:1px solid var(--csf-line);
  border-radius:12px;
  padding: 18px 18px 8px;
  background:#fff;
}
.csf-seo-wrap .csf-divider{
  height:1px; background:var(--csf-line);
  margin: 22px auto;
  max-width: 72ch;
}

/* ---- Two-column grid that collapses on mobile ---- */
.csf-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px 22px; text-align:left;
}
@media (max-width:740px){
  .csf-grid{ grid-template-columns:1fr; text-align:center; }
}

/* ---- Pill-style CTA buttons (match workshop) ---- */
.csf-btn-row{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:12px;
}
.csf-btn,
.csf-seo-wrap a.csf-btn,
#csf-office-move-budget a.csf-btn{
  display:inline-block; text-decoration:none!important; cursor:pointer;
  border-radius: 9999px;                      /* pill */
  padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 20px);
  font-weight: 700; font-size: clamp(14px, 1.9vw, 16px); letter-spacing:.2px;
  border: 1.5px solid var(--csf-navy); line-height:1.2;
}
.csf-btn--primary{ background: var(--csf-navy); color:#fff!important; }
.csf-btn--primary:hover{ filter: brightness(1.08); }
.csf-btn--ghost{ background:#fff; color: var(--csf-navy)!important; }
.csf-btn--ghost:hover{ background:#f3f6fb; }

/* ---- Lighten widget tables & category pill to match look ---- */
#csf-office-move-budget .csf-table th,
#csf-office-move-budget .csf-table td{ border-color: var(--csf-line); }
#csf-office-move-budget .csf-table th{ background:#f9fbff; }
#csf-office-move-budget .csf-category{
  color: var(--csf-navy);
  background:#fff;
  border: 2px solid var(--csf-navy);
}

/* ---- Brand links inside SEO area ---- */
.csf-seo-wrap a{ color: var(--csf-navy); text-underline-offset: 2px; }
.csf-seo-wrap a:hover{ text-decoration: underline; }

/* ---- FAQ tidy ---- */
.csf-faq{ margin-top:18px; }
.csf-faq details{
  border:1px solid var(--csf-line);
  border-radius:10px;
  padding:12px 14px;
  background:#fff;
  max-width:72ch;
  margin:10px auto 0;
}
.csf-faq summary{ cursor:pointer; font-weight:600; color:var(--csf-navy); list-style:none; }
.csf-faq summary::-webkit-details-marker{ display:none; }

/* ---- Mobile niceties ---- */
@media (max-width:740px){
  .csf-btn-row{ flex-direction: column; }
  .csf-btn{ width:100%; max-width:420px; }
  .csf-seo-wrap ul{ text-align:left; }
}

Office Move Budget Template

Edit items below. Totals update automatically. Use “+ Add Row” to insert more lines per category.

Summary

Estimated Total	Actual Total	Variance
$0.00	$0.00	$0.00

Contact Us

This template is a starting point. The full City Shift Finance strategy unlocks deeper modeling, risk controls, and vendor optimization. Use this as guidance—not a comprehensive plan.

  
    “A journey of a thousand miles begins with a single step.”
    — Lao Tzu

City	Salary	Housing	Taxes	Remove

Office Move Budget Template

Summary

QUICK LINKS

SERVICES

RESOURCES

LEGAL