/*  Cleaned CSS — obsolete hero V1/V5/V6/V7/V8 and old ranking-table rules removed; current V9 + V12 system preserved.  */
:root {
  --paper: #f1ece4;
  --paper-2: #e8e0d5;
  --surface: #fbf8f3;
  --surface-2: #f6f0e8;
  --text: #15201f;
  --muted: #000;
  --line: rgba(21, 32, 31, .13);
  --night: #0d1718;
  --night-2: #142223;
  --night-3: #1b2d2d;
  --cream: #fff9ef;
  --radius: 24px;
  --shadow: 0 28px 75px rgba(13, 23, 24, .13);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

a {
  text-decoration: none;
  color: inherit
}

img {
  max-width: 100%;
  display: block
}

.container {
  max-width: 1240px
}

h1,
h2,
h3,
h4 {
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.035em
}

::selection {
  background: var(--brand);
  color: #fff
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px 0;
  background: rgba(241, 236, 228, .84);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(13, 23, 24, .06)
}

.header-inner {
  position: relative;
  min-height: 72px;
  padding: 9px 10px 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 18px;
  background: rgba(255, 249, 239, .94);
  box-shadow: 0 12px 35px rgba(13, 23, 24, .08)
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px
}

.brand.brand-logo-only {
  min-width: auto
}

.brand img {
  max-height: 52px;
  max-width: 230px;
  width: auto;
  object-fit: contain
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--night);
  color: #fff;
  font-family: "Space Grotesk";
  font-size: 15px;
  font-weight: 700;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .08)
}

.brand b,
.brand small {
  display: block
}

.brand b {
  font-size: 17px
}

.brand small {
  margin-top: 2px;
  color: #7b8582;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.25px;
  font-weight: 800
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px !important;
  margin-left: 8px;
  padding: 13px 18px !important;
  color: #fff !important;
  background: var(--night);
  border-radius: 999px !important;
  box-shadow: 0 11px 24px rgba(13, 23, 24, .18)
}

.nav-cta:hover {
  background: var(--brand);
  transform: translateY(-1px)
}

.nav-toggle {
  display: none;
  width: 45px;
  height: 45px;
  border: 0;
  border-radius: 50%;
  background: var(--night);
  color: #fff;
  font-size: 18px
}

/* Reusable */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px
}

.section {
  padding: 112px 0
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 56px
}

.section-heading h2,
.center-heading h2,
.faq-grid h2 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(38px, 4.35vw, 60px)
}

.section-heading>p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
  font-size: 14px
}

.center-heading {
  max-width: 850px;
  margin: 0 auto 62px;
  text-align: center
}

.btn-main,
.btn-light-custom,
.btn-outline-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  transition: .25s
}

.btn-main {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 28%, transparent)
}

.btn-main:hover {
  transform: translateY(-3px);
  color: #fff;
  background: color-mix(in srgb, var(--brand) 82%, #000)
}

.btn-outline-custom {
  border: 1px solid rgba(13, 23, 24, .22);
  background: transparent;
  color: var(--text)
}

.btn-outline-custom:hover {
  background: var(--night);
  border-color: var(--night);
  color: #fff
}

.btn-light-custom {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  background: var(--cream);
  color: var(--night)
}

.btn-light-custom:hover {
  transform: translateY(-3px);
  color: var(--brand)
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800
}

.text-link i {
  transition: .2s
}

.text-link:hover {
  color: var(--brand)
}

.text-link:hover i {
  transform: translateX(4px)
}

.center-btn {
  margin-top: 45px;
  text-align: center
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: .75s cubic-bezier(.2, .7, .2, 1)
}

.reveal.visible {
  opacity: 1;
   
}

/* Hero */

/* About */
.about-section {
  position: relative;
  background: var(--paper)
}

.about-section:before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  left: -250px;
  top: 80px;
  border: 1px solid rgba(13, 23, 24, .07);
  border-radius: 50%
}

.about-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 95px;
  align-items: center
}

.about-visual {
  position: relative;
  min-height: 600px
}

.about-image-frame {
  position: absolute;
  inset: 0 44px 0 0;
  padding: 14px;
  border: 1px solid rgba(13, 23, 24, .13);
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--shadow)
}

.about-image-frame:before {
  content: "";
  position: absolute;
  left: -18px;
  bottom: 45px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .9
}

.about-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 21px;
  filter: saturate(.92)
}

.about-image-frame>span {
  position: absolute;
  right: -40px;
  bottom: 52px;
  padding: 13px 17px;
  border-radius: 999px;
  background: var(--night);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  transform: rotate(-90deg);
  transform-origin: right bottom
}

.about-identity-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
  height: 100%;
  padding: 48px 42px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 32px;
  background: linear-gradient(150deg, var(--night), var(--night-3));
  color: #fff;
  box-shadow: var(--shadow);
  overflow: hidden
}

.about-identity-card:before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -185px;
  top: -150px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .015)
}

.identity-label {
  position: absolute;
  left: 42px;
  top: 38px;
  color: #7e8d89;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 800
}

.about-identity-card>strong {
  position: absolute;
  left: 42px;
  top: 95px;
  color: rgba(255, 255, 255, .10);
  font-family: "Space Grotesk";
  font-size: 160px;
  line-height: 1
}

.about-identity-card h2 {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: 34px
}

.about-identity-card>p {
  position: relative;
  margin: 10px 0 27px;
  color: #9aa8a5;
  font-size: 13px
}

.about-identity-card>div {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.about-identity-card>div span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: #cbd5d2;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .8px
}

.about-skill-card {
  position: absolute;
  right: 0;
  bottom: 42px;
  width: 245px;
  padding: 27px;
  border-radius: 23px;
  background: var(--cream);
  box-shadow: 0 24px 55px rgba(13, 23, 24, .18)
}

.about-skill-card small {
  display: block;
  margin-bottom: 13px;
  color: #8a918e;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.1px
}

.about-skill-card b {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid rgba(13, 23, 24, .10);
  font-size: 12px
}

.about-skill-card b:last-child {
  border: 0
}

.about-copy h1 {
  margin: 0 0 27px;
  font-size: clamp(40px, 4.55vw, 45px)
}

.about-copy .rich-text {
  max-width: 690px
}

.about-copy .rich-text p,
.about-copy .rich-text li {
  color: #000;
  font-size: 14px
}

.about-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 34px
}

/* Statistics */
.stats-section {
  padding: 50px 0 50px;
  background: var(--paper)
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 26px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(13, 23, 24, .07)
}

.stats-grid>div {
  position: relative;
  padding: 36px 32px;
  border-right: 1px solid rgba(13, 23, 24, .10)
}

.stats-grid>div:last-child {
  border: 0
}

.stats-grid strong,
.stats-grid span {
  display: inline;
  color: var(--night);
  font-family: "Space Grotesk";
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.05em
}
 

.stats-grid p {
  margin: 7px 0 0;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px
}

/* Services */
.home-services {
  position: relative;
  background: var(--night);
  color: #fff;
  overflow: hidden
}

.home-services:before {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  right: -270px;
  top: -220px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 95px rgba(255, 255, 255, .018), 0 0 0 190px rgba(255, 255, 255, .01)
}

.home-services .section-heading h2 {
  color: #fff
}

.home-services .section-heading>p {
  color: #95a39f
}

.home-services .eyebrow {
  color: var(--accent)
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.service-card {
  position: relative;
  min-height: 340px;
  padding: 34px;
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 25px;
  background: var(--surface);
  overflow: hidden;
  transition: .32s
}

.service-card:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: .35s
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow)
}

.service-card:hover:before {
  transform: scaleX(1)
}

.home-services .service-card {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  box-shadow: none
}

.home-services .service-card:hover {
  background: rgba(255, 255, 255, .075);
  box-shadow: 0 26px 65px rgba(0, 0, 0, .18)
}

.service-no {
  position: absolute;
  right: 29px;
  top: 27px;
  color: #9da6a3;
  font-size: 10px;
  font-weight: 800
}

.home-services .service-no {
  color: #65736f
}

.service-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 32px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--night);
  color: #fff;
  font-size: 19px
}

.home-services .service-icon {
  background: var(--accent);
  color: var(--night)
}

.service-card h3,
.service-card h2 {
  margin: 0 0 14px;
  font-size: 24px
}

.home-services .service-card h3 {
  color: #fff
}

.service-card p {
  margin: 0 0 25px;
  color: var(--muted);
  font-size: 12px
}

.home-services .service-card p {
  color: #8e9d99
}

.service-card>a {
  position: absolute;
  left: 34px;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px
}

.home-services .service-card>a {
  color: #fff
}

.service-card>a i {
  transition: .2s
}

.service-card>a:hover i {
  transform: translateX(4px)
}

.home-services .btn-outline-custom {
  border-color: rgba(255, 255, 255, .18);
  color: #fff
}

.home-services .btn-outline-custom:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--night)
}

/* Process */
.process-section {
  background: var(--paper-2)
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.process-card {
  position: relative;
  min-height: 300px;
  padding: 31px;
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 24px;
  background: rgba(255, 249, 239, .68);
  transition: .3s
}

.process-card:hover {
  transform: translateY(-7px);
  background: var(--surface);
  box-shadow: 0 25px 60px rgba(13, 23, 24, .10)
}

.process-card>span {
  position: absolute;
  right: 25px;
  top: 24px;
  color: #929b98;
  font-size: 10px;
  font-weight: 800
}

.process-card .service-icon {
  margin-bottom: 29px;
  background: transparent;
  border: 1px solid rgba(13, 23, 24, .15);
  color: var(--brand)
}

.process-card h3 {
  margin: 0 0 13px;
  font-size: 20px
}

.process-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px
}

/* Testimonials */
.soft-section {
  position: relative;
  background: linear-gradient(138deg, #112020, #0a1415);
  color: #fff;
  overflow: hidden
}

.soft-section:after {
  content: "CLIENT TRUST";
  position: absolute;
  left: -10px;
  bottom: -55px;
  color: rgba(255, 255, 255, .025);
  font-family: "Space Grotesk";
  font-size: 160px;
  font-weight: 700;
  letter-spacing: -.06em;
  white-space: nowrap
}

.soft-section .section-heading h2 {
  color: #fff
}

.soft-section .section-heading>p {
  color: #8e9c99
}

.soft-section .eyebrow {
  color: var(--accent)
}

.testimonial-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.testimonial-card {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  background: rgba(255, 255, 255, .045);
  transition: .3s
}

.testimonial-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .075)
}

.stars {
  color: var(--accent);
  font-size: 11px
}

.testimonial-card>p {
  min-height: 132px;
  margin: 23px 0;
  color: #c4cecb;
  font-size: 13px
}

.client {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 19px;
  border-top: 1px solid rgba(255, 255, 255, .09)
}

.client>span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800
}

.client b,
.client small {
  display: block
}

.client b {
  color: #fd7e14;
  font-size: 12px
}

.client small {
  margin-top: 2px;
  color: #fff;
  font-size: 9px
}

/* Blog */
.blog-section {
  background: var(--paper)
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.blog-card {
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 25px;
  background: var(--surface);
  overflow: hidden;
  transition: .3s
}

.blog-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow)
}

.blog-image {
  display: block;
  aspect-ratio: 16/10;
  background: #d8d2ca;
  overflow: hidden
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .55s
}

.blog-card:hover img {
  transform: scale(1.055)
}

.blog-body {
  padding: 27px
}

.blog-body>span {
  color: var(--brand);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px
}

.blog-body h3,
.blog-body h2 {
  margin: 13px 0;
  font-size: 20px
}

.blog-body p {
  color: var(--muted);
  font-size: 11px
}

.blog-body>a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px
}

/* FAQ */
.faq-section {
  background: var(--surface-2)
}

.faq-grid {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 90px;
  align-items: start
}

.faq-intro {
  position: sticky;
  top: 125px
}

.faq-intro p {
  max-width: 430px;
  color: var(--muted);
  font-size: 13px
}

.faq-intro .btn-outline-custom {
  margin-top: 20px
}

.accordion {
  border-top: 1px solid rgba(13, 23, 24, .13)
}

.accordion-item {
  border: 0;
  border-bottom: 1px solid rgba(13, 23, 24, .13);
  background: transparent
}

.accordion-button {
  padding: 25px 0;
  background: none !important;
  box-shadow: none !important;
  color: var(--text);
  font-family: "Space Grotesk";
  font-size: 15px;
  font-weight: 700
}

.accordion-button:not(.collapsed) {
  color: var(--brand)
}

.accordion-body {
  padding: 0 0 25px;
  color: var(--muted);
  font-size: 12px
}

/* CTA */
.cta-section {
  padding: 60px 0 60px;
  background: var(--surface-2)
}

.cta-card {
  position: relative;
  overflow: hidden;
  padding: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  border-radius: 32px;
  background: linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 34%, var(--night)));
  box-shadow: 0 35px 90px color-mix(in srgb, var(--brand) 22%, transparent)
}

.cta-card:before,
.cta-card:after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%
}

.cta-card:before {
  width: 360px;
  height: 360px;
  right: -80px;
  top: -220px
}

.cta-card:after {
  width: 190px;
  height: 190px;
  right: 130px;
  bottom: -135px
}

.cta-card .eyebrow {
  color: #fff
}

.cta-card h2 {
  max-width: 760px;
  margin: 0 0 13px;
  color: #fff;
  font-size: clamp(36px, 4vw, 54px)
}

.cta-card p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 13px
}

/* Inner page heroes */
.page-hero,
.detail-hero,
.article-hero {
  position: relative;
  overflow: hidden;
  padding: 118px 0;
  background: linear-gradient(125deg, #0b1516, #172727);
  color: #fff
}

.page-hero:before,
.detail-hero:before,
.article-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  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: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent)
}

.page-hero:after,
.detail-hero:after,
.article-hero:after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -130px;
  top: -240px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(255, 255, 255, .02)
}

.page-hero .container,
.detail-hero .container,
.article-hero .container {
  position: relative;
  z-index: 1
}

.page-hero .eyebrow,
.detail-hero .eyebrow,
.article-hero .eyebrow {
  color: var(--accent)
}

.page-hero h1,
.detail-hero h1,
.article-head h1 {
  max-width: 950px;
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(44px, 5.2vw, 72px)
}

.page-hero p,
.detail-hero p {
  max-width: 730px;
  color: #9eadaa;
  font-size: 16px
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 75px;
  align-items: center
}

.detail-grid img {
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 28px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, .25)
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 34px;
  align-items: start
}

.content-card,
.article-card {
  padding: 52px;
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 25px;
  background: var(--surface);
  box-shadow: 0 20px 55px rgba(13, 23, 24, .07)
}

.contact-aside {
  position: sticky;
  top: 112px;
  padding: 31px;
  border-radius: 24px;
  background: var(--night);
  color: #aeb8b5
}

.contact-aside h3 {
  color: #fff
}

.full-btn {
  width: 100%
}

.phone-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px
}

.phone-box i {
  color: var(--accent)
}

.phone-box span,
.phone-box b {
  display: block
}

.phone-box b {
  color: #fff
}

.rich-text h2 {
  margin: 20px 0 16px;
  font-size: 31px
}

.rich-text h3 {
  margin: 30px 0 14px;
  font-size: 23px
}

.rich-text p,
.rich-text li {
  color: #596561
}

.rich-text img {
  max-width: 100%;
  margin: 20px 0;
  border-radius: 18px
}

.article-head {
  text-align: center
}

.article-head h1 {
  margin-left: auto;
  margin-right: auto
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  color: #8c9a97;
  font-size: 11px
}

.article-wrap {
  max-width: 940px
}

.article-cover {
  width: 100%;
  margin-bottom: 35px;
  border-radius: 20px
}

.contact-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 70px
}

.contact-info h2 {
  font-size: 42px
}

.contact-info>p {
  color: var(--muted)
}

.contact-info>a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0
}

.contact-info>a i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--night);
  color: #fff
}

.contact-info span,
.contact-info b {
  display: block
}

.availability {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(13, 23, 24, .10);
  border-radius: 15px;
  background: var(--surface)
}

.availability i {
  color: #16a34a
}

.contact-form {
  padding: 40px;
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 25px;
  background: var(--surface)
}

.contact-form label {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px
}

.form-control,
.form-select {
  min-height: 52px;
  border-color: #d7d0c8;
  border-radius: 12px;
  background: #fffdf9
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent)
}

.thank-section {
  min-height: 70vh;
  display: grid;
  place-items: center
}

.thank-card {
  max-width: 700px;
  margin: auto;
  padding: 70px 50px;
  text-align: center;
  border: 1px solid rgba(13, 23, 24, .12);
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--shadow)
}

.thank-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 34px
}

.error-code {
  color: var(--brand);
  font-size: 100px;
  font-weight: 800;
  line-height: 1
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 45px
}

