/* ============================================================
   CREASO brand overlay on the baosh engine.
   baosh references --thm-* tokens but never defines them; here we
   define them with Creaso's brand values (mirrors the app's
   globals.css) so the whole theme re-skins at once, then add a few
   targeted fixes. Loaded LAST so it wins the cascade.
   ============================================================ */

:root {
  /* --- Creaso brand (OKLCH, identical to app globals.css) --- */
  --cr-bg:          oklch(7%  0.010 80);
  --cr-bg-2:        oklch(11% 0.014 80);
  --cr-elevated:    oklch(14% 0.016 82);
  --cr-ink:         oklch(94% 0.035 85);
  --cr-ink-second:  oklch(85% 0.030 85);
  --cr-ink-muted:   oklch(60% 0.022 80);
  --cr-ink-faint:   oklch(40% 0.020 80);
  --cr-gold:        oklch(82% 0.13 85);
  --cr-gold-deep:   oklch(68% 0.15 75);
  --cr-gold-light:  oklch(90% 0.10 88);
  --cr-neon-pink:   oklch(75% 0.22 0);
  --cr-neon-purple: oklch(82% 0.13 85);
  --cr-glass:       oklch(94% 0.02 85 / 0.10);

  /* --- Map baosh's (undefined) tokens onto Creaso --- */
  --thm-base:      var(--cr-gold);
  --thm-base-rgb:  231, 184, 106;        /* gold, for rgba() tint usages */
  --thm-primary:   var(--cr-gold);
  --thm-secondary: var(--cr-neon-pink);
  --thm-black:     var(--cr-bg);
  --thm-black-rgb: 12, 11, 9;
  --thm-white:     #ffffff;
  --thm-gray:      var(--cr-ink-muted);
  --thm-gray-rgb:  150, 142, 132;
  --thm-font:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --thm-font-2:    'Playfair Display', Georgia, serif;
}

/* ---------- Base surface + type ---------- */
body {
  background-color: var(--cr-bg);
  color: var(--cr-ink-second);
  font-family: var(--thm-font);
  -webkit-font-smoothing: antialiased;
}
.page-wrapper { background-color: var(--cr-bg); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--thm-font-2);
  color: var(--cr-ink);
  letter-spacing: -0.01em;
}

a { color: inherit; }
a:hover { color: var(--cr-gold); }

/* DM Mono for small overline / label text used across baosh */
.sec-title__tagline,
.section-title__tagline,
.main-slider-one__content .social-links li a,
.swiper-counter,
.count-text { font-family: 'DM Mono', ui-monospace, monospace; }

/* ---------- Gold accent helpers ---------- */
.thm-btn,
.main-header__btn,
button.thm-btn {
  background-color: var(--cr-gold);
  color: var(--cr-bg);
  border-color: var(--cr-gold);
}
.thm-btn:hover { background-color: var(--cr-gold-deep); color: var(--cr-bg); }

/* the inline arrow glyph inside the hero headline */
.icon-right-arrow-1 { color: var(--cr-gold); }

/* ---------- Header / logo ---------- */
.main-header,
.main-header-one,
.stricky-header { background-color: transparent; }
.stricked-menu.stricky-fixed {
  background-color: oklch(7% 0.010 80 / 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
/* CREASO wordmark replacing the baosh logo image */
.logo-box-one a {
  font-family: var(--thm-font-2);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cr-ink);
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
}
.logo-box-one a span { color: var(--cr-gold); }

/* hide e-commerce cart leftover from the agency template */
.header-cart-box { display: none !important; }

/* nav auth pills */
.Reg-login-box a { color: var(--cr-ink-second); transition: color .2s; }
.Reg-login-box a:hover { color: var(--cr-gold); }
.Reg-login-box li:last-child a {
  background: linear-gradient(135deg, var(--cr-gold), var(--cr-gold-deep));
  color: var(--cr-bg);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
}

/* ---------- Hero ---------- */
/* baosh ships a gray "1150x1100" placeholder as the slide bg; kill it so only
   our black base + neon/gold glow show until real photography is supplied. */
.main-slider-one .image-layer {
  background-image: none !important;
  background-color: var(--cr-bg);
  opacity: 1;
}
.main-slider-one::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 78% 30%, oklch(82% 0.13 85 / 0.16), transparent 60%),
              radial-gradient(50% 70% at 10% 80%, oklch(82% 0.13 85 / 0.10), transparent 60%);
}
.main-slider-one__content .title h2 { color: var(--cr-ink); }
.main-slider-one__content .social-links li a { color: var(--cr-ink-muted); }
.main-slider-one__content .social-links li a:hover { color: var(--cr-gold); }

/* hero headline sizing — keep within the left column, clear of the right visual */
.main-slider-one__content { position: relative; z-index: 3; }
.main-slider-one__content .title h2 {
  font-family: var(--thm-font-2);
  font-weight: 600;
  font-size: clamp(44px, 5.4vw, 82px);
  line-height: 1.04;
  max-width: 620px;
}

/* hero right visual: branded panel until real photography is supplied */
.main-slider-one__img { overflow: hidden; background: var(--cr-bg-2); border-radius: 4px; }
.main-slider-one__img img { visibility: hidden; }
.main-slider-one__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 68% 22%, oklch(82% 0.13 85 / 0.50), transparent 58%),
    radial-gradient(90% 90% at 30% 90%, oklch(82% 0.13 85 / 0.30), transparent 60%),
    linear-gradient(150deg, oklch(14% 0.02 85) 0%, oklch(8% 0.012 80) 70%);
}

/* slide counter accent */
.swiper-counter #current2 { color: var(--cr-gold); }

