/* =========================================================================
   BALTIC STACK — 2026 THEME
   A modern, dark, high-contrast redesign layered on top of the existing
   template (style.css / custom.css / bootstrap). Loaded last so it wins the
   cascade. No blade markup was changed to produce this file — every
   selector below targets classes that already exist in the views.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bs-ink:        #08090b;
  --bs-surface:    #101114;
  --bs-surface-2:  #17181c;
  --bs-surface-3:  #1e2025;
  --bs-border:     rgba(255,255,255,.09);
  --bs-border-2:   rgba(255,255,255,.16);
  --bs-text:       #eef0f2;
  --bs-text-dim:   #a3a7ae;
  --bs-text-mute:  #74787f;

  --accent:        #c6ff3d;   /* acid lime */
  --accent-ink:    #0c1000;
  --accent-2:      #7c5cff;   /* violet */
  --accent-3:      #00e0b8;   /* mint */
  --grad: linear-gradient(120deg, var(--accent-2), var(--accent-3) 55%, var(--accent));

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --ff-display: 'Space Grotesk', 'Inter', sans-serif;
  --ff-body: 'Inter', sans-serif;
}

/* ---------- base ---------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  background:var(--bs-ink) !important;
  color:var(--bs-text) !important;
  font-family:var(--ff-body) !important;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.section-title,.title,.sub-heading,.section-subtitle,
.rr-btn,.rr-primary-btn,.slider-btn,.widget-title{
  font-family:var(--ff-display) !important;
  letter-spacing:-0.01em;
}
a{color:inherit}
p{color:var(--bs-text-dim)}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- global readability fix -----------------------------------
   The base template was authored for a light background, so a lot of its
   own CSS sets dark text colors with high specificity. Now that the page
   background is dark everywhere, those rules make text disappear. This
   catch-all forces every element back to a light, readable color; any
   component that genuinely needs dark text on a light chip (buttons,
   badges, accent labels) already targets itself with a class selector
   below, which is more specific and still wins over this universal rule. */
body *{color:var(--bs-text) !important}
body :is(p,.text,.desc,.description,li,span,td,th,label,blockquote,figcaption){color:var(--bs-text-dim) !important}
body :is(h1,h2,h3,h4,h5,h6){color:var(--bs-text) !important}

/* light-background "cards"/"boxes" the base template ships for a white
   page — force them dark too, or dark text would sit on a white chip. */
body :is(.bg-white,.bg-light,.white-bg,.light-bg,.bg-body){background-color:var(--bs-surface) !important}

/* faint engineering grid backdrop, sits behind everything */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}
#has_smooth,#smooth-wrapper,#smooth-content,main#main-content{position:relative;z-index:1}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bs-ink)}
::-webkit-scrollbar-thumb{background:var(--bs-surface-3);border-radius:10px;border:2px solid var(--bs-ink)}

/* focus ring — recolored to match new accent, mechanism unchanged */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--accent) !important;outline-offset:2px}
.skip-link{background:var(--accent) !important;color:var(--accent-ink) !important}

.container,.rr-container-1405,.container.large{position:relative;z-index:1}

/* ---------- buttons --------------------------------------------------- */
.rr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent) !important;
  color:var(--accent-ink) !important;
  border:none !important;
  border-radius:999px !important;
  padding:0 30px !important;
  font-weight:600;font-size:14px;text-transform:none;
  box-shadow:0 0 0 0 rgba(198,255,61,.5);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  overflow:hidden;
}
.rr-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(198,255,61,.45)}
.rr-btn .text-two{color:var(--accent-ink) !important}

.rr-primary-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent !important;
  color:var(--bs-text) !important;
  border:1px solid var(--bs-border-2) !important;
  border-radius:999px !important;
  padding:14px 26px !important;
  font-weight:600;font-size:14px;
  transition:all .25s ease;
}
.rr-primary-btn:hover{
  background:var(--bs-text) !important;
  color:var(--bs-ink) !important;
  border-color:var(--bs-text) !important;
  transform:translateY(-2px);
}
.rr-primary-btn i{transition:transform .25s ease}
.rr-primary-btn:hover i{transform:translateX(3px)}

