/* ── Bluekite house style ────────────────────────────────────────────────────
   Loaded AFTER the shared templatemo theme so it wins on specificity ties.
   Kept in its own file on purpose: the theme CSS is shared with the other
   company sites, so editing it in place would change all of them.

   The palette matches the Nimora brand, because a mother who follows the
   "A Bluekite LLC brand" link from the Nimora footer should land somewhere
   that visibly belongs to the same company. That link is the whole reason
   this page matters.                                                        */

:root{
  --bk-navy:#16256B;
  --bk-navy-2:#0E1847;
  --bk-teal:#1BA7C4;
  --bk-teal-d:#12798F;
  --bk-lime:#A8C61C;
  --bk-cream:#FDFBF6;
  --bk-ink:#1B2440;
  --bk-ink-2:#54607F;
  --bk-line:#E4E8F2;
}

body{
  background:var(--bk-cream);
  color:var(--bk-ink);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.header-area{
  background:rgba(253,251,246,.92)!important;
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--bk-line);
}
.header-area .main-nav .logo{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.35rem;font-weight:800;color:var(--bk-navy);
  letter-spacing:-.02em;line-height:1;
}
.header-area .main-nav .nav li a{
  color:var(--bk-ink-2)!important;font-weight:700;
}
.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active{
  color:var(--bk-navy)!important;
}
/* the CTA-styled last nav item */
.header-area .main-nav .nav li:last-child a{
  background:var(--bk-navy)!important;color:#fff!important;border-radius:999px;
}
.header-area .main-nav .nav li:last-child a:hover{background:var(--bk-navy-2)!important}

/* ── hero ────────────────────────────────────────────────────────────────── */
.main-banner{
  background:
    radial-gradient(58% 66% at 22% 28%,rgba(27,167,196,.16),transparent 62%),
    radial-gradient(50% 60% at 82% 18%,rgba(168,198,28,.18),transparent 60%),
    var(--bk-cream)!important;
  border-bottom:1px solid var(--bk-line);
}
.main-banner .header-text h2{
  color:var(--bk-navy);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(2rem,4.4vw,3rem);line-height:1.08;
}
.main-banner .header-text span{
  color:var(--bk-ink-2);font-weight:600;font-size:1.06rem;max-width:52ch;display:block;
}
/* the stock illustration is adtech-flavoured; the brand cards replace it */
.main-banner .right-image{display:none}

/* ── brands: the block that answers "who owns Nimora / LEVEL / STILL?" ───── */
.brands{padding:5rem 0;background:#fff;border-bottom:1px solid var(--bk-line)}
/* left-aligned so the heading shares a left edge with the cards below it */
.brands-heading{text-align:left;margin-bottom:2.5rem}
.brands-heading h4{margin-bottom:.6rem}
.brands-heading p{margin:0;max-width:56ch}

.brand-card{
  display:flex;flex-direction:column;gap:1.25rem;
  background:var(--bk-cream);border:1px solid var(--bk-line);
  border-radius:20px;padding:1.9rem;height:100%;
}
/* fixed mark height so the headings line up across cards whether the brand
   has a logo image or a text wordmark */
.brand-mark{display:flex;align-items:center;height:64px;flex:none}
/* width is per-brand: these marks have very different aspect ratios, so a
   single width would render the wide wordmarks tiny against the square logo */
.brand-card img{max-width:100%;max-height:64px;object-fit:contain;object-position:left center}
.brand-card img[src$="nimora-kids.png"]{width:104px}
.brand-card img[src$="level.svg"]{width:150px}
/* stands in for a logo file until one exists (STILL) */
.brand-wordmark{
  font-weight:800;font-size:1.5rem;letter-spacing:.22em;
  color:var(--bk-navy);line-height:1;
}
/* grows to fill the equalized card, so .visit can sit on the bottom edge */
.brand-body{display:flex;flex-direction:column;flex:1 1 auto}
.brand-for{
  display:block;margin-bottom:.5rem;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bk-teal-d);
}
.brand-card h4{
  font-size:1.3rem;font-weight:800;color:var(--bk-navy);margin:0 0 .55rem;
  text-transform:none;letter-spacing:-.01em;
}
.brand-card p{color:var(--bk-ink-2);font-size:.99rem;font-weight:600;margin:0}
.brand-card .visit{
  /* mt:auto pins the link to the bottom so it aligns across all three cards */
  align-self:flex-start;margin-top:auto;padding-top:1.25rem;
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:800;font-size:.92rem;color:var(--bk-teal-d);text-decoration:none;
}
.brand-card .visit span{border-bottom:2px solid var(--bk-lime);padding-bottom:1px}
.brand-card .visit:hover{color:var(--bk-navy)}
.brand-status{
  display:inline-block;margin-bottom:.7rem;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bk-teal-d);background:rgba(27,167,196,.12);
  border-radius:999px;padding:.3rem .8rem;
}
@media (max-width:991px){
  .brand-card{margin-bottom:1.5rem}
}
@media (max-width:600px){
  .brand-mark{height:56px}
  .brand-card img{max-height:56px}
  .brand-card img[src$="nimora-kids.png"]{width:82px}
  .brand-card img[src$="level.svg"]{width:124px}
}