.pagination-wrap a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(13, 23, 24, .13);
  border-radius: 50%;
  background: var(--surface)
}

.pagination-wrap a.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

/* Footer */
.site-footer {
  padding-top: 82px;
  background: #081112;
  color: #86938f
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .8fr 1fr 1fr;
  gap: 55px;
  padding-bottom: 58px
}

.footer-logo {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--cream)
}

.footer-logo img {
  max-width: 220px;
  max-height: 64px;
  object-fit: contain
}

.footer-brand {
  margin-bottom: 18px;
  color: #fff;
  font-family: "Space Grotesk";
  font-size: 25px;
  font-weight: 700
}

.site-footer p {
  font-size: 12px
}

.site-footer h4 {
  margin-bottom: 22px;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px
}

.site-footer a {
  display: block;
  margin: 9px 0;
  color: #86938f;
  font-size: 11px
}

.site-footer a:hover {
  color: #fff
}

.social-links {
  display: flex;
  gap: 8px
}

.social-links a {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid #20302f;
  border-radius: 50%
}

.social-links a:hover {
  background: var(--brand);
  border-color: var(--brand)
}

.copyright {
  padding: 22px 0;
  border-top: 1px solid #1b2928;
  font-size: 10px
}

.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.floating-actions a {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 3px solid var(--cream);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
  transition: .2s
}

.floating-actions a:hover {
  transform: translateY(-3px)
}

.float-call {
  background: var(--brand)
}

.float-wa {
  background: #16a34a
}

@media(max-width:1100px) {
  .main-nav {
    gap: 0
  }

  .main-nav>a {
    padding: 11px 9px
  }

  .about-grid {
    gap: 60px
  }
}

@media(max-width:991px) {
  .site-header {
    padding: 9px 0
  }

  .header-inner {
    min-height: 64px;
    padding: 7px 9px 7px 15px;
    border-radius: 16px
  }

  .nav-toggle {
    display: grid;
    place-items: center
  }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border: 1px solid rgba(13, 23, 24, .12);
    border-radius: 18px;
    background: var(--cream);
    box-shadow: var(--shadow)
  }

  .main-nav.open {
    display: flex
  }

  .main-nav>a {
    padding: 12px
  }

  .nav-cta {
    justify-content: center;
    margin: 6px 0 0
  }

  .about-grid,
  .faq-grid,
  .contact-grid,
  .detail-grid,
  .content-layout {
    grid-template-columns: 1fr
  }

  .about-grid {
    gap: 55px
  }

  .about-visual {
    max-width: 650px;
    width: 100%;
    margin: auto
  }

  .faq-intro {
    position: static
  }

  .service-grid,
  .testimonial-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .process-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .contact-aside {
    position: static
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .faq-grid {
    gap: 45px
  }
}

@media(max-width:650px) {
  .container {
    padding-left: 18px;
    padding-right: 18px
  }

  .section {
    padding: 80px 0
  }

  .brand img {
    max-width: 180px;
    max-height: 46px
  }

  .about-visual {
    min-height: 500px
  }

  .about-identity-card {
    width: 88%;
    padding: 34px 28px
  }

  .about-identity-card>strong {
    left: 28px;
    top: 105px;
    font-size: 125px
  }

  .identity-label {
    left: 28px
  }

  .about-skill-card {
    width: 205px;
    padding: 22px
  }

  .about-image-frame {
    inset: 0 12px 0 0
  }

  .about-image-frame>span {
    display: none
  }

  .about-copy h1 {
    font-size: 38px
  }

  .about-actions {
    align-items: flex-start;
    flex-direction: column
  }

  .service-grid,
  .testimonial-grid,
  .blog-grid,
  .process-grid,
  .stats-grid,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .service-card {
    min-height: 315px
  }

  .stats-grid>div {
    border-right: 0;
    border-bottom: 1px solid rgba(13, 23, 24, .10)
  }

  .stats-grid>div:last-child {
    border-bottom: 0
  }

  .section-heading h2,
  .center-heading h2,
  .faq-grid h2 {
    font-size: 36px
  }

  .cta-card {
    padding: 43px 28px;
    align-items: flex-start;
    flex-direction: column
  }

  .cta-card h2 {
    font-size: 34px
  }

  .content-card,
  .article-card {
    padding: 26px
  }

  .page-hero,
  .detail-hero,
  .article-hero {
    padding: 80px 0
  }

  .page-hero h1,
  .detail-hero h1,
  .article-head h1 {
    font-size: 40px
  }

  .contact-form {
    padding: 26px
  }

  .footer-grid {
    gap: 30px
  }

  .floating-actions {
    right: 11px;
    bottom: 11px
  }

  .floating-actions a {
    width: 47px;
    height: 47px
  }

  .article-meta {
    flex-direction: column;
    gap: 7px
  }
}

/* =========================================================
   Professional Redesign V5 — Header, Hero and Inner Pages
   ========================================================= */
:root {
  --v5-navy: #071b2b;
  --v5-navy-2: #0b2638;
  --v5-blue: #0d6efd;
  --v5-cyan: #41d9c7;
  --v5-warm: #f6f3ed;
  --v5-card: #fffdf8;
  --v5-border: rgba(7, 27, 43, .12);
}

body {
  background: var(--v5-warm)
}

/* Top bar + navigation */
.top-bar {
  position: relative;
  z-index: 1002;
  background: var(--v5-navy);
  color: #b9cbd6;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.top-bar-inner {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18px
}

.topbar-message,
.topbar-links,
.topbar-links a,
.topbar-location {
  display: flex;
  align-items: center
}

.topbar-message {
  gap: 9px;
  color: #e8f1f5
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42d392;
  box-shadow: 0 0 0 5px rgba(66, 211, 146, .12);
  animation: v5pulse 1.8s infinite
}

.topbar-links {
  gap: 22px
}

.topbar-links a,
.topbar-location {
  gap: 7px;
  transition: .2s
}

.topbar-links a:hover {
  color: #fff
}

.topbar-links i {
  color: var(--v5-cyan)
}

@keyframes v5pulse {
  50% {
    box-shadow: 0 0 0 9px rgba(66, 211, 146, 0)
  }
}

.site-header {
  padding: 0;
  background: rgba(246, 243, 237, .92);
  border-bottom: 1px solid rgba(7, 27, 43, .08);
  backdrop-filter: blur(18px)
}

.site-header>.container {
  padding-top: 12px;
  padding-bottom: 12px
}

.header-inner {
  min-height: 76px;
  padding: 8px 9px 8px 11px;
  border: 1px solid rgba(7, 27, 43, .11);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(7, 27, 43, .08)
}

.brand {
  min-width: 235px;
  gap: 11px
}

.brand.brand-logo-only {
  min-width: 235px
}

.brand-image-wrap {
  height: 54px;
  min-width: 190px;
  max-width: 240px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(7, 27, 43, .09);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f7fafb)
}

.brand img {
  max-width: 100%;
  max-height: 40px
}

.brand-mark {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--v5-navy), #123d58);
  box-shadow: 0 12px 26px rgba(7, 27, 43, .2)
}

.brand-mark b {
  font-family: "Space Grotesk";
  font-size: 16px
}

.brand-mark i {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v5-cyan);
  box-shadow: 0 0 0 4px rgba(65, 217, 199, .14)
}

.brand-copy b {
  font-size: 17px;
  color: var(--v5-navy)
}

.brand-copy small {
  color: #71828c;
  font-size: 8px;
  letter-spacing: 1.45px
}

.header-experience {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 8px;
  padding-left: 18px;
  border-left: 1px solid rgba(7, 27, 43, .10)
}

.header-experience strong {
  font-family: "Space Grotesk";
  color: var(--brand);
  font-size: 25px;
  line-height: 1
}

.header-experience span {
  color: #788892;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .75px
}

/* Services listing */
.services-page-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 105px;
  background: linear-gradient(125deg, #061725, #0d3045);
  color: #fff
}

.services-page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  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: 66px 66px;
  mask-image: linear-gradient(90deg, #000, transparent)
}

.services-page-hero:after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -130px;
  top: -300px;
  border: 1px solid rgba(65, 217, 199, .17);
  border-radius: 50%;
  box-shadow: 0 0 0 100px rgba(65, 217, 199, .022)
}

.services-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: end
}

.services-page-hero h1 {
  max-width: 860px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(48px, 5.4vw, 74px)
}

.services-page-hero p {
  max-width: 720px;
  margin: 0;
  color: #9eb4bf;
  font-size: 15px
}

.services-hero-stat {
  width: 210px;
  height: 210px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 13px rgba(255, 255, 255, .02)
}

.services-hero-stat strong {
  color: var(--v5-cyan);
  font-family: "Space Grotesk";
  font-size: 64px;
  line-height: .9
}

.services-hero-stat span {
  margin-top: 10px;
  color: #9db2bd;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 1px
}

.services-hero-stat i {
  margin-top: 15px;
  color: #fff
}

.services-catalogue {
  background: #eef2f1
}

.catalogue-intro {
  margin-bottom: 35px;
  padding-bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 35px;
  border-bottom: 1px solid rgba(7, 27, 43, .12)
}

.catalogue-intro span {
  color: var(--v5-navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px
}

.catalogue-intro p {
  max-width: 520px;
  margin: 0;
  color: #687b84;
  font-size: 12px
}

.service-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.service-showcase-card {
  overflow: hidden;
  min-height: 395px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(7, 27, 43, .11);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(7, 27, 43, .06);
  transition: .3s
}

.service-showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 65px rgba(7, 27, 43, .12)
}

.service-showcase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px
}

.service-showcase-top span {
  color: #8da0a8;
  font-size: 10px;
  font-weight: 800
}

.service-showcase-top i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #e6fbf7;
  color: #0a927d;
  font-size: 17px
}

.service-showcase-image {
   
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: 18px
}

.service-showcase-image img {
  width: 100%;
  height: 100%;
  transition: .45s
}

.service-showcase-card:hover .service-showcase-image img {
  transform: scale(1.04)
}

.service-showcase-body {
  margin-top: auto
}

.service-showcase-body h2 {
  margin-bottom: 13px;
  font-size: 28px
}

.service-showcase-body p {
  color: #647781;
  font-size: 12px
}

.service-showcase-body>a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  color: var(--v5-navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .65px
}

.service-showcase-body>a:hover {
  color: var(--brand)
}

.service-bottom-cta {
  padding: 70px 0;
  background: var(--v5-navy)
}

.service-bottom-cta>.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px
}

.service-bottom-cta span {
  color: var(--v5-cyan);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px
}

.service-bottom-cta h2 {
  max-width: 750px;
  margin: 7px 0 0;
  color: #fff;
  font-size: 38px
}

/* Service detail */
.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 45px;
  color: #6b808b;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px
}

.detail-breadcrumb a:hover {
  color: var(--brand)
}

.detail-breadcrumb i {
  font-size: 7px
}

.detail-breadcrumb.light {
  color: #7d96a2
}

.detail-breadcrumb.light a:hover {
  color: #fff
}

.service-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 55px 0 100px;
  background: linear-gradient(135deg, #f3f6f5, #e8eeec)
}

.service-detail-hero:after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -300px;
  top: -250px;
  border: 1px solid rgba(7, 27, 43, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 100px rgba(7, 27, 43, .018)
}

.service-detail-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr .83fr;
  gap: 75px;
  align-items: center
}

.service-detail-icon {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 18px;
  background: var(--v5-navy);
  color: var(--v5-cyan);
  font-size: 23px;
  box-shadow: 0 18px 38px rgba(7, 27, 43, .16)
}

.service-detail-copy h1 {
  max-width: 760px;
  margin: 0 0 21px;
  font-size: clamp(45px, 5vw, 68px)
}

.service-detail-copy>p {
  max-width: 690px;
  color: #5f737d;
  font-size: 15px
}

.service-detail-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px
}

.detail-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--v5-navy);
  font-size: 11px;
  font-weight: 800
}

.detail-phone i {
  color: var(--brand)
}

.service-detail-visual {
  position: relative
}

.service-detail-visual>img,
.service-visual-placeholder {
  width: 100%;
  aspect-ratio: 1/1.02;
  border-radius: 30px;
  box-shadow: 0 35px 85px rgba(7, 27, 43, .18)
}

.service-detail-visual>img {
  object-fit: cover
}

.service-visual-placeholder {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(145deg, var(--v5-navy), #123d57);
  color: #fff
}

.service-visual-placeholder>i {
  margin-bottom: auto;
  color: var(--v5-cyan);
  font-size: 70px
}

.service-visual-placeholder span {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: "Space Grotesk";
  font-size: 22px
}

.service-result-badge {
  position: absolute;
  left: -35px;
  bottom: 27px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(7, 27, 43, .18)
}

.service-result-badge strong {
  color: var(--brand);
  font-family: "Space Grotesk";
  font-size: 30px
}

.service-result-badge span {
  color: #697c85;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .65px
}

.service-detail-content {
  background: #fff
}

.service-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 55px;
  align-items: start
}

.service-article {
  padding-right: 25px
}

.content-intro-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 35px
}

.content-intro-label span {
  color: var(--brand);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px
}

.content-intro-label i {
  height: 1px;
  flex: 1;
  background: rgba(7, 27, 43, .12)
}

.service-article>p:first-of-type {
  font-size: 18px;
  line-height: 1.8;
  color: #344b56
}

.service-sidebar {
  position: sticky;
  top: 115px
}

.consultation-card {
  padding: 31px;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--v5-navy), #10374f);
  color: #a9bec8;
  box-shadow: 0 26px 65px rgba(7, 27, 43, .18)
}

.consultation-card>span {
  color: var(--v5-cyan);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px
}

.consultation-card h3 {
  margin: 11px 0 14px;
  color: #fff;
  font-size: 27px
}

.consultation-card p {
  font-size: 11px
}

.sidebar-call {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px
}

.sidebar-call>i {
  color: var(--v5-cyan)
}

.sidebar-call small,
.sidebar-call b {
  display: block
}

.sidebar-call small {
  color: #78929f;
  font-size: 7px;
  text-transform: uppercase
}

.sidebar-call b {
  color: #fff;
  font-size: 11px
}

.other-services {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid rgba(7, 27, 43, .11);
  border-radius: 20px;
  background: #f7f9f8
}

.other-services h4 {
  margin-bottom: 15px;
  font-size: 13px
}

.other-services a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(7, 27, 43, .08);
  color: #4b606a;
  font-size: 10px;
  font-weight: 700
}

.other-services a:last-child {
  border: 0
}

.other-services a>i {
  color: var(--brand)
}

.other-services a>b {
  color: #90a0a7
}

.other-services a:hover {
  color: var(--brand)
}

/* About page */
.about-page-hero {
  position: relative;
  overflow: hidden;
  padding: 105px 0;
  background: linear-gradient(130deg, #061725, #0c3146);
  color: #fff
}
 
.about-page-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 80px;
  align-items: center
}

.about-page-copy h1 {
  max-width: 760px;
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(48px, 5.2vw, 72px)
}

.about-page-copy>p {
  max-width: 680px;
  color: #9fb5c0;
  font-size: 15px
}

.about-page-points {
  display: grid;
  gap: 11px;
  margin-top: 30px
}

.about-page-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8e6eb;
  font-size: 15px;
  font-weight: 700
}

.about-page-points i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(65, 217, 199, .13);
  color: var(--v5-cyan);
  font-size: 9px
}

.about-profile-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 28px;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .28)
}

.about-profile-panel>img,
.about-profile-placeholder {
  width: 100%;
 
  object-fit: cover
}

.about-profile-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--v5-cyan), #9af3e7);
  color: var(--v5-navy);
  font-family: "Space Grotesk";
  font-size: 100px;
  font-weight: 700
}

.profile-panel-copy {
  padding: 27px
}

.profile-panel-copy>small {
  color: var(--v5-cyan);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px
}

.profile-panel-copy h2 {
  margin: 7px 0 5px;
  color: #fff !important;
  font-size: 30px
}

.profile-panel-copy>p {
  color: #8fa6b1;
  font-size: 10px
}

.profile-panel-copy>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px
}

.profile-panel-copy>div span {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  color: #88a0ab;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .6px
}

.profile-panel-copy strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 19px
}

.about-page-body {
  background: #fff
}

.about-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 90px;
  align-items: start
}

.about-body-grid>aside {
  position: sticky;
  top: 120px
}

.about-body-grid>aside h2 {
  font-size: 37px
}

.about-body-grid>aside p {
  color: #697c85;
  font-size: 12px
}

.about-long-content {
  padding-left: 55px;
  border-left: 1px solid rgba(7, 27, 43, .11)
}

.about-long-content>p:first-child {
  font-size: 19px;
  line-height: 1.85;
  color: #344b56
}