.rr-btn-underline{
  display:inline-block;
  color:var(--bs-text) !important;
  font-weight:600;font-size:13px;
  line-height:1.4;
  white-space:normal !important;   /* base template forces nowrap + the card
                                       clips overflow, which chopped the tail
                                       off longer service names */
  overflow-wrap:break-word;
  border-bottom:1px solid var(--bs-border-2);
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.rr-btn-underline::before{display:none} /* template's full-width underline
                                             pseudo-element assumed a single
                                             fixed-width line; the themed
                                             border-bottom above does the
                                             same job and wraps correctly */
.rr-btn-underline:hover{border-color:var(--accent);color:var(--accent) !important}

/* ---------- section heading kit --------------------------------------- */
.sub-heading,.section-subtitle{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent) !important;
  text-transform:uppercase;font-size:12.5px;letter-spacing:.14em;font-weight:600;
  background:none !important;
}
.sub-heading::before,.section-subtitle::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px 2px var(--accent);
}
.section-title,h2.section-title{
  color:var(--bs-text) !important;
  font-weight:600 !important;
  font-size:clamp(28px,4vw,46px) !important;
  line-height:1.12 !important;
}
.section-content .text, .section-header .text{color:var(--bs-text-dim) !important}

/* ---------- header ------------------------------------------------ */
.header-area-2{
  position:sticky !important;top:0;z-index:200;
  background:rgba(8,9,11,.72) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--bs-border);
}
.header-area-2 .header-main{background:transparent !important}
.header__logo .brand-text{
  font-family:var(--ff-display);font-weight:700;font-size:22px;color:var(--bs-text);
}
.header__logo img{filter:brightness(0) invert(1)}
.main-menu ul{gap:6px}
.main-menu a{
  color:var(--bs-text-dim) !important;
  font-weight:500;font-size:14.5px;
  padding:10px 16px !important;border-radius:999px;
  transition:color .2s ease, background .2s ease;
}
.main-menu a:hover,.main-menu a[aria-current="page"]{
  color:var(--bs-text) !important;
  background:rgba(255,255,255,.06);
}
.header__navicon .side-toggle{
  border:1px solid var(--bs-border-2);border-radius:10px;padding:10px;
  background:transparent;
}
.header__navicon img{filter:invert(1)}

/* mobile off-canvas */
.side-info{background:var(--bs-surface) !important;border-left:1px solid var(--bs-border)}
.offset-logo .brand-text{color:var(--bs-text);font-family:var(--ff-display);font-weight:700}
.side-info-close{color:var(--bs-text) !important;border:1px solid var(--bs-border-2);border-radius:8px}
.offset-widget-box .title{color:var(--accent) !important;text-transform:uppercase;font-size:12px;letter-spacing:.12em}
.contact-meta .contact-item{color:var(--bs-text-dim)}
.contact-meta .icon{color:var(--accent)}
.mobile-menu ul li a{color:var(--bs-text) !important;border-color:var(--bs-border) !important}
.mobile-menu .mean-bar,.mean-container .mean-bar{background:transparent !important}
.mean-container a.meanmenu-reveal span{background:var(--bs-text) !important}

