/* ============================================================
   CityBase Renovations & Repairs — Brand System
   Derived from the Digital Blueprint:
   navy (trust/authority) + copper (construction warmth) on paper
   Type: Sora (display/wordmark) · Manrope (body) · Space Mono (labels)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* navy — corporate trust */
  --navy-900:#0A2032;
  --navy-800:#0F3149;   /* blueprint background */
  --navy-700:#163E5A;
  --navy-600:#1C4B6B;
  --navy:    #123A56;

  /* copper / terracotta — grounded construction warmth, all CTAs */
  --copper:      #B26A3C;
  --copper-cta:  #BC6B38;
  --copper-bright:#CE6A2C;
  --copper-deep: #9C5A2E;

  /* neutrals — warm paper & ink */
  --paper:   #F6F3ED;
  --paper-2: #EDE8DE;
  --sand:    #E4DDD0;
  --ink:     #16212B;
  --ink-2:   #46535E;
  --white:   #FFFFFF;
  --line:    rgba(18,58,86,.14);
  --line-on-dark: rgba(255,255,255,.18);

  --maxw: 1200px;
  --r: 4px;            /* structural, near-square radii */
  --r-lg: 8px;
  --ease: cubic-bezier(.4,.0,.1,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Sora',sans-serif; margin:0; line-height:1.04; letter-spacing:-.02em; font-weight:800; }
p{ margin:0; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }

/* labels — blueprint dimension/mono motif */
.mono{ font-family:'Space Mono',monospace; font-weight:400; letter-spacing:.04em; }
.eyebrow{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--copper); font-weight:700;
}

/* ============================================================
   LOGO  (real wordmark — stacked mark + wordmark + tagline)
   logo-transparent.png  → for light / paper backgrounds
   logo-white.png        → knockout for navy / photo backgrounds
   ============================================================ */
.cb-logo{ display:inline-flex; align-items:center; }
.cb-logo img{ height:52px; width:auto; display:block; }
.cb-logo--nav img{ height:50px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:15px 26px; border-radius:var(--r); border:2px solid transparent;
  cursor:pointer; transition:.18s var(--ease); white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn--cta{ background:var(--copper-cta); color:var(--white); }
.btn--cta:hover{ background:var(--copper-deep); transform:translateY(-1px); }
.btn--ghost{ background:transparent; border-color:var(--copper); color:var(--copper); }
.btn--ghost:hover{ background:var(--copper); color:var(--white); }
.btn--ghost-light{ background:transparent; border-color:rgba(255,255,255,.5); color:var(--white); }
.btn--ghost-light:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.btn--navy{ background:var(--navy); color:var(--white); }
.btn--navy:hover{ background:var(--navy-900); }
.btn--lg{ padding:18px 34px; font-size:16px; }

/* trust pills */
.tickitem{ display:inline-flex; align-items:center; gap:9px; }

/* generic section rhythm */
section{ position:relative; }
.shadow-card{ box-shadow:0 1px 0 var(--line), 0 18px 40px -28px rgba(10,32,50,.5); }