.about-expertise {
  padding: 34px 0;
  background: #eaf0ee
}

.about-expertise>.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.about-expertise div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 19px;
  border-right: 1px solid rgba(7, 27, 43, .1)
}

.about-expertise div:last-child {
  border: 0
}

.about-expertise i {
  color: var(--brand)
}

.about-expertise span {
  font-size: 10px;
  font-weight: 800
}

/* Blog detail */
.blog-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 150px;
  background: linear-gradient(128deg, #061725, #0c3045);
  color: #fff
}

.blog-detail-hero:after {
  content: "INSIGHT";
  position: absolute;
  right: -25px;
  bottom: -55px;
  color: rgba(255, 255, 255, .025);
  font-family: "Space Grotesk";
  font-size: 190px;
  font-weight: 700;
  line-height: 1
}

.blog-detail-head {
  position: relative;
  z-index: 1;
  max-width: 1050px;
  text-align: center
}

.blog-detail-head .detail-breadcrumb {
  justify-content: center;
  margin-bottom: 35px
}

.article-category {
  display: inline-flex;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--v5-cyan);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px
}

.blog-detail-head h1 {
  max-width: 990px;
  margin: 24px auto 30px;
  color: #fff;
  font-size: clamp(46px, 5.3vw, 72px)
}

.article-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #8da5b0
}

.article-byline>span {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, .12)
}

.author-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--v5-cyan);
  color: var(--v5-navy);
  font-family: "Space Grotesk";
  font-size: 11px;
  font-weight: 700
}

.article-byline div:not(.author-avatar) {
  text-align: left
}

.article-byline small,
.article-byline b {
  display: block
}

.article-byline small {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .7px
}

.article-byline b {
  margin-top: 2px;
  color: #dce8ed;
  font-size: 9px
}

.article-cover-wrap {
  position: relative;
  z-index: 2;
  margin-top: -95px
}

.article-cover-wide {
  width: 100%;
   
  object-fit: cover;
  border: 10px solid var(--v5-warm);
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(7, 27, 43, .18)
}

.blog-article-section {
  padding-top: 85px;
  background: var(--v5-warm)
}

.blog-article-layout {
  display: grid;
  grid-template-columns: 70px minmax(0, 760px) 280px;
  justify-content: center;
  gap: 40px;
  align-items: start
}

.article-share {
  position: sticky;
  top: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px
}

.article-share>span {
  margin-bottom: 7px;
  color: #8a9ba3;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
  transform: rotate(180deg)
}

.article-share a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(7, 27, 43, .12);
  border-radius: 50%;
  background: #fff;
  color: var(--v5-navy);
  transition: .2s
}

.article-share a:hover {
  background: var(--v5-navy);
  color: #fff
}

.editorial-article {
  padding: 52px 58px;
  border: 1px solid rgba(7, 27, 43, .1);
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(7, 27, 43, .06)
}

.editorial-article>p:first-child {
  font-size: 19px;
  line-height: 1.9;
  color: #324a55
}

.editorial-article blockquote {
  margin: 35px 0;
  padding: 24px 28px;
  border-left: 4px solid var(--brand);
  border-radius: 0 14px 14px 0;
  background: #f1f6f5;
  color: #314954;
  font-size: 16px
}

.article-end {
  margin-top: 45px;
  padding-top: 20px;
  border-top: 1px solid rgba(7, 27, 43, .1);
  color: #91a0a6;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px
}

.article-author-card {
  position: sticky;
  top: 125px;
  padding: 27px;
  border-radius: 22px;
  background: var(--v5-navy);
  color: #9fb4be
}

.author-card-monogram {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 18px;
  background: var(--v5-cyan);
  color: var(--v5-navy);
  font-family: "Space Grotesk";
  font-size: 19px;
  font-weight: 700
}

.article-author-card>span {
  color: var(--v5-cyan);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px
}

.article-author-card h3 {
  margin: 8px 0;
  color: #fff;
  font-size: 24px
}

.article-author-card p {
  font-size: 10px
}

.article-author-card>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .11);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  color: #fff;
  font-size: 9px;
  font-weight: 800
}

.article-views {
  margin-top: 15px;
  color: #708a96;
  font-size: 8px
}

.article-views i {
  margin-right: 7px;
  color: var(--v5-cyan)
}

.related-articles {
  padding: 95px 0 110px;
  background: #eaf0ee
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.related-grid article {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(7, 27, 43, .06)
}

.related-grid article>a {
  display: block;
  padding-bottom: 25px
}

.related-grid img {
  width: 100%;
  height: 210px;
  object-fit: cover
}

.related-grid span,
.related-grid h3,
.related-grid b {
  display: block;
  margin-left: 24px;
  margin-right: 24px
}

.related-grid span {
  margin-top: 22px;
  color: #8b9ba2;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .7px
}

.related-grid h3 {
  margin-top: 9px;
  font-size: 22px
}

.related-grid b {
  margin-top: 18px;
  color: var(--brand);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px
}

/* Redesigned footer */
.site-footer {
  padding-top: 0;
  background: #05131f;
  color: #8da2ad
}

.footer-top-line {
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: #082033
}

.footer-top-line>.container {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px
}

.footer-top-line span {
  color: #fff;
  font-family: "Space Grotesk";
  font-size: 22px;
  font-weight: 700
}

.footer-top-line a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 13px 18px;
  border-radius: 12px;
   
  font-size: 10px;
  font-weight: 800
}

.footer-grid {
  grid-template-columns: 1.35fr .72fr 1.05fr 1.15fr;
  padding-top: 75px;
  padding-bottom: 58px
}

.footer-logo {
  padding: 9px 12px;
  border-radius: 13px
}

.footer-about>p {
  max-width: 340px;
  font-size: 11px;
  line-height: 1.8
}

.footer-column h4,
.footer-contact h4 {
  margin-bottom: 20px;
  color: #fff;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.4px
}

.footer-column>a {
  position: relative;
  width: max-content;
  margin: 10px 0;
  color: #8da2ad;
  font-size: 10px
}

.footer-column>a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--v5-cyan);
  transition: .2s
}

.footer-column>a:hover {
  color: #fff
}

.footer-column>a:hover:after {
  width: 100%
}

.footer-contact>a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 11px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035)
}

.footer-contact>a>i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(65, 217, 199, .11);
  color: var(--v5-cyan)
}

.footer-contact small,
.footer-contact b {
  display: block
}

.footer-contact small {
  color: #647e8b;
  font-size: 7px;
  text-transform: uppercase
}

.footer-contact b {
  margin-top: 2px;
  color: #d9e6eb;
  font-size: 9px
}

.footer-contact>p {
  display: flex;
  gap: 9px;
  align-items: flex-start
}

.footer-contact>p i {
  margin-top: 5px;
  color: var(--v5-cyan)
}

.footer-empty {
  display: block;
  color: #657d89;
  font-size: 9px;
  line-height: 1.6
}

.copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.copyright>div {
  display: flex;
  align-items: center;
  gap: 20px
}

.copyright a {
  margin: 0
}

.copyright span {
  font-size: 9px
}

@media(max-width:1150px) {
  .header-experience {
    display: none
  }

  .brand,
  .brand.brand-logo-only {
    min-width: 205px
  }

  .main-nav>a {
    padding-left: 9px;
    padding-right: 9px
  }

  .blog-article-layout {
    grid-template-columns: 55px minmax(0, 700px) 250px;
    gap: 25px
  }

  .editorial-article {
    padding: 45px
  }
}

@media(max-width:991px) {
  .topbar-location {
    display: none
  }

  .header-inner {
    min-height: 67px
  }

  .brand,
  .brand.brand-logo-only {
    min-width: auto
  }

  .brand-image-wrap {
    min-width: 150px;
    height: 49px
  }

  .main-nav {
    top: 79px
  }

  .main-nav>a.active:after {
    display: none
  }

  .service-detail-grid,
  .about-page-grid {
    grid-template-columns: 1fr
  }

  .services-hero-grid {
    grid-template-columns: 1fr
  }

  .services-hero-stat {
    width: 150px;
    height: 150px
  }

  .service-content-layout,
  .about-body-grid {
    grid-template-columns: 1fr
  }

  .service-sidebar,
  .about-body-grid>aside {
    position: static
  }

  .about-long-content {
    padding-left: 0;
    border-left: 0
  }

  .blog-article-layout {
    grid-template-columns: minmax(0, 1fr) 260px
  }

  .article-share {
    position: static;
    grid-column: 1/-1;
    flex-direction: row;
    justify-content: center
  }

  .article-share>span {
    writing-mode: initial;
    transform: none;
    margin: 0 8px 0 0
  }

  .article-author-card {
    position: static
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:700px) {
  .top-bar-inner {
    min-height: 36px;
    justify-content: center
  }

  .topbar-message {
    font-size: 8px
  }

  .topbar-links {
    display: none
  }

  .site-header>.container {
    padding-top: 8px;
    padding-bottom: 8px
  }

  .header-inner {
    padding: 7px 8px
  }

  .brand-image-wrap {
    min-width: 0;
    max-width: 180px
  }

  .brand-copy small {
    display: none
  }

  .services-page-hero {
    padding: 80px 0
  }

  .services-page-hero h1 {
    font-size: 42px
  }

  .service-showcase-grid {
    grid-template-columns: 1fr
  }

  .catalogue-intro,
  .service-bottom-cta>.container {
    align-items: flex-start;
    flex-direction: column
  }

  .service-bottom-cta h2 {
    font-size: 32px
  }

  .service-detail-hero {
    padding: 38px 0 75px
  }

  .service-detail-copy h1 {
    font-size: 40px
  }

  .service-detail-actions {
    align-items: flex-start;
    flex-direction: column
  }

  .service-result-badge {
    left: 12px;
    bottom: 12px
  }

  .service-content-layout {
    gap: 35px
  }

  .about-page-hero {
    padding: 80px 0
  }

  .about-page-copy h1 {
    font-size: 42px
  }

  .profile-panel-copy>div {
    grid-template-columns: 1fr
  }

  .about-expertise>.container {
    grid-template-columns: 1fr 1fr
  }

  .about-expertise div:nth-child(2) {
    border-right: 0
  }

  .blog-detail-hero {
    padding: 55px 0 110px
  }

  .blog-detail-head h1 {
    font-size: 40px
  }

  .article-byline {
    flex-wrap: wrap
  }

  .article-byline>span {
    display: none
  }

  .article-cover-wrap {
    margin-top: -65px
  }

  .article-cover-wide {
    height: 260px;
    border-width: 6px;
    border-radius: 20px
  }

  .blog-article-layout {
    grid-template-columns: 1fr
  }

  .editorial-article {
    padding: 28px
  }

  .related-grid {
    grid-template-columns: 1fr
  }

  .footer-top-line>.container {
    padding-top: 25px;
    padding-bottom: 25px;
    align-items: flex-start;
    flex-direction: column
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .copyright {
    align-items: flex-start;
    flex-direction: column
  }

  .copyright>div {
    flex-wrap: wrap
  }

  .footer-top-line span {
    font-size: 19px
  }
}

/* =========================================================
   Professional Redesign V6 — Navbar, Hero, Projects & Rankings
   ========================================================= */
:root {
  --v6-ink: #071725;
  --v6-blue: #1769ff;
  --v6-lime: #b8f34a;
  --v6-sky: #eaf2ff;
  --v6-white: #fff;
  --v6-soft: #f4f7f9
}

/* Navbar V6 */
.site-header {
  top: 0;
  padding: 0;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(7, 23, 37, .08);
  box-shadow: 0 8px 35px rgba(7, 23, 37, .05)
}

.site-header>.container {
  padding-top: 0;
  padding-bottom: 0
}

.header-inner {
  min-height: 86px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none
}

.brand,
.brand.brand-logo-only {
  min-width: 220px;
  max-width: 255px
}

.brand-image-wrap {
  height: 64px;
  min-width: 185px;
  max-width: 250px;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: transparent
}

.brand img {
  max-height: 50px
}

.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--v6-blue), #0b3da9)
}

.brand-copy b {
  color: var(--v6-ink);
  font-size: 18px
}

.brand-copy small {
  color: #74838e
}

.nav-divider {
  width: 1px;
  height: 34px;
  margin: 0 24px;
  background: rgba(7, 23, 37, .11)
}

.nav-cta {
  min-height: 48px;
  margin-left: 12px;
  padding: 13px 20px !important;
  border: 1px solid var(--v6-ink);
  border-radius: 999px !important;
  background: #fff;
  color: var(--v6-ink) !important;
  box-shadow: none
}

.nav-cta i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v6-blue);
  color: #fff;
  font-size: 10px
}

.nav-cta:hover {
  background: var(--v6-ink);
  color: #fff !important;
  transform: none
}

.nav-toggle {
  background: var(--v6-ink);
  border-radius: 14px
}

.orb-a {
  width: 680px;
  height: 680px;
  right: -310px;
  top: -330px;
  border: 1px solid rgba(184, 243, 74, .16);
  box-shadow: 0 0 0 95px rgba(184, 243, 74, .018), 0 0 0 190px rgba(184, 243, 74, .012)
}

.orb-b {
  width: 420px;
  height: 420px;
  left: -260px;
  bottom: -250px;
  background: radial-gradient(circle, rgba(23, 105, 255, .23), transparent 68%)
}

/* Ranking table */

/* Projects */
.home-projects {
  background: #091c2a;
  color: #fff
}

.home-projects h2 {
  color: #fff
}

.home-projects .section-heading>p,
.home-projects .text-link {
  color: #a1b3bd
}

.home-projects .eyebrow {
  color: var(--v6-lime)
}

.home-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.home-project-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .045)
}

.project-thumb {
  position: relative;
  display: block;
  overflow: hidden
}

.project-thumb img,
.project-placeholder {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: .45s
}

.project-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #12314a, #1769ff);
  color: #fff;
  font-size: 42px
}

.project-thumb:hover img {
  transform: scale(1.04)
}

.project-thumb>span {
  position: absolute;
  left: 15px;
  bottom: 15px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--v6-lime);
  color: var(--v6-ink);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.home-project-card>div {
  padding: 25px
}

.home-project-card small {
  color: #6f8998;
  font-size: 8px;
  text-transform: uppercase
}

.home-project-card h3 {
  margin: 8px 0 12px;
  color: #fff;
  font-size: 24px
}

.home-project-card p {
  color: #8fa4af;
  font-size: 11px
}

.home-project-card>div>a {
  color: var(--v6-lime);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase
}

.projects-hero,
.project-detail-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(122deg, #061522, #0b2c45);
  color: #fff
}

.projects-hero:after,
.project-detail-hero:after {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  right: -250px;
  top: -350px;
  border: 1px solid rgba(184, 243, 74, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 100px rgba(184, 243, 74, .018)
}

.projects-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 80px;
  padding: 120px 0
}

.projects-hero h1 {
  max-width: 920px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(49px, 5.3vw, 74px)
}

.projects-hero p {
  max-width: 760px;
  margin: 0;
  color: #9db1bc
}

.projects-count {
  width: 165px;
  height: 165px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05)
}

.projects-count strong {
  display: block;
  color: var(--v6-lime);
  font-size: 48px;
  line-height: 1
}

.projects-count span {
  display: block;
  color: #8ea5b1;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase
}

.projects-listing {
  background: #f1f4f5
}

.project-filter-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  color: #748690;
  font-size: 9px
}

.project-filter-note i {
  color: var(--v6-blue)
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px
}

.project-card {
  overflow: hidden;
  border: 1px solid rgba(7, 23, 37, .1);
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(7, 23, 37, .06)
}

.project-card-image {
  position: relative;
  display: block;
  overflow: hidden
}

.project-card-image img,
.project-card-image .project-placeholder {
  height: 340px
}

.project-card-image>span {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v6-ink);
  color: #fff;
  font-size: 9px
}

.project-card-body {
  padding: 30px
}

.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.project-meta span {
  color: var(--v6-blue);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px
}

.project-meta b {
  color: #8a9aa2;
  font-size: 8px
}

.project-card h2 {
  margin: 14px 0;
  font-size: 31px
}

.project-card p {
  color: #71818a;
  font-size: 12px
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0
}

.project-tech span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef3f5;
  color: #5b6e78;
  font-size: 7px;
  font-weight: 800
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--v6-ink);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase
}

.project-link i {
  color: var(--v6-blue)
}

.project-empty {
  grid-column: 1/-1;
  padding: 70px;
  text-align: center;
  border: 1px dashed #bdcbd2;
  border-radius: 24px;
  background: #fff
}

.project-empty>i {
  font-size: 40px;
  color: var(--v6-blue)
}

.project-detail-hero {
  padding: 65px 0 135px
}

.project-detail-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px
}

.project-detail-top>div {
  display: flex;
  align-items: center;
  gap: 18px
}