/* ---------- hero / slider ------------------------------------------- */
.slider-section{background:var(--bs-ink)}
.slider-item{background:var(--bs-ink) !important}
.slider-item .slide-img{opacity:.34 !important;filter:grayscale(45%) contrast(1.05)}
.slider-item .overlay{
  display:block !important;
  background:
    radial-gradient(ellipse 60% 55% at 80% 15%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(ellipse 50% 45% at 10% 90%, rgba(198,255,61,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.85) 65%, var(--bs-ink) 100%) !important;
}
.it-hero-content .sub-title{
  color:var(--accent) !important;text-transform:uppercase;letter-spacing:.16em;font-size:6.5px;font-weight:600;
  text-shadow:none !important;
}
.it-hero-content .title{
  color:var(--bs-text) !important;
  font-weight:700 !important;
  font-size:clamp(19px,3vw,42px) !important;
  line-height:1.08 !important;
  text-shadow:none !important;
  max-width:16ch;
}
.it-hero-content .bottom-title{
  color:var(--bs-text-dim) !important;font-size:9px;max-width:52ch;text-shadow:none !important;
}
.slider-btn{
  width:74px;height:74px;border-radius:50%;
  background:var(--accent) !important;color:var(--accent-ink) !important;
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -10px rgba(198,255,61,.4);
  transition:transform .3s ease;
}
.slider-btn:hover{transform:rotate(-45deg) scale(1.05)}
.slider-tab-wrap{border-top:1px solid var(--bs-border) !important;background:var(--bs-ink) !important}
.slider-tab-btn{color:var(--bs-text-mute) !important}
.swiper-slide-thumb-active .slider-tab-btn,.slider-tab .swiper-slide-thumb-active .slider-tab-btn{color:var(--accent) !important}

/* ---------- about section (redesigned) -------------------------------- */
/* extra breathing room between the hero slider and this section */
.about-section-4{
  background:var(--bs-ink);
  padding-top:120px !important;
  margin-top:20px;
  position:relative;
}

/* the whole section now sits inside a bordered "panel" with a soft glow,
   instead of floating directly on the page background */
.about-section-4 .container{
  background:var(--bs-surface);
  border:1px solid var(--bs-border);
  border-radius:32px;
  padding:64px 48px !important;
  position:relative;
  overflow:hidden;
}
.about-section-4 .container::before{
  content:"";
  position:absolute;top:-40%;right:-15%;width:60%;height:140%;
  background:radial-gradient(closest-side, rgba(198,255,61,.12), transparent 70%);
  pointer-events:none;
}
.about-section-4 .shape{display:none} /* old decorative png doesn't fit the new panel look */

.about-img-wrap-4{position:relative}
.about-img-wrap-4 img{
  border-radius:var(--radius-md);
  filter:grayscale(35%) contrast(1.05);
  border:1px solid var(--bs-border-2);
}
.about-img-wrap-4 .img-1{
  position:relative;z-index:1;
  border-radius:var(--radius-md);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.about-img-wrap-4 .img-2{
  position:relative;margin-top:-60px;margin-left:40px;z-index:2;
  border:4px solid var(--bs-ink);
  border-radius:var(--radius-sm);
  box-shadow:0 20px 40px -15px rgba(0,0,0,.7);
}

.about-content-4 .section-heading{position:relative;z-index:1}
.about-content-4 p{color:var(--bs-text-dim) !important}

/* stat pills, redesigned as a horizontal row of chips instead of boxed cards */
.about-counter-wrap{display:flex;gap:16px;flex-wrap:wrap;margin:28px 0}
.about-counter{
  display:flex;align-items:center;gap:14px;
  background:var(--bs-surface-2);
  border:1px solid var(--bs-border-2);
  border-radius:999px;
  padding:12px 22px 12px 14px !important;
}
.about-counter .icon{
  width:38px;height:38px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.about-counter .icon img{width:20px;height:20px;filter:brightness(0)}
.about-counter .title,.about-counter .h3-like{
  color:var(--bs-text) !important;font-family:var(--ff-display);font-weight:700;font-size:22px !important;
  display:inline;
}
.about-counter .title .odometer,.about-counter .h3-like .odometer{color:var(--accent) !important}
.about-counter p{color:var(--bs-text-dim) !important;margin:0;font-size:13px}

/* ---------- services (bento cards) ------------------------------------ */
.service-area-service-page{background:var(--bs-ink);padding-top:110px;padding-bottom:150px}

/* Extra breathing room between the homepage Services block and the
   "Recent Works Gallery" (project-section) that follows it — using an
   adjacent-sibling selector with !important so it can't be swallowed by
   whatever padding/margin the two sections already carry individually. */
.service-area-service-page + .project-section{
  margin-top:80px !important;
}
.services-wrapper-3{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  counter-reset:svc;
  overflow:visible !important;  /* base template set overflow:hidden here;
                                    with real content heights that could clip
                                    the bottom of the grid — nothing inside
                                    needs the wrapper itself to clip. */
}
.service-box{
  counter-increment:svc;
  position:relative;
  background:var(--bs-surface) !important;
  border:1px solid var(--bs-border) !important;
  border-radius:var(--radius-md) !important;
  padding:28px !important;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
/* The base template's `.services-wrapper-3 .service-box` selector (two
   classes) is more specific than the single-class `.service-box` above, so
   its `display:grid; grid-template-columns:110px 1fr` (changing to 70px 1fr,
   then 1fr, at smaller breakpoints) was still winning underneath this card
   redesign. That squeezed the thumbnail into a fixed-width side column
   instead of stacking it above the text, and — because the internal layout
   silently changed at each breakpoint — produced inconsistent card heights
   that made the second row of cards overflow past the section below it.
   Matching the selector exactly and using !important removes that layout
   at every breakpoint so cards stack thumb-then-content as intended. */
.services-wrapper-3 .service-box{
  display:block !important;
  grid-template-columns:none !important;
  align-items:initial !important;
  gap:0 !important;
  padding-top:0 !important;
  border-top:none !important;
}
.services-wrapper-3 .service-box:before{
  /* base template's row-divider pseudo-element is replaced by the counter
     badge below, rather than removed outright */
  content:"0" counter(svc) !important;
  position:absolute !important;
  top:18px !important; right:22px !important; left:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  background:none !important;
  font-family:var(--ff-display);font-size:13px;color:var(--bs-text-mute);letter-spacing:.05em;
}
.service-box:hover{
  transform:translateY(-6px);
  border-color:var(--accent) !important;
  background:var(--bs-surface-2) !important;
}
.service-box .thumb{border-radius:var(--radius-sm);overflow:hidden;margin-bottom:18px}
.service-box .thumb img{transition:transform .5s ease;filter:grayscale(30%)}
.service-box:hover .thumb img{transform:scale(1.06);filter:grayscale(0%)}
.service-box .content .title{font-size:19px !important;margin-bottom:8px}
.service-box .content .title a{color:var(--bs-text) !important}
.service-box .content .text{color:var(--bs-text-dim) !important;font-size:14.5px}
.services-empty{color:var(--bs-text-dim)}

/* ---------- projects / portfolio -------------------------------------- */
.project-section{background:var(--bs-ink)}
.project-box{background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:var(--radius-lg);overflow:hidden}
.project-thumb{position:relative;overflow:hidden;aspect-ratio:16/10}
.project-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;filter:grayscale(25%)}
.project-box:hover .project-thumb img{transform:scale(1.08);filter:grayscale(0%)}
.project-thumb .shape{
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(8,9,11,.9) 0%, transparent 55%);
  z-index:1;
}
.project-btn{
  position:absolute;right:18px;top:18px;z-index:2;
  width:48px;height:48px;border-radius:50%;
  background:var(--accent) !important;color:var(--accent-ink) !important;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease;
}
.project-btn:hover{transform:rotate(-40deg)}
.project-content{padding:22px}
.project-content span{
  display:inline-block;color:var(--accent);text-transform:uppercase;font-size:11.5px;letter-spacing:.1em;font-weight:600;margin-bottom:8px;
}
.project-content .title a{color:var(--bs-text) !important;font-size:20px}
.swiper-nav{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--bs-border-2) !important;
  color:var(--bs-text) !important;display:flex;align-items:center;justify-content:center;
}
.swiper-nav:hover{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--accent-ink) !important}
.swiper-pagination-fraction{color:var(--bs-text-mute) !important}