/* ============================================================
   Section branding (Creaso content swapped into baosh demo blocks).
   baosh ships gray "1150x1100" placeholders; we hide every demo
   <img> and paint branded gradient panels instead until real
   photography is supplied.
   ============================================================ */

/* ---------- Brand / platform strip ---------- */
.brand-one__inner--creaso {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}
.brand-one__label {
  margin: 0;
  font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12px; color: var(--cr-ink-muted);
}
.brand-one__inner--creaso ul {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 16px 46px; margin: 0; padding: 0; list-style: none;
}
.brand-one__inner--creaso li { line-height: 1; }
/* neutralize baosh's padding-right:123px / margin-left:85px + li::before divider
   (element carries both .brand-one__inner and --creaso) that left stray boxes */
.brand-one__inner--creaso ul li { padding-right: 0 !important; margin-left: 0 !important; }
.brand-one__inner--creaso ul li::before { display: none !important; }
.brand-one__inner--creaso li span {
  font-family: var(--thm-font-2);
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 600;
  color: var(--cr-ink-second); opacity: 0.9;
  transition: color .25s ease, opacity .25s ease;
}
.brand-one__inner--creaso li:hover span { color: var(--cr-gold); opacity: 1; }

/* ---------- About big sliding words ---------- */
.about-one .big-title1 h2,
.about-one .big-title2 h2 { color: oklch(94% 0.035 85 / 0.05); }
.sec-title__title span { color: var(--cr-gold); }

/* ---------- Advantage: value card + branded visual panels ---------- */
.advantages-one__single-content .title-box h2 span { color: var(--cr-gold); }
.adv-visual .inner {
  position: relative; overflow: hidden; border-radius: 6px;
  min-height: 360px; background: var(--cr-bg-2);
}
.adv-visual .inner img { visibility: hidden; }
.adv-visual .inner::after { content: ""; position: absolute; inset: 0; }
.adv-visual--keep .inner::after {
  background:
    radial-gradient(120% 90% at 30% 18%, oklch(82% 0.13 85 / 0.45), transparent 60%),
    linear-gradient(160deg, oklch(14% 0.02 85), oklch(8% 0.012 80));
}
.adv-visual--always .inner::after {
  background:
    radial-gradient(120% 90% at 70% 22%, oklch(82% 0.13 85 / 0.45), transparent 60%),
    linear-gradient(160deg, oklch(14% 0.02 85), oklch(8% 0.012 80));
}

/* ---------- Counter: gold numerals ---------- */
.counter-one__content h2,
.counter-one__content .odometer,
.counter-one__content .k { color: var(--cr-gold); }
.counter-one__content p { color: var(--cr-ink-second); }

/* ---------- How it works: branded visual panels + step cards ---------- */
.gallery-visual .inner {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 320px; border-radius: 6px; overflow: hidden; background: var(--cr-bg-2);
}
.gallery-visual .inner::after { content: ""; position: absolute; inset: 0; }
.gallery-visual--a .inner::after {
  background: radial-gradient(100% 100% at 30% 20%, oklch(82% 0.13 85 / 0.35), transparent 60%),
              linear-gradient(160deg, oklch(13% 0.02 85), oklch(8% 0.012 80));
}
.gallery-visual--b .inner::after {
  background: radial-gradient(100% 100% at 70% 28%, oklch(82% 0.13 85 / 0.42), transparent 60%),
              linear-gradient(160deg, oklch(13% 0.02 85), oklch(8% 0.012 80));
}
.gallery-visual--c .inner::after {
  background: radial-gradient(100% 100% at 50% 80%, oklch(75% 0.22 0 / 0.32), transparent 60%),
              linear-gradient(160deg, oklch(13% 0.02 85), oklch(8% 0.012 80));
}
.gallery-visual__icon {
  position: relative; z-index: 2; font-size: 64px; color: var(--cr-gold); opacity: 0.92;
}
.gallery-one__single-content .number-box { color: var(--cr-gold); }

/* ---------- Personas (team) branded avatar panels ---------- */
/* baosh hides .inner .overlay-content (name/role) until :hover, gives .inner
   z-index:1 + a dark ::before overlay. With no real photo: paint gradient +
   watermark initial on the PARENT, make .inner transparent and lift it above
   the watermark, kill baosh's dark overlay, force name/role permanently shown. */
.persona-img {
  position: relative; isolation: isolate;
  overflow: hidden; border-radius: 6px;
  background: linear-gradient(160deg, oklch(18% 0.03 85), oklch(11% 0.015 80));
}
.persona-img .inner {
  position: relative; z-index: 2; overflow: hidden; min-height: 420px;
  background: transparent;
}
.persona-img .inner::before { display: none !important; }  /* baosh 0.2 black overlay */
.persona-img .inner img { visibility: hidden; }
.persona-img::before {
  content: attr(data-initial);
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--thm-font-2); font-weight: 700; font-size: 170px;
  color: oklch(82% 0.13 85 / 0.20);
}
.persona-img--featured {
  background: linear-gradient(160deg, oklch(20% 0.04 85), oklch(12% 0.02 85));
}
.persona-img--featured::before { color: oklch(82% 0.13 85 / 0.30); }
/* name + role permanently visible (baosh reveals them only on hover) */
.persona-img .overlay-content h2,
.persona-img .overlay-content p {
  visibility: visible !important; opacity: 1 !important;
  clip-path: none !important; transform: none !important;
}
.team-one__single-img .overlay-content h2 a { color: var(--cr-ink); }
.team-one__single-img .overlay-content p { color: var(--cr-gold); }

/* ---------- Testimonials: gold avatar initial ---------- */
/* baosh: .right-content .img-box has padding-left:75px and img width:auto, which
   stretched the gold ::after into a full-width ellipse. Pin to a fixed circle. */
