/* ════════════════════════════════════════════════════════════════════════════
   HUMA INTERIORS — BLOG UI  ·  header · hero · numbers strip
   File : /css/huma-blog.css   (printed by includes/huma-blog-ui.php)
   Every rule is scoped to .hb-… so a page's own styles are never touched.
   Sizes are in px on purpose: some older pages change the root font size.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --hb-orange:#E97724;--hb-orange-dk:#C95F10;
  --hb-blue:#2C358B;--hb-blue-dk:#1A2158;
  --hb-ink:#1A1A18;--hb-muted:#6B6B6B;--hb-line:#ECECEC;--hb-peach:#FFC98A;
  --hb-header-h:73px;
  --hb-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --hb-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --hb-accent:'Bebas Neue','DM Sans',Arial,sans-serif;
}
/* the header is fixed: the spacer below it holds its place, so drop any older body offset */
body:has(> .hb-header){margin:0;padding-top:0!important}
html:has(.hb-header){scroll-padding-top:calc(var(--hb-header-h) + 20px)}
html.hb-lock,html.hb-lock body{overflow:hidden}

.hb-header,.hb-header *,.hb-panel,.hb-panel *,.hb-hero,.hb-hero *,.hb-trust,.hb-trust *{box-sizing:border-box}

/* ---------------- HEADER ---------------- */
.hb-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--hb-header-h);margin:0;padding:0;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);font-family:var(--hb-sans);transition:box-shadow .25s ease}
.hb-header.is-scrolled{box-shadow:0 4px 20px rgba(0,0,0,.07)}
.hb-header-space{display:block;height:var(--hb-header-h);margin:0;padding:0}
.hb-header-inner{max-width:1240px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hb-logo{display:flex;align-items:center;flex-shrink:0;line-height:0;text-decoration:none;border:0}
.hb-logo img{display:block;width:auto;height:48px;max-width:none;margin:0;border:0}
.hb-nav{display:flex;align-items:center;gap:4px;margin:0;padding:0;background:none}
.hb-nav-link{display:inline-block;margin:0;padding:8px 14px;border-radius:6px;font-family:var(--hb-sans);font-size:15px;font-weight:500;line-height:1.4;color:var(--hb-ink);text-decoration:none;white-space:nowrap;transition:color .2s,background-color .2s}
.hb-nav-link:hover,.hb-nav-link:focus-visible{color:var(--hb-orange);background:rgba(233,119,36,.08);text-decoration:none}
.hb-nav-link.is-active{color:var(--hb-blue);font-weight:600}
.hb-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.hb-phone{display:inline-flex;align-items:center;gap:7px;font-family:var(--hb-sans);font-size:15px;font-weight:600;line-height:1.3;color:var(--hb-blue);text-decoration:none;white-space:nowrap}
.hb-phone svg{display:block;width:16px;height:16px;fill:var(--hb-orange);flex-shrink:0}
.hb-phone:hover{color:var(--hb-orange);text-decoration:none}
.hb-cta{display:inline-block;margin:0;padding:11px 20px;border:0;border-radius:6px;background:var(--hb-orange);color:#fff!important;font-family:var(--hb-sans);font-size:14px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(233,119,36,.3);transition:background-color .25s,transform .25s}
.hb-cta:hover{background:var(--hb-orange-dk);transform:translateY(-1px);text-decoration:none}
.hb-mcall{display:none}
.hb-burger{display:none;flex-direction:column;justify-content:space-between;width:44px;height:44px;margin:0 -10px 0 0;padding:12px 10px;background:none;border:0;border-radius:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hb-burger span{display:block;width:24px;height:2px;border-radius:2px;background:var(--hb-ink);transition:transform .3s,opacity .2s}
.hb-burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hb-burger.is-open span:nth-child(2){opacity:0}
.hb-burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------------- MOBILE MENU ---------------- */
.hb-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;background:rgba(15,17,41,.45);opacity:0;transition:opacity .3s}
.hb-backdrop.is-open{opacity:1}
.hb-backdrop[hidden]{display:none}
.hb-panel{position:fixed;top:0;right:0;bottom:0;z-index:2147483001;width:320px;max-width:86vw;display:flex;flex-direction:column;overflow-y:auto;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.15);font-family:var(--hb-sans);transform:translateX(105%);visibility:hidden;transition:transform .35s ease,visibility 0s linear .35s}
.hb-panel.is-open{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s}
.hb-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--hb-line)}
.hb-panel-head .hb-logo img{height:40px}
.hb-panel-close{width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:#F3F3F3;color:var(--hb-ink);font-size:26px;line-height:40px;text-align:center;cursor:pointer}
.hb-panel-nav{display:flex;flex-direction:column;padding:8px 18px}
.hb-panel-nav .hb-nav-link{display:block;padding:14px 4px;border-radius:0;border-bottom:1px solid #F1F1F1;font-size:17px;background:none}
.hb-panel-foot{margin-top:auto;padding:20px 18px 26px;display:flex;flex-direction:column;gap:14px;background:#FAFAFA;border-top:1px solid var(--hb-line)}
.hb-panel-foot .hb-phone{font-size:16px}
.hb-panel-foot .hb-cta{display:block;padding:13px 18px;text-align:center;font-size:15px}
.hb-panel-wa{font-family:var(--hb-sans);font-size:15px;font-weight:600;color:#128C4B;text-decoration:none}
.hb-panel-wa:hover{text-decoration:underline}

/* ---------------- HERO ---------------- */
.hb-hero{position:relative;display:flex;align-items:center;min-height:calc(88vh - var(--hb-header-h));margin:0;padding:64px 20px;overflow:hidden;color:#fff;font-family:var(--hb-sans);background-color:#fff;background-image:linear-gradient(135deg,rgba(44,53,139,.88) 0%,rgba(44,53,139,.72) 55%,rgba(233,119,36,.62) 100%)}
.hb-hero-inner{width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}
.hb-hero-copy{min-width:0}
.hb-crumbs{margin:0 0 18px;padding:0;font-size:13px;line-height:1.5;background:none}
.hb-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
.hb-crumbs li{display:inline-flex;align-items:center;margin:0;padding:0;color:rgba(255,255,255,.95);list-style:none}
.hb-crumbs li::before{content:none}
.hb-crumbs li+li::before{content:"\203A";margin-right:8px;opacity:.6}
.hb-crumbs a{color:rgba(255,255,255,.78);text-decoration:none}
.hb-crumbs a:hover{color:#fff;text-decoration:underline}
.hb-tag{display:inline-block;margin:0 0 20px;padding:8px 18px;border:1px solid rgba(255,255,255,.28);border-radius:100px;background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:1.5px;text-transform:uppercase}
.hb-hero .hb-title{max-width:none;margin:0 0 18px;padding:0;font-family:var(--hb-serif);font-size:clamp(32px,4.2vw,54px);font-weight:600;line-height:1.15;letter-spacing:0;color:#fff;text-align:left;text-transform:none;background:none}
.hb-hero .hb-title em{font-family:inherit;font-style:italic;font-weight:600;color:var(--hb-peach)}
.hb-sub{max-width:600px;margin:0 0 26px;padding:0;font-size:17px;line-height:1.7;color:rgba(255,255,255,.95)}
.hb-sub a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.hb-sub a:hover{color:var(--hb-peach);text-decoration-color:currentColor}
.hb-points{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:0 0 26px;padding:0;list-style:none}
.hb-points li{position:relative;margin:0;padding:0 0 0 28px;font-size:15px;line-height:1.55;color:#fff;list-style:none;background:none;border:0}
.hb-points li::before{content:"\2713";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--hb-orange);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center}
.hb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0;padding:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.82)}
.hb-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px;border-radius:50%;background:currentColor;opacity:.6;vertical-align:middle}

/* hero form */
.hb-form{position:relative;width:100%;max-width:520px;justify-self:end;margin:0;padding:30px 28px;border-radius:12px;background:#fff;color:var(--hb-ink);font-family:var(--hb-sans);text-align:left;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hb-form .hb-form-title{margin:0 0 6px;padding:0;font-family:var(--hb-serif);font-size:26px;font-weight:600;line-height:1.25;color:var(--hb-blue)}
.hb-form .hb-form-sub{margin:0 0 18px;padding:0;font-size:14px;line-height:1.5;color:var(--hb-muted)}
.hb-form input:not([type=hidden]),.hb-form select{display:block;width:100%;height:auto;min-height:0;margin:0 0 12px;padding:12px 14px;border:1.5px solid #E2E2E2;border-radius:6px;background-color:#fff;color:var(--hb-ink);font-family:var(--hb-sans);font-size:15px;line-height:1.4;box-shadow:none;outline:none;transition:border-color .2s}
.hb-form input::placeholder{color:#8A8A8A;opacity:1}
.hb-form input:focus,.hb-form select:focus{border-color:var(--hb-orange)}
.hb-form input.is-invalid,.hb-form select.is-invalid{border-color:#D93025}
.hb-form .hb-hp{display:none!important}
.hb-form button[type=submit]{display:block;width:100%;margin:4px 0 0;padding:14px;border:0;border-radius:6px;background:var(--hb-orange);color:#fff;font-family:var(--hb-accent);font-size:19px;font-weight:400;line-height:1.2;letter-spacing:2px;text-transform:uppercase;cursor:pointer;box-shadow:none;transition:background-color .2s}
.hb-form button[type=submit]:hover{background:var(--hb-orange-dk)}
.hb-form button[type=submit][disabled]{opacity:.75;cursor:wait}
.hb-status{display:none;margin:12px 0 0;padding:11px 12px;border-radius:6px;font-size:14px;line-height:1.45;text-align:center}
.hb-status.is-ok{display:block;background:#E8F5E9;color:#2E7D32}
.hb-status.is-err{display:block;background:#FFEBEE;color:#C62828}
.hb-form .hb-consent{margin:10px 0 0;padding:0;font-size:12px;line-height:1.5;color:#888;text-align:center}
.hb-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------------- NUMBERS STRIP ---------------- */
.hb-trust{margin:0;padding:36px 20px;background:var(--hb-blue);color:#fff;font-family:var(--hb-sans)}
.hb-trust-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;text-align:center}
.hb-trust-num{font-family:var(--hb-accent);font-size:36px;line-height:1;letter-spacing:1px;color:var(--hb-orange)}
.hb-trust-lbl{margin-top:6px;font-size:13px;line-height:1.4;letter-spacing:.5px;text-transform:uppercase;opacity:.9}

/* content that sits straight under the hero (featured picture, quick-read box …) */
.hb-after-hero{max-width:1280px;margin:0 auto;padding:0 24px}

/* ---------------- RESPONSIVE ---------------- */
@media (min-width:1025px){.hb-panel,.hb-backdrop{display:none!important}}
@media (max-width:1180px){.hb-nav-link{padding:8px 10px}.hb-actions{gap:12px}.hb-header-inner{gap:16px}}
@media (max-width:1024px){
  :root{--hb-header-h:65px}
  .hb-header-inner{padding:0 18px}
  .hb-logo img{height:42px}
  .hb-header .hb-nav,.hb-header .hb-actions{display:none}
  .hb-mcall{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;border-radius:50%;background:rgba(233,119,36,.1)}
  .hb-mcall svg{width:18px;height:18px;fill:var(--hb-orange)}
  .hb-burger{display:flex}
  .hb-header-inner{gap:10px}
}
@media (max-width:900px){
  .hb-hero{min-height:0;padding:40px 18px 48px}
  .hb-hero-inner{grid-template-columns:1fr;gap:32px}
  .hb-form{max-width:none;justify-self:stretch}
}
@media (max-width:768px){
  .hb-trust{padding:30px 18px}
  .hb-trust-inner{grid-template-columns:repeat(2,1fr);gap:24px}
  .hb-trust-inner>div:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:600px){
  .hb-points{grid-template-columns:1fr;gap:10px}
  .hb-sub{font-size:16px}
  .hb-tag{padding:7px 14px;font-size:11px;letter-spacing:1.2px}
  .hb-form{padding:24px 20px}
  .hb-trust-num{font-size:32px}
  .hb-after-hero{padding:0 16px}
}