/* KUBOLAB redesign — shared chrome (header, footer, tokens, image stage).
   Everything is scoped under .kbl so it cannot collide with the theme,
   and the theme's own CSS is dequeued on these pages anyway. */

.kbl{
  --bg:#FFFFFF; --bg-panel:#FAFAFA; --bg-inset:#F0F0F0;
  --text:#111111; --text-soft:#6E6E73; --text-faint:#9A9A9E;
  --line:rgba(0,0,0,0.08); --line-strong:rgba(0,0,0,0.16);
  --ink:#111111; --ink-hover:#2A2A2A; --ink-contrast:#FFFFFF;

  color:var(--text);
  font-family:'Jost','Helvetica Neue',Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.kbl-body{ margin:0; background:#FFFFFF; }

.kbl, .kbl *, .kbl *::before, .kbl *::after{ box-sizing:border-box; }
.kbl img{ max-width:100%; }
.kbl a{ color:inherit; text-decoration:none; }
.kbl button{ font-family:inherit; }
.kbl :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---------- image stage helper (wraps every photo) ---------- */
.kbl .kbl-fill{ position:absolute; inset:0; overflow:hidden; background:var(--bg-panel); }
.kbl .kbl-fill img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.kbl .kbl-fill.is-empty{ background:var(--bg-panel); }

/* ---------- header ---------- */
.kbl header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,48px);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease;
}
.kbl header.scrolled{
  background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.kbl .logo{ display:inline-flex; align-items:center; line-height:0; }
.kbl .logo img{ height:22px; width:auto; display:block; }
.kbl nav.main-nav{ display:flex; gap:28px; flex-wrap:wrap; }
.kbl nav.main-nav a{
  font-weight:500; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-soft); transition:color .2s;
}
.kbl nav.main-nav a:hover,
.kbl nav.main-nav a.current{ color:var(--text); }
.kbl .header-icons{ display:flex; gap:18px; align-items:center; }
.kbl .header-icons a{
  display:inline-flex; color:var(--text); padding:4px; opacity:.85;
}
.kbl .header-icons a:hover{ opacity:1; }

/* ---------- eyebrow (studio + histórias share this base) ---------- */
.kbl .eyebrow{
  font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-soft); display:flex; align-items:center; gap:8px; margin:0 0 18px;
}
.kbl .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--text); }

/* ---------- shared site footer (redesign templates + injected site-wide) ---------- */
/* Hide the Betheme footer wherever our footer is injected. */
#Footer, #Footer_wrapper, #mfn-footer-template, .mfn-footer-template{ display:none !important; }

.kbl-global-foot{ margin:0; }

.kbl .kbl-foot{
  border-top:1px solid var(--line); background:var(--bg);
  color:var(--text-soft); font-size:13px;
}
.kbl .kbl-foot a{ color:var(--text-soft); transition:color .2s; }
.kbl .kbl-foot a:hover{ color:var(--text); }

.kbl .kbl-foot-inner{
  max-width:1200px; margin:0 auto; padding:64px clamp(20px,4vw,48px) 40px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
}
.kbl .kbl-foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.kbl .kbl-foot-col h4{
  margin:0 0 6px; font-size:11px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint);
}
.kbl .kbl-foot-plain{ color:var(--text-faint); }

.kbl .kbl-foot-brand{ gap:16px; max-width:34ch; }
.kbl .kbl-foot-logo{ display:inline-flex; line-height:0; }
.kbl .kbl-foot-logo img{ height:24px; width:auto; display:block; }
.kbl .kbl-foot-brand p{ margin:0; line-height:1.7; }

.kbl .kbl-foot-bottom{
  max-width:1200px; margin:0 auto;
  padding:22px clamp(20px,4vw,48px) 40px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.kbl .kbl-foot-pay{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kbl .kbl-foot-pay img{ height:22px; width:auto; opacity:.9; }
.kbl .kbl-foot-pay img.kbl-foot-pix{ height:16px; }
.kbl .kbl-foot-social{ display:flex; gap:14px; }
.kbl .kbl-foot-social a{ display:inline-flex; color:var(--text-soft); }
.kbl .kbl-foot-social a:hover{ color:var(--text); }
.kbl .kbl-foot-legal{
  margin:0; width:100%; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:0.04em; color:var(--text-faint);
}

@media (max-width:900px){
  .kbl header{ flex-wrap:wrap; gap:12px; padding:16px clamp(16px,4vw,24px); }
  .kbl nav.main-nav{ gap:16px; order:3; width:100%; }
  .kbl .kbl-foot-inner{ grid-template-columns:1fr 1fr; gap:32px 24px; padding-top:48px; }
  .kbl .kbl-foot-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .kbl .kbl-foot-inner{ grid-template-columns:1fr; }
  .kbl .kbl-foot-bottom{ flex-direction:column; align-items:flex-start; }
}