.testimonials-one__single .right-content .img-box {
  position: relative; width: 64px; height: 64px; padding-left: 0;
  overflow: hidden; border-radius: 50%;
}
.testimonials-one__single .right-content .img-box img {
  width: 64px; height: 64px; visibility: hidden;
}
.testimonials-one__single .right-content .img-box::after {
  content: attr(data-initial);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cr-gold), var(--cr-gold-deep));
  color: var(--cr-bg); font-family: var(--thm-font-2); font-weight: 700; font-size: 26px;
}

/* ---------- Awards strip: gold icons (were gray brand logos) ---------- */
/* baosh renders the glyph in span::before with color:#7b7b7b, so the color
   must be set on the pseudo-element, not the span. */
.awards-one__single-icon span::before,
.awards-one__single-bottom .overlay-icon span::before { color: var(--cr-gold); }

/* ---------- Footer wordmark + legal links ---------- */
.footer-logo-text {
  font-family: var(--thm-font-2); font-size: 30px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cr-ink);
  line-height: 1; display: inline-block;
}
.footer-logo-text span { color: var(--cr-gold); }
.footer-one__legal ul {
  display: flex; gap: 24px; margin: 0; padding: 0; list-style: none;
  justify-content: center;
}
.footer-one__legal li { width: auto; height: auto; background: none; border: none; }
.footer-one__legal a {
  width: auto; height: auto; line-height: 1.4; background: none; border-radius: 0;
  color: var(--cr-ink-muted); font-size: 14px; transition: color .2s ease;
}
.footer-one__legal a:hover { color: var(--cr-gold); }

/* ---------- Pricing: featured tier highlight + badge ---------- */
.pricing-one__single--featured {
  position: relative;
  border: 1px solid oklch(82% 0.13 85 / 0.45);
  background: linear-gradient(160deg, oklch(14% 0.02 85), oklch(9% 0.012 80));
  box-shadow: 0 0 0 1px oklch(82% 0.13 85 / 0.10),
              0 30px 60px -30px oklch(82% 0.13 85 / 0.40);
  border-radius: 12px;
}
.pricing-one__badge {
  position: absolute; top: -14px; right: 32px; z-index: 3;
  font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  font-weight: 700; color: var(--cr-bg);
  background: linear-gradient(135deg, var(--cr-gold), var(--cr-gold-deep));
  padding: 7px 15px; border-radius: 999px;
}
.pricing-one__single--featured .pricing-box h3 { color: var(--cr-gold); }

/* ---------- Contact info panel (replaces demo Google map) ---------- */
.contact-info-panel {
  position: relative; overflow: hidden; height: 100%;
  padding: 44px 38px; border-radius: 12px;
  background: linear-gradient(160deg, oklch(15% 0.02 85), oklch(9% 0.012 80));
  border: 1px solid oklch(82% 0.13 85 / 0.14);
}
.contact-info-panel h3 {
  font-family: var(--thm-font-2); color: var(--cr-ink);
  font-size: 26px; margin: 0 0 26px;
}
.contact-info-panel ul { margin: 0; padding: 0; list-style: none; }
.contact-info-panel li {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border-top: 1px solid oklch(94% 0.02 85 / 0.08);
}
.contact-info-panel li:first-of-type { border-top: 0; padding-top: 0; }
.contact-info-panel .icon-box {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(82% 0.13 85 / 0.12);
}
.contact-info-panel .icon-box span { font-size: 22px; color: var(--cr-gold); }
.contact-info-panel .icon-box span::before { color: var(--cr-gold); }
.contact-info-panel .text-box p {
  margin: 0 0 4px; font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  color: var(--cr-ink-muted);
}
.contact-info-panel .text-box a,
.contact-info-panel .text-box .contact-info-panel__static {
  font-family: var(--thm-font-2); font-size: 19px; color: var(--cr-ink);
}
.contact-info-panel .text-box a:hover { color: var(--cr-gold); }

/* ============================================================
   Inner-page banner (page-header) — brand the demo placeholder away.
   baosh's .page-header__bg was a 1170x600 grey placeholder pinned to
   the right half. The inline image is removed in page-title.php; here
   we paint a branded gradient panel in its place, keeping baosh's
   asymmetric right-panel composition.
   ============================================================ */
.page-header--creaso { background: var(--cr-bg); }
.page-header--creaso .page-header__bg {
  background-image:
    radial-gradient(120% 130% at 100% 0%, oklch(82% 0.13 85 / 0.28), transparent 58%),
    radial-gradient(110% 120% at 90% 100%, oklch(68% 0.15 75 / 0.22), transparent 55%),
    linear-gradient(135deg, var(--cr-bg-2) 0%, var(--cr-elevated) 100%);
  border-left: 1px solid oklch(82% 0.13 85 / 0.12);
}
.page-header--creaso::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, oklch(82% 0.13 85 / 0.45), transparent);
}
.page-header--creaso .page-header__inner h2 { color: var(--cr-ink); }
.page-header--creaso .thm-breadcrumb li,
.page-header--creaso .thm-breadcrumb li a { color: var(--cr-ink-second); }
.page-header--creaso .thm-breadcrumb li a:hover { color: var(--cr-gold); }

/* ============================================================
   Blog — baosh-native (replaces the agency demo blog).
   Accent variants gold / purple / pink reuse the brand glow
   language from the home section panels.
   ============================================================ */

/* ---- index ---- */
.blog-index { padding: 90px 0 110px; }
.blog-index__intro { max-width: 760px; margin: 0 0 54px; }
.blog-index__lead {
  margin: 18px 0 0; color: var(--cr-ink-muted);
  font-size: 18px; line-height: 1.6; max-width: 640px;
}
.blog-index__grid { row-gap: 30px; }

