* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: #f4f6f3;
  color: #101b1a;
  font-family: Manrope, Arial, sans-serif;
  overflow-x: hidden
}

body.ar {
  font-family: "Noto Kufi Arabic", sans-serif
}

.nav {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 86px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  transition: .35s;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .42), transparent)
}

.nav.scrolled {
  height: 72px;
  background: rgba(8, 27, 25, .94);
  backdrop-filter: blur(18px)
}

.brand {
  color: inherit;
  text-decoration: none
}

.brand-mark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .22em
}

.nav nav {
  display: flex;
  gap: 28px
}

.nav a {
  color: inherit;
  text-decoration: none;
  font-size: 13px
}

.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center
}

.lang {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer
}

.pill {
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 11px 17px;
  border-radius: 99px
}

.hero {
  height: 100svh;
  min-height: 720px;
  position: relative;
  color: white;
  display: flex;
  align-items: flex-end;
  padding: 8vh 5vw
}

.hero-media,
.transform-bg,
.legacy-film {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.hero-media video,
.transform-bg img,
.legacy-film video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 20, 18, .78) 0%, rgba(2, 20, 18, .25) 58%, rgba(2, 20, 18, .08)), linear-gradient(0deg, rgba(2, 20, 18, .7), transparent 55%)
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1050px;
  padding-bottom: 7vh
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 700;
  margin-bottom: 22px
}

.eyebrow.dark {
  color: #14796e
}

.hero h1,
.split-copy h2,
.transform h2,
.intelligence h2,
.experience h2,
.cap-head h2,
.contact h2 {
  font-size: clamp(58px, 8vw, 132px);
  line-height: .88;
  letter-spacing: -.065em;
  margin: 0;
  font-weight: 600
}

.hero h1 em,
.split-copy h2 em,
.transform h2 em,
.intelligence h2 em,
.experience h2 em,
.cap-head h2 em,
.contact h2 em {
  font-weight: 400;
  font-style: italic;
  color: #7de5d5
}

.hero p {
  max-width: 760px;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.5;
  color: #e9f1ef
}

.hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px
}

.cta {
  padding: 15px 22px;
  border-radius: 99px;
  text-decoration: none;
  font-size: 14px
}

.solid {
  background: #70dfce;
  color: #08221f
}

.glass {
  border: 1px solid rgba(255, 255, 255, .4);
  color: white;
  backdrop-filter: blur(10px)
}

.scroll-hint {
  position: absolute;
  right: 4vw;
  bottom: 5vh;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  letter-spacing: .2em
}

.scroll-hint span {
  width: 38px;
  height: 1px;
  background: #fff
}

.statement {
  padding: 16vh 6vw;
  background: #0b2522;
  color: white
}

.statement-inner {
  max-width: 1400px;
  margin: auto
}

.kicker {
  color: #6fd9c8;
  font-size: 12px;
  letter-spacing: .18em;
  margin-bottom: 30px
}

.statement h2 {
  font-size: clamp(38px, 6vw, 90px);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0
}

.statement em {
  color: #77e1d0;
  font-weight: 400
}

.split-section {
  min-height: 950px;
  display: grid;
  grid-template-columns: 1.05fr .95fr
}

.split-media {
  position: relative;
  min-height: 700px
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.media-label {
  position: absolute;
  left: 28px;
  bottom: 28px;
  background: #0b2522;
  color: white;
  padding: 12px 15px;
  font-size: 11px;
  letter-spacing: .15em
}

.split-copy {
  padding: 10vw 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.split-copy h2 {
  font-size: clamp(54px, 6vw, 104px)
}

.split-copy h2 em {
  color: #158e81
}

.lead {
  font-size: 22px;
  line-height: 1.5
}

.split-copy p {
  max-width: 680px;
  color: #43514f;
  line-height: 1.8
}

.path {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 18px;
  align-items: center
}

.path span {
  border: 1px solid #b9cbc7;
  border-radius: 99px;
  padding: 8px 12px;
  font-size: 11px
}

.path i {
  color: #168b7f
}

.text-link {
  color: #0c6e64;
  font-weight: 700;
  margin-top: 18px;
  text-decoration: none
}

.transform {
  position: relative;
  min-height: 1000px;
  color: white;
  display: flex;
  align-items: center;
  padding: 10vw 6vw
}

.transform-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 19, 17, .9), rgba(2, 19, 17, .3))
}

.transform-content {
  position: relative;
  z-index: 2;
  max-width: 920px
}

.transform h2 {
  font-size: clamp(62px, 8vw, 128px)
}

.transform p {
  font-size: 20px;
  line-height: 1.7;
  max-width: 760px
}

.transform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 45px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  border-left: 1px solid rgba(255, 255, 255, .3)
}

.transform-grid div {
  padding: 24px;
  border-right: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  display: flex;
  flex-direction: column;
  gap: 20px
}

.transform-grid b {
  color: #70dfce;
  font-size: 11px
}

.intelligence {
  min-height: 1000px;
  position: relative;
  padding: 12vw 6vw;
  overflow: hidden;
  background: #eef4f1
}

.intelligence-copy {
  position: relative;
  z-index: 3;
  max-width: 900px
}

.intelligence h2 {
  font-size: clamp(54px, 7vw, 112px)
}

.intelligence h2 em {
  color: #158e81
}

.intelligence p {
  max-width: 760px;
  font-size: 19px;
  line-height: 1.8;
  color: #41514e
}

.orbit {
  position: absolute;
  right: 10vw;
  bottom: 8vw;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(20, 121, 110, .22);
  border-radius: 50%;
  animation: spin 35s linear infinite
}

.core {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: #0b2522;
  color: white;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 0 80px rgba(20, 150, 130, .22)
}

.core small {
  font-size: 8px;
  color: #70dfce
}

.orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  transform: rotate(var(--a)) translateX(210px) rotate(calc(-1 * var(--a)));
  transform-origin: 0 0
}

#network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .4
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.experience {
  padding: 12vw 6vw;
  background: #fff
}

.experience-head {
  max-width: 1200px
}

.experience h2 {
  font-size: clamp(50px, 7vw, 110px)
}

.experience h2 em {
  color: #158e81
}

.stats {
  margin-top: 9vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #cbd7d4;
  border-left: 1px solid #cbd7d4
}

.stat {
  min-height: 260px;
  padding: 35px;
  border-right: 1px solid #cbd7d4;
  border-bottom: 1px solid #cbd7d4
}

.stat strong {
  font-size: clamp(40px, 6vw, 100px);
  letter-spacing: -.07em
}

.stat sup {
  color: #158e81;
  font-size: 30px
}

.stat span {
  display: block;
  color: #667571
}

.legacy {
  min-height: 1000px;
  position: relative;
  color: white
}

.legacy-film:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 18, 16, .68)
}

.legacy-copy {
  position: relative;
  z-index: 2;
  padding: 12vw 6vw;
  min-height: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.legacy-copy span {
  font-size: 11px;
  letter-spacing: .18em;
  color: #78e2d1
}

.legacy h2 {
  font-size: clamp(38px, 5vw, 78px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.04em
}

.now {
  align-self: flex-end;
  text-align: right
}

.now span {
  font-size: 72px;
  font-weight: 800;
  color: #70dfce
}

.now h3 {
  font-size: 30px
}

.capabilities {
  padding: 12vw 6vw;
  background: #0b2522;
  color: white
}

.cap-head span {
  font-size: 11px;
  letter-spacing: .16em;
  color: #70dfce
}

.cap-head h2 {
  font-size: clamp(50px, 7vw, 110px);
  margin-top: 24px
}

.cap-list {
  margin-top: 8vw
}

.cap-list article {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 30px;
  padding: 35px 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
  align-items: start
}

.cap-list b {
  color: #70dfce
}

.cap-list h3 {
  font-size: 30px;
  margin: 0
}

.cap-list p {
  margin: 0;
  color: #b9c8c5;
  line-height: 1.7
}

.contact {
  padding: 12vw 6vw;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 8vw;
  background: #79dfcf
}

.contact h2 {
  font-size: clamp(54px, 6.5vw, 108px)
}

.contact h2 em {
  color: #0b514a
}

.contact-copy>span {
  font-size: 11px;
  letter-spacing: .16em
}

.contact-copy p {
  font-size: 20px;
  max-width: 500px
}

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

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.contact-form label span {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 800
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(7, 44, 40, .55);
  padding: 13px 0;
  font: inherit;
  color: #0b2522;
  outline: none
}

.wide {
  grid-column: 1/-1
}

.submit {
  grid-column: 1/-1;
  background: #0b2522;
  color: white;
  border: 0;
  padding: 18px 22px;
  border-radius: 99px;
  font-weight: 700;
  cursor: pointer
}

footer {
  background: #071a18;
  color: #b8c9c6;
  padding: 55px 6vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  font-size: 12px;
  line-height: 1.8
}

footer a {
  color: #70dfce
}

.footer-brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .18em;
  color: white
}

.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity .8s ease, transform .8s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.cursor-glow {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 223, 206, .13), transparent 70%);
  transform: translate(-50%, -50%)
}

body.ar {
  direction: rtl
}

.ar .hero-overlay,
.ar .transform-shade {
  transform: scaleX(-1)
}