.project-detail-top>div>a {
  color: #a9bbc4;
  font-size: 9px
}

.project-detail-top>div>span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: var(--v6-lime);
  font-size: 8px;
  text-transform: uppercase
}

.project-detail-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 70px;
  align-items: end
}

.project-detail-heading h1 {
  max-width: 850px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(50px, 5.5vw, 78px)
}

.project-detail-heading p {
  max-width: 720px;
  margin: 0;
  color: #9eb2bd
}

.project-detail-facts {
  border-top: 1px solid rgba(255, 255, 255, .13)
}

.project-detail-facts>div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.project-detail-facts small {
  color: #718b98;
  font-size: 7px;
  text-transform: uppercase
}

.project-detail-facts b {
  color: #e3edf1;
  font-size: 9px
}

.project-detail-cover {
  position: relative;
  z-index: 3;
  margin-top: -75px
}

.project-detail-cover img {
  width: 100%;
  max-height: 690px;
  object-fit: cover;
  border: 9px solid #f4f7f9;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(7, 23, 37, .17)
}

.project-detail-body {
  background: #f4f7f9
}

.project-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 800px) 300px;
  justify-content: center;
  gap: 42px;
  align-items: start
}

.project-story {
  padding: 52px;
  border: 1px solid rgba(7, 23, 37, .1);
  border-radius: 24px;
  background: #fff
}

.project-enquiry {
  position: sticky;
  top: 125px;
  padding: 29px;
  border-radius: 22px;
  background: var(--v6-ink);
  color: #9fb1ba
}

.project-enquiry>span {
  color: var(--v6-lime);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase
}

.project-enquiry h2 {
  margin: 10px 0;
  color: #fff;
  font-size: 32px
}

.project-enquiry p {
  font-size: 10px
}

.project-enquiry .btn-main {
  width: 100%;
  margin: 12px 0;
  background: var(--v6-blue)
}

.project-enquiry>a:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 9px
}

.related-projects {
  padding: 95px 0;
  background: #e6ecef
}

.related-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.related-project-grid>a {
  overflow: hidden;
  padding-bottom: 24px;
  border-radius: 20px;
  background: #fff
}

.related-project-grid img {
  width: 100%;
  height: 210px;
  object-fit: cover
}

.related-project-grid span,
.related-project-grid h3 {
  display: block;
  margin-left: 23px;
  margin-right: 23px
}

.related-project-grid span {
  margin-top: 20px;
  color: var(--v6-blue);
  font-size: 7px;
  text-transform: uppercase
}

.related-project-grid h3 {
  margin-top: 7px;
  font-size: 22px
}

/* Footer quick links refinement */
.footer-column code {
  color: inherit
}

.site-footer .footer-column:nth-child(3) a {
  padding-left: 13px
}

.site-footer .footer-column:nth-child(3) a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--v6-lime)
}

@media(max-width:1180px) {

  .brand,
  .brand.brand-logo-only {
    min-width: 190px
  }

  .nav-divider {
    margin: 0 14px
  }

  .main-nav>a {
    padding: 11px 9px
  }
}

@media(max-width:991px) {
  .header-inner {
    min-height: 72px
  }

  .nav-divider {
    display: none
  }

  .main-nav {
    top: 74px;
    justify-content: flex-start;
    padding: 15px;
    background: #fff
  }

  .main-nav>a {
    border-radius: 12px
  }

  .main-nav>a.active:not(.nav-cta) {
    background: var(--v6-ink)
  }

  .nav-cta {
    justify-content: center;
    margin: 8px 0 0
  }

  .projects-hero-grid,
  .project-detail-heading,
  .project-detail-layout {
    grid-template-columns: 1fr
  }

  .home-project-grid {
    grid-template-columns: 1fr 1fr
  }

  .project-detail-facts {
    max-width: 600px
  }

  .project-enquiry {
    position: static
  }

  .projects-grid {
    grid-template-columns: 1fr
  }

  .project-card-image img,
  .project-card-image .project-placeholder {
    height: 390px
  }
}

@media(max-width:700px) {
  .header-inner {
    min-height: 64px
  }

  .brand,
  .brand.brand-logo-only {
    min-width: 0
  }

  .brand-image-wrap {
    height: 52px;
    max-width: 180px
  }

  .ranking-heading {
    margin-bottom: 35px
  }

  .home-project-grid {
    grid-template-columns: 1fr
  }

  .projects-hero-grid {
    padding: 80px 0
  }

  .projects-hero h1 {
    font-size: 42px
  }

  .projects-count {
    width: 135px;
    height: 135px
  }

  .project-card-image img,
  .project-card-image .project-placeholder {
    height: 250px
  }

  .project-card-body {
    padding: 23px
  }

  .project-card h2 {
    font-size: 26px
  }

  .project-detail-hero {
    padding: 45px 0 105px
  }

  .project-detail-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px
  }

  .project-detail-top>div {
    align-items: flex-start;
    flex-direction: column
  }

  .project-detail-heading h1 {
    font-size: 42px
  }

  .project-detail-cover {
    margin-top: -55px
  }

  .project-detail-cover img {
    height: 270px;
    border-width: 6px
  }

  .project-story {
    padding: 27px
  }

  .related-project-grid {
    grid-template-columns: 1fr
  }
}

/* =========================================================
   Frontend Refresh V8 — Editorial Navy / Coral / Aqua System
   ========================================================= */
:root {
  --v8-navy: #10182f;
  --v8-navy-2: #192440;
  --v8-ink: #192235;
  --v8-cream: #f3efe7;
  --v8-paper: #fbfaf7;
  --v8-coral: #ff6b4a;
  --v8-aqua: #32c9c0;
  --v8-gold: #f5c75d;
  --v8-line: rgba(16, 24, 47, .12);
  --v8-shadow: 0 24px 70px rgba(16, 24, 47, .12);
}

body {
  background: var(--v8-cream);
  color: var(--v8-ink)
}

h1,
h2,
h3,
h4 {
  color: var(--v8-navy)
}

.section {
  padding: 106px 0
}

.eyebrow {
  color: var(--v8-coral);
  letter-spacing: 1.5px
}

.btn-main {
  background: var(--v8-coral);
  box-shadow: 0 16px 34px rgba(255, 107, 74, .24)
}

.btn-main:hover {
  background: #ed5838
}

.btn-outline-custom {
  border-color: rgba(16, 24, 47, .2);
  color: var(--v8-navy)
}

.btn-outline-custom:hover {
  background: var(--v8-navy);
  border-color: var(--v8-navy)
}

.text-link {
  color: var(--v8-navy)
}

.text-link:hover {
  color: var(--v8-coral)
}

/* refreshed top bar + navbar */
.top-bar {
  background: var(--v8-navy) !important;
  border-bottom: 0 !important;
  color: #d9deeb !important
}

.top-bar-inner {
  min-height: 42px !important
}

.topbar-message i,
.topbar-links i {
  color: var(--v8-aqua) !important
}

.topbar-links a,
.topbar-location {
  color: #bac4d8 !important
}

.site-header {
  padding: 0 !important;
  background: rgba(243, 239, 231, .94) !important;
  border-bottom: 1px solid rgba(16, 24, 47, .09) !important;
  box-shadow: 0 10px 30px rgba(16, 24, 47, .05) !important
}

.header-inner {
  min-height: 82px !important;
  padding: 0 !important;
  background: transparent !important
}

.brand-mark {
  border-radius: 18px !important;
  background: var(--v8-coral) !important;
  box-shadow: 0 10px 25px rgba(255, 107, 74, .22) !important
}

.brand-copy b {
  color: var(--v8-navy) !important
}

.brand-copy small {
  color: #7e8797 !important
}

.nav-divider {
  background: rgba(16, 24, 47, .13) !important
}

.nav-cta {
  border: 0 !important;
  background: var(--v8-navy) !important;
  color: #fff !important;
  box-shadow: 0 13px 28px rgba(16, 24, 47, .18) !important
}

.nav-cta i {
  background: var(--v8-coral) !important
}

.nav-cta:hover {
  background: var(--v8-coral) !important
}

.nav-toggle {
  background: var(--v8-navy) !important
}

/* completely new editorial hero */

/* overall homepage colour refresh */
.about-section {
  background: var(--v8-paper) !important
}

.about-identity-card {
  background: var(--v8-navy) !important;
  color: #fff !important;
  box-shadow: var(--v8-shadow) !important
}

.about-identity-card h2 {
  color: #fff !important
}

.about-identity-card>strong {
  color: var(--v8-coral) !important
}

.about-skill-card {
  background: var(--v8-coral) !important;
  color: var(--v8-navy) !important
}

.about-image-frame {
  border-radius: 30px !important;
  box-shadow: var(--v8-shadow) !important
}

.stats-section {
  background: var(--v8-navy) !important
}

.stats-grid>div {
  border-color: rgba(255, 255, 255, .1) !important
}

.stats-grid strong {
  color: var(--v8-coral) !important
}

.stats-grid span {
  color: #1f766b !important
}

.home-services {
  background: #e9eef5 !important
}

.service-card {
  border: 1px solid rgba(16, 24, 47, .08) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(16, 24, 47, .08) !important
}

.service-card:before {
  background: linear-gradient(90deg, var(--v8-coral), var(--v8-aqua)) !important
}

.service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 65px rgba(16, 24, 47, .14) !important
}

.service-icon {
  background: rgba(255, 107, 74, .1) !important;
  color: var(--v8-coral) !important
}

.service-card>a {
  color: var(--v8-navy) !important
}

.service-card>a i {
  color: var(--v8-coral) !important
}

.home-projects {
  background: var(--v8-paper) !important
}

.home-project-card {
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: 0 16px 45px rgba(16, 24, 47, .08) !important
}

.project-thumb {
  background: var(--v8-navy) !important
}

.project-thumb>span {
  background: var(--v8-coral) !important;
  color: #fff !important
}

.process-section {
  background: var(--v8-cream) !important
}

.process-card {
  border: 1px solid rgba(16, 24, 47, .09) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .66) !important
}

.process-card>span {
  color: var(--v8-coral) !important
}

.testimonial-grid .testimonial-card,
.testimonial-card {
  border-color: rgba(255, 255, 255, .1) !important
}

.blog-section {
  background: #e9eef5 !important
}

.blog-card {
  border-radius: 25px !important;
  background: #fff !important;
  box-shadow: 0 16px 43px rgba(16, 24, 47, .08) !important
}

.faq-section {
  background: var(--v8-paper) !important
}

.accordion-item {
  border-color: rgba(16, 24, 47, .1) !important;
  background: #fff !important
}

.cta-section {
  background: var(--v8-coral) !important
}

.cta-card {
  background: var(--v8-navy) !important
}

/* redesigned 3-column ranking cards */
.ranking-showcase-section {
  position: relative;
  overflow: hidden;
  background: #e8edf4;
  color: var(--v8-ink)
}

.ranking-showcase-section:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -280px;
  top: -300px;
  border: 1px solid rgba(255, 107, 74, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 78px rgba(255, 107, 74, .035), 0 0 0 156px rgba(255, 107, 74, .02)
}

.ranking-showcase-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 48px
}

.ranking-showcase-heading h2 {
  
  margin: 0;
  color: var(--v8-navy);
  font-size: clamp(38px, 4.25vw, 58px)
}

.ranking-showcase-heading>p {
  margin: 0;
  color: #657087;
  font-size: 12px;
  line-height: 1.8
}

.ranking-showcase-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start
}

.ranking-showcase-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 47, .09);
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(16, 24, 47, .09);
  transition: .3s
}

.ranking-showcase-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 70px rgba(16, 24, 47, .15)
}

.ranking-card-accent {
  height: 7px;
  background: linear-gradient(90deg, var(--v8-coral), #ff9e57)
}

.ranking-showcase-card:nth-child(3n+2) .ranking-card-accent {
  background: linear-gradient(90deg, var(--v8-aqua), #80e3db)
}

.ranking-showcase-card:nth-child(3n+3) .ranking-card-accent {
  background: linear-gradient(90deg, var(--v8-gold), #ffe092)
}

.ranking-card-top {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 23px 21px 19px
}

.ranking-card-logo {
  flex: 0 0 auto;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--v8-navy);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(16, 24, 47, .16)
}

.ranking-card-title {
  min-width: 0
}

.ranking-card-title small {
  display: block;
  color: #8a94a6;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px
}

.ranking-card-title h3 {
  overflow: hidden;
  margin: 4px 0 2px;
  color: var(--v8-navy);
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis
}

.ranking-card-title a {
  display: block;
  overflow: hidden;
  color: #667187;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis
}

.ranking-card-title a i {
  margin-left: 4px;
  color: var(--v8-coral)
}

.ranking-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 21px 17px;
  border-radius: 16px;
  background: #f2f5f8
}

.ranking-card-metrics>div {
  padding: 14px 15px
}

.ranking-card-metrics>div+div {
  border-left: 1px solid rgba(16, 24, 47, .08)
}

.ranking-card-metrics span,
.ranking-card-metrics strong {
  display: block
}

.ranking-card-metrics span {
  color: #7d8799;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase
}

.ranking-card-metrics strong {
  margin-top: 3px;
  color: var(--v8-navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: 24px
}

.ranking-card-note {
  margin: 0;
  padding: 0 21px 17px;
  color: #737e91;
  font-size: 9px;
  line-height: 1.65
}

.ranking-card-keywords {
  border-top: 1px solid rgba(16, 24, 47, .075)
}

.ranking-card-keyword {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 69px;
  padding: 12px 21px;
  border-bottom: 1px solid rgba(16, 24, 47, .075);
  transition: .2s
}

.ranking-card-keyword:hover {
  background: #faf7f2
}

.ranking-keyword-copy {
  min-width: 0
}

.ranking-keyword-copy strong,
.ranking-keyword-copy small {
  display: block
}

.ranking-keyword-copy strong {
  overflow: hidden;
  color: var(--v8-navy);
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis
}

.ranking-keyword-copy small {
  margin-top: 5px;
  color: #8a94a6;
  font-size: 7px
}

.ranking-keyword-copy small i {
  margin-right: 4px;
  color: var(--v8-coral)
}

.ranking-keyword-rank {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto
}

.ranking-keyword-rank b {
  min-width: 43px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 107, 74, .11);
  color: var(--v8-coral);
  font-size: 10px;
  text-align: center
}

.ranking-showcase-card:nth-child(3n+2) .ranking-keyword-rank b {
  background: rgba(50, 201, 192, .12);
  color: #15998f
}

.ranking-showcase-card:nth-child(3n+3) .ranking-keyword-rank b {
  background: rgba(245, 199, 93, .18);
  color: #9f7410
}

.ranking-keyword-rank a {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 24, 47, .11);
  border-radius: 50%;
  color: #7d8797;
  font-size: 7px
}

.ranking-keyword-rank a:hover {
  border-color: var(--v8-coral);
  color: var(--v8-coral)
}

.ranking-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 21px;
  background: var(--v8-navy);
  color: #fff
}

.ranking-card-footer span,
.ranking-card-footer small {
  font-size: 7px
}

.ranking-card-footer span i {
  margin-right: 5px;
  color: var(--v8-aqua)
}

.ranking-card-footer small {
  color: #9ca8bc
}

.ranking-showcase-disclaimer {
  position: relative;
  z-index: 1;
  margin: 25px 0 0;
  color: #748095;
  font-size: 8px;
  text-align: center
}

.ranking-showcase-disclaimer i {
  margin-right: 6px;
  color: var(--v8-coral)
}

/* inner pages + content cards */
.services-page-hero,
.projects-hero,
.page-hero,
.about-page-hero,
.service-detail-hero,
.blog-detail-hero,
.project-detail-hero {
  background: var(--v8-navy) !important
}

.services-page-hero:before,
.projects-hero:before,
.page-hero:before,
.about-page-hero:before,
.service-detail-hero:before,
.blog-detail-hero:before,
.project-detail-hero:before {
  background-color: #172522 !important
}

.services-page-hero h1,
.projects-hero h1,
.page-hero h1,
.about-page-hero h1,
.service-detail-hero h1,
.blog-detail-hero h1,
.project-detail-hero h1 {
  color: #fff !important
}

.services-page-hero p,
.projects-hero p,
.page-hero p,
.about-page-hero p,
.service-detail-hero p,
.blog-detail-hero p,
.project-detail-hero p {
  color: #aeb9ce !important
}

.services-hero-stat,
.projects-count {
  background: var(--v8-coral) !important;
  color: var(--v8-navy) !important
}

.services-catalogue,
.projects-listing,
.service-detail-content,
.about-page-body,
.blog-article-section {
  background: var(--v8-cream) !important
}

