/* Headings use Parkinsans (loaded from Google Fonts in base.html). The theme
   sets Inter on many individual title rules, so this has to override them. */
h1, h2, h3, h4, h5, h6,
.te-section-title .title,
.te-testimonial-card .name {
  font-family: "Parkinsans", "Inter", sans-serif !important; }

/* Section headings ("What We Do", "What Our Clients Say About Us", ...) use
   Bricolage Grotesque (also from Google Fonts in base.html). */
.te-section-title .title { font-family: "Bricolage Grotesque", "Parkinsans", sans-serif !important; }

/* Navigation menu (desktop, and the mobile copy made by meanmenu). */
.te-main-menu ul li a,
.te-mobile-nav-menu .mean-nav ul li a {
  font-family: "Parkinsans", "Inter", sans-serif !important; }

/* ---- Header: a compact floating bar of glossy frosted glass ----
   The glass is painted on ::before, not on the bar itself: an element with
   backdrop-filter would stop the dropdowns inside it from blurring the page. */
.header-area.style-2 .te-header-menu-area,
.header-area.style-2 .te-header-menu-area.te-sticky_menu {
  top: 14px; background: transparent; -webkit-box-shadow: none; box-shadow: none; }
.header-area.style-2 .te-header-menu-area.te-sticky_menu { top: 10px; }
.header-area.style-2 .te-header-menu-area .menu-wrapper {
  position: relative; z-index: 0; background: transparent; border-radius: 10px; }
.header-area.style-2 .te-header-menu-area .menu-wrapper::before,
.header-area.style-2 .te-header-menu-area .menu-wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
/* the glass: see-through, blurring and lightening whatever is behind it */
.header-area.style-2 .te-header-menu-area .menu-wrapper::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .56) 0%, rgba(255, 255, 255, .3) 100%);
  border: 1px solid rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.12);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.12);
  box-shadow: 0 8px 32px rgba(20, 32, 58, .18), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 1px rgba(255, 255, 255, .3);
  transition: background .4s ease; }
/* the gloss: a bright top half and a sheen sweeping in from the left */
.header-area.style-2 .te-header-menu-area .menu-wrapper::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(105deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 28%); }
/* scrolled down: a little more opaque, so the menu reads over any content */
.header-area.style-2 .te-header-menu-area.te-sticky_menu .menu-wrapper::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .5) 100%); }
/* the bar reaches this far past the page content on each side; the About page
   header uses the same, so the two line up */