.ar .media-label {
  left: auto;
  right: 28px
}

.ar .now {
  align-self: flex-start;
  text-align: left
}

.ar .orbit {
  right: auto;
  left: 10vw
}

.ar .cap-list article {
  grid-template-columns: 80px 1fr 1fr
}

@media(max-width:900px) {
  .nav nav {
    display: none
  }

  .nav {
    padding: 0 20px
  }

  .pill {
    display: none
  }

  .hero {
    padding: 90px 22px 50px
  }

  .hero-content {
    padding-bottom: 2vh
  }

  .hero h1 {
    font-size: 62px
  }

  .split-section {
    grid-template-columns: 1fr
  }

  .split-media {
    min-height: 520px
  }

  .split-copy {
    padding: 90px 24px
  }

  .transform {
    padding: 100px 24px
  }

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

  .intelligence {
    padding: 100px 24px 500px
  }

  .orbit {
    width: 300px;
    height: 300px;
    right: 50%;
    transform: translateX(50%);
    bottom: 100px
  }

  .orbit span {
    transform: rotate(var(--a)) translateX(150px) rotate(calc(-1 * var(--a)))
  }

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

  .stat {
    min-height: 190px;
    padding: 24px
  }

  .capabilities,
  .experience,
  .statement {
    padding: 100px 24px
  }

  .cap-list article {
    grid-template-columns: 40px 1fr
  }

  .cap-list p {
    grid-column: 2
  }

  .contact {
    grid-template-columns: 1fr;
    padding: 100px 24px
  }

  .contact-form {
    grid-template-columns: 1fr
  }

  .wide,
  .submit {
    grid-column: auto
  }

  footer {
    grid-template-columns: 1fr
  }

  .cursor-glow {
    display: none
  }
}

/* === APPJAD REBIRTH DNA: production/multipage extensions === */
.lang {
  display: inline-flex;
  align-items: center;
  text-decoration: none
}

.menu-btn {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 24px;
  cursor: pointer
}

.mobile-menu {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: #071a18;
  color: #fff;
  padding: 80px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform: translateX(100%);
  transition: .35s ease
}

.ar .mobile-menu {
  transform: translateX(-100%)
}

.mobile-menu.open {
  transform: none
}

.mobile-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 24px
}

.menu-close {
  position: absolute;
  top: 18px;
  right: 24px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 40px;
  cursor: pointer
}

.ar .menu-close {
  right: auto;
  left: 24px
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.02)
}

.hero-data {
  position: absolute;
  right: 5vw;
  top: 23vh;
  z-index: 1;
  display: grid;
  gap: 8px;
  opacity: .75
}

.ar .hero-data {
  right: auto;
  left: 5vw
}

.hero-data span {
  font-size: 9px;
  letter-spacing: .18em;
  color: #dff8f3;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(4, 30, 26, .22);
  backdrop-filter: blur(8px);
  padding: 8px 11px;
  border-radius: 99px
}

.ghost-link {
  display: inline-block;
  margin-top: 28px;
  color: #86e7d8;
  text-decoration: none;
  font-weight: 700
}

.legacy-film img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.page-hero {
  position: relative;
  min-height: 82svh;
  color: #fff;
  overflow: hidden;
  background: #0b2522
}

.page-hero-media {
  position: absolute;
  inset: 0
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 20, 18, .9), rgba(2, 20, 18, .32) 60%, rgba(2, 20, 18, .08)), linear-gradient(0deg, rgba(2, 20, 18, .76), transparent 55%)
}

.ar .page-hero-overlay {
  transform: scaleX(-1)
}

.page-hero-copy {
  position: absolute;
  z-index: 2;
  left: 6vw;
  bottom: 10vh;
  width: min(980px, 84vw)
}

.ar .page-hero-copy {
  left: auto;
  right: 6vw
}

.page-hero h1,
.service-intro h2,
.compact-contact h2 {
  font-size: clamp(56px, 7vw, 116px);
  line-height: .9;
  letter-spacing: -.06em;
  margin: 0;
  font-weight: 600
}

.ar .page-hero h1,
.ar .service-intro h2,
.ar .compact-contact h2 {
  letter-spacing: -.025em;
  line-height: 1.08
}

.page-hero h1 em,
.service-intro h2 em,
.compact-contact h2 em {
  font-weight: 400;
  font-style: italic;
  color: #7de5d5
}

.page-hero-copy>p {
  max-width: 780px;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.7;
  color: #e4efec
}

.breadcrumb {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 10px;
  color: #c3d4d0
}

.breadcrumb a {
  color: #7de5d5;
  text-decoration: none
}

.service-intro {
  padding: 11vw 6vw 7vw;
  background: #f4f6f3;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 7vw;
  align-items: start
}

.service-intro-tag {
  font-size: 11px;
  letter-spacing: .17em;
  color: #14796e;
  font-weight: 800
}

.service-intro h2 {
  font-size: clamp(48px, 6vw, 98px)
}

.service-intro h2 em {
  color: #158e81
}

.service-intro p {
  max-width: 800px;
  font-size: 19px;
  line-height: 1.85;
  color: #485753
}

.service-list {
  padding: 0 6vw 11vw;
  background: #f4f6f3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #cbd7d4;
  border-left: 1px solid #cbd7d4
}

.service-list article {
  min-height: 360px;
  padding: 34px;
  border-right: 1px solid #cbd7d4;
  border-bottom: 1px solid #cbd7d4
}

.service-list b {
  color: #168b7f;
  font-size: 11px
}

.service-list h3 {
  font-size: 29px;
  line-height: 1.15;
  margin: 95px 0 14px
}

.service-list p {
  color: #5b6b67;
  line-height: 1.78
}

.related {
  padding: 10vw 6vw;
  background: #fff
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid #cbd7d4;
  border-left: 1px solid #cbd7d4
}

.related-grid a {
  position: relative;
  min-height: 310px;
  padding: 36px;
  color: #101b1a;
  text-decoration: none;
  border-right: 1px solid #cbd7d4;
  border-bottom: 1px solid #cbd7d4;
  transition: .25s
}

.related-grid a:hover {
  background: #edf5f2
}

.related-grid a>span {
  position: absolute;
  right: 30px;
  top: 26px;
  color: #168b7f;
  font-size: 24px
}

.ar .related-grid a>span {
  right: auto;
  left: 30px
}

.related-grid h3 {
  font-size: 31px;
  margin: 70px 0 12px
}

.related-grid p {
  color: #63736f;
  line-height: 1.75
}

.compact-contact {
  padding-top: 10vw;
  padding-bottom: 10vw
}

.contact-shortcuts {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px
}

.contact-shortcuts a {
  color: #0b514a;
  text-decoration: none;
  font-weight: 700
}

.contact-shortcuts .big-link {
  display: inline-block;
  width: max-content;
  background: #0b2522;
  color: #fff;
  padding: 17px 22px;
  border-radius: 99px;
  margin-bottom: 14px
}

.contact-page {
  min-height: 720px
}

.office-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 30px
}

.office-links a {
  color: #0b514a;
  text-decoration: none;
  font-weight: 700
}

.error-page {
  min-height: 75vh;
  padding: 180px 6vw;
  background: #071a18;
  color: #fff
}

.error-page>span {
  color: #70dfce
}

.error-page h1 {
  font-size: clamp(54px, 7vw, 100px)
}

.error-page a {
  color: #70dfce;
  text-decoration: none;
  font-weight: 700
}

@media(max-width:900px) {
  .menu-btn {
    display: block
  }

  .nav-actions .lang {
    display: none
  }

  .hero-data {
    display: none
  }

  .page-hero {
    min-height: 760px
  }

  .page-hero-copy {
    left: 24px;
    right: 24px;
    width: auto
  }

  .ar .page-hero-copy {
    left: 24px;
    right: 24px
  }

  .service-intro {
    grid-template-columns: 1fr;
    padding: 100px 24px 70px
  }

  .service-list {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px 100px
  }

  .related {
    padding: 100px 24px
  }

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

  .compact-contact {
    padding: 90px 24px
  }
}

@media(max-width:620px) {

  .page-hero h1,
  .service-intro h2,
  .compact-contact h2 {
    font-size: 50px
  }

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

  .service-list article {
    min-height: 290px
  }

  .service-list h3 {
    margin-top: 60px
  }
}

/* Official Appjad logo: keep the supplied SVG geometry untouched. */
.brand {
  display: inline-flex;
  align-items: center
}

.brand-logo {
  display: block;
  width: 154px;
  height: auto;
  padding: 5px 9px;
  border-radius: 7px
}

.footer-brand {
  display: flex;
  align-items: flex-start
}

.footer-logo {
  display: block;
  width: 174px;
  height: auto;
  padding: 7px 11px;
  border-radius: 7px
}


/* === VNext2: Executive Hero + Decision Point === */
.hero-photo {
  object-position: center 46%;
  filter: saturate(.84) contrast(1.04) brightness(.86);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(2, 20, 18, .88) 0%, rgba(2, 20, 18, .46) 47%, rgba(2, 20, 18, .10) 76%),
    linear-gradient(0deg, rgba(2, 20, 18, .76) 0%, rgba(2, 20, 18, .08) 62%);
}

.hero-data {
  top: 20vh;
  gap: 10px;
}