.content-card,
.service-sidebar,
.editorial-article,
.article-author-card,
.project-story {
  border-color: rgba(16, 24, 47, .09) !important;
  background: #fff !important;
  box-shadow: 0 16px 45px rgba(16, 24, 47, .08) !important
}

.service-showcase-card,
.project-list-card,
.related-card {
  border-radius: 24px !important;
  box-shadow: 0 16px 42px rgba(16, 24, 47, .08) !important
}

/* refreshed footer */
.site-footer {
  background: var(--v8-navy) !important;
  color: #fff !important
}

.footer-top-line {
  border-color: rgba(255, 255, 255, .09) !important
}

.footer-top-line strong {
  color: var(--v8-coral) !important
}

.footer-column>a:hover {
  color: var(--v8-aqua) !important
}

.footer-column>a:after {
  background: var(--v8-coral) !important
}

.footer-contact>a>i {
  background: rgba(50, 201, 192, .12) !important;
  color: var(--v8-aqua) !important
}

.floating-actions a:first-child {
  background: var(--v8-coral) !important
}

.floating-actions a:last-child {
  background: #22b573 !important
}

@media(max-width:1180px) {
  .ranking-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:991px) {
  .ranking-showcase-heading {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

@media(max-width:700px) {
  .section {
    padding: 78px 0
  }

  .ranking-showcase-grid {
    grid-template-columns: 1fr
  }

  .ranking-showcase-heading h2 {
    font-size: 38px
  }

  .ranking-card-top,
  .ranking-card-keyword {
    padding-left: 18px;
    padding-right: 18px
  }

  .main-nav>a.active:not(.nav-cta):before {
    display: none
  }
}

/* V8 specificity corrections for legacy section rules */
.home-services .section-heading h2 {
  color: var(--v8-navy) !important
}

.home-services .section-heading>p {
  color: #657087 !important
}

.home-services .eyebrow {
  color: var(--v8-coral) !important
}

.home-services .service-card {
  border-color: rgba(16, 24, 47, .08) !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(16, 24, 47, .08) !important
}

.home-services .service-card:hover {
  background: #fff !important;
  box-shadow: 0 28px 65px rgba(16, 24, 47, .14) !important
}

.home-services .service-card h3 {
  color: var(--v8-navy) !important
}

.home-services .service-card p {
  color: #6d7789 !important
}

.home-services .service-no {
  color: #a2a9b5 !important
}

.home-services .service-icon {
  background: rgba(255, 107, 74, .1) !important;
  color: var(--v8-coral) !important
}

.home-services .service-card>a {
  color: var(--v8-navy) !important
}

.home-services .btn-outline-custom {
  border-color: rgba(16, 24, 47, .2) !important;
  color: var(--v8-navy) !important
}

.home-services .btn-outline-custom:hover {
  background: var(--v8-navy) !important;
  border-color: var(--v8-navy) !important;
  color: #fff !important
}

.home-projects h2 {
  color: var(--v8-navy) !important
}

.home-projects .section-heading>p,
.home-projects .text-link {
  color: #657087 !important
}

.home-projects .eyebrow {
  color: var(--v8-coral) !important
}

.home-project-card h3,
.home-project-card h3 a {
  color: var(--v8-navy) !important
}

.home-project-card p {
  color: #6d7789 !important
}

.home-project-card>div>a {
  color: var(--v8-coral) !important
}

.home-project-card small {
  color: #8b94a4 !important
}

.soft-section {
  background: linear-gradient(135deg, var(--v8-navy), #202d4e) !important
}

.soft-section .eyebrow,
.stars {
  color: var(--v8-coral) !important
}

.client>span {
  background: var(--v8-coral) !important
}

.stats-grid {
  border-color: rgba(255, 255, 255, .08) !important;
  background: #fff !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .18) !important
}

.stats-grid p {
  color: #fff !important
}

.cta-card h2 {
  color: #fff !important
}

.cta-card p {
  color: #aeb9cd !important
}

/* =========================================================
   Frontend Refresh V9 — Unified Royal Blue Theme
   Single-column image hero + image-led home services
   ========================================================= */
:root {
  --theme-primary: #2563eb;
  --theme-primary-dark: #1747b8;
  --theme-primary-soft: #eaf1ff;
  --theme-dark: #081a33;
  --theme-dark-2: #102b50;
  --theme-bg: #f4f7fc;
  --theme-surface: #ffffff;
  --theme-text: #14233b;
  --theme-muted: #68758a;
  --theme-line: rgba(20, 35, 59, .11);
  --theme-shadow: 0 22px 65px rgba(8, 26, 51, .11);
  --v8-navy: var(--theme-dark);
  --v8-navy-2: var(--theme-dark-2);
  --v8-ink: var(--theme-text);
  --v8-cream: var(--theme-bg);
  --v8-paper: var(--theme-surface);
  --v8-coral: var(--theme-primary);
  --v8-aqua: #60a5fa;
  --v8-gold: #93c5fd;
  --paper: var(--theme-bg);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-primary-soft);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --night: var(--theme-dark);
  --night-2: var(--theme-dark-2);
  --cream: #f8fbff;
}

body {
  background: var(--theme-bg);
  color: var(--theme-text)
}

h1,
h2,
h3,
h4 {
  color: var(--theme-text)
}

::selection {
  background: var(--theme-primary);
  color: #fff
}

.eyebrow {
  color: var(--theme-primary) !important
}

.btn-main,
.nav-cta {
  background: var(--theme-primary) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .23) !important
}

.btn-main:hover,
.nav-cta:hover {
  background: var(--theme-primary-dark) !important
}

.btn-outline-custom {
  border-color: rgba(37, 99, 235, .28) !important;
  color: var(--theme-primary) !important
}

.btn-outline-custom:hover {
  border-color: var(--theme-primary) !important;
  background: var(--theme-primary) !important;
  color: #fff !important
}

.text-link {
  color: var(--theme-primary) !important
}

/* unified header */
.top-bar {
  background: var(--theme-dark) !important;
  color: #d7e5f8 !important
}

.topbar-message .live-dot,
.topbar-message i,
.topbar-links i {
  color: #93c5fd !important
}

.site-header {
  background: rgba(244, 247, 252, .9) !important;
  border-color: rgba(8, 26, 51, .07) !important
}

.header-inner {
  border-color: rgba(8, 26, 51, .09) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 36px rgba(8, 26, 51, .08) !important
}

.brand-mark {
  background: var(--theme-primary) !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, .22) !important
}

.main-nav>a:not(.nav-cta) {
  color: #34445c !important
}

.main-nav>a:not(.nav-cta):hover {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important
}

.main-nav>a.active:not(.nav-cta) {
  color: var(--theme-primary) !important
}

.main-nav>a.active:not(.nav-cta):before {
  background: var(--theme-primary) !important
}

.nav-cta i {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important
}

.nav-toggle {
  background: var(--theme-dark) !important
}

/* single full-width hero */
.hero-section.hero-v9 {
  position: relative;
  min-height: 690px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--theme-dark);
  background-image: linear-gradient(90deg, rgba(5, 19, 39, .97) 0%, rgba(5, 22, 46, .91) 44%, rgba(7, 31, 64, .65) 75%, rgba(7, 31, 64, .52) 100%), var(--hero-bg, url('placeholder.svg'));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.hero-section.hero-v9:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 35%, rgba(2, 13, 28, .2));
  pointer-events: none
}

.hero-section.hero-v9:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12)
}

.hero-v9-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 82% 43%, rgba(96, 165, 250, .18), transparent 28%)
}

.hero-v9-inner {
  position: relative;
  z-index: 2;
  width: 100%
}

.hero-v9-content {
  max-width: 910px;
  padding: 104px 0 110px
}

.hero-v9-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #dbeafe;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.35px;
  backdrop-filter: blur(10px)
}

.hero-v9-eyebrow i {
  color: #60a5fa
}

.hero-v9-title {
  max-width: 900px;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(48px, 6.25vw, 88px);
  font-weight: 700;
  line-height: .99;
  letter-spacing: -.057em;
  text-wrap: balance
}

.hero-v9-content>p {
  max-width: 730px;
  margin: 29px 0 0;
  color: #bfd0e7;
  font-size: 17px;
  line-height: 1.8
}

.hero-v9-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 38px
}

.hero-v9-primary,
.hero-v9-secondary {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .55px;
  transition: .25s
}

.hero-v9-primary {
  background: var(--theme-primary);
  color: #fff;
  box-shadow: 0 18px 40px rgba(37, 99, 235, .28)
}

.hero-v9-primary:hover {
  background: #fff;
  color: var(--theme-dark);
  transform: translateY(-2px)
}

.hero-v9-secondary {
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  backdrop-filter: blur(10px)
}

.hero-v9-secondary:hover {
  border-color: #fff;
  background: #fff;
  color: var(--theme-dark);
  transform: translateY(-2px)
}

.hero-v9-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 43px;
  color: #a9bed9;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .85px
}

.hero-v9-meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 5px rgba(96, 165, 250, .11)
}

/* home service redesign */
.home-services-v9 {
  position: relative;
  overflow: hidden;
  background: var(--theme-bg) !important
}

.home-services-v9:before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -300px;
  top: -280px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(37, 99, 235, .025), 0 0 0 140px rgba(37, 99, 235, .014)
}

.home-services-v9 .container {
  position: relative;
  z-index: 1
}

.home-services-v9-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .55fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 53px
}

.home-services-v9-heading h2 {
  max-width: 770px;
  margin: 0;
  color: var(--theme-text) !important;
  font-size: clamp(38px, 4.5vw, 61px)
}

.home-services-v9-heading>p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.85
}

.home-services-v9-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.home-service-v9-card {
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(8, 26, 51, .075);
  transition: .3s
}

.home-service-v9-card:hover {
  transform: translateY(-8px);
  border-color: rgba(37, 99, 235, .24);
  box-shadow: 0 30px 72px rgba(8, 26, 51, .14)
}

.home-service-v9-media {
  position: relative;
  height: 220px;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg, var(--theme-dark), var(--theme-primary-dark))
}

.home-service-v9-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(4, 18, 39, .25))
}

.home-service-v9-media img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: .5s
}

.home-service-v9-card:hover .home-service-v9-media img {
  transform: scale(1.055)
}

.home-service-v9-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px;
  background: radial-gradient(circle at 78% 20%, rgba(96, 165, 250, .42), transparent 33%), linear-gradient(135deg, var(--theme-dark), #174a8e);
  color: #fff
}

.home-service-v9-placeholder:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 38px 38px
}

.home-service-v9-placeholder b,
.home-service-v9-placeholder i {
  position: relative;
  z-index: 1
}

.home-service-v9-placeholder b {
  font-family: "Space Grotesk", sans-serif;
  font-size: 58px;
  line-height: 1;
  color: rgba(255, 255, 255, .16)
}

.home-service-v9-placeholder i {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .1);
  font-size: 22px;
  backdrop-filter: blur(8px)
}

.home-service-v9-body {
  padding: 27px 27px 28px
}

.home-service-v9-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
  color: var(--theme-primary);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.1px
}

.home-service-v9-label i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--theme-primary-soft);
  font-size: 12px
}

.home-service-v9-body h3 {
  margin: 0;
  color: var(--theme-text) !important;
  font-size: 24px
}

.home-service-v9-body h3 a {
  color: inherit
}

.home-service-v9-body p {
   
  margin: 14px 0 22px;
  color: var(--theme-muted) !important;
  font-size: 12px;
  line-height: 1.75
}

.home-service-v9-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--theme-primary) !important;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .55px
}

.home-service-v9-link i {
  transition: .25s
}

.home-service-v9-link:hover i {
  transform: translateX(4px)
}

.home-services-v9 .center-btn {
  margin-top: 42px
}

/* whole-site one-theme refresh */
.about-section,
.home-projects,
.faq-section,
.blog-section,
.services-catalogue,
.projects-listing,
.service-detail-content,
.about-page-body,
.blog-article-section {
  background: var(--theme-surface) !important
}

.stats-section,
.ranking-showcase-section,
.soft-section {
  background: var(--theme-dark) !important
}

.stats-grid {
  border-color: rgba(255, 255, 255, .09) !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important
}

.stats-grid strong {
  color: #fff !important
}
 

.stats-grid p {
  color: #fff !important
}

.about-identity-card,
.about-skill-card,
.content-card,
.service-sidebar,
.editorial-article,
.article-author-card,
.project-story,
.testimonial-card,
.faq-item {
  border-color: var(--theme-line) !important;
  background: #fff !important;
  box-shadow: var(--theme-shadow) !important
}

.about-identity-card strong,
.about-skill-card b {
  color: var(--theme-primary) !important
}

.service-icon,
.process-no,
.client>span {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important
}

.service-card:before,
.project-card:before,
.blog-card:before {
  background: var(--theme-primary) !important
}

.home-project-card>div>a,
.blog-card>a,
.service-card>a,
.footer-top-line strong {
  color: var(--theme-primary) !important
}

.ranking-showcase-section {
  color: #fff !important
}

.ranking-showcase-heading h2 {
  color: #fff !important
}

.ranking-showcase-heading>p,
.ranking-showcase-disclaimer {
  color: #9eb1c9 !important
}

.ranking-showcase-card {
  border-color: rgba(255, 255, 255, .08) !important
}