/* ---- card ---- */
.blog-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--cr-bg-2);
  border: 1px solid oklch(94% 0.02 85 / 0.07);
  border-radius: 14px; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: oklch(82% 0.13 85 / 0.30);
  box-shadow: 0 30px 60px -34px oklch(0% 0 0 / 0.7);
}
.blog-card__media {
  position: relative; height: 188px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 18px;
  background: linear-gradient(160deg, oklch(15% 0.02 85), oklch(9% 0.012 80));
}
.blog-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.blog-card--gold   .blog-card__media::after { background: radial-gradient(110% 100% at 28% 18%, oklch(82% 0.13 85 / 0.42), transparent 62%); }
.blog-card--purple .blog-card__media::after { background: radial-gradient(110% 100% at 72% 20%, oklch(82% 0.13 85 / 0.48), transparent 62%); }
.blog-card--pink   .blog-card__media::after { background: radial-gradient(110% 100% at 50% 16%, oklch(75% 0.22 0 / 0.42), transparent 62%); }
.blog-card__cat {
  position: relative; z-index: 2;
  font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 500;
  color: var(--cr-bg); background: var(--cr-gold);
  padding: 6px 12px; border-radius: 999px;
}
.blog-card--purple .blog-card__cat { background: var(--cr-neon-purple); color: #0c0b09; }
.blog-card--pink   .blog-card__cat { background: var(--cr-neon-pink);   color: #0c0b09; }
.blog-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card__meta {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.04em; color: var(--cr-ink-muted); margin-bottom: 12px;
}
.blog-card__title {
  font-family: var(--thm-font-2); font-size: 22px; line-height: 1.22;
  color: var(--cr-ink); margin: 0 0 12px;
}
.blog-card:hover .blog-card__title { color: var(--cr-gold-light); }
.blog-card__excerpt { color: var(--cr-ink-muted); font-size: 15px; line-height: 1.62; margin: 0 0 18px; }
.blog-card__more {
  margin-top: auto; font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--cr-gold);
  display: inline-flex; align-items: center; gap: 9px;
}
.blog-card__more .icon-right-arrow-1 { transition: transform .25s ease; }
.blog-card:hover .blog-card__more .icon-right-arrow-1 { transform: translateX(5px); }

/* ---- single post ---- */
.post { padding: 76px 0 96px; }
.post__head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.post__cat {
  display: inline-block; font-family: 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 500;
  color: var(--cr-bg); background: var(--cr-gold); padding: 7px 14px; border-radius: 999px;
}
.post__cat--purple { background: var(--cr-neon-purple); }
.post__cat--pink   { background: var(--cr-neon-pink); }
.post__title {
  font-family: var(--thm-font-2); font-weight: 600;
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--cr-ink); margin: 22px 0 18px;
}
.post__meta { font-family: 'DM Mono', ui-monospace, monospace; font-size: 14px; color: var(--cr-ink-muted); }
.post__meta strong { color: var(--cr-ink-second); font-weight: 500; }
.post__media {
  position: relative; height: 320px; border-radius: 16px; overflow: hidden;
  max-width: 1000px; margin: 0 auto 50px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, oklch(15% 0.02 85), oklch(9% 0.012 80));
}
.post__media::after { content: ""; position: absolute; inset: 0; }
.post__media--gold::after   { background: radial-gradient(80% 100% at 28% 18%, oklch(82% 0.13 85 / 0.40), transparent 62%); }
.post__media--purple::after { background: radial-gradient(80% 100% at 72% 22%, oklch(82% 0.13 85 / 0.46), transparent 62%); }
.post__media--pink::after   { background: radial-gradient(80% 100% at 50% 16%, oklch(75% 0.22 0 / 0.40), transparent 62%); }
.post__media-mark {
  position: relative; z-index: 2;
  font-family: var(--thm-font-2); font-style: italic; font-weight: 600;
  font-size: clamp(40px, 6vw, 74px); color: oklch(94% 0.035 85 / 0.16);
  text-transform: lowercase; letter-spacing: 0.02em;
}

/* prose */
.post__body { max-width: 740px; margin: 0 auto; }
.post__body h2 {
  font-family: var(--thm-font-2); font-size: 30px; line-height: 1.2;
  color: var(--cr-ink); margin: 48px 0 16px;
}
.post__body h3 {
  font-family: var(--thm-font-2); font-size: 22px; line-height: 1.25;
  color: var(--cr-ink); margin: 34px 0 12px;
}
.post__body p { color: var(--cr-ink-second); font-size: 18px; line-height: 1.74; margin: 0 0 20px; }
.post__body ul { margin: 0 0 24px; padding: 0; list-style: none; }
.post__body li {
  position: relative; color: var(--cr-ink-second); font-size: 18px; line-height: 1.7;
  padding: 0 0 14px 28px;
}
.post__body li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cr-gold);
}
.post__body li strong, .post__body p strong { color: var(--cr-ink); }
.post__body a { color: var(--cr-gold); text-decoration: underline; text-underline-offset: 3px; }
.post__body a:hover { color: var(--cr-gold-light); }
.post__body em { color: var(--cr-ink); font-style: italic; }

/* post CTA */
.post__cta {
  margin: 56px 0 0; padding: 44px 40px; border-radius: 16px; text-align: center;
  background: linear-gradient(160deg, oklch(15% 0.025 85), oklch(9% 0.012 80));
  border: 1px solid oklch(82% 0.13 85 / 0.18);
}
.post__cta h3 { font-family: var(--thm-font-2); font-size: 28px; color: var(--cr-ink); margin: 0 0 10px; }
.post__cta p { color: var(--cr-ink-muted); font-size: 16px; margin: 0 0 24px; }

