/* ======================================
   FONT
====================================== */
@font-face{
  font-family:'Just Sans';
  src:url('/wp-content/uploads/fonts/just-sans/JustSans-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hector';
  src:url('/wp-content/uploads/fonts/hector/Hector-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Just Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#0f2c4c;
  background:#fff;
}

/* ======================================
   TOKENS
====================================== */
:root{
  --cm-ink:#0F2C4C;
  --cm-muted:#6A7B90;
  --cm-accent:#E0A528;         /* brand yellow/orange */
  --cm-accent-2:#E59C26;       /* alt orange used in UI */
  --cm-bg:#F6F7F9;
  --cm-white:#FFFFFF;
  --cm-card:#F5F5F5;
  --cm-r-xl:22px;
  --cm-r-md:14px;
  --cm-shadow:0 18px 60px rgba(10,40,71,.10);
  --deep:#021D35;
  --light-color:#ffffff;

  /* panels (match sidebar Search/Tags widgets) */
  --cm-panel-bg:#F5F5F5;
  --cm-panel-bd:#E5ECF3;
  --cm-panel-pad:20px;
  --cm-panel-r:22px;
}

/* ======================================
   LAYOUT
====================================== */
.cm-container{ max-width:1600px; margin:0 auto; padding:28px 16px; }
.cm-grid{ display:grid; grid-template-columns:1fr 400px; gap:28px; }
@media (max-width:992px){ .cm-grid{grid-template-columns:1fr;} }

/* ======================================
   HERO
====================================== */
.cm-hero.cm-hero-image{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  padding:17em 0; min-height:420px;
  background-image:var(--cm-hero); background-size:cover; background-position:center; background-repeat:no-repeat;
}
.cm-hero-image .cm-hero-overlay{ position:absolute; inset:0; background:rgba(6,18,30,0.70); pointer-events:none; }
.cm-hero-image .cm-hero-inner{ position:relative; z-index:1; width:100%; text-align:center; }
.cm-hero-h1{ margin:0; line-height:1.05; letter-spacing:.02em; text-transform:uppercase; font-weight:600; font-size:5.25em; }
.cm-hero-line1{display:block; color:#fff;}
.cm-hero-line2{display:block; color:var(--cm-accent);}
.cm-hero *::marker{content:'';} .cm-hero .swiper-pagination{display:none;}
.sticky-wrapper.sticky{background:transparent!important; position:static!important;}
@media (max-width:768px){ .cm-hero.cm-hero-image{padding:8em 0;} .cm-hero-h1{font-size:3.5em;} }
@media (max-width:480px){ .cm-hero-h1{font-size:2.2em;} }

/* ======================================
   INTRO
====================================== */
.cm-intro{ background:#fff; padding:56px 0 44px; }
.cm-intro-inner{ text-align:center; }
.cm-intro-kicker{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.cm-intro-kicker-text{
  font-family:'Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1em; line-height:1.2; color:#0f2c4c; text-transform:uppercase; letter-spacing:.08em; font-weight:800;
}
.cm-intro-rule{ display:inline-block; width:56px; height:3px; background:#E0A528; border-radius:3px; }
.cm-intro-title{
  margin:0 0 10px; font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:3.125em; line-height:1.1; color:#0f2c4c; text-transform:uppercase;
}
.cm-intro-copy{
  max-width:760px; margin:0 auto; color:#0f2c4c;
  font-family:'Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.125em; line-height:1.6;
}
.cm-intro-copy strong{font-weight:700; color:#0f2c4c;}
@media (max-width:768px){ .cm-intro{padding:44px 0 36px;} .cm-intro-title{font-size:2.2em;} }

/* ======================================
   POSTS GRID (archive)
====================================== */
p.blog-text{ font-family: 'JUST sans', 'sans serif'!important; color:#0f2c4c!important; }
blockquote:after, .wp-block-quote:after{ background-color:#0f2c4c!important; }

.cm-post-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:900px){ .cm-post-grid{grid-template-columns:1fr;} }

.cm-card{ background:var(--cm-card); border-radius:22px; padding:18px 18px 20px; }
.cm-card-thumb{ display:block; overflow:hidden; border-radius:18px; margin-bottom:14px; }
.cm-card-thumb img{ display:block; width:100%; height:auto; transform:scale(1.001); transition:transform .25s ease; }
.cm-card:hover .cm-card-thumb img{ transform:scale(1.03); }

.cm-card-meta{
  display:flex; align-items:center; gap:14px; margin:4px 0 10px;
  color:#6a7b90; font-weight:800; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em;
}
.cm-card-cat{ color:#0f2c4c; letter-spacing:.06em; font-weight:500; }
.cm-readtime{ opacity:.9; text-transform:lowercase; font-weight:400; }

.cm-card-title{
  font-size:24.42px; line-height:1.22; margin:6px 0 8px; font-weight:400;
  font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:1px; color:#0f2c4c;
}
.cm-card-title a{ color:inherit; text-decoration:none; }
.cm-card-title a:hover{opacity:.85;}

.cm-card-excerpt{ color:#3a4f66; font-size:1rem; line-height:1.55; margin:0 0 16px; }
.blog-single{ margin-bottom:0!important; }

.cm-card-more{
  display:inline-flex; align-items:center; gap:10px; padding:0 18px; border-radius:14px;
  border:3px solid #E59C26; color:#0f2c4c; font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.02em;
}
.cm-card-more::after{
  content:""; display:inline-block; width:36px; height:36px; border-radius:999px; border:2px solid currentColor;
  -webkit-mask:url('https://creomortgage.com/wp-content/uploads/2025/08/right-arrow.svg') no-repeat center / 60%;
  mask:url('https://creomortgage.com/wp-content/uploads/2025/08/right-arrow.svg') no-repeat center / 60%;
  background-color: currentColor;
}
.cm-card-more:hover{ background:#E59C26; color:#0f2c4c; border-color:#E59C26; }

/* clock icon for meta */
.cm-readtime{ display:inline-flex; align-items:center; gap:8px; }
.cm-readtime::before{
  content:""; display:inline-block; width:18px; height:18px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") no-repeat center / contain;
}

/* ======================================
   SIDEBAR
====================================== */
.cm-sidebar{ display:flex; flex-direction:column; gap:18px; }
@media (max-width:768px){ .cm-sidebar{display:none!important;} }

.cm-widget{ background:transparent; border-radius:0; padding:0; }
.cm-widget-title{
  margin:0 0 14px; color:#0f2c4c; font-size:26.1px; font-weight:400; line-height:1.1; letter-spacing:1px;
  font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* order */
.cm-widget-search{ order:1; } .cm-widget-cats{ order:2; } .cm-widget-recent{ order:3; } .cm-widget-tags{ order:4; }

/* Search widget */
.cm-widget.cm-widget-search{ background:#f5f5f5; border-radius:22px; padding:20px; box-shadow:none; }
.cm-widget-search .cm-searchform{
  display:flex; align-items:center; gap:10px; padding:8px; background:#fff; border-radius:16px; box-shadow:none;
}
.cm-search-input{ flex:1 1 auto; height:48px; border:0; outline:0; border-radius:12px; padding:0 14px; font-size:.96rem; color:#0f2c4c; background:#fff; }
select:focus, .form-control:focus, .form-select:focus, textarea:focus, input:focus{ background-color:#FFFFFF!important; }
.cm-search-input::placeholder{ color:#8A96A6; }
.cm-search-btn{
  width:48px; height:48px; border:0; border-radius:14px; background:#E59c29; color:transparent;
  display:grid; place-items:center; padding:0; line-height:0; box-shadow:none; cursor:pointer;
}
.cm-search-btn::before{
  content:""; width:22px; height:22px; margin-top:9px; margin-left:-4px; background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></g></svg>");
}
.cm-search-btn:hover{ background:#1e324b; }

/* Categories */
.cm-widget.cm-widget-cats{ background:#f5f5f5; border-radius:22px; padding:20px; }
.cm-catlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.cm-catlist li a{
  display:block; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid #E5ECF3;
  color:#0f2c4c; text-decoration:none; font-weight:400; font-size:17.4px;
}
.cm-catlist li a:hover{ border-color:#D7E3EE; background:#E59C26; color:#0F2C4C; }
.cm-catlist li.current-cat > a, .cm-catlist li.current-cat-parent > a, .cm-catlist li a.is-active{
  background:#2e4663; border-color:#E59C26; color:#0f2c4c;
}

/* Recent Posts */
.cm-widget.cm-widget-recent{ background:#f5f5f5; border-radius:22px; padding:20px; box-shadow:none; }
.cm-widget-recent .cm-widget-title::after{ content:""; display:block; height:1px; background:#E5ECF3; margin-top:12px; }
.cm-recent-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.cm-recent-item{ display:grid; grid-template-columns:92px 1fr; gap:16px; align-items:start; }
.cm-recent-thumb img{ width:92px; height:72px; object-fit:cover; border-radius:14px; }
.cm-recent-date{
  display:inline-flex; align-items:center; gap:10px; font-size:1rem; color:#6A7B90; line-height:1.2; margin:0 0 6px;
}
.cm-recent-date::before{
  content:""; display:inline-block; width:18px; height:18px;
  background-image:url('https://creomortgage.com/wp-content/uploads/2025/08/calendar-Icon.svg');
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.cm-recent-title{
  margin:0; color:#0f2c4c; font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:1.25rem; line-height:1.25; text-decoration:none;
}
.cm-recent-title:hover{ text-decoration:underline; }

/* Popular Tags */
.cm-widget.cm-widget-tags{ background:#f5f5f5; border-radius:22px; padding:20px; box-shadow:none; }
.cm-widget-tags .cm-widget-title::after{ content:""; display:block; height:1px; background:#E5ECF3; margin-top:12px; }
.cm-tagcloud{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; margin:0; padding:0; }
.cm-tagcloud a{
  display:flex; align-items:center; justify-content:center; padding:14px 16px; border-radius:14px;
  background:#fff; border:1px solid #E5ECF3; color:#2c3f55; text-decoration:none; font-weight:400; font-size:15.22px!important; line-height:1.1; box-shadow:none;
}
.cm-tagcloud a:hover{ border-color:#D7E3EE; background:#e59c26; color:#0f2c4c; font-weight:700; }
.cm-tagcloud a.is-active, .cm-tagcloud a.current, .cm-tagcloud a[aria-current="page"]{ background:#e59c26; border-color:#e59c26; color:#0f2c4c; }
@media (max-width:520px){ .cm-tagcloud{ grid-template-columns:1fr; } }

/* ======================================
   PAGINATION
====================================== */
.cm-pagination{ display:flex; justify-content:center; margin:22px 0 8px; }
.cm-pagination .page-numbers{
  display:inline-flex; min-width:36px; height:36px; align-items:center; justify-content:center;
  margin:0 4px; border-radius:8px; background:#fff; box-shadow:var(--cm-shadow); text-decoration:none; color:#1a314f;
}
.cm-pagination .page-numbers.current, .cm-pagination .page-numbers:hover{ background:var(--cm-accent); color:#1d2b3a; }

/* ======================================
   SINGLE — EXACT PDF LAYOUT
   (scoped to both .cm-article* and .lc-article*)
====================================== */
.cm-single-wrap{ background:#fff; padding:40px 0 0 0; }
.cm-single-grid{
  max-width:1600px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:40px;
}
@media (max-width:992px){ .cm-single-grid{ grid-template-columns:1fr; gap:28px; } }

/* main col */
.cm-article-col{ min-width:0; }

/* article card */
.cm-article, .lc-article{
  background:var(--cm-card);
  padding:25px;
  border-radius:22px;
}
.cm-article-media, .lc-article-media{ margin:0 0 18px; }
.cm-article-media img, .lc-article-media img{ display:block; width:100%; height:auto; border-radius:22px; }

/* header */
.cm-article-header, .lc-article-header{ padding:0 2px 2px; }
.cm-article-kicker, .lc-article-kicker{
  display:flex; align-items:center; gap:10px;
  color:var(--cm-muted); text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:.95rem;
}
.cm-article-cat{ color:#0f2c4c; }
.cm-dot{ opacity:.6; }
.cm-article-title, .lc-article-title{
  margin:8px 6px 30px 6px;
  font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:clamp(2rem, 3.6vw, 3.25rem); line-height:1.12; color:#0f2c4c;
}
.cm-article-meta{ color:#6a7b90; font-weight:700; margin-bottom:6px; }
.cm-readtime{ color:#6a7b90; font-weight:700; }
.cm-readtime .cm-clock{
  width:18px; height:18px; display:inline-block; background-color:currentColor; margin-right:0;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23021D35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23021D35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") center/contain no-repeat;
}
@media screen and (max-width: 768px) {
    .cm-readtime {font-size:12px;}
}

/* body */
.cm-article-body, .lc-article-body{
  color:#0f2c4c;
  font-family:'Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.cm-article-body p, .lc-article-body p{ margin:0 0 16px; font-size:1.0625rem; line-height:1.7; color:#0f2c4c; font-family:'JUST sans'!important;}
.cm-article-body h2, .cm-article-body h3,
.lc-article-body h2, .lc-article-body h3{ color:#0f2c4c; font-weight:900; margin:24px 0 10px; }
.cm-article-body img, .lc-article-body img{ border-radius:18px; }

.checklist ul li{ color:#0f2c4c!important; }
.checklist{ border-top: 1px solid #E6EDF3; padding-top: 20px; }
.blog-single .blog-title{ font-family:'Hector Regular'; font-weight:400; letter-spacing:1px; }

/* pull quote */
.cm-article-body blockquote, .lc-article-body blockquote{
  margin:40px 0; padding:16px 30px 16px 60px; border-radius:16px;
  background:#F5f5f5; border-left:4px solid #0f2c4c; position:relative; color:#0f2c4c; font-weight:700;
}
.cm-article-body blockquote::before, .lc-article-body blockquote::before{
  content:""; position:absolute; padding:20px; top:-15px; font-size:56px; line-height:1; color:#FFFFFF; background-color:#f5f5f5;
}
blockquote.wp-block-quote{ border:1px solid #0F2C4C!important; }
blockquote cite, .wp-block-quote cite{
  border-radius:10px!important; background-color:#0F2C4C!important;
  font-family:'Hector Regular'; font-weight:400; font-size:15.53px; padding:10px 45px; letter-spacing:1px;
}

/* === Panels INSIDE Learn body (lists/quotes/tables) to match sidebar boxes === */
.cm-single-wrap .lc-article-body > *:is(ol, ul, blockquote, .wp-block-quote, .wp-block-pullquote, .wp-block-table){
  background:var(--cm-panel-bg);
  border:1px solid var(--cm-panel-bd);
  border-radius:var(--cm-panel-r);
  padding:var(--cm-panel-pad);
  margin:18px 0;
}
.cm-single-wrap .lc-article-body > ol,
.cm-single-wrap .lc-article-body > ul{ padding-left: calc(var(--cm-panel-pad) + 12px); }
.cm-single-wrap .lc-article-body > ol li,
.cm-single-wrap .lc-article-body > ul li{ margin:6px 0; }
.cm-single-wrap .lc-article-body > .wp-block-table table{ width:100%; border-collapse:collapse; }
.cm-single-wrap .lc-article-body > .wp-block-table td,
.cm-single-wrap .lc-article-body > .wp-block-table th{ border:1px solid var(--cm-panel-bd); padding:10px; }

/* footer (tags + share) */
.cm-article-footer, .lc-article-footer{
  margin-top:18px; padding-top:14px; border-top:1px solid #E6EDF3;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.cm-article-tags, .lc-article-tags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.cm-tags-label{ font-weight:400; letter-spacing:1px; color:#0f2c4c; margin-right:4px; font-family:'Hector'; font-size:18.8px; }

.cm-tag, .lc-tag{
  display:inline-block; padding:10px 20px; border-radius:10px;
  border:1px solid #E0E0E0; font-family:'JUST sans'; font-size:13.16px; color:#4d5765; background:#fff;
}
.cm-tag:hover, .lc-tag:hover{ background:var(--cm-accent-2); color:#1d2b3a; }

/* share buttons — brand orange squares with ink icons */
.cm-article-share, .lc-article-share{ display:flex; align-items:center; gap:10px; }
.cm-share-label{ font-weight:400; letter-spacing:1px; color:#0f2c4c; font-family:'Hector'; font-size:18.8px; }
.cm-share, .lc-share{
  width:38px; height:38px; border-radius:10px; background:var(--cm-accent-2); display:inline-block; position:relative;
}
.cm-share::after, .lc-share::after{ content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px; background:#0f2c4c; }

/* masks */
.cm-share--fb::after, .lc-share--fb::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v6h3v-6h2.5l.5-3H14V9z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v6h3v-6h2.5l.5-3H14V9z'/></svg>") center/contain no-repeat;
}
.cm-share--x::after, .lc-share--x::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3l8.5 9L3 21h3.5L12 14l5.5 7H21l-8.5-9L21 3h-3.5L12 10 6.5 3H3z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3l8.5 9L3 21h3.5L12 14l5.5 7H21l-8.5-9L21 3h-3.5L12 10 6.5 3H3z'/></svg>") center/contain no-repeat;
}
.cm-share--ig::after, .lc-share--ig::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm6.5 1a1 1 0 10-.001-2.001A1 1 0 0018.5 8zM12 9a3 3 0 110 6 3 3 0 010-6z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm6.5 1a1 1 0 10-.001-2.001A1 1 0 0018.5 8zM12 9a3 3 0 110 6 3 3 0 010-6z'/></svg>") center/contain no-repeat;
}
.cm-share--ln::after, .lc-share--ln::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3a2 2 0 110 4 2 2 0 010-4zM3 8h3v13H3V8zm7 0h3v1.8c.4-.8 1.4-2 3.4-2 3 0 3.6 2 3.6 4.7V21h-3v-6c0-1.4 0-3.2-2-3.2s-2.3 1.5-2.3 3.1V21h-3V8z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3a2 2 0 110 4 2 2 0 010-4zM3 8h3v13H3V8zm7 0h3v1