/* ---------- FAQ --------------------------------------------------- */
.faq-area-faq-page{background:var(--bs-ink);padding-block:100px}
.accordion-item{
  background:var(--bs-surface) !important;
  border:1px solid var(--bs-border) !important;
  border-radius:var(--radius-md) !important;
  overflow:hidden;margin-bottom:14px;
}
.accordion-button{
  background:transparent !important;
  color:var(--bs-text) !important;
  font-family:var(--ff-display);font-weight:500;font-size:16.5px;
  padding:20px 24px !important;box-shadow:none !important;
}
.accordion-button:not(.collapsed){color:var(--accent) !important}
.accordion-button::after{filter:invert(1) !important}
.accordion-body{color:var(--bs-text-dim) !important;padding:0 24px 22px !important}

/* ---------- blog -------------------------------------------------- */
.blog-section-3{background:var(--bs-ink)}
.post-card-2{
  background:var(--bs-surface);border:1px solid var(--bs-border);
  border-radius:var(--radius-md);overflow:hidden;height:100%;
  transition:transform .3s ease,border-color .3s ease;
}
.post-card-2:hover{transform:translateY(-6px);border-color:var(--accent)}
.post-thumb{overflow:hidden;aspect-ratio:4/3}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:grayscale(25%)}
.post-card-2:hover .post-thumb img{transform:scale(1.07);filter:grayscale(0%)}
.post-content-wrap{padding:22px}
.post-meta{padding:0;margin:0 0 10px;list-style:none}
.post-meta li{
  display:inline-block;color:var(--bs-text-mute);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
}
.post-card-2 .title a{color:var(--bs-text) !important;font-size:19px;line-height:1.3}

/* ---------- clients / sponsors -------------------------------------- */
.sponsor-section{background:var(--bs-ink)}
.sponsor-text .title{color:var(--bs-text-mute) !important;font-size:13px;letter-spacing:.16em;font-weight:600}
.sponsor-item img{filter:grayscale(100%) brightness(2) opacity(.55);transition:filter .3s ease}
.sponsor-item:hover img{filter:grayscale(0%) brightness(1) opacity(1)}