/* ── section headings ────────────────────────────────────────────────────── */
.section-heading h4{color:var(--bk-navy);font-weight:800;letter-spacing:-.02em}
.section-heading h4 em{color:var(--bk-teal-d);font-style:normal}
.section-heading p{color:var(--bk-ink-2);font-weight:600}

/* ── principles (was: services) ──────────────────────────────────────────── */
.services{background:var(--bk-cream)!important}
.services .service-item{
  background:#fff!important;border:1px solid var(--bk-line);border-radius:20px;
  padding:2rem 1.7rem;box-shadow:none;height:100%;
  border-top:3px solid var(--bk-teal);
}
.services .col-lg-3:nth-child(2) .service-item{border-top-color:var(--bk-lime)}
.services .col-lg-3:nth-child(3) .service-item{border-top-color:var(--bk-navy)}
.services .col-lg-3:nth-child(4) .service-item{border-top-color:var(--bk-teal-d)}
.services .service-item h4{
  color:var(--bk-navy);font-weight:800;font-size:1.12rem;margin-bottom:.6rem;
}
.services .service-item p{color:var(--bk-ink-2);font-size:.96rem;font-weight:600}
/* the theme's icon sprites are adtech glyphs — drop them rather than mislabel */
.services .service-item .icon{display:none}

/* ── about ───────────────────────────────────────────────────────────────── */
.about-us{background:#fff!important}
.about-us .box-item h5{color:var(--bk-navy);font-weight:800;font-size:1.2rem}
.about-us .box-item p{color:var(--bk-ink-2);font-weight:600;line-height:1.7}
.about-us .right-image img{border-radius:20px}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{background:var(--bk-navy-2)!important}
footer .footer-widget h4{color:#fff;font-weight:800;font-size:1rem}
footer .footer-widget p,
footer .footer-widget li a{color:rgba(255,255,255,.66)!important;font-weight:600}
footer .footer-widget li a:hover{color:#fff!important}
footer .legal{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.5);font-size:.85rem;font-weight:600;
}

/* ── Removing the theme's decorative artwork ─────────────────────────────────
   The template ships adtech-flavoured background art: a large blue blob over
   the hero, a purple shard behind the services, and dashboard/analytics
   illustrations beside the about copy. All of it fights the wellness
   positioning, and the hero blob sat *over* the body text and destroyed its
   contrast. These are pseudo-elements and images in the shared theme, so they
   are switched off here rather than edited there. */
.main-banner:after,
.main-banner:before,
.services:after,
.services:before,
.about-us:after,
.about-us:before{
  display:none!important;content:none!important;
}
/* stock analytics illustration next to the About copy */
.about-us .right-image{display:none}
.about-us .col-lg-6:first-child{flex:0 0 100%;max-width:100%}

/* the theme pads the hero for artwork that is no longer there */
.main-banner{padding:170px 0 110px!important}
.main-banner .left-content{position:relative;z-index:2}
/* the hero copy was grey-on-blob; it is now plain text on cream */
.main-banner .header-text span{color:var(--bk-ink-2)!important;opacity:1}

/* about: full-width copy now that the illustration is gone */
.about-us{padding:5rem 0!important}
.about-us .box-item{
  background:transparent!important;box-shadow:none!important;
  border:0!important;padding:0!important;max-width:74ch;
}

/* the theme reserves space under About for the removed artwork */
.services{padding:5rem 0!important}

/* ── WOW.js safety net ───────────────────────────────────────────────────────
   The theme's .wow class sets visibility:hidden and relies on WOW.js to
   reveal each element on scroll. When that does not fire — script blocked,
   JS disabled, an observer that never triggers — the content stays invisible
   permanently. The "How we work" heading was hidden exactly this way.
   Content must never depend on an animation to be readable. */
.wow{visibility:visible!important}

/* ── spacing ─────────────────────────────────────────────────────────────────
   The theme's generous padding existed to make room for the background art
   that has been removed, which left large empty bands between sections. */
.services .section-heading{margin-bottom:2.5rem}
.about-us{padding-bottom:4rem!important}
footer{padding-top:3.5rem!important}

/* ── Logo alignment ──────────────────────────────────────────────────────────
   The theme centres its logo with line-height:100px, which works for the
   original <img> but does nothing once the logo is a flex container: the text
   collapsed to a 22px box pinned to the top of an 80px nav, while the
   hamburger stayed vertically centred. Give the logo the nav's own height and
   centre inside it instead of relying on line-height. */
.header-area .main-nav .logo{
  height:100px;line-height:1;align-items:center;
}
/* below 992px the theme collapses the bar to 80px and swaps in the hamburger */
@media (max-width:991px){
  .header-area .main-nav .logo{height:80px;padding-left:15px}
}
/* The trigger is absolutely positioned at a hardcoded top:33px, centring it in
   the theme's original 100px bar. Its containing block is .header-area (100px),
   not .main-nav (80px), so a plain 50% still lands 10px below the logo. Offset
   against the nav's real height instead: (80 - 40) / 2 = 20px. */
@media (max-width:991px){
  .header-area .main-nav .menu-trigger{top:20px;transform:none}
  .background-header .main-nav .menu-trigger{top:20px}
}