/* missing */
.post--missing { padding: 120px 0; }
.post__missing { text-align: center; max-width: 520px; margin: 0 auto; }
.post__missing h2 { font-family: var(--thm-font-2); font-size: 36px; color: var(--cr-ink); margin: 0 0 12px; }
.post__missing p { color: var(--cr-ink-muted); margin: 0 0 28px; }

/* more from blog */
.blog-more { padding: 0 0 100px; }
.blog-more__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 34px; border-top: 1px solid oklch(94% 0.02 85 / 0.08); padding-top: 56px;
}
.blog-more__head h2 { font-family: var(--thm-font-2); font-size: 28px; color: var(--cr-ink); margin: 0; }
.blog-more__all {
  font-family: 'DM Mono', ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 12px; color: var(--cr-gold);
  display: inline-flex; align-items: center; gap: 8px;
}
.blog-more .row { row-gap: 30px; }

/* ============================================================
   Legal pages (privacy.php / terms.php) — readable prose.
   ============================================================ */
.legal { padding: 70px 0 100px; }
.legal__inner { max-width: 820px; margin: 0 auto; }
.legal__lead {
  font-family: var(--thm-font-2); font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4; color: var(--cr-ink); margin: 0 0 14px;
}
.legal__updated {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px;
  letter-spacing: 0.04em; color: var(--cr-ink-muted);
  margin: 0 0 40px; padding-bottom: 28px;
  border-bottom: 1px solid oklch(94% 0.02 85 / 0.10);
}
.legal h2 {
  font-family: var(--thm-font-2); font-size: 24px; line-height: 1.25;
  color: var(--cr-ink); margin: 40px 0 14px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--cr-ink-second); font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.legal ul { margin: 0 0 20px; padding: 0; list-style: none; }
.legal li {
  position: relative; color: var(--cr-ink-second); font-size: 17px; line-height: 1.65;
  padding: 0 0 12px 26px;
}
.legal li::before {
  content: ""; position: absolute; left: 3px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cr-gold);
}
.legal strong { color: var(--cr-ink); }
.legal a { color: var(--cr-gold); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--cr-gold-light); }
.legal__cross {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid oklch(94% 0.02 85 / 0.10);
  color: var(--cr-ink-muted) !important;
}

/* ============================================================
   Brand video integration.
   Hero film (gold, product story) full-bleeds the banner with a
   left scrim for headline legibility; the per-slide right visual
   panel is retired in favour of the film. The three purple section
   films fill the "how it works" panels behind the brand tint+icon.
   ============================================================ */

/* ---- Hero film: FULL-BLEED background video, brightened, with a left scrim ---- */
.main-slider-one { position: relative; overflow: hidden; }
.main-slider-one .hero-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 56%; z-index: 0; pointer-events: none;
  filter: brightness(1.04) contrast(1.04) saturate(1.08);
}
/* readability scrim: dark on the left (headline), opens up on the right to show the film */
.main-slider-one::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,11,9,.86) 0%, rgba(12,11,9,.58) 28%, rgba(12,11,9,.18) 58%, rgba(12,11,9,0) 82%),
    linear-gradient(180deg, rgba(12,11,9,0) 54%, rgba(12,11,9,.42) 100%);
}
/* the film is the hero visual now — retire the demo right-panel, bg layer and brand glow */
.main-slider-one__img { display: none !important; }
.main-slider-one .image-layer { background: none !important; }
/* kill the template's rgba(0,0,0,.96) overlay (image-layer::before) that painted the hero film black */
.main-slider-one .image-layer::before { display: none !important; }
.main-slider-one::after { display: none !important; }
/* headline + controls ride above the film */
.main-slider-one .auto-container { position: relative; z-index: 3; }
.main-slider-one__content { position: relative; z-index: 3; }
.main-slider-one .project-one__control-wrap,
.main-slider-one .scroll-pagination { position: relative; z-index: 3; }
@media (max-width: 991px) {
  /* full-bleed film stays clearly visible on mobile; lighter scrim, centred on the figure */
  .main-slider-one .hero-film { object-position: center 54%; filter: brightness(1.06) contrast(1.05) saturate(1.08); }
  .main-slider-one::before {
    background: linear-gradient(180deg, rgba(12,11,9,.42) 0%, rgba(12,11,9,.12) 40%, rgba(12,11,9,.30) 72%, rgba(12,11,9,.70) 100%);
  }
}

/* ---- Section films (how-it-works panels): show the loop, soft bottom vignette for the icon ---- */
.gallery-visual .inner { position: relative; overflow: hidden; }
.gallery-visual .inner .section-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
/* drop the opaque brand-tint fill (the film provides the visual) */
.gallery-visual .inner::after { display: none !important; }
/* soft bottom-up vignette so the white icon stays legible over the film */
.gallery-visual .inner::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, oklch(7% 0.010 80 / 0.10) 0%, transparent 38%, oklch(7% 0.010 80 / 0.58) 100%);
}
.gallery-visual__icon { z-index: 2; text-shadow: 0 4px 18px oklch(7% 0.010 80 / 0.85); }

/* respect reduced-motion: show the poster, not the loop */
@media (prefers-reduced-motion: reduce) {
  .hero-film, .section-video { display: none; }
}

/* ============================================================
   New CREASO logo (image wordmark) — replaces the CSS text mark
   in the header, sticky header and footer.
   ============================================================ */