.hero-data span {
  padding: 9px 12px;
  background: rgba(4, 30, 26, .42);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.decision {
  position: relative;
  padding: 11vw 6vw 7vw;
  background: #e9f0ed;
  color: #0c1d1a;
  overflow: hidden;
}

.decision:before {
  content: "";
  position: absolute;
  width: 58vw;
  height: 58vw;
  right: -24vw;
  top: -26vw;
  border-radius: 50%;
  border: 1px solid rgba(14, 114, 103, .14);
  box-shadow:
    0 0 0 8vw rgba(14, 114, 103, .025),
    0 0 0 16vw rgba(14, 114, 103, .018);
  pointer-events: none;
}

.ar .decision:before {
  right: auto;
  left: -24vw
}

.decision-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 7vw;
  align-items: start;
  padding-bottom: 5.5vw;
  border-bottom: 1px solid rgba(12, 29, 26, .18);
}

.decision-kicker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
}

.decision-kicker span {
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 800;
  color: #177e72;
}

.decision-kicker b {
  font-size: 12px;
  letter-spacing: .13em;
  color: #677671;
}

.decision-heading h2 {
  margin: 0;
  max-width: 1000px;
  font-size: clamp(58px, 7.6vw, 124px);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 600;
}

.ar .decision-heading h2 {
  line-height: 1.08;
  letter-spacing: -.025em;
}

.decision-heading h2 em {
  color: #158e81;
  font-style: italic;
  font-weight: 400;
}

.decision-heading>p {
  margin: 28px 0 0;
  max-width: 700px;
  font-size: 20px;
  line-height: 1.75;
  color: #55645f;
}

.decision-paths {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  border-top: 1px solid rgba(12, 29, 26, .2);
  border-left: 1px solid rgba(12, 29, 26, .2);
}

.decision-card {
  position: relative;
  min-height: 420px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: #0c1d1a;
  border-right: 1px solid rgba(12, 29, 26, .2);
  border-bottom: 1px solid rgba(12, 29, 26, .2);
  background: rgba(255, 255, 255, .28);
  transition: transform .28s ease, background .28s ease, color .28s ease;
}

.decision-card:hover {
  transform: translateY(-8px);
  background: #f9fbfa;
  z-index: 3;
  box-shadow: 0 24px 70px rgba(7, 37, 32, .10);
}

.decision-card-dark {
  background: #0b2522;
  color: #fff;
}

.decision-card-dark:hover {
  background: #10342f;
  color: #fff;
}

.decision-no {
  font-size: 11px;
  letter-spacing: .17em;
  color: #168b7f;
  font-weight: 800;
}

.decision-card-dark .decision-no {
  color: #78e2d1
}

.decision-card-copy>span {
  display: block;
  margin-bottom: 11px;
  color: #73817d;
  font-size: 10px;
  letter-spacing: .17em;
  font-weight: 800;
}

.decision-card-dark .decision-card-copy>span {
  color: #9db6b1
}

.decision-card h3 {
  margin: 0 0 18px;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 600;
}

.ar .decision-card h3 {
  letter-spacing: -.02em;
  line-height: 1.18
}

.decision-card p {
  margin: 0;
  max-width: 420px;
  color: #586762;
  line-height: 1.75;
  font-size: 15px;
}

.decision-card-dark p {
  color: #c3d3cf
}

.decision-card>i {
  position: absolute;
  right: 28px;
  top: 27px;
  font-style: normal;
  font-size: 25px;
  color: #168b7f;
}

.ar .decision-card>i {
  right: auto;
  left: 28px
}

.decision-card-dark>i {
  color: #78e2d1
}

.decision-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 42px;
}

.decision-footer>div>span {
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 800;
  color: #177e72;
}

.decision-footer p {
  margin: 12px 0 0;
  max-width: 690px;
  color: #53625d;
  font-size: 16px;
  line-height: 1.75;
}

.decision-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-radius: 99px;
  background: #0b2522;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: .24s ease;
}

.decision-cta:hover {
  transform: translateY(-3px);
  background: #154b43;
}

.decision-cta i {
  font-style: normal
}

@media(max-width:900px) {
  .decision {
    padding: 100px 24px 70px
  }

  .decision-top {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 50px
  }

  .decision-paths {
    grid-template-columns: 1fr
  }

  .decision-card {
    min-height: 310px
  }

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

@media(max-width:620px) {
  .decision-heading h2 {
    font-size: 52px
  }

  .decision-card h3 {
    font-size: 38px
  }

  .decision-card {
    padding: 28px
  }
}

/* Keep hero copy comfortably below the navigation on wide, short screens. */
@media(min-width:901px) {
  .hero-content {
    width: min(1180px, 90vw);
    max-width: none;
    padding-bottom: 4vh
  }

  .hero h1 {
    font-size: clamp(58px, 7.2vw, 116px)
  }

  .hero p {
    max-width: 860px
  }
}

@media(min-width:901px) and (max-height:760px) {
  .hero {
    padding-top: 110px;
    padding-bottom: 34px
  }

  .hero-content {
    padding-bottom: 0
  }

  .hero .eyebrow {
    margin-bottom: 14px
  }

  .hero h1 {
    font-size: clamp(62px, 6.5vw, 94px);
    line-height: .9
  }

  .hero p {
    font-size: 18px;
    line-height: 1.45;
    margin: 18px 0
  }

  .hero-ctas {
    margin-top: 20px
  }

  .page-hero {
    min-height: 680px
  }

  .page-hero-copy {
    bottom: 7vh
  }

  .page-hero h1 {
    font-size: clamp(52px, 6vw, 88px);
    line-height: .94
  }
}

@media(max-width:620px) {
  .page-hero {
    min-height: 100svh
  }

  .page-hero-copy {
    bottom: 7svh
  }

  .page-hero .breadcrumb {
    display: none
  }

  .page-hero-copy>.eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    line-height: 1.7
  }

  .page-hero h1 {
    font-size: clamp(40px, 11vw, 46px);
    line-height: 1.12
  }

  .page-hero-copy>p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0
  }
}

/* Desktop navigation mirrors the complete mobile navigation. */
@media(min-width:1181px) {
  .nav {
    padding-inline: 3vw
  }

  .nav nav {
    gap: clamp(10px, 1vw, 18px)
  }

  .nav nav a {
    font-size: clamp(10.5px, .78vw, 12px);
    white-space: nowrap
  }
}

@media(max-width:1180px) {
  .nav nav {
    display: none
  }

  .menu-btn {
    display: block
  }

  .nav-actions .lang,
  .pill {
    display: none
  }
}

/* Internal-page heroes need more line width and less scale than the homepage. */
@media(min-width:901px) {
  .page-hero-copy {
    width: min(1160px, 88vw);
    bottom: 8vh
  }

  .page-hero h1 {
    font-size: clamp(50px, 4.6vw, 72px);
    line-height: 1
  }

  .ar .page-hero h1 {
    line-height: 1.12
  }

  .page-hero-copy>p {
    max-width: 920px;
    font-size: clamp(17px, 1.25vw, 20px);
    line-height: 1.65
  }
}

@media(min-width:901px) and (max-height:760px) {
  .page-hero-copy {
    bottom: 6vh
  }

  .page-hero h1 {
    font-size: clamp(50px, 5vw, 72px)
  }

  .page-hero-copy>p {
    font-size: 17px
  }
}

/* Stronger final decision point on internal pages. */
.compact-contact {
  align-items: end
}

.compact-contact .contact-copy p {
  max-width: 650px;
  line-height: 1.75
}

.compact-contact .contact-shortcuts {
  align-self: stretch;
  justify-content: center;
  gap: 0;
  padding: clamp(26px, 3.2vw, 48px);
  border: 1px solid rgba(7, 44, 40, .2);
  border-radius: 30px;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 28px 70px rgba(7, 44, 40, .09)
}

.contact-panel-label {
  margin-bottom: 18px;
  color: #0b6158;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em
}

.compact-contact .contact-shortcuts .big-link {
  width: 100%;
  margin: 0 0 32px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 18px
}

.compact-contact .big-link i {
  font-style: normal;
  font-size: 22px;
  transition: transform .2s ease
}

.compact-contact .big-link:hover i {
  transform: translate(3px, -3px)
}

.ar .compact-contact .big-link:hover i {
  transform: translate(-3px, -3px)
}

.contact-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(7, 44, 40, .22)
}

.contact-option {
  padding: 22px 18px 4px;
  text-decoration: none
}

.contact-option+.contact-option {
  border-inline-start: 1px solid rgba(7, 44, 40, .22)
}

.contact-option small {
  display: block;
  margin-bottom: 8px;
  color: #46736d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em
}

.contact-option strong {
  display: block;
  color: #0b2522;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 700;
  white-space: nowrap
}

@media(max-width:620px) {
  .compact-contact .contact-shortcuts {
    padding: 24px;
    border-radius: 22px
  }

  .contact-options {
    grid-template-columns: 1fr
  }

  .contact-option {
    padding: 18px 4px
  }

  .contact-option+.contact-option {
    border-inline-start: 0;
    border-top: 1px solid rgba(7, 44, 40, .18)
  }
}

/* Dark executive treatment keeps the highlighted closing line fully legible. */
.compact-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  background: #071f1d;
  color: #fff;
}