.ranking-card-accent,
.ranking-showcase-card:nth-child(3n+2) .ranking-card-accent,
.ranking-showcase-card:nth-child(3n+3) .ranking-card-accent {
  background: linear-gradient(90deg, var(--theme-primary), #60a5fa) !important
}

.ranking-keyword-rank b,
.ranking-showcase-card:nth-child(3n+2) .ranking-keyword-rank b,
.ranking-showcase-card:nth-child(3n+3) .ranking-keyword-rank b {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important
}
 
.services-hero-stat,
.projects-count {
  background: var(--theme-primary) !important;
  color: #fff !important
}

.site-footer {
  background: var(--theme-dark) !important
}

.footer-column>a:hover {
  color: #93c5fd !important
}

.footer-column>a:after {
  background: var(--theme-primary) !important
}

.footer-contact>a>i {
  background: rgba(96, 165, 250, .13) !important;
  color: #93c5fd !important
}

.floating-actions a:first-child {
  background: var(--theme-primary) !important
}

@media(max-width:991px) {
  .hero-section.hero-v9 {
    min-height: 620px;
    background-position: 62% center
  }

  .hero-v9-content {
    max-width: 780px;
    padding: 88px 0 94px
  }

  .home-services-v9-heading {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .home-services-v9-grid {
    grid-template-columns:repeat(3, 1fr);
  }
}

@media(max-width:700px) {
  .hero-section.hero-v9 {
    min-height: 590px;
    background-position: 68% center;
    background-image: linear-gradient(90deg, rgba(5, 19, 39, .97), rgba(5, 22, 46, .88)), var(--hero-bg, url('placeholder.svg'))
  }

  .hero-v9-content {
    padding: 76px 0 82px
  }

  .hero-v9-title {
    font-size: 43px
  }

  .hero-v9-content>p {
    font-size: 14px;
    line-height: 1.75
  }

  .hero-v9-actions {
    align-items: stretch;
    flex-direction: column
  }

  .hero-v9-primary,
  .hero-v9-secondary {
    width: 100%
  }

  .hero-v9-meta {
    gap: 11px;
    font-size: 8px
  }

  .hero-v9-meta i {
    display: none
  }

  .hero-v9-meta span {
    width: 100%
  }

  .home-services-v9-grid {
    grid-template-columns:repeat(3, 1fr);
  }

  .home-service-v9-media {
    height: 210px
  }

  .home-service-v9-body p {
    min-height: 0
  }
}

/* Version 10: readable typography system */
:root {
  --body-size: 16px;
  --body-line: 1.78;
}

body {
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 400
}

p,
li,
.rich-text p,
.rich-text li {
  font-size: 16px;
  line-height: 1.82
}

.top-bar,
.topbar-links,
.topbar-message {
  font-size: 12px
}

.eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 1.35px
}

.section {
  padding: 104px 0
}

.section-heading h2,
.center-heading h2,
.faq-grid h2 {
  font-size: clamp(36px, 4vw, 58px)
}

.section-heading>p,
.center-heading>p,
.faq-intro p {
  font-size: 16px;
  line-height: 1.75
}

.btn-main,
.btn-light-custom,
.btn-outline-custom,
.text-link {
  font-size: 14px
}

.page-hero p,
.detail-hero p {
  font-size: 18px;
  line-height: 1.78
}

.home-service-v9-content p,
.process-card p,
.blog-body p,
.site-footer p,
.site-footer a {
  font-size: 15px;
  line-height: 1.75
}

.home-service-v9-content h3,
.process-card h3,
.blog-body h3,
.blog-body h2 {
  font-size: 22px;
  line-height: 1.25
}

.home-service-v9-link,
.blog-body>a {
  font-size: 13px
}

.testimonial-card>p {
  font-size: 16px;
  line-height: 1.8
}

.client b {
  font-size: 14px
}

.client small {
  font-size: 11px
}

.accordion-button {
  font-size: 18px;
  line-height: 1.45
}

.accordion-body {
  font-size: 16px;
  line-height: 1.78
}

.cta-card p {
  font-size: 16px;
  line-height: 1.72
}

.page-hero h1,
.detail-hero h1,
.article-head h1 {
  font-size: clamp(42px, 5vw, 70px)
}

.rich-text {
  font-size: 17px;
  line-height: 1.82
}

.rich-text h2 {
  font-size: 34px;
  line-height: 1.2
}

.rich-text h3 {
  font-size: 26px;
  line-height: 1.3
}

.article-meta {
  font-size: 13px
}

.contact-info>p {
  font-size: 16px
}

.contact-form label {
  font-size: 12px
}

.contact-form .form-control,
.contact-form .form-select {
  font-size: 15px
}

.site-footer h4 {
  font-size: 13px
}

.copyright {
  font-size: 12px
}

.footer-brand {
  font-size: 27px
}

.ranking-card-note,
.ranking-keyword-copy strong {
  font-size: 14px
}

.ranking-keyword-copy small,
.ranking-card-footer {
  font-size: 11px
}

@media(max-width:991px) {
  body {
    font-size: 15.5px
  }

  .section {
    padding: 86px 0
  }

  .main-nav {
    font-size: 15px
  }
}

@media(max-width:575px) {

  p,
  li,
  .rich-text p,
  .rich-text li {
    font-size: 15.5px
  }

  .section {
    padding: 74px 0
  }

  .section-heading h2,
  .center-heading h2,
  .faq-grid h2 {
    font-size: 34px
  }

  .page-hero p,
  .detail-hero p {
    font-size: 16px
  }

  .content-card,
  .article-card {
    padding: 28px 22px
  }

  .rich-text h2 {
    font-size: 28px
  }

  .rich-text h3 {
    font-size: 23px
  }
}

/* =========================================================
   Frontend Refresh V11 — Midnight Indigo + Mint Theme
   Larger navigation and improved reading contrast
   ========================================================= */
:root {
  --fresh-primary: #6c5ce7;
  --fresh-primary-dark: #4e3fc4;
  --fresh-accent: #20c9a6;
  --fresh-accent-dark: #119878;
  --fresh-night: #171437;
  --fresh-night-2: #242054;
  --fresh-bg: #f5f5fb;
  --fresh-surface: #ffffff;
  --fresh-soft: #eceafd;
  --fresh-mint-soft: #e7faf5;
  --fresh-warm: #fff6eb;
  --fresh-text: #201d3b;
  --fresh-muted: #69677c;
  --fresh-line: rgba(32, 29, 59, .11);
  --fresh-shadow: 0 24px 70px rgba(31, 27, 72, .11);
  --theme-primary: var(--fresh-primary);
  --theme-primary-dark: var(--fresh-primary-dark);
  --theme-primary-soft: var(--fresh-soft);
  --theme-dark: var(--fresh-night);
  --theme-dark-2: var(--fresh-night-2);
  --theme-bg: var(--fresh-bg);
  --theme-surface: var(--fresh-surface);
  --theme-text: var(--fresh-text);
  --theme-muted: var(--fresh-muted);
  --theme-line: var(--fresh-line);
  --theme-shadow: var(--fresh-shadow);
  --paper: var(--fresh-bg);
  --paper-2: #efeff8;
  --surface: var(--fresh-surface);
  --surface-2: var(--fresh-soft);
  --text: var(--fresh-text);
  --muted: var(--fresh-muted);
  --night: var(--fresh-night);
  --night-2: var(--fresh-night-2);
  --cream: #fbfaff;
  --v8-navy: var(--fresh-night);
  --v8-navy-2: var(--fresh-night-2);
  --v8-ink: var(--fresh-text);
  --v8-cream: var(--fresh-bg);
  --v8-paper: #fff;
  --v8-coral: var(--fresh-primary);
  --v8-aqua: var(--fresh-accent);
  --v8-gold: #ffb45e;
}

html {
  background: var(--fresh-bg)
}

body {
  background: var(--fresh-bg) !important;
  color: var(--fresh-text) !important;
  font-size: 16.5px;
  line-height: 1.8
}

p,
li,
.rich-text p,
.rich-text li {
  font-size: 16.5px;
  line-height: 1.84;
  color: #000;
}

h1,
h2,
h3,
h4 {
  color: var(--fresh-text)
}

::selection {
  background: var(--fresh-primary);
  color: #fff
}

/* top bar + navbar */
.top-bar {
  background: var(--fresh-accent) !important;
  color: #102e2a !important;
  border-bottom: 0 !important
}

.top-bar-inner {
  min-height: 43px
}

.topbar-message,
.topbar-links,
.topbar-links a,
.topbar-location {
  color: #102e2a !important;
  font-size: 13px !important;
  font-weight: 750
}

.topbar-message .live-dot {
  background: #fff !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .26) !important
}

.topbar-message i,
.topbar-links i {
  color: #102e2a !important
}

.site-header {
  padding: 11px 0 !important;
  background: rgba(245, 245, 251, .88) !important;
  border: 0 !important;
  backdrop-filter: blur(18px)
}

.header-inner {
  min-height: 78px;
  padding: 9px 11px 9px 18px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--fresh-night), var(--fresh-night-2)) !important;
  box-shadow: 0 18px 46px rgba(23, 20, 55, .20) !important
}

.brand {
  min-width: 205px
}

.brand-image-wrap {
  min-height: 54px;
  min-width: 155px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14)
}

.brand img {
  max-height: 42px !important;
  max-width: 220px !important
}