@media (min-width: 992px) { :root { --bw-bar-out: 12px; } }
@media (min-width: 1200px) { :root { --bw-bar-out: 20px; } }
@media (min-width: 992px) {
  /* a little wider than the page content below it; logo and button 10px from the ends */
  .header-area.style-2 .te-header-menu-area .menu-wrapper {
    margin-left: calc(var(--bs-gutter-x) * -.5 - var(--bw-bar-out));
    margin-right: calc(var(--bs-gutter-x) * -.5 - var(--bw-bar-out));
    padding: 0 10px; flex-wrap: nowrap; }
  /* logo, the menu centred in the space that is left, then the quote button */
  .header-area.style-2 .menu-wrapper > [class*="col-"] { flex: 0 0 auto; width: auto; padding: 0; }
  .header-area.style-2 .menu-wrapper > [class*="col-"]:last-child { flex: 1 1 auto; }
  .header-area.style-2 .menu-wrapper .te-menu { margin: 0 auto; }
  .header-area.style-2 .menu-wrapper .te-header-btn { margin-left: 0; }
  .header-area.style-2 .te-header-menu-area .te-logo,
  .header-area.style-2 .te-header-menu-area.te-sticky_menu .te-logo { height: 78px; }
  .header-area.style-2 .te-header-menu-area .te-logo img { width: 152px; height: auto; }
  .header-area.style-2 .te-header-menu-area .te-main-menu > ul > li > a { padding: 29px 13px; font-size: 15.5px; }
  .header-area.style-2 .te-header-menu-area .te-main-menu > ul > li > a:hover { color: #14203A; }
  .header-area.style-2 .te-header-menu-area .te-main-menu > ul > li > a::before {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 20px; height: 2px; border-radius: 2px;
    background: #317EFE; transform: scaleX(0); transition: transform .25s ease; }
  .header-area.style-2 .te-header-menu-area .te-main-menu > ul > li > a:hover::before,
  .header-area.style-2 .te-header-menu-area .te-main-menu > ul > li.is-open > a::before { transform: scaleX(1); }
  .header-area.style-2 .te-header-menu-area .te-header-btn .te-quote-btn { padding: 14px 22px; font-size: 15px; }
}

/* ---- Header dropdowns (entries in content/menu.py, behaviour in bytewave-menu.js) ----
   Entries down the left; the hovered entry's picture and description on the right. */
@media (min-width: 992px) {
  /* the bar itself positions the dropdowns, so they line up with its edges */
  .header-area.style-2 .te-main-menu > ul,
  .header-area.style-2 .te-main-menu > ul > li.bw-has-mega { position: static; }
  .header-area.style-2 .te-main-menu > ul > li.bw-has-mega > a::after {
    content: "\f107"; visibility: visible; display: inline-block; font-size: 11px; margin: 0 0 0 5px;
    transition: transform .25s ease; }
  .header-area.style-2 .te-main-menu > ul > li.bw-has-mega.is-open > a { color: #14203A; }
  .header-area.style-2 .te-main-menu > ul > li.bw-has-mega.is-open > a::after { color: #317EFE; transform: rotate(180deg); }

  /* the panel: frosted glass, as wide as the bar */
  .header-area.style-2 .te-main-menu ul.bw-mega {
    position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 99999;
    --bw-col: 300px; width: auto; min-height: 360px; padding: 12px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: linear-gradient(140deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .72) 100%);
    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.12);
    backdrop-filter: blur(30px) saturate(180%) brightness(1.12);
    border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px;
    box-shadow: 0 24px 60px rgba(20, 32, 58, .2), inset 0 1px 1px rgba(255, 255, 255, .95);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  /* an invisible strip over the gap, so moving down from the menu keeps it open */
  .header-area.style-2 .te-main-menu ul.bw-mega::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .header-area.style-2 .te-main-menu li.bw-has-mega.is-open > ul.bw-mega,
  .header-area.style-2 .te-main-menu:not(.bw-mega-js) li.bw-has-mega:hover > ul.bw-mega,
  .header-area.style-2 .te-main-menu:not(.bw-mega-js) li.bw-has-mega:focus-within > ul.bw-mega {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

  /* entries */
  .header-area.style-2 .te-main-menu .bw-mega > li { position: static; width: var(--bw-col); float: none; }
  /* Blog: the date shows in the description, so the list keeps to the titles */
  .bw-mega--blog .bw-mega-name small { display: none; }
  .header-area.style-2 .te-main-menu .bw-mega li i { float: none; }
  .header-area.style-2 .te-main-menu .bw-mega > li > a {
    position: static; display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 10px;
    border: 0; border-radius: 14px; background: transparent;
    font-size: 14.5px; line-height: 1.3; font-weight: 600; color: #14203A; text-transform: none;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
  .header-area.style-2 .te-main-menu .bw-mega > li > a::after { display: none; }
  /* only the entry whose description is showing lights up (bytewave-menu.js may
     hold off switching while the pointer passes over others on its way across) */
  .header-area.style-2 .te-main-menu .bw-mega > li > a:hover { background: transparent; color: #14203A; }
  .header-area.style-2 .te-main-menu .bw-mega > li.is-current > a,
  .header-area.style-2 .te-main-menu:not(.bw-mega-js) .bw-mega > li > a:hover,
  .header-area.style-2 .te-main-menu .bw-mega > li.bw-mega-all > a:hover {
    background: rgba(255, 255, 255, .9); color: #317EFE; box-shadow: 0 4px 14px rgba(20, 32, 58, .08); }
  .bw-mega-media {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(49, 126, 254, .12); color: #317EFE; font-size: 15px;
    transition: background-color .2s ease, color .2s ease; }
  .bw-mega--team .bw-mega-media { border-radius: 50%; }
  .bw-mega-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  .bw-mega-item.is-current .bw-mega-media { background: #317EFE; color: #fff; }
  .bw-mega-name { display: flex; flex-direction: column; min-width: 0; }
  .bw-mega-name small {
    margin-top: 2px; font-family: "Poppins", "Inter", sans-serif; font-size: 12px; font-weight: 400; color: #6B7A90; }
  .header-area.style-2 .te-main-menu .bw-mega > li.bw-mega-all {
    margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(20, 32, 58, .08); }
  .header-area.style-2 .te-main-menu .bw-mega > li.bw-mega-all > a { gap: 8px; font-size: 14px; color: #317EFE; }

  /* the description on the right, as tall as the list: the picture, and beside it
     the label, title, text and a button, centred top to bottom */
  .bw-mega-preview {
    position: absolute; top: 12px; bottom: 12px; right: 12px; left: calc(12px + var(--bw-col) + 16px);
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(4, auto) 1fr;
    column-gap: 28px; row-gap: 8px; padding: 0;
    font-weight: 400; color: #335371; white-space: normal;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .bw-mega-item.is-current .bw-mega-preview,
  .te-main-menu:not(.bw-mega-js) .bw-mega-item:hover .bw-mega-preview {
    opacity: 1; visibility: inherit; transform: none; transition-delay: 0s; }
  .te-main-menu:not(.bw-mega-js) .bw-mega:hover .bw-mega-item.is-current:not(:hover) .bw-mega-preview {
    opacity: 0; visibility: hidden; }
  .bw-mega-pic {
    grid-column: 1; grid-row: 1 / -1; display: block; width: 100%; height: 100%; border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, #E8FBFF, #F9F8DA); box-shadow: 0 10px 24px rgba(20, 32, 58, .12); }
  .bw-mega-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .bw-mega-pic img:not([src]) { visibility: hidden; }
  .bw-mega--team .bw-mega-pic img { object-position: center 18%; }
  .bw-mega-kind { grid-column: 2; grid-row: 2; font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #317EFE; }
  .bw-mega-title {
    grid-column: 2; grid-row: 3;
    font-family: "Parkinsans", "Inter", sans-serif; font-size: 21px; line-height: 1.3; font-weight: 600; color: #14203A;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bw-mega-desc {
    grid-column: 2; grid-row: 4;
    font-family: "Poppins", "Inter", sans-serif; font-size: 15px; line-height: 1.6; color: #335371;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .bw-mega-go {
    grid-column: 2; grid-row: 5; justify-self: start;
    display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 18px; border-radius: 50px;
    background: #317EFE; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 6px 16px rgba(49, 126, 254, .3); }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .header-area.style-2 .te-main-menu ul.bw-mega { --bw-col: 260px; }
  .bw-mega-preview { column-gap: 20px; }
  .bw-mega-title { font-size: 18px; }
}
/* phones and tablets: the side menu lists the entries without pictures or descriptions */
.mean-nav .bw-mega-preview,
.mean-nav .bw-mega-media { display: none !important; }
.mean-nav .bw-mega-name small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .75; }

/* ---- Service boxes (home "Our services", and the services page): frosted glass ----
   Soft colour behind the boxes gives the glass something to blur. */
.feature-area.style-1,
.feature-area.style-2 {
  background-image:
    radial-gradient(26% 20% at 16% 42%, rgba(49, 126, 254, .4), transparent 72%),
    radial-gradient(24% 20% at 85% 36%, rgba(231, 249, 20, .55), transparent 72%),
    radial-gradient(28% 22% at 50% 60%, rgba(110, 193, 228, .45), transparent 72%),
    radial-gradient(24% 18% at 22% 84%, rgba(255, 150, 150, .35), transparent 72%),
    radial-gradient(24% 18% at 80% 86%, rgba(49, 126, 254, .3), transparent 72%); }
.feature-area .te-info-card.style-1,
.feature-area .te-info-card.style-2 {
  isolation: isolate; overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .24) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  -webkit-box-shadow: 0 16px 40px rgba(20, 32, 58, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .07), inset 0 1px 0 rgba(255, 255, 255, .95); }
/* every box in a row the same height, with its button lined up at the bottom */
.feature-area .row > [class*="elementor-repeater-item"] { display: flex; }
.feature-area .row > [class*="elementor-repeater-item"] > .te-info-card { width: 100%; display: flex; flex-direction: column; }
.feature-area .te-info-card .te-info-card-inner,
.feature-area .te-info-card .te-content-wrapper,
.feature-area .te-info-card .content { flex: 1 1 auto; }
.feature-area .te-info-card .content .te-read-more { margin-top: auto; }
/* the gloss across the top-left corner */
.feature-area .te-info-card.style-1::before,
.feature-area .te-info-card.style-2::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 42%); }
.feature-area .te-info-card.style-1:hover,
.feature-area .te-info-card.style-2:hover {
  background: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .52) 100%) !important;
  border-color: #fff;
  -webkit-box-shadow: 0 24px 56px rgba(49, 126, 254, .16), inset 0 1px 0 #fff;
  box-shadow: 0 24px 56px rgba(49, 126, 254, .16), inset 0 1px 0 #fff; }

/* Client testimonials: initials badge in place of a photo, and a link to the site we built. */
.te-testimonial-card .te-user-info .image.bw-avatar {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4C90FF, #1E5FE0); color: #fff;
  font-family: "Parkinsans", "Inter", sans-serif; font-weight: 700; font-size: 26px;
  letter-spacing: .5px; }
.te-testimonial-card .designation { line-height: 1.5 !important; }
.te-testimonial-card .bw-client-site {
  display: block; color: #317EFE; font-size: 15px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.te-testimonial-card .bw-client-site:hover { text-decoration: underline; }
.te-testimonial-card.style-3 .bw-client-site { display: inline-block; margin-top: 4px; }

/* ---- Blog listings: search + categories bar, then a card grid ---- */
.bw-blog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  background: #F6FBFF; border: 1px solid #E3EDFB; border-radius: 20px;
  padding: 18px 20px; margin-bottom: 40px; }
.bw-blog-search { position: relative; flex: 0 1 320px; min-width: 220px; margin: 0; }
.bw-blog-search i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: #317EFE; font-size: 15px; pointer-events: none; }
.bw-blog-search input {
  width: 100%; height: 50px; padding: 0 18px 0 46px; border: 1px solid #DCE6F5;
  border-radius: 40px; background: #fff; color: #14203A; font-size: 16px; }
.bw-blog-search input:focus { outline: none; border-color: #317EFE; box-shadow: 0 0 0 3px rgba(49,126,254,.15); }
.bw-blog-cats { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 400px; }
.bw-blog-cats a {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  border-radius: 40px; background: #fff; border: 1px solid #DCE6F5;
  color: #14203A; font-size: 14px; font-weight: 500; line-height: 1.2; transition: all .2s ease; }
.bw-blog-cats a span {
  font-size: 12px; color: #778196; background: #F0F4FA; border-radius: 20px; padding: 1px 7px; }
.bw-blog-cats a:hover { border-color: #317EFE; color: #317EFE; }
.bw-blog-cats a.is-active { background: #317EFE; border-color: #317EFE; color: #fff; }
.bw-blog-cats a.is-active span { background: rgba(255,255,255,.2); color: #fff; }
.bw-blog-empty { text-align: center; color: #778196; font-size: 18px; margin: 10px 0 40px; }

.bw-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.bw-blog-grid > header, .bw-blog-grid > .te-basic-pagination { grid-column: 1 / -1; }
.bw-blog-grid > .te-basic-pagination { margin-top: 10px; }
.bw-blog-grid .te-post-item { display: flex; flex-direction: column; margin-bottom: 0; }
.bw-blog-grid .te-post-item[hidden] { display: none; }
.bw-blog-grid .te-post-thumbnail, .bw-blog-grid .post-video { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.bw-blog-grid .te-post-thumbnail a { display: block; height: 100%; }
.bw-blog-grid .te-post-thumbnail img, .bw-blog-grid .post-video img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bw-blog-grid .te-post-item:hover .te-post-thumbnail img { transform: scale(1.05); }
.bw-blog-grid .te-post-content-wrapper { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 30px; }
.bw-blog-grid .te-post-title { font-size: 21px !important; line-height: 1.4 !important; order: 2; margin-top: 14px; }
.bw-blog-grid .te-post-meta { order: 1; display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  align-items: center !important; gap: 6px 16px !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; }
.bw-blog-grid .te-post-meta span { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; gap: 6px; }
.bw-blog-grid .te-post-meta span i { font-size: 14px !important; }
.bw-blog-grid .te-post-meta span a { gap: 6px !important; }
.bw-blog-grid .te-post-content { order: 3; }
.bw-blog-grid .te-post-content p { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.bw-blog-grid .te-read-more { order: 4; margin-top: auto !important; padding-top: 22px; margin-bottom: 0 !important; }
@media (max-width: 1199px) { .bw-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .bw-blog-grid { grid-template-columns: 1fr; gap: 24px; }
  .bw-blog-toolbar { padding: 16px; border-radius: 16px; }
  .bw-blog-search { flex: 1 1 100%; }
  .bw-blog-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 -4px; scrollbar-width: none; }
  .bw-blog-cats a { flex: 0 0 auto; }
}

/* ---- Contact page: "Get In Touch" cards above the form ---- */
.bw-touch { margin-bottom: 50px; }
.bw-touch .te-section-title { margin-bottom: 50px; }
.bw-touch-intro { max-width: 640px; margin: 18px auto 0; color: #335371; font-size: 17px; line-height: 1.7; }
.bw-touch > [class*="col-md-6"] { display: flex; }
.bw-touch .te-info-card { width: 100%; display: flex; flex-direction: column; }
.bw-touch .te-info-card-inner, .bw-touch .te-content-wrapper { flex: 1; display: flex; flex-direction: column; }
.bw-touch .te-info-card .content { flex: 1; display: flex; flex-direction: column; }
.bw-touch .te-info-card .content .te-read-more { margin-top: auto; }
.bw-touch .te-info-card .desc { word-break: break-word; }
.bw-touch .te-info-card .icon i { font-size: 36px; color: #317EFE; transition: transform .4s ease; }
.bw-touch .te-info-card:hover .icon i { transform: scale(1.08); }
.te-info-card.bw-card-blue { background-color: #E8FBFF; }
.te-info-card.bw-card-yellow { background-color: #F9F8DA; }
.bw-touch-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.bw-touch-social a {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #F9F4F1; color: #14203A; font-size: 18px; transition: all .25s ease; }
.bw-touch-social a:hover { background: #317EFE; color: #fff; }
.bw-touch .te-info-card .te-title-wrapper .title {
  font-size: 24px !important; line-height: 1.3 !important; margin: 0 !important; }
.bw-touch .te-info-card .te-title-wrapper { gap: 18px; }

/* ---- Newsletter sign-up forms ---- */
.bw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bw-newsletter { margin: 0; }
.bw-newsletter .mc4wp-form-fields { align-items: center; }
.bw-newsletter .single-field input { border: 0; outline: none; background: transparent; }
.bw-newsletter .submit-btn { border: 0; height: 50px; flex-shrink: 0; }
.bw-newsletter .submit-btn[disabled] { opacity: .6; cursor: wait; }
.bw-newsletter-msg { min-height: 1.4em; margin: 10px 0 0 !important; font-size: 15px; line-height: 1.4; }
.bw-newsletter-msg[data-state="ok"] { color: #1e8e3e; }
.bw-newsletter-msg[data-state="err"] { color: #d63638; }
/* footer: icon-only button inside the outlined pill */
.te-footer-widget .bw-newsletter .submit-btn { width: 46px; height: 46px; padding: 0; justify-content: center; }
.te-footer-widget .bw-newsletter .single-field input { height: 46px; padding: 0 16px; font-size: 15px; }
.te-footer-widget .bw-newsletter-msg[data-state="ok"] { color: #7CE0A0; }
.te-footer-widget .bw-newsletter-msg[data-state="err"] { color: #FF9C9C; }

/* ---- Service detail pages ---- */
.service-details-page .service-details .image img { width: 100%; aspect-ratio: 850 / 497; object-fit: cover; }
.service-details-page .te_widget_categories li.current a { color: #317EFE; font-weight: 600; }
.service-details-page .te_widget_categories li.current { border-color: #317EFE; }
.bw-service-cta { margin-top: 30px; }

/* Paragraph and description text uses Poppins (loaded from Google Fonts in base.html). */
p, .desc, .text, .te-section-desc, .te-post-content, blockquote p,
.te-testimonial-card .content p, .service-details-page .text p,
.service-details-page .content p, .service-details-page li {
  font-family: "Poppins", "Inter", sans-serif !important; }
.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 { font-family: "Parkinsans", "Inter", sans-serif !important; }

/* ---- Scroll-to-top button: solid brand circle so it shows on any background ---- */
.progress-wrap {
  right: 12px; bottom: 28px; width: 52px; height: 52px;
  background-color: #131A2A;
  -webkit-box-shadow: 0 6px 20px rgba(20, 32, 58, .22);
  box-shadow: 0 6px 20px rgba(20, 32, 58, .22);
  transition: opacity .2s linear, visibility .2s linear, transform .2s linear, background-color .2s ease; }
.progress-wrap::after {
  width: 52px; height: 52px; line-height: 52px;
  font-weight: 900; font-size: 18px; color: #317EFE; }
.progress-wrap:hover { background-color: #317EFE; }
.progress-wrap:hover::after { color: #fff; }
.progress-wrap:focus-visible { outline: 3px solid #E7F914; outline-offset: 3px; }
.progress-wrap svg path { fill: none; }
.progress-wrap svg.progress-circle path { stroke: #E7F914; stroke-width: 5; }
@media (max-width: 767px) {
  .progress-wrap { right: 6px; bottom: 18px; width: 40px; height: 40px; }
  .progress-wrap::after { width: 40px; height: 40px; line-height: 40px; font-size: 15px; }
}

/* ---- Blog article pages ---- */
.bw-article .te-post-thumbnail img { width: 100%; aspect-ratio: 850 / 440; object-fit: cover; }
.bw-article .te-post-meta { flex-wrap: wrap; gap: 8px 24px !important; }
.bw-article .te-post-meta span { font-size: 15px !important; }
.bw-article-body { font-size: 17px; line-height: 1.8; color: #335371; }
.bw-article-body p { margin: 0 0 18px !important; }
.bw-article-body > p:first-child { margin-top: 22px !important; font-size: 18px; color: #14203A; }
.bw-article-body h2 { font-size: 26px; line-height: 1.3; color: #14203A; margin: 36px 0 14px; }
.bw-article-body h3 { font-size: 20px; line-height: 1.35; color: #14203A; margin: 26px 0 8px; }
.bw-article-body ul, .bw-article-body ol { margin: 0 0 22px; padding-left: 22px; }
.bw-article-body ul li { list-style: disc; margin-bottom: 8px; }
.bw-article-body ol li { list-style: decimal; margin-bottom: 8px; }
.bw-article-body li::marker { color: #317EFE; }
.bw-article-body strong { color: #14203A; font-weight: 600; }
.bw-article-body a { color: #317EFE; text-decoration: underline; text-underline-offset: 3px; }
.bw-article-body a:hover { color: #14203A; }
@media (max-width: 767px) {
  .bw-article-body { font-size: 16px; }
  .bw-article-body h2 { font-size: 22px; }
}

/* ---- Animated orbs behind sections (static/js/bytewave-orbs.js) ---- */
.bw-has-orb { position: relative; isolation: isolate; }
.bw-orb-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.bw-orb-layer.bw-orb-over { z-index: 0; }
.bw-has-orb-over > .container { position: relative; z-index: 1; }
.bw-orb { position: absolute; transform: translateY(-50%); }

/* ---- 404 page ---- */
/* the robot animation (static/js/bytewave-404.js). The artwork is empty along
   the bottom, so the frame is 1000 x 880 of its 1000 x 1000, cropped there. */
.bw-404-anim { width: 100%; max-width: 460px; aspect-ratio: 1000 / 880; margin: 0 auto; }
.bw-404-anim svg { display: block; opacity: 0; transition: opacity .4s ease; }
.bw-404-anim.is-ready svg { opacity: 1; }
.bw-404-anim img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bw-404-kicker {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 18px;
  font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #317EFE; }
.bw-404-kicker::before, .bw-404-kicker::after { content: ""; width: 40px; border-bottom: 2px solid #317EFE; }
.bw-404-title { font-size: 44px; line-height: 1.2; color: #14203A; margin: 10px 0 16px; }
.bw-404-text { max-width: 620px; margin: 0 auto !important; font-size: 17px; line-height: 1.7; color: #335371; }
.bw-404-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.bw-404-ghost {
  display: inline-flex; align-items: center; padding: 8px 38px; border: 2px solid #317EFE; border-radius: 50px;
  font-size: 17px; font-weight: 600; letter-spacing: .6px; color: #317EFE; transition: all .3s ease; }
.bw-404-ghost:hover { background: #317EFE; color: #fff; }
.bw-404-links { margin-top: 70px; margin-bottom: -24px; }
.bw-404-links > div { display: flex; margin-bottom: 24px; }
.bw-404-link {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 28px 24px; background: #fff; border: 1px solid #E3E9F2; border-radius: 16px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.bw-404-link:hover { transform: translateY(-4px); border-color: #317EFE; box-shadow: 0 14px 30px rgba(20, 32, 58, .08); }
.bw-404-link .icon {
  width: 54px; height: 54px; border-radius: 50%; margin-bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E8FBFF; color: #317EFE; font-size: 21px; transition: all .3s ease; }
.bw-404-link:hover .icon { background: #317EFE; color: #fff; }
.bw-404-link .name { font-family: "Parkinsans", "Inter", sans-serif; font-size: 20px; font-weight: 600; color: #14203A; }
.bw-404-link .desc { font-size: 15px; line-height: 1.5; color: #335371; }
@media (max-width: 767px) {
  .bw-404-anim { max-width: 320px; }
  .bw-404-title { font-size: 30px; }
  .bw-404-text { font-size: 16px; }
  .bw-404-links { margin-top: 50px; }
}
/* phones: each link is a compact row, icon beside the text */
@media (max-width: 575px) {
  .bw-404-links > div { margin-bottom: 14px; }
  .bw-404-link {
    display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 2px;
    align-items: center; padding: 16px 18px; }
  .bw-404-link .icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; font-size: 19px; }
  .bw-404-link .name { font-size: 18px; }
  .bw-404-link .desc { font-size: 14px; }
}

/* ---- Team member profile (team details page) ---- */
.team-details .short-desc p { margin-bottom: 14px; }
.team-details .short-desc p:last-child { margin-bottom: 0; }
.bw-profile-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 0; list-style: none; }
.bw-profile-stats li { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 3px solid #E7F914; }
.bw-profile-stats strong { font-family: "Parkinsans", "Inter", sans-serif; font-size: 36px; line-height: 1; font-weight: 600; color: #317EFE; }
.bw-profile-stats span { font-family: "Poppins", "Inter", sans-serif; font-size: 14px; color: #335371; }
.bw-profile { display: flex; flex-direction: column; gap: 60px; }
.bw-profile .sec-title { margin-bottom: 26px; display: flex; align-items: center; gap: 12px; }
.bw-profile .sec-title i { font-size: 22px; color: #317EFE; }
.bw-profile-row { row-gap: 50px; }
/* experience and education timelines */
.bw-timeline { margin: 0; padding: 0 0 0 26px; list-style: none; border-left: 2px solid #E3E9F2; }
.bw-timeline li { position: relative; padding-bottom: 24px; }
.bw-timeline li:last-child { padding-bottom: 0; }
.bw-timeline li::before {
  content: ""; position: absolute; left: -34px; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid #317EFE; }
.bw-timeline .when { display: block; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #317EFE; }
.bw-timeline .what { display: block; margin-top: 4px; font-family: "Parkinsans", "Inter", sans-serif; font-size: 20px; font-weight: 600; color: #14203A; }
.bw-timeline a.what:hover { color: #317EFE; }
.bw-timeline .note { display: block; margin-top: 2px; font-family: "Poppins", "Inter", sans-serif; font-size: 15px; color: #335371; }
.bw-role { margin-top: 30px; padding: 24px 26px; border-radius: 16px; background: #E8FBFF; }
.bw-role h4 { font-size: 20px; color: #14203A; margin: 0 0 12px; }
.bw-role ul { margin: 0; padding-left: 20px; }
.bw-role li { list-style: disc; margin-bottom: 8px; font-family: "Poppins", "Inter", sans-serif; font-size: 15px; line-height: 1.6; color: #335371; }
.bw-role li:last-child { margin-bottom: 0; }
.bw-role li::marker { color: #317EFE; }
/* skills: one card, a row per group (icon and name on the left, tags on the right).
   Cards on this page are slightly see-through so the background orbs show. */
.bw-skills { padding: 8px 32px; border: 1px solid #E3E9F2; border-radius: 20px; background: rgba(255, 255, 255, .82); }
.bw-skill-row { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px dashed #D8E1EE; }
.bw-skill-row:last-child { border-bottom: 0; }
.bw-skill-head { display: flex; align-items: center; gap: 14px; }
.bw-skill-head .icon {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E8FBFF; color: #317EFE; font-size: 19px; }
.bw-skill-row:nth-child(even) .bw-skill-head .icon { background: #F9F8DA; color: #14203A; }
.bw-skill-head h4 { margin: 0; font-size: 19px; line-height: 1.3; color: #14203A; }
.bw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bw-tags li { padding: 5px 14px; border-radius: 50px; background: #E8FBFF; color: #14203A; font-family: "Poppins", "Inter", sans-serif; font-size: 14px; font-weight: 500; }
/* research and projects: cards of equal height */
.bw-profile-block .row > div { display: flex; margin-bottom: 24px; }
.bw-profile-block .row { margin-bottom: -24px; }
.bw-research { width: 100%; padding: 26px; border-radius: 16px; background: #F9F8DA; }
.bw-research .when { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #317EFE; }
.bw-research h4 { font-size: 19px; line-height: 1.35; color: #14203A; margin: 8px 0 10px; }
.bw-research p { margin: 0; font-size: 15px; line-height: 1.6; color: #335371; }
.bw-project {
  width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 26px;
  border: 1px solid #E3E9F2; border-radius: 16px; background: rgba(255, 255, 255, .82);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
a.bw-project:hover { transform: translateY(-4px); border-color: #317EFE; box-shadow: 0 14px 30px rgba(20, 32, 58, .08); }
.bw-project .client { font-family: "Parkinsans", "Inter", sans-serif; font-size: 20px; font-weight: 600; color: #14203A; }
.bw-project .about { font-family: "Poppins", "Inter", sans-serif; font-size: 15px; line-height: 1.6; color: #335371; }
.bw-project .tech { font-size: 13px; font-weight: 600; color: #317EFE; }
.bw-project .visit { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: #14203A; display: inline-flex; align-items: center; gap: 8px; }
a.bw-project:hover .visit { color: #317EFE; }
@media (max-width: 991px) {
  .bw-skill-row { grid-template-columns: 240px minmax(0, 1fr); }
  .bw-profile { gap: 50px; }
}
@media (max-width: 575px) {
  .bw-skills { padding: 4px 20px; }
  .bw-skill-row { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .bw-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .bw-profile-stats li { padding-left: 10px; }
  .bw-profile-stats strong { font-size: 28px; }
  .bw-profile-stats span { font-size: 13px; line-height: 1.35; }
}

/* ---- Home hero: the words, straight on the photo ----
   No panel behind them: the colour wash over the photo (below) keeps them
   readable. */
/* the label above the heading: a small glass pill with a lime dot */
.slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-short-title {
  display: inline-flex; align-items: center; gap: 10px; width: auto; margin-bottom: 22px; padding: 4px 16px 4px 12px;
  border-radius: 50px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(2, 24, 93, .08); }
.slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-short-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E7F914; box-shadow: 0 0 0 3px rgba(231, 249, 20, .3); }
.slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-short-desc {
  max-width: 540px; line-height: 1.7; color: #2B4462; }
.slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-btn-wrapper { padding-top: 38px; }
/* Read More: a glossy blue button */
.slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-btn-wrapper .te-theme-btn {
  padding: 14px 32px;
  background: linear-gradient(180deg, #5A9BFF 0%, #317EFE 55%, #2468E6 100%);
  box-shadow: 0 12px 26px rgba(49, 126, 254, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .25s ease, box-shadow .25s ease; }
.slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-btn-wrapper .te-theme-btn:hover {
  transform: translateY(-2px); box-shadow: 0 16px 32px rgba(49, 126, 254, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
/* Call Us Now: a glass pill */
.slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-btn-wrapper .te-call-btn {
  gap: 14px; padding: 6px 24px 6px 6px; border-radius: 60px;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(2, 24, 93, .08); }

/* ---- Home hero: a photo behind the whole section ----
   Over the photo, a wash of the site's light blue: strongest on the left,
   behind the words, fading out to the right where the photo shows clearly.
   The bottom fades into the section below. Dark mode uses navy instead
   (Dark mode section below). The words sit on their glass panel above. */
.slider-area.style-2 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, #fff 100%),
    linear-gradient(90deg, rgba(236, 246, 255, .92) 0%, rgba(220, 239, 255, .8) 40%, rgba(160, 215, 254, .22) 66%, rgba(160, 215, 254, .08) 100%),
    url("/static/images/hero-bg-home-office.webp") 64% 38% / cover no-repeat; }
/* the photo replaces the theme's framed picture: the frame's holder keeps its
   size, so the badge stays in place; the frame's pale wash on phones and the
   lines and stripes drawn around the frame go */
.slider-area.style-2 .te-single-slider .slider-feature-img { width: 907px; height: 951px; }
.slider-area.style-2 .te-single-slider .slider-feature-img .slider-feature-img-overlay,
.slider-area.style-2 .te-single-slider .slider-left-shape,
.slider-area.style-2 .te-single-slider .slider-right-shape,
.slider-area.style-2 .te-single-slider .slider-circle-shape { display: none; }
@media (max-width: 767px) {
  /* phones: the words fill the width, so the wash runs top to bottom instead */
  .slider-area.style-2 {
    background:
      linear-gradient(180deg, rgba(236, 246, 255, .84) 0%, rgba(226, 241, 255, .8) 70%, #fff 100%),
      url("/static/images/hero-bg-home-office.webp") 50% 30% / cover no-repeat; }
}

/* ---- Home hero: the "Certified engineers" badge in frosted glass ---- */
/* in front of the words (z-index 99), which it comes close to on wide screens */
.slider-area.style-2 .te-single-slider .slider-feature-img .company-award { z-index: 120; }
.slider-area.style-2 .te-single-slider .slider-feature-img .company-award .icon {
  position: relative; isolation: isolate;
  background: linear-gradient(145deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .28) 100%);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.15);
  backdrop-filter: blur(14px) saturate(170%) brightness(1.15);
  -webkit-box-shadow: 0 14px 40px rgba(2, 24, 93, .2), inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -3px 8px rgba(255, 255, 255, .25);
  box-shadow: 0 14px 40px rgba(2, 24, 93, .2), inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -3px 8px rgba(255, 255, 255, .25); }
/* the gloss: a soft highlight on the upper left */
.slider-area.style-2 .te-single-slider .slider-feature-img .company-award .icon::before {
  content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(110% 75% at 30% 8%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 55%); }

/* ---- Projects: glass cards with a filter (portfolio page, and Recent Work on the home page) ----
   Cards come from content/portfolio.py (templates/partials/work_grid.html); the
   filter is the isotope one in bytewave-main.js. */
.project-page-wrapper,
.portfolio-area.style-1 {
  background:
    radial-gradient(34% 26% at 14% 36%, rgba(178, 232, 196, .7), transparent 70%),
    radial-gradient(32% 26% at 58% 50%, rgba(120, 104, 232, .38), transparent 70%),
    radial-gradient(32% 26% at 88% 30%, rgba(198, 182, 252, .6), transparent 70%),
    radial-gradient(30% 22% at 44% 74%, rgba(255, 198, 150, .55), transparent 70%),
    radial-gradient(30% 22% at 86% 72%, rgba(150, 228, 206, .6), transparent 70%),
    linear-gradient(180deg, rgba(234, 236, 250, 0) 0%, #EAECFA 16%, #ECF1F8 50%, #E6F4EE 84%, rgba(230, 244, 238, 0) 100%); }
/* the large glass panel holding the filter and the cards (painted on ::before,
   so the cards inside can still blur the colours behind it) */
.bw-work { position: relative; isolation: isolate; padding: 28px; border-radius: 32px; }
.bw-work::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .2) 100%);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px rgba(60, 70, 140, .12), inset 0 1px 1px rgba(255, 255, 255, .95); }

/* the filter: a glass pill of buttons */
.te-portfolio-filter.bw-work-filter {
  width: -webkit-fit-content; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 6px; gap: 4px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85); border-radius: 30px;
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 24px rgba(60, 70, 140, .08), inset 0 1px 1px rgba(255, 255, 255, .95); }
.te-portfolio-filter.bw-work-filter li,
.te-portfolio-filter.bw-work-filter li:hover,
.te-portfolio-filter.bw-work-filter li.active { padding: 0; border: 0; background: none; font-size: inherit; letter-spacing: 0; }
.bw-work-filter button {
  padding: 10px 20px; border: 0; border-radius: 50px; background: transparent; cursor: pointer;
  font-family: "Parkinsans", "Inter", sans-serif; font-size: 15px; font-weight: 600; color: #4A5876;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.bw-work-filter li:hover button { background: rgba(255, 255, 255, .6); color: #14203A; }
.bw-work-filter li.active button { background: #fff; color: #14203A; box-shadow: 0 4px 14px rgba(60, 70, 140, .14); }
.bw-work-filter button:focus-visible { outline: 2px solid #317EFE; outline-offset: 2px; }

/* the cards */
.bw-work-grid { margin-bottom: -24px; }
.bw-work-grid > .te-single-isotop { margin-bottom: 24px; }
.bw-work-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-height: 318px; padding: 24px 24px 22px;
  border-radius: 22px; color: #14203A;
  background: linear-gradient(150deg, rgba(255, 255, 255, .66) 0%, var(--tint) 100%);
  border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 14px 34px rgba(60, 70, 140, .1), inset 0 1px 1px rgba(255, 255, 255, .95);
  transition: transform .3s ease, box-shadow .3s ease; }
.bw-work-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 40%); }
.bw-work-card:hover {
  color: #14203A; transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(60, 70, 140, .18), inset 0 1px 1px #fff; }
.bw-work-card:focus-visible { outline: 3px solid #317EFE; outline-offset: 3px; }
.bw-tint-1 { --tint: rgba(204, 240, 212, .62); }
.bw-tint-2 { --tint: rgba(194, 224, 246, .62); }
.bw-tint-3 { --tint: rgba(216, 204, 250, .62); }
.bw-tint-4 { --tint: rgba(226, 220, 248, .62); }
.bw-tint-5 { --tint: rgba(255, 220, 186, .66); }
.bw-tint-6 { --tint: rgba(194, 238, 222, .62); }
.bw-work-top { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.bw-work-tile,
.bw-work-thumb {
  height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 4px 12px rgba(60, 70, 140, .08); }
.bw-work-tile { width: 52px; display: inline-flex; align-items: center; justify-content: center; color: #317EFE; font-size: 22px; }
.bw-work-thumb { width: 76px; padding: 4px; overflow: hidden; }
.bw-work-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.bw-work-open {
  margin-left: auto; align-self: flex-start; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(20, 32, 58, .3); color: #14203A; font-size: 13px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.bw-work-card:hover .bw-work-open { background: #14203A; border-color: #14203A; color: #fff; }
.bw-work-title {
  margin: 0 0 10px; font-family: "Parkinsans", "Inter", sans-serif; font-size: 24px; line-height: 1.25; font-weight: 600; color: #14203A; }
.bw-work-desc { margin: 0 0 18px !important; font-size: 15px; line-height: 1.6; color: #55617A; }
.bw-work-tag {
  margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px;
  border-radius: 50px; background: rgba(20, 32, 58, .58); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.bw-work-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E7F914; }
@media (max-width: 767px) {
  .bw-work { padding: 16px; border-radius: 24px; }
  .bw-work-card { min-height: 0; }
  .bw-work-title { font-size: 21px; }
}

/* ==== Home page: About, Team, How we work, Latest blog in glass ====
   Each section sits on white with soft colour kept away from its top and
   bottom edges, so the sections flow into one another. Only colours, borders
   and blur change here: the sliders, hover effects and links work as before. */

/* -- the backgrounds -- */
.about-us-area.style-2 {
  background-color: transparent;
  background-image:
    radial-gradient(30% 22% at 10% 26%, rgba(49, 126, 254, .16), transparent 70%),
    radial-gradient(28% 22% at 82% 28%, rgba(231, 249, 20, .3), transparent 70%),
    radial-gradient(30% 20% at 46% 52%, rgba(160, 140, 250, .18), transparent 70%); }
.team-slider-area.style-1 {
  background-image:
    radial-gradient(28% 30% at 86% 32%, rgba(110, 193, 228, .3), transparent 70%),
    radial-gradient(30% 30% at 14% 62%, rgba(160, 140, 250, .22), transparent 70%),
    radial-gradient(26% 26% at 56% 70%, rgba(231, 249, 20, .2), transparent 70%); }
.te-process-step-area.style-1 {
  background-image:
    radial-gradient(30% 32% at 18% 62%, rgba(49, 126, 254, .24), transparent 70%),
    radial-gradient(28% 30% at 82% 58%, rgba(255, 150, 150, .22), transparent 70%),
    radial-gradient(26% 28% at 50% 44%, rgba(150, 228, 206, .26), transparent 70%); }
.latest-posts-area.style-1.background-gradient {
  background:
    radial-gradient(30% 26% at 14% 44%, rgba(160, 140, 250, .22), transparent 70%),
    radial-gradient(30% 26% at 86% 56%, rgba(231, 249, 20, .22), transparent 70%),
    linear-gradient(180deg, rgba(160, 215, 254, 0) 0%, rgba(160, 215, 254, .55) 24%, rgba(214, 236, 255, .5) 72%, rgba(246, 251, 255, 0) 100%); }

/* -- About: the theme leaves 330px below it for the newsletter banner that
      overlapped it; the banner is gone, so the usual 120px -- */
@media (min-width: 992px) { .about-us-area.style-2 { padding-bottom: 120px; } }
/* -- About: the four points as glass tiles, the "3 Yrs" tag as lime glass -- */
.about-us-area.style-2 .te-list-item {
  padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .36) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 10px 26px rgba(20, 32, 58, .06), inset 0 1px 0 #fff; }
.about-us-area.style-2 .te-about-image-card .te-company-foundation {
  background-color: rgba(231, 249, 20, .74);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }

/* -- Team: photos in a glass frame; the hover panel is a frosted plate -- */
.team-slider-area .te-team-card {
  padding: 8px; isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .34) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .08), inset 0 1px 0 #fff; }
.team-slider-area .te-team-card .image { border-radius: 14px; }
/* room below the slider, so the frames' lower edge and shadow are not cut off */
.team-slider-area .te-team-member-slider-wrapper .slick-list { padding-top: 6px; padding-bottom: 40px; }
.team-slider-area .te-team-card .te-content-wrapper {
  top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 14px;
  justify-content: flex-end; padding: 0 12px 12px;
  background: linear-gradient(180deg, rgba(14, 43, 197, 0) 40%, rgba(14, 43, 197, .45) 100%); }
.team-slider-area .te-team-card .te-content-wrapper .content {
  padding: 16px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }

/* -- How we work: tinted glass in the cards' navy and blue -- */
.te-process-step-area .te-process-step {
  isolation: isolate;
  background-color: rgba(19, 26, 42, .9);
  background-image: linear-gradient(150deg, rgba(49, 126, 254, .16) 0%, rgba(19, 26, 42, 0) 55%);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 50px rgba(19, 26, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .18); }
.te-process-step-area .elementor-repeater-item-9b9a1a2 .te-process-step {
  background-color: rgba(49, 126, 254, .88);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%);
  border-color: rgba(255, 255, 255, .3); }
.te-process-step-area .te-process-step::before { background-color: rgba(49, 126, 254, .9); }
/* the gloss across the top left (::before is the theme's hover fill) */
.te-process-step-area .te-process-step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 40%); }

/* -- the dotted world map behind Client feedback and the counters below it -- */
.counter-up-area.style-1 { background-image: url("/static/images/world-map.webp"); }

/* -- Client feedback (templates/partials/testimonials.html): glass cards; the
      look of the cards themselves is in the About page section below -- */
.testimonial-slider-area .te-testimonial-card {
  isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .36) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
.testimonial-slider-area .te-testimonial-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 40%); }

/* -- Latest blog: glass cards, glossy date badges, cards of equal height -- */
.latest-posts-area .te-post-card.style-1 {
  isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .38) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
.latest-posts-area .te-post-card .image .te-post-date {
  background: linear-gradient(180deg, rgba(90, 155, 255, .92) 0%, rgba(36, 104, 230, .92) 100%);
  border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px rgba(49, 126, 254, .3), inset 0 1px 0 rgba(255, 255, 255, .45); }
.latest-posts-area .row > [class*="col-lg-4"] { display: flex; }
.latest-posts-area .row > [class*="col-lg-4"] > .te-post-card { width: 100%; }
.latest-posts-area .te-post-card.style-1 .content { flex: 1 1 auto; display: flex; flex-direction: column; }
.latest-posts-area .te-post-card.style-1 .content .read-btn { margin-top: auto; }

/* -- the round slider arrows (Team and Client feedback) -- */
.team-slider-area .te-slider-nav,
.testimonial-slider-area .te-slider-nav {
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 10px 24px rgba(20, 32, 58, .1), inset 0 1px 0 #fff; }
.team-slider-area .te-slider-nav:hover,
.testimonial-slider-area .te-slider-nav:hover { background: #317EFE; border-color: #317EFE; }

/* ==== Team page, Cleavon's profile and the member profiles in glass ==== */
/* soft colour away from the edges; tall pages repeat it in bands */
.team-page,
.team-details-page {
  background-image:
    radial-gradient(30% 22% at 12% 30%, rgba(49, 126, 254, .16), transparent 70%),
    radial-gradient(28% 22% at 88% 42%, rgba(231, 249, 20, .24), transparent 70%),
    radial-gradient(30% 22% at 48% 72%, rgba(160, 140, 250, .2), transparent 70%);
  background-size: 100% 1400px; background-repeat: round; }

/* team cards (team page, and "More of the team" on the profiles) */
.team-page .te-team-card.style-2,
.bw-member-others .te-team-card.style-2 {
  isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .34) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
.team-page .te-team-card.style-2:hover,
.bw-member-others .te-team-card.style-2:hover {
  background: linear-gradient(150deg, rgba(90, 155, 255, .92) 0%, rgba(49, 126, 254, .84) 100%);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 22px 50px rgba(49, 126, 254, .3), inset 0 1px 0 rgba(255, 255, 255, .45); }

/* every card in a row the same height */
.team-page .row > [class*="col-"],
.bw-member-others > [class*="col-lg-4"] { display: flex; margin-bottom: 24px; }
.team-page .te-team-card.style-2,
.bw-member-others .te-team-card.style-2 { width: 100%; margin-bottom: 0; display: flex; flex-direction: column; }
/* the theme sizes the name panel to the whole card; here it takes only what is left under the photo */
.team-page .te-team-card.style-2 .te-content-wrapper,
.bw-member-others .te-team-card.style-2 .te-content-wrapper { height: auto; flex: 1 1 auto; justify-content: flex-start; }
.bw-member-others { row-gap: 0; }
/* the profile photo in a glass frame */
.team-details-page .team-details .image {
  padding: 10px; isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .34) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 20px 50px rgba(20, 32, 58, .1), inset 0 1px 0 #fff; }
.team-details-page .team-details .image img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Cleavon's profile: the role box, skills, research and projects as glass */
.bw-skills,
.bw-project {
  background: linear-gradient(150deg, rgba(255, 255, 255, .8) 0%, rgba(240, 246, 255, .55) 100%);
  border: 1px solid rgba(20, 32, 58, .08);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .06), inset 0 1px 0 #fff; }
.bw-role {
  background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(214, 246, 255, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .06), inset 0 1px 0 #fff; }
.bw-research {
  background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(249, 246, 196, .62) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .06), inset 0 1px 0 #fff; }
.bw-tags li { background: rgba(232, 251, 255, .85); border: 1px solid rgba(255, 255, 255, .9); }

/* member profiles (templates/pages/team_member.html) */
.bw-member-page .team-details .image { width: 440px; }
.bw-member-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
/* full profiles: the buttons sit under the stats as on Cleavon's page */
.team-details-page:not(.bw-member-page) .bw-member-actions { margin-top: 0; }
.bw-ghost-btn {
  display: inline-flex; align-items: center; padding: 9px 26px; border-radius: 50px;
  border: 1.5px solid #317EFE; color: #317EFE; font-size: 16px; font-weight: 600;
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .25s ease, color .25s ease; }
.bw-ghost-btn:hover { background: #317EFE; color: #fff; }
.bw-member-page .bw-tags { margin-top: 22px; }
.bw-member-others { margin-top: 90px; row-gap: 24px; }
.bw-member-others-title { margin: 0 0 6px; font-size: 32px; color: #14203A; }
@media (max-width: 991px) {
  .bw-member-page .team-details .image { width: 100%; }
  .bw-member-others { margin-top: 60px; }
}

/* ==== Page headers (every page but home): one pane of glass ====
   As wide as the menu bar above it. It is thin and only lightly blurred, so
   the circuit-board picture and the orb show through. */
.page-breadcrumb-area { padding-top: 124px; padding-bottom: 48px; }
.page-breadcrumb-area .te-breadcrumb-wrapper {
  position: relative; isolation: isolate; margin: 0 calc(-1 * var(--bw-bar-out, 0px)); padding: 112px 48px 104px;
  text-align: center; border-radius: 32px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .1) 100%);
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(3px) saturate(150%); backdrop-filter: blur(3px) saturate(150%);
  box-shadow: 0 24px 60px rgba(2, 24, 93, .1), inset 0 1px 1px rgba(255, 255, 255, .9); }
.page-breadcrumb-area .te-breadcrumb-wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 34%); }
.page-breadcrumb-area .te-breadcrumb-list {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 4px; max-width: 100%;
  margin-top: 16px; padding: 7px 18px; border-radius: 24px;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 6px 16px rgba(2, 24, 93, .08); }
@media (max-width: 991px) {
  .page-breadcrumb-area { padding-top: 112px; padding-bottom: 36px; }
  .page-breadcrumb-area .te-breadcrumb-wrapper { padding: 80px 32px 76px; }
}
@media (max-width: 767px) {
  .page-breadcrumb-area .te-breadcrumb-wrapper { padding: 56px 20px 52px; border-radius: 24px; }
}

/* ==== About page in glass ====
   Every part of the page sits on frosted glass. The glass is thin and only
   lightly blurred, so the soft colour behind it and the animated orbs
   (bytewave-orbs.js) show through. The section variants styled here
   (about-us-area style-1, counter-up-area style-2) are only used on this
   page; Client feedback (testimonial-slider-area style-3) is shared with the
   home page. */

/* -- soft colour behind the sections, kept away from their top and bottom edges -- */
.about-us-area.style-1 {
  background-image:
    radial-gradient(30% 24% at 14% 70%, rgba(49, 126, 254, .24), transparent 70%),
    radial-gradient(28% 22% at 86% 74%, rgba(231, 249, 20, .36), transparent 70%),
    radial-gradient(30% 22% at 64% 48%, rgba(160, 140, 250, .24), transparent 70%); }
.testimonial-slider-area.style-3 {
  background-image:
    radial-gradient(30% 26% at 20% 60%, rgba(231, 249, 20, .22), transparent 70%),
    radial-gradient(30% 26% at 82% 56%, rgba(49, 126, 254, .18), transparent 70%); }

/* -- About us: the photos in glass frames, the four points and the two
      services as glass tiles, the "Daily Activity" badge as glass -- */
.about-us-area.style-1 .te-main-img-wrapper .te-main-img-inner > img,
.about-us-area.style-1 .te-main-img-inner .te-another-image .te-another-image-inner {
  background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .3) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%);
  box-shadow: 0 20px 50px rgba(20, 32, 58, .12), inset 0 1px 0 #fff; }
.about-us-area.style-1 .te-main-img-wrapper .te-main-img-inner > img {
  padding: 8px; border: 1px solid rgba(255, 255, 255, .9); }
.about-us-area.style-1 .te-main-img-inner .te-another-image .te-another-image-inner {
  padding: 8px; border: 1px solid rgba(255, 255, 255, .9); }
.about-us-area.style-1 .te-another-image-inner img { border-radius: 13px; }
.about-us-area.style-1 .te-main-img-inner .te-another-image .te-badge-text {
  background: linear-gradient(150deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  box-shadow: 0 14px 34px rgba(20, 32, 58, .12), inset 0 1px 0 #fff; }
.about-us-area.style-1 .te-about-info-content .te-list-item-wrapper { gap: 12px; padding-top: 10px; }
.about-us-area.style-1 .te-list-item-wrapper .te-list-item,
.about-us-area.style-1 .te-info-list .te-single-info-list {
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .26) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(4px) saturate(160%); backdrop-filter: blur(4px) saturate(160%);
  box-shadow: 0 14px 36px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
.about-us-area.style-1 .te-list-item-wrapper .te-list-item { padding: 12px 16px; border-radius: 16px; }
.about-us-area.style-1 .te-about-info-content .te-info-list { gap: 16px; padding-top: 28px; border-top: 0; }
.about-us-area.style-1 .te-info-list .te-single-info-list { flex: 1 1 0; padding: 26px 24px 24px; }

/* -- the counters: navy glass, with an orb drawn inside the card -- */
.counter-up-area.style-2 .te-counter-card {
  overflow: hidden;
  background-color: rgba(19, 26, 42, .9);
  background-image: linear-gradient(150deg, rgba(49, 126, 254, .22) 0%, rgba(19, 26, 42, 0) 55%);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 50px rgba(19, 26, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .18); }
.counter-up-area.style-2 .te-counter-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 38%); }

/* -- Client feedback: glass cards, all the same height -- */
.testimonial-slider-area.style-3 .te-testimonial-card.style-3 {
  height: 100%; padding: 34px 32px 30px; border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .26) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(160%); backdrop-filter: blur(4px) saturate(160%);
  /* a shadow that stays within the slider's 15px sides, so it is not cut off */
  box-shadow: 0 16px 26px -12px rgba(20, 32, 58, .16), inset 0 1px 0 #fff; }
.testimonial-slider-area.style-3 .te-testimonial-card.style-3 .te-content-wrapper { height: 100%; }
.testimonial-slider-area.style-3 .te-testimonial-card.style-3 .te-content-wrapper .content { padding-right: 70px; }
.testimonial-slider-area.style-3 .te-testimonial-card.style-3 .te-content-wrapper .te-user-meta { margin-top: auto; }
.testimonial-slider-area.style-3 .te-testimonial-card.style-3 .te-content-wrapper .te-user-meta .te-user-info {
  background: rgba(255, 255, 255, .5); border-color: rgba(49, 126, 254, .4);
  box-shadow: inset 0 1px 0 #fff; }
.testimonial-slider-area.style-3 .te-testimonial-card.style-3 .te-content-wrapper .te-user-meta .icon { top: 26px; right: 28px; }
/* room around the slider, so the cards' edges and shadows are not cut off */
.testimonial-slider-area.style-3 .te-testimonial-slider-wrapper .slick-list { padding-top: 6px; padding-bottom: 44px; }
.testimonial-slider-area.style-3 .slick-track { display: flex; }
.testimonial-slider-area.style-3 .slick-slide { height: auto; }
.testimonial-slider-area.style-3 .slick-slide > div,
.testimonial-slider-area.style-3 .slick-slide > div > div { height: 100%; }
@media (max-width: 767px) {
  .about-us-area.style-1 .te-info-list .te-single-info-list { flex: 0 0 auto; }
  .testimonial-slider-area.style-3 .te-testimonial-card.style-3 { padding: 26px 20px 22px; }
  .testimonial-slider-area.style-3 .te-testimonial-card.style-3 .te-content-wrapper .content { padding-right: 36px; }
  .testimonial-slider-area.style-3 .te-testimonial-card.style-3 .te-content-wrapper .te-user-meta .icon { top: 20px; right: 18px; }
}

/* ==== The other pages in glass: service details, projects, blog, contact, privacy, 404 ====
   The same thin glass as the About page, over soft colour and the orbs.
   (Services, Portfolio and Team have their own sections above.) Long
   reading text (articles, the privacy policy) sits on whiter glass, so it
   stays easy to read. */

/* -- soft colour behind the page content, repeated down long pages -- */
.service-details-page,
.project-details-page,
.blog-area,
.contact-form-area,
.tp-page-area,
.bw-404 {
  background-image:
    radial-gradient(30% 22% at 12% 30%, rgba(49, 126, 254, .2), transparent 70%),
    radial-gradient(28% 22% at 88% 46%, rgba(231, 249, 20, .28), transparent 70%),
    radial-gradient(30% 22% at 46% 76%, rgba(160, 140, 250, .22), transparent 70%);
  background-size: 100% 1400px; background-repeat: round; }

/* -- the glass -- */
.service-details-page .sidebar .widget,
.service-details-page .service-details-overview .list-wrapper,
.project-details-overview .list-wrapper .user-card,
.bw-blog-toolbar,
.blog-area .bw-blog-grid .te-post-item,
.blog-area .sidebar .sidebar__widget,
.blog-area .te-blog-post-nav,
.contact-form-area .te-comment-respond,
.bw-404-link {
  background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .28) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
/* whiter glass under long reading text */
.blog-area .te-post-item.bw-article,
.tp-page-area .tp-page-content {
  background: linear-gradient(150deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .56) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 20px 50px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
/* photos in glass frames */
.service-details-page .service-details .image,
.project-details-page .project-details .image,
.project-details-overview .list-wrapper .image {
  padding: 8px; border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .3) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%);
  box-shadow: 0 20px 50px rgba(20, 32, 58, .1), inset 0 1px 0 #fff; }
.service-details-page .service-details .image img,
.project-details-page .project-details .image img,
.project-details-overview .list-wrapper .image img { display: block; width: 100%; border-radius: 14px; }

/* -- Service details: the services list and the highlights as glass panels -- */
.service-details-page .sidebar .widget { padding: 30px 28px 22px; border-radius: 22px; }
.service-details-page .service-details-overview .list-wrapper { padding: 26px 28px; border-radius: 20px; }

/* -- Projects: the "Project Information" card as blue glass over the photo -- */
.project-details-page .project-details .content .project-info-wrapper {
  background: linear-gradient(150deg, rgba(90, 155, 255, .9) 0%, rgba(49, 126, 254, .8) 100%);
  border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 24px 50px rgba(49, 126, 254, .3), inset 0 1px 0 rgba(255, 255, 255, .45); }

/* -- Blog: the search bar, category pills, cards, page numbers and sidebar -- */
.bw-blog-toolbar { border-radius: 22px; }
.bw-blog-search input { background: rgba(255, 255, 255, .75); border-color: rgba(20, 32, 58, .1); }
.bw-blog-cats a {
  background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 4px 12px rgba(20, 32, 58, .05), inset 0 1px 0 #fff; }
.bw-blog-cats a span { background: rgba(240, 244, 250, .85); }
.blog-area .te-basic-pagination .page-numbers {
  background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
.sidebar__widget .tagcloud a { background: rgba(255, 255, 255, .55); border-color: rgba(20, 32, 58, .12); }
/* an article: the photo framed by the glass card around it */
.blog-area .te-post-item.bw-article { padding: 12px 12px 34px; border-radius: 26px; }
.bw-article .te-post-thumbnail { border-radius: 16px; overflow: hidden; }
.bw-article .te-post-content-wrapper { padding: 0 22px; }
.blog-area .te-blog-post-nav .te-post-navigation::after { background-color: rgba(20, 32, 58, .1); }

/* -- Contact: the three cards as tinted glass, the form on a glass panel -- */
.bw-touch .te-info-card.style-1 {
  background: linear-gradient(150deg, rgba(255, 228, 226, .72) 0%, rgba(255, 238, 236, .36) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%);
  box-shadow: 0 16px 40px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
.bw-touch .te-info-card.style-1.bw-card-blue {
  background: linear-gradient(150deg, rgba(214, 245, 255, .78) 0%, rgba(232, 251, 255, .4) 100%); }
.bw-touch .te-info-card.style-1.bw-card-yellow {
  background: linear-gradient(150deg, rgba(246, 245, 196, .8) 0%, rgba(249, 248, 218, .4) 100%); }
.bw-touch-social a {
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(20, 32, 58, .07), inset 0 1px 0 #fff; }
.contact-form-area .te-comment-respond { border-radius: 26px; }
/* the map (just below the form section) in a glass frame, as wide as the page content */
.contact-map-area {
  width: min(1290px, calc(100% - 30px)); margin: 0 auto 120px; padding: 10px; border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .3) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%);
  box-shadow: 0 20px 50px rgba(20, 32, 58, .1), inset 0 1px 0 #fff; }
.contact-map-area .te-map-widget iframe { display: block; height: 480px; margin: 0; border: 0; border-radius: 20px; }

/* -- Privacy policy: the text on one glass panel -- */
.tp-page-area .tp-page-content { padding: 50px 56px 40px; border-radius: 28px; }

/* -- 404: the "Back to home" outline button on glass -- */
.bw-404-ghost {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

@media (max-width: 767px) {
  .service-details-page .sidebar .widget { padding: 24px 20px 16px; }
  .blog-area .te-post-item.bw-article { padding: 8px 8px 26px; border-radius: 20px; }
  .bw-article .te-post-content-wrapper { padding: 0 12px; }
  .tp-page-area .tp-page-content { padding: 30px 22px 22px; border-radius: 22px; }
  .contact-map-area { width: calc(100% - 24px); margin-bottom: 80px; padding: 6px; border-radius: 22px; }
  .contact-map-area .te-map-widget iframe { height: 340px; border-radius: 16px; }
}

/* ---- Light / dark mode button (bytewave-theme.js) ---- */
.bw-theme-toggle {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; margin-right: 12px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(20, 32, 58, .1); background: rgba(255, 255, 255, .6); color: #14203A; font-size: 17px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(20, 32, 58, .1), inset 0 1px 0 #fff;
  transition: background-color .25s ease, color .25s ease, transform .25s ease; }
@media (hover: hover) { .bw-theme-toggle:hover { background: #317EFE; color: #fff; transform: rotate(-12deg); } }
.bw-theme-toggle:focus-visible { outline: 3px solid #317EFE; outline-offset: 3px; }
.bw-theme-toggle .fa-sun-bright { display: none; }
@media (max-width: 991px) { .bw-theme-toggle { width: 40px; height: 40px; font-size: 15px; margin-right: 10px; } }

/* ==== Dark mode: the base, and corrections the generated stylesheet cannot work out ====
   Most of dark mode is generated from the stylesheets (darkmode.py, served as
   /theme-dark.css). What it cannot know goes here. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background-color: #0A0F1C; color: #B9C6DA; }
html[data-theme="dark"] ::selection { background: #317EFE; color: #fff; }

/* the header and its dropdowns float over the page: denser dark glass keeps the
   menu readable over bright photos */
html[data-theme="dark"] .header-area.style-2 .te-header-menu-area .menu-wrapper::before {
  background: linear-gradient(135deg, rgba(22, 31, 52, .78) 0%, rgba(12, 18, 33, .7) 100%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-theme="dark"] .header-area.style-2 .te-header-menu-area.te-sticky_menu .menu-wrapper::before {
  background: linear-gradient(135deg, rgba(22, 31, 52, .9) 0%, rgba(12, 18, 33, .86) 100%); }
html[data-theme="dark"] .header-area.style-2 .te-header-menu-area .menu-wrapper::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 50%); }
html[data-theme="dark"] .header-area.style-2 .te-main-menu ul.bw-mega {
  background: linear-gradient(140deg, rgba(24, 33, 56, .94) 0%, rgba(14, 20, 37, .92) 100%);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1); }
html[data-theme="dark"] .header-area.style-2 .te-main-menu .bw-mega > li.is-current > a,
html[data-theme="dark"] .header-area.style-2 .te-main-menu .bw-mega > li.bw-mega-all > a:hover {
  background: rgba(255, 255, 255, .08); color: #6FA8FF; box-shadow: none; }
html[data-theme="dark"] .header-area.style-2 .te-header-menu-area .te-main-menu > ul > li > a:hover,
html[data-theme="dark"] .header-area.style-2 .te-main-menu > ul > li.bw-has-mega.is-open > a { color: #fff; }

html[data-theme="dark"] .slider-area.style-2 .te-slider-content-wrapper .te-slider-content .te-slider-short-title {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #6FA8FF; }
/* the hero photo under a navy wash, darkest behind the words; the white desk does not glare */
html[data-theme="dark"] .slider-area.style-2 {
  background:
    linear-gradient(180deg, rgba(10, 15, 28, 0) 76%, #0A0F1C 100%),
    linear-gradient(90deg, rgba(10, 15, 28, .94) 0%, rgba(10, 15, 28, .84) 40%, rgba(11, 22, 48, .55) 66%, rgba(11, 22, 48, .45) 100%),
    url("/static/images/hero-bg-home-office.webp") 64% 38% / cover no-repeat; }
@media (max-width: 767px) {
  html[data-theme="dark"] .slider-area.style-2 {
    background:
      linear-gradient(180deg, rgba(10, 15, 28, .82) 0%, rgba(10, 15, 28, .8) 70%, #0A0F1C 100%),
      url("/static/images/hero-bg-home-office.webp") 50% 30% / cover no-repeat; }
}

/* the circuit-board lines in every page header: light lines that show on navy
   (each page sets the light picture inline, hence !important) */
html[data-theme="dark"] .page-breadcrumb-area.page-bg { background-image: url("/static/images/page-header-dark.webp") !important; }

/* the dotted world map on the home page: light dots that show on navy */
html[data-theme="dark"] .counter-up-area.style-1 { background-image: url("/static/images/world-map-dark.webp"); }

/* the logo with light lettering */
.bw-logo-dark { display: none !important; }
html[data-theme="dark"] .bw-logo-light { display: none !important; }
html[data-theme="dark"] .bw-logo-dark { display: inline-block !important; }

/* the button itself: a sun in dark mode */
html[data-theme="dark"] .bw-theme-toggle {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #E7F914;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
@media (hover: hover) { html[data-theme="dark"] .bw-theme-toggle:hover { background: #317EFE; color: #fff; } }
html[data-theme="dark"] .bw-theme-toggle .fa-moon { display: none; }
html[data-theme="dark"] .bw-theme-toggle .fa-sun-bright { display: inline-block; }

/* dark text stays dark where it sits on the lime */
html[data-theme="dark"] .te-header-btn .te-quote-btn,
html[data-theme="dark"] .te-about-image-card .te-company-foundation,
html[data-theme="dark"] .te-about-image-card .te-company-foundation .title,
html[data-theme="dark"] .te-about-image-card .te-company-foundation .counter-title { color: #14203A; }

/* portfolio cards: darker tints */
html[data-theme="dark"] .bw-tint-1 { --tint: rgba(90, 190, 120, .16); }
html[data-theme="dark"] .bw-tint-2 { --tint: rgba(80, 150, 230, .18); }
html[data-theme="dark"] .bw-tint-3 { --tint: rgba(140, 110, 240, .2); }
html[data-theme="dark"] .bw-tint-4 { --tint: rgba(170, 150, 240, .16); }
html[data-theme="dark"] .bw-tint-5 { --tint: rgba(240, 160, 90, .18); }
html[data-theme="dark"] .bw-tint-6 { --tint: rgba(80, 200, 160, .16); }