.compact-contact:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 52vw;
  aspect-ratio: 1;
  inset-inline-end: -22vw;
  top: -30vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 223, 206, .18), rgba(112, 223, 206, 0) 68%);
}

.compact-contact .contact-copy>span {
  color: #70dfce
}

.compact-contact .contact-copy h2 {
  font-size: clamp(50px, 5.6vw, 90px);
  line-height: 1.02;
  color: #fff
}

.ar .compact-contact .contact-copy h2 {
  line-height: 1.16
}

.compact-contact .contact-copy h2 em {
  color: #70dfce
}

.compact-contact .contact-copy p {
  color: #c5d8d4
}

.compact-contact .contact-shortcuts {
  border-color: rgba(112, 223, 206, .2);
  background: #edf5f2;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .24);
}

@media(max-width:900px) {
  .compact-contact {
    grid-template-columns: 1fr;
    gap: 54px
  }

  .compact-contact:before {
    width: 110vw;
    inset-inline-end: -55vw;
    top: -45vw
  }
}

/* Arabic glyphs and diacritics need more vertical room than Latin display text. */
.ar .hero h1,
.ar .statement h2,
.ar .split-copy h2,
.ar .transform h2,
.ar .intelligence h2,
.ar .experience h2,
.ar .legacy h2,
.ar .cap-head h2,
.ar .contact h2,
.ar .page-hero h1,
.ar .service-intro h2,
.ar .compact-contact h2,
.ar .decision-heading h2 {
  line-height: 1.28;
  letter-spacing: 0;
  text-wrap: balance;
}

.ar .service-list h3,
.ar .related-grid h3,
.ar .cap-list h3,
.ar .decision-card h3,
.ar .now h3 {
  line-height: 1.45;
  letter-spacing: 0;
  text-wrap: balance;
}

.ar h1 em,
.ar h2 em,
.ar h3 em {
  font-style: italic;
}

/* Arabic display type is intentionally one step smaller than Latin. */
@media(min-width:901px) {
  .ar .hero h1 {
    font-size: clamp(50px, 6vw, 96px)
  }

  .ar .page-hero h1 {
    font-size: clamp(44px, 3.8vw, 60px)
  }

  .ar .statement h2,
  .ar .split-copy h2,
  .ar .transform h2,
  .ar .intelligence h2,
  .ar .experience h2,
  .ar .cap-head h2,
  .ar .contact h2,
  .ar .service-intro h2 {
    font-size: clamp(44px, 5vw, 82px);
  }
}

/* Arabic section labels must remain readable beside the large display headings. */
.ar .eyebrow,
.ar .kicker,
.ar .service-intro-tag,
.ar .cap-head>span,
.ar .contact-copy>span,
.ar .legacy-copy>div:first-child>span {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.8;
  letter-spacing: 0;
  font-weight: 700;
}

.ar .eyebrow,
.ar .kicker {
  margin-bottom: 24px;
}

@media(max-width:900px) {

  .ar .eyebrow,
  .ar .kicker,
  .ar .service-intro-tag,
  .ar .cap-head>span,
  .ar .contact-copy>span,
  .ar .legacy-copy>div:first-child>span {
    font-size: 14px;
    line-height: 1.75;
  }
}

@media(min-width:1200px) {
  .ar .statement h2 {
    font-size: clamp(42px, 4vw, 64px)
  }

  .ar .statement h2 em {
    white-space: nowrap
  }
}

/* In RTL, flex-end places the NOW block opposite the main statement. */
.ar .legacy .now {
  align-self: flex-end;
  text-align: left
}

.ar .hero-data span {
  font-size: 11px;
  letter-spacing: 0;
  min-width: 108px;
  text-align: center
}