.brand-mark {
  width: 51px;
  height: 51px;
  background: linear-gradient(145deg, var(--fresh-primary), #8b7dff) !important;
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(108, 92, 231, .34) !important
}

.brand-copy b {
  color: #fff !important;
  font-size: 19px !important
}

.brand-copy small {
  color: #aaa7ca !important;
  font-size: 11px !important
}

.nav-divider {
  width: 1px;
  height: 32px;
  margin: 0 15px;
  background: rgba(255, 255, 255, .12)
}

.nav-cta {
  min-height: 48px;
  margin-left: 9px !important;
  padding: 0 18px !important;
  background: linear-gradient(135deg, var(--fresh-primary), #806ff3) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(108, 92, 231, .31) !important
}

.nav-cta:hover {
  background: linear-gradient(135deg, #7c6df0, var(--fresh-primary-dark)) !important;
  transform: translateY(-2px)
}

.nav-cta i {
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important
}

.nav-toggle {
  background: var(--fresh-accent) !important;
  color: var(--fresh-night) !important
}

/* full-width hero recolour */
.hero-section.hero-v9 {
  background-color: var(--fresh-night) !important;
  background-image: linear-gradient(90deg, rgba(20, 17, 52, .97) 0%, rgba(27, 22, 67, .92) 45%, rgba(45, 36, 102, .69) 75%, rgba(45, 36, 102, .54) 100%), var(--hero-bg, url('placeholder.svg')) !important
}

.hero-v9-overlay {
  background: radial-gradient(circle at 80% 25%, rgba(32, 201, 166, .20), transparent 28%), linear-gradient(180deg, transparent 72%, rgba(23, 20, 55, .42)) !important
}

.hero-v9-eyebrow {
  border-color: rgba(123, 240, 215, .28) !important;
  background: rgba(32, 201, 166, .10) !important;
  color: #aaf6e5 !important;
  font-size: 12px !important
}

.hero-v9-eyebrow i {
  color: var(--fresh-accent) !important
}

.hero-v9-title {
  color: #fff !important
}

.hero-v9-content>p {
  color: #d0cee6 !important;
  font-size: 18px !important;
  line-height: 1.82 !important
}

.hero-v9-primary {
  background: linear-gradient(135deg, var(--fresh-accent), #31ddba) !important;
  color: #102e2a !important;
  box-shadow: 0 16px 38px rgba(32, 201, 166, .23) !important
}

.hero-v9-primary:hover {
  background: #54e7c8 !important;
  color: #102e2a !important
}

.hero-v9-secondary {
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important
}

.hero-v9-meta {
  color: #c1bedc !important;
  font-size: 11px !important
}

.hero-v9-meta i {
  background: var(--fresh-accent) !important
}

/* unified section surfaces */
.about-section,
.faq-section,
.services-catalogue,
.projects-listing,
.service-detail-content,
.about-page-body,
.blog-article-section {
  background: var(--fresh-surface) !important
}

.home-services-v9,
.blog-section,
.home-projects {
  background: var(--fresh-bg) !important
}

.process-section {
  background: linear-gradient(180deg, #efeffa, #f8f7fc) !important
}

.stats-section,
.ranking-showcase-section,
.soft-section {
  background: linear-gradient(135deg, var(--fresh-night), var(--fresh-night-2)) !important
}

.eyebrow {
  color: var(--fresh-primary) !important;
  font-size: 12px !important
}

.section-heading>p,
.center-heading>p,
.faq-intro p {
  color: var(--fresh-muted) !important;
  font-size: 16.5px !important
}

.btn-main {
  background: linear-gradient(135deg, var(--fresh-primary), #8171f3) !important;
  box-shadow: 0 15px 34px rgba(108, 92, 231, .24) !important
}

.btn-main:hover {
  background: var(--fresh-primary-dark) !important
}

.btn-outline-custom {
  border-color: rgba(108, 92, 231, .30) !important;
  color: var(--fresh-primary) !important
}

.btn-outline-custom:hover {
  background: var(--fresh-primary) !important;
  border-color: var(--fresh-primary) !important;
  color: #fff !important
}

.text-link {
  color: var(--fresh-primary) !important
}

/* home services */
.home-services-v9:before {
  border-color: rgba(108, 92, 231, .12) !important;
  box-shadow: 0 0 0 70px rgba(108, 92, 231, .035), 0 0 0 140px rgba(32, 201, 166, .018) !important
}

.home-services-v9-heading>p {
  color: var(--fresh-muted) !important;
  font-size: 16.5px !important
}

.home-service-v9-card {
  border-color: var(--fresh-line) !important;
  border-radius: 25px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(31, 27, 72, .08) !important
}

.home-service-v9-card:hover {
  border-color: rgba(108, 92, 231, .29) !important;
  box-shadow: 0 30px 75px rgba(31, 27, 72, .14) !important
}

.home-service-v9-media {
  background: linear-gradient(135deg, var(--fresh-night), var(--fresh-primary-dark)) !important
}

.home-service-v9-placeholder {
  background: radial-gradient(circle at 78% 20%, rgba(32, 201, 166, .38), transparent 33%), linear-gradient(135deg, var(--fresh-night), var(--fresh-primary-dark)) !important
}

.home-service-v9-label {
  color: var(--fresh-primary) !important;
  font-size: 11px !important
}

.home-service-v9-label i {
  background: var(--fresh-soft) !important;
  color: var(--fresh-primary) !important
}

.home-service-v9-body h3 {
  font-size: 25px !important;
  color: var(--fresh-text) !important
}

.home-service-v9-body p {
  color: var(--fresh-muted) !important;
  font-size: 15.5px !important;
  line-height: 1.78 !important
}

.home-service-v9-link {
  color: var(--fresh-primary) !important;
  font-size: 13px !important
}

/* cards, content and accents */
.about-identity-card,
.about-skill-card,
.content-card,
.service-sidebar,
.editorial-article,
.article-author-card,
.project-story,
.testimonial-card,
.faq-item,
.blog-card,
.project-card,
.home-project-card,
.process-card {
  border-color: var(--fresh-line) !important;
  background: #fff !important;
  box-shadow: var(--fresh-shadow) !important
}

.service-icon,
.process-no,
.client>span {
  background: var(--fresh-soft) !important;
  color: var(--fresh-primary) !important
}

.service-card:before,
.project-card:before,
.blog-card:before {
  background: linear-gradient(90deg, var(--fresh-primary), var(--fresh-accent)) !important
}

.home-project-card>div>a,
.blog-card>a,
.service-card>a,
.footer-top-line strong {
  color: var(--fresh-primary) !important
}

.process-card p,
.blog-body p,
.home-project-card p {
  font-size: 15.5px !important;
  line-height: 1.78 !important
}

.process-card h3,
.blog-body h3,
.home-project-card h3 {
  font-size: 22px !important
}

.testimonial-card {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: none !important
}

.testimonial-card>p {
  color: #fff !important
}

.stars {
  color: #5ce7c9 !important
}

.client>span {
  background: var(--fresh-primary) !important;
  color: #fff !important
}

.stats-grid {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: none !important
}
 
.stats-grid p {
  color: #fff !important
}

/* ranking and inner pages */
.ranking-showcase-heading>p,
.ranking-showcase-disclaimer {
  color: #bdbbd1 !important
}

.ranking-card-accent,
.ranking-showcase-card:nth-child(3n+2) .ranking-card-accent,
.ranking-showcase-card:nth-child(3n+3) .ranking-card-accent {
  background: linear-gradient(90deg, var(--fresh-primary), var(--fresh-accent)) !important
}

.ranking-keyword-rank b,
.ranking-showcase-card:nth-child(3n+2) .ranking-keyword-rank b,
.ranking-showcase-card:nth-child(3n+3) .ranking-keyword-rank b {
  background: var(--fresh-mint-soft) !important;
  color: var(--fresh-accent-dark) !important
}

.ranking-card-note,
.ranking-keyword-copy strong {
  font-size: 14.5px !important
}

.ranking-keyword-copy small {
  font-size: 12px !important
}
 
.services-hero-stat,
.projects-count {
  background: var(--fresh-primary) !important;
  color: #fff !important
}

.rich-text {
  color: var(--fresh-text) !important
}

.rich-text p,
.rich-text li {
  color: #000 !important
}

/* footer */
.site-footer {
  background: var(--fresh-night) !important
}

.site-footer p,
.site-footer a {
  color: #bbb9d1 !important;
  font-size: 15px !important
}

.site-footer h4 {
  color: #fff !important;
  font-size: 14px !important
}

.footer-column>a:hover {
  color: #74efd5 !important
}

.footer-column>a:after {
  background: var(--fresh-accent) !important
}

.footer-contact>a>i {
  background: rgba(32, 201, 166, .13) !important;
  color: #74efd5 !important
}

.floating-actions a:first-child {
  background: var(--fresh-primary) !important
}

@media(max-width:1199px) {
  .main-nav {
    font-size: 14px !important
  }

  .main-nav>a {
    padding: 12px 10px !important
  }

  .brand {
    min-width: 170px
  }

  .nav-divider {
    margin: 0 7px
  }
}

@media(max-width:991px) {
  .header-inner {
    background: var(--fresh-night) !important
  }

  .main-nav {
    background: var(--fresh-night) !important;
    font-size: 15.5px !important
  }

  .main-nav>a {
    color: #e4e1f6 !important
  }

  .main-nav>a:not(.nav-cta):hover {
    background: rgba(255, 255, 255, .08) !important
  }

  .nav-divider {
    display: none
  }

  .brand-image-wrap {
    min-width: 125px
  }

  .hero-v9-content>p {
    font-size: 17px !important
  }
}

@media(max-width:575px) {

  body,
  p,
  li,
  .rich-text p,
  .rich-text li {
    font-size: 16px !important
  }

  .topbar-message,
  .topbar-links,
  .topbar-links a,
  .topbar-location {
    font-size: 12px !important
  }

  .brand-image-wrap {
    min-width: 112px;
    padding: 7px 10px
  }

  .brand img {
    max-width: 160px !important
  }

  .hero-v9-eyebrow {
    font-size: 10.5px !important
  }

  .hero-v9-content>p {
    font-size: 16px !important
  }

  .home-service-v9-body p,
  .process-card p,
  .blog-body p {
    font-size: 15px !important
  }

  .section-heading>p,
  .center-heading>p {
    font-size: 16px !important
  }
}

/* =========================================================
   Frontend Refresh V12 — Forest Teal + Terracotta + Warm Sand
   Transparent navigation, redesigned inner pages & headings
   ========================================================= */
:root {
  --v12-ink: #172522;
  --v12-ink-2: #233631;
  --v12-forest: #1f766b;
  --v12-forest-dark: #15584f;
  --v12-forest-soft: #dceae5;
  --v12-coral: #e76f51;
  --v12-coral-dark: #c9553b;
  --v12-coral-soft: #fae4dd;
  --v12-sand: #f3eee5;
  --v12-sand-2: #ebe3d7;
  --v12-cream: #fffaf3;
  --v12-white: #fffdf9;
  --v12-sage: #d5e2d9;
  --v12-text: #1e2b28;
  --v12-muted: #65746f;
  --v12-line: rgba(23, 37, 34, .12);
  --v12-shadow: 0 24px 70px rgba(26, 45, 40, .11);
  --fresh-primary: var(--v12-forest);
  --fresh-primary-dark: var(--v12-forest-dark);
  --fresh-accent: var(--v12-coral);
  --fresh-accent-dark: var(--v12-coral-dark);
  --fresh-night: var(--v12-ink);
  --fresh-night-2: var(--v12-ink-2);
  --fresh-bg: var(--v12-sand);
  --fresh-surface: var(--v12-white);
  --fresh-soft: var(--v12-forest-soft);
  --fresh-mint-soft: var(--v12-forest-soft);
  --fresh-warm: var(--v12-cream);
  --fresh-text: var(--v12-text);
  --fresh-muted: var(--v12-muted);
  --fresh-line: var(--v12-line);
  --fresh-shadow: var(--v12-shadow);
  --theme-primary: var(--v12-forest);
  --theme-primary-dark: var(--v12-forest-dark);
  --theme-primary-soft: var(--v12-forest-soft);
  --theme-dark: var(--v12-ink);
  --theme-dark-2: var(--v12-ink-2);
  --theme-bg: var(--v12-sand);
  --theme-surface: var(--v12-white);
  --theme-text: var(--v12-text);
  --theme-muted: var(--v12-muted);
  --theme-line: var(--v12-line);
  --theme-shadow: var(--v12-shadow);
  --paper: var(--v12-sand);
  --surface: var(--v12-white);
  --surface-2: var(--v12-forest-soft);
  --text: var(--v12-text);
  --muted: var(--v12-muted);
  --night: var(--v12-ink);
  --night-2: var(--v12-ink-2);
}

html,
body {
  background: var(--v12-sand) !important;
  color: var(--v12-text) !important
}

body {
  font-size: 16.5px !important;
  line-height: 1.8
}

p,
li,
.rich-text p,
.rich-text li {
  color: var(--v12-muted) !important;
  font-size: 16.5px !important;
  line-height: 1.86 !important
}

h1,
h2,
h3,
h4 {
  color: var(--v12-text) !important
}

::selection {
  background: var(--v12-coral) !important;
  color: #fff !important
}

/* top bar + transparent navbar */
.top-bar {
  background: var(--v12-ink) !important;
  color: #f3eee5 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important
}

.top-bar-inner {
  min-height: 42px !important
}

.topbar-message,
.topbar-links,
.topbar-links a,
.topbar-location {
  color: #e8e3da !important;
  font-size: 12.5px !important;
  font-weight: 650 !important
}

.topbar-links i,
.topbar-message i {
  color: #ef9b82 !important
}

.topbar-message .live-dot {
  background: #7fd7c6 !important;
  box-shadow: 0 0 0 5px rgba(127, 215, 198, .14) !important
}

.site-header {
  padding: 0 !important;
  background: rgba(243, 238, 229, .88) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(23, 37, 34, .09) !important;
  backdrop-filter: blur(18px) !important
}

.site-header>.container {
  padding-top: 0 !important;
  padding-bottom: 0 !important
}

.header-inner {
  min-height: 82px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important
}

.brand {
  min-width: 205px !important
}

.brand-image-wrap {
  min-height: auto !important;
  min-width: 145px !important;
  max-width: 230px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important
}

.brand img {
  max-height: 65px !important;
  max-width: 270px !important
}

.brand-mark {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: var(--v12-forest) !important;
  box-shadow: none !important
}

.brand-copy b {
  color: var(--v12-ink) !important;
  font-size: 19px !important
}

.brand-copy small {
  color: #7a8984 !important;
  font-size: 10px !important
}

.nav-divider {
  height: 30px !important;
  margin: 0 18px !important;
  background: rgba(23, 37, 34, .12) !important
}

.main-nav {
  gap: 4px !important;
  font-size: 16px !important;
  font-weight: 700 !important
}

.main-nav>a {
  padding: 10px !important;
  color: #fff !important;
  border-radius: 0 !important;
  letter-spacing: 0 !important
}

.main-nav>a:not(.nav-cta):after {
  left: 11px !important;
  right: 11px !important;
  bottom: 18px !important;
  height: 3px !important;
  background: var(--v12-coral) !important
}

.main-nav>a:not(.nav-cta):hover,
.main-nav>a.active:not(.nav-cta) {
  background: transparent !important;
  color: var(--v12-forest) !important
}

.main-nav>a.active:not(.nav-cta) {
  box-shadow: none !important
}

.main-nav>a.active:not(.nav-cta):before {
  display: none !important
}

.nav-cta {
  min-height: 46px !important;
  margin-left: 12px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: var(--v12-forest) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(31, 118, 107, .20) !important
}

.nav-cta:hover {
  background: var(--v12-forest-dark) !important;
  transform: translateY(-2px) !important
}

.nav-cta i {
  background: transparent !important;
  color: #fff !important
}

.nav-toggle {
  background: var(--v12-forest) !important;
  color: #fff !important
}

/* hero palette remains full-width but visually integrated */
.hero-section.hero-v9 {
  background-color: var(--v12-ink) !important;
  background-image: linear-gradient(90deg, rgba(23, 37, 34, .96) 0%, rgba(23, 37, 34, .89) 44%, rgba(23, 37, 34, .62) 75%, rgba(23, 37, 34, .45) 100%), var(--hero-bg, url('placeholder.svg')) !important
}

.hero-v9-overlay {
  background: radial-gradient(circle at 82% 35%, rgba(231, 111, 81, .20), transparent 31%), linear-gradient(180deg, transparent 72%, rgba(23, 37, 34, .38)) !important
}

.hero-v9-eyebrow {
  border-color: rgba(231, 111, 81, .30) !important;
  background: rgba(231, 111, 81, .10) !important;
  color: #ffd8cc !important
}

.hero-v9-eyebrow i {
  color: #f59a81 !important
}

.hero-v9-title {
  color: #fffaf3 !important
}

.hero-v9-content>p {
  color: #c9d2ce !important
}

.hero-v9-primary {
  background: var(--v12-coral) !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(231, 111, 81, .23) !important
}

.hero-v9-primary:hover {
  background: #fffaf3 !important;
  color: var(--v12-ink) !important
}

.hero-v9-secondary {
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important
}

.hero-v9-meta {
  color: #b4c1bc !important
}

.hero-v9-meta i {
  background: #7fd7c6 !important
}

/* global title system */
.eyebrow {
  position: relative;
  gap: 10px !important;
  margin-bottom: 16px !important;
  color: #e76f51 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 1.45px !important
}

.eyebrow:before {
  content: "";
  width: 28px;
  height: 2px;
  display: inline-block;
  border-radius: 99px;
  background: var(--v12-coral)
}

.section-heading,
.home-services-v9-heading,
.ranking-showcase-heading {
  position: relative;
  margin-bottom: 52px !important;
  padding-top: 18px;
  border-top: 1px solid var(--v12-line)
}

.section-heading:before,
.home-services-v9-heading:before,
.ranking-showcase-heading:before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 96px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--v12-forest), var(--v12-coral))
}

.section-heading h2,
.center-heading h2,
.faq-grid h2,
.home-services-v9-heading h2,
.ranking-showcase-heading h2 {
  font-size: clamp(38px, 4.2vw, 60px) !important;
  letter-spacing: -.045em !important;
  line-height: 1.08 !important;
}

.section-heading>p,
.home-services-v9-heading>p,
.ranking-showcase-heading>p,
.center-heading>p,
.faq-intro p {
  color: var(--v12-muted) !important;
  font-size: 16px !important;
  line-height: 1.8 !important
}

.center-heading {
  position: relative;
  max-width: 910px !important;
  margin-bottom: 56px !important;
  padding: 26px 28px 0 !important;
  text-align: left !important;
  border-top: 1px solid var(--v12-line)
}

.center-heading:before {
  content: "";
  position: absolute;
  left: 28px;
  top: -2px;
  width: 82px;
  height: 4px;
  border-radius: 99px;
  background: var(--v12-coral)
}

.center-heading .eyebrow {
  justify-content: flex-start
}

/* section backgrounds */
.about-section {
  background: var(--v12-cream) !important
}

.home-services-v9 {
  background: var(--v12-sand) !important
}

.home-projects {
  background: var(--v12-white) !important
}

.process-section {
  background: #d8d5cd !important;
}

.blog-section {
  background: #dddbd2 !important;
}

.faq-section {
  background: var(--v12-cream) !important;
}

.stats-section,
.ranking-showcase-section,
.soft-section {
  background: #172522 !important;
}

.soft-section .section-heading {
  border-top-color: rgba(255, 255, 255, .13) !important
}

.soft-section .section-heading h2,
.soft-section .eyebrow {
  color: #fff !important
}

.soft-section .section-heading>p {
  color: #1e2b28 !important
}

.soft-section .eyebrow:before {
  background: #e9967d !important
}

/* home service cards refresh */
.home-services-v9:before {
  display: none !important
}
 

.home-service-v9-card {
  position: relative;
  border: 0 !important;
  border-radius: 26px !important;
  background: var(--v12-white) !important;
  box-shadow: 0 18px 52px rgba(33, 55, 49, .09) !important
}

.home-service-v9-card:nth-child(3n+2) {
  transform: translateY(24px)
}

.home-service-v9-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 32px 80px rgba(33, 55, 49, .16) !important
}

.home-service-v9-card:nth-child(3n+2):hover {
  transform: translateY(16px) !important
}

.home-service-v9-media {
  height: 250px !important;
  background: var(--v12-ink) !important
}

.home-service-v9-media:after {
  background: linear-gradient(180deg, transparent 38%, rgba(23, 37, 34, .48)) !important
}

.home-service-v9-placeholder {
  background: radial-gradient(circle at 78% 20%, rgba(231, 111, 81, .32), transparent 35%), linear-gradient(135deg, var(--v12-ink), var(--v12-forest-dark)) !important
}

.home-service-v9-body {
  padding: 30px 30px 32px !important
}

.home-service-v9-label {
  margin-bottom: 18px !important;
  color: var(--v12-coral) !important;
  font-size: 11px !important
}

.home-service-v9-label i {
  background: var(--v12-forest-soft) !important;
  color: var(--v12-forest) !important
}

.home-service-v9-body h3 {
  font-size: 26px !important
}

.home-service-v9-body p {
  color: var(--v12-muted) !important;
  font-size: 15.5px !important
}

.home-service-v9-link {
  color: var(--v12-forest) !important;
  font-size: 13px !important
}

.btn-main {
  background: var(--v12-forest) !important;
  box-shadow: 0 14px 30px rgba(31, 118, 107, .22) !important
}

.btn-main:hover {
  background: var(--v12-forest-dark) !important
}

.btn-outline-custom {
  border-color: rgba(31, 118, 107, .32) !important;
  color: var(--v12-forest) !important
}

.btn-outline-custom:hover {
  background: var(--v12-forest) !important;
  border-color: var(--v12-forest) !important
}

.text-link {
  color: #000 !important
}

/* services listing — editorial catalogue */
.services-page-hero {
  padding: 112px 0 92px !important;
  background: var(--v12-ink) !important;
  color:#fff !important;
  border-bottom: 1px solid var(--v12-line)
}

.services-page-hero:before {
  inset: auto 0 0 !important;
  height: 7px !important;
  background: linear-gradient(90deg, var(--v12-forest) 0 58%, var(--v12-coral) 58% 75%, var(--v12-sand-2) 75%) !important;
  mask-image: none !important
}

.services-page-hero:after {
  width: 390px !important;
  height: 390px !important;
  right: 7% !important;
  top: -205px !important;
  border-color: rgba(31, 118, 107, .12) !important;
  box-shadow: 0 0 0 72px rgba(31, 118, 107, .025) !important
}

.services-hero-grid {
  grid-template-columns: 1fr;
  gap: 90px !important;
  align-items: center !important
}

.services-page-hero h1 {
  max-width: 100% !important;
  color: #fff !important;
  font-size: clamp(48px, 5.5vw, 76px) !important;
  letter-spacing: -.055em !important
}

.services-page-hero p {
  max-width: 740px !important;
  color: #b9c6c1 !important;
  font-size: 17px !important;
  line-height: 1.8 !important
}

.services-page-hero .eyebrow {
  color: #f2a18a !important
}

.services-hero-stat {
  width: 160px !important;
  height: 160px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--v12-forest) !important;
  box-shadow: 0 22px 50px rgba(31, 118, 107, .18) !important
}

.services-hero-stat strong {
  color: #fff !important;
  font-size: 58px !important
}

.services-hero-stat span {
  color: #d6ebe6 !important;
  font-size: 9px !important
}

.services-hero-stat i {
  color: #fff !important
}

.services-catalogue {
  background: var(--v12-sand) !important
}

.catalogue-intro {
  padding: 0 0 28px !important;
  border-bottom: 1px solid var(--v12-line) !important
}

.catalogue-intro span {
  color: var(--v12-coral) !important;
  font-size: 12px !important
}

.catalogue-intro p {
  font-size: 15.5px !important
}

.service-showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important
}

.service-showcase-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 24px;
  overflow: hidden;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--v12-white) !important;
  box-shadow: 0 16px 46px rgba(33, 55, 49, .08) !important;
  transition: .3s
}

.service-showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(33, 55, 49, .14) !important
}

.service-showcase-top {
  grid-row: 1/3;
  width: 88px;
  height: 100%;
  min-height: 220px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 0 !important;
  border-radius: 20px;
  background: var(--v12-forest-soft) !important
}

.service-showcase-top span {
  color: var(--v12-forest) !important;
  font-size: 12px !important
}

.service-showcase-top i {
  width: 52px !important;
  height: 52px !important;
  background: var(--v12-forest) !important;
  color: #fff !important;
  border-radius: 16px !important
}

.service-showcase-image {
  grid-column: 2;
  grid-row: 1;
  display: block;
   
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: 18px
}
 

.service-showcase-body {
  grid-column: 2;
  grid-row: 2;
  padding: 0 !important
}

.service-showcase-body h2 {
  margin: 0 0 13px !important;
  font-size: 28px !important
}

.service-showcase-body p {
  margin-bottom: 20px !important;
  font-size: 15px !important
}

.service-showcase-body>a {
  color: var(--v12-forest) !important;
  font-size: 13px !important
}

.service-bottom-cta {
  background: var(--v12-forest) !important
}

.service-bottom-cta h2 {
  color: #fff !important;
}

.service-bottom-cta span {
  color: #cfe8e3 !important;
}

.service-bottom-cta .btn-light-custom {
  background: #fffaf3 !important;
  color: var(--v12-ink) !important;
}

/* service detail — split editorial header + clean reading canvas */
.service-detail-hero {
  padding: 58px 0 92px !important;
  background: var(--v12-ink) !important;
}

.service-detail-hero:after {
  width: 430px !important;
  height: 430px !important;
  right: -180px !important;
  top: -220px !important;
  border-color: rgba(231, 111, 81, .14) !important;
  box-shadow: 0 0 0 78px rgba(231, 111, 81, .025) !important
}

.detail-breadcrumb {
  margin-bottom: 38px !important;
  color: #e76f51 !important;
  font-size: 11px !important
}

.detail-breadcrumb a:hover {
  color: var(--v12-forest) !important
}

.service-detail-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr) !important;
  gap: 64px !important
}

.service-detail-icon {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 22px !important;
  border-radius: 50% !important;
  background: var(--v12-coral-soft) !important;
  color: var(--v12-coral) !important;
  box-shadow: none !important
}

.service-detail-copy h1 {
  max-width: 790px !important;
  font-size: clamp(46px, 5.1vw, 72px) !important;
  letter-spacing: -.05em !important
}

.service-detail-copy>p {
  max-width: 690px !important;
  color:#e76f51 !important;
  font-size: 17px !important;
  line-height: 1.82 !important
}

.detail-phone {
  color: #fff !important;
  font-size: 13px !important
}

.detail-phone i {
  color: var(--v12-coral) !important
}

.service-detail-visual>img,
.service-visual-placeholder {
  
  border-radius: 30px !important;
  box-shadow: 0 30px 78px rgba(31, 55, 48, .17) !important
}

.service-visual-placeholder {
  background: linear-gradient(150deg, var(--v12-ink), var(--v12-forest-dark)) !important
}

.service-visual-placeholder>i {
  color: #95d8cb !important
}

.service-result-badge {
  left: -26px !important;
  bottom: 26px !important;
  padding: 18px 22px !important;
  border-radius: 18px !important;
  background: var(--v12-coral) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(179, 75, 48, .25) !important
}

.service-result-badge strong {
  color: #fff !important
}

.service-result-badge span {
  color: #ffe4dc !important;
  font-size: 9px !important
}

.service-detail-content {
  background: var(--v12-white) !important
}