/* ---------- CTA band + footer --------------------------------------- */
.cta-section-5{background:var(--bs-surface) !important;position:relative;overflow:hidden}
.cta-section-5 .bg-item .overlay,
.cta-section-5 .bg-item .overlay-2,
.cta-section-5 .bg-item .overlay-3{
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(198,255,61,.22), transparent 60%),
    var(--bs-surface) !important;
  opacity:1 !important;
}
.cta-section-5 .bg-item .bg-img{opacity:.12}
.cta-section-5 .sub-heading{color:var(--accent) !important}
.cta-section-5 .section-title{color:var(--bs-text) !important;font-size:clamp(26px,4vw,44px) !important}
.cta-section-5 .rr-primary-btn{background:var(--accent) !important;color:var(--accent-ink) !important;border-color:var(--accent) !important}
.cta-section-5 .rr-primary-btn:hover{background:var(--bs-text) !important;color:var(--bs-ink) !important;border-color:var(--bs-text) !important}

.footer-section{background:var(--bs-ink) !important;border-top:1px solid var(--bs-border)}
.footer-section .shape{opacity:.05}
.widget-title{color:var(--bs-text) !important;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.footer-list li,.address-list li{color:var(--bs-text-dim);margin-bottom:10px}
.footer-list a,.address-list a{color:var(--bs-text-dim) !important;transition:color .2s ease}
.footer-list a:hover,.address-list a:hover{color:var(--accent) !important}
.footer-widget.logo-widget .brand-text{font-family:var(--ff-display);font-weight:700;font-size:22px;color:var(--bs-text)}
.footer-widget.logo-widget img{filter:brightness(0) invert(1)}
.footer-widget p{color:var(--bs-text-dim)}
.social-list a{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--bs-border-2) !important;
  color:var(--bs-text) !important;display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.social-list a:hover{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--accent-ink) !important}
.it-copyright-area{border-top:1px solid var(--bs-border) !important;background:var(--bs-ink) !important}
.it-copyright-area p,.it-copyright-area a{color:var(--bs-text-mute) !important}
.copyright-list a:hover{color:var(--accent) !important}

/* ---------- about-us page: story image column ------------------------- */
/* The base template's .section-content-wrapper here is `display:grid;
   grid-template-columns:1fr 715px`, built for a two-column info-list layout.
   We no longer use .info-list at all, so force this back to a plain
   single-column stack — otherwise the plain-text line, the images and the
   rich text auto-place into that old two-column grid and wrap awkwardly. */
.about-area-details .section-content-wrapper{
  display:block !important;
  max-width:100% !important;
  margin-left:0 !important;
}
.about-highlights{
  color:var(--bs-text-dim);
  font-size:15px;
  margin:0 0 24px;
}
/* Sits directly under .info-list now — small, static, left-aligned within
   the text column. Previously a full-width "moving-gallery" marquee. */
.about-story-media{
  position:relative;
  max-width:364px;   /* +40% from the original 260px */
  margin:8px 0 32px;
}
.about-story-media__item{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--bs-border);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
}
.about-story-media__item img{
  width:100%;height:auto;display:block;
  filter:grayscale(20%) contrast(1.05);
}
.about-story-media__item.is-offset{
  width:68%;
  margin:-15% 0 0 auto;
  position:relative;
  z-index:1;
  border:3px solid var(--bs-ink);
}
@media (max-width:575px){
  .about-story-media{max-width:280px}   /* +40% from the original 200px */
}

/* ---------- about-us page: team cards ---------------------------------- */
/* The base template rendered <img style="width:100%"> with no fixed aspect
   ratio or object-fit, so a card's height depended entirely on whatever
   aspect ratio the uploaded photo happened to have — mixed portrait/square
   photos produced uneven card heights across the grid. Locking the thumb to
   a fixed ratio with object-fit:cover makes every card the same size
   regardless of the source image's dimensions. */