.logo-box-one a { line-height: 0; }
.logo-box-one a img.brand-logo,
.sticky-header__content .logo-box-one a img.brand-logo {
  height: 38px; width: auto; display: block;
}
.footer-logo-text { line-height: 0; }
.footer-logo-text img.brand-logo {
  height: 42px; width: auto; display: inline-block;
}
@media (max-width: 575px) {
  .logo-box-one a img.brand-logo { height: 30px; }
}

/* ---- "By the numbers" — full-width tunnel film behind the stats ---- */
.counter-one { position: relative; overflow: hidden; }
.counter-one .counter-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  filter: brightness(0.92) saturate(1.05);
}
.counter-one::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,11,9,.88) 0%, rgba(12,11,9,.66) 50%, rgba(12,11,9,.90) 100%);
}
.counter-one .big-title,
.counter-one .auto-container { position: relative; z-index: 2; }

/* ---- WOW.js reveal safety-net --------------------------------------
   custom.js runs `new WOW({live:true}).init()`, which stamps inline
   visibility:hidden on every .wow box and reveals them on scroll. The
   first-paint reveal of on-screen / near-fold boxes is handled in
   creaso-enhance.js (IntersectionObserver, no second WOW instance).
   These rules are a deterministic fallback so a .wow box can NEVER be
   left permanently invisible if JS is disabled, WOW fails to load, or
   the user prefers reduced motion. They never fight WOW's scroll
   animation: an .animated box is simply forced visible, and the no-JS
   / reduced-motion paths only short-circuit the hidden state. */

/* Defensive: once WOW (or our reveal) marks a box .animated, it must be
   visible even if the inline visibility:hidden lingered for any reason. */
.wow.animated { visibility: visible !important; }

/* No-JS fallback: WOW only hides .wow via JS, so without JS the inline
   style is never set — but if the engine is half-loaded we still want
   content shown. When <html> lacks the .js flag, never hide .wow. */
html:not(.js) .wow { visibility: visible !important; }

/* Reduced motion: show everything immediately, skip the animation. */
@media (prefers-reduced-motion: reduce) {
  .wow { visibility: visible !important; animation: none !important; }
}

/* ============================================================
   Inner-page banner + pricing density. The template page-header
   padding (204/211) is excessively tall and pushed the pricing
   plan cards ~100px below the fold; trimmed so Starter/Pro peek
   above it while the banner keeps presence.
   ============================================================ */
.page-header.page-header--creaso { padding-top: 150px; padding-bottom: 140px; }
.pricing-one--pricing { padding-top: 64px; }
.pricing-one--pricing .pricing-one__top { padding-bottom: 36px; }
@media (max-width: 991px) {
  .page-header.page-header--creaso { padding-top: 104px; padding-bottom: 92px; }
  .pricing-one--pricing { padding-top: 44px; }
}

/* === F2 spacing: halve section padding, collapse CTA void bands. Final px tuned in Spacing phase. === */
.about-one { padding: 130px 0px 60px; }   /* was 253/0/104 (style.css L3107) */
.about-one .big-title1 { top: 124px; }     /* was top:242px (L3113); shift up by ~same delta as the top-padding cut so the 250px 'Meet CREASO' glyph doesn't clip into .brand-one above */
.counter-one { padding: 80px 0px 64px; }   /* was 146/0/120 (L3310) */
.services-one { padding: 0px 0px 64px; }   /* was 0/0/120 (L3401) */
.gallery-one { padding: 0px 0px 40px; }    /* was 0/0/60 (L3614) */
.awards-one { padding: 72px 0px 0px; }     /* was 120/0/0 (L4004) */
.team-one { padding: 56px 0px 56px; }      /* was 91/0/90 (L4272) */
.blog-one { padding: 0px 0px 64px; }       /* was 0/0/111 (L4439) */
.slogan-one__inner { padding-top: 34px; padding-bottom: 34px; } /* was pt59/pb60 (L4630-4631) — standalone 'Join the waitlist' CTA band; borders kept, only inner air trimmed */

@media only screen and (max-width: 767px) {
  .about-one { padding: 64px 0px 56px; }   /* was 106/0/104 (responsive.css L1318); .big-title1 is display:none on mobile so no top shift needed */
  .counter-one { padding: 56px 0px 28px; } /* was 96/0/43 (L1341) */
  .brand-one { padding: 72px 0px 0px; }    /* was 120/0/0 (L1281) */
  .awards-one { padding: 72px 0px 16px; }  /* was 120/0/21 (L1492) */
  .slogan-one__inner { padding-top: 28px; padding-bottom: 28px; }
}