@media(max-width:900px) {
  .ar .hero h1 {
    font-size: 50px
  }

  .ar .page-hero h1 {
    font-size: clamp(34px, 9vw, 39px)
  }

  .ar .statement h2,
  .ar .split-copy h2,
  .ar .transform h2,
  .ar .intelligence h2,
  .ar .experience h2,
  .ar .cap-head h2,
  .ar .contact h2,
  .ar .service-intro h2,
  .ar .compact-contact h2 {
    font-size: clamp(38px, 10.5vw, 44px);
  }
}
/* ===== Lead forms & campaign landing pages ===== */
.hp{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.form-error{background:#fde8e6;color:#8a1c12;padding:12px 16px;border-radius:10px;font-size:14px;margin:0}
.thanks-page p{max-width:520px;text-align:center;line-height:1.8;color:#485753}
.thanks-page a{margin:6px 12px}

.nav-landing{background:rgba(8,27,25,.94)}
.nav-landing .brand-logo{height:34px}
.is-landing .cursor-glow{display:none}

.lp-hero{position:relative;background:#0b2522;color:#fff;padding:130px 6vw 70px;overflow:hidden}
.lp-hero-bg{position:absolute;inset:0}
.lp-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.35}
.lp-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,20,18,.92),rgba(2,20,18,.6))}
.ar .lp-hero-shade{transform:scaleX(-1)}
.lp-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:center;max-width:1320px;margin:0 auto}
.lp-copy .eyebrow{font-size:11px;letter-spacing:.17em;color:#7de5d5;font-weight:800}
.lp-copy h1{font-size:clamp(40px,5.4vw,84px);line-height:1;letter-spacing:-.04em;margin:18px 0;font-weight:600}
.ar .lp-copy h1{letter-spacing:-.01em;line-height:1.2}
.lp-copy h1 em{font-weight:400;font-style:italic;color:#7de5d5}
.lp-copy>p{font-size:clamp(17px,1.4vw,21px);line-height:1.75;color:#e4efec;max-width:620px}
.lp-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;color:#c9dad6;font-size:15px;line-height:1.6}
.lp-points strong{color:#fff;margin-inline-end:6px}

.lp-form{background:#fff;color:#0b2522;border-radius:22px;padding:30px;display:grid;gap:16px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.lp-form h2{margin:0;font-size:26px}
.lp-form-sub{margin:-6px 0 0;color:#5b6b67;font-size:14px}
.lp-form label{display:flex;flex-direction:column;gap:6px}
.lp-form label span{font-size:12px;font-weight:700;color:#35504b}
.lp-form input,.lp-form select,.lp-form textarea{border:1px solid #c9d7d4;border-radius:10px;padding:12px 14px;font:inherit;color:#0b2522;background:#fff;outline:none}
.lp-form input:focus,.lp-form select:focus,.lp-form textarea:focus{border-color:#14796e;box-shadow:0 0 0 3px rgba(20,121,110,.18)}
.lp-form .submit{width:100%}
.lp-form small{color:#6a7a76;font-size:12px;line-height:1.6}

.lp-proof{background:#071a18;color:#fff;padding:36px 6vw}
.lp-proof-label{font-size:11px;letter-spacing:.17em;color:#70dfce;text-align:center;margin-bottom:18px}
.lp-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;max-width:1000px;margin:0 auto}
.lp-proof-grid strong{display:block;font-size:clamp(28px,3.4vw,46px);font-weight:600}
.lp-proof-grid span{color:#b8c9c6;font-size:13px}

.lp-section{padding:80px 6vw;max-width:1320px;margin:0 auto}
.lp-section h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.03em;margin:0 0 34px;font-weight:600}
.ar .lp-section h2{letter-spacing:0}
.lp-problems ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lp-problems li{padding:20px 22px;background:#fff;border:1px solid #d6e0dd;border-radius:14px;font-size:17px}
.lp-problems li::before{content:"✕";color:#b4372a;margin-inline-end:12px;font-weight:700}
.lp-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cbd7d4;border-inline-start:1px solid #cbd7d4}
.lp-feature-grid article{padding:28px;border-inline-end:1px solid #cbd7d4;border-bottom:1px solid #cbd7d4}
.lp-feature-grid b,.lp-step-grid b{color:#168b7f;font-size:12px}
.lp-feature-grid h3,.lp-step-grid h3{font-size:22px;margin:30px 0 10px;line-height:1.25}
.lp-feature-grid p,.lp-step-grid p{color:#5b6b67;line-height:1.75;margin:0}
.lp-steps{background:#fff;max-width:none}
.lp-steps>*{max-width:1320px;margin-inline:auto}
.lp-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.lp-faq details{border-bottom:1px solid #cbd7d4;padding:18px 0}
.lp-faq summary{cursor:pointer;font-weight:700;font-size:18px}
.lp-faq details p{color:#5b6b67;line-height:1.8;margin:12px 0 0;max-width:760px}
.lp-cta{background:#79dfcf;padding:80px 6vw;text-align:center}
.lp-cta h2{font-size:clamp(34px,4.4vw,64px);margin:0 0 12px}
.lp-cta p{font-size:19px;margin:0 0 28px}
.lp-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.lp-cta-actions a{padding:16px 28px;border-radius:99px;font-weight:700;text-decoration:none}
.submit-link{background:#0b2522;color:#fff}
.wa-link{border:2px solid #0b2522;color:#0b2522}
.lp-related-links{display:flex;gap:12px;flex-wrap:wrap}
.lp-related-links a{padding:12px 18px;border:1px solid #c9d7d4;border-radius:99px;color:#0b2522;text-decoration:none;font-size:14px;background:#fff}
.wa-float{position:fixed;z-index:60;inset-inline-end:18px;bottom:18px;background:#25d366;color:#fff;padding:14px 20px;border-radius:99px;font-weight:700;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}

@media(max-width:900px){
  .lp-hero{padding:110px 5vw 50px}
  .lp-hero-grid,.lp-problems ul,.lp-feature-grid,.lp-step-grid{grid-template-columns:1fr}
  .lp-proof-grid{grid-template-columns:repeat(2,1fr)}
  .lp-section{padding:56px 5vw}
}

/* ===== Digital services (home + hub) ===== */
.home-services{padding:9vw 6vw;background:#fff}
.home-services-grid,.service-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cbd7d4;border-inline-start:1px solid #cbd7d4;margin-top:34px}
.home-services-grid a,.service-links a{position:relative;min-height:280px;padding:32px;color:#101b1a;text-decoration:none;border-inline-end:1px solid #cbd7d4;border-bottom:1px solid #cbd7d4;transition:.25s}
.home-services-grid a:hover,.service-links a:hover{background:#edf5f2}
.home-services-grid b,.service-links b{color:#168b7f;font-size:11px}
.home-services-grid h3,.service-links h3{font-size:26px;margin:60px 0 10px;line-height:1.2}
.home-services-grid p,.service-links p{color:#5b6b67;line-height:1.7;margin:0}
.home-services-grid span,.service-links span{position:absolute;inset-inline-end:26px;top:22px;color:#168b7f;font-size:22px}
.service-links{margin:0;border-top:0}
@media(max-width:900px){.home-services-grid,.service-links{grid-template-columns:1fr}.home-services{padding:56px 5vw}}

/* mobile overflow fix for landing grids */
.lp-hero-grid>*,.lp-feature-grid>*,.lp-step-grid>*,.lp-problems li{min-width:0}
.lp{overflow-x:hidden}
@media(max-width:900px){
  .lp-hero-grid,.lp-problems ul,.lp-feature-grid,.lp-step-grid{grid-template-columns:minmax(0,1fr)}
  .lp-form{padding:22px}
}
.lp .lp-form h2{font-size:clamp(20px,5.4vw,26px);line-height:1.3;letter-spacing:0;overflow-wrap:anywhere}

/* ===== Digital services hub ===== */
.hub{overflow-x:hidden}
.hub-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hub-hero-actions a{padding:15px 26px;border-radius:99px;font-weight:700;text-decoration:none}
.hub-hero-actions .submit-link{background:#79dfcf;color:#0b2522}
.hub-hero-actions .wa-link{border-color:#fff;color:#fff}
.hub-sub{margin:-18px 0 30px;color:#5b6b67;font-size:17px;max-width:760px;line-height:1.7}
.hub-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hub-card{background:#fff;border:1px solid #d6e0dd;border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:18px}
.hub-card b{color:#168b7f;font-size:12px}
.hub-card h3{font-size:26px;margin:10px 0 8px}
.hub-card-head p{color:#5b6b67;line-height:1.7;margin:0}
.hub-card-body{display:grid;gap:14px;border-top:1px solid #e0e8e5;padding-top:18px}
.hub-card-body small{display:block;font-size:11px;letter-spacing:.12em;color:#14796e;font-weight:800;margin-bottom:6px}
.hub-card-body p{margin:0;line-height:1.7}
.hub-card-body ul,.hub-package-grid ul,.hub-prepare ul{margin:0;padding-inline-start:20px;line-height:1.9;color:#33433f}
.hub-card-link{margin-top:auto;color:#0b2522;font-weight:700;text-decoration:none}
.hub-chooser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hub-chooser-grid a{display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:#fff;border:1px solid #d6e0dd;border-radius:14px;color:#0b2522;text-decoration:none;transition:.2s}
.hub-chooser-grid a:hover{background:#edf5f2;border-color:#14796e}
.hub-chooser-grid span{font-weight:700;font-size:17px}
.hub-chooser-grid i{font-style:normal;color:#14796e;font-size:14px}
.hub-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hub-package-grid article{background:#0b2522;color:#fff;border-radius:18px;padding:30px}
.hub-package-grid h3{font-size:28px;margin:0 0 8px;color:#7de5d5}
.hub-package-grid p{color:#c9dad6;line-height:1.7;margin:0 0 14px}
.hub-package-grid ul{color:#e4efec}
.hub-prepare ul{font-size:18px}
.hub-form{display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:start;background:#79dfcf;padding:80px 6vw}
.hub-form-copy h2{font-size:clamp(32px,4vw,56px);margin:0 0 14px;line-height:1.1}
.hub-form-copy p{font-size:19px;line-height:1.7;max-width:480px}
.hub-capabilities{padding:70px 6vw;text-align:center;background:#f4f6f3}
.hub-capabilities h2{font-size:clamp(24px,3vw,40px);margin:0 0 10px}
.hub-capabilities p{color:#5b6b67;margin:0 0 22px}
.hub-capabilities .wa-link{display:inline-block;padding:14px 26px;border-radius:99px;font-weight:700;text-decoration:none}
.hub-form-copy>*,.hub-form .lp-form{min-width:0}
@media(max-width:900px){
  .hub-cards,.hub-chooser-grid,.hub-package-grid,.hub-form{grid-template-columns:minmax(0,1fr)}
  .hub-form{padding:56px 5vw}
}

/* hub cards: 3 per row on desktop, 2 on tablet, 1 on phone */
.hub-services{max-width:1560px}
.hub-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hub-card{padding:24px}
.hub-card h3{font-size:22px}
.hub-card-head p,.hub-card-body p,.hub-card-body ul{font-size:14.5px}
.hub-card-body ul{line-height:1.8}
@media(max-width:860px){.hub-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.hub-cards{grid-template-columns:minmax(0,1fr)}}

/* ===== Service page v2: wider hero, "at a glance" card, form at the bottom ===== */
#lead-form,#consultation{scroll-margin-top:96px}
.lp-hero{padding:150px 6vw 90px;min-height:78vh;display:flex;align-items:center}
.lp-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:5vw;width:100%}
.lp-copy .breadcrumb{margin-bottom:20px}
.lp-copy h1{font-size:clamp(44px,6vw,96px)}
.lp-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.lp-hero-actions a{padding:16px 28px;border-radius:99px;font-weight:700;text-decoration:none}
.lp-hero-actions .submit-link{background:#79dfcf;color:#0b2522}
.lp-hero-actions .wa-link{border:2px solid rgba(255,255,255,.7);color:#fff}
.lp-glance{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);border-radius:22px;padding:30px;display:grid;gap:22px}
.lp-glance small{display:block;font-size:11px;letter-spacing:.14em;color:#7de5d5;font-weight:800;margin-bottom:8px}
.lp-glance p{margin:0;font-size:17px;line-height:1.7;color:#fff}
.lp-glance ul{margin:0;padding-inline-start:20px;display:grid;gap:6px;color:#e4efec;line-height:1.7;font-size:15px}
.lp-glance-block+.lp-glance-block{border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.lp-glance-start strong{font-size:20px;color:#fff}
.lp-form-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5vw;align-items:start;background:#79dfcf;padding:90px 6vw}
.lp-form-copy .eyebrow{font-size:11px;letter-spacing:.17em;font-weight:800}
.lp-form-copy h2{font-size:clamp(34px,4.4vw,64px);line-height:1.08;margin:0 0 14px;font-weight:600}
.lp-form-copy p{font-size:19px;line-height:1.7;max-width:480px}
.lp-form-section .lp-form{max-width:640px;width:100%}
.lp-form-copy,.lp-form-section .lp-form{min-width:0}
@media(max-width:900px){
  .lp-hero{padding:110px 5vw 56px;min-height:0}
  .lp-hero-grid,.lp-form-section{grid-template-columns:minmax(0,1fr)}
  .lp-form-section{padding:56px 5vw}
}

/* ===== Service page v3: visual hero, glance strip, outcomes, price factors, timeline, proof slots ===== */
.lp-hero{background:radial-gradient(1200px 600px at 85% 10%,rgba(125,229,213,.16),transparent 60%),linear-gradient(135deg,#061a18 0%,#0b2522 55%,#0e3430 100%);min-height:80vh}
.lp-hero-bg{background:radial-gradient(700px 400px at 10% 100%,rgba(20,121,110,.35),transparent 65%)}
.lp-hero-shade{display:none}
.lp-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.lp-visual-wrap{display:flex;justify-content:center}
.lp-visual{width:100%;max-width:520px;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));animation:lpfloat 7s ease-in-out infinite}
@keyframes lpfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.lp-visual{animation:none}}
.lp-hero-start{margin-top:22px;color:#b8c9c6;font-size:14px}
.lp-hero-start strong{color:#7de5d5;margin-inline-start:6px}

.lp-glance-strip{display:grid;grid-template-columns:1.1fr 1.1fr .8fr;gap:0;max-width:1180px;margin:-46px auto 0;position:relative;z-index:5;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(7,26,24,.18);overflow:hidden;width:calc(100% - 12vw)}
.lp-glance-item{padding:26px 28px;border-inline-end:1px solid #e0e8e5}
.lp-glance-item:last-child{border-inline-end:0}
.lp-glance-item small{display:block;font-size:11px;letter-spacing:.13em;color:#14796e;font-weight:800;margin-bottom:8px}
.lp-glance-item p{margin:0;line-height:1.7;color:#33433f;font-size:15.5px}
.lp-glance-cta{background:#0b2522;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center}
.lp-glance-cta small{color:#7de5d5}
.lp-glance-cta strong{font-size:20px}
.lp-glance-cta a{color:#7de5d5;text-decoration:none;font-weight:700;font-size:14px}

.lp-outcomes{padding-top:90px}
.lp-outcome-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-outcome-grid article{background:#fff;border:1px solid #d6e0dd;border-radius:20px;padding:30px;position:relative;overflow:hidden}
.lp-outcome-grid article::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:#79dfcf;opacity:.25}
.lp-outcome-no{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0b2522;color:#7de5d5;font-weight:800;font-size:14px}
.lp-outcome-grid h3{font-size:23px;margin:22px 0 10px;line-height:1.25}
.lp-outcome-grid p{margin:0;color:#5b6b67;line-height:1.75}

.lp-problems li{position:relative}
.lp-twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lp-twin-card{background:#fff;border:1px solid #d6e0dd;border-radius:22px;padding:34px}
.lp-twin-card h2{font-size:clamp(24px,2.6vw,34px);margin:0 0 18px}
.lp-twin-card p{color:#5b6b67;line-height:1.75;margin:-6px 0 16px}
.lp-check,.lp-dots{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lp-check li,.lp-dots li{position:relative;padding-inline-start:34px;line-height:1.6;font-size:16px}
.lp-check li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#79dfcf;color:#0b2522;font-weight:800;font-size:13px}
.lp-dots li::before{content:"";position:absolute;inset-inline-start:7px;top:9px;width:9px;height:9px;border-radius:50%;background:#7de5d5}
.lp-twin-dark{background:#0b2522;color:#fff;border-color:#0b2522}
.lp-twin-dark p{color:#c9dad6}
.lp-twin-link{display:inline-block;margin-top:22px;color:#7de5d5;font-weight:700;text-decoration:none}

.lp-timeline{position:relative;gap:20px}
.lp-timeline>div{background:#f4f6f3;border-radius:18px;padding:26px;position:relative}
.lp-timeline>div b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0b2522;color:#7de5d5;font-size:13px}
.lp-timeline>div h3{margin:18px 0 8px}
.lp-timeline>div:not(:last-child)::after{content:"";position:absolute;top:46px;inset-inline-end:-20px;width:20px;height:2px;background:#79dfcf}

.lp-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-work-card{display:block;background:#fff;border:1px solid #d6e0dd;border-radius:18px;overflow:hidden;color:#0b2522;text-decoration:none}
.lp-work-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.lp-work-card>div{padding:22px}
.lp-work-card h3{margin:0 0 8px;font-size:21px}
.lp-work-card p{margin:0 0 10px;color:#5b6b67;line-height:1.7}
.lp-work-card strong{color:#14796e}
.lp-voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lp-voice-grid blockquote{margin:0;background:#fff;border:1px solid #d6e0dd;border-radius:18px;padding:28px}
.lp-voice-grid p{margin:0 0 14px;font-size:19px;line-height:1.7}
.lp-voice-grid footer{color:#14796e;font-weight:700;font-size:14px}

.lp-commit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.lp-commit-grid>div{border-top:3px solid #79dfcf;padding-top:18px}
.lp-commit-grid i{font-style:normal;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0b2522;color:#7de5d5;font-weight:800;font-size:14px}
.lp-commit-grid h3{font-size:19px;margin:14px 0 8px;line-height:1.3}
.lp-commit-grid p{margin:0;color:#5b6b67;line-height:1.7;font-size:15px}

@media(max-width:900px){
  .lp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .lp-visual-wrap{order:-1;max-width:340px;margin:0 auto}
  .lp-glance-strip{grid-template-columns:minmax(0,1fr);width:calc(100% - 10vw);margin-top:-30px}
  .lp-glance-item{border-inline-end:0;border-bottom:1px solid #e0e8e5}
  .lp-outcome-grid,.lp-twin,.lp-work-grid,.lp-voice-grid,.lp-commit-grid{grid-template-columns:minmax(0,1fr)}
  .lp-timeline>div:not(:last-child)::after{display:none}
}

/* ===== v4: editorial look, no decorative circles (matches the rest of the site: ruled cells, small teal numerals) ===== */
.lp-outcome-grid{gap:0;border-top:1px solid #cbd7d4;border-inline-start:1px solid #cbd7d4}
.lp-outcome-grid article{background:transparent;border:0;border-inline-end:1px solid #cbd7d4;border-bottom:1px solid #cbd7d4;border-radius:0;padding:34px 34px 38px;min-height:260px;display:flex;flex-direction:column}
.lp-outcome-grid article::after{display:none}
.lp-outcome-no{display:block;width:auto;height:auto;border-radius:0;background:none;color:#168b7f;font-size:12px;letter-spacing:.12em;font-weight:800}
.lp-outcome-grid h3{font-size:clamp(24px,2.3vw,32px);margin:auto 0 12px;padding-top:70px;line-height:1.2}
.lp-outcome-grid p{margin:0}

.lp-twin-card{border-radius:4px}
.lp-check li{padding-inline-start:30px}
.lp-check li::before{content:"✓";width:auto;height:auto;border-radius:0;background:none;color:#168b7f;font-size:17px;top:-1px}
.lp-dots li{padding-inline-start:26px}
.lp-dots li::before{width:8px;height:8px;border-radius:0;top:10px;inset-inline-start:2px;background:#7de5d5}

.lp-timeline{gap:0;border-top:1px solid #cbd7d4;border-inline-start:1px solid #cbd7d4}
.lp-timeline>div{background:transparent;border-radius:0;border-inline-end:1px solid #cbd7d4;border-bottom:1px solid #cbd7d4;padding:30px 28px 34px;min-height:220px}
.lp-timeline>div b{display:block;width:auto;height:auto;border-radius:0;background:none;color:#168b7f;font-size:12px;letter-spacing:.12em}
.lp-timeline>div h3{margin:56px 0 8px}
.lp-timeline>div:not(:last-child)::after{display:none}
.lp-steps{background:#fff}

.lp-commit-grid{gap:28px}
.lp-commit-grid>div{border-top:2px solid #0b2522;padding-top:16px}
.lp-commit-grid i{display:inline;width:auto;height:auto;border-radius:0;background:none;color:#168b7f;font-size:18px}
.lp-commit-grid h3{margin:10px 0 8px}

.lp-problems li{border-radius:4px}
.lp-glance-strip{border-radius:4px}
.lp-work-card,.lp-voice-grid blockquote{border-radius:4px}
.lp-form{border-radius:6px}
.lp-related-links a{border-radius:4px}

.hub-card,.hub-package-grid article,.hub-chooser-grid a{border-radius:4px}

@media(max-width:900px){
  .lp-timeline>div{min-height:0}
  .lp-timeline>div h3{margin-top:22px}
  .lp-outcome-grid h3{padding-top:30px}
  .lp-outcome-grid article{min-height:0}
}

/* ===== lead form: inputs must never be wider than the card ===== */
.lp-form,.lp-form *{box-sizing:border-box}
.lp-form{min-width:0;max-width:100%}
.lp-form label{min-width:0;width:100%}
.lp-form input,.lp-form select,.lp-form textarea{width:100%;max-width:100%;min-width:0;display:block;font-size:16px}
.lp-form textarea{resize:vertical;min-height:84px}
.lp-form select{appearance:auto}
.lp-form .submit{width:100%;font-size:16px;padding:16px 22px}
.lp-form-section>*,.hub-form>*{min-width:0}
/* contact page form (underline style) gets the same guarantee */
.contact-form,.contact-form *{box-sizing:border-box}
.contact-form label{min-width:0}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;min-width:0}
@media(max-width:700px){
  .contact-form{grid-template-columns:minmax(0,1fr)}
  .lp-form{padding:22px 18px}
}

/* ===== "How we work with you": dark band, ruled cells, large numerals ===== */
.lp-commit-band{background:linear-gradient(135deg,#061a18 0%,#0b2522 60%,#0e3430 100%);color:#fff;padding:90px 6vw;position:relative;overflow:hidden}
.lp-commit-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(125,229,213,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(125,229,213,.06) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
.lp-commit-inner{position:relative;max-width:1320px;margin:0 auto}
.lp-commit-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:5vw;align-items:end;margin-bottom:48px}
.lp-commit-head h2{font-size:clamp(34px,4.4vw,64px);margin:0;line-height:1.05;letter-spacing:-.03em;font-weight:600}
.ar .lp-commit-head h2{letter-spacing:0;line-height:1.2}
.lp-commit-head p{margin:0;color:#b8c9c6;font-size:18px;line-height:1.8;max-width:460px}
.lp-commit-band .lp-commit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.22);border-inline-start:1px solid rgba(255,255,255,.22)}
.lp-commit-band .lp-commit-grid>div{border:0;border-inline-end:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);padding:30px 28px 36px;min-height:260px;display:flex;flex-direction:column;transition:background .25s}
.lp-commit-band .lp-commit-grid>div:hover{background:rgba(125,229,213,.07)}
.lp-commit-no{font-size:clamp(44px,4.6vw,68px);font-weight:300;line-height:1;color:#7de5d5;letter-spacing:-.02em;opacity:.95}
.lp-commit-band .lp-commit-grid h3{font-size:21px;line-height:1.3;margin:auto 0 10px;padding-top:48px;color:#fff}
.lp-commit-band .lp-commit-grid p{margin:0;color:#b8c9c6;line-height:1.75;font-size:15px}
@media(max-width:900px){
  .lp-commit-band{padding:56px 5vw}
  .lp-commit-head{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:30px}
  .lp-commit-band .lp-commit-grid{grid-template-columns:minmax(0,1fr)}
  .lp-commit-band .lp-commit-grid>div{min-height:0}
  .lp-commit-band .lp-commit-grid h3{padding-top:20px}
}
@media(min-width:901px) and (max-width:1100px){.lp-commit-band .lp-commit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== footer service links + privacy page ===== */
footer .footer-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:26px;margin-top:6px;border-top:1px solid rgba(255,255,255,.14);font-size:13px}
footer .footer-links strong{width:100%;color:#fff;font-size:11px;letter-spacing:.14em;margin-bottom:4px}
footer .footer-links strong a{color:#fff;text-decoration:none}
footer .footer-links a{color:#70dfce;text-decoration:none}
footer .footer-links a:hover{text-decoration:underline}
@media(max-width:900px){footer{grid-template-columns:minmax(0,1fr)}}

.legal-hero{min-height:58svh}
.legal-body{max-width:920px;margin:0 auto;padding:80px 6vw 110px}
.legal-updated{color:#5b6b67;font-size:14px;margin:0 0 40px}
.legal-body article{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px 24px;padding:30px 0;border-top:1px solid #cbd7d4}
.legal-body article b{color:#168b7f;font-size:12px;letter-spacing:.12em;padding-top:8px}
.legal-body article h2{grid-column:2;font-size:24px;margin:0}
.legal-body article p{grid-column:2;margin:0;line-height:1.9;color:#485753;font-size:17px}
@media(max-width:700px){.legal-body article{grid-template-columns:minmax(0,1fr)}.legal-body article h2,.legal-body article p{grid-column:1}}

/* home: digital services block under the AI / systems sections */
.home-services-title{font-size:clamp(44px,5.6vw,88px);line-height:.95;letter-spacing:-.05em;margin:14px 0 18px;font-weight:600}
.ar .home-services-title{letter-spacing:0;line-height:1.15}
.home-services-title em{font-weight:400;font-style:italic;color:#158e81}
.home-services-lead{max-width:760px;font-size:19px;line-height:1.8;color:#485753;margin:0}
.home-services-all{display:inline-block;margin-top:30px}

/* hub: premium cards first, small services as compact links */
.hub-more-h{font-size:14px;letter-spacing:.14em;color:#14796e;font-weight:800;margin:46px 0 14px}
.hub-more{display:flex;flex-wrap:wrap;gap:10px}
.hub-more a{padding:11px 16px;border:1px solid #c9d7d4;border-radius:4px;background:#fff;color:#0b2522;text-decoration:none;font-size:14px}
.hub-more a:hover{background:#edf5f2;border-color:#14796e}

/* qualifying lead form: two fields per row on wide cards */
.lp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-form-row>label{min-width:0}
@media(max-width:560px){.lp-form-row{grid-template-columns:minmax(0,1fr)}}

/* home: sales problems and the engineered fix */
.home-problems{padding:9vw 6vw;background:#f4f6f3}
.home-problems-head{max-width:880px}
.home-problems-head h2{font-size:clamp(40px,5vw,78px);line-height:.98;letter-spacing:-.045em;margin:14px 0 18px;font-weight:600}
.ar .home-problems-head h2{letter-spacing:0;line-height:1.15}
.home-problems-head h2 em{font-weight:400;font-style:italic;color:#158e81}

.home-problems-list{margin-top:44px;border-top:1px solid #cbd7d4}
.home-problem{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1fr) 34px;gap:28px;align-items:start;padding:28px 0;border-bottom:1px solid #cbd7d4;color:#101b1a;text-decoration:none;transition:background .25s}
.home-problem:hover{background:#edf5f2}
.home-problem b{color:#168b7f;font-size:12px;letter-spacing:.12em;padding-top:6px}
.home-problem small{display:block;font-size:10px;letter-spacing:.14em;font-weight:800;color:#8a9a96;margin-bottom:8px}
.hp-fix small{color:#14796e}
.home-problem p{margin:0;font-size:18px;line-height:1.6}
.hp-problem p{color:#33433f}
.hp-fix p{font-weight:600}
.home-problem>span{color:#168b7f;font-size:22px;text-align:end}
.home-problems-cta{display:inline-block;margin-top:34px}
@media(max-width:900px){
  .home-problems{padding:56px 5vw}
  .home-problem{grid-template-columns:36px minmax(0,1fr);gap:10px 14px}
  .home-problem .hp-fix{grid-column:2}
  .home-problem>span{display:none}
}

/* home v2: fewer sections, clearer hierarchy */
.home-duo{padding:9vw 6vw;background:linear-gradient(135deg,#061a18 0%,#0b2522 60%,#0e3430 100%);color:#fff}
.home-duo-head h2{font-size:clamp(40px,5vw,78px);line-height:.98;letter-spacing:-.045em;margin:14px 0 40px;font-weight:600}
.ar .home-duo-head h2{letter-spacing:0;line-height:1.15}
.home-duo-head h2 em{font-weight:400;font-style:italic;color:#7de5d5}
.home-duo-head .eyebrow{color:#7de5d5}
.home-duo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.22);border-inline-start:1px solid rgba(255,255,255,.22)}
.home-duo-grid article{padding:38px 36px 42px;border-inline-end:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}
.home-duo-grid b{color:#7de5d5;font-size:12px;letter-spacing:.12em}
.home-duo-grid h3{font-size:clamp(28px,3vw,42px);margin:42px 0 12px;line-height:1.15;font-weight:600}
.home-duo-grid p{color:#b8c9c6;line-height:1.8;font-size:17px;margin:0 0 20px;max-width:520px}
.home-duo-grid ul{margin:0 0 24px;padding-inline-start:20px;color:#e4efec;line-height:1.9}
.home-duo-grid .text-link{color:#7de5d5}

.home-also{padding:8vw 6vw;background:#fff}
.home-also-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #cbd7d4;border-inline-start:1px solid #cbd7d4;margin-top:24px}
.home-also-grid a{position:relative;padding:30px 30px 34px;min-height:220px;color:#101b1a;text-decoration:none;border-inline-end:1px solid #cbd7d4;border-bottom:1px solid #cbd7d4;transition:background .25s}
.home-also-grid a:hover{background:#edf5f2}
.home-also-grid b{color:#168b7f;font-size:12px;letter-spacing:.12em}
.home-also-grid h3{font-size:24px;margin:34px 0 10px;line-height:1.2}
.home-also-grid p{margin:0;color:#5b6b67;line-height:1.7}
.home-also-grid span{position:absolute;inset-inline-end:24px;top:20px;color:#168b7f;font-size:22px}
@media(max-width:900px){
  .home-duo,.home-also{padding:56px 5vw}
  .home-duo-grid,.home-also-grid{grid-template-columns:minmax(0,1fr)}
  .home-also-grid a{min-height:0}
}

/* cookie consent banner */
.consent{position:fixed;z-index:90;inset-inline:16px;bottom:16px;max-width:760px;margin-inline:auto;background:#071a18;color:#e4efec;border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:18px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:14px;line-height:1.7}
.consent[hidden]{display:none}
.consent p{margin:0}
.consent a{color:#7de5d5;white-space:nowrap}
.consent-actions{display:flex;gap:10px;flex-shrink:0}
.consent button{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;padding:10px 18px;border-radius:99px;font:inherit;font-weight:700;cursor:pointer}
.consent button.primary{background:#79dfcf;color:#0b2522;border-color:#79dfcf}
@media(max-width:640px){.consent{flex-direction:column;align-items:stretch;bottom:10px}.consent-actions{justify-content:flex-end}}

/* home hero artwork (replaces the photograph) */
.hero-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.ar .hero-art{transform:scaleX(-1)}
.ha-flow{animation:haflow 3.2s linear infinite}
@keyframes haflow{to{stroke-dashoffset:-56}}
@media(prefers-reduced-motion:reduce){.ha-flow{animation:none}}
@media(max-width:900px){.hero-art{opacity:.55}}

/* ===== Insights: Modern Article Page & List ===== */
.insight-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #cbd7d4;border-inline-start:1px solid #cbd7d4;margin:56px 6vw 70px}
.insight-card{display:flex;flex-direction:column;gap:12px;padding:28px 26px 30px;color:#101b1a;text-decoration:none;border-inline-end:1px solid #cbd7d4;border-bottom:1px solid #cbd7d4;transition:background .25s}
.insight-card:hover{background:#edf5f2}
.insight-card time{font-size:12px;letter-spacing:.1em;color:#168b7f;font-weight:700}
.insight-card h2{margin:0;font-size:21px;line-height:1.35;font-weight:600}
.insight-card p{margin:0;color:#5b6b67;line-height:1.7;font-size:15.5px}
.insight-card span{margin-top:auto;padding-top:8px;color:#168b7f;font-weight:700;font-size:14px}

.article {
  padding-top: 110px;
  background: #fbfcfb;
  min-height: 100vh;
  color: #1a2c28;
}

.read-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  background: linear-gradient(90deg, #14796e, #70dfce);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(112, 223, 206, 0.7);
}

.article-hero {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 6vw 24px;
}

.article-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #647773;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.article-hero .breadcrumb a {
  color: #556965;
  text-decoration: none;
  transition: color 0.2s;
}

.article-hero .breadcrumb a:hover {
  color: #14796e;
}

.article-hero .breadcrumb span {
  color: #a4b4b0;
  font-size: 11px;
}

.article-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20, 121, 110, 0.08);
  border: 1px solid rgba(20, 121, 110, 0.22);
  color: #14796e;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  transition: all 0.25s ease;
}

.article-topic-badge:hover {
  background: rgba(20, 121, 110, 0.15);
  border-color: #14796e;
  transform: translateY(-1px);
}

.article-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.22;
  font-weight: 800;
  color: #0b2522;
  letter-spacing: -0.02em;
}

.ar .article-hero h1 {
  letter-spacing: 0;
  line-height: 1.38;
}

.article-lead {
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.85;
  color: #435450;
  margin: 0 0 28px;
  font-weight: 400;
}

.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #e1ebe8;
  border-bottom: 1px solid #e1ebe8;
  flex-wrap: wrap;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e1ebe8;
  padding: 2px;
  background: #ffffff;
}

.article-author-info {
  display: flex;
  flex-direction: column;
}

.article-author-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0b2522;
  line-height: 1.3;
}

.article-author-role {
  font-size: 12px;
  color: #718480;
}

.article-details {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: #647773;
}

.article-details span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.article-details svg {
  width: 15px;
  height: 15px;
  stroke: #14796e;
}

.article-cover {
  max-width: 1040px;
  margin: 28px auto 48px;
  padding: 0 6vw;
}

.article-cover figure {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 45px -12px rgba(11, 37, 34, 0.12);
  border: 1px solid rgba(20, 121, 110, 0.15);
  background: #ffffff;
}

.article-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.article-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.article-sidebar {
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-bottom: 20px;
}

.article-sidebar-card {
  background: #ffffff;
  border: 1px solid #e1ebe8;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 24px rgba(11, 37, 34, 0.04);
}

.toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0b2522;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef3f1;
}

.toc-title svg {
  width: 16px;
  height: 16px;
  stroke: #14796e;
}

.article-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.article-toc li a {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #556965;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  border-inline-start: 2px solid transparent;
}

.article-toc li a:hover {
  color: #14796e;
  background: rgba(20, 121, 110, 0.05);
}

.article-toc li a.on {
  color: #14796e;
  font-weight: 700;
  background: rgba(20, 121, 110, 0.08);
  border-inline-start-color: #14796e;
}

.sidebar-share {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eef3f1;
}

.sidebar-share span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #718480;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.share-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f4f7f6;
  color: #3b4e4a;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid #e1ebe8;
}

.share-pill:hover {
  background: #14796e;
  color: #ffffff;
  border-color: #14796e;
  transform: translateY(-2px);
}

.share-pill svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.article-main {
  min-width: 0;
}

.article-text {
  font-size: 18.5px;
  line-height: 1.95;
  color: #273834;
}

.ar .article-text {
  font-size: 19px;
  line-height: 2.05;
}

.article-text h2 {
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 700;
  color: #0b2522;
  margin: 48px 0 18px;
  line-height: 1.35;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4edea;
  position: relative;
  scroll-margin-top: 110px;
}

.article-text h2::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  width: 50px;
  height: 2px;
  background: #14796e;
}

.article-text h3 {
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  color: #0f3531;
  margin: 32px 0 14px;
  line-height: 1.4;
  scroll-margin-top: 110px;
}

.article-text p {
  margin: 0 0 22px;
}

.article-text strong,
.article-text b {
  font-weight: 700;
  color: #0b2522;
}

.article-text ul,
.article-text ol {
  margin: 18px 0 26px;
  padding-inline-start: 24px;
}

.article-text li {
  margin-bottom: 10px;
  line-height: 1.85;
}

.article-text blockquote {
  margin: 30px 0;
  padding: 20px 24px;
  background: #f0f7f5;
  border-inline-start: 4px solid #14796e;
  border-radius: 0 16px 16px 0;
  font-size: 19px;
  color: #0f3531;
  line-height: 1.85;
  font-style: italic;
}

.ar .article-text blockquote {
  border-radius: 16px 0 0 16px;
  font-style: normal;
}

.article-text figure {
  margin: 36px 0;
}

.article-text figure img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(20, 121, 110, 0.12);
  box-shadow: 0 14px 35px -10px rgba(11, 37, 34, 0.1);
  display: block;
}

.article-text figcaption {
  font-size: 13px;
  color: #647773;
  text-align: center;
  margin-top: 10px;
}

.article-text table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 28px 0;
  border: 1px solid #cbd7d4;
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
}

.article-text th {
  background: #0b2522;
  color: #ffffff;
  padding: 12px 16px;
  font-weight: 600;
  text-align: start;
}

.article-text td {
  padding: 12px 16px;
  border-bottom: 1px solid #e1ebe8;
  color: #273834;
}

.article-text tr:last-child td {
  border-bottom: none;
}

.article-text tr:nth-child(even) td {
  background: #f7faf9;
}

.article-share-bottom {
  margin: 40px 0 48px;
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid #e1ebe8;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(11, 37, 34, 0.03);
}

.article-share-bottom span.label {
  font-size: 14.5px;
  font-weight: 700;
  color: #0b2522;
}

.share-links-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid #e1ebe8;
  background: #fbfcfb;
  color: #273834;
  cursor: pointer;
}

.btn-share:hover {
  transform: translateY(-1px);
  border-color: #14796e;
  color: #14796e;
}

.btn-share.whatsapp:hover {
  background: #25d366;
  color: #ffffff;
  border-color: #25d366;
}

.btn-share.linkedin:hover {
  background: #0077b5;
  color: #ffffff;
  border-color: #0077b5;
}

.btn-share.x:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

.article-cta-box {
  margin: 48px 0 56px;
  padding: 44px 40px;
  background: linear-gradient(135deg, #0b2522 0%, #0f3531 100%);
  color: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(112, 223, 206, 0.25);
  box-shadow: 0 25px 60px -15px rgba(11, 37, 34, 0.35);
  position: relative;
  overflow: hidden;
}

.article-cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  inset-inline-end: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(112, 223, 206, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(112, 223, 206, 0.15);
  color: #70dfce;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.article-cta-box h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.6vw, 34px);
  color: #ffffff;
  line-height: 1.25;
  font-weight: 800;
}

.article-cta-box p {
  color: #cbd7d4;
  font-size: 16.5px;
  line-height: 1.75;
  margin: 0 0 28px;
  max-width: 620px;
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #70dfce;
  color: #0b2522;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 25px -5px rgba(112, 223, 206, 0.4);
}

.cta-btn-primary:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(112, 223, 206, 0.5);
}

.cta-link-secondary {
  color: #a4e7dc;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: color 0.2s;
  padding: 8px 12px;
}

.cta-link-secondary:hover {
  color: #ffffff;
  text-decoration: underline;
}

.article-more-section {
  max-width: 1180px;
  margin: 80px auto 100px;
  padding: 0 6vw;
}

.article-more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  border-bottom: 1px solid #e1ebe8;
  padding-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}

.article-more-head h2 {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  color: #0b2522;
  margin: 0;
}

.article-more-head a.view-all {
  color: #14796e;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.article-more-head a.view-all:hover {
  gap: 10px;
  text-decoration: underline;
}

.article-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.more-article-card {
  background: #ffffff;
  border: 1px solid #e1ebe8;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(11, 37, 34, 0.03);
}

.more-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px -8px rgba(11, 37, 34, 0.1);
  border-color: rgba(20, 121, 110, 0.3);
}

.more-article-card .card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #eef3f1;
  overflow: hidden;
}

.more-article-card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.more-article-card:hover .card-thumb img {
  transform: scale(1.05);
}

.more-article-card .card-body {
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-category {
  font-size: 11.5px;
  font-weight: 700;
  color: #14796e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.more-article-card h3 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: #0b2522;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.more-article-card .card-read {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: #14796e;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.more-article-card:hover .card-read {
  gap: 10px;
}

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .article-sidebar {
    position: static;
    max-height: none;
    order: -1;
  }
  .article-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .article {
    padding-top: 86px;
  }
  .article-hero {
    padding: 24px 5vw 16px;
  }
  .article-cover {
    padding: 0 5vw;
    margin-bottom: 32px;
  }
  .article-layout {
    padding: 0 5vw;
  }
  .article-text {
    font-size: 17px;
    line-height: 1.85;
  }
  .article-cta-box {
    padding: 30px 22px;
  }
  .article-more-grid {
    grid-template-columns: 1fr;
  }
}

/* service page guide */
.lp-guide-body{max-width:820px}
.lp-guide-body p{font-size:18px;line-height:1.9;color:#2c3d39;margin:0 0 14px}