.team-area-about-page .team-box{
  background:var(--bs-surface);
  border:1px solid var(--bs-border);
  border-radius:var(--radius-md);
  padding:14px 14px 22px;
  transition:transform .3s ease, border-color .3s ease;
}
.team-area-about-page .team-box:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
}
.team-area-about-page .team-box .thumb{
  border-radius:var(--radius-sm);
  aspect-ratio:4/5;             /* fixed — matches the 400x480 size hint */
}
.team-area-about-page .team-box .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;             /* crops to fill instead of stretching/shrinking */
  filter:grayscale(30%) contrast(1.05);
}
.team-area-about-page .team-box:hover .thumb img{filter:grayscale(0%)}
.team-area-about-page .team-box .content{padding:0 4px}
.team-area-about-page .team-box .name{
  color:var(--bs-text) !important;
  font-family:var(--ff-display);
  font-size:20px !important;
  font-weight:600;
  letter-spacing:-0.01em;
}
.team-area-about-page .team-box .post{
  color:var(--bs-text-dim) !important;
  font-size:13.5px;
  line-height:1.4;
}

/* ---------- generic inner-page hero / breadcrumb --------------------- */
.breadcrumb-area,.page-header,.breadcrumb-wrap{
  background:var(--bs-surface) !important;border-bottom:1px solid var(--bs-border);
}
.breadcrumb-area *,.page-header *{color:var(--bs-text)}
.breadcrumb a{color:var(--bs-text-dim) !important}
.breadcrumb .active,.breadcrumb-item.active{color:var(--accent) !important}

/* inner-page title band (About / Services / Contact / Portfolio / Blog…) */
.page-title-area{
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, rgba(124,92,255,.22), transparent 60%),
    var(--bs-ink) !important;
  border-bottom:1px solid var(--bs-border);
  padding-block:64px !important;
}
.page-title-wrapper{margin:0 !important}
/* H1 halved again from the 248px custom.css already set (which itself was
   half of the original 495px) — clamp replaces the old 7-breakpoint stack. */
.page-title-wrapper .page-title{
  font-size:clamp(22px,6.5vw,124px) !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  color:var(--bs-text) !important;
}

/* breadcrumb now renders after the H1 in the markup — style it as a quiet
   trail underneath the title instead of a label above it. */
.breadcrumb-nav{
  margin:18px 0 0 !important;
  padding-top:14px;
  border-top:1px solid var(--bs-border);
  display:flex !important;
  justify-content:center !important;
  text-align:center !important;
}
.breadcrumb-list{
  justify-content:center !important;
  font-size:13px !important;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--bs-text-mute) !important;
  opacity:1 !important;
}
.breadcrumb-item a{
  color:var(--bs-text-dim) !important;
  border-bottom-color:transparent !important;
}
.breadcrumb-item a:hover{color:var(--accent) !important;border-bottom-color:var(--accent) !important}
.breadcrumb-item+.breadcrumb-item::before{
  content:"/" !important;color:var(--bs-text-mute) !important;opacity:1 !important;margin-right:8px;
}
.breadcrumb-item [aria-current="page"]{color:var(--accent) !important;opacity:1 !important}

/* single blog post hero: category tag + publish date under the breadcrumb.
   Previously lived inside .blog-details-area and was styled by a selector
   scoped to that section; now it's in .page-title-area, so it needs its
   own rule rather than silently losing all layout/typography. */
.page-title-area .meta{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;
}
.page-title-area .meta .tag{
  display:inline-flex;align-items:center;
  padding:5px 16px;border-radius:999px;
  border:1px solid var(--bs-border-2);
  color:var(--accent) !important;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  transition:border-color .2s ease;
}
.page-title-area .meta .tag:hover{border-color:var(--accent)}
.page-title-area .meta .date{color:var(--bs-text-mute) !important;font-size:13.5px}
.page-title-area .meta .date.has-left-line{position:relative;padding-inline-start:16px}
.page-title-area .meta .date.has-left-line::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:1px;background:var(--bs-text-mute);
}

/* forms found across contact / newsletter / agent pages */
.form-control,textarea,select{
  background:var(--bs-surface) !important;
  border:1px solid var(--bs-border-2) !important;
  color:var(--bs-text) !important;
  border-radius:var(--radius-sm) !important;
}
.form-control::placeholder{color:var(--bs-text-mute) !important}
.form-control:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(198,255,61,.15) !important}

/* cards used on services/portfolio/blog inner pages, team, testimonials */
.card,.single-service,.single-portfolio,.team-item,.testimonial-item,.blog-single-card{
  background:var(--bs-surface) !important;
  border:1px solid var(--bs-border) !important;
  border-radius:var(--radius-md) !important;
  color:var(--bs-text-dim) !important;
}

@media (max-width:991px){
  .services-wrapper-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}