.service-content-layout {
  grid-template-columns: minmax(0, 1fr) 355px !important;
  gap: 70px !important
}

.service-article {
  padding: 0 20px 0 0 !important
}

.content-intro-label span {
  color: var(--v12-coral) !important;
  font-size: 11px !important
}

.content-intro-label i {
  background: var(--v12-line) !important
}

.service-article>p:first-of-type {
  color: #354742 !important;
  font-size: 19px !important
}

.consultation-card {
  padding: 32px !important;
  border-radius: 24px !important;
  background: var(--v12-ink) !important;
  box-shadow: 0 24px 60px rgba(23, 37, 34, .18) !important
}

.consultation-card>span {
  color: #f2a18a !important;
  font-size: 10px !important
}

.consultation-card h3 {
  font-size: 28px !important;
      color: #fff !important;
}

.consultation-card p {
  color: #b9c6c1 !important;
  font-size: 14px !important
}

.consultation-card .btn-main {
  background: var(--v12-coral) !important
}

.consultation-card .btn-main:hover {
  background: var(--v12-coral-dark) !important
}

.sidebar-call {
  border-color: rgba(255, 255, 255, .12) !important
}

.sidebar-call>i {
  color: #8bd4c5 !important
}

.sidebar-call small {
  color: #839891 !important
}

.sidebar-call b {
  font-size: 13px !important
}

.other-services {
  padding: 24px !important;
  border-color: var(--v12-line) !important;
  background: var(--v12-sand) !important
}

.other-services h4 {
  font-size: 15px !important
}

.other-services a {
  color: #4f625c !important;
  font-size: 12px !important
}

.other-services a>i {
  color: var(--v12-coral) !important
}

.other-services a:hover {
  color: var(--v12-forest) !important
}

/* projects detail — case-study magazine */
.project-detail-hero {
  padding: 70px 0 118px !important;
  background: var(--v12-ink) !important
}

.project-detail-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(231, 111, 81, .20), transparent 28%), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: auto, 72px 72px !important;
  opacity: 1 !important
}

.project-detail-top {
  position: relative;
  z-index: 1;
  margin-bottom: 54px !important
}

.project-detail-top>div>a,
.project-detail-top>div>span {
  font-size: 11px !important
}

.project-detail-top>div>a {
  color: #d8e2dd !important
}

.project-detail-top>div>span {
  color: #f3a087 !important
}

.project-detail-heading {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) 420px !important;
  gap: 80px !important;
  align-items: end !important
}

.project-detail-heading h1 {
  color: #fffaf3 !important;
  font-size: clamp(52px, 6vw, 84px) !important;
  letter-spacing: -.058em !important
}

.project-detail-heading>div:first-child>p {
  max-width: 760px !important;
  color: #b9c6c1 !important;
  font-size: 17px !important;
  line-height: 1.8 !important
}

.project-detail-facts {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .05) !important;
  backdrop-filter: blur(12px)
}

.project-detail-facts>div {
  padding: 18px 20px !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important
}

.project-detail-facts>div:last-child {
  border-bottom: 0 !important
}

.project-detail-facts small {
  color: #879b94 !important;
  font-size: 9px !important
}

.project-detail-facts b {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.5 !important
}

.project-detail-cover {
  position: relative;
  z-index: 2;
  margin-top: -64px !important
}

.project-detail-cover img {
  width: 100%;
  max-height: 690px;
  object-fit: cover;
  border: 10px solid var(--v12-sand) !important;
  border-radius: 30px !important;
  box-shadow: 0 30px 80px rgba(23, 37, 34, .18) !important
}

.project-detail-body {
  padding-top: 82px !important;
  background: var(--v12-sand) !important
}

.project-detail-layout {
  grid-template-columns: minmax(0, 800px) 330px !important;
  justify-content: center;
  gap: 65px !important
}

.project-story {
  padding: 50px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: var(--v12-white) !important;
  box-shadow: var(--v12-shadow) !important
}

.project-story h2 {
  padding-top: 18px;
  border-top: 1px solid var(--v12-line)
}

.project-enquiry {
  position: sticky !important;
  top: 115px !important;
  padding: 30px !important;
  border-radius: 24px !important;
  background: var(--v12-forest) !important;
  color: #d8ede8 !important;
  box-shadow: 0 24px 60px rgba(31, 118, 107, .18) !important
}

.project-enquiry>span {
  color: #ffe0d7 !important;
  font-size: 10px !important
}

.project-enquiry h2 {
  color: #fff !important;
  font-size: 32px !important
}

.project-enquiry p {
  color: #d2e7e2 !important;
  font-size: 14px !important
}

.project-enquiry .btn-main {
  background: var(--v12-coral) !important
}

.project-enquiry>a:last-child {
  color: #fff !important;
  font-size: 13px !important
}

.related-projects {
  padding: 100px 0 !important;
  background: var(--v12-cream) !important
}

.related-project-grid>a {
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--v12-white) !important;
  box-shadow: 0 16px 45px rgba(31, 55, 48, .08) !important
}

.related-project-grid>a span {
  color: var(--v12-coral) !important
}

.related-project-grid>a h3 {
  font-size: 23px !important
}

/* blog detail — clean magazine layout */
.blog-detail-hero {
  padding: 78px 0 132px !important;
  background: #172522 !important;
  color: var(--v12-text) !important;
  border-bottom: 1px solid var(--v12-line)
}

.blog-detail-hero:after {
  content: "JOURNAL" !important;
  right: 4% !important;
  bottom: -36px !important;
  color: rgba(31, 118, 107, .055) !important;
  font-size: 150px !important
}

.blog-detail-head {
  max-width: 1020px !important;
  text-align: left !important
}

.blog-detail-head .detail-breadcrumb {
  justify-content: flex-start !important;
  color: #73817d !important
}

.blog-detail-head .detail-breadcrumb.light {
  color: #73817d !important
}

.blog-detail-head .detail-breadcrumb a:hover {
  color: var(--v12-forest) !important
}

.article-category {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--v12-coral-soft) !important;
  color: var(--v12-coral-dark) !important;
  font-size: 10px !important
}

.blog-detail-head h1 {
  max-width: 980px !important;
  margin: 22px 0 28px !important;
  color: #fff !important;
  font-size: clamp(48px, 5.6vw, 78px) !important;
  letter-spacing: -.055em !important
}

.article-byline {
  justify-content: flex-start !important;
  color: #72817c !important
}

.author-avatar {
  border-radius: 50% !important;
  background: var(--v12-forest) !important;
  color: #fff !important
}

.article-byline>span {
  background: var(--v12-line) !important
}

.article-byline small {
  font-size: 9px !important
}

.article-byline b {
  color: #334641 !important;
  font-size: 11px !important
}

.article-cover-wrap {
  margin-top: -78px !important
}

.article-cover-wide {
  
  border: 10px solid var(--v12-sand) !important;
  border-radius: 30px !important;
  box-shadow: 0 28px 76px rgba(31, 55, 48, .16) !important
}

.blog-article-section {
  padding-top: 82px !important;
  background: var(--v12-sand) !important
}

.blog-article-layout {
  grid-template-columns: 60px minmax(0, 780px) 290px !important;
  gap: 38px !important
}

.article-share {
  top: 115px !important
}

.article-share span {
  color: #879690 !important;
  font-size: 9px !important
}

.article-share a {
  border-color: var(--v12-line) !important;
  background: var(--v12-white) !important;
  color: var(--v12-forest) !important
}

.article-share a:hover {
  background: var(--v12-forest) !important;
  color: #fff !important
}

.editorial-article {
  padding: 48px 52px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: var(--v12-white) !important;
  box-shadow: var(--v12-shadow) !important
}

.editorial-article>p:first-of-type {
  font-size: 19px !important;
  line-height: 1.9 !important;
  color: #40514c !important
}

.editorial-article h2 {
  margin-top: 42px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--v12-line) !important
}

.editorial-article a {
  color: var(--v12-forest) !important
}

.article-end span {
  color: var(--v12-coral) !important
}

.article-author-card {
  padding: 28px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--v12-ink) !important;
  box-shadow: 0 22px 60px rgba(23, 37, 34, .16) !important
}

.author-card-monogram {
  background: var(--v12-coral) !important;
  color: #fff !important
}

.article-author-card>span {
  color: #f2a18a !important
}

.article-author-card h3 {
  color: #fff !important
}

.article-author-card p {
  color: #b7c4bf !important;
  font-size: 14px !important
}

.article-author-card>a {
  color: #93d9cc !important
}

.article-views {
  color: #879b94 !important
}

.related-articles {
  background: var(--v12-cream) !important
}

.related-grid article {
  border-radius: 22px !important;
  background: var(--v12-white) !important;
  box-shadow: 0 15px 44px rgba(31, 55, 48, .08) !important
}

.related-grid span {
  color: var(--v12-coral) !important
}

.related-grid b {
  color: var(--v12-forest) !important
}

/* generic blog / project / contact surfaces */
.page-hero,
.projects-hero,
.about-page-hero {
  background: var(--v12-ink) !important
}

.page-hero h1,
.projects-hero h1,
.about-page-hero h1 {
  color: #fffaf3 !important
}

.page-hero p,
.projects-hero p,
.about-page-hero p {
  color: #b9c6c1 !important
}

.page-hero .eyebrow,
.projects-hero .eyebrow,
.about-page-hero .eyebrow {
  color: #f2a18a !important
}

.page-hero .eyebrow:before,
.projects-hero .eyebrow:before,
.about-page-hero .eyebrow:before {
  background: #7fd7c6 !important
}

.blog-card,
.home-project-card,
.project-card,
.process-card {
  border: 0 !important;
  background: var(--v12-white) !important;
  box-shadow: 0 16px 48px rgba(31, 55, 48, .08) !important
}

.blog-card:hover,
.home-project-card:hover,
.project-card:hover {
  box-shadow: 0 28px 70px rgba(31, 55, 48, .14) !important
}

.blog-body>span,
.project-meta span {
  color: var(--v12-coral) !important
}

.blog-body>a,
.home-project-card>div>a,
.project-link {
  color: var(--v12-forest) !important
}

.ranking-card-accent,
.ranking-showcase-card:nth-child(3n+2) .ranking-card-accent,
.ranking-showcase-card:nth-child(3n+3) .ranking-card-accent {
  background: linear-gradient(90deg, var(--v12-coral), #f0b49e) !important
}

.ranking-keyword-rank b,
.ranking-showcase-card:nth-child(3n+2) .ranking-keyword-rank b,
.ranking-showcase-card:nth-child(3n+3) .ranking-keyword-rank b {
  background: #dff0eb !important;
  color: var(--v12-forest-dark) !important
}

.ranking-showcase-heading {
  border-top-color: rgba(255, 255, 255, .12) !important
}

.ranking-showcase-heading:before {
  background: linear-gradient(90deg, #7fd7c6, var(--v12-coral)) !important
}

.ranking-showcase-heading h2 {
  color: #fff !important
}

.ranking-showcase-heading .eyebrow {
  color: #f2a18a !important
}

.ranking-showcase-heading>p,
.ranking-showcase-disclaimer {
  color: #b8c5c0 !important
}

/* footer */
.site-footer {
  background: var(--v12-ink) !important
}

.footer-top-line {
  border-color: rgba(255, 255, 255, .10) !important
}

.footer-top-line a {
  color: #97dbce !important
}

.site-footer p,
.site-footer a {
  color: #fff !important
}

.site-footer h4 {
  color: #fffaf3 !important
}

.footer-column>a:hover {
  color: #f2a18a !important
}

.footer-column>a:after {
  background: var(--v12-coral) !important
}

.footer-contact>a>i {
  background: rgba(127, 215, 198, .10) !important;
  color: #8fd8ca !important
}

.floating-actions a:first-child {
  background: var(--v12-forest) !important
}

@media(max-width:1199px) {
  .main-nav {
    font-size: 14.5px !important
  }

  .main-nav>a {
    padding: 29px 9px 25px !important
  }

  .nav-divider {
    margin: 0 8px !important
  }

  .brand {
    min-width: 170px !important
  }

  .service-showcase-grid {
    grid-template-columns: 1fr !important
  }

  .project-detail-heading {
    grid-template-columns: 1fr !important
  }

  .project-detail-facts {
    grid-template-columns: repeat(3, 1fr) !important
  }

  .project-detail-facts>div {
    border-right: 1px solid rgba(255, 255, 255, .10) !important;
    border-bottom: 0 !important
  }

  .project-detail-facts>div:last-child {
    border-right: 0 !important
  }

  .blog-article-layout {
    grid-template-columns: 60px minmax(0, 1fr) !important
  }

  .article-author-card {
    grid-column: 2;
    position: static !important
  }
}

@media(max-width:991px) {
  .site-header {
    background: rgba(243, 238, 229, .96) !important
  }

  .header-inner {
    background: transparent !important
  }

  .main-nav {
    top: 82px !important;
    padding: 15px !important;
    border: 1px solid var(--v12-line) !important;
    border-radius: 18px !important;
    background: var(--v12-white) !important;
    box-shadow: 0 20px 55px rgba(23, 37, 34, .16) !important;
    font-size: 16px !important
  }

  .main-nav>a {
    padding: 14px 13px !important;
    color: #30413c !important;
    border-radius: 10px !important
  }

  .main-nav>a:not(.nav-cta):hover,
  .main-nav>a.active:not(.nav-cta) {
    background: var(--v12-forest-soft) !important;
    color: var(--v12-forest) !important
  }

  .main-nav>a:not(.nav-cta):after {
    display: none !important
  }

  .nav-cta {
    margin-left: 0 !important;
    margin-top: 6px !important
  }

  .home-service-v9-card:nth-child(3n+2) {
    transform: none !important
  }

  .home-service-v9-card:nth-child(3n+2):hover {
    transform: translateY(-8px) !important
  }

  .service-detail-grid,
  .service-content-layout,
  .project-detail-layout {
    grid-template-columns: 1fr !important
  }

  .service-detail-visual {
    max-width: 600px
  }

  .service-sidebar,
  .project-enquiry {
    position: static !important
  }

  .project-detail-facts {
    grid-template-columns: 1fr !important
  }

  .project-detail-facts>div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important
  }

  .project-detail-facts>div:last-child {
    border-bottom: 0 !important
  }

  .blog-article-layout {
    grid-template-columns: 1fr !important
  }

  .article-share {
    position: static !important;
    flex-direction: row !important
  }

  .article-author-card {
    grid-column: auto !important
  }
}

@media(max-width:700px) {
  .topbar-links {
    display: none !important
  }

  .site-header>.container {
    padding-left: 16px !important;
    padding-right: 16px !important
  }

  .header-inner {
    min-height: 74px !important
  }

  .main-nav {
    top: 76px !important
  }

  .hero-section.hero-v9 {
    background-image: linear-gradient(90deg, rgba(23, 37, 34, .96), rgba(23, 37, 34, .80)), var(--hero-bg, url('placeholder.svg')) !important
  }

  .section-heading,
  .home-services-v9-heading,
  .ranking-showcase-heading {
    padding-top: 16px !important
  }

  .center-heading {
    padding-left: 0 !important;
    padding-right: 0 !important
  }

  .center-heading:before {
    left: 0 !important
  }

  .service-showcase-card {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 0 17px !important;
    padding: 20px !important
  }

  .service-showcase-top {
    width: 62px !important;
    min-height: 190px !important
  }

  .service-showcase-top i {
    width: 44px !important;
    height: 44px !important
  }

  .service-showcase-image {
    height: 125px !important
  }

  .service-showcase-body h2 {
    font-size: 24px !important
  }

  .services-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important
  }

  .services-hero-stat {
    width: 130px !important;
    height: 130px !important
  }

  .service-detail-grid {
    gap: 42px !important
  }

  .service-result-badge {
    left: 10px !important;
    bottom: 10px !important
  }

  .service-detail-actions {
    align-items: flex-start !important;
    flex-direction: column !important
  }

  .project-detail-hero {
    padding-bottom: 88px !important
  }

  .project-detail-cover {
    margin-top: -44px !important
  }

  .project-story,
  .editorial-article {
    padding: 30px 24px !important
  }

  .blog-detail-hero {
    padding-bottom: 105px !important
  }

  .article-cover-wrap {
    margin-top: -55px !important
  }

  .article-cover-wide {
    height: 58vw !important;
    border-width: 7px !important
  }

  .article-byline {
    align-items: flex-start !important;
    flex-wrap: wrap !important
  }

  .article-byline>span {
    display: none !important
  }

  .article-share span {
    display: none !important
  }
}

/* V12 typography */
body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important
}

h1,
h2,
h3,
h4,
.hero-v9-title,
.footer-brand,
.ranking-card-logo,
.services-hero-stat strong,
.projects-count strong {
  font-family: "Outfit", system-ui, -apple-system, sans-serif !important
}