/* ---------- F5: de-slop feature list (.services-one) — soft nudges, no restructure ---------- */
.services-one__right-content ul li .left-content .icon-box span::before { font-size: 44px; color: var(--cr-ink-muted, #9a9a9a); opacity: 0.85; } /* de-stamp the 65px bright glyph */
.services-one__right-content ul li .left-content .title-box { margin-left: 26px; } /* tighten icon->title gap (was 42px) */
.services-one__right-content ul li:nth-child(even) .outer-box { padding-left: 18px; } /* break pixel-identical rhythm */
.services-one__right-content ul li .outer-box .overlay-content .right-content .btn-box a { text-transform: none; letter-spacing: 0.04em; font-size: 16px; } /* soften gimmicky uppercase 'Learn more' */
.services-one__right-content ul li { padding-top: 46px; padding-bottom: 46px; } /* loosen over-spaced uniform stack (was 55/55) */
.services-one__right-content ul li::before { background: rgba(255,255,255,0.10); right: 0; } /* quieter divider, stop at column edge not -999999px full bleed */

/* === F2 spacing iter-2: reclaim dead decorative-glyph flow height + trim heavy bands === */
/* The .counter-one .big-title 'By the numbers' watermark (240px outlined glyph) was forced
   into normal flow by the z-index override above (line ~681), adding ~480px of dead height.
   Restore the template's absolute positioning (decorative background watermark) while keeping
   it above the video via z-index. No content lost — it's a behind-the-cards watermark. */
.counter-one .big-title { position: absolute; }

/* === F2 spacing iter-3: tighten over-aired stacked-card gaps + further trim heavy bands === */
/* Desktop: claw back air on the tallest content bands (no content removed). */
.gallery-one__single { margin-bottom: 36px; }   /* was 60px */
.advantages-one { padding-bottom: 24px; }        /* trim trailing air below the 3 feature cards */
.team-one { padding: 40px 0px 40px; }            /* tighten from 56/56 */
.blog-one { padding: 0px 0px 48px; }             /* tighten from 0/64 */
.awards-one { padding: 56px 0px 0px; }           /* tighten from 72/0 */
.services-one { padding: 0px 0px 48px; }         /* tighten from 0/64 */

@media only screen and (max-width: 767px) {
  /* Stacked single-column cards carry far more inter-card air than the
     4-up / 3-up desktop layout needs. Tighten the gaps (content intact). */
  .counter-one__single { margin: 0 auto 40px; }  /* was 107px (responsive.css L1347) — saves ~200px across the 4 stacked stats */
  .gallery-one__single { margin-bottom: 28px; }  /* was 60px — 6 stacked cards */
  .advantages-one__single { margin-bottom: 28px; } /* was 50px */
  .counter-one { padding: 40px 0px 16px; }       /* further trim on mobile */
  .team-one { padding: 40px 0px 32px; }
  .blog-one { padding: 0px 0px 40px; }
  .services-one { padding: 0px 0px 40px; }
}

/* === F2 spacing iter-4: trim remaining air pockets (footer top, about top) === */
.footer-one { padding-top: 72px; }   /* template default 122px top; trim leading air above footer widgets (content untouched) */
.about-one { padding: 104px 0px 56px; } /* tighten from 130/60; keep glyph clear */
.about-one .big-title1 { top: 98px; }   /* track the top-padding cut so 'Meet CREASO' glyph stays inside about-one */
.gallery-one { padding-bottom: 28px; }  /* from 40 */
.services-one { padding-bottom: 40px; } /* from 48 */
@media only screen and (max-width: 767px) {
  .footer-one { padding-top: 56px; }
  .about-one { padding: 48px 0px 48px; }
  .gallery-one { padding-bottom: 20px; }
}

/* === density pass 2026-06-02: hero height + about->advantages merge === */
.main-slider-one .main-slider-one__single { padding-top: 140px; padding-bottom: 210px; }
@media (max-width: 767px) {
  .main-slider-one .main-slider-one__single { padding-top: 104px; padding-bottom: 120px; }
}
.advantages-one .advantages-one__intro { max-width: 760px; margin: 0 auto 46px; }
@media (max-width: 767px) {
  .advantages-one .advantages-one__intro { margin-bottom: 30px; }
}

/* === fix 2026-06-02: merged-intro collision + dead hero slider chrome === */
/* the about explainer was inheriting tg-element-title (55px) -> read like a
   second hero headline and crowded the platforms band (advantage had pt:0). */
.advantages-one { padding-top: 96px; }
@media (max-width: 767px) { .advantages-one { padding-top: 48px; } }
.advantages-one .advantages-one__intro h2.sec-title__title {
  font-size: 30px;
  line-height: 1.4;
  font-weight: 500;
}
@media (max-width: 767px) {
  .advantages-one .advantages-one__intro h2.sec-title__title { font-size: 22px; line-height: 1.45; }
}
/* hero is now a single static slide: kill leftover slider counter (01/01) + progressbar */
.main-slider-one .project-one__control-wrap,
.main-slider-one .scroll-pagination { display: none !important; }

/* === fix 2026-06-02: inner page-header was 413px (pad 150/140) of mostly-empty
   void for just a title + breadcrumb. Shared across pricing/features/blog/etc. === */
.page-header.page-header--creaso { padding-top: 84px; padding-bottom: 56px; }
@media (max-width: 767px) {
  .page-header.page-header--creaso { padding-top: 58px; padding-bottom: 38px; }
}

/* === triage 2026-06-02: shared search-popup first-paint hide === */
/* template default (style.css L682) only translates the fixed overlay off-screen with no visibility/opacity, so it flattens visible in full-page capture and can leak at first paint on mobile. Lock it hidden until .active. Reversible: delete this block. */
.search-popup{opacity:0;visibility:hidden;}
.search-popup.active{opacity:1;visibility:visible;}

/* === home: brand pills wrap to compact rows on mobile (was 5-row column pushing hero ~1.5 screens down) === */
@media (max-width:767px){
  .brand-one__inner ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:0;padding:0;}
  .brand-one__inner ul li{margin:0;}
  .brand-one__inner ul li span{padding:6px 12px;font-size:13px;line-height:1.2;}
}

/* === home: 'Built for how you work' persona band (.team-one) — 830px for 98 chars; cut void, keep all 3 cards === */
.team-one{padding:64px 0 56px;}
.team-one .team-one__single{margin-bottom:24px;}

/* === home: 'Live in three steps' (.gallery-one) desktop padding trim (mobile already trimmed earlier) === */
.gallery-one{padding-top:64px;}

/* === features: 'what creaso does' (.services-one feature grid) — 1075px for 432 chars; cut section padding + row gap === */
.services-one{padding-top:70px;}
.services-one .row{row-gap:40px;}
@media (max-width:767px){
  .services-one{padding-top:40px;}
  .services-one .row{row-gap:24px;}
}

/* === pricing: per-row 61px top-pad + 61px bottom-margin = 122px air/row (style.css L5651). Existing .pricing-one--pricing block only trimmed section top, never the li. === */
.pricing-one--pricing .pricing-one__bottom ul li{padding-top:34px;margin-bottom:34px;}
.pricing-one--pricing .pricing-one__single .big-title{display:none;} /* 5%-opacity invisible 72px watermark — ornamental, no content lost */
@media (max-width:767px){
  .pricing-one--pricing .pricing-one__bottom ul li{padding-top:28px;margin-bottom:28px;}
}

/* === blog-details: 320px decorative .post__media void holding one italic word; no responsive step (inflates mobile to 8.3 screens) === */
.post__media{height:200px;}
@media (max-width:767px){
  .post__media{height:140px;margin-bottom:32px;}
  .post{padding:44px 0 56px;}
  .post__cta{padding:30px 22px;}
  .blog-more{padding:0 0 56px;}
  .post__head{margin-bottom:24px;}
}

/* === faq: .faq-page 120/108 padding (style.css L8558), no responsive override — large voids above/below accordion === */
.faq-page{padding-top:48px;padding-bottom:56px;}
@media (max-width:767px){
  .faq-page{padding-top:32px;padding-bottom:36px;}
}

/* === shared slogan CTA band: 76px heading pinned left, button pinned right, dead middle (style.css L4635/4647). Appears on multiple inner pages. === */
.slogan-one__content-box{justify-content:center;gap:40px;}
.slogan-one__content-box .text-box h2{font-size:48px;}
@media (max-width:767px){
  .slogan-one__content-box .text-box h2{font-size:30px;}
}

/* === contact: .contact-page 120/120 padding (style.css L8254), no override — 875px void for 161 chars; form margin-left dead on mobile === */
.contact-page{padding:64px 0 72px;}
.contact-one__form .input-box input:focus,
.contact-one__form .input-box textarea:focus{border-color:var(--cr-gold);background-color:rgba(255,255,255,0.09);}
@media (max-width:991px){
  .contact-page{padding:44px 0 48px;}
  .contact-one__form{margin-left:0;}
}
@media (max-width:767px){
  .contact-one__form .input-box{margin-bottom:14px;}
  .contact-info-panel{padding:28px 22px;margin-bottom:28px;}
}

/* === terms/privacy: .legal 70/100 padding (overrides L556), no mobile step === */
@media (max-width:767px){
  .legal{padding:40px 0 56px;}
  .legal h2{margin-top:32px;}
}

/* === about: orphaned/edge-clipped 'See features'/'See pricing' labels on .adv-visual tiles (style.css L3207-3231) === */
.advantages-one__single-img.adv-visual .btn-box{justify-content:center;margin-bottom:14px;}
.advantages-one__single-img.adv-visual .btn-box a{font-size:13px;letter-spacing:0.16em;}
/* about: platform strip 386px band for 82 chars */
.brand-one.brand-one--two.about{padding-top:48px;padding-bottom:48px;}
/* about: kill desktop masonry mt40/mt80 offsets + oversized blank tiles on mobile (7.3 screens) */
@media (max-width:767px){
  .brand-one.brand-one--two.about{padding-top:32px;padding-bottom:32px;}
  .adv-visual .inner{min-height:200px;}
  .persona-img .inner{min-height:300px;}
  .team-one__single.mt40,.team-one__single.mt80{margin-top:0;}
  .advantages-one__single{margin-bottom:20px;}
}

/* === shared a11y: lift discrete nav/footer/breadcrumb links toward 44px tap target on mobile only (does NOT touch inline prose links or desktop layout) === */
@media (max-width:767px){
  .footer a,.main-menu a,.thm-breadcrumb li a,.footer-one__legal a,.brand-one__inner ul li span{min-height:44px;display:inline-flex;align-items:center;}
}

/* === 2026-06-02: show real brand imagery in home .difference tiles ===
   Prior pass hid .adv-visual imgs and painted a gradient. Operator wants
   on-theme visuals (glowing phone at night / golden activity burst).
   Scope ONLY to the sec-*.jpg we placed on home so /about gradient tiles stay. */
.adv-visual .inner img[src*="/videos/sec-"] {
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
}
.adv-visual .inner:has(img[src*="/videos/sec-"])::after {
  background: linear-gradient(180deg, oklch(0.07 0.01 80 / 0.10) 0%, transparent 38%, oklch(0.07 0.01 80 / 0.62) 100%) !important;
}

/* === 2026-06-02: inner page-header looked broken — empty right-half panel
   (.page-header__bg was right:0 width ~60% + border-left split line) + a giant
   110px title crammed top-left. Make it a clean full-bleed slim header. === */
.page-header--creaso .page-header__bg {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-left: none !important;
  background-image:
    radial-gradient(60% 150% at 88% 0%, oklch(82% 0.13 85 / 0.13), transparent 60%),
    linear-gradient(180deg, var(--cr-bg-2) 0%, var(--cr-elevated) 100%) !important;
}
.page-header.page-header--creaso { padding-top: 72px; padding-bottom: 60px; }
.page-header--creaso .page-header__inner h2 { font-size: 60px; line-height: 1.05; }
.page-header--creaso .page-header__inner .thm-breadcrumb { padding-top: 18px; }
.page-header--creaso .page-header__inner .thm-breadcrumb li,
.page-header--creaso .page-header__inner .thm-breadcrumb li a { font-size: 15px; line-height: 22px; }
@media (max-width: 767px) {
  .page-header.page-header--creaso { padding-top: 46px; padding-bottom: 38px; }
  .page-header--creaso .page-header__inner h2 { font-size: 38px; }
}