@charset "UTF-8";
/*-----------------------------------------------------------------------------------

  Theme Name: 3Shadz Software Solutions
  Author: 3Shadz Software Solutions
  Description: Custom website for 3Shadz Software Solutions
  Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

  01. VARIBALES CSS START
  02. MIXIN CSS START
  03. SPACE CSS START
  04. ANIMATION CSS START
  05. THEME CSS START
  06. THEME DARK CSS START
  07. BUTTON CSS START
  08. TITLE CSS START
  09. MENU CSS START
  10. MODAL CSS START
  11. CURSOR CSS START
  12. HEADER CSS START
  13. OFFCANVAS CSS START
  14. HERO CSS START
  15. SLIDER CSS START
  16. ABOUT CSS START
  17. SERVICE CSS START
  18. COUNTER CSS START
  19. WORKFLOW CSS START
  20. BRAND CSS START
  21. TESTIMONIAL CSS START
  22. PORTFOLIO CSS START
  23. PORTFOLIO 2 CSS START
  24. BLOG CSS START
  25. CTA CSS START
  26. STORY CSS START
  27. TEAM CSS START
  28. SOLUTION CSS START
  29. DEVELOPMENT CSS START
  30. AWARD CSS START
  31. FAQ CSS START
  32. CAREER CSS START
  33. FEATURE CSS START
  34. CONTACT CSS START
  35. PRICE CSS START
  36. ERROR CSS START
  37. HOME 5 CSS START
  38. FOOTER CSS START
**********************************************/
/*----------------------------------------*/
/*  01. VARIBALES CSS START
/*----------------------------------------*/
:root {
  --primary: #4fb83e;
  --secondary: #2c2c2c;
  --black: #000;
  --black-2: #121212;
  --black-3: #555;
  --black-4: #1d1d1d;
  --black-5: #343434;
  --black-6: #262626;
  --black-7: #555555;
  --black-13: #666;
  --white: #fff;
  --white-2: #efefef;
  --white-3: #e9e9e9;
  --white-4: #f0f0f0;
  --white-5: #fbfbfb;
  --white-6: #d7d7d7;
  --white-7: #F5F5F5;
  --gray: #c2c2c2;
  --gray-2: #999;
  --gray-3: #a8a8a8;
  --gray-4: #f6f6f6;
  --gray-5: #bbb;
  --gray-6: #2b2b2b;
  --gray-7: #b9b9b9;
  --gray-8: #8E8E8E;
  --gray-9: #aaa;
  --gray-10: #7c7c7c;
  --gray-11: #D9D9D9;
  --gray-12: #383838;
  --gray-13: #ccc;
  --gray-14: #dfdfdf;
  --gray-15: #C0C0C0;
  --gray-16: #939393;
  --pink: #FAEDE9;
  --pink-2: #FF9776;
  --pink-3: #F3ECEC;
  --pink-4: #FFFAF0;
  --pink-5: #E0E3CC;
  --bg-line: #1e1e1e;
  --d-gray: #6A6A6A;
  --d-black: #1A1A1A;
  --d-black-2: #171717;
  --d-black-3: #1A1A1A;
}

@font-face {
  font-family: newYork;
  src: url("/assets/fonts/newyork/FontsFree-Net-NewYork.ttf");
  font-weight: 400;
}
/*----------------------------------------*/
/*  02. MIXIN CSS START
/*----------------------------------------*/
/*----------------------------------------*/
/*  03. SPACE CSS START
/*----------------------------------------*/
.pb-100 {
  padding-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-100 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-100 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}

.pb-110 {
  padding-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-110 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-110 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-110 {
    padding-bottom: 60px;
  }
}

.pb-120 {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-120 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-120 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-120 {
    padding-bottom: 60px;
  }
}

.pb-130 {
  padding-bottom: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-130 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-130 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-130 {
    padding-bottom: 60px;
  }
}

.pb-140 {
  padding-bottom: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-140 {
    padding-bottom: 90px;
  }
}
/* 1200-1399px jumps back to the base 140px (matching full desktop) instead
   of continuing the 90px tablet taper just above - scoped to the Case
   Studies section specifically so other .pb-140 users aren't affected. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area.pb-140 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-140 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-140 {
    padding-bottom: 60px;
  }
}

.pb-70 {
  padding-bottom: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-70 {
    padding-bottom: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-70 {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-70 {
    padding-bottom: 30px;
  }
}

.pb-50 {
  padding-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-50 {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-50 {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-50 {
    padding-bottom: 20px;
  }
}

.pb-25 {
  padding-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-25 {
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-25 {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-25 {
    padding-bottom: 10px;
  }
}

.pb-5 {
  padding-bottom: 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-5 {
    padding-bottom: 3px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-5 {
    padding-bottom: 3px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-5 {
    padding-bottom: 2px;
  }
}

.pb-150 {
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-150 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-150 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-150 {
    padding-bottom: 60px;
  }
}

.pb-200 {
  padding-bottom: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-200 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-200 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-200 {
    padding-bottom: 60px;
  }
}

.pt-42 {
  padding-top: 40px;
}

.pt-100 {
  padding-top: 100px;
}
@media only screen and (max-width: 767px) {
  .pt-100 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-100 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-100 {
    padding-top: 90px;
  }
}

.pt-110 {
  padding-top: 110px;
}
@media only screen and (max-width: 767px) {
  .pt-110 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-110 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-110 {
    padding-top: 90px;
  }
}

.pt-120 {
  padding-top: 120px;
}
@media only screen and (max-width: 767px) {
  .pt-120 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-120 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-120 {
    padding-top: 90px;
  }
}

.pt-130 {
  padding-top: 130px;
}
@media only screen and (max-width: 767px) {
  .pt-130 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-130 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-130 {
    padding-top: 90px;
  }
}

.pt-65 {
  padding-top: 65px;
}
@media only screen and (max-width: 767px) {
  .pt-65 {
    padding-top: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-65 {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-65 {
    padding-top: 45px;
  }
}

.pt-45 {
  padding-top: 45px;
}
@media only screen and (max-width: 767px) {
  .pt-45 {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-45 {
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-45 {
    padding-top: 30px;
  }
}

.pt-22 {
  padding-top: 22px;
}
@media only screen and (max-width: 767px) {
  .pt-22 {
    padding-top: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-22 {
    padding-top: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-22 {
    padding-top: 15px;
  }
}

.pt-4 {
  padding-top: 4px;
}
@media only screen and (max-width: 767px) {
  .pt-4 {
    padding-top: 2px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-4 {
    padding-top: 3px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-4 {
    padding-top: 3px;
  }
}

.pt-140 {
  padding-top: 140px;
}
@media only screen and (max-width: 767px) {
  .pt-140 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-140 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-140 {
    padding-top: 90px;
  }
}

.pt-150 {
  padding-top: 150px;
}
@media only screen and (max-width: 767px) {
  .pt-150 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-150 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-150 {
    padding-top: 90px;
  }
}

.sp-x {
  padding-left: 100px;
  padding-right: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sp-x {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sp-x {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .sp-x {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.mt-60 {
  margin-top: 60px;
}

.ht-200 {
  padding-top: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ht-200 {
    padding-top: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ht-200 {
    padding-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .ht-200 {
    padding-top: 130px;
  }
}

/*----------------------------------------*/
/*  04. ANIMATION CSS START
/*----------------------------------------*/
@-webkit-keyframes wcRotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
  50% {
    -webkit-transform: rotate(5deg) scale(1.17);
            transform: rotate(5deg) scale(1.17);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
}
@keyframes wcRotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
  50% {
    -webkit-transform: rotate(5deg) scale(1.17);
            transform: rotate(5deg) scale(1.17);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
}
@-webkit-keyframes wcBubble {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcBubble {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}
@-webkit-keyframes wcZoom {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcZoom {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 1;
  }
}
@-webkit-keyframes wcSlideBottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes wcSlideBottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes reveal {
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes reveal {
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@-webkit-keyframes wcfadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes wcfadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes wcSpinner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes wcSpinner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*----------------------------------------*/
/*  05. THEME CSS START
/*----------------------------------------*/
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Kanit", sans-serif;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  position: relative;
  z-index: 1;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

button {
  background-color: transparent;
  border: 0;
}

p {
  padding: 0;
  margin: 0;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  color: var(--black-3);
  position: relative;
  z-index: 1;
}

video,
iframe,
img {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.line {
  position: relative;
}
.line::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--white-4);
}
.line::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: calc(50% - 1px);
  top: 0;
  background: var(--white-4);
}
.line-3 {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  right: 0;
  top: 0;
  background: var(--white-4);
}

.shape {
  position: absolute;
  left: -90px;
  bottom: -350px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .shape {
    left: 200%;
    bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .shape {
    left: 70%;
    bottom: 0;
  }
}
.shape .primary {
  width: 54px;
  height: 56px;
  background-color: var(--primary);
  margin-top: -37px;
  margin-left: 24px;
}
.shape .secondary {
  width: 53px;
  height: 56px;
  background-color: var(--secondary);
}

.pos-inherit {
  position: inherit;
}

@media only screen and (max-width: 767px) {
  .g-0 {
    padding-right: 15px;
    padding-left: 15px;
  }
  br {
    display: none;
  }
}
.sec-title-wrapper {
  position: relative;
  z-index: 9;
}

.footer-line {
  position: relative;
}
.footer-line::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 500px;
  left: 0;
  bottom: -400px;
  background: var(--white-4);
}
@media (max-width: 1023px) {
  .footer-line::after {
    height: 0;
  }
}

.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9991;
  border-radius: 100px;
  color: var(--white);
  background: var(--white);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: none;
  mix-blend-mode: exclusion;
}
.scroll-top i {
  font-size: 18px;
  color: var(--black-2);
}
.scroll-top:hover {
  color: var(--gray-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-top {
    bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .scroll-top {
    right: 10px;
    bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .scroll-top {
    right: 5px;
    bottom: 55px;
  }
}

.logo-light {
  display: none;
}
.logo-dark {
  display: block;
}

.font-20 {
  font-size: 20px !important;
}

/*----------------------------------------*/
/*  06. THEME DARK CSS START
/*----------------------------------------*/
.dark {
  background-color: var(--black-2);
}
.dark .logo-light {
  display: block;
}
.dark .logo-dark {
  display: none;
}
.dark .portfolio__page section {
  margin-top: 0;
}
.dark .portfolio__page .wc-btn-dark:hover {
  color: var(--black-2);
  background-color: var(--white);
  border-color: var(--white);
}
.dark .wc-btn-primary, .dark .wc-btn-black, .dark .wc-btn-light, .dark .wc-btn-pink,
.dark .wc-btn-secondary {
  border-color: var(--secondary);
  color: var(--gray-2);
}
.dark .wc-btn-black:hover {
  border-color: var(--white);
  color: var(--black-2);
}
.dark .wc-btn-black:hover span {
  background-color: var(--white);
}
.dark .line::before,
.dark .line::after,
.dark .line-3 {
  background-color: var(--bg-line);
}
.dark p {
  color: var(--gray-2);
}
.dark .sec-title,
.dark .sec-title-2,
.dark .sec-title-3,
.dark .sec-sub-title {
  color: var(--white);
}
.dark .main-dropdown {
  background-color: var(--white);
}
.dark .main-dropdown .sub-dropdown {
  background-color: var(--white);
}
.dark .main-dropdown li a {
  color: var(--black-2) !important;
}
.dark .main-dropdown li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2) !important;
}
.dark .main-dropdown li a:hover {
  letter-spacing: 1px;
}
.dark .mega-menu, .dark .mega-menu-2 {
  background-color: var(--white);
}
.dark .mega-menu a:not([href]), .dark .mega-menu-2 a:not([href]),
.dark .mega-menu a:not([href]):hover {
  color: var(--black-2) !important;
}
.dark .mega-menu li a, .dark .mega-menu-2 li a {
  color: var(--black-2) !important;
}
.dark .mega-menu li a .menu-text, .dark .mega-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2) !important;
}
.dark .mega-menu li a:hover, .dark .mega-menu-2 li a:hover {
  letter-spacing: 1px;
}
.dark .header__area-3.sticky-3 {
  background-color: var(--black-2);
  border-color: var(--secondary);
}
.dark .header__area-5.sticky-5 {
  background-color: var(--black-2);
  border-color: var(--secondary);
}
.dark .hero__area-3 {
  background-color: var(--d-black-2);
}
.dark .hero__area-3::before {
  -webkit-filter: invert(0.9);
          filter: invert(0.9);
}
.dark .hero__area-3 .sec-sub-title,
.dark .hero__area-3 .sec-title,
.dark .hero__area-3 .intro-title .video-title {
  color: var(--white);
}
.dark .hero__area-3 .scroll-down img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .hero__area-3 .sec-sub-title::after {
  background-color: var(--white);
}
.dark .hero__area-5 {
  background-color: var(--black-2);
}
.dark .hero__area-5 img {
  -webkit-filter: invert(0);
          filter: invert(0);
}
.dark .hero__title-5, .dark .hero__content-5 p {
  color: var(--white);
}
.dark .hero-title {
  color: var(--white);
}
.dark .hero__inner-3 .video-intro-title {
  color: var(--gray-2);
}
.dark .hero__inner-3 .video-intro-title span {
  color: var(--white);
}
.dark .hero__about {
  background-color: var(--d-black-2);
  background-blend-mode: color-burn;
}
.dark .hero__about-award::before {
  background-color: var(--secondary);
}
.dark .hero__about-award img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .about__area {
  background: var(--black-2);
}
.dark .about__area .sec-title {
  color: var(--white);
}
.dark .about__area-2 {
  background-color: var(--d-black-2);
}
.dark .about__content p {
  color: var(--gray-2);
}
.dark .counter__area {
  background-color: var(--black-2);
}
@media (max-width: 1200px) {
  .dark .counter__area-3 {
    background-color: var(--black-2);
  }
}
.dark .counter__area-3 .counter__number {
  color: var(--white);
}
.dark .counter__about {
  background-color: var(--d-black-2);
}
.dark .counter__number {
  color: var(--white);
}
.dark .counter__item {
  border-color: var(--secondary);
}
.dark .counter__item::before {
  background-color: transparent;
}
.dark .counter__item::after {
  background-color: transparent;
}
.dark .counter__img-3 img {
  -webkit-filter: contrast(0.5);
          filter: contrast(0.5);
}
.dark .workflow__area {
  background-color: var(--black-2);
}
.dark .workflow__area .sec-title {
  color: var(--white);
}
.dark .workflow__area-3 {
  background-color: var(--black-2);
}
.dark .workflow__area-6 {
  background-color: var(--d-black-2);
}
.dark .workflow__slide::before {
  background-color: var(--bg-line);
}
.dark .workflow__slide::after {
  border-color: var(--black-2);
}
.dark .workflow__wrapper-6 {
  border-color: var(--secondary);
}
.dark .workflow__number {
  color: var(--d-black-3);
}
.dark .workflow__title {
  color: var(--white);
}
.dark .workflow__title-6 {
  color: var(--white);
}
.dark .workflow__step {
  color: var(--white);
}
.dark .brand__area {
  background-color: var(--black-2);
}
.dark .brand__area .sec-title {
  color: var(--white);
}
.dark .brand__about {
  background-color: var(--d-black-2);
}
.dark .brand__title-3 {
  color: var(--white);
}
.dark .brand__list, .dark .brand__list-3, .dark .brand__list-2 {
  background-color: transparent;
  border-color: var(--bg-line);
}
.dark .brand__item {
  border-color: var(--bg-line);
}
.dark .service__area {
  background-color: var(--d-black-2);
}
.dark .service__area-2 {
  background-color: var(--black-2);
}
.dark .service__area-2.service-v3 {
  background-color: var(--d-black-2);
}
.dark .service__area-2 .sec-text p {
  color: var(--white);
}
.dark .service__area-3 {
  background-color: var(--d-black-2);
}
.dark .service__area-3 .sec-title-wrapper::after {
  background-color: var(--secondary);
}
.dark .service__area-3 .sec-sub-title {
  background-color: var(--d-black-2);
}
.dark .service__area-3 .sec-title {
  background-color: var(--d-black-2);
}
.dark .service__area-6 {
  background-color: var(--d-black-2);
}
.dark .service__item-2::before {
  background-color: var(--secondary);
}
.dark .service__item-2 p,
.dark .service__item-2 ul li {
  color: var(--gray-2);
}
.dark .service__item-3, .dark .service__item-3:first-child {
  border-color: var(--secondary);
}
.dark .service__title-3:hover, .dark .service__title-2, .dark .service__title-3 {
  color: var(--white);
}
.dark .service__content-3 ul li {
  color: var(--gray-2);
}
.dark .service__content-3 p {
  color: var(--white);
}
.dark .service__detail {
  background-color: var(--d-black-2);
}
.dark .service-v4.pb-150 {
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dark .service-v4.pb-150 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .service-v4.pb-150 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .dark .service-v4.pb-150 {
    padding-bottom: 60px;
  }
}
.dark .portfolio__area {
  background-color: var(--d-black-2);
}
.dark .portfolio__area-2 {
  background-color: var(--black-2);
}
.dark .portfolio__area-2::after {
  background: var(--secondary);
}
.dark .portfolio__area-5 {
  background-color: var(--black-2);
  border-color: var(--secondary);
}
.dark .portfolio__area-5::before, .dark .portfolio__area-5::after,
.dark .portfolio__area-5 .sec-line-1,
.dark .portfolio__area-5 .sec-line-2 {
  -webkit-filter: invert(0);
          filter: invert(0);
}
.dark .portfolio__area-6 {
  background-color: var(--black-2);
}
.dark .portfolio__area-6 .pb-140 {
  padding-bottom: 0;
}
.dark .portfolio__area-6 .sec-title-wrapper p::before {
  background-color: var(--white);
}
.dark .portfolio-v4 {
  background-color: var(--d-black-2);
}
.dark .portfolio__slider-2::after {
  background: var(--secondary);
}
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet {
  border-color: var(--secondary);
}
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet::after {
  background-color: var(--secondary);
}
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet-active, .dark .portfolio__slider-2-pagination .swiper-pagination-bullet:hover {
  border-color: var(--white);
}
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet-active::after, .dark .portfolio__slider-2-pagination .swiper-pagination-bullet:hover::after {
  background-color: var(--white);
}
.dark .portfolio__slide-2 {
  background-color: var(--black-2);
}
.dark .portfolio__slide-2 .sec-title a {
  color: var(--white);
}
.dark .portfolio__slide-2 .btn-common {
  color: var(--gray);
}
.dark .portfolio__slide-2 .btn-common:hover {
  color: var(--white);
}
.dark .portfolio__detail {
  background-color: var(--black-2);
}
.dark .portfolio__detail-info ul li {
  color: var(--gray-2);
}
.dark .portfolio__detail-info ul li a,
.dark .portfolio__detail-info ul li span {
  color: var(--gray-2);
}
.dark .portfolio__detail-title {
  color: var(--white);
}
.dark .portfolio__detail-text p,
.dark .portfolio__detail-text li {
  color: var(--gray-2);
}
.dark .portfolio__detail-text .fonts img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__detail-text .fonts ul .semibold,
.dark .portfolio__detail-text .fonts ul .medium {
  color: var(--gray-2);
}
.dark .portfolio__title-6, .dark .portfolio__current {
  color: var(--white);
}
.dark .portfolio__date, .dark .portfolio__pagination-6 {
  color: var(--gray-2);
}
.dark .portfolio__project {
  background-color: var(--black-2);
}
.dark .portfolio__project::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__project .pp-title,
.dark .portfolio__project .pp-slide-title,
.dark .portfolio__project .swipper-btn {
  color: var(--white);
}
.dark .portfolio__project .pp-slide-thumb p {
  color: var(--gray-2);
}
.dark .portfolio__project .pp-prev::after,
.dark .portfolio__project .pp-next::after {
  background-color: var(--white);
}
.dark .portfolio__footer {
  border-color: var(--secondary);
}
.dark .portfolio__footer-area {
  background-color: var(--black-2);
  background-blend-mode: overlay;
}
.dark .portfolio__footer-area::before {
  -webkit-filter: invert(0.8);
          filter: invert(0.8);
}
.dark .portfolio__footer-area::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__footer-area .pf-title,
.dark .portfolio__footer-area .pf-contact h3,
.dark .portfolio__footer-area .pf-contact ul li a,
.dark .portfolio__footer-area .pf-social ul li a {
  color: var(--white);
}
.dark .portfolio__footer-area .pf-social ul li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.dark .portfolio__service {
  background-color: var(--d-black-2);
  background-blend-mode: overlay;
}
.dark .portfolio__service .sec-text, .dark .portfolio__service-item {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__service .ps-btn a {
  color: var(--white);
  border-color: var(--white);
}
.dark .portfolio__hero .title {
  color: var(--white);
}
.dark .portfolio__hero .title.text-stroke {
  -webkit-text-stroke: 1px var(--white);
}
.dark .portfolio__hero .title.shape-circle::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__hero-area {
  background-color: var(--black-2);
}
.dark .portfolio__hero-area::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__about {
  background-color: var(--d-black-2);
}
.dark .portfolio__about::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__about .sec-text p {
  color: var(--gray-2);
}
.dark .portfolio__about .sec-title span::before {
  background-color: var(--white);
}
.dark .portfolio__about-left img {
  -webkit-filter: invert(0.5);
          filter: invert(0.5);
}
.dark .portfolio__about .brand-title {
  color: var(--gray-2);
}
.dark .portfolio__about .about-row,
.dark .portfolio__about .brand-title-wrap {
  border-color: var(--secondary);
}
.dark .wc-btn-dark {
  color: var(--white);
  border-color: var(--white);
}
.dark .testimonial__area {
  background-color: var(--black-2);
}
.dark .testimonial__area .sec-title {
  color: var(--white);
}
.dark .testimonial__area-2 {
  background-color: var(--d-black-2);
}
.dark .testimonial__area-3 {
  background-color: var(--d-black-2);
  background-image: none;
}
.dark .testimonial__area-3 p::before {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .testimonial__pagination .next-button, .dark .testimonial__pagination .prev-button {
  border-color: var(--secondary);
}
.dark .testimonial__pagination .next-button i, .dark .testimonial__pagination .prev-button i {
  color: var(--secondary);
}
.dark .testimonial__pagination .next-button:hover, .dark .testimonial__pagination .prev-button:hover {
  border-color: var(--white);
}
.dark .testimonial__pagination .next-button:hover i, .dark .testimonial__pagination .prev-button:hover i {
  color: var(--white);
}
.dark .testimonial__title, .dark .testimonial__title-2, .dark .testimonial__author {
  color: var(--white);
}
.dark .testimonial__img.b-right::after {
  border-color: var(--secondary);
  z-index: 0;
}
.dark .testimonial__img.b-left::before {
  border-color: var(--bg-line);
  z-index: 1;
}
.dark .testimonial__role {
  color: var(--gray-2);
}
.dark .testimonial__slide-3 p {
  color: var(--white);
}
.dark .testimonial__inner-2 {
  background-color: var(--d-black-2);
}
.dark .testimonial__slider-3 .swipper-btn:hover {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-color: var(--white);
}
.dark .client__name-3 {
  color: var(--white);
}
.dark .client__role-3 {
  color: var(--gray-2);
}
.dark .blog__area {
  background-color: var(--black-2);
}
.dark .blog__area.no-pb {
  margin-bottom: -150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dark .blog__area.no-pb {
    margin-bottom: -90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .blog__area.no-pb {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dark .blog__area.no-pb {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dark .blog__area .pb-140 {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .blog__area .pb-140 {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dark .blog__area .pb-140 {
    padding-bottom: 0;
  }
}
.dark .blog__area-2, .dark .blog__area-6 {
  background-color: var(--d-black-2);
}
.dark .blog__area .sec-title {
  color: var(--white);
}
.dark .blog__area-3 {
  background-color: var(--d-black-2);
}
.dark .blog__area-3 .sec-sub-title,
.dark .blog__area-3 .sec-title {
  background-color: var(--d-black-2);
}
.dark .blog__area-3 .sec-title-wrapper::after {
  background-color: var(--secondary);
}
.dark .blog__info-3 {
  background-color: var(--d-black-2);
}
.dark .blog__title, .dark .blog__title-3, .dark .blog__title-2 {
  color: var(--white);
  border-color: var(--secondary);
}
.dark .blog__title:hover, .dark .blog__title-3:hover, .dark .blog__title-2:hover {
  color: var(--gray-2);
}
.dark .blog__btn {
  color: var(--gray-2);
}
.dark .blog__btn:hover {
  color: var(--white);
}
.dark .blog__meta, .dark .blog__meta-2 {
  color: var(--gray-2);
}
.dark .blog__meta a, .dark .blog__meta-2 a {
  color: var(--gray-2);
}
.dark .blog__meta a:hover, .dark .blog__meta-2 a:hover {
  color: var(--white);
}
.dark .blog__detail {
  background-color: var(--d-black-2);
}
.dark .blog__detail-title, .dark .blog__detail-date {
  color: var(--white);
}
.dark .blog__detail-date span,
.dark .blog__detail ul li {
  color: var(--gray-2);
}
.dark .blog__detail-tags p {
  color: var(--white);
}
.dark .blog__detail-tags p a {
  color: var(--gray-2);
}
.dark .blog__detail-content h1,
.dark .blog__detail-content h2,
.dark .blog__detail-content h3,
.dark .blog__detail-content h4,
.dark .blog__detail-content h5,
.dark .blog__detail-content h6 {
  color: var(--white);
}
.dark .blog__detail-meta p span {
  color: var(--gray-2);
}
.dark .blog__related {
  background-color: var(--d-black-2);
}
.dark .team__area {
  background-color: var(--d-black-2);
}
.dark .team__area-6 {
  background-color: var(--black-2);
  background-blend-mode: color-burn;
}
.dark .team__about {
  background-color: var(--black-2);
}
.dark .team__btm {
  background-color: var(--black-2);
}
.dark .team__join-btn {
  background-color: var(--d-black-2);
}
.dark .team__member-name-6, .dark .team__member-name-7 {
  color: var(--white);
}
.dark .team__member-role-6, .dark .team__member-role-7 {
  color: var(--gray-2);
}
.dark .team__member-role-7 span {
  color: var(--white);
}
.dark .team__member-role-7::after {
  background-color: var(--white);
}
.dark .team__member-work li a {
  color: var(--white);
}
.dark .team__member-work li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.dark .team__member-social li a:hover {
  color: var(--white);
}
.dark .team__detail {
  background-color: var(--black-2);
}
.dark .team__detail.pb-140 {
  padding-bottom: 60px;
}
.dark .team__detail-page .line-1,
.dark .team__detail-page .line-2,
.dark .team__detail-page .line-3 {
  background: var(--bg-line);
}
.dark .team__detail .work-title {
  color: var(--white);
}
.dark .cta__area {
  background-color: var(--black-2);
}
.dark .cta__area .line {
  padding-top: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dark .cta__area .line {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .cta__area .line {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .dark .cta__area .line {
    padding-top: 60px;
  }
}
.dark .cta__area .line.no-p {
  padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .cta__area .line.no-p {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .dark .cta__area .line.no-p {
    padding-top: 60px;
  }
}
.dark .cta__area .dark-p {
  padding-top: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dark .cta__area .dark-p {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .cta__area .dark-p {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .dark .cta__area .dark-p {
    padding-top: 60px;
  }
}
.dark .cta__area-2 {
  background-color: var(--black-2);
}
.dark .cta__area-2 .wc-btn-pink {
  color: var(--gray-2);
}
.dark .cta__area-3 {
  background-color: var(--d-black-2);
}
.dark .cta__area-5 {
  background-color: var(--black-2);
  -webkit-filter: invert(0);
          filter: invert(0);
  margin: 0;
}
.dark .cta__title {
  color: var(--white);
}
.dark .cta__title-2 {
  color: var(--white);
}
.dark .cta__sub-title {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .dark .cta__content {
    padding-top: 0px;
  }
}
.dark .footer__area {
  background-color: var(--black-2);
}
.dark .footer__area-2 {
  background-color: var(--black-2);
  background-blend-mode: multiply;
  background-position: 100% 1px;
}
.dark .footer__area-5 {
  background-color: var(--black-2);
}
.dark .footer__inner {
  background-color: var(--d-black-2);
}
.dark .footer__middle-2 {
  border-color: var(--secondary);
}
.dark .footer__subscribe-2::before {
  background-color: var(--secondary);
}
.dark .footer__subscribe-2 input {
  color: var(--white);
  border-color: var(--white);
  background-color: transparent;
}
.dark .footer__subscribe-2 input::-webkit-input-placeholder {
  color: var(--white);
}
.dark .footer__subscribe-2 input::-moz-placeholder {
  color: var(--white);
}
.dark .footer__subscribe-2 input:-ms-input-placeholder {
  color: var(--white);
}
.dark .footer__subscribe-2 input::-ms-input-placeholder {
  color: var(--white);
}
.dark .footer__subscribe-2 input::placeholder {
  color: var(--white);
}
.dark .footer__subscribe-2 img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .footer-menu li a, .dark .footer-menu-2 li a {
  color: var(--white);
}
.dark .footer-menu li a .menu-text, .dark .footer-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.dark .footer__copyright-2 p a {
  color: var(--white);
}
.dark .footer__copyright-4 a {
  color: var(--white);
}
.dark .footer-line::after {
  background: var(--bg-line);
}
.dark .footer__location-2 .location h3 {
  color: var(--white);
}
.dark .feature__area-2 {
  background-color: var(--d-black-2);
}
.dark .feature__top {
  border-color: var(--secondary);
}
.dark .feature__item {
  border-color: var(--secondary);
}
.dark .feature__item:nth-child(odd) {
  border-color: var(--secondary);
}
.dark .feature__item img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .feature__item p {
  color: var(--gray-2);
}
.dark .feature__title {
  color: var(--white);
}
.dark .feature__text p {
  color: var(--white);
}
.dark .award__area {
  background-color: var(--d-black-2);
}
.dark .main-menu-3 li a {
  color: var(--white);
}
.dark .main-menu .mega-menu li a, .dark .main-menu .mega-menu-2 li a, .dark .main-menu-4 .mega-menu li a, .dark .main-menu-4 .mega-menu-2 li a {
  color: var(--black-2);
}
.dark .header__nav-icon-3 button {
  color: var(--white);
}
.dark .header__nav-icon-3 img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .choose-title {
  color: var(--white);
}
.dark .research__area {
  background-color: var(--d-black-2);
  background-blend-mode: exclusion;
}
@media (max-width: 1200px) {
  .dark .research__area {
    background-color: var(--black-2);
    padding-bottom: 0;
  }
}
.dark .research__area .sec-sub-title,
.dark .research__area .sec-title-wrapper p {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .dark .research__list {
    padding-bottom: 0;
  }
}
.dark .research__item p, .dark .research__number span, .dark .research__title {
  color: var(--white);
}
.dark .research__tools li a {
  color: var(--white);
  border-color: var(--white);
}
.dark .research__tools li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.dark .price__area {
  background-color: var(--black-2);
}
.dark .price__item:first-child {
  background-color: var(--d-black-2);
}
.dark .story__area {
  background-color: var(--d-black-2);
}
.dark .story__area .line {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dark .story__area .line {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .story__area .line {
    padding-bottom: 90px;
  }
}
.dark .story__text p {
  color: var(--gray-2);
}
.dark .error__page {
  background-color: var(--d-black-2);
}
.dark .error__content h2 {
  color: var(--white);
}
.dark .error__content img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .career__top {
  background-color: var(--black-2);
}
.dark .career__gallery {
  background-color: var(--black-2);
}
.dark .career__gallery ul li {
  color: var(--white);
}
.dark .career__gallery ul li::after {
  background-color: var(--white);
}
.dark .career__gallery p {
  color: var(--gray-2);
}
.dark .career__benefits {
  background-color: var(--black-2);
}
.dark .career__benefits-list li {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__area-6 {
  background-color: var(--black-2);
}
.dark .contact__form input::-webkit-input-placeholder, .dark .contact__form textarea::-webkit-input-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form input::-moz-placeholder, .dark .contact__form textarea::-moz-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form input:-ms-input-placeholder, .dark .contact__form textarea:-ms-input-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form input::-ms-input-placeholder, .dark .contact__form textarea::-ms-input-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form textarea,
.dark .contact__form input,
.dark .contact__form input::placeholder,
.dark .contact__form textarea::placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form textarea:focus,
.dark .contact__form input:focus {
  border-color: var(--white);
}
.dark .contact__info h3,
.dark .contact__info ul li span,
.dark .contact__info ul li a {
  color: var(--white);
}
.dark .faq__area {
  background-color: var(--d-black-2);
}
.dark .faq__area-6 {
  background-color: var(--black-2);
}
.dark .faq__btm {
  background-color: var(--black-2);
}
.dark .faq__list .accordion-button, .dark .faq__list-3 .accordion-button, .dark .faq__list-6 .accordion-button {
  color: var(--white);
}
.dark .faq__title {
  color: var(--white);
}
.dark .faq__list .accordion-item, .dark .faq__list-6 .accordion-item, .dark .faq__list-3 .accordion-item {
  background-color: transparent;
}
.dark .faq__list-3 .accordion-item {
  border-color: var(--bg-line);
}
.dark .faq__list-3 .accordion-item:first-child {
  border-color: var(--bg-line);
}
.dark .accordion-item {
  background-color: var(--black-2);
  border-color: var(--bg-line);
}
.dark .service__faq .accordion-item {
  background-color: var(--d-black-2);
}
.dark .job__detail {
  background-color: var(--black-2);
}
.dark .job__detail-top {
  background-color: var(--d-black-2);
}
.dark .job__detail-content {
  border-color: var(--bg-line);
}
.dark .job__detail-content ul li {
  color: var(--gray-2);
}
.dark .job__detail-content h1,
.dark .job__detail-content h2,
.dark .job__detail-content h3,
.dark .job__detail-content h4,
.dark .job__detail-content h5,
.dark .job__detail-content h6 {
  color: var(--white);
}
.dark .job__detail-meta li {
  color: var(--gray-2);
}
.dark .job__detail-sidebar {
  background-color: var(--d-black-2);
}
.dark .job__detail-sidebar ul li {
  color: var(--gray-2);
}
.dark .development__area {
  background-color: var(--d-black-2);
}
.dark .development__wrapper ul li {
  color: var(--gray-2);
}
.dark .development__content {
  border-color: var(--secondary);
}
.dark .solution__area {
  background-color: var(--black-2);
}
.dark .solution__title {
  color: var(--white);
}
.dark .solution__mid p {
  color: var(--gray-2);
}
.dark .solution__mid p::before {
  background-color: var(--white);
}
.dark .solution__btm li {
  color: var(--white);
}
.dark .solution__img-1::after, .dark .solution__img-2::after, .dark .solution__img-3::after {
  border-color: var(--secondary);
  z-index: 0;
}
.dark .solution__shape .shape-5 {
  z-index: 0;
}
.dark .solution__shape .shape-2 {
  -webkit-filter: invert(1);
          filter: invert(1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dark .solution__shape .shape-4 {
    top: 55%;
  }
}
.dark .modal__apply {
  background-color: var(--d-black-2);
}
.dark .modal__apply .input-apply p,
.dark .modal__apply .form-top p {
  color: var(--white);
}
.dark .modal__apply .input-apply-2 p,
.dark .modal__apply .input-apply-2 input[type=file] {
  color: var(--white);
}
.dark .modal__apply .form-top img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .modal .close_btn-2:hover {
  color: var(--white);
}
.dark .modal__close-2:hover {
  color: var(--white);
}
.dark .menu-text-5 {
  color: var(--white);
}
.dark .circle-pagination button.swiper-pagination-bullet {
  border-color: var(--white);
}
.dark .circle-pagination button.swiper-pagination-bullet span {
  background-color: var(--white);
}
.dark .circle-pagination .circle-origin {
  stroke: var(--white);
}
.dark .circle-pagination-2 .swiper-pagination-bullet {
  border-color: var(--white);
}
.dark .circle-pagination-2 .swiper-pagination-bullet::after {
  background-color: var(--white);
}
.dark .bg-white {
  background-color: var(--black-2) !important;
}
.dark .main-menu-3 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.dark .header__nav-icon-5 img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .menu-text-pp {
  color: var(--white);
}
.dark .job__area {
  background-color: var(--d-black-2);
}
.dark .portfolio__area-5 .sec-line {
  background-color: #D3D3D3;
}
.dark .modal__apply .input-apply textarea,
.dark .modal__apply .input-apply-2 input {
  color: var(--white);
  background-color: var(--d-black-2);
  border-color: var(--black-3);
}
.dark .modal__apply .input-apply textarea:focus,
.dark .modal__apply .input-apply-2 input:focus {
  border-color: var(--white);
}
.dark .error__content::before {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .sticky-2 .header__nav-icon-5 {
  -webkit-filter: invert(0);
          filter: invert(0);
}
.dark .footer__menu-5 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.dark .hero__area-3::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .service__hero-2 {
  background-color: var(--black-2);
  background-image: none;
}
.dark .service__hero-2 .shape-1 {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .service__hero-right-2 .title {
  color: var(--white);
}
.dark .service__hero-right-2 .scroll {
  -webkit-filter: invert(1);
          filter: invert(1);
}

/*----------------------------------------*/
/*  07. Button CSS START
/*----------------------------------------*/
.wc-btn-primary, .wc-btn-black, .wc-btn-light, .wc-btn-pink, .wc-btn-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 170px;
  height: 170px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  text-transform: capitalize;
  color: var(--black-3);
  border: 1px solid var(--gray);
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .wc-btn-primary, .wc-btn-black, .wc-btn-light, .wc-btn-pink, .wc-btn-secondary {
    padding: 30px;
  }
}
.wc-btn-primary:hover, .wc-btn-black:hover, .wc-btn-light:hover, .wc-btn-pink:hover, .wc-btn-secondary:hover {
  color: var(--black-2);
  border: 1px solid var(--primary);
}
.wc-btn-primary:hover span, .wc-btn-black:hover span, .wc-btn-light:hover span, .wc-btn-pink:hover span, .wc-btn-secondary:hover span {
  width: 350px;
  height: 350px;
}
.wc-btn-primary i, .wc-btn-black i, .wc-btn-light i, .wc-btn-pink i, .wc-btn-secondary i {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  padding-left: 5px;
}
.wc-btn-primary span, .wc-btn-black span, .wc-btn-light span, .wc-btn-pink span, .wc-btn-secondary span {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  background-color: var(--primary);
  z-index: -1;
  border-radius: 100%;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.wc-btn-secondary {
  border: 1px solid var(--secondary);
  color: var(--gray-2);
}
.wc-btn-pink {
  border: 1px solid var(--secondary);
  color: var(--gray-2);
}
.wc-btn-pink:hover {
  border-color: var(--pink-2);
}
.wc-btn-pink span {
  background-color: var(--pink-2);
}
.wc-btn-light {
  border: 1px solid var(--secondary);
  color: var(--gray-2);
}
.wc-btn-light:hover {
  border-color: var(--white);
}
.wc-btn-light span {
  background-color: var(--white);
}
.wc-btn-black:hover {
  color: var(--white);
  border-color: var(--black-2);
}
.wc-btn-black span {
  background-color: var(--black-2);
}
.wc-btn-dark {
  display: inline-block;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--black-2);
  border: 1.3px solid var(--black-2);
  border-radius: 33px;
  padding: 20px 54px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.wc-btn-dark:hover {
  color: var(--black-2);
  background-color: var(--white);
  border-color: var(--white);
}

.btn_wrapper,
#btn_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 100%;
  margin-left: -40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .btn_wrapper,
#btn_wrapper {
    width: 220px;
    height: 220px;
    margin-left: -25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .btn_wrapper,
#btn_wrapper {
    width: 190px;
    height: 190px;
    margin-left: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .btn_wrapper,
#btn_wrapper {
    width: 180px;
    height: 180px;
    margin-left: -5px;
  }
}
@media only screen and (max-width: 767px) {
  .btn_wrapper,
#btn_wrapper {
    height: 175px;
    width: 175px;
    margin-left: -2.5px;
  }
}

.btn-item {
  position: absolute;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__top-btn .btn_wrapper,
.service__top-btn #btn_wrapper {
    width: 170px;
    height: 170px;
  }
  .service__top-btn .btn_wrapper .btn-item,
.service__top-btn #btn_wrapper .btn-item {
    top: 0;
    left: 0;
  }
}
.about_btn {
  font-size: 20px !important;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .about_btn {
    font-size: 18px !important;
  }
}
.about_btn::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  bottom: -10px;
  left: 0;
  background-color: var(--black-7);
}

/*----------------------------------------*/
/*  08. TITLE CSS START
/*----------------------------------------*/
.sec-title {
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  color: var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title {
    font-size: 32px;
  }
}
.sec-title-2 {
  font-weight: 500;
  font-size: 120px;
  line-height: 0.9;
  color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .sec-title-2 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title-2 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-2 {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-2 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-2 {
    font-size: 45px;
  }
}
.sec-title-3 {
  font-weight: 500;
  font-size: 130px;
  line-height: 1;
  color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .sec-title-3 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title-3 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-3 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-3 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-3 {
    font-size: 48px;
  }
}
.sec-title-4 {
  font-size: 150px;
  line-height: 1;
  color: var(--black-2);
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title-4 {
    font-size: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-4 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-4 {
    font-size: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-4 {
    font-size: 48px;
  }
}
.sec-title-4 span {
  font-family: "newYork";
  padding-left: 298px;
  display: block;
}
@media only screen and (max-width: 767px) {
  .sec-title-4 span {
    padding-left: 0;
  }
}
.sec-title-4 img {
  margin-top: -30px;
  -webkit-animation: wcSpinner 3s infinite linear;
          animation: wcSpinner 3s infinite linear;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-4 img {
    max-width: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-4 img {
    display: none;
  }
}
.sec-title-5 {
  padding-left: 98px;
}
@media only screen and (max-width: 767px) {
  .sec-title-5 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-5 {
    font-size: 120px;
    line-height: 8.3rem;
  }
}
.sec-title-7 {
  padding-left: 185px;
}
.sec-title-8 {
  font-size: 130px;
  line-height: 1;
  font-weight: 500;
  color: var(--black-2);
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-8 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-8 {
    font-size: 72px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-8 {
    font-size: 60px;
  }
}
.sec-title-8 a {
  font-family: "newYork";
  text-transform: capitalize;
}
.sec-title-16 {
  font-weight: 500;
  font-size: 120px;
  line-height: 0.9;
  color: var(--black-2);
  text-indent: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title-16 {
    font-size: 100px;
    text-indent: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-16 {
    font-size: 90px;
    text-indent: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-16 {
    text-indent: 60px;
    font-size: 72px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-16 {
    text-indent: 20px;
    font-size: 48px;
  }
}
.sec-title-16 span {
  color: var(--black-2);
  font-family: "newYork";
  position: relative;
}
.sec-title-16 span::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 10px;
  left: 0;
  background-color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .sec-title-16 span::after {
    bottom: 0;
  }
}
.sec-sub-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--black-3);
  padding-bottom: 15px;
  text-transform: capitalize;
}

.hero-title {
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  color: var(--black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-title {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-title {
    font-size: 36px;
  }
}

.title-line {
  overflow: hidden;
}

@media (min-width: 1200px) {
  .img-anim {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 565px;
  }
  .img-anim img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 120%;
    margin-left: auto;
    margin-right: auto;
  }
}
.dis_port_4 {
  max-width: 300px;
  text-indent: 90px;
  margin-left: 100px;
  margin-top: 40px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dis_port_4 {
    text-indent: 50px;
    margin-left: 60px;
    margin-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dis_port_4 {
    text-indent: 30px;
    margin-left: 20px;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .dis_port_4 {
    margin-left: 20px;
    text-indent: 30px;
    margin-top: 20px;
  }
}

.section_title_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 130px 50px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section_title_wrapper {
    padding: 110px 30px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section_title_wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .section_title_wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 120px 15px 0;
  }
}
.section_title_wrapper .title_right {
  padding-top: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section_title_wrapper .title_right {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .section_title_wrapper .title_right {
    padding-top: 50px;
  }
}
.section_title_wrapper .title_right__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section_title_wrapper .title_right__inner__left {
  margin-right: 60px;
}
.section_title_wrapper .title_right__inner__left span {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  text-align: right;
  color: var(--black-3);
  display: inline-block;
  position: relative;
}
.section_title_wrapper .title_right__inner__left span::before {
  content: "";
  position: absolute;
  right: 80px;
  top: 50%;
  background-color: #D9D9D9;
  width: 1090px;
  height: 1px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .section_title_wrapper .title_right__inner__left span::before {
    width: 600px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section_title_wrapper .title_right__inner__left span::before {
    width: 500px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section_title_wrapper .title_right__inner__left span::before {
    width: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section_title_wrapper .title_right__inner__left span::before {
    width: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .section_title_wrapper .title_right__inner__left span::before {
    display: none;
  }
}
.section_title_wrapper .title_right__inner__right ul li {
  margin-bottom: 10px;
}
.section_title_wrapper .title_right__inner__right ul li a {
  font-size: 18px;
  color: var(--black-13);
  text-transform: capitalize;
}
.section_title_wrapper .title_right__inner__right ul li a:hover {
  letter-spacing: 1px;
  color: var(--black-2);
}

.dark .sec-title-4 {
  color: var(--white);
}
.dark .sec-title-4 img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .sec-title-8 {
  color: var(--white);
}
.dark .sec-title-16 {
  color: var(--white);
}
.dark .sec-title-16 span {
  color: var(--white);
}
.dark .sec-title-16 span::after {
  background-color: var(--white);
}
.dark .section_title_wrapper .title_right__inner__left span {
  color: var(--gray-2);
}
.dark .section_title_wrapper .title_right__inner__left span::before {
  background-color: var(--gray-2);
}
.dark .section_title_wrapper .title_right__inner__right ul li a {
  color: var(--gray-2);
}
.dark .section_title_wrapper .title_right__inner__right ul li a:hover {
  color: var(--white);
}

/*----------------------------------------*/
/*  09. MENU CSS START
/*----------------------------------------*/
.main-menu > li, .main-menu-4 > li {
  display: inline-block;
  margin: 0 38px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu > li, .main-menu-4 > li {
    margin: 0 19px;
  }
}
.main-menu > li.has-megamenu, .main-menu-4 > li.has-megamenu {
  position: static;
}
.main-menu > li:hover .main-dropdown, .main-menu-4 > li:hover .main-dropdown {
  top: 75px;
  opacity: 1;
  visibility: visible;
}
.main-menu > li:hover .mega-menu, .main-menu > li:hover .mega-menu-2, .main-menu-4 > li:hover .mega-menu, .main-menu-4 > li:hover .mega-menu-2 {
  top: 75px;
  opacity: 1;
  visibility: visible;
}
.main-menu > li > a, .main-menu-4 > li > a {
  display: block;
  font-weight: 400;
  font-size: 18px;
  line-height: 16px;
  color: var(--white);
  padding: 29px 0;
  outline: none;
  text-transform: capitalize;
  -webkit-transform: translateY(var(--y)) translateZ(0);
          transform: translateY(var(--y)) translateZ(0);
  -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
}
.main-menu > li > a .menu-text, .main-menu-4 > li > a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--white);
}
.main-menu > li > a .menu-text span, .main-menu-4 > li > a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.main-menu > li > a .menu-text span:nth-child(1), .main-menu-4 > li > a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.main-menu > li > a .menu-text span:nth-child(2), .main-menu-4 > li > a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.main-menu > li > a .menu-text span:nth-child(3), .main-menu-4 > li > a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.main-menu > li > a .menu-text span:nth-child(4), .main-menu-4 > li > a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.main-menu > li > a .menu-text span:nth-child(5), .main-menu-4 > li > a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.main-menu > li > a .menu-text span:nth-child(6), .main-menu-4 > li > a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.main-menu > li > a .menu-text span:nth-child(7), .main-menu-4 > li > a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.main-menu > li > a .menu-text span:nth-child(8), .main-menu-4 > li > a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.main-menu > li > a .menu-text span:nth-child(9), .main-menu-4 > li > a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.main-menu > li > a .menu-text span:nth-child(10), .main-menu-4 > li > a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.main-menu > li > a .menu-text span:nth-child(11), .main-menu-4 > li > a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.main-menu > li > a .menu-text span:nth-child(12), .main-menu-4 > li > a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.main-menu > li > a .menu-text span:nth-child(13), .main-menu-4 > li > a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.main-menu > li > a .menu-text span:nth-child(14), .main-menu-4 > li > a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.main-menu > li > a .menu-text span:nth-child(15), .main-menu-4 > li > a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.main-menu > li > a .menu-text span:nth-child(16), .main-menu-4 > li > a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.main-menu > li > a .menu-text span:nth-child(17), .main-menu-4 > li > a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.main-menu > li > a .menu-text span:nth-child(18), .main-menu-4 > li > a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.main-menu > li > a .menu-text span:nth-child(19), .main-menu-4 > li > a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.main-menu > li > a .menu-text span:nth-child(20), .main-menu-4 > li > a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.main-menu > li > a .menu-text span:nth-child(21), .main-menu-4 > li > a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.main-menu > li > a .menu-text span:nth-child(22), .main-menu-4 > li > a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.main-menu > li > a .menu-text span:nth-child(23), .main-menu-4 > li > a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.main-menu > li > a .menu-text span:nth-child(24), .main-menu-4 > li > a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.main-menu > li > a .menu-text span:nth-child(25), .main-menu-4 > li > a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.main-menu > li > a .menu-text span:nth-child(26), .main-menu-4 > li > a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.main-menu > li > a .menu-text span:nth-child(27), .main-menu-4 > li > a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.main-menu > li > a .menu-text span:nth-child(28), .main-menu-4 > li > a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.main-menu > li > a .menu-text span:nth-child(29), .main-menu-4 > li > a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.main-menu > li > a .menu-text span:nth-child(30), .main-menu-4 > li > a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.main-menu > li > a .menu-text span:nth-child(31), .main-menu-4 > li > a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.main-menu > li > a .menu-text span:nth-child(32), .main-menu-4 > li > a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.main-menu > li > a .menu-text span:nth-child(33), .main-menu-4 > li > a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.main-menu > li > a .menu-text span:nth-child(34), .main-menu-4 > li > a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.main-menu > li > a .menu-text span:nth-child(35), .main-menu-4 > li > a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.main-menu > li > a .menu-text span:nth-child(36), .main-menu-4 > li > a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.main-menu > li > a .menu-text span:nth-child(37), .main-menu-4 > li > a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.main-menu > li > a .menu-text span:nth-child(38), .main-menu-4 > li > a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.main-menu > li > a .menu-text span:nth-child(39), .main-menu-4 > li > a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.main-menu > li > a .menu-text span:nth-child(40), .main-menu-4 > li > a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.main-menu > li > a .menu-text span:nth-child(41), .main-menu-4 > li > a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.main-menu > li > a .menu-text span:nth-child(42), .main-menu-4 > li > a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.main-menu > li > a .menu-text span:nth-child(43), .main-menu-4 > li > a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.main-menu > li > a .menu-text span:nth-child(44), .main-menu-4 > li > a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.main-menu > li > a .menu-text span:nth-child(45), .main-menu-4 > li > a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.main-menu > li > a .menu-text span:nth-child(46), .main-menu-4 > li > a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.main-menu > li > a .menu-text span:nth-child(47), .main-menu-4 > li > a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.main-menu > li > a .menu-text span:nth-child(48), .main-menu-4 > li > a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.main-menu > li > a .menu-text span:nth-child(49), .main-menu-4 > li > a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.main-menu > li > a:hover, .main-menu-4 > li > a:hover {
  --y: -4px;
}
.main-menu > li > a:hover span, .main-menu-4 > li > a:hover span {
  --m: calc(16px * -1);
}
.main-menu-3 {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .main-menu-3 {
    display: none;
  }
}
.main-menu-3 > li {
  display: inline-block;
  padding: 0 40px;
  margin: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-3 > li {
    padding: 25px 0;
  }
}
.main-menu-3 > li.has-megamenu {
  position: static;
}
.main-menu-3 > li:hover .main-dropdown {
  top: 80px;
  opacity: 1;
  visibility: visible;
}
.main-menu-3 > li:hover .mega-menu, .main-menu-3 > li:hover .mega-menu-2 {
  top: 80px;
  opacity: 1;
  visibility: visible;
}
.main-menu-3 > li > a {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: var(--black-2);
  padding: 27px 0;
  outline: none;
  text-transform: capitalize;
  -webkit-transform: translateY(var(--y)) translateZ(0);
          transform: translateY(var(--y)) translateZ(0);
  -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
}
.main-menu-3 > li > a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--black-2);
}
.main-menu-3 > li > a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.main-menu-3 > li > a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.main-menu-3 > li > a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.main-menu-3 > li > a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.main-menu-3 > li > a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.main-menu-3 > li > a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.main-menu-3 > li > a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.main-menu-3 > li > a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.main-menu-3 > li > a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.main-menu-3 > li > a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.main-menu-3 > li > a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.main-menu-3 > li > a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.main-menu-3 > li > a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.main-menu-3 > li > a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.main-menu-3 > li > a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.main-menu-3 > li > a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.main-menu-3 > li > a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.main-menu-3 > li > a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.main-menu-3 > li > a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.main-menu-3 > li > a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.main-menu-3 > li > a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.main-menu-3 > li > a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.main-menu-3 > li > a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.main-menu-3 > li > a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.main-menu-3 > li > a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.main-menu-3 > li > a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.main-menu-3 > li > a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.main-menu-3 > li > a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.main-menu-3 > li > a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.main-menu-3 > li > a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.main-menu-3 > li > a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.main-menu-3 > li > a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.main-menu-3 > li > a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.main-menu-3 > li > a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.main-menu-3 > li > a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.main-menu-3 > li > a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.main-menu-3 > li > a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.main-menu-3 > li > a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.main-menu-3 > li > a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.main-menu-3 > li > a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.main-menu-3 > li > a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.main-menu-3 > li > a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.main-menu-3 > li > a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.main-menu-3 > li > a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.main-menu-3 > li > a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.main-menu-3 > li > a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.main-menu-3 > li > a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.main-menu-3 > li > a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.main-menu-3 > li > a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.main-menu-3 > li > a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.main-menu-3 > li > a:hover {
  --y: -4px;
}
.main-menu-3 > li > a:hover span {
  --m: calc(16px * -1);
}
.main-menu-4 > li > a {
  color: var(--black-2);
}
.main-menu-4 > li > a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--black-2);
}
.main-menu-4 > li > a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.main-menu-4 > li > a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.main-menu-4 > li > a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.main-menu-4 > li > a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.main-menu-4 > li > a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.main-menu-4 > li > a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.main-menu-4 > li > a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.main-menu-4 > li > a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.main-menu-4 > li > a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.main-menu-4 > li > a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.main-menu-4 > li > a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.main-menu-4 > li > a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.main-menu-4 > li > a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.main-menu-4 > li > a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.main-menu-4 > li > a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.main-menu-4 > li > a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.main-menu-4 > li > a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.main-menu-4 > li > a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.main-menu-4 > li > a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.main-menu-4 > li > a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.main-menu-4 > li > a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.main-menu-4 > li > a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.main-menu-4 > li > a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.main-menu-4 > li > a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.main-menu-4 > li > a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.main-menu-4 > li > a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.main-menu-4 > li > a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.main-menu-4 > li > a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.main-menu-4 > li > a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.main-menu-4 > li > a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.main-menu-4 > li > a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.main-menu-4 > li > a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.main-menu-4 > li > a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.main-menu-4 > li > a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.main-menu-4 > li > a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.main-menu-4 > li > a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.main-menu-4 > li > a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.main-menu-4 > li > a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.main-menu-4 > li > a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.main-menu-4 > li > a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.main-menu-4 > li > a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.main-menu-4 > li > a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.main-menu-4 > li > a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.main-menu-4 > li > a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.main-menu-4 > li > a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.main-menu-4 > li > a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.main-menu-4 > li > a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.main-menu-4 > li > a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.main-menu-4 > li > a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.main-menu-4 > li > a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.main-menu-4 > li > a:hover {
  --y: -4px;
}
.main-menu-4 > li > a:hover span {
  --m: calc(16px * -1);
}
.main-menu .mega-menu li a, .main-menu .mega-menu-2 li a, .main-menu-4 .mega-menu li a, .main-menu-4 .mega-menu-2 li a {
  color: var(--white);
}

.main-dropdown {
  position: absolute;
  width: 300px;
  left: 0;
  top: 85px;
  z-index: 9;
  background-color: var(--black-2);
  text-align: left;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.main-dropdown .sub-dropdown {
  position: absolute;
  width: 300px;
  left: 100%;
  top: 0;
  z-index: 9;
  background-color: var(--black-2);
  text-align: left;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.main-dropdown li {
  display: block;
  margin: 0;
  padding: 0;
}
.main-dropdown li:hover .sub-dropdown {
  opacity: 1;
  visibility: visible;
}
.main-dropdown li a {
  color: var(--white);
  display: block;
  padding: 10px 20px;
  text-transform: capitalize;
}
.main-dropdown li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.main-dropdown li a:hover {
  letter-spacing: 1px;
}

.mega-menu, .mega-menu-2 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 90px;
  z-index: 9;
  background-color: var(--black-2);
  text-align: left;
  padding: 40px 50px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mega-menu, .mega-menu-2 {
    padding: 40px 100px;
  }
}
.mega-menu li, .mega-menu-2 li {
  padding: 0;
  margin: 0;
}
.mega-menu li a, .mega-menu-2 li a {
  color: var(--white);
  font-size: 20px;
  font-weight: 500;
  padding: 10px;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.mega-menu li a .menu-text, .mega-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.mega-menu li a:hover, .mega-menu-2 li a:hover {
  letter-spacing: 1px;
}
.mega-menu li a:not([href]):not([class]), .mega-menu-2 li a:not([href]):not([class]) {
  color: var(--white);
}
.mega-menu li a:not([href]):not([class]):hover, .mega-menu-2 li a:not([href]):not([class]):hover {
  letter-spacing: 0;
  background-color: transparent;
}
.mega-menu li ul, .mega-menu-2 li ul {
  text-align: left;
}
.mega-menu li ul li, .mega-menu-2 li ul li {
  display: block;
  margin: 0;
}
.mega-menu li ul li a, .mega-menu-2 li ul li a {
  font-weight: 400;
  font-size: 16px;
  padding: 10px 12px;
  display: block;
  margin-bottom: 0;
  text-transform: capitalize;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mega-menu li ul li a, .mega-menu-2 li ul li a {
    padding: 6px 12px;
  }
}
.mega-menu-2 {
  width: 1160px;
  padding: 40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
  grid-template-columns: repeat(4, 1fr);
}

.menu-heading {
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  padding-bottom: 10px;
  text-transform: capitalize;
  color: #000;
}

.footer-menu, .footer-menu-2 {
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .footer-menu, .footer-menu-2 {
    text-align: center;
  }
}
.footer-menu li, .footer-menu-2 li {
  display: inline-block;
  padding-left: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer-menu li, .footer-menu-2 li {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-menu li, .footer-menu-2 li {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-menu li, .footer-menu-2 li {
    padding-left: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-menu li, .footer-menu-2 li {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.footer-menu li a, .footer-menu-2 li a {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--black-2);
  text-transform: capitalize;
}
.footer-menu li a .menu-text, .footer-menu-2 li a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--black-2);
}
.footer-menu li a .menu-text span, .footer-menu-2 li a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.footer-menu li a .menu-text span:nth-child(1), .footer-menu-2 li a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.footer-menu li a .menu-text span:nth-child(2), .footer-menu-2 li a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.footer-menu li a .menu-text span:nth-child(3), .footer-menu-2 li a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.footer-menu li a .menu-text span:nth-child(4), .footer-menu-2 li a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.footer-menu li a .menu-text span:nth-child(5), .footer-menu-2 li a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.footer-menu li a .menu-text span:nth-child(6), .footer-menu-2 li a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.footer-menu li a .menu-text span:nth-child(7), .footer-menu-2 li a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.footer-menu li a .menu-text span:nth-child(8), .footer-menu-2 li a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.footer-menu li a .menu-text span:nth-child(9), .footer-menu-2 li a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.footer-menu li a .menu-text span:nth-child(10), .footer-menu-2 li a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.footer-menu li a .menu-text span:nth-child(11), .footer-menu-2 li a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.footer-menu li a .menu-text span:nth-child(12), .footer-menu-2 li a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.footer-menu li a .menu-text span:nth-child(13), .footer-menu-2 li a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.footer-menu li a .menu-text span:nth-child(14), .footer-menu-2 li a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.footer-menu li a .menu-text span:nth-child(15), .footer-menu-2 li a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.footer-menu li a .menu-text span:nth-child(16), .footer-menu-2 li a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.footer-menu li a .menu-text span:nth-child(17), .footer-menu-2 li a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.footer-menu li a .menu-text span:nth-child(18), .footer-menu-2 li a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.footer-menu li a .menu-text span:nth-child(19), .footer-menu-2 li a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.footer-menu li a .menu-text span:nth-child(20), .footer-menu-2 li a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.footer-menu li a .menu-text span:nth-child(21), .footer-menu-2 li a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.footer-menu li a .menu-text span:nth-child(22), .footer-menu-2 li a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.footer-menu li a .menu-text span:nth-child(23), .footer-menu-2 li a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.footer-menu li a .menu-text span:nth-child(24), .footer-menu-2 li a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.footer-menu li a .menu-text span:nth-child(25), .footer-menu-2 li a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.footer-menu li a .menu-text span:nth-child(26), .footer-menu-2 li a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.footer-menu li a .menu-text span:nth-child(27), .footer-menu-2 li a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.footer-menu li a .menu-text span:nth-child(28), .footer-menu-2 li a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.footer-menu li a .menu-text span:nth-child(29), .footer-menu-2 li a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.footer-menu li a .menu-text span:nth-child(30), .footer-menu-2 li a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.footer-menu li a .menu-text span:nth-child(31), .footer-menu-2 li a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.footer-menu li a .menu-text span:nth-child(32), .footer-menu-2 li a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.footer-menu li a .menu-text span:nth-child(33), .footer-menu-2 li a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.footer-menu li a .menu-text span:nth-child(34), .footer-menu-2 li a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.footer-menu li a .menu-text span:nth-child(35), .footer-menu-2 li a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.footer-menu li a .menu-text span:nth-child(36), .footer-menu-2 li a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.footer-menu li a .menu-text span:nth-child(37), .footer-menu-2 li a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.footer-menu li a .menu-text span:nth-child(38), .footer-menu-2 li a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.footer-menu li a .menu-text span:nth-child(39), .footer-menu-2 li a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.footer-menu li a .menu-text span:nth-child(40), .footer-menu-2 li a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.footer-menu li a .menu-text span:nth-child(41), .footer-menu-2 li a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.footer-menu li a .menu-text span:nth-child(42), .footer-menu-2 li a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.footer-menu li a .menu-text span:nth-child(43), .footer-menu-2 li a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.footer-menu li a .menu-text span:nth-child(44), .footer-menu-2 li a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.footer-menu li a .menu-text span:nth-child(45), .footer-menu-2 li a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.footer-menu li a .menu-text span:nth-child(46), .footer-menu-2 li a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.footer-menu li a .menu-text span:nth-child(47), .footer-menu-2 li a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.footer-menu li a .menu-text span:nth-child(48), .footer-menu-2 li a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.footer-menu li a .menu-text span:nth-child(49), .footer-menu-2 li a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.footer-menu li a:hover, .footer-menu-2 li a:hover {
  --y: -4px;
}
.footer-menu li a:hover span, .footer-menu-2 li a:hover span {
  --m: calc(16px * -1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-menu-2 {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-menu-2 {
    margin-bottom: 30px;
  }
}
.footer-menu-2 li a {
  color: var(--white);
  text-transform: uppercase;
}
.footer-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}

/* mean menu customize */
.offcanvas__menu-wrapper.mean-container {
  padding-top: 160px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 142px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 93px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 93px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 40px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 20px 0 20px 100px;
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: 1px solid var(--black-4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  outline: none;
  -webkit-transform: translateY(var(--y)) translateZ(0);
          transform: translateY(var(--y)) translateZ(0);
  -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 80px 0 var(--white);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.0333333333s;
          transition-delay: 0.0333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.0666666667s;
          transition-delay: 0.0666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.1333333333s;
          transition-delay: 0.1333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.1666666667s;
          transition-delay: 0.1666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.2333333333s;
          transition-delay: 0.2333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.2666666667s;
          transition-delay: 0.2666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.3333333333s;
          transition-delay: 0.3333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.3666666667s;
          transition-delay: 0.3666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.4333333333s;
          transition-delay: 0.4333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.4666666667s;
          transition-delay: 0.4666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.5333333333s;
          transition-delay: 0.5333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.5666666667s;
          transition-delay: 0.5666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.6333333333s;
          transition-delay: 0.6333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 0.6666666667s;
          transition-delay: 0.6666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 0.7333333333s;
          transition-delay: 0.7333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 0.7666666667s;
          transition-delay: 0.7666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 0.8333333333s;
          transition-delay: 0.8333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 0.8666666667s;
          transition-delay: 0.8666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 0.9333333333s;
          transition-delay: 0.9333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 0.9666666667s;
          transition-delay: 0.9666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.0333333333s;
          transition-delay: 1.0333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.0666666667s;
          transition-delay: 1.0666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.1333333333s;
          transition-delay: 1.1333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.1666666667s;
          transition-delay: 1.1666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.2333333333s;
          transition-delay: 1.2333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.2666666667s;
          transition-delay: 1.2666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 1.3333333333s;
          transition-delay: 1.3333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 1.3666666667s;
          transition-delay: 1.3666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 1.4333333333s;
          transition-delay: 1.4333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 1.4666666667s;
          transition-delay: 1.4666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 1.5333333333s;
          transition-delay: 1.5333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 1.5666666667s;
          transition-delay: 1.5666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 1.6333333333s;
          transition-delay: 1.6333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover {
  --y: -0px;
  background-color: transparent;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover span {
  --m: calc(80px * -1);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 60px;
    padding-left: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 48px;
    padding-left: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 40px;
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 30px;
    padding-left: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px;
    padding-left: 15px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  width: 60px;
  height: 96px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 300;
  border: none !important;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 76px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 64px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 57px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 46px;
    width: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 36px;
    width: 36px;
    padding: 11px 12px 13px !important;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--secondary);
  opacity: 1;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size: 24px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 20px 0 20px 150px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a:hover {
  letter-spacing: 1px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 60px;
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 20px;
    padding: 15px 0 15px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 18px;
    padding: 15px 0 15px 30px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 23px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
  padding-left: 180px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 30px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-bar {
  padding: 0;
  background: none;
}
.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
  display: none !important;
}

.header__area-2 .main-dropdown {
  background-color: var(--white);
}
.header__area-2 .main-dropdown li a {
  color: var(--black-2);
}
.header__area-2 .main-dropdown li a:hover {
  letter-spacing: 1px;
}
.header__area-2 .main-dropdown li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2);
}
.header__area-2 .main-dropdown .sub-dropdown {
  background-color: var(--white);
}
.header__area-2 .mega-menu, .header__area-2 .mega-menu-2 {
  background-color: var(--white);
}
.header__area-2 .mega-menu li a, .header__area-2 .mega-menu-2 li a {
  color: var(--black-2);
}
.header__area-2 .mega-menu li a:hover, .header__area-2 .mega-menu-2 li a:hover {
  letter-spacing: 1px;
}
.header__area-2 .mega-menu li a:not([href]):not([class]), .header__area-2 .mega-menu-2 li a:not([href]):not([class]) {
  color: var(--black-2);
}
.header__area-2 .mega-menu li a .menu-text, .header__area-2 .mega-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2);
}

.dark .menu-heading {
  color: var(--black-2);
}

/*----------------------------------------*/
/*  10. MODAL CSS START
/*----------------------------------------*/
.modal__testimonial {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  z-index: 9991;
  -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s 0s, -webkit-transform 0.25s;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, -webkit-transform 0.25s;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s, -webkit-transform 0.25s;
}
.modal__testimonial-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: var(--white);
  border-radius: 5px;
  width: 760px;
  height: 500px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__testimonial-content {
    width: 700px;
    height: 480px;
  }
}
@media only screen and (max-width: 767px) {
  .modal__testimonial-content {
    width: 320px;
    height: 300px;
  }
}
.modal__testimonial-content iframe {
  width: 100%;
  height: 100%;
}
.modal__close {
  background: var(--secondary);
  color: var(--white);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 100%;
  font-size: 18px;
  position: absolute;
  right: -15px;
  top: -15px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (max-width: 767px) {
  .modal__close {
    right: -5px;
    top: -5px;
  }
}
.modal__close:hover {
  color: var(--primary);
}
.modal__close-2 {
  background-color: transparent;
  color: var(--black-3);
  width: 30px;
  height: 30px;
  border: none;
  font-size: 24px;
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .modal__close-2 {
    right: 20px;
    top: 15px;
  }
}
.modal__close-2:hover {
  color: var(--black-2);
}
.modal__application {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s 0s, -webkit-transform 0.25s;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, -webkit-transform 0.25s;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s, -webkit-transform 0.25s;
  z-index: 9991;
}
.modal__apply {
  padding: 100px 50px;
  max-width: 1130px;
  height: 96vh;
  margin: 0 auto;
  margin-top: 2vh;
  overflow-y: auto;
  position: relative;
  background-color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .modal__apply {
    max-width: 960px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply {
    max-width: 720px;
  }
}
@media only screen and (max-width: 767px) {
  .modal__apply {
    padding: 50px 20px;
    margin-top: 0;
    height: 100vh;
  }
}
.modal__apply .wc-btn-primary, .modal__apply .wc-btn-secondary, .modal__apply .wc-btn-pink, .modal__apply .wc-btn-light, .modal__apply .wc-btn-black {
  width: 120px;
  height: 120px;
}
.modal__apply .form-top {
  text-align: center;
  padding-bottom: 50px;
}
.modal__apply .form-top img {
  margin-bottom: 40px;
}
.modal__apply .form-top p {
  font-size: 18px;
  color: var(--black-2);
  border: 1px solid var(--black-3);
  border-radius: 30px;
  display: inline-block;
  padding: 5px 35px;
  margin-top: 20px;
}
.modal__apply .input-apply {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 90px 2.2fr;
  grid-template-columns: 1fr 2.2fr;
  grid-gap: 90px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .modal__apply .input-apply {
    -ms-grid-columns: 1fr 30px 2fr;
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .modal__apply .input-apply {
    -ms-grid-columns: 1fr 30px 2fr;
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply .input-apply {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .modal__apply .input-apply {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}
.modal__apply .input-apply-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 50px 4fr;
  grid-template-columns: 1fr 4fr;
  grid-gap: 50px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .modal__apply .input-apply-2 {
    -ms-grid-columns: 1fr 30px 2fr;
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .modal__apply .input-apply-2 {
    -ms-grid-columns: 1fr 30px 2fr;
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply .input-apply-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .modal__apply .input-apply-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}
.modal__apply .input-apply-2 p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}
.modal__apply .input-apply-2 input {
  width: 100%;
  border: 1px solid var(--white-4);
  outline: none;
  padding: 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.modal__apply .input-apply-2 input:focus {
  border: 1px solid var(--black-3);
}
.modal__apply .input-apply p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}
.modal__apply .input-apply textarea {
  width: 100%;
  height: 125px;
  border: 1px solid var(--white-4);
  outline: none;
  padding: 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply .input-apply textarea {
    height: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .modal__apply .input-apply textarea {
    height: 90px;
  }
}
.modal__apply .input-apply textarea:focus {
  border: 1px solid var(--black-3);
}
.modal__apply .form-btn button {
  margin-left: auto;
  margin-top: 30px;
  background-color: transparent;
  z-index: 1;
}
.modal__apply .form-btn-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 20px;
  margin-top: 20px;
}
.modal__apply .form-btn-2 button {
  background-color: transparent;
  z-index: 1;
}
.modal-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: visibility 0s linear 0s, opacity 0.25s 0s, -webkit-transform 0.25s;
  transition: visibility 0s linear 0s, opacity 0.25s 0s, -webkit-transform 0.25s;
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s, -webkit-transform 0.25s;
}

/*----------------------------------------*/
/*  11. CURSOR CSS START
/*----------------------------------------*/
.cursor {
  position: fixed;
  left: 0;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--white);
  background: var(--black-2);
  text-transform: capitalize;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 999;
  opacity: 0;
  mix-blend-mode: hard-light;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.cursor.large {
  width: 180px;
  height: 180px;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
}

.cursor1 {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid #fe8214;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: 0.15s;
  transition: 0.15s;
  z-index: 999;
}
.cursor1.cursor-on-dark {
  border-color: var(--primary);
}
@media (max-width: 1200px) {
  .cursor1 {
    display: none;
  }
}
/* Width alone isn't a reliable signal for "has a mouse" - a touch-only
   tablet/laptop at 1200-1399px (or wider) still has no pointer to drive
   this, so it never gets repositioned by mousemove and just sits stuck at
   its default (0,0) corner position. Hide it on any touch-primary device
   regardless of viewport width. */
@media (hover: none), (pointer: coarse) {
  .cursor1 {
    display: none;
  }
}
.cursor1.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: #fe8214;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  z-index: 999;
}
.cursor2.cursor-on-dark {
  background-color: var(--primary);
}
@media (max-width: 1200px) {
  .cursor2 {
    display: none;
  }
}
/* See the matching rule on .cursor1 above - width alone doesn't tell us
   whether the device actually has a mouse. */
@media (hover: none), (pointer: coarse) {
  .cursor2 {
    display: none;
  }
}
.cursor2.hide {
  opacity: 0;
  visibility: hidden;
}
.cursor2.circle {
  width: 60px;
  height: 60px;
}

.cursor-testi {
  position: fixed;
  width: 80px;
  height: 80px;
  background-color: var(--black-2);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  z-index: 999;
}
@media (max-width: 1200px) {
  .cursor-testi {
    display: none;
  }
}
.cursor-testi.hide {
  opacity: 0;
  visibility: hidden;
}
.cursor-testi.play {
  width: 100px;
  height: 100px;
  mix-blend-mode: unset;
  background-color: var(--black-2);
}
.cursor-testi.play::after {
  position: absolute;
  content: "Play";
  color: var(--white);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#featured_cursor {
  background: var(--white);
  color: var(--black-2);
}

@media (max-width: 1200px) {
  #client_cursor {
    display: none;
  }
}

.switcher__area {
  position: relative;
  direction: ltr;
}
@media only screen and (max-width: 767px) {
  .switcher__area {
    display: none;
  }
}
.switcher__icon {
  position: fixed;
  width: 50px;
  height: 50px;
  background: var(--white);
  right: 0;
  top: 40%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 999;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  mix-blend-mode: exclusion;
}
.switcher__icon button {
  font-size: 24px;
  color: var(--black-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.switcher__icon button:hover {
  color: var(--gray-2);
}
.switcher__icon button#switcher_open {
  -webkit-animation: wcSpinner 5s infinite linear;
          animation: wcSpinner 5s infinite linear;
}
.switcher__items {
  width: 280px;
  padding: 50px 30px;
  background: var(--black-2);
  position: fixed;
  right: -280px;
  top: 40%;
  z-index: 99;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: "Kanit", sans-serif;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.switcher__items .wc-col-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.switcher__item {
  margin-bottom: 30px;
}
.switcher__item:nth-child(2) {
  margin-bottom: 0;
}
.switcher__item:last-child {
  margin-bottom: 0;
  display: none;
}
.switcher__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  text-transform: capitalize;
  padding-bottom: 10px;
}
.switcher__btn button {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-2);
  background: #2B2B2F;
  border-radius: 4px;
  padding: 10px 15px;
  text-transform: capitalize;
}
.switcher__btn button:hover, .switcher__btn button.active {
  color: var(--white);
}
.switcher__btn select {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-2);
  width: 100%;
  border: none;
  padding: 9px 10px;
  border-radius: 4px;
  background: #2B2B2F;
  text-transform: capitalize;
  outline: none;
  cursor: pointer;
}

#switcher_close {
  display: none;
}

/*----------------------------------------*/
/*  12. HEADER CSS START
/*----------------------------------------*/
.header__area {
  position: fixed;
  width: 100px;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9991;
  border-right: 1px solid rgba(240, 240, 240, 0.07);
  mix-blend-mode: exclusion;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .header__area {
    width: 62px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header__area {
    width: 62px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__area {
    padding: 0 15px;
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__area {
    padding: 0 15px;
    width: 100%;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .header__area {
    padding: 0 15px;
    width: 100%;
    height: auto;
  }
}
.header__area button {
  display: block;
  margin-top: -58px;
  padding: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__area button {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__area button {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .header__area button {
    margin-top: 0;
  }
}
.header__area-2 {
  padding: 3px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}
.header__area-2-solid {
  background-color: var(--black-2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header__area-3 {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
}
.header__area-3.sticky-3 {
  background-color: var(--white);
  border-bottom: 1px solid var(--white-2);
}
.header__area-7 {
  padding: 3px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}
.header__inner {
  padding: 50px 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 9;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner {
    padding: 10px 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner {
    padding: 10px 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .header__inner {
    padding: 5px 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
  }
}
.header__inner-2, .header__inner-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 150px auto 150px;
  grid-template-columns: 150px auto 150px;
  padding: 0 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner-2, .header__inner-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner-2, .header__inner-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .header__inner-2, .header__inner-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 20px 15px;
  }
}
.header__inner-3 {
  padding: 10px 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner-3 {
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner-3 {
    padding: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .header__inner-3 {
    padding: 20px 15px;
  }
}
.header__nav-2 {
  text-align: right;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav-2 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__nav-2 {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .header__nav-2 {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav-icon {
    grid-column: -1;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__nav-icon {
    grid-column: -1;
  }
}
@media only screen and (max-width: 767px) {
  .header__nav-icon {
    grid-column: -1;
  }
}
.header__nav-icon-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
}
.header__nav-icon-2 .menu-icon-2::after {
  position: absolute;
  content: "";
  width: 180px;
  height: 180px;
  right: -60px;
  top: -60px;
  border: 1px solid var(--black-4);
  border-radius: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header__nav-icon-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
}
.header__nav-icon-3 .search-icon {
  padding-top: 3px;
  padding-right: 50px;
  position: relative;
  font-size: 18px;
}
.header__nav-icon-3 .search-icon::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 20px;
  right: 25px;
  top: 5px;
  background-color: var(--white-2);
}
.header__nav-icon-3 #search_close {
  display: none;
  padding-right: 55px;
}
.header__nav-icon-3 img {
  margin-top: -5px;
}
.header__nav-icon-7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
}
.header__nav-icon-7 .menu-icon-2::after {
  position: absolute;
  content: "";
  width: 180px;
  height: 180px;
  right: -60px;
  top: -60px;
  border: 1px solid var(--gray);
  border-radius: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header__search {
  position: fixed;
  width: 300px;
  right: 60px;
  top: 90px;
  padding: 15px;
  background-color: var(--white-4);
  border-radius: 3px;
  z-index: 99991;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .header__search {
    right: 10px;
    top: 100px;
  }
}
.header__search.open-search {
  opacity: 1;
  visibility: visible;
  top: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__search.open-search {
    top: 85px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__search.open-search {
    top: 85px;
  }
}
@media only screen and (max-width: 767px) {
  .header__search.open-search {
    top: 85px;
  }
}
.header__search input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--white-2);
  border-radius: 5px;
  outline: none;
  font-size: 16px;
  font-weight: 400;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__support {
    -ms-grid-column: 11;
    grid-column: 11/11;
    -ms-grid-row: 1;
    grid-row: 1;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__support {
    -ms-grid-column: 11;
    grid-column: 11/11;
    -ms-grid-row: 1;
    grid-row: 1;
  }
}
@media only screen and (max-width: 767px) {
  .header__support {
    display: none;
  }
}
.header__support p {
  width: 215px;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.3;
  color: var(--gray-2);
  text-align: right;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__support p {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__support p {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@media only screen and (max-width: 767px) {
  .header__support p {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.header__support p a {
  display: inline-block;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--white);
}
.header__logo-2 {
	padding-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sticky-2 .header__nav-icon-2 .menu-icon-2::after {
  width: 100px;
  height: 100px;
  right: -20px;
  top: -30px;
}
.sticky-2 .header__logo-5 img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.sticky-2 .header__nav-icon-5 {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.sticky-7 .header__nav-icon-7 .menu-icon-2::after {
  width: 100px;
  height: 100px;
  right: -20px;
  top: -30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .logo-primary {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .logo-primary {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .logo-primary {
    display: none;
  }
}
.logo-secondary {
  display: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .logo-secondary {
    display: block;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .logo-secondary {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .logo-secondary {
    display: block;
  }
}

.dark .menu-icon img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

/*----------------------------------------*/
/*  13. OFFCANVES CSS START
/*----------------------------------------*/
.offcanvas__area {
  background-color: var(--black-2);
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.offcanvas__body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.9fr 3fr 1.3fr;
  grid-template-columns: 0.9fr 3fr 1.3fr;
  height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__body {
    -ms-grid-columns: 1.2fr 3fr 1.5fr;
    grid-template-columns: 1.2fr 3fr 1.5fr;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__body {
    -ms-grid-columns: 1.2fr 2fr 1.5fr;
    grid-template-columns: 1.2fr 2fr 1.5fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__body {
    -ms-grid-columns: 1.2fr 2.3fr 1.8fr;
    grid-template-columns: 1.2fr 2.3fr 1.8fr;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__body {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.offcanvas__left {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0.5fr 2.1fr 1fr;
  grid-template-rows: 0.5fr 2.1fr 1fr;
  border-right: 1px solid var(--black-4);
}
@media only screen and (max-width: 767px) {
  .offcanvas__left {
    display: none;
  }
}
.offcanvas__mid {
  overflow: hidden;
  overflow-y: auto;
}
@media only screen and (max-width: 767px) {
  .offcanvas__mid {
    margin-top: 75px;
  }
}
.offcanvas__mid::-webkit-scrollbar {
  width: 5px;
}
.offcanvas__mid::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px var(--black);
          box-shadow: inset 0 0 5px var(--black);
  border-radius: 10px;
}
.offcanvas__mid::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}
.offcanvas__right {
  background-color: var(--black-4);
  padding: 0 50px;
  position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__right {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__right {
    display: none;
  }
}
.offcanvas__right .shape-1 {
  position: absolute;
  bottom: 0;
  left: 125px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__right .shape-1 {
    left: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}
.offcanvas__right .shape-2 {
  position: absolute;
  bottom: 90px;
  right: 110px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__right .shape-2 {
    right: 30px;
  }
}
.offcanvas__logo {
  padding: 55px 0 55px 50px;
  border-bottom: 1px solid var(--black-4);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__logo {
    padding: 30px 0 30px 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
}
.offcanvas__social {
  padding-left: 50px;
  padding-top: 220px;
  border-bottom: 1px solid var(--black-4);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__social {
    padding-left: 50px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__social {
    padding-left: 30px;
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social {
    padding-left: 15px;
    padding-top: 50px;
  }
}
.offcanvas__social .social-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social .social-title {
    font-size: 20px;
  }
}
.offcanvas__social ul li {
  padding-bottom: 2px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social ul li {
    padding-bottom: 5px;
  }
}
.offcanvas__social ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
}
.offcanvas__social ul li a:hover {
  color: var(--gray-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social ul li a {
    font-size: 16px;
  }
}
.offcanvas__links {
  padding-left: 50px;
  padding-top: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__links {
    padding-left: 30px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__links {
    padding-left: 30px;
    padding-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__links {
    padding-left: 15px;
    padding-top: 40px;
  }
}
.offcanvas__links ul li {
  padding-bottom: 2px;
}
.offcanvas__links ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
}
.offcanvas__links ul li a:hover {
  color: var(--gray-2);
}
.offcanvas__close {
  position: absolute;
  right: 40px;
  top: 30px;
}
@media only screen and (max-width: 767px) {
  .offcanvas__close {
    right: 15px;
    top: 15px;
  }
}
.offcanvas__close button {
  font-size: 30px;
  width: 60px;
  height: 60px;
  color: var(--white);
  background: #232323;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.offcanvas__close button:hover {
  color: var(--gray-2);
}
@media only screen and (max-width: 767px) {
  .offcanvas__close button {
    font-size: 24px;
    width: 48px;
    height: 48px;
  }
}
.offcanvas__search {
  padding-top: 190px;
  padding-bottom: 140px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__search {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__search {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__search {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}
.offcanvas__search form {
  position: relative;
}
.offcanvas__search input {
  color: #585858;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  padding: 20px 45px 20px 20px;
  border-radius: 30px;
  border: 1px solid #3C3C3C;
  background-color: transparent;
  outline: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__search input {
    padding: 15px 40px 15px 15px;
  }
}
.offcanvas__search input::-webkit-input-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input::-moz-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input:-ms-input-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input::-ms-input-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input::placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search button {
  color: var(--white);
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  border-radius: 0 100% 100% 0;
}
.offcanvas__contact {
  padding-top: 140px;
}
.offcanvas__contact h3 {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__contact h3 {
    font-size: 20px;
  }
}
.offcanvas__contact li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 7px;
  max-width: 260px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__contact li {
    font-size: 16px;
  }
}
.offcanvas__contact li a {
  color: var(--white);
}
.offcanvas__contact li a:hover {
  color: var(--gray-2);
}

/*----------------------------------------*/
/*  14. HERO CSS START
/*----------------------------------------*/
.hero__area {
  background-color: var(--black);
  position: relative;
  overflow: hidden;
}
.hero__area::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
.hero__area .hero1_bg {
  position: absolute;
  bottom: 0;
  z-index: 0;
  left: 0;
  width: 100%;
  height: auto;
  -webkit-animation: wcRotate 18s infinite linear;
          animation: wcRotate 18s infinite linear;
}
.hero__area-2 {
  background-image: url(../imgs/bg/lines.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--black-2);
  overflow: hidden;
  position: relative;
}
.hero__area-2 .hero2-shape {
  position: absolute;
  left: 30%;
  top: 41%;
  max-width: 41%;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-2 .hero2-shape {
    top: 37%;
    left: 33%;
    max-width: 36%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-2 .hero2-shape {
    top: 32%;
    left: 31%;
    max-width: 40%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-2 .hero2-shape {
    left: 30%;
    top: 34%;
    max-width: 40%;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-2 .hero2-shape {
    left: 5%;
    top: 30%;
    max-width: 90%;
  }
}
.hero__area-2 .hero2-shape img {
  max-width: 100%;
}
.hero__area-2 .sec-title-3 {
  color: var(--white);
  padding-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-2 .sec-title-3 {
    padding-top: 7px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-2 .sec-title-3 {
    padding-bottom: 40px;
    padding-right: 75px;
  }
}
.hero__area-2 .sec-title-3:last-child {
  text-align: right;
  padding-top: 110px;
  padding-right: 0;
  margin-top: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 0;
  }
}
.hero__area-2 .sec-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .hero__area-2 .sec-title-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.hero__area-2 .sec-title-wrapper .bg-shape {
  background-image: url(../imgs/shape/10.png);
  background-repeat: no-repeat;
  background-position: right top;
}
.hero__area-3 {
  padding-top: 190px;
  padding-bottom: 125px;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-3 {
    padding-top: 160px;
    padding-bottom: 110px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-3 {
    padding-top: 140px;
    padding-bottom: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-3 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-3 {
    padding-top: 140px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-3 {
    padding-top: 130px;
    padding-bottom: 0;
  }
}
.hero__area-3::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../imgs/shape/5.png);
  background-repeat: no-repeat;
  background-position: left;
  z-index: -1;
}
.hero__area-3::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  right: 50px;
  top: 140px;
  background-image: url(../imgs/shape/6.png);
  background-repeat: no-repeat;
  background-position: right top;
}
.hero__area-3 .hero3-img {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-3 .hero3-img {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-3 .hero3-img {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-3 .hero3-img {
    max-width: 800px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-3 .hero3-img {
    max-width: 760px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-3 .hero3-img {
    position: unset;
  }
}
.hero__area-3 .hero3-img-anim {
  overflow: hidden;
  position: relative;
  width: 350px;
  height: 100%;
}
.hero__area-3 .hero3-img-anim img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 150%;
  margin-left: auto;
  margin-right: auto;
}
.hero__area-3 .sec-title-wrapper {
  display: inline-block;
  position: unset;
}
.hero__area-3 .sec-sub-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--black-2);
  position: relative;
  display: inline-block;
  padding-right: 30px;
  padding-bottom: 0px;
  text-transform: uppercase;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .hero__area-3 .sec-sub-title {
    padding-bottom: 15px;
  }
}
.hero__area-3 .sec-sub-title::after {
  position: absolute;
  content: "";
  width: 90px;
  height: 1px;
  left: 100%;
  top: 12px;
  background-color: var(--black-2);
}
.hero__area-3 .sec-title {
  z-index: 2;
  font-weight: 600;
  font-size: 306px;
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-3 .sec-title {
    font-size: 260px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-3 .sec-title {
    font-size: 260px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-3 .sec-title {
    font-size: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-3 .sec-title {
    font-size: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-3 .sec-title {
    font-size: 90px;
  }
}
.hero__area-3 .title-right {
  position: absolute;
  right: 0;
}
.hero__area-3 .wrapper {
  --clip-path: circle(65px at left);
  --clip-path-hover: circle(70px at left);
  --clip-path-clicked: circle(100vw at left);
  --duration: .4s;
  --timing-function: ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-3 .wrapper {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-3 .wrapper {
    display: none;
  }
}
.hero__area-3 .video-info {
  width: 300px;
  position: relative;
  left: 500px;
  top: -115px;
  height: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-3 .video-info {
    left: 200px;
    top: -50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-3 .video-info {
    left: 280px;
    top: -235px;
  }
}
.hero__area-3 .video {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-clip-path: var(--clip-path);
          clip-path: var(--clip-path);
  -webkit-transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
  position: relative;
  top: 55px;
  left: 100px;
}
.hero__area-3 .video::before {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: url(../imgs/icon/play-icon.png);
  content: "";
  z-index: 999999999999;
  background-size: 100%;
}
.hero__area-3 .video video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: auto;
  width: auto;
  height: auto;
}
.hero__area-3 .intro-title {
  position: relative;
  left: 175px;
  top: 70px;
}
.hero__area-3 .intro-title .video-title {
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1.3;
}
.hero__area-3 .intro-title .video-title span {
  display: block;
  font-size: 18px;
}
.hero__area-3 .intro-title .video-title.close-video-title {
  display: none;
}
.hero__area-3 #video_check {
  width: 200px;
  height: 200px;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  border-radius: 40px;
  outline: none;
  z-index: 2;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  z-index: 9999999;
}
.hero__area-3 #video_check:focus {
  outline: 0;
}
.hero__area-3 #video_check:hover ~ .video {
  -webkit-clip-path: var(--clip-path-hover);
          clip-path: var(--clip-path-hover);
}
.hero__area-3 #video_check:hover ~ .text::before {
  --r: 25px;
  --opacity: 1;
}
.hero__area-3 #video_check:hover ~ .text::after {
  -webkit-clip-path: var(--clip-path-hover);
          clip-path: var(--clip-path-hover);
}
.hero__area-3 #video_check:hover ~ .text > span::after {
  -webkit-clip-path: var(--clip-path-hover);
          clip-path: var(--clip-path-hover);
}
.hero__area-3 #video_check:checked {
  width: 100%;
  height: 100%;
  border-radius: 0;
  top: 0;
  left: 0;
  bottom: 0;
}
.hero__area-3 #video_check:checked ~ .video {
  -webkit-clip-path: var(--clip-path-clicked);
          clip-path: var(--clip-path-clicked);
}
.hero__area-3 #video_check:checked ~ .text {
  --opacity: 0;
  -webkit-transition: opacity 0.3s var(--timing-function);
  transition: opacity 0.3s var(--timing-function);
}
.hero__area-3 #video_check:checked ~ .text::after {
  -webkit-clip-path: var(--clip-path-clicked);
          clip-path: var(--clip-path-clicked);
}
.hero__area-3 #video_check:checked ~ .text > span::after {
  -webkit-clip-path: var(--clip-path-clicked);
          clip-path: var(--clip-path-clicked);
}
.hero__area-3.start-video .hero3-img {
  opacity: 0;
}
.hero__area-3.start-video .sec-title,
.hero__area-3.start-video .sec-sub-title,
.hero__area-3.start-video .hero__text-3 p,
.hero__area-3.start-video .intro-title .video-title {
  color: var(--white-4);
}
.hero__area-3.start-video .sec-sub-title::after {
  background-color: var(--white);
}
.hero__area-4 {
  padding-top: 110px;
  height: 100%;
}
@media only screen and (min-width: 1920px) {
  .hero__area-4 {
    height: 100vh;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-4 {
    padding-top: 60px;
  }
}
.hero__area-10 {
  height: 100vh;
  padding: 90px 30px 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-10 {
    padding: 120px 30px 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-10 {
    padding: 100px 30px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-10 {
    padding: 100px 20px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-10 {
    padding: 100px 20px 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-10 {
    padding: 100px 15px 0;
  }
}
.hero__content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 100vh;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  z-index: 1;
}
.hero__content-wrapper .text {
  mix-blend-mode: difference;
  opacity: 0;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
.hero__plane {
  width: 100%;
  height: 100vh;
}
.hero__plane img {
  display: none;
}
.hero__inner-2 {
  padding: 220px 100px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__inner-2 {
    padding: 140px 100px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__inner-2 {
    padding: 120px 50px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__inner-2 {
    padding: 160px 30px 60px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__inner-2 {
    padding: 120px 15px 60px;
  }
}
.hero__inner-3 {
  position: relative;
}
.hero__inner-3 .scroll-down {
  margin-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__inner-3 .scroll-down {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__inner-3 .scroll-down {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero__inner-3 .scroll-down {
    display: none;
  }
}
.hero__inner-3 .scroll-down button {
  border: 1px solid var(--gray-3);
  padding: 25px 10px;
  border-radius: 30px;
  -webkit-animation: wcSlideBottom 7s infinite linear;
          animation: wcSlideBottom 7s infinite linear;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__inner-3 .scroll-down button {
    border-color: var(--white);
  }
  .hero__inner-3 .scroll-down button img {
    -webkit-filter: invert(1);
            filter: invert(1);
  }
}
.hero__text-2 {
  background-image: url(../imgs/icon/7.png);
  background-repeat: no-repeat;
  background-position: 64% 58%;
  padding-left: 32%;
  -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__text-2 {
    padding-left: 30%;
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__text-2 {
    padding-left: 20%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__text-2 {
    padding-left: 15%;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__text-2 {
    padding-left: 5%;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}
@media only screen and (max-width: 767px) {
  .hero__text-2 {
    padding-left: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.hero__text-2 p {
  max-width: 330px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
  padding-bottom: 5px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__text-2 p {
    max-width: 380px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__text-2 p {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__text-2 p {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__text-2 p {
    padding-bottom: 40px;
  }
}
.hero__text-3 {
  max-width: 320px;
  padding-top: 90px;
  position: relative;
  z-index: 9;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__text-3 {
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__text-3 {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__text-3 {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__text-3 {
    padding-bottom: 80px;
    padding-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__text-3 {
    padding-bottom: 30px;
  }
}
.hero__text-3 p {
  font-size: 18px;
  line-height: 1.4;
}
.hero__content {
  padding-top: 200px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__content {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__content {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content {
    padding-top: 125px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content {
    padding-top: 150px;
  }
}
.hero__content a {
  display: inline-block;
  /*#max-width: 300px; */
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  padding-top:60px;
  padding-bottom: 1px;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
  color: #82aff2;
}
.hero__content a:hover i {
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.hero__content a:hover span::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.hero__content a span {
  position: absolute;
  top: 0;
  right: 0;
}
.hero__content a span i {
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hero__content a span::after {
  position: absolute;
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: -20px;
  bottom: -20px;
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__content img {
    max-width: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content img {
    max-width: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content img {
    max-width: 60px;
  }
}
.hero__content .experience {
  position: absolute;
  right: 30px;
  bottom: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content .experience {
    bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content .experience {
    position: unset;
  }
}
.hero__content .experience .title {
  font-weight: 400;
  font-size: 50px;
  line-height: 1.3;
  color: var(--white);
}
.hero__content .experience p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
}
.hero__title {
  font-weight: 500;
  font-size: 55px;
  line-height: 1;
  color: var(--white);
  margin-top: 10px;
  position: relative;
  letter-spacing: 1px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title {
    font-size: 66px;
    line-height: 0.95;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title {
    font-size: 62px;
    line-height: 0.95;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title {
    font-size: 56px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__title {
    font-size: 40px;
  }
}
/*.hero__title::after {
  position: absolute;
  content: "Pro";
  width: 70px;
  height: 45px;
  right: -80px;
  top: 70px;
  border: 2px solid var(--white);
  border-radius: 15px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--white);
  text-align: center;
  padding-top: 4px;*/
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title::after {
    right: -30px;
    top: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title::after {
    right: 60px;
    top: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title::after {
    right: 95px;
    top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__title::after {
    right: 0;
    top: -40px;
  }
}
.hero__title-wrapper {
  max-width: 990px;
  position: relative;
  margin-bottom: 105px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title-wrapper {
    max-width: 700px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title-wrapper {
    max-width: 800px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title-wrapper {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__title-wrapper {
    margin-bottom: 0;
  }
}
.hero__sub-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-3);
  max-width: 410px;
  padding-top:20px
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__sub-title {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__sub-title {
    position: unset;
    padding-top: 15px;
  }
}
.hero__sub-title span {
  color: var(--white);
}
.hero__about {
  background-image: url(../imgs/about/about-bg.png);
  background-repeat: no-repeat;
  background-position: top right;
  overflow: hidden;
}
.hero__about-content {
  padding-top: 170px;
}
@media only screen and (max-width: 767px) {
  .hero__about-content {
    padding-top: 250px;
  }
}
.hero__about-content .hero-title {
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .hero__about-content .hero-title {
    padding-bottom: 30px;
  }
}
.hero__about-info {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 2.5fr 30px 2.5fr;
  grid-template-columns: 1fr 2.5fr 2.5fr;
  padding-bottom: 80px;
  grid-gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__about-info {
    -ms-grid-columns: 1fr 30px 2.5fr 30px 2fr;
    grid-template-columns: 1fr 2.5fr 2fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__about-info {
    -ms-grid-columns: 1fr 20px 2.5fr 20px 1fr;
    grid-template-columns: 1fr 2.5fr 1fr;
    grid-gap: 20px;
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__about-info {
    padding-bottom: 60px;
  }
}
.hero__about-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .hero__about-text {
    grid-column: 1/-1;
    -ms-grid-row: 1;
    grid-row: 1;
    margin-bottom: 20px;
  }
}
.hero__about-text p {
  font-size: 18px;
  line-height: 1.4;
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__about-text p {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__about-text p {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero__about-text p {
    padding-left: 0;
  }
}
.hero__about-award {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.hero__about-award::before {
  position: absolute;
  content: "";
  left: 75px;
  top: 50%;
  width: 250px;
  height: 1px;
  background-color: var(--white-4);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__about-award::before {
    left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__about-award::before {
    width: 150px;
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hero__about-award {
    position: absolute;
    top: 150px;
  }
}
.hero__about-video {
  margin-bottom: -10px;
  height: 800px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__about-video {
    height: 700px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__about-video {
    height: 650px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__about-video {
    height: 600px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__about-video {
    height: 470px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__about-video {
    height: auto;
  }
}
.hero__about-video iframe,
.hero__about-video video {
  width: 100%;
  height: auto;
}
.hero__about-row {
  position: inherit;
  margin-right: -310px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__about-row {
    margin-right: -50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__about-row {
    margin-right: -150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__about-row {
    margin-right: -150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__about-row {
    margin-right: -120px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__about-row {
    margin-right: calc(-0.5 * var(--bs-gutter-x));
  }
}
.hero__link {
  display: inline-block;
  max-width: 300px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--white);
  position: absolute;
  top: 190px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
}
.hero__link:hover i {
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.hero__link:hover span::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.hero__link span {
  position: absolute;
  top: 0;
  right: 0;
}
.hero__link span i {
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hero__link span::after {
  position: absolute;
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: -20px;
  bottom: -20px;
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#hero_texture {
  position: relative;
}
#hero_canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero__content-8 {
  padding-top: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content-8 {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-8 {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content-8 {
    padding-top: 80px;
    text-align: center;
  }
}
.hero__content-8 .discription {
  padding-top: 40px;
  font-size: 18px;
  max-width: 330px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-8 .discription {
    padding-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content-8 .discription {
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 100%;
  }
}
.hero__content-8 .scroll-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 300px auto;
  grid-template-columns: 300px auto;
}
@media only screen and (max-width: 767px) {
  .hero__content-8 .scroll-wrapper {
    display: block;
  }
}
.hero__content-8 .scroll-down {
  position: relative;
  padding-left: 100px;
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .hero__content-8 .scroll-down {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-8 .scroll-down {
    padding-left: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content-8 .scroll-down {
    padding-left: 120px;
  }
}
.hero__content-8 .scroll-down span {
  position: absolute;
  left: 105px;
  top: -45px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  font-size: 14px;
  text-transform: uppercase;
}
.hero__content-8 .scroll-down img {
  -webkit-animation: wcSlideBottom 3s infinite;
          animation: wcSlideBottom 3s infinite;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content-8 .scroll-down img {
    max-height: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-8 .scroll-down img {
    max-height: 100px;
  }
}

.portfolio__big {
  text-align: center;
  padding-bottom: 395px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__big {
    padding-bottom: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__big {
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__big {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__big {
    padding-bottom: 60px;
  }
}
.portfolio__big img {
  margin-top: -90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__big img {
    margin-top: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__big img {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__big img {
    margin-top: 0;
  }
}
.portfolio__big-inner {
  background-position: center center;
  background-size: cover;
  height: calc(100vh - 80px);
  width: 600px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: -100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__big-inner {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__big-inner {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__big-inner {
    margin-top: 10px;
  }
}
.portfolio__big-inner img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.bodypadding {
  padding: 110px 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .bodypadding {
    padding: 70px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .bodypadding {
    padding: 30px 15px;
  }
}

.bodypadding-2 {
  padding: 120px 50px;
}
@media only screen and (max-width: 767px) {
  .bodypadding-2 {
    padding: 30px 15px;
  }
}

.dark .hero__content-8 .scroll-down img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .hero__content-8 .scroll-down span {
  color: var(--white);
}

/*----------------------------------------*/
/*  15. SLIDER CSS START
/*----------------------------------------*/
.roll__area {
  background-color: var(--primary);
  padding: 31px 10px;
}
.roll__area-2 {
  padding: 31px 10px;
  background-color: var(--black-2);
}
.roll__area-2 .roll__slide h2 {
  color: var(--white);
}
.roll__area-3 {
  padding: 31px 10px;
  background-color: var(--pink-2);
}
.roll__area-3 .roll__slide h2 {
  color: var(--black-2);
}
.roll__wrapper {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.roll__slide {
  text-align: center;
}
.roll__slide h2 {
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--black);
}

.contact_wrap {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact_wrap {
    margin-top: 60px;
  }
}
.contact_wrap:hover .link {
  opacity: 1;
  visibility: visible;
}
.contact_wrap .link {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 18px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  background: var(--black-2);
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--white);
  text-transform: capitalize;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media (max-width: 1365px) {
  .contact_wrap .link {
    width: 130px;
    height: 130px;
  }
}
@media (max-width: 1365px) {
  .contact_wrap .link {
    opacity: 1;
    visibility: visible;
  }
}

.rollslide_wrap {
  text-align: center;
  overflow: hidden;
  margin-bottom: -10px;
}
.rollslide_title {
  color: var(--black-2);
  font-size: 250px;
  line-height: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-transform: uppercase;
}
.rollslide_title-1 {
  color: var(--black-2);
  font-size: 245px;
  line-height: 0.75;
  text-transform: uppercase;
}
.rollslide_title-1 span {
  font-family: "newYork";
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .rollslide_title-1 {
    font-size: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .rollslide_title-1 {
    font-size: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .rollslide_title-1 {
    font-size: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rollslide_title-1 {
    font-size: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .rollslide_title-1 {
    font-size: 48px;
  }
}
.rollslide_title:hover {
  color: var(--black-3);
}
.rollslide_title span {
  font-weight: 400;
  font-family: "newYork";
}
@media only screen and (max-width: 767px) {
  .rollslide_title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rollslide_title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .rollslide_title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .rollslide_title {
    font-size: 180px;
  }
}

@media only screen and (max-width: 767px) {
  footer .contact_wrap {
    margin-top: 40px;
  }
}
.dark .rollslide_title-1 {
  color: var(--white);
}
.dark .contact_wrap:hover .link {
  color: var(--black-2);
  background-color: var(--white);
}
@media (max-width: 1365px) {
  .dark .contact_wrap .link {
    color: var(--black-2);
    background-color: var(--white);
  }
}

/*----------------------------------------*/
/*  16. ABOUT CSS START
/*----------------------------------------*/
.about__area {
  overflow: hidden;
  background-color: var(--white);
}
.about__area .sec-title {
  max-width: 770px;
  position: relative;
  z-index: 9;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area .sec-title {
    max-width: 660px;
  }
}
.about__area-2 {
  overflow: hidden;
  background-color: var(--black-2);
  background-image: url(../imgs/shape/2.png);
  background-repeat: no-repeat;
  background-position: 0 31%;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .about__area-2 {
    background-position: 0 40%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__area-2 {
    background-position: 0 37%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-2 {
    background-position: 0 39%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-2 {
    background-position: -15% 47%;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-2 {
    background-size: 0;
  }
}
.about__area-2 .sec-title {
  color: var(--white);
}
.about__area-2 .sec-title-wrapper {
  max-width: 770px;
  padding-bottom: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-2 .sec-title-wrapper {
    max-width: 600px;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-2 .sec-title-wrapper {
    padding-bottom: 50px;
  }
}
.about__area-2 .sec-text {
  max-width: 440px;
}
@media only screen and (max-width: 767px) {
  .about__area-2 .sec-text {
    padding-bottom: 40px;
  }
}
.about__area-2 .sec-text p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-2);
}
.about__area-2 .sec-text-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
  gap: 215px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-2 .sec-text-wrapper {
    gap: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-2 .sec-text-wrapper {
    gap: 50px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-2 .sec-text-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 50px;
  }
}
.about__area-2 #btn_wrapper,
.about__area-2 .btn_wrapper {
  margin-left: 0;
  margin-right: -40px;
  margin-top: -50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-2 #btn_wrapper,
.about__area-2 .btn_wrapper {
    margin-left: auto;
    margin-right: 0;
    margin-top: -20px;
  }
}
.about__area-3 {
  background-image: url(../imgs/shape/7.png);
  background-repeat: no-repeat;
  background-position: 100% 30%;
  background-color: var(--black-2);
  position: relative;
}
.about__area-3::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: 60%;
  bottom: 0px;
  background-color: var(--black-5);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-3::after {
    left: 55%;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-3::after {
    width: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-3 .pt-140 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-3 .pt-140 {
    padding-top: 90px;
  }
}
.about__area-3 .sec-title {
  color: var(--white);
  text-transform: uppercase;
  padding-bottom: 40px;
  background-color: var(--black-2);
}
.about__area-3 .sec-sub-title {
  color: var(--white);
  text-transform: uppercase;
  padding-top: 45px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-3 .sec-sub-title {
    padding-top: 0;
  }
}
.about__area-3 .sec-text p {
  max-width: 410px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-2);
  padding-bottom: 22px;
}
@media only screen and (max-width: 767px) {
  .about__area-3 .sec-text p {
    padding-bottom: 50px;
  }
}
.about__area-3 .sec-text-wrapper {
  padding-left: 210px;
  padding-top: 45px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 65px;
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 0;
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 0;
    padding-top: 15px;
  }
}
.about__area-8 .about-sub-right {
  color: var(--black-7);
  padding-bottom: 10px;
}
.about__title-wrapper {
  padding-left: 190px;
  padding-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__title-wrapper {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about__title-wrapper {
    padding-left: 0;
  }
}
.about__content {
  padding-top: 65px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__content {
    padding-top: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .about__content {
    padding-top: 50px;
  }
}
.about__content p {
  max-width: 440px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-3);
  margin-bottom: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__content p {
    max-width: 90%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__content p {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .about__content p {
    margin-bottom: 30px;
  }
}
.about__content-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1.8fr;
  grid-template-columns: 1fr 1.8fr;
  grid-gap: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__content-wrapper {
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__content-wrapper {
    -ms-grid-columns: 1fr 30px 1.5fr;
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .about__content-wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 0;
  }
}
.about__img img {
  width: 100%;
  overflow: hidden;
}
.about__img-right {
  position: absolute;
  right: 0;
  top: 280px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__img-right {
    position: relative;
    top: 30px;
    right: unset;
  }
}
@media only screen and (max-width: 767px) {
  .about__img-right {
    position: relative;
    top: 30px;
    right: unset;
  }
}
.about__img-right img {
  width: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__img-right img {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__img-right img {
    display: none;
  }
}
.about__img-2 {
  max-width: 1720px;
  margin: 0 auto;
  overflow: hidden;
  max-height: 800px;
  margin-bottom: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__img-2 {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__img-2 {
    margin-bottom: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .about__img-2 {
    margin-bottom: 0;
  }
}
.about__img-2 img {
  width: 100%;
}
.about__img-3 {
  overflow: hidden;
  position: relative;
  width: calc(100% - 85px);
  height: 770px;
}
.about__img-3 img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 110%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__img-3 {
    overflow: hidden;
    position: relative;
    width: calc(100% - 40px);
    height: 660px;
  }
  .about__img-3 img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 120%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__img-3 {
    width: 100%;
    height: unset;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__img-3 {
    width: 100%;
    height: unset;
  }
}
@media only screen and (max-width: 767px) {
  .about__img-3 {
    width: 100%;
    height: unset;
  }
}
.about__img-3 img {
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__img-3 img {
    position: unset;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__img-3 img {
    position: unset;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .about__img-3 img {
    position: unset;
    height: auto;
  }
}

.portfolio__item {
  -webkit-transform: perspective(4000px) rotateX(90deg);
          transform: perspective(4000px) rotateX(90deg);
}

.section_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: capitalize;
  position: relative;
  margin-top: -25px;
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .section_wrapper {
    margin-bottom: 30px;
  }
}
.section_wrapper::before {
  content: "";
  position: absolute;
  bottom: 48%;
  left: 60px;
  height: 1px;
  width: calc(100% - 60px);
  background-color: var(--gray-11);
}
@media only screen and (max-width: 767px) {
  .section_wrapper::before {
    left: 48px;
    width: calc(100% - 48px);
  }
}

.react_border {
  position: relative;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  display: inline-block;
  background-color: transparent;
  border: 1px solid var(--gray-11);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media only screen and (max-width: 767px) {
  .react_border {
    height: 40px;
    width: 40px;
    line-height: 36px;
  }
}
.react_border span {
  font-weight: 400;
  font-size: 16px;
  color: var(--black-2);
  display: inline-block;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.about8__title {
  text-indent: 105px;
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .about8__title {
    font-size: 72px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about8__title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about8__title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about8__title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .about8__title {
    font-size: 36px;
    text-indent: 50px;
  }
}
.about8__title a {
  color: var(--black-2);
  font-family: "newYork";
  position: relative;
}
.about8__title a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 10px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about8__title a::after {
    bottom: 3px;
  }
}
@media only screen and (max-width: 767px) {
  .about8__title a::after {
    bottom: 3px;
  }
}
.about8__content {
  float: right;
}
.about8__content p {
  line-height: 1.3;
  max-width: 515px;
  text-indent: 65px;
  font-size: 24px;
  margin-bottom: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about8__content p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about8__content p {
    font-size: 18px;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .about8__content p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
  }
}

.workitems {
  display: -ms-grid;
  display: grid;
  grid-gap: 50px;
  -ms-grid-columns: 1fr 50px 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .workitems {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .workitems {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .workitems {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.work8:nth-child(2) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 100px;
}
@media only screen and (max-width: 767px) {
  .work8:nth-child(2) {
    margin-top: 0;
  }
}
.work8:nth-child(3) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.work8:nth-child(4) {
  margin-left: 50px;
  margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .work8:nth-child(4) {
    margin: 0;
  }
}
.work8:nth-child(5) {
  margin-top: 100px;
}
@media only screen and (max-width: 767px) {
  .work8:nth-child(5) {
    margin: 0;
  }
}
.work8:nth-child(6) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .work8 {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .work8 {
    margin-bottom: 50px;
  }
}
.work8 img {
  max-width: 100%;
}
.work8__title {
  width: 320px;
  margin-bottom: 120px;
  padding-top: 90px;
  margin-left: 440px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .work8__title {
    margin-bottom: 90px;
    padding-top: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .work8__title {
    margin-left: 165px;
    margin-bottom: 90px;
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .work8__title {
    margin-left: 40px;
    margin-bottom: 90px;
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .work8__title {
    margin-bottom: 40px;
    margin-left: 20px;
    padding-top: 40px;
  }
}
.work8__title p {
  font-size: 18px;
  text-indent: 65px;
  font-weight: 400;
  color: var(--black-2);
}
.work8__content {
  padding-top: 30px;
}
@media only screen and (max-width: 767px) {
  .work8__content {
    padding-top: 20px;
  }
}
.work8__content p {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--black-3);
}
.work8__content__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 5px;
}
.work8__content__title span {
  font-family: "newYork";
}
.work8__btn {
  text-align: center;
  margin-top: 115px;
  margin-bottom: 160px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .work8__btn {
    margin-top: 60px;
    margin-bottom: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .work8__btn {
    margin-top: 60px;
    margin-bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .work8__btn {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .work__area-8 {
    margin-bottom: 50px;
  }
}

.about__area-8 {
  padding-bottom: 170px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-8 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-8 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-8 {
    padding-bottom: 80px;
  }
}

.dark .react_border span {
  color: var(--white);
}
.dark .about8__title,
.dark .about8__title a,
.dark .work8__title p,
.dark .work8__content__title,
.dark .about__area-8 .about-sub-right {
  color: var(--white);
}
.dark .work8__content p {
  color: var(--gray-2);
}

/*----------------------------------------*/
/*  17. SERVICE CSS START
/*----------------------------------------*/
.service__area {
  background-color: var(--black-2);
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area.pb-150 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area.pb-150 {
    padding-bottom: 90px;
  }
}
.service__area a:first-child .service__item {
  border-top: 1px solid var(--secondary);
}
.service__area .sec-title,
.service__area .sec-sub-title {
  color: var(--white);
}
.service__area .sec-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.service__area-2 {
  background-color: var(--pink);
}
@media only screen and (max-width: 767px) {
  .service__area-2 {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-2 .sec-text {
    padding-bottom: 30px;
  }
}
.service__area-2 .sec-text p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  max-width: 410px;
}
.service__area-3 {
  overflow: hidden;
}
.service__area-3 .sec-title {
  padding-bottom: 40px;
  text-transform: uppercase;
  background-color: var(--white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-3 .sec-title {
    padding-bottom: 0;
  }
}
.service__area-3 .sec-title-wrapper {
  position: relative;
  padding-left: 330px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-3 .sec-title-wrapper {
    padding-left: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-3 .sec-title-wrapper {
    padding-left: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-3 .sec-title-wrapper {
    padding-left: 0;
  }
}
.service__area-3 .sec-title-wrapper::after {
  position: absolute;
  content: "";
  left: 40%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--white-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-3 .sec-title-wrapper::after {
    left: 30%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-3 .sec-title-wrapper::after {
    left: 30%;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-3 .sec-title-wrapper::after {
    width: 0;
  }
}
.service__area-3 .sec-title-wrapper p {
  padding-top: 70px;
  padding-bottom: 60px;
  max-width: 410px;
  font-size: 18px;
  line-height: 1.4;
  margin-left: 220px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-3 .sec-title-wrapper p {
    margin-left: 120px;
    padding-top: 30px;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-3 .sec-title-wrapper p {
    margin-left: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-3 .sec-title-wrapper p {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.service__area-3 .sec-sub-title {
  padding-top: 50px;
  text-transform: uppercase;
  background-color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-3 .sec-sub-title {
    padding-top: 5px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-3 .sec-sub-title {
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-3 .sec-sub-title {
    padding-top: 0;
  }
}
.service__area-6 {
  padding-left: 100px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-6 {
    padding-left: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 {
    padding-top: 100px;
    padding-left: 88px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 {
    padding-top: 90px;
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-6 {
    padding-bottom: 0;
    padding-left: 0;
  }
}
.service__area-6 .inherit-row {
  margin-left: -180px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
@media only screen and (max-width: 767px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
.service__area-6 .content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .service__area-6 .content-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.service__area-6 .left-content {
  width: 20%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 .left-content {
    width: 35%;
    padding-left: 50px;
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .left-content {
    width: 30%;
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-6 .left-content {
    display: none;
  }
}
.service__area-6 .right-content {
  width: 40%;
  padding-left: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-6 .right-content {
    padding-left: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__area-6 .right-content {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 .right-content {
    width: 100%;
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .right-content {
    width: 100%;
    padding-left: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-6 .right-content {
    width: 100%;
    padding-left: 0;
  }
}
.service__area-6 .mid-content {
  width: 40%;
  height: 100vh;
  position: relative;
}
.service__area-6 .mid-content .service__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.service__area-6 .mid-content .service__image img {
  width: auto;
  height: 100vh;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 .mid-content {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .mid-content {
    display: none;
  }
}
.service__area-6 .mid-content #img1 {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 767px) {
  .service__area-6 .mid-content {
    display: none;
  }
  .service__area-6 .right-content {
    padding-left: 0;
  }
}
.service__top-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.service__top-text p {
  max-width: 505px;
  color: var(--gray-2);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__top-text p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__top-text p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .service__top-text p {
    font-size: 18px;
    margin: 30px 0;
  }
}
.service__top-text p span {
  color: var(--white);
}
.service__top-btn #btn_wrapper,
.service__top-btn .btn_wrapper {
  margin-left: auto;
  margin-right: -40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__top-btn #btn_wrapper,
.service__top-btn .btn_wrapper {
    margin-right: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__top-btn #btn_wrapper,
.service__top-btn .btn_wrapper {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .service__top-btn #btn_wrapper,
.service__top-btn .btn_wrapper {
    margin-right: 0;
    margin-left: 0;
  }
}
.service__list-wrapper {
  margin-top: 40px;
}
.service__img {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
  position: absolute;
  -webkit-transform: rotate(0deg) translateX(-100px);
          transform: rotate(0deg) translateX(-100px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__img {
    max-width: 260px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__img {
    max-width: 200px;
  }
}
.service__img.active {
  opacity: 1;
  -webkit-transform: rotate(15deg) translateX(60px) translateY(30px);
          transform: rotate(15deg) translateX(60px) translateY(30px);
}
.service__img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__img-wrapper {
    display: none;
  }
}
.service__img-wrapper span {
  position: absolute;
  width: 175px;
  height: 70px;
  background-color: var(--primary);
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(-26deg) translate(-100%, -100%);
          transform: rotate(-26deg) translate(-100%, -100%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__img-wrapper span {
    bottom: 260px;
    height: 40px;
    width: 120px;
  }
}
.service__img-wrapper span.current {
  -webkit-transform: rotate(-26deg) translate(120px, -100%);
          transform: rotate(-26deg) translate(120px, -100%);
}
.service__img-3 {
  position: relative;
}
.service__img-3 img {
  top: -95px;
  position: absolute;
  -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.service__img-6 img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__items-6 {
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .service__items-6 {
    padding-top: 60px;
  }
}
.service__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.7fr 2fr 2.5fr 1fr;
  grid-template-columns: 0.7fr 2fr 2.5fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 35px 0;
  border-bottom: 1px solid var(--secondary);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item {
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__item {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding: 25px 0 10px;
  }
}
.service__item:hover .service__number span,
.service__item:hover .service a {
  color: var(--white);
}
.service__item:hover .service__title {
  color: var(--white);
}
.service__item:hover .service__link p {
  color: var(--white);
}
.service__item:hover .service__link p i {
  -webkit-transform: translate(60px, -60px) rotate(-45deg);
          transform: translate(60px, -60px) rotate(-45deg);
}
.service__item:hover .service__link p::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.service__item-2 {
  position: relative;
}
.service__item-2::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: -90px;
  top: 0;
  background-color: var(--black-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-2::before {
    left: -40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-2::before {
    left: -20px;
  }
}
.service__item-2:nth-child(3n+1)::before {
  position: unset;
}
.service__item-2 img {
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .service__item-2 img {
    margin-bottom: 20px;
  }
}
.service__item-2 p {
  color: var(--black-2);
  padding-bottom: 25px;
}
.service__item-2 ul li {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
}
.service__item-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 30% 45% 25%;
  grid-template-columns: 30% 45% 25%;
  border-bottom: 1px solid var(--white-2);
  padding: 55px 0 50px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__item-3 {
    -ms-grid-columns: 30% 50% 20%;
    grid-template-columns: 30% 50% 20%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-3 {
    -ms-grid-columns: 30% 50% 20%;
    grid-template-columns: 30% 50% 20%;
    padding: 30px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-3 {
    -ms-grid-columns: 30% 2% 40% 2% 24%;
    grid-template-columns: 30% 40% 24%;
    gap: 2%;
    padding: 50px 0;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-3 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding: 40px 0;
  }
}
.service__item-3:first-child {
  border-top: 1px solid var(--white-2);
}
.service__item-3:hover .service__hover-3 {
  opacity: 1;
}
.service__item-6 {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.service__item-6 .image-tab {
  display: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-6 {
    height: auto;
    -webkit-box-orient: unset;
    -webkit-box-direction: unset;
        -ms-flex-direction: unset;
            flex-direction: unset;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 30px 3fr;
    grid-template-columns: 2fr 3fr;
    grid-column-gap: 30px;
    margin-bottom: 60px;
  }
  .service__item-6 .image-tab {
    display: block;
  }
  .service__item-6 .image-tab img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-6 {
    height: auto;
    padding-bottom: 80px;
  }
  .service__item-6 .image-tab {
    display: block;
  }
  .service__item-6 .image-tab img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-6 {
    height: auto;
    padding-bottom: 50px;
  }
  .service__item-6 .image-tab {
    display: block;
  }
  .service__item-6 .image-tab img {
    width: 100%;
  }
}
.service__item-6 p {
  max-width: 550px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-2);
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__item-6 p {
    padding-bottom: 20px;
  }
}
.service__item-6 ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 240px auto;
  grid-template-columns: 240px auto;
  padding-bottom: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-6 ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-6 ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding-bottom: 20px;
  }
}
.service__item-6 ul li {
  display: inline-block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__item-6 ul li {
    font-size: 16px;
    padding-bottom: 5px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__item-6 ul {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__item-6 ul {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-6 ul {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-6 ul {
    padding-bottom: 50px;
    -ms-grid-columns: 240px auto;
    grid-template-columns: 240px auto;
  }
}
.service__hover-3 {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 75%;
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  margin: -200px 0 0 -150px;
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 1200px) {
  .service__hover-3 {
    width: 0;
    display: none;
  }
}
.service__number span {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--gray-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.service__title {
  display: block;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: var(--gray-2);
}
.service__title:hover {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .service__title {
    padding: 10px 0 20px;
  }
  .service__title br {
    display: none;
  }
}
.service__title-2, .service__title-3 {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  color: var(--black-2);
  padding-bottom: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__title-2, .service__title-3 {
    font-size: 24px;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .service__title-2, .service__title-3 {
    padding-bottom: 15px;
  }
}
.service__title-3 {
  text-transform: uppercase;
}
.service__title-3:hover {
  color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .service__title-3 {
    display: block;
    font-size: 30px;
    padding-bottom: 20px;
  }
}
.service__title-6 {
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  color: var(--white);
  padding-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__title-6 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__title-6 {
    font-size: 32px;
    padding-top: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__title-6 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__title-6 {
    font-size: 30px;
  }
}
.service__text {
  max-width: 320px;
}
.service__text p {
  color: var(--gray-2);
}
.service__link {
  text-align: right;
  overflow: hidden;
}
.service__link p {
  display: inline-block;
  font-size: 48px;
  color: var(--gray-2);
}
.service__link p i {
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.service__link p::after {
  position: absolute;
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: -20px;
  bottom: -20px;
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.service__btn-2 a {
  color: var(--black-2);
  border-color: var(--black-2);
}
.service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper {
  margin: 0 auto;
  margin-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .service__btn-2#btn_wrapper, .service__btn-2.btn_wrapper {
    margin: 0;
    margin-top: 60px;
  }
}
.service__btn-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .service__btn-3 {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-top: 30px;
  }
}
.service__btn-3 #btn_wrapper,
.service__btn-3 .btn_wrapper {
  width: 200px;
  height: 200px;
  margin-right: -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__btn-3 #btn_wrapper,
.service__btn-3 .btn_wrapper {
    margin-left: auto;
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .service__btn-3 #btn_wrapper,
.service__btn-3 .btn_wrapper {
    margin-left: -15px;
  }
}
.service__list .active .service__number span,
.service__list .active .service__title,
.service__list .active .service__link p {
  color: var(--white);
}
.service__list-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 120px 1fr 120px 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__list-2 {
    gap: 100px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__list-2 {
    gap: 90px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__list-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: repeat(1, 1fr);
    gap: 60px;
  }
}
.service__list-3 {
  padding-top: 70px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .service__list-3 {
    padding-top: 40px;
  }
}
.service__list-6 {
  padding-top: 160px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__list-6 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__list-6 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__list-6 {
    padding-top: 60px;
    position: sticky;
    top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__list-6 {
    padding-top: 60px;
    position: sticky;
    top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .service__list-6 {
    padding-top: 60px;
  }
}
.service__list-6 li {
  padding-bottom: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__list-6 li {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__list-6 li {
    padding-bottom: 20px;
  }
}
.service__list-6 li.active a {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .service__list-6 li {
    padding-bottom: 20px;
  }
}
.service__list-6 li a {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--gray-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__list-6 li a {
    line-height: 1.4;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__list-6 li a {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .service__list-6 li a {
    font-size: 20px;
  }
}
.service__content-3 {
  max-width: 340px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__content-3 {
    padding-left: 30px;
  }
}
.service__content-3 p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
}
.service__content-3 ul {
  padding-top: 20px;
  position: relative;
  z-index: 1;
}
.service__content-3 ul li {
  font-size: 18px;
  color: var(--black-2);
}
.service3__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.service3__img-wrap {
  width: 20vw;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  padding-bottom: 25vw;
}
@media only screen and (max-width: 767px) {
  .service3__img-wrap {
    display: none;
    position: unset;
  }
}
.service__detail {
  overflow: hidden;
}
.service__detail .sec-title {
  max-width: 630px;
  font-size: 36px;
  line-height: 1.3;
  padding-bottom: 90px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__detail .sec-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__detail .sec-title {
    font-size: 30px;
    padding-bottom: 30px;
  }
}
.service__detail-circle {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .service__detail-circle {
    display: none;
  }
}
.service__detail-circle span {
  position: relative;
  display: block;
  width: 136px;
  height: 136px;
  background-color: var(--primary);
  border-radius: 100%;
}
.service__detail-circle span::before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  left: calc(50% - 3px);
  top: calc(50% - 3px);
  background-color: var(--black-2);
  border-radius: 100%;
}
.service__detail-circle span::after {
  position: absolute;
  content: "";
  width: 170px;
  height: 2px;
  left: 50%;
  top: calc(50% - 1px);
  background-color: var(--black-2);
  border-radius: 100%;
}
.service__detail-img {
  padding-right: 1px;
  position: relative;
  margin-bottom: 60px;
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .service__detail-img {
    margin-top: 30px;
  }
}
.service__detail-img img {
  width: 100%;
}
.service__detail-img img.sd-shape {
  width: auto;
  position: absolute;
  bottom: -15px;
  right: 20px;
}
@media only screen and (max-width: 767px) {
  .service__detail-img img.sd-shape {
    right: 5px;
    bottom: -30px;
  }
}
.service__detail-content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__detail-content {
    grid-gap: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__detail-content {
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__detail-content {
    grid-gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__detail-content {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 30px;
  }
}
.service__detail-content p {
  font-size: 18px;
  line-height: 1.4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-v2.pt-110 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-v2.pt-110 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .service-v2.pt-110 {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-v3.pt-130 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-v3.pt-130 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .service-v3.pt-130 {
    padding-top: 120px;
  }
}
.service-v4.pb-150 {
  padding-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-v4 .pt-130 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-v4 .pt-130 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .service-v4 .pt-130 {
    padding-top: 120px;
  }
}
.service-v5 .portfolio__service-item, .service-v5.portfolio__service .sec-title, .service-v5.portfolio__service .sec-text, .service-v5.portfolio__service .sec-text p {
  opacity: 1;
}
.service-v5 .portfolio__service-item {
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-v5.pt-140 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-v5.pt-140 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .service-v5.pt-140 {
    padding-top: 120px;
    padding-bottom: 40px;
  }
}
.service-v5.portfolio__service .sec-title {
  text-indent: 0;
}

.service__list-6 li a.active {
  color: red;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.service__area-6 .mid-content .service__image:nth-child(1) {
  z-index: 9;
}

.service__image:nth-child(2) {
  z-index: 8;
}

.service__image:nth-child(3) {
  z-index: 7;
}

.service__image:nth-child(4) {
  z-index: 6;
}

.service__image:nth-child(5) {
  z-index: 5;
}

.service__image:nth-child(6) {
  z-index: 4;
}

.service__image:nth-child(7) {
  z-index: 3;
}

.service__image:nth-child(8) {
  z-index: 2;
}

.service__image:nth-child(9) {
  z-index: 1;
}

.service__hero-2 {
  padding-top: 150px;
  padding-bottom: 150px;
  background-image: url(../imgs/home-7/sh-bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-2 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-2 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-2 {
    padding-bottom: 60px;
  }
}
.service__hero-2 .shape-1 {
  position: absolute;
  width: 132px;
  height: auto;
  right: 165px;
  top: 275px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__hero-2 .shape-1 {
    right: 100px;
    top: 180px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-2 .shape-1 {
    right: 30px;
    top: 200px;
    width: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-2 .shape-1 {
    max-width: 80px;
    right: 10px;
    top: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-2 .shape-1 {
    width: 75px;
    right: 6px;
    top: 130px;
  }
}
.service__hero-inner-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3fr;
  grid-template-columns: 1fr 3fr;
}
@media only screen and (max-width: 767px) {
  .service__hero-inner-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.service__hero-left-2 {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .service__hero-left-2 {
    -ms-grid-row: 2;
    grid-row: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 15px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 30px;
  }
}
.service__hero-left-2 img {
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-left-2 img {
    max-width: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-left-2 img {
    max-width: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-left-2 img {
    max-width: 160px;
    margin: 0;
  }
}
.service__hero-left-2 .image-1, .service__hero-left-2 .image-3 {
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(-25px);
            transform: translateX(-25px);
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-left-2 .image-1, .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.service__hero-left-2 .image-2 {
  -webkit-transform: translateX(62px);
          transform: translateX(62px);
}
@media only screen and (max-width: 767px) {
  .service__hero-left-2 .image-2 {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.service__hero-left-2 .image-4 {
  position: absolute;
  left: 318px;
  bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-left-2 .image-4 {
    left: 278px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-left-2 .image-4 {
    left: 225px;
    bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-left-2 .image-4 {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-right-2 {
    -ms-grid-row: 1;
    grid-row: 1;
  }
}
.service__hero-right-2 .title {
  font-weight: 500;
  font-size: 130px;
  line-height: 1;
  color: var(--black);
  text-transform: capitalize;
  padding-bottom: 40px;
  padding-top: 80px;
  padding-left: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-right-2 .title {
    font-size: 110px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-right-2 .title {
    font-size: 90px;
    padding-bottom: 30px;
    padding-top: 30px;
    padding-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .service__hero-right-2 .title {
    font-size: 60px;
    padding-bottom: 20px;
    padding-top: 0;
    padding-left: 0;
  }
}
.service__hero-right-2 .title span {
  display: block;
  padding-left: 170px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-right-2 .title span {
    padding-left: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-right-2 .title span {
    padding-left: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-right-2 .title span {
    padding-left: 60px;
  }
}
.service__hero-right-2 p {
  font-size: 18px;
  max-width: 340px;
  margin-left: 350px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-right-2 p {
    margin-left: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-right-2 p {
    margin-left: 220px;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-right-2 p {
    font-size: 16px;
    margin-left: 65px;
  }
}
.service__hero-right-2 .scroll {
  margin-left: 30px;
  -webkit-animation: wcSlideBottom 5s infinite linear;
          animation: wcSlideBottom 5s infinite linear;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__hero-right-2 .scroll {
    margin-left: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__hero-right-2 .scroll {
    margin-left: 220px;
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .service__hero-right-2 .scroll {
    margin-left: 65px;
    margin-top: 40px;
  }
}

/*----------------------------------------*/
/*  18. COUNTER CSS START
/*----------------------------------------*/
.counter__area {
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .counter__area .pt-150 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .counter__area-3 {
    background-color: var(--pink-4);
    padding: 100px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__area-3 {
    background-color: var(--pink-4);
    padding: 90px 0;
  }
}
@media only screen and (max-width: 767px) {
  .counter__area-3 {
    background-color: var(--pink-4);
    padding: 60px 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .counter__area-3 .sec-title-wrapper {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .counter__area-3 .sec-title-wrapper {
    padding-top: 120px;
  }
}
.counter__area-3 .sec-sub-title {
  font-weight: 500;
  color: var(--black);
  text-transform: uppercase;
  padding-bottom: 150px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .counter__area-3 .sec-sub-title {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .counter__area-3 .sec-sub-title {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .counter__area-3 .sec-sub-title {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__area-3 .sec-sub-title {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .counter__area-3 .sec-sub-title {
    display: none;
  }
}
.counter__area-3 .counter__number {
  color: var(--black-2);
  font-weight: 400;
  padding-bottom: 10px;
}
.counter__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .counter__wrapper {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 30px 10px;
  }
}
.counter__wrapper-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 767px) {
  .counter__wrapper-2 {
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }
}
.counter__wrapper-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .counter__wrapper-3 {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 50px 40px;
  }
}
.counter__item {
  width: 380px;
  height: 380px;
  border: 1px solid var(--white-2);
  border-radius: 100%;
  margin-left: -67px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .counter__item {
    margin-left: -60px;
    width: 330px;
    height: 330px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .counter__item {
    margin-left: -25px;
    width: 259px;
    height: 259px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__item {
    margin-left: -27px;
    width: 200px;
    height: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .counter__item {
    margin-left: 0;
    width: 160px;
    height: 160px;
  }
}
.counter__item:first-child {
  margin-left: 0;
}
.counter__item p {
  font-size: 20px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__item p {
    font-size: 18px;
    line-height: 1.2;
  }
}
@media only screen and (max-width: 767px) {
  .counter__item p {
    font-size: 16px;
    line-height: 1.3;
    padding: 0 7px;
  }
}
.counter__item-2 {
  text-align: center;
}
.counter__item-2 p {
  font-size: 20px;
  line-height: 1.3;
}
.counter__item-3 {
  padding-bottom: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .counter__item-3 {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .counter__item-3 {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__item-3 {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .counter__item-3 {
    padding-bottom: 0;
    text-align: center;
  }
}
.counter__item-3 p {
  font-size: 20px;
}
@media only screen and (max-width: 767px) {
  .counter__item-3 p {
    line-height: 1.2;
  }
}
.counter__number {
  font-weight: 300;
  font-size: 100px;
  line-height: 1.1;
  color: var(--secondary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .counter__number {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__number {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .counter__number {
    font-size: 40px;
  }
}
.counter__img-3 {
  margin-top: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .counter__img-3 {
    margin-top: 0;
    text-align: right;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .counter__img-3 {
    margin-top: 0;
    text-align: right;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .counter__img-3 {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__img-3 {
    margin-top: 0;
  }
}
.counter__img-3 img {
  width: 100%;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .counter__img-3 img {
    width: 80%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .counter__img-3 img {
    width: 75%;
  }
}

/*----------------------------------------*/
/*  19. WORKFLOW CSS START
/*----------------------------------------*/
.workflow__area {
  overflow: hidden;
}
.workflow__area .sec-title-wrapper {
  text-align: center;
  padding-bottom: 60px;
}
.workflow__area-3 {
  overflow: hidden;
  background-color: var(--pink-4);
  padding-top: 60px;
  direction: ltr;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .workflow__area-3 {
    padding-top: 90px;
    background-color: var(--pink-3);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .workflow__area-3 {
    padding-top: 80px;
    background-color: var(--pink-3);
  }
}
@media only screen and (max-width: 767px) {
  .workflow__area-3 {
    padding-top: 60px;
    background-color: var(--pink-3);
  }
}
.workflow__area-3 .wf_panel {
  width: 100%;
  height: 100%;
  will-change: transform;
  opacity: 1 !important;
}
.workflow__area-6 {
  overflow: hidden;
  padding-top: 5px;
}
@media only screen and (max-width: 767px) {
  .workflow__area-6 .pb-130 {
    padding-bottom: 20px;
  }
}
.workflow__wrapper-3 {
  width: 400%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: no-wrap;
      flex-wrap: no-wrap;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .workflow__wrapper-3 {
    width: 100%;
    height: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .workflow__wrapper-3 {
    width: 100%;
    height: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .workflow__wrapper-3 {
    width: 100%;
    height: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.workflow__wrapper-6 {
  border-top: 1px solid var(--white-4);
  padding-top: 50px;
}
@media only screen and (max-width: 767px) {
  .workflow__wrapper-6 {
    border-top: none;
    padding-top: 0;
  }
}
.workflow__slide {
  text-align: center;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .workflow__slide {
    padding: 0 10px;
  }
}
.workflow__slide::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  top: 58px;
  background-color: var(--black-2);
}
.workflow__slide::after {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  left: calc(50% - 9px);
  top: 50px;
  background-color: var(--primary);
  border: 3px solid var(--white);
  border-radius: 100%;
  -webkit-animation: wcBubble 1.5s 1s infinite;
          animation: wcBubble 1.5s 1s infinite;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.workflow__slide p {
  max-width: 230px;
  margin: 0 auto;
}
.workflow__slide-6 {
  max-width: 270px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .workflow__slide-6 {
    max-width: 100%;
    padding-bottom: 40px;
  }
}
.workflow__slide-6::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  left: 0;
  top: -54px;
  background-color: var(--black);
  border: 1px solid var(--white);
  border-radius: 100%;
  -webkit-animation: wcBubble 1.5s 1s infinite;
          animation: wcBubble 1.5s 1s infinite;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .workflow__slide-6::before {
    width: 0;
    height: 0;
  }
}
.workflow__step {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--black-2);
  text-transform: capitalize;
  padding-bottom: 50px;
}
.workflow__number {
  font-size: 85px;
  font-weight: 500;
  color: var(--gray-4);
}
.workflow__title {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--black-2);
  padding-bottom: 15px;
}
.workflow__title-6 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--black);
  padding-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .workflow__title-6 {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .workflow__title-6 {
    padding-bottom: 10px;
  }
}

.choose-title {
  font-weight: 500;
  font-size: 200px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .choose-title {
    font-size: 160px;
    margin-top: -100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .choose-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .choose-title {
    font-size: 40px;
  }
}
.choose-title-wrapper {
  text-align: center;
}
.choose-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.research__area {
  background-color: var(--pink-3);
  background-image: url(../imgs/shape/8.png);
  background-repeat: no-repeat;
  background-position: 200px calc(100% - 150px);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .research__area {
    background-position: 20px calc(100% - 230px);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__area {
    background-position: 20px calc(100% - 220px);
  }
  .research__area.pt-150 {
    padding-top: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__area {
    background-position: 20px calc(100% - 100px);
    padding-bottom: 50px;
  }
  .research__area.pt-150 {
    padding-top: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__area {
    padding-bottom: 40px;
    background-position: 0 210px;
    background-size: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .research__area {
    background-size: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__area.pt-150 {
    padding-top: 60px;
  }
}
.research__area-2 {
  background-color: var(--pink-3);
}
.research__area-2 .research__item p {
  max-width: 480px;
}
.research__area-2 .research__item {
  padding-bottom: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__area-2 .research__item {
    padding-bottom: 12px;
  }
}
.research__area .sec-title {
  text-transform: uppercase;
  padding-bottom: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__area .sec-title {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__area .sec-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__area .sec-title {
    padding-bottom: 30px;
  }
}
.research__area .sec-title-wrapper {
  padding-right: 80px;
  padding-bottom: 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__area .sec-title-wrapper {
    padding-right: 40px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__area .sec-title-wrapper {
    padding-bottom: 40px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__area .sec-title-wrapper {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .research__area .sec-title-wrapper {
    padding-right: 0;
    padding-bottom: 40px;
    text-align: center;
  }
}
.research__area .sec-title-wrapper p {
  max-width: 360px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  margin-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__area .sec-title-wrapper p {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__area .sec-title-wrapper p {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .research__area .sec-title-wrapper p {
    margin: 0 auto;
  }
}
.research__area .sec-sub-title {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--black);
  padding-bottom: 140px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .research__area .sec-sub-title {
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__area .sec-sub-title {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__area .sec-sub-title {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__area .sec-sub-title {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .research__area .sec-sub-title {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .research__list {
    padding-bottom: 35px;
  }
}
.research__tools {
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__tools {
    padding-left: 0;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .research__tools {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .research__tools {
    padding-left: 0;
    padding-bottom: 40px;
    text-align: center;
  }
}
.research__tools li {
  display: inline-block;
}
.research__tools li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black);
  border: 1px solid var(--black);
  border-radius: 30px;
  padding: 2px 15px;
}
.research__tools li a:hover {
  color: var(--white);
  background-color: var(--black-2);
}
.research__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  padding-bottom: 50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .research__item {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__item {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .research__item {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.research__item:nth-child(odd) {
  padding-left: 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__item:nth-child(odd) {
    padding-left: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__item:nth-child(odd) {
    padding-left: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .research__item:nth-child(odd) {
    padding-left: 0;
  }
}
.research__item p {
  max-width: 255px;
  color: var(--black-2);
}
.research__number span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #D9D9D9;
  width: 150px;
  height: 150px;
  border: 2px solid;
  border-radius: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .research__number span {
    width: 160px;
    height: 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__number span {
    width: 160px;
    height: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .research__number span {
    width: 130px;
    height: 130px;
    font-size: 36px;
  }
}
.research__title {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .research__title {
    padding-bottom: 5px;
  }
}

/*----------------------------------------*/
/*  20. BRAND CSS START
/*----------------------------------------*/
.brand__area {
  overflow: hidden;
}
.brand__area .pb-100 {
  padding-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand__area .pb-100 {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .brand__area .pb-100 {
    padding-bottom: 0;
  }
}
.brand__area .sec-title-wrapper {
  padding-bottom: 60px;
}
.brand__list, .brand__list-3, .brand__list-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr);
  background-color: var(--white);
  border-bottom: 1px solid var(--white-3);
  position: relative;
  z-index: 1;
  margin-left: 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .brand__list, .brand__list-3, .brand__list-2 {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand__list, .brand__list-3, .brand__list-2 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .brand__list, .brand__list-3, .brand__list-2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    margin-left: 0;
  }
}
.brand__list-2 {
  gap: 40px;
  background-color: transparent;
  border-bottom: none;
  margin-left: 0;
}
.brand__list-3 {
  background-color: transparent;
  border-bottom: none;
  margin-left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .brand__list-3 {
    gap: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand__list-3 {
    gap: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .brand__list-3 {
    gap: 50px;
  }
}
.brand-marquee .swiper-wrapper {
  transition-timing-function: linear;
}
@media only screen and (max-width: 767px) {
  .hero-arrow-icon {
    display: none;
  }
}
.service-tab-pt-150 {
  padding-top: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-tab-pt-150 {
    padding-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service-tab-pt-150 {
    padding-top: 20px;
  }
}
.service-tab-pt-180 {
  padding-top: 180px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-tab-pt-180 {
    padding-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service-tab-pt-180 {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .service-tab-pt-150,
  .service-tab-pt-180 {
    padding-top: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .service__list-6 {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 0;
  }
}
#service_1 .btn_wrapper,
#service_2 .btn_wrapper,
#service_3 .btn_wrapper {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  margin-left: 0;
  margin-top: 15px;
}
.pill-btn-outline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  background-color: #07152F;
  border: 1px solid #005fcc;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
  line-height: 1;
  transition: all 0.3s;
}
.pill-btn-outline:hover {
  background-color: #005fcc;
  border-color: #005fcc;
  color: #fff;
}
.pill-btn-outline-icon {
  color: #4da3ff;
  font-size: 18px;
}
.pill-btn-outline-arrow {
  display: inline-flex;
  align-items: center;
  color: #4da3ff;
  margin-left: 8px;
}
.pill-btn-outline:hover .pill-btn-outline-icon,
.pill-btn-outline:hover .pill-btn-outline-arrow {
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .about-text-col-mobile-gap {
    margin-top: 30px;
  }
}
.final-cta {
  padding: 130px 0;
  background: #fff;
  text-align: center;
}
.final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.final-cta-eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #005fcc;
  padding-bottom: 20px;
}
.final-cta-title {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--black-2);
  margin: 0 0 20px;
}
.final-cta-text {
  font-size: 18px;
  font-weight: 300;
  color: var(--gray-2);
  max-width: 560px;
  margin: 0 auto 40px;
}
.final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: #fff;
  color: #005fcc;
  border: 2px solid #005fcc;
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all 0.3s;
}
.final-cta-btn:hover {
  background: #005fcc;
  color: #fff;
}
@media only screen and (max-width: 991px) {
  .final-cta {
    padding: 90px 0;
  }
  .final-cta-title {
    font-size: 34px;
  }
}
@media only screen and (max-width: 767px) {
  .final-cta {
    padding: 70px 0;
  }
  .final-cta-title {
    font-size: 28px;
  }
  .final-cta-text {
    font-size: 16px;
  }
}

/* ============================================================
   FOOTER 2026: new footer for index.html
   ============================================================ */
.footer-2026 {
  position: relative;
  overflow: hidden;
  background: var(--black-2);
  padding-top: 80px;
}
.footer-2026::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #005fcc;
}
.footer-2026-watermark {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  font-size: 200px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 10px;
  color: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.footer-2026 .container {
  position: relative;
  z-index: 1;
}
.footer-2026-logo {
  height: 36px;
  margin-bottom: 20px;
}
.footer-2026-tagline {
  max-width: 320px;
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.footer-2026-social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.footer-2026-social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 15px;
  transition: all 0.3s;
}
.footer-2026-social li a:hover {
  background: #005fcc;
  border-color: #005fcc;
  transform: translateY(-3px);
}
.footer-2026-columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding: 60px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-2026-col-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 22px;
}
.footer-2026-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-2026-col ul li {
  margin-bottom: 14px;
}
.footer-2026-col ul li a {
  color: var(--gray-2);
  font-size: 15px;
  transition: color 0.3s;
}
.footer-2026-col ul li a:hover {
  color: #fff;
}
.footer-2026-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-2026-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-2);
  font-size: 15px;
  margin-bottom: 14px;
}
.footer-2026-contact li i {
  color: #005fcc;
  width: 16px;
  text-align: center;
}
.footer-2026-project {
  padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  text-align: right;
}
.footer-2026-project-title {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 30px;
}
.footer-2026-project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s;
}
.footer-2026-project-btn:hover {
  background: #005fcc;
  border-color: #005fcc;
  color: #fff;
}
.footer-2026-hours {
  margin: 30px 0 0;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.footer-2026-days {
  margin: 4px 0 0;
  color: var(--gray-2);
  font-size: 15px;
}
.footer-2026-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 30px 0;
}
.footer-2026-copyright {
  margin: 0;
  color: var(--gray-2);
  font-size: 14px;
}
.footer-2026-legal {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-2026-legal a {
  color: var(--gray-2);
  font-size: 14px;
  transition: color 0.3s;
}
.footer-2026-legal a:hover {
  color: #fff;
}
@media only screen and (max-width: 1199px) {
  .footer-2026-columns {
    grid-template-columns: 1fr 1fr;
  }
  .footer-2026-project {
    grid-column: span 2;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 40px;
    text-align: left;
  }
}
@media only screen and (max-width: 991px) {
  .footer-2026-watermark {
    font-size: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-2026 {
    padding-top: 60px;
  }
  .footer-2026-brand {
    text-align: center;
  }
  .footer-2026-logo {
    margin-left: auto;
    margin-right: auto;
  }
  .footer-2026-tagline {
    margin-left: auto;
    margin-right: auto;
  }
  .footer-2026-social {
    justify-content: center;
  }
  .footer-2026-columns {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 0;
    gap: 32px;
  }
  .footer-2026-contact li {
    justify-content: center;
  }
  .footer-2026-project {
    grid-column: auto;
    text-align: center;
    border-top: none;
    padding-top: 0;
  }
  .footer-2026-project-btn {
    margin: 0 auto;
  }
  .footer-2026-bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
  .footer-2026-legal {
    justify-content: center;
  }
  .footer-2026-watermark {
    font-size: 70px;
  }
}

.brand__item {
  padding: 40px;
  text-align: center;
  border-top: 1px solid var(--white-3);
  border-right: 1px solid var(--white-3);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .brand__item {
    padding: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand__item {
    padding: 30px 25px;
  }
}
@media only screen and (max-width: 767px) {
  .brand__item {
    padding: 30px 0;
    border-left: 1px solid var(--white-3);
  }
  .brand__item:nth-child(even) {
    border-left: none;
  }
}
.brand__item-2 {
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand__item-2 {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .brand__item-2 {
    padding-bottom: 20px;
  }
}
.brand__title-2 {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 50px;
  text-align: center;
}
.brand__title-3 {
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  text-align: center;
  padding-bottom: 65px;
  font-weight: 400;
  text-transform: uppercase;
}

.brand-gap {
  gap: 50px 0;
  border: none;
  background-color: transparent;
}

/*----------------------------------------*/
/*  21. TESTIMONIAL CSS START
/*----------------------------------------*/
.testimonial__area {
  overflow: hidden;
}
.testimonial__area .sec-title-wrapper {
  max-width: 330px;
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__area .sec-title-wrapper {
    width: 100%;
    padding-top: 60px;
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__area .sec-title-wrapper {
    padding-top: 0px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__area .sec-title-wrapper {
    padding-top: 0px;
  }
}
.testimonial__area p {
  padding-top: 30px;
  font-size: 18px;
  line-height: 1.4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__area p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__area p {
    padding-bottom: 20px;
  }
}
.testimonial__area-2 .line-3 {
  z-index: 5;
}
@media only screen and (max-width: 767px) {
  .testimonial__area-2 .g-0 {
    padding-right: 8px;
    padding-left: 8px;
  }
}
.testimonial__area-3 {
  background-image: url(../imgs/testimonial/3/bg.png);
  background-repeat: no-repeat;
  background-position: 0 150px;
  position: relative;
  padding-top: 410px;
  padding-bottom: 130px;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__area-3 {
    padding-top: 300px;
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__area-3 {
    padding-top: 300px;
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__area-3 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .testimonial__area-3 img {
    display: none;
  }
}
@media (max-width: 1023px) {
  .testimonial__area .cursor {
    display: none;
  }
}
.testimonial__slider-3 {
  padding-top: 120px;
  padding-bottom: 120px;
  max-width: 660px;
}
@media only screen and (max-width: 767px) {
  .testimonial__slider-3 {
    padding-top: 80px;
  }
}
.testimonial__slider-3 .swipper-btn {
  width: 50px;
  height: 50px;
  border: 1px solid;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.testimonial__slider-3 .swipper-btn:hover {
  background-color: var(--black-2);
}
.testimonial__slider-3 .swipper-btn:hover i {
  color: var(--white);
}
.testimonial__slider-3 .swipper-btn i {
  font-size: 18px;
  color: var(--black-3);
}
.testimonial__slider-3 .next-button {
  right: calc(50% + 10px);
}
.testimonial__slider-3 .prev-button {
  left: calc(50% + 10px);
}
.testimonial__slide {
  margin-left: -3px;
}
.testimonial__slide-3 {
  text-align: center;
}
.testimonial__slide-3 p {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  font-style: italic;
  max-width: 630px;
  margin: 0 auto;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__slide-3 p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__slide-3 p {
    font-size: 16px;
    padding: 0 10px;
  }
}
.testimonial__slide-3 p::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: -100px;
  left: calc(50% - 23px);
  background-image: url(../imgs/icon/quote.png);
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  .testimonial__slide-3 p::before {
    top: -80px;
  }
}
.testimonial__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.testimonial__wrapper-2 {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .testimonial__item {
    padding-bottom: 30px;
  }
}
.testimonial__item .button {
  display: inline-block;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .testimonial__item.item-1 {
    text-align: center;
    margin: 0 50px;
  }
  .testimonial__item.item-1 img {
    width: 100%;
  }
}
.testimonial__item.item-2 {
  padding-top: 20px;
  text-align: center;
}
.testimonial__item.item-3 {
  padding-top: 220px;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .testimonial__item.item-3 {
    text-align: center;
    padding-top: 30px;
  }
}
.testimonial__img {
  position: relative;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__img img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__img img {
    width: 100%;
  }
}
.testimonial__img.b-right::after {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(100% - 30px);
  left: 30px;
  top: 0;
  border: 1px solid var(--white-6);
  border-radius: 180px 180px 0 0;
  z-index: -1;
}
.testimonial__img.b-left::before {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(100% - 30px);
  left: -30px;
  top: 0;
  border: 1px solid var(--white-6);
  border-radius: 180px 180px 0 0;
  z-index: -1;
}
.testimonial__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--black);
  text-transform: capitalize;
}
.testimonial__title-2 {
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  color: var(--black);
  font-style: italic;
  padding: 100px 100px 20px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__title-2 {
    font-size: 48px;
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__title-2 {
    font-size: 48px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__title-2 {
    font-size: 36px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__title-2 {
    font-size: 36px;
    padding: 20px 0;
  }
}
.testimonial__role {
  font-size: 14px;
  color: var(--black-3);
  line-height: 1.3;
  font-weight: 400;
  text-transform: capitalize;
}
.testimonial__role-2 {
  font-weight: 400;
  font-size: 14px;
  line-height: 12px;
  color: var(--black-3);
}
.testimonial__text-2 {
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  color: var(--black-3);
  padding-right: 40px;
  padding-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__text-2 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__text-2 {
    padding-right: 0;
    padding-bottom: 30px;
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__text-2 {
    font-size: 18px;
    padding-right: 0;
    padding-bottom: 30px;
  }
}
.testimonial__inner-2 {
  background-color: var(--white);
  padding: 80px;
  margin-top: 140px;
  background-image: url(../imgs/icon/quote-primary.png);
  background-repeat: no-repeat;
  background-position: 80px 80px;
  margin-right: 2px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__inner-2 {
    padding: 80px 30px;
    margin-top: 185px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__inner-2 {
    padding: 60px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__inner-2 {
    padding: 60px 30px;
    margin-top: 136px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__inner-2 {
    text-align: center;
    padding: 0;
    padding-top: 60px;
    margin-top: 30px;
    background-position: 50% 0;
  }
}
.testimonial__video {
  margin-right: -112px;
  max-height: 785px;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__video {
    max-height: 740px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__video {
    max-height: 700px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__video {
    margin-right: 0;
    max-height: unset;
  }
}
.testimonial__video video {
  width: 100%;
}
.testimonial__author {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--black-2);
  padding-bottom: 5px;
}
.testimonial__pagination {
  position: absolute;
  right: 0;
  top: calc(50% - 105px);
  -webkit-transform: translate(100%, -50%);
          transform: translate(100%, -50%);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .testimonial__pagination {
    -webkit-transform: unset;
            transform: unset;
    z-index: 9;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__pagination {
    -webkit-transform: unset;
            transform: unset;
    top: unset;
    bottom: 110px;
    z-index: 9;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__pagination {
    -webkit-transform: unset;
            transform: unset;
    top: unset;
    bottom: 60px;
    z-index: 9;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__pagination {
    -webkit-transform: unset;
            transform: unset;
    top: unset;
    bottom: 60px;
    z-index: 9;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__pagination {
    display: none;
  }
}
.testimonial__pagination .next-button,
.testimonial__pagination .prev-button {
  width: 60px;
  height: 60px;
  border: 1px solid var(--gray-7);
  color: var(--gray-7);
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 30px 35px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__pagination .next-button,
.testimonial__pagination .prev-button {
    margin: 20px;
  }
}
.testimonial__pagination .next-button::after,
.testimonial__pagination .prev-button::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.testimonial__pagination .next-button:hover,
.testimonial__pagination .prev-button:hover {
  border-color: var(--black-2);
}
.testimonial__pagination .next-button:hover i,
.testimonial__pagination .prev-button:hover i {
  color: var(--black-2);
}
.testimonial3__img {
  position: absolute;
  top: 170px;
  left: 25%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial3__img {
    top: 100px;
    left: 15%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial3__img {
    top: 60px;
    left: 10%;
  }
}
.testimonial3__img-2 {
  position: absolute;
  top: 230px;
  right: 28%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial3__img-2 {
    top: 180px;
    right: 15%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial3__img-2 {
    top: 130px;
    right: 15%;
  }
}
.testimonial3__img-3 {
  position: absolute;
  top: 40%;
  left: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial3__img-3 {
    top: 78%;
    left: 60px;
    z-index: 9;
  }
}
.testimonial3__img-4 {
  position: absolute;
  top: 54%;
  left: 270px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .testimonial3__img-4 {
    max-width: 250px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial3__img-4 {
    max-width: 220px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial3__img-4 {
    max-width: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial3__img-4 {
    max-width: 160px;
  }
}
.testimonial3__img-5 {
  position: absolute;
  top: 43%;
  right: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial3__img-5 {
    right: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial3__img-5 {
    top: 62%;
    right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial3__img-5 {
    top: 60%;
    right: 0;
    width: 150px;
  }
}
.testimonial3__img-6 {
  position: absolute;
  right: 280px;
  top: 58%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial3__img-6 {
    right: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial3__img-6 {
    top: 75%;
    right: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial3__img-6 {
    top: 70%;
    right: 60px;
  }
}

.client__name-3 {
  font-weight: normal;
  font-size: 28px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--black-2);
  padding-top: 50px;
  padding-bottom: 10px;
}
.client__role-3 {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-3);
}

/*----------------------------------------*/
/*  22. PORTFOLIO CSS START
/*----------------------------------------*/
.portfolio__text {
  text-align: center;
  font-size: 150px;
  font-weight: 500;
  color: var(--white);
  text-transform: uppercase;
  padding: 120px 0 50px;
  opacity: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__text {
    font-size: 110px;
    padding: 8px 0 0;
  }
}
/* 1200-1399px fell through to the base rule below (150px font, 120px/50px
   padding - the full desktop values) instead of continuing the tablet
   taper that 992-1199px already applies, reading as an oversized empty
   gap above/below the heading at this width. Keep tapering it down. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__text {
    padding: 8px 0 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__text {
    font-size: 90px;
    padding: 8px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__text {
    font-size: 45px;
    padding: 50px 0;
  }
}
.portfolio__area {
  position: relative;
  background-color: var(--white-2);
  overflow: hidden;
}
.portfolio__area-2 {
  overflow: hidden;
  position: relative;
}
.portfolio__area-2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: 84.6%;
  top: 0;
  background: var(--white-4);
}
@media only screen and (max-width: 767px) {
  .portfolio__area-2 {
    padding-bottom: 15px;
  }
}
.portfolio__area-2::after {
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .portfolio__area-2::after {
    z-index: unset;
  }
}
.portfolio__area-2 .swiper-slide-active .sec-title {
  -webkit-animation: wcfadeUp 1s 0.5s forwards;
          animation: wcfadeUp 1s 0.5s forwards;
}
.portfolio__area-2 .swiper-slide-active p {
  -webkit-animation: wcfadeUp 1s 0.7s forwards;
          animation: wcfadeUp 1s 0.7s forwards;
}
.portfolio__area-2 .swiper-slide-active .btn-common-wrap {
  -webkit-animation: wcfadeUp 1s 0.9s forwards;
          animation: wcfadeUp 1s 0.9s forwards;
}
.portfolio__area-2 .sec-title-wrapper {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .portfolio__area-2 .sec-title-wrapper {
    text-align: left;
  }
}
.portfolio__area-2 .sec-title-wrapper .sec-text {
  font-size: 24px;
  max-width: 410px;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .portfolio__area-2 .sec-title-wrapper .sec-text {
    font-size: 20px;
  }
}
.portfolio__area-2 .sec-title-3 {
  font-weight: 400;
  background-image: url(../imgs/shape/1.png);
  background-repeat: no-repeat;
  background-position: 70% 25px;
  display: inline-block;
  padding-bottom: 120px;
  padding-right: 320px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-2 .sec-title-3 {
    background-size: 260px;
    background-position: 70% 20px;
    padding-right: 200px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-2 .sec-title-3 {
    background-size: 200px;
    background-position: 95% 0;
    padding-right: 100px;
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-2 .sec-title-3 {
    background-size: 150px;
    background-position: 60% 0;
    padding-left: 0;
    padding-bottom: 45px;
    padding-right: 0px;
  }
}
.portfolio__area-2 .sec-title-3 span {
  display: block;
  padding-left: 450px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-2 .sec-title-3 span {
    padding-right: 0;
    padding-left: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-2 .sec-title-3 span {
    padding-right: 0;
    padding-left: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-2 .sec-title-3 span {
    padding-right: 0;
    padding-left: 85px;
  }
}
.portfolio__area-3 {
  background-color: var(--black-2);
}
.portfolio__area-3 .sec-sub-title {
  text-transform: uppercase;
  color: var(--white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-3 .sec-sub-title {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-3 .sec-sub-title {
    padding-bottom: 45px;
  }
}
.portfolio__area-3 .swiper-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
.portfolio__area-3 .swiper-btn div {
  font-size: 20px;
  color: var(--white);
  border: 1px solid var(--white);
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1365px) {
  .portfolio__area-3 .swiper-btn div {
    opacity: 1;
    visibility: visible;
    top: calc(50% - 100px);
  }
}
@media (max-width: 1023px) {
  .portfolio__area-3 .swiper-btn div {
    opacity: 1;
    visibility: visible;
    top: calc(50% - 25px);
  }
}
.portfolio__area-3 .swiper-btn div:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.portfolio__area-3 .swiper-btn div.pp-prev {
  left: 26px;
}
.portfolio__area-3 .swiper-btn div.pp-next {
  right: 0;
}
@media (max-width: 1365px) {
  .portfolio__area-3 .swiper-btn div.pp-next {
    right: -24px;
  }
}
.portfolio__area-3 .swiper-pagination {
  width: 120px;
  left: 370px;
  top: 0;
  bottom: unset;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-3 .swiper-pagination {
    left: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-3 .swiper-pagination {
    left: 180px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-3 .swiper-pagination {
    left: -22px;
    padding-top: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-3 .swiper-pagination {
    left: 0;
  }
}
.portfolio__area-3 .swiper-pagination-total {
  font-size: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: -50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-6 .line {
    padding-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-6 .line {
    padding-top: 0;
  }
}
.portfolio__area-6 .zi-9 {
  position: relative;
  z-index: 9;
}
.portfolio__area-6 .sec-title {
  font-size: 120px;
  padding-bottom: 20px;
}
.portfolio__area-6 .sec-title-wrapper {
  position: sticky;
  top: 130px;
}
.portfolio__area-6 .sec-title-wrapper p {
  font-size: 18px;
  line-height: 1.4;
  padding-left: 110px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-6 .sec-title-wrapper p {
    padding-left: 60px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-6 .sec-title-wrapper p {
    padding-left: 60px;
  }
}
.portfolio__area-6 .sec-title-wrapper p::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 1px;
  background-color: var(--black-2);
  left: 0;
  top: 8px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-6 .sec-title-wrapper p::before {
    width: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-6 .sec-title-wrapper p::before {
    width: 50px;
  }
}
.portfolio__area-6 .sec-sub-title {
  font-size: 24px;
  padding-bottom: 0;
}
.portfolio__slider-2 {
  position: relative;
  height: 100vh;
}
.portfolio__slider-2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
  background: var(--white-4);
}
.portfolio__slider-2::after {
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .portfolio__slider-2::after {
    z-index: unset;
  }
}
@media (max-width: 1400px) {
  .portfolio__slider-2 {
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__slider-2-pagination {
    display: none;
  }
}
.portfolio__slider-2-pagination .swiper-pagination-bullets {
  left: calc(100% - 135px);
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
          transform: translate3d(0px, -50%, 0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullets {
    left: calc(100% - 60px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullets {
    left: calc(100% - 45px);
  }
}
.portfolio__slider-2-pagination .swiper-pagination-bullet {
  display: block;
  margin: 15px 10px !important;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 1px solid #D6D6D6;
  opacity: 1;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    margin: 10px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    margin: 10px !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 30px;
    margin: 10px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    width: 25px;
    height: 25px;
    margin: 5px !important;
  }
}
.portfolio__slider-2-pagination .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  left: 50%;
  top: 50%;
  border-radius: 50px;
  background-color: #D6D6D6;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.portfolio__slider-2-pagination .swiper-pagination-bullet-active, .portfolio__slider-2-pagination .swiper-pagination-bullet:hover {
  border-color: var(--black-2);
}
.portfolio__slider-2-pagination .swiper-pagination-bullet-active::after, .portfolio__slider-2-pagination .swiper-pagination-bullet:hover::after {
  background-color: var(--black-2);
}
.portfolio__slider-3 {
  position: relative;
}
.portfolio__slider-3:hover .swiper-btn div {
  opacity: 1;
  visibility: visible;
}
.portfolio__slide-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--white);
}
@media only screen and (max-width: 767px) {
  .portfolio__slide-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.portfolio__slide-2 .sec-title {
  line-height: 1.1;
  padding-bottom: 30px;
  padding-left: 10px;
  opacity: 0;
}
.portfolio__slide-2 .sec-title a {
  color: var(--black-2);
  text-transform: capitalize;
}
.portfolio__slide-2 .sec-title span {
  display: block;
  padding-left: 60px;
  position: relative;
}
.portfolio__slide-2 .sec-title span::before {
  position: absolute;
  content: "";
  width: 60px;
  height: 1px;
  left: -10px;
  top: 50%;
  background-color: var(--black-2);
}
.portfolio__slide-2 .slide-img {
  padding-right: 15px;
}
@media only screen and (max-width: 767px) {
  .portfolio__slide-2 .slide-img {
    padding-right: 0;
  }
}
.portfolio__slide-2 .slide-img img {
  width: 100%;
}
.portfolio__slide-2 .slide-content {
  padding-left: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slide-2 .slide-content {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slide-2 .slide-content {
    padding-left: 0;
    padding-right: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__slide-2 .slide-content {
    padding: 30px 15px 50px;
  }
}
.portfolio__slide-2 p {
  max-width: 330px;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 50px;
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  .portfolio__slide-2 p {
    padding-bottom: 30px;
  }
}
.portfolio__slide-2 .btn-common {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
}
.portfolio__slide-2 .btn-common:hover {
  color: var(--black-3);
}
.portfolio__slide-2 .btn-common i {
  padding-left: 5px;
}
.portfolio__slide-2 .btn-common-wrap {
  opacity: 0;
}
.portfolio__slide-3 {
  text-align: right;
  padding-right: 110px;
}
.portfolio__slide-3 a {
  display: block;
  color: var(--white);
}
.portfolio__slide-3 a:hover span {
  color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slide-3 {
    padding-right: 0;
  }
  .portfolio__slide-3 img {
    width: 60%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slide-3 {
    padding-right: 0;
  }
  .portfolio__slide-3 img {
    width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__slide-3 {
    padding-right: 0;
  }
  .portfolio__slide-3 img {
    width: 100%;
  }
}
.portfolio__wrapper-6 {
  padding-left: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__wrapper-6 {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__wrapper-6 {
    padding-left: 0;
    padding-top: 180px;
  }
}
.portfolio__item {
  padding-bottom: 30px;
  position: fixed;
  top: 0;
  left: 0;
  /* Just needs to clear .bg_image::before's z-index: 2 behind it - not
     999, which used to climb above the fixed header (z-index: 99) once
     GSAP flips this to position: relative and it scrolls up underneath
     the nav bar, letting the card render on top of it. */
  z-index: 3;
  scale: 0.5;
  opacity: 0;
}
.portfolio__item:nth-child(even) {
  top: 50%;
}
/* Tablet keeps the same masonry stagger as desktop - .portfolio__list-1
   only drops to a single column at 767px (see its own media query above),
   so that's also where the even-item offset needs to flatten back to 0,
   otherwise a single-column layout would leave a large offset gap. */
@media only screen and (max-width: 767px) {
  .portfolio__item:nth-child(even) {
    top: 0%;
  }
}
.portfolio__item:hover .portfolio__info {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.portfolio__item .img-box {
  height: 100%;
}
.portfolio__item img {
  width: 100%;
}
.portfolio__item-6 {
  position: relative;
  padding-bottom: 80px;
  overflow: hidden;
}
.portfolio__item-6 img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__item-6 {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__item-6 {
    padding-bottom: 50px;
  }
}
.portfolio__item-6:hover .portfolio__content-6 {
  right: 0%;
  opacity: 1;
  visibility: visible;
}
.portfolio__info {
  width: 175px;
  padding: 15px;
  border-radius: 5px;
  background-color: var(--primary);
  position: absolute;
  right: 0;
  bottom: 50px;
  z-index: 1;
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__info {
    opacity: 1;
    visibility: visible;
    right: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__info {
    opacity: 1;
    visibility: visible;
    right: 45px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__info {
    opacity: 1;
    visibility: visible;
    right: 60px;
  }
}
.portfolio__info p {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--black-2);
}
.portfolio__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: var(--black-2);
  padding-bottom: 3px;
}
.portfolio__title-3 {
  font-weight: 500;
  font-size: 180px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  text-align: left;
  padding-top: 80px;
  position: absolute;
  z-index: 5;
  opacity: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__title-3 {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__title-3 {
    font-size: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__title-3 {
    font-size: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__title-3 {
    font-size: 60px;
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.portfolio__title-3 span {
  display: block;
  padding-left: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__title-3 span {
    padding-left: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__title-3 span {
    padding-left: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__title-3 span {
    padding-left: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__title-3 span {
    padding-left: 60px;
  }
}
.portfolio__title-6 {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--white);
  padding-bottom: 5px;
}
.portfolio__date {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--white);
}
.portfolio__list-1 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0px 30px;
  position: relative;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .portfolio__list-1 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 0px;
  }
}
.portfolio__list-6 {
  overflow-x: hidden;
  overflow: hidden;
}
.portfolio__pagination-6 {
  padding-top: 430px;
  padding-left: 110px;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.1;
  color: var(--black-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__pagination-6 {
    padding-top: 330px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__pagination-6 {
    padding-top: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__pagination-6 {
    padding-top: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__pagination-6 {
    padding-top: 180px;
    padding-left: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__pagination-6 {
    padding-top: 80px;
    padding-left: 0;
  }
}
.portfolio__current {
  font-weight: 300;
  font-size: 60px;
  line-height: 1.1;
  color: var(--black);
}
.portfolio__btn {
  margin-top: 40px;
}
.portfolio__btn#btn_wrapper, .portfolio__btn.btn_wrapper {
  margin: 0 auto;
}
.portfolio__content-6 {
  position: absolute;
  top: 0%;
  right: 5%;
  background-color: var(--black-2);
  z-index: 9;
  padding: 20px 30px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 1200px) {
  .portfolio__content-6 {
    opacity: 1;
    visibility: visible;
    right: 0;
  }
}
.portfolio__detail {
  overflow: hidden;
}
.portfolio__detail img {
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-top .pt-110 {
    padding-top: 140px;
  }
}
.portfolio__detail-top .sec-title {
  font-size: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-top .sec-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-top .sec-title {
    font-size: 72px;
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-top .sec-title {
    font-size: 60px;
    padding-bottom: 50px;
    padding-top: 90px;
  }
}
.portfolio__detail-info {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.portfolio__detail-info ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 80px auto;
  grid-template-columns: auto auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  grid-gap: 25px 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-info ul {
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-info ul {
    grid-gap: 20px 50px;
  }
}
.portfolio__detail-info ul li {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-8);
  text-transform: capitalize;
}
.portfolio__detail-info ul li span,
.portfolio__detail-info ul li a {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-3);
  text-transform: capitalize;
}
.portfolio__detail-thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 70vh;
}
.portfolio__detail-thumb img {
  position: absolute;

  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 130%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1920px) {
  .portfolio__detail-thumb {
    padding-left: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .portfolio__detail-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail-thumb img {
    position: unset;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .portfolio__detail-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail-thumb img {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .portfolio__detail-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail-thumb img {
    position: unset;
  }
}
.portfolio__detail-title {
  max-width: 350px;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: var(--black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-title {
    max-width: 500px;
    padding-bottom: 30px;
  }
}
.portfolio__detail-text {
  padding-bottom: 60px;
}
.portfolio__detail-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-3);
  padding-bottom: 15px;
}
.portfolio__detail-text li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  padding-bottom: 5px;
}
.portfolio__detail-text .fonts {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 70px 3.5fr;
  grid-template-columns: 2fr 3.5fr;
  gap: 70px;
  padding-top: 60px;
  padding-bottom: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-text .fonts {
    -ms-grid-columns: 1fr 30px 2fr;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-text .fonts {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-text .fonts {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 0;
  }
}
.portfolio__detail-text .fonts img {
  width: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-text .fonts img {
    width: 100%;
  }
}
.portfolio__detail-text .fonts ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.portfolio__detail-text .fonts ul li {
  font-weight: 500;
  text-transform: capitalize;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}
.portfolio__detail-text .fonts ul .regular {
  font-weight: 400;
  color: var(--gray-9);
}
.portfolio__detail-text .fonts ul .medium {
  color: var(--gray-10);
}
.portfolio__detail-text .fonts ul .semibold {
  color: var(--black-3);
}
.portfolio__detail .block-thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 65vh;
  z-index: 9;
  margin-bottom: 20px;
}
.portfolio__detail .block-thumb img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 120%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail .block-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .portfolio__detail .block-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail .block-thumb img {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail .block-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .portfolio__detail .block-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail .block-thumb img {
    position: unset;
  }
}
.portfolio__detail .block-gallery {
  overflow: hidden;
}
.portfolio__detail .block-gallery img {
  width: 50%;
  float: left;
  padding-bottom: 20px;
}
.portfolio__detail .block-gallery img:nth-child(odd) {
  padding-right: 10px;
}
.portfolio__detail .block-gallery img:nth-child(even) {
  padding-left: 10px;
}
.portfolio__detail .block-img-text {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1.3fr;
  grid-template-columns: 1fr 1fr 1.3fr;
  grid-gap: 20px;
}
@media only screen and (max-width: 767px) {
  .portfolio__detail .block-img-text {
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: repeat(2, 1fr);
  }
}
.portfolio__detail .block-img-text p {
  font-size: 18px;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail .block-img-text p {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail .block-img-text p {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail .block-img-text p {
    grid-column: 1/-1;
    padding-left: 0;
  }
}
.portfolio__detail .block-content {
  position: relative;
  z-index: 1;
}
.portfolio__detail-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.portfolio__detail-btns a {
  margin: 0 -10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-v2.pt-150 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-v2.pt-150 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio-v2.pt-150 {
    padding-top: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-v3 .pt-100 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-v3 .pt-100 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio-v3 .pt-100 {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-v4 .pt-100 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-v4 .pt-100 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio-v4 .pt-100 {
    padding-top: 130px;
  }
}
.portfolio-v4 .sec-title-2 {
  color: var(--white);
}
.portfolio-v4 .blog__text p {
  color: var(--gray-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-v5 .pt-100 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-v5 .pt-100 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio-v5 .pt-100 {
    padding-top: 130px;
  }
}
.portfolio-v5 .pb-100 {
  padding-bottom: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio-v5 .pb-100 {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-v5 .pb-100 {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-v5 .pb-100 {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio-v5 .pb-100 {
    padding-bottom: 0;
  }
}
.portfolio-v5.portfolio__project {
  padding: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-v5.portfolio__project .line {
    padding-top: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-v5.portfolio__project .line {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio-v5.portfolio__project .line {
    padding-top: 60px;
  }
}
.portfolio-v5.portfolio__project .pp-slider-wrapper,
.portfolio-v5.portfolio__project .pp-slide-thumb,
.portfolio-v5.portfolio__project .pp-next,
.portfolio-v5.portfolio__project .pp-prev {
  opacity: 1;
}

.swiper-slide-active .portfolio__title-3 {
  -webkit-animation: wcfadeUp 1s 0.7s forwards;
          animation: wcfadeUp 1s 0.7s forwards;
}

.bg_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.bg_image::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  content: "";
}
.bg_image img {
  width: 120%;
}

.row_bottom {
  margin-top: 80vh;
}
/* At 768-1399px the Case Studies image grid (2 columns, no dark-twin
   image scaling changes here) is shorter than at other breakpoints, so the
   fixed 80vh margin above leaves a large empty gap before the "View all
   Case Studies" button - scoped to just this range so narrower (phone,
   1-column) breakpoints keep the original scroll-through spacing. */
@media only screen and (min-width: 768px) and (max-width: 1399px) {
  .row_bottom {
    margin-top: 15vh;
  }
}
@media only screen and (max-width: 767px) {
  .row_bottom {
    margin-top: 30px;
  }
}

/*----------------------------------------*/
/*  23. PORTFOLIO 2 CSS START
/*----------------------------------------*/
:root {
  --pink-6: #EEE5DC;
  --purple: #D9DBEB;
  --purple-2: #CCCEDE;
  --green: #81C3A3;
  --green-2: #DCE4E0;
}

@keyframes wcSpinner {
  from {
    -webkit-transform: rotate(0turn);
    transform: rotate(0turn);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
.portfolio__hero {
  position: relative;
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .portfolio__hero {
    padding-bottom: 40px;
  }
}
.portfolio__hero .title {
  font-weight: 600;
  font-size: 230px;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  color: var(--black-2);
  opacity: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__hero .title {
    font-size: 180px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__hero .title {
    font-size: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__hero .title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__hero .title {
    font-size: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__hero .title {
    font-size: 52px;
  }
}
.portfolio__hero .title.shape-circle {
  position: relative;
  opacity: 0;
}
.portfolio__hero .title.shape-circle::after {
  position: absolute;
  content: "";
  width: 62px;
  height: 62px;
  right: -50px;
  top: 75px;
  background-image: url(../imgs/shape/13.png);
  background-repeat: no-repeat;
  background-position: right;
  -webkit-animation: wcSpinner 3s infinite linear;
          animation: wcSpinner 3s infinite linear;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__hero .title.shape-circle::after {
    top: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__hero .title.shape-circle::after {
    right: -10px;
    top: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__hero .title.shape-circle::after {
    top: 12px;
    right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__hero .title.shape-circle::after {
    top: -60px;
    right: 0;
  }
}
.portfolio__hero .title.text-stroke {
  -webkit-text-stroke: 1px var(--black-2);
  color: transparent;
  margin: 0 -140px;
  opacity: 0;
}
.portfolio__hero .pp-thumb {
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 14%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__hero .pp-thumb {
    max-width: 780px;
    left: 17%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__hero .pp-thumb {
    max-width: 600px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__hero .pp-thumb {
    max-width: 500px;
    left: 10%;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__hero .pp-thumb {
    left: 0;
  }
}
.portfolio__hero .btn-wrapper {
  text-align: center;
  position: relative;
  z-index: 9;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__hero .btn-wrapper {
    margin-top: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__hero .btn-wrapper {
    margin-top: 120px;
  }
}
.portfolio__hero-area {
  overflow: hidden;
  position: relative;
  padding-top: 200px;
  background-color: var(--pink-6);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__hero-area {
    padding-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__hero-area {
    padding-top: 160px;
  }
}
.portfolio__hero-area::after {
  position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  left: 80px;
  bottom: 50px;
  background-image: url(../imgs/shape/15.png);
  background-repeat: no-repeat;
  -webkit-animation: wcZoom 3s infinite linear;
          animation: wcZoom 3s infinite linear;
}
@media only screen and (max-width: 767px) {
  .portfolio__hero-area::after {
    left: 0;
    bottom: 45px;
  }
}
.portfolio__about {
  background-color: var(--purple);
  position: relative;
  overflow: hidden;
}
.portfolio__about::after {
  position: absolute;
  content: "ABOUT";
  width: 200px;
  height: 100%;
  right: 0px;
  top: -60px;
  font-weight: 700;
  font-size: 250px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.03);
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__about::after {
    font-size: 230px;
    top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__about::after {
    font-size: 200px;
  }
}
.portfolio__about-left {
  position: relative;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .portfolio__about-left {
    padding-bottom: 30px;
  }
}
.portfolio__about-left img {
  position: absolute;
  right: 100px;
  bottom: 0;
  opacity: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__about-left img {
    right: 0;
    max-width: 180px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__about-left img {
    display: none;
  }
}
.portfolio__about .about-row {
  margin-top: 150px;
  border-top: 1px solid var(--purple-2);
  border-bottom: 1px solid var(--purple-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__about .about-row {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__about .about-row {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__about .about-row {
    margin-top: 60px;
    border: none;
  }
}
.portfolio__about .sec-title {
  max-width: 715px;
  text-transform: uppercase;
  opacity: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__about .sec-title {
    padding-bottom: 40px;
  }
}
.portfolio__about .sec-title span {
  display: block;
  padding-left: 120px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__about .sec-title span {
    padding-left: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__about .sec-title span {
    padding-left: 0;
  }
}
.portfolio__about .sec-title span::before {
  position: absolute;
  content: "";
  width: 90px;
  height: 1px;
  left: 0;
  top: 30px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__about .sec-title span::before {
    top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__about .sec-title span::before {
    width: 0;
  }
}
.portfolio__about .sec-text p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  padding-bottom: 70px;
  opacity: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__about .sec-text p {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__about .sec-text p {
    padding-bottom: 50px;
  }
}
.portfolio__about .brand-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-2);
  max-width: 220px;
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  .portfolio__about .brand-title {
    max-width: 400px;
  }
}
.portfolio__about .brand-title-wrap {
  padding: 40px 0;
  border-right: 1px solid var(--purple-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__about .brand-title-wrap {
    padding: 25px 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__about .brand-title-wrap {
    border: none;
  }
}
.portfolio__about .brand-logo img {
  opacity: 0;
}
.portfolio__about .brand-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__about .brand-list {
    padding-left: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__about .brand-list {
    padding-left: 0px;
    gap: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__about .brand-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-left: 0;
    gap: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__about .brand-logo img {
    max-width: 80px;
  }
}
.portfolio__project {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  background-color: var(--white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__project {
    padding-top: 120px;
  }
}
.portfolio__project::after {
  position: absolute;
  content: "work";
  width: 200px;
  height: 100%;
  right: 0px;
  top: -100px;
  font-weight: 700;
  font-size: 250px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.03);
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__project::after {
    top: -60px;
    font-size: 230px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__project::after {
    font-size: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__project::after {
    font-size: 180px;
    top: -50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__project::after {
    font-size: 180px;
  }
}
.portfolio__project .pp-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0;
}
.portfolio__project .pp-slider-wrapper {
  padding-left: 200px;
  padding-right: 100px;
  position: relative;
  opacity: 0;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__project .pp-slider-wrapper {
    padding-left: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__project .pp-slider-wrapper {
    padding-left: 160px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__project .pp-slider-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__project .pp-slider-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
.portfolio__project .pp-slide {
  overflow: hidden;
  padding: 80px 0 80px 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__project .pp-slide {
    padding: 80px 0 80px 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__project .pp-slide {
    padding: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__project .pp-slide {
    padding: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__project .pp-slide {
    padding: 60px;
  }
}
.portfolio__project .pp-slide-img {
  background-color: var(--green);
  max-width: 470px;
  max-height: 650px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__project .pp-slide-img {
    max-width: 430px;
    max-height: 600px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__project .pp-slide-img {
    max-width: 330px;
    max-height: 450px;
  }
}
.portfolio__project .pp-slide-img img {
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  max-width: 100%;
}
.portfolio__project .swipper-btn {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-2);
  position: relative;
}
.portfolio__project .pp-prev {
  position: absolute;
  top: calc(50% - 12px);
  right: 0;
  z-index: 9;
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  .portfolio__project .pp-prev {
    top: 95%;
  }
}
.portfolio__project .pp-prev::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  top: 13px;
  left: -55px;
  background-color: var(--black-2);
}
.portfolio__project .pp-next {
  position: absolute;
  top: calc(50% - 12px);
  left: 60px;
  z-index: 9;
  opacity: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__project .pp-next {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__project .pp-next {
    top: 95%;
    left: 0;
  }
}
.portfolio__project .pp-next::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  top: 13px;
  left: 45px;
  background-color: var(--black-2);
}
.portfolio__project .pp-slide-title {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  text-align: right;
  text-transform: uppercase;
  color: var(--black-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__project .pp-slide-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__project .pp-slide-title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__project .pp-slide-title {
    font-size: 24px;
  }
}
.portfolio__project .pp-slide-thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 300px;
  margin-left: auto;
  opacity: 0;
}
.portfolio__project .pp-slide-thumb p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  text-transform: uppercase;
  color: var(--black-3);
  padding-top: 15px;
}
.portfolio__project-thumbs {
  height: 100%;
  margin-right: -150px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__project-thumbs {
    margin-right: -50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__project-thumbs {
    margin-right: -50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__project-thumbs {
    margin-right: -20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__project-thumbs {
    margin-right: -10px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__project-thumbs {
    margin-right: 0;
    margin-top: 30px;
  }
}
.portfolio__service {
  background-color: var(--green-2);
  background-image: url(../imgs/shape/17.png);
  background-repeat: no-repeat;
  background-position: bottom right;
}
.portfolio__service .sec-title {
  max-width: 350px;
  text-indent: 80px;
  text-transform: uppercase;
  opacity: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__service .sec-title {
    text-indent: 40px;
    max-width: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__service .sec-title {
    text-indent: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__service .sec-title {
    text-indent: 20px;
  }
}
.portfolio__service .sec-text {
  background-image: url(../imgs/shape/14.png);
  background-repeat: no-repeat;
  background-position: 0 80px;
  opacity: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__service .sec-text {
    background-position: 0 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__service .sec-text {
    background-size: 100%;
    background-position: 0 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__service .sec-text {
    background-position: 0 30px;
    background-size: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__service .sec-text {
    background-position: 0 30px;
    background-size: 100%;
  }
}
.portfolio__service .sec-text p {
  max-width: 320px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-13);
  padding-top: 150px;
  opacity: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__service .sec-text p {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__service .sec-text p {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__service .sec-text p {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__service .sec-text p {
    padding-top: 70px;
  }
}
.portfolio__service-list {
  padding-top: 62px;
}
.portfolio__service-item {
  padding: 40px;
  border: 1.3px solid var(--black-2);
  border-radius: 21px;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__service-item {
    padding: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__service-item {
    margin-bottom: 20px;
  }
}
.portfolio__service-item::after {
  position: absolute;
  content: "";
  width: 23px;
  height: 76px;
  right: -2px;
  top: calc(50% - 38px);
  background: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 15px 0px 0px 15px;
}
.portfolio__service-item:hover .ps-title,
.portfolio__service-item:hover ul li {
  color: var(--white);
}
.portfolio__service-item:hover::after {
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  right: -1px;
  top: 0;
  border-radius: 15px;
}
.portfolio__service-item .ps-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__service-item .ps-title {
    font-size: 20px;
    line-height: 1.3;
  }
}
.portfolio__service-item ul {
  padding-left: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__service-item ul {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__service-item ul {
    padding-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__service-item ul {
    padding-left: 20px;
  }
}
.portfolio__service-item ul li {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.portfolio__service .ps-btn {
  text-align: center;
}
.portfolio__service .ps-btn a {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  border: 1.3px solid var(--black-2);
  border-radius: 35px;
  display: inline-block;
  padding: 10px 40px;
  margin-top: 70px;
  opacity: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__service .ps-btn a {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__service .ps-btn a {
    margin-top: 30px;
  }
}
.portfolio__service .ps-btn a strong {
  font-weight: 400;
  text-transform: capitalize;
}
.portfolio__footer {
  margin-top: 150px;
  border-top: 1px solid #E2E2E2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__footer {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__footer {
    margin-top: 60px;
  }
}
.portfolio__footer-area {
  background-color: #F7F7F7;
  background-image: url(../imgs/shape/18.png);
  background-repeat: no-repeat;
  background-position: top right;
  position: relative;
}
.portfolio__footer-area::after {
  position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  left: 50px;
  bottom: 20px;
  background-image: url(../imgs/shape/15.png);
  background-repeat: no-repeat;
  -webkit-animation: wcZoom 3s infinite linear;
          animation: wcZoom 3s infinite linear;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__footer-area::after {
    bottom: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__footer-area::after {
    bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__footer-area::after {
    left: 10px;
    bottom: 100px;
  }
}
.portfolio__footer-area::before {
  position: absolute;
  content: "";
  width: 156px;
  height: 156px;
  left: calc(50% - 78px);
  bottom: 2px;
  background-image: url(../imgs/shape/19.png);
  background-repeat: no-repeat;
  background-position: right;
  -webkit-animation: wcSpinner 3s infinite linear;
          animation: wcSpinner 3s infinite linear;
}
@media only screen and (max-width: 767px) {
  .portfolio__footer-area::before {
    bottom: 50px;
  }
}
.portfolio__footer-area .pf-btm {
  padding: 20px 0;
}
.portfolio__footer-area .pf-title {
  font-weight: 500;
  font-size: 100px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 70px;
  opacity: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__footer-area .pf-title {
    font-size: 72px;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__footer-area .pf-title {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__footer-area .pf-title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__footer-area .pf-title {
    font-size: 60px;
    padding-bottom: 0;
  }
}
.portfolio__footer-area .pf-contact {
  padding-bottom: 35px;
}
@media only screen and (max-width: 767px) {
  .portfolio__footer-area .pf-contact {
    padding-top: 30px;
  }
}
.portfolio__footer-area .pf-contact h3 {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 25px;
  opacity: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__footer-area .pf-contact h3 {
    font-size: 22px;
  }
}
.portfolio__footer-area .pf-contact ul li {
  padding-bottom: 8px;
  opacity: 0;
}
.portfolio__footer-area .pf-contact ul li a {
  font-size: 18px;
  line-height: 26px;
  text-decoration-line: underline;
  color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .portfolio__footer-area .pf-social {
    margin-bottom: 40px;
  }
}
.portfolio__footer-area .pf-social h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-2);
  position: relative;
  display: inline-block;
  padding-bottom: 30px;
  opacity: 0;
}
.portfolio__footer-area .pf-social h3::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  top: 15px;
  right: -60px;
  background-color: var(--black-2);
}
.portfolio__footer-area .pf-social ul li {
  display: inline-block;
  opacity: 0;
}
.portfolio__footer-area .pf-social ul li a {
  display: block;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-2);
  border: 1px solid var(--gray);
  padding: 8px 21px;
  border-radius: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__footer-area .pf-social ul li a {
    padding: 7px 18px;
    margin-bottom: 7px;
  }
}
.portfolio__footer-area .pf-social ul li a:hover {
  color: var(--white);
  background-color: var(--black-2);
}
.portfolio__footer-area .pc-btn {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .portfolio__footer .pf-btm .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__main-wrapper .pp-title-wrap {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
}
@media (max-width: 1300px) {
  .portfolio__main-wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.portfolio-section {
  height: 100vh;
}
@media (max-width: 1300px) {
  .portfolio-section {
    height: auto;
  }
}
.portfolio__page .wc-btn-dark,
.portfolio__page .contact__text,
.portfolio__page .contact__form,
.portfolio__page .footer-menu,
.portfolio__page .footer-menu-2,
.portfolio__page .footer__copyright-2 p {
  opacity: 0;
}
.portfolio__page .swiper-slide-active .wc-btn-dark {
  -webkit-animation: wcfadeUp 1s 0.7s forwards;
          animation: wcfadeUp 1s 0.7s forwards;
}
.portfolio__page .swiper-slide-active .title {
  -webkit-animation: wcfadeUp 1s 0.6s forwards;
          animation: wcfadeUp 1s 0.6s forwards;
}
.portfolio__page .swiper-slide-active .shape-circle {
  -webkit-animation: wcfadeUp 1s 0.2s forwards;
          animation: wcfadeUp 1s 0.2s forwards;
}
.portfolio__page .swiper-slide-active .text-stroke {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .sec-title {
  -webkit-animation: wcfadeUp 1s 0.2s forwards;
          animation: wcfadeUp 1s 0.2s forwards;
}
.portfolio__page .swiper-slide-active .sec-text p {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .portfolio__service .sec-text {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .brand-title {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .brand-logo img {
  -webkit-animation: wcfadeUp 1s 0.6s forwards;
          animation: wcfadeUp 1s 0.6s forwards;
}
.portfolio__page .swiper-slide-active .pp-title {
  -webkit-animation: wcfadeUp 1s 0.2s forwards;
          animation: wcfadeUp 1s 0.2s forwards;
}
.portfolio__page .swiper-slide-active .pp-next {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .pp-prev {
  -webkit-animation: wcfadeUp 1s 0.6s forwards;
          animation: wcfadeUp 1s 0.6s forwards;
}
.portfolio__page .swiper-slide-active .portfolio__service-item {
  -webkit-animation: wcfadeUp 1s 0.6s forwards;
          animation: wcfadeUp 1s 0.6s forwards;
}
.portfolio__page .swiper-slide-active .ps-btn a {
  -webkit-animation: wcfadeUp 1s 0.8s forwards;
          animation: wcfadeUp 1s 0.8s forwards;
}
.portfolio__page .swiper-slide-active .pf-title {
  -webkit-animation: wcfadeUp 1s 0.2s forwards;
          animation: wcfadeUp 1s 0.2s forwards;
}
.portfolio__page .swiper-slide-active .contact__text {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .pf-contact h3 {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .pf-contact ul li {
  -webkit-animation: wcfadeUp 1s 0.6s forwards;
          animation: wcfadeUp 1s 0.6s forwards;
}
.portfolio__page .swiper-slide-active .pf-social h3 {
  -webkit-animation: wcfadeUp 1s 0.8s forwards;
          animation: wcfadeUp 1s 0.8s forwards;
}
.portfolio__page .swiper-slide-active .pf-social ul li {
  -webkit-animation: wcfadeUp 1s 1s forwards;
          animation: wcfadeUp 1s 1s forwards;
}
.portfolio__page .swiper-slide-active .contact__form {
  -webkit-animation: wcfadeUp 1s 0.6s forwards;
          animation: wcfadeUp 1s 0.6s forwards;
}
.portfolio__page .swiper-slide-active .portfolio__about-left img {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .portfolio__project .pp-slider-wrapper {
  -webkit-animation: wcfadeUp 1s 0.4s forwards;
          animation: wcfadeUp 1s 0.4s forwards;
}
.portfolio__page .swiper-slide-active .portfolio__project .pp-slide-thumb {
  -webkit-animation: wcfadeUp 1s 0.6s forwards;
          animation: wcfadeUp 1s 0.6s forwards;
}
.portfolio__page .swiper-slide-active .footer__copyright-2 p {
  -webkit-animation: wcfadeUp 1s 1.2s forwards;
          animation: wcfadeUp 1s 1.2s forwards;
}
.portfolio__page .swiper-slide-active .footer-menu, .portfolio__page .swiper-slide-active .footer-menu-2 {
  -webkit-animation: wcfadeUp 1s 1.3s forwards;
          animation: wcfadeUp 1s 1.3s forwards;
}
.portfolio__page .wc-btn-dark:hover {
  color: var(--white);
  background-color: var(--black-2);
  border-color: var(--black-2);
}

@media (max-width: 1300px) {
  .swiper-slide .wc-btn-dark {
    -webkit-animation: wcfadeUp 1s 0.7s forwards;
            animation: wcfadeUp 1s 0.7s forwards;
  }
  .swiper-slide .title {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .shape-circle {
    -webkit-animation: wcfadeUp 1s 0.2s forwards;
            animation: wcfadeUp 1s 0.2s forwards;
  }
  .swiper-slide .text-stroke {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .sec-title {
    -webkit-animation: wcfadeUp 1s 0.2s forwards;
            animation: wcfadeUp 1s 0.2s forwards;
  }
  .swiper-slide .sec-text p {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .portfolio__service .sec-text {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .brand-title {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .brand-logo img {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .pp-title {
    -webkit-animation: wcfadeUp 1s 0.2s forwards;
            animation: wcfadeUp 1s 0.2s forwards;
  }
  .swiper-slide .pp-next {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .pp-prev {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .portfolio__service-item {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .ps-btn a {
    -webkit-animation: wcfadeUp 1s 0.8s forwards;
            animation: wcfadeUp 1s 0.8s forwards;
  }
  .swiper-slide .pf-title {
    -webkit-animation: wcfadeUp 1s 0.2s forwards;
            animation: wcfadeUp 1s 0.2s forwards;
  }
  .swiper-slide .contact__text {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .pf-contact h3 {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .pf-contact ul li {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .pf-social h3 {
    -webkit-animation: wcfadeUp 1s 0.8s forwards;
            animation: wcfadeUp 1s 0.8s forwards;
  }
  .swiper-slide .pf-social ul li {
    -webkit-animation: wcfadeUp 1s 1s forwards;
            animation: wcfadeUp 1s 1s forwards;
  }
  .swiper-slide .contact__form {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .portfolio__about-left img {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .portfolio__project .pp-slider-wrapper {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .portfolio__project .pp-slide-thumb {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .footer__copyright-2 p {
    -webkit-animation: wcfadeUp 1s 1.2s forwards;
            animation: wcfadeUp 1s 1.2s forwards;
  }
  .swiper-slide .footer-menu, .swiper-slide .footer-menu-2 {
    -webkit-animation: wcfadeUp 1s 1.3s forwards;
            animation: wcfadeUp 1s 1.3s forwards;
  }
}
.menu-text-pp {
  color: var(--black-2);
}

.circle-pagination {
  width: 90px !important;
  bottom: unset !important;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (max-width: 767px) {
  .circle-pagination {
    display: none;
  }
}
.circle-pagination.left {
  left: 50px !important;
}
.circle-pagination.right {
  left: calc(100% - 135px) !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .circle-pagination.right {
    left: calc(100% - 90px) !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .circle-pagination.right {
    left: calc(100% - 80px) !important;
  }
}
.circle-pagination button.swiper-pagination-bullet {
  position: relative;
  width: auto;
  height: auto;
  margin: 10px 0 !important;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .circle-pagination button.swiper-pagination-bullet {
    margin: 5px 0 !important;
  }
}
.circle-pagination .swiper-pagination-bullet span {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: var(--black-2);
  border-radius: 100%;
}
.circle-pagination .circle-progress {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  width: 50px;
  height: 50px;
}
.circle-pagination .circle-origin {
  fill: transparent;
  stroke: var(--black-2);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 156px;
  stroke-dashoffset: 156px;
}
.circle-pagination .swiper-pagination-bullet-active .circle-origin {
  -webkit-animation: progress 5s backwards;
          animation: progress 5s backwards;
}
@-webkit-keyframes progress {
  0% {
    stroke-dashoffset: 156px;
  }
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -156px;
  }
}
@keyframes progress {
  0% {
    stroke-dashoffset: 156px;
  }
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -156px;
  }
}
.circle-pagination-2 {
  width: 90px !important;
  top: 50%;
  bottom: unset !important;
  left: 30px !important;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .circle-pagination-2 {
    left: 0 !important;
    width: 63px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .circle-pagination-2 {
    left: 0 !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .circle-pagination-2 {
    left: 0 !important;
  }
}
.circle-pagination-2 .swiper-pagination-bullet {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 1px solid var(--black-2);
  position: relative;
  margin: 10px 0 !important;
}
.circle-pagination-2 .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--black-2);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 100%;
}

/*----------------------------------------*/
/*  24. BLOG CSS START
/*----------------------------------------*/
.blog__area {
  overflow: hidden;
}
.blog__area .row {
  --bs-gutter-x: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__area .row {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__area .row {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area .row {
    --bs-gutter-x: 20px;
  }
}
.blog__area .sec-title-wrapper {
  text-align: center;
  padding-bottom: 60px;
}
.blog__area-2 {
  overflow: hidden;
  background-color: var(--black-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__area-2 .pt-150 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__area-2 .pb-110 {
    padding-bottom: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-2 .pb-110 {
    padding-bottom: 55px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-2 .pb-110 {
    padding-bottom: 0;
  }
}
.blog__area-2 .row {
  --bs-gutter-x: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__area-2 .row {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__area-2 .row {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-2 .row {
    --bs-gutter-x: 20px;
  }
}
.blog__area-2 #btn_wrapper,
.blog__area-2 .btn_wrapper {
  margin-left: auto;
  margin-right: -40px;
  margin-top: -60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__area-2 #btn_wrapper,
.blog__area-2 .btn_wrapper {
    margin-right: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-2 #btn_wrapper,
.blog__area-2 .btn_wrapper {
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-2 #btn_wrapper,
.blog__area-2 .btn_wrapper {
    margin: 0;
    margin-top: 30px;
    margin-bottom: 50px;
  }
}
.blog__area-2 .sec-title {
  color: var(--white);
  padding-top: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-2 .sec-title {
    padding-top: 45px;
  }
}
.blog__area-2 .sec-text {
  padding-top: 30px;
}
.blog__area-2 .sec-text p {
  max-width: 340px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-2);
}
.blog__area-2 .sec-btn {
  margin-bottom: 30px;
}
.blog__area-2 .sec-btn a {
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .blog__area-2 .sec-btn a {
    margin-left: 0;
  }
}
.blog__area-3 {
  overflow: hidden;
  background-color: var(--pink-3);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-3.pb-140 {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-3.pb-140 {
    padding-bottom: 20px;
  }
}
.blog__area-3 .sec-title {
  padding-bottom: 40px;
  text-transform: uppercase;
  background-color: var(--pink-3);
}
.blog__area-3 .sec-title-wrapper {
  position: relative;
  padding-left: 330px;
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-3 .sec-title-wrapper {
    padding-left: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-3 .sec-title-wrapper {
    padding-left: 0;
  }
}
.blog__area-3 .sec-title-wrapper::after {
  position: absolute;
  content: "";
  left: 39%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--gray);
}
.blog__area-3 .sec-title-wrapper p {
  padding-top: 70px;
  padding-bottom: 60px;
  max-width: 330px;
  font-size: 18px;
  line-height: 1.4;
  margin-left: 220px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__area-3 .sec-title-wrapper p {
    margin-left: 100px;
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-3 .sec-title-wrapper p {
    margin-left: 100px;
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-3 .sec-title-wrapper p {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.blog__area-3 .sec-sub-title {
  padding-top: 50px;
  text-transform: uppercase;
  background-color: var(--pink-3);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-3 .sec-sub-title {
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-3 .sec-sub-title {
    padding-top: 0;
  }
}
.blog__area-6 {
  overflow: hidden;
}
.blog__area-6 .pb-110 {
  padding-bottom: 90px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-6 .pb-110 {
    padding-bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-6 .pb-110 {
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-6 .sec-title-wrapper {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-6 .sec-title-wrapper {
    padding-top: 60px;
  }
}
.blog__area-6 .blog__item, .blog__area-6 .blog__item-2 {
  padding-bottom: 55px;
  position: relative;
  z-index: 1;
}
.blog__item, .blog__item-2 {
  position: relative;
  z-index: 5;
}
@media only screen and (max-width: 767px) {
  .blog__item, .blog__item-2 {
    padding-bottom: 50px;
  }
}
.blog__item:hover .blog__img, .blog__item-2:hover .blog__img {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}
.blog__item-2 {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .blog__item-2 {
    padding-bottom: 30px;
  }
}
.blog__item-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__item-3 {
    -ms-grid-columns: 2.5fr 1fr;
    grid-template-columns: 2.5fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__item-3 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__item-3 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 50px;
  }
}
.blog__info-3 {
  position: absolute;
  width: 63%;
  bottom: -1px;
  right: 0;
  margin-left: -50px;
  background: var(--white);
  z-index: 1;
  padding: 40px;
}
.blog__area-3 .blog__info-3 {
  background: var(--pink-3);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__info-3 {
    width: 70%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__info-3 {
    width: 80%;
  }
}
@media only screen and (max-width: 767px) {
  .blog__info-3 {
    width: 90%;
    margin-left: 0;
    padding: 30px 20px;
    border-top-left-radius: 5px;
  }
}
.blog__img {
  width: 100%;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.blog__img-3 {
  width: 100%;
}
.blog__img-wrapper {
  overflow: hidden;
  margin-bottom: 25px;
  position: relative;
  z-index: 9;
}
.blog__meta, .blog__meta-2 {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  color: var(--black-3);
  margin-bottom: 10px;
}
.blog__meta a, .blog__meta-2 a {
  color: var(--black-3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.blog__meta a:hover, .blog__meta-2 a:hover {
  color: var(--secondary);
}
.blog__meta-2 {
  color: var(--gray-2);
}
.blog__meta-2 a {
  color: var(--gray-2);
}
.blog__meta-2 a:hover {
  color: var(--white);
}
.blog__title, .blog__title-3, .blog__title-2 {
  display: block;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--black-2);
  border-bottom: 1px solid var(--gray-5);
  margin-bottom: 10px;
  padding-bottom: 20px;
}
.blog__title:hover, .blog__title-3:hover, .blog__title-2:hover {
  color: var(--black-3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__title, .blog__title-3, .blog__title-2 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__title, .blog__title-3, .blog__title-2 {
    font-size: 20px;
  }
}
.blog__title-2 {
  color: var(--white);
  border-bottom: 0;
}
.blog__title-2:hover {
  color: var(--gray-2);
}
.blog__title-3 {
  padding-bottom: 50px;
}
.blog__btn {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--black-3);
  text-transform: capitalize;
}
.blog__btn span {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: -28px;
}
.blog__btn span i {
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.blog__btn span::after {
  position: absolute;
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: -20px;
  bottom: -20px;
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.blog__btn:hover {
  color: var(--secondary);
}
.blog__btn:hover i {
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.blog__btn:hover span::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.blog__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.blog__text p {
  font-size: 18px;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .blog__text p {
    padding-top: 30px;
  }
}
.blog__detail {
  overflow: hidden;
}
.blog__detail-top {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__detail-top {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__detail-top {
    padding-top: 60px;
  }
}
.blog__detail-date {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
  padding-bottom: 15px;
}
.blog__detail-date span {
  color: var(--black-3);
  position: relative;
  padding-left: 25px;
}
.blog__detail-date span::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  top: 11px;
  left: 8px;
  background-color: var(--gray-5);
  border-radius: 50px;
}
.blog__detail-title {
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 35px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .blog__detail-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__detail-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__detail-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__detail-title {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__detail-title {
    font-size: 36px;
  }
}
.blog__detail-title-sm {
  font-size: 56px;
}
@media only screen and (min-width: 992px) and (max-width: 1919px) {
  .blog__detail-title-sm {
    font-size: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__detail-title-sm {
    font-size: 34px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__detail-title-sm {
    font-size: 26px;
  }
}
.blog__detail-metalist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 50px;
  padding-bottom: 50px;
}
.blog__detail-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.blog__detail-meta p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-8);
}
.blog__detail-meta p span {
  display: block;
  color: var(--black-3);
  font-size: 16px;
  font-weight: 500;
}
.blog__detail-thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 70vh;
}
.blog__detail-thumb img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 120%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 767px) {
  .blog__detail-thumb {
    padding-bottom: 40px;
  }
}
.blog__detail-thumb img {
  width: 100%;
}
.blog__detail-content {
  padding-top: 55px;
  padding-bottom: 30px;
}
.blog__detail-content p {
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 25px;
}
.blog__detail-content img {
  margin-bottom: 30px;
  max-width: 100%;
}
.blog__detail-content h1,
.blog__detail-content h2 {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.2;
  color: var(--black);
  padding-bottom: 15px;
  padding-top: 10px;
}
.blog__detail-content h3 {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  color: var(--black);
  padding-bottom: 15px;
  padding-top: 10px;
}
.blog__detail-content h4 {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--black);
  padding-bottom: 15px;
  padding-top: 10px;
}
.blog__detail-content h5 {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--black);
  padding-bottom: 10px;
  padding-top: 10px;
}
.blog__detail-content h6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--black);
  padding-bottom: 10px;
  padding-top: 10px;
}
.blog__detail-content ul,
.blog__detail-content ol {
  padding-bottom: 25px;
}
.blog__detail-content ul li,
.blog__detail-content ol li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  padding-bottom: 5px;
  padding-left: 25px;
  position: relative;
}
.blog__detail-content ul li::before,
.blog__detail-content ol li::before {
  position: absolute;
  content: "+";
  left: 0;
  font-size: 20px;
}
.blog__detail-tags p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  text-transform: capitalize;
}
.blog__detail-tags p a {
  color: var(--black-3);
  text-transform: lowercase;
  text-decoration-line: underline;
}

/* Long-form article extras (used on the-future-of-ai-in-business.html) */
.blog__intro-lead p {
  font-size: 22px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--black-2);
  padding-bottom: 30px;
}
.blog__toc-box {
  background-color: #F5F8FC;
  border-radius: 14px;
  padding: 40px 45px;
  margin: 10px 0 40px;
}
.blog__toc-box .blog__toc-title {
  font-size: 26px;
  font-weight: 600;
  padding-top: 0;
  padding-bottom: 10px;
}
.blog__toc-box p {
  padding-bottom: 15px;
}
.blog__checklist {
  list-style: none;
  margin: 0;
  padding: 0 !important;
}
.blog__checklist li {
  position: relative;
  padding: 0 0 12px 32px !important;
  font-size: 17px;
  font-weight: 500;
  color: var(--black-2);
}
.blog__checklist li::before {
  content: "\2713" !important;
  position: absolute;
  left: 0 !important;
  top: 0;
  width: 20px;
  height: 20px;
  color: #005fcc;
  font-weight: 700;
  font-size: 15px !important;
}
.blog__step {
  padding-top: 45px;
  margin-top: 45px;
}
.blog__step:first-of-type {
  padding-top: 0;
  margin-top: 30px;
}
.blog__step-title {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 28px;
  padding-top: 0;
}
.blog__step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #005fcc;
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}
.blog__benefits {
  background-color: #F5F8FC;
  border-radius: 10px;
  padding: 22px 28px 8px;
  margin-top: 18px;
}
.blog__benefits h5 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #005fcc;
  padding: 0 0 12px;
}
.blog__benefits ul li {
  font-size: 15px;
  color: var(--gray-2);
}
.blog__takeaways-box {
  background-color: var(--black-2);
  border-radius: 14px;
  padding: 45px 45px 35px;
  margin: 20px 0 40px;
}
.blog__takeaways-box h2 {
  color: var(--white);
  padding-top: 0;
}
.blog__takeaways-box .blog__checklist li {
  color: var(--white);
}
.blog__faq-accordion {
  margin-top: 10px;
}

/* Comparison-guide extras (used on custom-software-vs-saas-business-guide.html) */
.blog__jumplist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
}
.blog__taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 5px 0 10px;
  padding: 0 !important;
}
.blog__taglist li {
  padding: 9px 20px !important;
  border-radius: 999px;
  background-color: #F5F8FC;
  border: 1px solid #E1E9F3;
  font-size: 15px;
  font-weight: 500;
  color: var(--black-2);
}
.blog__taglist li::before {
  content: none !important;
}
.blog__compare {
  margin: 25px 0 40px;
  border: 1px solid #E1E9F3;
  border-radius: 14px;
  overflow-x: auto;
}
.blog__compare table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.blog__compare th,
.blog__compare td {
  padding: 16px 26px;
  text-align: left;
  font-size: 16px;
  border-bottom: 1px solid #E1E9F3;
}
.blog__compare thead th {
  background-color: var(--black-2);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 0;
}
.blog__compare tbody th {
  width: 34%;
  font-weight: 600;
  color: var(--black-2);
  background-color: #F8FAFD;
}
.blog__compare tbody td {
  color: var(--gray-2);
}
.blog__compare tbody tr:last-child th,
.blog__compare tbody tr:last-child td {
  border-bottom: 0;
}
.blog__scenarios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0 40px;
}
.blog__scenario {
  background-color: #F5F8FC;
  border-radius: 12px;
  padding: 26px 30px;
}
.blog__scenario h4 {
  font-size: 19px;
  font-weight: 600;
  color: var(--black-2);
  padding: 0 0 8px;
}
.blog__scenario p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-2);
  padding: 0;
}
.blog__decision {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 25px 0 40px;
}
.blog__decision-col {
  border: 1px solid #E1E9F3;
  border-radius: 14px;
  padding: 34px 34px 26px;
}
.blog__decision-col h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--black-2);
  padding: 0 0 20px;
}
.blog__decision-col .blog__checklist li:last-child {
  padding-bottom: 0 !important;
}
.blog__warnlist {
  list-style: none;
  margin: 0;
  padding: 0 !important;
}
.blog__warnlist li {
  position: relative;
  padding: 0 0 12px 32px !important;
  font-size: 17px;
  font-weight: 500;
  color: var(--black-2);
}
.blog__warnlist li::before {
  content: "\00D7" !important;
  position: absolute;
  left: 2px !important;
  top: -4px;
  color: #D64545;
  font-weight: 700;
  font-size: 22px !important;
}
.blog__takeaways-box p {
  color: var(--gray-2);
}
.blog__takeaways-box p:last-child {
  padding-bottom: 0;
}
.cta__text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray-2);
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 0 35px;
}
.cta__btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
@media only screen and (max-width: 767px) {
  .blog__toc-box {
    padding: 30px 25px;
  }
  .blog__takeaways-box {
    padding: 30px 25px 20px;
  }
  .blog__step-title {
    font-size: 22px;
    gap: 12px;
  }
  .blog__step-num {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .blog__jumplist,
  .blog__scenarios,
  .blog__decision {
    grid-template-columns: 1fr;
  }
  .blog__scenario {
    padding: 22px 24px;
  }
  .blog__decision-col {
    padding: 28px 26px 22px;
  }
  .blog__compare th,
  .blog__compare td {
    padding: 14px 20px;
  }
}
.blog__related {
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .blog__related .pb-140 {
    padding-bottom: 0;
  }
}
.blog__related .sec-title-wrapper {
  padding-bottom: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__related .pb-130 {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__related .pb-130 {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__related .pb-130 {
    padding-bottom: 0;
  }
}
.blog-v2 {
  padding-bottom: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-v2 {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-v2 {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-v2 .pt-150 {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-v2 .pt-150 {
    padding-top: 130px;
  }
}
.blog-v2 .sec-text p {
  padding-bottom: 70px;
  margin-left: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-v2 .sec-text p {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-v2 .sec-text p {
    padding-bottom: 40px;
  }
}
.blog-v2 .blog__item-2 {
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-v2 .blog__item-2 {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-v2 .blog__item-2 {
    margin-bottom: 0;
  }
}
.blog-v3.blog__area-3 .sec-title-wrapper::after {
  position: unset;
}
.blog-v3 .line {
  padding-bottom: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-v3 .line {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-v3 .line {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-v3 .line {
    padding-top: 50px;
    padding-bottom: 30px;
  }
}
.blog-v3 .blog__item-3 {
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-v3 .blog__item-3 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-v3 .blog__item-3 {
    margin-bottom: 50px;
  }
}

.img-box {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .img-box {
    height: 425px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .img-box {
    height: 340px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .img-box {
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .img-box {
    height: auto;
  }
}
.img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background-size: cover;
}
@media (max-width: 1023px) {
  .img-box img {
    position: unset;
    width: 100%;
    height: auto;
  }
}
.img-box img:nth-child(1) {
  -webkit-transform: translatex(50%) scalex(2);
          transform: translatex(50%) scalex(2);
  opacity: 0;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
@media (max-width: 1023px) {
  .img-box img:nth-child(1) {
    display: none;
  }
}
.img-box:hover img:nth-child(2) {
  -webkit-transform: translatex(-50%) scalex(2);
          transform: translatex(-50%) scalex(2);
  opacity: 0;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
@media (max-width: 1023px) {
  .img-box:hover img:nth-child(2) {
    opacity: 1;
  }
}
.img-box:hover img:nth-child(1) {
  -webkit-transform: translatex(0) scalex(1);
          transform: translatex(0) scalex(1);
  opacity: 1;
  -webkit-filter: blur(0);
          filter: blur(0);
}

.row.reset-grid {
  --bs-gutter-x: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .row.reset-grid {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .row.reset-grid {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .row.reset-grid {
    --bs-gutter-x: 20px;
  }
}

/*----------------------------------------*/
/*  25. CTA CSS START
/*----------------------------------------*/
.cta__area {
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__area-2 .pb-120 {
    padding-bottom: 126px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__area-2 .pb-120 {
    padding-bottom: 115px;
  }
}
@media only screen and (max-width: 767px) {
  .cta__area-2 .pb-120 {
    padding-bottom: 70px;
  }
}
.cta__area-2 .wc-btn-pink {
  color: var(--black-3);
}
.cta__area-2 .wc-btn-pink:hover {
  color: var(--black-2);
}
.cta__area-3 {
  background-color: var(--pink-5);
}
@media only screen and (min-width: 1920px) {
  .cta__area-3 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .cta__area-3 {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta__area-3 .pt-150 {
    padding-top: 125px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__area-3 {
    background-color: var(--white);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__area-3 {
    background-color: var(--white);
    padding-bottom: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .cta__area-3 {
    background-color: var(--white);
    padding-bottom: 10px;
  }
}
.cta__content {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__content {
    width: 80%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__content {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .cta__content {
    width: 100%;
  }
}
.cta__content #btn_wrapper,
.cta__content .btn_wrapper {
  margin: 0 auto;
}
.cta__content-2, .cta__content-3 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__content-2, .cta__content-3 {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .cta__content-2, .cta__content-3 {
    width: 100%;
  }
}
.cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper,
.cta__content-2 .btn_wrapper,
.cta__content-3 .btn_wrapper {
  position: relative;
  z-index: 1;
  width: 350px;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper,
.cta__content-2 .btn_wrapper,
.cta__content-3 .btn_wrapper {
    width: 260px;
    height: 260px;
  }
}
@media (max-width: 1200px) {
  .cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper,
.cta__content-2 .btn_wrapper,
.cta__content-3 .btn_wrapper {
    width: 200px;
    height: 200px;
  }
}
.cta__content-2 #btn_wrapper .btn-item, .cta__content-3 #btn_wrapper .btn-item,
.cta__content-2 .btn_wrapper .btn-item,
.cta__content-3 .btn_wrapper .btn-item {
  top: 25px;
}
@media only screen and (max-width: 767px) {
  .cta__content-2 #btn_wrapper .btn-item, .cta__content-3 #btn_wrapper .btn-item,
.cta__content-2 .btn_wrapper .btn-item,
.cta__content-3 .btn_wrapper .btn-item {
    top: 0;
  }
}
.cta__content-2 a, .cta__content-3 a {
  width: 300px;
  height: 300px;
  font-size: 24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta__content-2 a, .cta__content-3 a {
    width: 220px;
    height: 220px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__content-2 a, .cta__content-3 a {
    width: 200px;
    height: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__content-2 a, .cta__content-3 a {
    width: 200px;
    height: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .cta__content-2 a, .cta__content-3 a {
    width: 200px;
    height: 200px;
    font-size: 20px;
  }
}
.cta__content-2 a:hover span, .cta__content-3 a:hover span {
  width: 800px;
  height: 800px;
}
.cta__content-2 a i, .cta__content-3 a i {
  font-size: 30px;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  padding-left: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .cta__content-3 a {
    width: 220px;
    height: 220px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__content-3 #btn_wrapper .btn-item,
.cta__content-3 .btn_wrapper .btn-item {
    top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__content-3 #btn_wrapper .btn-item,
.cta__content-3 .btn_wrapper .btn-item {
    top: 0;
  }
}
.cta__content-3 a {
  border-color: var(--black-2);
}
.cta__sub-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--black-3);
  border: 1px solid var(--gray);
  display: inline-block;
  padding: 5px 17px;
  border-radius: 30px;
  margin-bottom: 10px;
}
.cta__sub-title-2 {
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: var(--black-2);
  padding-bottom: 25px;
}
.cta__title {
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta__title {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__title {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__title {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .cta__title {
    font-size: 36px;
    padding-bottom: 40px;
  }
}
.cta__title-2 {
  font-weight: 300;
  font-size: 100px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta__title-2 {
    font-size: 75px;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__title-2 {
    font-size: 70px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__title-2 {
    font-size: 60px;
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .cta__title-2 {
    font-size: 48px;
  }
}

/*----------------------------------------*/
/*  26. STORY CSS START
/*----------------------------------------*/
.story__area {
  overflow: hidden;
}
.story__area .sec-title-wrapper {
  padding-bottom: 40px;
}
.story__area .from-text {
  position: absolute;
  top: -140px;
  right: -220px;
  width: 160px;
  height: 90px;
  background-color: var(--primary);
  padding: 20px 30px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  color: var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story__area .from-text {
    right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story__area .from-text {
    right: 0;
    top: -89px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .story__area .from-text {
    right: -20px;
    top: -80px;
  }
}
@media only screen and (max-width: 767px) {
  .story__area .from-text {
    width: 120px;
    right: 0;
    top: -60px;
  }
}
.story__area .from-text span {
  display: block;
  font-size: 36px;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .story__area .from-text span {
    font-size: 30px;
  }
}
.story__text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
  padding-bottom: 20px;
}
@media (max-height: 1365px) {
  .story__text p {
    padding-top: 30px;
    padding-bottom: 0;
  }
}
.story__img-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 700px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .story__img-wrapper {
    height: 650px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story__img-wrapper {
    height: 580px;
  }
}
@media (max-width: 1200px) {
  .story__img-wrapper {
    height: 100%;
  }
}
.story__img-wrapper img {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 30px;
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .story__img-wrapper img {
    margin-bottom: 20px;
  }
}

/*----------------------------------------*/
/*  27. TEAM CSS START
/*----------------------------------------*/
.team__area {
  background-color: var(--black-2);
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__area {
    padding-left: 62px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__area {
    padding-left: 62px;
  }
}
.team__area .sec-title {
  color: var(--white);
}
.team__area .sec-title-wrapper {
  text-align: center;
  padding-bottom: 60px;
}
.team__area .sec-sub-title {
  color: var(--white);
}
.team__area-6 {
  background-image: url(../imgs/bg/shape.png);
  background-repeat: no-repeat;
  background-position: 100px 180px;
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__area-6 {
    background-position: 0 180px;
    padding-left: 62px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__area-6 {
    background-position: 0 180px;
    padding-left: 62px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__area-6 {
    background-position: 0 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__area-6 .line {
    padding-top: 150px;
  }
}
.team__area-6 .sec-title {
  line-height: 0.9;
  font-size: 120px;
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__area-6 .sec-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__area-6 .sec-title {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__area-6 .sec-title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .team__area-6 .sec-title {
    font-size: 48px;
    padding-top: 90px;
  }
}
.team__area-6 .sec-title-wrapper {
  max-width: 520px;
  padding-bottom: 60px;
}
.team__area-6 .sec-title-wrapper p {
  font-size: 18px;
  line-height: 1.4;
}
@media only screen and (min-width: 1920px) {
  .team__slider {
    margin-left: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__slider {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .team__slide {
    padding: 0 20px;
  }
}
.team__slide:nth-child(even) {
  padding-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__slide:nth-child(even) {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__slide:nth-child(even) {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .team__slide:nth-child(even) {
    padding-top: 0;
  }
}
.team__slide img {
  width: 100%;
}
.team__member-name, .team__member-name-6 {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--white);
  padding-top: 20px;
}
.team__member-name-6 {
  color: var(--black-2);
}
.team__member-name-7 {
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__member-name-7 {
    font-size: 60px;
    padding-bottom: 20px;
  }
  .team__member-name-7 br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__member-name-7 {
    font-size: 60px;
    padding-bottom: 20px;
  }
  .team__member-name-7 br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__member-name-7 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__member-name-7 {
    font-size: 48px;
  }
  .team__member-name-7 br {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .team__member-name-7 {
    font-size: 36px;
    padding-bottom: 20px;
  }
}
.team__member-role, .team__member-role-6 {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gray-2);
}
.team__member-role-6 {
  color: var(--black-3);
}
.team__member-role-7 {
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--black-3);
  font-style: italic;
  padding-bottom: 15px;
  margin-bottom: 40px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__member-role-7 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__member-role-7 {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .team__member-role-7 {
    font-size: 18px;
  }
}
.team__member-role-7::after {
  position: absolute;
  content: "";
  width: 150px;
  height: 1px;
  left: 0;
  bottom: 0;
  background-color: var(--black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__member-role-7::after {
    left: calc(50% - 75px);
  }
}
@media only screen and (max-width: 767px) {
  .team__member-role-7::after {
    left: calc(50% - 75px);
  }
}
.team__member-role-7 span {
  color: var(--black-2);
  font-weight: 500;
}
.team__join-btn {
  background-color: var(--black-2);
  padding: 300px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__join-btn {
    padding: 200px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__join-btn {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__join-btn {
    padding: 90px 0;
  }
}
@media only screen and (max-width: 767px) {
  .team__join-btn {
    padding: 60px 0;
  }
}
.team__join-btn #btn_wrapper,
.team__join-btn .btn_wrapper {
  width: 360px;
  height: 360px;
  margin: 0 auto;
}
.team__join-btn a {
  position: relative;
  color: var(--gray-2);
  font-size: 20px;
  width: 342px;
  height: 342px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__join-btn a {
    width: 300px;
    height: 300px;
    padding: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .team__join-btn a {
    width: 220px;
    height: 220px;
    padding: 35px;
  }
}
.team__join-btn a:hover span {
  width: 800px;
  height: 800px;
}
.team__join-btn a i {
  position: absolute;
  right: 130px;
  top: 150px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__join-btn a i {
    top: 130px;
    right: 88px;
  }
}
@media only screen and (max-width: 767px) {
  .team__join-btn a i {
    right: 50px;
    top: 90px;
  }
}
.team__btm {
  overflow: hidden;
}
.team__btm .sec-title-wrapper {
  padding-left: 48%;
  background-image: url(../imgs/bg/snake.png);
  background-repeat: no-repeat;
  background-position: 1px -150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__btm .sec-title-wrapper {
    background-size: 42%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__btm .sec-title-wrapper {
    background-size: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__btm .sec-title-wrapper {
    padding-left: 30%;
    background-size: 200px;
    background-position: 1px -50px;
  }
}
@media only screen and (max-width: 767px) {
  .team__btm .sec-title-wrapper {
    background-size: 0px;
    padding-left: 0;
    padding-bottom: 0;
  }
}
.team__btm p {
  font-size: 22px;
  padding-top: 30px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__btm p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__btm p {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .team__btm p {
    font-size: 18px;
  }
}
.team__detail {
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__detail .pb-140 {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__detail .pb-140 {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__detail {
    padding-top: 120px;
    position: relative;
  }
  .team__detail .pb-140 {
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__detail {
    text-align: center;
  }
  .team__detail .pb-140 {
    padding-bottom: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .team__detail {
    text-align: center;
  }
  .team__detail .pb-140 {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__detail .pt-120 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__detail .pt-120 {
    padding-top: 10px;
  }
}
.team__detail p {
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 20px;
}
.team__detail .work-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  padding-bottom: 20px;
}
.team__detail-page {
  position: relative;
}
.team__member-img {
  overflow: hidden;
  position: absolute;
  width: 770px;
  height: 100vh;
  left: -192px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__member-img {
    left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__member-img {
    left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__member-img {
    position: unset;
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__member-img {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    z-index: 1;
    margin-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .team__member-img {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    z-index: 1;
    margin-top: 150px;
  }
}
.team__member-img img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 102%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__member-img img {
    left: 0;
    max-width: 80%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__member-img img {
    left: 0;
    max-width: 70%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__member-img img {
    position: unset;
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__member-img img {
    position: unset;
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .team__member-img img {
    position: unset;
    max-width: 100%;
  }
}
.team__member-work {
  padding-top: 40px;
}
.team__member-work li {
  display: inline-block;
  padding-right: 10px;
}
.team__member-work li a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black-2);
  padding: 5px 12px;
  border: 1px solid var(--white-4);
  border-radius: 30px;
  -webkit-transition: all 0.3;
  transition: all 0.3;
}
.team__member-work li a:hover {
  background-color: var(--black-2);
  color: var(--white);
}
.team__member-social {
  padding-top: 40px;
}
.team__member-social li {
  display: inline-block;
  padding-right: 15px;
}
.team__member-social li a {
  font-size: 18px;
  color: var(--gray-15);
}
.team__member-social li a:hover {
  color: var(--black-2);
}

/*----------------------------------------*/
/*  28. SOLUTION CSS START
/*----------------------------------------*/
.solution__area {
  padding-left: 100px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__area {
    padding-left: 10px;
    padding-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .solution__area {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 90px;
  }
}
.solution__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.3fr 1.7fr 1fr;
  grid-template-columns: 1.3fr 1.7fr 1fr;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__wrapper {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .solution__wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__left {
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1/7;
  }
}
.solution__mid {
  padding-left: 80px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__mid {
    padding-left: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__mid {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__mid {
    padding-left: 0;
    grid-column: 7/-1;
    -ms-grid-row: 1;
    grid-row: 1;
  }
}
@media only screen and (max-width: 767px) {
  .solution__mid {
    padding-left: 0;
    -ms-grid-row: 1;
    grid-row: 1;
  }
}
.solution__mid p {
  max-width: 580px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-3);
  padding-left: 190px;
  position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__mid p {
    padding-left: 110px;
    max-width: 480px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .solution__mid p {
    padding-left: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__mid p {
    padding-left: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__mid p {
    padding-left: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .solution__mid p {
    padding-left: 80px;
    padding-bottom: 50px;
  }
}
.solution__mid p::before {
  position: absolute;
  content: "";
  width: 140px;
  height: 1px;
  left: 0;
  top: 10px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__mid p::before {
    width: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .solution__mid p::before {
    width: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__mid p::before {
    width: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__mid p::before {
    width: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .solution__mid p::before {
    width: 70px;
  }
}
.solution__right {
  padding-top: 260px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__right {
    padding-top: 0;
    grid-column: 1/-1;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .solution__right {
    padding-top: 60px;
  }
}
.solution__title {
  font-weight: 600;
  font-size: 150px;
  line-height: 1;
  color: var(--black-2);
  padding-top: 280px;
  padding-bottom: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__title {
    font-size: 120px;
    padding-top: 200px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .solution__title {
    padding-top: 80px;
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__title {
    padding-top: 80px;
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__title {
    padding-top: 60px;
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .solution__title {
    padding-top: 30px;
    font-size: 36px;
  }
}
.solution__img-1 {
  display: inline-block;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__img-1 {
    margin-left: 30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__img-1 img {
    max-width: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .solution__img-1 img {
    max-width: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__img-1 img {
    max-width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__img-1 img {
    max-width: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .solution__img-1 img {
    max-width: 300px;
  }
}
.solution__img-1::after {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(100% + 10px);
  left: 40px;
  top: 0;
  border: 1px solid var(--white-6);
  border-radius: 0 0 290px 230px;
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .solution__img-1::after {
    left: 20px;
  }
}
.solution__img-2 {
  position: relative;
  float: right;
  margin-top: 60px;
}
.solution__img-2::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  right: 30px;
  top: 0;
  border: 1px solid var(--white-6);
  border-radius: 200px;
  z-index: -1;
}
.solution__img-3 {
  position: relative;
  float: right;
  margin-top: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__img-3 img {
    max-width: 360px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .solution__img-3 img {
    max-width: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__img-3 img {
    max-width: 220px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__img-3 img {
    max-width: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .solution__img-3 img {
    max-width: 300px;
  }
}
.solution__img-3::after {
  position: absolute;
  content: "";
  width: calc(100% + 20px);
  height: 100%;
  right: 0;
  top: -30px;
  border: 1px solid var(--white-6);
  border-radius: 280px 0 0 200px;
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .solution__btm {
    padding-top: 40px;
  }
}
.solution__btm ul {
  text-align: right;
}
.solution__btm li {
  display: inline;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  padding-right: 40px;
  position: relative;
}
.solution__btm li:last-child {
  padding-right: 0;
}
@media only screen and (max-width: 767px) {
  .solution__btm li {
    padding-right: 30px;
  }
}
.solution__btm li::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  left: -20px;
  top: 12px;
  background-color: var(--black-2);
}
.solution__btm li:first-child::after {
  position: unset;
}
.solution__shape img {
  position: absolute;
}
.solution__shape .shape-1 {
  left: 80%;
  top: 25%;
}
.solution__shape .shape-2 {
  left: 10%;
  top: 75%;
}
.solution__shape .shape-3 {
  left: 33%;
  top: 45%;
}
.solution__shape .shape-4 {
  left: 72%;
  top: 70%;
}
.solution__shape .shape-5 {
  top: 42%;
  left: 68%;
  z-index: -1;
}

/*----------------------------------------*/
/*  29. DEVELOPMENT CSS START
/*----------------------------------------*/
.development__area {
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .development__area .pt-130 {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .development__area .pt-130 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .development__area .pb-150 {
    padding-bottom: 40px;
  }
}
.development__content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 80px;
  padding-bottom: 35px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--black-3);
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .development__content {
    grid-gap: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .development__content {
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .development__content {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .development__content {
    padding-top: 30px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-gap: 30px;
  }
}
.development__content p {
  font-size: 18px;
  line-height: 1.4;
}
.development__wrapper {
  padding-bottom: 55px;
}
@media only screen and (max-width: 767px) {
  .development__wrapper {
    padding-bottom: 15px;
  }
}
.development__wrapper ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 240px auto;
  grid-template-columns: 240px auto;
  -ms-grid-columns: 310px auto;
  grid-template-columns: 310px auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .development__wrapper ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .development__wrapper ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding-bottom: 20px;
  }
}
.development__wrapper ul li {
  display: inline-block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .development__wrapper ul li {
    font-size: 16px;
    padding-bottom: 5px;
  }
}
.development__img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px;
  z-index: 9;
}
.development__img img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 150%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .development__img {
    padding-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .development__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .development__img img {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .development__img {
    padding-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .development__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .development__img img {
    position: unset;
  }
}
.development__img img {
  width: 100%;
}

/*----------------------------------------*/
/*  30. AWARD CSS START
/*----------------------------------------*/
.award__area {
  background-color: var(--black-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__area.pb-140 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__area.pb-140 {
    padding-bottom: 90px;
  }
}
.award__area .sec-title {
  max-width: 850px;
  color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__area .sec-title {
    max-width: 700px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__area .sec-title {
    max-width: 550px;
  }
}
.award__area-8 {
  position: relative;
}
.award__left {
  height: 100%;
  margin-top: 100px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .award__left {
    margin-top: 50px;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}
.award__left img {
  position: absolute;
  bottom: 40%;
  right: 30%;
}
@media only screen and (max-width: 767px) {
  .award__left img {
    bottom: -40px;
  }
}
.award__text, .award__text-2 {
  font-size: 160px;
  color: var(--white);
  font-weight: 600;
  -webkit-transform: rotate(-43deg);
          transform: rotate(-43deg);
  text-transform: uppercase;
  letter-spacing: -3px;
  position: absolute;
  top: 130px;
  left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .award__text, .award__text-2 {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__text, .award__text-2 {
    font-size: 120px;
    top: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__text, .award__text-2 {
    font-size: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .award__text, .award__text-2 {
    position: unset;
    font-size: 100px;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    line-height: 0.5;
  }
}
.award__text-2 {
  -webkit-text-stroke: 1px #3A3A3A;
  color: transparent;
  top: 0;
  left: 30px;
}
.award__text-8 {
  position: absolute;
  width: 300px;
  right: 50px;
  bottom: 50px;
  z-index: 9;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__text-8 {
    width: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .award__text-8 {
    width: 220px;
    right: 10px;
    bottom: 10px;
  }
}
.award__text-8 a {
  display: block;
  max-width: 100%;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--white);
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .award__text-8 a {
    padding-bottom: 5px;
  }
}
.award__text-8 a:hover i {
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.award__text-8 a:hover span::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.award__text-8 a span {
  position: absolute;
  top: 0;
  right: 0;
}
.award__text-8 a span i {
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.award__text-8 a span::after {
  position: absolute;
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: -20px;
  bottom: -20px;
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.award__text-8 .title {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .award__text-8 .title {
    font-size: 16px;
  }
}
.award__right > p {
  max-width: 390px;
  margin-left: 100px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-2);
  margin-bottom: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__right > p {
    margin-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__right > p {
    margin-left: 0;
    margin-bottom: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .award__right > p {
    margin-left: 0;
    -webkit-transform: translateY(-160%);
            transform: translateY(-160%);
  }
}
.award__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5fr 0.5fr;
  grid-template-columns: 1fr 0.5fr 0.5fr;
  border-bottom: 1px solid var(--gray-12);
  padding: 20px 0;
}
.award__item:first-child {
  border-top: 1px solid var(--gray-12);
}
.award__item p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
}
.award__item p:last-child {
  text-align: right;
}
.award__video-8 {
  height: 800px;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__video-8 {
    height: 575px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__video-8 {
    height: 430px;
  }
}
@media only screen and (max-width: 767px) {
  .award__video-8 {
    height: 210px;
  }
}
.award__video-8 video {
  width: 100%;
}

.awards__area-8 .about-sub-right {
  font-weight: 400;
  color: var(--black-3);
  padding-bottom: 10px;
  text-transform: capitalize;
}
.awards__wrapper {
  padding-top: 15px;
  padding-left: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .awards__wrapper {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .awards__wrapper {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .awards__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.awards__content__title {
  color: var(--black-2);
  font-size: 80px;
  text-transform: uppercase;
  margin-bottom: 55px;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .awards__content__title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .awards__content__title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .awards__content__title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .awards__content__title {
    font-size: 36px;
    margin-bottom: 30px;
  }
}
.awards__content__title a {
  color: var(--black-2);
  font-family: "newYork";
  position: relative;
}
.awards__content__title a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 10px;
  background-color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .awards__content__title a::after {
    bottom: 3px;
  }
}
.awards__content p {
  font-size: 18px;
  width: 240px;
  margin-left: 170px;
  color: var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .awards__content p {
    margin-left: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .awards__content p {
    margin-left: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .awards__content p {
    margin-left: 60px;
    padding-bottom: 30px;
  }
}
.awards__items {
  display: -ms-grid;
  display: grid;
  grid-gap: 30px;
  -ms-grid-columns: 1.2fr 30px 3fr 30px 1.5fr 30px 0.5fr;
  grid-template-columns: 1.2fr 3fr 1.5fr 0.5fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-11);
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .awards__items {
    -ms-grid-columns: 0.3fr 30px 2fr 30px 1fr 30px 0.5fr;
    grid-template-columns: 0.3fr 2fr 1fr 0.5fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .awards__items {
    -ms-grid-columns: 0.5fr 30px 2fr 30px 1fr 30px 0.5fr;
    grid-template-columns: 0.5fr 2fr 1fr 0.5fr;
  }
}
@media only screen and (max-width: 767px) {
  .awards__items {
    grid-gap: 15px;
    -ms-grid-columns: 0.3fr 15px 2fr 15px 1fr 15px 0.5fr;
    grid-template-columns: 0.3fr 2fr 1fr 0.5fr;
  }
}
.awards__items .number {
  color: var(--black-7);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}
.awards__items .title {
  color: var(--black-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .awards__items .title {
    font-size: 16px;
  }
}
.awards__items img {
  max-width: 100px;
}
@media only screen and (max-width: 767px) {
  .awards__items img {
    max-width: 60px;
  }
}
.awards__items .date {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  text-align: right;
  color: var(--black-7);
}
@media only screen and (max-width: 767px) {
  .awards__items .date {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .about8 {
    margin-bottom: 40px;
  }
}

.dark .awards__content p,
.dark .awards__items .title,
.dark .awards__content__title a,
.dark .awards__content__title,
.dark .awards__area-8 .about-sub-right {
  color: var(--white);
}
.dark .awards__items .number,
.dark .awards__items .date {
  color: var(--gray-2);
}
.dark .awards__content__title a::after {
  background-color: var(--white);
}

/*----------------------------------------*/
/*  31. FAQ CSS START
/*----------------------------------------*/
.faq__area {
  overflow: hidden;
}
.faq__area-6 {
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__area-6 .line {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__area-6 .line {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .faq__area-6 .line {
    padding-top: 120px;
  }
}
.faq__area-6 .sec-title-wrapper {
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .faq__area-6 .sec-title-wrapper {
    padding-bottom: 40px;
  }
}
.faq__area-6 .sec-title-wrapper p {
  padding-left: 60px;
  font-size: 18px;
  padding-top: 20px;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .faq__area-6 .sec-title-wrapper p {
    padding-left: 30px;
  }
}
.faq__img {
  padding-right: 85px;
  overflow: hidden;
  position: relative;
  width: calc(100% - 85px);
  height: 630px;
  z-index: 1;
}
.faq__img img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 120%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .faq__img {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__img {
    padding-right: 0;
    overflow: hidden;
    position: relative;
    width: calc(100% - 30px);
    height: auto;
  }
  .faq__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .faq__img img {
    position: unset;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__img {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    padding-right: 0;
  }
  .faq__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .faq__img img {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .faq__img {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    padding-right: 0;
  }
  .faq__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .faq__img img {
    position: unset;
  }
}
.faq__img img {
  width: 100%;
}
.faq__content {
  padding-left: 85px;
  padding-top: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .faq__content {
    padding-left: 30px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__content {
    padding-left: 0;
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__content {
    padding-left: 0;
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .faq__content {
    padding-left: 0;
  }
}
.faq__title {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: var(--black-2);
  max-width: 315px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .faq__title {
    font-size: 30px;
  }
}
.faq__list, .faq__list-6, .faq__list-3 {
  padding-right: 1px;
}
.faq__list .accordion-body, .faq__list-6 .accordion-body, .faq__list-3 .accordion-body {
  padding-left: 0;
  min-height: 160px;
}
.faq__list .accordion-item, .faq__list-6 .accordion-item, .faq__list-3 .accordion-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.faq__list .accordion-button, .faq__list-6 .accordion-button, .faq__list-3 .accordion-button {
  background-color: transparent;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  padding-left: 0;
  padding-right: 10px;
  border-radius: 0;
}
.faq__list .accordion-button.collapsed::after, .faq__list-6 .accordion-button.collapsed::after, .faq__list-3 .accordion-button.collapsed::after {
  background-image: none;
  content: "+";
  font-weight: 300;
  font-size: 30px;
  top: 6px;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.faq__list .accordion-button:not(.collapsed), .faq__list-6 .accordion-button:not(.collapsed), .faq__list-3 .accordion-button:not(.collapsed) {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
}
.faq__list .accordion-button:not(.collapsed)::after, .faq__list-6 .accordion-button:not(.collapsed)::after, .faq__list-3 .accordion-button:not(.collapsed)::after {
  background-image: none;
  content: "-";
  font-weight: 300;
  font-size: 30px;
  top: 6px;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.faq__list .accordion-button:focus, .faq__list-6 .accordion-button:focus, .faq__list-3 .accordion-button:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.faq__list-3 {
  padding-right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__list-3 {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__list-3 {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .faq__list-3 {
    padding-right: 0;
  }
}
.faq__list-3 .accordion-item {
  background-color: transparent;
  border-bottom: 1px solid var(--black-2);
}
.faq__list-3 .accordion-item:first-child {
  border-top: 1px solid var(--black-2);
}
.faq__list-6 {
  padding-left: 1px;
}
.faq__list-6 .accordion-button {
  font-size: 20px;
}
.faq__list-6 .accordion-button.collapsed::after, .faq__list-6 .accordion-button:not(.collapsed)::after {
  font-size: 50px;
  top: -10px;
}
.faq__list-6 .accordion-body p {
  font-size: 18px;
  line-height: 1.4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__list-6 .accordion-header {
    padding-right: 10px;
  }
}
.faq__btm {
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .faq__btm .pb-130 {
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__btm .pb-130 {
    padding-bottom: 120px;
  }
}
.faq__btm p {
  padding-top: 15px;
  font-size: 18px;
  line-height: 1.4;
}
.faq__btm a {
  margin: 0 auto;
  margin-top: 60px;
}
@media only screen and (max-width: 767px) {
  .faq__btm a {
    margin-top: 0;
  }
}
.faq__btm #btn_wrapper,
.faq__btm .btn_wrapper {
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .faq__btm #btn_wrapper,
.faq__btm .btn_wrapper {
    margin-top: 40px;
  }
}

.header__area-9 {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
}

.hero_layer_9 {
  position: relative;
}

#main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.content {
  color: #fff;
  position: absolute;
  bottom: 120px;
  text-align: center;
  left: 50px;
  z-index: 99;
  font-size: 0.8em;
  text-transform: uppercase;
}
.content p {
  color: var(--white);
}

.hero9_title {
  font-size: 80px;
  font-weight: 500;
  margin-bottom: 30px;
}
.hero9_title span {
  font-family: "newYork";
  position: relative;
  padding-left: 30px;
}

.hero9_title span::before {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -20%;
  height: 2px;
  width: 70px;
  background-color: var(--white);
}

.content a {
  color: rgba(227, 227, 227, 0.78);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.content a:hover {
  padding-bottom: 1px;
}

.buttons {
  position: absolute;
  right: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 99;
}

.buttons button {
  border: none;
  background-size: contain;
  background: url(https://raw.githubusercontent.com/Rajacharles/GSAP-Fullscreen-Slider/master/images/down-arrow.png) no-repeat;
  background-position: center;
  width: 10px;
  height: 30px;
  display: block;
  margin: 20px 0;
  padding: 0 15px;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
}

.buttons button.next {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

.buttons button.next:active {
  -webkit-transform: scaleY(-1) translateY(8px);
          transform: scaleY(-1) translateY(8px);
}

.buttons button.prev:active {
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
}

#main .part {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#main .part .section {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#main .part .section img {
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  left: var(--x);
  pointer-events: none;
}

.section {
  display: block;
  width: 100%;
  height: 100%;
}

.part:first-child h2 {
  display: block;
  top: 45% !important;
  left: 49% !important;
  position: absolute;
  z-index: 9999999999999 !important;
  width: 500px;
  background: transparent;
  height: 400px;
}

#header_10 {
  position: static;
  background: transparent;
}

#home10_menu li > a {
  color: var(--black);
}

.hero__area-10 .swiper.hero10_activition {
  padding-bottom: 110px;
}
.hero__area-10 .swiper-button-prev.hero_prev {
  color: var(--black-3);
  text-transform: uppercase;
  bottom: 40px;
  position: absolute;
  top: unset;
  width: 85px;
  left: 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-prev.hero_prev img {
    margin-left: 0;
  }
}
.hero__area-10 .swiper-button-prev.hero_prev:hover {
  color: var(--black-2);
}
.hero__area-10 .swiper-button-prev.hero_prev:hover img {
  margin-left: 10px;
}
@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-prev.hero_prev:hover img {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-10 .swiper-button-prev.hero_prev {
    bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-10 .swiper-button-prev.hero_prev {
    width: 75px;
  }
}
.hero__area-10 .swiper-button-prev.hero_prev img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  max-width: 100%;
}
.hero__area-10 .swiper-button-next.hero_next {
  text-transform: uppercase;
  bottom: 40px;
  position: absolute;
  top: unset;
  right: 0;
  width: 85px;
  color: var(--black-3);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-next.hero_next img {
    margin-right: 0;
  }
}
.hero__area-10 .swiper-button-next.hero_next:hover {
  color: var(--black-2);
}
.hero__area-10 .swiper-button-next.hero_next:hover img {
  margin-right: 10px;
}
@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-next.hero_next:hover img {
    margin-right: 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-10 .swiper-button-next.hero_next {
    bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-10 .swiper-button-next.hero_next {
    width: 75px;
  }
}
.hero__area-10 .swiper-button-next.hero_next img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  max-width: 100%;
}
.hero__area-10 .swiper-button-prev:after,
.hero__area-10 .swiper-rtl .swiper-button-next:after {
  display: none;
}
.hero__area-10 .swiper-button-next:after,
.hero__area-10 .swiper-rtl .swiper-button-prev:after {
  display: none;
}
.hero__area-10 .increase-dash {
  font-size: 6px;
  width: 90px;
  background: var(--black);
  height: 1px;
  color: #1C1D20;
}
@media only screen and (max-width: 767px) {
  .hero__area-10 .increase-dash {
    width: 50px;
  }
}
.hero__area-10 .hero10_activition {
  position: relative;
}
.hero__area-10 .hero10_activition .swiper-pagination-current {
  position: relative;
  display: inline-block;
  width: 22px;
}
@media only screen and (max-width: 767px) {
  .hero__area-10 .hero10_activition .swiper-pagination-current {
    margin-left: 22px;
  }
}
.hero__area-10 .hero10_activition .swiper-pagination-current::before {
  content: "0";
  position: absolute;
  left: -5px;
}
.hero__area-10 .hero10_activition .swiper-pagination-total {
  position: relative;
  display: inline-block;
  width: 48px;
}
.hero__area-10 .hero10_activition .swiper-pagination-total::before {
  content: "0";
  position: absolute;
  left: 8px;
}
.hero__area-10 .hero10_activition .swiper-pagination {
  color: var(--black);
  width: 190px;
  left: 50%;
  bottom: 50px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-10 .hero10_activition .swiper-pagination {
    bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-10 .hero10_activition .swiper-pagination {
    width: 160px;
  }
}

.hero10 {
  position: relative;
  overflow: hidden;
  z-index: 2;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.hero10::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: rgba(0, 0, 0, 0.3);
}
.hero10:hover::after {
  opacity: 1;
  visibility: visible;
}
.hero10:hover .hero10__content i {
  opacity: 1;
  -webkit-transform: translateY(-50px) rotate(-45deg);
          transform: translateY(-50px) rotate(-45deg);
}
.hero10:hover .hero10__content__title {
  opacity: 1;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
}
.hero10:hover .hero10__content__name {
  opacity: 1;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
}
.hero10:hover .hero10__thumb img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero10__thumb {
    height: 470px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero10__thumb {
    height: 470px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero10__thumb {
    height: 470px;
  }
}
@media only screen and (max-width: 767px) {
  .hero10__thumb {
    height: 70vh;
  }
}
.hero10__thumb img {
  width: 100%;
  -webkit-transition: all 5s;
  transition: all 5s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.hero10__content {
  color: var(--white);
  position: absolute;
  left: 40px;
  z-index: 9;
  bottom: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.hero10__content i {
  color: var(--white);
  font-size: 24px;
  margin-bottom: 35px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media (max-width: 1365px) {
  .hero10__content i {
    opacity: 1;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
@media only screen and (max-width: 767px) {
  .hero10__content i {
    margin-bottom: 20px;
  }
}
.hero10__content__title {
  font-weight: 500;
  font-size: 45px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
@media (max-width: 1365px) {
  .hero10__content__title {
    font-size: 36px;
    opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
  .hero10__content__title {
    font-size: 30px;
  }
}
.hero10__content__title span {
  display: block;
  font-weight: 400;
  font-family: "newYork";
}
.hero10__content__name {
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 7px;
  display: inline-block;
  text-transform: uppercase;
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media (max-width: 1365px) {
  .hero10__content__name {
    opacity: 1;
  }
}
.hero10__content__date {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.showcase4 {
  margin-bottom: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase4 {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase4 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase4 {
    margin-bottom: 40px;
  }
}
.showcase4 .showcase5_content {
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: var(--white);
}
.showcase4__thumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 500px;
}
.showcase4__thumb img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 130%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase4__thumb {
    height: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase4__thumb {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase4__thumb {
    height: unset;
  }
  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase4__thumb {
    height: unset;
  }
  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .showcase4__thumb {
    height: unset;
  }
  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}
.showcase4__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .showcase4__content br {
    display: block;
  }
}
.showcase4__content h2 {
  color: var(--black-2);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
}
.showcase4__content h2 span {
  color: var(--black-2);
  padding-left: 35px;
  font-family: "newYork";
  position: relative;
}
.showcase4__content h2 span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 30px;
  background-color: var(--black-13);
}
.showcase4__content h2 span.before_content_two {
  padding-left: 65px;
  color: var(--white);
}
.showcase4__content h2 span.before_content_two::before {
  width: 55px;
  background-color: var(--white);
}
.showcase4__content span {
  text-transform: uppercase;
  color: var(--black-13);
}

.plr-50 {
  padding: 0 50px;
}

.work12__title {
  margin: 0 auto 80px;
  margin-right: 0;
}

.hero__area-12 {
  overflow: hidden;
  height: 100%;
  padding: 100px 30px 0;
}
.hero__area-12 .swiper-horizontal > .swiper-pagination-bullets,
.hero__area-12 .swiper-pagination-bullets.swiper-pagination-horizontal,
.hero__area-12 .swiper-pagination-custom,
.hero__area-12 .swiper-pagination-fraction {
  bottom: 81px;
  left: 0;
  width: 100%;
}
.hero__area-12 .swiper-pagination-bullet-active {
  outline: 1px solid #121212;
  outline-offset: 4px;
  background: #121212;
}
.hero__area-12 .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.hero__area-12 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 11px;
}
.hero__area-12 .gallery-slider {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 80px;
}
.hero__area-12 .gallery-thumbs {
  position: absolute;
  width: 300px;
  height: 100%;
  top: 0;
  right: 0;
}
.hero__area-12 .gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.hero__area-12 .gallery-thumbs .swiper-slide img {
  width: 150px;
}
.hero__area-12 .gallery-slider .swiper-slide {
  width: auto;
}

.gallary12 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-position: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gallary12 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.gallary12__thumb {
  height: 575px;
  max-width: 865px;
}
.gallary12__thumb img {
  width: 100%;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .gallary12__thumb {
    max-width: 850px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .gallary12__thumb {
    height: 520px;
    max-width: 750px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gallary12__thumb {
    height: 460px;
    max-width: 560px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .gallary12__thumb {
    height: 380px;
    max-width: 570px;
  }
}
@media only screen and (max-width: 767px) {
  .gallary12__thumb {
    max-width: 100%;
    height: 55vh;
  }
}
.gallary12__content {
  text-transform: uppercase;
  -ms-flex-preferred-size: 28%;
      flex-basis: 28%;
  opacity: 0;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .gallary12__content {
    -ms-flex-preferred-size: 32%;
        flex-basis: 32%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gallary12__content {
    -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .gallary12__content {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .gallary12__content {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin-bottom: 20px;
  }
}
.gallary12__content img {
  display: block;
  text-align: left;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .gallary12__content img {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .gallary12__content img {
    margin-bottom: 20px;
  }
}
.gallary12__content__title {
  font-size: 60px;
  color: var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .gallary12__content__title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gallary12__content__title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .gallary12__content__title {
    font-size: 30px;
  }
  .gallary12__content__title br {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .gallary12__content__title {
    font-size: 24px;
  }
}
.gallary12__content__title span {
  font-family: "newYork";
}
.gallary12__content__name {
  color: var(--black-2);
}

.title_right.w-300 {
  width: 300px;
}

.pl-100 {
  padding-left: 100px;
}

.showcase5_title {
  font-size: 80px !important;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase5_title {
    font-size: 30px !important;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase5_title {
    font-size: 20px !important;
    margin-bottom: 20px;
  }
}

.showcase5_bottom {
  padding-left: 38px;
  position: relative;
  z-index: 2;
}
.showcase5_bottom span {
  color: var(--white);
}

@media only screen and (max-width: 767px) {
  .section_title_wrapperr {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section_title_wrapperr {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
}

.showcase5__content img {
  margin-bottom: 35px;
}
.showcase5__content p {
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  text-align: center;
  color: var(--black-3);
  position: relative;
  padding-bottom: 190px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase5__content p {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase5__content p {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase5__content p {
    font-size: 20px;
    padding-bottom: 100px;
  }
}
.showcase5__content p::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100px;
  bottom: 0px;
  left: 50%;
  background-color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .showcase5__content p::after {
    height: 50px;
  }
}

.logos_wrapper li {
  margin-bottom: 10px;
}
.logos_wrapper li a {
  text-transform: capitalize;
  color: var(--black-2);
  font-weight: 500;
}

.logo17 {
  margin-bottom: 90px;
}

.hero__area-15 {
  padding: 0 30px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .hero__area-15 {
    padding: 0 15px;
  }
}
.hero__area-15::before {
  content: "";
  display: table;
}
.hero__area-15::after {
  content: "";
  display: table;
  clear: both;
}
.hero__area-15 .swiper-container {
  width: calc(100% - 160px);
  height: calc(100vh - 120px);
  float: left;
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.6s ease, transform 0.3s ease;
  transition: opacity 0.6s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-15 .swiper-container {
    height: calc(100vh - 80px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-15 .swiper-container {
    width: calc(100% - 130px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .swiper-container {
    height: calc(100vh - 60px);
    width: calc(100% - 90px);
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-15 .swiper-container {
    width: 100%;
    height: calc(100vh - 60px);
  }
}
.hero__area-15 .main-slider {
  padding-top: 160px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-15 .main-slider {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-15 .main-slider {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .main-slider {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-15 .main-slider {
    padding-top: 120px;
  }
}
.hero__area-15 .main-slider .swiper-image {
  width: 100%;
  height: 100%;
}
.hero__area-15 .main-slider .swiper-pagination {
  bottom: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}
.hero__area-15 .main-slider .swiper-pagination-bullet {
  margin: 0 10px;
  width: 6px;
  height: 6px;
}
.hero__area-15 .main-slider .swiper-pagination-bullet-active {
  outline: 1px solid var(--black-2);
  background: var(--black-2);
  outline-offset: 6px;
}
.hero__area-15 .swiper-slide {
  overflow: hidden;
}
.hero__area-15 .swiper-slide.swiper-slide-active .gallary__thumb {
  background-color: transparent;
}
.hero__area-15 .swiper-slide.swiper-slide-active .gallary12__content {
  opacity: 1;
}
.hero__area-15 .gallary__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-position: center;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: hue;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  padding: 10px 20px;
  color: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  text-transform: uppercase;
}
.hero__area-15 .swiper-container.thumb-slider {
  width: 160px;
  overflow: hidden;
  height: calc(100vh - 220px);
  margin-top: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 130px;
    margin-top: 110px;
    height: calc(100vh - 180px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 130px;
    margin-top: 100px;
    height: calc(100vh - 180px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 90px;
    margin-top: 110px;
    height: calc(100vh - 180px);
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 100%;
    margin-top: 30px;
    height: 200px;
    display: none;
  }
}
.hero__area-15 .swiper-container.thumb-slider .swiper-slide {
  cursor: pointer;
}
.hero__area-15 .gallary12 {
  -webkit-box-orient: unset;
  -webkit-box-direction: unset;
      -ms-flex-direction: unset;
          flex-direction: unset;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .gallary12 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-15 .gallary12 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.showcase__top-16 {

  padding: 200px 30px 65px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase__top-16 {
    padding: 160px 30px 65px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__top-16 {
    padding: 160px 30px 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__top-16 {
    padding: 160px 30px 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__top-16 {
    padding: 160px 30px 60px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase__top-16 {
    padding: 140px 30px 40px;
  }
}
.showcase__top-16 .title-right {
  max-width: 296px;
  margin-left: auto;
  padding-top: 50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase__top-16 .title-right {
    padding-top: 40px;
  }
}
.showcase__top-16 .title-right p {
  font-size: 18px;
}
.showcase__content-16 a {
  position: relative;
  display: inline-block;
}
.showcase__content-16 img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}
.showcase__info-16 {
  position: absolute;
  bottom: 50px;
  left: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__info-16 {
    bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase__info-16 {
    bottom: 20px;
    left: 20px;
  }
}
.showcase__title-16 {
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__title-16 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__title-16 {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__title-16 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase__title-16 {
    font-size: 30px;
    padding-bottom: 10px;
  }
  .showcase__title-16 br {
    display: block;
  }
}
.showcase__title-16 span {
  display: inline-block;
  text-indent: 100px;
  font-family: "newYork";
  position: relative;
}
@media only screen and (max-width: 767px) {
  .showcase__title-16 span {
    text-indent: 30px;
  }
}
.showcase__title-16 span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 70px;
  background-color: var(--white);
}
@media only screen and (max-width: 767px) {
  .showcase__title-16 span::before {
    width: 20px;
  }
}
.showcase__sub-title-16 {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  padding-left: 100px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .showcase__sub-title-16 {
    padding-left: 30px;
  }
}

.showcase_info {
  display: block;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 9999;
  background-color: var(--white);
  margin-bottom: -3px;
}

.showcase__info-16 {
  position: absolute;
  bottom: 30%;
  left: 50px;
}

.showcase__image-16 {
  overflow: hidden;
  height: 100vh;
}

.showcase__content-16 {
  position: relative;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.showcase__content-16 .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.wc-tilt {
  display: inline-block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.wc-tilt-2 {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.dark .hero__area-10 .hero10_activition .swiper-pagination-current {
  color: var(--white);
}
.dark .hero__area-10 .hero10_activition .swiper-pagination-total {
  color: var(--white);
}
.dark .hero__area-10 .swiper-button-prev.hero_prev {
  color: var(--white);
}
.dark .hero__area-10 .swiper-button-prev.hero_prev:hover {
  color: var(--gray-3);
}
.dark .hero__area-10 .swiper-button-prev.hero_prev img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .hero__area-10 .swiper-button-next.hero_next {
  color: var(--white);
}
.dark .hero__area-10 .swiper-button-next.hero_next:hover {
  color: var(--gray-3);
}
.dark .hero__area-10 .swiper-button-next.hero_next img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .hero__area-10 .increase-dash {
  background-color: var(--white);
}
.dark .showcase4__content h2 {
  color: var(--white);
}
.dark .showcase4__content h2 span {
  color: var(--white);
}
.dark .showcase4__content span {
  color: var(--gray-2);
}
.dark .showcase5__content p {
  color: var(--gray-3);
}
.dark .showcase5__content p::after {
  background-color: var(--white);
}
.dark .showcase5__content img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .showcase_info {
  background-color: var(--black-2);
}
.dark .gallary12__content__title,
.dark .gallary12__content__name {
  color: var(--white);
}
.dark .gallary12__content img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .hero__area-15 .main-slider .swiper-pagination-bullet {
  background: var(--white);
  opacity: 0.5;
}
.dark .hero__area-15 .main-slider .swiper-pagination-bullet-active {
  outline: 1px solid var(--white);
  background: var(--white);
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .video7_layer .video-container video {
    height: 300px;
  }
}

.video_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  max-width: 540px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  z-index: 3;
  right: 100px;
  z-index: -2;
  bottom: 60px;
}
.video_text::before {
  content: "";
  position: absolute;
  bottom: -23%;
  left: 0;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
}
.video_text__left {
  margin-right: 30px;
}
@media only screen and (max-width: 767px) {
  .video_text {
    top: 0;
    right: 0;
  }
}
.video_text .video_title_7 {
  font-size: 20px;
  color: var(--white);
  font-family: "newYork";
}
@media only screen and (max-width: 767px) {
  .video_text .video_title_7 {
    font-size: 40px;
  }
}
.video_text .video_dis_7 {
  font-size: 18px;
  color: var(--white);
  text-indent: 30px;
}

.nominated_title_7 {
  font-family: "newYork";
  font-weight: 400;
  font-size: 100px;
  color: var(--white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .nominated_title_7 {
    font-size: 50px;
  }
}

.contactrow {
  padding-left: 450px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contactrow {
    padding-left: 0;
  }
}

.nominateparagraph {
  max-width: 440px;
  margin: auto;
}
.nominateparagraph p {
  font-size: 18px;
  text-indent: 60px;
}

.overlay_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 75px;
  left: 80px;
  z-index: 9;
  color: var(--white);
  font-size: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--white);
  padding-bottom: 30px;
}
.overlay_text h4 {
  margin-right: 30px;
}

.tech_title {
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 45px;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tech_title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tech_title {
    font-size: 48px;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tech_title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .tech_title {
    font-size: 30px;
    line-height: 1.3;
    padding-bottom: 30px;
  }
}
.tech_title a {
  color: var(--black-2);
  font-family: "newYork";
  position: relative;
}
.tech_title a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 10px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tech_title a::after {
    bottom: 7px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tech_title a::after {
    bottom: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .tech_title a::after {
    bottom: 3px;
  }
}
.tech_title span {
  font-family: "newYork";
}

.single_dis {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--black-3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single_dis {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single_dis {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .single_dis {
    font-size: 18px;
  }
}

.single__thumb {
  position: relative;
}
.single__thumb img {
  max-width: 100%;
}
.single__thumb video {
  width: 100%;
}
.single__thumb .video-frame {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 100%;
  -webkit-filter: brightness(25);
          filter: brightness(25);
}
.single__thumb .shape-2 {
  position: absolute;
  bottom: -30px;
  left: 60%;
}
@media only screen and (max-width: 767px) {
  .single__thumb .shape-2 {
    bottom: -20px;
    max-width: 40px;
  }
}
.single__thumb .svgstar {
  position: absolute;
  left: 25%;
  top: 18%;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .single__thumb .svgstar {
    left: 24%;
    top: 15%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .single__thumb .svgstar {
    left: 23%;
    top: 15%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single__thumb .svgstar {
    max-width: 90px;
    left: 23%;
    top: 15%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single__thumb .svgstar {
    max-width: 70px;
    left: 24%;
    top: 16%;
  }
}
@media only screen and (max-width: 767px) {
  .single__thumb .svgstar {
    max-width: 40px;
    left: 23%;
    top: 15%;
  }
}

.dark .tech_title,
.dark .tech_title a {
  color: var(--white);
}
.dark .tech_title a::after {
  background-color: var(--white);
}
.dark .single__thumb .shape-2,
.dark .single__thumb .svgstar {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .single__thumb .video-frame {
  -webkit-filter: unset;
          filter: unset;
}

.client__area-8 {
  background-color: var(--black-2);
  background-image: url("../imgs/essential-img/bg-axtra.png");
  padding-top: 150px;
  padding-bottom: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .client__area-8 {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .client__area-8 {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .client__area-8 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.client__area-8 .section_wrapper::before {
  background-color: #313131;
}
.client__area-8 .about-sub-right {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 10px;
}
.client__area-8 .react_border {
  border-color: #313131;
}
.client__area-8 .react_border span {
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
  display: inline-block;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.client__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  margin-bottom: 110px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .client__section {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    margin-bottom: 50px;
  }
}
.client__section__title {
  color: var(--white);
  font-size: 80px;
  line-height: 1;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .client__section__title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .client__section__title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .client__section__title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .client__section__title {
    font-size: 40px;
  }
}
.client__section__title span {
  font-family: "newYork";
}
.client__section__dis {
  max-width: 240px;
  color: var(--gray-2);
  font-size: 18px;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .client__section__dis {
    max-width: 100%;
  }
}
.client__logo {
  display: -ms-grid;
  display: grid;
  grid-gap: 120px 60px;
  -ms-grid-columns: 1fr 60px 1fr 60px 1fr 60px 1fr 60px 1fr 60px 1fr;
  grid-template-columns: repeat(6, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .client__logo {
    grid-gap: 80px 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .client__logo {
    grid-gap: 60px 40px;
    -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .client__logo {
    grid-gap: 50px;
    -ms-grid-columns: 1fr 50px 1fr 50px 1fr;
    grid-template-columns: repeat(3, 1fr);
  }
}
.client__logo img {
  max-width: 100%;
}

/*----------------------------------------*/
/*  32. CAREER CSS START
/*----------------------------------------*/
.career__top .sec-title-wrapper {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.career__top-title {
  background-color: var(--black-2);
  padding-bottom: 500px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career__top-title {
    padding-bottom: 470px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__top-title {
    padding-bottom: 470px;
    padding-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .career__top-title {
    padding-bottom: 30px;
    padding-top: 80px;
  }
}
.career__top-title .btn-item {
  width: 200px;
  height: 200px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__top-title .btn-item {
    width: 170px;
    height: 170px;
  }
}
@media only screen and (max-width: 767px) {
  .career__top-title .btn-item {
    width: 170px;
    height: 170px;
  }
}
.career__top .sec-title-2 {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .career__top .sec-title-2 {
    margin-bottom: 50px;
  }
}
.career__top-img {
  height: 800px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .career__top-img {
    height: 700px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career__top-img {
    height: 560px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career__top-img {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__top-img {
    height: 480px;
  }
}
@media only screen and (max-width: 767px) {
  .career__top-img {
    height: auto;
  }
}
.career__top-img iframe,
.career__top-img video {
  width: 100%;
}
.career__thumb {
  margin-top: -500px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__thumb {
    margin-top: -480px;
  }
}
@media only screen and (max-width: 767px) {
  .career__thumb {
    margin-top: -50px;
  }
}
.career__thumb .inherit {
  margin-right: -320px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .career__thumb .inherit {
    margin-right: -80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career__thumb .inherit {
    margin-right: -130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career__thumb .inherit {
    margin-right: -50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__thumb .inherit {
    margin-right: -40px;
  }
}
@media only screen and (max-width: 767px) {
  .career__thumb .inherit {
    margin-right: calc(-0.5 * var(--bs-gutter-x));
  }
}
.career__gallery {
  overflow: hidden;
}
.career__gallery ul {
  text-align: center;
  margin-bottom: 20px;
}
.career__gallery ul li {
  display: inline-block;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--black-2);
  position: relative;
  padding-right: 20px;
  margin-right: 20px;
}
@media only screen and (max-width: 767px) {
  .career__gallery ul li {
    font-size: 24px;
    padding-right: 10px;
    margin-right: 10px;
  }
}
.career__gallery ul li::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 3px;
  right: 0;
  bottom: 10px;
  background-color: var(--black-2);
}
.career__gallery ul li:last-child::after {
  position: unset;
}
.career__gallery-img {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: self-start;
      -ms-flex-align: self-start;
          align-items: self-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 700px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .career__gallery-img {
    height: 650px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career__gallery-img {
    height: 580px;
  }
}
@media (max-width: 1200px) {
  .career__gallery-img {
    height: 100%;
  }
}
.career__gallery-img:last-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
@media only screen and (max-width: 767px) {
  .career__gallery-img:last-child {
    gap: 0;
  }
}
.career__gallery-img img {
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .career__gallery-img img {
    margin: 0 auto;
    margin-bottom: 20px;
  }
}
.career__gallery p {
  max-width: 850px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.3;
  color: var(--black-3);
  text-align: center;
  padding-bottom: 60px;
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__gallery p {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .career__gallery p {
    font-size: 20px;
  }
}
.career__benefits {
  overflow: hidden;
}
.career__benefits .sec-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}
.career__benefits .sec-title-wrapper p {
  font-size: 18px;
  line-height: 1.4;
  padding-right: 10px;
  padding-top: 40px;
}
@media only screen and (max-width: 767px) {
  .career__benefits .sec-title-wrapper p {
    padding-right: 0;
    padding-top: 30px;
  }
}
.career__benefits-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__benefits-list {
    margin-bottom: 70px;
    padding-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .career__benefits-list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 50px;
  }
}
.career__benefits-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 240px;
  height: 240px;
  text-align: center;
  border: 1px solid #C8C7C7;
  border-radius: 100%;
  margin-left: -30px;
  margin-top: -30px;
  font-weight: 400;
  font-size: 18px;
  color: var(--black-2);
}
@media only screen and (min-width: 1920px) {
  .career__benefits-list li:nth-child(3n+1) {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .career__benefits-list li:nth-child(3n+1) {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career__benefits-list li {
    width: 210px;
    height: 210px;
    margin-left: -20px;
    margin-top: -20px;
    padding: 20px;
  }
  .career__benefits-list li:nth-child(3n+1) {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career__benefits-list li {
    width: 240px;
    height: 240px;
    margin-left: -20px;
    margin-top: -20px;
    padding: 20px;
  }
  .career__benefits-list li:nth-child(2n+1) {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .career__benefits-list li {
    width: 260px;
    height: 260px;
  }
  .career__benefits-list li:nth-child(3n+1) {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .career__benefits-list li {
    width: 175px;
    height: 175px;
    margin-left: -10px;
    margin-top: -10px;
    padding: 20px;
    font-size: 16px;
  }
  .career__benefits-list li:nth-child(2n+1) {
    margin-left: 0;
  }
}

.job__area {
  background-color: var(--black-2);
  overflow: hidden;
}
.job__area .sec-title {
  color: var(--white);
}
.job__apply {
  margin-top: -20px;
}
@media (max-width: 1400px) {
  .job__apply {
    margin-top: 0;
  }
}
.job__list {
  padding-top: 60px;
}
.job__list a:first-child .job__item {
  border-top: 1px solid var(--secondary);
}
.job__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5fr 5fr 1fr;
  grid-template-columns: 1fr 5fr 5fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--secondary);
  padding: 35px 0;
}
@media only screen and (max-width: 767px) {
  .job__item {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding: 35px 0 20px;
  }
}
.job__item:hover .job__title {
  color: var(--white);
}
.job__item:hover .job__link i {
  -webkit-transform: rotate(-45deg) translate(60px, 2px);
          transform: rotate(-45deg) translate(60px, 2px);
  color: var(--white);
}
.job__item:hover .job__link span::after {
  right: 0;
  bottom: 0;
  opacity: 1;
  visibility: visible;
  color: var(--white);
}
.job__no, .job__open {
  font-weight: 300;
  font-size: 24px;
  line-height: 1.3;
  color: var(--gray-3);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__no, .job__open {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .job__no, .job__open {
    font-size: 18px;
  }
}
.job__title {
  font-weight: 400;
  font-size: 36px;
  line-height: 1.5;
  color: var(--gray-3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .job__title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .job__title {
    font-size: 24px;
  }
}
.job__link {
  text-align: right;
  overflow: hidden;
  position: relative;
}
.job__link span::after {
  position: absolute;
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  right: 45px;
  bottom: -35px;
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.job__link i,
.job__link span {
  font-size: 30px;
  color: var(--gray-3);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.job__detail {
  overflow: hidden;
}
.job__detail-top {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 690px;
}
.job__detail-top img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 120%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1920px) {
  .job__detail-top {
    padding-left: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .job__detail-top {
    padding-left: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 500px;
  }
  .job__detail-top img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 120%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .job__detail-top {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .job__detail-top img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__detail-top {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .job__detail-top img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  .job__detail-top {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
    padding-top: 73px;
  }
  .job__detail-top img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
.job__detail-top img {
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .job__detail-top img {
    position: unset;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__detail-top img {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .job__detail-top img {
    position: unset;
  }
}
.job__detail-wrapper {

  padding-top: 60px;
  padding-right: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .job__detail-wrapper {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .job__detail-wrapper {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__detail-wrapper {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .job__detail-wrapper {
    padding-right: 0;
  }
}
.job__detail-meta {
  padding-top: 35px;
  padding-bottom: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__detail-meta {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .job__detail-meta {
    padding-bottom: 20px;
  }
}
.job__detail-meta li {
  display: inline-block;
  padding-right: 70px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-3);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__detail-meta li {
    display: block;
    padding-right: 0;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .job__detail-meta li {
    display: block;
    padding-right: 0;
    padding-bottom: 20px;
  }
}
.job__detail-meta li span {
  color: var(--gray-8);
  font-size: 14px;
  font-weight: 400;
  display: block;
}
.job__detail-content {
  border-top: 1px solid var(--white-4);
  padding-top: 35px;
}
.job__detail-content p {
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 40px;
}
.job__detail-content h1,
.job__detail-content h2 {
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 20px;
}
.job__detail-content h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 20px;
}
.job__detail-content h4 {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 20px;
}
.job__detail-content h5,
.job__detail-content h6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 20px;
}
.job__detail-content ul,
.job__detail-content ol {
  padding-bottom: 35px;
  padding-left: 30px;
}
@media only screen and (max-width: 767px) {
  .job__detail-content ul,
.job__detail-content ol {
    padding-left: 20px;
    padding-bottom: 30px;
  }
}
.job__detail-content ul li,
.job__detail-content ol li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
  padding-bottom: 5px;
  position: relative;
}
.job__detail-content ul li::before,
.job__detail-content ol li::before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  left: -18px;
  top: 12px;
  background-color: var(--black-3);
  border-radius: 30px;
}
.job__detail-sidebar {
  margin-top: 70px;
  background: #F9F9F9;
  padding: 40px 30px;
  position: sticky;
  top: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__detail-sidebar {
    padding: 30px 20px;
  }
}
.job__detail-sidebar ul li {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-3);
  padding-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .job__detail-sidebar ul li {
    font-size: 14px;
  }
}
.job__detail-sidebar ul li:last-child {
  padding-bottom: 0;
}
.job__detail-sidebar ul li span {
  color: var(--gray-8);
  font-size: 14px;
  font-weight: 400;
  display: block;
}

/*----------------------------------------*/
/*  33. FEATURE CSS START
/*----------------------------------------*/
.feature__area-2 {
  background-color: var(--pink);
}
.feature__top {
  padding-bottom: 65px;
  border-bottom: 1px solid var(--black);
}
@media only screen and (max-width: 767px) {
  .feature__top {
    border-bottom: none;
  }
}
@media only screen and (max-width: 767px) {
  .feature__btm {
    padding-bottom: 15px;
  }
}
.feature__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  padding-left: 85px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .feature__text {
    padding-left: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__text {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__text {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .feature__text {
    padding-left: 0;
    padding-top: 30px;
  }
}
.feature__text p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
}
.feature__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__list {
    -ms-grid-columns: 1fr 0 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}
@media only screen and (max-width: 767px) {
  .feature__list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.feature__item {
  border-right: 1px solid var(--black-2);
  padding: 145px 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .feature__item {
    padding: 90px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__item {
    padding: 90px 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__item {
    padding: 50px 30px;
    border-right: none;
  }
}
@media only screen and (max-width: 767px) {
  .feature__item {
    border-right: none;
    padding: 0 0 50px 0;
  }
}
.feature__item:first-child {
  padding-left: 0;
}
.feature__item:last-child {
  border-right: 0;
  padding-right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__item:nth-child(odd) {
    border-right: 1px solid var(--black-2);
  }
}
.feature__item img {
  margin-bottom: 35px;
}
.feature__item p {
  color: var(--black-2);
}
.feature__title {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  color: var(--black-2);
  padding-bottom: 12px;
}

/*----------------------------------------*/
/*  34. CONTACT CSS START
/*----------------------------------------*/
.contact__area-6 {
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__area-6 .line {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .contact__area-6 .line {
    padding-top: 130px;
  }
}
.contact__text {
  max-width: 330px;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .contact__text {
    padding-top: 30px;
  }
}
.contact__text p {
  font-size: 18px;
  line-height: 1.4;
}
.contact__btm {
  padding-top: 65px;
}
@media only screen and (max-width: 767px) {
  .contact__btm {
    padding-top: 50px;
  }
}
.contact__info {
  padding-top: 15px;
}
@media only screen and (max-width: 767px) {
  .contact__info {
    padding-bottom: 50px;
  }
}
.contact__info h3 {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--black-2);
  padding-bottom: 30px;
}
.contact__info ul li a {
  text-decoration-line: underline;
}
.contact__info ul li a,
.contact__info ul li span {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  display: block;
  margin-bottom: 10px;
}
.contact__form {
  position: relative;
  z-index: 9;
}
.contact__form input,
.contact__form textarea {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
  border: none;
  border-bottom: 1px solid var(--gray);
  padding: 15px 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  outline: 0;
  position: relative;
  z-index: 1;
  background: transparent;
  margin-bottom: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__form input,
.contact__form textarea {
    padding: 10px 0;
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__form input,
.contact__form textarea {
    padding: 10px 0;
    margin-bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .contact__form input,
.contact__form textarea {
    margin-bottom: 20px;
  }
}
.contact__form input:focus,
.contact__form textarea:focus {
  border-bottom: 1px solid var(--black-2);
}
.contact__form input::-webkit-input-placeholder, .contact__form textarea::-webkit-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input::-moz-placeholder, .contact__form textarea::-moz-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input:-ms-input-placeholder, .contact__form textarea:-ms-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input::-ms-input-placeholder, .contact__form textarea::-ms-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form textarea {
  height: 55px;
}
.contact__form #btn_wrapper,
.contact__form .btn_wrapper {
  margin-top: -20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__form #btn_wrapper,
.contact__form .btn_wrapper {
    margin-top: -10px;
  }
}
@media (max-width: 1200px) {
  .contact__form #btn_wrapper,
.contact__form .btn_wrapper {
    margin-top: 10px;
  }
}

/*----------------------------------------*/
/*  35. PRICE CSS START
/*----------------------------------------*/
.price__area {
  background-color: var(--pink-3);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .price__area.pb-140 {
    padding-bottom: 100px;
  }
}
.price__area .sec-title {
  text-transform: uppercase;
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .price__area .sec-title {
    padding-bottom: 40px;
  }
}
.price__area .sec-sub-title {
  text-transform: uppercase;
}
.price__table {
  margin-top: 80px;
}
.price__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  background: var(--white);
  padding: 40px 30px;
  margin-bottom: 20px;
  border-radius: 9px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .price__item {
    gap: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .price__item {
    gap: 30px;
  }
}
.price__item:first-child {
  background-color: var(--black-2);
}
.price__item:first-child .price__icon span {
  color: var(--black-2);
  border-color: var(--pink-2);
  background-color: var(--pink-2);
}
.price__item:first-child .price__type {
  color: var(--gray-2);
  border: 1px solid var(--gray-14);
}
.price__item:first-child .price__title {
  color: var(--white);
}
.price__item:first-child .price__info p {
  color: var(--gray-2);
}
.price__item:first-child .price__amount p {
  color: var(--white);
}
.price__item .best-value {
  font-weight: 500;
  font-size: 12px;
  line-height: 10px;
  color: var(--white);
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: var(--pink-2);
  position: absolute;
  top: -15px;
}
.price__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.price__icon span {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--gray-2);
  border-radius: 5px;
  border: 2px solid var(--gray-13);
  background-color: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.price__icon span i {
  font-size: 20px;
}
.price__type {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--black-6);
  border: 1px solid var(--black-6);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 15px;
}
.price__title {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 5px;
}
.price__info p {
  color: var(--black-6);
}
@media only screen and (max-width: 767px) {
  .price__amount {
    position: absolute;
    top: 0;
    right: 30px;
    padding-top: 30px;
  }
}
.price__amount p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.3;
  color: var(--black-2);
}
.price__amount p span {
  font-size: 16px;
}
.price__btn {
  padding-top: 50px;
}
@media only screen and (max-width: 767px) {
  .price__btn {
    padding-top: 0;
    margin-top: 40px;
  }
}
.price__btn a {
  margin: 0 auto;
  border-color: var(--black-2);
}

/*----------------------------------------*/
/*  36. 404 CSS START
/*----------------------------------------*/
.error__content {
  padding-top: 80px;
  height: 100vh;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error__content {
    padding-top: 100px;
  }
}
.error__content::before {
  position: absolute;
  content: "";
  width: 38px;
  height: 38px;
  top: 70%;
  left: 10%;
  background-image: url(../imgs/icon/6.png);
  background-repeat: no-repeat;
  -webkit-animation: wcZoom 2s infinite;
          animation: wcZoom 2s infinite;
}
.error__content::after {
  position: absolute;
  content: "";
  width: 38px;
  height: 38px;
  top: 10%;
  right: 10%;
  background-image: url(../imgs/icon/3.png);
  background-repeat: no-repeat;
  -webkit-animation: wcZoom 2s infinite;
          animation: wcZoom 2s infinite;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error__content::after {
    top: 20%;
  }
}
@media only screen and (max-width: 767px) {
  .error__content::after {
    top: 15%;
  }
}
.error__content h2 {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.5;
  color: var(--black-2);
  padding-top: 25px;
  padding-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .error__content h2 {
    font-size: 30px;
    line-height: 1.3;
  }
}
.error__content p {
  max-width: 340px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error__content p {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .error__content p {
    padding-bottom: 30px;
  }
}
.error__content a {
  margin: 0 auto;
}
.error__content img {
  max-width: 100%;
}
.error__content #btn_wrapper,
.error__content .btn_wrapper {
  margin-left: 0;
  margin-top: -40px;
}
@media (max-width: 1400px) {
  .error__content #btn_wrapper,
.error__content .btn_wrapper {
    margin-top: 0;
  }
}

/*----------------------------------------*/
/*  37. HOME 5 CSS START
/*----------------------------------------*/
:root {
  --white-6: #d7d7d7;
  --white-7: #B7B7C5;
  --black-14: #323438;
  --lime: #745EFF;
  --lime-2: #5547F5;
  --gray-16: #6B6B6B;
  --gray-17: #F7F7FC;
  --gray-18: #999999;
  --gray-20: #D7D7D7;
  --gray-21: #F2F2F8;
  --gray-22: #FCFCFE;
  --gray-23: #ECECF3;
  --gray-24: #ECECF4;
  --gray-25: #D3D3D3;
}

.btn-together {
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 18px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .btn-together {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .btn-together {
    font-size: 15px;
  }
}
.btn-together i {
  padding-left: 10px;
}
.btn-together::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--white);
  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-together:hover::after {
  left: 0;
  width: 1%;
}
.btn-together:hover {
  color: var(--gray);
}

.header__inner-5 {
  padding: 25px 50px 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .header__inner-5 {
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner-5 {
    padding: 25px 15px 22px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner-5 {
    padding: 25px 15px 22px;
  }
}
.header__area-5 {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99;
}
.header__area-5.sticky-5 {
  background-color: var(--white);
  border-bottom: 1px solid var(--white-2);
}
.header__area-5.sticky-5 .header__inner-5 {
  padding: 20px 50px;
}
@media (max-width: 1200px) {
  .header__area-5.sticky-5 .header__inner-5 {
    padding: 20px 15px;
  }
}

.menu-text-5 {
  color: var(--black-2);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  padding-right: 10px;
}
.menu-text-pp {
  color: var(--black-2);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  padding-right: 10px;
}

.hero__area-5 {
  padding: 190px 35px 113px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .hero__area-5 {
    padding: 135px 0px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-5 {
    padding: 145px 0px 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-5 {
    padding: 155px 0px 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-5 {
    padding: 166px 0px 80px;
    background-size: 90%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-5 {
    padding: 185px 0px 80px;
    background-size: 90%;
  }
}
.hero__area-5 img {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-filter: invert(1);
          filter: invert(1);
  z-index: 0;
}
.hero__content-5 p {
  font-size: 18px;
  color: var(--black-2);
  font-weight: 400;
  line-height: 1.4;
  max-width: 330px;
}
@media only screen and (max-width: 767px) {
  .hero__content-5 p {
    font-size: 16px;
  }
}
.hero__text-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-top: 25px;
}
.hero__title-5 {
  font-size: 80px;

  font-weight: 500;
  line-height: 1;
  color: var(--black-2);
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .hero__title-5 {
    font-size: 30px;
    line-height: 1.2;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title-5 {
    font-size: 36px;
    line-height: 1.2;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title-5 {
    font-size: 40px;
    line-height: 1.4;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title-5 {
    font-size: 45px;
    line-height: 1.4;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__title-5 {
    font-size: 50px;
    line-height: 1.4;
  }
}

.portfolio__area-5 {
  border-top: 1px solid var(--gray-25);
  border-bottom: 1px solid var(--gray-25);
  padding: 56px 45px;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .portfolio__area-5 {
    padding: 56px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-5 {
    padding: 56px 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-5 {
    padding: 56px 0px;
  }
}
.portfolio__area-5::before {
  position: absolute;
  left: 33.3%;
  top: 0;
  width: 1px;
  height: 100%;
  content: "";
  background-color: var(--secondary);
  -webkit-filter: invert(1);
          filter: invert(1);
}
.portfolio__area-5::after {
  position: absolute;
  left: 66.6%;
  top: 0;
  width: 1px;
  height: 100%;
  content: "";
  background-color: var(--secondary);
  -webkit-filter: invert(1);
          filter: invert(1);
}
.portfolio__area-5 .sec-line {
  position: absolute;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: var(--secondary);
  -webkit-filter: invert(1);
          filter: invert(1);
}
.portfolio__inner-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 110px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .portfolio__inner-5 {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__inner-5 {
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__inner-5 {
    gap: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__inner-5 {
    gap: 70px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__inner-5 {
    gap: 80px;
  }
}
.portfolio__item-5 {
  width: 29%;
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen and (max-width: 767px) {
  .portfolio__item-5 {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__item-5 {
    width: 48.5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__item-5 {
    width: 48%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__item-5 {
    width: 28%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__item-5 {
    width: 28%;
  }
}
.portfolio__item-5:hover .portfolio__content-5 {
  opacity: 1;
  right: -50px;
}
.portfolio__item-5 img {
  width: 100%;
  max-width: 100%;
}
.portfolio__content-5 {
  background-color: var(--black-2);
  padding: 20px 30px 22px 30px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 9;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen and (max-width: 767px) {
  .portfolio__content-5 {
    right: 0;
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__content-5 {
    right: 0;
    opacity: 1;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__content-5 {
    right: -70px;
  }
}
.portfolio__name-5 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  padding-bottom: 2px;
  color: var(--white);
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .portfolio__name-5 {
    font-size: 12px;
  }
}
.portfolio__title-5 {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .portfolio__title-5 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__title-5 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__title-5 {
    font-size: 20px;
  }
}

.cta__area-5 {
  position: relative;
  border-bottom: 1px solid var(--secondary);
  -webkit-filter: invert(1);
          filter: invert(1);
}
.cta__area-5::before {
  position: absolute;
  top: 0;
  left: 57%;
  width: 1px;
  height: 100%;
  content: "";
  background-color: var(--secondary);
}
.cta__inner-5 {
  max-width: 1410px;
  margin: 0 auto;
}
.cta__title-5 {
  font-size: 60px;
  color: var(--white);
  font-weight: 500;
  line-height: 1.2;
  padding-bottom: 28px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .cta__title-5 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__title-5 {
    font-size: 36px;
  }
  .cta__title-5 br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__title-5 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta__title-5 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .cta__title-5 {
    font-size: 50px;
  }
}
.cta__list-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 230px 30px auto;
  grid-template-columns: 230px auto;
  gap: 30px;
}
@media only screen and (max-width: 767px) {
  .cta__list-wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__list-wrapper {
    -ms-grid-columns: 180px 20px auto;
    grid-template-columns: 180px auto;
    gap: 20px;
  }
}
.cta__list-left {
  padding-left: 15px;
}
.cta__list-left li {
  position: relative;
}
.cta__list-left li::before {
  position: absolute;
  top: 0;
  left: -15px;
  width: auto;
  height: auto;
  content: "+";
}
.cta__item-5 h3 {
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
  padding-bottom: 10px;
  text-transform: uppercase;
}
.cta__item-5 li {
  font-size: 18px;
  color: var(--gray-2);
  line-height: 1.5;
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .cta__item-5 li {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__item-5 li {
    font-size: 16px;
  }
}
.cta__btn-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .cta__btn-5 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.footer__area-5 {
  padding: 79px 0px 72px;
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__area-5 {
    padding: 60px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__area-5 {
    padding: 50px 0px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__area-5 {
    padding: 50px 0px;
  }
}
.footer__menu-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .footer__menu-5 {
    gap: 25px;
  }
}
.footer__menu-5 li a {
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.footer__menu-5 li a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--black-2);
}
.footer__menu-5 li a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.footer__menu-5 li a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.footer__menu-5 li a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.footer__menu-5 li a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.footer__menu-5 li a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.footer__menu-5 li a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.footer__menu-5 li a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.footer__menu-5 li a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.footer__menu-5 li a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.footer__menu-5 li a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.footer__menu-5 li a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.footer__menu-5 li a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.footer__menu-5 li a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.footer__menu-5 li a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.footer__menu-5 li a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.footer__menu-5 li a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.footer__menu-5 li a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.footer__menu-5 li a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.footer__menu-5 li a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.footer__menu-5 li a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.footer__menu-5 li a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.footer__menu-5 li a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.footer__menu-5 li a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.footer__menu-5 li a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.footer__menu-5 li a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.footer__menu-5 li a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.footer__menu-5 li a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.footer__menu-5 li a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.footer__menu-5 li a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.footer__menu-5 li a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.footer__menu-5 li a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.footer__menu-5 li a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.footer__menu-5 li a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.footer__menu-5 li a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.footer__menu-5 li a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.footer__menu-5 li a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.footer__menu-5 li a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.footer__menu-5 li a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.footer__menu-5 li a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.footer__menu-5 li a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.footer__menu-5 li a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.footer__menu-5 li a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.footer__menu-5 li a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.footer__menu-5 li a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.footer__menu-5 li a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.footer__menu-5 li a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.footer__menu-5 li a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.footer__menu-5 li a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.footer__menu-5 li a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.footer__menu-5 li a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.footer__menu-5 li a:hover {
  --y: -4px;
}
.footer__menu-5 li a:hover span {
  --m: calc(16px * -1);
}
.footer__copyright-4 {
  color: var(--gray-2);
  font-size: 16px;
  font-weight: 400;
}
.footer__copyright-4 a {
  color: var(--black-2);
}
.footer__copyright-4 a:hover {
  color: var(--gray);
}

/*----------------------------------------*/
/*  38. FOOTER CSS START
/*----------------------------------------*/
.footer__area {
  overflow: hidden;
}
.footer__area-2 {
  background-image: url(../imgs/shape/4.png);
  background-repeat: no-repeat;
  background-position: top right;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__area-2 {
    background-size: 380px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__area-2 {
    background-size: 350px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__area-2 {
    background-size: 200px;
  }
}
.footer__area-3 {
  background-color: var(--black-2);
}
.footer__watermark {
  position: absolute;
  left: 53.17%;
  bottom: -55px;
  transform: translateX(-50%);
  font-size: 200px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 10px;
  color: #202020;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__watermark {
    left: 52.22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__watermark {
    font-size: 120px;
    bottom: -33px;
    left: 46.59%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__watermark {
    font-size: 120px;
    bottom: -33px;
    left: 67.06%;
  }
}
@media only screen and (max-width: 767px) {
  .footer__watermark {
    font-size: 65px;
    bottom: -18px;
    left: 42.9%;
  }
}
.footer__row {
  margin-left: -500px;
}
@media only screen and (max-width: 767px) {
  .footer__row {
    margin-left: 0;
    margin-right: 0;
  }
}
.footer__top {
  text-align: right;
}
.footer__top img {
  margin-bottom: -380px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__top img {
    margin-bottom: -300px;
    width: 90%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__top img {
    margin-bottom: -250px;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .footer__top img {
    margin-bottom: 0;
    width: 100%;
  }
}
.footer__top-2 {
  padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  .footer__top-2 {
    padding-bottom: 50px;
  }
}
.footer__top-3 {
  border-bottom: 1px solid var(--black-6);
}
.footer__top-wrapper-3 {
  padding: 0 50px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 30% 10% auto;
  grid-template-columns: 30% 10% auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__top-wrapper-3 {
    -ms-grid-columns: 35% 20px 15% 20px auto;
    grid-template-columns: 35% 15% auto;
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__top-wrapper-3 {
    -ms-grid-columns: 35% 20px 20% 20px auto;
    grid-template-columns: 35% 20% auto;
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__top-wrapper-3 {
    -ms-grid-columns: 35% 25% auto;
    grid-template-columns: 35% 25% auto;
  }
}
@media only screen and (max-width: 767px) {
  .footer__top-wrapper-3 {
    padding: 0 15px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.footer__middle-2 {
  border-top: 1px solid var(--white-2);
  border-bottom: 1px solid var(--white-2);
  padding: 95px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__middle-2 {
    padding: 60px 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__middle-2 {
    padding: 50px 0;
  }
}
.footer__location-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__location-2 {
    gap: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__location-2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__location-2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
  }
}
.footer__location-2 .location h3 {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--black-2);
  padding-bottom: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__btm {
    padding-left: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__btm {
    padding-left: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__btm {
    background-color: var(--black-2);
  }
  .footer__btm .container {
    padding: 0;
    background-color: var(--black-2);
  }
}
.footer__btm-2 {
  padding: 50px 0;
}
@media only screen and (max-width: 767px) {
  .footer__btm-2 {
    padding: 30px 0;
  }
  .footer__btm-2 .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.footer__btm-3 {
  padding: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__btm-3 {
    padding: 40px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__btm-3 {
    padding: 40px 15px;
  }
  .footer__btm-3 .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 767px) {
  .footer__btm-3 {
    padding: 30px 10px;
  }
  .footer__btm-3 .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.footer__inner {
  background-color: var(--black-2);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[12];
  grid-template-columns: repeat(12, 1fr);
  padding-left: 350px;
  position: relative;
  z-index: 9;
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__inner {
    padding-left: 512px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__inner {
    padding-left: 450px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__inner {
    padding-top: 100px;
    padding-left: 410px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__inner {
    padding-left: 470px;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__inner {
    background-color: transparent;
    padding-left: 0;
    padding-top: 60px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.footer__logo {
  margin-bottom: 30px;
}
.footer__logo-3 img {
  margin-bottom: 30px;
}
.footer__logo-3 p {
  max-width: 310px;
  color: var(--gray-2);
}
.footer__sub-title {
  max-width: 850px;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.3;
  color: var(--black-3);
  padding-top: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__sub-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__sub-title {
    font-size: 24px;
  }
}
.footer__widget {
  -ms-grid-column-span: 4;
  grid-column: span 4;
  padding: 140px 0 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget {
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1/5;
    padding: 0 0 50px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget {
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-column: 1/6;
    padding: 0 0 50px 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget {
    padding: 0 0 50px 0;
    -ms-grid-column-span: 4;
    grid-column: span 4;
  }
}
.footer__widget p {
  max-width: 310px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-2);
  margin-bottom: 30px;
}
.footer__widget-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--white);
  padding-bottom: 20px;
}
.footer__widget-2 {
  -ms-grid-column-span: 2;
  grid-column: span 2;
  padding: 140px 0 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget-2 {
    -ms-grid-column: 6;
    -ms-grid-column-span: 3;
    grid-column: 6/9;
    padding: 0 0 50px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget-2 {
    grid-column: 7/-1;
    padding: 0 0 50px 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget-2 {
    padding: 0 0 50px 0;
    -ms-grid-column-span: 4;
    grid-column: span 4;
  }
}
.footer__widget-3 {
  -ms-grid-column-span: 2;
  grid-column: span 2;
  padding: 140px 0 130px;
  margin-right: -30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget-3 {
    grid-column: 9/-1;
    padding: 0 50px 50px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget-3 {
    -ms-grid-column-span: 6;
    grid-column: span 6;
    padding: 50px 60px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget-3 {
    padding: 0 0 50px 0;
  }
}
.footer__widget-4 {
  -ms-grid-column-span: 4;
  grid-column: span 4;
  -ms-grid-row-span: 2;
  grid-row: span 2;
  background-color: var(--black-4);
  padding: 135px 70px 30px;
  text-align: center;
  margin-left: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__widget-4 {
    padding: 130px 30px 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__widget-4 {
    padding: 130px 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* grid-column: 7/-1 used to overlap .footer__widget-2 (6/9) and
     .footer__widget-3 (9/-1), which both sit in row 1 - since this card
     also keeps the base rule's grid-row: span 2, the grid auto-placement
     algorithm couldn't fit it in row 1 and pushed it down to its own
     row 2-3, floating disconnected from the columns above with a large
     empty gap to its left. Give it the full width on its own row instead,
     below the copyright/legal row (see the .footer__copyright and
     .footer__legal overrides below, which now share row 2 to make room). */
  .footer__widget-4 {
    grid-column: 1/-1;
    grid-row: 3;
    padding: 50px;
    margin-left: 0;
    margin-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget-4 {
    -ms-grid-column-span: 6;
    grid-column: span 6;
    padding: 50px 30px;
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget-4 {
    padding: 30px;
    margin-left: 0;
  }
}
.footer__widget-4 .project-title {
  font-weight: 400;
  font-size: 36px;
  line-height: 1.3;
  color: var(--white);
  padding-bottom: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__widget-4 .project-title {
    font-size: 30px;
  }
}
.footer__widget-4 a {
  color: var(--gray-2);
  border-color: var(--secondary);
  margin: 0 auto;
  margin-bottom: 20px;
}
.footer__widget-4 .contact-time {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
  padding-bottom: 3px;
}
.footer__widget-4 .contact-day {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gray-2);
}
.footer__widget-4-cta {
  text-align: left;
}
.footer-cta-icon {
  display: block;
  width: 44px;
  height: auto;
  margin-bottom: 22px;
}
.footer__widget-4-cta .project-divider {
  display: block;
  width: 50px;
  height: 3px;
  background: #005fcc;
  border-radius: 3px;
  margin-bottom: 25px;
}
.footer__widget-4-cta .project-text {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px;
}
.footer-cta-wrap {
  margin-bottom: 25px;
}
.footer__widget-4 .footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  color: #5d5d5d;
  border: 2px solid #5d5d5d;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 30px 10px 10px;
  border-radius: 10px;
  transition: all 0.3s;
  margin: 0;
}
.footer__widget-4 .footer-cta-btn:hover {
  background: #005fcc;
  border-color: #005fcc;
  color: #fff;
}
.footer-cta-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid #5d5d5d;
  border-radius: 50%;
  color: #5d5d5d;
  font-size: 15px;
  flex: 0 0 auto;
  transition: all 0.3s;
}
.footer__widget-4 .footer-cta-btn:hover .footer-cta-btn-icon {
  border-color: #fff;
  color: #fff;
}
.footer__widget-4-cta .project-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-2);
  font-size: 14px;
  margin: 0;
}
.footer__widget-4-cta .project-note i {
  color: #005fcc;
}
.footer__social li {
  display: inline-block;
  padding-right: 15px;
}
.footer__social li a {
  display: inline-block;
  color: var(--gray-2);
  font-size: 20px;
}
.footer__social li a:hover {
  color: var(--white);
}
.footer__social-3 {
  border-left: 1px solid var(--black-6);
  border-right: 1px solid var(--black-6);
}
@media only screen and (max-width: 767px) {
  .footer__social-3 {
    margin-top: 50px;
    border-top: 1px solid var(--black-6);
    border-bottom: 1px solid var(--black-6);
  }
}
.footer__social-3 li {
  display: block;
  border-bottom: 1px solid var(--black-6);
}
.footer__social-3 li:last-child {
  border-bottom: 0;
}
.footer__social-3 li a {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  padding: 38px 0;
  background-color: transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__social-3 li a {
    padding: 30px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__social-3 li a {
    padding: 30px 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__social-3 li a {
    padding: 30px 0;
  }
}
.footer__social-3 li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.footer__link li {
  display: block;
  padding-bottom: 15px;
}
.footer__link li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
  line-height: 18px;
  text-transform: capitalize;
}
.footer__link li a:hover {
  color: var(--white);
}
.footer__contact {
  display: block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
}
.footer__contact li {
  padding-bottom: 15px;
}
.footer__contact li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
}
.footer__contact li a.phone {
  color: var(--white);
  position: relative;
}
.footer__contact li a.phone::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0px;
  background-color: var(--white);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.footer__contact li a.phone:hover::after {
  width: 0%;
}
.footer__widget-3-clean .footer__contact li a.phone::after {
  display: none;
}
.footer__contact li a:hover {
  color: var(--white);
}
.footer__contact-3 {
  text-align: right;
  padding-top: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__contact-3 {
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__contact-3 {
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__contact-3 {
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@media only screen and (max-width: 767px) {
  .footer__contact-3 {
    text-align: center;
    margin-bottom: 50px;
    padding-top: 60px;
  }
}
.footer__contact-3 a {
  font-weight: 400;
  font-size: 180px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__contact-3 a {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__contact-3 a {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__contact-3 a {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__contact-3 a {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__contact-3 a {
    font-size: 50px;
  }
}
.footer__copyright {
  -ms-grid-column-span: 4;
  grid-column: span 4;
  border-top: 1px solid var(--gray-6);
  margin-left: -66px;
  padding: 35px 0 35px 66px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__copyright {
    margin-left: -35px;
    padding: 35px 0 35px 35px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__copyright {
    margin-left: -54px;
    padding: 35px 0 35px 54px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Paired with .footer__legal below: giving both an explicit grid-row: 2
     (instead of leaving this one to auto-place) keeps them side by side
     on their own row, clear of the full-width CTA card now on row 3 (see
     the .footer__widget-4 override above) - auto-placement otherwise
     pushed this below the CTA card, after the legal links instead of
     before them. */
  .footer__copyright {
    border-top: 0;
    margin-left: 0;
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1/7;
    -ms-grid-row: 2;
    grid-row: 2;
    padding: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright {
    grid-column: 1/-1;
    text-align: center;
    border-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__copyright {
    grid-column: 1/-1;
    -ms-grid-row: 7;
    grid-row: 7;
    text-align: center;
    border-top: 0;
    padding-top: 0;
  }
}
.footer__copyright p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);

  max-width: 233px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright p {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .footer__copyright p {
    max-width: 100%;
  }
}
.footer__copyright p a {
  color: var(--white);
}
.footer__copyright p a:hover {
  color: var(--gray);
}
.footer__legal {
  -ms-grid-column-span: 4;
  grid-column: span 4;
  border-top: 1px solid var(--gray-6);
  padding: 35px 0;
  margin-right: -60px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.footer__legal ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal ul li a {
  color: var(--gray-2);
  font-size: 15px;
  transition: color 0.3s;
}
.footer__legal ul li a:hover {
  color: var(--white);
}
.footer__copyright-tight {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer__legal-tight {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Moved from cols 1/7 to 7/-1 (right-aligned, next to .footer__copyright
     at 1/7 - see its override above) so the two sit side by side on row 2
     instead of .footer__legal's old 1/7 span overlapping copyright's
     column range and pushing copyright's auto-placement down past the
     CTA card on row 3. */
  .footer__legal {
    -ms-grid-column: 7;
    -ms-grid-column-span: 6;
    grid-column: 7/-1;
    -ms-grid-row: 2;
    grid-row: 2;
    padding: 0 0 20px 40px;
    border-top: 0;
    margin-right: 0;
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__legal {
    -ms-grid-column-span: 6;
    grid-column: span 6;
    -ms-grid-row: 3;
    grid-row: 3;
    border-top: 0;
    padding: 0 20px 20px 0;
    margin-right: 0;
    justify-content: flex-start;
  }
}
@media only screen and (max-width: 767px) {
  .footer__legal {
    margin-right: 0;
    padding: 0 0 30px;
    border-top: 0;
    justify-content: center;
  }
}
.footer__copyright-2 p {
  max-width: 235px;
}
@media only screen and (max-width: 767px) {
  .footer__copyright-2 p {
    max-width: 100%;
    padding-top: 50px;
    text-align: center;
  }
}
.footer__copyright-2 p a {
  color: var(--black-2);
}
.footer__copyright-2 p a:hover {
  color: var(--gray-2);
}
.footer__copyright-3 p {
  color: var(--white);
  max-width: 235px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright-3 p {
    max-width: 100%;
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .footer__copyright-3 p {
    max-width: 100%;
    text-align: center;
  }
}
.footer__copyright-3 p a {
  color: var(--white);
}
.footer__copyright-3 p a:hover {
  color: var(--gray-2);
}
.footer__copyright-8 {
  padding: 20px 100px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__copyright-8 {
    padding: 20px 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__copyright-8 {
    padding: 20px 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__copyright-8 {
    padding: 20px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright-8 {
    padding: 20px 15px;
  }
}
.footer__copyright-8 p {
  max-width: 235px;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .footer__copyright-8 p {
    max-width: 100%;
    text-align: center;
  }
}
.footer__copyright-8 p a {
  color: var(--black-2);
}
.footer__copyright-8 p a:hover {
  color: var(--gray-2);
}
.footer__nav {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (max-width: 767px) {
  .footer__nav {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.footer__nav-2 {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__nav-2 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (max-width: 767px) {
  .footer__nav-2 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.footer__subscribe {
  -ms-grid-column-span: 4;
  grid-column: span 4;
  border-top: 1px solid var(--gray-6);
  padding: 35px 0;
  margin-right: -60px;
  padding-right: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__subscribe {
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1/7;
    -ms-grid-row: 2;
    grid-row: 2;
    padding: 0 40px 0 0;
    border-top: 0;
    margin-right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe {
    -ms-grid-column-span: 6;
    grid-column: span 6;
    -ms-grid-row: 3;
    grid-row: 3;
    border-top: 0;
    padding: 0 20px 0 0;
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer__subscribe {
    margin-right: 0;
    padding-right: 0;
    border-top: 0;
  }
}
.footer__subscribe form {
  position: relative;
  max-width: 450px;
  width: 100%;
  margin-left: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe form {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .footer__subscribe form {
    max-width: 100%;
  }
}
.footer__subscribe input {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--gray-2);
  background-color: var(--black-4);
  width: 100%;
  border: none;
  border-radius: 0;
  outline: none;
  padding: 21px 50px 21px 15px;
}
.footer__subscribe input::-webkit-input-placeholder {
  opacity: 1;
  color: var(--gray-2);
}
.footer__subscribe input::-moz-placeholder {
  opacity: 1;
  color: var(--gray-2);
}
.footer__subscribe input:-ms-input-placeholder {
  opacity: 1;
  color: var(--gray-2);
}
.footer__subscribe input::-ms-input-placeholder {
  opacity: 1;
  color: var(--gray-2);
}
.footer__subscribe input::placeholder {
  opacity: 1;
  color: var(--gray-2);
}
.footer__subscribe .subs-btn {
  position: absolute;
  right: 20px;
  top: 16px;
  background-color: transparent;
  border: none;
  color: var(--white);
}
.footer__subscribe-2 {
  position: relative;
  padding-left: 90px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe-2 {
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .footer__subscribe-2 {
    padding-left: 0;
    margin-top: 50px;
  }
}
.footer__subscribe-2::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 120px;
  left: -20px;
  top: -15px;
  background-color: var(--white-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe-2::before {
    height: 100%;
    top: 0;
  }
}
.footer__subscribe-2 input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--black-2);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;
  color: var(--black-2);
  padding: 20px 80px 20px 0;
  outline: none;
}
@media only screen and (max-width: 767px) {
  .footer__subscribe-2 input {
    font-size: 18px;
  }
}
.footer__subscribe-2 input::-webkit-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.footer__subscribe-2 input::-moz-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.footer__subscribe-2 input:-ms-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.footer__subscribe-2 input::-ms-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.footer__subscribe-2 input::placeholder {
  color: var(--black-2);
  opacity: 1;
}
.footer__subscribe-2 form {
  position: relative;
}
.footer__subscribe-2 .submit {
  position: absolute;
  right: 0;
  top: 10px;
  background: transparent;
  border: none;
}
@media only screen and (max-width: 767px) {
  .footer__subscribe-2 .submit {
    top: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__subscribe-2 .submit img {
    width: 45px;
  }
}

footer #btn_wrapper,
footer .btn_wrapper {
  margin: 0 auto;
}

.contact_title span {
  padding-left: 30px;
}

.footer_categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid var(--gray-11);
  padding-bottom: 58px;
  margin: 0 100px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer_categories {
    margin: 0 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer_categories {
    margin: 0 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer_categories {
    margin: 0 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer_categories {
    margin: 0 15px;
  }
}
@media only screen and (max-width: 767px) {
  .footer_categories {
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.footer_categories::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gray-11);
}
@media only screen and (max-width: 767px) {
  .footer_categories::before {
    top: 14%;
  }
}
.footer_categories h4 {
  font-size: 16px;
  color: var(--black-2);
  text-transform: capitalize;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_item {
    width: 100%;
  }
}
.categories_item .cat_title {
  margin-bottom: 74px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_item .cat_title {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .categories_item .cat_title {
    margin-bottom: 50px;
    margin-top: 30px;
  }
}
.categories_item input {
  background-color: transparent;
  padding: 5px 80px 20px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_item input {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .categories_item input {
    padding: 15px 80px 15px 0;
  }
}
.categories_item .footer__subscribe-2 {
  padding-left: 0;
}
@media only screen and (max-width: 767px) {
  .categories_item .footer__subscribe-2 {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_item .footer__subscribe-2 input {
    width: inherit;
  }
}
.categories_item .footer__subscribe-2::before {
  display: none;
}

.cat_links li {
  padding-bottom: 12px;
}
.cat_links li a {
  display: inline-block;
  padding: 1px 0;
  font-size: 24px;
  line-height: 16px;
  color: var(--black-2);
  text-transform: uppercase;
}
.cat_links li a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--black-3);
}
.cat_links li a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.cat_links li a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.cat_links li a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.cat_links li a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.cat_links li a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.cat_links li a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.cat_links li a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.cat_links li a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.cat_links li a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.cat_links li a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.cat_links li a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.cat_links li a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.cat_links li a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.cat_links li a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.cat_links li a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.cat_links li a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.cat_links li a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.cat_links li a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.cat_links li a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.cat_links li a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.cat_links li a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.cat_links li a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.cat_links li a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.cat_links li a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.cat_links li a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.cat_links li a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.cat_links li a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.cat_links li a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.cat_links li a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.cat_links li a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.cat_links li a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.cat_links li a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.cat_links li a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.cat_links li a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.cat_links li a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.cat_links li a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.cat_links li a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.cat_links li a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.cat_links li a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.cat_links li a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.cat_links li a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.cat_links li a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.cat_links li a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.cat_links li a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.cat_links li a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.cat_links li a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.cat_links li a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.cat_links li a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.cat_links li a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.cat_links li a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.cat_links li a:hover {
  --y: -4px;
}
.cat_links li a:hover span {
  --m: calc(16px * -1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cat_links li a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .cat_links li a {
    font-size: 16px;
  }
}

.categories_item.l_item {
  -ms-flex-preferred-size: 36%;
      flex-basis: 36%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .categories_item.l_item .cat_title {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .categories_item.l_item {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  .categories_item.l_item .cat_title {
    margin-top: 50px;
    margin-bottom: 0;
  }
}

/*----------------------------------------*/
/*  00. PRELOADER CSS START
/*----------------------------------------*/
@-webkit-keyframes wcLoading {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    background: var(--white);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    background: var(--primary);
  }
  100% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    background: transparent;
  }
}
@keyframes wcLoading {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    background: var(--white);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    background: var(--primary);
  }
  100% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    background: transparent;
  }
}
.preloader {
  width: 100%;
  height: 100vh;
  background-color: var(--black-2);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
.loading .bar {
  width: 6px;
  height: 60px;
  background: var(--white);
  display: inline-block;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: wcLoading 1.5s ease-in-out infinite;
          animation: wcLoading 1.5s ease-in-out infinite;
}
.loading .bar1 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.loading .bar2 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.loading .bar3 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.loading .bar4 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.loading .bar5 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.loading .bar6 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.loading .bar7 {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.loading .bar8 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

:root {
  --white-6: #d7d7d7;
  --white-7: #B7B7C5;
  --black-14: #323438;
  --black-15: #2C2C2C;
  --lime: #745EFF;
  --lime-2: #5547F5;
  --gray-16: #6B6B6B;
  --gray-17: #F7F7FC;
  --gray-18: #999999;
  --gray-20: #D7D7D7;
  --gray-21: #F2F2F8;
  --gray-22: #FCFCFE;
  --gray-23: #ECECF3;
  --gray-24: #ECECF4;
}

main {
  overflow: hidden;
}

.line_4 {
  position: relative;
}
.line-col-4 div {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--white-2);
}
.line-col-4 div:nth-child(2) {
  left: 33.33%;
}
.line-col-4 div:nth-child(3) {
  left: 66.66%;
}
.line-col-4 div:nth-child(4) {
  left: 100%;
}

.portfolio6__line .line-col-4 div {
  height: 1000px;
  top: unset;
  bottom: 0;
}

.btn-started {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  padding: 17px 36px 16px;
  color: var(--white);
  border-radius: 5px;
  background: var(--lime);
  display: inline-block;
}
.btn-started i {
  padding-left: 10px;
}
.btn-started:hover {
  color: var(--white);
  background-color: #FF977B;
}
.btn-view {
  font-weight: 500;
  line-height: 1.3;
  color: var(--black-2);
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-view i {
  padding-left: 10px;
}
.btn-view::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--black-2);
  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-view:hover::after {
  left: 0;
  width: 1%;
}
.btn-view:hover {
  color: var(--lime-2);
}
.btn-extra {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  padding: 9px 14px 11px;
  border-radius: 5px;
  background-color: var(--black-2);
  border: 1px solid var(--black-2);
}
.btn-extra:hover {
  color: var(--black);
  background-color: transparent;
}

.title-wrapper-6 p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
}
@media only screen and (max-width: 767px) {
  .title-wrapper-6 p {
    font-size: 16px;
  }
}

.sec-subtile-6 {
  font-size: 16px;
  color: var(--black-2);
  line-height: 1.3;
  padding: 2px 14px 3px;
  font-weight: 400;
  border-radius: 16px;
  border: 1px solid var(--gray-16);
  display: inline-block;
  margin-bottom: 17px;
}
@media only screen and (max-width: 767px) {
  .sec-subtile-6 {
    margin-bottom: 10px;
  }
}
.sec-title-6 {
  font-size: 50px;
  color: var(--black-2);
  font-weight: 500;
  line-height: 1.13;
  padding-bottom: 15px;
}
@media only screen and (max-width: 767px) {
  .sec-title-6 {
    font-size: 30px;
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-6 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-6 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title-6 {
    font-size: 45px;
  }
}

.hero__area-6 {
  position: relative;
}
.hero__area-6 .shape-4 {
  position: absolute;
  bottom: -60px;
  left: 180px;
  z-index: 0;
}
@media only screen and (max-width: 767px) {
  .hero__area-6 .shape-4 {
    max-width: 260px;
    left: 0;
  }
}
.hero__title-6 {
  font-size: 100px;
  line-height: 1;
  font-weight: 600;
  color: var(--black-2);
  padding-bottom: 24px;
}
@media only screen and (max-width: 767px) {
  .hero__title-6 {
    font-size: 40px;
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title-6 {
    font-size: 45px;
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title-6 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title-6 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__title-6 {
    font-size: 80px;
  }
}
.hero__arrow-icon {
  position: absolute;
  right: 0;
}
@media only screen and (max-width: 767px) {
  .hero__arrow-icon {
    top: 83%;
    right: 10%;
    -webkit-transform: rotate(62deg);
            transform: rotate(62deg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__arrow-icon {
    right: -15%;
  }
}
.hero__content-6 {
  padding-top: 260px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__content-6 {
    padding-top: 210px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content-6 {
    padding-top: 130px;
  }
}
.hero__content-6 p {
  font-size: 20px;
  padding-bottom: 48px;
  line-height: 1.5;
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .hero__content-6 p {
    font-size: 16px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-6 p br {
    display: none;
  }
}
.hero__right-6 {
  padding-top: 130px;
}
@media only screen and (max-width: 767px) {
  .hero__right-6 {
    padding-top: 40px;
  }
}
.hero__right-6 img {
  margin-left: 3px;
  max-width: inherit;
}
@media (max-width: 1365px) {
  .hero__right-6 img {
    max-width: 100%;
  }
}
.hero__shape {
  position: absolute;
  top: 22%;
  left: 0;
}
@media only screen and (max-width: 767px) {
  .hero__shape {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__shape {
    top: 13%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__shape {
    top: 9%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__shape {
    top: 10%;
  }
}
.hero__shape-2 {
  position: absolute;
  right: 7%;
  bottom: 30%;
}
@media only screen and (max-width: 767px) {
  .hero__shape-2 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__shape-2 {
    bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__shape-2 {
    bottom: -8%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__shape-2 {
    right: 3%;
    bottom: 7%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__shape-2 {
    bottom: -7%;
    right: 7%;
  }
}
.hero__shape-3 {
  position: absolute;
  left: 4%;
  bottom: 7%;
}
@media only screen and (max-width: 767px) {
  .hero__shape-3 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__shape-3 {
    left: 7%;
    bottom: -20%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__shape-3 {
    bottom: -13%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__shape-3 {
    left: 7%;
    bottom: 7%;
  }
}

.workflow__area-4 {
  overflow: hidden;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .workflow__area-4 .pb-1230 {
    padding-bottom: 60px;
  }
}
.workflow__item-4 {
  padding-top: 64px;
}
@media only screen and (max-width: 767px) {
  .workflow__item-4 {
    padding-top: 60px;
  }
}
.workflow__item-4 img {
  padding-bottom: 30px;
}
.workflow__item-4 p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
  padding: 0px 55px;
}
@media only screen and (max-width: 767px) {
  .workflow__item-4 p {
    padding: 0px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .workflow__item-4 p {
    padding: 0px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .workflow__item-4 p {
    padding: 0px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .workflow__item-4 p {
    padding: 0px;
  }
}
.workflow__title-4 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
  padding-bottom: 19px;
}
@media only screen and (max-width: 767px) {
  .workflow__title-4 {
    font-size: 20px;
    padding-bottom: 15px;
  }
}

.feature__area-6 {
  overflow: hidden;
  background-color: var(--gray-17);
}
.feature__content img {
  margin-top: -90px;
}
@media only screen and (max-width: 767px) {
  .feature__content img {
    margin-top: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__content img {
    width: 100%;
  }
}
.feature__content-right {
  background-color: #1E2024;
  padding: 143px 60px 0px 110px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .feature__content-right {
    padding: 20px;
    margin-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__content-right {
    padding: 80px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__content-right {
    padding: 100px 20px 0px 25px;
  }
}
.feature__content-right p {
  font-size: 18px;
  color: var(--gray-18);
  line-height: 1.5;
  padding-bottom: 25px;
  padding-right: 242px;
}
@media only screen and (max-width: 767px) {
  .feature__content-right p {
    padding-right: 0;
    padding-bottom: 15px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__content-right p {
    padding-right: 0;
    padding-bottom: 15px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__content-right p {
    padding-right: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .feature__content-right p {
    padding-right: 145px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .feature__content-right p {
    padding-right: 225px;
  }
}
.feature__content-right p span {
  color: var(--white);
}
.feature__content-left {
  padding-top: 143px;
}
@media only screen and (max-width: 767px) {
  .feature__content-left {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__content-left {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__content-left {
    padding-top: 100px;
  }
}
.feature__title-6 {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--white);
  padding-bottom: 22px;
  padding-left: 60px;
}
.feature__title-6::before {
  position: absolute;
  top: 13px;
  left: 0;
  width: 50px;
  height: 1px;
  content: "";
  background: var(--white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__content img {
    width: 100%;
    margin-top: 0;
  }
}
.feature__content-btm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 114px;
  height: 100%;
  margin-left: 110px;
}
@media only screen and (max-width: 767px) {
  .feature__content-btm {
    gap: 20px;
    margin-left: 0;
    padding: 30px 0px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__content-btm {
    gap: 20px;
    margin-left: 0;
    padding: 30px 0px 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__content-btm {
    gap: 20px;
    margin-left: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .feature__content-btm {
    gap: 20px;
  }
}
.feature__content-item img {
  padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .feature__content-item img {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .feature__content-item img {
    max-width: 100%;
  }
}
.feature__content-item h5 {
  font-size: 18px;
  color: var(--black-2);
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 15px;
}
.feature__content-item p {
  font-weight: 300;
  color: var(--black-3);
}
.feature__img-1 {
  position: absolute;
  top: 22%;
  right: 10%;
}
@media only screen and (max-width: 767px) {
  .feature__img-1 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__img-1 {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__img-1 {
    top: 9%;
    right: 4%;
  }
}
.feature__img-2 {
  margin-left: 100px;
}
@media only screen and (max-width: 767px) {
  .feature__img-2 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__img-2 {
    display: none;
  }
}
.feature__img-3 {
  position: absolute;
  right: 6%;
  bottom: 5%;
}
@media only screen and (max-width: 767px) {
  .feature__img-3 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature__img-3 {
    display: none;
  }
}

.service__title-wrapper-4 {
  width: 75%;
}
.service__right-4 p {
  font-size: 18px;
  color: var(--black-3);
  padding-bottom: 30px;
  padding-right: 258px;
}
@media only screen and (max-width: 767px) {
  .service__right-4 p {
    font-size: 16px;
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__right-4 p {
    padding-right: 0;
    padding-bottom: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__right-4 p {
    padding-right: 30px;
  }
}
.service__right-4 p span {
  color: var(--black-2);
}
.service__img-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .service__img-left img {
    width: 100%;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__img-left img {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__img-left img {
    width: 100%;
  }
}
.service__inner-4 {
  margin-top: -20px;
}
@media only screen and (max-width: 767px) {
  .service__inner-4 {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__inner-4 {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__inner-4 {
    margin-top: 40px;
  }
}
.service__item-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 62px;
  padding: 12px 0px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-bottom: 1px solid var(--gray-20);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-4 {
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-4 {
    gap: 20px;
  }
}
.service__item-4:first-child {
  border-top: 1px solid var(--gray-20);
}
.service__item-4:hover .service__item-icon {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 1;
  visibility: visible;
}
.service__item-4:hover .service__item-title {
  color: var(--lime);
}
.service__item-number {
  font-size: 18px;
  font-weight: 300;
  color: var(--lime-2);
}
.service__item-title {
  font-size: 60px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .service__item-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__item-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__item-title {
    font-size: 50px;
  }
}
.service__item-icon {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen and (max-width: 767px) {
  .service__item-icon {
    opacity: 1;
  }
}
.service__item-icon i {
  font-size: 23px;
  color: var(--black-2);
}

.faq__area-4 {
  background-image: url(../imgs/bg/4/s1.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  overflow: hidden;
  background-color: #1E2024;
}
.faq__area-4 .sec-title-6 {
  color: var(--white);
  max-width: 630px;
  line-height: 1.15;
}
.faq__area-4 .sec-subtile-6 {
  color: var(--white);
}
.faq__list-4 {
  padding-top: 30px;
}
.faq__list-4 .accordion-body {
  padding-left: 0;
  min-height: 100px;
}
.faq__list-4 .accordion-body p {
  color: var(--gray-2);
  font-size: 18px;
}
@media (max-width: 1023px) {
  .faq__list-4 .accordion-body p {
    font-size: 16px;
  }
}
.faq__list-4 .accordion-body p span {
  color: var(--white);
}
.faq__list-4 .accordion-item {
  border: none;
  border-radius: 0;
  background-color: transparent;
}
.faq__list-4 .accordion-button {
  background-color: transparent;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  border-radius: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.faq__list-4 .accordion-button.collapsed::after {
  background-image: none;
  content: "+";
  font-weight: 300;
  font-size: 30px;
  top: 1px;
  position: absolute;
  left: 0;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.faq__list-4 .accordion-button:not(.collapsed) {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
}
.faq__list-4 .accordion-button:not(.collapsed)::after {
  background-image: none;
  content: "-";
  font-weight: 300;
  font-size: 30px;
  top: 1px;
  position: absolute;
  left: 0;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.faq__list-4 .accordion-button:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.faq__sec-title p {
  font-size: 18px;
  color: var(--gray-2);
  padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .faq__sec-title p {
    font-size: 16px;
  }
}
.faq__sec-title .btn-view {
  color: var(--white);
}
.faq__sec-title .btn-view::after {
  background-color: var(--white);
}
.faq__sec-title-title-4 {
  padding-right: 105px;
}
.faq__img6-1 {
  position: absolute;
  bottom: 0;
  left: 35%;
  z-index: 0;
}
.faq__img6-2 {
  position: absolute;
  top: 0;
  left: 51px;
  z-index: 0;
}
@media only screen and (max-width: 767px) {
  .faq__img6-2 {
    display: none;
  }
}

.solution__area-4 {
  overflow: hidden;
  background-color: #1E2024;
  background-image: url(../imgs/bg/4/solution-bg.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 179px 0px 170px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .solution__area-4 {
    padding: 60px 0px;
  }
  .solution__area-4::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: var(--black-2);
    opacity: 0.6;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__area-4 {
    padding: 80px 0px;
    background-size: 380px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__area-4 {
    padding: 120px 0px;
    background-size: 500px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .solution__area-4 {
    padding: 90px 0px;
    background-size: 52%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__area-4 {
    padding: 150px 0px 110px;
    background-size: 55%;
  }
}
.solution__content .sec-title-6 {
  color: var(--white);
}
.solution__content .sec-subtile-6 {
  color: var(--white);
}
.solution__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 270px auto;
  grid-template-columns: 270px auto;
  border-top: 1px solid var(--black-14);
  margin-top: 16px;
  padding-top: 24px;
}
@media only screen and (max-width: 767px) {
  .solution__list {
    -ms-grid-columns: 180px auto;
    grid-template-columns: 180px auto;
    border-top: 1px solid var(--white-6);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .solution__list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--white-6);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .solution__list {
    -ms-grid-columns: 250px 300px;
    grid-template-columns: 250px 300px;
    border-top: 1px solid var(--white-6);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .solution__list {
    -ms-grid-columns: 250px 300px;
    grid-template-columns: 250px 300px;
    border-top: 1px solid var(--white-6);
  }
}
.solution__list li {
  font-size: 18px;
  color: var(--white);
  font-weight: 400;
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
}
@media only screen and (max-width: 767px) {
  .solution__list li {
    font-size: 14px;
  }
}
.solution__list li::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  content: "+";
}

.blog__area-4 {
  overflow: hidden;
}
.blog__area-4 .sec-title-wrapper p {
  font-size: 18px;
  color: var(--black-13);
  padding-right: 80px;
  display: inline-block;
  margin-bottom: 55px;
}
@media only screen and (max-width: 767px) {
  .blog__area-4 .sec-title-wrapper p {
    font-size: 16px;
    margin-bottom: 20px;
    padding-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__area-4 .sec-title-wrapper p {
    font-size: 16px;
    margin-bottom: 20px;
    padding-right: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__area-4 .sec-title-wrapper p {
    padding-right: 30px;
  }
}
.blog__img-4 img {
  width: 100%;
}
.blog__meta-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding-top: 35px;
}
.blog__meta-4 a {
  font-size: 14px;
  color: var(--black-2);
  line-height: 1.3;
  padding: 3px 8px;
  background-color: var(--gray-21);
  font-weight: 400;
}
.blog__meta-4 a:hover {
  color: var(--lime);
}
.blog__meta-4 span {
  font-size: 14px;
  color: var(--black-2);
  line-height: 1.3;
  padding: 3px 8px;
  background-color: var(--gray-21);
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .blog__item-4 {
    margin-top: 50px;
  }
}
.blog__btn-4 {
  font-weight: 500;
  line-height: 1.3;
  color: var(--black-2);
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.blog__btn-4 i {
  padding-left: 10px;
}
.blog__btn-4::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--black-2);
  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.blog__btn-4:hover::after {
  left: 0;
  width: 1%;
}
.blog__btn-4:hover {
  color: var(--lime-2);
}
.blog__title-4 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--black-2);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  padding: 10px 0px 20px;
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .blog__title-4 {
    font-size: 23px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__title-4 {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__title-4 {
    font-size: 20px;
  }
}
.blog__title-4:hover {
  color: var(--lime-2);
}

.cta__area-4 {
  overflow: hidden;
}
.cta__area-4 .btn-started {
  padding: 16px 28px;
}
.cta__inner-4 {
  background-color: #F1E9E3;
  padding: 66px 60px 0px 60px;
  position: relative;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__inner-4 {
    padding: 60px 30px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__inner-4 {
    padding: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .cta__inner-4 {
    padding: 40px 20px;
  }
}
.cta__inner-4 img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__inner-4 img {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .cta__inner-4 img {
    max-width: 80%;
  }
}
.cta__inner-4 .cta-shape {
  position: absolute;
  bottom: 0;
  right: 460px;
  z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__inner-4 .cta-shape {
    bottom: 30px;
    right: 250px;
    max-width: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .cta__inner-4 .cta-shape {
    bottom: 30px;
    right: 20px;
    max-width: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__inner-4 .cta-shape {
    max-width: 120px;
    right: 360px;
  }
}
.cta__inner-4 .cta-shape-2 {
  position: absolute;
  bottom: 60px;
  right: 110px;
  z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__inner-4 .cta-shape-2 {
    right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__inner-4 .cta-shape-2 {
    right: 10px;
    bottom: 120px;
  }
}
.cta__content-4 {
  height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__content-4 img {
    width: 100%;
  }
}
.cta__content-4 p {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 34px;
  margin-top: 15px;
  color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .cta__content-4 p {
    font-size: 16px;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__content-4 p {
    font-size: 16px;
    padding-bottom: 20px;
  }
}
.cta__title-4 {
  font-size: 50px;
  font-weight: 500;
  color: var(--black-2);
  line-height: 1.2;
  padding-top: 10px;
}
@media only screen and (max-width: 767px) {
  .cta__title-4 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__title-4 {
    padding-top: 30px;
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta__title-4 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta__title-4 {
    font-size: 40px;
  }
}

.portfolio__area-4 {
  padding: 0px 45px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .portfolio__area-4 {
    padding: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-4 {
    padding: 0px 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-4 {
    padding: 0px 31px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__area-4 {
    padding: 0px 60px;
  }
}
.portfolio__area-4 .cursor {
  position: absolute;
}
.portfolio__area-4 .cursor.large {
  width: 120px;
  height: 120px;
  font-size: 14px;
}
.portfolio__wrapper-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 30px;
}
@media only screen and (max-width: 767px) {
  .portfolio__wrapper-4 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__wrapper-4 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.portfolio__item-4 img {
  width: 100%;
}
.portfolio__item-4:hover .portfolio__icon-link {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.portfolio__icon-link {
  font-size: 23px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.portfolio__item-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 20px;
}
.portfolio__title-4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black-2);
  padding-bottom: 5px;
}
.portfolio__subtitle-4 {
  font-size: 14px;
  color: var(--black-3);
  font-weight: 400;
}
.portfolio__icon-4 {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 23px;
  color: var(--black-2);
}
.portfolio__sec-title {
  position: absolute;
  bottom: 140px;
}
@media only screen and (max-width: 767px) {
  .portfolio__sec-title {
    position: unset;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__sec-title {
    position: unset;
  }
}
.portfolio__sec-title p {
  font-size: 18px;
  color: var(--black-3);
  max-width: 300px;
}

.testimonial__area-4 {
  overflow: hidden;
  text-align: center;
}
.testimonial__sec-title {
  padding-bottom: 60px;
}
.testimonial__sec-title p {
  font-size: 18px;
  color: var(--black-3);
  max-width: 500px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .testimonial__sec-title p {
    width: 100%;
    font-size: 16px;
  }
}
.testimonial__slide-4 {
  background-color: var(--gray-22);
  padding: 50px 50px 44px 50px;
  text-align: left;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__slide-4 {
    padding: 35px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__slide-4 {
    padding: 35px 30px 30px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .testimonial__slide-4 {
    padding: 35px 30px;
  }
}
.testimonial__slider-4 {
  padding-bottom: 150px;
  height: 100%;
  width: 98%;
  margin-left: 11px;
}
.testimonial__slider-4 .prev-button:hover,
.testimonial__slider-4 .next-button:hover {
  color: var(--lime);
}
@media only screen and (max-width: 767px) {
  .testimonial__slider-4 {
    width: 93%;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__slider-4 {
    width: 97%;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__slider-4 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__slider-4 {
    padding-bottom: 110px;
  }
}
.testimonial__img-4 {
  margin-bottom: 42px;
  border-radius: 100px;
  width: 85px;
  height: auto;
}
.testimonial__feedback-4 {
  font-size: 14px;
  font-weight: 400;
  color: var(--black-2);
  border-radius: 5px;
  padding: 3px 10px;
  margin-bottom: 18px;
  display: inline-block;
  line-height: 1.3;
  background-color: var(--gray-23);
}
.testimonial__info-4 p {
  color: var(--black-3);
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: 19px;
  text-align: left;
}
.testimonial__name-4 {
  font-size: 18px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.3;
}
.testimonial__role-4 {
  font-size: 14px;
  color: var(--black-3);
  font-weight: 400;
}
.testimonial__btn-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 160px;
  padding-top: 68px;
  position: relative;
  z-index: 999;
}
@media only screen and (max-width: 767px) {
  .testimonial__btn-4 {
    padding-top: 35px;
  }
}
.testimonial__btn-4 i {
  font-size: 18px;
}
.testimonial__pagination-4 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
  bottom: 1px;
  z-index: -1;
}

.footer__area-6 {
  overflow: hidden;
  background-color: var(--gray-17);
}
.footer__top-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .footer__top-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-bottom: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__top-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-bottom: 5px;
  }
}
.footer__social-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
.footer__social-6 li a {
  color: var(--gray-2);
  font-size: 18px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.footer__social-6 li a:hover {
  color: var(--black-2);
}
.footer__info-6 li {
  color: var(--black-13);
  font-size: 16px;
  margin-bottom: 15px;
}
.footer__info-6 li a {
  color: var(--black-13);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.footer__info-6 li a:hover {
  color: var(--black-2);
}
.footer__info-6 li a.phone {
  color: var(--black-2);
  position: relative;
}
.footer__info-6 li a.phone::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0px;
  background-color: var(--white);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.footer__info-6 li a.phone:hover::after {
  width: 0%;
}
.footer__info-6 li a.phone::after {
  background-color: var(--black-2);
}
.footer__link-6 li {
  margin-bottom: 8px;
}
.footer__link-6 li a {
  color: var(--black-13);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.footer__link-6 li a:hover {
  color: var(--black-2);
}
.footer__item-title {
  font-size: 20px;
  color: var(--black-2);
  font-weight: 600;
  line-height: 1.3;
  padding-bottom: 20px;
  text-transform: capitalize;
}
@media only screen and (max-width: 767px) {
  .footer__item-6 {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6 {
    margin-bottom: 50px;
  }
}
.footer__item-6:nth-child(1) {
  width: 25%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(1) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(1) {
    width: 50%;
    padding-right: 30px;
  }
}
.footer__item-6:nth-child(2) {
  width: 14%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(2) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(2) {
    width: 50%;
  }
}
.footer__item-6:nth-child(3) {
  width: 20%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(3) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(3) {
    width: 50%;
    padding-right: 30px;
  }
}
.footer__item-6:nth-child(4) {
  width: 28%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(4) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(4) {
    width: 50%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__item-6:nth-child(4) {
    width: 33%;
  }
}
.footer__item-6 p {
  padding-bottom: 20px;
  color: var(--gray-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__item-6 p br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__item-6 p br {
    display: none;
  }
}
.footer__item-6-social a:hover {
  color: var(--black-2);
}
.footer__btm-6 {
  border-top: 1px solid var(--gray-24);
  padding-top: 40px;
  padding-bottom: 43px;
}
.footer__newsletter-6 {
  background-color: var(--gray-24);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 5px;
  position: relative;
}
.footer__newsletter-6 input {
  width: 100%;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 16px 50px 16px 20px;
}
.footer__newsletter-6 input::-webkit-input-placeholder {
  font-size: 14px;
  color: var(--white-7);
  font-weight: 400;
}
.footer__newsletter-6 input::-moz-placeholder {
  font-size: 14px;
  color: var(--white-7);
  font-weight: 400;
}
.footer__newsletter-6 input:-ms-input-placeholder {
  font-size: 14px;
  color: var(--white-7);
  font-weight: 400;
}
.footer__newsletter-6 input::-ms-input-placeholder {
  font-size: 14px;
  color: var(--white-7);
  font-weight: 400;
}
.footer__newsletter-6 input::placeholder {
  font-size: 14px;
  color: var(--white-7);
  font-weight: 400;
}
.footer__newsletter-6 button {
  position: absolute;
  right: 20px;
  top: 15px;
}
.footer__copyright-6 {
  color: var(--black-13);
}
.footer__copyright-6 p a {
  color: var(--black-2);
}
.footer__copyright-6 p a:hover {
  color: var(--lime);
}
.footer__chekbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  margin-top: 18px;
}
.footer__chekbox input {
  width: 30px;
  height: 30px;
}
.footer__chekbox label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--black-3);
}

@-webkit-keyframes leftmove {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -20px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes leftmove {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -20px;
  }
  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes rightmove {
  0% {
    margin-right: 0;
  }
  50% {
    margin-right: 30px;
  }
  100% {
    margin-right: 0;
  }
}
@keyframes rightmove {
  0% {
    margin-right: 0;
  }
  50% {
    margin-right: 30px;
  }
  100% {
    margin-right: 0;
  }
}
@-webkit-keyframes move {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -20px;
  }
  100% {
    margin-bottom: 0;
  }
}
@keyframes move {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -20px;
  }
  100% {
    margin-bottom: 0;
  }
}
@keyframes move {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: -20px;
  }
  100% {
    margin-top: 0;
  }
}
@-webkit-keyframes rotate-icon {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-icon {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.hero__shape {
  -webkit-animation-name: leftmove;
          animation-name: leftmove;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: leftmove infinite 4s;
          animation: leftmove infinite 4s;
}
.hero__arrow-icon {
  -webkit-animation-name: rightmove;
          animation-name: rightmove;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: rightmove infinite 3s;
          animation: rightmove infinite 3s;
}
.hero__shape-2 {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: move infinite 4s;
          animation: move infinite 4s;
}
.hero__shape-3 {
  -webkit-animation: rotate-icon 5s linear 0s infinite normal;
          animation: rotate-icon 5s linear 0s infinite normal;
}

.faq__img6-1 {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: move infinite 4s;
          animation: move infinite 4s;
}

.faq__img6-2 {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: move infinite 4s;
          animation: move infinite 4s;
}

.dark .line-col-4 div {
  background: var(--bg-line);
}
.dark .btn-view {
  color: var(--white);
}
.dark .btn-view::after {
  background-color: var(--white);
}
.dark .sec-subtile-6,
.dark .sec-title-6,
.dark .workflow__title-4,
.dark .feature__content-item h5,
.dark .service__item-title,
.dark .service__right-4 p span,
.dark .portfolio__title-4,
.dark .portfolio__icon-4,
.dark .testimonial__name-4,
.dark .footer__item-title,
.dark .footer__newsletter-6 button {
  color: var(--white);
}
.dark .title-wrapper-6 p,
.dark .workflow__item-4 p,
.dark .feature__content-item p,
.dark .service__right-4 p,
.dark .portfolio__subtitle-4,
.dark .portfolio__sec-title p,
.dark .testimonial__sec-title p,
.dark .blog__area-4 .sec-title-wrapper p,
.dark .testimonial__info-4 p,
.dark .testimonial__role-4,
.dark .footer__info-6 li,
.dark .footer__chekbox label {
  color: var(--gray-2);
}
.dark .hero__area-6 .shape-4 {
  -webkit-filter: invert(0.93);
          filter: invert(0.93);
}
.dark .hero__title-6 {
  color: var(--white);
}
.dark .feature__area-6 {
  background-color: var(--d-black-2);
}
.dark .testimonial__slider-4 {
  color: var(--white);
}
.dark .solution__area-4 {
  overflow: hidden;
  background-color: var(--d-black-2);
}
.dark .blog__title-4 {
  color: var(--white);
}
.dark .blog__title-4:hover {
  color: var(--lime);
}
.dark .blog__btn-4 {
  color: var(--white);
}
.dark .blog__btn-4:hover {
  color: var(--lime);
}
.dark .blog__btn-4::after {
  background-color: var(--white);
}
.dark .testimonial__slide-4 {
  background: var(--d-black-2);
}
.dark .testimonial__feedback-4 {
  color: var(--gray-2);
  background-color: var(--black-2);
}
.dark .blog__meta-4 span {
  color: var(--white-6);
  background-color: var(--bg-line);
}
.dark .blog__meta-4 a {
  color: var(--white-6);
  background-color: var(--bg-line);
}
.dark .blog__meta-4 a:hover {
  color: var(--lime);
}
.dark .footer__area-6 {
  background-color: var(--d-black-2);
}
.dark .footer__link-6 li a {
  color: var(--gray-2);
}
.dark .footer__link-6 li a:hover {
  color: var(--white);
}
.dark .footer__info-6 li a {
  color: var(--gray-2);
}
.dark .footer__info-6 li a:hover {
  color: var(--white);
}
.dark .footer__info-6 li a.phone {
  color: var(--white);
}
.dark .footer__info-6 li a.phone::after {
  background-color: var(--white);
}
.dark .footer__newsletter-6 input {
  color: var(--white-2);
  background-color: var(--black-2);
}
.dark .footer__btm-6 {
  border-color: var(--bg-line);
}
.dark .footer__copyright-6 p a {
  color: var(--white);
}
.dark .footer__copyright-6 p a:hover {
  color: var(--lime);
}
.dark .service__item-4 {
  border-color: var(--bg-line);
}
.dark .service__item-4:first-child {
  border-color: var(--bg-line);
}
.dark .service__item-icon i {
  color: var(--white);
}

.header__area-7.sticky-7 {
  background: var(--white);
  border-bottom: 1px solid var(--white-2);
}

.hero__area-7 {
  padding-top: 180px;
  padding-bottom: 140px;
  background-image: url(../imgs/home-7/hero-bg.png);
  background-repeat: repeat;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-7 {
    padding-top: 140px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-7 {
    padding-top: 140px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-7 {
    padding-top: 160px;
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-7 {
    padding-top: 160px;
    padding-bottom: 60px;
  }
}
.hero__area-7 .shape-1 {
  position: absolute;
  right: 100px;
  bottom: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-7 .shape-1 {
    right: 60px;
    max-width: 260px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-7 .shape-1 {
    max-width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-7 .shape-1 {
    max-width: 200px;
    right: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__area-7 .shape-1 {
    max-width: 120px;
    bottom: unset;
    top: 330px;
    right: 0;
  }
}
.hero__title-7 {
  font-weight: 500;
  font-size: 130px;
  line-height: 1;
  color: var(--black-2);
  max-width: 1060px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title-7 {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title-7 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title-7 {
    font-size: 70px;
  }
  .hero__title-7 img {
    max-width: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__title-7 {
    font-size: 48px;
  }
  .hero__title-7 img {
    max-width: 60px;
  }
}
.hero__text-7 {
  margin-left: 210px;
  margin-top: 60px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 20px auto;
  grid-template-columns: 200px auto;
  grid-gap: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__text-7 {
    margin-left: 60px;
    -ms-grid-columns: 160px 20px auto;
    grid-template-columns: 160px auto;
  }
}
@media only screen and (max-width: 767px) {
  .hero__text-7 {
    margin-left: 0;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.hero__text-7 .about {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  position: relative;
  text-transform: capitalize;
}
.hero__text-7 .about::after {
  position: absolute;
  content: "";
  width: 90px;
  height: 1px;
  top: 14px;
  left: 60px;
  background-color: var(--black-2);
  padding-left: 9px;
}
.hero__text-7 p {
  max-width: 350px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
}

.video__area img {
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 1920px) {
  .video__area img {
    height: 800px;
  }
}
.video__area.about__img-2 {
  margin-bottom: 0;
  max-width: 100%;
  width: 100%;
}

.about__area-7 {
  position: relative;
}
.about__area-7 .sec-title-wrapper {
  text-align: center;
  padding-bottom: 70px;
}
.about__area-7 .shape-1 {
  position: absolute;
  left: 100px;
  top: 280px;
}
.about__left-7 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 520px;
}
.about__left-7 img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 120%;
  margin-left: auto;
  margin-right: auto;
}
.about__left-7 img {
  max-width: 100%;
}
.about__mid-7 {
  padding-left: 80px;
  padding-top: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__mid-7 {
    padding-left: 30px;
    padding-top: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__mid-7 {
    padding-left: 10px;
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__mid-7 {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about__mid-7 {
    padding-left: 0;
    padding-top: 40px;
  }
}
.about__mid-7 p {
  max-width: 440px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-3);
  padding-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__mid-7 p {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .about__mid-7 p {
    font-size: 16px;
  }
}
.about__mid-7 img {
  display: block;
}
.about__mid-7 .signature {
  margin-top: 30px;
}
.about__mid-7 .image-1 {
  margin-left: auto;
  margin-top: 35px;
  -webkit-transform: translateX(25px);
          transform: translateX(25px);
}
@media only screen and (max-width: 767px) {
  .about__mid-7 .image-1 {
    margin-left: 0;
  }
}
.about__right-7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
  padding-bottom: 140px;
}
@media only screen and (max-width: 767px) {
  .about__right-7 {
    margin-top: 10px;
    padding-bottom: 10px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.about__right-7 img {
  max-width: 100%;
}

.award__area-7 {
  background-color: #F9F9F9;
}
.award__area-7 .inherit_row {
  margin-left: -350px;
}
.award__area-7 .award-video-7 video {
  width: 100%;
}
.award__top-7 {
  position: relative;
}
.award__counter {
  width: 330px;
  height: 330px;
  background: var(--black-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 0;
  bottom: 6px;
  z-index: 9;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__counter {
    width: 260px;
    height: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .award__counter {
    width: 150px;
    height: 150px;
  }
}
.award__counter .counter__number {
  font-weight: 500;
  font-size: 100px;
  line-height: 1;
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .award__counter .counter__number {
    font-size: 50px;
  }
}
.award__counter p {
  font-size: 20px;
  line-height: 1.4;
  color: var(--white);
  padding-top: 15px;
}
@media only screen and (max-width: 767px) {
  .award__counter p {
    font-size: 16px;
    padding-top: 5px;
  }
}
.award__mid-7 p {
  font-size: 18px;
  color: var(--black-2);
  max-width: 300px;
  margin-left: 30px;
}
@media only screen and (max-width: 767px) {
  .award__mid-7 p {
    font-size: 16px;
    margin-left: 15px;
    padding-top: 15px;
    padding-bottom: 40px;
  }
}
.award__btm-7 {
  background-color: #EEE5E2;
  position: relative;
  padding-left: 110px;
  padding-bottom: 70px;
  padding-top: 420px;
  margin-top: -330px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .award__btm-7 {
    padding-left: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__btm-7 {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__btm-7 {
    padding-left: 30px;
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .award__btm-7 {
    padding-left: 30px;
    padding-bottom: 40px;
    padding-top: 370px;
  }
}
.award__btm-7::before {
  position: absolute;
  content: "";
  width: 500px;
  height: 100%;
  right: 100%;
  top: 0;
  background-color: var(--white);
}
.award__btm-7::after {
  position: absolute;
  content: "";
  width: 500px;
  height: 100%;
  left: 99%;
  top: 0;
  background-color: #EEE5E2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__right-7 {
    padding-top: 60px;
  }
}
.award__list-7 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__list-7 {
    grid-gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .award__list-7 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.award__item-7 {
  text-align: center;
  margin-bottom: 20px;
}
.award__item-7 img {
  max-width: 100%;
  margin-bottom: 20px;
}
.award__item-7 .title {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .award__item-7 .title {
    font-size: 14px;
  }
}

.team__area-7 .sec-text {
  padding-left: 60%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__area-7 .sec-text {
    padding-left: 45%;
  }
}
@media only screen and (max-width: 767px) {
  .team__area-7 .sec-text {
    padding-left: 60px;
    padding-top: 20px;
  }
}
.team__area-7 .sec-text p {
  max-width: 300px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
}
@media only screen and (max-width: 767px) {
  .team__area-7 .sec-text p {
    font-size: 16px;
  }
}
.team__title-7 {
  font-weight: 500;
  font-size: 700px;
  line-height: 0.9;
  text-align: center;
  color: var(--black-2);
  text-transform: uppercase;
  position: relative;
  z-index: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__title-7 {
    font-size: 520px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__title-7 {
    font-size: 500px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__title-7 {
    font-size: 360px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__title-7 {
    font-size: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .team__title-7 {
    font-size: 120px;
  }
}
.team__items-7 a {
  display: block;
  border-bottom: 1px solid var(--white-6);
}
.team__items-7 a:first-child {
  border-top: 1px solid var(--white-6);
}
.team__item-7 {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.9fr 1fr 0.1fr;
  grid-template-columns: 0.9fr 1fr 0.1fr;
  padding: 18px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__item-7 {
    -ms-grid-columns: 1.5fr 1fr 0.1fr;
    grid-template-columns: 1.5fr 1fr 0.1fr;
  }
}
@media only screen and (max-width: 767px) {
  .team__item-7 {
    padding: 12px 0;
    -ms-grid-columns: 1.5fr 1fr 0.1fr;
    grid-template-columns: 1.5fr 1fr 0.1fr;
  }
}
.team__item-7:hover .team__hover-7 {
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .team__item-7:hover .team__hover-7 {
    opacity: 0;
  }
}
.team__item-7:hover .tm-serial {
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .team__item-7:hover .tm-serial {
    opacity: 0;
  }
}
.team__item-7:hover .tm-name {
  padding-left: 90px;
}
@media only screen and (max-width: 767px) {
  .team__item-7:hover .tm-name {
    padding-left: 0;
  }
}
.team__item-7:hover .tm-name::after {
  width: 50px;
}
@media only screen and (max-width: 767px) {
  .team__item-7:hover .tm-name::after {
    width: 0;
  }
}
.team__item-7:hover .tm-link i {
  color: var(--black-2);
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.team__item-7 .tm-name {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--black-2);
  text-transform: capitalize;
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .team__item-7 .tm-name {
    font-size: 20px;
  }
}
.team__item-7 .tm-name::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  left: 25px;
  top: 18px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background-color: var(--black-2);
}
.team__item-7 .tm-serial {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 24px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.team__item-7 .tm-role {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  color: var(--black-3);
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .team__item-7 .tm-role br {
    display: block;
  }
}
.team__item-7 .tm-link {
  color: var(--gray-2);
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.team__item-7 .tm-link i {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.team7__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.team7__img-wrap {
  width: 20vw;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  padding-bottom: 25vw;
}
@media only screen and (max-width: 767px) {
  .team7__img-wrap {
    display: none;
    position: unset;
  }
}
.team__hover-7 {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 60%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 75%;
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  margin: -200px 0 0 -150px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1200px) {
  .team__hover-7 {
    width: 0;
    display: none;
  }
}

.service__area-7 {
  background-color: #F9F9F9;
  padding-bottom: 50px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-7 {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-7 {
    padding-bottom: 0;
  }
}
.service__area-7::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: 36%;
  bottom: 0;
  background: var(--white-6);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-7::before {
    left: 32%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__area-7::before {
    left: 35%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-7::before {
    left: 33%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-7::before {
    left: 34%;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-7::before {
    display: none;
  }
}
.service__area-7::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: 59%;
  bottom: 0;
  background: var(--white-6);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-7::after {
    left: 62%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__area-7::after {
    left: 62%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-7::after {
    left: 63%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-7::after {
    left: 64%;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-7::after {
    display: none;
  }
}
.service__items-7 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 767px) {
  .service__items-7 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.service__item-7 {
  padding-bottom: 90px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-7 {
    padding-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-7 {
    padding-bottom: 60px;
  }
}
.service__item-7::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 35px;
  background: var(--white-6);
}
@media only screen and (max-width: 767px) {
  .service__item-7::after {
    bottom: 25px;
  }
}
.service__item-7:nth-last-child(-n+3)::after {
  position: unset;
}
@media only screen and (max-width: 767px) {
  .service__item-7:nth-last-child(-n+3)::after {
    position: absolute;
  }
}
.service__item-7 p {
  max-width: 340px;
  font-size: 18px;
  padding-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-7 p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-7 p {
    font-size: 16px;
  }
}
.service__item-7 ul li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-7 ul li {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-7 ul li {
    font-size: 16px;
  }
}
.service__title-7 {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  color: var(--black-2);
  padding-bottom: 25px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-transform: capitalize;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__title-7 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__title-7 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__title-7 {
    font-size: 30px;
  }
}
.service__title-7:hover span {
  padding-left: 0;
}
@media only screen and (max-width: 767px) {
  .service__title-7:hover span {
    padding-left: 50px;
  }
}
.service__title-7:hover span::before {
  width: 0;
}
.service__title-7 span {
  display: block;
  position: relative;
  padding-left: 50px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.service__title-7 span::before {
  position: absolute;
  content: "";
  width: 40px;
  height: 1px;
  left: 0;
  top: 25px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background-color: var(--black-2);
}

.portfolio__area-7 {
  margin-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-7 .pb-140 {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-7 {
    margin-bottom: 90px;
  }
}
.portfolio__area-7 .sec-title {
  padding-bottom: 50px;
  text-transform: capitalize;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-7 .sec-title {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-7 .sec-title {
    padding-bottom: 30px;
  }
}
.portfolio__area-7 p {
  font-size: 18px;
  max-width: 300px;
}
@media only screen and (max-width: 767px) {
  .portfolio__area-7 p {
    font-size: 16px;
  }
}
.portfolio__slider-7 {
  margin-right: -320px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__slider-7 {
    margin-right: -200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slider-7 {
    margin-right: -130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slider-7 {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__slider-7 {
    margin-right: 0;
  }
}
.portfolio__slide-7 {
  text-align: center;
}
.portfolio__slide-7:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.portfolio__slide-7 .slide-img {
  overflow: hidden;
  margin-bottom: 20px;
}
.portfolio__slide-7 img {
  width: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.portfolio__slide-7 .title {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--black-2);
  padding-bottom: 5px;
}
.portfolio__slide-7 .date {
  font-size: 14px;
  color: var(--black-3);
  font-weight: 400;
  line-height: 1.5;
}

.cta__area-7 {
  background-color: var(--black-2);
}
.cta__area-7 .cta__sub-title {
  color: var(--gray-2);
}
.cta__area-7 .cta__title {
  color: var(--white);
}
.cta__area-7 .wc-btn-primary, .cta__area-7 .wc-btn-secondary, .cta__area-7 .wc-btn-pink, .cta__area-7 .wc-btn-light, .cta__area-7 .wc-btn-black {
  border-color: var(--secondary);
  color: var(--gray-2);
}
.cta__area-7 .wc-btn-primary:hover, .cta__area-7 .wc-btn-secondary:hover, .cta__area-7 .wc-btn-pink:hover, .cta__area-7 .wc-btn-light:hover, .cta__area-7 .wc-btn-black:hover {
  color: var(--black-2);
}

.blog__area-7 .sec-title-wrapper {
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .blog__area-7 .sec-title-wrapper {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__area-7 .pb-140 {
    padding-bottom: 20px;
  }
}

.dark .header__area-7.sticky-7 {
  border-color: var(--secondary);
}
.dark .award__left-7 .sec-title {
  color: var(--black-2);
}
.dark .main-menu-4 li a {
  color: var(--white);
}
.dark .main-menu-4 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.dark .header__nav-icon-7 img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .header__area-7.sticky-7 {
  background: var(--black-2);
}
.dark .hero__area-7 {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .about__mid-7 p,
.dark .service__item-7 ul li {
  color: var(--gray-2);
}
.dark .service__area-7 {
  background-color: var(--d-black-2);
}
.dark .service__area-7::before, .dark .service__area-7::after {
  background-color: var(--secondary);
}
.dark .service__item-7::after {
  background-color: var(--secondary);
}
.dark .service__title-7 {
  color: var(--white);
}
.dark .service__title-7 span::before {
  background-color: var(--white);
}
.dark .award__area-7 {
  background-color: var(--d-black-2);
}
.dark .award__btm-7::before {
  background-color: var(--black-2);
}
.dark .award__counter {
  background-color: var(--d-black-2);
}
.dark .portfolio__slide-7 .date {
  color: var(--gray-2);
}
.dark .portfolio__slide-7 .title {
  color: var(--white);
}
.dark .team__area-7 .sec-text p {
  color: var(--gray-2);
}
.dark .team__title-7 {
  color: var(--white);
}
.dark .team__items-7 a {
  border-color: var(--secondary);
}
.dark .team__item-7:hover .tm-link i {
  color: var(--white);
}
.dark .team__item-7 .tm-name {
  color: var(--white);
}
.dark .team__item-7 .tm-name::after {
  background-color: var(--white);
}
.dark .team__item-7 .tm-role {
  color: var(--gray-2);
}
.dark .cta__area-7 {
  background-color: var(--d-black-2);
}

.portfolio__area-11 {
  text-align: center;
  position: relative;
}
.portfolio__area-12 {
  padding: 180px 35px 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-12 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-12 {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-12 {
    padding: 150px 15px 80px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-12 {
    padding: 130px 0 40px;
  }
}
.portfolio__area-12 .sec-title-wrapper .sub-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black-2);
  position: relative;
}
.portfolio__area-12 .sec-title-wrapper .sub-title::after {
  position: absolute;
  content: "";
  width: 150px;
  height: 1px;
  background-color: var(--black-2);
  top: 13px;
  margin-left: 10px;
}
@media only screen and (max-width: 767px) {
  .portfolio__area-12 .sec-title-wrapper .sub-title::after {
    width: 70px;
  }
}
.portfolio__area-12 .sec-title-wrapper .title {
  font-weight: 500;
  font-size: 350px;
  line-height: 0.7;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-12 .sec-title-wrapper .title {
    font-size: 260px;
    padding-bottom: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-12 .sec-title-wrapper .title {
    font-size: 220px;
    padding-bottom: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-12 .sec-title-wrapper .title {
    font-size: 150px;
    line-height: 0.9;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-12 .sec-title-wrapper .title {
    font-size: 60px;
    line-height: 1;
    padding-bottom: 20px;
  }
}
.portfolio__area-12 .sec-title-wrapper .title span {
  color: transparent;
  -webkit-text-stroke: 2px var(--black-2);
}
.portfolio__area-12 .sec-title-wrapper p {
  max-width: 320px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  text-indent: 60px;
  color: var(--black-2);
  margin-left: 500px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-12 .sec-title-wrapper p {
    margin-left: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-12 .sec-title-wrapper p {
    margin-left: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-12 .sec-title-wrapper p {
    margin-left: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-12 .sec-title-wrapper p {
    text-indent: 30px;
    margin-left: 30px;
  }
}
.portfolio__slider-11 img {
  height: 100vh;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.portfolio__slider-11-title {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  pointer-events: none;
}
.portfolio__slider-11-title .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
  font-size: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
    font-size: 72px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
    font-size: 36px;
  }
}
.portfolio__title-11 {
  font-weight: 500;
  font-size: 50px;
  line-height: 1.1;
  color: var(--white);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding-bottom: 10px;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__title-11 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__title-11 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__title-11 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__title-11 {
    font-size: 24px;
  }
}
.portfolio__title-11 span {
  font-weight: 400;
  font-family: "newYork";
}
.portfolio__title-12 {
  font-weight: 500;
  font-size: 150px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.portfolio__title-12 span {
  font-weight: 400;
  font-family: "newYork";
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__title-12 {
    font-size: 110px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__title-12 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__title-12 {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__title-12 {
    font-size: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__title-12 {
    font-size: 36px;
  }
}
.portfolio__sub-title-11 {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white);
}
.portfolio__list-12 {
  padding-top: 140px;
  border-bottom: 1px solid var(--gray-11);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__list-12 {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__list-12 {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__list-12 {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__list-12 {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__list-12 {
    padding-top: 60px;
  }
}
.portfolio__item-12 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 160px auto 200px;
  grid-template-columns: 160px auto 200px;
  padding: 55px 0 50px;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-top: 1px solid var(--gray-11);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__item-12 {
    -ms-grid-columns: 130px auto 120px;
    grid-template-columns: 130px auto 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__item-12 {
    padding: 40px 0;
    -ms-grid-columns: 100px auto 100px;
    grid-template-columns: 100px auto 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__item-12 {
    -ms-grid-columns: 90px auto 90px;
    grid-template-columns: 90px auto 90px;
    padding: 30px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__item-12 {
    -ms-grid-columns: 40px 20px auto 20px 80px;
    grid-template-columns: 40px auto 80px;
    gap: 20px;
    padding: 30px 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__item-12 {
    padding: 20px 0;
    grid-gap: 15px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.portfolio__item-12:hover .portfolio__title-12 {
  letter-spacing: 1px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.portfolio__item-12:hover .portfolio__hover-12 {
  opacity: 1;
}
.portfolio__item-12 p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black-3);
  text-transform: uppercase;
}
.portfolio__hover-12 {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 75%;
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  margin: -200px 0 0 -150px;
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 1200px) {
  .portfolio__hover-12 {
    width: 0;
    display: none;
  }
}
.portfolio__no-12 {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--black-3);
}
.portfolio__nitems {
  display: block;
}
.portfolio__wrapper-11 {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  padding-top: 70px;
}
.portfolio__wrapper-11::-webkit-scrollbar {
  width: 0px;
}
.portfolio__nitem.active .portfolio__title-11 {
  font-size: 150px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__nitem.active .portfolio__title-11 {
    font-size: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__nitem.active .portfolio__title-11 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__nitem.active .portfolio__title-11 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__nitem.active .portfolio__title-11 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__nitem.active .portfolio__title-11 {
    font-size: 30px;
  }
}
.portfolio__nitem.active .pitem-bg {
  opacity: 1;
  visibility: visible;
}
.portfolio__nitem a {
  padding: 30px 0;
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .portfolio__nitem a {
    padding: 20px 0;
  }
}
.portfolio__nitem .pitem-bg {
  background-position: center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.hover_img {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 75%;
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 1200px) {
  .hover_img {
    width: 0;
    display: none;
  }
}
.hover_wrap {
  position: relative;
}
.hover_wrap:hover .hover_img {
  opacity: 1;
}

.hover_8_wrap {
  position: relative;
}
.hover_8_img, .hover_8_img_2 {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  margin-left: -250px;
  opacity: 0;
}
.hover_8_img.active, .active.hover_8_img_2 {
  opacity: 1;
}
@media (max-width: 1200px) {
  .hover_8_img, .hover_8_img_2 {
    width: 0;
    display: none;
  }
}

.hover_8_img_2 {
  top: 100px;
}

.work__area-8 .about-sub-right {
  color: var(--black-3);
  padding-bottom: 10px;
}

.scroll-top-2 {
  width: 115px;
  position: fixed;
  right: 100px;
  bottom: 20px;
  z-index: 9991;
  padding: 10px;
  cursor: pointer;
  display: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.scroll-top-2 i {
  font-size: 18px;
  color: var(--black-2);
}
.scroll-top-2:hover {
  color: var(--gray-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .scroll-top-2 {
    right: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .scroll-top-2 {
    right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-top-2 {
    right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .scroll-top-2 {
    right: 10px;
    bottom: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .scroll-top-2 {
    right: 10px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    padding: 5px;
    background-color: var(--white);
    mix-blend-mode: exclusion;
  }
}
.scroll-top-2 p {
  color: var(--black-2);
  text-align: left;
}
.scroll-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .scroll-inner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .scroll-inner p {
    display: none;
  }
  .scroll-inner img {
    max-width: 100%;
    height: 30px;
  }
}

#main .part .section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.part p {
  opacity: 0;
}

.part h2 {
  opacity: 0;
}

.part.showed h2 {
  opacity: 1;
  padding-left: 30px;
  padding-bottom: 30px;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  color: var(--white);
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .part.showed h2 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .part.showed h2 {
    font-size: 30px;
    padding-left: 20px;
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .part.showed h2 {
    font-size: 24px;
    padding-left: 15px;
    padding-bottom: 20px;
  }
}
.part.showed h2 span {
  display: block;
  position: relative;
  padding-left: 90px;
  font-family: "newYork";
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .part.showed h2 span {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .part.showed h2 span {
    padding-left: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .part.showed h2 span {
    padding-left: 30px;
  }
}
.part.showed h2 span::before {
  position: absolute;
  content: "";
  width: 70px;
  height: 2px;
  left: 0;
  top: 22px;
  background-color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .part.showed h2 span::before {
    width: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .part.showed h2 span::before {
    width: 35px;
  }
}
@media only screen and (max-width: 767px) {
  .part.showed h2 span::before {
    width: 25px;
  }
}

.part.showed p {
  opacity: 1;
  padding-left: 120px;
  padding-bottom: 60px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .part.showed p {
    padding-left: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .part.showed p {
    padding-left: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .part.showed p {
    padding-left: 20px;
  }
}

.showcase__area-4 {
  padding: 130px 50px 110px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase__area-4 {
    padding: 120px 50px 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__area-4 {
    padding: 90px 50px 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__area-4 {
    padding: 80px 30px 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__area-4 {
    padding: 80px 20px 60px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase__area-4 {
    padding: 60px 0 80px;
  }
}
.showcase__area-4 .row {
  --bs-gutter-x: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 30px;
  }
}
.showcase__items-4 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 90px 1fr 90px 1fr 90px 1fr;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__items-4 {
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__items-4 {
    grid-gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__items-4 {
    grid-gap: 15px;
    -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .showcase__items-4 {
    grid-gap: 15px;
    -ms-grid-columns: 1fr 15px 1fr;
    grid-template-columns: repeat(2, 1fr);
  }
}
.showcase__item-4 {
  overflow: hidden;
}
.showcase__item-4:hover img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.showcase__item-4 img {
  -webkit-transition: all 3s;
  transition: all 3s;
  max-width: 100%;
}
.showcase__menu-4 {
  gap: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 30px;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .showcase__menu-4 {
    display: inline-block;
    z-index: 9;
    text-align: center;
    position: relative;
    background-color: var(--white);
  }
}
.showcase__menu-4 button {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--black);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-transform: capitalize;
}
.showcase__menu-4 button:hover {
  letter-spacing: 1px;
  color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .showcase__menu-4 button {
    margin: 0 5px 10px 0;
  }
}

.showcase5__content img {
  -webkit-animation: wcSpinner 5s infinite linear;
          animation: wcSpinner 5s infinite linear;
}

.showcase_16_hover {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 100px;
  left: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 75%;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.showcase_16_hover.active {
  opacity: 1;
}
@media (max-width: 1365px) {
  .showcase_16_hover {
    display: none;
  }
}

.mixtup_btn#btn_wrapper, .mixtup_btn.btn_wrapper {
  margin: 0 auto;
}
.mixtup_btn .wc-btn {
  display: inline-block;
  width: 170px;
  height: 170px;
  border: 1px solid #C2C2C2;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #555555;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 1365px) {
  .mixtup_btn .wc-btn {
    width: 150px;
    height: 150px;
  }
}
.mixtup_btn .wc-btn span {
  display: block;
  font-size: 18px;
  margin-bottom: -15px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media only screen and (max-width: 767px) {
  .mixtup_btn .wc-btn span {
    margin-bottom: -5px;
  }
}
.mixtup_btn .wc-btn:hover {
  color: var(--white);
  background-color: var(--black-2);
}
@media (max-width: 1365px) {
  .mixtup_btn {
    opacity: 1;
    visibility: visible;
  }
}
@media only screen and (max-width: 767px) {
  .mixtup_btn {
    margin-bottom: 30px;
  }
}

.dark .portfolio__area-12 .sec-title-wrapper .title {
  color: var(--white);
}
.dark .portfolio__area-12 .sec-title-wrapper .title span {
  -webkit-text-stroke: 2px var(--white);
}
.dark .portfolio__area-12 .sec-title-wrapper .sub-title {
  color: var(--white);
}
.dark .portfolio__area-12 .sec-title-wrapper .sub-title::after {
  background-color: var(--white);
}
.dark .portfolio__area-12 .sec-title-wrapper p {
  color: var(--white);
}
.dark .portfolio__title-12,
.dark .showcase__menu-4 button {
  color: var(--white);
}
.dark .rollslide_title {
  color: var(--white);
}
.dark .rollslide_title:hover {
  color: var(--black-3);
}
.dark .cat_links li a,
.dark .work__area-8 .about-sub-right,
.dark .footer__copyright-8 p a {
  color: var(--white);
}
.dark .cat_links li a:hover,
.dark .work__area-8 .about-sub-right:hover,
.dark .footer__copyright-8 p a:hover {
  color: var(--black-3);
}
.dark .scroll-top-2 {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__item-12 p,
.dark .portfolio__no-12 {
  color: var(--gray);
}
.dark .portfolio__list-12,
.dark .portfolio__item-12,
.dark .footer_categories,
.dark .footer__subscribe-2 input {
  border-color: var(--black-3);
}
.dark .footer_categories::before {
  background-color: var(--black-3);
}
.dark .mixtup_btn .wc-btn {
  color: var(--white);
  border-color: var(--secondary);
}
.dark .mixtup_btn .wc-btn:hover {
  color: var(--black-2);
  background-color: var(--white);
}
@media only screen and (max-width: 767px) {
  .dark .showcase__menu-4 {
    background-color: var(--black-2);
  }
}

body {
  position: relative;
}

.body-bg {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  top: 0;
  opacity: 1;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: repeat;
  background-position: top left;
  background-image: url(../imgs/essential-img/bg-axtra.png);
}

.portfolio__area-11 {
  overflow: hidden;
}
.portfolio__area-11 .gallary11__thumb {
  height: 100%;
}
.portfolio__area-11 .gallary11__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.portfolio__area-11 .gallary11__thumb img:hover {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
  -webkit-transition: all 10s;
  transition: all 10s;
}
.portfolio__area-11 .swiper-container {
  width: 100%;
  height: 100vh;
  float: left;
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.6s ease, transform 0.3s ease;
  transition: opacity 0.6s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
.portfolio__area-11 .main-slider11 .swiper-image {
  width: 100%;
  height: 100%;
}
.portfolio__area-11 .swiper-slide {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
  font-size: 150px;
  line-height: 0.9;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 30px;
  }
}
.portfolio__area-11 .swiper-container.thumb-slider11 {
  width: 100%;
  position: absolute;
  overflow: hidden;
  height: 100vh;
  pointer-events: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 {
    margin-top: 80px;
  }
}
.portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide {
  cursor: pointer;
}
.portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
  height: 175px !important;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 160px !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 150px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 125px !important;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 100px !important;
  }
}
.portfolio__area-11 .gallary12 {
  -webkit-box-orient: unset;
  -webkit-box-direction: unset;
      -ms-flex-direction: unset;
          flex-direction: unset;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-11 .gallary12 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__area-11 .gallary12 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.woocomerce__main {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #F9F3EE;
}
.woocomerce__offcanvas {
  cursor: pointer;
  padding: 10px 0;
}
.woocomerce__header {
  -ms-grid-columns: auto 150px 150px;
  grid-template-columns: auto 150px 150px;
  padding: 5px 50px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
}
.woocomerce__header.static-header {
  position: static;
}
.woocomerce__header.account-header {
  padding: 0 50px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__header.account-header {
    padding: 20px 10px;
    padding-bottom: 0;
  }
}
.woocomerce__header-logo img {
  max-width: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__header {
    padding: 18px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__header {
    padding: 18px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__header {
    padding: 18px 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__header-left {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__header-left {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__header-left {
    display: none;
  }
}
.woocomerce__header .main-menu-3 > li {
  display: inline-block;
  padding: 0 10px;
  margin: 0;
}
.woocomerce__header .main-menu-3 > li a {
  color: var(--white);
}
.woocomerce__header-inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 100px 1fr;
  grid-template-columns: 1fr 100px 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__header-inner {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__header-inner {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__header-inner {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
.woocomerce__header-inner.shopfull {
  -ms-grid-columns: 1fr 3fr 1fr;
  grid-template-columns: 1fr 3fr 1fr;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__header-inner.shopfull {
    -ms-grid-columns: 1fr 2.5fr 1fr;
    grid-template-columns: 1fr 2.5fr 1fr;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__header-inner.shopfull {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__header-inner.shopfull {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__header-inner.shopfull {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
.woocomerce__header-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__header-left {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__header-left {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__header-left {
    display: none;
  }
}
.woocomerce__header-left .main-menu-3 > li > a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.woocomerce__header-left .woocomerce-menu.main-menu-3 > li > a .menu-text {
  text-shadow: 0 16px 0 var(--black-2);
}
.woocomerce__header-cart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}
@media only screen and (max-width: 767px) {
  .woocomerce__header-cart {
    gap: 20px;
  }
}
.woocomerce__header-cart img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__header-search .search-icon {
  font-size: 18px;
  padding-top: 3px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__header-search .search-icon:hover {
  color: var(--gray-16);
}
.woocomerce__header-search #search_close {
  display: none;
  margin-right: 5px;
  font-size: 20px;
}
.woocomerce__header-search img:hover {
  -webkit-filter: invert(0.2);
          filter: invert(0.2);
}
.woocomerce__header-right.home .search-icon {
  color: var(--white);
}
.woocomerce__header-right.home .search-icon:hover {
  color: var(--gray);
}
.woocomerce__header-right.home .woocomerce__header-user a {
  color: var(--white);
}
.woocomerce__header-right.home .woocomerce__header-user a:hover {
  color: var(--gray);
}
.woocomerce__header-right.home .woocomerce__header-user a:hover i {
  color: var(--gray);
}
.woocomerce__header-right.home .woocomerce__header-cartwrapper a {
  color: var(--white);
}
.woocomerce__header-right.home .woocomerce__header-cartwrapper a:hover {
  color: var(--gray);
}
.woocomerce__header-right.home .woocomerce__header-cartwrapper a:hover p,
.woocomerce__header-right.home .woocomerce__header-cartwrapper a:hover i {
  color: var(--gray);
}
.woocomerce__header-right.home .woocomerce__header-cartwrapper a p,
.woocomerce__header-right.home .woocomerce__header-cartwrapper a i {
  color: var(--white);
}
.woocomerce__header-cartwrapper a {
  gap: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--black-2);
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__header-cartwrapper a span {
  display: inline-block;
  margin-left: -7px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__header-cartwrapper a span {
    margin-top: -15px;
  }
}
.woocomerce__header-cartwrapper a:hover {
  color: var(--black-7);
}
.woocomerce__header-cartwrapper a:hover p,
.woocomerce__header-cartwrapper a:hover i {
  color: var(--gray-16);
}
.woocomerce__header-cartwrapper a p {
  color: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .woocomerce__header-cartwrapper a p {
    display: none;
  }
}
.woocomerce__header-cartwrapper a i {
  color: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__header-user a {
  font-size: 18px;
  color: var(--black-2);
}
.woocomerce__header-user a i {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__header-user a:hover i {
  color: var(--black-7);
}
.woocomerce__hero {
  position: relative;
}
.woocomerce__hero .swiper-button-next:after,
.woocomerce__hero .swiper-button-prev:after {
  display: none;
}
.woocomerce__hero-circle {
  position: absolute;
  z-index: 2;
  top: 210px;
  pointer-events: none;
}
.woocomerce__hero-line {
  position: absolute;
  left: 16.5%;
  top: 0;
  height: 100%;
  width: 1px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.15);
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-line {
    display: none;
  }
}
.woocomerce__hero-line.line2 {
  left: 39%;
  background: rgba(255, 255, 255, 0.15);
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-line.line2 {
    display: none;
  }
}
.woocomerce__hero-line.line3 {
  left: 61.5%;
  background: rgba(255, 255, 255, 0.15);
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-line.line3 {
    display: none;
  }
}
.woocomerce__hero-line.line4 {
  left: auto;
  right: 16.5%;
  background: rgba(255, 255, 255, 0.15);
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-line.line4 {
    display: none;
  }
}
.woocomerce__hero-prev {
  right: 140px;
  bottom: 50px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  text-align: center;
  line-height: 68px;
  border: 1px solid var(--white);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.woocomerce__hero-prev:hover {
  background: var(--black-2);
  border: 1px solid transparent;
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-prev {
    height: 50px;
    width: 50px;
    line-height: 45px;
  }
  .woocomerce__hero-prev img {
    max-width: 16px;
  }
}
.woocomerce__hero-next {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: absolute;
  right: 50px;
  bottom: 50px;
  z-index: 5;
  text-align: center;
  line-height: 68px;
  border: 1px solid var(--white);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.woocomerce__hero-next:hover {
  background: var(--black-2);
  border: 1px solid transparent;
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-next {
    height: 50px;
    width: 50px;
    line-height: 45px;
    right: 70px;
  }
  .woocomerce__hero-next img {
    max-width: 16px;
  }
}
.woocomerce__hero-item {
  background-image: url("../imgs/woocomerce/wocomerce-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  padding: 0 50px;
  padding-top: 322px;
  position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__hero-item {
    padding-top: 240px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__hero-item {
    padding-top: 180px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__hero-item {
    height: unset;
    padding-top: 130px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__hero-item {
    height: unset;
    padding-top: 200px;
    padding-bottom: 50px;
  }
  .woocomerce__hero-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-item {
    padding: 190px 10px 150px;
    height: unset;
    background-size: cover;
    background-position: center center;
  }
  .woocomerce__hero-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
}
.woocomerce__hero-htitle {
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
  color: var(--white);
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-bottom: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__hero-htitle {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__hero-htitle {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__hero-htitle {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-htitle {
    font-size: 60px;
  }
}
.woocomerce__hero-htitle span {
  font-weight: 300;
}
.woocomerce__hero-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--white);
  display: block;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}
.woocomerce__hero-price {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  position: relative;
  z-index: 2;
  color: var(--white);
}
.woocomerce__hero-dis {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 21px;
  line-height: 26px;
  color: var(--white);
  max-width: 285px;
  margin-left: auto;
  z-index: 1;
  margin-right: 345px;
  margin-top: 90px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__hero-dis {
    margin-top: 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__hero-dis {
    margin-top: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__hero-dis {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-dis {
    font-size: 18px;
    margin-right: 0;
    max-width: 100%;
    margin-top: 20px;
  }
}
.woocomerce__hero-rectangle {
  position: absolute;
  right: 0;
  display: block;
  width: 728px;
  height: 290px;
  background: rgba(255, 255, 255, 0.09);
  z-index: 2;
  bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__hero-rectangle {
    height: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__hero-rectangle {
    height: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero-rectangle {
    display: none;
  }
}
.woocomerce__hero .swiper-pagination {
  width: 120px;
  left: auto;
  right: 580px;
  bottom: 214px;
  font-weight: 600;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--white);
  pointer-events: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__hero .swiper-pagination {
    bottom: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__hero .swiper-pagination {
    top: 140px;
    left: 39px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__hero .swiper-pagination {
    top: 140px;
    left: -5px;
  }
}
.woocomerce__hero .swiper-pagination-current {
  font-family: "Plus Jakarta Sans", sans-serif;
  position: relative;
  display: inline-block;
  padding-right: 6px;
}
.woocomerce__hero .swiper-pagination-current::before {
  content: "0";
}
.woocomerce__hero .swiper-pagination-total {
  position: relative;
  font-family: "Plus Jakarta Sans", sans-serif;
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  top: -10px;
  left: 10px;
}
.woocomerce__hero .swiper-pagination-total::before {
  content: "0";
}
.woocomerce__feature {
  margin-top: 90px;
  margin-bottom: 85px;
}
.woocomerce__feature.single-feature {
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}
.woocomerce__feature.category-feature {
  margin-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__feature.category-feature {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature.category-feature {
    margin-bottom: 50px;
  }
}
.woocomerce__feature-top {
  padding-bottom: 8px;
  border-bottom: 1px solid #E3DCD5;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-top {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.woocomerce__feature-viewall {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 14px;
  color: var(--black-2);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__feature-viewall:hover {
  color: var(--gray-16);
}
.woocomerce__feature-mixitupmenu {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
.woocomerce__feature-mixitupmenu li a {
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--black-2);
}
.woocomerce__feature-filtermenu {
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-filtermenu {
    padding-top: 40px;
    padding-bottom: 10px;
  }
}
.woocomerce__feature-filtermenu li button {
  font-weight: 500;
  color: var(--black-2);
}
.woocomerce__feature-rightwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-rightwrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
  }
}
.woocomerce__feature-rightwrapper.rightwrapper2::before {
  left: auto;
  right: 90px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-rightwrapper.rightwrapper2::before {
    display: none;
  }
}
.woocomerce__feature-rightwrapper::before {
  content: "";
  position: absolute;
  left: 57px;
  height: 18px;
  width: 1px;
  background: #E3DCD5;
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-rightwrapper::before {
    display: none;
  }
}
.woocomerce__feature-arrowwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.woocomerce__feature-arrowwrapper img {
  padding: 0 5px;
  margin-bottom: 2px;
}
.woocomerce__feature-arrowwrapper .swiper-button-disabled img {
  opacity: 0.5;
}
.woocomerce__feature-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 14px;
  color: var(--black-2);
}
.woocomerce__feature-wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 70px 20px;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__feature-wrapper {
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__feature-wrapper {
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-wrapper {
    grid-gap: 40px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.woocomerce__feature-product {
  position: relative;
}
.woocomerce__feature-product:hover .woocomerce__feature-hover {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.woocomerce__feature-product:hover .woocomerce__feature-producttitle {
  color: var(--gray-16);
}
.woocomerce__feature-hover {
  background: var(--black-2);
  padding: 19px 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  -webkit-transition: 1s;
  transition: 1s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__feature-hover {
    -webkit-transform: unset;
            transform: unset;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__feature-hover {
    -webkit-transform: unset;
            transform: unset;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-hover {
    -webkit-transform: unset;
            transform: unset;
  }
}
.woocomerce__feature-carttext {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -60px;
}
.woocomerce__feature-carttext a {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__feature-carttext a:hover {
  color: var(--gray-15);
}
.woocomerce__feature-heart {
  width: 60px;
  height: calc(100% - 2px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--white);
  position: absolute;
  top: 0;
  right: 0;
  margin: 1px;
}
.woocomerce__feature-heart:hover i {
  color: red;
}
.woocomerce__feature-heart i {
  font-size: 20px;
  color: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__feature-thumb {
  position: relative;
  overflow: hidden;
}
.woocomerce__feature-thumb .img-box {
  height: 555px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__feature-thumb .img-box {
    height: 420px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__feature-thumb .img-box {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__feature-thumb .img-box {
    height: 380px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__feature-thumb .img-box {
    height: 360px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__feature-thumb .img-box {
    height: 360px;
  }
}
.woocomerce__feature-thumb .img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.woocomerce__feature-mainImg {
  width: 100%;
}
.woocomerce__feature-content {
  padding-top: 20px;
}
.woocomerce__feature-category {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.woocomerce__feature-categorytitle {
  border-radius: 5px;
  padding: 5px 12px;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--black-2);
  background: rgba(255, 255, 255, 0.3);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__feature-categorytitle:hover {
  color: var(--white);
  background-color: var(--black-2);
}
.woocomerce__feature-titlewraper {
  margin-bottom: 10px;
}
.woocomerce__feature-producttitle {
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__feature-producttitle {
    font-size: 22px;
  }
}
.woocomerce__feature-newprice {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: var(--black-2);
  padding-right: 12px;
}
.woocomerce__feature-oldprice {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: #555555;
  text-decoration: line-through;
}
.woocomerce__feature .nav-pills .nav-link.active,
.woocomerce__feature .nav-pills .show > .nav-link {
  color: #555555;
  background-color: transparent;
}
.woocomerce__feature .nav-link {
  padding: 0;
}
.woocomerce__feature .nav-link:hover {
  color: var(--black-2);
}
.woocomerce__exclusive-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__exclusive-wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.woocomerce__exclusive-item {
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;

      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  position: relative;
}
.woocomerce__exclusive-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 3;
}
@media only screen and (max-width: 767px) {
  .woocomerce__exclusive-item {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}
.woocomerce__exclusive-item.item2 {
  -ms-flex-preferred-size: 68%;
      flex-basis: 68%;
  text-align: left;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__exclusive-item.item2 {
    -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__exclusive-item.item2 {
    -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__exclusive-item.item2 {
    -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__exclusive-item.item2 {
    -ms-flex-preferred-size: 55%;
        flex-basis: 55%;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__exclusive-item.item2 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}
.woocomerce__exclusive-item.item3 {
  -ms-flex-preferred-size: 32%;
      flex-basis: 32%;
  text-align: left;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__exclusive-item.item3 {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__exclusive-item.item3 {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__exclusive-item.item3 {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__exclusive-item.item3 {
    -ms-flex-preferred-size: 45%;
        flex-basis: 45%;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__exclusive-item.item3 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}
.woocomerce__exclusive-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__exclusive-content {
    padding: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__exclusive-content {
    padding: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__exclusive-content {
    padding: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__exclusive-content {
    padding: 30px;
  }
}
.woocomerce__exclusive-content.align-left {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.woocomerce__exclusive-img {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__exclusive-img {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__exclusive-img {
    height: 420px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__exclusive-img {
    height: 400px;
  }
}
.woocomerce__exclusive-img img {
  position: absolute;
  width: 100%;
  height: 120%;
  left: 0;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.woocomerce__exclusive-subtitle {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--white);
  display: inline-block;
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}
.woocomerce__exclusive-title {
  font-weight: 600;
  font-size: 50px;
  line-height: 1.2;
  color: var(--white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__exclusive-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__exclusive-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__exclusive-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__exclusive-title {
    font-size: 30px;
  }
}
.woocomerce__exclusive-btnwraper {
  margin-top: 40px;
}
.woocomerce__exclusive-btn {
  font-family: "Kanit", sans-serif;
  display: inline-block;
  padding: 20px 38px;
  text-align: center;
  border-radius: 30px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--white);
  border: 1.5px solid var(--white);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.woocomerce__exclusive-btn:hover {
  color: var(--black-2);
  background: var(--white);
}
.woocomerce__category-item {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.woocomerce__category-item:hover .woocomerce__category-hover {
  opacity: 1;
  left: 50%;
}
.woocomerce__category-item:hover .woocomerce__category-thumb::after {
  opacity: 1;
  width: 100%;
}
.woocomerce__category-thumb {
  position: relative;
  overflow: hidden;
}
.woocomerce__category-thumb::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background-color: rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__category-thumb::after {
    width: 100%;
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__category-thumb::after {
    width: 100%;
    opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__category-thumb::after {
    width: 100%;
    opacity: 1;
  }
}
.woocomerce__category-thumb img {
  width: 100%;
}
.woocomerce__category-hover {
  font-family: "Kanit", sans-serif;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 50%;
  left: 0;
  z-index: 3;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.woocomerce__category-hover:hover {
  color: var(--white-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__category-hover {
    left: 50%;
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__category-hover {
    left: 50%;
    opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__category-hover {
    left: 50%;
    opacity: 1;
  }
}
.woocomerce__category-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  padding-top: 25px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__category-title a {
  color: var(--black-2);
}
.woocomerce__category-title a:hover {
  color: var(--gray-16);
}
.woocomerce__bigImg {
  margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__bigImg {
    margin-bottom: 0;
  }
}
.woocomerce__bigImg img {
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .woocomerce__bigImg img {
    height: 300px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.woocomerce__bigImg video {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__bigImg video {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__bigImg video {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__bigImg video {
    height: 300px;
  }
}
.woocomerce__testimonial-wrapper {
  max-width: 910px;
  margin: auto;
}
.woocomerce__testimonial-item {
  text-align: center;
}
.woocomerce__testimonial-thumb {
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__testimonial-thumb {
    padding-top: 50px;
  }
}
.woocomerce__testimonial-dis {
  font-family: "Overlock", cursive;
  margin-bottom: 45px;
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  text-align: center;
  color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .woocomerce__testimonial-dis {
    font-size: 24px;
  }
}
.woocomerce__testimonial-name {
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  color: var(--black-2);
}
.woocomerce__testimonial-post {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: #555555;
}
.woocomerce__brand {
  border-bottom: 1px solid #E3DCD5;
}
.woocomerce__brand-wrapper {
  max-width: 1055px;
  margin: auto;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__brand-wrapper {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__brand-wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.woocomerce__brand .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
.woocomerce__instagram {
  padding-top: 90px;
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__instagram {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__instagram {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__instagram.woocomerce-padding {
    padding: 0;
    padding-top: 50px;
    padding-bottom: 30px;
  }
}
.woocomerce__instagram-subtitle {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
  display: block;
  text-align: center;
}
.woocomerce__instagram-title {
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: var(--black);
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__instagram-title {
    font-size: 40px;
  }
}
.woocomerce__instagram-title a {
  color: var(--black);
}
.woocomerce__instagram-title a:hover {
  color: var(--gray-16);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__instagram-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__instagram-title {
    font-size: 30px;
  }
}
.woocomerce__instagram-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin-top: 160px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__instagram-wrapper {
    gap: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__instagram-wrapper {
    margin-top: 100px;
    gap: 5px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .woocomerce__instagram-wrapper img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__instagram-wrapper {
    gap: 0;
    margin-top: 30px;
    padding-bottom: 30px;
  }
}
.woocomerce__instagram-item img {
  width: 100%;
}
.woocomerce__instagram-item:nth-child(even) {
  -webkit-transform: translateY(-70px);
          transform: translateY(-70px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__instagram-item:nth-child(even) {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__instagram-item:nth-child(even) {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__instagram-item:nth-child(even) {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.woocomerce__footer {
  background: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer {
    padding: 50px 0 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-about {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-about {
    -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    margin-bottom: 30px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-category {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-category {
    -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    margin-bottom: 30px !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-category .form-pt {
    padding-top: 45px;
  }
}
.woocomerce__footer-logo {
  padding-bottom: 35px;
  max-width: 125px;
}
.woocomerce__footer-wrapper {
  display: -ms-grid;
  display: grid;
  padding: 100px 50px;
  position: relative;
  overflow: hidden;
  -ms-grid-columns: 1.15fr 1fr 1fr 1fr 1.35fr;
  grid-template-columns: 1.15fr 1fr 1fr 1fr 1.35fr;
  border-bottom: 1px solid rgba(76, 76, 76, 0.8196078431);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-wrapper {
    grid-gap: 30px;
    -ms-grid-columns: 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr;
    padding: 100px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-wrapper {
    grid-gap: 30px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding: 0 15px;
  }
}
.woocomerce__footer-wrapper .line1 {
  left: 21%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__footer-wrapper .line1 {
    left: 22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-wrapper .line1 {
    left: 22.5%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-wrapper .line1 {
    display: none;
  }
}
.woocomerce__footer-wrapper .line2 {
  left: 38%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-wrapper .line2 {
    left: 39%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-wrapper .line2 {
    left: 50%;
  }
}
.woocomerce__footer-wrapper .line3 {
  left: 55%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-wrapper .line3 {
    display: none;
  }
}
.woocomerce__footer-wrapper .line4 {
  left: 72%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-wrapper .line4 {
    display: none;
  }
}
.woocomerce__footer-dis {
  color: var(--gray-2);
  padding-bottom: 10px;
  font-size: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-dis {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-dis {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-dis {
    font-size: 16px;
  }
}
.woocomerce__footer-mail {
  display: block;
  font-size: 18px;
  color: var(--gray-2);
  margin-bottom: 5px;
}
.woocomerce__footer-mail:hover {
  color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-mail {
    font-size: 16px;
  }
}
.woocomerce__footer-phone {
  display: block;
  color: var(--gray-2);
  font-size: 18px;
}
.woocomerce__footer-phone:hover {
  color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-phone {
    font-size: 16px;
  }
}
.woocomerce__footer-title {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 22px;
  color: var(--white);
  display: block;
  padding-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-title {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-title {
    padding-bottom: 20px;
  }
}
.woocomerce__footer-list li {
  padding-bottom: 0;
}
.woocomerce__footer-list li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--gray-16);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.woocomerce__footer-list li a:hover {
  color: var(--white);
  letter-spacing: 0.5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-list li a {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-list li a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-list li a {
    font-size: 16px;
  }
}
.woocomerce__footer-form {
  position: relative;
  margin-top: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__footer-form {
    margin-top: 20px;
  }
}
.woocomerce__footer-form input {
  width: 100%;
  height: 55px;
  padding: 20px;
  border: 1px solid var(--white);
  background: transparent;
  padding-right: 65px;
  color: var(--white);
}
.woocomerce__footer-submit {
  position: absolute;
  right: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 55px;
  border-left: 1px solid var(--white);
  width: 56px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.woocomerce__footer-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 50px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-bottom {
    gap: 20px;
    padding: 20px 15px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__footer-bottom {
    padding: 20px;
  }
}
.woocomerce__footer-copytext {
  color: var(--gray-2);
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-copytext {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    margin-top: 10px;
  }
}
.woocomerce__footer-copytext a {
  color: var(--white);
  padding-left: 2px;
}
.woocomerce__footer-copytext a:hover {
  color: var(--gray-16);
}
.woocomerce__footer-social {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__footer-social {
    padding: 20px 0;
  }
}
.woocomerce__footer-social li a {
  color: var(--white);
}
.woocomerce__footer-social li a:hover {
  color: var(--gray-16);
}
.woocomerce__footer-payment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.woocomerce__footer-payment li {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--white);
}
.woocomerce__footer-payment li:first-child {
  margin-right: 20px;
}
.woocomerce__popup {
  max-width: 850px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 55px 1fr;
  grid-template-columns: 1fr 1fr;
  padding-right: 55px;
  background: var(--white);
  margin: auto auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 55px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .woocomerce__popup {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    display: unset;
  }
}
.woocomerce__popup-subtitle {
  font-family: "Khand", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--black-2);
  display: block;
  padding-bottom: 7px;
}
.woocomerce__popup-titlewrap {
  padding: 5px 0;
}
.woocomerce__popup-title {
  font-family: "Khand", sans-serif;
  font-weight: 300;
  font-size: 90px;
  line-height: 1;
  text-align: center;
  color: var(--black-2);
}
.woocomerce__popup-title span {
  font-weight: 600;
}
.woocomerce__popup-dis {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  color: var(--black-7);
}
.woocomerce__popup-form {
  padding-top: 50px;
}
.woocomerce__popup-form input {
  width: 100%;
  height: 50px;
  padding: 15px;
  padding-right: 50px;
}
.woocomerce__popup-form input:focus {
  outline: 0;
}
.woocomerce__popup-field {
  position: relative;
  margin-bottom: 20px;
}
.woocomerce__popup-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.woocomerce__popup-btn {
  position: absolute;
  top: 25px;
  right: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__category {
    padding-bottom: 70px;
  }
}
.woocomerce__shopsidemain {
  padding-bottom: 100px;
}

.woocomerce-padding {
  padding-left: 50px;
  padding-right: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce-padding {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce-padding {
    padding-left: 15px;
    padding-right: 15px;
  }
}

ul.mega-menu-2.woocomerce-megamenu {
  left: 62px;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.woocomerce-active .swiper-slide-active .woocomerce__hero-htitle {
  -webkit-animation: wcfadeUp 1s 0.5s forwards;
          animation: wcfadeUp 1s 0.5s forwards;
}
.woocomerce-active .swiper-slide-active .woocomerce__hero-subtitle {
  -webkit-animation: wcfadeUp 1.2s 0.5s forwards;
          animation: wcfadeUp 1.2s 0.5s forwards;
}
.woocomerce-active .swiper-slide-active .woocomerce__hero-price {
  -webkit-animation: wcfadeUp 1.4s 0.5s forwards;
          animation: wcfadeUp 1.4s 0.5s forwards;
}
.woocomerce-active .swiper-slide-active .woocomerce__hero-dis {
  -webkit-animation: wcfadeUp 1s 0.7s forwards;
          animation: wcfadeUp 1s 0.7s forwards;
}

.sec-plr-50 {
  padding-left: 50px;
  padding-right: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-plr-50 {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-plr-50 {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.woocomerce__shopinner {
  padding-bottom: 100px;
  padding-top: 30px;
}
.woocomerce__filtering {
  padding-bottom: 30px;
  padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__filtering {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__filtering {
    padding-top: 60px;
  }
}
.woocomerce__filtering-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.woocomerce__filtering-leftinner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}
.woocomerce__filtering-brand.shop-left {
  padding-bottom: 15px;
}
.woocomerce__filtering-catefield {
  padding-bottom: 0;
}
.woocomerce__filtering-colors {
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 9;
  width: 300px;
  background: var(--white);
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 30px 10px;
  display: none;
}
.woocomerce__filtering-cats {
  border: none;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.woocomerce__filtering-ftitle {
  color: var(--black-2);
  display: block;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 18px;
  border-bottom: 1px solid var(--gray-4);
  text-transform: capitalize;
}
.woocomerce__filtering-catefield {
  font-family: "Kanit", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 300;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  padding-bottom: 10px;
}
.woocomerce__filtering-catefield input,
.woocomerce__filtering-catefield label {
  cursor: pointer;
}
.woocomerce__filtering-catefield label {
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__filtering-catefield label:hover {
  letter-spacing: 0.5px;
}
.woocomerce__filtering-filtericon {
  text-transform: capitalize;
  font-size: 17px;
  cursor: pointer;
  padding-bottom: 10px;
  display: block;
}
.woocomerce__filtertitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--black-2);
  font-family: "Kanit", sans-serif;
}
.woocomerce__sortbuttons {
  gap: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.woocomerce__sortbuttons li {
  z-index: unset;
}
.woocomerce__sortbuttons .item {
  font-family: "Kanit", sans-serif;
  padding: 13px 20px;
  background: var(--gray-4);
  border-radius: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--black-2);
  position: relative;
  z-index: unset;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;
}
.woocomerce__sortbuttons .item:hover, .woocomerce__sortbuttons .item.active {
  color: var(--gray-4);
  background-color: var(--black-2);
}
.woocomerce__search {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  background: #F7F7F7;
  border-radius: 20px;
  height: 40px;
  border: 0;
  padding: 20px;
  width: 460px;
  font-size: 14px;
  line-height: 1;
}
.woocomerce__search:focus {
  outline: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__search {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__search {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__search {
    display: none;
  }
}
@media (min-width: 1200px) {
  .woocomerce__filteringsearch {
    display: none;
  }
}
.woocomerce__shopsidebar {
  max-width: 265px;
}
@media (max-width: 991px) {
  .woocomerce__shopsidebar {
    position: absolute;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    top: 160px;
    left: -100%;
    z-index: 9;
    padding: 20px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    background-color: var(--white);
  }
}
.woocomerce__shopsidebar.showed {
  left: 0;
}
.woocomerce__shopsidebar .accordion:last-child {
  border-bottom: 1px solid var(--black-2);
}
.woocomerce__shopsidebar-title {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--black-2);
  margin-bottom: 28px;
}
.woocomerce__shopsidebar-title.title-pt {
  padding-top: 30px;
}
.woocomerce__shopsidebar .accordion-item {
  border: 0;
  border-radius: 0;
}
.woocomerce__shopsidebar .accordion-button:focus {
  z-index: 3;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0;
}
.woocomerce__shopsidebar .accordion-button {
  padding: 10px 0;
  color: var(--black-2);
  border-radius: 0;
  font-size: 14px;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: transparent;
  text-transform: capitalize;
  border-top: 1px solid var(--black-2);
}
.woocomerce__shopsidebar .accordion-button:hover {
  letter-spacing: 0.5px;
}
.woocomerce__shopsidebar .short-by {
  border-bottom: 1px solid var(--black-2);
}
.woocomerce__shopsidebar .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.woocomerce__shopsidebar .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.woocomerce__shopsidebar .accordion-button::after {
  background-image: url("./d");
  content: "+";
  font-weight: 700;
  font-family: "Font Awesome 6 Free";
  -webkit-transform: unset;
          transform: unset;
  position: absolute;
  top: 12px;
  right: 0;
}
.woocomerce__shopsidebar .accordion-button:not(.collapsed)::after {
  background-image: url("./d");
  content: "\f068";
  font-family: "Font Awesome 6 Free";
  -webkit-transform: unset;
          transform: unset;
}
.woocomerce__shopsidebar-list {
  margin: 0;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 25px;
}
.woocomerce__shopsidebar-list li {
  margin-bottom: 0px;
}
.woocomerce__shopsidebar-list li a {
  font-weight: 300;
  font-size: 14px;
  color: var(--black-2);
  font-family: "Kanit", sans-serif;
}
.woocomerce__shopsidebar-list li a:hover {
  letter-spacing: 0.5px;
}
.woocomerce__single {
  padding-top: 105px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single {
    padding-top: 50px;
  }
}
.woocomerce__single-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.8fr 175px 1fr;
  grid-template-columns: 1.8fr 1fr;
  grid-gap: 175px;
  padding-bottom: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .woocomerce__single-wrapper {
    grid-gap: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__single-wrapper {
    grid-gap: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single-wrapper {
    grid-gap: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-wrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    grid-gap: 40px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-left {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.woocomerce__single-productview {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  position: relative;
  z-index: 0;
  -ms-grid-columns: 1fr 10px 1fr;
  grid-template-columns: 1fr 1fr;
}
.woocomerce__single-productview img {
  width: 100%;
}
.woocomerce__single-productMore {
  padding-top: 90px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single-productMore {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-productMore {
    padding-top: 50px;
  }
}
.woocomerce__single-productMore .nav-tabs {
  border: 0;
}
.woocomerce__single-productMore .nav-link {
  border: 0;
  padding: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--gray-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-family: "Kanit", sans-serif;
}
.woocomerce__single-productMore .nav-link .active, .woocomerce__single-productMore .nav-link:hover {
  color: var(--black-2);
}
.woocomerce__single-productMore .nav-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 70px;
  position: relative;
  margin-bottom: 40px;
}
.woocomerce__single-productMore .nav-tabs::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 100%;
  background: var(--black-2);
  z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single-productMore .nav-tabs {
    gap: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-productMore .nav-tabs {
    gap: 10px;
  }
}
.woocomerce__single-productMore p {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 25px;
  color: var(--black);
}
.woocomerce__single-breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.woocomerce__single-breadcrumb li a {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 0.9;
  color: var(--black-2);
  text-transform: capitalize;
}
.woocomerce__single-breadcrumb li a i {
  padding-left: 2px;
  font-size: 11px;
}
.woocomerce__single-title {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1.1;
  color: var(--black-2);
  padding-top: 18px;
  padding-bottom: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__single-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single-title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-title {
    font-size: 40px;
  }
}
.woocomerce__single-pricelist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.woocomerce__single-discountprice {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 28px;
  color: var(--black-2);
  padding-right: 6px;
}
.woocomerce__single-originalprice {
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  color: #8C8C8C;
  text-decoration: line-through;
}
.woocomerce__single-discount {
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  color: #DA2F2F;
}
.woocomerce__single-review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 10px;
}
.woocomerce__single-review i {
  font-size: 13px;
  color: var(--black-2);
}
.woocomerce__single-reviewcount {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: #555555;
}
.woocomerce__single-discription {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 25px;
  color: #555555;
  padding-top: 36px;
}
.woocomerce__single-features {
  padding-top: 25px;
}
.woocomerce__single-features li {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 25px;
  color: var(--black-2);
  padding-bottom: 3px;
}
.woocomerce__single-features li img {
  padding-right: 10px;
}
.woocomerce__single-varitions {
  padding-top: 40px;
}
.woocomerce__single-stitle {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: var(--black-2);
}
.woocomerce__single-sizelist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.woocomerce__single-sizelist li {
  background: #F1F1F1;
  border-radius: 12.5px;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  color: var(--black-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-transform: uppercase;
  padding: 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__single-sizelist li:hover {
  color: var(--white);
  background-color: var(--black-2);
}
.woocomerce__single-sku {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--black-2);
  padding-top: 21px;
  margin-bottom: 0;
}
.woocomerce__single .counter__input {
  border: 0;
  text-align: center;
}
.woocomerce__single .counter__input:focus {
  outline: 0;
}
.woocomerce__single .counter__decrement,
.woocomerce__single .counter__increment {
  font-size: 25px;
  color: var(--black-2);
}
.woocomerce__single-counter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 200px;
  max-width: 200px;
  border: 1px solid var(--white-3);
  padding: 14px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .woocomerce__single-counter {
    min-width: 125px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__single-counter {
    min-width: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single-counter {
    min-width: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-counter {
    min-width: 120px;
  }
}
.woocomerce__single-counter.counter2 {
  min-width: 90px;
  max-width: 90px;
  border-radius: 17.5px;
  padding: 5px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-counter.counter2 {
    margin-left: 90px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.woocomerce__single-incrementwrap {
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__single-incrementwrap {
    gap: 5px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single-incrementwrap {
    gap: 5px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-incrementwrap {
    gap: 5px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.woocomerce__single-cart {
  gap: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--white);
  padding: 23px 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-family: "Kanit", sans-serif;
  text-transform: uppercase;
}
.woocomerce__single-cart:hover {
  color: var(--gray-15);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__single-cart {
    padding: 25px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__single-cart {
    padding: 22px 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__single-cart {
    padding: 22px 18px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__single-cart {
    padding: 22px 20px;
  }
}
.woocomerce__single .accordion-item {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--black-2);
}
.woocomerce__single .accordion-item:first-child {
  border-top: 1px solid var(--black-2);
}
.woocomerce__single .accordion-button:focus {
  z-index: 3;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0;
}
.woocomerce__single .accordion-button {
  padding: 8px 0;
  color: var(--black-2);
  border-radius: 0;
  margin-bottom: 0;
  gap: 78px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .woocomerce__single .accordion-button {
    gap: 55px;
  }
}
.woocomerce__single .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.woocomerce__single .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.woocomerce__single .accordion-button::after {
  background-image: url("./d");
  content: "+";
  font-weight: 700;
  font-family: "Font Awesome 6 Free";
  -webkit-transform: unset;
          transform: unset;
}
.woocomerce__single .accordion-button:not(.collapsed)::after {
  background-image: url("./d");
  content: "\f068";
  font-family: "Font Awesome 6 Free";
  -webkit-transform: unset;
          transform: unset;
}
.woocomerce__cart {
  position: relative;
  padding-bottom: 300px;
  border-top: 1px solid var(--white-3);
  padding-left: 50px;
  padding-right: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart {
    border: 0;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart {
    border: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 60px;
  }
}
.woocomerce__cart::before {
  content: "";
  position: absolute;
  left: 430px;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--white-3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart::before {
    left: 330px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart::before {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart::before {
    display: none;
  }
}
.woocomerce__cart.checkout-page {
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart.checkout-page {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart.checkout-page {
    padding-bottom: 50px;
  }
}
.woocomerce__cart.checkout-page::before {
  left: 500px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart.checkout-page::before {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart.checkout-page::before {
    display: none;
  }
}
.woocomerce__cart-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 500px 110px 1fr;
  grid-template-columns: 500px 1fr;
  gap: 110px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__cart-wrapper {
    gap: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__cart-wrapper {
    gap: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart-wrapper {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart-wrapper {
    gap: 20px;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-wrapper {
    gap: 20px;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
  }
}
.woocomerce__cart-wrapper.cartwrapper {
  gap: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__cart-wrapper.cartwrapper {
    -ms-grid-columns: 440px 1fr;
    grid-template-columns: 440px 1fr;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart-wrapper.cartwrapper {
    gap: 0;
    -ms-grid-columns: 340px 0 1fr;
    grid-template-columns: 340px 1fr;
  }
}
.woocomerce__cart-left {
  max-width: 500px;
  padding-right: 50px;
  padding-top: 80px;
  position: relative;
}
.woocomerce__cart-left.cartleft {
  max-width: 430px;
  padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart-left.cartleft {
    padding-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-left.cartleft {
    padding-top: 30px;
  }
}
.woocomerce__cart-left.checkout {
  padding-top: 100px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-left.checkout {
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart-left {
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-left {
    -ms-grid-row: 2;
    grid-row: 2;
    padding-top: 0;
    padding-right: 0;
  }
}
.woocomerce__cart-right {
  padding-top: 80px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-right {
    padding-top: 30px;
  }
}
.woocomerce__cart-right.cart-right1 {
  padding-top: 100px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-right.cart-right1 {
    padding-top: 60px;
  }
}
.woocomerce__cart-right.checkout {
  padding-top: 100px;
  padding-bottom: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart-right.checkout {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-right.checkout {
    padding-bottom: 30px;
  }
}
.woocomerce__cart-content {
  padding-right: 55px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-content {
    padding-right: 0;
  }
}
.woocomerce__cart-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--white-3);
  margin-bottom: 30px;
}
.woocomerce__cart-header li {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  color: var(--black-2);
  font-family: "Kanit", sans-serif;
}
.woocomerce__cart-header li:nth-child(even) {
  text-align: right;
}
.woocomerce__cart-amountlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.woocomerce__cart-amountlist li {
  font-family: "Kanit", sans-serif;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--black);
  padding-bottom: 3px;
}
.woocomerce__cart-amountlist li:nth-child(even) {
  text-align: right;
}
.woocomerce__cart-info {
  padding-top: 20px;
  padding-bottom: 50px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--black-7);
}
.woocomerce__cart-btn {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  padding: 22px;
  background: var(--black-2);
  display: block;
  width: 100%;
}
.woocomerce__cart-form {
  padding-top: 20px;
}
.woocomerce__cart-form span {
  font-family: "Kanit", sans-serif;
  display: inline-block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.1;
  color: var(--black-2);
}
.woocomerce__cart-field input {
  width: 200px;
  border: 1px solid var(--white-3);
  height: 60px;
  padding: 15px;
}
.woocomerce__cart-field input:focus {
  outline: 0;
}
.woocomerce__cart-couponbtn {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  color: var(--black-2);
  border: 1px solid var(--black-2);
  width: 120px;
  height: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart-couponbtn {
    margin-top: 10px;
  }
}
.woocomerce__cart-title {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  color: var(--black-2);
}
.woocomerce__cart-menuitems {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.7fr 0.5fr 0.7fr 0.5fr auto;
  grid-template-columns: 1.7fr 0.5fr 0.7fr 0.5fr auto;
  padding-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-menuitems {
    display: none;
  }
}
.woocomerce__cart-menuitems li {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--black);
}
.woocomerce__cart-productlist {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.7fr 0.5fr 0.7fr 0.5fr auto;
  grid-template-columns: 1.7fr 0.5fr 0.7fr 0.5fr auto;
  margin-bottom: 40px;
  border-top: 1px solid var(--white-3);
  padding-top: 30px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-productlist {
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    margin-bottom: 20px;
    position: relative;
  }
}
.woocomerce__cart-cartdata {
  padding-bottom: 45px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-cartdata {
    padding-bottom: 15px;
  }
}
.woocomerce__cart-rtitle {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  display: block;
  padding-bottom: 12px;
}
.woocomerce__cart-rtitle a {
  color: var(--black-2);
}
.woocomerce__cart-pinfo li {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--black-7);
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-pinfo li {
    padding-bottom: 5px;
  }
}
.woocomerce__cart-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart-product {
    gap: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart-thumb img {
    max-width: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart-thumb img {
    max-width: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-thumb img {
    max-width: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-price, .woocomerce__cart-total {
    padding-left: 90px;
  }
}
.woocomerce__cart-close img {
  width: 15px;
  height: 15px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-close {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
.woocomerce__cart .counter__input {
  border: 0;
  text-align: center;
}
.woocomerce__cart .counter__input:focus {
  outline: 0;
}
.woocomerce__cart .counter__decrement {
  color: var(--black-2);
}
.woocomerce__cart .counter__decrement.decrement2 {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
.woocomerce__cart .counter__increment {
  color: var(--black-2);
}
.woocomerce__cart .counter__increment.increment2 {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
.woocomerce__cart-counter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 200px;
  max-width: 200px;
  border: 1px solid var(--white-3);
  padding: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .woocomerce__cart-counter {
    min-width: 125px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart-counter {
    min-width: 125px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart-counter {
    min-width: 125px;
  }
}
.woocomerce__cart-incrementwrap {
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__cart-incrementwrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__cart-incrementwrap {
    gap: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-incrementwrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 5px;
  }
}
.woocomerce__cart-topamount {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  color: var(--black-2);
}
.woocomerce__cart-upcart a {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  color: var(--black-7);
  text-decoration: underline;
}
.woocomerce__cart-payheaderup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--white-3);
  padding-bottom: 10px;
  margin-bottom: 40px;
  margin-right: 50px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__cart-payheaderup {
    margin-right: 0;
  }
}
.woocomerce__cart-payheader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px;
}
.woocomerce__cart-payheader input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.woocomerce__cart-payheader input:checked ~ p::after {
  opacity: 1;
  visibility: visible;
}
.woocomerce__cart-payheader p {
  color: var(--black);
  font-size: 14px;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  position: relative;
  padding-left: 30px;
}
.woocomerce__cart-payheader p::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50px;
  border: 1px solid var(--gray-2);
  top: -3px;
  left: 0;
  position: absolute;
}
.woocomerce__cart-payheader p::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 6px;
  height: 6px;
  background: var(--black-2);
  z-index: 99;
  border-radius: 50px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__cart-payleft {
  display: inherit;
}
.woocomerce__cart-paymentmenu {
  padding-top: 25px;
  max-width: 400px;
}
.woocomerce__cart-paymentmenu .accordion-item {
  cursor: pointer;
  border-radius: 0;
}
.woocomerce__cart-paymentmenu .accordion-item label {
  display: block;
  cursor: pointer;
}
.woocomerce__cart-cardlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
}
.woocomerce__cart .accordion-button {
  display: unset;
  padding: 0;
}
.woocomerce__cart .accordion-button:focus {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.woocomerce__cart .accordion-button::after {
  display: none;
}
.woocomerce__cart-checktitle {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  color: var(--black-2);
}
.woocomerce__cart-checkdis {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--black-7);
  padding-top: 5px;
}
.woocomerce__cart .accordion-button:not(.collapsed) {
  background: transparent;
}
.woocomerce__checkout-field label {
  display: inline-block;
  padding-bottom: 10px;
  font-size: 14px;
  font-family: "Kanit", sans-serif;
}
.woocomerce__checkout-field input {
  width: 100%;
  padding: 0 15px;
  height: 50px;
  border: 1px solid var(--white-3);
}
.woocomerce__checkout-field input::-webkit-input-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--gray-2);
}
.woocomerce__checkout-field input::-moz-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--gray-2);
}
.woocomerce__checkout-field input:-ms-input-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--gray-2);
}
.woocomerce__checkout-field input::-ms-input-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--gray-2);
}
.woocomerce__checkout-field input::placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--gray-2);
}
.woocomerce__checkout-field input:focus {
  outline: 0;
}
.woocomerce__checkout-fieldwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding-top: 5px;
}
.woocomerce__checkout-fieldwrapper .cvvfield {
  max-width: 130px;
}
.woocomerce__checkout .accordion-body {
  background: #FCFCFC;
}
.woocomerce__checkout-btnwrapper {
  padding-top: 30px;
}
.woocomerce__checkout-submitbtn {
  background: var(--black-2);
  color: var(--white);
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  display: block;
  width: 100%;
  padding: 22px 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 1px solid transparent;
}
.woocomerce__checkout-submitbtn:hover {
  color: var(--black-2);
  border-color: var(--black-2);
  background-color: transparent;
}
.woocomerce__checkout-rtitle {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  color: var(--black-2);
  display: block;
  padding-bottom: 45px;
}
.woocomerce__checkout-frfieldwrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 20px;
  -ms-grid-columns: 2fr 20px 0.6fr;
  grid-template-columns: 2fr 0.6fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__checkout-frfieldwrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__checkout-frfieldwrapper {
    -ms-grid-columns: 2fr 20px 1fr;
    grid-template-columns: 2fr 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__checkout-frfieldwrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__checkout-rformfield {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__checkout-rformfield {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.woocomerce__checkout-frfieldwrapper2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__checkout-frfieldwrapper2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__checkout-frfieldwrapper2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.woocomerce__checkout-frfieldwrapper3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__checkout-frfieldwrapper3 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__checkout-frfieldwrapper3 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.woocomerce__checkout-rformfield label {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black-2);
  display: block;
  padding-bottom: 7px;
}
.woocomerce__checkout-rformfield input {
  width: 100%;
  border: 1px solid var(--white-3);
  height: 50px;
  padding: 15px;
}
.woocomerce__checkout-rformfield input::-webkit-input-placeholder {
  font-weight: 300;
}
.woocomerce__checkout-rformfield input::-moz-placeholder {
  font-weight: 300;
}
.woocomerce__checkout-rformfield input:-ms-input-placeholder {
  font-weight: 300;
}
.woocomerce__checkout-rformfield input::-ms-input-placeholder {
  font-weight: 300;
}
.woocomerce__checkout-rformfield input::placeholder {
  font-weight: 300;
}
.woocomerce__checkout-rformfield input:focus {
  outline: 0;
}
.woocomerce__checkout-frfieldwrapperc {
  margin-bottom: 25px;
}
.woocomerce__checkout-fieldright p {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.3;
  text-align: right;
  color: var(--black-7);
  margin: 0;
}
.woocomerce__checkout-fieldright p a {
  font-weight: 400;
  color: var(--black-2);
  text-decoration: underline;
}
.woocomerce__checkout-fieldright p a:hover {
  color: var(--black-7);
}
.woocomerce__checkout-checker input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.woocomerce__checkout-checker input:checked ~ label::after {
  opacity: 1;
  visibility: visible;
}
.woocomerce__checkout-checker label {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: var(--black-2);
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.woocomerce__checkout-checker label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid var(--gray-2);
  top: -3px;
  left: 0;
  position: absolute;
}
.woocomerce__checkout-checker label::after {
  content: "";
  position: absolute;
  background-image: url(../imgs/woocomerce/check-sign.png);
  top: 3px;
  left: 6px;
  width: 100%;
  height: 100%;
  z-index: 99;
  border-radius: 50px;
  opacity: 0;
  visibility: hidden;
  background-repeat: no-repeat;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__checkout-msg label {
  display: block;
  padding-bottom: 10px;
}
.woocomerce__checkout-msg textarea {
  height: 90px;
  width: 100%;
  border: 1px solid var(--white-3);
  padding: 15px;
}
.woocomerce__checkout-msg textarea:focus {
  outline: 0;
}
.woocomerce__categoryp {
  padding-top: 125px;
  padding-bottom: 125px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__categoryp {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__categoryp {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__categoryp {
    padding-top: 50px;
  }
}
.woocomerce__categoryp-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.4fr 110px 2fr;
  grid-template-columns: 0.4fr 2fr;
  grid-gap: 110px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__categoryp-wrapper {
    -ms-grid-columns: 0.4fr 60px 2fr;
    grid-template-columns: 0.4fr 2fr;
    grid-gap: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__categoryp-wrapper {
    -ms-grid-columns: 0.4fr 60px 2fr;
    grid-template-columns: 0.4fr 2fr;
    grid-gap: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__categoryp-wrapper {
    -ms-grid-columns: 0.6fr 50px 2fr;
    grid-template-columns: 0.6fr 2fr;
    grid-gap: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__categoryp-wrapper {
    grid-gap: 50px;
    -ms-grid-columns: 0.6fr 50px 2fr;
    grid-template-columns: 0.6fr 2fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__categoryp-wrapper {
    grid-gap: 50px;
    -ms-grid-columns: 0.5fr 50px 2fr;
    grid-template-columns: 0.5fr 2fr;
  }
}
.woocomerce__categoryp img {
  width: 100%;
}
.woocomerce__categoryp-list li {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--gray-2);
  padding: 18px 0;
  border-top: 1px solid var(--white-3);
  -webkit-transition: 1s;
  transition: 1s;
  position: relative;
}
.woocomerce__categoryp-list li:hover, .woocomerce__categoryp-list li.active {
  color: var(--black-2);
}
.woocomerce__categoryp-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr auto;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__categoryp-items {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__categoryp-items {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__categoryp-items {
    grid-gap: 40px;
    -ms-grid-columns: 1fr 40px 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__categoryp-items {
    grid-gap: 40px;
    -ms-grid-columns: 1fr 40px 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__categoryp-items {
    grid-gap: 30px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.woocomerce__categoryp-rlist li a {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 2;
  color: var(--black-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__categoryp-rlist li a:hover {
  letter-spacing: 0.5px;
}
.woocomerce__categoryp-titlewrapper {
  padding-bottom: 15px;
}
.woocomerce__categoryp-itemtitle {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--black-2);
}

.blue,
.gray,
.skyblue,
.red,
.yellow {
  display: inline-block;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background: var(--gray-2);
  outline: 0;
  border: 1px solid transparent;
  cursor: pointer;
}
.blue.active,
.gray.active,
.skyblue.active,
.red.active,
.yellow.active {
  position: relative;
}
.blue.active::after,
.gray.active::after,
.skyblue.active::after,
.red.active::after,
.yellow.active::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 15px;
  left: 12px;
  top: 6px;
  border-bottom: 1px solid var(--white);
  border-right: 1px solid var(--white);
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}

.yellow {
  background: var(--primary);
}

.red {
  background: var(--pink-2);
}

.gray {
  background: var(--gray-12);
}

.skyblue {
  background: var(--pink-5);
}

.woocomerce__header .main-menu-3.woocomerce-menu > li > a {
  color: var(--black-2);
}

.price-range-slider {
  width: 100%;
  float: left;
  padding: 0;
}

.price-range-slider .range-value {
  margin: 0;
}

.price-range-slider .range-value input {
  width: 100%;
  background: none;
  color: #000;
  font-size: 16px;
  font-weight: initial;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  margin: 20px 0 20px 0;
  margin-top: 0;
}

.price-range-slider .range-bar {
  border: none;
  height: 3px;
  width: 92%;
  z-index: 9;
  margin-left: 13px;
  margin-bottom: 25px;
  background: var(--black-2);
}

.price-range-slider .range-bar .ui-slider-range {
  background: var(--black-2);
}

.price-range-slider .range-bar .ui-slider-handle {
  border: none;
  border-radius: 25px;
  background: #fff;
  border: 2px solid #06b9c0;
  height: 17px;
  width: 17px;
  top: -8px;
  cursor: pointer;
}

.price-range-slider .range-bar .ui-slider-handle + span {
  background: #06b9c0;
}

.dropdowncommon {
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 9;
  width: 300px;
  background: var(--white);
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 30px 10px;
  display: none;
}
.dropdowncommon.mobile {
  display: block;
  position: static;
  margin-bottom: 15px;
}
.dropdowncommon.shop-left {
  position: static;
  display: block;
  width: 100%;
}

@media (max-width: 991px) {
  .woocomerce__filtering-wrapper {
    display: none;
  }
}
@media (min-width: 991px) {
  .woocomerce__filtering-mobwrapper {
    display: none;
  }
}
.woocomerce__cart-payheader input:checked .woocomerce__cart-payheader label::after {
  opacity: 1;
  visibility: visible;
}

.cat-icon {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.cateitem.active .plus {
  opacity: 0;
  visibility: hidden;
}

.pl-50 {
  padding-left: 50px;
  padding-right: 50px;
}

.woc__filtering-icon {
  display: none;
}
@media (max-width: 991px) {
  .woc__filtering-icon {
    display: block;
  }
}

.woc__sfw_mobile {
  display: none;
}
@media (max-width: 991px) {
  .woc__sfw_mobile {
    display: block;
  }
}

.woocomerce__signin {
  max-width: 690px;
  margin: 150px auto 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__signin {
    margin: 120px auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__signin {
    margin: 100px auto;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__signin {
    margin: 60px auto;
  }
}
.woocomerce__signin-titlewrap {
  padding-bottom: 30px;
}
.woocomerce__signin-title {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.8;
  color: var(--black-2);
  display: block;
}
.woocomerce__signin-dis {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: var(--black-7);
}
.woocomerce__signin-dis span {
  font-weight: 500;
  color: var(--black-2);
}
.woocomerce__signin-field {
  margin-bottom: 25px;
}
.woocomerce__signin-field label {
  display: block;
  padding-bottom: 7px;
  font-size: 14px;
  font-family: "Kanit", sans-serif;
}
.woocomerce__signin-field input {
  width: 100%;
  border: 1px solid #E9E9E9;
  height: 50px;
  padding: 15px;
  padding-right: 46px;
}
.woocomerce__signin-field input::-webkit-input-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
.woocomerce__signin-field input::-moz-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
.woocomerce__signin-field input:-ms-input-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
.woocomerce__signin-field input::-ms-input-placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
.woocomerce__signin-field input::placeholder {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
.woocomerce__signin-field input:focus {
  outline: 0;
}
.woocomerce__signin-passwordfield {
  position: relative;
}
.woocomerce__signin-view {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.woocomerce__signin-checkbox input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.woocomerce__signin-checkbox input:checked ~ label::after {
  opacity: 1;
  visibility: visible;
}
.woocomerce__signin-checkbox label {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: var(--black-2);
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.woocomerce__signin-checkbox label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid #999999;
  top: -3px;
  left: 0;
  position: absolute;
}
.woocomerce__signin-checkbox label::after {
  content: "";
  position: absolute;
  background-image: url(../imgs/woocomerce/check-sign.png);
  top: 3px;
  left: 6px;
  width: 100%;
  height: 100%;
  z-index: 99;
  border-radius: 50px;
  opacity: 0;
  visibility: hidden;
  background-repeat: no-repeat;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__signin-btnwrap {
  padding-top: 30px;
  padding-bottom: 50px;
}
.woocomerce__signin-btnwrap.signupbtn {
  padding-top: 8px;
  padding-bottom: 30px;
}
.woocomerce__signin-resetbuton {
  padding-top: 5px;
}
.woocomerce__signin-formfooter p {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  color: var(--black-7);
  padding-bottom: 10px;
}
.woocomerce__signin-formfooter p a {
  color: var(--black-2);
  text-decoration: underline;
}
.woocomerce__signin-formfooter p a:hover {
  color: var(--black-7);
}
.woocomerce__signin-formfooter a {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  color: var(--black-7);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.woocomerce__signin-formfooter a:hover {
  color: var(--black-2);
}

.woocomerce__account {
  border-top: 1px solid #E9E9E9;
}
.woocomerce__account-wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 110px;
  -ms-grid-columns: 0.75fr 110px 3fr;
  grid-template-columns: 0.75fr 3fr;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .woocomerce__account-wrapper {
    grid-gap: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .woocomerce__account-wrapper {
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__account-wrapper {
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__account-wrapper {
    grid-gap: 50px;
    -ms-grid-columns: 1fr 50px 3fr;
    grid-template-columns: 1fr 3fr;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__account-wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.woocomerce__account-titlewrapper {
  padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  .woocomerce__account-titlewrapper {
    padding-bottom: 20px;
  }
}
.woocomerce__account-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black-2);
}
.woocomerce__account-left {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
}
.woocomerce__account-left::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background: #E9E9E9;
}
@media only screen and (max-width: 767px) {
  .woocomerce__account-left::before {
    display: none;
  }
}
.woocomerce__account-menus li {
  padding-bottom: 7px;
}
.woocomerce__account-menus li .nav-link {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  color: var(--black-7);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.woocomerce__account-menus li .nav-link.active {
  color: var(--black-2);
  font-weight: 500;
}
.woocomerce__account-menus li .nav-link.active::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 30px;
  background: var(--black-2);
  -webkit-transition: 1s;
  transition: 1s;
}
.woocomerce__account-menus li .nav-link:hover {
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--black-2);
}
.woocomerce__account-right {
  padding-top: 100px;
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__account-right {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__account-right {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__account-right {
    border: 0;
    padding-top: 50px;
    padding-bottom: 60px;
  }
}
.woocomerce__account-rtitlewrap {
  padding-bottom: 60px;
}
.woocomerce__account-rtitle {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.5;
  color: var(--black-2);
  font-family: "Plus Jakarta Sans", sans-serif;
  text-transform: capitalize;
}
.woocomerce__account-dis {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-7);
  padding-top: 15px;
}
.woocomerce__account-dis span {
  color: var(--black-2);
  font-weight: 500;
}
.woocomerce__account-divider {
  width: 100%;
  height: 1px;
  background: #E9E9E9;
}
.woocomerce__account-footer {
  padding-top: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .woocomerce__account-footer {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .woocomerce__account-footer {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .woocomerce__account-footer {
    padding-top: 60px;
  }
}

.wishlist {
  width: 25%;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .wishlist {
    width: 45%;
  }
}
@media only screen and (max-width: 767px) {
  .wishlist {
    width: 100%;
  }
}
.wishlist:hover .wishlist__hover {
  opacity: 1;
  visibility: visible;
}
.wishlist:hover .wishlist__mainImg {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.wishlist:hover .wishlist__thumb::before {
  background: rgba(0, 0, 0, 0.5);
}
.wishlist__thumb {
  position: relative;
  overflow: hidden;
}
.wishlist__thumb::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9;
  -webkit-transition: 1s;
  transition: 1s;
}
.wishlist__mainImg {
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.wishlist__content {
  padding-top: 15px;
}
.wishlist__title {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  padding-bottom: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .wishlist__title {
    font-size: 18px;
  }
}
.wishlist__title a {
  color: var(--black-2);
}
.wishlist__hover {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  z-index: 9;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
.wishlist__price {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  color: var(--black-2);
}
.wishlist__hbtn {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  border: 1px solid var(--white);
  display: block;
  padding: 10px 15px;
  border-radius: 50px;
}
.wishlist__hbtn img {
  padding-right: 5px;
}
.wishlist__hbtn:hover {
  color: var(--white);
}

.wishlist__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .wishlist__items {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .wishlist__items {
    gap: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .wishlist__items {
    gap: 40px 30px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .wishlist__items {
    gap: 40px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.dir-rtl {
  direction: rtl;
}
.dir-rtl li {
  text-align: right;
}
.dir-rtl .scroll-top {
  right: unset;
  left: 20px;
}
.dir-rtl .wc-btn-primary i,
.dir-rtl .wc-btn-black i,
.dir-rtl .wc-btn-light i,
.dir-rtl .wc-btn-pink i,
.dir-rtl .wc-btn-secondary i {
  -webkit-transform: rotate(-130deg);
          transform: rotate(-130deg);
}
.dir-rtl .shape {
  left: 0;
  right: -90px;
}
.dir-rtl .shape .primary {
  margin-left: 0;
  margin-right: 24px;
}
.dir-rtl .btn-view i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .sec-title-4 span {
  padding-left: 0;
  padding-right: 298px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .sec-title-4 span {
    padding-right: 0;
  }
}
.dir-rtl .sec-title-5 {
  padding-left: 0;
  padding-right: 98px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .sec-title-5 {
    padding-right: 0;
  }
}
.dir-rtl .menu-text-pp {
  padding-right: 0;
  padding-left: 10px;
}
.dir-rtl .circle-pagination-2 {
  left: unset !important;
  right: 20px !important;
}
@media (max-width: 1919px) {
  .dir-rtl .circle-pagination-2 {
    right: 0 !important;
  }
}
.dir-rtl .menu-text-5 {
  padding-right: 0;
  padding-left: 10px;
}
.dir-rtl .btn-together i {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.dir-rtl .header__area {
  right: 0;
  left: unset;
  border: none;
  border-left: 1px solid rgba(240, 240, 240, 0.07);
}
.dir-rtl .header__search {
  right: unset;
  left: 60px;
}
.dir-rtl .header__nav-2 {
  text-align: left;
}
.dir-rtl .header__nav-icon-7 .menu-icon-2::after {
  left: -60px;
  right: unset;
}
.dir-rtl .offcanvas__close {
  right: unset;
  left: 40px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__close {
    left: 15px;
  }
}
.dir-rtl .offcanvas__logo {
  padding: 55px 50px 55px 0;
}
.dir-rtl .offcanvas__social {
  padding-left: 0;
  padding-right: 50px;
}
.dir-rtl .offcanvas__links {
  padding-left: unset;
  padding-right: 50px;
}
.dir-rtl .offcanvas__left {
  border: none;
  border-left: 1px solid var(--black-4);
}
.dir-rtl .offcanvas__search button {
  right: unset;
  left: 0;
}
.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px 100px 20px 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 20px;
  }
}
.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  left: 0;
  right: unset;
  height: 120px;
  width: 84px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 88px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 70px;
    height: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 60px;
    height: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 60px;
    height: 60px;
  }
}
.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  padding: 20px 150px 20px 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 40px;
  }
}
.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 63px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 59px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 57px;
  }
}
.dir-rtl .hero__area-3::after {
  right: unset;
  left: 50px;
}
.dir-rtl .hero__area-3::before {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.dir-rtl .hero__area-3 .hero3-img {
  right: unset;
  left: 0;
}
.dir-rtl .hero__area-3 .video-info {
  left: unset;
  right: 500px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .hero__area-3 .video-info {
    right: 330px;
  }
}
.dir-rtl .hero__area-3 .intro-title {
  left: 0;
}
.dir-rtl .hero__area-3 .title-right {
  right: unset;
  left: 0;
}
.dir-rtl .hero__area-3 .sec-sub-title {
  padding-right: 0;
  padding-left: 30px;
}
.dir-rtl .hero__area-3 .sec-sub-title::after {
  left: unset;
  right: 100%;
}
.dir-rtl .hero__area-2 .hero2-shape {
  max-width: 38%;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .hero__area-2 .hero2-shape {
    max-width: 35%;
  }
}
@media (max-width: 1400px) {
  .dir-rtl .hero__area-2 .hero2-shape {
    max-width: 30%;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__area-2 .hero2-shape {
    max-width: 90%;
  }
}
.dir-rtl .hero__area-2 .sec-title-3:last-child {
  text-align: left;
  padding-top: 110px;
  padding-right: 0;
  margin-top: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .hero__area-2 .sec-title-3:last-child {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .hero__area-2 .sec-title-3:last-child {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .hero__area-2 .sec-title-3:last-child {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__area-2 .sec-title-3:last-child {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__area-2 .sec-title-3:last-child {
    padding-top: 0;
  }
}
.dir-rtl .hero__area-7 .shape-1 {
  right: unset;
  left: 100px;
}
.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-total {
  width: 30px;
  margin-right: 10px;
}
.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-total::before {
  left: 20px;
}
.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current {
  width: 30px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current {
    margin-left: 0;
  }
}
.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current::before {
  left: 20px;
}
.dir-rtl .hero__area-10 .hero10_activition .swiper-button-next.hero_next {
  left: 0;
  right: unset;
}
.dir-rtl .hero__area-10 .hero10_activition .swiper-button-next.hero_next img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .hero__area-15 .swiper-container {
  float: right;
}
.dir-rtl .hero__sub-title {
  left: 60px;
  right: unset;
}
.dir-rtl .hero__text-2 {
  padding-left: 0;
  padding-right: 32%;
  background-position: 35% 58%;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .hero__text-2 {
    padding-right: 30%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .hero__text-2 {
    padding-right: 20%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .hero__text-2 {
    padding-right: 15%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__text-2 {
    padding-right: 5%;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__text-2 {
    padding-right: 0%;
  }
}
.dir-rtl .hero__content .experience {
  right: unset;
  left: 30px;
}
.dir-rtl .hero__content a:hover i {
  -webkit-transform: translate(-18px, -18px) rotate(-135deg);
          transform: translate(-18px, -18px) rotate(-135deg);
}
.dir-rtl .hero__content a:hover span::after {
  -webkit-transform: translate(20px, -20px) rotate(-135deg);
          transform: translate(20px, -20px) rotate(-135deg);
}
.dir-rtl .hero__content a span {
  right: unset;
  left: 0;
}
.dir-rtl .hero__content a span i {
  -webkit-transform: translate(0, 0) rotate(-135deg);
          transform: translate(0, 0) rotate(-135deg);
}
.dir-rtl .hero__content a span::after {
  left: -20px;
  -webkit-transform: translate(45px, 5px) rotate(-135deg);
          transform: translate(45px, 5px) rotate(-135deg);
}
.dir-rtl .hero__content-8 .scroll-down {
  padding-left: unset;
  padding-right: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .hero__content-8 .scroll-down {
    padding-right: 160px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__content-8 .scroll-down {
    padding-right: 160px;
  }
}
.dir-rtl .hero__title::after {
  right: unset;
  left: -80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__title::after {
    left: -30px;
  }
}
.dir-rtl .hero__arrow-icon {
  right: 95%;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__arrow-icon {
    right: 70%;
  }
}
.dir-rtl .hero__about-text p {
  padding-left: 0;
  padding-right: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__about-text p {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__about-text p {
    padding-right: 0;
  }
}
.dir-rtl .hero__about-award::before {
  left: unset;
  right: 75px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .hero__about-award::before {
    right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .hero__about-award::before {
    right: 20px;
  }
}
.dir-rtl .hero__about-row {
  position: inherit;
  margin-right: initial;
  margin-left: -310px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .hero__about-row {
    margin-left: -150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .hero__about-row {
    margin-left: -120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__about-row {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__about-row {
    margin-left: 0;
  }
}
.dir-rtl .hero__text-7 {
  margin-left: 0;
  margin-right: 210px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__text-7 {
    margin-right: 60px;
    grid-gap: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__text-7 {
    margin-right: 0;
  }
}
.dir-rtl .hero__text-7 .about::after {
  left: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .hero__text-7 .about::after {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .hero__text-7 .about::after {
    left: 54%;
  }
}
.dir-rtl .hero__area-10 .swiper-button-prev.hero_prev img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .header__nav-icon-3 .search-icon {
  padding-left: 50px;
}
.dir-rtl .header__nav-icon-3 .search-icon::after {
  right: unset;
  left: 25px;
}
.dir-rtl .story__area .from-text {
  right: unset;
  left: -220px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .story__area .from-text {
    left: -50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .story__area .from-text {
    left: -100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .story__area .from-text {
    left: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .story__area .from-text {
    left: -10px;
  }
}
.dir-rtl .feature__content-right {
  padding: 143px 110px 0px 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .feature__content-right {
    padding: 60px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .feature__content-right {
    padding: 20px;
  }
}
.dir-rtl .feature__content-right p {
  padding-right: 0;
  padding-left: 242px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .feature__content-right p {
    padding-left: 225px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .feature__content-right p {
    padding-left: 145px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .feature__content-right p {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .feature__content-right p {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .feature__content-right p {
    padding-left: 0;
  }
}
.dir-rtl .feature__content-btm {
  margin-left: 0;
  margin-right: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .feature__content-btm {
    margin-right: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .feature__content-btm {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .feature__content-btm {
    margin-right: 0;
  }
}
.dir-rtl .feature__text {
  padding-left: 0;
  padding-right: 85px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .feature__text {
    padding-right: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .feature__text {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .feature__text {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .feature__text {
    padding-right: 0;
  }
}
.dir-rtl .feature__title-6 {
  padding-left: 0;
  padding-right: 60px;
}
.dir-rtl .feature__title-6::before {
  left: unset;
  right: 0;
}
.dir-rtl .feature__img-1 {
  right: unset;
  left: 10%;
}
.dir-rtl .feature__img-3 {
  right: unset;
  left: 6%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .feature__item {
    border-right: 1px solid var(--black-2);
  }
  .dir-rtl .feature__item:nth-child(odd) {
    border-right: 0;
  }
}
.dir-rtl .feature__item:first-child {
  border-right: none;
}
.dir-rtl .feature__item:last-child {
  padding: 145px 30px;
  border-right: 1px solid var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .feature__item:last-child {
    padding: 90px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .feature__item:last-child {
    padding: 90px 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .feature__item:last-child {
    padding: 50px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .feature__item:last-child {
    padding: 0;
    border: 0;
    padding-bottom: 40px;
  }
}
.dir-rtl .about__area-3::after {
  left: 40%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .about__area-3::after {
    left: 45%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .about__area-3::after {
    left: 50%;
  }
}
.dir-rtl .about__area-3 .sec-text-wrapper {
  padding-right: 210px;
  padding-left: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .about__area-3 .sec-text-wrapper {
    padding-right: 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .about__area-3 .sec-text-wrapper {
    padding-right: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .about__area-3 .sec-text-wrapper {
    padding-right: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .about__area-3 .sec-text-wrapper {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .about__area-3 .sec-text-wrapper {
    padding-right: 0;
  }
}
.dir-rtl .about__area-2 .sec-text-wrapper {
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}
.dir-rtl .about__area-8 .about-sub-right {
  text-align: left !important;
}
.dir-rtl .about__title-wrapper {
  padding-left: 0;
  padding-right: 190px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .about__title-wrapper {
    padding-right: 0;
  }
}
.dir-rtl .about__img-right {
  right: unset;
  left: 0;
}
.dir-rtl .about__mid-7 {
  padding-left: 0;
  padding-right: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .about__mid-7 {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .about__mid-7 {
    padding-right: 10px;
  }
}
@media (max-width: 1023px) {
  .dir-rtl .about__mid-7 {
    padding-right: 0;
  }
}
.dir-rtl .about__mid-7 .image-1 {
  margin-left: 0;
  margin-right: auto;
}
.dir-rtl .about8__content {
  float: left;
}
.dir-rtl .work__area-8 .about-sub-right {
  text-align: left !important;
}
.dir-rtl .work8__title {
  margin-left: 0;
  margin-right: 440px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .work8__title {
    margin-right: 20px;
  }
}
.dir-rtl .service__area-3 .sec-title-wrapper {
  padding-left: 0;
  padding-right: 330px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .service__area-3 .sec-title-wrapper {
    padding-right: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__area-3 .sec-title-wrapper {
    padding-right: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__area-3 .sec-title-wrapper {
    padding-right: 0;
  }
}
.dir-rtl .service__area-3 .sec-title-wrapper::after {
  left: 62%;
}
.dir-rtl .service__area-3 .sec-title-wrapper p {
  margin-left: 0;
  margin-right: 220px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .service__area-3 .sec-title-wrapper p {
    margin-right: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__area-3 .sec-title-wrapper p {
    margin-right: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__area-3 .sec-title-wrapper p {
    margin-right: 20px;
  }
}
.dir-rtl .service__area-6 {
  padding-left: 0;
}
.dir-rtl .service__area-6 .inherit-row {
  margin-right: -180px;
  margin-left: 0;
}
@media (max-width: 1919px) {
  .dir-rtl .service__area-6 .inherit-row {
    margin-right: calc(-0.5 * var(--bs-gutter-x));
  }
}
.dir-rtl .service__area-6 .right-content {
  padding-left: 0;
  padding-right: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .service__area-6 .right-content {
    padding-right: 40px;
  }
}
@media (max-width: 1400px) {
  .dir-rtl .service__area-6 .right-content {
    padding-right: 0;
  }
}
.dir-rtl .service__area-7::before {
  left: 42%;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .service__area-7::before {
    left: 39%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .service__area-7::before {
    left: 38%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .service__area-7::before {
    left: 34%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__area-7::before {
    left: 36%;
  }
}
.dir-rtl .service__area-7::after {
  left: 64%;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .service__area-7::after {
    left: 69%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .service__area-7::after {
    left: 65%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__area-7::after {
    left: 66%;
  }
}
.dir-rtl .service__top-btn #btn_wrapper, .dir-rtl .service__top-btn .btn_wrapper {
  margin-left: -40px;
  margin-right: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__top-btn #btn_wrapper, .dir-rtl .service__top-btn .btn_wrapper {
    margin-left: -20px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__top-btn #btn_wrapper, .dir-rtl .service__top-btn .btn_wrapper {
    margin-left: auto;
    margin-right: 0;
  }
}
.dir-rtl .service__link {
  text-align: left;
}
.dir-rtl .service__link p::after {
  -webkit-transform: translate(80px, 34px) rotate(-135deg);
          transform: translate(80px, 34px) rotate(-135deg);
}
.dir-rtl .service__link i {
  -webkit-transform: translate(0, 0) rotate(-135deg);
          transform: translate(0, 0) rotate(-135deg);
}
.dir-rtl .service__item-icon i {
  font-size: 23px;
  color: var(--black-2);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .service__item:hover .service__link p::after {
  -webkit-transform: translate(30px, -20px) rotate(-135deg);
          transform: translate(30px, -20px) rotate(-135deg);
}
.dir-rtl .service__item:hover .service__link i {
  -webkit-transform: translate(-38px, -40px) rotate(-135deg);
          transform: translate(-38px, -40px) rotate(-135deg);
}
.dir-rtl .service__item-2::before {
  left: -30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__item-2::before {
    left: 0;
  }
}
.dir-rtl .service__item-2:nth-child(3n+1)::before {
  position: absolute;
}
.dir-rtl .service__item-2:last-child::before {
  position: unset;
}
.dir-rtl .service__item-2:nth-child(3)::before {
  position: unset;
}
.dir-rtl .service__item-4:hover .service__item-icon {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.dir-rtl .service__img {
  -webkit-transform: rotate(0deg) translateX(100px);
          transform: rotate(0deg) translateX(100px);
}
.dir-rtl .service__img.active {
  -webkit-transform: rotate(-15deg) translateX(-60px) translateY(30px);
          transform: rotate(-15deg) translateX(-60px) translateY(30px);
}
.dir-rtl .service__img-wrapper span {
  left: unset;
  right: 0;
  -webkit-transform: rotate(26deg) translate(-100%, -100%);
          transform: rotate(26deg) translate(-100%, -100%);
}
.dir-rtl .service__img-wrapper span.current {
  -webkit-transform: rotate(26deg) translate(170px, -100%);
          transform: rotate(26deg) translate(170px, -100%);
}
.dir-rtl .service__right-4 p {
  padding-right: 0;
  padding-left: 258px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .service__right-4 p {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__right-4 p {
    padding-left: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__right-4 p {
    padding-left: 0;
  }
}
.dir-rtl .service__hero-2 .shape-1 {
  right: unset;
  left: 165px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__hero-2 .shape-1 {
    left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__hero-2 .shape-1 {
    left: 5px;
  }
}
.dir-rtl .service__hero-left-2 .image-1, .dir-rtl .service__hero-left-2 .image-3 {
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .service__hero-left-2 .image-1, .dir-rtl .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .service__hero-left-2 .image-1, .dir-rtl .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__hero-left-2 .image-1, .dir-rtl .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(25px);
            transform: translateX(25px);
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__hero-left-2 .image-1, .dir-rtl .service__hero-left-2 .image-3 {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.dir-rtl .service__hero-left-2 .image-2 {
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__hero-left-2 .image-2 {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.dir-rtl .service__hero-left-2 .image-4 {
  right: 318px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .service__hero-left-2 .image-4 {
    right: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .service__hero-left-2 .image-4 {
    right: 268px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__hero-left-2 .image-4 {
    right: 215px;
  }
}
.dir-rtl .service__hero-right-2 p {
  margin-left: 0;
  margin-right: 350px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .service__hero-right-2 p {
    margin-right: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__hero-right-2 p {
    margin-right: 220px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__hero-right-2 p {
    margin-right: 30px;
  }
}
.dir-rtl .service__hero-right-2 .title span {
  padding-left: 0;
  padding-right: 170px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .service__hero-right-2 .title span {
    padding-right: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__hero-right-2 .title span {
    padding-right: 40px;
  }
}
.dir-rtl .service__hero-right-2 .scroll {
  margin-left: 0;
  margin-right: 350px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .service__hero-right-2 .scroll {
    margin-right: 30px;
  }
}
.dir-rtl .service__title-7:hover span {
  padding-right: 0;
}
.dir-rtl .service__title-7 span {
  padding-left: 0;
  padding-right: 50px;
}
.dir-rtl .service__title-7 span::before {
  left: unset;
  right: 0;
}
.dir-rtl .service__detail-circle span::after {
  left: unset;
  right: 50%;
}
.dir-rtl .accordion-button {
  text-align: right;
}
.dir-rtl .faq__list-4 .accordion-button.collapsed::after {
  left: unset;
  right: 0;
}
.dir-rtl .faq__list-4 .accordion-button:not(.collapsed)::after {
  left: unset;
  right: 0;
}
.dir-rtl .faq__img6-2 {
  left: unset;
  right: 51px;
}
.dir-rtl .faq__img {
  padding-right: 0;
  padding-left: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .faq__img {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .faq__img {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .faq__img {
    padding-left: 0;
  }
}
.dir-rtl .award__right > p {
  margin-left: 0;
  margin-right: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .award__right > p {
    margin-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .award__right > p {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .award__right > p {
    margin-right: 0;
  }
}
.dir-rtl .award__text-8 {
  right: unset;
  left: 50px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .award__text-8 {
    left: 10px;
  }
}
.dir-rtl .award__text-8 a:hover i {
  -webkit-transform: translate(-20px, -20px) rotate(-135deg);
          transform: translate(-20px, -20px) rotate(-135deg);
}
.dir-rtl .award__text-8 a:hover span::after {
  -webkit-transform: translate(20px, -20px) rotate(-135deg);
          transform: translate(20px, -20px) rotate(-135deg);
}
.dir-rtl .award__text-8 a span {
  right: unset;
  left: 0;
}
.dir-rtl .award__text-8 a span i {
  -webkit-transform: translate(0, 0) rotate(-135deg);
          transform: translate(0, 0) rotate(-135deg);
}
.dir-rtl .award__text-8 a span::after {
  -webkit-transform: translate(40px, 0) rotate(-135deg);
          transform: translate(40px, 0) rotate(-135deg);
}
.dir-rtl .award__item p:last-child {
  text-align: left;
}
.dir-rtl .award__mid-7 p {
  margin-left: 0;
  margin-right: 30px;
}
.dir-rtl .award__area-7 .inherit_row {
  margin-left: 0;
  margin-right: -350px;
}
.dir-rtl .award__counter {
  right: unset;
  left: 0;
}
.dir-rtl .award__btm-7 {
  padding-left: 0;
  padding-right: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .award__btm-7 {
    padding-right: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .award__btm-7 {
    padding-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .award__btm-7 {
    padding-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .award__btm-7 {
    padding-right: 30px;
  }
}
.dir-rtl .award__btm-7::after {
  left: unset;
  right: 99%;
}
.dir-rtl .award__btm-7::before {
  right: unset;
  left: 100%;
}
.dir-rtl .awards__area-8 .about-sub-right {
  text-align: left !important;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .team__area {
    padding-left: 0;
    padding-right: 62px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .team__area {
    padding-left: 0;
    padding-right: 62px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .team__area-6 {
    padding-left: 0;
    padding-right: 62px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .team__area-6 {
    padding-left: 0;
    padding-right: 62px;
  }
}
.dir-rtl .team__area-7 .sec-text {
  padding-left: 0;
  padding-right: 60%;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .team__area-7 .sec-text {
    padding-right: 60px;
  }
}
.dir-rtl .team__item-7:hover .tm-name {
  padding-left: 0;
  padding-right: 90px;
}
.dir-rtl .team__item-7:hover .tm-link i {
  -webkit-transform: rotate(215deg);
          transform: rotate(215deg);
}
.dir-rtl .team__item-7 .tm-serial {
  left: unset;
  right: 0;
}
.dir-rtl .team__item-7 .tm-name::after {
  left: unset;
  right: 25px;
}
.dir-rtl .team__item-7 .tm-link i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .team__hover-7 {
  left: -60%;
}
.dir-rtl .team__join-btn a i {
  right: unset;
  left: 130px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .team__join-btn a i {
    left: 50px;
  }
}
.dir-rtl .team__member-img {
  left: unset;
  right: -192px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .team__member-img {
    right: -150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .team__member-img {
    right: -228px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .team__member-img {
    right: 50%;
    -webkit-transform: translateX(25%);
            transform: translateX(25%);
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .team__member-img {
    right: 0;
  }
}
.dir-rtl .team__member-role-7::after {
  left: unset;
  right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .team__member-role-7::after {
    right: calc(50% - 75px);
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .team__member-role-7::after {
    right: calc(50% - 75px);
  }
}
.dir-rtl .cta__area-3 .wc-btn-black {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.dir-rtl .cta__area-3 .wc-btn-black i {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.dir-rtl .circle-pagination.right {
  left: unset;
  right: calc(100% - 135px) !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .circle-pagination.right {
    right: calc(100% - 90px) !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .circle-pagination.right {
    right: calc(100% - 75px) !important;
  }
}
.dir-rtl .portfolio__area-2::after {
  left: 15.3%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__area-2 .line::before {
    left: unset;
    right: 0;
  }
}
.dir-rtl .portfolio__area-2 .sec-title-3 {
  padding-right: 0;
  padding-left: 320px;
  background-position: 25% 25px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__area-2 .sec-title-3 {
    padding-left: 0;
  }
}
.dir-rtl .portfolio__area-2 .sec-title-3 span {
  padding-left: 0;
  padding-right: 450px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__area-2 .sec-title-3 span {
    padding-right: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__area-2 .sec-title-3 span {
    padding-right: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__area-2 .sec-title-3 span {
    padding-right: 0;
  }
}
.dir-rtl .portfolio__area-2 .sec-title-wrapper .sec-text {
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__area-3 .swiper-pagination {
    left: 10px;
  }
}
.dir-rtl .portfolio__area-6 .sec-title-wrapper p {
  padding-left: 0;
  padding-right: 110px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__area-6 .sec-title-wrapper p {
    padding-right: 70px;
  }
}
.dir-rtl .portfolio__area-6 .sec-title-wrapper p::before {
  left: unset;
  right: 0;
}
.dir-rtl .portfolio__area-12 .sec-title-wrapper .sub-title::after {
  margin-left: unset;
  margin-right: 10px;
}
.dir-rtl .portfolio__area-12 .sec-title-wrapper p {
  margin-left: 0;
  margin-right: 500px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__area-12 .sec-title-wrapper p {
    margin-right: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__area-12 .sec-title-wrapper p {
    margin-right: 20px;
  }
}
.dir-rtl .portfolio__slide-3 {
  text-align: left;
  padding-right: 0;
  padding-left: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__slide-3 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__slide-3 {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__slide-3 {
    padding-left: 0;
  }
}
.dir-rtl .portfolio__slide-2 .sec-title span {
  padding-left: 0;
  padding-right: 60px;
}
.dir-rtl .portfolio__slide-2 .sec-title span::before {
  left: unset;
  right: -10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__slide-2 .sec-title span::before {
    right: 0;
    width: 40px;
  }
}
.dir-rtl .portfolio__slide-2 .slide-img {
  padding-right: 0;
  padding-left: 15px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__slide-2 .slide-img {
    padding-left: 0;
  }
}
.dir-rtl .portfolio__slide-2 .slide-content {
  padding-left: 0;
  padding-right: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__slide-2 .slide-content {
    padding-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__slide-2 .slide-content {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__slide-2 .slide-content {
    padding-right: 40px;
  }
}
.dir-rtl .portfolio__slide-2 .btn-common i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .portfolio__title-3 {
  text-align: right;
}
.dir-rtl .portfolio__title-3 span {
  padding-left: 0;
  padding-right: 200px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__title-3 span {
    padding-right: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__title-3 span {
    padding-right: 60px;
  }
}
.dir-rtl .portfolio__hero-area::after {
  left: unset;
}
.dir-rtl .portfolio__about .sec-title span {
  padding-left: 0;
  padding-right: 120px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__about .sec-title span {
    display: inline-block;
    padding-right: 0;
  }
}
.dir-rtl .portfolio__about .sec-title span::before {
  left: unset;
  right: 0;
}
.dir-rtl .portfolio__about .brand-title-wrap {
  border: none;
  border-left: 1px solid var(--purple-2);
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__about .brand-title-wrap {
    border: none;
  }
}
.dir-rtl .portfolio__about .brand-list {
  padding-left: 0;
  padding-right: 80px;
}
@media (max-width: 1023px) {
  .dir-rtl .portfolio__about .brand-list {
    padding-right: 0;
  }
}
.dir-rtl .portfolio__about-left img {
  right: unset;
  left: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__about-left img {
    display: none;
  }
}
.dir-rtl .portfolio__page .swiper-slide-active .portfolio__about-left img {
  -webkit-transform: rotateY(180deg) !important;
          transform: rotateY(180deg) !important;
}
.dir-rtl .portfolio__project::after {
  top: 100px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .portfolio__project .pp-prev {
    right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__project .pp-prev {
    right: 60px;
  }
}
.dir-rtl .portfolio__project .pp-slider-wrapper {
  padding-left: 100px;
  padding-right: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__project .pp-slider-wrapper {
    padding-left: 140px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__project .pp-slider-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__project .pp-slider-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
.dir-rtl .portfolio__project .pp-slide-thumb {
  margin-left: unset;
  margin-right: auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .portfolio__project .pp-slide-thumb {
    margin-right: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .portfolio__project .pp-slide-thumb {
    margin-right: 20px;
  }
}
.dir-rtl .portfolio__project .pp-slide-thumb p {
  text-align: left;
}
.dir-rtl .portfolio__project .pp-slide-img img {
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
.dir-rtl .portfolio__project .pp-slide-title {
  text-align: left;
}
.dir-rtl .portfolio__project-thumbs {
  margin-right: 0;
  margin-left: -150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__project-thumbs {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__project-thumbs {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__project-thumbs {
    margin-left: 0;
  }
}
.dir-rtl .portfolio__project .pp-slide {
  padding: 80px 80px 80px 0px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__project .pp-slide {
    padding: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__project .pp-slide {
    padding: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__project .pp-slide {
    padding: 60px;
  }
}
.dir-rtl .portfolio__hero .title.shape-circle::after {
  left: -50px;
  right: unset;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__hero .title.shape-circle::after {
    left: -10px;
  }
}
@media (max-width: 1023px) {
  .dir-rtl .portfolio__hero .title.shape-circle::after {
    left: 0;
  }
}
.dir-rtl .portfolio__service .sec-text {
  background-image: url(../imgs/shape/25.png);
  background-position: right 80px;
}
@media (max-width: 1400px) {
  .dir-rtl .portfolio__service .sec-text {
    background-position: right 0;
  }
}
.dir-rtl .portfolio__footer-area::after {
  left: unset;
  right: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .portfolio__footer-area::after {
    right: 20px;
  }
}
.dir-rtl .portfolio__footer-area .pf-social h3::after {
  right: unset;
  left: -60px;
}
.dir-rtl .portfolio__icon-link {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .portfolio__item-4:hover .portfolio__icon-link {
  -webkit-transform: rotate(215deg);
          transform: rotate(215deg);
}
.dir-rtl .portfolio__item-12 p {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__item-12 p {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.dir-rtl .portfolio__detail .block-img-text p {
  padding-left: 0;
  padding-right: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .portfolio__detail .block-img-text p {
    padding-right: 0;
  }
}
.dir-rtl .portfolio__wrapper-6 {
  padding-left: 0;
  padding-right: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .portfolio__wrapper-6 {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__wrapper-6 {
    padding-right: 0;
  }
}
.dir-rtl .testimonial__item.item-3 {
  text-align: left;
}
.dir-rtl .testimonial__slide {
  margin-left: -1px;
}
.dir-rtl .testimonial__slide-4 {
  text-align: right;
}
.dir-rtl .testimonial__img.b-left::before {
  left: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .testimonial__img.b-left::before {
    left: 20px;
  }
}
.dir-rtl .testimonial__title-2 {
  padding: 100px 0px 20px 100px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .testimonial__title-2 {
    padding: 20px 0;
  }
}
.dir-rtl .testimonial__text-2 {
  padding-right: 0;
  padding-left: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .testimonial__text-2 {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .testimonial__text-2 {
    padding-left: 0;
  }
}
.dir-rtl .testimonial__info-4 p {
  text-align: right;
}
.dir-rtl .testimonial__btn-4 i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .testimonial__video {
  margin-right: 0;
  margin-left: -112px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .testimonial__video {
    margin-left: 0;
  }
}
.dir-rtl .testimonial__pagination {
  left: 0;
  right: unset;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .testimonial__pagination {
    -webkit-transform: translate(-60%, -50%);
            transform: translate(-60%, -50%);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .testimonial__pagination {
    -webkit-transform: translate(-48%, -50%);
            transform: translate(-48%, -50%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .testimonial__pagination {
    -webkit-transform: translate(-40%, -50%);
            transform: translate(-40%, -50%);
  }
}
.dir-rtl .testimonial__inner-2 {
  background-position: 89% 80px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .testimonial__inner-2 {
    background-position: 50% 10px;
  }
}
.dir-rtl .testimonial__img.b-right::after {
  left: unset;
  right: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .testimonial__img.b-right::after {
    right: 20px;
  }
}
.dir-rtl .price__icon span i {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
@media only screen and (max-width: 767px) {
  .dir-rtl .price__amount {
    right: unset;
    left: 30px;
  }
}
.dir-rtl .solution__area {
  padding-left: 0;
  padding-right: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .solution__area {
    padding-right: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .solution__area {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.dir-rtl .solution__shape .shape-3 {
  left: 20%;
  top: 20%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .solution__shape .shape-3 {
    left: 5%;
    top: 15%;
  }
}
.dir-rtl .solution__list li {
  padding-left: 0;
  padding-right: 15px;
}
.dir-rtl .solution__list li::after {
  left: unset;
  right: 0;
}
.dir-rtl .solution__mid p {
  padding-left: 0;
  padding-right: 190px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .solution__mid p {
    padding-right: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .solution__mid p {
    padding-right: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .solution__mid p {
    padding-right: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .solution__mid p {
    padding-right: 80px;
  }
}
.dir-rtl .solution__mid p::before {
  left: unset;
  right: 0;
}
.dir-rtl .solution__img-1::after {
  left: unset;
  right: 40px;
}
.dir-rtl .solution__img-3 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .solution__img-3 {
    float: left;
    -webkit-transform: rotate(180deg) translateY(60px);
            transform: rotate(180deg) translateY(60px);
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .solution__img-3 {
    float: left;
    -webkit-transform: rotate(180deg) translateY(60px);
            transform: rotate(180deg) translateY(60px);
  }
}
.dir-rtl .solution__btm ul {
  text-align: left;
}
.dir-rtl .brand__list-1 {
  border-left: 1px solid var(--white-3);
}
.dir-rtl .brand__list-2, .dir-rtl .brand__list-3 {
  border: none;
}
.dir-rtl .research__area {
  background-position: calc(100% - 300px) calc(100% - 220px);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .research__area {
    background-position: calc(100% - 140px) calc(100% - 220px);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .research__area {
    background-position: calc(100% - 100px) calc(100% - 140px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .research__area {
    background-position: calc(100% - 100px) calc(100% - 140px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .research__area {
    background-position: 98% 250px;
  }
}
.dir-rtl .research__area .row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.dir-rtl .research__area .sec-title-wrapper {
  text-align: right;
}
.dir-rtl .research__item {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.dir-rtl .research__item:nth-child(odd) {
  padding-left: 0;
  padding-right: 100px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .research__item:nth-child(odd) {
    padding-right: 0;
  }
}
.dir-rtl .research__info {
  text-align: right;
}
.dir-rtl .research__tools {
  padding-left: 0;
  text-align: right;
  padding-right: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .research__tools {
    padding-right: 108px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .research__tools {
    padding-right: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .research__tools {
    padding-right: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .research__tools {
    padding-right: 0;
  }
}
.dir-rtl .counter__area-3 .sec-title-wrapper {
  text-align: right;
}
.dir-rtl .counter__wrapper-3 {
  padding-right: 30px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .counter__wrapper-3 {
    padding-right: 0;
  }
}
.dir-rtl .counter__item-3 {
  text-align: right;
}
.dir-rtl .counter__item {
  margin-left: 0;
  margin-right: -67px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .counter__item {
    margin-right: -60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .counter__item {
    margin-right: -25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .counter__item {
    margin-right: -27px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .counter__item {
    margin-right: 0;
  }
}
.dir-rtl .counter__item:first-child {
  margin-right: 0;
}
.dir-rtl .faq__list .accordion-button:not(.collapsed)::after, .dir-rtl .faq__list-3 .accordion-button:not(.collapsed)::after, .dir-rtl .faq__list-6 .accordion-button:not(.collapsed)::after,
.dir-rtl .faq__list .accordion-button.collapsed::after,
.dir-rtl .faq__list-3 .accordion-button.collapsed::after,
.dir-rtl .faq__list-6 .accordion-button.collapsed::after {
  right: unset;
  left: 0;
}
.dir-rtl .faq__list-3 {
  padding-right: 0;
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .faq__list-3 {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .faq__list-3 {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .faq__list-3 {
    padding-left: 0;
  }
}
.dir-rtl .faq__list-3 .accordion-button:not(.collapsed)::after,
.dir-rtl .faq__list-3 .accordion-button.collapsed::after {
  right: unset;
  left: 0;
}
.dir-rtl .faq__list-6 .accordion-button:not(.collapsed)::after,
.dir-rtl .faq__list-6 .accordion-button.collapsed::after {
  right: unset;
  left: 0;
}
.dir-rtl .blog__area-2 #btn_wrapper,
.dir-rtl .blog__area-2 .btn_wrapper {
  margin-left: 0;
  margin-right: auto;
}
.dir-rtl .blog__area-3 .sec-title-wrapper {
  padding-left: 0;
  padding-right: 330px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .blog__area-3 .sec-title-wrapper {
    padding-right: 180px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .blog__area-3 .sec-title-wrapper {
    padding-right: 0;
  }
}
.dir-rtl .blog__area-3 .sec-title-wrapper::after {
  left: 62%;
}
.dir-rtl .blog__area-3 .sec-title-wrapper p {
  margin-left: 0;
  margin-right: 220px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .blog__area-3 .sec-title-wrapper p {
    margin-right: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .blog__area-3 .sec-title-wrapper p {
    margin-right: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .blog__area-3 .sec-title-wrapper p {
    margin-right: 0;
  }
}
.dir-rtl .blog__area-4 .sec-title-wrapper p {
  padding-right: 0;
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .blog__area-4 .sec-title-wrapper p {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .blog__area-4 .sec-title-wrapper p {
    padding-left: 0;
  }
}
.dir-rtl .blog__detail-content ul li,
.dir-rtl .blog__detail-content ol li {
  padding-left: 0;
  padding-right: 25px;
}
.dir-rtl .blog__info-3 {
  width: 63%;
  left: 0;
  right: unset;
  margin-left: 0px;
  margin-right: -50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .blog__info-3 {
    width: 80%;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .blog__info-3 {
    width: 90%;
  }
}
.dir-rtl .blog__btn span {
  left: -28px;
  right: unset;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.dir-rtl .blog__detail-content ul li::before,
.dir-rtl .blog__detail-content ol li::before {
  left: unset;
  right: 0;
}
.dir-rtl .blog__detail-date span {
  padding-left: 0;
  padding-right: 25px;
}
.dir-rtl .blog__detail-date span::before {
  left: 0;
  right: 8px;
}
.dir-rtl .btn-started i,
.dir-rtl .blog__btn-4 i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .cta__list-left {
  padding-left: 0;
  padding-right: 15px;
}
.dir-rtl .cta__list-left li::before {
  left: unset;
  right: -15px;
}
.dir-rtl .cta__area-5::before {
  left: 43%;
}
.dir-rtl .footer__area-2 {
  background-image: unset;
  position: relative;
}
.dir-rtl .footer__area-2::before {
  position: absolute;
  content: "";
  height: 508px;
  width: 500px;
  left: 0px;
  top: 0;
  background-image: url(../imgs/shape/4.png);
  background-repeat: no-repeat;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .footer__widget-3 {
    padding: 50px 30px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer__widget-3 {
    margin-right: 0;
  }
}
.dir-rtl .footer__contact-3 {
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer__contact-3 {
    text-align: center;
  }
}
.dir-rtl .footer__subscribe {
  margin-right: 0;
  margin-left: -60px;
  padding-right: 0;
  padding-left: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .footer__subscribe {
    margin-left: -15px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer__subscribe {
    margin-left: -30px;
  }
}
.dir-rtl .footer__subscribe input {
  padding: 21px 15px 21px 50px;
}
.dir-rtl .footer__subscribe .subs-btn {
  right: unset;
  left: 20px;
}
.dir-rtl .footer__subscribe .subs-btn i {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.dir-rtl .footer__subscribe-2 {
  padding-left: 0;
  padding-right: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .footer__subscribe-2 {
    padding-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .footer__subscribe-2 {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer__subscribe-2 {
    padding-right: 0;
  }
}
.dir-rtl .footer__subscribe-2::before {
  right: -20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .footer__subscribe-2::before {
    right: -80px;
  }
}
.dir-rtl .footer__subscribe-2 input {
  padding: 20px 0 20px 80px;
}
.dir-rtl .footer__subscribe-2 .submit {
  left: 0;
  right: unset;
}
.dir-rtl .footer__subscribe-2 .submit img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .footer-line::after {
  right: 0;
  left: unset;
}
.dir-rtl .footer__inner {
  padding-left: 0;
  padding-right: 350px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer__inner {
    padding-right: 0;
  }
}
.dir-rtl .footer__top {
  text-align: left;
}
.dir-rtl .footer__row {
  margin-left: 0;
  margin-right: -500px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .footer__row {
    margin-right: -305px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .footer__row {
    margin-right: -330px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .footer__row {
    margin-right: -340px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .footer__row {
    margin-right: -375px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer__row {
    margin-right: 0;
  }
}
.dir-rtl .footer__copyright {
  margin-left: 0;
  margin-right: -67px;
  padding: 35px 66px 35px 0;
}
.dir-rtl .footer__newsletter-6 button {
  right: unset;
  left: 20px;
}
.dir-rtl .footer__newsletter-6 button i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .footer__newsletter-6 input {
  padding: 16px 20px 16px 50px;
}
.dir-rtl .footer__widget-4 {
  margin-left: 0;
  margin-right: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .footer__widget-4 {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer__widget-4 {
    margin-right: 0;
  }
}
.dir-rtl .footer-menu li, .dir-rtl .footer-menu-2 li {
  padding-left: 0;
  padding-right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .footer-menu li, .dir-rtl .footer-menu-2 li {
    padding-right: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .footer-menu li, .dir-rtl .footer-menu-2 li {
    padding-right: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .footer-menu li, .dir-rtl .footer-menu-2 li {
    padding-right: 8px;
    padding-left: 8px;
  }
}
.dir-rtl .section_wrapper::before {
  left: unset;
  right: 60px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .section_wrapper::before {
    right: 48px;
  }
}
.dir-rtl .hover_img {
  left: unset;
  right: 100%;
}
.dir-rtl .awards__items .date {
  text-align: left;
}
.dir-rtl .awards__content p {
  margin-left: 0;
  margin-right: 170px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .awards__content p {
    margin-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .awards__content p {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .awards__content p {
    margin-right: 0;
  }
}
.dir-rtl .client__area-8 .about-sub-right {
  text-align: left !important;
}
.dir-rtl .hero10:hover .hero10__content i {
  -webkit-transform: translateY(-50px) rotate(-135deg);
          transform: translateY(-50px) rotate(-135deg);
}
.dir-rtl .hero10__content {
  left: unset;
  right: 40px;
}
.dir-rtl .hero10__content i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media (max-width: 1365px) {
  .dir-rtl .hero10__content i {
    -webkit-transform: rotate(215deg);
            transform: rotate(215deg);
  }
}
.dir-rtl .scroll-top-2 {
  right: unset;
  left: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .scroll-top-2 {
    left: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .scroll-top-2 {
    left: 20px;
  }
}
.dir-rtl .dis_port_4 {
  margin-left: 0;
  margin-right: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .dis_port_4 {
    margin-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .dis_port_4 {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .dis_port_4 {
    margin-right: 20px;
  }
}
.dir-rtl .section_title_wrapper .title_right__inner__left {
  margin-right: 0;
  margin-left: 60px;
}
.dir-rtl .section_title_wrapper .title_right__inner__left span::before {
  right: unset;
  left: 80px;
}
.dir-rtl .gallary12__content img {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.dir-rtl .showcase__top-16 .title-right {
  margin-left: 0;
  margin-right: auto;
}
.dir-rtl .showcase__info-16 {
  left: unset;
  right: 50px;
}
.dir-rtl .showcase__title-16 span::before {
  left: unset;
  right: 0;
}
.dir-rtl .showcase__sub-title-16 {
  padding-left: unset;
  padding-right: 100px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .showcase__sub-title-16 {
    padding-right: 30px;
  }
}
.dir-rtl .mixtup_btn .wc-btn span {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
@media only screen and (min-width: 1920px) {
  .dir-rtl .team__slider {
    margin-left: 0;
    margin-right: 100px;
  }
}
.dir-rtl .job__detail-wrapper {
  padding-right: 0;
  padding-left: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .job__detail-wrapper {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .job__detail-wrapper {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .job__detail-wrapper {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .job__detail-wrapper {
    padding-left: 0;
  }
}
.dir-rtl .job__detail-meta li {
  padding-right: 0;
  padding-left: 70px;
}
.dir-rtl .job__detail-content ul, .dir-rtl .job__detail-content ol {
  padding-left: 0;
  padding-right: 30px;
}
.dir-rtl .job__detail-content ul li::before, .dir-rtl .job__detail-content ol li::before {
  left: unset;
  right: -18px;
}
.dir-rtl .job__link {
  text-align: left;
}
.dir-rtl .job__link span::after {
  right: unset;
  left: 45px;
  -webkit-transform: translate(0, 0) rotate(215deg);
          transform: translate(0, 0) rotate(215deg);
}
.dir-rtl .job__link i,
.dir-rtl .job__link span {
  -webkit-transform: rotate(215deg);
          transform: rotate(215deg);
}
.dir-rtl .job__item:hover .job__link i {
  -webkit-transform: rotate(215deg) translate(60px, 2px);
          transform: rotate(215deg) translate(60px, 2px);
}
.dir-rtl .job__item:hover .job__link span::after {
  right: unset;
  left: 0;
}
.dir-rtl .modal__apply .form-btn button {
  margin-left: inherit;
  margin-right: auto;
}
.dir-rtl .modal__close-2 {
  right: unset;
  left: 30px;
}
.dir-rtl .career__thumb .inherit {
  margin-right: 0;
  margin-left: -320px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .career__thumb .inherit {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
.dir-rtl .career__benefits-list li {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .career__benefits-list li {
    margin-left: 0;
    margin-right: -10px;
  }
  .dir-rtl .career__benefits-list li:nth-child(2n+1) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .career__benefits-list li:nth-child(3n+1) {
    margin-left: -30px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .about__area-2 #btn_wrapper,
.dir-rtl .about__area-2 .btn_wrapper {
    margin-right: 0;
  }
  .dir-rtl .section_title_wrapper .title_right {
    margin-right: auto;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .career__benefits-list li:nth-child(2n+1) {
    margin-left: -20px;
  }
}
.dir-rtl .faq__content {
  padding-left: 0;
  padding-right: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .faq__content {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .faq__content {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .faq__content {
    padding-right: 0;
  }
}
.dir-rtl .img-box img {
  left: unset;
  right: 0;
}
.dir-rtl .hero_layer_9 {
  direction: ltr;
}
.dir-rtl .part.showed {
  direction: rtl;
}
.dir-rtl .part.showed p {
  padding-left: 0;
  padding-right: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .part.showed p {
    padding-right: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .part.showed p {
    padding-right: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .part.showed p {
    padding-right: 45px;
  }
}
.dir-rtl .part.showed h2 span {
  padding-left: 0;
  padding-right: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .part.showed h2 span {
    padding-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .part.showed h2 span {
    padding-right: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .part.showed h2 span {
    padding-right: 35px;
  }
}
.dir-rtl .part.showed h2 span::before {
  left: unset;
  right: 0;
}
.dir-rtl .roll__area-2 {
  direction: ltr;
}
.dir-rtl .switcher__icon,
.dir-rtl .switcher__items {
  z-index: 9999;
}
.dir-rtl .woocomerce__hero-circle {
  left: 0;
}
.dir-rtl .woocomerce__hero-rectangle {
  right: unset;
  left: 0;
}
.dir-rtl .woocomerce__hero-next {
  right: unset;
  left: 140px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__hero-next {
    left: 120px;
  }
}
.dir-rtl .woocomerce__hero-prev {
  right: unset;
  left: 50px;
}
.dir-rtl .woocomerce__hero-dis {
  margin-left: 345px;
  margin-right: auto;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__hero-dis {
    margin-left: 0;
  }
}
.dir-rtl .woocomerce__hero .swiper-pagination {
  left: 580px;
  right: auto;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__hero .swiper-pagination {
    right: 0;
    left: unset;
  }
}
.dir-rtl .woocomerce__feature-heart {
  right: unset;
  left: 0;
}
.dir-rtl .woocomerce__feature-carttext {
  margin-left: 0;
  margin-right: -60px;
}
.dir-rtl .woocomerce__feature-arrowwrapper img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .woocomerce__feature-category {
  left: 10px;
  right: unset;
}
.dir-rtl .woocomerce__exclusive-content.align-left .woocomerce__exclusive-title {
  text-align: right;
}
@media (max-width: 991px) {
  .dir-rtl .woocomerce__shopsidebar {
    left: 100%;
  }
}
.dir-rtl .woocomerce__shopsidebar.showed {
  left: 0;
}
.dir-rtl .woocomerce__shopsidebar .accordion-button::after {
  right: unset;
  left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .woocomerce__shopfullwidth {
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__shopfullwidth {
    padding-top: 0;
  }
}
.dir-rtl .woocomerce__footer-submit {
  left: 0;
  right: unset;
  border-left: 0;
  border-right: 1px solid var(--white);
}
.dir-rtl .woocomerce__footer-submit img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dir-rtl .woocomerce__footer-form input {
  padding-right: 20px;
  padding-left: 65px;
}
.dir-rtl .woocomerce__footer-wrapper .line1 {
  left: unset;
  right: 21%;
}
.dir-rtl .woocomerce__footer-wrapper .line2 {
  left: unset;
  right: 38%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .woocomerce__footer-wrapper .line2 {
    right: 50%;
  }
}
.dir-rtl .woocomerce__footer-wrapper .line3 {
  left: unset;
  right: 55%;
}
.dir-rtl .woocomerce__footer-wrapper .line4 {
  left: unset;
  right: 72%;
}
.dir-rtl .woocomerce__single-features li img {
  padding-right: 0;
  padding-left: 10px;
}
.dir-rtl .woocomerce__single .accordion-button::after {
  left: 0;
  position: absolute;
}
.dir-rtl .woocomerce__single-breadcrumb li a i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .woocomerce__single-wrapper {
    -ms-grid-columns: 1fr 40px 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
.dir-rtl .woocomerce__cart::before {
  left: unset;
  right: 430px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .woocomerce__cart::before {
    right: 330px;
  }
}
.dir-rtl .woocomerce__cart-left {
  padding-right: 0;
  padding-left: 50px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__cart-left {
    padding-left: 0;
  }
}
.dir-rtl .woocomerce__cart-content {
  padding-right: 0;
  padding-left: 55px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__cart-content {
    padding-left: 0;
  }
}
.dir-rtl .woocomerce__cart-amountlist li:nth-child(even), .dir-rtl .woocomerce__cart-header li:nth-child(even) {
  text-align: left;
}
.dir-rtl .woocomerce__cart .counter__decrement.decrement2 {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
.dir-rtl .woocomerce__cart .counter__increment.increment2 {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__cart-close {
    right: unset;
    left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__cart-price, .dir-rtl .woocomerce__cart-total {
    padding-left: 0;
    padding-right: 90px;
  }
}
.dir-rtl .woocomerce__cart.checkout-page::before {
  right: 500px;
}
.dir-rtl .woocomerce__cart-payheaderup {
  margin-right: 0;
  margin-left: 50px;
}
@media only screen and (max-width: 767px) {
  .dir-rtl .woocomerce__cart-payheaderup {
    margin-left: 0;
  }
}
.dir-rtl .woocomerce__cart-payheader p {
  padding-left: 0;
  padding-right: 30px;
}
.dir-rtl .woocomerce__cart-payheader p::before {
  left: unset;
  right: 0;
}
.dir-rtl .woocomerce__cart-payheader p::after {
  left: unset;
  right: 8px;
}
.dir-rtl .woocomerce__checkout-fieldright p {
  text-align: left;
}
.dir-rtl .woocomerce__single-counter.counter2 {
  margin-left: 0;
  margin-right: 90px;
}
.dir-rtl .woocomerce__account-left::before {
  right: unset;
  left: 0;
}
.dir-rtl .woocomerce__account-menus li .nav-link.active::before {
  right: unset;
  left: 0;
}
.dir-rtl .woocomerce__hero .swiper-pagination-total {
  left: 0;
}
.dir-rtl .woocomerce__popup {
  padding-right: 0;
  padding-left: 55px;
}
.dir-rtl .woocomerce__popup-btn {
  right: unset;
  left: 25px;
}
.dir-rtl .price-range-slider .range-bar {
  margin-left: 0;
  margin-right: 13px;
}

.dark.dir-rtl .portfolio__about .brand-title-wrap {
  border-left: 1px solid var(--secondary);
}
/*# sourceMappingURL=master.css.map */


/*----------------------------------------*/
/*  building LIGHTS & ROAD LIGHTS ANIMATION
/*----------------------------------------*/




/* building lights container */
.building-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Individual drone light dots - positioned on the drones in the background */
.building-light {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  animation: droneBlink 1.5s ease-in-out infinite;
}




/* Top-left drone pair - second light (blue) */
.building-light--1 {
  top: 68%;
  left: 5%;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 0.7s;
}

/* Mid-left drone - first light (red) */


/* Mid-left drone - second light (blue) */
.building-light--2 {
  top: 60%;
  left: 20%;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 1.0s;
}

/* Right side drone - single red light */
.building-light--3 {
  top: 50%;
  left: 38%;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 0.5s;
  animation-duration: 1.8s;
}





/* Top-left drone pair - first light (red) */
.building-light--4 {
  top: 50%;
  left: 52%;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 0s;
}

/* Top-left drone pair - second light (blue) */
.building-light--5 {
  top: 18%;
  left: 57%;
  width: 0.1px;
  height: 0.1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 0.7s;
}

/* Mid-left drone - first light (red) */
.building-light--6 {
  top: 50%;
  left: 67%;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 0.3s;
}

/* Mid-left drone - second light (blue) */
.building-light--7 {
  top: 19%;
  left: 75%;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 1.0s;
}

/* Mid-left drone - second light (blue) */
.building-light--8 {
  top: 59%;
  left: 90%;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 1.0s;
}



/* Right side drone - single red light */
.building-light--9 {
  top: 25%;
  left: 97%;
  width: 2px;
  height: 2px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(0, 136, 255, 0.9), 0 0 16px 6px rgba(0, 136, 255, 0.5);
  animation-delay: 0.3s;
  animation-duration: 1.9s;
}






/*----------------------------------------*/
/*  DRONE LIGHTS & ROAD LIGHTS ANIMATION
/*----------------------------------------*/

/* Drone lights container */


/* Drone blink keyframes - sharp on/off like real navigation lights */
@-webkit-keyframes droneBlink {
  0%, 18% {
    opacity: 1;
  }
  20%, 22% {
    opacity: 0;
  }
  24%, 40% {
    opacity: 1;
  }
  42%, 44% {
    opacity: 0;
  }
  46%, 100% {
    opacity: 1;
  }
}
@keyframes droneBlink {
  0%, 18% {
    opacity: 1;
  }
  20%, 22% {
    opacity: 0;
  }
  24%, 40% {
    opacity: 1;
  }
  42%, 44% {
    opacity: 0;
  }
  46%, 100% {
    opacity: 1;
  }
}



/*----------------------------------------*/
/*  header__area mega 
/*----------------------------------------*/

.header__area-2 .main-menu > li.mega3-li { position: static; }
    .mega3 {
      position: absolute;
      left: 50%;
      top: 74px;
      width: 75%;
      text-align: left;
      background: #ffffff;
      box-shadow: 0 26px 44px rgba(10, 22, 51, 0.16);
      border-top: 1px solid #e6e9f0;
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 8px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
      z-index: 999;
    }
    .header__area-2 .main-menu > li.mega3-li:hover .mega3 {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }
    .mega3-wrap {
      display: flex;
      max-width: 1320px;
      margin: 0 auto;
      min-height: 430px;
    }
    /* left category tabs */
    .mega3-tabs {
      flex: 0 0 268px;
      background: #f4f8fc;
      padding: 22px 0;
      margin: 0;
      list-style: none;
      border-right: 1px solid #e6e9f0;
    }
    .mega3-tab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 28px;
      font-size: 17px;
      font-weight: 500;
      color: #1a1c2e;
      cursor: pointer;
      border-left: 3px solid transparent;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      text-transform: none;
      margin: 0;
      line-height: 1.3;
    }
    .mega3-tab:hover { color: #0a58ca; }
    .mega3-tab.active {
      background: #ffffff;
      color: #0a3b8c;
      font-weight: 700;
      border-left-color: #0a58ca;
    }
    .mega3-tab .mega3-tarrow { font-size: 12px; opacity: 0.55; }
    /* content area: detail (menu items / Know more) + section image */
    .mega3-content { flex: 1 1 auto; display: flex; }
    .mega3-panel { display: none; flex: 1 1 auto; }
    .mega3-panel.active { display: flex; animation: mega3fade 0.28s ease; }
    @keyframes mega3fade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .mega3-detail {
      flex: 1 1 auto;
      min-width: 0;
      padding: 30px 40px;
      display: flex;
      flex-direction: column;
    }
    /* Careers detail is vertically centered (title + Know more) */
    .mega3-detail.mega3-detail-center { justify-content: center; }
    .mega3-heading {
      font-size: 22px;
      font-weight: 700;
      color: #0a3b8c;
      margin: 0 0 18px;
      line-height: 1.2;
    }
    .mega3-detail-center .mega3-heading { font-size: 28px; margin-bottom: 16px; }
    .mega3-heading a { color: inherit; }
    .mega3-heading a:hover { color: #0a58ca; }
    .mega3-desc {
      font-size: 15px;
      line-height: 1.7;
      color: #4a5169;
      margin: 0 0 28px;
      max-width: 440px;
    }
    /* Know more button (Careers only) */
    .mega3-knowmore {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      align-self: flex-start;
      padding: 13px 28px;
      background: #0a58ca;
      color: #ffffff !important;
      font-size: 15px;
      font-weight: 600;
      border-radius: 40px;
      text-transform: none;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .mega3-knowmore:hover { background: #0a3b8c; transform: translateY(-1px); }
    .mega3-knowmore span { font-size: 12px; line-height: 1; }
    /* simple link grids (Solutions / Industries / Technologies / Work / Insights / Company) */
    .mega3-links-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px 30px;
    }
    .mega3-links-grid a {
      display: block;
      padding: 11px 8px;
      font-size: 15px;
      font-weight: 400;
      color: #10306b;
      border-bottom: 1px solid #eef1f6;
      text-transform: none;
      transition: color 0.2s ease, padding-left 0.2s ease;
    }
    .mega3-links-grid a:hover { color: #0a58ca; padding-left: 14px; }
    /* Services two-level (parent categories + subservices) */
    .mega3-sub { display: flex; }
    .mega3-cats {
      flex: 0 0 250px;
      list-style: none;
      margin: 0;
      padding: 0 20px 0 0;
      border-right: 1px solid #e6e9f0;
    }
    .mega3-cat {
      padding: 12px 6px 12px 4px;
      font-size: 15px;
      font-weight: 400;
      color: #1a1c2e;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eef1f6;
      transition: color 0.2s ease;
    }
    .mega3-cat:hover { color: #0a58ca; }
    .mega3-cat.active { color: #0a58ca; }
    .mega3-cat .mega3-arrow { font-size: 12px; opacity: 0.6; transition: transform 0.2s ease; }
    .mega3-cat.active .mega3-arrow { transform: translateX(3px); }
    .mega3-cat-content { flex: 1 1 auto; padding-left: 26px; min-width: 0; }
    .mega3-cat-panel { display: none; }
    .mega3-cat-panel.active { display: block; animation: mega3fade 0.28s ease; }
    .mega3-cat-title { font-size: 17px; font-weight: 700; color: #0a3b8c; margin: 0 0 12px; }
    .mega3-cat-links {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px 24px;
    }
    .mega3-cat-links a {
      display: block;
      padding: 9px 8px;
      font-size: 14px;
      font-weight: 400;
      color: #10306b;
      border-bottom: 1px solid #eef1f6;
      text-transform: none;
      transition: color 0.2s ease, padding-left 0.2s ease;
    }
    .mega3-cat-links a:hover { color: #0a58ca; padding-left: 12px; }
    /* right-side image reflecting the section */
    .mega3-figure {
      flex: 0 0 300px;
      max-width: 300px;
      overflow: hidden;
      background: #eef2f8;
    }
    .mega3-figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

/* ============================================================
   TECHNOLOGY EXPERTISE SECTION (tech__area-3)
   Black section on the template's dark theme (.dark). On desktop
   (>1200px) it PINS and the cards move horizontally one-at-a-time as
   the page scrolls (GSAP pin+scrub, mirrors the "why choose us"
   section). Below 1200px it falls back to a simple stacked grid.
   All styles scoped to .tech__area-3.
   ============================================================ */
.tech__area-3.dark { background-color: #000; overflow: hidden; padding: 0; }

/* Pinned wrapper: header stays, card track scrolls, progress below.
   min-height (not a fixed height) so that on short/landscape viewports,
   where a card's tags wrap to an extra row and push past 100vh, the box
   grows to fit instead of clipping the arrows/dots underneath it -
   overflow:hidden still correctly hides the carousel's off-screen
   horizontal panels either way. */
.tech__area-3 .tech__pin {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 10vh;
}
/* At 768-1399px the header+card content is noticeably shorter than the
   min-height:100vh box, so centering it leaves a large empty gap above
   (and below) on anything but a short viewport - drop the full-viewport
   min-height here so the section hugs its own content instead, scoped to
   this range like the Case Studies fixes above it in this file. */
@media only screen and (min-width: 768px) and (max-width: 1399px) {
  .tech__area-3 .tech__pin {
    min-height: 0;
    padding: 60px 0;
  }
}
/* 768-1199px only: the fixed header (.header__area-2) is 111px tall in this
   range (not the 80px it is at 1200px+ - .header__inner-2 picks up 20px of
   vertical padding here), so the 60px top clearance above still left "The
   Right Technologies..." rendering underneath the header bar. Push the head
   down far enough to clear it; bottom padding stays the 60px set above. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .tech__area-3 .tech__pin {
    padding-top: 90px;
  }
}
/* Ambient background behind the pinned header + cards: an orbital
   "AI core" HUD - concentric rings each carrying one glowing satellite
   that orbits at its own speed/direction (like electrons around a
   nucleus), a slow breathing pulse from the core, and the core itself
   pulsing, all glowing in the brand green. Tucked against the right
   edge so it reads as a quiet AI/network motif without sitting under
   the text or card. Pure CSS, no JS. */
.tech__area-3 .tech__bg-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tech__area-3 .tech__radar {
  position: absolute;
  top: 60%;
  right: -230px;
  width: 620px;
  height: 620px;
  transform: translateY(-50%);
}
.tech__area-3 .tech__radar-ring { position: absolute; border: 1px dashed rgba(79, 184, 62, 0.22); border-radius: 50%; }
.tech__area-3 .tech__radar-ring-1 { inset: 0; }
.tech__area-3 .tech__radar-ring-2 { inset: 90px; }
.tech__area-3 .tech__radar-ring-3 { inset: 180px; }

/* Each orbit is a full-circle wrapper the same size as its ring; rotating
   the wrapper carries its satellite dot around the ring's edge. */
.tech__area-3 .tech__radar-orbit { position: absolute; border-radius: 50%; animation: techOrbitSpin linear infinite; }
.tech__area-3 .tech__radar-orbit-1 { inset: 0; animation-duration: 24s; }
.tech__area-3 .tech__radar-orbit-2 { inset: 90px; animation-duration: 15s; animation-direction: reverse; }
.tech__area-3 .tech__radar-orbit-3 { inset: 180px; animation-duration: 8s; }
.tech__area-3 .tech__radar-sat {
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px 3px rgba(79, 184, 62, 0.65);
}
.tech__area-3 .tech__radar-orbit-2 .tech__radar-sat { width: 6px; height: 6px; margin-left: -3px; opacity: 0.85; }
.tech__area-3 .tech__radar-orbit-3 .tech__radar-sat { width: 5px; height: 5px; margin-left: -2.5px; box-shadow: 0 0 12px 4px rgba(79, 184, 62, 0.8); }

.tech__area-3 .tech__radar-pulse {
  position: absolute; inset: 0;
  border: 1px solid rgba(79, 184, 62, 0.45);
  border-radius: 50%;
  transform: scale(0.05);
  opacity: 0;
  animation: techRadarPulse 7s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
}
.tech__area-3 .tech__radar-core {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; margin: -5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 24px 6px rgba(79, 184, 62, 0.6);
  animation: techRadarCore 3s ease-in-out infinite;
}
@keyframes techOrbitSpin { to { transform: rotate(360deg); } }
@keyframes techRadarPulse {
  0% { transform: scale(0.05); opacity: 0.5; }
  75% { opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes techRadarCore {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
/* Below 1200px the section falls back to stacked cards with little
   breathing room next to the text, so skip the radar there entirely
   rather than risk it landing on top of copy. */
@media only screen and (max-width: 1200px) {
  .tech__area-3 .tech__bg-fx { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tech__area-3 .tech__radar-orbit,
  .tech__area-3 .tech__radar-pulse,
  .tech__area-3 .tech__radar-core { animation: none; }
}
.tech__area-3 .tech__pin > .container,
.tech__area-3 .tech__pin > .tech__track { position: relative; z-index: 1; }
.tech__area-3 .tech__head { align-items: flex-end; margin: 0; }
.tech__area-3 .tech__head-text p { max-width: 470px; }

/* Horizontal track of full-width panels (one card per panel). Desktop
   advances via JS-driven transform (arrows/dots/autoplay - see main.js);
   the transition here is what makes those jumps slide smoothly. */
.tech__area-3 .tech__track { display: flex; flex-wrap: nowrap; width: 100%; margin: 64px 0 52px; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.tech__area-3 .tech__panel {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}
.tech__area-3 .tech__card {
  width: 100%;
  max-width: 820px;
  background: #0e0e0e;
  border: 1px solid var(--bg-line);
  border-radius: 16px;
  padding: 44px 46px;
}
.tech__area-3 .tech__card-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bg-line);
}
.tech__area-3 .tech__card-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79, 184, 62, 0.1);
  color: var(--primary);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech__area-3 .tech__card-heading { margin-right: auto; }
.tech__area-3 .tech__card-name { margin: 0; font-size: 30px; font-weight: 500; color: var(--white); line-height: 1.1; }
.tech__area-3 .tech__card-sub { font-size: 15px; color: var(--gray-2); }
.tech__area-3 .tech__card-count { font-size: 34px; font-weight: 500; color: var(--primary); line-height: 1; }
.tech__area-3 .tech__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.tech__area-3 .tech__tags li {
  font-size: 15px;
  font-weight: 300;
  color: var(--gray-2);
  padding: 9px 20px;
  border: 1px solid var(--bg-line);
  border-radius: 40px;
}

/* Card-switch reveal: whichever card becomes active (see techSetActiveCard
   in main.js, driven by the same arrows/dots/autoplay as the slide) gets
   a HUD "scan" flash, a popping icon, tags cascading in left-to-right and
   its count rolling up from zero - echoes the radar/scan motif in
   .tech__bg-fx above. Purely opacity/transform/content, so the card's
   box size and the track's layout are untouched. Desktop-only, matching
   the JS carousel's own >1200px gate. */
@media (min-width: 1201px) {
  .tech__area-3 .tech__card { position: relative; overflow: hidden; }
  .tech__area-3 .tech__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 42%, rgba(79, 184, 62, .18) 50%, transparent 58%);
    transform: translateX(-130%);
    pointer-events: none;
  }
  .tech__area-3 .tech__card.is-active::after { animation: techCardScan .9s ease-out; }

  .tech__area-3 .tech__card.is-active .tech__card-icon { animation: techIconPop .6s cubic-bezier(.34, 1.56, .64, 1); }

  .tech__area-3 .tech__tags li { opacity: 0; transform: translateY(10px); }
  .tech__area-3 .tech__card.is-active .tech__tags li { animation: techTagIn .5s ease forwards; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(1) { animation-delay: .04s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(2) { animation-delay: .09s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(3) { animation-delay: .14s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(4) { animation-delay: .19s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(5) { animation-delay: .24s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(6) { animation-delay: .29s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(7) { animation-delay: .34s; }
}
@keyframes techCardScan { to { transform: translateX(130%); } }
@keyframes techIconPop {
  0% { transform: scale(.4) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes techTagIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tech__area-3 .tech__card::after,
  .tech__area-3 .tech__card.is-active .tech__card-icon,
  .tech__area-3 .tech__card.is-active .tech__tags li { animation: none; }
  .tech__area-3 .tech__tags li { opacity: 1; transform: none; }
}

/* Carousel controls: prev/next circular arrow buttons + dot indicators */
.tech__area-3 .tech__nav { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 820px; margin: 0 auto; padding: 0 20px; }
.tech__area-3 .tech__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bg-line);
  background: transparent;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.tech__area-3 .tech__arrow:hover { background: rgba(79, 184, 62, 0.12); border-color: var(--primary); color: var(--primary); }
.tech__area-3 .tech__dots { display: flex; align-items: center; gap: 8px; }
.tech__area-3 .tech__dot { width: 7px; height: 7px; border-radius: 4px; background: var(--bg-line); cursor: pointer; transition: width .25s ease, background .25s ease; }
.tech__area-3 .tech__dot.active { width: 22px; background: var(--primary); }

/* After the pinned scroll: feature row + CTA */
.tech__area-3 .tech__after { padding: 24px 0 130px; }
.tech__area-3 .tech__features { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bg-line); }
.tech__area-3 .tech__feature { padding: 42px 34px 4px; border-left: 1px solid var(--bg-line); }
.tech__area-3 .tech__feature:first-child { border-left: none; padding-left: 0; }
.tech__area-3 .tech__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(79, 184, 62, 0.1);
  color: var(--primary);
  font-size: 20px;
  margin-bottom: 20px;
}
.tech__area-3 .tech__feature-title { font-size: 20px; font-weight: 500; color: var(--white); margin: 0 0 10px; }
.tech__area-3 .tech__feature-text { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--gray-2); margin: 0; }
.tech__area-3 .tech__cta { display: flex; justify-content: center; margin-top: 70px; }

/* ---------- Fallback below 768px (phone only) - tablet keeps the same
   pinned single-card carousel as desktop, matching the breakpoint used
   by the other pinned sections on the homepage (360 Solutions,
   End-to-End Technology Services, Industry Expertise): no pin, stacked
   cards ---------- */
@media only screen and (max-width: 767px) {
  .tech__area-3 .tech__pin { height: auto; min-height: 0; overflow: visible; display: block; padding: 90px 0 0; }
  .tech__area-3 .tech__head { margin-bottom: 50px; align-items: flex-start; }
  .tech__area-3 .tech__track { flex-wrap: wrap; gap: 24px; margin: 0; }
  .tech__area-3 .tech__panel { flex: 0 0 100%; padding: 0; }
  .tech__area-3 .tech__card { max-width: none; padding: 32px 26px; }
  .tech__area-3 .tech__nav { display: none; }
  .tech__area-3 .tech__after { padding: 70px 0 80px; }
  .tech__area-3 .tech__features { grid-template-columns: 1fr; }
  .tech__area-3 .tech__feature { border-left: none; padding-left: 0; text-align: center; }
}

/* ---------- Phone-only (<=767px) card reveal: the carousel/autoplay above
   never runs at this width (see the device_width > 767 gate in main.js
   #66), so the stacked cards would otherwise just sit static with no
   motion. Reuse the SAME HUD "scan" reveal defined above for the desktop
   card-switch (scan-line flash, icon pop, cascading tags) - just toggled
   by scroll position instead of the carousel (see main.js #66 phone
   branch, which adds .is-active once per card via ScrollTrigger). The
   card's own fade/rise-in is driven by GSAP inline styles there too
   (not a CSS default), so it never stays invisible if the script fails
   to run - only these inner details wait on .is-active, matching the
   same trade-off the desktop-only rules above already accept. ---------- */
@media (max-width: 767px) {
  .tech__area-3 .tech__card { position: relative; overflow: hidden; }
  .tech__area-3 .tech__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 42%, rgba(79, 184, 62, .18) 50%, transparent 58%);
    transform: translateX(-130%);
    pointer-events: none;
  }
  .tech__area-3 .tech__card.is-active::after { animation: techCardScan .9s ease-out; }
  .tech__area-3 .tech__card.is-active .tech__card-icon { animation: techIconPop .6s cubic-bezier(.34, 1.56, .64, 1); }
  .tech__area-3 .tech__tags li { opacity: 0; transform: translateY(10px); }
  .tech__area-3 .tech__card.is-active .tech__tags li { animation: techTagIn .5s ease forwards; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(1) { animation-delay: .04s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(2) { animation-delay: .09s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(3) { animation-delay: .14s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(4) { animation-delay: .19s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(5) { animation-delay: .24s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(6) { animation-delay: .29s; }
  .tech__area-3 .tech__card.is-active .tech__tags li:nth-child(7) { animation-delay: .34s; }
}

/* ============================================================
   INDUSTRIES WE SERVE SECTION (industries__area)
   Desktop (>1200px): the section pins (same technique as Technology
   Expertise / tech__area-3). One persistent card holds two
   independently-animated internal stacks: the image wipes via
   clip-path (old image's visible band shrinks from the bottom up,
   new image's grows from the bottom up - a single wipe-line sweep),
   while the text is a vertical filmstrip (each block pre-stacked at
   translateY(index*100%)) that shifts up by one panel-height per
   card. Below 1200px this all falls back to plain stacked cards
   (.industries__mobile) - no pin, no wipe, no carousel.
   All styles scoped to .industries__area.
   ============================================================ */
.industries__area { background: #07152F; overflow: hidden; padding: 0; }

/* Pinned wrapper: header sits near the top, the card stage is centered in the
   FULL viewport independently of the header (not the leftover space below it) */
.industries__area .industries__pin {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  padding-top: 8vh;
}

/* Tiled word-mark backdrop, hidden until the intro phase fades it in */
.industries__area .industries__wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}
.industries__area .industries__wallpaper-row {
  opacity: 0;
  white-space: nowrap;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
  color: #005fcc;
}

.industries__area .industries__head { position: relative; z-index: 2; align-items: flex-end; margin: 0; }
.industries__area .industries__title {
  margin: 0;
  color: var(--white);
  font-size: 52px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
}
.industries__area .industries__title span { color: #005fcc; }
/* 768-991px: no dedicated tablet size existed here (only the <=767px phone
   override below), so it fell through to desktop's 52px - too large for
   this narrower single-column width, crowding both edges. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .industries__area .industries__title { font-size: 40px; }
}
.industries__area .industries__head-text { margin-left: auto; max-width: 420px; }
.industries__area .industries__head-text p { margin: 0 0 20px; color: rgba(255, 255, 255, .9); }
.industries__area .industries__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #005fcc;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: color .3s ease;
}
.industries__area .industries__cta i { font-size: 12px; transition: transform .3s ease; }
.industries__area .industries__cta:hover { color: #6ea2ff; }
.industries__area .industries__cta:hover i { transform: translateX(4px); }

/* Stage: absolutely centered in the visible viewport (both axes), independent
   of the industries__head text above it - not the leftover space below it.
   Offset top by the fixed nav's height (.header__area-2, 80px) since that bar
   overlays the section and eats into the space actually visible to the user -
   centering against the full 100vh would sit the card slightly high. */
.industries__area .industries__stage {
  position: absolute;
  top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
.industries__area .industries__card {
  position: relative;
  width: 100%;
  max-width: 1180px;
  min-height: 460px;
  display: flex;
  align-items: stretch;
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 20, 80, .28);
}

/* Left: stack of images, one per industry, revealed by a clip-path wipe */
.industries__area .industries__card-img { position: relative; flex: 0 0 46%; overflow: hidden; }
.industries__area .industries__img-slide { position: absolute; inset: 0; }
.industries__area .industries__img-slide img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; display: block; }

/* Right: vertical filmstrip of text blocks, pre-stacked one panel-height apart */
.industries__area .industries__card-content { position: relative; flex: 1; overflow: hidden; }
.industries__area .industries__content-slide { position: absolute; inset: 0; padding: 50px 54px; display: flex; flex-direction: column; justify-content: center; }
.industries__area .industries__content-slide h3 { margin: 0 0 16px; font-size: 30px; font-weight: 700; color: #0a0a0a; }
.industries__area .industries__content-slide p { margin: 0 0 26px; font-size: 15px; line-height: 1.7; color: #555; }
.industries__area .industries__card-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #005fcc; text-decoration: none; }
.industries__area .industries__card-link i { font-size: 12px; transition: transform .3s ease; }
.industries__area .industries__card-link:hover i { transform: translateX(4px); }

/* Scroll progress dots, pinned to the side of the card */
.industries__area .industries__dots {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.industries__area .industries__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .3s ease, transform .3s ease; }
.industries__area .industries__dot.active { background: #005fcc; transform: scale(1.35); }

/* Mobile/tablet fallback: hidden on desktop, no pin/wipe/carousel involved */
.industries__area .industries__mobile { display: none; }

/* 768-1399px: the stage centers the card in the full section height by
   default, leaving equal empty space above (under the wallpaper/head text)
   and below the card. Flush the card to the top instead. */
@media (min-width: 768px) and (max-width: 1399px) {
  .industries__area .industries__stage { align-items: flex-start; padding-top: 20px; }
  .industries__area .industries__dots { display: none; }
  /* Shrink the pin down to exactly what the top-anchored card occupies
     (stage's top:80 clearance + its own padding-top + the card's own
     height, unchanged above) instead of leaving the rest of the 100vh
     box empty below the card. */
  .industries__area .industries__pin { height: calc(80px + 20px + 460px + 20px); min-height: 560px; padding-top: 20px; }
}
/* ---------- Fallback below 768px (phone only) - tablet keeps the same
   pinned wipe/carousel as desktop, matching the same "only phone differs"
   breakpoint used by the Technology Expertise and 360 Solutions sections
   above: no pin, plain stacked cards ---------- */
@media only screen and (max-width: 767px) {
  .industries__area .industries__pin { height: auto; min-height: 0; overflow: visible; display: block; padding: 70px 0; }
  .industries__area .industries__wallpaper { display: none; }
  .industries__area .industries__head { margin-bottom: 40px; align-items: flex-start; }
  .industries__area .industries__title { font-size: 40px; }
  .industries__area .industries__head-text { margin-left: 0; }
  .industries__area .industries__stage { display: none; }
  .industries__area .industries__dots { display: none; }

  .industries__area .industries__mobile { display: flex; flex-direction: column; gap: 24px; padding: 0 20px; }
  .industries__area .industries__mobile-card { background: var(--white); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 20, 80, .28); }
  .industries__area .industries__mobile-img img { width: 100%; height: 240px; object-fit: cover; display: block; }
  .industries__area .industries__mobile-content { padding: 30px 24px; }
  .industries__area .industries__mobile-content h3 { margin: 0 0 16px; font-size: 26px; font-weight: 700; color: #0a0a0a; }
  .industries__area .industries__mobile-content p { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: #555; }
}

/* ============================================================
   OUR PROCESS SECTION v2 (proc2__area)
   Completely new design: a vertical alternating "journey" timeline.
   New animation language = clip-path reveals (wipes) + a drawing spine,
   distinct from the transform/opacity/pin animations used elsewhere.
   Scoped entirely to .proc2__area. Light section to bridge the black
   Technology band into the testimonials.
   ============================================================ */
.proc2__area {
  --pc: #005fcc;
  --pc2: #8079f8;
  --ph: #1c1e2b;
  --pt: #6b7089;
  --pb: #e9eaf5;
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background: #f6f7fc;
  color: var(--pt);
  font-family: "Kanit", sans-serif;
}

/* ---------- Header ---------- */
.proc2__head { text-align: center; max-width: 680px; margin: 0 auto; }
.proc2__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pc);
  margin-bottom: 18px;
}
.proc2__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--ph); margin: 0 0 20px; }
.proc2__intro { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--pt); margin: 0; }

/* ---------- Journey timeline ---------- */
.proc2__timeline { position: relative; max-width: 1040px; margin: 70px auto 0; }
.proc2__spine {
  position: absolute;
  top: 6px;
  bottom: 46px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #e2e3f2;
}
.proc2__spine-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--pc), var(--pc2)); }

.proc2__step { position: relative; width: 50%; padding-bottom: 54px; }
.proc2__step--l { padding-right: 52px; text-align: right; }
.proc2__step--r { margin-left: 50%; padding-left: 52px; text-align: left; }
.proc2__step:last-child { padding-bottom: 0; }

.proc2__node {
  position: absolute;
  top: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 95, 204, 0.4);
  z-index: 2;
}
.proc2__step--l .proc2__node { right: -23px; }
.proc2__step--r .proc2__node { left: -23px; }

.proc2__card {
  display: inline-block;
  text-align: left;
  max-width: 430px;
  background: #fff;
  border: 1px solid var(--pb);
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: 0 14px 34px rgba(28, 30, 43, 0.05);
  transition: transform .35s ease, box-shadow .35s ease;
}
.proc2__card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(91, 82, 245, 0.16); }
.proc2__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(91, 82, 245, 0.1);
  color: var(--pc);
  font-size: 22px;
  margin-bottom: 16px;
}
.proc2__step-title { font-size: 22px; font-weight: 600; color: var(--ph); margin: 0 0 10px; }
.proc2__step-text { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--pt); margin: 0; }

/* ---------- Guiding principles ---------- */
.proc2__principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1040px;
  margin: 24px auto 0;
  padding-top: 56px;
  border-top: 1px solid var(--pb);
}
.proc2__principle { display: flex; align-items: flex-start; gap: 14px; }
.proc2__p-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(91, 82, 245, 0.3);
  background: rgba(91, 82, 245, 0.08);
  color: var(--pc);
  font-size: 18px;
}
.proc2__principle h4 { font-size: 17px; font-weight: 600; color: var(--ph); margin: 2px 0 6px; }
.proc2__principle p { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--pt); margin: 0; }

/* ---------- CTA ---------- */
.proc2__cta { text-align: center; margin-top: 70px; }
.proc2__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 36px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(90deg, var(--pc2), var(--pc));
  box-shadow: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.proc2__btn:hover { transform: translateY(-3px); box-shadow: none; color: #fff; }
.proc2__note { margin: 20px 0 0; font-size: 15px; font-weight: 300; color: var(--pt); }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 991px) {
  .proc2__title { font-size: 34px; }
  .proc2__principles { grid-template-columns: repeat(2, 1fr); gap: 32px 26px; }
}
@media only screen and (max-width: 767px) {
  .proc2__area { padding: 90px 0; }
  .proc2__title { font-size: 28px; }
  .proc2__intro { font-size: 16px; }
  .proc2__timeline { max-width: 500px; }
  .proc2__spine { left: 22px; }
  .proc2__step { width: 100%; margin-left: 0; padding: 0 0 40px 58px; text-align: left; }
  .proc2__step--l, .proc2__step--r { text-align: left; }
  .proc2__step .proc2__node { left: 0; right: auto; }
  .proc2__card { max-width: none; }
  .proc2__principles { grid-template-columns: 1fr; }
}

/* ============================================================
   SOLUTIONS PAGE (soln__*)
   Scoped entirely to .soln__page (added on <main> of solutions.html).
   Reuses the brand language already established by .proc2__area and
   .final-cta: #005fcc primary, #8079f8 secondary, #07152F dark bands,
   #f6f7fc light bands, Kanit type. Nothing here leaks to other pages.
   ============================================================ */
.soln__page {
  --sc: #005fcc;
  --sc2: #8079f8;
  --sh: #1c1e2b;
  --st: #6b7089;
  --sb: #e9eaf5;
  --sbg: #f6f7fc;
  --sdark: #07152F;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.soln__page .soln__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sc);
  margin-bottom: 18px;
}
.soln__page .soln__title {
  font-size: 44px;
  line-height: 1.18;
  font-weight: 600;
  color: var(--sh);
  margin: 0 0 20px;
}
.soln__page .soln__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--sh);
  margin: 0 0 18px;
}
.soln__page .soln__text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--st);
  margin: 0 0 16px;
}
.soln__page .soln__text:last-child { margin-bottom: 0; }
.soln__page .soln__head { max-width: 780px; }
.soln__page .soln__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.soln__page .soln__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
  color: var(--sc);
  border: 2px solid var(--sc);
  background: transparent;
}
.soln__page .soln__btn-outline:hover { background: var(--sc); color: #fff; }

/* ---------- 01. Page opener - "orbit" hero ----------
   A hub-and-satellite diagram (not the plain .development__area list the
   other __dev hub pages share) - the six solution pillars orbit a central
   "Your Business" core, wired to it by animated connector lines. Entirely
   custom-built for this page; nothing here is reused by svc__dev/ind__dev/
   tech__dev, so it can evolve independently of them. */
/* The theme's grid-menu button always draws a 180px decorative ring around
   itself (.menu-icon-2::after) - on this page's white/light background it
   pokes out past the header as a stray circle in the top-right corner. */
.soln__header .menu-icon-2::after { display: none; }

.soln__hero {
  position: relative;
  overflow: hidden;
  padding: 160px 0 120px;
  background: linear-gradient(180deg, #fff 0%, var(--sbg) 100%);
}
.soln__hero-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.soln__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
  animation: soln-blob-drift 14s ease-in-out infinite;
}
.soln__hero-blob-1 {
  width: 420px; height: 420px; top: -140px; right: -80px;
  background: var(--sc);
}
.soln__hero-blob-2 {
  width: 340px; height: 340px; bottom: -120px; left: -100px;
  background: var(--sc2);
  animation-delay: -7s;
}
@keyframes soln-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
}
.soln__hero > .container { position: relative; z-index: 1; }
.soln__hero-copy { max-width: 560px; }
.soln__hero-title {
  font-size: 48px;
  line-height: 1.12;
  font-weight: 600;
  color: var(--sh);
  margin: 0 0 22px;
}
.soln__hero-copy .soln__lead { margin-bottom: 16px; }
.soln__hero-copy .soln__text { margin-bottom: 30px; }

/* ---- orbit diagram ---- */
.soln__orbit {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 60px auto 0;
}
.soln__orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.soln__orbit-line {
  stroke: rgba(0, 95, 204, .3);
  stroke-width: 2;
  stroke-dasharray: 6 10;
  animation: soln-line-flow 2.6s linear infinite;
  animation-delay: var(--ld);
}
@keyframes soln-line-flow { to { stroke-dashoffset: -64; } }

.soln__orbit-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 124px; height: 124px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--sc), var(--sc2));
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: 0 20px 50px rgba(0, 95, 204, .35);
  z-index: 2;
}
.soln__orbit-core::before, .soln__orbit-core::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 95, 204, .35);
  animation: soln-pulse 3.2s ease-out infinite;
}
.soln__orbit-core::after { animation-delay: 1.6s; }
@keyframes soln-pulse {
  0% { transform: scale(.82); opacity: .9; }
  100% { transform: scale(1.65); opacity: 0; }
}

.soln__orbit-node {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
  text-decoration: none;
}
.soln__orbit-node-in {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--sb);
  color: var(--sc);
  font-size: 20px;
  box-shadow: 0 10px 30px rgba(28, 30, 43, .08);
  animation: soln-float 5s ease-in-out infinite;
  animation-delay: var(--d);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .3s ease;
}
@keyframes soln-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.soln__orbit-node:hover .soln__orbit-node-in,
.soln__orbit-node:focus-visible .soln__orbit-node-in {
  animation: none;
  transform: scale(1.12);
  background: linear-gradient(135deg, var(--sc), var(--sc2));
  color: #fff;
  box-shadow: 0 18px 40px rgba(0, 95, 204, .3);
}

.soln__orbit-tip {
  position: absolute;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--sh);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(28, 30, 43, .18);
}
.soln__orbit-node:hover .soln__orbit-tip,
.soln__orbit-node:focus-visible .soln__orbit-tip { opacity: 1; visibility: visible; }
/* vertical placement: label sits on the side facing the hub */
.soln__orbit-node--b .soln__orbit-tip { top: calc(100% + 14px); }
.soln__orbit-node--a .soln__orbit-tip { bottom: calc(100% + 14px); }
/* horizontal anchor: centered by default, or pinned to the edge nearest
   the container's centre so the pill never spills past the diagram */
.soln__orbit-node:not(.soln__orbit-node--al):not(.soln__orbit-node--ar) .soln__orbit-tip {
  left: 50%; transform: translate(-50%, 6px);
}
.soln__orbit-node:not(.soln__orbit-node--al):not(.soln__orbit-node--ar):hover .soln__orbit-tip,
.soln__orbit-node:not(.soln__orbit-node--al):not(.soln__orbit-node--ar):focus-visible .soln__orbit-tip {
  transform: translate(-50%, 0);
}
.soln__orbit-node--ar .soln__orbit-tip { right: 0; left: auto; transform: translateY(6px); }
.soln__orbit-node--ar:hover .soln__orbit-tip,
.soln__orbit-node--ar:focus-visible .soln__orbit-tip { transform: translateY(0); }
.soln__orbit-node--al .soln__orbit-tip { left: 0; transform: translateY(6px); }
.soln__orbit-node--al:hover .soln__orbit-tip,
.soln__orbit-node--al:focus-visible .soln__orbit-tip { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .soln__hero-blob,
  .soln__orbit-line,
  .soln__orbit-core::before,
  .soln__orbit-core::after,
  .soln__orbit-node-in { animation: none; }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .soln__hero-title { font-size: 42px; }
}
@media only screen and (max-width: 1199px) {
  .soln__hero { padding: 150px 0 100px; }
  .soln__hero-title { font-size: 36px; }
}
@media only screen and (max-width: 991px) {
  .soln__hero-copy { max-width: none; text-align: center; margin: 0 auto; }
  .soln__hero-copy .soln__btn-outline { margin: 0 auto; }
  /* the pinned-circle diagram only reads at width; below it, fall back to a
     plain two-up card grid so it stays usable (and tappable) on touch */
  .soln__orbit {
    max-width: none;
    aspect-ratio: auto;
    height: auto;
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .soln__orbit-lines, .soln__orbit-core { display: none; }
  .soln__orbit-node {
    position: static;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--sb);
    box-shadow: 0 10px 30px rgba(28, 30, 43, .06);
  }
  .soln__orbit-node-in {
    width: auto; height: auto;
    background: none !important;
    border: none;
    box-shadow: none;
    animation: none;
    color: var(--sc);
    font-size: 24px;
  }
  .soln__orbit-node:hover .soln__orbit-node-in,
  .soln__orbit-node:focus-visible .soln__orbit-node-in { transform: none; color: var(--sc2); }
  .soln__orbit-tip {
    position: static;
    opacity: 1; visibility: visible;
    background: none; color: var(--sh);
    padding: 0; box-shadow: none;
    font-size: 14px; font-weight: 600; line-height: 1.4;
    white-space: normal;
    transform: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .soln__hero { padding: 130px 0 80px; }
  .soln__hero-title { font-size: 28px; }
}
@media only screen and (max-width: 575px) {
  .soln__orbit { grid-template-columns: 1fr; }
}

/* ---------- 02. Wide banner ---------- */
/* Parallax on a banner that carries baked-in text, so it must never be
   cropped. The frame takes the artwork's own aspect ratio and the image is
   `contain`-fitted inside an over-tall box: at rest it lands exactly flush
   with the frame, and ScrollSmoother's data-speed drift eats into the
   letterbox padding instead of the artwork. The frame background matches the
   artwork's near-black edges so the drift is seamless. */
.soln__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1783 / 882;
  overflow: hidden;
  /* sampled from the artwork's own top and bottom edges so whichever end the
     drift exposes, the join is invisible */
  background: linear-gradient(180deg, #000613 0%, #000d25 100%);
}
.soln__banner img {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  object-fit: contain;
  display: block;
}

/* ---------- 03. Intro ---------- */
.soln__intro { padding: 130px 0; background: #fff; }
.soln__intro-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: center;
}
.soln__intro-figure {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(28, 30, 43, .13);
}
.soln__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soln__intro-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  right: 24px;
  /* the theme sets a global `img { position: relative; z-index: 1 }`,
     so overlays sitting on top of an image need their own z-index */
  z-index: 2;
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .16);
}
.soln__intro-badge strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--sh);
  line-height: 1.3;
  margin-bottom: 4px;
}
.soln__intro-badge span { font-size: 14px; font-weight: 300; color: var(--st); }

/* ---------- 04. Core solutions (interactive showcase) ----------
   Not a grid of six equal cards - a slim switchable list on the left drives
   one large "spotlight" panel on the right, so each solution gets full
   attention instead of splitting focus six ways. Auto-advances every 6s
   until a visitor takes over by clicking a tab. */
.soln__cards { padding: 130px 0; background: var(--sbg); }
.soln__showcase { display: grid; grid-template-columns: 340px 1fr; gap: 36px; margin-top: 60px; align-items: stretch; }

.soln__showcase-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--sb);
  border-radius: 18px;
  padding: 10px;
}
.soln__showcase-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background .3s ease;
}
.soln__showcase-tab:hover { background: var(--sbg); }
.soln__showcase-tab.active { background: linear-gradient(135deg, rgba(0, 95, 204, .08), rgba(128, 121, 248, .08)); }
.soln__showcase-tab-num { flex: 0 0 auto; width: 20px; font-size: 13px; font-weight: 700; color: var(--sb); transition: color .3s ease; }
.soln__showcase-tab.active .soln__showcase-tab-num { color: var(--sc); }
.soln__showcase-tab-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 95, 204, .08);
  color: var(--sc);
  font-size: 16px;
  transition: all .3s ease;
}
.soln__showcase-tab.active .soln__showcase-tab-ico { background: linear-gradient(135deg, var(--sc), var(--sc2)); color: #fff; }
.soln__showcase-tab-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.soln__showcase-tab-text strong { font-size: 15px; font-weight: 600; color: var(--sh); }
.soln__showcase-tab-text em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--st);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soln__showcase-panels { position: relative; height: 100%; }
.soln__showcase-panel {
  display: none;
  height: 100%;
  background: #fff;
  border: 1px solid var(--sb);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(28, 30, 43, .08);
}
.soln__showcase-panel.active { display: grid; grid-template-columns: 300px 1fr; }
.soln__showcase-media { position: relative; height: 100%; min-height: 380px; overflow: hidden; }
.soln__showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soln__showcase-badge {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sc), var(--sc2));
  color: #fff;
  font-size: 22px;
  box-shadow: 0 14px 30px rgba(0, 95, 204, .35);
}
.soln__showcase-content { padding: 44px 44px 40px; display: flex; flex-direction: column; justify-content: flex-start; }
.soln__showcase-content .soln__card-title { font-size: 28px; }
.soln__showcase-content .soln__card-link { margin-top: 6px; }
.soln__card-title { font-size: 23px; font-weight: 600; color: var(--sh); margin: 0 0 10px; }
.soln__card-tag { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--sh); margin: 0 0 14px; }
.soln__card-text { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--st); margin: 0 0 14px; }
.soln__card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sc);
  transition: gap .3s ease, color .3s ease;
}
.soln__card-link:hover { gap: 15px; color: var(--sc2); }

/* ---------- 05. Business challenges ---------- */
.soln__challenge { padding: 130px 0; background: #fff; }
.soln__challenge-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; }
.soln__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
.soln__list li {
  position: relative;
  padding: 16px 20px 16px 52px;
  border: 1px solid var(--sb);
  border-radius: 12px;
  background: var(--sbg);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--sh);
  transition: all .3s ease;
}
.soln__list li:hover { border-color: var(--sc); background: #fff; box-shadow: 0 14px 30px rgba(0, 95, 204, .08); }
.soln__list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  position: absolute;
  left: 20px;
  top: 18px;
  color: var(--sc);
}
.soln__note {
  margin-top: 30px;
  padding: 20px 24px;
  border-left: 3px solid var(--sc);
  border-radius: 0 12px 12px 0;
  background: var(--sbg);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--st);
}

/* ---------- 06. Connected solutions (dark band) ---------- */
.soln__connect { position: relative; overflow: hidden; padding: 130px 0; background: var(--sdark); }
.soln__connect::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(128, 121, 248, .26), transparent 64%);
}
.soln__connect > .container { position: relative; z-index: 1; }
.soln__connect .soln__eyebrow { color: #4da3ff; }
.soln__connect .soln__title { color: #fff; }
.soln__connect .soln__text { color: #9fb3cd; }
.soln__combo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.soln__combo {
  padding: 32px 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  transition: all .35s ease;
}
.soln__combo:hover {
  background: rgba(0, 95, 204, .16);
  border-color: rgba(77, 163, 255, .5);
  transform: translateY(-6px);
}
.soln__combo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(77, 163, 255, .14);
  color: #4da3ff;
  font-size: 18px;
  margin-bottom: 18px;
}
.soln__combo h3 { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.soln__combo p { font-size: 15px; font-weight: 300; line-height: 1.75; color: #9fb3cd; margin: 0; }

/* ---------- 07. Why 3Shadz (asymmetric bento grid) ----------
   Deliberately not another uniform card grid: one dark "headline" tile
   (Business-First Thinking) anchors the mosaic at 2x2, three wide tiles
   flank it, and the remaining two stay compact - reads as a hierarchy of
   reasons rather than six interchangeable boxes. */
.soln__why { padding: 130px 0; background: var(--sbg); }
.soln__why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 24px;
  margin-top: 56px;
}
.soln__why-item {
  background: #fff;
  border: 1px solid var(--sb);
  border-radius: 16px;
  padding: 34px 30px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.soln__why-item:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.soln__why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 95, 204, .25);
  background: rgba(0, 95, 204, .08);
  color: var(--sc);
  font-size: 20px;
  margin-bottom: 20px;
}
.soln__why-item h3 { font-size: 20px; font-weight: 600; color: var(--sh); margin: 0 0 10px; }
.soln__why-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--st); margin: 0; }
.soln__why-item--wide { grid-column: span 2; }
.soln__why-item--lg {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, var(--sdark), #0b2350);
  border-color: transparent;
}
.soln__why-item--lg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px 240px at 100% 0%, rgba(0, 95, 204, .4), transparent 68%);
  pointer-events: none;
}
.soln__why-item--lg:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0, 95, 204, .28); }
.soln__why-item--lg .soln__why-ico {
  width: 64px;
  height: 64px;
  font-size: 26px;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
  color: #4da3ff;
  position: relative;
  z-index: 1;
}
.soln__why-item--lg h3 { position: relative; z-index: 1; font-size: 27px; color: #fff; }
.soln__why-item--lg p { position: relative; z-index: 1; font-size: 16px; color: #9fb3cd; }

/* ---------- 08. Industries (horizontal filmstrip) ----------
   Eight industries don't need to compete for space in a static grid - they
   scroll as a snapping rail with nav arrows, so the section reads as a
   curated strip to explore rather than a wall of tiles. */
.soln__ind { padding: 130px 0; background: #fff; }
.soln__ind-rail-wrap { position: relative; margin-top: 56px; }
.soln__ind-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--sc) var(--sb);
}
.soln__ind-rail::-webkit-scrollbar { height: 6px; }
.soln__ind-rail::-webkit-scrollbar-track { background: var(--sb); border-radius: 10px; }
.soln__ind-rail::-webkit-scrollbar-thumb { background: var(--sc); border-radius: 10px; }
.soln__ind-card {
  position: relative;
  flex: 0 0 calc((100% - 66px) / 4);
  scroll-snap-align: start;
  display: block;
  overflow: hidden;
  padding: 34px 26px 30px;
  background: #fff;
  border: 1px solid var(--sb);
  border-radius: 18px;
  transition: all .35s ease;
}
.soln__ind-card:hover {
  transform: translateY(-6px);
  border-color: var(--sc);
  box-shadow: 0 20px 44px rgba(0, 95, 204, .12);
}
.soln__ind-num {
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--sb);
  z-index: 0;
  transition: color .35s ease;
}
.soln__ind-card:hover .soln__ind-num { color: rgba(0, 95, 204, .16); }
.soln__ind-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--sc);
  font-size: 18px;
  margin-bottom: 18px;
}
.soln__ind-card h3 { position: relative; z-index: 1; font-size: 18px; font-weight: 600; color: var(--sh); margin: 0 0 8px; }
.soln__ind-card p { position: relative; z-index: 1; font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--st); margin: 0; }
.soln__ind-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 18px;
  border-radius: 50%;
  border: 1px solid var(--sb);
  color: var(--sc);
  transition: all .3s ease;
}
.soln__ind-card:hover .soln__ind-arrow { background: var(--sc); border-color: var(--sc); color: #fff; transform: translateX(3px); }
.soln__ind-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sb);
  box-shadow: 0 10px 24px rgba(28, 30, 43, .1);
  color: var(--sc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all .3s ease;
}
.soln__ind-nav:hover { background: var(--sc); border-color: var(--sc); color: #fff; }
.soln__ind-nav--prev { left: -23px; }
.soln__ind-nav--next { right: -23px; }
.soln__ind-cta { text-align: center; margin-top: 56px; }

/* ---------- 09. Our approach (alternating connected timeline) ----------
   Seven sequential steps read as a process, not a card wall - a spine runs
   down the middle with numbered nodes alternating left/right, mirroring
   the .proc2__area timeline pattern used on the Our Process page. */
.soln__approach { padding: 130px 0; background: var(--sbg); }
.soln__timeline { position: relative; max-width: 760px; margin: 70px auto 0; }
.soln__spine {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 27px;
  width: 2px;
  background: var(--sb);
}
.soln__spine-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sc2), var(--sc)); }
.soln__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: auto;
  padding-bottom: 44px;
}
.soln__step:last-child { padding-bottom: 0; }
.soln__node {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sc), var(--sc2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 8px 20px rgba(0, 95, 204, .35);
  z-index: 2;
}
.soln__step-card {
  flex: 1;
  text-align: left;
  background: #fff;
  border: 1px solid var(--sb);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 10px 26px rgba(28, 30, 43, .04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.soln__step-card:hover { transform: translateX(6px); border-color: var(--sc); box-shadow: 0 16px 34px rgba(0, 95, 204, .12); }
.soln__step-card h3 { font-size: 19px; font-weight: 600; color: var(--sh); margin: 0 0 8px; }
.soln__step-card p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--st); margin: 0; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .soln__page .soln__title { font-size: 38px; }
  .soln__intro,
  .soln__cards,
  .soln__challenge,
  .soln__connect,
  .soln__why,
  .soln__ind,
  .soln__approach { padding: 100px 0; }
  .soln__intro-grid { gap: 46px; }
  .soln__combo-grid { grid-template-columns: repeat(2, 1fr); }
  .soln__why-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(140px, auto); }
  .soln__why-item--lg { grid-row: auto; }
  .soln__ind-card { flex-basis: 250px; }
  .soln__showcase { grid-template-columns: 1fr; }
  .soln__showcase-tabs { flex-direction: row; overflow-x: auto; gap: 8px; }
  .soln__showcase-tab { flex: 0 0 auto; min-width: 240px; }
  .soln__showcase-panel.active { grid-template-columns: 1fr; }
  .soln__showcase-media { min-height: 280px; }
}
@media only screen and (max-width: 991px) {
  .soln__intro-grid,
  .soln__challenge-grid { grid-template-columns: 1fr; gap: 44px; }
  .soln__intro-figure { max-width: 560px; }
}
@media only screen and (max-width: 767px) {
  .soln__page .soln__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .soln__page .soln__title { font-size: 28px; }
  .soln__page .soln__lead { font-size: 17px; }
  .soln__page .soln__btn-outline { padding: 15px 26px; font-size: 15px; }
  .soln__intro,
  .soln__cards,
  .soln__challenge,
  .soln__connect,
  .soln__why,
  .soln__ind,
  .soln__approach { padding: 80px 0; }
  .soln__combo-grid { grid-template-columns: 1fr; }
  .soln__why-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .soln__why-item--wide,
  .soln__why-item--lg { grid-column: span 1; grid-row: auto; }
  .soln__list { grid-template-columns: 1fr; }
  .soln__showcase-content { padding: 30px 24px 34px; }
  .soln__showcase-content .soln__card-title { font-size: 24px; }
  .soln__showcase-tab-text em { display: none; }
  .soln__ind-nav { display: none; }
  .soln__timeline { margin-top: 50px; }
  .soln__spine { left: 21px; }
  .soln__step { gap: 18px; padding-bottom: 34px; }
  .soln__node { flex-basis: 44px; width: 44px; height: 44px; font-size: 13px; }
  .soln__step-card { padding: 20px 22px; }
}

/* ============================================================
   ARTIFICIAL INTELLIGENCE PAGE (ai__*)
   Scoped entirely to .ai__page (added on <main> of
   artificial-intelligence.html). Extends the brand language already
   set by .soln__page / .proc2__area / .final-cta: #005fcc primary,
   #8079f8 secondary, #07152F dark bands, #f6f7fc light bands, Kanit
   type. Every keyframe here is prefixed aiKf* so nothing collides
   with the theme. Nothing in this block leaks to other pages.
   ============================================================ */
.ai__page {
  --ac: #005fcc;
  --ac2: #8079f8;
  --ac3: #4da3ff;
  --ah: #1c1e2b;
  --at: #6b7089;
  --ab: #e9eaf5;
  --abg: #f6f7fc;
  --adark: #07152F;
  --amuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.ai__page .ai__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 18px;
}
.ai__page .ai__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--ah); margin: 0 0 20px; }
.ai__page .ai__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ah); margin: 0 0 18px; }
.ai__page .ai__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--at); margin: 0 0 16px; }
.ai__page .ai__text:last-child { margin-bottom: 0; }
.ai__page .ai__head { max-width: 840px; }
.ai__page .ai__head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.ai__page .ai__dark { position: relative; overflow: hidden; background: var(--adark); }
.ai__page .ai__dark > .container { position: relative; z-index: 1; }
.ai__page .ai__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(128, 121, 248, .26), transparent 64%);
}
.ai__page .ai__dark .ai__eyebrow { color: var(--ac3); }
.ai__page .ai__dark .ai__title { color: #fff; }
.ai__page .ai__dark .ai__lead { color: #dbe6f4; }
.ai__page .ai__dark .ai__text { color: var(--amuted); }

.ai__page .ai__btn,
.ai__page .ai__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.ai__page .ai__btn { color: #fff; background: var(--ac); border: 2px solid var(--ac); }
.ai__page .ai__btn:hover { background: var(--ac2); border-color: var(--ac2); color: #fff; }
.ai__page .ai__btn-outline { color: var(--ac); border: 2px solid var(--ac); background: transparent; }
.ai__page .ai__btn-outline:hover { background: var(--ac); color: #fff; }
.ai__page .ai__dark .ai__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.ai__page .ai__dark .ai__btn-outline:hover { background: #fff; border-color: #fff; color: var(--adark); }

/* Arrow link used at the foot of the solution / connected-solution cards. */
.ai__page .ai__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ac);
  transition: gap .3s ease, color .3s ease;
}
.ai__page .ai__link:hover { gap: 15px; color: var(--ac2); }
.ai__page .ai__dark .ai__link { color: var(--ac3); }
.ai__page .ai__dark .ai__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.ai__page .ai__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--ac);
  font-size: 20px;
  margin-bottom: 18px;
}
.ai__page .ai__dark .ai__ico { background: rgba(77, 163, 255, .14); color: var(--ac3); }

/* ---------- 01. Hero ---------- */
/* The page opens straight under the solid dark header, so the hero carries
   the dark band itself instead of the light opener used on solutions.html. */
.ai__hero {
  position: relative;
  overflow: hidden;
  background: var(--adark);
  padding: 200px 0 120px;
}
.ai__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
/* faint engineering grid, fading out towards the bottom of the band */
.ai__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.ai__hero > .container { position: relative; z-index: 2; }
.ai__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ai__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--ac3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.ai__hero-eyebrow i { font-size: 12px; }
.ai__hero-title { font-size: 56px; line-height: 1.1; font-weight: 600; color: #fff; margin: 0 0 24px; }
.ai__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--ac3), var(--ac2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ai__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.ai__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--amuted); margin: 0 0 16px; }
.ai__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.ai__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ai__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.ai__hero-figure { position: relative; }
/* slow-breathing conic ring behind the artwork */
.ai__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: aiKfSpin 26s linear infinite;
}
.ai__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.ai__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: aiKfFloat 6s ease-in-out infinite;
}
.ai__hero-chip i { color: var(--ac3); font-size: 18px; }
.ai__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.ai__hero-chip span { font-size: 13px; font-weight: 300; color: var(--amuted); }
.ai__hero-chip--1 { left: -34px; top: 16%; }
.ai__hero-chip--2 { right: -28px; bottom: 14%; animation-delay: 3s; }
@keyframes aiKfSpin { to { transform: rotate(360deg); } }
@keyframes aiKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 01b. Keyword marquee ---------- */
/* The band keeps the solid background; the mask lives on the inner wrapper so
   the edge fade dissolves the moving text into the band rather than punching a
   hole through to the white page behind it. */
.ai__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ai__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ai__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: aiKfMarquee 38s linear infinite; }
.ai__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.ai__marquee-track i { color: var(--ac3); font-size: 8px; }
@keyframes aiKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 02. Introduction ---------- */
.ai__intro { padding: 130px 0; background: #fff; }
/* figure sits on the left here so the page does not read as a copy of the
   solutions-page intro, which puts it on the right */
.ai__intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
/* Fixed ratio so the column stays balanced against the copy whatever the
   replacement artwork's own dimensions turn out to be. */
.ai__intro-figure {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(28, 30, 43, .13);
}
.ai__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the theme sets a global `img { position: relative; z-index: 1 }`, so any
   overlay sitting on an image needs its own z-index */
.ai__intro-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .16);
}
.ai__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--ah); line-height: 1.3; margin-bottom: 4px; }
.ai__intro-badge span { font-size: 14px; font-weight: 300; color: var(--at); }

/* ---------- 03. Where AI makes a difference ---------- */
/* Staggered stat-tile wall: a checkerboard offset plus an oversized ghost
   numeral behind each tile, instead of a flat, uniform card grid. */
.ai__value { padding: 130px 0; background: var(--abg); }
.ai__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.ai__value-item {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 16px;
  padding: 36px 30px 32px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ai__value-item:hover { transform: translateY(-10px); border-color: rgba(0, 95, 204, .35); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.ai__value-item .ai__ico { position: relative; z-index: 1; }
.ai__value-item h3 { position: relative; z-index: 1; font-size: 20px; font-weight: 600; color: var(--ah); margin: 0 0 10px; }
.ai__value-item p { position: relative; z-index: 1; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--at); margin: 0; }
.ai__value-num {
  position: absolute;
  top: -18px;
  right: -6px;
  z-index: 0;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 95, 204, .14);
  transition: -webkit-text-stroke-color .35s ease;
  pointer-events: none;
}
.ai__value-item:hover .ai__value-num { -webkit-text-stroke-color: rgba(0, 95, 204, .3); }
@media only screen and (min-width: 1200px) {
  .ai__value-grid { row-gap: 66px; }
  .ai__value-item:nth-child(3n+2) { transform: translateY(38px); }
  .ai__value-item:nth-child(3n+2):hover { transform: translateY(28px); }
}

/* ---------- 04. AI solutions (bento grid) ---------- */
/* A 3x3 bento grid: the AI Consulting write-up anchors a 2x2 block on the
   left, a slim pair of tiles stacks on the top-right, and the remaining
   three tiles run in a full-width row underneath - asymmetric, magazine-like,
   instead of a uniform card wall. Grid auto-placement (row-major, sparse)
   fills the five tiles into the cells left open by the spanning feature card
   in DOM order, so no manual grid-column/row is needed on the tiles. */
.ai__sol { padding: 130px 0; background: #fff; }
.ai__sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); gap: 24px; margin-top: 60px; }

.ai__sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 18px;
  padding: 40px 36px 42px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ai__sol-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ac2), var(--ac));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.ai__sol-card:hover { transform: translateY(-6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 26px 56px rgba(28, 30, 43, .1); }
.ai__sol-card:hover::before { transform: scaleX(1); }
.ai__sol-num {
  position: absolute;
  top: 24px;
  right: 30px;
  font-size: 58px;
  font-weight: 600;
  line-height: 1;
  color: rgba(0, 95, 204, .07);
  pointer-events: none;
}
.ai__sol-card h3 { font-size: 25px; font-weight: 600; color: var(--ah); margin: 0 0 12px; }
.ai__sol-tag { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ac); margin: 0 0 16px; }
.ai__sol-card p:not(.ai__sol-tag) { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--at); margin: 0 0 14px; }
.ai__sol-card .ai__link { margin-top: auto; padding-top: 10px; }

/* Feature card: spans a 2x2 block of the bento grid, with a tinted
   background so it reads as the "lead" item. */
.ai__sol-feature {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: linear-gradient(165deg, var(--abg), #fff 60%);
  border-color: rgba(0, 95, 204, .18);
}
.ai__sol-feature::before { transform: scaleX(1); }
.ai__sol-feature .ai__ico { width: 58px; height: 58px; font-size: 24px; border-radius: 14px; }
.ai__sol-feature h3 { font-size: 28px; }
.ai__sol-feature .ai__sol-num { font-size: 76px; }
.ai__sol-feature-list { list-style: none; margin: 4px 0 24px; padding: 20px 0 0; border-top: 1px solid var(--ab); display: grid; gap: 12px; }
.ai__sol-feature-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ah); }
.ai__sol-feature-list i { color: var(--ac); font-size: 12px; }

/* The five remaining solutions as compact bento tiles - a soft glow blob and
   a two-tone icon accent (alternating blue/violet) keep the grid from
   feeling like a flat repeat of the same card. */
.ai__sol-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  padding: 28px 26px 26px;
  background: var(--abg);
  border: 1px solid var(--ab);
  border-radius: 16px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.ai__sol-tile::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -25%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(0, 95, 204, .1), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ai__sol-tile--alt::before { background: radial-gradient(circle, rgba(128, 121, 248, .12), transparent 70%); }
.ai__sol-tile:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .28); box-shadow: 0 20px 40px rgba(28, 30, 43, .1); }
.ai__sol-tile .ai__ico { position: relative; z-index: 1; width: 44px; height: 44px; font-size: 17px; border-radius: 12px; margin-bottom: 8px; }
.ai__sol-tile--alt .ai__ico { background: rgba(128, 121, 248, .14); color: var(--ac2); }
.ai__sol-tile h3 { position: relative; z-index: 1; font-size: 18px; font-weight: 600; color: var(--ah); margin: 0; }
.ai__sol-tile .ai__sol-tag { position: relative; z-index: 1; font-size: 14px; margin: 0; }
.ai__sol-tile p:not(.ai__sol-tag) { display: none; }
.ai__sol-tile .ai__link { position: relative; z-index: 1; font-size: 14px; margin-top: 10px; }

/* ---------- 05. Additional AI capabilities (dark) ---------- */
.ai__cap { padding: 130px 0; }
.ai__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.ai__cap-item {
  padding: 32px 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  transition: all .35s ease;
}
.ai__cap-item:hover { background: rgba(0, 95, 204, .16); border-color: rgba(77, 163, 255, .5); transform: translateY(-6px); }
.ai__cap-item h3 { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.ai__cap-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--amuted); margin: 0; }

/* ---------- 06. Enterprise AI + RAG ---------- */
.ai__ent { padding: 130px 0; background: var(--abg); }
.ai__ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
/* four-step retrieval flow; the connector is drawn on the step itself so the
   last one can simply switch it off */
.ai__flow { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 16px; }
.ai__flow li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--ab);
  border-radius: 14px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ai__flow li:hover { border-color: var(--ac); box-shadow: 0 14px 32px rgba(0, 95, 204, .09); }
.ai__flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 44px;
  bottom: -16px;
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, var(--ac), rgba(0, 95, 204, .15));
}
.ai__flow-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--ac);
  font-size: 15px;
}
.ai__flow h4 { font-size: 17px; font-weight: 600; color: var(--ah); margin: 0 0 5px; }
.ai__flow p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--at); margin: 0; }
.ai__chips { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai__chips li {
  position: relative;
  padding: 14px 18px 14px 46px;
  border: 1px solid var(--ab);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ah);
  transition: all .3s ease;
}
.ai__chips li:hover { border-color: var(--ac); box-shadow: 0 14px 30px rgba(0, 95, 204, .08); }
.ai__chips li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  left: 18px;
  top: 16px;
  color: var(--ac);
}
.ai__note {
  margin-top: 30px;
  padding: 20px 24px;
  border-left: 3px solid var(--ac);
  border-radius: 0 12px 12px 0;
  background: #fff;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--at);
}
.ai__dark .ai__note { background: rgba(255, 255, 255, .05); border-left-color: var(--ac3); color: var(--amuted); }

/* ---------- 07. AI agents (dark) ---------- */
.ai__agents { padding: 130px 0; }
.ai__agents-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: start; }
.ai__task-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai__task-list li {
  position: relative;
  padding: 18px 20px 18px 52px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: #dbe6f4;
  transition: all .3s ease;
}
.ai__task-list li:hover { background: rgba(0, 95, 204, .16); border-color: rgba(77, 163, 255, .5); }
.ai__task-list li::before {
  content: "\f0da";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  position: absolute;
  left: 22px;
  top: 19px;
  color: var(--ac3);
}

/* ---------- 08. Intelligent automation ---------- */
.ai__auto { padding: 130px 0; background: #fff; }
.ai__auto-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; }
.ai__compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
.ai__compare-col { border: 1px solid var(--ab); border-radius: 16px; padding: 28px 26px; background: var(--abg); }
.ai__compare-col--new { background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 20px 46px rgba(0, 95, 204, .1); }
.ai__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--at);
  margin-bottom: 16px;
}
.ai__compare-col--new .ai__compare-tag { color: var(--ac); }
.ai__compare-col ul { list-style: none; margin: 0; padding: 0; }
.ai__compare-col li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--at);
}
.ai__compare-col li:last-child { margin-bottom: 0; }
.ai__compare-col li::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 4px;
  color: #b6bccd;
}
.ai__compare-col--new li { color: var(--ah); }
.ai__compare-col--new li::before { content: "\f00c"; color: var(--ac); }
.ai__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  font-size: 16px;
}
.ai__tags { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ai__tags li {
  padding: 10px 18px;
  border-radius: 50px;
  border: 1px solid var(--ab);
  background: var(--abg);
  font-size: 14px;
  font-weight: 300;
  color: var(--ah);
  transition: all .3s ease;
}
.ai__tags li:hover { border-color: var(--ac); color: var(--ac); background: #fff; }
.ai__dark .ai__tags li { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #cfe0f3; }
.ai__dark .ai__tags li:hover { border-color: var(--ac3); color: #fff; background: rgba(0, 95, 204, .2); }

/* ---------- 09. Approach ---------- */
/* A serpentine roadmap: steps run left-to-right across a row, then the path
   turns and the next row continues right-to-left (boustrophedon), joined by
   an inline connector line within each row and an elbow "turn" between rows
   - a game-map reading path rather than a centre-spine alternating timeline. */
.ai__approach { padding: 130px 0; background: var(--abg); }
.ai__path { position: relative; margin-top: 60px; display: flex; flex-direction: column; gap: 6px; }
.ai__path-row { display: flex; align-items: stretch; }
.ai__path-row--rev { flex-direction: row-reverse; }
.ai__path-step {
  position: relative;
  flex: 1 1 0;
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 16px;
  padding: 30px 26px 28px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ai__path-step:hover { transform: translateY(-6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 20px 42px rgba(28, 30, 43, .09); }
.ai__path-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ac2), var(--ac));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ai__path-step h3 { font-size: 18px; font-weight: 600; color: var(--ah); margin: 0 0 10px; }
.ai__path-step p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--at); margin: 0; }
.ai__path-line { flex: 0 0 30px; align-self: center; height: 2px; background: linear-gradient(90deg, var(--ac2), var(--ac)); opacity: .3; }
.ai__path-turn { display: flex; justify-content: flex-end; padding-right: 26px; }
.ai__path-turn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ab);
  color: var(--ac);
  font-size: 13px;
  box-shadow: 0 10px 20px rgba(0, 95, 204, .12);
}

/* ---------- 10. Technology ecosystem (dark) ---------- */
/* Stacked architecture bands (Models -> Engineering -> Enterprise
   Architecture -> Data layer) rather than four equal-width cards, echoing
   the "stack" the section is actually describing. */
.ai__tech { padding: 130px 0; }
.ai__tech-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 56px; }
.ai__tech-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 26px 34px 26px 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 3px solid var(--ac3);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  transition: all .35s ease;
}
.ai__tech-card:nth-child(2) { border-left-color: var(--ac); }
.ai__tech-card:nth-child(3) { border-left-color: var(--ac2); }
.ai__tech-card:nth-child(4) { border-left-color: #b7a9ff; }
.ai__tech-card:hover { border-color: rgba(77, 163, 255, .5); background: rgba(0, 95, 204, .14); transform: translateX(6px); }
.ai__tech-layer {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .28);
}
.ai__tech-head { display: flex; align-items: center; gap: 16px; flex: 0 0 260px; }
.ai__tech-head .ai__ico { margin-bottom: 0; flex-shrink: 0; }
.ai__tech-card h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 0; }
.ai__tech-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.ai__tech-card li {
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
  font-weight: 300;
  color: #cfe0f3;
}
.ai__tech-foot { margin-top: 44px; text-align: center; }

/* ---------- 11. Integration ---------- */
.ai__integrate { padding: 130px 0; background: #fff; }
.ai__integrate-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.ai__hub-core {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 18px 40px rgba(0, 95, 204, .28);
}
.ai__hub-core i { font-size: 18px; }
.ai__hub-core strong { font-size: 16px; font-weight: 600; }
.ai__hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ai__hub-grid div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--ab);
  border-radius: 12px;
  background: var(--abg);
  font-size: 14px;
  font-weight: 300;
  color: var(--ah);
  transition: all .3s ease;
}
.ai__hub-grid div:hover { border-color: var(--ac); background: #fff; box-shadow: 0 14px 30px rgba(0, 95, 204, .08); transform: translateY(-3px); }
.ai__hub-grid i { color: var(--ac); font-size: 15px; width: 18px; text-align: center; }

/* ---------- 12. Security & responsible AI ---------- */
/* A governance "wheel": a central shield hub with the six controls orbiting
   it, built with the rotate/translate/counter-rotate trick so each tile
   stays upright. Collapses to a plain vertical list below 992px, where the
   orbit maths would no longer have room to work. */
.ai__sec { padding: 130px 0; background: var(--abg); overflow: hidden; }
.ai__sec-radial { position: relative; margin-top: 56px; }
.ai__sec-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 136px;
  height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  font-size: 32px;
  box-shadow: 0 22px 50px rgba(0, 95, 204, .32);
}
.ai__sec-core strong { font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.ai__sec-grid { position: relative; }
.ai__sec-item {
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ai__sec-item:hover { border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); z-index: 3; }
.ai__sec-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 95, 204, .25);
  background: rgba(0, 95, 204, .08);
  color: var(--ac);
  font-size: 20px;
  margin-bottom: 18px;
}
.ai__sec-item h3 { font-size: 18px; font-weight: 600; color: var(--ah); margin: 0 0 8px; }
.ai__sec-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--at); margin: 0; }

@media only screen and (min-width: 992px) {
  .ai__sec-radial { height: 860px; max-width: 940px; margin-left: auto; margin-right: auto; }
  .ai__sec-grid { position: absolute; inset: 0; }
  .ai__sec-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    transform: translate(-50%, -50%) rotate(var(--ang)) translate(320px) rotate(calc(-1 * var(--ang)));
  }
  .ai__sec-item:hover { transform: translate(-50%, -50%) rotate(var(--ang)) translate(320px) rotate(calc(-1 * var(--ang))) translateY(-6px); }
  .ai__sec-item:nth-child(1) { --ang: -60deg; }
  .ai__sec-item:nth-child(2) { --ang: 0deg; }
  .ai__sec-item:nth-child(3) { --ang: 60deg; }
  .ai__sec-item:nth-child(4) { --ang: 120deg; }
  .ai__sec-item:nth-child(5) { --ang: 180deg; }
  .ai__sec-item:nth-child(6) { --ang: 240deg; }
}
@media only screen and (max-width: 991px) {
  .ai__sec-core { position: static; transform: none; margin: 0 auto 40px; }
  .ai__sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media only screen and (max-width: 575px) {
  .ai__sec-grid { grid-template-columns: 1fr; }
}

/* ---------- 13. Industries ---------- */
/* A continuously scrolling marquee rather than a static 4x2 grid. The card
   set is duplicated once in the markup (duplicate marked aria-hidden /
   tabindex="-1") so a 50% translateX loops seamlessly. */
.ai__ind { padding: 130px 0; background: #fff; overflow: hidden; }
.ai__ind-marquee {
  margin-top: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ai__ind-track {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: aiIndScroll 42s linear infinite;
}
.ai__ind-marquee:hover .ai__ind-track { animation-play-state: paused; }
@keyframes aiIndScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ai__ind-card {
  display: block;
  flex: 0 0 280px;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 16px;
  transition: all .35s ease;
}
.ai__ind-card:hover { transform: translateY(-6px); border-color: var(--ac); box-shadow: 0 20px 44px rgba(0, 95, 204, .12); }
.ai__ind-card h3 { font-size: 18px; font-weight: 600; color: var(--ah); margin: 0 0 8px; }
.ai__ind-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--at); margin: 0; }
.ai__ind-card .ai__ico { width: 46px; height: 46px; font-size: 18px; }
.ai__ind-cta { text-align: center; margin-top: 56px; }
@media (prefers-reduced-motion: reduce) {
  .ai__ind-track { animation: none; }
}
@media only screen and (max-width: 767px) {
  .ai__ind-card { flex-basis: 240px; }
}

/* ---------- 14. Use cases (dark, magazine index list) ---------- */
/* An indexed list - big outlined numerals, one row per use case - instead of
   a 4x2 tile grid. */
.ai__use { padding: 130px 0; }
.ai__use-grid { margin-top: 40px; display: flex; flex-direction: column; }
.ai__use-item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  column-gap: 30px;
  padding: 26px 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  transition: padding-left .35s ease, background .35s ease;
}
.ai__use-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ai__use-item:hover { padding-left: 26px; background: rgba(255, 255, 255, .04); }
.ai__use-num {
  grid-column: 1;
  grid-row: 1 / -1;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .32);
  transition: color .35s ease, -webkit-text-stroke-color .35s ease;
}
.ai__use-item:hover .ai__use-num { color: var(--ac3); -webkit-text-stroke-color: var(--ac3); }
.ai__use-item h3 { grid-column: 2; font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.ai__use-item p { grid-column: 2; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--amuted); margin: 0; }

/* ---------- 15. Why 3Shadz ---------- */
/* An editorial spec-sheet grid: hairline rules forming a table of cells,
   each with a large outlined numeral instead of an icon, left-aligned copy.
   Deliberately named .ai__why-list/-cell (not -grid/-item/-row) so this
   section falls outside the shared "big background icon" archetype used by
   .ai__page .ai__why-item elsewhere in this stylesheet, and reads as a
   distinct pattern from the staggered ghost-numeral tiles in section 03,
   the bento grid in section 04, and the radial hub in section 12. */
.ai__why { padding: 130px 0; background: var(--abg); }
.ai__why-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
  border-top: 1px solid var(--ab);
  border-left: 1px solid var(--ab);
}
.ai__why-cell {
  position: relative;
  padding: 42px 38px 38px;
  border-right: 1px solid var(--ab);
  border-bottom: 1px solid var(--ab);
  transition: background .3s ease;
}
.ai__why-cell:hover { background: #fff; }
.ai__why-num {
  display: block;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 95, 204, .28);
  margin: 0 0 20px;
  transition: -webkit-text-stroke-color .3s ease;
}
.ai__why-cell:hover .ai__why-num { -webkit-text-stroke-color: var(--ac); }
.ai__why-cell h3 { font-size: 18px; font-weight: 600; color: var(--ah); margin: 0 0 10px; }
.ai__why-cell p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--at); margin: 0; }

/* ---------- 16. Connected solutions ---------- */
/* A boxless index list - plain rows separated by hairlines, ghost numerals,
   and un-badged icons, no card/tile boundary anywhere. Deliberately named
   .ai__connect-list/-row (not -grid/-card) so it falls outside the shared
   "numbered tab + horizontal scroll strip" archetype used by
   .ai__page .ai__connect-grid elsewhere in this stylesheet, and reads as a
   distinct pattern from every card/tile section already on this page. */
.ai__connect { padding: 130px 0; background: #fff; }
.ai__connect-list { display: flex; flex-direction: column; margin-top: 50px; border-top: 1px solid var(--ab); }
.ai__connect-row {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px 6px;
  border-bottom: 1px solid var(--ab);
  transition: padding-left .4s cubic-bezier(.22, .61, .36, 1), background .4s ease;
}
.ai__connect-row:hover { padding-left: 18px; background: linear-gradient(90deg, var(--abg), transparent 85%); }
.ai__connect-num { flex: 0 0 auto; width: 30px; font-size: 14px; font-weight: 700; letter-spacing: .5px; color: var(--ac); opacity: .45; }
.ai__connect-row .ai__ico { flex: 0 0 auto; width: 26px; margin: 0; background: none; border-radius: 0; font-size: 21px; color: var(--ac); }
.ai__connect-body { flex: 1 1 auto; min-width: 0; }
.ai__connect-body h3 { font-size: 19px; font-weight: 600; color: var(--ah); margin: 0 0 6px; }
.ai__connect-body p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--at); margin: 0; max-width: 580px; }
.ai__connect-row .ai__link { flex: 0 0 auto; }
.ai__connect-row--cta {
  margin-top: 4px;
  padding: 26px 26px;
  background: linear-gradient(120deg, var(--ac), var(--ac2));
  border-bottom-color: transparent;
}
.ai__connect-row--cta:hover { padding-left: 26px; background: linear-gradient(120deg, var(--ac), var(--ac2)); }
.ai__connect-row--cta .ai__connect-num { color: #fff; opacity: .6; }
.ai__connect-row--cta .ai__ico { color: #fff; }
.ai__connect-row--cta .ai__connect-body h3,
.ai__connect-row--cta .ai__connect-body p { color: #fff; }
.ai__connect-row--cta .ai__link { color: #fff; }
.ai__connect-row--cta .ai__link:hover { color: rgba(255, 255, 255, .8); }
@media only screen and (max-width: 767px) {
  .ai__connect-row { flex-wrap: wrap; padding: 24px 4px; }
  .ai__connect-row .ai__link { margin-left: 56px; }
}

/* ---------- 17. FAQ accordion ---------- */
.ai__faq { padding: 130px 0; background: var(--abg); }
.ai__faq-list { max-width: 980px; margin: 56px auto 0; display: grid; gap: 14px; }
.ai__faq-item { border: 1px solid var(--ab); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.ai__faq-item.is-open { border-color: var(--ac); box-shadow: 0 18px 40px rgba(0, 95, 204, .09); }
.ai__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ah);
  cursor: pointer;
  transition: color .3s ease;
}
.ai__faq-q:hover { color: var(--ac); }
.ai__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--ac);
  font-size: 13px;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.ai__faq-item.is-open .ai__faq-icon { transform: rotate(45deg); background: var(--ac); color: #fff; }
/* grid-template-rows animates cleanly without hard-coding a max-height */
.ai__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.ai__faq-item.is-open .ai__faq-a { grid-template-rows: 1fr; }
.ai__faq-a > div { overflow: hidden; }
.ai__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--at); margin: 0; padding: 0 28px 26px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ai__hero-glow,
  .ai__hero-chip,
  .ai__marquee-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai__hero-title { font-size: 48px; }
}
@media only screen and (max-width: 1199px) {
  .ai__page .ai__title { font-size: 38px; }
  .ai__hero { padding: 170px 0 100px; }
  .ai__hero-title { font-size: 40px; }
  .ai__intro,
  .ai__value,
  .ai__sol,
  .ai__cap,
  .ai__ent,
  .ai__agents,
  .ai__auto,
  .ai__approach,
  .ai__tech,
  .ai__integrate,
  .ai__sec,
  .ai__ind,
  .ai__use,
  .ai__why,
  .ai__connect,
  .ai__faq { padding: 100px 0; }
  .ai__hero-grid,
  .ai__intro-grid { gap: 46px; }
  .ai__value-grid,
  .ai__cap-grid,
  .ai__why-list { grid-template-columns: repeat(2, 1fr); }
  .ai__hero-chip--1 { left: -14px; }
  .ai__hero-chip--2 { right: -10px; }
}
@media only screen and (max-width: 991px) {
  .ai__hero-grid,
  .ai__intro-grid,
  .ai__ent-grid,
  .ai__agents-grid,
  .ai__auto-grid,
  .ai__integrate-grid { grid-template-columns: 1fr; gap: 44px; }
  .ai__intro-figure { max-width: 560px; }
  .ai__sol-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ai__sol-feature { grid-column: auto; grid-row: auto; height: auto; }
  .ai__tech-card { flex-wrap: wrap; }
  .ai__tech-head { flex: 0 0 auto; }
  .ai__compare { grid-template-columns: 1fr; }
  .ai__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
}
@media only screen and (max-width: 767px) {
  .ai__page .ai__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .ai__page .ai__title { font-size: 28px; }
  .ai__page .ai__lead { font-size: 17px; }
  .ai__page .ai__btn,
  .ai__page .ai__btn-outline { padding: 15px 26px; font-size: 15px; }
  .ai__hero { padding: 140px 0 80px; }
  .ai__hero-title { font-size: 30px; }
  .ai__hero-lead { font-size: 17px; }
  .ai__hero-chip { display: none; }
  .ai__intro,
  .ai__value,
  .ai__sol,
  .ai__cap,
  .ai__ent,
  .ai__agents,
  .ai__auto,
  .ai__approach,
  .ai__tech,
  .ai__integrate,
  .ai__sec,
  .ai__ind,
  .ai__use,
  .ai__why,
  .ai__connect,
  .ai__faq { padding: 80px 0; }
  .ai__value-grid,
  .ai__cap-grid { grid-template-columns: 1fr; }
  .ai__why-list { grid-template-columns: 1fr; }
  .ai__chips,
  .ai__task-list,
  .ai__hub-grid { grid-template-columns: 1fr; }
  .ai__sol-card { padding: 32px 24px 34px; }
  .ai__sol-num { font-size: 44px; }
  .ai__sol-tile { padding: 24px 22px 22px; }
  .ai__path-row,
  .ai__path-row--rev { flex-direction: column; gap: 16px; }
  .ai__path-line { display: none; }
  .ai__path-turn { display: none; }
  .ai__use-item { grid-template-columns: 66px 1fr; column-gap: 20px; }
  .ai__use-num { font-size: 38px; }
  .ai__faq-q { font-size: 16px; padding: 20px 22px; }
  .ai__faq-a p { padding: 0 22px 22px; }
}



/* ============================================================
   CUSTOM SOFTWARE SOLUTIONS PAGE (csw__*)
   Scoped entirely to .csw__page (added on <main> of
   custom-software-solutions.html). Uses the same brand language as
   .soln__page / .ai__page / .final-cta: #005fcc primary, #8079f8
   secondary, #07152F dark bands, #f6f7fc light bands, Kanit type -
   but the layout components (hero layer-stack, comparison table,
   split solution rows, tabbed tech stack, connected process track,
   engagement cards) are unique to this page. Every keyframe here is
   prefixed cswKf* so nothing collides with the theme. Nothing in
   this block leaks to other pages.
   ============================================================ */
.csw__page {
  --cc: #005fcc;
  --cc2: #8079f8;
  --cc3: #4da3ff;
  --ch: #1c1e2b;
  --ct: #6b7089;
  --cb: #e9eaf5;
  --cbg: #f6f7fc;
  --cdark: #07152F;
  --cmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.csw__page .csw__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cc);
  margin-bottom: 18px;
}
.csw__page .csw__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--ch); margin: 0 0 20px; }
.csw__page .csw__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ch); margin: 0 0 18px; }
.csw__page .csw__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ct); margin: 0 0 16px; }
.csw__page .csw__text:last-child { margin-bottom: 0; }
.csw__page .csw__head { max-width: 860px; }
.csw__page .csw__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.csw__page .csw__dark { position: relative; overflow: hidden; background: var(--cdark); }
.csw__page .csw__dark > .container { position: relative; z-index: 1; }
.csw__page .csw__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(128, 121, 248, .26), transparent 64%);
}
.csw__page .csw__dark .csw__eyebrow { color: var(--cc3); }
.csw__page .csw__dark .csw__title { color: #fff; }
.csw__page .csw__dark .csw__lead { color: #dbe6f4; }
.csw__page .csw__dark .csw__text { color: var(--cmuted); }

.csw__page .csw__btn,
.csw__page .csw__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.csw__page .csw__btn { color: #fff; background: var(--cc); border: 2px solid var(--cc); }
.csw__page .csw__btn:hover { background: var(--cc2); border-color: var(--cc2); color: #fff; }
.csw__page .csw__btn-outline { color: var(--cc); border: 2px solid var(--cc); background: transparent; }
.csw__page .csw__btn-outline:hover { background: var(--cc); color: #fff; }
.csw__page .csw__dark .csw__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.csw__page .csw__dark .csw__btn-outline:hover { background: #fff; border-color: #fff; color: var(--cdark); }

/* Arrow link used at the foot of most cards and sections. */
.csw__page .csw__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cc);
  transition: gap .3s ease, color .3s ease;
}
.csw__page .csw__link:hover { gap: 15px; color: var(--cc2); }
.csw__page .csw__dark .csw__link { color: var(--cc3); }
.csw__page .csw__dark .csw__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.csw__page .csw__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--cc);
  font-size: 20px;
  margin-bottom: 18px;
}
.csw__page .csw__dark .csw__ico { background: rgba(77, 163, 255, .14); color: var(--cc3); }


/* ---------- 01. Hero ---------- */
/* Opens straight under the solid dark header, so the hero carries the
   dark band itself. The blueprint grid overlay is the visual cue that
   separates this page from the AI hero. */
.csw__hero {
  position: relative;
  overflow: hidden;
  background: var(--cdark);
  padding: 200px 0 120px;
}
.csw__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 82% -8%, rgba(0, 95, 204, .38), transparent 60%),
              radial-gradient(720px 420px at 4% 104%, rgba(128, 121, 248, .28), transparent 62%);
}
/* Faint engineering-blueprint grid. */
.csw__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 25%, transparent 100%);
}
.csw__hero > .container { position: relative; z-index: 2; }
.csw__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.csw__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 26px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #dbe6f4;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.csw__hero-eyebrow i { font-size: 12px; color: var(--cc3); }
.csw__hero-title { font-size: 56px; line-height: 1.1; font-weight: 600; color: #fff; margin: 0 0 24px; }
.csw__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--cc3), var(--cc2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.csw__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.csw__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--cmuted); margin: 0 0 16px; }
.csw__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

/* Three proof points under the CTAs, divided by hairlines. */
.csw__hero-stats {
  list-style: none;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.csw__hero-stats li { position: relative; padding-left: 20px; }
.csw__hero-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cc3), var(--cc2));
}
.csw__hero-stats strong { display: block; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.2; }
.csw__hero-stats span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--cmuted); line-height: 1.5; }

.csw__hero-figure { position: relative; }
.csw__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.csw__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.csw__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Layer stack: reads top-down as the anatomy of a delivered solution. */
.csw__hero-stack {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.csw__hero-stack li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.csw__hero-stack li:hover {
  border-color: rgba(77, 163, 255, .5);
  background: rgba(0, 95, 204, .16);
  transform: translateX(6px);
}
.csw__hero-stack-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(77, 163, 255, .16);
  color: var(--cc3);
  font-size: 15px;
}
.csw__hero-stack strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.csw__hero-stack span { display: block; font-size: 13px; font-weight: 300; color: var(--cmuted); line-height: 1.5; }


/* ---------- Keyword marquee ---------- */
.csw__marquee {
  background: linear-gradient(90deg, var(--cc), var(--cc2));
  padding: 20px 0;
  overflow: hidden;
}
.csw__marquee-mask { overflow: hidden; }
.csw__marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: cswKfMarquee 34s linear infinite;
}
.csw__marquee-track span {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .5px;
}
.csw__marquee-track i { font-size: 6px; color: rgba(255, 255, 255, .6); }
@keyframes cswKfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ---------- 02. Introduction ---------- */
.csw__intro { padding: 120px 0; background: #fff; }
.csw__intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.csw__intro-figure { position: relative; }
.csw__intro-figure img {
  width: 100%;
  border-radius: 22px;
  display: block;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.csw__intro-badge {
  position: absolute;
  z-index: 2;
  right: -22px;
  bottom: -26px;
  max-width: 270px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--cdark);
  box-shadow: 0 24px 50px rgba(7, 21, 47, .28);
}
.csw__intro-badge strong { display: block; font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.csw__intro-badge span { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--cmuted); }


/* ---------- 03. Signals ---------- */
/* A staggered note wall (native CSS multi-column masonry) instead of a uniform grid or ruled list. */
.csw__signal { padding: 120px 0; background: var(--cbg); }
.csw__signal-wall { column-count: 2; column-gap: 26px; max-width: 980px; margin: 0 auto; }
.csw__signal-note {
  position: relative;
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 28px 26px 30px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--cb);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.csw__signal-note:nth-child(odd) { transform: rotate(-.6deg); }
.csw__signal-note:nth-child(even) { transform: rotate(.6deg); }
.csw__signal-note:hover { transform: rotate(0deg) translateY(-5px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 44px rgba(28, 30, 43, .1); z-index: 1; }
.csw__signal-note-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(0, 95, 204, .08);
  color: var(--cc);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.csw__signal-note h3 { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ch); margin: 0 0 10px; }
.csw__signal-note p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--ct); margin: 0; }
.csw__signal-check {
  position: absolute;
  top: 24px;
  right: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--cb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  transition: all .3s ease;
}
.csw__signal-note:hover .csw__signal-check { border-color: var(--cc); background: var(--cc); color: #fff; }


/* ---------- 04. Custom vs off-the-shelf comparison ---------- */
/* A stacked matchup deck rather than a literal data table: one card per factor, each split into an "off-the-shelf" side and a "custom" side around a VS chip. */
.csw__compare { padding: 120px 0; }
.csw__compare-caption {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--cmuted);
}
.csw__compare-legend { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 28px; }
.csw__compare-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--cmuted);
}
.csw__compare-legend-item i { color: var(--cc3); font-size: 13px; }
.csw__compare-legend-item--hl { color: #fff; }
.csw__compare-legend-div { width: 1px; height: 16px; background: rgba(255, 255, 255, .18); }

.csw__compare-board { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.csw__compare-row {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035);
  padding: 24px 30px;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.csw__compare-row:hover { background: rgba(255, 255, 255, .065); border-color: rgba(77, 163, 255, .4); transform: translateY(-3px); }
.csw__compare-factor {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc3);
  margin: 0 0 16px;
}
.csw__compare-vals { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.csw__compare-off,
.csw__compare-custom { margin: 0; font-size: 15px; line-height: 1.7; }
.csw__compare-off { font-weight: 300; color: var(--cmuted); opacity: .8; }
.csw__compare-custom { font-weight: 400; color: #fff; padding-left: 24px; border-left: 2px solid var(--cc3); }
.csw__compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(77, 163, 255, .12);
  border: 1px solid rgba(77, 163, 255, .35);
  color: var(--cc3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}
.csw__compare-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 860px;
  margin: 34px auto 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--cmuted);
  text-align: left;
}
.csw__compare-note i { color: var(--cc3); margin-top: 5px; }


/* ---------- 05. What we build ---------- */
.csw__sol { padding: 120px 0; background: #fff; }
.csw__sol-list { display: grid; gap: 22px; }
/* Split row: number + icon rail on the left, copy on the right. */
.csw__sol-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 34px;
  padding: 38px 40px;
  border-radius: 20px;
  border: 1px solid var(--cb);
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.csw__sol-row:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 95, 204, .32);
  box-shadow: 0 26px 52px rgba(28, 30, 43, .1);
}
.csw__sol-side { position: relative; }
.csw__sol-side::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--cb);
}
.csw__sol-num {
  display: block;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 95, 204, .35);
  margin-bottom: 18px;
}
.csw__sol-row:hover .csw__sol-num { -webkit-text-stroke-color: rgba(128, 121, 248, .6); }
.csw__sol-body h3 { font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--ch); margin: 0 0 12px; }
.csw__sol-tag { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--cc); margin: 0 0 16px; }
.csw__sol-body p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--ct); margin: 0 0 14px; }
.csw__sol-body .csw__link { margin-top: 6px; }


/* ---------- 06. Capabilities ---------- */
/* Woven staggered grid: columns alternate a vertical offset instead of a connecting spine, cycling three accent colours per card for rhythm. */
.csw__cap { padding: 120px 0; background: var(--cbg); overflow: hidden; }
.csw__cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 26px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.csw__cap-card {
  position: relative;
  padding: 34px 26px 28px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--cb);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.csw__cap-grid .csw__cap-card:nth-child(4n+2),
.csw__cap-grid .csw__cap-card:nth-child(4n) { margin-top: 46px; }
.csw__cap-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.csw__cap-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(28, 30, 43, .12); border-color: transparent; }
.csw__cap-card:hover::before { transform: scaleX(1); }
.csw__cap-num {
  position: absolute;
  top: 6px;
  right: 16px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--cb);
  z-index: 0;
}
.csw__cap-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 20px;
  margin-bottom: 20px;
  background: rgba(0, 95, 204, .1);
  color: var(--cc);
  transition: transform .3s ease;
}
.csw__cap-card:hover .csw__cap-ico { transform: scale(1.08) rotate(-4deg); }
.csw__cap-card h3 { position: relative; z-index: 1; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ch); margin: 0 0 10px; }
.csw__cap-card p { position: relative; z-index: 1; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ct); margin: 0; }
/* Cycle the three brand accents across cards instead of repeating one colour. */
.csw__cap-grid .csw__cap-card:nth-child(3n+2) .csw__cap-ico { background: rgba(128, 121, 248, .12); color: var(--cc2); }
.csw__cap-grid .csw__cap-card:nth-child(3n+2)::before { background: var(--cc2); }
.csw__cap-grid .csw__cap-card:nth-child(3n) .csw__cap-ico { background: rgba(77, 163, 255, .12); color: var(--cc3); }
.csw__cap-grid .csw__cap-card:nth-child(3n)::before { background: var(--cc3); }


/* ---------- 07. Technology stack tabs ---------- */
.csw__tech { padding: 120px 0; }
.csw__tech-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}
.csw__tech-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #dbe6f4;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all .3s ease;
}
.csw__tech-tab i { font-size: 14px; color: var(--cc3); transition: color .3s ease; }
.csw__tech-tab:hover { border-color: rgba(77, 163, 255, .55); color: #fff; }
.csw__tech-tab.is-active { background: var(--cc); border-color: var(--cc); color: #fff; }
.csw__tech-tab.is-active i { color: #fff; }
.csw__tech-panels {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  padding: 40px;
}
.csw__tech-panel[hidden] { display: none; }
.csw__tech-panel.is-active { animation: cswKfFade .45s ease both; }
.csw__tech-note { font-size: 16px; font-weight: 300; line-height: 1.7; color: #dbe6f4; margin: 0 0 26px; }
.csw__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.csw__chips li {
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #dbe6f4;
  font-size: 15px;
  font-weight: 300;
  transition: all .3s ease;
}
.csw__chips li:hover { border-color: rgba(77, 163, 255, .6); background: rgba(0, 95, 204, .2); color: #fff; }
.csw__tech-foot { text-align: center; margin-top: 44px; }
@keyframes cswKfFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ---------- 08. Process ---------- */
.csw__proc { padding: 120px 0; background: #fff; }
/* 12-column track so 4 wide steps sit above 3 wider ones, connected by a rail. */
.csw__proc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 34px 24px;
}
.csw__proc-step { position: relative; grid-column: span 3; padding-top: 30px; }
.csw__proc-step:nth-child(n+5) { grid-column: span 4; }
.csw__proc-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: -24px;
  top: 5px;
  height: 2px;
  background: var(--cb);
}
.csw__proc-step:nth-child(4)::before,
.csw__proc-step:last-child::before { right: 0; }
.csw__proc-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cc);
  transition: background .3s ease, transform .3s ease;
}
.csw__proc-step:hover::after { background: var(--cc); transform: scale(1.25); }
.csw__proc-num {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--cc);
  margin-bottom: 10px;
}
.csw__proc-step h3 { font-size: 21px; font-weight: 600; color: var(--ch); margin: 0 0 12px; }
.csw__proc-step p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ct); margin: 0; }
.csw__proc-foot { margin-top: 54px; text-align: center; }


/* ---------- 09. Integration ---------- */
.csw__integrate { padding: 120px 0; background: var(--cbg); }
.csw__integrate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.csw__integrate-copy .csw__btn { margin-top: 18px; }
.csw__integrate-panel {
  padding: 40px;
  border-radius: 20px;
  background: var(--cdark);
  box-shadow: 0 30px 60px rgba(7, 21, 47, .22);
}
.csw__integrate-title { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 24px; }
.csw__integrate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.csw__integrate-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 15px;
  font-weight: 300;
  color: #dbe6f4;
  transition: all .3s ease;
}
.csw__integrate-list li:hover { background: rgba(0, 95, 204, .2); border-color: rgba(77, 163, 255, .45); }
.csw__integrate-list li > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(77, 163, 255, .16);
  color: var(--cc3);
  font-size: 13px;
}


/* ---------- 10. Quality, security & ownership ---------- */
.csw__trust { padding: 120px 0; }
.csw__trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.csw__trust-item {
  padding: 34px 30px 36px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  transition: all .3s ease;
}
.csw__trust-item:hover { border-color: rgba(77, 163, 255, .45); background: rgba(0, 95, 204, .14); transform: translateY(-6px); }
.csw__trust-item h3 { font-size: 20px; font-weight: 600; line-height: 1.35; color: #fff; margin: 0 0 12px; }
.csw__trust-item p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--cmuted); margin: 0; }
.csw__trust-foot { text-align: center; margin-top: 48px; }


/* ---------- 11. Engagement models ---------- */
.csw__engage { padding: 120px 0; background: #fff; }
.csw__engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.csw__engage-card {
  position: relative;
  padding: 38px 32px 40px;
  border-radius: 20px;
  border: 1px solid var(--cb);
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.csw__engage-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(28, 30, 43, .12); border-color: rgba(0, 95, 204, .3); }
/* Highlighted middle card sits slightly proud of the other two. */
.csw__engage-card--hl {
  background: var(--cdark);
  border-color: transparent;
  box-shadow: 0 30px 60px rgba(7, 21, 47, .28);
}
.csw__engage-card--hl .csw__ico { background: rgba(77, 163, 255, .16); color: var(--cc3); }
/* specificity bumped so it beats the base .csw__engage-card h3 rule below */
.csw__engage-card.csw__engage-card--hl h3 { color: #fff; }
.csw__engage-card--hl .csw__engage-fit { color: var(--cc3); }
.csw__engage-card--hl .csw__engage-list li { color: var(--cmuted); }
.csw__engage-card--hl .csw__engage-list li::before { color: var(--cc3); }
.csw__engage-flag {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 7px 14px;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--cc), var(--cc2));
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.csw__engage-card h3 { font-size: 23px; font-weight: 600; color: var(--ch); margin: 0 0 12px; }
.csw__engage-fit { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--cc); margin: 0 0 22px; }
.csw__engage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.csw__engage-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ct);
}
.csw__engage-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12px;
  color: var(--cc);
}
.csw__engage-foot { text-align: center; margin-top: 44px; }


/* ---------- 12. Industries ---------- */
/* An asymmetric bento mosaic instead of a uniform 3x3 card grid: three sectors get a wide, featured tile. */
.csw__ind { padding: 120px 0; background: var(--cbg); }
.csw__ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 20px; }
.csw__ind-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 32px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--cb);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.csw__ind-item:hover { transform: translateY(-6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 44px rgba(28, 30, 43, .1); }
.csw__ind-item h3 { font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--ch); margin: 0 0 12px; }
.csw__ind-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ct); margin: 0; }
.csw__ind-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--cb);
  font-size: 15px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}
.csw__ind-item:hover .csw__ind-arrow { opacity: 1; transform: translate(0, 0); color: var(--cc); }
/* Featured tiles: span two columns, larger icon and type, a tinted surface to read as the anchors of the mosaic. */
.csw__ind-item--wide {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(0, 95, 204, .06), rgba(128, 121, 248, .05));
  border-color: rgba(0, 95, 204, .16);
}
.csw__ind-item--wide .csw__ico { width: 60px; height: 60px; border-radius: 14px; font-size: 24px; }
.csw__ind-item--wide h3 { font-size: 25px; }
.csw__ind-item--wide p { font-size: 15.5px; max-width: 460px; }
.csw__ind-foot { text-align: center; margin-top: 44px; }


/* ---------- 13. Why 3Shadz ---------- */
.csw__why { padding: 120px 0; background: #fff; }
.csw__why-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: start; }
.csw__why-figure { margin-top: 34px; }
.csw__why-figure img {
  width: 100%;
  border-radius: 20px;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.csw__why-list { display: grid; gap: 18px; }
.csw__why-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid var(--cb);
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.csw__why-item:hover { transform: translateX(6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 18px 38px rgba(28, 30, 43, .08); }
.csw__why-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--cc);
  font-size: 15px;
  font-weight: 600;
}
.csw__why-item h3 { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ch); margin: 0 0 8px; }
.csw__why-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ct); margin: 0; }


/* ---------- 14. Connected solutions ---------- */
/* A circuit layout: the hub sits between two branching rows, joined by drop-lines instead of a scrolling card rail. */
.csw__connect { padding: 120px 0; background: var(--cbg); }
.csw__mesh { position: relative; max-width: 1180px; margin: 0 auto; }
.csw__mesh-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.csw__mesh-card {
  position: relative;
  padding: 32px 28px 34px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--cb);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.csw__mesh-card:hover { transform: translateY(-6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 44px rgba(28, 30, 43, .1); }
.csw__mesh-card h3 { font-size: 19.5px; font-weight: 600; line-height: 1.35; color: var(--ch); margin: 0 0 12px; }
.csw__mesh-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ct); margin: 0 0 18px; }

/* Hub, pinned between the two rows */
.csw__mesh-hub {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
  padding: 26px 36px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--cc), var(--cc2));
  color: #fff;
  box-shadow: 0 20px 44px rgba(0, 95, 204, .22);
}
.csw__mesh-hub i { font-size: 26px; }
.csw__mesh-hub strong { font-size: 19px; font-weight: 700; }
.csw__mesh-hub span { font-size: 13.5px; font-weight: 300; color: #dbe6f4; }

/* Drop-line bus: a shared horizontal bar with a stem toward each card, plus one stem continuing to the hub. */
.csw__mesh-links { position: relative; height: 56px; max-width: 900px; margin: 0 auto; }
.csw__mesh-links::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 22px;
  background: var(--cb);
  transform: translateX(-50%);
}
.csw__mesh-links::after {
  content: "";
  position: absolute;
  left: 16.666%;
  right: 16.666%;
  top: 22px;
  height: 2px;
  background: var(--cb);
}
.csw__mesh-stem { position: absolute; top: 22px; width: 2px; height: 34px; background: var(--cb); transform: translateX(-50%); }
.csw__mesh-stem--1 { left: 16.666%; }
.csw__mesh-stem--2 { left: 50%; }
.csw__mesh-stem--3 { left: 83.333%; }
/* Mirror the same bus shape for the row above the hub. */
.csw__mesh-links--top { transform: scaleY(-1); }


/* ---------- 15. FAQ ---------- */
.csw__faq { padding: 120px 0; background: #fff; }
.csw__faq-list { max-width: 940px; margin: 0 auto; display: grid; gap: 14px; }
.csw__faq-item {
  border-radius: 16px;
  border: 1px solid var(--cb);
  background: #fff;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.csw__faq-item.is-open { border-color: rgba(0, 95, 204, .35); box-shadow: 0 18px 40px rgba(28, 30, 43, .08); }
.csw__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ch);
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
}
.csw__faq-q:hover { color: var(--cc); }
.csw__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--cc);
  font-size: 12px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.csw__faq-item.is-open .csw__faq-icon { transform: rotate(45deg); background: var(--cc); color: #fff; }
/* grid-template-rows animates cleanly without measuring the content height */
.csw__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.csw__faq-item.is-open .csw__faq-a { grid-template-rows: 1fr; }
.csw__faq-a > div { overflow: hidden; }
.csw__faq-a p {
  padding: 0 28px 26px;
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ct);
}


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .csw__hero-title { font-size: 48px; }
  .csw__page .csw__title { font-size: 38px; }
  .csw__cap-grid { max-width: 100%; }
}

@media (max-width: 1199px) {
  .csw__hero { padding: 170px 0 100px; }
  .csw__hero-grid,
  .csw__intro-grid,
  .csw__integrate-grid,
  .csw__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .csw__hero-title { font-size: 42px; }
  .csw__hero-frame { aspect-ratio: 16 / 9; }
  .csw__intro-badge { right: 16px; bottom: -20px; }
  .csw__trust-grid,
  .csw__engage-grid { grid-template-columns: repeat(2, 1fr); }
  .csw__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .csw__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .csw__cap-grid .csw__cap-card:nth-child(4n+2),
  .csw__cap-grid .csw__cap-card:nth-child(4n) { margin-top: 0; }
  .csw__cap-grid .csw__cap-card:nth-child(even) { margin-top: 40px; }
  .csw__proc-step,
  .csw__proc-step:nth-child(n+5) { grid-column: span 6; }
  .csw__proc-step:nth-child(2n)::before { right: 0; }
  .csw__tech-panels { padding: 32px 26px; }
  /* The drop-line bus is tuned to a 3-column grid; below that the rows collapse and the lines are dropped. */
  .csw__mesh-links { display: none; }
  .csw__mesh-row { grid-template-columns: repeat(2, 1fr); margin: 28px 0; }
}

@media (max-width: 991px) {
  .csw__hero { padding: 150px 0 90px; }
  .csw__hero-title { font-size: 36px; }
  .csw__page .csw__title { font-size: 32px; }
  .csw__hero-lead { font-size: 17px; }
  .csw__intro,
  .csw__signal,
  .csw__compare,
  .csw__sol,
  .csw__cap,
  .csw__tech,
  .csw__proc,
  .csw__integrate,
  .csw__trust,
  .csw__engage,
  .csw__ind,
  .csw__why,
  .csw__connect,
  .csw__faq { padding: 90px 0; }
  .csw__page .csw__head--center { margin-bottom: 44px; }
  .csw__sol-row { grid-template-columns: 1fr; gap: 20px; padding: 32px 28px; }
  .csw__sol-side { display: flex; align-items: center; gap: 20px; }
  .csw__sol-side::after { display: none; }
  .csw__sol-num { margin-bottom: 0; }
  .csw__sol-side .csw__ico { margin-bottom: 0; }
  .csw__integrate-panel { padding: 32px 26px; }
}

@media (max-width: 767px) {
  .csw__hero { padding: 130px 0 70px; }
  .csw__hero-title { font-size: 30px; }
  .csw__page .csw__title { font-size: 27px; }
  .csw__page .csw__lead,
  .csw__hero-lead { font-size: 16px; }
  .csw__intro,
  .csw__signal,
  .csw__compare,
  .csw__sol,
  .csw__cap,
  .csw__tech,
  .csw__proc,
  .csw__integrate,
  .csw__trust,
  .csw__engage,
  .csw__ind,
  .csw__why,
  .csw__connect,
  .csw__faq { padding: 70px 0; }
  .csw__hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .csw__hero-actions { gap: 12px; }
  .csw__page .csw__btn,
  .csw__page .csw__btn-outline { padding: 15px 26px; font-size: 15px; }
  .csw__trust-grid,
  .csw__engage-grid { grid-template-columns: 1fr; }
  .csw__ind-grid { grid-template-columns: 1fr; }
  .csw__mesh-row { grid-template-columns: 1fr; gap: 18px; }
  .csw__mesh-hub { padding: 22px 28px; max-width: none; }
  .csw__ind-item--wide { grid-column: span 1; }
  .csw__ind-item--wide h3 { font-size: 21px; }
  .csw__signal-wall { column-count: 1; }
  .csw__signal-note:nth-child(odd),
  .csw__signal-note:nth-child(even) { transform: none; }
  .csw__signal-note:hover { transform: translateY(-5px); }
  .csw__cap-grid { grid-template-columns: 1fr; gap: 18px; }
  .csw__cap-grid .csw__cap-card:nth-child(even) { margin-top: 0; }
  .csw__cap-card { padding: 26px 22px 22px; }
  .csw__cap-num { font-size: 38px; }
  .csw__proc-step,
  .csw__proc-step:nth-child(n+5) { grid-column: span 12; }
  .csw__proc-step::before { right: 0; }
  .csw__sol-num { font-size: 42px; }
  .csw__sol-body h3 { font-size: 22px; }
  .csw__intro-badge { position: static; max-width: none; margin-top: 18px; }
  .csw__compare-row { padding: 20px 22px; }
  .csw__compare-vals { grid-template-columns: 1fr; gap: 14px; }
  .csw__compare-vs { margin: 0 auto; }
  .csw__compare-custom { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 2px solid var(--cc3); }
  .csw__compare-legend { gap: 14px; flex-wrap: wrap; }
  .csw__compare-note { flex-direction: column; gap: 8px; }
  .csw__faq-q { font-size: 16px; padding: 20px 22px; }
  .csw__faq-a p { padding: 0 22px 22px; }
  .csw__tech-tab { padding: 12px 18px; font-size: 14px; }
  .csw__marquee-track span { font-size: 15px; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .csw__marquee-track,
  .csw__tech-panel.is-active { animation: none; }
  .csw__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   DIGITAL TRANSFORMATION PAGE (dx__*)
   Scoped entirely to .dx__page (added on <main> of
   digital-transformation.html). Shares the brand tokens already
   used by .soln__page / .ai__page / .csw__page - #005fcc primary,
   #8079f8 secondary, #07152F dark bands, #f6f7fc light bands,
   Kanit type - but every layout component here is new to this page:
   a centred hero with a horizontal progress rail, an overlapping
   banner with outcome meters, before/after "shift" cards, an
   ascending maturity ladder, hover-expanding scope panels, and a
   three-wave delivery board. Keyframes are prefixed dxKf* so they
   cannot collide with the theme. Nothing here leaks to other pages.
   ============================================================ */
.dx__page {
  --dc: #005fcc;
  --dc2: #8079f8;
  --dc3: #4da3ff;
  --dh: #1c1e2b;
  --dt: #6b7089;
  --db: #e9eaf5;
  --dbg: #f6f7fc;
  --ddark: #07152F;
  --dmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.dx__page .dx__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--dc);
  margin-bottom: 18px;
}
.dx__page .dx__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--dh); margin: 0 0 20px; }
.dx__page .dx__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dh); margin: 0 0 18px; }
.dx__page .dx__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dt); margin: 0 0 16px; }
.dx__page .dx__text:last-child { margin-bottom: 0; }
.dx__page .dx__head { max-width: 880px; }
.dx__page .dx__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.dx__page .dx__dark { position: relative; overflow: hidden; background: var(--ddark); }
.dx__page .dx__dark > .container { position: relative; z-index: 1; }
.dx__page .dx__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(860px 440px at 12% -12%, rgba(0, 95, 204, .34), transparent 62%),
              radial-gradient(720px 420px at 92% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.dx__page .dx__dark .dx__eyebrow { color: var(--dc3); }
.dx__page .dx__dark .dx__title { color: #fff; }
.dx__page .dx__dark .dx__lead { color: #dbe6f4; }
.dx__page .dx__dark .dx__text { color: var(--dmuted); }

.dx__page .dx__btn,
.dx__page .dx__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dx__page .dx__btn { color: #fff; background: var(--dc); border: 2px solid var(--dc); }
.dx__page .dx__btn:hover { background: var(--dc2); border-color: var(--dc2); color: #fff; }
.dx__page .dx__btn-outline { color: var(--dc); border: 2px solid var(--dc); background: transparent; }
.dx__page .dx__btn-outline:hover { background: var(--dc); color: #fff; }
.dx__page .dx__dark .dx__btn-outline,
.dx__hero .dx__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.dx__page .dx__dark .dx__btn-outline:hover,
.dx__hero .dx__btn-outline:hover { background: #fff; border-color: #fff; color: var(--ddark); }

/* Arrow link used at the foot of most cards and sections. */
.dx__page .dx__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dc);
  transition: gap .3s ease, color .3s ease;
}
.dx__page .dx__link:hover { gap: 15px; color: var(--dc2); }
.dx__page .dx__dark .dx__link { color: var(--dc3); }
.dx__page .dx__dark .dx__link:hover { color: #fff; }


/* ---------- 01. Hero ---------- */
/* Unlike the AI and custom-software heroes (both split copy/image
   grids), this one is centred and carries the four-stage rail across
   the full width underneath. The diagonal sheen is the page's own
   visual signature. */
.dx__hero {
  position: relative;
  overflow: hidden;
  background: var(--ddark);
  padding: 200px 0 110px;
}
.dx__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(920px 500px at 50% -18%, rgba(0, 95, 204, .42), transparent 64%),
              radial-gradient(700px 420px at 8% 106%, rgba(128, 121, 248, .28), transparent 62%),
              radial-gradient(700px 420px at 94% 100%, rgba(77, 163, 255, .18), transparent 62%);
}
/* Diagonal "shift" streaks - the before/after motion of the page, frozen. */
.dx__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .05) 0px,
      rgba(255, 255, 255, .05) 1px,
      transparent 1px,
      transparent 58px);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 30%, #000 20%, transparent 100%);
          mask-image: radial-gradient(75% 70% at 50% 30%, #000 20%, transparent 100%);
}
.dx__hero > .container { position: relative; z-index: 2; }
.dx__hero-inner { max-width: 940px; margin: 0 auto; text-align: center; }
.dx__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 26px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .34);
  background: rgba(77, 163, 255, .1);
  color: #dbe6f4;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.dx__hero-eyebrow i { font-size: 12px; color: var(--dc3); }
.dx__hero-title { font-size: 60px; line-height: 1.08; font-weight: 600; color: #fff; margin: 0 0 24px; }
.dx__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--dc3), var(--dc2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dx__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 auto 18px; max-width: 820px; }
.dx__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dmuted); margin: 0 auto; max-width: 820px; }
.dx__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; }

/* Progress rail: four stages joined by a beam that travels left to right. */
.dx__rail {
  position: relative;
  list-style: none;
  margin: 86px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
/* static track */
.dx__rail::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 27px;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}
/* travelling highlight along the track */
.dx__rail::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 26px;
  width: 22%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--dc3), var(--dc2), transparent);
  animation: dxKfRail 6s ease-in-out infinite;
}
@keyframes dxKfRail {
  0%   { transform: translateX(0); opacity: .25; }
  50%  { transform: translateX(255%); opacity: 1; }
  100% { transform: translateX(0); opacity: .25; }
}
.dx__rail-item { position: relative; text-align: center; padding: 0 6px; }
.dx__rail-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid rgba(77, 163, 255, .38);
  background: #0b1e40;
  color: var(--dc3);
  font-size: 20px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.dx__rail-item:hover .dx__rail-dot { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 95, 204, .38); }
.dx__rail-item strong { display: block; font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.dx__rail-item > span:last-child { display: block; font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--dmuted); }


/* ---------- 02. Banner + outcome meters ---------- */
/* The frame lifts out of the dark hero and overlaps it, which stitches
   the two bands together instead of stacking them. */
.dx__banner { position: relative; background: var(--dbg); padding: 0 0 110px; }
.dx__banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: var(--ddark);
}
.dx__banner > .container { position: relative; z-index: 1; }
.dx__banner-frame {
  position: relative;
  border-radius: 26px;
  overflow: visible;
  box-shadow: 0 34px 80px rgba(7, 21, 47, .26);
}
.dx__banner-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
}
.dx__banner-tag {
  position: absolute;
  /* the theme gives every <img> z-index:1, so overlays must out-rank it */
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 320px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--db);
  background: #fff;
  box-shadow: 0 20px 44px rgba(7, 21, 47, .16);
}
.dx__banner-tag--a { left: -26px; bottom: 64px; animation: dxKfFloat 7s ease-in-out infinite; }
.dx__banner-tag--b { right: -26px; top: 56px; animation: dxKfFloat 7s ease-in-out infinite 1.6s; }
@keyframes dxKfFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.dx__banner-tag-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(0, 95, 204, .1);
  color: var(--dc);
  font-size: 17px;
}
.dx__banner-tag strong { display: block; font-size: 16px; font-weight: 600; color: var(--dh); margin-bottom: 4px; }
.dx__banner-tag span:last-child { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dt); }

.dx__meters {
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.dx__meters li {
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid var(--db);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dx__meters li:hover { transform: translateY(-6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 44px rgba(7, 21, 47, .1); }
.dx__meter-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dt);
  margin-bottom: 14px;
}
/* The bar is a direction-of-travel indicator, not a claimed statistic. */
.dx__meter-bar {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: var(--db);
  overflow: hidden;
  margin-bottom: 16px;
}
.dx__meter-bar i {
  display: block;
  height: 100%;
  width: var(--dx-fill, 50%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--dc), var(--dc2));
}
.dx__meters strong { display: block; font-size: 24px; font-weight: 600; color: var(--dh); line-height: 1.2; }
.dx__meter-note { display: block; margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--dt); }


/* ---------- 03. Introduction ---------- */
.dx__intro { background: #fff; padding: 120px 0; }
.dx__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dx__intro-figure { position: relative; }
.dx__intro-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
}
.dx__intro-note {
  position: absolute;
  /* the theme gives every <img> z-index:1, so overlays must out-rank it */
  z-index: 2;
  left: -28px;
  bottom: 40px;
  max-width: 300px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--ddark);
  box-shadow: 0 24px 50px rgba(7, 21, 47, .26);
}
.dx__intro-note strong { display: block; font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.dx__intro-note span { display: block; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--dmuted); }


/* ---------- 04. Shift grid (before -> after) ---------- */
.dx__shift { padding: 120px 0; }
.dx__shift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dx__shift-card {
  position: relative;
  padding: 34px 30px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.dx__shift-card:hover {
  transform: translateY(-8px);
  border-color: rgba(77, 163, 255, .4);
  background: rgba(77, 163, 255, .07);
}
.dx__shift-num {
  position: absolute;
  top: 24px;
  right: 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .22);
}
.dx__shift-from,
.dx__shift-to {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  padding-right: 40px;
}
.dx__shift-from { font-weight: 300; color: var(--dmuted); }
.dx__shift-from i {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #8ea3bd;
  font-size: 11px;
}
.dx__shift-to { font-weight: 500; color: #fff; }
.dx__shift-to i {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(77, 163, 255, .18);
  color: var(--dc3);
  font-size: 11px;
}
/* The arrow is the hinge of the card: it nudges downward on hover to
   reinforce the "old state becomes new state" reading. */
.dx__shift-arrow {
  display: block;
  margin: 14px 0 14px 4px;
  width: 22px;
  text-align: center;
  color: var(--dc3);
  font-size: 14px;
  opacity: .7;
  transition: transform .35s ease, opacity .35s ease;
}
.dx__shift-card:hover .dx__shift-arrow { transform: translateY(4px); opacity: 1; }
.dx__shift-text {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--dmuted);
}


/* ---------- 05. Pillars: interlocking honeycomb ---------- */
/* Two rows of three pointy-top hexagons; row two is shifted right by
   half a hex-width and pulled up by a quarter of a hex-height, which is
   the standard offset for hexagons to tessellate. The visible tile is
   scaled down slightly inside that grid cell to leave a honeycomb gap.
   Detail text lives in a popover that drops below the hex on hover/focus,
   so the hex face itself only ever has to carry an icon and a title. */
.dx__pillars { background: var(--dbg); padding: 120px 0; }
.dx__hive {
  --hexw: 208px;
  --hexh: calc(var(--hexw) * 1.1547);
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 0 auto;
}
.dx__hive-row { display: flex; }
.dx__hive-row--offset {
  margin-left: calc(var(--hexw) / 2);
  margin-top: calc(var(--hexh) / -4);
}
.dx__hex { position: relative; width: var(--hexw); height: var(--hexh); }
.dx__hex-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 28px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--db);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform: scale(.92);
  transition: transform .35s ease, box-shadow .35s ease;
  z-index: 1;
}
.dx__hex-ico { font-size: 26px; color: var(--dc); }
.dx__hex-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--dh); margin: 0; }
.dx__hex:hover .dx__hex-face,
.dx__hex:focus-within .dx__hex-face { transform: scale(1); box-shadow: 0 22px 44px rgba(7, 21, 47, .16); }

.dx__hex-detail {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 320px;
  margin-top: 10px;
  padding: 14px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--db);
  box-shadow: 0 24px 48px rgba(7, 21, 47, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  z-index: 6;
}
.dx__hex-detail p { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dt); text-align: left; }
.dx__hex:hover .dx__hex-detail,
.dx__hex:focus-within .dx__hex-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}


/* ---------- 06. Maturity ladder ---------- */
.dx__maturity { padding: 120px 0; }
/* A real staircase: every card is the same size, and each later stage is
   lifted one tread higher than the one before it, so 01 sits lowest and
   05 sits highest. The lift comes from margin-bottom against an
   end-aligned grid row, which keeps the cards in normal flow (a
   transform would leave the row height measured from the unlifted
   position and open a gap under the section). */
.dx__ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px;
  align-items: end;
}
.dx__ladder-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  margin-bottom: calc((var(--dx-step) - 1) * 46px);
  padding: 30px 24px 26px;
  border-radius: 18px 18px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 3px solid rgba(77, 163, 255, calc(.18 + (var(--dx-step) * .14)));
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.dx__ladder-step:hover {
  transform: translateY(-8px);
  border-color: rgba(77, 163, 255, .45);
  background: linear-gradient(180deg, rgba(77, 163, 255, .12), rgba(128, 121, 248, .05));
}
/* Diagonal connector sitting in the gap, pointing up towards the next
   (higher) tread. fa-arrow-right rotated -45deg gives the up-right arrow. */
.dx__ladder-step:not(:last-child)::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -34px;
  top: 56px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  color: var(--dc3);
  font-size: 15px;
  opacity: .8;
  transition: transform .35s ease, opacity .35s ease;
}
.dx__ladder-step:not(:last-child):hover::after { transform: rotate(-45deg) translateX(4px); opacity: 1; }
.dx__ladder-index {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dc3);
  margin-bottom: 14px;
}
.dx__ladder-title { font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 12px; }
.dx__ladder-text { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dmuted); margin: 0 0 20px; }
.dx__ladder-next {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: #cfe0f3;
}
.dx__ladder-next em { font-style: normal; font-weight: 600; color: var(--dc3); display: block; margin-bottom: 4px; }


/* ---------- 07. Scope: hub-and-spoke radial ---------- */
/* Eight compact nodes orbit a central hub using the rotate/translate/
   counter-rotate trick (same idiom as .ai__sec-item on the AI page) so each
   node stays upright regardless of where it sits on the circle. A node only
   carries an icon + short label; clicking one (JS toggles .is-active) swaps
   which .dx__panel below is shown. Below 992px the orbit maths has no room
   to work, so it collapses to a plain node grid above the detail panel. */
.dx__scope { background: #fff; padding: 120px 0; overflow: hidden; }
.dx__radial { margin-top: 56px; }
.dx__radial-hub {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 148px;
  height: 148px;
  padding: 12px;
  margin: 0 auto 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dc), var(--dc2));
  color: #fff;
  font-size: 26px;
  text-align: center;
  box-shadow: 0 24px 52px rgba(0, 95, 204, .3);
}
.dx__radial-hub strong { font-size: 11px; font-weight: 600; line-height: 1.4; }
.dx__radial-nodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dx__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 18px 12px;
  border-radius: 16px;
  border: 1px solid var(--db);
  background: var(--dbg);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.dx__node-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 95, 204, .12), rgba(128, 121, 248, .12));
  color: var(--dc);
  font-size: 16px;
  transition: background .3s ease, color .3s ease;
}
.dx__node-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dh);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dx__node:hover,
.dx__node.is-active {
  transform: translateY(-4px);
  background: #fff;
  border-color: rgba(0, 95, 204, .35);
  box-shadow: 0 18px 38px rgba(7, 21, 47, .12);
}
.dx__node:hover .dx__node-ico,
.dx__node.is-active .dx__node-ico { background: linear-gradient(135deg, var(--dc), var(--dc2)); color: #fff; }

.dx__radial-detail { margin-top: 40px; max-width: 760px; margin-left: auto; margin-right: auto; }
.dx__panel {
  display: none;
  padding: 40px 44px;
  border-radius: 20px;
  border: 1px solid var(--db);
  background: var(--dbg);
}
.dx__panel.is-active { display: block; animation: dxPanelIn .35s ease; }
@keyframes dxPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dx__panel-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--dc), var(--dc2));
  color: #fff;
  font-size: 21px;
}
.dx__panel-title { font-size: 22px; font-weight: 600; color: var(--dh); margin: 0 0 14px; }
.dx__panel-text { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dt); margin: 0; }
.dx__panel-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.dx__panel-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--dt);
}
.dx__panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dc), var(--dc2));
}

@media (min-width: 992px) {
  .dx__radial-diagram { position: relative; height: 700px; max-width: 720px; margin: 0 auto; }
  .dx__radial-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
  .dx__radial-nodes { position: absolute; inset: 0; display: block; }
  .dx__node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 158px;
    transform: translate(-50%, -50%) rotate(var(--ang)) translate(305px) rotate(calc(-1 * var(--ang)));
  }
  .dx__node:hover,
  .dx__node.is-active {
    transform: translate(-50%, -50%) rotate(var(--ang)) translate(305px) rotate(calc(-1 * var(--ang))) translateY(-6px);
  }
  .dx__node:nth-child(1) { --ang: -90deg; }
  .dx__node:nth-child(2) { --ang: -45deg; }
  .dx__node:nth-child(3) { --ang: 0deg; }
  .dx__node:nth-child(4) { --ang: 45deg; }
  .dx__node:nth-child(5) { --ang: 90deg; }
  .dx__node:nth-child(6) { --ang: 135deg; }
  .dx__node:nth-child(7) { --ang: 180deg; }
  .dx__node:nth-child(8) { --ang: 225deg; }
}


/* ---------- 08. Delivery waves: horizontal stepper + detail panel ---------- */
/* Three numbered stops on a horizontal track; clicking one (JS toggles
   .is-active and sets --dx-progress on the track) shows that wave's detail
   below. Mirrors the click-to-reveal idiom used by the radial scope diagram
   above it, including the same auto-scroll-if-offscreen behaviour. */
.dx__waves { background: var(--dbg); padding: 120px 0; }
.dx__stepper { max-width: 900px; margin: 56px auto 0; }
.dx__stepper-track { position: relative; display: flex; justify-content: space-between; margin-bottom: 48px; }
.dx__stepper-track::before,
.dx__stepper-track::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 2px;
}
.dx__stepper-track::before { background: var(--db); }
.dx__stepper-track::after {
  right: auto;
  width: calc((100% - 44px) * var(--dx-progress, 0));
  background: linear-gradient(90deg, var(--dc), var(--dc2));
  transition: width .4s ease;
}
.dx__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.dx__step-dot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--db);
  background: #fff;
  color: var(--dt);
  font-size: 16px;
  font-weight: 600;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.dx__step-label { display: none; flex-direction: column; gap: 2px; padding-top: 4px; }
.dx__step-label small { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dt); }
.dx__step-label strong { font-size: 16px; font-weight: 600; color: var(--dh); }
.dx__step.is-active .dx__step-dot,
.dx__step.is-done .dx__step-dot { border-color: transparent; background: linear-gradient(135deg, var(--dc), var(--dc2)); color: #fff; }
.dx__step.is-active .dx__step-label small { color: var(--dc); }

.dx__stepper-detail { position: relative; }
.dx__wave { display: none; padding: 44px 48px; border-radius: 22px; border: 1px solid var(--db); background: #fff; }
.dx__wave.is-active { display: block; animation: dxPanelIn .35s ease; }
.dx__wave-title { font-size: 28px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.dx__wave-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--dt);
  margin: 0 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--db);
}
.dx__wave-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.dx__wave-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--dt);
}
.dx__wave-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 11px;
  color: var(--dc);
}
.dx__wave-out {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--dbg);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--dh);
}
.dx__wave-out i { margin-top: 3px; color: var(--dc2); }

@media (min-width: 576px) {
  .dx__step-label { display: flex; }
}


/* ---------- 09. Technology enablers ---------- */
.dx__tech { padding: 120px 0; }
.dx__tech-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.dx__tech-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.dx__tech-group {
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: border-color .35s ease, background .35s ease;
}
.dx__tech-group:hover { border-color: rgba(77, 163, 255, .35); background: rgba(77, 163, 255, .06); }
.dx__tech-group-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dc3);
  margin: 0 0 18px;
}
.dx__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dx__chips li {
  padding: 8px 15px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.dx__chips li:hover { transform: translateY(-3px); border-color: rgba(77, 163, 255, .5); color: #fff; }


/* ---------- 10. Change & adoption ---------- */
.dx__adopt { background: #fff; padding: 120px 0; }
.dx__adopt-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.dx__adopt-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 24px;
}
.dx__adopt-list { list-style: none; margin: 28px 0 0; padding: 0; }
.dx__adopt-list li { display: flex; align-items: flex-start; gap: 18px; }
.dx__adopt-list li + li { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--db); }
.dx__adopt-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--dc);
  font-size: 18px;
}
.dx__adopt-list strong { display: block; font-size: 18px; font-weight: 600; color: var(--dh); margin-bottom: 6px; }
.dx__adopt-list span { display: block; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--dt); }


/* ---------- 11. Measuring success: agreed-baseline ledger ---------- */
/* A single "document" rather than a grid of cards: two reading columns of
   rows separated by dashed rules, each metric verified with a small
   check badge overlapping its icon, closed off with a signature-style
   footer band. Sells "signed agreement" for an Accountability section
   instead of another bordered tile bank. */
.dx__measure { background: var(--dbg); padding: 120px 0; }
.dx__ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1120px;
  margin: 56px auto 0;
  padding-top: 8px;
  border: 1px solid var(--db);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(7, 21, 47, .06);
  overflow: hidden;
}
.dx__ledger-col:first-child { border-right: 1px solid var(--db); }
.dx__ledger-row { display: flex; align-items: flex-start; gap: 18px; padding: 26px 34px; }
.dx__ledger-col > .dx__ledger-row:not(:last-child) { border-bottom: 1px dashed var(--db); }
.dx__ledger-ico {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(128, 121, 248, .12);
  color: var(--dc2);
  font-size: 17px;
}
.dx__ledger-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, var(--dc), var(--dc2));
  color: #fff;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dx__ledger-title { font-size: 16px; font-weight: 600; color: var(--dh); margin: 0 0 6px; }
.dx__ledger-text { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; }
.dx__ledger-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  background: var(--dbg);
  border-top: 1px solid var(--db);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dh);
  text-align: center;
}
.dx__ledger-foot i { color: var(--dc); }


/* ---------- 12. Risk, security & governance: layered defense stack ---------- */
/* Six controls as tapering horizontal bands stacked and centred - like a
   cross-section through layers of defense - instead of a 3x2 card grid.
   Widths are fixed per position (nth-child), not content-driven. */
.dx__govern { padding: 120px 0; }
.dx__stack { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 980px; margin: 56px auto 0; }
.dx__stack-layer {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 22px 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.dx__stack-layer:hover { transform: translateY(-4px); border-color: rgba(77, 163, 255, .4); background: rgba(77, 163, 255, .07); }
.dx__stack-layer:nth-child(1) { width: 100%; }
.dx__stack-layer:nth-child(2) { width: 91%; }
.dx__stack-layer:nth-child(3) { width: 82%; }
.dx__stack-layer:nth-child(4) { width: 73%; }
.dx__stack-layer:nth-child(5) { width: 64%; }
.dx__stack-layer:nth-child(6) { width: 55%; }
.dx__stack-ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(77, 163, 255, .14);
  color: var(--dc3);
  font-size: 20px;
}
.dx__stack-body { text-align: left; }
.dx__stack-title { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.dx__stack-text { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--dmuted); margin: 0; }


/* ---------- 13. Industries: horizontal sector rail ---------- */
/* A scroll-snap strip instead of a 4x2 grid - eight wider cards you scroll
   sideways through, each corner-tagged with a catalog number. Arrow
   buttons call scrollBy() on the rail; native touch/trackpad scroll works
   without them, so they're a desktop nicety rather than a requirement. */
.dx__ind { background: #fff; padding: 120px 0; overflow: hidden; }
/* Static directory grid, styled like a catalogue card: icon + number in a header row,
   separated from the copy by a dashed rule instead of the old scroll rail. */
.dx__ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1320px;
  margin: 40px auto 0;
  padding: 0 20px;
}
.dx__ind-card {
  position: relative;
  display: block;
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid var(--db);
  background: var(--dbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.dx__ind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--db);
}
.dx__ind-num { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--db); transition: color .3s ease; }
.dx__ind-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .28); box-shadow: 0 22px 44px rgba(7, 21, 47, .1); }
.dx__ind-card:hover .dx__ind-num { color: var(--dc2); }
.dx__ind-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--dc);
  font-size: 18px;
  transition: background .35s ease, color .35s ease;
}
.dx__ind-card:hover .dx__ind-ico { background: var(--dc); color: #fff; }
.dx__ind-title { font-size: 18px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.dx__ind-text { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0; }
.dx__ind-more { margin-top: 30px; text-align: center; }


/* ---------- 14. Why 3Shadz ---------- */
.dx__why { background: var(--dbg); padding: 120px 0; }
.dx__why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.dx__why-actions { margin-top: 32px; }
.dx__why-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.dx__why-list li { display: flex; align-items: flex-start; gap: 20px; }
.dx__why-list li + li { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--db); }
.dx__why-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--dc), var(--dc2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.dx__why-list strong { display: block; font-size: 19px; font-weight: 600; color: var(--dh); margin-bottom: 6px; }
.dx__why-list p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dt); }


/* ---------- 15. Connected solutions: pinned scatter deck ---------- */
/* Same 4x2 grid position for each card, but every card carries a fixed
   slight rotation (and a pin dot) so the set reads as capability notes
   pinned to a board rather than a neat card bank; hovering straightens,
   lifts and brings that one card to the front. */
.dx__connect { background: #fff; padding: 120px 0; }
.dx__connect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; padding: 14px 6px 6px; }
.dx__connect-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-radius: 18px;
  border: 1px solid var(--db);
  background: var(--dbg);
  transform: rotate(var(--dx-rot, 0deg));
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.dx__connect-card::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dc), var(--dc2));
  box-shadow: 0 3px 8px rgba(0, 95, 204, .4);
}
.dx__connect-card:nth-child(1) { --dx-rot: -2.5deg; }
.dx__connect-card:nth-child(2) { --dx-rot: 1.8deg; }
.dx__connect-card:nth-child(3) { --dx-rot: -1.2deg; }
.dx__connect-card:nth-child(4) { --dx-rot: 2.4deg; }
.dx__connect-card:nth-child(5) { --dx-rot: 1.5deg; }
.dx__connect-card:nth-child(6) { --dx-rot: -2.1deg; }
.dx__connect-card:nth-child(7) { --dx-rot: 2.8deg; }
.dx__connect-card:nth-child(8) { --dx-rot: -1.6deg; }
.dx__connect-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.04);
  z-index: 3;
  background: #fff;
  border-color: rgba(0, 95, 204, .3);
  box-shadow: 0 28px 56px rgba(7, 21, 47, .14);
}
.dx__connect-title { font-size: 18px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.dx__connect-text { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0 0 18px; }
.dx__connect-card .dx__link { margin-top: auto; font-size: 14px; }


/* ---------- 16. FAQ ---------- */
.dx__faq { background: var(--dbg); padding: 120px 0; }
.dx__faq-list { max-width: 960px; margin: 0 auto; }
.dx__faq-item {
  border-radius: 16px;
  border: 1px solid var(--db);
  background: #fff;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.dx__faq-item + .dx__faq-item { margin-top: 14px; }
.dx__faq-item.is-open { border-color: rgba(0, 95, 204, .32); box-shadow: 0 18px 40px rgba(7, 21, 47, .08); }
.dx__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dh);
  cursor: pointer;
  transition: color .3s ease;
}
.dx__faq-q:hover { color: var(--dc); }
.dx__faq-q i {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--dc);
  font-size: 12px;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.dx__faq-item.is-open .dx__faq-q i { transform: rotate(45deg); background: var(--dc); color: #fff; }
/* same 0fr -> 1fr technique as the scope panels */
.dx__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.dx__faq-item.is-open .dx__faq-a { grid-template-rows: 1fr; }
.dx__faq-a > p { overflow: hidden; margin: 0; padding: 0 28px; font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--dt); }
.dx__faq-item.is-open .dx__faq-a > p { padding-bottom: 26px; }


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .dx__hero-title { font-size: 50px; }
  .dx__page .dx__title { font-size: 38px; }
  .dx__connect-grid { grid-template-columns: repeat(3, 1fr); }
  .dx__ladder-step { padding: 26px 20px 22px; }
}

@media (max-width: 1199px) {
  .dx__hero { padding: 170px 0 90px; }
  .dx__hero-title { font-size: 42px; }
  .dx__rail { grid-template-columns: repeat(2, 1fr); gap: 36px 26px; }
  .dx__rail::before,
  .dx__rail::after { display: none; }
  .dx__intro-grid,
  .dx__tech-grid,
  .dx__adopt-grid,
  .dx__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .dx__intro-figure img,
  .dx__adopt-figure img { aspect-ratio: 16 / 9; }
  .dx__shift-grid,
  .dx__meters { grid-template-columns: repeat(2, 1fr); }
  /* the staircase cannot read once the row wraps, so the treads level out */
  .dx__ladder { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .dx__ladder-step { min-height: 0; margin-bottom: 0; }
  .dx__ladder-step:not(:last-child)::after { display: none; }
  .dx__banner-tag--a { left: 16px; bottom: -28px; }
  .dx__banner-tag--b { right: 16px; top: 24px; }
}

@media (max-width: 991px) {
  .dx__hero { padding: 150px 0 80px; }
  .dx__hero-title { font-size: 36px; }
  .dx__page .dx__title { font-size: 32px; }
  .dx__hero-lead { font-size: 17px; }
  .dx__intro,
  .dx__shift,
  .dx__pillars,
  .dx__maturity,
  .dx__scope,
  .dx__waves,
  .dx__tech,
  .dx__adopt,
  .dx__measure,
  .dx__govern,
  .dx__ind,
  .dx__why,
  .dx__connect,
  .dx__faq { padding: 90px 0; }
  .dx__banner { padding-bottom: 90px; }
  .dx__page .dx__head--center { margin-bottom: 44px; }
  .dx__connect-grid,
  .dx__ind-grid,
  .dx__tech-groups { grid-template-columns: repeat(2, 1fr); }
  .dx__wave { padding: 32px 28px; }
  .dx__wave-list { grid-template-columns: 1fr; }
  .dx__ledger-row { padding: 22px 24px; }
  .dx__stack-layer:nth-child(n) { width: 100%; }
  .dx__stack-layer { padding: 20px 24px; }
  .dx__ladder { grid-template-columns: repeat(2, 1fr); }
  .dx__intro-note { left: 16px; bottom: -24px; }
  .dx__radial-detail .dx__panel { padding: 32px 28px; }
  .dx__radial-detail .dx__panel-list { grid-template-columns: 1fr; }
  /* the hex tessellation and hover-popovers don't work on touch, so the
     honeycomb collapses into a plain stacked card list */
  .dx__hive { display: flex; flex-direction: column; width: 100%; gap: 18px; }
  .dx__hive-row,
  .dx__hive-row--offset { flex-direction: column; gap: 18px; margin: 0; }
  .dx__hex { width: 100%; height: auto; background: #fff; border: 1px solid var(--db); border-radius: 16px; padding: 28px 26px; }
  .dx__hex-face {
    position: static;
    clip-path: none;
    transform: none !important;
    background: none;
    border: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    box-shadow: none !important;
  }
  .dx__hex-title { font-size: 18px; }
  .dx__hex-detail {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    width: auto;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border: none;
    border-top: 1px solid var(--db);
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .dx__hero { padding: 130px 0 64px; }
  .dx__hero-title { font-size: 29px; }
  .dx__page .dx__title { font-size: 26px; }
  .dx__page .dx__lead,
  .dx__hero-lead { font-size: 16px; }
  .dx__intro,
  .dx__shift,
  .dx__pillars,
  .dx__maturity,
  .dx__scope,
  .dx__waves,
  .dx__tech,
  .dx__adopt,
  .dx__measure,
  .dx__govern,
  .dx__ind,
  .dx__why,
  .dx__connect,
  .dx__faq { padding: 70px 0; }
  .dx__banner { padding-bottom: 70px; }
  .dx__hero-actions { gap: 12px; }
  .dx__page .dx__btn,
  .dx__page .dx__btn-outline { padding: 15px 24px; font-size: 15px; }
  .dx__rail { grid-template-columns: 1fr; gap: 30px; margin-top: 56px; }
  .dx__banner-frame img { aspect-ratio: 4 / 3; }
  .dx__banner-tag { position: static; max-width: none; margin-top: 16px; animation: none; }
  .dx__meters,
  .dx__shift-grid,
  .dx__ladder,
  .dx__radial-nodes,
  .dx__connect-grid,
  .dx__tech-groups { grid-template-columns: 1fr; }
  .dx__intro-note { position: static; max-width: none; margin-top: 18px; }
  .dx__wave-title { font-size: 26px; }
  .dx__ledger { grid-template-columns: 1fr; }
  .dx__ledger-col:first-child { border-right: none; border-bottom: 1px solid var(--db); }
  .dx__stack-layer { width: 100% !important; align-items: flex-start; }
  .dx__ind-grid { grid-template-columns: 1fr; }
  .dx__faq-q { font-size: 16px; padding: 20px 22px; }
  .dx__faq-a > p { padding: 0 22px; }
  .dx__faq-item.is-open .dx__faq-a > p { padding-bottom: 22px; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .dx__rail::after,
  .dx__banner-tag--a,
  .dx__banner-tag--b { animation: none; }
  .dx__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   ENTERPRISE SOLUTIONS PAGE (ent__*)
   Scoped entirely to .ent__page (added on <main> of
   enterprise-solutions.html). Shares the brand tokens already used
   by .soln__ / .ai__ / .csw__ / .dx__ pages - #005fcc primary,
   #8079f8 secondary, #07152F dark bands, #f6f7fc light bands, Kanit
   type - but the layout is built for this page's own subject: a
   split hero with a live-looking capability dashboard, a scrolling
   keyword marquee, a five-band "enterprise stack" diagram (this
   page's signature component, found on no other solution page), a
   scale-readiness staircase, hover-expanding scope panels, and a
   three-phase delivery board. Keyframes are prefixed entKf* so they
   cannot collide with the theme. Nothing here leaks to other pages.
   ============================================================ */
.ent__page {
  --ec: #005fcc;
  --ec2: #8079f8;
  --ec3: #4da3ff;
  --eh: #1c1e2b;
  --et: #6b7089;
  --eb: #e9eaf5;
  --ebg: #f6f7fc;
  --edark: #07152F;
  --emuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.ent__page .ent__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ec);
  margin-bottom: 18px;
}
.ent__page .ent__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--eh); margin: 0 0 20px; }
.ent__page .ent__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.ent__page .ent__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.ent__page .ent__text:last-child { margin-bottom: 0; }
.ent__page .ent__head { max-width: 880px; }
.ent__page .ent__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.ent__page .ent__dark { position: relative; overflow: hidden; background: var(--edark); }
.ent__page .ent__dark > .container { position: relative; z-index: 1; }
.ent__page .ent__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(860px 440px at 90% -12%, rgba(0, 95, 204, .34), transparent 62%),
              radial-gradient(720px 420px at 8% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.ent__page .ent__dark .ent__eyebrow { color: var(--ec3); }
.ent__page .ent__dark .ent__title { color: #fff; }
.ent__page .ent__dark .ent__lead { color: #dbe6f4; }
.ent__page .ent__dark .ent__text { color: var(--emuted); }

.ent__page .ent__btn,
.ent__page .ent__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.ent__page .ent__btn { color: #fff; background: var(--ec); border: 2px solid var(--ec); }
.ent__page .ent__btn:hover { background: var(--ec2); border-color: var(--ec2); color: #fff; }
.ent__page .ent__btn-outline { color: var(--ec); border: 2px solid var(--ec); background: transparent; }
.ent__page .ent__btn-outline:hover { background: var(--ec); color: #fff; }
.ent__page .ent__dark .ent__btn-outline,
.ent__hero .ent__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.ent__page .ent__dark .ent__btn-outline:hover,
.ent__hero .ent__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

/* Arrow link used at the foot of most cards and sections. */
.ent__page .ent__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ec);
  transition: gap .3s ease, color .3s ease;
}
.ent__page .ent__link:hover { gap: 15px; color: var(--ec2); }
.ent__page .ent__dark .ent__link { color: var(--ec3); }
.ent__page .ent__dark .ent__link:hover { color: #fff; }

/* Small square icon tile, reused by several card types on the page. */
.ent__page .ent__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--ec);
  font-size: 20px;
  margin-bottom: 18px;
}
.ent__page .ent__dark .ent__ico { background: rgba(77, 163, 255, .14); color: var(--ec3); }


/* ---------- 01. Hero ---------- */
/* Split grid rather than the centred hero used elsewhere: enterprise
   buyers read left-to-right proof, and the right-hand dashboard grid
   (four tiles reporting at once) is the page's own visual signature -
   "several systems, one view" - established before the reader even
   reaches the stack diagram further down. */
.ent__hero {
  position: relative;
  overflow: hidden;
  background: var(--edark);
  padding: 200px 0 120px;
}
.ent__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 86% -10%, rgba(0, 95, 204, .4), transparent 60%),
              radial-gradient(720px 420px at 4% 106%, rgba(128, 121, 248, .28), transparent 62%);
}
/* Faint node/lattice field standing in for "many connected systems". */
.ent__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.4px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(72% 68% at 30% 40%, #000 20%, transparent 100%);
          mask-image: radial-gradient(72% 68% at 30% 40%, #000 20%, transparent 100%);
}
.ent__hero > .container { position: relative; z-index: 2; }
.ent__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ent__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 26px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .34);
  background: rgba(77, 163, 255, .1);
  color: #dbe6f4;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.ent__hero-eyebrow i { font-size: 12px; color: var(--ec3); }
.ent__hero-title { font-size: 56px; line-height: 1.1; font-weight: 600; color: #fff; margin: 0 0 24px; }
.ent__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--ec3), var(--ec2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ent__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.ent__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--emuted); margin: 0; }
.ent__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

.ent__hero-figure { position: relative; }
.ent__hero-glow {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.ent__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.ent__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Capability dashboard: four tiles in a 2x2 grid, reading as several
   systems reporting status at once rather than a single stacked list. */
.ent__hero-dash {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ent__hero-dash li {
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.ent__hero-dash li:hover { border-color: rgba(77, 163, 255, .5); background: rgba(0, 95, 204, .16); transform: translateY(-4px); }
.ent__hero-dash-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(77, 163, 255, .16);
  color: var(--ec3);
  font-size: 14px;
}
.ent__hero-dash strong { display: block; font-size: 19px; font-weight: 600; color: #fff; line-height: 1.2; }
.ent__hero-dash span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 300; color: var(--emuted); line-height: 1.5; }


/* ---------- Keyword marquee ---------- */
.ent__marquee {
  background: linear-gradient(90deg, var(--ec), var(--ec2));
  padding: 20px 0;
  overflow: hidden;
}
.ent__marquee-mask { overflow: hidden; }
.ent__marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: entKfMarquee 36s linear infinite;
}
.ent__marquee-track span {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .5px;
}
.ent__marquee-track .ent__marquee-dot { font-size: 13px; color: rgba(255, 255, 255, .6); font-weight: 400; }
@keyframes entKfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ---------- 02. Introduction ---------- */
.ent__intro { background: #fff; padding: 120px 0; }
.ent__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ent__intro-figure { position: relative; }
.ent__intro-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
}
.ent__intro-note {
  position: absolute;
  /* the theme gives every <img> z-index:1, so overlays must out-rank it */
  z-index: 2;
  left: -28px;
  bottom: 40px;
  max-width: 300px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--edark);
  box-shadow: 0 24px 50px rgba(7, 21, 47, .26);
}
.ent__intro-note strong { display: block; font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.ent__intro-note span { display: block; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--emuted); }


/* ---------- 03. Enterprise stack (layers) ---------- */
/* The page's signature component: five horizontal bands read top to
   bottom, each wider than the last by a hair so the whole list reads
   as a stack rather than a plain list. A vertical spine with numbered
   nodes threads through the icons to reinforce "one connected system". */
.ent__stack { padding: 130px 0 120px; }
.ent__layers {
  position: relative;
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.ent__layers::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: linear-gradient(180deg, var(--ec3), var(--ec2), var(--ec3));
  opacity: .35;
}
.ent__layer {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 26px 30px;
  margin-bottom: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.ent__layer:last-child { margin-bottom: 0; }
/* each layer is a touch wider than the one above it, echoing a widening base */
.ent__layer:nth-child(1) { margin-right: 64px; }
.ent__layer:nth-child(2) { margin-right: 48px; }
.ent__layer:nth-child(3) { margin-right: 32px; }
.ent__layer:nth-child(4) { margin-right: 16px; }
.ent__layer:nth-child(5) { margin-right: 0; }
.ent__layer:hover {
  transform: translateX(6px);
  border-color: rgba(77, 163, 255, .4);
  background: rgba(77, 163, 255, .07);
}
.ent__layer-index {
  position: absolute;
  left: -2px;
  top: -14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .25);
}
.ent__layer-ico {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(77, 163, 255, .4);
  background: #0b1e40;
  color: var(--ec3);
  font-size: 21px;
}
.ent__layer-title { font-size: 21px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.ent__layer-text { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--emuted); margin: 0; }


/* ---------- 04. Pillars (running-bond brick wall) ----------
   Two courses of three, the second offset by half a brick - coursed
   masonry instead of a uniform card grid, so the "Foundations" eyebrow
   is a literal layout, not just a word. Distinct from every other grid
   on this page: no other section on it staggers by column-span offset. */
.ent__pillars { background: var(--ebg); padding: 120px 0; }
.ent__disc-wall { display: grid; grid-template-columns: repeat(7, 1fr); gap: 40px 24px; }
.ent__disc-brick:nth-child(1) { grid-column: 1 / 3; }
.ent__disc-brick:nth-child(2) { grid-column: 3 / 5; }
.ent__disc-brick:nth-child(3) { grid-column: 5 / 7; }
.ent__disc-brick:nth-child(4) { grid-column: 2 / 4; }
.ent__disc-brick:nth-child(5) { grid-column: 4 / 6; }
.ent__disc-brick:nth-child(6) { grid-column: 6 / 8; }
.ent__disc-brick {
  position: relative;
  overflow: hidden;
  padding: 34px 30px;
  border-radius: 18px;
  border: 1px solid var(--eb);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* mortar-line wipe along the bottom edge on hover, rather than the left-edge
   wipe the theme uses elsewhere */
.ent__disc-brick::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ec), var(--ec2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.ent__disc-brick:hover { transform: translateY(-8px); border-color: rgba(0, 95, 204, .28); box-shadow: 0 26px 52px rgba(7, 21, 47, .1); }
.ent__disc-brick:hover::after { transform: scaleX(1); }
.ent__disc-num {
  position: absolute;
  top: 28px;
  right: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--eb);
}
.ent__disc-title { font-size: 20px; font-weight: 600; color: var(--eh); margin: 0 0 12px; }
.ent__disc-text { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--et); margin: 0; }


/* ---------- 05. Scale readiness track ---------- */
.ent__ready { padding: 130px 0 120px; }
/* Horizontal spine with numbered nodes - the same "connected system"
   motif as the Enterprise Stack above, turned sideways, instead of
   the ascending-staircase pattern used on other pages. Every card is
   the same height (a plain grid row, no lift/offset), so the reading
   order is left-to-right along the line rather than up a ramp. */
.ent__track {
  position: relative;
  list-style: none;
  margin: 70px 0 0;
  padding: 27px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
/* static spine threading through the node row */
.ent__track::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 27px;
  height: 2px;
  background: linear-gradient(90deg, var(--ec3), var(--ec2), var(--ec3));
  opacity: .35;
}
.ent__track-item { position: relative; display: flex; flex-direction: column; align-items: center; }
.ent__track-node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 50%;
  border: 1px solid rgba(77, 163, 255, calc(.3 + (var(--ent-step) * .12)));
  background: #0b1e40;
  color: var(--ec3);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
/* later stages read as "more arrived": the node fills in solid */
.ent__track-item:nth-child(4) .ent__track-node,
.ent__track-item:nth-child(5) .ent__track-node { background: linear-gradient(135deg, var(--ec), var(--ec2)); color: #fff; border-color: transparent; }
.ent__track-item:hover .ent__track-node { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 95, 204, .38); }
.ent__track-card {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  text-align: left;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.ent__track-item:hover .ent__track-card {
  transform: translateY(-6px);
  border-color: rgba(77, 163, 255, .4);
  background: rgba(77, 163, 255, .07);
}
.ent__track-title { font-size: 21px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.ent__track-text { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--emuted); margin: 0 0 18px; }
.ent__track-next {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: #cfe0f3;
}
.ent__track-next em { font-style: normal; font-weight: 600; color: var(--ec3); display: block; margin-bottom: 4px; }


/* ---------- 06. Scope panels (switchable dossier) ----------
   A slim list of eight tabs drives one large spotlight panel, rather than
   eight equal cards - "Select a panel to see what it involves" is now a
   real instruction. Same tab/spotlight language as the solutions page
   showcase (.soln__showcase), adapted with an icon badge and checklist in
   place of the media panel there, so it stays consistent with the rest of
   the site without repeating any other layout on this page. */
.ent__scope { background: #fff; padding: 120px 0; }
.ent__deliver { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: stretch; }

.ent__deliver-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 18px;
  padding: 10px;
}
.ent__deliver-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background .3s ease;
}
.ent__deliver-tab:hover { background: rgba(255, 255, 255, .7); }
.ent__deliver-tab.active { background: #fff; box-shadow: 0 14px 30px rgba(7, 21, 47, .08); }
.ent__deliver-tab-num { flex: 0 0 auto; width: 20px; font-size: 13px; font-weight: 700; color: var(--eb); transition: color .3s ease; }
.ent__deliver-tab.active .ent__deliver-tab-num { color: var(--ec); }
.ent__deliver-tab-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 95, 204, .08);
  color: var(--ec);
  font-size: 15px;
  transition: all .3s ease;
}
.ent__deliver-tab.active .ent__deliver-tab-ico { background: linear-gradient(135deg, var(--ec), var(--ec2)); color: #fff; }
.ent__deliver-tab-title { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--eh); }

.ent__deliver-panels { position: relative; }
.ent__deliver-panel {
  display: none;
  height: 100%;
  padding: 44px 44px 40px;
  border: 1px solid var(--eb);
  border-radius: 20px;
  background: var(--ebg);
  box-shadow: 0 24px 60px rgba(7, 21, 47, .06);
}
.ent__deliver-panel.active { display: block; }
.ent__deliver-panel-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ec), var(--ec2));
  color: #fff;
  font-size: 22px;
  box-shadow: 0 14px 30px rgba(0, 95, 204, .3);
}
.ent__deliver-panel-title { font-size: 26px; font-weight: 600; color: var(--eh); margin: 0 0 14px; }
.ent__deliver-panel-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 26px; max-width: 640px; }
.ent__deliver-panel-list {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--eb);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.ent__deliver-panel-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--et);
}
.ent__deliver-panel-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 11px;
  color: var(--ec);
}


/* ---------- 07. Delivery phases ---------- */
.ent__waves { background: var(--ebg); padding: 120px 0; }
.ent__wave-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.ent__wave {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 38px 32px;
  border-radius: 22px;
  border: 1px solid var(--eb);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ent__wave:hover { transform: translateY(-8px); border-color: rgba(0, 95, 204, .28); box-shadow: 0 28px 56px rgba(7, 21, 47, .1); }
/* connector chevrons between the three phases */
.ent__wave:not(:last-child)::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -20px;
  top: 58px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ec);
  color: #fff;
  font-size: 12px;
}
.ent__wave-head { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--eb); }
.ent__wave-num {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 14px;
  border-radius: 50px;
  background: rgba(0, 95, 204, .1);
  color: var(--ec);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ent__wave-title { font-size: 30px; font-weight: 600; color: var(--eh); margin: 0 0 8px; }
.ent__wave-sub { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--et); margin: 0; }
.ent__wave-list { list-style: none; margin: 0 0 24px; padding: 0; }
.ent__wave-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--et);
}
.ent__wave-list li + li { margin-top: 12px; }
.ent__wave-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 11px;
  color: var(--ec);
}
.ent__wave-out {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: auto 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ebg);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--eh);
}
.ent__wave-out i { margin-top: 3px; color: var(--ec2); }
/* the middle phase is the build foundation, so it reads as the anchor */
.ent__wave--mid { border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 46px rgba(7, 21, 47, .08); }


/* ---------- 08. Technology enablers ---------- */
.ent__tech { padding: 120px 0; }
.ent__tech-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.ent__tech-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ent__tech-group {
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: border-color .35s ease, background .35s ease;
}
.ent__tech-group:hover { border-color: rgba(77, 163, 255, .35); background: rgba(77, 163, 255, .06); }
.ent__tech-group-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ec3);
  margin: 0 0 18px;
}
.ent__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ent__chips li {
  padding: 8px 15px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.ent__chips li:hover { transform: translateY(-3px); border-color: rgba(77, 163, 255, .5); color: #fff; }


/* ---------- 09. Governance & change management ---------- */
.ent__adopt { background: #fff; padding: 120px 0; }
.ent__adopt-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.ent__adopt-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 24px;
}
.ent__adopt-list { list-style: none; margin: 28px 0 0; padding: 0; }
.ent__adopt-list li { display: flex; align-items: flex-start; gap: 18px; }
.ent__adopt-list li + li { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--eb); }
.ent__adopt-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--ec);
  font-size: 18px;
}
.ent__adopt-list strong { display: block; font-size: 18px; font-weight: 600; color: var(--eh); margin-bottom: 6px; }
.ent__adopt-list span { display: block; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--et); }


/* ---------- 10. Metrics leaders track (bento dashboard) ----------
   Leaders read metrics off a dashboard of unevenly weighted tiles, not a
   row of identical cards, so the grid borrows that asymmetry: one
   headline tile, five standard tiles, one wide tile closing the board.
   Plain CSS grid auto-placement (row-major) resolves the layout from the
   span classes alone - no explicit grid-template-areas to keep in sync
   with markup order. */
.ent__measure { background: var(--ebg); padding: 120px 0; }
.ent__dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); gap: 22px; }
.ent__dash-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid var(--eb);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ent__dash-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ec), var(--ec2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.ent__dash-tile:hover { transform: translateY(-6px); border-color: rgba(0, 95, 204, .28); box-shadow: 0 22px 44px rgba(7, 21, 47, .1); }
.ent__dash-tile:hover::before { transform: scaleX(1); }
.ent__dash-tile--lg { grid-column: span 2; grid-row: span 2; justify-content: center; background: linear-gradient(155deg, #0b1e40, #142a52); border-color: transparent; }
.ent__dash-tile--lg::before { background: linear-gradient(90deg, var(--ec3), var(--ec2)); }
.ent__dash-tile--lg .ent__dash-ico { background: rgba(77, 163, 255, .16); color: var(--ec3); width: 54px; height: 54px; font-size: 21px; }
.ent__dash-tile--lg .ent__dash-title { color: #fff; font-size: 25px; }
.ent__dash-tile--lg .ent__dash-text { color: var(--emuted); font-size: 15.5px; }
.ent__dash-tile--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 22px; }
.ent__dash-tile--wide .ent__dash-ico { margin-bottom: 0; }
.ent__dash-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(128, 121, 248, .12);
  color: var(--ec2);
  font-size: 17px;
}
.ent__dash-title { font-size: 18px; font-weight: 600; color: var(--eh); margin: 0 0 10px; }
.ent__dash-text { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--et); margin: 0; }
.ent__dash-tile--wide .ent__dash-title,
.ent__dash-tile--wide .ent__dash-text { margin: 0; }
.ent__dash-tile--wide .ent__dash-title { margin-bottom: 6px; }


/* ---------- 11. Enterprise-grade controls ---------- */
.ent__govern { padding: 120px 0; }
.ent__govern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ent__govern-card {
  padding: 34px 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.ent__govern-card:hover { transform: translateY(-6px); border-color: rgba(77, 163, 255, .4); background: rgba(77, 163, 255, .07); }
.ent__govern-title { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 12px; }
.ent__govern-text { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--emuted); margin: 0; }


/* ---------- 12. Industries (scroll-snap rail) ----------
   A horizontally-scrolling, snap-aligned rail with arrow controls, not a
   static grid: eight sectors read like a shelf of folders you browse
   through. The only horizontally-scrolling component on this page (the
   hero marquee scrolls text, not cards). */
.ent__ind { background: #fff; padding: 120px 0; }
.ent__ind-rail-wrap { position: relative; padding: 0 40px; }
.ent__ind-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 6px 6px 26px;
  margin: 0 -6px;
  scrollbar-width: thin;
}
.ent__ind-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 270px;
  display: block;
  padding: 30px 26px;
  border-radius: 18px;
  border: 1px solid var(--eb);
  background: var(--ebg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.ent__ind-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .28); box-shadow: 0 22px 44px rgba(7, 21, 47, .1); }
.ent__ind-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--ec);
  font-size: 18px;
  transition: background .35s ease, color .35s ease;
}
.ent__ind-card:hover .ent__ind-ico { background: var(--ec); color: #fff; }
.ent__ind-title { font-size: 18px; font-weight: 600; color: var(--eh); margin: 0 0 10px; }
.ent__ind-text { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--et); margin: 0; }
@media (min-width: 992px) {
  /* Show exactly 4 cards per view on desktop instead of 4-and-a-sliver -
     card width tracks the rail's actual width rather than a fixed 270px. */
  .ent__ind-card { width: calc((100% - 3 * 22px) / 4); }
}
.ent__ind-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--eb);
  background: #fff;
  color: var(--ec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 14px 30px rgba(7, 21, 47, .12);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.ent__ind-nav:hover { background: var(--ec); color: #fff; }
.ent__ind-nav--prev { left: 0; }
.ent__ind-nav--next { right: 0; }
.ent__ind-more { margin-top: 44px; text-align: center; }


/* ---------- 13. Why 3Shadz ---------- */
.ent__why { background: var(--ebg); padding: 120px 0; }
.ent__why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.ent__why-actions { margin-top: 32px; }
.ent__why-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ent__why-list li { display: flex; align-items: flex-start; gap: 20px; }
.ent__why-list li + li { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--eb); }
.ent__why-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ec), var(--ec2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.ent__why-list strong { display: block; font-size: 19px; font-weight: 600; color: var(--eh); margin-bottom: 6px; }
.ent__why-list p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--et); }


/* ---------- 14. Connected capabilities (ghost-numeral index) ----------
   A large, faint numeral behind each entry, like a catalogue or
   spec-sheet index, instead of another icon-badge card - no other
   section on this page uses oversized watermark typography in place of
   an icon. */
.ent__connect { background: #fff; padding: 120px 0; }
.ent__extend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ent__extend-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-radius: 18px;
  border: 1px solid var(--eb);
  background: var(--ebg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.ent__extend-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .28); box-shadow: 0 22px 44px rgba(7, 21, 47, .1); }
.ent__extend-num {
  position: absolute;
  bottom: -18px;
  right: -4px;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  color: rgba(28, 30, 43, .06);
  pointer-events: none;
  transition: color .35s ease;
}
.ent__extend-card:hover .ent__extend-num { color: rgba(0, 95, 204, .1); }
.ent__extend-title { position: relative; font-size: 18px; font-weight: 600; color: var(--eh); margin: 0 0 10px; max-width: 88%; }
.ent__extend-text { position: relative; font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--et); margin: 0 0 18px; }
.ent__extend-card .ent__link { position: relative; margin-top: auto; font-size: 14px; }


/* ---------- 15. FAQ ---------- */
.ent__faq { background: var(--ebg); padding: 120px 0; }
.ent__faq-list { max-width: 960px; margin: 0 auto; }
.ent__faq-item {
  border-radius: 16px;
  border: 1px solid var(--eb);
  background: #fff;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ent__faq-item + .ent__faq-item { margin-top: 14px; }
.ent__faq-item.is-open { border-color: rgba(0, 95, 204, .32); box-shadow: 0 18px 40px rgba(7, 21, 47, .08); }
.ent__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--eh);
  cursor: pointer;
  transition: color .3s ease;
}
.ent__faq-q:hover { color: var(--ec); }
.ent__faq-q i {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--ec);
  font-size: 12px;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.ent__faq-item.is-open .ent__faq-q i { transform: rotate(45deg); background: var(--ec); color: #fff; }
/* same 0fr -> 1fr technique as the scope panels */
.ent__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.ent__faq-item.is-open .ent__faq-a { grid-template-rows: 1fr; }
.ent__faq-a > p { overflow: hidden; margin: 0; padding: 0 28px; font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--et); }
.ent__faq-item.is-open .ent__faq-a > p { padding-bottom: 26px; }


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .ent__hero-title { font-size: 48px; }
  .ent__page .ent__title { font-size: 38px; }
  .ent__extend-grid { grid-template-columns: repeat(3, 1fr); }
  .ent__track-card { padding: 22px 18px 18px; }
  .ent__deliver { grid-template-columns: 300px 1fr; }
}

@media (max-width: 1199px) {
  .ent__hero { padding: 170px 0 90px; }
  .ent__hero-title { font-size: 40px; }
  .ent__hero-grid,
  .ent__intro-grid,
  .ent__tech-grid,
  .ent__adopt-grid,
  .ent__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .ent__hero-figure { max-width: 560px; }
  .ent__intro-figure img,
  .ent__adopt-figure img { aspect-ratio: 16 / 9; }
  /* the offset span-placement only reads correctly across a full 7-column
     row, so it is dropped once the wall wraps to two equal columns */
  .ent__disc-wall { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .ent__disc-brick { grid-column: auto !important; }
  .ent__govern-grid { grid-template-columns: repeat(2, 1fr); }
  /* the spine only draws correctly across a single row, so it is
     dropped once the track wraps to more than one row */
  .ent__track { grid-template-columns: repeat(3, 1fr); gap: 34px 22px; }
  .ent__track::before { display: none; }
  .ent__layer { margin-right: 0 !important; }
  .ent__layers::before { left: 27px; }
  /* same collapse as the solutions-page showcase this pattern is based on:
     tabs become a horizontal scroller above a full-width panel */
  .ent__deliver { grid-template-columns: 1fr; gap: 22px; }
  .ent__deliver-tabs { flex-direction: row; overflow-x: auto; gap: 8px; }
  .ent__deliver-tab { flex: 0 0 auto; min-width: 220px; }
}

@media (max-width: 991px) {
  .ent__hero { padding: 150px 0 80px; }
  .ent__hero-title { font-size: 34px; }
  .ent__page .ent__title { font-size: 32px; }
  .ent__hero-lead { font-size: 17px; }
  .ent__intro,
  .ent__stack,
  .ent__pillars,
  .ent__ready,
  .ent__scope,
  .ent__waves,
  .ent__tech,
  .ent__adopt,
  .ent__measure,
  .ent__govern,
  .ent__ind,
  .ent__why,
  .ent__connect,
  .ent__faq { padding: 90px 0; }
  .ent__page .ent__head--center { margin-bottom: 44px; }
  .ent__extend-grid,
  .ent__tech-groups { grid-template-columns: repeat(2, 1fr); }
  .ent__wave-grid { grid-template-columns: 1fr; }
  .ent__wave:not(:last-child)::after { display: none; }
  .ent__track { grid-template-columns: repeat(2, 1fr); }
  .ent__intro-note { left: 16px; bottom: -24px; }
  .ent__hero-dash { grid-template-columns: repeat(2, 1fr); }
  .ent__dash-grid { grid-template-columns: repeat(2, 1fr); }
  .ent__deliver-panel { padding: 34px 30px 30px; }
}

@media (max-width: 767px) {
  .ent__hero { padding: 130px 0 64px; }
  .ent__hero-title { font-size: 28px; }
  .ent__page .ent__title { font-size: 26px; }
  .ent__page .ent__lead,
  .ent__hero-lead { font-size: 16px; }
  .ent__intro,
  .ent__stack,
  .ent__pillars,
  .ent__ready,
  .ent__scope,
  .ent__waves,
  .ent__tech,
  .ent__adopt,
  .ent__measure,
  .ent__govern,
  .ent__ind,
  .ent__why,
  .ent__connect,
  .ent__faq { padding: 70px 0; }
  .ent__hero-actions { gap: 12px; }
  .ent__page .ent__btn,
  .ent__page .ent__btn-outline { padding: 15px 24px; font-size: 15px; }
  .ent__hero-dash { grid-template-columns: 1fr; }
  .ent__layers::before { display: none; }
  .ent__layer { flex-direction: column; gap: 14px; padding: 24px 22px; }
  .ent__disc-wall,
  .ent__track,
  .ent__govern-grid,
  .ent__extend-grid,
  .ent__tech-groups { grid-template-columns: 1fr; }
  .ent__intro-note { position: static; max-width: none; margin-top: 18px; }
  .ent__wave-title { font-size: 26px; }
  /* touch scrolling replaces the arrow controls on narrow screens */
  .ent__ind-rail-wrap { padding: 0; }
  .ent__ind-nav { display: none; }
  .ent__ind-card { width: 240px; }
  .ent__deliver-panel { padding: 28px 24px 24px; }
  .ent__deliver-panel-title { font-size: 22px; }
  .ent__deliver-panel-list { grid-template-columns: 1fr; }
  .ent__dash-grid { grid-template-columns: 1fr; }
  .ent__dash-tile--lg,
  .ent__dash-tile--wide { grid-column: span 1; grid-row: span 1; }
  .ent__dash-tile--wide { flex-direction: column; }
  .ent__dash-tile--wide .ent__dash-ico { margin-bottom: 16px; }
  .ent__faq-q { font-size: 16px; padding: 20px 22px; }
  .ent__faq-a > p { padding: 0 22px; }
  .ent__faq-item.is-open .ent__faq-a > p { padding-bottom: 22px; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .ent__marquee-track { animation: none; }
  .ent__page * { transition-duration: .01ms !important; }
}

/* ============================================================
   STARTUP & PRODUCT ENGINEERING PAGE (spe__*)
   Scoped entirely to .spe__page (added on <main> of
   startup-product-engineering.html). Uses the same brand language as
   .soln__page / .ai__page / .csw__page / .final-cta: #005fcc primary,
   #8079f8 secondary, #07152F dark bands, #f6f7fc light bands, Kanit
   type - but the layout components (hero build-stack, comparison
   table, split solution rows, tabbed tech stack, connected process
   track, engagement cards) are unique to this page. Every keyframe
   here is prefixed speKf* so nothing collides with the theme.
   Nothing in this block leaks to other pages.
   ============================================================ */
.spe__page {
  --spc: #005fcc;
  --spc2: #8079f8;
  --spc3: #4da3ff;
  --sph: #1c1e2b;
  --spt: #6b7089;
  --spb: #e9eaf5;
  --spbg: #f6f7fc;
  --spdark: #07152F;
  --spmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.spe__page .spe__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--spc);
  margin-bottom: 18px;
}
.spe__page .spe__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--sph); margin: 0 0 20px; }
.spe__page .spe__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--sph); margin: 0 0 18px; }
.spe__page .spe__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--spt); margin: 0 0 16px; }
.spe__page .spe__text:last-child { margin-bottom: 0; }
.spe__page .spe__head { max-width: 860px; }
.spe__page .spe__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.spe__page .spe__dark { position: relative; overflow: hidden; background: var(--spdark); }
.spe__page .spe__dark > .container { position: relative; z-index: 1; }
.spe__page .spe__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(128, 121, 248, .26), transparent 64%);
}
.spe__page .spe__dark .spe__eyebrow { color: var(--spc3); }
.spe__page .spe__dark .spe__title { color: #fff; }
.spe__page .spe__dark .spe__lead { color: #dbe6f4; }
.spe__page .spe__dark .spe__text { color: var(--spmuted); }

.spe__page .spe__btn,
.spe__page .spe__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.spe__page .spe__btn { color: #fff; background: var(--spc); border: 2px solid var(--spc); }
.spe__page .spe__btn:hover { background: var(--spc2); border-color: var(--spc2); color: #fff; }
.spe__page .spe__btn-outline { color: var(--spc); border: 2px solid var(--spc); background: transparent; }
.spe__page .spe__btn-outline:hover { background: var(--spc); color: #fff; }
.spe__page .spe__dark .spe__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.spe__page .spe__dark .spe__btn-outline:hover { background: #fff; border-color: #fff; color: var(--spdark); }

/* Arrow link used at the foot of most cards and sections. */
.spe__page .spe__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--spc);
  transition: gap .3s ease, color .3s ease;
}
.spe__page .spe__link:hover { gap: 15px; color: var(--spc2); }
.spe__page .spe__dark .spe__link { color: var(--spc3); }
.spe__page .spe__dark .spe__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.spe__page .spe__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--spc);
  font-size: 20px;
  margin-bottom: 18px;
}
.spe__page .spe__dark .spe__ico { background: rgba(77, 163, 255, .14); color: var(--spc3); }


/* ---------- 01. Hero ---------- */
/* Opens straight under the solid dark header, so the hero carries the
   dark band itself. The blueprint grid overlay is the visual cue that
   separates this page from the AI hero. */
.spe__hero {
  position: relative;
  overflow: hidden;
  background: var(--spdark);
  padding: 200px 0 120px;
}
.spe__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 82% -8%, rgba(0, 95, 204, .38), transparent 60%),
              radial-gradient(720px 420px at 4% 104%, rgba(128, 121, 248, .28), transparent 62%);
}
/* Faint engineering-blueprint grid. */
.spe__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 25%, transparent 100%);
}
.spe__hero > .container { position: relative; z-index: 2; }
.spe__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.spe__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 26px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #dbe6f4;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.spe__hero-eyebrow i { font-size: 12px; color: var(--spc3); }
.spe__hero-title { font-size: 56px; line-height: 1.1; font-weight: 600; color: #fff; margin: 0 0 24px; }
.spe__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--spc3), var(--spc2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spe__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.spe__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--spmuted); margin: 0 0 16px; }
.spe__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

/* Three proof points under the CTAs, divided by hairlines. */
.spe__hero-stats {
  list-style: none;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.spe__hero-stats li { position: relative; padding-left: 20px; }
.spe__hero-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--spc3), var(--spc2));
}
.spe__hero-stats strong { display: block; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.2; }
.spe__hero-stats span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--spmuted); line-height: 1.5; }

.spe__hero-figure { position: relative; }
.spe__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.spe__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.spe__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Layer stack: reads top-down as the anatomy of a delivered solution. */
.spe__hero-stack {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.spe__hero-stack li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.spe__hero-stack li:hover {
  border-color: rgba(77, 163, 255, .5);
  background: rgba(0, 95, 204, .16);
  transform: translateX(6px);
}
.spe__hero-stack-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(77, 163, 255, .16);
  color: var(--spc3);
  font-size: 15px;
}
.spe__hero-stack strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.spe__hero-stack span { display: block; font-size: 13px; font-weight: 300; color: var(--spmuted); line-height: 1.5; }


/* ---------- Keyword marquee ---------- */
.spe__marquee {
  background: linear-gradient(90deg, var(--spc), var(--spc2));
  padding: 20px 0;
  overflow: hidden;
}
.spe__marquee-mask { overflow: hidden; }
.spe__marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: speKfMarquee 34s linear infinite;
}
.spe__marquee-track span {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .5px;
}
.spe__marquee-track i { font-size: 6px; color: rgba(255, 255, 255, .6); }
@keyframes speKfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ---------- 02. Introduction ---------- */
.spe__intro { padding: 120px 0; background: #fff; }
.spe__intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.spe__intro-figure { position: relative; }
.spe__intro-figure img {
  width: 100%;
  border-radius: 22px;
  display: block;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.spe__intro-badge {
  position: absolute;
  z-index: 2;
  right: -22px;
  bottom: -26px;
  max-width: 270px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--spdark);
  box-shadow: 0 24px 50px rgba(7, 21, 47, .28);
}
.spe__intro-badge strong { display: block; font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.spe__intro-badge span { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--spmuted); }


/* ---------- 03. Signals ---------- */
/* Audit-ledger layout: a bordered two-column list of rows with a
   watermark ordinal per row, not a grid of boxed cards. */
.spe__signal { padding: 120px 0; background: var(--spbg); }
.spe__signal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  counter-reset: spesignal;
  border-radius: 20px;
  overflow: hidden;
  border-top: 1px solid var(--spb);
  border-left: 1px solid var(--spb);
  background: var(--spb);
}
.spe__signal-item {
  counter-increment: spesignal;
  position: relative;
  padding: 32px 78px 32px 36px;
  background: #fff;
  border-right: 1px solid var(--spb);
  border-bottom: 1px solid var(--spb);
  overflow: hidden;
  transition: background .3s ease;
}
.spe__signal-item::before {
  content: counter(spesignal, decimal-leading-zero);
  position: absolute;
  right: 22px;
  top: 20px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 95, 204, .16);
  transition: -webkit-text-stroke-color .3s ease;
}
.spe__signal-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--spc3), var(--spc2));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.spe__signal-item:hover { background: var(--spbg); }
.spe__signal-item:hover::before { -webkit-text-stroke-color: rgba(0, 95, 204, .38); }
.spe__signal-item:hover::after { transform: scaleY(1); }
.spe__signal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: rgba(0, 95, 204, .1);
  color: var(--spc);
  font-size: 12px;
}
.spe__signal-item h3 { max-width: 90%; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--sph); margin: 0 0 10px; }
.spe__signal-item p { max-width: 94%; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--spt); margin: 0; }


/* ---------- 04. Custom vs off-the-shelf comparison ---------- */
.spe__compare { padding: 120px 0; }
.spe__compare-caption {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--spmuted);
}
.spe__flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.spe__flip {
  perspective: 1600px;
  min-height: 300px;
  cursor: pointer;
}
.spe__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  transition: transform .6s cubic-bezier(.4, .2, .2, 1);
  transform-style: preserve-3d;
}
.spe__flip.is-flipped .spe__flip-inner { transform: rotateY(180deg); }
.spe__flip-front,
.spe__flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
}
.spe__flip-front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 30px 26px;
  background: rgba(255, 255, 255, .04);
}
.spe__flip:hover .spe__flip-front,
.spe__flip:focus-visible .spe__flip-front { border-color: rgba(255, 255, 255, .28); }
.spe__flip-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--spc3);
}
.spe__flip-front .spe__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(77, 163, 255, .14);
  color: var(--spc3);
  font-size: 18px;
}
.spe__flip-front h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0; }
.spe__flip-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 300;
  color: var(--spmuted);
}
.spe__flip-cta i { color: var(--spc3); font-size: 12px; }
.spe__flip-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0c1f3f;
}
.spe__flip-side {
  flex: 1;
  padding: 18px 22px;
  overflow-y: auto;
}
.spe__flip-side:first-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.spe__flip-side--hl {
  background: rgba(0, 95, 204, .18);
  box-shadow: inset 3px 0 0 var(--spc3);
}
.spe__flip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--spmuted);
  margin-bottom: 8px;
}
.spe__flip-side--hl .spe__flip-label { color: #eaf2ff; }
.spe__flip-label i { color: var(--spc3); font-size: 12px; }
.spe__flip-side p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--spmuted);
  margin: 0;
}
.spe__flip-side--hl p { color: #eaf2ff; }
.spe__compare-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 860px;
  margin: 30px auto 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--spmuted);
  text-align: left;
}
.spe__compare-note i { color: var(--spc3); margin-top: 5px; }


/* ---------- 05. What we build ---------- */
.spe__sol { padding: 120px 0; background: #fff; }
.spe__sol-list { display: grid; gap: 22px; }
/* Split row: number + icon rail on the left, copy on the right. */
.spe__sol-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 34px;
  padding: 38px 40px;
  border-radius: 20px;
  border: 1px solid var(--spb);
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.spe__sol-row:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 95, 204, .32);
  box-shadow: 0 26px 52px rgba(28, 30, 43, .1);
}
.spe__sol-side { position: relative; }
.spe__sol-side::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--spb);
}
.spe__sol-num {
  display: block;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 95, 204, .35);
  margin-bottom: 18px;
}
.spe__sol-row:hover .spe__sol-num { -webkit-text-stroke-color: rgba(128, 121, 248, .6); }
.spe__sol-body h3 { font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--sph); margin: 0 0 12px; }
.spe__sol-tag { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--spc); margin: 0 0 16px; }
.spe__sol-body p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--spt); margin: 0 0 14px; }
.spe__sol-body .spe__link { margin-top: 6px; }


/* ---------- 06. Capabilities ---------- */
/* Bento mosaic: one 2x2 feature tile, one wide tile, four even tiles -
   an asymmetric grid instead of a repeat(4) card grid. */
.spe__cap { padding: 120px 0; background: var(--spbg); }

/* ---------- 07. Technology stack tabs ---------- */
.spe__tech { padding: 120px 0; }
.spe__tech-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}
.spe__tech-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #dbe6f4;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all .3s ease;
}
.spe__tech-tab i { font-size: 14px; color: var(--spc3); transition: color .3s ease; }
.spe__tech-tab:hover { border-color: rgba(77, 163, 255, .55); color: #fff; }
.spe__tech-tab.is-active { background: var(--spc); border-color: var(--spc); color: #fff; }
.spe__tech-tab.is-active i { color: #fff; }
.spe__tech-panels {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  padding: 40px;
}
.spe__tech-panel[hidden] { display: none; }
.spe__tech-panel.is-active { animation: speKfFade .45s ease both; }
.spe__tech-note { font-size: 16px; font-weight: 300; line-height: 1.7; color: #dbe6f4; margin: 0 0 26px; }
.spe__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.spe__chips li {
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #dbe6f4;
  font-size: 15px;
  font-weight: 300;
  transition: all .3s ease;
}
.spe__chips li:hover { border-color: rgba(77, 163, 255, .6); background: rgba(0, 95, 204, .2); color: #fff; }
.spe__tech-foot { text-align: center; margin-top: 44px; }
@keyframes speKfFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ---------- 08. Process ---------- */
.spe__proc { padding: 120px 0; background: #fff; }
/* 12-column track so 4 wide steps sit above 3 wider ones, connected by a rail. */
.spe__proc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 34px 24px;
}
.spe__proc-step { position: relative; grid-column: span 3; padding-top: 30px; }
.spe__proc-step:nth-child(n+5) { grid-column: span 4; }
.spe__proc-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: -24px;
  top: 5px;
  height: 2px;
  background: var(--spb);
}
.spe__proc-step:nth-child(4)::before,
.spe__proc-step:last-child::before { right: 0; }
.spe__proc-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--spc);
  transition: background .3s ease, transform .3s ease;
}
.spe__proc-step:hover::after { background: var(--spc); transform: scale(1.25); }
.spe__proc-num {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--spc);
  margin-bottom: 10px;
}
.spe__proc-step h3 { font-size: 21px; font-weight: 600; color: var(--sph); margin: 0 0 12px; }
.spe__proc-step p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--spt); margin: 0; }
.spe__proc-foot { margin-top: 54px; text-align: center; }


/* ---------- 09. Integration ---------- */
.spe__integrate { padding: 120px 0; background: var(--spbg); }
.spe__integrate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.spe__integrate-copy .spe__btn { margin-top: 18px; }
.spe__integrate-panel {
  padding: 40px;
  border-radius: 20px;
  background: var(--spdark);
  box-shadow: 0 30px 60px rgba(7, 21, 47, .22);
}
.spe__integrate-title { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 24px; }
.spe__integrate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.spe__integrate-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 15px;
  font-weight: 300;
  color: #dbe6f4;
  transition: all .3s ease;
}
.spe__integrate-list li:hover { background: rgba(0, 95, 204, .2); border-color: rgba(77, 163, 255, .45); }
.spe__integrate-list li > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(77, 163, 255, .16);
  color: var(--spc3);
  font-size: 13px;
}


/* ---------- 10. Quality, security & ownership ---------- */
/* Vertical spine timeline: a lit rail down the middle column with items
   alternating left/right, each pinned to the rail by a small node. */
.spe__trust { padding: 120px 0; }
.spe__trust-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.spe__trust-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(77, 163, 255, .55), transparent);
}
.spe__trust-item {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 30px 32px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  transition: all .3s ease;
}
.spe__trust-item:nth-child(odd) { grid-column: 1; justify-self: end; }
.spe__trust-item:nth-child(even) { grid-column: 2; justify-self: start; }
.spe__trust-item::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--spdark);
  border: 2px solid var(--spc3);
  transition: background .3s ease;
}
.spe__trust-item:nth-child(odd)::after { right: -37px; }
.spe__trust-item:nth-child(even)::after { left: -37px; }
.spe__trust-item:hover { border-color: rgba(77, 163, 255, .45); background: rgba(0, 95, 204, .14); }
.spe__trust-item:hover::after { background: var(--spc3); }
.spe__trust-item h3 { font-size: 20px; font-weight: 600; line-height: 1.35; color: #fff; margin: 0 0 12px; }
.spe__trust-item p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--spmuted); margin: 0; }
.spe__trust-foot { text-align: center; margin-top: 48px; }


/* ---------- 11. Engagement models ---------- */
/* Podium progression: stage 1 and 3 sit on a shared baseline, stage 2
   (most chosen) rises above it, with chevrons chaining the sequence -
   not an even 3-up card grid. */
.spe__engage { padding: 120px 0; background: #fff; }
.spe__engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: end; padding-top: 10px; }
.spe__engage-card {
  position: relative;
  padding: 38px 32px 40px;
  border-radius: 20px;
  border: 1px solid var(--spb);
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.spe__engage-card:not(:last-child)::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--spc3);
  opacity: .55;
}
.spe__engage-card:nth-child(1),
.spe__engage-card:nth-child(3) { transform: translateY(20px); }
.spe__engage-card:nth-child(1):hover,
.spe__engage-card:nth-child(3):hover { transform: translateY(14px); box-shadow: 0 26px 52px rgba(28, 30, 43, .12); border-color: rgba(0, 95, 204, .3); }
.spe__engage-stage {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--spc3);
}
.spe__engage-card--hl .spe__engage-stage { color: var(--spc3); }
/* Highlighted middle card sits slightly proud of the other two. */
.spe__engage-card--hl {
  background: var(--spdark);
  border-color: transparent;
  box-shadow: 0 30px 60px rgba(7, 21, 47, .28);
  transform: translateY(-14px) scale(1.03);
  z-index: 1;
}
.spe__engage-card--hl:hover { transform: translateY(-20px) scale(1.03); box-shadow: 0 36px 68px rgba(7, 21, 47, .32); }
.spe__engage-card--hl .spe__ico { background: rgba(77, 163, 255, .16); color: var(--spc3); }
/* specificity bumped so it beats the base .spe__engage-card h3 rule below */
.spe__engage-card.spe__engage-card--hl h3 { color: #fff; }
.spe__engage-card--hl .spe__engage-fit { color: var(--spc3); }
.spe__engage-card--hl .spe__engage-list li { color: var(--spmuted); }
.spe__engage-card--hl .spe__engage-list li::before { color: var(--spc3); }
.spe__engage-flag {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 7px 14px;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--spc), var(--spc2));
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.spe__engage-card h3 { font-size: 23px; font-weight: 600; color: var(--sph); margin: 0 0 12px; }
.spe__engage-fit { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--spc); margin: 0 0 22px; }
.spe__engage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.spe__engage-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--spt);
}
.spe__engage-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12px;
  color: var(--spc);
}
.spe__engage-foot { text-align: center; margin-top: 44px; }


/* ---------- 12. Industries ---------- */
/* Two counter-scrolling marquee rows of wide chips, not a static card
   grid - pauses on hover so the copy can still be read. */
.spe__ind { padding: 120px 0; background: var(--spbg); overflow: hidden; }
.spe__ind-track-wrap {
  display: grid;
  gap: 22px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.spe__ind-row { display: flex; gap: 22px; width: max-content; will-change: transform; }
.spe__ind-row--a { animation: speIndScrollL 36s linear infinite; }
.spe__ind-row--b { animation: speIndScrollR 36s linear infinite; }
.spe__ind-track-wrap:hover .spe__ind-row { animation-play-state: paused; }
@keyframes speIndScrollL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes speIndScrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.spe__ind-item {
  flex: 0 0 auto;
  width: 320px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--spb);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.spe__ind-item:hover { transform: translateY(-4px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 20px 40px rgba(28, 30, 43, .1); }
.spe__ind-item .spe__ico { margin-bottom: 0; flex: 0 0 auto; }
.spe__ind-copy { min-width: 0; }
.spe__ind-item h3 { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--sph); margin: 0 0 6px; }
.spe__ind-item p {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--spt);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spe__ind-foot { text-align: center; margin-top: 44px; }


/* ---------- 13. Why 3Shadz ---------- */
.spe__why { padding: 120px 0; background: #fff; }
.spe__why-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: start; }
.spe__why-figure { margin-top: 34px; }
.spe__why-figure img {
  width: 100%;
  border-radius: 20px;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.spe__why-list { display: grid; gap: 18px; }
.spe__why-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid var(--spb);
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.spe__why-item:hover { transform: translateX(6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 18px 38px rgba(28, 30, 43, .08); }
.spe__why-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--spc);
  font-size: 15px;
  font-weight: 600;
}
.spe__why-item h3 { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--sph); margin: 0 0 8px; }
.spe__why-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--spt); margin: 0; }


/* ---------- 14. Connected solutions ---------- */
/* A hub-and-spoke diagram: "See How It All Connects" sits at the center,
   with the five expansion solutions wired to it as surrounding nodes.
   Mobile/tablet fall back to a plain stacked list (no room to plot a wheel). */
.spe__connect { padding: 120px 0; background: var(--spbg); }
.spe__hub { position: relative; }

.spe__hub-lines { display: none; }

.spe__hub-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 34px 32px;
  margin-bottom: 24px;
  border-radius: 20px;
  background: linear-gradient(120deg, var(--spdark), #0c2350);
  text-decoration: none;
  transition: box-shadow .3s ease;
}
.spe__hub-center:hover { box-shadow: 0 22px 44px rgba(7, 21, 47, .28); }
.spe__hub-center .spe__ico { width: 54px; height: 54px; font-size: 20px; background: rgba(77, 163, 255, .18); color: var(--spc3); margin-bottom: 4px; }
.spe__hub-center-title { font-size: 16px; font-weight: 600; color: #fff; }
.spe__hub-center-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--spc3); }

.spe__hub-node {
  position: relative;
  padding: 24px 26px 26px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--spb);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.spe__hub-node:hover { transform: translateY(-4px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 44px rgba(28, 30, 43, .1); }
.spe__hub-node h3 { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--sph); margin: 0 0 8px; }
.spe__hub-node p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--spt); margin: 0 0 14px; }
.spe__hub-node .spe__link { font-size: 13px; }

@media (min-width: 992px) {
  .spe__hub {
    width: min(860px, 94vw);
    aspect-ratio: 1;
    margin: 90px auto 0;
    overflow: visible;
  }
  .spe__hub-lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .spe__hub-lines line { stroke: rgba(0, 95, 204, .3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

  .spe__hub-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: clamp(190px, 21vw, 230px);
    height: clamp(190px, 21vw, 230px);
    padding: 20px;
    margin-bottom: 0;
    border-radius: 50%;
  }
  .spe__hub-center:hover { transform: translate(-50%, -50%) scale(1.04); }

  .spe__hub-node {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(220px, 24vw, 260px);
    aspect-ratio: 1;
    padding: 34px 28px;
    margin-bottom: 0;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    transform: translate(-50%, -50%);
  }
  .spe__hub-node:hover { transform: translate(-50%, -50%) translateY(-4px); }
  .spe__hub-node .spe__ico { margin-left: auto; margin-right: auto; }
  .spe__hub-node h3 { font-size: 16px; }
  .spe__hub-node p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .spe__hub-node .spe__link { justify-content: center; }

  .spe__hub-node--1 { left: 50%; top: 14%; }
  .spe__hub-node--2 { left: 84.2%; top: 38.9%; }
  .spe__hub-node--3 { left: 71.2%; top: 79.1%; }
  .spe__hub-node--4 { left: 28.8%; top: 79.1%; }
  .spe__hub-node--5 { left: 15.8%; top: 38.9%; }
}


/* ---------- 15. FAQ ---------- */
.spe__faq { padding: 120px 0; background: #fff; }
.spe__faq-list { max-width: 940px; margin: 0 auto; display: grid; gap: 14px; }
.spe__faq-item {
  border-radius: 16px;
  border: 1px solid var(--spb);
  background: #fff;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.spe__faq-item.is-open { border-color: rgba(0, 95, 204, .35); box-shadow: 0 18px 40px rgba(28, 30, 43, .08); }
.spe__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sph);
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
}
.spe__faq-q:hover { color: var(--spc); }
.spe__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--spc);
  font-size: 12px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.spe__faq-item.is-open .spe__faq-icon { transform: rotate(45deg); background: var(--spc); color: #fff; }
/* grid-template-rows animates cleanly without measuring the content height */
.spe__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.spe__faq-item.is-open .spe__faq-a { grid-template-rows: 1fr; }
.spe__faq-a > div { overflow: hidden; }
.spe__faq-a p {
  padding: 0 28px 26px;
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--spt);
}


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .spe__hero-title { font-size: 48px; }
  .spe__page .spe__title { font-size: 38px; }
}

@media (max-width: 1199px) {
  .spe__hero { padding: 170px 0 100px; }
  .spe__hero-grid,
  .spe__intro-grid,
  .spe__integrate-grid,
  .spe__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .spe__hero-title { font-size: 42px; }
  .spe__hero-frame { aspect-ratio: 16 / 9; }
  .spe__intro-badge { right: 16px; bottom: -20px; }
  .spe__signal-grid { grid-template-columns: 1fr; }
  .spe__signal-item { border-right: 0; }
  .spe__trust-grid { grid-template-columns: 1fr; max-width: 640px; padding-left: 34px; column-gap: 0; }
  .spe__trust-grid::before { left: 0; }
  .spe__trust-item,
  .spe__trust-item:nth-child(odd),
  .spe__trust-item:nth-child(even) { grid-column: 1; justify-self: stretch; max-width: none; }
  .spe__trust-item:nth-child(odd)::after,
  .spe__trust-item:nth-child(even)::after { left: -34px; right: auto; }
  .spe__engage-card:nth-child(1),
  .spe__engage-card:nth-child(3) { transform: none; }
  .spe__engage-card:nth-child(1):hover,
  .spe__engage-card:nth-child(3):hover { transform: translateY(-6px); }
  .spe__engage-card--hl,
  .spe__engage-card--hl:hover { transform: none; }
  .spe__engage-card:not(:last-child)::before { display: none; }
  .spe__proc-step,
  .spe__proc-step:nth-child(n+5) { grid-column: span 6; }
  .spe__proc-step:nth-child(2n)::before { right: 0; }
  .spe__tech-panels { padding: 32px 26px; }
}

@media (max-width: 991px) {
  .spe__hero { padding: 150px 0 90px; }
  .spe__hero-title { font-size: 36px; }
  .spe__page .spe__title { font-size: 32px; }
  .spe__hero-lead { font-size: 17px; }
  .spe__intro,
  .spe__signal,
  .spe__compare,
  .spe__sol,
  .spe__cap,
  .spe__tech,
  .spe__proc,
  .spe__integrate,
  .spe__trust,
  .spe__engage,
  .spe__ind,
  .spe__why,
  .spe__connect,
  .spe__faq { padding: 90px 0; }
  .spe__page .spe__head--center { margin-bottom: 44px; }
  .spe__engage-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 20px; }
  .spe__engage-card:not(:last-child)::before { display: none; }
  .spe__ind-item { width: 260px; }
  .spe__sol-row { grid-template-columns: 1fr; gap: 20px; padding: 32px 28px; }
  .spe__sol-side { display: flex; align-items: center; gap: 20px; }
  .spe__sol-side::after { display: none; }
  .spe__sol-num { margin-bottom: 0; }
  .spe__sol-side .spe__ico { margin-bottom: 0; }
  .spe__integrate-panel { padding: 32px 26px; }
}

@media (max-width: 767px) {
  .spe__hero { padding: 130px 0 70px; }
  .spe__hero-title { font-size: 30px; }
  .spe__page .spe__title { font-size: 27px; }
  .spe__page .spe__lead,
  .spe__hero-lead { font-size: 16px; }
  .spe__intro,
  .spe__signal,
  .spe__compare,
  .spe__sol,
  .spe__cap,
  .spe__tech,
  .spe__proc,
  .spe__integrate,
  .spe__trust,
  .spe__engage,
  .spe__ind,
  .spe__why,
  .spe__connect,
  .spe__faq { padding: 70px 0; }
  .spe__hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .spe__hero-actions { gap: 12px; }
  .spe__page .spe__btn,
  .spe__page .spe__btn-outline { padding: 15px 26px; font-size: 15px; }
  .spe__signal-item { padding: 28px 60px 28px 24px; }
  .spe__signal-item::before { font-size: 32px; right: 16px; top: 16px; }
  .spe__engage-card { padding: 32px 26px 34px; }
  .spe__ind-item { width: 240px; padding: 18px 20px; }
  .spe__proc-step,
  .spe__proc-step:nth-child(n+5) { grid-column: span 12; }
  .spe__proc-step::before { right: 0; }
  .spe__sol-num { font-size: 42px; }
  .spe__sol-body h3 { font-size: 22px; }
  .spe__intro-badge { position: static; max-width: none; margin-top: 18px; }
  .spe__compare-note { flex-direction: column; gap: 8px; }
  .spe__faq-q { font-size: 16px; padding: 20px 22px; }
  .spe__faq-a p { padding: 0 22px 22px; }
  .spe__tech-tab { padding: 12px 18px; font-size: 14px; }
  .spe__marquee-track span { font-size: 15px; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .spe__marquee-track,
  .spe__ind-row,
  .spe__tech-panel.is-active { animation: none; }
  .spe__page * { transition-duration: .01ms !important; }
}



/* ============================================================
   CLOUD & DATA SOLUTIONS PAGE (cds__*)
   Scoped entirely to .cds__page (added on <main> of
   cloud-data-solutions.html). Keeps the site's brand language -
   #005fcc primary, #07152F dark bands, #f6f7fc-family light bands,
   Kanit type - but swaps the purple secondary the AI/CSW/ENT/SPE
   pages share for a cyan/sky "cloud" accent, so the page reads as
   its own thing at a glance. The signature component is the
   horizontal cds__pipeline rail (Ingest -> Store -> Process ->
   Analyze -> Act) - no other solutions page uses a connected
   left-to-right stage rail. Every keyframe is prefixed cdsKf* so
   nothing collides with the theme. Nothing in this block leaks to
   other pages.
   ============================================================ */
.cds__page {
  --dc: #005fcc;
  --dc2: #06b6d4;
  --dc3: #38bdf8;
  --dh: #1c1e2b;
  --dt: #6b7089;
  --db: #e4edf5;
  --dbg: #f3f8fb;
  --ddark: #07152F;
  --dmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.cds__page .cds__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--dc);
  margin-bottom: 18px;
}
.cds__page .cds__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--dh); margin: 0 0 20px; }
.cds__page .cds__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dh); margin: 0 0 18px; }
.cds__page .cds__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dt); margin: 0 0 16px; }
.cds__page .cds__text:last-child { margin-bottom: 0; }
.cds__page .cds__head { max-width: 840px; }
.cds__page .cds__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 58px; }

.cds__page .cds__dark { position: relative; overflow: hidden; background: var(--ddark); }
.cds__page .cds__dark > .container { position: relative; z-index: 1; }
.cds__page .cds__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .34), transparent 62%),
              radial-gradient(760px 420px at 4% 108%, rgba(6, 182, 212, .28), transparent 64%);
}
.cds__page .cds__dark .cds__eyebrow { color: var(--dc3); }
.cds__page .cds__dark .cds__title { color: #fff; }
.cds__page .cds__dark .cds__lead { color: #dbeef4; }
.cds__page .cds__dark .cds__text { color: var(--dmuted); }

.cds__page .cds__btn,
.cds__page .cds__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cds__page .cds__btn { color: #fff; background: var(--dc); border: 2px solid var(--dc); }
.cds__page .cds__btn:hover { background: var(--dc2); border-color: var(--dc2); color: #fff; }
.cds__page .cds__btn-outline { color: var(--dc); border: 2px solid var(--dc); background: transparent; }
.cds__page .cds__btn-outline:hover { background: var(--dc); color: #fff; }
.cds__page .cds__dark .cds__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.cds__page .cds__dark .cds__btn-outline:hover { background: #fff; border-color: #fff; color: var(--ddark); }

.cds__page .cds__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dc);
  transition: gap .3s ease, color .3s ease;
}
.cds__page .cds__link:hover { gap: 15px; color: var(--dc2); }
.cds__page .cds__dark .cds__link { color: var(--dc3); }
.cds__page .cds__dark .cds__link:hover { color: #fff; }

.cds__page .cds__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--dc);
  font-size: 20px;
  margin-bottom: 18px;
}
.cds__page .cds__dark .cds__ico { background: rgba(56, 189, 248, .14); color: var(--dc3); }

/* ---------- 01. Hero ---------- */
.cds__hero {
  position: relative;
  overflow: hidden;
  background: var(--ddark);
  padding: 200px 0 120px;
}
.cds__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(780px 460px at 4% 108%, rgba(6, 182, 212, .30), transparent 64%);
}
.cds__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.cds__hero > .container { position: relative; z-index: 2; }
.cds__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.cds__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(56, 189, 248, .35);
  background: rgba(56, 189, 248, .1);
  color: var(--dc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.cds__hero-eyebrow i { font-size: 12px; }
.cds__hero-title { font-size: 56px; line-height: 1.1; font-weight: 600; color: #fff; margin: 0 0 24px; }
.cds__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--dc3), var(--dc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cds__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbeef4; margin: 0 0 20px; }
.cds__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dmuted); margin: 0 0 16px; }
.cds__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.cds__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cds__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe8f3;
  font-size: 13px;
  font-weight: 300;
}

.cds__hero-figure { position: relative; }
.cds__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(6, 182, 212, .45), rgba(56, 189, 248, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: cdsKfSpin 26s linear infinite;
}
.cds__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.cds__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cds__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: cdsKfFloat 6s ease-in-out infinite;
}
.cds__hero-chip i { color: var(--dc3); font-size: 18px; }
.cds__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.cds__hero-chip span { font-size: 13px; font-weight: 300; color: var(--dmuted); }
.cds__hero-chip--1 { left: -34px; top: 16%; }
.cds__hero-chip--2 { right: -28px; bottom: 14%; animation-delay: 3s; }
@keyframes cdsKfSpin { to { transform: rotate(360deg); } }
@keyframes cdsKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 01b. Keyword marquee ---------- */
.cds__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.cds__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cds__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: cdsKfMarquee 40s linear infinite; }
.cds__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.cds__marquee-track i { color: var(--dc3); font-size: 8px; }
@keyframes cdsKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 02. Introduction ---------- */
.cds__intro { padding: 130px 0; background: #fff; }
.cds__intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.cds__intro-figure {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(28, 30, 43, .13);
}
.cds__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cds__intro-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .16);
}
.cds__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--dh); line-height: 1.3; margin-bottom: 4px; }
.cds__intro-badge span { font-size: 14px; font-weight: 300; color: var(--dt); }

/* ---------- 03. Where cloud & data create value ---------- */
.cds__value { padding: 130px 0; background: var(--dbg); }
.cds__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.cds__value-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--db);
  border-radius: 16px;
  padding: 34px 30px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cds__value-item:hover { transform: translateY(-6px); border-color: rgba(6, 182, 212, .4); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.cds__value-item h3 { font-size: 20px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.cds__value-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0; }
.cds__value-num {
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(0, 95, 204, .28);
}

/* ---------- 04. Solutions grid (cloud + data pillars) ---------- */
.cds__sol { padding: 130px 0; background: #fff; }
.cds__sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 60px; }
.cds__sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--db);
  border-radius: 18px;
  padding: 34px 28px 32px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cds__sol-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dc2), var(--dc));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.cds__sol-card:hover { transform: translateY(-6px); border-color: rgba(0, 95, 204, .3); box-shadow: 0 26px 56px rgba(28, 30, 43, .1); }
.cds__sol-card:hover::before { transform: scaleX(1); }
.cds__sol-tagpill {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cds__sol-tagpill--cloud { color: var(--dc); background: rgba(0, 95, 204, .1); }
.cds__sol-tagpill--data { color: #0e8fa3; background: rgba(6, 182, 212, .12); }
.cds__sol-card h3 { font-size: 21px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.cds__sol-card p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dt); margin: 0 0 14px; }
.cds__sol-card .cds__link { margin-top: auto; padding-top: 6px; }

/* ---------- 05. Pipeline rail (signature component) ---------- */
/* A single connected left-to-right rail instead of stacked cards - this is
   the one visual that has no equivalent on the AI / CSW / ENT / SPE / DX
   pages, so the page reads as its own thing rather than a re-skin. */
.cds__pipeline { padding: 130px 0; background: var(--dbg); }
.cds__pipeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 64px;
}
.cds__pipeline-track::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 30px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(0, 95, 204, .35) 0 10px, transparent 10px 18px);
  z-index: 0;
}
.cds__pipeline-node { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.cds__pipeline-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dc);
  color: var(--dc);
  font-size: 22px;
  margin-bottom: 20px;
  box-shadow: 0 14px 30px rgba(0, 95, 204, .16);
  transition: all .35s ease;
}
.cds__pipeline-node:hover .cds__pipeline-ico { background: linear-gradient(135deg, var(--dc), var(--dc2)); border-color: transparent; color: #fff; transform: translateY(-4px); }
.cds__pipeline-num { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: rgba(0, 95, 204, .45); margin-bottom: 8px; }
.cds__pipeline-node h3 { font-size: 17px; font-weight: 600; color: var(--dh); margin: 0 0 8px; }
.cds__pipeline-node p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; }

/* ---------- 06. Legacy vs modern comparison (dark) ---------- */
.cds__compare-wrap { padding: 130px 0; }
.cds__compare-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; }
.cds__compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
.cds__compare-col { border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 28px 26px; background: rgba(255, 255, 255, .03); }
.cds__compare-col--new { background: rgba(6, 182, 212, .1); border-color: rgba(56, 189, 248, .4); box-shadow: 0 20px 46px rgba(0, 0, 0, .25); }
.cds__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dmuted);
  margin-bottom: 16px;
}
.cds__compare-col--new .cds__compare-tag { color: var(--dc3); }
.cds__compare-col ul { list-style: none; margin: 0; padding: 0; }
.cds__compare-col li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--dmuted);
}
.cds__compare-col li:last-child { margin-bottom: 0; }
.cds__compare-col li::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 4px;
  color: #6f83a0;
}
.cds__compare-col--new li { color: #eaf6fb; }
.cds__compare-col--new li::before { content: "\f00c"; color: var(--dc3); }
.cds__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dc), var(--dc2));
  color: #fff;
  font-size: 16px;
}

/* ---------- 07. Technology ecosystem (dark) — bento accent grid ---------- */
.cds__tech { padding: 130px 0; }
.cds__eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.cds__eco-card {
  position: relative;
  padding: 34px 26px 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  overflow: hidden;
  transition: transform .4s ease, border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.cds__eco-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--eco-a), transparent 85%);
}
.cds__eco-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--eco-a) 55%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: 0 26px 50px -20px color-mix(in srgb, var(--eco-a) 45%, transparent);
}
.cds__eco-card--sky { --eco-a: #38bdf8; }
.cds__eco-card--violet { --eco-a: #a78bfa; }
.cds__eco-card--emerald { --eco-a: #34d399; }
.cds__eco-card--amber { --eco-a: #fbbf24; }
.cds__eco-num {
  position: absolute;
  top: 6px;
  right: 18px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  letter-spacing: -.02em;
}
.cds__eco-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--eco-a) 30%, transparent), color-mix(in srgb, var(--eco-a) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--eco-a) 45%, transparent);
  color: var(--eco-a);
  font-size: 19px;
}
.cds__eco-card h3 { position: relative; z-index: 1; font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 18px; }
.cds__eco-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.cds__eco-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  font-weight: 300;
  color: #cfe1ee;
}
.cds__eco-list li:first-child { border-top: 0; }
.cds__eco-list li i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--eco-a) 20%, transparent);
  color: var(--eco-a);
  font-size: 8px;
}
@media only screen and (max-width: 1199px) {
  .cds__eco-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .cds__eco-grid { grid-template-columns: 1fr; }
  .cds__eco-num { font-size: 42px; }
}

/* ---------- 08. Security, governance & reliability ---------- */
.cds__sec { padding: 130px 0; background: #fff; }
.cds__sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.cds__sec-item {
  background: var(--dbg);
  border: 1px solid var(--db);
  border-radius: 16px;
  padding: 34px 30px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.cds__sec-item:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.cds__sec-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 95, 204, .25);
  background: rgba(0, 95, 204, .08);
  color: var(--dc);
  font-size: 20px;
  margin-bottom: 20px;
}
.cds__sec-item h3 { font-size: 20px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.cds__sec-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0; }

/* ---------- 09. Approach ---------- */
.cds__approach { padding: 130px 0; background: var(--dbg); }
.cds__steps { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px; margin-top: 60px; }
.cds__step {
  grid-column: span 3;
  position: relative;
  background: #fff;
  border: 1px solid var(--db);
  border-radius: 16px;
  padding: 30px 28px 32px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.cds__step:nth-child(n+5) { grid-column: span 4; }
.cds__step:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.cds__step::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--dc2), var(--dc));
  opacity: 0;
  transition: opacity .35s ease;
}
.cds__step:hover::after { opacity: 1; }
.cds__step-num { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 2px; color: var(--dc); margin-bottom: 14px; }
.cds__step h3 { font-size: 19px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.cds__step p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0; }

/* ---------- 10. Industries ---------- */
.cds__ind { padding: 130px 0; background: #fff; }
.cds__ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.cds__ind-card {
  display: block;
  padding: 30px 26px;
  background: var(--dbg);
  border: 1px solid var(--db);
  border-radius: 16px;
  transition: all .35s ease;
}
.cds__ind-card:hover { transform: translateY(-6px); border-color: var(--dc); background: #fff; box-shadow: 0 20px 44px rgba(0, 95, 204, .12); }
.cds__ind-card h3 { font-size: 18px; font-weight: 600; color: var(--dh); margin: 0 0 8px; }
.cds__ind-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; }
.cds__ind-card .cds__ico { width: 46px; height: 46px; font-size: 18px; background: rgba(0, 95, 204, .1); }
.cds__ind-cta { text-align: center; margin-top: 56px; }

/* ---------- 11. Use cases (dark, hover-reveal tiles) ---------- */
.cds__use { padding: 130px 0; }
.cds__prog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; margin-top: 56px; }
.cds__prog-card {
  position: relative;
  padding: 28px 24px 26px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid var(--prog-a);
  border-radius: 4px 14px 14px 4px;
  background: rgba(255, 255, 255, .035);
  transition: transform .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.cds__prog-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .07);
  border-color: color-mix(in srgb, var(--prog-a) 60%, transparent);
  box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--prog-a) 45%, transparent);
}
.cds__prog-card--sky { --prog-a: #38bdf8; }
.cds__prog-card--violet { --prog-a: #a78bfa; }
.cds__prog-card--emerald { --prog-a: #34d399; }
.cds__prog-card--amber { --prog-a: #fbbf24; }
.cds__prog-tag {
  display: inline-block;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--prog-a);
}
.cds__prog-card h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 10px; line-height: 1.35; }
.cds__prog-card p { font-size: 13.5px; font-weight: 300; line-height: 1.68; color: var(--dmuted); margin: 0; transition: color .4s ease; }
.cds__prog-card:hover p { color: #dbeef4; }
@media only screen and (max-width: 1199px) {
  .cds__prog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 575px) {
  .cds__prog-grid { grid-template-columns: 1fr; }
}

/* ---------- 12. Why 3Shadz ---------- */
.cds__why { padding: 130px 0; background: #fff; }
.cds__why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 56px; }
.cds__why-item {
  background: var(--dbg);
  border: 1px solid var(--db);
  border-radius: 16px;
  padding: 34px 30px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.cds__why-item:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.cds__why-item h3 { font-size: 20px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.cds__why-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0; }

/* ---------- 13. Connected solutions (bento with CTA tile) ---------- */
.cds__connect { padding: 130px 0; background: var(--dbg); }
.cds__web-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.cds__web-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--db);
  border-radius: 18px;
  padding: 34px 30px 28px;
  background: #fff;
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.cds__web-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dc), var(--dc2));
  opacity: 0;
  transition: opacity .4s ease;
}
.cds__web-card:hover { border-color: var(--dc); transform: translateY(-7px); box-shadow: 0 24px 48px rgba(0, 95, 204, .12); }
.cds__web-card:hover::before { opacity: 1; }
.cds__web-num {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--dt);
  opacity: .5;
}
.cds__web-card h3 { font-size: 19px; font-weight: 600; color: var(--dh); margin: 0 0 10px; padding-right: 40px; }
.cds__web-card p { font-size: 14.5px; font-weight: 300; line-height: 1.72; color: var(--dt); margin: 0 0 22px; }
.cds__web-card .cds__link { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--db); }
.cds__web-card--cta {
  border-color: transparent;
  background: linear-gradient(150deg, var(--dc), var(--dc2));
}
.cds__web-card--cta::before { display: none; }
.cds__web-card--cta:hover { transform: translateY(-7px); box-shadow: 0 24px 48px rgba(0, 95, 204, .3); }
.cds__web-card--cta .cds__web-num { color: #fff; opacity: .55; }
.cds__web-card--cta .cds__ico { background: rgba(255, 255, 255, .18); color: #fff; }
.cds__web-card--cta h3 { color: #fff; }
.cds__web-card--cta p { color: rgba(255, 255, 255, .8); }
.cds__web-card--cta .cds__link { color: #fff; border-top-color: rgba(255, 255, 255, .25); }
.cds__web-card--cta .cds__link:hover { color: #fff; }
@media only screen and (max-width: 991px) {
  .cds__web-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 575px) {
  .cds__web-grid { grid-template-columns: 1fr; }
}

/* ---------- 14. FAQ accordion ---------- */
.cds__faq { padding: 130px 0; background: #fff; }
.cds__faq-list { max-width: 980px; margin: 56px auto 0; display: grid; gap: 14px; }
.cds__faq-item { border: 1px solid var(--db); border-radius: 14px; background: var(--dbg); overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.cds__faq-item.is-open { border-color: var(--dc); background: #fff; box-shadow: 0 18px 40px rgba(0, 95, 204, .09); }
.cds__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dh);
  cursor: pointer;
  transition: color .3s ease;
}
.cds__faq-q:hover { color: var(--dc); }
.cds__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--dc);
  font-size: 13px;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.cds__faq-item.is-open .cds__faq-icon { transform: rotate(45deg); background: var(--dc); color: #fff; }
.cds__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.cds__faq-item.is-open .cds__faq-a { grid-template-rows: 1fr; }
.cds__faq-a > div { overflow: hidden; }
.cds__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--dt); margin: 0; padding: 0 28px 26px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cds__hero-glow,
  .cds__hero-chip,
  .cds__marquee-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cds__hero-title { font-size: 48px; }
}
@media only screen and (max-width: 1199px) {
  .cds__page .cds__title { font-size: 38px; }
  .cds__hero { padding: 170px 0 100px; }
  .cds__hero-title { font-size: 40px; }
  .cds__intro,
  .cds__value,
  .cds__sol,
  .cds__pipeline,
  .cds__compare-wrap,
  .cds__tech,
  .cds__sec,
  .cds__approach,
  .cds__ind,
  .cds__use,
  .cds__why,
  .cds__connect,
  .cds__faq { padding: 100px 0; }
  .cds__hero-grid,
  .cds__intro-grid,
  .cds__compare-grid { gap: 46px; }
  .cds__value-grid,
  .cds__sec-grid,
  .cds__why-grid { grid-template-columns: repeat(2, 1fr); }
  .cds__sol-grid,
  .cds__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .cds__steps { grid-template-columns: repeat(6, 1fr); }
  .cds__step,
  .cds__step:nth-child(n+5) { grid-column: span 2; }
  .cds__hero-chip--1 { left: -14px; }
  .cds__hero-chip--2 { right: -10px; }
  .cds__pipeline-track { grid-template-columns: repeat(3, 1fr); }
  .cds__pipeline-track::before { display: none; }
}
@media only screen and (max-width: 991px) {
  .cds__hero-grid,
  .cds__intro-grid,
  .cds__compare-grid { grid-template-columns: 1fr; gap: 44px; }
  .cds__intro-figure { max-width: 560px; }
  .cds__sol-grid { grid-template-columns: 1fr; }
  .cds__steps { grid-template-columns: repeat(4, 1fr); }
  .cds__compare { grid-template-columns: 1fr; }
  .cds__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .cds__pipeline-track { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media only screen and (max-width: 767px) {
  .cds__page .cds__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .cds__page .cds__title { font-size: 28px; }
  .cds__page .cds__lead { font-size: 17px; }
  .cds__page .cds__btn,
  .cds__page .cds__btn-outline { padding: 15px 26px; font-size: 15px; }
  .cds__hero { padding: 140px 0 80px; }
  .cds__hero-title { font-size: 30px; }
  .cds__hero-lead { font-size: 17px; }
  .cds__hero-chip { display: none; }
  .cds__intro,
  .cds__value,
  .cds__sol,
  .cds__pipeline,
  .cds__compare-wrap,
  .cds__tech,
  .cds__sec,
  .cds__approach,
  .cds__ind,
  .cds__use,
  .cds__why,
  .cds__connect,
  .cds__faq { padding: 80px 0; }
  .cds__value-grid,
  .cds__sol-grid,
  .cds__sec-grid,
  .cds__ind-grid,
  .cds__why-grid { grid-template-columns: 1fr; }
  .cds__sol-card { padding: 30px 24px 30px; }
  .cds__steps { grid-template-columns: 1fr; }
  .cds__step,
  .cds__step:nth-child(n+5) { grid-column: span 1; }
  .cds__faq-q { font-size: 16px; padding: 20px 22px; }
  .cds__faq-a p { padding: 0 22px 22px; }
  .cds__pipeline-track { grid-template-columns: 1fr; }
  .cds__pipeline-node { text-align: left; display: flex; align-items: center; gap: 16px; }
  .cds__pipeline-ico { margin-bottom: 0; flex: 0 0 auto; }
}

/* ============================================================
   SERVICES PAGE (svc__*)
   Scoped entirely to .svc__page (added on <main> of services.html).
   Same brand language as the rest of the site - #005fcc primary,
   #8079f8 secondary, #07152F dark bands, Kanit type - with a small
   7-color accent spectrum used only for the domain explorer, since
   this page organizes 33 services across 7 distinct domains and
   benefits from a quick visual way to tell them apart.
   ============================================================ */
.svc__page {
  --vc: #005fcc;
  --vc2: #8079f8;
  --vc3: #4da3ff;
  --vh: #1c1e2b;
  --vt: #6b7089;
  --vb: #e9eaf5;
  --vbg: #f6f7fc;
  --vdark: #07152F;
  --vmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.svc__page .svc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vc);
  margin-bottom: 18px;
}
.svc__page .svc__title { font-size: 44px; line-height: 1.18; font-weight: 600; color: var(--vh); margin: 0 0 20px; }
.svc__page .svc__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--vh); margin: 0 0 18px; }
.svc__page .svc__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--vt); margin: 0 0 16px; }
.svc__page .svc__text:last-child { margin-bottom: 0; }
.svc__page .svc__head { max-width: 820px; }
.svc__page .svc__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 58px; }

.svc__page .svc__dark { position: relative; overflow: hidden; background: var(--vdark); }
.svc__page .svc__dark > .container { position: relative; z-index: 1; }
.svc__page .svc__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(760px 420px at 4% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.svc__page .svc__dark .svc__eyebrow { color: var(--vc3); }
.svc__page .svc__dark .svc__title { color: #fff; }
.svc__page .svc__dark .svc__lead { color: #e6ecfa; }
.svc__page .svc__dark .svc__text { color: var(--vmuted); }

.svc__page .svc__btn,
.svc__page .svc__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.svc__page .svc__btn { color: #fff; background: var(--vc); border: 2px solid var(--vc); }
.svc__page .svc__btn:hover { background: var(--vc2); border-color: var(--vc2); color: #fff; }
.svc__page .svc__btn-outline { color: var(--vc); border: 2px solid var(--vc); background: transparent; }
.svc__page .svc__btn-outline:hover { background: var(--vc); color: #fff; }
.svc__page .svc__dark .svc__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.svc__page .svc__dark .svc__btn-outline:hover { background: #fff; border-color: #fff; color: var(--vdark); }

.svc__page .svc__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vc);
  transition: gap .3s ease, color .3s ease;
}
.svc__page .svc__link:hover { gap: 15px; color: var(--vc2); }
.svc__page .svc__dark .svc__link { color: var(--vc3); }
.svc__page .svc__dark .svc__link:hover { color: #fff; }

.svc__page .svc__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--vc);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}
.svc__page .svc__dark .svc__ico { background: rgba(77, 163, 255, .14); color: var(--vc3); }

/* ---------- 01. Page opener - "deck" hero ----------
   Bespoke to this page: a fanned hand-of-cards visual, not the plain
   .development__area list the sibling __dev hub pages (Industries,
   Technology) still share, and not Solutions' radial "orbit" diagram
   either. The seven service domains fan out as index cards pivoting from
   one bottom-center point, keyed to the same domain order/icons/accent
   colors as the .svc__explorer rail below (#005fcc/#8079f8/#06b6d4/
   #0ea5e9/#16a34a/#d97706/#f43f5e) so the hero reads as a preview of it.
   Sits on .svc__dark for the radial-gradient dark band + light text
   already defined above; only the layout/deck below is new. ---------- */
/* Same stray-ring fix as .soln__header on solutions.html - the theme's
   grid-menu button ring pokes out past the header. */
.svc__header .menu-icon-2::after { display: none; }

.svc__hero { padding: 168px 0 130px; }
.svc__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.svc__hero-copy, .svc__hero-visual { min-width: 0; }

.svc__hero-title { font-size: 46px; line-height: 1.16; color: #fff; }
.svc__hero-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 32px; }

.svc__hero-stats { display: flex; gap: 48px; margin-top: 46px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.svc__hero-stat strong { display: block; font-family: "Kanit", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #fff; line-height: 1; margin-bottom: 8px; }
.svc__hero-stat span { display: block; font-size: 12.5px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--vmuted); }

.svc__hero-visual { position: relative; height: 470px; }
.svc__deck { position: absolute; inset: 0; }
.svc__deck-card {
  position: absolute;
  left: 50%;
  bottom: 68px;
  width: 190px;
  height: 256px;
  margin-left: -95px;
  padding: 22px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform-origin: bottom center;
  transform: rotate(var(--r));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .45s ease, border-color .45s ease, box-shadow .45s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.svc__deck-card:hover,
.svc__deck-card:focus-visible {
  transform: rotate(var(--r)) translateY(-44px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 30px 55px rgba(3, 8, 20, .4);
  z-index: 20 !important;
}
.svc__deck-num { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--vmuted); }
.svc__deck-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: 14px;
  border-radius: 12px;
  color: #fff;
  font-size: 17px;
}
.svc__deck-card strong { display: block; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.35; margin-top: auto; padding-top: 14px; }
.svc__deck-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vc3);
  margin-top: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.svc__deck-card:hover .svc__deck-cta { opacity: 1; transform: translateY(0); }

.svc__deck-card:nth-child(1) { --r: -27deg; z-index: 1; }
.svc__deck-card:nth-child(2) { --r: -18deg; z-index: 2; }
.svc__deck-card:nth-child(3) { --r: -9deg; z-index: 3; }
.svc__deck-card:nth-child(4) { --r: 0deg; z-index: 4; }
.svc__deck-card:nth-child(5) { --r: 9deg; z-index: 5; }
.svc__deck-card:nth-child(6) { --r: 18deg; z-index: 6; }
.svc__deck-card:nth-child(7) { --r: 27deg; z-index: 7; }

.svc__deck-card:nth-child(1) .svc__deck-ico { background: #005fcc; }
.svc__deck-card:nth-child(2) .svc__deck-ico { background: #8079f8; }
.svc__deck-card:nth-child(3) .svc__deck-ico { background: #06b6d4; }
.svc__deck-card:nth-child(4) .svc__deck-ico { background: #0ea5e9; }
.svc__deck-card:nth-child(5) .svc__deck-ico { background: #16a34a; }
.svc__deck-card:nth-child(6) .svc__deck-ico { background: #d97706; }
.svc__deck-card:nth-child(7) .svc__deck-ico { background: #f43f5e; }

@media only screen and (max-width: 1199px) {
  .svc__hero-title { font-size: 38px; }
  .svc__deck-card { width: 168px; height: 230px; margin-left: -84px; }
}
@media only screen and (max-width: 991px) {
  .svc__hero { padding: 150px 0 90px; }
  .svc__hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .svc__hero-visual { height: auto; }
  .svc__deck { position: static; display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 18px; }
  .svc__deck-card {
    position: static;
    margin-left: 0;
    flex: 0 0 auto;
    width: 158px;
    height: auto;
    min-height: 190px;
    transform: none !important;
  }
  .svc__deck-card:hover { box-shadow: none; }
}
@media only screen and (max-width: 767px) {
  .svc__hero-title { font-size: 28px; }
  .svc__hero { padding: 140px 0 80px; }
  .svc__hero-stats { gap: 24px; flex-wrap: wrap; }
}

/* ---------- 02. Intro ---------- */
.svc__intro { padding: 130px 0; background: #fff; }
.svc__intro-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: stretch; }
.svc__intro-figure {
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(28, 30, 43, .13);
}
.svc__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media only screen and (max-width: 1199px) {
  .svc__intro-figure { height: auto; min-height: 420px; }
}
.svc__intro-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  right: 24px;
  z-index: 2;
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .16);
}
.svc__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--vh); line-height: 1.3; margin-bottom: 4px; }
.svc__intro-badge span { font-size: 14px; font-weight: 300; color: var(--vt); }

/* ---------- 03. Service Explorer ---------- */
.svc__explorer { padding: 130px 0; background: var(--vbg); }
.svc__explorer-shell { display: grid; grid-template-columns: 320px 1fr; gap: 40px; margin-top: 60px; align-items: flex-start; }
.svc__rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--vb);
  border-radius: 18px;
  padding: 14px;
  position: sticky;
  top: 110px;
}
.svc__domain-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.svc__domain-btn:hover { background: var(--vbg); }
.svc__domain-btn.active { background: var(--vbg); border-color: var(--vb); }
.svc__domain-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--vc);
}
/* domain accent spectrum - purely a visual index, brand color stays on every button/CTA */
.svc__rail .svc__domain-btn:nth-child(1) .svc__domain-num { background: #005fcc; }
.svc__rail .svc__domain-btn:nth-child(2) .svc__domain-num { background: #8079f8; }
.svc__rail .svc__domain-btn:nth-child(3) .svc__domain-num { background: #06b6d4; }
.svc__rail .svc__domain-btn:nth-child(4) .svc__domain-num { background: #38bdf8; }
.svc__rail .svc__domain-btn:nth-child(5) .svc__domain-num { background: #22c55e; }
.svc__rail .svc__domain-btn:nth-child(6) .svc__domain-num { background: #f59e0b; }
.svc__rail .svc__domain-btn:nth-child(7) .svc__domain-num { background: #f43f5e; }
.svc__domain-copy { display: flex; }
.svc__domain-copy strong { font-size: 15px; font-weight: 600; color: var(--vh); line-height: 1.35; }
.svc__domain-arrow { margin-left: auto; flex: 0 0 auto; color: var(--vt); font-size: 13px; transition: transform .25s ease, color .25s ease; }
.svc__domain-btn.active .svc__domain-arrow { color: var(--vc); transform: translateX(3px); }

.svc__panel { display: none; }
.svc__panel.active { display: block; animation: svc-fade .35s ease; }
@keyframes svc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.svc__panel-card { background: #fff; border: 1px solid var(--vb); border-radius: 18px; padding: 40px; }
.svc__panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.svc__panel-head h3 { font-size: 24px; font-weight: 600; color: var(--vh); margin: 0 0 10px; }
.svc__panel-head p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--vt); margin: 0; max-width: 620px; }
.svc__panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svc__svc-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--vb);
  border-radius: 14px;
  background: var(--vbg);
  transition: all .3s ease;
}
.svc__svc-card:hover { background: #fff; border-color: var(--vc); box-shadow: 0 16px 34px rgba(0, 95, 204, .1); transform: translateY(-3px); }
.svc__svc-card .svc__ico { width: 42px; height: 42px; font-size: 16px; margin-bottom: 0; }
/* service card icons pick up the same accent as their domain's rail number */
.svc__panel[data-domain-panel="d1"] .svc__svc-card .svc__ico { background: rgba(0, 95, 204, .12); color: #005fcc; }
.svc__panel[data-domain-panel="d2"] .svc__svc-card .svc__ico { background: rgba(128, 121, 248, .14); color: #8079f8; }
.svc__panel[data-domain-panel="d3"] .svc__svc-card .svc__ico { background: rgba(6, 182, 212, .12); color: #06b6d4; }
.svc__panel[data-domain-panel="d4"] .svc__svc-card .svc__ico { background: rgba(56, 189, 248, .14); color: #0ea5e9; }
.svc__panel[data-domain-panel="d5"] .svc__svc-card .svc__ico { background: rgba(34, 197, 94, .13); color: #16a34a; }
.svc__panel[data-domain-panel="d6"] .svc__svc-card .svc__ico { background: rgba(245, 158, 11, .14); color: #d97706; }
.svc__panel[data-domain-panel="d7"] .svc__svc-card .svc__ico { background: rgba(244, 63, 94, .13); color: #f43f5e; }
.svc__svc-card h4 { font-size: 15.5px; font-weight: 600; color: var(--vh); margin: 0 0 6px; }
.svc__svc-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--vt); margin: 0 0 10px; }
.svc__svc-card a { font-size: 13px; font-weight: 600; color: var(--vc); display: inline-flex; align-items: center; gap: 6px; }
.svc__svc-card a:hover { color: var(--vc2); gap: 10px; }

/* ---------- 04. Spotlight ----------
   Bespoke tile design: distinct from the explorer's tabbed domain rail
   above and the bento grid in .svc__why below. Each tile carries its own
   accent via inline --spot-a/--spot-a-bg/--spot-a-bd custom properties
   (keyed to the matching domain color from the explorer rail), a
   ghost-outline index number, and a top accent bar that fills in on
   hover. ---------- */
.svc__spotlight { padding: 130px 0; }
.svc__spot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.svc__spot-tile {
  --spot-a: var(--vc3);
  --spot-a-bg: rgba(77, 163, 255, .14);
  --spot-a-bd: rgba(77, 163, 255, .5);
  position: relative;
  padding: 34px 26px 30px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-color .45s ease, background .45s ease;
}
.svc__spot-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--spot-a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.svc__spot-tile:hover {
  background: rgba(255, 255, 255, .045);
  border-color: var(--spot-a-bd);
  transform: translateY(-8px);
}
.svc__spot-tile:hover::before { transform: scaleX(1); }

.svc__spot-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.svc__spot-num {
  font-family: "Kanit", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .22);
}
.svc__spot-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--spot-a-bg);
  color: var(--spot-a);
  font-size: 18px;
  flex: 0 0 auto;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.svc__spot-tile:hover .svc__spot-ico { transform: rotate(-8deg) scale(1.06); }

.svc__spot-cat {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--spot-a);
  margin-bottom: 14px;
}
.svc__spot-tile h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.svc__spot-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--vmuted); margin: 0 0 20px; }
.svc__spot-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #fff; transition: gap .3s ease, color .3s ease; }
.svc__spot-link i { font-size: 12px; transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.svc__spot-tile:hover .svc__spot-link { color: var(--spot-a); }
.svc__spot-tile:hover .svc__spot-link i { transform: translateX(4px); }

/* ---------- 05. Engagement models - connected "path" list ----------
   Deliberately not another card grid (Spotlight above and Connect below
   already use one) - these four models are really a spectrum of how much
   day-to-day ownership you keep vs. hand to us, so they read better as a
   numbered path with a connecting spine than as interchangeable cards. */
.svc__engage { padding: 130px 0; background: #fff; }
.svc__engage-path { position: relative; max-width: 900px; margin: 56px auto 0; }
.svc__engage-path::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 27px;
  width: 2px;
  background: var(--vb);
}
.svc__engage-step { position: relative; display: flex; align-items: flex-start; gap: 26px; padding: 28px 0; }
.svc__engage-step + .svc__engage-step { border-top: 1px solid var(--vb); }
.svc__engage-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--vb);
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--vc);
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.svc__engage-step:hover .svc__engage-num { background: var(--vc); border-color: var(--vc); color: #fff; }
.svc__engage-body { flex: 1; display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; min-width: 0; }
.svc__engage-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 95, 204, .1);
  color: var(--vc);
  font-size: 17px;
}
.svc__engage-copy { flex: 1 1 260px; min-width: 0; }
.svc__engage-copy h3 { font-size: 19px; font-weight: 600; color: var(--vh); margin: 0 0 8px; }
.svc__engage-copy p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--vt); margin: 0; max-width: 480px; }
.svc__engage-tag {
  flex: 0 0 auto;
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--vc);
  background: rgba(0, 95, 204, .08);
  border: 1px solid rgba(0, 95, 204, .18);
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
}

/* ---------- 06. Why 3Shadz (bento) ---------- */
.svc__why { padding: 130px 0; background: var(--vbg); }
.svc__why-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 24px; margin-top: 56px; }
.svc__why-tile {
  background: #fff;
  border: 1px solid var(--vb);
  border-radius: 18px;
  padding: 30px 28px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.svc__why-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.svc__why-tile.svc__why-tile--lg {
  grid-column: span 2;
  padding: 38px 36px;
  background: var(--vdark);
  border-color: transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc__why-tile.svc__why-tile--wide { grid-column: span 2; }
.svc__why-tile.svc__why-tile--lg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 260px at 100% 0%, rgba(0, 95, 204, .3), transparent 65%),
              radial-gradient(360px 240px at 0% 100%, rgba(128, 121, 248, .22), transparent 65%);
  pointer-events: none;
}
.svc__why-tile.svc__why-tile--lg > * { position: relative; z-index: 1; }
.svc__why-tile.svc__why-tile--lg .svc__ico { background: rgba(77, 163, 255, .16); color: var(--vc3); width: 56px; height: 56px; font-size: 22px; }
.svc__why-tile.svc__why-tile--lg h3 { font-size: 25px; color: #fff; margin: 0 0 12px; }
.svc__why-tile.svc__why-tile--lg p { color: var(--vmuted); font-size: 15.5px; line-height: 1.8; max-width: 420px; }
.svc__why-tile h3 { font-size: 17px; font-weight: 600; color: var(--vh); margin: 0 0 8px; }
.svc__why-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--vt); margin: 0; }

/* ---------- 07. Connect / cross-links - big link rows ----------
   Deliberately not another card grid - a stacked, editorial-style link
   list (distinct from Spotlight's cards above and Engagement's numbered
   path) where a colour wash and the icon animate in on hover. */
.svc__connect { padding: 130px 0; }
.svc__connect-list { margin-top: 56px; border-top: 1px solid rgba(255, 255, 255, .14); }
.svc__connect-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 30px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none;
  overflow: hidden;
}
.svc__connect-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 95, 204, .22), rgba(128, 121, 248, .08) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.svc__connect-row:hover::before { transform: scaleX(1); }
.svc__connect-index {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 34px;
  font-family: "Kanit", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--vmuted);
}
.svc__connect-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--vc3);
  font-size: 19px;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.svc__connect-row:hover .svc__connect-icon { background: var(--vc); border-color: var(--vc); color: #fff; }
.svc__connect-text { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.svc__connect-text strong { font-family: "Kanit", sans-serif; font-size: 23px; font-weight: 600; color: #fff; }
.svc__connect-text span { font-size: 14px; font-weight: 300; color: var(--vmuted); max-width: 620px; }
.svc__connect-arrow {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.svc__connect-row:hover .svc__connect-arrow { transform: translateX(6px); background: var(--vc); border-color: var(--vc); }

/* ---------- 08. FAQ ---------- */
.svc__faq { padding: 130px 0; background: #fff; }
.svc__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.svc__faq-item { border: 1px solid var(--vb); border-radius: 14px; background: var(--vbg); overflow: hidden; transition: border-color .3s ease; }
.svc__faq-item.is-open { border-color: var(--vc); }
.svc__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 22px 28px;
  background: transparent;
  border: none;
  font-size: 17px;
  font-weight: 500;
  color: var(--vh);
  cursor: pointer;
}
.svc__faq-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vb);
  color: var(--vc);
  font-size: 13px;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.svc__faq-item.is-open .svc__faq-icon { transform: rotate(45deg); background: var(--vc); color: #fff; }
.svc__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.svc__faq-item.is-open .svc__faq-a { grid-template-rows: 1fr; }
.svc__faq-a > div { overflow: hidden; }
.svc__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--vt); margin: 0; padding: 0 28px 26px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .svc__page .svc__title { font-size: 38px; }
  .svc__intro,
  .svc__explorer,
  .svc__spotlight,
  .svc__engage,
  .svc__why,
  .svc__connect,
  .svc__faq { padding: 100px 0; }
  .svc__intro-grid { grid-template-columns: 1fr; gap: 46px; }
  .svc__explorer-shell { grid-template-columns: 1fr; }
  .svc__rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .svc__domain-btn { flex: 1 1 46%; }
  .svc__spot-grid { grid-template-columns: repeat(2, 1fr); }
  .svc__why-bento { grid-template-columns: repeat(2, 1fr); }
  .svc__why-tile--lg,
  .svc__why-tile--wide { grid-column: span 2; }
  .svc__panel-grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 991px) {
  .svc__intro-figure { max-width: 560px; }
  .svc__domain-btn { flex: 1 1 100%; }
}
@media only screen and (max-width: 767px) {
  .svc__page .svc__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .svc__page .svc__title { font-size: 28px; }
  .svc__page .svc__lead { font-size: 17px; }
  .svc__page .svc__btn,
  .svc__page .svc__btn-outline { padding: 15px 26px; font-size: 15px; }
  .svc__intro,
  .svc__explorer,
  .svc__spotlight,
  .svc__engage,
  .svc__why,
  .svc__connect,
  .svc__faq { padding: 80px 0; }
  .svc__spot-grid,
  .svc__why-bento { grid-template-columns: 1fr; }
  .svc__why-tile--lg,
  .svc__why-tile--wide { grid-column: span 1; }
  .svc__panel-card { padding: 26px 22px; }
  .svc__faq-q { font-size: 16px; padding: 20px 22px; }
  .svc__faq-a p { padding: 0 22px 22px; }

  .svc__engage-path::before { left: 21px; }
  .svc__engage-num { width: 44px; height: 44px; font-size: 14px; }
  .svc__engage-body { flex-direction: column; gap: 10px; }
  .svc__engage-tag { align-self: flex-start; }

  .svc__connect-row { gap: 16px; padding: 22px 4px; }
  .svc__connect-index { display: none; }
  .svc__connect-icon { width: 42px; height: 42px; font-size: 15px; border-radius: 12px; }
  .svc__connect-text strong { font-size: 18px; }
  .svc__connect-text span { font-size: 12.5px; }
  .svc__connect-arrow { width: 38px; height: 38px; }
}

/* ============================================================
   AI & INTELLIGENT SOLUTIONS PAGE (aisol__*)
   Scoped entirely to .aisol__page (added on <main> of
   ai-intelligent-solutions.html). Reuses the brand language already
   established across the Solutions/Services pages: #005fcc primary,
   #8079f8 secondary, #07152F dark bands, Kanit type - but the hero is a
   deliberately different composition (a centered "AI console" module +
   an in-hero capability strip) rather than the copy/figure split every
   other Solutions hero uses, or the title/paragraph opener services.html
   uses. Every keyframe here is prefixed aisolKf* so nothing collides.
   Nothing in this block leaks to other pages.
   ============================================================ */
.aisol__page {
  --xc: #005fcc;
  --xc2: #8079f8;
  --xc3: #4da3ff;
  --xok: #35d0a0;
  --xh: #1c1e2b;
  --xt: #6b7089;
  --xb: #e9eaf5;
  --xbg: #f6f7fc;
  --xdark: #07152F;
  --xmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.aisol__page .aisol__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--xc);
  margin-bottom: 18px;
}
.aisol__page .aisol__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--xh); margin: 0 0 20px; }
.aisol__page .aisol__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--xh); margin: 0 0 18px; }
.aisol__page .aisol__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--xt); margin: 0 0 16px; }
.aisol__page .aisol__text:last-child { margin-bottom: 0; }
.aisol__page .aisol__head { max-width: 780px; }
.aisol__page .aisol__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.aisol__page .aisol__btn,
.aisol__page .aisol__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.aisol__page .aisol__btn { color: #fff; background: var(--xc); border: 2px solid var(--xc); }
.aisol__page .aisol__btn:hover { background: var(--xc2); border-color: var(--xc2); color: #fff; }
.aisol__page .aisol__btn-ghost { color: var(--xc); border: 2px solid var(--xc); background: transparent; }
.aisol__page .aisol__btn-ghost:hover { background: var(--xc); color: #fff; }

.aisol__page .aisol__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--xc);
  transition: gap .3s ease, color .3s ease;
}
.aisol__page .aisol__link:hover { gap: 15px; color: var(--xc2); }

.aisol__page .aisol__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 95, 204, .1);
  color: var(--xc);
  font-size: 21px;
  margin-bottom: 18px;
}

/* Reusable dark-band utility - shared by the hero, the value grid and the
   tech-stack strip so the three dark sections stay visually identical
   instead of three near-duplicate blocks. */
.aisol__page .aisol__dark { position: relative; overflow: hidden; background: var(--xdark); }
.aisol__page .aisol__dark > .container { position: relative; z-index: 2; }
.aisol__page .aisol__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 8% -12%, rgba(128, 121, 248, .30), transparent 62%),
              radial-gradient(820px 460px at 96% 108%, rgba(0, 95, 204, .32), transparent 64%);
}
.aisol__page .aisol__dark .aisol__eyebrow { color: var(--xc3); }
.aisol__page .aisol__dark .aisol__title { color: #fff; }
.aisol__page .aisol__dark .aisol__text { color: var(--xmuted); }
.aisol__page .aisol__dark .aisol__ico { background: rgba(77, 163, 255, .14); color: var(--xc3); }
.aisol__page .aisol__dark .aisol__link { color: var(--xc3); }
.aisol__page .aisol__dark .aisol__link:hover { color: #fff; }
.aisol__page .aisol__dark .aisol__btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .38); }
.aisol__page .aisol__dark .aisol__btn-ghost:hover { background: #fff; color: var(--xdark); }

/* ---------- 01. Hero: AI console ---------- */
.aisol__hero { padding: 190px 0 110px; text-align: center; }
.aisol__hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aisol__hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 520px at 50% 8%, #000, transparent 72%);
          mask-image: radial-gradient(760px 520px at 50% 8%, #000, transparent 72%);
}
.aisol__hero-orb { position: absolute; border-radius: 50%; filter: blur(74px); opacity: .5; animation: aisolKfDrift 11s ease-in-out infinite; }
.aisol__hero-orb--1 { width: 320px; height: 320px; background: var(--xc); top: -60px; left: 4%; }
.aisol__hero-orb--2 { width: 280px; height: 280px; background: var(--xc2); bottom: -40px; right: 6%; animation-delay: 2.2s; }
.aisol__hero-orb--3 { width: 200px; height: 200px; background: var(--xc3); top: 46%; right: 22%; animation-delay: 4.4s; }
@keyframes aisolKfDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(1.08); } }

.aisol__hero > .container { position: relative; z-index: 2; }
.aisol__hero-top { max-width: 760px; margin: 0 auto; }
.aisol__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--xc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.aisol__hero-badge i { font-size: 12px; }
.aisol__hero-title { font-size: 54px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.aisol__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--xc3), var(--xc2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aisol__hero-title em div div { background: linear-gradient(90deg, var(--xc3), var(--xc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aisol__hero-lead { font-size: 19px; font-weight: 300; line-height: 1.75; color: #dbe6f4; margin: 0 auto; max-width: 660px; }
.aisol__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 34px; }

/* Console module - the hero's visual centerpiece in place of a photo/figure. */
.aisol__console {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 60px auto 0;
  text-align: left;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(6, 14, 32, .82);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}
.aisol__console-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.aisol__console-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.aisol__console-bar em { margin-left: auto; font-style: normal; font-size: 12px; letter-spacing: 1px; color: var(--xmuted); }
.aisol__console-body {
  padding: 26px 26px 30px;
  min-height: 176px;
  font-family: "Courier New", Courier, monospace;
  font-size: 14.5px;
  line-height: 1.85;
  color: #cfe0f3;
}
.aisol__console-line { margin: 0 0 6px; white-space: pre-wrap; word-break: break-word; }
.aisol__console-prompt { color: var(--xc3); }
.aisol__console-out { color: var(--xmuted); }
.aisol__console-rec { color: var(--xok); }
.aisol__console-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--xc3);
  animation: aisolKfBlink 1s step-end infinite;
}
@keyframes aisolKfBlink { 50% { opacity: 0; } }

/* In-hero capability strip - doubles as the page's own contents nav. */
.aisol__strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin: 40px auto 0;
}
.aisol__strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  text-align: left;
  transition: all .3s ease;
}
.aisol__strip-item:hover { border-color: rgba(77, 163, 255, .5); background: rgba(0, 95, 204, .16); transform: translateY(-4px); }
.aisol__strip-num { font-size: 13px; font-weight: 600; color: var(--xc3); opacity: .85; }
.aisol__strip-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(128, 121, 248, .18);
  color: var(--xc2);
  font-size: 16px;
}
.aisol__strip-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aisol__strip-copy strong { font-size: 14.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.aisol__strip-copy em { font-style: normal; font-size: 12px; font-weight: 300; color: var(--xmuted); }

/* ---------- 02. Introduction ---------- */
.aisol__intro { padding: 130px 0; background: #fff; }
.aisol__intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.aisol__intro-media { display: flex; flex-direction: column; }
.aisol__intro-figure { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(28, 30, 43, .13); }
.aisol__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aisol__intro-badge {
  margin-top: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .16);
}
.aisol__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--xh); line-height: 1.3; margin-bottom: 4px; }
.aisol__intro-badge span { font-size: 14px; font-weight: 300; color: var(--xt); }
.aisol__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--xc);
  background: var(--xbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--xt);
}
.aisol__intro-note a { color: var(--xc); font-weight: 600; }
.aisol__intro-note a:hover { color: var(--xc2); }

/* ---------- 03. Capabilities (zig-zag rows) ---------- */
.aisol__caps { padding: 130px 0 90px; background: var(--xbg); }
.aisol__cap-row { display: flex; align-items: center; gap: 64px; padding: 56px 0; border-bottom: 1px solid var(--xb); }
.aisol__cap-row:first-of-type { padding-top: 0; }
.aisol__cap-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.aisol__cap-row:nth-of-type(even) { flex-direction: row-reverse; }
.aisol__cap-figure { position: relative; flex: 0 0 40%; max-width: 420px; }
.aisol__cap-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 30px 60px rgba(28, 30, 43, .14); }
.aisol__cap-num {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--xb);
  font-size: 19px;
  font-weight: 600;
  color: var(--xc);
  box-shadow: 0 14px 30px rgba(28, 30, 43, .12);
}
.aisol__cap-chip {
  position: absolute;
  bottom: -18px;
  right: -14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 240px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--xb);
  font-size: 13px;
  font-weight: 600;
  color: var(--xh);
  line-height: 1.4;
  box-shadow: 0 16px 34px rgba(28, 30, 43, .14);
}
.aisol__cap-chip i { color: var(--xc); }
.aisol__cap-body { flex: 1 1 50%; }
.aisol__cap-tag { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--xc2); margin-bottom: 10px; }
.aisol__cap-body h3 { font-size: 28px; font-weight: 600; color: var(--xh); margin: 0 0 14px; }
.aisol__cap-body p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--xt); margin: 0 0 20px; }
.aisol__cap-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.aisol__cap-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--xh); }
.aisol__cap-list i { color: var(--xok); margin-top: 4px; font-size: 12px; }

/* ---------- 04. How we work ---------- */
.aisol__process { padding: 130px 0; background: #fff; }
.aisol__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 60px; }
.aisol__steps::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--xb), var(--xc2), var(--xb));
  z-index: 0;
}
.aisol__step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
.aisol__step-num {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--xc2);
  color: var(--xc);
  font-size: 22px;
  font-weight: 600;
}
.aisol__step h3 { font-size: 19px; font-weight: 600; color: var(--xh); margin: 0 0 10px; }
.aisol__step p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--xt); margin: 0; }

/* ---------- 05. Why 3Shadz for AI ---------- */
.aisol__value { padding: 130px 0; }
.aisol__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aisol__value-item { padding: 32px 28px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); transition: all .35s ease; }
.aisol__value-item:hover { transform: translateY(-6px); border-color: rgba(77, 163, 255, .4); background: rgba(0, 95, 204, .14); }
.aisol__value-item h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.aisol__value-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--xmuted); margin: 0; }

/* ---------- 06. Tech stack ticker ---------- */
.aisol__tech { padding: 130px 0 100px; }
.aisol__tech-head { max-width: 640px; margin: 0 auto 50px; text-align: center; }
.aisol__tech-row { overflow: hidden; padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.aisol__tech-track { display: flex; align-items: center; gap: 42px; width: max-content; animation: aisolKfMarquee 32s linear infinite; }
.aisol__tech-row--rev .aisol__tech-track { animation-name: aisolKfMarqueeRev; animation-duration: 36s; }
.aisol__tech-track span { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #93a8c2; white-space: nowrap; }
.aisol__tech-track span i { color: var(--xc3); font-size: 8px; }
@keyframes aisolKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aisolKfMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- 07. FAQ ---------- */
.aisol__faq { padding: 130px 0; background: #fff; }
.aisol__faq-list { max-width: 860px; margin: 56px auto 0; }
.aisol__faq-item { border-bottom: 1px solid var(--xb); }
.aisol__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--xh);
  cursor: pointer;
}
.aisol__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--xb);
  color: var(--xc);
  font-size: 12px;
  transition: all .3s ease;
}
.aisol__faq-item.is-open .aisol__faq-q { color: var(--xc); }
.aisol__faq-item.is-open .aisol__faq-icon { background: var(--xc); border-color: var(--xc); color: #fff; transform: rotate(45deg); }
.aisol__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.aisol__faq-item.is-open .aisol__faq-a { max-height: 420px; }
.aisol__faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--xt); }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .aisol__page .aisol__title { font-size: 34px; }
  .aisol__hero-title { font-size: 42px; }
  .aisol__strip { grid-template-columns: repeat(2, 1fr); }
  .aisol__intro-grid { grid-template-columns: 1fr; gap: 46px; }
  .aisol__cap-row,
  .aisol__cap-row:nth-of-type(even) { flex-direction: column; }
  .aisol__cap-figure { max-width: 100%; }
  .aisol__cap-num { top: -18px; left: 18px; }
  .aisol__cap-chip { position: static; margin-top: 16px; max-width: none; }
  .aisol__steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .aisol__steps::before { display: none; }
  .aisol__value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .aisol__hero { padding: 150px 0 80px; }
  .aisol__hero-title { font-size: 32px; }
  .aisol__hero-lead { font-size: 17px; }
  .aisol__strip { grid-template-columns: 1fr; }
  .aisol__console-body { font-size: 13px; padding: 20px 18px 24px; }
  .aisol__intro,
  .aisol__caps,
  .aisol__process,
  .aisol__value,
  .aisol__tech,
  .aisol__faq { padding: 80px 0; }
  .aisol__cap-body h3 { font-size: 24px; }
  .aisol__steps { grid-template-columns: 1fr; }
  .aisol__value-grid { grid-template-columns: 1fr; }
  .aisol__faq-q { font-size: 16px; }
}

/* ============================================================
   AI CONSULTING PAGE (aic__*)
   Scoped entirely to .aic__page (added on <main> of
   ai-consulting.html). Shares the site's brand tokens - #005fcc
   primary, #8079f8 secondary, #07152F dark bands, Kanit type -
   with the same "keep the brand, change the composition" rule
   used on every Solutions/Services page, but built around a
   diagnostic/assessment idea instead of the console (aisol__),
   zig-zag rows, or domain-explorer (svc__) treatments used
   elsewhere: an animated "Opportunity Fit Score" gauge in the
   hero, a click-through AI maturity curve, and a vertical
   engagement-roadmap timeline. Every keyframe is prefixed
   aicKf* so nothing collides with other pages.
   ============================================================ */
.aic__page {
  --qc: #005fcc;
  --qc2: #8079f8;
  --qc3: #4da3ff;
  --qok: #35d0a0;
  --qh: #1c1e2b;
  --qt: #6b7089;
  --qb: #e9eaf5;
  --qbg: #f6f7fc;
  --qdark: #07152F;
  --qmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.aic__page .aic__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--qc);
  margin-bottom: 18px;
}
.aic__page .aic__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--qh); margin: 0 0 20px; }
.aic__page .aic__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--qh); margin: 0 0 18px; }
.aic__page .aic__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--qt); margin: 0 0 16px; }
.aic__page .aic__text:last-child { margin-bottom: 0; }
.aic__page .aic__head { max-width: 780px; }
.aic__page .aic__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.aic__page .aic__btn,
.aic__page .aic__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.aic__page .aic__btn { color: #fff; background: var(--qc); border: 2px solid var(--qc); }
.aic__page .aic__btn:hover { background: var(--qc2); border-color: var(--qc2); color: #fff; }
.aic__page .aic__btn-ghost { color: var(--qc); border: 2px solid var(--qc); background: transparent; }
.aic__page .aic__btn-ghost:hover { background: var(--qc); color: #fff; }

.aic__page .aic__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--qc);
  transition: gap .3s ease, color .3s ease;
}
.aic__page .aic__link:hover { gap: 15px; color: var(--qc2); }

.aic__page .aic__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(0, 95, 204, .1);
  color: var(--qc);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.aic__page .aic__dark { position: relative; overflow: hidden; background: var(--qdark); }
.aic__page .aic__dark > .container { position: relative; z-index: 2; }
.aic__page .aic__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.aic__page .aic__dark .aic__eyebrow { color: var(--qc3); }
.aic__page .aic__dark .aic__title { color: #fff; }
.aic__page .aic__dark .aic__text { color: var(--qmuted); }
.aic__page .aic__dark .aic__ico { background: rgba(77, 163, 255, .14); color: var(--qc3); }

/* ---------- 01. Hero: opportunity-fit scorecard ---------- */
.aic__hero { padding: 190px 0 120px; }
.aic__hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aic__hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(820px 560px at 18% 20%, #000, transparent 70%);
          mask-image: radial-gradient(820px 560px at 18% 20%, #000, transparent 70%);
}
.aic__hero-orb { position: absolute; border-radius: 50%; filter: blur(78px); opacity: .48; animation: aicKfDrift 12s ease-in-out infinite; }
.aic__hero-orb--1 { width: 300px; height: 300px; background: var(--qc); top: -40px; right: 8%; }
.aic__hero-orb--2 { width: 260px; height: 260px; background: var(--qc2); bottom: -60px; left: 4%; animation-delay: 2.4s; }
@keyframes aicKfDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.07); } }

.aic__hero > .container { position: relative; z-index: 2; }
.aic__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.aic__hero-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 100%;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--qc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.aic__hero-badge i { font-size: 12px; flex: 0 0 auto; }
.aic__hero-badge-text { min-width: 0; flex: 1 1 auto; }
.aic__hero-title { font-size: 50px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.aic__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--qc3), var(--qc2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aic__hero-title em div div { background: linear-gradient(90deg, var(--qc3), var(--qc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aic__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.8; color: #dbe6f4; margin: 0 0 34px; max-width: 540px; }
.aic__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }

.aic__hero-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.aic__hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  font-size: 13.5px;
  font-weight: 500;
  color: #dbe6f4;
  transition: all .3s ease;
}
.aic__hero-chip:hover { border-color: rgba(77, 163, 255, .5); background: rgba(77, 163, 255, .12); color: #fff; }
.aic__hero-chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(77, 163, 255, .18);
  color: var(--qc3);
  font-size: 11px;
  font-weight: 700;
}

/* Scorecard - the hero's visual centerpiece: an animated gauge instead of a
   photo/figure or terminal console. */
.aic__scorecard {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 20, 43, .78);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  padding: 34px 34px 28px;
}
.aic__scorecard-head { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 10px; margin-bottom: 6px; }
.aic__scorecard-head span { font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--qmuted); }
.aic__scorecard-head span:first-child { min-width: 0; flex: 1 1 auto; }
.aic__scorecard-tag { padding: 5px 12px; border-radius: 50px; background: rgba(53, 208, 160, .14); color: var(--qok); font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: none !important; }

.aic__gauge { position: relative; width: 200px; height: 200px; margin: 18px auto 6px; }
.aic__gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aic__gauge-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 12; }
.aic__gauge-fill {
  fill: none;
  stroke: var(--qc3);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 439.8;
  stroke-dashoffset: 79.16;
  transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1);
}
.aic__gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.aic__gauge-num { font-size: 46px; font-weight: 600; color: #fff; line-height: 1; }
.aic__gauge-suffix { font-size: 14px; font-weight: 400; color: var(--qmuted); margin-top: 2px; }
.aic__gauge-label { font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--qc3); margin-top: 8px; }

.aic__scorecard-stats { display: grid; gap: 10px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.aic__scorecard-stat { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13.5px; }
.aic__scorecard-stat span:first-child { color: var(--qmuted); font-weight: 300; min-width: 0; flex: 1 1 auto; }
.aic__scorecard-stat span:last-child { color: #fff; font-weight: 600; flex: 0 0 auto; }
.aic__scorecard-note { margin: 18px 0 0; font-size: 11.5px; font-weight: 300; line-height: 1.6; color: rgba(219, 230, 244, .55); text-align: center; }

/* ---------- 02. Intro ---------- */
.aic__intro { padding: 130px 0; background: #fff; }
.aic__intro-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: center; }
.aic__intro-figure { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px rgba(28, 30, 43, .13); }
.aic__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aic__intro-badge {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.aic__intro-badge strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.aic__intro-badge span { display: block; font-size: 12.5px; font-weight: 300; color: var(--qmuted); margin-top: 4px; }
.aic__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--qc);
  background: var(--qbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--qt);
}
.aic__intro-note a { color: var(--qc); font-weight: 600; }
.aic__intro-note a:hover { color: var(--qc2); }
.aic__intro-models { margin-top: 20px; font-size: 13px; font-weight: 400; color: var(--qt); }
.aic__intro-models b { color: var(--qh); font-weight: 600; }

/* ---------- 03. What's included (bento capability grid) ---------- */
.aic__included { padding: 130px 0; background: var(--qbg); overflow: hidden; }
.aic__cap-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; margin-top: 60px; }
.aic__cap-card {
  position: relative;
  grid-column: span 4;
  padding: 38px 30px 32px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--qb);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.aic__cap-card:nth-child(1) { grid-column: span 5; }
.aic__cap-card:nth-child(2) { grid-column: span 4; }
.aic__cap-card:nth-child(3) { grid-column: span 3; }
.aic__cap-card:nth-child(4) { grid-column: span 3; }
.aic__cap-card:nth-child(5) { grid-column: span 4; }
.aic__cap-card:nth-child(6) { grid-column: span 5; }
.aic__cap-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--qc), var(--qc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.aic__cap-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(15, 23, 42, .12);
  border-color: transparent;
}
.aic__cap-card:hover::before { transform: scaleX(1); }
.aic__cap-num {
  position: absolute;
  top: 10px;
  right: 24px;
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  color: var(--qh);
  opacity: .05;
  transition: opacity .4s ease, transform .4s ease;
}
.aic__cap-card:hover .aic__cap-num { opacity: .09; transform: translateY(-4px); }
.aic__cap-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 95, 204, .12), rgba(77, 163, 255, .12));
  color: var(--qc);
  font-size: 20px;
  margin-bottom: 20px;
  transition: transform .4s ease, background .4s ease, color .4s ease;
}
.aic__cap-card:hover .aic__cap-badge { transform: rotate(-6deg) scale(1.08); background: var(--qc); color: #fff; }
.aic__cap-card h3 { position: relative; z-index: 1; font-size: 19px; font-weight: 600; color: var(--qh); margin: 0 0 10px; max-width: 34ch; }
.aic__cap-card p { position: relative; z-index: 1; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--qt); margin: 0 0 20px; }
.aic__cap-tags { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aic__cap-tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 50px;
  background: var(--qbg);
  border: 1px solid var(--qb);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--qh);
  transition: background .3s ease, border-color .3s ease;
}
.aic__cap-tags i { color: var(--qok); font-size: 9px; }
.aic__cap-card:hover .aic__cap-tags li { border-color: rgba(0, 95, 204, .25); background: rgba(0, 95, 204, .06); }

/* ---------- 04. AI maturity model ---------- */
.aic__maturity { padding: 130px 0; background: #fff; }
.aic__mat-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 56px 0 8px; position: relative; }
.aic__mat-track::before { content: ""; position: absolute; top: 25px; left: 6%; right: 6%; height: 2px; background: var(--qb); z-index: 0; }
.aic__mat-tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.aic__mat-tab-num {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--qb);
  color: var(--qt);
  font-size: 16px;
  font-weight: 600;
  transition: all .3s ease;
}
.aic__mat-tab-label { font-size: 14.5px; font-weight: 600; color: var(--qt); transition: color .3s ease; }
.aic__mat-tab.active .aic__mat-tab-num { background: var(--qc); border-color: var(--qc); color: #fff; }
.aic__mat-tab.active .aic__mat-tab-label { color: var(--qc); }
.aic__mat-tab:hover .aic__mat-tab-num { border-color: var(--qc2); }

.aic__mat-panels { max-width: 760px; margin: 44px auto 0; text-align: center; }
.aic__mat-panel { display: none; }
.aic__mat-panel.active { display: block; animation: aicKfFade .4s ease; }
@keyframes aicKfFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.aic__mat-panel span { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--qc2); margin-bottom: 10px; }
.aic__mat-panel h3 { font-size: 25px; font-weight: 600; color: var(--qh); margin: 0 0 12px; }
.aic__mat-panel p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--qt); margin: 0; }

/* ---------- 05. Engagement roadmap (vertical timeline) ---------- */
.aic__roadmap { padding: 130px 0; background: var(--qbg); }
.aic__road-list { max-width: 820px; margin: 56px auto 0; position: relative; }
.aic__road-list::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 27px; width: 2px; background: var(--qb); }
.aic__road-item { position: relative; display: flex; gap: 26px; padding-bottom: 44px; }
.aic__road-item:last-child { padding-bottom: 0; }
.aic__road-marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--qc);
  color: var(--qc);
  font-size: 18px;
  font-weight: 600;
}
.aic__road-body { padding-top: 8px; }
.aic__road-tag { display: inline-block; padding: 4px 12px; border-radius: 50px; background: rgba(0, 95, 204, .1); color: var(--qc); font-size: 12px; font-weight: 600; letter-spacing: .5px; margin-bottom: 10px; }
.aic__road-body h3 { font-size: 19.5px; font-weight: 600; color: var(--qh); margin: 0 0 8px; }
.aic__road-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--qt); margin: 0; }

/* ---------- 06. Engagement models ---------- */
.aic__models { padding: 130px 0; background: #fff; }
.aic__model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; align-items: stretch; }
.aic__model-card {
  display: flex;
  flex-direction: column;
  padding: 36px 30px;
  border-radius: 20px;
  border: 1px solid var(--qb);
  background: var(--qbg);
  transition: all .35s ease;
}
.aic__model-card.is-featured { background: var(--qdark); border-color: var(--qdark); position: relative; transform: translateY(-10px); }
.aic__model-card:hover { transform: translateY(-14px); }
.aic__model-card.is-featured:hover { transform: translateY(-18px); }
.aic__model-flag {
  position: absolute;
  top: -13px;
  left: 30px;
  padding: 5px 14px;
  border-radius: 50px;
  background: var(--qc3);
  color: var(--qdark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.aic__model-duration { font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--qc); margin-bottom: 12px; }
.aic__model-card.is-featured .aic__model-duration { color: var(--qc3); }
.aic__model-card h3 { font-size: 22px; font-weight: 600; color: var(--qh); margin: 0 0 10px; }
.aic__model-card.is-featured h3 { color: #fff; }
.aic__model-audience { font-size: 13.5px; font-weight: 400; color: var(--qt); margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--qb); }
.aic__model-card.is-featured .aic__model-audience { color: var(--qmuted); border-color: rgba(255, 255, 255, .12); }
.aic__model-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; }
.aic__model-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 400; color: var(--qh); }
.aic__model-card.is-featured .aic__model-list li { color: #e6ecfa; }
.aic__model-list i { color: var(--qok); margin-top: 4px; font-size: 11px; }
.aic__model-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 600;
  border: 2px solid var(--qc);
  color: var(--qc);
  transition: all .3s ease;
}
.aic__model-cta:hover { background: var(--qc); color: #fff; }
.aic__model-card.is-featured .aic__model-cta { border-color: var(--qc3); color: var(--qc3); }
.aic__model-card.is-featured .aic__model-cta:hover { background: var(--qc3); color: var(--qdark); }

/* ---------- 07. Why 3Shadz ---------- */
.aic__why { padding: 130px 0; }
.aic__why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aic__why-item { padding: 32px 28px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); transition: all .35s ease; }
.aic__why-item:hover { transform: translateY(-6px); border-color: rgba(77, 163, 255, .4); background: rgba(0, 95, 204, .14); }
.aic__why-item h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.aic__why-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--qmuted); margin: 0; }

/* ---------- 08. FAQ ---------- */
.aic__faq { padding: 130px 0; background: var(--qbg); }
.aic__faq-list { max-width: 860px; margin: 56px auto 0; }
.aic__faq-item { border-bottom: 1px solid var(--qb); }
.aic__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--qh);
  cursor: pointer;
}
.aic__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--qb);
  color: var(--qc);
  font-size: 12px;
  transition: all .3s ease;
}
.aic__faq-item.is-open .aic__faq-q { color: var(--qc); }
.aic__faq-item.is-open .aic__faq-icon { background: var(--qc); border-color: var(--qc); color: #fff; transform: rotate(45deg); }
.aic__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.aic__faq-item.is-open .aic__faq-a { max-height: 420px; }
.aic__faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--qt); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .aic__hero-grid { grid-template-columns: 1fr; }
  .aic__scorecard { max-width: 460px; margin: 0 auto; }
}
@media only screen and (max-width: 1199px) {
  .aic__page .aic__title { font-size: 34px; }
  .aic__hero-title { font-size: 40px; }
  .aic__hero-grid { grid-template-columns: 1fr; }
  .aic__scorecard { max-width: 460px; margin: 0 auto; }
  .aic__intro-grid { grid-template-columns: 1fr; gap: 46px; }
  .aic__cap-grid .aic__cap-card { grid-column: span 6; }
  .aic__mat-track { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .aic__mat-track::before { display: none; }
  .aic__model-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .aic__model-card.is-featured { transform: none; }
  .aic__model-card.is-featured:hover { transform: translateY(-8px); }
  .aic__why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .aic__hero { padding: 150px 0 80px; }
  .aic__hero-title { font-size: 32px; }
  .aic__hero-lead { font-size: 17px; }
  .aic__hero-badge { font-size: 11.5px; letter-spacing: 1.2px; padding: 8px 14px; }
  .aic__scorecard { max-width: 100%; padding: 28px 22px 24px; }
  .aic__gauge { width: 170px; height: 170px; }
  .aic__gauge-num { font-size: 38px; }
  .aic__intro,
  .aic__included,
  .aic__maturity,
  .aic__roadmap,
  .aic__models,
  .aic__why,
  .aic__faq { padding: 80px 0; }
  .aic__cap-grid .aic__cap-card { grid-column: span 12; }
  .aic__cap-num { font-size: 46px; }
  .aic__mat-track { grid-template-columns: 1fr; }
  .aic__mat-tab { flex-direction: row; justify-content: flex-start; }
  .aic__why-grid { grid-template-columns: 1fr; }
  .aic__faq-q { font-size: 16px; }
  .aic__road-body h3 { font-size: 18px; }
}

/* ============================================================
   GENERATIVE AI SOLUTIONS PAGE (gai__*)
   Scoped entirely to .gai__page (added on <main> of
   generative-ai-solutions.html). Same brand tokens as the rest
   of the AI & Intelligent Solutions family - #005fcc primary,
   #8079f8 secondary, #07152F dark bands, Kanit type - but built
   around a "one prompt, many grounded outputs" idea instead of
   the console (aisol__), scorecard/gauge (aic__), or pipeline
   (cds__) treatments used elsewhere: a five-node "generation
   orbit" in the hero, a circular ground-engineer-generate-
   evaluate-refine loop, and a live raw-input/generated-output
   toggle demo. Every keyframe is prefixed gaiKf* so nothing
   collides with other pages.
   ============================================================ */
.gai__page {
  --gc: #005fcc;
  --gc2: #8079f8;
  --gc3: #4da3ff;
  --gok: #35d0a0;
  --gh: #1c1e2b;
  --gt: #6b7089;
  --gb: #e9eaf5;
  --gbg: #f6f7fc;
  --gdark: #07152F;
  --gmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.gai__page .gai__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gc);
  margin-bottom: 18px;
}
.gai__page .gai__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--gh); margin: 0 0 20px; }
.gai__page .gai__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--gh); margin: 0 0 18px; }
.gai__page .gai__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--gt); margin: 0 0 16px; }
.gai__page .gai__text:last-child { margin-bottom: 0; }
.gai__page .gai__head { max-width: 800px; }
.gai__page .gai__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.gai__page .gai__btn,
.gai__page .gai__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.gai__page .gai__btn { color: #fff; background: var(--gc); border: 2px solid var(--gc); }
.gai__page .gai__btn:hover { background: var(--gc2); border-color: var(--gc2); color: #fff; }
.gai__page .gai__btn-ghost { color: var(--gc); border: 2px solid var(--gc); background: transparent; }
.gai__page .gai__btn-ghost:hover { background: var(--gc); color: #fff; }

.gai__page .gai__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gc);
  transition: gap .3s ease, color .3s ease;
}
.gai__page .gai__link:hover { gap: 15px; color: var(--gc2); }

.gai__page .gai__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(0, 95, 204, .1);
  color: var(--gc);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.gai__page .gai__dark { position: relative; overflow: hidden; background: var(--gdark); }
.gai__page .gai__dark > .container { position: relative; z-index: 2; }
.gai__page .gai__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 90% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(820px 460px at 6% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.gai__page .gai__dark .gai__eyebrow { color: var(--gc3); }
.gai__page .gai__dark .gai__title { color: #fff; }
.gai__page .gai__dark .gai__lead { color: #dbe6f4; }
.gai__page .gai__dark .gai__text { color: var(--gmuted); }
.gai__page .gai__dark .gai__ico { background: rgba(77, 163, 255, .14); color: var(--gc3); }

/* ---------- 01. Hero: the generation orbit ---------- */
.gai__hero { position: relative; overflow: hidden; background: var(--gdark); padding: 190px 0 120px; }
.gai__hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gai__hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(820px 560px at 82% 22%, #000, transparent 70%);
          mask-image: radial-gradient(820px 560px at 82% 22%, #000, transparent 70%);
}
.gai__hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .46; animation: gaiKfDrift 13s ease-in-out infinite; }
.gai__hero-orb--1 { width: 300px; height: 300px; background: var(--gc); top: -50px; left: 6%; }
.gai__hero-orb--2 { width: 260px; height: 260px; background: var(--gc2); bottom: -60px; right: 8%; animation-delay: 2.6s; }
@keyframes gaiKfDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(1.08); } }

.gai__hero > .container { position: relative; z-index: 2; }
.gai__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.gai__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--gc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.gai__hero-badge i { font-size: 12px; }
.gai__hero-title { font-size: 50px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.gai__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--gc3), var(--gc2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gai__hero-title em div div { background: linear-gradient(90deg, var(--gc3), var(--gc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gai__hero-lead { font-size: 18px; font-weight: 400; line-height: 1.8; color: #dbe6f4; margin: 0 0 18px; max-width: 560px; }
.gai__hero-text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--gmuted); margin: 0 0 34px; max-width: 560px; }
.gai__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.gai__hero-actions .gai__btn-ghost { color: #dbe6f4; border-color: rgba(255, 255, 255, .28); }
.gai__hero-actions .gai__btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

.gai__hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; font-weight: 400; color: var(--gmuted); }
.gai__hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.gai__hero-note i { color: var(--gc3); font-size: 12px; }

/* Orbit - the hero's visual centerpiece: one grounded prompt fanning out
   into five generated output types, instead of a photo, gauge, or console. */
.gai__orbit { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin: 0 auto; }
.gai__orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(77, 163, 255, .3); animation: gaiKfSpin 34s linear infinite; }
.gai__orbit-ring--inner { inset: 13%; border-color: rgba(128, 121, 248, .34); animation-duration: 26s; animation-direction: reverse; }
@keyframes gaiKfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.gai__orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 40%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 10px;
  background: rgba(9, 20, 43, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 14px rgba(0, 95, 204, .08);
}
.gai__orbit-core i { font-size: 22px; color: var(--gc3); margin-bottom: 4px; }
.gai__orbit-core strong { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.gai__orbit-core span { font-size: 11.5px; font-weight: 300; color: var(--gmuted); }
.gai__orbit-cursor { display: inline-block; width: 2px; height: 12px; background: var(--gc3); margin-left: 2px; vertical-align: middle; animation: gaiKfBlink 1s step-end infinite; }
@keyframes gaiKfBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.gai__orbit-node {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 50px;
  background: rgba(9, 20, 43, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  white-space: nowrap;
  animation: gaiKfPop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.gai__orbit-node--1 { top: 8%;  left: 50%; animation-delay: .1s; }
.gai__orbit-node--2 { top: 37%; left: 91%; animation-delay: .25s; }
.gai__orbit-node--3 { top: 85%; left: 76%; animation-delay: .4s; }
.gai__orbit-node--4 { top: 85%; left: 24%; animation-delay: .55s; }
.gai__orbit-node--5 { top: 37%; left: 9%;  animation-delay: .7s; }
@keyframes gaiKfPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.gai__orbit-node-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 163, 255, .16);
  color: var(--gc3);
  font-size: 13px;
}
.gai__orbit-node-text { display: flex; flex-direction: column; line-height: 1.3; }
.gai__orbit-node-text strong { font-size: 12.5px; font-weight: 600; color: #fff; }
.gai__orbit-node-text span { font-size: 10.5px; font-weight: 300; color: var(--gmuted); }

/* ---------- 02. Intro ---------- */
.gai__intro { padding: 130px 0; background: #fff; }
.gai__intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.gai__intro-figure { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px rgba(28, 30, 43, .13); }
.gai__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gai__intro-badge {
  position: absolute;
  left: 22px;
  top: 22px;
  right: 22px;
  z-index: 2;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.gai__intro-badge strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.gai__intro-badge span { display: block; font-size: 12.5px; font-weight: 300; color: var(--gmuted); margin-top: 4px; }
.gai__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--gc);
  background: var(--gbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--gt);
}
.gai__intro-note a { color: var(--gc); font-weight: 600; }
.gai__intro-note a:hover { color: var(--gc2); }

/* ---------- 03. Value grid ---------- */
.gai__value { padding: 130px 0; background: var(--gbg); }
.gai__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.gai__value-item {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--gb);
  overflow: hidden;
  transition: all .35s ease;
}
.gai__value-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gc), var(--gc2)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.gai__value-item:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.gai__value-item:hover::before { transform: scaleX(1); }
.gai__value-num { position: absolute; top: 22px; right: 26px; font-size: 13px; font-weight: 700; color: var(--gb); }
.gai__value-item h3 { font-size: 19px; font-weight: 600; color: var(--gh); margin: 0 0 10px; }
.gai__value-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--gt); margin: 0; }

/* ---------- 04. What we build ---------- */
.gai__build { padding: 130px 0; background: #fff; }
.gai__build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.gai__build-card {
  padding: 30px 24px;
  border-radius: 16px;
  border: 1px solid var(--gb);
  background: var(--gbg);
  transition: all .35s ease;
}
.gai__build-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 26px 50px rgba(28, 30, 43, .1); border-color: transparent; }
.gai__build-card .gai__ico { width: 44px; height: 44px; font-size: 17px; margin-bottom: 16px; }
.gai__build-card h3 { font-size: 17px; font-weight: 600; color: var(--gh); margin: 0 0 8px; }
.gai__build-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--gt); margin: 0; }

/* ---------- 05. Generation lifecycle loop ---------- */
.gai__cycle { padding: 130px 0; }
.gai__cycle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 56px 0 30px; position: relative; }
.gai__cycle-row::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, rgba(77, 163, 255, .5) 0 8px, transparent 8px 16px); z-index: 0; }
.gai__cycle-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.gai__cycle-step-num {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 20, 43, .9);
  border: 2px solid var(--gc3);
  color: var(--gc3);
  font-size: 19px;
}
.gai__cycle-step h3 { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.gai__cycle-step p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--gmuted); margin: 0; }
.gai__cycle-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(77, 163, 255, .1);
  border: 1px solid rgba(77, 163, 255, .3);
  color: var(--gc3);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}
.gai__cycle-loop i { animation: gaiKfSpin 3.5s linear infinite; }

/* ---------- 06. Raw input / generated output demo ---------- */
.gai__demo { padding: 130px 0; background: var(--gbg); }
.gai__demo-toggle { display: flex; justify-content: center; gap: 10px; margin: 50px 0 32px; }
.gai__demo-toggle button {
  padding: 13px 26px;
  border-radius: 50px;
  border: 2px solid var(--gb);
  background: #fff;
  color: var(--gt);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}
.gai__demo-toggle button.is-active { background: var(--gc); border-color: var(--gc); color: #fff; }
.gai__demo-panel { max-width: 820px; margin: 0 auto; border-radius: 20px; background: #fff; border: 1px solid var(--gb); box-shadow: 0 26px 60px rgba(28, 30, 43, .1); overflow: hidden; }
.gai__demo-view { display: none; padding: 34px 36px; }
.gai__demo-view.is-active { display: block; animation: gaiKfFade .4s ease; }
@keyframes gaiKfFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.gai__demo-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 50px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.gai__demo-view--raw .gai__demo-tag { background: var(--gb); color: var(--gt); }
.gai__demo-view--out .gai__demo-tag { background: rgba(53, 208, 160, .14); color: var(--gok); }
.gai__demo-raw-text { font-family: "Courier New", monospace; font-size: 13.5px; line-height: 1.9; color: var(--gt); white-space: pre-wrap; margin: 0; }
.gai__demo-out h4 { font-size: 16.5px; font-weight: 600; color: var(--gh); margin: 0 0 12px; }
.gai__demo-out ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.gai__demo-out ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--gh); }
.gai__demo-out ul li i { color: var(--gok); margin-top: 4px; font-size: 11px; }
.gai__demo-reply { padding: 16px 18px; border-radius: 12px; background: var(--gbg); border-left: 3px solid var(--gc); font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--gt); }
.gai__demo-reply strong { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gc); margin-bottom: 6px; }
.gai__demo-note { text-align: center; max-width: 620px; margin: 26px auto 0; font-size: 13px; font-weight: 300; color: var(--gt); }

/* ---------- 07. Guardrails ---------- */
.gai__guard { padding: 130px 0; }
.gai__guard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.gai__guard-item { padding: 32px 28px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); transition: all .35s ease; }
.gai__guard-item:hover { transform: translateY(-6px); border-color: rgba(77, 163, 255, .4); background: rgba(0, 95, 204, .14); }
.gai__guard-item h3 { font-size: 18.5px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.gai__guard-item p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--gmuted); margin: 0; }

/* ---------- 08. Industries ---------- */
.gai__ind { padding: 130px 0; background: #fff; }
.gai__ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.gai__ind-card { display: block; padding: 30px 26px; border-radius: 16px; border: 1px solid var(--gb); background: var(--gbg); transition: all .3s ease; }
.gai__ind-card:hover { background: #fff; border-color: transparent; box-shadow: 0 22px 46px rgba(28, 30, 43, .1); transform: translateY(-5px); }
.gai__ind-card h3 { font-size: 18px; font-weight: 600; color: var(--gh); margin: 10px 0 8px; }
.gai__ind-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--gt); margin: 0; }

/* ---------- 09. Why 3Shadz ---------- */
.gai__why { padding: 130px 0; background: var(--gbg); }
.gai__why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.gai__why-item { padding: 32px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--gb); transition: all .35s ease; }
.gai__why-item:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.gai__why-item h3 { font-size: 18.5px; font-weight: 600; color: var(--gh); margin: 0 0 10px; }
.gai__why-item p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--gt); margin: 0; }

/* ---------- 10. Connected solutions :: bento rail ---------- */
/* Deliberately its own class family (gai__link-*), not gai__connect-*,
   so this page doesn't inherit the shared horizontal-rail "Archetype R"
   treatment reused across the other AI/agency pages - a one-off bento
   layout: a lead feature tile, a 2x2 cluster of peers, a full-width
   closing banner. */
.gai__connect { padding: 130px 0; background: #fff; }
.gai__link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "feature feature b c"
    "feature feature d e"
    "cta cta cta cta";
  gap: 20px;
  margin-top: 56px;
}
.gai__link-card:nth-child(1) { grid-area: feature; }
.gai__link-card:nth-child(2) { grid-area: b; }
.gai__link-card:nth-child(3) { grid-area: c; }
.gai__link-card:nth-child(4) { grid-area: d; }
.gai__link-card:nth-child(5) { grid-area: e; }
.gai__link-card:nth-child(6) { grid-area: cta; }

.gai__link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: 20px;
  border: 1px solid var(--gb);
  background: var(--gbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
.gai__link-card:hover { transform: translateY(-5px); border-color: transparent; background: #fff; box-shadow: 0 24px 48px rgba(28, 30, 43, .1); }
.gai__link-card .gai__ico { margin-bottom: 18px; }
.gai__link-card h3 { font-size: 18px; font-weight: 600; color: var(--gh); margin: 0 0 8px; }
.gai__link-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--gt); margin: 0 0 18px; flex: 1 0 auto; }
.gai__link-card .gai__link { margin-top: auto; }

.gai__link-card--feature {
  padding: 44px 38px;
  justify-content: center;
  background: linear-gradient(155deg, rgba(0, 95, 204, .07), rgba(128, 121, 248, .05));
  border-color: rgba(0, 95, 204, .16);
}
.gai__link-card--feature:hover { background: linear-gradient(155deg, rgba(0, 95, 204, .11), rgba(128, 121, 248, .09)); box-shadow: 0 26px 54px rgba(0, 95, 204, .14); }
.gai__link-card--feature .gai__tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--gc);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gai__link-card--feature .gai__ico { width: 62px; height: 62px; font-size: 25px; border-radius: 16px; }
.gai__link-card--feature h3 { font-size: 25px; }
.gai__link-card--feature p { font-size: 15.5px; max-width: 420px; }

.gai__link-card--cta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 36px 40px;
  background: var(--gdark);
  border-color: transparent;
}
.gai__link-cta-info { display: flex; align-items: center; gap: 22px; }
.gai__link-cta-info .gai__ico { margin-bottom: 0; background: rgba(77, 163, 255, .14); color: var(--gc3); }
.gai__link-card--cta h3 { color: #fff; }
.gai__link-card--cta p { color: var(--gmuted); margin: 0; }
.gai__link-card--cta .gai__link { flex: 0 0 auto; margin-top: 0; color: var(--gc3); white-space: nowrap; }
.gai__link-card--cta .gai__link:hover { color: #fff; }
.gai__link-card--cta:hover { transform: translateY(-5px); background: #0a1b3d; box-shadow: 0 26px 54px rgba(0, 0, 0, .25); }

/* ---------- 11. FAQ ---------- */
.gai__faq { padding: 130px 0; background: var(--gbg); }
.gai__faq-list { max-width: 860px; margin: 56px auto 0; }
.gai__faq-item { border-bottom: 1px solid var(--gb); }
.gai__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--gh);
  cursor: pointer;
}
.gai__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gb);
  color: var(--gc);
  font-size: 12px;
  transition: all .3s ease;
}
.gai__faq-item.is-open .gai__faq-q { color: var(--gc); }
.gai__faq-item.is-open .gai__faq-icon { background: var(--gc); border-color: var(--gc); color: #fff; transform: rotate(45deg); }
.gai__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.gai__faq-item.is-open .gai__faq-a { max-height: 420px; }
.gai__faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--gt); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .gai__hero-grid { grid-template-columns: 1fr; }
  .gai__orbit { max-width: 420px; margin: 0 auto; }
  .gai__build-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 1199px) {
  .gai__page .gai__title { font-size: 34px; }
  .gai__hero-title { font-size: 40px; }
  .gai__hero-grid { grid-template-columns: 1fr; }
  .gai__orbit { max-width: 420px; margin: 0 auto; }
  .gai__intro-grid { grid-template-columns: 1fr; gap: 46px; }
  .gai__value-grid { grid-template-columns: repeat(2, 1fr); }
  .gai__build-grid { grid-template-columns: repeat(2, 1fr); }
  .gai__cycle-row { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .gai__cycle-row::before { display: none; }
  .gai__guard-grid { grid-template-columns: repeat(2, 1fr); }
  .gai__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .gai__why-grid { grid-template-columns: repeat(2, 1fr); }
  .gai__link-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "feature feature"
      "b c"
      "d e"
      "cta cta";
  }
  .gai__link-card--cta { flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 767px) {
  .gai__hero { padding: 150px 0 80px; }
  .gai__hero-title { font-size: 32px; }
  .gai__hero-lead { font-size: 17px; }
  .gai__orbit { max-width: 320px; }
  .gai__orbit-node { padding: 8px 12px 8px 8px; }
  .gai__orbit-node-text strong { font-size: 11px; }
  .gai__orbit-node-text span { display: none; }
  .gai__intro,
  .gai__value,
  .gai__build,
  .gai__cycle,
  .gai__demo,
  .gai__guard,
  .gai__ind,
  .gai__why,
  .gai__connect,
  .gai__faq { padding: 80px 0; }
  .gai__value-grid { grid-template-columns: 1fr; }
  .gai__build-grid { grid-template-columns: 1fr; }
  .gai__cycle-row { grid-template-columns: 1fr; row-gap: 26px; }
  .gai__demo-view { padding: 26px 22px; }
  .gai__demo-toggle { flex-direction: column; align-items: center; }
  .gai__guard-grid { grid-template-columns: 1fr; }
  .gai__ind-grid { grid-template-columns: 1fr; }
  .gai__why-grid { grid-template-columns: 1fr; }
  .gai__link-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "feature"
      "b"
      "c"
      "d"
      "e"
      "cta";
  }
  .gai__link-card--feature { padding: 32px 26px; }
  .gai__link-card--feature h3 { font-size: 22px; }
  .gai__link-card--cta { padding: 30px 26px; }
  .gai__faq-q { font-size: 16px; }
}

/* ============================================================
   AI AGENT DEVELOPMENT PAGE (aad__*)
   Scoped entirely to .aad__page (added on <main> of
   ai-agent-development.html). Keeps the family's brand language -
   #005fcc primary, #07152F dark bands, Kanit type - but swaps the
   purple secondary every other AI & Intelligent Solutions page
   shares for a signal-amber "act" accent, so the page reads as
   its own thing at a glance (the same trick cds__ uses with its
   cyan swap). The signature component is the aad__trace card: a
   live "agent run" reasoning log (Goal -> Thought -> Action ->
   Observation -> Result) that stands in for the console (aisol__),
   scorecard/gauge (aic__), orbit (gai__), and pipeline (cds__)
   treatments used elsewhere - a vertical execution trace instead
   of a radial diagram, a single metric, or a left-to-right rail.
   The architecture section below it uses a receding "exploded
   stack" of layer cards instead of a circle-marker timeline.
   Every keyframe is prefixed aadKf* so nothing collides with the
   theme. Nothing in this block leaks to other pages.
   ============================================================ */
.aad__page {
  --adc: #005fcc;
  --adc2: #ff7a45;
  --adc3: #4da3ff;
  --adok: #35d0a0;
  --adh: #1c1e2b;
  --adt: #6b7089;
  --adb: #e9eaf5;
  --adbg: #f6f7fc;
  --addark: #07152F;
  --admuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.aad__page .aad__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--adc);
  margin-bottom: 18px;
}
.aad__page .aad__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--adh); margin: 0 0 20px; }
.aad__page .aad__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--adh); margin: 0 0 18px; }
.aad__page .aad__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--adt); margin: 0 0 16px; }
.aad__page .aad__text:last-child { margin-bottom: 0; }
.aad__page .aad__head { max-width: 800px; }
.aad__page .aad__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.aad__page .aad__btn,
.aad__page .aad__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.aad__page .aad__btn { color: #fff; background: var(--adc); border: 2px solid var(--adc); }
.aad__page .aad__btn:hover { background: var(--adc2); border-color: var(--adc2); color: #fff; }
.aad__page .aad__btn-ghost { color: var(--adc); border: 2px solid var(--adc); background: transparent; }
.aad__page .aad__btn-ghost:hover { background: var(--adc); color: #fff; }

.aad__page .aad__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--adc);
  transition: gap .3s ease, color .3s ease;
}
.aad__page .aad__link:hover { gap: 15px; color: var(--adc2); }

.aad__page .aad__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(0, 95, 204, .1);
  color: var(--adc);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.aad__page .aad__dark { position: relative; overflow: hidden; background: var(--addark); }
.aad__page .aad__dark > .container { position: relative; z-index: 2; }
.aad__page .aad__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(255, 122, 69, .18), transparent 64%);
}
.aad__page .aad__dark .aad__eyebrow { color: var(--adc3); }
.aad__page .aad__dark .aad__title { color: #fff; }
.aad__page .aad__dark .aad__lead { color: #dbe6f4; }
.aad__page .aad__dark .aad__text { color: var(--admuted); }
.aad__page .aad__dark .aad__ico { background: rgba(77, 163, 255, .14); color: var(--adc3); }

/* ---------- 01. Hero: the live agent run trace ---------- */
.aad__hero { position: relative; overflow: hidden; background: var(--addark); padding: 190px 0 120px; }
.aad__hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aad__hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(820px 560px at 82% 20%, #000, transparent 70%);
          mask-image: radial-gradient(820px 560px at 82% 20%, #000, transparent 70%);
}
.aad__hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; animation: aadKfDrift 13s ease-in-out infinite; }
.aad__hero-orb--1 { width: 300px; height: 300px; background: var(--adc); top: -50px; left: 6%; }
.aad__hero-orb--2 { width: 260px; height: 260px; background: var(--adc2); bottom: -60px; right: 8%; animation-delay: 2.6s; opacity: .3; }
@keyframes aadKfDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(1.08); } }

.aad__hero > .container { position: relative; z-index: 2; }
.aad__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.aad__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--adc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.aad__hero-badge i { font-size: 12px; }
.aad__hero-title { font-size: 50px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.aad__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--adc3), var(--adc2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aad__hero-title em div div { background: linear-gradient(90deg, var(--adc3), var(--adc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aad__hero-lead { font-size: 18px; font-weight: 400; line-height: 1.8; color: #dbe6f4; margin: 0 0 18px; max-width: 560px; }
.aad__hero-text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--admuted); margin: 0 0 34px; max-width: 560px; }
.aad__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.aad__hero-actions .aad__btn-ghost { color: #dbe6f4; border-color: rgba(255, 255, 255, .28); }
.aad__hero-actions .aad__btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

.aad__hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; font-weight: 400; color: var(--admuted); }
.aad__hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.aad__hero-note i { color: var(--adc3); font-size: 12px; }

/* Trace card - the hero's visual centerpiece: a running agent's own
   reasoning log, instead of a photo, gauge, console prompt, or orbit. */
.aad__trace {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 20, 43, .78);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  padding: 30px 30px 26px;
}
.aad__trace-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.aad__trace-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aad__trace-id i { flex: 0 0 auto; color: var(--adc3); font-size: 15px; }
.aad__trace-id span { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--admuted); }
.aad__trace-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(53, 208, 160, .14);
  color: var(--adok);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
}
.aad__trace-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--adok); animation: aadKfPulse 1.8s ease-in-out infinite; }
@keyframes aadKfPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(53, 208, 160, .5); } 50% { opacity: .7; box-shadow: 0 0 0 5px rgba(53, 208, 160, 0); } }

.aad__trace-list { display: flex; flex-direction: column; }
.aad__trace-item {
  position: relative;
  padding-left: 46px;
  padding-bottom: 20px;
  opacity: 0;
  animation: aadKfRise .55s ease both;
}
.aad__trace-item:last-child { padding-bottom: 0; }
.aad__trace-item:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: -4px; width: 1px; background: rgba(255, 255, 255, .14); }
.aad__trace-item:nth-child(1) { animation-delay: .15s; }
.aad__trace-item:nth-child(2) { animation-delay: .38s; }
.aad__trace-item:nth-child(3) { animation-delay: .61s; }
.aad__trace-item:nth-child(4) { animation-delay: .84s; }
.aad__trace-item:nth-child(5) { animation-delay: 1.07s; }
.aad__trace-item:nth-child(6) { animation-delay: 1.3s; }
@keyframes aadKfRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.aad__trace-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--admuted);
}
.aad__trace-item--goal .aad__trace-dot { color: var(--adc2); background: rgba(255, 122, 69, .14); border-color: rgba(255, 122, 69, .3); }
.aad__trace-item--thought .aad__trace-dot { color: var(--adc3); background: rgba(77, 163, 255, .14); border-color: rgba(77, 163, 255, .3); }
.aad__trace-item--action .aad__trace-dot { color: var(--adc3); background: rgba(0, 95, 204, .22); border-color: rgba(77, 163, 255, .35); }
.aad__trace-item--result .aad__trace-dot { color: var(--adok); background: rgba(53, 208, 160, .16); border-color: rgba(53, 208, 160, .35); }

.aad__trace-kind { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--admuted); margin: 4px 0 5px; }
.aad__trace-item--goal .aad__trace-kind { color: var(--adc2); }
.aad__trace-item--thought .aad__trace-kind { color: var(--adc3); }
.aad__trace-item--action .aad__trace-kind { color: var(--adc3); }
.aad__trace-item--result .aad__trace-kind { color: var(--adok); }
.aad__trace-text { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: #dbe6f4; }
.aad__trace-item--action .aad__trace-text { font-family: "Courier New", monospace; font-size: 12.5px; color: #cfe0f7; background: rgba(255, 255, 255, .05); padding: 8px 10px; border-radius: 8px; display: inline-block; }
.aad__trace-item--result .aad__trace-text { color: #fff; font-weight: 400; }

.aad__trace-foot { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 11.5px; font-weight: 300; line-height: 1.6; color: rgba(219, 230, 244, .55); text-align: center; }

/* ---------- 02. Intro ---------- */
.aad__intro { padding: 130px 0; background: #fff; }
.aad__intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.aad__intro-figure { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px rgba(28, 30, 43, .13); }
.aad__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aad__intro-badge {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.aad__intro-badge strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.aad__intro-badge span { display: block; font-size: 12.5px; font-weight: 300; color: var(--admuted); margin-top: 4px; }
.aad__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--adc);
  background: var(--adbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--adt);
}
.aad__intro-note a { color: var(--adc); font-weight: 600; }
.aad__intro-note a:hover { color: var(--adc2); }

/* ---------- 03. Value grid ---------- */
.aad__value { padding: 130px 0; background: var(--adbg); }
.aad__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aad__value-item {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--adb);
  overflow: hidden;
  transition: all .35s ease;
}
.aad__value-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--adc), var(--adc2)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.aad__value-item:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.aad__value-item:hover::before { transform: scaleX(1); }
.aad__value-num { position: absolute; top: 22px; right: 26px; font-size: 13px; font-weight: 700; color: var(--adb); }
.aad__value-item h3 { font-size: 19px; font-weight: 600; color: var(--adh); margin: 0 0 10px; }
.aad__value-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--adt); margin: 0; }

/* ---------- 04. What we build ---------- */
.aad__build { padding: 130px 0; background: #fff; }
.aad__build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.aad__build-card {
  padding: 30px 24px;
  border-radius: 16px;
  border: 1px solid var(--adb);
  background: var(--adbg);
  transition: all .35s ease;
}
.aad__build-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 26px 50px rgba(28, 30, 43, .1); border-color: transparent; }
.aad__build-card .aad__ico { width: 44px; height: 44px; font-size: 17px; margin-bottom: 16px; }
.aad__build-card h3 { font-size: 17px; font-weight: 600; color: var(--adh); margin: 0 0 8px; }
.aad__build-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--adt); margin: 0; }

/* ---------- 05. Reasoning loop ---------- */
.aad__cycle { padding: 130px 0; }
.aad__cycle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 56px 0 30px; position: relative; }
.aad__cycle-row::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, rgba(77, 163, 255, .5) 0 8px, transparent 8px 16px); z-index: 0; }
.aad__cycle-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.aad__cycle-step-num {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 20, 43, .9);
  border: 2px solid var(--adc3);
  color: var(--adc3);
  font-size: 19px;
}
.aad__cycle-step h3 { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.aad__cycle-step p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--admuted); margin: 0; }
.aad__cycle-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(77, 163, 255, .1);
  border: 1px solid rgba(77, 163, 255, .3);
  color: var(--adc3);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}
.aad__cycle-loop i { animation: aadKfSpin 3.5s linear infinite; }
@keyframes aadKfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- 06. Anatomy of an agent: exploded layer stack ---------- */
.aad__stack { padding: 130px 0; background: var(--adbg); }
.aad__stack-list { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 56px; }
.aad__stack-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 24px 30px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--adb);
  border-left: 4px solid var(--adc3);
  box-shadow: 0 14px 30px rgba(28, 30, 43, .06);
  transition: all .3s ease;
}
.aad__stack-item:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(28, 30, 43, .12); border-left-color: var(--adc2); }
.aad__stack-item:nth-child(1) { width: 100%; }
.aad__stack-item:nth-child(2) { width: 92%; }
.aad__stack-item:nth-child(3) { width: 84%; }
.aad__stack-item:nth-child(4) { width: 76%; }
.aad__stack-item:nth-child(5) { width: 68%; }
.aad__stack-item:nth-child(6) { width: 60%; }
.aad__stack-num { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--adc3); border: 1px solid var(--adb); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.aad__stack-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 95, 204, .1); color: var(--adc); font-size: 18px; }
.aad__stack-body { min-width: 0; }
.aad__stack-body h3 { font-size: 17.5px; font-weight: 600; color: var(--adh); margin: 0 0 4px; }
.aad__stack-body p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--adt); margin: 0; }

/* ---------- 07. Guardrails & autonomy controls ---------- */
.aad__guard { padding: 130px 0; }
.aad__guard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aad__guard-item { padding: 32px 28px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); transition: all .35s ease; }
.aad__guard-item:hover { transform: translateY(-6px); border-color: rgba(77, 163, 255, .4); background: rgba(0, 95, 204, .14); }
.aad__guard-item h3 { font-size: 18.5px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.aad__guard-item p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--admuted); margin: 0; }

/* ---------- 08. Industries ---------- */
.aad__ind { padding: 130px 0; background: #fff; }
.aad__ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.aad__ind-card { display: block; padding: 30px 26px; border-radius: 16px; border: 1px solid var(--adb); background: var(--adbg); transition: all .3s ease; }
.aad__ind-card:hover { background: #fff; border-color: transparent; box-shadow: 0 22px 46px rgba(28, 30, 43, .1); transform: translateY(-5px); }
.aad__ind-card h3 { font-size: 18px; font-weight: 600; color: var(--adh); margin: 10px 0 8px; }
.aad__ind-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--adt); margin: 0; }

/* ---------- 09. Why 3Shadz ---------- */
.aad__why { padding: 130px 0; background: var(--adbg); }
.aad__why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aad__why-item { padding: 32px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--adb); transition: all .35s ease; }
.aad__why-item:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.aad__why-item h3 { font-size: 18.5px; font-weight: 600; color: var(--adh); margin: 0 0 10px; }
.aad__why-item p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--adt); margin: 0; }

/* ---------- 10. Connected solutions :: the fold-out rack ----------
   Deliberately its own class family (aad__fold-*), not aad__connect-*,
   so this page doesn't inherit the shared horizontal-rail "Archetype R"
   treatment reused across the other AI/agency pages, and doesn't reuse
   gai's orbit or this same page's own hero "trace" motif either: six
   native <details> panels stand shoulder to shoulder like closed
   folders and only one folds open at a time (via the shared
   name="aad-fold" attribute), so exploring a connected practice reads
   as an actual disclosure, not another static card grid. Collapses to
   a plain stacked accordion below 1200px - see Responsive section. */
.aad__connect { padding: 130px 0; background: #fff; }
.aad__fold { display: flex; align-items: stretch; gap: 6px; margin-top: 56px; height: 400px; }
.aad__fold-item {
  flex: 1 1 90px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--adbg);
  overflow: hidden;
  transition: flex-basis .55s cubic-bezier(.22, .61, .36, 1), background .4s ease, box-shadow .4s ease;
}
.aad__fold-item[open] { flex: 3 1 380px; background: #fff; box-shadow: 0 26px 54px rgba(28, 30, 43, .12); }
.aad__fold-item > summary {
  list-style: none;
  cursor: pointer;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 12px 14px;
  outline: none;
}
.aad__fold-item > summary::-webkit-details-marker { display: none; }
.aad__fold-item > summary::marker { content: ""; }
.aad__fold-item:not([open]) > summary:hover { background: rgba(0, 95, 204, .05); }
.aad__fold-num {
  order: 3;
  margin-top: auto;
  padding-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--adt);
  font-variant-numeric: tabular-nums;
}
.aad__fold-item > summary .aad__ico { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; margin: 0 0 14px; }
.aad__fold-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--adh);
}
.aad__fold-body {
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 30px;
  transition: opacity .2s ease;
}
.aad__fold-item[open] > summary {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 28px 14px;
}
.aad__fold-item[open] .aad__fold-num { order: 3; margin: 0 0 0 auto; padding-top: 0; }
.aad__fold-item[open] > summary .aad__ico { width: 48px; height: 48px; font-size: 19px; border-radius: 13px; margin: 0 16px 0 0; }
.aad__fold-item[open] .aad__fold-label { writing-mode: horizontal-tb; transform: none; font-size: 19px; }
.aad__fold-item[open] .aad__fold-body {
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  padding: 0 28px 22px;
  transition: opacity .35s ease .12s;
}
.aad__fold-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--adt); margin: 0 0 18px; }
.aad__fold-body .aad__link { white-space: nowrap; }

/* ---------- 11. FAQ ---------- */
.aad__faq { padding: 130px 0; background: var(--adbg); }
.aad__faq-list { max-width: 860px; margin: 56px auto 0; }
.aad__faq-item { border-bottom: 1px solid var(--adb); }
.aad__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--adh);
  cursor: pointer;
}
.aad__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--adb);
  color: var(--adc);
  font-size: 12px;
  transition: all .3s ease;
}
.aad__faq-item.is-open .aad__faq-q { color: var(--adc); }
.aad__faq-item.is-open .aad__faq-icon { background: var(--adc); border-color: var(--adc); color: #fff; transform: rotate(45deg); }
.aad__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.aad__faq-item.is-open .aad__faq-a { max-height: 420px; }
.aad__faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--adt); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .aad__hero-grid { grid-template-columns: 1fr; }
  .aad__trace { max-width: 440px; margin: 0 auto; }
  .aad__build-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 1199px) {
  .aad__page .aad__title { font-size: 34px; }
  .aad__hero-title { font-size: 40px; }
  .aad__hero-grid { grid-template-columns: 1fr; }
  .aad__trace { max-width: 440px; margin: 0 auto; }
  .aad__intro-grid { grid-template-columns: 1fr; gap: 46px; }
  .aad__value-grid { grid-template-columns: repeat(2, 1fr); }
  .aad__build-grid { grid-template-columns: repeat(2, 1fr); }
  .aad__cycle-row { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .aad__cycle-row::before { display: none; }
  .aad__stack-item,
  .aad__stack-item:nth-child(2),
  .aad__stack-item:nth-child(3),
  .aad__stack-item:nth-child(4),
  .aad__stack-item:nth-child(5),
  .aad__stack-item:nth-child(6) { width: 100%; }
  .aad__guard-grid { grid-template-columns: repeat(2, 1fr); }
  .aad__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .aad__why-grid { grid-template-columns: repeat(2, 1fr); }
  .aad__fold { flex-direction: column; height: auto; gap: 0; border-top: 1px solid var(--adb); }
  .aad__fold-item { flex: none; border-radius: 0; background: transparent; border-bottom: 1px solid var(--adb); }
  .aad__fold-item[open] { background: transparent; box-shadow: none; }
  .aad__fold-item > summary,
  .aad__fold-item[open] > summary {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 4px;
  }
  .aad__fold-num,
  .aad__fold-item[open] .aad__fold-num { order: 3; margin: 0 0 0 auto; padding: 0; }
  .aad__fold-item > summary .aad__ico,
  .aad__fold-item[open] > summary .aad__ico { margin: 0; width: 42px; height: 42px; font-size: 17px; }
  .aad__fold-label,
  .aad__fold-item[open] .aad__fold-label { writing-mode: horizontal-tb; transform: none; font-size: 17.5px; }
  .aad__fold-item[open] .aad__fold-label { color: var(--adc); }
  .aad__fold-body,
  .aad__fold-item[open] .aad__fold-body { padding: 0 4px 0 58px; }
  .aad__fold-item[open] .aad__fold-body { padding-bottom: 26px; overflow: visible; }
}
@media only screen and (max-width: 767px) {
  .aad__hero { padding: 150px 0 80px; }
  .aad__hero-title { font-size: 32px; }
  .aad__hero-lead { font-size: 17px; }
  .aad__trace { max-width: 100%; padding: 24px 20px 20px; }
  .aad__intro,
  .aad__value,
  .aad__build,
  .aad__cycle,
  .aad__stack,
  .aad__guard,
  .aad__ind,
  .aad__why,
  .aad__connect,
  .aad__faq { padding: 80px 0; }
  .aad__value-grid { grid-template-columns: 1fr; }
  .aad__build-grid { grid-template-columns: 1fr; }
  .aad__cycle-row { grid-template-columns: 1fr; row-gap: 26px; }
  .aad__stack-item { flex-wrap: wrap; padding: 20px; }
  .aad__guard-grid { grid-template-columns: 1fr; }
  .aad__ind-grid { grid-template-columns: 1fr; }
  .aad__why-grid { grid-template-columns: 1fr; }
  .aad__fold-body,
  .aad__fold-item[open] .aad__fold-body { padding-left: 4px; }
  .aad__faq-q { font-size: 16px; }
}

/* ============================================================
   AI AUTOMATION SOLUTIONS PAGE (aas__*)
   Scoped entirely to .aas__page (added on <main> of
   ai-automation-solutions.html). Keeps the family's brand
   language - #005fcc primary, #07152F dark bands, Kanit type -
   but swaps the secondary accent every sibling page already
   uses (purple on gai__/aic__/svc__/aisol__/csw__, amber on
   aad__, cyan on cds__) for an emerald "in-motion" green, so
   the automation story reads as its own thing at a glance. The
   signature component is the aas__deck: a live "Automation
   Control Deck" of switches flipping tasks from Manual to
   Automated with a running hours-reclaimed counter, standing in
   for the console (aisol__), scorecard/gauge (aic__), orbit
   (gai__), trace (aad__) and pipeline (cds__) treatments used
   elsewhere. The aas__demo section pairs it with a click-through
   Manual vs. Automated step timeline instead of a raw/output
   text toggle. Every keyframe is prefixed aasKf* so nothing
   collides with the theme. Nothing in this block leaks to other
   pages.
   ============================================================ */
.aas__page {
  --asc: #005fcc;
  --asc2: #16c98d;
  --asc3: #4da3ff;
  --asok: #16c98d;
  --aswarn: #ff9457;
  --ash: #1c1e2b;
  --ast: #6b7089;
  --asb: #e9eaf5;
  --asbg: #f6f7fc;
  --asdark: #07152F;
  --asmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.aas__page .aas__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--asc);
  margin-bottom: 18px;
}
.aas__page .aas__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--ash); margin: 0 0 20px; }
.aas__page .aas__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ash); margin: 0 0 18px; }
.aas__page .aas__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ast); margin: 0 0 16px; }
.aas__page .aas__text:last-child { margin-bottom: 0; }
.aas__page .aas__head { max-width: 800px; }
.aas__page .aas__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.aas__page .aas__btn,
.aas__page .aas__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.aas__page .aas__btn { color: #fff; background: var(--asc); border: 2px solid var(--asc); }
.aas__page .aas__btn:hover { background: var(--asc2); border-color: var(--asc2); color: #fff; }
.aas__page .aas__btn-ghost { color: var(--asc); border: 2px solid var(--asc); background: transparent; }
.aas__page .aas__btn-ghost:hover { background: var(--asc); color: #fff; }

.aas__page .aas__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--asc);
  transition: gap .3s ease, color .3s ease;
}
.aas__page .aas__link:hover { gap: 15px; color: var(--asc2); }

.aas__page .aas__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(0, 95, 204, .1);
  color: var(--asc);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.aas__page .aas__dark { position: relative; overflow: hidden; background: var(--asdark); }
.aas__page .aas__dark > .container { position: relative; z-index: 2; }
.aas__page .aas__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(22, 201, 141, .24), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.aas__page .aas__dark .aas__eyebrow { color: var(--asc3); }
.aas__page .aas__dark .aas__title { color: #fff; }
.aas__page .aas__dark .aas__text { color: var(--asmuted); }
.aas__page .aas__dark .aas__ico { background: rgba(22, 201, 141, .16); color: var(--asc2); }

/* ---------- 01. Hero: the automation control deck ---------- */
.aas__hero { position: relative; overflow: hidden; background: var(--asdark); padding: 190px 0 120px; }
.aas__hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aas__hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(820px 560px at 84% 18%, #000, transparent 70%);
          mask-image: radial-gradient(820px 560px at 84% 18%, #000, transparent 70%);
}
.aas__hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; animation: aasKfDrift 13s ease-in-out infinite; }
.aas__hero-orb--1 { width: 300px; height: 300px; background: var(--asc2); top: -50px; right: 6%; }
.aas__hero-orb--2 { width: 260px; height: 260px; background: var(--asc); bottom: -60px; left: 8%; animation-delay: 2.6s; }
@keyframes aasKfDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.07); } }

.aas__hero > .container { position: relative; z-index: 2; }
.aas__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.aas__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(22, 201, 141, .35);
  background: rgba(22, 201, 141, .1);
  color: var(--asc2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.aas__hero-badge i { font-size: 12px; }
.aas__hero-title { font-size: 50px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.aas__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--asc2), var(--asc3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aas__hero-title em div div { background: linear-gradient(90deg, var(--asc2), var(--asc3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aas__hero-lead { font-size: 18px; font-weight: 400; line-height: 1.8; color: #dbe6f4; margin: 0 0 18px; max-width: 560px; }
.aas__hero-text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--asmuted); margin: 0 0 34px; max-width: 560px; }
.aas__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.aas__hero-actions .aas__btn-ghost { color: #dbe6f4; border-color: rgba(255, 255, 255, .28); }
.aas__hero-actions .aas__btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

.aas__hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; font-weight: 400; color: var(--asmuted); }
.aas__hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.aas__hero-note i { color: var(--asc2); font-size: 12px; }

/* Control deck - the hero's visual centerpiece: a live panel of switches
   flipping tasks from Manual to Automated, instead of a photo, gauge,
   orbit, or console. */
.aas__deck {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 20, 43, .78);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  padding: 30px 30px 26px;
}
.aas__deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.aas__deck-head span:first-child { font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--asmuted); }
.aas__deck-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(22, 201, 141, .14);
  color: var(--asc2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.aas__deck-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--asc2); animation: aasKfBlink 1.4s ease-in-out infinite; }
@keyframes aasKfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.aas__deck-rows { display: grid; gap: 4px; }
.aas__deck-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  opacity: 0;
  animation: aasKfRowIn .5s ease both;
  animation-delay: var(--d, 0s);
}
.aas__deck-row:last-child { border-bottom: none; }
@keyframes aasKfRowIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

.aas__deck-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 163, 255, .14);
  color: var(--asc3);
  font-size: 14px;
}
.aas__deck-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.aas__deck-text strong { font-size: 13.5px; font-weight: 600; color: #fff; }
.aas__deck-text span { font-size: 11.5px; font-weight: 300; color: var(--asmuted); margin-top: 2px; }

.aas__switch {
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 22px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .16);
  animation: aasKfSwitchOn .4s ease both;
  animation-delay: calc(var(--d, 0s) + .55s);
}
.aas__switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  animation: aasKfKnobOn .4s ease both;
  animation-delay: calc(var(--d, 0s) + .55s);
}
@keyframes aasKfSwitchOn { from { background: rgba(255, 255, 255, .16); } to { background: var(--asc2); } }
@keyframes aasKfKnobOn { from { transform: translateX(0); } to { transform: translateX(20px); } }

.aas__deck-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.aas__deck-foot span { font-size: 12px; font-weight: 300; color: var(--asmuted); }
.aas__deck-foot strong { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
.aas__deck-foot strong small { font-size: 13px; font-weight: 400; color: var(--asc2); margin-left: 4px; }
.aas__deck-note { margin: 16px 0 0; font-size: 11.5px; font-weight: 300; line-height: 1.6; color: rgba(219, 230, 244, .55); text-align: center; }

/* ---------- 02. Intro ---------- */
.aas__intro { padding: 130px 0; background: #fff; }
.aas__intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.aas__intro-figure { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px rgba(28, 30, 43, .13); }
.aas__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aas__intro-badge {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.aas__intro-badge strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.aas__intro-badge span { display: block; font-size: 12.5px; font-weight: 300; color: var(--asmuted); margin-top: 4px; }
.aas__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--asc);
  background: var(--asbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ast);
}
.aas__intro-note a { color: var(--asc); font-weight: 600; }
.aas__intro-note a:hover { color: var(--asc2); }

/* ---------- 03. Value grid ---------- */
.aas__value { padding: 130px 0; background: var(--asbg); }
.aas__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aas__value-item {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--asb);
  overflow: hidden;
  transition: all .35s ease;
}
.aas__value-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--asc), var(--asc2)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.aas__value-item:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.aas__value-item:hover::before { transform: scaleX(1); }
.aas__value-num { position: absolute; top: 22px; right: 26px; font-size: 13px; font-weight: 700; color: var(--asb); }
.aas__value-item h3 { font-size: 19px; font-weight: 600; color: var(--ash); margin: 0 0 10px; }
.aas__value-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--ast); margin: 0; }

/* ---------- 04. What we build ---------- */
.aas__build { padding: 130px 0; background: #fff; }
.aas__build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.aas__build-card {
  padding: 30px 24px;
  border-radius: 16px;
  border: 1px solid var(--asb);
  background: var(--asbg);
  transition: all .35s ease;
}
.aas__build-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 26px 50px rgba(28, 30, 43, .1); border-color: transparent; }
.aas__build-card .aas__ico { width: 44px; height: 44px; font-size: 17px; margin-bottom: 16px; }
.aas__build-card h3 { font-size: 17px; font-weight: 600; color: var(--ash); margin: 0 0 8px; }
.aas__build-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--ast); margin: 0; }

/* ---------- 05. How we automate loop ---------- */
.aas__cycle { padding: 130px 0; }
.aas__cycle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 56px 0 30px; position: relative; }
.aas__cycle-row::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, rgba(22, 201, 141, .5) 0 8px, transparent 8px 16px); z-index: 0; }
.aas__cycle-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.aas__cycle-step-num {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 20, 43, .9);
  border: 2px solid var(--asc2);
  color: var(--asc2);
  font-size: 19px;
}
.aas__cycle-step h3 { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.aas__cycle-step p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--asmuted); margin: 0; }
.aas__cycle-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(22, 201, 141, .1);
  border: 1px solid rgba(22, 201, 141, .3);
  color: var(--asc2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}
.aas__cycle-loop i { animation: aasKfSpin 3.5s linear infinite; }
@keyframes aasKfSpin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ---------- 06. Manual vs. Automated demo ---------- */
.aas__demo { padding: 130px 0; background: var(--asbg); }
.aas__demo-toggle { display: flex; justify-content: center; gap: 10px; margin: 50px 0 32px; }
.aas__demo-toggle button {
  padding: 13px 26px;
  border-radius: 50px;
  border: 2px solid var(--asb);
  background: #fff;
  color: var(--ast);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}
.aas__demo-toggle button.is-active { background: var(--asc); border-color: var(--asc); color: #fff; }
.aas__demo-panel { max-width: 900px; margin: 0 auto; border-radius: 20px; background: #fff; border: 1px solid var(--asb); box-shadow: 0 26px 60px rgba(28, 30, 43, .1); overflow: hidden; }
.aas__demo-view { display: none; padding: 36px 40px; }
.aas__demo-view.is-active { display: block; animation: aasKfFade .4s ease; }
@keyframes aasKfFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.aas__demo-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.aas__demo-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 50px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.aas__demo-tag--slow { background: rgba(255, 148, 87, .14); color: #d9642b; }
.aas__demo-tag--fast { background: rgba(22, 201, 141, .14); color: var(--asc2); }
.aas__demo-time { font-size: 30px; font-weight: 700; color: var(--ash); line-height: 1; }
.aas__demo-view--auto .aas__demo-time { color: var(--asc2); }
.aas__demo-scenario { font-size: 14.5px; font-weight: 300; font-style: italic; line-height: 1.7; color: var(--ast); margin: 0 0 6px; }
.aas__demo-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.aas__demo-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: 122px; }
.aas__demo-step-ico { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--asbg); color: var(--ast); font-size: 16px; }
.aas__demo-step span { font-size: 12px; font-weight: 500; color: var(--ash); line-height: 1.4; }
.aas__demo-arrow { flex: 0 0 auto; color: var(--asb); font-size: 14px; }
.aas__demo-view--auto .aas__demo-step-ico { background: rgba(22, 201, 141, .14); color: var(--asc2); }
.aas__demo-view--auto .aas__demo-arrow { color: var(--asc2); }
.aas__demo-saved {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(22, 201, 141, .1);
  border-left: 3px solid var(--asc2);
  color: #128a63;
  font-size: 14px;
  font-weight: 500;
}
.aas__demo-note { text-align: center; max-width: 620px; margin: 26px auto 0; font-size: 13px; font-weight: 300; color: var(--ast); }

/* ---------- 07. Reliability & control ---------- */
.aas__guard { padding: 130px 0; }
.aas__guard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aas__guard-item { padding: 32px 28px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); transition: all .35s ease; }
.aas__guard-item:hover { transform: translateY(-6px); border-color: rgba(22, 201, 141, .4); background: rgba(22, 201, 141, .1); }
.aas__guard-item h3 { font-size: 18.5px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.aas__guard-item p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--asmuted); margin: 0; }

/* ---------- 08. Industries ---------- */
.aas__ind { padding: 130px 0; background: #fff; }
.aas__ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.aas__ind-card { display: block; padding: 30px 26px; border-radius: 16px; border: 1px solid var(--asb); background: var(--asbg); transition: all .3s ease; }
.aas__ind-card:hover { background: #fff; border-color: transparent; box-shadow: 0 22px 46px rgba(28, 30, 43, .1); transform: translateY(-5px); }
.aas__ind-card h3 { font-size: 18px; font-weight: 600; color: var(--ash); margin: 10px 0 8px; }
.aas__ind-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ast); margin: 0; }

/* ---------- 09. Why 3Shadz ---------- */
.aas__why { padding: 130px 0; background: var(--asbg); }
.aas__why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.aas__why-item { padding: 32px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--asb); transition: all .35s ease; }
.aas__why-item:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.aas__why-item h3 { font-size: 18.5px; font-weight: 600; color: var(--ash); margin: 0 0 10px; }
.aas__why-item p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--ast); margin: 0; }

/* ---------- 10. Connected solutions ---------- */
/* ---------- 10. Connected solutions :: the fold-out rack ----------
   Same aad__fold-* treatment as the AI Agent Development page (its own
   class family, not aas__connect-*, so it skips the shared horizontal-
   rail "Archetype R"): six native <details> panels, only one folds
   open at a time via name="aas-fold". Collapses to a plain stacked
   accordion below 1200px - see Responsive section. */
.aas__connect { padding: 130px 0; background: #fff; }
.aas__fold { display: flex; align-items: stretch; gap: 6px; margin-top: 56px; height: 400px; }
.aas__fold-item {
  flex: 1 1 90px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--asbg);
  overflow: hidden;
  transition: flex-basis .55s cubic-bezier(.22, .61, .36, 1), background .4s ease, box-shadow .4s ease;
}
.aas__fold-item[open] { flex: 3 1 380px; background: #fff; box-shadow: 0 26px 54px rgba(28, 30, 43, .12); }
.aas__fold-item > summary {
  list-style: none;
  cursor: pointer;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 12px 14px;
  outline: none;
}
.aas__fold-item > summary::-webkit-details-marker { display: none; }
.aas__fold-item > summary::marker { content: ""; }
.aas__fold-item:not([open]) > summary:hover { background: rgba(0, 95, 204, .05); }
.aas__fold-num {
  order: 3;
  margin-top: auto;
  padding-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ast);
  font-variant-numeric: tabular-nums;
}
.aas__fold-item > summary .aas__ico { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; margin: 0 0 14px; }
.aas__fold-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ash);
}
.aas__fold-body {
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 30px;
  transition: opacity .2s ease;
}
.aas__fold-item[open] > summary {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 28px 14px;
}
.aas__fold-item[open] .aas__fold-num { order: 3; margin: 0 0 0 auto; padding-top: 0; }
.aas__fold-item[open] > summary .aas__ico { width: 48px; height: 48px; font-size: 19px; border-radius: 13px; margin: 0 16px 0 0; }
.aas__fold-item[open] .aas__fold-label { writing-mode: horizontal-tb; transform: none; font-size: 19px; }
.aas__fold-item[open] .aas__fold-body {
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  padding: 0 28px 22px;
  transition: opacity .35s ease .12s;
}
.aas__fold-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--ast); margin: 0 0 18px; }
.aas__fold-body .aas__link { white-space: nowrap; }

/* ---------- 11. FAQ ---------- */
.aas__faq { padding: 130px 0; background: var(--asbg); }
.aas__faq-list { max-width: 860px; margin: 56px auto 0; }
.aas__faq-item { border-bottom: 1px solid var(--asb); }
.aas__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--ash);
  cursor: pointer;
}
.aas__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--asb);
  color: var(--asc);
  font-size: 12px;
  transition: all .3s ease;
}
.aas__faq-item.is-open .aas__faq-q { color: var(--asc); }
.aas__faq-item.is-open .aas__faq-icon { background: var(--asc); border-color: var(--asc); color: #fff; transform: rotate(45deg); }
.aas__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.aas__faq-item.is-open .aas__faq-a { max-height: 420px; }
.aas__faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ast); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .aas__hero-grid { grid-template-columns: 1fr; }
  .aas__deck { max-width: 440px; margin: 0 auto; }
  .aas__build-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 1199px) {
  .aas__page .aas__title { font-size: 34px; }
  .aas__hero-title { font-size: 40px; }
  .aas__hero-grid { grid-template-columns: 1fr; }
  .aas__deck { max-width: 440px; margin: 0 auto; }
  .aas__intro-grid { grid-template-columns: 1fr; gap: 46px; }
  .aas__value-grid { grid-template-columns: repeat(2, 1fr); }
  .aas__build-grid { grid-template-columns: repeat(2, 1fr); }
  .aas__cycle-row { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .aas__cycle-row::before { display: none; }
  .aas__guard-grid { grid-template-columns: repeat(2, 1fr); }
  .aas__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .aas__why-grid { grid-template-columns: repeat(2, 1fr); }
  .aas__fold { flex-direction: column; height: auto; gap: 0; border-top: 1px solid var(--asb); }
  .aas__fold-item { flex: none; border-radius: 0; background: transparent; border-bottom: 1px solid var(--asb); }
  .aas__fold-item[open] { background: transparent; box-shadow: none; }
  .aas__fold-item > summary,
  .aas__fold-item[open] > summary {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 4px;
  }
  .aas__fold-num,
  .aas__fold-item[open] .aas__fold-num { order: 3; margin: 0 0 0 auto; padding: 0; }
  .aas__fold-item > summary .aas__ico,
  .aas__fold-item[open] > summary .aas__ico { margin: 0; width: 42px; height: 42px; font-size: 17px; }
  .aas__fold-label,
  .aas__fold-item[open] .aas__fold-label { writing-mode: horizontal-tb; transform: none; font-size: 17.5px; }
  .aas__fold-item[open] .aas__fold-label { color: var(--asc); }
  .aas__fold-body,
  .aas__fold-item[open] .aas__fold-body { padding: 0 4px 0 58px; }
  .aas__fold-item[open] .aas__fold-body { padding-bottom: 26px; overflow: visible; }
}
@media only screen and (max-width: 767px) {
  .aas__hero { padding: 150px 0 80px; }
  .aas__hero-title { font-size: 32px; }
  .aas__hero-lead { font-size: 17px; }
  .aas__deck { max-width: 100%; padding: 26px 22px 22px; }
  .aas__intro,
  .aas__value,
  .aas__build,
  .aas__cycle,
  .aas__demo,
  .aas__guard,
  .aas__ind,
  .aas__why,
  .aas__connect,
  .aas__faq { padding: 80px 0; }
  .aas__value-grid { grid-template-columns: 1fr; }
  .aas__build-grid { grid-template-columns: 1fr; }
  .aas__cycle-row { grid-template-columns: 1fr; row-gap: 26px; }
  .aas__demo-view { padding: 30px 22px; }
  .aas__demo-time { font-size: 24px; }
  .aas__guard-grid { grid-template-columns: 1fr; }
  .aas__ind-grid { grid-template-columns: 1fr; }
  .aas__why-grid { grid-template-columns: 1fr; }
  .aas__fold-body,
  .aas__fold-item[open] .aas__fold-body { padding-left: 4px; }
  .aas__faq-q { font-size: 16px; }
}


/* ============================================================
   AI APPLICATION DEVELOPMENT PAGE (apd__*)
   Scoped entirely to .apd__page (added on <main> of
   ai-application-development.html). Same #005fcc/#07152F/Kanit
   family language as its AI & Intelligent Solutions siblings,
   with a coral secondary accent (#ef476f) so it reads as its
   own thing next to the purple (gai__/aic__/svc__/aisol__/csw__),
   amber (aad__), cyan (cds__) and emerald (aas__) siblings. The
   signature component is the apd__panel: a live "Release Panel"
   of application capabilities landing one by one with a status
   pill, standing in for the automation control deck, agent trace,
   console and gauge treatments used elsewhere. Every keyframe is
   prefixed apdKf* so nothing collides with the theme. Nothing in
   this block leaks to other pages.
   ============================================================ */
.apd__page {
  --apc: #005fcc;
  --apc2: #ef476f;
  --apc3: #ff8fa8;
  --aph: #1c1e2b;
  --apt: #6b7089;
  --apb: #e9eaf5;
  --apbg: #f6f7fc;
  --apdark: #07152F;
  --apmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.apd__page .apd__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--apc);
  margin-bottom: 18px;
}
.apd__page .apd__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--aph); margin: 0 0 20px; }
.apd__page .apd__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--aph); margin: 0 0 18px; }
.apd__page .apd__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--apt); margin: 0 0 16px; }
.apd__page .apd__text:last-child { margin-bottom: 0; }
.apd__page .apd__head { max-width: 800px; }
.apd__page .apd__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.apd__page .apd__btn,
.apd__page .apd__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.apd__page .apd__btn { color: #fff; background: var(--apc); border: 2px solid var(--apc); }
.apd__page .apd__btn:hover { background: var(--apc2); border-color: var(--apc2); color: #fff; }
.apd__page .apd__btn-ghost { color: var(--apc); border: 2px solid var(--apc); background: transparent; }
.apd__page .apd__btn-ghost:hover { background: var(--apc); color: #fff; }

.apd__page .apd__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--apc);
  transition: gap .3s ease, color .3s ease;
}
.apd__page .apd__link:hover { gap: 15px; color: var(--apc2); }

.apd__page .apd__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(0, 95, 204, .1);
  color: var(--apc);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.apd__page .apd__dark { position: relative; overflow: hidden; background: var(--apdark); }
.apd__page .apd__dark > .container { position: relative; z-index: 2; }
.apd__page .apd__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(239, 71, 111, .22), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.apd__page .apd__dark .apd__eyebrow { color: var(--apc3); }
.apd__page .apd__dark .apd__title { color: #fff; }
.apd__page .apd__dark .apd__text { color: var(--apmuted); }
.apd__page .apd__dark .apd__ico { background: rgba(239, 71, 111, .16); color: var(--apc2); }

/* ---------- 01. Hero: the release panel ---------- */
.apd__hero { position: relative; overflow: hidden; background: var(--apdark); padding: 190px 0 120px; }
.apd__hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.apd__hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(820px 560px at 84% 18%, #000, transparent 70%);
          mask-image: radial-gradient(820px 560px at 84% 18%, #000, transparent 70%);
}
.apd__hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; animation: apdKfDrift 13s ease-in-out infinite; }
.apd__hero-orb--1 { width: 300px; height: 300px; background: var(--apc2); top: -50px; right: 6%; }
.apd__hero-orb--2 { width: 260px; height: 260px; background: var(--apc); bottom: -60px; left: 8%; animation-delay: 2.6s; }
@keyframes apdKfDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.07); } }

.apd__hero > .container { position: relative; z-index: 2; }
.apd__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.apd__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(239, 71, 111, .35);
  background: rgba(239, 71, 111, .1);
  color: var(--apc2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.apd__hero-badge i { font-size: 12px; }
.apd__hero-title { font-size: 50px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.apd__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--apc2), var(--apc3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.apd__hero-lead { font-size: 18px; font-weight: 400; line-height: 1.8; color: #dbe6f4; margin: 0 0 18px; max-width: 560px; }
.apd__hero-text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--apmuted); margin: 0 0 34px; max-width: 560px; }
.apd__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.apd__hero-actions .apd__btn-ghost { color: #dbe6f4; border-color: rgba(255, 255, 255, .28); }
.apd__hero-actions .apd__btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

.apd__hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; font-weight: 400; color: var(--apmuted); }
.apd__hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.apd__hero-note i { color: var(--apc2); font-size: 12px; }

/* Release panel - the hero's visual centerpiece: application
   capabilities landing live with a status pill, instead of a
   photo, gauge, orbit, or switch deck. */
.apd__panel {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 20, 43, .78);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  padding: 30px 30px 26px;
}
.apd__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.apd__panel-head span:first-child { font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--apmuted); }
.apd__panel-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(239, 71, 111, .14);
  color: var(--apc2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.apd__panel-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--apc2); animation: apdKfBlink 1.4s ease-in-out infinite; }
@keyframes apdKfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.apd__panel-rows { display: grid; gap: 4px; }
.apd__panel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  opacity: 0;
  animation: apdKfRowIn .5s ease both;
  animation-delay: var(--d, 0s);
}
.apd__panel-row:last-child { border-bottom: none; }
@keyframes apdKfRowIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

.apd__panel-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 163, 255, .14);
  color: var(--apc3);
  font-size: 14px;
}
.apd__panel-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.apd__panel-text strong { font-size: 13.5px; font-weight: 600; color: #fff; }
.apd__panel-text span { font-size: 11.5px; font-weight: 300; color: var(--apmuted); margin-top: 2px; }

.apd__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .08);
  color: var(--apmuted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: 0;
  animation: apdKfPillIn .4s ease both;
  animation-delay: calc(var(--d, 0s) + .55s);
}
.apd__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--apc2); }
@keyframes apdKfPillIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

.apd__panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.apd__panel-foot span { font-size: 12px; font-weight: 300; color: var(--apmuted); }
.apd__panel-foot strong { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
.apd__panel-foot strong small { font-size: 13px; font-weight: 400; color: var(--apc2); margin-left: 4px; }
.apd__panel-note { margin: 16px 0 0; font-size: 11.5px; font-weight: 300; line-height: 1.6; color: rgba(219, 230, 244, .55); text-align: center; }

/* ---------- 02. Intro ---------- */
.apd__intro { padding: 130px 0; background: #fff; }
.apd__intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.apd__intro-figure { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px rgba(28, 30, 43, .13); }
.apd__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apd__intro-badge {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.apd__intro-badge strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.apd__intro-badge span { display: block; font-size: 12.5px; font-weight: 300; color: var(--apmuted); margin-top: 4px; }
.apd__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--apc);
  background: var(--apbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--apt);
}
.apd__intro-note a { color: var(--apc); font-weight: 600; }
.apd__intro-note a:hover { color: var(--apc2); }

/* ---------- 03-10. Section wrappers (grids/cards are shared, see the archetype block above) ---------- */
.apd__value { padding: 130px 0; background: var(--apbg); }
.apd__build { padding: 130px 0; background: #fff; }
.apd__build-card .apd__ico { width: 44px; height: 44px; font-size: 17px; margin-bottom: 16px; }
.apd__guard { padding: 130px 0; }
.apd__ind { padding: 130px 0; background: #fff; }
.apd__why { padding: 130px 0; background: var(--apbg); }
.apd__connect { padding: 130px 0; background: #fff; }

/* ---------- 11. FAQ ---------- */
.apd__faq { padding: 130px 0; background: var(--apbg); }
.apd__faq-list { max-width: 860px; margin: 56px auto 0; }
.apd__faq-item { border-bottom: 1px solid var(--apb); }
.apd__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 26px 4px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--aph);
  cursor: pointer;
  transition: color .25s ease;
}
.apd__faq-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--apb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--apc);
  transition: all .3s ease;
}
.apd__faq-item.is-open .apd__faq-q { color: var(--apc); }
.apd__faq-item.is-open .apd__faq-icon { background: var(--apc); border-color: var(--apc); color: #fff; transform: rotate(45deg); }
.apd__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.apd__faq-item.is-open .apd__faq-a { max-height: 420px; }
.apd__faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--apt); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .apd__hero-grid { grid-template-columns: 1fr; }
  .apd__panel { max-width: 440px; margin: 0 auto; }
}
@media only screen and (max-width: 1199px) {
  .apd__page .apd__title { font-size: 34px; }
  .apd__hero-title { font-size: 40px; }
  .apd__hero-grid { grid-template-columns: 1fr; }
  .apd__panel { max-width: 440px; margin: 0 auto; }
  .apd__intro-grid { grid-template-columns: 1fr; gap: 46px; }
}
@media only screen and (max-width: 767px) {
  .apd__hero { padding: 150px 0 80px; }
  .apd__hero-title { font-size: 32px; }
  .apd__hero-lead { font-size: 17px; }
  .apd__panel { max-width: 100%; padding: 26px 22px 22px; }
  .apd__intro,
  .apd__value,
  .apd__build,
  .apd__guard,
  .apd__ind,
  .apd__why,
  .apd__connect,
  .apd__faq { padding: 80px 0; }
  .apd__faq-q { font-size: 16px; }
}


/* ============================================================
   CONVERSATIONAL AI SOLUTIONS PAGE (cai__*)
   Scoped entirely to .cai__page (added on <main> of
   conversational-ai-solutions.html). Same #005fcc/#07152F/Kanit
   family language as its AI & Intelligent Solutions siblings,
   with a teal secondary accent (#0ea5a4) so it reads as its own
   thing next to the purple, amber, cyan, emerald and coral
   siblings. The signature component is the cai__chat: a live
   conversation thread with user and AI message bubbles landing
   in sequence, standing in for the release panel, control deck,
   agent trace, console and gauge treatments used elsewhere.
   Every keyframe is prefixed caiKf* so nothing collides with the
   theme. Nothing in this block leaks to other pages.
   ============================================================ */
.cai__page {
  --cic: #005fcc;
  --cic2: #0ea5a4;
  --cic3: #5fd0cd;
  --cih: #1c1e2b;
  --cit: #6b7089;
  --cib: #e9eaf5;
  --cibg: #f6f7fc;
  --cidark: #07152F;
  --cimuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.cai__page .cai__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cic);
  margin-bottom: 18px;
}
.cai__page .cai__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--cih); margin: 0 0 20px; }
.cai__page .cai__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--cih); margin: 0 0 18px; }
.cai__page .cai__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--cit); margin: 0 0 16px; }
.cai__page .cai__text:last-child { margin-bottom: 0; }
.cai__page .cai__head { max-width: 800px; }
.cai__page .cai__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.cai__page .cai__btn,
.cai__page .cai__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cai__page .cai__btn { color: #fff; background: var(--cic); border: 2px solid var(--cic); }
.cai__page .cai__btn:hover { background: var(--cic2); border-color: var(--cic2); color: #fff; }
.cai__page .cai__btn-ghost { color: var(--cic); border: 2px solid var(--cic); background: transparent; }
.cai__page .cai__btn-ghost:hover { background: var(--cic); color: #fff; }

.cai__page .cai__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cic);
  transition: gap .3s ease, color .3s ease;
}
.cai__page .cai__link:hover { gap: 15px; color: var(--cic2); }

.cai__page .cai__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(0, 95, 204, .1);
  color: var(--cic);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.cai__page .cai__dark { position: relative; overflow: hidden; background: var(--cidark); }
.cai__page .cai__dark > .container { position: relative; z-index: 2; }
.cai__page .cai__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(14, 165, 164, .24), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.cai__page .cai__dark .cai__eyebrow { color: var(--cic3); }
.cai__page .cai__dark .cai__title { color: #fff; }
.cai__page .cai__dark .cai__text { color: var(--cimuted); }
.cai__page .cai__dark .cai__ico { background: rgba(14, 165, 164, .16); color: var(--cic2); }

/* ---------- 01. Hero: the live conversation thread ---------- */
.cai__hero { position: relative; overflow: hidden; background: var(--cidark); padding: 190px 0 120px; }
.cai__hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cai__hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(820px 560px at 84% 18%, #000, transparent 70%);
          mask-image: radial-gradient(820px 560px at 84% 18%, #000, transparent 70%);
}
.cai__hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; animation: caiKfDrift 13s ease-in-out infinite; }
.cai__hero-orb--1 { width: 300px; height: 300px; background: var(--cic2); top: -50px; right: 6%; }
.cai__hero-orb--2 { width: 260px; height: 260px; background: var(--cic); bottom: -60px; left: 8%; animation-delay: 2.6s; }
@keyframes caiKfDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.07); } }

.cai__hero > .container { position: relative; z-index: 2; }
.cai__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.cai__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(14, 165, 164, .35);
  background: rgba(14, 165, 164, .1);
  color: var(--cic2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.cai__hero-badge i { font-size: 12px; }
.cai__hero-title { font-size: 50px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.cai__hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--cic2), var(--cic3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cai__hero-lead { font-size: 18px; font-weight: 400; line-height: 1.8; color: #dbe6f4; margin: 0 0 18px; max-width: 560px; }
.cai__hero-text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--cimuted); margin: 0 0 34px; max-width: 560px; }
.cai__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.cai__hero-actions .cai__btn-ghost { color: #dbe6f4; border-color: rgba(255, 255, 255, .28); }
.cai__hero-actions .cai__btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

.cai__hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; font-weight: 400; color: var(--cimuted); }
.cai__hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.cai__hero-note i { color: var(--cic2); font-size: 12px; }

/* Conversation thread - the hero's visual centerpiece: user and
   AI message bubbles landing live, instead of a photo, gauge,
   orbit, or switch deck. */
.cai__chat {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 20, 43, .78);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  padding: 26px 24px 24px;
}
.cai__chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.cai__chat-head span:first-child { font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cimuted); }
.cai__chat-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(14, 165, 164, .14);
  color: var(--cic2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cai__chat-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cic2); animation: caiKfBlink 1.4s ease-in-out infinite; }
@keyframes caiKfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.cai__chat-body { display: flex; flex-direction: column; gap: 12px; }
.cai__msg { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; opacity: 0; animation: caiKfMsgIn .45s ease both; animation-delay: var(--d, 0s); }
@keyframes caiKfMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cai__msg--user { align-self: flex-end; flex-direction: row-reverse; }
.cai__msg--ai { align-self: flex-start; }
.cai__msg-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(14, 165, 164, .18);
  color: var(--cic2);
}
.cai__msg--user .cai__msg-avatar { background: rgba(255, 255, 255, .12); color: var(--cimuted); }
.cai__msg-bubble { padding: 10px 14px; border-radius: 14px; font-size: 12.5px; font-weight: 300; line-height: 1.55; }
.cai__msg--ai .cai__msg-bubble { background: rgba(14, 165, 164, .14); color: #eaf7f6; border-bottom-left-radius: 4px; }
.cai__msg--user .cai__msg-bubble { background: rgba(255, 255, 255, .09); color: var(--cimuted); border-bottom-right-radius: 4px; }

.cai__typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; border-radius: 14px; border-bottom-left-radius: 4px; background: rgba(14, 165, 164, .14); }
.cai__typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--cic2); animation: caiKfTypingDot 1.1s ease-in-out infinite; }
.cai__typing span:nth-child(2) { animation-delay: .15s; }
.cai__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes caiKfTypingDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.cai__chat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.cai__chat-foot span { font-size: 12px; font-weight: 300; color: var(--cimuted); }
.cai__chat-foot strong { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
.cai__chat-foot strong small { font-size: 13px; font-weight: 400; color: var(--cic2); margin-left: 4px; }
.cai__chat-note { margin: 16px 0 0; font-size: 11.5px; font-weight: 300; line-height: 1.6; color: rgba(219, 230, 244, .55); text-align: center; }

/* ---------- 02. Intro ---------- */
.cai__intro { padding: 130px 0; background: #fff; }
.cai__intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.cai__intro-figure { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px rgba(28, 30, 43, .13); }
.cai__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cai__intro-badge {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.cai__intro-badge strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.cai__intro-badge span { display: block; font-size: 12.5px; font-weight: 300; color: var(--cimuted); margin-top: 4px; }
.cai__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--cic);
  background: var(--cibg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--cit);
}
.cai__intro-note a { color: var(--cic); font-weight: 600; }
.cai__intro-note a:hover { color: var(--cic2); }

/* ---------- 03-10. Section wrappers (grids/cards are shared, see the archetype block above) ---------- */
.cai__value { padding: 130px 0; background: var(--cibg); }
.cai__build { padding: 130px 0; background: #fff; }
.cai__build-card .cai__ico { width: 44px; height: 44px; font-size: 17px; margin-bottom: 16px; }
.cai__guard { padding: 130px 0; }
.cai__ind { padding: 130px 0; background: #fff; }
.cai__why { padding: 130px 0; background: var(--cibg); }
.cai__connect { padding: 130px 0; background: #fff; }

/* ---------- 11. FAQ ---------- */
.cai__faq { padding: 130px 0; background: var(--cibg); }
.cai__faq-list { max-width: 860px; margin: 56px auto 0; }
.cai__faq-item { border-bottom: 1px solid var(--cib); }
.cai__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 26px 4px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--cih);
  cursor: pointer;
  transition: color .25s ease;
}
.cai__faq-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--cib);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--cic);
  transition: all .3s ease;
}
.cai__faq-item.is-open .cai__faq-q { color: var(--cic); }
.cai__faq-item.is-open .cai__faq-icon { background: var(--cic); border-color: var(--cic); color: #fff; transform: rotate(45deg); }
.cai__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.cai__faq-item.is-open .cai__faq-a { max-height: 420px; }
.cai__faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--cit); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cai__hero-grid { grid-template-columns: 1fr; }
  .cai__chat { max-width: 440px; margin: 0 auto; }
}
@media only screen and (max-width: 1199px) {
  .cai__page .cai__title { font-size: 34px; }
  .cai__hero-title { font-size: 40px; }
  .cai__hero-grid { grid-template-columns: 1fr; }
  .cai__chat { max-width: 440px; margin: 0 auto; }
  .cai__intro-grid { grid-template-columns: 1fr; gap: 46px; }
}
@media only screen and (max-width: 767px) {
  .cai__hero { padding: 150px 0 80px; }
  .cai__hero-title { font-size: 32px; }
  .cai__hero-lead { font-size: 17px; }
  .cai__chat { max-width: 100%; padding: 22px 18px 18px; }
  .cai__intro,
  .cai__value,
  .cai__build,
  .cai__guard,
  .cai__ind,
  .cai__why,
  .cai__connect,
  .cai__faq { padding: 80px 0; }
  .cai__faq-q { font-size: 16px; }
}


/* ============================================================
   DESIGN & EXPERIENCE PAGE (dex__*)
   Scoped entirely to .dex__page (added on <main> of
   design-experience.html). Deliberately breaks from the
   #005fcc/#07152F "tech" palette every other custom page shares:
   a warm coral/amber studio palette on cream/ink, paired with
   Fraunces as a display face over Kanit, so this page reads as a
   design studio rather than another engineering solution page.
   Component language (canvas hero with annotation pins, tabbed
   service showcase with live mock previews, sticky-note principle
   board, draggable before/after reveal, living style-guide
   specimen panel) is unique to this page. Keyframes are prefixed
   dexKf* so nothing collides with the rest of the theme.
   ============================================================ */
.dex__page {
  --dp: #FF5A3C;
  --dp2: #FFB238;
  --dp3: #FF8A6B;
  --dv: #7C5CFF;
  --dh: #201A2E;
  --dt: #6f6478;
  --db: #ece1d6;
  --dbg: #FBF5EF;
  --ddark: #1B1523;
  --dmuted: #cdbfd9;
  --dok: #2fbf85;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.dex__page .dex__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--dp);
  margin-bottom: 18px;
}
.dex__page .dex__title {
  font-family: "Fraunces", serif;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--dh);
  margin: 0 0 20px;
}
.dex__page .dex__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dh); margin: 0 0 18px; }
.dex__page .dex__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dt); margin: 0 0 16px; }
.dex__page .dex__text:last-child { margin-bottom: 0; }
.dex__page .dex__head { max-width: 860px; }
.dex__page .dex__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.dex__page .dex__dark { position: relative; overflow: hidden; background: var(--ddark); }
.dex__page .dex__dark > .container { position: relative; z-index: 1; }
.dex__page .dex__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(255, 90, 60, .28), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(124, 92, 255, .26), transparent 64%);
}
.dex__page .dex__dark .dex__eyebrow { color: var(--dp3); }
.dex__page .dex__dark .dex__title { color: #fff; }
.dex__page .dex__dark .dex__lead { color: #f1e8f5; }
.dex__page .dex__dark .dex__text { color: var(--dmuted); }

.dex__page .dex__btn,
.dex__page .dex__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dex__page .dex__btn { color: #fff; background: var(--dp); border: 2px solid var(--dp); }
.dex__page .dex__btn:hover { background: var(--dh); border-color: var(--dh); color: #fff; }
.dex__page .dex__btn-outline { color: var(--dp); border: 2px solid var(--dp); background: transparent; }
.dex__page .dex__btn-outline:hover { background: var(--dp); color: #fff; }
.dex__page .dex__dark .dex__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.dex__page .dex__dark .dex__btn-outline:hover { background: #fff; border-color: #fff; color: var(--ddark); }

/* Arrow link used at the foot of most cards and sections. */
.dex__page .dex__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dp);
  transition: gap .3s ease, color .3s ease;
}
.dex__page .dex__link:hover { gap: 15px; color: var(--dv); }
.dex__page .dex__dark .dex__link { color: var(--dp3); }
.dex__page .dex__dark .dex__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.dex__page .dex__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--dp);
  font-size: 20px;
  margin-bottom: 18px;
}
.dex__page .dex__dark .dex__ico { background: rgba(255, 138, 107, .16); color: var(--dp3); }

/* "Highlighter marker" word treatment used in the hero title. A solid chip
   (rather than a partial underline-band) so the dark ink text stays fully
   legible no matter what section background it is dropped on - a partial
   band left the un-covered part of each glyph nearly invisible against the
   dark hero background. */
.dex__page .dex__mark {
  position: relative;
  display: inline-block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--ddark);
  background: linear-gradient(100deg, var(--dp2) 0%, var(--dp) 100%);
  border-radius: 8px;
  padding: 2px 12px;
  line-height: 1.28;
}


/* ---------- 01. Hero ---------- */
.dex__hero {
  position: relative;
  overflow: hidden;
  background: var(--ddark);
  padding: 200px 0 110px;
}
/* Soft coral/violet studio glow, distinct from the blue glows on every other page. */
.dex__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 84% -10%, rgba(255, 90, 60, .34), transparent 60%),
              radial-gradient(720px 420px at 2% 106%, rgba(124, 92, 255, .3), transparent 62%);
}
/* Dot-grid "design canvas" overlay instead of the blueprint line-grid used elsewhere. */
.dex__hero-canvas {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 70% at 50% 38%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 38%, #000 20%, transparent 100%);
}
.dex__hero > .container { position: relative; z-index: 2; }
.dex__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dex__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 26px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: #f1e8f5;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dex__hero-eyebrow i { font-size: 12px; color: var(--dp3); }
.dex__hero-title {
  font-family: "Fraunces", serif;
  font-size: 56px;
  line-height: 1.14;
  font-weight: 500;
  color: #fff;
  margin: 0 0 24px;
}
.dex__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #f1e8f5; margin: 0 0 20px; }
.dex__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dmuted); margin: 0 0 16px; }
.dex__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.dex__hero-stats {
  list-style: none;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.dex__hero-stats li { position: relative; padding-left: 20px; }
.dex__hero-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--dp2), var(--dp));
}
.dex__hero-stats strong { display: block; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.2; }
.dex__hero-stats span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--dmuted); line-height: 1.5; }

.dex__hero-figure { position: relative; }
.dex__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 90, 60, .5), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.dex__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}
.dex__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Floating "sticky note" annotations pinned to the corners of the canvas frame. */
.dex__pin {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 50px;
  background: #fff;
  color: var(--ddark);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.dex__pin i { color: var(--dp); font-size: 12px; }
.dex__pin--tl { top: -16px; left: -14px; transform: rotate(-4deg); }
.dex__pin--tr { top: 12%; right: -22px; transform: rotate(3deg); }
.dex__pin--bl { bottom: 14%; left: -26px; transform: rotate(2deg); }
.dex__pin--br { bottom: -16px; right: -10px; transform: rotate(-3deg); }


/* ---------- Keyword marquee ---------- */
.dex__marquee {
  background: linear-gradient(90deg, var(--dp), var(--dp2));
  padding: 20px 0;
  overflow: hidden;
}
.dex__marquee-mask { overflow: hidden; }
.dex__marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: dexKfMarquee 34s linear infinite;
}
.dex__marquee-track span {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.dex__marquee-track i { font-size: 6px; color: rgba(255, 255, 255, .65); }
@keyframes dexKfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ---------- 02. Introduction ---------- */
.dex__intro { padding: 120px 0; background: #fff; }
.dex__intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.dex__intro-figure { position: relative; }

/* A small "specimen" card standing in for a product photo - swatches, a
   type sample, and a spacing scale, echoing the design-systems section later. */
.dex__swatch-card {
  border-radius: 22px;
  background: var(--dbg);
  border: 1px solid var(--db);
  padding: 40px 34px;
  aspect-ratio: 4 / 3.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}
.dex__swatch-row { display: flex; gap: 14px; }
.dex__swatch {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sw);
  border: 4px solid #fff;
  box-shadow: 0 8px 18px rgba(32, 26, 46, .14);
}
.dex__swatch-type strong {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 64px;
  line-height: 1;
  color: var(--dh);
}
.dex__swatch-type span { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dt); }
.dex__swatch-spacing { display: flex; align-items: flex-end; gap: 10px; }
.dex__swatch-spacing i { display: block; height: 10px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--dp2), var(--dp)); }

.dex__intro-badge {
  position: absolute;
  z-index: 2;
  right: -22px;
  bottom: -26px;
  max-width: 250px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--ddark);
  box-shadow: 0 22px 50px rgba(27, 21, 35, .28);
}
.dex__intro-badge strong { display: block; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.4; }
.dex__intro-badge span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--dmuted); line-height: 1.5; }

.dex__intro-copy { padding-left: 10px; }


/* ---------- 03. What we design (tabbed showcase) ---------- */
.dex__svc { padding: 120px 0; background: var(--dbg); }
.dex__svc-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 30px;
  align-items: start;
}
.dex__svc-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 120px;
}
.dex__svc-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--db);
  background: #fff;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.dex__svc-tab:hover { transform: translateX(4px); }
.dex__svc-tab strong { display: block; font-size: 16px; font-weight: 600; color: var(--dh); }
.dex__svc-tab em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 300; color: var(--dt); line-height: 1.5; }
.dex__svc-tab-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--dp);
  font-size: 18px;
}
.dex__svc-tab.is-active {
  border-color: var(--dp);
  background: var(--ddark);
  box-shadow: 0 18px 34px rgba(27, 21, 35, .16);
}
.dex__svc-tab.is-active strong { color: #fff; }
.dex__svc-tab.is-active em { color: var(--dmuted); }
.dex__svc-tab.is-active .dex__svc-tab-ico { background: rgba(255, 138, 107, .18); color: var(--dp3); }

.dex__svc-panels { position: relative; }
.dex__svc-panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  padding: 44px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--db);
}
.dex__svc-num {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  color: var(--dp);
  margin-bottom: 10px;
}
.dex__svc-panel-copy h3 { font-family: "Fraunces", serif; font-size: 28px; font-weight: 600; color: var(--dh); margin: 0 0 14px; }
.dex__svc-panel-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dt); margin: 0 0 22px; }
.dex__svc-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.dex__svc-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--dh); }
.dex__svc-list i { color: var(--dok); font-size: 12px; }

.dex__svc-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 18px;
  background: var(--dbg);
  border: 1px solid var(--db);
}

/* Small self-contained "mock UI" graphics - one per discipline tab. */
.dex__mock { width: 78%; }
.dex__mock--ui { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(32, 26, 46, .12); }
.dex__mock-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--db); margin-right: 6px; }
.dex__mock-line { height: 10px; width: var(--w); border-radius: 6px; background: var(--dbg); border: 1px solid var(--db); }
.dex__mock-btn { margin-top: 6px; width: 40%; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--dp2), var(--dp)); }

.dex__mock--flow { display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; }
.dex__mock-node { width: 22px; height: 22px; border-radius: 50%; background: var(--dp); box-shadow: 0 0 0 6px rgba(255, 90, 60, .16); position: relative; z-index: 1; }
.dex__mock-node:nth-child(2) { background: var(--dv); box-shadow: 0 0 0 6px rgba(124, 92, 255, .16); }
.dex__mock-node:nth-child(3) { background: var(--dok); box-shadow: 0 0 0 6px rgba(47, 191, 133, .16); }
.dex__mock--flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--db); z-index: 0; }

.dex__mock--chart { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 150px; }
.dex__mock--chart i { display: block; width: 20px; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--dp2), var(--dp)); }

.dex__mock--tokens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dex__mock--tokens span { display: block; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 10px 20px rgba(32, 26, 46, .12); }
.dex__mock--tokens span:nth-child(1) { background: var(--dp); }
.dex__mock--tokens span:nth-child(2) { background: var(--dp2); }
.dex__mock--tokens span:nth-child(3) { background: var(--dv); }
.dex__mock--tokens span:nth-child(4) { background: var(--ddark); }
.dex__mock--tokens span:nth-child(5) { background: var(--dok); }
.dex__mock--tokens span:nth-child(6) { background: var(--db); }


/* ---------- 04. Design principles (sticky-note moodboard) ---------- */
.dex__principle { padding: 130px 0 120px; background: #fff; }
.dex__note-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 34px;
}
.dex__note {
  position: relative;
  padding: 30px 26px 26px;
  background: var(--dbg);
  border: 1px solid var(--db);
  box-shadow: 0 16px 30px rgba(32, 26, 46, .1);
  /* --ty is tweened by JS from 32px to 0px on scroll-in; kept as a custom
     property (rather than letting JS touch `transform` directly) so it
     composes with each note's own resting `rotate()` below instead of
     fighting it, and so the plain CSS :hover rule keeps working unchanged.
     Starts at 0/opaque here - the page-scoped script sets the hidden
     starting point itself via gsap.set(), so notes stay visible if JS
     never runs instead of disappearing permanently. */
  --ty: 0px;
  transition: transform .35s ease, box-shadow .35s ease, opacity .5s ease;
}
.dex__note::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 58px;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 178, 56, .55);
  border: 1px solid rgba(255, 178, 56, .7);
}
.dex__note h3 { font-family: "Fraunces", serif; font-size: 19px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.dex__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0; }
.dex__note--1 { transform: translateY(var(--ty)) rotate(-2deg); }
.dex__note--2 { transform: translateY(var(--ty)) rotate(1.4deg); }
.dex__note--3 { transform: translateY(var(--ty)) rotate(-1deg); }
.dex__note--4 { transform: translateY(var(--ty)) rotate(2deg); }
.dex__note--5 { transform: translateY(var(--ty)) rotate(-1.6deg); }
.dex__note--6 { transform: translateY(var(--ty)) rotate(1deg); }
.dex__note:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 46px rgba(32, 26, 46, .16); }


/* ---------- 05. Before / after comparison ----------
   A plain static side-by-side pair, not a JS-driven reveal - simpler to
   reason about and immune to the stale-image-cache problems a clip-path
   drag slider runs into on repeated asset swaps. */
.dex__compare { padding: 120px 0; }
.dex__ba-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.dex__ba-card {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: box-shadow .4s ease, border-color .4s ease;
}
.dex__ba-card:hover { border-color: rgba(255, 138, 107, .5); box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 90, 60, .2); }
.dex__ba-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.dex__ba-card:hover img { transform: scale(1.06); }
.dex__ba-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: transform .3s ease;
}
.dex__ba-card:hover .dex__ba-tag { transform: translateY(-3px); }
.dex__ba-tag--before { background: rgba(27, 21, 35, .72); color: var(--dmuted); }
.dex__ba-tag--after { background: var(--dp); color: #fff; }

/* Pulsing connector badge, centred over the seam between the two cards. */
.dex__ba-vs {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: var(--ddark);
  font-size: 15px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%) scale(0);
  animation: dexKfBadgePulse 2.6s ease-in-out 1.1s infinite;
}
@keyframes dexKfBadgePulse {
  0%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 90, 60, .35); }
  50% { box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 0 14px rgba(255, 90, 60, 0); }
}
.dex__ba-note {
  max-width: 980px;
  margin: 26px auto 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--dmuted);
}
.dex__ba-note i { color: var(--dp3); margin-right: 8px; }


/* ---------- 06. Design process (blueprint track) ---------- */
.dex__proc { padding: 120px 0; background: var(--dbg); }
.dex__proc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 22px;
  position: relative;
}
.dex__proc-track::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 4%;
  right: 4%;
  border-top: 2px dashed var(--db);
  z-index: 0;
}
.dex__proc-step { position: relative; z-index: 1; padding-top: 0; }
.dex__proc-badge { position: relative; display: inline-block; margin-bottom: 18px; }
.dex__proc-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dp);
  color: var(--dp);
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 16px;
}
/* Small icon badge overlapping the bottom-right of the number circle. */
.dex__proc-ico {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ddark);
  color: #fff;
  font-size: 11px;
  border: 2px solid var(--dbg);
}
.dex__proc-step h3 { font-family: "Fraunces", serif; font-size: 18px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.dex__proc-step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--dt); margin: 0; }


/* ---------- 07. Design systems specimen ---------- */
.dex__spec { padding: 120px 0; background: #fff; }
.dex__spec-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; }
.dex__spec-panel {
  border-radius: 22px;
  background: var(--dbg);
  border: 1px solid var(--db);
  padding: 40px;
  display: grid;
  gap: 30px;
}
.dex__spec-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dt);
  margin-bottom: 14px;
}
.dex__spec-colors { display: flex; flex-wrap: wrap; gap: 12px; }
.dex__spec-colors span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--dt);
}
.dex__spec-colors span::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--sw);
  box-shadow: 0 8px 16px rgba(32, 26, 46, .14);
}
.dex__spec-type { display: grid; gap: 10px; }
.dex__spec-type span {
  font-family: "Fraunces", serif;
  font-size: var(--fs);
  color: var(--dh);
  line-height: 1.3;
}
.dex__spec-spacing { display: flex; align-items: flex-end; gap: 14px; }
.dex__spec-spacing i {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--w);
  height: var(--w);
  max-height: 48px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--dp2), var(--dp));
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 2px;
}
.dex__spec-components { display: flex; flex-wrap: wrap; gap: 12px; }
.dex__spec-chip { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.dex__spec-chip--solid { background: var(--dp); color: #fff; }
.dex__spec-chip--outline { background: transparent; border: 2px solid var(--dp); color: var(--dp); }
.dex__spec-chip--tag { background: rgba(124, 92, 255, .12); color: var(--dv); border-radius: 50px; }
.dex__spec-chip--input { background: #fff; border: 1px solid var(--db); color: var(--dt); min-width: 140px; }


/* ---------- 08. Tools ---------- */
.dex__tools { padding: 120px 0; }
.dex__tools-tabs { max-width: 1000px; margin: 0 auto; }
.dex__tools-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.dex__tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: var(--dmuted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s ease;
}
.dex__tools-tab i { font-size: 12px; }
.dex__tools-tab:hover { border-color: rgba(255, 255, 255, .38); color: #fff; }
.dex__tools-tab.is-active { background: var(--dp); border-color: var(--dp); color: #fff; }
.dex__tools-panels { position: relative; }
.dex__tools-panel { display: block; }
.dex__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dex__chips li {
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #f1e8f5;
  font-size: 14px;
  font-weight: 400;
}


/* ---------- 09. Capabilities included :: stamped capability deck ----------
   Unique to this page (not shared with the "Archetype X" woven-index
   pattern used on the other detail-page siblings): eight dossier cards in
   a two-up checkerboard, each carrying a rotated wax-seal icon mark and an
   oversized watermark ordinal, tiles tilted a fraction of a degree so the
   set reads as a laid-out deck rather than a repeating tile grid.
   -------------------------------------------------------------------- */
.dex__page .dex__cap { padding: 120px 0; background: var(--dbg); }
.dex__page .dex__cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  counter-reset: dexCap;
}
.dex__page .dex__cap-item {
  counter-increment: dexCap;
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 34px 30px 30px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--db);
  overflow: hidden;
  transform: rotate(-.4deg);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.dex__page .dex__cap-item:nth-child(odd) { transform: rotate(.5deg); }
.dex__page .dex__cap-item:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 26px 46px rgba(32, 26, 46, .14); z-index: 2; }

/* oversized watermark ordinal, driven by the counter - no markup needed */
.dex__page .dex__cap-item::after {
  content: counter(dexCap, decimal-leading-zero);
  position: absolute;
  right: 14px;
  bottom: -14px;
  font-family: "Fraunces", serif;
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  color: var(--dh);
  opacity: .06;
  pointer-events: none;
}

/* the seal: icon sits in a rotated blob so it reads as a stamp, not a tile */
.dex__page .dex__cap-item .dex__ico {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 30% 70% 65% 35% / 55% 45% 55% 45%;
  transform: rotate(-8deg);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s ease;
}
.dex__page .dex__cap-item:hover .dex__ico { transform: rotate(0deg) scale(1.06); border-radius: 50%; }

.dex__page .dex__cap-item h3 {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--dh);
  margin: 0 0 10px;
  transition: color .3s ease;
}
.dex__page .dex__cap-item p {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--dt);
  margin: 0;
  max-width: 40ch;
  transition: color .3s ease;
}

/* checkerboard: the 1st and 4th card of every run of four flips to ink */
.dex__page .dex__cap-item:nth-child(4n+1),
.dex__page .dex__cap-item:nth-child(4n+4) { background: var(--ddark); border-color: var(--ddark); }
.dex__page .dex__cap-item:nth-child(4n+1) h3,
.dex__page .dex__cap-item:nth-child(4n+4) h3 { color: #fff; }
.dex__page .dex__cap-item:nth-child(4n+1) p,
.dex__page .dex__cap-item:nth-child(4n+4) p { color: var(--dmuted); }
.dex__page .dex__cap-item:nth-child(4n+1) .dex__ico,
.dex__page .dex__cap-item:nth-child(4n+4) .dex__ico { background: rgba(255, 138, 107, .2); color: var(--dp3); }
.dex__page .dex__cap-item:nth-child(4n+1)::after,
.dex__page .dex__cap-item:nth-child(4n+4)::after { color: #fff; opacity: .07; }

@media (max-width: 1399px) {
  .dex__page .dex__cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .dex__page .dex__cap-grid { grid-template-columns: 1fr; gap: 16px; }
  .dex__page .dex__cap-item,
  .dex__page .dex__cap-item:nth-child(odd) { transform: none; padding: 28px 24px 26px; }
  .dex__page .dex__cap-item:hover { transform: translateY(-4px); }
  .dex__page .dex__cap-item::after { font-size: 54px; }
}


/* ---------- 10. Industries ---------- */
.dex__ind { padding: 120px 0; background: #fff; }
.dex__ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dex__ind-item {
  display: block;
  padding: 30px 24px;
  border-radius: 16px;
  background: var(--dbg);
  border: 1px solid var(--db);
  transition: all .3s ease;
}
.dex__ind-item:hover { background: var(--ddark); border-color: var(--ddark); transform: translateY(-4px); }
.dex__ind-item h3 { font-family: "Fraunces", serif; font-size: 17px; font-weight: 600; color: var(--dh); margin: 0 0 8px; transition: color .3s ease; }
.dex__ind-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; transition: color .3s ease; }
.dex__ind-item:hover h3 { color: #fff; }
.dex__ind-item:hover p { color: var(--dmuted); }
.dex__ind-item:hover .dex__ico { background: rgba(255, 138, 107, .18); color: var(--dp3); }
.dex__ind-foot { text-align: center; margin-top: 50px; }


/* ---------- 11. Why 3Shadz ---------- */
.dex__why { padding: 120px 0; background: var(--dbg); }
.dex__why-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.dex__why-list { display: grid; gap: 26px; }
.dex__why-item { display: flex; gap: 20px; }
.dex__why-num { flex: 0 0 auto; font-family: "Fraunces", serif; font-style: italic; font-size: 22px; font-weight: 500; color: var(--dp); }
.dex__why-item h3 { font-family: "Fraunces", serif; font-size: 17px; font-weight: 600; color: var(--dh); margin: 0 0 6px; }
.dex__why-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--dt); margin: 0; }
.dex__why-copy { padding-left: 10px; }
.dex__why-figure { margin-top: 30px; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.dex__why-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- 12. Connected services :: expanding panel rail ----------
   Unique to this page (not the shared "Archetype R" scroll rail used on
   its siblings, and not the formula-card grid this section used before):
   six dark panels sit edge to edge as one wide bar, each collapsed to a
   sliver with only its icon and a vertical label. Hovering (or focusing)
   a panel grows it via flex-grow while its neighbours yield, and a CSS
   container query on each panel's own inline-size reveals the horizontal
   title, copy and link only once it has room - so the same rule drives
   both the layout and the content reveal, no JS required.
   -------------------------------------------------------------------- */
.dex__connect { padding: 120px 0; background: #fff; }
.dex__page .dex__connect-grid {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 440px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ddark);
}
.dex__page .dex__connect-card {
  container-type: inline-size;
  position: relative;
  flex: 1 1 0%;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 28px;
  background: var(--ddark);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.22, .61, .36, 1);
}
.dex__page .dex__connect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .38), transparent 60%);
  pointer-events: none;
}
.dex__page .dex__connect-card:nth-child(2)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .36), transparent 60%); }
.dex__page .dex__connect-card:nth-child(3)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 178, 56, .34), transparent 60%); }
.dex__page .dex__connect-card:nth-child(4)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .3), transparent 60%); }
.dex__page .dex__connect-card:nth-child(5)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .3), transparent 60%); }
.dex__page .dex__connect-card:nth-child(6)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(47, 191, 133, .32), transparent 60%); }

.dex__page .dex__connect-card .dex__ico {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 20px;
  width: 42px;
  height: 42px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--dp3);
  font-size: 16px;
  transition: background .4s ease, color .4s ease;
}
.dex__page .dex__connect-card h3 {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: "Fraunces", serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
.dex__page .dex__connect-card p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--dmuted);
  transition: opacity .35s ease;
}
.dex__page .dex__connect-card > a {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--dp3);
  transition: opacity .35s ease;
}
.dex__page .dex__connect-card:hover .dex__ico,
.dex__page .dex__connect-card:focus-within .dex__ico { background: #fff; color: var(--ddark); }

@media (min-width: 768px) {
  .dex__page .dex__connect-card:nth-child(1) { flex-grow: 2.6; }
  .dex__page .dex__connect-card:nth-child(n+2) { flex-grow: 1; }
  .dex__page .dex__connect-grid:hover .dex__connect-card,
  .dex__page .dex__connect-grid:focus-within .dex__connect-card { flex-grow: 1; }
  .dex__page .dex__connect-grid .dex__connect-card:hover,
  .dex__page .dex__connect-grid .dex__connect-card:focus-within { flex-grow: 2.6; }
}

/* the reveal: driven purely by how much inline-size the panel itself has */
@container (min-width: 300px) {
  .dex__page .dex__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 21px;
    margin-top: auto;
  }
  .dex__page .dex__connect-card p { opacity: 1; max-height: 140px; }
  .dex__page .dex__connect-card > a { opacity: 1; max-height: 60px; pointer-events: auto; }
}

@media (max-width: 767px) {
  .dex__page .dex__connect-grid { flex-direction: column; height: auto; border-radius: 22px; }
  .dex__page .dex__connect-card { padding: 24px 22px 26px; min-height: 150px; }
  .dex__page .dex__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 19px;
    margin: auto 0 0;
  }
  .dex__page .dex__connect-card p { opacity: 1; max-height: none; }
  .dex__page .dex__connect-card > a { opacity: 1; max-height: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dex__page .dex__connect-card { transition: none; }
}


/* ---------- 13. FAQ ---------- */
.dex__faq { padding: 120px 0; background: var(--dbg); }
.dex__faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.dex__faq-item { border-radius: 16px; background: #fff; border: 1px solid var(--db); overflow: hidden; }
.dex__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  text-align: left;
  font-family: "Fraunces", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--dh);
  background: transparent;
  border: none;
  cursor: pointer;
}
.dex__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dbg);
  color: var(--dp);
  font-size: 12px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.dex__faq-item.is-open .dex__faq-icon { background: var(--dp); color: #fff; transform: rotate(135deg); }
.dex__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.dex__faq-a > div { overflow: hidden; }
.dex__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--dt); }
.dex__faq-item.is-open .dex__faq-a { grid-template-rows: 1fr; }


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .dex__hero-title { font-size: 48px; }
  .dex__page .dex__title { font-size: 36px; }
  .dex__cap-grid,
  .dex__ind-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1199px) {
  .dex__hero { padding: 170px 0 100px; }
  .dex__hero-grid,
  .dex__intro-grid,
  .dex__spec-grid,
  .dex__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .dex__hero-title { font-size: 42px; }
  .dex__hero-frame { aspect-ratio: 16 / 9; }
  .dex__pin { font-size: 12px; padding: 8px 14px; }
  .dex__intro-badge { right: 16px; bottom: -20px; }
  .dex__svc-shell { grid-template-columns: 1fr; }
  .dex__svc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .dex__svc-tab { flex: 1 1 260px; }
  .dex__svc-panel { grid-template-columns: 1fr; }
  .dex__svc-panel-visual { min-height: 180px; }
  .dex__note-board { grid-template-columns: repeat(2, 1fr); }
  .dex__proc-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .dex__proc-track::before { display: none; }
  .dex__connect-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .dex__hero { padding: 150px 0 90px; }
  .dex__hero-title { font-size: 36px; }
  .dex__page .dex__title { font-size: 30px; }
  .dex__hero-lead { font-size: 17px; }
  .dex__intro,
  .dex__svc,
  .dex__principle,
  .dex__compare,
  .dex__proc,
  .dex__spec,
  .dex__tools,
  .dex__cap,
  .dex__ind,
  .dex__why,
  .dex__connect,
  .dex__faq { padding: 90px 0; }
  .dex__page .dex__head--center { margin-bottom: 44px; }
  .dex__cap-grid,
  .dex__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .dex__pin--tl,
  .dex__pin--tr,
  .dex__pin--bl,
  .dex__pin--br { position: static; display: inline-flex; margin: 8px 8px 0 0; transform: none; }
  .dex__hero-figure { display: flex; flex-direction: column; }
}

@media (max-width: 767px) {
  .dex__hero { padding: 130px 0 70px; }
  .dex__hero-title { font-size: 30px; }
  .dex__page .dex__title { font-size: 26px; }
  .dex__page .dex__lead,
  .dex__hero-lead { font-size: 16px; }
  .dex__intro,
  .dex__svc,
  .dex__principle,
  .dex__compare,
  .dex__proc,
  .dex__spec,
  .dex__tools,
  .dex__cap,
  .dex__ind,
  .dex__why,
  .dex__connect,
  .dex__faq { padding: 70px 0; }
  .dex__hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .dex__hero-actions { gap: 12px; }
  .dex__page .dex__btn,
  .dex__page .dex__btn-outline { padding: 15px 26px; font-size: 15px; }
  .dex__cap-grid,
  .dex__ind-grid,
  .dex__connect-grid { grid-template-columns: 1fr; }
  .dex__note-board { grid-template-columns: 1fr; }
  .dex__proc-track { grid-template-columns: repeat(2, 1fr); }
  .dex__svc-panel { padding: 30px 24px; }
  .dex__svc-tab { flex: 1 1 100%; }
  .dex__spec-panel { padding: 28px 22px; }
  .dex__intro-badge { position: static; max-width: none; margin-top: 18px; }
  .dex__faq-q { font-size: 16px; padding: 20px 22px; }
  .dex__faq-a p { padding: 0 22px 22px; }
  .dex__tools-tab { padding: 10px 16px; font-size: 13px; }
  .dex__marquee-track span { font-size: 15px; }
  .dex__ba-grid { grid-template-columns: 1fr; }
  .dex__ba-card { aspect-ratio: 16 / 10; }
  .dex__ba-note { font-size: 13.5px; }
}

@media (max-width: 575px) {
  .dex__proc-track { grid-template-columns: 1fr; }
  .dex__swatch-type strong { font-size: 48px; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .dex__marquee-track { animation: none; }
  .dex__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   UI/UX DESIGN PAGE (uix__*)
   Scoped entirely to .uix__page (added on <main> of
   ui-ux-design.html). Shares its coral/amber/violet-on-cream
   palette with the parent Design & Experience page (dex__*) so
   the two read as one family, while keeping its own component
   language and Space Grotesk display face over Kanit body copy.
   Unique mechanics here: a hero with floating "live
   collaboration" cursor badges, a genuinely interactive
   component playground (working toggle, segmented control,
   range input), and a click-to-connect hotspot/legend pair
   explaining interface anatomy instead of a static image.
   Keyframes are prefixed uixKf* so nothing collides with the
   rest of the theme.
   ============================================================ */
.uix__page {
  --up: #FF5A3C;
  --up2: #FFB238;
  --um: #FF8A6B;
  --um2: #7C5CFF;
  --ui: #201A2E;
  --ut: #6f6478;
  --ub: #ece1d6;
  --ubg: #FBF5EF;
  --udark: #1B1523;
  --umuted: #cdbfd9;
  --uok: #2fbf85;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.uix__page .uix__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--up);
  margin-bottom: 18px;
}
.uix__page .uix__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ui);
  margin: 0 0 20px;
}
.uix__page .uix__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ui); margin: 0 0 18px; }
.uix__page .uix__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ut); margin: 0 0 16px; }
.uix__page .uix__text:last-child { margin-bottom: 0; }
.uix__page .uix__head { max-width: 860px; }
.uix__page .uix__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.uix__page .uix__dark { position: relative; overflow: hidden; background: var(--udark); }
.uix__page .uix__dark > .container { position: relative; z-index: 1; }
.uix__page .uix__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 10% -10%, rgba(255, 90, 60, .28), transparent 62%),
              radial-gradient(700px 400px at 92% 106%, rgba(124, 92, 255, .26), transparent 64%);
}
.uix__page .uix__dark .uix__eyebrow { color: var(--um); }
.uix__page .uix__dark .uix__title { color: #fff; }
.uix__page .uix__dark .uix__lead { color: #f1e8f5; }
.uix__page .uix__dark .uix__text { color: var(--umuted); }

.uix__page .uix__btn,
.uix__page .uix__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.uix__page .uix__btn { color: #fff; background: linear-gradient(100deg, var(--up), var(--up2)); border: 2px solid transparent; }
.uix__page .uix__btn:hover { background: var(--ui); border-color: var(--ui); color: #fff; }
.uix__page .uix__btn-outline { color: var(--up); border: 2px solid var(--up); background: transparent; }
.uix__page .uix__btn-outline:hover { background: var(--up); color: #fff; }
.uix__page .uix__dark .uix__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.uix__page .uix__dark .uix__btn-outline:hover { background: #fff; border-color: #fff; color: var(--udark); }

/* Arrow link used at the foot of most cards and sections. */
.uix__page .uix__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--up);
  transition: gap .3s ease, color .3s ease;
}
.uix__page .uix__link:hover { gap: 15px; color: var(--um2); }
.uix__page .uix__dark .uix__link { color: var(--um); }
.uix__page .uix__dark .uix__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.uix__page .uix__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--up);
  font-size: 20px;
  margin-bottom: 18px;
}
.uix__page .uix__dark .uix__ico { background: rgba(255, 138, 107, .16); color: var(--um); }

/* Gradient-fill word treatment used in the hero title - a color-clipped
   fill instead of dex's solid highlighter chip, so this page's "marked"
   word reads as a live UI accent rather than a sticky-note callout.
   Falls back to a solid violet if background-clip:text is unsupported. */
.uix__page .uix__mark {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: var(--up);
  background: linear-gradient(100deg, var(--um) 0%, var(--up) 65%, var(--up2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.uix__page .uix__mark div div {
  background: linear-gradient(100deg, var(--um) 0%, var(--up) 65%, var(--up2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ---------- 01. Hero ---------- */
.uix__hero {
  position: relative;
  overflow: hidden;
  background: var(--udark);
  padding: 200px 0 110px;
}
.uix__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 12% -10%, rgba(255, 90, 60, .34), transparent 60%),
              radial-gradient(720px 420px at 96% 106%, rgba(124, 92, 255, .3), transparent 62%);
}
/* Blueprint grid canvas overlay instead of the dot-grid used on the parent page. */
.uix__hero-canvas {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(70% 70% at 50% 38%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 38%, #000 20%, transparent 100%);
}
.uix__hero > .container { position: relative; z-index: 2; }
.uix__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.uix__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 26px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #f1e8f5;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.uix__hero-eyebrow i { font-size: 12px; color: var(--um); }
.uix__hero-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 56px;
  line-height: 1.14;
  font-weight: 600;
  color: #fff;
  margin: 0 0 24px;
}
.uix__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #f1e8f5; margin: 0 0 20px; }
.uix__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--umuted); margin: 0 0 16px; }
.uix__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.uix__hero-stats {
  list-style: none;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.uix__hero-stats li { position: relative; padding-left: 20px; }
.uix__hero-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--up2), var(--up));
}
.uix__hero-stats strong { display: block; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.2; }
.uix__hero-stats span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--umuted); line-height: 1.5; }

.uix__hero-figure { position: relative; }
.uix__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 90, 60, .5), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
/* ---------- Hero visual: "editor window" ----------
   One self-contained design-tool "screenshot" - title bar, tool rail,
   a dotted canvas holding a web artboard and a mobile artboard side
   by side, and a layers panel - rather than a photo in a frame (the
   parent Design & Experience page's hero language) or a scatter of
   independently floating cards. Everything that "bleeds" past an edge
   does so by a few contained pixels, never by unpredictable percentages,
   so nothing gets clipped by the section's overflow at any width. */
.uix__win {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--udark);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}
.uix__win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.uix__win-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.uix__win-bar em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--umuted); font-family: "Space Grotesk", sans-serif; }

.uix__win-body { display: grid; grid-template-columns: 58px 1fr 152px; min-height: 340px; }

.uix__win-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.uix__win-rail span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--umuted);
  font-size: 14px;
}
.uix__win-rail span.is-active { background: linear-gradient(100deg, var(--up), var(--up2)); color: #fff; }

.uix__win-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 30px 24px;
  background-color: rgba(0, 0, 0, .16);
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

.uix__artboard {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.uix__artboard--web {
  width: 60%;
  aspect-ratio: 4 / 3;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.uix__artboard-nav { display: flex; align-items: center; gap: 8px; }
.uix__artboard-logo { width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(100deg, var(--up), var(--up2)); }
.uix__artboard-nav i:not(.uix__artboard-logo) { display: inline-block; width: 22px; height: 5px; border-radius: 3px; background: var(--ubg); border: 1px solid var(--ub); font-style: normal; }
.uix__artboard-hero { display: flex; flex-direction: column; gap: 8px; }
.uix__artboard-line { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--ubg); border: 1px solid var(--ub); }
.uix__artboard-cta { display: inline-block; margin-top: 4px; width: 38px; height: 16px; border-radius: 5px; background: linear-gradient(100deg, var(--up), var(--up2)); }
.uix__artboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.uix__artboard-grid span { display: block; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--ubg); border: 1px solid var(--ub); }

.uix__artboard--mobile {
  width: 25%;
  aspect-ratio: 9 / 17;
  border: 3px solid var(--ui);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(4deg);
}
.uix__artboard-mbar { display: block; width: 30%; height: 4px; border-radius: 2px; background: var(--ub); margin-bottom: 12px; }
.uix__artboard-mblock { display: block; width: 100%; height: var(--h); border-radius: 6px; background: var(--ubg); border: 1px solid var(--ub); margin-bottom: 7px; }
.uix__artboard-mcta { display: block; width: 70%; height: 15px; margin-top: auto; border-radius: 5px; background: linear-gradient(100deg, var(--up), var(--up2)); }

/* Selection handles + dimension tag - reads as "currently being edited".
   Offsets are a handful of px, well inside the canvas's own padding, so
   they can never be clipped by .uix__win's overflow:hidden. */
.uix__artboard-handle { position: absolute; z-index: 2; width: 8px; height: 8px; background: #fff; border: 2px solid var(--up); border-radius: 2px; }
.uix__artboard-handle--tl { top: -5px; left: -5px; }
.uix__artboard-handle--tr { top: -5px; right: -5px; }
.uix__artboard-handle--bl { bottom: -5px; left: -5px; }
.uix__artboard-handle--br { bottom: -5px; right: -5px; }
.uix__artboard-dim {
  position: absolute;
  z-index: 2;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--up);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.uix__artboard-dim--sm { font-size: 9px; padding: 3px 8px; bottom: -16px; }

.uix__win-layers {
  padding: 16px 14px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.uix__win-layers-title { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--umuted); margin-bottom: 12px; }
.uix__win-layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--umuted);
  margin-bottom: 4px;
}
.uix__win-layer i { font-size: 9px; }
.uix__win-layer.is-active { background: rgba(255, 90, 60, .18); color: #fff; }
.uix__win-layer.is-active i { color: var(--up2); }

/* Craft annotation pin + live-collaboration cursor badges sit on the
   hero figure itself, bleeding past the window by a fixed handful of
   pixels only - never a percentage of a fragile composite box. */
.uix__pin {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 50px;
  background: #fff;
  color: var(--ui);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.uix__pin i { color: var(--up); font-size: 12px; }
.uix__pin--tl { top: -16px; left: 28px; }

.uix__cursor {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 50px;
  background: var(--ui);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 16px 28px rgba(27, 21, 35, .4);
  animation: uixKfFloat 5s ease-in-out infinite;
}
.uix__cursor-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--um); box-shadow: 0 0 0 4px rgba(255, 138, 107, .3); }
.uix__cursor--a { top: -16px; right: 44px; animation-delay: 0s; }
.uix__cursor--a .uix__cursor-dot { background: var(--up2); box-shadow: 0 0 0 4px rgba(255, 178, 56, .3); }
.uix__cursor--b { bottom: -16px; right: 60px; animation-delay: 2.2s; }
@keyframes uixKfFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


/* ---------- Keyword marquee ---------- */
.uix__marquee {
  background: linear-gradient(90deg, var(--up), var(--up2));
  padding: 20px 0;
  overflow: hidden;
}
.uix__marquee-mask { overflow: hidden; }
.uix__marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: uixKfMarquee 34s linear infinite;
}
.uix__marquee-track span {
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.uix__marquee-track i { font-size: 7px; color: rgba(255, 255, 255, .65); }
@keyframes uixKfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ---------- 02. Introduction + live component playground ---------- */
.uix__intro { padding: 120px 0; background: #fff; }
.uix__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.uix__intro-figure { position: relative; }

/* A genuinely working control panel standing in for a product photo -
   every input below actually responds to clicks/drags. */
.uix__playground {
  position: relative;
  border-radius: 22px;
  background: var(--udark);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 46px 34px 34px;
  display: grid;
  gap: 26px;
  box-shadow: 0 30px 60px rgba(32, 26, 46, .22);
}
.uix__playground-tag {
  position: absolute;
  top: -14px;
  left: 30px;
  padding: 7px 16px;
  border-radius: 50px;
  background: linear-gradient(100deg, var(--up), var(--up2));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.uix__pg-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.uix__pg-row--buttons { flex-direction: column; align-items: flex-start; gap: 12px; }
.uix__pg-label { font-size: 13px; font-weight: 500; letter-spacing: .5px; color: var(--umuted); display: inline-flex; align-items: center; gap: 8px; }
.uix__pg-out { font-weight: 700; color: var(--um); font-style: normal; }

/* Toggle */
.uix__toggle { position: relative; display: inline-flex; cursor: pointer; }
.uix__toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.uix__toggle-track {
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 26px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .14);
  padding: 3px;
  transition: background .25s ease;
}
.uix__toggle-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s ease; }
.uix__toggle input:checked ~ .uix__toggle-track { background: linear-gradient(100deg, var(--up), var(--up2)); }
.uix__toggle input:checked ~ .uix__toggle-track .uix__toggle-thumb { transform: translateX(22px); }
.uix__toggle input:focus-visible ~ .uix__toggle-track { outline: 2px solid var(--um); outline-offset: 2px; }

/* Segmented control */
.uix__segment { display: inline-flex; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, .08); gap: 4px; }
.uix__segment button {
  border: none;
  background: transparent;
  color: var(--umuted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: all .2s ease;
}
.uix__segment button.is-active { background: #fff; color: var(--ui); }

/* Range */
.uix__range {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--up2), var(--up));
  cursor: ew-resize;
}
.uix__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--up);
  cursor: ew-resize;
}
.uix__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--up);
  cursor: ew-resize;
}

/* Button states */
.uix__pg-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.uix__btn-demo {
  padding: 10px 20px;
  border-radius: 9px;
  border: 2px solid var(--up);
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.uix__btn-demo.is-hover,
.uix__btn-demo:hover:not(:disabled) { background: var(--up); border-color: var(--up); }
.uix__btn-demo:disabled { opacity: .35; cursor: not-allowed; border-color: rgba(255, 255, 255, .25); color: var(--umuted); }


/* ---------- 03. Six crafts (tabbed showcase) ---------- */
.uix__cft { padding: 120px 0; background: var(--ubg); }
.uix__cft-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 30px;
  align-items: start;
}
.uix__cft-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 120px;
}
.uix__cft-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--ub);
  background: #fff;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.uix__cft-tab:hover { transform: translateX(4px); }
.uix__cft-tab strong { display: block; font-size: 16px; font-weight: 600; color: var(--ui); }
.uix__cft-tab em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 300; color: var(--ut); line-height: 1.5; }
.uix__cft-tab-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--up);
  font-size: 18px;
}
.uix__cft-tab.is-active {
  border-color: var(--up);
  background: var(--udark);
  box-shadow: 0 18px 34px rgba(32, 26, 46, .18);
}
.uix__cft-tab.is-active strong { color: #fff; }
.uix__cft-tab.is-active em { color: var(--umuted); }
.uix__cft-tab.is-active .uix__cft-tab-ico { background: rgba(255, 138, 107, .18); color: var(--um); }

.uix__cft-panels { position: relative; }
.uix__cft-panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  padding: 44px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--ub);
}
.uix__cft-num {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--up);
  margin-bottom: 10px;
}
.uix__cft-panel-copy h3 { font-family: "Space Grotesk", sans-serif; font-size: 26px; font-weight: 600; color: var(--ui); margin: 0 0 14px; }
.uix__cft-panel-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ut); margin: 0 0 22px; }
.uix__cft-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.uix__cft-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--ui); }
.uix__cft-list i { color: var(--uok); font-size: 12px; }

.uix__cft-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 18px;
  background: var(--ubg);
  border: 1px solid var(--ub);
}

/* Small self-contained "mock UI" graphics - one per craft tab. */
.uix__mock { width: 78%; }
.uix__mock--wire { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(32, 26, 46, .1); }
.uix__mock--wire span { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px dashed var(--ub); margin-right: 6px; }
.uix__mock-wire-line { height: 10px; width: var(--w); border-radius: 4px; border: 2px dashed var(--ub); background: transparent; }

.uix__mock--ui { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(32, 26, 46, .1); }
.uix__mock-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ub); margin-right: 6px; }
.uix__mock-line { height: 10px; width: var(--w); border-radius: 6px; background: var(--ubg); border: 1px solid var(--ub); }
.uix__mock-btn { margin-top: 6px; width: 40%; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--up2), var(--up)); }

.uix__mock--motion { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; }
.uix__mock-motion-path {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ub) 0 8px, transparent 8px 16px);
}
.uix__mock-motion-dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(100deg, var(--up), var(--up2));
  box-shadow: 0 0 0 8px rgba(255, 90, 60, .14);
  animation: uixKfSlide 2.6s ease-in-out infinite;
}
@keyframes uixKfSlide {
  0%, 100% { transform: translateX(-72px); }
  50% { transform: translateX(72px); }
}

.uix__mock--devices { display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 150px; }
.uix__mock-device { display: block; border-radius: 10px; border: 3px solid var(--ub); background: #fff; }
.uix__mock-device--phone { width: 40px; height: 78px; border-radius: 12px; }
.uix__mock-device--tablet { width: 68px; height: 96px; }
.uix__mock-device--desktop { width: 130px; height: 84px; }

.uix__mock--tokens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.uix__mock--tokens span { display: block; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 10px 20px rgba(32, 26, 46, .1); }
.uix__mock--tokens span:nth-child(1) { background: var(--up); }
.uix__mock--tokens span:nth-child(2) { background: var(--up2); }
.uix__mock--tokens span:nth-child(3) { background: var(--um2); }
.uix__mock--tokens span:nth-child(4) { background: var(--udark); }
.uix__mock--tokens span:nth-child(5) { background: var(--uok); }
.uix__mock--tokens span:nth-child(6) { background: var(--ub); }

.uix__mock--test { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.uix__mock--test i {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(47, 191, 133, .12);
  border: 1px solid rgba(47, 191, 133, .35);
}
.uix__mock--test i::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--uok);
  border-bottom: 2px solid var(--uok);
  transform: rotate(-45deg) translateY(-2px);
}


/* ---------- 04. Anatomy of a well-designed screen (interactive hotspots) ---------- */
.uix__anat { padding: 130px 0 120px; }
.uix__anat-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.uix__mockscreen {
  position: relative;
  border-radius: 20px;
  overflow: visible;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
  padding: 0 0 24px;
}
.uix__mockscreen-bar { display: flex; gap: 6px; padding: 16px 20px; border-bottom: 1px solid var(--ub); }
.uix__mockscreen-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ub); }
.uix__mockscreen-nav { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.uix__mockscreen-logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(100deg, var(--up), var(--up2)); }
.uix__mockscreen-navline { height: 8px; width: 46px; border-radius: 4px; background: var(--ubg); border: 1px solid var(--ub); }
.uix__mockscreen-hero { padding: 10px 22px 26px; }
.uix__mockscreen-heroline { height: 14px; width: var(--w); border-radius: 6px; background: var(--ubg); border: 1px solid var(--ub); margin-bottom: 12px; }
.uix__mockscreen-cta { display: inline-block; margin-top: 10px; width: 130px; height: 34px; border-radius: 8px; background: linear-gradient(100deg, var(--up), var(--up2)); }
.uix__mockscreen-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 22px; }
.uix__mockscreen-cards span { display: block; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--ubg); border: 1px solid var(--ub); }

.uix__hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--ui);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: "Space Grotesk", sans-serif;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(32, 26, 46, .1), 0 10px 22px rgba(0, 0, 0, .3);
  transition: background .25s ease, transform .2s ease;
}
.uix__hotspot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 90, 60, .5);
  animation: uixKfPulse 2.4s ease-out infinite;
}
.uix__hotspot:hover { transform: translate(-50%, -50%) scale(1.1); }
.uix__hotspot.is-active { background: linear-gradient(100deg, var(--up), var(--up2)); }
.uix__hotspot.is-active::after { border-color: var(--up2); }
@keyframes uixKfPulse {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

.uix__anat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uix__anat-list > li {
  display: flex;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: all .25s ease;
}
.uix__anat-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--umuted);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.uix__anat-list > li h3 { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.uix__anat-list > li p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--umuted); margin: 0; }
.uix__anat-list > li.is-active { background: rgba(255, 90, 60, .1); border-color: rgba(255, 90, 60, .4); }
.uix__anat-list > li.is-active .uix__anat-num { background: linear-gradient(100deg, var(--up), var(--up2)); color: #fff; }


/* ---------- 05. Platforms & surfaces ---------- */
.uix__plat { padding: 120px 0; background: #fff; }
.uix__plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.uix__plat-item {
  padding: 32px 26px;
  border-radius: 18px;
  background: var(--ubg);
  border: 1px solid var(--ub);
  transition: transform .3s ease, box-shadow .3s ease;
}
.uix__plat-item:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(32, 26, 46, .1); }
.uix__plat-item h3 { font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; color: var(--ui); margin: 0 0 10px; }
.uix__plat-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ut); margin: 0; }


/* ---------- 06. Process track ---------- */
.uix__proc { padding: 120px 0; background: var(--ubg); }
.uix__proc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 22px;
  position: relative;
}
.uix__proc-track::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 4%;
  right: 4%;
  border-top: 2px dashed var(--ub);
  z-index: 0;
}
.uix__proc-step { position: relative; z-index: 1; }
.uix__proc-badge { position: relative; display: inline-block; margin-bottom: 18px; }
.uix__proc-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--up);
  color: var(--up);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.uix__proc-ico {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--udark);
  color: #fff;
  font-size: 11px;
  border: 2px solid var(--ubg);
}
.uix__proc-step h3 { font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 600; color: var(--ui); margin: 0 0 10px; }
.uix__proc-step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ut); margin: 0; }


/* ---------- 07. Tools ---------- */
.uix__tools { padding: 120px 0; }
.uix__tools-tabs { max-width: 1000px; margin: 0 auto; }
.uix__tools-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.uix__tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: var(--umuted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s ease;
}
.uix__tools-tab i { font-size: 12px; }
.uix__tools-tab:hover { border-color: rgba(255, 255, 255, .38); color: #fff; }
.uix__tools-tab.is-active { background: var(--up); border-color: var(--up); color: #fff; }
.uix__tools-panels { position: relative; }
.uix__tools-panel { display: block; }
.uix__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.uix__chips li {
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #ece9fb;
  font-size: 14px;
  font-weight: 400;
}


/* ---------- 08. Capabilities included :: stamped capability deck ----------
   Same composition as design-experience.html's cap section (not the
   shared "Archetype X" woven-index used by its other siblings): eight
   dossier cards in a two-up checkerboard, each carrying a rotated
   wax-seal icon mark and an oversized watermark ordinal, tiles tilted a
   fraction of a degree so the set reads as a laid-out deck rather than a
   repeating tile grid.
   -------------------------------------------------------------------- */
.uix__page .uix__cap { padding: 120px 0; background: var(--ubg); }
.uix__page .uix__cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  counter-reset: uixCap;
}
.uix__page .uix__cap-item {
  counter-increment: uixCap;
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 34px 30px 30px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--ub);
  overflow: hidden;
  transform: rotate(-.4deg);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.uix__page .uix__cap-item:nth-child(odd) { transform: rotate(.5deg); }
.uix__page .uix__cap-item:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 26px 46px rgba(32, 26, 46, .12); z-index: 2; }

/* oversized watermark ordinal, driven by the counter - no markup needed */
.uix__page .uix__cap-item::after {
  content: counter(uixCap, decimal-leading-zero);
  position: absolute;
  right: 14px;
  bottom: -14px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--ui);
  opacity: .06;
  pointer-events: none;
}

/* the seal: icon sits in a rotated blob so it reads as a stamp, not a tile */
.uix__page .uix__cap-item .uix__ico {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 30% 70% 65% 35% / 55% 45% 55% 45%;
  transform: rotate(-8deg);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s ease;
}
.uix__page .uix__cap-item:hover .uix__ico { transform: rotate(0deg) scale(1.06); border-radius: 50%; }

.uix__page .uix__cap-item h3 {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ui);
  margin: 0 0 10px;
  transition: color .3s ease;
}
.uix__page .uix__cap-item p {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ut);
  margin: 0;
  max-width: 40ch;
  transition: color .3s ease;
}

/* checkerboard: the 1st and 4th card of every run of four flips to ink */
.uix__page .uix__cap-item:nth-child(4n+1),
.uix__page .uix__cap-item:nth-child(4n+4) { background: var(--udark); border-color: var(--udark); }
.uix__page .uix__cap-item:nth-child(4n+1) h3,
.uix__page .uix__cap-item:nth-child(4n+4) h3 { color: #fff; }
.uix__page .uix__cap-item:nth-child(4n+1) p,
.uix__page .uix__cap-item:nth-child(4n+4) p { color: var(--umuted); }
.uix__page .uix__cap-item:nth-child(4n+1) .uix__ico,
.uix__page .uix__cap-item:nth-child(4n+4) .uix__ico { background: rgba(255, 138, 107, .2); color: var(--um); }
.uix__page .uix__cap-item:nth-child(4n+1)::after,
.uix__page .uix__cap-item:nth-child(4n+4)::after { color: #fff; opacity: .07; }

@media (max-width: 1399px) {
  .uix__page .uix__cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .uix__page .uix__cap-grid { grid-template-columns: 1fr; gap: 16px; }
  .uix__page .uix__cap-item,
  .uix__page .uix__cap-item:nth-child(odd) { transform: none; padding: 28px 24px 26px; }
  .uix__page .uix__cap-item:hover { transform: translateY(-4px); }
  .uix__page .uix__cap-item::after { font-size: 54px; }
}


/* ---------- 09. Industries ---------- */
.uix__ind { padding: 120px 0; background: #fff; }
.uix__ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.uix__ind-item {
  display: block;
  padding: 30px 24px;
  border-radius: 16px;
  background: var(--ubg);
  border: 1px solid var(--ub);
  transition: all .3s ease;
}
.uix__ind-item:hover { background: var(--udark); border-color: var(--udark); transform: translateY(-4px); }
.uix__ind-item h3 { font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; color: var(--ui); margin: 0 0 8px; transition: color .3s ease; }
.uix__ind-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ut); margin: 0; transition: color .3s ease; }
.uix__ind-item:hover h3 { color: #fff; }
.uix__ind-item:hover p { color: var(--umuted); }
.uix__ind-item:hover .uix__ico { background: rgba(255, 138, 107, .18); color: var(--um); }
.uix__ind-foot { text-align: center; margin-top: 50px; }


/* ---------- 10. Why 3Shadz ---------- */
.uix__why { padding: 120px 0; background: var(--ubg); }
.uix__why-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.uix__why-list { display: grid; gap: 26px; }
.uix__why-item { display: flex; gap: 20px; }
.uix__why-num { flex: 0 0 auto; font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; color: var(--up); }
.uix__why-item h3 { font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; color: var(--ui); margin: 0 0 6px; }
.uix__why-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ut); margin: 0; }
.uix__why-copy { padding-left: 10px; }
.uix__why-figure { margin-top: 30px; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.uix__why-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- 11. Connected services :: expanding panel rail ----------
   Same composition as design-experience.html's cap section (not the
   shared "Archetype R" scroll rail used by this page's siblings): six
   dark panels sit edge to edge as one wide bar, each collapsed to a
   sliver with only its icon and a vertical label. Hovering (or focusing)
   a panel grows it via flex-grow while its neighbours yield, and a CSS
   container query on each panel's own inline-size reveals the horizontal
   title, copy and link only once it has room - so the same rule drives
   both the layout and the content reveal, no JS required.
   -------------------------------------------------------------------- */
.uix__connect { padding: 120px 0; background: #fff; }
.uix__page .uix__connect-grid {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 440px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--udark);
}
.uix__page .uix__connect-card {
  container-type: inline-size;
  position: relative;
  flex: 1 1 0%;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 28px;
  background: var(--udark);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.22, .61, .36, 1);
}
.uix__page .uix__connect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .38), transparent 60%);
  pointer-events: none;
}
.uix__page .uix__connect-card:nth-child(2)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .36), transparent 60%); }
.uix__page .uix__connect-card:nth-child(3)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 178, 56, .34), transparent 60%); }
.uix__page .uix__connect-card:nth-child(4)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .3), transparent 60%); }
.uix__page .uix__connect-card:nth-child(5)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .3), transparent 60%); }
.uix__page .uix__connect-card:nth-child(6)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(47, 191, 133, .32), transparent 60%); }

.uix__page .uix__connect-card .uix__ico {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 20px;
  width: 42px;
  height: 42px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--um);
  font-size: 16px;
  transition: background .4s ease, color .4s ease;
}
.uix__page .uix__connect-card h3 {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
.uix__page .uix__connect-card p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--umuted);
  transition: opacity .35s ease;
}
.uix__page .uix__connect-card > a {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--um);
  transition: opacity .35s ease;
}
.uix__page .uix__connect-card:hover .uix__ico,
.uix__page .uix__connect-card:focus-within .uix__ico { background: #fff; color: var(--udark); }

@media (min-width: 768px) {
  .uix__page .uix__connect-card:nth-child(1) { flex-grow: 2.6; }
  .uix__page .uix__connect-card:nth-child(n+2) { flex-grow: 1; }
  .uix__page .uix__connect-grid:hover .uix__connect-card,
  .uix__page .uix__connect-grid:focus-within .uix__connect-card { flex-grow: 1; }
  .uix__page .uix__connect-grid .uix__connect-card:hover,
  .uix__page .uix__connect-grid .uix__connect-card:focus-within { flex-grow: 2.6; }
}

/* the reveal: driven purely by how much inline-size the panel itself has */
@container (min-width: 300px) {
  .uix__page .uix__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 21px;
    margin-top: auto;
  }
  .uix__page .uix__connect-card p { opacity: 1; max-height: 140px; }
  .uix__page .uix__connect-card > a { opacity: 1; max-height: 60px; pointer-events: auto; }
}

@media (max-width: 767px) {
  .uix__page .uix__connect-grid { flex-direction: column; height: auto; border-radius: 22px; }
  .uix__page .uix__connect-card { padding: 24px 22px 26px; min-height: 150px; }
  .uix__page .uix__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 19px;
    margin: auto 0 0;
  }
  .uix__page .uix__connect-card p { opacity: 1; max-height: none; }
  .uix__page .uix__connect-card > a { opacity: 1; max-height: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .uix__page .uix__connect-card { transition: none; }
}


/* ---------- 12. FAQ ---------- */
.uix__faq { padding: 120px 0; background: var(--ubg); }
.uix__faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.uix__faq-item { border-radius: 16px; background: #fff; border: 1px solid var(--ub); overflow: hidden; }
.uix__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  text-align: left;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ui);
  background: transparent;
  border: none;
  cursor: pointer;
}
.uix__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ubg);
  color: var(--up);
  font-size: 12px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.uix__faq-item.is-open .uix__faq-icon { background: var(--up); color: #fff; transform: rotate(135deg); }
.uix__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.uix__faq-a > div { overflow: hidden; }
.uix__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--ut); }
.uix__faq-item.is-open .uix__faq-a { grid-template-rows: 1fr; }


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .uix__hero-title { font-size: 48px; }
  .uix__page .uix__title { font-size: 36px; }
  .uix__cap-grid,
  .uix__ind-grid { grid-template-columns: repeat(3, 1fr); }
  .uix__plat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1199px) {
  .uix__hero { padding: 170px 0 100px; }
  .uix__hero-grid,
  .uix__intro-grid,
  .uix__anat-grid,
  .uix__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .uix__hero-title { font-size: 42px; }
  .uix__hero-figure { margin: 0 auto; max-width: 480px; }
  .uix__pin { font-size: 12px; padding: 8px 14px; }
  .uix__cursor { font-size: 11px; }
  .uix__cft-shell { grid-template-columns: 1fr; }
  .uix__cft-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .uix__cft-tab { flex: 1 1 auto; }
  .uix__cft-panel { grid-template-columns: 1fr; }
  .uix__proc-track { grid-template-columns: repeat(3, 1fr); gap: 34px 22px; }
  .uix__proc-track::before { display: none; }
  .uix__cap-grid,
  .uix__ind-grid,
  .uix__connect-grid { grid-template-columns: repeat(2, 1fr); }
  .uix__plat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .uix__hero { padding: 150px 0 90px; }
  .uix__hero-title { font-size: 36px; }
  .uix__hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .uix__page .uix__title { font-size: 30px; }
  .uix__playground { padding: 40px 24px 28px; }
  .uix__win-body { grid-template-columns: 48px 1fr 128px; min-height: 280px; }
  .uix__win-layer { font-size: 10.5px; }
}

@media (max-width: 767px) {
  .uix__hero { padding: 130px 0 70px; }
  .uix__hero-figure { max-width: 360px; }
  .uix__pin,
  .uix__cursor { display: none; }
  .uix__win-body { grid-template-columns: 1fr; min-height: 0; }
  .uix__win-rail { flex-direction: row; justify-content: center; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 10px 0; }
  .uix__win-layers { display: none; }
  .uix__win-canvas { flex-direction: column; padding: 26px 20px 34px; }
  .uix__artboard--web,
  .uix__artboard--mobile { width: 72%; }
  .uix__artboard--mobile { transform: none; }
  .uix__page .uix__title { font-size: 26px; }
  .uix__hero-actions { gap: 12px; }
  .uix__page .uix__btn,
  .uix__page .uix__btn-outline { padding: 15px 26px; font-size: 15px; }
  .uix__cap-grid,
  .uix__ind-grid,
  .uix__connect-grid { grid-template-columns: 1fr; }
  .uix__proc-track { grid-template-columns: 1fr; }
  .uix__cft-panel { padding: 30px 24px; }
  .uix__tools-tab { padding: 10px 16px; font-size: 13px; }
  .uix__marquee-track span { font-size: 15px; }
  .uix__pg-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .uix__anat-list > li { padding: 16px 18px; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .uix__marquee-track,
  .uix__cursor,
  .uix__mock-motion-dot,
  .uix__hotspot::after { animation: none; }
  .uix__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   PRODUCT DESIGN PAGE (pd__*)
   Scoped entirely to .pd__page (added on <main> of
   product-design.html). Shares its coral/amber/violet-on-cream
   palette with the parent Design & Experience page (dex__*) and
   sibling UI/UX Design page (uix__*) so all three read as one
   family, while keeping its own component language, Sora as the
   display face over Kanit body copy, a "sticker" hard-shadow
   button instead of a pill or gradient, and a dashed annotation
   ring instead of a solid chip for the hero's marked word.
   The hero deliberately breaks from the dark-ink canvas/window
   heroes used on the other two pages: a light "sketchpad" hero
   with a vertical build ladder showing a product visually
   maturing from a rough concept to a launch-ready screen, rung
   by rung. Keyframes are prefixed pdKf* so nothing collides with
   the rest of the theme.
   ============================================================ */
/* The theme's grid-menu button always draws a 180px decorative ring around
   itself (.menu-icon-2::after) - on this page's light hero it pokes out
   past the header as a stray circle in the top-right corner. */
.pd__header .menu-icon-2::after { display: none; }

.pd__page {
  --pp: #FF5A3C;
  --pp2: #FFB238;
  --pm: #FF8A6B;
  --pv: #7C5CFF;
  --pi: #201A2E;
  --pt: #6f6478;
  --pb: #ece1d6;
  --pbg: #FBF5EF;
  --pdark: #1B1523;
  --pmuted: #cdbfd9;
  --pok: #2fbf85;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.pd__page .pd__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pp);
  margin-bottom: 18px;
}
.pd__page .pd__title {
  font-family: "Sora", sans-serif;
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--pi);
  margin: 0 0 20px;
}
.pd__page .pd__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--pi); margin: 0 0 18px; }
.pd__page .pd__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--pt); margin: 0 0 16px; }
.pd__page .pd__text:last-child { margin-bottom: 0; }
.pd__page .pd__head { max-width: 860px; }
.pd__page .pd__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.pd__page .pd__dark { position: relative; overflow: hidden; background: var(--pdark); }
.pd__page .pd__dark > .container { position: relative; z-index: 1; }
.pd__page .pd__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(255, 90, 60, .28), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(124, 92, 255, .26), transparent 64%);
}
.pd__page .pd__dark .pd__eyebrow { color: var(--pm); }
.pd__page .pd__dark .pd__title { color: #fff; }
.pd__page .pd__dark .pd__lead { color: #f1e8f5; }
.pd__page .pd__dark .pd__text { color: var(--pmuted); }

/* "Sticker" buttons: flat fill, ink border, hard offset shadow that tucks
   in on press/hover instead of the pill (dex) or gradient (uix) treatment. */
.pd__page .pd__btn,
.pd__page .pd__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 12px;
  border: 2px solid var(--pi);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 4px 4px 0 var(--pi);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.pd__page .pd__btn { color: #fff; background: var(--pp); border-color: var(--pi); }
.pd__page .pd__btn:hover,
.pd__page .pd__btn-outline:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--pi); }
.pd__page .pd__btn:hover { background: var(--pi); color: #fff; }
.pd__page .pd__btn-outline { color: var(--pi); background: #fff; }
.pd__page .pd__btn-outline:hover { background: var(--pp2); color: var(--pi); }
.pd__page .pd__dark .pd__btn-outline,
.pd__page .pd__hero .pd__btn-outline { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .5); box-shadow: 4px 4px 0 rgba(255, 255, 255, .18); }
.pd__page .pd__dark .pd__btn-outline:hover,
.pd__page .pd__hero .pd__btn-outline:hover { background: #fff; color: var(--pdark); box-shadow: 7px 7px 0 rgba(255, 255, 255, .3); }

/* Arrow link used at the foot of most cards and sections. */
.pd__page .pd__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pp);
  transition: gap .3s ease, color .3s ease;
}
.pd__page .pd__link:hover { gap: 15px; color: var(--pv); }
.pd__page .pd__dark .pd__link { color: var(--pm); }
.pd__page .pd__dark .pd__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.pd__page .pd__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--pp);
  font-size: 20px;
  margin-bottom: 18px;
}
.pd__page .pd__dark .pd__ico { background: rgba(255, 138, 107, .16); color: var(--pm); }

/* Dashed "annotation ring" word treatment - reads like a reviewer circled
   the word on a printed page, rather than dex's solid highlighter chip or
   uix's gradient text-clip. */
.pd__page .pd__mark {
  position: relative;
  display: inline-block;
  color: var(--pi);
  padding: 0 6px;
}
.pd__page .pd__mark::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  bottom: -2px;
  border: 2.5px dashed var(--pp);
  border-radius: 50% 46% 52% 48% / 58% 48% 52% 42%;
  transform: rotate(-1.2deg);
  z-index: -1;
}


/* ---------- 01. Hero: build ladder on a dark studio canvas ----------
   Same dark-ink canvas + glow language as dex__hero/uix__hero so all
   three sibling pages read as one family at a glance, while the content
   mechanic stays unique to this page: an eyebrow + full-width headline
   up top, then a copy column beside a vertical "build ladder" of bright
   cards showing one product maturing rung by rung from a dashed rough
   concept to a launch-ready screen - rather than a single framed photo
   (dex) or a browser/editor window mockup (uix). */
.pd__hero {
  position: relative;
  overflow: hidden;
  background: var(--pdark);
  padding: 200px 0 110px;
}
.pd__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 92% -8%, rgba(255, 178, 56, .34), transparent 60%),
              radial-gradient(640px 400px at -4% 100%, rgba(124, 92, 255, .28), transparent 62%);
}
/* Graph-paper canvas overlay - light lines on the dark ground, echoing a
   designer's sketchpad rather than the dot-grid (dex) or blueprint-grid
   (uix) canvases used on the sibling pages. */
.pd__hero-canvas {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(62% 62% at 80% 22%, #000 8%, transparent 100%);
  -webkit-mask-image: radial-gradient(62% 62% at 80% 22%, #000 8%, transparent 100%);
}
.pd__hero > .container { position: relative; z-index: 2; }
.pd__hero-top { max-width: 760px; margin-bottom: 56px; }
.pd__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: #f1e8f5;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pd__hero-eyebrow i { font-size: 12px; color: var(--pm); }
.pd__hero-title {
  font-family: "Sora", sans-serif;
  font-size: 52px;
  line-height: 1.16;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.pd__hero-title .pd__mark { color: #fff; }

.pd__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 70px; align-items: start; }
.pd__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #f1e8f5; margin: 0 0 20px; }
.pd__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--pmuted); margin: 0 0 16px; }
.pd__hero-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; }

/* Numbered "step pill" stats instead of the vertical-divider list dex and
   uix both use - a small nod to the ladder's own numbered rungs. */
.pd__hero-stats { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pd__hero-stats li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
}
.pd__hero-stats em {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pp2), var(--pp));
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  font-family: "Sora", sans-serif;
}
.pd__hero-stats span { font-size: 13.5px; font-weight: 500; color: #f1e8f5; }

/* ---------- The build ladder ---------- */
.pd__ladder { position: relative; padding: 6px 0; }
.pd__ladder-line {
  position: absolute;
  left: 27px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background-image: linear-gradient(rgba(255, 255, 255, .28) 60%, transparent 0);
  background-size: 2px 12px;
  background-repeat: repeat-y;
  z-index: 0;
}
.pd__rung { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.pd__rung:last-child { margin-bottom: 0; }
.pd__rung-node {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pb);
  color: var(--pt);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 13px;
  transition: all .3s ease;
}
.pd__rung-card {
  flex: 1 1 auto;
  border-radius: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--pb);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pd__rung:hover .pd__rung-card { transform: translateX(4px); }
.pd__rung-card h4 { margin: 0 0 3px; font-family: "Sora", sans-serif; font-size: 15px; font-weight: 700; color: var(--pi); }
.pd__rung-card p { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--pt); }
.pd__rung-mock { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }

/* Rung 1 - Concept: dashed scribble lines. */
.pd__rung--1 .pd__rung-mock i { display: block; height: 6px; width: var(--w); border-radius: 3px; border: 1.5px dashed var(--pb); }

/* Rung 2 - Flow: solid grey wireframe blocks. */
.pd__rung--2 .pd__rung-mock i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--pb); }
.pd__rung--2 .pd__rung-node { border-color: var(--pv); color: var(--pv); }

/* Rung 3 - Prototype: coral/amber gradient blocks. */
.pd__rung--3 .pd__rung-mock i { display: block; height: 9px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--pp2), var(--pp)); }
.pd__rung--3 .pd__rung-node { border-color: var(--pp); color: var(--pp); }

/* Rung 4 - Launch: the finished, elevated card. */
.pd__rung--4 .pd__rung-card { border-color: var(--pi); box-shadow: 6px 6px 0 var(--pi); background: linear-gradient(180deg, #fff 0%, var(--pbg) 100%); }
.pd__rung--4 .pd__rung-node { background: var(--pi); border-color: var(--pi); color: #fff; }
.pd__rung--4 .pd__rung-mock { flex-direction: row; align-items: center; gap: 10px; }
.pd__rung--4 .pd__rung-mock i { display: block; height: 26px; width: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--pp2), var(--pp)); }
.pd__rung-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(47, 191, 133, .12);
  color: var(--pok);
  font-size: 11px;
  font-weight: 600;
}

.pd__ladder-flag {
  position: absolute;
  top: -18px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 50px;
  background: #fff;
  color: var(--pi);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
  transform: rotate(2deg);
}
.pd__ladder-flag i { color: var(--pp); font-size: 11px; }


/* ---------- Keyword marquee ---------- */
.pd__marquee { background: linear-gradient(90deg, var(--pp), var(--pp2)); padding: 20px 0; overflow: hidden; }
.pd__marquee-mask { overflow: hidden; }
.pd__marquee-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: pdKfMarquee 34s linear infinite; }
.pd__marquee-track span { font-family: "Sora", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .5px; color: #fff; white-space: nowrap; }
.pd__marquee-track i { font-size: 6px; color: rgba(255, 255, 255, .65); }
@keyframes pdKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* ---------- 02. Introduction + MVP scope card ---------- */
.pd__intro { padding: 120px 0; background: #fff; }
.pd__intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.pd__intro-figure { position: relative; }

/* MoSCoW-style scope card: rows shrink as priority drops, standing in for
   a product photo and doubling as a small teaching moment about scoping
   an MVP - unique to this page. */
.pd__scope-card {
  border-radius: 22px;
  background: var(--pbg);
  border: 1px solid var(--pb);
  padding: 38px 34px;
  aspect-ratio: 4 / 3.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.pd__scope-row { display: flex; align-items: center; gap: 14px; }
.pd__scope-row b {
  flex: 0 0 90px;
  font-family: "Sora", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pi);
}
.pd__scope-bar { flex: 1 1 auto; height: 14px; border-radius: 7px; background: #fff; border: 1px solid var(--pb); overflow: hidden; }
.pd__scope-bar i { display: block; height: 100%; width: var(--w); border-radius: 7px; background: var(--fill); }
.pd__scope-row--must .pd__scope-bar i { --fill: var(--pi); }
.pd__scope-row--should .pd__scope-bar i { --fill: var(--pp); }
.pd__scope-row--could .pd__scope-bar i { --fill: var(--pp2); }
.pd__scope-row--wont .pd__scope-bar i { --fill: var(--pb); }

.pd__intro-badge {
  position: absolute;
  z-index: 2;
  right: -22px;
  bottom: -26px;
  max-width: 250px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--pdark);
  box-shadow: 0 22px 50px rgba(27, 21, 35, .28);
}
.pd__intro-badge strong { display: block; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.4; }
.pd__intro-badge span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--pmuted); line-height: 1.5; }
.pd__intro-copy { padding-left: 10px; }


/* ---------- 03. Engagement types (tabbed showcase) ---------- */
.pd__svc { padding: 120px 0; background: var(--pbg); }
.pd__svc-shell { display: grid; grid-template-columns: 360px 1fr; gap: 30px; align-items: start; }
.pd__svc-nav { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 120px; }
.pd__svc-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--pb);
  background: #fff;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.pd__svc-tab:hover { transform: translateX(4px); }
.pd__svc-tab strong { display: block; font-size: 16px; font-weight: 600; color: var(--pi); }
.pd__svc-tab em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 300; color: var(--pt); line-height: 1.5; }
.pd__svc-tab-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--pp);
  font-size: 18px;
}
.pd__svc-tab.is-active { border-color: var(--pi); background: var(--pdark); box-shadow: 0 18px 34px rgba(27, 21, 35, .16); }
.pd__svc-tab.is-active strong { color: #fff; }
.pd__svc-tab.is-active em { color: var(--pmuted); }
.pd__svc-tab.is-active .pd__svc-tab-ico { background: rgba(255, 138, 107, .18); color: var(--pm); }

.pd__svc-panels { position: relative; }
.pd__svc-panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 44px; border-radius: 22px; background: #fff; border: 1px solid var(--pb); }
.pd__svc-num { display: inline-block; font-family: "Sora", sans-serif; font-size: 14px; font-weight: 700; color: var(--pp); margin-bottom: 10px; }
.pd__svc-panel-copy h3 { font-family: "Sora", sans-serif; font-size: 26px; font-weight: 700; color: var(--pi); margin: 0 0 14px; }
.pd__svc-panel-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--pt); margin: 0 0 22px; }
.pd__svc-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.pd__svc-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--pi); }
.pd__svc-list i { color: var(--pok); font-size: 12px; }

.pd__svc-panel-visual { display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: 18px; background: var(--pbg); border: 1px solid var(--pb); }
.pd__mock { width: 78%; }
.pd__mock--sprint { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(32, 26, 46, .12); }
.pd__mock-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pb); margin-right: 6px; }
.pd__mock-line { height: 10px; width: var(--w); border-radius: 6px; background: var(--pbg); border: 1px solid var(--pb); }
.pd__mock-btn { margin-top: 6px; width: 40%; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--pp2), var(--pp)); }

.pd__mock--flow { display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; }
.pd__mock-node { width: 22px; height: 22px; border-radius: 50%; background: var(--pp); box-shadow: 0 0 0 6px rgba(255, 90, 60, .16); position: relative; z-index: 1; }
.pd__mock-node:nth-child(2) { background: var(--pv); box-shadow: 0 0 0 6px rgba(124, 92, 255, .16); }
.pd__mock-node:nth-child(3) { background: var(--pok); box-shadow: 0 0 0 6px rgba(47, 191, 133, .16); }
.pd__mock--flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--pb); z-index: 0; }

.pd__mock--iter { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 150px; }
.pd__mock--iter i { display: block; width: 20px; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--pp2), var(--pp)); }

.pd__mock--fractional { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pd__mock--fractional span { display: block; aspect-ratio: 1; border-radius: 10px; }
.pd__mock--fractional span:nth-child(1) { background: var(--pp); }
.pd__mock--fractional span:nth-child(2) { background: var(--pp2); }
.pd__mock--fractional span:nth-child(3) { background: var(--pv); }
.pd__mock--fractional span:nth-child(4) { background: var(--pb); }
.pd__mock--fractional span:nth-child(5) { background: var(--pb); }
.pd__mock--fractional span:nth-child(6) { background: var(--pv); }
.pd__mock--fractional span:nth-child(7) { background: var(--pp2); }
.pd__mock--fractional span:nth-child(8) { background: var(--pp); }


/* ---------- 04. Principles (rulebook ledger) ----------
   A single-column numbered ledger instead of the sticky-note-on-corkboard
   grid used for the equivalent section on design-experience.html: huge
   hollow numerals threaded by the same dashed vertical line used in the
   hero's build ladder, so this section reads as "page two" of the same
   idea rather than an unrelated card grid. */
.pd__principle { padding: 130px 0 120px; background: #fff; }
.pd__rule-list { position: relative; max-width: 980px; margin: 0 auto; }
.pd__rule-list::before {
  content: "";
  position: absolute;
  left: 55px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background-image: linear-gradient(var(--pb) 60%, transparent 0);
  background-size: 2px 12px;
  background-repeat: repeat-y;
  z-index: 0;
}
.pd__rule-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 2px dashed var(--pb);
  transition: padding-left .3s ease;
}
.pd__rule-item:first-child { padding-top: 4px; }
.pd__rule-item:last-child { border-bottom: none; padding-bottom: 4px; }
.pd__rule-item:hover { padding-left: 14px; }
.pd__rule-num {
  flex: 0 0 110px;
  font-family: "Sora", sans-serif;
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  color: var(--pbg);
  -webkit-text-stroke: 2px var(--pb);
  transition: color .3s ease, -webkit-text-stroke-color .3s ease;
}
.pd__rule-item:hover .pd__rule-num { color: var(--pbg); -webkit-text-stroke-color: var(--pp); }
.pd__rule-body { flex: 1 1 auto; padding-top: 10px; }
.pd__rule-body h3 { font-family: "Sora", sans-serif; font-size: 19px; font-weight: 700; color: var(--pi); margin: 0 0 8px; }
.pd__rule-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--pt); margin: 0; }


/* ---------- 05. Product journey ---------- */
.pd__compare { padding: 120px 0; }
.pd__journey {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .12);
}
.pd__journey img { display: block; width: 100%; height: auto; }
.pd__ba-note { max-width: 980px; margin: 26px auto 0; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--pmuted); text-align: center; }
.pd__ba-note i { color: var(--pm); margin-right: 8px; }


/* ---------- 06. Process track ---------- */
.pd__proc { padding: 120px 0; background: var(--pbg); }
.pd__proc-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 22px; position: relative; }
.pd__proc-track::before { content: ""; position: absolute; top: 26px; left: 4%; right: 4%; border-top: 2px dashed var(--pb); z-index: 0; }
.pd__proc-step { position: relative; z-index: 1; }
.pd__proc-badge { position: relative; display: inline-block; margin-bottom: 18px; }
.pd__proc-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pp);
  color: var(--pp);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.pd__proc-ico {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--pdark);
  color: #fff;
  font-size: 11px;
  border: 2px solid var(--pbg);
}
.pd__proc-step h3 { font-family: "Sora", sans-serif; font-size: 17px; font-weight: 700; color: var(--pi); margin: 0 0 10px; }
.pd__proc-step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--pt); margin: 0; }


/* ---------- 07. Deliverables ---------- */
.pd__deliver { padding: 120px 0; background: #fff; }
.pd__deliver-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pd__deliver-item { padding: 32px 26px; border-radius: 16px; background: var(--pbg); border: 1px solid var(--pb); transition: transform .3s ease, box-shadow .3s ease; }
.pd__deliver-item:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(32, 26, 46, .1); }
.pd__deliver-item h3 { font-family: "Sora", sans-serif; font-size: 16.5px; font-weight: 700; color: var(--pi); margin: 0 0 10px; }
.pd__deliver-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--pt); margin: 0; }


/* ---------- 08. Tools ---------- */
.pd__tools { padding: 120px 0; }
.pd__tools-tabs { max-width: 1000px; margin: 0 auto; }
.pd__tools-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.pd__tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: var(--pmuted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s ease;
}
.pd__tools-tab i { font-size: 12px; }
.pd__tools-tab:hover { border-color: rgba(255, 255, 255, .38); color: #fff; }
.pd__tools-tab.is-active { background: var(--pp); border-color: var(--pp); color: #fff; }
.pd__tools-panels { position: relative; }
.pd__tools-panel { display: block; }
.pd__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pd__chips li { padding: 11px 20px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #f1e8f5; font-size: 14px; font-weight: 400; }


/* ---------- 09. Industries ---------- */
.pd__ind { padding: 120px 0; background: var(--pbg); }
.pd__ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pd__ind-item { display: block; padding: 30px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--pb); transition: all .3s ease; }
.pd__ind-item:hover { background: var(--pdark); border-color: var(--pdark); transform: translateY(-4px); }
.pd__ind-item h3 { font-family: "Sora", sans-serif; font-size: 16.5px; font-weight: 700; color: var(--pi); margin: 0 0 8px; transition: color .3s ease; }
.pd__ind-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--pt); margin: 0; transition: color .3s ease; }
.pd__ind-item:hover h3 { color: #fff; }
.pd__ind-item:hover p { color: var(--pmuted); }
.pd__ind-item:hover .pd__ico { background: rgba(255, 138, 107, .18); color: var(--pm); }
.pd__ind-foot { text-align: center; margin-top: 50px; }


/* ---------- 10. Why 3Shadz ---------- */
.pd__why { padding: 120px 0; background: #fff; }
.pd__why-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.pd__why-list { display: grid; gap: 26px; }
.pd__why-item { display: flex; gap: 20px; }
.pd__why-num { flex: 0 0 auto; font-family: "Sora", sans-serif; font-size: 20px; font-weight: 700; color: var(--pp); }
.pd__why-item h3 { font-family: "Sora", sans-serif; font-size: 16.5px; font-weight: 700; color: var(--pi); margin: 0 0 6px; }
.pd__why-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--pt); margin: 0; }
.pd__why-copy { padding-left: 10px; }
.pd__why-figure { margin-top: 30px; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.pd__why-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- 11. Connected services ---------- */
/* ---------- Connected services :: expanding panel rail ----------
   Same composition as design-experience.html / ui-ux-design.html's
   connect sections (not the shared "Archetype R" scroll rail used by
   this page's siblings): six dark panels sit edge to edge as one wide
   bar, each collapsed to a sliver with only its icon and a vertical
   label. Hovering (or focusing) a panel grows it via flex-grow while its
   neighbours yield, and a CSS container query on each panel's own
   inline-size reveals the horizontal title, copy and link only once it
   has room - so the same rule drives both the layout and the content
   reveal, no JS required.
   ------------------------------------------------------------------- */
.pd__connect { padding: 120px 0; background: var(--pbg); }
.pd__page .pd__connect-grid {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 440px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--pdark);
}
.pd__page .pd__connect-card {
  container-type: inline-size;
  position: relative;
  flex: 1 1 0%;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 28px;
  background: var(--pdark);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.22, .61, .36, 1);
}
.pd__page .pd__connect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .38), transparent 60%);
  pointer-events: none;
}
.pd__page .pd__connect-card:nth-child(2)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .36), transparent 60%); }
.pd__page .pd__connect-card:nth-child(3)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 178, 56, .34), transparent 60%); }
.pd__page .pd__connect-card:nth-child(4)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .3), transparent 60%); }
.pd__page .pd__connect-card:nth-child(5)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .3), transparent 60%); }
.pd__page .pd__connect-card:nth-child(6)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(47, 191, 133, .32), transparent 60%); }

.pd__page .pd__connect-card .pd__ico {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 20px;
  width: 42px;
  height: 42px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--pm);
  font-size: 16px;
  transition: background .4s ease, color .4s ease;
}
.pd__page .pd__connect-card h3 {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: "Sora", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.pd__page .pd__connect-card p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--pmuted);
  transition: opacity .35s ease;
}
.pd__page .pd__connect-card > a {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--pm);
  transition: opacity .35s ease;
}
.pd__page .pd__connect-card:hover .pd__ico,
.pd__page .pd__connect-card:focus-within .pd__ico { background: #fff; color: var(--pdark); }

@media (min-width: 768px) {
  .pd__page .pd__connect-card:nth-child(1) { flex-grow: 2.6; }
  .pd__page .pd__connect-card:nth-child(n+2) { flex-grow: 1; }
  .pd__page .pd__connect-grid:hover .pd__connect-card,
  .pd__page .pd__connect-grid:focus-within .pd__connect-card { flex-grow: 1; }
  .pd__page .pd__connect-grid .pd__connect-card:hover,
  .pd__page .pd__connect-grid .pd__connect-card:focus-within { flex-grow: 2.6; }
}

/* the reveal: driven purely by how much inline-size the panel itself has */
@container (min-width: 300px) {
  .pd__page .pd__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 21px;
    margin-top: auto;
  }
  .pd__page .pd__connect-card p { opacity: 1; max-height: 140px; }
  .pd__page .pd__connect-card > a { opacity: 1; max-height: 60px; pointer-events: auto; }
}

@media (max-width: 767px) {
  .pd__page .pd__connect-grid { flex-direction: column; height: auto; border-radius: 22px; }
  .pd__page .pd__connect-card { padding: 24px 22px 26px; min-height: 150px; }
  .pd__page .pd__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 19px;
    margin: auto 0 0;
  }
  .pd__page .pd__connect-card p { opacity: 1; max-height: none; }
  .pd__page .pd__connect-card > a { opacity: 1; max-height: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pd__page .pd__connect-card { transition: none; }
}


/* ---------- 12. FAQ ---------- */
.pd__faq { padding: 120px 0; background: #fff; }
.pd__faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.pd__faq-item { border-radius: 16px; background: var(--pbg); border: 1px solid var(--pb); overflow: hidden; }
.pd__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  text-align: left;
  font-family: "Sora", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--pi);
  background: transparent;
  border: none;
  cursor: pointer;
}
.pd__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--pp);
  font-size: 12px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.pd__faq-item.is-open .pd__faq-icon { background: var(--pp); color: #fff; transform: rotate(135deg); }
.pd__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.pd__faq-a > div { overflow: hidden; }
.pd__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--pt); }
.pd__faq-item.is-open .pd__faq-a { grid-template-rows: 1fr; }


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .pd__hero-title { font-size: 44px; }
  .pd__page .pd__title { font-size: 34px; }
  .pd__deliver-grid,
  .pd__ind-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1199px) {
  .pd__hero { padding: 170px 0 100px; }
  .pd__hero-grid,
  .pd__intro-grid,
  .pd__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .pd__hero-title { font-size: 38px; }
  .pd__ladder-flag { top: -14px; right: 0; }
  .pd__intro-badge { right: 16px; bottom: -20px; }
  .pd__svc-shell { grid-template-columns: 1fr; }
  .pd__svc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .pd__svc-tab { flex: 1 1 260px; }
  .pd__svc-panel { grid-template-columns: 1fr; }
  .pd__svc-panel-visual { min-height: 180px; }
  .pd__rule-num { flex-basis: 84px; font-size: 52px; }
  .pd__proc-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .pd__proc-track::before { display: none; }
  .pd__connect-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .pd__hero { padding: 150px 0 90px; }
  .pd__hero-title { font-size: 34px; }
  .pd__page .pd__title { font-size: 28px; }
  .pd__hero-lead { font-size: 17px; }
  .pd__intro,
  .pd__svc,
  .pd__principle,
  .pd__compare,
  .pd__proc,
  .pd__deliver,
  .pd__tools,
  .pd__ind,
  .pd__why,
  .pd__connect,
  .pd__faq { padding: 90px 0; }
  .pd__page .pd__head--center { margin-bottom: 44px; }
  .pd__deliver-grid,
  .pd__ind-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .pd__hero { padding: 130px 0 70px; }
  .pd__hero-title { font-size: 28px; }
  .pd__page .pd__title { font-size: 24px; }
  .pd__page .pd__lead,
  .pd__hero-lead { font-size: 16px; }
  .pd__intro,
  .pd__svc,
  .pd__principle,
  .pd__compare,
  .pd__proc,
  .pd__deliver,
  .pd__tools,
  .pd__ind,
  .pd__why,
  .pd__connect,
  .pd__faq { padding: 70px 0; }
  .pd__hero-actions { gap: 12px; }
  .pd__page .pd__btn,
  .pd__page .pd__btn-outline { padding: 14px 24px; font-size: 15px; }
  .pd__deliver-grid,
  .pd__ind-grid,
  .pd__connect-grid { grid-template-columns: 1fr; }
  .pd__rule-list::before { display: none; }
  .pd__rule-item { flex-direction: column; gap: 6px; padding: 26px 0; }
  .pd__rule-num { font-size: 40px; flex-basis: auto; }
  .pd__proc-track { grid-template-columns: repeat(2, 1fr); }
  .pd__svc-panel { padding: 30px 24px; }
  .pd__svc-tab { flex: 1 1 100%; }
  .pd__faq-q { font-size: 15.5px; padding: 20px 22px; }
  .pd__faq-a p { padding: 0 22px 22px; }
  .pd__tools-tab { padding: 10px 16px; font-size: 13px; }
  .pd__marquee-track span { font-size: 14px; }
  .pd__ba-note { font-size: 13.5px; }
  .pd__ladder-line { left: 23px; }
  .pd__rung-node { width: 48px; height: 48px; font-size: 12px; }
}

@media (max-width: 575px) {
  .pd__proc-track { grid-template-columns: 1fr; }
  .pd__rung { flex-direction: column; gap: 10px; }
  .pd__ladder-line { display: none; }
  .pd__rung-node { display: none; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .pd__marquee-track { animation: none; }
  .pd__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   UX RESEARCH PAGE (uxr__*)
   Scoped entirely to .uxr__page (added on <main> of
   ux-research.html). Shares its coral/amber/violet-on-cream
   palette with the parent Design & Experience page (dex__*) and
   sibling UI/UX Design (uix__*) and Product Design (pd__*) pages
   so the family reads as one, while keeping its own component
   language: Newsreader as an editorial, field-notes display face
   over Kanit body copy, and a dashed "coded quote" underline
   instead of a solid chip or annotation ring for the hero's
   marked word.
   The hero deliberately breaks from the static annotated
   screenshot (dex), the design-tool editor window (uix), and the
   light sketchpad build ladder (pd): a dark "live usability
   session" monitor with an animated participant waveform, a
   transcript that types itself out and gets coded with insight
   tags as it goes, task metrics, and a confidence dial - the
   mechanic is watching evidence accumulate in real time, not a
   static artifact or a build-progress ladder. The canvas behind
   it uses horizontal ruled lines (an oscilloscope/waveform
   read-out) rather than dex's dot-grid, uix's blueprint-grid, or
   pd's graph-paper. Keyframes are prefixed uxrKf* so nothing
   collides with the rest of the theme.
   ============================================================ */
.uxr__page {
  --up: #FF5A3C;
  --up2: #FFB238;
  --up3: #FF8A6B;
  --uv: #7C5CFF;
  --uh: #201A2E;
  --ut: #6f6478;
  --ub: #ece1d6;
  --ubg: #FBF5EF;
  --udark: #1B1523;
  --umuted: #cdbfd9;
  --uok: #2fbf85;
  --ubad: #FF4D6D;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.uxr__page .uxr__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--up);
  margin-bottom: 18px;
}
.uxr__page .uxr__title {
  font-family: "Newsreader", serif;
  font-size: 42px;
  line-height: 1.22;
  font-weight: 600;
  color: var(--uh);
  margin: 0 0 20px;
}
.uxr__page .uxr__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--uh); margin: 0 0 18px; }
.uxr__page .uxr__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ut); margin: 0 0 16px; }
.uxr__page .uxr__text:last-child { margin-bottom: 0; }
.uxr__page .uxr__head { max-width: 860px; }
.uxr__page .uxr__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.uxr__page .uxr__dark { position: relative; overflow: hidden; background: var(--udark); }
.uxr__page .uxr__dark > .container { position: relative; z-index: 1; }
.uxr__page .uxr__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 90% -10%, rgba(255, 90, 60, .28), transparent 62%),
              radial-gradient(700px 400px at 4% 106%, rgba(124, 92, 255, .26), transparent 64%);
}
.uxr__page .uxr__dark .uxr__eyebrow { color: var(--up3); }
.uxr__page .uxr__dark .uxr__title { color: #fff; }
.uxr__page .uxr__dark .uxr__lead { color: #f1e8f5; }
.uxr__page .uxr__dark .uxr__text { color: var(--umuted); }

.uxr__page .uxr__btn,
.uxr__page .uxr__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.uxr__page .uxr__btn { color: #fff; background: var(--up); border: 2px solid var(--up); }
.uxr__page .uxr__btn:hover { background: var(--uh); border-color: var(--uh); color: #fff; }
.uxr__page .uxr__btn-outline { color: var(--up); border: 2px solid var(--up); background: transparent; }
.uxr__page .uxr__btn-outline:hover { background: var(--up); color: #fff; }
.uxr__page .uxr__dark .uxr__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.uxr__page .uxr__dark .uxr__btn-outline:hover { background: #fff; border-color: #fff; color: var(--udark); }

/* Arrow link used at the foot of most cards and sections. */
.uxr__page .uxr__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--up);
  transition: gap .3s ease, color .3s ease;
}
.uxr__page .uxr__link:hover { gap: 15px; color: var(--uv); }
.uxr__page .uxr__dark .uxr__link { color: var(--up3); }
.uxr__page .uxr__dark .uxr__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.uxr__page .uxr__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--up);
  font-size: 20px;
  margin-bottom: 18px;
}
.uxr__page .uxr__dark .uxr__ico { background: rgba(255, 138, 107, .16); color: var(--up3); }

/* Dashed "coded quote" underline word treatment - reads like a researcher
   underlined the word while coding a transcript, rather than dex's solid
   highlighter chip, uix's gradient text-clip, or pd's annotation ring. */
.uxr__page .uxr__mark {
  position: relative;
  display: inline-block;
  font-family: "Newsreader", serif;
  font-style: italic;
  font-weight: 600;
  color: var(--up2);
}
.uxr__page .uxr__mark::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 0;
  border-bottom: 3px dashed var(--up2);
}


/* ---------- 01. Hero ---------- */
.uxr__hero {
  position: relative;
  overflow: hidden;
  background: var(--udark);
  padding: 200px 0 110px;
}
.uxr__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 10% -10%, rgba(255, 90, 60, .3), transparent 60%),
              radial-gradient(720px 420px at 96% 106%, rgba(124, 92, 255, .28), transparent 62%);
}
/* Horizontal ruled-line canvas - an oscilloscope/waveform read-out, echoing
   the page's audio-transcript hero rather than a dot- or blueprint-grid. */
.uxr__hero-canvas {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, .06) 0px, rgba(255, 255, 255, .06) 1px,
    transparent 1px, transparent 27px);
  mask-image: radial-gradient(58% 62% at 84% 18%, #000 8%, transparent 100%);
  -webkit-mask-image: radial-gradient(58% 62% at 84% 18%, #000 8%, transparent 100%);
}
.uxr__hero > .container { position: relative; z-index: 2; }
.uxr__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.uxr__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 26px;
}
.uxr__hero-eyebrow i { font-size: 12px; color: var(--up3); }
.uxr__hero-title {
  font-family: "Newsreader", serif;
  font-size: 54px;
  line-height: 1.16;
  font-weight: 600;
  color: #fff;
  margin: 0 0 22px;
}
.uxr__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #f1e8f5; margin: 0 0 20px; }
.uxr__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--umuted); margin: 0 0 16px; }
.uxr__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.uxr__hero-stats {
  list-style: none;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.uxr__hero-stats li { position: relative; padding-left: 20px; }
.uxr__hero-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up2);
}
.uxr__hero-stats strong { display: block; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.2; }
.uxr__hero-stats span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--umuted); line-height: 1.5; }

.uxr__hero-figure { position: relative; }
.uxr__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 90, 60, .48), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}

/* The live session monitor: bordered "window" holding a participant tile
   with an animated waveform, a transcript that reveals itself line by line
   and gets tagged as it goes, and a metrics/confidence footer. */
.uxr__session {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}
.uxr__session-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.uxr__rec {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ubad);
  animation: uxrKfPulse 1.8s ease-in-out infinite;
}
@keyframes uxrKfPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, .55); }
  50% { box-shadow: 0 0 0 6px rgba(255, 77, 109, 0); }
}
.uxr__session-bar em { font-style: normal; font-size: 13px; font-weight: 500; color: #f1e8f5; }
.uxr__session-time { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--umuted); }

.uxr__session-body { display: grid; grid-template-columns: 128px 1fr; min-height: 210px; }
.uxr__session-cam {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 14px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.uxr__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--up2), var(--up));
  color: #fff;
  font-size: 19px;
}
.uxr__wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.uxr__wave i {
  display: block;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--up2);
  animation: uxrKfWave 1.2s ease-in-out infinite;
}
@keyframes uxrKfWave {
  0%, 100% { height: 6px; }
  50% { height: 26px; }
}
.uxr__wave i:nth-child(3n+1) { background: var(--up); animation-delay: 0s; }
.uxr__wave i:nth-child(3n+2) { background: var(--up2); animation-delay: .18s; }
.uxr__wave i:nth-child(3n+3) { background: var(--uv); animation-delay: .36s; }

.uxr__transcript { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.uxr__tline {
  margin: 0;
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: #f1e8f5;
  opacity: 0;
  animation: uxrKfRise .6s ease forwards;
}
.uxr__tline:nth-child(1) { animation-delay: .3s; }
.uxr__tline:nth-child(2) { animation-delay: 1.1s; }
.uxr__tline:nth-child(3) { animation-delay: 1.9s; }
.uxr__tline:nth-child(4) { animation-delay: 2.7s; }
@keyframes uxrKfRise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.uxr__tline--bad,
.uxr__tline--good {
  font-style: normal;
  padding: 8px 12px;
  border-radius: 0 10px 10px 0;
}
.uxr__tline--bad { background: rgba(255, 77, 109, .14); border-left: 3px solid var(--ubad); }
.uxr__tline--good { background: rgba(47, 191, 133, .14); border-left: 3px solid var(--uok); }
.uxr__tline[data-tag]::after {
  content: attr(data-tag);
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  vertical-align: middle;
}
.uxr__tline--bad::after { background: var(--ubad); color: #fff; }
.uxr__tline--good::after { background: var(--uok); color: var(--udark); }

.uxr__session-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .2);
}
.uxr__metric { display: flex; flex-direction: column; gap: 2px; }
.uxr__metric strong { font-family: "Newsreader", serif; font-size: 21px; font-weight: 600; color: #fff; line-height: 1; }
.uxr__metric span { font-size: 10.5px; font-weight: 500; color: var(--umuted); text-transform: uppercase; letter-spacing: 1px; }
.uxr__metric--dial { flex-direction: row; align-items: center; gap: 10px; margin-left: auto; }
.uxr__metric--dial span:last-child { font-size: 10.5px; font-weight: 500; color: var(--umuted); text-transform: uppercase; letter-spacing: 1px; }
.uxr__dial {
  --pct: 0%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--up) var(--pct), rgba(255, 255, 255, .16) 0);
  flex: 0 0 auto;
}
.uxr__dial::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--udark); }
.uxr__dial em { position: relative; z-index: 1; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; }

/* Floating "field note" annotations pinned to the corners of the session
   window - same pin language as the sibling pages' hero figures, recolored
   and re-worded around research metrics instead of design QA checkmarks. */
.uxr__pin {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 50px;
  background: #fff;
  color: var(--uh);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.uxr__pin i { color: var(--up); font-size: 12px; }
.uxr__pin--tl { top: -16px; left: -14px; transform: rotate(-4deg); }
.uxr__pin--tr { top: 10%; right: -22px; transform: rotate(3deg); }
.uxr__pin--bl { bottom: 12%; left: -26px; transform: rotate(2deg); }
.uxr__pin--br { bottom: -16px; right: -10px; transform: rotate(-3deg); }


/* ---------- Keyword marquee ---------- */
.uxr__marquee {
  background: linear-gradient(90deg, var(--up), var(--up2));
  padding: 20px 0;
  overflow: hidden;
}
.uxr__marquee-mask { overflow: hidden; }
.uxr__marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: uxrKfMarquee 34s linear infinite;
}
.uxr__marquee-track span {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.uxr__marquee-track i { font-size: 6px; color: rgba(255, 255, 255, .65); }
@keyframes uxrKfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ---------- 02. Introduction ---------- */
.uxr__intro { padding: 130px 0 120px; background: #fff; }
.uxr__intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.uxr__intro-figure { position: relative; padding-bottom: 40px; }

/* A fanned stack of coded quote cards standing in for a product photo -
   echoes the affinity-mapping wall a researcher works from. */
.uxr__stack { position: relative; height: 320px; }
.uxr__stack-card {
  position: absolute;
  left: 6%;
  right: 6%;
  width: 88%;
  max-width: 340px;
  margin: 0 auto;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--ubg);
  border: 1px solid var(--ub);
  box-shadow: 0 20px 40px rgba(32, 26, 46, .14);
  transform: rotate(var(--r));
  transition: transform .35s ease, box-shadow .35s ease;
}
.uxr__stack-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 50px rgba(32, 26, 46, .2); z-index: 5; }
.uxr__stack-card:nth-child(1) { top: 0; z-index: 1; }
.uxr__stack-card:nth-child(2) { top: 74px; z-index: 2; }
.uxr__stack-card:nth-child(3) { top: 148px; z-index: 3; }
.uxr__stack-card p { margin: 14px 0 0; font-family: "Newsreader", serif; font-style: italic; font-size: 16px; line-height: 1.5; color: var(--uh); }
.uxr__stack-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(124, 92, 255, .12);
  color: var(--uv);
}
.uxr__stack-tag--bad { background: rgba(255, 77, 109, .12); color: var(--ubad); }
.uxr__stack-tag--good { background: rgba(47, 191, 133, .12); color: var(--uok); }

.uxr__intro-badge {
  position: absolute;
  z-index: 6;
  right: -22px;
  bottom: -14px;
  max-width: 250px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--udark);
  box-shadow: 0 22px 50px rgba(27, 21, 35, .28);
}
.uxr__intro-badge strong { display: block; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.4; }
.uxr__intro-badge span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--umuted); line-height: 1.5; }

.uxr__intro-copy { padding-left: 10px; }


/* ---------- 03. What we research (tabbed showcase) ---------- */
.uxr__svc { padding: 120px 0; background: var(--ubg); }
.uxr__svc-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 30px;
  align-items: start;
}
.uxr__svc-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 120px;
}
.uxr__svc-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--ub);
  background: #fff;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.uxr__svc-tab:hover { transform: translateX(4px); }
.uxr__svc-tab strong { display: block; font-size: 16px; font-weight: 600; color: var(--uh); }
.uxr__svc-tab em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 300; color: var(--ut); line-height: 1.5; }
.uxr__svc-tab-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--up);
  font-size: 18px;
}
.uxr__svc-tab.is-active {
  border-color: var(--up);
  background: var(--udark);
  box-shadow: 0 18px 34px rgba(27, 21, 35, .16);
}
.uxr__svc-tab.is-active strong { color: #fff; }
.uxr__svc-tab.is-active em { color: var(--umuted); }
.uxr__svc-tab.is-active .uxr__svc-tab-ico { background: rgba(255, 138, 107, .18); color: var(--up3); }

.uxr__svc-panels { position: relative; }
.uxr__svc-panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  padding: 44px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--ub);
}
.uxr__svc-num {
  display: inline-block;
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  color: var(--up);
  margin-bottom: 10px;
}
.uxr__svc-panel-copy h3 { font-family: "Newsreader", serif; font-size: 28px; font-weight: 600; color: var(--uh); margin: 0 0 14px; }
.uxr__svc-panel-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ut); margin: 0 0 22px; }
.uxr__svc-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.uxr__svc-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--uh); }
.uxr__svc-list i { color: var(--uok); font-size: 12px; }

.uxr__svc-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 18px;
  background: var(--ubg);
  border: 1px solid var(--ub);
  padding: 20px;
}

/* Small self-contained "mock" graphics - one per method tab. */
.uxr__mock--quotes { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.uxr__mock-bubble { display: block; height: 34px; width: var(--w); border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--ub); box-shadow: 0 10px 20px rgba(32, 26, 46, .08); }
.uxr__mock-bubble--alt { border-radius: 16px 16px 4px 16px; margin-left: auto; background: rgba(124, 92, 255, .1); border-color: rgba(124, 92, 255, .3); }

.uxr__mock--tasks { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.uxr__mock--tasks span { display: block; height: 14px; border-radius: 7px; background: rgba(47, 191, 133, .5); }
.uxr__mock--tasks span.is-fail { background: rgba(255, 77, 109, .5); width: 55%; }

.uxr__mock--cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.uxr__mock--cards span { display: block; aspect-ratio: 1; border-radius: 10px; background: #fff; border: 1px solid var(--ub); box-shadow: 0 10px 20px rgba(32, 26, 46, .08); }

.uxr__mock--chart { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 150px; width: 100%; }
.uxr__mock--chart i { display: block; width: 20px; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--up2), var(--up)); }


/* ---------- 04. Research principles (index-card moodboard) ---------- */
.uxr__principle { padding: 130px 0 120px; background: #fff; }
.uxr__note-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 34px;
}
.uxr__note {
  position: relative;
  padding: 30px 26px 26px;
  background: var(--ubg);
  border: 1px solid var(--ub);
  box-shadow: 0 16px 30px rgba(32, 26, 46, .1);
  --ty: 0px;
  transition: transform .35s ease, box-shadow .35s ease, opacity .5s ease;
}
.uxr__note::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 58px;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(124, 92, 255, .35);
  border: 1px solid rgba(124, 92, 255, .5);
}
.uxr__note h3 { font-family: "Newsreader", serif; font-size: 19px; font-weight: 600; color: var(--uh); margin: 0 0 10px; }
.uxr__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--ut); margin: 0; }
.uxr__note--1 { transform: translateY(var(--ty)) rotate(-2deg); }
.uxr__note--2 { transform: translateY(var(--ty)) rotate(1.4deg); }
.uxr__note--3 { transform: translateY(var(--ty)) rotate(-1deg); }
.uxr__note--4 { transform: translateY(var(--ty)) rotate(2deg); }
.uxr__note--5 { transform: translateY(var(--ty)) rotate(-1.6deg); }
.uxr__note--6 { transform: translateY(var(--ty)) rotate(1deg); }
.uxr__note:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 46px rgba(32, 26, 46, .16); }


/* ---------- 05. Assumption vs evidence ----------
   A plain static side-by-side pair of quote cards rather than a before/after
   image reveal - the comparison here is a claim versus a measured finding,
   which reads better as text than as a screenshot swap. */
.uxr__evidence { padding: 120px 0; }
.uxr__ev-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.uxr__ev-card {
  position: relative;
  margin: 0;
  padding: 36px 34px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}
.uxr__ev-card:hover { transform: translateY(-4px); }
.uxr__ev-card--assume { border-style: dashed; }
.uxr__ev-card--fact:hover { border-color: rgba(47, 191, 133, .5); }
.uxr__ev-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.uxr__ev-tag--assume { background: rgba(255, 255, 255, .1); color: var(--umuted); }
.uxr__ev-tag--fact { background: var(--uok); color: var(--udark); }
.uxr__ev-quote { font-family: "Newsreader", serif; font-style: italic; font-size: 19px; line-height: 1.55; color: #fff; margin: 0 0 16px; }
.uxr__ev-note { font-size: 13px; font-weight: 300; color: var(--umuted); margin: 0; }

/* Pulsing connector badge, centred over the seam between the two cards. */
.uxr__ev-vs {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: var(--udark);
  font-size: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%) scale(0);
  animation: uxrKfBadgePulse 2.6s ease-in-out 1.1s infinite;
}
@keyframes uxrKfBadgePulse {
  0%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 90, 60, .35); }
  50% { box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 0 14px rgba(255, 90, 60, 0); }
}
.uxr__ev-foot {
  max-width: 980px;
  margin: 26px auto 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--umuted);
}
.uxr__ev-foot i { color: var(--up3); margin-right: 8px; }


/* ---------- 06. Research process ---------- */
.uxr__proc { padding: 120px 0; background: var(--ubg); }
.uxr__proc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 22px;
  position: relative;
}
.uxr__proc-track::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 4%;
  right: 4%;
  border-top: 2px dashed var(--ub);
  z-index: 0;
}
.uxr__proc-step { position: relative; z-index: 1; padding-top: 0; }
.uxr__proc-badge { position: relative; display: inline-block; margin-bottom: 18px; }
.uxr__proc-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--up);
  color: var(--up);
  font-family: "Newsreader", serif;
  font-weight: 600;
  font-size: 16px;
}
.uxr__proc-ico {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--udark);
  color: #fff;
  font-size: 11px;
  border: 2px solid var(--ubg);
}
.uxr__proc-step h3 { font-family: "Newsreader", serif; font-size: 18px; font-weight: 600; color: var(--uh); margin: 0 0 10px; }
.uxr__proc-step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ut); margin: 0; }


/* ---------- 07. Deliverables ---------- */
.uxr__deliver { padding: 120px 0; background: #fff; }
.uxr__deliver-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.uxr__deliver-item {
  padding: 32px 26px;
  border-radius: 18px;
  background: var(--ubg);
  border: 1px solid var(--ub);
  transition: transform .3s ease, box-shadow .3s ease;
}
.uxr__deliver-item:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(32, 26, 46, .12); }
.uxr__deliver-item h3 { font-family: "Newsreader", serif; font-size: 17px; font-weight: 600; color: var(--uh); margin: 0 0 10px; }
.uxr__deliver-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ut); margin: 0; }


/* ---------- 08. Tools ---------- */
.uxr__tools { padding: 120px 0; }
.uxr__tools-tabs { max-width: 1000px; margin: 0 auto; }
.uxr__tools-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.uxr__tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: var(--umuted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s ease;
}
.uxr__tools-tab i { font-size: 12px; }
.uxr__tools-tab:hover { border-color: rgba(255, 255, 255, .38); color: #fff; }
.uxr__tools-tab.is-active { background: var(--up); border-color: var(--up); color: #fff; }
.uxr__tools-panels { position: relative; }
.uxr__tools-panel { display: block; }
.uxr__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.uxr__chips li {
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #f1e8f5;
  font-size: 14px;
  font-weight: 400;
}


/* ---------- 09. Industries ---------- */
.uxr__ind { padding: 120px 0; background: #fff; }
.uxr__ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.uxr__ind-item {
  display: block;
  padding: 30px 24px;
  border-radius: 16px;
  background: var(--ubg);
  border: 1px solid var(--ub);
  transition: all .3s ease;
}
.uxr__ind-item:hover { background: var(--udark); border-color: var(--udark); transform: translateY(-4px); }
.uxr__ind-item h3 { font-family: "Newsreader", serif; font-size: 17px; font-weight: 600; color: var(--uh); margin: 0 0 8px; transition: color .3s ease; }
.uxr__ind-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ut); margin: 0; transition: color .3s ease; }
.uxr__ind-item:hover h3 { color: #fff; }
.uxr__ind-item:hover p { color: var(--umuted); }
.uxr__ind-item:hover .uxr__ico { background: rgba(255, 138, 107, .18); color: var(--up3); }
.uxr__ind-foot { text-align: center; margin-top: 50px; }


/* ---------- 10. Why 3Shadz ---------- */
.uxr__why { padding: 120px 0; background: var(--ubg); }
.uxr__why-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.uxr__why-list { display: grid; gap: 26px; }
.uxr__why-item { display: flex; gap: 20px; }
.uxr__why-num { flex: 0 0 auto; font-family: "Newsreader", serif; font-style: italic; font-size: 22px; font-weight: 500; color: var(--up); }
.uxr__why-item h3 { font-family: "Newsreader", serif; font-size: 17px; font-weight: 600; color: var(--uh); margin: 0 0 6px; }
.uxr__why-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ut); margin: 0; }
.uxr__why-copy { padding-left: 10px; }
.uxr__why-figure { margin-top: 30px; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.uxr__why-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- 11. Connected services :: expanding panel rail ----------
   Same composition as design-experience.html / ui-ux-design.html /
   product-design.html's connect sections (not the shared "Archetype R"
   scroll rail used by this page's siblings): six dark panels sit edge to
   edge as one wide bar, each collapsed to a sliver with only its icon
   and a vertical label. Hovering (or focusing) a panel grows it via
   flex-grow while its neighbours yield, and a CSS container query on
   each panel's own inline-size reveals the horizontal title, copy and
   link only once it has room - so the same rule drives both the layout
   and the content reveal, no JS required.
   -------------------------------------------------------------------- */
.uxr__connect { padding: 120px 0; background: #fff; }
.uxr__page .uxr__connect-grid {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 440px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--udark);
}
.uxr__page .uxr__connect-card {
  container-type: inline-size;
  position: relative;
  flex: 1 1 0%;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 28px;
  background: var(--udark);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.22, .61, .36, 1);
}
.uxr__page .uxr__connect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .38), transparent 60%);
  pointer-events: none;
}
.uxr__page .uxr__connect-card:nth-child(2)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .36), transparent 60%); }
.uxr__page .uxr__connect-card:nth-child(3)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 178, 56, .34), transparent 60%); }
.uxr__page .uxr__connect-card:nth-child(4)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .3), transparent 60%); }
.uxr__page .uxr__connect-card:nth-child(5)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .3), transparent 60%); }
.uxr__page .uxr__connect-card:nth-child(6)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(47, 191, 133, .32), transparent 60%); }

.uxr__page .uxr__connect-card .uxr__ico {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 20px;
  width: 42px;
  height: 42px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--up3);
  font-size: 16px;
  transition: background .4s ease, color .4s ease;
}
.uxr__page .uxr__connect-card h3 {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: "Newsreader", serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
.uxr__page .uxr__connect-card p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--umuted);
  transition: opacity .35s ease;
}
.uxr__page .uxr__connect-card > a {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--up3);
  transition: opacity .35s ease;
}
.uxr__page .uxr__connect-card:hover .uxr__ico,
.uxr__page .uxr__connect-card:focus-within .uxr__ico { background: #fff; color: var(--udark); }

@media (min-width: 768px) {
  .uxr__page .uxr__connect-card:nth-child(1) { flex-grow: 2.6; }
  .uxr__page .uxr__connect-card:nth-child(n+2) { flex-grow: 1; }
  .uxr__page .uxr__connect-grid:hover .uxr__connect-card,
  .uxr__page .uxr__connect-grid:focus-within .uxr__connect-card { flex-grow: 1; }
  .uxr__page .uxr__connect-grid .uxr__connect-card:hover,
  .uxr__page .uxr__connect-grid .uxr__connect-card:focus-within { flex-grow: 2.6; }
}

/* the reveal: driven purely by how much inline-size the panel itself has */
@container (min-width: 300px) {
  .uxr__page .uxr__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 21px;
    margin-top: auto;
  }
  .uxr__page .uxr__connect-card p { opacity: 1; max-height: 140px; }
  .uxr__page .uxr__connect-card > a { opacity: 1; max-height: 60px; pointer-events: auto; }
}

@media (max-width: 767px) {
  .uxr__page .uxr__connect-grid { flex-direction: column; height: auto; border-radius: 22px; }
  .uxr__page .uxr__connect-card { padding: 24px 22px 26px; min-height: 150px; }
  .uxr__page .uxr__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 19px;
    margin: auto 0 0;
  }
  .uxr__page .uxr__connect-card p { opacity: 1; max-height: none; }
  .uxr__page .uxr__connect-card > a { opacity: 1; max-height: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .uxr__page .uxr__connect-card { transition: none; }
}


/* ---------- 12. FAQ ---------- */
.uxr__faq { padding: 120px 0; background: var(--ubg); }
.uxr__faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.uxr__faq-item { border-radius: 16px; background: #fff; border: 1px solid var(--ub); overflow: hidden; }
.uxr__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  text-align: left;
  font-family: "Newsreader", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--uh);
  background: transparent;
  border: none;
  cursor: pointer;
}
.uxr__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ubg);
  color: var(--up);
  font-size: 12px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.uxr__faq-item.is-open .uxr__faq-icon { background: var(--up); color: #fff; transform: rotate(135deg); }
.uxr__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.uxr__faq-a > div { overflow: hidden; }
.uxr__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--ut); }
.uxr__faq-item.is-open .uxr__faq-a { grid-template-rows: 1fr; }


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .uxr__hero-title { font-size: 46px; }
  .uxr__page .uxr__title { font-size: 36px; }
  .uxr__deliver-grid,
  .uxr__ind-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1199px) {
  .uxr__hero { padding: 170px 0 100px; }
  .uxr__hero-grid,
  .uxr__intro-grid,
  .uxr__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .uxr__hero-title { font-size: 40px; }
  .uxr__pin { font-size: 12px; padding: 8px 14px; }
  .uxr__intro-badge { right: 16px; bottom: -20px; }
  .uxr__svc-shell { grid-template-columns: 1fr; }
  .uxr__svc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .uxr__svc-tab { flex: 1 1 260px; }
  .uxr__svc-panel { grid-template-columns: 1fr; }
  .uxr__svc-panel-visual { min-height: 180px; }
  .uxr__note-board { grid-template-columns: repeat(2, 1fr); }
  .uxr__proc-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .uxr__proc-track::before { display: none; }
  .uxr__connect-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .uxr__hero { padding: 150px 0 90px; }
  .uxr__hero-title { font-size: 34px; }
  .uxr__page .uxr__title { font-size: 30px; }
  .uxr__hero-lead { font-size: 17px; }
  .uxr__intro,
  .uxr__svc,
  .uxr__principle,
  .uxr__evidence,
  .uxr__proc,
  .uxr__deliver,
  .uxr__tools,
  .uxr__ind,
  .uxr__why,
  .uxr__connect,
  .uxr__faq { padding: 90px 0; }
  .uxr__page .uxr__head--center { margin-bottom: 44px; }
  .uxr__deliver-grid,
  .uxr__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .uxr__pin--tl,
  .uxr__pin--tr,
  .uxr__pin--bl,
  .uxr__pin--br { position: static; display: inline-flex; margin: 8px 8px 0 0; transform: none; }
  .uxr__hero-figure { display: flex; flex-direction: column; }
  .uxr__stack { height: auto; padding-bottom: 20px; }
  .uxr__stack-card { position: relative; top: 0 !important; margin-bottom: 16px; }
}

@media (max-width: 767px) {
  .uxr__hero { padding: 130px 0 70px; }
  .uxr__hero-title { font-size: 28px; }
  .uxr__page .uxr__title { font-size: 26px; }
  .uxr__page .uxr__lead,
  .uxr__hero-lead { font-size: 16px; }
  .uxr__intro,
  .uxr__svc,
  .uxr__principle,
  .uxr__evidence,
  .uxr__proc,
  .uxr__deliver,
  .uxr__tools,
  .uxr__ind,
  .uxr__why,
  .uxr__connect,
  .uxr__faq { padding: 70px 0; }
  .uxr__hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .uxr__hero-actions { gap: 12px; }
  .uxr__page .uxr__btn,
  .uxr__page .uxr__btn-outline { padding: 15px 26px; font-size: 15px; }
  .uxr__deliver-grid,
  .uxr__ind-grid,
  .uxr__connect-grid { grid-template-columns: 1fr; }
  .uxr__note-board { grid-template-columns: 1fr; }
  .uxr__proc-track { grid-template-columns: repeat(2, 1fr); }
  .uxr__svc-panel { padding: 30px 24px; }
  .uxr__svc-tab { flex: 1 1 100%; }
  .uxr__intro-badge { position: static; max-width: none; margin-top: 18px; }
  .uxr__faq-q { font-size: 16px; padding: 20px 22px; }
  .uxr__faq-a p { padding: 0 22px 22px; }
  .uxr__tools-tab { padding: 10px 16px; font-size: 13px; }
  .uxr__marquee-track span { font-size: 15px; }
  .uxr__ev-grid { grid-template-columns: 1fr; }
  .uxr__ev-vs { position: static; transform: none; margin: 0 auto 20px; animation: none; }
  .uxr__ev-foot { font-size: 13.5px; }
  .uxr__session-body { grid-template-columns: 1fr; }
  .uxr__session-cam { flex-direction: row; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 16px; }
}

@media (max-width: 575px) {
  .uxr__proc-track { grid-template-columns: 1fr; }
  .uxr__session-foot { flex-wrap: wrap; row-gap: 12px; }
  .uxr__metric--dial { margin-left: 0; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .uxr__marquee-track,
  .uxr__rec,
  .uxr__wave i,
  .uxr__tline,
  .uxr__ev-vs { animation: none; }
  .uxr__tline { opacity: 1; }
  .uxr__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   DESIGN SYSTEMS PAGE (dsy__*)
   Scoped entirely to .dsy__page (added on <main> of
   design-systems.html). Shares its coral/amber/violet-on-cream
   palette with the rest of the Design & Experience family (dex__*,
   uix__*, pd__*, uxr__*), paired with its own display face -
   Manrope, a systematic geometric grotesque - and a JetBrains Mono
   accent used nowhere else on the site for token/code labels.
   Unique mechanic: a genuinely interactive "token console" hero -
   clicking a color token recolors three live surface previews via
   one CSS custom property, making the page's own argument (change
   a token once, watch it propagate everywhere) something a visitor
   can do, not just read - distinct from the annotated screenshot
   (dex), the design-tool editor window (uix), the sketchpad build
   ladder (pd), and the usability-session monitor (uxr) used on the
   sibling pages. Keyframes are prefixed dsyKf* so nothing collides
   with the rest of the theme.
   ============================================================ */
.dsy__page {
  --sy: #FF5A3C;
  --sy2: #FFB238;
  --sym: #FF8A6B;
  --syv: #7C5CFF;
  --syi: #201A2E;
  --syt: #6f6478;
  --syb: #ece1d6;
  --sybg: #FBF5EF;
  --sydark: #1B1523;
  --symuted: #cdbfd9;
  --syok: #2fbf85;
  --sy-mono: "JetBrains Mono", monospace;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.dsy__page .dsy__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sy);
  margin-bottom: 18px;
}
.dsy__page .dsy__title {
  font-family: "Manrope", sans-serif;
  font-size: 42px;
  line-height: 1.22;
  font-weight: 800;
  color: var(--syi);
  margin: 0 0 20px;
}
.dsy__page .dsy__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--syi); margin: 0 0 18px; }
.dsy__page .dsy__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--syt); margin: 0 0 16px; }
.dsy__page .dsy__text:last-child { margin-bottom: 0; }
.dsy__page .dsy__head { max-width: 860px; }
.dsy__page .dsy__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 60px; }

/* Dark bands re-colour the shared furniture rather than duplicating it. */
.dsy__page .dsy__dark { position: relative; overflow: hidden; background: var(--sydark); }
.dsy__page .dsy__dark > .container { position: relative; z-index: 1; }
.dsy__page .dsy__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 90% -10%, rgba(255, 90, 60, .26), transparent 62%),
              radial-gradient(700px 400px at 4% 106%, rgba(124, 92, 255, .24), transparent 64%);
}
.dsy__page .dsy__dark .dsy__eyebrow { color: var(--sym); }
.dsy__page .dsy__dark .dsy__title { color: #fff; }
.dsy__page .dsy__dark .dsy__lead { color: #f1e8f5; }
.dsy__page .dsy__dark .dsy__text { color: var(--symuted); }

.dsy__page .dsy__btn,
.dsy__page .dsy__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dsy__page .dsy__btn { color: #fff; background: var(--sy); border: 2px solid var(--sy); }
.dsy__page .dsy__btn:hover { background: var(--syi); border-color: var(--syi); color: #fff; }
.dsy__page .dsy__btn-outline { color: var(--sy); border: 2px solid var(--sy); background: transparent; }
.dsy__page .dsy__btn-outline:hover { background: var(--sy); color: #fff; }
.dsy__page .dsy__dark .dsy__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.dsy__page .dsy__dark .dsy__btn-outline:hover { background: #fff; border-color: #fff; color: var(--sydark); }

/* Arrow link used at the foot of most cards and sections. */
.dsy__page .dsy__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sy);
  transition: gap .3s ease, color .3s ease;
}
.dsy__page .dsy__link:hover { gap: 15px; color: var(--syv); }
.dsy__page .dsy__dark .dsy__link { color: var(--sym); }
.dsy__page .dsy__dark .dsy__link:hover { color: #fff; }

/* Small square icon tile, reused by most card types on the page. */
.dsy__page .dsy__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--sy);
  font-size: 20px;
  margin-bottom: 18px;
}
.dsy__page .dsy__dark .dsy__ico { background: rgba(255, 138, 107, .16); color: var(--sym); }

/* "Token chip" word treatment - a monospace, code-styled pill instead of
   dex's solid highlighter or uix's gradient-clip text, so the hero's
   "marked" word itself reads like a design token being referenced. */
.dsy__page .dsy__mark {
  position: relative;
  display: inline-block;
  font-family: var(--sy-mono);
  font-weight: 600;
  color: var(--sy2);
  background: rgba(255, 178, 56, .14);
  border: 1px solid rgba(255, 178, 56, .4);
  border-radius: 8px;
  padding: 2px 12px;
}


/* ---------- 01. Hero: interactive token console ---------- */
.dsy__hero {
  position: relative;
  overflow: hidden;
  background: var(--sydark);
  padding: 200px 0 110px;
}
.dsy__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 14% -10%, rgba(255, 90, 60, .32), transparent 60%),
              radial-gradient(720px 420px at 94% 108%, rgba(124, 92, 255, .28), transparent 62%);
}
/* Graph-paper grid canvas - a finer, dimmer grid than uix's blueprint lines,
   read as "spec sheet" rather than "design-tool canvas". */
.dsy__hero-canvas {
  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: 34px 34px;
  mask-image: radial-gradient(70% 70% at 50% 38%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 38%, #000 20%, transparent 100%);
}
.dsy__hero > .container { position: relative; z-index: 2; }
.dsy__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dsy__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 26px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: #f1e8f5;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dsy__hero-eyebrow i { font-size: 12px; color: var(--sym); }
.dsy__hero-title {
  font-family: "Manrope", sans-serif;
  font-size: 54px;
  line-height: 1.18;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px;
}
.dsy__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #f1e8f5; margin: 0 0 20px; }
.dsy__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--symuted); margin: 0 0 16px; }
.dsy__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.dsy__hero-stats {
  list-style: none;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.dsy__hero-stats li { position: relative; padding-left: 20px; }
.dsy__hero-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sy2), var(--sy));
}
.dsy__hero-stats strong { display: block; font-size: 21px; font-weight: 700; color: #fff; line-height: 1.2; font-family: "Manrope", sans-serif; }
.dsy__hero-stats span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--symuted); line-height: 1.5; }

.dsy__hero-figure { position: relative; }
.dsy__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 90, 60, .48), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}

/* ---------- Hero visual: the "token console" ----------
   A self-contained "screenshot" of a token pipeline: a title bar, a rail of
   clickable color tokens, a "bus" connector, and three live surface
   previews. `--dsy-live` is set by the page-scoped script on click and
   consumed by every accent element below, so one click recolors all three
   previews at once - no other page mechanic on the site is interactive
   in this way. */
.dsy__console {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--sydark);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  --dsy-live: var(--sy);
}
.dsy__console-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dsy__console-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dsy-live); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); transition: background .3s ease; }
.dsy__console-file { font-family: var(--sy-mono); font-style: normal; font-size: 12px; color: var(--symuted); }
.dsy__console-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--syok); }
.dsy__console-live i { font-size: 9px; animation: dsyKfBlink 1.8s ease-in-out infinite; }
@keyframes dsyKfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.dsy__console-body { padding: 22px 22px 6px; display: flex; flex-direction: column; gap: 18px; }

.dsy__token-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dsy__token-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  text-align: left;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.dsy__token-row:hover { border-color: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.dsy__token-row.is-active { border-color: var(--tv); background: rgba(255, 255, 255, .09); }
.dsy__token-swatch { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--tv); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.dsy__token-meta { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.dsy__token-meta strong { font-family: var(--sy-mono); font-size: 11px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsy__token-meta em { font-family: var(--sy-mono); font-style: normal; font-size: 10px; color: var(--symuted); }

/* Connector "bus" line with a small traveling highlight, standing in for
   data actually flowing from the token rail down to the surfaces below. */
.dsy__bus { position: relative; height: 18px; margin: 0 6px; overflow: hidden; }
.dsy__bus::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dsy-live), transparent);
  opacity: .6;
  transition: background .3s ease;
}
.dsy__bus::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 34px;
  height: 6px;
  border-radius: 6px;
  background: var(--dsy-live);
  filter: blur(4px);
  opacity: .85;
  transition: background .3s ease;
  animation: dsyKfBusFlow 2.6s linear infinite;
}
@keyframes dsyKfBusFlow { from { left: -10%; } to { left: 104%; } }

.dsy__surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dsy__surface {
  position: relative;
  padding: 14px 12px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
}
.dsy__surface-tick { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 2px; height: 8px; background: var(--dsy-live); opacity: .7; transition: background .3s ease; }
.dsy__surface-label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .4px; color: var(--symuted); margin-bottom: 10px; }
.dsy__surface-label i { font-size: 10px; color: var(--dsy-live); transition: color .3s ease; }
.dsy__surface-mock { display: flex; flex-direction: column; gap: 7px; }
.dsy__surface-line { display: block; height: 6px; width: var(--w); border-radius: 3px; background: rgba(255, 255, 255, .14); }
.dsy__surface-cta { display: block; margin-top: 4px; width: 60%; height: 14px; border-radius: 5px; background: var(--dsy-live); transition: background .3s ease; }
.dsy__surface-mock--mobile { align-items: center; }
.dsy__surface-chip { display: inline-block; width: 74%; height: 22px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.dsy__surface-mock--dash { flex-direction: row; align-items: flex-end; gap: 6px; height: 42px; }
.dsy__surface-bar { display: block; width: 16%; height: var(--h); border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, .14); }
.dsy__surface-bar--live { background: var(--dsy-live); transition: background .3s ease; }

.dsy__console-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--symuted);
}
.dsy__console-foot span { display: inline-flex; align-items: center; }
.dsy__console-foot span i { color: var(--dsy-live); margin-right: 6px; transition: color .3s ease; }
.dsy__console-foot > i { font-size: 10px; color: var(--symuted); }

/* One-shot "pulse" triggered by the token-click script, replayed by
   toggling the class rather than restarting a running animation. */
.dsy__console.is-pulsing .dsy__bus::before { animation: dsyKfPulseLine .6s ease; }
@keyframes dsyKfPulseLine { 0% { opacity: 1; filter: brightness(1.8); } 100% { opacity: .6; filter: brightness(1); } }
.dsy__console.is-pulsing .dsy__surface { animation: dsyKfPulseSurface .6s ease; }
@keyframes dsyKfPulseSurface {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .22); }
  100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

.dsy__flag {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 50px;
  background: #fff;
  color: var(--syi);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.dsy__flag i { color: var(--sy); font-size: 11px; }
.dsy__flag--tl { top: -14px; left: 20px; }
.dsy__flag--br { bottom: -14px; right: 20px; }


/* ---------- Keyword marquee ---------- */
.dsy__marquee {
  background: linear-gradient(90deg, var(--sy), var(--sy2));
  padding: 20px 0;
  overflow: hidden;
}
.dsy__marquee-mask { overflow: hidden; }
.dsy__marquee-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: dsyKfMarquee 34s linear infinite;
}
.dsy__marquee-track span {
  font-family: var(--sy-mono);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.dsy__marquee-track i { font-size: 6px; color: rgba(255, 255, 255, .65); }
@keyframes dsyKfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ---------- 02. Introduction: audit ledger ---------- */
.dsy__intro { padding: 120px 0; background: #fff; }
.dsy__intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.dsy__intro-figure { position: relative; }

/* A dark "terminal" card listing an audit's findings - the drift this page's
   headline argues against, made concrete before the copy explains it. */
.dsy__ledger {
  border-radius: 20px;
  background: var(--syi);
  border: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 6px;
  box-shadow: 0 30px 60px rgba(32, 26, 46, .2);
  overflow: hidden;
}
.dsy__ledger-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dsy__ledger-bar em { font-family: var(--sy-mono); font-style: normal; font-size: 12px; color: var(--symuted); }
.dsy__ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; font-family: var(--sy-mono); font-size: 12.5px; }
.dsy__ledger-row + .dsy__ledger-row { border-top: 1px dashed rgba(255, 255, 255, .08); }
.dsy__ledger-row span:first-child { color: #fff; }
.dsy__ledger-count { font-weight: 600; }
.dsy__ledger-count--bad { color: var(--sym); }
.dsy__ledger-count--ok { color: var(--syok); }
.dsy__ledger-row--ok span:first-child { color: var(--syok); }

.dsy__intro-badge {
  position: absolute;
  z-index: 2;
  right: -22px;
  bottom: -26px;
  max-width: 250px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--syb);
  box-shadow: 0 22px 50px rgba(32, 26, 46, .14);
}
.dsy__intro-badge strong { display: block; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; color: var(--syi); line-height: 1.4; }
.dsy__intro-badge span { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; color: var(--syt); line-height: 1.5; }

.dsy__intro-copy { padding-left: 10px; }


/* ---------- 03. Anatomy of a system (tabbed showcase) ---------- */
.dsy__svc { padding: 120px 0; background: var(--sybg); }
.dsy__svc-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 30px;
  align-items: start;
}
.dsy__svc-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 120px;
}
.dsy__svc-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--syb);
  background: #fff;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.dsy__svc-tab:hover { transform: translateX(4px); }
.dsy__svc-tab strong { display: block; font-family: "Manrope", sans-serif; font-size: 15.5px; font-weight: 700; color: var(--syi); }
.dsy__svc-tab em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 300; color: var(--syt); line-height: 1.5; }
.dsy__svc-tab-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 90, 60, .1);
  color: var(--sy);
  font-size: 18px;
}
.dsy__svc-tab.is-active {
  border-color: var(--sy);
  background: var(--sydark);
  box-shadow: 0 18px 34px rgba(27, 21, 35, .16);
}
.dsy__svc-tab.is-active strong { color: #fff; }
.dsy__svc-tab.is-active em { color: var(--symuted); }
.dsy__svc-tab.is-active .dsy__svc-tab-ico { background: rgba(255, 138, 107, .18); color: var(--sym); }

.dsy__svc-panels { position: relative; }
.dsy__svc-panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  padding: 44px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--syb);
}
.dsy__svc-num {
  display: inline-block;
  font-family: var(--sy-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sy);
  margin-bottom: 10px;
}
.dsy__svc-panel-copy h3 { font-family: "Manrope", sans-serif; font-size: 26px; font-weight: 800; color: var(--syi); margin: 0 0 14px; }
.dsy__svc-panel-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--syt); margin: 0 0 22px; }
.dsy__svc-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.dsy__svc-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--syi); }
.dsy__svc-list i { color: var(--syok); font-size: 12px; }

.dsy__svc-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 18px;
  background: var(--sybg);
  border: 1px solid var(--syb);
}

/* Small self-contained "mock UI" graphics - one per anatomy layer tab. */
.dsy__mock { width: 78%; }
.dsy__mock--ui { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(32, 26, 46, .12); }
.dsy__mock-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--syb); margin-right: 6px; }
.dsy__mock-line { height: 10px; width: var(--w); border-radius: 6px; background: var(--sybg); border: 1px solid var(--syb); }
.dsy__mock-btn { margin-top: 6px; width: 40%; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--sy2), var(--sy)); }

.dsy__mock--flow { display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; }
.dsy__mock-node { width: 22px; height: 22px; border-radius: 50%; background: var(--sy); box-shadow: 0 0 0 6px rgba(255, 90, 60, .16); position: relative; z-index: 1; }
.dsy__mock-node:nth-child(2) { background: var(--syv); box-shadow: 0 0 0 6px rgba(124, 92, 255, .16); }
.dsy__mock-node:nth-child(3) { background: var(--syok); box-shadow: 0 0 0 6px rgba(47, 191, 133, .16); }
.dsy__mock--flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--syb); z-index: 0; }

.dsy__mock--tokens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dsy__mock--tokens span { display: block; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 10px 20px rgba(32, 26, 46, .12); }
.dsy__mock--tokens span:nth-child(1) { background: var(--sy); }
.dsy__mock--tokens span:nth-child(2) { background: var(--sy2); }
.dsy__mock--tokens span:nth-child(3) { background: var(--syv); }
.dsy__mock--tokens span:nth-child(4) { background: var(--sydark); }
.dsy__mock--tokens span:nth-child(5) { background: var(--syok); }
.dsy__mock--tokens span:nth-child(6) { background: var(--syb); }

/* Documentation-tab mock: a title bar, three lines of body copy, and a
   dark code block - unique to this page's "Documentation" layer. */
.dsy__mock--doc { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(32, 26, 46, .12); }
.dsy__mock-doc-title { display: block; height: 14px; width: 55%; border-radius: 6px; background: linear-gradient(90deg, var(--sy2), var(--sy)); margin-bottom: 4px; }
.dsy__mock--doc .dsy__mock-line { background: var(--sybg); }
.dsy__mock-code { display: block; height: 46px; border-radius: 8px; background: var(--syi); margin-top: 8px; }


/* ---------- 04. Principles (sticky-note moodboard) ---------- */
.dsy__principle { padding: 130px 0 120px; background: #fff; }
.dsy__note-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 34px;
}
.dsy__note {
  position: relative;
  padding: 30px 26px 26px;
  background: var(--sybg);
  border: 1px solid var(--syb);
  box-shadow: 0 16px 30px rgba(32, 26, 46, .1);
  --ty: 0px;
  transition: transform .35s ease, box-shadow .35s ease, opacity .5s ease;
}
.dsy__note::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 58px;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(124, 92, 255, .35);
  border: 1px solid rgba(124, 92, 255, .5);
}
.dsy__note h3 { font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 700; color: var(--syi); margin: 0 0 10px; }
.dsy__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--syt); margin: 0; }
.dsy__note--1 { transform: translateY(var(--ty)) rotate(-2deg); }
.dsy__note--2 { transform: translateY(var(--ty)) rotate(1.4deg); }
.dsy__note--3 { transform: translateY(var(--ty)) rotate(-1deg); }
.dsy__note--4 { transform: translateY(var(--ty)) rotate(2deg); }
.dsy__note--5 { transform: translateY(var(--ty)) rotate(-1.6deg); }
.dsy__note--6 { transform: translateY(var(--ty)) rotate(1deg); }
.dsy__note:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 46px rgba(32, 26, 46, .16); }


/* ---------- 05. Without / with comparison ----------
   Five real <button> elements per side, styled with inline custom
   properties (--bg/--rad/--pad/--fs) on the left and one shared class on
   the right - genuinely built markup demonstrating the page's own value,
   rather than a photographed before/after. */
.dsy__drift { padding: 120px 0; }
.dsy__drift-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: center;
}
.dsy__drift-card {
  position: relative;
  padding: 36px 32px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
}
.dsy__drift-tag {
  display: inline-block;
  margin-bottom: 22px;
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.dsy__drift-tag--before { background: rgba(255, 255, 255, .08); color: var(--symuted); }
.dsy__drift-tag--after { background: var(--sy); color: #fff; }
.dsy__drift-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dsy__drift-btn {
  display: inline-block;
  border: none;
  cursor: default;
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  background: var(--bg, var(--sy));
  border-radius: var(--rad, 10px);
  padding: var(--pad, 12px 24px);
  font-size: var(--fs, 14px);
}
.dsy__drift-btn--token { background: var(--sy); border-radius: 10px; padding: 12px 24px; font-size: 14px; }
.dsy__drift-note { margin: 24px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.75; color: var(--symuted); }
.dsy__drift-note code { font-family: var(--sy-mono); background: rgba(255, 255, 255, .08); padding: 2px 6px; border-radius: 4px; color: #fff; font-size: 12px; }
.dsy__drift-vs {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: var(--syi);
  font-size: 15px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  transform: scale(0);
}


/* ---------- 06. Process (blueprint track) ---------- */
.dsy__proc { padding: 120px 0; background: var(--sybg); }
.dsy__proc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 22px;
  position: relative;
}
.dsy__proc-track::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 4%;
  right: 4%;
  border-top: 2px dashed var(--syb);
  z-index: 0;
}
.dsy__proc-step { position: relative; z-index: 1; }
.dsy__proc-badge { position: relative; display: inline-block; margin-bottom: 18px; }
.dsy__proc-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sy);
  color: var(--sy);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 15px;
}
.dsy__proc-ico {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--sydark);
  color: #fff;
  font-size: 11px;
  border: 2px solid var(--sybg);
}
.dsy__proc-step h3 { font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 700; color: var(--syi); margin: 0 0 10px; }
.dsy__proc-step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--syt); margin: 0; }


/* ---------- 07. Living style-guide specimen (this page's centerpiece) ---------- */
.dsy__spec { padding: 120px 0; background: #fff; }
.dsy__spec-panel {
  border-radius: 22px;
  background: var(--sybg);
  border: 1px solid var(--syb);
  padding: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.dsy__spec-block--wide { grid-column: 1 / -1; }
.dsy__spec-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--syt);
  margin-bottom: 14px;
}
.dsy__spec-colors { display: flex; flex-wrap: wrap; gap: 12px; }
.dsy__spec-colors--semantic { margin-top: 14px; }
.dsy__spec-colors span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--syt);
}
.dsy__spec-colors span::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--sw);
  box-shadow: 0 8px 16px rgba(32, 26, 46, .14);
}
.dsy__spec-type { display: grid; gap: 10px; }
.dsy__spec-type span {
  font-family: "Manrope", sans-serif;
  font-size: var(--fs);
  font-weight: 700;
  color: var(--syi);
  line-height: 1.3;
}
.dsy__spec-spacing { display: flex; align-items: flex-end; gap: 12px; }
.dsy__spec-spacing i {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--w);
  height: var(--w);
  max-height: 48px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sy2), var(--sy));
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 2px;
}
.dsy__spec-radius { display: flex; align-items: flex-end; gap: 14px; margin-top: 16px; }
.dsy__spec-radius span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #fff;
  border: 1px solid var(--syb);
  border-radius: var(--r);
  font-size: 10px;
  font-weight: 600;
  color: var(--syt);
}
.dsy__spec-elevation { display: flex; gap: 20px; }
.dsy__spec-elev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: var(--syt);
}
.dsy__spec-elev--sm { box-shadow: 0 2px 6px rgba(32, 26, 46, .14); }
.dsy__spec-elev--md { box-shadow: 0 10px 24px rgba(32, 26, 46, .18); }
.dsy__spec-elev--lg { box-shadow: 0 24px 48px rgba(32, 26, 46, .24); }
.dsy__spec-components { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dsy__spec-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.dsy__spec-chip--solid { background: var(--sy); color: #fff; }
.dsy__spec-chip--outline { background: transparent; border: 2px solid var(--sy); color: var(--sy); }
.dsy__spec-chip--ghost { background: transparent; color: var(--syi); }
.dsy__spec-chip--disabled { background: var(--syb); color: var(--syt); opacity: .65; }
.dsy__spec-chip--tag { background: rgba(124, 92, 255, .12); color: var(--syv); border-radius: 50px; }
.dsy__spec-chip--input { background: #fff; border: 1px solid var(--syb); color: var(--syt); min-width: 140px; }
.dsy__spec-chip--input.dsy__spec-chip--error { border-color: #e5484d; color: #e5484d; }
.dsy__spec-chip--switch { padding: 6px; background: transparent; }
.dsy__spec-chip--switch i { display: block; width: 34px; height: 18px; border-radius: 20px; background: var(--syb); position: relative; }
.dsy__spec-chip--switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(32, 26, 46, .2); }
.dsy__spec-chip--alert { background: rgba(255, 178, 56, .14); color: #a5690a; border: 1px solid rgba(255, 178, 56, .4); }


/* ---------- 08. Tools ---------- */
.dsy__tools { padding: 120px 0; }
.dsy__tools-tabs { max-width: 1000px; margin: 0 auto; }
.dsy__tools-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.dsy__tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: var(--symuted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s ease;
}
.dsy__tools-tab i { font-size: 12px; }
.dsy__tools-tab:hover { border-color: rgba(255, 255, 255, .38); color: #fff; }
.dsy__tools-tab.is-active { background: var(--sy); border-color: var(--sy); color: #fff; }
.dsy__tools-panels { position: relative; }
.dsy__tools-panel { display: block; }
.dsy__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dsy__chips li {
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #f1e8f5;
  font-size: 14px;
  font-weight: 400;
}


/* ---------- 09. Capabilities included :: stamped capability deck ----------
   Same composition as design-experience.html / ui-ux-design.html's cap
   sections (not the shared "Archetype X" woven-index used by this page's
   other siblings): eight dossier cards in a two-up checkerboard, each
   carrying a rotated wax-seal icon mark and an oversized watermark
   ordinal, tiles tilted a fraction of a degree so the set reads as a
   laid-out deck rather than a repeating tile grid.
   -------------------------------------------------------------------- */
.dsy__page .dsy__cap { padding: 120px 0; background: var(--sybg); }
.dsy__page .dsy__cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  counter-reset: dsyCap;
}
.dsy__page .dsy__cap-item {
  counter-increment: dsyCap;
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 34px 30px 30px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--syb);
  overflow: hidden;
  transform: rotate(-.4deg);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.dsy__page .dsy__cap-item:nth-child(odd) { transform: rotate(.5deg); }
.dsy__page .dsy__cap-item:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 26px 46px rgba(32, 26, 46, .14); z-index: 2; }

/* oversized watermark ordinal, driven by the counter - no markup needed */
.dsy__page .dsy__cap-item::after {
  content: counter(dsyCap, decimal-leading-zero);
  position: absolute;
  right: 14px;
  bottom: -14px;
  font-family: "Manrope", sans-serif;
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--syi);
  opacity: .06;
  pointer-events: none;
}

/* the seal: icon sits in a rotated blob so it reads as a stamp, not a tile */
.dsy__page .dsy__cap-item .dsy__ico {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 30% 70% 65% 35% / 55% 45% 55% 45%;
  transform: rotate(-8deg);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s ease;
}
.dsy__page .dsy__cap-item:hover .dsy__ico { transform: rotate(0deg) scale(1.06); border-radius: 50%; }

.dsy__page .dsy__cap-item h3 {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  font-family: "Manrope", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--syi);
  margin: 0 0 10px;
  transition: color .3s ease;
}
.dsy__page .dsy__cap-item p {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--syt);
  margin: 0;
  max-width: 40ch;
  transition: color .3s ease;
}

/* checkerboard: the 1st and 4th card of every run of four flips to ink */
.dsy__page .dsy__cap-item:nth-child(4n+1),
.dsy__page .dsy__cap-item:nth-child(4n+4) { background: var(--sydark); border-color: var(--sydark); }
.dsy__page .dsy__cap-item:nth-child(4n+1) h3,
.dsy__page .dsy__cap-item:nth-child(4n+4) h3 { color: #fff; }
.dsy__page .dsy__cap-item:nth-child(4n+1) p,
.dsy__page .dsy__cap-item:nth-child(4n+4) p { color: var(--symuted); }
.dsy__page .dsy__cap-item:nth-child(4n+1) .dsy__ico,
.dsy__page .dsy__cap-item:nth-child(4n+4) .dsy__ico { background: rgba(255, 138, 107, .2); color: var(--sym); }
.dsy__page .dsy__cap-item:nth-child(4n+1)::after,
.dsy__page .dsy__cap-item:nth-child(4n+4)::after { color: #fff; opacity: .07; }

@media (max-width: 1399px) {
  .dsy__page .dsy__cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .dsy__page .dsy__cap-grid { grid-template-columns: 1fr; gap: 16px; }
  .dsy__page .dsy__cap-item,
  .dsy__page .dsy__cap-item:nth-child(odd) { transform: none; padding: 28px 24px 26px; }
  .dsy__page .dsy__cap-item:hover { transform: translateY(-4px); }
  .dsy__page .dsy__cap-item::after { font-size: 54px; }
}


/* ---------- 10. Industries ---------- */
.dsy__ind { padding: 120px 0; background: #fff; }
.dsy__ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dsy__ind-item {
  display: block;
  padding: 30px 24px;
  border-radius: 16px;
  background: var(--sybg);
  border: 1px solid var(--syb);
  transition: all .3s ease;
}
.dsy__ind-item:hover { background: var(--sydark); border-color: var(--sydark); transform: translateY(-4px); }
.dsy__ind-item h3 { font-family: "Manrope", sans-serif; font-size: 16.5px; font-weight: 700; color: var(--syi); margin: 0 0 8px; transition: color .3s ease; }
.dsy__ind-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--syt); margin: 0; transition: color .3s ease; }
.dsy__ind-item:hover h3 { color: #fff; }
.dsy__ind-item:hover p { color: var(--symuted); }
.dsy__ind-item:hover .dsy__ico { background: rgba(255, 138, 107, .18); color: var(--sym); }
.dsy__ind-foot { text-align: center; margin-top: 50px; }


/* ---------- 11. Why 3Shadz ---------- */
.dsy__why { padding: 120px 0; background: var(--sybg); }
.dsy__why-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.dsy__why-list { display: grid; gap: 26px; }
.dsy__why-item { display: flex; gap: 20px; }
.dsy__why-num { flex: 0 0 auto; font-family: var(--sy-mono); font-size: 20px; font-weight: 600; color: var(--sy); }
.dsy__why-item h3 { font-family: "Manrope", sans-serif; font-size: 16.5px; font-weight: 700; color: var(--syi); margin: 0 0 6px; }
.dsy__why-item p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--syt); margin: 0; }
.dsy__why-copy { padding-left: 10px; }
.dsy__why-figure { margin-top: 30px; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.dsy__why-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- 12. Connected services :: expanding panel rail ----------
   Same composition as design-experience.html / ui-ux-design.html /
   product-design.html / ux-research.html's connect sections (not the
   shared "Archetype R" scroll rail used by this page's siblings): six
   dark panels sit edge to edge as one wide bar, each collapsed to a
   sliver with only its icon and a vertical label. Hovering (or focusing)
   a panel grows it via flex-grow while its neighbours yield, and a CSS
   container query on each panel's own inline-size reveals the horizontal
   title, copy and link only once it has room - so the same rule drives
   both the layout and the content reveal, no JS required.
   -------------------------------------------------------------------- */
.dsy__connect { padding: 120px 0; background: #fff; }
.dsy__page .dsy__connect-grid {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 440px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--sydark);
}
.dsy__page .dsy__connect-card {
  container-type: inline-size;
  position: relative;
  flex: 1 1 0%;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 28px;
  background: var(--sydark);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.22, .61, .36, 1);
}
.dsy__page .dsy__connect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .38), transparent 60%);
  pointer-events: none;
}
.dsy__page .dsy__connect-card:nth-child(2)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .36), transparent 60%); }
.dsy__page .dsy__connect-card:nth-child(3)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 178, 56, .34), transparent 60%); }
.dsy__page .dsy__connect-card:nth-child(4)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(255, 90, 60, .3), transparent 60%); }
.dsy__page .dsy__connect-card:nth-child(5)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(124, 92, 255, .3), transparent 60%); }
.dsy__page .dsy__connect-card:nth-child(6)::before { background: radial-gradient(120% 140% at 15% 120%, rgba(47, 191, 133, .32), transparent 60%); }

.dsy__page .dsy__connect-card .dsy__ico {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 20px;
  width: 42px;
  height: 42px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--sym);
  font-size: 16px;
  transition: background .4s ease, color .4s ease;
}
.dsy__page .dsy__connect-card h3 {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: "Manrope", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.dsy__page .dsy__connect-card p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--symuted);
  transition: opacity .35s ease;
}
.dsy__page .dsy__connect-card > a {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--sym);
  transition: opacity .35s ease;
}
.dsy__page .dsy__connect-card:hover .dsy__ico,
.dsy__page .dsy__connect-card:focus-within .dsy__ico { background: #fff; color: var(--sydark); }

@media (min-width: 768px) {
  .dsy__page .dsy__connect-card:nth-child(1) { flex-grow: 2.6; }
  .dsy__page .dsy__connect-card:nth-child(n+2) { flex-grow: 1; }
  .dsy__page .dsy__connect-grid:hover .dsy__connect-card,
  .dsy__page .dsy__connect-grid:focus-within .dsy__connect-card { flex-grow: 1; }
  .dsy__page .dsy__connect-grid .dsy__connect-card:hover,
  .dsy__page .dsy__connect-grid .dsy__connect-card:focus-within { flex-grow: 2.6; }
}

/* the reveal: driven purely by how much inline-size the panel itself has */
@container (min-width: 300px) {
  .dsy__page .dsy__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 21px;
    margin-top: auto;
  }
  .dsy__page .dsy__connect-card p { opacity: 1; max-height: 140px; }
  .dsy__page .dsy__connect-card > a { opacity: 1; max-height: 60px; pointer-events: auto; }
}

@media (max-width: 767px) {
  .dsy__page .dsy__connect-grid { flex-direction: column; height: auto; border-radius: 22px; }
  .dsy__page .dsy__connect-card { padding: 24px 22px 26px; min-height: 150px; }
  .dsy__page .dsy__connect-card h3 {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 19px;
    margin: auto 0 0;
  }
  .dsy__page .dsy__connect-card p { opacity: 1; max-height: none; }
  .dsy__page .dsy__connect-card > a { opacity: 1; max-height: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dsy__page .dsy__connect-card { transition: none; }
}


/* ---------- 13. FAQ ---------- */
.dsy__faq { padding: 120px 0; background: var(--sybg); }
.dsy__faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.dsy__faq-item { border-radius: 16px; background: #fff; border: 1px solid var(--syb); overflow: hidden; }
.dsy__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  text-align: left;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--syi);
  background: transparent;
  border: none;
  cursor: pointer;
}
.dsy__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sybg);
  color: var(--sy);
  font-size: 12px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.dsy__faq-item.is-open .dsy__faq-icon { background: var(--sy); color: #fff; transform: rotate(135deg); }
.dsy__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.dsy__faq-a > div { overflow: hidden; }
.dsy__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--syt); }
.dsy__faq-item.is-open .dsy__faq-a { grid-template-rows: 1fr; }


/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
  .dsy__hero-title { font-size: 46px; }
  .dsy__page .dsy__title { font-size: 34px; }
  .dsy__cap-grid,
  .dsy__ind-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1199px) {
  .dsy__hero { padding: 170px 0 100px; }
  .dsy__hero-grid,
  .dsy__intro-grid,
  .dsy__why-grid { grid-template-columns: 1fr; gap: 50px; }
  .dsy__hero-title { font-size: 40px; }
  .dsy__flag { font-size: 12px; padding: 8px 14px; }
  .dsy__intro-badge { right: 16px; bottom: -20px; }
  .dsy__svc-shell { grid-template-columns: 1fr; }
  .dsy__svc-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .dsy__svc-tab { flex: 1 1 260px; }
  .dsy__svc-panel { grid-template-columns: 1fr; }
  .dsy__svc-panel-visual { min-height: 180px; }
  .dsy__note-board { grid-template-columns: repeat(2, 1fr); }
  .dsy__proc-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .dsy__proc-track::before { display: none; }
  .dsy__spec-panel { grid-template-columns: repeat(2, 1fr); }
  .dsy__connect-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .dsy__hero { padding: 150px 0 90px; }
  .dsy__hero-title { font-size: 34px; }
  .dsy__page .dsy__title { font-size: 28px; }
  .dsy__hero-lead { font-size: 17px; }
  .dsy__intro,
  .dsy__svc,
  .dsy__principle,
  .dsy__drift,
  .dsy__proc,
  .dsy__spec,
  .dsy__tools,
  .dsy__cap,
  .dsy__ind,
  .dsy__why,
  .dsy__connect,
  .dsy__faq { padding: 90px 0; }
  .dsy__page .dsy__head--center { margin-bottom: 44px; }
  .dsy__cap-grid,
  .dsy__ind-grid { grid-template-columns: repeat(2, 1fr); }
  .dsy__flag--tl,
  .dsy__flag--br { position: static; display: inline-flex; margin: 8px 8px 0 0; }
  .dsy__hero-figure { display: flex; flex-direction: column; }
  .dsy__surfaces { grid-template-columns: 1fr; }
  .dsy__drift-grid { grid-template-columns: 1fr; }
  .dsy__drift-vs { transform: scale(1) rotate(90deg); margin: 4px auto; }
}

@media (max-width: 767px) {
  .dsy__hero { padding: 130px 0 70px; }
  .dsy__hero-title { font-size: 28px; }
  .dsy__page .dsy__title { font-size: 24px; }
  .dsy__page .dsy__lead,
  .dsy__hero-lead { font-size: 16px; }
  .dsy__intro,
  .dsy__svc,
  .dsy__principle,
  .dsy__drift,
  .dsy__proc,
  .dsy__spec,
  .dsy__tools,
  .dsy__cap,
  .dsy__ind,
  .dsy__why,
  .dsy__connect,
  .dsy__faq { padding: 70px 0; }
  .dsy__hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .dsy__hero-actions { gap: 12px; }
  .dsy__page .dsy__btn,
  .dsy__page .dsy__btn-outline { padding: 15px 26px; font-size: 15px; }
  .dsy__cap-grid,
  .dsy__ind-grid,
  .dsy__connect-grid { grid-template-columns: 1fr; }
  .dsy__note-board { grid-template-columns: 1fr; }
  .dsy__proc-track { grid-template-columns: repeat(2, 1fr); }
  .dsy__svc-panel { padding: 30px 24px; }
  .dsy__svc-tab { flex: 1 1 100%; }
  .dsy__spec-panel { grid-template-columns: 1fr; padding: 28px 22px; }
  .dsy__intro-badge { position: static; max-width: none; margin-top: 18px; }
  .dsy__faq-q { font-size: 16px; padding: 20px 22px; }
  .dsy__faq-a p { padding: 0 22px 22px; }
  .dsy__tools-tab { padding: 10px 16px; font-size: 13px; }
  .dsy__marquee-track span { font-size: 14px; }
  .dsy__token-rail { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .dsy__proc-track { grid-template-columns: 1fr; }
  .dsy__drift-row { justify-content: center; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .dsy__marquee-track,
  .dsy__console-live i,
  .dsy__bus::after { animation: none; }
  .dsy__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   SOFTWARE ENGINEERING PAGE (swe__*)
   Scoped entirely to .swe__page (added on <main> of
   software-engineering.html). Deliberately sits apart from both
   the #005fcc "Solutions" blue family (soln/ai/csw/dx/ent/spe/cds)
   and the coral/amber/violet "Design & Experience" family
   (dex/uix/pd/uxr/dsy): a graphite-and-teal engineering palette
   with a copper accent, on a cool neutral paper background, paired
   with Sora (a geometric, technical display face used nowhere else
   on the site) over Kanit body copy, with IBM Plex Mono for spec
   labels and index numbers. Component language is its own: a
   hero built as a lit "blueprint sheet" floating on a dark field,
   with clickable module nodes that update a live inspector readout
   (not a typed console, not annotation pins, not a token console);
   a four-layer architecture stack where each layer's two
   capabilities open as spec-card drawers; a CI-style build
   pipeline track; and a categorised engineering-toolkit panel in
   place of a scrolling logo marquee. Keyframes are prefixed
   sweKf* so nothing collides with the rest of the theme. Nothing
   in this block leaks to other pages.
   ============================================================ */
.swe__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.swe__page .swe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.swe__page .swe__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.swe__page .swe__title {
  font-family: var(--edisplay);
  font-size: 42px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.swe__page .swe__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.swe__page .swe__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.swe__page .swe__text:last-child { margin-bottom: 0; }
.swe__page .swe__head { max-width: 780px; }
.swe__page .swe__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.swe__page .swe__dark { position: relative; overflow: hidden; background: var(--edark); }
.swe__page .swe__dark > .container { position: relative; z-index: 1; }
.swe__page .swe__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 92% -8%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(680px 380px at 4% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.swe__page .swe__dark .swe__eyebrow { color: var(--eg3); }
.swe__page .swe__dark .swe__title { color: #fff; }
.swe__page .swe__dark .swe__lead { color: #eef6f4; }
.swe__page .swe__dark .swe__text { color: var(--emuted); }

.swe__page .swe__btn,
.swe__page .swe__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.swe__page .swe__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.swe__page .swe__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.swe__page .swe__btn-outline { color: var(--eh); border: 2px solid var(--eb); background: transparent; }
.swe__page .swe__btn-outline:hover { background: var(--eh); border-color: var(--eh); color: #fff; }
.swe__page .swe__dark .swe__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.swe__page .swe__dark .swe__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.swe__page .swe__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--eg);
  transition: gap .3s ease, color .3s ease;
}
.swe__page .swe__link:hover { gap: 15px; color: var(--eg2); }
.swe__page .swe__dark .swe__link { color: var(--eg3); }
.swe__page .swe__dark .swe__link:hover { color: #fff; }

.swe__page .swe__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(15, 139, 125, .1);
  color: var(--eg);
  font-size: 19px;
  margin-bottom: 16px;
}
.swe__page .swe__dark .swe__ico { background: rgba(53, 183, 163, .16); color: var(--eg3); }

/* Bracketed "spec" word treatment used in headings - reads like a code/spec
   annotation rather than a highlighter mark, fitting the engineering tone. */
.swe__page .swe__mark {
  position: relative;
  display: inline-block;
  color: var(--eg);
}
.swe__page .swe__dark .swe__mark { color: var(--eg3); }
.swe__page .swe__mark::before,
.swe__page .swe__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .55;
  font-size: .68em;
  position: relative;
  top: -.12em;
}
.swe__page .swe__mark::before { content: "["; margin-right: 2px; }
.swe__page .swe__mark::after { content: "]"; margin-left: 2px; }


/* ---------- 01. Hero: lit blueprint sheet + node inspector ---------- */
.swe__hero {
  position: relative;
  overflow: hidden;
  background: var(--edark);
  padding: 190px 0 110px;
}
.swe__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(880px 460px at 90% -10%, rgba(15, 139, 125, .32), transparent 60%),
              radial-gradient(700px 400px at 0% 106%, rgba(224, 153, 61, .18), transparent 62%);
}
/* Four corner "crop marks" - a technical/drafting-sheet cue distinct from the
   dot-grid (dex), blueprint line-grid (uix/ai/csw) and token console (dsy)
   used on other custom pages. */
.swe__hero-crop { position: absolute; width: 30px; height: 30px; opacity: .5; z-index: 1; }
.swe__hero-crop::before, .swe__hero-crop::after { content: ""; position: absolute; background: var(--emuted); }
.swe__hero-crop::before { width: 100%; height: 1px; top: 0; left: 0; }
.swe__hero-crop::after { width: 1px; height: 100%; top: 0; left: 0; }
.swe__hero-crop--tl { top: 34px; left: 34px; }
.swe__hero-crop--tr { top: 34px; right: 34px; transform: scaleX(-1); }
.swe__hero-crop--bl { bottom: 34px; left: 34px; transform: scaleY(-1); }
.swe__hero-crop--br { bottom: 34px; right: 34px; transform: scale(-1, -1); }

.swe__hero .container { position: relative; z-index: 2; }
.swe__hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 60px; align-items: center; }

.swe__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .08);
  padding: 9px 16px;
  border-radius: 30px;
  margin-bottom: 26px;
}
.swe__hero-badge i { color: var(--eg2); }

.swe__hero-title { font-family: var(--edisplay); font-size: 52px; line-height: 1.16; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.swe__hero-lead { font-size: 18px; line-height: 1.75; color: #dfeeea; max-width: 560px; margin: 0 0 34px; font-weight: 300; }
.swe__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }
/* The hero sits on the dark field but isn't wrapped in .swe__dark, so the
   outline button needs its own light-on-dark colours here. */
.swe__hero .swe__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.swe__hero .swe__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.swe__hero-stats { display: flex; flex-wrap: wrap; gap: 34px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 26px; }
.swe__hero-stat { max-width: 200px; }
.swe__hero-stat b { display: block; font-family: var(--edisplay); font-size: 18px; font-weight: 700; letter-spacing: .3px; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.swe__hero-stat span { font-size: 13px; line-height: 1.5; color: var(--emuted); }

/* -- Blueprint sheet: a light drafting-sheet panel floating on the dark hero -- */
.swe__blueprint {
  position: relative;
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}
.swe__blueprint-grid {
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background-image: linear-gradient(rgba(15, 139, 125, .09) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(15, 139, 125, .09) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.swe__bp-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.swe__bp-file { font-family: var(--emono); font-size: 12.5px; color: var(--et); letter-spacing: .5px; }
.swe__bp-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--emono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg); }
.swe__bp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--eg); animation: sweKfPulse 1.8s ease-in-out infinite; }

.swe__bp-frame {
  position: relative;
  border: 1.5px dashed rgba(15, 139, 125, .4);
  border-radius: 14px;
  padding: 34px 16px 20px;
  margin-bottom: 18px;
}
.swe__bp-frame-tag {
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--ebg);
  padding: 0 8px;
  font-family: var(--emono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--et);
}
.swe__bp-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; row-gap: 20px; }
.swe__bp-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 108px;
  padding: 14px 8px 12px;
  background: #fff;
  border: 1.5px solid var(--eb);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.swe__bp-node span { font-family: var(--emono); font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--eh); }
.swe__bp-node i { font-size: 17px; color: var(--eg); }
.swe__bp-node:hover { transform: translateY(-3px); }
.swe__bp-node.is-active { border-color: var(--eg); box-shadow: 0 10px 24px -12px rgba(15, 139, 125, .5); }
.swe__bp-node.is-active span { color: var(--eg); }
.swe__bp-arrow { display: flex; align-items: center; gap: 3px; color: var(--eg2); width: 30px; justify-content: center; }
.swe__bp-arrow i { font-size: 9px; opacity: .35; animation: sweKfArrow 1.6s ease-in-out infinite; }
.swe__bp-arrow i:nth-child(2) { animation-delay: .18s; }
.swe__bp-arrow i:nth-child(3) { animation-delay: .36s; }

.swe__bp-readout {
  position: relative;
  border-top: 1px solid var(--eb);
  padding-top: 16px;
  min-height: 74px;
}
.swe__bp-readout-name { font-family: var(--edisplay); font-size: 16px; font-weight: 700; color: var(--eh); margin: 0 0 6px; }
.swe__bp-readout-name em { font-family: var(--emono); font-style: normal; font-size: 11.5px; color: var(--eg); margin-right: 8px; }
.swe__bp-readout-text { font-size: 14px; line-height: 1.65; color: var(--et); margin: 0 0 10px; }
.swe__bp-readout-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.swe__bp-readout-tags span { font-family: var(--emono); font-size: 11px; color: var(--eg); background: rgba(15, 139, 125, .09); border-radius: 5px; padding: 4px 9px; }

@keyframes sweKfPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.3); } }
@keyframes sweKfArrow { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }


/* ---------- 02. Intro / positioning: copy + engineering-principles spec card ---------- */
.swe__intro { padding: 130px 0; background: #fff; }
.swe__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
.swe__intro-note {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 3px solid var(--eg);
  background: var(--ebg);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--et);
}
.swe__intro-note a { color: var(--eg); font-weight: 600; }

.swe__spec {
  border: 1px solid var(--eb);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ebg);
}
.swe__spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--edark);
}
.swe__spec-head span { font-family: var(--emono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg3); }
.swe__spec-head i { color: var(--eg2); }
.swe__spec-row { display: flex; gap: 18px; padding: 22px; border-bottom: 1px solid var(--eb); }
.swe__spec-row:last-child { border-bottom: none; }
.swe__spec-num { font-family: var(--emono); font-size: 13px; font-weight: 600; color: var(--eg); flex: 0 0 30px; padding-top: 2px; }
.swe__spec-row h3 { font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: var(--eh); margin: 0 0 6px; }
.swe__spec-row p { font-size: 14.5px; line-height: 1.7; color: var(--et); margin: 0; }


/* ---------- 03. Layered architecture: 4 layers x 2 capability drawers ---------- */
.swe__layers { padding: 40px 0 130px; background: #fff; }
.swe__stack { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--eb); border-radius: 18px; overflow: hidden; }
.swe__layer { display: grid; grid-template-columns: 260px 1fr; background: #fff; }
.swe__layer:nth-child(even) { background: var(--ebg); }
.swe__layer + .swe__layer { border-top: 1px solid var(--eb); }
.swe__layer-label { padding: 34px 30px; border-right: 1px solid var(--eb); display: flex; flex-direction: column; justify-content: center; }
.swe__layer-tag { font-family: var(--emono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--eg); margin-bottom: 10px; }
.swe__layer-label h3 { font-family: var(--edisplay); font-size: 20px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.swe__layer-label p { font-size: 14px; line-height: 1.6; color: var(--et); margin: 0; }
.swe__layer-items { display: grid; grid-template-columns: 1fr 1fr; }
.swe__layer-items > .swe__mod:first-child { border-right: 1px solid var(--eb); }

.swe__mod { padding: 0; }
.swe__mod > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 28px;
  font-family: var(--edisplay);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--eh);
}
.swe__mod > summary::-webkit-details-marker { display: none; }
.swe__mod > summary i.swe__mod-ico { flex: 0 0 auto; font-size: 17px; color: var(--eg); width: 38px; height: 38px; border-radius: 9px; background: rgba(15, 139, 125, .1); display: inline-flex; align-items: center; justify-content: center; }
.swe__mod > summary .swe__mod-toggle { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--et); transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.swe__mod[open] > summary .swe__mod-toggle { transform: rotate(45deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.swe__mod-body { padding: 0 28px 30px 82px; }
.swe__mod-body p { font-size: 14.5px; line-height: 1.75; color: var(--et); margin: 0 0 14px; }
.swe__mod-list { display: flex; flex-direction: column; gap: 9px; margin: 0 0 16px; }
.swe__mod-list li { font-size: 14px; color: var(--eh); display: flex; align-items: flex-start; gap: 10px; }
.swe__mod-list li i { color: var(--eg); font-size: 12px; margin-top: 4px; }


/* ---------- 04. Proof band: image + floating stat callouts ---------- */
.swe__proof { position: relative; padding: 0; overflow: hidden; }
.swe__proof-media { position: relative; height: 460px; }
.swe__proof-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.25) contrast(1.05); }
.swe__proof-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 22, 19, .82) 0%, rgba(11, 22, 19, .55) 45%, rgba(11, 22, 19, .88) 100%); }
.swe__proof-inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.swe__proof-head { max-width: 620px; margin-bottom: 40px; }
.swe__proof-head .swe__eyebrow { color: var(--eg3); }
.swe__proof-head h2 { font-family: var(--edisplay); font-size: 32px; font-weight: 700; color: #fff; margin: 0; }
.swe__proof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.swe__proof-stat { border-left: 2px solid var(--eg2); padding-left: 16px; }
.swe__proof-stat b { display: block; font-family: var(--edisplay); font-size: 21px; font-weight: 700; letter-spacing: .3px; color: #fff; line-height: 1.2; margin-bottom: 10px; }
.swe__proof-stat span { font-size: 13.5px; color: var(--emuted); line-height: 1.5; }


/* ---------- 05. Build pipeline (CI-style track) ---------- */
.swe__pipeline { padding: 130px 0; background: var(--ebg); }
.swe__pipe-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 20px; }
.swe__pipe-track::before { content: ""; position: absolute; top: 25px; left: 4%; right: 4%; height: 2px; background: repeating-linear-gradient(90deg, var(--eb) 0, var(--eb) 8px, transparent 8px, transparent 16px); }
.swe__pipe-stage { position: relative; padding: 0 14px; text-align: center; }
.swe__pipe-node { position: relative; width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%; background: #fff; border: 2px solid var(--eg); display: flex; align-items: center; justify-content: center; font-family: var(--emono); font-weight: 700; font-size: 14px; color: var(--eg); z-index: 1; }
.swe__pipe-stage:nth-child(6) .swe__pipe-node { background: var(--eg); color: #fff; }
.swe__pipe-stage h3 { font-family: var(--edisplay); font-size: 15.5px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.swe__pipe-stage p { font-size: 13px; line-height: 1.6; color: var(--et); margin: 0; }


/* ---------- 06. Why 3Shadz value grid ---------- */
.swe__value { padding: 130px 0; }
.swe__value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.swe__value-item { background: var(--edark2); padding: 34px 30px; position: relative; }
.swe__value-item .swe__idx { position: absolute; top: 28px; right: 28px; font-family: var(--emono); font-size: 13px; color: rgba(255, 255, 255, .28); }
.swe__value-item h3 { font-family: var(--edisplay); font-size: 17.5px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.swe__value-item p { font-size: 14px; line-height: 1.7; color: var(--emuted); margin: 0; }


/* ---------- 07. Engineering toolkit (IDE-style stack inspector) ---------- */
.swe__toolkit { padding: 130px 0; background: #fff; }
.swe__ide {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--edark2);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 80px -40px rgba(11, 22, 19, .45);
}
.swe__ide-chrome { display: flex; align-items: center; gap: 18px; padding: 14px 20px; background: var(--edark); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.swe__ide-dots { display: flex; gap: 7px; flex: 0 0 auto; }
.swe__ide-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.swe__ide-path { font-family: var(--emono); font-size: 12px; color: var(--emuted); opacity: .55; letter-spacing: .2px; }
.swe__ide-path b { color: var(--eg3); font-weight: 500; opacity: 1; }

.swe__ide-tabs { display: flex; overflow-x: auto; background: var(--edark2); border-bottom: 1px solid rgba(255, 255, 255, .06); scrollbar-width: none; }
.swe__ide-tabs::-webkit-scrollbar { display: none; }
.swe__ide-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-family: var(--emono);
  font-size: 12.5px;
  color: var(--emuted);
  background: none;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .06);
  border-top: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.swe__ide-tab i { font-size: 6px; color: var(--eg3); opacity: .5; transition: opacity .2s ease, color .2s ease; }
.swe__ide-tab:hover { color: #fff; }
.swe__ide-tab.is-active { color: #fff; background: var(--edark); border-top-color: var(--eg2); }
.swe__ide-tab.is-active i { opacity: 1; color: var(--eg2); }

.swe__ide-pane { padding: 28px 30px 32px; }
.swe__ide-line { display: flex; align-items: flex-start; gap: 20px; }
.swe__ide-line + .swe__ide-line { margin-top: 14px; }
.swe__ide-no { flex: 0 0 18px; font-family: var(--emono); font-size: 12.5px; color: rgba(255, 255, 255, .22); text-align: right; padding-top: 2px; }
.swe__ide-comment { font-family: var(--emono); font-size: 13.5px; color: rgba(255, 255, 255, .32); font-style: italic; padding-top: 2px; }
.swe__ide-code-txt { font-family: var(--emono); font-size: 14px; line-height: 1.6; padding-top: 2px; }
.swe__ide-kw { color: var(--eg2); }
.swe__ide-type { color: var(--eg3); }
.swe__ide-var { color: #fff; }
.swe__ide-punc { color: rgba(255, 255, 255, .4); }
.swe__ide-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.swe__ide-chip { font-family: var(--emono); font-size: 13px; color: var(--eg3); background: rgba(53, 183, 163, .1); border: 1px solid rgba(53, 183, 163, .22); border-radius: 6px; padding: 4px 10px; }
.swe__ide-comma { color: rgba(255, 255, 255, .3); margin: 0 8px 0 -2px; font-family: var(--emono); font-size: 13px; }
.swe__ide-cursor { display: inline-block; width: 2px; height: 15px; background: var(--eg2); margin-left: 8px; vertical-align: middle; animation: sweKfBlink 1.1s step-end infinite; }

@keyframes sweKfBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }


/* ---------- 08. FAQ ---------- */
.swe__faq { padding: 40px 0 130px; background: #fff; }
.swe__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.swe__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.swe__faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: none; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); cursor: pointer; }
.swe__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.swe__faq-item.is-open .swe__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.swe__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.swe__faq-item.is-open .swe__faq-a { max-height: 260px; }
.swe__faq-a p { margin: 0; padding: 0 26px 22px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .swe__hero-title { font-size: 44px; }
  .swe__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .swe__blueprint { max-width: 520px; }
  .swe__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .swe__layer { grid-template-columns: 1fr; }
  .swe__layer-label { border-right: none; border-bottom: 1px solid var(--eb); padding: 26px 26px 20px; }
  .swe__layer-items { grid-template-columns: 1fr; }
  .swe__layer-items > .swe__mod:first-child { border-right: none; border-bottom: 1px solid var(--eb); }
  .swe__value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swe__pipe-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .swe__pipe-track::before { display: none; }
  .swe__proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
}

@media (max-width: 991px) {
  .swe__hero { padding: 160px 0 90px; }
  .swe__hero-title { font-size: 36px; }
  .swe__intro, .swe__pipeline, .swe__value, .swe__toolkit { padding: 90px 0; }
  .swe__layers { padding: 20px 0 90px; }
  .swe__faq { padding: 20px 0 90px; }
  .swe__proof-media { height: auto; padding: 70px 0; }
  .swe__proof-inner { position: relative; }
}

@media (max-width: 767px) {
  .swe__hero-title { font-size: 30px; }
  .swe__hero-stats { gap: 24px; }
  .swe__mod-body { padding: 0 20px 26px 20px; }
  .swe__mod > summary { padding: 22px 20px; }
  .swe__value-grid { grid-template-columns: 1fr; }
  .swe__proof-stats { grid-template-columns: 1fr; }
  .swe__bp-node { width: 92px; }
  .swe__ide-path { display: none; }
  .swe__ide-pane { padding: 22px 18px 26px; }
  .swe__ide-line { gap: 12px; }
  .swe__ide-no { flex-basis: 14px; }
}

@media (max-width: 575px) {
  .swe__hero-crop { display: none; }
  .swe__bp-arrow { width: 20px; }
}

/* Users who ask for less motion get the page without the ambient animation. */
@media (prefers-reduced-motion: reduce) {
  .swe__bp-live i,
  .swe__bp-arrow i { animation: none; }
  .swe__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   CUSTOM SOFTWARE DEVELOPMENT PAGE (csd__*)
   Scoped entirely to .csd__page (added on <main> of
   custom-software-development.html, a child of Software
   Engineering). Reuses the exact brand palette from .swe__page -
   #0F8B7D teal / #E0993D copper on #0B1613 dark, Sora display over
   Kanit body, IBM Plex Mono for spec labels - so the two pages read
   as the same service family. Every component is otherwise unique
   to this page: a hero built around a clickable "fit diagnostic"
   (a generic software shape vs. a custom one matched against a
   hexagonal business outline, with a drafting-ruler edge instead of
   corner crop marks), a before/after friction ledger, a growing-
   concentric-rings requirement-to-system spine, a tabbed capability
   workbench, a dark manifesto band, a value ledger and a hub-and-
   spoke integration diagram. No blueprint node inspector, layer-
   stack drawers, CI pipeline track or categorised toolkit grid from
   .swe__page are reused. Keyframes are prefixed csdKf* so nothing
   collides with the rest of the theme. Nothing in this block leaks
   to other pages.
   ============================================================ */
.csd__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.csd__page .csd__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.csd__page .csd__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.csd__page .csd__title {
  font-family: var(--edisplay);
  font-size: 40px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.csd__page .csd__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.csd__page .csd__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.csd__page .csd__text:last-child { margin-bottom: 0; }
.csd__page .csd__head { max-width: 760px; }
.csd__page .csd__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.csd__page .csd__dark { position: relative; overflow: hidden; background: var(--edark); }
.csd__page .csd__dark > .container { position: relative; z-index: 1; }
.csd__page .csd__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 6% -8%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(680px 380px at 96% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.csd__page .csd__dark .csd__eyebrow { color: var(--eg3); }
.csd__page .csd__dark .csd__title { color: #fff; }
.csd__page .csd__dark .csd__text { color: var(--emuted); }

.csd__page .csd__btn,
.csd__page .csd__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.csd__page .csd__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.csd__page .csd__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.csd__page .csd__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.csd__page .csd__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }
.csd__page .csd__btn-outline.csd__btn-outline--light { color: var(--eh); border-color: var(--eb); }
.csd__page .csd__btn-outline.csd__btn-outline--light:hover { background: var(--eh); border-color: var(--eh); color: #fff; }

.csd__page .csd__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--eg);
  transition: gap .3s ease, color .3s ease;
}
.csd__page .csd__link:hover { gap: 15px; color: var(--eg2); }

/* Bracketed "spec token" word treatment used in headings - reads like a
   code/config key rather than a highlighter mark. */
.csd__page .csd__mark { position: relative; display: inline-block; color: var(--eg); }
.csd__page .csd__mark::before,
.csd__page .csd__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .5;
  font-size: .6em;
  position: relative;
  top: -.55em;
}
.csd__page .csd__mark::before { content: "{"; margin-right: 1px; }
.csd__page .csd__mark::after { content: "}"; margin-left: 1px; }

/* Reusable "image incoming" placeholder - a bordered spec-paper panel with
   a faint grid, an icon and a caption, standing in for real photography
   until it's supplied. Never a plain grey box or a broken <img>. */
.csd__ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: linear-gradient(155deg, var(--ebg), #fff);
  border: 1.5px dashed var(--eb);
  border-radius: 16px;
  color: var(--et);
  overflow: hidden;
  padding: 30px;
}
.csd__ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 139, 125, .07) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(15, 139, 125, .07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.csd__ph-ico { position: relative; width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 139, 125, .1); color: var(--eg); font-size: 20px; }
.csd__ph-label { position: relative; font-family: var(--emono); font-size: 12px; letter-spacing: .5px; color: var(--et); max-width: 280px; line-height: 1.6; }
.csd__ph-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  font-family: var(--emono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg2);
  border: 1px solid rgba(224, 153, 61, .4);
  background: rgba(224, 153, 61, .1);
  padding: 4px 9px;
  border-radius: 20px;
}


/* ---------- 01. Hero: fit diagnostic ---------- */
.csd__hero { position: relative; overflow: hidden; background: var(--edark); padding: 190px 0 100px; }
.csd__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 440px at 8% -10%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(760px 420px at 96% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
/* Drafting-ruler edge - a technical cue distinct from the corner crop
   marks / dot-grid / token console used on other custom service pages. */
.csd__hero-ruler {
  position: absolute;
  top: 0; bottom: 0; left: 44px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--emuted) 0, var(--emuted) 1px, transparent 1px, transparent 42px);
  opacity: .22;
  z-index: 1;
}
.csd__hero .container { position: relative; z-index: 2; }
.csd__hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }

.csd__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .08);
  padding: 9px 16px;
  border-radius: 30px;
  margin-bottom: 26px;
}
.csd__hero-badge i { color: var(--eg2); }

.csd__hero-title { font-family: var(--edisplay); font-size: 50px; line-height: 1.18; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.csd__hero .csd__mark { color: var(--eg3); }
.csd__hero-lead { font-size: 18px; line-height: 1.75; color: #dfeeea; max-width: 560px; margin: 0 0 34px; font-weight: 300; }
.csd__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }

.csd__hero-route { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-family: var(--emono); font-size: 12px; letter-spacing: .3px; color: var(--emuted); border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px; }
.csd__hero-route-step { color: #dfeeea; }
.csd__hero-route-step.is-current { color: var(--eg3); font-weight: 600; }
.csd__hero-route-sep { color: var(--eg2); opacity: .8; }

/* -- System blueprint: a light drafting panel floating on the dark hero.
   Wires draw themselves in, then a spotlight cycles the six workflow chips
   (hover/focus a chip to take over) while signal dots travel the wires
   continuously, standing in for live traffic through a system built to fit. -- */
.csd__blueprint-panel {
  position: relative;
  overflow: hidden;
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 20px;
  padding: 26px 26px 24px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  max-width: 440px;
  margin: 0 0 0 auto;
}
.csd__bp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.csd__bp-head > span:first-child { font-family: var(--emono); font-size: 11.5px; letter-spacing: 1px; color: var(--et); text-transform: uppercase; }
.csd__bp-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--emono); font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--eg); }
.csd__bp-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eg); animation: csdBpLiveBlink 1.8s ease-in-out infinite; }
@keyframes csdBpLiveBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 139, 125, .45); }
  50% { box-shadow: 0 0 0 5px rgba(15, 139, 125, 0); }
}

.csd__bp-canvas { position: relative; margin: 4px auto 8px; max-width: 360px; }
.csd__bp-svg { width: 100%; height: auto; display: block; overflow: visible; }
.csd__bp-grid-dot { fill: var(--eb); }

.csd__bp-wire { fill: none; stroke: var(--eb); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease, stroke-width .3s ease, filter .3s ease, opacity .3s ease; }
.csd__bp-wire.is-drawing { transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1), stroke .3s ease, stroke-width .3s ease, filter .3s ease, opacity .3s ease; }
.csd__bp-wire.is-active { stroke: var(--eg); stroke-width: 2.2; filter: drop-shadow(0 0 3px rgba(15, 139, 125, .5)); }
.csd__bp-wire.is-dim { opacity: .35; }

.csd__bp-signal { fill: var(--eg3); filter: drop-shadow(0 0 3px rgba(53, 183, 163, .85)); }

.csd__bp-hub-core { fill: var(--eg); }
.csd__bp-hub-ring { fill: none; stroke: var(--eg); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: csdBpHubPing 2.4s ease-out infinite; }
@keyframes csdBpHubPing {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
.csd__bp-hub-text { font-family: var(--emono); font-size: 9px; font-weight: 600; fill: #fff; text-anchor: middle; letter-spacing: .4px; }

.csd__bp-chip { opacity: 0; transform: translateY(4px) scale(.92); transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .45s ease; cursor: pointer; }
.csd__bp-chip.is-in { opacity: 1; transform: translateY(0) scale(1); }
.csd__bp-chip.is-dim { opacity: .55; }
.csd__bp-chip rect { fill: #fff; stroke: var(--eb); stroke-width: 1.4; transition: stroke .3s ease, fill .3s ease, filter .3s ease; }
.csd__bp-chip text { font-family: var(--emono); font-size: 9.5px; fill: var(--eh); text-anchor: middle; text-transform: uppercase; letter-spacing: .3px; pointer-events: none; }
.csd__bp-chip.is-active rect { stroke: var(--eg); fill: rgba(15, 139, 125, .08); filter: drop-shadow(0 0 4px rgba(15, 139, 125, .35)); }
.csd__bp-chip:focus { outline: none; }
.csd__bp-chip:focus rect { stroke: var(--eg); stroke-width: 2; }

.csd__bp-caption { text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--et); min-height: 40px; margin: 6px 0 0; padding-top: 14px; border-top: 1px dashed var(--eb); transition: opacity .18s ease; }
.csd__bp-caption.is-swapping { opacity: 0; }
.csd__bp-caption strong { color: var(--eh); }
.csd__bp-note { text-align: center; font-family: var(--emono); font-size: 10.5px; letter-spacing: .5px; color: var(--et); opacity: .7; margin: 10px 0 0; }


/* ---------- 02. Friction ledger ---------- */
.csd__ledger { padding: 120px 0; background: #fff; }
.csd__ledger-list { border-top: 1px solid var(--eb); }
.csd__ledger-row { display: grid; grid-template-columns: 46px minmax(180px, 250px) 1fr; gap: 26px; padding: 30px 0; border-bottom: 1px solid var(--eb); align-items: start; }
.csd__ledger-num { font-family: var(--emono); font-size: 13px; font-weight: 600; color: var(--eg2); padding-top: 3px; }
.csd__ledger-title { font-family: var(--edisplay); font-size: 19px; font-weight: 700; color: var(--eh); margin: 0; padding-top: 2px; }
.csd__ledger-compare { display: flex; flex-direction: column; gap: 12px; }
.csd__ledger-compare p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--et); display: flex; gap: 11px; }
.csd__ledger-compare p i { flex: 0 0 auto; margin-top: 5px; font-size: 11px; }
.csd__ledger-before i { color: var(--eg2); }
.csd__ledger-after { color: var(--eh); }
.csd__ledger-after i { color: var(--eg); }


/* ---------- 03. Requirement-to-system spine ---------- */
.csd__path { padding: 120px 0; background: var(--ebg); }
.csd__path-spine { position: relative; max-width: 860px; margin: 0 auto; }
.csd__path-spine::before { content: ""; position: absolute; left: 35px; top: 8px; bottom: 8px; width: 1px; background: var(--eb); }
.csd__path-stage { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 28px; padding-bottom: 48px; }
.csd__path-stage:last-child { padding-bottom: 0; }
.csd__path-rings { position: relative; width: 72px; height: 72px; z-index: 1; }
.csd__path-rings span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed var(--eb); background: var(--ebg); opacity: .55; }
.csd__path-rings span:nth-child(1) { width: 16px; height: 16px; }
.csd__path-rings span:nth-child(2) { width: 32px; height: 32px; background: none; }
.csd__path-rings span:nth-child(3) { width: 48px; height: 48px; background: none; }
.csd__path-rings span:nth-child(4) { width: 64px; height: 64px; background: none; }
.csd__path-rings span:nth-child(5) { width: 80px; height: 80px; background: none; }
.csd__path-stage[data-stage="1"] .csd__path-rings span:nth-child(-n+1),
.csd__path-stage[data-stage="2"] .csd__path-rings span:nth-child(-n+2),
.csd__path-stage[data-stage="3"] .csd__path-rings span:nth-child(-n+3),
.csd__path-stage[data-stage="4"] .csd__path-rings span:nth-child(-n+4),
.csd__path-stage[data-stage="5"] .csd__path-rings span:nth-child(-n+5) {
  border-style: solid; border-color: var(--eg); opacity: 1;
}
.csd__path-card { background: #fff; border: 1px solid var(--eb); border-radius: 14px; padding: 26px 28px; }
.csd__path-tag { font-family: var(--emono); font-size: 11.5px; letter-spacing: 1.5px; color: var(--eg2); text-transform: uppercase; display: block; margin-bottom: 8px; }
.csd__path-card h3 { font-family: var(--edisplay); font-size: 20px; font-weight: 700; color: var(--eh); margin: 0 0 10px; }
.csd__path-card p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--et); }


/* ---------- 04. Capability workbench ---------- */
.csd__bench { padding: 120px 0; background: #fff; }
.csd__bench-panel { display: grid; grid-template-columns: 300px 1fr; border: 1px solid var(--eb); border-radius: 18px; overflow: hidden; }
.csd__bench-rail { display: flex; flex-direction: column; background: var(--ebg); border-right: 1px solid var(--eb); }
.csd__bench-tab { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 22px 22px; border: none; border-bottom: 1px solid var(--eb); background: none; cursor: pointer; transition: background .25s ease; }
.csd__bench-tab:last-child { border-bottom: none; }
.csd__bench-tab:hover { background: rgba(15, 139, 125, .06); }
.csd__bench-tab-num { font-family: var(--emono); font-size: 12px; color: var(--et); flex: 0 0 auto; padding-top: 1px; }
.csd__bench-tab-label { font-family: var(--edisplay); font-size: 14.5px; font-weight: 600; color: var(--eh); line-height: 1.4; }
.csd__bench-tab.is-active { background: #fff; box-shadow: inset 3px 0 0 var(--eg); }
.csd__bench-tab.is-active .csd__bench-tab-num { color: var(--eg); }
.csd__bench-stage { padding: 44px 44px; background: #fff; }
.csd__bench-pane { display: none; }
.csd__bench-pane.is-active { display: block; animation: csdKfFade .35s ease; }
.csd__bench-pane h3 { font-family: var(--edisplay); font-size: 24px; font-weight: 700; color: var(--eh); margin: 0 0 14px; }
.csd__bench-pane p { font-size: 15.5px; line-height: 1.8; color: var(--et); margin: 0 0 24px; }
.csd__bench-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 22px; }
.csd__bench-list li { font-size: 14.5px; color: var(--eh); display: flex; gap: 10px; align-items: flex-start; }
.csd__bench-list li i { color: var(--eg); margin-top: 4px; font-size: 11px; flex: 0 0 auto; }
.csd__bench-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.csd__bench-tags span { font-family: var(--emono); font-size: 12px; color: var(--eh); background: var(--ebg); border: 1px solid var(--eb); border-radius: 7px; padding: 6px 11px; }
@keyframes csdKfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }


/* ---------- 05. Manifesto band ---------- */
.csd__manifesto { position: relative; background: var(--edark); overflow: hidden; }
.csd__manifesto-media { position: absolute; inset: 0; background: linear-gradient(160deg, var(--edark2), var(--edark)); }
.csd__manifesto-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(53, 183, 163, .08) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(53, 183, 163, .08) 1px, transparent 1px);
  background-size: 30px 30px;
}
.csd__manifesto-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 400px at 50% 30%, rgba(15, 139, 125, .28), transparent 65%);
}
.csd__manifesto-tag {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 2;
  font-family: var(--emono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg2);
  border: 1px solid rgba(224, 153, 61, .4);
  background: rgba(224, 153, 61, .1);
  padding: 4px 10px;
  border-radius: 20px;
}
.csd__manifesto-inner { position: relative; z-index: 1; padding: 150px 24px; text-align: center; max-width: 820px; margin: 0 auto; }
.csd__manifesto-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--emono); font-size: 12.5px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--eg3); margin-bottom: 26px; }
.csd__manifesto-quote { font-family: var(--edisplay); font-size: 32px; line-height: 1.42; font-weight: 600; color: #fff; margin: 0 0 22px; }
.csd__manifesto-attr { font-family: var(--emono); font-size: 12.5px; letter-spacing: 1px; color: var(--eg3); text-transform: uppercase; }


/* ---------- 06. Value ledger (dark) ---------- */
.csd__value { padding: 120px 0; }
.csd__value-list { max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .12); }
.csd__value-row { display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); align-items: start; }
.csd__value-idx { font-family: var(--emono); font-size: 26px; font-weight: 600; color: var(--eg3); opacity: .85; }
.csd__value-row h3 { font-family: var(--edisplay); font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.csd__value-row p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--emuted); }


/* ---------- 07. Integration hub diagram ---------- */
.csd__hub { padding: 120px 0; background: #fff; }
.csd__hub-wrap { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; }
.csd__hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.csd__hub-lines line { stroke: var(--eb); stroke-width: 1.5; stroke-dasharray: 4 5; }
.csd__hub-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34%; height: 34%; border-radius: 50%;
  background: linear-gradient(155deg, var(--eg), var(--eg3));
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-family: var(--edisplay); font-weight: 700; font-size: 14.5px; line-height: 1.3;
  padding: 10%;
  box-shadow: 0 24px 54px -18px rgba(15, 139, 125, .55);
  z-index: 2;
}
.csd__hub-chip {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--ebg); border: 1px solid var(--eb); border-radius: 30px;
  padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--eh);
  white-space: nowrap; z-index: 2;
}
.csd__hub-fallback { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 640px; margin: 0 auto; }
.csd__hub-fallback span { font-size: 13.5px; font-weight: 600; color: var(--eh); background: var(--ebg); border: 1px solid var(--eb); border-radius: 30px; padding: 9px 15px; }
.csd__hub-fallback-center { width: 100%; text-align: center; font-family: var(--edisplay); font-weight: 700; color: var(--eg); margin-bottom: 4px; }


/* ---------- 08. FAQ ---------- */
.csd__faq { padding: 40px 0 130px; background: #fff; }
.csd__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.csd__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.csd__faq-q { width: 100%; text-align: left; display: flex; align-items: center; gap: 18px; padding: 22px 26px; background: none; border: none; cursor: pointer; }
.csd__faq-q-num { flex: 0 0 auto; font-family: var(--emono); font-size: 13px; color: var(--eg); }
.csd__faq-q-text { flex: 1; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); }
.csd__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.csd__faq-item.is-open .csd__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.csd__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.csd__faq-item.is-open .csd__faq-a { max-height: 260px; }
.csd__faq-a p { margin: 0; padding: 0 26px 22px 62px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .csd__hero-title { font-size: 42px; }
  .csd__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .csd__blueprint-panel { max-width: 460px; margin: 0 auto; }
  .csd__hero-ruler { display: none; }
  .csd__ledger-row { grid-template-columns: 40px 1fr; }
  .csd__ledger-title { grid-column: 2; }
  .csd__ledger-compare { grid-column: 1 / -1; }
  .csd__bench-panel { grid-template-columns: 1fr; }
  .csd__bench-rail { flex-direction: row; overflow-x: auto; }
  .csd__bench-tab { border-bottom: none; border-right: 1px solid var(--eb); flex: 0 0 auto; min-width: 220px; }
  .csd__bench-tab.is-active { box-shadow: inset 0 -3px 0 var(--eg); }
  .csd__value-list { max-width: 100%; }
}

@media (max-width: 991px) {
  .csd__hero { padding: 160px 0 90px; }
  .csd__hero-title { font-size: 36px; }
  .csd__ledger, .csd__path, .csd__bench, .csd__value, .csd__hub { padding: 90px 0; }
  .csd__faq { padding: 20px 0 90px; }
  .csd__manifesto-inner { padding: 110px 24px; }
  .csd__manifesto-quote { font-size: 26px; }
  .csd__bench-stage { padding: 34px 28px; }
  .csd__bench-list { grid-template-columns: 1fr; }
  .csd__hub-wrap { display: none; }
  .csd__hub-fallback { display: flex; }
}

@media (max-width: 767px) {
  .csd__hero-title { font-size: 30px; }
  .csd__ledger-row { grid-template-columns: 1fr; gap: 10px; }
  .csd__ledger-num { display: none; }
  .csd__path-spine::before { left: 27px; }
  .csd__path-stage { grid-template-columns: 56px 1fr; gap: 20px; }
  .csd__path-rings { width: 56px; height: 56px; }
  .csd__path-rings span:nth-child(1) { width: 12px; height: 12px; }
  .csd__path-rings span:nth-child(2) { width: 24px; height: 24px; }
  .csd__path-rings span:nth-child(3) { width: 36px; height: 36px; }
  .csd__path-rings span:nth-child(4) { width: 48px; height: 48px; }
  .csd__path-rings span:nth-child(5) { width: 56px; height: 56px; }
  .csd__value-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 575px) {
  .csd__bp-live { display: none; }
  .csd__manifesto-quote { font-size: 21px; }
}

/* Users who ask for less motion get the page without the reveal animation. */
@media (prefers-reduced-motion: reduce) {
  .csd__bench-pane.is-active { animation: none; }
  .csd__page * { transition-duration: .01ms !important; }
  .csd__bp-live-dot,
  .csd__bp-hub-ring { animation: none !important; opacity: 0; }
  .csd__bp-signal { display: none; }
}


/* ============================================================
   ENTERPRISE APPLICATION DEVELOPMENT PAGE (eae__*)
   Scoped entirely to .eae__page (added on <main> of
   enterprise-application-developmentt.html, a child of Software
   Engineering, sibling of Custom Software Development). Reuses the
   exact brand palette from .swe__page / .csd__page - #0F8B7D teal /
   #E0993D copper on #0B1613 dark, Sora display over Kanit body, IBM
   Plex Mono for spec labels - so all three pages read as the same
   service family. Every component is otherwise unique to this page:
   a hero built as a mock "enterprise platform console" with a
   clickable department/role switcher (RBAC made tangible, not a
   diagram), a complexity-profile meter panel, a horizontal-scroll
   capability rail of work-item cards, a dark governance pill strip,
   a vertical alternating delivery timeline, a dashboard-style
   snapshot placeholder with a manifesto quote, a two-column
   ghost-numeral value list and a grouped platform tag cloud. No
   blueprint node inspector, layer-stack drawers or CI pipeline track
   from .swe__page, and no fit-diagnostic SVG, friction ledger,
   concentric-ring spine, tabbed workbench or hub-and-spoke diagram
   from .csd__page are reused. Nothing in this block leaks to other
   pages.
   ============================================================ */
.eae__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.eae__page .eae__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.eae__page .eae__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.eae__page .eae__title {
  font-family: var(--edisplay);
  font-size: 40px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.eae__page .eae__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.eae__page .eae__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.eae__page .eae__text:last-child { margin-bottom: 0; }
.eae__page .eae__head { max-width: 760px; }
.eae__page .eae__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.eae__page .eae__dark { position: relative; overflow: hidden; background: var(--edark); }
.eae__page .eae__dark > .container { position: relative; z-index: 1; }
.eae__page .eae__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 6% -8%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(680px 380px at 96% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.eae__page .eae__dark .eae__eyebrow { color: var(--eg3); }
.eae__page .eae__dark .eae__title { color: #fff; }
.eae__page .eae__dark .eae__text { color: var(--emuted); }

.eae__page .eae__btn,
.eae__page .eae__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.eae__page .eae__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.eae__page .eae__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.eae__page .eae__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.eae__page .eae__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.eae__page .eae__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--eg);
  transition: gap .3s ease, color .3s ease;
}
.eae__page .eae__link:hover { gap: 15px; color: var(--eg2); }

/* Bracketed "spec token" word treatment, matching the sibling pages'
   code/config-key styling for emphasised words in headings. */
.eae__page .eae__mark { position: relative; display: inline-block; color: var(--eg3); }
.eae__page .eae__mark::before,
.eae__page .eae__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .5;
  font-size: .6em;
  position: relative;
  top: -.55em;
}
.eae__page .eae__mark::before { content: "<"; margin-right: 1px; }
.eae__page .eae__mark::after { content: ">"; margin-left: 1px; }


/* ---------- 01. Hero: enterprise platform console ---------- */
.eae__hero { position: relative; overflow: hidden; background: var(--edark); padding: 190px 0 100px; }
.eae__hero-grain {
  position: absolute;
  inset: 0;
  background: radial-gradient(840px 460px at 92% -12%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(700px 400px at 2% 110%, rgba(224, 153, 61, .14), transparent 62%);
}
.eae__hero .container { position: relative; z-index: 2; }
.eae__hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 60px; align-items: center; }

.eae__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .08);
  padding: 9px 16px;
  border-radius: 30px;
  margin-bottom: 26px;
}
.eae__hero-badge i { color: var(--eg2); }

.eae__hero-title { font-family: var(--edisplay); font-size: 50px; line-height: 1.18; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.eae__hero-lead { font-size: 18px; line-height: 1.75; color: #dfeeea; max-width: 560px; margin: 0 0 34px; font-weight: 300; }
.eae__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }

.eae__hero-stats { display: flex; flex-wrap: wrap; gap: 30px 40px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 28px; }
.eae__hero-stat { display: flex; flex-direction: column; gap: 5px; }
.eae__hero-stat b { font-family: var(--edisplay); font-size: 15px; font-weight: 700; color: #fff; }
.eae__hero-stat span { font-size: 13px; color: var(--emuted); max-width: 190px; line-height: 1.5; }

/* -- Console mock: chrome bar + department rail + role readout -- */
.eae__console {
  position: relative;
  background: var(--edark2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  box-shadow: 0 44px 100px -30px rgba(0, 0, 0, .65);
  overflow: hidden;
}
.eae__console-top { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); }
.eae__console-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.eae__console-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-block; }
.eae__console-title { font-family: var(--edisplay); font-size: 13.5px; font-weight: 600; color: #fff; flex: 1; }
.eae__console-env { display: inline-flex; align-items: center; gap: 8px; font-family: var(--emono); font-size: 10.5px; letter-spacing: .5px; color: var(--emuted); }
.eae__console-live { width: 7px; height: 7px; border-radius: 50%; background: var(--eg3); display: inline-block; box-shadow: 0 0 0 rgba(53, 183, 163, .6); animation: eaeKfPulse 2.2s infinite; }
@keyframes eaeKfPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 183, 163, .55); }
  70% { box-shadow: 0 0 0 8px rgba(53, 183, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 183, 163, 0); }
}

.eae__console-body { display: grid; grid-template-columns: 140px 1fr; min-height: 320px; }
.eae__console-rail { display: flex; flex-direction: column; padding: 14px 10px; gap: 3px; background: rgba(255, 255, 255, .015); border-right: 1px solid rgba(255, 255, 255, .08); }
.eae__console-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  color: var(--emuted);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  padding: 11px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.eae__console-tab i { width: 14px; text-align: center; font-size: 12px; color: var(--emuted); transition: color .25s ease; }
.eae__console-tab:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.eae__console-tab.is-active { background: rgba(53, 183, 163, .14); color: #fff; }
.eae__console-tab.is-active i { color: var(--eg3); }

.eae__console-panel { padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.eae__console-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 16px; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.eae__console-role { font-family: var(--edisplay); font-size: 19px; font-weight: 700; color: #fff; }
.eae__console-access { font-family: var(--emono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--eg2); border: 1px solid rgba(224, 153, 61, .4); background: rgba(224, 153, 61, .1); padding: 5px 10px; border-radius: 20px; }
.eae__console-desc { margin: 0; font-size: 14.5px; line-height: 1.75; color: #cfe4de; }
.eae__console-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.eae__console-tags span { font-family: var(--emono); font-size: 11.5px; color: var(--emuted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; padding: 6px 10px; }

.eae__console-note { text-align: center; font-family: var(--emono); font-size: 10.5px; letter-spacing: .5px; color: var(--emuted); opacity: .65; padding: 12px 0 16px; }


/* ---------- 02. Introduction: copy + complexity meter panel ---------- */
.eae__intro { padding: 120px 0; background: #fff; }
.eae__intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: start; }
.eae__intro-note { margin-top: 28px; padding: 18px 22px; background: var(--ebg); border-left: 3px solid var(--eg); border-radius: 4px; font-size: 14.5px; line-height: 1.7; color: var(--et); }
.eae__intro-note a { color: var(--eg); font-weight: 600; }

.eae__meter { background: var(--ebg); border: 1px solid var(--eb); border-radius: 18px; padding: 30px 30px 26px; }
.eae__meter-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--emono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--et); margin-bottom: 24px; }
.eae__meter-head i { color: var(--eg); }
.eae__meter-row { display: grid; grid-template-columns: 148px 1fr; row-gap: 6px; column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--eb); }
.eae__meter-row:first-of-type { border-top: none; }
.eae__meter-label { font-size: 13.5px; font-weight: 600; color: var(--eh); align-self: center; }
.eae__meter-bar { position: relative; height: 8px; border-radius: 6px; background: #fff; border: 1px solid var(--eb); overflow: hidden; align-self: center; }
.eae__meter-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, var(--eg), var(--eg3)); }
.eae__meter-val { grid-column: 2; font-size: 12.5px; color: var(--et); }
.eae__meter-note { text-align: right; font-family: var(--emono); font-size: 10.5px; letter-spacing: .5px; color: var(--et); opacity: .75; margin: 18px 0 0; }


/* ---------- 03. Capability orbit: hub-and-spoke diagram ---------- */
.eae__orbit { padding: 120px 0; background: var(--ebg); }
.eae__orbit-stage {
  position: relative;
  width: min(760px, 94vw);
  aspect-ratio: 1 / 1;
  margin: 70px auto 0;
}
.eae__orbit-ring { position: absolute; border: 1px dashed var(--eb); border-radius: 50%; pointer-events: none; }
.eae__orbit-ring--outer { inset: 3%; }
.eae__orbit-ring--inner { inset: 15%; }
.eae__orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eae__orbit-spoke { stroke: var(--eb); stroke-width: .5; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; transition: stroke .3s ease, stroke-width .3s ease; }
.eae__orbit-spoke.is-active { stroke: var(--eg); stroke-width: .9; stroke-dasharray: none; }

.eae__orbit-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 30%;
  background: #fff;
  border: 1px solid var(--eb);
  box-shadow: 0 30px 60px -30px rgba(11, 22, 19, .25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8%;
  z-index: 1;
}
.eae__orbit-hub-code { font-family: var(--emono); font-size: 11px; letter-spacing: 1.5px; color: var(--eg2); margin-bottom: 10px; }
.eae__orbit-hub-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 139, 125, .1); color: var(--eg); font-size: 17px; margin-bottom: 14px; }
.eae__orbit-hub h3 { font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: var(--eh); margin: 0 0 8px; line-height: 1.3; }
.eae__orbit-hub p { font-size: 12.5px; line-height: 1.6; color: var(--et); margin: 0 0 12px; }
.eae__orbit-hub-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.eae__orbit-hub-tags span { font-family: var(--emono); font-size: 9.5px; color: var(--eh); background: var(--ebg); border: 1px solid var(--eb); border-radius: 6px; padding: 4px 7px; }

.eae__orbit-nodes { position: absolute; inset: 0; }
.eae__orbit-node {
  position: absolute;
  top: var(--ny);
  left: var(--nx);
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--eb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--eh);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  z-index: 2;
}
.eae__orbit-node-num { font-family: var(--emono); font-size: 9px; letter-spacing: .5px; opacity: .7; }
.eae__orbit-node i { font-size: 16px; }
.eae__orbit-node:hover { transform: translate(-50%, -50%) translateY(-3px); box-shadow: 0 16px 28px -14px rgba(11, 22, 19, .3); }
.eae__orbit-node.is-active { background: var(--eg); border-color: var(--eg); color: #fff; box-shadow: 0 16px 32px -14px rgba(15, 139, 125, .5); }


/* ---------- 04. Governance band (dark): pill strip ---------- */
.eae__gov { padding: 110px 0; }
.eae__gov-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.eae__gov-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.eae__gov-pills span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  padding: 11px 18px;
}
.eae__gov-pills span i { color: var(--eg3); font-size: 12px; }


/* ---------- 05. Delivery timeline: vertical alternating stages ---------- */
.eae__pipeline { padding: 120px 0; background: #fff; }
.eae__pl-rail { max-width: 900px; margin: 64px auto 0; overflow-x: auto; padding-bottom: 4px; }
.eae__pl-track { position: relative; display: flex; min-width: 560px; padding-top: 20px; }
.eae__pl-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.eae__pl-stage:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -50%;
  top: 20px;
  width: 100%;
  height: 2px;
  background: var(--eb);
  z-index: -1;
  transition: background .4s ease;
}
.eae__pl-stage.is-passed:not(:first-child)::before { background: linear-gradient(90deg, var(--eg), var(--eg3)); }
.eae__pl-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--eb);
  color: var(--et);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.eae__pl-id { font-family: var(--emono); font-size: 10px; letter-spacing: 1px; color: var(--eg2); }
.eae__pl-name { font-family: var(--edisplay); font-size: 13px; font-weight: 600; color: var(--eh); }
.eae__pl-stage:hover .eae__pl-dot { border-color: var(--eg); color: var(--eg); }
.eae__pl-stage.is-active .eae__pl-dot { background: var(--eg); border-color: var(--eg); color: #fff; box-shadow: 0 10px 22px -10px rgba(15, 139, 125, .55); }

.eae__pl-panel {
  position: relative;
  max-width: 720px;
  margin: 44px auto 0;
  border: 1px solid var(--eb);
  border-radius: 16px;
  padding: 32px 38px 32px 42px;
  overflow: hidden;
}
.eae__pl-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--eg), var(--eg3)); }
.eae__pl-panel-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.eae__pl-panel-tag { font-family: var(--emono); font-size: 11px; letter-spacing: 1.5px; color: var(--eg2); text-transform: uppercase; }
.eae__pl-panel-count { font-family: var(--emono); font-size: 11px; color: var(--et); }
.eae__pl-panel h3 { font-family: var(--edisplay); font-size: 21px; font-weight: 700; color: var(--eh); margin: 0 0 10px; }
.eae__pl-panel p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--et); }


/* ---------- 06. Ops snapshot band: dashboard placeholder + quote ---------- */
.eae__snapshot { padding: 120px 0; background: var(--ebg); }
.eae__snap-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: center; }

.eae__snap-media {
  position: relative;
  background: linear-gradient(160deg, var(--edark2), var(--edark));
  border-radius: 18px;
  overflow: hidden;
  padding: 22px 24px 30px;
  box-shadow: 0 34px 70px -28px rgba(11, 22, 19, .45);
}
.eae__snap-tag {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  font-family: var(--emono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg2);
  border: 1px solid rgba(224, 153, 61, .4);
  background: rgba(224, 153, 61, .12);
  padding: 4px 10px;
  border-radius: 20px;
}
.eae__snap-chrome { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.eae__snap-chrome span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-block; }
.eae__snap-chrome em { font-style: normal; font-family: var(--emono); font-size: 10.5px; color: var(--emuted); margin-left: 8px; }
.eae__snap-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 0 4px; }
.eae__snap-bars i { flex: 1; height: var(--h, 40%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--eg3), var(--eg)); opacity: .85; }

.eae__snap-quote { font-family: var(--edisplay); font-size: 26px; line-height: 1.44; font-weight: 600; color: var(--eh); margin: 0 0 16px; }
.eae__snap-attr { display: block; font-family: var(--emono); font-size: 12px; letter-spacing: 1px; color: var(--eg); text-transform: uppercase; margin-bottom: 32px; }
.eae__snap-stats { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--eb); padding-top: 24px; }
.eae__snap-stats div { display: flex; flex-direction: column; gap: 3px; }
.eae__snap-stats b { font-family: var(--edisplay); font-size: 14.5px; font-weight: 700; color: var(--eh); }
.eae__snap-stats span { font-size: 13px; color: var(--et); }


/* ---------- 07. Why 3Shadz value section (dark): 2-col ghost numerals ---------- */
.eae__value { padding: 120px 0; }
.eae__value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 60px; }
.eae__value-item { position: relative; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.eae__value-ghost { display: block; font-family: var(--edisplay); font-size: 44px; font-weight: 700; color: rgba(255, 255, 255, .1); line-height: 1; margin-bottom: 6px; }
.eae__value-item h3 { font-family: var(--edisplay); font-size: 18.5px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.eae__value-item p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--emuted); }


/* ---------- 08. Stack: grouped platform tag cloud ---------- */
.eae__stack { padding: 40px 0 120px; background: #fff; }
.eae__stack-row { max-width: 980px; margin: 0 auto 26px; }
.eae__stack-row:last-child { margin-bottom: 0; }
.eae__stack-row-label { display: block; font-family: var(--emono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--et); margin-bottom: 14px; }
.eae__stack-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.eae__stack-tags span { font-size: 13.5px; font-weight: 600; color: var(--eh); background: var(--ebg); border: 1px solid var(--eb); border-radius: 30px; padding: 9px 16px; }


/* ---------- 09. FAQ ---------- */
.eae__faq { padding: 40px 0 130px; background: #fff; }
.eae__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.eae__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.eae__faq-q { width: 100%; text-align: left; display: flex; align-items: center; gap: 18px; padding: 22px 26px; background: none; border: none; cursor: pointer; }
.eae__faq-q-num { flex: 0 0 auto; font-family: var(--emono); font-size: 13px; color: var(--eg); }
.eae__faq-q-text { flex: 1; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); }
.eae__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.eae__faq-item.is-open .eae__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.eae__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.eae__faq-item.is-open .eae__faq-a { max-height: 260px; }
.eae__faq-a p { margin: 0; padding: 0 26px 22px 62px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .eae__hero-title { font-size: 42px; }
  .eae__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .eae__console { max-width: 560px; margin: 0 auto; }
  .eae__intro-grid { grid-template-columns: 1fr; }
  .eae__gov-grid { grid-template-columns: 1fr; }
  .eae__snap-grid { grid-template-columns: 1fr; }
  .eae__snap-media { order: -1; }
}

@media (max-width: 991px) {
  .eae__hero { padding: 160px 0 90px; }
  .eae__hero-title { font-size: 36px; }
  .eae__intro, .eae__orbit, .eae__gov, .eae__pipeline, .eae__snapshot, .eae__value { padding: 90px 0; }
  .eae__faq { padding: 20px 0 90px; }
  .eae__console-body { grid-template-columns: 110px 1fr; }
  .eae__value-grid { grid-template-columns: 1fr; gap: 0; }
  .eae__pl-panel { padding: 28px 26px 28px 30px; }
}

@media (max-width: 767px) {
  .eae__hero-title { font-size: 30px; }
  .eae__console-body { grid-template-columns: 1fr; }
  .eae__console-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .eae__console-tab { flex: 0 0 auto; }
  .eae__meter-row { grid-template-columns: 1fr; row-gap: 8px; }
  .eae__meter-val { grid-column: 1; }
  .eae__orbit-stage { width: 100%; aspect-ratio: auto; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .eae__orbit-ring, .eae__orbit-svg { display: none; }
  .eae__orbit-hub { position: static; transform: none; width: 100%; aspect-ratio: auto; border-radius: 20px; padding: 26px 22px; order: 2; }
  .eae__orbit-nodes { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; order: 1; }
  .eae__orbit-node { position: static; top: auto; left: auto; transform: none; width: 58px; height: 58px; }
  .eae__orbit-node:hover { transform: translateY(-3px); }
  .eae__pl-dot { width: 34px; height: 34px; font-size: 13px; }
  .eae__pl-name { display: none; }
  .eae__pl-stage:not(:first-child)::before { top: 17px; }
  .eae__pl-panel-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 575px) {
  .eae__value-ghost { font-size: 34px; }
  .eae__snap-quote { font-size: 21px; }
}

/* Users who ask for less motion get the page without the pulsing live-dot. */
@media (prefers-reduced-motion: reduce) {
  .eae__console-live { animation: none; }
  .eae__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   WEB APPLICATION DEVELOPMENT PAGE (wad__*)
   Scoped entirely to .wad__page (added on <main> of
   web-application-development.html, a child of Software
   Engineering, sibling of Custom Software Development and
   Enterprise Application Development). Reuses the exact brand
   palette from .swe__page / .csd__page / .eae__page - #0F8B7D
   teal / #E0993D copper on #0B1613 dark, Sora display over Kanit
   body, IBM Plex Mono for spec labels - so all four pages read as
   the same service family. Every component is otherwise unique to
   this page: a hero built as a live browser-chrome mockup with a
   clickable desktop/tablet/mobile viewport switcher and a Core Web
   Vitals readout, a performance-budget dashboard widget, six
   alternating "zigzag" capability rows each with its own small
   CSS-drawn diagram, a dark proof band with a decorative network-
   waterfall motif, a horizontal browser-tab process switcher, a
   Lighthouse-style audit gauge grid, and spec-sheet technology
   rows in place of boxed tag cards. No blueprint node inspector,
   layer-stack drawers or CI pipeline track from .swe__page, no
   fit-diagnostic SVG, friction ledger, concentric-ring spine,
   left-rail workbench or hub-and-spoke diagram from .csd__page,
   and no platform console, complexity meter, capability rail or
   governance pill strip from .eae__page are reused. Nothing in
   this block leaks to other pages.
   ============================================================ */
.wad__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.wad__page .wad__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.wad__page .wad__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.wad__page .wad__title {
  font-family: var(--edisplay);
  font-size: 42px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.wad__page .wad__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.wad__page .wad__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.wad__page .wad__text:last-child { margin-bottom: 0; }
.wad__page .wad__head { max-width: 780px; }
.wad__page .wad__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.wad__page .wad__dark { position: relative; overflow: hidden; background: var(--edark); }
.wad__page .wad__dark > .container { position: relative; z-index: 1; }
.wad__page .wad__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 92% -8%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(680px 380px at 4% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.wad__page .wad__dark .wad__eyebrow { color: var(--eg3); }
.wad__page .wad__dark .wad__title { color: #fff; }
.wad__page .wad__dark .wad__text { color: var(--emuted); }

.wad__page .wad__btn,
.wad__page .wad__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.wad__page .wad__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.wad__page .wad__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.wad__page .wad__btn-outline { color: var(--eh); border: 2px solid var(--eb); background: transparent; }
.wad__page .wad__btn-outline:hover { background: var(--eh); border-color: var(--eh); color: #fff; }

.wad__page .wad__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--eg);
  transition: gap .3s ease, color .3s ease;
}
.wad__page .wad__link:hover { gap: 15px; color: var(--eg2); }

/* Bracketed "spec" word treatment - shared brand device with the rest of the
   Software Engineering family, reused here deliberately for continuity. */
.wad__page .wad__mark { position: relative; display: inline-block; color: var(--eg); }
.wad__page .wad__mark::before,
.wad__page .wad__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .55;
  font-size: .68em;
  position: relative;
  top: -.12em;
}
.wad__page .wad__mark::before { content: "["; margin-right: 2px; }
.wad__page .wad__mark::after { content: "]"; margin-left: 2px; }


/* ---------- 01. Hero: live browser-chrome viewport switcher ---------- */
.wad__hero { position: relative; overflow: hidden; background: var(--edark); padding: 190px 0 110px; }
.wad__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(880px 460px at 92% -10%, rgba(15, 139, 125, .32), transparent 60%),
              radial-gradient(700px 400px at 0% 106%, rgba(224, 153, 61, .18), transparent 62%);
}
.wad__hero .container { position: relative; z-index: 2; }
.wad__hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 60px; align-items: center; }

.wad__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .08);
  padding: 9px 16px;
  border-radius: 30px;
  margin-bottom: 26px;
}
.wad__hero-badge i { color: var(--eg2); }

.wad__hero-title { font-family: var(--edisplay); font-size: 50px; line-height: 1.18; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.wad__hero-lead { font-size: 18px; line-height: 1.75; color: #dfeeea; max-width: 560px; margin: 0 0 34px; font-weight: 300; }
.wad__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }
.wad__hero .wad__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.wad__hero .wad__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.wad__hero-facts { display: flex; flex-wrap: wrap; gap: 34px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 26px; }
.wad__hero-fact { max-width: 210px; }
.wad__hero-fact b { display: block; font-family: var(--edisplay); font-size: 18px; font-weight: 700; letter-spacing: .3px; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.wad__hero-fact span { font-size: 13px; line-height: 1.5; color: var(--emuted); }

/* -- Browser chrome mockup: a live, clickable device-viewport switcher -- */
.wad__browser {
  position: relative;
  overflow: hidden;
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 18px;
  padding: 16px 16px 20px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}
.wad__browser-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--eg), var(--eg2));
  border-radius: 0 3px 3px 0;
}
.wad__browser-progress.is-running { animation: wadProgressFill 2s linear; }
.wad__browser.is-paused .wad__browser-progress { animation-play-state: paused; }
@keyframes wadProgressFill { from { width: 0%; } to { width: 100%; } }
.wad__browser-bar { display: flex; align-items: center; gap: 14px; padding: 4px 6px 16px; flex-wrap: wrap; }
.wad__browser-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--eb); }
.wad__browser-dot:nth-child(1) { background: #E0993D; opacity: .7; }
.wad__browser-dot:nth-child(2) { background: #35B7A3; opacity: .7; }
.wad__browser-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--emono);
  font-size: 12px;
  color: var(--et);
  background: #fff;
  border: 1px solid var(--eb);
  border-radius: 20px;
  padding: 6px 14px;
  margin-left: 4px;
}
.wad__browser-url i { color: var(--eg); font-size: 10px; }
.wad__browser-devices { display: inline-flex; gap: 4px; margin-left: auto; background: #fff; border: 1px solid var(--eb); border-radius: 20px; padding: 4px; }
.wad__device-btn { width: 30px; height: 26px; border: none; background: none; border-radius: 16px; color: var(--et); font-size: 12.5px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.wad__device-btn.is-active { background: var(--eg); color: #fff; }
.wad__browser:not(.is-paused) .wad__device-btn.is-active { animation: wadDevicePulse 2s ease-out infinite; }
@keyframes wadDevicePulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 139, 125, .5); }
  60% { box-shadow: 0 0 0 7px rgba(15, 139, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 139, 125, 0); }
}

.wad__viewport-wrap { display: flex; justify-content: center; padding: 6px 0 18px; }
.wad__viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 1.5px dashed rgba(15, 139, 125, .4);
  border-radius: 12px;
  padding: 30px 16px 18px;
  background: #fff;
  transition: max-width .45s cubic-bezier(.65, 0, .35, 1);
}
.wad__browser.is-tablet .wad__viewport { max-width: 78%; }
.wad__browser.is-mobile .wad__viewport { max-width: 46%; }
.wad__viewport-label {
  position: absolute;
  top: -11px;
  left: 16px;
  background: #fff;
  padding: 0 8px;
  font-family: var(--emono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--et);
  white-space: nowrap;
}
.wad__mockgrid { display: grid; grid-template-columns: 1fr; gap: 8px; transition: opacity .3s ease, transform .3s ease; }
.wad__viewport.is-swapping .wad__mockgrid { opacity: .32; transform: scale(.96); }
.wad__mockbar { height: 14px; border-radius: 4px; background: var(--edark); width: 40%; }
.wad__mockhero {
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(15, 139, 125, .22), rgba(224, 153, 61, .18));
  background-size: 220% 100%;
  animation: wadHeroSheen 5s ease-in-out infinite;
}
@keyframes wadHeroSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.wad__mockgrid { grid-template-areas: "bar" "hero" "c1" "c2" "c3"; }
.wad__mockgrid .wad__mockbar { grid-area: bar; }
.wad__mockgrid .wad__mockhero { grid-area: hero; }
.wad__mockgrid .wad__mockcard { height: 34px; border-radius: 6px; background: var(--ebg); border: 1px solid var(--eb); }
.wad__browser.is-desktop .wad__mockgrid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "bar bar bar" "hero hero hero" "c1 c2 c3"; }
.wad__browser.is-tablet .wad__mockgrid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "bar bar" "hero hero" "c1 c2" "c3 c3"; }
.wad__browser.is-mobile .wad__mockgrid { grid-template-columns: 1fr; grid-template-areas: "bar" "hero" "c1" "c2" "c3"; }

.wad__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-top: 1px solid var(--eb); padding-top: 16px; }
.wad__metric { text-align: center; }
.wad__metric-label { display: block; font-family: var(--emono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--et); margin-bottom: 6px; }
.wad__metric-val { font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: var(--eh); display: inline-block; }
.wad__metrics.is-updated .wad__metric-val { animation: wadMetricFlash .5s ease; }
@keyframes wadMetricFlash {
  0% { color: var(--eg); transform: translateY(-2px); }
  100% { color: var(--eh); transform: translateY(0); }
}
.wad__metric-badge { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--emono); font-size: 12px; font-weight: 600; color: var(--eg); }
.wad__metric-badge i { font-size: 13px; }


/* ---------- 02. Intro / positioning: copy + performance-budget widget ---------- */
.wad__intro { padding: 130px 0; background: #fff; }
.wad__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
.wad__intro-note {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 3px solid var(--eg);
  background: var(--ebg);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--et);
}
.wad__intro-note a { color: var(--eg); font-weight: 600; }

.wad__budget { border: 1px solid var(--eb); border-radius: 16px; overflow: hidden; background: var(--ebg); }
.wad__budget-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--edark); }
.wad__budget-head span { font-family: var(--emono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg3); }
.wad__budget-head i { color: var(--eg2); }
.wad__budget-row { padding: 20px 22px 0; }
.wad__budget-row:last-of-type { padding-bottom: 4px; }
.wad__budget-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.wad__budget-top span { font-size: 13.5px; color: var(--eh); font-weight: 500; }
.wad__budget-top b { font-family: var(--emono); font-size: 13px; color: var(--eg); }
.wad__budget-bar { height: 6px; border-radius: 4px; background: var(--eb); overflow: hidden; }
.wad__budget-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--eg), var(--eg3)); }
.wad__budget-foot { margin: 18px 22px 22px; padding-top: 14px; border-top: 1px dashed var(--eb); font-size: 12px; color: var(--et); line-height: 1.6; }


/* ---------- 03. Capability rows: alternating zigzag with small CSS diagrams ---------- */
.wad__build { padding: 40px 0 130px; background: #fff; }
.wad__rows { display: flex; flex-direction: column; gap: 2px; }
.wad__row {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 60px;
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid var(--eb);
}
.wad__row--rev { grid-template-columns: .85fr 1fr; }
.wad__row--rev .wad__row-copy { order: 2; }
.wad__row--rev .wad__row-visual { order: 1; }
.wad__row-tag { font-family: var(--emono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--eg); margin-bottom: 12px; display: block; }
.wad__row-copy h3 { font-family: var(--edisplay); font-size: 24px; font-weight: 700; color: var(--eh); margin: 0 0 12px; }
.wad__row-copy p { font-size: 15.5px; line-height: 1.8; color: var(--et); margin: 0 0 18px; }
.wad__row-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.wad__row-list li { font-size: 14px; color: var(--eh); display: flex; gap: 9px; align-items: flex-start; }
.wad__row-list li i { color: var(--eg); font-size: 11px; margin-top: 4px; flex: 0 0 auto; }
.wad__row-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wad__row-tags span { font-family: var(--emono); font-size: 12px; color: var(--eh); background: var(--ebg); border: 1px solid var(--eb); border-radius: 7px; padding: 6px 11px; }

.wad__frame {
  position: relative;
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 16px;
  padding: 30px 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.wad__frame-chip {
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: var(--emono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--eg);
  background: rgba(15, 139, 125, .1);
  border-radius: 6px;
  padding: 5px 9px;
}
/* UI */
.wad__frame--ui .wad__frame-line { height: 12px; border-radius: 4px; background: var(--edark); width: 70%; margin-top: 20px; }
.wad__frame--ui .wad__frame-line.short { width: 40%; background: var(--eb); }
.wad__frame-blocks { display: flex; gap: 10px; margin-top: 6px; }
.wad__frame-blocks span { flex: 1; height: 52px; border-radius: 8px; background: #fff; border: 1px solid var(--eb); }
/* API */
.wad__frame--api { align-items: flex-start; }
.wad__frame-node { font-family: var(--emono); font-size: 12.5px; color: var(--eh); background: #fff; border: 1px solid var(--eb); border-radius: 8px; padding: 10px 14px; width: 100%; margin-top: 6px; }
.wad__frame-node:nth-child(3) { color: var(--eg); border-color: rgba(15, 139, 125, .35); }
/* Performance */
.wad__frame--perf .wad__frame-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; margin-top: 20px; }
.wad__frame-bars span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--eg3), var(--eg)); }
/* Accessibility */
.wad__frame--a11y { align-items: center; text-align: center; }
.wad__frame--a11y i { font-size: 40px; color: var(--eg); margin-top: 14px; }
.wad__frame-tab-ring { width: 74px; height: 74px; border: 2px dashed rgba(15, 139, 125, .4); border-radius: 50%; position: absolute; }
/* PWA */
.wad__frame--pwa { align-items: center; text-align: center; }
.wad__frame--pwa i { font-size: 34px; color: var(--eg); margin-top: 12px; }
.wad__frame-offline { font-family: var(--emono); font-size: 12px; color: var(--eg); background: rgba(15, 139, 125, .1); border-radius: 20px; padding: 7px 14px; }
/* Ops / pipeline */
.wad__frame--ops .wad__frame-pipeline { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.wad__frame-pipeline span { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--eb); }
.wad__frame-pipeline span.is-live { border-color: var(--eg); background: var(--eg); position: relative; }
.wad__frame-pipeline span.is-live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--eg); animation: wadKfPulse 1.8s ease-out infinite; }

@keyframes wadKfPulse { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }


/* ---------- 04. Proof band: decorative waterfall + stat callouts ---------- */
.wad__proof { position: relative; padding: 0; overflow: hidden; background: var(--edark); }
.wad__proof-media { position: relative; height: 460px; background: linear-gradient(160deg, var(--edark2), var(--edark)); }
.wad__proof-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--emono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--emuted);
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 6px 13px;
}
.wad__proof-waterfall { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 8%; opacity: .35; }
.wad__proof-waterfall span { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--eg3), transparent); }
.wad__proof-inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.wad__proof-head { max-width: 620px; margin-bottom: 40px; }
.wad__proof-head .wad__eyebrow { color: var(--eg3); }
.wad__proof-head h2 { font-family: var(--edisplay); font-size: 32px; font-weight: 700; color: #fff; margin: 0; }
.wad__proof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.wad__proof-stat { border-left: 2px solid var(--eg2); padding-left: 16px; }
.wad__proof-stat b { display: block; font-family: var(--edisplay); font-size: 20px; font-weight: 700; letter-spacing: .3px; color: #fff; line-height: 1.2; margin-bottom: 10px; }
.wad__proof-stat span { font-size: 13.5px; color: var(--emuted); line-height: 1.5; }


/* ---------- 05. Ship process: horizontal browser-tab switcher ---------- */
.wad__ship { padding: 130px 0; background: var(--ebg); }
.wad__tabs { max-width: 960px; margin: 0 auto; }
.wad__tabs-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.wad__tab {
  font-family: var(--edisplay);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--et);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--eb);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 14px 20px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.wad__tab:hover { color: var(--eh); }
.wad__tab.is-active { background: #fff; color: var(--eg); box-shadow: 0 -2px 0 var(--eg) inset; }
.wad__tabs-panel { background: #fff; border: 1px solid var(--eb); border-radius: 0 14px 14px 14px; padding: 44px; }
.wad__tab-pane { display: none; }
.wad__tab-pane.is-active { display: block; animation: wadKfFade .35s ease; }
.wad__tab-pane h3 { font-family: var(--edisplay); font-size: 22px; font-weight: 700; color: var(--eh); margin: 0 0 14px; }
.wad__tab-pane p { font-size: 15.5px; line-height: 1.8; color: var(--et); margin: 0 0 22px; }
.wad__tab-pane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.wad__tab-pane ul li { font-size: 14.5px; color: var(--eh); display: flex; gap: 9px; align-items: flex-start; }
.wad__tab-pane ul li i { color: var(--eg); margin-top: 4px; font-size: 11px; flex: 0 0 auto; }

@keyframes wadKfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }


/* ---------- 06. Why 3Shadz: Lighthouse-style audit gauge grid ---------- */
.wad__audit { padding: 130px 0; }
.wad__audit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.wad__audit-item { background: var(--edark2); padding: 38px 30px; text-align: center; }
.wad__gauge {
  --val: 90;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(var(--eg3) calc(var(--val) * 1%), rgba(255, 255, 255, .12) 0);
}
.wad__gauge::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--edark2); }
.wad__gauge span { position: relative; z-index: 1; font-family: var(--edisplay); font-weight: 700; color: #fff; font-size: 17px; }
.wad__audit-item h3 { font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.wad__audit-item p { font-size: 14px; line-height: 1.7; color: var(--emuted); margin: 0; }
.wad__audit-note { text-align: center; font-size: 12.5px; color: var(--emuted); opacity: .75; margin: 30px 0 0; }


/* ---------- 07. Technology stack: spec-sheet rows ---------- */
.wad__stack { padding: 130px 0; background: #fff; }
.wad__stack-list { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--eb); }
.wad__stack-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--eb); align-items: center; }
.wad__stack-label { font-family: var(--emono); font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg); }
.wad__stack-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wad__stack-tags span { font-size: 13.5px; color: var(--eh); background: var(--ebg); border: 1px solid var(--eb); border-radius: 7px; padding: 7px 12px; }


/* ---------- 08. FAQ ---------- */
.wad__faq { padding: 40px 0 130px; background: #fff; }
.wad__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.wad__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.wad__faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: none; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); cursor: pointer; }
.wad__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.wad__faq-item.is-open .wad__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.wad__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.wad__faq-item.is-open .wad__faq-a { max-height: 260px; }
.wad__faq-a p { margin: 0; padding: 0 26px 22px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .wad__hero-title { font-size: 42px; }
  .wad__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .wad__browser { max-width: 560px; margin: 0 auto; }
  .wad__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .wad__row, .wad__row--rev { grid-template-columns: 1fr; gap: 32px; }
  .wad__row--rev .wad__row-copy, .wad__row--rev .wad__row-visual { order: initial; }
  .wad__audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wad__proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .wad__stack-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 991px) {
  .wad__hero { padding: 160px 0 90px; }
  .wad__hero-title { font-size: 36px; }
  .wad__intro, .wad__build, .wad__ship, .wad__audit, .wad__stack { padding: 90px 0; }
  .wad__build { padding-top: 20px; }
  .wad__faq { padding: 20px 0 90px; }
  .wad__row-list { grid-template-columns: 1fr; }
  .wad__tabs-panel { padding: 34px 26px; }
  .wad__browser.is-tablet .wad__viewport, .wad__browser.is-mobile .wad__viewport { max-width: 100%; }
}

@media (max-width: 767px) {
  .wad__hero-title { font-size: 30px; }
  .wad__hero-facts { gap: 24px; }
  .wad__tabs-bar { overflow-x: auto; flex-wrap: nowrap; }
  .wad__tab { flex: 0 0 auto; }
  .wad__audit-grid { grid-template-columns: 1fr; }
  .wad__metrics { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
}

@media (max-width: 575px) {
  .wad__proof-stats { grid-template-columns: 1fr; }
}

/* Users who ask for less motion get the page without the pulsing pipeline dot. */
@media (prefers-reduced-motion: reduce) {
  .wad__frame-pipeline span.is-live::after { animation: none; }
  .wad__page * { transition-duration: .01ms !important; }
  .wad__browser-progress,
  .wad__device-btn.is-active,
  .wad__mockhero,
  .wad__metric-val { animation: none !important; }
}


/* ============================================================
   MOBILE APP DEVELOPMENT PAGE (mobile-app-developments.html)
   Scoped to .mad__page. Distinct visual system for this specific
   page: a hero built as an illustrative App Store listing card
   (icon, rating, screenshot strip, store badges, build status), a
   platform-decision dot-matrix comparing Native / Cross-Platform /
   PWA, a device-frame "feature lab" where a clickable capability
   list swaps the content shown on a phone-screen mockup, a dark
   store-readiness checklist band with proof stats, a metro-line
   style release track with alternating stops, a numbered value
   grid, and a platform-coverage list paired with grouped technology
   tags. No blueprint node inspector, layer-stack drawers or CI
   pipeline track from .swe__page, no fit-diagnostic SVG, friction
   ledger, concentric-ring spine, workbench or hub-and-spoke diagram
   from .csd__page, no platform console, complexity meter,
   capability rail or governance pill strip from .eae__page, and no
   browser-chrome viewport switcher, performance-budget widget,
   zigzag capability rows or Lighthouse-style gauge grid from
   .wad__page are reused. Keyframes are prefixed madKf* so nothing
   collides with the rest of the theme. Nothing in this block leaks
   to other pages.
   ============================================================ */
.mad__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.mad__page .mad__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.mad__page .mad__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.mad__page .mad__title {
  font-family: var(--edisplay);
  font-size: 42px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.mad__page .mad__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.mad__page .mad__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.mad__page .mad__text:last-child { margin-bottom: 0; }
.mad__page .mad__head { max-width: 780px; }
.mad__page .mad__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.mad__page .mad__dark { position: relative; overflow: hidden; background: var(--edark); }
.mad__page .mad__dark > .container { position: relative; z-index: 1; }
.mad__page .mad__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 92% -8%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(680px 380px at 4% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.mad__page .mad__dark .mad__eyebrow { color: var(--eg3); }
.mad__page .mad__dark .mad__title { color: #fff; }
.mad__page .mad__dark .mad__lead { color: #eef6f4; }
.mad__page .mad__dark .mad__text { color: var(--emuted); }

.mad__page .mad__btn,
.mad__page .mad__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.mad__page .mad__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.mad__page .mad__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.mad__page .mad__btn-outline { color: var(--eh); border: 2px solid var(--eb); background: transparent; }
.mad__page .mad__btn-outline:hover { background: var(--eh); border-color: var(--eh); color: #fff; }
.mad__page .mad__dark .mad__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.mad__page .mad__dark .mad__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.mad__page .mad__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(15, 139, 125, .1);
  color: var(--eg);
  font-size: 19px;
  margin-bottom: 16px;
}
.mad__page .mad__dark .mad__ico { background: rgba(53, 183, 163, .16); color: var(--eg3); }

.mad__page .mad__mark {
  position: relative;
  display: inline-block;
  color: var(--eg);
}
.mad__page .mad__mark::before,
.mad__page .mad__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .55;
  font-size: .68em;
  position: relative;
  top: -.12em;
}
.mad__page .mad__mark::before { content: "["; margin-right: 2px; }
.mad__page .mad__mark::after { content: "]"; margin-left: 2px; }


/* ---------- 01. Hero: illustrative App Store listing card ---------- */
.mad__hero {
  position: relative;
  overflow: hidden;
  background: var(--edark);
  padding: 190px 0 110px;
}
.mad__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(880px 460px at 92% -10%, rgba(15, 139, 125, .32), transparent 60%),
              radial-gradient(700px 400px at 2% 106%, rgba(224, 153, 61, .18), transparent 62%);
}
.mad__hero .container { position: relative; z-index: 2; }
.mad__hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: center; }

.mad__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  background: rgba(53, 183, 163, .12);
  border: 1px solid rgba(53, 183, 163, .3);
  border-radius: 30px;
  padding: 9px 18px;
  margin-bottom: 26px;
}
.mad__hero-title { font-family: var(--edisplay); font-size: 52px; line-height: 1.14; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.mad__hero .mad__mark { color: var(--eg3); }
.mad__hero-lead { font-size: 17.5px; line-height: 1.8; color: var(--emuted); max-width: 560px; margin: 0 0 34px; }
.mad__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }
.mad__hero .mad__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.mad__hero .mad__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.mad__hero-facts { display: flex; flex-wrap: wrap; gap: 34px; }
.mad__hero-fact { max-width: 210px; }
.mad__hero-fact b { display: block; font-family: var(--edisplay); font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.mad__hero-fact span { font-size: 13px; line-height: 1.6; color: var(--emuted); }

.mad__hero-figure { display: flex; justify-content: center; }

.mad__listing {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  animation: madListingReveal .8s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes madListingReveal {
  0% { opacity: 0; transform: translateY(28px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mad__listing-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.mad__listing-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--eg3), var(--eg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 8px 18px rgba(15, 139, 125, .35);
  animation: madIconFloat 3.6s ease-in-out .8s infinite;
}
@keyframes madIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.mad__listing-meta { flex: 1 1 auto; min-width: 0; }
.mad__listing-name { font-family: var(--edisplay); font-size: 18px; font-weight: 700; color: var(--eh); margin: 0 0 3px; }
.mad__listing-cat { display: block; font-size: 12.5px; color: var(--et); margin-bottom: 6px; }
.mad__listing-rating { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--et); }
.mad__stars { color: var(--eg2); font-size: 11px; letter-spacing: 1.5px; }
.mad__stars i { display: inline-block; animation: madStarPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.mad__stars i:nth-child(1) { animation-delay: .55s; }
.mad__stars i:nth-child(2) { animation-delay: .62s; }
.mad__stars i:nth-child(3) { animation-delay: .69s; }
.mad__stars i:nth-child(4) { animation-delay: .76s; }
.mad__stars i:nth-child(5) { animation-delay: .83s; }
@keyframes madStarPop {
  0% { opacity: 0; transform: scale(.4) rotate(-15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.mad__listing-rating b { font-family: var(--edisplay); color: var(--eh); font-weight: 700; }
.mad__listing-get {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  font-family: var(--edisplay);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--eg);
  background: rgba(15, 139, 125, .1);
  border-radius: 20px;
  padding: 8px 18px;
}
.mad__listing-get::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: madGetSheen 3.4s ease-in-out 1.4s infinite;
}
@keyframes madGetSheen {
  0% { left: -60%; }
  30% { left: 140%; }
  100% { left: 140%; }
}
.mad__listing-desc { font-size: 14px; line-height: 1.7; color: var(--et); margin: 0 0 18px; }

.mad__listing-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.mad__shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  background: var(--ebg);
  border: 1px dashed var(--eb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--et);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.mad__shot i { font-size: 18px; color: var(--eg3); transition: color .3s ease; }
.mad__shot span { font-size: 10.5px; font-family: var(--emono); letter-spacing: .5px; transition: color .3s ease; }
.mad__shot.is-active {
  border-color: var(--eg);
  background: rgba(15, 139, 125, .07);
  box-shadow: 0 14px 26px -16px rgba(15, 139, 125, .55);
  transform: translateY(-4px);
}
.mad__shot.is-active i { color: var(--eg); }
.mad__shot.is-active span { color: var(--eh); font-weight: 600; }
.mad__shot.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(15, 139, 125, .16) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: madShotSheen 1.6s ease-in-out infinite;
}
@keyframes madShotSheen {
  0% { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}

.mad__listing-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mad__listing-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--eh);
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 20px;
  padding: 6px 12px;
}
.mad__listing-badges i { color: var(--eg); }

.mad__listing-build {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--emono);
  font-size: 11.5px;
  color: var(--et);
  border-top: 1px solid var(--eb);
  padding-top: 14px;
}
.mad__listing-build-dot { position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--eg); }
.mad__listing-build-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--eg); animation: madKfPulse 1.8s ease-out infinite; }

.mad__listing-note {
  display: block;
  text-align: center;
  font-family: var(--emono);
  font-size: 10.5px;
  letter-spacing: .5px;
  color: var(--et);
  opacity: .65;
  margin-top: 14px;
}

@keyframes madKfPulse { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }


/* ---------- 02. Introduction: copy + platform-decision dot matrix ---------- */
.mad__intro { padding: 130px 0; background: #fff; }
.mad__intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 70px; align-items: start; }
.mad__intro-note {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--et);
  background: var(--ebg);
  border-left: 3px solid var(--eg);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}
.mad__intro-note a { color: var(--eg); font-weight: 600; }

.mad__matrix { background: var(--ebg); border: 1px solid var(--eb); border-radius: 18px; padding: 34px; }
.mad__matrix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--emono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 22px;
}
.mad__matrix-head i { color: var(--eg2); font-size: 16px; }
.mad__matrix-table { display: flex; flex-direction: column; }
.mad__matrix-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--eb);
}
.mad__matrix-row:last-child { border-bottom: none; }
.mad__matrix-row--head { padding-top: 0; }
.mad__matrix-row--head span { font-family: var(--edisplay); font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--eh); text-align: center; }
.mad__matrix-row--head span:first-child { text-align: left; }
.mad__matrix-label { font-size: 13.5px; color: var(--eh); font-weight: 500; }
.mad__dots { display: flex; justify-content: center; gap: 5px; }
.mad__dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1.5px solid var(--eb); font-style: normal; }
.mad__dots[data-on="2"] i:nth-child(-n+2),
.mad__dots[data-on="3"] i:nth-child(-n+3),
.mad__dots[data-on="4"] i:nth-child(-n+4),
.mad__dots[data-on="5"] i:nth-child(-n+5) { background: var(--eg); border-color: var(--eg); }
.mad__matrix-foot { font-size: 12.5px; line-height: 1.7; color: var(--et); opacity: .85; margin-top: 20px; }


/* ---------- 03. Feature lab: device frame driven by a capability list ---------- */
.mad__lab { padding: 130px 0; background: var(--ebg); }
.mad__lab-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 70px; align-items: center; }

.mad__lab-device { display: flex; justify-content: center; }
.mad__phone {
  position: relative;
  width: 280px;
  height: 560px;
  background: var(--edark);
  border-radius: 42px;
  padding: 16px 14px;
  box-shadow: 0 40px 80px rgba(11, 22, 19, .28);
}
.mad__phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: var(--edark);
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.mad__phone-screen {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 28px;
  padding: 54px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.mad__phone-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(15, 139, 125, .1);
  color: var(--eg);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.mad__phone-title { font-family: var(--edisplay); font-size: 16.5px; font-weight: 700; color: var(--eh); margin: 0 0 10px; }
.mad__phone-text { font-size: 12.5px; line-height: 1.65; color: var(--et); margin: 0 0 18px; }
.mad__phone-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mad__phone-tags span { font-size: 10px; font-weight: 600; color: var(--eg); background: rgba(15, 139, 125, .1); border-radius: 14px; padding: 5px 10px; }
.mad__phone-home {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
}

.mad__lab-list { display: flex; flex-direction: column; gap: 10px; }
.mad__lab-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1px solid var(--eb);
  border-radius: 14px;
  padding: 18px 22px;
  font-family: var(--edisplay);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--eh);
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.mad__lab-item i { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--ebg); color: var(--eg); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: background .25s ease, color .25s ease; }
.mad__lab-item:hover { border-color: var(--eg); }
.mad__lab-item.is-active { background: var(--edark); border-color: var(--edark); color: #fff; box-shadow: 0 16px 30px rgba(11, 22, 19, .18); }
.mad__lab-item.is-active i { background: var(--eg3); color: var(--edark); }


/* ---------- 04. Store readiness: dark checklist + proof stats ---------- */
.mad__ready { position: relative; overflow: hidden; background: var(--edark); padding: 0 0 130px; }
.mad__ready-media { position: relative; height: 160px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--edark2), var(--edark)); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mad__ready-tag {
  font-family: var(--emono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--emuted);
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 8px 16px;
}
.mad__ready-inner { position: relative; padding: 90px 0 0; }
.mad__ready-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 60px; align-items: center; margin-bottom: 60px; }
.mad__ready-head { max-width: 480px; }
.mad__ready-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mad__ready-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: #eef6f4; }
.mad__ready-checklist i { color: var(--eg3); font-size: 16px; margin-top: 2px; flex: 0 0 auto; }

.mad__ready-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .12); }
.mad__ready-stat { border-left: 2px solid var(--eg2); padding-left: 16px; }
.mad__ready-stat b { display: block; font-family: var(--edisplay); font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.mad__ready-stat span { font-size: 13px; color: var(--emuted); line-height: 1.5; }


/* ---------- 05. Release track: metro-line process ---------- */
.mad__track { padding: 130px 0 150px; background: #fff; }
.mad__track-line { position: relative; display: flex; justify-content: space-between; gap: 8px; height: 320px; }
.mad__track-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--eb);
  transform: translateY(-50%);
  z-index: 0;
}
.mad__track-stop { position: relative; z-index: 1; flex: 1 1 0; }
.mad__track-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--eg);
  color: var(--eg);
  font-family: var(--edisplay);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mad__track-card { position: absolute; left: 50%; transform: translateX(-50%); width: 175px; text-align: center; }
.mad__track-stop.is-up .mad__track-card { bottom: calc(50% + 34px); }
.mad__track-stop.is-down .mad__track-card { top: calc(50% + 34px); }
.mad__track-card h3 { font-family: var(--edisplay); font-size: 15px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.mad__track-card p { font-size: 12.5px; line-height: 1.6; color: var(--et); margin: 0; }


/* ---------- 06. Why 3Shadz: value grid ---------- */
.mad__value { padding: 130px 0; }
.mad__value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.mad__value-item { position: relative; background: var(--edark2); padding: 40px 34px; border-left: 3px solid transparent; transition: border-color .25s ease, background .25s ease; }
.mad__value-item:hover { border-left-color: var(--eg3); background: #142622; }
.mad__idx { position: absolute; top: 26px; right: 30px; font-family: var(--edisplay); font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .25); }
.mad__value-item h3 { font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.mad__value-item p { font-size: 14px; line-height: 1.7; color: var(--emuted); margin: 0; }


/* ---------- 07. Platform & technology coverage ---------- */
.mad__stack { padding: 130px 0; background: var(--ebg); }
.mad__stack-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; background: #fff; border: 1px solid var(--eb); border-radius: 18px; padding: 46px; }
.mad__coverage { border-right: 1px solid var(--eb); padding-right: 50px; }
.mad__coverage-title { font-family: var(--edisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--eh); margin: 0 0 20px; }
.mad__coverage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mad__coverage-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--eh); }
.mad__coverage-list i { color: var(--eg); font-size: 12px; }

.mad__toolkit { display: flex; flex-direction: column; gap: 24px; }
.mad__toolkit-cat h4 { font-family: var(--emono); font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg); margin: 0 0 12px; }
.mad__toolkit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mad__toolkit-tags span { font-size: 13.5px; color: var(--eh); background: var(--ebg); border: 1px solid var(--eb); border-radius: 7px; padding: 7px 12px; }


/* ---------- 08. FAQ ---------- */
.mad__faq { padding: 40px 0 130px; background: #fff; }
.mad__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.mad__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.mad__faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: none; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); cursor: pointer; }
.mad__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.mad__faq-item.is-open .mad__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.mad__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mad__faq-item.is-open .mad__faq-a { max-height: 260px; }
.mad__faq-a p { margin: 0; padding: 0 26px 22px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .mad__hero-title { font-size: 42px; }
  .mad__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .mad__listing { max-width: 460px; margin: 0 auto; }
  .mad__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .mad__lab-grid { grid-template-columns: 1fr; gap: 50px; }
  .mad__lab-device { order: -1; }
  .mad__ready-grid { grid-template-columns: 1fr; gap: 30px; }
  .mad__ready-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .mad__value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mad__stack-grid { grid-template-columns: 1fr; }
  .mad__coverage { border-right: none; border-bottom: 1px solid var(--eb); padding-right: 0; padding-bottom: 30px; }
}

@media (max-width: 991px) {
  .mad__hero { padding: 160px 0 90px; }
  .mad__hero-title { font-size: 36px; }
  .mad__intro, .mad__lab, .mad__stack, .mad__track { padding: 90px 0; }
  .mad__ready { padding-bottom: 90px; }
  .mad__faq { padding: 20px 0 90px; }
  .mad__matrix-row { grid-template-columns: 1fr .8fr .8fr .8fr; }
}

@media (max-width: 767px) {
  .mad__hero-title { font-size: 30px; }
  .mad__hero-facts { gap: 24px; }
  .mad__phone { width: 240px; height: 480px; }
  .mad__value-grid { grid-template-columns: 1fr; }
  .mad__track-line { display: block; height: auto; }
  .mad__track-line::before { display: none; }
  .mad__track-stop { height: auto; margin-bottom: 36px; }
  .mad__track-dot { position: static; transform: none; margin: 0 auto 14px; }
  .mad__track-card { position: static; transform: none; width: auto; }
  .mad__matrix-row { grid-template-columns: 1fr repeat(3, 1fr); }
  .mad__matrix-label { font-size: 12px; }
}

@media (max-width: 575px) {
  .mad__ready-stats { grid-template-columns: 1fr; }
  .mad__matrix-table { overflow-x: auto; }
}

/* Users who ask for less motion get the page without the pulsing build-status dot. */
@media (prefers-reduced-motion: reduce) {
  .mad__listing-build-dot::after { animation: none; }
  .mad__page * { transition-duration: .01ms !important; }
  .mad__listing,
  .mad__listing-icon,
  .mad__stars i,
  .mad__listing-get::after,
  .mad__shot.is-active::before { animation: none !important; }
}


/* ============================================================
   SAAS DEVELOPMENT PAGE (saas-development.html)
   Scoped to .saas__page. Distinct visual system for this specific
   page: a hero built as an illustrative multi-tenant SaaS product
   console (workspace switcher, sidebar rail, a live-ticking MRR
   figure, a usage bar chart, and clickable plan-tier tabs that swap
   an entitlement readout), a tenancy-model comparison of nested
   "tenant chip" diagrams (Single-Tenant / Pooled Multi-Tenant /
   Hybrid), a connected capability ledger with a running vertical
   rail linking numbered markers to each row, a looped
   "continuous delivery" release track that explicitly reads as
   repeating rather than linear, a light top-accent value grid, and
   grouped technology category cards. No blueprint node inspector,
   layer-stack drawers or CI pipeline track from .swe__page, no
   fit-diagnostic SVG, friction ledger, concentric-ring spine,
   workbench or hub-and-spoke diagram from .csd__page, no platform
   console, complexity meter, capability rail or governance pill
   strip from .eae__page, no browser-chrome viewport switcher,
   performance-budget widget, zigzag capability rows or
   Lighthouse-style gauge grid from .wad__page, and no App Store
   listing card, platform dot-matrix, device-frame feature lab or
   metro-line release track from .mad__page are reused. Keyframes
   are prefixed saasKf* so nothing collides with the rest of the
   theme. Nothing in this block leaks to other pages.
   ============================================================ */
.saas__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.saas__page .saas__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.saas__page .saas__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.saas__page .saas__title {
  font-family: var(--edisplay);
  font-size: 42px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.saas__page .saas__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.saas__page .saas__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.saas__page .saas__text:last-child { margin-bottom: 0; }
.saas__page .saas__head { max-width: 780px; }
.saas__page .saas__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.saas__page .saas__btn,
.saas__page .saas__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.saas__page .saas__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.saas__page .saas__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.saas__page .saas__btn-outline { color: var(--eh); border: 2px solid var(--eb); background: transparent; }
.saas__page .saas__btn-outline:hover { background: var(--eh); border-color: var(--eh); color: #fff; }

.saas__page .saas__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(15, 139, 125, .1);
  color: var(--eg);
  font-size: 19px;
  margin-bottom: 16px;
}

.saas__page .saas__mark {
  position: relative;
  display: inline-block;
  color: var(--eg);
}
.saas__page .saas__mark::before,
.saas__page .saas__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .55;
  font-size: .68em;
  position: relative;
  top: -.12em;
}
.saas__page .saas__mark::before { content: "["; margin-right: 2px; }
.saas__page .saas__mark::after { content: "]"; margin-left: 2px; }


/* ---------- 01. Hero: illustrative multi-tenant SaaS product console ---------- */
.saas__hero {
  position: relative;
  overflow: hidden;
  background: var(--edark);
  padding: 190px 0 110px;
}
.saas__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(880px 460px at 92% -10%, rgba(15, 139, 125, .32), transparent 60%),
              radial-gradient(700px 400px at 2% 106%, rgba(224, 153, 61, .18), transparent 62%);
}
.saas__hero .container { position: relative; z-index: 2; }
.saas__hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: center; }

.saas__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  background: rgba(53, 183, 163, .12);
  border: 1px solid rgba(53, 183, 163, .3);
  border-radius: 30px;
  padding: 9px 18px;
  margin-bottom: 26px;
}
.saas__hero-title { font-family: var(--edisplay); font-size: 50px; line-height: 1.16; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.saas__hero .saas__mark { color: var(--eg3); }
.saas__hero-lead { font-size: 17.5px; line-height: 1.8; color: var(--emuted); max-width: 560px; margin: 0 0 34px; }
.saas__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }
.saas__hero .saas__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.saas__hero .saas__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.saas__hero-facts { display: flex; flex-wrap: wrap; gap: 34px; }
.saas__hero-fact { max-width: 210px; }
.saas__hero-fact b { display: block; font-family: var(--edisplay); font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.saas__hero-fact span { font-size: 13px; line-height: 1.6; color: var(--emuted); }

.saas__hero-figure { display: flex; justify-content: center; }

.saas__console {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.saas__console-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--eg), var(--eg2));
  border-radius: 0 3px 3px 0;
}
.saas__console-progress.is-running { animation: saasProgressFill 2s linear; }
.saas__console.is-paused .saas__console-progress { animation-play-state: paused; }
@keyframes saasProgressFill { from { width: 0%; } to { width: 100%; } }
.saas__console-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--eb);
  background: var(--ebg);
}
.saas__console-tenant { display: flex; align-items: center; gap: 8px; font-family: var(--edisplay); font-size: 13px; font-weight: 700; color: var(--eh); }
.saas__console-tenant i { color: var(--et); font-size: 10px; }
.saas__console-tenant i:first-child { color: var(--eg); font-size: 13px; }
.saas__console-live { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--et); white-space: nowrap; }
.saas__console-live-dot { position: relative; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--eg); }
.saas__console-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--eg); animation: saasKfPulse 1.8s ease-out infinite; }

.saas__console-body { display: flex; }
.saas__console-rail { display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; border-right: 1px solid var(--eb); background: #fbfcfc; }
.saas__console-rail-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--et); font-size: 13px; }
.saas__console-rail-ico.is-active { background: var(--eg); color: #fff; }

.saas__console-main { flex: 1 1 auto; padding: 22px 24px 18px; min-width: 0; }
.saas__console-mrr-label { display: block; font-family: var(--emono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--et); margin-bottom: 6px; }
.saas__console-mrr-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.saas__console-mrr-value { font-family: var(--edisplay); font-size: 26px; font-weight: 700; color: var(--eh); }
.saas__console-mrr-delta { font-size: 11px; font-weight: 600; color: var(--eg); background: rgba(15, 139, 125, .1); border-radius: 12px; padding: 3px 9px; }

.saas__bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-bottom: 20px; }
.saas__bar {
  flex: 1 1 0;
  background: linear-gradient(180deg, var(--eg3), var(--eg));
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  transition: height .6s cubic-bezier(.65, 0, .35, 1), filter .3s ease;
  animation: saasBarGrow .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.saas__bar:nth-child(1) { animation-delay: .05s; }
.saas__bar:nth-child(2) { animation-delay: .12s; }
.saas__bar:nth-child(3) { animation-delay: .19s; }
.saas__bar:nth-child(4) { animation-delay: .26s; }
.saas__bar:nth-child(5) { animation-delay: .33s; }
.saas__bar:nth-child(6) { animation-delay: .40s; }
.saas__bar:nth-child(7) { animation-delay: .47s; }
.saas__bar:nth-child(8) { animation-delay: .54s; }
@keyframes saasBarGrow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.saas__bar.is-new { animation: saasBarPulse .6s ease; }
@keyframes saasBarPulse { 0% { filter: brightness(1.5); } 100% { filter: brightness(1); } }

.saas__tiers { display: flex; gap: 6px; margin-bottom: 16px; background: var(--ebg); border-radius: 10px; padding: 4px; }
.saas__tier { flex: 1 1 0; text-align: center; font-family: var(--edisplay); font-size: 12px; font-weight: 600; color: var(--et); padding: 8px 6px; border-radius: 8px; cursor: pointer; background: none; border: none; transition: background .25s ease, color .25s ease; }
.saas__tier.is-active { background: var(--edark); color: #fff; }
.saas__console:not(.is-paused) .saas__tier.is-active { animation: saasTierPulse 2s ease-out infinite; }
@keyframes saasTierPulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 139, 125, .55); }
  60% { box-shadow: 0 0 0 6px rgba(15, 139, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 139, 125, 0); }
}

.saas__readout { display: flex; flex-direction: column; border-top: 1px solid var(--eb); }
.saas__readout-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--eb); font-size: 12px; }
.saas__readout-row:last-child { border-bottom: none; }
.saas__readout-row span:first-child { color: var(--et); }
.saas__readout-row span:last-child { color: var(--eh); font-weight: 600; text-align: right; transition: color .3s ease; }
.saas__readout.is-updated .saas__readout-row span:last-child { animation: saasReadoutFlash .5s ease; }
@keyframes saasReadoutFlash { 0% { color: var(--eg); } 100% { color: var(--eh); } }

.saas__console-note {
  display: block;
  text-align: center;
  font-family: var(--emono);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--et);
  opacity: .65;
  padding: 12px 20px 16px;
}

@keyframes saasKfPulse { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }


/* ---------- 02. Introduction: copy + tenancy model comparison ---------- */
.saas__intro { padding: 130px 0; background: #fff; }
.saas__intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 70px; align-items: start; }
.saas__intro-note {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--et);
  background: var(--ebg);
  border-left: 3px solid var(--eg);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}
.saas__intro-note a { color: var(--eg); font-weight: 600; }

.saas__tmodels { background: var(--ebg); border: 1px solid var(--eb); border-radius: 18px; padding: 32px; }
.saas__tmodels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--emono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 22px;
}
.saas__tmodels-head i { color: var(--eg2); font-size: 16px; }

.saas__tmodel { padding: 18px 0; border-bottom: 1px solid var(--eb); }
.saas__tmodel:first-of-type { padding-top: 0; }
.saas__tmodel:last-of-type { border-bottom: none; padding-bottom: 0; }
.saas__tmodel-viz { display: flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 14px; }
.saas__tbox { flex: 0 0 auto; width: 24px; height: 24px; border: 1.5px solid var(--eg); border-radius: 7px; display: flex; align-items: center; justify-content: center; background: #fff; }
.saas__tbox .saas__chip { width: 8px; height: 8px; border-radius: 50%; background: var(--eg3); }
.saas__pool { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1.5px solid var(--eg2); border-radius: 20px; background: rgba(224, 153, 61, .08); }
.saas__pool .saas__chip { width: 8px; height: 8px; border-radius: 50%; background: var(--eg2); }
.saas__tmodel-title { font-family: var(--edisplay); font-size: 16px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.saas__tmodel-text { font-size: 13.5px; line-height: 1.7; color: var(--et); margin: 0 0 12px; }
.saas__tmodel-tag { display: block; font-size: 11.5px; font-weight: 600; color: var(--eg); }
.saas__tmodels-foot { font-size: 12.5px; line-height: 1.7; color: var(--et); opacity: .85; margin-top: 18px; }


/* ---------- 03. Capabilities: connected ledger with a running rail ---------- */
.saas__ledger { padding: 130px 0; background: #fff; }
.saas__ledger-list { position: relative; max-width: 880px; margin: 0 auto; }
.saas__ledger-list::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 26px;
  width: 2px;
  background: var(--eb);
}
.saas__ledger-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--eb);
}
.saas__ledger-row:first-child { padding-top: 0; }
.saas__ledger-row:last-child { border-bottom: none; padding-bottom: 0; }
.saas__ledger-marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--eg);
  color: var(--eg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: background .25s ease, color .25s ease;
}
.saas__ledger-row:hover .saas__ledger-marker { background: var(--eg); color: #fff; }
.saas__ledger-num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--eg2);
  color: #fff;
  font-family: var(--emono);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saas__ledger-body { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.saas__ledger-body h3 { font-family: var(--edisplay); font-size: 18px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.saas__ledger-body p { font-size: 14.5px; line-height: 1.75; color: var(--et); margin: 0; max-width: 560px; }

.saas__ledger-note {
  max-width: 880px;
  margin: 40px auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--et);
  opacity: .85;
  padding-left: 78px;
}


/* ---------- 04. Proof band: image + floating stat callouts ---------- */
.saas__proof { position: relative; background: var(--edark); }
.saas__proof-media { width: 100%; height: 460px; overflow: hidden; }
.saas__proof-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saas__proof-inner { position: relative; padding: 90px 0 100px; }
.saas__proof-head { max-width: 640px; margin: 0 auto 50px; text-align: center; }
.saas__proof-head h2 { font-family: var(--edisplay); font-size: 34px; font-weight: 700; letter-spacing: -.4px; color: #fff; margin: 0; line-height: 1.3; }
.saas__proof-head .saas__eyebrow { color: var(--eg3); }
.saas__proof-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  overflow: hidden;
}
.saas__proof-stat { background: var(--edark); padding: 30px 26px; }
.saas__proof-stat b { display: block; font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.saas__proof-stat span { font-size: 13px; line-height: 1.55; color: var(--emuted); }


/* ---------- 05. Continuous delivery loop ---------- */
.saas__loop { padding: 130px 0; background: #fff; }
.saas__loop-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.saas__loop-stage { flex: 1 1 150px; max-width: 190px; background: var(--ebg); border: 1px solid var(--eb); border-radius: 14px; padding: 24px 20px; text-align: center; }
.saas__loop-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--eg); color: #fff; font-family: var(--edisplay); font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.saas__loop-stage h3 { font-family: var(--edisplay); font-size: 14.5px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.saas__loop-stage p { font-size: 12.5px; line-height: 1.6; color: var(--et); margin: 0; }
.saas__loop-repeat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  font-family: var(--emono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg);
}
.saas__loop-repeat::before, .saas__loop-repeat::after { content: ""; height: 1px; width: 70px; background: var(--eb); }
.saas__loop-repeat i { color: var(--eg2); }


/* ---------- 06. Why 3Shadz: light top-accent value grid ---------- */
.saas__value { padding: 130px 0; background: var(--ebg); }
.saas__value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.saas__value-item { position: relative; background: #fff; border: 1px solid var(--eb); border-radius: 14px; padding: 34px 30px 30px; overflow: hidden; }
.saas__value-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--eg); }
.saas__value-item:nth-child(even)::before { background: var(--eg2); }
.saas__value-item h3 { font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: var(--eh); margin: 0 0 10px; }
.saas__value-item p { font-size: 14px; line-height: 1.7; color: var(--et); margin: 0; }


/* ---------- 07. SaaS technology stack ---------- */
.saas__stack { padding: 130px 0; background: #fff; }
.saas__stack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.saas__stack-cat { background: var(--ebg); border: 1px solid var(--eb); border-radius: 14px; padding: 26px 24px; }
.saas__stack-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.saas__stack-cat-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: rgba(15, 139, 125, .1); color: var(--eg); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.saas__stack-cat h4 { font-family: var(--edisplay); font-size: 14.5px; font-weight: 700; color: var(--eh); margin: 0; }
.saas__stack-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.saas__stack-tags span { font-size: 12.5px; color: var(--eh); background: #fff; border: 1px solid var(--eb); border-radius: 7px; padding: 6px 10px; }


/* ---------- 08. FAQ ---------- */
.saas__faq { padding: 40px 0 130px; background: #fff; }
.saas__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.saas__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.saas__faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: none; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); cursor: pointer; }
.saas__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.saas__faq-item.is-open .saas__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.saas__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.saas__faq-item.is-open .saas__faq-a { max-height: 260px; }
.saas__faq-a p { margin: 0; padding: 0 26px 22px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .saas__hero-title { font-size: 42px; }
  .saas__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .saas__console { max-width: 460px; margin: 0 auto; }
  .saas__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .saas__proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saas__value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saas__stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .saas__hero { padding: 160px 0 90px; }
  .saas__hero-title { font-size: 36px; }
  .saas__intro, .saas__ledger, .saas__loop, .saas__value, .saas__stack { padding: 90px 0; }
  .saas__proof-media { height: 320px; }
  .saas__proof-inner { padding: 70px 0 80px; }
  .saas__faq { padding: 20px 0 90px; }
}

@media (max-width: 767px) {
  .saas__hero-title { font-size: 30px; }
  .saas__hero-facts { gap: 24px; }
  .saas__ledger-list::before { display: none; }
  .saas__ledger-row { gap: 18px; }
  .saas__ledger-marker { width: 44px; height: 44px; font-size: 16px; }
  .saas__ledger-note { padding-left: 0; }
  .saas__proof-media { height: 220px; }
  .saas__proof-inner { padding: 56px 0 64px; }
  .saas__proof-stats { grid-template-columns: 1fr; }
  .saas__value-grid { grid-template-columns: 1fr; }
  .saas__stack-grid { grid-template-columns: 1fr; }
  .saas__loop-repeat::before, .saas__loop-repeat::after { width: 30px; }
}

@media (max-width: 575px) {
  .saas__console-rail { display: none; }
}

/* Users who ask for less motion get the page without the pulsing
   live-status dot or the incrementing MRR ticker (the ticker script
   itself checks prefers-reduced-motion before starting the interval). */
@media (prefers-reduced-motion: reduce) {
  .saas__console-live-dot::after { animation: none; }
  .saas__page * { transition-duration: .01ms !important; }
  .saas__bar,
  .saas__console-progress,
  .saas__tier.is-active,
  .saas__readout-row span:last-child { animation: none !important; }
}


/* ============================================================
   E-COMMERCE DEVELOPMENT PAGE (e-commerce-development.html)
   Scoped to .ecom__page. Distinct visual system for this specific
   page: a hero built as an "exploded view" storefront rig - a
   clickable storefront product tile sitting above a Commerce
   Engine readout, where Add to Cart pulses a signal down through
   catalog / inventory / payments / fulfillment rows and bumps a
   live order counter and stock figure; a horizontal platform
   spectrum slider (Off-the-Shelf -> Headless -> Fully Custom) with
   clickable points that swap a description row; an asymmetric
   bento grid of capability cards instead of layered drawers or a
   connected ledger; a proof band that pairs a pull-quote statement
   tile with stat callouts instead of four equal tiles; a vertical
   alternating delivery-journey timeline instead of a horizontal
   pipeline track or looped release track; a dark "distinguishers"
   list (big index number + row) instead of an icon card grid; and
   a platforms/integrations hub board with a center commerce-core
   icon instead of grouped tag cards. No blueprint node inspector
   or CI pipeline track from .swe__page, no product console, MRR
   ticker or tenancy chips from .saas__page, no fit-diagnostic SVG,
   friction ledger, concentric-ring spine, workbench or hub-and-
   spoke diagram from .csd__page, no platform console, complexity
   meter, capability rail or governance pill strip from .eae__page,
   no browser-chrome viewport switcher, performance-budget widget
   or Lighthouse-style gauge grid from .wad__page, and no App Store
   listing card, platform dot-matrix, device-frame feature lab or
   metro-line release track from .mad__page are reused. Keyframes
   are prefixed ecomKf* so nothing collides with the rest of the
   theme. Nothing in this block leaks to other pages.
   ============================================================ */
.ecom__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.ecom__page .ecom__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.ecom__page .ecom__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.ecom__page .ecom__title {
  font-family: var(--edisplay);
  font-size: 42px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.ecom__page .ecom__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.ecom__page .ecom__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.ecom__page .ecom__text:last-child { margin-bottom: 0; }
.ecom__page .ecom__head { max-width: 780px; }
.ecom__page .ecom__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.ecom__page .ecom__dark { position: relative; overflow: hidden; background: var(--edark); }
.ecom__page .ecom__dark > .container { position: relative; z-index: 1; }
.ecom__page .ecom__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 440px at 90% -10%, rgba(15, 139, 125, .28), transparent 60%),
              radial-gradient(680px 380px at 0% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.ecom__page .ecom__dark .ecom__eyebrow { color: var(--eg3); }
.ecom__page .ecom__dark .ecom__title { color: #fff; }
.ecom__page .ecom__dark .ecom__text { color: var(--emuted); }

.ecom__page .ecom__btn,
.ecom__page .ecom__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.ecom__page .ecom__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.ecom__page .ecom__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.ecom__page .ecom__btn-outline { color: var(--eh); border: 2px solid var(--eb); background: transparent; }
.ecom__page .ecom__btn-outline:hover { background: var(--eh); border-color: var(--eh); color: #fff; }

.ecom__page .ecom__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(15, 139, 125, .1);
  color: var(--eg);
  font-size: 19px;
  margin-bottom: 16px;
}

.ecom__page .ecom__mark {
  position: relative;
  display: inline-block;
  color: var(--eg);
}
.ecom__page .ecom__mark::before,
.ecom__page .ecom__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .55;
  font-size: .68em;
  position: relative;
  top: -.12em;
}
.ecom__page .ecom__mark::before { content: "["; margin-right: 2px; }
.ecom__page .ecom__mark::after { content: "]"; margin-left: 2px; }


/* ---------- 01. Hero: exploded-view storefront rig over a commerce engine ---------- */
.ecom__hero { position: relative; overflow: hidden; background: var(--edark); padding: 190px 0 110px; }
.ecom__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(880px 460px at 8% -10%, rgba(15, 139, 125, .32), transparent 60%),
              radial-gradient(700px 400px at 98% 106%, rgba(224, 153, 61, .18), transparent 62%);
}
.ecom__hero .container { position: relative; z-index: 2; }
.ecom__hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: center; }

.ecom__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  background: rgba(53, 183, 163, .12);
  border: 1px solid rgba(53, 183, 163, .3);
  border-radius: 30px;
  padding: 9px 18px;
  margin-bottom: 26px;
}
.ecom__hero-title { font-family: var(--edisplay); font-size: 50px; line-height: 1.16; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.ecom__hero .ecom__mark { color: var(--eg3); }
.ecom__hero-lead { font-size: 17.5px; line-height: 1.8; color: var(--emuted); max-width: 560px; margin: 0 0 34px; }
.ecom__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }
.ecom__hero .ecom__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.ecom__hero .ecom__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.ecom__hero-facts { display: flex; flex-wrap: wrap; gap: 34px; }
.ecom__hero-fact { max-width: 210px; }
.ecom__hero-fact b { display: block; font-family: var(--edisplay); font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ecom__hero-fact span { font-size: 13px; line-height: 1.6; color: var(--emuted); }

.ecom__hero-figure { display: flex; justify-content: center; }

.ecom__rig {
  position: relative;
  width: 100%;
  max-width: 440px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  background: #fff;
}
.ecom__rig-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--eg), var(--eg2));
  border-radius: 0 3px 3px 0;
}
.ecom__rig-progress.is-running { animation: ecomProgressFill 4.2s linear; }
.ecom__rig.is-paused .ecom__rig-progress { animation-play-state: paused; }
@keyframes ecomProgressFill { from { width: 0%; } to { width: 100%; } }
.ecom__rig-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  background: var(--edark2);
}
.ecom__rig-file { font-family: var(--emono); font-size: 11px; letter-spacing: .5px; color: var(--emuted); }
.ecom__rig-orders { font-family: var(--emono); font-size: 11px; color: var(--emuted); }
.ecom__rig-orders b { color: var(--eg3); font-weight: 600; }

/* Storefront surface */
.ecom__surface { position: relative; padding: 20px 22px 18px; background: #fff; }
.ecom__surface-tag {
  display: inline-block;
  font-family: var(--emono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--eg);
  background: rgba(15, 139, 125, .08);
  border-radius: 20px;
  padding: 4px 11px;
  margin-bottom: 14px;
}
.ecom__pdp { display: flex; align-items: center; gap: 16px; }
.ecom__pdp-media {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 12px;
  background: var(--ebg);
  border: 1px solid var(--eb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--et);
  font-size: 20px;
}
.ecom__pdp-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ecom__pdp-name { font-family: var(--edisplay); font-size: 14.5px; font-weight: 700; color: var(--eh); }
.ecom__pdp-price { font-size: 13px; color: var(--et); margin-bottom: 4px; }
.ecom__pdp-btn {
  position: relative;
  align-self: flex-start;
  font-family: var(--edisplay);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--eg);
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .25s ease;
}
.ecom__pdp-btn:hover { background: var(--eg2); }
.ecom__pdp-btn:disabled { background: var(--eg2); opacity: 1; cursor: default; }
.ecom__rig:not(.is-paused) .ecom__pdp-btn:not(:disabled) { animation: ecomBtnCountdown 4.2s ease-in-out infinite; }
@keyframes ecomBtnCountdown {
  0%, 80% { box-shadow: 0 0 0 0 rgba(15, 139, 125, 0); }
  92% { box-shadow: 0 0 0 6px rgba(15, 139, 125, .35); }
  100% { box-shadow: 0 0 0 0 rgba(15, 139, 125, 0); }
}
.ecom__pdp-btn.is-pressed { animation: ecomBtnPress .3s ease; }
@keyframes ecomBtnPress {
  0% { transform: scale(1); }
  40% { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* Seam: the exploded-view stitch between surface and engine */
.ecom__seam { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 0; background: var(--ebg); }
.ecom__seam span { width: 5px; height: 5px; border-radius: 50%; background: var(--eb); }

/* Commerce engine readout */
.ecom__engine { padding: 20px 22px 18px; background: var(--edark2); }
.ecom__engine-tag {
  display: inline-block;
  font-family: var(--emono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--eg3);
  background: rgba(53, 183, 163, .12);
  border-radius: 20px;
  padding: 4px 11px;
  margin-bottom: 14px;
}
.ecom__engine-rows { display: flex; flex-direction: column; gap: 8px; }
.ecom__engine-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: background .3s ease, border-color .3s ease;
}
.ecom__engine-row i { flex: 0 0 auto; width: 26px; text-align: center; color: var(--emuted); font-size: 13px; }
.ecom__engine-row span { flex: 1 1 auto; font-size: 12.5px; color: #fff; }
.ecom__engine-row em { flex: 0 0 auto; font-style: normal; font-family: var(--emono); font-size: 10.5px; color: var(--emuted); }
.ecom__engine-row.is-active { background: rgba(53, 183, 163, .14); border-color: rgba(53, 183, 163, .4); }
.ecom__engine-row.is-active i { color: var(--eg3); }
.ecom__engine-row.is-active em { color: var(--eg3); }

.ecom__rig-toast {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  font-family: var(--emono);
  font-size: 11px;
  color: var(--edark);
  background: #fff;
  border-radius: 20px;
  padding: 8px 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
  transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
  z-index: 3;
}
.ecom__rig-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.ecom__rig-note {
  display: block;
  text-align: center;
  font-family: var(--emono);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--emuted);
  opacity: .7;
  padding: 12px 20px 16px;
  background: var(--edark2);
}


/* ---------- 02. Introduction: copy + commerce platform spectrum ---------- */
.ecom__intro { padding: 130px 0; background: #fff; }
.ecom__intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 70px; align-items: start; }
.ecom__intro-note {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--et);
  background: var(--ebg);
  border-left: 3px solid var(--eg);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}
.ecom__intro-note a { color: var(--eg); font-weight: 600; }

.ecom__spectrum { background: var(--ebg); border: 1px solid var(--eb); border-radius: 18px; padding: 32px; }
.ecom__spectrum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--emono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 30px;
}
.ecom__spectrum-head i { color: var(--eg2); font-size: 16px; }

.ecom__spectrum-track { position: relative; height: 2px; background: var(--eb); margin: 0 10px 0; }
.ecom__spectrum-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--eg), var(--eg3)); }
.ecom__spectrum-point {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ecom__spectrum-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid var(--eg); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.ecom__spectrum-point:hover .ecom__spectrum-dot { transform: scale(1.12); }
.ecom__spectrum-point.is-active .ecom__spectrum-dot { background: var(--eg); border-color: var(--eg); }

.ecom__spectrum-rows { margin-top: 34px; }
.ecom__spectrum-row { display: none; }
.ecom__spectrum-row.is-active { display: block; animation: ecomKfFade .3s ease; }
.ecom__spectrum-row b { display: block; font-family: var(--edisplay); font-size: 16px; font-weight: 700; color: var(--eh); margin-bottom: 8px; }
.ecom__spectrum-row p { font-size: 13.5px; line-height: 1.7; color: var(--et); margin: 0; }
@keyframes ecomKfFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.ecom__spectrum-note { font-size: 12.5px; line-height: 1.7; color: var(--et); opacity: .85; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--eb); }


/* ---------- 03. Capabilities: asymmetric bento grid ---------- */
.ecom__capabilities { padding: 130px 0; background: var(--ebg); }
.ecom__bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; grid-auto-flow: dense; gap: 22px; }
.ecom__bento-card {
  background: #fff;
  border: 1px solid var(--eb);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.ecom__bento-card h3 { font-family: var(--edisplay); font-size: 16.5px; font-weight: 700; color: var(--eh); margin: 0 0 10px; }
.ecom__bento-card p { font-size: 13.5px; line-height: 1.7; color: var(--et); margin: 0; }

.ecom__bento-card--feature {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
  justify-content: flex-end;
}
.ecom__bento-media { height: 320px; overflow: hidden; background: var(--eb); }
.ecom__bento-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ecom__bento-card--feature .ecom__bento-body { padding: 26px 30px 32px; }
.ecom__bento-card--feature h3 { font-size: 21px; }
.ecom__bento-card--feature p { font-size: 14.5px; max-width: 520px; }


/* ---------- 04. Proof band: pull-quote statement + stat callouts ---------- */
.ecom__proof { position: relative; }
.ecom__proof-media { width: 100%; height: 600px; overflow: hidden; }
.ecom__proof-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ecom__proof-inner { position: relative; background: var(--edark); padding: 70px 0 80px; }
.ecom__proof-head { max-width: 640px; margin: 0 auto 50px; text-align: center; }
.ecom__proof-head h2 { font-family: var(--edisplay); font-size: 34px; font-weight: 700; letter-spacing: -.4px; color: #fff; margin: 0; line-height: 1.3; }
.ecom__proof-head .ecom__eyebrow { color: var(--eg3); }
.ecom__proof-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  overflow: hidden;
}
.ecom__proof-statement {
  grid-column: span 2;
  background: var(--edark2);
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.ecom__proof-statement i { color: var(--eg3); font-size: 16px; opacity: .7; }
.ecom__proof-statement p { font-family: var(--edisplay); font-size: 15.5px; font-weight: 500; line-height: 1.6; color: #fff; margin: 0; }
.ecom__proof-stat { background: var(--edark); padding: 30px 26px; }
.ecom__proof-stat b { display: block; font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ecom__proof-stat span { font-size: 13px; line-height: 1.55; color: var(--emuted); }


/* ---------- 05. Delivery journey: order-receipt line items ---------- */
.ecom__journey { padding: 130px 0; background: var(--ebg); }
.ecom__receipt { position: relative; max-width: 640px; margin: 0 auto; }
.ecom__receipt-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 30px;
  background: rgba(15, 139, 125, .16);
  border: 1px solid rgba(15, 139, 125, .28);
  transform: translateX(-50%) rotate(-2deg);
  z-index: 2;
}
.ecom__receipt-paper {
  position: relative;
  background: #fff;
  padding: 44px 40px 34px;
  box-shadow: 0 30px 60px -20px rgba(18, 24, 27, .18);
  transform: rotate(-.4deg);
}
.ecom__receipt-paper::before,
.ecom__receipt-paper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 11px;
  background-image: radial-gradient(circle at 12px 50%, var(--ebg) 6px, transparent 6.5px);
  background-size: 24px 11px;
  background-repeat: repeat-x;
}
.ecom__receipt-paper::before { top: -1px; }
.ecom__receipt-paper::after { bottom: -1px; transform: scaleY(-1); }
.ecom__receipt-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ecom__receipt-store { font-family: var(--edisplay); font-size: 15px; font-weight: 700; letter-spacing: 1.5px; color: var(--eh); }
.ecom__receipt-meta { font-family: var(--emono); font-size: 11px; letter-spacing: .5px; color: var(--et); }
.ecom__receipt-rule { border-top: 1px solid var(--eb); margin: 24px 0; }
.ecom__receipt-rule--dashed { border-top-style: dashed; }
.ecom__receipt-items { display: flex; flex-direction: column; }
.ecom__receipt-item { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px dashed var(--eb); }
.ecom__receipt-item:first-child { padding-top: 0; }
.ecom__receipt-item:last-child { border-bottom: none; padding-bottom: 0; }
.ecom__receipt-qty { flex: 0 0 52px; font-family: var(--emono); font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--eg); padding-top: 3px; }
.ecom__receipt-body { flex: 1; min-width: 0; }
.ecom__receipt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.ecom__receipt-row h3 { font-family: var(--edisplay); font-size: 15.5px; font-weight: 700; color: var(--eh); margin: 0; }
.ecom__receipt-tag { flex: 0 0 auto; font-family: var(--emono); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.ecom__receipt-tag--a { color: var(--eg); background: rgba(15, 139, 125, .1); }
.ecom__receipt-tag--b { color: var(--eg2); background: rgba(224, 153, 61, .12); }
.ecom__receipt-tag--c { color: var(--eg3); background: rgba(53, 183, 163, .12); }
.ecom__receipt-item p { font-size: 13.5px; line-height: 1.7; color: var(--et); margin: 0; }
.ecom__receipt-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--emono); font-size: 12px; letter-spacing: .5px; color: var(--et); }
.ecom__receipt-total-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--eg); }
.ecom__receipt-barcode {
  height: 42px;
  margin-top: 26px;
  background-image: repeating-linear-gradient(90deg, var(--eh) 0 2px, transparent 2px 5px, var(--eh) 5px 6px, transparent 6px 9px, var(--eh) 9px 12px, transparent 12px 15px, var(--eh) 15px 16px, transparent 16px 20px);
  opacity: .82;
}
.ecom__receipt-foot { margin-top: 14px; text-align: center; font-family: var(--emono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--et); opacity: .85; }


/* ---------- 06. Why 3Shadz: dark scan-log readout ---------- */
.ecom__why { padding: 130px 0; }
.ecom__scanlog { position: relative; max-width: 860px; margin: 0 auto; padding-left: 32px; }
.ecom__scanlog::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 4px;
  width: 1px;
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .28) 0 4px, transparent 4px 10px);
}
.ecom__scanlog-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: padding-left .25s ease;
}
.ecom__scanlog-row:first-child { padding-top: 0; }
.ecom__scanlog-row:last-child { border-bottom: none; padding-bottom: 0; }
.ecom__scanlog-row:hover { padding-left: 10px; }
.ecom__scanlog-mark {
  position: absolute;
  left: -32px;
  top: 30px;
  width: 9px;
  height: 9px;
  background: var(--eg3);
  box-shadow: 0 0 0 4px rgba(53, 183, 163, .15);
  transition: transform .25s ease;
}
.ecom__scanlog-row:nth-child(3n+2) .ecom__scanlog-mark { background: var(--eg2); box-shadow: 0 0 0 4px rgba(224, 153, 61, .15); }
.ecom__scanlog-row:nth-child(3n) .ecom__scanlog-mark { background: var(--eg); box-shadow: 0 0 0 4px rgba(15, 139, 125, .15); }
.ecom__scanlog-row:hover .ecom__scanlog-mark { transform: scale(1.5); }
.ecom__scanlog-idx { flex: 0 0 auto; font-family: var(--emono); font-size: 12.5px; letter-spacing: 1px; color: var(--eg3); opacity: .85; padding-top: 4px; }
.ecom__scanlog-body h3 { font-family: var(--edisplay); font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.ecom__scanlog-body p { font-size: 14.5px; line-height: 1.75; color: var(--emuted); margin: 0; max-width: 600px; }


/* ---------- 07. Commerce toolkit: platforms + integrations hub ---------- */
.ecom__stack { padding: 130px 0; background: #fff; }
.ecom__hub { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.ecom__hub-col h4 { font-family: var(--edisplay); font-size: 14px; font-weight: 700; color: var(--eh); margin: 0 0 16px; }
.ecom__hub-col--right { text-align: right; }
.ecom__hub-tags { display: flex; flex-direction: column; gap: 8px; }
.ecom__hub-col--right .ecom__hub-tags { align-items: flex-end; }
.ecom__hub-tags span {
  display: inline-block;
  align-self: flex-start;
  font-size: 12.5px;
  color: var(--eh);
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 8px;
  padding: 8px 14px;
}
.ecom__hub-col--right .ecom__hub-tags span { align-self: flex-end; }

.ecom__hub-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}
.ecom__hub-core::before,
.ecom__hub-core::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--eg) 0 6px, transparent 6px 12px);
}
.ecom__hub-core::before { right: 100%; }
.ecom__hub-core::after { left: 100%; }
.ecom__hub-core-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--eg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 14px 30px rgba(15, 139, 125, .3);
}
.ecom__hub-core-label { font-family: var(--emono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--et); white-space: nowrap; }


/* ---------- 08. FAQ ---------- */
.ecom__faq { padding: 40px 0 130px; background: #fff; }
.ecom__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ecom__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.ecom__faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: none; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); cursor: pointer; }
.ecom__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.ecom__faq-item.is-open .ecom__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.ecom__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.ecom__faq-item.is-open .ecom__faq-a { max-height: 260px; }
.ecom__faq-a p { margin: 0; padding: 0 26px 22px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .ecom__hero-title { font-size: 42px; }
  .ecom__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .ecom__rig { max-width: 460px; margin: 0 auto; }
  .ecom__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .ecom__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecom__bento-card--feature { grid-column: span 2; }
  .ecom__proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ecom__proof-statement { grid-column: span 3; }
  .ecom__hub { grid-template-columns: 1fr; text-align: center; }
  .ecom__hub-col--right { text-align: center; }
  .ecom__hub-tags, .ecom__hub-col--right .ecom__hub-tags { align-items: center; }
  .ecom__hub-tags span, .ecom__hub-col--right .ecom__hub-tags span { align-self: center; }
  .ecom__hub-core { flex-direction: row; justify-content: center; }
  .ecom__hub-core::before, .ecom__hub-core::after { display: none; }
}

@media (max-width: 991px) {
  .ecom__hero { padding: 160px 0 90px; }
  .ecom__hero-title { font-size: 36px; }
  .ecom__intro, .ecom__capabilities, .ecom__journey, .ecom__why, .ecom__stack { padding: 90px 0; }
  .ecom__proof-media { height: 420px; }
  .ecom__proof-inner { padding: 55px 0 65px; }
  .ecom__faq { padding: 20px 0 90px; }
}

@media (max-width: 767px) {
  .ecom__hero-title { font-size: 30px; }
  .ecom__hero-facts { gap: 24px; }
  .ecom__bento { grid-template-columns: 1fr; }
  .ecom__bento-card--feature { grid-column: span 1; grid-row: span 1; }
  .ecom__bento-media { height: 240px; }
  .ecom__proof-media { height: 300px; }
  .ecom__proof-inner { padding: 45px 0 50px; }
  .ecom__proof-grid { grid-template-columns: 1fr; }
  .ecom__proof-statement { grid-column: span 1; }
  .ecom__receipt-paper { padding: 38px 22px 28px; }
  .ecom__receipt-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ecom__receipt-qty { flex-basis: 40px; }
  .ecom__receipt-total { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ecom__scanlog { padding-left: 24px; }
  .ecom__scanlog-row { gap: 16px; }
  .ecom__scanlog-mark { left: -24px; }
}

@media (max-width: 575px) {
  .ecom__pdp { flex-direction: column; align-items: flex-start; }
  .ecom__rig-toast { bottom: auto; top: 12px; }
}

/* Users who ask for less motion get the page without the engine-row
   pulse sequence delay (the click handler itself checks
   prefers-reduced-motion before staggering the row highlight). */
@media (prefers-reduced-motion: reduce) {
  .ecom__page * { transition-duration: .01ms !important; }
  .ecom__spectrum-row.is-active { animation: none; }
  .ecom__rig-progress,
  .ecom__pdp-btn { animation: none !important; }
}


/* ============================================================
   API DEVELOPMENT & INTEGRATION PAGE (adi__*)
   Scoped entirely to .adi__page (added on <main> of
   api-development-integration.html, a child of Software
   Engineering). Reuses the exact brand palette from .swe__page -
   #0F8B7D teal / #E0993D copper on #0B1613 dark, Sora display over
   Kanit body, IBM Plex Mono for spec labels - so the page reads as
   part of the same service family. Every component is otherwise
   unique to this page: a hero built around a live "integration
   manifest" config-file card with a blinking cursor and a flowing
   signal rail (not a blueprint node inspector, fit-diagnostic SVG,
   platform console, browser-chrome viewport, App Store card,
   product console/MRR ticker or exploded storefront rig from any
   sibling page); a four-tile principle strip; a capability card
   grid; a three-column system-landscape band with 3Shadz's layer
   sitting between "your systems" and "the outside world" (no
   radial hub-and-spoke SVG, hub board or spectrum slider from
   .csd__page / .ecom__page); a without/with governed-layer
   comparison list; a diamond-marker delivery rail; a dark index-
   ledger "why us" list; and a categorised protocol/platform tag
   panel. Keyframes are prefixed adiKf* so nothing collides with
   the rest of the theme. Nothing in this block leaks to other
   pages.
   ============================================================ */
.adi__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.adi__page .adi__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.adi__page .adi__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.adi__page .adi__title {
  font-family: var(--edisplay);
  font-size: 40px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.adi__page .adi__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.adi__page .adi__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.adi__page .adi__text:last-child { margin-bottom: 0; }
.adi__page .adi__head { max-width: 780px; }
.adi__page .adi__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.adi__page .adi__dark { position: relative; overflow: hidden; background: var(--edark); }
.adi__page .adi__dark > .container { position: relative; z-index: 1; }
.adi__page .adi__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 92% -8%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(680px 380px at 4% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.adi__page .adi__dark .adi__eyebrow { color: var(--eg3); }
.adi__page .adi__dark .adi__title { color: #fff; }
.adi__page .adi__dark .adi__lead { color: #eef6f4; }
.adi__page .adi__dark .adi__text { color: var(--emuted); }

.adi__page .adi__btn,
.adi__page .adi__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.adi__page .adi__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.adi__page .adi__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.adi__page .adi__btn-outline { color: var(--eh); border: 2px solid var(--eb); background: transparent; }
.adi__page .adi__btn-outline:hover { background: var(--eh); border-color: var(--eh); color: #fff; }
.adi__page .adi__dark .adi__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.adi__page .adi__dark .adi__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.adi__page .adi__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--eg);
  transition: gap .3s ease, color .3s ease;
}
.adi__page .adi__link:hover { gap: 15px; color: var(--eg2); }

.adi__page .adi__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(15, 139, 125, .1);
  color: var(--eg);
  font-size: 19px;
  margin-bottom: 16px;
}

/* Bracketed "spec" word treatment, using braces instead of the swe
   family's square brackets so it reads like a config/JSON token. */
.adi__page .adi__mark {
  position: relative;
  display: inline-block;
  color: var(--eg);
}
.adi__page .adi__mark::before,
.adi__page .adi__mark::after {
  font-family: var(--emono);
  font-weight: 500;
  opacity: .55;
  font-size: .68em;
  position: relative;
  top: -.12em;
}
.adi__page .adi__mark::before { content: "{"; margin-right: 2px; }
.adi__page .adi__mark::after { content: "}"; margin-left: 2px; }


/* ---------- 01. Hero: live integration manifest ---------- */
.adi__hero {
  position: relative;
  overflow: hidden;
  background: var(--edark);
  padding: 190px 0 110px;
}
.adi__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(880px 460px at 8% -10%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(760px 420px at 100% 100%, rgba(224, 153, 61, .16), transparent 62%);
}
/* Left-edge "signal rail" - flowing dashes standing in for data moving
   through the integration layer; distinct from the swe corner crop marks
   and the csd drafting ruler. */
.adi__hero-rail {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(180deg, var(--eg3) 0, var(--eg3) 10px, transparent 10px, transparent 26px);
  background-size: 3px 52px;
  opacity: .5;
  animation: adiKfFlow 2.4s linear infinite;
  z-index: 1;
}

.adi__hero .container { position: relative; z-index: 2; }
.adi__hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 60px; align-items: center; }

.adi__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .08);
  padding: 9px 16px;
  border-radius: 30px;
  margin-bottom: 26px;
}
.adi__hero-badge i { color: var(--eg2); }

.adi__hero-title { font-family: var(--edisplay); font-size: 52px; line-height: 1.16; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.adi__hero-lead { font-size: 18px; line-height: 1.75; color: #dfeeea; max-width: 560px; margin: 0 0 34px; font-weight: 300; }
.adi__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }
.adi__hero .adi__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.adi__hero .adi__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.adi__hero-stats { display: flex; flex-wrap: wrap; gap: 34px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 26px; }
.adi__hero-stat { max-width: 200px; }
.adi__hero-stat b { display: block; font-family: var(--edisplay); font-size: 18px; font-weight: 700; letter-spacing: .3px; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.adi__hero-stat span { font-size: 13px; line-height: 1.5; color: var(--emuted); }

/* -- Integration manifest: a live "config file" card -- */
.adi__manifest {
  position: relative;
  background: #0E1A17;
  border: 1px solid rgba(53, 183, 163, .25);
  border-radius: 18px;
  padding: 0 0 22px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.adi__manifest-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
}
.adi__manifest-dots { display: inline-flex; gap: 6px; }
.adi__manifest-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-block; }
.adi__manifest-file { font-family: var(--emono); font-size: 12.5px; color: var(--emuted); letter-spacing: .5px; flex: 1; }
.adi__manifest-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--emono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg3); }
.adi__manifest-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--eg3); display: inline-block; animation: adiKfPulse 1.8s ease-in-out infinite; }

.adi__manifest-code {
  margin: 0;
  padding: 22px 24px 6px;
  font-family: var(--emono);
  font-size: 13.5px;
  line-height: 2;
  color: #cfe3de;
  overflow-x: auto;
  white-space: pre;
}
.adi__manifest-code .adi__k { color: #7fd6c4; }
.adi__manifest-code .adi__v { color: #f0b467; }
.adi__manifest-code .adi__c { color: #5a716c; }
.adi__manifest-code .adi__status { color: var(--eg3); font-weight: 600; }
.adi__cursor { display: inline-block; width: 7px; height: 15px; margin-left: 3px; background: var(--eg3); vertical-align: -2px; animation: adiKfCursor 1s step-end infinite; }

.adi__manifest-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 0; }
.adi__manifest-foot span { font-family: var(--emono); font-size: 11px; color: var(--eg3); background: rgba(53, 183, 163, .1); border: 1px solid rgba(53, 183, 163, .25); border-radius: 5px; padding: 5px 10px; }

@keyframes adiKfPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.3); } }
@keyframes adiKfCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes adiKfFlow { from { background-position: 0 0; } to { background-position: 0 52px; } }


/* ---------- 02. Intro + principle strip ---------- */
.adi__intro { padding: 130px 0 90px; background: #fff; }
.adi__intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.adi__intro-note { margin-top: 14px; font-size: 14.5px; line-height: 1.7; color: var(--et); }
.adi__intro-note a { color: var(--eg); font-weight: 600; }

.adi__principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 70px; border-top: 1px solid var(--eb); }
.adi__principle { padding: 34px 28px 10px; border-right: 1px solid var(--eb); }
.adi__principle:last-child { border-right: none; }
.adi__p-num { font-family: var(--emono); font-size: 12px; color: var(--eg); letter-spacing: 1.5px; }
.adi__principle h3 { font-family: var(--edisplay); font-size: 17px; font-weight: 700; color: var(--eh); margin: 10px 0 10px; }
.adi__principle p { font-size: 14px; line-height: 1.7; color: var(--et); margin: 0; }


/* ---------- 03. Capability console: a bordered, two-pane "IDE" widget -
   a light file list on the left driving a dark code-panel on the right,
   echoing the hero manifest's terminal motif instead of a static grid. ---------- */
.adi__caps { padding: 40px 0 130px; background: #fff; }

.adi__console {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  border: 1px solid var(--eb);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ebg);
  box-shadow: 0 30px 70px -40px rgba(18, 24, 27, .28);
}

.adi__console-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--eb); }
.adi__console-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease;
}
.adi__console-item:hover { background: rgba(15, 139, 125, .08); }
.adi__console-item.is-active { background: var(--edark); }
.adi__console-num { font-family: var(--emono); font-size: 11px; color: var(--et); letter-spacing: 1px; }
.adi__console-item.is-active .adi__console-num { color: var(--eg3); }
.adi__console-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(15, 139, 125, .1); color: var(--eg); font-size: 13px;
  transition: background .25s ease, color .25s ease;
}
.adi__console-item.is-active .adi__console-ico { background: rgba(53, 183, 163, .18); color: var(--eg3); }
.adi__console-name { font-family: var(--edisplay); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--eh); }
.adi__console-item.is-active .adi__console-name { color: #fff; }
.adi__console-arrow { font-size: 11px; color: var(--eg3); opacity: 0; transform: translateX(-4px); transition: all .25s ease; }
.adi__console-item.is-active .adi__console-arrow { opacity: 1; transform: translateX(0); }

.adi__console-stage { position: relative; background: var(--edark2); }
.adi__console-panel { display: none; }
.adi__console-panel.is-active { display: block; animation: adiKfPanelIn .4s ease; }
.adi__console-panel-top { display: flex; align-items: center; gap: 14px; padding: 18px 30px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.adi__console-dots { display: inline-flex; gap: 6px; }
.adi__console-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-block; }
.adi__console-path { font-family: var(--emono); font-size: 12.5px; color: var(--emuted); letter-spacing: .3px; flex: 1; }
.adi__console-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--emono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg3); }
.adi__console-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--eg3); display: inline-block; animation: adiKfPulse 1.8s ease-in-out infinite; }
.adi__console-panel-body { padding: 34px 40px 40px; }
.adi__console-panel-body h3 { font-family: var(--edisplay); font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.adi__console-panel-body > p { font-size: 15px; line-height: 1.75; color: var(--emuted); max-width: 620px; margin: 0 0 28px; font-weight: 300; }
.adi__console-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.adi__console-list li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14.5px; font-weight: 300; line-height: 1.5; color: #dfeeea; }
.adi__console-list li span { flex: 0 0 auto; font-family: var(--emono); font-size: 12px; color: var(--eg3); }

@keyframes adiKfPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 991px) {
  .adi__console { grid-template-columns: minmax(0, 1fr); }
  .adi__console-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--eb); }
  .adi__console-item { flex: 0 0 auto; min-width: 230px; grid-template-columns: auto auto 1fr; }
  .adi__console-arrow { display: none; }
  .adi__console-panel-body { padding: 30px 26px 34px; }
}
@media (max-width: 575px) {
  .adi__console-item { min-width: 210px; padding: 13px 12px; }
  .adi__console-panel-top { padding: 16px 22px; }
  .adi__console-panel-body { padding: 26px 20px 30px; }
  .adi__console-panel-body h3 { font-size: 21px; }
}


/* ---------- 04. System landscape band ---------- */
.adi__landscape { padding: 130px 0; background: var(--edark); position: relative; overflow: hidden; }
.adi__landscape::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 50% 0%, rgba(15, 139, 125, .18), transparent 65%); }
.adi__landscape .container { position: relative; z-index: 1; }
.adi__landscape .adi__eyebrow { color: var(--eg3); }
.adi__landscape .adi__title { color: #fff; }
.adi__landscape .adi__text { color: var(--emuted); }

.adi__land-row { display: flex; align-items: center; gap: 24px; margin-top: 60px; }
.adi__land-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; }
.adi__land-col-label { font-family: var(--emono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--emuted); margin-bottom: 6px; }
.adi__land-chip { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #eef6f4; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; padding: 12px 16px; }
.adi__land-chip i { color: var(--eg3); font-size: 13px; }
.adi__land-col--right .adi__land-chip i { color: var(--eg2); }

.adi__land-arrow { flex: 0 0 auto; font-size: 16px; color: var(--eg2); opacity: .7; }
.adi__land-core { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; text-align: center; }
.adi__land-core-badge { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--eg3); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--eg3); background: rgba(53, 183, 163, .08); position: relative; }
.adi__land-core-badge::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(53, 183, 163, .35); animation: adiKfSpin 18s linear infinite; }
.adi__land-core-label { font-family: var(--edisplay); font-weight: 700; font-size: 14.5px; color: #fff; line-height: 1.4; }

@keyframes adiKfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* ---------- 05. Without / with comparison ---------- */
.adi__compare { padding: 130px 0; background: #fff; }
.adi__compare-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--eb); border-radius: 18px; overflow: hidden; }
.adi__compare-col { padding: 40px 40px 34px; }
.adi__compare-col + .adi__compare-col { border-left: 1px solid var(--eb); }
.adi__compare-col--before { background: var(--ebg); }
.adi__compare-col--after { background: var(--edark); }
.adi__compare-head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.adi__compare-head i { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.adi__compare-col--before .adi__compare-head i { background: rgba(92, 107, 106, .12); color: var(--et); }
.adi__compare-col--after .adi__compare-head i { background: rgba(53, 183, 163, .16); color: var(--eg3); }
.adi__compare-head h3 { font-family: var(--edisplay); font-size: 17px; font-weight: 700; margin: 0; }
.adi__compare-col--before .adi__compare-head h3 { color: var(--eh); }
.adi__compare-col--after .adi__compare-head h3 { color: #fff; }
.adi__compare-list { display: flex; flex-direction: column; gap: 16px; margin: 0; list-style: none; padding: 0; }
.adi__compare-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; }
.adi__compare-col--before .adi__compare-list li { color: var(--et); }
.adi__compare-col--after .adi__compare-list li { color: var(--emuted); }
.adi__compare-list li i { margin-top: 4px; font-size: 12px; flex: 0 0 auto; }
.adi__compare-col--before .adi__compare-list li i { color: var(--eg2); opacity: .8; }
.adi__compare-col--after .adi__compare-list li i { color: var(--eg3); }


/* ---------- 06. Delivery rail ---------- */
.adi__process { padding: 130px 0; background: var(--ebg); }
.adi__proc-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 20px; }
.adi__proc-track::before { content: ""; position: absolute; top: 26px; left: 4%; right: 4%; height: 2px; background: var(--eb); }
.adi__proc-stage { position: relative; padding: 0 14px; text-align: center; }
.adi__proc-node { position: relative; width: 40px; height: 40px; margin: 6px auto 22px; background: #fff; border: 2px solid var(--eg); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; z-index: 1; }
.adi__proc-node span { transform: rotate(-45deg); font-family: var(--emono); font-weight: 700; font-size: 13px; color: var(--eg); }
.adi__proc-stage:last-child .adi__proc-node { background: var(--eg); }
.adi__proc-stage:last-child .adi__proc-node span { color: #fff; }
.adi__proc-stage h3 { font-family: var(--edisplay); font-size: 15.5px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.adi__proc-stage p { font-size: 13px; line-height: 1.6; color: var(--et); margin: 0; }


/* ---------- 07. Why 3Shadz: asymmetric trust grid, not a numbered
   row ledger - two wide "bookend" tiles brick against four narrow ones,
   each lit by a growing top rule instead of a border-divided list. ---------- */
.adi__why { padding: 130px 0; }
.adi__trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.adi__trust-card {
  position: relative;
  grid-column: span 1;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  overflow: hidden;
  transition: border-color .3s ease, background .3s ease;
}
.adi__trust-card--wide { grid-column: span 2; }
.adi__trust-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 2px;
  background: var(--eg3);
  transition: width .4s ease;
}
.adi__trust-card:hover { border-color: rgba(53, 183, 163, .35); background: linear-gradient(160deg, rgba(53, 183, 163, .1), rgba(255, 255, 255, .02)); }
.adi__trust-card:hover::before { width: 100%; }
.adi__trust-tag { display: inline-block; font-family: var(--emono); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; color: var(--eg3); opacity: .85; margin-bottom: 16px; }
.adi__trust-card h3 { font-family: var(--edisplay); font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.adi__trust-card p { font-size: 14.5px; line-height: 1.7; color: var(--emuted); margin: 0; }


/* ---------- 08. Protocols, security & platforms: cascading layer stack -
   a diagonal, connected-rail diagram instead of a tag-register list or a
   tidy tag-card grid, each row stepping further right than the last. ---------- */
.adi__stack { padding: 130px 0; background: #fff; }
.adi__layers { position: relative; max-width: 860px; margin: 0 auto; }
.adi__layer { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 28px; }
.adi__layer-rail { position: relative; display: flex; justify-content: center; }
.adi__layer-rail::before {
  content: "";
  position: absolute;
  top: 22px; bottom: -34px;
  width: 1.5px;
  background: var(--eb);
}
.adi__layer:last-child .adi__layer-rail::before { display: none; }
.adi__layer-dot { width: 11px; height: 11px; margin-top: 17px; border-radius: 50%; background: var(--eg); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--eb); z-index: 1; }
.adi__layer-body { padding-bottom: 40px; }
.adi__layer:nth-child(1) .adi__layer-body { margin-left: 0; }
.adi__layer:nth-child(2) .adi__layer-body { margin-left: 22px; }
.adi__layer:nth-child(3) .adi__layer-body { margin-left: 44px; }
.adi__layer:nth-child(4) .adi__layer-body { margin-left: 66px; }
.adi__layer:nth-child(5) .adi__layer-body { margin-left: 88px; }
.adi__layer:last-child .adi__layer-body { padding-bottom: 0; }
.adi__layer-label { display: block; font-family: var(--emono); font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--eg); margin-bottom: 8px; }
.adi__layer-body h3 { font-family: var(--edisplay); font-size: 18px; font-weight: 700; color: var(--eh); margin: 0 0 14px; }
.adi__layer-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.adi__layer-tags span { font-family: var(--emono); font-size: 12.5px; color: var(--et); background: var(--ebg); border: 1px solid var(--eb); border-radius: 6px; padding: 6px 12px; }


/* ---------- 09. FAQ ---------- */
.adi__faq { padding: 40px 0 130px; background: #fff; }
.adi__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.adi__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.adi__faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: none; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); cursor: pointer; }
.adi__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.adi__faq-item.is-open .adi__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.adi__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.adi__faq-item.is-open .adi__faq-a { max-height: 280px; }
.adi__faq-a p { margin: 0; padding: 0 26px 22px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .adi__hero-title { font-size: 44px; }
  .adi__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .adi__manifest { max-width: 560px; margin: 0 auto; }
  .adi__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adi__principle:nth-child(2) { border-right: none; }
  .adi__principle { border-bottom: 1px solid var(--eb); }
  .adi__land-row { flex-direction: column; }
  .adi__land-arrow { transform: rotate(90deg); }
  .adi__compare-grid { grid-template-columns: 1fr; }
  .adi__compare-col + .adi__compare-col { border-left: none; border-top: 1px solid var(--eb); }
  .adi__proc-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .adi__proc-track::before { display: none; }
}

@media (max-width: 991px) {
  .adi__hero { padding: 160px 0 90px; }
  .adi__hero-title { font-size: 36px; }
  .adi__intro, .adi__process, .adi__why, .adi__stack, .adi__landscape, .adi__compare { padding: 90px 0; }
  .adi__caps { padding: 20px 0 90px; }
  .adi__faq { padding: 20px 0 90px; }
  .adi__trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adi__trust-card--wide { grid-column: span 2; }
}

@media (max-width: 767px) {
  .adi__hero-title { font-size: 30px; }
  .adi__hero-stats { gap: 24px; }
  .adi__principles { grid-template-columns: 1fr; }
  .adi__principle { border-right: none !important; }
  .adi__trust-grid { grid-template-columns: 1fr; }
  .adi__trust-card--wide { grid-column: span 1; }
  .adi__layer { grid-template-columns: 26px 1fr; column-gap: 18px; }
  .adi__layer:nth-child(1) .adi__layer-body,
  .adi__layer:nth-child(2) .adi__layer-body,
  .adi__layer:nth-child(3) .adi__layer-body,
  .adi__layer:nth-child(4) .adi__layer-body,
  .adi__layer:nth-child(5) .adi__layer-body { margin-left: 0; }
  .adi__compare-col { padding: 32px 26px; }
}

@media (max-width: 575px) {
  .adi__hero-rail { display: none; }
}

/* Users who ask for less motion get the page without the ambient
   cursor blink, live-status pulse, rail flow or core-badge spin. */
@media (prefers-reduced-motion: reduce) {
  .adi__cursor, .adi__manifest-live i, .adi__hero-rail, .adi__land-core-badge::after { animation: none; }
  .adi__page * { transition-duration: .01ms !important; }
}


/* ============================================================
   APPLICATION MODERNIZATION PAGE (application-modernization.html)
   Scoped entirely to .apm__page (added on <main> of
   application-modernization.html, a child of Software
   Engineering, sibling of API Development & Integration). Reuses
   the exact brand palette from .swe__page / .adi__page - #0F8B7D
   teal / #E0993D copper on #0B1613 dark, Sora display over Kanit
   body, IBM Plex Mono for spec labels - so the family reads as one
   site. Every component is otherwise unique to this page: a hero
   built as a live "system diagnostic console" with a Legacy /
   Modernized toggle that flips five architecture-layer rows
   (experience, integration, application, data, infrastructure)
   between their before/after state and swaps a modernization-score
   readout; an underline-highlight word mark instead of the bracket
   or brace treatment used elsewhere; a two-column intro paired with
   a dashed "readiness signals" ticket list instead of a numbered
   spec card or principle grid; an asymmetric bento capability grid
   with one lead tile instead of equal cards or layered drawers; a
   clickable horizontal "modernization pathways" spectrum (Rehost /
   Replatform / Refactor / Rearchitect / Rebuild) with a swapping
   readout panel; an image-placeholder proof band paired with a
   pull-quote; a without/with risk comparison; and a numbered
   delivery rail. No blueprint node inspector, layer-stack drawers
   or CI pipeline track from .swe__page, no integration manifest,
   system-landscape hub board or protocol tag grid from .adi__page,
   no platform console, complexity meter or governance pill strip
   from .eae__page, no product console, MRR ticker or tenancy chips
   from .saas__page, and no exploded storefront rig or hub-and-spoke
   diagram from .ecom__page are reused. Keyframes are prefixed
   apmKf* so nothing collides with the rest of the theme. Nothing in
   this block leaks to other pages.
   ============================================================ */
.apm__page {
  --eg: #0F8B7D;
  --eg2: #E0993D;
  --eg3: #35B7A3;
  --eh: #12181B;
  --et: #5C6B6A;
  --eb: #DCE6E3;
  --ebg: #F3F6F5;
  --edark: #0B1613;
  --edark2: #101E1A;
  --emuted: #A9C4BE;
  --emono: "IBM Plex Mono", monospace;
  --edisplay: "Sora", sans-serif;
  --ewarn: #E2574C;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.apm__page .apm__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eg);
  margin-bottom: 18px;
}
.apm__page .apm__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--eg2);
  display: inline-block;
}
.apm__page .apm__title {
  font-family: var(--edisplay);
  font-size: 42px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--eh);
  margin: 0 0 20px;
}
.apm__page .apm__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--eh); margin: 0 0 18px; }
.apm__page .apm__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--et); margin: 0 0 16px; }
.apm__page .apm__text:last-child { margin-bottom: 0; }
.apm__page .apm__head { max-width: 780px; }
.apm__page .apm__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.apm__page .apm__dark { position: relative; overflow: hidden; background: var(--edark); }
.apm__page .apm__dark > .container { position: relative; z-index: 1; }
.apm__page .apm__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 92% -8%, rgba(15, 139, 125, .30), transparent 60%),
              radial-gradient(680px 380px at 4% 108%, rgba(224, 153, 61, .16), transparent 62%);
}
.apm__page .apm__dark .apm__eyebrow { color: var(--eg3); }
.apm__page .apm__dark .apm__title { color: #fff; }
.apm__page .apm__dark .apm__text { color: var(--emuted); }

.apm__page .apm__btn,
.apm__page .apm__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.apm__page .apm__btn { color: #fff; background: var(--eg); border: 2px solid var(--eg); }
.apm__page .apm__btn:hover { background: var(--eg2); border-color: var(--eg2); color: #fff; }
.apm__page .apm__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.apm__page .apm__btn-outline:hover { background: #fff; border-color: #fff; color: var(--edark); }

.apm__page .apm__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(15, 139, 125, .1);
  color: var(--eg);
  font-size: 19px;
  margin-bottom: 16px;
}

/* Underline-highlight word treatment used in headings - a diagnostic
   "scan sweep" under the word rather than a bracket or brace glyph,
   so this page reads distinctly from .swe__mark / .adi__mark. */
.apm__page .apm__mark {
  position: relative;
  display: inline-block;
  color: var(--eg3);
}
.apm__page .apm__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.06em;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--eg2), var(--eg3));
}


/* ---------- 01. Hero: diagnostic console with Legacy / Modernized toggle ---------- */
.apm__hero {
  position: relative;
  overflow: hidden;
  background: var(--edark);
  padding: 190px 0 110px;
}
.apm__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(880px 460px at 90% -10%, rgba(15, 139, 125, .32), transparent 60%),
              radial-gradient(700px 400px at 0% 106%, rgba(224, 153, 61, .18), transparent 62%);
}
/* Slow diagonal scan sweep across the hero field - a diagnostic cue
   distinct from the crop marks (swe), manifest rail (adi) and
   product-console chrome (saas) used on other custom pages. */
.apm__hero-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  left: -220px;
  background: linear-gradient(90deg, transparent, rgba(53, 183, 163, .08), transparent);
  animation: apmKfScan 9s linear infinite;
  pointer-events: none;
}
.apm__hero .container { position: relative; z-index: 2; }
.apm__hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 60px; align-items: center; }

.apm__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--eg3);
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .08);
  padding: 9px 16px;
  border-radius: 30px;
  margin-bottom: 26px;
}
.apm__hero-badge i { color: var(--eg2); }

.apm__hero-title { font-family: var(--edisplay); font-size: 52px; line-height: 1.16; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.apm__hero-lead { font-size: 18px; line-height: 1.75; color: #dfeeea; max-width: 560px; margin: 0 0 34px; font-weight: 300; }
.apm__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }

.apm__hero-stats { display: flex; flex-wrap: wrap; gap: 34px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 26px; }
.apm__hero-stat { max-width: 200px; }
.apm__hero-stat b { display: block; font-family: var(--edisplay); font-size: 18px; font-weight: 700; letter-spacing: .3px; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.apm__hero-stat span { font-size: 13px; line-height: 1.5; color: var(--emuted); }

/* -- Diagnostic console: a light panel floating on the dark hero -- */
.apm__console {
  position: relative;
  overflow: hidden;
  background: var(--ebg);
  border: 1px solid var(--eb);
  border-radius: 18px;
  padding: 24px 24px 22px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  animation: apmConsoleReveal .7s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes apmConsoleReveal {
  0% { opacity: 0; transform: translateY(24px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.apm__console-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--eg), var(--eg2));
  border-radius: 0 3px 3px 0;
}
.apm__console-progress.is-running { animation: apmProgressFill 3s linear; }
.apm__console.is-paused .apm__console-progress { animation-play-state: paused; }
@keyframes apmProgressFill { from { width: 0%; } to { width: 100%; } }

.apm__console-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.apm__console-dots { display: inline-flex; gap: 6px; }
.apm__console-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--eb); display: inline-block; opacity: .35; }
.apm__console-dots span:nth-child(1) { background: var(--ewarn); }
.apm__console-dots span:nth-child(2) { background: var(--eg2); }
.apm__console-dots span:nth-child(3) { background: var(--eg3); }
.apm__console:not(.is-paused) .apm__console-dots span:nth-child(1) { animation: apmDotBlink1 2.4s ease-in-out infinite; }
.apm__console:not(.is-paused) .apm__console-dots span:nth-child(2) { animation: apmDotBlink2 2.4s ease-in-out .3s infinite; }
.apm__console:not(.is-paused) .apm__console-dots span:nth-child(3) { animation: apmDotBlink3 2.4s ease-in-out .6s infinite; }
@keyframes apmDotBlink1 { 0%, 100% { opacity: .35; box-shadow: 0 0 0 0 rgba(226, 87, 76, 0); } 40% { opacity: 1; box-shadow: 0 0 6px 1px rgba(226, 87, 76, .7); } }
@keyframes apmDotBlink2 { 0%, 100% { opacity: .35; box-shadow: 0 0 0 0 rgba(224, 153, 61, 0); } 40% { opacity: 1; box-shadow: 0 0 6px 1px rgba(224, 153, 61, .7); } }
@keyframes apmDotBlink3 { 0%, 100% { opacity: .35; box-shadow: 0 0 0 0 rgba(53, 183, 163, 0); } 40% { opacity: 1; box-shadow: 0 0 6px 1px rgba(53, 183, 163, .7); } }
.apm__console-file { font-family: var(--emono); font-size: 12px; color: var(--et); letter-spacing: .5px; }
.apm__console-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--emono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eg); transition: color .3s ease; }
.apm__console-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--eg); animation: apmKfPulse 1.8s ease-in-out infinite; }
.apm__console.is-modernized .apm__console-live { color: var(--eg3); }
.apm__console.is-modernized .apm__console-live i { background: var(--eg3); }

.apm__console-tabs { display: flex; gap: 8px; margin-bottom: 20px; background: #fff; border: 1px solid var(--eb); border-radius: 10px; padding: 4px; }
.apm__console-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--emono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--et);
  padding: 10px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.apm__console-tab.is-active { background: var(--edark); color: #fff; }
.apm__console:not(.is-paused) .apm__console-tab.is-active { animation: apmTabPulse 3s ease-out infinite; }
@keyframes apmTabPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 183, 163, .5); }
  55% { box-shadow: 0 0 0 5px rgba(53, 183, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 183, 163, 0); }
}

.apm__console-layers,
.apm__console-score { transition: opacity .25s ease, transform .25s ease; }
.apm__console.is-swapping .apm__console-layers,
.apm__console.is-swapping .apm__console-score { opacity: .3; transform: translateY(4px); }

.apm__console-layers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.apm__layer-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--eb);
  border-radius: 9px;
  padding: 10px 12px;
}
.apm__layer-ico { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-family: var(--emono); font-size: 10.5px; font-weight: 600; letter-spacing: .5px; color: var(--et); text-transform: uppercase; }
.apm__layer-ico i { font-size: 14px; color: var(--eg); }
.apm__chip { display: none; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--eh); }
.apm__chip i { font-size: 11px; }
.apm__chip--legacy { display: inline-flex; color: #8a5a2e; }
.apm__chip--legacy i { color: var(--ewarn); animation: apmWarnBlink 1.8s ease-in-out infinite; }
.apm__chip--modern i { color: var(--eg); }
@keyframes apmWarnBlink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.apm__console.is-modernized .apm__chip--legacy { display: none; }
.apm__console.is-modernized .apm__chip--modern { display: inline-flex; }

.apm__console-score { position: relative; border-top: 1px solid var(--eb); padding-top: 16px; min-height: 76px; }
.apm__score-block { display: none; align-items: center; gap: 16px; }
.apm__score-block--legacy { display: flex; }
.apm__console.is-modernized .apm__score-block--legacy { display: none; }
.apm__console.is-modernized .apm__score-block--modern { display: flex; }
.apm__score-num { font-family: var(--edisplay); font-size: 30px; font-weight: 700; color: var(--eh); flex: 0 0 auto; }
.apm__score-num em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--et); }
.apm__score-meta { flex: 1; min-width: 0; }
.apm__score-label { display: block; font-family: var(--emono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--et); margin-bottom: 4px; }
.apm__score-sub { display: inline-block; font-size: 12px; font-weight: 600; margin-bottom: 9px; padding: 3px 10px; border-radius: 20px; }
.apm__score-sub--risk { color: var(--ewarn); background: rgba(226, 87, 76, .1); }
.apm__score-sub--ready { color: var(--eg); background: rgba(15, 139, 125, .1); }
.apm__score-bar { height: 6px; border-radius: 4px; background: var(--eb); overflow: hidden; }
.apm__score-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ewarn); transition: width .7s cubic-bezier(.65, 0, .35, 1); }
.apm__score-block--legacy .apm__score-bar i { background: var(--ewarn); }
.apm__score-block--modern .apm__score-bar i { background: linear-gradient(90deg, var(--eg), var(--eg3)); }

@keyframes apmKfScan { 0% { left: -220px; } 100% { left: 100%; } }
@keyframes apmKfPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.3); } }


/* ---------- 02. Intro: copy + readiness-signals ticket list ---------- */
.apm__intro { padding: 130px 0; background: #fff; }
.apm__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
.apm__intro-note {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 3px solid var(--eg);
  background: var(--ebg);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--et);
}
.apm__intro-note a { color: var(--eg); font-weight: 600; }

.apm__signals { border: 1px solid var(--eb); border-radius: 16px; overflow: hidden; background: var(--ebg); }
.apm__signals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--edark);
  font-family: var(--emono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eg3);
}
.apm__signals-head i { color: var(--eg2); }
.apm__signal-row { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-bottom: 1px dashed var(--eb); }
.apm__signal-row:last-child { border-bottom: none; }
.apm__signal-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--eg2); box-shadow: 0 0 0 3px rgba(224, 153, 61, .18); }
.apm__signal-row p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--eh); }


/* ---------- 03. Capability bento grid ---------- */
.apm__caps { padding: 40px 0 130px; background: #fff; }
.apm__caps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.apm__cap-card { border: 1px solid var(--eb); border-radius: 16px; padding: 30px 28px; background: #fff; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.apm__cap-card:hover { border-color: var(--eg); transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(15, 139, 125, .4); }
.apm__cap-card h3 { font-family: var(--edisplay); font-size: 18px; font-weight: 700; color: var(--eh); margin: 0 0 10px; }
.apm__cap-card p { font-size: 14.5px; line-height: 1.7; color: var(--et); margin: 0 0 16px; }
/* Lead tile is sized exactly like the rest of the grid (no column
   span) so all six capability cards read as one even 2-row x
   3-column set - only its dark fill marks it as the anchor
   capability. Overrides below intentionally follow the base .apm__
   cap-card h3 / p rules so equal-specificity source order keeps
   the white/muted text winning over the dark defaults. */
.apm__cap-card--lead { background: var(--edark); border-color: var(--edark); }
.apm__cap-card--lead .apm__ico { background: rgba(53, 183, 163, .16); color: var(--eg3); }
.apm__cap-card--lead h3 { color: #fff; }
.apm__cap-card--lead p { color: var(--emuted); }
.apm__cap-card--lead .apm__cap-list li { color: #fff; }
.apm__cap-card--lead .apm__cap-list li i { color: var(--eg3); }
.apm__cap-card--lead:hover { border-color: var(--eg); }
.apm__cap-list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.apm__cap-list li { font-size: 13.5px; color: var(--eh); display: flex; align-items: flex-start; gap: 9px; }
.apm__cap-list li i { color: var(--eg); font-size: 11px; margin-top: 4px; }


/* ---------- 04. Modernization pathways spectrum ---------- */
.apm__paths { padding: 40px 0 130px; background: var(--ebg); }
.apm__paths-panel { border: 1px solid var(--eb); border-radius: 18px; background: #fff; padding: 44px 40px 40px; }
.apm__paths-track { position: relative; display: flex; justify-content: space-between; margin-bottom: 40px; padding: 0 6px; }
.apm__paths-line { position: absolute; top: 7px; left: 6%; right: 6%; height: 2px; background: var(--eb); }
.apm__path-point {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  font-family: var(--emono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--et);
  cursor: pointer;
}
.apm__path-point span { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--eb); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.apm__path-point:hover span { transform: scale(1.12); }
.apm__path-point.is-active { color: var(--eh); }
.apm__path-point.is-active span { border-color: var(--eg); background: var(--eg); box-shadow: 0 0 0 5px rgba(15, 139, 125, .14); }

.apm__paths-readout { border-top: 1px solid var(--eb); padding-top: 28px; min-height: 128px; }
.apm__paths-readout-name { font-family: var(--edisplay); font-size: 22px; font-weight: 700; color: var(--eh); margin: 0 0 12px; }
.apm__paths-readout-text { font-size: 15px; line-height: 1.8; color: var(--et); margin: 0 0 14px; max-width: 640px; }
.apm__paths-readout-tag { display: inline-block; font-family: var(--emono); font-size: 11.5px; letter-spacing: .5px; color: var(--eg); background: rgba(15, 139, 125, .09); border-radius: 6px; padding: 6px 12px; }


/* ---------- 05. Proof band: image placeholder + manifesto quote ---------- */
.apm__proof { padding: 130px 0; background: #fff; }
.apm__proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.apm__proof-media {
  position: relative;
  background: var(--edark);
  border-radius: 18px;
  padding: 26px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.apm__proof-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 320px at 100% 0%, rgba(15, 139, 125, .28), transparent 60%);
}
.apm__proof-tag { position: absolute; top: 20px; right: 20px; font-family: var(--emono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--emuted); border: 1px dashed rgba(255, 255, 255, .3); border-radius: 20px; padding: 5px 12px; z-index: 1; }
.apm__proof-chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.apm__proof-chrome span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-block; }
.apm__proof-chrome em { font-style: normal; font-family: var(--emono); font-size: 10.5px; color: var(--emuted); margin-left: 8px; }
.apm__proof-bars { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 7px; height: 140px; }
.apm__proof-bars i { flex: 1; height: var(--h, 40%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--eg3), var(--eg)); opacity: .85; }
.apm__proof-quote { font-family: var(--edisplay); font-size: 25px; font-weight: 700; line-height: 1.4; color: var(--eh); margin: 0 0 16px; }
.apm__proof-attr { display: block; font-family: var(--emono); font-size: 12px; letter-spacing: .5px; color: var(--eg); margin-bottom: 30px; }
.apm__proof-stats { display: flex; flex-direction: column; gap: 18px; }
.apm__proof-stats div { border-left: 2px solid var(--eg2); padding-left: 16px; }
.apm__proof-stats b { display: block; font-family: var(--edisplay); font-size: 16px; font-weight: 700; color: var(--eh); margin-bottom: 4px; }
.apm__proof-stats span { font-size: 13.5px; color: var(--et); line-height: 1.5; }


/* ---------- 06. Without / with comparison ---------- */
.apm__compare { padding: 40px 0 130px; background: #fff; }
.apm__compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--eb); border: 1px solid var(--eb); border-radius: 18px; overflow: hidden; }
.apm__compare-col { background: #fff; padding: 36px 34px; }
.apm__compare-col--before { background: #FBF6F4; }
.apm__compare-col--after { background: var(--ebg); }
.apm__compare-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.apm__compare-head i { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.apm__compare-col--before .apm__compare-head i { background: rgba(226, 87, 76, .12); color: var(--ewarn); }
.apm__compare-col--after .apm__compare-head i { background: rgba(15, 139, 125, .12); color: var(--eg); }
.apm__compare-head h3 { font-family: var(--edisplay); font-size: 19px; font-weight: 700; color: var(--eh); margin: 0; }
.apm__compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.apm__compare-list li { font-size: 14.5px; line-height: 1.6; color: var(--eh); display: flex; align-items: flex-start; gap: 11px; }
.apm__compare-list li i { font-size: 11px; margin-top: 5px; }
.apm__compare-col--before .apm__compare-list li i { color: var(--ewarn); }
.apm__compare-col--after .apm__compare-list li i { color: var(--eg); }


/* ---------- 07. Delivery process rail ---------- */
.apm__process { padding: 130px 0; background: var(--ebg); }
.apm__proc-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 20px; }
.apm__proc-track::before { content: ""; position: absolute; top: 25px; left: 4%; right: 4%; height: 2px; background: repeating-linear-gradient(90deg, var(--eb) 0, var(--eb) 8px, transparent 8px, transparent 16px); }
.apm__proc-stage { position: relative; padding: 0 14px; text-align: center; }
.apm__proc-node { position: relative; width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%; background: #fff; border: 2px solid var(--eg); display: flex; align-items: center; justify-content: center; font-family: var(--emono); font-weight: 700; font-size: 14px; color: var(--eg); z-index: 1; }
.apm__proc-stage:nth-child(6) .apm__proc-node { background: var(--eg); color: #fff; }
.apm__proc-stage h3 { font-family: var(--edisplay); font-size: 15.5px; font-weight: 700; color: var(--eh); margin: 0 0 8px; }
.apm__proc-stage p { font-size: 13px; line-height: 1.6; color: var(--et); margin: 0; }


/* ---------- 08. Why 3Shadz value grid ---------- */
.apm__value { padding: 130px 0; }
.apm__value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.apm__value-item { background: var(--edark2); padding: 34px 30px; position: relative; }
.apm__value-item .apm__idx { position: absolute; top: 28px; right: 28px; font-family: var(--emono); font-size: 13px; color: rgba(255, 255, 255, .28); }
.apm__value-item h3 { font-family: var(--edisplay); font-size: 17.5px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.apm__value-item p { font-size: 14px; line-height: 1.7; color: var(--emuted); margin: 0; }


/* ---------- 09. Technology toolkit (config-file readout) ---------- */
.apm__stack { padding: 130px 0; background: #fff; }
.apm__yaml { background: var(--edark); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(11, 22, 19, .5); }
.apm__yaml-bar { display: flex; align-items: center; gap: 7px; padding: 16px 22px; background: var(--edark2); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.apm__yaml-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.apm__yaml-dot--r { background: var(--ewarn); }
.apm__yaml-dot--y { background: var(--eg2); }
.apm__yaml-dot--g { background: var(--eg3); }
.apm__yaml-bar em { font-style: normal; font-family: var(--emono); margin-left: 9px; font-size: 12px; letter-spacing: .5px; color: var(--emuted); }
.apm__yaml-body { padding: 32px 36px; }
.apm__yaml-row { display: flex; gap: 22px; padding: 9px 0; border-radius: 6px; transition: background .2s ease; }
.apm__yaml-row:hover { background: rgba(255, 255, 255, .04); }
.apm__yaml-ln { flex: 0 0 auto; width: 18px; text-align: right; font-family: var(--emono); font-size: 12.5px; color: rgba(255, 255, 255, .25); user-select: none; transition: color .2s ease; }
.apm__yaml-row:hover .apm__yaml-ln { color: var(--eg3); }
.apm__yaml-row code { flex: 1; min-width: 0; font-family: var(--emono); font-size: 14px; line-height: 1.7; color: var(--emuted); white-space: normal; word-break: break-word; }
.apm__yaml-key { color: var(--eg3); }
.apm__yaml-punc { color: rgba(255, 255, 255, .38); }
.apm__yaml-cursor { display: inline-block; width: 7px; height: 15px; background: var(--eg3); vertical-align: -3px; animation: apmYamlBlink 1s steps(1, start) infinite; }
@keyframes apmYamlBlink { 50% { opacity: 0; } }


/* ---------- 10. FAQ ---------- */
.apm__faq { padding: 40px 0 130px; background: #fff; }
.apm__faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.apm__faq-item { border: 1px solid var(--eb); border-radius: 12px; overflow: hidden; background: var(--ebg); }
.apm__faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: none; border: none; font-family: var(--edisplay); font-size: 16px; font-weight: 600; color: var(--eh); cursor: pointer; }
.apm__faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--eb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eg); transition: transform .3s ease, background .3s ease, color .3s ease; }
.apm__faq-item.is-open .apm__faq-icon { transform: rotate(135deg); background: var(--eg); border-color: var(--eg); color: #fff; }
.apm__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.apm__faq-item.is-open .apm__faq-a { max-height: 260px; }
.apm__faq-a p { margin: 0; padding: 0 26px 22px; font-size: 14.5px; line-height: 1.75; color: var(--et); }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .apm__hero-title { font-size: 44px; }
  .apm__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .apm__console { max-width: 560px; }
  .apm__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .apm__caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apm__proof-grid { grid-template-columns: 1fr; gap: 40px; }
  .apm__compare-grid { grid-template-columns: 1fr; }
  .apm__proc-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .apm__proc-track::before { display: none; }
  .apm__value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .apm__hero { padding: 160px 0 90px; }
  .apm__hero-title { font-size: 36px; }
  .apm__intro, .apm__proof, .apm__process, .apm__value, .apm__stack { padding: 90px 0; }
  .apm__caps { padding: 20px 0 90px; }
  .apm__paths { padding: 20px 0 90px; }
  .apm__compare { padding: 20px 0 90px; }
  .apm__faq { padding: 20px 0 90px; }
  .apm__paths-track { flex-wrap: wrap; gap: 22px 0; }
  .apm__paths-line { display: none; }
}

@media (max-width: 767px) {
  .apm__hero-title { font-size: 30px; }
  .apm__hero-stats { gap: 24px; }
  .apm__caps-grid, .apm__value-grid { grid-template-columns: 1fr; }
  .apm__layer-row { grid-template-columns: 1fr; }
  .apm__paths-panel { padding: 32px 22px 28px; }
  .apm__yaml-body { padding: 24px 18px; }
  .apm__yaml-row { gap: 14px; }
  .apm__yaml-row code { font-size: 12.5px; }
}

@media (max-width: 575px) {
  .apm__hero-scan { display: none; }
}

/* Users who ask for less motion get the page without the ambient
   scan sweep or live-status pulse. */
@media (prefers-reduced-motion: reduce) {
  .apm__hero-scan, .apm__console-live i { animation: none; }
  .apm__page * { transition-duration: .01ms !important; }
  .apm__console,
  .apm__console-progress,
  .apm__console-dots span,
  .apm__console-tab.is-active,
  .apm__chip--legacy i,
  .apm__yaml-cursor { animation: none !important; }
}


/* ============================================================
   CLOUD & DEVOPS PAGE (cdv__*)
   Scoped entirely to .cdv__page (added on <main> of
   cloud-devops.html). A top-level Services pillar page, sibling of
   .aisol__page (blue #005fcc / violet), .dex__page (coral/amber on
   cream) and .swe__page (teal/copper on cool paper) - so it claims
   its own hue family entirely: a signal-green / indigo "operations
   console" palette (#21D07A / #5B6EF5) on a cool near-black
   (#0A0E14), with Space Grotesk as display face over Kanit body and
   JetBrains Mono for metrics, tags and index numbers - none of
   which are used by any other pillar page. Component language is
   unique to this page: a hero built as a left-set title block over
   a full-bleed animated "deploy runway" (five pipeline stages with
   a travelling pulse, plus count-up operating metrics) instead of a
   centered console (aisol), split canvas with pins (dex) or
   blueprint node inspector (swe); a capability section styled as a
   real cloud-console sidebar (vertical nav -> swapping detail
   panel) instead of zig-zag rows, tabs or layer-stack drawers; a
   conic-gradient gauge-ring stat band for operating metrics; a
   vertical runbook timeline; an asymmetric bento "why us" grid; and
   a categorised platform/tool grid in place of a scrolling logo
   marquee. Keyframes are prefixed cdvKf* so nothing collides with
   the rest of the theme. Nothing in this block leaks to other
   pages.
   ============================================================ */
.cdv__page {
  --cp: #21D07A;
  --cp2: #5B6EF5;
  --cp3: #7CFFC0;
  --cw: #FFB020;
  --cv: #A78BFA;
  --ch: #10161C;
  --ch2: #101820;
  --ct: #56636B;
  --cb: #E1E7EA;
  --cbg: #F4F7F8;
  --cdarkbg: #0A0E14;
  --cmuted: #93A6AD;
  --cdisplay: "Space Grotesk", sans-serif;
  --cmono: "JetBrains Mono", monospace;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.cdv__page .cdv__eyebrow {
  display: inline-block;
  font-family: var(--cmono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cp2);
  margin-bottom: 16px;
}
.cdv__page .cdv__title { font-family: var(--cdisplay); font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--ch); margin: 0 0 20px; }
.cdv__page .cdv__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ch); margin: 0 0 18px; }
.cdv__page .cdv__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ct); margin: 0 0 16px; }
.cdv__page .cdv__text:last-child { margin-bottom: 0; }
.cdv__page .cdv__head { max-width: 780px; }
.cdv__page .cdv__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.cdv__page .cdv__btn,
.cdv__page .cdv__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cdv__page .cdv__btn { color: #06140D; background: var(--cp); border: 2px solid var(--cp); }
.cdv__page .cdv__btn:hover { background: var(--cp3); border-color: var(--cp3); color: #06140D; }
.cdv__page .cdv__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .35); background: transparent; }
.cdv__page .cdv__btn-ghost:hover { background: #fff; color: var(--cdarkbg); border-color: #fff; }

.cdv__page .cdv__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cp2);
  transition: gap .3s ease, color .3s ease;
}
.cdv__page .cdv__link:hover { gap: 15px; color: var(--cp); }

.cdv__page .cdv__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(33, 208, 122, .1);
  color: var(--cp);
  font-size: 20px;
  margin-bottom: 18px;
}

/* Reusable dark-band utility - shared by the operating-metrics band
   and the "why us" bento grid so the two dark sections stay
   visually related instead of two near-duplicate blocks. */
.cdv__page .cdv__dark { position: relative; overflow: hidden; background: var(--cdarkbg); }
.cdv__page .cdv__dark > .container { position: relative; z-index: 2; }
.cdv__page .cdv__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 8% -12%, rgba(91, 110, 245, .22), transparent 62%),
              radial-gradient(820px 460px at 96% 108%, rgba(33, 208, 122, .20), transparent 64%);
}
.cdv__page .cdv__dark .cdv__eyebrow { color: var(--cp3); }
.cdv__page .cdv__dark .cdv__title { color: #fff; }
.cdv__page .cdv__dark .cdv__text { color: var(--cmuted); }
.cdv__page .cdv__dark .cdv__ico { background: rgba(124, 255, 192, .14); color: var(--cp3); }

/* ---------- 01. Hero: left-set title over a full-bleed deploy runway ---------- */
.cdv__hero { position: relative; overflow: hidden; background: var(--cdarkbg); padding: 190px 0 0; }
.cdv__hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(33, 208, 122, .09) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(33, 208, 122, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(820px 520px at 14% 6%, #000, transparent 70%);
          mask-image: radial-gradient(820px 520px at 14% 6%, #000, transparent 70%);
}
.cdv__hero-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(33, 208, 122, .7), transparent);
  animation: cdvKfScan 7s linear infinite;
  pointer-events: none;
}
@keyframes cdvKfScan { 0% { top: 6%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 96%; opacity: 0; } }

.cdv__hero > .container { position: relative; z-index: 2; }
.cdv__hero-columns { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.cdv__hero-top { max-width: 640px; flex: 1 1 auto; }
.cdv__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(33, 208, 122, .35);
  background: rgba(33, 208, 122, .08);
  color: var(--cp3);
  font-family: var(--cmono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.cdv__hero-badge i { font-size: 12px; }
.cdv__hero-title { font-family: var(--cdisplay); font-size: 52px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.cdv__mark { position: relative; color: var(--cp3); }
.cdv__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cp), var(--cp2));
}
.cdv__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C4D2D6; margin: 0 0 34px; max-width: 620px; }
.cdv__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Live-status widget: a small "status page" card that fills the
   hero's right column, previewing the Managed Cloud Services /
   observability story before the visitor reaches that section. */
.cdv__hero-status {
  flex: 0 0 320px;
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(16, 24, 32, .55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  padding: 22px 22px 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.cdv__hero-status-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cmono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cdv__hero-status-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cp); box-shadow: 0 0 0 4px rgba(33, 208, 122, .18); }
.cdv__hero-status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--cp);
  opacity: .6;
  animation: cdvKfPing 2.4s ease-out infinite;
}
@keyframes cdvKfPing { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }

.cdv__hero-status-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cdv__hero-status-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cdv__hero-status-name { font-size: 13.5px; font-weight: 400; color: #C4D2D6; }
.cdv__hero-status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cmono); font-size: 11px; font-weight: 500; letter-spacing: .5px; color: var(--cp3); }
.cdv__hero-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp); }

.cdv__hero-status-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .12); }
.cdv__hero-status-foot span { font-size: 12px; font-weight: 300; color: var(--cmuted); }
.cdv__hero-status-foot strong { font-family: var(--cmono); font-size: 15px; font-weight: 600; color: #fff; }

/* Full-bleed deploy runway: sits below the title block, spans the
   whole hero width, and is the hero's actual visual centerpiece. */
.cdv__runway { position: relative; z-index: 2; margin-top: 64px; padding: 40px 0 54px; border-top: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); }
.cdv__runway-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.cdv__runway-track { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cdv__runway-line { position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: rgba(255, 255, 255, .14); z-index: 1; }
.cdv__runway-pulse {
  position: absolute;
  top: 24px;
  left: 0%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--cp3);
  box-shadow: 0 0 16px 4px rgba(124, 255, 192, .65);
  z-index: 1;
  transition: left 1.8s linear;
}
.cdv__runway-stage { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cdv__runway-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ch2);
  border: 2px solid rgba(255, 255, 255, .16);
  color: var(--cmuted);
  font-size: 16px;
  transition: all .4s ease;
}
.cdv__runway-stage.is-active .cdv__runway-dot { background: var(--cp); border-color: var(--cp); color: #06140D; box-shadow: 0 0 0 8px rgba(33, 208, 122, .16); }
.cdv__runway-stage strong { font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--cmuted); transition: color .3s ease; }
.cdv__runway-stage.is-active strong { color: #fff; }

.cdv__runway-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; margin-top: 40px; padding-top: 32px; border-top: 1px dashed rgba(255, 255, 255, .14); }
.cdv__runway-metric { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 220px; text-align: center; }
.cdv__runway-metric-label { font-family: var(--cmono); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--cp3); }
.cdv__runway-metric span:last-child { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--cmuted); }

/* ---------- 02. Introduction ---------- */
.cdv__intro { padding: 130px 0; background: #fff; }
.cdv__intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.cdv__intro-figure { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(16, 22, 28, .13); }
.cdv__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdv__intro-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: #fff;
  border-left: 3px solid var(--cp);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(16, 22, 28, .16);
}
.cdv__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--ch); line-height: 1.3; margin-bottom: 4px; }
.cdv__intro-badge span { font-size: 14px; font-weight: 300; color: var(--ct); }
.cdv__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--cp2);
  background: var(--cbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ct);
}
.cdv__intro-note a { color: var(--cp2); font-weight: 600; }
.cdv__intro-note a:hover { color: var(--cp); }

/* ---------- 03. Capabilities: cloud-console sidebar + swapping detail panel ---------- */
.cdv__caps { padding: 130px 0 110px; background: var(--cbg); }
.cdv__console {
  display: grid;
  grid-template-columns: 300px 1fr;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--cb);
  background: #fff;
  box-shadow: 0 30px 70px rgba(16, 22, 28, .08);
  margin-top: 60px;
}
.cdv__console-nav { background: var(--cdarkbg); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.cdv__console-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--cmuted);
  cursor: pointer;
  transition: all .25s ease;
}
.cdv__console-tab-num { font-family: var(--cmono); font-size: 12px; opacity: .7; }
.cdv__console-tab-label { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.cdv__console-tab-arrow { font-size: 11px; opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.cdv__console-tab:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.cdv__console-tab.is-active { background: rgba(33, 208, 122, .14); color: #fff; }
.cdv__console-tab.is-active .cdv__console-tab-num { color: var(--cp); opacity: 1; }
.cdv__console-tab.is-active .cdv__console-tab-arrow { opacity: 1; transform: translateX(2px); color: var(--cp); }

.cdv__console-panels { position: relative; padding: 50px 54px; }
.cdv__console-panel { display: none; }
.cdv__console-panel.is-active { display: block; animation: cdvKfFade .4s ease; }
@keyframes cdvKfFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cdv__console-tag { display: inline-block; font-family: var(--cmono); font-size: 12.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--cp2); margin-bottom: 14px; }
.cdv__console-panel h3 { font-family: var(--cdisplay); font-size: 28px; font-weight: 600; color: var(--ch); margin: 0 0 14px; }
.cdv__console-panel p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--ct); margin: 0 0 22px; }
.cdv__console-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.cdv__console-list li { font-size: 14.5px; font-weight: 400; color: var(--ch); display: flex; align-items: flex-start; gap: 10px; }
.cdv__console-list li i { color: var(--cp); margin-top: 3px; font-size: 12px; }

/* ---------- 04. Operating metrics: conic-gradient gauge ring band ---------- */
.cdv__ops { padding: 130px 0; }
.cdv__gauge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 60px; }
.cdv__gauge-card { text-align: center; padding: 36px 22px; border-radius: 16px; background: var(--ch2); border: 1px solid rgba(255, 255, 255, .08); }
.cdv__gauge {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: conic-gradient(var(--cp) calc(var(--gv) * 1%), rgba(255, 255, 255, .1) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cdv__gauge::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--ch2); }
.cdv__gauge-num { position: relative; z-index: 2; font-family: var(--cmono); font-size: 21px; font-weight: 600; color: #fff; }
.cdv__gauge-card h3 { font-family: var(--cdisplay); font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.cdv__gauge-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--cmuted); margin: 0; }

/* ---------- 05. How we work: vertical runbook timeline ---------- */
.cdv__process { padding: 130px 0; background: #fff; }
.cdv__timeline { position: relative; max-width: 780px; margin: 60px auto 0; padding-left: 70px; }
.cdv__timeline::before { content: ""; position: absolute; left: 23px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--cp), var(--cp2)); }
.cdv__timeline-item { position: relative; padding-bottom: 52px; }
.cdv__timeline-item:last-child { padding-bottom: 0; }
.cdv__timeline-num {
  position: absolute;
  left: -70px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cmono);
  font-size: 14px;
  font-weight: 600;
  color: var(--cp);
  z-index: 2;
}
.cdv__timeline-body h3 { font-family: var(--cdisplay); font-size: 21px; font-weight: 600; color: var(--ch); margin: 0 0 8px; }
.cdv__timeline-body p { font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--ct); margin: 0; }

/* ---------- 06. Why 3Shadz: asymmetric bento grid ---------- */
.cdv__value { padding: 130px 0; }
.cdv__bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 60px; }
.cdv__bento-tile {
  padding: 34px 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: all .3s ease;
}
.cdv__bento-tile:hover { border-color: rgba(33, 208, 122, .4); transform: translateY(-4px); }
.cdv__bento-tile--lg {
  background: linear-gradient(145deg, rgba(33, 208, 122, .14), rgba(91, 110, 245, .08));
}
.cdv__bento-tile h3 { font-family: var(--cdisplay); font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.cdv__bento-tile p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--cmuted); margin: 0; }

/* ---------- 07. Stack: a literal "tech stack" skyline - each category is a column of
   stacked tool blocks resting on a shared baseline, depth reflecting how much tooling
   sits in that layer. Deliberately not a card grid, console, timeline or bento - the
   other patterns already used on this page. ---------- */
.cdv__stack { padding: 130px 0; background: var(--cbg); overflow: hidden; }
.cdv__stack-cols {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 70px;
  padding: 0 2px;
  border-bottom: 2px solid var(--ch);
}
.cdv__stack-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cdv__stack-col-head { text-align: center; margin-bottom: 22px; }
.cdv__stack-col-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lc) 14%, #fff);
  color: var(--lc);
  font-size: 17px;
  margin-bottom: 14px;
}
.cdv__stack-col-head h3 { font-family: var(--cdisplay); font-size: 15px; font-weight: 600; color: var(--ch); margin: 0; line-height: 1.4; }
.cdv__stack-col-blocks { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.cdv__stack-block {
  padding: 13px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lc) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--lc) 24%, var(--cb));
  color: var(--ch);
  font-family: var(--cmono);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.cdv__stack-block:hover { transform: translateX(4px); background: color-mix(in srgb, var(--lc) 22%, #fff); border-color: var(--lc); }

/* ---------- 08. FAQ ---------- */
.cdv__faq { padding: 130px 0 140px; background: #fff; }
.cdv__faq-list { max-width: 860px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 14px; }
.cdv__faq-item { border: 1px solid var(--cb); border-radius: 12px; overflow: hidden; background: var(--cbg); }
.cdv__faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ch);
  cursor: pointer;
}
.cdv__faq-q[aria-expanded="true"] { color: var(--cp2); }
.cdv__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--cp);
  font-size: 13px;
  border: 1px solid var(--cb);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.cdv__faq-item.is-open .cdv__faq-icon { transform: rotate(45deg); background: var(--cp); color: #fff; border-color: var(--cp); }
.cdv__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.cdv__faq-item.is-open .cdv__faq-a { max-height: 420px; }
.cdv__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ct); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .cdv__hero-status { display: none; }
  .cdv__hero-top { max-width: 100%; }
  .cdv__hero-title { font-size: 44px; }
  .cdv__console { grid-template-columns: 260px 1fr; }
  .cdv__console-panels { padding: 44px 40px; }
}

@media (max-width: 991px) {
  .cdv__hero { padding-top: 160px; }
  .cdv__hero-title { font-size: 36px; }
  .cdv__runway-track { flex-wrap: wrap; row-gap: 28px; }
  .cdv__runway-line, .cdv__runway-pulse { display: none; }
  .cdv__runway-stage { flex: 0 0 33.333%; }
  .cdv__intro, .cdv__caps, .cdv__ops, .cdv__process, .cdv__value, .cdv__stack, .cdv__faq { padding: 90px 0; }
  .cdv__intro-grid { grid-template-columns: 1fr; gap: 50px; }
  .cdv__console { grid-template-columns: 1fr; }
  .cdv__console-nav { flex-direction: row; overflow-x: auto; }
  .cdv__console-tab { flex: none; }
  .cdv__console-tab-arrow { display: none; }
  .cdv__gauge-grid { grid-template-columns: repeat(2, 1fr); }
  .cdv__stack-cols { flex-direction: column; align-items: stretch; gap: 0; border-bottom: none; }
  .cdv__stack-col { align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--cb); }
  .cdv__stack-col:last-child { border-bottom: none; }
  .cdv__stack-col-head { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 16px; }
  .cdv__stack-col-ico { margin-bottom: 0; }
  .cdv__stack-col-blocks { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .cdv__stack-block { flex: none; padding: 8px 14px; }
}

@media (max-width: 767px) {
  .cdv__hero-title { font-size: 30px; }
  .cdv__hero-lead { font-size: 16px; }
  .cdv__runway-stage { flex: 0 0 50%; }
  .cdv__runway-metrics { gap: 28px; }
  .cdv__console-list { grid-template-columns: 1fr; }
  .cdv__console-panels { padding: 36px 26px; }
  .cdv__gauge-grid { grid-template-columns: 1fr; }
  .cdv__bento { grid-template-columns: 1fr; }
  .cdv__timeline { padding-left: 58px; }
  .cdv__timeline-num { left: -58px; width: 40px; height: 40px; font-size: 13px; }
  .cdv__timeline::before { left: 19px; }
}

@media (max-width: 575px) {
  .cdv__hero-scan { display: none; }
  .cdv__runway-metrics { flex-direction: column; align-items: center; }
}

/* Users who ask for less motion get the page without the radar
   scan sweep, travelling deploy pulse, or count-up animation. */
@media (prefers-reduced-motion: reduce) {
  .cdv__hero-scan, .cdv__runway-pulse { animation: none; display: none; }
  .cdv__hero-status-dot::after { animation: none; }
  .cdv__page * { transition-duration: .01ms !important; }
}

/* ============================================================
   CLOUD CONSULTING PAGE (clc__*)
   Scoped entirely to .clc__page (added on <main> of
   cloud-consulting.html). A child capability page under the Cloud
   & DevOps pillar (cloud-devops.html) - so it keeps that pillar's
   exact palette (signal-green #21D07A / indigo #5B6EF5 on near-black
   #0A0E14, Space Grotesk display over Kanit body, JetBrains Mono
   for metrics) to read as unmistakably part of the same family, the
   same "keep the brand, change the composition" rule used by every
   child page under every pillar (e.g. aic__ under aisol__). The
   composition itself is entirely new: a vertical "architecture
   blueprint" stack (governance up through applications, on
   blueprint grid paper) replaces cdv's horizontal deploy runway; a
   hexagonal six-axis radar chart plots baseline vs. target posture
   across security/reliability/cost/performance/scalability/
   operability instead of cdv's conic gauge-ring; cloud operating
   models are shown as a simultaneous comparison grid instead of a
   click-through console or tab track; and "why us" is a uniform
   icon-card grid rather than cdv's asymmetric bento. Keyframes are
   prefixed clcKf* so nothing collides with the rest of the theme.
   Nothing in this block leaks to other pages.
   ============================================================ */
.clc__page {
  --lp: #21D07A;
  --lp2: #5B6EF5;
  --lp3: #7CFFC0;
  --lw: #FFB020;
  --lh: #10161C;
  --lh2: #101820;
  --lt: #56636B;
  --lb: #E1E7EA;
  --lbg: #F4F7F8;
  --ldarkbg: #0A0E14;
  --lmuted: #93A6AD;
  --ldisplay: "Space Grotesk", sans-serif;
  --lmono: "JetBrains Mono", monospace;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.clc__page .clc__eyebrow {
  display: inline-block;
  font-family: var(--lmono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lp2);
  margin-bottom: 16px;
}
.clc__page .clc__title { font-family: var(--ldisplay); font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--lh); margin: 0 0 20px; }
.clc__page .clc__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--lh); margin: 0 0 18px; }
.clc__page .clc__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--lt); margin: 0 0 16px; }
.clc__page .clc__text:last-child { margin-bottom: 0; }
.clc__page .clc__head { max-width: 780px; }
.clc__page .clc__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.clc__page .clc__btn,
.clc__page .clc__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.clc__page .clc__btn { color: #06140D; background: var(--lp); border: 2px solid var(--lp); }
.clc__page .clc__btn:hover { background: var(--lp3); border-color: var(--lp3); color: #06140D; }
.clc__page .clc__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .35); background: transparent; }
.clc__page .clc__btn-ghost:hover { background: #fff; color: var(--ldarkbg); border-color: #fff; }

.clc__page .clc__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp2);
  transition: gap .3s ease, color .3s ease;
}
.clc__page .clc__link:hover { gap: 15px; color: var(--lp); }

.clc__page .clc__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(33, 208, 122, .1);
  color: var(--lp);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.clc__page .clc__dark { position: relative; overflow: hidden; background: var(--ldarkbg); }
.clc__page .clc__dark > .container { position: relative; z-index: 2; }
.clc__page .clc__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(91, 110, 245, .22), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(33, 208, 122, .20), transparent 64%);
}
.clc__page .clc__dark .clc__eyebrow { color: var(--lp3); }
.clc__page .clc__dark .clc__title { color: #fff; }
.clc__page .clc__dark .clc__text { color: var(--lmuted); }
.clc__page .clc__dark .clc__ico { background: rgba(124, 255, 192, .14); color: var(--lp3); }

/* ---------- 01. Hero: title block over a contained "architecture blueprint" stack ---------- */
.clc__hero { position: relative; overflow: hidden; background: var(--ldarkbg); padding: 190px 0 120px; }
.clc__hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(91, 110, 245, .10) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(91, 110, 245, .10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(900px 560px at 88% 0%, #000, transparent 70%);
          mask-image: radial-gradient(900px 560px at 88% 0%, #000, transparent 70%);
}
.clc__hero > .container { position: relative; z-index: 2; }
.clc__hero-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.clc__hero-top { max-width: 620px; }
.clc__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(91, 110, 245, .38);
  background: rgba(91, 110, 245, .1);
  color: #A9B4FF;
  font-family: var(--lmono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.clc__hero-badge i { font-size: 12px; }
.clc__hero-title { font-family: var(--ldisplay); font-size: 50px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.clc__mark { position: relative; color: var(--lp3); }
.clc__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lp2), var(--lp));
}
.clc__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C4D2D6; margin: 0 0 34px; max-width: 640px; }
.clc__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Mock CLI readout: fills the space below the hero actions on wide
   screens and dramatizes "evidence, not guesswork" as a quick
   platform-fit scoring run rather than a generic quote or stat
   strip. */
.clc__hero-console {
  margin-top: 48px;
  max-width: 480px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.clc__console-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.clc__console-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.clc__console-dot--r { background: #FF5F57; }
.clc__console-dot--y { background: #FEBC2E; }
.clc__console-dot--g { background: #28C840; }
.clc__console-title { margin-left: 7px; font-family: var(--lmono); font-size: 11px; letter-spacing: .5px; color: var(--lmuted); }
.clc__console-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 11px; }
.clc__console-body p { margin: 0; font-family: var(--lmono); font-size: 12.5px; line-height: 1.6; color: #C9D3D6; }
.clc__console-prompt { color: var(--lp3); font-weight: 600; margin-right: 4px; }
.clc__console-muted { color: var(--lmuted) !important; }
.clc__console-result { color: #fff !important; }
.clc__console-result strong { color: var(--lp3); font-weight: 600; }
.clc__console-fit { display: flex; align-items: center; gap: 10px; font-family: var(--lmono); font-size: 12px; }
.clc__console-fit-label { width: 42px; flex: none; color: #fff; font-weight: 500; }
.clc__console-fit-bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.clc__console-fit-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--lp2), var(--lp)); transition: width 1.1s ease; }
.clc__hero-console.is-visible .clc__console-fit-fill { width: var(--w); }
.clc__console-fit-pct { width: 32px; flex: none; text-align: right; color: var(--lmuted); }
.clc__console-cursor { display: inline-block; width: 7px; height: 12px; margin-left: 3px; vertical-align: -2px; background: var(--lp3); animation: clcKfBlink 1s steps(1) infinite; }
@keyframes clcKfBlink { 50% { opacity: 0; } }

/* Blueprint stack: the hero's actual visual centerpiece - a
   vertical architecture elevation from governance (foundation) up
   to applications, drawn on blueprint grid paper. */
.clc__blueprint {
  position: relative;
  z-index: 2;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  overflow: hidden;
}
.clc__blueprint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
  font-family: var(--lmono);
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lmuted);
}
.clc__blueprint-tag { padding: 4px 10px; border-radius: 5px; background: rgba(255, 176, 32, .14); color: var(--lw); font-size: 11px; }
.clc__blueprint-body {
  position: relative;
  padding: 30px 30px 8px;
  background-image: linear-gradient(rgba(91, 110, 245, .12) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(91, 110, 245, .12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.clc__blueprint-stack { display: flex; flex-direction: column; gap: 10px; }
.clc__blueprint-layer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, .18);
  background: rgba(10, 14, 20, .35);
  transition: all .5s ease;
}
.clc__blueprint-layer-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  color: var(--lmuted);
  font-size: 16px;
  transition: all .5s ease;
}
.clc__blueprint-layer-body { display: flex; flex-direction: column; gap: 3px; }
.clc__blueprint-layer-body strong { font-size: 15.5px; font-weight: 600; color: #fff; }
.clc__blueprint-layer-body span { font-size: 13px; font-weight: 300; color: var(--lmuted); }
.clc__blueprint-layer.is-active {
  border-style: solid;
  border-color: rgba(33, 208, 122, .55);
  background: rgba(33, 208, 122, .08);
  box-shadow: 0 0 0 1px rgba(33, 208, 122, .12) inset;
}
.clc__blueprint-layer.is-active .clc__blueprint-layer-icon { background: var(--lp); color: #06140D; }
.clc__blueprint-stats {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, .16);
}
.clc__blueprint-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
}
.clc__blueprint-stat:last-child { border-bottom: none; padding-bottom: 6px; }
.clc__blueprint-stat-label { font-family: var(--lmono); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--lp3); }
.clc__blueprint-stat-desc { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--lmuted); }

/* ---------- 02. Introduction ---------- */
.clc__intro { padding: 130px 0; background: #fff; }
.clc__intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.clc__intro-figure { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(16, 22, 28, .13); }
.clc__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clc__intro-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: #fff;
  border-left: 3px solid var(--lp2);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(16, 22, 28, .16);
}
.clc__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--lh); line-height: 1.3; margin-bottom: 4px; }
.clc__intro-badge span { font-size: 14px; font-weight: 300; color: var(--lt); }
.clc__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--lp2);
  background: var(--lbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--lt);
}
.clc__intro-note a { color: var(--lp2); font-weight: 600; }
.clc__intro-note a:hover { color: var(--lp); }

/* ---------- 03. What's included: card grid ---------- */
.clc__cap { padding: 130px 0 110px; background: var(--lbg); }
.clc__cap-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 22px; margin-top: 60px; }
.clc__cap-tile { position: relative; display: flex; flex-direction: column; padding: 34px 32px; border-radius: 22px; background: #fff; border: 1px solid var(--lb); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.clc__cap-tile:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(16, 22, 28, .1); border-color: rgba(33, 208, 122, .35); }
.clc__cap-tile:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.clc__cap-tile:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.clc__cap-tile:nth-child(3) { grid-column: 4 / 7; grid-row: 2; }
.clc__cap-tile:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
.clc__cap-tile:nth-child(5) { grid-column: 3 / 5; grid-row: 3; }
.clc__cap-tile:nth-child(6) { grid-column: 5 / 7; grid-row: 3; }
.clc__cap-num { position: absolute; right: 16px; bottom: -14px; font-family: var(--ldisplay); font-size: 92px; font-weight: 700; line-height: 1; color: var(--lh); opacity: .05; pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.clc__cap-tile:hover .clc__cap-num { opacity: .09; transform: translateY(-4px); }
.clc__cap-ico { position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(33, 208, 122, .1); color: var(--lp); font-size: 19px; margin-bottom: 22px; transition: background .35s ease, color .35s ease; }
.clc__cap-tile:hover .clc__cap-ico { background: var(--lp); color: #fff; }
.clc__cap-tile h3 { position: relative; z-index: 1; font-family: var(--ldisplay); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--lh); margin: 0 0 10px; }
.clc__cap-tile p { position: relative; z-index: 1; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--lt); margin: 0 0 20px; }
.clc__cap-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.clc__cap-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 30px; background: var(--lbg); border: 1px solid var(--lb); font-size: 12px; font-weight: 400; color: var(--lh); }
.clc__cap-tags span i { color: var(--lp); font-size: 9px; }
.clc__cap-tile--lg { background: linear-gradient(155deg, var(--ldarkbg) 0%, #121a24 100%); border-color: rgba(255, 255, 255, .08); padding: 40px 38px; }
.clc__cap-tile--lg:hover { border-color: rgba(124, 255, 192, .3); }
.clc__cap-tile--lg .clc__cap-num { color: #fff; opacity: .06; font-size: 140px; }
.clc__cap-tile--lg:hover .clc__cap-num { opacity: .1; }
.clc__cap-tile--lg .clc__cap-ico { background: rgba(124, 255, 192, .14); color: var(--lp3); }
.clc__cap-tile--lg:hover .clc__cap-ico { background: var(--lp3); color: var(--ldarkbg); }
.clc__cap-tile--lg h3 { color: #fff; font-size: 23px; }
.clc__cap-tile--lg p { color: var(--lmuted); font-size: 15px; max-width: 42ch; }
.clc__cap-tile--lg .clc__cap-tags span { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }
.clc__cap-media { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0 0 20px; }
.clc__cap-media img { max-width: 56%; max-height: 80%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .4)); transition: transform .45s ease; }
.clc__cap-tile--lg:hover .clc__cap-media img { transform: translateY(-4px) scale(1.02); }

/* ---------- 04. Cloud operating models: simultaneous comparison grid ---------- */
.clc__ops { padding: 130px 0; background: #fff; }
.clc__ops-track { position: relative; height: 30px; margin: 54px 0 46px; }
.clc__ops-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, var(--lp3), var(--lp) 35%, #5B6EF5 68%, var(--lh)); opacity: .55; }
.clc__ops-track-node { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--ops-a); color: var(--ops-a); font-family: var(--lmono); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 6px #fff; }
.clc__ops-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.clc__ops-card { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; border-radius: 14px; background: var(--lbg); border: 1px solid var(--lb); border-top: 4px solid var(--ops-a); transition: transform .3s ease, box-shadow .3s ease; }
.clc__ops-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16, 22, 28, .08); }
.clc__ops-card h3 { font-family: var(--ldisplay); font-size: 18px; font-weight: 600; color: var(--lh); margin: 0 0 10px; }
.clc__ops-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--lt); margin: 0 0 20px; }
.clc__ops-fit { margin-top: auto; padding-left: 15px; border-left: 3px solid var(--ops-a); }
.clc__ops-fit-label { display: block; font-family: var(--lmono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ops-a); font-weight: 600; margin-bottom: 9px; }
.clc__ops-fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.clc__ops-fit li { font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--lh); }
.clc__ops-card:nth-child(1), .clc__ops-track-node:nth-child(1) { --ops-a: var(--lp3); }
.clc__ops-card:nth-child(2), .clc__ops-track-node:nth-child(2) { --ops-a: var(--lp); }
.clc__ops-card:nth-child(3), .clc__ops-track-node:nth-child(3) { --ops-a: #5B6EF5; }
.clc__ops-card:nth-child(4), .clc__ops-track-node:nth-child(4) { --ops-a: var(--lh); }

/* ---------- 05. What we architect for: hexagonal radar chart ---------- */
.clc__gauge { padding: 130px 0; background: var(--ldarkbg); position: relative; overflow: hidden; }
.clc__gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 6% 10%, rgba(33, 208, 122, .18), transparent 62%),
              radial-gradient(820px 460px at 100% 100%, rgba(91, 110, 245, .2), transparent 64%);
}
.clc__gauge > .container { position: relative; z-index: 2; }
.clc__gauge-intro { max-width: 640px; margin: 40px auto 0; text-align: center; }
.clc__gauge-intro .clc__text { color: var(--lmuted); }
.clc__gauge-legend { display: flex; gap: 26px; justify-content: center; margin-top: 22px; }
.clc__gauge-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--lmuted); }
.clc__gauge-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.clc__gauge-legend .is-base i { background: var(--lmuted); }
.clc__gauge-legend .is-target i { background: var(--lp3); }

.clc__gauge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.clc__gauge-card { padding: 34px 26px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); text-align: center; opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.clc__gauge-grid.is-visible .clc__gauge-card { opacity: 1; transform: translateY(0); }
.clc__gauge-card:nth-child(1) { transition-delay: 0ms; }
.clc__gauge-card:nth-child(2) { transition-delay: 70ms; }
.clc__gauge-card:nth-child(3) { transition-delay: 140ms; }
.clc__gauge-card:nth-child(4) { transition-delay: 210ms; }
.clc__gauge-card:nth-child(5) { transition-delay: 280ms; }
.clc__gauge-card:nth-child(6) { transition-delay: 350ms; }
.clc__gauge-dial { position: relative; width: 108px; height: 108px; margin: 0 auto 22px; }
.clc__gauge-ring { position: absolute; border-radius: 50%; }
.clc__gauge-ring--target { inset: 0; background: conic-gradient(var(--lp3) calc(var(--target) * 3.6deg), rgba(255, 255, 255, .08) 0deg); }
.clc__gauge-ring--target::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--ldarkbg); }
.clc__gauge-ring--base { inset: 17px; background: conic-gradient(var(--lmuted) calc(var(--base) * 3.6deg), rgba(255, 255, 255, .12) 0deg); opacity: .85; }
.clc__gauge-ring--base::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--ldarkbg); }
.clc__gauge-ico { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: var(--lp3); font-size: 18px; }
.clc__gauge-card h3 { font-family: var(--ldisplay); font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 9px; }
.clc__gauge-card p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--lmuted); margin: 0; }

/* ---------- 06. How we work: vertical roadmap timeline ---------- */
.clc__process { padding: 130px 0; background: #fff; }
.clc__timeline { position: relative; max-width: 780px; margin: 60px auto 0; padding-left: 70px; }
.clc__timeline::before { content: ""; position: absolute; left: 23px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--lp2), var(--lp)); }
.clc__timeline-item { position: relative; padding-bottom: 52px; }
.clc__timeline-item:last-child { padding-bottom: 0; }
.clc__timeline-num {
  position: absolute;
  left: -70px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--lp2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lmono);
  font-size: 14px;
  font-weight: 600;
  color: var(--lp2);
  z-index: 2;
}
.clc__timeline-body h3 { font-family: var(--ldisplay); font-size: 21px; font-weight: 600; color: var(--lh); margin: 0 0 8px; }
.clc__timeline-body p { font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--lt); margin: 0; }
.clc__timeline-tag { display: inline-block; font-family: var(--lmono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--lp); margin-bottom: 6px; }

/* ---------- 07. Ways to engage: model cards ---------- */
.clc__engage { padding: 130px 0; background: var(--lbg); }
.clc__engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 60px; }
.clc__engage-card { position: relative; padding: 36px 30px; border-radius: 16px; background: #fff; border: 1px solid var(--lb); display: flex; flex-direction: column; }
.clc__engage-card.is-featured { border-color: var(--lp); box-shadow: 0 24px 60px rgba(33, 208, 122, .16); }
.clc__engage-flag { position: absolute; top: -13px; left: 30px; padding: 5px 14px; border-radius: 20px; background: var(--lp); color: #06140D; font-size: 12px; font-weight: 600; }
.clc__engage-duration { font-family: var(--lmono); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--lp2); margin-bottom: 14px; }
.clc__engage-card h3 { font-family: var(--ldisplay); font-size: 21px; font-weight: 600; color: var(--lh); margin: 0 0 8px; }
.clc__engage-audience { font-size: 13.5px; font-weight: 400; color: var(--lt); margin: 0 0 18px; font-style: italic; }
.clc__engage-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.clc__engage-list li { font-size: 14px; font-weight: 400; color: var(--lh); display: flex; align-items: flex-start; gap: 9px; }
.clc__engage-list li i { color: var(--lp); margin-top: 3px; font-size: 11px; }
.clc__engage-cta { text-align: center; padding: 14px 20px; border-radius: 10px; background: var(--lbg); border: 1px solid var(--lb); color: var(--lh); font-size: 14.5px; font-weight: 600; transition: all .3s ease; }
.clc__engage-card.is-featured .clc__engage-cta { background: var(--lp); border-color: var(--lp); color: #06140D; }
.clc__engage-cta:hover { background: var(--lp); border-color: var(--lp); color: #06140D; }

/* ---------- 08. Why 3Shadz: uniform icon-card grid ---------- */
.clc__why { padding: 130px 0; }
.clc__why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.clc__why-item { padding: 32px 28px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); transition: all .3s ease; }
.clc__why-item:hover { border-color: rgba(33, 208, 122, .4); transform: translateY(-4px); }
.clc__why-item h3 { font-family: var(--ldisplay); font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.clc__why-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--lmuted); margin: 0; }

/* ---------- 09. Platforms & frameworks we work with ---------- */
.clc__tools { padding: 130px 0; background: var(--lbg); }
.clc__tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 60px; }
.clc__tools-card { padding: 32px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--lb); }
.clc__tools-card .clc__ico { margin-bottom: 16px; }
.clc__tools-card h3 { font-family: var(--ldisplay); font-size: 17px; font-weight: 600; color: var(--lh); margin: 0 0 16px; }
.clc__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.clc__tags span { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 6px; background: var(--lbg); border: 1px solid var(--lb); color: var(--lt); }

/* ---------- 10. FAQ ---------- */
.clc__faq { padding: 130px 0 140px; background: #fff; }
.clc__faq-list { max-width: 860px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 14px; }
.clc__faq-item { border: 1px solid var(--lb); border-radius: 12px; overflow: hidden; background: var(--lbg); }
.clc__faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--lh);
  cursor: pointer;
}
.clc__faq-q[aria-expanded="true"] { color: var(--lp2); }
.clc__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--lp);
  font-size: 13px;
  border: 1px solid var(--lb);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.clc__faq-item.is-open .clc__faq-icon { transform: rotate(45deg); background: var(--lp); color: #fff; border-color: var(--lp); }
.clc__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.clc__faq-item.is-open .clc__faq-a { max-height: 420px; }
.clc__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--lt); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .clc__hero-title { font-size: 42px; }
  .clc__hero-layout { grid-template-columns: 1fr; gap: 44px; }
  .clc__hero-top { max-width: 100%; }
  .clc__cap-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .clc__cap-tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .clc__cap-tile:nth-child(1) { grid-column: 1 / 3; }
  .clc__ops-track { display: none; }
  .clc__ops-grid { grid-template-columns: repeat(2, 1fr); }
  .clc__tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .clc__hero { padding: 160px 0 90px; }
  .clc__hero-title { font-size: 34px; }
  .clc__intro, .clc__cap, .clc__ops, .clc__gauge, .clc__process, .clc__engage, .clc__why, .clc__tools, .clc__faq { padding: 90px 0; }
  .clc__intro-grid { grid-template-columns: 1fr; gap: 50px; }
  .clc__gauge-grid { grid-template-columns: repeat(2, 1fr); }
  .clc__engage-grid { grid-template-columns: 1fr 1fr; }
  .clc__why-grid { grid-template-columns: 1fr 1fr; }
  .clc__tools-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .clc__hero-title { font-size: 28px; }
  .clc__hero-lead { font-size: 16px; }
  .clc__blueprint-body { padding: 22px 18px 4px; }
  .clc__blueprint-layer { padding: 13px 14px; gap: 12px; }
  .clc__engage-grid, .clc__why-grid, .clc__tools-grid { grid-template-columns: 1fr; }
  .clc__ops-grid { grid-template-columns: 1fr; }
  .clc__cap-grid { grid-template-columns: 1fr; }
  .clc__cap-tile:nth-child(1) { grid-column: 1; }
  .clc__cap-tile--lg { padding: 34px 28px; }
  .clc__gauge-grid { grid-template-columns: 1fr; }
}

/* Users who ask for less motion get the page without the gauge
   fade-in or count-up / layer-cycle animation. */
@media (prefers-reduced-motion: reduce) {
  .clc__page * { transition-duration: .01ms !important; }
  .clc__console-cursor { animation: none; }
}


/* ============================================================
   CLOUD MIGRATION PAGE (clm__*)
   Scoped entirely to .clm__page (added on <main> of
   cloud-migration.html). A child capability page under the Cloud
   & DevOps pillar (cloud-devops.html), sibling of Cloud Consulting
   (clc__*) - so it keeps that pillar's exact palette (signal-green
   #21D07A / indigo #5B6EF5 on near-black #0A0E14, Space Grotesk
   display over Kanit body, JetBrains Mono for metrics) to read as
   unmistakably part of the same family, the same "keep the brand,
   change the composition" rule every child page under every pillar
   follows. The composition itself is entirely new: a horizontal
   "migration bridge" hero - a muted source-environment card and a
   lit target-environment card joined by a dashed transfer track
   that animated workload chips cross in a loop - replaces cdv's
   deploy runway and clc's architecture blueprint stack; migration
   approaches are shown as indexed "spine" cards instead of a
   console or icon grid; what gets migrated is a manifest-style
   ledger list instead of a card grid; the delivery lifecycle is a
   horizontal zig-zag stepper instead of a vertical timeline;
   minimizing disruption is a linear stat strip plus a
   cutover/rollback chip-flow instead of a gauge-ring or radar
   chart; and "why us" is a risk-versus-mitigation comparison
   ledger instead of a bento or icon-card grid. Keyframes are
   prefixed clmKf* so nothing collides with the rest of the theme.
   Nothing in this block leaks to other pages.
   ============================================================ */
.clm__page {
  --mp: #21D07A;
  --mp2: #5B6EF5;
  --mp3: #7CFFC0;
  --mw: #FFB020;
  --mh: #10161C;
  --mh2: #101820;
  --mt: #56636B;
  --mb: #E1E7EA;
  --mbg: #F4F7F8;
  --mdarkbg: #0A0E14;
  --mmuted: #93A6AD;
  --mdisplay: "Space Grotesk", sans-serif;
  --mmono: "JetBrains Mono", monospace;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.clm__page .clm__eyebrow { display: inline-block; font-family: var(--mmono); font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--mp2); margin-bottom: 16px; }
.clm__page .clm__title { font-family: var(--mdisplay); font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--mh); margin: 0 0 20px; }
.clm__page .clm__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--mh); margin: 0 0 18px; }
.clm__page .clm__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mt); margin: 0 0 16px; }
.clm__page .clm__text:last-child { margin-bottom: 0; }
.clm__page .clm__head { max-width: 780px; }
.clm__page .clm__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.clm__page .clm__btn,
.clm__page .clm__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.clm__page .clm__btn { color: #06140D; background: var(--mp); border: 2px solid var(--mp); }
.clm__page .clm__btn:hover { background: var(--mp3); border-color: var(--mp3); color: #06140D; }
.clm__page .clm__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .35); background: transparent; }
.clm__page .clm__btn-ghost:hover { background: #fff; color: var(--mdarkbg); border-color: #fff; }

.clm__page .clm__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(33, 208, 122, .1);
  color: var(--mp);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.clm__page .clm__dark { position: relative; overflow: hidden; background: var(--mdarkbg); }
.clm__page .clm__dark > .container { position: relative; z-index: 2; }
.clm__page .clm__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 8% -12%, rgba(91, 110, 245, .22), transparent 62%),
              radial-gradient(820px 460px at 96% 108%, rgba(33, 208, 122, .20), transparent 64%);
}
.clm__page .clm__dark .clm__eyebrow { color: var(--mp3); }
.clm__page .clm__dark .clm__title { color: #fff; }
.clm__page .clm__dark .clm__text { color: var(--mmuted); }

/* ---------- 01. Hero: migration bridge (source -> transfer track -> target) ---------- */
.clm__hero { position: relative; overflow: hidden; background: var(--mdarkbg); padding: 190px 0 110px; }
.clm__hero-glow-a { position: absolute; left: -10%; bottom: -15%; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(147, 166, 173, .16), transparent 70%); pointer-events: none; z-index: 0; }
.clm__hero-glow-b { position: absolute; right: -10%; top: -20%; width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(33, 208, 122, .20), transparent 70%); pointer-events: none; z-index: 0; }
.clm__hero-path { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.clm__hero-path svg { width: 100%; height: 100%; }
.clm__hero-path-line { fill: none; stroke: url(#clmPathGrad); stroke-width: 2; stroke-dasharray: 2 14; stroke-linecap: round; }
.clm__hero > .container { position: relative; z-index: 2; }
.clm__hero-top { max-width: 760px; margin: 0 auto 70px; text-align: center; }
.clm__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(33, 208, 122, .35);
  background: rgba(33, 208, 122, .08);
  color: var(--mp3);
  font-family: var(--mmono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.clm__hero-badge i { font-size: 12px; }
.clm__hero-title { font-family: var(--mdisplay); font-size: 50px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 22px; }
.clm__mark { position: relative; color: var(--mp3); }
.clm__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mp), var(--mp2));
}
.clm__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C4D2D6; margin: 0 auto 34px; max-width: 640px; }
.clm__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.clm__bridge { position: relative; display: flex; align-items: center; padding: 34px 30px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
.clm__bridge-env { flex: 0 0 250px; display: flex; flex-direction: column; gap: 10px; }
.clm__bridge-env-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mmuted); }
.clm__bridge-env-dot:not(.clm__bridge-env-dot--muted) { background: var(--mp); box-shadow: 0 0 0 4px rgba(33, 208, 122, .18); }
.clm__bridge-env-label { font-family: var(--mmono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mmuted); }
.clm__bridge-env--target .clm__bridge-env-label { color: #fff; }
.clm__bridge-tags { display: flex; flex-direction: column; gap: 8px; }
.clm__bridge-tags span { font-size: 12.5px; font-weight: 400; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #C4D2D6; }
.clm__bridge-tags--target span { background: rgba(33, 208, 122, .08); border-color: rgba(33, 208, 122, .3); color: #fff; }
.clm__bridge-status { align-self: flex-start; font-family: var(--mmono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--mmuted); }
.clm__bridge-status--live { background: rgba(33, 208, 122, .14); color: var(--mp3); }

.clm__bridge-track { position: relative; flex: 1; height: 70px; margin: 0 26px; overflow: hidden; }
.clm__bridge-track-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 8px, transparent 8px 18px); transform: translateY(-1px); }
.clm__bridge-gate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mmono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mp3); background: var(--mdarkbg); padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(124, 255, 192, .4); z-index: 2; white-space: nowrap; }
.clm__bridge-gate i { font-size: 13px; }
.clm__bridge-chip {
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--mp2), var(--mp));
  color: #06140D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1;
  animation: clmKfChipMove 6s linear infinite;
  animation-delay: var(--d);
}
@keyframes clmKfChipMove {
  0% { left: -2%; opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 102%; opacity: 0; }
}

/* ---------- 02. Introduction ---------- */
.clm__intro { padding: 130px 0; background: #fff; }
.clm__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.clm__intro-figure { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(16, 22, 28, .13); }
.clm__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clm__intro-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: #fff;
  border-left: 3px solid var(--mp2);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(16, 22, 28, .16);
}
.clm__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--mh); line-height: 1.3; margin-bottom: 4px; }
.clm__intro-badge span { font-size: 14px; font-weight: 300; color: var(--mt); }
.clm__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--mp2);
  background: var(--mbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mt);
}
.clm__intro-note a { color: var(--mp2); font-weight: 600; }
.clm__intro-note a:hover { color: var(--mp); }

/* ---------- 03. Migration approaches: indexed spine cards ---------- */
.clm__approach { padding: 130px 0 110px; background: var(--mbg); }
.clm__approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 60px; }
.clm__approach-card { position: relative; padding: 32px 28px 30px 34px; border-radius: 14px; background: #fff; border: 1px solid var(--mb); border-left: 4px solid var(--mp2); transition: all .3s ease; }
.clm__approach-card:hover { border-left-color: var(--mp); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(16, 22, 28, .08); }
.clm__approach-index { display: block; font-family: var(--mmono); font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--mp2); margin-bottom: 14px; }
.clm__approach-card h3 { font-family: var(--mdisplay); font-size: 19px; font-weight: 600; color: var(--mh); margin: 0 0 10px; }
.clm__approach-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--mt); margin: 0; }

/* ---------- 04. What we migrate: manifest ledger ---------- */
.clm__manifest { padding: 130px 0; background: #fff; }
.clm__ledger { max-width: 940px; margin: 60px auto 0; border-top: 1px solid var(--mb); }
.clm__ledger-row { display: flex; align-items: flex-start; gap: 34px; padding: 26px 20px; border-bottom: 1px solid var(--mb); }
.clm__ledger-row:nth-child(even) { background: var(--mbg); }
.clm__ledger-code { flex: 0 0 120px; font-family: var(--mmono); font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--mp2); padding-top: 3px; }
.clm__ledger-body h3 { font-family: var(--mdisplay); font-size: 19px; font-weight: 600; color: var(--mh); margin: 0 0 8px; }
.clm__ledger-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--mt); margin: 0; }

/* ---------- 05. Migration lifecycle: horizontal zig-zag stepper ---------- */
.clm__lifecycle { padding: 130px 0; background: var(--mbg); }
.clm__lifecycle-track { position: relative; display: flex; padding: 70px 0 40px; }
.clm__lifecycle-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--mp2), var(--mp)); transform: translateY(-1px); z-index: 1; }
.clm__lifecycle-step { position: relative; flex: 1; min-height: 220px; }
.clm__lifecycle-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--mp2); display: flex; align-items: center; justify-content: center; font-family: var(--mmono); font-size: 13px; font-weight: 700; color: var(--mp2); }
.clm__lifecycle-card { position: absolute; left: 50%; width: 180px; transform: translateX(-50%); background: #fff; border: 1px solid var(--mb); border-radius: 12px; padding: 18px 16px; text-align: center; z-index: 2; }
.clm__lifecycle-step.is-up .clm__lifecycle-card { bottom: calc(50% + 30px); }
.clm__lifecycle-step.is-down .clm__lifecycle-card { top: calc(50% + 30px); }
.clm__lifecycle-connector { position: absolute; left: 50%; width: 2px; background: var(--mb); transform: translateX(-50%); z-index: 2; }
.clm__lifecycle-step.is-up .clm__lifecycle-connector { bottom: 50%; height: 30px; }
.clm__lifecycle-step.is-down .clm__lifecycle-connector { top: 50%; height: 30px; }
.clm__lifecycle-card h3 { font-family: var(--mdisplay); font-size: 15.5px; font-weight: 600; color: var(--mh); margin: 0 0 6px; }
.clm__lifecycle-card p { font-size: 12.5px; font-weight: 300; color: var(--mt); line-height: 1.55; margin: 0; }

/* ---------- 06. Minimizing disruption: stat strip + cutover/rollback flow ---------- */
.clm__safety { padding: 130px 0; }
.clm__stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.clm__stat { padding: 28px 20px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 8px; }
.clm__stat:first-child { border-left: none; }
.clm__stat strong { font-family: var(--mdisplay); font-size: 19px; font-weight: 600; color: #fff; }
.clm__stat span { font-family: var(--mmono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mmuted); }

.clm__flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 56px; position: relative; }
.clm__flow-step { padding: 14px 26px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font-family: var(--mdisplay); font-size: 15px; font-weight: 600; color: #fff; }
.clm__flow-step.is-gate { background: rgba(33, 208, 122, .14); border-color: rgba(33, 208, 122, .4); color: var(--mp3); }
.clm__flow > i { color: var(--mmuted); font-size: 14px; }
.clm__flow-rollback { flex-basis: 100%; text-align: center; margin-top: 14px; font-size: 13.5px; font-weight: 300; color: var(--mmuted); }
.clm__flow-rollback i { color: var(--mp3); margin-right: 6px; }

/* ---------- 07. Why 3Shadz: risk vs. mitigation ledger ---------- */
.clm__risk { padding: 130px 0; background: #fff; }
.clm__risk-list { max-width: 1040px; margin: 60px auto 0; display: flex; flex-direction: column; gap: 14px; }
.clm__risk-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 14px; background: var(--mbg); border: 1px solid var(--mb); }
.clm__risk-bad, .clm__risk-good { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; font-weight: 400; line-height: 1.6; }
.clm__risk-bad { color: var(--mt); }
.clm__risk-bad i { color: var(--mw); margin-top: 3px; flex: none; }
.clm__risk-good { color: var(--mh); }
.clm__risk-good i { color: var(--mp); margin-top: 3px; flex: none; }
.clm__risk-arrow { color: var(--mp2); font-size: 15px; }

/* ---------- 08. Migration tooling ---------- */
.clm__tools { padding: 130px 0; background: var(--mbg); }
.clm__tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 60px; }
.clm__tools-card { padding: 32px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--mb); }
.clm__tools-card .clm__ico { margin-bottom: 16px; }
.clm__tools-card h3 { font-family: var(--mdisplay); font-size: 17px; font-weight: 600; color: var(--mh); margin: 0 0 16px; }
.clm__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.clm__tags span { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 6px; background: var(--mbg); border: 1px solid var(--mb); color: var(--mt); }

/* ---------- 09. FAQ ---------- */
.clm__faq { padding: 130px 0 140px; background: #fff; }
.clm__faq-list { max-width: 860px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 14px; }
.clm__faq-item { border: 1px solid var(--mb); border-radius: 12px; overflow: hidden; background: var(--mbg); }
.clm__faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--mh);
  cursor: pointer;
}
.clm__faq-q[aria-expanded="true"] { color: var(--mp2); }
.clm__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--mp);
  font-size: 13px;
  border: 1px solid var(--mb);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.clm__faq-item.is-open .clm__faq-icon { transform: rotate(45deg); background: var(--mp); color: #fff; border-color: var(--mp); }
.clm__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.clm__faq-item.is-open .clm__faq-a { max-height: 420px; }
.clm__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--mt); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .clm__hero-title { font-size: 42px; }
  .clm__approach-grid { grid-template-columns: repeat(2, 1fr); }
  .clm__tools-grid { grid-template-columns: repeat(2, 1fr); }
  .clm__bridge { flex-wrap: wrap; }
  .clm__bridge-track { flex: 0 0 100%; order: 3; margin: 20px 0 0; }
  .clm__bridge-env { flex: 1 1 auto; }
}

@media (max-width: 991px) {
  .clm__hero { padding: 160px 0 90px; }
  .clm__hero-title { font-size: 34px; }
  .clm__intro, .clm__approach, .clm__manifest, .clm__lifecycle, .clm__safety, .clm__risk, .clm__tools, .clm__faq { padding: 90px 0; }
  .clm__intro-grid { grid-template-columns: 1fr; gap: 50px; }
  .clm__stat-strip { grid-template-columns: 1fr 1fr; }
  .clm__stat:nth-child(3) { border-left: none; }
  .clm__stat { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .clm__tools-grid { grid-template-columns: 1fr 1fr; }
  .clm__risk-row { grid-template-columns: 1fr; text-align: left; }
  .clm__risk-arrow { display: none; }

  /* Lifecycle collapses to a simple vertical list on tablet/mobile */
  .clm__lifecycle-track { flex-direction: column; padding: 20px 0 0; }
  .clm__lifecycle-track::before { left: 23px; top: 0; bottom: 0; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--mp2), var(--mp)); }
  .clm__lifecycle-step { min-height: 0; padding: 0 0 40px 70px; }
  .clm__lifecycle-dot { top: 0; left: 23px; transform: translate(-50%, 0); }
  .clm__lifecycle-step.is-up .clm__lifecycle-card,
  .clm__lifecycle-step.is-down .clm__lifecycle-card { position: static; width: auto; max-width: 340px; transform: none; text-align: left; margin: 0; }
  .clm__lifecycle-connector { display: none; }
}

@media (max-width: 767px) {
  .clm__hero-title { font-size: 28px; }
  .clm__hero-lead { font-size: 16px; }
  .clm__approach-grid, .clm__tools-grid { grid-template-columns: 1fr; }
  .clm__stat-strip { grid-template-columns: 1fr; }
  .clm__stat { border-left: none; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .clm__ledger-row { flex-direction: column; gap: 8px; }
  .clm__ledger-code { flex: none; }

  /* Migration bridge stacks source -> track -> target vertically so
     tag pills never get squeezed into a too-narrow column. */
  .clm__bridge { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .clm__bridge-env { flex: 1 1 auto; width: 100%; }
  .clm__bridge-track { order: 2; width: 100%; margin: 26px 0; height: 56px; }
  .clm__bridge-env--target { order: 3; }
}

/* Users who ask for less motion get the page without the workload
   chips looping across the migration bridge. */
@media (prefers-reduced-motion: reduce) {
  .clm__page * { transition-duration: .01ms !important; }
  .clm__bridge-chip { animation: none; opacity: .9; left: 50%; }
}

/* ============================================================
   DEVOPS & AUTOMATION PAGE (dva__*)
   Scoped entirely to .dva__page (added on <main> of
   devops-automation.html). A child capability page under the Cloud
   & DevOps pillar (cloud-devops.html) - keeps that pillar's exact
   palette (signal-green #21D07A / indigo #5B6EF5 on near-black
   #0A0E14, Space Grotesk display over Kanit body, JetBrains Mono
   for metrics) so it reads as unmistakably part of the same family,
   while the composition is entirely new: the hero is a "convergence"
   diagram - five staggered, disconnected lanes (Development, Testing,
   Security, Infrastructure, Operations) that merge into a single
   automated trunk feeding a live Production node, replacing cdv's
   stage runway and clc's blueprint stack; capabilities are an
   editorial numbered row list instead of a console or card grid; a
   dedicated maturity-spectrum band visualises the Manual -> Fragmented
   -> Standardized -> Automated -> Observable -> Continuously Improving
   arc; a before/after bar-comparison band replaces cdv's gauge rings;
   "how we work" is a straight 5-step row closed by a dashed SVG
   return arc labelled "Feedback Loop" instead of a vertical timeline
   or zig-zag stepper; and "why us" is a numbered editorial grid
   instead of a bento or risk ledger. Keyframes are prefixed dvaKf* so
   nothing collides with the rest of the theme. Nothing in this block
   leaks to other pages.
   ============================================================ */
.dva__page {
  --dp: #21D07A;
  --dp2: #5B6EF5;
  --dp3: #7CFFC0;
  --dw: #FFB020;
  --dh: #10161C;
  --dh2: #101820;
  --dt: #56636B;
  --db: #E1E7EA;
  --dbg: #F4F7F8;
  --ddarkbg: #0A0E14;
  --dmuted: #93A6AD;
  --ddisplay: "Space Grotesk", sans-serif;
  --dmono: "JetBrains Mono", monospace;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.dva__page .dva__eyebrow { display: inline-block; font-family: var(--dmono); font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--dp2); margin-bottom: 16px; }
.dva__page .dva__title { font-family: var(--ddisplay); font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--dh); margin: 0 0 20px; }
.dva__page .dva__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dh); margin: 0 0 18px; }
.dva__page .dva__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dt); margin: 0 0 16px; }
.dva__page .dva__text:last-child { margin-bottom: 0; }
.dva__page .dva__head { max-width: 780px; }
.dva__page .dva__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.dva__page .dva__btn,
.dva__page .dva__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dva__page .dva__btn { color: #06140D; background: var(--dp); border: 2px solid var(--dp); }
.dva__page .dva__btn:hover { background: var(--dp3); border-color: var(--dp3); color: #06140D; }
.dva__page .dva__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .35); background: transparent; }
.dva__page .dva__btn-ghost:hover { background: #fff; color: var(--ddarkbg); border-color: #fff; }

.dva__page .dva__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dp2);
  transition: gap .3s ease, color .3s ease;
}
.dva__page .dva__link:hover { gap: 15px; color: var(--dp); }

.dva__page .dva__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(33, 208, 122, .1);
  color: var(--dp);
  font-size: 16px;
  flex: 0 0 auto;
}

.dva__page .dva__dark { position: relative; overflow: hidden; background: var(--ddarkbg); }
.dva__page .dva__dark > .container { position: relative; z-index: 2; }
.dva__page .dva__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -12%, rgba(91, 110, 245, .22), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(33, 208, 122, .20), transparent 64%);
}
.dva__page .dva__dark .dva__eyebrow { color: var(--dp3); }
.dva__page .dva__dark .dva__title { color: #fff; }
.dva__page .dva__dark .dva__text { color: var(--dmuted); }

/* ---------- 01. Hero: fragmented lanes converging into one automated trunk ---------- */
.dva__hero { position: relative; overflow: hidden; background: var(--ddarkbg); padding: 190px 0 0; }
.dva__hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(91, 110, 245, .22) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(820px 520px at 88% 0%, #000, transparent 70%);
          mask-image: radial-gradient(820px 520px at 88% 0%, #000, transparent 70%);
}
.dva__hero > .container { position: relative; z-index: 2; }
.dva__hero-columns { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.dva__hero-top { max-width: 620px; flex: 1 1 auto; }
.dva__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(33, 208, 122, .35);
  background: rgba(33, 208, 122, .08);
  color: var(--dp3);
  font-family: var(--dmono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.dva__hero-badge i { font-size: 12px; }
.dva__hero-title { font-family: var(--ddisplay); font-size: 52px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.dva__mark { position: relative; color: var(--dp3); }
.dva__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dp), var(--dp2));
}
.dva__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C4D2D6; margin: 0 0 34px; max-width: 600px; }
.dva__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Live pipeline-run card: fills the hero's right column with a
   concrete, single-run readout (branch, commit, step checklist,
   elapsed timer) - the "micro" companion to the "macro" convergence
   diagram below, and deliberately not another status/uptime list
   (cdv) or CLI scoring console (clc). */
.dva__hero-run {
  flex: 0 0 360px;
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(16, 24, 32, .55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  padding: 22px 22px 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.dva__run-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.dva__run-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--dp); box-shadow: 0 0 0 4px rgba(33, 208, 122, .18); }
.dva__run-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--dp); opacity: .6; animation: dvaKfPing 2.4s ease-out infinite; }
.dva__run-title { flex: 1; font-family: var(--dmono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.dva__run-branch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--dmono); font-size: 11px; color: var(--dmuted); background: rgba(255, 255, 255, .06); padding: 4px 9px; border-radius: 6px; }
.dva__run-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--dmono); font-size: 11.5px; }
.dva__run-commit { flex: none; color: var(--dp3); font-weight: 600; }
.dva__run-msg { color: var(--dmuted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dva__run-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dva__run-step { display: flex; align-items: center; gap: 12px; }
.dva__run-step-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; background: rgba(255, 255, 255, .06); color: var(--dmuted); border: 1px solid rgba(255, 255, 255, .14); }
.dva__run-step.is-done .dva__run-step-icon { background: var(--dp); border-color: var(--dp); color: #06140D; }
.dva__run-step.is-active .dva__run-step-icon { border-color: var(--dp2); background: rgba(91, 110, 245, .12); }
.dva__run-spinner { width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(91, 110, 245, .3); border-top-color: var(--dp2); animation: dvaKfSpin .8s linear infinite; }
.dva__run-step-label { flex: 1; font-size: 13.5px; font-weight: 400; color: #C4D2D6; }
.dva__run-step.is-done .dva__run-step-label { color: #fff; }
.dva__run-step.is-pending .dva__run-step-label { color: var(--dmuted); }
.dva__run-step-time { flex: none; font-family: var(--dmono); font-size: 11px; color: var(--dmuted); }
.dva__run-step.is-active .dva__run-step-time { color: var(--dp3); }
@keyframes dvaKfSpin { to { transform: rotate(360deg); } }
.dva__run-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .12); font-size: 11.5px; font-weight: 300; color: var(--dmuted); }
.dva__run-foot strong { color: #fff; font-weight: 600; }
.dva__run-elapsed { flex: none; font-family: var(--dmono); font-size: 13px; font-weight: 600; color: #fff; }

/* Convergence diagram: the hero's actual visual centerpiece. Five
   staggered lanes (deliberately offset, not aligned, to read as
   "fragmented") run into a single merge node, then one trunk line
   continues to a live "Production" endpoint. */
.dva__flow { position: relative; z-index: 2; margin-top: 60px; padding: 46px 0 54px; border-top: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); }
.dva__flow-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(80px, 1fr) auto; align-items: center; gap: 0 22px; }
.dva__flow-lanes { display: flex; flex-direction: column; gap: 15px; }
.dva__flow-lane { display: flex; align-items: center; gap: 12px; }
.dva__flow-lane:nth-child(2) { margin-left: 34px; }
.dva__flow-lane:nth-child(3) { margin-left: 0; }
.dva__flow-lane:nth-child(4) { margin-left: 52px; }
.dva__flow-lane:nth-child(5) { margin-left: 18px; }
.dva__flow-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--dmono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3px;
  color: #C4D2D6;
  white-space: nowrap;
}
.dva__flow-tag i { color: var(--dp3); font-size: 11px; }
.dva__flow-track { flex: 1 1 auto; height: 2px; min-width: 30px; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px); }
.dva__flow-node {
  justify-self: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dp2), var(--dp));
  color: #06140D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 0 0 9px rgba(33, 208, 122, .12);
}
.dva__flow-trunk { position: relative; height: 2px; background: rgba(255, 255, 255, .2); }
.dva__flow-trunk-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--dp3);
  box-shadow: 0 0 14px 4px rgba(124, 255, 192, .6);
  animation: dvaKfTrunk 2.6s linear infinite;
}
@keyframes dvaKfTrunk { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.dva__flow-end { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; font-family: var(--dmono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }
.dva__flow-end-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--dp); }
.dva__flow-end-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--dp); opacity: .6; animation: dvaKfPing 2.4s ease-out infinite; }
@keyframes dvaKfPing { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }

/* ---------- 02. Introduction ---------- */
.dva__intro { padding: 130px 0; background: #fff; }
.dva__intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.dva__intro-figure { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(16, 22, 28, .13); }
.dva__intro-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dva__intro-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  background: #fff;
  border-left: 3px solid var(--dp);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  box-shadow: 0 14px 30px rgba(16, 22, 28, .16);
}
.dva__intro-badge strong { display: block; font-size: 17px; font-weight: 600; color: var(--dh); line-height: 1.3; margin-bottom: 4px; }
.dva__intro-badge span { font-size: 14px; font-weight: 300; color: var(--dt); }
.dva__intro-note {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--dp2);
  background: var(--dbg);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--dt);
}
.dva__intro-note a { color: var(--dp2); font-weight: 600; }
.dva__intro-note a:hover { color: var(--dp); }

/* ---------- 03. Capabilities: editorial numbered row list ---------- */
.dva__caps { padding: 130px 0 110px; background: var(--dbg); }
.dva__cap-list { margin-top: 56px; border-top: 1px solid var(--db); }
.dva__cap-row { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 34px 6px; border-bottom: 1px solid var(--db); transition: background .3s ease; }
.dva__cap-row:hover { background: rgba(33, 208, 122, .05); }
.dva__cap-num { font-family: var(--ddisplay); font-size: 32px; font-weight: 600; color: var(--db); line-height: 1; transition: color .3s ease; }
.dva__cap-row:hover .dva__cap-num { color: var(--dp); }
.dva__cap-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.dva__cap-body h3 { font-family: var(--ddisplay); font-size: 20px; font-weight: 600; color: var(--dh); margin: 0; }
.dva__cap-body p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dt); margin: 0 0 14px; max-width: 760px; }
.dva__cap-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dva__cap-tags span { font-family: var(--dmono); font-size: 11.5px; padding: 5px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--db); color: var(--dt); }

/* ---------- 04. Maturity spectrum: Manual -> Continuously Improving ---------- */
.dva__spectrum { padding: 130px 0; }
.dva__spectrum-track { position: relative; margin-top: 70px; display: flex; justify-content: space-between; gap: 6px; }
.dva__spectrum-track::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(147, 166, 173, .35), var(--dp2) 45%, var(--dp) 78%, var(--dp3)); }
.dva__spectrum-stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 34px; }
.dva__spectrum-dot { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; z-index: 2; background: var(--dmuted); border: 3px solid var(--ddarkbg); }
.dva__spectrum-stage:nth-child(2) .dva__spectrum-dot { background: #93A6AD; }
.dva__spectrum-stage:nth-child(3) .dva__spectrum-dot { background: var(--dp2); }
.dva__spectrum-stage:nth-child(4) .dva__spectrum-dot { background: var(--dp2); }
.dva__spectrum-stage:nth-child(5) .dva__spectrum-dot { background: var(--dp); box-shadow: 0 0 0 5px rgba(33, 208, 122, .16); }
.dva__spectrum-stage:nth-child(6) .dva__spectrum-dot { background: var(--dp3); box-shadow: 0 0 0 6px rgba(124, 255, 192, .18); }
.dva__spectrum-stage h3 { font-family: var(--ddisplay); font-size: 15px; font-weight: 600; color: #fff; margin: 16px 0 8px; }
.dva__spectrum-stage p { font-size: 12.5px; font-weight: 300; line-height: 1.65; color: var(--dmuted); margin: 0; max-width: 152px; }

/* ---------- 05. What changes: before / after bar comparison ---------- */
.dva__shift { padding: 130px 0; background: #fff; }
.dva__shift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
.dva__shift-card { padding: 28px 24px; border-radius: 16px; background: var(--dbg); border: 1px solid var(--db); }
.dva__shift-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.dva__shift-card h3 { font-family: var(--ddisplay); font-size: 16px; font-weight: 600; color: var(--dh); margin: 0; }
.dva__shift-dir { flex: none; font-family: var(--dmono); font-size: 9.5px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--dt); padding: 4px 8px; border-radius: 5px; background: #fff; border: 1px solid var(--db); white-space: nowrap; }
.dva__shift-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dva__shift-bar-row:last-of-type { margin-bottom: 0; }
.dva__shift-bar-label { flex: 0 0 100px; font-family: var(--dmono); font-size: 10px; letter-spacing: .3px; text-transform: uppercase; color: var(--dt); }
.dva__shift-bar-track { flex: 1; height: 8px; border-radius: 5px; background: var(--db); overflow: hidden; }
.dva__shift-bar-fill { display: block; height: 100%; border-radius: 5px; }
.dva__shift-bar-fill--before { background: var(--dmuted); }
.dva__shift-bar-fill--after { background: linear-gradient(90deg, var(--dp2), var(--dp)); }
.dva__shift-value { flex: 0 0 auto; font-size: 11.5px; font-weight: 500; color: var(--dh); }
.dva__shift-note { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--dt); margin: 16px 0 0; }

/* ---------- 06. How we work: 5-step row closed by a dashed return arc ---------- */
.dva__loop { padding: 130px 0 100px; background: var(--dbg); }
.dva__loop-row { display: flex; margin-top: 60px; position: relative; }
.dva__loop-step { flex: 1; position: relative; padding: 0 16px; text-align: center; }
.dva__loop-step:not(:last-child)::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -2px;
  top: 22px;
  color: var(--db);
  font-size: 15px;
}
.dva__loop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dp2);
  font-family: var(--dmono);
  font-weight: 700;
  font-size: 14px;
  color: var(--dp2);
  margin-bottom: 18px;
}
.dva__loop-step h3 { font-family: var(--ddisplay); font-size: 16px; font-weight: 600; color: var(--dh); margin: 0 0 8px; }
.dva__loop-step p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; max-width: 200px; margin-left: auto; margin-right: auto; }

.dva__loop-return { position: relative; margin-top: 6px; height: 64px; }
.dva__loop-return svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dva__loop-return path { fill: none; stroke: var(--dp2); stroke-width: 2; stroke-dasharray: 5 8; }
.dva__loop-return-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-family: var(--dmono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dp2);
  background: var(--dbg);
  padding: 3px 12px;
}

/* ---------- 07. Why 3Shadz: numbered editorial grid ---------- */
.dva__why { padding: 130px 0; }
.dva__why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px 60px; margin-top: 60px; }
.dva__why-item { display: flex; gap: 22px; }
.dva__why-item:nth-child(5) { grid-column: 1 / -1; max-width: 620px; }
.dva__why-num { flex: 0 0 60px; font-family: var(--ddisplay); font-size: 36px; font-weight: 600; color: rgba(255, 255, 255, .16); line-height: 1; }
.dva__why-item h3 { font-family: var(--ddisplay); font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.dva__why-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--dmuted); margin: 0; }

/* ---------- 08. Stack: categorised platform/tool grid ---------- */
.dva__stack { padding: 130px 0; background: var(--dbg); }
.dva__stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.dva__stack-card { padding: 30px 26px; border-radius: 14px; background: #fff; border: 1px solid var(--db); border-top: 3px solid var(--dp); }
.dva__stack-card:nth-child(2) { border-top-color: var(--dp2); }
.dva__stack-card:nth-child(3) { border-top-color: var(--dw); }
.dva__stack-card:nth-child(4) { border-top-color: var(--dp2); }
.dva__stack-card:nth-child(5) { border-top-color: var(--dp); }
.dva__stack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dva__stack-card h3 { font-family: var(--ddisplay); font-size: 16.5px; font-weight: 600; color: var(--dh); margin: 0; }
.dva__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dva__tags span { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 6px; background: var(--dbg); border: 1px solid var(--db); color: var(--dt); }

/* ---------- 09. FAQ ---------- */
.dva__faq { padding: 130px 0 140px; background: #fff; }
.dva__faq-list { max-width: 860px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 14px; }
.dva__faq-item { border: 1px solid var(--db); border-radius: 12px; overflow: hidden; background: var(--dbg); }
.dva__faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--dh);
  cursor: pointer;
}
.dva__faq-q[aria-expanded="true"] { color: var(--dp2); }
.dva__faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--dp);
  font-size: 13px;
  border: 1px solid var(--db);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.dva__faq-item.is-open .dva__faq-icon { transform: rotate(45deg); background: var(--dp); color: #fff; border-color: var(--dp); }
.dva__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.dva__faq-item.is-open .dva__faq-a { max-height: 420px; }
.dva__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dt); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .dva__hero-run { display: none; }
  .dva__hero-top { max-width: 100%; }
  .dva__hero-title { font-size: 44px; }
  .dva__shift-grid { grid-template-columns: repeat(2, 1fr); }
  .dva__stack-grid { grid-template-columns: repeat(2, 1fr); }
  .dva__why-item:nth-child(5) { max-width: 100%; }
}

@media (max-width: 991px) {
  .dva__hero { padding-top: 160px; }
  .dva__hero-title { font-size: 36px; }
  .dva__intro, .dva__caps, .dva__spectrum, .dva__shift, .dva__loop, .dva__why, .dva__stack, .dva__faq { padding: 90px 0; }
  .dva__intro-grid { grid-template-columns: 1fr; gap: 50px; }
  .dva__why-grid { grid-template-columns: 1fr; }

  /* Convergence diagram stacks vertically: lanes, then node, then a
     short vertical trunk, then the production endpoint. */
  .dva__flow-inner { grid-template-columns: 1fr; justify-items: center; gap: 22px 0; }
  .dva__flow-lanes { width: 100%; }
  .dva__flow-lane, .dva__flow-lane:nth-child(2), .dva__flow-lane:nth-child(3), .dva__flow-lane:nth-child(4), .dva__flow-lane:nth-child(5) { margin-left: 0; }
  .dva__flow-trunk { width: 2px; height: 40px; }
  .dva__flow-trunk-pulse { animation: none; top: 0; left: 50%; margin-left: -5px; opacity: 1; }

  /* Maturity spectrum becomes a vertical stack with the connecting
     line running down the left instead of across the top. */
  .dva__spectrum-track { flex-direction: column; gap: 34px; align-items: flex-start; padding-left: 34px; }
  .dva__spectrum-track::before { left: 6px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, rgba(147, 166, 173, .35), var(--dp2) 45%, var(--dp) 78%, var(--dp3)); }
  .dva__spectrum-stage { align-items: flex-start; text-align: left; padding-top: 0; padding-left: 26px; }
  .dva__spectrum-dot { top: 4px; left: -34px; transform: none; }
  .dva__spectrum-stage p { max-width: 320px; }

  /* How-we-work row collapses to a vertical list; the return arc
     doesn't read well stacked, so it's hidden here. */
  .dva__loop-row { flex-direction: column; gap: 34px; }
  .dva__loop-step { text-align: left; padding: 0; display: flex; align-items: flex-start; gap: 18px; }
  .dva__loop-step:not(:last-child)::after { display: none; }
  .dva__loop-num { margin-bottom: 0; flex: none; }
  .dva__loop-step p { margin-left: 0; margin-right: 0; max-width: none; }
  .dva__loop-return { display: none; }
}

@media (max-width: 767px) {
  .dva__hero-title { font-size: 30px; }
  .dva__hero-lead { font-size: 16px; }
  .dva__cap-row { grid-template-columns: 1fr; gap: 12px; }
  .dva__shift-grid { grid-template-columns: 1fr; }
  .dva__stack-grid { grid-template-columns: 1fr; }
}

/* Users who ask for less motion get the page without the travelling
   deploy pulse or the live-endpoint ping. */
@media (prefers-reduced-motion: reduce) {
  .dva__page * { transition-duration: .01ms !important; }
  .dva__flow-trunk-pulse { animation: none; opacity: 1; left: 50%; }
  .dva__flow-end-dot::after { animation: none; }
  .dva__run-dot::after { animation: none; }
  .dva__run-spinner { animation: none; }
}


/* ============================================================
   MANAGED CLOUD SERVICES PAGE (mcs__*)
   Scoped entirely to .mcs__page (added on <main> of
   managed-cloud-services.html). A child capability page under the
   Cloud & DevOps pillar (cloud-devops.html), sibling of Cloud
   Consulting (clc__*), Cloud Migration (clm__*) and DevOps &
   Automation (dva__*) - so it keeps that pillar's exact palette
   (signal-green #21D07A / indigo #5B6EF5 on near-black #0A0E14,
   Space Grotesk display over Kanit body, JetBrains Mono for
   metrics) to read as unmistakably part of the same family, the
   same "keep the brand, change the composition" rule every child
   page under every pillar follows. The composition itself is
   entirely new: a full-bleed "vital signs" hero - a heartbeat-style
   signal strip that starts sparse and muted (reactive oversight)
   and becomes a dense, travelling, rhythmic pulse (continuously
   managed) - replaces cdv's deploy runway, clc's blueprint stack,
   clm's migration bridge and dva's converging lanes; capabilities
   are a layered infrastructure stack (application, data, compute,
   security) with a cross-cutting cost & governance strip running
   alongside every layer, instead of a console, radar chart, spine
   cards or editorial row list; an asymmetric horizontal "lifecycle"
   line shows a short pre-launch cluster feeding into a long,
   fading-at-the-edge operating stretch instead of a symmetric
   runway or zig-zag stepper; monitoring is a small multi-card
   waveform grid instead of gauge rings or a bar chart; before/after
   is a qualitative two-panel comparison (no invented statistics)
   instead of clm's stat strip or dva's bar-fill chart; "how we
   operate" is a circular operating loop with nodes orbiting a
   centred "Your Environment" hub and a travelling dot, instead of a
   vertical timeline, blueprint stack, zig-zag stepper or straight
   row with a return arc; and "why us" is a typographic editorial
   split with a single supporting photograph, instead of a bento,
   icon-card grid, risk ledger or numbered grid. Keyframes are
   prefixed mcsKf* so nothing collides with the rest of the theme.
   Nothing in this block leaks to other pages.
   ============================================================ */
.mcs__page {
  --op: #21D07A;
  --op2: #5B6EF5;
  --op3: #7CFFC0;
  --ow: #FFB020;
  --oh: #10161C;
  --oh2: #101820;
  --ot: #56636B;
  --ob: #E1E7EA;
  --obg: #F4F7F8;
  --odarkbg: #0A0E14;
  --omuted: #93A6AD;
  --odisplay: "Space Grotesk", sans-serif;
  --omono: "JetBrains Mono", monospace;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.mcs__page .mcs__eyebrow { display: inline-block; font-family: var(--omono); font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--op2); margin-bottom: 16px; }
.mcs__page .mcs__title { font-family: var(--odisplay); font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--oh); margin: 0 0 20px; }
.mcs__page .mcs__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--oh); margin: 0 0 18px; }
.mcs__page .mcs__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ot); margin: 0 0 16px; }
.mcs__page .mcs__text:last-child { margin-bottom: 0; }
.mcs__page .mcs__head { max-width: 780px; }
.mcs__page .mcs__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.mcs__page .mcs__btn,
.mcs__page .mcs__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.mcs__page .mcs__btn { color: #06140D; background: var(--op); border: 2px solid var(--op); }
.mcs__page .mcs__btn:hover { background: var(--op3); border-color: var(--op3); color: #06140D; }
.mcs__page .mcs__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .35); background: transparent; }
.mcs__page .mcs__btn-ghost:hover { background: #fff; color: var(--odarkbg); border-color: #fff; }

.mcs__page .mcs__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--op2);
  transition: gap .3s ease, color .3s ease;
}
.mcs__page .mcs__link:hover { gap: 15px; color: var(--op); }

.mcs__page .mcs__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(33, 208, 122, .1);
  color: var(--op);
  font-size: 20px;
  flex: 0 0 auto;
}

.mcs__page .mcs__dark { position: relative; overflow: hidden; background: var(--odarkbg); }
.mcs__page .mcs__dark > .container { position: relative; z-index: 2; }
.mcs__page .mcs__dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -12%, rgba(91, 110, 245, .22), transparent 62%),
              radial-gradient(820px 460px at 4% 108%, rgba(33, 208, 122, .20), transparent 64%);
}
.mcs__page .mcs__dark .mcs__eyebrow { color: var(--op3); }
.mcs__page .mcs__dark .mcs__title { color: #fff; }
.mcs__page .mcs__dark .mcs__text { color: var(--omuted); }

.mcs__mark { position: relative; color: var(--op3); }
.mcs__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--op), var(--op2));
}

/* ---------- 01. Hero: vital-signs signal strip ---------- */
.mcs__hero { position: relative; overflow: hidden; background: var(--odarkbg); padding: 190px 0 0; }
.mcs__hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(33, 208, 122, .09) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(33, 208, 122, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(820px 520px at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(820px 520px at 50% 0%, #000, transparent 72%);
}
.mcs__hero > .container { position: relative; z-index: 2; }
.mcs__hero-top { max-width: 720px; margin: 0 auto; text-align: center; }
.mcs__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--omono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--op3);
  background: rgba(124, 255, 192, .08);
  border: 1px solid rgba(124, 255, 192, .25);
  padding: 9px 18px;
  border-radius: 30px;
  margin-bottom: 26px;
}
.mcs__hero-title { font-family: var(--odisplay); font-size: 48px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 22px; }
.mcs__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C4D2D6; margin: 0 auto 34px; max-width: 620px; }
.mcs__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Full-bleed signal strip beneath the hero title block */
.mcs__signal { position: relative; z-index: 2; margin-top: 76px; padding: 0 0 54px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mcs__signal-inner { max-width: 1240px; margin: 0 auto; padding: 46px 40px 0; }
.mcs__signal-chart { position: relative; width: 100%; height: 190px; }
.mcs__signal-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mcs__signal-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mcs__signal-path--before { stroke: rgba(147, 166, 173, .55); stroke-width: 2; }
.mcs__signal-path--after { stroke: var(--op3); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(124, 255, 192, .45)); }
.mcs__signal-divline { stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mcs__signal-sweep {
  position: absolute;
  top: 0; bottom: 0; left: -22%;
  width: 20%;
  background: linear-gradient(90deg, transparent, rgba(124, 255, 192, .5), transparent);
  clip-path: inset(0 0 0 35%);
  animation: mcsKfSweep 3.4s linear infinite;
  pointer-events: none;
}
.mcs__signal-flag {
  position: absolute;
  left: 35%;
  top: -16px;
  transform: translateX(-50%);
  font-family: var(--omono);
  font-size: 11px;
  letter-spacing: .5px;
  color: #fff;
  background: var(--op2);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.mcs__signal-zones { display: flex; margin-top: 14px; }
.mcs__signal-zone { display: flex; flex-direction: column; gap: 4px; }
.mcs__signal-zone--before { flex: 0 0 35%; }
.mcs__signal-zone--after { flex: 0 0 65%; padding-left: 4px; }
.mcs__signal-zone strong { font-family: var(--odisplay); font-size: 15px; font-weight: 600; color: #fff; }
.mcs__signal-zone--after strong { color: var(--op3); }
.mcs__signal-zone span { font-size: 12.5px; font-weight: 300; color: var(--omuted); }
.mcs__signal-layers { display: flex; flex-wrap: wrap; gap: 22px 28px; margin: 26px 0 0 35%; }
.mcs__signal-layer { display: inline-flex; align-items: center; gap: 8px; font-family: var(--omono); font-size: 12px; color: #C4D2D6; }
.mcs__signal-layer-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--op); }
.mcs__signal-layer-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--op);
  opacity: 0;
  animation: mcsKfPing 2.2s ease-out infinite;
  animation-delay: var(--d, 0s);
}

/* ---------- 02. Introduction ---------- */
.mcs__intro { padding: 140px 0; background: #fff; }
.mcs__intro-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; }
.mcs__intro-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ob);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ot);
}
.mcs__intro-note a { color: var(--op2); font-weight: 500; }
.mcs__intro-figure img { width: 100%; border-radius: 18px; display: block; }
.mcs__intro-caption { margin-top: 16px; font-size: 13.5px; font-style: italic; font-weight: 300; color: var(--ot); line-height: 1.7; }

/* ---------- 03. From Go-Live to Continuous Operations: asymmetric horizon line ---------- */
.mcs__horizon { padding: 130px 0 150px; background: var(--obg); }
.mcs__horizon-track { position: relative; height: 200px; margin-top: 80px; }
.mcs__horizon-line {
  position: absolute; left: 0; right: 0; top: 96px; height: 2px;
  background: linear-gradient(90deg, var(--ob) 0%, var(--ob) 33%, var(--op2) 40%, var(--op) 56%, var(--op) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
}
.mcs__horizon-pre, .mcs__horizon-golive, .mcs__horizon-post {
  position: absolute; top: 96px; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.mcs__horizon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--omuted); border: 2px solid var(--obg); }
.mcs__horizon-pre em { font-style: normal; font-family: var(--omono); font-size: 11px; color: var(--omuted); white-space: nowrap; }
.mcs__horizon-golive { z-index: 2; }
.mcs__horizon-golive-dot { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--op2); border: 3px solid var(--obg); }
.mcs__horizon-golive-dot::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--op2);
  opacity: .55; animation: mcsKfPing 2.4s ease-out infinite;
}
.mcs__horizon-golive strong { font-family: var(--odisplay); font-size: 15px; font-weight: 600; color: var(--oh); }
.mcs__horizon-callout {
  position: absolute; font-size: 12.5px; font-style: italic; font-weight: 300; white-space: nowrap;
}
.mcs__horizon-callout--pre { top: -42px; color: var(--ot); }
.mcs__horizon-callout--post { left: 62%; top: 150px; max-width: 300px; white-space: normal; color: var(--op); font-weight: 500; }
.mcs__horizon-post-ico {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(33, 208, 122, .12); color: var(--op);
  display: flex; align-items: center; justify-content: center; font-size: 13px; border: 2px solid var(--obg);
}
.mcs__horizon-post em { font-style: normal; font-family: var(--omono); font-size: 11px; color: var(--oh); white-space: nowrap; }

/* ---------- 04. Capabilities: layered infrastructure stack + cost/governance strip ---------- */
.mcs__caps { padding: 140px 0; background: #fff; }
.mcs__layers { position: relative; margin-top: 60px; }
.mcs__layers-stack { display: flex; flex-direction: column; padding-right: 250px; }
.mcs__layer {
  display: grid; grid-template-columns: 270px 1fr; column-gap: 36px; row-gap: 12px;
  padding: 38px 0; border-top: 1px solid var(--ob);
}
.mcs__layers-stack .mcs__layer:first-child { border-top: none; padding-top: 0; }
.mcs__layer-head { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: flex-start; gap: 16px; }
.mcs__layer-head h3 { font-family: var(--odisplay); font-size: 19px; font-weight: 600; color: var(--oh); margin: 8px 0 0; line-height: 1.35; }
.mcs__layer > p { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ot); }
.mcs__layer-tags { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.mcs__layer-tags span { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; background: var(--obg); border: 1px solid var(--ob); color: var(--ot); }
.mcs__layer-strip {
  position: absolute; top: 0; right: 0; bottom: 0; width: 230px;
  background: linear-gradient(165deg, rgba(33, 208, 122, .07), rgba(91, 110, 245, .07));
  border: 1px solid var(--ob); border-radius: 18px; padding: 30px 24px;
  display: flex; align-items: center;
}
.mcs__layer-strip-body h3 { font-family: var(--odisplay); font-size: 17px; font-weight: 600; color: var(--oh); margin: 16px 0 10px; line-height: 1.3; }
.mcs__layer-strip-body p { font-size: 13.5px; font-weight: 300; line-height: 1.75; color: var(--ot); margin: 0; }
.mcs__layer-connector { position: absolute; right: 230px; width: 20px; height: 0; border-top: 2px dashed rgba(33, 208, 122, .4); top: calc((var(--row) - 0.5) * 25%); }

/* ---------- 05. Signals we watch: mini waveform cards ---------- */
.mcs__signals { padding: 130px 0; background: var(--obg); }
.mcs__signals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 50px; }
.mcs__signal-card { padding: 30px 26px; background: #fff; border: 1px solid var(--ob); border-radius: 16px; }
.mcs__signal-card-wave { width: 100%; height: 40px; margin-bottom: 20px; display: block; }
.mcs__signal-card-wave polyline { fill: none; stroke: var(--op); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mcs__signal-card h3 { font-family: var(--odisplay); font-size: 17px; font-weight: 600; color: var(--oh); margin: 0 0 10px; }
.mcs__signal-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--ot); margin: 0; }

/* ---------- 06. Before / after: qualitative two-panel comparison ---------- */
.mcs__shift { padding: 130px 0; }
.mcs__shift-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin-top: 50px; }
.mcs__shift-col { padding: 40px 34px; border-radius: 18px; }
.mcs__shift-col--before { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.mcs__shift-col--after { background: rgba(33, 208, 122, .08); border: 1px solid rgba(33, 208, 122, .28); }
.mcs__shift-col h3 { font-family: var(--odisplay); font-size: 19px; font-weight: 600; margin: 0 0 24px; }
.mcs__shift-col--before h3 { color: #fff; }
.mcs__shift-col--after h3 { color: var(--op3); }
.mcs__shift-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 17px; }
.mcs__shift-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; font-weight: 300; line-height: 1.7; }
.mcs__shift-col--before li { color: var(--omuted); }
.mcs__shift-col--before li i { color: #8A97A0; margin-top: 4px; font-size: 12px; }
.mcs__shift-col--after li { color: #EAF3EE; }
.mcs__shift-col--after li i { color: var(--op3); margin-top: 4px; font-size: 12px; }
.mcs__shift-divider { position: relative; display: flex; align-items: center; justify-content: center; width: 74px; }
.mcs__shift-divider-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .28), transparent); }
.mcs__shift-divider-ico {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--odarkbg); border: 2px solid var(--op); color: var(--op);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}

/* ---------- 07. How we operate: circular operating loop ---------- */
.mcs__loop { padding: 140px 0 150px; background: #fff; }
.mcs__loop-ring { position: relative; width: 480px; height: 480px; max-width: 100%; margin: 74px auto 0; }
.mcs__loop-circle { position: absolute; inset: 40px; border-radius: 50%; border: 2px dashed var(--ob); }
.mcs__loop-dot {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--op); box-shadow: 0 0 0 5px rgba(33, 208, 122, .18); opacity: 0;
}
@supports (offset-path: circle(50px)) {
  .mcs__loop-dot { opacity: 1; offset-path: circle(200px at 50% 50%); offset-rotate: 0deg; animation: mcsKfOrbit 9s linear infinite; }
}
.mcs__loop-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 122px; height: 122px; border-radius: 50%; background: var(--obg); border: 1px solid var(--ob);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.mcs__loop-center span { font-size: 22px; color: var(--op); }
.mcs__loop-center em { font-style: normal; font-family: var(--omono); font-size: 10.5px; color: var(--ot); line-height: 1.3; }
.mcs__loop-node {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  transform: rotate(var(--ang)) translate(210px);
}
.mcs__loop-node-in {
  position: absolute; top: 0; left: 0; width: 172px;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--ang)));
  text-align: center; padding: 18px 16px; background: #fff; border: 1px solid var(--ob); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 22, 28, .07);
}
.mcs__loop-node-in .mcs__ico { width: 40px; height: 40px; font-size: 15px; margin: 0 auto 10px; }
.mcs__loop-node-in h3 { font-family: var(--odisplay); font-size: 15px; font-weight: 600; color: var(--oh); margin: 0 0 6px; }
.mcs__loop-node-in p { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--ot); margin: 0; }

/* ---------- 08. Why 3Shadz: editorial split with one supporting photo ---------- */
.mcs__why { padding: 140px 0; background: var(--obg); }
.mcs__why-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; align-items: start; }
.mcs__why-lead { position: sticky; top: 130px; }
.mcs__why-figure { margin-top: 32px; border-radius: 16px; overflow: hidden; }
.mcs__why-figure img { width: 100%; display: block; border-radius: 16px; }
.mcs__why-list { display: flex; flex-direction: column; }
.mcs__why-row { padding: 30px 0; border-top: 1px solid var(--ob); display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 4px 20px; }
.mcs__why-list .mcs__why-row:first-child { border-top: none; padding-top: 0; }
.mcs__why-idx { grid-column: 1; grid-row: 1 / 3; font-family: var(--omono); font-size: 13px; color: var(--op2); padding-top: 4px; }
.mcs__why-row h3 { grid-column: 2; grid-row: 1; font-family: var(--odisplay); font-size: 18px; font-weight: 600; color: var(--oh); margin: 0 0 10px; }
.mcs__why-row p { grid-column: 2; grid-row: 2; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ot); margin: 0; }

/* ---------- 09. Stack: single panel, labelled rows ---------- */
.mcs__stack { padding: 130px 0; }
.mcs__stack-panel { max-width: 980px; margin: 50px auto 0; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; }
.mcs__stack-row { padding: 26px 32px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.mcs__stack-panel .mcs__stack-row:first-child { border-top: none; }
.mcs__stack-row-head { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; min-width: 260px; }
.mcs__stack-row-head h3 { font-family: var(--odisplay); font-size: 16.5px; font-weight: 600; color: #fff; margin: 0; }
.mcs__stack-row .mcs__ico { width: 40px; height: 40px; font-size: 15px; background: rgba(124, 255, 192, .14); color: var(--op3); }
.mcs__tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: 1; }
.mcs__tags span { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 6px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--omuted); }

/* ---------- 10. FAQ ---------- */
.mcs__faq { padding: 130px 0 140px; background: #fff; }
.mcs__faq-list { max-width: 860px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 14px; }
.mcs__faq-item { border: 1px solid var(--ob); border-radius: 12px; overflow: hidden; background: var(--obg); }
.mcs__faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 26px; background: transparent; border: none; text-align: left;
  font-size: 16.5px; font-weight: 500; color: var(--oh); cursor: pointer;
}
.mcs__faq-q[aria-expanded="true"] { color: var(--op2); }
.mcs__faq-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--op); font-size: 13px; border: 1px solid var(--ob);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.mcs__faq-item.is-open .mcs__faq-icon { transform: rotate(45deg); background: var(--op); color: #fff; border-color: var(--op); }
.mcs__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mcs__faq-item.is-open .mcs__faq-a { max-height: 420px; }
.mcs__faq-a p { margin: 0; padding: 0 26px 24px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--ot); }

/* ---------- Keyframes ---------- */
@keyframes mcsKfSweep { from { left: -22%; } to { left: 100%; } }
@keyframes mcsKfPing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes mcsKfOrbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .mcs__hero-title { font-size: 40px; }
  .mcs__intro-grid { gap: 46px; }
  .mcs__layers-stack { padding-right: 0; }
  .mcs__layer-strip { position: static; width: 100%; margin-top: 30px; }
  .mcs__layer-connector { display: none; }
  .mcs__signals-grid { grid-template-columns: repeat(2, 1fr); }
  .mcs__why-grid { grid-template-columns: 1fr; }
  .mcs__why-lead { position: static; }
}

@media (max-width: 991px) {
  .mcs__hero { padding-top: 160px; }
  .mcs__hero-title { font-size: 34px; }
  .mcs__intro, .mcs__horizon, .mcs__caps, .mcs__signals, .mcs__shift, .mcs__loop, .mcs__why, .mcs__stack, .mcs__faq { padding: 90px 0; }
  .mcs__intro-grid { grid-template-columns: 1fr; }
  .mcs__intro-figure { order: -1; }

  .mcs__signal-inner { padding: 40px 22px 0; }
  .mcs__signal-layers { margin-left: 0; }
  .mcs__signal-zones { flex-direction: column; gap: 16px; }
  .mcs__signal-zone--before, .mcs__signal-zone--after { flex: none; padding-left: 0; }

  /* Horizon line collapses to a vertical, left-aligned list */
  .mcs__horizon-track { height: auto; display: flex; flex-direction: column; gap: 26px; margin-top: 50px; padding-left: 10px; }
  .mcs__horizon-line { display: none; }
  .mcs__horizon-pre, .mcs__horizon-golive, .mcs__horizon-post {
    position: static; transform: none; flex-direction: row; align-items: center; gap: 14px; justify-content: flex-start;
  }
  .mcs__horizon-callout { position: static; margin-top: 6px; }
  .mcs__horizon-callout--pre, .mcs__horizon-callout--post { max-width: none; white-space: normal; }

  .mcs__layer { grid-template-columns: 1fr; }
  .mcs__layer-head { grid-row: auto; grid-column: 1; margin-bottom: 10px; }
  .mcs__layer > p, .mcs__layer-tags { grid-column: 1; grid-row: auto; }

  .mcs__shift-grid { grid-template-columns: 1fr; }
  .mcs__shift-divider { width: 100%; height: 60px; }
  .mcs__shift-divider-line { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); }
  .mcs__shift-divider-ico { transform: rotate(90deg); }

  .mcs__loop-ring { width: 100%; height: auto; margin-top: 40px; }
  .mcs__loop-circle, .mcs__loop-dot, .mcs__loop-center { display: none; }
  .mcs__loop-node { position: static; transform: none; width: 100%; margin-bottom: 16px; }
  .mcs__loop-node-in { width: 100%; text-align: left; }
  .mcs__loop-node-in .mcs__ico { margin: 0 0 12px; }

  .mcs__stack-row { flex-direction: column; align-items: flex-start; }
  .mcs__tags { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .mcs__hero-title { font-size: 28px; }
  .mcs__hero-lead { font-size: 16px; }
  .mcs__signals-grid { grid-template-columns: 1fr; }
}

/* Users who ask for less motion get the page without the travelling
   signal sweep, the orbiting loop dot, or the pinging beacons. */
@media (prefers-reduced-motion: reduce) {
  .mcs__page * { transition-duration: .01ms !important; }
  .mcs__signal-sweep { animation: none; display: none; }
  .mcs__signal-layer-dot::after { animation: none; }
  .mcs__horizon-golive-dot::after { animation: none; }
  .mcs__loop-dot { animation: none; opacity: 0; }
}


/* ============================================================
   DATA & ANALYTICS PAGE (dax__*)
   Scoped entirely to .dax__page (added on <main> of
   data-analytics.html). A top-level Services pillar page, sibling
   of .aisol__page (blue #005fcc / violet, dark), .dex__page
   (coral/amber on cream), .swe__page (teal/copper on cool paper)
   and .cdv__page (signal-green/indigo on near-black) - so it
   claims a hue family none of them touch: a cyan-turquoise
   "data current" primary (#17B4CB) with an amber-gold "insight"
   secondary (#F2B33D) and a rose tertiary reserved for rare
   emphasis, on a cool indigo-charcoal dark (#0B1613 blue-black,
   distinct from cdv's green-black and swe's teal-black) paired
   with light sections in a cool paper-blue (#F5F8FC, distinct from
   dex's warm cream and swe's cool grey paper). Manrope is used as
   a geometric display face over Kanit body copy - used nowhere
   else on the site - with tabular numerals for stat figures
   instead of a dedicated mono face. Component language is its
   own: a hero built as a left-aligned title over a full-width
   animated data-flow diagram (Sources -> Pipelines -> Warehouse ->
   Insight, with travelling packets and a "governed end-to-end"
   pill) instead of a centred console (aisol), split canvas with
   pins (dex), blueprint node inspector (swe) or deploy runway
   (cdv); capabilities are a horizontal snap-scroll rail of five
   full detail cards with dot/arrow navigation instead of zig-zag
   rows, tabs, drawer stack or sidebar console; "how we work" is a
   horizontal pipeline with a single travelling pulse dot; proof is
   a qualitative stat-list beside a dashboard screenshot (no
   invented performance numbers); "why us" is an asymmetric bento
   of dashboard-styled tiles with a decorative mini bar-chart on
   the lead tile; and the tool stack is a plain four-column spec
   list instead of a scrolling marquee or tag-card grid. Keyframes
   are prefixed daxKf* so nothing collides with the rest of the
   theme. Nothing in this block leaks to other pages.
   ============================================================ */
.dax__page {
  --dax: #17B4CB;
  --dax2: #F2B33D;
  --dax3: #E85D8A;
  --daxh: #131A2B;
  --daxt: #5B6478;
  --daxb: #E2E7F0;
  --daxbg: #F5F8FC;
  --daxdark: #0B0F1A;
  --daxdark2: #121A33;
  --daxmuted: #94A0C2;
  --daxdisplay: "Manrope", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.dax__page .dax__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dax);
  margin-bottom: 16px;
}
.dax__page .dax__title {
  font-family: var(--daxdisplay);
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--daxh);
  margin: 0 0 20px;
}
.dax__page .dax__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--daxh); margin: 0 0 18px; }
.dax__page .dax__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--daxt); margin: 0 0 16px; }
.dax__page .dax__text:last-child { margin-bottom: 0; }
.dax__page .dax__head { max-width: 780px; }
.dax__page .dax__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.dax__page .dax__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--daxdark) 0%, var(--daxdark2) 100%); }
.dax__page .dax__dark > .container { position: relative; z-index: 2; }
.dax__page .dax__dark .dax__eyebrow { color: var(--dax3); }
.dax__page .dax__dark .dax__title { color: #fff; }
.dax__page .dax__dark .dax__text { color: var(--daxmuted); }

.dax__page .dax__btn,
.dax__page .dax__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dax__page .dax__btn { color: #06222B; background: var(--dax); border: 2px solid var(--dax); }
.dax__page .dax__btn:hover { background: #4FD6E8; border-color: #4FD6E8; color: #06222B; }
.dax__page .dax__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.dax__page .dax__btn-ghost:hover { background: #fff; color: var(--daxdark); border-color: #fff; }

.dax__page .dax__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dax);
  transition: gap .3s ease, color .3s ease;
}
.dax__page .dax__link:hover { gap: 15px; color: #0F8FA0; }

.dax__page .dax__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(23, 180, 203, .1);
  color: var(--dax);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: title over a full-width animated data-flow diagram ---------- */
.dax__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--daxdark) 0%, var(--daxdark2) 100%);
  padding: 190px 0 100px;
}
.dax__hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(23, 180, 203, .10) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(23, 180, 203, .10) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(900px 560px at 18% 8%, #000, transparent 72%);
          mask-image: radial-gradient(900px 560px at 18% 8%, #000, transparent 72%);
}
.dax__hero-glow { position: absolute; border-radius: 50%; filter: blur(86px); opacity: .38; pointer-events: none; animation: daxKfDrift 13s ease-in-out infinite; }
.dax__hero-glow--1 { width: 360px; height: 360px; background: var(--dax); top: -80px; right: 6%; }
.dax__hero-glow--2 { width: 260px; height: 260px; background: var(--dax3); bottom: -60px; left: 4%; animation-delay: 3s; }
.dax__hero > .container { position: relative; z-index: 2; }

/* Live-radar corner mark: fills the empty top-left corner above the
   badge with a small "always-on monitoring" motif - two counter-
   rotating dashed rings, a fixed core and two pulsing blips. Purely
   decorative, hidden from assistive tech and on narrow screens
   where there's no room for it. */
.dax__hero-radar { position: absolute; top: 92px; left: 40px; width: 86px; height: 86px; z-index: 1; pointer-events: none; }
.dax__hero-radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(23, 180, 203, .34); animation: daxKfSpin 22s linear infinite; }
.dax__hero-radar-ring--2 { inset: 16px; border-color: rgba(242, 179, 61, .3); animation-duration: 15s; animation-direction: reverse; }
.dax__hero-radar-core { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--dax); box-shadow: 0 0 14px 3px rgba(23, 180, 203, .5); }
.dax__hero-radar-blip { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--dax2); box-shadow: 0 0 10px 2px rgba(242, 179, 61, .55); animation: daxKfBlip 2.6s ease-in-out infinite; }
.dax__hero-radar-blip--1 { top: 2px; left: 50%; margin-left: -3px; }
.dax__hero-radar-blip--2 { bottom: 14px; right: 4px; animation-delay: .9s; }
.dax__hero-radar-label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--daxdisplay);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--daxmuted);
}

.dax__hero-top { max-width: 700px; margin: 0 0 68px; }
.dax__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #D8EEF2;
  margin-bottom: 26px;
}
.dax__hero-badge i { font-size: 12px; color: var(--dax); }
.dax__hero-title { font-family: var(--daxdisplay); font-size: 52px; line-height: 1.16; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.dax__hero-title em { font-style: normal; color: var(--dax2); }
.dax__hero-lead { font-size: 19px; font-weight: 300; line-height: 1.75; color: #C9D6E8; margin: 0 0 34px; max-width: 600px; }
.dax__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Data-flow diagram */
.dax__flow { position: relative; margin: 0 0 40px; }
.dax__flow-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 960px;
  padding: 8px 0;
}
.dax__flow-track::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(23, 180, 203, .35) 0 8px, transparent 8px 16px);
  transform: translateY(-50%);
  z-index: 0;
}
.dax__flow-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 130px;
  text-align: center;
}
.dax__flow-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--daxdark2);
  border: 1px solid rgba(23, 180, 203, .4);
  color: var(--dax);
  font-size: 20px;
  box-shadow: 0 0 0 6px rgba(23, 180, 203, .07);
}
.dax__flow-node:nth-of-type(3) .dax__flow-ico { color: var(--dax2); border-color: rgba(242, 179, 61, .45); box-shadow: 0 0 0 6px rgba(242, 179, 61, .08); }
.dax__flow-node:nth-of-type(4) .dax__flow-ico { color: var(--dax3); border-color: rgba(232, 93, 138, .45); box-shadow: 0 0 0 6px rgba(232, 93, 138, .08); }
.dax__flow-label { font-size: 13.5px; font-weight: 500; color: #DCE6F0; }
.dax__flow-packet {
  position: absolute;
  top: 50%;
  left: 30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dax);
  box-shadow: 0 0 10px 2px rgba(23, 180, 203, .8);
  transform: translateY(-50%);
  animation: daxKfPacket 4.5s linear infinite;
  z-index: 1;
}
.dax__flow-packet--2 { background: var(--dax2); box-shadow: 0 0 10px 2px rgba(242, 179, 61, .8); animation-delay: 2.25s; }
.dax__flow-gov {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px dashed rgba(255, 255, 255, .25);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--daxmuted);
}
.dax__flow-gov i { color: var(--dax2); }

/* Hero KPI strip */
.dax__kpis { display: flex; flex-wrap: wrap; gap: 44px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 30px; max-width: 780px; }
.dax__kpi { display: flex; flex-direction: column; gap: 6px; }
.dax__kpi-num { font-family: var(--daxdisplay); font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.dax__kpi span { font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--daxmuted); max-width: 190px; }

/* ---------- 02. Introduction ---------- */
.dax__intro { padding: 120px 0; background: #fff; }
.dax__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dax__intro-note {
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--daxb);
  background: var(--daxbg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--daxt);
}
.dax__intro-note a { font-weight: 600; color: var(--dax); }
.dax__intro-figure { position: relative; }
.dax__intro-figure img { width: 100%; border-radius: 20px; display: block; object-fit: cover; aspect-ratio: 4 / 3.1; }
.dax__intro-badge {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 20px;
  max-width: 270px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(6, 10, 20, .3);
}
.dax__intro-badge strong { display: block; font-family: var(--daxdisplay); font-size: 16px; font-weight: 700; color: var(--daxh); margin-bottom: 6px; }
.dax__intro-badge span { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--daxt); }

/* ---------- 03. Capabilities: horizontal snap-scroll rail ---------- */
.dax__caps { padding: 120px 0 0; background: var(--daxbg); }
.dax__caps > .container { padding-bottom: 44px; }
.dax__rail-wrap { position: relative; padding-bottom: 110px; }
.dax__rail-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.dax__rail-dots { display: flex; gap: 10px; }
.dax__rail-dot { width: 30px; height: 4px; border-radius: 4px; border: none; background: var(--daxb); cursor: pointer; padding: 0; transition: background .25s ease, width .25s ease; }
.dax__rail-dot.is-active { background: var(--dax); width: 46px; }
.dax__rail-arrows { display: flex; gap: 10px; }
.dax__rail-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--daxb);
  background: #fff;
  color: var(--daxh);
  cursor: pointer;
  transition: all .25s ease;
}
.dax__rail-arrow:hover { background: var(--dax); border-color: var(--dax); color: #06222B; }
.dax__rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: max(24px, calc((100vw - 1320px) / 2));
}
.dax__rail::-webkit-scrollbar { display: none; }
.dax__rail-track { display: flex; gap: 26px; padding-right: 24px; }
.dax__cap-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(600px, 84vw);
  background: #fff;
  border: 1px solid var(--daxb);
  border-radius: 22px;
  padding: 44px 42px;
  position: relative;
}
.dax__cap-num {
  position: absolute;
  top: 36px;
  right: 40px;
  font-family: var(--daxdisplay);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--daxb);
}
.dax__cap-tag { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dax2); margin-bottom: 14px; }
.dax__cap-card h3 { font-family: var(--daxdisplay); font-size: 26px; font-weight: 700; color: var(--daxh); margin: 0 0 14px; }
.dax__cap-card > p { font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--daxt); margin: 0 0 22px; }
.dax__cap-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.dax__cap-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 400; color: var(--daxh); }
.dax__cap-list li i { color: var(--dax); font-size: 12px; margin-top: 4px; }

/* ---------- 04. How we work: horizontal pipeline ---------- */
.dax__process { padding: 120px 0; background: #fff; }
.dax__process-rail { position: relative; margin-top: 20px; }
.dax__process-line { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--daxb); overflow: hidden; }
.dax__process-pulse { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--dax); box-shadow: 0 0 12px 3px rgba(23, 180, 203, .6); animation: daxKfProcDot 6s linear infinite; }
.dax__process-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.dax__process-step { text-align: left; }
.dax__process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dax);
  color: var(--daxh);
  font-family: var(--daxdisplay);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 22px;
}
.dax__process-step h3 { font-family: var(--daxdisplay); font-size: 18px; font-weight: 700; color: var(--daxh); margin: 0 0 10px; }
.dax__process-step p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--daxt); margin: 0; }

/* ---------- 05. Proof: qualitative stats beside a dashboard screenshot ---------- */
.dax__proof { padding: 120px 0; background: var(--daxbg); }
.dax__proof-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; }
.dax__proof-stat-list { display: grid; gap: 20px; margin-top: 30px; }
.dax__proof-stat { padding-left: 20px; border-left: 3px solid var(--dax); }
.dax__proof-stat strong { display: block; font-family: var(--daxdisplay); font-size: 16.5px; font-weight: 700; color: var(--daxh); margin-bottom: 6px; }
.dax__proof-stat span { display: block; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--daxt); }
.dax__proof-figure img { width: 100%; border-radius: 20px; display: block; object-fit: cover; aspect-ratio: 16 / 11; box-shadow: 0 30px 60px rgba(19, 26, 43, .14); }

/* ---------- 06. Why 3Shadz: asymmetric dashboard-tile bento ---------- */
.dax__value { padding: 120px 0; background: var(--daxdark); position: relative; overflow: hidden; }
.dax__value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(242, 179, 61, .16), transparent 62%),
              radial-gradient(820px 460px at 4% 110%, rgba(23, 180, 203, .18), transparent 64%);
}
.dax__value > .container { position: relative; z-index: 2; }
.dax__value-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 22px; }
.dax__value-tile {
  grid-column: span 1;
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.dax__value-tile--lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.dax__value-tile h3 { font-family: var(--daxdisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.dax__value-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--daxmuted); margin: 0; }
.dax__value-tile .dax__ico { background: rgba(23, 180, 203, .16); }
.dax__value-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; margin-top: 20px; }
.dax__value-bars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--dax) 0%, var(--dax2) 100%); opacity: .85; animation: daxKfBar 2.6s ease-in-out infinite alternate; }
.dax__value-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.dax__value-bars span:nth-child(2) { height: 70%; animation-delay: .2s; }
.dax__value-bars span:nth-child(3) { height: 52%; animation-delay: .4s; }
.dax__value-bars span:nth-child(4) { height: 88%; animation-delay: .6s; }
.dax__value-bars span:nth-child(5) { height: 62%; animation-delay: .8s; }
.dax__value-bars span:nth-child(6) { height: 76%; animation-delay: 1s; }

/* ---------- 07. Tool stack: four-column spec list ---------- */
.dax__tech { padding: 120px 0; background: #fff; }
.dax__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.dax__tech-col { border-top: 3px solid var(--dax); padding-top: 20px; }
.dax__tech-col:nth-child(2) { border-top-color: var(--dax2); }
.dax__tech-col:nth-child(3) { border-top-color: var(--dax3); }
.dax__tech-col:nth-child(4) { border-top-color: var(--daxh); }
.dax__tech-col h3 { font-family: var(--daxdisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--daxh); margin: 0 0 16px; }
.dax__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dax__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--daxt); padding-left: 16px; position: relative; }
.dax__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--daxb); }

/* ---------- 08. FAQ ---------- */
.dax__faq { padding: 120px 0; background: var(--daxbg); }
.dax__faq-list { max-width: 880px; margin: 0 auto; }
.dax__faq-item { border-bottom: 1px solid var(--daxb); }
.dax__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--daxdisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--daxh);
  cursor: pointer;
}
.dax__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--daxb); color: var(--dax); flex: none; transition: all .3s ease; }
.dax__faq-item.is-open .dax__faq-icon { background: var(--dax); border-color: var(--dax); color: #06222B; transform: rotate(45deg); }
.dax__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.dax__faq-item.is-open .dax__faq-a { max-height: 260px; }
.dax__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--daxt); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes daxKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -14px); }
}
@keyframes daxKfSpin {
  to { transform: rotate(360deg); }
}
@keyframes daxKfBlip {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes daxKfPacket {
  0% { left: 30px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 30px); opacity: 0; }
}
@keyframes daxKfProcDot {
  0% { left: 0%; }
  100% { left: calc(100% - 8px); }
}
@keyframes daxKfBar {
  from { transform: scaleY(.82); }
  to { transform: scaleY(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .dax__hero-title { font-size: 44px; }
  .dax__intro-grid, .dax__proof-grid { grid-template-columns: 1fr; }
  .dax__proof-figure { order: -1; }
  .dax__value-grid { grid-template-columns: repeat(2, 1fr); }
  .dax__value-tile--lead { grid-column: span 2; grid-row: span 1; }
  .dax__tech-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 991px) {
  .dax__hero { padding: 160px 0 90px; }
  .dax__hero-title { font-size: 38px; }
  .dax__flow-track { flex-wrap: wrap; gap: 26px 12px; }
  .dax__flow-track::before { display: none; }
  .dax__flow-packet { display: none; }
  .dax__hero-radar { display: none; }
  .dax__process-steps { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .dax__process-line, .dax__process-pulse { display: none; }
  .dax__caps { padding-top: 90px; }
  .dax__rail { padding-left: 24px; }
}

@media (max-width: 767px) {
  .dax__intro, .dax__caps, .dax__process, .dax__proof, .dax__value, .dax__tech, .dax__faq { padding-top: 80px; padding-bottom: 80px; }
  .dax__hero-title { font-size: 30px; }
  .dax__hero-lead { font-size: 16.5px; }
  .dax__kpis { gap: 28px; }
  .dax__intro-badge { left: 14px; right: 14px; bottom: 14px; padding: 16px 18px; }
  .dax__process-steps { grid-template-columns: 1fr; }
  .dax__value-grid { grid-template-columns: 1fr; }
  .dax__value-tile--lead { grid-column: span 1; }
  .dax__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .dax__cap-card { padding: 34px 26px; }
}

/* Users who ask for less motion get the page without the
   travelling data packets, the process pulse dot or the
   drifting hero glows. */
@media (prefers-reduced-motion: reduce) {
  .dax__page * { transition-duration: .01ms !important; }
  .dax__hero-glow { animation: none; }
  .dax__hero-radar-ring { animation: none; }
  .dax__hero-radar-blip { animation: none; opacity: .8; }
  .dax__flow-packet { animation: none; opacity: .9; }
  .dax__process-pulse { animation: none; }
  .dax__value-bars span { animation: none; }
}

/* ============================================================
   DATA ENGINEERING PAGE (deng__*)
   Scoped entirely to .deng__page (added on <main> of
   data-engineering.html). A child of .dax__page (Data &
   Analytics) - so it reuses the exact same token values (cyan
   #17B4CB / amber #F2B33D / rose #E85D8A on indigo-charcoal dark
   #0B0F1A + paper-blue #F5F8FC, Manrope display over Kanit body)
   under its own --deng* variable names, per the site's "keep the
   brand, change the composition" rule for child service pages.
   Nothing about the composition is reused from dax__: instead of
   a horizontal Sources->Pipelines->Warehouse->Insight track, the
   hero is a vertical convergence/funnel - scattered source chips
   collecting into a governed entry point, dropping through four
   stacked engineering layers with a top-to-bottom travelling
   pulse, then fanning back out into destination chips. Capability
   detail lives in a connected vertical rail (not dax's snap-scroll
   cards); "how we work" is arrow-linked stage cards (not a
   horizontal pulse line); a dedicated source-to-destination
   section and a data-quality checkpoint row are unique to this
   page; "why us" is a bento with an EKG-style pulse tile instead
   of dax's bar chart. Keyframes are prefixed dengKf* so nothing
   collides with dax__ or any other page.
   ============================================================ */
.deng__page {
  --deng: #17B4CB;
  --deng2: #F2B33D;
  --deng3: #E85D8A;
  --dengh: #131A2B;
  --dengt: #5B6478;
  --dengb: #E2E7F0;
  --dengbg: #F5F8FC;
  --dengdark: #0B0F1A;
  --dengdark2: #121A33;
  --dengmuted: #94A0C2;
  --dengdisplay: "Manrope", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.deng__page .deng__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--deng);
  margin-bottom: 16px;
}
.deng__page .deng__title {
  font-family: var(--dengdisplay);
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--dengh);
  margin: 0 0 20px;
}
.deng__page .deng__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dengh); margin: 0 0 18px; }
.deng__page .deng__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dengt); margin: 0 0 16px; }
.deng__page .deng__text:last-child { margin-bottom: 0; }
.deng__page .deng__head { max-width: 780px; }
.deng__page .deng__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.deng__page .deng__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--dengdark) 0%, var(--dengdark2) 100%); }
.deng__page .deng__dark > .container { position: relative; z-index: 2; }
.deng__page .deng__dark .deng__eyebrow { color: var(--deng3); }
.deng__page .deng__dark .deng__title { color: #fff; }
.deng__page .deng__dark .deng__text { color: var(--dengmuted); }

.deng__page .deng__btn,
.deng__page .deng__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.deng__page .deng__btn { color: #06222B; background: var(--deng); border: 2px solid var(--deng); }
.deng__page .deng__btn:hover { background: #4FD6E8; border-color: #4FD6E8; color: #06222B; }
.deng__page .deng__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.deng__page .deng__btn-ghost:hover { background: #fff; color: var(--dengdark); border-color: #fff; }

.deng__page .deng__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--deng);
  transition: gap .3s ease, color .3s ease;
}
.deng__page .deng__link:hover { gap: 15px; color: #0F8FA0; }

.deng__page .deng__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(23, 180, 203, .1);
  color: var(--deng);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: vertical convergence diagram ---------- */
.deng__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--dengdark) 0%, var(--dengdark2) 100%);
  padding: 190px 0 110px;
}
.deng__hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(23, 180, 203, .09) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(23, 180, 203, .09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1000px 620px at 82% 12%, #000, transparent 74%);
          mask-image: radial-gradient(1000px 620px at 82% 12%, #000, transparent 74%);
}
.deng__hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .36; pointer-events: none; animation: dengKfDrift 14s ease-in-out infinite; }
.deng__hero-glow--1 { width: 380px; height: 380px; background: var(--deng); top: -100px; left: 8%; }
.deng__hero-glow--2 { width: 260px; height: 260px; background: var(--deng2); bottom: -70px; right: 10%; animation-delay: 3.4s; }
.deng__hero > .container { position: relative; z-index: 2; }

.deng__hero-grid-2 { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: start; }
.deng__hero-copy { max-width: 560px; }
.deng__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #D8EEF2;
  margin-bottom: 26px;
}
.deng__hero-badge i { font-size: 12px; color: var(--deng); }
.deng__hero-title { font-family: var(--dengdisplay); font-size: 46px; line-height: 1.18; font-weight: 700; letter-spacing: -.8px; color: #fff; margin: 0 0 22px; }
.deng__hero-title em { font-style: normal; color: var(--deng2); }
.deng__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C9D6E8; margin: 0 0 34px; }
.deng__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 0; }

/* Trust-signal strip: sits below the two-column copy/diagram row
   and spans the full hero width, so it closes the hero out edge
   to edge instead of being boxed into one column. */
.deng__signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); }
.deng__signal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
}
.deng__signal i { font-size: 15px; color: var(--deng); }
.deng__signal strong { display: block; font-family: var(--dengdisplay); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.deng__signal span { display: block; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--dengmuted); }

/* Convergence diagram: scattered sources -> collector -> stacked
   engineering layers with a top-to-bottom pulse -> destinations */
.deng__diagram { position: relative; padding-top: 8px; }
.deng__diagram-sources { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.deng__source-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  text-align: center;
}
.deng__source-chip:nth-child(2) { transform: translateY(10px); }
.deng__source-chip:nth-child(4) { transform: translateY(14px); }
.deng__source-chip:nth-child(1) { transform: translateY(-4px); }
.deng__source-chip:nth-child(5) { transform: translateY(4px); }
.deng__source-chip-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--dengdark2);
  border: 1px solid rgba(23, 180, 203, .38);
  color: var(--deng);
  font-size: 15px;
  animation: dengKfChipPulse 3.6s ease-in-out infinite;
}
.deng__source-chip:nth-child(2) .deng__source-chip-ico { animation-delay: .6s; border-color: rgba(242, 179, 61, .4); color: var(--deng2); }
.deng__source-chip:nth-child(3) .deng__source-chip-ico { animation-delay: 1.2s; }
.deng__source-chip:nth-child(4) .deng__source-chip-ico { animation-delay: 1.8s; border-color: rgba(232, 93, 138, .4); color: var(--deng3); }
.deng__source-chip:nth-child(5) .deng__source-chip-ico { animation-delay: 2.4s; }
.deng__source-chip span { font-size: 11.5px; font-weight: 500; color: var(--dengmuted); line-height: 1.3; }

.deng__diagram-collector { position: relative; height: 34px; margin: 4px 0 2px; }
.deng__diagram-collector::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 6px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(23, 180, 203, .4) 0 6px, transparent 6px 12px);
}
.deng__diagram-collector::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--deng);
}

.deng__diagram-stack {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 6px 0 6px 30px;
  margin-bottom: 4px;
}
.deng__diagram-stack::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 2px; background: rgba(23, 180, 203, .2); }
.deng__diagram-pulse {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--deng);
  box-shadow: 0 0 12px 3px rgba(23, 180, 203, .65);
  animation: dengKfPulseDown 5s linear infinite;
}
.deng__layer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
}
.deng__layer-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(23, 180, 203, .14);
  color: var(--deng);
  font-size: 14px;
  flex: none;
}
.deng__layer:nth-child(2) .deng__layer-ico { background: rgba(242, 179, 61, .16); color: var(--deng2); }
.deng__layer:nth-child(3) .deng__layer-ico { background: rgba(232, 93, 138, .16); color: var(--deng3); }
.deng__layer-body strong { display: block; font-family: var(--dengdisplay); font-size: 14.5px; font-weight: 700; color: #fff; }
.deng__layer-body span { display: block; font-size: 12.5px; font-weight: 300; color: var(--dengmuted); }

.deng__diagram-destinations { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }
.deng__dest-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  font-size: 12.5px;
  font-weight: 500;
  color: #DCE6F0;
}
.deng__dest-chip i { color: var(--deng2); font-size: 12px; }

/* ---------- 02. Positioning: full-width narrative statement ---------- */
.deng__define { padding: 120px 0; background: #fff; }
.deng__define-inner { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.deng__define-no {
  font-family: var(--dengdisplay);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--dengb);
  text-decoration: line-through;
  text-decoration-color: var(--deng3);
  text-decoration-thickness: 2px;
  margin: 0 0 14px;
}
.deng__define-yes {
  font-family: var(--dengdisplay);
  font-size: 32px;
  line-height: 1.38;
  font-weight: 700;
  color: var(--dengh);
  margin: 0 auto 26px;
  max-width: 760px;
}
.deng__define-yes em { font-style: normal; color: var(--deng); }
.deng__define-inner .deng__text { max-width: 700px; margin-left: auto; margin-right: auto; }
.deng__define-note {
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--dengb);
  background: var(--dengbg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--dengt);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.deng__define-note a { font-weight: 600; color: var(--deng); }

.deng__banner-media { position: relative; border-radius: 20px; overflow: hidden; max-width: 1040px; margin: 0 auto; }
.deng__banner-media img { width: 100%; display: block; object-fit: cover; aspect-ratio: 21 / 8; }
.deng__banner-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  background: var(--dengbg);
  border: 1px solid var(--dengb);
  border-top: none;
  border-radius: 0 0 20px 20px;
  margin-top: -6px;
  position: relative;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.deng__banner-caption strong { font-family: var(--dengdisplay); font-size: 14.5px; font-weight: 700; color: var(--dengh); }
.deng__banner-caption span { font-size: 13px; font-weight: 300; color: var(--dengt); }

/* ---------- 03. Capabilities: connected vertical rail ---------- */
.deng__caps { padding: 120px 0; background: var(--dengbg); }
.deng__caps-list { position: relative; max-width: 920px; margin: 0 auto; }
.deng__caps-list::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--dengb); }
.deng__cap-row { position: relative; display: flex; gap: 26px; padding: 0 0 46px 0; }
.deng__cap-row:last-child { padding-bottom: 0; }
.deng__cap-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--deng);
  color: var(--dengh);
  font-family: var(--dengdisplay);
  font-weight: 700;
  font-size: 15px;
}
.deng__cap-body { flex: 1; background: #fff; border: 1px solid var(--dengb); border-radius: 16px; padding: 26px 30px; }
.deng__cap-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--deng2); margin-bottom: 10px; }
.deng__cap-body h3 { font-family: var(--dengdisplay); font-size: 21px; font-weight: 700; color: var(--dengh); margin: 0 0 10px; }
.deng__cap-body p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dengt); margin: 0; }

/* ---------- 04. How we work: arrow-linked stage cards ---------- */
.deng__stages { padding: 120px 0; background: #fff; }
.deng__stages-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0 20px; align-items: stretch; }
.deng__stage-card { position: relative; padding: 32px 26px; border: 1px solid var(--dengb); border-radius: 16px; background: var(--dengbg); }
.deng__stage-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--dengdark); color: var(--deng); font-family: var(--dengdisplay); font-weight: 700; font-size: 14px; margin-bottom: 18px; }
.deng__stage-card h3 { font-family: var(--dengdisplay); font-size: 17px; font-weight: 700; color: var(--dengh); margin: 0 0 10px; }
.deng__stage-card p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dengt); margin: 0; }
.deng__stages-grid > .deng__stage-arrow { display: flex; align-items: center; justify-content: center; color: var(--dengb); font-size: 18px; }

/* ---------- 05. Source-to-destination: three-column routing ---------- */
.deng__routes { padding: 120px 0; background: var(--dengdark); position: relative; overflow: hidden; }
.deng__routes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 8% -10%, rgba(23, 180, 203, .16), transparent 62%),
              radial-gradient(760px 440px at 96% 110%, rgba(242, 179, 61, .12), transparent 64%);
}
.deng__routes > .container { position: relative; z-index: 2; }
.deng__routes-grid { display: grid; grid-template-columns: 1fr .7fr 1fr; gap: 30px; align-items: center; }
.deng__routes-col h3 { font-family: var(--dengdisplay); font-size: 14px; font-weight: 700; letter-spacing: .5px; color: #fff; margin: 0 0 18px; }
.deng__routes-col--dest h3 { text-align: right; }
.deng__routes-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.deng__routes-col li { font-size: 14px; font-weight: 300; color: var(--dengmuted); padding-left: 16px; position: relative; }
.deng__routes-col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--deng); }
.deng__routes-col--dest li { padding-left: 0; padding-right: 16px; text-align: right; }
.deng__routes-col--dest li::before { left: auto; right: 0; background: var(--deng2); }
.deng__routes-core { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.deng__routes-core-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px dashed rgba(23, 180, 203, .5);
  color: var(--deng);
  font-size: 26px;
  animation: dengKfSpinSlow 26s linear infinite;
}
.deng__routes-core-label { font-family: var(--dengdisplay); font-size: 13px; font-weight: 700; color: #fff; }
.deng__routes-core-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.deng__routes-core-badges span { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--dengmuted); padding: 5px 10px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .16); }

/* ---------- 06. Data-quality checkpoints ---------- */
.deng__quality { padding: 120px 0; background: #fff; }
.deng__quality-row { position: relative; display: flex; justify-content: space-between; gap: 12px; max-width: 980px; margin: 0 auto 60px; padding-top: 8px; }
.deng__quality-row::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--dengb) 0 8px, transparent 8px 16px);
}
.deng__quality-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 150px; text-align: center; }
.deng__quality-node-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--dengbg);
  border: 1px solid var(--dengb);
  color: var(--deng2);
  font-size: 20px;
}
.deng__quality-node span { font-size: 13.5px; font-weight: 500; color: var(--dengh); line-height: 1.4; }

.deng__quality-signal {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 22px 28px;
  border-radius: 16px;
  background: var(--dengbg);
  border: 1px solid var(--dengb);
}
.deng__quality-signal-bars { display: flex; align-items: center; gap: 4px; height: 34px; flex: none; }
.deng__quality-signal-bars span { width: 3px; border-radius: 2px; background: var(--deng); animation: dengKfEq 1.4s ease-in-out infinite; }
.deng__quality-signal-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.deng__quality-signal-bars span:nth-child(2) { height: 90%; animation-delay: .12s; }
.deng__quality-signal-bars span:nth-child(3) { height: 55%; animation-delay: .24s; }
.deng__quality-signal-bars span:nth-child(4) { height: 100%; animation-delay: .36s; background: var(--deng2); }
.deng__quality-signal-bars span:nth-child(5) { height: 60%; animation-delay: .48s; }
.deng__quality-signal-bars span:nth-child(6) { height: 80%; animation-delay: .6s; }
.deng__quality-signal-bars span:nth-child(7) { height: 45%; animation-delay: .72s; }
.deng__quality-signal p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--dengt); margin: 0; }

/* ---------- 07. Before / after comparison ---------- */
.deng__compare { padding: 120px 0; background: var(--dengbg); }
.deng__compare .deng__banner-media, .deng__compare .deng__banner-caption { margin-bottom: 0; }
.deng__compare .deng__banner-caption { margin-bottom: 50px; }
.deng__compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto; }
.deng__compare-col { padding: 34px 34px 30px; border-radius: 18px; background: #fff; border: 1px solid var(--dengb); }
.deng__compare-col--good { border-color: rgba(23, 180, 203, .35); box-shadow: 0 20px 44px rgba(23, 180, 203, .1); }
.deng__compare-col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--dengdisplay); font-size: 16.5px; font-weight: 700; color: var(--dengh); margin: 0 0 20px; }
.deng__compare-col h3 i { font-size: 13px; }
.deng__compare-col--bad h3 i { color: var(--deng3); }
.deng__compare-col--good h3 i { color: var(--deng); }
.deng__compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.deng__compare-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--dengt); }
.deng__compare-list li i { margin-top: 4px; font-size: 12px; flex: none; }
.deng__compare-col--bad .deng__compare-list li i { color: var(--deng3); }
.deng__compare-col--good .deng__compare-list li i { color: var(--deng); }

/* ---------- 08. Why 3Shadz: bento with EKG pulse tile ---------- */
.deng__value { padding: 120px 0; background: var(--dengdark); position: relative; overflow: hidden; }
.deng__value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(242, 179, 61, .16), transparent 62%),
              radial-gradient(820px 460px at 4% 110%, rgba(23, 180, 203, .18), transparent 64%);
}
.deng__value > .container { position: relative; z-index: 2; }
/* Six tiles, three per row, two full rows - every cell filled, no
   spanning "lead" tile left dangling a gap on the row below it. */
.deng__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 22px; }
.deng__value-tile {
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.deng__value-tile--lead { display: flex; flex-direction: column; justify-content: space-between; }
.deng__value-tile h3 { font-family: var(--dengdisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.deng__value-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dengmuted); margin: 0; }
.deng__value-tile .deng__ico { background: rgba(23, 180, 203, .16); }
.deng__value-ekg { display: flex; align-items: center; gap: 3px; height: 34px; margin-top: 18px; }
.deng__value-ekg span { width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--deng) 0%, var(--deng2) 100%); opacity: .9; animation: dengKfWave 2.2s ease-in-out infinite; }
.deng__value-ekg span:nth-child(1) { height: 30%; animation-delay: 0s; }
.deng__value-ekg span:nth-child(2) { height: 55%; animation-delay: .15s; }
.deng__value-ekg span:nth-child(3) { height: 100%; animation-delay: .3s; }
.deng__value-ekg span:nth-child(4) { height: 40%; animation-delay: .45s; }
.deng__value-ekg span:nth-child(5) { height: 70%; animation-delay: .6s; }
.deng__value-ekg span:nth-child(6) { height: 35%; animation-delay: .75s; }
.deng__value-ekg span:nth-child(7) { height: 85%; animation-delay: .9s; }
.deng__value-ekg span:nth-child(8) { height: 45%; animation-delay: 1.05s; }

/* ---------- 09. Tool stack: four-column spec list ---------- */
.deng__tech { padding: 120px 0; background: #fff; }
.deng__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.deng__tech-col { border-top: 3px solid var(--deng); padding-top: 20px; }
.deng__tech-col:nth-child(2) { border-top-color: var(--deng2); }
.deng__tech-col:nth-child(3) { border-top-color: var(--deng3); }
.deng__tech-col:nth-child(4) { border-top-color: var(--dengh); }
.deng__tech-col h3 { font-family: var(--dengdisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--dengh); margin: 0 0 16px; }
.deng__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.deng__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--dengt); padding-left: 16px; position: relative; }
.deng__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--dengb); }

/* ---------- 10. FAQ ---------- */
.deng__faq { padding: 120px 0; background: var(--dengbg); }
.deng__faq-list { max-width: 880px; margin: 0 auto; }
.deng__faq-item { border-bottom: 1px solid var(--dengb); }
.deng__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--dengdisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--dengh);
  cursor: pointer;
}
.deng__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dengb); color: var(--deng); flex: none; transition: all .3s ease; }
.deng__faq-item.is-open .deng__faq-icon { background: var(--deng); border-color: var(--deng); color: #06222B; transform: rotate(45deg); }
.deng__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.deng__faq-item.is-open .deng__faq-a { max-height: 260px; }
.deng__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dengt); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes dengKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 14px); }
}
@keyframes dengKfChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 180, 203, .35); }
  50% { box-shadow: 0 0 0 6px rgba(23, 180, 203, 0); }
}
@keyframes dengKfPulseDown {
  0% { top: 6px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: calc(100% - 14px); opacity: 0; }
}
@keyframes dengKfSpinSlow {
  to { transform: rotate(360deg); }
}
@keyframes dengKfEq {
  0%, 100% { transform: scaleY(.8); }
  50% { transform: scaleY(1); }
}
@keyframes dengKfWave {
  0%, 100% { transform: scaleY(.75); }
  50% { transform: scaleY(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .deng__hero-grid-2 { grid-template-columns: 1fr; gap: 70px; }
  .deng__hero-copy { max-width: 640px; }
  .deng__value-grid { grid-template-columns: repeat(2, 1fr); }
  .deng__tech-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .deng__routes-grid { grid-template-columns: 1fr; gap: 40px; }
  .deng__routes-col--dest h3, .deng__routes-col--dest li { text-align: left; }
  .deng__routes-col--dest li { padding-left: 16px; padding-right: 0; }
  .deng__routes-col--dest li::before { left: 0; right: auto; }
  .deng__compare-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .deng__hero { padding: 160px 0 90px; }
  .deng__hero-title { font-size: 38px; }
  .deng__stages-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .deng__stages-grid > .deng__stage-arrow { display: none; }
  .deng__quality-row { flex-wrap: wrap; justify-content: center; gap: 30px 20px; }
  .deng__quality-row::before { display: none; }
}

@media (max-width: 767px) {
  .deng__define, .deng__caps, .deng__stages, .deng__routes, .deng__quality, .deng__compare, .deng__value, .deng__tech, .deng__faq { padding-top: 80px; padding-bottom: 80px; }
  .deng__hero-title { font-size: 30px; }
  .deng__hero-lead { font-size: 16.5px; }
  .deng__diagram-sources { flex-wrap: wrap; }
  .deng__source-chip { flex: 1 1 30%; transform: none !important; }
  .deng__diagram-destinations { flex-wrap: wrap; }
  .deng__signals { grid-template-columns: 1fr; }
  .deng__define-yes { font-size: 24px; }
  .deng__define-no { font-size: 22px; }
  .deng__stages-grid { grid-template-columns: 1fr; }
  .deng__value-grid { grid-template-columns: 1fr; }
  .deng__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .deng__cap-row { gap: 16px; }
  .deng__cap-body { padding: 22px 20px; }
}

/* Users who ask for less motion get the page without the
   drifting hero glows, the chip pulse ring, the top-to-bottom
   pipeline pulse, the routing-core spin or the EKG/equalizer
   bars. */
@media (prefers-reduced-motion: reduce) {
  .deng__page * { transition-duration: .01ms !important; }
  .deng__hero-glow { animation: none; }
  .deng__source-chip-ico { animation: none; }
  .deng__diagram-pulse { animation: none; opacity: .9; }
  .deng__routes-core-ico { animation: none; }
  .deng__quality-signal-bars span { animation: none; }
  .deng__value-ekg span { animation: none; }
}

/* ============================================================
   BUSINESS INTELLIGENCE PAGE (bi__*)
   Scoped entirely to .bi__page (added on <main> of
   business-intelligence.html). A child of .dax__page (Data &
   Analytics), sibling of .deng__page (Data Engineering) - reuses
   the exact same token values (cyan #17B4CB / amber #F2B33D /
   rose #E85D8A on indigo-charcoal dark #0B0F1A + paper-blue
   #F5F8FC, Manrope display over Kanit body) under its own --bi*
   variable names, per the site's "keep the brand, change the
   composition" rule for child service pages. The composition is
   unique to BI: instead of dax's horizontal source->pipeline track
   or deng's vertical source-convergence funnel, the hero visualizes
   *metric* convergence - a scattered cluster of mismatched report
   chips (spreadsheets, exports, slide numbers) drifting into a
   "semantic layer" lens, resolving into one clean, governed
   executive panel of stat tiles. A dedicated drill-down section
   (narrowing zoom chain from headline KPI to root cause) is unique
   to this page. Capability detail lives in a numbered bento grid
   (not dax's snap-scroll rail or deng's connected vertical rail);
   "how we work" is a staircase of indented stage rows (not a pulse
   line or arrow-linked cards); the compare section frames metric
   inconsistency rather than pipeline practices; "why us" is a bento
   with a trend-line tile instead of dax's bar chart or deng's EKG.
   Keyframes are prefixed biKf* so nothing collides with dax__,
   deng__ or any other page.
   ============================================================ */
.bi__page {
  --bi: #17B4CB;
  --bi2: #F2B33D;
  --bi3: #E85D8A;
  --bih: #131A2B;
  --bit: #5B6478;
  --bib: #E2E7F0;
  --bibg: #F5F8FC;
  --bidark: #0B0F1A;
  --bidark2: #121A33;
  --bimuted: #94A0C2;
  --bidisplay: "Manrope", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.bi__page .bi__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bi);
  margin-bottom: 16px;
}
.bi__page .bi__title {
  font-family: var(--bidisplay);
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--bih);
  margin: 0 0 20px;
}
.bi__page .bi__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--bih); margin: 0 0 18px; }
.bi__page .bi__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--bit); margin: 0 0 16px; }
.bi__page .bi__text:last-child { margin-bottom: 0; }
.bi__page .bi__head { max-width: 780px; }
.bi__page .bi__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.bi__page .bi__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--bidark) 0%, var(--bidark2) 100%); }
.bi__page .bi__dark > .container { position: relative; z-index: 2; }
.bi__page .bi__dark .bi__eyebrow { color: var(--bi3); }
.bi__page .bi__dark .bi__title { color: #fff; }
.bi__page .bi__dark .bi__text { color: var(--bimuted); }

.bi__page .bi__btn,
.bi__page .bi__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.bi__page .bi__btn { color: #06222B; background: var(--bi); border: 2px solid var(--bi); }
.bi__page .bi__btn:hover { background: #4FD6E8; border-color: #4FD6E8; color: #06222B; }
.bi__page .bi__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.bi__page .bi__btn-ghost:hover { background: #fff; color: var(--bidark); border-color: #fff; }

.bi__page .bi__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bi);
  transition: gap .3s ease, color .3s ease;
}
.bi__page .bi__link:hover { gap: 15px; color: #0F8FA0; }

.bi__page .bi__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(23, 180, 203, .1);
  color: var(--bi);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: scattered report chips -> semantic lens -> governed panel ---------- */
.bi__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--bidark) 0%, var(--bidark2) 100%);
  padding: 190px 0 110px;
}
.bi__hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(23, 180, 203, .09) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(23, 180, 203, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(960px 600px at 50% 0%, #000, transparent 76%);
          mask-image: radial-gradient(960px 600px at 50% 0%, #000, transparent 76%);
}
.bi__hero-glow { position: absolute; border-radius: 50%; filter: blur(88px); opacity: .36; pointer-events: none; animation: biKfDrift 13.5s ease-in-out infinite; }
.bi__hero-glow--1 { width: 360px; height: 360px; background: var(--bi); top: -90px; left: 10%; }
.bi__hero-glow--2 { width: 260px; height: 260px; background: var(--bi2); bottom: -60px; right: 8%; animation-delay: 3.2s; }
.bi__hero > .container { position: relative; z-index: 2; }

.bi__hero-top { max-width: 720px; margin: 0 auto 68px; text-align: center; }
.bi__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #D8EEF2;
  margin-bottom: 26px;
}
.bi__hero-badge i { font-size: 12px; color: var(--bi); }
.bi__hero-title { font-family: var(--bidisplay); font-size: 48px; line-height: 1.18; font-weight: 700; letter-spacing: -.9px; color: #fff; margin: 0 0 22px; }
.bi__hero-title em { font-style: normal; color: var(--bi2); }
.bi__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: #C9D6E8; margin: 0 auto 34px; max-width: 620px; }
.bi__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Scatter -> lens -> panel diagram */
.bi__diagram { position: relative; display: grid; grid-template-columns: 1fr auto 1.05fr; gap: 40px; align-items: center; }

.bi__scatter { position: relative; display: flex; flex-wrap: wrap; align-content: center; gap: 12px 10px; min-height: 230px; padding: 10px; }
.bi__scatter-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px dashed rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .035);
  font-size: 12px;
  font-weight: 400;
  color: var(--bimuted);
  white-space: nowrap;
  animation: biKfChipDrift 5.5s ease-in-out infinite;
}
.bi__scatter-chip--1 { transform: rotate(-4deg); opacity: .95; animation-delay: 0s; }
.bi__scatter-chip--2 { transform: rotate(3deg) translateY(6px); opacity: .8; animation-delay: .5s; }
.bi__scatter-chip--3 { transform: rotate(-2deg) translateY(-4px); opacity: .7; animation-delay: 1s; }
.bi__scatter-chip--4 { transform: rotate(5deg); opacity: .85; animation-delay: 1.5s; }
.bi__scatter-chip--5 { transform: rotate(-6deg) translateY(4px); opacity: .65; animation-delay: 2s; }
.bi__scatter-chip--6 { transform: rotate(2deg) translateY(-6px); opacity: .75; animation-delay: 2.5s; }
.bi__scatter-label { flex: 0 0 100%; margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: .3px; color: var(--bi3); }

.bi__lens { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; position: relative; width: 128px; }
.bi__lens-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(23, 180, 203, .38); transform: translate(-50%, -50%); }
.bi__lens-ring--1 { width: 92px; height: 92px; animation: biKfSpin 20s linear infinite; }
.bi__lens-ring--2 { width: 118px; height: 118px; border-color: rgba(242, 179, 61, .3); animation: biKfSpin 30s linear infinite reverse; }
.bi__lens-core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bidark2);
  border: 1px solid rgba(23, 180, 203, .45);
  color: var(--bi);
  font-size: 21px;
  box-shadow: 0 0 0 8px rgba(23, 180, 203, .08);
  animation: biKfPulse 3.2s ease-in-out infinite;
  margin-bottom: 8px;
}
.bi__lens-label { font-family: var(--bidisplay); font-size: 13px; font-weight: 700; color: #fff; }
.bi__lens-sub { font-size: 11px; font-weight: 300; color: var(--bimuted); line-height: 1.4; }

.bi__panel {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  padding: 22px 24px 20px;
  animation: biKfPanelIn .8s cubic-bezier(.16, .84, .44, 1) both, biKfPanelGlow 5s ease-in-out .8s infinite;
}
.bi__panel-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: #DCE6F0; margin-bottom: 18px; }
.bi__panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bi); box-shadow: 0 0 10px 2px rgba(23, 180, 203, .7); animation: biKfDotPulse 1.8s ease-in-out infinite; }
.bi__panel-badge { margin-left: auto; padding: 4px 10px; border-radius: 20px; background: rgba(23, 180, 203, .15); color: var(--bi); font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; animation: biKfBadgePulse 2.4s ease-in-out infinite; }
.bi__panel-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.bi__panel-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); animation: biKfFadeUp .6s ease both; }
.bi__panel-tile:nth-child(1) { animation-delay: .25s; }
.bi__panel-tile:nth-child(2) { animation-delay: .38s; }
.bi__panel-tile:nth-child(3) { animation-delay: .51s; }
.bi__panel-tile span { font-size: 11px; font-weight: 400; color: var(--bimuted); }
.bi__panel-tile strong { font-family: var(--bidisplay); font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.bi__panel-tile em { font-style: normal; font-size: 11px; font-weight: 600; }
.bi__panel-tile em.is-up { color: var(--bi); }
.bi__panel-tile em.is-down { color: var(--bi3); }
.bi__panel-chart { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-bottom: 14px; animation: biKfFadeUp .6s ease .62s both; }
.bi__panel-chart span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--bi) 0%, var(--bi2) 100%); opacity: .85; transform-origin: bottom; animation: biKfBar 2.6s ease-in-out infinite alternate; }
.bi__panel-chart span:nth-child(1) { height: 45%; animation-delay: 0s; }
.bi__panel-chart span:nth-child(2) { height: 62%; animation-delay: .15s; }
.bi__panel-chart span:nth-child(3) { height: 38%; animation-delay: .3s; }
.bi__panel-chart span:nth-child(4) { height: 78%; animation-delay: .45s; }
.bi__panel-chart span:nth-child(5) { height: 55%; animation-delay: .6s; }
.bi__panel-chart span:nth-child(6) { height: 90%; animation-delay: .75s; }
.bi__panel-chart span:nth-child(7) { height: 68%; animation-delay: .9s; }
.bi__panel-chart span:nth-child(8) { height: 100%; animation-delay: 1.05s; }
.bi__panel-caption { display: block; font-size: 11.5px; font-weight: 400; color: var(--bimuted); line-height: 1.5; animation: biKfFadeUp .6s ease .74s both; }

/* ---------- 02. Positioning: full-width narrative statement ---------- */
.bi__define { padding: 120px 0; background: #fff; }
.bi__define-inner { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.bi__define-no {
  font-family: var(--bidisplay);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--bib);
  text-decoration: line-through;
  text-decoration-color: var(--bi3);
  text-decoration-thickness: 2px;
  margin: 0 0 14px;
}
.bi__define-yes {
  font-family: var(--bidisplay);
  font-size: 32px;
  line-height: 1.38;
  font-weight: 700;
  color: var(--bih);
  margin: 0 auto 26px;
  max-width: 780px;
}
.bi__define-yes em { font-style: normal; color: var(--bi); }
.bi__define-inner .bi__text { max-width: 700px; margin-left: auto; margin-right: auto; }
.bi__define-note {
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--bib);
  background: var(--bibg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--bit);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.bi__define-note a { font-weight: 600; color: var(--bi); }

.bi__banner-media { position: relative; border-radius: 20px; overflow: hidden; max-width: 1040px; margin: 0 auto; }
.bi__banner-media img { width: 100%; display: block; object-fit: cover; aspect-ratio: 21 / 8; }
.bi__banner-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  background: var(--bibg);
  border: 1px solid var(--bib);
  border-top: none;
  border-radius: 0 0 20px 20px;
  margin-top: -6px;
  position: relative;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.bi__banner-caption strong { font-family: var(--bidisplay); font-size: 14.5px; font-weight: 700; color: var(--bih); }
.bi__banner-caption span { font-size: 13px; font-weight: 300; color: var(--bit); }

/* ---------- 03. Capabilities: numbered bento grid ---------- */
.bi__caps { padding: 120px 0; background: var(--bibg); }
.bi__caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 24px; }
.bi__cap-tile {
  position: relative;
  background: #fff;
  border: 1px solid var(--bib);
  border-radius: 20px;
  padding: 34px 30px;
}
.bi__cap-tile--wide { grid-column: span 2; }
.bi__cap-num { position: absolute; top: 28px; right: 30px; font-family: var(--bidisplay); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--bib); }
.bi__cap-tile h3 { font-family: var(--bidisplay); font-size: 19.5px; font-weight: 700; color: var(--bih); margin: 0 0 12px; }
.bi__cap-tile p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--bit); margin: 0; }

/* ---------- 04. Drill-down: narrowing zoom chain ---------- */
.bi__drill { padding: 120px 0; background: #fff; }
.bi__drill-row { display: flex; align-items: center; justify-content: center; gap: 0 18px; max-width: 1080px; margin: 0 auto; flex-wrap: wrap; }
.bi__drill-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--bidark);
  border: 1px solid rgba(23, 180, 203, .3);
  width: 220px;
}
.bi__drill-node--sm { width: 192px; padding: 20px 22px; background: var(--bidark2); }
.bi__drill-node--sm2 { width: 166px; padding: 17px 20px; background: var(--bidark2); border-color: rgba(242, 179, 61, .32); }
.bi__drill-node--sm3 { width: 142px; padding: 15px 18px; background: linear-gradient(160deg, var(--bi3) 0%, #b5406a 100%); border-color: transparent; }
.bi__drill-label { font-size: 11.5px; font-weight: 500; letter-spacing: .3px; color: var(--bimuted); }
.bi__drill-node--sm3 .bi__drill-label { color: rgba(255, 255, 255, .8); }
.bi__drill-value { font-family: var(--bidisplay); font-size: 21px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.bi__drill-node--sm .bi__drill-value { font-size: 18px; }
.bi__drill-node--sm2 .bi__drill-value { font-size: 16px; }
.bi__drill-node--sm3 .bi__drill-value { font-size: 15px; }
.bi__drill-sub { font-size: 11.5px; font-weight: 300; color: var(--bi2); }
.bi__drill-node--sm3 .bi__drill-sub { color: rgba(255, 255, 255, .85); }
.bi__drill-arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--bib); color: var(--bi); font-size: 12px; }

/* ---------- 05. How we work: staircase of indented stage rows ---------- */
.bi__stages { padding: 120px 0; background: var(--bibg); }
.bi__stages-list { max-width: 760px; margin: 0 auto; display: grid; gap: 26px; }
.bi__stage-row { display: flex; align-items: flex-start; gap: 22px; padding: 26px 30px; background: #fff; border: 1px solid var(--bib); border-radius: 16px; }
.bi__stage-row:nth-child(1) { margin-right: 15%; }
.bi__stage-row:nth-child(2) { margin-left: 5%; margin-right: 10%; }
.bi__stage-row:nth-child(3) { margin-left: 10%; margin-right: 5%; }
.bi__stage-row:nth-child(4) { margin-left: 15%; }
.bi__stage-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bidark);
  color: var(--bi);
  font-family: var(--bidisplay);
  font-weight: 700;
  font-size: 15px;
}
.bi__stage-body h3 { font-family: var(--bidisplay); font-size: 18px; font-weight: 700; color: var(--bih); margin: 0 0 8px; }
.bi__stage-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--bit); margin: 0; }

/* ---------- 06. Metric consistency: before / after comparison ---------- */
.bi__compare { padding: 120px 0; background: #fff; }
.bi__compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto; }
.bi__compare-col { padding: 34px 34px 30px; border-radius: 18px; background: var(--bibg); border: 1px solid var(--bib); }
.bi__compare-col--good { background: #fff; border-color: rgba(23, 180, 203, .35); box-shadow: 0 20px 44px rgba(23, 180, 203, .1); }
.bi__compare-col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--bidisplay); font-size: 16.5px; font-weight: 700; color: var(--bih); margin: 0 0 20px; }
.bi__compare-col h3 i { font-size: 13px; }
.bi__compare-col--bad h3 i { color: var(--bi3); }
.bi__compare-col--good h3 i { color: var(--bi); }
.bi__compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.bi__compare-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--bit); }
.bi__compare-list li i { margin-top: 4px; font-size: 12px; flex: none; }
.bi__compare-col--bad .bi__compare-list li i { color: var(--bi3); }
.bi__compare-col--good .bi__compare-list li i { color: var(--bi); }

/* ---------- 07. Proof: qualitative stats beside a dashboard screenshot ---------- */
.bi__proof { padding: 120px 0; background: var(--bibg); }
.bi__proof-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; }
.bi__proof-stat-list { display: grid; gap: 20px; margin-top: 30px; }
.bi__proof-stat { padding-left: 20px; border-left: 3px solid var(--bi); }
.bi__proof-stat strong { display: block; font-family: var(--bidisplay); font-size: 16.5px; font-weight: 700; color: var(--bih); margin-bottom: 6px; }
.bi__proof-stat span { display: block; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--bit); }
.bi__proof-figure img { width: 100%; border-radius: 20px; display: block; object-fit: cover; aspect-ratio: 16 / 11; box-shadow: 0 30px 60px rgba(19, 26, 43, .14); }

/* ---------- 08. Why 3Shadz: bento with a trend-line tile ---------- */
.bi__value { padding: 120px 0; background: var(--bidark); position: relative; overflow: hidden; }
.bi__value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(242, 179, 61, .16), transparent 62%),
              radial-gradient(820px 460px at 4% 110%, rgba(23, 180, 203, .18), transparent 64%);
}
.bi__value > .container { position: relative; z-index: 2; }
.bi__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 22px; }
.bi__value-tile {
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.bi__value-tile--lead { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.bi__value-tile h3 { font-family: var(--bidisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.bi__value-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--bimuted); margin: 0; }
.bi__value-tile .bi__ico { background: rgba(23, 180, 203, .16); }
.bi__value-trend { display: flex; align-items: flex-end; gap: 5px; height: 50px; margin-top: 20px; }
.bi__value-trend span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--bi) 0%, var(--bi2) 100%); opacity: .85; animation: biKfBar 2.6s ease-in-out infinite alternate; }
.bi__value-trend span:nth-child(1) { height: 35%; animation-delay: 0s; }
.bi__value-trend span:nth-child(2) { height: 55%; animation-delay: .15s; }
.bi__value-trend span:nth-child(3) { height: 45%; animation-delay: .3s; }
.bi__value-trend span:nth-child(4) { height: 70%; animation-delay: .45s; }
.bi__value-trend span:nth-child(5) { height: 60%; animation-delay: .6s; }
.bi__value-trend span:nth-child(6) { height: 85%; animation-delay: .75s; }
.bi__value-trend span:nth-child(7) { height: 100%; animation-delay: .9s; }

/* ---------- 09. Tool stack: four-column spec list ---------- */
.bi__tech { padding: 120px 0; background: #fff; }
.bi__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.bi__tech-col { border-top: 3px solid var(--bi); padding-top: 20px; }
.bi__tech-col:nth-child(2) { border-top-color: var(--bi2); }
.bi__tech-col:nth-child(3) { border-top-color: var(--bi3); }
.bi__tech-col:nth-child(4) { border-top-color: var(--bih); }
.bi__tech-col h3 { font-family: var(--bidisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--bih); margin: 0 0 16px; }
.bi__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bi__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--bit); padding-left: 16px; position: relative; }
.bi__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--bib); }

/* ---------- 10. FAQ ---------- */
.bi__faq { padding: 120px 0; background: var(--bibg); }
.bi__faq-list { max-width: 880px; margin: 0 auto; }
.bi__faq-item { border-bottom: 1px solid var(--bib); }
.bi__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--bidisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--bih);
  cursor: pointer;
}
.bi__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bib); color: var(--bi); flex: none; transition: all .3s ease; }
.bi__faq-item.is-open .bi__faq-icon { background: var(--bi); border-color: var(--bi); color: #06222B; transform: rotate(45deg); }
.bi__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bi__faq-item.is-open .bi__faq-a { max-height: 260px; }
.bi__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--bit); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes biKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 12px); }
}
@keyframes biKfChipDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes biKfSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes biKfPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(23, 180, 203, .08); }
  50% { box-shadow: 0 0 0 14px rgba(23, 180, 203, .04); }
}
@keyframes biKfBar {
  from { transform: scaleY(.82); }
  to { transform: scaleY(1); }
}
@keyframes biKfPanelIn {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes biKfPanelGlow {
  0%, 100% { border-color: rgba(255, 255, 255, .14); box-shadow: 0 0 0 0 rgba(23, 180, 203, 0); }
  50% { border-color: rgba(23, 180, 203, .38); box-shadow: 0 0 34px 2px rgba(23, 180, 203, .12); }
}
@keyframes biKfFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes biKfDotPulse {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(23, 180, 203, .7); transform: scale(1); }
  50% { box-shadow: 0 0 18px 6px rgba(23, 180, 203, .3); transform: scale(1.3); }
}
@keyframes biKfBadgePulse {
  0%, 100% { background: rgba(23, 180, 203, .15); }
  50% { background: rgba(23, 180, 203, .32); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .bi__diagram { grid-template-columns: 1fr; justify-items: center; gap: 46px; }
  .bi__scatter { justify-content: center; }
  .bi__panel { width: 100%; max-width: 460px; }
  .bi__caps-grid { grid-template-columns: repeat(2, 1fr); }
  .bi__cap-tile--wide { grid-column: span 2; }
  .bi__compare-grid { grid-template-columns: 1fr; }
  .bi__proof-grid { grid-template-columns: 1fr; }
  .bi__proof-figure { order: -1; }
  .bi__value-grid { grid-template-columns: repeat(2, 1fr); }
  .bi__value-tile--lead { grid-column: span 2; }
  .bi__tech-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 991px) {
  .bi__hero { padding: 160px 0 90px; }
  .bi__hero-title { font-size: 38px; }
  .bi__stage-row:nth-child(1), .bi__stage-row:nth-child(2), .bi__stage-row:nth-child(3), .bi__stage-row:nth-child(4) { margin-left: 0; margin-right: 0; }
  .bi__drill-row { gap: 18px 14px; }
}

@media (max-width: 767px) {
  .bi__define, .bi__caps, .bi__drill, .bi__stages, .bi__compare, .bi__proof, .bi__value, .bi__tech, .bi__faq { padding-top: 80px; padding-bottom: 80px; }
  .bi__hero-title { font-size: 30px; }
  .bi__hero-lead { font-size: 16.5px; }
  .bi__caps-grid { grid-template-columns: 1fr; }
  .bi__cap-tile--wide { grid-column: span 1; }
  .bi__define-yes { font-size: 24px; }
  .bi__define-no { font-size: 22px; }
  .bi__drill-row { flex-direction: column; }
  .bi__drill-arrow { transform: rotate(90deg); }
  .bi__drill-node, .bi__drill-node--sm, .bi__drill-node--sm2, .bi__drill-node--sm3 { width: 100%; max-width: 280px; }
  .bi__stage-row { padding: 22px 22px; gap: 16px; }
  .bi__value-grid { grid-template-columns: 1fr; }
  .bi__value-tile--lead { grid-column: span 1; }
  .bi__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .bi__panel-tiles { grid-template-columns: 1fr; }
}

/* Users who ask for less motion get the page without the drifting
   hero glows, the scatter-chip float, the lens ring spin/pulse or
   the panel/trend bar animation. */
@media (prefers-reduced-motion: reduce) {
  .bi__page * { transition-duration: .01ms !important; }
  .bi__hero-glow { animation: none; }
  .bi__scatter-chip { animation: none; }
  .bi__lens-ring { animation: none; }
  .bi__lens-core { animation: none; }
  .bi__panel { animation: none; }
  .bi__panel-dot { animation: none; }
  .bi__panel-badge { animation: none; }
  .bi__panel-tile { animation: none; }
  .bi__panel-chart { animation: none; }
  .bi__panel-chart span { animation: none; }
  .bi__value-trend span { animation: none; }
}


/* ============================================================
   DATA WAREHOUSING PAGE (dwh__*)
   Scoped entirely to .dwh__page (added on <main> of
   data-warehousing.html). A child of .dax__page (Data &
   Analytics), sibling of .deng__page (Data Engineering) and
   .bi__page (Business Intelligence) - reuses the exact same token
   values (cyan #17B4CB / amber #F2B33D / rose #E85D8A on
   indigo-charcoal dark #0B0F1A + paper-blue #F5F8FC, Manrope
   display over Kanit body) under its own --dwh* variable names,
   per the site's "keep the brand, change the composition" rule for
   child service pages. The composition is unique to Warehousing:
   instead of dax's horizontal source->pipeline track, deng's
   vertical source-convergence funnel, or bi's scatter->lens->panel,
   the hero is a split layout - copy on the left, and on the right a
   layered "warehouse stack": loose, rotated source chips settling
   through five stacked, isometric-styled slabs (Landing, Staging,
   Dimensional Core, Governed Marts, Consumption) with a history
   rail of retention ticks running beside the stack, fanning out
   into neatly aligned output chips - visualizing chaos-to-order
   without a travelling pulse or funnel taper. Two sections are
   unique to this page and appear on no sibling: a dedicated
   dimensional-modelling diagram (a fact node with five radiating
   dimension spokes, positioned entirely in relative % so it stays
   responsive) explaining grain, conformed dimensions and
   historized attributes; and a governed data-marts grid. "How we
   work" is a horizontal zigzag roadmap (alternating up/down step
   cards) instead of dax's pulse line, deng's arrow-cards or bi's
   indented staircase. "Why us" is a bento with horizontal layers
   settling into place instead of dax's bar chart, deng's EKG or
   bi's trend line. Keyframes are prefixed dwhKf* so nothing
   collides with dax__, deng__, bi__ or any other page.
   ============================================================ */
.dwh__page {
  --dwh: #17B4CB;
  --dwh2: #F2B33D;
  --dwh3: #E85D8A;
  --dwhh: #131A2B;
  --dwht: #5B6478;
  --dwhb: #E2E7F0;
  --dwhbg: #F5F8FC;
  --dwhdark: #0B0F1A;
  --dwhdark2: #121A33;
  --dwhmuted: #94A0C2;
  --dwhdisplay: "Manrope", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.dwh__page .dwh__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dwh);
  margin-bottom: 16px;
}
.dwh__page .dwh__title {
  font-family: var(--dwhdisplay);
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--dwhh);
  margin: 0 0 20px;
}
.dwh__page .dwh__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dwhh); margin: 0 0 18px; }
.dwh__page .dwh__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dwht); margin: 0 0 16px; }
.dwh__page .dwh__text:last-child { margin-bottom: 0; }
.dwh__page .dwh__head { max-width: 780px; }
.dwh__page .dwh__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.dwh__page .dwh__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--dwhdark) 0%, var(--dwhdark2) 100%); }
.dwh__page .dwh__dark > .container { position: relative; z-index: 2; }
.dwh__page .dwh__dark .dwh__eyebrow { color: var(--dwh3); }
.dwh__page .dwh__dark .dwh__title { color: #fff; }
.dwh__page .dwh__dark .dwh__text { color: var(--dwhmuted); }

.dwh__page .dwh__btn,
.dwh__page .dwh__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dwh__page .dwh__btn { color: #06222B; background: var(--dwh); border: 2px solid var(--dwh); }
.dwh__page .dwh__btn:hover { background: #4FD6E8; border-color: #4FD6E8; color: #06222B; }
.dwh__page .dwh__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.dwh__page .dwh__btn-ghost:hover { background: #fff; color: var(--dwhdark); border-color: #fff; }

.dwh__page .dwh__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dwh);
  transition: gap .3s ease, color .3s ease;
}
.dwh__page .dwh__link:hover { gap: 15px; color: #0F8FA0; }

.dwh__page .dwh__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(23, 180, 203, .1);
  color: var(--dwh);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: split copy + layered warehouse stack (chaos -> order) ---------- */
.dwh__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--dwhdark) 0%, var(--dwhdark2) 100%);
  padding: 190px 0 110px;
}
.dwh__hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(23, 180, 203, .09) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(23, 180, 203, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(1000px 640px at 20% 10%, #000, transparent 76%);
          mask-image: radial-gradient(1000px 640px at 20% 10%, #000, transparent 76%);
}
.dwh__hero-glow { position: absolute; border-radius: 50%; filter: blur(88px); opacity: .34; pointer-events: none; animation: dwhKfDrift 13.5s ease-in-out infinite; }
.dwh__hero-glow--1 { width: 340px; height: 340px; background: var(--dwh); top: -80px; left: -60px; }
.dwh__hero-glow--2 { width: 260px; height: 260px; background: var(--dwh2); bottom: -60px; right: 22%; animation-delay: 3.2s; }
.dwh__hero > .container { position: relative; z-index: 2; }

.dwh__hero-grid-2 { display: grid; grid-template-columns: 1fr .98fr; gap: 56px; align-items: center; }

.dwh__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #D8EEF2;
  margin-bottom: 26px;
}
.dwh__hero-badge i { font-size: 12px; color: var(--dwh); }
.dwh__hero-title { font-family: var(--dwhdisplay); font-size: 47px; line-height: 1.19; font-weight: 700; letter-spacing: -.9px; color: #fff; margin: 0 0 22px; }
.dwh__hero-title em { font-style: normal; color: var(--dwh2); }
.dwh__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: #C9D6E8; margin: 0 0 34px; max-width: 540px; }
.dwh__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 42px; }

.dwh__hero-kpis { display: flex; flex-wrap: wrap; gap: 28px 36px; }
.dwh__hero-kpi { padding-left: 16px; border-left: 2px solid rgba(23, 180, 203, .4); }
.dwh__hero-kpi strong { display: block; font-family: var(--dwhdisplay); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.dwh__hero-kpi span { display: block; font-size: 12.5px; font-weight: 300; color: var(--dwhmuted); line-height: 1.5; max-width: 190px; }

/* The stack visual */
.dwh__stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.dwh__stack-sources { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 8px; max-width: 420px; }
.dwh__source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px dashed rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .035);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--dwhmuted);
  white-space: nowrap;
  animation: dwhKfChipFloat 5.5s ease-in-out infinite;
}
.dwh__source-chip i { font-size: 10.5px; color: var(--dwh3); }
.dwh__source-chip--1 { transform: rotate(-5deg); animation-delay: 0s; }
.dwh__source-chip--2 { transform: rotate(3deg) translateY(5px); animation-delay: .4s; }
.dwh__source-chip--3 { transform: rotate(-2deg) translateY(-4px); animation-delay: .8s; }
.dwh__source-chip--4 { transform: rotate(4deg); animation-delay: 1.2s; }
.dwh__source-chip--5 { transform: rotate(-4deg) translateY(4px); animation-delay: 1.6s; }

.dwh__stack-caption { flex: 0 0 100%; text-align: center; font-size: 11.5px; font-weight: 500; letter-spacing: .3px; color: var(--dwh3); margin-top: 2px; }
.dwh__stack-outputs .dwh__stack-caption { color: var(--dwh); }

.dwh__stack-body { display: grid; grid-template-columns: 30px 1fr; gap: 14px; width: 100%; max-width: 430px; }

.dwh__stack-rail { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
.dwh__stack-rail::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: repeating-linear-gradient(180deg, rgba(23, 180, 203, .4) 0 4px, transparent 4px 9px); }
.dwh__stack-tick { position: relative; display: flex; align-items: center; gap: 8px; z-index: 1; }
.dwh__stack-tick i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--dwhdark2); border: 1px solid var(--dwh); flex: none; }
.dwh__stack-tick em { font-style: normal; font-size: 9.5px; font-weight: 500; letter-spacing: .3px; color: var(--dwhmuted); white-space: nowrap; }
.dwh__stack-flow { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--dwh2); box-shadow: 0 0 10px 3px rgba(242, 179, 61, .55); animation: dwhKfFlowDot 4.5s ease-in-out infinite; }

.dwh__stack-slabs { display: flex; flex-direction: column; gap: 9px; }
.dwh__slab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 3px solid var(--dwh);
  animation: dwhKfSlabIn .7s cubic-bezier(.16, .84, .44, 1) both;
}
.dwh__stack-slabs .dwh__slab:nth-child(1) { animation-delay: .05s; }
.dwh__stack-slabs .dwh__slab:nth-child(2) { animation-delay: .18s; margin-left: 6px; border-left-color: var(--dwh2); }
.dwh__stack-slabs .dwh__slab:nth-child(3) { animation-delay: .31s; margin-left: 12px; }
.dwh__stack-slabs .dwh__slab:nth-child(4) { animation-delay: .44s; margin-left: 6px; border-left-color: var(--dwh2); }
.dwh__stack-slabs .dwh__slab:nth-child(5) { animation-delay: .57s; border-left-color: var(--dwh3); }
.dwh__slab-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(23, 180, 203, .14); color: var(--dwh); font-size: 14px; flex: none; }
.dwh__slab strong { display: block; font-family: var(--dwhdisplay); font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.dwh__slab span { display: block; font-size: 11px; font-weight: 300; color: var(--dwhmuted); line-height: 1.4; }
.dwh__slab--core { border-color: rgba(23, 180, 203, .4); background: rgba(23, 180, 203, .08); }
.dwh__slab-glyph { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; }
.dwh__slab-glyph span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--dwh2); animation: dwhKfGlyphPulse 2.4s ease-in-out infinite; }
.dwh__slab-glyph span:nth-child(1) { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; background: var(--dwh); animation-delay: 0s; }
.dwh__slab-glyph span:nth-child(2) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: .1s; }
.dwh__slab-glyph span:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%); animation-delay: .3s; }
.dwh__slab-glyph span:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: .5s; }
.dwh__slab-glyph span:nth-child(5) { top: 50%; left: 0; transform: translateY(-50%); animation-delay: .7s; }

.dwh__stack-outputs { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 8px; max-width: 420px; margin-top: 2px; }
.dwh__output-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid rgba(23, 180, 203, .35);
  background: rgba(23, 180, 203, .08);
  font-size: 11.5px;
  font-weight: 500;
  color: #D8EEF2;
  white-space: nowrap;
}
.dwh__output-chip i { font-size: 10.5px; color: var(--dwh); }

/* ---------- 02. Positioning: full-width narrative statement ---------- */
.dwh__define { padding: 120px 0; background: #fff; }
.dwh__define-inner { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.dwh__define-no {
  font-family: var(--dwhdisplay);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--dwhb);
  text-decoration: line-through;
  text-decoration-color: var(--dwh3);
  text-decoration-thickness: 2px;
  margin: 0 0 14px;
}
.dwh__define-yes {
  font-family: var(--dwhdisplay);
  font-size: 32px;
  line-height: 1.38;
  font-weight: 700;
  color: var(--dwhh);
  margin: 0 auto 26px;
  max-width: 780px;
}
.dwh__define-yes em { font-style: normal; color: var(--dwh); }
.dwh__define-inner .dwh__text { max-width: 700px; margin-left: auto; margin-right: auto; }
.dwh__define-note {
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--dwhb);
  background: var(--dwhbg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--dwht);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.dwh__define-note a { font-weight: 600; color: var(--dwh); }

.dwh__banner-media { position: relative; border-radius: 20px; overflow: hidden; max-width: 1040px; margin: 0 auto; }
.dwh__banner-media img { width: 100%; display: block; object-fit: cover; aspect-ratio: 21 / 8; }
.dwh__banner-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  background: var(--dwhbg);
  border: 1px solid var(--dwhb);
  border-top: none;
  border-radius: 0 0 20px 20px;
  margin-top: -6px;
  position: relative;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.dwh__banner-caption strong { font-family: var(--dwhdisplay); font-size: 14.5px; font-weight: 700; color: var(--dwhh); }
.dwh__banner-caption span { font-size: 13px; font-weight: 300; color: var(--dwht); }

/* ---------- 03. Signals: diagnostic icon grid ---------- */
.dwh__signals { padding: 120px 0; background: var(--dwhbg); }
.dwh__signals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dwh__signal-card { background: #fff; border: 1px solid var(--dwhb); border-radius: 16px; padding: 28px 26px; }
.dwh__signal-card .dwh__ico { width: 44px; height: 44px; font-size: 17px; margin-bottom: 16px; }
.dwh__signal-card h3 { font-family: var(--dwhdisplay); font-size: 16.5px; font-weight: 700; color: var(--dwhh); margin: 0 0 8px; }
.dwh__signal-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--dwht); margin: 0; }

/* ---------- 04. Zones: interactive warehouse layer inspector ---------- */
.dwh__zones { padding: 120px 0; background: #fff; }
.dwh__zones-wrap { display: grid; grid-template-columns: .78fr 1.22fr; gap: 0; border: 1px solid var(--dwhb); border-radius: 22px; overflow: hidden; }
.dwh__zones-list { display: flex; flex-direction: column; background: var(--dwhbg); border-right: 1px solid var(--dwhb); }
.dwh__zone-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--dwhb);
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: all .25s ease;
}
.dwh__zones-list .dwh__zone-btn:last-child { border-bottom: none; }
.dwh__zone-btn-num { flex: none; font-family: var(--dwhdisplay); font-size: 12.5px; font-weight: 700; color: var(--dwhb); }
.dwh__zone-btn-txt strong { display: block; font-family: var(--dwhdisplay); font-size: 15px; font-weight: 700; color: var(--dwhh); margin-bottom: 3px; }
.dwh__zone-btn-txt span { display: block; font-size: 12.5px; font-weight: 300; color: var(--dwht); line-height: 1.5; }
.dwh__zone-btn:hover { background: #fff; }
.dwh__zone-btn.is-active { background: #fff; border-left-color: var(--dwh); }
.dwh__zone-btn.is-active .dwh__zone-btn-num { color: var(--dwh); }

.dwh__zones-panels { position: relative; padding: 44px 46px; }
.dwh__zone-panel { display: none; animation: dwhKfFadeUp .5s ease both; }
.dwh__zone-panel.is-active { display: block; }
.dwh__zone-panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.dwh__zone-panel .dwh__ico { margin-bottom: 0; width: 48px; height: 48px; font-size: 18px; }
.dwh__zone-panel-head h3 { font-family: var(--dwhdisplay); font-size: 21px; font-weight: 700; color: var(--dwhh); margin: 0; }
.dwh__zone-panel-tag { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 20px; background: rgba(23, 180, 203, .1); color: var(--dwh); font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.dwh__zone-panel p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dwht); margin: 0 0 18px; }
.dwh__zone-panel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.dwh__zone-panel-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--dwht); }
.dwh__zone-panel-list li i { margin-top: 4px; font-size: 10px; color: var(--dwh); flex: none; }

/* ---------- 05. Dimensional modelling: fact + radiating dimension spokes ---------- */
.dwh__model { padding: 120px 0; background: var(--dwhbg); overflow: hidden; }
.dwh__model-canvas { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin: 0 auto 20px; }
.dwh__model-spoke { position: absolute; left: 50%; top: 50%; width: 40.5%; height: 0; border-top: 2px dashed var(--dwhb); transform-origin: 0 0; }
.dwh__model-spoke--date { transform: rotate(-90deg); }
.dwh__model-spoke--product { transform: rotate(-18deg); }
.dwh__model-spoke--customer { transform: rotate(54deg); }
.dwh__model-spoke--region { transform: rotate(126deg); }
.dwh__model-spoke--channel { transform: rotate(198deg); }
.dwh__model-fact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--dwhdark);
  border: 2px solid var(--dwh);
  box-shadow: 0 0 0 10px rgba(23, 180, 203, .09);
  text-align: center;
  padding: 10px;
  animation: dwhKfFactPulse 3.4s ease-in-out infinite;
}
.dwh__model-fact i { font-size: 18px; color: var(--dwh); margin-bottom: 4px; }
.dwh__model-fact strong { font-family: var(--dwhdisplay); font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25; }
.dwh__model-fact span { font-size: 9.5px; font-weight: 300; color: var(--dwhmuted); line-height: 1.3; }
.dwh__model-dim {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  padding: 12px 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--dwhb);
  box-shadow: 0 12px 26px rgba(19, 26, 43, .08);
  text-align: center;
  transform: translate(-50%, -50%);
}
.dwh__model-dim i { font-size: 14px; color: var(--dwh2); }
.dwh__model-dim strong { font-family: var(--dwhdisplay); font-size: 12px; font-weight: 700; color: var(--dwhh); }
.dwh__model-dim--date { top: 9.5%; left: 50%; }
.dwh__model-dim--product { top: 37.6%; left: 88.6%; }
.dwh__model-dim--customer { top: 82.9%; left: 73.8%; }
.dwh__model-dim--region { top: 82.9%; left: 26.2%; }
.dwh__model-dim--channel { top: 37.6%; left: 11.4%; }
.dwh__model-concepts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1040px; margin: 8px auto 0; }
.dwh__model-concept { padding: 24px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--dwhb); }
.dwh__model-concept strong { display: block; font-family: var(--dwhdisplay); font-size: 15px; font-weight: 700; color: var(--dwhh); margin-bottom: 8px; }
.dwh__model-concept p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--dwht); margin: 0; }

/* ---------- 06. Data marts: domain grid ---------- */
.dwh__marts { padding: 120px 0; background: #fff; }
.dwh__marts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.dwh__mart-card { padding: 28px 22px; border-radius: 16px; background: var(--dwhbg); border: 1px solid var(--dwhb); text-align: center; }
.dwh__mart-card .dwh__ico { margin: 0 auto 16px; width: 46px; height: 46px; font-size: 17px; }
.dwh__mart-card h3 { font-family: var(--dwhdisplay); font-size: 15px; font-weight: 700; color: var(--dwhh); margin: 0 0 8px; }
.dwh__mart-card p { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--dwht); margin: 0; }

/* ---------- 07. How we work: zigzag migration roadmap ---------- */
.dwh__road { padding: 120px 0; background: var(--dwhbg); }
.dwh__road-row { position: relative; display: flex; gap: 22px; max-width: 1180px; margin: 0 auto; }
.dwh__road-row::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--dwhb) 0 8px, transparent 8px 15px); z-index: 0; }
.dwh__road-step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--dwhb); }
.dwh__road-step--down { margin-top: 56px; }
.dwh__road-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--dwhdark); color: var(--dwh); font-family: var(--dwhdisplay); font-weight: 700; font-size: 13px; }
.dwh__road-step h3 { font-family: var(--dwhdisplay); font-size: 15.5px; font-weight: 700; color: var(--dwhh); margin: 0; }
.dwh__road-step p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--dwht); margin: 0; }

/* ---------- 08. Why 3Shadz: bento with layers settling into place ---------- */
.dwh__value { padding: 120px 0; background: var(--dwhdark); position: relative; overflow: hidden; }
.dwh__value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(242, 179, 61, .16), transparent 62%),
              radial-gradient(820px 460px at 4% 110%, rgba(23, 180, 203, .18), transparent 64%);
}
.dwh__value > .container { position: relative; z-index: 2; }
.dwh__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 22px; }
.dwh__value-tile {
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.dwh__value-tile--lead { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.dwh__value-tile h3 { font-family: var(--dwhdisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.dwh__value-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dwhmuted); margin: 0; }
.dwh__value-tile .dwh__ico { background: rgba(23, 180, 203, .16); }
.dwh__value-layers { display: flex; flex-direction: column; gap: 7px; margin-top: 20px; }
.dwh__value-layers span { height: 9px; border-radius: 4px; background: linear-gradient(90deg, var(--dwh) 0%, var(--dwh2) 100%); opacity: .85; transform-origin: left; animation: dwhKfLayerSettle 3.2s ease-in-out infinite alternate; }
.dwh__value-layers span:nth-child(1) { width: 96%; animation-delay: 0s; }
.dwh__value-layers span:nth-child(2) { width: 82%; animation-delay: .18s; }
.dwh__value-layers span:nth-child(3) { width: 100%; animation-delay: .36s; }
.dwh__value-layers span:nth-child(4) { width: 68%; animation-delay: .54s; }
.dwh__value-layers span:nth-child(5) { width: 88%; animation-delay: .72s; }

/* ---------- 09. Tool stack: four-column spec list ---------- */
.dwh__tech { padding: 120px 0; background: #fff; }
.dwh__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.dwh__tech-col { border-top: 3px solid var(--dwh); padding-top: 20px; }
.dwh__tech-col:nth-child(2) { border-top-color: var(--dwh2); }
.dwh__tech-col:nth-child(3) { border-top-color: var(--dwh3); }
.dwh__tech-col:nth-child(4) { border-top-color: var(--dwhh); }
.dwh__tech-col h3 { font-family: var(--dwhdisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--dwhh); margin: 0 0 16px; }
.dwh__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dwh__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--dwht); padding-left: 16px; position: relative; }
.dwh__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--dwhb); }

/* ---------- 10. FAQ ---------- */
.dwh__faq { padding: 120px 0; background: var(--dwhbg); }
.dwh__faq-list { max-width: 880px; margin: 0 auto; }
.dwh__faq-item { border-bottom: 1px solid var(--dwhb); }
.dwh__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--dwhdisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--dwhh);
  cursor: pointer;
}
.dwh__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dwhb); color: var(--dwh); flex: none; transition: all .3s ease; }
.dwh__faq-item.is-open .dwh__faq-icon { background: var(--dwh); border-color: var(--dwh); color: #06222B; transform: rotate(45deg); }
.dwh__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.dwh__faq-item.is-open .dwh__faq-a { max-height: 260px; }
.dwh__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dwht); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes dwhKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 12px); }
}
@keyframes dwhKfChipFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-5px) rotate(var(--r, 0deg)); }
}
@keyframes dwhKfFlowDot {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 9px); opacity: 0; }
}
@keyframes dwhKfSlabIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes dwhKfGlyphPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
@keyframes dwhKfFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dwhKfFactPulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(23, 180, 203, .09); }
  50% { box-shadow: 0 0 0 16px rgba(23, 180, 203, .05); }
}
@keyframes dwhKfLayerSettle {
  from { transform: scaleX(.94); opacity: .7; }
  to { transform: scaleX(1); opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .dwh__hero-grid-2 { grid-template-columns: 1fr; gap: 60px; }
  .dwh__hero-copy { max-width: 640px; }
  .dwh__hero-lead { max-width: none; }
  .dwh__signals-grid { grid-template-columns: repeat(2, 1fr); }
  .dwh__zones-wrap { grid-template-columns: 1fr; }
  .dwh__zones-list { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--dwhb); }
  .dwh__zone-btn { border-bottom: none; border-left: none; border-right: 1px solid var(--dwhb); min-width: 230px; }
  .dwh__zone-btn.is-active { border-left: none; border-bottom: 3px solid var(--dwh); }
  .dwh__zones-panels { padding: 36px 30px; }
  .dwh__marts-grid { grid-template-columns: repeat(3, 1fr); }
  .dwh__value-grid { grid-template-columns: repeat(2, 1fr); }
  .dwh__value-tile--lead { grid-column: span 2; }
  .dwh__tech-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 991px) {
  .dwh__hero { padding: 160px 0 90px; }
  .dwh__hero-title { font-size: 36px; }
  .dwh__road-row { flex-wrap: wrap; }
  .dwh__road-row::before { display: none; }
  .dwh__road-step, .dwh__road-step--down { margin-top: 0; flex: 1 1 calc(33.333% - 15px); }
  .dwh__model-concepts { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .dwh__define, .dwh__signals, .dwh__zones, .dwh__model, .dwh__marts, .dwh__road, .dwh__value, .dwh__tech, .dwh__faq { padding-top: 80px; padding-bottom: 80px; }
  .dwh__hero-title { font-size: 29px; }
  .dwh__hero-lead { font-size: 16.5px; }
  .dwh__signals-grid { grid-template-columns: 1fr; }
  .dwh__define-yes { font-size: 24px; }
  .dwh__define-no { font-size: 22px; }
  .dwh__zone-panel-list { grid-template-columns: 1fr; }
  .dwh__model-dim { width: 78px; padding: 9px 7px; }
  .dwh__model-dim strong { font-size: 10.5px; }
  .dwh__model-fact { width: 108px; height: 108px; }
  .dwh__marts-grid { grid-template-columns: repeat(2, 1fr); }
  .dwh__road-step, .dwh__road-step--down { flex: 1 1 100%; }
  .dwh__value-grid { grid-template-columns: 1fr; }
  .dwh__value-tile--lead { grid-column: span 1; }
  .dwh__tech-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Users who ask for less motion get the page without the drifting
   hero glows, the source-chip float, the rail flow dot, the slab
   entrance animation, the dimensional glyph pulse or the layer
   settle animation. */
@media (prefers-reduced-motion: reduce) {
  .dwh__page * { transition-duration: .01ms !important; }
  .dwh__hero-glow { animation: none; }
  .dwh__source-chip { animation: none; }
  .dwh__stack-flow { animation: none; opacity: 0; }
  .dwh__slab { animation: none; }
  .dwh__slab-glyph span { animation: none; }
  .dwh__model-fact { animation: none; }
  .dwh__value-layers span { animation: none; }
  .dwh__zone-panel { animation: none; }
}

/* ============================================================
   BIG DATA ENGINEERING PAGE (bde__*)
   Scoped entirely to .bde__page (added on <main> of
   big-data-engineering.html). A child of .dax__page (Data &
   Analytics), sibling of .deng__page / .dwh__page / .bi__page -
   reuses the exact same token values (cyan #17B4CB / amber
   #F2B33D / rose #E85D8A on indigo-charcoal dark #0B0F1A + paper-
   blue #F5F8FC, Manrope display over Kanit body) under its own
   --bde* variable names.
   Nothing about the composition is reused from its siblings: the
   hero is a distributed-processing lattice - scattered high-
   volume sources fanning out into a "partitioned" connector, a
   row of parallel compute nodes threaded by a batch lane above
   and a streaming lane below (two concurrent paths, not one
   pulse line or one stack), a checkpoint row for fault tolerance,
   converging into a three-zone lakehouse and back out to
   consumption endpoints. Downstream sections use their own
   distinct visual grammar per area: a four-dimension threshold
   panel (volume/velocity/variety/concurrency), four connected
   capability pillars (not a rail or snap-scroll cards), a batch-
   vs-streaming two-path comparison converging into one node, a
   three-zone lakehouse band, a worker/partition matrix, a dark
   incident-timeline for fault tolerance, a challenge/control
   matrix for quality, and a DAG + health-tile panel for
   orchestration/observability. Keyframes are prefixed bdeKf* so
   nothing collides with dax__/deng__/dwh__/bi__.
   ============================================================ */
.bde__page {
  --bde: #17B4CB;
  --bde2: #F2B33D;
  --bde3: #E85D8A;
  --bdeh: #131A2B;
  --bdet: #5B6478;
  --bdeb: #E2E7F0;
  --bdebg: #F5F8FC;
  --bdedark: #0B0F1A;
  --bdedark2: #121A33;
  --bdemuted: #94A0C2;
  --bdedisplay: "Manrope", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.bde__page .bde__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bde);
  margin-bottom: 16px;
}
.bde__page .bde__title {
  font-family: var(--bdedisplay);
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--bdeh);
  margin: 0 0 20px;
}
.bde__page .bde__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--bdeh); margin: 0 0 18px; }
.bde__page .bde__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--bdet); margin: 0 0 16px; }
.bde__page .bde__text:last-child { margin-bottom: 0; }
.bde__page .bde__head { max-width: 780px; }
.bde__page .bde__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.bde__page .bde__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--bdedark) 0%, var(--bdedark2) 100%); }
.bde__page .bde__dark > .container { position: relative; z-index: 2; }
.bde__page .bde__dark .bde__eyebrow { color: var(--bde3); }
.bde__page .bde__dark .bde__title { color: #fff; }
.bde__page .bde__dark .bde__text { color: var(--bdemuted); }

.bde__page .bde__btn,
.bde__page .bde__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.bde__page .bde__btn { color: #06222B; background: var(--bde); border: 2px solid var(--bde); }
.bde__page .bde__btn:hover { background: #4FD6E8; border-color: #4FD6E8; color: #06222B; }
.bde__page .bde__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.bde__page .bde__btn-ghost:hover { background: #fff; color: var(--bdedark); border-color: #fff; }

.bde__page .bde__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bde);
  transition: gap .3s ease, color .3s ease;
}
.bde__page .bde__link:hover { gap: 15px; color: #0F8FA0; }

.bde__page .bde__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(23, 180, 203, .1);
  color: var(--bde);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: distributed processing lattice ---------- */
.bde__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--bdedark) 0%, var(--bdedark2) 100%);
  padding: 190px 0 110px;
}
.bde__hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(23, 180, 203, .09) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(23, 180, 203, .09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1100px 640px at 50% 0%, #000, transparent 76%);
          mask-image: radial-gradient(1100px 640px at 50% 0%, #000, transparent 76%);
}
.bde__hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .34; pointer-events: none; animation: bdeKfDrift 15s ease-in-out infinite; }
.bde__hero-glow--1 { width: 380px; height: 380px; background: var(--bde); top: -110px; left: 10%; }
.bde__hero-glow--2 { width: 300px; height: 300px; background: var(--bde3); bottom: -90px; right: 8%; animation-delay: 3.8s; }
.bde__hero > .container { position: relative; z-index: 2; }

.bde__hero-top { max-width: 780px; margin: 0 auto 64px; text-align: center; }
.bde__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #D8EEF2;
  margin-bottom: 26px;
}
.bde__hero-badge i { font-size: 12px; color: var(--bde); }
.bde__hero-title { font-family: var(--bdedisplay); font-size: 44px; line-height: 1.2; font-weight: 700; letter-spacing: -.8px; color: #fff; margin: 0 0 22px; }
.bde__hero-title em { font-style: normal; color: var(--bde2); }
.bde__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C9D6E8; margin: 0 auto 34px; max-width: 640px; }
.bde__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Lattice diagram */
.bde__lattice { position: relative; max-width: 1120px; margin: 0 auto; }

.bde__lattice-sources { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bde__source-chip { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; text-align: center; }
.bde__source-chip:nth-child(1) { transform: translateY(-4px); }
.bde__source-chip:nth-child(2) { transform: translateY(10px); }
.bde__source-chip:nth-child(4) { transform: translateY(14px); }
.bde__source-chip:nth-child(5) { transform: translateY(4px); }
.bde__source-chip-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bdedark2);
  border: 1px solid rgba(23, 180, 203, .38);
  color: var(--bde);
  font-size: 15px;
  animation: bdeKfChipPulse 3.6s ease-in-out infinite;
}
.bde__source-chip:nth-child(2) .bde__source-chip-ico { animation-delay: .6s; border-color: rgba(242, 179, 61, .4); color: var(--bde2); }
.bde__source-chip:nth-child(3) .bde__source-chip-ico { animation-delay: 1.2s; }
.bde__source-chip:nth-child(4) .bde__source-chip-ico { animation-delay: 1.8s; border-color: rgba(232, 93, 138, .4); color: var(--bde3); }
.bde__source-chip:nth-child(5) .bde__source-chip-ico { animation-delay: 2.4s; }
.bde__source-chip span { font-size: 11.5px; font-weight: 500; color: var(--bdemuted); line-height: 1.3; }

.bde__lattice-connector { position: relative; height: 42px; margin: 4px 0; display: flex; align-items: center; justify-content: center; }
.bde__lattice-connector::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(23, 180, 203, .4) 0 6px, transparent 6px 12px);
}
.bde__lattice-connector-label {
  position: relative;
  z-index: 1;
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: var(--bdedark);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bdemuted);
}

.bde__lattice-core { padding: 6px 0 4px; }
.bde__lane { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.bde__lane-label {
  flex: none;
  width: 84px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}
.bde__lane--batch .bde__lane-label i { color: var(--bde); }
.bde__lane--stream .bde__lane-label i { color: var(--bde3); }
.bde__lane-track { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.bde__lane-packet { position: absolute; top: 50%; transform: translateY(-50%); }
.bde__lane-packet--batch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--bde);
  box-shadow: 0 0 10px 2px rgba(23, 180, 203, .6);
  animation: bdeKfBatchMove 4.4s steps(6) infinite;
}
.bde__lane-packet--batch2 { animation-delay: 2.2s; background: var(--bde2); box-shadow: 0 0 10px 2px rgba(242, 179, 61, .55); }
.bde__lane-packet--stream {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bde3);
  box-shadow: 0 0 8px 2px rgba(232, 93, 138, .6);
  animation: bdeKfStreamMove 2.1s linear infinite;
}
.bde__lane-packet--stream2 { animation-delay: .7s; }
.bde__lane-packet--stream3 { animation-delay: 1.4s; }

.bde__node-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin: 4px 0; }
.bde__node {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(23, 180, 203, .35);
  color: var(--bde);
  font-size: 14px;
  animation: bdeKfNodePulse 3.2s ease-in-out infinite;
}
.bde__node:nth-child(2) { animation-delay: .3s; }
.bde__node:nth-child(3) { animation-delay: .6s; border-color: rgba(242, 179, 61, .4); color: var(--bde2); }
.bde__node:nth-child(4) { animation-delay: .9s; }
.bde__node:nth-child(5) { animation-delay: 1.2s; border-color: rgba(232, 93, 138, .4); color: var(--bde3); }
.bde__node:nth-child(6) { animation-delay: 1.5s; }
.bde__node:nth-child(7) { animation-delay: 1.8s; }
.bde__node:nth-child(8) { animation-delay: 2.1s; border-color: rgba(242, 179, 61, .4); color: var(--bde2); }

.bde__checkpoints { display: flex; justify-content: center; gap: 18px; margin: 10px 0 6px; }
.bde__checkpoint {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .32);
  color: var(--bde2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.bde__checkpoints-caption { display: block; text-align: center; font-size: 11.5px; font-weight: 300; color: var(--bdemuted); margin-bottom: 4px; }

.bde__lattice-zones-label { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bde2); margin-bottom: 10px; }
.bde__lattice-zones { display: flex; gap: 12px; margin-bottom: 14px; }
.bde__zone {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.bde__zone-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(23, 180, 203, .16); color: var(--bde); font-size: 13px; flex: none; }
.bde__lattice-zones .bde__zone:nth-child(2) .bde__zone-ico { background: rgba(242, 179, 61, .18); color: var(--bde2); }
.bde__lattice-zones .bde__zone:nth-child(3) .bde__zone-ico { background: rgba(232, 93, 138, .18); color: var(--bde3); }

.bde__lattice-outputs { display: flex; justify-content: center; gap: 14px; }
.bde__output-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  font-size: 12.5px;
  font-weight: 500;
  color: #DCE6F0;
}
.bde__output-chip i { color: var(--bde2); font-size: 12px; }

.bde__hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .1); max-width: 1120px; margin-left: auto; margin-right: auto; }
.bde__hero-metric { text-align: center; }
.bde__hero-metric strong { display: block; font-family: var(--bdedisplay); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.bde__hero-metric span { display: block; font-size: 13px; font-weight: 300; color: var(--bdemuted); line-height: 1.6; }

/* ---------- 02. Positioning: full-width narrative statement ---------- */
.bde__define { padding: 120px 0; background: #fff; }
.bde__define-inner { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.bde__define-no {
  font-family: var(--bdedisplay);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--bdeb);
  text-decoration: line-through;
  text-decoration-color: var(--bde3);
  text-decoration-thickness: 2px;
  margin: 0 0 14px;
}
.bde__define-yes {
  font-family: var(--bdedisplay);
  font-size: 32px;
  line-height: 1.38;
  font-weight: 700;
  color: var(--bdeh);
  margin: 0 auto 26px;
  max-width: 760px;
}
.bde__define-yes em { font-style: normal; color: var(--bde); }
.bde__define-inner .bde__text { max-width: 700px; margin-left: auto; margin-right: auto; }
.bde__define-note {
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--bdeb);
  background: var(--bdebg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--bdet);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.bde__define-note a { font-weight: 600; color: var(--bde); }

.bde__banner-media { position: relative; border-radius: 20px; overflow: hidden; max-width: 1040px; margin: 0 auto; }
.bde__banner-media img { width: 100%; display: block; object-fit: cover; aspect-ratio: 21 / 8; }
.bde__banner-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  background: var(--bdebg);
  border: 1px solid var(--bdeb);
  border-top: none;
  border-radius: 0 0 20px 20px;
  margin-top: -6px;
  position: relative;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.bde__banner-caption strong { font-family: var(--bdedisplay); font-size: 14.5px; font-weight: 700; color: var(--bdeh); }
.bde__banner-caption span { font-size: 13px; font-weight: 300; color: var(--bdet); }

/* ---------- 03. When scale becomes the problem: threshold panel ---------- */
.bde__scale { padding: 120px 0; background: var(--bdebg); }
.bde__scale-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bde__scale-card { padding: 30px 26px; border-radius: 18px; background: #fff; border: 1px solid var(--bdeb); }
.bde__scale-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(23, 180, 203, .1);
  color: var(--bde);
  font-size: 18px;
  margin-bottom: 18px;
}
.bde__scale-gauge { display: block; height: 5px; border-radius: 4px; background: var(--bdeb); overflow: hidden; margin-bottom: 18px; }
.bde__scale-gauge i { display: block; height: 100%; width: var(--bdeGaugeW, 60%); border-radius: 4px; background: linear-gradient(90deg, var(--bde), var(--bde3)); }
.bde__scale-card h3 { font-family: var(--bdedisplay); font-size: 18px; font-weight: 700; color: var(--bdeh); margin: 0 0 10px; }
.bde__scale-card p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--bdet); margin: 0; }

/* ---------- 04. Capabilities: four connected pillars ---------- */
.bde__pillars { padding: 120px 0; background: #fff; }
.bde__pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bde__pillar { position: relative; padding: 30px 26px; border-radius: 18px; background: var(--bdebg); border: 1px solid var(--bdeb); }
.bde__pillar-num { position: absolute; top: 26px; right: 26px; font-family: var(--bdedisplay); font-size: 13px; font-weight: 700; color: var(--bdeb); }
.bde__pillar h3 { font-family: var(--bdedisplay); font-size: 18px; font-weight: 700; color: var(--bdeh); margin: 0 0 16px; }
.bde__pillar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bde__pillar-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--bdet); }
.bde__pillar-list li i { margin-top: 3px; font-size: 10.5px; color: var(--bde); flex: none; }

/* ---------- 05. Batch vs streaming: two paths converging ---------- */
.bde__paths { padding: 120px 0; background: var(--bdedark); position: relative; overflow: hidden; }
.bde__paths::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 6% -10%, rgba(23, 180, 203, .16), transparent 62%),
              radial-gradient(760px 440px at 98% 108%, rgba(232, 93, 138, .14), transparent 64%);
}
.bde__paths > .container { position: relative; z-index: 2; }
.bde__paths .bde__title, .bde__paths .bde__eyebrow { color: #fff; }
.bde__paths .bde__eyebrow { color: var(--bde2); }
.bde__paths .bde__text { color: var(--bdemuted); }
.bde__paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 980px; margin: 0 auto; }
.bde__path-card { padding: 32px 30px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.bde__path-card .bde__ico { background: rgba(23, 180, 203, .16); }
.bde__path-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--bde2); margin-bottom: 10px; }
.bde__path-card h3 { font-family: var(--bdedisplay); font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.bde__path-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--bdemuted); margin: 0 0 14px; }
.bde__path-card p:last-child { margin-bottom: 0; }
.bde__path-card p strong { color: #fff; font-weight: 600; }

.bde__paths-converge { position: relative; max-width: 620px; margin: 48px auto 0; text-align: center; padding-top: 40px; }
.bde__paths-converge-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 40px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px);
}
.bde__paths-converge-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 30px;
  background: rgba(23, 180, 203, .14);
  border: 1px solid rgba(23, 180, 203, .4);
  color: #fff;
  font-family: var(--bdedisplay);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 16px;
}
.bde__paths-converge-node i { color: var(--bde); }
.bde__paths-converge p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--bdemuted); margin: 0; }

/* ---------- 06. Lakehouse: three storage zones ---------- */
.bde__lakehouse { padding: 120px 0; background: #fff; }
.bde__zones-band { display: flex; align-items: stretch; gap: 18px; max-width: 1080px; margin: 0 auto 40px; }
.bde__zone-panel { position: relative; flex: 1; padding: 30px 26px; border-radius: 18px; background: var(--bdebg); border: 1px solid var(--bdeb); }
.bde__zone-panel-num { position: absolute; top: 24px; right: 26px; font-family: var(--bdedisplay); font-size: 13px; font-weight: 700; color: var(--bdeb); }
.bde__zone-panel h3 { font-family: var(--bdedisplay); font-size: 17px; font-weight: 700; color: var(--bdeh); margin: 14px 0 10px; }
.bde__zone-panel p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--bdet); margin: 0; }
.bde__zone-arrow { display: flex; align-items: center; justify-content: center; color: var(--bdeb); font-size: 18px; flex: none; }
.bde__lakehouse .bde__lakehouse-note { max-width: 900px; margin: 0 auto; text-align: center; }

/* ---------- 07. Partitioning: worker/partition matrix ---------- */
.bde__partitions { padding: 120px 0; background: var(--bdebg); }
.bde__partitions-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.bde__partitions-visual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bde__partitions-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bde__partitions-col-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--bdet); margin-bottom: 4px; }
.bde__partition-block {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--bdeb);
  position: relative;
  overflow: hidden;
}
.bde__partition-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(23, 180, 203, .28) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: bdeKfPartitionShift 3.6s ease-in-out infinite;
}
.bde__partitions-col:nth-child(2) .bde__partition-block::before { animation-delay: .5s; background-image: linear-gradient(120deg, transparent 30%, rgba(242, 179, 61, .28) 50%, transparent 70%); }
.bde__partitions-col:nth-child(3) .bde__partition-block::before { animation-delay: 1s; background-image: linear-gradient(120deg, transparent 30%, rgba(232, 93, 138, .28) 50%, transparent 70%); }
.bde__partitions-col:nth-child(4) .bde__partition-block::before { animation-delay: 1.5s; }
.bde__partitions-col .bde__partition-block:nth-child(3)::before { animation-delay: 2.1s; }
.bde__partitions-col .bde__partition-block:nth-child(4)::before { animation-delay: 2.7s; }

/* ---------- 08. Fault tolerance: dark incident timeline ---------- */
.bde__resilience { padding: 120px 0; }
.bde__resilience-timeline { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 1080px; margin: 0 auto 50px; flex-wrap: wrap; }
.bde__resilience-step { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; width: 140px; }
.bde__resilience-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--bde);
  font-size: 17px;
}
.bde__resilience-step--fail .bde__resilience-ico { color: var(--bde3); border-color: rgba(232, 93, 138, .45); background: rgba(232, 93, 138, .1); }
.bde__resilience-step--ok .bde__resilience-ico { color: #2FE0A8; border-color: rgba(47, 224, 168, .45); background: rgba(47, 224, 168, .1); }
.bde__resilience-step span:last-child { font-size: 12.5px; font-weight: 600; color: #fff; }
.bde__resilience-line { flex: 1; min-width: 30px; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px); margin: 0 4px; align-self: center; margin-top: -30px; }

.bde__resilience-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.bde__resilience-chip { padding: 22px 24px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.bde__resilience-chip strong { display: block; font-family: var(--bdedisplay); font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.bde__resilience-chip span { display: block; font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--bdemuted); }

/* ---------- 09. Data quality: challenge/control matrix ---------- */
.bde__quality { padding: 120px 0; background: #fff; }
.bde__quality-matrix { max-width: 1040px; margin: 0 auto; display: grid; gap: 14px; }
.bde__quality-row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 10px; padding: 20px 24px; border-radius: 14px; background: var(--bdebg); border: 1px solid var(--bdeb); }
.bde__quality-challenge { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--bdeh); }
.bde__quality-challenge i { color: var(--bde3); font-size: 14px; flex: none; }
.bde__quality-arrow { display: flex; align-items: center; justify-content: center; color: var(--bde); font-size: 14px; }
.bde__quality-control { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--bdet); }

/* ---------- 10. Orchestration & observability ---------- */
.bde__orchestration { padding: 120px 0; background: var(--bdebg); }
.bde__orchestration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 50px; }
.bde__orchestration-panel { padding: 32px 30px; border-radius: 18px; background: #fff; border: 1px solid var(--bdeb); }
.bde__orchestration-panel h3 { font-family: var(--bdedisplay); font-size: 17px; font-weight: 700; color: var(--bdeh); margin: 0 0 22px; }

.bde__dag { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bde__dag-node {
  padding: 9px 14px;
  border-radius: 9px;
  background: var(--bdedark);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.bde__dag-node--sm { font-size: 11px; padding: 7px 11px; }
.bde__dag-node--end { background: var(--bde); color: #06222B; }
.bde__dag-line { width: 20px; height: 1px; background: var(--bdeb); flex: none; }
.bde__dag-branch { display: flex; flex-direction: column; gap: 6px; }

.bde__health-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
.bde__health-tile { padding: 14px 16px; border-radius: 12px; background: var(--bdebg); border: 1px solid var(--bdeb); }
.bde__health-label { display: block; font-size: 12px; font-weight: 600; color: var(--bdeh); margin-bottom: 10px; }
.bde__health-bar { display: block; height: 6px; border-radius: 4px; background: var(--bdeb); overflow: hidden; }
.bde__health-bar i { display: block; height: 100%; width: var(--bdeHealthW, 50%); border-radius: 4px; background: linear-gradient(90deg, var(--bde), var(--bde2)); }

.bde__orchestration .bde__banner-media, .bde__orchestration .bde__banner-caption { margin-bottom: 0; }
.bde__orchestration .bde__banner-caption { margin-bottom: 0; }

/* ---------- 11. How we work: five-stage arrow rail ---------- */
.bde__process { padding: 120px 0; background: #fff; }
.bde__process-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 0 16px; align-items: stretch; }
.bde__process-card { position: relative; padding: 28px 22px; border: 1px solid var(--bdeb); border-radius: 16px; background: var(--bdebg); }
.bde__process-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bdedark); color: var(--bde); font-family: var(--bdedisplay); font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.bde__process-card h3 { font-family: var(--bdedisplay); font-size: 15.5px; font-weight: 700; color: var(--bdeh); margin: 0 0 8px; }
.bde__process-card p { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--bdet); margin: 0; }
.bde__process-grid > .bde__process-arrow { display: flex; align-items: center; justify-content: center; color: var(--bdeb); font-size: 16px; }

/* ---------- 12. Why 3Shadz: dark bento with throughput bar tile ---------- */
.bde__value { padding: 120px 0; }
.bde__value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(232, 93, 138, .14), transparent 62%),
              radial-gradient(820px 460px at 4% 110%, rgba(23, 180, 203, .18), transparent 64%);
}
.bde__value > .container { position: relative; z-index: 2; }
.bde__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 22px; }
.bde__value-tile {
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.bde__value-tile--lead { display: flex; flex-direction: column; justify-content: space-between; }
.bde__value-tile h3 { font-family: var(--bdedisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.bde__value-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--bdemuted); margin: 0; }
.bde__value-tile .bde__ico { background: rgba(23, 180, 203, .16); }
.bde__value-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 18px; }
.bde__value-bars span { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--bde) 0%, var(--bde3) 100%); opacity: .9; animation: bdeKfWave 2.4s ease-in-out infinite; }
.bde__value-bars span:nth-child(1) { height: 35%; animation-delay: 0s; }
.bde__value-bars span:nth-child(2) { height: 60%; animation-delay: .15s; }
.bde__value-bars span:nth-child(3) { height: 100%; animation-delay: .3s; }
.bde__value-bars span:nth-child(4) { height: 45%; animation-delay: .45s; }
.bde__value-bars span:nth-child(5) { height: 75%; animation-delay: .6s; }
.bde__value-bars span:nth-child(6) { height: 55%; animation-delay: .75s; }

/* ---------- 13. Tool stack: four-column spec list ---------- */
.bde__tech { padding: 120px 0; background: #fff; }
.bde__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.bde__tech-col { border-top: 3px solid var(--bde); padding-top: 20px; }
.bde__tech-col:nth-child(2) { border-top-color: var(--bde2); }
.bde__tech-col:nth-child(3) { border-top-color: var(--bde3); }
.bde__tech-col:nth-child(4) { border-top-color: var(--bdeh); }
.bde__tech-col h3 { font-family: var(--bdedisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--bdeh); margin: 0 0 16px; }
.bde__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bde__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--bdet); padding-left: 16px; position: relative; }
.bde__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--bdeb); }

/* ---------- 14. FAQ ---------- */
.bde__faq { padding: 120px 0; background: var(--bdebg); }
.bde__faq-list { max-width: 880px; margin: 0 auto; }
.bde__faq-item { border-bottom: 1px solid var(--bdeb); }
.bde__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--bdedisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--bdeh);
  cursor: pointer;
}
.bde__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bdeb); color: var(--bde); flex: none; transition: all .3s ease; }
.bde__faq-item.is-open .bde__faq-icon { background: var(--bde); border-color: var(--bde); color: #06222B; transform: rotate(45deg); }
.bde__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bde__faq-item.is-open .bde__faq-a { max-height: 260px; }
.bde__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--bdet); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes bdeKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-18px, 16px); }
}
@keyframes bdeKfChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 180, 203, .35); }
  50% { box-shadow: 0 0 0 6px rgba(23, 180, 203, 0); }
}
@keyframes bdeKfBatchMove {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 12px); opacity: 0; }
}
@keyframes bdeKfStreamMove {
  0% { left: 0%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
@keyframes bdeKfNodePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(23, 180, 203, .3); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(23, 180, 203, 0); }
}
@keyframes bdeKfPartitionShift {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
@keyframes bdeKfWave {
  0%, 100% { transform: scaleY(.75); }
  50% { transform: scaleY(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .bde__scale-grid { grid-template-columns: repeat(2, 1fr); }
  .bde__pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .bde__paths-grid { grid-template-columns: 1fr; }
  .bde__partitions-grid { grid-template-columns: 1fr; gap: 40px; }
  .bde__orchestration-grid { grid-template-columns: 1fr; }
  .bde__health-grid { grid-template-columns: repeat(2, 1fr); }
  .bde__process-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .bde__process-grid > .bde__process-arrow { display: none; }
  .bde__value-grid { grid-template-columns: repeat(2, 1fr); }
  .bde__tech-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .bde__node-grid { grid-template-columns: repeat(6, 1fr); }
  .bde__resilience-chips { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .bde__hero { padding: 160px 0 90px; }
  .bde__hero-title { font-size: 34px; }
  .bde__lattice-sources { flex-wrap: wrap; }
  .bde__source-chip { flex: 1 1 30%; transform: none !important; }
  .bde__lane-label { width: 66px; font-size: 10px; }
  .bde__node-grid { grid-template-columns: repeat(4, 1fr); }
  .bde__lattice-zones, .bde__lattice-outputs { flex-wrap: wrap; }
  .bde__zones-band { flex-direction: column; }
  .bde__zone-arrow { transform: rotate(90deg); }
  .bde__quality-row { grid-template-columns: 1fr; }
  .bde__quality-arrow { transform: rotate(90deg); justify-content: flex-start; }
  .bde__resilience-timeline { gap: 20px; }
  .bde__resilience-line { display: none; }
}

@media (max-width: 767px) {
  .bde__define, .bde__scale, .bde__pillars, .bde__paths, .bde__lakehouse, .bde__partitions, .bde__resilience, .bde__quality, .bde__orchestration, .bde__process, .bde__value, .bde__tech, .bde__faq { padding-top: 80px; padding-bottom: 80px; }
  .bde__hero-title { font-size: 28px; }
  .bde__hero-lead { font-size: 16px; }
  .bde__scale-grid { grid-template-columns: 1fr; }
  .bde__pillars-grid { grid-template-columns: 1fr; }
  .bde__partitions-visual { grid-template-columns: repeat(2, 1fr); }
  .bde__process-grid { grid-template-columns: 1fr; }
  .bde__value-grid { grid-template-columns: 1fr; }
  .bde__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .bde__hero-metrics { grid-template-columns: 1fr; }
  .bde__node-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Users who ask for less motion get the page without the
   drifting hero glows, the source-chip pulse ring, the batch and
   stream packets travelling their lanes, the node pulse, or the
   partition shimmer/value bar animations. */
@media (prefers-reduced-motion: reduce) {
  .bde__page * { transition-duration: .01ms !important; }
  .bde__hero-glow { animation: none; }
  .bde__source-chip-ico { animation: none; }
  .bde__lane-packet { animation: none; opacity: .9; }
  .bde__node { animation: none; }
  .bde__partition-block::before { animation: none; }
  .bde__value-bars span { animation: none; }
}

/* ============================================================
   DATA GOVERNANCE PAGE (dgov__*)
   Scoped entirely to .dgov__page (added on <main> of
   data-governance.html). A child of .dax__page (Data &
   Analytics), sibling of .deng__page / .bi__page / .dwh__page /
   .bde__page - reuses the exact same token values (cyan #17B4CB /
   amber #F2B33D / rose #E85D8A on indigo-charcoal dark #0B0F1A +
   paper-blue #F5F8FC, Manrope display over Kanit body) under its
   own --dgov* variable names, per the site's "keep the brand,
   change the composition" rule for child service pages.
   Nothing about the composition is reused from its siblings: the
   hero is a three-stage ownership flow - scattered, disputed data
   domain chips passing through a single "governance gate" card
   (four stacked control badges, not four stacked layer cards)
   into tidy governed-domain cards carrying a steward-initial
   badge and a classification pill, closing with a trusted-
   consumption strip. A horizontal stepped maturity scale, an
   asymmetric ownership/steward card-stack section, a framework of
   four labelled capability *groups* in one continuous grid (not
   pillars, a rail, or a bento), a platform-coverage band, and a
   five-stage governance *cycle* that loops back on itself (every
   sibling's process is linear) are unique to this page. "Why us"
   is a bento with a four-segment classification-meter tile
   instead of dax's bar chart, deng's EKG, bi's trend line, dwh's
   settling layers or bde's node pulse. Keyframes are prefixed
   dgovKf* so nothing collides with dax__/deng__/bi__/dwh__/bde__.
   ============================================================ */
.dgov__page {
  --dgov: #17B4CB;
  --dgov2: #F2B33D;
  --dgov3: #E85D8A;
  --dgovh: #131A2B;
  --dgovt: #5B6478;
  --dgovb: #E2E7F0;
  --dgovbg: #F5F8FC;
  --dgovdark: #0B0F1A;
  --dgovdark2: #121A33;
  --dgovmuted: #94A0C2;
  --dgovdisplay: "Manrope", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.dgov__page .dgov__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dgov);
  margin-bottom: 16px;
}
.dgov__page .dgov__title {
  font-family: var(--dgovdisplay);
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--dgovh);
  margin: 0 0 20px;
}
.dgov__page .dgov__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dgovh); margin: 0 0 18px; }
.dgov__page .dgov__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dgovt); margin: 0 0 16px; }
.dgov__page .dgov__text:last-child { margin-bottom: 0; }
.dgov__page .dgov__head { max-width: 780px; }
.dgov__page .dgov__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.dgov__page .dgov__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--dgovdark) 0%, var(--dgovdark2) 100%); }
.dgov__page .dgov__dark > .container { position: relative; z-index: 2; }
.dgov__page .dgov__dark .dgov__eyebrow { color: var(--dgov3); }
.dgov__page .dgov__dark .dgov__title { color: #fff; }
.dgov__page .dgov__dark .dgov__text { color: var(--dgovmuted); }

.dgov__page .dgov__btn,
.dgov__page .dgov__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dgov__page .dgov__btn { color: #06222B; background: var(--dgov); border: 2px solid var(--dgov); }
.dgov__page .dgov__btn:hover { background: #4FD6E8; border-color: #4FD6E8; color: #06222B; }
.dgov__page .dgov__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.dgov__page .dgov__btn-ghost:hover { background: #fff; color: var(--dgovdark); border-color: #fff; }

.dgov__page .dgov__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dgov);
  transition: gap .3s ease, color .3s ease;
}
.dgov__page .dgov__link:hover { gap: 15px; color: #0F8FA0; }

.dgov__page .dgov__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(23, 180, 203, .1);
  color: var(--dgov);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: fragmented domains -> governance gate -> owned domains -> trusted use ---------- */
.dgov__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--dgovdark) 0%, var(--dgovdark2) 100%);
  padding: 190px 0 100px;
}
.dgov__hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(23, 180, 203, .10) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(23, 180, 203, .10) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(900px 560px at 50% 0%, #000, transparent 74%);
          mask-image: radial-gradient(900px 560px at 50% 0%, #000, transparent 74%);
}
.dgov__hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .34; pointer-events: none; animation: dgovKfDrift 15s ease-in-out infinite; }
.dgov__hero-glow--1 { width: 380px; height: 380px; background: var(--dgov); top: -110px; left: 6%; }
.dgov__hero-glow--2 { width: 260px; height: 260px; background: var(--dgov3); bottom: -70px; right: 8%; animation-delay: 3.8s; }
.dgov__hero > .container { position: relative; z-index: 2; }

.dgov__hero-top { max-width: 780px; margin: 0 auto 60px; text-align: center; }
.dgov__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #D8EEF2;
  margin-bottom: 26px;
}
.dgov__hero-badge i { font-size: 12px; color: var(--dgov); }
.dgov__hero-title { font-family: var(--dgovdisplay); font-size: 46px; line-height: 1.18; font-weight: 700; letter-spacing: -.8px; color: #fff; margin: 0 0 22px; }
.dgov__hero-title em { font-style: normal; color: var(--dgov2); }
.dgov__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #C9D6E8; margin: 0 auto 34px; max-width: 680px; }
.dgov__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 0; }

/* Ownership flow: fragmented domain chips -> single governance
   gate card (stacked control badges) -> tidy governed-domain
   cards with steward badge + classification pill */
.dgov__flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: start; margin-bottom: 30px; }
.dgov__flow-stage-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dgovmuted); margin-bottom: 16px; text-align: center; }
.dgov__flow-arrow { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .25); font-size: 16px; padding-top: 40px; }

.dgov__flow-chips { display: grid; gap: 10px; }
.dgov__flow-chip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(232, 93, 138, .4);
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  font-weight: 500;
  color: #DCE6F0;
  opacity: .82;
}
.dgov__flow-chip em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; color: var(--dgov3); text-transform: uppercase; white-space: nowrap; }

.dgov__flow-gate {
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(23, 180, 203, .4);
  background: rgba(23, 180, 203, .07);
  height: 100%;
}
.dgov__flow-gate-badges { display: grid; gap: 10px; }
.dgov__flow-gate-badges span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--dgovdark2);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.dgov__flow-gate-badges i { color: var(--dgov); font-size: 12px; flex: none; }

.dgov__flow-domains { display: grid; gap: 10px; }
.dgov__flow-domain {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
}
.dgov__flow-domain-owner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dgov);
  color: #06222B;
  font-family: var(--dgovdisplay);
  font-size: 11.5px;
  font-weight: 700;
}
.dgov__flow-domain strong { display: block; font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.dgov__flow-pill { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.dgov__flow-pill--restricted { background: rgba(242, 179, 61, .18); color: var(--dgov2); }
.dgov__flow-pill--confidential { background: rgba(232, 93, 138, .18); color: var(--dgov3); }
.dgov__flow-pill--internal { background: rgba(23, 180, 203, .18); color: var(--dgov); }

.dgov__flow-consume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 30px;
  margin-bottom: 10px;
  border-top: 1px dashed rgba(255, 255, 255, .14);
}
.dgov__flow-consume-label { font-size: 12.5px; font-weight: 500; color: var(--dgovmuted); margin-right: 4px; }
.dgov__flow-consume-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  font-weight: 500;
  color: #DCE6F0;
}
.dgov__flow-consume-chip i { color: var(--dgov2); font-size: 11px; }

/* Trust-signal strip: closes the hero out edge to edge */
.dgov__signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dgov__signal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
}
.dgov__signal i { font-size: 15px; color: var(--dgov); }
.dgov__signal strong { display: block; font-family: var(--dgovdisplay); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.dgov__signal span { display: block; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--dgovmuted); }

/* ---------- 02. Positioning: full-width narrative statement ---------- */
.dgov__define { padding: 120px 0; background: #fff; }
.dgov__define-inner { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.dgov__define-no {
  font-family: var(--dgovdisplay);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--dgovb);
  text-decoration: line-through;
  text-decoration-color: var(--dgov3);
  text-decoration-thickness: 2px;
  margin: 0 0 14px;
}
.dgov__define-yes {
  font-family: var(--dgovdisplay);
  font-size: 32px;
  line-height: 1.38;
  font-weight: 700;
  color: var(--dgovh);
  margin: 0 auto 26px;
  max-width: 760px;
}
.dgov__define-yes em { font-style: normal; color: var(--dgov); }
.dgov__define-inner .dgov__text { max-width: 700px; margin-left: auto; margin-right: auto; }
.dgov__define-note {
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--dgovb);
  background: var(--dgovbg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--dgovt);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.dgov__define-note a { font-weight: 600; color: var(--dgov); }

.dgov__banner-media { position: relative; border-radius: 20px; overflow: hidden; max-width: 1040px; margin: 0 auto; }
.dgov__banner-media img { width: 100%; display: block; object-fit: cover; aspect-ratio: 21 / 8; }
.dgov__banner-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  background: var(--dgovbg);
  border: 1px solid var(--dgovb);
  border-top: none;
  border-radius: 0 0 20px 20px;
  margin-top: -6px;
  position: relative;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.dgov__banner-caption strong { font-family: var(--dgovdisplay); font-size: 14.5px; font-weight: 700; color: var(--dgovh); }
.dgov__banner-caption span { font-size: 13px; font-weight: 300; color: var(--dgovt); }

/* ---------- 03. Maturity: horizontal stepped scale ---------- */
.dgov__maturity { padding: 120px 0; background: var(--dgovbg); }
.dgov__maturity-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1100px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--dgovb); }
.dgov__maturity-step { position: relative; padding: 30px 26px; background: #fff; border-left: 1px solid var(--dgovb); }
.dgov__maturity-step:first-child { border-left: none; }
.dgov__maturity-step::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--dgovb); }
.dgov__maturity-step:nth-child(1)::before { background: var(--dgov3); }
.dgov__maturity-step:nth-child(2)::before { background: var(--dgov2); opacity: .8; }
.dgov__maturity-step:nth-child(3)::before { background: var(--dgov); opacity: .85; }
.dgov__maturity-step:nth-child(4)::before { background: var(--dgov); }
.dgov__maturity-num { display: block; font-family: var(--dgovdisplay); font-size: 13px; font-weight: 700; color: var(--dgovmuted); letter-spacing: 1px; margin-bottom: 10px; }
.dgov__maturity-step h3 { font-family: var(--dgovdisplay); font-size: 18px; font-weight: 700; color: var(--dgovh); margin: 0 0 10px; }
.dgov__maturity-step p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--dgovt); margin: 0; }
.dgov__maturity-note { display: flex; align-items: center; gap: 10px; justify-content: center; max-width: 700px; margin: 26px auto 0; font-size: 13.5px; font-weight: 300; color: var(--dgovt); text-align: center; }
.dgov__maturity-note i { color: var(--dgov); flex: none; }

/* ---------- 04. Ownership & stewardship: asymmetric copy + card stack ---------- */
.dgov__ownership { padding: 120px 0; background: #fff; }
.dgov__ownership-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: start; }
.dgov__ownership-figure { display: grid; gap: 14px; }
.dgov__ownership-figure-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--dgovmuted); margin-bottom: 4px; }
.dgov__owner-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--dgovb);
  background: var(--dgovbg);
}
.dgov__owner-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dgovdark);
  color: var(--dgov);
  font-family: var(--dgovdisplay);
  font-size: 13px;
  font-weight: 700;
}
.dgov__owner-body strong { display: block; font-family: var(--dgovdisplay); font-size: 15.5px; font-weight: 700; color: var(--dgovh); margin-bottom: 4px; }
.dgov__owner-role { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; color: var(--dgov); margin-bottom: 6px; }
.dgov__owner-desc { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dgovt); }

/* ---------- 05. Framework: four labelled capability groups ---------- */
.dgov__caps { padding: 120px 0; background: var(--dgovbg); }
.dgov__caps-groups { display: grid; gap: 46px; }
.dgov__caps-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.dgov__caps-group-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--dgovdark);
  color: var(--dgov);
  font-family: var(--dgovdisplay);
  font-size: 14px;
  font-weight: 700;
}
.dgov__caps-group-head h3 { font-family: var(--dgovdisplay); font-size: 18px; font-weight: 700; color: var(--dgovh); margin: 0; }
.dgov__caps-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dgov__caps-item { padding: 24px 24px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--dgovb); }
.dgov__caps-item .dgov__ico { width: 44px; height: 44px; font-size: 17px; margin-bottom: 14px; }
.dgov__caps-item h4 { font-family: var(--dgovdisplay); font-size: 15.5px; font-weight: 700; color: var(--dgovh); margin: 0 0 8px; }
.dgov__caps-item p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--dgovt); margin: 0; }

/* ---------- 06. Coverage: platforms band ---------- */
.dgov__coverage { padding: 120px 0; position: relative; overflow: hidden; }
.dgov__coverage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 8% -10%, rgba(23, 180, 203, .16), transparent 62%),
              radial-gradient(760px 440px at 96% 110%, rgba(242, 179, 61, .12), transparent 64%);
}
.dgov__coverage > .container { position: relative; z-index: 2; }
.dgov__coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.dgov__coverage-card { padding: 26px 26px 24px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.dgov__coverage-card .dgov__ico { background: rgba(23, 180, 203, .16); }
.dgov__coverage-card h3 { font-family: var(--dgovdisplay); font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.dgov__coverage-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--dgovmuted); margin: 0; }
.dgov__coverage-note { max-width: 800px; margin: 0 auto; text-align: center; font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dgovmuted); }
.dgov__coverage-note a { font-weight: 600; color: var(--dgov); }

/* ---------- 07. How we work: five-stage cycle that loops back ---------- */
.dgov__cycle { padding: 120px 0; background: #fff; }
.dgov__cycle-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 0 16px; align-items: stretch; }
.dgov__cycle-step { position: relative; padding: 30px 22px; border: 1px solid var(--dgovb); border-radius: 16px; background: var(--dgovbg); }
.dgov__cycle-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--dgovdark); color: var(--dgov); font-family: var(--dgovdisplay); font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.dgov__cycle-step h3 { font-family: var(--dgovdisplay); font-size: 16px; font-weight: 700; color: var(--dgovh); margin: 0 0 8px; }
.dgov__cycle-step p { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--dgovt); margin: 0; }
.dgov__cycle-row > .dgov__cycle-arrow { display: flex; align-items: center; justify-content: center; color: var(--dgovb); font-size: 16px; }
.dgov__cycle-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 620px;
  margin: 34px auto 0;
  padding: 14px 22px;
  border-radius: 30px;
  border: 1px dashed var(--dgov);
  background: rgba(23, 180, 203, .06);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dgovh);
  text-align: center;
}
.dgov__cycle-loop i { color: var(--dgov); animation: dgovKfSpinSlow 5s linear infinite; }

/* ---------- 08. Proof: stat list beside figure ---------- */
.dgov__proof { padding: 120px 0; background: var(--dgovbg); }
.dgov__proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.dgov__proof-stat-list { display: grid; gap: 20px; margin-top: 30px; }
.dgov__proof-stat { padding: 20px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--dgovb); }
.dgov__proof-stat strong { display: block; font-family: var(--dgovdisplay); font-size: 15.5px; font-weight: 700; color: var(--dgovh); margin-bottom: 6px; }
.dgov__proof-stat span { display: block; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--dgovt); }
.dgov__proof-figure { border-radius: 20px; overflow: hidden; }
.dgov__proof-figure img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; }

/* ---------- 09. Before / after comparison ---------- */
.dgov__compare { padding: 120px 0; background: #fff; }
.dgov__compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto; }
.dgov__compare-col { padding: 34px 34px 30px; border-radius: 18px; background: var(--dgovbg); border: 1px solid var(--dgovb); }
.dgov__compare-col--good { border-color: rgba(23, 180, 203, .35); box-shadow: 0 20px 44px rgba(23, 180, 203, .1); background: #fff; }
.dgov__compare-col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--dgovdisplay); font-size: 16.5px; font-weight: 700; color: var(--dgovh); margin: 0 0 20px; }
.dgov__compare-col h3 i { font-size: 13px; }
.dgov__compare-col--bad h3 i { color: var(--dgov3); }
.dgov__compare-col--good h3 i { color: var(--dgov); }
.dgov__compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.dgov__compare-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--dgovt); }
.dgov__compare-list li i { margin-top: 4px; font-size: 12px; flex: none; }
.dgov__compare-col--bad .dgov__compare-list li i { color: var(--dgov3); }
.dgov__compare-col--good .dgov__compare-list li i { color: var(--dgov); }

/* ---------- 10. Why 3Shadz: bento with classification-meter tile ---------- */
.dgov__value { padding: 120px 0; }
/* Six tiles, three per row, two full rows - every cell filled */
.dgov__value-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 22px; }
.dgov__value-tile {
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.dgov__value-tile--lead { display: flex; flex-direction: column; justify-content: space-between; }
.dgov__value-tile h3 { font-family: var(--dgovdisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.dgov__value-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dgovmuted); margin: 0; }
.dgov__value-tile .dgov__ico { background: rgba(23, 180, 203, .16); }
.dgov__value-meter { display: flex; gap: 4px; height: 10px; border-radius: 6px; overflow: hidden; margin-top: 20px; }
.dgov__value-meter-seg { flex: 1; opacity: .85; }
.dgov__value-meter-seg--public { background: var(--dgovmuted); }
.dgov__value-meter-seg--internal { background: var(--dgov); }
.dgov__value-meter-seg--restricted { background: var(--dgov2); }
.dgov__value-meter-seg--confidential { background: var(--dgov3); }

/* ---------- 11. Tool stack: four-column spec list ---------- */
.dgov__tech { padding: 120px 0; background: #fff; }
.dgov__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.dgov__tech-col { border-top: 3px solid var(--dgov); padding-top: 20px; }
.dgov__tech-col:nth-child(2) { border-top-color: var(--dgov2); }
.dgov__tech-col:nth-child(3) { border-top-color: var(--dgov3); }
.dgov__tech-col:nth-child(4) { border-top-color: var(--dgovh); }
.dgov__tech-col h3 { font-family: var(--dgovdisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--dgovh); margin: 0 0 16px; }
.dgov__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dgov__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--dgovt); padding-left: 16px; position: relative; }
.dgov__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--dgovb); }

/* ---------- 12. FAQ ---------- */
.dgov__faq { padding: 120px 0; background: var(--dgovbg); }
.dgov__faq-list { max-width: 880px; margin: 0 auto; }
.dgov__faq-item { border-bottom: 1px solid var(--dgovb); }
.dgov__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--dgovdisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--dgovh);
  cursor: pointer;
}
.dgov__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dgovb); color: var(--dgov); flex: none; transition: all .3s ease; }
.dgov__faq-item.is-open .dgov__faq-icon { background: var(--dgov); border-color: var(--dgov); color: #06222B; transform: rotate(45deg); }
.dgov__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.dgov__faq-item.is-open .dgov__faq-a { max-height: 300px; }
.dgov__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--dgovt); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes dgovKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 14px); }
}
@keyframes dgovKfSpinSlow {
  to { transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .dgov__flow { grid-template-columns: 1fr; gap: 30px; }
  .dgov__flow-arrow { transform: rotate(90deg); padding-top: 0; }
  .dgov__value-grid { grid-template-columns: repeat(2, 1fr); }
  .dgov__tech-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .dgov__ownership-grid { grid-template-columns: 1fr; gap: 50px; }
  .dgov__caps-group-grid { grid-template-columns: repeat(2, 1fr); }
  .dgov__coverage-grid { grid-template-columns: repeat(2, 1fr); }
  .dgov__cycle-row { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .dgov__cycle-row > .dgov__cycle-arrow { display: none; }
  .dgov__proof-grid { grid-template-columns: 1fr; gap: 40px; }
  .dgov__compare-grid { grid-template-columns: 1fr; }
  .dgov__maturity-scale { grid-template-columns: repeat(2, 1fr); }
  .dgov__maturity-step:nth-child(3) { border-left: none; }
}

@media (max-width: 991px) {
  .dgov__hero { padding: 160px 0 90px; }
  .dgov__hero-title { font-size: 38px; }
  .dgov__signals { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .dgov__define, .dgov__maturity, .dgov__ownership, .dgov__caps, .dgov__coverage, .dgov__cycle, .dgov__proof, .dgov__compare, .dgov__value, .dgov__tech, .dgov__faq { padding-top: 80px; padding-bottom: 80px; }
  .dgov__hero-title { font-size: 30px; }
  .dgov__hero-lead { font-size: 16.5px; }
  .dgov__define-yes { font-size: 24px; }
  .dgov__define-no { font-size: 22px; }
  .dgov__value-grid { grid-template-columns: 1fr; }
  .dgov__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .dgov__caps-group-grid { grid-template-columns: 1fr; }
  .dgov__coverage-grid { grid-template-columns: 1fr; }
  .dgov__cycle-row { grid-template-columns: 1fr; }
  .dgov__maturity-scale { grid-template-columns: 1fr; }
  .dgov__maturity-step { border-left: none !important; border-top: 1px solid var(--dgovb); }
  .dgov__maturity-step:first-child { border-top: none; }
  .dgov__flow-consume { flex-direction: column; align-items: flex-start; }
}

/* Users who ask for less motion get the page without the
   drifting hero glows or the loop-icon spin. */
@media (prefers-reduced-motion: reduce) {
  .dgov__page * { transition-duration: .01ms !important; }
  .dgov__hero-glow { animation: none; }
  .dgov__cycle-loop i { animation: none; }
}

/* ============================================================
   QUALITY ASSURANCE & SUPPORT PAGE (qas__*)
   Scoped entirely to .qas__page (added on <main> of
   quality-assurance-support.html). A parent Services domain page
   like .dax__page, .swe__page, .cdv__page, .dex__page and
   .aisol__page - but its own brand, not a shade of any of them.
   Brass/gold #B9863E (verification, confidence) + graphite slate
   #5C6470 (stability) + muted wine #8B4A52 (used sparingly, for
   defects/incidents only) on a warm near-black #17151A, with a
   warm paper background #F8F5EF - no cyan, teal-green, indigo,
   violet or orange-red anywhere, and no bright "pass" green: gold
   stands in for "healthy/verified" instead. Deliberately not
   cybersecurity-coded: no black-and-neon-green terminal, no
   padlocks, no giant shields.
   The hero is a vertical release-gate stack (five checkpoint
   plates - Change, Verify, Release Gate, Observe, Improve - on a
   rail with a travelling top-to-bottom pulse) with a dashed
   bracket looping from the last gate back to the first, reading
   "continuous verification loop" - distinct from dax's horizontal
   flow-track+radar, swe's blueprint+node-inspector, cdv's status
   page+deploy runway, dex's sticky-note pins and aisol's terminal
   console. The two child capabilities get a dedicated split
   section (light "before/during release" panel vs dark "after
   release" panel, joined by a loop chip) instead of being two
   generic cards - unique to this page, since dax/swe/cdv/dex/aisol
   don't have exactly two children to contrast. A grouped chip-tag
   section (not a checklist) covers the long capability list; "how
   we work" is a vertical alternating checkpoint ladder (every
   sibling's process rail is horizontal); a before/after operating-
   state comparison is unique to this page. "Why us" is a bento
   with a four-segment confidence-meter tile instead of any
   sibling's chart/EKG/pulse. Keyframes are prefixed qasKf* so
   nothing collides with any other page.
   ============================================================ */
.qas__page {
  --qas: #B9863E;
  --qas2: #5C6470;
  --qas3: #8B4A52;
  --qash: #211D1A;
  --qast: #6E675D;
  --qasb: #E3DDD1;
  --qasbg: #F8F5EF;
  --qasdark: #17151A;
  --qasdark2: #201C21;
  --qasmuted: #C7BEB2;
  --qasdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.qas__page .qas__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--qas);
  margin-bottom: 16px;
}
.qas__page .qas__title {
  font-family: var(--qasdisplay);
  font-size: 38px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--qash);
  margin: 0 0 20px;
}
.qas__page .qas__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--qash); margin: 0 0 18px; }
.qas__page .qas__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--qast); margin: 0 0 16px; }
.qas__page .qas__text:last-child { margin-bottom: 0; }
.qas__page .qas__head { max-width: 780px; }
.qas__page .qas__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.qas__page .qas__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--qasdark) 0%, var(--qasdark2) 100%); }
.qas__page .qas__dark > .container { position: relative; z-index: 2; }
.qas__page .qas__dark .qas__eyebrow { color: var(--qas); }
.qas__page .qas__dark .qas__title { color: #fff; }
.qas__page .qas__dark .qas__text { color: var(--qasmuted); }

.qas__page .qas__btn,
.qas__page .qas__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.qas__page .qas__btn { color: #211804; background: var(--qas); border: 2px solid var(--qas); }
.qas__page .qas__btn:hover { background: #D4A461; border-color: #D4A461; color: #211804; }
.qas__page .qas__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.qas__page .qas__btn-ghost:hover { background: #fff; color: var(--qasdark); border-color: #fff; }

.qas__page .qas__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--qas);
  transition: gap .3s ease, color .3s ease;
}
.qas__page .qas__link:hover { gap: 15px; color: #8E6428; }
.qas__page .qas__dark .qas__link { color: #D9B471; }
.qas__page .qas__dark .qas__link:hover { color: #fff; }

.qas__page .qas__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(185, 134, 62, .1);
  color: var(--qas);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: vertical release-gate stack with a feedback loop ---------- */
.qas__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--qasdark) 0%, var(--qasdark2) 100%);
  padding: 190px 0 110px;
}
.qas__hero-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(185, 134, 62, .22) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 520px at 50% 0%, #000, transparent 76%);
          mask-image: radial-gradient(760px 520px at 50% 0%, #000, transparent 76%);
}
.qas__hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .3; pointer-events: none; animation: qasKfDrift 14s ease-in-out infinite; }
.qas__hero-glow--1 { width: 360px; height: 360px; background: var(--qas); top: -100px; left: 8%; }
.qas__hero-glow--2 { width: 260px; height: 260px; background: var(--qas3); bottom: -70px; right: 10%; animation-delay: 3.4s; }
.qas__hero > .container { position: relative; z-index: 2; }

.qas__hero-top { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.qas__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #EFE7DA;
  margin-bottom: 26px;
}
.qas__hero-badge i { font-size: 12px; color: var(--qas); }
.qas__hero-title { font-family: var(--qasdisplay); font-size: 45px; line-height: 1.2; font-weight: 700; letter-spacing: -.7px; color: #fff; margin: 0 0 22px; }
.qas__hero-title em { font-style: normal; color: var(--qas); }
.qas__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #DCD4C6; margin: 0 auto 34px; max-width: 640px; }
.qas__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Release-gate stack: a vertical rail of five checkpoint plates
   with a travelling pulse, closed by a dashed bracket that loops
   from the last gate back to the first. */
.qas__lifecycle { position: relative; max-width: 660px; margin: 62px auto 0; padding-right: 60px; }
.qas__stack { position: relative; display: grid; gap: 12px; padding-left: 40px; }
.qas__stack-rail {
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(185, 134, 62, .4) 0 7px, transparent 7px 14px);
}
.qas__stack-pulse {
  position: absolute;
  left: 11px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--qas);
  box-shadow: 0 0 12px 3px rgba(185, 134, 62, .65);
  animation: qasKfPulseDown 5.5s ease-in-out infinite;
}
.qas__gate { position: relative; display: flex; align-items: center; }
.qas__gate-num {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--qasdark2);
  border: 2px solid var(--qas);
  font-family: var(--qasdisplay);
  font-size: 10px;
  font-weight: 700;
  color: var(--qas);
}
.qas__gate-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045);
}
.qas__gate--pivot .qas__gate-card { border-color: rgba(185, 134, 62, .55); background: rgba(185, 134, 62, .09); }
.qas__gate-main { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.qas__gate-tag { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--qas); }
.qas__gate-title { font-size: 14.5px; font-weight: 500; color: #EFE9DC; }
.qas__gate-signal {
  flex: none;
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px dashed rgba(255, 255, 255, .28);
  font-size: 11px;
  font-weight: 400;
  color: var(--qasmuted);
  white-space: nowrap;
}

.qas__loop { position: absolute; top: 4px; bottom: 4px; right: 0; width: 52px; pointer-events: none; }
.qas__loop-arc {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(185, 134, 62, .42);
  border-left: none;
  border-radius: 0 999px 999px 0;
}
.qas__loop-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--qasdisplay);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--qasmuted);
}
.qas__loop-arrow { position: absolute; right: 15px; color: var(--qas); font-size: 12px; }
.qas__loop-arrow--top { top: -9px; }
.qas__loop-arrow--bottom { bottom: -9px; transform: scaleY(-1); }

/* Hero pillar strip */
.qas__hero-pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 30px; margin: 54px auto 0; max-width: 780px; }
.qas__hero-pillar { display: flex; flex-direction: column; gap: 6px; text-align: left; max-width: 220px; }
.qas__hero-pillar strong { font-family: var(--qasdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.qas__hero-pillar span { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--qasmuted); }

/* ---------- 02. Introduction: editorial split ---------- */
.qas__intro { padding: 120px 0; background: #fff; }
.qas__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.qas__intro-note {
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--qasb);
  background: var(--qasbg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--qast);
}
.qas__intro-note a { font-weight: 600; color: var(--qas); }
.qas__intro-figure { position: relative; }
.qas__intro-figure img { width: 100%; border-radius: 20px 20px 0 0; display: block; object-fit: cover; aspect-ratio: 4 / 3.1; }
.qas__intro-badge {
  padding: 22px 26px;
  border-radius: 0 0 16px 16px;
  background: var(--qasbg);
  border: 1px solid var(--qasb);
  border-top: none;
  box-shadow: 0 18px 40px rgba(23, 21, 26, .08);
}
.qas__intro-badge strong { display: block; font-family: var(--qasdisplay); font-size: 16px; font-weight: 700; color: var(--qash); margin-bottom: 6px; }
.qas__intro-badge span { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--qast); }

/* ---------- 03. The two capabilities: light/dark split panels ---------- */
.qas__split { padding: 120px 0; background: var(--qasbg); }
.qas__split-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 44px;
  padding: 11px 22px;
  border-radius: 30px;
  border: 1px dashed var(--qas);
  background: rgba(185, 134, 62, .08);
  width: fit-content;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--qash);
}
.qas__split-loop i { color: var(--qas); }
.qas__split-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--qasb); box-shadow: 0 30px 70px rgba(33, 29, 26, .08); }
.qas__split-panel { padding: 50px 44px; }
.qas__split-panel--testing { background: #fff; }
.qas__split-panel--support { background: linear-gradient(175deg, var(--qasdark) 0%, var(--qasdark2) 100%); color: #fff; }
.qas__split-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--qas); margin-bottom: 16px; }
.qas__split-panel--support .qas__split-kicker { color: #D9B471; }
.qas__split-panel h3 { font-family: var(--qasdisplay); font-size: 25px; font-weight: 700; color: var(--qash); margin: 0 0 14px; }
.qas__split-panel--support h3 { color: #fff; }
.qas__split-panel > p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--qast); margin: 0 0 26px; }
.qas__split-panel--support > p { color: var(--qasmuted); }
.qas__split-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 13px; }
.qas__split-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; color: var(--qash); }
.qas__split-list li i { color: var(--qas); font-size: 11px; margin-top: 5px; flex: none; }
.qas__split-panel--support .qas__split-list li { color: #EFE9DC; }
.qas__split-panel--support .qas__split-list li i { color: #D9B471; }

/* ---------- 04. Disciplines: grouped chip clusters (not one checklist) ---------- */
.qas__disciplines { padding: 120px 0; background: #fff; }
.qas__disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; margin-top: 8px; }
.qas__disc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.qas__disc-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
.qas__disc-col--testing .qas__disc-mark { background: rgba(185, 134, 62, .12); color: var(--qas); }
.qas__disc-col--support .qas__disc-mark { background: rgba(92, 100, 112, .14); color: var(--qas2); }
.qas__disc-head h3 { font-family: var(--qasdisplay); font-size: 19px; font-weight: 700; color: var(--qash); margin: 0; }
.qas__disc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.qas__chip { display: inline-block; padding: 9px 16px; border-radius: 30px; font-size: 13px; font-weight: 500; line-height: 1.3; }
.qas__disc-col--testing .qas__chip { border: 1px solid rgba(185, 134, 62, .32); background: rgba(185, 134, 62, .06); color: var(--qash); }
.qas__disc-col--support .qas__chip { border: 1px solid rgba(92, 100, 112, .32); background: rgba(92, 100, 112, .07); color: var(--qash); }

/* ---------- 05. How we work: vertical alternating checkpoint ladder ---------- */
.qas__process { padding: 120px 0; background: var(--qasbg); }
.qas__ladder { position: relative; max-width: 920px; margin: 0 auto; }
.qas__ladder::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; background: var(--qasb); transform: translateX(-50%); }
.qas__step { position: relative; display: grid; grid-template-columns: 1fr 62px 1fr; align-items: center; margin-bottom: 40px; }
.qas__step:last-child { margin-bottom: 0; }
.qas__step-node {
  grid-column: 2;
  justify-self: center;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--qas);
  font-family: var(--qasdisplay);
  font-weight: 700;
  font-size: 15px;
  color: var(--qash);
}
.qas__step-card { grid-column: 1; padding: 24px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--qasb); text-align: right; }
.qas__step:nth-child(even) .qas__step-card { grid-column: 3; text-align: left; }
.qas__step-card h3 { font-family: var(--qasdisplay); font-size: 17.5px; font-weight: 700; color: var(--qash); margin: 0 0 8px; }
.qas__step-card p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--qast); margin: 0; }

/* ---------- 06. What changes: before/after operating-state comparison ---------- */
.qas__compare { padding: 120px 0; background: #fff; }
.qas__compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 8px; }
.qas__compare-col { padding: 42px 38px; border-radius: 20px; }
.qas__compare-col--before { background: var(--qasbg); border: 1px solid var(--qasb); }
.qas__compare-col--after { background: linear-gradient(175deg, var(--qasdark) 0%, var(--qasdark2) 100%); color: #fff; }
.qas__compare-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 14px; }
.qas__compare-col--before .qas__compare-label { color: var(--qas3); }
.qas__compare-col--after .qas__compare-label { color: #D9B471; }
.qas__compare-col h3 { font-family: var(--qasdisplay); font-size: 21px; font-weight: 700; color: var(--qash); margin: 0; }
.qas__compare-col--after h3 { color: #fff; }
.qas__compare-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 15px; }
.qas__compare-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--qash); }
.qas__compare-col--after .qas__compare-list li { color: #EFE9DC; }
.qas__compare-list li i { flex: none; margin-top: 4px; font-size: 12px; }
.qas__compare-col--before .qas__compare-list li i { color: var(--qas3); }
.qas__compare-col--after .qas__compare-list li i { color: var(--qas); }

/* ---------- 07. Why 3Shadz: bento with a confidence-meter tile ---------- */
.qas__value { padding: 120px 0; background: var(--qasdark); position: relative; overflow: hidden; }
.qas__value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 440px at 92% -10%, rgba(185, 134, 62, .16), transparent 62%),
              radial-gradient(820px 460px at 4% 110%, rgba(92, 100, 112, .22), transparent 64%);
}
.qas__value > .container { position: relative; z-index: 2; }
.qas__value-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 22px; }
.qas__value-tile { grid-column: span 1; padding: 30px 28px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.qas__value-tile--lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.qas__value-tile h3 { font-family: var(--qasdisplay); font-size: 17px; font-weight: 700; color: #fff; margin: 14px 0 10px; }
.qas__value-tile p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--qasmuted); margin: 0; }
.qas__value-tile .qas__ico { background: rgba(185, 134, 62, .16); }
.qas__value-meter { display: flex; align-items: center; gap: 6px; height: 14px; margin-top: 20px; }
.qas__value-meter span { flex: 1; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.qas__value-meter span.is-filled { background: linear-gradient(90deg, var(--qas), #D9B471); }

/* ---------- 08. Tools we work with: four-column spec list ---------- */
.qas__tech { padding: 120px 0; background: #fff; }
.qas__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.qas__tech-col { border-top: 3px solid var(--qas); padding-top: 20px; }
.qas__tech-col:nth-child(2) { border-top-color: var(--qas2); }
.qas__tech-col:nth-child(3) { border-top-color: var(--qas3); }
.qas__tech-col:nth-child(4) { border-top-color: var(--qash); }
.qas__tech-col h3 { font-family: var(--qasdisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--qash); margin: 0 0 16px; }
.qas__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.qas__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--qast); padding-left: 16px; position: relative; }
.qas__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--qasb); }

/* ---------- 09. FAQ ---------- */
.qas__faq { padding: 120px 0; background: var(--qasbg); }
.qas__faq-list { max-width: 880px; margin: 0 auto; }
.qas__faq-item { border-bottom: 1px solid var(--qasb); }
.qas__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--qasdisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--qash);
  cursor: pointer;
}
.qas__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--qasb); color: var(--qas); flex: none; transition: all .3s ease; }
.qas__faq-item.is-open .qas__faq-icon { background: var(--qas); border-color: var(--qas); color: #211804; transform: rotate(45deg); }
.qas__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.qas__faq-item.is-open .qas__faq-a { max-height: 260px; }
.qas__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--qast); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes qasKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, -14px); }
}
@keyframes qasKfPulseDown {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: calc(100% - 10px); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .qas__hero-title { font-size: 38px; }
  .qas__intro-grid { grid-template-columns: 1fr; }
  .qas__split-grid { grid-template-columns: 1fr; }
  .qas__disc-grid { grid-template-columns: 1fr; gap: 40px; }
  .qas__compare-grid { grid-template-columns: 1fr; }
  .qas__value-grid { grid-template-columns: repeat(2, 1fr); }
  .qas__value-tile--lead { grid-column: span 2; grid-row: span 1; }
  .qas__tech-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 991px) {
  .qas__hero { padding: 160px 0 90px; }
  .qas__hero-title { font-size: 34px; }
  .qas__lifecycle { padding-right: 0; }
  .qas__loop { display: none; }
  .qas__ladder::before { left: 24px; }
  .qas__step { grid-template-columns: 48px 1fr; }
  .qas__step-node { grid-column: 1; }
  .qas__step-card, .qas__step:nth-child(even) .qas__step-card { grid-column: 2; text-align: left; }
}

@media (max-width: 767px) {
  .qas__intro, .qas__split, .qas__disciplines, .qas__process, .qas__compare, .qas__value, .qas__tech, .qas__faq { padding-top: 80px; padding-bottom: 80px; }
  .qas__hero-title { font-size: 28px; }
  .qas__hero-lead { font-size: 16.5px; }
  .qas__gate-card { flex-wrap: wrap; }
  .qas__gate-signal { margin-left: 40px; }
  .qas__hero-pillars { gap: 26px; }
  .qas__intro-badge { padding: 18px 20px; }
  .qas__value-grid { grid-template-columns: 1fr; }
  .qas__value-tile--lead { grid-column: span 1; }
  .qas__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .qas__split-panel { padding: 38px 28px; }
}

/* Users who ask for less motion get the page without the
   drifting hero glows or the travelling gate-rail pulse. */
@media (prefers-reduced-motion: reduce) {
  .qas__page * { transition-duration: .01ms !important; }
  .qas__hero-glow { animation: none; }
  .qas__stack-pulse { animation: none; opacity: .9; }
}


/* ============================================================
   QA & SOFTWARE TESTING PAGE (qst__*)
   Scoped entirely to .qst__page (added on <main> of
   qa-software-testing.html). A child capability page under the
   Quality Assurance & Support pillar (quality-assurance-support.html,
   qas__*) - so it keeps that pillar's exact palette (brass/gold
   #B9863E for "verified/healthy", graphite slate #5C6470 for
   stability, muted wine #8B4A52 used sparingly for defects only,
   warm near-black #17151A, warm paper #F8F5EF, Plus Jakarta Sans
   display over Kanit body) to read as unmistakably part of the same
   family - the "keep the brand, change the composition" rule every
   child page under every pillar follows. The composition is
   entirely new: the hero is a validation lattice - a build chip
   flowing into a 3-track (Web / Mobile / API) by 4-layer coverage
   matrix of glowing checkpoint cells, narrowing through a converge
   taper into a single release-gate plate carrying qualitative
   signal chips, closed by a text loop back to the matrix - distinct
   from qas's vertical release-gate rail. "Not this / this instead"
   is a paired reframe ledger instead of a plain list; the long
   capability list is seven grouped directory cards instead of qas's
   two-column chip split; "beyond defect-finding" is a pair of
   propagation-distance tracks instead of a ladder; test coverage is
   stacked horizontal strata instead of a pyramid; automation pairs
   a criteria list with a blueprint spec panel; performance is a
   load-ramp staircase, not a gauge; continuous testing is a
   tapering, colour-fading chevron stepper; defect management is a
   zig-zag investigative trail; release readiness is a signal board
   of qualitative status chips (deliberately no fake aggregate
   score); "what good looks like" is a numbered outcome ledger; and
   how QA connects to the rest of delivery is a radial orbit diagram
   - none of which qas or any sibling under this pillar uses.
   Keyframes are prefixed qstKf* so nothing collides with the rest
   of the theme.
   ============================================================ */
.qst__page {
  --qst: #B9863E;
  --qst2: #5C6470;
  --qst3: #8B4A52;
  --qsth: #211D1A;
  --qstt: #6E675D;
  --qstb: #E3DDD1;
  --qstbg: #F8F5EF;
  --qstdark: #17151A;
  --qstdark2: #201C21;
  --qstmuted: #C7BEB2;
  --qstdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.qst__page .qst__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--qst); margin-bottom: 16px; }
.qst__page .qst__title { font-family: var(--qstdisplay); font-size: 38px; line-height: 1.24; font-weight: 700; letter-spacing: -.5px; color: var(--qsth); margin: 0 0 20px; }
.qst__page .qst__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--qsth); margin: 0 0 18px; }
.qst__page .qst__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--qstt); margin: 0 0 16px; }
.qst__page .qst__text:last-child { margin-bottom: 0; }
.qst__page .qst__head { max-width: 780px; }
.qst__page .qst__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.qst__page .qst__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--qstdark) 0%, var(--qstdark2) 100%); }
.qst__page .qst__dark > .container { position: relative; z-index: 2; }
.qst__page .qst__dark .qst__eyebrow { color: var(--qst); }
.qst__page .qst__dark .qst__title { color: #fff; }
.qst__page .qst__dark .qst__text { color: var(--qstmuted); }

.qst__page .qst__btn,
.qst__page .qst__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.qst__page .qst__btn { color: #211804; background: var(--qst); border: 2px solid var(--qst); }
.qst__page .qst__btn:hover { background: #D4A461; border-color: #D4A461; color: #211804; }
.qst__page .qst__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.qst__page .qst__btn-ghost:hover { background: #fff; color: var(--qstdark); border-color: #fff; }

.qst__page .qst__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--qst);
  transition: gap .3s ease, color .3s ease;
}
.qst__page .qst__link:hover { gap: 15px; color: #8E6428; }
.qst__page .qst__dark .qst__link { color: #D9B471; }
.qst__page .qst__dark .qst__link:hover { color: #fff; }

.qst__page .qst__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(185, 134, 62, .1);
  color: var(--qst);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: validation lattice with a converging release gate ---------- */
.qst__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--qstdark) 0%, var(--qstdark2) 100%);
  padding: 190px 0 110px;
}
.qst__hero-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(185, 134, 62, .22) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 520px at 50% 0%, #000, transparent 76%);
          mask-image: radial-gradient(760px 520px at 50% 0%, #000, transparent 76%);
}
.qst__hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .3; pointer-events: none; animation: qstKfDrift 14s ease-in-out infinite; }
.qst__hero-glow--1 { width: 360px; height: 360px; background: var(--qst); top: -100px; left: 8%; }
.qst__hero-glow--2 { width: 260px; height: 260px; background: var(--qst3); bottom: -70px; right: 10%; animation-delay: 3.4s; }
.qst__hero > .container { position: relative; z-index: 2; }

.qst__hero-top { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.qst__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #EFE7DA;
  margin-bottom: 26px;
}
.qst__hero-badge i { font-size: 12px; color: var(--qst); }
.qst__hero-title { font-family: var(--qstdisplay); font-size: 45px; line-height: 1.2; font-weight: 700; letter-spacing: -.7px; color: #fff; margin: 0 0 22px; }
.qst__hero-title em { font-style: normal; color: var(--qst); }
.qst__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #DCD4C6; margin: 0 auto 34px; max-width: 640px; }
.qst__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Validation lattice: build chip -> Web/Mobile/API x 4-layer coverage
   grid -> converge taper -> release-gate plate -> feedback loop */
.qst__matrix { position: relative; max-width: 720px; margin: 64px auto 0; }
.qst__matrix-build {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px dashed rgba(185, 134, 62, .5);
  background: rgba(185, 134, 62, .08);
  width: fit-content;
  font-family: var(--qstdisplay);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: #EFE7DA;
}
.qst__matrix-build i { font-size: 10px; color: var(--qst); }
.qst__matrix-build-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--qst); box-shadow: 0 0 8px 2px rgba(185, 134, 62, .7); animation: qstKfDotPulse 1.8s ease-in-out infinite; }

.qst__matrix-tracks {
  display: grid;
  grid-template-columns: 96px repeat(3, 1fr);
  gap: 7px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
}
.qst__track-head { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 6px; font-family: var(--qstdisplay); font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--qstmuted); }
.qst__track-head i { color: var(--qst); font-size: 12px; }
.qst__row-label { display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 500; color: var(--qstmuted); white-space: nowrap; }
.qst__cell { position: relative; height: 30px; border-radius: 8px; background: linear-gradient(135deg, rgba(185, 134, 62, .5), rgba(185, 134, 62, .24)); border: 1px solid rgba(185, 134, 62, .55); animation: qstKfCellGlow 4.5s ease-in-out infinite; }
.qst__cell--flag { background: linear-gradient(135deg, rgba(139, 74, 82, .65), rgba(139, 74, 82, .32)); border-color: rgba(139, 74, 82, .85); animation: qstKfFlagPulse 2.2s ease-in-out infinite; }
.qst__cell--pending { background: transparent; border: 1px dashed rgba(255, 255, 255, .28); animation: none; }

.qst__matrix-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 18px 0 0; font-size: 11.5px; font-weight: 400; color: var(--qstmuted); }
.qst__legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.qst__legend-dot--pass { background: var(--qst); }
.qst__legend-dot--flag { background: var(--qst3); }
.qst__legend-dot--pending { background: transparent; border: 1px dashed rgba(255, 255, 255, .5); }

.qst__matrix-converge {
  position: relative;
  overflow: hidden;
  width: 70%;
  height: 34px;
  margin: 8px auto 0;
  clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%);
  background: linear-gradient(180deg, rgba(185, 134, 62, .28), rgba(185, 134, 62, .06));
}
.qst__matrix-converge::before {
  content: "";
  position: absolute;
  inset: -30px -50%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 9px, rgba(217, 180, 113, .4) 9px, rgba(217, 180, 113, .4) 13px);
  animation: qstKfFlow 1.6s linear infinite;
}

.qst__gate2 { position: relative; max-width: 340px; margin: 0 auto; padding: 16px 26px; border-radius: 14px; border: 1px solid rgba(185, 134, 62, .55); background: rgba(185, 134, 62, .1); text-align: center; animation: qstKfGateBreathe 3.2s ease-in-out infinite; }
.qst__gate2-tag { display: block; font-family: var(--qstdisplay); font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--qst); margin-bottom: 10px; }
.qst__gate2-signals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.qst__gate2-signals span { padding: 5px 12px; border-radius: 20px; border: 1px dashed rgba(255, 255, 255, .3); font-size: 11px; color: var(--qstmuted); }

.qst__matrix-loop { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 20px auto 0; font-size: 12px; font-weight: 500; color: var(--qstmuted); }
.qst__matrix-loop i { color: var(--qst); font-size: 11px; animation: qstKfSpin 3.4s linear infinite; }

.qst__hero-pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 30px; margin: 54px auto 0; max-width: 780px; }
.qst__hero-pillar { display: flex; flex-direction: column; gap: 6px; text-align: left; max-width: 220px; }
.qst__hero-pillar strong { font-family: var(--qstdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.qst__hero-pillar span { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--qstmuted); }

/* ---------- 02. Intro: editorial split with a signal rail ---------- */
.qst__intro { padding: 120px 0; background: #fff; }
.qst__intro-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.qst__intro-figure { position: relative; }
.qst__intro-figure img { width: 100%; border-radius: 20px; display: block; object-fit: cover; aspect-ratio: 4 / 3.1; }
.qst__intro-ribbon { position: absolute; top: 20px; left: 20px; right: 20px; padding: 14px 18px; border-radius: 12px; background: rgba(23, 21, 26, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qst__intro-ribbon span { font-size: 12.5px; font-weight: 500; color: #EFE7DA; }
.qst__intro-note { margin-top: 20px; padding: 18px 22px; border-radius: 14px; border: 1px solid var(--qstb); background: var(--qstbg); font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--qstt); }
.qst__intro-note a { font-weight: 600; color: var(--qst); }
.qst__intro-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 70px; padding-top: 44px; border-top: 1px solid var(--qstb); }
.qst__intro-rail-item { padding-left: 20px; border-left: 2px solid var(--qst); }
.qst__intro-rail-item strong { display: block; font-family: var(--qstdisplay); font-size: 15px; font-weight: 700; color: var(--qsth); margin-bottom: 6px; }
.qst__intro-rail-item span { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--qstt); }

/* ---------- 03. Reframe: paired ledger rows ---------- */
.qst__reframe { padding: 120px 0; background: var(--qstbg); }
.qst__reframe-head-row { display: grid; grid-template-columns: 1fr 40px 1fr; max-width: 960px; margin: 0 auto 6px; }
.qst__reframe-head-row span { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.qst__reframe-head-row span:first-child { color: var(--qst3); }
.qst__reframe-head-row span:last-child { color: var(--qst); text-align: right; }
.qst__reframe-list { max-width: 960px; margin: 0 auto; border-top: 1px solid var(--qstb); }
.qst__reframe-row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--qstb); }
.qst__reframe-not { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--qstt); padding-right: 24px; }
.qst__reframe-arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; background: #fff; border: 1px solid var(--qstb); color: var(--qst); font-size: 12px; }
.qst__reframe-this { font-size: 14.5px; font-weight: 500; line-height: 1.6; color: var(--qsth); padding-left: 24px; }

/* ---------- 04. Capability directory: grouped category cards ---------- */
.qst__directory { padding: 120px 0; background: #fff; }
.qst__dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.qst__dir-card { padding: 28px 26px; border-radius: 16px; border: 1px solid var(--qstb); background: var(--qstbg); }
.qst__dir-card--wide { grid-column: span 3; }
.qst__dir-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qst__dir-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(185, 134, 62, .12); color: var(--qst); font-size: 15px; }
.qst__dir-head h3 { font-family: var(--qstdisplay); font-size: 16.5px; font-weight: 700; color: var(--qsth); margin: 0; }
.qst__dir-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--qstt); margin: 0 0 16px; }
.qst__dir-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qst__chip { display: inline-block; padding: 8px 14px; border-radius: 30px; font-size: 12.5px; font-weight: 500; line-height: 1.3; border: 1px solid rgba(185, 134, 62, .32); background: #fff; color: var(--qsth); }

/* ---------- 05. Beyond defect-finding: propagation-distance tracks ---------- */
.qst__distance { padding: 120px 0; background: var(--qstbg); }
.qst__distance-axis { position: relative; max-width: 920px; margin: 0 auto 30px; display: grid; grid-template-columns: repeat(7, 1fr); }
.qst__distance-axis span { font-size: 11px; font-weight: 500; text-align: center; color: var(--qstt); padding-bottom: 14px; position: relative; }
.qst__distance-axis span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--qstb); transform: translateX(-50%); }
.qst__distance-tracks { max-width: 920px; margin: 0 auto; display: grid; gap: 24px; }
.qst__distance-track { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px; }
.qst__distance-label { text-align: right; }
.qst__distance-label strong { display: block; font-family: var(--qstdisplay); font-size: 14px; font-weight: 700; color: var(--qsth); }
.qst__distance-label span { font-size: 12px; color: var(--qstt); }
.qst__distance-bar-wrap { position: relative; height: 14px; border-radius: 8px; background: #fff; border: 1px solid var(--qstb); }
.qst__distance-bar { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 8px; background: linear-gradient(90deg, var(--qst), #D9B471); }
.qst__distance-track--late .qst__distance-bar { background: linear-gradient(90deg, var(--qst3), #B96B76); }
.qst__distance-marker { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--qsth); transform: translate(-50%, -50%); }
.qst__distance-note { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--qstt); }

/* ---------- 06. Validation strata: layered coverage bands ---------- */
.qst__strata { padding: 120px 0; background: #fff; }
.qst__strata-list { position: relative; max-width: 880px; margin: 0 auto; padding-left: 34px; }
.qst__strata-list::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--qstb); }
.qst__stratum { position: relative; display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: center; padding: 20px 24px; margin-bottom: 14px; border-radius: 14px; background: var(--qstbg); border: 1px solid var(--qstb); }
.qst__stratum:last-child { margin-bottom: 0; }
.qst__stratum::before { content: ""; position: absolute; left: -29px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--qst); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--qst); transform: translateY(-50%); }
.qst__stratum-head { display: flex; align-items: center; gap: 10px; }
.qst__stratum-head i { color: var(--qst); font-size: 16px; }
.qst__stratum-head h3 { font-family: var(--qstdisplay); font-size: 15.5px; font-weight: 700; color: var(--qsth); margin: 0; }
.qst__stratum p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--qstt); margin: 0; }

/* ---------- 07. Test automation: criteria list + blueprint spec panel ---------- */
.qst__auto { padding: 120px 0; background: var(--qstbg); }
.qst__auto-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.qst__auto-subhead { font-family: var(--qstdisplay); font-size: 16px; font-weight: 700; color: var(--qsth); margin: 0 0 18px; }
.qst__auto-criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.qst__auto-criteria li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--qstb); font-size: 14px; font-weight: 400; color: var(--qsth); line-height: 1.6; }
.qst__auto-criteria li i { color: var(--qst); font-size: 13px; margin-top: 4px; flex: none; }
.qst__blueprint { position: relative; padding: 34px 26px 26px; border: 1px dashed rgba(185, 134, 62, .5); border-radius: 4px; background: #fff; }
.qst__blueprint::before, .qst__blueprint::after { content: ""; position: absolute; width: 14px; height: 14px; }
.qst__blueprint::before { top: -1px; left: -1px; border-top: 2px solid var(--qst); border-left: 2px solid var(--qst); }
.qst__blueprint::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--qst); border-right: 2px solid var(--qst); }
.qst__blueprint-label { position: absolute; top: -11px; left: 20px; padding: 0 10px; background: var(--qstbg); font-family: var(--qstdisplay); font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--qst); }
.qst__blueprint-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qst__blueprint-item { display: flex; flex-direction: column; gap: 6px; }
.qst__blueprint-item i { color: var(--qst2); font-size: 15px; }
.qst__blueprint-item strong { font-size: 12.5px; font-weight: 600; color: var(--qsth); }
.qst__auto-note { margin-top: 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--qstt); }

/* ---------- 08. Performance & reliability: load-ramp staircase ---------- */
.qst__perf { padding: 120px 0; background: #fff; }
.qst__perf-chart { display: flex; align-items: flex-end; justify-content: center; gap: 26px; max-width: 820px; margin: 0 auto 34px; height: 220px; padding: 0 10px; }
.qst__perf-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; height: 100%; justify-content: flex-end; }
.qst__perf-bar { width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #D9B471, var(--qst)); }
.qst__perf-bar--endurance { background: repeating-linear-gradient(135deg, var(--qst2), var(--qst2) 6px, #7A828D 6px, #7A828D 12px); }
.qst__perf-bar-wrap strong { font-family: var(--qstdisplay); font-size: 12.5px; font-weight: 700; color: var(--qsth); text-align: center; }
.qst__perf-bar-wrap span { font-size: 11px; font-weight: 300; color: var(--qstt); text-align: center; line-height: 1.4; }
.qst__perf-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin: 0 auto; }
.qst__perf-tags span { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--qstb); background: var(--qstbg); font-size: 12.5px; color: var(--qstt); }

/* ---------- 09. Continuous testing & CI/CD: tapering, colour-fading stepper ---------- */
.qst__cicd { padding: 120px 0; background: var(--qstdark); position: relative; overflow: hidden; }
.qst__cicd::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 440px at 92% -10%, rgba(185, 134, 62, .16), transparent 62%), radial-gradient(820px 460px at 4% 110%, rgba(92, 100, 112, .22), transparent 64%); }
.qst__cicd > .container { position: relative; z-index: 2; }
.qst__cicd-row { display: flex; max-width: 1080px; margin: 0 auto; }
.qst__cicd-stage { position: relative; padding: 26px 22px 22px 34px; margin-right: -16px; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%); }
.qst__cicd-stage:first-child { clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); padding-left: 22px; }
.qst__cicd-stage:last-child { margin-right: 0; }
.qst__cicd-stage:nth-child(1) { background: rgba(185, 134, 62, .24); }
.qst__cicd-stage:nth-child(2) { background: rgba(185, 134, 62, .17); }
.qst__cicd-stage:nth-child(3) { background: rgba(185, 134, 62, .1); }
.qst__cicd-stage:nth-child(4) { background: rgba(92, 100, 112, .16); }
.qst__cicd-stage:nth-child(5) { background: rgba(92, 100, 112, .22); }
.qst__cicd-stage:nth-child(6) { background: rgba(92, 100, 112, .28); }
.qst__cicd-num { display: block; font-family: var(--qstdisplay); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--qstmuted); margin-bottom: 8px; }
.qst__cicd-stage h3 { font-family: var(--qstdisplay); font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.qst__cicd-stage p { font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--qstmuted); margin: 0 0 10px; }
.qst__cicd-time { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--qst); border: 1px dashed rgba(185, 134, 62, .5); border-radius: 20px; padding: 3px 10px; }
.qst__cicd-note { max-width: 760px; margin: 44px auto 0; text-align: center; }

/* ---------- 10. Defect management & root-cause: zig-zag investigative trail ---------- */
.qst__defect { padding: 120px 0; background: #fff; }
.qst__trail { position: relative; max-width: 1040px; margin: 64px auto 0; display: flex; justify-content: space-between; gap: 14px; }
.qst__trail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dotted var(--qstb); transform: translateY(-50%); z-index: 0; }
.qst__trail-node { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 190px; }
.qst__trail-node--up { transform: translateY(-26px); }
.qst__trail-node--down { transform: translateY(26px); }
.qst__trail-dot { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--qst); color: var(--qst); font-size: 16px; flex: none; }
.qst__trail-node h3 { font-family: var(--qstdisplay); font-size: 13.5px; font-weight: 700; color: var(--qsth); margin: 0; }
.qst__trail-node p { font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--qstt); margin: 0; }

/* ---------- 11. Release readiness: qualitative signal board ---------- */
.qst__ready { padding: 120px 0; background: var(--qstbg); }
.qst__signal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: 0 auto 34px; }
.qst__signal-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 12px; background: #fff; border-left: 4px solid var(--qst); border-top: 1px solid var(--qstb); border-right: 1px solid var(--qstb); border-bottom: 1px solid var(--qstb); }
.qst__signal-card--neutral { border-left-color: var(--qst2); }
.qst__signal-card--watch { border-left-color: var(--qst3); }
.qst__signal-card strong { font-size: 13.5px; font-weight: 600; color: var(--qsth); }
.qst__signal-status { flex: none; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; background: var(--qstbg); color: var(--qstt); white-space: nowrap; }
.qst__ready-callout { max-width: 760px; margin: 0 auto; text-align: center; padding: 26px 30px; border-radius: 16px; background: #fff; border: 1px solid var(--qstb); }
.qst__ready-callout p { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.75; color: var(--qsth); }

/* ---------- 12. What good looks like: numbered outcome ledger ---------- */
.qst__outcomes { padding: 120px 0; background: #fff; }
.qst__outcome-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--qstb); }
.qst__outcome-row { display: grid; grid-template-columns: 70px 1fr; gap: 26px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--qstb); }
.qst__outcome-num { font-family: var(--qstdisplay); font-size: 30px; font-weight: 700; color: var(--qstb); line-height: 1; }
.qst__outcome-row h3 { font-family: var(--qstdisplay); font-size: 19px; font-weight: 700; color: var(--qsth); margin: 0 0 8px; }
.qst__outcome-row p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--qstt); margin: 0; }

/* ---------- 13. Connected practice: radial orbit diagram ---------- */
.qst__orbit-section { position: relative; overflow: hidden; }
.qst__orbit-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 440px at 8% -10%, rgba(185, 134, 62, .14), transparent 62%), radial-gradient(820px 460px at 96% 110%, rgba(92, 100, 112, .2), transparent 64%); }
.qst__orbit-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.qst__orbit { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 520px; margin: 0 auto; }
.qst__orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qst__orbit-line { stroke: rgba(185, 134, 62, .4); stroke-width: 1.5; stroke-dasharray: 4 5; }
.qst__orbit-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; background: rgba(185, 134, 62, .14); border: 2px solid var(--qst); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px; }
.qst__orbit-center i { color: var(--qst); font-size: 20px; }
.qst__orbit-center span { font-family: var(--qstdisplay); font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.qst__orbit-node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 30px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); white-space: nowrap; }
.qst__orbit-node i { color: var(--qstmuted); font-size: 12px; }
.qst__orbit-node span { font-size: 11.5px; font-weight: 500; color: #EFE7DA; }

/* ---------- 14. Tools we work with: four-column spec list ---------- */
.qst__tech { padding: 120px 0; background: #fff; }
.qst__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.qst__tech-col { border-top: 3px solid var(--qst); padding-top: 20px; }
.qst__tech-col:nth-child(2) { border-top-color: var(--qst2); }
.qst__tech-col:nth-child(3) { border-top-color: var(--qst3); }
.qst__tech-col:nth-child(4) { border-top-color: var(--qsth); }
.qst__tech-col h3 { font-family: var(--qstdisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--qsth); margin: 0 0 16px; }
.qst__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.qst__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--qstt); padding-left: 16px; position: relative; }
.qst__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--qstb); }

/* ---------- 15. FAQ ---------- */
.qst__faq { padding: 120px 0; background: var(--qstbg); }
.qst__faq-list { max-width: 880px; margin: 0 auto; }
.qst__faq-item { border-bottom: 1px solid var(--qstb); }
.qst__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--qstdisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--qsth);
  cursor: pointer;
}
.qst__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--qstb); color: var(--qst); flex: none; transition: all .3s ease; }
.qst__faq-item.is-open .qst__faq-icon { background: var(--qst); border-color: var(--qst); color: #211804; transform: rotate(45deg); }
.qst__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.qst__faq-item.is-open .qst__faq-a { max-height: 260px; }
.qst__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--qstt); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes qstKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, -14px); }
}
@keyframes qstKfCellGlow {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); box-shadow: 0 0 14px 1px rgba(185, 134, 62, .35); }
}
@keyframes qstKfFlagPulse {
  0%, 100% { opacity: .8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); box-shadow: 0 0 14px 2px rgba(139, 74, 82, .5); }
}
@keyframes qstKfDotPulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(185, 134, 62, .7); transform: scale(1); }
  50% { box-shadow: 0 0 14px 5px rgba(185, 134, 62, .95); transform: scale(1.2); }
}
@keyframes qstKfFlow {
  from { transform: translateY(-13px); }
  to { transform: translateY(13px); }
}
@keyframes qstKfGateBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 134, 62, 0); border-color: rgba(185, 134, 62, .55); }
  50% { box-shadow: 0 0 26px 3px rgba(185, 134, 62, .22); border-color: rgba(185, 134, 62, .9); }
}
@keyframes qstKfSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .qst__hero-title { font-size: 38px; }
  .qst__intro-grid { grid-template-columns: 1fr; }
  .qst__auto-grid { grid-template-columns: 1fr; }
  .qst__dir-grid { grid-template-columns: repeat(2, 1fr); }
  .qst__dir-card--wide { grid-column: span 2; }
  .qst__orbit-wrap { grid-template-columns: 1fr; }
  .qst__cicd-stage { flex: 1 1 45% !important; margin: 6px !important; clip-path: none !important; border-radius: 10px; }
  .qst__trail { flex-wrap: wrap; row-gap: 30px; }
  .qst__trail::before { display: none; }
  .qst__trail-node, .qst__trail-node--up, .qst__trail-node--down { transform: none; max-width: 150px; }
  .qst__signal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .qst__hero { padding: 160px 0 90px; }
  .qst__hero-title { font-size: 34px; }
  .qst__matrix-tracks { grid-template-columns: 70px repeat(3, 1fr); }
  .qst__stratum { grid-template-columns: 1fr; gap: 10px; }
  .qst__stratum::before { display: none; }
  .qst__strata-list { padding-left: 0; }
  .qst__strata-list::before { display: none; }
  .qst__outcome-row { grid-template-columns: 50px 1fr; }
}

@media (max-width: 767px) {
  .qst__intro, .qst__reframe, .qst__directory, .qst__distance, .qst__strata, .qst__auto, .qst__perf, .qst__cicd, .qst__defect, .qst__ready, .qst__outcomes, .qst__orbit-section, .qst__tech, .qst__faq { padding-top: 80px; padding-bottom: 80px; }
  .qst__hero-title { font-size: 28px; }
  .qst__hero-lead { font-size: 16.5px; }
  .qst__matrix-tracks { grid-template-columns: 50px repeat(3, 1fr); gap: 5px; padding: 12px; }
  .qst__track-label { display: none; }
  .qst__row-label { font-size: 8.5px; }
  .qst__cell { height: 22px; }
  .qst__dir-grid { grid-template-columns: 1fr; }
  .qst__dir-card--wide { grid-column: span 1; }
  .qst__reframe-row, .qst__reframe-head-row { grid-template-columns: 1fr; text-align: left; gap: 8px; }
  .qst__reframe-arrow { display: none; }
  .qst__reframe-not, .qst__reframe-this { padding: 0; }
  .qst__reframe-head-row span:last-child { text-align: left; }
  .qst__distance-axis { display: none; }
  .qst__distance-track { grid-template-columns: 1fr; text-align: left; gap: 8px; }
  .qst__distance-label { text-align: left; }
  .qst__perf-chart { height: 160px; gap: 12px; }
  .qst__perf-bar-wrap strong { font-size: 10.5px; }
  .qst__blueprint-grid { grid-template-columns: repeat(2, 1fr); }
  .qst__signal-card { flex-wrap: wrap; }
  .qst__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .qst__hero-pillars { gap: 26px; }
  .qst__orbit-node { padding: 6px 8px; gap: 5px; white-space: normal; max-width: 92px; text-align: center; }
  .qst__orbit-node span { font-size: 10px; line-height: 1.2; }
  .qst__orbit-node i { font-size: 11px; }
  .qst__orbit-center { width: 110px; height: 110px; padding: 6px; }
  .qst__orbit-center span { font-size: 11px; }
}

/* Users who ask for less motion get the page without the drifting
   hero glows, the pulsing coverage cells, or the spinning loop icon. */
@media (prefers-reduced-motion: reduce) {
  .qst__page * { transition-duration: .01ms !important; }
  .qst__hero-glow { animation: none; }
  .qst__cell, .qst__cell--flag { animation: none; }
  .qst__matrix-loop i { animation: none; }
  .qst__matrix-build-dot, .qst__matrix-converge::before, .qst__gate2 { animation: none; }
}


/* ============================================================
   APPLICATION SUPPORT & MAINTENANCE PAGE (asm__*)
   Scoped entirely to .asm__page (added on <main> of
   application-support-maintenance.html). The second child capability
   page under the Quality Assurance & Support pillar (sibling to
   qst__* / qa-software-testing.html) - so it keeps that pillar's
   exact palette (brass/gold #B9863E for "healthy/verified", graphite
   slate #5C6470 for stability, muted wine #8B4A52 used sparingly for
   incidents/defects only, warm near-black #17151A, warm paper
   #F8F5EF, Plus Jakarta Sans display over Kanit body) to read as
   unmistakably part of the same family - "keep the brand, change the
   composition." The hero is a live-application topology: a pulsing
   core node radiating to six dependency/signal nodes over SVG lines,
   one line flagged as an active incident with a pinging badge,
   paired with a compact "live diagnosis trail" mini-panel (signal ->
   traced -> root cause) and, beneath both, a 28-point health-over-
   time sparkline rail carrying an incident dip and a preventive-
   maintenance marker - distinct from qas's vertical release-gate
   rail and qst's Web/Mobile/API coverage matrix. "Beyond the ticket
   queue" is a wrapping signal-chain of pill nodes plus a mature-
   support question grid, not a paired reframe ledger. Application
   health is a dark "business impact" hub statement over a six-tile
   signal grid, not a confidence-meter bento. Incident management is
   a two-column split - an eight-stage bracketed path (Restore
   Service / Improve the System) beside an investigation-inputs chip
   panel - instead of a zig-zag trail. Maintenance types are a four-
   quadrant grid, not grouped chip columns. Observability is a two-
   zone sources-converge-into-a-picture layout with noise/actionable
   examples, not a coverage matrix. Technical debt is a horizontal
   risk-ledger of segmented meters, not a load-ramp staircase.
   Release support is three linked panels with a rollback branch
   node, not a tapering CI/CD stepper. Outcomes are an asymmetric
   bento with two wide bookend tiles, not a numbered ledger. The
   connected-practice section is a horizontal loop belt tracing the
   specific escaped-defect -> regression-coverage feedback loop back
   into QA & Software Testing, not a radial orbit diagram. Keyframes
   are prefixed asmKf* so nothing collides with the rest of the
   theme.
   ============================================================ */
.asm__page {
  --asm: #B9863E;
  --asm2: #5C6470;
  --asm3: #8B4A52;
  --asmh: #211D1A;
  --asmt: #6E675D;
  --asmb: #E3DDD1;
  --asmbg: #F8F5EF;
  --asmdark: #17151A;
  --asmdark2: #201C21;
  --asmmuted: #C7BEB2;
  --asmdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.asm__page .asm__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--asm); margin-bottom: 16px; }
.asm__page .asm__title { font-family: var(--asmdisplay); font-size: 38px; line-height: 1.24; font-weight: 700; letter-spacing: -.5px; color: var(--asmh); margin: 0 0 20px; }
.asm__page .asm__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--asmh); margin: 0 0 18px; }
.asm__page .asm__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--asmt); margin: 0 0 16px; }
.asm__page .asm__text:last-child { margin-bottom: 0; }
.asm__page .asm__head { max-width: 780px; }
.asm__page .asm__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.asm__page .asm__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--asmdark) 0%, var(--asmdark2) 100%); }
.asm__page .asm__dark > .container { position: relative; z-index: 2; }
.asm__page .asm__dark .asm__eyebrow { color: var(--asm); }
.asm__page .asm__dark .asm__title { color: #fff; }
.asm__page .asm__dark .asm__text { color: var(--asmmuted); }

.asm__page .asm__btn,
.asm__page .asm__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.asm__page .asm__btn { color: #211804; background: var(--asm); border: 2px solid var(--asm); }
.asm__page .asm__btn:hover { background: #D4A461; border-color: #D4A461; color: #211804; }
.asm__page .asm__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .32); background: transparent; }
.asm__page .asm__btn-ghost:hover { background: #fff; color: var(--asmdark); border-color: #fff; }

.asm__page .asm__link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--asm); transition: gap .3s ease, color .3s ease; }
.asm__page .asm__link:hover { gap: 15px; color: #8E6428; }
.asm__page .asm__dark .asm__link { color: #D9B471; }
.asm__page .asm__dark .asm__link:hover { color: #fff; }

.asm__page .asm__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(185, 134, 62, .1);
  color: var(--asm);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero: live-application topology + diagnosis trail + health rail ---------- */
.asm__hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--asmdark) 0%, var(--asmdark2) 100%);
  padding: 190px 0 110px;
}
.asm__hero-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(185, 134, 62, .22) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 520px at 50% 0%, #000, transparent 76%);
          mask-image: radial-gradient(760px 520px at 50% 0%, #000, transparent 76%);
}
.asm__hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .3; pointer-events: none; animation: asmKfDrift 14s ease-in-out infinite; }
.asm__hero-glow--1 { width: 360px; height: 360px; background: var(--asm); top: -100px; left: 8%; }
.asm__hero-glow--2 { width: 260px; height: 260px; background: var(--asm3); bottom: -70px; right: 10%; animation-delay: 3.4s; }
.asm__hero > .container { position: relative; z-index: 2; }

.asm__hero-top { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.asm__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  color: #EFE7DA;
  margin-bottom: 26px;
}
.asm__hero-badge i { font-size: 12px; color: var(--asm); }
.asm__hero-title { font-family: var(--asmdisplay); font-size: 45px; line-height: 1.2; font-weight: 700; letter-spacing: -.7px; color: #fff; margin: 0 0 22px; }
.asm__hero-title em { font-style: normal; color: var(--asm); }
.asm__hero-lead { font-size: 18px; font-weight: 300; line-height: 1.75; color: #DCD4C6; margin: 0 auto 34px; max-width: 640px; }
.asm__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Live application topology: pulsing core, six signal nodes over SVG
   lines, one flagged incident line, plus a compact diagnosis trail */
.asm__map { display: grid; grid-template-columns: 1.3fr .95fr; gap: 26px; max-width: 920px; margin: 60px auto 0; align-items: center; }
.asm__map-radar { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .14); background: radial-gradient(circle at 50% 50%, rgba(185, 134, 62, .1), transparent 72%); }
.asm__map-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(185, 134, 62, .28); opacity: 0; animation: asmKfRing 4.5s ease-out infinite; }
.asm__map-ring--2 { animation-delay: 2.2s; }
.asm__map-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(185, 134, 62, .14);
  border: 1px solid rgba(185, 134, 62, .55);
  text-align: center;
}
.asm__map-core i { font-size: 19px; color: var(--asm); animation: asmKfCoreGlow 2.6s ease-in-out infinite; }
.asm__map-core span { font-size: 10px; font-weight: 600; letter-spacing: .3px; color: var(--asmmuted); line-height: 1.2; }
.asm__map-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.asm__map-line { stroke: rgba(255, 255, 255, .16); stroke-width: .6; }
.asm__map-line--alert { stroke: rgba(139, 74, 82, .8); stroke-width: .9; }
.asm__map-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 38px; }
.asm__map-node i { position: relative; display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); color: var(--asmmuted); font-size: 12px; }
.asm__map-node span { font-size: 9.5px; font-weight: 500; color: var(--asmmuted); text-align: center; line-height: 1.2; }
.asm__map-node--alert i { background: rgba(139, 74, 82, .22); border-color: rgba(139, 74, 82, .8); color: #E7C3C8; }
.asm__map-node--alert span { color: #E7C3C8; }
.asm__map-node-ping { position: absolute; top: -3px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--asm3); animation: asmKfPing 1.8s ease-out infinite; }

.asm__map-signal { display: flex; flex-direction: column; gap: 15px; padding: 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .035); }
.asm__map-signal-label { font-family: var(--asmdisplay); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--asmmuted); }
.asm__map-signal-step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding-left: 2px; }
.asm__map-signal-step:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 22px; bottom: -15px; width: 1px; background: rgba(255, 255, 255, .14); }
.asm__map-signal-dot { flex: none; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); }
.asm__map-signal-step--flag .asm__map-signal-dot { background: var(--asm3); border-color: var(--asm3); box-shadow: 0 0 0 4px rgba(139, 74, 82, .18); }
.asm__map-signal-step--root .asm__map-signal-dot { background: var(--asm); border-color: var(--asm); box-shadow: 0 0 0 4px rgba(185, 134, 62, .18); }
.asm__map-signal-step strong { display: block; font-family: var(--asmdisplay); font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.asm__map-signal-step span { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--asmmuted); }

/* Health-over-time sparkline rail */
.asm__timeline { max-width: 920px; margin: 32px auto 0; padding: 20px 24px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
.asm__timeline-head { display: flex; align-items: center; gap: 8px; font-family: var(--asmdisplay); font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #EFE7DA; margin-bottom: 14px; }
.asm__timeline-head i { color: var(--asm); font-size: 11px; }
.asm__timeline-track { position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.asm__timeline-track::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
  transform: translateX(-140%);
  animation: asmKfSweep 6.5s ease-in-out 1.1s infinite;
  pointer-events: none;
}
.asm__tick { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(185, 134, 62, .7), rgba(185, 134, 62, .25)); transform-origin: bottom; animation: asmKfTickRise .85s cubic-bezier(.16, 1, .3, 1) backwards; }
.asm__tick.is-incident { background: linear-gradient(180deg, rgba(139, 74, 82, .9), rgba(139, 74, 82, .4)); animation: asmKfTickRise .85s cubic-bezier(.16, 1, .3, 1) backwards, asmKfIncidentPulse 2.6s ease-in-out 1.3s infinite; }
.asm__tick.is-dip { background: linear-gradient(180deg, rgba(217, 180, 113, .5), rgba(217, 180, 113, .18)); }
.asm__timeline-maint { position: absolute; bottom: 0; transform: translateX(-50%); color: var(--asm); font-size: 10px; }
.asm__timeline-maint i { display: inline-block; animation: asmKfMaintPulse 2.4s ease-in-out 1.6s infinite; }
.asm__timeline-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 11px; font-weight: 400; color: var(--asmmuted); }
.asm__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.asm__dot--stable { background: var(--asm); }
.asm__dot--incident { background: var(--asm3); }
.asm__dot--maint { background: #D9B471; }

.asm__hero-pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 30px; margin: 54px auto 0; max-width: 780px; }
.asm__hero-pillar { display: flex; flex-direction: column; gap: 6px; text-align: left; max-width: 220px; }
.asm__hero-pillar strong { font-family: var(--asmdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.asm__hero-pillar span { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--asmmuted); }

/* ---------- 02. Intro: editorial split ---------- */
.asm__intro { padding: 120px 0; background: #fff; }
.asm__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.asm__intro-note { margin-top: 20px; padding: 18px 22px; border-radius: 14px; border: 1px solid var(--asmb); background: var(--asmbg); font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--asmt); }
.asm__intro-note a { font-weight: 600; color: var(--asm); }
.asm__intro-figure { position: relative; }
.asm__intro-figure img { width: 100%; border-radius: 20px 20px 0 0; display: block; object-fit: cover; aspect-ratio: 4 / 3.1; }
.asm__intro-badge { padding: 22px 26px; border-radius: 0 0 16px 16px; background: var(--asmbg); border: 1px solid var(--asmb); border-top: none; box-shadow: 0 18px 40px rgba(23, 21, 26, .08); }
.asm__intro-badge strong { display: block; font-family: var(--asmdisplay); font-size: 16px; font-weight: 700; color: var(--asmh); margin-bottom: 6px; }
.asm__intro-badge span { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--asmt); }
.asm__intro-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 70px; padding-top: 44px; border-top: 1px solid var(--asmb); }
.asm__intro-rail-item { padding-left: 20px; border-left: 2px solid var(--asm); }
.asm__intro-rail-item strong { display: block; font-family: var(--asmdisplay); font-size: 15px; font-weight: 700; color: var(--asmh); margin-bottom: 6px; }
.asm__intro-rail-item span { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--asmt); }

/* ---------- 03. Beyond the ticket queue: wrapping signal chain + question grid ---------- */
.asm__chain-section { padding: 120px 0; background: var(--asmbg); }
.asm__chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto 44px; }
.asm__chain-node { padding: 11px 18px; border-radius: 30px; border: 1px solid var(--asmb); background: #fff; font-size: 13px; font-weight: 600; color: var(--asmh); white-space: nowrap; }
.asm__chain-node--end { border-color: var(--asm); background: rgba(185, 134, 62, .1); color: var(--asm); }
.asm__chain-arrow { font-size: 11px; color: var(--asmb); }
.asm__chain-questions { max-width: 980px; margin: 0 auto 30px; padding: 30px 34px; border-radius: 18px; background: #fff; border: 1px solid var(--asmb); }
.asm__chain-q-label { display: block; font-family: var(--asmdisplay); font-size: 13.5px; font-weight: 700; color: var(--asmh); margin-bottom: 18px; }
.asm__chain-q-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; }
.asm__chain-q-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 300; color: var(--asmt); }
.asm__chain-q-item i { color: var(--asm); font-size: 11px; }
.asm__chain-note { max-width: 780px; margin: 0 auto; text-align: center; }

/* ---------- 04. Application Health: business-impact hub + six-signal grid ---------- */
.asm__health { padding: 120px 0; background: #fff; }
.asm__health-hub { display: flex; align-items: flex-start; gap: 22px; max-width: 980px; margin: 0 auto 40px; padding: 30px 34px; border-radius: 18px; background: linear-gradient(175deg, var(--asmdark) 0%, var(--asmdark2) 100%); }
.asm__health-hub .asm__ico { margin-bottom: 0; background: rgba(185, 134, 62, .18); }
.asm__health-hub strong { display: block; font-family: var(--asmdisplay); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.asm__health-hub p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--asmmuted); margin: 0; }
.asm__health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.asm__health-card { padding: 28px 26px; border-radius: 16px; border: 1px solid var(--asmb); background: var(--asmbg); }
.asm__health-card h3 { font-family: var(--asmdisplay); font-size: 16px; font-weight: 700; color: var(--asmh); margin: 0 0 10px; }
.asm__health-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--asmt); margin: 0; }

/* ---------- 05. Incident Management & Root-Cause Analysis: bracketed path + inputs ---------- */
.asm__incident { padding: 120px 0; background: var(--asmbg); }
.asm__incident-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: start; }
.asm__incident-path { position: relative; padding-left: 26px; border-left: 2px solid var(--asmb); }
.asm__incident-bracket { font-family: var(--asmdisplay); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--asm); margin: 26px 0 14px; }
.asm__incident-bracket--restore { margin-top: 0; }
.asm__incident-stage { position: relative; display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.asm__incident-stage::before { content: ""; position: absolute; left: -32px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--asm); }
.asm__incident-num { flex: none; font-family: var(--asmdisplay); font-size: 12px; font-weight: 700; color: var(--asmb); width: 22px; }
.asm__incident-stage h3 { font-family: var(--asmdisplay); font-size: 15.5px; font-weight: 700; color: var(--asmh); margin: 0 0 4px; }
.asm__incident-stage p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--asmt); margin: 0; }
.asm__incident-inputs { padding: 30px 32px; border-radius: 18px; background: #fff; border: 1px solid var(--asmb); }
.asm__incident-inputs-label { display: block; font-family: var(--asmdisplay); font-size: 13px; font-weight: 700; color: var(--asmh); margin-bottom: 18px; }
.asm__incident-inputs-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.asm__input-chip { display: inline-block; padding: 8px 14px; border-radius: 30px; font-size: 12px; font-weight: 500; border: 1px solid rgba(185, 134, 62, .32); background: var(--asmbg); color: var(--asmh); }
.asm__incident-inputs-note { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--asmt); margin: 0; }

/* ---------- 06. Maintenance quadrant ---------- */
.asm__maint { padding: 120px 0; background: #fff; }
.asm__maint-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.asm__maint-card { padding: 28px 24px; border-radius: 16px; border: 1px solid var(--asmb); background: var(--asmbg); }
.asm__maint-kicker { display: block; font-family: var(--asmdisplay); font-size: 15.5px; font-weight: 700; color: var(--asmh); margin-bottom: 10px; }
.asm__maint-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--asmt); margin: 0; }

/* ---------- 07. Observability & Production Visibility: sources converge into a picture ---------- */
.asm__obs { padding: 120px 0; background: var(--asmbg); }
.asm__obs-grid { display: grid; grid-template-columns: 1.15fr auto .95fr; gap: 26px; align-items: center; }
.asm__obs-sources { padding: 28px; border-radius: 16px; background: #fff; border: 1px solid var(--asmb); }
.asm__obs-sources-label { display: block; font-family: var(--asmdisplay); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--asm); margin-bottom: 16px; }
.asm__obs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.asm__obs-chip { display: inline-block; padding: 7px 13px; border-radius: 30px; font-size: 12px; font-weight: 500; border: 1px solid rgba(185, 134, 62, .32); background: var(--asmbg); color: var(--asmh); }
.asm__obs-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--asm); font-size: 20px; }
.asm__obs-arrow span { font-size: 10.5px; font-weight: 600; color: var(--asmt); white-space: nowrap; }
.asm__obs-picture { padding: 28px; border-radius: 16px; background: #fff; border: 1px solid var(--asmb); }
.asm__obs-picture-label { display: block; font-family: var(--asmdisplay); font-size: 15px; font-weight: 700; color: var(--asmh); margin-bottom: 16px; }
.asm__obs-example { padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; border: 1px solid var(--asmb); }
.asm__obs-example:last-child { margin-bottom: 0; }
.asm__obs-example-tag { display: inline-block; font-family: var(--asmdisplay); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; padding: 3px 10px; border-radius: 20px; }
.asm__obs-example--noise { background: var(--asmbg); }
.asm__obs-example--noise .asm__obs-example-tag { background: rgba(110, 103, 93, .14); color: var(--asmt); }
.asm__obs-example--actionable { background: rgba(185, 134, 62, .07); border-color: rgba(185, 134, 62, .35); }
.asm__obs-example--actionable .asm__obs-example-tag { background: rgba(185, 134, 62, .18); color: var(--asm); }
.asm__obs-example p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--asmh); margin: 0; }
.asm__obs-note { max-width: 780px; margin: 34px auto 0; text-align: center; }

/* ---------- 08. Technical Debt: horizontal risk ledger ---------- */
.asm__debt { padding: 120px 0; background: #fff; }
.asm__debt-list { max-width: 880px; margin: 0 auto; }
.asm__debt-row { display: grid; grid-template-columns: 1fr 180px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--asmb); }
.asm__debt-copy strong { display: block; font-family: var(--asmdisplay); font-size: 15px; font-weight: 700; color: var(--asmh); margin-bottom: 4px; }
.asm__debt-copy span { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--asmt); }
.asm__debt-meter { display: flex; gap: 5px; }
.asm__debt-seg { flex: 1 1 0; height: 8px; border-radius: 3px; background: var(--asmb); }
.asm__debt-seg.is-filled { background: var(--asm); }
.asm__debt-seg.is-filled.is-high { background: var(--asm3); }
.asm__debt-caption { max-width: 660px; margin: 18px auto 0; text-align: center; font-size: 12.5px; font-weight: 300; font-style: italic; color: var(--asmt); }
.asm__page .asm__debt-close { max-width: 640px; margin: 40px auto 0; text-align: center; }

/* ---------- 09. Release & Change Support: linked panels + rollback branch ---------- */
.asm__release { padding: 120px 0; background: var(--asmbg); }
.asm__release-row { display: flex; align-items: stretch; gap: 0; max-width: 1000px; margin: 0 auto; }
.asm__release-panel { flex: 1 1 0; padding: 30px 26px; background: #fff; border: 1px solid var(--asmb); position: relative; }
.asm__release-panel:first-child { border-radius: 16px 0 0 16px; }
.asm__release-panel:last-child { border-radius: 0 16px 16px 0; }
.asm__release-tag { display: inline-block; font-family: var(--asmdisplay); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--asm); margin-bottom: 12px; }
.asm__release-panel h3 { font-family: var(--asmdisplay); font-size: 16.5px; font-weight: 700; color: var(--asmh); margin: 0 0 10px; }
.asm__release-panel p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--asmt); margin: 0; }
.asm__release-branch { flex: none; width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: var(--asmh); }
.asm__release-branch span { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; color: var(--asmmuted); padding: 4px 10px; border-radius: 20px; border: 1px dashed rgba(255, 255, 255, .25); }
.asm__release-branch span.is-active { color: #211804; background: var(--asm); border-color: var(--asm); border-style: solid; }

/* ---------- 10. What Good Looks Like: asymmetric outcome bento ---------- */
.asm__outcomes { padding: 120px 0; background: #fff; }
.asm__outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.asm__outcome-tile { padding: 28px 26px; border-radius: 16px; border: 1px solid var(--asmb); background: var(--asmbg); }
.asm__outcome-tile--wide { grid-column: span 2; }
.asm__outcome-tile h3 { font-family: var(--asmdisplay); font-size: 16px; font-weight: 700; color: var(--asmh); margin: 0 0 10px; }
.asm__outcome-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--asmt); margin: 0; }

/* ---------- 11. Connected Practice: QA feedback loop belt ---------- */
.asm__connect { padding: 120px 0; }
.asm__loop-belt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; max-width: 1040px; margin: 0 auto 18px; }
.asm__loop-node { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); font-size: 13px; font-weight: 600; color: #EFE7DA; white-space: nowrap; }
.asm__loop-node span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(185, 134, 62, .18); color: var(--asm); font-size: 10px; font-weight: 700; }
.asm__loop-node--end { border-color: var(--asm); background: rgba(185, 134, 62, .14); }
.asm__loop-arrow { font-size: 11px; color: var(--asmmuted); }
.asm__loop-return { display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 700px; margin: 0 auto 44px; text-align: center; font-size: 13.5px; font-weight: 400; color: var(--asmmuted); }
.asm__loop-return i { color: var(--asm); font-size: 12px; }
.asm__loop-return a { font-weight: 600; color: #D9B471; }
.asm__page .asm__connect-note { max-width: 660px; margin: 0 auto 40px; text-align: center; }
.asm__connect-note a { color: #D9B471; font-weight: 600; }
.asm__connect-also { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .12); }
.asm__connect-also > span { font-family: var(--asmdisplay); font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--asmmuted); }
.asm__also-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 500; color: #EFE7DA; transition: all .3s ease; }
.asm__also-chip i { color: var(--asm); font-size: 11px; }
.asm__also-chip:hover { background: rgba(185, 134, 62, .12); border-color: var(--asm); }

/* ---------- 12. Tools we work with ---------- */
.asm__tech { padding: 120px 0; background: #fff; }
.asm__tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.asm__tech-col { border-top: 3px solid var(--asm); padding-top: 20px; }
.asm__tech-col:nth-child(2) { border-top-color: var(--asm2); }
.asm__tech-col:nth-child(3) { border-top-color: var(--asm3); }
.asm__tech-col:nth-child(4) { border-top-color: var(--asmh); }
.asm__tech-col h3 { font-family: var(--asmdisplay); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: var(--asmh); margin: 0 0 16px; }
.asm__tech-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.asm__tech-col li { font-size: 14.5px; font-weight: 300; color: var(--asmt); padding-left: 16px; position: relative; }
.asm__tech-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--asmb); }

/* ---------- 13. FAQ ---------- */
.asm__faq { padding: 120px 0; background: var(--asmbg); }
.asm__faq-list { max-width: 880px; margin: 0 auto; }
.asm__faq-item { border-bottom: 1px solid var(--asmb); }
.asm__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--asmdisplay);
  font-size: 17px;
  font-weight: 600;
  color: var(--asmh);
  cursor: pointer;
}
.asm__faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--asmb); color: var(--asm); flex: none; transition: all .3s ease; }
.asm__faq-item.is-open .asm__faq-icon { background: var(--asm); border-color: var(--asm); color: #211804; transform: rotate(45deg); }
.asm__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.asm__faq-item.is-open .asm__faq-a { max-height: 260px; }
.asm__faq-a p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--asmt); margin: 0 0 24px; padding-right: 50px; }

/* ---------- Keyframes ---------- */
@keyframes asmKfDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, -14px); }
}
@keyframes asmKfRing {
  0% { opacity: .55; transform: scale(.72); }
  80%, 100% { opacity: 0; transform: scale(1.28); }
}
@keyframes asmKfCoreGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(185, 134, 62, 0); }
  50% { text-shadow: 0 0 12px rgba(185, 134, 62, .85); }
}
@keyframes asmKfPing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 74, 82, .55); }
  70% { box-shadow: 0 0 0 8px rgba(139, 74, 82, 0); }
}
@keyframes asmKfTickRise {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes asmKfIncidentPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}
@keyframes asmKfMaintPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}
@keyframes asmKfSweep {
  0% { transform: translateX(-140%); }
  55%, 100% { transform: translateX(340%); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .asm__hero-title { font-size: 38px; }
  .asm__intro-grid { grid-template-columns: 1fr; }
  .asm__health-grid, .asm__maint-grid, .asm__outcome-grid { grid-template-columns: repeat(2, 1fr); }
  .asm__outcome-tile--wide { grid-column: span 2; }
  .asm__incident-grid { grid-template-columns: 1fr; }
  .asm__obs-grid { grid-template-columns: 1fr; }
  .asm__obs-arrow { flex-direction: row; }
  .asm__debt-row { grid-template-columns: 1fr; gap: 10px; }
  .asm__debt-meter { max-width: 220px; }
}

@media (max-width: 991px) {
  .asm__hero { padding: 160px 0 90px; }
  .asm__hero-title { font-size: 34px; }
  .asm__map { grid-template-columns: 1fr; max-width: 460px; }
  .asm__release-row { flex-direction: column; }
  .asm__release-panel:first-child, .asm__release-panel:last-child { border-radius: 16px; }
  .asm__release-branch { width: 100%; flex-direction: row; padding: 14px; }
}

@media (max-width: 767px) {
  .asm__intro, .asm__chain-section, .asm__health, .asm__incident, .asm__maint, .asm__obs, .asm__debt, .asm__release, .asm__outcomes, .asm__connect, .asm__tech, .asm__faq { padding-top: 80px; padding-bottom: 80px; }
  .asm__hero-title { font-size: 27px; }
  .asm__hero-lead { font-size: 16.5px; }
  .asm__health-grid, .asm__maint-grid, .asm__outcome-grid { grid-template-columns: 1fr; }
  .asm__outcome-tile--wide { grid-column: span 1; }
  .asm__chain-q-grid { grid-template-columns: 1fr; }
  .asm__tech-grid { grid-template-columns: 1fr; gap: 30px; }
  .asm__hero-pillars { gap: 26px; }
  .asm__timeline-track { height: 48px; }
  .asm__map-node span { display: none; }
}

/* Users who ask for less motion get the page without the drifting
   hero glows, the pulsing radar rings, the core icon glow, or the
   incident-node ping. */
@media (prefers-reduced-motion: reduce) {
  .asm__page * { transition-duration: .01ms !important; }
  .asm__hero-glow { animation: none; }
  .asm__map-ring { animation: none; opacity: .3; }
  .asm__map-core i { animation: none; }
  .asm__map-node-ping { animation: none; }
  .asm__tick { animation: none; }
  .asm__timeline-maint i { animation: none; }
  .asm__timeline-track::after { animation: none; display: none; }
}

/* ============================================================
   TECHNOLOGY CONSULTING PAGE (tcon__*)
   Scoped entirely to .tcon__page (added on <main> of
   technology-consulting.html). Distinct visual system: a cool
   graphite/steel neutral base with a single garnet signal accent -
   deliberately kept away from the blue/orange/teal/green/cyan and
   warm bronze-cream palettes already used by the other service
   domain pages, to read as strategic, analytical and executive
   rather than developer- or lab-flavoured.
   ============================================================ */
.tcon__page {
  --tcon: #8C2A43;
  --tcon-light: #B24560;
  --tcon2: #56616F;
  --tconh: #14161D;
  --tcont: #565C66;
  --tconb: #E2E4E8;
  --tconbg: #F5F6F8;
  --tcondark: #0F1116;
  --tcondark2: #181B22;
  --tconmuted: #A9AEB8;
  --tcondisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.tcon__page .tcon__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--tcon); margin-bottom: 16px; }
.tcon__page .tcon__title { font-family: var(--tcondisplay); font-size: 36px; line-height: 1.26; font-weight: 700; letter-spacing: -.5px; color: var(--tconh); margin: 0 0 20px; }
.tcon__page .tcon__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--tconh); margin: 0 0 18px; }
.tcon__page .tcon__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--tcont); margin: 0 0 16px; }
.tcon__page .tcon__text:last-child { margin-bottom: 0; }
.tcon__page .tcon__text a { color: var(--tcon); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.tcon__page .tcon__head { max-width: 800px; }
.tcon__page .tcon__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.tcon__page .tcon__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--tcondark) 0%, var(--tcondark2) 100%); }
.tcon__page .tcon__dark > .container { position: relative; z-index: 2; }
.tcon__page .tcon__dark .tcon__eyebrow { color: #D08298; }
.tcon__page .tcon__dark .tcon__title { color: #fff; }
.tcon__page .tcon__dark .tcon__text { color: var(--tconmuted); }

.tcon__page .tcon__btn,
.tcon__page .tcon__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.tcon__page .tcon__btn { color: #fff; background: var(--tcon); border: 2px solid var(--tcon); }
.tcon__page .tcon__btn:hover { background: var(--tcon-light); border-color: var(--tcon-light); color: #fff; }
.tcon__page .tcon__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.tcon__page .tcon__btn-ghost:hover { background: #fff; color: var(--tcondark); border-color: #fff; }

.tcon__page .tcon__link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--tcon); transition: gap .3s ease, color .3s ease; }
.tcon__page .tcon__link:hover { gap: 15px; color: var(--tcon-light); }
.tcon__page .tcon__dark .tcon__link { color: #E0A2B2; }
.tcon__page .tcon__dark .tcon__link:hover { color: #fff; }

.tcon__page .tcon__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(140, 42, 67, .09); color: var(--tcon); font-size: 20px; margin-bottom: 18px; }
.tcon__page .tcon__dark .tcon__ico { background: rgba(140, 42, 67, .22); color: #E0A2B2; }

.tcon__page .tcon__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(86, 97, 111, .08); border: 1px solid var(--tconb); color: var(--tconh); font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.tcon__page .tcon__dark .tcon__chip { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }
.tcon__page .tcon__chip--link { text-decoration: none; font-weight: 500; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.tcon__page .tcon__dark .tcon__chip--link:hover { background: var(--tcon); border-color: var(--tcon); color: #fff; }

/* ---------- 01. Hero: the decision lattice ---------- */
.tcon__hero { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--tcondark) 0%, var(--tcondark2) 100%); padding: 190px 0 110px; }
.tcon__hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .5; 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: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); }
.tcon__hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.tcon__hero-glow--1 { width: 520px; height: 520px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(140, 42, 67, .35), transparent 70%); }
.tcon__hero-glow--2 { width: 460px; height: 460px; right: -140px; bottom: -160px; background: radial-gradient(circle, rgba(86, 97, 111, .3), transparent 70%); }
.tcon__hero .container { position: relative; z-index: 2; }

.tcon__hero-top { max-width: 880px; margin: 0 auto; text-align: center; }
.tcon__hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); font-size: 12.5px; font-weight: 600; letter-spacing: .5px; color: #E0A2B2; margin-bottom: 24px; }
.tcon__hero-title { font-family: var(--tcondisplay); font-size: 47px; line-height: 1.24; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.tcon__hero-title em { font-style: normal; color: #E0A2B2; }
.tcon__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: var(--tconmuted); max-width: 700px; margin: 0 auto 34px; }
.tcon__hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* Blueprint stack diagram: three technical-drawing "bands" (signals /
   decision layer / outcomes) connected by converging-then-diverging
   funnel connectors, framed like a scanned technical exhibit. Replaces
   an earlier sparse node-graph version that read as too empty. */
.tcon__blueprint {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 76px auto 0;
  padding: 46px 40px 36px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
  background-size: 26px 26px, 26px 26px, 100% 100%;
  overflow: hidden;
}
.tcon__bp-corner { position: absolute; width: 22px; height: 22px; border-color: rgba(224, 162, 178, .55); }
.tcon__bp-corner--tl { top: 12px; left: 12px; border-top: 2px solid; border-left: 2px solid; }
.tcon__bp-corner--tr { top: 12px; right: 12px; border-top: 2px solid; border-right: 2px solid; }
.tcon__bp-corner--bl { bottom: 12px; left: 12px; border-bottom: 2px solid; border-left: 2px solid; }
.tcon__bp-corner--br { bottom: 12px; right: 12px; border-bottom: 2px solid; border-right: 2px solid; }
.tcon__bp-tag { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--tconmuted); white-space: nowrap; }
.tcon__bp-scan { position: absolute; left: 0; right: 0; height: 90px; top: -20%; background: linear-gradient(180deg, transparent, rgba(224, 162, 178, .1), transparent); pointer-events: none; animation: tconScan 6s ease-in-out infinite; }

.tcon__bp-band { position: relative; margin-top: 30px; padding: 22px 24px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .025); }
.tcon__blueprint > .tcon__bp-band:first-of-type { margin-top: 22px; }
.tcon__bp-band--b { background: rgba(140, 42, 67, .1); border-color: rgba(224, 162, 178, .28); box-shadow: 0 0 0 1px rgba(224, 162, 178, .08) inset; }
.tcon__bp-band-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tconmuted); margin-bottom: 16px; }
.tcon__bp-band-label--accent { color: #E0A2B2; }
.tcon__bp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

.tcon__bp-pin { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 8px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .14); color: #D9DBE0; font-size: 11.5px; font-weight: 500; line-height: 1.2; }
.tcon__bp-pin--out { background: rgba(140, 42, 67, .14); border-color: rgba(224, 162, 178, .32); color: #F3D7DE; }

.tcon__bp-row--gates { flex-wrap: wrap; gap: 0; }
.tcon__bp-gate { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 9px; background: var(--tcon); border: 1px solid #B24560; color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 26px -10px rgba(140, 42, 67, .7); white-space: nowrap; }
.tcon__bp-gate::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; background: #fff; transform: rotate(45deg); border-radius: 1.5px; flex-shrink: 0; }
.tcon__bp-gate-spine { flex: 1 1 28px; min-width: 18px; max-width: 56px; height: 2px; background: linear-gradient(90deg, rgba(224, 162, 178, .05), rgba(224, 162, 178, .55), rgba(224, 162, 178, .05)); }

.tcon__bp-funnel { position: relative; height: 46px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.tcon__bp-funnel::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .025); border-left: 1px dashed rgba(255, 255, 255, .12); border-right: 1px dashed rgba(255, 255, 255, .12); }
.tcon__bp-funnel--in::before { clip-path: polygon(14% 0, 86% 0, 62% 100%, 38% 100%); }
.tcon__bp-funnel--out::before { clip-path: polygon(38% 0, 62% 0, 86% 100%, 14% 100%); }
.tcon__bp-funnel i { position: relative; font-size: 10px; color: rgba(224, 162, 178, .7); animation: tconPulseDown 1.8s ease-in-out infinite; }
.tcon__bp-funnel i:last-child { animation-delay: .3s; }

.tcon__bp-loop { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 26px auto 0; padding: 8px 16px; border-radius: 30px; border: 1px dashed rgba(224, 162, 178, .4); color: #E0A2B2; font-size: 12px; font-weight: 500; }
.tcon__bp-loop i { animation: tconSpin 5s linear infinite; }

.tcon__hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 96px auto 0; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tcon__hero-pillar { display: flex; flex-direction: column; gap: 8px; }
.tcon__hero-pillar strong { font-family: var(--tcondisplay); font-size: 15px; font-weight: 700; color: #fff; }
.tcon__hero-pillar span { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--tconmuted); }

@keyframes tconSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tconScan { 0%, 100% { top: -20%; opacity: 0; } 12% { opacity: 1; } 50% { top: 100%; opacity: 1; } 62% { opacity: 0; } }
@keyframes tconPulseDown { 0%, 100% { opacity: .25; transform: translateY(-3px); } 50% { opacity: .9; transform: translateY(3px); } }

/* ---------- 02. Positioning: editorial split with pull-quote ---------- */
.tcon__intro { padding: 120px 0; background: #fff; }
.tcon__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.tcon__intro-note { margin-top: 28px; padding: 18px 20px; border-radius: 10px; background: var(--tconbg); border-left: 3px solid var(--tcon); font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--tcont); }
.tcon__intro-figure { position: relative; }
.tcon__intro-figure img { width: 100%; border-radius: 16px; display: block; }
.tcon__intro-quote { position: relative; margin: -50px 24px 0; padding: 26px 28px; border-radius: 12px; background: var(--tcondark); box-shadow: 0 20px 44px -18px rgba(15, 17, 22, .5); }
.tcon__intro-quote p { margin: 0; font-family: var(--tcondisplay); font-size: 16.5px; font-weight: 600; line-height: 1.55; color: #fff; }
.tcon__intro-quote::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--tcondisplay); font-size: 60px; font-weight: 700; color: var(--tcon); line-height: 1; }

/* ---------- 03. Where consulting begins: grouped signal clusters ---------- */
.tcon__signals { padding: 120px 0; }
.tcon__signal-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tcon__signal-group { padding: 28px 26px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.tcon__signal-group:last-child { grid-column: 1 / -1; }
.tcon__signal-group-title { display: flex; align-items: center; gap: 10px; font-family: var(--tcondisplay); font-size: 15.5px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.tcon__signal-group-title i { color: var(--tcon-light); font-size: 14px; }
.tcon__signal-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- 04. Current-state assessment: split with expandable questions ---------- */
.tcon__assess { padding: 120px 0; background: var(--tconbg); }
.tcon__assess-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
.tcon__assess-intro { position: sticky; top: 130px; }
.tcon__assess-list { display: flex; flex-direction: column; gap: 12px; }
.tcon__assess-item { border-radius: 12px; background: #fff; border: 1px solid var(--tconb); overflow: hidden; }
.tcon__assess-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; text-align: left; font-family: var(--tcondisplay); font-size: 15px; font-weight: 600; color: var(--tconh); cursor: pointer; }
.tcon__assess-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tconbg); color: var(--tcon); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.tcon__assess-item.is-open .tcon__assess-icon { background: var(--tcon); color: #fff; transform: rotate(45deg); }
.tcon__assess-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.tcon__assess-item.is-open .tcon__assess-a { max-height: 220px; }
.tcon__assess-a p { margin: 0; padding: 0 22px 22px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--tcont); }

/* ---------- 05. Decision matrix: trade-off pairs ---------- */
.tcon__matrix { padding: 120px 0; background: #fff; }
.tcon__matrix-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tcon__matrix-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 20px; border-radius: 14px; border: 1px solid var(--tconb); background: var(--tconbg); transition: border-color .3s ease, transform .3s ease; }
.tcon__matrix-card:hover { border-color: var(--tcon); transform: translateY(-4px); }
.tcon__matrix-a, .tcon__matrix-b { font-family: var(--tcondisplay); font-size: 15px; font-weight: 700; color: var(--tconh); }
.tcon__matrix-vs { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--tcon); text-transform: uppercase; }
.tcon__matrix-card p { margin: 6px 0 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--tcont); }

/* ---------- 06. Six connected capabilities: spine with a leadership band ---------- */
.tcon__cap { padding: 120px 0; background: var(--tconbg); }
.tcon__cap-spine { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.tcon__cap-rail { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--tconb), var(--tcon), var(--tconb)); transform: translateX(-50%); }
.tcon__cap-item { position: relative; display: flex; align-items: center; padding: 26px 0; }
.tcon__cap-item--1, .tcon__cap-item--3, .tcon__cap-item--5 { justify-content: flex-start; }
.tcon__cap-item--2, .tcon__cap-item--4 { justify-content: flex-end; }
.tcon__cap-card { width: calc(50% - 42px); padding: 28px 30px; border-radius: 14px; background: #fff; border: 1px solid var(--tconb); box-shadow: 0 16px 34px -22px rgba(20, 22, 29, .18); }
.tcon__cap-item--2 .tcon__cap-card, .tcon__cap-item--4 .tcon__cap-card { text-align: right; }
.tcon__cap-item--2 .tcon__ico, .tcon__cap-item--4 .tcon__ico { margin-left: auto; }
.tcon__cap-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tcon); margin-bottom: 10px; }
.tcon__cap-card h3 { font-family: var(--tcondisplay); font-size: 19px; font-weight: 700; color: var(--tconh); margin: 0 0 10px; }
.tcon__cap-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tcont); margin: 0 0 16px; }
.tcon__cap-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tcon); color: #fff; font-family: var(--tcondisplay); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 6px var(--tconbg); z-index: 2; }

.tcon__cap-lead { position: relative; display: flex; align-items: center; gap: 26px; max-width: 900px; margin: 44px auto 0; padding: 34px 38px; border-radius: 16px; background: linear-gradient(120deg, var(--tcondark), var(--tcondark2)); }
.tcon__cap-lead .tcon__ico { margin: 0; flex-shrink: 0; background: rgba(140, 42, 67, .28); color: #E0A2B2; }
.tcon__cap-lead-copy { flex: 1; }
.tcon__cap-lead .tcon__cap-kicker { color: #E0A2B2; }
.tcon__cap-lead h3 { font-family: var(--tcondisplay); font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.tcon__cap-lead p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tconmuted); margin: 0; }
.tcon__cap-lead .tcon__link { flex-shrink: 0; color: #E0A2B2; }
.tcon__cap-lead .tcon__link:hover { color: #fff; }

/* ---------- 07. The consulting journey: a loop, not a line ---------- */
.tcon__journey { padding: 130px 0 150px; }
.tcon__orbit { position: relative; width: 100%; max-width: 660px; aspect-ratio: 1 / 1; margin: 30px auto 0; }
.tcon__orbit-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .16); }
.tcon__orbit-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 132px; height: 132px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(140, 42, 67, .16); border: 1px solid rgba(224, 162, 178, .4); text-align: center; z-index: 3; }
.tcon__orbit-hub i { font-size: 20px; color: #E0A2B2; animation: tconSpin 7s linear infinite; }
.tcon__orbit-hub span { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--tconmuted); max-width: 96px; }

.tcon__orbit-node { position: absolute; left: 50%; top: 50%; width: 208px; text-align: center; z-index: 2; }
.tcon__orbit-node--1 { transform: translate(calc(-50% + 0px), calc(-50% - 180px)); }
.tcon__orbit-node--2 { transform: translate(calc(-50% + 156px), calc(-50% - 90px)); }
.tcon__orbit-node--3 { transform: translate(calc(-50% + 156px), calc(-50% + 90px)); }
.tcon__orbit-node--4 { transform: translate(calc(-50% + 0px), calc(-50% + 180px)); }
.tcon__orbit-node--5 { transform: translate(calc(-50% - 156px), calc(-50% + 90px)); }
.tcon__orbit-node--6 { transform: translate(calc(-50% - 156px), calc(-50% - 90px)); }
.tcon__orbit-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(224, 162, 178, .4); font-size: 11px; font-weight: 700; color: #E0A2B2; margin-bottom: 10px; }
.tcon__orbit-node h3 { font-family: var(--tcondisplay); font-size: 14.5px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.tcon__orbit-node p { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--tconmuted); margin: 0; }

/* ---------- 08. Strategic horizons: layered depth panels ---------- */
.tcon__horizons { padding: 120px 0; background: #fff; }
.tcon__horizon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; max-width: 1080px; margin: 0 auto; }
.tcon__horizon-panel { padding: 32px 28px; border-radius: 16px; background: var(--tconbg); border: 1px solid var(--tconb); }
.tcon__horizon-panel--now { transform: translateY(-14px); background: #fff; border-color: var(--tcon); box-shadow: 0 24px 50px -26px rgba(140, 42, 67, .3); }
.tcon__horizon-panel--next { transform: translateY(4px); }
.tcon__horizon-panel--later { transform: translateY(20px); background: transparent; border-style: dashed; }
.tcon__horizon-label { display: inline-block; padding: 5px 14px; border-radius: 20px; background: var(--tcon); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.tcon__horizon-panel--later .tcon__horizon-label { background: var(--tcon2); }
.tcon__horizon-panel h3 { font-family: var(--tcondisplay); font-size: 16.5px; font-weight: 700; color: var(--tconh); line-height: 1.4; margin: 0 0 18px; }
.tcon__horizon-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tcon__horizon-panel li { position: relative; padding-left: 18px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--tcont); }
.tcon__horizon-panel li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--tcon); }

/* ---------- 09. What a roadmap actually contains: ledger ---------- */
.tcon__roadmap { padding: 120px 0; background: var(--tconbg); }
.tcon__roadmap-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.tcon__roadmap-list { display: flex; flex-direction: column; border-top: 1px solid var(--tconb); }
.tcon__roadmap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 17px 4px; border-bottom: 1px solid var(--tconb); }
.tcon__roadmap-dim { font-family: var(--tcondisplay); font-size: 14.5px; font-weight: 700; color: var(--tconh); flex-shrink: 0; }
.tcon__roadmap-desc { font-size: 13.5px; font-weight: 300; color: var(--tcont); text-align: right; }

/* ---------- 10. Architecture, kept business-legible ---------- */
.tcon__arch { padding: 120px 0; background: #fff; }
.tcon__arch-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.tcon__arch-figure img { width: 100%; border-radius: 16px; display: block; }

/* ---------- 11. Typography statement ---------- */
.tcon__statement { padding: 130px 0; background: var(--tcondark); text-align: center; }
.tcon__statement-text { max-width: 900px; margin: 0 auto 26px; font-family: var(--tcondisplay); font-size: 30px; line-height: 1.5; font-weight: 500; color: var(--tconmuted); }
.tcon__statement-text span { color: #fff; font-weight: 700; }
.tcon__statement-sub { max-width: 620px; margin: 0 auto; font-size: 15px; font-weight: 300; line-height: 1.7; color: #E0A2B2; }

/* ---------- 12. Grounded in execution ---------- */
.tcon__grounded { padding: 120px 0; }
.tcon__grounded-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.tcon__grounded-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- 13. Conceptual indicator bento ---------- */
.tcon__indicators { padding: 120px 0; background: var(--tconbg); }
.tcon__indicator-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.tcon__indicator-tile { padding: 30px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--tconb); transition: border-color .3s ease, transform .3s ease; }
.tcon__indicator-tile:hover { border-color: var(--tcon); transform: translateY(-4px); }
.tcon__indicator-tile h3 { font-family: var(--tcondisplay); font-size: 15.5px; font-weight: 700; color: var(--tconh); margin: 0 0 10px; }
.tcon__indicator-tile p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--tcont); margin: 0; }

/* ---------- 14. FAQ ---------- */
.tcon__faq { padding: 120px 0; background: #fff; }
.tcon__faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.tcon__faq-item { border-radius: 12px; border: 1px solid var(--tconb); overflow: hidden; }
.tcon__faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--tconbg); border: none; text-align: left; font-family: var(--tcondisplay); font-size: 15.5px; font-weight: 600; color: var(--tconh); cursor: pointer; }
.tcon__faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--tcon); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.tcon__faq-item.is-open .tcon__faq-q { background: var(--tcon); color: #fff; }
.tcon__faq-item.is-open .tcon__faq-icon { background: #fff; color: var(--tcon); transform: rotate(45deg); }
.tcon__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.tcon__faq-item.is-open .tcon__faq-a { max-height: 240px; }
.tcon__faq-a p { margin: 0; padding: 22px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--tcont); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .tcon__hero-title { font-size: 40px; }
  .tcon__signal-groups { grid-template-columns: 1fr; }
  .tcon__signal-group:last-child { grid-column: auto; }
  .tcon__matrix-grid { grid-template-columns: repeat(2, 1fr); }
  .tcon__indicator-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .tcon__hero { padding: 160px 0 90px; }
  .tcon__hero-title { font-size: 32px; }
  .tcon__hero-pillars { grid-template-columns: 1fr; gap: 26px; }

  .tcon__blueprint { padding: 38px 18px 26px; }
  .tcon__bp-tag, .tcon__bp-scan { display: none; }
  .tcon__bp-gate-spine { display: none; }
  .tcon__bp-row--gates { gap: 10px; }

  .tcon__intro-grid, .tcon__assess-grid, .tcon__roadmap-grid, .tcon__arch-grid { grid-template-columns: 1fr; gap: 40px; }
  .tcon__assess-intro { position: static; }
  .tcon__intro-quote { margin: -30px 16px 0; }

  .tcon__cap-rail { display: none; }
  .tcon__cap-item, .tcon__cap-item--2, .tcon__cap-item--4 { justify-content: center; padding: 12px 0; }
  .tcon__cap-card, .tcon__cap-item--2 .tcon__cap-card, .tcon__cap-item--4 .tcon__cap-card { width: 100%; text-align: left; }
  .tcon__cap-item--2 .tcon__ico, .tcon__cap-item--4 .tcon__ico { margin-left: 0; }
  .tcon__cap-node { display: none; }
  .tcon__cap-lead { flex-direction: column; text-align: center; gap: 16px; }
  .tcon__cap-lead .tcon__ico { margin: 0 auto; }

  .tcon__orbit { max-width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px; }
  .tcon__orbit-ring, .tcon__orbit-hub { display: none; }
  .tcon__orbit-node { position: static; transform: none !important; width: 100%; text-align: left; padding: 20px 22px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }

  .tcon__horizon-grid { grid-template-columns: 1fr; }
  .tcon__horizon-panel, .tcon__horizon-panel--now, .tcon__horizon-panel--next, .tcon__horizon-panel--later { transform: none; }

  .tcon__roadmap-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tcon__roadmap-desc { text-align: left; }

  .tcon__indicator-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .tcon__intro, .tcon__signals, .tcon__assess, .tcon__matrix, .tcon__cap, .tcon__journey, .tcon__horizons, .tcon__roadmap, .tcon__arch, .tcon__statement, .tcon__grounded, .tcon__indicators, .tcon__faq { padding-top: 80px; padding-bottom: 80px; }
  .tcon__hero-title { font-size: 27px; }
  .tcon__hero-lead { font-size: 16.5px; }
  .tcon__title { font-size: 27px; }
  .tcon__matrix-grid { grid-template-columns: 1fr; }
  .tcon__indicator-grid { grid-template-columns: 1fr; }
  .tcon__statement-text { font-size: 22px; }
  .tcon__signal-group { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tcon__page * { transition-duration: .01ms !important; }
  .tcon__bp-loop i, .tcon__orbit-hub i { animation: none; }
  .tcon__bp-scan, .tcon__bp-funnel i { animation: none; opacity: .4; }
}

/* ============================================================
   IT STRATEGY CONSULTING PAGE (itsc__*)
   Scoped entirely to .itsc__page (added on <main> of
   it-strategy-consulting.html). Child of the Technology
   Consulting practice - shares its graphite/steel + garnet
   colour family and type stack for family resemblance, but uses
   its own layouts throughout: a three-column priority/gate/domain
   lattice in the hero, a coordination matrix, a portfolio
   quadrant, dependency chains and a ledger-style outcomes list -
   none of which reuse the parent's blueprint-band, orbit or
   card-grid compositions.
   ============================================================ */
.itsc__page {
  --itsc: #8C2A43;
  --itsc-light: #B24560;
  --itsc2: #56616F;
  --itsch: #14161D;
  --itsct: #565C66;
  --itscb: #E2E4E8;
  --itscbg: #F5F6F8;
  --itscdark: #0F1116;
  --itscdark2: #181B22;
  --itscmuted: #A9AEB8;
  --itscdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.itsc__page .itsc__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--itsc); margin-bottom: 16px; }
.itsc__page .itsc__title { font-family: var(--itscdisplay); font-size: 36px; line-height: 1.26; font-weight: 700; letter-spacing: -.5px; color: var(--itsch); margin: 0 0 20px; }
.itsc__page .itsc__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--itsch); margin: 0 0 18px; }
.itsc__page .itsc__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--itsct); margin: 0 0 16px; }
.itsc__page .itsc__text:last-child { margin-bottom: 0; }
.itsc__page .itsc__text a { color: var(--itsc); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.itsc__page .itsc__head { max-width: 800px; }
.itsc__page .itsc__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.itsc__page .itsc__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--itscdark) 0%, var(--itscdark2) 100%); }
.itsc__page .itsc__dark > .container { position: relative; z-index: 2; }
.itsc__page .itsc__dark .itsc__eyebrow { color: #D08298; }
.itsc__page .itsc__dark .itsc__title { color: #fff; }
.itsc__page .itsc__dark .itsc__text { color: var(--itscmuted); }

.itsc__page .itsc__btn,
.itsc__page .itsc__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.itsc__page .itsc__btn { color: #fff; background: var(--itsc); border: 2px solid var(--itsc); }
.itsc__page .itsc__btn:hover { background: var(--itsc-light); border-color: var(--itsc-light); color: #fff; }
.itsc__page .itsc__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.itsc__page .itsc__btn-ghost:hover { background: #fff; color: var(--itscdark); border-color: #fff; }

.itsc__page .itsc__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(140, 42, 67, .09); color: var(--itsc); font-size: 20px; margin-bottom: 18px; }
.itsc__page .itsc__dark .itsc__ico { background: rgba(140, 42, 67, .22); color: #E0A2B2; }

.itsc__page .itsc__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); color: #E7E8EB; font-size: 13.5px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.itsc__page .itsc__chip--link:hover { background: var(--itsc); border-color: var(--itsc); color: #fff; }
.itsc__page .itsc__chip--parent { background: rgba(140, 42, 67, .22); border-color: rgba(224, 162, 178, .38); color: #F3D7DE; font-weight: 700; gap: 10px; }
.itsc__page .itsc__chip--parent:hover { background: var(--itsc); border-color: var(--itsc); color: #fff; }

/* ---------- 01. Hero: the alignment lattice ---------- */
.itsc__hero { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--itscdark) 0%, var(--itscdark2) 100%); padding: 190px 0 110px; }
.itsc__hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .6; background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 15%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 75% 55% at 50% 15%, #000 30%, transparent 78%); }
.itsc__hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.itsc__hero-glow--1 { width: 480px; height: 480px; right: -140px; top: -100px; background: radial-gradient(circle, rgba(140, 42, 67, .35), transparent 70%); }
.itsc__hero-glow--2 { width: 440px; height: 440px; left: -140px; bottom: -140px; background: radial-gradient(circle, rgba(86, 97, 111, .3), transparent 70%); }
.itsc__hero .container { position: relative; z-index: 2; }

.itsc__hero-top { max-width: 900px; margin: 0 auto; text-align: center; }
.itsc__hero-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--itscmuted); margin-bottom: 22px; }
.itsc__hero-crumb a { color: var(--itscmuted); transition: color .3s ease; }
.itsc__hero-crumb a:hover { color: #fff; }
.itsc__hero-crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.itsc__hero-crumb span { color: #E0A2B2; }

.itsc__hero-title { font-family: var(--itscdisplay); font-size: 46px; line-height: 1.24; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.itsc__hero-title em { font-style: normal; color: #E0A2B2; }
.itsc__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: var(--itscmuted); max-width: 720px; margin: 0 auto 34px; }
.itsc__hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* Alignment lattice: business priorities (left) and technology
   domains (right) woven through four vertical decision gates,
   with a horizon strip and revisit loop beneath. Deliberately a
   three-column mesh rather than the parent page's horizontal
   band stack. */
.itsc__lattice { position: relative; width: 100%; max-width: 1100px; margin: 76px auto 0; padding: 42px 34px 34px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); }
.itsc__lattice-tag { display: block; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--itscmuted); margin-bottom: 28px; }

/* Decision deck: a loose, hand-scattered cloud of business-
   priority and technology-domain tags drifting above a fanned
   hand of four decision-gate cards. Deliberately not a wiring
   diagram - the connection is implied by composition (things
   settle downward into the deck) rather than drawn lines, closer
   to an editorial "spread of index cards" than an infographic. */
.itsc__deck-tags { position: relative; height: 148px; }
.itsc__tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .16); color: #D9DBE0; font-size: 12px; font-weight: 500; white-space: nowrap; backdrop-filter: blur(6px); box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .7); }
.itsc__tag::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; }
.itsc__tag--p::before { background: var(--itsc2); box-shadow: 0 0 0 3px rgba(86, 97, 111, .25); }
.itsc__tag--d { background: linear-gradient(145deg, rgba(140, 42, 67, .22), rgba(140, 42, 67, .07)); border-color: rgba(224, 162, 178, .32); color: #F3D7DE; }
.itsc__tag--d::before { background: var(--itsc-light); box-shadow: 0 0 0 3px rgba(224, 162, 178, .28); }
.itsc__tag--sm { font-size: 11px; padding: 7px 12px; opacity: .82; }
.itsc__tag--f1 { animation: itscTagFloat 5.4s ease-in-out infinite; }
.itsc__tag--f2 { animation: itscTagFloat 6.2s ease-in-out infinite .4s; }
.itsc__tag--f3 { animation: itscTagFloat 5.8s ease-in-out infinite .9s; }
.itsc__tag--f4 { animation: itscTagFloat 6.6s ease-in-out infinite 1.3s; }

.itsc__deck-cards { position: relative; height: 300px; margin-top: 4px; }
.itsc__deck-shadow { position: absolute; left: 50%; bottom: 6px; width: 700px; height: 46px; margin-left: -350px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 72%); }
.itsc__deck-card { position: absolute; left: 50%; top: 0; width: 196px; height: 246px; padding: 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08); }
.itsc__deck-card--1 { transform: translateX(calc(-50% - 258px)) translateY(20px) rotate(-9deg); z-index: 1; animation: itscCard1 6s ease-in-out infinite; }
.itsc__deck-card--2 { transform: translateX(calc(-50% - 90px)) translateY(0px) rotate(-3deg); z-index: 2; border-color: rgba(224, 162, 178, .4); box-shadow: 0 26px 54px -18px rgba(140, 42, 67, .55), inset 0 1px 0 rgba(255, 255, 255, .1); animation: itscCard2 6.6s ease-in-out infinite .3s; }
.itsc__deck-card--3 { transform: translateX(calc(-50% + 90px)) translateY(0px) rotate(3deg); z-index: 3; border-color: rgba(224, 162, 178, .4); box-shadow: 0 26px 54px -18px rgba(140, 42, 67, .55), inset 0 1px 0 rgba(255, 255, 255, .1); animation: itscCard3 6.3s ease-in-out infinite .6s; }
.itsc__deck-card--4 { transform: translateX(calc(-50% + 258px)) translateY(20px) rotate(9deg); z-index: 4; animation: itscCard4 6.9s ease-in-out infinite .9s; }
.itsc__deck-num { position: absolute; top: 12px; left: 18px; font-family: var(--itscdisplay); font-size: 54px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .07); }
.itsc__deck-ico { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(140, 42, 67, .22); color: #E0A2B2; font-size: 15px; }
.itsc__deck-card h3 { position: relative; margin: 52px 0 8px; font-family: var(--itscdisplay); font-size: 17px; font-weight: 700; color: #fff; }
.itsc__deck-card p { position: relative; margin: 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--itscmuted); }

.itsc__lattice-rail { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding: 30px 6px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.itsc__lrail-track { position: absolute; left: 6px; right: 6px; top: 34px; height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; }
.itsc__lrail-fill { position: absolute; left: 6px; top: 34px; height: 2px; width: 92%; background: linear-gradient(90deg, rgba(86, 97, 111, .35), var(--itsc-light) 65%, #F3D7DE); border-radius: 2px; }
.itsc__lrail-runner { position: absolute; top: 31px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(224, 162, 178, .85); animation: itscRailRun 5s ease-in-out infinite; }
.itsc__lrail-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--itscmuted); }
.itsc__lrail-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--itscdark2); border: 2px solid rgba(255, 255, 255, .25); }
.itsc__lrail-stop--out { color: #F3D7DE; position: relative; }
.itsc__lrail-stop--out .itsc__lrail-dot { background: var(--itsc-light); border-color: #F3D7DE; box-shadow: 0 0 0 4px rgba(224, 162, 178, .18); }
.itsc__lrail-stop--out::before { content: ""; position: absolute; left: 50%; top: 5px; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(178, 69, 96, .35), transparent 70%); filter: blur(6px); z-index: -1; animation: itscHaloPulse 4.5s ease-in-out infinite; }

.itsc__lattice-loop { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 22px auto 0; padding: 8px 16px; border-radius: 30px; border: 1px dashed rgba(224, 162, 178, .4); color: #E0A2B2; font-size: 12px; font-weight: 500; }
.itsc__lattice-loop i { animation: itscSpin 5s linear infinite; }

@keyframes itscTagFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes itscCard1 { 0%, 100% { transform: translateX(calc(-50% - 258px)) translateY(20px) rotate(-9deg); } 50% { transform: translateX(calc(-50% - 258px)) translateY(10px) rotate(-9deg); } }
@keyframes itscCard2 { 0%, 100% { transform: translateX(calc(-50% - 90px)) translateY(0px) rotate(-3deg); } 50% { transform: translateX(calc(-50% - 90px)) translateY(-9px) rotate(-3deg); } }
@keyframes itscCard3 { 0%, 100% { transform: translateX(calc(-50% + 90px)) translateY(0px) rotate(3deg); } 50% { transform: translateX(calc(-50% + 90px)) translateY(-9px) rotate(3deg); } }
@keyframes itscCard4 { 0%, 100% { transform: translateX(calc(-50% + 258px)) translateY(20px) rotate(9deg); } 50% { transform: translateX(calc(-50% + 258px)) translateY(10px) rotate(9deg); } }
@keyframes itscHaloPulse { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes itscRailRun { 0% { left: 0%; opacity: 0; } 8% { opacity: 1; } 92% { left: 96%; opacity: 1; } 100% { left: 96%; opacity: 0; } }

/* Mobile fallback: the fanned deck and scattered tag cloud don't
   survive a narrow viewport legibly, so under 992px they're
   replaced by the same content as a simple stacked list. */
.itsc__lattice-fallback { display: none; flex-direction: column; gap: 22px; }
.itsc__lattice-fallback .itsc__lfb-group { display: flex; flex-direction: column; gap: 8px; }
.itsc__lattice-col-label { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--itscmuted); margin-bottom: 2px; }
.itsc__ldot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; }
.itsc__ldot--priority { background: var(--itsc2); box-shadow: 0 0 0 3px rgba(86, 97, 111, .25); }
.itsc__ldot--domain { background: var(--itsc-light); box-shadow: 0 0 0 3px rgba(224, 162, 178, .28); }
.itsc__lfb-group .itsc__tag { position: static; align-self: flex-start; animation: none; }
.itsc__lattice-fallback .itsc__lfb-group--gates { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.itsc__lfb-group--gates .itsc__lattice-col-label { width: 100%; }
.itsc__lfb-gate { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 30px; background: linear-gradient(135deg, var(--itsc-light), var(--itsc) 70%); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 10px 22px -12px rgba(140, 42, 67, .7); }
.itsc__lfb-gate em { font-style: normal; font-family: var(--itscdisplay); font-size: 9.5px; font-weight: 800; color: rgba(255, 255, 255, .7); }

.itsc__hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 80px auto 0; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, .1); }
.itsc__hero-pillar { display: flex; flex-direction: column; gap: 8px; }
.itsc__hero-pillar strong { font-family: var(--itscdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.itsc__hero-pillar span { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--itscmuted); }

@keyframes itscSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- 02. Positioning: intro split + not-this/this comparison ---------- */
.itsc__intro { padding: 120px 0; background: #fff; }
.itsc__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; margin-bottom: 90px; }
.itsc__intro-figure { position: relative; }
.itsc__intro-figure img { width: 100%; border-radius: 16px; display: block; }
.itsc__intro-quote { position: relative; margin: -50px 24px 0; padding: 26px 28px; border-radius: 12px; background: var(--itscdark); box-shadow: 0 20px 44px -18px rgba(15, 17, 22, .5); }
.itsc__intro-quote p { margin: 0; font-family: var(--itscdisplay); font-size: 16.5px; font-weight: 600; line-height: 1.55; color: #fff; }
.itsc__intro-quote::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--itscdisplay); font-size: 60px; font-weight: 700; color: var(--itsc); line-height: 1; }

.itsc__compare { max-width: 1000px; margin: 0 auto; padding: 46px 50px; border-radius: 18px; background: var(--itscbg); border: 1px solid var(--itscb); }
.itsc__compare-head { text-align: center; margin-bottom: 34px; }
.itsc__compare-title { font-family: var(--itscdisplay); font-size: 24px; font-weight: 700; color: var(--itsch); margin: 0; }
.itsc__compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.itsc__compare-col { padding: 26px 28px; border-radius: 14px; }
.itsc__compare-col--not { background: #fff; border: 1px solid var(--itscb); }
.itsc__compare-col--this { background: var(--itscdark); }
.itsc__compare-label { display: inline-block; margin-bottom: 16px; font-family: var(--itscdisplay); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--itsc2); }
.itsc__compare-col--this .itsc__compare-label { color: #E0A2B2; }
.itsc__compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.itsc__compare-col li { position: relative; padding-left: 20px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--itsct); }
.itsc__compare-col--not li::before { content: "\2715"; position: absolute; left: 0; top: 0; font-size: 11px; color: #B7BCC4; }
.itsc__compare-col--this li { color: #D9DBE0; }
.itsc__compare-col--this li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-size: 11px; color: #E0A2B2; }

/* ---------- 03. Triggers: bento signal grid ---------- */
.itsc__triggers { padding: 120px 0; }
.itsc__trig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.itsc__trig-tile { padding: 30px 28px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .3s ease, transform .3s ease; }
.itsc__trig-tile:hover { border-color: rgba(224, 162, 178, .4); transform: translateY(-4px); }
.itsc__trig-tile--lg { grid-column: span 1; }
.itsc__trig-tile h3 { font-family: var(--itscdisplay); font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.itsc__trig-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--itscmuted); margin: 0; }

/* ---------- 04. Business direction -> technology decisions: coordination matrix ---------- */
.itsc__coord { padding: 120px 0; background: var(--itscbg); }
.itsc__coord-table-wrap { max-width: 980px; margin: 0 auto; overflow-x: auto; border-radius: 16px; border: 1px solid var(--itscb); background: #fff; }
.itsc__coord-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.itsc__coord-table th, .itsc__coord-table td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--itscb); }
.itsc__coord-table thead th { font-family: var(--itscdisplay); font-size: 12.5px; font-weight: 700; color: var(--itsch); background: var(--itscbg); }
.itsc__coord-th-domain, .itsc__coord-table td:first-child, .itsc__coord-table th[scope="row"] { text-align: left; }
.itsc__coord-table th[scope="row"] { font-family: var(--itscdisplay); font-size: 13.5px; font-weight: 600; color: var(--itsch); white-space: nowrap; }
.itsc__coord-table tbody tr:last-child th, .itsc__coord-table tbody tr:last-child td { border-bottom: none; }
.itsc__dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--itscb); }
.itsc__dot--on { background: var(--itsc); box-shadow: 0 0 0 4px rgba(140, 42, 67, .12); }
.itsc__coord-note { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--itsct); }

/* ---------- 05. Current-state assessment: numbered lens grid ---------- */
.itsc__assess { padding: 120px 0; background: #fff; }
.itsc__assess-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.itsc__lens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; }
.itsc__lens-card { position: relative; padding: 30px 24px 26px; border-radius: 14px; background: var(--itscbg); border: 1px solid var(--itscb); overflow: hidden; transition: border-color .3s ease, transform .3s ease; }
.itsc__lens-card:hover { border-color: var(--itsc); transform: translateY(-4px); }
.itsc__lens-num { display: block; font-family: var(--itscdisplay); font-size: 34px; font-weight: 800; color: var(--itscb); margin-bottom: 4px; }
.itsc__lens-card h3 { font-family: var(--itscdisplay); font-size: 15.5px; font-weight: 700; color: var(--itsch); margin: 0 0 10px; }
.itsc__lens-card p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--itsct); margin: 0; }

/* ---------- 06. Portfolio strategy: strategic-importance / condition quadrant ---------- */
.itsc__portfolio { padding: 120px 0; }
.itsc__portfolio-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.itsc__quad { position: relative; padding: 20px 20px 44px 56px; }
.itsc__quad-axis { position: absolute; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--itscmuted); }
.itsc__quad-axis--y { left: 0; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; white-space: nowrap; }
.itsc__quad-axis--x { left: 56px; right: 20px; bottom: 10px; text-align: center; }
.itsc__quad-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1; }
.itsc__quad-cell { padding: 22px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; justify-content: center; }
.itsc__quad-cell--tl { border-color: rgba(224, 162, 178, .35); background: rgba(140, 42, 67, .14); }
.itsc__quad-cell--tr { border-color: rgba(224, 162, 178, .5); background: rgba(140, 42, 67, .24); }
.itsc__quad-cell h4 { font-family: var(--itscdisplay); font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.itsc__quad-cell p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--itscmuted); margin: 0; }

/* ---------- 07. Investment prioritization: dimension cards ---------- */
.itsc__prior { padding: 120px 0; background: var(--itscbg); }
.itsc__dim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
.itsc__dim-card { position: relative; padding: 28px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--itscb); overflow: hidden; }
.itsc__dim-card--wide { grid-column: 1 / -1; }
.itsc__dim-card--wide p { max-width: 640px; }
.itsc__dim-num { position: absolute; top: 14px; right: 18px; font-family: var(--itscdisplay); font-size: 30px; font-weight: 800; color: var(--itscbg); }
.itsc__dim-card h3 { position: relative; font-family: var(--itscdisplay); font-size: 15.5px; font-weight: 700; color: var(--itsch); margin: 0 0 10px; }
.itsc__dim-card p { position: relative; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--itsct); margin: 0; }

/* ---------- 08. Architecture direction, narrower than Enterprise Architecture ---------- */
.itsc__arch { padding: 120px 0; background: #fff; }
.itsc__arch-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.itsc__arch-figure img { width: 100%; border-radius: 16px; display: block; }
.itsc__arch-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--itscb); }
.itsc__arch-split-label { display: block; margin-bottom: 12px; font-family: var(--itscdisplay); font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--itsc); }
.itsc__arch-split-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.itsc__arch-split-col li { position: relative; padding-left: 16px; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--itsct); }
.itsc__arch-split-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--itsc); }

/* ---------- 09. Roadmaps & sequencing: dependency chains ---------- */
.itsc__seq { padding: 120px 0; }
.itsc__chain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.itsc__chain-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.itsc__chain-a, .itsc__chain-b { font-family: var(--itscdisplay); font-size: 14px; font-weight: 700; color: #fff; }
.itsc__chain-b { color: #F3D7DE; text-align: right; }
.itsc__chain-req { flex-shrink: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--itscmuted); }
.itsc__chain-req::before { content: "\2192"; display: block; text-align: center; font-size: 13px; color: #E0A2B2; margin-bottom: 2px; }
.itsc__seq-note { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--itscmuted); }

/* ---------- 10. IT operating model & governance: decision-rights ledger ---------- */
.itsc__gov { padding: 120px 0; background: var(--itscbg); }
.itsc__gov-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.itsc__gov-list { display: flex; flex-direction: column; gap: 12px; }
.itsc__gov-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: 10px; background: #fff; border: 1px solid var(--itscb); }
.itsc__gov-row i { flex-shrink: 0; margin-top: 3px; color: var(--itsc); font-size: 13px; }
.itsc__gov-row span { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--itsch); }

/* ---------- 11. What good looks like: outcome ledger ---------- */
.itsc__good { padding: 120px 0; background: #fff; }
.itsc__good-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; }
.itsc__good-row { display: flex; align-items: flex-start; gap: 20px; padding: 24px 4px; border-bottom: 1px solid var(--itscb); }
.itsc__good-row:first-child { padding-top: 0; }
.itsc__good-row:last-child { border-bottom: none; padding-bottom: 0; }
.itsc__good-check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(140, 42, 67, .09); color: var(--itsc); font-size: 13px; margin-top: 2px; }
.itsc__good-row h3 { font-family: var(--itscdisplay); font-size: 16px; font-weight: 700; color: var(--itsch); margin: 0 0 6px; }
.itsc__good-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--itsct); margin: 0; }

/* ---------- 12. Connected practice: parent + sibling links ---------- */
.itsc__connected { padding: 110px 0; }
.itsc__connected-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.itsc__connected-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- 13. FAQ ---------- */
.itsc__faq { padding: 120px 0; background: var(--itscbg); }
.itsc__faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.itsc__faq-item { border-radius: 12px; border: 1px solid var(--itscb); overflow: hidden; }
.itsc__faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: #fff; border: none; text-align: left; font-family: var(--itscdisplay); font-size: 15.5px; font-weight: 600; color: var(--itsch); cursor: pointer; }
.itsc__faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--itscbg); color: var(--itsc); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.itsc__faq-item.is-open .itsc__faq-q { background: var(--itsc); color: #fff; }
.itsc__faq-item.is-open .itsc__faq-icon { background: #fff; color: var(--itsc); transform: rotate(45deg); }
.itsc__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.itsc__faq-item.is-open .itsc__faq-a { max-height: 240px; }
.itsc__faq-a p { margin: 0; padding: 22px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--itsct); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .itsc__hero-title { font-size: 39px; }
  .itsc__trig-grid { grid-template-columns: repeat(2, 1fr); }
  .itsc__lens-grid { grid-template-columns: repeat(2, 1fr); }
  .itsc__dim-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .itsc__hero { padding: 160px 0 90px; }
  .itsc__hero-title { font-size: 31px; }
  .itsc__hero-pillars { grid-template-columns: 1fr; gap: 26px; }

  .itsc__lattice { padding: 30px 20px 26px; }
  .itsc__lattice-tag { display: none; }
  .itsc__deck-tags, .itsc__deck-cards { display: none; }
  .itsc__lattice-fallback { display: flex !important; }

  .itsc__intro-grid, .itsc__portfolio-grid, .itsc__arch-grid, .itsc__gov-grid { grid-template-columns: 1fr; gap: 40px; }
  .itsc__intro-quote { margin: -30px 16px 0; }
  .itsc__compare { padding: 32px 24px; }
  .itsc__compare-grid { grid-template-columns: 1fr; gap: 20px; }

  .itsc__trig-grid { grid-template-columns: 1fr; }
  .itsc__lens-grid { grid-template-columns: 1fr 1fr; }
  .itsc__dim-grid { grid-template-columns: 1fr 1fr; }
  .itsc__chain-grid { grid-template-columns: 1fr; }
  .itsc__arch-split { grid-template-columns: 1fr; gap: 18px; }
  .itsc__quad { padding-left: 20px; }
  .itsc__quad-axis--y { display: none; }
}

@media (max-width: 767px) {
  .itsc__intro, .itsc__triggers, .itsc__coord, .itsc__assess, .itsc__portfolio, .itsc__prior, .itsc__arch, .itsc__seq, .itsc__gov, .itsc__good, .itsc__connected, .itsc__faq { padding-top: 80px; padding-bottom: 80px; }
  .itsc__hero-title { font-size: 25px; }
  .itsc__hero-lead { font-size: 16.5px; }
  .itsc__title { font-size: 26px; }
  .itsc__lens-grid, .itsc__dim-grid { grid-template-columns: 1fr; }
  .itsc__coord-table { min-width: 560px; }
  .itsc__good-row { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .itsc__page * { transition-duration: .01ms !important; }
  .itsc__lattice-loop i,
  .itsc__tag--f1, .itsc__tag--f2, .itsc__tag--f3, .itsc__tag--f4,
  .itsc__deck-card--1, .itsc__deck-card--2, .itsc__deck-card--3, .itsc__deck-card--4,
  .itsc__lrail-runner,
  .itsc__lrail-stop--out::before { animation: none; }
  .itsc__lrail-runner { opacity: 0; }
}

/* ============================================================
   DIGITAL TRANSFORMATION CONSULTING PAGE (dtc__*)
   Scoped entirely to .dtc__page (added on <main> of
   digital-transformation-consulting.html). Child of the
   Technology Consulting practice - shares its graphite/steel +
   garnet colour family and type stack for family resemblance,
   but uses its own compositions throughout: a radial
   "transformation web" in the hero (coordinated dimensions
   meshed around an operating-model hub, with fragmented signals
   left outside the mesh), a chain-plus-wheel coherence diagram,
   a diagnostic accordion paired with decision outcomes, a
   workstream-by-horizon roadmap matrix and a three-way practice
   comparison - none of which reuse the parent's blueprint-band
   composition or the sibling IT Strategy page's two-column
   lattice.
   ============================================================ */
.dtc__page {
  --dtc: #8C2A43;
  --dtc-light: #B24560;
  --dtc2: #56616F;
  --dtch: #14161D;
  --dtct: #565C66;
  --dtcb: #E2E4E8;
  --dtcbg: #F5F6F8;
  --dtcdark: #0F1116;
  --dtcdark2: #181B22;
  --dtcmuted: #A9AEB8;
  --dtcdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.dtc__page .dtc__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--dtc); margin-bottom: 16px; }
.dtc__page .dtc__title { font-family: var(--dtcdisplay); font-size: 36px; line-height: 1.26; font-weight: 700; letter-spacing: -.5px; color: var(--dtch); margin: 0 0 20px; }
.dtc__page .dtc__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dtch); margin: 0 0 18px; }
.dtc__page .dtc__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dtct); margin: 0 0 16px; }
.dtc__page .dtc__text:last-child { margin-bottom: 0; }
.dtc__page .dtc__text a { color: var(--dtc); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.dtc__page .dtc__head { max-width: 800px; }
.dtc__page .dtc__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.dtc__page .dtc__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--dtcdark) 0%, var(--dtcdark2) 100%); }
.dtc__page .dtc__dark > .container { position: relative; z-index: 2; }
.dtc__page .dtc__dark .dtc__eyebrow { color: #D08298; }
.dtc__page .dtc__dark .dtc__title { color: #fff; }
.dtc__page .dtc__dark .dtc__text { color: var(--dtcmuted); }

.dtc__page .dtc__btn,
.dtc__page .dtc__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dtc__page .dtc__btn { color: #fff; background: var(--dtc); border: 2px solid var(--dtc); }
.dtc__page .dtc__btn:hover { background: var(--dtc-light); border-color: var(--dtc-light); color: #fff; }
.dtc__page .dtc__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.dtc__page .dtc__btn-ghost:hover { background: #fff; color: var(--dtcdark); border-color: #fff; }

.dtc__page .dtc__link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--dtc); transition: gap .3s ease, color .3s ease; }
.dtc__page .dtc__link:hover { gap: 15px; color: var(--dtc-light); }

.dtc__page .dtc__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(140, 42, 67, .09); color: var(--dtc); font-size: 20px; margin-bottom: 18px; }
.dtc__page .dtc__dark .dtc__ico { background: rgba(140, 42, 67, .22); color: #E0A2B2; }

.dtc__page .dtc__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); color: #E7E8EB; font-size: 13.5px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.dtc__page .dtc__chip--link:hover { background: var(--dtc); border-color: var(--dtc); color: #fff; }
.dtc__page .dtc__chip--parent { background: rgba(140, 42, 67, .22); border-color: rgba(224, 162, 178, .38); color: #F3D7DE; font-weight: 700; gap: 10px; }
.dtc__page .dtc__chip--parent:hover { background: var(--dtc); border-color: var(--dtc); color: #fff; }

/* ---------- 01. Hero: the transformation web ---------- */
.dtc__hero { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--dtcdark) 0%, var(--dtcdark2) 100%); padding: 190px 0 110px; }
.dtc__hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .55; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 78% 58% at 50% 18%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 78% 58% at 50% 18%, #000 30%, transparent 78%); }
.dtc__hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.dtc__hero-glow--1 { width: 500px; height: 500px; left: -150px; top: -110px; background: radial-gradient(circle, rgba(140, 42, 67, .35), transparent 70%); }
.dtc__hero-glow--2 { width: 460px; height: 460px; right: -140px; bottom: -150px; background: radial-gradient(circle, rgba(86, 97, 111, .3), transparent 70%); }
.dtc__hero .container { position: relative; z-index: 2; }

.dtc__hero-top { max-width: 900px; margin: 0 auto; text-align: center; }
.dtc__hero-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--dtcmuted); margin-bottom: 22px; }
.dtc__hero-crumb a { color: var(--dtcmuted); transition: color .3s ease; }
.dtc__hero-crumb a:hover { color: #fff; }
.dtc__hero-crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.dtc__hero-crumb span { color: #E0A2B2; }

.dtc__hero-title { font-family: var(--dtcdisplay); font-size: 45px; line-height: 1.25; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.dtc__hero-title em { font-style: normal; color: #E0A2B2; }
.dtc__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: var(--dtcmuted); max-width: 740px; margin: 0 auto 34px; }
.dtc__hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* Two currents, one anchor: not a diagram at all - two rows of
   large outlined type carrying the six workstream names, each
   row scrolling continuously in an opposing direction (an
   editorial marquee, not a node/line/wave explainer), meeting
   behind a single solid, glowing "Coordinated Transformation"
   badge fixed at the centre. The badge is the only static,
   filled-in element on the page's darkest surface - everything
   else keeps moving around it. */
.dtc__marquee { position: relative; width: 100%; max-width: 1080px; margin: 78px auto 0; padding: 46px 0; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); overflow: hidden; }
.dtc__marquee-tag { display: block; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dtcmuted); margin-bottom: 34px; padding: 0 40px; }

.dtc__marquee-stage { position: relative; }
.dtc__marquee-line { display: flex; align-items: center; width: max-content; white-space: nowrap; }
.dtc__marquee-set { display: flex; align-items: center; flex-shrink: 0; }
.dtc__marquee-line--a { animation: dtcMarqueeLeft 30s linear infinite; }
.dtc__marquee-line--b { animation: dtcMarqueeRight 30s linear infinite; margin-top: 4px; }

.dtc__marquee-word { flex-shrink: 0; font-family: var(--dtcdisplay); font-size: 44px; font-weight: 800; letter-spacing: -.5px; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.3px rgba(255, 255, 255, .3); padding: 0 24px; line-height: 1.2; }
.dtc__marquee-line--b .dtc__marquee-word { font-size: 32px; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); }
.dtc__marquee-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: rgba(224, 162, 178, .55); }

.dtc__marquee-anchor { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 230px; padding: 22px 18px; border-radius: 16px; text-align: center; background: linear-gradient(145deg, var(--dtc-light), var(--dtc) 70%); box-shadow: 0 22px 44px -18px rgba(140, 42, 67, .8), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
.dtc__marquee-anchor i { font-size: 16px; color: #fff; }
.dtc__marquee-anchor strong { font-family: var(--dtcdisplay); font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.dtc__marquee-anchor em { font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: .3px; color: rgba(255, 255, 255, .78); }

@keyframes dtcMarqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dtcMarqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.dtc__hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 78px auto 0; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, .1); }
.dtc__hero-pillar { display: flex; flex-direction: column; gap: 8px; }
.dtc__hero-pillar strong { font-family: var(--dtcdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.dtc__hero-pillar span { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dtcmuted); }

/* ---------- 02. Positioning + the shift this practice makes ---------- */
.dtc__intro { padding: 120px 0; background: #fff; }
.dtc__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.dtc__intro-figure { position: relative; }
.dtc__intro-figure img { width: 100%; min-height: 320px; border-radius: 16px; display: block; background: linear-gradient(145deg, var(--dtcbg), #fff); border: 1px dashed var(--dtcb); color: transparent; }
.dtc__intro-quote { position: relative; margin: -50px 24px 0; padding: 26px 28px; border-radius: 12px; background: var(--dtcdark); box-shadow: 0 20px 44px -18px rgba(15, 17, 22, .5); }
.dtc__intro-quote p { margin: 0; font-family: var(--dtcdisplay); font-size: 16.5px; font-weight: 600; line-height: 1.55; color: #fff; }
.dtc__intro-quote::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--dtcdisplay); font-size: 60px; font-weight: 700; color: var(--dtc); line-height: 1; }

.dtc__shift { max-width: 960px; margin: 100px auto 0; padding: 44px 48px; border-radius: 18px; background: linear-gradient(175deg, var(--dtcdark) 0%, var(--dtcdark2) 100%); }
.dtc__shift-head { max-width: 640px; margin: 0 auto; text-align: center; }
.dtc__shift-head .dtc__eyebrow { color: #D08298; }
.dtc__shift-head h3 { font-family: var(--dtcdisplay); font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.dtc__shift-head p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--dtcmuted); margin: 0; }
.dtc__shift-list { display: flex; flex-direction: column; margin-top: 32px; }
.dtc__shift-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dtc__shift-row:last-child { border-bottom: none; }
.dtc__shift-from { font-size: 13.5px; font-weight: 400; color: var(--dtcmuted); text-align: right; }
.dtc__shift-arrow { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(224, 162, 178, .14); color: #E0A2B2; font-size: 11px; }
.dtc__shift-to { font-size: 14px; font-weight: 600; color: #fff; }

/* ---------- 03. Transformation starts with the business: chain + coherence wheel ---------- */
.dtc__core { padding: 120px 0; }
.dtc__core-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }

.dtc__chain-steps { position: relative; padding-left: 34px; }
.dtc__chain-steps::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, rgba(224, 162, 178, .55), rgba(224, 162, 178, .08)); }
.dtc__chain-step { position: relative; padding-bottom: 28px; }
.dtc__chain-step:last-child { padding-bottom: 0; }
.dtc__chain-step::before { content: ""; position: absolute; left: -34px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--dtcdark2); border: 2px solid rgba(255, 255, 255, .25); }
.dtc__chain-step--out::before { background: var(--dtc-light); border-color: #F3D7DE; }
.dtc__chain-step h4 { font-family: var(--dtcdisplay); font-size: 14.5px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.dtc__chain-step--out h4 { color: #F3D7DE; }
.dtc__chain-step p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--dtcmuted); margin: 0; }

.dtc__wheel-wrap { display: flex; flex-direction: column; align-items: center; }
.dtc__wheel { position: relative; width: 400px; height: 400px; max-width: 100%; }
.dtc__wheel::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(224, 162, 178, .28); }
.dtc__wheel-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, var(--dtc-light), var(--dtc) 70%); color: #fff; box-shadow: 0 16px 34px -14px rgba(140, 42, 67, .75); z-index: 2; }
.dtc__wheel-hub i { font-size: 16px; margin-bottom: 6px; }
.dtc__wheel-hub strong { display: block; font-family: var(--dtcdisplay); font-size: 13px; font-weight: 700; line-height: 1.25; }
.dtc__wheel-hub small { display: block; font-size: 9px; font-weight: 500; color: rgba(255, 255, 255, .78); margin-top: 4px; line-height: 1.3; }
.dtc__wheel-spoke { position: absolute; top: 50%; left: 50%; width: 132px; height: 1px; background: linear-gradient(90deg, rgba(224, 162, 178, .55), rgba(255, 255, 255, .04)); transform-origin: 0 50%; transform: rotate(var(--a)); z-index: 0; }
.dtc__wheel-node { position: absolute; top: 50%; left: 50%; width: 112px; transform: translate(-50%, -50%) rotate(var(--a)) translate(132px) rotate(calc(-1 * var(--a))); padding: 10px 12px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); color: #D9DBE0; font-size: 11.5px; font-weight: 600; line-height: 1.3; text-align: center; z-index: 1; }

.dtc__wheel-fallback { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; margin: 0 auto; }

/* ---------- 04. Current-state transformation assessment: bento lens grid ---------- */
.dtc__assess { padding: 120px 0; background: var(--dtcbg); }
.dtc__assess-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.dtc__assess-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1140px; margin: 0 auto; }
.dtc__assess-tile { padding: 28px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--dtcb); transition: border-color .3s ease, transform .3s ease; }
.dtc__assess-tile:hover { border-color: var(--dtc); transform: translateY(-4px); }
.dtc__assess-tile h3 { font-family: var(--dtcdisplay); font-size: 15px; font-weight: 700; color: var(--dtch); margin: 0 0 10px; }
.dtc__assess-tile p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dtct); margin: 0; }
.dtc__assess-tile--wide { grid-column: span 2; background: var(--dtcdark); border-color: transparent; display: flex; flex-direction: column; justify-content: center; }
.dtc__assess-tile--wide .dtc__ico { background: rgba(224, 162, 178, .16); color: #E0A2B2; }
.dtc__assess-tile--wide h3 { color: #fff; }
.dtc__assess-tile--wide p { color: var(--dtcmuted); }

/* ---------- 05. Process redesign before automation: diagnostic + decisions ---------- */
.dtc__redesign { padding: 120px 0; background: #fff; }
.dtc__redesign-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }

.dtc__diag-list { display: flex; flex-direction: column; gap: 10px; }
.dtc__diag-item { border-radius: 12px; border: 1px solid var(--dtcb); overflow: hidden; }
.dtc__diag-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: var(--dtcbg); border: none; text-align: left; font-family: var(--dtcdisplay); font-size: 14px; font-weight: 600; color: var(--dtch); cursor: pointer; }
.dtc__diag-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--dtc); font-size: 11px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.dtc__diag-item.is-open .dtc__diag-q { background: var(--dtc); color: #fff; }
.dtc__diag-item.is-open .dtc__diag-icon { background: #fff; color: var(--dtc); transform: rotate(45deg); }
.dtc__diag-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.dtc__diag-item.is-open .dtc__diag-a { max-height: 200px; }
.dtc__diag-a p { margin: 0; padding: 16px 20px; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dtct); }

.dtc__decide { padding: 32px 30px; border-radius: 16px; background: var(--dtcbg); border: 1px solid var(--dtcb); }
.dtc__decide-head { margin-bottom: 22px; }
.dtc__decide-head span.dtc__eyebrow { margin-bottom: 8px; }
.dtc__decide-head h3 { font-family: var(--dtcdisplay); font-size: 18px; font-weight: 700; color: var(--dtch); margin: 0; }
.dtc__decide-list { display: flex; flex-direction: column; gap: 12px; }
.dtc__decide-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--dtcb); }
.dtc__decide-row i { flex-shrink: 0; margin-top: 3px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(140, 42, 67, .09); color: var(--dtc); font-size: 11px; }
.dtc__decide-row div h4 { font-family: var(--dtcdisplay); font-size: 13.5px; font-weight: 700; color: var(--dtch); margin: 0 0 3px; }
.dtc__decide-row div p { font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--dtct); margin: 0; }

/* ---------- 06. Transformation prioritization & sequencing: dimension ledger ---------- */
.dtc__prior { padding: 120px 0; }
.dtc__prior-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; max-width: 1080px; margin: 0 auto; }
.dtc__prior-row { display: flex; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.dtc__prior-row:nth-last-child(-n+1) { border-bottom: none; }
.dtc__prior-num { flex-shrink: 0; font-family: var(--dtcdisplay); font-size: 26px; font-weight: 800; color: rgba(255, 255, 255, .16); }
.dtc__prior-row h3 { font-family: var(--dtcdisplay); font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.dtc__prior-row p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dtcmuted); margin: 0; }

/* ---------- 07. Digital transformation roadmap: workstream x horizon matrix ---------- */
.dtc__road { padding: 120px 0; background: #fff; }
.dtc__road-matrix-wrap { overflow-x: auto; border-radius: 16px; }
.dtc__road-matrix { display: grid; grid-template-columns: 210px repeat(3, 1fr); gap: 2px; min-width: 860px; background: var(--dtcb); border: 1px solid var(--dtcb); border-radius: 16px; overflow: hidden; }
.dtc__road-cell { background: #fff; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.dtc__road-head { background: var(--dtcdark); color: #fff; align-items: center; text-align: center; justify-content: center; font-family: var(--dtcdisplay); font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.dtc__road-head span { display: block; font-size: 10.5px; font-weight: 500; color: var(--dtcmuted); margin-top: 3px; }
.dtc__road-row-label { background: var(--dtcbg); justify-content: center; }
.dtc__road-row-label strong { font-family: var(--dtcdisplay); font-size: 13.5px; font-weight: 700; color: var(--dtch); }
.dtc__road-row-label span { font-size: 11.5px; font-weight: 400; color: var(--dtct); }
.dtc__road-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 7px; background: var(--dtcbg); border: 1px solid var(--dtcb); color: var(--dtch); font-size: 11.5px; font-weight: 500; line-height: 1.3; width: fit-content; }
.dtc__road-chip--dep { background: rgba(140, 42, 67, .08); border-color: rgba(140, 42, 67, .28); color: var(--dtc); }
.dtc__road-chip--dep i { color: var(--dtc); font-size: 9px; }
.dtc__road-notes { max-width: 880px; margin: 34px auto 0; display: flex; flex-direction: column; gap: 12px; }
.dtc__road-note { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--dtct); }
.dtc__road-note i { flex-shrink: 0; margin-top: 4px; color: var(--dtc); font-size: 11px; }
.dtc__road-note strong { font-weight: 600; color: var(--dtch); }

/* ---------- 08. People, adoption & operating model: bento ---------- */
.dtc__people { padding: 120px 0; background: var(--dtcbg); }
.dtc__people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dtc__people-tile { padding: 30px 26px; border-radius: 14px; background: #fff; border: 1px solid var(--dtcb); }
.dtc__people-tile h3 { font-family: var(--dtcdisplay); font-size: 15.5px; font-weight: 700; color: var(--dtch); margin: 0 0 10px; }
.dtc__people-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dtct); margin: 0; }
.dtc__people-tile--feature { background: var(--dtcdark); border-color: transparent; }
.dtc__people-tile--feature h3 { color: #fff; }
.dtc__people-tile--feature p { color: var(--dtcmuted); }
.dtc__people-tile--feature .dtc__ico { background: rgba(224, 162, 178, .16); color: #E0A2B2; }
.dtc__people-note { max-width: 820px; margin: 30px auto 0; text-align: center; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--dtct); }

/* ---------- 09. AI, data & automation as enablers: paired list ---------- */
.dtc__enable { padding: 120px 0; background: #fff; }
.dtc__enable-list { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.dtc__enable-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 12px; background: var(--dtcbg); border: 1px solid var(--dtcb); }
.dtc__enable-from, .dtc__enable-to { display: flex; align-items: center; gap: 12px; }
.dtc__enable-from i { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(140, 42, 67, .09); color: var(--dtc); font-size: 13px; }
.dtc__enable-from span, .dtc__enable-to span { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--dtch); }
.dtc__enable-to { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.dtc__enable-arrow { flex-shrink: 0; color: var(--dtc); font-size: 13px; }
.dtc__enable-callout { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; max-width: 920px; margin: 30px auto 0; padding: 22px 26px; border-radius: 12px; background: var(--dtcdark); }
.dtc__enable-callout p { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--dtcmuted); }
.dtc__enable-callout p strong { color: #fff; font-weight: 600; }
.dtc__enable-callout .dtc__link { color: #E0A2B2; white-space: nowrap; }
.dtc__enable-callout .dtc__link:hover { color: #fff; }

/* ---------- 10. What good looks like: outcome ledger ---------- */
.dtc__good { padding: 120px 0; background: var(--dtcbg); }
.dtc__good-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; }
.dtc__good-row { display: flex; align-items: flex-start; gap: 20px; padding: 24px 4px; border-bottom: 1px solid var(--dtcb); }
.dtc__good-row:first-child { padding-top: 0; }
.dtc__good-row:last-child { border-bottom: none; padding-bottom: 0; }
.dtc__good-check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(140, 42, 67, .09); color: var(--dtc); font-size: 13px; margin-top: 2px; }
.dtc__good-row h3 { font-family: var(--dtcdisplay); font-size: 16px; font-weight: 700; color: var(--dtch); margin: 0 0 6px; }
.dtc__good-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--dtct); margin: 0; }

/* ---------- 11. Where this fits: three-way practice comparison ---------- */
.dtc__distinct { padding: 120px 0; background: #fff; }
.dtc__distinct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1160px; margin: 0 auto; align-items: stretch; }
.dtc__distinct-col { padding: 32px 26px; border-radius: 16px; border: 1px solid var(--dtcb); background: var(--dtcbg); display: flex; flex-direction: column; }
.dtc__distinct-col--mid { background: var(--dtcdark); border-color: transparent; box-shadow: 0 24px 50px -22px rgba(15, 17, 22, .5); }
.dtc__distinct-label { display: inline-block; margin-bottom: 6px; font-family: var(--dtcdisplay); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dtc2); }
.dtc__distinct-col--mid .dtc__distinct-label { color: #E0A2B2; }
.dtc__distinct-col h3 { font-family: var(--dtcdisplay); font-size: 16.5px; font-weight: 700; color: var(--dtch); margin: 0 0 14px; line-height: 1.35; }
.dtc__distinct-col--mid h3 { color: #fff; }
.dtc__distinct-col p.dtc__distinct-answers { font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--dtct); margin: 0 0 16px; }
.dtc__distinct-col--mid p.dtc__distinct-answers { color: var(--dtcmuted); }
.dtc__distinct-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dtc__distinct-col li { position: relative; padding-left: 16px; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--dtct); }
.dtc__distinct-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--dtc2); }
.dtc__distinct-col--mid li { color: #D9DBE0; }
.dtc__distinct-col--mid li::before { background: var(--dtc-light); }

/* ---------- 12. Connected practice: parent + sibling links ---------- */
.dtc__connected { padding: 110px 0; }
.dtc__connected-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.dtc__connected-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- 13. FAQ ---------- */
.dtc__faq { padding: 120px 0; background: var(--dtcbg); }
.dtc__faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.dtc__faq-item { border-radius: 12px; border: 1px solid var(--dtcb); overflow: hidden; }
.dtc__faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: #fff; border: none; text-align: left; font-family: var(--dtcdisplay); font-size: 15.5px; font-weight: 600; color: var(--dtch); cursor: pointer; }
.dtc__faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dtcbg); color: var(--dtc); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.dtc__faq-item.is-open .dtc__faq-q { background: var(--dtc); color: #fff; }
.dtc__faq-item.is-open .dtc__faq-icon { background: #fff; color: var(--dtc); transform: rotate(45deg); }
.dtc__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.dtc__faq-item.is-open .dtc__faq-a { max-height: 260px; }
.dtc__faq-a p { margin: 0; padding: 22px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--dtct); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .dtc__hero-title { font-size: 38px; }
  .dtc__assess-grid { grid-template-columns: repeat(2, 1fr); }
  .dtc__assess-tile--wide { grid-column: span 2; }
  .dtc__people-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .dtc__hero { padding: 160px 0 90px; }
  .dtc__hero-title { font-size: 30px; }
  .dtc__hero-pillars { grid-template-columns: 1fr; gap: 26px; }

  .dtc__marquee-word { font-size: 32px; padding: 0 18px; }
  .dtc__marquee-line--b .dtc__marquee-word { font-size: 24px; }
  .dtc__marquee-anchor { width: 190px; padding: 18px 14px; }

  .dtc__intro-grid, .dtc__core-grid, .dtc__redesign-grid, .dtc__road-row, .dtc__distinct-grid { grid-template-columns: 1fr; gap: 40px; }
  .dtc__intro-quote { margin: -30px 16px 0; }
  .dtc__shift { padding: 32px 24px; }
  .dtc__shift-row { grid-template-columns: 1fr; text-align: left; gap: 6px; }
  .dtc__shift-from { text-align: left; }
  .dtc__shift-arrow { transform: rotate(90deg); }

  .dtc__wheel { display: none; }
  .dtc__wheel-fallback { display: flex !important; }

  .dtc__assess-grid { grid-template-columns: 1fr 1fr; }
  .dtc__assess-tile--wide { grid-column: span 2; }

  .dtc__redesign-grid { gap: 44px; }

  .dtc__prior-grid { grid-template-columns: 1fr; }

  .dtc__people-grid { grid-template-columns: 1fr; }

  .dtc__enable-row { grid-template-columns: 1fr; gap: 10px; }
  .dtc__enable-to { flex-direction: row; justify-content: flex-start; text-align: left; }
  .dtc__enable-arrow { transform: rotate(90deg); }

  .dtc__distinct-grid { grid-template-columns: 1fr; }
  .dtc__distinct-col--mid { order: -1; }
}

@media (max-width: 767px) {
  .dtc__intro, .dtc__core, .dtc__assess, .dtc__redesign, .dtc__prior, .dtc__road, .dtc__people, .dtc__enable, .dtc__good, .dtc__distinct, .dtc__connected, .dtc__faq { padding-top: 80px; padding-bottom: 80px; }
  .dtc__hero-title { font-size: 24px; }
  .dtc__hero-lead { font-size: 16.5px; }
  .dtc__title { font-size: 26px; }
  .dtc__assess-grid { grid-template-columns: 1fr; }
  .dtc__assess-tile--wide { grid-column: span 1; }
  .dtc__road-matrix { min-width: 620px; }
  .dtc__good-row { flex-direction: column; gap: 12px; }
  .dtc__marquee { padding: 34px 0; }
  .dtc__marquee-word { font-size: 22px; padding: 0 14px; }
  .dtc__marquee-line--b .dtc__marquee-word { font-size: 17px; }
  .dtc__marquee-anchor { width: 158px; padding: 14px 10px; gap: 2px; }
  .dtc__marquee-anchor strong { font-size: 12px; }
  .dtc__marquee-anchor em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dtc__page * { transition-duration: .01ms !important; }
  .dtc__marquee-line--a,
  .dtc__marquee-line--b { animation: none; }
}

/* ============================================================
   AI STRATEGY CONSULTING PAGE (aisc__*)
   Scoped entirely to .aisc__page (added on <main> of
   ai-strategy-consulting.html). Same garnet/graphite palette as
   the rest of the Technology Consulting family (tcon__/itsc__/dtc__),
   with a component set built for this page specifically: an AI
   opportunity-portfolio map, a response fan-out that treats AI as
   one option among several, an autonomy spectrum, decision-lens
   cards, a readiness rail, and a progress-to-stop experimentation
   funnel.
   ============================================================ */
.aisc__page {
  --aisc: #8C2A43;
  --aisc-light: #B24560;
  --aisc2: #56616F;
  --aisch: #14161D;
  --aisct: #565C66;
  --aiscb: #E2E4E8;
  --aiscbg: #F5F6F8;
  --aiscdark: #0F1116;
  --aiscdark2: #181B22;
  --aiscmuted: #A9AEB8;
  --aiscdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.aisc__page .aisc__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--aisc); margin-bottom: 16px; }
.aisc__page .aisc__title { font-family: var(--aiscdisplay); font-size: 36px; line-height: 1.26; font-weight: 700; letter-spacing: -.5px; color: var(--aisch); margin: 0 0 20px; }
.aisc__page .aisc__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--aisch); margin: 0 0 18px; }
.aisc__page .aisc__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--aisct); margin: 0 0 16px; }
.aisc__page .aisc__text:last-child { margin-bottom: 0; }
.aisc__page .aisc__text a { color: var(--aisc); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.aisc__page .aisc__head { max-width: 800px; }
.aisc__page .aisc__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.aisc__page .aisc__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--aiscdark) 0%, var(--aiscdark2) 100%); }
.aisc__page .aisc__dark > .container { position: relative; z-index: 2; }
.aisc__page .aisc__dark .aisc__eyebrow { color: #D08298; }
.aisc__page .aisc__dark .aisc__title { color: #fff; }
.aisc__page .aisc__dark .aisc__text { color: var(--aiscmuted); }
.aisc__page .aisc__dark .aisc__text a { color: #E0A2B2; }

.aisc__page .aisc__btn,
.aisc__page .aisc__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.aisc__page .aisc__btn { color: #fff; background: var(--aisc); border: 2px solid var(--aisc); }
.aisc__page .aisc__btn:hover { background: var(--aisc-light); border-color: var(--aisc-light); color: #fff; }
.aisc__page .aisc__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.aisc__page .aisc__btn-ghost:hover { background: #fff; color: var(--aiscdark); border-color: #fff; }

.aisc__page .aisc__link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--aisc); transition: gap .3s ease, color .3s ease; }
.aisc__page .aisc__link:hover { gap: 15px; color: var(--aisc-light); }

.aisc__page .aisc__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(140, 42, 67, .09); color: var(--aisc); font-size: 20px; margin-bottom: 18px; }
.aisc__page .aisc__dark .aisc__ico { background: rgba(140, 42, 67, .22); color: #E0A2B2; }

.aisc__page .aisc__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(86, 97, 111, .08); border: 1px solid var(--aiscb); color: var(--aisch); font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.aisc__page .aisc__dark .aisc__chip { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }
.aisc__page .aisc__chip--link { text-decoration: none; font-weight: 500; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.aisc__page .aisc__dark .aisc__chip--link:hover { background: var(--aisc); border-color: var(--aisc); color: #fff; }

/* ---------- 01. Hero: the AI opportunity portfolio map ---------- */
.aisc__hero { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--aiscdark) 0%, var(--aiscdark2) 100%); padding: 190px 0 110px; }
.aisc__hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .5; 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: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); }
.aisc__hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.aisc__hero-glow--1 { width: 500px; height: 500px; left: -150px; top: -120px; background: radial-gradient(circle, rgba(140, 42, 67, .35), transparent 70%); }
.aisc__hero-glow--2 { width: 460px; height: 460px; right: -140px; bottom: -150px; background: radial-gradient(circle, rgba(86, 97, 111, .3), transparent 70%); }
.aisc__hero .container { position: relative; z-index: 2; }

.aisc__hero-top { max-width: 900px; margin: 0 auto; text-align: center; }
.aisc__hero-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--aiscmuted); margin-bottom: 22px; }
.aisc__hero-crumb a { color: var(--aiscmuted); transition: color .3s ease; }
.aisc__hero-crumb a:hover { color: #fff; }
.aisc__hero-crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.aisc__hero-crumb span { color: #E0A2B2; }

.aisc__hero-title { font-family: var(--aiscdisplay); font-size: 45px; line-height: 1.24; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.aisc__hero-title em { font-style: normal; color: #E0A2B2; }
.aisc__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: var(--aiscmuted); max-width: 740px; margin: 0 auto 34px; }
.aisc__hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

.aisc__map { position: relative; width: 100%; max-width: 900px; margin: 66px auto 0; padding: 34px 30px 26px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); overflow: hidden; }
.aisc__map::before { content: ""; position: absolute; top: -140px; left: 50%; width: 480px; height: 480px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(178, 69, 96, .14), transparent 70%); pointer-events: none; z-index: 0; filter: blur(20px); }
.aisc__map > * { position: relative; z-index: 1; }
.aisc__map-tag { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--aiscmuted); margin-bottom: 8px; }
.aisc__map-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aisc-light); box-shadow: 0 0 6px 1px rgba(224, 162, 178, .7); animation: aiscDotPulse 1.8s ease-in-out infinite; }

/* ---- Radar stage: a rotating-sweep opportunity radar, not a chart ---- */
.aisc__radar { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 26px auto 54px; }
.aisc__radar-scope { position: absolute; inset: 15%; border-radius: 50%; }
.aisc__radar-wash { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg at 50% 50%, rgba(178, 69, 96, .16) 0deg 90deg, rgba(86, 97, 111, .11) 90deg 180deg, rgba(255, 255, 255, .02) 180deg 270deg, rgba(140, 42, 67, .13) 270deg 360deg); pointer-events: none; }
.aisc__radar-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .13); pointer-events: none; }
.aisc__radar-ring--1 { inset: 22%; }
.aisc__radar-ring--2 { inset: 10%; }
.aisc__radar-ring--3 { inset: 0; border-style: solid; border-color: rgba(255, 255, 255, .16); }
.aisc__radar-cross { position: absolute; background: rgba(255, 255, 255, .08); pointer-events: none; }
.aisc__radar-cross--h { left: 0; right: 0; top: 50%; height: 1px; }
.aisc__radar-cross--v { top: 0; bottom: 0; left: 50%; width: 1px; }
.aisc__radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(224, 162, 178, .4), rgba(224, 162, 178, 0) 28deg, transparent 360deg); transform-origin: 50% 50%; animation: aiscSweep 9s linear infinite; pointer-events: none; opacity: .85; }

.aisc__radar-hub { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); z-index: 3; }
.aisc__radar-hub-dot { position: absolute; inset: 0; border-radius: 50%; background: var(--aisc-light); box-shadow: 0 0 14px 2px rgba(224, 162, 178, .75); }
.aisc__radar-hub-ping { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(224, 162, 178, .6); animation: aiscPing 2.6s ease-out infinite; }
.aisc__radar-hub-ping--2 { animation-delay: 1.3s; }

.aisc__blip { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 10px; border-radius: 30px; font-size: 11.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; backdrop-filter: blur(6px); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .6); border: 1px solid transparent; z-index: 2; animation: aiscFloat 5s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform .25s ease, box-shadow .25s ease; }
.aisc__blip::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px 1px currentColor; }
.aisc__blip--lg { font-size: 12.5px; font-weight: 600; padding: 10px 18px 10px 12px; }
.aisc__blip:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 4; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7); }
.aisc__blip--scale { background: linear-gradient(145deg, rgba(178, 69, 96, .4), rgba(178, 69, 96, .16)); border-color: rgba(224, 162, 178, .5); color: #F8E4EA; }
.aisc__blip--validate { background: linear-gradient(145deg, rgba(140, 42, 67, .32), rgba(140, 42, 67, .12)); border-color: rgba(224, 162, 178, .32); border-style: dashed; color: #E7C3CD; }
.aisc__blip--explore { background: linear-gradient(145deg, rgba(86, 97, 111, .34), rgba(86, 97, 111, .14)); border-color: rgba(197, 202, 209, .32); color: #D9DBE0; }
.aisc__blip--defer { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); border-style: dashed; color: var(--aiscmuted); }

.aisc__radar-zone { position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 4px 2px; font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--aiscmuted); z-index: 2; max-width: 150px; }
.aisc__radar-zone em { font-style: normal; font-family: var(--aiscdisplay); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; margin-bottom: 1px; }
.aisc__radar-zone--scale { top: 0; right: 0; text-align: right; align-items: flex-end; }
.aisc__radar-zone--scale em { color: #F3D7DE; }
.aisc__radar-zone--validate { top: 0; left: 0; }
.aisc__radar-zone--validate em { color: #E0A2B2; }
.aisc__radar-zone--explore { bottom: 0; right: 0; text-align: right; align-items: flex-end; }
.aisc__radar-zone--explore em { color: #C7CCD3; }
.aisc__radar-zone--defer { bottom: 0; left: 0; }
.aisc__radar-zone--defer em { color: var(--aiscmuted); }

.aisc__radar-axis { position: absolute; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--aiscmuted); white-space: nowrap; }
.aisc__radar-axis i { font-size: 9px; }
.aisc__radar-axis--x { left: 50%; bottom: -28px; transform: translateX(-50%); }
.aisc__radar-axis--y { top: 50%; left: -14px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }

@keyframes aiscSweep { to { transform: rotate(360deg); } }
@keyframes aiscPing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(7.5); opacity: 0; } }
@keyframes aiscFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
@keyframes aiscDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* .aisc__node kept for the mobile fallback list only (radar is desktop) */
.aisc__node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 9px 15px; border-radius: 30px; font-size: 11.5px; font-weight: 500; line-height: 1.25; white-space: nowrap; backdrop-filter: blur(6px); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .6); border: 1px solid transparent; transition: transform .3s ease; }
.aisc__node--lg { font-size: 12.5px; font-weight: 600; padding: 11px 19px; }
.aisc__node:hover { transform: translate(-50%, -50%) scale(1.06); }
.aisc__node--scale { background: linear-gradient(145deg, rgba(178, 69, 96, .38), rgba(178, 69, 96, .16)); border-color: rgba(224, 162, 178, .45); color: #F8E4EA; }
.aisc__node--validate { background: linear-gradient(145deg, rgba(140, 42, 67, .3), rgba(140, 42, 67, .12)); border-color: rgba(224, 162, 178, .3); border-style: dashed; color: #E7C3CD; }
.aisc__node--explore { background: linear-gradient(145deg, rgba(86, 97, 111, .32), rgba(86, 97, 111, .14)); border-color: rgba(197, 202, 209, .3); color: #D9DBE0; }
.aisc__node--defer { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); border-style: dashed; color: var(--aiscmuted); }

.aisc__map-fallback { display: none; flex-direction: column; gap: 22px; }
.aisc__map-fb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aisc__map-fb-label { display: flex; align-items: center; width: 100%; font-size: 12px; font-weight: 500; color: var(--aiscmuted); margin-bottom: 2px; }
.aisc__map-fb-label em { font-style: normal; font-family: var(--aiscdisplay); font-weight: 700; margin-right: 8px; }
.aisc__map-fb-label--scale em { color: #F3D7DE; }
.aisc__map-fb-label--validate em { color: #E0A2B2; }
.aisc__map-fb-label--explore em { color: #C7CCD3; }
.aisc__map-fb-label--defer em { color: var(--aiscmuted); }
.aisc__map-fallback .aisc__node { position: static; transform: none; }
.aisc__map-fallback .aisc__node:hover { transform: none; }

.aisc__hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 60px auto 0; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, .1); }
.aisc__hero-pillar { display: flex; flex-direction: column; gap: 8px; }
.aisc__hero-pillar strong { font-family: var(--aiscdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.aisc__hero-pillar span { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--aiscmuted); }

/* ---------- 02. Positioning: what AI strategy actually means ---------- */
.aisc__intro { padding: 120px 0; background: #fff; }
.aisc__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.aisc__intro-note { margin-top: 28px; padding: 18px 20px; border-radius: 10px; background: var(--aiscbg); border-left: 3px solid var(--aisc); font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--aisct); }
.aisc__intro-note a { color: var(--aisc); font-weight: 500; }
.aisc__intro-figure { position: relative; }
.aisc__intro-figure img { width: 100%; border-radius: 16px; display: block; }
.aisc__intro-quote { position: relative; margin: -50px 24px 0; padding: 26px 28px; border-radius: 12px; background: var(--aiscdark); box-shadow: 0 20px 44px -18px rgba(15, 17, 22, .5); }
.aisc__intro-quote p { margin: 0; font-family: var(--aiscdisplay); font-size: 16.5px; font-weight: 600; line-height: 1.55; color: #fff; }
.aisc__intro-quote::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--aiscdisplay); font-size: 60px; font-weight: 700; color: var(--aisc); line-height: 1; }

/* ---------- 03. Strategy before AI selection: response fan-out ---------- */
.aisc__earn { padding: 120px 0; background: var(--aiscbg); }
.aisc__earn-grid { display: grid; grid-template-columns: .8fr auto 1.2fr; gap: 30px; align-items: center; max-width: 1120px; margin: 0 auto; }
.aisc__earn-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--aisc); margin-bottom: 16px; }
.aisc__earn-start { padding: 30px; border-radius: 16px; background: #fff; border: 1px solid var(--aiscb); }
.aisc__earn-obj { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--aiscb); }
.aisc__earn-obj .aisc__ico { margin-bottom: 14px; }
.aisc__earn-obj h3 { font-family: var(--aiscdisplay); font-size: 17px; font-weight: 700; color: var(--aisch); margin: 0 0 8px; }
.aisc__earn-obj p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--aisct); margin: 0; }
.aisc__earn-questions { display: flex; flex-direction: column; gap: 11px; }
.aisc__earn-questions span { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--aisct); }
.aisc__earn-questions i { flex-shrink: 0; margin-top: 2px; color: var(--aisc); font-size: 12px; }
.aisc__earn-arrow { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--aisc); }
.aisc__earn-responses { padding: 30px; border-radius: 16px; background: var(--aiscdark); }
.aisc__earn-responses .aisc__earn-kicker { color: #D08298; }
.aisc__earn-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.aisc__earn-chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); color: #E7E8EB; font-size: 13px; font-weight: 400; }
.aisc__earn-chip--ai { background: rgba(178, 69, 96, .24); border-color: rgba(224, 162, 178, .45); color: #F8E4EA; font-weight: 500; }
.aisc__earn-chip--none { border-style: dashed; color: var(--aiscmuted); }
.aisc__earn-caption { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--aiscmuted); }

/* ---------- 04. Where this conversation usually starts: signal clusters ---------- */
.aisc__signals { padding: 120px 0; }
.aisc__signal-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.aisc__signal-group { padding: 28px 26px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.aisc__signal-group-title { display: flex; align-items: center; gap: 10px; font-family: var(--aiscdisplay); font-size: 15.5px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.aisc__signal-group-title i { color: var(--aisc-light); font-size: 14px; }
.aisc__signal-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- 05. AI opportunity discovery: split with evaluation accordion ---------- */
.aisc__discover { padding: 120px 0; background: #fff; }
.aisc__discover-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: start; }
.aisc__discover-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.aisc__discover-tags span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; background: var(--aiscbg); border: 1px solid var(--aiscb); font-size: 12.5px; font-weight: 400; color: var(--aisct); }
.aisc__discover-tags i { color: var(--aisc); font-size: 12px; }
.aisc__discover-list { display: flex; flex-direction: column; gap: 12px; }
.aisc__discover-item { border-radius: 12px; background: var(--aiscbg); border: 1px solid var(--aiscb); overflow: hidden; }
.aisc__discover-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; text-align: left; font-family: var(--aiscdisplay); font-size: 15px; font-weight: 600; color: var(--aisch); cursor: pointer; }
.aisc__discover-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--aisc); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.aisc__discover-item.is-open .aisc__discover-icon { background: var(--aisc); color: #fff; transform: rotate(45deg); }
.aisc__discover-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.aisc__discover-item.is-open .aisc__discover-a { max-height: 200px; }
.aisc__discover-a p { margin: 0; padding: 0 22px 22px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--aisct); }

/* ---------- 06. Generative AI & AI agents: autonomy spectrum ---------- */
.aisc__genai { padding: 120px 0; background: var(--aiscbg); }
.aisc__spectrum { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1100px; margin: 0 auto; }
.aisc__spectrum-track { position: absolute; left: 4%; right: 4%; top: 15px; height: 3px; background: linear-gradient(90deg, var(--aisc2), var(--aisc-light)); border-radius: 2px; z-index: 0; }
.aisc__spectrum-step { position: relative; z-index: 1; padding: 34px 16px 0; text-align: center; }
.aisc__spectrum-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--aisc); color: var(--aisc); font-family: var(--aiscdisplay); font-size: 12px; font-weight: 700; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.aisc__spectrum-step h3 { font-family: var(--aiscdisplay); font-size: 14.5px; font-weight: 700; color: var(--aisch); margin: 0 0 8px; line-height: 1.3; }
.aisc__spectrum-step p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--aisct); margin: 0; }
.aisc__spectrum-caption { max-width: 560px; margin: 30px auto 0; text-align: center; font-size: 13.5px; font-weight: 300; font-style: italic; color: var(--aisct); }

.aisc__genai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 70px; }
.aisc__genai-col-title { display: flex; align-items: center; gap: 10px; font-family: var(--aiscdisplay); font-size: 16px; font-weight: 700; color: var(--aisch); margin: 0 0 20px; }
.aisc__genai-col-title i { color: var(--aisc); font-size: 15px; }
.aisc__genai-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.aisc__genai-chips span { display: inline-flex; align-items: center; padding: 10px 15px; border-radius: 8px; background: #fff; border: 1px solid var(--aiscb); font-size: 13px; font-weight: 400; color: var(--aisch); }
.aisc__genai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aisc__genai-list li { position: relative; padding-left: 20px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--aisct); }
.aisc__genai-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--aisc); transform: rotate(45deg); }
.aisc__genai-figure { margin-top: 60px; }
.aisc__genai-figure img { width: 100%; border-radius: 16px; display: block; }

/* ---------- 07. AI use-case prioritization: decision-lens grid ---------- */
.aisc__prioritize { padding: 120px 0; background: #fff; }
.aisc__lens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aisc__lens-card { padding: 28px 26px; border-radius: 14px; background: var(--aiscbg); border: 1px solid var(--aiscb); transition: border-color .3s ease, transform .3s ease; }
.aisc__lens-card:hover { border-color: var(--aisc); transform: translateY(-4px); }
.aisc__lens-card--wide { grid-column: span 2; display: flex; align-items: center; gap: 22px; background: linear-gradient(120deg, var(--aiscdark), var(--aiscdark2)); border-color: transparent; }
.aisc__lens-card--wide .aisc__ico { margin: 0; flex-shrink: 0; background: rgba(140, 42, 67, .28); color: #E0A2B2; }
.aisc__lens-card--wide h3 { color: #fff; }
.aisc__lens-card--wide p { color: var(--aiscmuted); }
.aisc__lens-card h3 { font-family: var(--aiscdisplay); font-size: 16px; font-weight: 700; color: var(--aisch); margin: 0 0 8px; }
.aisc__lens-card p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--aisct); margin: 0; }

/* ---------- 08. AI readiness is more than data: interconnected rail ---------- */
.aisc__ready { padding: 120px 0; }
.aisc__ready-rail { position: relative; max-width: 760px; margin: 0 auto; padding-left: 44px; }
.aisc__ready-line { position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, rgba(224, 162, 178, .5), rgba(255, 255, 255, .08)); }
.aisc__ready-row { position: relative; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.aisc__ready-row:last-child { border-bottom: none; }
.aisc__ready-dot { position: absolute; left: -44px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--aiscdark); border: 2px solid var(--aisc-light); }
.aisc__ready-row h3 { font-family: var(--aiscdisplay); font-size: 15.5px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.aisc__ready-row p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--aiscmuted); margin: 0; }

/* ---------- 09. AI architecture direction ---------- */
.aisc__arch { padding: 120px 0; background: var(--aiscbg); }
.aisc__arch-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.aisc__arch-figure img { width: 100%; border-radius: 16px; display: block; }
.aisc__arch-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 20px; }
.aisc__arch-chips span { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--aiscb); font-size: 12.5px; font-weight: 400; color: var(--aisch); }

/* ---------- 10. Build, buy, configure or combine ---------- */
.aisc__bbcc { padding: 120px 0; background: #fff; }
.aisc__bbcc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.aisc__bbcc-card { padding: 28px 24px; border-radius: 14px; background: var(--aiscbg); border: 1px solid var(--aiscb); transition: border-color .3s ease, transform .3s ease; }
.aisc__bbcc-card:hover { border-color: var(--aisc); transform: translateY(-4px); }
.aisc__bbcc-tag { display: inline-block; padding: 5px 14px; border-radius: 20px; background: var(--aisc); color: #fff; font-family: var(--aiscdisplay); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; margin-bottom: 16px; }
.aisc__bbcc-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--aisct); margin: 0 0 16px; }
.aisc__bbcc-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.aisc__bbcc-card li { position: relative; padding-left: 16px; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--aisch); }
.aisc__bbcc-card li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--aisc); }
.aisc__bbcc-note { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: 13.5px; font-weight: 300; font-style: italic; line-height: 1.7; color: var(--aisct); }

/* ---------- 11. AI governance & responsible AI: ledger ---------- */
.aisc__gov { padding: 120px 0; }
.aisc__gov-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: start; }
.aisc__gov-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .1); }
.aisc__gov-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.aisc__gov-dim { font-family: var(--aiscdisplay); font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.aisc__gov-desc { font-size: 13px; font-weight: 300; color: var(--aiscmuted); text-align: right; }

/* ---------- 12. Human judgment & AI decision boundaries ---------- */
.aisc__human { padding: 120px 0; background: #fff; }
.aisc__human-may { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; max-width: 900px; margin: 0 auto 50px; }
.aisc__human-may-label { font-family: var(--aiscdisplay); font-size: 13px; font-weight: 700; color: var(--aisch); margin-right: 4px; }
.aisc__human-may span:not(.aisc__human-may-label) { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 20px; background: var(--aiscbg); border: 1px solid var(--aiscb); font-size: 12.5px; font-weight: 400; color: var(--aisct); }
.aisc__human-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 940px; margin: 0 auto; }
.aisc__human-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border-radius: 12px; background: var(--aiscbg); border: 1px solid var(--aiscb); }
.aisc__human-item i { flex-shrink: 0; margin-top: 2px; color: var(--aisc); font-size: 16px; }
.aisc__human-item p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--aisch); }

/* ---------- 13. AI experimentation without pilot purgatory ---------- */
.aisc__experiment { padding: 120px 0; background: var(--aiscbg); }
.aisc__experiment-qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 26px; max-width: 1040px; margin: 0 auto 60px; }
.aisc__experiment-qs span { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--aisct); }
.aisc__experiment-qs i { flex-shrink: 0; margin-top: 2px; color: var(--aisc); font-size: 12px; }
.aisc__funnel { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 12px; max-width: 1160px; margin: 0 auto; }
.aisc__funnel > i { align-self: center; color: var(--aiscb); font-size: 14px; flex-shrink: 0; }
.aisc__funnel-step { flex: 1 1 150px; padding: 20px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--aiscb); text-align: center; }
.aisc__funnel-step span { display: block; font-family: var(--aiscdisplay); font-size: 14px; font-weight: 700; color: var(--aisch); margin-bottom: 6px; }
.aisc__funnel-step em { display: block; font-style: normal; font-size: 11.5px; font-weight: 300; line-height: 1.4; color: var(--aisct); }
.aisc__funnel-step--go { background: linear-gradient(145deg, rgba(178, 69, 96, .12), rgba(178, 69, 96, .04)); border-color: var(--aisc-light); }
.aisc__funnel-step--go span { color: var(--aisc); }
.aisc__funnel-step--stop { background: transparent; border-style: dashed; }
.aisc__funnel-step--stop span { color: var(--aisct); }
.aisc__funnel-note { max-width: 700px; margin: 30px auto 0; text-align: center; font-size: 13.5px; font-weight: 300; font-style: italic; line-height: 1.7; color: var(--aisct); }

/* ---------- 14. AI strategy roadmap: horizons ---------- */
.aisc__roadmap { padding: 120px 0; background: #fff; }
.aisc__horizon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.aisc__horizon-panel { padding: 28px 24px; border-radius: 16px; background: var(--aiscbg); border: 1px solid var(--aiscb); }
.aisc__horizon-panel--1 { background: #fff; border-color: var(--aisc); box-shadow: 0 24px 50px -26px rgba(140, 42, 67, .3); }
.aisc__horizon-label { display: inline-block; padding: 5px 14px; border-radius: 20px; background: var(--aisc); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 16px; }
.aisc__horizon-panel--4 .aisc__horizon-label { background: var(--aisc2); }
.aisc__horizon-panel h3 { font-family: var(--aiscdisplay); font-size: 15px; font-weight: 700; color: var(--aisch); line-height: 1.4; margin: 0 0 16px; }
.aisc__horizon-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aisc__horizon-panel li { position: relative; padding-left: 16px; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--aisct); }
.aisc__horizon-panel li::before { content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--aisc); }
.aisc__deps { max-width: 920px; margin: 56px auto 0; padding: 32px 34px; border-radius: 16px; background: var(--aiscbg); border: 1px solid var(--aiscb); }
.aisc__deps-title { font-family: var(--aiscdisplay); font-size: 15px; font-weight: 700; color: var(--aisch); margin: 0 0 18px; }
.aisc__deps-list { display: flex; flex-direction: column; gap: 12px; }
.aisc__deps-list p { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--aisct); }
.aisc__deps-list i { flex-shrink: 0; margin-top: 3px; color: var(--aisc); font-size: 12px; }

/* ---------- 15. AI operating model ---------- */
.aisc__opmodel { padding: 120px 0; background: var(--aiscbg); }
.aisc__opmodel-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.aisc__opmodel-qs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.aisc__opmodel-qs span { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 10px; background: #fff; border: 1px solid var(--aiscb); font-size: 13px; font-weight: 400; color: var(--aisch); }
.aisc__opmodel-qs i { flex-shrink: 0; color: var(--aisc); font-size: 14px; }

/* ---------- 16. Measurement & AI value: contrast columns ---------- */
.aisc__measure { padding: 120px 0; background: #fff; }
.aisc__measure-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; max-width: 1080px; margin: 0 auto; }
.aisc__measure-col { padding: 30px 28px; border-radius: 16px; }
.aisc__measure-col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--aiscdisplay); font-size: 15.5px; font-weight: 700; margin: 0 0 20px; }
.aisc__measure-col--not { background: var(--aiscbg); border: 1px dashed var(--aiscb); }
.aisc__measure-col--not h3 { color: var(--aisct); }
.aisc__measure-col--not h3 i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--aiscb); color: var(--aisct); font-size: 10px; }
.aisc__measure-col--not ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aisc__measure-col--not li { font-size: 13.5px; font-weight: 300; color: var(--aisct); text-decoration: line-through; text-decoration-color: rgba(86, 97, 111, .4); }
.aisc__measure-col--yes { background: var(--aiscdark); }
.aisc__measure-col--yes h3 { color: #fff; }
.aisc__measure-col--yes h3 i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--aisc); color: #fff; font-size: 10px; }
.aisc__measure-theme { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.aisc__measure-theme:last-child { border-bottom: none; padding-bottom: 0; }
.aisc__measure-theme strong { display: block; font-family: var(--aiscdisplay); font-size: 13.5px; font-weight: 700; color: #E0A2B2; margin-bottom: 6px; }
.aisc__measure-theme span { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--aiscmuted); }

/* ---------- 17. What good looks like: outcome bento ---------- */
.aisc__good { padding: 120px 0; background: var(--aiscbg); }
.aisc__good-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aisc__good-tile { padding: 30px 26px; border-radius: 14px; background: #fff; border: 1px solid var(--aiscb); transition: border-color .3s ease, transform .3s ease; }
.aisc__good-tile:hover { border-color: var(--aisc); transform: translateY(-4px); }
.aisc__good-tile h3 { font-family: var(--aiscdisplay); font-size: 16px; font-weight: 700; color: var(--aisch); margin: 0 0 10px; }
.aisc__good-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--aisct); margin: 0; }

/* ---------- 18. Strategy vs delivery: cross-link ---------- */
.aisc__grounded { padding: 120px 0; }
.aisc__grounded-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.aisc__grounded-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- 19. FAQ ---------- */
.aisc__faq { padding: 120px 0; background: #fff; }
.aisc__faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.aisc__faq-item { border-radius: 12px; border: 1px solid var(--aiscb); overflow: hidden; }
.aisc__faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--aiscbg); border: none; text-align: left; font-family: var(--aiscdisplay); font-size: 15.5px; font-weight: 600; color: var(--aisch); cursor: pointer; }
.aisc__faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--aisc); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.aisc__faq-item.is-open .aisc__faq-q { background: var(--aisc); color: #fff; }
.aisc__faq-item.is-open .aisc__faq-icon { background: #fff; color: var(--aisc); transform: rotate(45deg); }
.aisc__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.aisc__faq-item.is-open .aisc__faq-a { max-height: 260px; }
.aisc__faq-a p { margin: 0; padding: 22px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--aisct); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .aisc__hero-title { font-size: 39px; }
  .aisc__signal-groups { grid-template-columns: 1fr; }
  .aisc__lens-grid { grid-template-columns: repeat(2, 1fr); }
  .aisc__lens-card--wide { grid-column: span 2; }
  .aisc__bbcc-grid { grid-template-columns: repeat(2, 1fr); }
  .aisc__horizon-grid { grid-template-columns: repeat(2, 1fr); }
  .aisc__good-grid { grid-template-columns: repeat(2, 1fr); }
  .aisc__spectrum { grid-template-columns: repeat(3, 1fr); gap: 26px 14px; }
  .aisc__spectrum-track { display: none; }
}

@media (max-width: 991px) {
  .aisc__hero { padding: 160px 0 90px; }
  .aisc__hero-title { font-size: 31px; }
  .aisc__hero-pillars { grid-template-columns: 1fr; gap: 26px; }

  .aisc__map { padding: 20px 18px 26px; }
  .aisc__map-tag { display: none; }
  .aisc__radar { display: none; }
  .aisc__map-fallback { display: flex !important; }

  .aisc__intro-grid, .aisc__discover-grid, .aisc__arch-grid, .aisc__opmodel-grid, .aisc__gov-grid { grid-template-columns: 1fr; gap: 40px; }
  .aisc__intro-quote { margin: -30px 16px 0; }

  .aisc__earn-grid { grid-template-columns: 1fr; }
  .aisc__earn-arrow { transform: rotate(90deg); padding: 4px 0; }

  .aisc__genai-grid { grid-template-columns: 1fr; gap: 40px; }
  .aisc__lens-grid { grid-template-columns: 1fr; }
  .aisc__lens-card--wide { grid-column: auto; flex-direction: column; text-align: center; }
  .aisc__lens-card--wide .aisc__ico { margin: 0 auto 14px; }

  .aisc__bbcc-grid { grid-template-columns: 1fr; }
  .aisc__human-grid { grid-template-columns: 1fr; }
  .aisc__experiment-qs { grid-template-columns: 1fr 1fr; }
  .aisc__funnel { flex-direction: column; }
  .aisc__funnel > i { transform: rotate(90deg); }
  .aisc__horizon-grid { grid-template-columns: 1fr; }
  .aisc__opmodel-qs { grid-template-columns: 1fr; }
  .aisc__measure-grid { grid-template-columns: 1fr; }
  .aisc__good-grid { grid-template-columns: 1fr; }
  .aisc__gov-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .aisc__gov-desc { text-align: left; }
}

@media (max-width: 767px) {
  .aisc__intro, .aisc__earn, .aisc__signals, .aisc__discover, .aisc__genai, .aisc__prioritize, .aisc__ready, .aisc__arch, .aisc__bbcc, .aisc__gov, .aisc__human, .aisc__experiment, .aisc__roadmap, .aisc__opmodel, .aisc__measure, .aisc__good, .aisc__grounded, .aisc__faq { padding-top: 80px; padding-bottom: 80px; }
  .aisc__hero-title { font-size: 25px; }
  .aisc__hero-lead { font-size: 16.5px; }
  .aisc__title { font-size: 26px; }
  .aisc__spectrum { grid-template-columns: 1fr 1fr; }
  .aisc__experiment-qs { grid-template-columns: 1fr; }
  .aisc__signal-group { padding: 22px 20px; }
  .aisc__deps { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .aisc__page * { transition-duration: .01ms !important; }
  .aisc__radar-sweep, .aisc__radar-hub-ping, .aisc__blip, .aisc__map-tag-dot { animation: none; }
  .aisc__radar-sweep { opacity: .25; }
}

/* ============================================================
   ENTERPRISE ARCHITECTURE CONSULTING PAGE (eac__*)
   Scoped entirely to .eac__page (added on <main> of
   enterprise-architecture-consulting.html). Child of the
   Technology Consulting practice - shares its graphite/steel +
   garnet colour family with tcon__/itsc__/dtc__/aisc__, but built
   around its own compositions: a hero built as a clean "alignment
   stack" - five flat architecture-layer cards (Business
   Capabilities down to Technology Foundations) that drift to
   uneven widths and angles in Current State, then snap into one
   flush, aligned edge in Target State via a pure CSS transform
   transition (no SVG, no scattered nodes) - deliberately not a
   hub-and-spoke wheel, since one of those already appears further
   down the page. Also: an expandable business-capability list,
   grouped current-state investigation lenses with an
   inventory-vs-understanding contrast, a rationalization dimension
   grid with an outcome spectrum, a hexagonal architecture-domain
   wheel with cross-domain consequence call-outs, a target-state
   checklist, a
   transition "stepping stones" path, a dependency blast-radius
   panel, a standardize-vs-local-freedom boundary track, a
   cause-and-effect roadmap chain, and a sibling-comparison grid -
   none of which reuse the parent's blueprint-band hero or the
   sibling pages' lattice, web, or opportunity-map compositions.
   ============================================================ */
.eac__page {
  --eac: #8C2A43;
  --eac-light: #B24560;
  --eac2: #56616F;
  --each: #14161D;
  --eact: #565C66;
  --eacb: #E2E4E8;
  --eacbg: #F5F6F8;
  --eacdark: #0F1116;
  --eacdark2: #181B22;
  --eacmuted: #A9AEB8;
  --eacdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.eac__page .eac__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--eac); margin-bottom: 16px; }
.eac__page .eac__title { font-family: var(--eacdisplay); font-size: 36px; line-height: 1.26; font-weight: 700; letter-spacing: -.5px; color: var(--each); margin: 0 0 20px; }
.eac__page .eac__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--each); margin: 0 0 18px; }
.eac__page .eac__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--eact); margin: 0 0 16px; }
.eac__page .eac__text:last-child { margin-bottom: 0; }
.eac__page .eac__text a { color: var(--eac); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.eac__page .eac__head { max-width: 800px; }
.eac__page .eac__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.eac__page .eac__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--eacdark) 0%, var(--eacdark2) 100%); }
.eac__page .eac__dark > .container { position: relative; z-index: 2; }
.eac__page .eac__dark .eac__eyebrow { color: #D08298; }
.eac__page .eac__dark .eac__title { color: #fff; }
.eac__page .eac__dark .eac__text { color: var(--eacmuted); }

.eac__page .eac__btn,
.eac__page .eac__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.eac__page .eac__btn { color: #fff; background: var(--eac); border: 2px solid var(--eac); }
.eac__page .eac__btn:hover { background: var(--eac-light); border-color: var(--eac-light); color: #fff; }
.eac__page .eac__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.eac__page .eac__btn-ghost:hover { background: #fff; color: var(--eacdark); border-color: #fff; }

.eac__page .eac__link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--eac); transition: gap .3s ease, color .3s ease; }
.eac__page .eac__link:hover { gap: 15px; color: var(--eac-light); }
.eac__page .eac__dark .eac__link { color: #E0A2B2; }
.eac__page .eac__dark .eac__link:hover { color: #fff; }

.eac__page .eac__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(140, 42, 67, .09); color: var(--eac); font-size: 20px; margin-bottom: 18px; }
.eac__page .eac__dark .eac__ico { background: rgba(140, 42, 67, .22); color: #E0A2B2; }

.eac__page .eac__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(86, 97, 111, .08); border: 1px solid var(--eacb); color: var(--each); font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.eac__page .eac__dark .eac__chip { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }
.eac__page .eac__chip--link { text-decoration: none; font-weight: 500; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.eac__page .eac__dark .eac__chip--link:hover { background: var(--eac); border-color: var(--eac); color: #fff; }
.eac__page .eac__chip--parent { background: var(--eac); border-color: var(--eac); color: #fff; font-weight: 600; gap: 8px; }

/* ---------- 01. Hero: capability landscape, current/target toggle ---------- */
.eac__hero { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--eacdark) 0%, var(--eacdark2) 100%); padding: 190px 0 110px; }
.eac__hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .5; 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: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); }
.eac__hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.eac__hero-glow--1 { width: 520px; height: 520px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(140, 42, 67, .35), transparent 70%); }
.eac__hero-glow--2 { width: 460px; height: 460px; right: -140px; bottom: -160px; background: radial-gradient(circle, rgba(86, 97, 111, .3), transparent 70%); }
.eac__hero .container { position: relative; z-index: 2; }

.eac__hero-top { max-width: 880px; margin: 0 auto; text-align: center; }
.eac__hero-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--eacmuted); margin-bottom: 22px; }
.eac__hero-crumb a { color: var(--eacmuted); transition: color .3s ease; }
.eac__hero-crumb a:hover { color: #fff; }
.eac__hero-crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.eac__hero-crumb span { color: #E0A2B2; }
.eac__hero-title { font-family: var(--eacdisplay); font-size: 45px; line-height: 1.24; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.eac__hero-title em { font-style: normal; color: #E0A2B2; }
.eac__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: var(--eacmuted); max-width: 700px; margin: 0 auto 34px; }
.eac__hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

.eac__map { position: relative; max-width: 760px; margin: 72px auto 0; padding: 34px 36px 30px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12); }
.eac__map-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.eac__map-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--eacmuted); }
.eac__map-toggle { display: inline-flex; padding: 4px; border-radius: 30px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.eac__map-toggle-btn { padding: 8px 16px; border-radius: 24px; border: none; background: transparent; color: var(--eacmuted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .3s ease, color .3s ease; }
.eac__map-toggle-btn.is-active { background: var(--eac); color: #fff; }

.eac__stack-stage { position: relative; max-width: 520px; margin: 26px auto 0; padding: 4px 4px 4px 22px; overflow: hidden; }
.eac__stack-guide { position: absolute; left: 4px; top: 2px; bottom: 2px; width: 2px; background-image: repeating-linear-gradient(to bottom, var(--eacmuted) 0, var(--eacmuted) 5px, transparent 5px, transparent 10px); transition: background-image .5s ease, background-color .5s ease; }
.eac__stack-stage.is-target .eac__stack-guide { background-image: none; background-color: var(--eac-light); }

.eac__stack-layer { display: flex; align-items: center; gap: 12px; height: 52px; margin: 0 0 10px; padding: 0 18px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1); transition: width .5s cubic-bezier(.4, 0, .2, 1), margin-left .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1), border-color .5s ease; }
.eac__stack-layer:last-child { margin-bottom: 0; }
.eac__stack-layer--lead { background: linear-gradient(120deg, rgba(140, 42, 67, .32), rgba(140, 42, 67, .14)); border-color: rgba(140, 42, 67, .4); }

.eac__stack-layer:nth-child(2) { width: 86%; margin-left: 0%; transform: rotate(-1deg); }
.eac__stack-layer:nth-child(3) { width: 96%; margin-left: 4%; transform: rotate(.8deg); }
.eac__stack-layer:nth-child(4) { width: 70%; margin-left: -3%; transform: rotate(-1.3deg); }
.eac__stack-layer:nth-child(5) { width: 92%; margin-left: 5%; transform: rotate(.6deg); }
.eac__stack-layer:nth-child(6) { width: 82%; margin-left: -2%; transform: rotate(-.9deg); }

.eac__stack-stage.is-target .eac__stack-layer { width: 100%; margin-left: 0; transform: none; border-color: rgba(178, 69, 96, .3); }

.eac__stack-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #E0A2B2; font-size: 12px; }
.eac__stack-layer--lead .eac__stack-ico { background: rgba(255, 255, 255, .16); color: #fff; }
.eac__stack-name { font-family: var(--eacdisplay); font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eac__stack-status { margin-left: auto; flex-shrink: 0; padding: 5px 11px; border-radius: 20px; background: rgba(199, 122, 86, .16); border: 1px solid rgba(199, 122, 86, .4); color: #E7B79C; font-size: 10px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; transition: background .4s ease, border-color .4s ease, color .4s ease; }
.eac__stack-stage.is-target .eac__stack-status { background: rgba(123, 196, 154, .16); border-color: rgba(123, 196, 154, .45); color: #9ED8B4; }

.eac__map-caption { margin: 22px 0 0; text-align: center; font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--eacmuted); max-width: 520px; margin-left: auto; margin-right: auto; }

.eac__hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 76px auto 0; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, .1); }
.eac__hero-pillar { display: flex; flex-direction: column; gap: 8px; }
.eac__hero-pillar strong { font-family: var(--eacdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.eac__hero-pillar span { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--eacmuted); }

/* ---------- 02. Positioning ---------- */
.eac__intro { padding: 130px 0 120px; background: #fff; }
.eac__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.eac__intro-note { margin-top: 24px; padding: 18px 20px; border-radius: 10px; background: var(--eacbg); font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--eact); }
.eac__intro-note a { color: var(--eac); font-weight: 500; }
.eac__intro-figure { position: relative; }
.eac__intro-figure img { width: 100%; border-radius: 16px; display: block; }
.eac__intro-quote { position: relative; margin: -50px 24px 0; padding: 26px 28px; border-radius: 12px; background: var(--eacdark); box-shadow: 0 20px 44px -18px rgba(15, 17, 22, .5); }
.eac__intro-quote p { margin: 0; font-family: var(--eacdisplay); font-size: 16.5px; font-weight: 600; line-height: 1.55; color: #fff; }
.eac__intro-quote::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--eacdisplay); font-size: 60px; font-weight: 700; color: var(--eac); line-height: 1; }

/* ---------- 03. Architecture starts with business capabilities ---------- */
.eac__capstart { padding: 120px 0; background: var(--eacbg); }
.eac__cap-rows { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.eac__cap-row { border-radius: 12px; background: #fff; border: 1px solid var(--eacb); overflow: hidden; }
.eac__cap-row-head { width: 100%; display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: none; border: none; text-align: left; cursor: pointer; }
.eac__cap-row-num { font-family: var(--eacdisplay); font-size: 13px; font-weight: 700; color: var(--eac); }
.eac__cap-row-name { font-family: var(--eacdisplay); font-size: 16px; font-weight: 700; color: var(--each); }
.eac__cap-row-hint { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--eact); }
.eac__cap-row-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--eacbg); color: var(--eac); font-size: 11px; transition: transform .3s ease; }
.eac__cap-row.is-open .eac__cap-row-icon { transform: rotate(180deg); background: var(--eac); color: #fff; }
.eac__cap-row-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.eac__cap-row.is-open .eac__cap-row-body { max-height: 260px; }
.eac__cap-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; }
.eac__cap-tag { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.3; border: 1px solid transparent; }
.eac__cap-tag--dup, .eac__cap-tag--over { background: rgba(140, 42, 67, .08); color: var(--eac); border-color: rgba(140, 42, 67, .2); }
.eac__cap-tag--data, .eac__cap-tag--bottleneck { background: rgba(86, 97, 111, .1); color: var(--eac2); border-color: rgba(86, 97, 111, .22); }
.eac__cap-tag--legacy, .eac__cap-tag--under { background: rgba(199, 122, 86, .12); color: #A85B36; border-color: rgba(199, 122, 86, .3); }
.eac__cap-tag--platform { background: rgba(20, 22, 29, .06); color: var(--each); border-color: var(--eacb); }
.eac__cap-row-body p { margin: 0; padding: 0 22px 20px; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--eact); }

/* ---------- 04. Current-state architecture ---------- */
.eac__current { padding: 120px 0; position: relative; overflow: hidden; background: linear-gradient(175deg, var(--eacdark) 0%, var(--eacdark2) 100%); }
.eac__current .eac__title { color: #fff; }
.eac__current .eac__text { color: var(--eacmuted); }
.eac__current-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 56px; }
.eac__current-group { padding: 26px 22px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.eac__current-group-title { display: flex; align-items: center; gap: 10px; font-family: var(--eacdisplay); font-size: 14.5px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.eac__current-group-title i { color: var(--eac-light); font-size: 13px; }
.eac__current-chips { display: flex; flex-direction: column; gap: 8px; }
.eac__current-chips .eac__chip { width: 100%; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }
.eac__current-contrast { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; max-width: 760px; margin: 0 auto; padding: 34px 36px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.eac__current-contrast-label { display: block; font-family: var(--eacdisplay); font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.eac__current-contrast-label--dim { color: var(--eacmuted); }
.eac__current-contrast-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.eac__current-contrast-col li { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--eacmuted); padding-left: 16px; position: relative; }
.eac__current-contrast-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--eac-light); }
.eac__current-contrast-arrow { color: var(--eac-light); font-size: 18px; }

/* ---------- 05. Application portfolio rationalization ---------- */
.eac__portfolio { padding: 120px 0; background: #fff; }
.eac__portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 60px; }
.eac__portfolio-tile { padding: 28px 24px; border-radius: 14px; border: 1px solid var(--eacb); transition: border-color .3s ease, transform .3s ease; }
.eac__portfolio-tile:hover { border-color: var(--eac); transform: translateY(-4px); }
.eac__portfolio-tile h3 { font-family: var(--eacdisplay); font-size: 15.5px; font-weight: 700; color: var(--each); margin: 0 0 8px; }
.eac__portfolio-tile p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--eact); margin: 0; }
.eac__spectrum { max-width: 920px; margin: 0 auto; text-align: center; }
.eac__spectrum-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--eac); margin-bottom: 22px; }
.eac__spectrum-track { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 4px; }
.eac__spectrum-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: linear-gradient(90deg, var(--eacb), var(--eac-light)); }
.eac__spectrum-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--each); flex: 1; }
.eac__spectrum-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--eac); }
.eac__spectrum-note { margin: 30px auto 0; max-width: 640px; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--eact); }

/* ---------- 06. Architecture domains, connected ---------- */
.eac__domains { padding: 120px 0; background: var(--eacbg); }
.eac__wheel { position: relative; max-width: 620px; margin: 0 auto 60px; aspect-ratio: 1 / 0.92; }
.eac__wheel-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eac__wheel-line { fill: none; stroke: var(--eacb); stroke-width: .5; }
.eac__wheel-line--cross { stroke: var(--eac-light); stroke-width: .4; stroke-dasharray: 1.6 1.4; opacity: .6; }
.eac__wheel-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff; border: 1px dashed var(--eacb); z-index: 2; }
.eac__wheel-hub span { font-family: var(--eacdisplay); font-size: 11px; font-weight: 700; color: var(--eact); line-height: 1.3; }
.eac__wheel-node { position: absolute; transform: translate(-50%, -50%); width: 190px; text-align: center; background: #fff; border: 1px solid var(--eacb); border-radius: 12px; padding: 16px 14px; z-index: 1; }
.eac__wheel-node .eac__ico { width: 40px; height: 40px; font-size: 15px; margin: 0 auto 10px; }
.eac__wheel-node h3 { font-family: var(--eacdisplay); font-size: 13.5px; font-weight: 700; color: var(--each); margin: 0 0 6px; }
.eac__wheel-node p { font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--eact); margin: 0; }
.eac__consequences { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.eac__consequence { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 10px; background: #fff; border: 1px solid var(--eacb); flex-wrap: wrap; }
.eac__consequence-a { font-size: 13.5px; font-weight: 600; color: var(--each); }
.eac__consequence i { color: var(--eac); font-size: 12px; }
.eac__consequence-b { font-size: 13.5px; font-weight: 300; color: var(--eact); }

/* ---------- 07. Target-state architecture ---------- */
.eac__target { padding: 120px 0; background: #fff; }
.eac__target-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; margin-bottom: 50px; }
.eac__target-figure img { width: 100%; border-radius: 16px; display: block; }
.eac__target-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; max-width: 900px; margin: 0 auto; }
.eac__target-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; color: var(--each); line-height: 1.5; }
.eac__target-check i { color: var(--eac); font-size: 14px; margin-top: 2px; flex-shrink: 0; }

/* ---------- 08. Transition architecture ---------- */
.eac__transition { padding: 130px 0; position: relative; overflow: hidden; background: linear-gradient(175deg, var(--eacdark) 0%, var(--eacdark2) 100%); }
.eac__transition .eac__title { color: #fff; }
.eac__transition .eac__text { color: var(--eacmuted); }
.eac__stones { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; max-width: 1040px; margin: 0 auto; position: relative; }
.eac__stones::before { content: ""; position: absolute; left: 6%; right: 6%; top: 7px; height: 1px; background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 50%, transparent 50%); background-size: 12px 1px; }
.eac__stone { position: relative; z-index: 1; flex: 1; text-align: center; padding: 0 8px; }
.eac__stone-dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--eacdark); border: 2px solid var(--eac-light); margin: 0 auto 18px; }
.eac__stone--end .eac__stone-dot { background: var(--eac-light); }
.eac__stone h3 { font-family: var(--eacdisplay); font-size: 14.5px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.eac__stone p { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--eacmuted); margin: 0; }
.eac__transition-quote { max-width: 680px; margin: 70px auto 0; text-align: center; font-family: var(--eacdisplay); font-size: 21px; font-weight: 500; line-height: 1.55; color: #fff; font-style: italic; }

/* ---------- 09. Architecture principles ---------- */
.eac__principles { padding: 120px 0; background: var(--eacbg); }
.eac__principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.eac__principle-tile { padding: 24px 22px; border-radius: 12px; background: #fff; border: 1px solid var(--eacb); }
.eac__principle-tile h3 { font-family: var(--eacdisplay); font-size: 14.5px; font-weight: 700; color: var(--each); margin: 0 0 8px; }
.eac__principle-tile p { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--eact); margin: 0; }

/* ---------- 10. Integration & dependency architecture ---------- */
.eac__integration { padding: 120px 0; background: #fff; }
.eac__integration-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.eac__integration-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.eac__blast { padding: 34px 30px; border-radius: 16px; background: var(--eacdark); text-align: center; }
.eac__blast-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--eacmuted); margin-bottom: 22px; }
.eac__blast-core { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 8px; background: var(--eac); color: #fff; font-family: var(--eacdisplay); font-size: 13.5px; font-weight: 700; margin-bottom: 22px; }
.eac__blast-list { display: flex; flex-direction: column; gap: 10px; }
.eac__blast-list span { position: relative; padding: 9px 14px 9px 26px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 400; color: #E7E8EB; text-align: left; }
.eac__blast-list span::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #E0A2B2; }

/* ---------- 11. Data architecture ---------- */
.eac__data { padding: 120px 0; background: var(--eacbg); }
.eac__data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; max-width: 940px; margin: 0 auto; }
.eac__data-q { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 10px; background: #fff; border: 1px solid var(--eacb); font-size: 14px; font-weight: 400; color: var(--each); line-height: 1.5; }
.eac__data-q i { color: var(--eac); font-size: 14px; margin-top: 2px; flex-shrink: 0; }

/* ---------- 12. Cloud, AI & modern platforms ---------- */
.eac__platforms { padding: 110px 0; background: var(--eacdark); text-align: center; }
.eac__platforms-text { max-width: 820px; margin: 0 auto 34px; font-family: var(--eacdisplay); font-size: 24px; line-height: 1.55; font-weight: 500; color: var(--eacmuted); }
.eac__platforms-text span { color: #fff; font-weight: 700; }
.eac__platforms-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 780px; margin: 0 auto; }
.eac__platforms .eac__chip { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }

/* ---------- 13. Architecture governance ---------- */
.eac__governance { padding: 120px 0; position: relative; overflow: hidden; background: linear-gradient(175deg, var(--eacdark) 0%, var(--eacdark2) 100%); }
.eac__governance .eac__title { color: #fff; }
.eac__governance .eac__text { color: var(--eacmuted); }
.eac__gov-question { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto 46px; padding: 26px 30px; border-radius: 14px; background: rgba(140, 42, 67, .16); border: 1px solid rgba(140, 42, 67, .35); }
.eac__gov-question i { color: #E0A2B2; font-size: 20px; flex-shrink: 0; }
.eac__gov-question p { margin: 0; font-family: var(--eacdisplay); font-size: 16.5px; font-weight: 600; color: #fff; line-height: 1.5; }
.eac__gov-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 0 auto; }
.eac__gov-grid .eac__chip--gov { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }

/* ---------- 14. Standardize vs local freedom ---------- */
.eac__boundaries { padding: 120px 0; background: #fff; }
.eac__bound-track { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; max-width: 1040px; margin: 0 auto; }
.eac__bound-side { padding: 30px 28px; border-radius: 16px; }
.eac__bound-side--std { background: rgba(140, 42, 67, .06); border: 1px solid rgba(140, 42, 67, .2); }
.eac__bound-side--free { background: var(--eacbg); border: 1px solid var(--eacb); }
.eac__bound-side h3 { display: flex; align-items: center; gap: 10px; font-family: var(--eacdisplay); font-size: 15.5px; font-weight: 700; color: var(--each); margin: 0 0 18px; }
.eac__bound-side--std h3 i { color: var(--eac); }
.eac__bound-side--free h3 i { color: var(--eac2); }
.eac__bound-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eac__bound-mid { display: flex; align-items: center; justify-content: center; text-align: center; width: 92px; height: 92px; border-radius: 50%; background: var(--eacdark); }
.eac__bound-mid span { font-family: var(--eacdisplay); font-size: 10.5px; font-weight: 700; color: #fff; line-height: 1.35; }

/* ---------- 15. Architecture & modernization ---------- */
.eac__modernization { padding: 120px 0; background: var(--eacbg); }
.eac__modernization-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; margin-bottom: 36px; }
.eac__modernization-list { display: flex; flex-direction: column; gap: 2px; }
.eac__mod-row { display: flex; align-items: baseline; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--eacb); }
.eac__mod-dim { font-family: var(--eacdisplay); font-size: 14px; font-weight: 700; color: var(--each); flex-shrink: 0; width: 200px; }
.eac__mod-desc { font-size: 13.5px; font-weight: 300; color: var(--eact); }
.eac__modernization-note { max-width: 900px; margin: 0 auto; text-align: center; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--eact); }
.eac__modernization-note a { color: var(--eac); font-weight: 500; }

/* ---------- 16. Architecture roadmaps ---------- */
.eac__roadmap { padding: 120px 0; background: #fff; }
.eac__chain-wrap { max-width: 1180px; margin: 0 auto; overflow-x: auto; padding: 4px 4px 18px; }
.eac__chain-wrap::-webkit-scrollbar { height: 6px; }
.eac__chain-wrap::-webkit-scrollbar-track { background: var(--eacbg); border-radius: 3px; }
.eac__chain-wrap::-webkit-scrollbar-thumb { background: var(--eacb); border-radius: 3px; }
.eac__chain-wrap::-webkit-scrollbar-thumb:hover { background: var(--eac-light); }
.eac__chain { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; width: max-content; margin: 0 auto; }
.eac__chain-step { width: 180px; flex-shrink: 0; text-align: center; padding: 22px 16px; border-radius: 14px; background: var(--eacbg); border: 1px solid var(--eacb); }
.eac__chain-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--eac); color: #fff; font-family: var(--eacdisplay); font-size: 11.5px; font-weight: 700; margin-bottom: 12px; }
.eac__chain-step h3 { font-family: var(--eacdisplay); font-size: 14.5px; font-weight: 700; color: var(--each); margin: 0 0 6px; }
.eac__chain-step p { font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--eact); margin: 0; }
.eac__chain-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; flex-shrink: 0; }
.eac__chain-arrow i { color: var(--eac-light); font-size: 13px; }
.eac__chain-arrow span { font-size: 9.5px; font-weight: 500; font-style: italic; color: var(--eact); text-align: center; line-height: 1.3; }

/* ---------- 17. Architecture operating model ---------- */
.eac__opmodel { padding: 120px 0; position: relative; overflow: hidden; background: linear-gradient(175deg, var(--eacdark) 0%, var(--eacdark2) 100%); }
.eac__opmodel .eac__title { color: #fff; }
.eac__opmodel .eac__text { color: var(--eacmuted); }
.eac__opmodel-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
.eac__opmodel-intro { position: sticky; top: 120px; align-self: start; }
.eac__opmodel-list { display: flex; flex-direction: column; gap: 10px; }
.eac__opmodel-item { border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.eac__opmodel-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; text-align: left; font-family: var(--eacdisplay); font-size: 14.5px; font-weight: 600; color: #fff; cursor: pointer; }
.eac__opmodel-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #E0A2B2; font-size: 11px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.eac__opmodel-item.is-open .eac__opmodel-icon { background: var(--eac); color: #fff; transform: rotate(45deg); }
.eac__opmodel-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.eac__opmodel-item.is-open .eac__opmodel-a { max-height: 160px; }
.eac__opmodel-a p { margin: 0; padding: 0 22px 20px; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--eacmuted); }

/* ---------- 18. What good looks like ---------- */
.eac__good { padding: 120px 0; background: var(--eacbg); }
.eac__good-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.eac__good-tile { padding: 30px 26px; border-radius: 14px; background: #fff; border: 1px solid var(--eacb); transition: border-color .3s ease, transform .3s ease; }
.eac__good-tile:hover { border-color: var(--eac); transform: translateY(-4px); }
.eac__good-tile--wide { grid-column: span 2; }
.eac__good-tile h3 { font-family: var(--eacdisplay); font-size: 16px; font-weight: 700; color: var(--each); margin: 0 0 10px; }
.eac__good-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--eact); margin: 0; }

/* ---------- 19. How this differs ---------- */
.eac__distinct { padding: 120px 0; background: #fff; }
.eac__distinct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.eac__distinct-card { padding: 26px 22px; border-radius: 14px; border: 1px solid var(--eacb); }
.eac__distinct-card h3 { font-family: var(--eacdisplay); font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.eac__distinct-card h3 a { color: var(--each); transition: color .3s ease; }
.eac__distinct-card h3 a:hover { color: var(--eac); }
.eac__distinct-card p { font-size: 12.5px; font-weight: 300; line-height: 1.65; color: var(--eact); margin: 0 0 10px; }
.eac__distinct-card p:last-child { margin-bottom: 0; }
.eac__distinct-card p strong { color: var(--each); font-weight: 600; }

/* ---------- 20. Restraint ---------- */
.eac__restraint { padding: 120px 0; }
.eac__restraint-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.eac__restraint-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

/* ---------- 21. Connected practice ---------- */
.eac__connected { padding: 110px 0; }
.eac__connected-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.eac__connected-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- 22. FAQ ---------- */
.eac__faq { padding: 120px 0; background: #fff; }
.eac__faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.eac__faq-item { border-radius: 12px; border: 1px solid var(--eacb); overflow: hidden; }
.eac__faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--eacbg); border: none; text-align: left; font-family: var(--eacdisplay); font-size: 15.5px; font-weight: 600; color: var(--each); cursor: pointer; }
.eac__faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--eac); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.eac__faq-item.is-open .eac__faq-q { background: var(--eac); color: #fff; }
.eac__faq-item.is-open .eac__faq-icon { background: #fff; color: var(--eac); transform: rotate(45deg); }
.eac__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.eac__faq-item.is-open .eac__faq-a { max-height: 260px; }
.eac__faq-a p { margin: 0; padding: 22px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--eact); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .eac__hero-title { font-size: 38px; }
  .eac__current-groups { grid-template-columns: repeat(2, 1fr); }
  .eac__portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .eac__principle-grid { grid-template-columns: repeat(2, 1fr); }
  .eac__distinct-grid { grid-template-columns: repeat(2, 1fr); }
  .eac__wheel-node { width: 160px; padding: 14px 10px; }
  .eac__chain { gap: 12px; }
  .eac__chain-arrow { width: 50px; }
}

@media (max-width: 991px) {
  .eac__hero { padding: 160px 0 90px; }
  .eac__hero-title { font-size: 30px; }
  .eac__hero-pillars { grid-template-columns: 1fr; gap: 26px; }
  .eac__map { padding: 26px 20px 22px; }
  .eac__stack-stage { max-width: 100%; }
  .eac__stack-layer { height: 46px; gap: 9px; padding: 0 14px; }
  .eac__stack-name { font-size: 12px; }
  .eac__stack-status { font-size: 9px; padding: 4px 9px; }
  .eac__stack-ico { width: 26px; height: 26px; font-size: 11px; }

  .eac__intro-grid, .eac__target-grid, .eac__integration-grid, .eac__modernization-grid, .eac__opmodel-grid { grid-template-columns: 1fr; gap: 40px; }
  .eac__opmodel-intro { position: static; }
  .eac__intro-quote { margin: -30px 16px 0; }

  .eac__wheel { max-width: 460px; }
  .eac__wheel-node { width: 130px; padding: 12px 8px; }
  .eac__wheel-node p { display: none; }

  .eac__stones { flex-wrap: wrap; gap: 26px; }
  .eac__stones::before { display: none; }
  .eac__stone { flex: 0 0 30%; }

  .eac__bound-track { grid-template-columns: 1fr; }
  .eac__bound-mid { margin: 0 auto; }

  .eac__chain-wrap { overflow-x: visible; padding: 0; }
  .eac__chain { flex-direction: column; width: 100%; }
  .eac__chain-arrow { flex-direction: row; width: auto; transform: rotate(90deg); margin: 6px 0; }
  .eac__chain-arrow span { display: none; }
  .eac__chain-step { width: 100%; max-width: 340px; margin: 0 auto; }

  .eac__good-grid { grid-template-columns: repeat(2, 1fr); }
  .eac__good-tile--wide { grid-column: span 2; }
  .eac__distinct-grid { grid-template-columns: 1fr; }
  .eac__data-grid { grid-template-columns: 1fr; }
  .eac__target-checks { grid-template-columns: 1fr; }
  .eac__current-groups { grid-template-columns: 1fr; }
  .eac__portfolio-grid { grid-template-columns: 1fr; }
  .eac__principle-grid { grid-template-columns: 1fr; }
  .eac__spectrum-track { flex-wrap: wrap; gap: 20px; }
  .eac__spectrum-track::before { display: none; }
}

@media (max-width: 767px) {
  .eac__intro, .eac__capstart, .eac__current, .eac__portfolio, .eac__domains, .eac__target, .eac__transition, .eac__principles, .eac__integration, .eac__data, .eac__platforms, .eac__governance, .eac__boundaries, .eac__modernization, .eac__roadmap, .eac__opmodel, .eac__good, .eac__distinct, .eac__restraint, .eac__connected, .eac__faq { padding-top: 80px; padding-bottom: 80px; }
  .eac__hero-title { font-size: 25px; }
  .eac__hero-lead { font-size: 16.5px; }
  .eac__title { font-size: 26px; }
  .eac__platforms-text { font-size: 19px; }
  .eac__good-tile--wide { grid-column: span 1; }
  .eac__good-grid { grid-template-columns: 1fr; }
  .eac__mod-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .eac__mod-dim { width: auto; }
  .eac__cap-row-hint { display: none; }
  .eac__consequence { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .eac__page * { transition-duration: .01ms !important; }
}

/* ============================================================
   TECHNOLOGY MODERNIZATION CONSULTING PAGE (tmc__*)
   Scoped entirely to .tmc__page (added on <main> of
   technology-modernization-consulting.html). Child of the
   Technology Consulting practice - shares its graphite/steel +
   garnet colour family with tcon__/itsc__/dtc__/aisc__/eac__, but
   built around its own compositions: a hero plotted as a live
   importance-vs-risk map (business fit on x, operational risk on
   y) where seven named components sit in "Assessed" positions and
   animate to quadrant-anchored "Decided" positions carrying a
   pathway badge - deliberately not a hub-and-spoke wheel, a
   layered card stack, or an SVG thread diagram, since those
   already belong to sibling pages. Also: a grouped pathway
   taxonomy (Preserve / Transition / Renew / Simplify), an
   expandable legacy-component dependency list, a parallel
   legacy/modern "trellis" for transition states, a precedence
   ledger for sequencing, and a sibling-comparison grid. Every
   dark panel uses the shared .tmc__dark utility (never a
   one-off gradient), so component overrides never need to
   fight the base .tmc__page .tmc__chip specificity - the
   inconsistency that had to be patched section-by-section on the
   Enterprise Architecture Consulting page. The roadmap chain is
   built nowrap + horizontally scrollable from the start, for the
   same reason.
   ============================================================ */
.tmc__page {
  --tmc: #8C2A43;
  --tmc-light: #B24560;
  --tmc2: #56616F;
  --tmch: #14161D;
  --tmct: #565C66;
  --tmcb: #E2E4E8;
  --tmcbg: #F5F6F8;
  --tmcdark: #0F1116;
  --tmcdark2: #181B22;
  --tmcmuted: #A9AEB8;
  --tmcdisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.tmc__page .tmc__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--tmc); margin-bottom: 16px; }
.tmc__page .tmc__title { font-family: var(--tmcdisplay); font-size: 36px; line-height: 1.26; font-weight: 700; letter-spacing: -.5px; color: var(--tmch); margin: 0 0 20px; }
.tmc__page .tmc__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--tmch); margin: 0 0 18px; }
.tmc__page .tmc__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--tmct); margin: 0 0 16px; }
.tmc__page .tmc__text:last-child { margin-bottom: 0; }
.tmc__page .tmc__text a { color: var(--tmc); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.tmc__page .tmc__head { max-width: 800px; }
.tmc__page .tmc__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.tmc__page .tmc__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--tmcdark) 0%, var(--tmcdark2) 100%); }
.tmc__page .tmc__dark > .container { position: relative; z-index: 2; }
.tmc__page .tmc__dark .tmc__eyebrow { color: #D08298; }
.tmc__page .tmc__dark .tmc__title { color: #fff; }
.tmc__page .tmc__dark .tmc__text { color: var(--tmcmuted); }
.tmc__page .tmc__dark .tmc__text a { color: #E0A2B2; }

.tmc__page .tmc__btn,
.tmc__page .tmc__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.tmc__page .tmc__btn { color: #fff; background: var(--tmc); border: 2px solid var(--tmc); }
.tmc__page .tmc__btn:hover { background: var(--tmc-light); border-color: var(--tmc-light); color: #fff; }
.tmc__page .tmc__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.tmc__page .tmc__btn-ghost:hover { background: #fff; color: var(--tmcdark); border-color: #fff; }

.tmc__page .tmc__link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--tmc); transition: gap .3s ease, color .3s ease; }
.tmc__page .tmc__link:hover { gap: 15px; color: var(--tmc-light); }
.tmc__page .tmc__dark .tmc__link { color: #E0A2B2; }
.tmc__page .tmc__dark .tmc__link:hover { color: #fff; }

.tmc__page .tmc__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(140, 42, 67, .09); color: var(--tmc); font-size: 20px; margin-bottom: 18px; }
.tmc__page .tmc__dark .tmc__ico { background: rgba(140, 42, 67, .22); color: #E0A2B2; }

.tmc__page .tmc__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(86, 97, 111, .08); border: 1px solid var(--tmcb); color: var(--tmch); font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.tmc__page .tmc__dark .tmc__chip { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }
.tmc__page .tmc__chip--link { text-decoration: none; font-weight: 500; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.tmc__page .tmc__dark .tmc__chip--link:hover { background: var(--tmc); border-color: var(--tmc); color: #fff; }
.tmc__page .tmc__chip--parent { background: var(--tmc); border-color: var(--tmc); color: #fff; font-weight: 600; gap: 8px; }

/* ---------- 01. Hero: modernization map, assessed/decided toggle ---------- */
.tmc__hero { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--tmcdark) 0%, var(--tmcdark2) 100%); padding: 190px 0 110px; }
.tmc__hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .5; 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: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); }
.tmc__hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.tmc__hero-glow--1 { width: 520px; height: 520px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(140, 42, 67, .35), transparent 70%); }
.tmc__hero-glow--2 { width: 460px; height: 460px; right: -140px; bottom: -160px; background: radial-gradient(circle, rgba(86, 97, 111, .3), transparent 70%); }
.tmc__hero .container { position: relative; z-index: 2; }

.tmc__hero-top { max-width: 880px; margin: 0 auto; text-align: center; }
.tmc__hero-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--tmcmuted); margin-bottom: 22px; }
.tmc__hero-crumb a { color: var(--tmcmuted); transition: color .3s ease; }
.tmc__hero-crumb a:hover { color: #fff; }
.tmc__hero-crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.tmc__hero-crumb span { color: #E0A2B2; }
.tmc__hero-title { font-family: var(--tmcdisplay); font-size: 44px; line-height: 1.24; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.tmc__hero-title em { font-style: normal; color: #E0A2B2; }
.tmc__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: var(--tmcmuted); max-width: 700px; margin: 0 auto 34px; }
.tmc__hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

.tmc__map { position: relative; max-width: 700px; margin: 70px auto 0; padding: 30px 34px 28px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12); }
.tmc__map-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tmc__map-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--tmcmuted); }
.tmc__map-toggle { display: inline-flex; padding: 4px; border-radius: 30px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.tmc__map-toggle-btn { padding: 8px 16px; border-radius: 24px; border: none; background: transparent; color: var(--tmcmuted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .3s ease, color .3s ease; }
.tmc__map-toggle-btn.is-active { background: var(--tmc); color: #fff; }

.tmc__plot { position: relative; width: 100%; aspect-ratio: 1 / 0.8; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .015); border: 1px solid rgba(255, 255, 255, .08); }
.tmc__plot-quad { position: absolute; width: 50%; height: 50%; display: flex; padding: 12px 16px; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255, 255, 255, .34); }
.tmc__plot-quad--tr { top: 0; right: 0; justify-content: flex-end; background: rgba(140, 42, 67, .13); }
.tmc__plot-quad--br { bottom: 0; right: 0; align-items: flex-end; justify-content: flex-end; background: rgba(123, 196, 154, .07); }
.tmc__plot-quad--tl { top: 0; left: 0; background: rgba(199, 122, 86, .1); }
.tmc__plot-quad--bl { bottom: 0; left: 0; align-items: flex-end; background: rgba(255, 255, 255, .025); }
.tmc__plot-axis { position: absolute; background: rgba(255, 255, 255, .14); }
.tmc__plot-axis--x { left: 4%; right: 4%; top: 50%; height: 1px; }
.tmc__plot-axis--y { top: 4%; bottom: 4%; left: 50%; width: 1px; }
.tmc__plot-axis-label { position: absolute; font-size: 9px; font-weight: 600; letter-spacing: .3px; color: var(--tmcmuted); }
.tmc__plot-axis-label--x { right: 4%; top: 50%; transform: translateY(calc(-100% - 6px)); }
.tmc__plot-axis-label--y { left: 50%; top: 4%; transform: translateX(-50%); writing-mode: vertical-rl; }

.tmc__node { position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 30px; background: var(--tmcdark2); border: 1px solid rgba(255, 255, 255, .18); white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); transition: left .7s cubic-bezier(.4, 0, .2, 1), top .7s cubic-bezier(.4, 0, .2, 1); z-index: 2; }
.tmc__plot.is-decided .tmc__node { left: var(--dx); top: var(--dy); }
.tmc__node i { color: #E0A2B2; font-size: 12px; }
.tmc__node span { font-size: 10.5px; font-weight: 600; color: #fff; }
.tmc__node-badge { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #7BC49A; background: rgba(123, 196, 154, .16); border-radius: 10px; padding: 3px 8px; margin-left: 2px; opacity: 0; max-width: 0; overflow: hidden; transition: opacity .4s ease .2s, max-width .4s ease .2s, margin .4s ease .2s; }
.tmc__plot.is-decided .tmc__node-badge { opacity: 1; max-width: 110px; margin-left: 2px; }

.tmc__map-caption { margin: 22px 0 0; text-align: center; font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--tmcmuted); max-width: 520px; margin-left: auto; margin-right: auto; }

.tmc__hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 76px auto 0; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tmc__hero-pillar { display: flex; flex-direction: column; gap: 8px; }
.tmc__hero-pillar strong { font-family: var(--tmcdisplay); font-size: 15px; font-weight: 700; color: #fff; }
.tmc__hero-pillar span { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--tmcmuted); }

/* ---------- 02. Positioning ---------- */
.tmc__intro { padding: 130px 0 120px; background: #fff; }
.tmc__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.tmc__intro-note { margin-top: 24px; padding: 18px 20px; border-radius: 10px; background: var(--tmcbg); font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--tmct); }
.tmc__intro-note a { color: var(--tmc); font-weight: 500; }
.tmc__intro-figure { position: relative; }
.tmc__intro-figure img { width: 100%; border-radius: 16px; display: block; }
.tmc__intro-quote { position: relative; margin: -50px 24px 0; padding: 26px 28px; border-radius: 12px; background: var(--tmcdark); box-shadow: 0 20px 44px -18px rgba(15, 17, 22, .5); }
.tmc__intro-quote p { margin: 0; font-family: var(--tmcdisplay); font-size: 16.5px; font-weight: 600; line-height: 1.55; color: #fff; }
.tmc__intro-quote::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--tmcdisplay); font-size: 60px; font-weight: 700; color: var(--tmc); line-height: 1; }

/* ---------- 03. Where modernization should start ---------- */
.tmc__why { padding: 120px 0; background: var(--tmcbg); }
.tmc__why-grid { display: grid; grid-template-columns: .55fr 1fr; gap: 34px; max-width: 1040px; margin: 0 auto 34px; align-items: start; }
.tmc__why-label { display: block; font-family: var(--tmcdisplay); font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tmct); margin-bottom: 16px; }
.tmc__why-label--accent { color: var(--tmc); }
.tmc__why-early { padding: 24px 22px; border-radius: 14px; background: #fff; border: 1px dashed var(--tmcb); }
.tmc__why-early-item { padding: 10px 0; font-size: 14px; font-weight: 400; color: var(--tmct); border-top: 1px solid var(--tmcb); text-decoration: line-through; text-decoration-color: rgba(140, 42, 67, .35); }
.tmc__why-early-item:first-of-type { border-top: none; padding-top: 0; }
.tmc__why-real { padding: 24px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--tmcb); box-shadow: 0 20px 40px -28px rgba(20, 22, 29, .25); }
.tmc__why-real-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tmc__why-q { padding: 12px 14px; border-radius: 8px; background: var(--tmcbg); font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--tmch); }
.tmc__why-statement { max-width: 780px; margin: 0 auto; text-align: center; font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--tmct); }
.tmc__why-statement strong { color: var(--tmch); font-weight: 700; }

/* ---------- 04. Current technology estate assessment ---------- */
.tmc__current { padding: 120px 0; }
.tmc__current-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 56px; }
.tmc__current-group { padding: 26px 22px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.tmc__current-group-title { display: flex; align-items: center; gap: 10px; font-family: var(--tmcdisplay); font-size: 14.5px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.tmc__current-group-title i { color: var(--tmc-light); font-size: 13px; }
.tmc__current-chips { display: flex; flex-direction: column; gap: 8px; }
.tmc__current-chips .tmc__chip { width: 100%; }
.tmc__current-contrast { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; max-width: 760px; margin: 0 auto; padding: 34px 36px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.tmc__current-contrast-label { display: block; font-family: var(--tmcdisplay); font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.tmc__current-contrast-label--dim { color: var(--tmcmuted); }
.tmc__current-contrast-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tmc__current-contrast-col li { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--tmcmuted); padding-left: 16px; position: relative; }
.tmc__current-contrast-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--tmc-light); }
.tmc__current-contrast-arrow { color: var(--tmc-light); font-size: 18px; }

/* ---------- 05. Not everything old needs replacing ---------- */
.tmc__spectrum-section { padding: 120px 0; background: #fff; }
.tmc__spectrum { max-width: 920px; margin: 0 auto; text-align: center; }
.tmc__spectrum-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--tmc); margin-bottom: 22px; }
.tmc__spectrum-track { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 4px; }
.tmc__spectrum-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: linear-gradient(90deg, var(--tmcb), var(--tmc-light)); }
.tmc__spectrum-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--tmch); flex: 1; }
.tmc__spectrum-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--tmc); }
.tmc__spectrum-note { margin: 30px auto 0; max-width: 640px; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--tmct); }

/* ---------- 06. Modernization decision pathways ---------- */
.tmc__pathways { padding: 120px 0; background: var(--tmcbg); }
.tmc__pathway-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tmc__pathway-group { padding: 26px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--tmcb); }
.tmc__pathway-group-head { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--tmcb); }
.tmc__pathway-group-head .tmc__ico { margin-bottom: 12px; width: 44px; height: 44px; font-size: 17px; }
.tmc__pathway-group-head h3 { font-family: var(--tmcdisplay); font-size: 16px; font-weight: 700; color: var(--tmch); margin: 0 0 6px; }
.tmc__pathway-group-head p { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--tmct); margin: 0; }
.tmc__pathway-row { padding: 12px 0; border-top: 1px solid var(--tmcb); display: flex; flex-direction: column; gap: 4px; }
.tmc__pathway-row:first-of-type { border-top: none; padding-top: 0; }
.tmc__pathway-row strong { font-family: var(--tmcdisplay); font-size: 13.5px; font-weight: 700; color: var(--tmc); }
.tmc__pathway-row span { font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--tmct); }

/* ---------- 07/12. Question grids (shared) ---------- */
.tmc__appplat { padding: 120px 0; background: #fff; }
.tmc__datadeps { padding: 120px 0; background: var(--tmcbg); }
.tmc__data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; max-width: 940px; margin: 0 auto; }
.tmc__data-q { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 10px; background: #fff; border: 1px solid var(--tmcb); font-size: 14px; font-weight: 400; color: var(--tmch); line-height: 1.5; }
.tmc__datadeps .tmc__data-q { background: #fff; }
.tmc__data-q i { color: var(--tmc); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.tmc__appplat-note { max-width: 820px; margin: 34px auto 0; text-align: center; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--tmct); }
.tmc__appplat-note a { color: var(--tmc); font-weight: 500; }

/* ---------- 08. Technical debt ---------- */
.tmc__debt { padding: 120px 0; background: #fff; }
.tmc__debt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto 50px; }
.tmc__debt-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 0 auto 34px; }
.tmc__debt-col { padding: 26px 24px; border-radius: 14px; background: var(--tmcbg); border: 1px solid var(--tmcb); }
.tmc__debt-col--risk { background: rgba(199, 122, 86, .07); border-color: rgba(199, 122, 86, .28); }
.tmc__debt-col-label { display: block; font-family: var(--tmcdisplay); font-size: 13.5px; font-weight: 700; color: var(--tmch); margin-bottom: 14px; }
.tmc__debt-col-label--risk { color: #A85B36; }
.tmc__debt-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tmc__debt-col li { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--tmct); padding-left: 16px; position: relative; }
.tmc__debt-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--tmc-light); }
.tmc__debt-close { max-width: 780px; margin: 0 auto; text-align: center; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--tmct); }

/* ---------- 09. Dependency mapping ---------- */
.tmc__deps { padding: 120px 0; }
.tmc__dep-rows { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tmc__dep-row { border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.tmc__dep-row-head { width: 100%; display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: none; border: none; text-align: left; cursor: pointer; }
.tmc__dep-row-num { font-family: var(--tmcdisplay); font-size: 13px; font-weight: 700; color: #E0A2B2; }
.tmc__dep-row-name { font-family: var(--tmcdisplay); font-size: 16px; font-weight: 700; color: #fff; }
.tmc__dep-row-icon { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #E0A2B2; font-size: 11px; transition: transform .3s ease; }
.tmc__dep-row.is-open .tmc__dep-row-icon { transform: rotate(180deg); background: var(--tmc); color: #fff; }
.tmc__dep-row-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.tmc__dep-row.is-open .tmc__dep-row-body { max-height: 140px; }
.tmc__dep-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 20px; }

/* ---------- 10. Integration modernization ---------- */
.tmc__integration { padding: 120px 0; background: var(--tmcbg); }
.tmc__integration-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.tmc__integration-chips { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }

/* ---------- 11. Cloud statement ---------- */
.tmc__cloud { padding: 110px 0; background: var(--tmcbg); text-align: center; }
.tmc__cloud-text { max-width: 780px; margin: 0 auto 18px; font-family: var(--tmcdisplay); font-size: 25px; line-height: 1.5; font-weight: 600; color: var(--tmch); }
.tmc__cloud-text span { color: var(--tmc); }
.tmc__cloud-sub { font-size: 14px; font-weight: 400; color: var(--tmct); margin: 0 0 26px; }
.tmc__cloud-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 780px; margin: 0 auto 30px; }
.tmc__cloud-note { font-size: 13.5px; font-weight: 300; color: var(--tmct); }
.tmc__cloud-note a { color: var(--tmc); font-weight: 500; }

/* ---------- 13. Transition states: parallel trellis ---------- */
.tmc__transition { padding: 130px 0; }
.tmc__tracks { max-width: 900px; margin: 0 auto 50px; }
.tmc__track { padding: 12px 20px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); }
.tmc__track span { font-family: var(--tmcdisplay); font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.tmc__track--legacy { border-color: rgba(199, 122, 86, .35); background: rgba(199, 122, 86, .1); }
.tmc__track--modern { border-color: rgba(123, 196, 154, .35); background: rgba(123, 196, 154, .08); }
.tmc__rungs { display: flex; justify-content: space-between; align-items: flex-end; padding: 26px 30px; }
.tmc__rung { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; }
.tmc__rung-bar { display: block; width: 2px; height: 46px; background: linear-gradient(to bottom, var(--tmc-light), rgba(178, 69, 96, .15)); }
.tmc__rung em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--tmcmuted); text-align: center; line-height: 1.35; max-width: 90px; }
.tmc__rung--last .tmc__rung-bar { opacity: .55; }
.tmc__transition-quote { max-width: 680px; margin: 0 auto; text-align: center; font-family: var(--tmcdisplay); font-size: 20px; font-weight: 500; line-height: 1.55; color: #fff; font-style: italic; }

/* ---------- 14. Modernization sequencing ---------- */
.tmc__sequencing { padding: 120px 0; background: #fff; }
.tmc__precedence { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin: 0 auto; }
.tmc__precedence-row { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 10px; background: var(--tmcbg); border: 1px solid var(--tmcb); flex-wrap: wrap; }
.tmc__precedence-a { font-size: 13.5px; font-weight: 600; color: var(--tmch); }
.tmc__precedence-row i { color: var(--tmc); font-size: 12px; }
.tmc__precedence-b { font-size: 13.5px; font-weight: 300; color: var(--tmct); }

/* ---------- 15/16. Chip-cloud sections ---------- */
.tmc__continuity { padding: 120px 0; background: var(--tmcbg); }
.tmc__security { padding: 120px 0; background: #fff; }
.tmc__continuity-chips, .tmc__security-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }

/* ---------- 17. Modernization governance ---------- */
.tmc__governance { padding: 120px 0; }
.tmc__gov-question { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto 46px; padding: 26px 30px; border-radius: 14px; background: rgba(140, 42, 67, .16); border: 1px solid rgba(140, 42, 67, .35); }
.tmc__gov-question i { color: #E0A2B2; font-size: 20px; flex-shrink: 0; }
.tmc__gov-question p { margin: 0; font-family: var(--tmcdisplay); font-size: 16.5px; font-weight: 600; color: #fff; line-height: 1.5; }
.tmc__gov-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 0 auto; }

/* ---------- 18. Modernization roadmaps ---------- */
.tmc__roadmap { padding: 120px 0; background: var(--tmcbg); }
.tmc__chain-wrap { max-width: 1180px; margin: 0 auto; overflow-x: auto; padding: 4px 4px 18px; }
.tmc__chain-wrap::-webkit-scrollbar { height: 6px; }
.tmc__chain-wrap::-webkit-scrollbar-track { background: #fff; border-radius: 3px; }
.tmc__chain-wrap::-webkit-scrollbar-thumb { background: var(--tmcb); border-radius: 3px; }
.tmc__chain-wrap::-webkit-scrollbar-thumb:hover { background: var(--tmc-light); }
.tmc__chain { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; width: max-content; margin: 0 auto; }
.tmc__chain-step { width: 180px; flex-shrink: 0; text-align: center; padding: 22px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--tmcb); }
.tmc__chain-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tmc); color: #fff; font-family: var(--tmcdisplay); font-size: 11.5px; font-weight: 700; margin-bottom: 12px; }
.tmc__chain-step h3 { font-family: var(--tmcdisplay); font-size: 14.5px; font-weight: 700; color: var(--tmch); margin: 0 0 6px; }
.tmc__chain-step p { font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--tmct); margin: 0; }
.tmc__chain-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; flex-shrink: 0; }
.tmc__chain-arrow i { color: var(--tmc-light); font-size: 13px; }
.tmc__chain-arrow span { font-size: 9.5px; font-weight: 500; font-style: italic; color: var(--tmct); text-align: center; line-height: 1.3; }

/* ---------- 19. What good looks like ---------- */
.tmc__good { padding: 120px 0; background: #fff; }
.tmc__good-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tmc__good-tile { width: 100%; box-sizing: border-box; justify-self: stretch; padding: 30px 26px; border-radius: 14px; background: var(--tmcbg); border: 1px solid var(--tmcb); transition: border-color .3s ease, transform .3s ease; }
.tmc__good-tile:hover { border-color: var(--tmc); transform: translateY(-4px); }
.tmc__good-tile--wide { grid-column: span 2; }
.tmc__good-tile h3 { font-family: var(--tmcdisplay); font-size: 16px; font-weight: 700; color: var(--tmch); margin: 0 0 10px; }
.tmc__good-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--tmct); margin: 0; }

/* ---------- 20. How this differs ---------- */
.tmc__distinct { padding: 120px 0; background: var(--tmcbg); }
.tmc__distinct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tmc__distinct-card { padding: 26px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--tmcb); }
.tmc__distinct-card h3 { font-family: var(--tmcdisplay); font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.tmc__distinct-card h3 a { color: var(--tmch); transition: color .3s ease; }
.tmc__distinct-card h3 a:hover { color: var(--tmc); }
.tmc__distinct-card p { font-size: 12.5px; font-weight: 300; line-height: 1.65; color: var(--tmct); margin: 0 0 10px; }
.tmc__distinct-card p:last-child { margin-bottom: 0; }
.tmc__distinct-card p strong { color: var(--tmch); font-weight: 600; }

/* ---------- 21. Connected practice ---------- */
.tmc__connected { padding: 110px 0; }
.tmc__connected-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.tmc__connected-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- 22. Restraint ---------- */
.tmc__restraint { padding: 120px 0; }
.tmc__restraint-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.tmc__restraint-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

/* ---------- 23. FAQ ---------- */
.tmc__faq { padding: 120px 0; background: #fff; }
.tmc__faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.tmc__faq-item { border-radius: 12px; border: 1px solid var(--tmcb); overflow: hidden; }
.tmc__faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--tmcbg); border: none; text-align: left; font-family: var(--tmcdisplay); font-size: 15.5px; font-weight: 600; color: var(--tmch); cursor: pointer; }
.tmc__faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--tmc); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.tmc__faq-item.is-open .tmc__faq-q { background: var(--tmc); color: #fff; }
.tmc__faq-item.is-open .tmc__faq-icon { background: #fff; color: var(--tmc); transform: rotate(45deg); }
.tmc__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.tmc__faq-item.is-open .tmc__faq-a { max-height: 260px; }
.tmc__faq-a p { margin: 0; padding: 22px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--tmct); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .tmc__hero-title { font-size: 37px; }
  .tmc__current-groups { grid-template-columns: repeat(2, 1fr); }
  .tmc__pathway-groups { grid-template-columns: repeat(2, 1fr); }
  .tmc__distinct-grid { grid-template-columns: repeat(2, 1fr); }
  .tmc__why-grid { grid-template-columns: 1fr; }
  .tmc__why-real-grid { grid-template-columns: repeat(3, 1fr); }
  .tmc__chain { gap: 12px; }
  .tmc__chain-arrow { width: 50px; }
}

@media (max-width: 991px) {
  .tmc__hero { padding: 160px 0 90px; }
  .tmc__hero-title { font-size: 29px; }
  .tmc__hero-pillars { grid-template-columns: 1fr; gap: 26px; }
  .tmc__map { padding: 22px 18px 20px; }
  .tmc__plot { aspect-ratio: 1 / 1.05; }
  .tmc__node { padding: 6px 10px 6px 8px; }
  .tmc__node span { font-size: 9.5px; }
  .tmc__node-badge { font-size: 7.5px; }
  .tmc__plot-axis-label--y { display: none; }

  .tmc__intro-grid, .tmc__integration-grid { grid-template-columns: 1fr; gap: 40px; }
  .tmc__intro-quote { margin: -30px 16px 0; }

  .tmc__current-groups { grid-template-columns: 1fr; }
  .tmc__current-contrast { grid-template-columns: 1fr; text-align: center; }
  .tmc__current-contrast-arrow { transform: rotate(90deg); }

  .tmc__pathway-groups { grid-template-columns: 1fr; }
  .tmc__why-real-grid { grid-template-columns: 1fr 1fr; }

  .tmc__debt-contrast { grid-template-columns: 1fr; }

  .tmc__tracks { padding: 0 6px; }
  .tmc__rungs { padding: 22px 6px; }
  .tmc__rung em { display: none; }

  .tmc__chain-wrap { overflow-x: auto; }
  .tmc__chain { flex-direction: row; }

  .tmc__good-grid { grid-template-columns: repeat(2, 1fr); }
  .tmc__distinct-grid { grid-template-columns: 1fr; }
  .tmc__data-grid { grid-template-columns: 1fr; }
  .tmc__spectrum-track { flex-wrap: wrap; gap: 20px; }
  .tmc__spectrum-track::before { display: none; }
}

@media (max-width: 767px) {
  .tmc__intro, .tmc__why, .tmc__spectrum-section, .tmc__pathways, .tmc__appplat, .tmc__debt, .tmc__integration, .tmc__cloud, .tmc__datadeps, .tmc__sequencing, .tmc__continuity, .tmc__security, .tmc__roadmap, .tmc__good, .tmc__distinct, .tmc__restraint, .tmc__connected, .tmc__faq { padding-top: 80px; padding-bottom: 80px; }
  .tmc__hero-title { font-size: 24px; }
  .tmc__hero-lead { font-size: 16.5px; }
  .tmc__title { font-size: 26px; }
  .tmc__cloud-text { font-size: 19px; }
  .tmc__good-tile--wide { grid-column: span 1; }
  .tmc__good-grid { grid-template-columns: 1fr; }
  .tmc__why-real-grid { grid-template-columns: 1fr; }
  .tmc__precedence-row { flex-direction: column; align-items: flex-start; gap: 6px; }

  .tmc__chain-wrap { overflow-x: visible; padding: 0; }
  .tmc__chain { flex-direction: column; width: 100%; }
  .tmc__chain-arrow { flex-direction: row; width: auto; transform: rotate(90deg); margin: 6px 0; }
  .tmc__chain-arrow span { display: none; }
  .tmc__chain-step { width: 100%; max-width: 340px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tmc__page * { transition-duration: .01ms !important; }
}

/* ============================================================
   CTO AS A SERVICE PAGE (cto__*)
   Scoped entirely to .cto__page (added on <main> of
   cto-as-a-service.html). Child of the Technology Consulting
   practice - shares its graphite/steel + garnet colour family for
   family resemblance, but uses its own layouts throughout: an
   executive "decision field" diagram in the hero (SVG connector
   lines converging domain nodes into a central decision layer,
   then diverging into outcomes), a two-column business/technology
   connector bridge, spectrum steps, contrast cards and a checklist
   panel - none of which reuse the parent's blueprint-band, orbit,
   lattice, constellation or scorecard compositions used elsewhere
   in the Technology Consulting family.
   ============================================================ */
.cto__page {
  --cto: #8C2A43;
  --cto-light: #B24560;
  --cto2: #56616F;
  --ctoh: #14161D;
  --ctot: #565C66;
  --ctob: #E2E4E8;
  --ctobg: #F5F6F8;
  --ctodark: #0F1116;
  --ctodark2: #181B22;
  --ctomuted: #A9AEB8;
  --ctodisplay: "Plus Jakarta Sans", sans-serif;
  font-family: "Kanit", sans-serif;
  background: #fff;
}

/* ---------- Shared section furniture ---------- */
.cto__page .cto__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--cto); margin-bottom: 16px; }
.cto__page .cto__title { font-family: var(--ctodisplay); font-size: 36px; line-height: 1.26; font-weight: 700; letter-spacing: -.5px; color: var(--ctoh); margin: 0 0 20px; }
.cto__page .cto__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ctoh); margin: 0 0 18px; }
.cto__page .cto__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ctot); margin: 0 0 16px; }
.cto__page .cto__text:last-child { margin-bottom: 0; }
.cto__page .cto__text a { color: var(--cto); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cto__page .cto__head { max-width: 800px; }
.cto__page .cto__head--center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 56px; }

.cto__page .cto__dark { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--ctodark) 0%, var(--ctodark2) 100%); }
.cto__page .cto__dark > .container { position: relative; z-index: 2; }
.cto__page .cto__dark .cto__eyebrow { color: #D08298; }
.cto__page .cto__dark .cto__title { color: #fff; }
.cto__page .cto__dark .cto__text { color: var(--ctomuted); }

.cto__page .cto__btn,
.cto__page .cto__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cto__page .cto__btn { color: #fff; background: var(--cto); border: 2px solid var(--cto); }
.cto__page .cto__btn:hover { background: var(--cto-light); border-color: var(--cto-light); color: #fff; }
.cto__page .cto__btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .3); background: transparent; }
.cto__page .cto__btn-ghost:hover { background: #fff; color: var(--ctodark); border-color: #fff; }

.cto__page .cto__link { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--cto); transition: gap .3s ease, color .3s ease; }
.cto__page .cto__link:hover { gap: 15px; color: var(--cto-light); }
.cto__page .cto__dark .cto__link { color: #E0A2B2; }
.cto__page .cto__dark .cto__link:hover { color: #fff; }

.cto__page .cto__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: rgba(140, 42, 67, .09); color: var(--cto); font-size: 20px; margin-bottom: 18px; }
.cto__page .cto__dark .cto__ico { background: rgba(140, 42, 67, .22); color: #E0A2B2; }

.cto__page .cto__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: rgba(86, 97, 111, .08); border: 1px solid var(--ctob); color: var(--ctoh); font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.cto__page .cto__dark .cto__chip { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #E7E8EB; }
.cto__page .cto__chip--link { text-decoration: none; font-weight: 500; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.cto__page .cto__dark .cto__chip--link:hover { background: var(--cto); border-color: var(--cto); color: #fff; }

/* ---------- 01. Hero: the executive decision field ---------- */
.cto__hero { position: relative; overflow: hidden; background: linear-gradient(175deg, var(--ctodark) 0%, var(--ctodark2) 100%); padding: 190px 0 110px; }
.cto__hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .5; 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: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 78%); }
.cto__hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.cto__hero-glow--1 { width: 520px; height: 520px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(140, 42, 67, .35), transparent 70%); }
.cto__hero-glow--2 { width: 460px; height: 460px; right: -140px; bottom: -160px; background: radial-gradient(circle, rgba(86, 97, 111, .3), transparent 70%); }
.cto__hero .container { position: relative; z-index: 2; }

.cto__hero-top { max-width: 880px; margin: 0 auto; text-align: center; }
.cto__hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); font-size: 12.5px; font-weight: 600; letter-spacing: .5px; color: #E0A2B2; margin-bottom: 24px; }
.cto__hero-title { font-family: var(--ctodisplay); font-size: 45px; line-height: 1.26; font-weight: 700; letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.cto__hero-title em { font-style: normal; color: #E0A2B2; }
.cto__hero-lead { font-size: 18.5px; font-weight: 300; line-height: 1.75; color: var(--ctomuted); max-width: 700px; margin: 0 auto 34px; }
.cto__hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* Scatter-to-order: a loose, hand-tilted pile of ownerless statements
   on the left "resolves" through a central executive layer into a
   calm, numbered, perfectly aligned decision list on the right.
   Physical disorder vs. order carries the meaning instead of a
   node-and-line network graph. */
.cto__resolve {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 76px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 20px;
  padding: 68px 44px 44px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
  overflow: hidden;
}
.cto__resolve-tag { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ctomuted); white-space: nowrap; z-index: 4; }

.cto__resolve-side { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.cto__resolve-side-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ctomuted); margin-bottom: 4px; }
.cto__resolve-side-label--accent { color: #E0A2B2; }

.cto__noise-card { max-width: 250px; padding: 11px 15px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .16); color: #B7BAC2; font-size: 12px; font-weight: 400; font-style: italic; line-height: 1.4; animation: ctoBob 6s ease-in-out infinite; }
.cto__noise-card--1 { transform: rotate(-6deg) translateX(6px); animation-delay: 0s; }
.cto__noise-card--2 { transform: rotate(4deg) translateX(-10px); animation-delay: .6s; opacity: .9; }
.cto__noise-card--3 { transform: rotate(-3deg) translateX(16px); animation-delay: 1.2s; }
.cto__noise-card--4 { transform: rotate(7deg) translateX(-6px); animation-delay: 1.8s; opacity: .85; }
.cto__noise-card--5 { transform: rotate(-8deg) translateX(10px); animation-delay: 2.4s; }
.cto__noise-card--6 { transform: rotate(3deg) translateX(-14px); animation-delay: 3s; opacity: .9; }

.cto__resolve-mid { position: relative; display: flex; align-items: center; justify-content: center; }
.cto__resolve-beam { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(224, 162, 178, .55), transparent); animation: ctoBeamPulse 3.4s ease-in-out infinite; }
.cto__resolve-mid-pill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 15px 20px; border-radius: 30px; background: var(--ctodark); border: 1px solid rgba(224, 162, 178, .4); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; box-shadow: 0 0 34px rgba(140, 42, 67, .4); }
.cto__resolve-mid-pill i { color: #E0A2B2; }

.cto__order-item { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: 9px; background: rgba(140, 42, 67, .13); border: 1px solid rgba(224, 162, 178, .28); color: #F3D7DE; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.cto__order-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cto); color: #fff; font-family: var(--ctodisplay); font-size: 10.5px; font-weight: 700; }

@keyframes ctoBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }
@keyframes ctoBeamPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.cto__hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 60px auto 0; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, .1); }
.cto__hero-pillar { display: flex; flex-direction: column; gap: 8px; }
.cto__hero-pillar strong { font-family: var(--ctodisplay); font-size: 15px; font-weight: 700; color: #fff; }
.cto__hero-pillar span { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ctomuted); }

/* ---------- 02. Positioning: editorial split with pull-quote ---------- */
.cto__intro { padding: 120px 0; background: #fff; }
.cto__intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.cto__intro-note { margin-top: 28px; padding: 18px 20px; border-radius: 10px; background: var(--ctobg); border-left: 3px solid var(--cto); font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ctot); }
.cto__intro-figure { position: relative; }
.cto__intro-figure img { width: 100%; border-radius: 16px; display: block; }
.cto__intro-quote { position: relative; margin: -50px 24px 0; padding: 26px 28px; border-radius: 12px; background: var(--ctodark); box-shadow: 0 20px 44px -18px rgba(15, 17, 22, .5); }
.cto__intro-quote p { margin: 0; font-family: var(--ctodisplay); font-size: 16.5px; font-weight: 600; line-height: 1.55; color: #fff; }
.cto__intro-quote::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--ctodisplay); font-size: 60px; font-weight: 700; color: var(--cto); line-height: 1; }

/* ---------- 03. You may not need a full-time CTO yet ---------- */
.cto__notyet { padding: 120px 0; }
.cto__notyet-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cto__notyet-group { padding: 28px 26px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.cto__notyet-group-title { display: flex; align-items: center; gap: 10px; font-family: var(--ctodisplay); font-size: 15.5px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.cto__notyet-group-title i { color: var(--cto-light); font-size: 14px; }
.cto__notyet-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cto__notyet-callout { max-width: 820px; margin: 56px auto 0; padding: 30px 34px; border-radius: 14px; border: 1px dashed rgba(224, 162, 178, .4); background: rgba(255, 255, 255, .03); text-align: center; }
.cto__notyet-callout i { color: var(--cto-light); font-size: 18px; margin-bottom: 10px; display: inline-block; }
.cto__notyet-callout p { margin: 0; font-family: var(--ctodisplay); font-size: 17px; font-weight: 600; line-height: 1.6; color: #fff; }

/* ---------- 04. Leadership models ---------- */
.cto__models { padding: 120px 0; background: #fff; }
.cto__model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cto__model-card { padding: 34px 30px; border-radius: 16px; background: var(--ctobg); border: 1px solid var(--ctob); transition: border-color .3s ease, transform .3s ease; }
.cto__model-card:hover { border-color: var(--cto); transform: translateY(-4px); }
.cto__model-card h3 { font-family: var(--ctodisplay); font-size: 19px; font-weight: 700; color: var(--ctoh); margin: 0 0 10px; }
.cto__model-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--ctot); margin: 0 0 14px; }
.cto__model-meta { display: block; font-size: 12px; font-weight: 600; color: var(--cto); }
.cto__models-note { max-width: 700px; margin: 40px auto 0; text-align: center; font-size: 14px; font-weight: 300; color: var(--ctot); }

/* ---------- 05. What the CTO function connects ---------- */
.cto__connect { padding: 120px 0; background: var(--ctobg); }
.cto__connect-grid { display: grid; grid-template-columns: 1fr .6fr 1fr; gap: 0; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.cto__connect-col { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 10px 26px; }
.cto__connect-col--business { align-items: flex-end; text-align: right; }
.cto__connect-col--tech { align-items: flex-start; text-align: left; }
.cto__connect-col-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cto); margin-bottom: 6px; }
.cto__connect-item { position: relative; padding: 13px 18px; border-radius: 9px; background: #fff; border: 1px solid var(--ctob); font-family: var(--ctodisplay); font-size: 14px; font-weight: 600; color: var(--ctoh); width: 100%; max-width: 240px; }
.cto__connect-col--business .cto__connect-item::after { content: ""; position: absolute; top: 50%; right: -26px; width: 26px; height: 1px; background: linear-gradient(90deg, var(--ctob), transparent); }
.cto__connect-col--tech .cto__connect-item::before { content: ""; position: absolute; top: 50%; left: -26px; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--ctob)); }
.cto__connect-spine { display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.cto__connect-spine-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 30px 20px; border-radius: 16px; background: linear-gradient(180deg, var(--ctodark), var(--ctodark2)); }
.cto__connect-spine-inner i { font-size: 24px; color: #E0A2B2; }
.cto__connect-spine-inner span { font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ctomuted); max-width: 170px; }
.cto__connect-statement { max-width: 760px; margin: 50px auto 0; text-align: center; font-family: var(--ctodisplay); font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--ctoh); }

/* ---------- 06. Decision ownership: split with expandable questions ---------- */
.cto__own { padding: 120px 0; background: #fff; }
.cto__own-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
.cto__own-intro { position: sticky; top: 130px; }
.cto__own-list { display: flex; flex-direction: column; gap: 12px; }
.cto__own-item { border-radius: 12px; background: var(--ctobg); border: 1px solid var(--ctob); overflow: hidden; }
.cto__own-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; text-align: left; font-family: var(--ctodisplay); font-size: 15px; font-weight: 600; color: var(--ctoh); cursor: pointer; }
.cto__own-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--cto); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.cto__own-item.is-open .cto__own-icon { background: var(--cto); color: #fff; transform: rotate(45deg); }
.cto__own-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.cto__own-item.is-open .cto__own-a { max-height: 220px; }
.cto__own-a p { margin: 0; padding: 0 22px 22px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--ctot); }

/* ---------- 07. Business direction -> technology consequences ---------- */
.cto__cons { padding: 120px 0; }
.cto__cons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cto__cons-card { padding: 28px 26px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.cto__cons-card-title { display: flex; align-items: center; gap: 10px; font-family: var(--ctodisplay); font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.cto__cons-card-title i { color: var(--cto-light); font-size: 15px; }
.cto__cons-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.cto__cons-statement { max-width: 760px; margin: 50px auto 0; text-align: center; font-family: var(--ctodisplay); font-size: 19px; font-weight: 600; color: #fff; }

/* ---------- 08. Strategy & investment prioritization ---------- */
.cto__strategy { padding: 120px 0; background: #fff; }
.cto__strategy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cto__strategy-distinction { margin-top: 24px; padding: 22px 24px; border-radius: 12px; background: var(--ctodark); }
.cto__strategy-distinction p { margin: 0 0 14px; font-family: var(--ctodisplay); font-size: 16px; font-weight: 600; line-height: 1.6; color: #fff; }
.cto__strategy-distinction .cto__link { color: #E0A2B2; }
.cto__strategy-distinction .cto__link:hover { color: #fff; }
.cto__strategy-sub { font-family: var(--ctodisplay); font-size: 14px; font-weight: 700; color: var(--ctoh); margin: 26px 0 14px; }
.cto__strategy-lists .cto__strategy-sub:first-child { margin-top: 0; }
.cto__strategy-factors { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 6px; }
.cto__strategy-domains { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cto__strategy-domains span { font-size: 13px; font-weight: 400; color: var(--ctot); position: relative; padding-left: 14px; }
.cto__strategy-domains span::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--cto); }
.cto__strategy-line { margin-top: 22px; font-family: var(--ctodisplay); font-size: 15.5px; font-weight: 600; color: var(--ctoh); }

/* ---------- 09. Architecture leadership ---------- */
.cto__arch { padding: 120px 0; background: var(--ctobg); }
.cto__arch-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.cto__arch-figure img { width: 100%; border-radius: 16px; display: block; }
.cto__arch-qlist { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cto__arch-qlist li { position: relative; padding-left: 20px; font-size: 14.5px; font-weight: 400; color: var(--ctoh); line-height: 1.6; }
.cto__arch-qlist li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--cto); transform: rotate(45deg); }
.cto__arch-statement { max-width: 780px; margin: 56px auto 0; text-align: center; font-family: var(--ctodisplay); font-size: 19px; font-weight: 600; color: var(--ctoh); }

/* ---------- 10. Product, engineering & delivery alignment ---------- */
.cto__eng { padding: 130px 0; }
.cto__eng-sub { font-family: var(--ctodisplay); font-size: 16.5px; font-weight: 700; color: #fff; margin: 56px 0 20px; text-align: center; }
.cto__eng-tension { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 960px; margin: 0 auto; }
.cto__eng-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
.cto__eng-compare-col { padding: 26px 28px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.cto__eng-compare-col--out { border-color: rgba(224, 162, 178, .25); }
.cto__eng-compare-label { display: flex; align-items: center; gap: 9px; font-family: var(--ctodisplay); font-size: 13.5px; font-weight: 700; letter-spacing: .5px; color: #fff; margin-bottom: 16px; }
.cto__eng-compare-col--in .cto__eng-compare-label i { color: #7FD8A4; }
.cto__eng-compare-col--out .cto__eng-compare-label i { color: #E0A2B2; }
.cto__eng-compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cto__eng-compare-col li { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ctomuted); padding-left: 16px; position: relative; }
.cto__eng-compare-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.cto__eng-delivery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 960px; margin: 0 auto; }
.cto__eng-delivery-item { padding: 14px 18px; border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); font-size: 13.5px; font-weight: 400; color: #E7E8EB; }
.cto__eng-statement { max-width: 760px; margin: 44px auto 0; text-align: center; font-family: var(--ctodisplay); font-size: 17px; font-weight: 600; color: #fff; }

/* ---------- 11. Technical debt, build vs buy & vendor decisions ---------- */
.cto__trade { padding: 120px 0; background: #fff; }
.cto__trade-block { max-width: 960px; margin: 0 auto 56px; }
.cto__trade-block:last-child { margin-bottom: 0; }
.cto__trade-block-title { font-family: var(--ctodisplay); font-size: 18px; font-weight: 700; color: var(--ctoh); margin: 0 0 22px; text-align: center; }
.cto__trade-contrast { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 20px; }
.cto__trade-contrast-card { padding: 24px 26px; border-radius: 14px; background: var(--ctobg); border: 1px solid var(--ctob); }
.cto__trade-contrast-card--risk { background: #fff; border-color: var(--cto); box-shadow: 0 20px 40px -26px rgba(140, 42, 67, .28); }
.cto__trade-contrast-label { display: block; font-family: var(--ctodisplay); font-size: 13.5px; font-weight: 700; color: var(--cto); margin-bottom: 10px; }
.cto__trade-contrast-card p { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ctot); }
.cto__trade-line { text-align: center; font-size: 14.5px; font-weight: 400; color: var(--ctot); max-width: 760px; margin: 0 auto; }
.cto__trade-vendor { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }

.cto__spectrum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.cto__spectrum-step { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 8px; background: var(--cto); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cto__spectrum i { color: var(--ctob); font-size: 11px; }
.cto__spectrum--center .cto__spectrum-step { background: #fff; border: 1px solid var(--ctob); color: var(--ctoh); }

/* ---------- 12. AI, cloud, risk & security direction ---------- */
.cto__domains { padding: 120px 0; background: var(--ctobg); }
.cto__domains-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cto__domain-card { padding: 30px 28px; border-radius: 14px; background: #fff; border: 1px solid var(--ctob); transition: border-color .3s ease, transform .3s ease; }
.cto__domain-card:hover { border-color: var(--cto); transform: translateY(-4px); }
.cto__domain-card h3 { font-family: var(--ctodisplay); font-size: 16.5px; font-weight: 700; color: var(--ctoh); margin: 0 0 10px; }
.cto__domain-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--ctot); margin: 0 0 14px; }

/* ---------- 13. Team, capability & hiring strategy ---------- */
.cto__team { padding: 120px 0; background: #fff; }
.cto__team-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin: 0 auto 30px; }
.cto__team-note { max-width: 700px; margin: 30px auto 0; text-align: center; font-size: 13.5px; font-weight: 300; color: var(--ctot); }

/* ---------- 14. Toward a permanent CTO ---------- */
.cto__transition { padding: 120px 0; }
.cto__transition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cto__transition-statement { margin-top: 20px; padding: 20px 22px; border-left: 3px solid var(--cto-light); font-family: var(--ctodisplay); font-size: 16px; font-weight: 600; line-height: 1.6; color: #fff; }
.cto__transition-checklist { padding: 30px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); }
.cto__transition-checklist-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #E0A2B2; margin-bottom: 18px; }
.cto__transition-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; font-weight: 300; line-height: 1.6; color: #E7E8EB; }
.cto__transition-item:last-child { border-bottom: none; }
.cto__transition-item i { color: #7FD8A4; margin-top: 3px; flex-shrink: 0; font-size: 12px; }

/* ---------- 15. Governance, cadence & board communication ---------- */
.cto__gov { padding: 120px 0; background: var(--ctobg); }
.cto__gov-principle { max-width: 820px; margin: 0 auto 50px; padding: 28px 32px; border-radius: 14px; background: #fff; border: 1px solid var(--ctob); }
.cto__gov-principle p { margin: 0; font-size: 15.5px; font-weight: 400; line-height: 1.8; color: var(--ctoh); }
.cto__gov-sub { text-align: center; font-family: var(--ctodisplay); font-size: 17px; font-weight: 700; color: var(--ctoh); margin: 0 0 14px; }
.cto__page .cto__gov-lead { max-width: 700px; margin: 0 auto 24px; text-align: center; }
.cto__gov-cadence { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin: 0 auto 26px; }
.cto__gov-line { text-align: center; max-width: 700px; margin: 0 auto; font-family: var(--ctodisplay); font-size: 15.5px; font-weight: 600; color: var(--ctoh); }

.cto__statement { padding: 130px 0; background: var(--ctodark); text-align: center; }
.cto__statement-text { max-width: 900px; margin: 0 auto 26px; font-family: var(--ctodisplay); font-size: 30px; line-height: 1.5; font-weight: 500; color: var(--ctomuted); }
.cto__statement-text span { color: #fff; font-weight: 700; }
.cto__statement-sub { max-width: 620px; margin: 0 auto; font-size: 15px; font-weight: 300; line-height: 1.7; color: #E0A2B2; }

/* ---------- 16. Roadmap & technical due diligence ---------- */
.cto__road { padding: 120px 0; background: #fff; }
.cto__road-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; margin-bottom: 20px; }
.cto__road-steps { display: flex; flex-wrap: wrap; gap: 10px; }
.cto__road-step { position: relative; padding: 13px 18px; border-radius: 8px; background: var(--ctobg); border: 1px solid var(--ctob); font-family: var(--ctodisplay); font-size: 12.5px; font-weight: 700; color: var(--ctoh); }
.cto__road-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--ctob); font-size: 13px; }
.cto__road-note { max-width: 760px; margin: 0 auto 60px; text-align: center; font-size: 13.5px; font-weight: 300; color: var(--ctot); }
.cto__road-dd { max-width: 900px; margin: 0 auto; padding: 34px 36px; border-radius: 16px; background: var(--ctobg); border: 1px solid var(--ctob); }
.cto__road-dd-title { font-family: var(--ctodisplay); font-size: 17px; font-weight: 700; color: var(--ctoh); margin: 0 0 14px; }
.cto__road-dd-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* ---------- 17. What the CTO function should not become ---------- */
.cto__notbecome { padding: 120px 0; }
.cto__notbecome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; margin: 0 auto 44px; }
.cto__notbecome-item { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); font-size: 13.5px; font-weight: 400; color: #E7E8EB; }
.cto__notbecome-item i { color: #C96B7E; font-size: 12px; flex-shrink: 0; }
.cto__notbecome-statement { max-width: 760px; margin: 0 auto; padding: 26px 30px; border-radius: 14px; background: rgba(140, 42, 67, .14); border: 1px solid rgba(224, 162, 178, .3); text-align: center; }
.cto__notbecome-statement p { margin: 0; font-family: var(--ctodisplay); font-size: 17px; font-weight: 600; line-height: 1.6; color: #fff; }

/* ---------- 18. What good looks like ---------- */
.cto__good { padding: 120px 0; background: var(--ctobg); }
.cto__good-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cto__good-tile { padding: 28px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--ctob); transition: border-color .3s ease, transform .3s ease; }
.cto__good-tile:hover { border-color: var(--cto); transform: translateY(-4px); }
.cto__good-tile h3 { font-family: var(--ctodisplay); font-size: 15px; font-weight: 700; color: var(--ctoh); margin: 0 0 8px; }
.cto__good-tile p { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--ctot); margin: 0; }

/* ---------- 19. Part of a connected practice ---------- */
.cto__grounded { padding: 120px 0; }
.cto__grounded-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.cto__grounded-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- 20. FAQ ---------- */
.cto__faq { padding: 120px 0; background: #fff; }
.cto__faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cto__faq-item { border-radius: 12px; border: 1px solid var(--ctob); overflow: hidden; }
.cto__faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--ctobg); border: none; text-align: left; font-family: var(--ctodisplay); font-size: 15.5px; font-weight: 600; color: var(--ctoh); cursor: pointer; }
.cto__faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--cto); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.cto__faq-item.is-open .cto__faq-q { background: var(--cto); color: #fff; }
.cto__faq-item.is-open .cto__faq-icon { background: #fff; color: var(--cto); transform: rotate(45deg); }
.cto__faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.cto__faq-item.is-open .cto__faq-a { max-height: 240px; }
.cto__faq-a p { margin: 0; padding: 22px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--ctot); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .cto__hero-title { font-size: 38px; }
  .cto__resolve { padding: 60px 30px 34px; }
  .cto__notyet-groups { grid-template-columns: repeat(2, 1fr); }
  .cto__model-grid { grid-template-columns: 1fr; }
  .cto__cons-grid { grid-template-columns: repeat(2, 1fr); }
  .cto__domains-grid { grid-template-columns: repeat(2, 1fr); }
  .cto__good-grid { grid-template-columns: repeat(2, 1fr); }
  .cto__notbecome-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .cto__hero { padding: 160px 0 90px; }
  .cto__hero-title { font-size: 32px; }
  .cto__hero-pillars { grid-template-columns: 1fr; gap: 26px; }

  .cto__resolve { grid-template-columns: 1fr; padding: 54px 24px 30px; gap: 18px; }
  .cto__resolve-tag { max-width: calc(100% - 48px); white-space: normal; text-align: center; font-size: 9px; letter-spacing: 1px; line-height: 1.5; }
  .cto__resolve-side { align-items: center; text-align: center; }
  .cto__resolve-mid { flex-direction: row; padding: 8px 0; }
  .cto__resolve-beam { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(224, 162, 178, .55), transparent); }
  .cto__noise-card--1, .cto__noise-card--2, .cto__noise-card--3, .cto__noise-card--4, .cto__noise-card--5, .cto__noise-card--6 { transform: none; max-width: 100%; }

  .cto__intro-grid, .cto__own-grid, .cto__road-grid, .cto__arch-grid, .cto__strategy-grid, .cto__transition-grid { grid-template-columns: 1fr; gap: 40px; }
  .cto__own-intro { position: static; }
  .cto__intro-quote { margin: -30px 16px 0; }

  .cto__connect-grid { grid-template-columns: 1fr; }
  .cto__connect-col--business, .cto__connect-col--tech { align-items: center; text-align: center; }
  .cto__connect-item { max-width: 100%; }
  .cto__connect-col--business .cto__connect-item::after, .cto__connect-col--tech .cto__connect-item::before { display: none; }

  .cto__eng-compare, .cto__eng-delivery { grid-template-columns: 1fr; }
  .cto__trade-contrast { grid-template-columns: 1fr; }
  .cto__notyet-groups { grid-template-columns: 1fr; }
  .cto__domains-grid { grid-template-columns: 1fr; }

  .cto__road-step:not(:last-child)::after { display: none; }
}

@media (max-width: 767px) {
  .cto__intro, .cto__notyet, .cto__models, .cto__connect, .cto__own, .cto__cons, .cto__strategy, .cto__arch, .cto__eng, .cto__trade, .cto__domains, .cto__team, .cto__transition, .cto__gov, .cto__statement, .cto__road, .cto__notbecome, .cto__good, .cto__grounded, .cto__faq { padding-top: 80px; padding-bottom: 80px; }
  .cto__hero-title { font-size: 27px; }
  .cto__hero-lead { font-size: 16.5px; }
  .cto__title { font-size: 27px; }
  .cto__good-grid, .cto__cons-grid, .cto__model-grid { grid-template-columns: 1fr; }
  .cto__statement-text { font-size: 22px; }
  .cto__notyet-group { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cto__page * { transition-duration: .01ms !important; }
  .cto__noise-card { animation: none; }
  .cto__resolve-beam { animation: none; opacity: .6; }
}

/* ============================================================
   INDUSTRIES PAGE (ind__*)
   Scoped entirely to .ind__page (added on <main> of industries.html).
   Sibling of the Solutions/Services landing pages - shares the same
   #005fcc/#8079f8/#07152F/Kanit brand language, but (like Solutions'
   .soln__hero "orbit") the opener is bespoke rather than the shared
   .development__area component: a .ind__hero "signal" diagram showing
   one constant capability core reshaped by each industry it touches -
   distinct from the full-bleed .ind__banner image beat that follows it.
   Past the opener the page runs its own composition: a priority ledger, a
   swipeable Swiper "deck" of oversized ghost-numeral cards for the full
   fourteen-industry list, a capability/outcome split, a staggered
   constraint grid, a three-column industry-capability map and a twin-
   column "patterns vs assumptions" section - none of which reuse the
   card-grid or bento layouts from Solutions/Services. Nothing here leaks
   to other pages.
   ============================================================ */
.ind__page {
  --ic: #005fcc;
  --ic2: #8079f8;
  --ic3: #4da3ff;
  --ih: #1c1e2b;
  --it: #6b7089;
  --ib: #e9eaf5;
  --ibg: #f6f7fc;
  --idark: #07152F;
  --imuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.ind__page .ind__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ic);
  margin-bottom: 18px;
}
.ind__page .ind__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--ih); margin: 0 0 20px; }
.ind__page .ind__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ih); margin: 0 0 18px; }
.ind__page .ind__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--it); margin: 0 0 16px; }
.ind__page .ind__text:last-child { margin-bottom: 0; }
.ind__page .ind__text a { color: var(--ic); text-decoration: underline; text-underline-offset: 3px; }
.ind__page .ind__text a:hover { color: var(--ic2); }
.ind__page .ind__head { max-width: 780px; }
.ind__page .ind__head--center { margin: 0 auto 0; text-align: center; }

/* ---------- 01. Page opener (bespoke .ind__hero signal diagram) ---------- */
.ind__header .menu-icon-2::after { display: none; }
.ind__hero {
  position: relative;
  overflow: hidden;
  padding: 160px 0 110px;
  background: linear-gradient(180deg, #fff 0%, var(--ibg) 100%);
}
.ind__hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 95, 204, .16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 78% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 78% 30%, #000 0%, transparent 72%);
}
.ind__hero > .container { position: relative; z-index: 1; }
.ind__hero-copy { max-width: 560px; }
.ind__hero-title { font-size: 46px; line-height: 1.16; font-weight: 600; color: var(--ih); margin: 0 0 20px; }
.ind__hero-copy .ind__lead { margin-bottom: 16px; }
.ind__hero-copy .ind__text { margin-bottom: 26px; }
.ind__hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ic);
  text-decoration: none;
  transition: gap .3s ease, color .3s ease;
}
.ind__hero-link i { font-size: 12px; transition: transform .3s ease; }
.ind__hero-link:hover { color: var(--ic2); gap: 14px; }
.ind__hero-link:hover i { transform: translateY(2px); }

/* ---- signal diagram: one core, reshaped per industry ---- */
.ind__signal { position: relative; max-width: 460px; margin: 0 auto; }
.ind__signal-heading {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--imuted);
  margin-bottom: 26px;
}
.ind__signal-core {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: 14px 24px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--ic), var(--ic2));
  box-shadow: 0 20px 40px rgba(0, 95, 204, .28);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-align: center;
  width: fit-content;
}
.ind__signal-core .ind__signal-dot { opacity: .55; }
.ind__signal-track { position: relative; padding: 30px 0 0; }
.ind__signal-spine {
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 28px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--ic3) 0 6px, transparent 6px 14px);
  animation: ind-spine-flow 1.4s linear infinite;
}
@keyframes ind-spine-flow { to { background-position: 0 -20px; } }
.ind__signal-gate {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
}
.ind__signal-ico {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--ib);
  color: var(--ic);
  font-size: 20px;
  box-shadow: 0 10px 26px rgba(28, 30, 43, .08);
  transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}
.ind__signal-gate:hover .ind__signal-ico {
  transform: scale(1.08);
  background: linear-gradient(135deg, var(--ic), var(--ic2));
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 95, 204, .3);
}
.ind__signal-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; }
.ind__signal-name { font-size: 15.5px; font-weight: 600; color: var(--ih); }
.ind__signal-arrow { font-size: 12px; font-style: italic; color: var(--imuted); }
.ind__signal-out { font-size: 13.5px; font-weight: 400; color: var(--ic); }

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ind__hero-title { font-size: 40px; }
}
@media only screen and (max-width: 1199px) {
  .ind__hero-title { font-size: 34px; }
  .ind__hero { padding: 150px 0 90px; }
}
@media only screen and (max-width: 991px) {
  .ind__signal { margin-top: 60px; max-width: 560px; }
}
@media only screen and (max-width: 767px) {
  .ind__hero-title { font-size: 27px; }
  .ind__hero { padding: 130px 0 70px; }
  .ind__signal-gate { grid-template-columns: 44px 1fr; gap: 14px; }
  .ind__signal-ico { width: 44px; height: 44px; font-size: 16px; }
  .ind__signal-spine { left: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .ind__signal-spine { animation: none; }
}

/* ---------- 02. Full-bleed visual ---------- */
.ind__banner {
  position: relative;
  width: 100%;
  min-height: 82vh;
  overflow: hidden;
  background: linear-gradient(180deg, #07152F 0%, #0b1c3d 100%);
}
.ind__banner img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.ind__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 47, .12) 0%, rgba(7, 21, 47, 0) 26%, rgba(7, 21, 47, 0) 68%, #fff 100%);
}
.ind__banner-cap {
  max-width: 640px;
  margin: 0 auto;
  padding: 44px 24px 0;
  text-align: center;
  position: relative;
}
.ind__banner-cap::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 auto 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ic), var(--ic2));
}
.ind__banner-cap p {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--it);
}
.ind__banner-cap strong { color: var(--ih); font-weight: 600; }
@media only screen and (max-width: 575px) {
  .ind__banner-cap { padding-top: 34px; }
  .ind__banner-cap p { font-size: 15.5px; }
}
@media only screen and (max-width: 767px) {
  .ind__banner { min-height: 46vh; }
}

/* ---------- 03. Industry context / priority ledger ---------- */
.ind__context { padding: 130px 0; background: #fff; }
.ind__context-grid { display: grid; grid-template-columns: 1fr .95fr; gap: 70px; align-items: start; }
.ind__ledger { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ib); }
.ind__ledger-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ib);
}
.ind__ledger-row dt { font-size: 16px; font-weight: 600; color: var(--ih); margin: 0; }
.ind__ledger-row dd { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--it); margin: 0; }
@media only screen and (max-width: 991px) {
  .ind__context-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media only screen and (max-width: 575px) {
  .ind__ledger-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- 04. Industry deck (swipeable carousel) ---------- */
/* A Swiper-driven "deck" of oversized cards with a huge ghost numeral
   behind each one - the interaction (drag/swipe a horizontal reel) and
   the card treatment (giant faded number, cycling accent per card) are
   both unique to this section; nothing else on the page scrolls
   horizontally or uses the ghost-numeral motif. Swiper is wired up the
   same way media-entertainment.html's .media__carousel does it (see
   the init script near the closing </body> tag). */
.ind__reel { padding: 130px 0; background: var(--ibg); overflow: hidden; }
.ind__reel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.ind__reel-head .ind__head { max-width: 640px; margin: 0; text-align: left; }
.ind__reel-nav { display: flex; gap: 10px; flex-shrink: 0; }
.ind__reel-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ib);
  background: #fff;
  color: var(--ih);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.ind__reel-nav button:hover { border-color: var(--ic); color: var(--ic); }
.ind__reel-nav button.swiper-button-disabled { opacity: .35; cursor: default; }
.ind__reel-carousel { padding-bottom: 54px !important; }
.ind__reel-carousel .swiper-slide { height: auto; }
.ind__reel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 34px 30px 30px;
  background: #fff;
  border: 1px solid var(--ib);
  border-radius: 20px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ind__reel-card:hover { transform: translateY(-6px); border-color: var(--ic); box-shadow: 0 26px 50px rgba(28, 30, 43, .1); }
.ind__reel-card > * { position: relative; z-index: 1; }
.ind__reel-num {
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--ic);
  opacity: .07;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.ind__reel-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ic), var(--ic2));
  color: #fff;
  font-size: 20px;
  margin-bottom: 22px;
}
.ind__reel-card h3 { font-size: 20px; font-weight: 600; color: var(--ih); margin: 0 0 10px; }
.ind__reel-card p { flex-grow: 1; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--it); margin: 0 0 18px; }
.ind__reel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ind__reel-tags span {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--ic);
  background: rgba(0, 95, 204, .08);
  border-radius: 20px;
  padding: 6px 12px;
}
.ind__reel-go { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ic); transition: gap .3s ease, color .3s ease; }
.ind__reel-card:hover .ind__reel-go { gap: 15px; color: var(--ic2); }
.ind__reel-card--b .ind__reel-ico { background: linear-gradient(135deg, var(--ic2), var(--ic3)); }
.ind__reel-card--b .ind__reel-num { color: var(--ic2); }
.ind__reel-card--c .ind__reel-ico { background: linear-gradient(135deg, var(--ic3), var(--ic)); }
.ind__reel-card--c .ind__reel-num { color: var(--ic3); }
.ind__reel-carousel .swiper-pagination-bullet { background: var(--ib); opacity: 1; width: 8px; height: 8px; transition: width .3s ease, border-radius .3s ease, background .3s ease; }
.ind__reel-carousel .swiper-pagination-bullet-active { background: linear-gradient(135deg, var(--ic), var(--ic2)); width: 22px; border-radius: 4px; }
@media only screen and (max-width: 767px) {
  .ind__reel-head { flex-direction: column; align-items: flex-start; }
  .ind__reel-num { font-size: 68px; }
  .ind__reel-card { padding: 28px 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ind__reel-card { transition: none; }
}

/* ---------- 05. One capability, different outcomes ---------- */
.ind__capability { padding: 130px 0; background: #fff; }
.ind__capability-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.ind__capability-figure {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(28, 30, 43, .13);
}
.ind__capability-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ind__cap-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--ib);
}
.ind__cap-row:last-of-type { border-bottom: 1px solid var(--ib); margin-bottom: 20px; }
.ind__cap-tag {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--ic);
  border-radius: 20px;
  padding: 6px 12px;
}
.ind__cap-row p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--it); margin: 0; }
.ind__cap-row p strong { color: var(--ih); font-weight: 600; }
@media only screen and (max-width: 991px) {
  .ind__capability-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media only screen and (max-width: 575px) {
  .ind__cap-row { flex-direction: column; gap: 8px; }
}

/* ---------- 06. Constraints (dark band) ---------- */
.ind__constraints { position: relative; overflow: hidden; padding: 130px 0; background: var(--idark); }
.ind__constraints::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 92% -10%, rgba(0, 95, 204, .3), transparent 62%),
              radial-gradient(700px 400px at 4% 108%, rgba(128, 121, 248, .24), transparent 64%);
}
.ind__constraints > .container { position: relative; z-index: 1; }
.ind__constraints .ind__eyebrow { color: var(--ic3); }
.ind__constraints .ind__title { color: #fff; }
.ind__constraints .ind__text { color: var(--imuted); }
.ind__constraints-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.ind__cc {
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  transition: all .35s ease;
}
.ind__cc:hover {
  background: rgba(0, 95, 204, .16);
  border-color: rgba(77, 163, 255, .5);
  transform: translateY(-4px);
}
.ind__cc i { color: var(--ic3); font-size: 18px; margin-bottom: 16px; display: block; }
.ind__cc h3 { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.ind__cc p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--imuted); margin: 0; }
@media only screen and (max-width: 1199px) {
  .ind__constraints-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 575px) {
  .ind__constraints-grid { grid-template-columns: 1fr; }
}

/* ---------- 07. Industry-capability map ---------- */
.ind__map { padding: 130px 0; background: #fff; }
.ind__map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.ind__map-col { max-width: 260px; margin: 0 auto; }
.ind__map-col h3 { font-size: 20px; font-weight: 600; color: var(--ih); margin: 0 0 26px; text-align: center; }
.ind__map-chain { list-style: none; margin: 0; padding: 0; position: relative; }
.ind__map-chain::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--ib);
}
.ind__map-chain li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--it);
}
.ind__map-chain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ic);
  transform: translateY(-50%);
  z-index: 1;
}
.ind__map-chain li:hover { color: var(--ic); }
@media only screen and (max-width: 767px) {
  .ind__map-grid { grid-template-columns: 1fr; gap: 46px; }
}

/* ---------- 08. Patterns vs assumptions (twin card) ---------- */
.ind__patterns { padding: 130px 0; background: var(--ibg); }
.ind__patterns-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  margin-top: 56px;
  align-items: stretch;
}
.ind__patterns-col {
  background: #fff;
  border: 1px solid var(--ib);
  border-radius: 18px;
  padding: 40px 42px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ind__patterns-col:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.ind__patterns-col--travel { margin-right: -26px; }
.ind__patterns-col--change { margin-left: -26px; }
.ind__patterns-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 18px;
  margin-bottom: 20px;
}
.ind__patterns-col--travel .ind__patterns-ico { background: rgba(0, 95, 204, .1); color: var(--ic); }
.ind__patterns-col--change .ind__patterns-ico { background: rgba(128, 121, 248, .12); color: var(--ic2); }
.ind__patterns-col h3 { font-size: 18px; font-weight: 600; color: var(--ih); margin: 0 0 18px; }
.ind__patterns-col ul { list-style: none; margin: 0; padding: 0; }
.ind__patterns-col li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--it);
  border-bottom: 1px solid var(--ib);
}
.ind__patterns-col li:last-child { border-bottom: none; }
.ind__patterns-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  font-size: 9px;
}
.ind__patterns-col--travel .ind__patterns-mark { background: rgba(0, 95, 204, .12); color: var(--ic); }
.ind__patterns-col--change .ind__patterns-mark { background: rgba(128, 121, 248, .14); color: var(--ic2); }
.ind__patterns-connector {
  position: relative;
  z-index: 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ib);
  box-shadow: 0 14px 30px rgba(28, 30, 43, .1);
  color: var(--ih);
  font-size: 16px;
}
@media only screen and (max-width: 767px) {
  .ind__patterns-grid { grid-template-columns: 1fr; }
  .ind__patterns-col--travel, .ind__patterns-col--change { margin: 0; }
  .ind__patterns-connector { margin: -22px auto; }
}

/* ---------- 09. Bridge to Solutions/Services ---------- */
.ind__bridge { padding: 130px 0; background: #fff; }
.ind__bridge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 56px; }
.ind__bridge-card {
  display: block;
  padding: 40px 36px;
  background: var(--ibg);
  border: 1px solid var(--ib);
  border-radius: 18px;
  transition: all .35s ease;
}
.ind__bridge-card:hover { transform: translateY(-6px); border-color: var(--ic); box-shadow: 0 22px 46px rgba(0, 95, 204, .1); background: #fff; }
.ind__bridge-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 95, 204, .25);
  background: rgba(0, 95, 204, .08);
  color: var(--ic);
  font-size: 20px;
  margin-bottom: 22px;
}
.ind__bridge-card h3 { font-size: 22px; font-weight: 600; color: var(--ih); margin: 0 0 12px; }
.ind__bridge-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--it); margin: 0 0 22px; }
.ind__bridge-go { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ic); transition: gap .3s ease, color .3s ease; }
.ind__bridge-card:hover .ind__bridge-go { gap: 15px; color: var(--ic2); }
@media only screen and (max-width: 767px) {
  .ind__bridge-grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive: section rhythm ---------- */
@media only screen and (max-width: 991px) {
  .ind__context, .ind__reel, .ind__capability, .ind__constraints, .ind__map, .ind__patterns, .ind__bridge { padding: 90px 0; }
  .ind__title { font-size: 32px; }
}
@media only screen and (max-width: 575px) {
  .ind__context, .ind__reel, .ind__capability, .ind__constraints, .ind__map, .ind__patterns, .ind__bridge { padding: 70px 0; }
  .ind__title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ind__page * { transition-duration: .01ms !important; }
}

/* ============================================================
   HEALTHCARE INDUSTRY PAGE (healthcare.html)
   Scoped entirely to .hc__page (added on <main> of healthcare.html).
   Child of the Industries landing page but deliberately not a copy of
   .ind__page's composition: no swipeable ghost-numeral deck, no
   full-bleed banner photograph. Instead the page is built around a
   single visual idea - an abstract "ecosystem" of patients, providers,
   data, AI and infrastructure - carried through a bespoke inline-SVG
   hero motif, a connected horizontal capability chain, a layered
   foundation stack and a vertical principles timeline. Palette is
   intentionally teal/lavender/warm-neutral rather than the site's
   default #005fcc blue, so the page reads as its own place while still
   sharing type, spacing and card grammar with the rest of 3Shadz.
   Nothing here leaks to other pages.
   ============================================================ */
.hc__page {
  --hc: #005fcc;
  --hc2: #8079f8;
  --hc3: #4da3ff;
  --hh: #1c1e2b;
  --ht: #6b7089;
  --hb: #e9eaf5;
  --hbg: #f6f7fc;
  --hwarm: #eef1fa;
  --hdark: #07152F;
  --hdark2: #0b1c3d;
  --hmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.hc__page .hc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--hc);
  margin-bottom: 18px;
}
.hc__page .hc__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--hh); margin: 0 0 20px; }
.hc__page .hc__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--hh); margin: 0 0 18px; }
.hc__page .hc__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ht); margin: 0 0 16px; }
.hc__page .hc__text:last-child { margin-bottom: 0; }
.hc__page .hc__text a { color: var(--hc); text-decoration: underline; text-underline-offset: 3px; }
.hc__page .hc__text a:hover { color: var(--hc2); }
.hc__page .hc__head { max-width: 760px; }
.hc__page .hc__head--center { margin: 0 auto 0; text-align: center; }
/* :where() keeps this at effectively zero specificity so any section that
   declares its own padding (e.g. .hc__hero) overrides it without !important. */
:where(.hc__page) section { padding: 130px 0; }
.hc__page .hc__btn,
.hc__page .hc__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.hc__page .hc__btn { color: #fff; background: var(--hc); border: 2px solid var(--hc); }
.hc__page .hc__btn:hover { background: #0c7a70; border-color: #0c7a70; color: #fff; }
.hc__page .hc__btn-outline { color: var(--hh); border: 2px solid var(--hb); background: transparent; }
.hc__page .hc__btn-outline:hover { border-color: var(--hc); color: var(--hc); }
.hc__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.hc__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--hmuted);
}
.hc__crumb a { color: var(--hmuted); transition: color .25s ease; }
.hc__crumb a:hover { color: #fff; }
.hc__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.hc__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (styled after .ai__hero: same dark band, glow ring,
   framed visual, floating chips and keyword marquee) ---------- */
.hc__hero {
  position: relative;
  overflow: hidden;
  background: var(--hdark);
  padding: 200px 0 120px;
}
.hc__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.hc__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.hc__hero > .container { position: relative; z-index: 2; }
.hc__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hc__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--hc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hc__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.hc__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--hc3), var(--hc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hc__hero-title em div div { background: linear-gradient(90deg, var(--hc3), var(--hc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hc__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.hc__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--hmuted); margin: 0 0 16px; }
.hc__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.hc__hero .hc__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.hc__hero .hc__btn-outline:hover { background: #fff; border-color: #fff; color: var(--hdark); }
.hc__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hc__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

/* Framed exactly like .ai__hero-figure frames its photograph: a spinning
   conic glow behind a bordered glass panel, with floating info chips. */
.hc__hero-figure { position: relative; }
.hc__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: hcKfSpin 26s linear infinite;
}
.hc__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.hc__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes hcKfSpin { to { transform: rotate(360deg); } }
.hc__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: hcKfChip 6s ease-in-out infinite;
}
.hc__hero-chip i { color: var(--hc3); font-size: 18px; }
.hc__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.hc__hero-chip span { font-size: 13px; font-weight: 300; color: var(--hmuted); }
.hc__hero-chip--1 { left: -34px; top: 12%; }
.hc__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes hcKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee (matches .ai__marquee) ---------- */
.hc__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.hc__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hc__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: hcKfMarquee 38s linear infinite; }
.hc__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.hc__marquee-track i { color: var(--hc3); font-size: 8px; }
@keyframes hcKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.hc__intro { background: #fff; }
.hc__intro-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: start; }
.hc__intro-copy .hc__title { font-size: 34px; }
.hc__intro-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.hc__intro-stat {
  padding: 24px 22px;
  border: 1px solid var(--hb);
  border-radius: 14px;
  background: var(--hbg);
}
.hc__intro-stat i { color: var(--hc); font-size: 18px; margin-bottom: 12px; display: block; }
.hc__intro-stat h4 { font-size: 15.5px; font-weight: 600; color: var(--hh); margin: 0 0 6px; }
.hc__intro-stat p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ht); margin: 0; }

/* ---------- 04. Ecosystem chain (flagship interactive section) ---------- */
.hc__web { background: var(--hbg); position: relative; }
.hc__web-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin-top: 64px;
}
.hc__web-chain::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 66px;
  height: 2px;
  background: linear-gradient(90deg, var(--hc), var(--hc2), var(--hc3), var(--hc), var(--hc2), var(--hc3));
  opacity: .35;
}
.hc__web-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0;
}
.hc__web-node:nth-child(even) { margin-top: 46px; }
.hc__web-dot {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hb);
  color: var(--hc);
  font-size: 21px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
  transition: all .35s ease;
}
.hc__web-node:nth-child(3n+2) .hc__web-dot { color: var(--hc2); }
.hc__web-node:nth-child(3n) .hc__web-dot { color: var(--hc3); }
.hc__web-num {
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ht);
  opacity: .6;
}
.hc__web-node h3 { font-size: 15.5px; font-weight: 600; color: var(--hh); margin: 16px 0 8px; line-height: 1.3; }
.hc__web-node p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ht); margin: 0; }
.hc__web-node:hover .hc__web-dot {
  transform: translateY(-6px) scale(1.06);
  border-color: var(--hc);
  box-shadow: 0 20px 40px rgba(15, 148, 136, .18);
}
.hc__web-arrow { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 46px; }
.hc__web-arrow span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ht);
  padding: 10px 22px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--hb);
}
.hc__web-arrow i { color: var(--hc); }

/* ---------- 05. Capabilities ---------- */
.hc__cap { background: #fff; }
.hc__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.hc__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--hb);
  border-radius: 18px;
  background: var(--hbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.hc__cap-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--hc), var(--hc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.hc__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--hc2), #a79af5); }
.hc__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--hc3), #8fc4ff); }
.hc__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(15, 148, 136, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.hc__cap-card:hover::before { transform: scaleX(1); }
.hc__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(15, 148, 136, .1);
  color: var(--hc);
  font-size: 20px;
  margin-bottom: 22px;
}
.hc__cap-card:nth-child(3n+2) .hc__cap-ico { background: rgba(124, 111, 240, .12); color: var(--hc2); }
.hc__cap-card:nth-child(3n) .hc__cap-ico { background: rgba(77, 163, 255, .14); color: var(--hc3); }
.hc__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--hh); margin: 0 0 12px; }
.hc__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ht); margin: 0; }

/* ---------- 06. Challenges (chip wall) ---------- */
.hc__constraints { background: var(--hwarm); }
.hc__constraints-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 54px; }
.hc__cc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--hb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hh);
  transition: all .3s ease;
}
.hc__cc:hover { border-color: var(--hc); box-shadow: 0 14px 30px rgba(28, 30, 43, .07); transform: translateY(-3px); }
.hc__cc i { color: var(--hc); font-size: 14px; }

/* ---------- 07. How We Think (vertical timeline) ---------- */
.hc__principles { background: #fff; }
.hc__principles-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.hc__timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.hc__timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--hb);
}
.hc__timeline li { position: relative; padding: 0 0 40px 66px; }
.hc__timeline li:last-child { padding-bottom: 0; }
.hc__timeline-num {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hb);
  color: var(--hc);
  font-size: 14px;
  font-weight: 600;
}
.hc__timeline h3 { font-size: 18.5px; font-weight: 600; color: var(--hh); margin: 6px 0 8px; }
.hc__timeline p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ht); margin: 0; }

/* ---------- 08. AI in Healthcare (dark) ---------- */
.hc__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--hdark) 0%, var(--hdark2) 100%); }
.hc__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(124, 111, 240, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(63, 205, 168, .22), transparent 64%);
}
.hc__ai > .container { position: relative; z-index: 1; }
.hc__ai .hc__eyebrow { color: var(--hc3); }
.hc__ai .hc__title { color: #fff; }
.hc__ai .hc__lead { color: #dcefe8; }
.hc__ai .hc__text { color: var(--hmuted); }
.hc__ai-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: start; margin-top: 8px; }
.hc__ai-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hc__ai-list li {
  position: relative;
  padding: 16px 18px 16px 48px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: #dcefe8;
  transition: all .3s ease;
}
.hc__ai-list li:hover { background: rgba(63, 205, 168, .14); border-color: rgba(63, 205, 168, .45); }
.hc__ai-list li::before {
  content: "\f0da";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  left: 20px;
  top: 17px;
  color: var(--hc3);
}
.hc__note {
  margin-top: 30px;
  padding: 22px 26px;
  border-left: 3px solid var(--hc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.hc__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--hmuted); margin: 0; }
.hc__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & Cloud foundation (layered stack) ---------- */
.hc__foundation { background: #fff; }
.hc__foundation-grid { display: grid; grid-template-columns: 1fr .95fr; gap: 70px; align-items: center; }
.hc__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 12px; }
.hc__stack li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--hb);
  background: linear-gradient(180deg, rgba(15, 148, 136, .05), rgba(124, 111, 240, .05));
  backdrop-filter: blur(2px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hc__stack li:hover { transform: translateX(6px); box-shadow: 0 14px 30px rgba(28, 30, 43, .08); }
.hc__stack li:nth-child(1) { width: 100%; }
.hc__stack li:nth-child(2) { width: 92%; }
.hc__stack li:nth-child(3) { width: 84%; }
.hc__stack li:nth-child(4) { width: 76%; }
.hc__stack li:nth-child(5) { width: 68%; background: linear-gradient(90deg, rgba(15, 148, 136, .12), rgba(124, 111, 240, .12)); border-color: rgba(15, 148, 136, .35); }
.hc__stack .hc__stack-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  color: var(--hc);
  font-size: 16px;
}
.hc__stack strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--hh); }
.hc__stack span { font-size: 13px; font-weight: 300; color: var(--ht); }

/* ---------- 10. Perspectives ---------- */
.hc__persp { background: var(--hbg); }
.hc__persp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.hc__persp-panel {
  padding: 38px 34px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--hb);
  border-top: 3px solid var(--hc);
}
.hc__persp-panel:nth-child(2) { border-top-color: var(--hc2); }
.hc__persp-panel:nth-child(3) { border-top-color: var(--hc3); }
.hc__persp-panel h3 { font-size: 20px; font-weight: 600; color: var(--hh); margin: 0 0 12px; }
.hc__persp-panel > p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--ht); margin: 0 0 20px; }
.hc__persp-panel ul { list-style: none; margin: 0; padding: 0; }
.hc__persp-panel li {
  position: relative;
  padding: 9px 0 9px 24px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--hh);
  border-top: 1px solid var(--hb);
}
.hc__persp-panel li:first-of-type { border-top: none; }
.hc__persp-panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 12px; color: var(--hc); }
.hc__persp-panel:nth-child(2) li::before { color: var(--hc2); }
.hc__persp-panel:nth-child(3) li::before { color: var(--hc3); }

/* ---------- 11. Engagement model ---------- */
.hc__engage { background: #fff; }
.hc__engage-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 60px; position: relative; }
.hc__engage-row::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  height: 1px;
  background: var(--hb);
}
.hc__engage-step { position: relative; text-align: center; }
.hc__engage-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--hdark);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hc__engage-step h3 { font-size: 16.5px; font-weight: 600; color: var(--hh); margin: 0 0 8px; }
.hc__engage-step p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ht); margin: 0; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.hc__tech { background: var(--hbg); }
.hc__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.hc__tech-tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--hb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hh);
  transition: all .3s ease;
}
.hc__tech-tags li:hover { border-color: var(--hc); color: var(--hc); transform: translateY(-3px); }
.hc__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--hb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.hc__related span { font-size: 13.5px; font-weight: 500; color: var(--ht); text-transform: uppercase; letter-spacing: 1.5px; }
.hc__related a { font-size: 14.5px; font-weight: 500; color: var(--hh); transition: color .25s ease; }
.hc__related a:hover { color: var(--hc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hc__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .hc__page .hc__title { font-size: 32px; }
  :where(.hc__page) section { padding: 100px 0; }
  .hc__hero { padding: 170px 0 100px; }
  .hc__hero-title { font-size: 38px; }
  .hc__hero-grid,
  .hc__intro-grid,
  .hc__principles-grid,
  .hc__ai-grid,
  .hc__foundation-grid { grid-template-columns: 1fr; gap: 48px; }
  .hc__hero-figure { max-width: 480px; margin: 0 auto; }
  .hc__hero-chip--1 { left: -14px; }
  .hc__hero-chip--2 { right: -10px; }
  .hc__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .hc__web-chain { grid-template-columns: repeat(3, 1fr); row-gap: 46px; }
  .hc__web-chain::before { display: none; }
  .hc__web-node:nth-child(even) { margin-top: 0; }
  .hc__engage-row { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}
@media only screen and (max-width: 991px) {
  .hc__ai-list { grid-template-columns: 1fr; }
  .hc__persp-grid { grid-template-columns: 1fr; }
  .hc__engage-row { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .hc__engage-row::before { display: none; }
}
@media only screen and (max-width: 767px) {
  .hc__page .hc__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .hc__page .hc__title { font-size: 26px; }
  .hc__page .hc__lead { font-size: 16.5px; }
  :where(.hc__page) section { padding: 76px 0; }
  .hc__hero { padding: 140px 0 76px; }
  .hc__hero-title { font-size: 29px; }
  .hc__hero-lead { font-size: 16.5px; }
  .hc__hero-chip { display: none; }
  .hc__cap-grid { grid-template-columns: 1fr; }
  .hc__web-chain { grid-template-columns: 1fr 1fr; }
  .hc__intro-stats { grid-template-columns: 1fr; }
  .hc__stack li,
  .hc__stack li:nth-child(2),
  .hc__stack li:nth-child(3),
  .hc__stack li:nth-child(4),
  .hc__stack li:nth-child(5) { width: 100%; }
}
@media only screen and (max-width: 575px) {
  .hc__web-chain { grid-template-columns: 1fr; }
  .hc__engage-row { grid-template-columns: 1fr; }
  .hc__constraints-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc__page * { transition-duration: .01ms !important; }
  .hc__hero-glow,
  .hc__hero-chip,
  .hc__marquee-track { animation: none; }
}

/* ============================================================
   BANKING & FINANCIAL SERVICES INDUSTRY PAGE
   (banking-financial-service.html)
   Scoped entirely to .bank__page. Sibling of .hc__page (same Industries
   family, same brand blue/purple, same hero grammar - glow ring, framed
   visual, floating chips, keyword marquee) but every content section
   past the hero uses a different composition on purpose: a before/after
   comparison instead of a connected chain, an alternating zigzag list
   instead of a card grid, a bordered risk ledger instead of a chip wall,
   flat principle cards instead of a timeline, a linear decision-flow
   instead of a chip list, a bento grid instead of a layered stack, and
   a three-column matrix instead of independent panels. Nothing here
   leaks to other pages.
   ============================================================ */
.bank__page {
  --bc: #005fcc;
  --bc2: #8079f8;
  --bc3: #4da3ff;
  --bh: #1c1e2b;
  --bt: #6b7089;
  --bb: #e9eaf5;
  --bbg: #f6f7fc;
  --bdark: #07152F;
  --bmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.bank__page .bank__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--bc);
  margin-bottom: 18px;
}
.bank__page .bank__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--bh); margin: 0 0 20px; }
.bank__page .bank__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--bh); margin: 0 0 18px; }
.bank__page .bank__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--bt); margin: 0 0 16px; }
.bank__page .bank__text:last-child { margin-bottom: 0; }
.bank__page .bank__text a { color: var(--bc); text-decoration: underline; text-underline-offset: 3px; }
.bank__page .bank__text a:hover { color: var(--bc2); }
.bank__page .bank__head { max-width: 760px; }
.bank__page .bank__head--center { margin: 0 auto 0; text-align: center; }
:where(.bank__page) section { padding: 130px 0; }
.bank__page .bank__btn,
.bank__page .bank__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.bank__page .bank__btn { color: #fff; background: var(--bc); border: 2px solid var(--bc); }
.bank__page .bank__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.bank__page .bank__btn-outline { color: var(--bh); border: 2px solid var(--bb); background: transparent; }
.bank__page .bank__btn-outline:hover { border-color: var(--bc); color: var(--bc); }
.bank__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.bank__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--bmuted);
}
.bank__crumb a { color: var(--bmuted); transition: color .25s ease; }
.bank__crumb a:hover { color: #fff; }
.bank__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.bank__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (same grammar as .hc__hero / .ai__hero, mirrored:
   the framed visual sits on the LEFT here so the page doesn't read as a
   copy of the Healthcare page, which puts it on the right) ---------- */
.bank__hero {
  position: relative;
  overflow: hidden;
  background: var(--bdark);
  padding: 200px 0 120px;
}
.bank__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 14% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 96% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.bank__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.bank__hero > .container { position: relative; z-index: 2; }
.bank__hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: start; }
.bank__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--bc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.bank__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.bank__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--bc3), var(--bc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bank__hero-title em div div { background: linear-gradient(90deg, var(--bc3), var(--bc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bank__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.bank__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--bmuted); margin: 0 0 16px; }
.bank__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.bank__hero .bank__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.bank__hero .bank__btn-outline:hover { background: #fff; border-color: #fff; color: var(--bdark); }
.bank__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bank__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

/* Abstract "ledger network" motif - a grid of orthogonally-connected
   ledger blocks around a highlighted settlement core, evoking a network
   of accounts and transactions without a dollar-sign cliche. Purely
   decorative and aria-hidden. */
.bank__hero-figure { position: relative; margin-top: 135px; }
.bank__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: bankKfSpin 26s linear infinite;
}
.bank__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.bank__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes bankKfSpin { to { transform: rotate(360deg); } }
.bank__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: bankKfChip 6s ease-in-out infinite;
}
.bank__hero-chip i { color: var(--bc3); font-size: 18px; }
.bank__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.bank__hero-chip span { font-size: 13px; font-weight: 300; color: var(--bmuted); }
.bank__hero-chip--1 { left: -30px; top: 10%; }
.bank__hero-chip--2 { right: -26px; bottom: 8%; animation-delay: 3s; }
@keyframes bankKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.bank__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.bank__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bank__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: bankKfMarquee 40s linear infinite; }
.bank__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.bank__marquee-track i { color: var(--bc3); font-size: 8px; }
@keyframes bankKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction (centered statement + horizontal ledger
   strip, instead of Healthcare's copy+icon-card grid) ---------- */
.bank__intro { background: #fff; }
.bank__intro-copy { max-width: 780px; margin: 0 auto; text-align: center; }
.bank__intro-copy .bank__title { font-size: 34px; }
.bank__intro-copy .bank__lead { font-size: 19px; }
.bank__ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--bb); margin-top: 60px; }
.bank__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--bb);
  transition: background .3s ease;
}
.bank__ledger-col:first-child { border-left: none; }
.bank__ledger-col:hover { background: var(--bbg); }
.bank__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--bh); margin: 0 0 8px; }
.bank__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--bt); margin: 0; }

/* ---------- 04. Modernization comparison (flagship section - replaces
   Healthcare's connected ecosystem chain with a before/after split) ---------- */
.bank__compare { background: var(--bbg); }
.bank__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 58px; }
.bank__compare-col { border: 1px solid var(--bb); border-radius: 18px; padding: 34px 32px; background: #fff; }
.bank__compare-col--new { border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 50px rgba(28, 30, 43, .1); }
.bank__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bt);
  margin-bottom: 18px;
}
.bank__compare-col--new .bank__compare-tag { color: var(--bc); }
.bank__compare-col ul { list-style: none; margin: 0; padding: 0; }
.bank__compare-col li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--bt);
}
.bank__compare-col li:last-child { margin-bottom: 0; }
.bank__compare-col li::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 4px;
  color: #b6bccd;
}
.bank__compare-col--new li { color: var(--bh); }
.bank__compare-col--new li::before { content: "\f00c"; color: var(--bc); }
.bank__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bc), var(--bc2));
  color: #fff;
  font-size: 17px;
}

/* ---------- 05. Capabilities (flagship - alternating zigzag rows
   instead of Healthcare's uniform card grid) ---------- */
.bank__cap { background: #fff; }
.bank__cap-list { list-style: none; margin: 60px 0 0; padding: 0; }
.bank__cap-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--bb);
}
.bank__cap-list li:last-child .bank__cap-row { border-bottom: 1px solid var(--bb); }
.bank__cap-row:nth-child(even) { direction: rtl; }
.bank__cap-row:nth-child(even) > * { direction: ltr; }
.bank__cap-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bank__cap-num { font-size: 15px; font-weight: 600; letter-spacing: 2px; color: rgba(0, 95, 204, .35); }
.bank__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(0, 95, 204, .1);
  color: var(--bc);
  font-size: 22px;
}
.bank__cap-list li:nth-child(3n+2) .bank__cap-ico { background: rgba(128, 121, 248, .12); color: var(--bc2); }
.bank__cap-list li:nth-child(3n) .bank__cap-ico { background: rgba(77, 163, 255, .14); color: var(--bc3); }
.bank__cap-row h3 { font-size: 22px; font-weight: 600; color: var(--bh); margin: 0 0 10px; }
.bank__cap-row p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--bt); margin: 0; max-width: 640px; }

/* ---------- 06. Risk ledger (flagship - bordered list rows instead of
   Healthcare's pill chip wall) ---------- */
.bank__risk { background: var(--bbg); }
.bank__risk-list { list-style: none; margin: 54px 0 0; padding: 0; display: grid; gap: 12px; }
.bank__risk-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
  border-left: 3px solid var(--bc);
  border-radius: 0 12px 12px 0;
  background: #fff;
  transition: all .3s ease;
}
.bank__risk-list li:hover { box-shadow: 0 16px 34px rgba(28, 30, 43, .08); transform: translateX(4px); }
.bank__risk-list li:nth-child(3n+2) { border-left-color: var(--bc2); }
.bank__risk-list li:nth-child(3n) { border-left-color: var(--bc3); }
.bank__risk-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bbg);
  color: var(--bc);
  font-size: 15px;
  margin-top: 2px;
}
.bank__risk-list li strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--bh); margin-bottom: 3px; }
.bank__risk-list li span { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--bt); }

/* ---------- Scope & responsibility statement (centerpiece band before
   the final CTA) ---------- */
.bank__scope { padding: 64px 0; background: var(--bbg); border-top: 1px solid var(--bb); }
.bank__scope-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.bank__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--bb);
  color: var(--bc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.bank__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--bh);
  margin: 0;
}

/* ---------- 07. How We Think (flagship - flat principle cards in a row
   instead of Healthcare's vertical timeline) ---------- */
.bank__principles { background: #fff; }
.bank__principle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 58px; }
.bank__principle {
  padding: 30px 24px;
  border: 1px solid var(--bb);
  border-radius: 16px;
  background: var(--bbg);
  transition: all .3s ease;
}
.bank__principle:hover { background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 20px 40px rgba(28, 30, 43, .08); transform: translateY(-4px); }
.bank__principle-num { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--bc); margin-bottom: 14px; }
.bank__principle h3 { font-size: 16.5px; font-weight: 600; color: var(--bh); margin: 0 0 10px; line-height: 1.35; }
.bank__principle p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--bt); margin: 0; }

/* ---------- 08. AI decision flow (flagship dark section - a linear
   pipeline instead of Healthcare's two-column chip list) ---------- */
.bank__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bdark) 0%, #0b1c3d 100%); }
.bank__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.bank__ai > .container { position: relative; z-index: 1; }
.bank__ai .bank__eyebrow { color: var(--bc3); }
.bank__ai .bank__title { color: #fff; }
.bank__ai .bank__lead { color: #dbe6f4; }
.bank__ai .bank__text { color: var(--bmuted); }
.bank__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 60px; position: relative; }
.bank__flow-step { position: relative; padding: 0 24px; text-align: center; }
.bank__flow-step:not(:last-child)::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -6px;
  top: 34px;
  font-size: 14px;
  color: rgba(77, 163, 255, .5);
}
.bank__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--bc3);
  font-size: 24px;
  margin-bottom: 20px;
}
.bank__flow-step h3 { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.bank__flow-step p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--bmuted); margin: 0; }
.bank__note {
  margin: 46px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--bc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.bank__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--bmuted); margin: 0; }
.bank__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data, cloud & security (flagship - three equal rows
   instead of Healthcare's vertical layered stack) ---------- */
.bank__foundation { background: #fff; }
.bank__bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 20px; margin-top: 58px; align-items: stretch; }
.bank__bento-card {
  padding: 34px 32px;
  border: 1px solid var(--bb);
  border-radius: 18px;
  background: var(--bbg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all .3s ease;
}
.bank__bento-card:hover { background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.bank__bento-card--e { grid-column: span 2; }
.bank__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 95, 204, .1);
  color: var(--bc);
  font-size: 20px;
  margin-bottom: 18px;
}
.bank__bento-card--b .bank__bento-ico,
.bank__bento-card--d .bank__bento-ico { background: rgba(128, 121, 248, .12); color: var(--bc2); }
.bank__bento-card--c .bank__bento-ico,
.bank__bento-card--e .bank__bento-ico { background: rgba(77, 163, 255, .14); color: var(--bc3); }
.bank__bento-card h3 { font-size: 19px; font-weight: 600; color: var(--bh); margin: 0 0 10px; }
.bank__bento-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--bt); margin: 0; }

/* ---------- 10. Perspectives matrix (flagship - shared-row matrix
   instead of Healthcare's three independent panels) ---------- */
.bank__matrix { background: var(--bbg); }
.bank__matrix-table { margin-top: 58px; border: 1px solid var(--bb); border-radius: 18px; overflow: hidden; background: #fff; }
.bank__matrix-row { display: grid; grid-template-columns: 200px repeat(3, 1fr); border-top: 1px solid var(--bb); }
.bank__matrix-row:first-child { border-top: none; }
.bank__matrix-row--head { background: var(--bdark); }
.bank__matrix-row--head .bank__matrix-cell { color: #fff; font-weight: 600; font-size: 15px; }
.bank__matrix-label {
  padding: 22px 24px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--bt);
  background: var(--bbg);
  display: flex;
  align-items: center;
}
.bank__matrix-row--head .bank__matrix-label { background: transparent; color: var(--bmuted); }
.bank__matrix-cell {
  padding: 22px 22px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--bt);
  border-left: 1px solid var(--bb);
}
.bank__matrix-row--head .bank__matrix-cell { border-left-color: rgba(255, 255, 255, .12); }

/* ---------- 11. Engagement model (flagship - vertical agenda list with
   large numerals, instead of Healthcare's horizontal step circles) ---------- */
.bank__engage { background: #fff; }
.bank__agenda { list-style: none; margin: 58px 0 0; padding: 0; }
.bank__agenda li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--bb);
}
.bank__agenda li:last-child { border-bottom: 1px solid var(--bb); }
.bank__agenda-num { font-size: 34px; font-weight: 600; color: rgba(0, 95, 204, .18); line-height: 1; }
.bank__agenda h3 { font-size: 19px; font-weight: 600; color: var(--bh); margin: 0 0 8px; }
.bank__agenda p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--bt); margin: 0; max-width: 640px; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.bank__tech { padding-bottom: 66px; background: var(--bbg); }
.bank__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.bank__tech-tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--bb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--bh);
  transition: all .3s ease;
}
.bank__tech-tags li:hover { border-color: var(--bc); color: var(--bc); transform: translateY(-3px); }
.bank__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--bb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.bank__related span { font-size: 13.5px; font-weight: 500; color: var(--bt); text-transform: uppercase; letter-spacing: 1.5px; }
.bank__related a { font-size: 14.5px; font-weight: 500; color: var(--bh); transition: color .25s ease; }
.bank__related a:hover { color: var(--bc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .bank__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .bank__page .bank__title { font-size: 32px; }
  :where(.bank__page) section { padding: 100px 0; }
  .bank__hero { padding: 170px 0 100px; }
  .bank__hero-title { font-size: 38px; }
  .bank__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .bank__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .bank__hero-chip--1 { left: -14px; }
  .bank__hero-chip--2 { right: -10px; }
  .bank__ledger { grid-template-columns: repeat(3, 1fr); }
  .bank__ledger-col:nth-child(3n+1) { border-left: none; }
  .bank__ledger-col:nth-child(n+4) { border-top: 1px solid var(--bb); padding-top: 26px; margin-top: 26px; }
  .bank__compare-grid { grid-template-columns: 1fr; }
  .bank__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .bank__cap-row { grid-template-columns: 100px 1fr; gap: 26px; }
  .bank__flow { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
  .bank__flow-step:nth-child(2)::after { display: none; }
  .bank__principle-row { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 991px) {
  .bank__matrix-row { grid-template-columns: 140px repeat(3, 1fr); }
  .bank__matrix-cell,
  .bank__matrix-label { padding: 18px 14px; font-size: 13px; }
}
@media only screen and (max-width: 767px) {
  .bank__page .bank__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .bank__page .bank__title { font-size: 26px; }
  .bank__page .bank__lead { font-size: 16.5px; }
  .bank__scope p { font-size: 16.5px; }
  :where(.bank__page) section { padding: 76px 0; }
  .bank__hero { padding: 140px 0 76px; }
  .bank__hero-title { font-size: 29px; }
  .bank__hero-lead { font-size: 16.5px; }
  .bank__hero-chip { display: none; }
  .bank__ledger { grid-template-columns: 1fr; }
  .bank__ledger-col { border-left: none !important; border-top: 1px solid var(--bb); padding-top: 22px; margin-top: 22px; }
  .bank__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .bank__cap-row,
  .bank__cap-row:nth-child(even) { grid-template-columns: 1fr; direction: ltr; text-align: center; }
  .bank__cap-mark { align-items: center; }
  .bank__cap-row p { margin: 0 auto; }
  .bank__flow { grid-template-columns: 1fr; row-gap: 40px; }
  .bank__flow-step::after { display: none; }
  .bank__principle-row { grid-template-columns: 1fr 1fr; }
  .bank__bento { grid-template-columns: 1fr; }
  .bank__bento-card--e { grid-column: span 1; }
  .bank__matrix-row { grid-template-columns: 1fr; }
  .bank__matrix-label { border-top: 1px solid var(--bb); }
  .bank__matrix-row:first-child .bank__matrix-label { border-top: none; }
  .bank__matrix-cell { border-left: none; border-top: 1px solid var(--bb); }
  .bank__agenda li { grid-template-columns: 1fr; gap: 8px; }
}
@media only screen and (max-width: 575px) {
  .bank__principle-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bank__page * { transition-duration: .01ms !important; }
  .bank__hero-glow,
  .bank__hero-chip,
  .bank__marquee-track { animation: none; }
}

/* ============================================================
   CASE STUDY: AXIS DIRECT (case-study-1.html)
   Scoped entirely to .axis__page. Same section grammar as the
   Industries pages (framed hero, marquee, ledger, zigzag caps,
   dark flow band, bento grids, risk list, vertical agenda) so it
   reads as one design system, but recolored around the Axis
   Direct brand's warm terracotta/amber palette instead of the
   Industries pages' blue/purple, and extended with a two-column
   spec table and a project-highlights spec sheet that the
   Industries template doesn't need. Nothing here leaks elsewhere.
   ============================================================ */
.axis__page {
  --axc: #d2703f;
  --axc2: #b0472e;
  --axc3: #eaa860;
  --axh: #1c1e2b;
  --axt: #6b7089;
  --axb: #ece5db;
  --axbg: #faf7f3;
  --axdark: #07152F;
  --axmuted: #d9c9b8;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.axis__page .axis__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--axc);
  margin-bottom: 18px;
}
.axis__page .axis__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--axh); margin: 0 0 20px; }
.axis__page .axis__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--axh); margin: 0 0 18px; }
.axis__page .axis__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--axt); margin: 0 0 16px; }
.axis__page .axis__text:last-child { margin-bottom: 0; }
.axis__page .axis__text a { color: var(--axc); text-decoration: underline; text-underline-offset: 3px; }
.axis__page .axis__text a:hover { color: var(--axc2); }
.axis__page .axis__head { max-width: 760px; }
.axis__page .axis__head--center { margin: 0 auto 0; text-align: center; }
:where(.axis__page) section { padding: 130px 0; }
.axis__page .axis__btn,
.axis__page .axis__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.axis__page .axis__btn { color: #fff; background: var(--axc); border: 2px solid var(--axc); }
.axis__page .axis__btn:hover { background: var(--axc2); border-color: var(--axc2); color: #fff; }
.axis__page .axis__btn-outline { color: var(--axh); border: 2px solid var(--axb); background: transparent; }
.axis__page .axis__btn-outline:hover { border-color: var(--axc); color: var(--axc); }
.axis__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.axis__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--axmuted);
}
.axis__crumb a { color: var(--axmuted); transition: color .25s ease; }
.axis__crumb a:hover { color: #fff; }
.axis__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.axis__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero ---------- */
.axis__hero {
  position: relative;
  overflow: hidden;
  background: var(--axdark);
  padding: 200px 0 120px;
}
.axis__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 96% -12%, rgba(210, 112, 63, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(234, 168, 96, .24), transparent 64%);
}
.axis__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.axis__hero > .container { position: relative; z-index: 2; }
.axis__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: start; }
.axis__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(234, 168, 96, .35);
  background: rgba(234, 168, 96, .1);
  color: var(--axc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.axis__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.axis__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--axc3), var(--axc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.axis__hero-title em div div { background: linear-gradient(90deg, var(--axc3), var(--axc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.axis__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #f2e6da; margin: 0 0 18px; }
.axis__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--axmuted); margin: 0 0 16px; }
.axis__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.axis__hero .axis__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.axis__hero .axis__btn-outline:hover { background: #fff; border-color: #fff; color: var(--axdark); }
.axis__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.axis__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #f3e4d3;
  font-size: 13px;
  font-weight: 300;
}
.axis__hero-figure { position: relative; margin-top: 6px; }
.axis__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(210, 112, 63, .55), rgba(234, 168, 96, .45), rgba(176, 71, 46, .45), rgba(210, 112, 63, .55));
  filter: blur(70px);
  opacity: .55;
  animation: axisKfSpin 26s linear infinite;
}
.axis__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.axis__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes axisKfSpin { to { transform: rotate(360deg); } }
.axis__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: axisKfChip 6s ease-in-out infinite;
}
.axis__hero-chip i { color: var(--axc3); font-size: 18px; }
.axis__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.axis__hero-chip span { font-size: 13px; font-weight: 300; color: var(--axmuted); }
.axis__hero-chip--1 { left: -30px; top: 6%; }
.axis__hero-chip--2 { right: -26px; bottom: 6%; animation-delay: 3s; }
@keyframes axisKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.axis__marquee {
  padding: 22px 0;
  background: #150d08;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.axis__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.axis__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: axisKfMarquee 40s linear infinite; }
.axis__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #ad9683; white-space: nowrap; }
.axis__marquee-track i { color: var(--axc3); font-size: 8px; }
@keyframes axisKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Overview + capability ledger ---------- */
.axis__intro { background: #fff; }
.axis__intro-copy { max-width: 780px; margin: 0 auto; text-align: center; }
.axis__intro-copy .axis__title { font-size: 34px; }
.axis__intro-copy .axis__lead { font-size: 19px; }
.axis__ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--axb); margin-top: 60px; }
.axis__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--axb);
  transition: background .3s ease;
}
.axis__ledger-col:first-child { border-left: none; }
.axis__ledger-col:hover { background: var(--axbg); }
.axis__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--axh); margin: 0 0 8px; }
.axis__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--axt); margin: 0; }

/* ---------- 04. Challenge / Objective split ---------- */
.axis__compare { background: var(--axbg); }
.axis__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 58px; }
.axis__compare-col { border: 1px solid var(--axb); border-radius: 18px; padding: 34px 32px; background: #fff; }
.axis__compare-col--new { border-color: rgba(210, 112, 63, .3); box-shadow: 0 22px 50px rgba(28, 30, 43, .1); }
.axis__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--axt);
  margin-bottom: 18px;
}
.axis__compare-col--new .axis__compare-tag { color: var(--axc); }
.axis__compare-col ul { list-style: none; margin: 0; padding: 0; }
.axis__compare-col li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--axt);
}
.axis__compare-col li:last-child { margin-bottom: 0; }
.axis__compare-col li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 7px;
  position: absolute;
  left: 0;
  top: 7px;
  color: #c7cad8;
}
.axis__compare-col--new li { color: var(--axh); }
.axis__compare-col--new li::before { content: "\f00c"; font-size: 12px; top: 4px; color: var(--axc); }
.axis__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--axc), var(--axc3));
  color: #fff;
  font-size: 17px;
}

/* ---------- 05. Key capabilities (glass HUD) ---------- */
.axis__cap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(210, 112, 63, .3), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(176, 71, 46, .25), transparent 55%),
    var(--axh);
}
.axis__cap::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: 42px 42px;
  pointer-events: none;
}
.axis__cap .container { position: relative; z-index: 1; }
.axis__cap .axis__eyebrow { color: var(--axc3); }
.axis__cap .axis__title { color: #fff; }
.axis__cap-list { list-style: none; margin: 74px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.axis__cap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.axis__cap-row::before,
.axis__cap-row::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--axc);
  border-style: solid;
  opacity: .6;
  transition: opacity .35s ease, border-color .35s ease;
}
.axis__cap-row::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.axis__cap-row::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.axis__cap-list li:nth-child(3n+2) .axis__cap-row::before,
.axis__cap-list li:nth-child(3n+2) .axis__cap-row::after { border-color: var(--axc2); }
.axis__cap-list li:nth-child(3n) .axis__cap-row::before,
.axis__cap-list li:nth-child(3n) .axis__cap-row::after { border-color: var(--axc3); }
.axis__cap-row:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(210, 112, 63, .5);
  box-shadow: 0 0 0 1px rgba(210, 112, 63, .3), 0 0 44px -8px rgba(210, 112, 63, .6);
}
.axis__cap-list li:nth-child(3n+2) .axis__cap-row:hover { border-color: rgba(176, 71, 46, .5); box-shadow: 0 0 0 1px rgba(176, 71, 46, .3), 0 0 44px -8px rgba(176, 71, 46, .6); }
.axis__cap-list li:nth-child(3n) .axis__cap-row:hover { border-color: rgba(234, 168, 96, .5); box-shadow: 0 0 0 1px rgba(234, 168, 96, .3), 0 0 44px -8px rgba(234, 168, 96, .6); }
.axis__cap-row:hover::before, .axis__cap-row:hover::after { opacity: 1; }
.axis__cap-mark { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.axis__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--axc);
  background: rgba(210, 112, 63, .1);
  color: var(--axc);
  font-size: 18px;
  box-shadow: 0 0 16px -3px rgba(210, 112, 63, .7);
  transition: box-shadow .35s ease;
}
.axis__cap-list li:nth-child(3n+2) .axis__cap-ico { border-color: var(--axc2); background: rgba(176, 71, 46, .1); color: var(--axc2); box-shadow: 0 0 16px -3px rgba(176, 71, 46, .7); }
.axis__cap-list li:nth-child(3n) .axis__cap-ico { border-color: var(--axc3); background: rgba(234, 168, 96, .16); color: var(--axc3); box-shadow: 0 0 16px -3px rgba(234, 168, 96, .8); }
.axis__cap-num {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.axis__cap-num::before { content: "ID\00b7"; color: rgba(255, 255, 255, .25); }
.axis__cap-row h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.axis__cap-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .55); margin: 0; transition: color .35s ease; }
.axis__cap-row:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- 06. Market intelligence flow (dark band) ---------- */
.axis__intel { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--axdark) 0%, #241407 100%); }
.axis__intel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(234, 168, 96, .22), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(210, 112, 63, .26), transparent 64%);
}
.axis__intel > .container { position: relative; z-index: 1; }
.axis__intel .axis__eyebrow { color: var(--axc3); }
.axis__intel .axis__title { color: #fff; }
.axis__intel .axis__lead { color: #f2e6da; }
.axis__intel .axis__text { color: var(--axmuted); }
.axis__flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 60px; position: relative; }
.axis__flow-step { position: relative; padding: 0 20px; text-align: center; }
.axis__flow-step:not(:last-child)::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -2px;
  top: 34px;
  font-size: 14px;
  color: rgba(234, 168, 96, .5);
}
.axis__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--axc3);
  font-size: 24px;
  margin-bottom: 20px;
}
.axis__flow-step h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.axis__flow-step p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--axmuted); margin: 0; }

/* ---------- 07. Multi-platform + design principles ---------- */
.axis__platforms { background: #fff; }
.axis__platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.axis__platform-card {
  padding: 34px 32px;
  border: 1px solid var(--axb);
  border-radius: 18px;
  background: var(--axbg);
  text-align: center;
  transition: all .3s ease;
}
.axis__platform-card:hover { background: #fff; border-color: rgba(210, 112, 63, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.axis__platform-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(210, 112, 63, .1);
  color: var(--axc);
  font-size: 22px;
  margin-bottom: 18px;
}
.axis__platform-card:nth-child(2) .axis__platform-ico { background: rgba(176, 71, 46, .1); color: var(--axc2); }
.axis__platform-card:nth-child(3) .axis__platform-ico { background: rgba(234, 168, 96, .16); color: var(--axc3); }
.axis__platform-card h3 { font-size: 19px; font-weight: 600; color: var(--axh); margin: 0 0 10px; }
.axis__platform-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--axt); margin: 0; }

.axis__principles { background: var(--axbg); }
.axis__principle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 58px; }
.axis__principle {
  padding: 30px 24px;
  border: 1px solid var(--axb);
  border-radius: 16px;
  background: #fff;
  transition: all .3s ease;
}
.axis__principle:hover { border-color: rgba(210, 112, 63, .3); box-shadow: 0 20px 40px rgba(28, 30, 43, .08); transform: translateY(-4px); }
.axis__principle-num { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--axc); margin-bottom: 14px; }
.axis__principle h3 { font-size: 16px; font-weight: 600; color: var(--axh); margin: 0 0 10px; line-height: 1.35; }
.axis__principle p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--axt); margin: 0; }

/* ---------- 08. Platform architecture (bento) + tech tags ---------- */
.axis__arch { background: #fff; }
.axis__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.axis__bento-card {
  padding: 32px 28px;
  border: 1px solid var(--axb);
  border-radius: 18px;
  background: var(--axbg);
  transition: all .3s ease;
}
.axis__bento-card:hover { background: #fff; border-color: rgba(210, 112, 63, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.axis__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(210, 112, 63, .1);
  color: var(--axc);
  font-size: 19px;
  margin-bottom: 16px;
}
.axis__bento-card:nth-child(3n+2) .axis__bento-ico { background: rgba(176, 71, 46, .1); color: var(--axc2); }
.axis__bento-card:nth-child(3n) .axis__bento-ico { background: rgba(234, 168, 96, .16); color: var(--axc3); }
.axis__bento-card span.axis__bento-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--axt); margin-bottom: 8px; }
.axis__bento-card h3 { font-size: 18px; font-weight: 600; color: var(--axh); margin: 0 0 8px; }
.axis__bento-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--axt); margin: 0; }

.axis__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.axis__tech-tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: var(--axbg);
  border: 1px solid var(--axb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--axh);
  transition: all .3s ease;
}
.axis__tech-tags li:hover { border-color: var(--axc); color: var(--axc); transform: translateY(-3px); }

/* ---------- 09. Security & reliability (list) ---------- */
.axis__security { background: var(--axbg); }
.axis__security-list { list-style: none; margin: 54px 0 0; padding: 0; display: grid; gap: 12px; }
.axis__security-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
  border-left: 3px solid var(--axc);
  border-radius: 0 12px 12px 0;
  background: #fff;
  transition: all .3s ease;
}
.axis__security-list li:hover { box-shadow: 0 16px 34px rgba(28, 30, 43, .08); transform: translateX(4px); }
.axis__security-list li:nth-child(3n+2) { border-left-color: var(--axc2); }
.axis__security-list li:nth-child(3n) { border-left-color: var(--axc3); }
.axis__security-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--axbg);
  color: var(--axc);
  font-size: 15px;
  margin-top: 2px;
}
.axis__security-list li span.axis__security-text { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--axt); }

/* ---------- 10. Investor journey (vertical agenda) ---------- */
.axis__journey { background: #fff; }
.axis__agenda { list-style: none; margin: 58px 0 0; padding: 0; }
.axis__agenda li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--axb);
}
.axis__agenda li:last-child { border-bottom: 1px solid var(--axb); }
.axis__agenda-num { font-size: 34px; font-weight: 600; color: rgba(210, 112, 63, .18); line-height: 1; }
.axis__agenda h3 { font-size: 19px; font-weight: 600; color: var(--axh); margin: 0 0 8px; }
.axis__agenda p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--axt); margin: 0; max-width: 640px; }

/* ---------- 11. Key capabilities table ---------- */
.axis__table-section { background: var(--axbg); }
.axis__table { margin-top: 58px; border: 1px solid var(--axb); border-radius: 18px; overflow: hidden; background: #fff; }
.axis__table-row { display: grid; grid-template-columns: 260px 1fr; border-top: 1px solid var(--axb); }
.axis__table-row:first-child { border-top: none; }
.axis__table-row--head { background: var(--axdark); }
.axis__table-row--head .axis__table-cell,
.axis__table-row--head .axis__table-label { color: #fff; font-weight: 600; font-size: 14.5px; }
.axis__table-label {
  padding: 18px 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--axh);
  background: var(--axbg);
  display: flex;
  align-items: center;
}
.axis__table-cell {
  padding: 18px 24px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--axt);
  border-left: 1px solid var(--axb);
  display: flex;
  align-items: center;
}

/* ---------- 12. What makes the platform stand out (bento) ---------- */
.axis__standout { background: #fff; }
.axis__standout .axis__bento { grid-template-columns: repeat(3, 1fr); }

/* ---------- 13. Project highlights (spec sheet) ---------- */
.axis__specs { background: var(--axdark); position: relative; overflow: hidden; }
.axis__specs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 10% 0%, rgba(210, 112, 63, .22), transparent 62%);
}
.axis__specs > .container { position: relative; z-index: 1; }
.axis__specs .axis__eyebrow { color: var(--axc3); }
.axis__specs .axis__title { color: #fff; }
.axis__specs .axis__text { color: var(--axmuted); }
.axis__specs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 58px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.axis__specs-item { background: #0d1c2f; padding: 26px 22px; }
.axis__specs-item span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--axmuted); margin-bottom: 10px; }
.axis__specs-item strong { display: block; font-size: 15px; font-weight: 500; color: #fff; line-height: 1.4; }

/* ---------- 14. Result statement ---------- */
.axis__scope { padding: 64px 0; background: var(--axbg); border-top: 1px solid var(--axb); }
.axis__scope-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.axis__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--axb);
  color: var(--axc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.axis__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--axh);
  margin: 0;
}

.axis__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--axb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.axis__related span { font-size: 13.5px; font-weight: 500; color: var(--axt); text-transform: uppercase; letter-spacing: 1.5px; }
.axis__related a { font-size: 14.5px; font-weight: 500; color: var(--axh); transition: color .25s ease; }
.axis__related a:hover { color: var(--axc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .axis__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .axis__page .axis__title { font-size: 32px; }
  :where(.axis__page) section { padding: 100px 0; }
  .axis__hero { padding: 170px 0 100px; }
  .axis__hero-title { font-size: 38px; }
  .axis__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .axis__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .axis__hero-chip--1 { left: -14px; }
  .axis__hero-chip--2 { right: -10px; }
  .axis__ledger { grid-template-columns: repeat(3, 1fr); }
  .axis__ledger-col:nth-child(3n+1) { border-left: none; }
  .axis__ledger-col:nth-child(n+4) { border-top: 1px solid var(--axb); padding-top: 26px; margin-top: 26px; }
  .axis__compare-grid { grid-template-columns: 1fr; }
  .axis__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .axis__cap-list { grid-template-columns: repeat(2, 1fr); }
  .axis__flow { grid-template-columns: repeat(3, 1fr); row-gap: 46px; }
  .axis__flow-step:nth-child(3)::after { display: none; }
  .axis__principle-row { grid-template-columns: repeat(3, 1fr); }
  .axis__platform-grid { grid-template-columns: 1fr; max-width: 420px; margin: 58px auto 0; }
  .axis__bento,
  .axis__standout .axis__bento { grid-template-columns: repeat(2, 1fr); }
  .axis__specs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 991px) {
  .axis__table-row { grid-template-columns: 200px 1fr; }
}
@media only screen and (max-width: 767px) {
  .axis__page .axis__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .axis__page .axis__title { font-size: 26px; }
  .axis__page .axis__lead { font-size: 16.5px; }
  .axis__scope p { font-size: 16.5px; }
  :where(.axis__page) section { padding: 76px 0; }
  .axis__hero { padding: 140px 0 76px; }
  .axis__hero-title { font-size: 29px; }
  .axis__hero-lead { font-size: 16.5px; }
  .axis__hero-chip { display: none; }
  .axis__ledger { grid-template-columns: 1fr; }
  .axis__ledger-col { border-left: none !important; border-top: 1px solid var(--axb); padding-top: 22px; margin-top: 22px; }
  .axis__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .axis__cap-list { grid-template-columns: 1fr; }
  .axis__flow { grid-template-columns: 1fr; row-gap: 40px; }
  .axis__flow-step::after { display: none; }
  .axis__principle-row { grid-template-columns: 1fr 1fr; }
  .axis__bento,
  .axis__standout .axis__bento { grid-template-columns: 1fr; }
  .axis__table-row { grid-template-columns: 1fr; }
  .axis__table-label { border-top: 1px solid var(--axb); }
  .axis__table-row:first-child .axis__table-label { border-top: none; }
  .axis__table-cell { border-left: none; border-top: 1px solid var(--axb); }
  .axis__agenda li { grid-template-columns: 1fr; gap: 8px; }
  .axis__specs-grid { grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 575px) {
  .axis__principle-row { grid-template-columns: 1fr; }
  .axis__specs-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .axis__page * { transition-duration: .01ms !important; }
  .axis__hero-glow,
  .axis__hero-chip,
  .axis__marquee-track { animation: none; }
}

/* ============================================================
   CASE STUDY: YAMAHA GOLF-CAR (case-study-2.html)
   Scoped entirely to .yam__page. Same section grammar as the
   Axis Direct case study (framed hero, marquee, ledger, zigzag
   caps, dark flow band, bento grids, vertical agenda, table,
   spec sheet) recolored around Yamaha's royal-blue brand instead
   of Axis Direct's terracotta, and extended with two components
   the trading platform didn't need: a plain two-column "duo"
   card pair (Operational Intelligence / Player Experience, and
   Operators / Golfers) and a vertical layer stack for the
   Physical -> Connectivity -> Platform -> Experience ->
   Intelligence ecosystem diagram. Nothing here leaks elsewhere.
   ============================================================ */
.yam__page {
  --yc: #1d4fd8;
  --yc2: #0a2a6b;
  --yc3: #4f8ef7;
  --yh: #1c1e2b;
  --yt: #6b7089;
  --yb: #e3e7f5;
  --ybg: #f5f7fc;
  --ydark: #07152F;
  --ymuted: #b9c8ea;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.yam__page .yam__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--yc);
  margin-bottom: 18px;
}
.yam__page .yam__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--yh); margin: 0 0 20px; }
.yam__page .yam__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--yh); margin: 0 0 18px; }
.yam__page .yam__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--yt); margin: 0 0 16px; }
.yam__page .yam__text:last-child { margin-bottom: 0; }
.yam__page .yam__text a { color: var(--yc); text-decoration: underline; text-underline-offset: 3px; }
.yam__page .yam__text a:hover { color: var(--yc3); }
.yam__page .yam__head { max-width: 760px; }
.yam__page .yam__head--center { margin: 0 auto 0; text-align: center; }
:where(.yam__page) section { padding: 130px 0; }
.yam__page .yam__btn,
.yam__page .yam__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.yam__page .yam__btn { color: #fff; background: var(--yc); border: 2px solid var(--yc); }
.yam__page .yam__btn:hover { background: var(--yc2); border-color: var(--yc2); color: #fff; }
.yam__page .yam__btn-outline { color: var(--yh); border: 2px solid var(--yb); background: transparent; }
.yam__page .yam__btn-outline:hover { border-color: var(--yc); color: var(--yc); }
.yam__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.yam__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ymuted);
}
.yam__crumb a { color: var(--ymuted); transition: color .25s ease; }
.yam__crumb a:hover { color: #fff; }
.yam__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.yam__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero ---------- */
.yam__hero {
  position: relative;
  overflow: hidden;
  background: var(--ydark);
  padding: 200px 0 120px;
}
.yam__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 96% -12%, rgba(29, 79, 216, .45), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(79, 142, 247, .26), transparent 64%);
}
.yam__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.yam__hero > .container { position: relative; z-index: 2; }
.yam__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: start; }
.yam__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(79, 142, 247, .35);
  background: rgba(79, 142, 247, .12);
  color: var(--yc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.yam__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.yam__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--yc3), #8fb4fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.yam__hero-title em div div { background: linear-gradient(90deg, var(--yc3), #8fb4fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.yam__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dde6f7; margin: 0 0 18px; }
.yam__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ymuted); margin: 0 0 16px; }
.yam__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.yam__hero .yam__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.yam__hero .yam__btn-outline:hover { background: #fff; border-color: #fff; color: var(--ydark); }
.yam__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.yam__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #dbe6fa;
  font-size: 13px;
  font-weight: 300;
}
.yam__hero-figure { position: relative; margin-top: 6px; }
.yam__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(29, 79, 216, .55), rgba(79, 142, 247, .45), rgba(10, 42, 107, .5), rgba(29, 79, 216, .55));
  filter: blur(70px);
  opacity: .55;
  animation: yamKfSpin 26s linear infinite;
}
.yam__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.yam__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes yamKfSpin { to { transform: rotate(360deg); } }
.yam__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: yamKfChip 6s ease-in-out infinite;
}
.yam__hero-chip i { color: var(--yc3); font-size: 18px; }
.yam__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.yam__hero-chip span { font-size: 13px; font-weight: 300; color: var(--ymuted); }
.yam__hero-chip--1 { left: -30px; top: 6%; }
.yam__hero-chip--2 { right: -26px; bottom: 6%; animation-delay: 3s; }
@keyframes yamKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.yam__marquee {
  padding: 22px 0;
  background: #060f22;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.yam__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.yam__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: yamKfMarquee 40s linear infinite; }
.yam__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7f8fb3; white-space: nowrap; }
.yam__marquee-track i { color: var(--yc3); font-size: 8px; }
@keyframes yamKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Overview + capability ledger ---------- */
.yam__intro { background: #fff; }
.yam__intro-copy { max-width: 780px; margin: 0 auto; text-align: center; }
.yam__intro-copy .yam__title { font-size: 34px; }
.yam__intro-copy .yam__lead { font-size: 19px; }
.yam__ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--yb); margin-top: 60px; }
.yam__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--yb);
  transition: background .3s ease;
}
.yam__ledger-col:first-child { border-left: none; }
.yam__ledger-col:hover { background: var(--ybg); }
.yam__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--yh); margin: 0 0 8px; }
.yam__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--yt); margin: 0; }

/* ---------- 04. Challenge / Objective split ---------- */
.yam__compare { background: var(--ybg); }
.yam__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 58px; }
.yam__compare-col { border: 1px solid var(--yb); border-radius: 18px; padding: 34px 32px; background: #fff; }
.yam__compare-col--new { border-color: rgba(29, 79, 216, .3); box-shadow: 0 22px 50px rgba(28, 30, 43, .1); }
.yam__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yt);
  margin-bottom: 18px;
}
.yam__compare-col--new .yam__compare-tag { color: var(--yc); }
.yam__compare-col ul { list-style: none; margin: 0; padding: 0; }
.yam__compare-col li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--yt);
}
.yam__compare-col li:last-child { margin-bottom: 0; }
.yam__compare-col li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 7px;
  position: absolute;
  left: 0;
  top: 7px;
  color: #c7cad8;
}
.yam__compare-col--new li { color: var(--yh); }
.yam__compare-col--new li::before { content: "\f00c"; font-size: 12px; top: 4px; color: var(--yc); }
.yam__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--yc), var(--yc3));
  color: #fff;
  font-size: 17px;
}

/* ---------- 05. Two-dimension / two-audience duo cards ---------- */
.yam__duo { background: #fff; }
.yam__duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 58px; }
.yam__duo-card {
  padding: 40px 36px;
  border: 1px solid var(--yb);
  border-radius: 20px;
  background: var(--ybg);
}
.yam__duo-card--alt { background: var(--ydark); border-color: transparent; }
.yam__duo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(29, 79, 216, .1);
  color: var(--yc);
  font-size: 21px;
  margin-bottom: 20px;
}
.yam__duo-card--alt .yam__duo-ico { background: rgba(79, 142, 247, .16); color: var(--yc3); }
.yam__duo-card h3 { font-size: 21px; font-weight: 600; color: var(--yh); margin: 0 0 14px; }
.yam__duo-card--alt h3 { color: #fff; }
.yam__duo-card p.yam__duo-lead { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--yt); margin: 0 0 20px; }
.yam__duo-card--alt p.yam__duo-lead { color: var(--ymuted); }
.yam__duo-card ul { list-style: none; margin: 0; padding: 0; }
.yam__duo-card li {
  position: relative;
  padding: 0 0 0 24px;
  margin-bottom: 12px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--yt);
}
.yam__duo-card--alt li { color: #dde6f7; }
.yam__duo-card li:last-child { margin-bottom: 0; }
.yam__duo-card li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--yc);
}
.yam__duo-card--alt li::before { color: var(--yc3); }

/* ---------- 06. Key capabilities (glass HUD) ---------- */
.yam__cap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(29, 79, 216, .3), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(10, 42, 107, .25), transparent 55%),
    var(--yh);
}
.yam__cap::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: 42px 42px;
  pointer-events: none;
}
.yam__cap .container { position: relative; z-index: 1; }
.yam__cap .yam__eyebrow { color: var(--yc3); }
.yam__cap .yam__title { color: #fff; }
.yam__cap-list { list-style: none; margin: 74px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.yam__cap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.yam__cap-row::before,
.yam__cap-row::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--yc);
  border-style: solid;
  opacity: .6;
  transition: opacity .35s ease, border-color .35s ease;
}
.yam__cap-row::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.yam__cap-row::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.yam__cap-list li:nth-child(3n+2) .yam__cap-row::before,
.yam__cap-list li:nth-child(3n+2) .yam__cap-row::after { border-color: var(--yc2); }
.yam__cap-list li:nth-child(3n) .yam__cap-row::before,
.yam__cap-list li:nth-child(3n) .yam__cap-row::after { border-color: var(--yc3); }
.yam__cap-row:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(29, 79, 216, .5);
  box-shadow: 0 0 0 1px rgba(29, 79, 216, .3), 0 0 44px -8px rgba(29, 79, 216, .6);
}
.yam__cap-list li:nth-child(3n+2) .yam__cap-row:hover { border-color: rgba(10, 42, 107, .5); box-shadow: 0 0 0 1px rgba(10, 42, 107, .3), 0 0 44px -8px rgba(10, 42, 107, .6); }
.yam__cap-list li:nth-child(3n) .yam__cap-row:hover { border-color: rgba(79, 142, 247, .5); box-shadow: 0 0 0 1px rgba(79, 142, 247, .3), 0 0 44px -8px rgba(79, 142, 247, .6); }
.yam__cap-row:hover::before, .yam__cap-row:hover::after { opacity: 1; }
.yam__cap-mark { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.yam__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--yc);
  background: rgba(29, 79, 216, .1);
  color: var(--yc);
  font-size: 18px;
  box-shadow: 0 0 16px -3px rgba(29, 79, 216, .7);
  transition: box-shadow .35s ease;
}
.yam__cap-list li:nth-child(3n+2) .yam__cap-ico { border-color: var(--yc2); background: rgba(10, 42, 107, .1); color: var(--yc2); box-shadow: 0 0 16px -3px rgba(10, 42, 107, .7); }
.yam__cap-list li:nth-child(3n) .yam__cap-ico { border-color: var(--yc3); background: rgba(79, 142, 247, .16); color: var(--yc3); box-shadow: 0 0 16px -3px rgba(79, 142, 247, .8); }
.yam__cap-num {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.yam__cap-num::before { content: "ID\00b7"; color: rgba(255, 255, 255, .25); }
.yam__cap-row h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.yam__cap-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .55); margin: 0; transition: color .35s ease; }
.yam__cap-row:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- 07/11. Bento grids (reused for capabilities & architecture) ---------- */
.yam__bento-section { background: #fff; }
.yam__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.yam__bento-card {
  padding: 32px 28px;
  border: 1px solid var(--yb);
  border-radius: 18px;
  background: var(--ybg);
  transition: all .3s ease;
}
.yam__bento-card:hover { background: #fff; border-color: rgba(29, 79, 216, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.yam__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(29, 79, 216, .1);
  color: var(--yc);
  font-size: 19px;
  margin-bottom: 16px;
}
.yam__bento-card:nth-child(3n+2) .yam__bento-ico { background: rgba(10, 42, 107, .1); color: var(--yc2); }
.yam__bento-card:nth-child(3n) .yam__bento-ico { background: rgba(79, 142, 247, .16); color: var(--yc3); }
.yam__bento-card span.yam__bento-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--yt); margin-bottom: 8px; }
.yam__bento-card h3 { font-size: 18px; font-weight: 600; color: var(--yh); margin: 0 0 8px; }
.yam__bento-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--yt); margin: 0; }

.yam__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.yam__tech-tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: var(--ybg);
  border: 1px solid var(--yb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--yh);
  transition: all .3s ease;
}
.yam__tech-tags li:hover { border-color: var(--yc); color: var(--yc); transform: translateY(-3px); }

/* ---------- 08. Data-to-experience flow (dark band, two chains) ---------- */
.yam__chainband { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--ydark) 0%, #0a1f45 100%); }
.yam__chainband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(79, 142, 247, .24), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(29, 79, 216, .28), transparent 64%);
}
.yam__chainband > .container { position: relative; z-index: 1; }
.yam__chainband .yam__eyebrow { color: var(--yc3); }
.yam__chainband .yam__title { color: #fff; }
.yam__chainband .yam__lead { color: #dde6f7; }
.yam__chainband .yam__text { color: var(--ymuted); }
.yam__chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin-top: 46px; }
.yam__chain + .yam__chain { margin-top: 30px; }
.yam__chain-step {
  padding: 14px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
}
.yam__chain-arrow { padding: 0 16px; color: var(--yc3); font-size: 14px; }

/* ---------- 10. Vertical layer stack (ecosystem diagram) ---------- */
.yam__layers { background: var(--ybg); }
.yam__layer-stack { max-width: 820px; margin: 58px auto 0; }
.yam__layer {
  padding: 30px 32px;
  border: 1px solid var(--yb);
  border-radius: 18px;
  background: #fff;
}
.yam__layer-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.yam__layer-num { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--yc); }
.yam__layer h3 { font-size: 18px; font-weight: 600; color: var(--yh); margin: 0; }
.yam__layer-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.yam__layer-tags span {
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--ybg);
  border: 1px solid var(--yb);
  font-size: 13px;
  font-weight: 400;
  color: var(--yt);
}
.yam__layer-connector { display: flex; justify-content: center; padding: 10px 0; color: var(--yc); font-size: 15px; }

/* ---------- 12/13. Vertical agenda (journeys) ---------- */
.yam__journeys { background: #fff; }
.yam__agenda { list-style: none; margin: 58px 0 0; padding: 0; }
.yam__agenda li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid var(--yb);
}
.yam__agenda li:last-child { border-bottom: 1px solid var(--yb); }
.yam__agenda-num { font-size: 30px; font-weight: 600; color: rgba(29, 79, 216, .18); line-height: 1; }
.yam__agenda h3 { font-size: 18px; font-weight: 600; color: var(--yh); margin: 0 0 6px; }
.yam__agenda p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--yt); margin: 0; max-width: 640px; }

.yam__subhead { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--yc); margin: 70px 0 0; }
.yam__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 0; margin-top: 34px; }
.yam__flow-step { position: relative; padding: 0 20px; text-align: center; }
.yam__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--yb);
  background: var(--ybg);
  color: var(--yc);
  font-size: 20px;
  margin-bottom: 16px;
}
.yam__flow-step h3 { font-size: 15px; font-weight: 600; color: var(--yh); margin: 0 0 6px; }
.yam__flow-step p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--yt); margin: 0; }

/* ---------- 14. Key capabilities table ---------- */
.yam__table-section { background: var(--ybg); }
.yam__table { margin-top: 58px; border: 1px solid var(--yb); border-radius: 18px; overflow: hidden; background: #fff; }
.yam__table-row { display: grid; grid-template-columns: 260px 1fr; border-top: 1px solid var(--yb); }
.yam__table-row:first-child { border-top: none; }
.yam__table-row--head { background: var(--ydark); }
.yam__table-row--head .yam__table-cell,
.yam__table-row--head .yam__table-label { color: #fff; font-weight: 600; font-size: 14.5px; }
.yam__table-label {
  padding: 16px 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--yh);
  background: var(--ybg);
  display: flex;
  align-items: center;
}
.yam__table-cell {
  padding: 16px 24px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--yt);
  border-left: 1px solid var(--yb);
  display: flex;
  align-items: center;
}

/* ---------- 15. Project highlights (spec sheet) ---------- */
.yam__specs { background: var(--ydark); position: relative; overflow: hidden; }
.yam__specs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 10% 0%, rgba(29, 79, 216, .28), transparent 62%);
}
.yam__specs > .container { position: relative; z-index: 1; }
.yam__specs .yam__eyebrow { color: var(--yc3); }
.yam__specs .yam__title { color: #fff; }
.yam__specs .yam__text { color: var(--ymuted); }
.yam__specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 58px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.yam__specs-item { background: #0d1c2f; padding: 26px 22px; }
.yam__specs-item span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ymuted); margin-bottom: 10px; }
.yam__specs-item strong { display: block; font-size: 15px; font-weight: 500; color: #fff; line-height: 1.4; }
.yam__specs-item--wide { grid-column: span 2; }

/* ---------- 16. Result statement ---------- */
.yam__scope { padding: 64px 0; background: var(--ybg); border-top: 1px solid var(--yb); }
.yam__scope-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.yam__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--yb);
  color: var(--yc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.yam__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--yh);
  margin: 0;
}
.yam__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--yb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.yam__related span { font-size: 13.5px; font-weight: 500; color: var(--yt); text-transform: uppercase; letter-spacing: 1.5px; }
.yam__related a { font-size: 14.5px; font-weight: 500; color: var(--yh); transition: color .25s ease; }
.yam__related a:hover { color: var(--yc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .yam__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .yam__page .yam__title { font-size: 32px; }
  :where(.yam__page) section { padding: 100px 0; }
  .yam__hero { padding: 170px 0 100px; }
  .yam__hero-title { font-size: 38px; }
  .yam__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .yam__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .yam__hero-chip--1 { left: -14px; }
  .yam__hero-chip--2 { right: -10px; }
  .yam__ledger { grid-template-columns: repeat(3, 1fr); }
  .yam__ledger-col:nth-child(3n+1) { border-left: none; }
  .yam__ledger-col:nth-child(n+4) { border-top: 1px solid var(--yb); padding-top: 26px; margin-top: 26px; }
  .yam__compare-grid { grid-template-columns: 1fr; }
  .yam__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .yam__duo-grid { grid-template-columns: 1fr; }
  .yam__cap-list { grid-template-columns: repeat(2, 1fr); }
  .yam__bento { grid-template-columns: repeat(2, 1fr); }
  .yam__specs-grid { grid-template-columns: repeat(2, 1fr); }
  .yam__specs-item--wide { grid-column: span 2; }
}
@media only screen and (max-width: 991px) {
  .yam__table-row { grid-template-columns: 200px 1fr; }
  .yam__flow { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .yam__page .yam__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .yam__page .yam__title { font-size: 26px; }
  .yam__page .yam__lead { font-size: 16.5px; }
  .yam__scope p { font-size: 16.5px; }
  :where(.yam__page) section { padding: 76px 0; }
  .yam__hero { padding: 140px 0 76px; }
  .yam__hero-title { font-size: 29px; }
  .yam__hero-lead { font-size: 16.5px; }
  .yam__hero-chip { display: none; }
  .yam__ledger { grid-template-columns: 1fr; }
  .yam__ledger-col { border-left: none !important; border-top: 1px solid var(--yb); padding-top: 22px; margin-top: 22px; }
  .yam__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .yam__cap-list { grid-template-columns: 1fr; }
  .yam__bento { grid-template-columns: 1fr; }
  .yam__chain-step { font-size: 13px; padding: 11px 16px; }
  .yam__chain-arrow { padding: 0 8px; }
  .yam__table-row { grid-template-columns: 1fr; }
  .yam__table-label { border-top: 1px solid var(--yb); }
  .yam__table-row:first-child .yam__table-label { border-top: none; }
  .yam__table-cell { border-left: none; border-top: 1px solid var(--yb); }
  .yam__agenda li { grid-template-columns: 1fr; gap: 8px; }
  .yam__flow { grid-template-columns: 1fr; }
  .yam__specs-grid { grid-template-columns: 1fr; }
  .yam__specs-item--wide { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .yam__page * { transition-duration: .01ms !important; }
  .yam__hero-glow,
  .yam__hero-chip,
  .yam__marquee-track { animation: none; }
}

/* ============================================================
   CASE STUDY: FOODPANDA (case-study-3.html)
   Scoped entirely to .fp__page. Same section grammar as the
   Axis Direct / Yamaha case studies (framed hero, marquee,
   ledger, zigzag caps, dark flow band, bento grids, layer stack,
   vertical agenda, table, spec sheet) recolored around
   Foodpanda's forest-green brand, and extended with two
   components neither prior case study needed: a four-column
   "quad" card grid (the marketplace has four sides - customer,
   merchant, delivery partner, platform - where Axis Direct and
   Yamaha only ever needed two), and a compact search/discovery
   callout with tag pills. Nothing here leaks elsewhere.
   ============================================================ */
.fp__page {
  --fc: #1f9d55;
  --fc2: #0b6b3a;
  --fc3: #6fd08c;
  --fh: #1c1e2b;
  --ft: #6b7089;
  --fb: #e1ede4;
  --fbg: #f4faf6;
  --fdark: #07152F;
  --fmuted: #b9d9c4;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.fp__page .fp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--fc);
  margin-bottom: 18px;
}
.fp__page .fp__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--fh); margin: 0 0 20px; }
.fp__page .fp__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--fh); margin: 0 0 18px; }
.fp__page .fp__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ft); margin: 0 0 16px; }
.fp__page .fp__text:last-child { margin-bottom: 0; }
.fp__page .fp__text a { color: var(--fc); text-decoration: underline; text-underline-offset: 3px; }
.fp__page .fp__text a:hover { color: var(--fc2); }
.fp__page .fp__head { max-width: 780px; }
.fp__page .fp__head--center { margin: 0 auto 0; text-align: center; }
:where(.fp__page) section { padding: 130px 0; }
.fp__page .fp__btn,
.fp__page .fp__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.fp__page .fp__btn { color: #fff; background: var(--fc); border: 2px solid var(--fc); }
.fp__page .fp__btn:hover { background: var(--fc2); border-color: var(--fc2); color: #fff; }
.fp__page .fp__btn-outline { color: var(--fh); border: 2px solid var(--fb); background: transparent; }
.fp__page .fp__btn-outline:hover { border-color: var(--fc); color: var(--fc); }
.fp__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.fp__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--fmuted);
}
.fp__crumb a { color: var(--fmuted); transition: color .25s ease; }
.fp__crumb a:hover { color: #fff; }
.fp__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.fp__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero ---------- */
.fp__hero {
  position: relative;
  overflow: hidden;
  background: var(--fdark);
  padding: 200px 0 120px;
}
.fp__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 96% -12%, rgba(31, 157, 85, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(111, 208, 140, .24), transparent 64%);
}
.fp__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.fp__hero > .container { position: relative; z-index: 2; }
.fp__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: start; }
.fp__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(111, 208, 140, .35);
  background: rgba(111, 208, 140, .12);
  color: var(--fc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.fp__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.fp__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--fc3), #a8e6ba); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fp__hero-title em div div { background: linear-gradient(90deg, var(--fc3), #a8e6ba); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fp__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #ddf2e3; margin: 0 0 18px; }
.fp__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--fmuted); margin: 0 0 16px; }
.fp__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.fp__hero .fp__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.fp__hero .fp__btn-outline:hover { background: #fff; border-color: #fff; color: var(--fdark); }
.fp__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fp__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #dcf3e2;
  font-size: 13px;
  font-weight: 300;
}
.fp__hero-figure { position: relative; margin-top: 6px; }
.fp__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(31, 157, 85, .55), rgba(111, 208, 140, .45), rgba(11, 107, 58, .5), rgba(31, 157, 85, .55));
  filter: blur(70px);
  opacity: .55;
  animation: fpKfSpin 26s linear infinite;
}
.fp__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.fp__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes fpKfSpin { to { transform: rotate(360deg); } }
.fp__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: fpKfChip 6s ease-in-out infinite;
}
.fp__hero-chip i { color: var(--fc3); font-size: 18px; }
.fp__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.fp__hero-chip span { font-size: 13px; font-weight: 300; color: var(--fmuted); }
.fp__hero-chip--1 { left: -30px; top: 6%; }
.fp__hero-chip--2 { right: -26px; bottom: 6%; animation-delay: 3s; }
@keyframes fpKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.fp__marquee {
  padding: 22px 0;
  background: #051a10;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fp__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fp__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: fpKfMarquee 40s linear infinite; }
.fp__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7fa88d; white-space: nowrap; }
.fp__marquee-track i { color: var(--fc3); font-size: 8px; }
@keyframes fpKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Overview + capability ledger ---------- */
.fp__intro { background: #fff; }
.fp__intro-copy { max-width: 800px; margin: 0 auto; text-align: center; }
.fp__intro-copy .fp__title { font-size: 34px; }
.fp__intro-copy .fp__lead { font-size: 19px; }
.fp__ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--fb); margin-top: 60px; }
.fp__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--fb);
  transition: background .3s ease;
}
.fp__ledger-col:first-child { border-left: none; }
.fp__ledger-col:hover { background: var(--fbg); }
.fp__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--fh); margin: 0 0 8px; }
.fp__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ft); margin: 0; }

/* ---------- 04. Challenge / Objective split ---------- */
.fp__compare { background: var(--fbg); }
.fp__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 58px; }
.fp__compare-col { border: 1px solid var(--fb); border-radius: 18px; padding: 34px 32px; background: #fff; }
.fp__compare-col--new { border-color: rgba(31, 157, 85, .3); box-shadow: 0 22px 50px rgba(28, 30, 43, .1); }
.fp__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ft);
  margin-bottom: 18px;
}
.fp__compare-col--new .fp__compare-tag { color: var(--fc); }
.fp__compare-col ul { list-style: none; margin: 0; padding: 0; }
.fp__compare-col li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ft);
}
.fp__compare-col li:last-child { margin-bottom: 0; }
.fp__compare-col li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 7px;
  position: absolute;
  left: 0;
  top: 7px;
  color: #c7cad8;
}
.fp__compare-col--new li { color: var(--fh); }
.fp__compare-col--new li::before { content: "\f00c"; font-size: 12px; top: 4px; color: var(--fc); }
.fp__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fc), var(--fc3));
  color: #fff;
  font-size: 17px;
}

/* ---------- 05/10. Four-sided marketplace "quad" grid ---------- */
.fp__quad { background: #fff; }
.fp__quad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 58px; }
.fp__quad-card {
  padding: 30px 26px;
  border: 1px solid var(--fb);
  border-radius: 18px;
  background: var(--fbg);
  transition: all .3s ease;
}
.fp__quad-card:hover { background: #fff; border-color: rgba(31, 157, 85, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.fp__quad-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(31, 157, 85, .1);
  color: var(--fc);
  font-size: 19px;
  margin-bottom: 16px;
}
.fp__quad-card:nth-child(4n+2) .fp__quad-ico { background: rgba(11, 107, 58, .1); color: var(--fc2); }
.fp__quad-card:nth-child(4n+3) .fp__quad-ico { background: rgba(111, 208, 140, .18); color: var(--fc3); }
.fp__quad-card:nth-child(4n) .fp__quad-ico { background: rgba(31, 157, 85, .1); color: var(--fc); }
.fp__quad-card h3 { font-size: 17px; font-weight: 600; color: var(--fh); margin: 0 0 12px; }
.fp__quad-card ul { list-style: none; margin: 0; padding: 0; }
.fp__quad-card li {
  position: relative;
  padding: 0 0 0 20px;
  margin-bottom: 9px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ft);
}
.fp__quad-card li:last-child { margin-bottom: 0; }
.fp__quad-card li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 9px;
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--fc);
}

/* ---------- 06. Key capabilities (glass HUD) ---------- */
.fp__cap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(31, 157, 85, .3), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(11, 107, 58, .25), transparent 55%),
    var(--fh);
}
.fp__cap::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: 42px 42px;
  pointer-events: none;
}
.fp__cap .container { position: relative; z-index: 1; }
.fp__cap .fp__eyebrow { color: var(--fc3); }
.fp__cap .fp__title { color: #fff; }
.fp__cap-list { list-style: none; margin: 74px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fp__cap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.fp__cap-row::before,
.fp__cap-row::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--fc);
  border-style: solid;
  opacity: .6;
  transition: opacity .35s ease, border-color .35s ease;
}
.fp__cap-row::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.fp__cap-row::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.fp__cap-list li:nth-child(3n+2) .fp__cap-row::before,
.fp__cap-list li:nth-child(3n+2) .fp__cap-row::after { border-color: var(--fc2); }
.fp__cap-list li:nth-child(3n) .fp__cap-row::before,
.fp__cap-list li:nth-child(3n) .fp__cap-row::after { border-color: var(--fc3); }
.fp__cap-row:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(31, 157, 85, .5);
  box-shadow: 0 0 0 1px rgba(31, 157, 85, .3), 0 0 44px -8px rgba(31, 157, 85, .6);
}
.fp__cap-list li:nth-child(3n+2) .fp__cap-row:hover { border-color: rgba(11, 107, 58, .5); box-shadow: 0 0 0 1px rgba(11, 107, 58, .3), 0 0 44px -8px rgba(11, 107, 58, .6); }
.fp__cap-list li:nth-child(3n) .fp__cap-row:hover { border-color: rgba(111, 208, 140, .5); box-shadow: 0 0 0 1px rgba(111, 208, 140, .3), 0 0 44px -8px rgba(111, 208, 140, .6); }
.fp__cap-row:hover::before, .fp__cap-row:hover::after { opacity: 1; }
.fp__cap-mark { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.fp__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--fc);
  background: rgba(31, 157, 85, .1);
  color: var(--fc);
  font-size: 18px;
  box-shadow: 0 0 16px -3px rgba(31, 157, 85, .7);
  transition: box-shadow .35s ease;
}
.fp__cap-list li:nth-child(3n+2) .fp__cap-ico { border-color: var(--fc2); background: rgba(11, 107, 58, .1); color: var(--fc2); box-shadow: 0 0 16px -3px rgba(11, 107, 58, .7); }
.fp__cap-list li:nth-child(3n) .fp__cap-ico { border-color: var(--fc3); background: rgba(111, 208, 140, .18); color: var(--fc3); box-shadow: 0 0 16px -3px rgba(111, 208, 140, .8); }
.fp__cap-num {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.fp__cap-num::before { content: "ID\00b7"; color: rgba(255, 255, 255, .25); }
.fp__cap-row h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.fp__cap-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .55); margin: 0; transition: color .35s ease; }
.fp__cap-row:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- 07/09/12. Bento grids (capabilities, platforms, architecture, standout) ---------- */
.fp__bento-section { background: #fff; }
.fp__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.fp__bento-card {
  padding: 32px 28px;
  border: 1px solid var(--fb);
  border-radius: 18px;
  background: var(--fbg);
  transition: all .3s ease;
}
.fp__bento-card:hover { background: #fff; border-color: rgba(31, 157, 85, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.fp__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(31, 157, 85, .1);
  color: var(--fc);
  font-size: 19px;
  margin-bottom: 16px;
}
.fp__bento-card:nth-child(3n+2) .fp__bento-ico { background: rgba(11, 107, 58, .1); color: var(--fc2); }
.fp__bento-card:nth-child(3n) .fp__bento-ico { background: rgba(111, 208, 140, .18); color: var(--fc3); }
.fp__bento-card span.fp__bento-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ft); margin-bottom: 8px; }
.fp__bento-card h3 { font-size: 18px; font-weight: 600; color: var(--fh); margin: 0 0 8px; }
.fp__bento-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ft); margin: 0; }

.fp__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.fp__tech-tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: var(--fbg);
  border: 1px solid var(--fb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fh);
  transition: all .3s ease;
}
.fp__tech-tags li:hover { border-color: var(--fc); color: var(--fc); transform: translateY(-3px); }

/* ---------- 08. Customer ordering journey (dark flow band) ---------- */
.fp__journey-band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--fdark) 0%, #0a2418 100%); }
.fp__journey-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(111, 208, 140, .22), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(31, 157, 85, .26), transparent 64%);
}
.fp__journey-band > .container { position: relative; z-index: 1; }
.fp__journey-band .fp__eyebrow { color: var(--fc3); }
.fp__journey-band .fp__title { color: #fff; }
.fp__journey-band .fp__lead { color: #ddf2e3; }
.fp__journey-band .fp__text { color: var(--fmuted); }
.fp__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 0; margin-top: 50px; }
.fp__flow-step { position: relative; padding: 0 20px; text-align: center; }
.fp__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--fc3);
  font-size: 22px;
  margin-bottom: 18px;
}
.fp__flow-step h3 { font-size: 15.5px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.fp__flow-step p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--fmuted); margin: 0; }
.fp__questions { list-style: none; margin: 54px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fp__questions li {
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
}

/* ---------- 11. Search & discovery (compact callout) ---------- */
.fp__search { background: var(--fbg); }
.fp__search-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.fp__search-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--fb);
  color: var(--fc);
  font-size: 22px;
  margin-bottom: 24px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.fp__search-tags { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fp__search-tags li {
  padding: 11px 20px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--fb);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fh);
}

/* ---------- 13. Connected marketplace architecture (layer stack) ---------- */
.fp__layers { background: var(--fbg); }
.fp__layer-stack { max-width: 820px; margin: 58px auto 0; }
.fp__layer {
  padding: 28px 32px;
  border: 1px solid var(--fb);
  border-radius: 18px;
  background: #fff;
}
.fp__layer-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.fp__layer-num { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--fc); }
.fp__layer h3 { font-size: 18px; font-weight: 600; color: var(--fh); margin: 0; }
.fp__layer-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.fp__layer-tags span {
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--fbg);
  border: 1px solid var(--fb);
  font-size: 13px;
  font-weight: 400;
  color: var(--ft);
}
.fp__layer-connector { display: flex; justify-content: center; padding: 10px 0; color: var(--fc); font-size: 15px; }

/* ---------- 14. Complete commerce journey (vertical agenda) ---------- */
.fp__journeys { background: #fff; }
.fp__agenda { list-style: none; margin: 58px 0 0; padding: 0; }
.fp__agenda li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--fb);
}
.fp__agenda li:last-child { border-bottom: 1px solid var(--fb); }
.fp__agenda-num { font-size: 28px; font-weight: 600; color: rgba(31, 157, 85, .18); line-height: 1; }
.fp__agenda h3 { font-size: 17.5px; font-weight: 600; color: var(--fh); margin: 0 0 5px; }
.fp__agenda p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ft); margin: 0; max-width: 640px; }

/* ---------- 15. Key capabilities table ---------- */
.fp__table-section { background: var(--fbg); }
.fp__table { margin-top: 58px; border: 1px solid var(--fb); border-radius: 18px; overflow: hidden; background: #fff; }
.fp__table-row { display: grid; grid-template-columns: 260px 1fr; border-top: 1px solid var(--fb); }
.fp__table-row:first-child { border-top: none; }
.fp__table-row--head { background: var(--fdark); }
.fp__table-row--head .fp__table-cell,
.fp__table-row--head .fp__table-label { color: #fff; font-weight: 600; font-size: 14.5px; }
.fp__table-label {
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fh);
  background: var(--fbg);
  display: flex;
  align-items: center;
}
.fp__table-cell {
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ft);
  border-left: 1px solid var(--fb);
  display: flex;
  align-items: center;
}

/* ---------- 16. Project highlights (spec sheet) ---------- */
.fp__specs { background: var(--fdark); position: relative; overflow: hidden; }
.fp__specs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 10% 0%, rgba(31, 157, 85, .28), transparent 62%);
}
.fp__specs > .container { position: relative; z-index: 1; }
.fp__specs .fp__eyebrow { color: var(--fc3); }
.fp__specs .fp__title { color: #fff; }
.fp__specs .fp__text { color: var(--fmuted); }
.fp__specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 58px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.fp__specs-item { background: #0d1c2f; padding: 26px 22px; }
.fp__specs-item span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--fmuted); margin-bottom: 10px; }
.fp__specs-item strong { display: block; font-size: 15px; font-weight: 500; color: #fff; line-height: 1.4; }

/* ---------- 17. Result statement ---------- */
.fp__scope { padding: 64px 0; background: var(--fbg); border-top: 1px solid var(--fb); }
.fp__scope-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.fp__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--fb);
  color: var(--fc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.fp__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--fh);
  margin: 0;
}
.fp__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--fb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.fp__related span { font-size: 13.5px; font-weight: 500; color: var(--ft); text-transform: uppercase; letter-spacing: 1.5px; }
.fp__related a { font-size: 14.5px; font-weight: 500; color: var(--fh); transition: color .25s ease; }
.fp__related a:hover { color: var(--fc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .fp__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .fp__page .fp__title { font-size: 32px; }
  :where(.fp__page) section { padding: 100px 0; }
  .fp__hero { padding: 170px 0 100px; }
  .fp__hero-title { font-size: 38px; }
  .fp__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .fp__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .fp__hero-chip--1 { left: -14px; }
  .fp__hero-chip--2 { right: -10px; }
  .fp__ledger { grid-template-columns: repeat(3, 1fr); }
  .fp__ledger-col:nth-child(3n+1) { border-left: none; }
  .fp__ledger-col:nth-child(n+4) { border-top: 1px solid var(--fb); padding-top: 26px; margin-top: 26px; }
  .fp__compare-grid { grid-template-columns: 1fr; }
  .fp__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .fp__quad-grid { grid-template-columns: repeat(2, 1fr); }
  .fp__cap-list { grid-template-columns: repeat(2, 1fr); }
  .fp__bento { grid-template-columns: repeat(2, 1fr); }
  .fp__specs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .fp__table-row { grid-template-columns: 200px 1fr; }
  .fp__flow { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .fp__page .fp__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .fp__page .fp__title { font-size: 26px; }
  .fp__page .fp__lead { font-size: 16.5px; }
  .fp__scope p { font-size: 16.5px; }
  :where(.fp__page) section { padding: 76px 0; }
  .fp__hero { padding: 140px 0 76px; }
  .fp__hero-title { font-size: 29px; }
  .fp__hero-lead { font-size: 16.5px; }
  .fp__hero-chip { display: none; }
  .fp__ledger { grid-template-columns: 1fr; }
  .fp__ledger-col { border-left: none !important; border-top: 1px solid var(--fb); padding-top: 22px; margin-top: 22px; }
  .fp__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .fp__quad-grid { grid-template-columns: 1fr; }
  .fp__cap-list { grid-template-columns: 1fr; }
  .fp__bento { grid-template-columns: 1fr; }
  .fp__flow { grid-template-columns: 1fr; }
  .fp__table-row { grid-template-columns: 1fr; }
  .fp__table-label { border-top: 1px solid var(--fb); }
  .fp__table-row:first-child .fp__table-label { border-top: none; }
  .fp__table-cell { border-left: none; border-top: 1px solid var(--fb); }
  .fp__agenda li { grid-template-columns: 1fr; gap: 8px; }
  .fp__specs-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fp__page * { transition-duration: .01ms !important; }
  .fp__hero-glow,
  .fp__hero-chip,
  .fp__marquee-track { animation: none; }
}

/* ============================================================
   CASE STUDY: DAYTRIP (case-study-4.html)
   Scoped entirely to .dyt__page. Same section grammar as the
   Axis Direct / Yamaha / Foodpanda case studies (framed hero,
   marquee, ledger, zigzag caps, dark flow band, bento grids,
   layer stack, vertical agenda, table, spec sheet) recolored
   around Daytrip's violet brand. Reuses the two-sided "duo" card
   pattern from Axis Direct (traveler vs. operations, not four
   sides like Foodpanda) and adds one component neither prior
   study needed: a single-row connector chain for the
   booking->driver->route->location->completion data flow.
   Nothing here leaks elsewhere.
   ============================================================ */
.dyt__page {
  --dc: #6c3ce9;
  --dc2: #3d1f8f;
  --dc3: #a78bfa;
  --dh: #1c1e2b;
  --dt: #6b7089;
  --db: #e7e3f5;
  --dbg: #f8f6fd;
  --ddark: #07152F;
  --dmuted: #c7bdea;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.dyt__page .dyt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--dc);
  margin-bottom: 18px;
}
.dyt__page .dyt__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--dh); margin: 0 0 20px; }
.dyt__page .dyt__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--dh); margin: 0 0 18px; }
.dyt__page .dyt__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dt); margin: 0 0 16px; }
.dyt__page .dyt__text:last-child { margin-bottom: 0; }
.dyt__page .dyt__text a { color: var(--dc); text-decoration: underline; text-underline-offset: 3px; }
.dyt__page .dyt__text a:hover { color: var(--dc2); }
.dyt__page .dyt__head { max-width: 780px; }
.dyt__page .dyt__head--center { margin: 0 auto 0; text-align: center; }
:where(.dyt__page) section { padding: 130px 0; }
.dyt__page .dyt__btn,
.dyt__page .dyt__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.dyt__page .dyt__btn { color: #fff; background: var(--dc); border: 2px solid var(--dc); }
.dyt__page .dyt__btn:hover { background: var(--dc2); border-color: var(--dc2); color: #fff; }
.dyt__page .dyt__btn-outline { color: var(--dh); border: 2px solid var(--db); background: transparent; }
.dyt__page .dyt__btn-outline:hover { border-color: var(--dc); color: var(--dc); }
.dyt__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.dyt__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--dmuted);
}
.dyt__crumb a { color: var(--dmuted); transition: color .25s ease; }
.dyt__crumb a:hover { color: #fff; }
.dyt__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.dyt__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero ---------- */
.dyt__hero {
  position: relative;
  overflow: hidden;
  background: var(--ddark);
  padding: 200px 0 120px;
}
.dyt__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 96% -12%, rgba(108, 60, 233, .42), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(167, 139, 250, .24), transparent 64%);
}
.dyt__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.dyt__hero > .container { position: relative; z-index: 2; }
.dyt__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: start; }
.dyt__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(167, 139, 250, .35);
  background: rgba(167, 139, 250, .12);
  color: var(--dc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.dyt__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.dyt__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--dc3), #d3c3fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dyt__hero-title em div div { background: linear-gradient(90deg, var(--dc3), #d3c3fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dyt__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #e6e0fa; margin: 0 0 18px; }
.dyt__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dmuted); margin: 0 0 16px; }
.dyt__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.dyt__hero .dyt__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.dyt__hero .dyt__btn-outline:hover { background: #fff; border-color: #fff; color: var(--ddark); }
.dyt__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dyt__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #e5ddfa;
  font-size: 13px;
  font-weight: 300;
}
.dyt__hero-figure { position: relative; margin-top: 6px; }
.dyt__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(108, 60, 233, .55), rgba(167, 139, 250, .45), rgba(61, 31, 143, .5), rgba(108, 60, 233, .55));
  filter: blur(70px);
  opacity: .55;
  animation: dytKfSpin 26s linear infinite;
}
.dyt__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.dyt__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes dytKfSpin { to { transform: rotate(360deg); } }
.dyt__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: dytKfChip 6s ease-in-out infinite;
}
.dyt__hero-chip i { color: var(--dc3); font-size: 18px; }
.dyt__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.dyt__hero-chip span { font-size: 13px; font-weight: 300; color: var(--dmuted); }
.dyt__hero-chip--1 { left: -30px; top: 6%; }
.dyt__hero-chip--2 { right: -26px; bottom: 6%; animation-delay: 3s; }
@keyframes dytKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.dyt__marquee {
  padding: 22px 0;
  background: #0e0a20;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dyt__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dyt__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: dytKfMarquee 40s linear infinite; }
.dyt__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #9186ad; white-space: nowrap; }
.dyt__marquee-track i { color: var(--dc3); font-size: 8px; }
@keyframes dytKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Overview + capability ledger ---------- */
.dyt__intro { background: #fff; }
.dyt__intro-copy { max-width: 800px; margin: 0 auto; text-align: center; }
.dyt__intro-copy .dyt__title { font-size: 34px; }
.dyt__intro-copy .dyt__lead { font-size: 19px; }
.dyt__ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--db); margin-top: 60px; }
.dyt__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--db);
  transition: background .3s ease;
}
.dyt__ledger-col:first-child { border-left: none; }
.dyt__ledger-col:hover { background: var(--dbg); }
.dyt__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--dh); margin: 0 0 8px; }
.dyt__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; }

/* ---------- 04. Challenge / Objective split ---------- */
.dyt__compare { background: var(--dbg); }
.dyt__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 58px; }
.dyt__compare-col { border: 1px solid var(--db); border-radius: 18px; padding: 34px 32px; background: #fff; }
.dyt__compare-col--new { border-color: rgba(108, 60, 233, .3); box-shadow: 0 22px 50px rgba(28, 30, 43, .1); }
.dyt__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dt);
  margin-bottom: 18px;
}
.dyt__compare-col--new .dyt__compare-tag { color: var(--dc); }
.dyt__compare-col ul { list-style: none; margin: 0; padding: 0; }
.dyt__compare-col li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--dt);
}
.dyt__compare-col li:last-child { margin-bottom: 0; }
.dyt__compare-col li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 7px;
  position: absolute;
  left: 0;
  top: 7px;
  color: #c7cad8;
}
.dyt__compare-col--new li { color: var(--dh); }
.dyt__compare-col--new li::before { content: "\f00c"; font-size: 12px; top: 4px; color: var(--dc); }
.dyt__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dc), var(--dc3));
  color: #fff;
  font-size: 17px;
}

/* ---------- 05/10. Two-sided "duo" cards (solution & experience design) ---------- */
.dyt__duo { background: #fff; }
.dyt__duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 58px; }
.dyt__duo-card {
  padding: 40px 36px;
  border: 1px solid var(--db);
  border-radius: 20px;
  background: var(--dbg);
}
.dyt__duo-card--alt { background: var(--ddark); border-color: transparent; }
.dyt__duo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(108, 60, 233, .1);
  color: var(--dc);
  font-size: 21px;
  margin-bottom: 20px;
}
.dyt__duo-card--alt .dyt__duo-ico { background: rgba(167, 139, 250, .16); color: var(--dc3); }
.dyt__duo-card h3 { font-size: 21px; font-weight: 600; color: var(--dh); margin: 0 0 14px; }
.dyt__duo-card--alt h3 { color: #fff; }
.dyt__duo-card p.dyt__duo-lead { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0 0 20px; }
.dyt__duo-card--alt p.dyt__duo-lead { color: var(--dmuted); }
.dyt__duo-card ul { list-style: none; margin: 0; padding: 0; }
.dyt__duo-card li {
  position: relative;
  padding: 0 0 0 24px;
  margin-bottom: 12px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--dt);
}
.dyt__duo-card--alt li { color: #eae4fb; }
.dyt__duo-card li:last-child { margin-bottom: 0; }
.dyt__duo-card li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--dc);
}
.dyt__duo-card--alt li::before { color: var(--dc3); }

/* ---------- 06. Key capabilities (glass HUD) ---------- */
.dyt__cap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(108, 60, 233, .3), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(61, 31, 143, .25), transparent 55%),
    var(--dh);
}
.dyt__cap::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: 42px 42px;
  pointer-events: none;
}
.dyt__cap .container { position: relative; z-index: 1; }
.dyt__cap .dyt__eyebrow { color: var(--dc3); }
.dyt__cap .dyt__title { color: #fff; }
.dyt__cap-list { list-style: none; margin: 74px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dyt__cap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.dyt__cap-row::before,
.dyt__cap-row::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--dc);
  border-style: solid;
  opacity: .6;
  transition: opacity .35s ease, border-color .35s ease;
}
.dyt__cap-row::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.dyt__cap-row::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.dyt__cap-list li:nth-child(3n+2) .dyt__cap-row::before,
.dyt__cap-list li:nth-child(3n+2) .dyt__cap-row::after { border-color: var(--dc2); }
.dyt__cap-list li:nth-child(3n) .dyt__cap-row::before,
.dyt__cap-list li:nth-child(3n) .dyt__cap-row::after { border-color: var(--dc3); }
.dyt__cap-row:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(108, 60, 233, .5);
  box-shadow: 0 0 0 1px rgba(108, 60, 233, .3), 0 0 44px -8px rgba(108, 60, 233, .6);
}
.dyt__cap-list li:nth-child(3n+2) .dyt__cap-row:hover { border-color: rgba(61, 31, 143, .5); box-shadow: 0 0 0 1px rgba(61, 31, 143, .3), 0 0 44px -8px rgba(61, 31, 143, .6); }
.dyt__cap-list li:nth-child(3n) .dyt__cap-row:hover { border-color: rgba(167, 139, 250, .5); box-shadow: 0 0 0 1px rgba(167, 139, 250, .3), 0 0 44px -8px rgba(167, 139, 250, .6); }
.dyt__cap-row:hover::before, .dyt__cap-row:hover::after { opacity: 1; }
.dyt__cap-mark { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.dyt__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--dc);
  background: rgba(108, 60, 233, .1);
  color: var(--dc);
  font-size: 18px;
  box-shadow: 0 0 16px -3px rgba(108, 60, 233, .7);
  transition: box-shadow .35s ease;
}
.dyt__cap-list li:nth-child(3n+2) .dyt__cap-ico { border-color: var(--dc2); background: rgba(61, 31, 143, .1); color: var(--dc2); box-shadow: 0 0 16px -3px rgba(61, 31, 143, .7); }
.dyt__cap-list li:nth-child(3n) .dyt__cap-ico { border-color: var(--dc3); background: rgba(167, 139, 250, .18); color: var(--dc3); box-shadow: 0 0 16px -3px rgba(167, 139, 250, .8); }
.dyt__cap-num {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.dyt__cap-num::before { content: "ID\00b7"; color: rgba(255, 255, 255, .25); }
.dyt__cap-row h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.dyt__cap-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .55); margin: 0; transition: color .35s ease; }
.dyt__cap-row:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- 07/09/11/16. Bento grids ---------- */
.dyt__bento-section { background: #fff; }
.dyt__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.dyt__bento-card {
  padding: 32px 28px;
  border: 1px solid var(--db);
  border-radius: 18px;
  background: var(--dbg);
  transition: all .3s ease;
}
.dyt__bento-card:hover { background: #fff; border-color: rgba(108, 60, 233, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.dyt__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(108, 60, 233, .1);
  color: var(--dc);
  font-size: 19px;
  margin-bottom: 16px;
}
.dyt__bento-card:nth-child(3n+2) .dyt__bento-ico { background: rgba(61, 31, 143, .1); color: var(--dc2); }
.dyt__bento-card:nth-child(3n) .dyt__bento-ico { background: rgba(167, 139, 250, .18); color: var(--dc3); }
.dyt__bento-card span.dyt__bento-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dt); margin-bottom: 8px; }
.dyt__bento-card h3 { font-size: 18px; font-weight: 600; color: var(--dh); margin: 0 0 8px; }
.dyt__bento-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; }

.dyt__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.dyt__tech-tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: var(--dbg);
  border: 1px solid var(--db);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--dh);
  transition: all .3s ease;
}
.dyt__tech-tags li:hover { border-color: var(--dc); color: var(--dc); transform: translateY(-3px); }

/* ---------- 08. Booking journey (dark flow band) ---------- */
.dyt__journey-band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--ddark) 0%, #170f33 100%); }
.dyt__journey-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(167, 139, 250, .22), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(108, 60, 233, .28), transparent 64%);
}
.dyt__journey-band > .container { position: relative; z-index: 1; }
.dyt__journey-band .dyt__eyebrow { color: var(--dc3); }
.dyt__journey-band .dyt__title { color: #fff; }
.dyt__journey-band .dyt__lead { color: #e6e0fa; }
.dyt__journey-band .dyt__text { color: var(--dmuted); }
.dyt__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 0; margin-top: 50px; }
.dyt__flow-step { position: relative; padding: 0 20px; text-align: center; }
.dyt__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--dc3);
  font-size: 22px;
  margin-bottom: 18px;
}
.dyt__flow-step h3 { font-size: 15.5px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.dyt__flow-step p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dmuted); margin: 0; }

/* ---------- 12. Connected mobility architecture (layer stack) ---------- */
.dyt__layers { background: var(--dbg); }
.dyt__layer-stack { max-width: 820px; margin: 58px auto 0; }
.dyt__layer {
  padding: 28px 32px;
  border: 1px solid var(--db);
  border-radius: 18px;
  background: #fff;
}
.dyt__layer-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.dyt__layer-num { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--dc); }
.dyt__layer h3 { font-size: 18px; font-weight: 600; color: var(--dh); margin: 0; }
.dyt__layer-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.dyt__layer-tags span {
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--dbg);
  border: 1px solid var(--db);
  font-size: 13px;
  font-weight: 400;
  color: var(--dt);
}
.dyt__layer-connector { display: flex; justify-content: center; padding: 10px 0; color: var(--dc); font-size: 15px; }

/* ---------- 13. Complete travel journey (vertical agenda) ---------- */
.dyt__journeys { background: #fff; }
.dyt__agenda { list-style: none; margin: 58px 0 0; padding: 0; }
.dyt__agenda li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--db);
}
.dyt__agenda li:last-child { border-bottom: 1px solid var(--db); }
.dyt__agenda-num { font-size: 28px; font-weight: 600; color: rgba(108, 60, 233, .18); line-height: 1; }
.dyt__agenda h3 { font-size: 17.5px; font-weight: 600; color: var(--dh); margin: 0 0 5px; }
.dyt__agenda p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--dt); margin: 0; max-width: 640px; }

/* ---------- 14. Real-time mobility (single-row connector chain) ---------- */
.dyt__realtime { background: var(--dbg); }
.dyt__chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin-top: 50px; }
.dyt__chain-step {
  padding: 14px 22px;
  border-radius: 50px;
  border: 1px solid var(--db);
  background: #fff;
  color: var(--dh);
  font-size: 14.5px;
  font-weight: 500;
}
.dyt__chain-arrow { padding: 0 16px; color: var(--dc); font-size: 14px; }

/* ---------- 15. Key capabilities table ---------- */
.dyt__table-section { background: var(--dbg); }
.dyt__table { margin-top: 58px; border: 1px solid var(--db); border-radius: 18px; overflow: hidden; background: #fff; }
.dyt__table-row { display: grid; grid-template-columns: 260px 1fr; border-top: 1px solid var(--db); }
.dyt__table-row:first-child { border-top: none; }
.dyt__table-row--head { background: var(--ddark); }
.dyt__table-row--head .dyt__table-cell,
.dyt__table-row--head .dyt__table-label { color: #fff; font-weight: 600; font-size: 14.5px; }
.dyt__table-label {
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dh);
  background: var(--dbg);
  display: flex;
  align-items: center;
}
.dyt__table-cell {
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--dt);
  border-left: 1px solid var(--db);
  display: flex;
  align-items: center;
}

/* ---------- 17. Project highlights (spec sheet) ---------- */
.dyt__specs { background: var(--ddark); position: relative; overflow: hidden; }
.dyt__specs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 10% 0%, rgba(108, 60, 233, .30), transparent 62%);
}
.dyt__specs > .container { position: relative; z-index: 1; }
.dyt__specs .dyt__eyebrow { color: var(--dc3); }
.dyt__specs .dyt__title { color: #fff; }
.dyt__specs .dyt__text { color: var(--dmuted); }
.dyt__specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 58px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.dyt__specs-item { background: #0d1c2f; padding: 26px 22px; }
.dyt__specs-item span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dmuted); margin-bottom: 10px; }
.dyt__specs-item strong { display: block; font-size: 15px; font-weight: 500; color: #fff; line-height: 1.4; }

/* ---------- 18. Result statement ---------- */
.dyt__scope { padding: 64px 0; background: var(--dbg); border-top: 1px solid var(--db); }
.dyt__scope-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.dyt__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--db);
  color: var(--dc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.dyt__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--dh);
  margin: 0;
}
.dyt__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--db); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.dyt__related span { font-size: 13.5px; font-weight: 500; color: var(--dt); text-transform: uppercase; letter-spacing: 1.5px; }
.dyt__related a { font-size: 14.5px; font-weight: 500; color: var(--dh); transition: color .25s ease; }
.dyt__related a:hover { color: var(--dc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dyt__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .dyt__page .dyt__title { font-size: 32px; }
  :where(.dyt__page) section { padding: 100px 0; }
  .dyt__hero { padding: 170px 0 100px; }
  .dyt__hero-title { font-size: 38px; }
  .dyt__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .dyt__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .dyt__hero-chip--1 { left: -14px; }
  .dyt__hero-chip--2 { right: -10px; }
  .dyt__ledger { grid-template-columns: repeat(3, 1fr); }
  .dyt__ledger-col:nth-child(3n+1) { border-left: none; }
  .dyt__ledger-col:nth-child(n+4) { border-top: 1px solid var(--db); padding-top: 26px; margin-top: 26px; }
  .dyt__compare-grid { grid-template-columns: 1fr; }
  .dyt__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .dyt__duo-grid { grid-template-columns: 1fr; }
  .dyt__cap-list { grid-template-columns: repeat(2, 1fr); }
  .dyt__bento { grid-template-columns: repeat(2, 1fr); }
  .dyt__specs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .dyt__table-row { grid-template-columns: 200px 1fr; }
  .dyt__flow { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .dyt__page .dyt__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .dyt__page .dyt__title { font-size: 26px; }
  .dyt__page .dyt__lead { font-size: 16.5px; }
  .dyt__scope p { font-size: 16.5px; }
  :where(.dyt__page) section { padding: 76px 0; }
  .dyt__hero { padding: 140px 0 76px; }
  .dyt__hero-title { font-size: 29px; }
  .dyt__hero-lead { font-size: 16.5px; }
  .dyt__hero-chip { display: none; }
  .dyt__ledger { grid-template-columns: 1fr; }
  .dyt__ledger-col { border-left: none !important; border-top: 1px solid var(--db); padding-top: 22px; margin-top: 22px; }
  .dyt__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .dyt__cap-list { grid-template-columns: 1fr; }
  .dyt__bento { grid-template-columns: 1fr; }
  .dyt__flow { grid-template-columns: 1fr; }
  .dyt__chain-step { font-size: 13px; padding: 11px 16px; }
  .dyt__chain-arrow { padding: 0 8px; }
  .dyt__table-row { grid-template-columns: 1fr; }
  .dyt__table-label { border-top: 1px solid var(--db); }
  .dyt__table-row:first-child .dyt__table-label { border-top: none; }
  .dyt__table-cell { border-left: none; border-top: 1px solid var(--db); }
  .dyt__agenda li { grid-template-columns: 1fr; gap: 8px; }
  .dyt__specs-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dyt__page * { transition-duration: .01ms !important; }
  .dyt__hero-glow,
  .dyt__hero-chip,
  .dyt__marquee-track { animation: none; }
}

/* ============================================================
   CASE STUDY: DIGITAL PAYMENTS PLATFORM (case-study-5.html)
   Scoped entirely to .pu__page. Same section grammar as the prior
   case studies (framed hero, marquee, ledger, zigzag caps, dark
   flow band, bento grids, layer stack, table, spec sheet)
   recolored around an indigo palette distinct from Daytrip's
   violet. Unlike the prior four studies this one has no
   fabricated technology stack (React.js/AWS/etc.) - the source
   content never names one, so the architecture section stays at
   the layer + integration-pattern level only. Also adds a single
   new component: a light (non-dark) icon flow for the "Mobile
   Merchant Journey" sitting alongside the dark "Merchant Journey"
   band, and a rhetorical-question pill band. Nothing here leaks
   elsewhere.
   ============================================================ */
.pu__page {
  --pc: #4f46e5;
  --pc2: #3730a3;
  --pc3: #a5b4fc;
  --ph: #1c1e2b;
  --pt: #6b7089;
  --pb: #e6e5f7;
  --pbg: #f7f7fd;
  --pdark: #07152F;
  --pmuted: #c3c2ee;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.pu__page .pu__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--pc);
  margin-bottom: 18px;
}
.pu__page .pu__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--ph); margin: 0 0 20px; }
.pu__page .pu__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ph); margin: 0 0 18px; }
.pu__page .pu__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--pt); margin: 0 0 16px; }
.pu__page .pu__text:last-child { margin-bottom: 0; }
.pu__page .pu__text a { color: var(--pc); text-decoration: underline; text-underline-offset: 3px; }
.pu__page .pu__text a:hover { color: var(--pc2); }
.pu__page .pu__head { max-width: 780px; }
.pu__page .pu__head--center { margin: 0 auto 0; text-align: center; }
:where(.pu__page) section { padding: 130px 0; }
.pu__page .pu__btn,
.pu__page .pu__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.pu__page .pu__btn { color: #fff; background: var(--pc); border: 2px solid var(--pc); }
.pu__page .pu__btn:hover { background: var(--pc2); border-color: var(--pc2); color: #fff; }
.pu__page .pu__btn-outline { color: var(--ph); border: 2px solid var(--pb); background: transparent; }
.pu__page .pu__btn-outline:hover { border-color: var(--pc); color: var(--pc); }
.pu__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.pu__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--pmuted);
}
.pu__crumb a { color: var(--pmuted); transition: color .25s ease; }
.pu__crumb a:hover { color: #fff; }
.pu__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.pu__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero ---------- */
.pu__hero {
  position: relative;
  overflow: hidden;
  background: var(--pdark);
  padding: 200px 0 120px;
}
.pu__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 96% -12%, rgba(79, 70, 229, .42), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(165, 180, 252, .24), transparent 64%);
}
.pu__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.pu__hero > .container { position: relative; z-index: 2; }
.pu__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: start; }
.pu__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(165, 180, 252, .35);
  background: rgba(165, 180, 252, .12);
  color: var(--pc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.pu__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.pu__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--pc3), #cdd3fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pu__hero-title em div div { background: linear-gradient(90deg, var(--pc3), #cdd3fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pu__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #e3e2fa; margin: 0 0 18px; }
.pu__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--pmuted); margin: 0 0 16px; }
.pu__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.pu__hero .pu__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.pu__hero .pu__btn-outline:hover { background: #fff; border-color: #fff; color: var(--pdark); }
.pu__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pu__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #dedcfa;
  font-size: 13px;
  font-weight: 300;
}
.pu__hero-figure { position: relative; margin-top: 6px; }
.pu__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(79, 70, 229, .55), rgba(165, 180, 252, .45), rgba(55, 48, 163, .5), rgba(79, 70, 229, .55));
  filter: blur(70px);
  opacity: .55;
  animation: puKfSpin 26s linear infinite;
}
.pu__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.pu__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes puKfSpin { to { transform: rotate(360deg); } }
.pu__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: puKfChip 6s ease-in-out infinite;
}
.pu__hero-chip i { color: var(--pc3); font-size: 18px; }
.pu__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.pu__hero-chip span { font-size: 13px; font-weight: 300; color: var(--pmuted); }
.pu__hero-chip--1 { left: -30px; top: 6%; }
.pu__hero-chip--2 { right: -26px; bottom: 6%; animation-delay: 3s; }
@keyframes puKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.pu__marquee {
  padding: 22px 0;
  background: #0c0a1f;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.pu__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pu__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: puKfMarquee 40s linear infinite; }
.pu__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #8b87ac; white-space: nowrap; }
.pu__marquee-track i { color: var(--pc3); font-size: 8px; }
@keyframes puKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Overview + capability ledger ---------- */
.pu__intro { background: #fff; }
.pu__intro-copy { max-width: 800px; margin: 0 auto; text-align: center; }
.pu__intro-copy .pu__title { font-size: 34px; }
.pu__intro-copy .pu__lead { font-size: 19px; }
.pu__ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--pb); margin-top: 60px; }
.pu__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--pb);
  transition: background .3s ease;
}
.pu__ledger-col:first-child { border-left: none; }
.pu__ledger-col:hover { background: var(--pbg); }
.pu__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--ph); margin: 0 0 8px; }
.pu__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--pt); margin: 0; }

/* ---------- 04. Challenge / Objective split ---------- */
.pu__compare { background: var(--pbg); }
.pu__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 58px; }
.pu__compare-col { border: 1px solid var(--pb); border-radius: 18px; padding: 34px 32px; background: #fff; }
.pu__compare-col--new { border-color: rgba(79, 70, 229, .3); box-shadow: 0 22px 50px rgba(28, 30, 43, .1); }
.pu__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pt);
  margin-bottom: 18px;
}
.pu__compare-col--new .pu__compare-tag { color: var(--pc); }
.pu__compare-col ul { list-style: none; margin: 0; padding: 0; }
.pu__compare-col li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--pt);
}
.pu__compare-col li:last-child { margin-bottom: 0; }
.pu__compare-col li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 7px;
  position: absolute;
  left: 0;
  top: 7px;
  color: #c7cad8;
}
.pu__compare-col--new li { color: var(--ph); }
.pu__compare-col--new li::before { content: "\f00c"; font-size: 12px; top: 4px; color: var(--pc); }
.pu__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pc), var(--pc3));
  color: #fff;
  font-size: 17px;
}

/* ---------- 05. Key capabilities (glass HUD) ---------- */
.pu__cap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(79, 70, 229, .3), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(55, 48, 163, .25), transparent 55%),
    var(--ph);
}
.pu__cap::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: 42px 42px;
  pointer-events: none;
}
.pu__cap .container { position: relative; z-index: 1; }
.pu__cap .pu__eyebrow { color: var(--pc3); }
.pu__cap .pu__title { color: #fff; }
.pu__cap-list { list-style: none; margin: 74px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pu__cap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.pu__cap-row::before,
.pu__cap-row::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--pc);
  border-style: solid;
  opacity: .6;
  transition: opacity .35s ease, border-color .35s ease;
}
.pu__cap-row::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.pu__cap-row::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.pu__cap-list li:nth-child(3n+2) .pu__cap-row::before,
.pu__cap-list li:nth-child(3n+2) .pu__cap-row::after { border-color: var(--pc2); }
.pu__cap-list li:nth-child(3n) .pu__cap-row::before,
.pu__cap-list li:nth-child(3n) .pu__cap-row::after { border-color: var(--pc3); }
.pu__cap-row:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(79, 70, 229, .5);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, .3), 0 0 44px -8px rgba(79, 70, 229, .6);
}
.pu__cap-list li:nth-child(3n+2) .pu__cap-row:hover { border-color: rgba(55, 48, 163, .5); box-shadow: 0 0 0 1px rgba(55, 48, 163, .3), 0 0 44px -8px rgba(55, 48, 163, .6); }
.pu__cap-list li:nth-child(3n) .pu__cap-row:hover { border-color: rgba(165, 180, 252, .5); box-shadow: 0 0 0 1px rgba(165, 180, 252, .3), 0 0 44px -8px rgba(165, 180, 252, .6); }
.pu__cap-row:hover::before, .pu__cap-row:hover::after { opacity: 1; }
.pu__cap-mark { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.pu__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--pc);
  background: rgba(79, 70, 229, .1);
  color: var(--pc);
  font-size: 18px;
  box-shadow: 0 0 16px -3px rgba(79, 70, 229, .7);
  transition: box-shadow .35s ease;
}
.pu__cap-list li:nth-child(3n+2) .pu__cap-ico { border-color: var(--pc2); background: rgba(55, 48, 163, .1); color: var(--pc2); box-shadow: 0 0 16px -3px rgba(55, 48, 163, .7); }
.pu__cap-list li:nth-child(3n) .pu__cap-ico { border-color: var(--pc3); background: rgba(165, 180, 252, .22); color: var(--pc3); box-shadow: 0 0 16px -3px rgba(165, 180, 252, .8); }
.pu__cap-num {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.pu__cap-num::before { content: "ID\00b7"; color: rgba(255, 255, 255, .25); }
.pu__cap-row h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.pu__cap-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .55); margin: 0; transition: color .35s ease; }
.pu__cap-row:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- 06/07/10/12/13. Bento grids (reused throughout) ---------- */
.pu__bento-section { background: #fff; }
.pu__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.pu__bento-card {
  padding: 32px 28px;
  border: 1px solid var(--pb);
  border-radius: 18px;
  background: var(--pbg);
  transition: all .3s ease;
}
.pu__bento-card:hover { background: #fff; border-color: rgba(79, 70, 229, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.pu__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(79, 70, 229, .1);
  color: var(--pc);
  font-size: 19px;
  margin-bottom: 16px;
}
.pu__bento-card:nth-child(3n+2) .pu__bento-ico { background: rgba(55, 48, 163, .1); color: var(--pc2); }
.pu__bento-card:nth-child(3n) .pu__bento-ico { background: rgba(165, 180, 252, .22); color: var(--pc3); }
.pu__bento-card span.pu__bento-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--pt); margin-bottom: 8px; }
.pu__bento-card h3 { font-size: 18px; font-weight: 600; color: var(--ph); margin: 0 0 8px; }
.pu__bento-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--pt); margin: 0; }

/* ---------- 08. Merchant journey (dark flow band) ---------- */
.pu__journey-band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--pdark) 0%, #140f30 100%); }
.pu__journey-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(165, 180, 252, .22), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(79, 70, 229, .28), transparent 64%);
}
.pu__journey-band > .container { position: relative; z-index: 1; }
.pu__journey-band .pu__eyebrow { color: var(--pc3); }
.pu__journey-band .pu__title { color: #fff; }
.pu__journey-band .pu__lead { color: #e3e2fa; }
.pu__journey-band .pu__text { color: var(--pmuted); }
.pu__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; margin-top: 50px; }
.pu__flow-step { position: relative; padding: 0 20px; text-align: center; }
.pu__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--pc3);
  font-size: 22px;
  margin-bottom: 18px;
}
.pu__flow-step h3 { font-size: 15.5px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.pu__flow-step p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--pmuted); margin: 0; }

/* ---------- 09. Mobile merchant journey (light flow) ---------- */
.pu__flow-section { background: var(--pbg); }
.pu__flow-light { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; margin-top: 50px; }
.pu__flow-light .pu__flow-step-l { position: relative; padding: 0 20px; text-align: center; }
.pu__flow-ico-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--pb);
  background: #fff;
  color: var(--pc);
  font-size: 22px;
  margin-bottom: 18px;
}
.pu__flow-light h3 { font-size: 15.5px; font-weight: 600; color: var(--ph); margin: 0 0 6px; }
.pu__flow-light p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--pt); margin: 0; }

/* ---------- 10. Platform architecture (layer stack + integration bento) ---------- */
.pu__layers { background: #fff; }
.pu__layer-stack { max-width: 820px; margin: 58px auto 0; }
.pu__layer {
  padding: 28px 32px;
  border: 1px solid var(--pb);
  border-radius: 18px;
  background: var(--pbg);
}
.pu__layer-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.pu__layer-num { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--pc); }
.pu__layer h3 { font-size: 18px; font-weight: 600; color: var(--ph); margin: 0; }
.pu__layer-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.pu__layer-tags span {
  padding: 7px 16px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--pb);
  font-size: 13px;
  font-weight: 400;
  color: var(--pt);
}
.pu__layer-connector { display: flex; justify-content: center; padding: 10px 0; color: var(--pc); font-size: 15px; }
.pu__subhead { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--pc); text-align: center; display: block; margin: 74px 0 14px; }
.pu__subtext { max-width: 700px; margin: 0 auto; text-align: center; }

/* ---------- 11. Key capabilities table ---------- */
.pu__table-section { background: var(--pbg); }
.pu__table { margin-top: 58px; border: 1px solid var(--pb); border-radius: 18px; overflow: hidden; background: #fff; }
.pu__table-row { display: grid; grid-template-columns: 260px 1fr; border-top: 1px solid var(--pb); }
.pu__table-row:first-child { border-top: none; }
.pu__table-row--head { background: var(--pdark); }
.pu__table-row--head .pu__table-cell,
.pu__table-row--head .pu__table-label { color: #fff; font-weight: 600; font-size: 14.5px; }
.pu__table-label {
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ph);
  background: var(--pbg);
  display: flex;
  align-items: center;
}
.pu__table-cell {
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--pt);
  border-left: 1px solid var(--pb);
  display: flex;
  align-items: center;
}

/* ---------- 14. Rhetorical-question pill band ---------- */
.pu__questions-band { background: var(--pdark); position: relative; overflow: hidden; }
.pu__questions-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 90% 0%, rgba(79, 70, 229, .3), transparent 62%);
}
.pu__questions-band > .container { position: relative; z-index: 1; }
.pu__questions-band .pu__eyebrow { color: var(--pc3); }
.pu__questions-band .pu__title { color: #fff; }
.pu__questions-band .pu__text { color: var(--pmuted); }
.pu__questions { list-style: none; margin: 46px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pu__questions li {
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
}

/* ---------- 15. Project highlights (spec sheet, 3-col) ---------- */
.pu__specs { background: var(--pdark); position: relative; overflow: hidden; }
.pu__specs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 10% 0%, rgba(79, 70, 229, .28), transparent 62%);
}
.pu__specs > .container { position: relative; z-index: 1; }
.pu__specs .pu__eyebrow { color: var(--pc3); }
.pu__specs .pu__title { color: #fff; }
.pu__specs .pu__text { color: var(--pmuted); }
.pu__specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 58px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.pu__specs-item { background: #0d1c2f; padding: 26px 22px; }
.pu__specs-item span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--pmuted); margin-bottom: 10px; }
.pu__specs-item strong { display: block; font-size: 15px; font-weight: 500; color: #fff; line-height: 1.4; }

/* ---------- 16. Result statement ---------- */
.pu__scope { padding: 64px 0; background: var(--pbg); border-top: 1px solid var(--pb); }
.pu__scope-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.pu__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--pb);
  color: var(--pc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.pu__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ph);
  margin: 0;
}
.pu__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--pb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.pu__related span { font-size: 13.5px; font-weight: 500; color: var(--pt); text-transform: uppercase; letter-spacing: 1.5px; }
.pu__related a { font-size: 14.5px; font-weight: 500; color: var(--ph); transition: color .25s ease; }
.pu__related a:hover { color: var(--pc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .pu__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .pu__page .pu__title { font-size: 32px; }
  :where(.pu__page) section { padding: 100px 0; }
  .pu__hero { padding: 170px 0 100px; }
  .pu__hero-title { font-size: 38px; }
  .pu__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .pu__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .pu__hero-chip--1 { left: -14px; }
  .pu__hero-chip--2 { right: -10px; }
  .pu__ledger { grid-template-columns: repeat(3, 1fr); }
  .pu__ledger-col:nth-child(3n+1) { border-left: none; }
  .pu__ledger-col:nth-child(n+4) { border-top: 1px solid var(--pb); padding-top: 26px; margin-top: 26px; }
  .pu__compare-grid { grid-template-columns: 1fr; }
  .pu__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .pu__cap-list { grid-template-columns: repeat(2, 1fr); }
  .pu__bento { grid-template-columns: repeat(2, 1fr); }
  .pu__specs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .pu__table-row { grid-template-columns: 200px 1fr; }
  .pu__flow { grid-template-columns: repeat(2, 1fr); }
  .pu__flow-light { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .pu__page .pu__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .pu__page .pu__title { font-size: 26px; }
  .pu__page .pu__lead { font-size: 16.5px; }
  .pu__scope p { font-size: 16.5px; }
  :where(.pu__page) section { padding: 76px 0; }
  .pu__hero { padding: 140px 0 76px; }
  .pu__hero-title { font-size: 29px; }
  .pu__hero-lead { font-size: 16.5px; }
  .pu__hero-chip { display: none; }
  .pu__ledger { grid-template-columns: 1fr; }
  .pu__ledger-col { border-left: none !important; border-top: 1px solid var(--pb); padding-top: 22px; margin-top: 22px; }
  .pu__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .pu__cap-list { grid-template-columns: 1fr; }
  .pu__bento { grid-template-columns: 1fr; }
  .pu__flow { grid-template-columns: 1fr; }
  .pu__flow-light { grid-template-columns: 1fr; }
  .pu__table-row { grid-template-columns: 1fr; }
  .pu__table-label { border-top: 1px solid var(--pb); }
  .pu__table-row:first-child .pu__table-label { border-top: none; }
  .pu__table-cell { border-left: none; border-top: 1px solid var(--pb); }
  .pu__specs-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pu__page * { transition-duration: .01ms !important; }
  .pu__hero-glow,
  .pu__hero-chip,
  .pu__marquee-track { animation: none; }
}

/* ============================================================
   CASE STUDY: AUTOMOTIVE MARKETPLACE (case-study-6.html)
   Scoped entirely to .spn__page. Same section grammar as the
   prior case studies (framed hero, marquee, ledger, zigzag caps,
   dark flow band, bento grids, layer stack, table, spec sheet),
   recolored around a teal accent distinct from every prior
   study's palette (orange/blue/green/violet/indigo already used).
   Two components reused from earlier studies round out a two-
   sided buyer/seller journey: the vertical numbered "agenda"
   (first used for Daytrip's 8-step journey, here a 10-step buyer
   journey) and the single-row connector "chain" (first used for
   Yamaha/Daytrip's data-flow diagrams, here for the digital/
   physical handoff sequence). Nothing here leaks elsewhere.
   ============================================================ */
.spn__page {
  --sc: #0d9488;
  --sc2: #0f766e;
  --sc3: #5eead4;
  --sh: #1c1e2b;
  --st: #6b7089;
  --sb: #dcece9;
  --sbg: #f5faf9;
  --sdark: #07152F;
  --smuted: #a9d8d0;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.spn__page .spn__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--sc);
  margin-bottom: 18px;
}
.spn__page .spn__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--sh); margin: 0 0 20px; }
.spn__page .spn__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--sh); margin: 0 0 18px; }
.spn__page .spn__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--st); margin: 0 0 16px; }
.spn__page .spn__text:last-child { margin-bottom: 0; }
.spn__page .spn__text a { color: var(--sc); text-decoration: underline; text-underline-offset: 3px; }
.spn__page .spn__text a:hover { color: var(--sc2); }
.spn__page .spn__head { max-width: 780px; }
.spn__page .spn__head--center { margin: 0 auto 0; text-align: center; }
:where(.spn__page) section { padding: 130px 0; }
.spn__page .spn__btn,
.spn__page .spn__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.spn__page .spn__btn { color: #fff; background: var(--sc); border: 2px solid var(--sc); }
.spn__page .spn__btn:hover { background: var(--sc2); border-color: var(--sc2); color: #fff; }
.spn__page .spn__btn-outline { color: var(--sh); border: 2px solid var(--sb); background: transparent; }
.spn__page .spn__btn-outline:hover { border-color: var(--sc); color: var(--sc); }
.spn__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.spn__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--smuted);
}
.spn__crumb a { color: var(--smuted); transition: color .25s ease; }
.spn__crumb a:hover { color: #fff; }
.spn__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.spn__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero ---------- */
.spn__hero {
  position: relative;
  overflow: hidden;
  background: var(--sdark);
  padding: 200px 0 120px;
}
.spn__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 96% -12%, rgba(13, 148, 136, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(94, 234, 212, .22), transparent 64%);
}
.spn__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.spn__hero > .container { position: relative; z-index: 2; }
.spn__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: start; }
.spn__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(94, 234, 212, .35);
  background: rgba(94, 234, 212, .1);
  color: var(--sc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.spn__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.spn__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--sc3), #a8f5e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.spn__hero-title em div div { background: linear-gradient(90deg, var(--sc3), #a8f5e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.spn__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #ddf5f0; margin: 0 0 18px; }
.spn__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--smuted); margin: 0 0 16px; }
.spn__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.spn__hero .spn__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.spn__hero .spn__btn-outline:hover { background: #fff; border-color: #fff; color: var(--sdark); }
.spn__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.spn__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #dbf5ef;
  font-size: 13px;
  font-weight: 300;
}
.spn__hero-figure { position: relative; margin-top: 6px; }
.spn__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(13, 148, 136, .55), rgba(94, 234, 212, .4), rgba(15, 118, 110, .5), rgba(13, 148, 136, .55));
  filter: blur(70px);
  opacity: .55;
  animation: spnKfSpin 26s linear infinite;
}
.spn__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.spn__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes spnKfSpin { to { transform: rotate(360deg); } }
.spn__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: spnKfChip 6s ease-in-out infinite;
}
.spn__hero-chip i { color: var(--sc3); font-size: 18px; }
.spn__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.spn__hero-chip span { font-size: 13px; font-weight: 300; color: var(--smuted); }
.spn__hero-chip--1 { left: -30px; top: 6%; }
.spn__hero-chip--2 { right: -26px; bottom: 6%; animation-delay: 3s; }
@keyframes spnKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.spn__marquee {
  padding: 22px 0;
  background: #06201c;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.spn__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.spn__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: spnKfMarquee 40s linear infinite; }
.spn__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7fa39c; white-space: nowrap; }
.spn__marquee-track i { color: var(--sc3); font-size: 8px; }
@keyframes spnKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Overview + capability ledger ---------- */
.spn__intro { background: #fff; }
.spn__intro-copy { max-width: 800px; margin: 0 auto; text-align: center; }
.spn__intro-copy .spn__title { font-size: 34px; }
.spn__intro-copy .spn__lead { font-size: 19px; }
.spn__ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--sb); margin-top: 60px; }
.spn__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--sb);
  transition: background .3s ease;
}
.spn__ledger-col:first-child { border-left: none; }
.spn__ledger-col:hover { background: var(--sbg); }
.spn__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--sh); margin: 0 0 8px; }
.spn__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--st); margin: 0; }

/* ---------- 04. Challenge / Objective split ---------- */
.spn__compare { background: var(--sbg); }
.spn__compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 58px; }
.spn__compare-col { border: 1px solid var(--sb); border-radius: 18px; padding: 34px 32px; background: #fff; }
.spn__compare-col--new { border-color: rgba(13, 148, 136, .3); box-shadow: 0 22px 50px rgba(28, 30, 43, .1); }
.spn__compare-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--st);
  margin-bottom: 18px;
}
.spn__compare-col--new .spn__compare-tag { color: var(--sc); }
.spn__compare-col ul { list-style: none; margin: 0; padding: 0; }
.spn__compare-col li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--st);
}
.spn__compare-col li:last-child { margin-bottom: 0; }
.spn__compare-col li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 7px;
  position: absolute;
  left: 0;
  top: 7px;
  color: #c7cad8;
}
.spn__compare-col--new li { color: var(--sh); }
.spn__compare-col--new li::before { content: "\f00c"; font-size: 12px; top: 4px; color: var(--sc); }
.spn__compare-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sc), var(--sc3));
  color: #fff;
  font-size: 17px;
}

/* ---------- 05/09/10. Two-sided "duo" cards ---------- */
.spn__duo { background: #fff; }
.spn__duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 58px; }
.spn__duo-card {
  padding: 40px 36px;
  border: 1px solid var(--sb);
  border-radius: 20px;
  background: var(--sbg);
}
.spn__duo-card--alt { background: var(--sdark); border-color: transparent; }
.spn__duo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(13, 148, 136, .1);
  color: var(--sc);
  font-size: 21px;
  margin-bottom: 20px;
}
.spn__duo-card--alt .spn__duo-ico { background: rgba(94, 234, 212, .16); color: var(--sc3); }
.spn__duo-card h3 { font-size: 21px; font-weight: 600; color: var(--sh); margin: 0 0 14px; }
.spn__duo-card--alt h3 { color: #fff; }
.spn__duo-card p.spn__duo-lead { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--st); margin: 0 0 20px; }
.spn__duo-card--alt p.spn__duo-lead { color: var(--smuted); }
.spn__duo-card ul { list-style: none; margin: 0; padding: 0; }
.spn__duo-card li {
  position: relative;
  padding: 0 0 0 24px;
  margin-bottom: 12px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--st);
}
.spn__duo-card--alt li { color: #ddf5f0; }
.spn__duo-card li:last-child { margin-bottom: 0; }
.spn__duo-card li::before {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 9px;
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--sc);
}
.spn__duo-card--alt li::before { color: var(--sc3); }

/* ---------- 06. Key capabilities (glass HUD) ---------- */
.spn__cap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(13, 148, 136, .3), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(15, 118, 110, .25), transparent 55%),
    var(--sh);
}
.spn__cap::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: 42px 42px;
  pointer-events: none;
}
.spn__cap .container { position: relative; z-index: 1; }
.spn__cap .spn__eyebrow { color: var(--sc3); }
.spn__cap .spn__title { color: #fff; }
.spn__cap-list { list-style: none; margin: 74px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.spn__cap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.spn__cap-row::before,
.spn__cap-row::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--sc);
  border-style: solid;
  opacity: .6;
  transition: opacity .35s ease, border-color .35s ease;
}
.spn__cap-row::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.spn__cap-row::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.spn__cap-list li:nth-child(3n+2) .spn__cap-row::before,
.spn__cap-list li:nth-child(3n+2) .spn__cap-row::after { border-color: var(--sc2); }
.spn__cap-list li:nth-child(3n) .spn__cap-row::before,
.spn__cap-list li:nth-child(3n) .spn__cap-row::after { border-color: var(--sc3); }
.spn__cap-row:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(13, 148, 136, .5);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, .3), 0 0 44px -8px rgba(13, 148, 136, .6);
}
.spn__cap-list li:nth-child(3n+2) .spn__cap-row:hover { border-color: rgba(15, 118, 110, .5); box-shadow: 0 0 0 1px rgba(15, 118, 110, .3), 0 0 44px -8px rgba(15, 118, 110, .6); }
.spn__cap-list li:nth-child(3n) .spn__cap-row:hover { border-color: rgba(94, 234, 212, .5); box-shadow: 0 0 0 1px rgba(94, 234, 212, .3), 0 0 44px -8px rgba(94, 234, 212, .6); }
.spn__cap-row:hover::before, .spn__cap-row:hover::after { opacity: 1; }
.spn__cap-mark { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.spn__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--sc);
  background: rgba(13, 148, 136, .1);
  color: var(--sc);
  font-size: 18px;
  box-shadow: 0 0 16px -3px rgba(13, 148, 136, .7);
  transition: box-shadow .35s ease;
}
.spn__cap-list li:nth-child(3n+2) .spn__cap-ico { border-color: var(--sc2); background: rgba(15, 118, 110, .1); color: var(--sc2); box-shadow: 0 0 16px -3px rgba(15, 118, 110, .7); }
.spn__cap-list li:nth-child(3n) .spn__cap-ico { border-color: var(--sc3); background: rgba(94, 234, 212, .22); color: var(--sc3); box-shadow: 0 0 16px -3px rgba(94, 234, 212, .8); }
.spn__cap-num {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.spn__cap-num::before { content: "ID\00b7"; color: rgba(255, 255, 255, .25); }
.spn__cap-row h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.spn__cap-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .55); margin: 0; transition: color .35s ease; }
.spn__cap-row:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- 07/08/13/15/16. Bento grids (reused throughout) ---------- */
.spn__bento-section { background: #fff; }
.spn__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.spn__bento-card {
  padding: 32px 28px;
  border: 1px solid var(--sb);
  border-radius: 18px;
  background: var(--sbg);
  transition: all .3s ease;
}
.spn__bento-card:hover { background: #fff; border-color: rgba(13, 148, 136, .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.spn__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(13, 148, 136, .1);
  color: var(--sc);
  font-size: 19px;
  margin-bottom: 16px;
}
.spn__bento-card:nth-child(3n+2) .spn__bento-ico { background: rgba(15, 118, 110, .1); color: var(--sc2); }
.spn__bento-card:nth-child(3n) .spn__bento-ico { background: rgba(94, 234, 212, .22); color: var(--sc3); }
.spn__bento-card span.spn__bento-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--st); margin-bottom: 8px; }
.spn__bento-card h3 { font-size: 18px; font-weight: 600; color: var(--sh); margin: 0 0 8px; }
.spn__bento-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--st); margin: 0; }

/* ---------- 11. Seller journey (dark flow band) ---------- */
.spn__journey-band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--sdark) 0%, #082420 100%); }
.spn__journey-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(94, 234, 212, .2), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(13, 148, 136, .28), transparent 64%);
}
.spn__journey-band > .container { position: relative; z-index: 1; }
.spn__journey-band .spn__eyebrow { color: var(--sc3); }
.spn__journey-band .spn__title { color: #fff; }
.spn__journey-band .spn__lead { color: #ddf5f0; }
.spn__journey-band .spn__text { color: var(--smuted); }
.spn__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; margin-top: 50px; }
.spn__flow-step { position: relative; padding: 0 16px; text-align: center; }
.spn__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--sc3);
  font-size: 21px;
  margin-bottom: 18px;
}
.spn__flow-step h3 { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.spn__flow-step p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--smuted); margin: 0; }

/* ---------- 12. Platform architecture (layer stack) ---------- */
.spn__layers { background: var(--sbg); }
.spn__layer-stack { max-width: 820px; margin: 58px auto 0; }
.spn__layer {
  padding: 28px 32px;
  border: 1px solid var(--sb);
  border-radius: 18px;
  background: #fff;
}
.spn__layer-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.spn__layer-num { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--sc); }
.spn__layer h3 { font-size: 18px; font-weight: 600; color: var(--sh); margin: 0; }
.spn__layer-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.spn__layer-tags span {
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--sbg);
  border: 1px solid var(--sb);
  font-size: 13px;
  font-weight: 400;
  color: var(--st);
}
.spn__layer-connector { display: flex; justify-content: center; padding: 10px 0; color: var(--sc); font-size: 15px; }

/* ---------- 13. Digital meets physical (connector chain) ---------- */
.spn__realtime { background: #fff; }
.spn__chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin-top: 50px; }
.spn__chain-step {
  padding: 14px 22px;
  border-radius: 50px;
  border: 1px solid var(--sb);
  background: var(--sbg);
  color: var(--sh);
  font-size: 14.5px;
  font-weight: 500;
}
.spn__chain-arrow { padding: 0 16px; color: var(--sc); font-size: 14px; }

/* ---------- 09. Buyer journey (vertical agenda) ---------- */
.spn__journeys { background: #fff; }
.spn__agenda { list-style: none; margin: 58px 0 0; padding: 0; }
.spn__agenda li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--sb);
}
.spn__agenda li:last-child { border-bottom: 1px solid var(--sb); }
.spn__agenda-num { font-size: 26px; font-weight: 600; color: rgba(13, 148, 136, .18); line-height: 1; }
.spn__agenda h3 { font-size: 17px; font-weight: 600; color: var(--sh); margin: 0 0 4px; }
.spn__agenda p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--st); margin: 0; max-width: 640px; }

/* ---------- 14. Key capabilities table ---------- */
.spn__table-section { background: var(--sbg); }
.spn__table { margin-top: 58px; border: 1px solid var(--sb); border-radius: 18px; overflow: hidden; background: #fff; }
.spn__table-row { display: grid; grid-template-columns: 260px 1fr; border-top: 1px solid var(--sb); }
.spn__table-row:first-child { border-top: none; }
.spn__table-row--head { background: var(--sdark); }
.spn__table-row--head .spn__table-cell,
.spn__table-row--head .spn__table-label { color: #fff; font-weight: 600; font-size: 14.5px; }
.spn__table-label {
  padding: 14px 24px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sh);
  background: var(--sbg);
  display: flex;
  align-items: center;
}
.spn__table-cell {
  padding: 14px 24px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--st);
  border-left: 1px solid var(--sb);
  display: flex;
  align-items: center;
}

/* ---------- 17. Project highlights (spec sheet, 5-col) ---------- */
.spn__specs { background: var(--sdark); position: relative; overflow: hidden; }
.spn__specs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 10% 0%, rgba(13, 148, 136, .3), transparent 62%);
}
.spn__specs > .container { position: relative; z-index: 1; }
.spn__specs .spn__eyebrow { color: var(--sc3); }
.spn__specs .spn__title { color: #fff; }
.spn__specs .spn__text { color: var(--smuted); }
.spn__specs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 58px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; }
.spn__specs-item { background: #0d1c2f; padding: 24px 20px; }
.spn__specs-item span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--smuted); margin-bottom: 10px; }
.spn__specs-item strong { display: block; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.4; }

/* ---------- 18. Result statement ---------- */
.spn__scope { padding: 64px 0; background: var(--sbg); border-top: 1px solid var(--sb); }
.spn__scope-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.spn__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sb);
  color: var(--sc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.spn__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--sh);
  margin: 0;
}
.spn__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--sb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.spn__related span { font-size: 13.5px; font-weight: 500; color: var(--st); text-transform: uppercase; letter-spacing: 1.5px; }
.spn__related a { font-size: 14.5px; font-weight: 500; color: var(--sh); transition: color .25s ease; }
.spn__related a:hover { color: var(--sc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .spn__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .spn__page .spn__title { font-size: 32px; }
  :where(.spn__page) section { padding: 100px 0; }
  .spn__hero { padding: 170px 0 100px; }
  .spn__hero-title { font-size: 38px; }
  .spn__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .spn__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .spn__hero-chip--1 { left: -14px; }
  .spn__hero-chip--2 { right: -10px; }
  .spn__ledger { grid-template-columns: repeat(3, 1fr); }
  .spn__ledger-col:nth-child(3n+1) { border-left: none; }
  .spn__ledger-col:nth-child(n+4) { border-top: 1px solid var(--sb); padding-top: 26px; margin-top: 26px; }
  .spn__compare-grid { grid-template-columns: 1fr; }
  .spn__compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .spn__duo-grid { grid-template-columns: 1fr; }
  .spn__cap-list { grid-template-columns: repeat(2, 1fr); }
  .spn__bento { grid-template-columns: repeat(2, 1fr); }
  .spn__flow { grid-template-columns: repeat(2, 1fr); }
  .spn__specs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 991px) {
  .spn__table-row { grid-template-columns: 190px 1fr; }
}
@media only screen and (max-width: 767px) {
  .spn__page .spn__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .spn__page .spn__title { font-size: 26px; }
  .spn__page .spn__lead { font-size: 16.5px; }
  .spn__scope p { font-size: 16.5px; }
  :where(.spn__page) section { padding: 76px 0; }
  .spn__hero { padding: 140px 0 76px; }
  .spn__hero-title { font-size: 29px; }
  .spn__hero-lead { font-size: 16.5px; }
  .spn__hero-chip { display: none; }
  .spn__ledger { grid-template-columns: 1fr; }
  .spn__ledger-col { border-left: none !important; border-top: 1px solid var(--sb); padding-top: 22px; margin-top: 22px; }
  .spn__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .spn__cap-list { grid-template-columns: 1fr; }
  .spn__bento { grid-template-columns: 1fr; }
  .spn__flow { grid-template-columns: 1fr; }
  .spn__table-row { grid-template-columns: 1fr; }
  .spn__table-label { border-top: 1px solid var(--sb); }
  .spn__table-row:first-child .spn__table-label { border-top: none; }
  .spn__table-cell { border-left: none; border-top: 1px solid var(--sb); }
  .spn__agenda li { grid-template-columns: 1fr; gap: 8px; }
  .spn__chain-step { font-size: 13px; padding: 11px 16px; }
  .spn__chain-arrow { padding: 0 8px; }
  .spn__specs-grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 575px) {
  .spn__specs-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .spn__page * { transition-duration: .01ms !important; }
  .spn__hero-glow,
  .spn__hero-chip,
  .spn__marquee-track { animation: none; }
}

/* ============================================================
   CASE STUDY: CHEESY BURGER (case-study-7.html)
   Scoped entirely to .cb__page. A deliberately smaller component
   set than the previous six case studies: the source brief is a
   short single-page brand story with no architecture diagram, no
   named tech stack and no huge capability table, so this page
   doesn't force one - it reuses only hero/marquee/intro-ledger/
   cap-zigzag/bento/tag-list/scope/final-cta, plus one new small
   component (a two-column "checklist" for the challenge list)
   that the longer studies never needed. Recolored around a vivid
   fast-food orange/red instead of any prior study's palette.
   Nothing here leaks elsewhere.
   ============================================================ */
.cb__page {
  --cc: #ea580c;
  --cc2: #dc2626;
  --cc3: #fbbf24;
  --ch: #1c1e2b;
  --ct: #6b7089;
  --cb: #f6e4d8;
  --cbg: #fdf8f4;
  --cdark: #07152F;
  --cmuted: #f0c9a8;
  --cc-rgb: 234, 88, 12;
  --cc2-rgb: 220, 38, 38;
  --cc3-rgb: 251, 191, 36;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.cb__page .cb__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--cc);
  margin-bottom: 18px;
}
.cb__page .cb__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--ch); margin: 0 0 20px; }
.cb__page .cb__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ch); margin: 0 0 18px; }
.cb__page .cb__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ct); margin: 0 0 16px; }
.cb__page .cb__text:last-child { margin-bottom: 0; }
.cb__page .cb__text a { color: var(--cc); text-decoration: underline; text-underline-offset: 3px; }
.cb__page .cb__text a:hover { color: var(--cc2); }
.cb__page .cb__head { max-width: 780px; }
.cb__page .cb__head--center { margin: 0 auto 0; text-align: center; }
:where(.cb__page) section { padding: 130px 0; }
.cb__page .cb__btn,
.cb__page .cb__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.cb__page .cb__btn { color: #fff; background: var(--cc); border: 2px solid var(--cc); }
.cb__page .cb__btn:hover { background: var(--cc2); border-color: var(--cc2); color: #fff; }
.cb__page .cb__btn-outline { color: var(--ch); border: 2px solid var(--cb); background: transparent; }
.cb__page .cb__btn-outline:hover { border-color: var(--cc); color: var(--cc); }
.cb__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.cb__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--cmuted);
}
.cb__crumb a { color: var(--cmuted); transition: color .25s ease; }
.cb__crumb a:hover { color: #fff; }
.cb__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.cb__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero ---------- */
.cb__hero {
  position: relative;
  overflow: hidden;
  background: var(--cdark);
  padding: 200px 0 120px;
}
.cb__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 96% -12%, rgba(var(--cc-rgb), .42), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(var(--cc3-rgb), .2), transparent 64%);
}
.cb__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.cb__hero > .container { position: relative; z-index: 2; }
.cb__hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: start; }
.cb__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(var(--cc3-rgb), .35);
  background: rgba(var(--cc3-rgb), .1);
  color: var(--cc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.cb__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.cb__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--cc3), var(--cc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cb__hero-title em div div { background: linear-gradient(90deg, var(--cc3), var(--cc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cb__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #fbe8d7; margin: 0 0 18px; }
.cb__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--cmuted); margin: 0 0 16px; }
.cb__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.cb__hero .cb__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.cb__hero .cb__btn-outline:hover { background: #fff; border-color: #fff; color: var(--cdark); }
.cb__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cb__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #fbe3cd;
  font-size: 13px;
  font-weight: 300;
}
.cb__hero-figure { position: relative; margin-top: 6px; }
.cb__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--cc-rgb), .55), rgba(var(--cc3-rgb), .4), rgba(var(--cc2-rgb), .45), rgba(var(--cc-rgb), .55));
  filter: blur(70px);
  opacity: .55;
  animation: cbKfSpin 26s linear infinite;
}
.cb__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.cb__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes cbKfSpin { to { transform: rotate(360deg); } }
.cb__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: cbKfChip 6s ease-in-out infinite;
}
.cb__hero-chip i { color: var(--cc3); font-size: 18px; }
.cb__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.cb__hero-chip span { font-size: 13px; font-weight: 300; color: var(--cmuted); }
.cb__hero-chip--1 { left: -30px; top: 6%; }
.cb__hero-chip--2 { right: -26px; bottom: 6%; animation-delay: 3s; }
@keyframes cbKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.cb__marquee {
  padding: 22px 0;
  background: #1f0f05;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.cb__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cb__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: cbKfMarquee 40s linear infinite; }
.cb__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #ad8a72; white-space: nowrap; }
.cb__marquee-track i { color: var(--cc3); font-size: 8px; }
@keyframes cbKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Overview + mini ledger ---------- */
.cb__intro { background: #fff; }
.cb__intro-copy { max-width: 780px; margin: 0 auto; text-align: center; }
.cb__intro-copy .cb__title { font-size: 34px; }
.cb__intro-copy .cb__lead { font-size: 19px; }
.cb__ledger { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cb); margin-top: 60px; max-width: 900px; margin-left: auto; margin-right: auto; }
.cb__ledger-col {
  padding: 26px 22px 0;
  border-left: 1px solid var(--cb);
  text-align: center;
  transition: background .3s ease;
}
.cb__ledger-col:first-child { border-left: none; }
.cb__ledger-col:hover { background: var(--cbg); }
.cb__ledger-col h4 { font-size: 15.5px; font-weight: 600; color: var(--ch); margin: 0 0 8px; }
.cb__ledger-col p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ct); margin: 0; }

/* ---------- 04. The challenge (checklist) ---------- */
.cb__checklist-section { background: var(--cbg); }
.cb__checklist { list-style: none; margin: 54px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.cb__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cb);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ch);
}
.cb__checklist li i {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--cc-rgb), .1);
  color: var(--cc);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ---------- 05. Our approach (dark chain band) ---------- */
.cb__chainband { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--cdark) 0%, #241206 100%); }
.cb__chainband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(var(--cc3-rgb), .18), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(var(--cc-rgb), .28), transparent 64%);
}
.cb__chainband > .container { position: relative; z-index: 1; }
.cb__chainband .cb__eyebrow { color: var(--cc3); }
.cb__chainband .cb__title { color: #fff; }
.cb__chainband .cb__lead { color: #fbe8d7; }
.cb__chainband .cb__text { color: var(--cmuted); }
.cb__chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin-top: 50px; }
.cb__chain-step {
  padding: 14px 22px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
}
.cb__chain-arrow { padding: 0 16px; color: var(--cc3); font-size: 14px; }

/* ---------- 06/08. Bento grids ---------- */
.cb__bento-section { background: #fff; }
.cb__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; }
.cb__bento-card {
  padding: 32px 28px;
  border: 1px solid var(--cb);
  border-radius: 18px;
  background: var(--cbg);
  transition: all .3s ease;
}
.cb__bento-card:hover { background: #fff; border-color: rgba(var(--cc-rgb), .3); box-shadow: 0 20px 44px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.cb__bento-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(var(--cc-rgb), .1);
  color: var(--cc);
  font-size: 19px;
  margin-bottom: 16px;
}
.cb__bento-card:nth-child(3n+2) .cb__bento-ico { background: rgba(var(--cc2-rgb), .1); color: var(--cc2); }
.cb__bento-card:nth-child(3n) .cb__bento-ico { background: rgba(var(--cc3-rgb), .2); color: var(--cc3); }
.cb__bento-card h3 { font-size: 18px; font-weight: 600; color: var(--ch); margin: 0 0 8px; }
.cb__bento-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ct); margin: 0; }

/* ---------- 07. Key capabilities (glass HUD) ---------- */
.cb__cap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--cc-rgb), .3), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(var(--cc2-rgb), .25), transparent 55%),
    var(--ch);
}
.cb__cap::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: 42px 42px;
  pointer-events: none;
}
.cb__cap .container { position: relative; z-index: 1; }
.cb__cap .cb__eyebrow { color: var(--cc3); }
.cb__cap .cb__title { color: #fff; }
.cb__cap-list { list-style: none; margin: 74px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cb__cap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 30px 26px 28px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.cb__cap-row::before,
.cb__cap-row::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--cc);
  border-style: solid;
  opacity: .6;
  transition: opacity .35s ease, border-color .35s ease;
}
.cb__cap-row::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.cb__cap-row::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.cb__cap-list li:nth-child(3n+2) .cb__cap-row::before,
.cb__cap-list li:nth-child(3n+2) .cb__cap-row::after { border-color: var(--cc2); }
.cb__cap-list li:nth-child(3n) .cb__cap-row::before,
.cb__cap-list li:nth-child(3n) .cb__cap-row::after { border-color: var(--cc3); }
.cb__cap-row:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(var(--cc-rgb), .5);
  box-shadow: 0 0 0 1px rgba(var(--cc-rgb), .3), 0 0 44px -8px rgba(var(--cc-rgb), .6);
}
.cb__cap-list li:nth-child(3n+2) .cb__cap-row:hover { border-color: rgba(var(--cc2-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--cc2-rgb), .3), 0 0 44px -8px rgba(var(--cc2-rgb), .6); }
.cb__cap-list li:nth-child(3n) .cb__cap-row:hover { border-color: rgba(var(--cc3-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--cc3-rgb), .3), 0 0 44px -8px rgba(var(--cc3-rgb), .6); }
.cb__cap-row:hover::before, .cb__cap-row:hover::after { opacity: 1; }
.cb__cap-mark { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.cb__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--cc);
  background: rgba(var(--cc-rgb), .1);
  color: var(--cc);
  font-size: 18px;
  box-shadow: 0 0 16px -3px rgba(var(--cc-rgb), .7);
  transition: box-shadow .35s ease;
}
.cb__cap-list li:nth-child(3n+2) .cb__cap-ico { border-color: var(--cc2); background: rgba(var(--cc2-rgb), .1); color: var(--cc2); box-shadow: 0 0 16px -3px rgba(var(--cc2-rgb), .7); }
.cb__cap-list li:nth-child(3n) .cb__cap-ico { border-color: var(--cc3); background: rgba(var(--cc3-rgb), .16); color: var(--cc3); box-shadow: 0 0 16px -3px rgba(var(--cc3-rgb), .8); }
.cb__cap-num {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.cb__cap-num::before { content: "ID\00b7"; color: rgba(255, 255, 255, .25); }
.cb__cap-row h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.cb__cap-row p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .55); margin: 0; transition: color .35s ease; }
.cb__cap-row:hover p { color: rgba(255, 255, 255, .78); }

/* ---------- 09. Focus areas (tag pills) ---------- */
.cb__tags-section { background: var(--cbg); }
.cb__tags { list-style: none; margin: 50px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cb__tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--cb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ch);
  transition: all .3s ease;
}
.cb__tags li:hover { border-color: var(--cc); color: var(--cc); transform: translateY(-3px); }

/* ---------- 10. The customer journey (light icon flow) ---------- */
.cb__journey { background: #fff; }
.cb__flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 20px; margin-top: 54px; }
.cb__flow-step { position: relative; padding: 0 10px; text-align: center; }
.cb__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--cb);
  background: var(--cbg);
  color: var(--cc);
  font-size: 21px;
  margin-bottom: 16px;
}
.cb__flow-step h3 { font-size: 15px; font-weight: 600; color: var(--ch); margin: 0 0 6px; }
.cb__flow-step p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--ct); margin: 0; }

/* ---------- 11. The outcome (result statement) ---------- */
.cb__scope { padding: 80px 0; background: var(--cdark); position: relative; overflow: hidden; }
.cb__scope::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 50% 0%, rgba(var(--cc-rgb), .3), transparent 62%);
}
.cb__scope > .container { position: relative; z-index: 1; }
.cb__scope-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.cb__scope .cb__eyebrow { color: var(--cc3); }
.cb__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--cc3);
  font-size: 22px;
  margin-bottom: 28px;
}
.cb__scope p.cb__scope-text {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--cmuted);
  margin: 0 0 24px;
}
.cb__scope-tagline {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .cb__page .cb__title { font-size: 32px; }
  :where(.cb__page) section { padding: 100px 0; }
  .cb__hero { padding: 170px 0 100px; }
  .cb__hero-title { font-size: 38px; }
  .cb__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .cb__hero-figure { max-width: 480px; margin: 0 auto; order: -1; }
  .cb__hero-chip--1 { left: -14px; }
  .cb__hero-chip--2 { right: -10px; }
  .cb__bento { grid-template-columns: repeat(2, 1fr); }
  .cb__cap-list { grid-template-columns: repeat(2, 1fr); }
  .cb__flow { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 991px) {
  .cb__ledger { grid-template-columns: 1fr; max-width: 420px; }
  .cb__ledger-col { border-left: none; border-top: 1px solid var(--cb); padding-top: 22px; margin-top: 22px; }
  .cb__ledger-col:first-child { border-top: none; margin-top: 0; padding-top: 0; }
}
@media only screen and (max-width: 767px) {
  .cb__page .cb__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .cb__page .cb__title { font-size: 26px; }
  .cb__page .cb__lead { font-size: 16.5px; }
  :where(.cb__page) section { padding: 76px 0; }
  .cb__hero { padding: 140px 0 76px; }
  .cb__hero-title { font-size: 29px; }
  .cb__hero-lead { font-size: 16.5px; }
  .cb__hero-chip { display: none; }
  .cb__checklist { grid-template-columns: 1fr; }
  .cb__bento { grid-template-columns: 1fr; }
  .cb__cap-list { grid-template-columns: 1fr; }
  .cb__flow { grid-template-columns: 1fr 1fr; }
  .cb__scope-tagline { font-size: 19px; }
  .cb__chain-step { font-size: 13px; padding: 11px 16px; }
  .cb__chain-arrow { padding: 0 8px; }
}
@media only screen and (max-width: 575px) {
  .cb__flow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cb__page * { transition-duration: .01ms !important; }
  .cb__hero-glow,
  .cb__hero-chip,
  .cb__marquee-track { animation: none; }
}

/* ============================================================
   RETAIL & E-COMMERCE INDUSTRY PAGE (retail-e-commerce.html)
   Scoped entirely to .retail__page. Third sibling in the Industries
   family (after .hc__page and .bank__page) - same brand blue/purple,
   but the composition is different again on purpose: a full-bleed
   photographic hero instead of a framed card, a horizontal scroll-snap
   "commerce loop" rail instead of a chain or a comparison, a tabbed
   capability switcher instead of a grid or a zigzag, a native
   <details>/<summary> accordion instead of chips or ledger rows, an
   editorial big-number list instead of a timeline or flat cards, and a
   breadcrumb-style step trail instead of circles or a vertical agenda.
   Nothing here leaks to other pages.
   ============================================================ */
.retail__page {
  --rtc: #005fcc;
  --rtc2: #8079f8;
  --rtc3: #4da3ff;
  --rth: #1c1e2b;
  --rtt: #6b7089;
  --rtb: #e9eaf5;
  --rtbg: #f6f7fc;
  --rtdark: #07152F;
  --rtmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.retail__page .retail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--rtc);
  margin-bottom: 18px;
}
.retail__page .retail__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--rth); margin: 0 0 20px; }
.retail__page .retail__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--rth); margin: 0 0 18px; }
.retail__page .retail__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--rtt); margin: 0 0 16px; }
.retail__page .retail__text:last-child { margin-bottom: 0; }
.retail__page .retail__text a { color: var(--rtc); text-decoration: underline; text-underline-offset: 3px; }
.retail__page .retail__text a:hover { color: var(--rtc2); }
.retail__page .retail__head { max-width: 760px; }
.retail__page .retail__head--center { margin: 0 auto 0; text-align: center; }
:where(.retail__page) section { padding: 130px 0; }
.retail__page .retail__btn,
.retail__page .retail__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.retail__page .retail__btn { color: #fff; background: var(--rtc); border: 2px solid var(--rtc); }
.retail__page .retail__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.retail__page .retail__btn-outline { color: var(--rth); border: 2px solid var(--rtb); background: transparent; }
.retail__page .retail__btn-outline:hover { border-color: var(--rtc); color: var(--rtc); }
.retail__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.retail__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  font-size: 13.5px;
  font-weight: 400;
  color: #cfd9ec;
}
.retail__crumb a { color: #cfd9ec; transition: color .25s ease; }
.retail__crumb a:hover { color: #fff; }
.retail__crumb i { font-size: 9px; color: rgba(255, 255, 255, .4); }
.retail__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right - same grammar as the
   other Industries pages: glow ring, framed visual, floating chips) ---------- */
.retail__hero {
  position: relative;
  overflow: hidden;
  background: var(--rtdark);
  padding: 200px 0 120px;
}
.retail__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.retail__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.retail__hero > .container { position: relative; z-index: 2; }
.retail__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.retail__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--rtc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.retail__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.retail__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--rtc3), var(--rtc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.retail__hero-title em div div { background: linear-gradient(90deg, var(--rtc3), var(--rtc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.retail__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.retail__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--rtmuted); margin: 0 0 16px; }
.retail__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.retail__hero .retail__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.retail__hero .retail__btn-outline:hover { background: #fff; border-color: #fff; color: var(--rtdark); }
.retail__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.retail__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.retail__hero-figure { position: relative; }
.retail__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: retailKfSpin 26s linear infinite;
}
.retail__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.retail__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes retailKfSpin { to { transform: rotate(360deg); } }
.retail__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: retailKfChip 6s ease-in-out infinite;
}
.retail__hero-chip i { color: var(--rtc3); font-size: 18px; }
.retail__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.retail__hero-chip span { font-size: 13px; font-weight: 300; color: var(--rtmuted); }
.retail__hero-chip--1 { left: -34px; top: 12%; }
.retail__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes retailKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.retail__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.retail__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.retail__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: retailKfMarquee 40s linear infinite; }
.retail__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.retail__marquee-track i { color: var(--rtc3); font-size: 8px; }
@keyframes retailKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction (copy + a compact journey preview rail) ---------- */
.retail__intro { background: #fff; }
.retail__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; }
.retail__journey { list-style: none; margin: 0; padding: 0; position: relative; }
.retail__journey::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--rtb);
}
.retail__journey li { position: relative; display: flex; gap: 16px; padding: 0 0 26px 0; }
.retail__journey li:last-child { padding-bottom: 0; }
.retail__journey-ico {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rtb);
  color: var(--rtc);
  font-size: 14px;
}
.retail__journey h4 { font-size: 15px; font-weight: 600; color: var(--rth); margin: 0 0 3px; }
.retail__journey p { font-size: 13.5px; font-weight: 300; color: var(--rtt); margin: 0; line-height: 1.6; }

/* ---------- 04. The Commerce Loop (flagship - horizontal scroll-snap
   rail with prev/next controls, instead of a static chain or split) ---------- */
.retail__loop { background: var(--rtbg); }
.retail__loop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.retail__loop-nav { display: flex; gap: 10px; }
.retail__loop-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rtb);
  background: #fff;
  color: var(--rth);
  font-size: 15px;
  cursor: pointer;
  transition: all .25s ease;
}
.retail__loop-nav button:hover { border-color: var(--rtc); color: var(--rtc); }
.retail__loop-rail {
  display: flex;
  gap: 22px;
  margin-top: 46px;
  padding-bottom: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.retail__loop-card {
  scroll-snap-align: start;
  flex: 0 0 300px;
  padding: 32px 28px;
  border-radius: 18px;
  border: 1px solid var(--rtb);
  background: #fff;
  transition: all .3s ease;
}
.retail__loop-card:hover { border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); transform: translateY(-4px); }
.retail__loop-num { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; color: rgba(0, 95, 204, .4); margin-bottom: 16px; }
.retail__loop-card:nth-child(3n+2) .retail__loop-num { color: rgba(128, 121, 248, .45); }
.retail__loop-card:nth-child(3n) .retail__loop-num { color: rgba(77, 163, 255, .5); }
.retail__loop-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(0, 95, 204, .1);
  color: var(--rtc);
  font-size: 19px;
  margin-bottom: 18px;
}
.retail__loop-card:nth-child(3n+2) .retail__loop-ico { background: rgba(128, 121, 248, .12); color: var(--rtc2); }
.retail__loop-card:nth-child(3n) .retail__loop-ico { background: rgba(77, 163, 255, .14); color: var(--rtc3); }
.retail__loop-card h3 { font-size: 18.5px; font-weight: 600; color: var(--rth); margin: 0 0 10px; }
.retail__loop-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--rtt); margin: 0; }
.retail__loop-return {
  scroll-snap-align: start;
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  border-radius: 18px;
  border: 1px dashed rgba(0, 95, 204, .35);
  color: var(--rtc);
  font-size: 14px;
  font-weight: 500;
  padding: 20px;
}
.retail__loop-return i { font-size: 20px; }

/* ---------- 05. Capabilities (flagship - tabbed switcher instead of a
   grid or a zigzag) ---------- */
.retail__cap { background: #fff; }
.retail__cap-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0; margin-top: 56px; border: 1px solid var(--rtb); border-radius: 20px; overflow: hidden; }
.retail__cap-tabs { list-style: none; margin: 0; padding: 14px; background: var(--rtbg); border-right: 1px solid var(--rtb); }
.retail__cap-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--rtt);
  transition: all .25s ease;
}
.retail__cap-tab:focus-visible { outline: 2px solid var(--rtc); outline-offset: 2px; }
.retail__cap-tab i { font-size: 16px; color: var(--rtt); transition: color .25s ease; }
.retail__cap-tab:hover { background: #fff; color: var(--rth); }
.retail__cap-tab.active { background: #fff; color: var(--rtc); box-shadow: 0 10px 24px rgba(28, 30, 43, .08); }
.retail__cap-tab.active i { color: var(--rtc); }
.retail__cap-panels { position: relative; padding: 46px 48px; }
.retail__cap-panel { display: none; }
.retail__cap-panel.active { display: block; }
.retail__cap-panel h3 { font-size: 23px; font-weight: 600; color: var(--rth); margin: 0 0 14px; }
.retail__cap-panel p { font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--rtt); margin: 0 0 14px; }
.retail__cap-panel p:last-child { margin-bottom: 0; }

/* ---------- 06. Constraints (flagship - native details/summary
   accordion instead of chips or bordered ledger rows) ---------- */
.retail__constraints { background: var(--rtbg); }
.retail__acc { list-style: none; margin: 54px 0 0; padding: 0; border-top: 1px solid var(--rtb); }
.retail__acc-item { border-bottom: 1px solid var(--rtb); background: transparent; }
.retail__acc-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--rth);
}
.retail__acc-item > summary::-webkit-details-marker { display: none; }
.retail__acc-item > summary i.retail__acc-ico { flex: 0 0 auto; font-size: 15px; color: var(--rtc); width: 38px; height: 38px; border-radius: 10px; background: rgba(0, 95, 204, .1); display: inline-flex; align-items: center; justify-content: center; }
.retail__acc-item > summary .retail__acc-toggle { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--rtb); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--rtt); transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.retail__acc-item[open] > summary .retail__acc-toggle { transform: rotate(45deg); background: var(--rtc); border-color: var(--rtc); color: #fff; }
.retail__acc-body { padding: 0 4px 26px 56px; }
.retail__acc-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--rtt); margin: 0; }
/* ---------- Scope & responsibility statement (centerpiece band before
   the final CTA) ---------- */
.retail__scope { padding: 64px 0; background: var(--rtbg); border-top: 1px solid var(--rtb); }
.retail__scope-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.retail__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rtb);
  color: var(--rtc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.retail__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--rth);
  margin: 0;
}

/* ---------- 07. How We Think (flagship - editorial big-number single
   column list instead of a timeline or flat cards) ---------- */
.retail__principles { background: #fff; }
.retail__ed-list { list-style: none; margin: 56px 0 0; padding: 0; max-width: 880px; }
.retail__ed-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid var(--rtb);
  transition: background .25s ease;
}
.retail__ed-item:last-child { border-bottom: 1px solid var(--rtb); }
.retail__ed-item:hover { background: var(--rtbg); }
.retail__ed-num { font-size: 30px; font-weight: 600; color: rgba(0, 95, 204, .2); line-height: 1; }
.retail__ed-item h3 { font-size: 18.5px; font-weight: 600; color: var(--rth); margin: 0 0 8px; }
.retail__ed-item p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--rtt); margin: 0; max-width: 620px; }

/* ---------- 08. AI in retail (dark, editorial prose + a simple icon
   row, instead of a chip grid or a linear flow) ---------- */
.retail__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--rtdark) 0%, #0b1c3d 100%); }
.retail__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.retail__ai > .container { position: relative; z-index: 1; }
.retail__ai .retail__eyebrow { color: var(--rtc3); }
.retail__ai .retail__title { color: #fff; }
.retail__ai .retail__lead { color: #dbe6f4; max-width: 780px; margin-left: auto; margin-right: auto; }
.retail__ai .retail__text { color: var(--rtmuted); max-width: 780px; margin-left: auto; margin-right: auto; }
.retail__ai-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 46px; margin-top: 54px; }
.retail__ai-item { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 260px; }
.retail__ai-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--rtc3);
  font-size: 22px;
  margin-bottom: 18px;
}
.retail__ai-item h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.retail__ai-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--rtmuted); margin: 0; }
.retail__note {
  margin: 46px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--rtc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.retail__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--rtmuted); margin: 0; }
.retail__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data, cloud & integration (flagship - a connected
   horizontal process line instead of a stack or a bento grid) ---------- */
.retail__foundation { background: #fff; }
.retail__process { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 60px; }
.retail__process::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 32px;
  height: 1px;
  background: var(--rtb);
}
.retail__process-step { position: relative; text-align: center; }
.retail__process-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rtb);
  color: var(--rtc);
  font-size: 22px;
  margin-bottom: 20px;
}
.retail__process-step:nth-child(3n+2) .retail__process-ico { color: var(--rtc2); }
.retail__process-step:nth-child(3n) .retail__process-ico { color: var(--rtc3); }
.retail__process-step h3 { font-size: 16px; font-weight: 600; color: var(--rth); margin: 0 0 8px; }
.retail__process-step p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--rtt); margin: 0; }

/* ---------- 10. Perspectives (voice cards with a quote mark, instead
   of independent panels or a matrix table) ---------- */
.retail__persp { background: var(--rtbg); }
.retail__voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.retail__voice {
  position: relative;
  padding: 40px 34px 34px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--rtb);
}
.retail__voice-quote { font-size: 34px; color: rgba(0, 95, 204, .18); line-height: 1; margin-bottom: 14px; }
.retail__voice:nth-child(2) .retail__voice-quote { color: rgba(128, 121, 248, .22); }
.retail__voice:nth-child(3) .retail__voice-quote { color: rgba(77, 163, 255, .25); }
.retail__voice h3 { font-size: 18px; font-weight: 600; color: var(--rth); margin: 0 0 10px; }
.retail__voice-statement { font-size: 15px; font-style: italic; font-weight: 400; color: var(--rth); line-height: 1.6; margin: 0 0 20px; }
.retail__voice ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--rtb); }
.retail__voice li { position: relative; padding: 8px 0 8px 22px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--rtt); }
.retail__voice li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 11px; color: var(--rtc); }
.retail__voice:nth-child(2) li::before { color: var(--rtc2); }
.retail__voice:nth-child(3) li::before { color: var(--rtc3); }

/* ---------- 11. Engagement model (flagship - a breadcrumb-style step
   trail with an aligned description grid, instead of circles+line or a
   vertical agenda) ---------- */
.retail__engage { background: #fff; }
.retail__trail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 56px; }
.retail__trail-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid var(--rtb);
  background: var(--rtbg);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rth);
}
.retail__trail-pill span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rtc); color: #fff; font-size: 11px; font-weight: 600; }
.retail__trail i.fa-chevron-right { color: var(--rtb); font-size: 12px; }
.retail__road-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 26px; }
.retail__road-grid p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--rtt); margin: 0; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.retail__tech { padding-bottom: 66px; background: var(--rtbg); }
.retail__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.retail__tech-tags li {
  padding: 13px 24px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--rtb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--rth);
  transition: all .3s ease;
}
.retail__tech-tags li:hover { border-color: var(--rtc); color: var(--rtc); transform: translateY(-3px); }
.retail__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--rtb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.retail__related span { font-size: 13.5px; font-weight: 500; color: var(--rtt); text-transform: uppercase; letter-spacing: 1.5px; }
.retail__related a { font-size: 14.5px; font-weight: 500; color: var(--rth); transition: color .25s ease; }
.retail__related a:hover { color: var(--rtc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .retail__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .retail__page .retail__title { font-size: 32px; }
  :where(.retail__page) section { padding: 100px 0; }
  .retail__hero { padding: 170px 0 100px; }
  .retail__hero-title { font-size: 38px; }
  .retail__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .retail__hero-figure { max-width: 480px; margin: 0 auto; }
  .retail__hero-chip--1 { left: -14px; }
  .retail__hero-chip--2 { right: -10px; }
  .retail__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .retail__cap-wrap { grid-template-columns: 1fr; }
  .retail__cap-tabs { border-right: none; border-bottom: 1px solid var(--rtb); display: flex; flex-wrap: wrap; gap: 8px; }
  .retail__cap-panels { padding: 38px; }
  .retail__process { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .retail__process::before { display: none; }
  .retail__voice-grid { grid-template-columns: repeat(2, 1fr); }
  .retail__road-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 991px) {
  .retail__ai-row { gap: 30px; }
  .retail__voice-grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .retail__page .retail__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .retail__page .retail__title { font-size: 26px; }
  .retail__page .retail__lead { font-size: 16.5px; }
  .retail__scope p { font-size: 16.5px; }
  :where(.retail__page) section { padding: 76px 0; }
  .retail__hero { padding: 140px 0 76px; }
  .retail__hero-title { font-size: 29px; }
  .retail__hero-lead { font-size: 16.5px; }
  .retail__hero-chip { display: none; }
  .retail__loop-card { flex-basis: 260px; }
  .retail__ed-item { grid-template-columns: 1fr; gap: 8px; }
  .retail__process { grid-template-columns: 1fr 1fr; }
  .retail__road-grid { grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 575px) {
  .retail__process { grid-template-columns: 1fr; }
  .retail__road-grid { grid-template-columns: 1fr; }
  .retail__trail-pill span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .retail__page * { transition-duration: .01ms !important; }
  .retail__hero-glow,
  .retail__hero-chip,
  .retail__marquee-track { animation: none; }
}

/* ============================================================
   EDUCATION & EDTECH INDUSTRY PAGE (education-edtech.html)
   Scoped entirely to .edu__page. Fourth sibling in the Industries
   family - same brand blue/purple, framed-card hero grammar (image
   right, like Healthcare). Flagship section is a CSS-only segmented
   role switch (Students / Educators / Institutions) driven by radio
   inputs - no JS. Other sections use a plain checklist card, a 2x2
   principle grid, a single-column AI list, a fanned overlapping card
   deck for the data/infrastructure section, and a square-badge stepper
   for the engagement model - deliberately different mechanics from the
   .hc__page / .bank__page / .retail__page siblings. Nothing here leaks
   to other pages.
   ============================================================ */
.edu__page {
  --edc: #005fcc;
  --edc2: #8079f8;
  --edc3: #4da3ff;
  --edh: #1c1e2b;
  --edt: #6b7089;
  --edb: #e9eaf5;
  --edbg: #f6f7fc;
  --eddark: #07152F;
  --edmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.edu__page .edu__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--edc);
  margin-bottom: 18px;
}
.edu__page .edu__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--edh); margin: 0 0 20px; }
.edu__page .edu__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--edh); margin: 0 0 18px; }
.edu__page .edu__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--edt); margin: 0 0 16px; }
.edu__page .edu__text:last-child { margin-bottom: 0; }
.edu__page .edu__text a { color: var(--edc); text-decoration: underline; text-underline-offset: 3px; }
.edu__page .edu__text a:hover { color: var(--edc2); }
.edu__page .edu__head { max-width: 760px; }
.edu__page .edu__head--center { margin: 0 auto 0; text-align: center; }
:where(.edu__page) section { padding: 130px 0; }
.edu__page .edu__btn,
.edu__page .edu__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.edu__page .edu__btn { color: #fff; background: var(--edc); border: 2px solid var(--edc); }
.edu__page .edu__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.edu__page .edu__btn-outline { color: var(--edh); border: 2px solid var(--edb); background: transparent; }
.edu__page .edu__btn-outline:hover { border-color: var(--edc); color: var(--edc); }
.edu__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.edu__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--edmuted);
}
.edu__crumb a { color: var(--edmuted); transition: color .25s ease; }
.edu__crumb a:hover { color: #fff; }
.edu__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.edu__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right - same grammar as
   .hc__hero, image is a placeholder to be replaced) ---------- */
.edu__hero {
  position: relative;
  overflow: hidden;
  background: var(--eddark);
  padding: 200px 0 120px;
}
.edu__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.edu__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.edu__hero > .container { position: relative; z-index: 2; }
.edu__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.edu__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--edc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.edu__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.edu__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--edc3), var(--edc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.edu__hero-title em div div { background: linear-gradient(90deg, var(--edc3), var(--edc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.edu__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.edu__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--edmuted); margin: 0 0 16px; }
.edu__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.edu__hero .edu__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.edu__hero .edu__btn-outline:hover { background: #fff; border-color: #fff; color: var(--eddark); }
.edu__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.edu__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.edu__hero-figure { position: relative; }
.edu__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: eduKfSpin 26s linear infinite;
}
.edu__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.edu__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes eduKfSpin { to { transform: rotate(360deg); } }
.edu__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: eduKfChip 6s ease-in-out infinite;
}
.edu__hero-chip i { color: var(--edc3); font-size: 18px; }
.edu__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.edu__hero-chip span { font-size: 13px; font-weight: 300; color: var(--edmuted); }
.edu__hero-chip--1 { left: -34px; top: 12%; }
.edu__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes eduKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.edu__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.edu__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.edu__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: eduKfMarquee 40s linear infinite; }
.edu__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.edu__marquee-track i { color: var(--edc3); font-size: 8px; }
@keyframes eduKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.edu__intro { background: #fff; }
.edu__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.edu__quick { display: flex; flex-direction: column; gap: 16px; }
.edu__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--edb); border-radius: 14px; background: var(--edbg); }
.edu__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--edc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.edu__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--edh); margin: 0 0 4px; }
.edu__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--edt); margin: 0; line-height: 1.6; }

/* ---------- 04. Segmented role switch (flagship - CSS-only, no JS) ---------- */
.edu__roles { background: var(--edbg); }
.edu__switch { margin-top: 54px; max-width: 900px; margin-left: auto; margin-right: auto; }
.edu__switch-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.edu__switch-track {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--edb);
  max-width: 620px;
  margin: 0 auto 40px;
}
.edu__switch-label {
  flex: 1;
  text-align: center;
  padding: 14px 18px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  color: var(--edt);
  cursor: pointer;
  transition: all .25s ease;
}
.edu__switch-input:focus-visible ~ .edu__switch-track { outline: 2px solid var(--edc); outline-offset: 3px; }
.edu__switch-panel { display: none; background: #fff; border: 1px solid var(--edb); border-radius: 20px; padding: 46px 50px; }
.edu__switch-panel h3 { font-size: 24px; font-weight: 600; color: var(--edh); margin: 0 0 6px; }
.edu__switch-panel-tag { display: block; font-size: 14px; font-weight: 500; color: var(--edc); margin-bottom: 20px; }
.edu__switch-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.edu__switch-panel li { position: relative; padding: 0 0 0 26px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--edt); }
.edu__switch-panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; position: absolute; left: 0; top: 4px; color: var(--edc); }
#edu-r-student:checked ~ .edu__switch-track label[for="edu-r-student"],
#edu-r-educator:checked ~ .edu__switch-track label[for="edu-r-educator"],
#edu-r-institution:checked ~ .edu__switch-track label[for="edu-r-institution"] {
  background: var(--edc);
  color: #fff;
}
#edu-r-student:checked ~ .edu__switch-panels #edu-panel-student,
#edu-r-educator:checked ~ .edu__switch-panels #edu-panel-educator,
#edu-r-institution:checked ~ .edu__switch-panels #edu-panel-institution {
  display: block;
}

/* ---------- 05. Capabilities (card grid) ---------- */
.edu__cap { background: #fff; }
.edu__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.edu__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--edb);
  border-radius: 18px;
  background: var(--edbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.edu__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--edc), var(--edc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.edu__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--edc2), #a79af5); }
.edu__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--edc3), #8fc4ff); }
.edu__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.edu__cap-card:hover::before { transform: scaleX(1); }
.edu__cap-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(0, 95, 204, .1); color: var(--edc); font-size: 20px;
  margin-bottom: 22px;
}
.edu__cap-card:nth-child(3n+2) .edu__cap-ico { background: rgba(128, 121, 248, .12); color: var(--edc2); }
.edu__cap-card:nth-child(3n) .edu__cap-ico { background: rgba(77, 163, 255, .14); color: var(--edc3); }
.edu__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--edh); margin: 0 0 12px; }
.edu__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--edt); margin: 0; }

/* ---------- 06. Constraints (plain checklist card) ---------- */
.edu__constraints { background: var(--edbg); }
.edu__checklist { max-width: 980px; margin: 54px auto 0; padding: 46px 50px; border: 1px solid var(--edb); border-radius: 20px; background: #fff; }
.edu__checklist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.edu__checklist li { position: relative; padding: 0 0 0 30px; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--edh); }
.edu__checklist li::before { content: "\f0eb"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; position: absolute; left: 0; top: 1px; color: var(--edc); }
/* ---------- Scope & responsibility statement (centerpiece band before
   the final CTA) ---------- */
.edu__scope { padding: 64px 0; background: var(--edbg); border-top: 1px solid var(--edb); }
.edu__scope-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.edu__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--edb);
  color: var(--edc);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.edu__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--edh);
  margin: 0;
}

/* ---------- 07. How We Think (2x2 principle grid) ---------- */
.edu__principles { background: #fff; }
.edu__principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 58px; max-width: 980px; margin-left: auto; margin-right: auto; }
.edu__principle {
  display: flex;
  gap: 20px;
  padding: 30px;
  border: 1px solid var(--edb);
  border-radius: 16px;
  transition: all .3s ease;
}
.edu__principle:hover { background: var(--edbg); border-color: rgba(0, 95, 204, .25); }
.edu__principle i { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: rgba(0, 95, 204, .1); color: var(--edc); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.edu__principle h3 { font-size: 17.5px; font-weight: 600; color: var(--edh); margin: 0 0 8px; }
.edu__principle p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--edt); margin: 0; }

/* ---------- 08. AI in education (dark, single-column list) ---------- */
.edu__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--eddark) 0%, #0b1c3d 100%); }
.edu__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.edu__ai > .container { position: relative; z-index: 1; }
.edu__ai .edu__eyebrow { color: var(--edc3); }
.edu__ai .edu__title { color: #fff; }
.edu__ai .edu__lead { color: #dbe6f4; }
.edu__ai .edu__text { color: var(--edmuted); }
.edu__ai-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; margin-top: 8px; }
.edu__ai-list { list-style: none; margin: 0; padding: 0; }
.edu__ai-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 15px;
  font-weight: 400;
  color: #dcefe8;
}
.edu__ai-list li:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }
.edu__ai-list li i { color: var(--edc3); font-size: 16px; width: 26px; text-align: center; }
.edu__note {
  margin-top: 30px;
  padding: 22px 26px;
  border-left: 3px solid var(--edc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.edu__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--edmuted); margin: 0; }
.edu__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (fanned overlapping card deck) ---------- */
.edu__deck-section { background: #fff; }
.edu__deck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.edu__deck { display: flex; padding: 30px 0 30px 30px; }
.edu__deck-card {
  flex: 0 0 190px;
  margin-left: -70px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  border: 1px solid var(--edb);
  background: var(--edbg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.edu__deck-card:nth-child(1) { transform: rotate(-6deg); z-index: 1; }
.edu__deck-card:nth-child(2) { transform: rotate(-2deg); z-index: 2; background: #fff; }
.edu__deck-card:nth-child(3) { transform: rotate(2deg); z-index: 3; }
.edu__deck-card:nth-child(4) { transform: rotate(6deg); z-index: 4; background: #fff; }
.edu__deck-card:hover { transform: translateY(-16px) rotate(0deg); z-index: 5; box-shadow: 0 26px 50px rgba(28, 30, 43, .16); }
.edu__deck-card i { font-size: 20px; color: var(--edc); margin-bottom: 14px; }
.edu__deck-card:nth-child(2) i { color: var(--edc2); }
.edu__deck-card:nth-child(4) i { color: var(--edc3); }
.edu__deck-card h4 { font-size: 15px; font-weight: 600; color: var(--edh); margin: 0; line-height: 1.35; }

/* ---------- 10. Accessibility & equity (icon row) ---------- */
.edu__access { background: var(--edbg); }
.edu__access-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 56px; }
.edu__access-item { text-align: center; }
.edu__access-ico { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 1px solid var(--edb); color: var(--edc); font-size: 22px; margin-bottom: 18px; }
.edu__access-item h3 { font-size: 16px; font-weight: 600; color: var(--edh); margin: 0 0 8px; }
.edu__access-item p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--edt); margin: 0; }

/* ---------- 11. Engagement model (square-badge stepper) ---------- */
.edu__engage { background: #fff; }
.edu__stepper { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 58px; flex-wrap: wrap; }
.edu__step { flex: 1; min-width: 150px; text-align: center; position: relative; }
.edu__step-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--eddark); color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.edu__step h3 { font-size: 15.5px; font-weight: 600; color: var(--edh); margin: 0 0 6px; }
.edu__step p { font-size: 13px; font-weight: 300; color: var(--edt); margin: 0; line-height: 1.55; }
.edu__step-arrow { align-self: center; color: var(--edb); font-size: 16px; margin-top: 12px; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.edu__tech { padding-bottom: 66px; background: var(--edbg); }
.edu__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.edu__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--edb);
  font-size: 14.5px; font-weight: 500; color: var(--edh); transition: all .3s ease;
}
.edu__tech-tags li:hover { border-color: var(--edc); color: var(--edc); transform: translateY(-3px); }
.edu__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--edb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.edu__related span { font-size: 13.5px; font-weight: 500; color: var(--edt); text-transform: uppercase; letter-spacing: 1.5px; }
.edu__related a { font-size: 14.5px; font-weight: 500; color: var(--edh); transition: color .25s ease; }
.edu__related a:hover { color: var(--edc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .edu__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .edu__page .edu__title { font-size: 32px; }
  :where(.edu__page) section { padding: 100px 0; }
  .edu__hero { padding: 170px 0 100px; }
  .edu__hero-title { font-size: 38px; }
  .edu__hero-grid,
  .edu__intro-grid,
  .edu__ai-grid,
  .edu__deck-grid { grid-template-columns: 1fr; gap: 48px; }
  .edu__hero-figure { max-width: 480px; margin: 0 auto; }
  .edu__hero-chip--1 { left: -14px; }
  .edu__hero-chip--2 { right: -10px; }
  .edu__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .edu__access-row { grid-template-columns: repeat(2, 1fr); }
  .edu__deck { justify-content: center; }
}
@media only screen and (max-width: 991px) {
  .edu__switch-panel ul { grid-template-columns: 1fr; }
  .edu__checklist ul { grid-template-columns: 1fr; }
  .edu__principle-grid { grid-template-columns: 1fr; }
  .edu__step-arrow { display: none; }
}
@media only screen and (max-width: 767px) {
  .edu__page .edu__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .edu__page .edu__title { font-size: 26px; }
  .edu__page .edu__lead { font-size: 16.5px; }
  .edu__scope p { font-size: 16.5px; }
  :where(.edu__page) section { padding: 76px 0; }
  .edu__hero { padding: 140px 0 76px; }
  .edu__hero-title { font-size: 29px; }
  .edu__hero-lead { font-size: 16.5px; }
  .edu__hero-chip { display: none; }
  .edu__cap-grid { grid-template-columns: 1fr; }
  .edu__access-row { grid-template-columns: 1fr; }
  .edu__switch-track { flex-wrap: wrap; border-radius: 20px; }
  .edu__switch-label { flex: 0 0 100%; }
  .edu__switch-panel { padding: 34px 26px; }
  .edu__deck { flex-direction: column; padding-left: 0; align-items: center; }
  .edu__deck-card { margin-left: 0; margin-top: -50px; transform: none !important; }
  .edu__deck-card:first-child { margin-top: 0; }
  .edu__stepper { flex-direction: column; align-items: stretch; }
  .edu__step-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .edu__page * { transition-duration: .01ms !important; }
  .edu__hero-glow,
  .edu__hero-chip,
  .edu__marquee-track { animation: none; }
}

/* ============================================================
   REAL ESTATE INDUSTRY PAGE (real-estate.html)
   Scoped entirely to .re__page. Fifth sibling in the Industries family.
   Hero uses a diagonal clip-path media panel instead of a rounded
   framed card or a full-bleed band. Flagship section is a draggable
   before/after comparison slider (range input driving a CSS custom
   property + clip-path, tiny inline script) contrasting the
   traditional and digital-first property experience with text panels,
   not photos. Other sections use a variable-size tag cloud, a
   pull-quote manifesto list, transformation rows for AI, a plain equal
   card row for infrastructure, minimal one-line profile cards for
   perspectives, and a single typographic "process sentence" for the
   engagement model - deliberately different mechanics from every
   sibling page. Nothing here leaks to other pages.
   ============================================================ */
.re__page {
  --rec: #005fcc;
  --rec2: #8079f8;
  --rec3: #4da3ff;
  --reh: #1c1e2b;
  --ret: #6b7089;
  --reb: #e9eaf5;
  --rebg: #f6f7fc;
  --redark: #07152F;
  --remuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.re__page .re__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--rec);
  margin-bottom: 18px;
}
.re__page .re__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--reh); margin: 0 0 20px; }
.re__page .re__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--reh); margin: 0 0 18px; }
.re__page .re__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ret); margin: 0 0 16px; }
.re__page .re__text:last-child { margin-bottom: 0; }
.re__page .re__text a { color: var(--rec); text-decoration: underline; text-underline-offset: 3px; }
.re__page .re__text a:hover { color: var(--rec2); }
.re__page .re__head { max-width: 760px; }
.re__page .re__head--center { margin: 0 auto 0; text-align: center; }
:where(.re__page) section { padding: 130px 0; }
.re__page .re__btn,
.re__page .re__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.re__page .re__btn { color: #fff; background: var(--rec); border: 2px solid var(--rec); }
.re__page .re__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.re__page .re__btn-outline { color: var(--reh); border: 2px solid var(--reb); background: transparent; }
.re__page .re__btn-outline:hover { border-color: var(--rec); color: var(--rec); }
.re__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.re__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--remuted);
}
.re__crumb a { color: var(--remuted); transition: color .25s ease; }
.re__crumb a:hover { color: #fff; }
.re__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.re__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right - same grammar as the
   other Industries pages: glow ring, framed visual, floating chips) ---------- */
.re__hero {
  position: relative;
  overflow: hidden;
  background: var(--redark);
  padding: 200px 0 120px;
}
.re__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.re__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.re__hero > .container { position: relative; z-index: 2; }
.re__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.re__hero-copy { max-width: 600px; }
.re__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--rec3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.re__hero-title { font-size: 48px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 22px; }
.re__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--rec3), var(--rec2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.re__hero-title em div div { background: linear-gradient(90deg, var(--rec3), var(--rec2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.re__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.re__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--remuted); margin: 0 0 16px; }
.re__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.re__hero .re__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.re__hero .re__btn-outline:hover { background: #fff; border-color: #fff; color: var(--redark); }
.re__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.re__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.re__hero-figure { position: relative; }
.re__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: reKfSpin 26s linear infinite;
}
.re__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.re__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes reKfSpin { to { transform: rotate(360deg); } }
.re__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: reKfChip 6s ease-in-out infinite;
}
.re__hero-chip i { color: var(--rec3); font-size: 18px; }
.re__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.re__hero-chip span { font-size: 13px; font-weight: 300; color: var(--remuted); }
.re__hero-chip--1 { left: -34px; top: 12%; }
.re__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes reKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.re__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.re__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.re__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: reKfMarquee 40s linear infinite; }
.re__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.re__marquee-track i { color: var(--rec3); font-size: 8px; }
@keyframes reKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.re__intro { background: #fff; }
.re__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.re__quick { display: flex; flex-direction: column; gap: 16px; }
.re__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--reb); border-radius: 14px; background: var(--rebg); }
.re__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--rec); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.re__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--reh); margin: 0 0 4px; }
.re__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--ret); margin: 0; line-height: 1.6; }

/* ---------- 04. Draggable comparison slider (flagship) ---------- */
.re__compare { background: var(--rebg); }
.re__compare-media {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 8;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 56px;
  box-shadow: 0 30px 60px rgba(28, 30, 43, .15);
}
.re__compare-panel { position: absolute; inset: 0; padding: 46px 56px; display: flex; flex-direction: column; justify-content: center; }
.re__compare-panel--before { background: linear-gradient(160deg, #2a2f3d, #171a22); align-items: flex-end; }
.re__compare-panel--before .re__compare-tag,
.re__compare-panel--before h3 { text-align: right; }
.re__compare-panel--after {
  background: linear-gradient(160deg, var(--rec), var(--rec2));
  -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0);
          clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.re__compare-tag { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .65); margin-bottom: 16px; }
.re__compare-panel h3 { font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 18px; }
.re__compare-panel ul { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.re__compare-panel li { position: relative; padding: 8px 0 8px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.re__compare-panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 12px; color: rgba(255, 255, 255, .7); }
.re__compare-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.re__compare-divider span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--rec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.re__compare-range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.re__compare-caption { text-align: center; margin-top: 20px; font-size: 13.5px; font-weight: 400; color: var(--ret); }

/* ---------- 05. Capabilities (card grid) ---------- */
.re__cap { background: #fff; }
.re__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.re__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--reb);
  border-radius: 18px;
  background: var(--rebg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.re__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--rec), var(--rec3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.re__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--rec2), #a79af5); }
.re__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--rec3), #8fc4ff); }
.re__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.re__cap-card:hover::before { transform: scaleX(1); }
.re__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--rec); font-size: 20px; margin-bottom: 22px; }
.re__cap-card:nth-child(3n+2) .re__cap-ico { background: rgba(128, 121, 248, .12); color: var(--rec2); }
.re__cap-card:nth-child(3n) .re__cap-ico { background: rgba(77, 163, 255, .14); color: var(--rec3); }
.re__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--reh); margin: 0 0 12px; }
.re__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ret); margin: 0; }

/* ---------- 06. Constraints (variable-size tag cloud) ---------- */
.re__constraints { background: var(--rebg); }
.re__cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 54px; max-width: 980px; margin-left: auto; margin-right: auto; }
.re__cloud span {
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--reb);
  background: #fff;
  color: var(--reh);
  font-weight: 500;
  transition: all .3s ease;
}
.re__cloud span:hover { border-color: var(--rec); color: var(--rec); transform: translateY(-3px); }
.re__cloud span:nth-child(4n+1) { font-size: 18px; }
.re__cloud span:nth-child(4n+2) { font-size: 14.5px; }
.re__cloud span:nth-child(4n+3) { font-size: 21px; }
.re__cloud span:nth-child(4n) { font-size: 15.5px; }
.re__page .re__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (pull-quote manifesto list) ---------- */
.re__principles { background: #fff; }
.re__manifesto-list { max-width: 780px; margin: 56px auto 0; }
.re__manifesto {
  border-left: 3px solid var(--rec);
  padding: 4px 0 4px 26px;
  margin-bottom: 34px;
}
.re__manifesto:nth-child(3n+2) { border-left-color: var(--rec2); }
.re__manifesto:nth-child(3n) { border-left-color: var(--rec3); }
.re__manifesto:last-child { margin-bottom: 0; }
.re__manifesto h3 { font-size: 19px; font-weight: 600; color: var(--reh); margin: 0 0 8px; }
.re__manifesto p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ret); margin: 0; }

/* ---------- 08. AI in real estate (dark, transformation rows) ---------- */
.re__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--redark) 0%, #0b1c3d 100%); }
.re__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.re__ai > .container { position: relative; z-index: 1; }
.re__ai .re__eyebrow { color: var(--rec3); }
.re__ai .re__title { color: #fff; }
.re__ai .re__lead { color: #dbe6f4; }
.re__ai .re__text { color: var(--remuted); }
.re__ai-rows { max-width: 860px; margin: 54px auto 0; display: flex; flex-direction: column; gap: 14px; }
.re__ai-row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.re__ai-row-old { font-size: 14.5px; font-weight: 300; color: var(--remuted); text-align: right; }
.re__ai-row-arrow { text-align: center; color: var(--rec3); font-size: 16px; }
.re__ai-row-new { font-size: 14.5px; font-weight: 500; color: #fff; }
.re__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--rec3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.re__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--remuted); margin: 0; }
.re__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (plain equal row) ---------- */
.re__foundation { background: #fff; }
.re__infra-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 58px; }
.re__infra-item { padding: 30px 24px; border: 1px solid var(--reb); border-radius: 16px; text-align: center; transition: all .3s ease; }
.re__infra-item:hover { background: var(--rebg); border-color: rgba(0, 95, 204, .25); }
.re__infra-item i { font-size: 22px; color: var(--rec); margin-bottom: 16px; display: block; }
.re__infra-item:nth-child(3n+2) i { color: var(--rec2); }
.re__infra-item:nth-child(3n) i { color: var(--rec3); }
.re__infra-item h3 { font-size: 15px; font-weight: 600; color: var(--reh); margin: 0 0 8px; }
.re__infra-item p { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--ret); margin: 0; }

/* ---------- 10. Perspectives (minimal one-line profile cards) ---------- */
.re__persp { background: var(--rebg); }
.re__profile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.re__profile { text-align: center; padding: 40px 30px; border: 1px solid var(--reb); border-radius: 18px; background: #fff; }
.re__profile-ico { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: rgba(0, 95, 204, .1); color: var(--rec); font-size: 24px; margin-bottom: 20px; }
.re__profile:nth-child(2) .re__profile-ico { background: rgba(128, 121, 248, .12); color: var(--rec2); }
.re__profile:nth-child(3) .re__profile-ico { background: rgba(77, 163, 255, .14); color: var(--rec3); }
.re__profile h3 { font-size: 18px; font-weight: 600; color: var(--reh); margin: 0 0 10px; }
.re__profile p { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--ret); margin: 0; }

/* ---------- 11. Engagement model (typographic process sentence) ---------- */
.re__engage { background: #fff; text-align: center; }
.re__sentence { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 12px; margin-top: 50px; font-size: 24px; font-weight: 300; color: var(--ret); }
.re__sentence strong { font-weight: 600; color: var(--reh); }
.re__sentence i { color: var(--reb); font-size: 16px; }
.re__page .re__sentence-note { max-width: 640px; margin: 30px auto 0; text-align: center; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.re__tech { padding-bottom: 66px; background: var(--rebg); }

/* ---------- Scope & responsibility statement (centerpiece band before
   the final CTA) ---------- */
.re__scope { padding: 64px 0; background: var(--rebg); border-top: 1px solid var(--reb); }
.re__scope-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.re__scope-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--reb);
  color: var(--rec);
  font-size: 22px;
  margin-bottom: 28px;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
}
.re__scope p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--reh);
  margin: 0;
}
.re__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.re__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--reb);
  font-size: 14.5px; font-weight: 500; color: var(--reh); transition: all .3s ease;
}
.re__tech-tags li:hover { border-color: var(--rec); color: var(--rec); transform: translateY(-3px); }
.re__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--reb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.re__related span { font-size: 13.5px; font-weight: 500; color: var(--ret); text-transform: uppercase; letter-spacing: 1.5px; }
.re__related a { font-size: 14.5px; font-weight: 500; color: var(--reh); transition: color .25s ease; }
.re__related a:hover { color: var(--rec); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .re__hero-title { font-size: 42px; }
}
@media only screen and (max-width: 1199px) {
  .re__page .re__title { font-size: 32px; }
  :where(.re__page) section { padding: 100px 0; }
  .re__hero { padding: 170px 0 100px; }
  .re__hero-title { font-size: 36px; }
  .re__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .re__hero-figure { max-width: 480px; margin: 0 auto; }
  .re__hero-chip--1 { left: -14px; }
  .re__hero-chip--2 { right: -10px; }
  .re__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .re__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .re__infra-row { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .re__profile-row { grid-template-columns: 1fr; }
  .re__sentence { font-size: 20px; }
}
@media only screen and (max-width: 991px) {
  .re__compare-panel { padding: 34px 30px; }
  .re__compare-panel h3 { font-size: 20px; }
}
@media only screen and (max-width: 767px) {
  .re__page .re__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .re__page .re__title { font-size: 26px; }
  .re__page .re__lead { font-size: 16.5px; }
  .re__scope p { font-size: 16.5px; }
  :where(.re__page) section { padding: 76px 0; }
  .re__hero { padding: 140px 0 76px; }
  .re__hero-title { font-size: 28px; }
  .re__hero-lead { font-size: 16.5px; }
  .re__hero-chip { display: none; }
  .re__cap-grid { grid-template-columns: 1fr; }
  .re__infra-row { grid-template-columns: 1fr 1fr; }
  .re__compare-media { aspect-ratio: 4 / 5; }
  .re__compare-panel ul { max-width: 210px; }
  .re__ai-row { grid-template-columns: 1fr; text-align: left; }
  .re__ai-row-old { text-align: left; }
  .re__ai-row-arrow { transform: rotate(90deg); }
  .re__sentence { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .re__page * { transition-duration: .01ms !important; }
  .re__hero-glow,
  .re__hero-chip,
  .re__marquee-track { animation: none; }
}

/* ============================================================
   TRAVEL & HOSPITALITY INDUSTRY PAGE (travel-hospitality.html)
   Scoped entirely to .trav__page. Sixth sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is a row of boarding-pass styled "ticket" cards (perforated stub
   with punched-circle notches) representing the traveler's journey.
   Other sections use plain two-column icon rows for constraints,
   minimal icon+heading pairs for principles, an illustrative chat
   mockup for AI, a plain 2x2 grid for infrastructure, stacked
   full-width rows for perspectives, and a colored-top-border strip for
   the engagement model - deliberately different mechanics from every
   sibling page. Nothing here leaks to other pages.
   ============================================================ */
.trav__page {
  --trc: #005fcc;
  --trc2: #8079f8;
  --trc3: #4da3ff;
  --trh: #1c1e2b;
  --trt: #6b7089;
  --trb: #e9eaf5;
  --trbg: #f6f7fc;
  --trdark: #07152F;
  --trmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.trav__page .trav__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--trc);
  margin-bottom: 18px;
}
.trav__page .trav__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--trh); margin: 0 0 20px; }
.trav__page .trav__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--trh); margin: 0 0 18px; }
.trav__page .trav__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--trt); margin: 0 0 16px; }
.trav__page .trav__text:last-child { margin-bottom: 0; }
.trav__page .trav__text a { color: var(--trc); text-decoration: underline; text-underline-offset: 3px; }
.trav__page .trav__text a:hover { color: var(--trc2); }
.trav__page .trav__head { max-width: 760px; }
.trav__page .trav__head--center { margin: 0 auto 0; text-align: center; }
:where(.trav__page) section { padding: 130px 0; }
.trav__page .trav__btn,
.trav__page .trav__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.trav__page .trav__btn { color: #fff; background: var(--trc); border: 2px solid var(--trc); }
.trav__page .trav__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.trav__page .trav__btn-outline { color: var(--trh); border: 2px solid var(--trb); background: transparent; }
.trav__page .trav__btn-outline:hover { border-color: var(--trc); color: var(--trc); }
.trav__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.trav__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--trmuted);
}
.trav__crumb a { color: var(--trmuted); transition: color .25s ease; }
.trav__crumb a:hover { color: #fff; }
.trav__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.trav__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.trav__hero {
  position: relative;
  overflow: hidden;
  background: var(--trdark);
  padding: 200px 0 120px;
}
.trav__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.trav__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.trav__hero > .container { position: relative; z-index: 2; }
.trav__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.trav__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--trc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.trav__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.trav__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--trc3), var(--trc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.trav__hero-title em div div { background: linear-gradient(90deg, var(--trc3), var(--trc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.trav__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.trav__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--trmuted); margin: 0 0 16px; }
.trav__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.trav__hero .trav__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.trav__hero .trav__btn-outline:hover { background: #fff; border-color: #fff; color: var(--trdark); }
.trav__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trav__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.trav__hero-figure { position: relative; }
.trav__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: travKfSpin 26s linear infinite;
}
.trav__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.trav__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes travKfSpin { to { transform: rotate(360deg); } }
.trav__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: travKfChip 6s ease-in-out infinite;
}
.trav__hero-chip i { color: var(--trc3); font-size: 18px; }
.trav__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.trav__hero-chip span { font-size: 13px; font-weight: 300; color: var(--trmuted); }
.trav__hero-chip--1 { left: -34px; top: 12%; }
.trav__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes travKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.trav__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.trav__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.trav__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: travKfMarquee 40s linear infinite; }
.trav__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.trav__marquee-track i { color: var(--trc3); font-size: 8px; }
@keyframes travKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.trav__intro { background: #fff; }
.trav__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.trav__quick { display: flex; flex-direction: column; gap: 16px; }
.trav__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--trb); border-radius: 14px; background: var(--trbg); }
.trav__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--trc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.trav__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--trh); margin: 0 0 4px; }
.trav__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--trt); margin: 0; line-height: 1.6; }

/* ---------- 04. Itinerary ticket rail (flagship) ---------- */
.trav__journey { background: var(--trbg); }
.trav__tickets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 58px; }
.trav__ticket {
  position: relative;
  display: flex;
  background: #fff;
  border: 1px solid var(--trb);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .07);
  transition: transform .3s ease, box-shadow .3s ease;
}
.trav__ticket:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(28, 30, 43, .12); }
.trav__ticket-main { flex: 1; padding: 26px 20px; min-width: 0; }
.trav__ticket-num { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: rgba(0, 95, 204, .4); margin-bottom: 10px; }
.trav__ticket-main h3 { font-size: 15.5px; font-weight: 600; color: var(--trh); margin: 0 0 8px; line-height: 1.3; }
.trav__ticket-main p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--trt); margin: 0; }
.trav__ticket-stub {
  position: relative;
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--trbg);
  border-left: 2px dashed var(--trb);
}
.trav__ticket-stub::before,
.trav__ticket-stub::after {
  content: "";
  position: absolute;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--trbg);
}
.trav__ticket-stub::before { top: -9px; }
.trav__ticket-stub::after { bottom: -9px; }
.trav__ticket-stub i { color: var(--trc); font-size: 17px; }
.trav__ticket:nth-child(3n+2) .trav__ticket-stub i { color: var(--trc2); }
.trav__ticket:nth-child(3n) .trav__ticket-stub i { color: var(--trc3); }

/* ---------- 05. Capabilities (card grid) ---------- */
.trav__cap { background: #fff; }
.trav__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.trav__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--trb);
  border-radius: 18px;
  background: var(--trbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.trav__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--trc), var(--trc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.trav__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--trc2), #a79af5); }
.trav__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--trc3), #8fc4ff); }
.trav__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.trav__cap-card:hover::before { transform: scaleX(1); }
.trav__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--trc); font-size: 20px; margin-bottom: 22px; }
.trav__cap-card:nth-child(3n+2) .trav__cap-ico { background: rgba(128, 121, 248, .12); color: var(--trc2); }
.trav__cap-card:nth-child(3n) .trav__cap-ico { background: rgba(77, 163, 255, .14); color: var(--trc3); }
.trav__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--trh); margin: 0 0 12px; }
.trav__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--trt); margin: 0; }

/* ---------- 06. Constraints (plain two-column icon rows) ---------- */
.trav__constraints { background: var(--trbg); }
.trav__row-list { max-width: 980px; margin: 54px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; }
.trav__row-item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--trb); }
.trav__row-item i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid var(--trb); color: var(--trc); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.trav__row-item span { font-size: 14.5px; font-weight: 500; color: var(--trh); }
.trav__page .trav__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (minimal icon + heading pairs) ---------- */
.trav__principles { background: #fff; }
.trav__minimal-list { max-width: 760px; margin: 56px auto 0; }
.trav__minimal-item { display: flex; gap: 22px; align-items: flex-start; padding: 26px 0; border-bottom: 1px dotted var(--trb); }
.trav__minimal-item:last-child { border-bottom: none; }
.trav__minimal-item i { flex-shrink: 0; font-size: 20px; color: var(--trc); width: 32px; text-align: center; margin-top: 3px; }
.trav__minimal-item h3 { font-size: 18px; font-weight: 600; color: var(--trh); margin: 0 0 6px; }
.trav__minimal-item p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--trt); margin: 0; }

/* ---------- 08. AI in travel (illustrative chat mockup) ---------- */
.trav__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--trdark) 0%, #0b1c3d 100%); }
.trav__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.trav__ai > .container { position: relative; z-index: 1; }
.trav__ai .trav__eyebrow { color: var(--trc3); }
.trav__ai .trav__title { color: #fff; }
.trav__ai .trav__lead { color: #dbe6f4; }
.trav__ai .trav__text { color: var(--trmuted); }
.trav__ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-top: 8px; }
.trav__chat-label { font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--trmuted); margin-bottom: 14px; }
.trav__chat { display: flex; flex-direction: column; gap: 12px; }
.trav__chat-bubble { max-width: 82%; padding: 14px 18px; border-radius: 16px; font-size: 14px; font-weight: 400; line-height: 1.55; }
.trav__chat-bubble--user { align-self: flex-end; background: var(--trc); color: #fff; border-bottom-right-radius: 4px; }
.trav__chat-bubble--ai { align-self: flex-start; background: rgba(255, 255, 255, .08); color: #e4ecf8; border: 1px solid rgba(255, 255, 255, .12); border-bottom-left-radius: 4px; }
.trav__note {
  margin-top: 30px;
  padding: 22px 26px;
  border-left: 3px solid var(--trc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.trav__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--trmuted); margin: 0; }
.trav__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (plain 2x2 grid) ---------- */
.trav__foundation { background: #fff; }
.trav__infra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 58px; max-width: 860px; margin-left: auto; margin-right: auto; }
.trav__infra-card { display: flex; gap: 18px; padding: 28px; border: 1px solid var(--trb); border-radius: 16px; transition: all .3s ease; }
.trav__infra-card:hover { background: var(--trbg); border-color: rgba(0, 95, 204, .25); }
.trav__infra-card i { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: rgba(0, 95, 204, .1); color: var(--trc); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.trav__infra-card:nth-child(2) i { background: rgba(128, 121, 248, .12); color: var(--trc2); }
.trav__infra-card:nth-child(4) i { background: rgba(77, 163, 255, .14); color: var(--trc3); }
.trav__infra-card h3 { font-size: 16.5px; font-weight: 600; color: var(--trh); margin: 0 0 6px; }
.trav__infra-card p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--trt); margin: 0; }

/* ---------- 10. Perspectives (stacked full-width rows) ---------- */
.trav__persp { background: var(--trbg); }
.trav__stack-rows { max-width: 900px; margin: 54px auto 0; display: flex; flex-direction: column; gap: 14px; }
.trav__stack-row { display: flex; align-items: center; gap: 26px; padding: 28px 34px; border-radius: 16px; background: #fff; border: 1px solid var(--trb); }
.trav__stack-row-ico { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 95, 204, .1); color: var(--trc); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; }
.trav__stack-row:nth-child(2) .trav__stack-row-ico { background: rgba(128, 121, 248, .12); color: var(--trc2); }
.trav__stack-row:nth-child(3) .trav__stack-row-ico { background: rgba(77, 163, 255, .14); color: var(--trc3); }
.trav__stack-row h3 { font-size: 17px; font-weight: 600; color: var(--trh); margin: 0 0 4px; }
.trav__stack-row p { font-size: 14px; font-weight: 300; color: var(--trt); margin: 0; line-height: 1.6; }

/* ---------- 11. Engagement model (colored-top-border strip) ---------- */
.trav__engage { background: #fff; }
.trav__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 58px; }
.trav__strip-item { padding: 22px 18px 0; border-top: 3px solid var(--trc); }
.trav__strip-item:nth-child(3n+2) { border-top-color: var(--trc2); }
.trav__strip-item:nth-child(3n) { border-top-color: var(--trc3); }
.trav__strip-item span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: var(--trt); margin-bottom: 8px; }
.trav__strip-item h3 { font-size: 16px; font-weight: 600; color: var(--trh); margin: 0 0 8px; }
.trav__strip-item p { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--trt); margin: 0; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.trav__tech { background: var(--trbg); }
.trav__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.trav__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--trb);
  font-size: 14.5px; font-weight: 500; color: var(--trh); transition: all .3s ease;
}
.trav__tech-tags li:hover { border-color: var(--trc); color: var(--trc); transform: translateY(-3px); }
.trav__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--trb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.trav__related span { font-size: 13.5px; font-weight: 500; color: var(--trt); text-transform: uppercase; letter-spacing: 1.5px; }
.trav__related a { font-size: 14.5px; font-weight: 500; color: var(--trh); transition: color .25s ease; }
.trav__related a:hover { color: var(--trc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .trav__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .trav__page .trav__title { font-size: 32px; }
  :where(.trav__page) section { padding: 100px 0; }
  .trav__hero { padding: 170px 0 100px; }
  .trav__hero-title { font-size: 38px; }
  .trav__hero-grid,
  .trav__intro-grid,
  .trav__ai-grid { grid-template-columns: 1fr; gap: 48px; }
  .trav__hero-figure { max-width: 480px; margin: 0 auto; }
  .trav__hero-chip--1 { left: -14px; }
  .trav__hero-chip--2 { right: -10px; }
  .trav__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .trav__tickets { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .trav__strip { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
}
@media only screen and (max-width: 991px) {
  .trav__row-list { grid-template-columns: 1fr; }
  .trav__infra-grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .trav__page .trav__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .trav__page .trav__title { font-size: 26px; }
  .trav__page .trav__lead { font-size: 16.5px; }
  :where(.trav__page) section { padding: 76px 0; }
  .trav__hero { padding: 140px 0 76px; }
  .trav__hero-title { font-size: 29px; }
  .trav__hero-lead { font-size: 16.5px; }
  .trav__hero-chip { display: none; }
  .trav__cap-grid { grid-template-columns: 1fr; }
  .trav__tickets { grid-template-columns: 1fr; }
  .trav__strip { grid-template-columns: 1fr 1fr; }
  .trav__chat-bubble { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .trav__page * { transition-duration: .01ms !important; }
  .trav__hero-glow,
  .trav__hero-chip,
  .trav__marquee-track { animation: none; }
}

/* ============================================================
   LOGISTICS & TRANSPORTATION INDUSTRY PAGE
   (logistics-transportation.html)
   Scoped entirely to .log__page. Seventh sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is an animated route tracker: a horizontal line with stop markers
   and a moving pulse dot representing a shipment in transit. Other
   sections use a plain numbered list for constraints, a zebra-striped
   list for principles, a dark 2x2 signal-card grid for AI, a text-only
   spec-sheet list for infrastructure, borderless plain columns for
   perspectives, and a literal segmented progress bar for the
   engagement model - deliberately different mechanics from every
   sibling page. Nothing here leaks to other pages.
   ============================================================ */
.log__page {
  --logc: #005fcc;
  --logc2: #8079f8;
  --logc3: #4da3ff;
  --logh: #1c1e2b;
  --logt: #6b7089;
  --logb: #e9eaf5;
  --logbg: #f6f7fc;
  --logdark: #07152F;
  --logmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.log__page .log__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--logc);
  margin-bottom: 18px;
}
.log__page .log__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--logh); margin: 0 0 20px; }
.log__page .log__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--logh); margin: 0 0 18px; }
.log__page .log__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--logt); margin: 0 0 16px; }
.log__page .log__text:last-child { margin-bottom: 0; }
.log__page .log__text a { color: var(--logc); text-decoration: underline; text-underline-offset: 3px; }
.log__page .log__text a:hover { color: var(--logc2); }
.log__page .log__head { max-width: 760px; }
.log__page .log__head--center { margin: 0 auto 0; text-align: center; }
:where(.log__page) section { padding: 130px 0; }
.log__page .log__btn,
.log__page .log__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.log__page .log__btn { color: #fff; background: var(--logc); border: 2px solid var(--logc); }
.log__page .log__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.log__page .log__btn-outline { color: var(--logh); border: 2px solid var(--logb); background: transparent; }
.log__page .log__btn-outline:hover { border-color: var(--logc); color: var(--logc); }
.log__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.log__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--logmuted);
}
.log__crumb a { color: var(--logmuted); transition: color .25s ease; }
.log__crumb a:hover { color: #fff; }
.log__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.log__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.log__hero {
  position: relative;
  overflow: hidden;
  background: var(--logdark);
  padding: 200px 0 120px;
}
.log__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.log__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.log__hero > .container { position: relative; z-index: 2; }
.log__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.log__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--logc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.log__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.log__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--logc3), var(--logc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.log__hero-title em div div { background: linear-gradient(90deg, var(--logc3), var(--logc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.log__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.log__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--logmuted); margin: 0 0 16px; }
.log__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.log__hero .log__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.log__hero .log__btn-outline:hover { background: #fff; border-color: #fff; color: var(--logdark); }
.log__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.log__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.log__hero-figure { position: relative; }
.log__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: logKfSpin 26s linear infinite;
}
.log__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.log__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes logKfSpin { to { transform: rotate(360deg); } }
.log__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: logKfChip 6s ease-in-out infinite;
}
.log__hero-chip i { color: var(--logc3); font-size: 18px; }
.log__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.log__hero-chip span { font-size: 13px; font-weight: 300; color: var(--logmuted); }
.log__hero-chip--1 { left: -34px; top: 12%; }
.log__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes logKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.log__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.log__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.log__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: logKfMarquee 40s linear infinite; }
.log__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.log__marquee-track i { color: var(--logc3); font-size: 8px; }
@keyframes logKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.log__intro { background: #fff; }
.log__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.log__quick { display: flex; flex-direction: column; gap: 16px; }
.log__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--logb); border-radius: 14px; background: var(--logbg); }
.log__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--logc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.log__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--logh); margin: 0 0 4px; }
.log__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--logt); margin: 0; line-height: 1.6; }

/* ---------- 04. Route tracker (flagship) ---------- */
.log__route-section { background: var(--logbg); }
.log__route { position: relative; margin-top: 70px; padding: 30px 20px 0; }
.log__route-line { position: absolute; left: 5%; right: 5%; top: 40px; height: 3px; background: var(--logb); border-radius: 2px; overflow: hidden; }
.log__route-pulse {
  position: absolute;
  top: 40px;
  left: 5%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--logc);
  box-shadow: 0 0 0 6px rgba(0, 95, 204, .15);
  transform: translate(-50%, -50%);
  animation: logKfMove 9s ease-in-out infinite;
}
@keyframes logKfMove {
  0% { left: 5%; }
  45%, 55% { left: 50%; }
  100% { left: 95%; }
}
.log__route-stops { position: relative; display: flex; justify-content: space-between; }
.log__route-stop { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.log__route-marker { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--logc); margin-bottom: 18px; }
.log__route-stop:nth-child(3n+2) .log__route-marker { border-color: var(--logc2); }
.log__route-stop:nth-child(3n) .log__route-marker { border-color: var(--logc3); }
.log__route-stop h3 { font-size: 15.5px; font-weight: 600; color: var(--logh); margin: 0 0 6px; }
.log__route-stop p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--logt); margin: 0; }

/* ---------- 05. Capabilities (card grid) ---------- */
.log__cap { background: #fff; }
.log__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.log__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--logb);
  border-radius: 18px;
  background: var(--logbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.log__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--logc), var(--logc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.log__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--logc2), #a79af5); }
.log__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--logc3), #8fc4ff); }
.log__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.log__cap-card:hover::before { transform: scaleX(1); }
.log__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--logc); font-size: 20px; margin-bottom: 22px; }
.log__cap-card:nth-child(3n+2) .log__cap-ico { background: rgba(128, 121, 248, .12); color: var(--logc2); }
.log__cap-card:nth-child(3n) .log__cap-ico { background: rgba(77, 163, 255, .14); color: var(--logc3); }
.log__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--logh); margin: 0 0 12px; }
.log__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--logt); margin: 0; }

/* ---------- 06. Constraints (plain numbered list) ---------- */
.log__constraints { background: var(--logbg); }
.log__numbered { max-width: 780px; margin: 54px auto 0; counter-reset: lognum; list-style: none; padding: 0; }
.log__numbered li { position: relative; padding: 16px 0 16px 46px; border-bottom: 1px solid var(--logb); font-size: 15.5px; font-weight: 400; color: var(--logh); }
.log__numbered li:last-child { border-bottom: none; }
.log__numbered li::before {
  counter-increment: lognum;
  content: counter(lognum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--logc);
}
.log__page .log__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (zebra-striped list) ---------- */
.log__principles { background: #fff; }
.log__zebra { max-width: 900px; margin: 56px auto 0; border: 1px solid var(--logb); border-radius: 16px; overflow: hidden; }
.log__zebra-row { display: flex; align-items: center; gap: 20px; padding: 24px 28px; }
.log__zebra-row:nth-child(even) { background: var(--logbg); }
.log__zebra-row i { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--logc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.log__zebra-row h3 { font-size: 16.5px; font-weight: 600; color: var(--logh); margin: 0 0 4px; display: inline; }
.log__zebra-row p { font-size: 14px; font-weight: 300; color: var(--logt); margin: 4px 0 0; line-height: 1.6; }

/* ---------- 08. AI in logistics (dark 2x2 signal grid) ---------- */
.log__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--logdark) 0%, #0b1c3d 100%); }
.log__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.log__ai > .container { position: relative; z-index: 1; }
.log__ai .log__eyebrow { color: var(--logc3); }
.log__ai .log__title { color: #fff; }
.log__ai .log__lead { color: #dbe6f4; }
.log__ai .log__text { color: var(--logmuted); }
.log__signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px; max-width: 780px; margin-left: auto; margin-right: auto; }
.log__signal-card { padding: 30px 26px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.log__signal-card i { font-size: 22px; color: var(--logc3); margin-bottom: 16px; display: block; }
.log__signal-card h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.log__signal-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--logmuted); margin: 0; }
.log__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--logc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.log__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--logmuted); margin: 0; }
.log__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (text-only spec list) ---------- */
.log__foundation { background: #fff; }
.log__spec { max-width: 780px; margin: 54px auto 0; }
.log__spec-row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--logb); }
.log__spec-row:last-child { border-bottom: 1px solid var(--logb); }
.log__spec-row strong { font-size: 15px; font-weight: 600; color: var(--logh); }
.log__spec-row span { font-size: 14.5px; font-weight: 300; color: var(--logt); line-height: 1.6; }

/* ---------- 10. Perspectives (borderless plain columns) ---------- */
.log__persp { background: var(--logbg); }
.log__plain-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 58px; text-align: center; }
.log__plain-cols i { font-size: 30px; color: var(--logc); margin-bottom: 18px; display: block; }
.log__plain-cols > div:nth-child(2) i { color: var(--logc2); }
.log__plain-cols > div:nth-child(3) i { color: var(--logc3); }
.log__plain-cols h3 { font-size: 18px; font-weight: 600; color: var(--logh); margin: 0 0 10px; }
.log__plain-cols p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--logt); margin: 0; max-width: 280px; margin-left: auto; margin-right: auto; }

/* ---------- 11. Engagement model (segmented progress bar) ---------- */
.log__engage { background: #fff; }
.log__bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-top: 58px; gap: 3px; }
.log__bar-seg { flex: 1; background: var(--logc); border-radius: 4px; }
.log__bar-seg:nth-child(3n+2) { background: var(--logc2); }
.log__bar-seg:nth-child(3n) { background: var(--logc3); }
.log__bar-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 22px; }
.log__bar-labels h3 { font-size: 15.5px; font-weight: 600; color: var(--logh); margin: 0 0 6px; }
.log__bar-labels p { font-size: 13px; font-weight: 300; color: var(--logt); margin: 0; line-height: 1.55; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.log__tech { background: var(--logbg); }
.log__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.log__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--logb);
  font-size: 14.5px; font-weight: 500; color: var(--logh); transition: all .3s ease;
}
.log__tech-tags li:hover { border-color: var(--logc); color: var(--logc); transform: translateY(-3px); }
.log__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--logb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.log__related span { font-size: 13.5px; font-weight: 500; color: var(--logt); text-transform: uppercase; letter-spacing: 1.5px; }
.log__related a { font-size: 14.5px; font-weight: 500; color: var(--logh); transition: color .25s ease; }
.log__related a:hover { color: var(--logc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .log__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .log__page .log__title { font-size: 32px; }
  :where(.log__page) section { padding: 100px 0; }
  .log__hero { padding: 170px 0 100px; }
  .log__hero-title { font-size: 38px; }
  .log__hero-grid,
  .log__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .log__hero-figure { max-width: 480px; margin: 0 auto; }
  .log__hero-chip--1 { left: -14px; }
  .log__hero-chip--2 { right: -10px; }
  .log__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .log__route-stops { flex-wrap: wrap; gap: 30px 0; justify-content: center; }
  .log__route-line, .log__route-pulse { display: none; }
  .log__bar-labels { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}
@media only screen and (max-width: 991px) {
  .log__spec-row { grid-template-columns: 1fr; gap: 6px; }
  .log__plain-cols { grid-template-columns: 1fr; gap: 34px; }
}
@media only screen and (max-width: 767px) {
  .log__page .log__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .log__page .log__title { font-size: 26px; }
  .log__page .log__lead { font-size: 16.5px; }
  :where(.log__page) section { padding: 76px 0; }
  .log__hero { padding: 140px 0 76px; }
  .log__hero-title { font-size: 29px; }
  .log__hero-lead { font-size: 16.5px; }
  .log__hero-chip { display: none; }
  .log__cap-grid { grid-template-columns: 1fr; }
  .log__signal-grid { grid-template-columns: 1fr; }
  .log__bar-labels { grid-template-columns: 1fr 1fr; }
  .log__route-stop { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .log__page * { transition-duration: .01ms !important; }
  .log__hero-glow,
  .log__hero-chip,
  .log__route-pulse,
  .log__marquee-track { animation: none; }
}

/* ============================================================
   MANUFACTURING INDUSTRY PAGE (manufacturing.html)
   Scoped entirely to .mfg__page. Eighth sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is a CSS-only crossfade toggle (hidden checkbox + label switch, no
   JS) between a "Physical Plant" view and a "Digital Twin" view. Other
   sections use a status-light badge list for constraints, a checklist
   "readout" for principles, a single-row AI card strip, an OT/IT
   convergence diagram for infrastructure, ID-badge style cards for
   perspectives, and a stripped-down plain grid (no icons, no borders)
   for the engagement model - deliberately different mechanics from
   every sibling page. Nothing here leaks to other pages.
   ============================================================ */
.mfg__page {
  --mfgc: #005fcc;
  --mfgc2: #8079f8;
  --mfgc3: #4da3ff;
  --mfgh: #1c1e2b;
  --mfgt: #6b7089;
  --mfgb: #e9eaf5;
  --mfgbg: #f6f7fc;
  --mfgdark: #07152F;
  --mfgmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.mfg__page .mfg__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--mfgc);
  margin-bottom: 18px;
}
.mfg__page .mfg__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--mfgh); margin: 0 0 20px; }
.mfg__page .mfg__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--mfgh); margin: 0 0 18px; }
.mfg__page .mfg__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mfgt); margin: 0 0 16px; }
.mfg__page .mfg__text:last-child { margin-bottom: 0; }
.mfg__page .mfg__text a { color: var(--mfgc); text-decoration: underline; text-underline-offset: 3px; }
.mfg__page .mfg__text a:hover { color: var(--mfgc2); }
.mfg__page .mfg__head { max-width: 760px; }
.mfg__page .mfg__head--center { margin: 0 auto 0; text-align: center; }
:where(.mfg__page) section { padding: 130px 0; }
.mfg__page .mfg__btn,
.mfg__page .mfg__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.mfg__page .mfg__btn { color: #fff; background: var(--mfgc); border: 2px solid var(--mfgc); }
.mfg__page .mfg__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.mfg__page .mfg__btn-outline { color: var(--mfgh); border: 2px solid var(--mfgb); background: transparent; }
.mfg__page .mfg__btn-outline:hover { border-color: var(--mfgc); color: var(--mfgc); }
.mfg__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.mfg__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--mfgmuted);
}
.mfg__crumb a { color: var(--mfgmuted); transition: color .25s ease; }
.mfg__crumb a:hover { color: #fff; }
.mfg__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.mfg__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.mfg__hero {
  position: relative;
  overflow: hidden;
  background: var(--mfgdark);
  padding: 200px 0 120px;
}
.mfg__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.mfg__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.mfg__hero > .container { position: relative; z-index: 2; }
.mfg__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.mfg__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--mfgc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.mfg__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.mfg__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--mfgc3), var(--mfgc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mfg__hero-title em div div { background: linear-gradient(90deg, var(--mfgc3), var(--mfgc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mfg__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.mfg__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mfgmuted); margin: 0 0 16px; }
.mfg__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.mfg__hero .mfg__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.mfg__hero .mfg__btn-outline:hover { background: #fff; border-color: #fff; color: var(--mfgdark); }
.mfg__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mfg__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.mfg__hero-figure { position: relative; }
.mfg__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: mfgKfSpin 26s linear infinite;
}
.mfg__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.mfg__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes mfgKfSpin { to { transform: rotate(360deg); } }
.mfg__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: mfgKfChip 6s ease-in-out infinite;
}
.mfg__hero-chip i { color: var(--mfgc3); font-size: 18px; }
.mfg__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.mfg__hero-chip span { font-size: 13px; font-weight: 300; color: var(--mfgmuted); }
.mfg__hero-chip--1 { left: -34px; top: 12%; }
.mfg__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes mfgKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.mfg__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mfg__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mfg__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: mfgKfMarquee 40s linear infinite; }
.mfg__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.mfg__marquee-track i { color: var(--mfgc3); font-size: 8px; }
@keyframes mfgKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.mfg__intro { background: #fff; }
.mfg__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.mfg__quick { display: flex; flex-direction: column; gap: 16px; }
.mfg__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--mfgb); border-radius: 14px; background: var(--mfgbg); }
.mfg__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--mfgc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.mfg__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--mfgh); margin: 0 0 4px; }
.mfg__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--mfgt); margin: 0; line-height: 1.6; }

/* ---------- 04. Digital twin toggle (flagship, CSS-only) ---------- */
.mfg__twin-section { background: var(--mfgbg); }
.mfg__twin { margin-top: 56px; max-width: 900px; margin-left: auto; margin-right: auto; }
.mfg__twin-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mfg__twin-stage { position: relative; min-height: 380px; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(28, 30, 43, .15); }
.mfg__twin-panel { position: absolute; inset: 0; padding: 46px 54px; display: flex; flex-direction: column; justify-content: center; transition: opacity .5s ease; }
.mfg__twin-panel--physical { background: linear-gradient(160deg, #2a2f3d, #171a22); opacity: 1; z-index: 2; }
.mfg__twin-panel--digital { background: linear-gradient(160deg, var(--mfgc), var(--mfgc2)); opacity: 0; z-index: 1; }
.mfg__twin-input:checked ~ .mfg__twin-stage .mfg__twin-panel--physical { opacity: 0; z-index: 1; }
.mfg__twin-input:checked ~ .mfg__twin-stage .mfg__twin-panel--digital { opacity: 1; z-index: 2; }
.mfg__twin-tag { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .65); margin-bottom: 16px; }
.mfg__twin-panel h3 { font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 18px; }
.mfg__twin-panel ul { list-style: none; margin: 0; padding: 0; max-width: 420px; }
.mfg__twin-panel li { position: relative; padding: 8px 0 8px 24px; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.mfg__twin-panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 12px; color: rgba(255, 255, 255, .7); }
.mfg__twin-switch { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; cursor: pointer; }
.mfg__twin-switch-track { position: relative; width: 56px; height: 30px; border-radius: 20px; background: var(--mfgb); transition: background .3s ease; }
.mfg__twin-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s ease; }
.mfg__twin-input:checked ~ .mfg__twin-switch .mfg__twin-switch-track { background: var(--mfgc); }
.mfg__twin-input:checked ~ .mfg__twin-switch .mfg__twin-switch-thumb { transform: translateX(26px); }
.mfg__twin-switch-labels span { font-size: 14.5px; font-weight: 500; color: var(--mfgt); }
.mfg__twin-switch-labels span:first-child { color: var(--mfgh); font-weight: 600; }
.mfg__twin-input:checked ~ .mfg__twin-switch .mfg__twin-switch-labels span:first-child { color: var(--mfgt); font-weight: 500; }
.mfg__twin-input:checked ~ .mfg__twin-switch .mfg__twin-switch-labels span:last-child { color: var(--mfgh); font-weight: 600; }
.mfg__twin-input:focus-visible ~ .mfg__twin-switch { outline: 2px solid var(--mfgc); outline-offset: 4px; border-radius: 20px; }

/* ---------- 05. Capabilities (card grid) ---------- */
.mfg__cap { background: #fff; }
.mfg__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.mfg__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--mfgb);
  border-radius: 18px;
  background: var(--mfgbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.mfg__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--mfgc), var(--mfgc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.mfg__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--mfgc2), #a79af5); }
.mfg__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--mfgc3), #8fc4ff); }
.mfg__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.mfg__cap-card:hover::before { transform: scaleX(1); }
.mfg__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--mfgc); font-size: 20px; margin-bottom: 22px; }
.mfg__cap-card:nth-child(3n+2) .mfg__cap-ico { background: rgba(128, 121, 248, .12); color: var(--mfgc2); }
.mfg__cap-card:nth-child(3n) .mfg__cap-ico { background: rgba(77, 163, 255, .14); color: var(--mfgc3); }
.mfg__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--mfgh); margin: 0 0 12px; }
.mfg__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--mfgt); margin: 0; }

/* ---------- 06. Constraints (status-light badge list) ---------- */
.mfg__constraints { background: var(--mfgbg); }
.mfg__status-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 54px; max-width: 980px; margin-left: auto; margin-right: auto; }
.mfg__status-item { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 50px; background: #fff; border: 1px solid var(--mfgb); font-size: 14.5px; font-weight: 500; color: var(--mfgh); transition: all .3s ease; }
.mfg__status-item:hover { border-color: var(--mfgc); transform: translateY(-3px); }
.mfg__status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mfgc); flex-shrink: 0; }
.mfg__status-item:nth-child(3n+2) .mfg__status-dot { background: var(--mfgc2); }
.mfg__status-item:nth-child(3n) .mfg__status-dot { background: var(--mfgc3); }
.mfg__page .mfg__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (checklist readout) ---------- */
.mfg__principles { background: #fff; }
.mfg__readout { max-width: 780px; margin: 56px auto 0; }
.mfg__readout-row { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--mfgb); }
.mfg__readout-row:last-child { border-bottom: 1px solid var(--mfgb); }
.mfg__readout-mark { flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; background: var(--mfgbg); border: 1px solid var(--mfgb); color: var(--mfgc); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 2px; }
.mfg__readout-row h3 { font-size: 16.5px; font-weight: 600; color: var(--mfgh); margin: 0 0 6px; font-family: monospace, "Kanit", sans-serif; }
.mfg__readout-row p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--mfgt); margin: 0; }

/* ---------- 08. AI in manufacturing (dark, single-row card strip) ---------- */
.mfg__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--mfgdark) 0%, #0b1c3d 100%); }
.mfg__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.mfg__ai > .container { position: relative; z-index: 1; }
.mfg__ai .mfg__eyebrow { color: var(--mfgc3); }
.mfg__ai .mfg__title { color: #fff; }
.mfg__ai .mfg__lead { color: #dbe6f4; }
.mfg__ai .mfg__text { color: var(--mfgmuted); }
.mfg__ai-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; }
.mfg__ai-card { padding: 30px 26px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.mfg__ai-card i { font-size: 22px; color: var(--mfgc3); margin-bottom: 16px; display: block; }
.mfg__ai-card h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.mfg__ai-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--mfgmuted); margin: 0; }
.mfg__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--mfgc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.mfg__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--mfgmuted); margin: 0; }
.mfg__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (OT/IT convergence) ---------- */
.mfg__foundation { background: #fff; }
.mfg__converge { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 58px; flex-wrap: wrap; }
.mfg__converge-group { display: flex; flex-direction: column; gap: 16px; }
.mfg__converge-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--mfgt); margin-bottom: 4px; }
.mfg__converge-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--mfgb); border-radius: 12px; background: var(--mfgbg); width: 230px; }
.mfg__converge-item i { color: var(--mfgc); font-size: 16px; }
.mfg__converge-item span { font-size: 14px; font-weight: 500; color: var(--mfgh); }
.mfg__converge-center { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--mfgc), var(--mfgc2)); color: #fff; font-size: 20px; }

/* ---------- 10. Perspectives (ID-badge style cards) ---------- */
.mfg__persp { background: var(--mfgbg); }
.mfg__badge-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.mfg__badge { background: #fff; border: 1px solid var(--mfgb); border-radius: 16px; overflow: hidden; text-align: center; }
.mfg__badge-stripe { height: 6px; background: var(--mfgc); }
.mfg__badge:nth-child(2) .mfg__badge-stripe { background: var(--mfgc2); }
.mfg__badge:nth-child(3) .mfg__badge-stripe { background: var(--mfgc3); }
.mfg__badge-body { padding: 36px 28px; }
.mfg__badge-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(0, 95, 204, .1); color: var(--mfgc); font-size: 22px; margin-bottom: 18px; }
.mfg__badge:nth-child(2) .mfg__badge-ico { background: rgba(128, 121, 248, .12); color: var(--mfgc2); }
.mfg__badge:nth-child(3) .mfg__badge-ico { background: rgba(77, 163, 255, .14); color: var(--mfgc3); }
.mfg__badge h3 { font-size: 17.5px; font-weight: 600; color: var(--mfgh); margin: 0 0 10px; }
.mfg__badge p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--mfgt); margin: 0; }

/* ---------- 11. Engagement model (plain minimal grid) ---------- */
.mfg__engage { background: #fff; }
.mfg__plain-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 58px; }
.mfg__plain-grid h3 { font-size: 16px; font-weight: 600; color: var(--mfgh); margin: 0 0 8px; }
.mfg__plain-grid p { font-size: 13.5px; font-weight: 300; color: var(--mfgt); margin: 0; line-height: 1.6; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.mfg__tech { background: var(--mfgbg); }
.mfg__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.mfg__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--mfgb);
  font-size: 14.5px; font-weight: 500; color: var(--mfgh); transition: all .3s ease;
}
.mfg__tech-tags li:hover { border-color: var(--mfgc); color: var(--mfgc); transform: translateY(-3px); }
.mfg__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--mfgb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.mfg__related span { font-size: 13.5px; font-weight: 500; color: var(--mfgt); text-transform: uppercase; letter-spacing: 1.5px; }
.mfg__related a { font-size: 14.5px; font-weight: 500; color: var(--mfgh); transition: color .25s ease; }
.mfg__related a:hover { color: var(--mfgc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mfg__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .mfg__page .mfg__title { font-size: 32px; }
  :where(.mfg__page) section { padding: 100px 0; }
  .mfg__hero { padding: 170px 0 100px; }
  .mfg__hero-title { font-size: 38px; }
  .mfg__hero-grid,
  .mfg__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .mfg__hero-figure { max-width: 480px; margin: 0 auto; }
  .mfg__hero-chip--1 { left: -14px; }
  .mfg__hero-chip--2 { right: -10px; }
  .mfg__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .mfg__ai-strip { grid-template-columns: 1fr; }
  .mfg__plain-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .mfg__badge-row { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 991px) {
  .mfg__twin-panel { padding: 34px 30px; }
  .mfg__twin-panel h3 { font-size: 20px; }
  .mfg__converge { flex-direction: column; }
  .mfg__converge-center { transform: rotate(90deg); }
}
@media only screen and (max-width: 767px) {
  .mfg__page .mfg__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .mfg__page .mfg__title { font-size: 26px; }
  .mfg__page .mfg__lead { font-size: 16.5px; }
  :where(.mfg__page) section { padding: 76px 0; }
  .mfg__hero { padding: 140px 0 76px; }
  .mfg__hero-title { font-size: 29px; }
  .mfg__hero-lead { font-size: 16.5px; }
  .mfg__hero-chip { display: none; }
  .mfg__cap-grid { grid-template-columns: 1fr; }
  .mfg__twin-panel ul { max-width: 100%; }
  .mfg__plain-grid { grid-template-columns: 1fr 1fr; }
  .mfg__converge-item { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mfg__page * { transition-duration: .01ms !important; }
  .mfg__hero-glow,
  .mfg__hero-chip,
  .mfg__marquee-track { animation: none; }
}

/* ============================================================
   GOVERNMENT & PUBLIC SECTOR INDUSTRY PAGE
   (government-public-sector.html)
   Scoped entirely to .gov__page. Ninth sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is a CSS-only live accessibility demo: a hidden checkbox toggles a
   sample citizen-service card between standard and high-contrast
   styling, no JS. Other sections use a real semantic <table> for
   constraints, circular seal badges for principles, a square-icon row
   for AI, numbered "defense in depth" layer cards for infrastructure,
   pill-labeled borderless columns for perspectives, and a checklist
   marker row for the engagement model - deliberately different
   mechanics from every sibling page. Nothing here leaks to other
   pages.
   ============================================================ */
.gov__page {
  --govc: #005fcc;
  --govc2: #8079f8;
  --govc3: #4da3ff;
  --govh: #1c1e2b;
  --govt: #6b7089;
  --govb: #e9eaf5;
  --govbg: #f6f7fc;
  --govdark: #07152F;
  --govmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.gov__page .gov__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--govc);
  margin-bottom: 18px;
}
.gov__page .gov__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--govh); margin: 0 0 20px; }
.gov__page .gov__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--govh); margin: 0 0 18px; }
.gov__page .gov__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--govt); margin: 0 0 16px; }
.gov__page .gov__text:last-child { margin-bottom: 0; }
.gov__page .gov__text a { color: var(--govc); text-decoration: underline; text-underline-offset: 3px; }
.gov__page .gov__text a:hover { color: var(--govc2); }
.gov__page .gov__head { max-width: 760px; }
.gov__page .gov__head--center { margin: 0 auto 0; text-align: center; }
:where(.gov__page) section { padding: 130px 0; }
.gov__page .gov__btn,
.gov__page .gov__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.gov__page .gov__btn { color: #fff; background: var(--govc); border: 2px solid var(--govc); }
.gov__page .gov__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.gov__page .gov__btn-outline { color: var(--govh); border: 2px solid var(--govb); background: transparent; }
.gov__page .gov__btn-outline:hover { border-color: var(--govc); color: var(--govc); }
.gov__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.gov__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--govmuted);
}
.gov__crumb a { color: var(--govmuted); transition: color .25s ease; }
.gov__crumb a:hover { color: #fff; }
.gov__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.gov__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.gov__hero {
  position: relative;
  overflow: hidden;
  background: var(--govdark);
  padding: 200px 0 120px;
}
.gov__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.gov__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.gov__hero > .container { position: relative; z-index: 2; }
.gov__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.gov__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--govc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.gov__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.gov__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--govc3), var(--govc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gov__hero-title em div div { background: linear-gradient(90deg, var(--govc3), var(--govc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gov__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.gov__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--govmuted); margin: 0 0 16px; }
.gov__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.gov__hero .gov__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.gov__hero .gov__btn-outline:hover { background: #fff; border-color: #fff; color: var(--govdark); }
.gov__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gov__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.gov__hero-figure { position: relative; }
.gov__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: govKfSpin 26s linear infinite;
}
.gov__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.gov__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes govKfSpin { to { transform: rotate(360deg); } }
.gov__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: govKfChip 6s ease-in-out infinite;
}
.gov__hero-chip i { color: var(--govc3); font-size: 18px; }
.gov__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.gov__hero-chip span { font-size: 13px; font-weight: 300; color: var(--govmuted); }
.gov__hero-chip--1 { left: -34px; top: 12%; }
.gov__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes govKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.gov__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.gov__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.gov__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: govKfMarquee 40s linear infinite; }
.gov__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.gov__marquee-track i { color: var(--govc3); font-size: 8px; }
@keyframes govKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.gov__intro { background: #fff; }
.gov__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.gov__quick { display: flex; flex-direction: column; gap: 16px; }
.gov__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--govb); border-radius: 14px; background: var(--govbg); }
.gov__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--govc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.gov__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--govh); margin: 0 0 4px; }
.gov__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--govt); margin: 0; line-height: 1.6; }

/* ---------- 04. Accessibility demo toggle (flagship, CSS-only) ---------- */
.gov__demo-section { background: var(--govbg); }
.gov__demo { max-width: 560px; margin: 56px auto 0; text-align: center; }
.gov__demo-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gov__demo-card {
  text-align: left;
  padding: 44px 46px;
  border-radius: 18px;
  border: 2px solid var(--govb);
  background: #fff;
  box-shadow: 0 26px 54px rgba(28, 30, 43, .1);
  transition: all .35s ease;
}
.gov__demo-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--govc); margin-bottom: 16px; transition: color .35s ease; }
.gov__demo-title { font-size: 24px; font-weight: 600; color: var(--govh); margin: 0 0 12px; transition: all .35s ease; }
.gov__demo-text { font-size: 15px; font-weight: 300; color: var(--govt); line-height: 1.7; margin: 0 0 24px; transition: color .35s ease; }
.gov__demo-btn { display: inline-block; padding: 14px 26px; border-radius: 10px; background: var(--govc); color: #fff; font-size: 14.5px; font-weight: 600; transition: all .35s ease; }
.gov__demo-input:checked ~ .gov__demo-card { background: #0a0a0a; border-color: #ffe600; }
.gov__demo-input:checked ~ .gov__demo-card .gov__demo-label { color: #ffe600; }
.gov__demo-input:checked ~ .gov__demo-card .gov__demo-title { color: #fff; font-size: 27px; }
.gov__demo-input:checked ~ .gov__demo-card .gov__demo-text { color: #f2f2f2; font-size: 16px; }
.gov__demo-input:checked ~ .gov__demo-card .gov__demo-btn { background: #ffe600; color: #000; box-shadow: 0 0 0 3px #fff inset; }
.gov__demo-switch { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; cursor: pointer; }
.gov__demo-switch-track { position: relative; width: 56px; height: 30px; border-radius: 20px; background: var(--govb); transition: background .3s ease; }
.gov__demo-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s ease; }
.gov__demo-input:checked ~ .gov__demo-switch .gov__demo-switch-track { background: var(--govc); }
.gov__demo-input:checked ~ .gov__demo-switch .gov__demo-switch-thumb { transform: translateX(26px); }
.gov__demo-switch span { font-size: 14px; font-weight: 500; color: var(--govt); }
.gov__demo-input:focus-visible ~ .gov__demo-switch { outline: 2px solid var(--govc); outline-offset: 4px; border-radius: 20px; }

/* ---------- 05. Capabilities (card grid) ---------- */
.gov__cap { background: #fff; }
.gov__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.gov__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--govb);
  border-radius: 18px;
  background: var(--govbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.gov__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--govc), var(--govc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.gov__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--govc2), #a79af5); }
.gov__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--govc3), #8fc4ff); }
.gov__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.gov__cap-card:hover::before { transform: scaleX(1); }
.gov__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--govc); font-size: 20px; margin-bottom: 22px; }
.gov__cap-card:nth-child(3n+2) .gov__cap-ico { background: rgba(128, 121, 248, .12); color: var(--govc2); }
.gov__cap-card:nth-child(3n) .gov__cap-ico { background: rgba(77, 163, 255, .14); color: var(--govc3); }
.gov__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--govh); margin: 0 0 12px; }
.gov__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--govt); margin: 0; }

/* ---------- 06. Constraints (real table) ---------- */
.gov__constraints { background: var(--govbg); }
.gov__table-wrap { margin-top: 54px; overflow-x: auto; border-radius: 16px; border: 1px solid var(--govb); }
.gov__table { width: 100%; border-collapse: collapse; background: #fff; }
.gov__table th { background: var(--govdark); color: #fff; font-size: 13.5px; font-weight: 600; text-align: left; padding: 18px 24px; }
.gov__table td { padding: 16px 24px; font-size: 14.5px; font-weight: 300; color: var(--govt); border-top: 1px solid var(--govb); }
.gov__table td:first-child { font-weight: 500; color: var(--govh); white-space: nowrap; }
.gov__table tr:nth-child(even) td { background: var(--govbg); }
.gov__page .gov__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (seal badges) ---------- */
.gov__principles { background: #fff; }
.gov__seal-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; margin-top: 58px; }
.gov__seal { width: 190px; text-align: center; }
.gov__seal-ico { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--govc); color: var(--govc); font-size: 24px; margin-bottom: 18px; }
.gov__seal:nth-child(3n+2) .gov__seal-ico { border-color: var(--govc2); color: var(--govc2); }
.gov__seal:nth-child(3n) .gov__seal-ico { border-color: var(--govc3); color: var(--govc3); }
.gov__seal h3 { font-size: 15.5px; font-weight: 600; color: var(--govh); margin: 0 0 8px; }
.gov__seal p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--govt); margin: 0; }

/* ---------- 08. AI in government (dark, square-icon row) ---------- */
.gov__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--govdark) 0%, #0b1c3d 100%); }
.gov__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.gov__ai > .container { position: relative; z-index: 1; }
.gov__ai .gov__eyebrow { color: var(--govc3); }
.gov__ai .gov__title { color: #fff; }
.gov__ai .gov__lead { color: #dbe6f4; }
.gov__ai .gov__text { color: var(--govmuted); }
.gov__ai-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; }
.gov__ai-item { padding: 26px 22px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.gov__ai-item i { width: 40px; height: 40px; border-radius: 9px; background: rgba(77, 163, 255, .15); color: var(--govc3); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 14px; }
.gov__ai-item h3 { font-size: 14.5px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.gov__ai-item p { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--govmuted); margin: 0; }
.gov__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--govc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.gov__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--govmuted); margin: 0; }
.gov__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (defense-in-depth layers) ---------- */
.gov__foundation { background: #fff; }
.gov__layer-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 58px; }
.gov__layer-card { padding: 28px 24px; border: 1px solid var(--govb); border-radius: 14px; text-align: center; transition: all .3s ease; }
.gov__layer-card:hover { background: var(--govbg); border-color: rgba(0, 95, 204, .25); }
.gov__layer-num { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: var(--govc); margin-bottom: 14px; }
.gov__layer-card i { font-size: 20px; color: var(--govc); margin-bottom: 12px; display: block; }
.gov__layer-card h3 { font-size: 14.5px; font-weight: 600; color: var(--govh); margin: 0 0 6px; }
.gov__layer-card p { font-size: 12.5px; font-weight: 300; color: var(--govt); margin: 0; line-height: 1.5; }

/* ---------- 10. Perspectives (pill-labeled columns) ---------- */
.gov__persp { background: var(--govbg); }
.gov__col-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 58px; }
.gov__col-pill { display: inline-block; padding: 8px 18px; border-radius: 50px; background: var(--govc); color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.gov__col-row > div:nth-child(2) .gov__col-pill { background: var(--govc2); }
.gov__col-row > div:nth-child(3) .gov__col-pill { background: var(--govc3); }
.gov__col-row ul { list-style: none; margin: 0; padding: 0; }
.gov__col-row li { position: relative; padding: 8px 0 8px 22px; font-size: 14.5px; font-weight: 300; color: var(--govt); line-height: 1.6; }
.gov__col-row li::before { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; position: absolute; left: 0; top: 11px; color: var(--govc); }

/* ---------- 11. Engagement model (checklist marker row) ---------- */
.gov__engage { background: #fff; }
.gov__check-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 58px; }
.gov__check-item { text-align: center; }
.gov__check-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--govc); color: var(--govc); font-size: 16px; margin-bottom: 16px; }
.gov__check-item:nth-child(3n+2) .gov__check-mark { border-color: var(--govc2); color: var(--govc2); }
.gov__check-item:nth-child(3n) .gov__check-mark { border-color: var(--govc3); color: var(--govc3); }
.gov__check-item h3 { font-size: 15.5px; font-weight: 600; color: var(--govh); margin: 0 0 6px; }
.gov__check-item p { font-size: 13px; font-weight: 300; color: var(--govt); margin: 0; line-height: 1.55; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.gov__tech { background: var(--govbg); }
.gov__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.gov__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--govb);
  font-size: 14.5px; font-weight: 500; color: var(--govh); transition: all .3s ease;
}
.gov__tech-tags li:hover { border-color: var(--govc); color: var(--govc); transform: translateY(-3px); }
.gov__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--govb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.gov__related span { font-size: 13.5px; font-weight: 500; color: var(--govt); text-transform: uppercase; letter-spacing: 1.5px; }
.gov__related a { font-size: 14.5px; font-weight: 500; color: var(--govh); transition: color .25s ease; }
.gov__related a:hover { color: var(--govc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .gov__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .gov__page .gov__title { font-size: 32px; }
  :where(.gov__page) section { padding: 100px 0; }
  .gov__hero { padding: 170px 0 100px; }
  .gov__hero-title { font-size: 38px; }
  .gov__hero-grid,
  .gov__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .gov__hero-figure { max-width: 480px; margin: 0 auto; }
  .gov__hero-chip--1 { left: -14px; }
  .gov__hero-chip--2 { right: -10px; }
  .gov__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .gov__ai-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .gov__layer-row { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .gov__col-row { grid-template-columns: 1fr; gap: 34px; }
  .gov__check-row { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
}
@media only screen and (max-width: 991px) {
  .gov__demo-card { padding: 34px 30px; }
}
@media only screen and (max-width: 767px) {
  .gov__page .gov__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .gov__page .gov__title { font-size: 26px; }
  .gov__page .gov__lead { font-size: 16.5px; }
  :where(.gov__page) section { padding: 76px 0; }
  .gov__hero { padding: 140px 0 76px; }
  .gov__hero-title { font-size: 29px; }
  .gov__hero-lead { font-size: 16.5px; }
  .gov__hero-chip { display: none; }
  .gov__cap-grid { grid-template-columns: 1fr; }
  .gov__ai-row { grid-template-columns: 1fr; }
  .gov__layer-row { grid-template-columns: 1fr; }
  .gov__check-row { grid-template-columns: 1fr 1fr; }
  .gov__seal { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .gov__page * { transition-duration: .01ms !important; }
  .gov__hero-glow,
  .gov__hero-chip,
  .gov__marquee-track { animation: none; }
}

/* ============================================================
   MEDIA & ENTERTAINMENT INDUSTRY PAGE (media-entertainment.html)
   Scoped entirely to .media__page. Tenth sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is a real Swiper.js carousel (the site already loads the library
   sitewide but this page is the first to actually initialize its own
   instance) of poster-style format cards. Other sections use a
   monospace broadcast "rundown" list for constraints, film-strip
   sprocket frames for principles, a borderless split comparison for
   AI, a three-step delivery flow for infrastructure, minimal
   heading+paragraph columns for perspectives, and an underlined plain
   grid for the engagement model - deliberately different mechanics
   from every sibling page. Nothing here leaks to other pages.
   ============================================================ */
.media__page {
  --mec: #005fcc;
  --mec2: #8079f8;
  --mec3: #4da3ff;
  --meh: #1c1e2b;
  --met: #6b7089;
  --meb: #e9eaf5;
  --mebg: #f6f7fc;
  --medark: #07152F;
  --memuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.media__page .media__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--mec);
  margin-bottom: 18px;
}
.media__page .media__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--meh); margin: 0 0 20px; }
.media__page .media__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--meh); margin: 0 0 18px; }
.media__page .media__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--met); margin: 0 0 16px; }
.media__page .media__text:last-child { margin-bottom: 0; }
.media__page .media__text a { color: var(--mec); text-decoration: underline; text-underline-offset: 3px; }
.media__page .media__text a:hover { color: var(--mec2); }
.media__page .media__head { max-width: 760px; }
.media__page .media__head--center { margin: 0 auto 0; text-align: center; }
:where(.media__page) section { padding: 130px 0; }
.media__page .media__btn,
.media__page .media__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.media__page .media__btn { color: #fff; background: var(--mec); border: 2px solid var(--mec); }
.media__page .media__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.media__page .media__btn-outline { color: var(--meh); border: 2px solid var(--meb); background: transparent; }
.media__page .media__btn-outline:hover { border-color: var(--mec); color: var(--mec); }
.media__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.media__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--memuted);
}
.media__crumb a { color: var(--memuted); transition: color .25s ease; }
.media__crumb a:hover { color: #fff; }
.media__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.media__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.media__hero {
  position: relative;
  overflow: hidden;
  background: var(--medark);
  padding: 200px 0 120px;
}
.media__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.media__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.media__hero > .container { position: relative; z-index: 2; }
.media__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.media__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--mec3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.media__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.media__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--mec3), var(--mec2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.media__hero-title em div div { background: linear-gradient(90deg, var(--mec3), var(--mec2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.media__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.media__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--memuted); margin: 0 0 16px; }
.media__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.media__hero .media__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.media__hero .media__btn-outline:hover { background: #fff; border-color: #fff; color: var(--medark); }
.media__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.media__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.media__hero-figure { position: relative; }
.media__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: meKfSpin 26s linear infinite;
}
.media__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.media__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes meKfSpin { to { transform: rotate(360deg); } }
.media__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: meKfChip 6s ease-in-out infinite;
}
.media__hero-chip i { color: var(--mec3); font-size: 18px; }
.media__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.media__hero-chip span { font-size: 13px; font-weight: 300; color: var(--memuted); }
.media__hero-chip--1 { left: -34px; top: 12%; }
.media__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes meKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.media__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.media__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.media__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: meKfMarquee 40s linear infinite; }
.media__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.media__marquee-track i { color: var(--mec3); font-size: 8px; }
@keyframes meKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.media__intro { background: #fff; }
.media__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.media__quick { display: flex; flex-direction: column; gap: 16px; }
.media__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--meb); border-radius: 14px; background: var(--mebg); }
.media__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--mec); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.media__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--meh); margin: 0 0 4px; }
.media__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--met); margin: 0; line-height: 1.6; }

/* ---------- 04. Format carousel (flagship, real Swiper instance) ---------- */
.media__reel { background: var(--medark); position: relative; overflow: hidden; }
.media__reel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .22), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .26), transparent 64%);
}
.media__reel > .container { position: relative; z-index: 1; }
.media__reel .media__eyebrow { color: var(--mec3); }
.media__reel .media__title { color: #fff; }
.media__reel .media__text { color: var(--memuted); }
.media__reel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.media__carousel-nav { display: flex; gap: 10px; }
.media__carousel-nav button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff; font-size: 15px; cursor: pointer; transition: all .25s ease;
}
.media__carousel-nav button:hover { border-color: var(--mec3); color: var(--mec3); }
.media__carousel { margin-top: 50px; padding-bottom: 46px !important; }
.media__poster {
  height: 320px;
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
.media__poster::before { content: ""; position: absolute; inset: 0; opacity: .9; }
.media__poster--1::before { background: linear-gradient(160deg, #0b3a66, #061127); }
.media__poster--2::before { background: linear-gradient(160deg, #3a2f6e, #061127); }
.media__poster--3::before { background: linear-gradient(160deg, #0b4d5c, #061127); }
.media__poster--4::before { background: linear-gradient(160deg, #4a2f5e, #061127); }
.media__poster--5::before { background: linear-gradient(160deg, #0b3a4a, #061127); }
.media__poster--6::before { background: linear-gradient(160deg, #2f3a6e, #061127); }
.media__poster i { position: relative; font-size: 22px; color: #fff; margin-bottom: 40px; }
.media__poster h3 { position: relative; font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.media__poster p { position: relative; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .78); line-height: 1.6; margin: 0; }
.media__page .swiper-pagination-bullet { background: rgba(255, 255, 255, .35); opacity: 1; }
.media__page .swiper-pagination-bullet-active { background: var(--mec3); }

/* ---------- 05. Capabilities (card grid) ---------- */
.media__cap { background: #fff; }
.media__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.media__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--meb);
  border-radius: 18px;
  background: var(--mebg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.media__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--mec), var(--mec3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.media__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--mec2), #a79af5); }
.media__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--mec3), #8fc4ff); }
.media__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.media__cap-card:hover::before { transform: scaleX(1); }
.media__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--mec); font-size: 20px; margin-bottom: 22px; }
.media__cap-card:nth-child(3n+2) .media__cap-ico { background: rgba(128, 121, 248, .12); color: var(--mec2); }
.media__cap-card:nth-child(3n) .media__cap-ico { background: rgba(77, 163, 255, .14); color: var(--mec3); }
.media__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--meh); margin: 0 0 12px; }
.media__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--met); margin: 0; }

/* ---------- 06. Constraints (broadcast rundown list) ---------- */
.media__constraints { background: var(--mebg); }
.media__rundown { max-width: 820px; margin: 54px auto 0; }
.media__rundown-row { display: flex; align-items: baseline; gap: 22px; padding: 16px 0; border-top: 1px solid var(--meb); }
.media__rundown-row:last-child { border-bottom: 1px solid var(--meb); }
.media__rundown-code { font-family: monospace, "Kanit", sans-serif; font-size: 13px; font-weight: 600; color: var(--mec); flex-shrink: 0; width: 30px; }
.media__rundown-row span:last-child { font-size: 15px; font-weight: 400; color: var(--meh); }
.media__page .media__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (film-strip frames) ---------- */
.media__principles { background: #fff; }
.media__filmstrip { display: flex; gap: 4px; margin-top: 58px; overflow-x: auto; padding-bottom: 10px; }
.media__frame {
  flex: 0 0 220px;
  position: relative;
  padding: 26px 22px 22px;
  background: var(--mebg);
  border-radius: 8px;
}
.media__frame::before,
.media__frame::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  height: 8px;
  background-image: radial-gradient(circle, #fff 45%, transparent 46%);
  background-size: 16px 8px;
  background-repeat: repeat-x;
}
.media__frame::before { top: 4px; }
.media__frame::after { bottom: 4px; }
.media__frame span { display: block; font-size: 12px; font-weight: 600; color: var(--mec); margin-bottom: 10px; }
.media__frame h3 { font-size: 15.5px; font-weight: 600; color: var(--meh); margin: 0 0 8px; line-height: 1.3; }
.media__frame p { font-size: 13px; font-weight: 300; color: var(--met); margin: 0; line-height: 1.55; }

/* ---------- 08. AI in media (dark, borderless split comparison) ---------- */
.media__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--medark) 0%, #0b1c3d 100%); }
.media__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.media__ai > .container { position: relative; z-index: 1; }
.media__ai .media__eyebrow { color: var(--mec3); }
.media__ai .media__title { color: #fff; }
.media__ai .media__lead { color: #dbe6f4; }
.media__ai .media__text { color: var(--memuted); }
.media__split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 54px; }
.media__split-col h3 { font-size: 16px; font-weight: 600; color: var(--memuted); text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 20px; }
.media__split-col ul { list-style: none; margin: 0; padding: 0; }
.media__split-col li { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; font-weight: 300; color: var(--memuted); }
.media__split-col li:first-of-type { border-top: none; }
.media__split-col--after h3 { color: var(--mec3); }
.media__split-col--after li { color: #fff; font-weight: 400; }
.media__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--mec3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.media__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--memuted); margin: 0; }
.media__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (delivery flow) ---------- */
.media__foundation { background: #fff; }
.media__flow { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 58px; flex-wrap: wrap; }
.media__flow-box { width: 220px; padding: 28px 24px; border: 1px solid var(--meb); border-radius: 14px; text-align: center; }
.media__flow-box i { font-size: 22px; color: var(--mec); margin-bottom: 14px; display: block; }
.media__flow-box:nth-child(3) i { color: var(--mec2); }
.media__flow-box:nth-child(5) i { color: var(--mec3); }
.media__flow-box h3 { font-size: 15px; font-weight: 600; color: var(--meh); margin: 0 0 6px; }
.media__flow-box p { font-size: 12.5px; font-weight: 300; color: var(--met); margin: 0; line-height: 1.5; }
.media__flow-arrow { color: var(--meb); font-size: 20px; }

/* ---------- 10. Perspectives (minimal columns) ---------- */
.media__persp { background: var(--mebg); }
.media__minimal-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 58px; text-align: center; }
.media__minimal-cols h3 { font-size: 19px; font-weight: 600; color: var(--meh); margin: 0 0 12px; }
.media__minimal-cols p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--met); margin: 0; }

/* ---------- 11. Engagement model (underlined plain grid) ---------- */
.media__engage { background: #fff; }
.media__underline-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 58px; }
.media__underline-grid > div { padding-top: 14px; border-top: 3px solid var(--mec); }
.media__underline-grid > div:nth-child(3n+2) { border-top-color: var(--mec2); }
.media__underline-grid > div:nth-child(3n) { border-top-color: var(--mec3); }
.media__underline-grid h3 { font-size: 16px; font-weight: 600; color: var(--meh); margin: 0 0 8px; }
.media__underline-grid p { font-size: 13.5px; font-weight: 300; color: var(--met); margin: 0; line-height: 1.6; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.media__tech { background: var(--mebg); }
.media__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.media__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--meb);
  font-size: 14.5px; font-weight: 500; color: var(--meh); transition: all .3s ease;
}
.media__tech-tags li:hover { border-color: var(--mec); color: var(--mec); transform: translateY(-3px); }
.media__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--meb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.media__related span { font-size: 13.5px; font-weight: 500; color: var(--met); text-transform: uppercase; letter-spacing: 1.5px; }
.media__related a { font-size: 14.5px; font-weight: 500; color: var(--meh); transition: color .25s ease; }
.media__related a:hover { color: var(--mec); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .media__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .media__page .media__title { font-size: 32px; }
  :where(.media__page) section { padding: 100px 0; }
  .media__hero { padding: 170px 0 100px; }
  .media__hero-title { font-size: 38px; }
  .media__hero-grid,
  .media__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .media__hero-figure { max-width: 480px; margin: 0 auto; }
  .media__hero-chip--1 { left: -14px; }
  .media__hero-chip--2 { right: -10px; }
  .media__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .media__split { grid-template-columns: 1fr; gap: 30px; }
  .media__minimal-cols { grid-template-columns: 1fr; gap: 36px; }
  .media__underline-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}
@media only screen and (max-width: 991px) {
  .media__flow-arrow { transform: rotate(90deg); }
  .media__flow { flex-direction: column; }
}
@media only screen and (max-width: 767px) {
  .media__page .media__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .media__page .media__title { font-size: 26px; }
  .media__page .media__lead { font-size: 16.5px; }
  :where(.media__page) section { padding: 76px 0; }
  .media__hero { padding: 140px 0 76px; }
  .media__hero-title { font-size: 29px; }
  .media__hero-lead { font-size: 16.5px; }
  .media__hero-chip { display: none; }
  .media__cap-grid { grid-template-columns: 1fr; }
  .media__underline-grid { grid-template-columns: 1fr 1fr; }
  .media__flow-box { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .media__page * { transition-duration: .01ms !important; }
  .media__hero-glow,
  .media__hero-chip,
  .media__marquee-track { animation: none; }
}

/* ============================================================
   FOOD & BEVERAGE INDUSTRY PAGE (food-beverage.html)
   Scoped entirely to .food__page. Eleventh sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is a grid of CSS 3D flip cards (perspective + rotateY, hover/focus
   triggered, no JS) revealing what's happening behind each stage of
   an order. Other sections use a real <dl> definition list for
   constraints, a restaurant-menu-styled list (dotted leader lines) for
   principles, a dark icon row for AI, a plain equal row for
   infrastructure, bordered panels for perspectives, and a pill-badge
   grid for the engagement model - deliberately different mechanics
   from every sibling page. Nothing here leaks to other pages.
   ============================================================ */
.food__page {
  --foodc: #005fcc;
  --foodc2: #8079f8;
  --foodc3: #4da3ff;
  --foodh: #1c1e2b;
  --foodt: #6b7089;
  --foodb: #e9eaf5;
  --foodbg: #f6f7fc;
  --fooddark: #07152F;
  --foodmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.food__page .food__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--foodc);
  margin-bottom: 18px;
}
.food__page .food__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--foodh); margin: 0 0 20px; }
.food__page .food__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--foodh); margin: 0 0 18px; }
.food__page .food__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--foodt); margin: 0 0 16px; }
.food__page .food__text:last-child { margin-bottom: 0; }
.food__page .food__text a { color: var(--foodc); text-decoration: underline; text-underline-offset: 3px; }
.food__page .food__text a:hover { color: var(--foodc2); }
.food__page .food__head { max-width: 760px; }
.food__page .food__head--center { margin: 0 auto 0; text-align: center; }
:where(.food__page) section { padding: 130px 0; }
.food__page .food__btn,
.food__page .food__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.food__page .food__btn { color: #fff; background: var(--foodc); border: 2px solid var(--foodc); }
.food__page .food__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.food__page .food__btn-outline { color: var(--foodh); border: 2px solid var(--foodb); background: transparent; }
.food__page .food__btn-outline:hover { border-color: var(--foodc); color: var(--foodc); }
.food__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.food__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--foodmuted);
}
.food__crumb a { color: var(--foodmuted); transition: color .25s ease; }
.food__crumb a:hover { color: #fff; }
.food__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.food__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.food__hero {
  position: relative;
  overflow: hidden;
  background: var(--fooddark);
  padding: 200px 0 120px;
}
.food__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.food__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.food__hero > .container { position: relative; z-index: 2; }
.food__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.food__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--foodc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.food__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.food__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--foodc3), var(--foodc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.food__hero-title em div div { background: linear-gradient(90deg, var(--foodc3), var(--foodc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.food__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.food__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--foodmuted); margin: 0 0 16px; }
.food__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.food__hero .food__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.food__hero .food__btn-outline:hover { background: #fff; border-color: #fff; color: var(--fooddark); }
.food__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.food__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.food__hero-figure { position: relative; }
.food__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: foodKfSpin 26s linear infinite;
}
.food__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.food__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes foodKfSpin { to { transform: rotate(360deg); } }
.food__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: foodKfChip 6s ease-in-out infinite;
}
.food__hero-chip i { color: var(--foodc3); font-size: 18px; }
.food__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.food__hero-chip span { font-size: 13px; font-weight: 300; color: var(--foodmuted); }
.food__hero-chip--1 { left: -34px; top: 12%; }
.food__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes foodKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.food__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.food__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.food__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: foodKfMarquee 40s linear infinite; }
.food__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.food__marquee-track i { color: var(--foodc3); font-size: 8px; }
@keyframes foodKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.food__intro { background: #fff; }
.food__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.food__quick { display: flex; flex-direction: column; gap: 16px; }
.food__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--foodb); border-radius: 14px; background: var(--foodbg); }
.food__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--foodc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.food__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--foodh); margin: 0 0 4px; }
.food__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--foodt); margin: 0; line-height: 1.6; }

/* ---------- 04. Order journey flip cards (flagship, CSS-only 3D) ---------- */
.food__flip-section { background: var(--foodbg); }
.food__flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; perspective: 1400px; }
.food__flip { position: relative; height: 220px; border-radius: 16px; }
.food__flip:focus { outline: none; }
.food__flip-inner { position: relative; width: 100%; height: 100%; transition: transform .6s ease; transform-style: preserve-3d; }
.food__flip:hover .food__flip-inner,
.food__flip:focus-visible .food__flip-inner { transform: rotateY(180deg); }
.food__flip-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 16px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.food__flip-front { background: #fff; border: 1px solid var(--foodb); }
.food__flip-front i { font-size: 26px; color: var(--foodc); margin-bottom: 16px; }
.food__flip:nth-child(3n+2) .food__flip-front i { color: var(--foodc2); }
.food__flip:nth-child(3n) .food__flip-front i { color: var(--foodc3); }
.food__flip-front h3 { font-size: 19px; font-weight: 600; color: var(--foodh); margin: 0; }
.food__flip-front span { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 300; color: var(--foodt); }
.food__flip-back { background: linear-gradient(135deg, var(--foodc), var(--foodc2)); color: #fff; transform: rotateY(180deg); }
.food__flip-back p { font-size: 14px; font-weight: 300; line-height: 1.65; margin: 0; }
.food__flip-caption { text-align: center; margin-top: 24px; font-size: 13.5px; font-weight: 400; color: var(--foodt); }

/* ---------- 05. Capabilities (card grid) ---------- */
.food__cap { background: #fff; }
.food__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.food__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--foodb);
  border-radius: 18px;
  background: var(--foodbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.food__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--foodc), var(--foodc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.food__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--foodc2), #a79af5); }
.food__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--foodc3), #8fc4ff); }
.food__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.food__cap-card:hover::before { transform: scaleX(1); }
.food__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--foodc); font-size: 20px; margin-bottom: 22px; }
.food__cap-card:nth-child(3n+2) .food__cap-ico { background: rgba(128, 121, 248, .12); color: var(--foodc2); }
.food__cap-card:nth-child(3n) .food__cap-ico { background: rgba(77, 163, 255, .14); color: var(--foodc3); }
.food__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--foodh); margin: 0 0 12px; }
.food__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--foodt); margin: 0; }

/* ---------- 06. Constraints (definition list) ---------- */
.food__constraints { background: var(--foodbg); }
.food__dl { max-width: 900px; margin: 54px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.food__dl dt { font-size: 15px; font-weight: 600; color: var(--foodh); padding: 16px 0 4px; border-top: 1px solid var(--foodb); }
.food__dl dd { font-size: 13.5px; font-weight: 300; color: var(--foodt); margin: 0 0 6px; line-height: 1.6; }
.food__page .food__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (restaurant-menu list) ---------- */
.food__principles { background: #fff; }
.food__menu-list { max-width: 780px; margin: 56px auto 0; }
.food__menu-item { padding: 22px 0; border-bottom: 1px dashed var(--foodb); }
.food__menu-item:last-child { border-bottom: none; }
.food__menu-item-head { display: flex; align-items: baseline; gap: 12px; }
.food__menu-item-head h3 { font-size: 17px; font-weight: 600; color: var(--foodh); margin: 0; white-space: nowrap; }
.food__menu-item-head .food__leader { flex: 1; border-bottom: 2px dotted var(--foodb); height: 1px; align-self: center; }
.food__menu-item-head .food__tag { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--foodc); white-space: nowrap; }
.food__menu-item p { font-size: 14px; font-weight: 300; color: var(--foodt); margin: 8px 0 0; line-height: 1.65; }

/* ---------- 08. AI in food & beverage (dark icon row) ---------- */
.food__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--fooddark) 0%, #0b1c3d 100%); }
.food__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.food__ai > .container { position: relative; z-index: 1; }
.food__ai .food__eyebrow { color: var(--foodc3); }
.food__ai .food__title { color: #fff; }
.food__ai .food__lead { color: #dbe6f4; }
.food__ai .food__text { color: var(--foodmuted); }
.food__ai-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 46px; margin-top: 54px; }
.food__ai-item { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 260px; }
.food__ai-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--foodc3); font-size: 22px; margin-bottom: 18px; }
.food__ai-item h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.food__ai-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--foodmuted); margin: 0; }
.food__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--foodc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.food__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--foodmuted); margin: 0; }
.food__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (plain equal row) ---------- */
.food__foundation { background: #fff; }
.food__infra-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 58px; }
.food__infra-item { padding: 28px 24px; border: 1px solid var(--foodb); border-radius: 14px; text-align: center; transition: all .3s ease; }
.food__infra-item:hover { background: var(--foodbg); border-color: rgba(0, 95, 204, .25); }
.food__infra-item i { font-size: 20px; color: var(--foodc); margin-bottom: 14px; display: block; }
.food__infra-item:nth-child(3n+2) i { color: var(--foodc2); }
.food__infra-item:nth-child(3n) i { color: var(--foodc3); }
.food__infra-item h3 { font-size: 14.5px; font-weight: 600; color: var(--foodh); margin: 0 0 6px; }
.food__infra-item p { font-size: 12.5px; font-weight: 300; color: var(--foodt); margin: 0; line-height: 1.5; }

/* ---------- 10. Perspectives (bordered panels) ---------- */
.food__persp { background: var(--foodbg); }
.food__panel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.food__panel { padding: 38px 34px; border-radius: 18px; background: #fff; border: 1px solid var(--foodb); border-top: 3px solid var(--foodc); }
.food__panel:nth-child(2) { border-top-color: var(--foodc2); }
.food__panel:nth-child(3) { border-top-color: var(--foodc3); }
.food__panel h3 { font-size: 19px; font-weight: 600; color: var(--foodh); margin: 0 0 14px; }
.food__panel ul { list-style: none; margin: 0; padding: 0; }
.food__panel li { position: relative; padding: 8px 0 8px 22px; font-size: 14px; font-weight: 300; color: var(--foodt); line-height: 1.6; }
.food__panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 12px; color: var(--foodc); }
.food__panel:nth-child(2) li::before { color: var(--foodc2); }
.food__panel:nth-child(3) li::before { color: var(--foodc3); }

/* ---------- 11. Engagement model (pill-badge grid) ---------- */
.food__engage { background: #fff; }
.food__pill-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 58px; }
.food__pill-badge { display: inline-block; padding: 6px 16px; border-radius: 50px; background: var(--foodc); color: #fff; font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.food__pill-grid > div:nth-child(3n+2) .food__pill-badge { background: var(--foodc2); }
.food__pill-grid > div:nth-child(3n) .food__pill-badge { background: var(--foodc3); }
.food__pill-grid h3 { font-size: 15.5px; font-weight: 600; color: var(--foodh); margin: 0 0 6px; }
.food__pill-grid p { font-size: 13px; font-weight: 300; color: var(--foodt); margin: 0; line-height: 1.55; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.food__tech { background: var(--foodbg); }
.food__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.food__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--foodb);
  font-size: 14.5px; font-weight: 500; color: var(--foodh); transition: all .3s ease;
}
.food__tech-tags li:hover { border-color: var(--foodc); color: var(--foodc); transform: translateY(-3px); }
.food__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--foodb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.food__related span { font-size: 13.5px; font-weight: 500; color: var(--foodt); text-transform: uppercase; letter-spacing: 1.5px; }
.food__related a { font-size: 14.5px; font-weight: 500; color: var(--foodh); transition: color .25s ease; }
.food__related a:hover { color: var(--foodc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .food__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .food__page .food__title { font-size: 32px; }
  :where(.food__page) section { padding: 100px 0; }
  .food__hero { padding: 170px 0 100px; }
  .food__hero-title { font-size: 38px; }
  .food__hero-grid,
  .food__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .food__hero-figure { max-width: 480px; margin: 0 auto; }
  .food__hero-chip--1 { left: -14px; }
  .food__hero-chip--2 { right: -10px; }
  .food__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .food__flip-grid { grid-template-columns: repeat(2, 1fr); }
  .food__dl { grid-template-columns: 1fr; }
  .food__infra-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .food__pill-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}
@media only screen and (max-width: 991px) {
  .food__panel-row { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .food__page .food__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .food__page .food__title { font-size: 26px; }
  .food__page .food__lead { font-size: 16.5px; }
  :where(.food__page) section { padding: 76px 0; }
  .food__hero { padding: 140px 0 76px; }
  .food__hero-title { font-size: 29px; }
  .food__hero-lead { font-size: 16.5px; }
  .food__hero-chip { display: none; }
  .food__cap-grid { grid-template-columns: 1fr; }
  .food__flip-grid { grid-template-columns: 1fr; }
  .food__pill-grid { grid-template-columns: 1fr 1fr; }
  .food__menu-item-head { flex-wrap: wrap; }
  .food__menu-item-head .food__leader { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .food__page * { transition-duration: .01ms !important; }
  .food__hero-glow,
  .food__hero-chip,
  .food__marquee-track { animation: none; }
  .food__flip-inner { transition: none; }
}

/* ============================================================
   FITNESS & WELLNESS INDUSTRY PAGE (fitness-wellness.html)
   Scoped entirely to .fit__page. Twelfth sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is a row of SVG "activity ring" badges (stroke-dasharray progress
   rings, Apple-Watch-style) representing capability areas - purely
   decorative, no fabricated numbers. Nothing here leaks to other
   pages.
   ============================================================ */
.fit__page {
  --fitc: #005fcc;
  --fitc2: #8079f8;
  --fitc3: #4da3ff;
  --fith: #1c1e2b;
  --fitt: #6b7089;
  --fitb: #e9eaf5;
  --fitbg: #f6f7fc;
  --fitdark: #07152F;
  --fitmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.fit__page .fit__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--fitc);
  margin-bottom: 18px;
}
.fit__page .fit__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--fith); margin: 0 0 20px; }
.fit__page .fit__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--fith); margin: 0 0 18px; }
.fit__page .fit__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--fitt); margin: 0 0 16px; }
.fit__page .fit__text:last-child { margin-bottom: 0; }
.fit__page .fit__text a { color: var(--fitc); text-decoration: underline; text-underline-offset: 3px; }
.fit__page .fit__text a:hover { color: var(--fitc2); }
.fit__page .fit__head { max-width: 760px; }
.fit__page .fit__head--center { margin: 0 auto 0; text-align: center; }
:where(.fit__page) section { padding: 130px 0; }
.fit__page .fit__btn,
.fit__page .fit__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.fit__page .fit__btn { color: #fff; background: var(--fitc); border: 2px solid var(--fitc); }
.fit__page .fit__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.fit__page .fit__btn-outline { color: var(--fith); border: 2px solid var(--fitb); background: transparent; }
.fit__page .fit__btn-outline:hover { border-color: var(--fitc); color: var(--fitc); }
.fit__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.fit__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--fitmuted);
}
.fit__crumb a { color: var(--fitmuted); transition: color .25s ease; }
.fit__crumb a:hover { color: #fff; }
.fit__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.fit__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.fit__hero {
  position: relative;
  overflow: hidden;
  background: var(--fitdark);
  padding: 200px 0 120px;
}
.fit__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.fit__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.fit__hero > .container { position: relative; z-index: 2; }
.fit__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.fit__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--fitc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.fit__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.fit__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--fitc3), var(--fitc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fit__hero-title em div div { background: linear-gradient(90deg, var(--fitc3), var(--fitc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fit__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.fit__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--fitmuted); margin: 0 0 16px; }
.fit__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.fit__hero .fit__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.fit__hero .fit__btn-outline:hover { background: #fff; border-color: #fff; color: var(--fitdark); }
.fit__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fit__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.fit__hero-figure { position: relative; }
.fit__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: fitKfSpin 26s linear infinite;
}
.fit__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.fit__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes fitKfSpin { to { transform: rotate(360deg); } }
.fit__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: fitKfChip 6s ease-in-out infinite;
}
.fit__hero-chip i { color: var(--fitc3); font-size: 18px; }
.fit__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.fit__hero-chip span { font-size: 13px; font-weight: 300; color: var(--fitmuted); }
.fit__hero-chip--1 { left: -34px; top: 12%; }
.fit__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes fitKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.fit__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fit__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fit__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: fitKfMarquee 40s linear infinite; }
.fit__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.fit__marquee-track i { color: var(--fitc3); font-size: 8px; }
@keyframes fitKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.fit__intro { background: #fff; }
.fit__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.fit__quick { display: flex; flex-direction: column; gap: 16px; }
.fit__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--fitb); border-radius: 14px; background: var(--fitbg); }
.fit__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--fitc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.fit__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--fith); margin: 0 0 4px; }
.fit__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--fitt); margin: 0; line-height: 1.6; }

/* ---------- 04. Activity ring badges (flagship, SVG progress rings) ---------- */
.fit__rings-section { background: var(--fitbg); }
.fit__ring-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; margin-top: 58px; }
.fit__ring { position: relative; width: 160px; text-align: center; }
.fit__ring-svg { display: block; width: 140px; height: 140px; margin: 0 auto; transform: rotate(-90deg); }
.fit__ring-track { fill: none; stroke: var(--fitb); stroke-width: 10; }
.fit__ring-fill { fill: none; stroke: var(--fitc); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.fit__ring:nth-child(2) .fit__ring-fill { stroke: var(--fitc2); }
.fit__ring:nth-child(3) .fit__ring-fill { stroke: var(--fitc3); }
.fit__ring:nth-child(4) .fit__ring-fill { stroke: #4bb888; }
.fit__ring-ico {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  color: var(--fith);
}
.fit__ring h3 { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--fith); }

/* ---------- 05. Capabilities (card grid) ---------- */
.fit__cap { background: #fff; }
.fit__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.fit__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--fitb);
  border-radius: 18px;
  background: var(--fitbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.fit__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--fitc), var(--fitc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.fit__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--fitc2), #a79af5); }
.fit__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--fitc3), #8fc4ff); }
.fit__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.fit__cap-card:hover::before { transform: scaleX(1); }
.fit__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--fitc); font-size: 20px; margin-bottom: 22px; }
.fit__cap-card:nth-child(3n+2) .fit__cap-ico { background: rgba(128, 121, 248, .12); color: var(--fitc2); }
.fit__cap-card:nth-child(3n) .fit__cap-ico { background: rgba(77, 163, 255, .14); color: var(--fitc3); }
.fit__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--fith); margin: 0 0 12px; }
.fit__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--fitt); margin: 0; }

/* ---------- 06. Constraints (chip wall) ---------- */
.fit__constraints { background: var(--fitbg); }
.fit__chip-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 54px; }
.fit__chip { padding: 13px 22px; border-radius: 50px; background: #fff; border: 1px solid var(--fitb); font-size: 14.5px; font-weight: 500; color: var(--fith); transition: all .3s ease; }
.fit__chip:hover { border-color: var(--fitc); color: var(--fitc); transform: translateY(-3px); }
.fit__page .fit__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (filled circle badges) ---------- */
.fit__principles { background: #fff; }
.fit__badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 58px; }
.fit__badge { width: 190px; text-align: center; }
.fit__badge-ico { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--fitc); color: #fff; font-size: 24px; margin-bottom: 18px; }
.fit__badge:nth-child(3n+2) .fit__badge-ico { background: var(--fitc2); }
.fit__badge:nth-child(3n) .fit__badge-ico { background: var(--fitc3); }
.fit__badge h3 { font-size: 15px; font-weight: 600; color: var(--fith); margin: 0 0 8px; }
.fit__badge p { font-size: 12.5px; font-weight: 300; color: var(--fitt); margin: 0; line-height: 1.55; }

/* ---------- 08. AI in fitness & wellness (dark icon row) ---------- */
.fit__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--fitdark) 0%, #0b1c3d 100%); }
.fit__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.fit__ai > .container { position: relative; z-index: 1; }
.fit__ai .fit__eyebrow { color: var(--fitc3); }
.fit__ai .fit__title { color: #fff; }
.fit__ai .fit__lead { color: #dbe6f4; }
.fit__ai .fit__text { color: var(--fitmuted); }
.fit__ai-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 46px; margin-top: 54px; }
.fit__ai-item { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 260px; }
.fit__ai-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--fitc3); font-size: 22px; margin-bottom: 18px; }
.fit__ai-item h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.fit__ai-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--fitmuted); margin: 0; }
.fit__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--fitc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.fit__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--fitmuted); margin: 0; }
.fit__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (plain equal row) ---------- */
.fit__foundation { background: #fff; }
.fit__infra-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 58px; }
.fit__infra-item { padding: 28px 24px; border: 1px solid var(--fitb); border-radius: 14px; text-align: center; transition: all .3s ease; }
.fit__infra-item:hover { background: var(--fitbg); border-color: rgba(0, 95, 204, .25); }
.fit__infra-item i { font-size: 20px; color: var(--fitc); margin-bottom: 14px; display: block; }
.fit__infra-item:nth-child(3n+2) i { color: var(--fitc2); }
.fit__infra-item:nth-child(3n) i { color: var(--fitc3); }
.fit__infra-item h3 { font-size: 14.5px; font-weight: 600; color: var(--fith); margin: 0 0 6px; }
.fit__infra-item p { font-size: 12.5px; font-weight: 300; color: var(--fitt); margin: 0; line-height: 1.5; }

/* ---------- 10. Perspectives (bordered panels) ---------- */
.fit__persp { background: var(--fitbg); }
.fit__panel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.fit__panel { padding: 38px 34px; border-radius: 18px; background: #fff; border: 1px solid var(--fitb); border-top: 3px solid var(--fitc); }
.fit__panel:nth-child(2) { border-top-color: var(--fitc2); }
.fit__panel:nth-child(3) { border-top-color: var(--fitc3); }
.fit__panel h3 { font-size: 19px; font-weight: 600; color: var(--fith); margin: 0 0 14px; }
.fit__panel ul { list-style: none; margin: 0; padding: 0; }
.fit__panel li { position: relative; padding: 8px 0 8px 22px; font-size: 14px; font-weight: 300; color: var(--fitt); line-height: 1.6; }
.fit__panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 12px; color: var(--fitc); }
.fit__panel:nth-child(2) li::before { color: var(--fitc2); }
.fit__panel:nth-child(3) li::before { color: var(--fitc3); }

/* ---------- 11. Engagement model (numbered list rows) ---------- */
.fit__engage { background: #fff; }
.fit__list-rows { max-width: 780px; margin: 58px auto 0; }
.fit__list-row { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--fitb); }
.fit__list-row:last-child { border-bottom: none; }
.fit__list-num { font-size: 15px; font-weight: 700; color: var(--fitc); flex-shrink: 0; width: 26px; }
.fit__list-row h3 { display: inline; font-size: 16px; font-weight: 600; color: var(--fith); margin: 0; }
.fit__list-row p { display: inline; font-size: 14.5px; font-weight: 300; color: var(--fitt); margin: 0 0 0 8px; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.fit__tech { background: var(--fitbg); }
.fit__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.fit__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--fitb);
  font-size: 14.5px; font-weight: 500; color: var(--fith); transition: all .3s ease;
}
.fit__tech-tags li:hover { border-color: var(--fitc); color: var(--fitc); transform: translateY(-3px); }
.fit__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--fitb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.fit__related span { font-size: 13.5px; font-weight: 500; color: var(--fitt); text-transform: uppercase; letter-spacing: 1.5px; }
.fit__related a { font-size: 14.5px; font-weight: 500; color: var(--fith); transition: color .25s ease; }
.fit__related a:hover { color: var(--fitc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .fit__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .fit__page .fit__title { font-size: 32px; }
  :where(.fit__page) section { padding: 100px 0; }
  .fit__hero { padding: 170px 0 100px; }
  .fit__hero-title { font-size: 38px; }
  .fit__hero-grid,
  .fit__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .fit__hero-figure { max-width: 480px; margin: 0 auto; }
  .fit__hero-chip--1 { left: -14px; }
  .fit__hero-chip--2 { right: -10px; }
  .fit__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .fit__infra-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}
@media only screen and (max-width: 991px) {
  .fit__panel-row { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .fit__page .fit__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .fit__page .fit__title { font-size: 26px; }
  .fit__page .fit__lead { font-size: 16.5px; }
  :where(.fit__page) section { padding: 76px 0; }
  .fit__hero { padding: 140px 0 76px; }
  .fit__hero-title { font-size: 29px; }
  .fit__hero-lead { font-size: 16.5px; }
  .fit__hero-chip { display: none; }
  .fit__cap-grid { grid-template-columns: 1fr; }
  .fit__ring-row { gap: 30px; }
  .fit__list-row { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .fit__page * { transition-duration: .01ms !important; }
  .fit__hero-glow,
  .fit__hero-chip,
  .fit__marquee-track { animation: none; }
}

/* ============================================================
   MARKETPLACES & PLATFORMS INDUSTRY PAGE
   (marketplaces-platforms.html)
   Scoped entirely to .mkt__page. Thirteenth sibling in the Industries
   family - framed-card hero grammar (image right). Flagship section
   is a two-sided convergence diagram: a supply column and a demand
   column with connector lines meeting at a central "Platform" node.
   Nothing here leaks to other pages.
   ============================================================ */
.mkt__page {
  --mktc: #005fcc;
  --mktc2: #8079f8;
  --mktc3: #4da3ff;
  --mkth: #1c1e2b;
  --mktt: #6b7089;
  --mktb: #e9eaf5;
  --mktbg: #f6f7fc;
  --mktdark: #07152F;
  --mktmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.mkt__page .mkt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--mktc);
  margin-bottom: 18px;
}
.mkt__page .mkt__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--mkth); margin: 0 0 20px; }
.mkt__page .mkt__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--mkth); margin: 0 0 18px; }
.mkt__page .mkt__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mktt); margin: 0 0 16px; }
.mkt__page .mkt__text:last-child { margin-bottom: 0; }
.mkt__page .mkt__text a { color: var(--mktc); text-decoration: underline; text-underline-offset: 3px; }
.mkt__page .mkt__text a:hover { color: var(--mktc2); }
.mkt__page .mkt__head { max-width: 760px; }
.mkt__page .mkt__head--center { margin: 0 auto 0; text-align: center; }
:where(.mkt__page) section { padding: 130px 0; }
.mkt__page .mkt__btn,
.mkt__page .mkt__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.mkt__page .mkt__btn { color: #fff; background: var(--mktc); border: 2px solid var(--mktc); }
.mkt__page .mkt__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.mkt__page .mkt__btn-outline { color: var(--mkth); border: 2px solid var(--mktb); background: transparent; }
.mkt__page .mkt__btn-outline:hover { border-color: var(--mktc); color: var(--mktc); }
.mkt__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.mkt__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--mktmuted);
}
.mkt__crumb a { color: var(--mktmuted); transition: color .25s ease; }
.mkt__crumb a:hover { color: #fff; }
.mkt__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.mkt__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.mkt__hero {
  position: relative;
  overflow: hidden;
  background: var(--mktdark);
  padding: 200px 0 120px;
}
.mkt__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.mkt__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.mkt__hero > .container { position: relative; z-index: 2; }
.mkt__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.mkt__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--mktc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.mkt__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.mkt__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--mktc3), var(--mktc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mkt__hero-title em div div { background: linear-gradient(90deg, var(--mktc3), var(--mktc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mkt__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.mkt__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mktmuted); margin: 0 0 16px; }
.mkt__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.mkt__hero .mkt__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.mkt__hero .mkt__btn-outline:hover { background: #fff; border-color: #fff; color: var(--mktdark); }
.mkt__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mkt__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.mkt__hero-figure { position: relative; }
.mkt__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: mktKfSpin 26s linear infinite;
}
.mkt__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.mkt__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes mktKfSpin { to { transform: rotate(360deg); } }
.mkt__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: mktKfChip 6s ease-in-out infinite;
}
.mkt__hero-chip i { color: var(--mktc3); font-size: 18px; }
.mkt__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.mkt__hero-chip span { font-size: 13px; font-weight: 300; color: var(--mktmuted); }
.mkt__hero-chip--1 { left: -34px; top: 12%; }
.mkt__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes mktKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.mkt__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mkt__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mkt__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: mktKfMarquee 40s linear infinite; }
.mkt__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.mkt__marquee-track i { color: var(--mktc3); font-size: 8px; }
@keyframes mktKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.mkt__intro { background: #fff; }
.mkt__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.mkt__quick { display: flex; flex-direction: column; gap: 16px; }
.mkt__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--mktb); border-radius: 14px; background: var(--mktbg); }
.mkt__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--mktc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.mkt__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--mkth); margin: 0 0 4px; }
.mkt__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--mktt); margin: 0; line-height: 1.6; }

/* ---------- 04. Two-sided convergence (flagship) ---------- */
.mkt__match-section { background: var(--mktbg); }
.mkt__match { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; margin-top: 58px; }
.mkt__match::before,
.mkt__match::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
}
.mkt__match::before { left: 0; width: calc(33% - 40px); background: linear-gradient(90deg, transparent, var(--mktc)); }
.mkt__match::after { right: 0; width: calc(33% - 40px); background: linear-gradient(90deg, var(--mktc2), transparent); }
.mkt__side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.mkt__side--supply { align-items: flex-end; }
.mkt__side--demand { align-items: flex-start; }
.mkt__side-label { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--mktt); margin-bottom: 4px; }
.mkt__side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--mktb);
  border-radius: 12px;
  background: #fff;
  width: 100%;
  max-width: 250px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mkth);
}
.mkt__side--supply .mkt__side-item { flex-direction: row-reverse; text-align: right; }
.mkt__side-item i { color: var(--mktc); flex-shrink: 0; }
.mkt__side--demand .mkt__side-item i { color: var(--mktc2); }
.mkt__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mkt__center-node {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mktc), var(--mktc2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 600; text-align: center;
  box-shadow: 0 20px 44px rgba(0, 95, 204, .25);
  padding: 10px;
}

/* ---------- 05. Capabilities (card grid) ---------- */
.mkt__cap { background: #fff; }
.mkt__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.mkt__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--mktb);
  border-radius: 18px;
  background: var(--mktbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.mkt__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--mktc), var(--mktc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.mkt__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--mktc2), #a79af5); }
.mkt__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--mktc3), #8fc4ff); }
.mkt__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.mkt__cap-card:hover::before { transform: scaleX(1); }
.mkt__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--mktc); font-size: 20px; margin-bottom: 22px; }
.mkt__cap-card:nth-child(3n+2) .mkt__cap-ico { background: rgba(128, 121, 248, .12); color: var(--mktc2); }
.mkt__cap-card:nth-child(3n) .mkt__cap-ico { background: rgba(77, 163, 255, .14); color: var(--mktc3); }
.mkt__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--mkth); margin: 0 0 12px; }
.mkt__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--mktt); margin: 0; }

/* ---------- 06. Constraints (checklist card) ---------- */
.mkt__constraints { background: var(--mktbg); }
.mkt__checklist { max-width: 980px; margin: 54px auto 0; padding: 46px 50px; border: 1px solid var(--mktb); border-radius: 20px; background: #fff; }
.mkt__checklist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.mkt__checklist li { position: relative; padding: 0 0 0 30px; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--mkth); }
.mkt__checklist li::before { content: "\f0eb"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; position: absolute; left: 0; top: 1px; color: var(--mktc); }
.mkt__page .mkt__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (zebra list) ---------- */
.mkt__principles { background: #fff; }
.mkt__zebra { max-width: 900px; margin: 56px auto 0; border: 1px solid var(--mktb); border-radius: 16px; overflow: hidden; }
.mkt__zebra-row { display: flex; align-items: center; gap: 20px; padding: 24px 28px; }
.mkt__zebra-row:nth-child(even) { background: var(--mktbg); }
.mkt__zebra-row i { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--mktc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.mkt__zebra-row h3 { font-size: 16.5px; font-weight: 600; color: var(--mkth); margin: 0 0 4px; display: inline; }
.mkt__zebra-row p { font-size: 14px; font-weight: 300; color: var(--mktt); margin: 4px 0 0; line-height: 1.6; }

/* ---------- 08. AI in marketplaces (dark icon row) ---------- */
.mkt__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--mktdark) 0%, #0b1c3d 100%); }
.mkt__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.mkt__ai > .container { position: relative; z-index: 1; }
.mkt__ai .mkt__eyebrow { color: var(--mktc3); }
.mkt__ai .mkt__title { color: #fff; }
.mkt__ai .mkt__lead { color: #dbe6f4; }
.mkt__ai .mkt__text { color: var(--mktmuted); }
.mkt__ai-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 46px; margin-top: 54px; }
.mkt__ai-item { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 260px; }
.mkt__ai-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--mktc3); font-size: 22px; margin-bottom: 18px; }
.mkt__ai-item h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.mkt__ai-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--mktmuted); margin: 0; }
.mkt__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--mktc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.mkt__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--mktmuted); margin: 0; }
.mkt__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (plain equal row) ---------- */
.mkt__foundation { background: #fff; }
.mkt__infra-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 58px; }
.mkt__infra-item { padding: 28px 24px; border: 1px solid var(--mktb); border-radius: 14px; text-align: center; transition: all .3s ease; }
.mkt__infra-item:hover { background: var(--mktbg); border-color: rgba(0, 95, 204, .25); }
.mkt__infra-item i { font-size: 20px; color: var(--mktc); margin-bottom: 14px; display: block; }
.mkt__infra-item:nth-child(3n+2) i { color: var(--mktc2); }
.mkt__infra-item:nth-child(3n) i { color: var(--mktc3); }
.mkt__infra-item h3 { font-size: 14.5px; font-weight: 600; color: var(--mkth); margin: 0 0 6px; }
.mkt__infra-item p { font-size: 12.5px; font-weight: 300; color: var(--mktt); margin: 0; line-height: 1.5; }

/* ---------- 10. Perspectives (bordered panels) ---------- */
.mkt__persp { background: var(--mktbg); }
.mkt__panel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.mkt__panel { padding: 38px 34px; border-radius: 18px; background: #fff; border: 1px solid var(--mktb); border-top: 3px solid var(--mktc); }
.mkt__panel:nth-child(2) { border-top-color: var(--mktc2); }
.mkt__panel:nth-child(3) { border-top-color: var(--mktc3); }
.mkt__panel h3 { font-size: 19px; font-weight: 600; color: var(--mkth); margin: 0 0 14px; }
.mkt__panel ul { list-style: none; margin: 0; padding: 0; }
.mkt__panel li { position: relative; padding: 8px 0 8px 22px; font-size: 14px; font-weight: 300; color: var(--mktt); line-height: 1.6; }
.mkt__panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 12px; color: var(--mktc); }
.mkt__panel:nth-child(2) li::before { color: var(--mktc2); }
.mkt__panel:nth-child(3) li::before { color: var(--mktc3); }

/* ---------- 11. Engagement model (underlined plain grid) ---------- */
.mkt__engage { background: #fff; }
.mkt__underline-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 58px; }
.mkt__underline-grid > div { padding-top: 14px; border-top: 3px solid var(--mktc); }
.mkt__underline-grid > div:nth-child(3n+2) { border-top-color: var(--mktc2); }
.mkt__underline-grid > div:nth-child(3n) { border-top-color: var(--mktc3); }
.mkt__underline-grid h3 { font-size: 16px; font-weight: 600; color: var(--mkth); margin: 0 0 8px; }
.mkt__underline-grid p { font-size: 13.5px; font-weight: 300; color: var(--mktt); margin: 0; line-height: 1.6; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.mkt__tech { background: var(--mktbg); }
.mkt__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.mkt__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--mktb);
  font-size: 14.5px; font-weight: 500; color: var(--mkth); transition: all .3s ease;
}
.mkt__tech-tags li:hover { border-color: var(--mktc); color: var(--mktc); transform: translateY(-3px); }
.mkt__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--mktb); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.mkt__related span { font-size: 13.5px; font-weight: 500; color: var(--mktt); text-transform: uppercase; letter-spacing: 1.5px; }
.mkt__related a { font-size: 14.5px; font-weight: 500; color: var(--mkth); transition: color .25s ease; }
.mkt__related a:hover { color: var(--mktc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mkt__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .mkt__page .mkt__title { font-size: 32px; }
  :where(.mkt__page) section { padding: 100px 0; }
  .mkt__hero { padding: 170px 0 100px; }
  .mkt__hero-title { font-size: 38px; }
  .mkt__hero-grid,
  .mkt__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .mkt__hero-figure { max-width: 480px; margin: 0 auto; }
  .mkt__hero-chip--1 { left: -14px; }
  .mkt__hero-chip--2 { right: -10px; }
  .mkt__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .mkt__infra-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .mkt__underline-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}
@media only screen and (max-width: 991px) {
  .mkt__match { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .mkt__match::before, .mkt__match::after { display: none; }
  .mkt__side--supply, .mkt__side--demand { align-items: center; }
  .mkt__side--supply .mkt__side-item { flex-direction: row; text-align: left; }
  .mkt__checklist ul { grid-template-columns: 1fr; }
  .mkt__panel-row { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .mkt__page .mkt__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .mkt__page .mkt__title { font-size: 26px; }
  .mkt__page .mkt__lead { font-size: 16.5px; }
  :where(.mkt__page) section { padding: 76px 0; }
  .mkt__hero { padding: 140px 0 76px; }
  .mkt__hero-title { font-size: 29px; }
  .mkt__hero-lead { font-size: 16.5px; }
  .mkt__hero-chip { display: none; }
  .mkt__cap-grid { grid-template-columns: 1fr; }
  .mkt__underline-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt__page * { transition-duration: .01ms !important; }
  .mkt__hero-glow,
  .mkt__hero-chip,
  .mkt__marquee-track { animation: none; }
}

/* ============================================================
   STARTUPS INDUSTRY PAGE (startups.html)
   Scoped entirely to .su__page. Fourteenth and final sibling in the
   Industries family - framed-card hero grammar (image right).
   Flagship section is an ascending "growth trajectory" staircase: four
   stage cards with increasing bottom margin so they climb visually
   left to right, evoking upward growth without a literal chart.
   Nothing here leaks to other pages.
   ============================================================ */
.su__page {
  --suc: #005fcc;
  --suc2: #8079f8;
  --suc3: #4da3ff;
  --suh: #1c1e2b;
  --sut: #6b7089;
  --sub: #e9eaf5;
  --subg: #f6f7fc;
  --sudark: #07152F;
  --sumuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.su__page .su__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--suc);
  margin-bottom: 18px;
}
.su__page .su__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--suh); margin: 0 0 20px; }
.su__page .su__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--suh); margin: 0 0 18px; }
.su__page .su__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--sut); margin: 0 0 16px; }
.su__page .su__text:last-child { margin-bottom: 0; }
.su__page .su__text a { color: var(--suc); text-decoration: underline; text-underline-offset: 3px; }
.su__page .su__text a:hover { color: var(--suc2); }
.su__page .su__head { max-width: 760px; }
.su__page .su__head--center { margin: 0 auto 0; text-align: center; }
:where(.su__page) section { padding: 130px 0; }
.su__page .su__btn,
.su__page .su__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15.5px;
  font-weight: 500;
  transition: all .3s ease;
}
.su__page .su__btn { color: #fff; background: var(--suc); border: 2px solid var(--suc); }
.su__page .su__btn:hover { background: #0047a3; border-color: #0047a3; color: #fff; }
.su__page .su__btn-outline { color: var(--suh); border: 2px solid var(--sub); background: transparent; }
.su__page .su__btn-outline:hover { border-color: var(--suc); color: var(--suc); }
.su__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 01. Breadcrumb ---------- */
.su__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--sumuted);
}
.su__crumb a { color: var(--sumuted); transition: color .25s ease; }
.su__crumb a:hover { color: #fff; }
.su__crumb i { font-size: 9px; color: rgba(255, 255, 255, .3); }
.su__crumb span[aria-current] { color: #fff; font-weight: 500; }

/* ---------- 02. Hero (framed card, image right) ---------- */
.su__hero {
  position: relative;
  overflow: hidden;
  background: var(--sudark);
  padding: 200px 0 120px;
}
.su__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.su__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.su__hero > .container { position: relative; z-index: 2; }
.su__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.su__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--suc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.su__hero-title { font-size: 50px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 22px; }
.su__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--suc3), var(--suc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.su__hero-title em div div { background: linear-gradient(90deg, var(--suc3), var(--suc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.su__hero-lead { font-size: 18.5px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 18px; }
.su__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--sumuted); margin: 0 0 16px; }
.su__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.su__hero .su__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .28); }
.su__hero .su__btn-outline:hover { background: #fff; border-color: #fff; color: var(--sudark); }
.su__hero-pills { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.su__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}
.su__hero-figure { position: relative; }
.su__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: suKfSpin 26s linear infinite;
}
.su__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.su__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes suKfSpin { to { transform: rotate(360deg); } }
.su__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: suKfChip 6s ease-in-out infinite;
}
.su__hero-chip i { color: var(--suc3); font-size: 18px; }
.su__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.su__hero-chip span { font-size: 13px; font-weight: 300; color: var(--sumuted); }
.su__hero-chip--1 { left: -34px; top: 12%; }
.su__hero-chip--2 { right: -28px; bottom: 10%; animation-delay: 3s; }
@keyframes suKfChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02b. Keyword marquee ---------- */
.su__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.su__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.su__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: suKfMarquee 40s linear infinite; }
.su__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.su__marquee-track i { color: var(--suc3); font-size: 8px; }
@keyframes suKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Introduction ---------- */
.su__intro { background: #fff; }
.su__intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.su__quick { display: flex; flex-direction: column; gap: 16px; }
.su__quick-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--sub); border-radius: 14px; background: var(--subg); }
.su__quick-item i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 95, 204, .1); color: var(--suc); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.su__quick-item h4 { font-size: 15.5px; font-weight: 600; color: var(--suh); margin: 0 0 4px; }
.su__quick-item p { font-size: 13.5px; font-weight: 300; color: var(--sut); margin: 0; line-height: 1.6; }

/* ---------- 04. Growth trajectory staircase (flagship) ---------- */
.su__stairs-section { background: var(--subg); overflow: hidden; }
.su__stairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: end; margin-top: 90px; }
.su__stair-card {
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid var(--sub);
  background: #fff;
  box-shadow: 0 14px 30px rgba(28, 30, 43, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.su__stair-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(28, 30, 43, .13); }
.su__stair-card:nth-child(1) { margin-bottom: 0; }
.su__stair-card:nth-child(2) { margin-bottom: 60px; }
.su__stair-card:nth-child(3) { margin-bottom: 120px; }
.su__stair-card:nth-child(4) { margin-bottom: 180px; }
.su__stair-num { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: rgba(0, 95, 204, .4); margin-bottom: 14px; }
.su__stair-card:nth-child(2) .su__stair-num { color: rgba(128, 121, 248, .5); }
.su__stair-card:nth-child(3) .su__stair-num { color: rgba(77, 163, 255, .55); }
.su__stair-card:nth-child(4) .su__stair-num { color: #4bb888; }
.su__stair-card i { display: block; font-size: 22px; color: var(--suc); margin-bottom: 16px; }
.su__stair-card:nth-child(2) i { color: var(--suc2); }
.su__stair-card:nth-child(3) i { color: var(--suc3); }
.su__stair-card:nth-child(4) i { color: #4bb888; }
.su__stair-card h3 { font-size: 17px; font-weight: 600; color: var(--suh); margin: 0 0 8px; }
.su__stair-card p { font-size: 13px; font-weight: 300; color: var(--sut); margin: 0; line-height: 1.6; }

/* ---------- 05. Capabilities (card grid) ---------- */
.su__cap { background: #fff; }
.su__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 58px; }
.su__cap-card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--sub);
  border-radius: 18px;
  background: var(--subg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.su__cap-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--suc), var(--suc3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.su__cap-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--suc2), #a79af5); }
.su__cap-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--suc3), #8fc4ff); }
.su__cap-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.su__cap-card:hover::before { transform: scaleX(1); }
.su__cap-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 95, 204, .1); color: var(--suc); font-size: 20px; margin-bottom: 22px; }
.su__cap-card:nth-child(3n+2) .su__cap-ico { background: rgba(128, 121, 248, .12); color: var(--suc2); }
.su__cap-card:nth-child(3n) .su__cap-ico { background: rgba(77, 163, 255, .14); color: var(--suc3); }
.su__cap-card h3 { font-size: 20px; font-weight: 600; color: var(--suh); margin: 0 0 12px; }
.su__cap-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--sut); margin: 0; }

/* ---------- 06. Constraints (tag cloud) ---------- */
.su__constraints { background: var(--subg); }
.su__cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 54px; max-width: 980px; margin-left: auto; margin-right: auto; }
.su__cloud span {
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--sub);
  background: #fff;
  color: var(--suh);
  font-weight: 500;
  transition: all .3s ease;
}
.su__cloud span:hover { border-color: var(--suc); color: var(--suc); transform: translateY(-3px); }
.su__cloud span:nth-child(4n+1) { font-size: 18px; }
.su__cloud span:nth-child(4n+2) { font-size: 14.5px; }
.su__cloud span:nth-child(4n+3) { font-size: 21px; }
.su__cloud span:nth-child(4n) { font-size: 15.5px; }
.su__page .su__constraints-note { max-width: 780px; margin: 40px auto 0; text-align: center; }

/* ---------- 07. How We Think (minimal icon + heading pairs) ---------- */
.su__principles { background: #fff; }
.su__minimal-list { max-width: 760px; margin: 56px auto 0; }
.su__minimal-item { display: flex; gap: 22px; align-items: flex-start; padding: 26px 0; border-bottom: 1px dotted var(--sub); }
.su__minimal-item:last-child { border-bottom: none; }
.su__minimal-item i { flex-shrink: 0; font-size: 20px; color: var(--suc); width: 32px; text-align: center; margin-top: 3px; }
.su__minimal-item h3 { font-size: 18px; font-weight: 600; color: var(--suh); margin: 0 0 6px; }
.su__minimal-item p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--sut); margin: 0; }

/* ---------- 08. AI for startups (dark icon row) ---------- */
.su__ai { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--sudark) 0%, #0b1c3d 100%); }
.su__ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(780px 460px at 92% -10%, rgba(128, 121, 248, .26), transparent 62%),
              radial-gradient(700px 420px at 2% 108%, rgba(0, 95, 204, .3), transparent 64%);
}
.su__ai > .container { position: relative; z-index: 1; }
.su__ai .su__eyebrow { color: var(--suc3); }
.su__ai .su__title { color: #fff; }
.su__ai .su__lead { color: #dbe6f4; }
.su__ai .su__text { color: var(--sumuted); }
.su__ai-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 46px; margin-top: 54px; }
.su__ai-item { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 260px; }
.su__ai-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: var(--suc3); font-size: 22px; margin-bottom: 18px; }
.su__ai-item h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.su__ai-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--sumuted); margin: 0; }
.su__note {
  margin: 40px auto 0;
  max-width: 780px;
  padding: 22px 26px;
  border-left: 3px solid var(--suc3);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .05);
}
.su__note p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--sumuted); margin: 0; }
.su__note strong { color: #fff; font-weight: 500; }

/* ---------- 09. Data & infrastructure (plain equal row) ---------- */
.su__foundation { background: #fff; }
.su__infra-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 58px; }
.su__infra-item { padding: 28px 24px; border: 1px solid var(--sub); border-radius: 14px; text-align: center; transition: all .3s ease; }
.su__infra-item:hover { background: var(--subg); border-color: rgba(0, 95, 204, .25); }
.su__infra-item i { font-size: 20px; color: var(--suc); margin-bottom: 14px; display: block; }
.su__infra-item:nth-child(3n+2) i { color: var(--suc2); }
.su__infra-item:nth-child(3n) i { color: var(--suc3); }
.su__infra-item h3 { font-size: 14.5px; font-weight: 600; color: var(--suh); margin: 0 0 6px; }
.su__infra-item p { font-size: 12.5px; font-weight: 300; color: var(--sut); margin: 0; line-height: 1.5; }

/* ---------- 10. Perspectives (bordered panels) ---------- */
.su__persp { background: var(--subg); }
.su__panel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 58px; }
.su__panel { padding: 38px 34px; border-radius: 18px; background: #fff; border: 1px solid var(--sub); border-top: 3px solid var(--suc); }
.su__panel:nth-child(2) { border-top-color: var(--suc2); }
.su__panel:nth-child(3) { border-top-color: var(--suc3); }
.su__panel h3 { font-size: 19px; font-weight: 600; color: var(--suh); margin: 0 0 14px; }
.su__panel ul { list-style: none; margin: 0; padding: 0; }
.su__panel li { position: relative; padding: 8px 0 8px 22px; font-size: 14px; font-weight: 300; color: var(--sut); line-height: 1.6; }
.su__panel li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: absolute; left: 0; top: 12px; color: var(--suc); }
.su__panel:nth-child(2) li::before { color: var(--suc2); }
.su__panel:nth-child(3) li::before { color: var(--suc3); }

/* ---------- 11. Engagement model (typographic process sentence) ---------- */
.su__engage { background: #fff; text-align: center; }
.su__sentence { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 12px; margin-top: 50px; font-size: 24px; font-weight: 300; color: var(--sut); }
.su__sentence strong { font-weight: 600; color: var(--suh); }
.su__sentence i { color: var(--sub); font-size: 16px; }
.su__page .su__sentence-note { max-width: 640px; margin: 30px auto 0; }

/* ---------- 12. Technology ecosystem + related links ---------- */
.su__tech { background: var(--subg); }
.su__tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 50px; }
.su__tech-tags li {
  padding: 13px 24px; border-radius: 50px; background: #fff; border: 1px solid var(--sub);
  font-size: 14.5px; font-weight: 500; color: var(--suh); transition: all .3s ease;
}
.su__tech-tags li:hover { border-color: var(--suc); color: var(--suc); transform: translateY(-3px); }
.su__related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--sub); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.su__related span { font-size: 13.5px; font-weight: 500; color: var(--sut); text-transform: uppercase; letter-spacing: 1.5px; }
.su__related a { font-size: 14.5px; font-weight: 500; color: var(--suh); transition: color .25s ease; }
.su__related a:hover { color: var(--suc); }

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .su__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .su__page .su__title { font-size: 32px; }
  :where(.su__page) section { padding: 100px 0; }
  .su__hero { padding: 170px 0 100px; }
  .su__hero-title { font-size: 38px; }
  .su__hero-grid,
  .su__intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .su__hero-figure { max-width: 480px; margin: 0 auto; }
  .su__hero-chip--1 { left: -14px; }
  .su__hero-chip--2 { right: -10px; }
  .su__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .su__infra-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .su__stairs { grid-template-columns: repeat(2, 1fr); }
  .su__stair-card:nth-child(1), .su__stair-card:nth-child(2) { margin-bottom: 0; }
  .su__stair-card:nth-child(3), .su__stair-card:nth-child(4) { margin-bottom: 0; margin-top: 20px; }
  .su__sentence { font-size: 20px; }
}
@media only screen and (max-width: 991px) {
  .su__panel-row { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .su__page .su__eyebrow { letter-spacing: 2.5px; font-size: 12.5px; }
  .su__page .su__title { font-size: 26px; }
  .su__page .su__lead { font-size: 16.5px; }
  :where(.su__page) section { padding: 76px 0; }
  .su__hero { padding: 140px 0 76px; }
  .su__hero-title { font-size: 29px; }
  .su__hero-lead { font-size: 16.5px; }
  .su__hero-chip { display: none; }
  .su__cap-grid { grid-template-columns: 1fr; }
  .su__stairs { grid-template-columns: 1fr; }
  .su__stair-card:nth-child(n) { margin: 0; }
  .su__sentence { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .su__page * { transition-duration: .01ms !important; }
  .su__hero-glow,
  .su__hero-chip,
  .su__marquee-track { animation: none; }
}


/* ===== TECHNOLOGIES PAGE (tech__*) ===== */
.tech__page {
  --tc: #005fcc;
  --tc2: #8079f8;
  --tc3: #4da3ff;
  --th: #1c1e2b;
  --tt: #6b7089;
  --tb: #e9eaf5;
  --tbg: #f6f7fc;
  --tdark: #07152F;
  --tmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.tech__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.tech__page .tech__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tc);
  margin-bottom: 18px;
}
.tech__page .tech__title { font-size: 42px; line-height: 1.2; font-weight: 600; color: var(--th); margin: 0 0 20px; }
.tech__page .tech__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--tt); margin: 0 0 16px; }
.tech__page .tech__text:last-child { margin-bottom: 0; }
.tech__page .tech__text a { color: var(--tc); text-decoration: underline; text-underline-offset: 3px; }
.tech__page .tech__text a:hover { color: var(--tc2); }
.tech__page .tech__head { max-width: 760px; }
.tech__page .tech__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Page opener (bespoke .tech__hero "console" panel - a
   dark code-editor mockup standing in for the generic .development__area
   layout the other hub pages started from. Same ring-overflow fix as
   Solutions/Services/Industries below still applies to .tech__header. ---------- */
.tech__header .menu-icon-2::after { display: none; }
/* Same ring-overflow fix as Solutions/Services/Industries/Technologies,
   applied to the two article pages - the grid-menu button's 180px decorative
   ring (.menu-icon-2::after) pokes out past the header as a stray circle in
   the top-right corner on these pages' white content background. */
.aibiz__header .menu-icon-2::after { display: none; }
.saasg__header .menu-icon-2::after { display: none; }

.tech__hero {
  position: relative;
  overflow: hidden;
  padding: 160px 0 110px;
  background: linear-gradient(180deg, #fff 0%, var(--tbg) 100%);
}
.tech__hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 95, 204, .16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 82% 35%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 82% 35%, #000 0%, transparent 72%);
}
.tech__hero > .container { position: relative; z-index: 1; }
.tech__hero-copy { max-width: 540px; }
.tech__hero-title { font-size: 46px; line-height: 1.16; font-weight: 600; color: var(--th); margin: 0 0 20px; }
.tech__hero-copy .tech__lead { font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--th); margin: 0 0 16px; }
.tech__hero-copy .tech__text { margin-bottom: 26px; }
.tech__hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--tc);
  text-decoration: none;
  transition: gap .3s ease, color .3s ease;
}
.tech__hero-link i { font-size: 12px; transition: transform .3s ease; }
.tech__hero-link:hover { color: var(--tc2); gap: 14px; }
.tech__hero-link:hover i { transform: translateY(2px); }

/* ---- console panel: a "code editor" reading of the nine tech domains ---- */
.tech__console {
  position: relative;
  max-width: 540px;
  margin: 0 0 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: var(--tdark);
  box-shadow: 0 40px 80px -30px rgba(7, 21, 47, .55);
}
.tech__console-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tech__console-dot { width: 10px; height: 10px; border-radius: 50%; }
.tech__console-dot--r { background: #ff5f57; }
.tech__console-dot--y { background: #febc2e; }
.tech__console-dot--g { background: #28c840; }
.tech__console-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  font-family: "Kanit", sans-serif;
  font-size: 12.5px;
  color: var(--tmuted);
}
.tech__console-file i { font-size: 11px; color: var(--tc3); }
.tech__console-body {
  padding: 22px 22px 26px;
  overflow-x: auto;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.95;
  counter-reset: line;
}
.tech__console-body > * {
  position: relative;
  display: block;
  padding-left: 34px;
  counter-increment: line;
  color: var(--tmuted);
  white-space: nowrap;
}
.tech__console-body > *::before {
  content: counter(line, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: 11.5px;
  color: rgba(159, 179, 205, .35);
}
.tech__console-kw { color: var(--tc3); }
.tech__console-key { color: #fff; font-weight: 500; }
.tech__console-str { color: #c9c4ff; }
.tech__console-fn { color: var(--tc3); }
.tech__console-op { color: var(--tmuted); }
.tech__console-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .25s ease;
}
.tech__console-row:hover { background: rgba(77, 163, 255, .14); }
.tech__console-row:hover .tech__console-key { color: var(--tc3); }
.tech__console-arrow {
  flex: none;
  font-size: 11px;
  color: var(--tc3);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.tech__console-row:hover .tech__console-arrow { opacity: 1; transform: translateX(0); }
.tech__console-line--out { color: var(--tmuted); margin-top: 6px; }
.tech__console-line--out .tech__console-op { color: var(--tmuted); }
.tech__console-caret {
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 5px;
  background: var(--tc3);
  animation: techCaretBlink 1s steps(1) infinite;
}
@keyframes techCaretBlink { 50% { opacity: 0; } }

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tech__hero-title { font-size: 40px; }
}
@media only screen and (max-width: 1199px) {
  .tech__hero-title { font-size: 36px; }
}
@media only screen and (max-width: 991px) {
  .tech__hero { padding: 150px 0 90px; }
  .tech__console { margin: 50px auto 0; }
}
@media only screen and (max-width: 767px) {
  .tech__hero-title { font-size: 27px; }
  .tech__hero { padding: 130px 0 70px; }
  .tech__console-body { font-size: 12px; }
  .tech__console-body > * { padding-left: 28px; }
  .tech__console-body > *::before { font-size: 10.5px; }
}


/* ---------- 02. Technology landscape (connected flow diagram) ---------- */
/* The page-wide ":where(.tech__page) section" default (130px 0) gives this
   section and the categories section right after it 130px each, stacking
   to a 260px gap around a boundary with very little content on either
   side of it - trim both sides down to a normal single-section gap. */
.tech__landscape { padding-bottom: 60px; }
.tech__flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 56px;
}
.tech__flow-node { width: 158px; text-align: center; padding: 22px 12px; }
.tech__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tbg);
  border: 1px solid var(--tb);
  color: var(--tc);
  font-size: 20px;
  margin-bottom: 14px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.tech__flow-node:hover .tech__flow-ico { background: var(--tc); border-color: var(--tc); color: #fff; }
.tech__flow-node h3 { font-size: 16px; font-weight: 600; color: var(--th); margin: 0 0 6px; }
.tech__flow-node p { font-size: 13px; font-weight: 300; color: var(--tt); line-height: 1.5; margin: 0; }
.tech__flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 30px;
  flex: 0 0 auto;
  color: var(--tb);
  font-size: 14px;
}


/* ---------- 03. Technology categories ---------- */
.tech__categories { padding-top: 70px; }
.tech__cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Nine distinct hues, one per technology area, so the grid reads as a
   spectrum rather than one accent color repeated nine times. */
.tech__cat-grid .tech__cat-card:nth-child(1) { --cat-a: #2563eb; --cat-b: #60a5fa; --cat-tint: #eaf2ff; }
.tech__cat-grid .tech__cat-card:nth-child(2) { --cat-a: #6366f1; --cat-b: #a5b4fc; --cat-tint: #eef0ff; }
.tech__cat-grid .tech__cat-card:nth-child(3) { --cat-a: #0d9488; --cat-b: #5eead4; --cat-tint: #e6f7f5; }
.tech__cat-grid .tech__cat-card:nth-child(4) { --cat-a: #0284c7; --cat-b: #7dd3fc; --cat-tint: #e6f4fc; }
.tech__cat-grid .tech__cat-card:nth-child(5) { --cat-a: #c026d3; --cat-b: #f0abfc; --cat-tint: #fbeafd; }
.tech__cat-grid .tech__cat-card:nth-child(6) { --cat-a: #d97706; --cat-b: #fbbf24; --cat-tint: #fef3e0; }
.tech__cat-grid .tech__cat-card:nth-child(7) { --cat-a: #16a34a; --cat-b: #86efac; --cat-tint: #e8f7ed; }
.tech__cat-grid .tech__cat-card:nth-child(8) { --cat-a: #e11d48; --cat-b: #fb7185; --cat-tint: #fde8ec; }
.tech__cat-grid .tech__cat-card:nth-child(9) { --cat-a: #7c3aed; --cat-b: #c4b5fd; --cat-tint: #f3eefd; }

.tech__cat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 30px;
  border-radius: 20px;
  border: 1px solid var(--tb);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* Gradient accent bar along the top edge, unique per card. */
.tech__cat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--cat-a), var(--cat-b));
}
/* Oversized, near-transparent numeral bleeding off the bottom-right corner -
   texture and identity without competing with the readable content above it. */
.tech__cat-card::after {
  position: absolute;
  right: 6px;
  bottom: -26px;
  font-size: 112px;
  font-weight: 800;
  line-height: 1;
  color: var(--cat-a);
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.tech__cat-grid .tech__cat-card:nth-child(1)::after { content: "01"; }
.tech__cat-grid .tech__cat-card:nth-child(2)::after { content: "02"; }
.tech__cat-grid .tech__cat-card:nth-child(3)::after { content: "03"; }
.tech__cat-grid .tech__cat-card:nth-child(4)::after { content: "04"; }
.tech__cat-grid .tech__cat-card:nth-child(5)::after { content: "05"; }
.tech__cat-grid .tech__cat-card:nth-child(6)::after { content: "06"; }
.tech__cat-grid .tech__cat-card:nth-child(7)::after { content: "07"; }
.tech__cat-grid .tech__cat-card:nth-child(8)::after { content: "08"; }
.tech__cat-grid .tech__cat-card:nth-child(9)::after { content: "09"; }
.tech__cat-card > * { position: relative; z-index: 1; }

.tech__cat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px -18px var(--cat-a);
  border-color: var(--cat-a);
}
.tech__cat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tech__cat-num { font-size: 13px; font-weight: 700; color: var(--cat-a); letter-spacing: .5px; opacity: .55; }
.tech__cat-layer {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cat-a);
  background: var(--cat-tint);
  padding: 6px 12px;
  border-radius: 20px;
}
.tech__cat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cat-a), var(--cat-b));
  color: #fff;
  font-size: 24px;
  margin-bottom: 20px;
  box-shadow: 0 14px 26px -10px var(--cat-a);
}
.tech__cat-title { font-size: 20px; font-weight: 600; color: var(--th); margin: 0 0 10px; }
.tech__cat-text { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tt); margin: 0 0 18px; }
.tech__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.tech__chips li {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--th);
  background: var(--cat-tint);
  padding: 6px 12px;
  border-radius: 20px;
}
.tech__cat-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cat-a);
  transition: gap .3s ease, filter .3s ease;
}
.tech__cat-link:hover { gap: 14px; filter: brightness(1.2); }


/* ---------- Full-bleed banner ---------- */
.tech__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1783 / 882;
  overflow: hidden;
  background: linear-gradient(180deg, #000613 0%, #000d25 100%);
}
.tech__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- 04. Stack visualization (connected chain) ---------- */
.tech__stack { background: var(--tbg); }
.tech__chain-wrap { display: grid; grid-template-columns: 1fr .55fr; gap: 50px; align-items: start; }
.tech__chain { list-style: none; margin: 0; padding: 0; position: relative; }
.tech__chain::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--tc3), var(--tc2));
  opacity: .35;
}
.tech__chain li { position: relative; display: flex; gap: 20px; padding: 18px 0; }
.tech__chain-ico {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tc3);
  color: var(--tc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.tech__chain-body h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.tech__chain-body h3 a { color: var(--th); transition: color .25s ease; }
.tech__chain-body h3 a:hover { color: var(--tc); }
.tech__chain-body p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tt); }
.tech__chain-body p a { color: var(--tc); text-decoration: underline; text-underline-offset: 3px; }
.tech__chain-body p a:hover { color: var(--tc2); }

.tech__chain-cross {
  background: #fff;
  border: 1px solid var(--tb);
  border-radius: 20px;
  padding: 28px 26px;
}
.tech__cross-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tc2);
  margin-bottom: 18px;
}
.tech__cross-item { display: flex; gap: 14px; padding: 14px 0; border-top: 1px dashed var(--tb); }
.tech__cross-item:first-of-type { border-top: none; padding-top: 0; }
.tech__cross-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--tbg);
  color: var(--tc2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.tech__cross-item p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--tt); }
.tech__cross-item p a { color: var(--tc); font-weight: 600; text-decoration: none; }
.tech__cross-item p a:hover { color: var(--tc2); text-decoration: underline; }


/* ---------- 05. Technology by business need ---------- */
.tech__need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tech__need-card {
  padding: 32px 28px;
  border-radius: 18px;
  border: 1px solid var(--tb);
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tech__need-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 44, 109, .09);
  border-color: rgba(128, 121, 248, .35);
}
.tech__need-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(128, 121, 248, .1);
  color: var(--tc2);
  font-size: 20px;
  margin-bottom: 16px;
}
.tech__need-card h3 { font-size: 20px; font-weight: 600; color: var(--th); margin: 0 0 10px; }
.tech__need-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--tt); margin: 0 0 18px; }
.tech__need-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc2);
  transition: gap .3s ease, color .3s ease;
}
.tech__need-link:hover { gap: 14px; color: var(--tc); }


/* ---------- 06. How we use technology ---------- */
.tech__outcomes-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.tech__outcomes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
}
.tech__outcomes-list li { display: flex; align-items: flex-start; gap: 14px; }
.tech__outcomes-list li i {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--tc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.tech__outcomes-list strong { display: block; font-size: 15px; font-weight: 600; color: var(--th); margin-bottom: 4px; }
.tech__outcomes-list span { display: block; font-size: 13.5px; font-weight: 300; color: var(--tt); line-height: 1.6; }


/* ---------- 07. Why 3Shadz (dark band) ---------- */
.tech__why { position: relative; overflow: hidden; background: var(--tdark); }
.tech__why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .3), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(128, 121, 248, .24), transparent 64%);
}
.tech__why > .container { position: relative; z-index: 1; }
.tech__why .tech__eyebrow { color: var(--tc3); }
.tech__why .tech__title { color: #fff; }
.tech__why .tech__text { color: var(--tmuted); }
.tech__why .tech__text a { color: var(--tc3); }
.tech__why .tech__text a:hover { color: #fff; }

.tech__why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.tech__why-item {
  padding: 30px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.tech__why-item:hover {
  transform: translateY(-6px);
  border-color: rgba(77, 163, 255, .45);
  background: rgba(0, 95, 204, .12);
}
.tech__why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(77, 163, 255, .14);
  color: var(--tc3);
  font-size: 20px;
  margin-bottom: 16px;
}
.tech__why-item h3 { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.tech__why-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--tmuted); margin: 0; }


/* ---------- 08. Technology directory ---------- */
.tech__dir-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--tb);
  border-left: 1px solid var(--tb);
  margin-top: 20px;
}
.tech__dir-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-right: 1px solid var(--tb);
  border-bottom: 1px solid var(--tb);
  transition: background .3s ease;
}
.tech__dir-row:hover { background: var(--tbg); }
.tech__dir-num { font-size: 13px; font-weight: 700; color: rgba(0, 95, 204, .32); }
.tech__dir-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tbg);
  color: var(--tc);
  font-size: 15px;
  transition: background .3s ease, color .3s ease;
}
.tech__dir-row:hover .tech__dir-ico { background: var(--tc); color: #fff; }
.tech__dir-name { flex: 1 1 auto; font-size: 15px; font-weight: 600; color: var(--th); }
.tech__dir-arrow { color: var(--tb); font-size: 13px; transition: color .3s ease, transform .3s ease; }
.tech__dir-row:hover .tech__dir-arrow { color: var(--tc); transform: translateX(4px); }


/* ---------- Responsive ---------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tech__why-grid { grid-template-columns: repeat(2, 1fr); }
  .tech__dir-list { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tech__cat-grid,
  .tech__why-grid,
  .tech__need-grid { grid-template-columns: repeat(2, 1fr); }
  .tech__chain-wrap { grid-template-columns: 1fr; }
  .tech__outcomes-grid { grid-template-columns: 1fr; gap: 36px; }
  .tech__dir-list { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  :where(.tech__page) section { padding: 70px 0; }
  .tech__page .tech__title { font-size: 28px; }
  .tech__flow { flex-direction: column; align-items: center; }
  .tech__flow-arrow { transform: rotate(90deg); }
  .tech__cat-grid,
  .tech__why-grid,
  .tech__need-grid,
  .tech__outcomes-list,
  .tech__dir-list { grid-template-columns: 1fr; }
  .tech__outcomes-grid { grid-template-columns: 1fr; gap: 30px; }
  .tech__chain-wrap { grid-template-columns: 1fr; gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .tech__page * { transition-duration: .01ms !important; }
  .tech__console-caret { animation: none; }
}

/* ============================================================
   FRONTEND TECHNOLOGIES PAGE (fe__*)
   Scoped entirely to .fe__page (added on <main> of
   frontend-technologies.html). Extends the brand language already
   set by .tech__page / .ai__page / .final-cta: #005fcc primary,
   #8079f8 secondary, #07152F dark bands, #f6f7fc light bands, Kanit
   type. Every keyframe here is prefixed feKf* so nothing collides
   with the theme. Nothing in this block leaks to other pages.

   Structure: 01 hero (dark band, placeholder artwork frame) - 02
   keyword marquee - 03 technology ecosystem (connected vertical
   layer track: Experience > Interface > Application > Web Foundation
   > Build & Development) - 04 why architecture matters (pull-quote +
   consideration list) - 05 capability rows (alternating zig-zag,
   colour-coded like .tech__cat-card) - 06 choose-the-right-stack
   (Need > Consideration > Technology rows) - 07 engineering approach
   (dark 5-step stagger track) - 08 business outcomes (5-up ribbon) -
   09 technology directory (grouped, described stack) - 10 related
   technology/service links - 11 shared .final-cta closes the page.
   ============================================================ */
.fe__page {
  --fc: #005fcc;
  --fc2: #8079f8;
  --fc3: #4da3ff;
  --fh: #1c1e2b;
  --ft: #6b7089;
  --fb: #e9eaf5;
  --fbg: #f6f7fc;
  --fdark: #07152F;
  --fmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.fe__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.fe__page .fe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fc);
  margin-bottom: 18px;
}
.fe__page .fe__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--fh); margin: 0 0 20px; }
.fe__page .fe__lead { font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--fh); margin: 0 0 18px; }
.fe__page .fe__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--ft); margin: 0 0 16px; }
.fe__page .fe__text:last-child { margin-bottom: 0; }
.fe__page .fe__text a,
.fe__page .fe__lead a { color: var(--fc); text-decoration: underline; text-underline-offset: 3px; }
.fe__page .fe__text a:hover,
.fe__page .fe__lead a:hover { color: var(--fc2); }
.fe__page .fe__head { max-width: 760px; }
.fe__page .fe__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Hero ---------- */
.fe__hero {
  position: relative;
  overflow: hidden;
  background: var(--fdark);
  padding: 200px 0 120px;
}
.fe__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 80% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.fe__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.fe__hero > .container { position: relative; z-index: 2; }
.fe__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.fe__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--fc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.fe__hero-eyebrow i { font-size: 12px; }
.fe__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.fe__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--fc3), var(--fc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fe__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.fe__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--fmuted); margin: 0 0 16px; }
.fe__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.fe__hero-btn,
.fe__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.fe__hero-btn { color: #fff; background: var(--fc); border: 2px solid var(--fc); }
.fe__hero-btn:hover { background: var(--fc2); border-color: var(--fc2); }
.fe__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.fe__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--fdark); }
.fe__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fe__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.fe__hero-figure { position: relative; }
/* slow-breathing conic ring behind the placeholder frame, matching the
   AI page hero's treatment so the two pages read as the same product */
.fe__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(128, 121, 248, .45), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: feKfSpin 26s linear infinite;
}
/* Placeholder frame: dashed border marks it clearly as a stand-in. Sets
   an explicit aspect-ratio (the AI page gets its height from the real
   <img> it holds) so the block occupies the same footprint until a real
   screenshot replaces .fe__hero-placeholder. */
.fe__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fe__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fe__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.fe__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--fc3);
  font-size: 24px;
}
.fe__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.fe__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--fmuted); max-width: 220px; }
.fe__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: feKfFloat 6s ease-in-out infinite;
}
.fe__hero-chip i { color: var(--fc3); font-size: 18px; }
.fe__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.fe__hero-chip span { font-size: 13px; font-weight: 300; color: var(--fmuted); }
.fe__hero-chip--1 { left: -34px; top: 14%; }
.fe__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes feKfSpin { to { transform: rotate(360deg); } }
@keyframes feKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.fe__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fe__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fe__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: feKfMarquee 38s linear infinite; }
.fe__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.fe__marquee-track i { color: var(--fc3); font-size: 8px; }
@keyframes feKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Technology ecosystem (connected layer track) ---------- */
.fe__layer { padding: 130px 0; background: #fff; }
.fe__layer-track { max-width: 900px; margin: 60px auto 0; position: relative; padding-left: 46px; }
.fe__layer-track::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--fc), var(--fc2), var(--fc3));
  opacity: .35;
}
.fe__layer-item { position: relative; padding-bottom: 46px; }
.fe__layer-item:last-child { padding-bottom: 0; }
.fe__layer-dot {
  position: absolute;
  left: -46px;
  top: 4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--fc);
  color: var(--fc);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 95, 204, .15);
}
.fe__layer-body {
  border: 1px solid var(--fb);
  border-radius: 16px;
  padding: 26px 28px;
  background: var(--fbg);
  transition: all .3s ease;
}
.fe__layer-item:hover .fe__layer-body { border-color: var(--fc); background: #fff; box-shadow: 0 18px 40px rgba(0, 95, 204, .08); }
.fe__layer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.fe__layer-name { font-size: 20px; font-weight: 600; color: var(--fh); }
.fe__layer-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fc); background: rgba(0, 95, 204, .08); padding: 5px 12px; border-radius: 20px; }
.fe__layer-desc { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--ft); margin: 0 0 16px; }
.fe__layer-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.fe__layer-chips li {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fc);
  background: #fff;
  border: 1px solid var(--fb);
  padding: 6px 13px;
  border-radius: 20px;
  transition: border-color .3s ease;
}
.fe__layer-item:hover .fe__layer-chips li { border-color: rgba(0, 95, 204, .3); }

/* ---------- 04. Why frontend architecture matters ---------- */
.fe__why { padding: 130px 0; background: var(--fbg); }
.fe__why-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 60px; align-items: start; }
.fe__why-quote {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fh);
  margin: 0 0 22px;
  padding-left: 22px;
  border-left: 3px solid var(--fc);
}
.fe__why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fe__why-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--fb);
  border-radius: 14px;
  background: #fff;
  transition: all .3s ease;
}
.fe__why-list li:hover { border-color: var(--fc); box-shadow: 0 14px 30px rgba(0, 95, 204, .08); }
.fe__why-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 95, 204, .1);
  color: var(--fc);
  font-size: 15px;
}
.fe__why-list strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--fh); margin-bottom: 3px; }
.fe__why-list span { display: block; font-size: 13.5px; font-weight: 300; color: var(--ft); line-height: 1.6; }

/* ---------- 05. Capability rows (alternating zig-zag) ---------- */
.fe__cap { padding: 130px 0; background: #fff; }
.fe__cap-rows { display: grid; gap: 0; margin-top: 60px; }
.fe__cap-row {
  display: grid;
  grid-template-columns: .38fr .62fr;
  gap: 50px;
  align-items: center;
  padding: 46px 0;
  border-bottom: 1px solid var(--fb);
}
.fe__cap-row:last-child { border-bottom: 0; }
.fe__cap-row:nth-child(even) { direction: rtl; }
.fe__cap-row:nth-child(even) > * { direction: ltr; }
.fe__cap-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 220px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--row-a), var(--row-b));
}
.fe__cap-visual::after {
  content: attr(data-num);
  position: absolute;
  right: -8px;
  bottom: -24px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .18);
  pointer-events: none;
}
.fe__cap-visual i { position: relative; z-index: 1; font-size: 46px; color: #fff; }
.fe__cap-copy h3 { font-size: 24px; font-weight: 600; color: var(--fh); margin: 0 0 12px; }
.fe__cap-copy p { font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--ft); margin: 0 0 18px; }
.fe__cap-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.fe__cap-tags li { font-size: 12.5px; font-weight: 500; color: var(--row-a); background: var(--row-tint); padding: 6px 13px; border-radius: 20px; }
/* per-row accent, reusing the same validated palette as .tech__cat-card
   so the two Technologies-section pages share one colour language */
.fe__cap-row:nth-child(1) { --row-a: #2563eb; --row-b: #60a5fa; --row-tint: #eaf2ff; }
.fe__cap-row:nth-child(2) { --row-a: #6366f1; --row-b: #a5b4fc; --row-tint: #eef0ff; }
.fe__cap-row:nth-child(3) { --row-a: #0d9488; --row-b: #5eead4; --row-tint: #e6f7f5; }
.fe__cap-row:nth-child(4) { --row-a: #0284c7; --row-b: #7dd3fc; --row-tint: #e6f4fc; }
.fe__cap-row:nth-child(5) { --row-a: #c026d3; --row-b: #f0abfc; --row-tint: #fbeafd; }
.fe__cap-row:nth-child(6) { --row-a: #d97706; --row-b: #fbbf24; --row-tint: #fef3e0; }
.fe__cap-row:nth-child(7) { --row-a: #16a34a; --row-b: #86efac; --row-tint: #e8f7ed; }

/* ---------- 06. Choose the right stack ---------- */
.fe__fit { padding: 130px 0; background: var(--fbg); }
.fe__fit-factors { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 50px; padding: 0; justify-content: center; }
.fe__fit-factors li { font-size: 13px; font-weight: 500; color: var(--fc); background: #fff; border: 1px solid var(--fb); padding: 8px 16px; border-radius: 20px; }
.fe__fit-rows { display: grid; gap: 18px; max-width: 980px; margin: 0 auto; }
.fe__fit-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  border: 1px solid var(--fb);
  border-radius: 16px;
  background: #fff;
  transition: all .3s ease;
}
.fe__fit-row:hover { border-color: var(--fc); box-shadow: 0 18px 40px rgba(0, 95, 204, .08); }
.fe__fit-step { text-align: center; }
.fe__fit-step span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fc); opacity: .6; margin-bottom: 6px; }
.fe__fit-step strong { display: block; font-size: 15px; font-weight: 600; color: var(--fh); line-height: 1.4; }
.fe__fit-arrow { color: var(--fb); font-size: 16px; }
.fe__note {
  margin: 34px auto 0;
  max-width: 780px;
  text-align: center;
  padding: 18px 24px;
  border-left: 3px solid var(--fc);
  border-radius: 0 12px 12px 0;
  background: #fff;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ft);
}

/* ---------- 07. Engineering approach (dark, staggered 5-step) ---------- */
.fe__approach { padding: 130px 0; background: var(--fdark); position: relative; overflow: hidden; }
.fe__approach::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 90% 0%, rgba(0, 95, 204, .28), transparent 60%);
}
.fe__approach > .container { position: relative; z-index: 1; }
.fe__approach .fe__eyebrow { color: var(--fc3); }
.fe__approach .fe__title { color: #fff; }
.fe__approach .fe__text { color: var(--fmuted); }
.fe__approach-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 64px; }
.fe__approach-step { position: relative; padding-top: 26px; }
.fe__approach-step:nth-child(even) { transform: translateY(28px); }
.fe__approach-step::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -10px;
  right: -10px;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}
.fe__approach-step:first-child::before { left: 50%; }
.fe__approach-step:last-child::before { right: 50%; }
.fe__approach-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fdark);
  border: 2px solid var(--fc3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
.fe__approach-step h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.fe__approach-step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--fmuted); margin: 0; }

/* ---------- 08. Business outcomes ---------- */
.fe__outcomes { padding: 130px 0; background: #fff; }
.fe__outcomes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 56px; }
.fe__outcomes-item { text-align: center; padding: 30px 20px; border-radius: 16px; transition: background .3s ease; }
.fe__outcomes-item:hover { background: var(--fbg); }
.fe__outcomes-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .08);
  color: var(--fc);
  font-size: 21px;
  margin-bottom: 16px;
}
.fe__outcomes-item h3 { font-size: 16px; font-weight: 600; color: var(--fh); margin: 0 0 8px; }
.fe__outcomes-item p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ft); margin: 0; }

/* ---------- 09. Technology directory (grouped + described) ---------- */
.fe__stack { padding: 130px 0; background: var(--fbg); }
.fe__stack-group { margin-top: 54px; }
.fe__stack-group:first-of-type { margin-top: 60px; }
.fe__stack-group-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--fc); margin: 0 0 22px; }
.fe__stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.fe__stack-card { padding: 22px 22px 24px; border: 1px solid var(--fb); border-radius: 14px; background: #fff; transition: all .3s ease; }
.fe__stack-card:hover { border-color: var(--fc); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 95, 204, .08); }
.fe__stack-card h3 { font-size: 16px; font-weight: 600; color: var(--fh); margin: 0 0 8px; }
.fe__stack-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ft); margin: 0; }

/* ---------- 10. Related technology & service links ---------- */
.fe__related { padding: 90px 0; background: #fff; border-top: 1px solid var(--fb); }
.fe__related-head { text-align: center; margin-bottom: 34px; }
.fe__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--fc); }
.fe__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fe__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--fb);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fh);
  transition: all .3s ease;
}
.fe__related-list a:hover { border-color: var(--fc); color: var(--fc); background: var(--fbg); }
.fe__related-list a i { color: var(--fc); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fe__hero-glow,
  .fe__hero-chip,
  .fe__marquee-track { animation: none; }
  .fe__page * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .fe__hero-title { font-size: 46px; }
}
@media only screen and (max-width: 1199px) {
  .fe__page .fe__title { font-size: 34px; }
  .fe__hero { padding: 170px 0 100px; }
  .fe__hero-title { font-size: 40px; }
  .fe__hero-grid { gap: 46px; }
  .fe__cap-row { grid-template-columns: .45fr .55fr; gap: 34px; }
  .fe__approach-track { grid-template-columns: repeat(3, 1fr); gap: 34px 20px; }
  .fe__approach-step:nth-child(even) { transform: translateY(0); }
  .fe__outcomes-grid { grid-template-columns: repeat(3, 1fr); }
  .fe__hero-chip--1 { left: -14px; }
  .fe__hero-chip--2 { right: -10px; }
}
@media only screen and (max-width: 991px) {
  .fe__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .fe__hero-frame { max-width: 460px; margin: 0 auto; }
  .fe__why-grid { grid-template-columns: 1fr; gap: 34px; }
  .fe__cap-row { grid-template-columns: 1fr; text-align: left; }
  .fe__cap-row:nth-child(even) { direction: ltr; }
  .fe__cap-visual { max-width: 160px; }
  .fe__fit-row { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .fe__fit-arrow { transform: rotate(90deg); }
  .fe__approach-track { grid-template-columns: repeat(2, 1fr); }
  .fe__stack-grid { grid-template-columns: repeat(2, 1fr); }
  .fe__outcomes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .fe__page .fe__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .fe__page .fe__title { font-size: 26px; }
  .fe__hero { padding: 140px 0 80px; }
  .fe__hero-title { font-size: 30px; }
  .fe__hero-lead { font-size: 17px; }
  .fe__hero-chip { display: none; }
  .fe__hero-btn,
  .fe__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.fe__page) section { padding: 80px 0; }
  .fe__layer-track { padding-left: 40px; }
  .fe__layer-dot { width: 38px; height: 38px; left: -40px; font-size: 13px; }
  .fe__why-quote { font-size: 20px; }
  .fe__approach-track { grid-template-columns: 1fr; }
  .fe__approach-step::before { display: none; }
  .fe__stack-grid { grid-template-columns: 1fr; }
  .fe__outcomes-grid { grid-template-columns: 1fr; }
  .fe__related-list { flex-direction: column; align-items: stretch; }
  .fe__related-list a { justify-content: center; }
}

/* ============================================================
   BACKEND TECHNOLOGIES PAGE (be__*)
   Scoped entirely to .be__page (added on <main> of
   backend-technologies.html). Reuses the same brand tokens as
   .fe__page (#005fcc primary, #8079f8 secondary, #07152F dark
   bands, #f6f7fc light bands, Kanit type) under a be__ namespace
   so nothing collides or leaks. Every keyframe here is prefixed
   beKf* for the same reason.

   Deliberately different visual mechanics from the frontend page
   even though the brand language matches: a horizontal request
   flow (01) instead of a vertical layer track, a card grid (02)
   instead of zig-zag rows, single-card technology clusters (03)
   instead of grouped sub-grids, a connected step chain (04)
   instead of repeated 3-column rows, a converging API funnel (05),
   a staggered/indented layered architecture stack (06), a dark
   ghost-numbered principle grid (07), and an equation strip (08).

   Structure: 01 hero (dark band, image left / copy right, image
   placeholder) - 02 keyword marquee - 03 request/response flow -
   04 capability grid - 05 technology ecosystem clusters - 06
   choose-the-right-backend decision chain - 07 API engineering
   (cards + funnel) - 08 layered backend architecture - 09
   engineering principles (dark) - 10 "technology is only part of
   the equation" - 11 related links - 12 shared .final-cta closes
   the page.
   ============================================================ */
.be__page {
  --bc: #005fcc;
  --bc2: #8079f8;
  --bc3: #4da3ff;
  --bok: #17c3a2;
  --bh: #1c1e2b;
  --bt: #6b7089;
  --bb: #e9eaf5;
  --bbg: #f6f7fc;
  --bdark: #07152F;
  --bmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.be__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.be__page .be__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bc);
  margin-bottom: 16px;
}
.be__page .be__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--bh); margin: 0 0 20px; }
.be__page .be__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--bt); margin: 0 0 16px; }
.be__page .be__text:last-child { margin-bottom: 0; }
.be__page .be__text a { color: var(--bc); text-decoration: underline; text-underline-offset: 3px; }
.be__page .be__text a:hover { color: var(--bc2); }
.be__page .be__head { max-width: 760px; }
.be__page .be__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Hero (image left / copy right - placeholder preserved) ---------- */
.be__hero {
  position: relative;
  overflow: hidden;
  background: var(--bdark);
  padding: 200px 0 120px;
}
.be__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 15% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 96% 108%, rgba(23, 195, 162, .22), transparent 64%);
}
.be__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.be__hero > .container { position: relative; z-index: 2; }
.be__hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.be__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--bc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.be__hero-eyebrow i { font-size: 12px; }
.be__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.be__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--bc3), var(--bc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.be__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.be__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--bmuted); margin: 0 0 16px; }
.be__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.be__hero-btn,
.be__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.be__hero-btn { color: #fff; background: var(--bc); border: 2px solid var(--bc); }
.be__hero-btn:hover { background: var(--bc2); border-color: var(--bc2); }
.be__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.be__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--bdark); }
.be__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.be__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.be__hero-figure { position: relative; }
.be__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(23, 195, 162, .4), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: beKfSpin 26s linear infinite;
}
.be__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.be__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.be__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.be__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--bc3);
  font-size: 24px;
}
.be__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.be__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--bmuted); max-width: 220px; }
.be__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: beKfFloat 6s ease-in-out infinite;
}
.be__hero-chip i { color: var(--bc3); font-size: 18px; }
.be__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.be__hero-chip span { font-size: 13px; font-weight: 300; color: var(--bmuted); }
.be__hero-chip--1 { left: -34px; top: 14%; }
.be__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes beKfSpin { to { transform: rotate(360deg); } }
@keyframes beKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.be__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.be__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.be__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: beKfMarquee 38s linear infinite; }
.be__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.be__marquee-track i { color: var(--bc3); font-size: 8px; }
@keyframes beKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Request -> response flow ---------- */
.be__flow { padding: 130px 0; background: #fff; }
.be__flow-track { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 4px 0; margin-top: 56px; }
.be__flow-node { width: 158px; text-align: center; padding: 22px 12px; }
.be__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bbg);
  border: 1px solid var(--bb);
  color: var(--bc);
  font-size: 21px;
  margin-bottom: 14px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.be__flow-node:hover .be__flow-ico { background: var(--bc); border-color: var(--bc); color: #fff; transform: translateY(-4px); }
.be__flow-node--end .be__flow-ico { color: var(--bok); border-color: var(--bok); }
.be__flow-node--end:hover .be__flow-ico { background: var(--bok); border-color: var(--bok); color: #fff; }
.be__flow-node h3 { font-size: 16px; font-weight: 600; color: var(--bh); margin: 0 0 6px; }
.be__flow-node p { font-size: 13px; font-weight: 300; color: var(--bt); line-height: 1.5; margin: 0; }
.be__flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 30px;
  flex: 0 0 auto;
  color: var(--bb);
  font-size: 14px;
}

/* ---------- 04. Capability grid ---------- */
.be__cap { padding: 130px 0; background: var(--bbg); }
.be__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.be__cap-card { background: #fff; border: 1px solid var(--bb); border-radius: 18px; padding: 34px 28px; transition: all .3s ease; }
.be__cap-card:hover { border-color: var(--bc); transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 95, 204, .1); }
.be__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(0, 95, 204, .08);
  color: var(--bc);
  font-size: 22px;
  margin-bottom: 20px;
}
.be__cap-card h3 { font-size: 19px; font-weight: 600; color: var(--bh); margin: 0 0 10px; }
.be__cap-card p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--bt); margin: 0; }

/* ---------- 05. Technology ecosystem clusters ---------- */
.be__stack { padding: 130px 0; background: #fff; }
.be__stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 56px; }
.be__stack-grid .be__stack-card:nth-child(1) { --grp-a: #2563eb; --grp-b: #60a5fa; }
.be__stack-grid .be__stack-card:nth-child(2) { --grp-a: #6366f1; --grp-b: #a5b4fc; }
.be__stack-grid .be__stack-card:nth-child(3) { --grp-a: #0d9488; --grp-b: #5eead4; }
.be__stack-grid .be__stack-card:nth-child(4) { --grp-a: #0284c7; --grp-b: #7dd3fc; }
.be__stack-grid .be__stack-card:nth-child(5) { --grp-a: #c026d3; --grp-b: #f0abfc; }
.be__stack-grid .be__stack-card:nth-child(6) { --grp-a: #d97706; --grp-b: #fbbf24; }
.be__stack-grid .be__stack-card:nth-child(7) { --grp-a: #16a34a; --grp-b: #86efac; }
.be__stack-card {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 26px;
  border-radius: 18px;
  border: 1px solid var(--bb);
  background: var(--bbg);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.be__stack-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--grp-a), var(--grp-b)); }
.be__stack-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px -18px var(--grp-a); border-color: var(--grp-a); }
.be__stack-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--grp-a), var(--grp-b));
  color: #fff;
  font-size: 20px;
  margin-bottom: 18px;
}
.be__stack-card h3 { font-size: 17px; font-weight: 600; color: var(--bh); margin: 0 0 10px; }
.be__stack-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--bt); margin: 0 0 18px; }
.be__stack-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.be__stack-chips li { font-size: 12px; font-weight: 600; color: var(--grp-a); background: #fff; border: 1px solid var(--bb); padding: 5px 11px; border-radius: 20px; }

/* ---------- 06. Choose-the-right-backend decision chain ---------- */
.be__fit { padding: 130px 0; background: var(--bbg); }
.be__fit-factors { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 56px; padding: 0; justify-content: center; }
.be__fit-factors li { font-size: 13px; font-weight: 500; color: var(--bc); background: #fff; border: 1px solid var(--bb); padding: 8px 16px; border-radius: 20px; }
.be__fit-chain { display: flex; flex-wrap: wrap; gap: 1px; background: var(--bb); border: 1px solid var(--bb); border-radius: 16px; overflow: hidden; max-width: 1120px; margin: 0 auto; }
.be__fit-node { position: relative; flex: 1 1 160px; background: #fff; text-align: center; padding: 26px 14px; transition: background .3s ease; }
.be__fit-node:hover { background: var(--bbg); }
.be__fit-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bc);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.be__fit-node strong { display: block; font-size: 14px; font-weight: 600; color: var(--bh); line-height: 1.4; }
.be__fit-node:not(:last-child)::after {
  content: "\203A";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: var(--bc);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--bb);
  z-index: 2;
}
.be__note {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--bt);
}

/* ---------- 07. API engineering (cards + converging funnel) ---------- */
.be__api { padding: 130px 0; background: #fff; }
.be__api-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 56px 0 70px; }
.be__api-card { padding: 30px 26px; border: 1px solid var(--bb); border-radius: 16px; background: var(--bbg); }
.be__api-card h3 { font-size: 18px; font-weight: 600; color: var(--bh); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.be__api-card h3 i { color: var(--bc); font-size: 16px; }
.be__api-card p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--bt); margin: 0; }

.be__api-funnel { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.be__api-tier {
  width: 100%;
  text-align: center;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--bb);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .04);
}
.be__api-tier i { color: var(--bc); font-size: 16px; margin-bottom: 6px; display: block; }
.be__api-tier strong { display: block; font-size: 15px; font-weight: 600; color: var(--bh); }
.be__api-tier span { display: block; font-size: 12.5px; font-weight: 300; color: var(--bt); margin-top: 4px; }
.be__api-tier--protocols { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 18px 24px; }
.be__api-protocol-chip { font-size: 12.5px; font-weight: 600; color: var(--bc); background: rgba(0, 95, 204, .08); padding: 8px 14px; border-radius: 20px; }
.be__api-connector { width: 2px; height: 26px; background: var(--bb); }

/* ---------- 08. Layered backend architecture ---------- */
.be__arch { padding: 130px 0; background: var(--bbg); }
.be__arch-stack { max-width: 900px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 14px; }
.be__arch-band {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--bb);
  border-radius: 14px;
  border-left: 4px solid var(--bc);
  transition: all .3s ease;
}
.be__arch-band:hover { border-left-color: var(--bc2); box-shadow: 0 16px 34px rgba(0, 95, 204, .08); transform: translateX(6px); }
.be__arch-band:nth-child(1) { margin-left: 0; }
.be__arch-band:nth-child(2) { margin-left: 14px; }
.be__arch-band:nth-child(3) { margin-left: 28px; }
.be__arch-band:nth-child(4) { margin-left: 42px; }
.be__arch-band:nth-child(5) { margin-left: 56px; }
.be__arch-num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bbg);
  border: 1px solid var(--bb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--bc);
}
.be__arch-body { flex: 1; min-width: 0; }
.be__arch-body h3 { font-size: 17px; font-weight: 600; color: var(--bh); margin: 0 0 6px; }
.be__arch-body p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--bt); margin: 0; }
.be__arch-tags { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; max-width: 180px; justify-content: flex-end; }
.be__arch-tags span { font-size: 11px; font-weight: 600; color: var(--bc); background: rgba(0, 95, 204, .08); padding: 5px 10px; border-radius: 20px; white-space: nowrap; }

/* ---------- 09. Engineering principles (dark ghost-number grid) ---------- */
.be__principles { padding: 130px 0; background: var(--bdark); position: relative; overflow: hidden; }
.be__principles::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 90% 0%, rgba(0, 95, 204, .28), transparent 60%);
}
.be__principles > .container { position: relative; z-index: 1; }
.be__principles .be__eyebrow { color: var(--bc3); }
.be__principles .be__title { color: #fff; }
.be__principles .be__text { color: var(--bmuted); }
.be__principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .08); margin-top: 60px; border-radius: 18px; overflow: hidden; }
.be__principle { position: relative; background: #0a1a38; padding: 36px 30px; overflow: hidden; }
.be__principle::after {
  content: attr(data-num);
  position: absolute;
  right: 10px;
  bottom: -14px;
  font-size: 80px;
  font-weight: 800;
  color: #fff;
  opacity: .05;
  line-height: 1;
}
.be__principle i { color: var(--bc3); font-size: 24px; margin-bottom: 16px; display: block; position: relative; z-index: 1; }
.be__principle h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 8px; position: relative; z-index: 1; }
.be__principle p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--bmuted); margin: 0; position: relative; z-index: 1; }

/* ---------- 10. Technology is only part of the equation ---------- */
.be__equation { padding: 130px 0; background: #fff; }
.be__equation-quote { max-width: 800px; margin: 0 auto 44px; text-align: center; font-size: 22px; font-weight: 500; line-height: 1.6; color: var(--bh); }
.be__equation-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 0 0 44px; }
.be__equation-term { padding: 16px 24px; border-radius: 14px; border: 1px solid var(--bb); background: var(--bbg); font-size: 15px; font-weight: 600; color: var(--bh); text-align: center; }
.be__equation-op { font-size: 22px; font-weight: 700; color: var(--bc); }
.be__equation-result { padding: 16px 28px; border-radius: 14px; background: linear-gradient(135deg, var(--bc), var(--bc2)); color: #fff; font-size: 15px; font-weight: 600; text-align: center; box-shadow: 0 16px 34px rgba(0, 95, 204, .25); }
.be__page .be__equation-lead { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.be__equation-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto; padding: 0; max-width: 900px; }
.be__equation-list li { font-size: 13px; font-weight: 500; color: var(--bt); background: var(--bbg); border: 1px solid var(--bb); padding: 8px 16px; border-radius: 20px; }

/* ---------- 11. Related technology / service links ---------- */
.be__related { padding: 90px 0; background: var(--bbg); border-top: 1px solid var(--bb); }
.be__related-head { text-align: center; margin-bottom: 34px; }
.be__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--bc); }
.be__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.be__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--bb);
  background: #fff;
  color: var(--bh);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease;
}
.be__related-list a:hover { border-color: var(--bc); color: var(--bc); background: var(--bbg); }
.be__related-list a i { color: var(--bc); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .be__hero-glow,
  .be__hero-chip,
  .be__marquee-track { animation: none; }
  .be__page * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1399px) {
  .be__hero-title { font-size: 46px; }
}
@media only screen and (max-width: 1199px) {
  .be__page .be__title { font-size: 34px; }
  .be__hero { padding: 170px 0 100px; }
  .be__hero-title { font-size: 40px; }
  .be__hero-grid { gap: 46px; }
  .be__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .be__stack-grid { grid-template-columns: repeat(2, 1fr); }
  .be__api-grid { grid-template-columns: 1fr; }
  .be__principles-grid { grid-template-columns: repeat(2, 1fr); }
  .be__hero-chip--1 { left: -14px; }
  .be__hero-chip--2 { right: -10px; }
}
@media only screen and (max-width: 991px) {
  .be__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .be__hero-copy { order: 1; }
  .be__hero-figure { order: 2; }
  .be__hero-frame { max-width: 460px; margin: 0 auto; }
  .be__flow-track { flex-direction: column; align-items: center; }
  .be__flow-arrow { transform: rotate(90deg); }
  .be__fit-chain { flex-direction: column; }
  .be__fit-node:not(:last-child)::after { display: none; }
  .be__arch-band { flex-wrap: wrap; }
  .be__arch-tags { max-width: 100%; justify-content: flex-start; }
  .be__cap-grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .be__page .be__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .be__page .be__title { font-size: 26px; }
  .be__hero { padding: 140px 0 80px; }
  .be__hero-title { font-size: 30px; }
  .be__hero-lead { font-size: 17px; }
  .be__hero-chip { display: none; }
  .be__hero-btn,
  .be__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.be__page) section { padding: 80px 0; }
  .be__stack-grid { grid-template-columns: 1fr; }
  .be__principles-grid { grid-template-columns: 1fr; }
  .be__arch-band { margin-left: 0 !important; }
  .be__equation-row { flex-direction: column; }
  .be__related-list { flex-direction: column; align-items: stretch; }
  .be__related-list a { justify-content: center; }
}

/* ============================================================
   MOBILE TECHNOLOGIES PAGE (mt__*)
   Scoped entirely to .mt__page (added on <main> of
   mobile-technologies.html). Reuses the same brand tokens as
   .fe__page / .be__page (#005fcc primary, #8079f8 secondary,
   #07152F dark bands, #f6f7fc light bands, Kanit type) under an
   mt__ namespace so nothing collides or leaks. Every keyframe
   here is prefixed mtKf* for the same reason.

   Deliberately different visual mechanics from both siblings:
   a single-column editorial hero with a full-width banner
   placeholder (01) instead of a two-column split, an SVG branch
   diagram (03) instead of a track/funnel, an asymmetric bento
   capability grid (04) instead of uniform cards/rows, a winding
   alternating-offset product journey (05), a diagnostic checklist
   (06) instead of cards, overlapping platform panels (07) instead
   of clusters, a plain reference directory (08), and a literal
   "surface / beneath the surface" iceberg split (09).

   Structure: 01 hero (dark band, centered copy, wide banner
   placeholder) - 02 keyword marquee - 03 intro (considerations
   chip row) - 04 "one product, multiple mobile paths" branch
   diagram - 05 bento capability grid - 06 product journey path -
   07 performance/reliability checklist - 08 platform experience
   (overlapping Android/iOS panels) - 09 technology directory - 10
   "the app is only the surface" - 11 related links - 12 shared
   .final-cta closes the page.
   ============================================================ */
.mt__page {
  --mc: #005fcc;
  --mc2: #8079f8;
  --mc3: #4da3ff;
  --mwarm: #d97706;
  --mwarm2: #fbbf24;
  --mh: #1c1e2b;
  --mt: #6b7089;
  --mb: #e9eaf5;
  --mbg: #f6f7fc;
  --mdark: #07152F;
  --mmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.mt__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.mt__page .mt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mc);
  margin-bottom: 16px;
}
.mt__page .mt__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--mh); margin: 0 0 20px; }
.mt__page .mt__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--mt); margin: 0 0 16px; }
.mt__page .mt__text:last-child { margin-bottom: 0; }
.mt__page .mt__text a { color: var(--mc); text-decoration: underline; text-underline-offset: 3px; }
.mt__page .mt__text a:hover { color: var(--mc2); }
.mt__page .mt__head { max-width: 760px; }
.mt__page .mt__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Hero (editorial: centered copy + wide banner placeholder) ---------- */
.mt__hero {
  position: relative;
  overflow: hidden;
  background: var(--mdark);
  padding: 200px 0 110px;
}
.mt__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1000px 480px at 50% -18%, rgba(0, 95, 204, .42), transparent 62%),
              radial-gradient(700px 420px at 90% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.mt__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.mt__hero > .container { position: relative; z-index: 2; }
.mt__hero-copy { max-width: 720px; margin: 0 auto; text-align: center; }
.mt__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--mc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.mt__hero-eyebrow i { font-size: 12px; }
.mt__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.mt__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--mc3), var(--mc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mt__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.mt__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--mmuted); margin: 0 0 16px; }
.mt__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; justify-content: center; }
.mt__hero-btn,
.mt__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.mt__hero-btn { color: #fff; background: var(--mc); border: 2px solid var(--mc); }
.mt__hero-btn:hover { background: var(--mc2); border-color: var(--mc2); }
.mt__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.mt__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--mdark); }
.mt__hero-pills { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mt__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.mt__hero-banner { position: relative; margin-top: 64px; }
.mt__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 21 / 9;
  border-radius: 28px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.mt__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--mc3);
  font-size: 24px;
}
.mt__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.mt__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--mmuted); max-width: 260px; }
.mt__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: mtKfFloat 6s ease-in-out infinite;
}
.mt__hero-chip i { color: var(--mc3); font-size: 18px; }
.mt__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.mt__hero-chip span { font-size: 13px; font-weight: 300; color: var(--mmuted); }
.mt__hero-chip--1 { left: 26px; top: -22px; }
.mt__hero-chip--2 { right: 26px; bottom: -22px; animation-delay: 3s; }
@keyframes mtKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- 02. Keyword marquee ---------- */
.mt__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mt__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mt__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: mtKfMarquee 38s linear infinite; }
.mt__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.mt__marquee-track i { color: var(--mc3); font-size: 8px; }
@keyframes mtKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Intro (considerations chip row) ---------- */
.mt__intro { padding: 130px 0; background: #fff; }
.mt__intro-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 44px 0 0; padding: 0; }
.mt__intro-chips li { font-size: 13px; font-weight: 500; color: var(--mc); background: var(--mbg); border: 1px solid var(--mb); padding: 9px 18px; border-radius: 20px; }

/* ---------- 04. One product, multiple mobile paths (branch diagram) ---------- */
.mt__fork { padding: 130px 0; background: var(--mbg); }
.mt__fork-origin { display: flex; justify-content: center; margin-bottom: 4px; }
.mt__fork-origin span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--mb);
  box-shadow: 0 14px 30px rgba(0, 95, 204, .1);
  font-size: 15px;
  font-weight: 600;
  color: var(--mh);
}
.mt__fork-origin i { color: var(--mc); }
.mt__fork-connector { display: block; width: 100%; max-width: 620px; height: 64px; margin: 0 auto; }
.mt__fork-connector path { fill: none; stroke: var(--mb); stroke-width: 2; }
.mt__fork-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 940px; margin: 0 auto; }
.mt__fork-path {
  background: #fff;
  border: 1px solid var(--mb);
  border-radius: 20px;
  padding: 34px 30px;
  transition: all .3s ease;
}
.mt__fork-path:hover { transform: translateY(-6px); border-color: var(--mc); box-shadow: 0 22px 46px rgba(0, 95, 204, .1); }
.mt__fork-path-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(0, 95, 204, .08);
  color: var(--mc);
  font-size: 22px;
  margin-bottom: 20px;
}
.mt__fork-path h3 { font-size: 20px; font-weight: 600; color: var(--mh); margin: 0 0 10px; }
.mt__fork-path p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--mt); margin: 0 0 20px; }
.mt__fork-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.mt__fork-chips li { font-size: 12.5px; font-weight: 600; color: var(--mc); background: var(--mbg); border: 1px solid var(--mb); padding: 6px 13px; border-radius: 20px; }
.mt__fork-path--native .mt__fork-path-ico { background: rgba(217, 119, 6, .1); color: var(--mwarm); }
.mt__fork-path--native .mt__fork-chips li { color: var(--mwarm); }
.mt__note {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--mt);
}

/* ---------- 05. Bento capability grid ---------- */
.mt__cap { padding: 130px 0; background: #fff; }
.mt__cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); grid-auto-flow: dense; gap: 20px; margin-top: 56px; }
.mt__cap-tile {
  background: var(--mbg);
  border: 1px solid var(--mb);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all .3s ease;
}
.mt__cap-tile:hover { border-color: var(--mc); background: #fff; box-shadow: 0 20px 44px rgba(0, 95, 204, .1); transform: translateY(-4px); }
.mt__cap-tile--feature { grid-column: span 2; }
.mt__cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--mb);
  color: var(--mc);
  font-size: 20px;
  margin-bottom: 18px;
}
.mt__cap-tile--feature .mt__cap-ico { width: 56px; height: 56px; font-size: 23px; }
.mt__cap-tile h3 { font-size: 17px; font-weight: 600; color: var(--mh); margin: 0 0 8px; }
.mt__cap-tile--feature h3 { font-size: 20px; }
.mt__cap-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--mt); margin: 0; }

/* ---------- 06. Product journey (winding path) ---------- */
.mt__journey { padding: 130px 0; background: var(--mdark); position: relative; overflow: hidden; }
.mt__journey::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 10% 100%, rgba(0, 95, 204, .28), transparent 60%);
}
.mt__journey > .container { position: relative; z-index: 1; }
.mt__journey .mt__eyebrow { color: var(--mc3); }
.mt__journey .mt__title { color: #fff; }
.mt__journey .mt__text { color: var(--mmuted); }
.mt__journey-track { display: flex; justify-content: space-between; gap: 16px; margin-top: 72px; position: relative; }
.mt__journey-track::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px);
  z-index: 0;
}
.mt__journey-step { position: relative; z-index: 1; flex: 1; text-align: center; }
.mt__journey-step:nth-child(even) { transform: translateY(30px); }
.mt__journey-step:nth-child(odd) { transform: translateY(-14px); }
.mt__journey-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #0a1a38;
  border: 2px solid var(--mc3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.mt__journey-step h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.mt__journey-step p { font-size: 12.5px; font-weight: 300; color: var(--mmuted); line-height: 1.6; margin: 0; }

/* ---------- 07. Performance / reliability checklist ---------- */
.mt__perf { padding: 130px 0; background: var(--mbg); }
.mt__perf-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--mb); border: 1px solid var(--mb); border-radius: 18px; overflow: hidden; margin-top: 56px; }
.mt__perf-row { background: #fff; display: flex; align-items: flex-start; gap: 16px; padding: 26px 28px; }
.mt__perf-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--mc); margin-top: 7px; }
.mt__perf-row strong { display: block; font-size: 15px; font-weight: 600; color: var(--mh); margin-bottom: 4px; }
.mt__perf-row span { display: block; font-size: 13.5px; font-weight: 300; color: var(--mt); line-height: 1.65; }

/* ---------- 08. Platform experience (overlapping panels) ---------- */
.mt__platform { padding: 130px 0; background: #fff; }
.mt__platform-stage { position: relative; max-width: 760px; margin: 64px auto 0; display: flex; justify-content: center; }
.mt__platform-card {
  position: relative;
  width: 320px;
  background: var(--mbg);
  border: 1px solid var(--mb);
  border-radius: 22px;
  padding: 38px 32px;
  box-shadow: 0 24px 50px rgba(20, 30, 60, .1);
}
.mt__platform-card--android { transform: rotate(-3deg); z-index: 1; }
.mt__platform-card--ios { transform: rotate(3deg) translateX(-64px); z-index: 2; background: #fff; }
.mt__platform-card i { font-size: 30px; color: var(--mc); margin-bottom: 18px; display: block; }
.mt__platform-card h3 { font-size: 19px; font-weight: 600; color: var(--mh); margin: 0 0 10px; }
.mt__platform-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--mt); margin: 0; }
.mt__platform-badge {
  position: relative;
  z-index: 3;
  display: block;
  width: fit-content;
  margin: -22px auto 0;
  padding: 10px 22px;
  border-radius: 50px;
  background: var(--mdark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .5px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* ---------- 09. Technology directory ---------- */
.mt__stack { padding: 130px 0; background: var(--mbg); }
.mt__stack-group { margin-top: 54px; }
.mt__stack-group:first-of-type { margin-top: 60px; }
.mt__stack-group-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mc); margin: 0 0 22px; }
.mt__stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.mt__stack-card { padding: 22px 22px 24px; border: 1px solid var(--mb); border-radius: 14px; background: #fff; transition: all .3s ease; }
.mt__stack-card:hover { border-color: var(--mc); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 95, 204, .08); }
.mt__stack-card h3 { font-size: 16px; font-weight: 600; color: var(--mh); margin: 0 0 8px; }
.mt__stack-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--mt); margin: 0; }

/* ---------- 10. The app is only the surface ---------- */
.mt__surface { padding: 130px 0; background: #fff; }
.mt__surface-visual { max-width: 900px; margin: 56px auto 0; }
.mt__surface-tip {
  text-align: center;
  padding: 26px 20px;
  border: 1px solid var(--mb);
  border-radius: 16px 16px 0 0;
  background: var(--mbg);
}
.mt__surface-tip i { color: var(--mc); font-size: 20px; margin-bottom: 10px; display: block; }
.mt__surface-tip strong { font-size: 15px; font-weight: 600; color: var(--mh); }
.mt__surface-line {
  position: relative;
  text-align: center;
  border-top: 1px dashed var(--mb);
  margin: 0;
}
.mt__surface-line span {
  position: relative;
  top: -11px;
  background: #fff;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mt);
}
.mt__surface-depth {
  padding: 34px 30px 30px;
  border: 1px solid var(--mb);
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: var(--mdark);
}
.mt__surface-depth-label { display: block; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mc3); margin-bottom: 20px; }
.mt__surface-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.mt__surface-chips li { font-size: 13px; font-weight: 500; color: #dbe6f4; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); padding: 9px 18px; border-radius: 20px; }

/* ---------- 11. Related technology / service links ---------- */
.mt__related { padding: 90px 0; background: var(--mbg); border-top: 1px solid var(--mb); }
.mt__related-head { text-align: center; margin-bottom: 34px; }
.mt__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mc); }
.mt__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mt__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--mb);
  background: #fff;
  color: var(--mh);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease;
}
.mt__related-list a:hover { border-color: var(--mc); color: var(--mc); background: var(--mbg); }
.mt__related-list a i { color: var(--mc); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mt__hero-chip,
  .mt__marquee-track { animation: none; }
  .mt__page * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1399px) {
  .mt__hero-title { font-size: 46px; }
}
@media only screen and (max-width: 1199px) {
  .mt__page .mt__title { font-size: 34px; }
  .mt__hero { padding: 170px 0 90px; }
  .mt__hero-title { font-size: 40px; }
  .mt__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .mt__cap-tile--feature { grid-column: span 2; }
  .mt__perf-list { grid-template-columns: 1fr; }
  .mt__platform-card { width: 280px; padding: 32px 26px; }
  .mt__platform-card--ios { transform: rotate(3deg) translateX(-40px); }
}
@media only screen and (max-width: 991px) {
  .mt__hero-frame { aspect-ratio: 4 / 3; }
  .mt__hero-chip { position: static; display: inline-flex; margin: 16px 10px 0; animation: none; }
  .mt__hero-chip--1, .mt__hero-chip--2 { left: auto; right: auto; top: auto; bottom: auto; }
  .mt__fork-paths { grid-template-columns: 1fr; max-width: 480px; }
  .mt__fork-connector { display: none; }
  .mt__journey-track { flex-direction: column; gap: 36px; }
  .mt__journey-track::before { display: none; }
  .mt__journey-step:nth-child(even),
  .mt__journey-step:nth-child(odd) { transform: none; }
  .mt__platform-stage { flex-direction: column; align-items: center; gap: 40px; }
  .mt__platform-card--android,
  .mt__platform-card--ios { transform: none; }
  .mt__platform-badge { margin: -20px 0 0; }
}
@media only screen and (max-width: 767px) {
  .mt__page .mt__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .mt__page .mt__title { font-size: 26px; }
  .mt__hero { padding: 140px 0 80px; }
  .mt__hero-title { font-size: 30px; }
  .mt__hero-lead { font-size: 17px; }
  .mt__hero-banner { margin-top: 40px; }
  .mt__hero-frame { aspect-ratio: 3 / 4; border-radius: 20px; }
  .mt__hero-btn,
  .mt__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.mt__page) section { padding: 80px 0; }
  .mt__cap-grid { grid-template-columns: 1fr; }
  .mt__cap-tile--feature { grid-column: span 1; }
  .mt__stack-grid { grid-template-columns: 1fr; }
  .mt__platform-card { width: 100%; }
  .mt__related-list { flex-direction: column; align-items: stretch; }
  .mt__related-list a { justify-content: center; }
}

/* ============================================================
   CLOUD TECHNOLOGIES PAGE (ct__*)
   Scoped entirely to .ct__page (added on <main> of
   cloud-technologies.html). Reuses the same brand tokens as
   .fe__page / .be__page / .mt__page (#005fcc primary, #8079f8
   secondary, #07152F dark bands, #f6f7fc light bands, Kanit
   type) under a ct__ namespace so nothing collides or leaks.

   Deliberately different visual mechanics from the other three
   technology pages: a two-column hero with a visible breadcrumb
   (01), a card-less numbered spec list (03) instead of icon
   cards, "server rack" panels (04) instead of clusters/bento/
   fork, a centered-dot signal rail (05) instead of a flowchart,
   a two-column typographic index list (06) instead of a card
   grid, a dark quote + spec-sheet split (07), and a border-only
   (no card backgrounds) typographic principles strip (08).

   Structure: 01 hero (dark band, breadcrumb, copy left / image
   right) - 02 keyword marquee - 03 "foundation, not finish line"
   editorial split - 04 cloud stack rack panels - 05 infra-to-
   users signal rail - 06 "what we build" index list - 07
   "designed for scale" dark quote/spec split - 08 principles
   strip - 09 related links - 10 shared .final-cta closes the
   page.
   ============================================================ */
.ct__page {
  --cc: #005fcc;
  --cc2: #8079f8;
  --cc3: #4da3ff;
  --csky: #0284c7;
  --csky2: #7dd3fc;
  --ch: #1c1e2b;
  --ct: #6b7089;
  --cb: #e9eaf5;
  --cbg: #f6f7fc;
  --cdark: #07152F;
  --cmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.ct__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.ct__page .ct__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cc);
  margin-bottom: 16px;
}
.ct__page .ct__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--ch); margin: 0 0 20px; }
.ct__page .ct__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--ct); margin: 0 0 16px; }
.ct__page .ct__text:last-child { margin-bottom: 0; }
.ct__page .ct__text a { color: var(--cc); text-decoration: underline; text-underline-offset: 3px; }
.ct__page .ct__text a:hover { color: var(--cc2); }
.ct__page .ct__head { max-width: 760px; }
.ct__page .ct__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Hero (breadcrumb + copy left / image right) ---------- */
.ct__hero {
  position: relative;
  overflow: hidden;
  background: var(--cdark);
  padding: 190px 0 120px;
}
.ct__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 12% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 100% 100%, rgba(2, 132, 201, .28), transparent 64%);
}
.ct__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.ct__hero > .container { position: relative; z-index: 2; }
.ct__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ct__breadcrumb { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0; font-size: 13px; font-weight: 500; }
.ct__breadcrumb li { display: flex; align-items: center; gap: 8px; }
.ct__breadcrumb a { color: var(--cmuted); text-decoration: none; transition: color .25s ease; }
.ct__breadcrumb a:hover { color: #fff; }
.ct__breadcrumb li[aria-current] { color: #fff; font-weight: 600; }
.ct__breadcrumb-sep { color: rgba(255, 255, 255, .28); font-size: 11px; }
.ct__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--cc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.ct__hero-eyebrow i { font-size: 12px; }
.ct__hero-title { font-size: 52px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 24px; }
.ct__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--cc3), var(--cc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ct__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.ct__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--cmuted); margin: 0 0 16px; }
.ct__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.ct__hero-btn,
.ct__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.ct__hero-btn { color: #fff; background: var(--cc); border: 2px solid var(--cc); }
.ct__hero-btn:hover { background: var(--cc2); border-color: var(--cc2); }
.ct__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.ct__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--cdark); }
.ct__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.ct__hero-figure { position: relative; }
.ct__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(2, 132, 201, .4), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: ctKfSpin 26s linear infinite;
}
.ct__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.ct__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--cc3);
  font-size: 24px;
}
.ct__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.ct__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--cmuted); max-width: 220px; }
.ct__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: ctKfFloat 6s ease-in-out infinite;
}
.ct__hero-chip i { color: var(--cc3); font-size: 18px; }
.ct__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.ct__hero-chip span { font-size: 13px; font-weight: 300; color: var(--cmuted); }
.ct__hero-chip--1 { left: -34px; top: 14%; }
.ct__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes ctKfSpin { to { transform: rotate(360deg); } }
@keyframes ctKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.ct__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ct__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ct__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: ctKfMarquee 38s linear infinite; }
.ct__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.ct__marquee-track i { color: var(--cc3); font-size: 8px; }
@keyframes ctKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Foundation, not finish line (editorial split) ---------- */
.ct__found { padding: 130px 0; background: #fff; }
.ct__found-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.ct__found-list { list-style: none; margin: 0; padding: 0; }
.ct__found-list li { display: flex; align-items: baseline; gap: 18px; padding: 20px 0; border-top: 1px solid var(--cb); }
.ct__found-list li:first-child { border-top: none; padding-top: 0; }
.ct__found-num { flex: 0 0 auto; width: 26px; font-size: 12.5px; font-weight: 700; color: var(--cc); opacity: .6; }
.ct__found-list strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--ch); margin-bottom: 4px; }
.ct__found-list span { display: block; font-size: 13.5px; font-weight: 300; color: var(--ct); line-height: 1.65; }

/* ---------- 04. Cloud stack rack panels ---------- */
.ct__rack { padding: 130px 0; background: var(--cbg); }
.ct__rack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--cb); border: 1px solid var(--cb); border-radius: 18px; overflow: hidden; margin-top: 56px; }
.ct__rack-panel { background: #fff; padding-bottom: 22px; }
.ct__rack-head { position: relative; padding: 22px 22px; background: var(--cdark); }
.ct__rack-head::before,
.ct__rack-head::after { content: ""; position: absolute; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.ct__rack-head::before { left: 10px; }
.ct__rack-head::after { right: 10px; }
.ct__rack-idx { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cc3); margin-bottom: 6px; }
.ct__rack-head h3 { font-size: 15px; font-weight: 600; margin: 0; color: #fff; }
.ct__rack-units { padding: 6px 22px 0; }
.ct__rack-unit { padding: 16px 0; border-top: 1px dashed var(--cb); }
.ct__rack-unit:first-child { border-top: none; }
.ct__rack-unit strong { display: block; font-size: 14px; font-weight: 600; color: var(--ch); margin-bottom: 4px; }
.ct__rack-unit span { display: block; font-size: 12.5px; font-weight: 300; color: var(--ct); line-height: 1.55; }

/* ---------- 05. Infrastructure-to-users signal rail ---------- */
.ct__rail { padding: 130px 0; background: #fff; }
.ct__rail-track { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 1080px; margin: 84px auto 0; }
.ct__rail-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--cdark), var(--cc), var(--cc3), var(--csky2));
  z-index: 0;
}
.ct__rail-node { position: relative; z-index: 1; flex: 1; height: 170px; display: flex; align-items: center; justify-content: center; }
.ct__rail-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--cc); }
.ct__rail-node--end .ct__rail-dot { border-color: var(--csky); }
.ct__rail-label { position: absolute; left: 50%; transform: translateX(-50%); width: 165px; text-align: center; }
.ct__rail-node:nth-child(odd) .ct__rail-label { bottom: calc(50% + 22px); }
.ct__rail-node:nth-child(even) .ct__rail-label { top: calc(50% + 22px); }
.ct__rail-label strong { display: block; font-size: 15px; font-weight: 600; color: var(--ch); margin-bottom: 6px; }
.ct__rail-label span { display: block; font-size: 12px; font-weight: 300; color: var(--ct); line-height: 1.55; }

/* ---------- 06. "What we build" index list ---------- */
.ct__build { padding: 130px 0; background: var(--cbg); }
.ct__build-list { column-count: 2; column-gap: 60px; margin-top: 56px; }
.ct__build-item { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--cb); break-inside: avoid; }
.ct__build-item:first-child { border-top: none; padding-top: 0; }
.ct__build-num { flex: 0 0 auto; width: 28px; font-size: 12.5px; font-weight: 700; color: var(--cc); opacity: .55; }
.ct__build-body strong { display: block; font-size: 15px; font-weight: 600; color: var(--ch); margin-bottom: 4px; }
.ct__build-body span { display: block; font-size: 13px; font-weight: 300; color: var(--ct); line-height: 1.6; }

/* ---------- 07. "Designed for scale" dark quote / spec split ---------- */
.ct__scale { padding: 130px 0; background: var(--cdark); position: relative; overflow: hidden; }
.ct__scale::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 90% 10%, rgba(0, 95, 204, .28), transparent 60%);
}
.ct__scale > .container { position: relative; z-index: 1; }
.ct__scale .ct__eyebrow { color: var(--cc3); }
.ct__scale .ct__title { color: #fff; }
.ct__scale-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; margin-top: 56px; }
.ct__scale-quote { font-size: 27px; font-weight: 500; line-height: 1.55; color: #fff; margin: 0; }
.ct__scale-specs { list-style: none; margin: 0; padding: 0; }
.ct__scale-specs li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; font-weight: 400; color: var(--cmuted); }
.ct__scale-specs li:first-child { border-top: none; padding-top: 0; }
.ct__scale-specs li i { color: var(--cc3); font-size: 11px; }

/* ---------- 08. Principles strip (border-only, no card fills) ---------- */
.ct__principles { padding: 130px 0; background: #fff; }
.ct__principles-row { display: flex; flex-wrap: wrap; margin-top: 60px; border-top: 1px solid var(--cb); border-left: 1px solid var(--cb); }
.ct__principle { flex: 1 1 0; min-width: 150px; padding: 34px 26px; border-right: 1px solid var(--cb); border-bottom: 1px solid var(--cb); text-align: center; }
.ct__principle-word { display: block; font-size: 21px; font-weight: 700; color: var(--ch); margin-bottom: 10px; letter-spacing: .3px; }
.ct__principle p { font-size: 13px; font-weight: 300; color: var(--ct); line-height: 1.6; margin: 0; }

/* ---------- 09. Related technology / service links ---------- */
.ct__related { padding: 90px 0; background: var(--cbg); border-top: 1px solid var(--cb); }
.ct__related-head { text-align: center; margin-bottom: 34px; }
.ct__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cc); }
.ct__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ct__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--cb);
  background: #fff;
  color: var(--ch);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease;
}
.ct__related-list a:hover { border-color: var(--cc); color: var(--cc); background: var(--cbg); }
.ct__related-list a i { color: var(--cc); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ct__hero-glow,
  .ct__hero-chip,
  .ct__marquee-track { animation: none; }
  .ct__page * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1399px) {
  .ct__hero-title { font-size: 45px; }
}
@media only screen and (max-width: 1199px) {
  .ct__page .ct__title { font-size: 34px; }
  .ct__hero { padding: 170px 0 100px; }
  .ct__hero-title { font-size: 40px; }
  .ct__hero-grid { gap: 46px; }
  .ct__found-grid { grid-template-columns: 1fr; gap: 40px; }
  .ct__rack-grid { grid-template-columns: repeat(2, 1fr); }
  .ct__scale-grid { grid-template-columns: 1fr; gap: 40px; }
  .ct__hero-chip--1 { left: -14px; }
  .ct__hero-chip--2 { right: -10px; }
}
@media only screen and (max-width: 991px) {
  .ct__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .ct__hero-frame { max-width: 460px; margin: 0 auto; }
  .ct__rail-track { flex-direction: column; align-items: flex-start; gap: 36px; max-width: 420px; }
  .ct__rail-track::before { left: 8px; right: auto; top: 0; bottom: 0; height: auto; width: 2px; transform: none; background: linear-gradient(180deg, var(--cdark), var(--cc), var(--cc3), var(--csky2)); }
  .ct__rail-node { flex: 0 0 auto; height: auto; width: 100%; justify-content: flex-start; }
  .ct__rail-label { position: static; transform: none; width: auto; text-align: left; margin-left: 34px; }
  .ct__principle { flex-basis: 33.33%; }
}
@media only screen and (max-width: 767px) {
  .ct__page .ct__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .ct__page .ct__title { font-size: 26px; }
  .ct__hero { padding: 140px 0 80px; }
  .ct__hero-title { font-size: 30px; }
  .ct__hero-lead { font-size: 17px; }
  .ct__hero-chip { display: none; }
  .ct__hero-btn,
  .ct__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.ct__page) section { padding: 80px 0; }
  .ct__rack-grid { grid-template-columns: 1fr; }
  .ct__build-list { column-count: 1; }
  .ct__principle { flex-basis: 50%; }
  .ct__related-list { flex-direction: column; align-items: stretch; }
  .ct__related-list a { justify-content: center; }
}

/* ============================================================
   AI & MACHINE LEARNING PAGE (aiml__*)
   Scoped entirely to .aiml__page (added on <main> of
   ai-machine-learning.html). Reuses the same brand tokens as
   .fe__page / .be__page / .mt__page / .ct__page (#005fcc
   primary, #8079f8 secondary, #07152F dark bands, #f6f7fc light
   bands, Kanit type) under an aiml__ namespace so nothing collides
   or leaks. Leans on the brand's existing violet secondary
   (#8079f8) as the page's "intelligence" accent rather than
   introducing a new hue.

   Deliberately different visual mechanics from the other four
   technology pages: a hub-and-spoke ecosystem diagram (02) with
   an inline SVG connector instead of a track/funnel/rack/bento, a
   connector-free typographic pipeline list (03), a single
   consolidated spec panel (04) instead of a card grid, a before/
   after comparison split (05), a dark pull-quote + weighted tag
   cloud (06) instead of a chip row or principles strip, and a
   restrained, plain card grid (07) reserved for the one section
   that explicitly calls for it.

   Structure: 01 hero (dark band, copy left / image right) - 02
   keyword marquee - 03 "beyond the demo" intro (chip row) - 04
   intelligence stack hub-and-spoke - 05 prompt-to-production
   typographic pipeline - 06 AI agents spec panel - 07 knowledge/
   RAG comparison split - 08 "models are only one part" dark
   quote + tag cloud - 09 business value card grid - 10 related
   links - 11 shared .final-cta closes the page.
   ============================================================ */
.aiml__page {
  --ac: #005fcc;
  --ac2: #8079f8;
  --ac3: #4da3ff;
  --ac4: #a78bfa;
  --ah: #1c1e2b;
  --at: #6b7089;
  --ab: #e9eaf5;
  --abg: #f6f7fc;
  --adark: #07152F;
  --amuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.aiml__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.aiml__page .aiml__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ac2);
  margin-bottom: 16px;
}
.aiml__page .aiml__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--ah); margin: 0 0 20px; }
.aiml__page .aiml__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--at); margin: 0 0 16px; }
.aiml__page .aiml__text:last-child { margin-bottom: 0; }
.aiml__page .aiml__text a { color: var(--ac); text-decoration: underline; text-underline-offset: 3px; }
.aiml__page .aiml__text a:hover { color: var(--ac2); }
.aiml__page .aiml__head { max-width: 760px; }
.aiml__page .aiml__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Hero (copy left / image right) ---------- */
.aiml__hero {
  position: relative;
  overflow: hidden;
  background: var(--adark);
  padding: 200px 0 120px;
}
.aiml__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 8% -12%, rgba(128, 121, 204, .38), transparent 62%),
              radial-gradient(760px 460px at 100% 108%, rgba(0, 95, 204, .32), transparent 64%);
}
.aiml__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.aiml__hero > .container { position: relative; z-index: 2; }
.aiml__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.aiml__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(167, 139, 250, .35);
  background: rgba(167, 139, 250, .1);
  color: var(--ac4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.aiml__hero-eyebrow i { font-size: 12px; }
.aiml__hero-title { font-size: 52px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 24px; }
.aiml__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--ac4), var(--ac3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aiml__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.aiml__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--amuted); margin: 0 0 16px; }
.aiml__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.aiml__hero-btn,
.aiml__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.aiml__hero-btn { color: #fff; background: var(--ac2); border: 2px solid var(--ac2); }
.aiml__hero-btn:hover { background: var(--ac); border-color: var(--ac); }
.aiml__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.aiml__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--adark); }
.aiml__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.aiml__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.aiml__hero-figure { position: relative; }
.aiml__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(128, 121, 204, .55), rgba(0, 95, 204, .4), rgba(167, 139, 250, .5), rgba(128, 121, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: aimlKfSpin 26s linear infinite;
}
.aiml__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aiml__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aiml__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.aiml__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--ac4);
  font-size: 24px;
}
.aiml__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.aiml__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--amuted); max-width: 220px; }
.aiml__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: aimlKfFloat 6s ease-in-out infinite;
}
.aiml__hero-chip i { color: var(--ac4); font-size: 18px; }
.aiml__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.aiml__hero-chip span { font-size: 13px; font-weight: 300; color: var(--amuted); }
.aiml__hero-chip--1 { left: -34px; top: 14%; }
.aiml__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes aimlKfSpin { to { transform: rotate(360deg); } }
@keyframes aimlKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.aiml__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.aiml__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.aiml__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: aimlKfMarquee 38s linear infinite; }
.aiml__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.aiml__marquee-track i { color: var(--ac4); font-size: 8px; }
@keyframes aimlKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. "Beyond the demo" intro (chip row) ---------- */
.aiml__intro { padding: 130px 0; background: #fff; }
.aiml__intro-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 44px 0 0; padding: 0; }
.aiml__intro-chips li { font-size: 13px; font-weight: 500; color: var(--ac2); background: var(--abg); border: 1px solid var(--ab); padding: 9px 18px; border-radius: 20px; }

/* ---------- 04. Intelligence stack (hub-and-spoke) ---------- */
.aiml__stack { padding: 130px 0; background: var(--abg); }
.aiml__stack-diagram { position: relative; max-width: 940px; margin: 72px auto 0; }
.aiml__stack-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.aiml__stack-lines path { fill: none; stroke: var(--ab); stroke-width: 1.5; }
.aiml__stack-hub {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac2), var(--ac));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: #fff;
  box-shadow: 0 26px 54px -18px rgba(128, 121, 204, .55);
}
.aiml__stack-hub i { font-size: 22px; }
.aiml__stack-hub span { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 0 10px; }
.aiml__stack-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 90px 60px; }
.aiml__stack-card {
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 18px;
  padding: 28px 26px;
  transition: all .3s ease;
}
.aiml__stack-card:hover { border-color: var(--ac2); box-shadow: 0 20px 44px rgba(128, 121, 204, .12); transform: translateY(-4px); }
.aiml__stack-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(128, 121, 204, .1);
  color: var(--ac2);
  font-size: 19px;
  margin-bottom: 16px;
}
.aiml__stack-card h3 { font-size: 17px; font-weight: 600; color: var(--ah); margin: 0 0 8px; }
.aiml__stack-card p { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--at); margin: 0 0 16px; }
.aiml__stack-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.aiml__stack-chips li { font-size: 12px; font-weight: 600; color: var(--ac2); background: var(--abg); border: 1px solid var(--ab); padding: 5px 11px; border-radius: 20px; }

/* ---------- 05. Prompt-to-production pipeline (typographic list) ---------- */
.aiml__pipeline { padding: 130px 0; background: #fff; }
.aiml__pipeline-list { max-width: 880px; margin: 56px auto 0; }
.aiml__pipeline-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ab); }
.aiml__pipeline-row:last-child { border-bottom: none; padding-bottom: 0; }
.aiml__pipeline-num { font-size: 12.5px; font-weight: 700; color: var(--ac2); opacity: .6; flex: 0 0 auto; width: 26px; }
.aiml__pipeline-row strong { font-size: 16px; font-weight: 600; color: var(--ah); flex: 0 0 auto; min-width: 120px; }
.aiml__pipeline-row span { font-size: 14px; font-weight: 300; color: var(--at); line-height: 1.7; flex: 1 1 260px; }

/* ---------- 06. AI agents spec panel ---------- */
.aiml__agents { padding: 130px 0; background: var(--abg); }
.aiml__agents-panel { background: #fff; border: 1px solid var(--ab); border-radius: 24px; padding: 50px; max-width: 960px; margin: 56px auto 0; }
.aiml__agents-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.aiml__agents-list li { display: flex; align-items: flex-start; gap: 14px; }
.aiml__agents-list li i { color: var(--ac2); font-size: 15px; margin-top: 4px; flex: 0 0 auto; }
.aiml__agents-list li span { font-size: 14.5px; font-weight: 400; color: var(--ah); line-height: 1.6; }

/* ---------- 07. Knowledge / RAG comparison split ---------- */
.aiml__knowledge { padding: 130px 0; background: #fff; }
.aiml__knowledge-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ab); border: 1px solid var(--ab); border-radius: 20px; overflow: hidden; max-width: 940px; margin: 56px auto 0; }
.aiml__knowledge-panel { background: var(--abg); padding: 40px 36px; }
.aiml__knowledge-panel--grounded { background: #fff; }
.aiml__knowledge-panel h3 { font-size: 17px; font-weight: 600; color: var(--ah); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; }
.aiml__knowledge-panel--grounded h3 { color: var(--ac2); }
.aiml__knowledge-panel ul { list-style: none; margin: 0; padding: 0; }
.aiml__knowledge-panel li { font-size: 13.5px; font-weight: 300; color: var(--at); line-height: 1.7; padding: 10px 0; border-top: 1px solid var(--ab); }
.aiml__knowledge-panel li:first-child { border-top: none; padding-top: 0; }
.aiml__page .aiml__knowledge-note { text-align: center; max-width: 760px; margin: 30px auto 0; }

/* ---------- 08. "Models are only one part" dark quote + tag cloud ---------- */
.aiml__editorial { padding: 130px 0; background: var(--adark); position: relative; overflow: hidden; }
.aiml__editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 90% 10%, rgba(128, 121, 204, .3), transparent 60%);
}
.aiml__editorial > .container { position: relative; z-index: 1; }
.aiml__editorial-quote { font-size: 29px; font-weight: 500; line-height: 1.55; color: #fff; text-align: center; max-width: 820px; margin: 0 auto 48px; }
.aiml__editorial-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 14px 20px; max-width: 820px; margin: 0 auto; }
.aiml__editorial-cloud span.sm { font-size: 13px; font-weight: 300; color: var(--amuted); }
.aiml__editorial-cloud span.md { font-size: 15px; font-weight: 400; color: #cfe0f3; }
.aiml__editorial-cloud span.lg { font-size: 19px; font-weight: 600; color: #fff; }

/* ---------- 09. Business value card grid ---------- */
.aiml__value { padding: 130px 0; background: var(--abg); }
.aiml__value-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--ab); border: 1px solid var(--ab); border-radius: 18px; overflow: hidden; margin-top: 56px; }
.aiml__value-card { background: #fff; padding: 30px 24px; }
.aiml__value-card i { color: var(--ac2); font-size: 20px; margin-bottom: 16px; display: block; }
.aiml__value-card h3 { font-size: 14.5px; font-weight: 600; color: var(--ah); margin: 0 0 8px; }
.aiml__value-card p { font-size: 12.5px; font-weight: 300; color: var(--at); line-height: 1.6; margin: 0; }

/* ---------- 10. Related technology / service links ---------- */
.aiml__related { padding: 90px 0; background: var(--abg); border-top: 1px solid var(--ab); }
.aiml__related-head { text-align: center; margin-bottom: 34px; }
.aiml__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ac2); }
.aiml__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.aiml__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--ab);
  background: #fff;
  color: var(--ah);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease;
}
.aiml__related-list a:hover { border-color: var(--ac2); color: var(--ac2); background: var(--abg); }
.aiml__related-list a i { color: var(--ac2); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aiml__hero-glow,
  .aiml__hero-chip,
  .aiml__marquee-track { animation: none; }
  .aiml__page * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1399px) {
  .aiml__hero-title { font-size: 45px; }
}
@media only screen and (max-width: 1199px) {
  .aiml__page .aiml__title { font-size: 34px; }
  .aiml__hero { padding: 170px 0 100px; }
  .aiml__hero-title { font-size: 40px; }
  .aiml__hero-grid { gap: 46px; }
  .aiml__stack-hub { width: 130px; height: 130px; }
  .aiml__value-grid { grid-template-columns: repeat(3, 1fr); }
  .aiml__hero-chip--1 { left: -14px; }
  .aiml__hero-chip--2 { right: -10px; }
}
@media only screen and (max-width: 991px) {
  .aiml__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .aiml__hero-frame { max-width: 460px; margin: 0 auto; }
  .aiml__stack-hub { position: static; transform: none; margin: 0 auto 40px; width: 130px; height: 130px; }
  .aiml__stack-lines { display: none; }
  .aiml__stack-grid { grid-template-columns: 1fr; gap: 20px; }
  .aiml__agents-list { grid-template-columns: 1fr; }
  .aiml__knowledge-compare { grid-template-columns: 1fr; }
  .aiml__value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .aiml__page .aiml__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .aiml__page .aiml__title { font-size: 26px; }
  .aiml__hero { padding: 140px 0 80px; }
  .aiml__hero-title { font-size: 30px; }
  .aiml__hero-lead { font-size: 17px; }
  .aiml__hero-chip { display: none; }
  .aiml__hero-btn,
  .aiml__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.aiml__page) section { padding: 80px 0; }
  .aiml__pipeline-row strong { min-width: 100%; }
  .aiml__agents-panel { padding: 34px 24px; }
  .aiml__value-grid { grid-template-columns: 1fr; }
  .aiml__editorial-quote { font-size: 23px; }
  .aiml__related-list { flex-direction: column; align-items: stretch; }
  .aiml__related-list a { justify-content: center; }
}

/* ============================================================
   DATA TECHNOLOGIES PAGE (dt__*)
   Scoped entirely to .dt__page (added on <main> of
   data-technologies.html). Reuses the same brand tokens as
   .fe__page / .be__page / .mt__page / .ct__page / .aiml__page
   (#005fcc primary, #8079f8 secondary, #07152F dark bands,
   #f6f7fc light bands, Kanit type) under a dt__ namespace so
   nothing collides or leaks (verified against every existing
   page-scoped prefix in this file before use, including the
   pre-existing .ai__page block for artificial-intelligence.html).
   Adds a green accent (#16a34a, already part of the sitewide
   multi-hue palette used elsewhere) as this page's supplementary
   "signal" colour.

   Deliberately different visual mechanics from the other five
   technology pages: a curved SVG wave path (03) instead of a
   straight rail/track/funnel, connected horizontal "lane" cards
   with a spine (04) instead of clusters/racks/hub-spoke, a
   ghost-number card grid (05), a dense single-column tech
   directory (06), a minimal vertical pill chain (07) for the
   architecture story, a two-column checklist editorial (08), and
   left-accented use-case cards (09).

   Structure: 01 hero (dark band, copy left / image right) - 02
   keyword marquee - 03 data lifecycle wave (Capture-Act) - 04
   technology ecosystem lanes - 05 capability ghost-number grid -
   06 technology directory (10 detailed rows) - 07 architecture
   pill chain - 08 "why 3Shadz" editorial + checklist - 09 use
   cases - 10 related links - 11 shared .final-cta closes the
   page.
   ============================================================ */
.dt__page {
  --dc: #005fcc;
  --dc2: #8079f8;
  --dc3: #4da3ff;
  --dgreen: #16a34a;
  --dgreen2: #86efac;
  --dh: #1c1e2b;
  --dt: #6b7089;
  --db: #e9eaf5;
  --dbg: #f6f7fc;
  --ddark: #07152F;
  --dmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.dt__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.dt__page .dt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dc);
  margin-bottom: 16px;
}
.dt__page .dt__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--dh); margin: 0 0 20px; }
.dt__page .dt__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--dt); margin: 0 0 16px; }
.dt__page .dt__text:last-child { margin-bottom: 0; }
.dt__page .dt__text a { color: var(--dc); text-decoration: underline; text-underline-offset: 3px; }
.dt__page .dt__text a:hover { color: var(--dc2); }
.dt__page .dt__head { max-width: 760px; }
.dt__page .dt__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Hero (copy left / image right) ---------- */
.dt__hero {
  position: relative;
  overflow: hidden;
  background: var(--ddark);
  padding: 200px 0 120px;
}
.dt__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 8% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 100% 108%, rgba(22, 163, 74, .24), transparent 64%);
}
.dt__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.dt__hero > .container { position: relative; z-index: 2; }
.dt__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dt__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--dc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.dt__hero-eyebrow i { font-size: 12px; }
.dt__hero-title { font-size: 52px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 24px; }
.dt__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--dc3), var(--dgreen2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dt__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.dt__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dmuted); margin: 0 0 16px; }
.dt__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.dt__hero-btn,
.dt__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dt__hero-btn { color: #fff; background: var(--dc); border: 2px solid var(--dc); }
.dt__hero-btn:hover { background: var(--dc3); border-color: var(--dc3); }
.dt__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.dt__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--ddark); }
.dt__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dt__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.dt__hero-figure { position: relative; }
.dt__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .55), rgba(22, 163, 74, .35), rgba(77, 163, 255, .5), rgba(0, 95, 204, .55));
  filter: blur(70px);
  opacity: .55;
  animation: dtKfSpin 26s linear infinite;
}
.dt__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dt__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.dt__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--dc3);
  font-size: 24px;
}
.dt__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.dt__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--dmuted); max-width: 220px; }
.dt__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: dtKfFloat 6s ease-in-out infinite;
}
.dt__hero-chip i { color: var(--dgreen2); font-size: 18px; }
.dt__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.dt__hero-chip span { font-size: 13px; font-weight: 300; color: var(--dmuted); }
.dt__hero-chip--1 { left: -34px; top: 14%; }
.dt__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes dtKfSpin { to { transform: rotate(360deg); } }
@keyframes dtKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.dt__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dt__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dt__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: dtKfMarquee 38s linear infinite; }
.dt__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.dt__marquee-track i { color: var(--dc3); font-size: 8px; }
@keyframes dtKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Data lifecycle wave (Capture -> Act) ---------- */
.dt__wave { padding: 130px 0; background: #fff; }
.dt__wave-diagram { position: relative; max-width: 1080px; margin: 84px auto 0; }
.dt__wave-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.dt__wave-svg path { fill: none; stroke: var(--db); stroke-width: 2; }
.dt__wave-track { position: relative; z-index: 1; display: flex; justify-content: space-between; }
.dt__wave-stop { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.dt__wave-stop:nth-child(odd) { margin-top: 0; }
.dt__wave-stop:nth-child(even) { margin-top: 130px; }
.dt__wave-dot {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dc);
  color: var(--dc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 14px;
  transition: all .3s ease;
}
.dt__wave-stop:hover .dt__wave-dot { background: var(--dc); color: #fff; transform: translateY(-4px); }
.dt__wave-stop:last-child .dt__wave-dot { border-color: var(--dgreen); color: var(--dgreen); }
.dt__wave-stop:last-child:hover .dt__wave-dot { background: var(--dgreen); color: #fff; }
.dt__wave-stop h3 { font-size: 15px; font-weight: 600; color: var(--dh); margin: 0 0 4px; }
.dt__wave-stop p { font-size: 12px; font-weight: 300; color: var(--dt); line-height: 1.5; margin: 0; }

/* ---------- 04. Technology ecosystem lanes ---------- */
.dt__eco { padding: 130px 0; background: var(--dbg); }
.dt__eco-lanes { max-width: 940px; margin: 64px auto 0; position: relative; padding-left: 54px; }
.dt__eco-lanes::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--dc), var(--dc3), var(--dgreen));
  opacity: .4;
}
.dt__eco-lane { position: relative; margin-bottom: 24px; }
.dt__eco-lane:last-child { margin-bottom: 0; }
.dt__eco-lane-dot {
  position: absolute;
  left: -54px;
  top: 26px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dc);
  z-index: 1;
}
.dt__eco-lane-card { background: #fff; border: 1px solid var(--db); border-radius: 18px; padding: 26px 30px; }
.dt__eco-lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dt__eco-lane-head h3 { font-size: 18px; font-weight: 600; color: var(--dh); margin: 0; }
.dt__eco-lane-head span { font-size: 12px; font-weight: 300; color: var(--dt); }
.dt__eco-nodes { display: flex; flex-wrap: wrap; gap: 12px; }
.dt__eco-node { display: flex; align-items: center; gap: 10px; background: var(--dbg); border: 1px solid var(--db); border-radius: 50px; padding: 8px 18px 8px 8px; }
.dt__eco-node-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--dc); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.dt__eco-node span { font-size: 13.5px; font-weight: 600; color: var(--dh); }

/* ---------- 05. Capability ghost-number grid ---------- */
.dt__cap { padding: 130px 0; background: #fff; }
.dt__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.dt__cap-card { position: relative; overflow: hidden; background: var(--dbg); border: 1px solid var(--db); border-radius: 20px; padding: 32px 28px; transition: all .3s ease; }
.dt__cap-card:hover { border-color: var(--dc); background: #fff; box-shadow: 0 20px 44px rgba(0, 95, 204, .1); transform: translateY(-4px); }
.dt__cap-card::after {
  content: attr(data-num);
  position: absolute;
  right: 12px;
  top: 0;
  font-size: 64px;
  font-weight: 800;
  color: var(--dc);
  opacity: .07;
  line-height: 1;
  pointer-events: none;
}
.dt__cap-card > * { position: relative; z-index: 1; }
.dt__cap-card h3 { font-size: 18px; font-weight: 600; color: var(--dh); margin: 0 0 10px; }
.dt__cap-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--dt); margin: 0; }

/* ---------- 06. Technology directory (detailed rows) ---------- */
.dt__detail { padding: 130px 0; background: var(--dbg); }
.dt__detail-list { max-width: 980px; margin: 56px auto 0; border-top: 1px solid var(--db); }
.dt__detail-row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--db); }
.dt__detail-name h3 { font-size: 19px; font-weight: 600; color: var(--dh); margin: 0 0 8px; }
.dt__detail-cat { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dc); background: #fff; border: 1px solid var(--db); padding: 5px 12px; border-radius: 20px; }
.dt__detail-body p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dt); margin: 0 0 16px; }
.dt__detail-meta { display: flex; flex-wrap: wrap; gap: 28px; }
.dt__detail-meta div { flex: 1 1 220px; }
.dt__detail-meta span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--dgreen); margin-bottom: 6px; }
.dt__detail-meta strong { display: block; font-size: 13px; font-weight: 400; color: var(--dh); line-height: 1.55; }

/* ---------- 07. Architecture pill chain ---------- */
.dt__arch { padding: 130px 0; background: #fff; }
.dt__arch-flow { max-width: 520px; margin: 64px auto 0; display: flex; flex-direction: column; align-items: center; }
.dt__arch-stage {
  width: 100%;
  background: var(--dbg);
  border: 1px solid var(--db);
  border-radius: 50px;
  padding: 18px 32px;
  text-align: center;
  transition: all .3s ease;
}
.dt__arch-stage:hover { border-color: var(--dc); background: #fff; box-shadow: 0 14px 30px rgba(0, 95, 204, .08); }
.dt__arch-stage strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--dh); }
.dt__arch-stage span { display: block; font-size: 12.5px; font-weight: 300; color: var(--dt); margin-top: 3px; }
.dt__arch-stage--end { background: var(--ddark); border-color: var(--ddark); }
.dt__arch-stage--end strong { color: #fff; }
.dt__arch-stage--end span { color: var(--dmuted); }
.dt__arch-arrow { color: var(--db); font-size: 15px; padding: 10px 0; }

/* ---------- 08. Why 3Shadz editorial + checklist ---------- */
.dt__why { padding: 130px 0; background: var(--dbg); }
.dt__why-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: start; }
.dt__why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.dt__why-list li { display: flex; align-items: flex-start; gap: 12px; }
.dt__why-list li i { color: var(--dgreen); font-size: 14px; margin-top: 4px; flex: 0 0 auto; }
.dt__why-list li span { font-size: 14px; font-weight: 400; color: var(--dh); line-height: 1.6; }

/* ---------- 09. Use cases (left-accented cards) ---------- */
.dt__cases { padding: 130px 0; background: #fff; }
.dt__cases-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 56px; }
.dt__case-card { background: var(--dbg); border: 1px solid var(--db); border-left: 3px solid var(--dgreen); border-radius: 4px 14px 14px 4px; padding: 22px 20px; }
.dt__case-card h3 { font-size: 14.5px; font-weight: 600; color: var(--dh); margin: 0 0 8px; }
.dt__case-card p { font-size: 12.5px; font-weight: 300; color: var(--dt); line-height: 1.6; margin: 0; }

/* ---------- 10. Related technology / service links ---------- */
.dt__related { padding: 90px 0; background: var(--dbg); border-top: 1px solid var(--db); }
.dt__related-head { text-align: center; margin-bottom: 34px; }
.dt__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dc); }
.dt__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dt__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--db);
  background: #fff;
  color: var(--dh);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease;
}
.dt__related-list a:hover { border-color: var(--dc); color: var(--dc); background: var(--dbg); }
.dt__related-list a i { color: var(--dc); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dt__hero-glow,
  .dt__hero-chip,
  .dt__marquee-track { animation: none; }
  .dt__page * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1399px) {
  .dt__hero-title { font-size: 45px; }
}
@media only screen and (max-width: 1199px) {
  .dt__page .dt__title { font-size: 34px; }
  .dt__hero { padding: 170px 0 100px; }
  .dt__hero-title { font-size: 40px; }
  .dt__hero-grid { gap: 46px; }
  .dt__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .dt__cases-grid { grid-template-columns: repeat(3, 1fr); }
  .dt__why-grid { grid-template-columns: 1fr; gap: 40px; }
  .dt__hero-chip--1 { left: -14px; }
  .dt__hero-chip--2 { right: -10px; }
}
@media only screen and (max-width: 991px) {
  .dt__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .dt__hero-frame { max-width: 460px; margin: 0 auto; }
  .dt__wave-svg { display: none; }
  .dt__wave-track { flex-direction: column; align-items: center; gap: 28px; }
  .dt__wave-stop:nth-child(odd),
  .dt__wave-stop:nth-child(even) { margin-top: 0; }
  .dt__detail-row { grid-template-columns: 1fr; gap: 14px; }
  .dt__why-list { grid-template-columns: 1fr; }
  .dt__cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .dt__page .dt__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .dt__page .dt__title { font-size: 26px; }
  .dt__hero { padding: 140px 0 80px; }
  .dt__hero-title { font-size: 30px; }
  .dt__hero-lead { font-size: 17px; }
  .dt__hero-chip { display: none; }
  .dt__hero-btn,
  .dt__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.dt__page) section { padding: 80px 0; }
  .dt__eco-lanes { padding-left: 40px; }
  .dt__eco-lane-dot { left: -40px; width: 30px; height: 30px; font-size: 11px; top: 22px; }
  .dt__cap-grid { grid-template-columns: 1fr; }
  .dt__cases-grid { grid-template-columns: 1fr; }
  .dt__related-list { flex-direction: column; align-items: stretch; }
  .dt__related-list a { justify-content: center; }
}

/* ============================================================
   DEVOPS & AUTOMATION TECHNOLOGY PAGE (devops-automation-technology.html)
   Scoped under .dat__page. Journey-based layout distinct from the
   fe__/be__/dt__ pages it shares furniture patterns with:
   01 hero (placeholder frame, no image shipped yet) - 02 keyword
   marquee - 03 automation loop (Develop>Deliver>Operate>Learn) -
   04 nine-stage delivery flow track - 05 grouped technology stack
   (featured Docker/Kubernetes + 3 clusters) - 06 IaC code-window
   visual - 07 seven-band commit-to-production chain - 08 Kubernetes
   cluster/node/pod diagram - 09 GitOps sync ring - 10 observability
   dashboard mock (metric tiles + bar chart) - 11 capability grid -
   12 related links - shared .final-cta closes the page.
   ============================================================ */
.dat__page {
  --dac: #005fcc;
  --dac2: #8079f8;
  --dac3: #4da3ff;
  --dasig: #22c55e;
  --dawarn: #f59e0b;
  --dah: #1c1e2b;
  --damute: #6b7089;
  --dab: #e9eaf5;
  --dabg: #f6f7fc;
  --dadark: #07152F;
  --damuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.dat__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.dat__page .dat__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dac);
  margin-bottom: 18px;
}
.dat__page .dat__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--dah); margin: 0 0 20px; }
.dat__page .dat__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--damute); margin: 0 0 16px; }
.dat__page .dat__text:last-child { margin-bottom: 0; }
.dat__page .dat__text a { color: var(--dac); text-decoration: underline; text-underline-offset: 3px; }
.dat__page .dat__text a:hover { color: var(--dac2); }
.dat__page .dat__head { max-width: 760px; }
.dat__page .dat__head--center { margin: 0 auto 56px; text-align: center; }

/* ---------- 01. Hero ---------- */
.dat__hero {
  position: relative;
  padding: 210px 0 120px;
  background: var(--dadark);
  overflow: hidden;
}
.dat__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 460px at 12% 8%, rgba(0, 95, 204, .28), transparent 65%),
              radial-gradient(640px 480px at 92% 92%, rgba(128, 121, 248, .22), transparent 65%);
  pointer-events: none;
}
.dat__hero::after {
  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: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.dat__hero > .container { position: relative; z-index: 2; }
.dat__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dat__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dac3);
  margin-bottom: 22px;
}
.dat__hero-eyebrow i { font-size: 12px; }
.dat__hero-title { font-size: 52px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 24px; }
.dat__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--dac3), var(--dac2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dat__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.dat__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--damuted); margin: 0 0 16px; }
.dat__hero-text a { color: var(--dac3); text-decoration: underline; text-underline-offset: 3px; }
.dat__hero-text a:hover { color: #fff; }
.dat__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.dat__hero-btn,
.dat__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  transition: all .3s ease;
}
.dat__hero-btn { color: #fff; background: var(--dac); border: 2px solid var(--dac); }
.dat__hero-btn:hover { background: var(--dac2); border-color: var(--dac2); }
.dat__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.dat__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--dadark); }
.dat__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dat__hero-pills li {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  color: #dbe6f4;
  font-size: 13px;
  font-weight: 400;
}
.dat__hero-figure { position: relative; }
.dat__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .18), rgba(128, 121, 248, .18), rgba(34, 197, 94, .15), rgba(0, 95, 204, .18));
  filter: blur(60px);
  animation: datKfSpin 22s linear infinite;
  z-index: 0;
}
.dat__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dat__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dat__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.dat__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--dac3);
  font-size: 24px;
}
.dat__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.dat__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--damuted); max-width: 220px; }
.dat__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: datKfFloat 6s ease-in-out infinite;
}
.dat__hero-chip i { color: var(--dac3); font-size: 18px; }
.dat__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.dat__hero-chip span { font-size: 13px; font-weight: 300; color: var(--damuted); }
.dat__hero-chip--1 { left: -34px; top: 14%; }
.dat__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes datKfSpin { to { transform: rotate(360deg); } }
@keyframes datKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.dat__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dat__marquee-mask { overflow: hidden; }
.dat__marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  white-space: nowrap;
  animation: datKfMarquee 34s linear infinite;
}
.dat__marquee-track span { font-size: 14px; font-weight: 500; letter-spacing: .5px; color: var(--damuted); }
.dat__marquee-track i { font-size: 5px; color: var(--dac3); }
@keyframes datKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Automation loop (Develop > Deliver > Operate > Learn) ---------- */
.dat__beyond { padding: 130px 0; background: #fff; }
.dat__loop { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 6px 4px; margin-top: 56px; }
.dat__loop-node { width: 210px; text-align: center; padding: 26px 16px; border-radius: 16px; background: var(--dabg); border: 1px solid var(--dab); transition: all .3s ease; }
.dat__loop-node:hover { border-color: var(--dac); transform: translateY(-4px); }
.dat__loop-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--dab);
  color: var(--dac);
  font-size: 19px;
  margin-bottom: 16px;
}
.dat__loop-node--end .dat__loop-ico { color: var(--dasig); border-color: var(--dasig); }
.dat__loop-node h3 { font-size: 16px; font-weight: 600; color: var(--dah); margin: 0 0 8px; }
.dat__loop-node p { font-size: 13px; font-weight: 300; color: var(--damute); line-height: 1.55; margin: 0; }
.dat__loop-arrow { align-self: center; font-size: 16px; color: var(--dab); flex: 0 0 auto; }
.dat__loop-note { text-align: center; margin: 30px auto 0; max-width: 620px; font-size: 14px; font-weight: 300; color: var(--damute); }
.dat__loop-note i { color: var(--dac); margin-right: 6px; }
.dat__loop-note strong { color: var(--dah); font-weight: 600; }

/* ---------- 04. Nine-stage delivery flow ---------- */
.dat__flow { padding: 130px 0; background: var(--dabg); }
.dat__flow-track { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 56px; }
.dat__flow-node {
  position: relative;
  width: 128px;
  text-align: center;
  padding: 20px 8px;
  background: #fff;
  border: 1px solid var(--dab);
  margin-left: -1px;
  transition: all .3s ease;
}
.dat__flow-node:first-child { border-radius: 14px 0 0 14px; }
.dat__flow-node:last-child { border-radius: 0 14px 14px 0; }
.dat__flow-node:hover { z-index: 2; border-color: var(--dac); box-shadow: 0 16px 34px rgba(0, 95, 204, .12); transform: translateY(-4px); }
.dat__flow-num { display: block; font-size: 11px; font-weight: 700; color: var(--dac3); letter-spacing: 1px; margin-bottom: 8px; }
.dat__flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--dabg);
  color: var(--dac);
  font-size: 16px;
  margin-bottom: 10px;
}
.dat__flow-node--end .dat__flow-ico { color: var(--dasig); background: #eafbf1; }
.dat__flow-node h3 { font-size: 13.5px; font-weight: 600; color: var(--dah); margin: 0; }

/* ---------- 05. Technology stack (featured + grouped) ---------- */
.dat__stack { padding: 130px 0; background: #fff; }
.dat__stack-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.dat__stack-feature-card {
  padding: 38px 34px;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--dadark), #0c1f42);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: all .3s ease;
}
.dat__stack-feature-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 95, 204, .18); }
.dat__stack-feature-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--dac3);
  font-size: 22px;
  margin-bottom: 20px;
}
.dat__stack-feature-card h3 { font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.dat__stack-feature-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--damuted); margin: 0; }
.dat__stack-groups { margin-top: 54px; }
.dat__stack-group { margin-top: 44px; }
.dat__stack-group:first-child { margin-top: 0; }
.dat__stack-group-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dac); margin: 0 0 20px; }
.dat__stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dat__stack-card { padding: 24px 22px; border-radius: 14px; background: var(--dabg); border: 1px solid var(--dab); transition: all .3s ease; }
.dat__stack-card:hover { border-color: var(--dac); background: #fff; box-shadow: 0 16px 34px rgba(0, 95, 204, .08); }
.dat__stack-card h4 { font-size: 15.5px; font-weight: 600; color: var(--dah); margin: 0 0 8px; }
.dat__stack-card p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--damute); margin: 0; }

/* ---------- 06. Infrastructure as Code (code-window visual) ---------- */
.dat__iac { padding: 130px 0; background: var(--dabg); }
.dat__iac-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.dat__code-window {
  border-radius: 16px;
  overflow: hidden;
  background: #0c1220;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 70px rgba(7, 21, 47, .22);
}
.dat__code-titlebar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: #10182c; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.dat__code-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dat__code-dot--r { background: #f56565; }
.dat__code-dot--y { background: #f5c344; }
.dat__code-dot--g { background: #38c172; }
.dat__code-filename { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--damuted); font-family: "Courier New", monospace; }
.dat__code-body { margin: 0; padding: 26px 24px; font-family: "Courier New", monospace; font-size: 13.5px; line-height: 1.9; color: #cfd8e8; overflow-x: auto; }
.dat__code-kw { color: #8079f8; }
.dat__code-str { color: #4da3ff; }
.dat__code-attr { color: #dbe6f4; }
.dat__code-num { color: #22c55e; }
.dat__code-comment { color: #5a6a86; font-style: italic; }

/* ---------- 07. From commit to production (band chain) ---------- */
.dat__commit { padding: 130px 0; background: #fff; }
.dat__band-stack { max-width: 880px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 14px; }
.dat__band {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border-radius: 14px;
  background: var(--dabg);
  border-left: 3px solid var(--dac);
  transition: all .3s ease;
}
.dat__band:hover { border-left-color: var(--dac2); box-shadow: 0 16px 34px rgba(0, 95, 204, .08); transform: translateX(6px); }
.dat__band--end { border-left-color: var(--dasig); }
.dat__band--end:hover { border-left-color: var(--dasig); }
.dat__band-num { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--dac3); letter-spacing: 1px; width: 30px; }
.dat__band-body { flex: 1 1 auto; }
.dat__band-body h3 { font-size: 16.5px; font-weight: 600; color: var(--dah); margin: 0 0 4px; }
.dat__band-body p { font-size: 13.5px; font-weight: 300; color: var(--damute); line-height: 1.6; margin: 0; }
.dat__band-tags { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; max-width: 220px; justify-content: flex-end; }
.dat__band-tags span { padding: 5px 12px; border-radius: 50px; background: #fff; border: 1px solid var(--dab); color: var(--damute); font-size: 11px; font-weight: 500; white-space: nowrap; }

/* ---------- 08. Kubernetes & container operations (cluster diagram) ---------- */
.dat__k8s { padding: 130px 0; background: var(--dadark); }
.dat__k8s .dat__eyebrow { color: var(--dac3); }
.dat__k8s .dat__title { color: #fff; }
.dat__k8s .dat__text { color: var(--damuted); }
.dat__k8s-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.dat__k8s-chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dat__k8s-chips li { padding: 9px 18px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #dbe6f4; font-size: 13px; font-weight: 400; }
.dat__cluster {
  position: relative;
  padding: 30px 24px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(255, 255, 255, .25);
}
.dat__cluster-label { position: absolute; top: -13px; left: 24px; padding: 4px 14px; border-radius: 50px; background: var(--dadark); border: 1px solid rgba(255, 255, 255, .2); color: var(--dac3); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.dat__cluster-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dat__cluster-node { padding: 16px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.dat__cluster-node-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--damuted); margin-bottom: 12px; }
.dat__cluster-pods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dat__cluster-pod { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--dac3), var(--dac2)); animation: datKfPulse 3s ease-in-out infinite; }
.dat__cluster-pod:nth-child(2) { animation-delay: .6s; }
.dat__cluster-pod:nth-child(3) { animation-delay: 1.2s; }
@keyframes datKfPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- 09. GitOps sync ring ---------- */
.dat__gitops { padding: 130px 0; background: #fff; }
.dat__gitops-ring { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 56px; }
.dat__gitops-node { width: 240px; text-align: center; padding: 30px 22px; border-radius: 18px; background: var(--dabg); border: 1px solid var(--dab); }
.dat__gitops-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--dab);
  color: var(--dac);
  font-size: 20px;
  margin-bottom: 16px;
}
.dat__gitops-node h3 { font-size: 16px; font-weight: 600; color: var(--dah); margin: 0 0 8px; }
.dat__gitops-node p { font-size: 13px; font-weight: 300; color: var(--damute); line-height: 1.6; margin: 0; }
.dat__gitops-sync { font-size: 18px; color: var(--dac3); animation: datKfSpin 3.5s linear infinite; flex: 0 0 auto; }
.dat__gitops-note { text-align: center; max-width: 700px; margin: 30px auto 0; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--damute); }

/* ---------- 10. Observability dashboard ---------- */
.dat__observe { padding: 130px 0; background: var(--dabg); }
.dat__observe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.dat__dash { padding: 28px; border-radius: 20px; background: var(--dadark); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 70px rgba(7, 21, 47, .22); }
.dat__dash-head { display: flex; align-items: center; margin-bottom: 22px; }
.dat__dash-status { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #dbe6f4; }
.dat__dash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dasig); box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: datKfDot 2s ease-in-out infinite; }
@keyframes datKfDot { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.dat__dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.dat__dash-tile { padding: 16px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.dat__dash-tile-label { display: block; font-size: 11px; font-weight: 500; color: var(--damuted); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px; }
.dat__dash-tile-value { display: block; font-size: 19px; font-weight: 600; color: #fff; }
.dat__dash-chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 0 4px; }
.dat__dash-chart span { flex: 1 1 auto; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--dac3), var(--dac)); opacity: .85; }

/* ---------- 11. Capability grid (what we build) ---------- */
.dat__build { padding: 130px 0; background: #fff; }
.dat__build-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; }
.dat__build-card { padding: 28px 22px; border-radius: 16px; background: var(--dabg); border: 1px solid var(--dab); transition: all .3s ease; }
.dat__build-card:hover { border-color: var(--dac); background: #fff; transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0, 95, 204, .1); }
.dat__build-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--dab);
  color: var(--dac);
  font-size: 17px;
  margin-bottom: 16px;
}
.dat__build-card h3 { font-size: 15px; font-weight: 600; color: var(--dah); margin: 0 0 8px; line-height: 1.35; }
.dat__build-card p { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--damute); margin: 0; }

/* ---------- 12. Related technology / service links ---------- */
.dat__related { padding: 90px 0; background: var(--dabg); border-top: 1px solid var(--dab); }
.dat__related-head { text-align: center; margin-bottom: 34px; }
.dat__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dac); }
.dat__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dat__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 50px;
  border: 1px solid var(--dab);
  background: #fff;
  color: var(--dah);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease;
}
.dat__related-list a:hover { border-color: var(--dac); color: var(--dac); background: var(--dabg); }
.dat__related-list a i { color: var(--dac); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dat__hero-glow,
  .dat__hero-chip,
  .dat__marquee-track,
  .dat__cluster-pod,
  .dat__gitops-sync,
  .dat__dash-dot { animation: none; }
  .dat__page * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1399px) {
  .dat__hero-title { font-size: 44px; }
  .dat__build-grid { grid-template-columns: repeat(4, 1fr); }
}
@media only screen and (max-width: 1199px) {
  .dat__page .dat__title { font-size: 34px; }
  .dat__hero { padding: 170px 0 100px; }
  .dat__hero-title { font-size: 38px; }
  .dat__hero-grid { gap: 46px; }
  .dat__hero-chip--1 { left: -14px; }
  .dat__hero-chip--2 { right: -10px; }
  .dat__stack-grid { grid-template-columns: repeat(2, 1fr); }
  .dat__iac-grid,
  .dat__k8s-grid,
  .dat__observe-grid { grid-template-columns: 1fr; gap: 40px; }
  .dat__cluster-nodes { grid-template-columns: repeat(3, 1fr); }
  .dat__build-grid { grid-template-columns: repeat(3, 1fr); }
  .dat__flow-node { width: 110px; }
}
@media only screen and (max-width: 991px) {
  .dat__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .dat__hero-frame { max-width: 460px; margin: 0 auto; }
  .dat__stack-featured { grid-template-columns: 1fr; }
  .dat__loop-arrow { display: none; }
  .dat__loop-node { width: 46%; }
  .dat__flow-track { flex-wrap: wrap; justify-content: flex-start; }
  .dat__flow-node { width: calc(33.333% - 0px); border-radius: 0 !important; margin: -1px 0 0 -1px; }
  .dat__band { flex-wrap: wrap; }
  .dat__band-tags { justify-content: flex-start; max-width: 100%; margin-left: 52px; }
  .dat__gitops-sync { transform: rotate(90deg); }
  .dat__build-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .dat__page .dat__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .dat__page .dat__title { font-size: 26px; }
  .dat__hero { padding: 140px 0 80px; }
  .dat__hero-title { font-size: 30px; }
  .dat__hero-lead { font-size: 17px; }
  .dat__hero-chip { display: none; }
  .dat__hero-btn,
  .dat__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.dat__page) section { padding: 80px 0; }
  .dat__loop-node { width: 100%; }
  .dat__flow-node { width: 50%; }
  .dat__stack-grid { grid-template-columns: 1fr; }
  .dat__cluster-nodes { grid-template-columns: 1fr; }
  .dat__dash-tiles { grid-template-columns: 1fr; }
  .dat__build-grid { grid-template-columns: 1fr; }
  .dat__related-list { flex-direction: column; align-items: stretch; }
  .dat__related-list a { justify-content: center; }
}

/* ============================================================
   DATABASES PAGE (db__*)
   Scoped entirely to .db__page (added on <main> of
   databases.html). Reuses the same brand tokens as its
   .fe__/.be__/.dat__ siblings (#005fcc primary, #8079f8
   secondary, #07152F dark bands, #f6f7fc light bands, Kanit
   type) under a db__ namespace so nothing collides or leaks.
   Every keyframe here is prefixed dbKf* for the same reason.
   Hero has no shipped image yet - .db__hero-frame holds a
   genuine dashed-border placeholder (.db__hero-placeholder)
   instead of an <img>, so a real visual can be dropped in later
   without touching markup.

   Deliberately different visual mechanics from its siblings even
   though the brand language matches: a descending "data strata"
   stack (02) instead of a dotted vertical timeline or a wave, a
   grouped/richly-described technology directory (03) with
   per-card "best suited for" lists, a 10-question decision grid
   (04), a trunk-and-branches architecture diagram (05) that
   splits into five colour-coded data-store branches, a 5-up
   outcomes ribbon (06), a ghost-numbered capability grid (07),
   and colour-coded requirement -> technology rows (08).

   Structure: 01 hero - 02 keyword marquee - 03 data architecture
   layers (strata stack) - 04 technology directory (grouped rich
   cards) - 05 choosing the right database (question grid) - 06
   database architecture / data flow (trunk + branches) - 07 what
   we solve (outcomes ribbon) - 08 database engineering
   capabilities (ghost-numbered grid) - 09 requirement-to-
   technology rows - 10 related links - 11 shared .final-cta
   closes the page.
   ============================================================ */
.db__page {
  --dbc: #005fcc;
  --dbc2: #8079f8;
  --dbc3: #4da3ff;
  --dbh: #1c1e2b;
  --dbt: #6b7089;
  --dbb: #e9eaf5;
  --dbbg: #f6f7fc;
  --dbdark: #07152F;
  --dbmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.db__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.db__page .db__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dbc);
  margin-bottom: 18px;
}
.db__page .db__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--dbh); margin: 0 0 20px; }
.db__page .db__text { font-size: 15.5px; font-weight: 400; line-height: 1.85; color: var(--dbt); margin: 0 0 16px; }
.db__page .db__text:last-child { margin-bottom: 0; }
.db__page .db__text a { color: var(--dbc); text-decoration: underline; text-underline-offset: 3px; }
.db__page .db__text a:hover { color: var(--dbc2); }
.db__page .db__head { max-width: 760px; }
.db__page .db__head--center { margin: 0 auto 56px; text-align: center; }
.db__note {
  margin: 44px auto 0;
  max-width: 780px;
  text-align: center;
  padding: 18px 24px;
  border-left: 3px solid var(--dbc);
  border-radius: 0 12px 12px 0;
  background: var(--dbbg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--dbt);
}
.db__note em { font-style: normal; font-weight: 500; color: var(--dbh); }

/* ---------- 01. Hero ---------- */
.db__hero {
  position: relative;
  overflow: hidden;
  background: var(--dbdark);
  padding: 200px 0 120px;
}
.db__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 82% -10%, rgba(0, 95, 204, .38), transparent 62%),
              radial-gradient(700px 460px at 2% 106%, rgba(128, 121, 248, .22), transparent 64%),
              radial-gradient(520px 360px at 55% 60%, rgba(5, 150, 105, .10), transparent 68%);
}
.db__hero::after {
  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: 58px 58px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.db__hero > .container { position: relative; z-index: 2; }
.db__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.db__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--dbc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.db__hero-eyebrow i { font-size: 12px; }
.db__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.db__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--dbc3), var(--dbc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.db__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.db__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--dbmuted); margin: 0 0 16px; }
.db__hero-text a { color: var(--dbc3); text-decoration: underline; text-underline-offset: 3px; }
.db__hero-text a:hover { color: #fff; }
.db__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.db__hero-btn,
.db__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.db__hero-btn { color: #fff; background: var(--dbc); border: 2px solid var(--dbc); }
.db__hero-btn:hover { background: var(--dbc2); border-color: var(--dbc2); }
.db__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.db__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--dbdark); }
.db__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.db__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.db__hero-figure { position: relative; }
.db__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .5), rgba(128, 121, 248, .42), rgba(5, 150, 105, .28), rgba(0, 95, 204, .5));
  filter: blur(70px);
  opacity: .55;
  animation: dbKfSpin 26s linear infinite;
}
/* Genuine placeholder: no <img> ships until real artwork replaces
   .db__hero-placeholder. Dashed border + explicit aspect-ratio keep
   the block's footprint stable and visually intentional either way. */
.db__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.db__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.db__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--dbc3);
  font-size: 24px;
}
.db__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.db__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--dbmuted); }
.db__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: dbKfFloat 6s ease-in-out infinite;
}
.db__hero-chip i { color: var(--dbc3); font-size: 18px; }
.db__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.db__hero-chip span { font-size: 13px; font-weight: 300; color: var(--dbmuted); }
.db__hero-chip--1 { left: -34px; top: 14%; }
.db__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes dbKfSpin { to { transform: rotate(360deg); } }
@keyframes dbKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.db__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.db__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.db__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: dbKfMarquee 38s linear infinite; }
.db__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.db__marquee-track i { color: var(--dbc3); font-size: 8px; }
@keyframes dbKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Data architecture layers (descending strata stack) ---------- */
.db__layers { padding: 130px 0; background: #fff; }
.db__layers-stack { max-width: 920px; margin: 60px auto 0; }
.db__layer-band {
  position: relative;
  background: #fff;
  border: 1px solid var(--dbb);
  border-radius: 18px;
  padding: 32px 36px 32px 44px;
  margin-bottom: -20px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .05);
  transition: all .3s ease;
}
.db__layer-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 18px 0 0 18px; background: var(--band-c); }
.db__layer-band:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(15, 23, 42, .12); z-index: 5; }
.db__layer-band:last-child { margin-bottom: 0; }
.db__layer-band:nth-child(1) { width: 100%; }
.db__layer-band:nth-child(2) { width: 94%; margin-left: 3%; }
.db__layer-band:nth-child(3) { width: 88%; margin-left: 6%; }
.db__layer-band:nth-child(4) { width: 82%; margin-left: 9%; }
.db__layer-band:nth-child(5) { width: 76%; margin-left: 12%; }
.db__layer-top { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.db__layer-num { font-size: 30px; font-weight: 800; color: var(--band-c); opacity: .28; line-height: 1; }
.db__layer-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--band-c); margin-bottom: 4px; }
.db__layer-top h3 { font-size: 19px; font-weight: 600; color: var(--dbh); margin: 0; }
.db__layer-band > p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--dbt); margin: 0 0 16px; }
.db__layer-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.db__layer-chips li { font-size: 12.5px; font-weight: 500; color: var(--band-c); background: var(--dbbg); border: 1px solid var(--dbb); padding: 6px 13px; border-radius: 20px; }

/* ---------- 04. Technology directory (grouped, richly described) ---------- */
.db__dir { padding: 130px 0; background: var(--dbbg); }
.db__dir-group { margin-top: 56px; }
.db__dir-group:first-of-type { margin-top: 60px; }
.db__dir-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.db__dir-group-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--gc); color: #fff; font-size: 17px; flex: 0 0 auto; }
.db__dir-group-head h3 { font-size: 20px; font-weight: 600; color: var(--dbh); margin: 0; }
.db__dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.db__dir-card { padding: 26px; border: 1px solid var(--dbb); border-top: 3px solid var(--gc); border-radius: 16px; background: #fff; transition: all .3s ease; }
.db__dir-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .08); }
.db__dir-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.db__dir-card-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--dbbg); color: var(--gc); font-size: 16px; }
.db__dir-card-top h4 { font-size: 17px; font-weight: 600; color: var(--dbh); margin: 0 0 4px; }
.db__dir-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gc); }
.db__dir-card > p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--dbt); margin: 0 0 16px; }
.db__dir-best { margin-bottom: 16px; }
.db__dir-best span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--dbh); opacity: .6; margin-bottom: 8px; }
.db__dir-best ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.db__dir-best li { font-size: 12.5px; font-weight: 300; color: var(--dbt); padding-left: 16px; position: relative; }
.db__dir-best li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gc); }
.db__dir-strengths { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.db__dir-strengths li { font-size: 11.5px; font-weight: 500; color: var(--gc); background: var(--dbbg); padding: 5px 11px; border-radius: 20px; }

/* ---------- 05. Choosing the right database (question grid) ---------- */
.db__fit { padding: 130px 0; background: #fff; }
.db__fit-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 50px; }
.db__fit-card { padding: 22px 20px; border: 1px solid var(--dbb); border-radius: 14px; background: var(--dbbg); transition: all .3s ease; }
.db__fit-card:hover { border-color: var(--dbc); background: #fff; box-shadow: 0 14px 30px rgba(0, 95, 204, .08); transform: translateY(-4px); }
.db__fit-num { display: block; font-size: 12px; font-weight: 700; color: var(--dbc); opacity: .55; margin-bottom: 10px; }
.db__fit-card h3 { font-size: 14.5px; font-weight: 600; color: var(--dbh); margin: 0 0 6px; line-height: 1.35; }
.db__fit-card p { font-size: 12.5px; font-weight: 300; color: var(--dbt); line-height: 1.6; margin: 0; }

/* ---------- 06. Database architecture / data flow (trunk + branches) ---------- */
.db__arch { padding: 130px 0; background: var(--dbbg); }
.db__arch-diagram { max-width: 1000px; margin: 60px auto 0; }
.db__arch-trunk { display: flex; flex-direction: column; align-items: center; }
.db__arch-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  border: 1px solid var(--dbb);
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dbh);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.db__arch-node i { color: var(--dbc); }
.db__arch-node--layer { background: var(--dbh); color: #fff; border-color: var(--dbh); }
.db__arch-node--layer i { color: var(--dbc2); }
.db__arch-connector { width: 2px; height: 34px; background: linear-gradient(180deg, var(--dbb), var(--dbc)); }
.db__arch-branches { position: relative; display: flex; justify-content: center; gap: 20px; margin-top: 46px; padding-top: 36px; flex-wrap: wrap; }
.db__arch-branches::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 2px; background: var(--dbb); }
.db__arch-branch { position: relative; flex: 1 1 160px; max-width: 200px; text-align: center; }
.db__arch-branch-stem { position: absolute; top: -36px; left: 50%; width: 2px; height: 36px; background: var(--branch-c); transform: translateX(-50%); }
.db__arch-branch-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 14px; border: 1px solid var(--dbb); background: #fff; margin-bottom: 12px; }
.db__arch-branch-head i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dbbg); color: var(--branch-c); font-size: 15px; }
.db__arch-branch-head span { font-size: 13.5px; font-weight: 600; color: var(--dbh); }
.db__arch-branch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.db__arch-branch li { font-size: 12px; font-weight: 400; color: var(--dbt); background: #fff; border: 1px solid var(--dbb); border-radius: 20px; padding: 5px 10px; }

/* ---------- 07. What we solve (outcomes ribbon) ---------- */
.db__solve { padding: 130px 0; background: #fff; }
.db__solve-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 56px; }
.db__solve-item { text-align: center; padding: 28px 18px; border-radius: 16px; transition: background .3s ease; }
.db__solve-item:hover { background: var(--dbbg); }
.db__solve-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 95, 204, .08); color: var(--dbc); font-size: 20px; margin-bottom: 14px; }
.db__solve-item h3 { font-size: 15px; font-weight: 600; color: var(--dbh); margin: 0 0 6px; }
.db__solve-item p { font-size: 13px; font-weight: 300; color: var(--dbt); line-height: 1.6; margin: 0; }

/* ---------- 08. Database engineering capabilities (ghost-numbered grid) ---------- */
.db__cap { padding: 130px 0; background: var(--dbbg); }
.db__cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 56px; }
.db__cap-card { position: relative; padding: 30px 26px 26px; border: 1px solid var(--dbb); border-radius: 16px; background: #fff; overflow: hidden; transition: all .3s ease; }
.db__cap-card:hover { border-color: var(--dbc); box-shadow: 0 18px 40px rgba(0, 95, 204, .08); transform: translateY(-4px); }
.db__cap-card::after { content: attr(data-num); position: absolute; right: 8px; bottom: -12px; font-size: 64px; font-weight: 800; color: var(--dbbg); line-height: 1; pointer-events: none; }
.db__cap-ico { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--dbbg); color: var(--dbc); font-size: 19px; margin-bottom: 18px; }
.db__cap-card h3 { position: relative; z-index: 1; font-size: 17px; font-weight: 600; color: var(--dbh); margin: 0 0 10px; }
.db__cap-card p { position: relative; z-index: 1; font-size: 13.5px; font-weight: 300; color: var(--dbt); line-height: 1.7; margin: 0; }

/* ---------- 09. Requirement-to-technology rows ---------- */
.db__match { padding: 130px 0; background: #fff; }
.db__match-rows { display: grid; gap: 14px; max-width: 960px; margin: 50px auto 0; }
.db__match-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 28px; border: 1px solid var(--dbb); border-left: 4px solid var(--mc); border-radius: 14px; background: var(--dbbg); transition: all .3s ease; }
.db__match-row:hover { background: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .07); }
.db__match-req { display: flex; align-items: flex-start; gap: 14px; flex: 1 1 320px; }
.db__match-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--mc); font-size: 14px; }
.db__match-req strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--dbh); margin-bottom: 4px; }
.db__match-req span { display: block; font-size: 13px; font-weight: 300; color: var(--dbt); line-height: 1.6; }
.db__match-tech { display: flex; flex-wrap: wrap; gap: 8px; }
.db__match-pill { font-size: 12.5px; font-weight: 500; color: var(--mc); background: #fff; border: 1px solid var(--dbb); padding: 6px 14px; border-radius: 20px; }

/* ---------- 10. Related technology & service links ---------- */
.db__related { padding: 90px 0; background: #fff; border-top: 1px solid var(--dbb); }
.db__related-head { text-align: center; margin-bottom: 34px; }
.db__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dbc); }
.db__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.db__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--dbb);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dbh);
  transition: all .3s ease;
}
.db__related-list a:hover { border-color: var(--dbc); color: var(--dbc); background: var(--dbbg); }
.db__related-list a i { color: var(--dbc); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .db__page * { transition-duration: .01ms !important; }
  .db__hero-glow,
  .db__hero-chip,
  .db__marquee-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .db__hero-title { font-size: 46px; }
}
@media only screen and (max-width: 1199px) {
  .db__page .db__title { font-size: 34px; }
  .db__hero { padding: 170px 0 100px; }
  .db__hero-title { font-size: 40px; }
  .db__hero-grid { gap: 46px; }
  .db__hero-chip--1 { left: -14px; }
  .db__hero-chip--2 { right: -10px; }
  .db__fit-grid { grid-template-columns: repeat(3, 1fr); }
  .db__solve-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 991px) {
  .db__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .db__hero-frame { max-width: 460px; margin: 0 auto; }
  .db__layer-band,
  .db__layer-band:nth-child(2),
  .db__layer-band:nth-child(3),
  .db__layer-band:nth-child(4),
  .db__layer-band:nth-child(5) { width: 100%; margin-left: 0; }
  .db__layer-band { margin-bottom: 20px; }
  .db__dir-grid { grid-template-columns: repeat(2, 1fr); }
  .db__fit-grid { grid-template-columns: repeat(2, 1fr); }
  .db__solve-grid { grid-template-columns: repeat(2, 1fr); }
  .db__arch-branches { flex-direction: column; align-items: stretch; padding-top: 0; gap: 14px; }
  .db__arch-branches::before { display: none; }
  .db__arch-branch { max-width: 100%; text-align: left; }
  .db__arch-branch-stem { display: none; }
  .db__arch-branch-head { flex-direction: row; justify-content: flex-start; margin-bottom: 10px; }
  .db__arch-branch ul { flex-direction: row; flex-wrap: wrap; }
  .db__match-row { flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 767px) {
  .db__page .db__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .db__page .db__title { font-size: 26px; }
  .db__hero { padding: 140px 0 80px; }
  .db__hero-title { font-size: 30px; }
  .db__hero-lead { font-size: 17px; }
  .db__hero-chip { display: none; }
  .db__hero-btn,
  .db__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.db__page) section { padding: 80px 0; }
  .db__layer-band { padding: 26px 22px 26px 30px; }
  .db__dir-grid { grid-template-columns: 1fr; }
  .db__fit-grid { grid-template-columns: 1fr; }
  .db__solve-grid { grid-template-columns: 1fr; }
  .db__cap-grid { grid-template-columns: 1fr; }
  .db__arch-node { padding: 12px 20px; font-size: 13.5px; }
  .db__related-list { flex-direction: column; align-items: stretch; }
  .db__related-list a { justify-content: center; }
}

/* ============================================================
   CMS & DIGITAL COMMERCE PAGE (cdc__*)
   Scoped entirely to .cdc__page (added on <main> of
   cms-digital-commerce.html). Reuses the same brand tokens as
   its .fe__/.be__/.dat__/.db__ siblings (#005fcc primary,
   #8079f8 secondary, #07152F dark bands, #f6f7fc light bands,
   Kanit type) under a cdc__ namespace so nothing collides or
   leaks. Every keyframe here is prefixed cdcKf* for the same
   reason. Hero has no shipped image yet - .cdc__hero-frame holds
   a genuine dashed-border placeholder instead of an <img>.

   Deliberately different visual mechanics from its siblings: a
   horizontal "spine" pipeline (02) with cards alternating above
   and below a connecting line (Content > Experience > Commerce >
   Customer > Business) instead of a vertical track or strata
   stack; a two-column native <details>/<summary> platform matrix
   (03) instead of a card grid; a factor rail + "if the product
   is..." decision-card grid (04); a converging headless/composable
   diagram (05) - two source nodes merging into an API layer, then
   flowing linearly down to frontend and customer, the inverse of
   the databases page's diverging trunk-and-branches; a ghost-
   numbered capability grid (06); a 3x3 hub-and-spoke ecosystem
   diagram (07) with a dashed radial ring; and a 5-card colour-
   spectrum principles row (08).

   Structure: 01 hero - 02 keyword marquee - 03 digital experience
   layer (spine pipeline) - 04 CMS + commerce technology landscape
   (two-column disclosure matrix) - 05 choosing the right platform
   (factor rail + decision cards) - 06 composable & headless
   experiences (converging diagram) - 07 what we build (ghost-
   numbered grid) - 08 integration ecosystem (hub diagram) - 09
   engineering principles (5-card spectrum) - 10 related links -
   11 shared .final-cta closes the page.
   ============================================================ */
.cdc__page {
  --cdc: #005fcc;
  --cdc2: #8079f8;
  --cdc3: #4da3ff;
  --cdch: #1c1e2b;
  --cdct: #6b7089;
  --cdcb: #e9eaf5;
  --cdcbg: #f6f7fc;
  --cdcdark: #07152F;
  --cdcmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.cdc__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.cdc__page .cdc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cdc);
  margin-bottom: 18px;
}
.cdc__page .cdc__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--cdch); margin: 0 0 20px; }
.cdc__page .cdc__text { font-size: 15.5px; font-weight: 400; line-height: 1.85; color: var(--cdct); margin: 0 0 16px; }
.cdc__page .cdc__text:last-child { margin-bottom: 0; }
.cdc__page .cdc__text a { color: var(--cdc); text-decoration: underline; text-underline-offset: 3px; }
.cdc__page .cdc__text a:hover { color: var(--cdc2); }
.cdc__page .cdc__head { max-width: 760px; }
.cdc__page .cdc__head--center { margin: 0 auto 56px; text-align: center; }
.cdc__note {
  margin: 44px auto 0;
  max-width: 780px;
  text-align: center;
  padding: 18px 24px;
  border-left: 3px solid var(--cdc);
  border-radius: 0 12px 12px 0;
  background: var(--cdcbg);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--cdct);
}

/* ---------- 01. Hero ---------- */
.cdc__hero {
  position: relative;
  overflow: hidden;
  background: var(--cdcdark);
  padding: 200px 0 120px;
}
.cdc__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 82% -10%, rgba(0, 95, 204, .38), transparent 62%),
              radial-gradient(700px 460px at 2% 106%, rgba(128, 121, 248, .22), transparent 64%),
              radial-gradient(560px 380px at 60% 65%, rgba(234, 88, 12, .12), transparent 68%);
}
.cdc__hero::after {
  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: 58px 58px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.cdc__hero > .container { position: relative; z-index: 2; }
.cdc__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.cdc__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--cdc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.cdc__hero-eyebrow i { font-size: 12px; }
.cdc__hero-title { font-size: 52px; line-height: 1.14; font-weight: 600; color: #fff; margin: 0 0 24px; }
.cdc__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--cdc3), var(--cdc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cdc__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 20px; }
.cdc__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--cdcmuted); margin: 0 0 16px; }
.cdc__hero-text a { color: var(--cdc3); text-decoration: underline; text-underline-offset: 3px; }
.cdc__hero-text a:hover { color: #fff; }
.cdc__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.cdc__hero-btn,
.cdc__hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cdc__hero-btn { color: #fff; background: var(--cdc); border: 2px solid var(--cdc); }
.cdc__hero-btn:hover { background: var(--cdc2); border-color: var(--cdc2); }
.cdc__hero-btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.cdc__hero-btn-outline:hover { background: #fff; border-color: #fff; color: var(--cdcdark); }
.cdc__hero-pills { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cdc__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

.cdc__hero-figure { position: relative; }
.cdc__hero-glow {
  position: absolute;
  inset: -14% -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .5), rgba(128, 121, 248, .4), rgba(234, 88, 12, .22), rgba(0, 95, 204, .5));
  filter: blur(70px);
  opacity: .55;
  animation: cdcKfSpin 26s linear infinite;
}
.cdc__hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cdc__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdc__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.cdc__hero-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--cdc3);
  font-size: 24px;
}
.cdc__hero-placeholder-label { font-size: 15px; font-weight: 600; color: #fff; }
.cdc__hero-placeholder-note { font-size: 13px; font-weight: 300; color: var(--cdcmuted); }
.cdc__hero-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  animation: cdcKfFloat 6s ease-in-out infinite;
}
.cdc__hero-chip i { color: var(--cdc3); font-size: 18px; }
.cdc__hero-chip strong { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.cdc__hero-chip span { font-size: 13px; font-weight: 300; color: var(--cdcmuted); }
.cdc__hero-chip--1 { left: -34px; top: 14%; }
.cdc__hero-chip--2 { right: -28px; bottom: 12%; animation-delay: 3s; }
@keyframes cdcKfSpin { to { transform: rotate(360deg); } }
@keyframes cdcKfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- 02. Keyword marquee ---------- */
.cdc__marquee {
  padding: 22px 0;
  background: #061127;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.cdc__marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cdc__marquee-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: cdcKfMarquee 38s linear infinite; }
.cdc__marquee-track span { font-size: 15px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #7d92ad; white-space: nowrap; }
.cdc__marquee-track i { color: var(--cdc3); font-size: 8px; }
@keyframes cdcKfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 03. Digital Experience Layer (alternating spine) ---------- */
.cdc__layer { padding: 130px 0; background: #fff; }
.cdc__spine { position: relative; height: 300px; display: flex; margin-top: 70px; }
.cdc__spine-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #6366f1, #2563eb, #ea580c, #db2777, #0d9488);
  opacity: .3;
}
.cdc__spine-node { position: relative; flex: 1; }
.cdc__spine-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sc);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--cdcb);
  z-index: 2;
}
.cdc__spine-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background: #fff;
  border: 1px solid var(--cdcb);
  border-top: 3px solid var(--sc);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
  transition: all .3s ease;
}
.cdc__spine-card:hover { transform: translateX(-50%) translateY(-4px); box-shadow: 0 22px 44px rgba(15, 23, 42, .1); }
.cdc__spine-node--up .cdc__spine-card { bottom: calc(50% + 22px); }
.cdc__spine-node--down .cdc__spine-card { top: calc(50% + 22px); }
.cdc__spine-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--cdcbg); color: var(--sc); font-size: 16px; margin-bottom: 12px; }
.cdc__spine-card h3 { font-size: 16px; font-weight: 600; color: var(--cdch); margin: 0 0 8px; }
.cdc__spine-card p { font-size: 12.5px; font-weight: 300; color: var(--cdct); line-height: 1.6; margin: 0; }

/* ---------- 04. CMS + commerce technology landscape (disclosure matrix) ---------- */
.cdc__landscape { padding: 130px 0; background: var(--cdcbg); }
.cdc__matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; align-items: start; }
.cdc__matrix-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 2px solid var(--mc); }
.cdc__matrix-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--mc); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.cdc__matrix-head h3 { font-size: 20px; font-weight: 600; color: var(--cdch); margin: 0; }
details.cdc__plat { border: 1px solid var(--cdcb); border-radius: 14px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.cdc__plat summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
.cdc__plat summary::-webkit-details-marker { display: none; }
.cdc__plat summary:focus-visible { outline: 2px solid var(--cdc); outline-offset: -2px; }
.cdc__plat[open] summary { border-bottom: 1px solid var(--cdcb); }
.cdc__plat-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--cdcbg); color: var(--mc); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.cdc__plat-name { flex: 0 0 auto; font-size: 15.5px; font-weight: 600; color: var(--cdch); }
.cdc__plat-tag { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--mc); background: var(--cdcbg); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.cdc__plat-chevron { flex: 0 0 auto; color: var(--cdct); font-size: 13px; transition: transform .3s ease; }
.cdc__plat[open] .cdc__plat-chevron { transform: rotate(180deg); }
.cdc__plat-body { padding: 0 20px 20px 70px; }
.cdc__plat-body p { font-size: 13.5px; font-weight: 300; color: var(--cdct); line-height: 1.75; margin: 0 0 10px; }
.cdc__plat-best { display: block; font-size: 12.5px; font-weight: 500; color: var(--cdch); }

/* ---------- 05. Choosing the right platform (factors + decision cards) ---------- */
.cdc__fit { padding: 130px 0; background: #fff; }
.cdc__fit-factors { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 50px; padding: 0; justify-content: center; }
.cdc__fit-factors li { font-size: 13px; font-weight: 500; color: var(--cdc); background: var(--cdcbg); border: 1px solid var(--cdcb); padding: 8px 16px; border-radius: 20px; }
.cdc__fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cdc__fit-card { padding: 26px 24px; border: 1px solid var(--cdcb); border-radius: 16px; background: var(--cdcbg); transition: all .3s ease; }
.cdc__fit-card:hover { border-color: var(--cdc); background: #fff; box-shadow: 0 18px 40px rgba(0, 95, 204, .08); transform: translateY(-4px); }
.cdc__fit-need { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cdct); opacity: .7; margin-bottom: 10px; }
.cdc__fit-card h3 { font-size: 15.5px; font-weight: 600; color: var(--cdch); margin: 0 0 18px; line-height: 1.4; min-height: 66px; }
.cdc__fit-dir { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--cdc); }

/* ---------- 06. Composable & headless experiences (converging diagram) ---------- */
.cdc__headless { padding: 130px 0; background: var(--cdcbg); }
.cdc__converge { max-width: 640px; margin: 60px auto 0; display: flex; flex-direction: column; align-items: center; }
.cdc__converge-sources { position: relative; display: flex; gap: 24px; justify-content: center; width: 100%; padding-bottom: 36px; }
.cdc__converge-node {
  position: relative;
  background: #fff;
  border: 1px solid var(--cdcb);
  border-top: 3px solid var(--cc);
  border-radius: 16px;
  padding: 22px 24px;
  text-align: center;
  width: 220px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .05);
}
.cdc__converge-node i { color: var(--cc); font-size: 22px; margin-bottom: 12px; display: block; }
.cdc__converge-node h3 { font-size: 15.5px; font-weight: 600; color: var(--cdch); margin: 0 0 8px; }
.cdc__converge-node p { font-size: 12.5px; font-weight: 300; color: var(--cdct); line-height: 1.6; margin: 0; }
.cdc__converge-node a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cdc__converge-node ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cdc__converge-node li { font-size: 12px; color: var(--cdct); background: var(--cdcbg); border: 1px solid var(--cdcb); border-radius: 20px; padding: 5px 10px; }
.cdc__converge-sources::before { content: ""; position: absolute; bottom: 0; left: 22%; right: 22%; height: 2px; background: var(--cdcb); }
.cdc__converge-sources .cdc__converge-node::after { content: ""; position: absolute; bottom: -36px; left: 50%; width: 2px; height: 36px; background: var(--cc); transform: translateX(-50%); }
.cdc__converge-node--hub { width: 260px; }
.cdc__converge-arrow { color: var(--cdcb); font-size: 20px; margin: 14px 0; }

/* ---------- 07. What we build (ghost-numbered grid) ---------- */
.cdc__build { padding: 130px 0; background: #fff; }
.cdc__build-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 56px; }
.cdc__build-card { position: relative; padding: 30px 26px 26px; border: 1px solid var(--cdcb); border-radius: 16px; background: #fff; overflow: hidden; transition: all .3s ease; }
.cdc__build-card:hover { border-color: var(--cdc); box-shadow: 0 18px 40px rgba(0, 95, 204, .08); transform: translateY(-4px); }
.cdc__build-card::after { content: attr(data-num); position: absolute; right: 8px; bottom: -12px; font-size: 64px; font-weight: 800; color: var(--cdcbg); line-height: 1; pointer-events: none; }
.cdc__build-ico { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--cdcbg); color: var(--cdc); font-size: 19px; margin-bottom: 18px; }
.cdc__build-card h3 { position: relative; z-index: 1; font-size: 16.5px; font-weight: 600; color: var(--cdch); margin: 0 0 10px; }
.cdc__build-card p { position: relative; z-index: 1; font-size: 13.5px; font-weight: 300; color: var(--cdct); line-height: 1.7; margin: 0; }

/* ---------- 08. Integration ecosystem (3x3 hub-and-spoke) ---------- */
.cdc__hub { padding: 130px 0; background: var(--cdcbg); }
.cdc__hub-diagram { position: relative; max-width: 820px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.cdc__hub-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--cdcb);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.cdc__hub-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 14px;
  border: 1px solid var(--cdcb);
  border-top: 3px solid var(--hc);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  color: var(--cdch);
  text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.cdc__hub-node:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(15, 23, 42, .1); border-color: var(--hc); }
.cdc__hub-node i { color: var(--hc); font-size: 20px; }
.cdc__hub-node span { font-size: 13px; font-weight: 600; line-height: 1.3; }
.cdc__hub-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 14px;
  border-radius: 14px;
  background: var(--cdcdark);
  color: #fff;
  text-align: center;
  box-shadow: 0 20px 44px rgba(0, 95, 204, .25);
}
.cdc__hub-center i { font-size: 24px; color: var(--cdc3); }
.cdc__hub-center span { font-size: 13.5px; font-weight: 700; line-height: 1.3; }

/* ---------- 09. Engineering principles (5-card spectrum) ---------- */
.cdc__principles { padding: 130px 0; background: #fff; }
.cdc__principles-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; }
.cdc__principle-card { padding: 28px 24px; border: 1px solid var(--cdcb); border-top: 3px solid var(--pc); border-radius: 16px; background: #fff; transition: all .3s ease; }
.cdc__principle-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .08); }
.cdc__principle-num { display: block; font-size: 13px; font-weight: 800; color: var(--pc); opacity: .55; margin-bottom: 14px; }
.cdc__principle-card h3 { font-size: 16.5px; font-weight: 600; color: var(--cdch); margin: 0 0 10px; }
.cdc__principle-card p { font-size: 13px; font-weight: 300; color: var(--cdct); line-height: 1.7; margin: 0; }

/* ---------- 10. Related technology & service links ---------- */
.cdc__related { padding: 90px 0; background: #fff; border-top: 1px solid var(--cdcb); }
.cdc__related-head { text-align: center; margin-bottom: 34px; }
.cdc__related-head span { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cdc); }
.cdc__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cdc__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--cdcb);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cdch);
  transition: all .3s ease;
}
.cdc__related-list a:hover { border-color: var(--cdc); color: var(--cdc); background: var(--cdcbg); }
.cdc__related-list a i { color: var(--cdc); font-size: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cdc__page * { transition-duration: .01ms !important; }
  .cdc__hero-glow,
  .cdc__hero-chip,
  .cdc__marquee-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cdc__hero-title { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .cdc__page .cdc__title { font-size: 34px; }
  .cdc__hero { padding: 170px 0 100px; }
  .cdc__hero-title { font-size: 38px; }
  .cdc__hero-grid { gap: 46px; }
  .cdc__hero-chip--1 { left: -14px; }
  .cdc__hero-chip--2 { right: -10px; }
  .cdc__fit-grid { grid-template-columns: repeat(2, 1fr); }
  .cdc__principles-grid { grid-template-columns: repeat(3, 1fr); }
  .cdc__spine-card { width: 170px; padding: 16px; }
}
@media only screen and (max-width: 991px) {
  .cdc__hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .cdc__hero-frame { max-width: 460px; margin: 0 auto; }
  .cdc__matrix { grid-template-columns: 1fr; gap: 20px; }
  .cdc__fit-grid { grid-template-columns: repeat(2, 1fr); }
  .cdc__principles-grid { grid-template-columns: repeat(2, 1fr); }
  .cdc__converge-sources { flex-direction: column; align-items: center; padding-bottom: 0; }
  .cdc__converge-sources::before { display: none; }
  .cdc__converge-sources .cdc__converge-node::after { display: none; }
  .cdc__converge-sources .cdc__converge-node { margin-bottom: 20px; }
  .cdc__converge-arrow { transform: none; }
  .cdc__hub-diagram { grid-template-columns: 1fr; max-width: 420px; }
  .cdc__hub-ring { display: none; }
  .cdc__hub-center { order: -1; }

  /* Spine collapses to a vertical timeline on tablet & below */
  .cdc__spine { flex-direction: column; height: auto; gap: 36px; }
  .cdc__spine-line { top: 0; bottom: 0; left: 23px; right: auto; width: 2px; height: auto; transform: none; background: linear-gradient(180deg, #6366f1, #2563eb, #ea580c, #db2777, #0d9488); }
  .cdc__spine-node { flex: none; padding-left: 60px; min-height: 0; }
  .cdc__spine-dot { top: 0; left: 24px; transform: translate(-50%, -50%); }
  .cdc__spine-node--up .cdc__spine-card,
  .cdc__spine-node--down .cdc__spine-card { position: static; transform: none; width: 100%; text-align: left; }
  .cdc__spine-card:hover { transform: translateY(-4px); }
}
@media only screen and (max-width: 767px) {
  .cdc__page .cdc__eyebrow { letter-spacing: 2px; font-size: 12px; }
  .cdc__page .cdc__title { font-size: 26px; }
  .cdc__hero { padding: 140px 0 80px; }
  .cdc__hero-title { font-size: 30px; }
  .cdc__hero-lead { font-size: 17px; }
  .cdc__hero-chip { display: none; }
  .cdc__hero-btn,
  .cdc__hero-btn-outline { padding: 15px 26px; font-size: 15px; }
  :where(.cdc__page) section { padding: 80px 0; }
  .cdc__fit-grid { grid-template-columns: 1fr; }
  .cdc__principles-grid { grid-template-columns: 1fr; }
  .cdc__build-grid { grid-template-columns: 1fr; }
  .cdc__plat-tag { display: none; }
  .cdc__plat-body { padding-left: 20px; }
  .cdc__related-list { flex-direction: column; align-items: stretch; }
  .cdc__related-list a { justify-content: center; }
}

/* ============================================================
   WORK / PORTFOLIO LANDING PAGE (work__*)
   Scoped entirely to .work__page (added on <main> of work.html).
   Reuses the brand language already established across the site:
   #005fcc primary, #8079f8 secondary, #4da3ff accent, #07152F dark
   bands, #f6f7fc light bands, Kanit type. The hero swaps the usual
   product screenshot for a self-drawn "Problem -> Outcome" pipeline
   so the page doesn't lean on stock imagery. Nothing here leaks to
   other pages.
   ============================================================ */
.work__page {
  --wc: #005fcc;
  --wc2: #8079f8;
  --wc3: #4da3ff;
  --wh: #1c1e2b;
  --wt: #6b7089;
  --wb: #e9eaf5;
  --wbg: #f6f7fc;
  --wdark: #07152F;
  --wmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
:where(.work__page) section { padding: 130px 0; }

/* ---------- Shared section furniture ---------- */
.work__page .work__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wc);
  margin-bottom: 18px;
}
.work__page .work__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--wh); margin: 0 0 20px; }
.work__page .work__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--wh); margin: 0 0 16px; }
.work__page .work__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--wt); margin: 0 0 16px; }
.work__page .work__text:last-child { margin-bottom: 0; }
.work__page .work__head { max-width: 760px; }
.work__page .work__head--center { margin: 0 auto 56px; text-align: center; }

.work__page .work__btn,
.work__page .work__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.work__page .work__btn { color: #fff; background: var(--wc); border: 2px solid var(--wc); }
.work__page .work__btn:hover { background: var(--wc2); border-color: var(--wc2); color: #fff; }
.work__page .work__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.work__page .work__btn-outline:hover { background: #fff; border-color: #fff; color: var(--wdark); }

.work__page .work__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wc);
  transition: gap .3s ease, color .3s ease;
}
.work__page .work__link:hover { gap: 15px; color: var(--wc2); }

.work__page .work__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--wc);
  font-size: 20px;
  margin-bottom: 18px;
}

/* ---------- 01. Hero ---------- */
.work__hero {
  position: relative;
  overflow: hidden;
  background: var(--wdark);
  padding: 200px 0 120px;
}
.work__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.work__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.work__hero > .container { position: relative; z-index: 2; }
.work__hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.work__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--wc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.work__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.work__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--wc3), var(--wc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.work__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 34px; max-width: 560px; }
.work__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.work__hero-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.work__hero-pills li {
  padding: 9px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 300;
}

/* Self-drawn "problem to outcome" pipeline - replaces a product screenshot. */
.work__hero-figure { position: relative; }
.work__hero-glow {
  position: absolute;
  inset: -10% -8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 95, 204, .5), rgba(128, 121, 248, .42), rgba(77, 163, 255, .46), rgba(0, 95, 204, .5));
  filter: blur(76px);
  opacity: .5;
  animation: workKfSpin 26s linear infinite;
}
.work__pipeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 30px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}
.work__pipeline-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 0;
}
.work__pipeline-step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: -6px;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}
.work__pipeline-step:last-child::before { display: none; }
.work__pipeline-dot {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(7, 21, 47, .7);
  color: #cfe0f3;
  font-size: 13px;
  font-weight: 600;
  z-index: 1;
}
.work__pipeline-step strong { display: block; font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.work__pipeline-step span { font-size: 13px; font-weight: 300; color: var(--wmuted); }
.work__pipeline-step--outcome { padding-top: 20px; }
.work__pipeline-step--outcome .work__pipeline-dot {
  background: linear-gradient(135deg, var(--wc), var(--wc2));
  border-color: transparent;
  color: #fff;
}
.work__pipeline-step--outcome strong { background: linear-gradient(90deg, var(--wc3), var(--wc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes workKfSpin { to { transform: rotate(360deg); } }

/* ---------- 02. Introduction / Positioning ---------- */
.work__intro { background: #fff; }
.work__intro-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; }
.work__intro-lead .work__lead { max-width: 460px; }
.work__intro-pillars {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
}
.work__intro-pillars li { padding: 22px 0 0; border-top: 1px solid var(--wb); }
.work__intro-pillars strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--wh); margin: 0 0 8px; }
.work__intro-pillars span { display: block; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--wt); }

/* ---------- 03. What we build : interactive capability selector ---------- */
.work__build { background: var(--wbg); }

.wwd__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.4fr);
  background: #fff;
  border: 1px solid var(--wb);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(28, 30, 43, .06);
}

/* -- left: category selector -- */
.wwd__nav { display: flex; flex-direction: column; border-right: 1px solid var(--wb); }
.wwd__navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 28px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wb);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .3s ease;
}
.wwd__nav .wwd__navitem:last-child { border-bottom: 0; }
.wwd__navitem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--wwd-accent, var(--wc));
  transform: scaleY(0);
  transition: transform .35s ease;
}
.wwd__navitem.is-active { background: var(--wbg); }
.wwd__navitem.is-active::before { transform: scaleY(1); }
.wwd__navnum { flex: 0 0 auto; width: 22px; font-size: 13px; font-weight: 600; color: var(--wb); transition: color .3s ease; }
.wwd__navitem.is-active .wwd__navnum { color: var(--wwd-accent, var(--wc)); }
.wwd__navicon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--wt);
  background: var(--wbg);
  transition: background .3s ease, color .3s ease;
}
.wwd__navitem.is-active .wwd__navicon { background: var(--wwd-accent, var(--wc)); color: #fff; }
.wwd__navtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wwd__navtext strong { font-size: 14.5px; font-weight: 600; color: var(--wh); }
.wwd__navtext em { font-style: normal; font-size: 12px; font-weight: 300; color: var(--wt); }
.wwd__navarrow { flex: 0 0 auto; font-size: 12px; color: var(--wwd-accent, var(--wc)); opacity: 0; transform: translateX(-6px); transition: all .3s ease; }
.wwd__navitem.is-active .wwd__navarrow { opacity: 1; transform: translateX(0); }

.wwd__navitem:nth-of-type(1) { --wwd-accent: var(--wc); }
.wwd__navitem:nth-of-type(2) { --wwd-accent: var(--wc2); }
.wwd__navitem:nth-of-type(3) { --wwd-accent: var(--wc3); }
.wwd__navitem:nth-of-type(4) { --wwd-accent: var(--wc); }
.wwd__navitem:nth-of-type(5) { --wwd-accent: var(--wc2); }

/* -- right: active category stage -- */
.wwd__stage { position: relative; }
.wwd__stagecard { display: none; position: relative; padding: 58px 64px; overflow: hidden; }
.wwd__stagecard.is-active { display: block; animation: wwdFade .5s ease; }
@keyframes wwdFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.wwd__stagecard:nth-of-type(1) { --wwd-accent: var(--wc); }
.wwd__stagecard:nth-of-type(2) { --wwd-accent: var(--wc2); }
.wwd__stagecard:nth-of-type(3) { --wwd-accent: var(--wc3); }
.wwd__stagecard:nth-of-type(4) { --wwd-accent: var(--wc); }
.wwd__stagecard:nth-of-type(5) { --wwd-accent: var(--wc2); }

.wwd__stagenum {
  position: absolute;
  top: 34px;
  right: 56px;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: var(--wbg);
  z-index: 0;
}
.wwd__stageicon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  background: var(--wwd-accent, var(--wc));
  margin: 0 0 26px;
}
.wwd__stagecard h3 { position: relative; font-size: 26px; font-weight: 600; color: var(--wh); margin: 0 0 14px; }
.wwd__stagecard p { position: relative; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--wt); max-width: 52ch; margin: 0 0 30px; }

.wwd__chips { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.wwd__chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--wb);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wh);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.wwd__chips a i { font-size: 10px; color: var(--wwd-accent, var(--wc)); transition: transform .3s ease, color .3s ease; }
.wwd__chips a:hover { background: var(--wwd-accent, var(--wc)); border-color: var(--wwd-accent, var(--wc)); color: #fff; }
.wwd__chips a:hover i { color: #fff; transform: translateX(3px); }

@media (max-width: 991px) {
  .wwd__shell { grid-template-columns: 1fr; border-radius: 20px; }
  .wwd__nav { border-right: 0; border-bottom: 1px solid var(--wb); }
  .wwd__stagecard { padding: 46px 34px; }
  .wwd__stagenum { font-size: 68px; top: 26px; right: 34px; }
}
@media (max-width: 575px) {
  .wwd__navitem { padding: 18px 20px; gap: 12px; }
  .wwd__navtext em { display: none; }
  .wwd__stagecard { padding: 38px 24px; }
  .wwd__stagecard h3 { font-size: 22px; }
  .wwd__stagenum { font-size: 52px; top: 20px; right: 24px; }
}

/* ---------- 03b. Selected Work ---------- */
.work__selected {
  position: relative;
  overflow: hidden;
  background: var(--wdark);
}
.work__selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at -6% -10%, rgba(0, 95, 204, .34), transparent 62%),
              radial-gradient(760px 460px at 104% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.work__selected > .container { position: relative; z-index: 1; }
.work__page .work__eyebrow--light { color: var(--wc3); }
.work__page .work__title--light { color: #fff; }
.work__page .work__text--light { color: var(--wmuted); }

.work__selected-feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  align-items: stretch;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 30px;
}
.work__selected-feature-media { display: block; overflow: hidden; height: 460px; }
.work__selected-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.work__selected-feature-media:hover img { transform: scale(1.04); }
.work__selected-feature-copy { padding: 46px 44px; display: flex; flex-direction: column; justify-content: center; }
.work__selected-industry {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--wc3);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 18px;
}
.work__selected-feature-copy h3 { font-size: 28px; font-weight: 600; margin: 0 0 14px; }
.work__selected-feature-copy h3 a { color: #fff; transition: color .3s ease; }
.work__selected-feature-copy h3 a:hover { color: var(--wc3); }
.work__selected-desc { font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--wmuted); margin: 0 0 14px; }
.work__selected-solution { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--wmuted); margin: 0 0 22px; }
.work__selected-solution strong { color: #fff; font-weight: 600; }
.work__selected-tags { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.work__selected-tags li {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 12px;
  font-weight: 400;
}
.work__selected-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wc3);
  transition: gap .3s ease, color .3s ease;
}
.work__selected-link:hover { gap: 15px; color: #fff; }

/* -- expanding "spotlight" row: collapsed strips that open into a full case study on hover -- */
.work__spotlight { display: flex; align-items: stretch; gap: 14px; height: 560px; }
.work__spotlight-card {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 78px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--wdark);
  text-decoration: none;
  transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1);
}
.work__spotlight-card:hover,
.work__spotlight-card:focus-visible { flex-grow: 3.6; }
.work__spotlight-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.75);
  transition: transform .6s ease, filter .6s ease;
}
.work__spotlight-card:hover .work__spotlight-img,
.work__spotlight-card:focus-visible .work__spotlight-img { transform: scale(1.05); filter: saturate(1) brightness(.55); }
.work__spotlight-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 21, 47, .96) 0%, rgba(7, 21, 47, .72) 30%, rgba(7, 21, 47, .1) 62%, transparent 100%);
}

.work__spotlight-collapsed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 0 26px 20px;
  opacity: 1;
  transition: opacity .3s ease;
}
.work__spotlight-card:hover .work__spotlight-collapsed,
.work__spotlight-card:focus-visible .work__spotlight-collapsed { opacity: 0; }
.work__spotlight-num { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: rgba(255, 255, 255, .55); }
.work__spotlight-vtitle {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .3px;
  white-space: nowrap;
}

.work__spotlight-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 28px 32px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease .08s, transform .4s ease .08s;
}
.work__spotlight-card:hover .work__spotlight-body,
.work__spotlight-card:focus-visible .work__spotlight-body { opacity: 1; transform: translateY(0); }
.work__spotlight-industry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--wc3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
  white-space: nowrap;
}
.work__spotlight-body h3 { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 10px; white-space: nowrap; }
.work__spotlight-body p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--wmuted); margin: 0 0 18px; max-width: 46ch; }
.work__spotlight-tags { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.work__spotlight-tags li {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
.work__spotlight-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--wc3); white-space: nowrap; }
.work__spotlight-card:hover .work__spotlight-link { gap: 13px; }

@media (max-width: 991px) {
  .work__spotlight { flex-direction: column; height: auto; }
  .work__spotlight-card { flex: none; min-width: 0; height: 320px; }
  .work__spotlight-img { filter: saturate(1) brightness(.6); }
  .work__spotlight-collapsed { display: none; }
  .work__spotlight-body { opacity: 1; transform: none; }
}
@media (max-width: 575px) {
  .work__spotlight-card { height: 300px; }
  .work__spotlight-body { padding: 24px 22px 26px; }
}

.work__selected-foot { text-align: center; margin-top: 46px; }
.work__selected-foot .work__btn { color: var(--wdark); background: #fff; border-color: #fff; }
.work__selected-foot .work__btn:hover { background: var(--wc3); border-color: var(--wc3); color: #fff; }

/* ---------- 04. Where we create impact ---------- */
.work__impact { background: #fff; overflow: hidden; }

/* -- drifting marquee belt: two rows of industries scrolling in opposite directions -- */
.work__impact-belt { display: flex; flex-direction: column; gap: 18px; margin-bottom: 44px; }
.work__impact-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.work__impact-marquee { display: flex; width: max-content; gap: 18px; animation: wwdMarqueeL 34s linear infinite; }
.work__impact-marquee--r { animation-name: wwdMarqueeR; animation-duration: 38s; }
.work__impact-track:hover .work__impact-marquee { animation-play-state: paused; }
@keyframes wwdMarqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wwdMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .work__impact-marquee { animation: none; }
}

.work__impact-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-radius: 50px;
  border: 1px solid var(--wb);
  background: var(--wbg);
  white-space: nowrap;
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.work__impact-chip:hover { transform: translateY(-4px); border-color: var(--wc); background: #fff; box-shadow: 0 18px 36px rgba(0, 95, 204, .12); }
.work__impact-chip span.work__impact-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 95, 204, .1);
  color: var(--wc);
  font-size: 15px;
}
.work__impact-chip strong { font-size: 14.5px; font-weight: 600; color: var(--wh); line-height: 1.3; }
.work__impact-foot { text-align: center; }

/* ---------- 06. Technology behind the work ---------- */
.work__tech { background: var(--wbg); }
.work__tech-copy { max-width: 760px; margin: 0 auto 44px; text-align: center; }

/* -- blueprint panel: schematic grid-paper backdrop for the stack -- */
.work__tech-panel {
  position: relative;
  padding: 34px 30px;
  border-radius: 24px;
  border: 1px dashed var(--wb);
  background-color: #fff;
  background-image: radial-gradient(var(--wb) 1px, transparent 1px);
  background-size: 18px 18px;
  margin-bottom: 40px;
}
.work__tech-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 14px; }

.work__tech-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px 10px;
  border-radius: 14px;
  border: 1px solid var(--wb);
  background: #fff;
  transform-style: preserve-3d;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.work__tech-chip::before {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, inset .3s ease;
  background:
    linear-gradient(var(--wc), var(--wc)) 0 0/12px 2px no-repeat,
    linear-gradient(var(--wc), var(--wc)) 0 0/2px 12px no-repeat,
    linear-gradient(var(--wc), var(--wc)) 100% 0/12px 2px no-repeat,
    linear-gradient(var(--wc), var(--wc)) 100% 0/2px 12px no-repeat,
    linear-gradient(var(--wc), var(--wc)) 0 100%/12px 2px no-repeat,
    linear-gradient(var(--wc), var(--wc)) 0 100%/2px 12px no-repeat,
    linear-gradient(var(--wc), var(--wc)) 100% 100%/12px 2px no-repeat,
    linear-gradient(var(--wc), var(--wc)) 100% 100%/2px 12px no-repeat;
}
.work__tech-chip:hover { border-color: transparent; box-shadow: 0 18px 36px rgba(0, 95, 204, .12); }
.work__tech-chip:hover::before { opacity: 1; inset: 6px; }
.work__tech-idx {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--wb);
  transition: color .3s ease;
}
.work__tech-chip:hover .work__tech-idx { color: var(--wc3); }
.work__tech-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--wc);
  font-size: 18px;
  margin-top: 6px;
  transition: background .3s ease, color .3s ease;
}
.work__tech-chip:hover .work__tech-ico { background: var(--wc); color: #fff; }
.work__tech-chip strong { font-size: 12.5px; font-weight: 600; color: var(--wh); line-height: 1.35; }
.work__tech-foot { text-align: center; }

/* ---------- 06b. Our approach: connected-flow diagram
   (work.html only - forked away from the shared .proc2__area
   vertical timeline, which index.html still uses unchanged) ---------- */
.work__approach { background: #fff; }

.work__approach-chain { position: relative; display: flex; align-items: flex-start; margin-top: 74px; }
.work__approach-chain::before {
  content: '';
  position: absolute;
  top: 30px;
  left: calc(12.5% - 30px);
  right: calc(12.5% - 30px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--wc2) 0 10px, transparent 10px 18px);
  z-index: 0;
}
.work__approach-node { position: relative; z-index: 1; flex: 1; padding: 0 16px; text-align: center; }
.work__approach-marker {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  margin: 0 auto 26px;
  border-radius: 50%;
  border: 2px solid var(--wc);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--wc);
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.work__approach-node:hover .work__approach-marker {
  background: var(--wc);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 16px 30px rgba(0, 95, 204, .28);
}
.work__approach-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wdark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work__approach-node:nth-child(2n) .work__approach-copy { margin-top: 20px; }
.work__approach-copy h3 { font-size: 19px; font-weight: 600; color: var(--wh); margin: 0 0 10px; }
.work__approach-copy p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--wt); max-width: 230px; margin: 0 auto; }

.work__approach-cta { text-align: center; margin-top: 56px; }
.work__approach-note { margin: 14px 0 0; font-size: 13.5px; font-weight: 300; color: var(--wt); }

@media (max-width: 991px) {
  .work__approach-chain { flex-direction: column; gap: 34px; margin-top: 60px; }
  .work__approach-chain::before { display: none; }
  .work__approach-node { display: flex; align-items: flex-start; gap: 20px; padding: 0; text-align: left; }
  .work__approach-marker { margin: 0; flex: none; }
  .work__approach-node:nth-child(2n) .work__approach-copy { margin-top: 0; }
  .work__approach-copy p { max-width: none; }
}

/* ---------- 07. Why 3Shadz ---------- */
.work__why { position: relative; overflow: hidden; background: var(--wdark); }
.work__why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 420px at 88% -10%, rgba(0, 95, 204, .32), transparent 62%),
              radial-gradient(700px 400px at 6% 106%, rgba(128, 121, 248, .26), transparent 64%);
}
.work__why > .container { position: relative; z-index: 1; }
.work__why .work__eyebrow { color: var(--wc3); }
.work__why .work__title { color: #fff; }
.work__why .work__text { color: var(--wmuted); }
/* -- corkboard of pinned sticky notes: light paper cards, each on its own
   slight tilt, straightening on hover -- a physical metaphor rather than
   another card grid or list -- */
.work__board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  margin-top: 74px;
}
.work__note {
  position: relative;
  padding: 32px 26px 28px;
  border-radius: 3px 16px 16px 16px;
  background: linear-gradient(160deg, #142a58 0%, #0a1730 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .45);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
.work__note:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: 0 28px 54px rgba(0, 0, 0, .55); border-color: rgba(77, 163, 255, .4); z-index: 2; }
.work__note:nth-child(1) { --tilt: -2.5deg; }
.work__note:nth-child(2) { --tilt: 1.8deg; }
.work__note:nth-child(3) { --tilt: -1.6deg; }
.work__note:nth-child(4) { --tilt: 2.2deg; }
.work__note:nth-child(5) { --tilt: -2deg; }
.work__note:nth-child(6) { --tilt: 1.4deg; }
.work__note-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 74px;
  height: 26px;
  margin-left: -37px;
  transform: rotate(-3deg);
  background: rgba(77, 163, 255, .7);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .3);
}
.work__note:nth-child(3n+2) .work__note-tape { background: rgba(128, 121, 248, .7); transform: rotate(2.5deg); }
.work__note:nth-child(3n) .work__note-tape { background: rgba(0, 149, 255, .7); transform: rotate(-2deg); }
.work__note-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(77, 163, 255, .14);
  color: var(--wc3);
  font-size: 18px;
  margin: 6px 0 20px;
}
.work__note h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.work__note p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--wmuted); margin: 0; }

@media (max-width: 991px) {
  .work__board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .work__board { grid-template-columns: 1fr; gap: 34px; margin-top: 60px; }
  .work__note { transform: none; }
  .work__note:hover { transform: translateY(-4px); }
}

/* ---------- 08. Work in numbers (reuses the shared .counter__wrapper-2) ---------- */
.work__numbers { background: #fff; text-align: center; }
.work__numbers .work__head--center { margin-bottom: 60px; }

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.work__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.work__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--wc);
  background: transparent;
  border: 2px solid var(--wb);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.work__page .final-cta-btn-outline:hover { background: var(--wc); border-color: var(--wc); color: #fff; }

@media only screen and (max-width: 1199px) {
  .work__tech-grid { grid-template-columns: repeat(5, 1fr); }
}
@media only screen and (max-width: 991px) {
  :where(.work__page) section { padding: 90px 0; }
  .work__hero { padding: 150px 0 90px; }
  .work__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .work__hero-title { font-size: 40px; }
  .work__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .work__intro-lead .work__lead { max-width: none; }
  .work__selected-feature { grid-template-columns: 1fr; }
  .work__selected-feature-media { height: 300px; }
}
@media only screen and (max-width: 767px) {
  .work__hero-title { font-size: 32px; }
  .work__intro-pillars { grid-template-columns: 1fr; }
  .work__tech-grid { grid-template-columns: repeat(3, 1fr); }
  .work__tech-panel { padding: 22px 18px; border-radius: 18px; }
  .work__selected-feature-copy { padding: 34px 26px; }
}


/* ============================================================
   CASE STUDIES LANDING PAGE (case-studies.html)
   Self-contained component system, mirrors the .work__page
   variable/utility pattern used elsewhere on the site.
   ============================================================ */
.cs__page {
  --csc: #005fcc;
  --csc2: #8079f8;
  --csc3: #4da3ff;
  --csh: #1c1e2b;
  --cst: #6b7089;
  --csb: #e9eaf5;
  --csbg: #f6f7fc;
  --csdark: #07152F;
  --csmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
.cs__page section { padding: 130px 0; }
.cs__page .cs__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--csc);
  margin-bottom: 18px;
}
.cs__page .cs__title { font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--csh); margin: 0 0 20px; }
.cs__page .cs__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--csh); margin: 0 0 16px; }
.cs__page .cs__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--cst); margin: 0 0 16px; }
.cs__page .cs__text:last-child { margin-bottom: 0; }
.cs__page .cs__head { max-width: 760px; }
.cs__page .cs__head--center { margin: 0 auto 56px; text-align: center; }

.cs__page .cs__btn,
.cs__page .cs__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cs__page .cs__btn { color: #fff; background: var(--csc); border: 2px solid var(--csc); }
.cs__page .cs__btn:hover { background: var(--csc2); border-color: var(--csc2); color: #fff; }
.cs__page .cs__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.cs__page .cs__btn-outline:hover { background: #fff; border-color: #fff; color: var(--csdark); }

.cs__page .cs__link-btn {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  color: var(--csc);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.cs__page .cs__link-btn:hover { color: var(--csc2); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared project meta (used by spotlight, row cards, pair, grid cards) */
.cs__page .cs__proj-industry {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(7, 21, 47, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #dcebff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.cs__page .cs__proj-tags { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs__page .cs__proj-tags li {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #cfe0f3;
  font-size: 12px;
  font-weight: 400;
}
.cs__page .cs__proj-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--csc3);
  transition: gap .3s ease, color .3s ease;
}
.cs__page a:hover .cs__proj-link,
.cs__page .cs__proj-link:hover { gap: 15px; }

/* ---------- 01. Hero ---------- */
.cs__hero {
  position: relative;
  overflow: hidden;
  background: var(--csdark);
  padding: 200px 0 120px;
}
.cs__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(760px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.cs__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.cs__hero > .container { position: relative; z-index: 2; }
.cs__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.cs__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--csc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.cs__hero-title { font-size: 56px; line-height: 1.1; font-weight: 600; color: #fff; margin: 0 0 24px; }
.cs__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--csc3), var(--csc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cs__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 34px; max-width: 580px; }
.cs__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.cs__hero-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 34px; }
.cs__hero-stats li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cs__hero-stat-ico { display: inline-flex; align-items: center; justify-content: center; }
.cs__hero-stat-ico i {
  font-size: 32px;
  line-height: 1;
  background: linear-gradient(160deg, #fff 0%, var(--csc3) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(77, 163, 255, .35));
}
.cs__hero-stats span { font-size: 12.5px; font-weight: 300; letter-spacing: .5px; color: var(--csmuted); text-transform: uppercase; text-align: center; }

/* Hero card deck: a fanned hand of real case-study cards. Pivots from a
   shared bottom point like a hand of cards, not a literal playing-card. */
.cs__hero-figure { position: relative; height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cs__deck { position: relative; width: 100%; height: 440px; }

.cs__deck-shadow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 210px;
  height: 288px;
  border-radius: 20px;
  background:
    radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px),
    linear-gradient(160deg, rgba(0, 95, 204, .28), rgba(128, 121, 248, .2));
  background-size: 14px 14px, 100% 100%;
  border: 1px solid rgba(255, 255, 255, .08);
  transform-origin: 50% 100%;
  z-index: 0;
}
.cs__deck-shadow--1 { transform: translateX(-50%) rotate(-27deg); }
.cs__deck-shadow--2 { transform: translateX(-50%) rotate(27deg); }

.cs__deck-card {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 210px;
  height: 288px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--csdark);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .5);
  transform-origin: 50% 100%;
  will-change: transform;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease, border-color .45s ease, z-index 0s .45s;
}
.cs__deck-card:nth-of-type(1) { transform: translateX(-50%) translateY(0) rotate(-18deg) scale(1); z-index: 1; }
.cs__deck-card:nth-of-type(2) { transform: translateX(-50%) translateY(0) rotate(-9deg) scale(1); z-index: 2; }
.cs__deck-card:nth-of-type(3) { transform: translateX(-50%) translateY(0) rotate(0deg) scale(1); z-index: 3; }
.cs__deck-card:nth-of-type(4) { transform: translateX(-50%) translateY(0) rotate(9deg) scale(1); z-index: 2; }
.cs__deck-card:nth-of-type(5) { transform: translateX(-50%) translateY(0) rotate(18deg) scale(1); z-index: 1; }

.cs__deck-card:hover,
.cs__deck-card:focus-visible {
  transform: translateX(-50%) translateY(-42px) rotate(0deg) scale(1.06);
  border-color: rgba(77, 163, 255, .6);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(77, 163, 255, .3), 0 0 40px rgba(77, 163, 255, .3);
  z-index: 9;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease, border-color .45s ease, z-index 0s;
}
.cs__deck-card:focus-visible { outline: 2px solid var(--csc3); outline-offset: 4px; }

.cs__deck-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cs__deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 21, 47, .78) 0%, rgba(7, 21, 47, .1) 26%, rgba(7, 21, 47, .05) 55%, rgba(7, 21, 47, .92) 100%);
}
.cs__deck-index {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(7, 21, 47, .45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.cs__deck-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--csc3);
  background: rgba(7, 21, 47, .45);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-size: 12.5px;
}
.cs__deck-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs__deck-footer strong { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.25; }
.cs__deck-footer em { font-style: normal; font-size: 11px; font-weight: 300; color: var(--csmuted); }

.cs__deck-hint {
  margin: 22px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: .3px;
  color: var(--csmuted);
}
.cs__deck-hint i { color: var(--csc3); font-size: 12px; }

/* ---------- 02. Portfolio introduction ---------- */
.cs__intro { background: #fff; }
.cs__intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* ---------- 03. Featured case studies ---------- */
.cs__featured { background: var(--csbg); }

.cs__spotlight {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--csdark);
  border: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 30px;
}
.cs__spotlight-media { overflow: hidden; }
.cs__spotlight-media img { width: 100%; height: 460px; object-fit: cover; display: block; transition: transform .5s ease; }
.cs__spotlight:hover .cs__spotlight-media img { transform: scale(1.04); }
.cs__spotlight-copy { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.cs__spotlight-copy h3 { font-size: 30px; font-weight: 600; color: #fff; margin: 0 0 16px; }
.cs__spotlight-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--csmuted); margin: 0 0 10px; }
.cs__spotlight-copy p strong { color: #fff; font-weight: 600; }
.cs__spotlight-copy .cs__proj-tags { margin-top: 12px; }

/* Editorial bento: full-bleed image cards of mixed size, text on a gradient
   scrim rather than a boxed body — deliberately asymmetric instead of a
   uniform grid of equal tiles. */
.cs__mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 460px 260px;
  gap: 20px;
}
.cs__mosaic-card--feature { grid-column: 1 / span 2; grid-row: 1; }
.cs__mosaic-card--tall { grid-column: 3; grid-row: 1; }
.cs__mosaic-card--compact { grid-row: 2; }

.cs__mosaic-card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: var(--csdark);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .4s ease, box-shadow .4s ease;
}
.cs__mosaic-card:hover {
  transform: translateY(-8px);
  border-color: rgba(77, 163, 255, .5);
  box-shadow: 0 30px 60px rgba(7, 21, 47, .35);
}
.cs__mosaic-media { position: absolute; inset: 0; z-index: 0; }
.cs__mosaic-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.cs__mosaic-card:hover .cs__mosaic-media img { transform: scale(1.07); }
.cs__mosaic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 21, 47, 0) 0%, rgba(7, 21, 47, .15) 42%, rgba(7, 21, 47, .95) 100%);
  transition: background .4s ease;
}
.cs__mosaic-card:hover::before { background: linear-gradient(180deg, rgba(7, 21, 47, .05) 0%, rgba(7, 21, 47, .25) 42%, rgba(7, 21, 47, .96) 100%); }
.cs__mosaic-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 30px;
}
.cs__mosaic-body h3 { font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.cs__mosaic-body p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--csmuted); margin: 0 0 16px; max-width: 460px; }
.cs__mosaic-card--tall .cs__mosaic-body p { max-width: none; }

.cs__mosaic-card--compact .cs__mosaic-body { padding: 22px 22px 24px; }
.cs__mosaic-card--compact .cs__proj-industry {
  max-width: 100%;
  padding: 6px 12px;
  font-size: 11.5px;
  margin-bottom: 10px;
  background: rgba(7, 21, 47, .28);
  border-color: rgba(255, 255, 255, .12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs__mosaic-card--compact .cs__proj-industry i { color: #fff; flex: none; }
.cs__mosaic-card--compact .cs__mosaic-body h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  margin-bottom: 0;
  transition: gap .3s ease;
}
.cs__mosaic-card--compact:hover .cs__mosaic-body h3 { gap: 15px; }

/* ---------- 04. All case studies: filter bar + grid ---------- */
.cs__library { background: #fff; }

.cs__filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--csbg);
  border: 1px solid var(--csb);
  margin-bottom: 40px;
}
.cs__filter-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 260px;
  padding: 12px 18px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--csb);
}
.cs__filter-search i { color: var(--cst); font-size: 14px; }
.cs__filter-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--csh);
  width: 100%;
}
.cs__filter-search input::placeholder { color: var(--cst); }
.cs__filter-selects { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.cs__filter-field { display: flex; flex-direction: column; gap: 6px; }
.cs__filter-field label { font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--cst); }
.cs__filter-field select {
  padding: 11px 16px;
  border-radius: 50px;
  border: 1px solid var(--csb);
  background: #fff;
  color: var(--csh);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  min-width: 168px;
  cursor: pointer;
}
.cs__filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 50px;
  border: 1px solid var(--csb);
  background: #fff;
  color: var(--cst);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}
.cs__filter-reset:hover { border-color: var(--csc); color: var(--csc); }

/* Full-bleed dark overlay tiles (same language as the featured mosaic
   above) with a per-render stagger so the grid feels alive on load and
   on every filter change, not just re-painted. */
.cs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cs__card {
  position: relative;
  display: block;
  height: 340px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--csdark);
  border: 1px solid rgba(255, 255, 255, .12);
  opacity: 0;
  animation: cs-card-in .6s cubic-bezier(.16, 1, .3, 1) forwards;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, border-color .4s ease;
}
.cs__card:nth-child(4n+1) { animation-delay: 0s; }
.cs__card:nth-child(4n+2) { animation-delay: .06s; }
.cs__card:nth-child(4n+3) { animation-delay: .12s; }
.cs__card:nth-child(4n+4) { animation-delay: .18s; }
.cs__card:hover {
  transform: translateY(-8px);
  border-color: var(--accent, rgba(77, 163, 255, .5));
  box-shadow: 0 26px 54px rgba(7, 21, 47, .35), 0 10px 30px var(--accent-glow, rgba(77, 163, 255, .3));
}
.cs__card-media { position: absolute; inset: 0; z-index: 0; }
.cs__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.cs__card:hover .cs__card-media img { transform: scale(1.08); }
.cs__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 21, 47, 0) 0%, rgba(7, 21, 47, .22) 45%, rgba(7, 21, 47, .96) 100%);
  transition: background .4s ease;
}
.cs__card:hover::before { background: linear-gradient(180deg, rgba(7, 21, 47, .05) 0%, rgba(7, 21, 47, .32) 45%, rgba(7, 21, 47, .97) 100%); }
.cs__card-index {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .8);
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 21, 47, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease;
}
.cs__card:hover .cs__card-index { opacity: 1; transform: none; }
.cs__card-body { position: relative; z-index: 2; height: 100%; padding: 20px 20px 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.cs__card-industry {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #dcebff;
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(7, 21, 47, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.cs__card-industry i { color: #fff; flex: none; }
.cs__card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  transition: gap .3s ease;
}
.cs__card:hover .cs__card-title { gap: 15px; }

@keyframes cs-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.cs__empty { text-align: center; padding: 60px 20px; font-size: 15.5px; color: var(--cst); }

/* ---------- 05. Industry view ---------- */
.cs__industries { background: var(--csbg); }
.cs__industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs__industry-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 24px 22px;
  border-radius: 16px;
  border: 1px solid var(--csb);
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cs__industry-tile:hover { transform: translateY(-4px); border-color: var(--csc); box-shadow: 0 18px 36px rgba(0, 95, 204, .1); }
.cs__industry-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--csc);
  font-size: 18px;
  margin-bottom: 10px;
}
.cs__industry-tile strong { font-size: 15.5px; font-weight: 600; color: var(--csh); }
.cs__industry-tile span { font-size: 12.5px; font-weight: 400; color: var(--cst); }

/* ---------- 06. Technology view ---------- */
.cs__techdomain { background: #fff; }
.cs__techdomain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs__tech-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--csb);
  background: var(--csbg);
  font-family: inherit;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cs__tech-chip:hover { transform: translateY(-4px); border-color: var(--csc); box-shadow: 0 18px 36px rgba(0, 95, 204, .1); }
.cs__tech-chip span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 95, 204, .1);
  color: var(--csc);
  font-size: 16px;
}
.cs__tech-chip strong { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--csh); }
.cs__tech-chip em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--cst); }

/* ---------- 07. Portfolio insight: connected-journey icon strip ---------- */
.cs__insight { background: var(--csbg); text-align: center; }
.cs__insight .cs__head--center { margin-bottom: 60px; }

.cs__journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1040px; margin: 0 auto; }
.cs__journey-path { position: absolute; top: 6px; left: 0; width: 100%; height: 96px; z-index: 0; }
.cs__journey-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 16px; }
.cs__journey-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--csbg);
}
.cs__journey-node--blue .cs__journey-icon { background: radial-gradient(circle, rgba(0, 95, 204, .16) 0%, rgba(0, 95, 204, .03) 72%); color: #005fcc; }
.cs__journey-node--green .cs__journey-icon { background: radial-gradient(circle, rgba(22, 163, 74, .16) 0%, rgba(22, 163, 74, .03) 72%); color: #16a34a; }
.cs__journey-node--purple .cs__journey-icon { background: radial-gradient(circle, rgba(128, 121, 248, .18) 0%, rgba(128, 121, 248, .03) 72%); color: #8079f8; }
.cs__journey-node--orange .cs__journey-icon { background: radial-gradient(circle, rgba(249, 115, 22, .16) 0%, rgba(249, 115, 22, .03) 72%); color: #f97316; }
.cs__journey-node h3 { font-size: 14.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--csh); margin: 6px 0 0; }
.cs__journey-bar { display: block; width: 26px; height: 3px; border-radius: 2px; }
.cs__journey-node--blue .cs__journey-bar { background: #005fcc; }
.cs__journey-node--green .cs__journey-bar { background: #16a34a; }
.cs__journey-node--purple .cs__journey-bar { background: #8079f8; }
.cs__journey-node--orange .cs__journey-bar { background: #f97316; }
.cs__journey-node p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--cst); margin: 0; max-width: 190px; }

@media only screen and (max-width: 767px) {
  .cs__journey { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .cs__journey-path { display: none; }
}

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.cs__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cs__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--csc);
  background: transparent;
  border: 2px solid var(--csb);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.cs__page .final-cta-btn-outline:hover { background: var(--csc); border-color: var(--csc); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cs__page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .cs__deck-card { transition: none; }
  .cs__deck-card:hover,
  .cs__deck-card:focus-visible { transform: translateX(-50%) rotate(0deg); }
}

@media only screen and (max-width: 1199px) {
  .cs__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .cs__hero-figure { height: 460px; max-width: 560px; margin: 0 auto; }
  .cs__spotlight { grid-template-columns: 1fr; }
  .cs__mosaic { grid-template-rows: 400px 240px; }
  .cs__grid { grid-template-columns: repeat(3, 1fr); }
  .cs__industry-grid { grid-template-columns: repeat(2, 1fr); }
  .cs__techdomain-grid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 991px) {
  .cs__page section { padding: 90px 0; }
  .cs__hero { padding: 150px 0 90px; }
  .cs__hero-title { font-size: 42px; }
  .cs__mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 380px 300px;
    grid-auto-rows: 220px;
    gap: 18px;
  }
  .cs__mosaic-card--feature { grid-column: 1 / span 2; grid-row: 1; }
  .cs__mosaic-card--tall { grid-column: 1 / span 2; grid-row: 2; }
  .cs__mosaic-card--compact { grid-column: span 1; grid-row: auto; }
  .cs__grid { grid-template-columns: repeat(2, 1fr); }
  .cs__filterbar { flex-direction: column; align-items: stretch; }
  .cs__filter-selects { flex-direction: column; align-items: stretch; }
  .cs__filter-field select { width: 100%; }
}
@media only screen and (max-width: 767px) {
  .cs__hero-title { font-size: 34px; }

  /* Deck becomes a horizontal, swipeable card strip: same cards, no fan/rotation. */
  .cs__hero-figure { height: auto; max-width: 100%; overflow: hidden; }
  .cs__deck {
    height: auto;
    max-width: 100%;
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .cs__deck-shadow { display: none; }
  .cs__deck-card {
    position: relative;
    flex: none;
    width: 168px;
    height: 232px;
    scroll-snap-align: center;
    transform: none !important;
    z-index: auto !important;
  }
  .cs__deck-card:hover,
  .cs__deck-card:focus-visible { transform: translateY(-8px) !important; }
  .cs__deck-hint { margin-top: 16px; }

  .cs__grid { grid-template-columns: 1fr; }
  .cs__industry-grid { grid-template-columns: 1fr; }
  .cs__techdomain-grid { grid-template-columns: repeat(2, 1fr); }
  .cs__spotlight-copy { padding: 30px 24px; }

  /* Mosaic folds to a plain stacked list: overlay treatment doesn't
     survive narrow widths, so cards revert to image-above-body. */
  .cs__mosaic { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 18px; }
  .cs__mosaic-card--feature,
  .cs__mosaic-card--tall,
  .cs__mosaic-card--compact { grid-column: 1; grid-row: auto; }
  .cs__mosaic-media { position: relative; inset: auto; height: 220px; }
  .cs__mosaic-card::before,
  .cs__mosaic-card:hover::before { content: none; }
  .cs__mosaic-body { position: relative; justify-content: flex-start; padding: 22px 20px; }
  .cs__mosaic-card--compact .cs__mosaic-body p { -webkit-line-clamp: unset; }
}


/* ============================================================
   CASE STUDIES 8-20: per-page palettes (image-matched).
   Each reuses the .cb__page component system (case-study-7)
   and only re-tints the palette variables to blend with its
   own hero image, mirroring how case studies 1-7 are themed.
   ============================================================ */
.cb__page.cs8 {
  --cc: #6a5fd8;
  --cc2: #3629b0;
  --cc3: #9891df;
  --cb: #dfddee;
  --cbg: #f3f2fb;
  --cmuted: #bab7e1;
  --cc-rgb: 106, 95, 216;
  --cc2-rgb: 54, 41, 176;
  --cc3-rgb: 152, 145, 223;
}
.cb__page.cs9 {
  --cc: #2563eb;
  --cc2: #0e41b0;
  --cc3: #769beb;
  --cb: #dde2ee;
  --cbg: #f2f5fb;
  --cmuted: #b7c4e1;
  --cc-rgb: 37, 99, 235;
  --cc2-rgb: 14, 65, 176;
  --cc3-rgb: 118, 155, 235;
}
.cb__page.cs10 {
  --cc: #0fb0a0;
  --cc2: #097c71;
  --cc3: #2ee2d0;
  --cb: #ddeeec;
  --cbg: #f2fbfa;
  --cmuted: #b7e1dd;
  --cc-rgb: 15, 176, 160;
  --cc2-rgb: 9, 124, 113;
  --cc3-rgb: 46, 226, 208;
}
.cb__page.cs11 {
  --cc: #7c3aed;
  --cc2: #5010bf;
  --cc3: #aa82ed;
  --cb: #e3ddee;
  --cbg: #f5f2fb;
  --cmuted: #c6b7e1;
  --cc-rgb: 124, 58, 237;
  --cc2-rgb: 80, 16, 191;
  --cc3-rgb: 170, 130, 237;
}
.cb__page.cs12 {
  --cc: #d81f2c;
  --cc2: #98141e;
  --cc3: #e16770;
  --cb: #eeddde;
  --cbg: #fbf2f3;
  --cmuted: #e1b7ba;
  --cc-rgb: 216, 31, 44;
  --cc2-rgb: 152, 20, 30;
  --cc3-rgb: 225, 103, 112;
}
.cb__page.cs13 {
  --cc: #5b64d6;
  --cc2: #2933ac;
  --cc3: #9197de;
  --cb: #dddfee;
  --cbg: #f2f3fb;
  --cmuted: #b7bae1;
  --cc-rgb: 91, 100, 214;
  --cc2-rgb: 41, 51, 172;
  --cc3-rgb: 145, 151, 222;
}
.cb__page.cs14 {
  --cc: #6ba43c;
  --cc2: #4b7429;
  --cc3: #95c46e;
  --cb: #e5eedd;
  --cbg: #f6fbf2;
  --cmuted: #cae1b7;
  --cc-rgb: 107, 164, 60;
  --cc2-rgb: 75, 116, 41;
  --cc3-rgb: 149, 196, 110;
}
.cb__page.cs15 {
  --cc: #8574e6;
  --cc2: #3d23cf;
  --cc3: #988be4;
  --cb: #e0ddee;
  --cbg: #f3f2fb;
  --cmuted: #bdb7e1;
  --cc-rgb: 133, 116, 230;
  --cc2-rgb: 61, 35, 207;
  --cc3-rgb: 152, 139, 228;
}
.cb__page.cs16 {
  --cc: #1580c6;
  --cc2: #0d5a8c;
  --cc3: #4aa6e2;
  --cb: #dde7ee;
  --cbg: #f2f7fb;
  --cmuted: #b7d0e1;
  --cc-rgb: 21, 128, 198;
  --cc2-rgb: 13, 90, 140;
  --cc3-rgb: 74, 166, 226;
}
.cb__page.cs17 {
  --cc: #c27a91;
  --cc2: #98455f;
  --cc3: #cfa0af;
  --cb: #eedde3;
  --cbg: #fbf2f5;
  --cmuted: #e1b7c4;
  --cc-rgb: 194, 122, 145;
  --cc2-rgb: 152, 69, 95;
  --cc3-rgb: 207, 160, 175;
}
.cb__page.cs18 {
  --cc: #d69a2b;
  --cc2: #986c1c;
  --cc3: #ddb975;
  --cb: #eee8dd;
  --cbg: #fbf8f2;
  --cmuted: #e1d2b7;
  --cc-rgb: 214, 154, 43;
  --cc2-rgb: 152, 108, 28;
  --cc3-rgb: 221, 185, 117;
}
.cb__page.cs19 {
  --cc: #8b3fe8;
  --cc2: #5f14ba;
  --cc3: #b385ea;
  --cb: #e5ddee;
  --cbg: #f6f2fb;
  --cmuted: #cab7e1;
  --cc-rgb: 139, 63, 232;
  --cc2-rgb: 95, 20, 186;
  --cc3-rgb: 179, 133, 234;
}
.cb__page.cs20 {
  --cc: #4c63e0;
  --cc2: #1e35b4;
  --cc3: #8a98e5;
  --cb: #dde0ee;
  --cbg: #f2f3fb;
  --cmuted: #b7bde1;
  --cc-rgb: 76, 99, 224;
  --cc2-rgb: 30, 53, 180;
  --cc3-rgb: 138, 152, 229;
}


/* ============================================================
   CLOUD & DATA INSIGHTS HUB (insights-cloud-data.html): cdh__*
   Topic-hub landing page for the ten Cloud & Data insight
   articles. Scoped to .cdh__page. Reuses the site's cloud/data
   accent (blue -> cyan -> sky, same family as .cds__page on
   cloud-data-solutions.html) so the hub reads as a natural
   sibling of that solutions page and of the article pages it
   links to. Card/spotlight/grid patterns mirror the .cs__page
   system on case-studies.html; the shared global .final-cta
   component is reused as-is for the closing CTA.
   ============================================================ */
.cdh__page {
  --hc: #005fcc;
  --hc2: #06b6d4;
  --hc3: #38bdf8;
  --hh: #1c1e2b;
  --ht: #6b7089;
  --hb: #e4edf5;
  --hbg: #f3f8fb;
  --hdark: #07152F;
  --hmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
.cdh__page section { padding: 130px 0; }
.cdh__page .cdh__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--hc);
  margin-bottom: 18px;
}
.cdh__page .cdh__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--hh); margin: 0 0 20px; }
.cdh__page .cdh__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--hh); margin: 0 0 16px; }
.cdh__page .cdh__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--ht); margin: 0 0 16px; }
.cdh__page .cdh__text:last-child { margin-bottom: 0; }
.cdh__page .cdh__head { max-width: 760px; }
.cdh__page .cdh__head--center { margin: 0 auto 56px; text-align: center; }

.cdh__page .cdh__btn,
.cdh__page .cdh__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cdh__page .cdh__btn { color: #fff; background: var(--hc); border: 2px solid var(--hc); }
.cdh__page .cdh__btn:hover { background: var(--hc2); border-color: var(--hc2); color: #fff; }
.cdh__page .cdh__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.cdh__page .cdh__btn-outline:hover { background: #fff; border-color: #fff; color: var(--hdark); }

/* ---------- Related insight navigation ---------- */
.cdh__subnav { background: #fff; padding: 0 0 60px; }
.cdh__subnav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px;
  border-radius: 16px;
  background: var(--hbg);
  border: 1px solid var(--hb);
}
.cdh__subnav-back,
.cdh__subnav-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hc);
  transition: gap .3s ease, color .3s ease;
}
.cdh__subnav-back:hover,
.cdh__subnav-next:hover { gap: 15px; color: var(--hc2); }
@media only screen and (max-width: 991px) {
  .cdh__subnav-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.cdh__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cdh__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--hc);
  background: transparent;
  border: 2px solid var(--hb);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.cdh__page .final-cta-btn-outline:hover { background: var(--hc); border-color: var(--hc); color: #fff; }

/* Shared project meta (spotlight + grid cards) */
.cdh__page .cdh__proj-cat,
.cdh__page .cdh__card-cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(56, 189, 248, .35);
  background: rgba(56, 189, 248, .1);
  color: var(--hc3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.cdh__page .cdh__card-cat { color: var(--hc); background: rgba(0, 95, 204, .08); border-color: rgba(0, 95, 204, .22); }
.cdh__page .cdh__proj-tags { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cdh__page .cdh__proj-tags li {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #cfe8f3;
  font-size: 12px;
  font-weight: 400;
}
.cdh__page .cdh__proj-link,
.cdh__page .cdh__card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--hc3);
  transition: gap .3s ease, color .3s ease;
  margin-top: auto;
}
.cdh__page .cdh__card-link { color: var(--hc); }
.cdh__page a:hover .cdh__proj-link,
.cdh__page a:hover .cdh__card-link { gap: 15px; }

/* ---------- 01. Hero ---------- */
.cdh__hero {
  position: relative;
  overflow: hidden;
  background: var(--hdark);
  padding: 200px 0 120px;
}
.cdh__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(780px 460px at 4% 108%, rgba(6, 182, 212, .28), transparent 64%);
}
.cdh__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.cdh__hero > .container { position: relative; z-index: 2; }
.cdh__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.cdh__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(56, 189, 248, .35);
  background: rgba(56, 189, 248, .1);
  color: var(--hc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.cdh__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.cdh__hero-title em { font-style: normal; background: linear-gradient(90deg, var(--hc3), var(--hc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cdh__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbeef4; margin: 0 0 34px; max-width: 560px; }
.cdh__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.cdh__hero-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 34px; }
.cdh__hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.cdh__hero-stats strong { font-size: 30px; font-weight: 600; color: #fff; line-height: 1; }
.cdh__hero-stats span { font-size: 12.5px; font-weight: 300; letter-spacing: .5px; color: var(--hmuted); text-transform: uppercase; }

/* Hero visual: a vertical connected rail previewing the 5-stage
   journey (see .cdh__rail below), no stock imagery required. */
.cdh__hero-figure { position: relative; }
.cdh__flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}
.cdh__flow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.cdh__flow-node::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(56, 189, 248, .5), transparent);
}
.cdh__flow-node--last::after { display: none; }
.cdh__flow-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(56, 189, 248, .14);
  color: var(--hc3);
  font-size: 18px;
}
.cdh__flow-node div { display: flex; flex-direction: column; gap: 2px; }
.cdh__flow-node strong { font-size: 15.5px; font-weight: 600; color: #fff; }
.cdh__flow-node span { font-size: 12.5px; font-weight: 300; color: var(--hmuted); }
.cdh__flow-node:hover { border-color: rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .08); }

/* ---------- 02. Overview ---------- */
.cdh__intro { background: #fff; }
.cdh__intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* ---------- 03. What Cloud & Data covers ---------- */
.cdh__topics { background: var(--hbg); }
.cdh__topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cdh__topic-card {
  padding: 32px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--hb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cdh__topic-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 95, 204, .1); }
.cdh__topic-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--hc);
  font-size: 20px;
  margin-bottom: 18px;
}
.cdh__topic-card h3 { font-size: 18.5px; font-weight: 600; color: var(--hh); margin: 0 0 12px; }
.cdh__topic-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--ht); margin: 0 0 18px; }
.cdh__topic-links { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--hb); display: flex; flex-direction: column; gap: 10px; }
.cdh__topic-links a { font-size: 13px; font-weight: 600; color: var(--hc); display: inline-flex; align-items: center; gap: 8px; }
.cdh__topic-links a::before { content: "\2192"; font-weight: 400; }
.cdh__topic-links a:hover { color: var(--hc2); }

/* ---------- 04. Featured insight ---------- */
.cdh__featured { background: #fff; }
.cdh__spotlight {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--hdark);
  border: 1px solid rgba(255, 255, 255, .12);
}
.cdh__spotlight-media { overflow: hidden; }
.cdh__spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; transition: transform .5s ease; }
.cdh__spotlight:hover .cdh__spotlight-media img { transform: scale(1.04); }
.cdh__spotlight-copy { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.cdh__spotlight-copy h3 { font-size: 27px; font-weight: 600; color: #fff; margin: 0 0 16px; line-height: 1.3; }
.cdh__spotlight-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--hmuted); margin: 0 0 10px; }

/* ---------- 05. Cloud & Data journey ---------- */
.cdh__journey { background: var(--hbg); }
.cdh__rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.cdh__rail-stage {
  position: relative;
  padding: 28px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--hb);
}
.cdh__rail-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 20px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--hc3) 0 6px, transparent 6px 10px);
}
.cdh__rail-stage--last::after { display: none; }
.cdh__rail-num { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--hc3); }
.cdh__rail-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(0, 95, 204, .1);
  color: var(--hc);
  font-size: 17px;
  margin: 10px 0 14px;
}
.cdh__rail-stage h3 { font-size: 17px; font-weight: 600; color: var(--hh); margin: 0 0 10px; }
.cdh__rail-stage p { font-size: 12.5px; font-weight: 300; line-height: 1.65; color: var(--ht); margin: 0 0 14px; }
.cdh__rail-stage ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--hb); display: flex; flex-direction: column; gap: 8px; }
.cdh__rail-stage ul a { font-size: 12px; font-weight: 600; color: var(--hc); }
.cdh__rail-stage ul a:hover { color: var(--hc2); }

/* ---------- 06. All insights: grouped grid ---------- */
.cdh__library { background: #fff; }
.cdh__group { margin-bottom: 56px; }
.cdh__group:last-child { margin-bottom: 0; }
.cdh__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--hh);
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hb);
}
.cdh__group-title i { color: var(--hc); font-size: 17px; }
.cdh__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cdh__grid--single { grid-template-columns: minmax(0, 620px); }
.cdh__card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cdh__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.cdh__card-media { overflow: hidden; background: var(--hbg); }
.cdh__card-media img { width: 100%; height: 168px; object-fit: cover; display: block; transition: transform .5s ease; }
.cdh__card:hover .cdh__card-media img { transform: scale(1.06); }
.cdh__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.cdh__card-body h4 { font-size: 16.5px; font-weight: 500; color: var(--ht); margin: 0 0 10px; line-height: 1.35; }
.cdh__card-body p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--ht); margin: 0 0 14px; }
.cdh__card-next { font-size: 11.5px; font-weight: 500; color: var(--hc3); background: rgba(0, 95, 204, .07); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

/* ---------- 07. Where to start ---------- */
.cdh__start { background: var(--hbg); }
.cdh__needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cdh__need {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--hb);
  transition: transform .3s ease, border-color .3s ease;
}
.cdh__need:hover { transform: translateY(-4px); border-color: var(--hc); }
.cdh__need-q { font-size: 14px; font-weight: 500; color: var(--ht); }
.cdh__need-a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--hc); transition: gap .3s ease; }
.cdh__need:hover .cdh__need-a { gap: 15px; color: var(--hc2); }

@media (prefers-reduced-motion: reduce) {
  .cdh__page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media only screen and (max-width: 1199px) {
  .cdh__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .cdh__hero-figure { max-width: 560px; margin: 0 auto; }
  .cdh__topics-grid { grid-template-columns: repeat(2, 1fr); }
  .cdh__spotlight { grid-template-columns: 1fr; }
  .cdh__rail { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .cdh__rail-stage:nth-child(3)::after { display: none; }
  .cdh__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .cdh__page section { padding: 90px 0; }
  .cdh__page .cdh__hero { padding: 190px 0 90px; }
  .cdh__hero-title { font-size: 40px; }
  .cdh__topics-grid { grid-template-columns: 1fr; }
  .cdh__rail { grid-template-columns: repeat(2, 1fr); }
  .cdh__rail-stage::after { display: none; }
  .cdh__needs { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .cdh__hero-title { font-size: 32px; }
  .cdh__grid { grid-template-columns: 1fr; }
  .cdh__grid--single { grid-template-columns: 1fr; }
  .cdh__rail { grid-template-columns: 1fr; }
  .cdh__spotlight-copy { padding: 30px 24px; }
}


/* ============================================================
   SOFTWARE DEVELOPMENT INSIGHTS HUB
   (insights-software-development.html): sdh__*
   Topic-hub landing page for the ten Software Development
   insight articles. Scoped to .sdh__page. Structurally a sibling
   of .cdh__page (insights-cloud-data.html), same hero/spotlight/
   rail/card grammar, but recolored to the graphite-teal-copper
   family from .swe__page (software-engineering.html), the page
   every one of these ten articles' CTA already points to, so the
   hub reads as a natural bridge between the articles and that
   service page. Kanit only (swe__page's Sora/mono pairing stays
   scoped to that one page, per its own comment). The shared
   global .final-cta component is reused as-is for the closing CTA.
   ============================================================ */
.sdh__page {
  --sc: #0F8B7D;
  --sc2: #E0993D;
  --sc3: #35B7A3;
  --sh: #12181B;
  --st: #5C6B6A;
  --sb: #DCE6E3;
  --sbg: #F3F6F5;
  --sdark: #0B1613;
  --smuted: #A9C4BE;
  font-family: "Kanit", sans-serif;
}
.sdh__page section { padding: 130px 0; }
.sdh__page .sdh__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sc);
  margin-bottom: 18px;
}
.sdh__page .sdh__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--sh); margin: 0 0 20px; }
.sdh__page .sdh__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--sh); margin: 0 0 16px; }
.sdh__page .sdh__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--st); margin: 0 0 16px; }
.sdh__page .sdh__text:last-child { margin-bottom: 0; }
.sdh__page .sdh__head { max-width: 760px; }
.sdh__page .sdh__head--center { margin: 0 auto 56px; text-align: center; }

.sdh__page .sdh__btn,
.sdh__page .sdh__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.sdh__page .sdh__btn { color: #fff; background: var(--sc); border: 2px solid var(--sc); }
.sdh__page .sdh__btn:hover { background: var(--sc3); border-color: var(--sc3); color: #fff; }
.sdh__page .sdh__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.sdh__page .sdh__btn-outline:hover { background: #fff; border-color: #fff; color: var(--sdark); }

/* Shared project meta (spotlight + grid cards) */
.sdh__page .sdh__proj-cat,
.sdh__page .sdh__card-cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .1);
  color: var(--sc3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.sdh__page .sdh__card-cat { color: var(--sc); background: rgba(15, 139, 125, .08); border-color: rgba(15, 139, 125, .22); }
.sdh__page .sdh__takeaways { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sdh__page .sdh__takeaways li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--smuted);
}
.sdh__page .sdh__takeaways li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--sc2);
  font-weight: 700;
  font-size: 13px;
}
.sdh__page .sdh__proj-link,
.sdh__page .sdh__card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--sc3);
  transition: gap .3s ease, color .3s ease;
  margin-top: auto;
}
.sdh__page .sdh__card-link { color: var(--sc); }
.sdh__page a:hover .sdh__proj-link,
.sdh__page a:hover .sdh__card-link { gap: 15px; }

/* ---------- 01. Hero ---------- */
.sdh__hero {
  position: relative;
  overflow: hidden;
  background: var(--sdark);
  padding: 200px 0 120px;
}
.sdh__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(15, 139, 125, .40), transparent 62%),
              radial-gradient(780px 460px at 4% 108%, rgba(224, 153, 61, .22), transparent 64%);
}
.sdh__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.sdh__hero > .container { position: relative; z-index: 2; }
.sdh__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.sdh__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(53, 183, 163, .35);
  background: rgba(53, 183, 163, .1);
  color: var(--sc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.sdh__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.sdh__hero-accent { background: linear-gradient(90deg, var(--sc3), var(--sc2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sdh__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dcefe9; margin: 0 0 34px; max-width: 560px; }
.sdh__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.sdh__hero-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 34px; }
.sdh__hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.sdh__hero-stats strong { font-size: 30px; font-weight: 600; color: #fff; line-height: 1; }
.sdh__hero-stats span { font-size: 12.5px; font-weight: 300; letter-spacing: .5px; color: var(--smuted); text-transform: uppercase; }

/* Hero visual: a vertical connected rail previewing how the
   collection is organized, no stock imagery required. */
.sdh__hero-figure { position: relative; }
.sdh__flow { position: relative; display: flex; flex-direction: column; gap: 0; padding: 8px 0; }
.sdh__flow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.sdh__flow-node::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(53, 183, 163, .5), transparent);
}
.sdh__flow-node--last::after { display: none; }
.sdh__flow-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(53, 183, 163, .14);
  color: var(--sc3);
  font-size: 18px;
}
.sdh__flow-node div { display: flex; flex-direction: column; gap: 2px; }
.sdh__flow-node strong { font-size: 15.5px; font-weight: 600; color: #fff; }
.sdh__flow-node span { font-size: 12.5px; font-weight: 300; color: var(--smuted); }
.sdh__flow-node:hover { border-color: rgba(53, 183, 163, .4); background: rgba(53, 183, 163, .08); }

/* ---------- 02. Overview ---------- */
.sdh__intro { background: #fff; }
.sdh__intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* ---------- 03. Topic categories ---------- */
.sdh__topics { background: var(--sbg); }
.sdh__topics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sdh__topic-card {
  padding: 32px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--sb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sdh__topic-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(15, 139, 125, .1); }
.sdh__topic-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(15, 139, 125, .1);
  color: var(--sc);
  font-size: 20px;
  margin-bottom: 18px;
}
.sdh__topic-card h3 { font-size: 18.5px; font-weight: 600; color: var(--sh); margin: 0 0 12px; }
.sdh__topic-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--st); margin: 0 0 18px; }
.sdh__topic-links { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--sb); display: flex; flex-direction: column; gap: 10px; }
.sdh__topic-links a { font-size: 13px; font-weight: 600; color: var(--sc); display: inline-flex; align-items: center; gap: 8px; }
.sdh__topic-links a::before { content: "\2192"; font-weight: 400; }
.sdh__topic-links a:hover { color: var(--sc3); }

/* ---------- 04. Featured insight ---------- */
.sdh__featured { background: #fff; }
.sdh__spotlight {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--sdark);
  border: 1px solid rgba(255, 255, 255, .12);
}
.sdh__spotlight-media { overflow: hidden; }
.sdh__spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; transition: transform .5s ease; }
.sdh__spotlight:hover .sdh__spotlight-media img { transform: scale(1.04); }
.sdh__spotlight-copy { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.sdh__spotlight-copy h3 { font-size: 26px; font-weight: 600; color: #fff; margin: 0 0 16px; line-height: 1.3; }
.sdh__spotlight-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--smuted); margin: 0 0 22px; }

/* ---------- 05. What you'll explore ---------- */
.sdh__explore { background: var(--sbg); }
.sdh__explore-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sdh__explore-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--sb);
  font-size: 14px;
  font-weight: 500;
  color: var(--sh);
  line-height: 1.4;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sdh__explore-tile:hover { transform: translateY(-4px); border-color: var(--sc); box-shadow: 0 18px 36px rgba(15, 139, 125, .1); }
.sdh__explore-tile span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(15, 139, 125, .1);
  color: var(--sc);
  font-size: 17px;
}

/* ---------- 06. Editorial journey ---------- */
.sdh__journey { background: #fff; }
.sdh__rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.sdh__rail-stage {
  position: relative;
  padding: 24px 18px;
  border-radius: 16px;
  background: var(--sbg);
  border: 1px solid var(--sb);
}
.sdh__rail-num { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--sc3); }
.sdh__rail-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(15, 139, 125, .1);
  color: var(--sc);
  font-size: 16px;
  margin: 10px 0 14px;
}
.sdh__rail-stage h3 { font-size: 15.5px; font-weight: 600; color: var(--sh); margin: 0 0 8px; }
.sdh__rail-stage p { font-size: 11.5px; font-weight: 300; line-height: 1.55; color: var(--st); margin: 0 0 12px; }
.sdh__rail-stage ul { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--sb); display: flex; flex-direction: column; gap: 7px; }
.sdh__rail-stage ul a { font-size: 11px; font-weight: 600; color: var(--sc); }
.sdh__rail-stage ul a:hover { color: var(--sc3); }

/* ---------- 07. Full library: grouped grid ---------- */
.sdh__library { background: var(--sbg); }
.sdh__group { margin-bottom: 56px; }
.sdh__group:last-child { margin-bottom: 0; }
.sdh__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--sh);
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sb);
}
.sdh__group-title i { color: var(--sc); font-size: 17px; }
.sdh__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sdh__grid--single { grid-template-columns: minmax(0, 620px); }
.sdh__card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sdh__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(18, 24, 27, .1); }
.sdh__card-media { overflow: hidden; background: var(--sbg); }
.sdh__card-media img { width: 100%; height: 168px; object-fit: cover; display: block; transition: transform .5s ease; }
.sdh__card:hover .sdh__card-media img { transform: scale(1.06); }
.sdh__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sdh__card-body h4 { font-size: 16.5px; font-weight: 500; color: var(--st); margin: 0 0 10px; line-height: 1.35; }
.sdh__card-body p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--st); margin: 0 0 14px; }
.sdh__card-next { font-size: 11.5px; font-weight: 500; color: var(--sc); background: rgba(15, 139, 125, .07); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

/* ---------- 08. Related insight navigation ---------- */
.sdh__subnav { background: #fff; padding: 0 0 60px; }
.sdh__subnav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px;
  border-radius: 16px;
  background: var(--sbg);
  border: 1px solid var(--sb);
}
.sdh__subnav-back,
.sdh__subnav-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sc);
  transition: gap .3s ease, color .3s ease;
}
.sdh__subnav-back:hover,
.sdh__subnav-next:hover { gap: 15px; color: var(--sc3); }

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.sdh__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sdh__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--sc);
  background: transparent;
  border: 2px solid var(--sb);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.sdh__page .final-cta-btn-outline:hover { background: var(--sc); border-color: var(--sc); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sdh__page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media only screen and (max-width: 1299px) {
  .sdh__rail { grid-template-columns: repeat(4, 1fr); row-gap: 20px; }
}
@media only screen and (max-width: 1199px) {
  .sdh__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .sdh__hero-figure { max-width: 560px; margin: 0 auto; }
  .sdh__topics-grid { grid-template-columns: repeat(2, 1fr); }
  .sdh__spotlight { grid-template-columns: 1fr; }
  .sdh__explore-grid { grid-template-columns: repeat(3, 1fr); }
  .sdh__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .sdh__page section { padding: 90px 0; }
  .sdh__page .sdh__hero { padding: 190px 0 90px; }
  .sdh__hero-title { font-size: 40px; }
  .sdh__topics-grid { grid-template-columns: 1fr; }
  .sdh__explore-grid { grid-template-columns: repeat(2, 1fr); }
  .sdh__rail { grid-template-columns: repeat(2, 1fr); }
  .sdh__subnav-inner { flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 767px) {
  .sdh__hero-title { font-size: 32px; }
  .sdh__grid { grid-template-columns: 1fr; }
  .sdh__grid--single { grid-template-columns: 1fr; }
  .sdh__rail { grid-template-columns: 1fr; }
  .sdh__explore-grid { grid-template-columns: 1fr; }
  .sdh__spotlight-copy { padding: 30px 24px; }
}


/* ============================================================
   AI & EMERGING TECHNOLOGIES INSIGHTS HUB
   (insights-ai-emerging-technologies.html): ait__*
   Topic-hub landing page for the ten AI & Emerging Technologies
   insight articles. Scoped to .ait__page. Structurally a sibling
   of .cdh__page / .sdh__page (the Cloud & Data and Software
   Development insight hubs): same hero/spotlight/card grammar,
   no dedicated "journey" rail on this one since the brief didn't
   call for it. Recolored to the blue-violet family from .ai__page
   (artificial-intelligence.html), the page every one of these ten
   articles' CTA already points to, so the hub reads as a natural
   bridge into that solutions page. The shared global .final-cta
   component is reused as-is for the closing CTA.
   ============================================================ */
.ait__page {
  --ic: #005fcc;
  --ic2: #8079f8;
  --ic3: #4da3ff;
  --ih: #1c1e2b;
  --it: #6b7089;
  --ib: #e9eaf5;
  --ibg: #f6f7fc;
  --idark: #07152F;
  --imuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}
.ait__page section { padding: 130px 0; }
.ait__page .ait__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ic);
  margin-bottom: 18px;
}
.ait__page .ait__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--ih); margin: 0 0 20px; }
.ait__page .ait__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ih); margin: 0 0 16px; }
.ait__page .ait__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--it); margin: 0 0 16px; }
.ait__page .ait__text:last-child { margin-bottom: 0; }
.ait__page .ait__head { max-width: 760px; }
.ait__page .ait__head--center { margin: 0 auto 56px; text-align: center; }

.ait__page .ait__btn,
.ait__page .ait__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.ait__page .ait__btn { color: #fff; background: var(--ic); border: 2px solid var(--ic); }
.ait__page .ait__btn:hover { background: var(--ic2); border-color: var(--ic2); color: #fff; }
.ait__page .ait__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.ait__page .ait__btn-outline:hover { background: #fff; border-color: #fff; color: var(--idark); }

/* Shared project meta (spotlight + grid cards) */
.ait__page .ait__proj-cat,
.ait__page .ait__card-cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--ic3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.ait__page .ait__card-cat { color: var(--ic); background: rgba(0, 95, 204, .08); border-color: rgba(0, 95, 204, .22); }
.ait__page .ait__takeaways { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ait__page .ait__takeaways li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--imuted);
}
.ait__page .ait__takeaways li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--ic2);
  font-weight: 700;
  font-size: 13px;
}
.ait__page .ait__proj-link,
.ait__page .ait__card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ic3);
  transition: gap .3s ease, color .3s ease;
  margin-top: auto;
}
.ait__page .ait__card-link { color: var(--ic); }
.ait__page a:hover .ait__proj-link,
.ait__page a:hover .ait__card-link { gap: 15px; }

/* ---------- 01. Hero ---------- */
.ait__hero {
  position: relative;
  overflow: hidden;
  background: var(--idark);
  padding: 200px 0 120px;
}
.ait__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(780px 460px at 4% 108%, rgba(128, 121, 248, .28), transparent 64%);
}
.ait__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.ait__hero > .container { position: relative; z-index: 2; }
.ait__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ait__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--ic3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.ait__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.ait__hero-accent { background: linear-gradient(90deg, var(--ic3), var(--ic2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ait__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 34px; max-width: 560px; }
.ait__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.ait__hero-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 34px; }
.ait__hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.ait__hero-stats strong { font-size: 30px; font-weight: 600; color: #fff; line-height: 1; }
.ait__hero-stats span { font-size: 12.5px; font-weight: 300; letter-spacing: .5px; color: var(--imuted); text-transform: uppercase; }

/* Hero visual: a vertical connected rail previewing how the
   collection is organized, no stock imagery required. */
.ait__hero-figure { position: relative; }
.ait__flow { position: relative; display: flex; flex-direction: column; gap: 0; padding: 8px 0; }
.ait__flow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.ait__flow-node::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(77, 163, 255, .5), transparent);
}
.ait__flow-node--last::after { display: none; }
.ait__flow-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(77, 163, 255, .14);
  color: var(--ic3);
  font-size: 18px;
}
.ait__flow-node div { display: flex; flex-direction: column; gap: 2px; }
.ait__flow-node strong { font-size: 15.5px; font-weight: 600; color: #fff; }
.ait__flow-node span { font-size: 12.5px; font-weight: 300; color: var(--imuted); }
.ait__flow-node:hover { border-color: rgba(77, 163, 255, .4); background: rgba(77, 163, 255, .08); }

/* ---------- 02. Overview ---------- */
.ait__intro { background: #fff; }
.ait__intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* ---------- 03. Featured insight ---------- */
.ait__featured { background: var(--ibg); }
.ait__spotlight {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--idark);
  border: 1px solid rgba(255, 255, 255, .12);
}
.ait__spotlight-media { overflow: hidden; }
.ait__spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; transition: transform .5s ease; }
.ait__spotlight:hover .ait__spotlight-media img { transform: scale(1.04); }
.ait__spotlight-copy { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.ait__spotlight-copy h3 { font-size: 26px; font-weight: 600; color: #fff; margin: 0 0 16px; line-height: 1.3; }
.ait__spotlight-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--imuted); margin: 0 0 22px; }

/* ---------- 04. Explore AI & Emerging Technologies (topic cards) ---------- */
.ait__topics { background: #fff; }
.ait__topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ait__topic-card {
  padding: 32px 26px;
  border-radius: 18px;
  background: var(--ibg);
  border: 1px solid var(--ib);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ait__topic-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 95, 204, .1); }
.ait__topic-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--ic);
  font-size: 20px;
  margin-bottom: 18px;
}
.ait__topic-card h3 { font-size: 18.5px; font-weight: 600; color: var(--ih); margin: 0 0 12px; }
.ait__topic-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--it); margin: 0 0 18px; }
.ait__topic-links { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--ib); display: flex; flex-direction: column; gap: 10px; }
.ait__topic-links a { font-size: 13px; font-weight: 600; color: var(--ic); display: inline-flex; align-items: center; gap: 8px; }
.ait__topic-links a::before { content: "\2192"; font-weight: 400; }
.ait__topic-links a:hover { color: var(--ic2); }

/* ---------- 05. Full library: topic chips + grouped grid ---------- */
.ait__library { background: var(--ibg); }
.ait__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 56px;
}
.ait__chips a {
  padding: 10px 20px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--ib);
  color: var(--ih);
  font-size: 13.5px;
  font-weight: 600;
  transition: all .3s ease;
}
.ait__chips a:hover { background: var(--ic); border-color: var(--ic); color: #fff; }
.ait__group { margin-bottom: 56px; scroll-margin-top: 120px; }
.ait__group:last-child { margin-bottom: 0; }
.ait__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ih);
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ib);
}
.ait__group-title i { color: var(--ic); font-size: 17px; }
.ait__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ait__grid--single { grid-template-columns: minmax(0, 620px); }
.ait__card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ib);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ait__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.ait__card-media { overflow: hidden; background: var(--ibg); }
.ait__card-media img { width: 100%; height: 168px; object-fit: cover; display: block; transition: transform .5s ease; }
.ait__card:hover .ait__card-media img { transform: scale(1.06); }
.ait__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.ait__card-body h4 { font-size: 16.5px; font-weight: 500; color: var(--it); margin: 0 0 10px; line-height: 1.35; }
.ait__card-body p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--it); margin: 0 0 14px; }
.ait__card-next { font-size: 11.5px; font-weight: 500; color: var(--ic); background: rgba(0, 95, 204, .07); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

/* ---------- 06. Related insight navigation ---------- */
.ait__subnav { background: #fff; padding: 0 0 60px; }
.ait__subnav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px;
  border-radius: 16px;
  background: var(--ibg);
  border: 1px solid var(--ib);
}
.ait__subnav-back,
.ait__subnav-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ic);
  transition: gap .3s ease, color .3s ease;
}
.ait__subnav-back:hover,
.ait__subnav-next:hover { gap: 15px; color: var(--ic2); }

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.ait__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ait__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--ic);
  background: transparent;
  border: 2px solid var(--ib);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.ait__page .final-cta-btn-outline:hover { background: var(--ic); border-color: var(--ic); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ait__page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media only screen and (max-width: 1199px) {
  .ait__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .ait__hero-figure { max-width: 560px; margin: 0 auto; }
  .ait__topics-grid { grid-template-columns: repeat(2, 1fr); }
  .ait__spotlight { grid-template-columns: 1fr; }
  .ait__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .ait__page section { padding: 90px 0; }
  .ait__page .ait__hero { padding: 190px 0 90px; }
  .ait__hero-title { font-size: 40px; }
  .ait__topics-grid { grid-template-columns: 1fr; }
  .ait__subnav-inner { flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 767px) {
  .ait__hero-title { font-size: 32px; }
  .ait__grid { grid-template-columns: 1fr; }
  .ait__grid--single { grid-template-columns: 1fr; }
  .ait__spotlight-copy { padding: 30px 24px; }
  .ait__chips { gap: 8px; }
  .ait__chips a { padding: 8px 14px; font-size: 12.5px; }
}


/* ============================================================
   DIGITAL TRANSFORMATION INSIGHTS HUB
   (insights-digital-transformation.html): dth__*
   Topic-hub landing page for the ten Digital Transformation
   insight articles. Scoped to .dth__page. Structurally a sibling
   of .cdh__page / .sdh__page / .ait__page (the other three
   Insight hubs): same hero/spotlight/rail/card grammar. Recolored
   to a blue + growth-green pairing: the constant #005fcc brand
   blue plus an emerald accent (distinct from cloud-data's cyan,
   software-development's copper, and AI's violet), signaling
   forward motion/growth rather than a specific technology. The
   shared global .final-cta component is reused as-is, populated
   with the exact CTA copy already used identically across all ten
   source articles (sub-title/title/text/button all verbatim).
   ============================================================ */
.dth__page {
  --gc: #005fcc;
  --gc2: #16a34a;
  --gc3: #4ade80;
  --gh: #1c1e2b;
  --gt: #6b7089;
  --gb: #e2ede6;
  --gbg: #f3f8f5;
  --gdark: #07152F;
  --gmuted: #9fcbb0;
  font-family: "Kanit", sans-serif;
}
.dth__page section { padding: 130px 0; }
.dth__page .dth__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gc2);
  margin-bottom: 18px;
}
.dth__page .dth__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--gh); margin: 0 0 20px; }
.dth__page .dth__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--gh); margin: 0 0 16px; }
.dth__page .dth__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--gt); margin: 0 0 16px; }
.dth__page .dth__text:last-child { margin-bottom: 0; }
.dth__page .dth__head { max-width: 760px; }
.dth__page .dth__head--center { margin: 0 auto 56px; text-align: center; }

.dth__page .dth__btn,
.dth__page .dth__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.dth__page .dth__btn { color: #fff; background: var(--gc); border: 2px solid var(--gc); }
.dth__page .dth__btn:hover { background: var(--gc2); border-color: var(--gc2); color: #fff; }
.dth__page .dth__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.dth__page .dth__btn-outline:hover { background: #fff; border-color: #fff; color: var(--gdark); }

/* Shared project meta (spotlight + grid cards) */
.dth__page .dth__proj-cat,
.dth__page .dth__card-cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(74, 222, 128, .35);
  background: rgba(74, 222, 128, .12);
  color: var(--gc3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.dth__page .dth__card-cat { color: var(--gc2); background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .22); }
.dth__page .dth__takeaways { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dth__page .dth__takeaways li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--gmuted);
}
.dth__page .dth__takeaways li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--gc3);
  font-weight: 700;
  font-size: 13px;
}
.dth__page .dth__proj-link,
.dth__page .dth__card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--gc3);
  transition: gap .3s ease, color .3s ease;
  margin-top: auto;
}
.dth__page .dth__card-link { color: var(--gc2); }
.dth__page a:hover .dth__proj-link,
.dth__page a:hover .dth__card-link { gap: 15px; }

/* ---------- 01. Hero ---------- */
.dth__hero {
  position: relative;
  overflow: hidden;
  background: var(--gdark);
  padding: 200px 0 120px;
}
.dth__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(780px 460px at 4% 108%, rgba(22, 163, 74, .30), transparent 64%);
}
.dth__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.dth__hero > .container { position: relative; z-index: 2; }
.dth__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.dth__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(74, 222, 128, .35);
  background: rgba(74, 222, 128, .1);
  color: var(--gc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.dth__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.dth__hero-accent { background: linear-gradient(90deg, var(--gc3), #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dth__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dcf2e4; margin: 0 0 34px; max-width: 560px; }
.dth__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.dth__hero-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 34px; }
.dth__hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.dth__hero-stats strong { font-size: 30px; font-weight: 600; color: #fff; line-height: 1; }
.dth__hero-stats span { font-size: 12.5px; font-weight: 300; letter-spacing: .5px; color: var(--gmuted); text-transform: uppercase; }

/* Hero visual: a vertical connected rail previewing how the
   collection is organized, no stock imagery required. */
.dth__hero-figure { position: relative; }
.dth__flow { position: relative; display: flex; flex-direction: column; gap: 0; padding: 8px 0; }
.dth__flow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.dth__flow-node::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(74, 222, 128, .5), transparent);
}
.dth__flow-node--last::after { display: none; }
.dth__flow-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(74, 222, 128, .14);
  color: var(--gc3);
  font-size: 18px;
}
.dth__flow-node div { display: flex; flex-direction: column; gap: 2px; }
.dth__flow-node strong { font-size: 15.5px; font-weight: 600; color: #fff; }
.dth__flow-node span { font-size: 12.5px; font-weight: 300; color: var(--gmuted); }
.dth__flow-node:hover { border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .08); }

/* ---------- 02. Overview ---------- */
.dth__intro { background: #fff; }
.dth__intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* ---------- 03. Featured insight ---------- */
.dth__featured { background: var(--gbg); }
.dth__spotlight {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--gdark);
  border: 1px solid rgba(255, 255, 255, .12);
}
.dth__spotlight-media { overflow: hidden; }
.dth__spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; transition: transform .5s ease; }
.dth__spotlight:hover .dth__spotlight-media img { transform: scale(1.04); }
.dth__spotlight-copy { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.dth__spotlight-copy h3 { font-size: 26px; font-weight: 600; color: #fff; margin: 0 0 16px; line-height: 1.3; }
.dth__spotlight-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--gmuted); margin: 0 0 22px; }

/* ---------- 04. Transformation themes ---------- */
.dth__topics { background: #fff; }
.dth__topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dth__topic-card {
  padding: 32px 26px;
  border-radius: 18px;
  background: var(--gbg);
  border: 1px solid var(--gb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dth__topic-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(22, 163, 74, .1); }
.dth__topic-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--gc);
  font-size: 20px;
  margin-bottom: 18px;
}
.dth__topic-card h3 { font-size: 18.5px; font-weight: 600; color: var(--gh); margin: 0 0 12px; }
.dth__topic-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--gt); margin: 0 0 18px; }
.dth__topic-links { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--gb); display: flex; flex-direction: column; gap: 10px; }
.dth__topic-links a { font-size: 13px; font-weight: 600; color: var(--gc2); display: inline-flex; align-items: center; gap: 8px; }
.dth__topic-links a::before { content: "\2192"; font-weight: 400; }
.dth__topic-links a:hover { color: var(--gc); }

/* ---------- 05. Digital Transformation journey ---------- */
.dth__journey { background: var(--gbg); }
.dth__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.dth__rail-stage {
  position: relative;
  padding: 26px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--gb);
}
.dth__rail-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--gc3) 0 6px, transparent 6px 10px);
}
.dth__rail-stage--last::after { display: none; }
.dth__rail-num { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--gc2); }
.dth__rail-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(0, 95, 204, .1);
  color: var(--gc);
  font-size: 17px;
  margin: 10px 0 14px;
}
.dth__rail-stage h3 { font-size: 15.5px; font-weight: 600; color: var(--gh); margin: 0 0 10px; }
.dth__rail-stage p { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--gt); margin: 0 0 14px; }
.dth__rail-stage ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--gb); display: flex; flex-direction: column; gap: 8px; }
.dth__rail-stage ul a { font-size: 11.5px; font-weight: 600; color: var(--gc2); }
.dth__rail-stage ul a:hover { color: var(--gc); }

/* ---------- 06. Full library: grouped grid ---------- */
.dth__library { background: #fff; }
.dth__group { margin-bottom: 56px; }
.dth__group:last-child { margin-bottom: 0; }
.dth__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--gh);
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gb);
}
.dth__group-title i { color: var(--gc2); font-size: 17px; }
.dth__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dth__card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dth__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.dth__card-media { overflow: hidden; background: var(--gbg); }
.dth__card-media img { width: 100%; height: 168px; object-fit: cover; display: block; transition: transform .5s ease; }
.dth__card:hover .dth__card-media img { transform: scale(1.06); }
.dth__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.dth__card-body h4 { font-size: 16.5px; font-weight: 500; color: var(--gt); margin: 0 0 10px; line-height: 1.35; }
.dth__card-body p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--gt); margin: 0 0 14px; }
.dth__card-next { font-size: 11.5px; font-weight: 500; color: var(--gc2); background: rgba(22, 163, 74, .07); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

/* ---------- 07. Related insight navigation ---------- */
.dth__subnav { background: var(--gbg); padding: 0 0 60px; }
.dth__subnav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--gb);
}
.dth__subnav-back,
.dth__subnav-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gc2);
  transition: gap .3s ease, color .3s ease;
}
.dth__subnav-back:hover,
.dth__subnav-next:hover { gap: 15px; color: var(--gc); }

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.dth__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.dth__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--gc2);
  background: transparent;
  border: 2px solid var(--gb);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.dth__page .final-cta-btn-outline:hover { background: var(--gc2); border-color: var(--gc2); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .dth__page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media only screen and (max-width: 1299px) {
  .dth__rail { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .dth__rail-stage:nth-child(3)::after { display: none; }
}
@media only screen and (max-width: 1199px) {
  .dth__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .dth__hero-figure { max-width: 560px; margin: 0 auto; }
  .dth__topics-grid { grid-template-columns: repeat(2, 1fr); }
  .dth__spotlight { grid-template-columns: 1fr; }
  .dth__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .dth__page section { padding: 90px 0; }
  .dth__page .dth__hero { padding: 190px 0 90px; }
  .dth__hero-title { font-size: 40px; }
  .dth__topics-grid { grid-template-columns: 1fr; }
  .dth__rail { grid-template-columns: repeat(2, 1fr); }
  .dth__rail-stage::after { display: none; }
  .dth__subnav-inner { flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 767px) {
  .dth__hero-title { font-size: 32px; }
  .dth__grid { grid-template-columns: 1fr; }
  .dth__rail { grid-template-columns: 1fr; }
  .dth__spotlight-copy { padding: 30px 24px; }
}


/* ============================================================
   BUSINESS INSIGHTS HUB (insights-business.html): bih__*
   Topic-hub landing page for the ten Business Insights articles.
   Scoped to .bih__page. Structurally a sibling of .cdh__page /
   .sdh__page / .ait__page / .dth__page (the other four Insight
   hubs): same hero/spotlight/rail/card grammar, plus a
   "Which Question Are You Facing?" two-column question-nav
   section unique to this hub. Recolored to a blue + warm-gold
   pairing (distinct from cloud-data's cyan, software-development's
   copper, AI's violet, and digital-transformation's green),
   signaling value/investment rather than a specific technology.
   The shared global .final-cta component is reused as-is,
   populated with the exact CTA copy already used identically
   across nine of the ten source articles.

   Note: the hero padding rule below is written as
   `.bih__page .bih__hero` (not the bare `.bih__hero` used
   originally on sibling pages) so it reliably outranks the
   pre-existing `.bih__page section { padding: 90px 0; }` rule
   at the same breakpoint, a specificity collision that was
   found and fixed retroactively on all four sibling hubs too.
   ============================================================ */
.bih__page {
  --bc: #005fcc;
  --bc2: #ca8a04;
  --bc3: #eab308;
  --bh: #1c1e2b;
  --bt: #6b7089;
  --bb: #ece5d3;
  --bbg: #faf7f0;
  --bdark: #07152F;
  --bmuted: #d9c398;
  font-family: "Kanit", sans-serif;
}
.bih__page section { padding: 130px 0; }
.bih__page .bih__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bc2);
  margin-bottom: 18px;
}
.bih__page .bih__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--bh); margin: 0 0 20px; }
.bih__page .bih__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--bh); margin: 0 0 16px; }
.bih__page .bih__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--bt); margin: 0 0 16px; }
.bih__page .bih__text:last-child { margin-bottom: 0; }
.bih__page .bih__head { max-width: 760px; }
.bih__page .bih__head--center { margin: 0 auto 56px; text-align: center; }

.bih__page .bih__btn,
.bih__page .bih__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.bih__page .bih__btn { color: #fff; background: var(--bc); border: 2px solid var(--bc); }
.bih__page .bih__btn:hover { background: var(--bc2); border-color: var(--bc2); color: #fff; }
.bih__page .bih__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.bih__page .bih__btn-outline:hover { background: #fff; border-color: #fff; color: var(--bdark); }

/* Shared project meta (spotlight + grid cards) */
.bih__page .bih__proj-cat,
.bih__page .bih__card-cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(234, 179, 8, .35);
  background: rgba(234, 179, 8, .12);
  color: var(--bc3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.bih__page .bih__card-cat { color: var(--bc2); background: rgba(202, 138, 4, .08); border-color: rgba(202, 138, 4, .22); }
.bih__page .bih__takeaways { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bih__page .bih__takeaways li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--bmuted);
}
.bih__page .bih__takeaways li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--bc3);
  font-weight: 700;
  font-size: 13px;
}
.bih__page .bih__proj-link,
.bih__page .bih__card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--bc3);
  transition: gap .3s ease, color .3s ease;
  margin-top: auto;
}
.bih__page .bih__card-link { color: var(--bc2); }
.bih__page a:hover .bih__proj-link,
.bih__page a:hover .bih__card-link { gap: 15px; }

/* ---------- 01. Hero ---------- */
.bih__hero {
  position: relative;
  overflow: hidden;
  background: var(--bdark);
  padding: 200px 0 120px;
}
.bih__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(780px 460px at 4% 108%, rgba(202, 138, 4, .28), transparent 64%);
}
.bih__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.bih__hero > .container { position: relative; z-index: 2; }
.bih__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.bih__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(234, 179, 8, .35);
  background: rgba(234, 179, 8, .1);
  color: var(--bc3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.bih__hero-title { font-size: 54px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 24px; }
.bih__hero-accent { background: linear-gradient(90deg, var(--bc3), #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bih__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #f3ead2; margin: 0 0 34px; max-width: 560px; }
.bih__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.bih__hero-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 34px; }
.bih__hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.bih__hero-stats strong { font-size: 30px; font-weight: 600; color: #fff; line-height: 1; }
.bih__hero-stats span { font-size: 12.5px; font-weight: 300; letter-spacing: .5px; color: var(--bmuted); text-transform: uppercase; }

/* Hero visual: a vertical connected rail previewing how the
   collection is organized, no stock imagery required. */
.bih__hero-figure { position: relative; }
.bih__flow { position: relative; display: flex; flex-direction: column; gap: 0; padding: 8px 0; }
.bih__flow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.bih__flow-node::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(234, 179, 8, .5), transparent);
}
.bih__flow-node--last::after { display: none; }
.bih__flow-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(234, 179, 8, .14);
  color: var(--bc3);
  font-size: 18px;
}
.bih__flow-node div { display: flex; flex-direction: column; gap: 2px; }
.bih__flow-node strong { font-size: 15.5px; font-weight: 600; color: #fff; }
.bih__flow-node span { font-size: 12.5px; font-weight: 300; color: var(--bmuted); }
.bih__flow-node:hover { border-color: rgba(234, 179, 8, .4); background: rgba(234, 179, 8, .08); }

/* ---------- 02. Overview ---------- */
.bih__intro { background: #fff; }
.bih__intro-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* ---------- 03. Featured insight ---------- */
.bih__featured { background: var(--bbg); }
.bih__spotlight {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bdark);
  border: 1px solid rgba(255, 255, 255, .12);
}
.bih__spotlight-media { overflow: hidden; }
.bih__spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; transition: transform .5s ease; }
.bih__spotlight:hover .bih__spotlight-media img { transform: scale(1.04); }
.bih__spotlight-copy { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.bih__spotlight-copy h3 { font-size: 26px; font-weight: 600; color: #fff; margin: 0 0 16px; line-height: 1.3; }
.bih__spotlight-copy p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--bmuted); margin: 0 0 22px; }

/* ---------- 04. Explore Business Insights (themes) ---------- */
.bih__topics { background: #fff; }
.bih__topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bih__topic-card {
  padding: 32px 26px;
  border-radius: 18px;
  background: var(--bbg);
  border: 1px solid var(--bb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bih__topic-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(202, 138, 4, .1); }
.bih__topic-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--bc);
  font-size: 20px;
  margin-bottom: 18px;
}
.bih__topic-card h3 { font-size: 18.5px; font-weight: 600; color: var(--bh); margin: 0 0 12px; }
.bih__topic-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--bt); margin: 0 0 18px; }
.bih__topic-links { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--bb); display: flex; flex-direction: column; gap: 10px; }
.bih__topic-links a { font-size: 13px; font-weight: 600; color: var(--bc2); display: inline-flex; align-items: center; gap: 8px; }
.bih__topic-links a::before { content: "\2192"; font-weight: 400; }
.bih__topic-links a:hover { color: var(--bc); }

/* ---------- 05. Which question are you facing ---------- */
.bih__questions { background: var(--bbg); }
.bih__q-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.bih__q-col { display: flex; flex-direction: column; gap: 12px; }
.bih__q-heading { font-size: 16px; font-weight: 600; color: var(--bh); margin: 0 0 8px; }
.bih__q-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--bb);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--bh);
  transition: transform .3s ease, border-color .3s ease;
}
.bih__q-item i { color: var(--bc2); flex: none; transition: transform .3s ease; }
.bih__q-item:hover { transform: translateX(4px); border-color: var(--bc2); }
.bih__q-item:hover i { transform: translateX(4px); }

/* ---------- 06. Editorial journey ---------- */
.bih__journey { background: #fff; }
.bih__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bih__rail-stage {
  position: relative;
  padding: 26px 20px;
  border-radius: 16px;
  background: var(--bbg);
  border: 1px solid var(--bb);
}
.bih__rail-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--bc3) 0 6px, transparent 6px 10px);
}
.bih__rail-stage--last::after { display: none; }
.bih__rail-num { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--bc2); }
.bih__rail-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(0, 95, 204, .1);
  color: var(--bc);
  font-size: 17px;
  margin: 10px 0 14px;
}
.bih__rail-stage h3 { font-size: 15.5px; font-weight: 600; color: var(--bh); margin: 0 0 10px; }
.bih__rail-stage p { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--bt); margin: 0 0 14px; }
.bih__rail-stage ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--bb); display: flex; flex-direction: column; gap: 8px; }
.bih__rail-stage ul a { font-size: 11.5px; font-weight: 600; color: var(--bc2); }
.bih__rail-stage ul a:hover { color: var(--bc); }

/* ---------- 07. Full library: grouped grid ---------- */
.bih__library { background: var(--bbg); }
.bih__group { margin-bottom: 56px; }
.bih__group:last-child { margin-bottom: 0; }
.bih__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--bh);
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bb);
}
.bih__group-title i { color: var(--bc2); font-size: 17px; }
.bih__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bih__grid--single { grid-template-columns: minmax(0, 620px); }
.bih__card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bb);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bih__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.bih__card-media { overflow: hidden; background: var(--bbg); }
.bih__card-media img { width: 100%; height: 168px; object-fit: cover; display: block; transition: transform .5s ease; }
.bih__card:hover .bih__card-media img { transform: scale(1.06); }
.bih__card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.bih__card-body h4 { font-size: 16.5px; font-weight: 500; color: var(--bt); margin: 0 0 10px; line-height: 1.35; }
.bih__card-body p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--bt); margin: 0 0 14px; }
.bih__card-next { font-size: 11.5px; font-weight: 500; color: var(--bc2); background: rgba(202, 138, 4, .07); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

/* ---------- 08. Related insight navigation ---------- */
.bih__subnav { background: #fff; padding: 0 0 60px; }
.bih__subnav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px;
  border-radius: 16px;
  background: var(--bbg);
  border: 1px solid var(--bb);
}
.bih__subnav-back,
.bih__subnav-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bc2);
  transition: gap .3s ease, color .3s ease;
}
.bih__subnav-back:hover,
.bih__subnav-next:hover { gap: 15px; color: var(--bc); }

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.bih__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bih__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--bc2);
  background: transparent;
  border: 2px solid var(--bb);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.bih__page .final-cta-btn-outline:hover { background: var(--bc2); border-color: var(--bc2); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bih__page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media only screen and (max-width: 1299px) {
  .bih__rail { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .bih__rail-stage:nth-child(3)::after { display: none; }
}
@media only screen and (max-width: 1199px) {
  .bih__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .bih__hero-figure { max-width: 560px; margin: 0 auto; }
  .bih__topics-grid { grid-template-columns: repeat(2, 1fr); }
  .bih__spotlight { grid-template-columns: 1fr; }
  .bih__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .bih__page section { padding: 90px 0; }
  .bih__page .bih__hero { padding: 190px 0 90px; }
  .bih__hero-title { font-size: 40px; }
  .bih__topics-grid { grid-template-columns: 1fr; }
  .bih__q-grid { grid-template-columns: 1fr; }
  .bih__rail { grid-template-columns: repeat(2, 1fr); }
  .bih__rail-stage::after { display: none; }
  .bih__subnav-inner { flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 767px) {
  .bih__hero-title { font-size: 32px; }
  .bih__grid { grid-template-columns: 1fr; }
  .bih__grid--single { grid-template-columns: 1fr; }
  .bih__rail { grid-template-columns: 1fr; }
  .bih__spotlight-copy { padding: 30px 24px; }
}


/* ============================================================
   MAIN INSIGHTS HUB (insights.html): ish__*
   The parent landing page for all five Insight category hubs
   (.cdh__page cyan, .sdh__page teal/copper, .ait__page violet,
   .dth__page green, .bih__page gold). Scoped to .ish__page.
   Uses the site's neutral core blue/navy as its own identity
   (this is the umbrella page, not a sub-topic), while reusing
   each category's own established accent color as a per-card/
   per-node identifier in the category grid and the "Technology
   Doesn't Exist in Isolation" network diagram, so color carries
   over when a visitor clicks through to a category hub. The
   diagram (.ish__row) is a horizontal row of HTML node chips
   under a "Business Impact" lead-in label, rather than a radial
   hub-and-spoke layout. The shared global .final-cta component is
   reused as-is for the closing CTA.
   ============================================================ */
.ish__page {
  --ic: #005fcc;
  --ic2: #4da3ff;
  --ic3: #8079f8;
  --ih: #1c1e2b;
  --it: #6b7089;
  --ib: #e9eaf5;
  --ibg: #f6f7fc;
  --idark: #07152F;
  --imuted: #9fb3cd;
  --cat-ai: #8079f8;
  --cat-sd: #E0993D;
  --cat-cd: #38bdf8;
  --cat-dt: #4ade80;
  --cat-bi: #eab308;
  font-family: "Kanit", sans-serif;
}
.ish__page section { padding: 130px 0; }
.ish__page .ish__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ic);
  margin-bottom: 18px;
}
.ish__page .ish__eyebrow--light { color: var(--ic2); }
.ish__page .ish__title { font-size: 38px; line-height: 1.22; font-weight: 600; color: var(--ih); margin: 0 0 20px; }
.ish__page .ish__title--light { color: #fff; }
.ish__page .ish__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ih); margin: 0 0 16px; }
.ish__page .ish__text { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--it); margin: 0 0 16px; }
.ish__page .ish__text:last-child { margin-bottom: 0; }
.ish__page .ish__text--light { color: var(--imuted); }
.ish__page .ish__head { max-width: 760px; }
.ish__page .ish__head--center { margin: 0 auto 56px; text-align: center; }

.ish__page .ish__btn,
.ish__page .ish__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.ish__page .ish__btn { color: #fff; background: var(--ic); border: 2px solid var(--ic); }
.ish__page .ish__btn:hover { background: var(--ic3); border-color: var(--ic3); color: #fff; }
.ish__page .ish__btn-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .38); background: transparent; }
.ish__page .ish__btn-outline:hover { background: #fff; border-color: #fff; color: var(--idark); }

/* ---------- 01. Hero ---------- */
.ish__page .ish__hero {
  position: relative;
  overflow: hidden;
  background: var(--idark);
  padding: 200px 0 120px;
}
.ish__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% -12%, rgba(0, 95, 204, .40), transparent 62%),
              radial-gradient(780px 460px at 4% 108%, rgba(128, 121, 248, .26), transparent 64%);
}
.ish__hero::after {
  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: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 78%);
}
.ish__hero > .container { position: relative; z-index: 2; }
.ish__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ish__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1px solid rgba(77, 163, 255, .35);
  background: rgba(77, 163, 255, .1);
  color: var(--ic2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.ish__hero-title { font-size: 52px; line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 24px; }
.ish__hero-accent { background: linear-gradient(90deg, var(--ic2), var(--ic3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ish__hero-lead { font-size: 19px; font-weight: 400; line-height: 1.7; color: #dbe6f4; margin: 0 0 34px; max-width: 560px; }
.ish__hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.ish__hero-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 34px; }
.ish__hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.ish__hero-stats strong { font-size: 30px; font-weight: 600; color: #fff; line-height: 1; }
.ish__hero-stats span { font-size: 12.5px; font-weight: 300; letter-spacing: .5px; color: var(--imuted); text-transform: uppercase; }

.ish__hero-figure { position: relative; }
.ish__flow { position: relative; display: flex; flex-direction: column; gap: 0; padding: 8px 0; }
.ish__flow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.ish__flow-node::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(77, 163, 255, .5), transparent);
}
.ish__flow-node--last::after { display: none; }
.ish__flow-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(77, 163, 255, .14);
  color: var(--ic2);
  font-size: 18px;
}
.ish__flow-node div { display: flex; flex-direction: column; gap: 2px; }
.ish__flow-node strong { font-size: 15.5px; font-weight: 600; color: #fff; }
.ish__flow-node span { font-size: 12.5px; font-weight: 300; color: var(--imuted); }
.ish__flow-node:hover { border-color: rgba(77, 163, 255, .4); background: rgba(77, 163, 255, .08); }

/* ---------- 02. Introduction ---------- */
.ish__intro { background: #fff; }
.ish__intro-inner { max-width: 780px; margin: 0 auto; text-align: center; }

/* ---------- 03. Explore our insights (category grid) ---------- */
.ish__categories { background: var(--ibg); }
.ish__cat-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.ish__cat-card {
  flex: 1 1 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  --cc: var(--ic);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 28px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ib);
  border-top: 3px solid var(--cc);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ish__cat-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(28, 30, 43, .1); }
.ish__cat-card--ai { --cc: var(--cat-ai); }
.ish__cat-card--sd { --cc: var(--cat-sd); }
.ish__cat-card--cd { --cc: var(--cat-cd); }
.ish__cat-card--dt { --cc: var(--cat-dt); }
.ish__cat-card--bi { --cc: var(--cat-bi); }
.ish__cat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--cc) 14%, transparent);
  color: var(--cc);
  font-size: 21px;
  margin-bottom: 20px;
}
.ish__cat-card h3 { font-size: 19px; font-weight: 600; color: var(--ih); margin: 0 0 12px; }
.ish__cat-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--it); margin: 0 0 20px; }
.ish__cat-link { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--cc); margin-top: auto; transition: gap .3s ease; }
.ish__cat-card:hover .ish__cat-link { gap: 15px; }

/* ---------- 04. Technology doesn't exist in isolation (network diagram) ---------- */
.ish__web-section { background: var(--idark); position: relative; overflow: hidden; }
.ish__web-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 460px at 50% 8%, rgba(0, 95, 204, .28), transparent 65%);
}
.ish__web-section > .container { position: relative; z-index: 2; }
.ish__row { position: relative; }
.ish__row-lead { display: block; text-align: center; color: #fff; font-size: 15px; font-weight: 300; margin-bottom: 36px; }
.ish__row-lead strong { font-weight: 600; color: var(--ic2); }
.ish__row-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ish__row-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 150px;
  padding: 22px 14px;
  border-radius: 14px;
  background: rgba(7, 21, 47, .82);
  border: 1px solid color-mix(in srgb, var(--nc) 45%, transparent);
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ish__row-node:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0, 0, 0, .35); }
.ish__row-node i { color: var(--nc); font-size: 20px; }
.ish__row-node span { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.ish__row-node--ai { --nc: var(--cat-ai); }
.ish__row-node--sd { --nc: var(--cat-sd); }
.ish__row-node--cd { --nc: var(--cat-cd); }
.ish__row-node--dt { --nc: var(--cat-dt); }
.ish__row-node--bi { --nc: var(--cat-bi); }

/* ---------- 05. Featured insights ---------- */
.ish__featured { background: #fff; }
.ish__feat-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: stretch; }
.ish__feat-lead {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--idark);
  border: 1px solid var(--ib);
}
.ish__feat-media { overflow: hidden; flex: 1 1 auto; min-height: 260px; }
.ish__feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ish__feat-lead:hover .ish__feat-media img { transform: scale(1.05); }
.ish__feat-copy { padding: 32px 30px; display: flex; flex-direction: column; flex: none; }
.ish__feat-copy h3 { font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 14px; line-height: 1.3; }
.ish__feat-copy p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--imuted); margin: 0 0 18px; }
.ish__feat-sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ish__feat-sub {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ibg);
  border: 1px solid var(--ib);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ish__feat-sub:hover { transform: translateY(-4px); border-color: var(--ic); box-shadow: 0 20px 40px rgba(28, 30, 43, .1); }
.ish__feat-sub-media { overflow: hidden; }
.ish__feat-sub-media img { width: 100%; height: 130px; object-fit: cover; display: block; transition: transform .5s ease; }
.ish__feat-sub:hover .ish__feat-sub-media img { transform: scale(1.08); }
.ish__feat-sub-copy { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.ish__feat-sub h4 { font-size: 14.5px; font-weight: 600; color: var(--ih); margin: 10px 0 8px; line-height: 1.35; }
.ish__feat-sub p { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--it); margin: 0 0 12px; }
.ish__feat-cat { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.ish__feat-cat--ai { color: var(--cat-ai); }
.ish__feat-cat--sd { color: var(--cat-sd); }
.ish__feat-cat--cd { color: #0891b2; }
.ish__feat-cat--dt { color: #16a34a; }
.ish__feat-cat--bi { color: #ca8a04; }
.ish__feat-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ic); margin-top: auto; }
.ish__feat-lead .ish__feat-link { color: var(--ic2); }

/* ---------- 06. What you'll find here ---------- */
.ish__explore { background: var(--ibg); }
.ish__explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ish__explore-item { text-align: center; padding: 30px 20px; }
.ish__explore-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(0, 95, 204, .1);
  color: var(--ic);
  font-size: 22px;
  margin-bottom: 18px;
}
.ish__explore-item h3 { font-size: 17px; font-weight: 600; color: var(--ih); margin: 0 0 10px; }
.ish__explore-item p { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--it); }

/* ---------- 07. Why 3Shadz Insights ---------- */
.ish__why { background: #fff; }
.ish__why-inner { max-width: 760px; margin: 0 auto; text-align: center; }

/* ---------- 08. Explore by interest ---------- */
.ish__interest { background: var(--ibg); }
.ish__chip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ish__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--ib);
  color: var(--ih);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s ease;
}
.ish__chip i { color: var(--ic); }
.ish__chip:hover { background: var(--ic); border-color: var(--ic); color: #fff; }
.ish__chip:hover i { color: #fff; }

/* ---------- Final CTA (extends the shared .final-cta with a second button) ---------- */
.ish__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ish__page .final-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  color: var(--ic);
  background: transparent;
  border: 2px solid var(--ib);
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  transition: all .3s ease;
}
.ish__page .final-cta-btn-outline:hover { background: var(--ic); border-color: var(--ic); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ish__page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media only screen and (max-width: 1199px) {
  .ish__hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .ish__hero-figure { max-width: 560px; margin: 0 auto; }
  .ish__cat-card { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
  .ish__feat-grid { grid-template-columns: 1fr; }
  .ish__explore-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .ish__page section { padding: 90px 0; }
  .ish__page .ish__hero { padding: 190px 0 90px; }
  .ish__hero-title { font-size: 38px; }
  .ish__cat-card { flex-basis: 100%; max-width: 100%; }
  .ish__row-node { width: 108px; padding: 16px 10px; }
  .ish__row-node span { font-size: 10.5px; }
}
@media only screen and (max-width: 767px) {
  .ish__hero-title { font-size: 30px; }
  .ish__explore-grid { grid-template-columns: 1fr; }
  .ish__row-track { gap: 14px; }
  .ish__row-node { width: 92px; padding: 14px 8px; }
  .ish__row-node i { font-size: 16px; }
  .ish__row-node span { font-size: 9.5px; }
  .ish__feat-sub-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT PAGE (abt__*)
   Scoped entirely to .abt__page (added on <main> of about.html).
   Follows the shared page-module pattern used by .svc__page /
   .ai__page / .soln__page: local custom properties for color,
   a common eyebrow/title/lead/text/button/link vocabulary, then
   section-specific blocks. This is a brand-story page rather than
   a services catalogue, so it deliberately carries no photography
   -- storytelling is built from typography, whitespace and small
   inline SVG/CSS motifs (an abstract node graph in the hero, a
   soft orb + pin for the Hyderabad section) instead of stock
   images. Keyframes are prefixed abtKf* so nothing collides with
   other pages. Nothing in this block leaks outside .abt__page.
   ============================================================ */
.abt__page {
  --ac: #005fcc;
  --ac2: #8079f8;
  --ac3: #4da3ff;
  --ah: #1c1e2b;
  --at: #6b7089;
  --ab: #e9eaf5;
  --abg: #f6f7fc;
  --adark: #07152F;
  --amuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.abt__page .abt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 18px;
}
.abt__page .abt__title { font-size: 40px; line-height: 1.22; font-weight: 600; color: var(--ah); margin: 0 0 20px; }
.abt__page .abt__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--at); margin: 0 0 18px; }
.abt__page .abt__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--at); margin: 0 0 16px; }
.abt__page .abt__text:last-child { margin-bottom: 0; }
.abt__page .abt__text strong { color: var(--ah); font-weight: 600; }
.abt__page .abt__head { max-width: 760px; }
.abt__page .abt__head--center { margin: 0 auto 56px; text-align: center; }

.abt__page .abt__btn,
.abt__page .abt__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.abt__page .abt__btn { color: #fff; background: var(--ac); border: 2px solid var(--ac); }
.abt__page .abt__btn:hover { background: var(--ac2); border-color: var(--ac2); color: #fff; }
.abt__page .abt__btn-outline { color: var(--ac); border: 2px solid var(--ac); background: transparent; }
.abt__page .abt__btn-outline:hover { background: var(--ac); color: #fff; }

.abt__page .abt__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ac);
  transition: gap .3s ease, color .3s ease;
}
.abt__page .abt__link:hover { gap: 15px; color: var(--ac2); }

.abt__page .abt__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--ac);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

/* ---------- 01. Hero ---------- */
.abt__hero { position: relative; overflow: hidden; background: var(--adark); padding: 190px 0 120px; }
.abt__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.abt__hero > .container { position: relative; z-index: 2; }
.abt__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.abt__hero-figure { position: relative; margin-top: 108px; }
.abt__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.abt__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.abt__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abt__hero-title { font-size: 56px; line-height: 1.15; font-weight: 600; color: #fff; margin: 0 0 26px; }
.abt__hero-title .abt__mark { color: var(--ac3); }
.abt__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 740px; }
.abt__hero-text { font-size: 16px; line-height: 1.85; color: var(--amuted); font-weight: 300; margin: 0 0 16px; max-width: 740px; }
.abt__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 740px; }
.abt__hero-emphasis p { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.abt__hero-emphasis p:last-child { color: var(--ac3); margin-bottom: 0; }
.abt__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 54px; }
.abt__hero-cta .abt__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.abt__hero-cta .abt__btn-outline:hover { background: #fff; color: var(--adark); }
.abt__hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 26px;
}
.abt__hero-strip .abt__dot { color: var(--ac3); margin: 0 10px; }

/* ---------- 02. Our Story ---------- */
.abt__story { padding: 130px 0; background: #fff; }
.abt__story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: stretch; margin-bottom: 90px; }
.abt__story-copy { max-width: none; margin: 0; text-align: left; }
.abt__story-copy .abt__text strong { color: inherit; font-weight: 600; }
@media (min-width: 700px) {
  .abt__story-more .abt__nowrap { white-space: nowrap; }
}
.abt__story-head { text-align: left; margin-bottom: 36px; }
.abt__story-more { max-width: 860px; margin: 0 auto 90px; text-align: center; }
.abt__story-more .abt__text strong { color: inherit; font-weight: 600; }
.abt__story-pivot {
  font-size: 20px; font-weight: 600; color: var(--ac); text-align: center;
  margin: 0 0 36px; padding: 22px 0;
  border-top: 1px solid rgba(7, 21, 47, .08); border-bottom: 1px solid rgba(7, 21, 47, .08);
}
.abt__story-figure { position: relative; height: 100%; }
.abt__story-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 110%; height: 85%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .22), transparent 72%);
  filter: blur(50px);
  z-index: 0;
}
.abt__story-frame { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; transform: translateX(-11%); }
.abt__story-frame img { width: auto; height: 100%; max-width: 78%; max-height: 100%; object-fit: contain; display: block; }

/* ---------- Colourful sparks thrown out of the frame edge in the about-us.png
   artwork. Each scatters off in its own straight-ish direction like flung
   confetti, staggered so it reads as a steady little fountain rather than
   one single burst. ---------- */
.abt__story-spark { position: absolute; left: 40%; border-radius: 50%; pointer-events: none; z-index: 3; opacity: 0; }
.abt__story-spark--d { top: 46%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: radial-gradient(circle at 30% 26%, #f6ecff, #b06bff 40%, #7a1fd6 75%, #3d0e6e 100%); animation: sparkFlyD 2.1s linear infinite; animation-delay: .3s; }
.abt__story-spark--e { top: 52%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: radial-gradient(circle at 30% 26%, #eaf5ff, #4fa8ff 40%, #0d6dfd 74%, #023a99 100%); animation: sparkFlyE 2.4s linear infinite; animation-delay: .9s; }
.abt__story-spark--f { top: 44%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: radial-gradient(circle at 30% 26%, #f4ffe8, #9be23d 40%, #5f9e12 75%, #2e4d08 100%); animation: sparkFlyF 1.9s linear infinite; animation-delay: 1.4s; }
.abt__story-spark--g { top: 55%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: radial-gradient(circle at 30% 26%, #ffeef8, #ff5ec4 40%, #d6117e 75%, #6e0940 100%); animation: sparkFlyG 2.2s linear infinite; animation-delay: 1.7s; }
.abt__story-spark--h { top: 38%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: radial-gradient(circle at 30% 26%, #fff3e6, #ffa53d 40%, #e67300 75%, #7a3a00 100%); animation: sparkFlyH 2.5s linear infinite; animation-delay: .1s; }
.abt__story-spark--i { top: 48%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: radial-gradient(circle at 30% 26%, #e6fffb, #2fe8d6 40%, #06a692 75%, #034f45 100%); animation: sparkFlyI 2.7s linear infinite; animation-delay: 1.2s; }
.abt__story-spark--j { top: 60%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: radial-gradient(circle at 30% 26%, #fffbe6, #ffd23d 40%, #d69b00 75%, #6e4f00 100%); animation: sparkFlyJ 2s linear infinite; animation-delay: 2s; }
.abt__story-spark--k { top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: radial-gradient(circle at 30% 26%, #fff0ec, #ff6f61 40%, #e6301f 75%, #7a1409 100%); animation: sparkFlyK 2.3s linear infinite; animation-delay: .6s; }

/* Each spark now animates translate/rotate/scale/opacity as independent CSS
   properties instead of one combined transform. translate and rotate only
   have a start and end point, so they move and spin at a perfectly constant
   rate with linear timing -- no mid-flight breakpoint to speed up or stall
   at. Scale and opacity keep their own separate pulse/fade curve without
   affecting the flight path at all. */
@keyframes sparkFlyD {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 340px -215px; rotate: 260deg; scale: .4; opacity: 0; }
}
@keyframes sparkFlyE {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 390px 32px; rotate: -220deg; scale: .4; opacity: 0; }
}
@keyframes sparkFlyF {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 260px 240px; rotate: 230deg; scale: .4; opacity: 0; }
}
@keyframes sparkFlyG {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 305px -30px; rotate: -250deg; scale: .4; opacity: 0; }
}
@keyframes sparkFlyH {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 135px -290px; rotate: 280deg; scale: .4; opacity: 0; }
}
@keyframes sparkFlyI {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 440px -55px; rotate: -190deg; scale: .4; opacity: 0; }
}
@keyframes sparkFlyJ {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 115px 300px; rotate: 240deg; scale: .4; opacity: 0; }
}
@keyframes sparkFlyK {
  0%   { translate: 0 0; rotate: 0deg; scale: .3; opacity: 0; }
  6%   { scale: .6; opacity: 1; }
  45%  { scale: 1; }
  100% { translate: 355px 150px; rotate: -240deg; scale: .4; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .abt__story-spark { animation: none !important; display: none; }
}

.abt__story-orb {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  left: 50%; top: 100%;
  margin-left: -8px; margin-top: -8px;
  background: radial-gradient(circle at 30% 26%, #fff8ec, #ffc24b 38%, #f6941e 70%, #b85c00 100%);
  pointer-events: none;
  opacity: 0;
  animation: storyOrbSpiral 16s linear infinite;
}
.abt__story-bounce {
  position: absolute;
  bottom: 0; left: 12%;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, #eaf5ff, #4fa8ff 40%, #0d6dfd 74%, #023a99 100%);
  pointer-events: none;
  transform-origin: bottom center;
  animation: storyBounceBall 9s infinite;
}
@keyframes storyBounceBall {
  /* Six hops dribbling across the bottom of the image and back -- same bounce
     height every time, so it keeps traveling and bouncing without ever settling. */
  0%      { left: 12%;   transform: translateY(0) scaleY(.7); animation-timing-function: cubic-bezier(.17, .89, .32, 1.05); }
  8.333%  { left: 24.5%; transform: translateY(-70px) scaleY(1.05); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  16.667% { left: 37%;   transform: translateY(0) scaleY(.7); animation-timing-function: cubic-bezier(.17, .89, .32, 1.05); }
  25%     { left: 49.5%; transform: translateY(-70px) scaleY(1.05); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  33.333% { left: 62%;   transform: translateY(0) scaleY(.7); animation-timing-function: cubic-bezier(.17, .89, .32, 1.05); }
  41.667% { left: 75%;   transform: translateY(-70px) scaleY(1.05); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  50%     { left: 88%;   transform: translateY(0) scaleY(.7); animation-timing-function: cubic-bezier(.17, .89, .32, 1.05); }
  58.333% { left: 75%;   transform: translateY(-70px) scaleY(1.05); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  66.667% { left: 62%;   transform: translateY(0) scaleY(.7); animation-timing-function: cubic-bezier(.17, .89, .32, 1.05); }
  75%     { left: 49.5%; transform: translateY(-70px) scaleY(1.05); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  83.333% { left: 37%;   transform: translateY(0) scaleY(.7); animation-timing-function: cubic-bezier(.17, .89, .32, 1.05); }
  91.667% { left: 24.5%; transform: translateY(-70px) scaleY(1.05); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  100%    { left: 12%;   transform: translateY(0) scaleY(.7); }
}
@keyframes storyOrbSpiral {
  /* Five turns sampled every 10 degrees (180 points). Radius, scale and vertical
     position are all plain linear/trig functions of overall progress -- nothing is
     stepped per revolution -- so there is no seam where the orbit radius or size
     jumps between turns. Linear timing keeps speed constant throughout, and
     z-index alone carries the front/back depth cue as the ball swings around.
     The orbit hugs the image near the bottom and widens smoothly on the way up. */
  0% { opacity: 0; top: 100%; left: 64%; transform: scale(0.8); z-index: 2; }
  0.556% { top: 99.444%; left: 63.92%; transform: scale(0.803); z-index: 2; }
  1.111% { top: 98.889%; left: 63.41%; transform: scale(0.806); z-index: 2; }
  1.667% { opacity: 1; top: 98.333%; left: 62.47%; transform: scale(0.809); z-index: 2; }
  2.222% { top: 97.778%; left: 61.14%; transform: scale(0.812); z-index: 2; }
  2.778% { top: 97.222%; left: 59.43%; transform: scale(0.815); z-index: 2; }
  3.333% { top: 96.667%; left: 57.4%; transform: scale(0.818); z-index: 2; }
  3.889% { top: 96.111%; left: 55.11%; transform: scale(0.822); z-index: 2; }
  4.444% { top: 95.556%; left: 52.62%; transform: scale(0.825); z-index: 2; }
  5% { top: 95%; left: 50%; transform: scale(0.828); z-index: 2; }
  5.556% { top: 94.444%; left: 47.34%; transform: scale(0.831); z-index: 2; }
  6.111% { top: 93.889%; left: 44.71%; transform: scale(0.834); z-index: 2; }
  6.667% { top: 93.333%; left: 42.2%; transform: scale(0.837); z-index: 2; }
  7.222% { top: 92.778%; left: 39.88%; transform: scale(0.84); z-index: 2; }
  7.778% { top: 92.222%; left: 37.84%; transform: scale(0.843); z-index: 2; }
  8.333% { top: 91.667%; left: 36.13%; transform: scale(0.846); z-index: 2; }
  8.889% { top: 91.111%; left: 34.83%; transform: scale(0.849); z-index: 2; }
  9.444% { top: 90.556%; left: 33.97%; transform: scale(0.852); z-index: 2; }
  10% { top: 90%; left: 33.59%; transform: scale(0.855); z-index: 2; }
  10.556% { top: 89.444%; left: 33.7%; transform: scale(0.858); z-index: 0; }
  11.111% { top: 88.889%; left: 34.32%; transform: scale(0.861); z-index: 0; }
  11.667% { top: 88.333%; left: 35.44%; transform: scale(0.865); z-index: 0; }
  12.222% { top: 87.778%; left: 37.02%; transform: scale(0.868); z-index: 0; }
  12.778% { top: 87.222%; left: 39.02%; transform: scale(0.871); z-index: 0; }
  13.333% { top: 86.667%; left: 41.39%; transform: scale(0.874); z-index: 0; }
  13.889% { top: 86.111%; left: 44.07%; transform: scale(0.877); z-index: 0; }
  14.444% { top: 85.556%; left: 46.96%; transform: scale(0.88); z-index: 0; }
  15% { top: 85%; left: 50%; transform: scale(0.883); z-index: 0; }
  15.556% { top: 84.444%; left: 53.08%; transform: scale(0.886); z-index: 0; }
  16.111% { top: 83.889%; left: 56.12%; transform: scale(0.889); z-index: 0; }
  16.667% { top: 83.333%; left: 59.01%; transform: scale(0.892); z-index: 0; }
  17.222% { top: 82.778%; left: 61.67%; transform: scale(0.895); z-index: 0; }
  17.778% { top: 82.222%; left: 64.01%; transform: scale(0.898); z-index: 0; }
  18.333% { top: 81.667%; left: 65.96%; transform: scale(0.901); z-index: 0; }
  18.889% { top: 81.111%; left: 67.44%; transform: scale(0.904); z-index: 0; }
  19.444% { top: 80.556%; left: 68.41%; transform: scale(0.908); z-index: 0; }
  20% { top: 80%; left: 68.83%; transform: scale(0.911); z-index: 2; }
  20.556% { top: 79.444%; left: 68.67%; transform: scale(0.914); z-index: 2; }
  21.111% { top: 78.889%; left: 67.94%; transform: scale(0.917); z-index: 2; }
  21.667% { top: 78.333%; left: 66.65%; transform: scale(0.92); z-index: 2; }
  22.222% { top: 77.778%; left: 64.83%; transform: scale(0.923); z-index: 2; }
  22.778% { top: 77.222%; left: 62.53%; transform: scale(0.926); z-index: 2; }
  23.333% { top: 76.667%; left: 59.82%; transform: scale(0.929); z-index: 2; }
  23.889% { top: 76.111%; left: 56.76%; transform: scale(0.932); z-index: 2; }
  24.444% { top: 75.556%; left: 53.46%; transform: scale(0.935); z-index: 2; }
  25% { top: 75%; left: 50%; transform: scale(0.938); z-index: 2; }
  25.556% { top: 74.444%; left: 46.5%; transform: scale(0.941); z-index: 2; }
  26.111% { top: 73.889%; left: 43.06%; transform: scale(0.944); z-index: 2; }
  26.667% { top: 73.333%; left: 39.78%; transform: scale(0.947); z-index: 2; }
  27.222% { top: 72.778%; left: 36.78%; transform: scale(0.951); z-index: 2; }
  27.778% { top: 72.222%; left: 34.14%; transform: scale(0.954); z-index: 2; }
  28.333% { top: 71.667%; left: 31.95%; transform: scale(0.957); z-index: 2; }
  28.889% { top: 71.111%; left: 30.29%; transform: scale(0.96); z-index: 2; }
  29.444% { top: 70.556%; left: 29.21%; transform: scale(0.963); z-index: 2; }
  30% { top: 70%; left: 28.76%; transform: scale(0.966); z-index: 2; }
  30.556% { top: 69.444%; left: 28.95%; transform: scale(0.969); z-index: 0; }
  31.111% { top: 68.889%; left: 29.79%; transform: scale(0.972); z-index: 0; }
  31.667% { top: 68.333%; left: 31.26%; transform: scale(0.975); z-index: 0; }
  32.222% { top: 67.778%; left: 33.32%; transform: scale(0.978); z-index: 0; }
  32.778% { top: 67.222%; left: 35.92%; transform: scale(0.981); z-index: 0; }
  33.333% { top: 66.667%; left: 38.98%; transform: scale(0.984); z-index: 0; }
  33.889% { top: 66.111%; left: 42.41%; transform: scale(0.987); z-index: 0; }
  34.444% { top: 65.556%; left: 46.13%; transform: scale(0.991); z-index: 0; }
  35% { top: 65%; left: 50%; transform: scale(0.994); z-index: 0; }
  35.556% { top: 64.444%; left: 53.92%; transform: scale(0.997); z-index: 0; }
  36.111% { top: 63.889%; left: 57.77%; transform: scale(1); z-index: 0; }
  36.667% { top: 63.333%; left: 61.42%; transform: scale(1.003); z-index: 0; }
  37.222% { top: 62.778%; left: 64.77%; transform: scale(1.006); z-index: 0; }
  37.778% { top: 62.222%; left: 67.71%; transform: scale(1.009); z-index: 0; }
  38.333% { top: 61.667%; left: 70.14%; transform: scale(1.012); z-index: 0; }
  38.889% { top: 61.111%; left: 71.98%; transform: scale(1.015); z-index: 0; }
  39.444% { top: 60.556%; left: 73.16%; transform: scale(1.018); z-index: 0; }
  40% { top: 60%; left: 73.65%; transform: scale(1.021); z-index: 2; }
  40.556% { top: 59.444%; left: 73.43%; transform: scale(1.024); z-index: 2; }
  41.111% { top: 58.889%; left: 72.48%; transform: scale(1.027); z-index: 2; }
  41.667% { top: 58.333%; left: 70.83%; transform: scale(1.03); z-index: 2; }
  42.222% { top: 57.778%; left: 68.53%; transform: scale(1.034); z-index: 2; }
  42.778% { top: 57.222%; left: 65.64%; transform: scale(1.037); z-index: 2; }
  43.333% { top: 56.667%; left: 62.23%; transform: scale(1.04); z-index: 2; }
  43.889% { top: 56.111%; left: 58.41%; transform: scale(1.043); z-index: 2; }
  44.444% { top: 55.556%; left: 54.29%; transform: scale(1.046); z-index: 2; }
  45% { top: 55%; left: 50%; transform: scale(1.049); z-index: 2; }
  45.556% { top: 54.444%; left: 45.66%; transform: scale(1.052); z-index: 2; }
  46.111% { top: 53.889%; left: 41.41%; transform: scale(1.055); z-index: 2; }
  46.667% { top: 53.333%; left: 37.37%; transform: scale(1.058); z-index: 2; }
  47.222% { top: 52.778%; left: 33.68%; transform: scale(1.061); z-index: 2; }
  47.778% { top: 52.222%; left: 30.44%; transform: scale(1.064); z-index: 2; }
  48.333% { top: 51.667%; left: 27.77%; transform: scale(1.067); z-index: 2; }
  48.889% { top: 51.111%; left: 25.76%; transform: scale(1.07); z-index: 2; }
  49.444% { top: 50.556%; left: 24.46%; transform: scale(1.073); z-index: 2; }
  50% { top: 50%; left: 23.93%; transform: scale(1.077); z-index: 2; }
  50.556% { top: 49.444%; left: 24.2%; transform: scale(1.08); z-index: 0; }
  51.111% { top: 48.889%; left: 25.25%; transform: scale(1.083); z-index: 0; }
  51.667% { top: 48.333%; left: 27.08%; transform: scale(1.086); z-index: 0; }
  52.222% { top: 47.778%; left: 29.62%; transform: scale(1.089); z-index: 0; }
  52.778% { top: 47.222%; left: 32.81%; transform: scale(1.092); z-index: 0; }
  53.333% { top: 46.667%; left: 36.56%; transform: scale(1.095); z-index: 0; }
  53.889% { top: 46.111%; left: 40.76%; transform: scale(1.098); z-index: 0; }
  54.444% { top: 45.556%; left: 45.29%; transform: scale(1.101); z-index: 0; }
  55% { top: 45%; left: 50%; transform: scale(1.104); z-index: 0; }
  55.556% { top: 44.444%; left: 54.76%; transform: scale(1.107); z-index: 0; }
  56.111% { top: 43.889%; left: 59.42%; transform: scale(1.11); z-index: 0; }
  56.667% { top: 43.333%; left: 63.84%; transform: scale(1.113); z-index: 0; }
  57.222% { top: 42.778%; left: 67.88%; transform: scale(1.116); z-index: 0; }
  57.778% { top: 42.222%; left: 71.41%; transform: scale(1.12); z-index: 0; }
  58.333% { top: 41.667%; left: 74.32%; transform: scale(1.123); z-index: 0; }
  58.889% { top: 41.111%; left: 76.51%; transform: scale(1.126); z-index: 0; }
  59.444% { top: 40.556%; left: 77.92%; transform: scale(1.129); z-index: 0; }
  60% { top: 40%; left: 78.48%; transform: scale(1.132); z-index: 2; }
  60.556% { top: 39.444%; left: 78.18%; transform: scale(1.135); z-index: 2; }
  61.111% { top: 38.889%; left: 77.01%; transform: scale(1.138); z-index: 2; }
  61.667% { top: 38.333%; left: 75.01%; transform: scale(1.141); z-index: 2; }
  62.222% { top: 37.778%; left: 72.23%; transform: scale(1.144); z-index: 2; }
  62.778% { top: 37.222%; left: 68.74%; transform: scale(1.147); z-index: 2; }
  63.333% { top: 36.667%; left: 64.64%; transform: scale(1.15); z-index: 2; }
  63.889% { top: 36.111%; left: 60.06%; transform: scale(1.153); z-index: 2; }
  64.444% { top: 35.556%; left: 55.13%; transform: scale(1.156); z-index: 2; }
  65% { top: 35%; left: 50%; transform: scale(1.159); z-index: 2; }
  65.556% { top: 34.444%; left: 44.82%; transform: scale(1.163); z-index: 2; }
  66.111% { top: 33.889%; left: 39.75%; transform: scale(1.166); z-index: 2; }
  66.667% { top: 33.333%; left: 34.96%; transform: scale(1.169); z-index: 2; }
  67.222% { top: 32.778%; left: 30.57%; transform: scale(1.172); z-index: 2; }
  67.778% { top: 32.222%; left: 26.74%; transform: scale(1.175); z-index: 2; }
  68.333% { top: 31.667%; left: 23.59%; transform: scale(1.178); z-index: 2; }
  68.889% { top: 31.111%; left: 21.22%; transform: scale(1.181); z-index: 2; }
  69.444% { top: 30.556%; left: 19.71%; transform: scale(1.184); z-index: 2; }
  70% { top: 30%; left: 19.11%; transform: scale(1.187); z-index: 2; }
  70.556% { top: 29.444%; left: 19.44%; transform: scale(1.19); z-index: 0; }
  71.111% { top: 28.889%; left: 20.72%; transform: scale(1.193); z-index: 0; }
  71.667% { top: 28.333%; left: 22.9%; transform: scale(1.196); z-index: 0; }
  72.222% { top: 27.778%; left: 25.92%; transform: scale(1.199); z-index: 0; }
  72.778% { top: 27.222%; left: 29.71%; transform: scale(1.203); z-index: 0; }
  73.333% { top: 26.667%; left: 34.15%; transform: scale(1.206); z-index: 0; }
  73.889% { top: 26.111%; left: 39.11%; transform: scale(1.209); z-index: 0; }
  74.444% { top: 25.556%; left: 44.45%; transform: scale(1.212); z-index: 0; }
  75% { top: 25%; left: 50%; transform: scale(1.215); z-index: 0; }
  75.556% { top: 24.444%; left: 55.6%; transform: scale(1.218); z-index: 0; }
  76.111% { top: 23.889%; left: 61.07%; transform: scale(1.221); z-index: 0; }
  76.667% { top: 23.333%; left: 66.25%; transform: scale(1.224); z-index: 0; }
  77.222% { top: 22.778%; left: 70.98%; transform: scale(1.227); z-index: 0; }
  77.778% { top: 22.222%; left: 75.1%; transform: scale(1.23); z-index: 0; }
  78.333% { top: 21.667%; left: 78.5%; transform: scale(1.233); z-index: 0; }
  78.889% { top: 21.111%; left: 81.05%; transform: scale(1.236); z-index: 0; }
  79.444% { top: 20.556%; left: 82.67%; transform: scale(1.239); z-index: 0; }
  80% { top: 20%; left: 83.31%; transform: scale(1.242); z-index: 2; }
  80.556% { top: 19.444%; left: 82.93%; transform: scale(1.246); z-index: 2; }
  81.111% { top: 18.889%; left: 81.55%; transform: scale(1.249); z-index: 2; }
  81.667% { top: 18.333%; left: 79.19%; transform: scale(1.252); z-index: 2; }
  82.222% { top: 17.778%; left: 75.93%; transform: scale(1.255); z-index: 2; }
  82.778% { top: 17.222%; left: 71.84%; transform: scale(1.258); z-index: 2; }
  83.333% { top: 16.667%; left: 67.06%; transform: scale(1.261); z-index: 2; }
  83.889% { top: 16.111%; left: 61.71%; transform: scale(1.264); z-index: 2; }
  84.444% { top: 15.556%; left: 55.97%; transform: scale(1.267); z-index: 2; }
  85% { top: 15%; left: 50%; transform: scale(1.27); z-index: 2; }
  85.556% { top: 14.444%; left: 43.98%; transform: scale(1.273); z-index: 2; }
  86.111% { top: 13.889%; left: 38.1%; transform: scale(1.276); z-index: 2; }
  86.667% { top: 13.333%; left: 32.54%; transform: scale(1.279); z-index: 2; }
  87.222% { top: 12.778%; left: 27.47%; transform: scale(1.282); z-index: 2; }
  87.778% { top: 12.222%; left: 23.05%; transform: scale(1.285); z-index: 2; }
  88.333% { top: 11.667%; left: 19.41%; transform: scale(1.289); z-index: 2; }
  88.889% { top: 11.111%; left: 16.69%; transform: scale(1.292); z-index: 2; }
  89.444% { top: 10.556%; left: 14.95%; transform: scale(1.295); z-index: 2; }
  90% { top: 10%; left: 14.28%; transform: scale(1.298); z-index: 2; }
  90.556% { top: 9.444%; left: 14.69%; transform: scale(1.301); z-index: 0; }
  91.111% { top: 8.889%; left: 16.18%; transform: scale(1.304); z-index: 0; }
  91.667% { top: 8.333%; left: 18.72%; transform: scale(1.307); z-index: 0; }
  92.222% { top: 7.778%; left: 22.23%; transform: scale(1.31); z-index: 0; }
  92.778% { top: 7.222%; left: 26.61%; transform: scale(1.313); z-index: 0; }
  93.333% { top: 6.667%; left: 31.74%; transform: scale(1.316); z-index: 0; }
  93.889% { top: 6.111%; left: 37.46%; transform: scale(1.319); z-index: 0; }
  94.444% { top: 5.556%; left: 43.61%; transform: scale(1.322); z-index: 0; }
  95% { top: 5%; left: 50%; transform: scale(1.325); z-index: 0; }
  95.556% { top: 4.444%; left: 56.44%; transform: scale(1.328); z-index: 0; }
  96.111% { top: 3.889%; left: 62.72%; transform: scale(1.332); z-index: 0; }
  96.667% { top: 3.333%; left: 68.66%; transform: scale(1.335); z-index: 0; }
  97.222% { top: 2.778%; left: 74.08%; transform: scale(1.338); z-index: 0; }
  97.778% { top: 2.222%; left: 78.8%; transform: scale(1.341); z-index: 0; }
  98.333% { top: 1.667%; left: 82.68%; transform: scale(1.344); z-index: 0; }
  98.889% { top: 1.111%; left: 85.58%; transform: scale(1.347); z-index: 0; }
  99.444% { opacity: 1; top: 0.556%; left: 87.42%; transform: scale(1.35); z-index: 0; }
  100% { top: 0%; left: 88%; transform: scale(1.1); opacity: 0; z-index: 2; }
}

.abt__evo { text-align: center; }
.abt__evo-eyebrow { justify-content: center; }
.abt__evo-lead { text-align: center; font-size: 26px; font-weight: 700; color: var(--ah); margin: 0 0 56px; }

/* Original dot-and-line zigzag timeline, restored, but with the pastel card
   and icon colours carried over from the staggered-blocks version. */
.abt__evo-track { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; position: relative; padding-top: 10px; }
.abt__evo-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--ac) 0, var(--ac) 10px, var(--ac2) 10px, var(--ac2) 20px);
  background-size: 200% 100%;
  opacity: .3;
  transform: translateY(-50%);
  z-index: 0;
  animation: evoFlow 7s linear infinite;
}
.abt__evo-step { position: relative; z-index: 1; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.abt__evo-step:nth-child(odd) { align-self: flex-start; }
.abt__evo-step:nth-child(even) { align-self: flex-end; flex-direction: column-reverse; }
.abt__evo-node {
  position: relative;
  width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff; font-size: 16px;
  box-shadow: 0 10px 24px rgba(28, 30, 43, .18);
  margin: 0 0 18px;
}
.abt__evo-step:nth-child(1) .abt__evo-node { background: #4f8ef0; }
.abt__evo-step:nth-child(2) .abt__evo-node { background: #9b7bef; }
.abt__evo-step:nth-child(3) .abt__evo-node { background: #5b7091; }
.abt__evo-step:nth-child(4) .abt__evo-node { background: #37b39e; }
.abt__evo-node::before {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .5;
  animation: evoPulse 2.6s ease-out infinite;
}
.abt__evo-step:nth-child(even) .abt__evo-node { margin: 18px 0 0; }
.abt__evo-step:nth-child(2) .abt__evo-node::before { animation-delay: .3s; }
.abt__evo-step:nth-child(3) .abt__evo-node::before { animation-delay: .6s; }
.abt__evo-step:nth-child(4) .abt__evo-node::before { animation-delay: .9s; }
.abt__evo-card {
  position: relative;
  border: 1px solid rgba(28, 30, 43, .06);
  border-radius: 18px;
  padding: 30px 22px 26px;
  max-width: 230px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.abt__evo-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(28, 30, 43, .1); border-color: transparent; }
.abt__evo-step:nth-child(1) .abt__evo-card { background: #dceafe; }
.abt__evo-step:nth-child(2) .abt__evo-card { background: #e7defb; }
.abt__evo-step:nth-child(3) .abt__evo-card { background: #e2e7f2; }
.abt__evo-step:nth-child(4) .abt__evo-card { background: #d6f5ee; }
.abt__evo-num {
  position: absolute; top: 14px; right: 16px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: rgba(28, 30, 43, .2);
}
.abt__evo-card h3 {
  font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 10px;
}
.abt__evo-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--at); margin: 0; }
@keyframes evoFlow { to { background-position: -40px 0; } }
@keyframes evoFlowY { to { background-position: 0 -40px; } }
@keyframes evoPulse { 0% { transform: scale(.85); opacity: .55; } 80% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 03. From a Business to a Technology Company ---------- */
.abt__disciplines { padding: 130px 0; background: var(--abg); }
.abt__disc-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.abt__disc-copy .abt__text strong { color: inherit; font-weight: 600; }
/* Three "shades" fan out at the top, above the single result card below --
   a visual play on the brand name ("different shades... converging into one
   vision") instead of generic chips-and-arrow UI. */
.abt__disc-shades { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 22px; }
.abt__disc-shade {
  flex: 1;
  padding: 26px 12px;
  border-radius: 16px 16px 6px 6px;
  text-align: center;
  color: #fff;
  transition: transform .3s ease;
}
.abt__disc-shade span { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.abt__disc-shade--1 { background: #0868be; transform: scale(1.08); box-shadow: 0 18px 34px rgba(8, 104, 190, .28); position: relative; z-index: 1; }
.abt__disc-shade--2 { background: #ff8214; }
.abt__disc-shade--3 { background: #4fb93f; }
.abt__disc-result { padding: 34px 30px; border-radius: 18px; background: var(--adark); color: #fff; text-align: center; position: relative; overflow: hidden; }
.abt__disc-result::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 260px at 100% 0%, rgba(0, 95, 204, .35), transparent 65%),
              radial-gradient(360px 240px at 0% 100%, rgba(128, 121, 248, .28), transparent 65%);
}
.abt__disc-result > * { position: relative; z-index: 1; }
.abt__disc-result span { display: block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--ac3); margin-bottom: 10px; }
.abt__disc-result strong { font-size: 21px; font-weight: 600; }
.abt__disc-quote { margin-top: 60px; text-align: center; font-size: 24px; font-weight: 500; color: var(--ah); max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.abt__disc-quote em { font-style: normal; color: var(--ac); }

/* ---------- 04. What We Do Today ---------- */
.abt__capabilities { padding: 130px 0; background: #fff; }
.abt__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 56px 0 50px; }
.abt__cap-card { padding: 32px 28px; border: 1px solid var(--ab); border-radius: 16px; background: var(--abg); transition: all .35s ease; }
.abt__cap-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); background: #fff; }
.abt__cap-card h3 { font-size: 19px; font-weight: 600; color: var(--at); margin: 0 0 10px; }
.abt__cap-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--at); margin: 0; }
.abt__cap-cta { text-align: center; margin-top: 36px; }

/* ---------- 05. Why We Build ---------- */
.abt__why { padding: 150px 0; background: var(--adark); position: relative; overflow: hidden; }
.abt__why::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 8% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 96% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.abt__why > .container { position: relative; z-index: 1; }
.abt__why-lines { max-width: 720px; margin: 0 auto 70px; text-align: center; }
.abt__why-line { font-size: 20px; line-height: 1.55; font-weight: 300; color: var(--amuted); margin: 0 0 16px; }
.abt__why-line--lead { font-size: 26px; font-weight: 500; color: #fff; margin-bottom: 24px; }
.abt__why-line:nth-of-type(2) { opacity: .62; }
.abt__why-line:nth-of-type(3) { opacity: .72; }
.abt__why-line:nth-of-type(4) { opacity: .82; }
.abt__why-line:nth-of-type(5) { opacity: .92; }
.abt__why-line:nth-of-type(6) { opacity: 1; }
.abt__why-line:nth-of-type(7) { margin-top: 10px; }
.abt__why-emphasis { max-width: 760px; margin: 0 auto; padding-top: 46px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.abt__why-emphasis p { font-size: 25px; font-weight: 500; color: #fff; line-height: 1.5; margin: 0 0 10px; }
.abt__why-emphasis p:last-child { margin-bottom: 0; color: var(--ac3); }

/* ---------- 06. Our Approach ---------- */
.abt__approach { padding: 130px 0; background: #fff; }
.abt__approach-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: start; }
.abt__approach-copy .abt__text strong { color: inherit; font-weight: 600; }
.abt__approach-quote { padding: 44px 38px; border-radius: 20px; background: var(--abg); border: 1px solid var(--ab); position: sticky; top: 120px; }
.abt__approach-quote p { font-size: 23px; font-weight: 500; color: var(--ah); line-height: 1.5; margin: 0 0 14px; }
.abt__approach-quote p:last-child { margin-bottom: 0; color: var(--ac); }

/* ---------- 07. What We Believe ---------- */
.abt__values { padding: 130px 0; background: var(--abg); }

/* ---------- 08. Why the Name 3Shadz? ---------- */
.abt__name { padding: 130px 0; background: #fff; }
.abt__name-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.abt__name-copy .abt__text strong { color: inherit; font-weight: 600; }
.abt__name-shades { position: relative; height: 300px; }
.abt__name-band {
  position: absolute;
  width: 78%;
  height: 118px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 0 20px;
}
.abt__name-band--1 { top: 0; left: 0; background: linear-gradient(135deg, #005fcc, #5ca8f2); z-index: 3; opacity: .9; }
.abt__name-band--2 { top: 91px; left: 11%; background: linear-gradient(135deg, #fe8214, #feb472); z-index: 2; opacity: .9; }
.abt__name-band--3 { top: 182px; left: 22%; background: linear-gradient(135deg, #4fb83e, #95d48b); z-index: 1; opacity: .85; }
.abt__name-tagline { margin-top: 30px; font-size: 21px; font-weight: 500; color: var(--ac); }

/* ---------- 09. From Hyderabad to the World ---------- */
.abt__global { padding: 130px 0; background: var(--adark); position: relative; overflow: hidden; }
.abt__global-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.abt__global-copy .abt__text strong { color: inherit; font-weight: 600; }
.abt__globe-vis { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto; }

/* Real WebGL globe (custom Three.js dot-cloud + data-spike globe), progressively
   enhanced in over the flat CSS orb by assets/js/webgl-globe/abt-globe-init.js.
   Hidden until that script confirms WebGL + desktop width, so the CSS orb above
   always renders first and stays the fallback for mobile / no-WebGL / reduced
   motion. */
.abt__globe-3d { position: absolute; inset: 0; display: none; z-index: 1; }
.abt__globe-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.abt__globe-vis.is-3d::before {
  content: ""; position: absolute; inset: -22%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(77, 163, 255, .22), rgba(128, 121, 248, .12) 45%, transparent 72%);
  filter: blur(6px);
}
.abt__globe-vis.is-3d > .abt__globe-ring,
.abt__globe-vis.is-3d > .abt__globe-orb,
.abt__globe-vis.is-3d > .abt__globe-dot { display: none; }
.abt__globe-vis.is-3d .abt__globe-3d { display: block; }
.abt__globe-orb {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(77, 163, 255, .5), rgba(0, 95, 204, .18) 46%, rgba(7, 21, 47, .9) 78%);
  border: 1px solid rgba(255, 255, 255, .12);
}
.abt__globe-ring { position: absolute; inset: 0; border: 1px solid rgba(77, 163, 255, .25); border-radius: 50%; }
.abt__globe-ring--2 { inset: -14%; border-color: rgba(128, 121, 248, .18); }
.abt__globe-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ac2); opacity: .8; }

/* ---------- 10-11. Mission & Vision ---------- */
.abt__mv { padding: 130px 0; background: #fff; }
.abt__mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.abt__mv-col { position: relative; padding: 48px 44px; border-radius: 24px; overflow: hidden; }
.abt__mv-col--mission { background: linear-gradient(160deg, #eaf3ff, #f8fbff); }
.abt__mv-col--vision { background: linear-gradient(160deg, #f3efff, #faf8ff); }
.abt__mv-col .abt__text strong { color: inherit; font-weight: 600; }
.abt__mv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  margin-bottom: 22px;
  font-size: 20px;
  color: #fff;
}
.abt__mv-col--mission .abt__mv-ico { background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 14px 28px rgba(0, 95, 204, .25); }
.abt__mv-col--vision .abt__mv-ico { background: linear-gradient(135deg, var(--ac2), #b06bff); box-shadow: 0 14px 28px rgba(128, 121, 248, .25); }
.abt__mv-emphasis { margin-top: 24px; }
.abt__mv-col--mission .abt__mv-emphasis p {
  margin: 0; padding: 18px 22px;
  border-left: 3px solid var(--ac);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .65);
  font-size: 16.5px; font-weight: 600; color: var(--ah); line-height: 1.6;
}
.abt__mv-col--vision .abt__mv-emphasis { display: flex; flex-wrap: wrap; gap: 10px; }
.abt__mv-col--vision .abt__mv-emphasis p {
  margin: 0; padding: 10px 18px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(128, 121, 248, .3);
  font-size: 13.5px; font-weight: 600; color: var(--ac2);
}

/* ---------- 12. Experience ---------- */
.abt__stats { padding: 110px 0 130px; background: var(--abg); text-align: center; }
.abt__stats-num { font-size: 72px; font-weight: 600; color: var(--ac); margin: 0; line-height: 1; }
.abt__stats-label { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--at); margin: 10px 0 8px; }
.abt__stats-sub { font-size: 14px; color: var(--at); margin: 0 0 30px; }
.abt__stats .abt__stats-text { max-width: 620px; margin: 0 auto; }
.abt__stats .abt__text strong { color: inherit; font-weight: 600; }
.abt__stats-emphasis { font-size: 17px; font-weight: 600; color: var(--ac); margin: 16px 0 0; }

/* ---------- Continue exploring (internal links) ---------- */
.abt__more { padding: 90px 0 40px; background: #fff; }
.abt__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.abt__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--ab); font-size: 13.5px; font-weight: 500; color: var(--at); transition: all .3s ease; }
.abt__more-chip:hover { color: var(--ac); border-color: var(--ac); background: var(--abg); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.abt__final-emphasis { max-width: 560px; margin: 0 auto 30px; }
.abt__final-emphasis p { font-size: 18px; font-weight: 600; color: var(--ah); line-height: 1.5; margin: 0 0 4px; }
.abt__final-emphasis p:last-child { color: var(--ac); margin-bottom: 0; }
.abt__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- From Hyderabad to the World: emphasis on dark background ---------- */
.abt__global-emphasis p { font-size: 17px; font-weight: 600; color: #fff; line-height: 1.6; margin: 0 0 6px; }
.abt__global-emphasis p:last-child { color: var(--ac3); margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .abt__page .abt__title { font-size: 34px; }
  .abt__hero-title { font-size: 44px; }
  .abt__hero { padding: 170px 0 100px; }
  .abt__hero-grid { gap: 44px; }
  .abt__hero-frame { aspect-ratio: 16 / 9; }
  .abt__story, .abt__disciplines, .abt__capabilities, .abt__approach,
  .abt__values, .abt__name, .abt__global, .abt__mv { padding: 100px 0; }
  .abt__why { padding: 120px 0; }
  .abt__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .abt__disc-grid, .abt__approach-grid, .abt__global-grid { grid-template-columns: 1fr; gap: 46px; }
  .abt__approach-quote { position: static; }
  .abt__name-grid { grid-template-columns: 1fr; gap: 40px; }
  .abt__name-shades { width: 100%; max-width: 420px; margin: 0 auto; }
}
@media only screen and (max-width: 991px) {
  .abt__evo-track { flex-direction: column; align-items: stretch; gap: 34px; }
  .abt__evo-track::before { left: 23px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--ac), var(--ac2), var(--ac)); background-size: 100% 200%; animation: evoFlowY 7s linear infinite; opacity: .3; }
  .abt__evo-step, .abt__evo-step:nth-child(odd), .abt__evo-step:nth-child(even) {
    flex-direction: row; align-items: flex-start; text-align: left; align-self: auto;
  }
  .abt__evo-step:nth-child(even) .abt__evo-node { margin: 0 20px 0 0; }
  .abt__evo-node { margin: 0 20px 0 0; }
  .abt__evo-card { max-width: none; }
  .abt__evo-num { top: 14px; }
  .abt__mv-grid { grid-template-columns: 1fr; gap: 24px; }
  .abt__mv-col { padding: 38px 30px; }
  .abt__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .abt__hero-figure { margin-top: 0; }
  .abt__story-grid { grid-template-columns: 1fr; gap: 44px; }
  .abt__story-figure { height: auto; max-width: 420px; margin: 0 auto; }
  .abt__story-frame { position: relative; inset: auto; }
  .abt__story-frame img { height: auto; width: 100%; max-width: 100%; }
}
@media only screen and (max-width: 767px) {
  .abt__page .abt__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .abt__page .abt__title { font-size: 27px; }
  .abt__page .abt__btn, .abt__page .abt__btn-outline { padding: 15px 26px; font-size: 15px; }
  .abt__hero { padding: 150px 0 80px; }
  .abt__hero-title { font-size: 30px; }
  .abt__hero-lead { font-size: 17px; }
  .abt__story, .abt__disciplines, .abt__capabilities, .abt__approach,
  .abt__values, .abt__name, .abt__global, .abt__mv, .abt__why { padding: 80px 0; }
  .abt__cap-grid { grid-template-columns: 1fr; }
  .abt__disc-shades { gap: 8px; }
  .abt__disc-shade { padding: 18px 6px; }
  .abt__disc-shade span { font-size: 11px; }
  .abt__disc-shade--1 { transform: scale(1.04); }
  .abt__why-line { font-size: 17px; }
  .abt__why-line--lead { font-size: 20px; }
  .abt__why-emphasis p { font-size: 19px; }
  .abt__stats-num { font-size: 48px; }
  .abt__name-band { font-size: 11.5px; height: 100px; }
  .abt__name-band--2 { top: 78px; }
  .abt__name-band--3 { top: 156px; }
}
@media (prefers-reduced-motion: reduce) {
  .abt__page .abt__pulse { animation: none !important; }
  .abt__page .abt__evo-track::before,
  .abt__page .abt__evo-node::before { animation: none !important; opacity: 0; }
  .abt__page .abt__story-orb { animation: none !important; display: none; }
  .abt__page .abt__story-bounce { animation: none !important; display: none; }
  .abt__page .abt__evo-card,
  .abt__page .abt__cap-card,
  .abt__page .abt__btn,
  .abt__page .abt__btn-outline,
  .abt__page .abt__more-chip { transition: none !important; }
  .abt__page .abt__evo-card:hover,
  .abt__page .abt__cap-card:hover { transform: none !important; }
}

/* ============================================================
   WHY 3SHADZ PAGE (why__*)
   Scoped entirely to .why__page (added on <main> of why-3shadz.html).
   Follows the shared page-module pattern used by .abt__page /
   .svc__page / .soln__page: local custom properties for color, a
   common eyebrow/title/lead/text/button vocabulary, then
   section-specific blocks. This is a positioning/argument page
   (13 numbered points building a case), so most sections lean on
   typography, cards and a comparison table rather than photography.
   Nothing in this block leaks outside .why__page.
   ============================================================ */
.why__page {
  --wc: #005fcc;
  --wc2: #8079f8;
  --wc3: #4da3ff;
  --wh: #1c1e2b;
  --wt: #6b7089;
  --wb: #e9eaf5;
  --wbg: #f6f7fc;
  --wdark: #07152F;
  --wmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.why__page .why__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--wc);
  margin-bottom: 18px;
}
.why__page .why__title { font-size: 38px; line-height: 1.24; font-weight: 600; color: var(--wh); margin: 0 0 20px; }
.why__page .why__title--light { color: #fff; }
.why__page .why__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--wt); margin: 0 0 18px; }
.why__page .why__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--wt); margin: 0 0 14px; }
.why__page .why__text:last-child { margin-bottom: 0; }
.why__page .why__text strong { color: var(--wh); font-weight: 600; }
.why__page .why__text--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.why__page .why__text--muted { color: var(--wmuted); }
.why__page .why__head { max-width: 780px; }
.why__page .why__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.why__page .why__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--wc);
  margin: 48px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}

.why__page .why__btn,
.why__page .why__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.why__page .why__btn { color: #fff; background: var(--wc); border: 2px solid var(--wc); }
.why__page .why__btn:hover { background: var(--wc2); border-color: var(--wc2); color: #fff; }
.why__page .why__btn-outline { color: var(--wc); border: 2px solid var(--wc); background: transparent; }
.why__page .why__btn-outline:hover { background: var(--wc); color: #fff; }

.why__page .why__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--wc);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

/* ---------- Hero ---------- */
.why__hero { position: relative; overflow: hidden; background: var(--wdark); padding: 190px 0 110px; }
.why__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.why__hero > .container { position: relative; z-index: 2; }
.why__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.why__hero-figure { position: relative; margin-top: 108px; }
.why__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.why__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.why__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why__hero-title { font-size: 52px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.why__hero-title .why__mark { color: var(--wc3); }
.why__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 740px; }
.why__hero-text { font-size: 16px; line-height: 1.85; color: var(--wmuted); font-weight: 300; margin: 0 0 16px; max-width: 740px; }
.why__hero-text strong { color: #fff; font-weight: 600; }
.why__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 740px; }
.why__hero-emphasis p { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.why__hero-emphasis p:last-child { color: var(--wc3); margin-bottom: 0; }
.why__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- 01. Business Before Technology ---------- */
.why__problem { padding: 130px 0; background: #fff; }
.why__problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; margin-bottom: 60px; }
.why__problem .why__head { margin: 0; text-align: left; max-width: none; }
.why__problem-media {
  position: relative;
  min-height: 420px;
  overflow: visible;
  background: url("../imgs/about/why-3shadz.png") center / contain no-repeat;
}
/* ---------- Business Before Technology — cubes popping out of the box ---------- */
.why__problem-cube {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 0 8px 14px rgba(7, 21, 47, .18), inset 0 0 0 1px rgba(255, 255, 255, .35);
  animation: whyCubePop 5s ease-in-out infinite;
  pointer-events: none;
}
.why__problem-cube--1 { left: 38%; top: 68%; background: linear-gradient(135deg, #5fd8c9, #17a68f); animation-delay: 0s; --cube-x: -50px; }
.why__problem-cube--2 { left: 46%; top: 64%; background: linear-gradient(135deg, #ffb45c, #f5822a); animation-delay: .7s; --cube-x: 20px; }
.why__problem-cube--3 { left: 52%; top: 70%; background: linear-gradient(135deg, #ffd85c, #f5b301); animation-delay: 1.4s; --cube-x: -20px; }
.why__problem-cube--4 { left: 58%; top: 63%; background: linear-gradient(135deg, #ff8fa8, #e94f77); animation-delay: 2.1s; --cube-x: 60px; }
.why__problem-cube--5 { left: 42%; top: 60%; background: linear-gradient(135deg, #7ecbff, #2f8fe0); animation-delay: 2.8s; --cube-x: -70px; }
.why__problem-cube--6 { left: 50%; top: 66%; background: linear-gradient(135deg, #b48cff, #7a4fe0); animation-delay: 3.5s; --cube-x: 40px; }
.why__problem-cube--7 { left: 34%; top: 62%; background: linear-gradient(135deg, #5fd8c9, #17a68f); animation-delay: 4.2s; --cube-x: -35px; }
.why__problem-cube--8 { left: 62%; top: 68%; background: linear-gradient(135deg, #ffb45c, #f5822a); animation-delay: .35s; --cube-x: 65px; }
.why__problem-cube--9 { left: 44%; top: 74%; background: linear-gradient(135deg, #ff8fa8, #e94f77); animation-delay: 1.75s; --cube-x: -10px; }
.why__problem-cube--10 { left: 56%; top: 60%; background: linear-gradient(135deg, #b48cff, #7a4fe0); animation-delay: 3.15s; --cube-x: 30px; }
@keyframes whyCubePop {
  0% { transform: translate(0, 0) rotate(0deg) scale(.4); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translate(var(--cube-x), -160px) rotate(220deg) scale(1); opacity: 0; }
}
@media (max-width: 767px) {
  .why__problem-cube { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .why__problem-cube { animation: none; opacity: 0; }
}
.why__problem-bounce-ball {
  position: absolute;
  left: 15%;
  bottom: 4%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff2c8, #f7ab2e 55%, #c26a12);
  transform-origin: center;
  animation: whyBallBounce 5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.why__problem-bounce-shadow {
  position: absolute;
  left: 15%;
  bottom: 3.5%;
  width: 18px;
  height: 6px;
  margin-left: -1px;
  border-radius: 50%;
  background: rgba(7, 21, 47, .22);
  filter: blur(1px);
  animation: whyBallShadow 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes whyBallBounce {
  0% { left: 15%; bottom: 4%; opacity: 1; animation-timing-function: ease-out; }
  17% { left: 26%; bottom: 40%; opacity: 1; animation-timing-function: ease-in; }
  34% { left: 37%; bottom: 4%; opacity: 1; animation-timing-function: ease-out; }
  46% { left: 45%; bottom: 24%; opacity: 1; animation-timing-function: ease-in; }
  58% { left: 53%; bottom: 4%; opacity: 1; animation-timing-function: ease-out; }
  67% { left: 58%; bottom: 13%; opacity: 1; animation-timing-function: ease-in; }
  76% { left: 64%; bottom: 4%; opacity: 1; animation-timing-function: ease-out; }
  82% { left: 68%; bottom: 6%; opacity: 1; animation-timing-function: ease-in; }
  88% { left: 72%; bottom: 4%; opacity: 1; transform: rotate(0deg); animation-timing-function: linear; }
  100% { left: 92%; bottom: 4%; opacity: 0; transform: rotate(760deg); }
}
@keyframes whyBallShadow {
  0% { left: 15%; transform: scale(1); opacity: .45; animation-timing-function: ease-out; }
  17% { left: 26%; transform: scale(.4); opacity: .14; animation-timing-function: ease-in; }
  34% { left: 37%; transform: scale(1); opacity: .45; animation-timing-function: ease-out; }
  46% { left: 45%; transform: scale(.55); opacity: .2; animation-timing-function: ease-in; }
  58% { left: 53%; transform: scale(1); opacity: .45; animation-timing-function: ease-out; }
  67% { left: 58%; transform: scale(.7); opacity: .28; animation-timing-function: ease-in; }
  76% { left: 64%; transform: scale(1); opacity: .45; animation-timing-function: ease-out; }
  82% { left: 68%; transform: scale(.85); opacity: .35; animation-timing-function: ease-in; }
  88% { left: 72%; transform: scale(1); opacity: .45; animation-timing-function: linear; }
  100% { left: 92%; transform: scale(1); opacity: 0; }
}
@media (max-width: 767px) {
  .why__problem-bounce-ball, .why__problem-bounce-shadow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .why__problem-bounce-ball, .why__problem-bounce-shadow { animation: none; }
}
/* ---------- Business Before Technology — interlocking chevron flow ----------
   Four steps as pointed ribbons that slot into one another, left to
   right, cycling through the brand palette from light to dark. */
.why__flow { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.why__flow-step {
  --flow-accent: var(--wc);
  position: relative;
  flex: 1 1 220px; max-width: 250px; text-align: left;
  padding: 30px 26px 30px 40px;
  background: var(--flow-accent);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  transition: filter .3s ease;
}
.why__flow-step:first-child { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); padding-left: 28px; }
.why__flow-step:not(:first-child) { margin-left: -22px; }
.why__flow-step:nth-child(1) { z-index: 1; }
.why__flow-step:nth-child(2) { --flow-accent: var(--wc3); z-index: 2; }
.why__flow-step:nth-child(3) { --flow-accent: var(--wc2); z-index: 3; }
.why__flow-step:nth-child(4) { --flow-accent: var(--wdark); z-index: 4; }
.why__flow-step:hover { filter: brightness(1.08); }
.why__flow-num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: rgba(255, 255, 255, .72); margin-bottom: 10px; }
.why__flow-step p { font-size: 15px; font-weight: 600; color: #fff; margin: 0; }

/* ---------- 02. Connected Technology Capabilities ---------- */
.why__capabilities { padding: 130px 0; background: var(--wbg); }
.why__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0 0 50px; }
.why__cap-card { display: block; padding: 32px 28px; border: 1px solid var(--wb); border-radius: 16px; background: #fff; transition: all .35s ease; }
.why__cap-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.why__cap-card h3 { font-size: 19px; font-weight: 600; color: var(--wh); margin: 0 0 10px; }
.why__cap-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--wt); margin: 0; }
.why__cap-cta { text-align: center; margin-top: 40px; }

/* ---------- 03. Build. Modernize. Evolve. ---------- */
.why__bme { padding: 130px 0; background: #fff; }
.why__bme .why__head { margin: 0 auto 56px; text-align: center; }

/* ---------- Build / Modernize / Evolve — connected overlapping circles ----------
   Each starting point is its own colored circle (dark to light),
   overlapping the next, with an icon tethered above it by a dashed
   line — three entry points into one continuous story. */
.why__bme-grid { display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.why__bme-card { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 1 300px; }
.why__bme-card:not(:first-child) { margin-left: -64px; }
.why__bme-ico {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  font-size: 21px;
  box-shadow: 0 12px 26px rgba(7, 21, 47, .2);
}
.why__bme-connector {
  position: relative;
  z-index: 5;
  width: 3px;
  height: 30px;
  margin: 3px 0;
  background-image: repeating-linear-gradient(to bottom, var(--wdot) 0 6px, transparent 6px 13px);
}
.why__bme-card:nth-of-type(1) .why__bme-connector { --wdot: var(--wdark); }
.why__bme-card:nth-of-type(2) .why__bme-connector { --wdot: var(--wc); }
.why__bme-card:nth-of-type(3) .why__bme-connector { --wdot: var(--wc2); }
.why__bme-circle {
  position: relative;
  width: min(28vw, 300px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15% 12% 15% 32%;
  text-align: left;
  box-shadow: 0 24px 54px rgba(7, 21, 47, .16);
  transition: transform .4s ease;
}
.why__bme-card:hover .why__bme-circle { transform: translateY(-6px); }
.why__bme-card:nth-of-type(1) .why__bme-ico, .why__bme-card:nth-of-type(1) .why__bme-circle { background: var(--wdark); }
.why__bme-card:nth-of-type(2) .why__bme-ico, .why__bme-card:nth-of-type(2) .why__bme-circle { background: var(--wc); }
.why__bme-card:nth-of-type(3) .why__bme-ico, .why__bme-card:nth-of-type(3) .why__bme-circle { background: var(--wc2); }
.why__bme-card:nth-of-type(1) .why__bme-circle { z-index: 3; }
.why__bme-card:nth-of-type(2) .why__bme-circle { z-index: 2; }
.why__bme-card:nth-of-type(3) .why__bme-circle { z-index: 1; }
.why__bme-tag { margin: 0 0 10px; font-size: clamp(18px, 2vw, 23px); font-weight: 600; color: #fff; }
.why__bme-rule { display: block; width: 34px; height: 3px; margin: 0 0 14px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.why__bme-card p { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .86); }
.why__bme-emphasis { margin: 64px auto 0; text-align: center; max-width: 560px; }
.why__bme-emphasis p { font-size: 19px; font-weight: 600; color: var(--wh); margin: 0 0 6px; }
.why__bme-emphasis p:last-child { color: var(--wc); margin-bottom: 0; }
@media only screen and (max-width: 991px) {
  .why__bme-circle { width: min(38vw, 230px); padding: 15% 10% 15% 32%; }
  .why__bme-card:not(:first-child) { margin-left: -40px; }
}
@media only screen and (max-width: 767px) {
  .why__bme-grid { flex-direction: column; align-items: center; gap: 44px; }
  .why__bme-card:not(:first-child) { margin-left: 0; }
  .why__bme-circle { width: min(78vw, 320px); padding: 16% 14% 16% 22%; }
  .why__bme-emphasis { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .why__bme-circle { transition: none !important; }
}

/* ---------- 04. Practical AI ---------- */
.why__ai { padding: 130px 0; background: var(--wdark); position: relative; overflow: hidden; }
.why__ai::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 8% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 96% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.why__ai > .container { position: relative; z-index: 1; }
.why__ai .why__head { margin: 0 auto 8px; }
.why__ai-question { text-align: center; font-size: 27px; font-weight: 500; color: #fff; margin: 0 0 40px; }
.why__ai-list {
  list-style: none; margin: 0 0 46px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px 34px; max-width: 720px; margin-left: auto; margin-right: auto;
}
.why__ai-list li { font-size: 15.5px; font-weight: 400; color: var(--wmuted); display: flex; align-items: center; gap: 12px; }
.why__ai-list li i { color: var(--wc3); font-size: 13px; }
.why__ai-emphasis { max-width: 720px; margin: 0 auto 46px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.why__ai-emphasis p { font-size: 22px; font-weight: 500; color: #fff; line-height: 1.5; margin: 0 0 8px; }
.why__ai-emphasis p:last-child { margin-bottom: 0; color: var(--wc3); }
.why__ai .why__cap-cta { margin-top: 0; }

/* ---------- 05. Engineering for the Long Term ---------- */
.why__engineering { padding: 130px 0; background: #fff; }
.why__engineering .why__head { margin: 0 auto 56px; text-align: center; }
.why__eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 50px; }
.why__eng-card { padding: 30px 26px; border-radius: 16px; background: var(--wbg); border: 1px solid var(--wb); }
.why__eng-card h3 { font-size: 17px; font-weight: 600; color: var(--wc); margin: 0 0 10px; }
.why__eng-card p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--wt); margin: 0; }

/* ---------- 06. Strategy Connected to Engineering ---------- */
.why__strategy { padding: 130px 0; background: var(--wbg); }
.why__strategy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why__strategy-track { display: flex; flex-direction: column; gap: 0; }
.why__strategy-step {
  position: relative; padding: 18px 26px; margin-bottom: 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--wb); font-size: 15.5px; font-weight: 600; color: var(--wh);
  box-shadow: 0 10px 26px rgba(28, 30, 43, .05);
}
.why__strategy-step::after {
  content: "\2193"; position: absolute; left: 26px; bottom: -22px; color: var(--wc2); font-size: 14px;
}
.why__strategy-step:last-child { margin-bottom: 0; }
.why__strategy-step:last-child::after { content: none; }
.why__strategy-step:nth-child(1) { border-left: 3px solid var(--wc); }
.why__strategy-step:nth-child(2) { border-left: 3px solid var(--wc); margin-left: 16px; }
.why__strategy-step:nth-child(3) { border-left: 3px solid var(--wc2); margin-left: 32px; }
.why__strategy-step:nth-child(4) { border-left: 3px solid var(--wc2); margin-left: 32px; }
.why__strategy-step:nth-child(5) { border-left: 3px solid var(--wc3); margin-left: 16px; }
.why__strategy-step:nth-child(6) { border-left: 3px solid var(--wc3); }

/* ---------- 07. Flexible Ways to Work ---------- */
.why__engagement { padding: 130px 0; background: #fff; }
.why__engagement .why__head { margin: 0 auto 56px; text-align: center; }
.why__eng2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 20px; }
.why__eng2-card { padding: 30px 26px; border-radius: 16px; background: var(--wbg); border: 1px solid var(--wb); transition: all .35s ease; }
.why__eng2-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.why__eng2-card h3 { font-size: 17px; font-weight: 600; color: var(--wh); margin: 0 0 10px; }
.why__eng2-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--wt); margin: 0; }
.why__eng2-grid .why__eng2-card:nth-child(4),
.why__eng2-grid .why__eng2-card:nth-child(5) { grid-column: span 1; }
.why__engagement .why__cap-cta { margin-top: 36px; }

/* ---------- 08. Modernize Without Losing What Works ---------- */
.why__modernize { padding: 130px 0; background: var(--wbg); }
.why__modernize-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.why__modernize-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.why__modernize-list li {
  --mod-accent: var(--wc);
  display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 400; color: var(--wt);
  padding: 16px 18px; border: 1px solid var(--wb); border-radius: 14px; background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why__modernize-list li:nth-child(even) { --mod-accent: var(--wc2); }
.why__modernize-list li:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(7, 21, 47, .08); border-color: transparent; }
.why__modernize-check {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%; background: var(--mod-accent); color: #fff; font-size: 11px;
}
.why__modernize-emphasis { max-width: 640px; margin: 50px auto 0; text-align: center; }
.why__modernize-emphasis p { font-size: 19px; font-weight: 600; color: var(--wh); margin: 0 0 6px; }
.why__modernize-emphasis p:last-child { color: var(--wc); margin-bottom: 0; font-weight: 400; font-size: 16px; }
.why__modernize .why__cap-cta { margin-top: 40px; }

/* ---------- 09. A Partner, Not Just a Project Vendor ---------- */
.why__partner { padding: 150px 0; background: var(--wdark); position: relative; overflow: hidden; }
.why__partner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.why__partner > .container { position: relative; z-index: 1; }
.why__partner-lines { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.why__partner-line { font-size: 19px; line-height: 1.6; font-weight: 300; color: var(--wmuted); margin: 0 0 14px; }
.why__partner-line:nth-of-type(1),
.why__partner-line:nth-of-type(2) { font-size: 22px; font-weight: 500; color: #fff; }
.why__partner-emphasis { max-width: 700px; margin: 0 auto 30px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.why__partner-emphasis p { font-size: 24px; font-weight: 500; color: var(--wc3); line-height: 1.5; margin: 0; }

/* ---------- 10. How We Think Differently ---------- */
.why__compare { padding: 130px 0; background: #fff; }
.why__compare .why__head { margin: 0 auto 50px; text-align: center; }
/* ---------- How We Think Differently — shift rows ----------
   Each row is a small "before -> after" card: muted, struck-through
   text on the left, an accent arrow badge in the middle, and the bold
   reframed approach on the right. Accent cycles blue / light-blue /
   purple down the eight rows. */
.why__compare-legend {
  display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center;
  max-width: 980px; margin: 0 auto 14px; padding: 0 28px;
}
.why__compare-legend span {
  font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--wt);
}
.why__compare-legend span:last-child { grid-column: 3; color: var(--wc); }
.why__compare-list { max-width: 980px; margin: 0 auto 46px; }
.why__compare-row {
  --cmp-accent: var(--wc);
  position: relative;
  display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center;
  padding: 20px 28px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--wb); border-radius: 16px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why__compare-row:last-child { margin-bottom: 0; }
.why__compare-row:nth-child(3n+2) { --cmp-accent: var(--wc3); }
.why__compare-row:nth-child(3n+3) { --cmp-accent: var(--wc2); }
.why__compare-row:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(7, 21, 47, .08); border-color: transparent; }
.why__compare-old {
  margin: 0; font-size: 15px; font-weight: 300; color: var(--wt);
  text-decoration: line-through; text-decoration-color: rgba(107, 112, 137, .4);
}
.why__compare-old i { margin-right: 8px; color: rgba(107, 112, 137, .5); font-size: 12px; text-decoration: none; }
.why__compare-new { grid-column: 3; margin: 0; font-size: 15px; font-weight: 600; color: var(--wh); }
.why__compare-new i { margin-right: 8px; color: var(--cmp-accent); font-size: 12px; }
.why__compare-arrow {
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--cmp-accent); background: #fff; color: var(--cmp-accent); font-size: 13px;
}
.why__compare-emphasis { max-width: 620px; margin: 0 auto; text-align: center; }
.why__compare-emphasis p { font-size: 19px; font-weight: 600; color: var(--wh); margin: 0 0 6px; }
.why__compare-emphasis p:last-child { color: var(--wc); margin-bottom: 0; }

/* ---------- 11. What You Can Expect ---------- */
.why__expect { padding: 130px 0; background: var(--wbg); }
.why__expect .why__head { margin: 0 auto 56px; text-align: center; }
.why__expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.why__expect-card { padding: 32px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--wb); transition: all .35s ease; }
.why__expect-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); }
.why__expect-card h3 { font-size: 18px; font-weight: 600; color: var(--wh); margin: 0 0 10px; }
.why__expect-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--wt); margin: 0; }

/* ---------- 12. Built for Different Technology Journeys ---------- */
.why__journeys { padding: 130px 0; background: #fff; }
.why__journeys .why__head { margin: 0 auto 56px; text-align: center; }
.why__journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.why__journey-card { padding: 30px 26px; border-radius: 16px; background: var(--wbg); border: 1px solid var(--wb); transition: all .35s ease; }
.why__journey-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.why__journey-card h3 { font-size: 17px; font-weight: 600; color: var(--wc); margin: 0 0 10px; }
.why__journey-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--wt); margin: 0; }

/* ---------- 13. Credibility — medal / pin / hex trio ----------
   Three distinct visual identities instead of three identical boxes:
   a medallion for the years-in-business, a pulsing map pin for the
   headquarters, and a hexagon (nodding to its six sides) holding the
   count of core capabilities, listed below as chips. */
.why__stats { padding: 110px 0 130px; background: var(--wbg); text-align: center; }
.why__stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 50px; align-items: stretch; }
.why__stats-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 26px 36px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--wb);
  box-shadow: 0 16px 34px rgba(7, 21, 47, .05);
  transition: transform .35s ease, box-shadow .35s ease;
}
.why__stats-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(7, 21, 47, .1); }
.why__stats-num { font-size: 52px; font-weight: 600; color: var(--wc); margin: 0; line-height: 1; }
.why__stats-num--text { font-size: 24px; margin: 0 0 6px; }
.why__stats-card h3 { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--wt); margin: 0 0 14px; }
.why__stats-card p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--wt); margin: 0; }

.why__stats-medal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--wbg);
  border: 2px dashed var(--wb);
}
.why__stats-medal::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--wc);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.why__stats-medal .why__stats-num { color: var(--wc); }
.why__stats-medal h3 { margin: 2px 0 0; }

.why__stats-pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--wc3);
  color: #fff;
  font-size: 24px;
}
.why__stats-pin-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wc3);
  animation: whyStatsPing 2.4s ease-out infinite;
}
@keyframes whyStatsPing {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.7); opacity: 0; }
}

.why__stats-layers { display: block; width: 82px; height: auto; margin: 0 auto 20px; }

.why__stats-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.why__stats-chips li {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--wbg);
  border: 1px solid var(--wb);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wt);
}
@media (prefers-reduced-motion: reduce) {
  .why__stats-card { transition: none !important; }
  .why__stats-card:hover { transform: none !important; }
  .why__stats-pin-pulse { animation: none !important; opacity: 0; }
}

/* ---------- Continue exploring (internal links) ---------- */
.why__more { padding: 90px 0 40px; background: #fff; }
.why__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.why__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--wb); font-size: 13.5px; font-weight: 500; color: var(--wt); transition: all .3s ease; }
.why__more-chip:hover { color: var(--wc); border-color: var(--wc); background: var(--wbg); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.why__final-emphasis { max-width: 580px; margin: 0 auto 30px; }
.why__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--wh); line-height: 1.5; margin: 0 0 4px; }
.why__final-emphasis p:last-child { color: var(--wc); margin-bottom: 0; }
.why__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .why__page .why__title { font-size: 32px; }
  .why__hero-title { font-size: 42px; }
  .why__hero { padding: 170px 0 90px; }
  .why__hero-grid { gap: 44px; }
  .why__hero-frame { aspect-ratio: 16 / 9; }
  .why__problem, .why__capabilities, .why__bme, .why__ai, .why__engineering,
  .why__strategy, .why__engagement, .why__modernize, .why__compare,
  .why__expect, .why__journeys { padding: 100px 0; }
  .why__partner { padding: 120px 0; }
  .why__cap-grid, .why__eng-grid, .why__eng2-grid, .why__expect-grid, .why__journey-grid,
  .why__stats-grid { grid-template-columns: repeat(2, 1fr); }
  .why__bme-grid { grid-template-columns: 1fr; }
  .why__strategy-grid, .why__modernize-grid, .why__problem-grid { grid-template-columns: 1fr; gap: 44px; }
  .why__problem-grid { margin-bottom: 44px; }
  .why__strategy-step:nth-child(n) { margin-left: 0; }
}
@media only screen and (max-width: 991px) {
  .why__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .why__hero-figure { margin-top: 0; }
  .why__flow { flex-direction: column; align-items: stretch; }
  .why__flow-step,
  .why__flow-step:first-child {
    max-width: none;
    margin-left: 0;
    margin-bottom: 10px;
    padding: 20px 24px;
    border-radius: 14px;
    clip-path: none;
  }
  .why__flow-step:last-child { margin-bottom: 0; }
  .why__ai-list { grid-template-columns: 1fr; max-width: 420px; }
}
@media only screen and (max-width: 767px) {
  .why__page .why__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .why__page .why__title { font-size: 26px; }
  .why__page .why__btn, .why__page .why__btn-outline { padding: 15px 26px; font-size: 15px; }
  .why__hero { padding: 150px 0 70px; }
  .why__hero-title { font-size: 29px; }
  .why__hero-lead { font-size: 17px; }
  .why__problem, .why__capabilities, .why__bme, .why__ai, .why__engineering,
  .why__strategy, .why__engagement, .why__modernize, .why__compare,
  .why__expect, .why__journeys, .why__partner { padding: 80px 0; }
  .why__cap-grid, .why__eng-grid, .why__eng2-grid, .why__expect-grid,
  .why__journey-grid, .why__stats-grid { grid-template-columns: 1fr; }
  .why__modernize-list { grid-template-columns: 1fr; }
  .why__ai-question { font-size: 22px; }
  .why__partner-line:nth-of-type(1), .why__partner-line:nth-of-type(2) { font-size: 19px; }
  .why__partner-emphasis p { font-size: 20px; }
  .why__compare-legend { display: none; }
  .why__compare-row {
    grid-template-columns: 1fr; row-gap: 10px; text-align: left; padding: 18px 20px;
  }
  .why__compare-arrow { grid-column: 1; justify-self: start; transform: rotate(90deg); }
  .why__compare-new { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .why__page .why__flow-step,
  .why__page .why__cap-card,
  .why__page .why__eng2-card,
  .why__page .why__expect-card,
  .why__page .why__journey-card,
  .why__page .why__btn,
  .why__page .why__btn-outline,
  .why__page .why__more-chip { transition: none !important; }
  .why__page .why__flow-step:hover,
  .why__page .why__cap-card:hover,
  .why__page .why__eng2-card:hover,
  .why__page .why__expect-card:hover,
  .why__page .why__journey-card:hover { transform: none !important; }
}

/* ============================================================
   LEADERSHIP PAGE (lead__*)
   Scoped entirely to .lead__page (added on <main> of leadership.html).
   Follows the shared page-module pattern used by .abt__page / .why__page:
   local custom properties for color, a common eyebrow/title/lead/text/
   button vocabulary, then section-specific blocks.
   Nothing in this block leaks outside .lead__page.
   ============================================================ */
.lead__page {
  --lc: #005fcc;
  --lc2: #8079f8;
  --lc3: #4da3ff;
  --lh: #1c1e2b;
  --lt: #6b7089;
  --lb: #e9eaf5;
  --lbg: #f6f7fc;
  --ldark: #07152F;
  --lmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.lead__page .lead__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--lc);
  margin-bottom: 18px;
}
.lead__page .lead__title { font-size: 38px; line-height: 1.24; font-weight: 600; color: var(--lh); margin: 0 0 20px; }
.lead__page .lead__title--light { color: #fff; }
.lead__page .lead__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--lt); margin: 0 0 18px; }
.lead__page .lead__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--lt); margin: 0 0 14px; }
.lead__page .lead__text:last-child { margin-bottom: 0; }
.lead__page .lead__text strong { color: var(--lh); font-weight: 600; }
.lead__page .lead__text--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.lead__page .lead__text--muted { color: var(--lmuted); }
.lead__page .lead__head { max-width: 780px; }
.lead__page .lead__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.lead__page .lead__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--lc);
  margin: 48px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}

.lead__page .lead__btn,
.lead__page .lead__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.lead__page .lead__btn { color: #fff; background: var(--lc); border: 2px solid var(--lc); }
.lead__page .lead__btn:hover { background: var(--lc2); border-color: var(--lc2); color: #fff; }
.lead__page .lead__btn-outline { color: var(--lc); border: 2px solid var(--lc); background: transparent; }
.lead__page .lead__btn-outline:hover { background: var(--lc); color: #fff; }

.lead__page .lead__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--lc);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

/* ---------- Hero ---------- */
.lead__hero { position: relative; overflow: hidden; background: var(--ldark); padding: 190px 0 110px; }
.lead__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.lead__hero > .container { position: relative; z-index: 2; }
.lead__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.lead__hero-figure { position: relative; margin-top: 108px; }
.lead__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.lead__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.lead__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead__hero-title { font-size: 52px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.lead__hero-title .lead__mark { color: var(--lc3); }
.lead__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 740px; }
.lead__hero-text { font-size: 16px; line-height: 1.85; color: var(--lmuted); font-weight: 300; margin: 0 0 16px; max-width: 740px; }
.lead__hero-text strong { color: #fff; font-weight: 600; }
.lead__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 740px; }
.lead__hero-emphasis p { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.lead__hero-emphasis p:last-child { color: var(--lc3); margin-bottom: 0; }
.lead__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- 01. Guiding the Next Chapter ---------- */
.lead__intro { padding: 130px 0; background: #fff; }
.lead__intro .lead__head { margin: 0 auto 56px; text-align: center; }
.lead__intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.lead__intro-card { padding: 36px 30px; border-radius: 18px; background: var(--lbg); border: 1px solid var(--lb); text-align: center; }
.lead__intro-card h3 { font-size: 19px; font-weight: 600; color: var(--lh); margin: 0 0 10px; }
.lead__intro-card p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--lt); margin: 0; }

/* ---------- 02. Meet Our Leadership ---------- */
.lead__team { padding: 130px 0; background: var(--lbg); }
.lead__team .lead__head { margin: 0 auto 56px; text-align: center; }
.lead__team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.lead__team-card {
  padding: 0; border-radius: 26px; background: #fff; border: 1px solid var(--lb); text-align: left;
  overflow: hidden; transition: transform .4s ease, box-shadow .4s ease;
}
.lead__team-card:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -26px rgba(28, 30, 43, .28); }
.lead__team-photo {
  display: block; width: 100%; aspect-ratio: 4 / 3.6; margin: 0; border-radius: 0; overflow: hidden; background: var(--lbg);
}
.lead__team-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transform: scale(1); transition: transform .5s ease;
}
.lead__team-card:hover .lead__team-photo img { transform: scale(1.06); }
.lead__team-body { padding: 26px 28px 30px; }
.lead__team-card h3 { font-size: 20px; font-weight: 600; color: var(--lt); margin: 0 0 4px; }
.lead__team-role { font-size: 13px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--lc); margin: 0 0 14px; }
.lead__team-body p:last-child { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--lt); margin: 0; }

/* ---------- 03. Leadership Philosophy ---------- */
.lead__philosophy { padding: 130px 0; background: #fff; }
.lead__philosophy .lead__head { margin: 0 auto 56px; text-align: center; }
.lead__phil-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); gap: 22px; }
.lead__phil-tile {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 34px 32px; border-radius: 26px; border: 1px solid transparent;
  transition: transform .35s ease, box-shadow .35s ease;
}
.lead__phil-tile:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(28, 30, 43, .22); }
.lead__phil-tile-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  font-size: 18px; margin-bottom: 18px; background: var(--tile-accent, var(--lc)); color: #fff;
}
.lead__phil-tile h3 { font-size: 18px; font-weight: 600; color: var(--lh); margin: 0 0 10px; }
.lead__phil-tile p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--lt); margin: 0; }

.lead__phil-tile--1 { grid-column: span 2; grid-row: 1; --tile-accent: var(--lc); background: linear-gradient(135deg, #e9f1ff, #f6f9ff); }
.lead__phil-tile--2 { grid-column: span 1; grid-row: 1; --tile-accent: var(--lc2); background: linear-gradient(135deg, #f1eefe, #f9f7ff); }
.lead__phil-tile--3 {
  grid-column: span 1; grid-row: 1 / span 2; --tile-accent: var(--lc3); background: linear-gradient(160deg, #eaf4ff, #f5faff);
}
.lead__phil-tile--4 { grid-column: span 2; grid-row: 2; --tile-accent: var(--lc2); background: linear-gradient(135deg, #f1eefe, #f9f7ff); }
.lead__phil-tile--5 { grid-column: span 1; grid-row: 2; --tile-accent: var(--lc); background: linear-gradient(135deg, #e9f1ff, #f6f9ff); }

/* ---------- 04. From Entrepreneurship to Technology ---------- */
.lead__entre { padding: 130px 0; background: var(--lbg); }
.lead__entre .lead__head { margin: 0 auto 40px; text-align: center; }
.lead__entre-emphasis { max-width: 560px; margin: 46px auto 0; text-align: center; }
.lead__entre-emphasis p { font-size: 20px; font-weight: 600; color: var(--lh); margin: 0 0 8px; }
.lead__entre-emphasis p:last-child { color: var(--lc); margin-bottom: 0; }

/* ---------- 05. Leadership & Technology ---------- */
.lead__techscape { padding: 130px 0; background: var(--ldark); position: relative; overflow: hidden; }
.lead__techscape::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 8% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 96% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.lead__techscape > .container { position: relative; z-index: 1; }
.lead__techscape .lead__head { margin: 0 auto 40px; }
.lead__techscape-emphasis { max-width: 640px; margin: 40px auto 0; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.lead__techscape-emphasis p { font-size: 22px; font-weight: 500; color: #fff; line-height: 1.5; margin: 0 0 8px; }
.lead__techscape-emphasis p:last-child { margin-bottom: 0; color: var(--lc3); }

/* ---------- 06. Building the Right Culture ---------- */
.lead__culture { padding: 130px 0; background: #fff; }
.lead__culture .lead__head { margin: 0 auto 56px; text-align: center; }
.lead__culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.lead__culture-card { padding: 30px 26px; border-radius: 16px; background: var(--lbg); border: 1px solid var(--lb); }
.lead__culture-card h3 { font-size: 17px; font-weight: 600; color: var(--lc); margin: 0 0 10px; }
.lead__culture-card p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--lt); margin: 0; }

/* ---------- 07. Leadership & Clients ---------- */
.lead__clients { padding: 130px 0; background: var(--lbg); }
.lead__clients .lead__head { margin: 0 auto 56px; text-align: center; }
.lead__clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.lead__clients-card { padding: 30px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--lb); transition: all .35s ease; }
.lead__clients-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.lead__clients-card h3 { font-size: 17px; font-weight: 600; color: var(--lh); margin: 0 0 10px; }
.lead__clients-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--lt); margin: 0; }

/* ---------- 08. Looking Ahead ---------- */
.lead__ahead { padding: 130px 0; background: #fff; }
.lead__ahead .lead__head { margin: 0 auto 40px; text-align: center; }
.lead__ahead-emphasis { max-width: 560px; margin: 46px auto 0; text-align: center; }
.lead__ahead-emphasis p { font-size: 19px; font-weight: 600; color: var(--lh); margin: 0 0 6px; }
.lead__ahead-emphasis p:last-child { color: var(--lc); margin-bottom: 0; }

/* ---------- Continue exploring (internal links) ---------- */
.lead__more { padding: 90px 0 40px; background: var(--lbg); }
.lead__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.lead__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--lb); font-size: 13.5px; font-weight: 500; color: var(--lt); background: #fff; transition: all .3s ease; }
.lead__more-chip:hover { color: var(--lc); border-color: var(--lc); background: #fff; }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.lead__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .lead__page .lead__title { font-size: 32px; }
  .lead__hero-title { font-size: 42px; }
  .lead__hero { padding: 170px 0 90px; }
  .lead__hero-grid { gap: 44px; }
  .lead__hero-frame { aspect-ratio: 16 / 9; }
  .lead__intro, .lead__team, .lead__philosophy, .lead__entre, .lead__techscape,
  .lead__culture, .lead__clients, .lead__ahead { padding: 100px 0; }
  .lead__intro-grid, .lead__team-grid, .lead__culture-grid,
  .lead__clients-grid { grid-template-columns: repeat(2, 1fr); }
  .lead__phil-bento { grid-template-columns: repeat(2, 1fr); }
  .lead__phil-tile--1, .lead__phil-tile--2, .lead__phil-tile--3, .lead__phil-tile--4, .lead__phil-tile--5 {
    grid-column: span 1; grid-row: auto;
  }
}
@media only screen and (max-width: 991px) {
  .lead__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .lead__hero-figure { margin-top: 0; }
}
@media only screen and (max-width: 767px) {
  .lead__page .lead__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .lead__page .lead__title { font-size: 26px; }
  .lead__page .lead__btn, .lead__page .lead__btn-outline { padding: 15px 26px; font-size: 15px; }
  .lead__hero { padding: 150px 0 70px; }
  .lead__hero-title { font-size: 29px; }
  .lead__hero-lead { font-size: 17px; }
  .lead__intro, .lead__team, .lead__philosophy, .lead__entre, .lead__techscape,
  .lead__culture, .lead__clients, .lead__ahead { padding: 80px 0; }
  .lead__intro-grid, .lead__team-grid, .lead__culture-grid,
  .lead__clients-grid { grid-template-columns: 1fr; }
  .lead__phil-bento { grid-template-columns: 1fr; }
  .lead__techscape-emphasis p { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .lead__page .lead__phil-tile,
  .lead__page .lead__clients-card,
  .lead__page .lead__btn,
  .lead__page .lead__btn-outline,
  .lead__page .lead__more-chip { transition: none !important; }
  .lead__page .lead__phil-tile:hover,
  .lead__page .lead__clients-card:hover { transform: none !important; }
}

/* ============================================================
   OUR PROCESS PAGE (process__*)
   Scoped entirely to .process__page (added on <main> of our-process.html).
   Follows the shared page-module pattern used by .why__page / .lead__page:
   local custom properties for color, a common eyebrow/title/lead/text/
   button vocabulary, then section-specific blocks.
   Nothing in this block leaks outside .process__page.
   ============================================================ */
.process__page {
  --prc: #005fcc;
  --prc2: #8079f8;
  --prc3: #4da3ff;
  --prh: #1c1e2b;
  --prt: #6b7089;
  --prb: #e9eaf5;
  --prbg: #f6f7fc;
  --prdark: #07152F;
  --prmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.process__page .process__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--prc);
  margin-bottom: 18px;
}
.process__page .process__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--prh); margin: 0 0 20px; }
.process__page .process__title--light { color: #fff; }
.process__page .process__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--prt); margin: 0 0 18px; }
.process__page .process__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--prt); margin: 0 0 14px; }
.process__page .process__text:last-child { margin-bottom: 0; }
.process__page .process__text strong { color: var(--prh); font-weight: 600; }
.process__page .process__text--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.process__page .process__text--muted { color: var(--prmuted); }
.process__page .process__head { max-width: 780px; }
.process__page .process__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.process__page .process__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--prc);
  margin: 48px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}
.process__page .process__btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 34px;
  border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1;
  color: #fff; background: var(--prc); border: 2px solid var(--prc); transition: all .3s ease;
}
.process__page .process__btn:hover { background: var(--prc2); border-color: var(--prc2); color: #fff; }
.process__page .process__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(0, 95, 204, .1); color: var(--prc); font-size: 21px; margin-bottom: 18px;
}

/* ---------- Hero ---------- */
.process__hero { position: relative; overflow: hidden; background: var(--prdark); padding: 190px 0 110px; }
.process__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.process__hero > .container { position: relative; z-index: 2; }
.process__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.process__hero-figure { position: relative; margin-top: 108px; }
.process__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.process__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.process__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process__hero-title { font-size: 50px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.process__hero-title .process__mark { color: var(--prc3); }
.process__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 740px; }
.process__hero-text { font-size: 16px; line-height: 1.85; color: var(--prmuted); font-weight: 300; margin: 0 0 16px; max-width: 740px; }
.process__hero-text strong { color: #fff; font-weight: 600; }
.process__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 740px; }
.process__hero-emphasis p { font-size: 22px; font-weight: 600; color: var(--prc3); margin: 0; }
.process__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Our Approach ---------- */
.process__approach { padding: 120px 0 90px; background: #fff; }
.process__approach-emphasis { max-width: 560px; margin: 10px auto 0; text-align: center; }
.process__approach-emphasis p { font-size: 20px; font-weight: 600; color: var(--prh); margin: 0 0 6px; }
.process__approach-emphasis p:last-child { color: var(--prc); margin-bottom: 0; }

/* ---------- Six Stages ---------- */
.process__stages { padding: 20px 0 110px; background: #fff; }
.process__stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
  padding: 60px 0; border-bottom: 1px solid var(--prb);
}
.process__stage:first-child { padding-top: 0; }
.process__stage:last-child { border-bottom: none; padding-bottom: 0; }
.process__stage--rev { direction: rtl; }
.process__stage--rev > * { direction: ltr; }
.process__stage-num {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--prc2); margin-bottom: 10px;
}
.process__stage-copy .process__eyebrow { margin-bottom: 10px; }
.process__goal {
  margin-top: 24px; padding: 20px 24px; border-radius: 14px; background: var(--prbg); border: 1px solid var(--prb);
}
.process__goal span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--prc); margin-bottom: 8px; }
.process__goal p { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--prh); margin: 0; }
.process__stage-block h3 { font-size: 16px; font-weight: 600; color: var(--prh); margin: 0 0 18px; }
.process__stage-block + .process__stage-block { margin-top: 34px; }
.process__stage-detail { padding: 34px 32px; border-radius: 18px; background: var(--prbg); border: 1px solid var(--prb); }
.process__check-list { list-style: none; margin: 0; padding: 0; }
.process__check-list li {
  display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 400; color: var(--prt);
  padding: 10px 0; border-bottom: 1px solid var(--prb);
}
.process__check-list li:first-child { padding-top: 0; }
.process__check-list li:last-child { border-bottom: none; padding-bottom: 0; }
.process__check-list li i { color: var(--prc); font-size: 12px; flex: 0 0 auto; }
.process__check-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.process__check-list--grid li { border-bottom: none; padding: 7px 0; }
.process__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.process__pills span {
  display: inline-block; padding: 9px 18px; border-radius: 30px; background: #fff; border: 1px solid var(--prb);
  font-size: 13.5px; font-weight: 500; color: var(--prh);
}

/* ---------- Six-Stage Journey (visual) ---------- */
.process__journey { padding: 120px 0; background: var(--prdark); position: relative; overflow: hidden; }
.process__journey::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 8% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 96% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.process__journey > .container { position: relative; z-index: 1; }
.process__journey-track { display: flex; align-items: stretch; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 46px; }
.process__journey-node {
  flex: 1 1 150px; max-width: 175px; padding: 26px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  transition: all .35s ease;
}
.process__journey-node:hover { background: rgba(255, 255, 255, .08); border-color: var(--prc3); transform: translateY(-4px); }
.process__journey-node span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--prc3); margin-bottom: 10px; }
.process__journey-node strong { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.process__journey-node p { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--prmuted); margin: 0; }
.process__journey-arrow { display: flex; align-items: center; justify-content: center; color: var(--prc3); font-size: 14px; flex: 0 0 auto; }
.process__journey-emphasis { max-width: 620px; margin: 0 auto; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.process__journey-emphasis p { font-size: 22px; font-weight: 500; color: #fff; line-height: 1.5; margin: 0 0 8px; }
.process__journey-emphasis p:last-child { margin-bottom: 0; color: var(--prc3); }

/* ---------- How We Work (principles) ---------- */
.process__principles { padding: 130px 0; background: #fff; }
.process__principle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.process__principle-card { padding: 36px 34px; border-radius: 18px; background: var(--prbg); border: 1px solid var(--prb); transition: all .35s ease; }
.process__principle-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.process__principle-card h3 { font-size: 20px; font-weight: 600; color: var(--prh); margin: 0 0 6px; }
.process__principle-tag { font-size: 14px; font-weight: 600; color: var(--prc); margin: 0 0 14px; }
.process__principle-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--prt); margin: 0; }

/* ---------- Flexible by Design ---------- */
.process__flexible { padding: 110px 0; background: var(--prbg); }
.process__flexible .process__head { margin: 0 auto; text-align: center; }
.process__flexible-emphasis { max-width: 560px; margin: 10px auto 0; text-align: center; }
.process__flexible-emphasis p { font-size: 20px; font-weight: 600; color: var(--prh); margin: 0 0 6px; }
.process__flexible-emphasis p:last-child { color: var(--prc); margin-bottom: 0; }

/* ---------- Different Starting Points ---------- */
.process__starting { padding: 130px 0; background: #fff; }
.process__starting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.process__starting-card { padding: 30px 26px; border-radius: 16px; background: var(--prbg); border: 1px solid var(--prb); transition: all .35s ease; }
.process__starting-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.process__starting-card h3 { font-size: 17px; font-weight: 600; color: var(--prc); margin: 0 0 10px; }
.process__starting-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--prt); margin: 0; }

/* ---------- Communication ---------- */
.process__comms { padding: 130px 0; background: var(--prdark); position: relative; overflow: hidden; }
.process__comms::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.process__comms > .container { position: relative; z-index: 1; }
.process__comms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.process__comms-list { list-style: none; margin: 0; padding: 0; }
.process__comms-list li {
  display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 400; color: #fff;
  padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.process__comms-list li:first-child { padding-top: 0; }
.process__comms-list li:last-child { border-bottom: none; padding-bottom: 0; }
.process__comms-list li i { color: var(--prc3); font-size: 13px; flex: 0 0 auto; }

/* ---------- Quality ---------- */
.process__quality { padding: 130px 0; background: #fff; }
.process__quality-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0 0 10px; }
.process__quality-card {
  padding: 20px 30px; border-radius: 14px; background: var(--prbg); border: 1px solid var(--prb);
  font-size: 15.5px; font-weight: 600; color: var(--prh);
}

/* ---------- After Launch (cycle) ---------- */
.process__cycle { padding: 130px 0; background: var(--prbg); }
.process__flow { display: flex; align-items: stretch; justify-content: center; gap: 18px; flex-wrap: wrap; }
.process__flow-step {
  flex: 1 1 140px; max-width: 170px; text-align: center; padding: 26px 20px;
  border-radius: 16px; background: #fff; border: 1px solid var(--prb);
  transition: transform .35s ease, box-shadow .35s ease;
}
.process__flow-step:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.process__flow-step p { font-size: 15.5px; font-weight: 600; color: var(--prh); margin: 0; }
.process__flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--prc); font-size: 16px; flex: 0 0 auto; }

/* ---------- Continue exploring (internal links) ---------- */
.process__more { padding: 90px 0 40px; background: #fff; }
.process__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.process__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--prb); font-size: 13.5px; font-weight: 500; color: var(--prt); transition: all .3s ease; }
.process__more-chip:hover { color: var(--prc); border-color: var(--prc); background: var(--prbg); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.process__final-emphasis { max-width: 640px; margin: 0 auto 30px; }
.process__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--prh); line-height: 1.5; margin: 0; }
.process__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .process__page .process__title { font-size: 30px; }
  .process__hero-title { font-size: 40px; }
  .process__hero { padding: 170px 0 90px; }
  .process__hero-grid { gap: 44px; }
  .process__hero-frame { aspect-ratio: 16 / 9; }
  .process__approach, .process__principles, .process__starting, .process__comms,
  .process__quality, .process__journey, .process__cycle { padding: 100px 0; }
  .process__stage { grid-template-columns: 1fr; gap: 34px; }
  .process__stage--rev { direction: ltr; }
  .process__starting-grid { grid-template-columns: repeat(2, 1fr); }
  .process__comms-grid { grid-template-columns: 1fr; gap: 40px; }
  .process__check-list--grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 991px) {
  .process__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .process__hero-figure { margin-top: 0; }
  .process__principle-grid { grid-template-columns: 1fr; }
  .process__journey-track { flex-direction: column; align-items: stretch; }
  .process__journey-arrow { transform: rotate(90deg); }
  .process__journey-node { max-width: none; }
  .process__flow { flex-direction: column; align-items: stretch; }
  .process__flow-step { max-width: none; }
  .process__flow-arrow { transform: rotate(90deg); }
}
@media only screen and (max-width: 767px) {
  .process__page .process__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .process__page .process__title { font-size: 25px; }
  .process__page .process__btn { padding: 15px 26px; font-size: 15px; }
  .process__hero { padding: 150px 0 70px; }
  .process__hero-title { font-size: 28px; }
  .process__hero-lead { font-size: 17px; }
  .process__approach, .process__principles, .process__starting, .process__comms,
  .process__quality, .process__journey, .process__cycle, .process__stages { padding: 80px 0; }
  .process__starting-grid { grid-template-columns: 1fr; }
  .process__stage-detail { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .process__page .process__journey-node,
  .process__page .process__principle-card,
  .process__page .process__starting-card,
  .process__page .process__flow-step,
  .process__page .process__btn,
  .process__page .process__more-chip { transition: none !important; }
  .process__page .process__journey-node:hover,
  .process__page .process__principle-card:hover,
  .process__page .process__starting-card:hover,
  .process__page .process__flow-step:hover { transform: none !important; }
}

/* ============================================================
   ENGAGEMENT MODELS PAGE (engage__*)
   Scoped entirely to .engage__page (added on <main> of engagement-models.html).
   Follows the shared page-module pattern used by .why__page / .lead__page /
   .process__page. Nothing in this block leaks outside .engage__page.
   ============================================================ */
.engage__page {
  --egc: #005fcc;
  --egc2: #8079f8;
  --egc3: #4da3ff;
  --egh: #1c1e2b;
  --egt: #6b7089;
  --egb: #e9eaf5;
  --egbg: #f6f7fc;
  --egdark: #07152F;
  --egmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.engage__page .engage__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--egc);
  margin-bottom: 18px;
}
.engage__page .engage__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--egh); margin: 0 0 20px; }
.engage__page .engage__title--light { color: #fff; }
.engage__page .engage__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--egt); margin: 0 0 18px; }
.engage__page .engage__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--egt); margin: 0 0 14px; }
.engage__page .engage__text:last-child { margin-bottom: 0; }
.engage__page .engage__text strong { color: var(--egh); font-weight: 600; }
.engage__page .engage__text--muted { color: var(--egmuted); }
.engage__page .engage__head { max-width: 780px; }
.engage__page .engage__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.engage__page .engage__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--egc);
  margin: 40px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}
.engage__page .engage__pivot--light { color: var(--egc3); border-top-color: rgba(255, 255, 255, .16); }
.engage__page .engage__btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 34px;
  border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1;
  color: #fff; background: var(--egc); border: 2px solid var(--egc); transition: all .3s ease;
}
.engage__page .engage__btn:hover { background: var(--egc2); border-color: var(--egc2); color: #fff; }
.engage__page .engage__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(0, 95, 204, .1); color: var(--egc); font-size: 21px; margin-bottom: 18px;
}

/* ---------- Hero ---------- */
.engage__hero { position: relative; overflow: hidden; background: var(--egdark); padding: 190px 0 110px; }
.engage__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.engage__hero > .container { position: relative; z-index: 2; }
.engage__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.engage__hero-figure { position: relative; margin-top: 108px; }
.engage__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.engage__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.engage__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.engage__hero-title { font-size: 50px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.engage__hero-title .engage__mark { color: var(--egc3); }
.engage__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 740px; }
.engage__hero-text { font-size: 16px; line-height: 1.85; color: var(--egmuted); font-weight: 300; margin: 0 0 16px; max-width: 740px; }
.engage__hero-text strong { color: #fff; font-weight: 600; }
.engage__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 740px; }
.engage__hero-emphasis p { font-size: 22px; font-weight: 600; color: var(--egc3); margin: 0; }
.engage__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Our Approach ---------- */
.engage__approach { padding: 120px 0 90px; background: #fff; }

/* ---------- Six Engagement Models ---------- */
.engage__models { padding: 20px 0 110px; background: #fff; }
.engage__model {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
  padding: 60px 0; border-bottom: 1px solid var(--egb);
}
.engage__model:first-child { padding-top: 0; }
.engage__model:last-child { border-bottom: none; padding-bottom: 0; }
.engage__model--rev { direction: rtl; }
.engage__model--rev > * { direction: ltr; }
.engage__model-num {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--egc2); margin-bottom: 10px;
}
.engage__model-copy .engage__eyebrow { margin-bottom: 10px; }
.engage__goal {
  margin-top: 24px; padding: 20px 24px; border-radius: 14px; background: var(--egbg); border: 1px solid var(--egb);
}
.engage__goal span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--egc); margin-bottom: 8px; }
.engage__goal p { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--egh); margin: 0; }
.engage__goal--split { background: transparent; border: none; padding: 26px 0 0; margin-top: 26px; border-top: 1px solid var(--egb); }
.engage__goal--split p { font-size: 16px; font-weight: 600; color: var(--egh); margin: 0 0 6px; }
.engage__goal--split p:last-child { color: var(--egc); margin-bottom: 0; }
.engage__model-block h3 { font-size: 16px; font-weight: 600; color: var(--egh); margin: 0 0 18px; }
.engage__model-block + .engage__model-block { margin-top: 34px; }
.engage__model-detail { padding: 34px 32px; border-radius: 18px; background: var(--egbg); border: 1px solid var(--egb); }
.engage__check-list { list-style: none; margin: 0; padding: 0; }
.engage__check-list li {
  display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 400; color: var(--egt);
  padding: 10px 0; border-bottom: 1px solid var(--egb);
}
.engage__check-list li:first-child { padding-top: 0; }
.engage__check-list li:last-child { border-bottom: none; padding-bottom: 0; }
.engage__check-list li i { color: var(--egc); font-size: 12px; flex: 0 0 auto; }
.engage__check-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.engage__check-list--grid li { border-bottom: none; padding: 7px 0; }
.engage__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.engage__pills span {
  display: inline-block; padding: 9px 18px; border-radius: 30px; background: #fff; border: 1px solid var(--egb);
  font-size: 13.5px; font-weight: 500; color: var(--egh);
}

/* Title/detail tiles used for "What we can support" / "Add capabilities" / "Our role" */
.engage__tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.engage__tile { padding: 22px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--egb); }
.engage__tile h4 { font-size: 15px; font-weight: 600; color: var(--egc); margin: 0 0 8px; }
.engage__tile p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--egt); margin: 0; }

/* Flow chain, reused for "A possible journey" (model 06) and "Scaling the Engagement" */
.engage__flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: wrap; }
.engage__flow-step {
  flex: 1 1 170px; max-width: 210px; text-align: center; padding: 24px 20px;
  border-radius: 16px; background: #fff; border: 1px solid var(--egb);
  transition: transform .35s ease, box-shadow .35s ease;
}
.engage__flow-step:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.engage__flow-step h4 { font-size: 15.5px; font-weight: 600; color: var(--egh); margin: 0 0 8px; }
.engage__flow-step p { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--egt); margin: 0; }
.engage__flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--egc); font-size: 16px; flex: 0 0 auto; }

/* ---------- Find the Right Model ---------- */
.engage__match { padding: 130px 0; background: var(--egbg); }
.engage__match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.engage__match-card { padding: 30px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--egb); transition: all .35s ease; }
.engage__match-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.engage__match-q { font-size: 16px; font-weight: 500; font-style: italic; color: var(--egh); margin: 0 0 16px; line-height: 1.5; }
.engage__match-tag {
  display: inline-block; padding: 7px 16px; border-radius: 30px; background: rgba(0, 95, 204, .1);
  color: var(--egc); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; margin-bottom: 14px;
}
.engage__match-a { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--egt); margin: 0; }

/* ---------- What Stays Consistent ---------- */
.engage__consistent { padding: 130px 0; background: #fff; }
.engage__consistent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.engage__principle-card { padding: 34px 30px; border-radius: 18px; background: var(--egbg); border: 1px solid var(--egb); transition: all .35s ease; }
.engage__principle-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.engage__principle-card h3 { font-size: 18px; font-weight: 600; color: var(--egh); margin: 0 0 10px; }
.engage__principle-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--egt); margin: 0; }

/* ---------- Scaling the Engagement ---------- */
.engage__scaling { padding: 130px 0; background: var(--egdark); position: relative; overflow: hidden; }
.engage__scaling::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.engage__scaling > .container { position: relative; z-index: 1; }
.engage__scaling .engage__flow-step { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.engage__scaling .engage__flow-step:hover { background: rgba(255, 255, 255, .08); border-color: var(--egc3); }
.engage__scaling .engage__flow-step h4 { color: #fff; }
.engage__scaling .engage__flow-step p { color: var(--egmuted); }
.engage__scaling .engage__flow-arrow { color: var(--egc3); }

/* ---------- Audiences (startups / enterprises / product companies) ---------- */
.engage__audiences { padding: 130px 0 70px; background: #fff; }
.engage__audience { max-width: 820px; margin: 0 auto; padding: 0 0 60px; border-bottom: 1px solid var(--egb); margin-bottom: 60px; }
.engage__audience--last { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.engage__lifecycle { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.engage__lifecycle span {
  padding: 10px 18px; border-radius: 30px; background: var(--egbg); border: 1px solid var(--egb);
  font-size: 13.5px; font-weight: 600; color: var(--egh);
}
.engage__lifecycle i { color: var(--egc); font-size: 12px; flex: 0 0 auto; }

/* ---------- Our Engagement Philosophy ---------- */
.engage__philosophy { padding: 130px 0; background: var(--egbg); }
.engage__philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.engage__philosophy .engage__check-list li { background: #fff; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--egb); margin-bottom: 10px; }
.engage__philosophy .engage__check-list li:last-child { margin-bottom: 0; }
.engage__philosophy-emphasis { max-width: 560px; margin: 50px auto 0; text-align: center; padding-top: 40px; border-top: 1px solid var(--egb); }
.engage__philosophy-emphasis p { font-size: 21px; font-weight: 600; color: var(--egh); margin: 0 0 8px; }
.engage__philosophy-emphasis p:last-child { color: var(--egc); margin-bottom: 0; }

/* ---------- Continue exploring (internal links) ---------- */
.engage__more { padding: 90px 0 40px; background: #fff; }
.engage__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.engage__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--egb); font-size: 13.5px; font-weight: 500; color: var(--egt); transition: all .3s ease; }
.engage__more-chip:hover { color: var(--egc); border-color: var(--egc); background: var(--egbg); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.engage__final-emphasis { max-width: 640px; margin: 0 auto 30px; }
.engage__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--egh); line-height: 1.5; margin: 0; }
.engage__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .engage__page .engage__title { font-size: 30px; }
  .engage__hero-title { font-size: 40px; }
  .engage__hero { padding: 170px 0 90px; }
  .engage__hero-grid { gap: 44px; }
  .engage__hero-frame { aspect-ratio: 16 / 9; }
  .engage__approach, .engage__consistent, .engage__match, .engage__philosophy,
  .engage__scaling, .engage__audiences { padding: 100px 0; }
  .engage__model { grid-template-columns: 1fr; gap: 34px; }
  .engage__model--rev { direction: ltr; }
  .engage__philosophy-grid { grid-template-columns: 1fr; gap: 40px; }
  .engage__consistent-grid { grid-template-columns: repeat(2, 1fr); }
  .engage__check-list--grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 991px) {
  .engage__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .engage__hero-figure { margin-top: 0; }
  .engage__consistent-grid { grid-template-columns: 1fr; }
  .engage__flow { flex-direction: column; align-items: stretch; }
  .engage__flow-step { max-width: none; }
  .engage__flow-arrow { transform: rotate(90deg); }
}
@media only screen and (max-width: 767px) {
  .engage__page .engage__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .engage__page .engage__title { font-size: 25px; }
  .engage__page .engage__btn { padding: 15px 26px; font-size: 15px; }
  .engage__hero { padding: 150px 0 70px; }
  .engage__hero-title { font-size: 28px; }
  .engage__hero-lead { font-size: 17px; }
  .engage__approach, .engage__consistent, .engage__match, .engage__philosophy,
  .engage__scaling, .engage__audiences, .engage__models { padding: 80px 0; }
  .engage__model-detail { padding: 26px 22px; }
  .engage__lifecycle { flex-direction: column; align-items: flex-start; }
  .engage__lifecycle i { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .engage__page .engage__flow-step,
  .engage__page .engage__match-card,
  .engage__page .engage__principle-card,
  .engage__page .engage__btn,
  .engage__page .engage__more-chip { transition: none !important; }
  .engage__page .engage__flow-step:hover,
  .engage__page .engage__match-card:hover,
  .engage__page .engage__principle-card:hover { transform: none !important; }
}

/* ============================================================
   DATA SECURITY & COMPLIANCE PAGE (security__*)
   Scoped entirely to .security__page (added on <main> of
   data-security-compliance.html). Follows the shared page-module
   pattern used by .why__page / .lead__page / .process__page /
   .engage__page. Nothing in this block leaks outside .security__page.
   ============================================================ */
.security__page {
  --sec-c: #005fcc;
  --sec-c2: #8079f8;
  --sec-c3: #4da3ff;
  --sec-h: #1c1e2b;
  --sec-t: #6b7089;
  --sec-b: #e9eaf5;
  --sec-bg: #f6f7fc;
  --sec-dark: #07152F;
  --sec-muted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.security__page .security__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sec-c);
  margin-bottom: 18px;
}
.security__page .security__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--sec-h); margin: 0 0 20px; }
.security__page .security__title--light { color: #fff; }
.security__page .security__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--sec-t); margin: 0 0 18px; }
.security__page .security__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--sec-t); margin: 0 0 14px; }
.security__page .security__text:last-child { margin-bottom: 0; }
.security__page .security__text strong { color: var(--sec-h); font-weight: 600; }
.security__page .security__text--muted { color: var(--sec-muted); }
.security__page .security__head { max-width: 780px; }
.security__page .security__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.security__page .security__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--sec-c);
  margin: 48px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 680px;
}
.security__page .security__pivot--light { color: var(--sec-c3); border-top-color: rgba(255, 255, 255, .16); }
.security__page .security__btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 34px;
  border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1;
  color: #fff; background: var(--sec-c); border: 2px solid var(--sec-c); transition: all .3s ease;
}
.security__page .security__btn:hover { background: var(--sec-c2); border-color: var(--sec-c2); color: #fff; }
.security__page .security__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(0, 95, 204, .1); color: var(--sec-c); font-size: 20px; margin-bottom: 18px;
}

/* ---------- Hero ---------- */
.security__hero { position: relative; overflow: hidden; background: var(--sec-dark); padding: 190px 0 110px; }
.security__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.security__hero > .container { position: relative; z-index: 2; }
.security__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.security__hero-figure { position: relative; margin-top: 108px; }
.security__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.security__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.security__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.security__hero-title { font-size: 50px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.security__hero-title .security__mark { color: var(--sec-c3); }
.security__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 740px; }
.security__hero-text { font-size: 16px; line-height: 1.85; color: var(--sec-muted); font-weight: 300; margin: 0 0 16px; max-width: 740px; }
.security__hero-text strong { color: #fff; font-weight: 600; }
.security__hero-points { list-style: none; margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 740px; }
.security__hero-points li { font-size: 21px; font-weight: 600; color: var(--sec-c3); margin: 0 0 8px; }
.security__hero-points li:last-child { margin-bottom: 0; }
.security__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Our Security Approach (6-step grid) ---------- */
.security__approach { padding: 120px 0 110px; background: #fff; }
.security__approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 20px; }
.security__approach-card { padding: 30px 26px; border-radius: 16px; background: var(--sec-bg); border: 1px solid var(--sec-b); transition: all .35s ease; }
.security__approach-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.security__approach-card h3 { font-size: 17px; font-weight: 600; color: var(--sec-h); margin: 0 0 8px; }
.security__approach-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--sec-t); margin: 0; }

/* ---------- Generic tinted section wrapper ---------- */
.security__section { padding: 130px 0; background: #fff; }
.security__section--tint { background: var(--sec-bg); }

/* ---------- Check list (+ 2-col grid variant) ---------- */
.security__check-list { list-style: none; margin: 0; padding: 0; }
.security__check-list li {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--sec-b); font-size: 15.5px; font-weight: 400; color: var(--sec-t); line-height: 1.6;
}
.security__check-list li:first-child { padding-top: 0; }
.security__check-list li:last-child { border-bottom: none; padding-bottom: 0; }
.security__check-list li i { color: var(--sec-c); font-size: 12px; flex: 0 0 auto; margin-top: 5px; }
.security__check-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.security__check-list--grid li { border-bottom: none; padding: 8px 0; }
.security__check-list--light li { color: var(--sec-muted); border-bottom-color: rgba(255, 255, 255, .12); }
.security__check-list--light li i { color: var(--sec-c3); }

/* ---------- Objective callout (data protection) ---------- */
.security__objective { max-width: 720px; margin: 44px auto 0; padding: 34px 40px; border-radius: 18px; background: var(--sec-dark); text-align: center; }
.security__objective span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sec-c3); margin-bottom: 10px; }
.security__objective p { font-size: 19px; font-weight: 500; line-height: 1.55; color: #fff; margin: 0; }
.security__objective p strong { font-weight: 700; color: #fff; }

/* ---------- Feature grid (icon cards) ---------- */
.security__feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.security__feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.security__feature-card { padding: 28px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--sec-b); transition: all .35s ease; }
.security__feature-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.security__feature-card h3 { font-size: 16px; font-weight: 600; color: var(--sec-h); margin: 0 0 8px; }
.security__feature-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--sec-t); margin: 0; }
.security__section--tint .security__feature-card,
.security__dark-panel .security__feature-card { background: #fff; }

/* ---------- Match card (question / answer, access control) ---------- */
.security__match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.security__match-card { padding: 30px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--sec-b); transition: all .35s ease; }
.security__match-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.security__match-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sec-c); background: rgba(0, 95, 204, .08); padding: 6px 12px; border-radius: 30px; margin-bottom: 14px;
}
.security__match-q { font-size: 16px; font-weight: 500; font-style: italic; color: var(--sec-h); margin: 0; line-height: 1.5; }

/* ---------- Pills (compliance factors) ---------- */
.security__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.security__pills span {
  padding: 10px 20px; border-radius: 30px; background: var(--sec-bg); border: 1px solid var(--sec-b);
  font-size: 13.5px; font-weight: 600; color: var(--sec-h);
}

/* ---------- Dark panel utility (cloud/infra, AI, shared responsibility) ---------- */
.security__dark-panel { position: relative; overflow: hidden; background: var(--sec-dark); padding: 130px 0; }
.security__dark-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.security__dark-panel > .container { position: relative; z-index: 1; }

/* ---------- Technology lifecycle (vertical numbered stages) ---------- */
.security__lifecycle { max-width: 760px; margin: 0 auto; }
.security__lifecycle-step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 26px 0; }
.security__lifecycle-num {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--sec-bg); border: 1px solid var(--sec-b); font-size: 16px; font-weight: 700; color: var(--sec-c);
}
.security__lifecycle-step h3 { font-size: 18px; font-weight: 600; color: var(--sec-h); margin: 0 0 6px; }
.security__lifecycle-step p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--sec-t); margin: 0; }
.security__lifecycle-arrow { display: flex; justify-content: center; padding-left: 0; color: var(--sec-c); font-size: 14px; }
.security__lifecycle-arrow span { width: 38px; display: flex; justify-content: center; }

/* ---------- Continuous improvement (staccato lines) ---------- */
.security__lines { max-width: 640px; margin: 0 auto; text-align: center; }
.security__lines p { font-size: 16.5px; font-weight: 400; color: var(--sec-t); line-height: 1.9; margin: 0 0 4px; }
.security__lines p strong { color: var(--sec-h); font-weight: 600; }

/* ---------- Note box (important compliance note) ---------- */
.security__note { max-width: 760px; margin: 0 auto; padding: 44px 48px; border-radius: 20px; background: var(--sec-bg); border: 1px solid var(--sec-b); text-align: center; }
.security__note .security__ico { margin: 0 auto 18px; }

/* ---------- Continue exploring (internal links) ---------- */
.security__more { padding: 90px 0 40px; background: #fff; }
.security__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.security__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--sec-b); font-size: 13.5px; font-weight: 500; color: var(--sec-t); transition: all .3s ease; }
.security__more-chip:hover { color: var(--sec-c); border-color: var(--sec-c); background: var(--sec-bg); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.security__final-emphasis { max-width: 640px; margin: 0 auto 30px; }
.security__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--sec-h); line-height: 1.5; margin: 0; }
.security__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media (max-width: 1200px) {
  .security__feature-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .security__page .security__title { font-size: 30px; }
  .security__hero-title { font-size: 40px; }
  .security__hero { padding: 170px 0 90px; }
  .security__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .security__hero-figure { margin-top: 0; }
  .security__hero-frame { aspect-ratio: 16 / 9; }
  .security__approach, .security__section, .security__dark-panel, .security__more { padding: 100px 0; }
  .security__approach-grid { grid-template-columns: repeat(2, 1fr); }
  .security__feature-grid, .security__feature-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .security__check-list--grid { grid-template-columns: 1fr; }
  .security__lifecycle-step { grid-template-columns: 52px 1fr; gap: 18px; }
  .security__lifecycle-num { width: 52px; height: 52px; font-size: 14px; }
  .security__lifecycle-arrow span { width: 52px; }
  .security__objective { padding: 30px 28px; }
  .security__note { padding: 36px 30px; }
}

@media (max-width: 767px) {
  .security__page .security__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .security__page .security__title { font-size: 25px; }
  .security__page .security__btn { padding: 15px 26px; font-size: 15px; }
  .security__hero { padding: 150px 0 70px; }
  .security__hero-title { font-size: 28px; }
  .security__hero-lead { font-size: 17px; }
  .security__approach, .security__section, .security__dark-panel, .security__more { padding: 80px 0; }
  .security__approach-grid { grid-template-columns: 1fr; }
  .security__feature-grid, .security__feature-grid--3 { grid-template-columns: 1fr; }
  .security__match-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .security__page .security__approach-card,
  .security__page .security__feature-card,
  .security__page .security__match-card,
  .security__page .security__btn,
  .security__page .security__more-chip { transition: none !important; }
  .security__page .security__approach-card:hover,
  .security__page .security__feature-card:hover,
  .security__page .security__match-card:hover { transform: none !important; }
}

/* ============================================================
   PARTNERSHIPS PAGE (prt__*)
   Scoped entirely to .prt__page (added on <main> of
   partnerships.html). Follows the shared page-module pattern
   used by .why__page / .lead__page / .process__page /
   .engage__page / .security__page. Nothing in this block leaks
   outside .prt__page.
   ============================================================ */
.prt__page {
  --prt-c: #005fcc;
  --prt-c2: #8079f8;
  --prt-c3: #4da3ff;
  --prt-h: #1c1e2b;
  --prt-t: #6b7089;
  --prt-b: #e9eaf5;
  --prt-bg: #f6f7fc;
  --prt-dark: #07152F;
  --prt-muted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.prt__page .prt__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--prt-c);
  margin-bottom: 18px;
}
.prt__page .prt__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--prt-h); margin: 0 0 20px; }
.prt__page .prt__title--light { color: #fff; }
.prt__page .prt__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--prt-t); margin: 0 0 18px; }
.prt__page .prt__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--prt-t); margin: 0 0 14px; }
.prt__page .prt__text:last-child { margin-bottom: 0; }
.prt__page .prt__text strong { color: var(--prt-h); font-weight: 600; }
.prt__page .prt__text--muted { color: var(--prt-muted); }
.prt__page .prt__head { max-width: 780px; }
.prt__page .prt__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.prt__page .prt__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--prt-c);
  margin: 48px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 680px;
}
.prt__page .prt__pivot--light { color: var(--prt-c3); border-top-color: rgba(255, 255, 255, .16); }
.prt__page .prt__btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 34px;
  border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1;
  color: #fff; background: var(--prt-c); border: 2px solid var(--prt-c); transition: all .3s ease;
}
.prt__page .prt__btn:hover { background: var(--prt-c2); border-color: var(--prt-c2); color: #fff; }
.prt__page .prt__btn-outline { display: inline-flex; align-items: center; gap: 12px; padding: 15px 32px; border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1; color: var(--prt-c3); border: 2px solid rgba(255, 255, 255, .3); transition: all .3s ease; }
.prt__page .prt__btn-outline:hover { border-color: var(--prt-c3); background: rgba(255, 255, 255, .06); }
.prt__page .prt__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(0, 95, 204, .1); color: var(--prt-c); font-size: 20px; margin-bottom: 18px;
}

/* ---------- Hero ---------- */
.prt__hero { position: relative; overflow: hidden; background: var(--prt-dark); padding: 190px 0 110px; }
.prt__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.prt__hero > .container { position: relative; z-index: 2; }
.prt__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.prt__hero-figure { position: relative; margin-top: 108px; }
.prt__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.prt__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.prt__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prt__hero-title { font-size: 50px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.prt__hero-title .prt__mark { color: var(--prt-c3); }
.prt__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 760px; }
.prt__hero-text { font-size: 16px; line-height: 1.85; color: var(--prt-muted); font-weight: 300; margin: 0 0 16px; max-width: 740px; }
.prt__hero-text strong { color: #fff; font-weight: 600; }
.prt__hero-tagline { font-size: 20px; font-weight: 600; color: var(--prt-c3); margin: 24px 0 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 740px; }
.prt__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Three-question philosophy grid ---------- */
.prt__approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 20px; }
.prt__approach-card { padding: 30px 26px; border-radius: 16px; background: var(--prt-bg); border: 1px solid var(--prt-b); transition: all .35s ease; }
.prt__approach-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.prt__approach-card h3 { font-size: 17px; font-weight: 600; color: var(--prt-h); margin: 0 0 8px; }
.prt__approach-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--prt-t); margin: 0; }

/* ---------- Generic tinted section wrapper ---------- */
.prt__section { padding: 130px 0; background: #fff; }
.prt__section--tint { background: var(--prt-bg); }

/* ---------- Check list (+ grid / light variants) ---------- */
.prt__check-list { list-style: none; margin: 0; padding: 0; }
.prt__check-list li {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--prt-b); font-size: 15.5px; font-weight: 400; color: var(--prt-t); line-height: 1.6;
}
.prt__check-list li:first-child { padding-top: 0; }
.prt__check-list li:last-child { border-bottom: none; padding-bottom: 0; }
.prt__check-list li i { color: var(--prt-c); font-size: 12px; flex: 0 0 auto; margin-top: 5px; }
.prt__check-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.prt__check-list--grid li { border-bottom: none; padding: 8px 0; }
.prt__check-list--light li { color: var(--prt-muted); border-bottom-color: rgba(255, 255, 255, .12); }
.prt__check-list--light li i { color: var(--prt-c3); }

/* ---------- Pills (technology ecosystem chips) ---------- */
.prt__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.prt__pills span {
  padding: 10px 20px; border-radius: 30px; background: var(--prt-bg); border: 1px solid var(--prt-b);
  font-size: 13.5px; font-weight: 600; color: var(--prt-h);
}
.prt__pills--light span { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--prt-muted); }

/* ---------- Feature grid (icon cards: tech areas / what we bring) ---------- */
.prt__feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prt__feature-card { padding: 30px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--prt-b); transition: all .35s ease; }
.prt__feature-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.prt__feature-card h3 { font-size: 17px; font-weight: 600; color: var(--prt-h); margin: 0 0 8px; }
.prt__feature-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--prt-t); margin: 0; }
.prt__section--tint .prt__feature-card { background: #fff; }

/* ---------- Split grid (client brings / we bring) ---------- */
.prt__split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.prt__split-col { padding: 36px 34px; border-radius: 18px; background: var(--prt-bg); border: 1px solid var(--prt-b); }
.prt__split-col h3 { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--prt-c); margin: 0 0 20px; }
.prt__split-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.prt__split-tags span { padding: 10px 18px; border-radius: 30px; background: #fff; border: 1px solid var(--prt-b); font-size: 14px; font-weight: 600; color: var(--prt-h); }

/* ---------- Horizontal flow (technology journey stages) ---------- */
.prt__flow { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; gap: 0; }
.prt__flow-step { flex: 1 1 150px; max-width: 190px; text-align: center; padding: 22px 14px; }
.prt__flow-step h4 { font-size: 15px; font-weight: 600; color: var(--prt-h); margin: 0 0 8px; }
.prt__flow-step p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--prt-t); margin: 0; }
.prt__flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--prt-c); font-size: 14px; flex: 0 0 auto; padding: 0 4px; }

/* ---------- Ecosystem equation (business + tech + partners + engineering = outcomes) ---------- */
.prt__equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin: 30px 0 10px; }
.prt__equation-chip { padding: 16px 24px; border-radius: 14px; background: var(--prt-bg); border: 1px solid var(--prt-b); font-size: 15px; font-weight: 600; color: var(--prt-h); text-align: center; }
.prt__equation-op { font-size: 20px; font-weight: 600; color: var(--prt-c); }
.prt__equation-result { padding: 18px 30px; border-radius: 14px; background: var(--prt-dark); color: #fff; font-size: 16px; font-weight: 600; text-align: center; max-width: 320px; }

/* ---------- Staccato emphasis lines (commitment / innovation questions) ---------- */
.prt__lines { max-width: 640px; margin: 0 auto; text-align: center; }
.prt__lines p { font-size: 16.5px; font-weight: 400; color: var(--prt-t); line-height: 1.9; margin: 0 0 4px; }
.prt__lines p strong { color: var(--prt-h); font-weight: 600; }
.prt__lines--light p { color: var(--prt-muted); }
.prt__lines--light p strong { color: #fff; }
.prt__lines--questions p { font-size: 19px; font-weight: 600; color: var(--prt-h); }
.prt__lines--light.prt__lines--questions p { color: var(--prt-muted); }

/* ---------- Dark panel utility (for technology companies / audiences) ---------- */
.prt__dark-panel { position: relative; overflow: hidden; background: var(--prt-dark); padding: 130px 0; }
.prt__dark-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.prt__dark-panel > .container { position: relative; z-index: 1; }

/* ---------- Objective / result callout ---------- */
.prt__objective { max-width: 720px; margin: 44px auto 0; padding: 34px 40px; border-radius: 18px; background: var(--prt-dark); text-align: center; }
.prt__objective span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--prt-c3); margin-bottom: 10px; }
.prt__objective p { font-size: 19px; font-weight: 500; line-height: 1.55; color: #fff; margin: 0; }
.prt__objective p strong { font-weight: 700; color: #fff; }

/* ---------- Continue exploring (internal links) ---------- */
.prt__more { padding: 90px 0 40px; background: #fff; }
.prt__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.prt__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--prt-b); font-size: 13.5px; font-weight: 500; color: var(--prt-t); transition: all .3s ease; }
.prt__more-chip:hover { color: var(--prt-c); border-color: var(--prt-c); background: var(--prt-bg); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.prt__final-emphasis { max-width: 640px; margin: 0 auto 30px; }
.prt__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--prt-h); line-height: 1.5; margin: 0; }
.prt__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media (max-width: 1200px) {
  .prt__feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .prt__page .prt__title { font-size: 30px; }
  .prt__hero-title { font-size: 40px; }
  .prt__hero { padding: 170px 0 90px; }
  .prt__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .prt__hero-figure { margin-top: 0; }
  .prt__hero-frame { aspect-ratio: 16 / 9; }
  .prt__approach-grid, .prt__section, .prt__dark-panel, .prt__more { padding: 100px 0; }
  .prt__approach-grid { grid-template-columns: repeat(2, 1fr); }
  .prt__feature-grid { grid-template-columns: repeat(2, 1fr); }
  .prt__check-list--grid { grid-template-columns: 1fr; }
  .prt__split-grid { grid-template-columns: 1fr; gap: 24px; }
  .prt__objective, .prt__equation-result { padding: 30px 28px; }
  .prt__flow-step { flex: 1 1 130px; }
}

@media (max-width: 767px) {
  .prt__page .prt__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .prt__page .prt__title { font-size: 25px; }
  .prt__page .prt__btn, .prt__page .prt__btn-outline { padding: 15px 26px; font-size: 15px; }
  .prt__hero { padding: 150px 0 70px; }
  .prt__hero-title { font-size: 28px; }
  .prt__hero-lead { font-size: 17px; }
  .prt__approach-grid, .prt__section, .prt__dark-panel, .prt__more { padding: 80px 0; }
  .prt__approach-grid { grid-template-columns: 1fr; }
  .prt__feature-grid { grid-template-columns: 1fr; }
  .prt__flow { flex-direction: column; }
  .prt__flow-arrow { transform: rotate(90deg); padding: 4px 0; }
  .prt__flow-step { max-width: 100%; }
  .prt__equation { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .prt__page .prt__approach-card,
  .prt__page .prt__feature-card,
  .prt__page .prt__btn,
  .prt__page .prt__more-chip { transition: none !important; }
  .prt__page .prt__approach-card:hover,
  .prt__page .prt__feature-card:hover { transform: none !important; }
}

/* ============================================================
   CORPORATE SOCIAL RESPONSIBILITY PAGE (csr__*)
   Scoped entirely to .csr__page (added on <main> of
   corporate-social-responsibility.html). Follows the shared
   page-module pattern used by .abt__page / .prt__page /
   .why__page. The hero deliberately reuses the template's
   original .solution__area component (the same hero used by
   service1.html) instead of a page-specific hero. Nothing in
   this block leaks outside .csr__page.
   ============================================================ */
.csr__page {
  --csr-c: #005fcc;
  --csr-c2: #8079f8;
  --csr-c3: #4da3ff;
  --csr-h: #1c1e2b;
  --csr-t: #6b7089;
  --csr-b: #e9eaf5;
  --csr-bg: #f6f7fc;
  --csr-dark: #07152F;
  --csr-muted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Header menu-button ring (the button's decorative ::after circle is
   normally invisible against the dark heroes other Company pages use; against this
   page's light .solution__area hero it shows as a stray outline, so hide it here).
   .csr__header is added only on this page's <header>, which sits outside .csr__page
   in the markup, so this can't be scoped under .csr__page itself. ---------- */
.csr__header .menu-icon-2::after { display: none; }

/* ---------- Hero title (extends the shared .solution__area; "Corporate Social
   Responsibility" is much longer than the template's default "Digital Solution",
   so it needs a smaller scale at every breakpoint to avoid overflow/mid-word wraps) ---------- */
.csr__page .solution__title { font-size: 76px; }
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .csr__page .solution__title { font-size: 64px; }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .csr__page .solution__title { font-size: 52px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .csr__page .solution__title { font-size: 42px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .csr__page .solution__title { font-size: 34px; }
}
@media only screen and (max-width: 767px) {
  .csr__page .solution__title { font-size: 24px; }
}

/* ---------- Shared section furniture ---------- */
.csr__page .csr__eyebrow { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--csr-c); margin-bottom: 18px; }
.csr__page .csr__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--csr-h); margin: 0 0 20px; }
.csr__page .csr__title--light { color: #fff; }
.csr__page .csr__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--csr-t); margin: 0 0 18px; }
.csr__page .csr__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--csr-t); margin: 0 0 14px; }
.csr__page .csr__text:last-child { margin-bottom: 0; }
.csr__page .csr__text strong { color: var(--csr-t); font-weight: 600; }
.csr__page .csr__text--muted { color: var(--csr-muted); }
.csr__page .csr__head { max-width: 780px; }
.csr__page .csr__head--center { max-width: 960px; margin: 0 auto 56px; text-align: center; }
.csr__page .csr__pivot { text-align: center; font-size: 21px; font-weight: 600; color: var(--csr-c); margin: 48px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08); max-width: 860px; }
.csr__page .csr__pivot--light { color: var(--csr-c3); border-top-color: rgba(255, 255, 255, .16); }
.csr__page .csr__btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 34px; border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1; color: #fff; background: var(--csr-c); border: 2px solid var(--csr-c); transition: all .3s ease; }
.csr__page .csr__btn:hover { background: var(--csr-c2); border-color: var(--csr-c2); color: #fff; }
.csr__page .csr__btn-outline { display: inline-flex; align-items: center; gap: 12px; padding: 15px 32px; border-radius: 50px; font-size: 16px; font-weight: 600; line-height: 1; color: var(--csr-h); border: 2px solid var(--csr-b); transition: all .3s ease; }
.csr__page .csr__btn-outline:hover { border-color: var(--csr-c); color: var(--csr-c); }
.csr__page .csr__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(0, 95, 204, .1); color: var(--csr-c); font-size: 20px; margin-bottom: 18px; }

/* ---------- Generic section wrapper ---------- */
.csr__section { padding: 130px 0; background: #fff; }
.csr__section--tint { background: var(--csr-bg); }

/* ---------- Approach grid (philosophy questions / process steps) ---------- */
.csr__approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 20px; }
.csr__approach-grid--3 { grid-template-columns: repeat(3, 1fr); }
.csr__approach-card { position: relative; padding: 32px 28px; border-radius: 16px; background: var(--csr-bg); border: 1px solid var(--csr-b); transition: all .35s ease; }
.csr__approach-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.csr__approach-card .csr__step-num { display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--csr-c2); margin-bottom: 14px; }
.csr__approach-card h3 { font-size: 17px; font-weight: 600; color: var(--csr-h); margin: 0 0 8px; }
.csr__approach-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--csr-t); margin: 0; }

/* ---------- Feature / value grid ---------- */
.csr__feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.csr__feature-grid--5 { grid-template-columns: repeat(5, 1fr); }
.csr__feature-card { padding: 30px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--csr-b); transition: all .35s ease; }
.csr__feature-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.csr__feature-card h3 { font-size: 16.5px; font-weight: 600; color: var(--csr-h); margin: 0 0 8px; }
.csr__feature-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--csr-t); margin: 0; }
.csr__section--tint .csr__feature-card { background: #fff; }

/* ---------- Media split (photo + copy, alternating) ---------- */
.csr__media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.csr__media-split--rev .csr__media-fig { order: 2; }
.csr__media-split--rev .csr__media-copy { order: 1; }
.csr__media-fig { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(7, 21, 47, .14); }
.csr__media-fig img { display: block; width: 100%; height: 380px; object-fit: cover; }
.csr__media-copy .csr__text strong { color: inherit; font-weight: 600; }

/* ---------- Check list ---------- */
.csr__check-list { list-style: none; margin: 0; padding: 0; }
.csr__check-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--csr-b); font-size: 15.5px; font-weight: 400; color: var(--csr-t); line-height: 1.6; }
.csr__check-list li:first-child { padding-top: 0; }
.csr__check-list li:last-child { border-bottom: none; padding-bottom: 0; }
.csr__check-list li i { color: var(--csr-c); font-size: 12px; flex: 0 0 auto; margin-top: 5px; }
.csr__check-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.csr__check-list--light li { color: var(--csr-muted); border-bottom-color: rgba(255, 255, 255, .12); }
.csr__check-list--light li i { color: var(--csr-c3); }

/* ---------- Pills ---------- */
.csr__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.csr__pills span { padding: 10px 20px; border-radius: 30px; background: var(--csr-bg); border: 1px solid var(--csr-b); font-size: 13.5px; font-weight: 600; color: var(--csr-h); }
.csr__pills--light span { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--csr-muted); }

/* ---------- Dark panel ---------- */
.csr__dark-panel { position: relative; overflow: hidden; background: var(--csr-dark); padding: 130px 0; }
.csr__dark-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.csr__dark-panel > .container { position: relative; z-index: 1; }

/* ---------- Staccato emphasis lines ---------- */
.csr__lines { max-width: 820px; margin: 0 auto; text-align: center; }
.csr__lines p { font-size: 16.5px; font-weight: 400; color: var(--csr-t); line-height: 1.9; margin: 0 0 4px; }
.csr__lines p strong { color: var(--csr-h); font-weight: 600; }
.csr__lines--light p { color: var(--csr-muted); }
.csr__lines--light p strong { color: #fff; }
.csr__lines--lead p:first-child { font-size: 19px; font-weight: 600; color: #fff; }

/* ---------- Objective / measure callout ---------- */
.csr__objective { max-width: 900px; margin: 44px auto 0; padding: 34px 40px; border-radius: 18px; background: var(--csr-dark); text-align: center; }
.csr__objective span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--csr-c3); margin-bottom: 10px; }
.csr__objective p { font-size: 19px; font-weight: 500; line-height: 1.55; color: #fff; margin: 0; }

/* ---------- Gallery ---------- */
.csr__gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.csr__gallery-item { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.csr__gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.csr__gallery-item:hover img { transform: scale(1.06); }
.csr__gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; background: linear-gradient(0deg, rgba(7, 21, 47, .85), transparent); color: #fff; font-size: 13.5px; font-weight: 500; }

/* ---------- Continue exploring (internal links) ---------- */
.csr__more { padding: 90px 0 40px; background: #fff; }
.csr__more-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.csr__more-chip { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--csr-b); font-size: 13.5px; font-weight: 500; color: var(--csr-t); transition: all .3s ease; }
.csr__more-chip:hover { color: var(--csr-c); border-color: var(--csr-c); background: var(--csr-bg); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.csr__final-emphasis { max-width: 640px; margin: 0 auto 30px; }
.csr__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--csr-h); line-height: 1.5; margin: 0; }
.csr__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media (max-width: 1200px) {
  .csr__feature-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .csr__gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .csr__page .csr__title { font-size: 30px; }
  .csr__section, .csr__dark-panel, .csr__more { padding: 90px 0; }
  .csr__approach-grid, .csr__approach-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .csr__feature-grid, .csr__feature-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .csr__media-split { grid-template-columns: 1fr; gap: 30px; }
  .csr__media-split--rev .csr__media-fig, .csr__media-split--rev .csr__media-copy { order: 0; }
  .csr__media-fig img { height: 300px; }
  .csr__check-list--grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .csr__page .csr__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .csr__page .csr__title { font-size: 25px; }
  .csr__page .csr__btn, .csr__page .csr__btn-outline { padding: 15px 26px; font-size: 15px; }
  .csr__section, .csr__dark-panel, .csr__more { padding: 70px 0; }
  .csr__approach-grid, .csr__approach-grid--3, .csr__feature-grid, .csr__feature-grid--5 { grid-template-columns: 1fr; }
  .csr__gallery-grid { grid-template-columns: 1fr; }
  .csr__objective { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .csr__page .csr__approach-card,
  .csr__page .csr__feature-card,
  .csr__page .csr__btn,
  .csr__page .csr__btn-outline,
  .csr__page .csr__more-chip { transition: none !important; }
  .csr__page .csr__approach-card:hover,
  .csr__page .csr__feature-card:hover { transform: none !important; }
  .csr__page .csr__gallery-item img { transition: none !important; }
}

/* ============================================================
   COMPANY HUB PAGE (co__*)
   Scoped entirely to .co__page (added on <main> of company.html).
   Follows the shared page-module pattern used by .abt__page / .why__page
   / .lead__page etc. This page is the Company section's directory/hub,
   so sections stay compact (teaser copy + CTA) rather than the full
   long-form treatment used on the eight pages it links out to.
   Nothing in this block leaks outside .co__page.
   ============================================================ */
.co__page {
  --cc: #005fcc;
  --cc2: #8079f8;
  --cc3: #4da3ff;
  --ch: #1c1e2b;
  --ct: #6b7089;
  --cb: #e9eaf5;
  --cbg: #f6f7fc;
  --cdark: #07152F;
  --cmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.co__page .co__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cc);
  margin-bottom: 18px;
}
.co__page .co__title { font-size: 38px; line-height: 1.24; font-weight: 600; color: var(--ch); margin: 0 0 20px; }
.co__page .co__title--light { color: #fff; }
.co__page .co__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ct); margin: 0 0 18px; }
.co__page .co__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ct); margin: 0 0 14px; }
.co__page .co__text:last-child { margin-bottom: 0; }
.co__page .co__text strong { color: var(--ch); font-weight: 600; }
.co__page .co__head { max-width: 780px; }
.co__page .co__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.co__page .co__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--cc);
  margin: 44px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}

.co__page .co__btn,
.co__page .co__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.co__page .co__btn { color: #fff; background: var(--cc); border: 2px solid var(--cc); }
.co__page .co__btn:hover { background: var(--cc2); border-color: var(--cc2); color: #fff; }
.co__page .co__btn-outline { color: var(--cc); border: 2px solid var(--cc); background: transparent; }
.co__page .co__btn-outline:hover { background: var(--cc); color: #fff; }

.co__page .co__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cc);
  transition: gap .3s ease, color .3s ease;
}
.co__page .co__link:hover { gap: 15px; color: var(--cc2); }

.co__page .co__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--cc);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.co__page .co__cap-cta { text-align: center; margin-top: 40px; }

/* ---------- Hero ---------- */
.co__hero { position: relative; overflow: hidden; background: var(--cdark); padding: 190px 0 110px; }
.co__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.co__hero > .container { position: relative; z-index: 2; }
.co__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.co__hero-figure { position: relative; margin-top: 108px; }
.co__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.co__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.co__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co__hero-title { font-size: 52px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.co__hero-title .co__mark { color: var(--cc3); }
.co__hero-lead { font-size: 19px; line-height: 1.6; color: #e6ecfa; font-weight: 500; margin: 0 0 16px; max-width: 640px; }
.co__hero-text { font-size: 16px; line-height: 1.85; color: var(--cmuted); font-weight: 300; margin: 0 0 16px; max-width: 640px; }
.co__hero-text strong { color: #fff; font-weight: 600; }
.co__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 640px; }
.co__hero-emphasis p { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.co__hero-emphasis p:last-child { color: var(--cc3); margin-bottom: 0; }
.co__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }
.co__hero .co__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.co__hero .co__btn-outline:hover { background: #fff; border-color: #fff; color: var(--cdark); }

/* ---------- 01. Who We Are ---------- */
.co__overview { padding: 130px 0 100px; background: #fff; }
.co__overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.co__overview-emphasis { margin: 30px auto 0; text-align: center; max-width: 560px; padding-top: 30px; border-top: 1px solid var(--cb); }
.co__overview-emphasis p { font-size: 19px; font-weight: 600; color: var(--ch); margin: 0 0 6px; }
.co__overview-emphasis p:last-child { color: var(--cc); margin-bottom: 0; }

/* Who We Are - rocket launch illustration (rendered PNG asset) */
.co__launch { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
.co__launch-stage {
  position: relative;
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.co__launch.is-inview .co__launch-stage { opacity: 1; transform: translateY(0); }

.co__launch-shadow {
  position: absolute; left: 50%; bottom: 4%; z-index: 0; width: 55%; height: 20px;
  background: radial-gradient(closest-side, rgba(0, 64, 160, .28), transparent 72%); filter: blur(6px);
  animation: co-shadow 3.6s ease-in-out infinite;
}
.co__launch-bob { position: relative; z-index: 2; animation: co-float 3.6s ease-in-out infinite; transform-origin: 50% 85%; }
.co__launch-img { position: relative; z-index: 2; width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 26px rgba(0, 64, 160, .25)); }

.co__launch-flame-glow {
  position: absolute; z-index: 1; left: 50%; top: 57%; width: 40%; height: 26%;
  transform: translate(-50%, 0) scale(.9);
  background: radial-gradient(closest-side, rgba(94, 234, 255, .65), transparent 72%);
  filter: blur(9px); opacity: .6;
  animation: co-thrust 1.1s ease-in-out infinite;
}
.co__launch-spark {
  position: absolute; z-index: 1; left: 50%; top: 60%; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #eafcff 0%, rgba(94, 234, 255, .7) 55%, transparent 75%);
  opacity: 0; animation: co-spark 1.8s ease-out infinite;
}
.co__launch-spark--1 { margin-left: -10px; animation-delay: 0s; }
.co__launch-spark--2 { margin-left: 4px; animation-delay: .6s; }
.co__launch-spark--3 { margin-left: -3px; animation-delay: 1.2s; }

@keyframes co-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-1.5deg); }
}
@keyframes co-shadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .85; }
  50% { transform: translateX(-50%) scale(.8); opacity: .5; }
}
@keyframes co-thrust {
  0%, 100% { transform: translate(-50%, 0) scale(.85); opacity: .5; }
  50% { transform: translate(-50%, 0) scale(1.2); opacity: .9; }
}
@keyframes co-spark {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: translateY(38px) scale(1.3); opacity: 0; }
}

/* Orbiting capability nodes - a tilted, perspective ellipse like a planet's
   ring: each node travels the same elliptical path (offset in time so the
   four stay evenly spaced) and grows/rises in front of the rocket on the
   near half of the orbit, then shrinks and drops behind it on the far half. */
.co__launch-orbit {
  position: absolute; inset: 0; pointer-events: none;
  --rx: 270px; --ry: 98px; --rx2: 160px; --ry2: 58px;
}
.co__launch-orbit-path {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px dashed rgba(0, 95, 204, .22);
}
.co__launch-orbit-path--outer { width: calc(var(--rx) * 2); height: calc(var(--ry) * 2); }
.co__launch-orbit-path--inner { width: calc(var(--rx2) * 2); height: calc(var(--ry2) * 2); border-color: rgba(0, 95, 204, .3); }
.co__launch-node {
  position: absolute; left: 50%; top: 50%;
  animation: co-orbit-ellipse 32s linear infinite;
}
.co__launch-node--inner { --rx: var(--rx2); --ry: var(--ry2); animation-duration: 22s; }
.co__launch-node-badge {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow:
    inset -5px -6px 10px rgba(0, 0, 0, .22),
    inset 3px 3px 6px rgba(255, 255, 255, .7),
    0 12px 22px rgba(28, 30, 43, .22);
}
.co__launch-node--amber .co__launch-node-badge { background: radial-gradient(circle at 30% 25%, #fff 0%, #ffe4ad 32%, #f7ad2b 68%, #dc8a06 100%); color: #7a4a03; }
.co__launch-node--purple .co__launch-node-badge { background: radial-gradient(circle at 30% 25%, #fff 0%, #e4d6fb 32%, #9868ef 68%, #6c2fd6 100%); color: #3f1f80; }
.co__launch-node--teal .co__launch-node-badge { background: radial-gradient(circle at 30% 25%, #fff 0%, #c9f5e5 32%, #29c790 68%, #0d9c6c 100%); color: #075f43; }
.co__launch-node--blue .co__launch-node-badge { background: radial-gradient(circle at 30% 25%, #fff 0%, #cfe4fb 32%, #348ce0 68%, #0053b8 100%); color: #003666; }

/* Tiny plain glass spheres decorating the inner ring - no icon, just a glossy dot */
.co__launch-node--dot {
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow:
    inset -2px -3px 4px rgba(0, 0, 0, .28),
    inset 1.5px 1.5px 3px rgba(255, 255, 255, .85),
    0 6px 12px rgba(28, 30, 43, .2);
}
.co__launch-node--dot.co__launch-node--gold { background: radial-gradient(circle at 30% 25%, #fff6d8 0%, #ffd35c 35%, #f2a90d 70%, #b97400 100%); }
.co__launch-node--dot.co__launch-node--sky { background: radial-gradient(circle at 30% 25%, #eaf6ff 0%, #9fd7ff 35%, #3fa9f5 70%, #0a6fc2 100%); }

/* Static fallback positions (spread around the ellipse), used only when the
   orbit animation is turned off below. */
.co__launch-node--amber { transform: translate(-50%, -50%) translate(calc(var(--rx) * .707), calc(var(--ry) * .707)) scale(1.08); z-index: 3; }
.co__launch-node--purple { transform: translate(-50%, -50%) translate(calc(var(--rx) * -.707), calc(var(--ry) * .707)) scale(1.08); z-index: 3; }
.co__launch-node--teal { transform: translate(-50%, -50%) translate(calc(var(--rx) * -.707), calc(var(--ry) * -.707)) scale(.82); z-index: 1; }
.co__launch-node--blue { transform: translate(-50%, -50%) translate(calc(var(--rx) * .707), calc(var(--ry) * -.707)) scale(.82); z-index: 1; }
.co__launch-node--gold { transform: translate(-50%, -50%) translate(0, var(--ry)) scale(1.1); z-index: 3; }
.co__launch-node--sky { transform: translate(-50%, -50%) translate(0, calc(var(--ry) * -1)) scale(.75); z-index: 1; }

@keyframes co-orbit-ellipse {
  0%    { transform: translate(-50%, -50%) translate(var(--rx), 0) scale(.95);                                        z-index: 3; opacity: .92; }
  12.5% { transform: translate(-50%, -50%) translate(calc(var(--rx) * .707), calc(var(--ry) * .707)) scale(1.08);     z-index: 3; opacity: 1; }
  25%   { transform: translate(-50%, -50%) translate(0, var(--ry)) scale(1.16);                                       z-index: 3; opacity: 1; }
  37.5% { transform: translate(-50%, -50%) translate(calc(var(--rx) * -.707), calc(var(--ry) * .707)) scale(1.08);    z-index: 3; opacity: 1; }
  50%   { transform: translate(-50%, -50%) translate(calc(var(--rx) * -1), 0) scale(.95);                             z-index: 1; opacity: .92; }
  62.5% { transform: translate(-50%, -50%) translate(calc(var(--rx) * -.707), calc(var(--ry) * -.707)) scale(.82);    z-index: 1; opacity: .82; }
  75%   { transform: translate(-50%, -50%) translate(0, calc(var(--ry) * -1)) scale(.7);                              z-index: 1; opacity: .78; }
  87.5% { transform: translate(-50%, -50%) translate(calc(var(--rx) * .707), calc(var(--ry) * -.707)) scale(.82);     z-index: 1; opacity: .82; }
  100%  { transform: translate(-50%, -50%) translate(var(--rx), 0) scale(.95);                                        z-index: 3; opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  .co__launch-bob, .co__launch-shadow, .co__launch-flame-glow, .co__launch-spark,
  .co__launch-node { animation: none; }
  .co__launch-spark { opacity: 0; }
  .co__launch-stage { transition: none; }
}

/* ---------- 02. What Defines 3Shadz ---------- */
.co__defines { padding: 100px 0; background: var(--cbg); }
.co__defines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.co__defines-card { padding: 30px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--cb); transition: all .35s ease; }
.co__defines-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.co__defines-card h3 { font-size: 17px; font-weight: 600; color: var(--ch); margin: 0 0 10px; }
.co__defines-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--ct); margin: 0; }

/* ---------- 03. Our Technology Capabilities ---------- */
.co__capabilities { padding: 100px 0; background: #fff; }
.co__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 20px; }
.co__cap-card { display: block; padding: 30px 26px; border: 1px solid var(--cb); border-radius: 16px; background: var(--cbg); transition: all .35s ease; }
.co__cap-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); background: #fff; }
.co__cap-card h3 { font-size: 18px; font-weight: 600; color: var(--ch); margin: 0 0 10px; }
.co__cap-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--ct); margin: 0; }

/* ---------- 04. Why 3Shadz + Our Process (triad) ---------- */
.co__triad { padding: 100px 0; background: var(--cbg); }

/* One connected panel, not two boxed cards: a dashed seam down the middle
   with a small connector badge, each half carrying its own soft colour
   glow bleeding in from its outer corner and a big ghost numeral. */
.co__triad2 {
  position: relative; display: flex; border-radius: 28px; overflow: hidden; background: #fff;
  border: 1px solid var(--cb); box-shadow: 0 24px 50px rgba(28, 30, 43, .08);
}
.co__triad2-half { position: relative; flex: 1; min-width: 0; padding: 52px 48px; overflow: hidden; }
.co__triad2-half--a { border-right: 1px dashed var(--cb); }
.co__triad2-half--a::before {
  content: ""; position: absolute; left: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 95, 204, .12), transparent 72%); pointer-events: none;
}
.co__triad2-half--b::before {
  content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 58, 237, .12), transparent 72%); pointer-events: none;
}
.co__triad2-num { position: absolute; top: 26px; right: 30px; z-index: 0; font-size: 46px; font-weight: 800; line-height: 1; color: var(--cb); }
.co__triad2-half > * { position: relative; z-index: 1; }
.co__triad2-half h3 { font-size: 23px; font-weight: 600; color: var(--ch); margin: 14px 0 14px; max-width: 92%; }
.co__triad2-half p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ct); margin: 0 0 24px; }
.co__triad2-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 30px;
  border: 2px solid var(--cc); color: var(--cc); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
.co__triad2-cta:hover { background: var(--cc); color: #fff; }
.co__triad2-cta i { font-size: 12px; transition: transform .25s ease; }
.co__triad2-cta:hover i { transform: translateX(3px); }

.co__triad2-seam {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--cb);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(28, 30, 43, .1);
}
.co__triad2-seam i { font-size: 14px; color: var(--cc); }

/* ---------- 05. Engagement Models ---------- */
.co__engage { padding: 100px 0; background: #fff; }

/* An interactive color-blocked "rail": six segments sit collapsed with a
   vertical label. On a mouse, hovering a segment expands it like a piano
   key while the others shrink back - purely CSS (:hover), nothing pinned.
   On touch (no hover), the data-eng3 script below toggles the same
   .is-active state on tap instead, since hover isn't available there. */
.co__eng3 { display: flex; gap: 6px; border-radius: 26px; overflow: hidden; min-height: 460px; }
.co__eng3-item { position: relative; flex: 1; min-width: 0; transition: flex .6s cubic-bezier(.22, 1, .36, 1); }
.co__eng3-item.is-active { flex: 4.4; }
.co__eng3-item--1 { background: linear-gradient(165deg, #d3dcf3, #b3c1e6); --eng3-a: #e8edfb; --eng3-b: #a7b8e2; }
.co__eng3-item--2 { background: linear-gradient(165deg, #cfe6ff, #a7d2fb); --eng3-a: #eaf5ff; --eng3-b: #8dc3f7; }
.co__eng3-item--3 { background: linear-gradient(165deg, #c3f3e0, #9ce8c7); --eng3-a: #e6fbf2; --eng3-b: #7edcb2; }
.co__eng3-item--4 { background: linear-gradient(165deg, #e3d4fd, #c9aefa); --eng3-a: #f3ecfe; --eng3-b: #b995f6; }
.co__eng3-item--5 { background: linear-gradient(165deg, #ffe3ba, #ffcb8a); --eng3-a: #fff4e2; --eng3-b: #ffb768; }
.co__eng3-item--6 { background: linear-gradient(165deg, #ffd3e4, #ffabc9); --eng3-a: #ffedf3; --eng3-b: #ff96bb; }

/* A giant tone-on-tone numeral watermark anchors the corner. */
.co__eng3-item::before {
  content: attr(data-num); position: absolute; right: 3%; bottom: -46px; z-index: 0;
  font-size: 230px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--eng3-b); opacity: 0; pointer-events: none;
  transform: translateY(14px);
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}
.co__eng3-item.is-active::before { opacity: .18; transform: translateY(0); }

/* A small cluster of floating shapes - a glossy bead, a ring, a diamond and
   two dots - fills the empty space with real depth and gentle motion,
   coloured from the tile's own palette (--eng3-a / --eng3-b) so every tile
   gets a matching set without repeating markup per colour. */
.co__eng3-deco { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .6s ease .1s; }
.co__eng3-item.is-active .co__eng3-deco { opacity: 1; }

.co__eng3-deco-ball {
  position: absolute; top: 10%; right: 8%; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff 0%, var(--eng3-a) 42%, var(--eng3-b) 100%);
  box-shadow: 0 26px 44px rgba(28, 30, 43, .18), inset -16px -20px 30px rgba(0, 0, 0, .08);
  animation: eng3-float-a 7s ease-in-out infinite;
}

@keyframes eng3-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.co__eng3-item--1 .co__eng3-num, .co__eng3-item--1 .co__eng3-h, .co__eng3-item--1 .co__eng3-collapsed { color: #2c3968; }
.co__eng3-item--2 .co__eng3-num, .co__eng3-item--2 .co__eng3-h, .co__eng3-item--2 .co__eng3-collapsed { color: #00509c; }
.co__eng3-item--3 .co__eng3-num, .co__eng3-item--3 .co__eng3-h, .co__eng3-item--3 .co__eng3-collapsed { color: #0a6b4d; }
.co__eng3-item--4 .co__eng3-num, .co__eng3-item--4 .co__eng3-h, .co__eng3-item--4 .co__eng3-collapsed { color: #5b21b6; }
.co__eng3-item--5 .co__eng3-num, .co__eng3-item--5 .co__eng3-h, .co__eng3-item--5 .co__eng3-collapsed { color: #93490c; }
.co__eng3-item--6 .co__eng3-num, .co__eng3-item--6 .co__eng3-h, .co__eng3-item--6 .co__eng3-collapsed { color: #a3195b; }

.co__eng3-head {
  appearance: none; border: 0; background: transparent; width: 100%; height: 100%; min-height: 460px;
  display: block; position: relative; padding: 28px 22px; color: var(--ch); text-align: left; cursor: default; font: inherit;
}
.co__eng3-num { position: absolute; top: 26px; left: 22px; font-size: 13px; font-weight: 700; letter-spacing: .08em; opacity: .75; }

.co__eng3-collapsed {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; font-size: 15px; font-weight: 600; white-space: nowrap;
  max-height: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis;
  opacity: 1; transition: opacity .2s ease;
}
.co__eng3-item.is-active .co__eng3-collapsed { opacity: 0; pointer-events: none; }

.co__eng3-expanded {
  position: absolute; left: 22px; right: 22px; bottom: 26px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(14px); transition: opacity .4s ease .1s, transform .4s ease .1s;
}
.co__eng3-item.is-active .co__eng3-expanded { opacity: 1; transform: none; }
.co__eng3-item:not(.is-active) .co__eng3-expanded { pointer-events: none; }
.co__eng3-h { font-size: 23px; font-weight: 600; line-height: 1.25; }
.co__eng3-p { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(28, 30, 43, .7); max-width: 340px; }

/* On a real mouse, the default (.is-active, item 1) stays expanded until
   something else in the rail is hovered - then :has() shrinks the default
   back down so only the hovered segment is expanded. Moving the mouse away
   returns to the default. Touch has no hover, so it keeps the plain
   .is-active behavior driven by the tap script instead. */
@media (hover: hover) and (pointer: fine) {
  .co__eng3-item:hover { flex: 4.4; }
  .co__eng3-item:hover .co__eng3-collapsed { opacity: 0; pointer-events: none; }
  .co__eng3-item:hover .co__eng3-expanded { opacity: 1; transform: none; }
  .co__eng3-item:hover::before { opacity: .18; transform: translateY(0); }
  .co__eng3-item:hover .co__eng3-deco { opacity: 1; }

  .co__eng3:has(.co__eng3-item:hover) .co__eng3-item.is-active:not(:hover) { flex: 1; }
  .co__eng3:has(.co__eng3-item:hover) .co__eng3-item.is-active:not(:hover) .co__eng3-collapsed { opacity: 1; pointer-events: auto; }
  .co__eng3:has(.co__eng3-item:hover) .co__eng3-item.is-active:not(:hover) .co__eng3-expanded { opacity: 0; transform: translateY(14px); }
  .co__eng3:has(.co__eng3-item:hover) .co__eng3-item.is-active:not(:hover)::before { opacity: 0; }
  .co__eng3:has(.co__eng3-item:hover) .co__eng3-item.is-active:not(:hover) .co__eng3-deco { opacity: 0; }
}

/* ---------- 06. Leadership + Security + Partnerships ---------- */
.co__trust { padding: 130px 0; background: var(--cdark); position: relative; overflow: hidden; }
.co__trust::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.co__trust > .container { position: relative; z-index: 1; }
.co__trust .co__eyebrow { color: var(--cc3); }
.co__trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.co__trust-card {
  display: block; padding: 34px 28px; border-radius: 16px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); transition: all .35s ease;
}
.co__trust-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
.co__trust-card .co__ico { background: rgba(77, 163, 255, .14); color: var(--cc3); }
.co__trust-card h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.co__trust-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--cmuted); margin: 0 0 18px; }
.co__trust-card .co__link { color: var(--cc3); }
.co__trust-card .co__link:hover { color: #fff; }

/* ---------- 07. Corporate Social Responsibility ---------- */
.co__csr { padding: 100px 0; background: var(--cbg); }

/* A fanned, overlapping card deck rather than a grid - each card rests at
   a fixed tilt like cards spread on a table; hovering one straightens it,
   lifts it clear of the fan, and brings it to the front. */
.co__csr2-fan { display: flex; justify-content: center; align-items: flex-end; padding: 46px 0 30px; }
.co__csr2-card {
  position: relative; width: 232px; min-height: 250px; padding: 32px 24px; border-radius: 22px;
  background: #fff; border: 1px solid rgba(28, 30, 43, .06);
  box-shadow: 0 16px 32px rgba(28, 30, 43, .1);
  text-align: center; transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.co__csr2-card + .co__csr2-card { margin-left: -58px; }
.co__csr2-card--1 { transform: rotate(-9deg) translateY(14px); z-index: 1; background: linear-gradient(165deg, #fff, #ffedf0); }
.co__csr2-card--2 { transform: rotate(-3deg) translateY(0); z-index: 2; background: linear-gradient(165deg, #fff, #eaf4ff); }
.co__csr2-card--3 { transform: rotate(3deg) translateY(0); z-index: 3; background: linear-gradient(165deg, #fff, #fff3e0); }
.co__csr2-card--4 { transform: rotate(9deg) translateY(14px); z-index: 4; background: linear-gradient(165deg, #fff, #e8faf0); }
.co__csr2-card:hover { transform: rotate(0deg) translateY(-28px) scale(1.06); z-index: 10; box-shadow: 0 30px 54px rgba(28, 30, 43, .2); }

.co__csr2-ico {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin: 0 auto 18px;
}
.co__csr2-card--1 .co__csr2-ico { background: #ffe1e8; color: #c22355; }
.co__csr2-card--2 .co__csr2-ico { background: #dcebff; color: #0057c2; }
.co__csr2-card--3 .co__csr2-ico { background: #ffe9c9; color: #a15a06; }
.co__csr2-card--4 .co__csr2-ico { background: #d8f5e3; color: #0d8a5f; }

.co__csr2-card h3 { font-size: 16px; font-weight: 600; color: var(--ch); margin: 0 0 8px; }
.co__csr2-card p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ct); margin: 0; }

/* ---------- 08. Company Journey ---------- */
.co__journey { padding: 110px 0 90px; background: #fff; }
.co__journey-track { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; position: relative; padding-top: 10px; margin-top: 20px; }
.co__journey-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, var(--cb), var(--cc), var(--cc2), var(--cb)); transform: translateY(-50%); z-index: 0;
}
.co__journey-step { position: relative; z-index: 1; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.co__journey-step:nth-child(odd) { align-self: flex-start; }
.co__journey-step:nth-child(even) { align-self: flex-end; flex-direction: column-reverse; }
.co__journey-node { width: 16px; height: 16px; border-radius: 50%; background: var(--cc); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--cc); margin: 0 0 18px; flex: 0 0 auto; }
.co__journey-step:nth-child(even) .co__journey-node { margin: 18px 0 0; }
.co__journey-card { background: var(--cbg); border: 1px solid var(--cb); border-radius: 16px; padding: 24px 20px; max-width: 220px; transition: transform .35s ease, box-shadow .35s ease; }
.co__journey-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.co__journey-card h3 { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cc); margin: 0 0 10px; }
.co__journey-card p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--ct); margin: 0; }

/* ---------- 09. Company at a Glance ---------- */
.co__glance { padding: 90px 0 110px; background: var(--cbg); text-align: center; }

/* A typographic stat strip, not a card grid: numbers carry the section,
   separated by hairline dividers, each with its own small colour mark
   instead of a boxed background. */
.co__glance2-strip { display: flex; border-top: 1px solid var(--cb); border-bottom: 1px solid var(--cb); }
.co__glance2-item { flex: 1; min-width: 0; position: relative; padding: 50px 26px 42px; }
.co__glance2-item + .co__glance2-item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--cb); }
.co__glance2-num {
  position: relative; display: inline-block; font-size: 60px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: var(--ch); margin-bottom: 22px;
}
.co__glance2-num--text { font-size: 26px; }
.co__glance2-num::after {
  content: ""; position: absolute; left: 50%; bottom: -16px; width: 36px; height: 4px; border-radius: 3px;
  transform: translateX(-50%); background: var(--cc); transition: width .35s ease;
}
.co__glance2-item:hover .co__glance2-num::after { width: 56px; }
.co__glance2-item--b .co__glance2-num::after { background: #d97706; }
.co__glance2-item--d .co__glance2-num::after { background: #7c3aed; }
.co__glance2-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ct); margin: 0 0 10px; }
.co__glance2-desc { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ct); max-width: 220px; margin: 0 auto; }

/* Core Capabilities swaps the big number for a small "stacked layers" mark
   - four bars in the brand accent hues, shortening top to bottom. */
.co__glance2-bars { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; }
.co__glance2-bar { height: 6px; border-radius: 4px; transition: width .35s ease; }
.co__glance2-bar--1 { width: 96px; background: #2f6fed; }
.co__glance2-bar--2 { width: 78px; background: #0d9c6c; }
.co__glance2-bar--3 { width: 56px; background: #8148e6; }
.co__glance2-bar--4 { width: 38px; background: #c3b2f7; }
.co__glance2-item:hover .co__glance2-bar--1 { width: 106px; }
.co__glance2-item:hover .co__glance2-bar--2 { width: 88px; }
.co__glance2-item:hover .co__glance2-bar--3 { width: 66px; }
.co__glance2-item:hover .co__glance2-bar--4 { width: 46px; }

/* ---------- 10. Explore 3Shadz ---------- */
.co__explore { padding: 100px 0 60px; background: #fff; }

/* A 3D flip-card index: the front is a bold colour block with just an icon
   and a number; hovering (or focusing, for keyboard users) flips it to
   reveal the description and link on the back. Not a list, not a bento,
   not the interactive rail - a distinct mechanic for the site's final
   navigational grid. */
.co__exp2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.co__exp2-card { display: block; height: 200px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.co__exp2-inner {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 20px;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  transform-style: preserve-3d; perspective: 1400px;
}
.co__exp2-card:hover .co__exp2-inner, .co__exp2-card:focus-visible .co__exp2-inner { transform: rotateY(180deg); }
.co__exp2-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 20px;
  padding: 26px 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #fff;
  box-shadow: 0 18px 34px rgba(28, 30, 43, .14);
}
.co__exp2-front { justify-content: space-between; }
.co__exp2-front > i { font-size: 26px; opacity: .9; }
.co__exp2-front-bottom { display: flex; align-items: baseline; gap: 10px; }
.co__exp2-front-bottom em { font-style: normal; font-size: 13px; font-weight: 700; opacity: .65; }
.co__exp2-front-bottom strong { font-size: 16px; font-weight: 600; }
.co__exp2-back { transform: rotateY(180deg); justify-content: center; gap: 10px; }
.co__exp2-back strong { font-size: 15px; font-weight: 600; }
.co__exp2-back p { font-size: 12.5px; font-weight: 300; line-height: 1.55; margin: 0; opacity: .9; }
.co__exp2-go { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.co__exp2-go i { font-size: 11px; transition: transform .25s ease; }
.co__exp2-card:hover .co__exp2-go i { transform: translateX(4px); }

/* Cards using a supplied illustration flip like the rest, but both faces
   show the same content - only the background changes: the front carries
   the image, the back is a plain colour so the same info reads cleanly
   without a second, different message. Scoped with :has() so any card that
   contains a .co__exp2-bg image picks this up automatically as more
   images are supplied - no per-card selector list to maintain. */
.co__exp2-card:has(.co__exp2-bg) .co__exp2-face { padding: 0; overflow: hidden; }
.co__exp2-card--1 .co__exp2-back { background: linear-gradient(155deg, #0c2452, #07152f); }
.co__exp2-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.co__exp2-card:has(.co__exp2-bg) .co__exp2-content {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; padding: 24px 22px;
}
.co__exp2-card:has(.co__exp2-bg) .co__exp2-content > i { font-size: 22px; opacity: .95; }
.co__exp2-card:has(.co__exp2-bg) .co__exp2-bottom { display: flex; flex-direction: column; }
.co__exp2-card:has(.co__exp2-bg) .co__exp2-bottom em { font-style: normal; font-size: 13px; font-weight: 700; opacity: .65; margin-bottom: 6px; }
.co__exp2-card:has(.co__exp2-bg) .co__exp2-bottom strong { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.co__exp2-card:has(.co__exp2-bg) .co__exp2-bottom .co__exp2-desc { font-size: 12.5px; font-weight: 300; line-height: 1.5; opacity: .92; max-width: 72%; }
.co__exp2-card:has(.co__exp2-bg) .co__exp2-arrow {
  position: absolute; z-index: 1; right: 18px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center;
}
.co__exp2-card:has(.co__exp2-bg) .co__exp2-arrow i { font-size: 12px; }

.co__exp2-card--2 .co__exp2-face { background: linear-gradient(155deg, #1c7ae0, #00459b); }
.co__exp2-card--3 .co__exp2-face { background: linear-gradient(155deg, #8148e6, #4c1d9e); }
.co__exp2-card--4 .co__exp2-face { background: linear-gradient(155deg, #12b382, #086b4a); }
.co__exp2-card--5 .co__exp2-face { background: linear-gradient(155deg, #e0a020, #a15a06); }
.co__exp2-card--6 .co__exp2-face { background: linear-gradient(155deg, #4c63e0, #2c3aa0); }
.co__exp2-card--7 .co__exp2-face { background: linear-gradient(155deg, #e0417f, #9d174d); }
.co__exp2-card--8 .co__exp2-face { background: linear-gradient(155deg, #1fb6c9, #0c7d8a); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.co__final-emphasis { max-width: 560px; margin: 0 auto 30px; }
.co__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--ch); line-height: 1.5; margin: 0 0 4px; }
.co__final-emphasis p:last-child { color: var(--cc); margin-bottom: 0; }
.co__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .co__page .co__title { font-size: 32px; }
  .co__hero-title { font-size: 42px; }
  .co__hero { padding: 170px 0 90px; }
  .co__hero-grid { gap: 44px; }
  .co__hero-frame { aspect-ratio: 16 / 9; }
  .co__overview, .co__defines, .co__capabilities, .co__triad, .co__engage,
  .co__csr, .co__journey, .co__glance, .co__explore { padding: 90px 0; }
  .co__trust { padding: 110px 0; }
  .co__defines-grid, .co__cap-grid { grid-template-columns: repeat(2, 1fr); }
  .co__trust-grid { grid-template-columns: 1fr; gap: 22px; }
  .co__triad2-half { padding: 44px 36px; }
  .co__csr2-card { width: 200px; min-height: 230px; }
  .co__exp2-grid { grid-template-columns: repeat(2, 1fr); }
  .co__glance2-num { font-size: 46px; }
  .co__csr2-card + .co__csr2-card { margin-left: -48px; }
}
@media only screen and (max-width: 991px) {
  .co__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .co__hero-figure { margin-top: 0; }
  .co__overview-grid { grid-template-columns: 1fr; gap: 46px; }
  .co__launch { max-width: 220px; }
  .co__launch-orbit { --rx: 172px; --ry: 63px; --rx2: 102px; --ry2: 37px; }
  .co__launch-node-badge { width: 34px; height: 34px; font-size: 13px; }
  .co__journey-track { flex-direction: column; align-items: stretch; gap: 28px; }
  .co__journey-track::before { left: 24px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--cb), var(--cc), var(--cc2), var(--cb)); transform: none; }
  .co__journey-step, .co__journey-step:nth-child(odd), .co__journey-step:nth-child(even) {
    flex-direction: row; align-self: stretch; text-align: left;
  }
  .co__journey-step:nth-child(even) .co__journey-node { margin: 0 20px 0 0; }
  .co__journey-node { margin: 0 20px 0 0; }
  .co__journey-card { max-width: none; }
}
@media only screen and (max-width: 767px) {
  .co__page .co__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .co__page .co__title { font-size: 26px; }
  .co__page .co__btn, .co__page .co__btn-outline { padding: 15px 26px; font-size: 15px; }
  .co__hero { padding: 150px 0 70px; }
  .co__hero-title { font-size: 29px; }
  .co__hero-lead { font-size: 17px; }
  .co__overview, .co__defines, .co__capabilities, .co__triad, .co__engage,
  .co__trust, .co__csr, .co__journey, .co__glance, .co__explore { padding: 70px 0; }
  .co__defines-grid, .co__cap-grid { grid-template-columns: 1fr; }
  .co__triad2 { flex-direction: column; }
  .co__triad2-half--a { border-right: 0; border-bottom: 1px dashed var(--cb); }
  .co__triad2-half { padding: 40px 30px; }
  .co__triad2-num { font-size: 36px; }
  .co__triad2-seam { display: none; }
  .co__exp2-grid { grid-template-columns: 1fr; }
  .co__exp2-card { height: 176px; }
  .co__glance2-strip { flex-direction: column; border: 0; }
  .co__glance2-item { padding: 26px 10px; border-bottom: 1px solid var(--cb); }
  .co__glance2-item:last-child { border-bottom: 0; }
  .co__glance2-item + .co__glance2-item::before { display: none; }
  .co__glance2-num { font-size: 42px; }
  .co__csr2-fan { flex-direction: column; align-items: center; gap: 18px; padding: 20px 0 40px; }
  .co__csr2-card, .co__csr2-card--1, .co__csr2-card--2, .co__csr2-card--3, .co__csr2-card--4 {
    margin-left: 0; transform: none; width: 100%; max-width: 320px;
  }
  .co__csr2-card:hover { transform: translateY(-6px); }
  .co__eng3 { flex-direction: column; min-height: auto; border-radius: 20px; }
  .co__eng3-item { flex: none; }
  .co__eng3-head { min-height: 0; padding: 18px 20px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 12px; }
  .co__eng3-item.is-active .co__eng3-head { padding-bottom: 24px; }
  .co__eng3-num { position: static; }
  .co__eng3-collapsed {
    position: static; transform: none; writing-mode: horizontal-tb; max-height: none; font-size: 16px;
  }
  .co__eng3-item.is-active .co__eng3-collapsed { display: none; }
  .co__eng3-expanded { position: static; left: auto; right: auto; bottom: auto; flex-basis: 100%; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .co__page .co__defines-card,
  .co__page .co__cap-card,
  .co__page .co__eng3-item,
  .co__page .co__csr2-card,
  .co__page .co__trust-card,
  .co__page .co__journey-card,
  .co__page .co__exp2-inner,
  .co__page .co__btn,
  .co__page .co__btn-outline { transition: none !important; }
  .co__page .co__defines-card:hover,
  .co__page .co__cap-card:hover,
  .co__page .co__trust-card:hover,
  .co__page .co__journey-card:hover { transform: none !important; }
  .co__page .co__eng3-deco-ball { animation: none !important; }
}

/* ============================================================
   CAREERS HUB PAGE (cr__*)
   Scoped entirely to .cr__page (added on <main> of careers.html).
   Follows the shared page-module pattern used by .co__page / .svc__page
   etc. Careers is the directory/hub for the five careers subpages
   (open-positions, life-at-3shadz, benefits-perks, hiring-process,
   internships), so sections stay compact (teaser copy + CTA) rather
   than the full long-form treatment used on those subpages.
   Nothing in this block leaks outside .cr__page.
   ============================================================ */
.cr__page {
  --crc: #005fcc;
  --crc2: #8079f8;
  --crc3: #4da3ff;
  --crh: #1c1e2b;
  --crt: #6b7089;
  --crb: #e9eaf5;
  --crbg: #f6f7fc;
  --crdark: #07152F;
  --crmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.cr__page .cr__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--crc);
  margin-bottom: 18px;
}
.cr__page .cr__title { font-size: 38px; line-height: 1.24; font-weight: 600; color: var(--crh); margin: 0 0 20px; }
.cr__page .cr__title--light { color: #fff; }
.cr__page .cr__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--crt); margin: 0 0 18px; }
.cr__page .cr__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--crt); margin: 0 0 14px; }
.cr__page .cr__text:last-child { margin-bottom: 0; }
.cr__page .cr__text strong { color: var(--crh); font-weight: 600; }
.cr__page .cr__head { max-width: 780px; }
.cr__page .cr__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.cr__page .cr__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--crc);
  margin: 44px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}

.cr__page .cr__btn,
.cr__page .cr__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.cr__page .cr__btn { color: #fff; background: var(--crc); border: 2px solid var(--crc); }
.cr__page .cr__btn:hover { background: var(--crc2); border-color: var(--crc2); color: #fff; }
.cr__page .cr__btn-outline { color: var(--crc); border: 2px solid var(--crc); background: transparent; }
.cr__page .cr__btn-outline:hover { background: var(--crc); color: #fff; }

.cr__page .cr__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--crc);
  transition: gap .3s ease, color .3s ease;
}
.cr__page .cr__link:hover { gap: 15px; color: var(--crc2); }

.cr__page .cr__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--crc);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.cr__page .cr__cap-cta { text-align: center; margin-top: 40px; }

/* ---------- Hero ---------- */
.cr__hero { position: relative; overflow: hidden; background: var(--crdark); padding: 190px 0 110px; }
.cr__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.cr__hero > .container { position: relative; z-index: 2; }
.cr__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.cr__hero-figure { position: relative; margin-top: 108px; }
.cr__hero-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 105%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 95, 204, .55), transparent 72%);
  filter: blur(46px);
  z-index: 0;
}
.cr__hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.cr__hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr__hero-title { font-size: 52px; line-height: 1.18; font-weight: 600; color: #fff; margin: 0 0 26px; }
.cr__hero-title .cr__mark { color: var(--crc3); }
.cr__hero-lead { font-size: 19px; line-height: 1.6; color: #e6ecfa; font-weight: 500; margin: 0 0 16px; max-width: 640px; }
.cr__hero-text { font-size: 16px; line-height: 1.85; color: var(--crmuted); font-weight: 300; margin: 0 0 16px; max-width: 640px; }
.cr__hero-text strong { color: #fff; font-weight: 600; }
.cr__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 640px; }
.cr__hero-emphasis p { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.cr__hero-emphasis p:last-child { color: var(--crc3); margin-bottom: 0; }
.cr__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }
.cr__hero .cr__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .38); }
.cr__hero .cr__btn-outline:hover { background: #fff; border-color: #fff; color: var(--crdark); }

/* ---------- Hero variant: image-collage layout (cr__hero-collage) ----------
   Reuses the sh-1..sh-4 collage photos, shape-6 accent and the
   .service__hero-inner-2 / .service__hero-left-2 / .service__hero-2
   markup from index-7.html's hero, restyled for a light background.
   The careers hero copy itself is unchanged from the .cr__hero rules
   above, only the layout/imagery and the colors needed to keep that
   copy legible on a light background differ. */
.cr__hero.cr__hero-collage {
  background-color: #fff;
  /* .cr__hero sets `background: var(--crdark)` (a shorthand, which
     resets background-image to none) and it's declared after
     .service__hero-2's background-image longhand elsewhere in this
     file, so it silently wins the cascade and wipes out the sh-bg.png
     circles. Restated explicitly here to bring them back. */
  background-image: url(../imgs/home-7/sh-bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  padding: 160px 0 60px;
}
.cr__hero.cr__hero-collage::before { display: none; }
/* The header's hamburger icon has a decorative ring (.menu-icon-2::after,
   a generic shared rule used by every header__area-2 page) that reads
   as an odd stray circle against this hero's white background. Hidden
   here only for careers.html via the header's own cr__header class, so
   other pages keep the ring. */
.cr__header .menu-icon-2::after { display: none; }
/* The careers hero copy is much longer than index-7's original two-line
   paragraph, so the grid row is much taller than the 4-image collage.
   Grid items stretch to fill the row by default, which drags the
   collage's absolutely-positioned 4th image (bottom:80px, anchored to
   its now-stretched container) down into the copy below it. Keeping
   the collage at its own natural height avoids that. */
.cr__hero-collage .service__hero-inner-2 { align-items: start; }
/* Gentle floating motion on the collage photos. Images 1-3 use the
   shared .service__hero-left-2 CSS's own translateX() offset (which
   varies per breakpoint), so the bob is applied to a wrapping div
   instead of the <img> itself to avoid overriding that responsive
   transform. Image-4 is absolutely positioned via left/bottom (no
   transform of its own in the shared CSS), so it can be animated
   directly without a wrapper - just watch not to give it a transform
   elsewhere, since that would move its absolute-position containing
   block. */
.cr__hero-collage .cr__img-float { display: inline-block; animation: crImgFloat 4.6s ease-in-out infinite; }
.cr__hero-collage .service__hero-left-2 > .cr__img-float:nth-of-type(2) { animation-duration: 5.4s; animation-delay: .3s; }
.cr__hero-collage .service__hero-left-2 > .cr__img-float:nth-of-type(3) { animation-duration: 5s; animation-delay: .6s; }
.cr__hero-collage .cr__img-float-4 { animation: crImgFloat 5.2s ease-in-out infinite; animation-delay: .9s; }
@keyframes crImgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .cr__hero-collage .cr__img-float, .cr__hero-collage .cr__img-float-4 { animation: none !important; }
}
.cr__hero-collage .cr__hero-title { color: var(--crh); }
.cr__hero-collage .cr__hero-title .cr__mark { color: var(--crc); }
.cr__hero-collage .cr__hero-lead { color: var(--crh); }
.cr__hero-collage .cr__hero-text { color: var(--crt); }
.cr__hero-collage .cr__hero-text strong { color: var(--crh); }
.cr__hero-collage .cr__hero-emphasis { border-top-color: var(--crb); }
.cr__hero-collage .cr__hero-emphasis p { color: var(--crh); }
.cr__hero-collage .cr__hero-emphasis p:last-child { color: var(--crc); }
.cr__hero.cr__hero-collage .cr__btn-outline { color: var(--crc); border-color: var(--crc); }
.cr__hero.cr__hero-collage .cr__btn-outline:hover { background: var(--crc); border-color: var(--crc); color: #fff; }
/* The emphasis + CTA pair sits in its own full-width row below the
   image/copy grid (after the 4th collage image) instead of trailing
   the paragraphs inside the narrower text column. */
.cr__hero-collage .cr__hero-cta-row {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--crb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.cr__hero-collage .cr__hero-cta-row .cr__hero-emphasis {
  margin: 0;
  padding-top: 0;
  border-top: none;
  max-width: none;
}
@media only screen and (max-width: 767px) {
  /* The shape-1 accent squares are positioned for the wide desktop
     layout and collide with the hero copy once the layout collapses
     to a single column, so they're hidden here. */
  .cr__hero.cr__hero-collage .shape-1 { display: none; }
  .cr__hero-collage .cr__hero-cta-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- 01. Build Your Career at 3Shadz ---------- */
.cr__overview { padding: 80px 0 100px; background: #fff; }
.cr__overview-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.cr__overview-emphasis { margin: 30px auto 0; text-align: center; max-width: 560px; padding-top: 30px; border-top: 1px solid var(--crb); }
.cr__overview-emphasis p { font-size: 19px; font-weight: 600; color: var(--crh); margin: 0 0 6px; }
.cr__overview-emphasis p:last-child { color: var(--crc); margin-bottom: 0; }

/* ---------- Growth-tree illustration (animates in on scroll) ---------- */
.cr__overview-visual { max-width: 380px; margin: 0 auto; }
.cr__overview-visual svg { width: 100%; height: auto; display: block; overflow: visible; }

.cr__gt-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s ease;
}
.cr__gt-node {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.cr__gt-dust circle { fill: var(--crc3); opacity: 0; transition: opacity 1.2s ease; }
.cr__gt-pulse { fill: #bfe0ff; opacity: 0; }

/* Whole tree gently rocks from its base, like it's standing in a light
   breeze. transform-box:view-box lets the origin be given in the SVG's
   own viewBox coordinates (the trunk base) instead of a bounding-box
   percentage. */
.cr__gt-sway { transform-box: view-box; transform-origin: 200px 434px; }

.cr__overview-visual.is-inview .cr__gt-path { stroke-dashoffset: 0; }
.cr__overview-visual.is-inview .cr__gt-node { opacity: 1; transform: scale(1); }
.cr__overview-visual.is-inview .cr__gt-dust circle { opacity: .18; animation: crDustLife 6s ease-in-out infinite; }
.cr__overview-visual.is-inview .cr__gt-node.is-glow { animation: crNodeGlow 2.6s ease-in-out infinite; }
.cr__overview-visual.is-inview .cr__gt-sway { animation: crTreeSway 7s ease-in-out infinite, crHueDrift 16s ease-in-out infinite; animation-delay: 2.6s, 3s; }
.cr__overview-visual.is-inview .cr__gt-dust { animation: crHueDrift 16s ease-in-out infinite; animation-delay: 3s; }

@keyframes crDustLife {
  0%, 100% { opacity: .18; transform: translate(0, 0); }
  50% { opacity: .55; transform: translate(calc(var(--dx, 6) * 1px), calc(var(--dy, -6) * 1px)); }
}
@keyframes crNodeGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(0, 95, 204, .35)); }
  50% { filter: drop-shadow(0 0 8px rgba(0, 95, 204, .8)); }
}
@keyframes crTreeSway {
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}
/* Slow hue drift across the whole tree (and separately the dust halo),
   so the blue/purple mix gently shifts over time instead of staying
   perfectly static. Applied to the outer .cr__gt-sway group rather than
   individual nodes/paths so it composites as one uniform color shift. */
@keyframes crHueDrift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(36deg); }
}

@media only screen and (max-width: 1199px) {
  .cr__overview-grid { grid-template-columns: 1fr; }
  .cr__overview-visual { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cr__gt-path, .cr__gt-node, .cr__gt-dust, .cr__gt-dust circle, .cr__gt-sway { transition: none !important; animation: none !important; }
  .cr__gt-path { stroke-dashoffset: 0; }
  .cr__gt-node { opacity: 1; transform: scale(1); }
  .cr__gt-dust circle { opacity: .5; }
}

/* ---------- 02. Why Join 3Shadz ---------- */
.cr__defines { padding: 100px 0; background: var(--crdark); position: relative; overflow: hidden; }
.cr__defines::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.cr__defines > .container { position: relative; z-index: 1; }
.cr__defines .cr__eyebrow { color: var(--crc3); }
.cr__defines .cr__title { color: #fff; }
.cr__defines .cr__text { color: var(--crmuted); }
.cr__defines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cr__defines-card { padding: 30px 26px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); transition: all .35s ease; }
.cr__defines-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
.cr__defines-card .cr__ico { background: rgba(77, 163, 255, .14); color: var(--crc3); }
.cr__defines-card h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.cr__defines-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--crmuted); margin: 0; }

/* ---------- 03. How We Work (connected timeline) ---------- */
.cr__how { padding: 100px 0; background: #fff; }
.cr__how-timeline { position: relative; display: flex; justify-content: space-between; gap: 24px; padding-top: 10px; }
.cr__how-timeline::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--crb), var(--crc), var(--crc2), var(--crb));
  z-index: 0;
}
.cr__how-step { position: relative; z-index: 1; flex: 1; max-width: 320px; margin: 0 auto; text-align: center; }
.cr__how-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--crc);
  color: var(--crc);
  font-size: 22px;
  margin-bottom: 22px;
  box-shadow: 0 0 0 6px #fff;
}
.cr__how-step h3 { font-size: 17px; font-weight: 600; color: var(--crh); margin: 0 0 10px; }
.cr__how-step p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--crt); margin: 0; }

/* ---------- 04. Learning & Growth (editorial numerals) ---------- */
.cr__growth { padding: 100px 0; background: var(--crbg); }

/* ---------- 05. Explore Opportunities (interactive tab explorer) ---------- */
.cr__opportunities { padding: 100px 0; background: #fff; }
.cr__opp-shell { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: stretch; margin-top: 20px; margin-bottom: 20px; }
.cr__opp-rail { display: flex; flex-direction: column; gap: 8px; background: var(--crbg); border: 1px solid var(--crb); border-radius: 18px; padding: 12px; position: sticky; top: 110px; box-sizing: border-box; }
.cr__opp-panels { height: 100%; }
.cr__opp-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: all .25s ease; }
.cr__opp-btn:hover { background: #fff; }
.cr__opp-btn.active { background: #fff; border-color: var(--crb); box-shadow: 0 6px 18px rgba(28, 30, 43, .06); }
.cr__opp-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--crc);
}
/* area accent spectrum - purely a visual index, brand color stays on every CTA */
.cr__opp-rail .cr__opp-btn:nth-child(1) .cr__opp-num { background: #005fcc; }
.cr__opp-rail .cr__opp-btn:nth-child(2) .cr__opp-num { background: #8079f8; }
.cr__opp-rail .cr__opp-btn:nth-child(3) .cr__opp-num { background: #4da3ff; }
.cr__opp-rail .cr__opp-btn:nth-child(4) .cr__opp-num { background: #06b6d4; }
.cr__opp-rail .cr__opp-btn:nth-child(5) .cr__opp-num { background: #22c55e; }
.cr__opp-rail .cr__opp-btn:nth-child(6) .cr__opp-num { background: #f59e0b; }
.cr__opp-copy strong { font-size: 14.5px; font-weight: 600; color: var(--crh); line-height: 1.35; }
.cr__opp-arrow { margin-left: auto; flex: 0 0 auto; color: var(--crt); font-size: 12px; transition: transform .25s ease, color .25s ease; }
.cr__opp-btn.active .cr__opp-arrow { color: var(--crc); transform: translateX(3px); }

.cr__opp-panel { display: none; height: 100%; }
.cr__opp-panel.active { display: block; height: 100%; animation: crOppFade .35s ease; }
@keyframes crOppFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cr__opp-panel-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: var(--crbg); border: 1px solid var(--crb); border-radius: 18px; padding: 40px 0; }
.cr__opp-panel-top { flex: 0 0 auto; padding: 0 40px; }
.cr__opp-panel-card .cr__ico { width: 52px; height: 52px; font-size: 20px; }
.cr__opp-panel-card h3 { font-size: 22px; font-weight: 600; color: var(--crh); margin: 0 0 12px; }
.cr__opp-panel-card p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--crt); margin: 0 0 20px; max-width: 520px; }
/* Animated "circuit flow" graphic: same default visual on every tab until
   a real image replaces it (swap the <svg> for an <img> per tab, or reuse
   one image, whenever real photography is ready). Full-bleed to the
   card's left/right edges (the card itself has no horizontal padding;
   .cr__opp-panel-top carries it instead) so the traces run edge-to-edge
   with no side gap. Traces + traveling pulses only need to run while a
   panel is actually visible - CSS/SMIL animation on a display:none
   ancestor is inert by default, so switching tabs pauses/resets it for
   free. */
.cr__opp-panel-media {
  flex: 1 1 auto;
  min-height: 120px;
  margin-top: 24px;
  background: var(--crbg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cr__opp-panel-media svg { width: 100%; height: 100%; display: block; }
.cr__opp-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr__pm-trace { fill: none; stroke-width: 1.6; opacity: .4; }
.cr__pm-node { opacity: .8; filter: drop-shadow(0 0 3px rgba(0, 95, 204, .4)); }
.cr__pm-pulse { filter: drop-shadow(0 0 4px rgba(77, 163, 255, .85)); }

/* ---------- 06. Who We Look For (value cards) ---------- */
.cr__lookfor { padding: 100px 0; background: var(--crbg); }
.cr__values-wrap { position: relative; margin-top: 70px; }
.cr__values-connector { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.cr__values-row { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 28px; }
.cr__values-row .cr__value-card { flex: 1 1 0; }
.cr__values-row--offset { justify-content: center; margin-top: 28px; }
.cr__values-row--offset .cr__value-card { flex: 0 1 calc(33.333% - 19px); }

.cr__value-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 168px;
  padding: 28px 52px 28px 24px;
  border-radius: 20px;
  background: var(--vc-bg);
  box-shadow: 0 20px 40px -18px var(--vc-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
  box-sizing: border-box;
}
.cr__value-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -16px var(--vc-shadow); }
.cr__value-card--blue { --vc-bg: linear-gradient(180deg, #eaf3ff, #f8fbff); --vc-shadow: rgba(108, 159, 245, .22); --vc-ic-bg: #e2edff; --vc-accent: #6c9ff5; }
.cr__value-card--green { --vc-bg: linear-gradient(180deg, #eafcf1, #f8fdf9); --vc-shadow: rgba(95, 190, 147, .22); --vc-ic-bg: #e0f8ec; --vc-accent: #5fbe93; }
.cr__value-card--purple { --vc-bg: linear-gradient(180deg, #f2efff, #f9f8ff); --vc-shadow: rgba(167, 139, 250, .22); --vc-ic-bg: #ede8ff; --vc-accent: #a78bfa; }
.cr__value-card--orange { --vc-bg: linear-gradient(180deg, #fff2e8, #fffaf5); --vc-shadow: rgba(244, 162, 107, .22); --vc-ic-bg: #ffecdc; --vc-accent: #f4a26b; }

.cr__value-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--vc-ic-bg);
  color: var(--vc-accent);
  font-size: 21px;
}
.cr__value-card h3 { position: relative; font-size: 17px; font-weight: 700; color: var(--crh); margin: 0 0 12px; padding-bottom: 10px; }
.cr__value-card h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--vc-accent); }
.cr__value-card p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--crt); margin: 0; }
.cr__value-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vc-ic-bg);
  color: var(--vc-accent);
  font-size: 13px;
}

/* ---------- 07. Life at 3Shadz Preview ---------- */
.cr__life { padding: 130px 0; background: var(--crdark); position: relative; overflow: hidden; }
.cr__life::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.cr__life > .container { position: relative; z-index: 1; }
.cr__life .cr__eyebrow { color: var(--crc3); }
.cr__life-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.cr__life-figure { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); aspect-ratio: 4 / 3; box-shadow: 0 30px 70px rgba(0, 0, 0, .38); }
.cr__life-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr__life-copy h2 { color: #fff; }
.cr__life-copy p { color: var(--crmuted); }
.cr__life-copy .cr__link { color: var(--crc3); }
.cr__life-copy .cr__link:hover { color: #fff; }

/* ---------- 08. Career Navigation (numbered index list) ---------- */
.cr__explore { padding: 100px 0 60px; background: #fff; }
.cr__explore-list { display: flex; flex-direction: column; border-top: 1px solid var(--crb); margin-top: 10px; }
.cr__explore-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--crb);
  transition: all .25s ease;
}
.cr__explore-row:hover { background: var(--crbg); padding-left: 20px; padding-right: 20px; }
.cr__explore-num { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--crc); width: 28px; }
.cr__explore-row .cr__ico { margin: 0; flex: 0 0 auto; }
.cr__explore-row-copy { flex: 1 1 auto; min-width: 0; }
.cr__explore-row-copy h3 { font-size: 17px; font-weight: 600; color: var(--crh); margin: 0 0 5px; }
.cr__explore-row-copy p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--crt); margin: 0; }
.cr__explore-row-arrow { flex: 0 0 auto; color: var(--crt); font-size: 15px; transition: transform .25s ease, color .25s ease; }
.cr__explore-row:hover .cr__explore-row-arrow { color: var(--crc); transform: translateX(4px); }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.cr__final-emphasis { max-width: 560px; margin: 0 auto 30px; }
.cr__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--crh); line-height: 1.5; margin: 0 0 4px; }
.cr__final-emphasis p:last-child { color: var(--crc); margin-bottom: 0; }
.cr__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .cr__page .cr__title { font-size: 32px; }
  .cr__hero-title { font-size: 42px; }
  .cr__hero { padding: 170px 0 90px; }
  .cr__hero-grid { gap: 44px; }
  .cr__hero-frame { aspect-ratio: 16 / 9; }
  .cr__overview, .cr__defines, .cr__how, .cr__growth, .cr__opportunities,
  .cr__lookfor, .cr__explore { padding: 90px 0; }
  .cr__life { padding: 110px 0; }
  .cr__defines-grid { grid-template-columns: repeat(2, 1fr); }
  .cr__life-grid { gap: 40px; }
  .cr__opp-shell { grid-template-columns: 1fr; }
  .cr__opp-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .cr__opp-btn { flex: 1 1 46%; }
  .cr__how-timeline { flex-direction: column; align-items: stretch; gap: 32px; }
  .cr__how-timeline::before { top: 0; bottom: 0; left: 31px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--crb), var(--crc), var(--crc2), var(--crb)); }
  .cr__how-step { max-width: none; text-align: left; display: flex; align-items: flex-start; gap: 20px; }
  .cr__how-node { margin-bottom: 0; flex: 0 0 auto; }
}
@media only screen and (max-width: 991px) {
  .cr__hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .cr__hero-figure { margin-top: 0; }
  .cr__life-grid { grid-template-columns: 1fr; }
  .cr__life-figure { aspect-ratio: 16 / 9; }
  .cr__opp-btn { flex: 1 1 100%; }
  .cr__values-row { flex-wrap: wrap; }
  .cr__values-row--offset { margin-top: 20px; }
  .cr__values-row .cr__value-card, .cr__values-row--offset .cr__value-card { flex: 1 1 100%; min-height: 0; }
  .cr__values-connector { display: none; }
}
@media only screen and (max-width: 767px) {
  .cr__page .cr__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .cr__page .cr__title { font-size: 26px; }
  .cr__page .cr__btn, .cr__page .cr__btn-outline { padding: 15px 26px; font-size: 15px; }
  .cr__hero { padding: 150px 0 70px; }
  .cr__hero-title { font-size: 29px; }
  .cr__hero-lead { font-size: 17px; }
  .cr__overview, .cr__defines, .cr__how, .cr__growth, .cr__opportunities,
  .cr__lookfor, .cr__life, .cr__explore { padding: 70px 0; }
  .cr__defines-grid { grid-template-columns: 1fr; }
  .cr__opp-panel-card { padding: 26px 0; }
  .cr__opp-panel-top { padding: 0 22px; }
  .cr__explore-row { flex-wrap: wrap; gap: 12px 16px; }
  .cr__explore-row-arrow { display: none; }
  .cr__value-card { padding: 22px 44px 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr__page .cr__defines-card,
  .cr__page .cr__value-card,
  .cr__page .cr__explore-row,
  .cr__page .cr__explore-row-arrow,
  .cr__page .cr__opp-btn,
  .cr__page .cr__opp-panel,
  .cr__page .cr__opp-panel-media,
  .cr__page .cr__btn,
  .cr__page .cr__btn-outline { transition: none !important; animation: none !important; }
  .cr__page .cr__defines-card:hover,
  .cr__page .cr__value-card:hover { transform: none !important; }
  .cr__page .cr__pm-pulse { display: none; }
}

/* ============================================================
   OPEN POSITIONS PAGE (op__*)
   Scoped entirely to .op__page (added on <main> of
   open-positions.html). Follows the shared page-module pattern
   used by .cr__page / .co__page / .csr__page. This is one of the
   five careers subpages (the hub is careers.html), so it gets the
   full long-form treatment rather than the hub's teaser cards.
   The hero is intentionally its own layout: instead of the hub's
   photo collage (cr__hero-collage) or the CSR page's reuse of the
   template's .solution__area, it pairs the usual copy column with
   a live "openings" panel that lists the two roles below and jumps
   straight to them - the hero doubles as a mini job index.
   Nothing in this block leaks outside .op__page.
   ============================================================ */
.op__page {
  --op-c: #005fcc;
  --op-c2: #8079f8;
  --op-c3: #4da3ff;
  --op-h: #1c1e2b;
  --op-t: #6b7089;
  --op-b: #e9eaf5;
  --op-bg: #f6f7fc;
  --op-dark: #07152F;
  --op-muted: #9fb3cd;
  --op-green: #7cc142;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.op__page .op__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--op-c);
  margin-bottom: 18px;
}
.op__page .op__title { font-size: 38px; line-height: 1.24; font-weight: 600; color: var(--op-h); margin: 0 0 20px; }
.op__page .op__title--light { color: #fff; }
.op__page .op__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--op-t); margin: 0 0 18px; }
.op__page .op__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--op-t); margin: 0 0 14px; }
.op__page .op__text:last-child { margin-bottom: 0; }
.op__page .op__text strong { color: var(--op-h); font-weight: 600; }
.op__page .op__head { max-width: 780px; }
.op__page .op__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.op__page .op__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--op-c);
  margin: 44px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}

.op__page .op__btn,
.op__page .op__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.op__page .op__btn { color: #fff; background: var(--op-c); border: 2px solid var(--op-c); }
.op__page .op__btn:hover { background: var(--op-c2); border-color: var(--op-c2); color: #fff; }
.op__page .op__btn-outline { color: var(--op-c); border: 2px solid var(--op-c); background: transparent; }
.op__page .op__btn-outline:hover { background: var(--op-c); color: #fff; }

.op__page .op__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--op-c);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: gap .3s ease, color .3s ease;
}
.op__page .op__link:hover { gap: 15px; color: var(--op-c2); }

.op__page .op__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--op-c);
  font-size: 20px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.op__page .op__cap-cta { text-align: center; margin-top: 40px; }

/* ---------- Hero (matches about.html's hero pattern exactly: dark
   background with a radial-gradient glow, copy column on the left, a
   single photo in a glowing rounded frame on the right, and a bottom
   keyword strip). Uses this page's own --op-* tokens in place of
   about.html's --a* ones, but is otherwise a direct structural copy. ---------- */
.op__hero { position: relative; overflow: hidden; background: var(--op-dark); padding: 190px 0 120px; }
.op__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 90% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(700px 420px at 0% 115%, rgba(128, 121, 248, .22), transparent 62%);
}
.op__hero > .container { position: relative; z-index: 2; }
.op__hero-inner { max-width: 620px; }

.op__hero-title { font-size: 56px; line-height: 1.15; font-weight: 600; color: #fff; margin: 0 0 26px; }
.op__hero-title .op__mark { color: var(--op-c3); }
.op__hero-lead { font-size: 19px; line-height: 1.75; color: #e6ecfa; font-weight: 400; margin: 0 0 16px; max-width: 620px; }
.op__hero-text { font-size: 16px; line-height: 1.85; color: var(--op-muted); font-weight: 300; margin: 0 0 16px; max-width: 620px; }
.op__hero-emphasis { margin: 24px 0 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 620px; }
.op__hero-emphasis p { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.op__hero-emphasis p:last-child { color: var(--op-c3); margin-bottom: 0; }
.op__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 54px; }
.op__hero-cta .op__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.op__hero-cta .op__btn-outline:hover { background: #fff; color: var(--op-dark); }
.op__hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 26px;
}
.op__hero-strip .op__dot { color: var(--op-c3); margin: 0 10px; }

/* ---------- Portal visual (generative WebGL scene) ----------
   A full-bleed background layer spanning the ENTIRE hero section (not a
   boxed widget in a grid column) - sits outside .container as a direct
   child of .op__hero, position:absolute inset:0, behind the copy (z-index
   1 vs .op__hero > .container's z-index 2). The point of this is that the
   particle flow/light trails read as part of the hero itself rather than
   being clipped to a small rectangle. Progressive enhancement, same
   pattern as about.html's Hyderabad-to-the-world globe (see
   .abt__globe-vis / assets/js/webgl-globe/abt-globe-init.js): the flat CSS
   portal (gradient-bordered frame + glow + a few static dots) is the real,
   always-present content, and assets/js/webgl-portal/op-portal-init.js
   swaps in the live Three.js scene only once it confirms WebGL support and
   that prefers-reduced-motion isn't set. Nothing here breaks if that
   script fails to load - the CSS version stays visible. ---------- */
.op__portal-vis { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.op__portal-glow {
  position: absolute;
  top: 30%;
  right: 8%;
  width: 46%;
  aspect-ratio: 3 / 4;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 55% 45%, rgba(77, 163, 255, .28), rgba(160, 90, 255, .16) 45%, transparent 72%);
  filter: blur(10px);
}
.op__portal-frame {
  position: absolute;
  top: 14%;
  bottom: 14%;
  right: 14%;
  width: 26%;
  z-index: 1;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, #4da3ff, #b060ff);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.op__portal-frame::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  background: rgba(7, 21, 47, .88);
}
.op__portal-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--op-c3);
  opacity: .8;
  z-index: 1;
  box-shadow: 0 0 6px 1px rgba(77, 163, 255, .7);
}
.op__portal-3d { position: absolute; inset: 0; display: none; z-index: 2; }
.op__portal-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.op__portal-vis.is-3d .op__portal-glow,
.op__portal-vis.is-3d .op__portal-frame,
.op__portal-vis.is-3d .op__portal-dot { display: none; }
.op__portal-vis.is-3d .op__portal-3d { display: block; }

@media only screen and (max-width: 991px) {
  .op__portal-frame { right: 8%; width: 40%; }
  .op__portal-glow { right: 2%; width: 60%; }
}
@media only screen and (max-width: 767px) {
  .op__portal-vis { opacity: .55; }
}

/* ---------- Role-network diagram ----------
   Reused by the "More Than a Job Title" section further down the page
   (see .op__intro-network) now that the hero itself uses a photo frame
   instead. A central "3Shadz" node connects to four role-category
   satellites (AI, Full-Stack, Cloud, DevOps) via drawn-in SVG lines with
   traveling pulse dots. Node positions are percentages matching the SVG's
   own 600x520 viewBox coordinates, so they track the diagram correctly at
   any container size. ---------- */
.op__network-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.op__network-line {
  fill: none;
  stroke: var(--op-b);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease;
}
.op__network-lines .op__network-line:nth-child(1) { transition-delay: .05s; }
.op__network-lines .op__network-line:nth-child(2) { transition-delay: .2s; }
.op__network-lines .op__network-line:nth-child(3) { transition-delay: .35s; }
.op__network-lines .op__network-line:nth-child(4) { transition-delay: .5s; }
.op__network.is-inview .op__network-line { stroke-dashoffset: 0; }
.op__network-pulse { fill: var(--op-c3); opacity: 0; transition: opacity .6s ease .9s; }
.op__network.is-inview .op__network-pulse { opacity: .9; }

.op__network-node {
  position: absolute;
  transform: translate(-50%, -50%) scale(.7);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--op-b);
  box-shadow: 0 16px 34px rgba(28, 30, 43, .08);
  z-index: 1;
  transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.op__network.is-inview .op__network-node { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.op__network-node--center { top: 50%; left: 50%; width: 130px; height: 130px; background: var(--op-dark); border: none; box-shadow: 0 24px 50px rgba(0, 95, 204, .28); }
.op__network-node--center .op__network-node-label { color: #fff; font-size: 17px; font-weight: 700; }
.op__network-node--center .op__network-node-sub { color: var(--op-c3); font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }
@keyframes opCareersColorShift {
  0%, 100% { color: var(--op-c3); }
  50% { color: var(--op-c2); }
}
.op__network.is-inview .op__network-node--center .op__network-node-sub { animation: opCareersColorShift 3s ease-in-out infinite; }

.op__network-node--ai { top: 19.23%; left: 50%; width: 96px; height: 96px; transition-delay: .15s; }
.op__network-node--fullstack { top: 50%; left: 78.33%; width: 96px; height: 96px; transition-delay: .25s; }
.op__network-node--devops { top: 80.77%; left: 50%; width: 96px; height: 96px; transition-delay: .35s; }
.op__network-node--cloud { top: 50%; left: 21.67%; width: 96px; height: 96px; transition-delay: .45s; }
.op__network-node-ico { display: inline-block; font-size: 19px; color: var(--op-c); margin-bottom: 5px; }

@keyframes opIconBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.18); }
}
.op__network.is-inview .op__network-node--ai .op__network-node-ico { animation: opIconBlink 2.4s ease-in-out infinite; }
.op__network.is-inview .op__network-node--fullstack .op__network-node-ico { animation: opIconBlink 2.4s ease-in-out infinite .5s; }
.op__network.is-inview .op__network-node--devops .op__network-node-ico { animation: opIconBlink 2.4s ease-in-out infinite 1s; }
.op__network.is-inview .op__network-node--cloud .op__network-node-ico { animation: opIconBlink 2.4s ease-in-out infinite 1.5s; }
.op__network-node-label { font-size: 12px; font-weight: 600; color: var(--op-h); }

@keyframes opNodeBreathe {
  0%, 100% { box-shadow: 0 16px 34px rgba(28, 30, 43, .08); }
  50% { box-shadow: 0 16px 34px rgba(0, 95, 204, .2); }
}
.op__network.is-inview .op__network-node--ai { animation: opNodeBreathe 3.4s ease-in-out infinite; }
.op__network.is-inview .op__network-node--fullstack { animation: opNodeBreathe 3.8s ease-in-out infinite .3s; }
.op__network.is-inview .op__network-node--devops { animation: opNodeBreathe 3.6s ease-in-out infinite .6s; }
.op__network.is-inview .op__network-node--cloud { animation: opNodeBreathe 4s ease-in-out infinite .9s; }

@media only screen and (max-width: 1199px) {
  .op__network-node--center { width: 104px; height: 104px; }
  .op__network-node--ai, .op__network-node--fullstack, .op__network-node--devops, .op__network-node--cloud { width: 78px; height: 78px; }
  .op__network-node-ico { font-size: 16px; }
  .op__network-node-label { font-size: 11px; }
}
@media only screen and (max-width: 575px) {
  .op__network-node--center { width: 88px; height: 88px; }
  .op__network-node--center .op__network-node-label { font-size: 14px; }
  .op__network-node--ai, .op__network-node--fullstack, .op__network-node--devops, .op__network-node--cloud { width: 66px; height: 66px; }
  .op__network-node-ico { font-size: 14px; margin-bottom: 3px; }
  .op__network-node-label { font-size: 10px; }
}
/* ---------- 01. More Than a Job Title ---------- */
.op__intro { padding: 100px 0; background: var(--op-bg); }
.op__intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
/* Reuses the hero's .op__network-* diagram markup/CSS, just in a normal
   (non-edge-breaking) sized box instead of the hero's absolute positioning
   against the full section width. */
.op__intro-network { position: relative; width: 100%; max-width: 460px; aspect-ratio: 600 / 520; margin: 0 auto; }
.op__intro-head { max-width: 520px; margin-left: auto; text-align: left; }
@media only screen and (max-width: 991px) {
  .op__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .op__intro-head { margin-left: 0; max-width: none; text-align: center; }
  .op__intro-network { order: -1; }
}

/* ---------- 02. Current Opportunities ----------
   Compact cards here (not full long-form job descriptions), so this
   section stays a fixed height as more roles are added later - each
   card's full JD lives in a Bootstrap modal instead (.op__role-modal
   below), opened via data-bs-toggle. ---------- */
.op__roles { padding: 130px 0 100px; background: #fff; }
.op__roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.op__role-mini { border: 1px solid var(--op-b); border-radius: 20px; padding: 34px 30px; background: var(--op-bg); transition: all .35s ease; }
.op__role-mini:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); background: #fff; }
.op__role-mini-num { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; color: var(--op-c2); margin-bottom: 10px; }
.op__role-mini h3 { font-size: 21px; font-weight: 600; color: var(--op-h); margin: 0 0 14px; }
.op__role-mini .op__role-meta { margin-bottom: 16px; }
.op__role-mini-blurb { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--op-t); margin: 0 0 22px; }

.op__role-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.op__role-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 30px; background: #fff; border: 1px solid var(--op-b); font-size: 13px; font-weight: 600; color: var(--op-h); }
.op__role-meta i { color: var(--op-c); font-size: 12px; }

/* ---------- Role detail modal (full job description) ---------- */
.op__page .op__role-modal .modal-content { border: none; border-radius: 22px; font-family: "Kanit", sans-serif; }
.op__page .op__role-modal .modal-header { padding: 30px 40px; border-bottom: 1px solid var(--op-b); }
.op__page .op__role-modal .modal-title { font-size: 24px; font-weight: 600; color: var(--op-h); margin: 0; }
.op__page .op__role-modal .modal-body { padding: 36px 40px 40px; }
.op__page .op__role-modal .op__role-meta { margin-bottom: 26px; }
.op__page .op__role-modal h4 { font-size: 15.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--op-c); margin: 26px 0 16px; }
.op__page .op__role-modal h4:first-of-type { margin-top: 0; }
.op__role-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 28px 0; }
.op__role-list { list-style: none; margin: 0; padding: 0; }
.op__role-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; font-weight: 300; color: var(--op-t); line-height: 1.6; }
.op__role-list li i { color: var(--op-c); font-size: 11px; margin-top: 6px; flex: 0 0 auto; }
.op__role-focus { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.op__role-focus span { padding: 9px 18px; border-radius: 30px; background: var(--op-bg); border: 1px solid var(--op-b); font-size: 13.5px; font-weight: 500; color: var(--op-t); }
.op__role-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--op-b); }
.op__role-foot p { margin: 0; font-size: 14px; font-weight: 400; color: var(--op-t); }

/* ---------- 03. Why Work With 3Shadz ---------- */
.op__defines { padding: 100px 0; background: var(--op-bg); }
.op__defines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.op__defines-card { padding: 28px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--op-b); transition: all .35s ease; }
.op__defines-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 30, 43, .08); }
.op__defines-card .op__ico { width: 46px; height: 46px; font-size: 18px; margin-bottom: 16px; }
.op__defines-card h3 { font-size: 16px; font-weight: 600; color: var(--op-h); margin: 0 0 10px; }
.op__defines-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--op-t); margin: 0; }

/* ---------- 04. Who We Are Looking For ---------- */
.op__lookfor { padding: 100px 0; background: #fff; }
.op__lookfor-pills { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 980px; margin: 0 auto; }
.op__lookfor-pill {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; border-radius: 50px;
  background: var(--op-bg); border: 1px solid var(--op-b); transition: all .3s ease;
}
.op__lookfor-pill:hover { background: #fff; box-shadow: 0 16px 34px rgba(28, 30, 43, .08); transform: translateY(-3px); }
.op__lookfor-pill i { color: var(--op-c); font-size: 15px; flex: 0 0 auto; }
.op__lookfor-pill span { font-size: 14.5px; font-weight: 500; color: var(--op-h); }

/* ---------- 05. How to Apply ---------- */
.op__apply { padding: 100px 0; background: var(--op-dark); position: relative; overflow: hidden; }
.op__apply::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.op__apply > .container { position: relative; z-index: 1; }
.op__apply .op__eyebrow { color: var(--op-c3); }
.op__apply .op__title { color: #fff; }
.op__apply .op__text { color: var(--op-muted); }
.op__apply-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 20px 0 48px; }
.op__apply-card { position: relative; padding: 30px 26px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); transition: all .35s ease; }
.op__apply-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
.op__apply-card .op__step-num { display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--op-c3); margin-bottom: 14px; }
.op__apply-card h3 { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.op__apply-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--op-muted); margin: 0; }
.op__apply-cta { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.op__apply-cta .op__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.op__apply-cta .op__btn-outline:hover { background: #fff; color: var(--op-dark); }

/* ---------- 06. Don't See the Right Role ---------- */
.op__more { padding: 90px 0; background: #fff; }
.op__more-panel { max-width: 860px; margin: 0 auto; text-align: center; padding: 56px 50px; border-radius: 24px; background: var(--op-bg); border: 1px solid var(--op-b); }
.op__more-panel .op__ico { margin: 0 auto 20px; }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.op__final-emphasis { max-width: 560px; margin: 0 auto 30px; }
.op__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--op-h); line-height: 1.5; margin: 0 0 4px; }
.op__final-emphasis p:last-child { color: var(--op-c); margin-bottom: 0; }
.op__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .op__page .op__title { font-size: 32px; }
  .op__hero { padding: 170px 0 90px; }
  .op__hero-title { font-size: 44px; }
  .op__roles { padding: 100px 0 80px; }
  .op__role-cols { grid-template-columns: 1fr; gap: 10px; }
  .op__defines-grid { grid-template-columns: repeat(3, 1fr); }
  .op__apply-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  .op__page .op__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .op__page .op__title { font-size: 26px; }
  .op__page .op__btn, .op__page .op__btn-outline { padding: 15px 26px; font-size: 15px; }
  .op__hero { padding: 150px 0 60px; }
  .op__hero-title { font-size: 34px; }
  .op__hero-lead { font-size: 16px; }
  .op__roles, .op__defines, .op__lookfor, .op__apply, .op__more { padding: 70px 0; }
  .op__roles-grid { grid-template-columns: 1fr; }
  .op__defines-grid { grid-template-columns: 1fr; }
  .op__apply-grid { grid-template-columns: 1fr; }
  .op__more-panel { padding: 40px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .op__page .op__defines-card,
  .op__page .op__lookfor-pill,
  .op__page .op__apply-card,
  .op__page .op__role-mini,
  .op__page .op__btn,
  .op__page .op__btn-outline { transition: none !important; }
  .op__page .op__defines-card:hover,
  .op__page .op__lookfor-pill:hover,
  .op__page .op__apply-card:hover,
  .op__page .op__role-mini:hover { transform: none !important; }
  .op__network-node, .op__network-node-ico, .op__network-node-sub { animation: none !important; }
}

/* ============================================================
   LIFE AT 3SHADZ PAGE (life__*)
   Scoped entirely to .life__page (added on <main> of
   life-at-3shadz.html). Follows the shared page-module pattern
   used by .cr__page / .op__page. This is one of the five careers
   subpages (the hub is careers.html) and is deliberately the most
   editorial of the three built so far - careers.html reads
   clean/professional and open-positions.html reads structured/
   recruitment-focused, so this page leans into oversized type, an
   overlapping photo collage and a horizontal photo marquee instead
   of their card-grid layouts. Same brand tokens as .cr__page /
   .op__page (blue/purple/light-blue on dark #07152F) throughout -
   no new accent color introduced, so it still reads as the same
   site rather than a bolted-on microsite.
   Nothing in this block leaks outside .life__page.
   ============================================================ */
.life__page {
  --lf-c: #005fcc;
  --lf-c2: #8079f8;
  --lf-c3: #4da3ff;
  --lf-h: #1c1e2b;
  --lf-t: #6b7089;
  --lf-b: #e9eaf5;
  --lf-bg: #f6f7fc;
  --lf-dark: #07152F;
  --lf-muted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.life__page .life__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--lf-c);
  margin-bottom: 18px;
}
.life__page .life__title { font-size: 38px; line-height: 1.24; font-weight: 600; color: var(--lf-h); margin: 0 0 20px; }
.life__page .life__title--light { color: #fff; }
.life__page .life__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--lf-t); margin: 0 0 18px; }
.life__page .life__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--lf-t); margin: 0 0 14px; }
.life__page .life__text:last-child { margin-bottom: 0; }
.life__page .life__text strong { color: var(--lf-h); font-weight: 600; }
.life__page .life__head { max-width: 780px; }
.life__page .life__head--center { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.life__page .life__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--lf-c);
  margin: 44px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 640px;
}
.life__page .life__btn,
.life__page .life__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.life__page .life__btn { color: #fff; background: var(--lf-c); border: 2px solid var(--lf-c); }
.life__page .life__btn:hover { background: var(--lf-c2); border-color: var(--lf-c2); color: #fff; }
.life__page .life__btn-outline { color: var(--lf-c); border: 2px solid var(--lf-c); background: transparent; }
.life__page .life__btn-outline:hover { background: var(--lf-c); color: #fff; }
.life__page .life__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--lf-c);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}
.life__page .life__cap-cta { text-align: center; margin-top: 40px; }

/* ---------- Hero (two-column: copy left, rotating cube right) ---------- */
.life__hero { position: relative; overflow: hidden; background: var(--lf-dark); padding: 200px 0 120px; }
.life__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 88% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(760px 420px at 6% 112%, rgba(128, 121, 248, .24), transparent 62%);
}
.life__hero > .container { position: relative; z-index: 2; }
.life__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.life__hero-eyebrow { display: block; font-size: 15px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--lf-c3); margin-bottom: 20px; }
.life__hero-title { font-size: 60px; line-height: 1.08; font-weight: 700; color: #fff; margin: 0 0 24px; }
.life__hero-title span { color: var(--lf-c3); }
.life__hero-lead { font-size: 20px; line-height: 1.7; color: #e6ecfa; font-weight: 500; margin: 0 0 18px; }
.life__hero-text { font-size: 16px; line-height: 1.85; color: var(--lf-muted); font-weight: 300; margin: 0 0 40px; }
.life__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }
.life__hero-cta .life__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.life__hero-cta .life__btn-outline:hover { background: #fff; color: var(--lf-dark); }

/* ---------- Hero cube (scroll-scrubbed 3D rotation through 4 photos) ----------
   A true 4-sided cube (front/right/back/left faces, each one photo) sits in
   the hero's right column. JS (inline script near the end of
   life-at-3shadz.html) pins the hero section and drives the cube's rotateY
   directly from scroll position via GSAP ScrollTrigger's `scrub` - it is
   NOT a timed auto-rotate. That script skips entirely below 992px and
   under prefers-reduced-motion, in which case this CSS alone renders a
   plain static front face (rotateY defaults to 0deg) with no pin and no
   extra scroll length, matching this page's existing convention of
   dropping heavy hero visual treatments on small/touch viewports (see
   .life__hero-pile's old breakpoint behavior, and .cr__hero-collage on
   careers.html). --depth must stay half of .life__cube-stage's own
   width for the faces to meet edge-to-edge when rotated. */
.life__cube-stage { position: relative; width: 360px; height: 360px; max-width: 100%; margin: 0 auto; perspective: 1600px; --depth: 180px; }
.life__cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(0deg); will-change: transform; }
.life__cube-face {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  backface-visibility: hidden;
}
.life__cube-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.life__cube-face--front { transform: translateZ(var(--depth)); }
.life__cube-face--right { transform: rotateY(90deg) translateZ(var(--depth)); }
.life__cube-face--back { transform: rotateY(180deg) translateZ(var(--depth)); }
.life__cube-face--left { transform: rotateY(-90deg) translateZ(var(--depth)); }

/* ---------- 01. Introduction ---------- */
.life__intro { padding: 110px 0 100px; background: #fff; }
.life__intro-body { max-width: 760px; margin: 0 auto; text-align: center; }
.life__intro-body .life__text { font-size: 17px; }

/* ---------- 02. Manifesto (oversized type) ---------- */
.life__manifesto { padding: 140px 0; background: var(--lf-dark); position: relative; overflow: hidden; text-align: center; }
.life__manifesto::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 50% 0%, rgba(0, 95, 204, .22), transparent 65%);
}
.life__manifesto > .container { position: relative; z-index: 1; }
.life__manifesto-title {
  font-size: 76px;
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
  margin: 0 auto 34px;
  max-width: 980px;
  text-transform: uppercase;
}
.life__manifesto-title span { color: var(--lf-c3); }
.life__manifesto-text { font-size: 18px; line-height: 1.8; color: var(--lf-muted); font-weight: 300; max-width: 620px; margin: 0 auto; }

/* ---------- 03. Culture Pillars ---------- */
.life__pillars { padding: 110px 0; background: var(--lf-bg); }

/* ---------- Shared editorial ghost-numeral list ----------
   Deliberately not another card grid - a stacked list of hairline-divided
   rows, each fronted by an oversized translucent numeral instead of a
   colored icon tile. Reused as-is by Culture Pillars (below), Day-to-Day
   Life and Your Experience at 3Shadz (both further down this file -
   search "life__editorial-list") instead of three separate one-off card
   systems, so all three read as one consistent alternative to a card
   grid rather than three more bespoke components. */
.life__editorial-list { max-width: 940px; margin: 0 auto; border-top: 1px solid var(--lf-b); }
.life__editorial-row {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: start;
  gap: 30px;
  padding: 44px 0;
  border-bottom: 1px solid var(--lf-b);
  opacity: 0;
  transform: translateY(24px);
  transition: background-color .3s ease;
}
.life__editorial-row:hover { background: rgba(0, 95, 204, .035); }
.life__editorial-num {
  font-family: "Kanit", sans-serif;
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  color: var(--lf-b);
  transition: color .3s ease;
  user-select: none;
}
.life__editorial-row:hover .life__editorial-num { color: var(--lf-c3); }
.life__editorial-body .life__ico { margin-bottom: 16px; }
.life__editorial-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--lf-c); margin-bottom: 8px; }
.life__editorial-body h3 { font-size: 21px; font-weight: 600; color: var(--lf-h); margin: 0 0 10px; }
.life__editorial-body p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--lf-t); margin: 0; max-width: 640px; }


/* Reveal: each row cascades in as its own list scrolls into view (own
   IntersectionObserver per list, inline script near the end of
   life-at-3shadz.html) - not the shared .fade_bottom_4 hookup, which
   fires one global tween keyed to wherever the first .fade_bottom_4
   element on the page sits, rather than per-section. */
.life__editorial-list.is-inview .life__editorial-row { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease, background-color .3s ease; }
.life__editorial-list.is-inview .life__editorial-row:nth-child(1) { transition-delay: 0s; }
.life__editorial-list.is-inview .life__editorial-row:nth-child(2) { transition-delay: .08s; }
.life__editorial-list.is-inview .life__editorial-row:nth-child(3) { transition-delay: .16s; }
.life__editorial-list.is-inview .life__editorial-row:nth-child(4) { transition-delay: .24s; }
.life__editorial-list.is-inview .life__editorial-row:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .life__editorial-row { opacity: 1; transform: none; transition: none !important; }
}

/* ---------- 04. One Team (statement + photo marquee) ---------- */
.life__unity { padding: 120px 0 0; background: var(--lf-dark); position: relative; overflow: hidden; }
.life__unity-head { text-align: center; padding: 0 0 70px; }
.life__unity-title { font-size: 50px; line-height: 1.16; font-weight: 700; color: #fff; margin: 0 auto 22px; max-width: 820px; text-transform: uppercase; }
.life__unity-title span { color: var(--lf-c3); }
.life__unity-text { font-size: 16px; line-height: 1.85; color: var(--lf-muted); font-weight: 300; max-width: 600px; margin: 0 auto; }

/* ---------- Staggered photo grid, tumbling in one-by-one as the section
   pins and scroll scrubs through them ----------
   The section text shows alone first. Inline script near the end of
   life-at-3shadz.html pins .life__unity and drives a GSAP timeline
   directly from scroll position (scrub, not a timer): each photo tumbles
   in (rotated + scaled down + transparent -> its resting tilt, full size,
   opaque) one after another, then the whole section dissolves under a
   blur as the pin releases into the next section. That script does the
   gsap.set(...) that puts the photos in their hidden/tumbled starting
   state, and ONLY runs on desktop without prefers-reduced-motion - so the
   default state here must be plainly visible (no opacity:0 baked into
   this CSS), or mobile/reduced-motion visitors would see nothing. */
.life__unity-gallery { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 0 0 90px; }
.life__unity-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .08); z-index: 0; }
.life__unity-item {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
  transform: rotate(var(--tilt, 0deg));
}
.life__unity-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.life__unity-item--1 { margin-top: 0; --tilt: -3deg; }
.life__unity-item--2 { margin-top: 60px; --tilt: 4deg; }
.life__unity-item--3 { margin-top: -10px; --tilt: -2deg; }
.life__unity-item--4 { margin-top: 40px; --tilt: 5deg; }
.life__unity-item--5 { margin-top: 10px; --tilt: -4deg; }

/* ---------- 05. A Day at 3Shadz (horizontal gradient timeline) ----------
   Deliberately its own system, not a third use of the editorial
   ghost-numeral list (Pillars/Your Experience) or the wavy dotted-path
   SVG used later for Growth - a day has a natural beginning-to-end arc,
   so this reads as literal stops along that arc: a gradient line (cool
   blue -> warm purple, morning-to-evening) with circular icon nodes
   sitting on it, each node's white fill naturally occluding the line
   behind it ("beads on a string"). The gradient segment draws in via
   scaleX and the nodes/text cascade in afterward, both gated on
   .is-inview (own IntersectionObserver, inline script near the end of
   life-at-3shadz.html). ---------- */
.life__day { padding: 110px 0; background: #fff; }
.life__timeline { padding-top: 10px; }
.life__timeline-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: 29px; }
.life__timeline-track {
  position: absolute;
  top: 29px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--lf-b);
  overflow: hidden;
}
.life__timeline-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--lf-c3), var(--lf-c), var(--lf-c2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s ease;
}
.life__timeline.is-inview .life__timeline-track::after { transform: scaleX(1); }
.life__timeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.life__timeline.is-inview .life__timeline-step { opacity: 1; transform: translateY(0); }
.life__timeline.is-inview .life__timeline-step:nth-child(2) { transition-delay: .35s; }
.life__timeline.is-inview .life__timeline-step:nth-child(3) { transition-delay: .55s; }
.life__timeline.is-inview .life__timeline-step:nth-child(4) { transition-delay: .75s; }
.life__timeline.is-inview .life__timeline-step:nth-child(5) { transition-delay: .95s; }
.life__timeline-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--lf-c);
  color: var(--lf-c);
  font-size: 19px;
  margin-bottom: 20px;
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.life__timeline-step:hover .life__timeline-node { transform: scale(1.1); border-color: var(--lf-c2); color: var(--lf-c2); }
.life__timeline-step h3 { font-size: 17px; font-weight: 600; color: var(--lf-h); margin: 0 0 8px; }
.life__timeline-step p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--lf-t); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .life__timeline-track::after,
  .life__timeline-step,
  .life__timeline-node { transition: none !important; }
  .life__timeline-track::after { transform: scaleX(1); }
  .life__timeline-step { opacity: 1; transform: none; }
}

/* ---------- 06. The Moments Between the Milestones ---------- */
.life__moments { padding: 130px 0 170px; background: var(--lf-bg); }
.life__moments-gallery { position: relative; margin-top: 70px; max-width: 980px; margin-left: auto; margin-right: auto; }
.life__moments-main { height: 460px; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(28, 30, 43, .16); }
.life__moments-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.life__moments-float {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 20px 40px rgba(28, 30, 43, .2);
}
.life__moments-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.life__moments-float span {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 6px 14px; border-radius: 30px;
  background: rgba(7, 21, 47, .8); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.life__moments-float--1 { width: 190px; height: 150px; left: -40px; bottom: -50px; transform: rotate(-6deg); z-index: 2; }
.life__moments-float--2 { width: 190px; height: 150px; right: -30px; top: -40px; transform: rotate(5deg); z-index: 2; }
.life__moments-float--3 { width: 170px; height: 140px; right: 90px; bottom: -70px; transform: rotate(-4deg); z-index: 3; }

/* ---------- 07. A Place to Learn From Each Other ---------- */
.life__learnfrom { padding: 110px 0; background: #fff; }
.life__learnfrom-body { max-width: 760px; margin: 60px auto 0; text-align: center; }
.life__learnfrom-body .life__text { font-size: 17px; }

/* ---------- 08. Your Career Doesn't Have to Follow One Straight Line ---------- */
.life__path { padding: 130px 0; background: var(--lf-dark); position: relative; overflow: hidden; }
.life__path::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.life__path > .container { position: relative; z-index: 1; }
.life__path .life__eyebrow { color: var(--lf-c3); }
.life__path .life__title { color: #fff; }
.life__path .life__text { color: var(--lf-muted); }
.life__path-svg { width: 100%; height: auto; margin: 60px 0 20px; overflow: visible; }
.life__path-line { fill: none; stroke: var(--lf-c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease; }
.life__path.is-inview .life__path-line { stroke-dashoffset: 0; }
.life__path-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.life__path.is-inview .life__path-dot { opacity: 1; transform: scale(1); }
.life__path-dots .life__path-dot:nth-child(2) { transition-delay: .3s; }
.life__path-dots .life__path-dot:nth-child(3) { transition-delay: .6s; }
.life__path-dots .life__path-dot:nth-child(4) { transition-delay: .9s; }
.life__path-dots .life__path-dot:nth-child(5) { transition-delay: 1.2s; }
.life__path-labels { display: flex; justify-content: space-between; gap: 12px; }
.life__path-labels span { flex: 1 1 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--lf-muted); }

/* ---------- 09. Stay Curious (interactive big-word switcher) ----------
   Not another pill/card row - five large kinetic-type words instead,
   matching the site's own love of oversized typography (Manifesto,
   Cinematic, Mantra) but made interactive: click a word and one shared
   panel below swaps to its icon + description, rather than showing all
   five descriptions at once. Click handling lives in an inline script
   near the end of life-at-3shadz.html; the CSS here only needs
   .is-active to know which word/panel is current. */
.life__curious { padding: 110px 0; background: var(--lf-bg); }
.life__curious-words { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 36px; margin-bottom: 54px; }
.life__curious-word {
  background: none;
  border: 0;
  padding: 0 0 6px;
  cursor: pointer;
  font-family: "Kanit", sans-serif;
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--lf-b);
  border-bottom: 3px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.life__curious-word:hover { color: var(--lf-c3); }
.life__curious-word.is-active { color: var(--lf-c); border-bottom-color: var(--lf-c); }
.life__curious-panel { position: relative; max-width: 620px; margin: 0 auto; text-align: center; min-height: 130px; }
.life__curious-panel-item { display: none; flex-direction: column; align-items: center; gap: 16px; }
.life__curious-panel-item.is-active { display: flex; animation: lifeCuriousFade .4s ease; }
.life__curious-panel-item .life__ico { margin: 0; }
.life__curious-panel-item p { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--lf-t); margin: 0; }
@keyframes lifeCuriousFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .life__curious-word { transition: none !important; }
  .life__curious-panel-item.is-active { animation: none !important; }
}

/* ---------- 10. The Team Outside the Task ---------- */
.life__together { padding: 110px 0; background: #fff; }
.life__together-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.life__together-figure { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 70px rgba(28, 30, 43, .16); }
.life__together-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 11. Come for the Technology ---------- */
.life__cinematic { position: relative; padding: 160px 0; overflow: hidden; text-align: center; }
.life__cinematic-bg { position: absolute; inset: 0; z-index: 0; }
.life__cinematic-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.3) brightness(.35); }
.life__cinematic-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 21, 47, .75), rgba(7, 21, 47, .92)); }
.life__cinematic > .container { position: relative; z-index: 1; }
.life__cinematic-title { font-size: 52px; line-height: 1.18; font-weight: 800; color: #fff; margin: 0 auto 30px; max-width: 760px; text-transform: uppercase; }
.life__cinematic-text p { font-size: 18px; line-height: 1.7; color: var(--lf-muted); font-weight: 300; margin: 0 0 4px; }
.life__cinematic-text p:last-child { color: var(--lf-c3); font-weight: 600; margin-top: 14px; }

/* ---------- 12. Your Experience at 3Shadz (full-bleed alternating bands) ----------
   The one layout novelty this page hadn't used yet: every other section
   stays within .container's max-width, so these five rows deliberately
   break out to full viewport width (the width:100vw/negative-margin
   trick - safe here because ScrollSmoother already sets overflow:hidden
   on #smooth-wrapper at runtime, which clips the bleed's horizontal
   overflow the same way it would need to anyway for its own scroll
   virtualization). Icon and text swap sides on alternating rows via
   flex-direction: row-reverse, each with a giant translucent numeral
   watermark centered behind it. Rows fade in individually as each one
   - not the whole group at once - scrolls into view (own
   IntersectionObserver, inline script near the end of
   life-at-3shadz.html). */
.life__expect { padding: 110px 0 0; background: var(--lf-bg); }
.life__bands { display: flex; flex-direction: column; margin-top: 60px; }
.life__band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  border-top: 1px solid var(--lf-b);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease, background-color .3s ease;
}
.life__band:last-child { border-bottom: 1px solid var(--lf-b); }
.life__band:nth-child(even) { background: rgba(0, 95, 204, .045); }
.life__band:hover { background: rgba(0, 95, 204, .07); }
.life__band.is-inview { opacity: 1; transform: translateY(0); }
.life__band-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 54px 24px;
  display: flex;
  align-items: center;
  gap: 44px;
}
.life__band:nth-child(even) .life__band-inner { flex-direction: row-reverse; }
.life__band-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Kanit", sans-serif;
  font-size: 200px;
  font-weight: 800;
  line-height: 1;
  color: rgba(0, 95, 204, .045);
  z-index: 0;
  user-select: none;
  white-space: nowrap;
}
.life__band-ico { position: relative; z-index: 1; flex: 0 0 auto; width: 80px; height: 80px; border-radius: 22px; font-size: 30px; margin: 0; }
.life__band-text { position: relative; z-index: 1; flex: 1 1 auto; max-width: 560px; }
.life__band-text h3 { font-size: 26px; font-weight: 600; color: var(--lf-h); margin: 0 0 12px; }
.life__band-text p { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--lf-t); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .life__band { transition: none !important; opacity: 1; transform: none; }
}

/* ---------- 13. Culture in One Sentence ---------- */
.life__mantra { padding: 140px 0; background: var(--lf-dark); text-align: center; }
.life__mantra-lines { margin: 0 auto 30px; max-width: 900px; }
.life__mantra-lines p { font-size: 46px; line-height: 1.28; font-weight: 800; text-transform: uppercase; margin: 0; }
.life__mantra-lines p:nth-child(1) { color: var(--lf-c3); }
.life__mantra-lines p:nth-child(2) { color: var(--lf-c2); }
.life__mantra-lines p:nth-child(3) { color: #fff; }
.life__mantra-sub { font-size: 16px; color: var(--lf-muted); font-weight: 300; }

/* ---------- 14. Think You'd Fit In? ---------- */
.life__join { padding: 110px 0; background: #fff; }
.life__join-panel { max-width: 860px; margin: 0 auto; text-align: center; padding: 60px 50px; border-radius: 24px; background: var(--lf-bg); border: 1px solid var(--lf-b); }
.life__join-panel .life__ico { margin: 0 auto 20px; }
.life__join-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 30px; }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.life__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .life__page .life__title { font-size: 32px; }
  .life__hero { padding: 180px 0 100px; }
  .life__hero-title { font-size: 46px; }
  .life__hero-grid { gap: 40px; }
  .life__cube-stage { width: 290px; height: 290px; --depth: 145px; }
  .life__manifesto-title { font-size: 58px; }
  .life__unity-title { font-size: 40px; }
  .life__unity-gallery { grid-template-columns: repeat(3, 1fr); }
  .life__editorial-num { font-size: 64px; }
  .life__band-num { font-size: 150px; }
  .life__curious-word { font-size: 32px; }
  .life__cinematic-title { font-size: 40px; }
  .life__mantra-lines p { font-size: 34px; }
  .life__together-grid { grid-template-columns: 1fr; gap: 40px; }
  .life__moments-main { height: 380px; }
}
@media only screen and (max-width: 991px) {
  .life__hero-grid { grid-template-columns: 1fr; }
  .life__cube-stage { display: none; }
  .life__hero { padding: 170px 0 80px; }
  .life__unity-gallery { grid-template-columns: repeat(2, 1fr); }
  .life__unity-item { margin-top: 0 !important; }
  .life__unity-line { display: none; }
  .life__editorial-row { grid-template-columns: 80px 1fr; gap: 20px; }
  .life__timeline-steps { grid-template-columns: repeat(3, 1fr); row-gap: 50px; padding-top: 0; }
  .life__timeline-track { display: none; }
  .life__moments-float { display: none; }
  .life__moments-main { height: 320px; }
  .life__moments { padding: 100px 0 110px; }
}
@media only screen and (max-width: 767px) {
  .life__page .life__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .life__page .life__title { font-size: 26px; }
  .life__page .life__btn, .life__page .life__btn-outline { padding: 15px 26px; font-size: 15px; }
  .life__hero { padding: 150px 0 70px; }
  .life__hero-title { font-size: 32px; }
  .life__hero-lead { font-size: 17px; }
  .life__manifesto-title { font-size: 36px; }
  .life__manifesto { padding: 90px 0; }
  .life__unity-title { font-size: 28px; }
  .life__unity-gallery { grid-template-columns: 1fr; gap: 18px; max-width: 320px; margin: 0 auto; }
  .life__editorial-row { grid-template-columns: 1fr; gap: 10px; padding: 30px 0; }
  .life__editorial-num { font-size: 44px; }
  .life__timeline-steps { grid-template-columns: 1fr; row-gap: 34px; }
  .life__band-inner { flex-direction: column !important; align-items: flex-start; gap: 18px; padding: 40px 24px; }
  .life__band-num { font-size: 100px; }
  .life__band-text h3 { font-size: 21px; }
  .life__curious-word { font-size: 24px; }
  .life__curious-words { gap: 8px 20px; margin-bottom: 40px; }
  .life__intro, .life__pillars, .life__day, .life__moments, .life__learnfrom,
  .life__path, .life__curious, .life__together, .life__expect, .life__join { padding: 70px 0; }
  .life__cinematic { padding: 100px 0; }
  .life__cinematic-title { font-size: 28px; }
  .life__mantra { padding: 90px 0; }
  .life__mantra-lines p { font-size: 24px; }
  .life__join-panel { padding: 40px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .life__page .life__btn,
  .life__page .life__btn-outline { transition: none !important; }
  .life__path-line, .life__path-dot { transition: none !important; }
}

/* ============================================================
   BENEFITS & PERKS PAGE (benefits-perks.html)
   Scoped entirely to .bnf__page (added on <main> of
   benefits-perks.html). Fourth of the five careers subpages
   (hub is careers.html). Built around the brief's GROW ->
   INNOVATE -> CONNECT -> THRIVE -> JOIN structure: a pillar
   navigator (.bnf__nav) links the four alternating light/dark
   .bnf__pillar sections, each opening with one full-width
   .bnf__feature "hero benefit" panel (AI Innovation Time, Idea ->
   Impact, Cross-Technology Exposure, Focus Over Face Time, Life
   Happens) and closing with a denser .bnf__editorial-list of the
   remaining supporting perks - deliberately not twenty equal
   cards. Same brand tokens as .cr__page / .life__page / .op__page
   (blue/purple/light-blue on dark #07152F) - no new accent color.
   Nothing in this block leaks outside .bnf__page.
   ============================================================ */
.bnf__page {
  --bnf-c: #005fcc;
  --bnf-c2: #8079f8;
  --bnf-c3: #4da3ff;
  --bnf-h: #1c1e2b;
  --bnf-t: #6b7089;
  --bnf-b: #e9eaf5;
  --bnf-bg: #f6f7fc;
  --bnf-dark: #07152F;
  --bnf-muted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.bnf__page .bnf__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bnf-c);
  margin-bottom: 18px;
}
.bnf__page .bnf__eyebrow--light { color: var(--bnf-c3); }
.bnf__page .bnf__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--bnf-h); margin: 0 0 20px; }
.bnf__page .bnf__title--light { color: #fff; }
.bnf__page .bnf__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--bnf-t); margin: 0 0 14px; }
.bnf__page .bnf__text:last-child { margin-bottom: 0; }
.bnf__page .bnf__text strong { color: var(--bnf-h); font-weight: 600; }
.bnf__page .bnf__text--light { color: var(--bnf-muted); }
.bnf__page .bnf__text--light strong { color: #fff; }
.bnf__page .bnf__head { max-width: 780px; }
.bnf__page .bnf__head--center { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.bnf__page .bnf__btn,
.bnf__page .bnf__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.bnf__page .bnf__btn { color: #fff; background: var(--bnf-c); border: 2px solid var(--bnf-c); }
.bnf__page .bnf__btn:hover { background: var(--bnf-c2); border-color: var(--bnf-c2); color: #fff; }
.bnf__page .bnf__btn-outline { color: var(--bnf-c); border: 2px solid var(--bnf-c); background: transparent; }
.bnf__page .bnf__btn-outline:hover { background: var(--bnf-c); color: #fff; }
.bnf__page .bnf__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--bnf-c);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}
.bnf__page .bnf__cap-cta { text-align: center; margin-top: 40px; }

/* ---------- Hero (copy left, orbiting-perks visual right) ---------- */
.bnf__hero { position: relative; overflow: hidden; background: var(--bnf-dark); padding: 200px 0 120px; }
.bnf__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 88% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(760px 420px at 6% 112%, rgba(128, 121, 248, .24), transparent 62%);
}
.bnf__hero > .container { position: relative; z-index: 2; }
.bnf__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.bnf__hero-eyebrow { display: block; font-size: 15px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--bnf-c3); margin-bottom: 20px; }
.bnf__hero-title { font-size: 56px; line-height: 1.1; font-weight: 700; color: #fff; margin: 0 0 24px; }
.bnf__hero-title span { color: var(--bnf-c3); }
.bnf__hero-lead { font-size: 20px; line-height: 1.7; color: #e6ecfa; font-weight: 500; margin: 0 0 18px; }
.bnf__hero-text { font-size: 16px; line-height: 1.85; color: var(--bnf-muted); font-weight: 300; margin: 0 0 40px; }
.bnf__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }
.bnf__hero-cta .bnf__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.bnf__hero-cta .bnf__btn-outline:hover { background: #fff; color: var(--bnf-dark); }

/* ---------- Hero orbit visual ----------
   Two dashed rings orbit a center "YOU" core in opposite
   directions (pure CSS @keyframes, no JS). Each ring's icon
   nodes carry their own counter-rotation animation, matched in
   duration/direction to their parent ring, so the icons stay
   upright while still sweeping around the core - the same
   composited-transform trick used for planet icons on an
   orbit diagram. Decorative only (aria-hidden) and dropped
   entirely below 992px, matching this page family's convention
   of shedding heavy hero visuals on small viewports (see
   .life__cube-stage, .cr__hero-collage). */
.bnf__orbit-stage { position: relative; width: 380px; height: 380px; max-width: 100%; margin: 0 auto; }
.bnf__orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bnf-c), var(--bnf-c2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 2px;
  box-shadow: 0 0 0 10px rgba(0, 95, 204, .14), 0 24px 54px rgba(0, 0, 0, .45);
  z-index: 2;
}
.bnf__orbit-ring {
  position: absolute; top: 50%; left: 50%;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.bnf__orbit-ring--1 { width: 230px; height: 230px; animation: bnfOrbitCW 22s linear infinite; }
.bnf__orbit-ring--2 { width: 380px; height: 380px; animation: bnfOrbitCCW 34s linear infinite; }
.bnf__orbit-node {
  position: absolute;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: #0d2347;
  border: 2px solid rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  color: var(--bnf-c3); font-size: 18px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.bnf__orbit-node:nth-child(1) { top: 0; left: 50%; }
.bnf__orbit-node:nth-child(2) { top: 75%; left: 93.3%; }
.bnf__orbit-node:nth-child(3) { top: 75%; left: 6.7%; }
.bnf__orbit-ring--1 .bnf__orbit-node i { display: inline-block; animation: bnfNodeCCW 22s linear infinite; }
.bnf__orbit-ring--2 .bnf__orbit-node i { display: inline-block; animation: bnfNodeCW 34s linear infinite; }
@keyframes bnfOrbitCW { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bnfOrbitCCW { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes bnfNodeCCW { to { transform: rotate(-360deg); } }
@keyframes bnfNodeCW { to { transform: rotate(360deg); } }

/* ---------- 01. Intro ---------- */
.bnf__intro { padding: 110px 0 100px; background: #fff; }

/* ---------- 02. Pillar navigator ---------- */
.bnf__nav { padding: 10px 0 6px; background: #fff; border-bottom: 1px solid var(--bnf-b); }
.bnf__nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 6px; padding: 24px 0; }
.bnf__nav-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 30px;
  border: 1px solid var(--bnf-b);
  color: var(--bnf-t); font-size: 14px; font-weight: 600;
  transition: all .3s ease;
}
.bnf__nav-pill i { font-size: 13px; color: var(--bnf-c3); transition: color .3s ease; }
.bnf__nav-pill:hover { border-color: var(--bnf-c); color: var(--bnf-c); }
.bnf__nav-pill.is-active { background: var(--bnf-c); border-color: var(--bnf-c); color: #fff; }
.bnf__nav-pill.is-active i { color: #fff; }
.bnf__nav-arrow { color: var(--bnf-b); font-size: 18px; }

/* ---------- Pillar sections (alternating light / dark) ---------- */
.bnf__pillar { padding: 110px 0; }
.bnf__pillar--light { background: var(--bnf-bg); }
.bnf__pillar--dark { background: var(--bnf-dark); position: relative; overflow: hidden; }
.bnf__pillar--dark::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .26), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .2), transparent 64%);
}
.bnf__pillar--dark > .container { position: relative; z-index: 1; }

/* ---------- "Hero benefit" feature panel ---------- */
.bnf__feature {
  display: flex; align-items: flex-start; gap: 36px;
  background: #fff; border: 1px solid var(--bnf-b); border-radius: 24px;
  padding: 44px; margin: 50px 0 60px;
  box-shadow: 0 24px 60px rgba(28, 30, 43, .08);
}
.bnf__feature-ico {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 20px;
  background: linear-gradient(135deg, var(--bnf-c), var(--bnf-c2));
  color: #fff; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px rgba(0, 95, 204, .28);
}
.bnf__feature-body { flex: 1 1 auto; }
.bnf__feature-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bnf-c); background: rgba(0, 95, 204, .08);
  padding: 6px 14px; border-radius: 30px; margin-bottom: 14px;
}
.bnf__feature-body h3 { font-size: 25px; font-weight: 600; color: var(--bnf-h); margin: 0 0 14px; }
.bnf__feature-body p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--bnf-t); margin: 0; }
.bnf__feature--dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.bnf__feature--dark .bnf__feature-tag { color: var(--bnf-c3); background: rgba(77, 163, 255, .12); }
.bnf__feature--dark .bnf__feature-body h3 { color: #fff; }
.bnf__feature--dark .bnf__feature-body p { color: var(--bnf-muted); }

.bnf__feature-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 50px 0 46px; }
.bnf__feature-duo .bnf__feature { margin: 0; flex-direction: column; }
.bnf__feature-duo .bnf__feature-ico { margin-bottom: 6px; }

.bnf__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.bnf__chain span {
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--bnf-muted); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 6px 13px; border-radius: 20px;
}
.bnf__chain-final { color: #fff !important; background: linear-gradient(135deg, var(--bnf-c), var(--bnf-c2)) !important; border-color: transparent !important; }
.bnf__chain i { color: var(--bnf-muted); font-size: 10px; }

.bnf__mini-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.bnf__mini-card {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px; padding: 32px; transition: all .3s ease;
}
.bnf__mini-card:hover { background: rgba(255, 255, 255, .07); transform: translateY(-4px); }
.bnf__mini-card .bnf__ico { background: rgba(77, 163, 255, .14); color: var(--bnf-c3); }
.bnf__mini-card h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.bnf__mini-card p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--bnf-muted); margin: 0; }

/* ---------- Supporting-perk ghost-numeral list (Grow / Connect / Thrive) ----------
   Same alternative-to-a-card-grid system as .life__editorial-list -
   reused so the site reads as one consistent pattern rather than a
   one-off. A --dark modifier recolors it for use on .bnf__pillar--dark
   (Thrive). Rows cascade in via their own IntersectionObserver
   (inline script near the end of benefits-perks.html), not the
   shared .fade_bottom_4 hookup. */
.bnf__editorial-list { max-width: 940px; margin: 0 auto; border-top: 1px solid var(--bnf-b); }
.bnf__editorial-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 26px;
  padding: 38px 0;
  border-bottom: 1px solid var(--bnf-b);
  opacity: 0;
  transform: translateY(24px);
  transition: background-color .3s ease;
}
.bnf__editorial-row:hover { background: rgba(0, 95, 204, .035); }
.bnf__editorial-num {
  font-family: "Kanit", sans-serif;
  font-size: 70px;
  font-weight: 800;
  line-height: 1;
  color: var(--bnf-b);
  transition: color .3s ease;
  user-select: none;
}
.bnf__editorial-row:hover .bnf__editorial-num { color: var(--bnf-c3); }
.bnf__editorial-body .bnf__ico { margin-bottom: 14px; }
.bnf__editorial-body h3 { font-size: 19px; font-weight: 600; color: var(--bnf-h); margin: 0 0 8px; }
.bnf__editorial-body p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--bnf-t); margin: 0; max-width: 640px; }
.bnf__editorial-list.is-inview .bnf__editorial-row { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease, background-color .3s ease; }
.bnf__editorial-list.is-inview .bnf__editorial-row:nth-child(1) { transition-delay: 0s; }
.bnf__editorial-list.is-inview .bnf__editorial-row:nth-child(2) { transition-delay: .08s; }
.bnf__editorial-list.is-inview .bnf__editorial-row:nth-child(3) { transition-delay: .16s; }
.bnf__editorial-list.is-inview .bnf__editorial-row:nth-child(4) { transition-delay: .24s; }
.bnf__editorial-list--dark { border-top-color: rgba(255, 255, 255, .12); }
.bnf__editorial-list--dark .bnf__editorial-row { border-bottom-color: rgba(255, 255, 255, .12); }
.bnf__editorial-list--dark .bnf__editorial-row:hover { background: rgba(77, 163, 255, .05); }
.bnf__editorial-list--dark .bnf__editorial-num { color: rgba(255, 255, 255, .08); }
.bnf__editorial-list--dark .bnf__editorial-row:hover .bnf__editorial-num { color: var(--bnf-c3); }
.bnf__editorial-list--dark .bnf__editorial-body h3 { color: #fff; }
.bnf__editorial-list--dark .bnf__editorial-body p { color: var(--bnf-muted); }
@media (prefers-reduced-motion: reduce) {
  .bnf__editorial-row { opacity: 1; transform: none; transition: none !important; }
}

/* ---------- Focus Over Face Time tag row ---------- */
.bnf__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bnf__tags span { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 30px; background: rgba(0, 95, 204, .08); color: var(--bnf-c); }

/* ---------- 07. What Makes 3Shadz Different (hover/focus flip chips) ---------- */
.bnf__different { padding: 110px 0; background: #fff; }
.bnf__flip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 50px; }
.bnf__flip { perspective: 1200px; height: 170px; cursor: pointer; }
.bnf__flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .6s cubic-bezier(.4, .2, .2, 1);
  transform-style: preserve-3d;
}
.bnf__flip:hover .bnf__flip-inner,
.bnf__flip:focus-visible .bnf__flip-inner { transform: rotateY(180deg); }
.bnf__flip-face, .bnf__flip-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.bnf__flip-face { background: var(--bnf-bg); border: 1px solid var(--bnf-b); }
.bnf__flip-face i { font-size: 30px; color: var(--bnf-c); margin-bottom: 12px; transition: color .3s ease; }
.bnf__flip-face h3 { font-size: 17px; font-weight: 600; color: var(--bnf-h); margin: 0; transition: color .3s ease; }
.bnf__flip:hover .bnf__flip-face i, .bnf__flip:focus-visible .bnf__flip-face i,
.bnf__flip:hover .bnf__flip-face h3, .bnf__flip:focus-visible .bnf__flip-face h3 { color: #fff; }
.bnf__flip-back { background: linear-gradient(135deg, var(--bnf-c), var(--bnf-c2)); color: #fff; transform: rotateY(180deg); }
.bnf__flip-back p { font-size: 13.5px; font-weight: 300; line-height: 1.6; margin: 0; color: #fff; }

/* ---------- 08. Career path (wavy dotted-line SVG, draws in on scroll) ---------- */
.bnf__path { padding: 120px 0; background: var(--bnf-dark); position: relative; overflow: hidden; }
.bnf__path::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.bnf__path > .container { position: relative; z-index: 1; }
.bnf__path-svg { width: 100%; height: auto; margin: 50px 0 20px; overflow: visible; }
.bnf__path-line { fill: none; stroke: var(--bnf-c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease; }
.bnf__path.is-inview .bnf__path-line { stroke-dashoffset: 0; }
.bnf__path-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.bnf__path.is-inview .bnf__path-dot { opacity: 1; transform: scale(1); }
.bnf__path-dots .bnf__path-dot:nth-child(2) { transition-delay: .3s; }
.bnf__path-dots .bnf__path-dot:nth-child(3) { transition-delay: .6s; }
.bnf__path-dots .bnf__path-dot:nth-child(4) { transition-delay: .9s; }
.bnf__path-dots .bnf__path-dot:nth-child(5) { transition-delay: 1.2s; }
.bnf__path-labels { display: flex; justify-content: space-between; gap: 12px; }
.bnf__path-labels span { flex: 1 1 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--bnf-muted); }

/* ---------- 09. Why Join (oversized mantra typography) ---------- */
.bnf__why { padding: 130px 0; background: #fff; text-align: center; }
.bnf__why .bnf__eyebrow { justify-content: center; }
.bnf__why-title { font-size: 44px; line-height: 1.2; font-weight: 800; color: var(--bnf-h); margin: 0 auto 40px; max-width: 700px; text-transform: uppercase; }
.bnf__why-lines { max-width: 640px; margin: 0 auto; }
.bnf__why-lines p { font-size: 21px; line-height: 1.6; font-weight: 600; color: var(--bnf-t); margin: 0 0 6px; }
.bnf__why-lines p:last-child { color: var(--bnf-c); margin-bottom: 0; }

/* ---------- 10. Join ---------- */
.bnf__join { padding: 110px 0; background: var(--bnf-bg); }
.bnf__join-panel { max-width: 820px; margin: 0 auto; text-align: center; padding: 60px 50px; border-radius: 24px; background: #fff; border: 1px solid var(--bnf-b); box-shadow: 0 30px 70px rgba(28, 30, 43, .08); }
.bnf__join-panel .bnf__ico { margin: 0 auto 20px; }
.bnf__join-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 28px; }

/* ---------- 11. FAQ accordion ---------- */
.bnf__faq { padding: 120px 0; background: #fff; }
.bnf__faq-list { max-width: 980px; margin: 50px auto 0; display: grid; gap: 14px; }
.bnf__faq-item { border: 1px solid var(--bnf-b); border-radius: 14px; background: var(--bnf-bg); overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.bnf__faq-item.is-open { border-color: var(--bnf-c); box-shadow: 0 18px 40px rgba(0, 95, 204, .09); background: #fff; }
.bnf__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bnf-h);
  cursor: pointer;
  transition: color .3s ease;
}
.bnf__faq-q:hover { color: var(--bnf-c); }
.bnf__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--bnf-c);
  font-size: 13px;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.bnf__faq-item.is-open .bnf__faq-icon { transform: rotate(45deg); background: var(--bnf-c); color: #fff; }
.bnf__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.bnf__faq-item.is-open .bnf__faq-a { grid-template-rows: 1fr; }
.bnf__faq-a > div { overflow: hidden; }
.bnf__faq-a p { font-size: 14.5px; font-weight: 300; line-height: 1.85; color: var(--bnf-t); margin: 0; padding: 0 28px 26px; }
.bnf__faq-a a { color: var(--bnf-c); font-weight: 600; }

/* ---------- 12. SEO closer ---------- */
.bnf__seo { padding: 80px 0 100px; background: var(--bnf-bg); }
.bnf__seo-body { max-width: 760px; margin: 0 auto; text-align: center; }
.bnf__seo-body .bnf__title { font-size: 25px; }
.bnf__seo-body .bnf__text { font-size: 15px; }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.bnf__final-emphasis { max-width: 560px; margin: 0 auto 30px; }
.bnf__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--bnf-h); line-height: 1.5; margin: 0 0 4px; }
.bnf__final-emphasis p:last-child { color: var(--bnf-c); margin-bottom: 0; }
.bnf__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .bnf__page .bnf__title { font-size: 30px; }
  .bnf__hero { padding: 180px 0 100px; }
  .bnf__hero-title { font-size: 44px; }
  .bnf__hero-grid { gap: 40px; }
  .bnf__orbit-stage { width: 300px; height: 300px; }
  .bnf__orbit-ring--1 { width: 180px; height: 180px; }
  .bnf__orbit-ring--2 { width: 300px; height: 300px; }
  .bnf__feature { padding: 34px; gap: 26px; }
  .bnf__flip-grid { grid-template-columns: repeat(3, 1fr); }
  .bnf__why-title { font-size: 34px; }
}
@media only screen and (max-width: 991px) {
  .bnf__hero-grid { grid-template-columns: 1fr; }
  .bnf__orbit-stage { display: none; }
  .bnf__hero { padding: 170px 0 80px; }
  .bnf__feature-duo { grid-template-columns: 1fr; }
  .bnf__mini-cards { grid-template-columns: 1fr; }
  .bnf__nav-row { gap: 8px; }
  .bnf__nav-arrow { display: none; }
}
@media only screen and (max-width: 767px) {
  .bnf__page .bnf__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .bnf__page .bnf__title { font-size: 25px; }
  .bnf__page .bnf__btn, .bnf__page .bnf__btn-outline { padding: 15px 26px; font-size: 15px; }
  .bnf__hero { padding: 150px 0 70px; }
  .bnf__hero-title { font-size: 32px; }
  .bnf__hero-lead { font-size: 17px; }
  .bnf__pillar { padding: 70px 0; }
  .bnf__intro, .bnf__different, .bnf__why, .bnf__join { padding: 70px 0; }
  .bnf__path { padding: 90px 0; }
  .bnf__faq { padding: 80px 0; }
  .bnf__seo { padding: 60px 0 70px; }
  .bnf__feature { flex-direction: column; padding: 28px; gap: 20px; }
  .bnf__feature-body h3 { font-size: 21px; }
  .bnf__editorial-row { grid-template-columns: 1fr; gap: 10px; padding: 30px 0; }
  .bnf__editorial-num { font-size: 44px; }
  .bnf__flip-grid { grid-template-columns: repeat(2, 1fr); }
  .bnf__why-title { font-size: 26px; }
  .bnf__why-lines p { font-size: 17px; }
  .bnf__join-panel { padding: 40px 26px; }
  .bnf__faq-q { font-size: 16px; padding: 20px 22px; }
  .bnf__faq-a p { padding: 0 22px 22px; }
  .bnf__path-labels span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .bnf__page .bnf__btn,
  .bnf__page .bnf__btn-outline { transition: none !important; }
  .bnf__path-line, .bnf__path-dot { transition: none !important; }
  .bnf__flip-inner { transition: none !important; }
  .bnf__orbit-ring, .bnf__orbit-ring .bnf__orbit-node i { animation: none !important; }
}

/* ============================================================
   HIRING PROCESS PAGE (hire__*)
   Scoped entirely to .hire__page (added on <main> of
   hiring-process.html). Fifth of the five careers subpages
   (hub is careers.html). The brief explicitly asked to avoid a
   rigid corporate flowchart, so the original 7-step process is
   regrouped around a human 6-phase arc - Discover -> Connect ->
   Explore -> Meet -> Decide -> Begin - introduced right after the
   hero as a wavy hand-drawn .hire__path (same draw-in-on-scroll
   SVG technique as .bnf__path, extended to 6 stops), then walked
   through via a sticky scroll-spy .hire__nav (same mechanic as
   .bnf__nav) linking six alternating light/dark .hire__pillar
   sections. Flip cards, passport-style "stamps", tabbed interview
   tips and a two-road chooser keep every later section built from
   something other than a plain stacked list. Same brand tokens as
   .cr__page / .op__page / .life__page / .bnf__page (blue/purple/
   light-blue on dark #07152F) - no new accent color, so the five
   careers pages still read as one family.
   Nothing in this block leaks outside .hire__page.
   ============================================================ */
.hire__page {
  --hire-c: #005fcc;
  --hire-c2: #8079f8;
  --hire-c3: #4da3ff;
  --hire-h: #1c1e2b;
  --hire-t: #6b7089;
  --hire-b: #e9eaf5;
  --hire-bg: #f6f7fc;
  --hire-dark: #07152F;
  --hire-muted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.hire__page .hire__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--hire-c);
  margin-bottom: 18px;
}
.hire__page .hire__eyebrow--light { color: var(--hire-c3); }
/* Playful refresh: one extra "pop" accent (warm coral/amber), used only for
   badges, chips and hover glow. The dominant palette stays the shared
   blue/purple/navy family - this page is just allowed to wear one louder
   color than its four careers siblings, since it's the one explicitly
   asked to read younger and more energetic. */
.hire__page { --hire-pop: #ff7a45; --hire-pop2: #ffb648; }
.hire__page .hire__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--hire-h); margin: 0 0 20px; }
.hire__page .hire__title--light { color: #fff; }
.hire__page .hire__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--hire-t); margin: 0 0 14px; }
.hire__page .hire__text:last-child { margin-bottom: 0; }
.hire__page .hire__text strong { color: var(--hire-h); font-weight: 600; }
.hire__page .hire__text--light { color: var(--hire-muted); }
.hire__page .hire__head { max-width: 780px; }
.hire__page .hire__head--center { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.hire__page .hire__btn,
.hire__page .hire__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all .3s ease;
}
.hire__page .hire__btn { color: #fff; background: var(--hire-c); border: 2px solid var(--hire-c); }
.hire__page .hire__btn:hover { background: var(--hire-c2); border-color: var(--hire-c2); color: #fff; }
.hire__page .hire__btn-outline { color: var(--hire-c); border: 2px solid var(--hire-c); background: transparent; }
.hire__page .hire__btn-outline:hover { background: var(--hire-c); color: #fff; }
.hire__page .hire__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 95, 204, .1);
  color: var(--hire-c);
  font-size: 19px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

/* ---------- Hero (copy only - no photo, keeps the page's own
   SVG trail as the sole visual motif rather than mixing in stock
   imagery) ---------- */
.hire__hero { position: relative; overflow: hidden; background: var(--hire-dark); padding: 200px 0 110px; }
.hire__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 88% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(760px 420px at 6% 112%, rgba(128, 121, 248, .24), transparent 62%);
}
.hire__hero > .container { position: relative; z-index: 2; }
.hire__hero-inner { max-width: 780px; }
.hire__hero-eyebrow { display: block; font-size: 15px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--hire-c3); margin-bottom: 20px; }
.hire__hero-title { font-size: 54px; line-height: 1.14; font-weight: 700; color: #fff; margin: 0 0 24px; }
.hire__hero-title span { color: var(--hire-c3); }
.hire__hero-lead { font-size: 20px; line-height: 1.7; color: #e6ecfa; font-weight: 500; margin: 0 0 18px; }
.hire__hero-text { font-size: 16px; line-height: 1.85; color: var(--hire-muted); font-weight: 300; margin: 0 0 22px; }
.hire__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.hire__hero-cta .hire__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.hire__hero-cta .hire__btn-outline:hover { background: #fff; color: var(--hire-dark); }

/* ---------- Hero orbit: fills the empty right-side gutter next to the
   780px copy column on wide screens. A slow constellation of the six
   journey stages (same icons/labels as the path + nav below) orbiting a
   pulsing hub, so it reinforces the page's own motif instead of adding
   unrelated stock imagery. Hidden below 1300px, where the column takes
   the full width and there's no gutter left to fill. ---------- */
.hire__orbit { display: none; pointer-events: none; }
@media only screen and (min-width: 1300px) {
  .hire__orbit {
    display: block; position: absolute; z-index: 1;
    top: 58%; right: 4%; transform: translateY(-50%);
    width: 340px; height: 340px;
  }
  .hire__orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .14); }
  .hire__orbit-ring--2 { inset: 34px; border-color: rgba(255, 255, 255, .1); }
  .hire__orbit-core {
    position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--hire-c), var(--hire-c2)); color: #fff; font-size: 24px;
    box-shadow: 0 0 0 0 rgba(77, 163, 255, .55);
    animation: hireOrbitPulse 2.8s ease-in-out infinite;
  }
  .hire__orbit-spin { position: absolute; inset: 0; animation: hireOrbitSpin 42s linear infinite; }
  .hire__orbit-node {
    position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
    transform: rotate(calc(60deg * var(--i))) translateX(150px);
  }
  .hire__orbit-node-in {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 50%;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2);
    color: var(--hire-c3); font-size: 17px; backdrop-filter: blur(4px);
    animation: hireOrbitCounter 42s linear infinite;
    transition: background .3s ease, color .3s ease, transform .3s ease;
  }
  .hire__orbit-node:nth-child(even) .hire__orbit-node-in { color: var(--hire-c2); }
  .hire__orbit-node-in em {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .5px; white-space: nowrap;
    color: #fff; background: rgba(7, 21, 47, .9); border: 1px solid rgba(255, 255, 255, .16);
    padding: 4px 10px; border-radius: 20px; opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .hire__orbit-node:hover { pointer-events: auto; }
  .hire__orbit-node:hover .hire__orbit-node-in { background: var(--hire-pop); border-color: var(--hire-pop); color: #1c1207; transform: scale(1.12); animation-play-state: paused; }
  .hire__orbit-node:hover .hire__orbit-node-in em { opacity: 1; }
  .hire__orbit:has(.hire__orbit-node:hover) .hire__orbit-spin { animation-play-state: paused; }
}
@media only screen and (min-width: 1600px) {
  .hire__orbit { width: 400px; height: 400px; right: 6%; }
  .hire__orbit-node { transform: rotate(calc(60deg * var(--i))) translateX(178px); }
}
@keyframes hireOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hireOrbitCounter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes hireOrbitPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 163, 255, .5); }
  50% { box-shadow: 0 0 0 18px rgba(77, 163, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hire__orbit-spin, .hire__orbit-node-in, .hire__orbit-core { animation: none !important; }
}

/* ---------- Journey path (wavy dotted-line SVG, 6 stops, draws
   in on scroll) - the direct visual answer to "not a flowchart":
   Discover/Connect/Explore/Meet/Decide/Begin plotted as a hand-
   drawn trail rather than boxes-and-arrows. ---------- */
.hire__path { padding: 120px 0 100px; background: var(--hire-dark); position: relative; overflow: hidden; }
.hire__path::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.hire__path > .container { position: relative; z-index: 1; }
.hire__path-svg { width: 100%; height: auto; margin: 50px 0 20px; overflow: visible; }
.hire__path-line { fill: none; stroke: var(--hire-c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease; }
.hire__path.is-inview .hire__path-line { stroke-dashoffset: 0; }
.hire__path-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.hire__path.is-inview .hire__path-dot { opacity: 1; transform: scale(1); }
.hire__path-dots .hire__path-dot:nth-child(2) { transition-delay: .25s; }
.hire__path-dots .hire__path-dot:nth-child(3) { transition-delay: .5s; }
.hire__path-dots .hire__path-dot:nth-child(4) { transition-delay: .75s; }
.hire__path-dots .hire__path-dot:nth-child(5) { transition-delay: 1s; }
.hire__path-dots .hire__path-dot:nth-child(6) { transition-delay: 1.25s; }
.hire__path-labels { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* ---------- Level chips (upgraded path labels) ---------- */
.hire__path-chip { flex: 1 1 0; min-width: 88px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.hire__path-chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 122, 69, .16); border: 1px solid rgba(255, 122, 69, .4);
  color: var(--hire-pop); font-size: 13px;
}
.hire__path-chip small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hire-pop); }
.hire__path-chip span { font-size: 14px; font-weight: 600; color: var(--hire-muted); }

/* ---------- Hero stickers / floating shapes ---------- */
.hire__hero-tagline { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 22px; }
.hire__hero-tagline span {
  font-size: 13.5px; font-weight: 600; letter-spacing: .3px; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  padding: 7px 16px; border-radius: 30px;
}
.hire__sticker {
  position: absolute; top: 130px; right: 7%; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  background: var(--hire-pop); color: #1c1207;
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  padding: 12px 20px; border-radius: 40px; transform: rotate(6deg);
  box-shadow: 0 18px 40px rgba(255, 122, 69, .35);
  animation: hireBob 4.5s ease-in-out infinite;
}
.hire__shape { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; pointer-events: none; animation: hireBob 6s ease-in-out infinite; }
.hire__shape--a { width: 90px; height: 90px; top: 18%; left: 4%; background: radial-gradient(circle, var(--hire-pop), transparent 70%); }
.hire__shape--b { width: 60px; height: 60px; bottom: 14%; left: 14%; background: radial-gradient(circle, var(--hire-c3), transparent 70%); animation-delay: 1.2s; animation-duration: 5.2s; }
.hire__shape--c { width: 40px; height: 40px; top: 60%; right: 10%; background: radial-gradient(circle, var(--hire-pop2), transparent 70%); animation-delay: .6s; animation-duration: 4.8s; }
@keyframes hireBob {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
.hire__shape { --r: 0deg; }

/* ---------- Flip-card back: alternate accents so the grid reads as more
   than one flat color repeated seven times ---------- */
.hire__flip:nth-child(3n+2) .hire__flip-back { background: linear-gradient(135deg, var(--hire-pop), var(--hire-pop2)); }
.hire__flip:nth-child(3n+3) .hire__flip-back { background: linear-gradient(135deg, var(--hire-c2), var(--hire-c3)); }

/* ---------- FAQ: small celebratory pulse when an answer opens ---------- */
.hire__faq-item.is-open .hire__faq-icon { animation: hireFaqPop .4s ease; }
@keyframes hireFaqPop {
  0% { transform: rotate(45deg) scale(1); }
  40% { transform: rotate(45deg) scale(1.25); }
  100% { transform: rotate(45deg) scale(1); }
}

/* ---------- Pillar navigator (sticky pill row, scroll-spy) ---------- */
.hire__nav { padding: 10px 0 6px; background: #fff; border-bottom: 1px solid var(--hire-b); position: sticky; top: 0; z-index: 20; }
.hire__nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 6px; padding: 18px 0; }
.hire__nav-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 30px;
  border: 1px solid var(--hire-b);
  color: var(--hire-t); font-size: 14px; font-weight: 600;
  transition: all .3s ease;
}
.hire__nav-pill i { font-size: 13px; color: var(--hire-c3); transition: color .3s ease; }
.hire__nav-pill:hover { border-color: var(--hire-c); color: var(--hire-c); }
.hire__nav-pill.is-active { background: var(--hire-c); border-color: var(--hire-c); color: #fff; }
.hire__nav-pill.is-active i { color: #fff; }
.hire__nav-arrow { color: var(--hire-b); font-size: 18px; }

/* ---------- Pillar sections (alternating light / dark) ---------- */
.hire__pillar { padding: 100px 0; }
.hire__pillar--light { background: var(--hire-bg); }
.hire__pillar--dark { background: var(--hire-dark); position: relative; overflow: hidden; }
.hire__pillar--dark::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .26), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .2), transparent 64%);
}
.hire__pillar--dark > .container { position: relative; z-index: 1; }

/* ---------- "Stop" feature panel ---------- */
.hire__feature {
  display: flex; align-items: flex-start; gap: 36px;
  background: #fff; border: 1px solid var(--hire-b); border-radius: 24px;
  padding: 44px;
  box-shadow: 0 24px 60px rgba(28, 30, 43, .08);
}
.hire__feature-ico {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 20px;
  background: linear-gradient(135deg, var(--hire-c), var(--hire-c2));
  color: #fff; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px rgba(0, 95, 204, .28);
}
.hire__feature-body { flex: 1 1 auto; }
.hire__feature-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--hire-c); background: rgba(0, 95, 204, .08);
  padding: 6px 14px; border-radius: 30px; margin-bottom: 14px;
}
.hire__feature-body h3 { font-size: 25px; font-weight: 600; color: var(--hire-h); margin: 0 0 14px; }
.hire__feature-body p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--hire-t); margin: 0; }
.hire__feature--dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.hire__feature--dark .hire__feature-tag { color: var(--hire-pop); background: rgba(255, 122, 69, .16); }
.hire__feature--dark .hire__feature-body h3 { color: #fff; }
.hire__feature--dark .hire__feature-body p { color: var(--hire-muted); }
.hire__feature-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
.hire__feature-duo .hire__feature { flex-direction: column; }
.hire__feature-duo .hire__feature-ico { margin-bottom: 6px; }

/* ---------- Skills-topics tag chain (Explore) ---------- */
.hire__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.hire__chain span {
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--hire-t); background: var(--hire-bg);
  border: 1px solid var(--hire-b);
  padding: 6px 13px; border-radius: 20px;
}
.hire__chain-final { color: #fff !important; background: linear-gradient(135deg, var(--hire-c), var(--hire-c2)) !important; border-color: transparent !important; }

/* ---------- Meet-the-team mini cards ---------- */
.hire__mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.hire__mini-card {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px; padding: 26px; transition: all .3s ease;
}
.hire__mini-card:hover { background: rgba(255, 255, 255, .07); transform: translateY(-4px); }
.hire__mini-card .hire__ico { background: rgba(77, 163, 255, .14); color: var(--hire-c3); margin-bottom: 14px; }
.hire__mini-card h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 0; }

/* ---------- Pull-quotes (Discover / Decide) ---------- */
.hire__pullquote { max-width: 640px; margin: 34px auto 0; text-align: center; font-size: 19px; font-weight: 600; color: var(--hire-h); line-height: 1.5; }
.hire__pillar--dark .hire__pullquote { color: #fff; }
.hire__pullquote--tight { margin-top: 30px; }
.hire__begin-cta { margin-top: 36px; }

/* ---------- What We Look For (hover/focus flip cards) ---------- */
.hire__traits { padding: 110px 0; background: #fff; }
.hire__flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; margin-top: 50px; }
.hire__flip { perspective: 1200px; height: 170px; cursor: pointer; }
.hire__flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .6s cubic-bezier(.4, .2, .2, 1);
  transform-style: preserve-3d;
}
.hire__flip:hover .hire__flip-inner,
.hire__flip:focus-visible .hire__flip-inner { transform: rotateY(180deg); }
.hire__flip-face, .hire__flip-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.hire__flip-face { background: var(--hire-bg); border: 1px solid var(--hire-b); }
.hire__flip-face i { font-size: 30px; color: var(--hire-c); margin-bottom: 12px; transition: color .3s ease; }
.hire__flip-face h3 { font-size: 17px; font-weight: 600; color: var(--hire-h); margin: 0; transition: color .3s ease; }
.hire__flip:hover .hire__flip-face i, .hire__flip:focus-visible .hire__flip-face i,
.hire__flip:hover .hire__flip-face h3, .hire__flip:focus-visible .hire__flip-face h3 { color: #fff; }
.hire__flip-back { background: linear-gradient(135deg, var(--hire-c), var(--hire-c2)); color: #fff; transform: rotateY(180deg); }
.hire__flip-back p { font-size: 13.5px; font-weight: 300; line-height: 1.6; margin: 0; color: #fff; }

/* ---------- What You Can Expect (passport-stamp grid) ----------
   Each card carries a dashed border and a slight alternating
   rotation, like a stamp pressed at a slightly different angle
   each time - reinforces the "journey" motif without reusing the
   flip-card mechanic already spent on the traits section. */
.hire__promise { padding: 120px 0; background: var(--hire-dark); position: relative; overflow: hidden; }
.hire__promise::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.hire__promise > .container { position: relative; z-index: 1; }
.hire__stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 50px; }
.hire__stamp {
  background: rgba(255, 255, 255, .04);
  border: 2px dashed rgba(77, 163, 255, .35);
  border-radius: 18px;
  padding: 30px 26px;
  text-align: center;
  transition: transform .3s ease, background .3s ease;
}
.hire__stamp:hover { transform: translateY(-4px) rotate(0deg) !important; background: rgba(255, 255, 255, .07); }
.hire__stamp:nth-child(6n+1) { transform: rotate(-2deg); }
.hire__stamp:nth-child(6n+2) { transform: rotate(1.5deg); }
.hire__stamp:nth-child(6n+3) { transform: rotate(-1deg); }
.hire__stamp:nth-child(6n+4) { transform: rotate(2deg); }
.hire__stamp:nth-child(6n+5) { transform: rotate(-1.5deg); }
.hire__stamp:nth-child(6n+6) { transform: rotate(1deg); }
.hire__stamp i { font-size: 26px; color: var(--hire-c3); margin-bottom: 14px; }
.hire__stamp h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.hire__stamp p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--hire-muted); margin: 0; }

/* ---------- Interview tips (tab switcher + checklist + quote) ---------- */
.hire__tips { padding: 110px 0; background: var(--hire-bg); }
.hire__tips-tabs { display: flex; justify-content: center; gap: 12px; margin: 0 auto 10px; flex-wrap: wrap; }
.hire__tips-tab {
  padding: 13px 28px; border-radius: 30px; border: 1px solid var(--hire-b);
  background: #fff; color: var(--hire-t); font-size: 14.5px; font-weight: 600;
  transition: all .3s ease;
}
.hire__tips-tab:hover { border-color: var(--hire-c); color: var(--hire-c); }
.hire__tips-tab.is-active { background: var(--hire-c); border-color: var(--hire-c); color: #fff; }
.hire__tips-panels { max-width: 880px; margin: 40px auto 0; }
.hire__tips-panel { display: none; }
.hire__tips-panel.is-active { display: block; }
.hire__check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.hire__check-list--grid { grid-template-columns: repeat(2, 1fr); }
.hire__check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; font-weight: 400; color: var(--hire-h); line-height: 1.6; }
.hire__check-list li i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 95, 204, .1); color: var(--hire-c); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.hire__quote { max-width: 760px; margin: 56px auto 0; text-align: center; border: 0; padding: 0; }
.hire__quote p { font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--hire-h); margin: 0 0 10px; font-style: italic; }
.hire__quote p:last-child { font-size: 15.5px; font-weight: 300; font-style: normal; color: var(--hire-t); margin-bottom: 0; }

/* ---------- Choose your path (two-road signpost cards) ---------- */
.hire__paths { padding: 110px 0; background: var(--hire-dark); position: relative; overflow: hidden; }
.hire__paths::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .26), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .2), transparent 64%);
}
.hire__paths > .container { position: relative; z-index: 1; }
.hire__paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 50px; }
.hire__road-card {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px; padding: 40px; transition: all .3s ease;
}
.hire__road-card:hover { background: rgba(255, 255, 255, .07); transform: translateY(-4px); }
.hire__road-card .hire__ico { background: rgba(77, 163, 255, .14); color: var(--hire-c3); }
.hire__road-card h3 { font-size: 21px; font-weight: 600; color: #fff; margin: 0 0 12px; }
.hire__road-card p { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--hire-muted); margin: 0; }

/* ---------- Get to know us too (centered panel) ---------- */
.hire__mutual { padding: 110px 0; background: #fff; }
.hire__mutual-panel { max-width: 820px; margin: 0 auto; text-align: center; padding: 60px 56px; border-radius: 24px; background: var(--hire-bg); border: 1px solid var(--hire-b); box-shadow: 0 30px 70px rgba(28, 30, 43, .08); }
.hire__mutual-panel .hire__ico { margin: 0 auto 20px; }
.hire__mutual-panel .hire__check-list { text-align: left; margin: 30px 0 0; }
.hire__mutual-panel .hire__check-list--grid { grid-template-columns: repeat(2, 1fr); }

/* ---------- FAQ accordion ---------- */
.hire__faq { padding: 120px 0; background: var(--hire-bg); }
.hire__faq-list { max-width: 980px; margin: 50px auto 0; display: grid; gap: 14px; }
.hire__faq-item { border: 1px solid var(--hire-b); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.hire__faq-item.is-open { border-color: var(--hire-c); box-shadow: 0 18px 40px rgba(0, 95, 204, .09); }
.hire__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--hire-h);
  cursor: pointer;
  transition: color .3s ease;
}
.hire__faq-q:hover { color: var(--hire-c); }
.hire__faq-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 95, 204, .1);
  color: var(--hire-c);
  font-size: 13px;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.hire__faq-item.is-open .hire__faq-icon { transform: rotate(45deg); background: var(--hire-c); color: #fff; }
.hire__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.hire__faq-item.is-open .hire__faq-a { grid-template-rows: 1fr; }
.hire__faq-a > div { overflow: hidden; }
.hire__faq-a p { font-size: 14.5px; font-weight: 300; line-height: 1.85; color: var(--hire-t); margin: 0; padding: 0 28px 26px; }

/* ---------- SEO closer ---------- */
.hire__seo { padding: 80px 0 100px; background: #fff; }
.hire__seo-body { max-width: 760px; margin: 0 auto; text-align: center; }
.hire__seo-body .hire__title { font-size: 25px; }
.hire__seo-body .hire__text { font-size: 15px; }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.hire__final-emphasis { max-width: 560px; margin: 0 auto 30px; }
.hire__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--hire-h); line-height: 1.5; margin: 0 0 4px; }
.hire__final-emphasis p:last-child { color: var(--hire-c); margin-bottom: 0; }
.hire__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .hire__page .hire__title { font-size: 30px; }
  .hire__hero { padding: 180px 0 90px; }
  .hire__hero-title { font-size: 42px; }
  .hire__feature { padding: 34px; gap: 26px; }
  .hire__mini-cards { grid-template-columns: repeat(2, 1fr); }
  .hire__stamp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 991px) {
  .hire__feature-duo { grid-template-columns: 1fr; }
  .hire__paths-grid { grid-template-columns: 1fr; }
  .hire__check-list--grid { grid-template-columns: 1fr; }
  .hire__nav { position: static; }
  .hire__nav-row { gap: 8px; }
  .hire__nav-arrow { display: none; }
}
@media only screen and (max-width: 767px) {
  .hire__page .hire__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .hire__page .hire__title { font-size: 25px; }
  .hire__page .hire__btn, .hire__page .hire__btn-outline { padding: 15px 26px; font-size: 15px; }
  .hire__hero { padding: 150px 0 70px; }
  .hire__hero-title { font-size: 32px; }
  .hire__hero-lead { font-size: 17px; }
  .hire__path { padding: 90px 0 70px; }
  .hire__path-labels span { font-size: 11px; }
  .hire__pillar { padding: 70px 0; }
  .hire__traits, .hire__promise, .hire__tips, .hire__paths, .hire__mutual { padding: 70px 0; }
  .hire__faq { padding: 80px 0; }
  .hire__seo { padding: 60px 0 70px; }
  .hire__feature { flex-direction: column; padding: 28px; gap: 20px; }
  .hire__feature-body h3 { font-size: 21px; }
  .hire__mini-cards { grid-template-columns: 1fr; }
  .hire__stamp-grid { grid-template-columns: 1fr; }
  .hire__stamp { transform: none !important; }
  .hire__mutual-panel { padding: 40px 26px; }
  .hire__faq-q { font-size: 16px; padding: 20px 22px; }
  .hire__faq-a p { padding: 0 22px 22px; }
}
@media only screen and (max-width: 767px) {
  .hire__sticker { display: none; }
  .hire__shape { display: none; }
  .hire__path-chip small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hire__page .hire__btn,
  .hire__page .hire__btn-outline { transition: none !important; }
  .hire__path-line, .hire__path-dot { transition: none !important; }
  .hire__flip-inner { transition: none !important; }
  .hire__sticker, .hire__shape { animation: none !important; }
  .hire__faq-item.is-open .hire__faq-icon { animation: none !important; }
}

/* ============================================================
   INTERNSHIPS PAGE (intern__*)
   Scoped entirely to .intern__page (added on <main> of
   internships.html). Sixth of the six careers subpages (hub is
   careers.html). Same brand tokens as .cr__page / .op__page /
   .life__page / .bnf__page / .hire__page (blue/purple/light-blue
   on dark #07152F) - no new accent color, so the careers pages
   still read as one family. Component vocabulary is deliberately
   reused/remixed from the other careers pages (pill lists, flip
   cards, passport stamps, connected timeline, FAQ accordion)
   rather than inventing new mechanics, since this page's job is
   breadth across many short sections rather than one novel idea.
   Nothing in this block leaks outside .intern__page.
   ============================================================ */
.intern__page {
  --intc: #005fcc;
  --intc2: #8079f8;
  --intc3: #4da3ff;
  --inth: #1c1e2b;
  --intt: #6b7089;
  --intb: #e9eaf5;
  --intbg: #f6f7fc;
  --intdark: #07152F;
  --intmuted: #9fb3cd;
  --intpop: #33e0a1;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.intern__page .intern__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: var(--intc); margin-bottom: 18px;
}
.intern__page .intern__eyebrow--light { color: var(--intc3); }
.intern__page .intern__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--inth); margin: 0 0 20px; }
.intern__page .intern__title--light { color: #fff; }
.intern__page .intern__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--intt); margin: 0 0 16px; }
.intern__page .intern__lead--light { color: #e6ecfa; }
.intern__page .intern__text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--intt); margin: 0 0 14px; }
.intern__page .intern__text:last-child { margin-bottom: 0; }
.intern__page .intern__text strong { color: var(--inth); font-weight: 600; }
.intern__page .intern__text--light { color: var(--intmuted); }
.intern__page .intern__head { max-width: 780px; }
.intern__page .intern__head--center { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.intern__page .intern__btn,
.intern__page .intern__btn-outline {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 34px; border-radius: 50px;
  font-size: 16px; font-weight: 600; line-height: 1;
  transition: all .3s ease;
}
.intern__page .intern__btn { color: #fff; background: var(--intc); border: 2px solid var(--intc); }
.intern__page .intern__btn:hover { background: var(--intc2); border-color: var(--intc2); color: #fff; }
.intern__page .intern__btn-outline { color: var(--intc); border: 2px solid var(--intc); background: transparent; }
.intern__page .intern__btn-outline:hover { background: var(--intc); color: #fff; }
.intern__page .intern__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(0, 95, 204, .1); color: var(--intc); font-size: 19px;
  margin-bottom: 18px; flex: 0 0 auto;
}
.intern__page .intern__pivot {
  text-align: center; font-size: 21px; font-weight: 600; color: var(--intc);
  margin: 44px auto 0; padding-top: 30px; border-top: 1px solid rgba(7, 21, 47, .08);
  max-width: 660px;
}
.intern__page .intern__pivot--light { color: var(--intc3); border-top-color: rgba(255, 255, 255, .16); }
.intern__page .intern__cap-cta { text-align: center; margin-top: 40px; }

/* ---------- Hero ---------- */
.intern__hero { position: relative; overflow: hidden; background: var(--intdark); padding: 200px 0 110px; }
.intern__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 480px at 88% -10%, rgba(0, 95, 204, .35), transparent 60%),
              radial-gradient(760px 420px at 6% 112%, rgba(128, 121, 248, .24), transparent 62%);
}
.intern__hero > .container { position: relative; z-index: 2; }
.intern__hero-inner { max-width: 800px; }
.intern__hero-eyebrow { display: block; font-size: 15px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--intc3); margin-bottom: 20px; }
.intern__hero-title { font-size: 54px; line-height: 1.14; font-weight: 700; color: #fff; margin: 0 0 18px; }
.intern__hero-title span { color: var(--intc3); }
.intern__hero-tagline { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 24px; }
.intern__hero-tagline span {
  font-size: 14px; font-weight: 600; letter-spacing: .3px; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  padding: 7px 16px; border-radius: 30px;
}
.intern__hero-lead { font-size: 20px; line-height: 1.7; color: #e6ecfa; font-weight: 500; margin: 0 0 18px; }
.intern__hero-text { font-size: 16px; line-height: 1.85; color: var(--intmuted); font-weight: 300; margin: 0 0 22px; }
.intern__hero-cta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.intern__hero-cta .intern__btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.intern__hero-cta .intern__btn-outline:hover { background: #fff; color: var(--intdark); }

/* ---------- Hero visual: fills the empty right-side gutter next to the
   800px copy column on wide screens. The four headline words - Learn,
   Build, Contribute, Grow - plotted as ascending waypoints on a climbing
   path, so the graphic is a literal reading of the headline rather than
   unrelated stock imagery. Hidden below 1300px, where the column takes
   the full width and there's no gutter left to fill. ---------- */
.intern__hero-sticker {
  position: absolute; top: 130px; right: 6%; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  background: var(--intpop); color: #06301f;
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  padding: 9px 16px; border-radius: 30px;
  box-shadow: 0 10px 24px rgba(51, 224, 161, .35);
  animation: internStickerFloat 5s ease-in-out infinite;
}
.intern__hero-visual { display: none; pointer-events: none; }
@media only screen and (min-width: 1300px) {
  .intern__hero-visual {
    display: block; position: absolute; z-index: 1;
    top: 54%; right: 4%; transform: translateY(-50%);
    width: 300px; height: 340px;
  }
  .intern__hero-visual-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .intern__hero-visual-path path {
    fill: none; stroke: var(--intc3); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 2 14; opacity: .55;
    animation: internPathFlow 3.2s linear infinite;
  }
  .intern__hero-step {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .intern__hero-step--1 { left: 6%; top: 89%; }
  .intern__hero-step--2 { left: 38%; top: 63%; }
  .intern__hero-step--3 { left: 68%; top: 34%; }
  .intern__hero-step--4 { left: 94%; top: 11%; }
  .intern__hero-step-ico {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2);
    color: var(--intc3); font-size: 18px; backdrop-filter: blur(4px);
    animation: internStepFloat 4s ease-in-out infinite;
    animation-delay: calc(var(--d) * .35s);
  }
  .intern__hero-step-label {
    font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: #fff; background: rgba(7, 21, 47, .85); border: 1px solid rgba(255, 255, 255, .14);
    padding: 4px 12px; border-radius: 20px; white-space: nowrap;
  }
  .intern__hero-step--4 .intern__hero-step-ico {
    color: #06301f; background: var(--intpop); border-color: var(--intpop);
    box-shadow: 0 0 0 0 rgba(51, 224, 161, .5);
    animation: internStepFloat 4s ease-in-out infinite, internStepPulse 2.6s ease-in-out infinite;
    animation-delay: calc(var(--d) * .35s), 0s;
  }
  .intern__hero-step--4 .intern__hero-step-label { color: var(--intpop); }
}
@media only screen and (min-width: 1600px) {
  .intern__hero-visual { width: 340px; height: 380px; right: 6%; }
}
@keyframes internStepFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes internStepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(51, 224, 161, .5); }
  50% { box-shadow: 0 0 0 14px rgba(51, 224, 161, 0); }
}
@keyframes internPathFlow { to { stroke-dashoffset: -160; } }
@keyframes internStickerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .intern__hero-step-ico, .intern__hero-visual-path path, .intern__hero-sticker { animation: none !important; }
}
@media only screen and (max-width: 1299px) {
  .intern__hero-sticker { display: none; }
}

/* ---------- 01. Build Experience That Matters ---------- */
.intern__overview { padding: 100px 0; background: #fff; }
.intern__overview-emphasis { margin: 34px auto 0; text-align: center; max-width: 620px; padding-top: 28px; border-top: 1px solid var(--intb); }
.intern__overview-emphasis p { font-size: 19px; font-weight: 600; color: var(--inth); margin: 0 0 6px; }
.intern__overview-emphasis p:last-child { color: var(--intc); margin-bottom: 0; }

/* ---------- 02. Real Projects / Contribution areas (chip grid) ---------- */
.intern__areas { padding: 100px 0; background: var(--intdark); position: relative; overflow: hidden; }
.intern__areas::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.intern__areas > .container { position: relative; z-index: 1; }
.intern__areas .intern__eyebrow { color: var(--intc3); }
.intern__areas .intern__title { color: #fff; }
.intern__areas .intern__text { color: var(--intmuted); }
.intern__area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.intern__area-card {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  transition: all .3s ease;
}
.intern__area-card:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); transform: translateY(-3px); }
.intern__area-card .intern__ico { margin: 0; background: rgba(77, 163, 255, .14); color: var(--intc3); width: 42px; height: 42px; font-size: 16px; border-radius: 10px; }
.intern__area-card span { font-size: 14.5px; font-weight: 500; color: #fff; line-height: 1.4; }

/* ---------- 03. More Than an Internship (editorial numerals) ---------- */
.intern__triad { padding: 100px 0; background: var(--intbg); }
.intern__triad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding-top: 10px; }
.intern__triad-item { position: relative; padding-top: 26px; border-top: 3px solid var(--intc); }
.intern__triad-num {
  position: absolute; top: -30px; right: 0;
  font-size: 64px; font-weight: 800; line-height: 1; color: var(--intb);
  z-index: 0; user-select: none;
}
.intern__triad-item .intern__ico { position: relative; z-index: 1; }
.intern__triad-item h3 { font-size: 19px; font-weight: 600; color: var(--inth); margin: 0 0 10px; }
.intern__triad-item p { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--intt); margin: 0; }

/* ---------- 04. What You Can Expect (dark card grid) ---------- */
.intern__expect { padding: 100px 0; background: var(--intdark); position: relative; overflow: hidden; }
.intern__expect::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.intern__expect > .container { position: relative; z-index: 1; }
.intern__expect .intern__eyebrow { color: var(--intc3); }
.intern__expect .intern__title { color: #fff; }
.intern__expect .intern__text { color: var(--intmuted); }
.intern__expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.intern__expect-card { padding: 30px 26px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); transition: all .35s ease; }
.intern__expect-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
.intern__expect-card .intern__ico { background: rgba(77, 163, 255, .14); color: var(--intc3); }
.intern__expect-card h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.intern__expect-card p { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--intmuted); margin: 0; }

/* ---------- 05. Your Internship Journey (wavy path + step cards) ---------- */
.intern__journey { padding: 120px 0 100px; background: #fff; }
.intern__path-svg { width: 100%; height: auto; margin: 50px 0 30px; overflow: visible; }
.intern__path-line { fill: none; stroke: var(--intc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease; }
.intern__journey.is-inview .intern__path-line { stroke-dashoffset: 0; }
.intern__path-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.intern__journey.is-inview .intern__path-dot { opacity: 1; transform: scale(1); }
.intern__path-dots .intern__path-dot:nth-child(2) { transition-delay: .2s; }
.intern__path-dots .intern__path-dot:nth-child(3) { transition-delay: .4s; }
.intern__path-dots .intern__path-dot:nth-child(4) { transition-delay: .6s; }
.intern__path-dots .intern__path-dot:nth-child(5) { transition-delay: .8s; }
.intern__path-dots .intern__path-dot:nth-child(6) { transition-delay: 1s; }
.intern__journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 20px; }
.intern__journey-step { padding: 28px 26px; border-radius: 16px; background: var(--intbg); border: 1px solid var(--intb); transition: all .3s ease; }
.intern__journey-step:hover { transform: translateY(-4px); border-color: var(--intc); }
.intern__journey-num { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--intc); margin-bottom: 12px; }
.intern__journey-step h3 { font-size: 17px; font-weight: 600; color: var(--inth); margin: 0 0 8px; }
.intern__journey-step p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--intt); margin: 0; }

/* ---------- 06. Who Can Apply (dark pill list) ---------- */
.intern__apply { padding: 100px 0; background: var(--intdark); position: relative; overflow: hidden; }
.intern__apply::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 92% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 4% 100%, rgba(128, 121, 248, .22), transparent 64%);
}
.intern__apply > .container { position: relative; z-index: 1; }
.intern__apply .intern__eyebrow { color: var(--intc3); }
.intern__apply .intern__title { color: #fff; }
.intern__apply .intern__text { color: var(--intmuted); }
.intern__apply-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }
.intern__apply-pills span {
  font-size: 14px; font-weight: 500; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  padding: 12px 20px; border-radius: 30px; transition: all .3s ease;
}
.intern__apply-pills span:hover { background: rgba(77, 163, 255, .16); border-color: var(--intc3); }

/* ---------- 07. What We Look For (flip cards) ---------- */
.intern__traits { padding: 110px 0; background: var(--intbg); }
.intern__flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; margin-top: 50px; }
.intern__flip { perspective: 1200px; height: 175px; cursor: pointer; }
.intern__flip-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.intern__flip:hover .intern__flip-inner,
.intern__flip:focus-visible .intern__flip-inner { transform: rotateY(180deg); }
.intern__flip-face, .intern__flip-back {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.intern__flip-face { background: #fff; border: 1px solid var(--intb); }
.intern__flip-face i { font-size: 30px; color: var(--intc); margin-bottom: 12px; transition: color .3s ease; }
.intern__flip-face h3 { font-size: 17px; font-weight: 600; color: var(--inth); margin: 0; transition: color .3s ease; }
.intern__flip:hover .intern__flip-face i, .intern__flip:focus-visible .intern__flip-face i,
.intern__flip:hover .intern__flip-face h3, .intern__flip:focus-visible .intern__flip-face h3 { color: #fff; }
.intern__flip-back { background: linear-gradient(135deg, var(--intc), var(--intc2)); color: #fff; transform: rotateY(180deg); }
.intern__flip-back p { font-size: 13.5px; font-weight: 300; line-height: 1.6; margin: 0; color: #fff; }

/* ---------- 08. Mentorship (centered dark panel) ---------- */
.intern__mentor { padding: 110px 0; background: var(--intdark); position: relative; overflow: hidden; }
.intern__mentor::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .26), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .2), transparent 64%);
}
.intern__mentor > .container { position: relative; z-index: 1; }
.intern__mentor-panel {
  max-width: 820px; margin: 0 auto; text-align: center; padding: 60px 56px; border-radius: 24px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
}
.intern__mentor-panel .intern__ico { margin: 0 auto 20px; background: rgba(77, 163, 255, .14); color: var(--intc3); }
.intern__mentor-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; }
.intern__mentor-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 400; color: #fff; line-height: 1.6; }
.intern__mentor-list li i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(77, 163, 255, .16); color: var(--intc3); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }

/* ---------- 09. Industry Practices (passport-stamp grid) ---------- */
.intern__practices { padding: 110px 0; background: #fff; }
.intern__stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 50px; }
.intern__stamp {
  background: var(--intbg); border: 2px dashed rgba(0, 95, 204, .3); border-radius: 18px;
  padding: 30px 26px; text-align: center; transition: transform .3s ease, background .3s ease;
}
.intern__stamp:hover { transform: translateY(-4px) rotate(0deg) !important; background: #fff; }
.intern__stamp:nth-child(6n+1) { transform: rotate(-2deg); }
.intern__stamp:nth-child(6n+2) { transform: rotate(1.5deg); }
.intern__stamp:nth-child(6n+3) { transform: rotate(-1deg); }
.intern__stamp:nth-child(6n+4) { transform: rotate(2deg); }
.intern__stamp:nth-child(6n+5) { transform: rotate(-1.5deg); }
.intern__stamp:nth-child(6n+6) { transform: rotate(1deg); }
.intern__stamp i { font-size: 26px; color: var(--intc); margin-bottom: 14px; }
.intern__stamp h3 { font-size: 16.5px; font-weight: 600; color: var(--inth); margin: 0 0 8px; }
.intern__stamp p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--intt); margin: 0; }

/* ---------- 10. Contribution (single feature panel, dark) ---------- */
.intern__contrib { padding: 110px 0; background: var(--intdark); position: relative; overflow: hidden; }
.intern__contrib::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 90% 0%, rgba(0, 95, 204, .26), transparent 62%),
              radial-gradient(760px 420px at 6% 100%, rgba(128, 121, 248, .2), transparent 64%);
}
.intern__contrib > .container { position: relative; z-index: 1; }
.intern__contrib-panel {
  display: flex; align-items: flex-start; gap: 36px; max-width: 940px; margin: 0 auto;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; padding: 44px;
}
.intern__contrib-panel .intern__ico { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 20px; background: linear-gradient(135deg, var(--intc), var(--intc2)); color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0; box-shadow: 0 16px 34px rgba(0, 95, 204, .28); }
.intern__contrib-panel h3 { font-size: 25px; font-weight: 600; color: #fff; margin: 0 0 14px; }
.intern__contrib-panel p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--intmuted); margin: 0 0 14px; }
.intern__contrib-panel p:last-child { margin-bottom: 0; }

/* ---------- 11. Career Growth (numbered checklist) ---------- */
.intern__growth { padding: 110px 0; background: var(--intbg); }
.intern__growth-list { list-style: none; margin: 40px auto 0; padding: 0; max-width: 820px; display: grid; gap: 16px; }
.intern__growth-list li {
  display: flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 400; color: var(--inth);
  padding: 18px 24px; background: #fff; border: 1px solid var(--intb); border-radius: 14px;
}
.intern__growth-list li span {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--intc);
}

/* ---------- FAQ accordion ---------- */
.intern__faq { padding: 120px 0; background: var(--intbg); }
.intern__faq-list { max-width: 980px; margin: 50px auto 0; display: grid; gap: 14px; }
.intern__faq-item { border: 1px solid var(--intb); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.intern__faq-item.is-open { border-color: var(--intc); box-shadow: 0 18px 40px rgba(0, 95, 204, .09); }
.intern__faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left;
  padding: 24px 28px; border: 0; background: transparent; font-family: inherit;
  font-size: 16.5px; font-weight: 500; line-height: 1.5; color: var(--inth); cursor: pointer; transition: color .3s ease;
}
.intern__faq-q:hover { color: var(--intc); }
.intern__faq-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 95, 204, .1); color: var(--intc);
  font-size: 13px; transition: transform .35s ease, background .35s ease, color .35s ease;
}
.intern__faq-item.is-open .intern__faq-icon { transform: rotate(45deg); background: var(--intc); color: #fff; }
.intern__faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.intern__faq-item.is-open .intern__faq-a { grid-template-rows: 1fr; }
.intern__faq-a > div { overflow: hidden; }
.intern__faq-a p { font-size: 14.5px; font-weight: 300; line-height: 1.85; color: var(--intt); margin: 0; padding: 0 28px 26px; }

/* ---------- SEO closer ---------- */
.intern__seo { padding: 80px 0 100px; background: #fff; }
.intern__seo-body { max-width: 760px; margin: 0 auto; text-align: center; }
.intern__seo-body .intern__title { font-size: 25px; }
.intern__seo-body .intern__text { font-size: 15px; }

/* ---------- Final CTA emphasis (extends the shared .final-cta) ---------- */
.intern__final-emphasis { max-width: 560px; margin: 0 auto 30px; }
.intern__final-emphasis p { font-size: 17px; font-weight: 600; color: var(--inth); line-height: 1.5; margin: 0 0 4px; }
.intern__final-emphasis p:last-child { color: var(--intc); margin-bottom: 0; }
.intern__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
  .intern__page .intern__title { font-size: 30px; }
  .intern__hero { padding: 180px 0 90px; }
  .intern__hero-title { font-size: 42px; }
  .intern__area-grid { grid-template-columns: repeat(3, 1fr); }
  .intern__triad-grid, .intern__expect-grid, .intern__journey-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .intern__stamp-grid { grid-template-columns: repeat(2, 1fr); }
  .intern__mentor-panel { padding: 44px 34px; }
  .intern__contrib-panel { padding: 34px; gap: 26px; }
}
@media only screen and (max-width: 991px) {
  .intern__mentor-list { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 767px) {
  .intern__page .intern__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .intern__page .intern__title { font-size: 25px; }
  .intern__page .intern__btn, .intern__page .intern__btn-outline { padding: 15px 26px; font-size: 15px; }
  .intern__hero { padding: 150px 0 70px; }
  .intern__hero-title { font-size: 32px; }
  .intern__hero-lead { font-size: 17px; }
  .intern__overview, .intern__areas, .intern__triad, .intern__expect, .intern__apply,
  .intern__traits, .intern__mentor, .intern__practices, .intern__contrib, .intern__growth { padding: 70px 0; }
  .intern__journey { padding: 90px 0 70px; }
  .intern__faq { padding: 80px 0; }
  .intern__seo { padding: 60px 0 70px; }
  .intern__area-grid { grid-template-columns: repeat(2, 1fr); }
  .intern__triad-grid, .intern__expect-grid, .intern__journey-grid, .intern__stamp-grid { grid-template-columns: 1fr; }
  .intern__stamp { transform: none !important; }
  .intern__contrib-panel { flex-direction: column; }
  .intern__growth-list li { padding: 16px 18px; font-size: 14.5px; }
  .intern__faq-q { font-size: 16px; padding: 20px 22px; }
  .intern__faq-a p { padding: 0 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .intern__page .intern__btn,
  .intern__page .intern__btn-outline,
  .intern__area-card,
  .intern__journey-step,
  .intern__expect-card,
  .intern__stamp,
  .intern__apply-pills span { transition: none !important; }
  .intern__path-line, .intern__path-dot { transition: none !important; }
  .intern__flip-inner { transition: none !important; }
}

/* ============================================================
   CONTACT PAGE (contact__*)
   Scoped entirely to .contact__page (added on <main> of
   contact.html). Same brand tokens as the other company/careers
   pages (blue/purple/light-blue on dark #07152F, light gray
   #f6f7fc section backgrounds). Reuses the site's existing global
   .contact__form input/textarea/underline styling and the shared
   .final-cta component rather than redefining them; only adds
   select/file-input treatments the shared .contact__form never
   needed before. Nothing in this block leaks outside .contact__page.
   ============================================================ */
/* The header's hamburger icon has a decorative ring (.menu-icon-2::after,
   a generic shared rule used by every header__area-2 page) that reads
   as an odd stray circle once the fixed header scrolls over this page's
   many light-background sections below the dark hero. Hidden here only
   for contact.html via the header's own contact__header class, so other
   pages keep the ring. */
.contact__header .menu-icon-2::after { display: none; }

/* Same ring-overflow fix as the pages above - privacy-policy.html's white
   .blog__detail content sits right under the fixed header, so the ring
   pokes out past it as a stray circle. Hidden here only for the legal
   pages via the header's own legal__header class. */
.legal__header .menu-icon-2::after { display: none; }

.contact__page {
  --cc: #005fcc;
  --cc2: #8079f8;
  --cc3: #4da3ff;
  --ac2: #8079f8;
  --ch: #1c1e2b;
  --ct: #6b7089;
  --cb: #e9eaf5;
  --cbg: #f6f7fc;
  --cdark: #07152F;
  --cmuted: #9fb3cd;
  font-family: "Kanit", sans-serif;
}

/* ---------- Shared section furniture ---------- */
.contact__page .contact__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: var(--cc); margin-bottom: 18px;
}
.contact__page .contact__eyebrow--light { color: var(--cc3); }
.contact__page .contact__title { font-size: 36px; line-height: 1.24; font-weight: 600; color: var(--ch); margin: 0 0 20px; }
.contact__page .contact__title--light { color: #fff; }
.contact__page .contact__lead { font-size: 18px; font-weight: 400; line-height: 1.75; color: var(--ct); margin: 0 0 16px; }
.contact__page .contact__text { display: block; max-width: none; margin: 0 0 14px; font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ct); }
.contact__page .contact__text:last-child { margin-bottom: 0; }
.contact__page .contact__text strong { color: var(--ch); font-weight: 600; }
.contact__page .contact__text--light { color: var(--cmuted); }
.contact__page .contact__head { max-width: 780px; }
.contact__page .contact__head--center { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.contact__page .contact__btn,
.contact__page .contact__btn-outline {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 34px; border-radius: 50px;
  font-size: 16px; font-weight: 600; line-height: 1;
  transition: all .3s ease;
}
.contact__page .contact__btn { color: #fff; background: var(--cc); border: 2px solid var(--cc); }
.contact__page .contact__btn:hover { background: var(--cc2); border-color: var(--cc2); color: #fff; }
.contact__page .contact__btn-outline { color: var(--cc); border: 2px solid var(--cc); background: transparent; }
.contact__page .contact__btn-outline:hover { background: var(--cc); color: #fff; }
.contact__page .contact__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(0, 95, 204, .1); color: var(--cc); font-size: 19px;
  margin-bottom: 18px; flex: 0 0 auto;
}
.contact__page .contact__ico--light { background: rgba(77, 163, 255, .14); color: var(--cc3); }

/* ---------- 01. Hero ---------- */
.contact__hero { position: relative; overflow: hidden; background: var(--cdark); padding: 190px 0 120px; text-align: center; }
.contact__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 85% 0%, rgba(0, 95, 204, .28), transparent 62%),
              radial-gradient(760px 420px at 10% 100%, rgba(128, 121, 248, .2), transparent 64%);
}
.contact__hero > .container { position: relative; z-index: 2; }
.contact__hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.contact__hero-inner { text-align: left; }
.contact__hero-globe { justify-self: center; }
.contact__hero-title { font-size: 56px; line-height: 1.15; font-weight: 600; color: #fff; margin: 0 0 22px; }
.contact__hero-mark { color: var(--cc3); }
.contact__hero-lead { font-size: 20px; font-weight: 400; line-height: 1.6; color: #e6ecfa; margin: 0 0 18px; }
.contact__hero-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--cmuted); margin: 0 0 16px; }
.contact__hero-tagline { font-size: 17px; font-weight: 500; line-height: 1.6; color: #fff; margin: 20px 0 40px; }
.contact__hero-cta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px; margin-bottom: 40px; }
.contact__hero-quick { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px; }
.contact__hero-quick li { font-size: 14.5px; font-weight: 400; color: var(--cmuted); }
.contact__hero-quick a { color: var(--cmuted); transition: color .3s ease; }
.contact__hero-quick a:hover { color: var(--cc3); }
.contact__hero-quick i { color: var(--cc3); margin-right: 8px; }

/* ---------- 02. Intro ---------- */
.contact__intro { padding: 110px 0 40px; background: #fff; }
.contact__intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
/* A light, borderless "message thread" instead of a dark chat-window card: two
   bubbles staggered along a dashed guide line, plus a typing-indicator bubble
   suggesting the conversation is still going. */
.contact__intro-thread { position: relative; padding-left: 22px; }
.contact__intro-thread::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; border-left: 2px dashed var(--cc3);
}
.contact__intro-bubble {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  background: var(--cbg); border-radius: 6px 20px 20px 20px; padding: 20px 22px;
  box-shadow: 0 20px 40px rgba(18, 22, 41, .05);
}
.contact__intro-bubble + .contact__intro-bubble { margin-top: 20px; margin-left: 36px; }
.contact__intro-bubble .contact__ico {
  width: 36px; height: 36px; font-size: 14px; border-radius: 50%; margin-bottom: 0; flex: 0 0 auto;
  background: #fff; color: var(--cc); box-shadow: 0 6px 14px rgba(18, 22, 41, .08);
}
.contact__intro-bubble p { position: relative; margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--ct); }
.contact__intro-bubble--alt { background: #fff; border: 1.5px solid var(--cc); }
.contact__intro-bubble--alt .contact__ico { background: var(--cc); color: #fff; box-shadow: none; }
.contact__intro-typing {
  display: inline-flex; align-items: center; gap: 4px; margin: 16px 0 0 36px; background: var(--cbg);
  border-radius: 20px; padding: 12px 16px;
}
.contact__intro-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--cc); animation: contactTypingDot 1.2s ease-in-out infinite; }
.contact__intro-typing span:nth-child(2) { animation-delay: .15s; }
.contact__intro-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes contactTypingDot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- 03. Contact Options ---------- */
/* Centered intro, then a left copy column (headline, checklist, CTA, a decorative
   ascending "growth" chart) beside a right column of five cards threaded on a
   vertical connector line, with the primary path highlighted as the active item. */
.contact__options { padding: 50px 0 40px; background: #fff; }
.contact__opt-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; margin-top: 60px; }
.contact__opt-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 26px 0 32px; padding: 0; }
.contact__opt-checks li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--ch); }
.contact__opt-checks i { color: var(--cc); font-size: 15px; }
.contact__opt-hub-cta {
  display: inline-flex; align-items: center; gap: 16px; background: var(--cc); color: #fff;
  font-size: 15.5px; font-weight: 600; padding: 8px 8px 8px 26px; border-radius: 50px; transition: background .3s ease, color .3s ease;
}
.contact__opt-hub-cta:hover { background: #004a9e; color: #e1edfc; }
.contact__opt-hub-cta-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .2); color: #fff; font-size: 15px; flex: 0 0 auto;
}
.contact__opt-chart { margin-top: 56px; }
.contact__opt-chart-img { display: block; width: 100%; height: auto; }
.contact__opt-hub-footer { text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ct); margin: 28px 0 0; }
.contact__opt-chart-divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.contact__opt-chart-divider span:not(.contact__opt-chart-divider-accent) { flex: 1 1 80px; max-width: 140px; height: 1px; background: var(--cb); }
.contact__opt-chart-divider-accent { width: 40px; height: 3px; border-radius: 2px; background: var(--cc); flex: 0 0 auto; }

.contact__opt-timeline { position: relative; display: flex; flex-direction: column; gap: 16px; }
.contact__opt-timeline::before {
  content: ""; position: absolute; top: 48px; bottom: 48px; left: 50px; width: 2px; background: var(--cb); z-index: 0;
}
.contact__opt-timeline-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; min-height: 96px;
  background: #fff; border: 1px solid var(--cb); border-radius: 18px; padding: 18px 22px;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.contact__opt-timeline-item:hover { border-color: var(--cc); box-shadow: 0 16px 34px rgba(18, 22, 41, .07); }
.contact__opt-timeline-item--active { background: rgba(0, 95, 204, .04); border-color: var(--cc); box-shadow: 0 16px 34px rgba(0, 95, 204, .1); }
.contact__opt-timeline-item--active::before {
  content: ""; position: absolute; top: 50%; left: -9px; width: 16px; height: 16px; background: var(--cc);
  transform: translateY(-50%) rotate(45deg); border-radius: 3px;
}
.contact__opt-timeline-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0, 95, 204, .1); color: var(--cc); font-size: 20px; flex: 0 0 auto;
}
.contact__opt-timeline-body { flex: 1 1 auto; min-width: 0; }
.contact__opt-timeline-body h3 { font-size: 16.5px; font-weight: 700; color: var(--ch); margin: 0 0 4px; }
.contact__opt-timeline-body p { font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--ct); margin: 0; }
.contact__opt-timeline-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cbg); color: var(--cc); font-size: 14px; flex: 0 0 auto; transition: background .3s ease, color .3s ease;
}
.contact__opt-timeline-item:hover .contact__opt-timeline-arrow { background: var(--cc); color: #fff; }

/* ---------- 03b. Global Reach ---------- */
/* A dotted world map image, tinted blue-to-orange by latitude band. */
.contact__globe { padding: 50px 0 30px; background: #fff; }
.contact__globe-stage {
  position: relative; max-width: 1000px; margin: 54px auto 0; aspect-ratio: 1893 / 831;
}
.contact__globe-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- 04. Contact Form ---------- */
.contact__form-section { padding: 110px 0; background: #fff; position: relative; overflow: hidden; }
.contact__form-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(640px 380px at 100% 0%, rgba(0, 95, 204, .05), transparent 62%);
}
.contact__form-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.3fr; gap: 70px; align-items: start; }
.contact__form-col { min-width: 0; }
.contact__form-info { position: static; margin-top: 12px; }
.contact__eyebrow--line { position: relative; padding-left: 34px; }
.contact__eyebrow--line::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 2px; background: var(--cc); transform: translateY(-50%);
}
.contact__cta-title { font-size: 42px; line-height: 1.14; margin-bottom: 20px; }
.contact__cta-title-accent { background: linear-gradient(90deg, var(--cc), var(--cc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact__work-station { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; margin: 0 0 14px; }
.contact__work-station-ico { width: 72px; height: 72px; object-fit: contain; }
/* HQ card with a floating "Headquarters" tab, plus a 2-up row of consulting offices
   each carrying their own colored top accent - back closer to the original directory
   layout, with a badge and accent borders standing in for the extra visual interest. */
.contact__reach-card {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cb);
  border-radius: 18px; padding: 22px 22px 20px; margin-top: 22px; transition: border-color .3s ease, box-shadow .3s ease;
}
.contact__reach-card:hover { border-color: var(--cc); box-shadow: 0 16px 34px rgba(18, 22, 41, .07); }
.contact__reach-card--hq { background: var(--cbg); border-color: var(--cb); }
.contact__reach-badge {
  position: absolute; top: -15px; left: 22px; background: var(--cc); color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; padding: 8px 18px; border-radius: 20px;
}
.contact__reach-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact__reach-row .contact__reach-card { border-top: 3px solid transparent; }
.contact__reach-row .contact__reach-card.contact__reach-card--accent-blue { border-top-color: #4da3ff; }
.contact__reach-row .contact__reach-card.contact__reach-card--accent-purple { border-top-color: var(--cc2); }
.contact__reach-row .contact__reach-card.contact__reach-card--accent-blue:hover { border-color: #4da3ff; }
.contact__reach-row .contact__reach-card.contact__reach-card--accent-purple:hover { border-color: var(--cc2); }
.contact__reach-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.contact__reach-head .contact__work-station { margin-bottom: 0; }
.contact__reach-title { font-size: 22px; font-weight: 700; color: var(--ct); margin: 0 0 10px; }
.contact__reach-head .contact__reach-title { margin: 0; text-transform: uppercase; }
.contact__reach-row .contact__reach-title { font-size: 13px; text-transform: uppercase; color: var(--ct); }
.contact__reach-city { font-size: 18px; font-weight: 600; color: var(--ch); margin: 0 0 10px; }
.contact__reach-row .contact__reach-city { font-size: 14px; font-weight: 400; color: var(--ct); }
.contact__reach-row .contact__reach-line { font-size: 13px; color: var(--ct); }
.contact__reach-address { font-size: 16px; font-weight: 300; color: var(--ct); line-height: 1.65; margin: 12px 0 0; }
.contact__reach-line { font-size: 16.5px; font-weight: 400; color: var(--ct); margin: 0 0 8px; line-height: 1.5; white-space: nowrap; }
.contact__reach-line:last-of-type { margin-bottom: 0; }
.contact__reach-line a { color: var(--ct); font-weight: 400; }
.contact__reach-line a:hover { color: var(--cc); }
.contact__trust-pill {
  display: inline-flex; align-items: center; gap: 10px; background: var(--cbg); color: var(--cc);
  font-size: 13.5px; font-weight: 600; padding: 13px 24px; border-radius: 30px; margin-top: 22px;
}
.contact__trust-pill i { color: var(--cc); }
.contact__form-wrap {
  position: relative; background: #fff; border: 1px solid var(--cb);
  border-radius: 26px; padding: 48px 48px 32px; box-shadow: 0 30px 70px rgba(18, 22, 41, .07);
}
.contact__form-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 26px 26px 0 0; background: linear-gradient(90deg, var(--cc), var(--cc2)); }
.contact__reply-badge {
  position: absolute; top: -30px; right: 28px; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 40px; padding: 12px 22px 12px 16px; box-shadow: 0 16px 34px rgba(18, 22, 41, .14);
  font-size: 11px; font-weight: 500; color: var(--cc); line-height: 1.4;
}
.contact__reply-badge i {
  display: inline-flex; align-items: center; justify-content: center; color: var(--cc); font-size: 22px; flex: 0 0 auto;
}
.contact__reply-badge strong { color: var(--cc); font-weight: 500; }
.contact__form-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 30px; }
.contact__form-head-title { font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--cc); }
.contact__form-head-note { font-size: 12.5px; font-weight: 400; color: var(--ct); }
.contact__field { position: relative; }
.contact__field > i {
  position: absolute; top: 26px; left: 18px; transform: translateY(-50%); color: var(--ct); font-size: 15px; z-index: 1; pointer-events: none;
}
.contact__field--textarea > i { top: 26px; transform: none; }
.contact__page .contact__form input,
.contact__page .contact__form textarea,
.contact__page .contact__form select {
  background: var(--cbg); border: 1.5px solid var(--cb); border-radius: 14px;
  padding: 16px 18px 16px 46px; margin-bottom: 20px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.contact__page .contact__form input:focus,
.contact__page .contact__form textarea:focus,
.contact__page .contact__form select:focus {
  border-color: var(--cc); background: #fff; box-shadow: 0 0 0 4px rgba(0, 95, 204, .1);
}
.contact__page .contact__form select {
  width: 100%; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ch); outline: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7089' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.contact__page .contact__form select:invalid,
.contact__page .contact__form select:has(option[value=""]:checked) { color: #a9aec2; }
.contact__page .contact__form textarea { min-height: 130px; }
.contact__page .contact__form input::placeholder,
.contact__page .contact__form textarea::placeholder { color: #a9aec2; opacity: 1; }
.contact__page .contact__form input::-webkit-input-placeholder,
.contact__page .contact__form textarea::-webkit-input-placeholder { color: #a9aec2; opacity: 1; }
.contact__page .contact__form input::-moz-placeholder,
.contact__page .contact__form textarea::-moz-placeholder { color: #a9aec2; opacity: 1; }
.contact__submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 24px; }
.contact__submit-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 0; border: none; background: none;
  color: var(--cc); font-size: 16px; font-weight: 600; cursor: pointer; transition: gap .3s ease, color .3s ease;
}
.contact__submit-btn:hover { gap: 15px; color: var(--cc2); }
.contact__submit-trust { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ct); margin-left: auto; }
.contact__submit-trust i { color: var(--ch); }
.contact__form-footer {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px;
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ct);
}
.contact__form-footer i { color: var(--cb); font-size: 11px; }
.contact__form-footer-line { flex: 1 1 auto; height: 1px; background: var(--cb); }
.contact__file { position: relative; margin-bottom: 8px; }
.contact__file label {
  display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--ct);
  background: var(--cbg); border: 1.5px dashed var(--cb); border-radius: 14px; padding: 16px 18px; cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease; margin: 0;
}
.contact__file label i { color: var(--cc); }
.contact__file label:hover { border-color: var(--cc); color: var(--ch); background: #fff; }
.contact__file input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.contact__file input[type="file"]:focus-visible + label,
.contact__file label:has(input[type="file"]:focus-visible) { outline: 2px solid var(--cc); outline-offset: 2px; }
.contact__file-hint { font-size: 11px; color: var(--ct); margin: 10px 0 0; text-align: right; }
.contact__privacy { font-size: 11px; font-weight: 300; line-height: 1.6; color: var(--ct); margin: 32px 0 0; }
.contact__privacy a { color: var(--cc); text-decoration: underline; }
.contact__page .contact__form input.contact__hp-field { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap; border: 0 !important; }
.contact__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.contact__modal[hidden] { display: none; }
.contact__modal-overlay { position: absolute; inset: 0; background: rgba(7, 21, 47, .55); }
.contact__modal-box { position: relative; background: #fff; border-radius: 20px; padding: 44px 38px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 30px 70px rgba(18, 22, 41, .25); }
.contact__modal-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--cbg); color: var(--ct); font-size: 20px; line-height: 1; cursor: pointer; transition: background .3s ease, color .3s ease;
}
.contact__modal-close:hover { background: var(--cb); color: var(--ch); }
.contact__modal-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-size: 28px; margin-bottom: 18px; }
.contact__modal--success .contact__modal-ico { background: rgba(10, 138, 74, .1); color: #0a8a4a; }
.contact__modal--error .contact__modal-ico { background: rgba(192, 57, 43, .1); color: #c0392b; }
.contact__modal-title { font-size: 22px; font-weight: 700; color: var(--ch); margin: 0 0 10px; }
.contact__modal-text { font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--ct); margin: 0 0 26px; }
.contact__modal-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 13px 32px; border-radius: 50px;
  background: var(--cc); color: #fff; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: background .3s ease;
}
.contact__modal-btn:hover { background: var(--cc2); }

/* ---------- 05. Why 3Shadz ---------- */
/* Dark, alternating zigzag row list instead of another white card grid - deliberately
   different from the .contact__opt-timeline-item / .contact__cap-tile treatments used
   elsewhere on this page, and puts a dark band right before the (also dark) How It
   Works section. */
.contact__why { padding: 110px 0; background: var(--cdark); position: relative; overflow: hidden; }
.contact__why::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(760px 420px at 92% 8%, rgba(0, 95, 204, .22), transparent 62%),
              radial-gradient(700px 400px at 4% 96%, rgba(128, 121, 248, .16), transparent 64%);
}
.contact__why > .container { position: relative; z-index: 1; }
.contact__lead--light { color: var(--cmuted); }
/* A single spacious row of four, divided by hairlines, each with an oversized
   ghost numeral in the background - an editorial "core values" register instead
   of a boxed 2x2 card grid, distinct from the other card/timeline patterns
   already used elsewhere on this page. */
.contact__why-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.contact__why-entry {
  position: relative; overflow: hidden; padding: 34px 30px 0; border-top: 1px solid rgba(255, 255, 255, .14);
}
.contact__why-entry:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .14); }
.contact__why-num {
  position: absolute; top: -6px; right: 14px; font-size: 90px; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .12); pointer-events: none;
}
.contact__why-entry .contact__ico { position: relative; width: 52px; height: 52px; font-size: 21px; margin-bottom: 20px; }
.contact__why-entry h3 { position: relative; font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.contact__why-entry p { position: relative; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--cmuted); margin: 0; padding-bottom: 8px; }

/* ---------- 06. How It Works ---------- */
.contact__process { padding: 110px 0; background: var(--cdark); position: relative; overflow: hidden; }
.contact__process::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(800px 420px at 90% 0%, rgba(0, 95, 204, .22), transparent 62%),
              radial-gradient(700px 400px at 6% 100%, rgba(128, 121, 248, .18), transparent 64%);
}
.contact__process > .container { position: relative; z-index: 1; }
/* A literal connected path instead of boxed cards + arrow icons: circular numbered
   nodes threaded on a dashed line, matching "A Simple Path From Enquiry to Action"
   - visually distinct from the Why 3Shadz card grid right above it. Grid (not flex)
   so columns are exactly equal width, which the ::after line math depends on. */
.contact__process-track { display: grid; grid-template-columns: repeat(5, 1fr); }
.contact__process-node { position: relative; padding: 0 14px; text-align: center; }
.contact__process-node:not(:last-child)::after {
  content: ""; position: absolute; top: 34px; left: 50%; width: 100%; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 7px, transparent 7px 16px);
}
.contact__process-node span {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; background: var(--cdark); border: 2px solid var(--cc3);
  color: var(--cc3); font-size: 22px; font-weight: 700; margin-bottom: 22px;
}
.contact__process-node strong { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.contact__process-node p { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--cmuted); margin: 0; }

/* ---------- 07. Technology Services ---------- */
/* A mosaic of soft color-tinted tiles instead of plain white corner-bracket cards -
   each tile's background picks up a faint tint of its own accent color, leaning
   further into this section's role as the page's spot of real color variety. Own
   class family (not the shared .co__csr-card / .cto__good-tile archetype used on
   other pages) so this stays a one-off treatment for the contact page. */
.contact__services { padding: 110px 0 90px; background: #fff; }
.contact__cap-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.contact__cap-tile {
  display: flex; flex-direction: column; padding: 28px 24px; border-radius: 18px;
  background: color-mix(in srgb, var(--tile-accent) 10%, white);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.contact__cap-tile:hover {
  transform: translateY(-6px); box-shadow: 0 20px 40px rgba(18, 22, 41, .1);
  background: color-mix(in srgb, var(--tile-accent) 18%, white);
}
.contact__cap-tile-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--tile-accent); color: #fff; font-size: 20px; margin-bottom: 18px;
}
.contact__cap-tile h3 { font-size: 16.5px; font-weight: 600; color: var(--ch); margin: 0 0 8px; }
.contact__cap-tile p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ct); margin: 0; }
.contact__svc-cta { text-align: center; margin-top: 50px; }

/* ---------- 09. Direct Contact ---------- */
/* One dark panel (intro + a divided stat-bar) instead of a fourth white-card grid. */
.contact__direct { padding: 100px 0; background: var(--cbg); }
.contact__direct-bar { position: relative; overflow: hidden; background: var(--cdark); border-radius: 28px; padding: 60px 50px; }
.contact__direct-bar::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 92% 105%, rgba(0, 95, 204, .22), transparent 62%),
              radial-gradient(600px 340px at 2% -10%, rgba(128, 121, 248, .16), transparent 64%);
}
.contact__direct-intro, .contact__direct-stats { position: relative; z-index: 1; }
.contact__direct-intro { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.contact__direct-intro .contact__title { margin-bottom: 10px; }
.contact__direct-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 40px; }
.contact__direct-stat { flex: 1 1 220px; display: flex; align-items: flex-start; gap: 16px; padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .12); }
.contact__direct-stat:first-child { border-left: none; padding-left: 0; }
.contact__direct-stat .contact__ico { margin-bottom: 0; flex: 0 0 auto; }
.contact__direct-stat h3 { font-size: 14px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 6px; }
.contact__direct-stat p { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--cmuted); margin: 0; }
.contact__direct-stat a { color: var(--cmuted); transition: color .3s ease; }
.contact__direct-stat a:hover { color: var(--cc3); }

/* ---------- 10. FAQ ---------- */
.contact__faq { padding: 110px 0; background: #fff; }
/* Overrides the shared .faq__list-6 accordion (used elsewhere in its plain
   full-width divided-list form, see assets/css/master.css ~L18214) with a two-column
   masonry of individually bordered cards and a circular +/- badge instead of a bare
   glyph - scoped to .contact__page so the shared component is untouched elsewhere. */
.contact__page .contact__faq-grid .accordion { column-count: 2; column-gap: 22px; }
.contact__page .contact__faq-grid .accordion-item {
  display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 20px;
  background: var(--cbg); border: 1px solid var(--cb); border-radius: 16px; overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.contact__page .contact__faq-grid .accordion-item:hover { border-color: var(--cc); box-shadow: 0 14px 30px rgba(18, 22, 41, .06); }
.contact__page .contact__faq-grid .accordion-header { margin: 0; }
.contact__page .contact__faq-grid .accordion-button {
  padding: 22px 60px 22px 22px; font-size: 15.5px; font-weight: 600; color: var(--ch); background: transparent;
}
.contact__page .contact__faq-grid .accordion-button.collapsed::after,
.contact__page .contact__faq-grid .accordion-button:not(.collapsed)::after {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 400; line-height: 1; background-image: none;
  transition: background .3s ease, color .3s ease;
}
.contact__page .contact__faq-grid .accordion-button.collapsed::after { content: "+"; background: rgba(0, 95, 204, .1); color: var(--cc); }
.contact__page .contact__faq-grid .accordion-button:not(.collapsed)::after { content: "\2212"; background: var(--cc); color: #fff; }
.contact__page .contact__faq-grid .accordion-body { padding: 0 22px 22px; min-height: 0; }
.contact__page .contact__faq-grid .accordion-body p { font-size: 14.5px; font-weight: 300; color: var(--ct); line-height: 1.7; margin: 0; }

/* ---------- 11. Final CTA (extends the shared .final-cta) ---------- */
.contact__page .final-cta-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media (max-width: 1200px) {
  .contact__opt-split { grid-template-columns: 1fr; gap: 50px; }
  .contact__cap-mosaic { grid-template-columns: repeat(2, 1fr); }
  .contact__form-grid { grid-template-columns: 1fr; gap: 50px; }
  .contact__form-info { position: static; }
  .contact__cta-title { font-size: 34px; }
  .contact__process-track { display: flex; flex-direction: column; align-items: center; }
  .contact__process-node { max-width: 340px; width: 100%; padding: 28px 0; }
  .contact__process-node:not(:last-child)::after {
    top: 68px; left: calc(50% - 1px); width: 2px; height: calc(100% - 46px);
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .3) 0 7px, transparent 7px 16px);
  }
}
@media (max-width: 991px) {
  .contact__hero { padding: 160px 0 90px; }
  .contact__hero-title { font-size: 42px; }
  .contact__page .contact__title { font-size: 30px; }
  .contact__form-section, .contact__why, .contact__process,
  .contact__services, .contact__direct, .contact__faq { padding-top: 80px; padding-bottom: 80px; }
  .contact__intro { padding-top: 80px; padding-bottom: 30px; }
  .contact__options { padding-top: 40px; padding-bottom: 30px; }
  .contact__globe { padding-top: 40px; padding-bottom: 24px; }
  .contact__globe-stage { margin-top: 40px; }
  .contact__intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__form-wrap { padding: 32px 26px; }
  .contact__form-head { flex-direction: column; align-items: flex-start; }
  .contact__hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .contact__hero-inner { text-align: center; }
  .contact__hero-cta, .contact__hero-quick { justify-content: center; }
  .abt__globe-vis { max-width: 380px; }
  .contact__page .contact__faq-grid .accordion { column-count: 1; }
  .contact__why-row { grid-template-columns: repeat(2, 1fr); }
  .contact__why-entry:nth-child(2n) { border-right: none; }
  .contact__direct-bar { padding: 46px 34px; }
  .contact__direct-stat { flex: 1 1 45%; }
}
@media (max-width: 767px) {
  .contact__hero-title { font-size: 32px; }
  .contact__hero-lead { font-size: 17px; }
  .contact__page .contact__eyebrow { letter-spacing: 3px; font-size: 13px; }
  .contact__page .contact__title { font-size: 25px; }
  .contact__page .contact__btn, .contact__page .contact__btn-outline { padding: 15px 26px; font-size: 15px; }
  .contact__opt-timeline-item { flex-wrap: wrap; }
  .contact__opt-timeline-arrow { margin-left: 74px; }
  .contact__reach-row { grid-template-columns: 1fr; }
  .contact__why-row { grid-template-columns: 1fr; }
  .contact__why-entry { border-right: none !important; padding: 26px 0 0; }
  .contact__why-num { font-size: 64px; }
  .contact__cap-mosaic { grid-template-columns: 1fr; }
  .contact__reply-badge { position: static; display: inline-flex; margin: 0 0 20px; }
  .contact__submit-row { flex-direction: column; align-items: flex-start; }
  .contact__direct-bar { padding: 40px 24px; border-radius: 20px; }
  .contact__direct-stats { flex-direction: column; gap: 20px; }
  .contact__direct-stat { border-left: none; border-top: 1px solid rgba(255, 255, 255, .12); padding: 20px 0 0; }
  .contact__direct-stat:first-child { border-top: none; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .contact__page .contact__btn,
  .contact__page .contact__btn-outline,
  .contact__opt-timeline-item,
  .contact__submit-btn,
  .contact__reach-card,
  .contact__cap-tile { transition: none !important; }
  .contact__intro-typing span { animation: none !important; opacity: .6; }
}

/* ==KX-REDESIGN-START== */

/* ============================================================
   PREMIUM COMPOSITION REDESIGN  (--kx-* / archetype layer)
   ------------------------------------------------------------
   Replaces the repeated icon+title+description card grids that
   had been copy-pasted across the service, industry, solution,
   technology, consulting and insight pages with a set of
   distinct editorial compositions. Nothing here is a restyled
   card: each family gets its own structure - a ledger, an
   asymmetric lead+register split, a staggered spine, a
   horizontal rail, a spec register, a mosaic, a manifesto.

   Contract, so the approved homepage cannot be affected:
     * EVERY selector in this block is scoped under a
       .<ns>__page ancestor. index.html carries no __page class
       on any element, so no rule below can ever match it.
     * Each page's own palette is bridged onto a generic
       --kx-* schema, so one implementation serves many pages
       without duplicating declarations or inventing new brand
       colours.
     * Content, headings, copy and CTA text are untouched; only
       the composition of existing markup changes.
   ============================================================ */

/* ---------- palette bridge ---------- */
.aad__page { --kx-a: var(--adc); --kx-a2: var(--adc2); --kx-a3: var(--adc3); --kx-h: var(--adh); --kx-t: var(--adt); --kx-b: var(--adb); --kx-bg: var(--adbg); --kx-dark: var(--addark); --kx-muted: var(--admuted); --kx-on-a: #fff; }
.aas__page { --kx-a: var(--asc); --kx-a2: var(--asc2); --kx-a3: var(--asc3); --kx-h: var(--ash); --kx-t: var(--ast); --kx-b: var(--asb); --kx-bg: var(--asbg); --kx-dark: var(--asdark); --kx-muted: var(--asmuted); --kx-on-a: #fff; }
.apd__page { --kx-a: var(--apc); --kx-a2: var(--apc2); --kx-a3: var(--apc3); --kx-h: var(--aph); --kx-t: var(--apt); --kx-b: var(--apb); --kx-bg: var(--apbg); --kx-dark: var(--apdark); --kx-muted: var(--apmuted); --kx-on-a: #fff; }
.cai__page { --kx-a: var(--cic); --kx-a2: var(--cic2); --kx-a3: var(--cic3); --kx-h: var(--cih); --kx-t: var(--cit); --kx-b: var(--cib); --kx-bg: var(--cibg); --kx-dark: var(--cidark); --kx-muted: var(--cimuted); --kx-on-a: #fff; }
.abt__page { --kx-a: var(--ac); --kx-a2: var(--ac2); --kx-a3: var(--ac3); --kx-h: var(--ah); --kx-t: var(--at); --kx-b: var(--ab); --kx-bg: var(--abg); --kx-dark: var(--adark); --kx-muted: var(--amuted); --kx-on-a: #fff; }
.adi__page { --kx-a: var(--eg); --kx-a2: var(--eg2); --kx-a3: var(--eg3); --kx-h: var(--eh); --kx-t: var(--et); --kx-b: var(--eb); --kx-bg: var(--ebg); --kx-dark: var(--edark); --kx-muted: var(--emuted); --kx-on-a: #fff; }
.ai__page { --kx-a: var(--ac); --kx-a2: var(--ac2); --kx-a3: var(--ac3); --kx-h: var(--ah); --kx-t: var(--at); --kx-b: var(--ab); --kx-bg: var(--abg); --kx-dark: var(--adark); --kx-muted: var(--amuted); --kx-on-a: #fff; }
.aic__page { --kx-a: var(--qc); --kx-a2: var(--qc2); --kx-a3: var(--qc3); --kx-h: var(--qh); --kx-t: var(--qt); --kx-b: var(--qb); --kx-bg: var(--qbg); --kx-dark: var(--qdark); --kx-muted: var(--qmuted); --kx-on-a: #fff; }
.aisc__page { --kx-a: var(--aisc); --kx-a2: var(--aisc-light); --kx-a3: var(--aisc2); --kx-h: var(--aisch); --kx-t: var(--aisct); --kx-b: var(--aiscb); --kx-bg: var(--aiscbg); --kx-dark: var(--aiscdark); --kx-muted: var(--aiscmuted); --kx-on-a: #fff; }
.aisol__page { --kx-a: var(--xc); --kx-a2: var(--xc2); --kx-a3: var(--xc3); --kx-h: var(--xh); --kx-t: var(--xt); --kx-b: var(--xb); --kx-bg: var(--xbg); --kx-dark: var(--xdark); --kx-muted: var(--xmuted); --kx-on-a: #fff; }
.ait__page { --kx-a: var(--ic); --kx-a2: var(--ic2); --kx-a3: var(--ic3); --kx-h: var(--ih); --kx-t: var(--it); --kx-b: var(--ib); --kx-bg: var(--ibg); --kx-dark: var(--idark); --kx-muted: var(--imuted); --kx-on-a: #fff; }
.apm__page { --kx-a: var(--eg); --kx-a2: var(--eg2); --kx-a3: var(--eg3); --kx-h: var(--eh); --kx-t: var(--et); --kx-b: var(--eb); --kx-bg: var(--ebg); --kx-dark: var(--edark); --kx-muted: var(--emuted); --kx-on-a: #fff; }
.asm__page { --kx-a: var(--asm); --kx-a2: var(--asm2); --kx-a3: var(--asm3); --kx-h: var(--asmh); --kx-t: var(--asmt); --kx-b: var(--asmb); --kx-bg: var(--asmbg); --kx-dark: var(--asmdark); --kx-muted: var(--asmmuted); --kx-on-a: #fff; }
.bde__page { --kx-a: var(--bde); --kx-a2: var(--bde2); --kx-a3: var(--bde3); --kx-h: var(--bdeh); --kx-t: var(--bdet); --kx-b: var(--bdeb); --kx-bg: var(--bdebg); --kx-dark: var(--bdedark); --kx-muted: var(--bdemuted); --kx-on-a: #fff; }
.be__page { --kx-a: var(--bc); --kx-a2: var(--bc2); --kx-a3: var(--bc3); --kx-h: var(--bh); --kx-t: var(--bt); --kx-b: var(--bb); --kx-bg: var(--bbg); --kx-dark: var(--bdark); --kx-muted: var(--bmuted); --kx-on-a: #fff; }
.bi__page { --kx-a: var(--bi); --kx-a2: var(--bi2); --kx-a3: var(--bi3); --kx-h: var(--bih); --kx-t: var(--bit); --kx-b: var(--bib); --kx-bg: var(--bibg); --kx-dark: var(--bidark); --kx-muted: var(--bimuted); --kx-on-a: #fff; }
.bih__page { --kx-a: var(--bc); --kx-a2: var(--bc2); --kx-a3: var(--bc3); --kx-h: var(--bh); --kx-t: var(--bt); --kx-b: var(--bb); --kx-bg: var(--bbg); --kx-dark: var(--bdark); --kx-muted: var(--bmuted); --kx-on-a: #fff; }
.cdc__page { --kx-a: var(--cdc); --kx-a2: var(--cdc2); --kx-a3: var(--cdc3); --kx-h: var(--cdch); --kx-t: var(--cdct); --kx-b: var(--cdcb); --kx-bg: var(--cdcbg); --kx-dark: var(--cdcdark); --kx-muted: var(--cdcmuted); --kx-on-a: #fff; }
.cdh__page { --kx-a: var(--hc); --kx-a2: var(--hc2); --kx-a3: var(--hc3); --kx-h: var(--hh); --kx-t: var(--ht); --kx-b: var(--hb); --kx-bg: var(--hbg); --kx-dark: var(--hdark); --kx-muted: var(--hmuted); --kx-on-a: #fff; }
.cds__page { --kx-a: var(--dc); --kx-a2: var(--dc2); --kx-a3: var(--dc3); --kx-h: var(--dh); --kx-t: var(--dt); --kx-b: var(--db); --kx-bg: var(--dbg); --kx-dark: var(--ddark); --kx-muted: var(--dmuted); --kx-on-a: #fff; }
.cdv__page { --kx-a: var(--cp); --kx-a2: var(--cp2); --kx-a3: var(--cp3); --kx-h: var(--ch); --kx-t: var(--ct); --kx-b: var(--cb); --kx-bg: var(--cbg); --kx-dark: var(--cdarkbg); --kx-muted: var(--cmuted); --kx-on-a: #fff; }
.clc__page { --kx-a: var(--lp); --kx-a2: var(--lp2); --kx-a3: var(--lp3); --kx-h: var(--lh); --kx-t: var(--lt); --kx-b: var(--lb); --kx-bg: var(--lbg); --kx-dark: var(--ldarkbg); --kx-muted: var(--lmuted); --kx-on-a: #fff; }
.clm__page { --kx-a: var(--mp); --kx-a2: var(--mp2); --kx-a3: var(--mp3); --kx-h: var(--mh); --kx-t: var(--mt); --kx-b: var(--mb); --kx-bg: var(--mbg); --kx-dark: var(--mdarkbg); --kx-muted: var(--mmuted); --kx-on-a: #fff; }
.co__page { --kx-a: var(--cc); --kx-a2: var(--cc2); --kx-a3: var(--cc3); --kx-h: var(--ch); --kx-t: var(--ct); --kx-b: var(--cb); --kx-bg: var(--cbg); --kx-dark: var(--cdark); --kx-muted: var(--cmuted); --kx-on-a: #fff; }
.contact__page { --kx-a: var(--cc); --kx-a2: var(--cc2); --kx-a3: var(--cc3); --kx-h: var(--ch); --kx-t: var(--ct); --kx-b: var(--cb); --kx-bg: var(--cbg); --kx-dark: var(--cdark); --kx-muted: var(--cmuted); --kx-on-a: #fff; }
.cr__page { --kx-a: var(--crc); --kx-a2: var(--crc2); --kx-a3: var(--crc3); --kx-h: var(--crh); --kx-t: var(--crt); --kx-b: var(--crb); --kx-bg: var(--crbg); --kx-dark: var(--crdark); --kx-muted: var(--crmuted); --kx-on-a: #fff; }
.csw__page { --kx-a: var(--cc); --kx-a2: var(--cc2); --kx-a3: var(--cc3); --kx-h: var(--ch); --kx-t: var(--ct); --kx-b: var(--cb); --kx-bg: var(--cbg); --kx-dark: var(--cdark); --kx-muted: var(--cmuted); --kx-on-a: #fff; }
.cto__page { --kx-a: var(--cto); --kx-a2: var(--cto-light); --kx-a3: var(--cto2); --kx-h: var(--ctoh); --kx-t: var(--ctot); --kx-b: var(--ctob); --kx-bg: var(--ctobg); --kx-dark: var(--ctodark); --kx-muted: var(--ctomuted); --kx-on-a: #fff; }
.dat__page { --kx-a: var(--dac); --kx-a2: var(--dac2); --kx-a3: var(--dac3); --kx-h: var(--dah); --kx-t: var(--damute); --kx-b: var(--dab); --kx-bg: var(--dabg); --kx-dark: var(--dadark); --kx-muted: var(--damuted); --kx-on-a: #fff; }
.dax__page { --kx-a: var(--dax); --kx-a2: var(--dax2); --kx-a3: var(--dax3); --kx-h: var(--daxh); --kx-t: var(--daxt); --kx-b: var(--daxb); --kx-bg: var(--daxbg); --kx-dark: var(--daxdark); --kx-muted: var(--daxmuted); --kx-on-a: #fff; }
.db__page { --kx-a: var(--dbc); --kx-a2: var(--dbc2); --kx-a3: var(--dbc3); --kx-h: var(--dbh); --kx-t: var(--dbt); --kx-b: var(--dbb); --kx-bg: var(--dbbg); --kx-dark: var(--dbdark); --kx-muted: var(--dbmuted); --kx-on-a: #fff; }
.deng__page { --kx-a: var(--deng); --kx-a2: var(--deng2); --kx-a3: var(--deng3); --kx-h: var(--dengh); --kx-t: var(--dengt); --kx-b: var(--dengb); --kx-bg: var(--dengbg); --kx-dark: var(--dengdark); --kx-muted: var(--dengmuted); --kx-on-a: #fff; }
.dex__page { --kx-a: var(--dp); --kx-a2: var(--dp2); --kx-a3: var(--dp3); --kx-h: var(--dh); --kx-t: var(--dt); --kx-b: var(--db); --kx-bg: var(--dbg); --kx-dark: var(--ddark); --kx-muted: var(--dmuted); --kx-on-a: #fff; }
.dgov__page { --kx-a: var(--dgov); --kx-a2: var(--dgov2); --kx-a3: var(--dgov3); --kx-h: var(--dgovh); --kx-t: var(--dgovt); --kx-b: var(--dgovb); --kx-bg: var(--dgovbg); --kx-dark: var(--dgovdark); --kx-muted: var(--dgovmuted); --kx-on-a: #fff; }
.dsy__page { --kx-a: var(--sy); --kx-a2: var(--sy2); --kx-a3: var(--sym); --kx-h: var(--syi); --kx-t: var(--syt); --kx-b: var(--syb); --kx-bg: var(--sybg); --kx-dark: var(--sydark); --kx-muted: var(--symuted); --kx-on-a: #fff; }
.dt__page { --kx-a: var(--dc); --kx-a2: var(--dc2); --kx-a3: var(--dc3); --kx-h: var(--dh); --kx-t: var(--dt); --kx-b: var(--db); --kx-bg: var(--dbg); --kx-dark: var(--ddark); --kx-muted: var(--dmuted); --kx-on-a: #fff; }
.dtc__page { --kx-a: var(--dtc); --kx-a2: var(--dtc-light); --kx-a3: var(--dtc2); --kx-h: var(--dtch); --kx-t: var(--dtct); --kx-b: var(--dtcb); --kx-bg: var(--dtcbg); --kx-dark: var(--dtcdark); --kx-muted: var(--dtcmuted); --kx-on-a: #fff; }
.dth__page { --kx-a: var(--gc); --kx-a2: var(--gc2); --kx-a3: var(--gc3); --kx-h: var(--gh); --kx-t: var(--gt); --kx-b: var(--gb); --kx-bg: var(--gbg); --kx-dark: var(--gdark); --kx-muted: var(--gmuted); --kx-on-a: #fff; }
.dva__page { --kx-a: var(--dp); --kx-a2: var(--dp2); --kx-a3: var(--dp3); --kx-h: var(--dh); --kx-t: var(--dt); --kx-b: var(--db); --kx-bg: var(--dbg); --kx-dark: var(--ddarkbg); --kx-muted: var(--dmuted); --kx-on-a: #fff; }
.dwh__page { --kx-a: var(--dwh); --kx-a2: var(--dwh2); --kx-a3: var(--dwh3); --kx-h: var(--dwhh); --kx-t: var(--dwht); --kx-b: var(--dwhb); --kx-bg: var(--dwhbg); --kx-dark: var(--dwhdark); --kx-muted: var(--dwhmuted); --kx-on-a: #fff; }
.dx__page { --kx-a: var(--dc); --kx-a2: var(--dc2); --kx-a3: var(--dc3); --kx-h: var(--dh); --kx-t: var(--dt); --kx-b: var(--db); --kx-bg: var(--dbg); --kx-dark: var(--ddark); --kx-muted: var(--dmuted); --kx-on-a: #fff; }
.eac__page { --kx-a: var(--eac); --kx-a2: var(--eac-light); --kx-a3: var(--eac2); --kx-h: var(--each); --kx-t: var(--eact); --kx-b: var(--eacb); --kx-bg: var(--eacbg); --kx-dark: var(--eacdark); --kx-muted: var(--eacmuted); --kx-on-a: #fff; }
.eae__page { --kx-a: var(--eg); --kx-a2: var(--eg2); --kx-a3: var(--eg3); --kx-h: var(--eh); --kx-t: var(--et); --kx-b: var(--eb); --kx-bg: var(--ebg); --kx-dark: var(--edark); --kx-muted: var(--emuted); --kx-on-a: #fff; }
.edu__page { --kx-a: var(--edc); --kx-a2: var(--edc2); --kx-a3: var(--edc3); --kx-h: var(--edh); --kx-t: var(--edt); --kx-b: var(--edb); --kx-bg: var(--edbg); --kx-dark: var(--eddark); --kx-muted: var(--edmuted); --kx-on-a: #fff; }
.engage__page { --kx-a: var(--egc); --kx-a2: var(--egc2); --kx-a3: var(--egc3); --kx-h: var(--egh); --kx-t: var(--egt); --kx-b: var(--egb); --kx-bg: var(--egbg); --kx-dark: var(--egdark); --kx-muted: var(--egmuted); --kx-on-a: #fff; }
.ent__page { --kx-a: var(--ec); --kx-a2: var(--ec2); --kx-a3: var(--ec3); --kx-h: var(--eh); --kx-t: var(--et); --kx-b: var(--eb); --kx-bg: var(--ebg); --kx-dark: var(--edark); --kx-muted: var(--emuted); --kx-on-a: #fff; }
.fe__page { --kx-a: var(--fc); --kx-a2: var(--fc2); --kx-a3: var(--fc3); --kx-h: var(--fh); --kx-t: var(--ft); --kx-b: var(--fb); --kx-bg: var(--fbg); --kx-dark: var(--fdark); --kx-muted: var(--fmuted); --kx-on-a: #fff; }
.fit__page { --kx-a: var(--fitc); --kx-a2: var(--fitc2); --kx-a3: var(--fitc3); --kx-h: var(--fith); --kx-t: var(--fitt); --kx-b: var(--fitb); --kx-bg: var(--fitbg); --kx-dark: var(--fitdark); --kx-muted: var(--fitmuted); --kx-on-a: #fff; }
.food__page { --kx-a: var(--foodc); --kx-a2: var(--foodc2); --kx-a3: var(--foodc3); --kx-h: var(--foodh); --kx-t: var(--foodt); --kx-b: var(--foodb); --kx-bg: var(--foodbg); --kx-dark: var(--fooddark); --kx-muted: var(--foodmuted); --kx-on-a: #fff; }
.gai__page { --kx-a: var(--gc); --kx-a2: var(--gc2); --kx-a3: var(--gc3); --kx-h: var(--gh); --kx-t: var(--gt); --kx-b: var(--gb); --kx-bg: var(--gbg); --kx-dark: var(--gdark); --kx-muted: var(--gmuted); --kx-on-a: #fff; }
.gov__page { --kx-a: var(--govc); --kx-a2: var(--govc2); --kx-a3: var(--govc3); --kx-h: var(--govh); --kx-t: var(--govt); --kx-b: var(--govb); --kx-bg: var(--govbg); --kx-dark: var(--govdark); --kx-muted: var(--govmuted); --kx-on-a: #fff; }
.hc__page { --kx-a: var(--hc); --kx-a2: var(--hc2); --kx-a3: var(--hc3); --kx-h: var(--hh); --kx-t: var(--ht); --kx-b: var(--hb); --kx-bg: var(--hbg); --kx-dark: var(--hdark); --kx-muted: var(--hmuted); --kx-on-a: #fff; }
.ind__page { --kx-a: var(--ic); --kx-a2: var(--ic2); --kx-a3: var(--ic3); --kx-h: var(--ih); --kx-t: var(--it); --kx-b: var(--ib); --kx-bg: var(--ibg); --kx-dark: var(--idark); --kx-muted: var(--imuted); --kx-on-a: #fff; }
.itsc__page { --kx-a: var(--itsc); --kx-a2: var(--itsc-light); --kx-a3: var(--itsc2); --kx-h: var(--itsch); --kx-t: var(--itsct); --kx-b: var(--itscb); --kx-bg: var(--itscbg); --kx-dark: var(--itscdark); --kx-muted: var(--itscmuted); --kx-on-a: #fff; }
.lead__page { --kx-a: var(--lc); --kx-a2: var(--lc2); --kx-a3: var(--lc3); --kx-h: var(--lh); --kx-t: var(--lt); --kx-b: var(--lb); --kx-bg: var(--lbg); --kx-dark: var(--ldark); --kx-muted: var(--lmuted); --kx-on-a: #fff; }
.log__page { --kx-a: var(--logc); --kx-a2: var(--logc2); --kx-a3: var(--logc3); --kx-h: var(--logh); --kx-t: var(--logt); --kx-b: var(--logb); --kx-bg: var(--logbg); --kx-dark: var(--logdark); --kx-muted: var(--logmuted); --kx-on-a: #fff; }
.mad__page { --kx-a: var(--eg); --kx-a2: var(--eg2); --kx-a3: var(--eg3); --kx-h: var(--eh); --kx-t: var(--et); --kx-b: var(--eb); --kx-bg: var(--ebg); --kx-dark: var(--edark); --kx-muted: var(--emuted); --kx-on-a: #fff; }
.media__page { --kx-a: var(--mec); --kx-a2: var(--mec2); --kx-a3: var(--mec3); --kx-h: var(--meh); --kx-t: var(--met); --kx-b: var(--meb); --kx-bg: var(--mebg); --kx-dark: var(--medark); --kx-muted: var(--memuted); --kx-on-a: #fff; }
.mfg__page { --kx-a: var(--mfgc); --kx-a2: var(--mfgc2); --kx-a3: var(--mfgc3); --kx-h: var(--mfgh); --kx-t: var(--mfgt); --kx-b: var(--mfgb); --kx-bg: var(--mfgbg); --kx-dark: var(--mfgdark); --kx-muted: var(--mfgmuted); --kx-on-a: #fff; }
.mkt__page { --kx-a: var(--mktc); --kx-a2: var(--mktc2); --kx-a3: var(--mktc3); --kx-h: var(--mkth); --kx-t: var(--mktt); --kx-b: var(--mktb); --kx-bg: var(--mktbg); --kx-dark: var(--mktdark); --kx-muted: var(--mktmuted); --kx-on-a: #fff; }
.mt__page { --kx-a: var(--mc); --kx-a2: var(--mc2); --kx-a3: var(--mc3); --kx-h: var(--mh); --kx-t: var(--mt); --kx-b: var(--mb); --kx-bg: var(--mbg); --kx-dark: var(--mdark); --kx-muted: var(--mmuted); --kx-on-a: #fff; }
.pd__page { --kx-a: var(--pp); --kx-a2: var(--pp2); --kx-a3: var(--pm); --kx-h: var(--pi); --kx-t: var(--pt); --kx-b: var(--pb); --kx-bg: var(--pbg); --kx-dark: var(--pdark); --kx-muted: var(--pmuted); --kx-on-a: #fff; }
.process__page { --kx-a: var(--prc); --kx-a2: var(--prc2); --kx-a3: var(--prc3); --kx-h: var(--prh); --kx-t: var(--prt); --kx-b: var(--prb); --kx-bg: var(--prbg); --kx-dark: var(--prdark); --kx-muted: var(--prmuted); --kx-on-a: #fff; }
.qas__page { --kx-a: var(--qas); --kx-a2: var(--qas2); --kx-a3: var(--qas3); --kx-h: var(--qash); --kx-t: var(--qast); --kx-b: var(--qasb); --kx-bg: var(--qasbg); --kx-dark: var(--qasdark); --kx-muted: var(--qasmuted); --kx-on-a: #fff; }
.qst__page { --kx-a: var(--qst); --kx-a2: var(--qst2); --kx-a3: var(--qst3); --kx-h: var(--qsth); --kx-t: var(--qstt); --kx-b: var(--qstb); --kx-bg: var(--qstbg); --kx-dark: var(--qstdark); --kx-muted: var(--qstmuted); --kx-on-a: #fff; }
.re__page { --kx-a: var(--rec); --kx-a2: var(--rec2); --kx-a3: var(--rec3); --kx-h: var(--reh); --kx-t: var(--ret); --kx-b: var(--reb); --kx-bg: var(--rebg); --kx-dark: var(--redark); --kx-muted: var(--remuted); --kx-on-a: #fff; }
.saas__page { --kx-a: var(--eg); --kx-a2: var(--eg2); --kx-a3: var(--eg3); --kx-h: var(--eh); --kx-t: var(--et); --kx-b: var(--eb); --kx-bg: var(--ebg); --kx-dark: var(--edark); --kx-muted: var(--emuted); --kx-on-a: #fff; }
.sdh__page { --kx-a: var(--sc); --kx-a2: var(--sc2); --kx-a3: var(--sc3); --kx-h: var(--sh); --kx-t: var(--st); --kx-b: var(--sb); --kx-bg: var(--sbg); --kx-dark: var(--sdark); --kx-muted: var(--smuted); --kx-on-a: #fff; }
.soln__page { --kx-a: var(--sc); --kx-a2: var(--sc2); --kx-a3: var(--sc2); --kx-h: var(--sh); --kx-t: var(--st); --kx-b: var(--sb); --kx-bg: var(--sbg); --kx-dark: var(--sdark); --kx-muted: var(--st); --kx-on-a: #fff; }
.spe__page { --kx-a: var(--spc); --kx-a2: var(--spc2); --kx-a3: var(--spc3); --kx-h: var(--sph); --kx-t: var(--spt); --kx-b: var(--spb); --kx-bg: var(--spbg); --kx-dark: var(--spdark); --kx-muted: var(--spmuted); --kx-on-a: #fff; }
.su__page { --kx-a: var(--suc); --kx-a2: var(--suc2); --kx-a3: var(--suc3); --kx-h: var(--suh); --kx-t: var(--sut); --kx-b: var(--sub); --kx-bg: var(--subg); --kx-dark: var(--sudark); --kx-muted: var(--sumuted); --kx-on-a: #fff; }
.svc__page { --kx-a: var(--vc); --kx-a2: var(--vc2); --kx-a3: var(--vc3); --kx-h: var(--vh); --kx-t: var(--vt); --kx-b: var(--vb); --kx-bg: var(--vbg); --kx-dark: var(--vdark); --kx-muted: var(--vmuted); --kx-on-a: #fff; }
.swe__page { --kx-a: var(--eg); --kx-a2: var(--eg2); --kx-a3: var(--eg3); --kx-h: var(--eh); --kx-t: var(--et); --kx-b: var(--eb); --kx-bg: var(--ebg); --kx-dark: var(--edark); --kx-muted: var(--emuted); --kx-on-a: #fff; }
.tcon__page { --kx-a: var(--tcon); --kx-a2: var(--tcon-light); --kx-a3: var(--tcon2); --kx-h: var(--tconh); --kx-t: var(--tcont); --kx-b: var(--tconb); --kx-bg: var(--tconbg); --kx-dark: var(--tcondark); --kx-muted: var(--tconmuted); --kx-on-a: #fff; }
.tech__page { --kx-a: var(--tc); --kx-a2: var(--tc2); --kx-a3: var(--tc3); --kx-h: var(--th); --kx-t: var(--tt); --kx-b: var(--tb); --kx-bg: var(--tbg); --kx-dark: var(--tdark); --kx-muted: var(--tmuted); --kx-on-a: #fff; }
.tmc__page { --kx-a: var(--tmc); --kx-a2: var(--tmc-light); --kx-a3: var(--tmc2); --kx-h: var(--tmch); --kx-t: var(--tmct); --kx-b: var(--tmcb); --kx-bg: var(--tmcbg); --kx-dark: var(--tmcdark); --kx-muted: var(--tmcmuted); --kx-on-a: #fff; }
.trav__page { --kx-a: var(--trc); --kx-a2: var(--trc2); --kx-a3: var(--trc3); --kx-h: var(--trh); --kx-t: var(--trt); --kx-b: var(--trb); --kx-bg: var(--trbg); --kx-dark: var(--trdark); --kx-muted: var(--trmuted); --kx-on-a: #fff; }
.uix__page { --kx-a: var(--up); --kx-a2: var(--up2); --kx-a3: var(--um); --kx-h: var(--ui); --kx-t: var(--ut); --kx-b: var(--ub); --kx-bg: var(--ubg); --kx-dark: var(--udark); --kx-muted: var(--umuted); --kx-on-a: #fff; }
.uxr__page { --kx-a: var(--up); --kx-a2: var(--up2); --kx-a3: var(--up3); --kx-h: var(--uh); --kx-t: var(--ut); --kx-b: var(--ub); --kx-bg: var(--ubg); --kx-dark: var(--udark); --kx-muted: var(--umuted); --kx-on-a: #fff; }
.why__page { --kx-a: var(--wc); --kx-a2: var(--wc2); --kx-a3: var(--wc3); --kx-h: var(--wh); --kx-t: var(--wt); --kx-b: var(--wb); --kx-bg: var(--wbg); --kx-dark: var(--wdark); --kx-muted: var(--wmuted); --kx-on-a: #fff; }
.work__page { --kx-a: var(--wc); --kx-a2: var(--wc2); --kx-a3: var(--wc3); --kx-h: var(--wh); --kx-t: var(--wt); --kx-b: var(--wb); --kx-bg: var(--wbg); --kx-dark: var(--wdark); --kx-muted: var(--wmuted); --kx-on-a: #fff; }

/* ---------- palette bridge: dark bands ----------
   Redefining the tokens on the dark carrier flips a whole
   composition to its dark treatment, because every archetype
   below is written purely against --kx-*.
   ------------------------------------------------ */
.aad__page .aad__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.aas__page .aas__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.apd__page .apd__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.cai__page .cai__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.aic__page .aic__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.ai__page .ai__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-bg-end: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.aisol__page .aisol__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.apm__page .apm__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.bde__page .bde__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.bi__page .bi__value { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.cds__page .cds__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.clc__page .clc__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.dax__page .dax__value { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.deng__page .deng__value { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.dgov__page .dgov__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.dva__page .dva__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.dwh__page .dwh__value { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.dx__page .dx__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.eae__page .eae__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.gai__page .gai__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.mad__page .mad__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.qas__page .qas__value { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); }
.swe__page .swe__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.tech__page .tech__why { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.co__page .co__trust { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.contact__page .contact__why { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.cto__page .cto__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.csw__page .csw__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.cdv__page .cdv__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.ent__page .ent__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.gov__page .gov__ai { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.ind__page .ind__constraints { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.itsc__page .itsc__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }
.svc__page .svc__dark { --kx-h: #fff; --kx-t: var(--kx-muted); --kx-b: rgba(255, 255, 255, .17); --kx-bg: rgba(255, 255, 255, .05); --kx-on-a: var(--kx-dark); --kx-a: var(--kx-a3); }

/* ---------- Archetype L :: Capability ledger (industry pages) ----------
   Was: a repeat(3, 1fr) grid of bordered, rounded, lifting cards.
   Now: a full-width editorial register - one capability per ruled line,
   read left to right as index / mark / name / definition. Nothing is
   boxed; the structure comes from the hairlines and the column rhythm.
   Hover walks a 2px accent rule down the left edge, inks the numeral and
   fills the mark.
   --------------------------------------------------------------------- */
.edu__page .edu__cap-grid, .fit__page .fit__cap-grid, .food__page .food__cap-grid,
.gov__page .gov__cap-grid, .hc__page .hc__cap-grid, .log__page .log__cap-grid,
.media__page .media__cap-grid, .mfg__page .mfg__cap-grid, .mkt__page .mkt__cap-grid,
.re__page .re__cap-grid, .su__page .su__cap-grid, .trav__page .trav__cap-grid {
  display: block;
  margin-top: 56px;
  border-top: 1px solid var(--kx-b);
  counter-reset: kxLedger;
}
.edu__page .edu__cap-card, .fit__page .fit__cap-card, .food__page .food__cap-card,
.gov__page .gov__cap-card, .hc__page .hc__cap-card, .log__page .log__cap-card,
.media__page .media__cap-card, .mfg__page .mfg__cap-card, .mkt__page .mkt__cap-card,
.re__page .re__cap-card, .su__page .su__cap-card, .trav__page .trav__cap-card {
  counter-increment: kxLedger;
  position: relative;
  display: grid;
  grid-template-columns: 84px 46px minmax(0, 1fr) minmax(0, 40%);
  align-items: start;
  column-gap: 34px;
  margin: 0;
  padding: 32px 26px 32px 20px;
  border: 0;
  border-bottom: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
  transition: background .5s cubic-bezier(.22, .61, .36, 1),
              padding-left .5s cubic-bezier(.22, .61, .36, 1);
}
.edu__page .edu__cap-card:hover, .fit__page .fit__cap-card:hover, .food__page .food__cap-card:hover,
.gov__page .gov__cap-card:hover, .hc__page .hc__cap-card:hover, .log__page .log__cap-card:hover,
.media__page .media__cap-card:hover, .mfg__page .mfg__cap-card:hover, .mkt__page .mkt__cap-card:hover,
.re__page .re__cap-card:hover, .su__page .su__cap-card:hover, .trav__page .trav__cap-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--kx-b);
  background: var(--kx-bg);
  padding-left: 34px;
}
/* the theme's ::before was a 3px scaleX bar - it becomes the index numeral */
.edu__page .edu__cap-card::before, .fit__page .fit__cap-card::before,
.food__page .food__cap-card::before, .gov__page .gov__cap-card::before, .hc__page .hc__cap-card::before,
.log__page .log__cap-card::before, .media__page .media__cap-card::before,
.mfg__page .mfg__cap-card::before, .mkt__page .mkt__cap-card::before, .re__page .re__cap-card::before,
.su__page .su__cap-card::before, .trav__page .trav__cap-card::before {
  content: counter(kxLedger, decimal-leading-zero);
  position: static;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: auto;
  height: auto;
  margin-top: -7px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--kx-muted);
  background: none;
  border-radius: 0;
  transform: none;
  transition: color .5s ease;
}
.edu__page .edu__cap-card:nth-child(3n+2)::before, .fit__page .fit__cap-card:nth-child(3n+2)::before,
.food__page .food__cap-card:nth-child(3n+2)::before, .gov__page .gov__cap-card:nth-child(3n+2)::before,
.hc__page .hc__cap-card:nth-child(3n+2)::before, .log__page .log__cap-card:nth-child(3n+2)::before,
.media__page .media__cap-card:nth-child(3n+2)::before, .mfg__page .mfg__cap-card:nth-child(3n+2)::before,
.mkt__page .mkt__cap-card:nth-child(3n+2)::before, .re__page .re__cap-card:nth-child(3n+2)::before,
.su__page .su__cap-card:nth-child(3n+2)::before, .trav__page .trav__cap-card:nth-child(3n+2)::before,
.edu__page .edu__cap-card:nth-child(3n)::before, .fit__page .fit__cap-card:nth-child(3n)::before,
.food__page .food__cap-card:nth-child(3n)::before, .gov__page .gov__cap-card:nth-child(3n)::before,
.hc__page .hc__cap-card:nth-child(3n)::before, .log__page .log__cap-card:nth-child(3n)::before,
.media__page .media__cap-card:nth-child(3n)::before, .mfg__page .mfg__cap-card:nth-child(3n)::before,
.mkt__page .mkt__cap-card:nth-child(3n)::before, .re__page .re__cap-card:nth-child(3n)::before,
.su__page .su__cap-card:nth-child(3n)::before, .trav__page .trav__cap-card:nth-child(3n)::before { background: none; }
.edu__page .edu__cap-card:hover::before, .fit__page .fit__cap-card:hover::before,
.food__page .food__cap-card:hover::before, .gov__page .gov__cap-card:hover::before,
.hc__page .hc__cap-card:hover::before, .log__page .log__cap-card:hover::before,
.media__page .media__cap-card:hover::before, .mfg__page .mfg__cap-card:hover::before,
.mkt__page .mkt__cap-card:hover::before, .re__page .re__cap-card:hover::before,
.su__page .su__cap-card:hover::before, .trav__page .trav__cap-card:hover::before { transform: none; color: var(--kx-a); }
.edu__page .edu__cap-card::after, .fit__page .fit__cap-card::after, .food__page .food__cap-card::after,
.gov__page .gov__cap-card::after, .hc__page .hc__cap-card::after, .log__page .log__cap-card::after,
.media__page .media__cap-card::after, .mfg__page .mfg__cap-card::after, .mkt__page .mkt__cap-card::after,
.re__page .re__cap-card::after, .su__page .su__cap-card::after, .trav__page .trav__cap-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--kx-a);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.edu__page .edu__cap-card:hover::after, .fit__page .fit__cap-card:hover::after,
.food__page .food__cap-card:hover::after, .gov__page .gov__cap-card:hover::after,
.hc__page .hc__cap-card:hover::after, .log__page .log__cap-card:hover::after,
.media__page .media__cap-card:hover::after, .mfg__page .mfg__cap-card:hover::after,
.mkt__page .mkt__cap-card:hover::after, .re__page .re__cap-card:hover::after,
.su__page .su__cap-card:hover::after, .trav__page .trav__cap-card:hover::after { transform: scaleY(1); }
.edu__page .edu__cap-card .edu__cap-ico, .fit__page .fit__cap-card .fit__cap-ico,
.food__page .food__cap-card .food__cap-ico, .gov__page .gov__cap-card .gov__cap-ico,
.hc__page .hc__cap-card .hc__cap-ico, .log__page .log__cap-card .log__cap-ico,
.media__page .media__cap-card .media__cap-ico, .mfg__page .mfg__cap-card .mfg__cap-ico,
.mkt__page .mkt__cap-card .mkt__cap-ico, .re__page .re__cap-card .re__cap-ico,
.su__page .su__cap-card .su__cap-ico, .trav__page .trav__cap-card .trav__cap-ico {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  width: 46px;
  height: 46px;
  margin: -3px 0 0;
  border-radius: 0;
  border: 1px solid var(--kx-b);
  background: transparent;
  color: var(--kx-a);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .45s ease, border-color .45s ease, color .45s ease;
}
.edu__page .edu__cap-card:hover .edu__cap-ico, .fit__page .fit__cap-card:hover .fit__cap-ico,
.food__page .food__cap-card:hover .food__cap-ico, .gov__page .gov__cap-card:hover .gov__cap-ico,
.hc__page .hc__cap-card:hover .hc__cap-ico, .log__page .log__cap-card:hover .log__cap-ico,
.media__page .media__cap-card:hover .media__cap-ico, .mfg__page .mfg__cap-card:hover .mfg__cap-ico,
.mkt__page .mkt__cap-card:hover .mkt__cap-ico, .re__page .re__cap-card:hover .re__cap-ico,
.su__page .su__cap-card:hover .su__cap-ico, .trav__page .trav__cap-card:hover .trav__cap-ico { background: var(--kx-a); border-color: var(--kx-a); color: var(--kx-on-a); }
.edu__page .edu__cap-card > h3, .fit__page .fit__cap-card > h3, .food__page .food__cap-card > h3,
.gov__page .gov__cap-card > h3, .hc__page .hc__cap-card > h3, .log__page .log__cap-card > h3,
.media__page .media__cap-card > h3, .mfg__page .mfg__cap-card > h3, .mkt__page .mkt__cap-card > h3,
.re__page .re__cap-card > h3, .su__page .su__cap-card > h3, .trav__page .trav__cap-card > h3 {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  padding-right: 20px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.edu__page .edu__cap-card:hover > h3, .fit__page .fit__cap-card:hover > h3,
.food__page .food__cap-card:hover > h3, .gov__page .gov__cap-card:hover > h3,
.hc__page .hc__cap-card:hover > h3, .log__page .log__cap-card:hover > h3,
.media__page .media__cap-card:hover > h3, .mfg__page .mfg__cap-card:hover > h3,
.mkt__page .mkt__cap-card:hover > h3, .re__page .re__cap-card:hover > h3,
.su__page .su__cap-card:hover > h3, .trav__page .trav__cap-card:hover > h3 { color: var(--kx-a); }
.edu__page .edu__cap-card > p, .fit__page .fit__cap-card > p, .food__page .food__cap-card > p,
.gov__page .gov__cap-card > p, .hc__page .hc__cap-card > p, .log__page .log__cap-card > p,
.media__page .media__cap-card > p, .mfg__page .mfg__cap-card > p, .mkt__page .mkt__cap-card > p,
.re__page .re__cap-card > p, .su__page .su__cap-card > p, .trav__page .trav__cap-card > p {
  grid-column: 4;
  grid-row: 1;
  margin: 0;
  padding-top: 2px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}

@media (max-width: 1199px) {
  .edu__page .edu__cap-card, .fit__page .fit__cap-card, .food__page .food__cap-card,
.gov__page .gov__cap-card, .hc__page .hc__cap-card, .log__page .log__cap-card,
.media__page .media__cap-card, .mfg__page .mfg__cap-card, .mkt__page .mkt__cap-card,
.re__page .re__cap-card, .su__page .su__cap-card, .trav__page .trav__cap-card {
    grid-template-columns: 64px 44px minmax(0, 1fr);
    column-gap: 22px;
    padding: 28px 12px 28px 18px;
  }
  .edu__page .edu__cap-card::before, .fit__page .fit__cap-card::before,
.food__page .food__cap-card::before, .gov__page .gov__cap-card::before, .hc__page .hc__cap-card::before,
.log__page .log__cap-card::before, .media__page .media__cap-card::before,
.mfg__page .mfg__cap-card::before, .mkt__page .mkt__cap-card::before, .re__page .re__cap-card::before,
.su__page .su__cap-card::before, .trav__page .trav__cap-card::before { font-size: 32px; margin-top: -4px; }
  .edu__page .edu__cap-card > h3, .fit__page .fit__cap-card > h3, .food__page .food__cap-card > h3,
.gov__page .gov__cap-card > h3, .hc__page .hc__cap-card > h3, .log__page .log__cap-card > h3,
.media__page .media__cap-card > h3, .mfg__page .mfg__cap-card > h3, .mkt__page .mkt__cap-card > h3,
.re__page .re__cap-card > h3, .su__page .su__cap-card > h3, .trav__page .trav__cap-card > h3 { grid-column: 3; grid-row: 1; font-size: 19.5px; padding-right: 0; }
  .edu__page .edu__cap-card > p, .fit__page .fit__cap-card > p, .food__page .food__cap-card > p,
.gov__page .gov__cap-card > p, .hc__page .hc__cap-card > p, .log__page .log__cap-card > p,
.media__page .media__cap-card > p, .mfg__page .mfg__cap-card > p, .mkt__page .mkt__cap-card > p,
.re__page .re__cap-card > p, .su__page .su__cap-card > p, .trav__page .trav__cap-card > p { grid-column: 3; grid-row: 2; padding-top: 10px; }
}
@media (max-width: 767px) {
  .edu__page .edu__cap-grid, .fit__page .fit__cap-grid, .food__page .food__cap-grid,
.gov__page .gov__cap-grid, .hc__page .hc__cap-grid, .log__page .log__cap-grid,
.media__page .media__cap-grid, .mfg__page .mfg__cap-grid, .mkt__page .mkt__cap-grid,
.re__page .re__cap-grid, .su__page .su__cap-grid, .trav__page .trav__cap-grid { margin-top: 38px; }
  .edu__page .edu__cap-card, .fit__page .fit__cap-card, .food__page .food__cap-card,
.gov__page .gov__cap-card, .hc__page .hc__cap-card, .log__page .log__cap-card,
.media__page .media__cap-card, .mfg__page .mfg__cap-card, .mkt__page .mkt__cap-card,
.re__page .re__cap-card, .su__page .su__cap-card, .trav__page .trav__cap-card {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    padding: 26px 2px 26px 15px;
  }
  .edu__page .edu__cap-card:hover, .fit__page .fit__cap-card:hover, .food__page .food__cap-card:hover,
.gov__page .gov__cap-card:hover, .hc__page .hc__cap-card:hover, .log__page .log__cap-card:hover,
.media__page .media__cap-card:hover, .mfg__page .mfg__cap-card:hover, .mkt__page .mkt__cap-card:hover,
.re__page .re__cap-card:hover, .su__page .su__cap-card:hover, .trav__page .trav__cap-card:hover { padding-left: 21px; }
  .edu__page .edu__cap-card::before, .fit__page .fit__cap-card::before,
.food__page .food__cap-card::before, .gov__page .gov__cap-card::before, .hc__page .hc__cap-card::before,
.log__page .log__cap-card::before, .media__page .media__cap-card::before,
.mfg__page .mfg__cap-card::before, .mkt__page .mkt__cap-card::before, .re__page .re__cap-card::before,
.su__page .su__cap-card::before, .trav__page .trav__cap-card::before {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    font-size: 26px;
    color: var(--kx-a);
  }
  .edu__page .edu__cap-card .edu__cap-ico, .fit__page .fit__cap-card .fit__cap-ico,
.food__page .food__cap-card .food__cap-ico, .gov__page .gov__cap-card .gov__cap-ico,
.hc__page .hc__cap-card .hc__cap-ico, .log__page .log__cap-card .log__cap-ico,
.media__page .media__cap-card .media__cap-ico, .mfg__page .mfg__cap-card .mfg__cap-ico,
.mkt__page .mkt__cap-card .mkt__cap-ico, .re__page .re__cap-card .re__cap-ico,
.su__page .su__cap-card .su__cap-ico, .trav__page .trav__cap-card .trav__cap-ico {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 38px;
    height: 38px;
    margin: 0;
  }
  .edu__page .edu__cap-card > h3, .fit__page .fit__cap-card > h3, .food__page .food__cap-card > h3,
.gov__page .gov__cap-card > h3, .hc__page .hc__cap-card > h3, .log__page .log__cap-card > h3,
.media__page .media__cap-card > h3, .mfg__page .mfg__cap-card > h3, .mkt__page .mkt__cap-card > h3,
.re__page .re__cap-card > h3, .su__page .su__cap-card > h3, .trav__page .trav__cap-card > h3 { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; font-size: 18.5px; }
  .edu__page .edu__cap-card > p, .fit__page .fit__cap-card > p, .food__page .food__cap-card > p,
.gov__page .gov__cap-card > p, .hc__page .hc__cap-card > p, .log__page .log__cap-card > p,
.media__page .media__cap-card > p, .mfg__page .mfg__cap-card > p, .mkt__page .mkt__cap-card > p,
.re__page .re__cap-card > p, .su__page .su__cap-card > p, .trav__page .trav__cap-card > p { grid-column: 1 / -1; grid-row: 3; padding-top: 9px; font-size: 14.5px; }
}

/* ---------- Archetype F :: Lead + register (hub pages) ----------
   Was: the same repeat(3, 1fr) card grid as the industry pages.
   Now: an asymmetric split. The first capability is promoted to a sticky
   display-scale panel in the left column; the rest compress into a tight
   hairline register on the right, so the section reads as "one headline
   capability, and the breadth behind it" instead of six equal tiles.
   ---------------------------------------------------------------- */
.abt__page .abt__cap-grid, .ai__page .ai__cap-grid, .be__page .be__cap-grid, .co__page .co__cap-grid,
.why__page .why__cap-grid, .dt__page .dt__cap-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: 74px;
  row-gap: 0;
  align-items: start;
  margin-top: 58px;
}
.abt__page .abt__cap-card, .ai__page .ai__cap-item, .be__page .be__cap-card, .co__page .co__cap-card,
.why__page .why__cap-card, .dt__page .dt__cap-card {
  border-radius: 0;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.abt__page .abt__cap-card::before, .ai__page .ai__cap-item::before, .be__page .be__cap-card::before,
.co__page .co__cap-card::before, .why__page .why__cap-card::before, .dt__page .dt__cap-card::before { content: none; display: none; }

/* --- the promoted lead --- */
.abt__page .abt__cap-card:first-child, .ai__page .ai__cap-item:first-child,
.be__page .be__cap-card:first-child, .co__page .co__cap-card:first-child,
.why__page .why__cap-card:first-child, .dt__page .dt__cap-card:first-child {
  grid-column: 1;
  grid-row: 1 / span 24;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  padding: 48px 44px 46px;
  border: 1px solid var(--kx-b);
  border-left: 3px solid var(--kx-a);
  background: linear-gradient(180deg, var(--kx-bg) 0%, var(--kx-bg-end, #fff) 72%);
}
.abt__page .abt__cap-card:first-child:hover, .ai__page .ai__cap-item:first-child:hover,
.be__page .be__cap-card:first-child:hover, .co__page .co__cap-card:first-child:hover,
.why__page .why__cap-card:first-child:hover, .dt__page .dt__cap-card:first-child:hover {
  transform: none;
  box-shadow: none;
  background: linear-gradient(180deg, var(--kx-bg) 0%, var(--kx-bg-end, #fff) 72%);
}
.abt__page .abt__cap-card:first-child > span, .ai__page .ai__cap-item:first-child > span,
.be__page .be__cap-card:first-child > span, .co__page .co__cap-card:first-child > span,
.why__page .why__cap-card:first-child > span {
  width: 62px;
  height: 62px;
  margin: 0 0 28px;
  border-radius: 0;
  border: 0;
  background: var(--kx-a);
  color: var(--kx-on-a);
  font-size: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.abt__page .abt__cap-card:first-child > h3, .ai__page .ai__cap-item:first-child > h3,
.be__page .be__cap-card:first-child > h3, .co__page .co__cap-card:first-child > h3,
.why__page .why__cap-card:first-child > h3, .dt__page .dt__cap-card:first-child > h3 {
  margin: 0 0 18px;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--kx-h);
}
.abt__page .abt__cap-card:first-child > p, .ai__page .ai__cap-item:first-child > p,
.be__page .be__cap-card:first-child > p, .co__page .co__cap-card:first-child > p,
.why__page .why__cap-card:first-child > p, .dt__page .dt__cap-card:first-child > p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--kx-t);
}
.co__page .co__cap-card:first-child > .co__cap-card-img,
.why__page .why__cap-card:first-child > .why__cap-card-img {
  width: 100%; max-width: 260px; height: auto; display: block;
  margin: auto auto 0; padding-top: 28px;
}
.abt__page .abt__cap-card:first-child > .abt__cap-card-img {
  width: 100%; max-width: 380px; height: auto; display: block;
  margin: auto auto 0; padding-top: 28px;
}
.abt__page .abt__cap-card:first-child > a, .ai__page .ai__cap-item:first-child > a,
.be__page .be__cap-card:first-child > a, .co__page .co__cap-card:first-child > a,
.why__page .why__cap-card:first-child > a, .dt__page .dt__cap-card:first-child > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kx-a);
}
.dt__page .dt__cap-card:first-child::after {
  content: attr(data-num);
  position: absolute;
  right: 30px;
  top: 26px;
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: var(--kx-a);
  opacity: .12;
  pointer-events: none;
}

/* --- the register --- */
.abt__page .abt__cap-card:not(:first-child), .ai__page .ai__cap-item:not(:first-child),
.be__page .be__cap-card:not(:first-child), .co__page .co__cap-card:not(:first-child),
.why__page .why__cap-card:not(:first-child), .dt__page .dt__cap-card:not(:first-child) {
  grid-column: 2;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  margin: 0;
  padding: 26px 0 26px 4px;
  border: 0;
  border-top: 1px solid var(--kx-b);
  background: transparent;
  transition: padding-left .45s cubic-bezier(.22, .61, .36, 1);
}
.abt__page .abt__cap-card:not(:first-child):last-child,
.ai__page .ai__cap-item:not(:first-child):last-child,
.be__page .be__cap-card:not(:first-child):last-child,
.co__page .co__cap-card:not(:first-child):last-child,
.why__page .why__cap-card:not(:first-child):last-child,
.dt__page .dt__cap-card:not(:first-child):last-child { border-bottom: 1px solid var(--kx-b); }
.abt__page .abt__cap-card:not(:first-child):hover, .ai__page .ai__cap-item:not(:first-child):hover,
.be__page .be__cap-card:not(:first-child):hover, .co__page .co__cap-card:not(:first-child):hover,
.why__page .why__cap-card:not(:first-child):hover, .dt__page .dt__cap-card:not(:first-child):hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  padding-left: 16px;
}
.abt__page .abt__cap-card:not(:first-child) > span, .ai__page .ai__cap-item:not(:first-child) > span,
.be__page .be__cap-card:not(:first-child) > span, .co__page .co__cap-card:not(:first-child) > span,
.why__page .why__cap-card:not(:first-child) > span {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 0;
  border: 1px solid var(--kx-b);
  background: transparent;
  color: var(--kx-a);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .45s ease, border-color .45s ease, color .45s ease;
}
.abt__page .abt__cap-card:not(:first-child):hover > span,
.ai__page .ai__cap-item:not(:first-child):hover > span,
.be__page .be__cap-card:not(:first-child):hover > span,
.co__page .co__cap-card:not(:first-child):hover > span,
.why__page .why__cap-card:not(:first-child):hover > span {
  background: var(--kx-a);
  border-color: var(--kx-a);
  color: var(--kx-on-a);
}
.dt__page .dt__cap-card:not(:first-child)::after {
  content: attr(data-num);
  position: static;
  grid-column: 1;
  grid-row: 1 / span 3;
  width: auto;
  height: auto;
  inset: auto;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--kx-a);
  opacity: 1;
}
.abt__page .abt__cap-card:not(:first-child) > h3, .ai__page .ai__cap-item:not(:first-child) > h3,
.be__page .be__cap-card:not(:first-child) > h3, .co__page .co__cap-card:not(:first-child) > h3,
.why__page .why__cap-card:not(:first-child) > h3, .dt__page .dt__cap-card:not(:first-child) > h3 {
  grid-column: 2;
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--kx-h);
  transition: color .4s ease;
}
.abt__page .abt__cap-card:not(:first-child):hover > h3,
.ai__page .ai__cap-item:not(:first-child):hover > h3,
.be__page .be__cap-card:not(:first-child):hover > h3,
.co__page .co__cap-card:not(:first-child):hover > h3,
.why__page .why__cap-card:not(:first-child):hover > h3,
.dt__page .dt__cap-card:not(:first-child):hover > h3 { color: var(--kx-a); }
.abt__page .abt__cap-card:not(:first-child) > p, .ai__page .ai__cap-item:not(:first-child) > p,
.be__page .be__cap-card:not(:first-child) > p, .co__page .co__cap-card:not(:first-child) > p,
.why__page .why__cap-card:not(:first-child) > p, .dt__page .dt__cap-card:not(:first-child) > p {
  grid-column: 2;
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.abt__page .abt__cap-card:not(:first-child) > a, .ai__page .ai__cap-item:not(:first-child) > a,
.be__page .be__cap-card:not(:first-child) > a, .co__page .co__cap-card:not(:first-child) > a,
.why__page .why__cap-card:not(:first-child) > a, .dt__page .dt__cap-card:not(:first-child) > a {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kx-a);
}

/* Two decorative layers on the promoted "AI Assistants & Copilots" lead
   card: the robot-hand artwork pinned top-left (gently floating), and an
   "AI core" orbit animation pinned bottom-right (pulsing node, two
   counter-rotating orbit rings, radar-style pings). Both purely decorative
   (aria-hidden) and sit behind the text via z-index/overflow. */
.ai__page .ai__cap-item:first-child { position: relative; overflow: hidden; z-index: 0; }
.ai__page .ai__cap-item:first-child > *:not(.ai__cap-visual):not(.ai__cap-anim) { position: relative; z-index: 1; }

.ai__page .ai__cap-visual { position: relative; align-self: flex-start; margin-top: 72px; margin-left: -44px; width: 58%; max-width: 300px; pointer-events: none; z-index: 2; }
.ai__page .ai__cap-visual::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 8%;
  width: 75%;
  height: 65%;
  background: radial-gradient(circle, rgba(77, 163, 255, .22), transparent 72%);
  border-radius: 50%;
  animation: aiCapGlow 6s ease-in-out infinite;
}
.ai__page .ai__cap-visual img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45)); animation: aiCapFloat 5s ease-in-out infinite; }

.ai__page .ai__cap-anim { position: absolute; right: -6%; bottom: -10%; width: 66%; max-width: 320px; aspect-ratio: 1 / 1; opacity: .7; pointer-events: none; z-index: 0; }
.ai__page .ai__cap-anim svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ai__page .ai__cap-anim::before {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 12%;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle, rgba(77, 163, 255, .2), transparent 72%);
  border-radius: 50%;
  animation: aiCapGlow 6s ease-in-out infinite;
}
.ai__page .ai__cap-orbit-ring { fill: none; stroke: var(--ac3); stroke-opacity: .3; stroke-width: 1; }
.ai__page .ai__cap-orbit--1 { transform-origin: 140px 120px; animation: aiCapSpin 18s linear infinite; }
.ai__page .ai__cap-orbit--1 .ai__cap-orbit-ring { stroke-dasharray: 2 6; }
.ai__page .ai__cap-orbit--2 { transform-origin: 140px 120px; animation: aiCapSpin 26s linear infinite reverse; }
.ai__page .ai__cap-orbit--2 .ai__cap-orbit-ring { stroke-dasharray: 1 5; stroke-opacity: .22; }
.ai__page .ai__cap-dot { fill: var(--ac3); filter: drop-shadow(0 0 3px var(--ac3)); }
.ai__page .ai__cap-core { fill: var(--ac3); transform-box: fill-box; transform-origin: center; animation: aiCapCore 3s ease-in-out infinite; }
.ai__page .ai__cap-ping { fill: none; stroke: var(--ac3); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: aiCapPing 3.6s cubic-bezier(.25, .6, .35, 1) infinite; }
.ai__page .ai__cap-ping--2 { animation-delay: 1.8s; }

@keyframes aiCapGlow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes aiCapFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes aiCapSpin { to { transform: rotate(360deg); } }
@keyframes aiCapCore { 0%, 100% { opacity: .85; transform: scale(1); filter: drop-shadow(0 0 4px var(--ac3)); } 50% { opacity: 1; transform: scale(1.22); filter: drop-shadow(0 0 12px var(--ac3)); } }
@keyframes aiCapPing { 0% { opacity: .55; transform: scale(.5); } 80%, 100% { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) {
  .ai__page .ai__cap-visual::before,
  .ai__page .ai__cap-visual img,
  .ai__page .ai__cap-anim::before,
  .ai__page .ai__cap-orbit--1,
  .ai__page .ai__cap-orbit--2,
  .ai__page .ai__cap-core,
  .ai__page .ai__cap-ping { animation: none; }
}

@media (max-width: 1199px) {
  .abt__page .abt__cap-grid, .ai__page .ai__cap-grid, .be__page .be__cap-grid, .co__page .co__cap-grid,
.why__page .why__cap-grid, .dt__page .dt__cap-grid { grid-template-columns: 1fr; row-gap: 0; }
  .abt__page .abt__cap-card:first-child, .ai__page .ai__cap-item:first-child,
.be__page .be__cap-card:first-child, .co__page .co__cap-card:first-child,
.why__page .why__cap-card:first-child, .dt__page .dt__cap-card:first-child {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    padding: 40px 34px 38px;
    margin-bottom: 44px;
  }
  .abt__page .abt__cap-card:first-child > h3, .ai__page .ai__cap-item:first-child > h3,
.be__page .be__cap-card:first-child > h3, .co__page .co__cap-card:first-child > h3,
.why__page .why__cap-card:first-child > h3, .dt__page .dt__cap-card:first-child > h3 { font-size: 27px; }
  .abt__page .abt__cap-card:not(:first-child), .ai__page .ai__cap-item:not(:first-child),
.be__page .be__cap-card:not(:first-child), .co__page .co__cap-card:not(:first-child),
.why__page .why__cap-card:not(:first-child), .dt__page .dt__cap-card:not(:first-child) { grid-column: 1; }
}
@media (max-width: 767px) {
  .abt__page .abt__cap-grid, .ai__page .ai__cap-grid, .be__page .be__cap-grid, .co__page .co__cap-grid,
.why__page .why__cap-grid, .dt__page .dt__cap-grid { margin-top: 40px; }
  .abt__page .abt__cap-card:first-child, .ai__page .ai__cap-item:first-child,
.be__page .be__cap-card:first-child, .co__page .co__cap-card:first-child,
.why__page .why__cap-card:first-child, .dt__page .dt__cap-card:first-child { padding: 32px 24px 30px; margin-bottom: 34px; }
  .abt__page .abt__cap-card:first-child > span, .ai__page .ai__cap-item:first-child > span,
.be__page .be__cap-card:first-child > span, .co__page .co__cap-card:first-child > span,
.why__page .why__cap-card:first-child > span { width: 54px; height: 54px; font-size: 20px; margin-bottom: 22px; }
  .abt__page .abt__cap-card:first-child > h3, .ai__page .ai__cap-item:first-child > h3,
.be__page .be__cap-card:first-child > h3, .co__page .co__cap-card:first-child > h3,
.why__page .why__cap-card:first-child > h3, .dt__page .dt__cap-card:first-child > h3 { font-size: 23px; }
  .abt__page .abt__cap-card:first-child > p, .ai__page .ai__cap-item:first-child > p,
.be__page .be__cap-card:first-child > p, .co__page .co__cap-card:first-child > p,
.why__page .why__cap-card:first-child > p, .dt__page .dt__cap-card:first-child > p { font-size: 15.5px; }
  .dt__page .dt__cap-card:first-child::after { font-size: 46px; right: 20px; top: 18px; }
  .abt__page .abt__cap-card:not(:first-child), .ai__page .ai__cap-item:not(:first-child),
.be__page .be__cap-card:not(:first-child), .co__page .co__cap-card:not(:first-child),
.why__page .why__cap-card:not(:first-child), .dt__page .dt__cap-card:not(:first-child) { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; }
  .abt__page .abt__cap-card:not(:first-child) > span, .ai__page .ai__cap-item:not(:first-child) > span,
.be__page .be__cap-card:not(:first-child) > span, .co__page .co__cap-card:not(:first-child) > span,
.why__page .why__cap-card:not(:first-child) > span { width: 32px; height: 32px; font-size: 13px; }
  .abt__page .abt__cap-card:not(:first-child) > h3, .ai__page .ai__cap-item:not(:first-child) > h3,
.be__page .be__cap-card:not(:first-child) > h3, .co__page .co__cap-card:not(:first-child) > h3,
.why__page .why__cap-card:not(:first-child) > h3, .dt__page .dt__cap-card:not(:first-child) > h3 { font-size: 16.5px; }
  .abt__page .abt__cap-card:not(:first-child) > p, .ai__page .ai__cap-item:not(:first-child) > p,
.be__page .be__cap-card:not(:first-child) > p, .co__page .co__cap-card:not(:first-child) > p,
.why__page .why__cap-card:not(:first-child) > p, .dt__page .dt__cap-card:not(:first-child) > p { font-size: 14px; }
}

/* ---------- Archetype S :: Staggered value spine ----------
   Two measures either side of a hairline spine, vertically offset so the
   entries interleave. Nodes sit on the spine, joined by short leaders.
   No panels, no radii, no lift-on-hover.
   ---------------------------------------------------------- */
.aad__page .aad__value-grid, .apd__page .apd__value-grid, .cai__page .cai__value-grid, .aas__page .aas__value-grid, .apm__page .apm__value-grid,
.eae__page .eae__value-grid, .gai__page .gai__value-grid, .aisol__page .aisol__value-grid,
.saas__page .saas__value-grid, .ai__page .ai__value-grid, .cds__page .cds__value-grid,
.mad__page .mad__value-grid, .swe__page .swe__value-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 112px;
  row-gap: 52px;
  margin-top: 62px;
  padding-bottom: 88px;
}
.aad__page .aad__value-grid::before, .apd__page .apd__value-grid::before, .cai__page .cai__value-grid::before, .aas__page .aas__value-grid::before,
.apm__page .apm__value-grid::before, .eae__page .eae__value-grid::before,
.gai__page .gai__value-grid::before, .aisol__page .aisol__value-grid::before,
.saas__page .saas__value-grid::before, .ai__page .ai__value-grid::before,
.cds__page .cds__value-grid::before, .mad__page .mad__value-grid::before,
.swe__page .swe__value-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 84px;
  width: 1px;
  transform: translateX(-.5px);
  background: var(--kx-muted);
  opacity: .38;
  border-radius: 0;
}
.aad__page .aad__value-item, .apd__page .apd__value-item, .cai__page .cai__value-item, .aas__page .aas__value-item, .apm__page .apm__value-item,
.eae__page .eae__value-item, .gai__page .gai__value-item, .aisol__page .aisol__value-item,
.saas__page .saas__value-item, .ai__page .ai__value-item, .cds__page .cds__value-item,
.mad__page .mad__value-item, .swe__page .swe__value-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
  transition: none;
}
.aad__page .aad__value-item:hover, .apd__page .apd__value-item:hover, .cai__page .cai__value-item:hover, .aas__page .aas__value-item:hover, .apm__page .apm__value-item:hover,
.eae__page .eae__value-item:hover, .gai__page .gai__value-item:hover,
.aisol__page .aisol__value-item:hover, .saas__page .saas__value-item:hover,
.ai__page .ai__value-item:hover, .cds__page .cds__value-item:hover, .mad__page .mad__value-item:hover,
.swe__page .swe__value-item:hover { transform: none; box-shadow: none; background: transparent; }
.aad__page .aad__value-item:nth-child(odd), .apd__page .apd__value-item:nth-child(odd), .cai__page .cai__value-item:nth-child(odd), .aas__page .aas__value-item:nth-child(odd),
.apm__page .apm__value-item:nth-child(odd), .eae__page .eae__value-item:nth-child(odd),
.gai__page .gai__value-item:nth-child(odd), .aisol__page .aisol__value-item:nth-child(odd),
.saas__page .saas__value-item:nth-child(odd), .ai__page .ai__value-item:nth-child(odd),
.cds__page .cds__value-item:nth-child(odd), .mad__page .mad__value-item:nth-child(odd),
.swe__page .swe__value-item:nth-child(odd) { grid-column: 1; text-align: right; }
.aad__page .aad__value-item:nth-child(even), .apd__page .apd__value-item:nth-child(even), .cai__page .cai__value-item:nth-child(even), .aas__page .aas__value-item:nth-child(even),
.apm__page .apm__value-item:nth-child(even), .eae__page .eae__value-item:nth-child(even),
.gai__page .gai__value-item:nth-child(even), .aisol__page .aisol__value-item:nth-child(even),
.saas__page .saas__value-item:nth-child(even), .ai__page .ai__value-item:nth-child(even),
.cds__page .cds__value-item:nth-child(even), .mad__page .mad__value-item:nth-child(even),
.swe__page .swe__value-item:nth-child(even) { grid-column: 2; text-align: left; transform: translateY(84px); }

/* leader rule out to the spine */
.aad__page .aad__value-item::before, .apd__page .apd__value-item::before, .cai__page .cai__value-item::before, .aas__page .aas__value-item::before,
.apm__page .apm__value-item::before, .eae__page .eae__value-item::before,
.gai__page .gai__value-item::before, .aisol__page .aisol__value-item::before,
.saas__page .saas__value-item::before, .ai__page .ai__value-item::before,
.cds__page .cds__value-item::before, .mad__page .mad__value-item::before,
.swe__page .swe__value-item::before {
  content: "";
  position: absolute;
  top: 30px;
  width: 56px;
  height: 1px;
  background: var(--kx-muted);
  opacity: .5;
  border-radius: 0;
  transform: none;
}
.aad__page .aad__value-item:nth-child(odd)::before, .apd__page .apd__value-item:nth-child(odd)::before, .cai__page .cai__value-item:nth-child(odd)::before, .aas__page .aas__value-item:nth-child(odd)::before,
.apm__page .apm__value-item:nth-child(odd)::before, .eae__page .eae__value-item:nth-child(odd)::before,
.gai__page .gai__value-item:nth-child(odd)::before,
.aisol__page .aisol__value-item:nth-child(odd)::before,
.saas__page .saas__value-item:nth-child(odd)::before, .ai__page .ai__value-item:nth-child(odd)::before,
.cds__page .cds__value-item:nth-child(odd)::before, .mad__page .mad__value-item:nth-child(odd)::before,
.swe__page .swe__value-item:nth-child(odd)::before { right: -56px; left: auto; }
.aad__page .aad__value-item:nth-child(even)::before, .apd__page .apd__value-item:nth-child(even)::before, .cai__page .cai__value-item:nth-child(even)::before, .aas__page .aas__value-item:nth-child(even)::before,
.apm__page .apm__value-item:nth-child(even)::before, .eae__page .eae__value-item:nth-child(even)::before,
.gai__page .gai__value-item:nth-child(even)::before,
.aisol__page .aisol__value-item:nth-child(even)::before,
.saas__page .saas__value-item:nth-child(even)::before, .ai__page .ai__value-item:nth-child(even)::before,
.cds__page .cds__value-item:nth-child(even)::before, .mad__page .mad__value-item:nth-child(even)::before,
.swe__page .swe__value-item:nth-child(even)::before { left: -56px; right: auto; }
/* node on the spine */
.aad__page .aad__value-item::after, .apd__page .apd__value-item::after, .cai__page .cai__value-item::after, .aas__page .aas__value-item::after,
.apm__page .apm__value-item::after, .eae__page .eae__value-item::after,
.gai__page .gai__value-item::after, .aisol__page .aisol__value-item::after,
.saas__page .saas__value-item::after, .ai__page .ai__value-item::after,
.cds__page .cds__value-item::after, .mad__page .mad__value-item::after,
.swe__page .swe__value-item::after {
  content: "";
  position: absolute;
  top: 25px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--kx-muted);
  background: var(--kx-on-a);
  transition: background .4s ease, border-color .4s ease;
}
.aad__page .aad__value-item:nth-child(odd)::after, .apd__page .apd__value-item:nth-child(odd)::after, .cai__page .cai__value-item:nth-child(odd)::after, .aas__page .aas__value-item:nth-child(odd)::after,
.apm__page .apm__value-item:nth-child(odd)::after, .eae__page .eae__value-item:nth-child(odd)::after,
.gai__page .gai__value-item:nth-child(odd)::after, .aisol__page .aisol__value-item:nth-child(odd)::after,
.saas__page .saas__value-item:nth-child(odd)::after, .ai__page .ai__value-item:nth-child(odd)::after,
.cds__page .cds__value-item:nth-child(odd)::after, .mad__page .mad__value-item:nth-child(odd)::after,
.swe__page .swe__value-item:nth-child(odd)::after { right: -61px; left: auto; }
.aad__page .aad__value-item:nth-child(even)::after, .apd__page .apd__value-item:nth-child(even)::after, .cai__page .cai__value-item:nth-child(even)::after, .aas__page .aas__value-item:nth-child(even)::after,
.apm__page .apm__value-item:nth-child(even)::after, .eae__page .eae__value-item:nth-child(even)::after,
.gai__page .gai__value-item:nth-child(even)::after,
.aisol__page .aisol__value-item:nth-child(even)::after,
.saas__page .saas__value-item:nth-child(even)::after, .ai__page .ai__value-item:nth-child(even)::after,
.cds__page .cds__value-item:nth-child(even)::after, .mad__page .mad__value-item:nth-child(even)::after,
.swe__page .swe__value-item:nth-child(even)::after { left: -61px; right: auto; }
.aad__page .aad__value-item:hover::after, .apd__page .apd__value-item:hover::after, .cai__page .cai__value-item:hover::after, .aas__page .aas__value-item:hover::after,
.apm__page .apm__value-item:hover::after, .eae__page .eae__value-item:hover::after,
.gai__page .gai__value-item:hover::after, .aisol__page .aisol__value-item:hover::after,
.saas__page .saas__value-item:hover::after, .ai__page .ai__value-item:hover::after,
.cds__page .cds__value-item:hover::after, .mad__page .mad__value-item:hover::after,
.swe__page .swe__value-item:hover::after { background: var(--kx-a); border-color: var(--kx-a); }

/* index numerals - set as a quiet label, never a badge */
.aad__page .aad__value-item > span, .apd__page .apd__value-item > span, .cai__page .cai__value-item > span, .aas__page .aas__value-item > span,
.apm__page .apm__value-item > span, .eae__page .eae__value-item > span,
.gai__page .gai__value-item > span, .ai__page .ai__value-item > span:nth-of-type(1),
.cds__page .cds__value-item > span:nth-of-type(1), .mad__page .mad__value-item > span:nth-of-type(1),
.swe__page .swe__value-item > span:nth-of-type(1) {
  position: static;
  display: block;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--kx-a);
  opacity: 1;
  transform: none;
}
/* icon marks - sharp hairline squares */
.aisol__page .aisol__value-item > span, .saas__page .saas__value-item > span,
.ai__page .ai__value-item > span:nth-of-type(2), .cds__page .cds__value-item > span:nth-of-type(2),
.mad__page .mad__value-item > span:nth-of-type(2), .swe__page .swe__value-item > span:nth-of-type(2) {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 0 20px;
  border-radius: 0;
  border: 1px solid var(--kx-b);
  background: transparent;
  color: var(--kx-a);
  font-size: 17px;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.aisol__page .aisol__value-item:hover > span, .saas__page .saas__value-item:hover > span,
.ai__page .ai__value-item:hover > span:nth-of-type(2),
.cds__page .cds__value-item:hover > span:nth-of-type(2),
.mad__page .mad__value-item:hover > span:nth-of-type(2),
.swe__page .swe__value-item:hover > span:nth-of-type(2) { background: var(--kx-a); border-color: var(--kx-a); color: var(--kx-on-a); }
.aisol__page .aisol__value-item:nth-child(odd) > span,
.saas__page .saas__value-item:nth-child(odd) > span,
.ai__page .ai__value-item:nth-child(odd) > span:nth-of-type(2),
.cds__page .cds__value-item:nth-child(odd) > span:nth-of-type(2),
.mad__page .mad__value-item:nth-child(odd) > span:nth-of-type(2),
.swe__page .swe__value-item:nth-child(odd) > span:nth-of-type(2) { margin-left: auto; }

.aad__page .aad__value-item > h3, .apd__page .apd__value-item > h3, .cai__page .cai__value-item > h3, .aas__page .aas__value-item > h3, .apm__page .apm__value-item > h3,
.eae__page .eae__value-item > h3, .gai__page .gai__value-item > h3, .aisol__page .aisol__value-item > h3,
.saas__page .saas__value-item > h3, .ai__page .ai__value-item > h3, .cds__page .cds__value-item > h3,
.mad__page .mad__value-item > h3, .swe__page .swe__value-item > h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aad__page .aad__value-item:hover > h3, .apd__page .apd__value-item:hover > h3, .cai__page .cai__value-item:hover > h3, .aas__page .aas__value-item:hover > h3,
.apm__page .apm__value-item:hover > h3, .eae__page .eae__value-item:hover > h3,
.gai__page .gai__value-item:hover > h3, .aisol__page .aisol__value-item:hover > h3,
.saas__page .saas__value-item:hover > h3, .ai__page .ai__value-item:hover > h3,
.cds__page .cds__value-item:hover > h3, .mad__page .mad__value-item:hover > h3,
.swe__page .swe__value-item:hover > h3 { color: var(--kx-a); }
.aad__page .aad__value-item > p, .apd__page .apd__value-item > p, .cai__page .cai__value-item > p, .aas__page .aas__value-item > p, .apm__page .apm__value-item > p,
.eae__page .eae__value-item > p, .gai__page .gai__value-item > p, .aisol__page .aisol__value-item > p,
.saas__page .saas__value-item > p, .ai__page .ai__value-item > p, .cds__page .cds__value-item > p,
.mad__page .mad__value-item > p, .swe__page .swe__value-item > p {
  margin: 0;
  max-width: 40ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--kx-t);
}
.aad__page .aad__value-item:nth-child(odd) > p, .apd__page .apd__value-item:nth-child(odd) > p, .cai__page .cai__value-item:nth-child(odd) > p, .aas__page .aas__value-item:nth-child(odd) > p,
.apm__page .apm__value-item:nth-child(odd) > p, .eae__page .eae__value-item:nth-child(odd) > p,
.gai__page .gai__value-item:nth-child(odd) > p, .aisol__page .aisol__value-item:nth-child(odd) > p,
.saas__page .saas__value-item:nth-child(odd) > p, .ai__page .ai__value-item:nth-child(odd) > p,
.cds__page .cds__value-item:nth-child(odd) > p, .mad__page .mad__value-item:nth-child(odd) > p,
.swe__page .swe__value-item:nth-child(odd) > p { margin-left: auto; }

@media (max-width: 991px) {
  .aad__page .aad__value-grid, .apd__page .apd__value-grid, .cai__page .cai__value-grid, .aas__page .aas__value-grid, .apm__page .apm__value-grid,
.eae__page .eae__value-grid, .gai__page .gai__value-grid, .aisol__page .aisol__value-grid,
.saas__page .saas__value-grid, .ai__page .ai__value-grid, .cds__page .cds__value-grid,
.mad__page .mad__value-grid, .swe__page .swe__value-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    margin-top: 44px;
    padding-bottom: 0;
    padding-left: 48px;
  }
  .aad__page .aad__value-grid::before, .apd__page .apd__value-grid::before, .cai__page .cai__value-grid::before, .aas__page .aas__value-grid::before,
.apm__page .apm__value-grid::before, .eae__page .eae__value-grid::before,
.gai__page .gai__value-grid::before, .aisol__page .aisol__value-grid::before,
.saas__page .saas__value-grid::before, .ai__page .ai__value-grid::before,
.cds__page .cds__value-grid::before, .mad__page .mad__value-grid::before,
.swe__page .swe__value-grid::before { left: 5px; top: 8px; bottom: 24px; transform: none; }
  .aad__page .aad__value-item:nth-child(odd), .apd__page .apd__value-item:nth-child(odd), .cai__page .cai__value-item:nth-child(odd), .aas__page .aas__value-item:nth-child(odd),
.apm__page .apm__value-item:nth-child(odd), .eae__page .eae__value-item:nth-child(odd),
.gai__page .gai__value-item:nth-child(odd), .aisol__page .aisol__value-item:nth-child(odd),
.saas__page .saas__value-item:nth-child(odd), .ai__page .ai__value-item:nth-child(odd),
.cds__page .cds__value-item:nth-child(odd), .mad__page .mad__value-item:nth-child(odd),
.swe__page .swe__value-item:nth-child(odd) { grid-column: 1; text-align: left; }
  .aad__page .aad__value-item:nth-child(even), .apd__page .apd__value-item:nth-child(even), .cai__page .cai__value-item:nth-child(even), .aas__page .aas__value-item:nth-child(even),
.apm__page .apm__value-item:nth-child(even), .eae__page .eae__value-item:nth-child(even),
.gai__page .gai__value-item:nth-child(even), .aisol__page .aisol__value-item:nth-child(even),
.saas__page .saas__value-item:nth-child(even), .ai__page .ai__value-item:nth-child(even),
.cds__page .cds__value-item:nth-child(even), .mad__page .mad__value-item:nth-child(even),
.swe__page .swe__value-item:nth-child(even) { grid-column: 1; text-align: left; transform: none; }
  .aad__page .aad__value-item, .apd__page .apd__value-item, .cai__page .cai__value-item, .aas__page .aas__value-item, .apm__page .apm__value-item,
.eae__page .eae__value-item, .gai__page .gai__value-item, .aisol__page .aisol__value-item,
.saas__page .saas__value-item, .ai__page .ai__value-item, .cds__page .cds__value-item,
.mad__page .mad__value-item, .swe__page .swe__value-item { padding: 0 0 40px; }
  .aad__page .aad__value-item:nth-child(odd)::before, .apd__page .apd__value-item:nth-child(odd)::before, .cai__page .cai__value-item:nth-child(odd)::before, .aas__page .aas__value-item:nth-child(odd)::before,
.apm__page .apm__value-item:nth-child(odd)::before, .eae__page .eae__value-item:nth-child(odd)::before,
.gai__page .gai__value-item:nth-child(odd)::before,
.aisol__page .aisol__value-item:nth-child(odd)::before,
.saas__page .saas__value-item:nth-child(odd)::before, .ai__page .ai__value-item:nth-child(odd)::before,
.cds__page .cds__value-item:nth-child(odd)::before, .mad__page .mad__value-item:nth-child(odd)::before,
.swe__page .swe__value-item:nth-child(odd)::before { left: -43px; right: auto; width: 32px; top: 26px; }
  .aad__page .aad__value-item:nth-child(even)::before, .apd__page .apd__value-item:nth-child(even)::before, .cai__page .cai__value-item:nth-child(even)::before, .aas__page .aas__value-item:nth-child(even)::before,
.apm__page .apm__value-item:nth-child(even)::before, .eae__page .eae__value-item:nth-child(even)::before,
.gai__page .gai__value-item:nth-child(even)::before,
.aisol__page .aisol__value-item:nth-child(even)::before,
.saas__page .saas__value-item:nth-child(even)::before, .ai__page .ai__value-item:nth-child(even)::before,
.cds__page .cds__value-item:nth-child(even)::before, .mad__page .mad__value-item:nth-child(even)::before,
.swe__page .swe__value-item:nth-child(even)::before { left: -43px; right: auto; width: 32px; top: 26px; }
  .aad__page .aad__value-item:nth-child(odd)::after, .apd__page .apd__value-item:nth-child(odd)::after, .cai__page .cai__value-item:nth-child(odd)::after, .aas__page .aas__value-item:nth-child(odd)::after,
.apm__page .apm__value-item:nth-child(odd)::after, .eae__page .eae__value-item:nth-child(odd)::after,
.gai__page .gai__value-item:nth-child(odd)::after, .aisol__page .aisol__value-item:nth-child(odd)::after,
.saas__page .saas__value-item:nth-child(odd)::after, .ai__page .ai__value-item:nth-child(odd)::after,
.cds__page .cds__value-item:nth-child(odd)::after, .mad__page .mad__value-item:nth-child(odd)::after,
.swe__page .swe__value-item:nth-child(odd)::after { left: -48px; right: auto; top: 21px; }
  .aad__page .aad__value-item:nth-child(even)::after, .apd__page .apd__value-item:nth-child(even)::after, .cai__page .cai__value-item:nth-child(even)::after, .aas__page .aas__value-item:nth-child(even)::after,
.apm__page .apm__value-item:nth-child(even)::after, .eae__page .eae__value-item:nth-child(even)::after,
.gai__page .gai__value-item:nth-child(even)::after,
.aisol__page .aisol__value-item:nth-child(even)::after,
.saas__page .saas__value-item:nth-child(even)::after, .ai__page .ai__value-item:nth-child(even)::after,
.cds__page .cds__value-item:nth-child(even)::after, .mad__page .mad__value-item:nth-child(even)::after,
.swe__page .swe__value-item:nth-child(even)::after { left: -48px; right: auto; top: 21px; }
  .aisol__page .aisol__value-item:nth-child(odd) > span,
.saas__page .saas__value-item:nth-child(odd) > span,
.ai__page .ai__value-item:nth-child(odd) > span:nth-of-type(2),
.cds__page .cds__value-item:nth-child(odd) > span:nth-of-type(2),
.mad__page .mad__value-item:nth-child(odd) > span:nth-of-type(2),
.swe__page .swe__value-item:nth-child(odd) > span:nth-of-type(2) { margin-left: 0; }
  .aad__page .aad__value-item:nth-child(odd) > p, .apd__page .apd__value-item:nth-child(odd) > p, .cai__page .cai__value-item:nth-child(odd) > p, .aas__page .aas__value-item:nth-child(odd) > p,
.apm__page .apm__value-item:nth-child(odd) > p, .eae__page .eae__value-item:nth-child(odd) > p,
.gai__page .gai__value-item:nth-child(odd) > p, .aisol__page .aisol__value-item:nth-child(odd) > p,
.saas__page .saas__value-item:nth-child(odd) > p, .ai__page .ai__value-item:nth-child(odd) > p,
.cds__page .cds__value-item:nth-child(odd) > p, .mad__page .mad__value-item:nth-child(odd) > p,
.swe__page .swe__value-item:nth-child(odd) > p { margin-left: 0; }
  .aad__page .aad__value-item > p, .apd__page .apd__value-item > p, .cai__page .cai__value-item > p, .aas__page .aas__value-item > p, .apm__page .apm__value-item > p,
.eae__page .eae__value-item > p, .gai__page .gai__value-item > p, .aisol__page .aisol__value-item > p,
.saas__page .saas__value-item > p, .ai__page .ai__value-item > p, .cds__page .cds__value-item > p,
.mad__page .mad__value-item > p, .swe__page .swe__value-item > p { max-width: none; }
}
@media (max-width: 767px) {
  .aad__page .aad__value-grid, .apd__page .apd__value-grid, .cai__page .cai__value-grid, .aas__page .aas__value-grid, .apm__page .apm__value-grid,
.eae__page .eae__value-grid, .gai__page .gai__value-grid, .aisol__page .aisol__value-grid,
.saas__page .saas__value-grid, .ai__page .ai__value-grid, .cds__page .cds__value-grid,
.mad__page .mad__value-grid, .swe__page .swe__value-grid { padding-left: 38px; }
  .aad__page .aad__value-grid::before, .apd__page .apd__value-grid::before, .cai__page .cai__value-grid::before, .aas__page .aas__value-grid::before,
.apm__page .apm__value-grid::before, .eae__page .eae__value-grid::before,
.gai__page .gai__value-grid::before, .aisol__page .aisol__value-grid::before,
.saas__page .saas__value-grid::before, .ai__page .ai__value-grid::before,
.cds__page .cds__value-grid::before, .mad__page .mad__value-grid::before,
.swe__page .swe__value-grid::before { left: 4px; }
  .aad__page .aad__value-item:nth-child(odd)::before, .apd__page .apd__value-item:nth-child(odd)::before, .cai__page .cai__value-item:nth-child(odd)::before, .aas__page .aas__value-item:nth-child(odd)::before,
.apm__page .apm__value-item:nth-child(odd)::before, .eae__page .eae__value-item:nth-child(odd)::before,
.gai__page .gai__value-item:nth-child(odd)::before,
.aisol__page .aisol__value-item:nth-child(odd)::before,
.saas__page .saas__value-item:nth-child(odd)::before, .ai__page .ai__value-item:nth-child(odd)::before,
.cds__page .cds__value-item:nth-child(odd)::before, .mad__page .mad__value-item:nth-child(odd)::before,
.swe__page .swe__value-item:nth-child(odd)::before, .aad__page .aad__value-item:nth-child(even)::before, .apd__page .apd__value-item:nth-child(even)::before, .cai__page .cai__value-item:nth-child(even)::before, .aas__page .aas__value-item:nth-child(even)::before,
.apm__page .apm__value-item:nth-child(even)::before, .eae__page .eae__value-item:nth-child(even)::before,
.gai__page .gai__value-item:nth-child(even)::before,
.aisol__page .aisol__value-item:nth-child(even)::before,
.saas__page .saas__value-item:nth-child(even)::before, .ai__page .ai__value-item:nth-child(even)::before,
.cds__page .cds__value-item:nth-child(even)::before, .mad__page .mad__value-item:nth-child(even)::before,
.swe__page .swe__value-item:nth-child(even)::before { left: -34px; width: 24px; }
  .aad__page .aad__value-item:nth-child(odd)::after, .apd__page .apd__value-item:nth-child(odd)::after, .cai__page .cai__value-item:nth-child(odd)::after, .aas__page .aas__value-item:nth-child(odd)::after,
.apm__page .apm__value-item:nth-child(odd)::after, .eae__page .eae__value-item:nth-child(odd)::after,
.gai__page .gai__value-item:nth-child(odd)::after, .aisol__page .aisol__value-item:nth-child(odd)::after,
.saas__page .saas__value-item:nth-child(odd)::after, .ai__page .ai__value-item:nth-child(odd)::after,
.cds__page .cds__value-item:nth-child(odd)::after, .mad__page .mad__value-item:nth-child(odd)::after,
.swe__page .swe__value-item:nth-child(odd)::after, .aad__page .aad__value-item:nth-child(even)::after, .apd__page .apd__value-item:nth-child(even)::after, .cai__page .cai__value-item:nth-child(even)::after, .aas__page .aas__value-item:nth-child(even)::after,
.apm__page .apm__value-item:nth-child(even)::after, .eae__page .eae__value-item:nth-child(even)::after,
.gai__page .gai__value-item:nth-child(even)::after,
.aisol__page .aisol__value-item:nth-child(even)::after,
.saas__page .saas__value-item:nth-child(even)::after, .ai__page .ai__value-item:nth-child(even)::after,
.cds__page .cds__value-item:nth-child(even)::after, .mad__page .mad__value-item:nth-child(even)::after,
.swe__page .swe__value-item:nth-child(even)::after { left: -38px; }
  .aad__page .aad__value-item > h3, .apd__page .apd__value-item > h3, .cai__page .cai__value-item > h3, .aas__page .aas__value-item > h3, .apm__page .apm__value-item > h3,
.eae__page .eae__value-item > h3, .gai__page .gai__value-item > h3, .aisol__page .aisol__value-item > h3,
.saas__page .saas__value-item > h3, .ai__page .ai__value-item > h3, .cds__page .cds__value-item > h3,
.mad__page .mad__value-item > h3, .swe__page .swe__value-item > h3 { font-size: 18.5px; }
  .aad__page .aad__value-item > p, .apd__page .apd__value-item > p, .cai__page .cai__value-item > p, .aas__page .aas__value-item > p, .apm__page .apm__value-item > p,
.eae__page .eae__value-item > p, .gai__page .gai__value-item > p, .aisol__page .aisol__value-item > p,
.saas__page .saas__value-item > p, .ai__page .ai__value-item > p, .cds__page .cds__value-item > p,
.mad__page .mad__value-item > p, .swe__page .swe__value-item > p { font-size: 14.5px; }
  .aisol__page .aisol__value-item > span, .saas__page .saas__value-item > span,
.ai__page .ai__value-item > span:nth-of-type(2), .cds__page .cds__value-item > span:nth-of-type(2),
.mad__page .mad__value-item > span:nth-of-type(2), .swe__page .swe__value-item > span:nth-of-type(2) { width: 40px; height: 40px; font-size: 15px; margin-bottom: 16px; }
}

/* ---------- Archetype R :: Related-practice rail ----------
   A scroll-snapped horizontal track. Panels are separated by hairlines
   rather than boxed, indexed by a small tick numeral, and the rail
   deliberately overflows so the next panel peeks in as an affordance.
   design-experience.html, ui-ux-design.html, product-design.html,
   ux-research.html and design-systems.html were carved out of this
   shared archetype into their own "expanding panel rail" treatment
   further down this file, so those pages will not read the same as
   their siblings below.
   ---------------------------------------------------------- */
.aad__page .aad__connect-grid, .apd__page .apd__connect-grid, .cai__page .cai__connect-grid, .aas__page .aas__connect-grid, .ai__page .ai__connect-grid,
.cds__page .cds__connect-grid, .csw__page .csw__connect-grid,
.gai__page .gai__connect-grid,
.spe__page .spe__connect-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 56px;
  padding: 0 0 26px;
  border-top: 1px solid var(--kx-b);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--kx-a) var(--kx-b);
  counter-reset: kxRail;
}
.aad__page .aad__connect-grid::-webkit-scrollbar, .apd__page .apd__connect-grid::-webkit-scrollbar, .cai__page .cai__connect-grid::-webkit-scrollbar, .aas__page .aas__connect-grid::-webkit-scrollbar,
.ai__page .ai__connect-grid::-webkit-scrollbar, .cds__page .cds__connect-grid::-webkit-scrollbar,
.csw__page .csw__connect-grid::-webkit-scrollbar,
.gai__page .gai__connect-grid::-webkit-scrollbar,
.spe__page .spe__connect-grid::-webkit-scrollbar { height: 3px; }
.aad__page .aad__connect-grid::-webkit-scrollbar-track,
.apd__page .apd__connect-grid::-webkit-scrollbar-track, .cai__page .cai__connect-grid::-webkit-scrollbar-track, .aas__page .aas__connect-grid::-webkit-scrollbar-track,
.ai__page .ai__connect-grid::-webkit-scrollbar-track,
.cds__page .cds__connect-grid::-webkit-scrollbar-track,
.csw__page .csw__connect-grid::-webkit-scrollbar-track,
.gai__page .gai__connect-grid::-webkit-scrollbar-track,
.spe__page .spe__connect-grid::-webkit-scrollbar-track { background: var(--kx-b); }
.aad__page .aad__connect-grid::-webkit-scrollbar-thumb,
.apd__page .apd__connect-grid::-webkit-scrollbar-thumb, .cai__page .cai__connect-grid::-webkit-scrollbar-thumb, .aas__page .aas__connect-grid::-webkit-scrollbar-thumb,
.ai__page .ai__connect-grid::-webkit-scrollbar-thumb,
.cds__page .cds__connect-grid::-webkit-scrollbar-thumb,
.csw__page .csw__connect-grid::-webkit-scrollbar-thumb,
.gai__page .gai__connect-grid::-webkit-scrollbar-thumb,
.spe__page .spe__connect-grid::-webkit-scrollbar-thumb { background: var(--kx-a); }
.aad__page .aad__connect-card, .apd__page .apd__connect-card, .cai__page .cai__connect-card, .aas__page .aas__connect-card, .ai__page .ai__connect-card,
.cds__page .cds__connect-card, .csw__page .csw__connect-card,
.gai__page .gai__connect-card,
.spe__page .spe__connect-card {
  counter-increment: kxRail;
  position: relative;
  flex: 0 0 clamp(255px, 25.5vw, 350px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 34px 34px 8px;
  border: 0;
  border-left: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
  transition: background .45s ease;
}
.aad__page .aad__connect-card:hover, .apd__page .apd__connect-card:hover, .cai__page .cai__connect-card:hover, .aas__page .aas__connect-card:hover,
.ai__page .ai__connect-card:hover, .cds__page .cds__connect-card:hover,
.csw__page .csw__connect-card:hover,
.gai__page .gai__connect-card:hover,
.spe__page .spe__connect-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--kx-bg);
  border-color: var(--kx-b);
}
/* index tick, sitting on the panel's own hairline */
.aad__page .aad__connect-card::before, .apd__page .apd__connect-card::before, .cai__page .cai__connect-card::before, .aas__page .aas__connect-card::before,
.ai__page .ai__connect-card::before, .cds__page .cds__connect-card::before,
.csw__page .csw__connect-card::before,
.gai__page .gai__connect-card::before,
.spe__page .spe__connect-card::before {
  content: counter(kxRail, decimal-leading-zero);
  position: absolute;
  left: -1px;
  top: 0;
  width: auto;
  height: auto;
  inset: 0 auto auto -1px;
  padding: 5px 11px 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--kx-on-a);
  background: var(--kx-a);
  border-radius: 0;
  transform: none;
  opacity: 1;
}
.aad__page .aad__connect-card::after, .apd__page .apd__connect-card::after, .cai__page .cai__connect-card::after, .aas__page .aas__connect-card::after,
.ai__page .ai__connect-card::after, .cds__page .cds__connect-card::after,
.csw__page .csw__connect-card::after,
.gai__page .gai__connect-card::after,
.spe__page .spe__connect-card::after { content: none; display: none; }
.aad__page .aad__connect-card > span, .apd__page .apd__connect-card > span, .cai__page .cai__connect-card > span, .aas__page .aas__connect-card > span,
.ai__page .ai__connect-card > span, .cds__page .cds__connect-card > span,
.csw__page .csw__connect-card > span,
.gai__page .gai__connect-card > span,
.spe__page .spe__connect-card > span {
  width: 46px;
  height: 46px;
  margin: 34px 0 24px;
  border-radius: 0;
  border: 1px solid var(--kx-b);
  background: transparent;
  color: var(--kx-a);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.aad__page .aad__connect-card:hover > span, .apd__page .apd__connect-card:hover > span, .cai__page .cai__connect-card:hover > span, .aas__page .aas__connect-card:hover > span,
.ai__page .ai__connect-card:hover > span, .cds__page .cds__connect-card:hover > span,
.csw__page .csw__connect-card:hover > span,
.gai__page .gai__connect-card:hover > span,
.spe__page .spe__connect-card:hover > span { background: var(--kx-a); border-color: var(--kx-a); color: var(--kx-on-a); }
.aad__page .aad__connect-card > h3, .apd__page .apd__connect-card > h3, .cai__page .cai__connect-card > h3, .aas__page .aas__connect-card > h3, .ai__page .ai__connect-card > h3,
.cds__page .cds__connect-card > h3, .csw__page .csw__connect-card > h3,
.gai__page .gai__connect-card > h3, .spe__page .spe__connect-card > h3 {
  margin: 0 0 12px;
  font-size: 19.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aad__page .aad__connect-card:hover > h3, .apd__page .apd__connect-card:hover > h3, .cai__page .cai__connect-card:hover > h3, .aas__page .aas__connect-card:hover > h3,
.ai__page .ai__connect-card:hover > h3, .cds__page .cds__connect-card:hover > h3,
.csw__page .csw__connect-card:hover > h3,
.gai__page .gai__connect-card:hover > h3,
.spe__page .spe__connect-card:hover > h3 { color: var(--kx-a); }
.aad__page .aad__connect-card > p, .apd__page .apd__connect-card > p, .cai__page .cai__connect-card > p, .aas__page .aas__connect-card > p, .ai__page .ai__connect-card > p,
.cds__page .cds__connect-card > p, .csw__page .csw__connect-card > p,
.gai__page .gai__connect-card > p,
.spe__page .spe__connect-card > p {
  margin: 0 0 26px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.aad__page .aad__connect-card > a, .apd__page .apd__connect-card > a, .cai__page .cai__connect-card > a, .aas__page .aas__connect-card > a, .ai__page .ai__connect-card > a,
.cds__page .cds__connect-card > a, .csw__page .csw__connect-card > a,
.gai__page .gai__connect-card > a,
.spe__page .spe__connect-card > a {
  margin-top: auto;
  padding: 16px 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--kx-b);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kx-a);
}
.aad__page .aad__connect-card > a i, .apd__page .apd__connect-card > a i, .cai__page .cai__connect-card > a i, .aas__page .aas__connect-card > a i,
.ai__page .ai__connect-card > a i, .cds__page .cds__connect-card > a i,
.csw__page .csw__connect-card > a i,
.gai__page .gai__connect-card > a i,
.spe__page .spe__connect-card > a i { transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.aad__page .aad__connect-card:hover > a i, .apd__page .apd__connect-card:hover > a i, .cai__page .cai__connect-card:hover > a i, .aas__page .aas__connect-card:hover > a i,
.ai__page .ai__connect-card:hover > a i, .cds__page .cds__connect-card:hover > a i,
.csw__page .csw__connect-card:hover > a i,
.gai__page .gai__connect-card:hover > a i,
.spe__page .spe__connect-card:hover > a i { transform: translateX(6px); }

@media (max-width: 991px) {
  .aad__page .aad__connect-card, .apd__page .apd__connect-card, .cai__page .cai__connect-card, .aas__page .aas__connect-card, .ai__page .ai__connect-card,
.cds__page .cds__connect-card, .csw__page .csw__connect-card,
.gai__page .gai__connect-card,
.spe__page .spe__connect-card { flex: 0 0 clamp(250px, 46vw, 330px); padding: 30px 28px 8px; }
}
@media (max-width: 767px) {
  .aad__page .aad__connect-grid, .apd__page .apd__connect-grid, .cai__page .cai__connect-grid, .aas__page .aas__connect-grid, .ai__page .ai__connect-grid,
.cds__page .cds__connect-grid, .csw__page .csw__connect-grid,
.gai__page .gai__connect-grid,
.spe__page .spe__connect-grid { margin-top: 38px; scroll-snap-type: x mandatory; }
  .aad__page .aad__connect-card, .apd__page .apd__connect-card, .cai__page .cai__connect-card, .aas__page .aas__connect-card, .ai__page .ai__connect-card,
.cds__page .cds__connect-card, .csw__page .csw__connect-card,
.gai__page .gai__connect-card,
.spe__page .spe__connect-card { flex: 0 0 80vw; padding: 28px 24px 8px; }
  .aad__page .aad__connect-card > span, .apd__page .apd__connect-card > span, .cai__page .cai__connect-card > span, .aas__page .aas__connect-card > span,
.ai__page .ai__connect-card > span, .cds__page .cds__connect-card > span,
.csw__page .csw__connect-card > span,
.gai__page .gai__connect-card > span,
.spe__page .spe__connect-card > span { margin: 28px 0 20px; width: 42px; height: 42px; }
  .aad__page .aad__connect-card > h3, .apd__page .apd__connect-card > h3, .cai__page .cai__connect-card > h3, .aas__page .aas__connect-card > h3, .ai__page .ai__connect-card > h3,
.cds__page .cds__connect-card > h3, .csw__page .csw__connect-card > h3,
.gai__page .gai__connect-card > h3, .spe__page .spe__connect-card > h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .aad__page .aad__connect-card > a i, .apd__page .apd__connect-card > a i, .cai__page .cai__connect-card > a i, .aas__page .aas__connect-card > a i,
.ai__page .ai__connect-card > a i, .cds__page .cds__connect-card > a i,
.csw__page .csw__connect-card > a i,
.gai__page .gai__connect-card > a i,
.spe__page .spe__connect-card > a i { transition: none; }
}

/* ---------- Archetype T :: Technology spec register ----------
   Rows on hairlines: group name in a fixed left measure, the stack itself
   as a flowing rule-divided line across the full width.
   ------------------------------------------------------------- */
.asm__page .asm__tech-grid, .bde__page .bde__tech-grid, .bi__page .bi__tech-grid,
.dax__page .dax__tech-grid, .deng__page .deng__tech-grid, .dgov__page .dgov__tech-grid,
.dwh__page .dwh__tech-grid, .qas__page .qas__tech-grid, .qst__page .qst__tech-grid {
  display: block;
  margin-top: 54px;
  border-top: 1px solid var(--kx-b);
}
.asm__page .asm__tech-col, .bde__page .bde__tech-col, .bi__page .bi__tech-col, .dax__page .dax__tech-col,
.deng__page .deng__tech-col, .dgov__page .dgov__tech-col, .dwh__page .dwh__tech-col,
.qas__page .qas__tech-col, .qst__page .qst__tech-col {
  display: grid;
  grid-template-columns: minmax(0, 272px) minmax(0, 1fr);
  column-gap: 60px;
  align-items: baseline;
  margin: 0;
  padding: 30px 4px;
  border: 0;
  border-bottom: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.asm__page .asm__tech-col::before, .bde__page .bde__tech-col::before, .bi__page .bi__tech-col::before,
.dax__page .dax__tech-col::before, .deng__page .deng__tech-col::before,
.dgov__page .dgov__tech-col::before, .dwh__page .dwh__tech-col::before,
.qas__page .qas__tech-col::before, .qst__page .qst__tech-col::before { content: none; display: none; }
.asm__page .asm__tech-col::after, .bde__page .bde__tech-col::after, .bi__page .bi__tech-col::after,
.dax__page .dax__tech-col::after, .deng__page .deng__tech-col::after, .dgov__page .dgov__tech-col::after,
.dwh__page .dwh__tech-col::after, .qas__page .qas__tech-col::after, .qst__page .qst__tech-col::after { content: none; display: none; }
.asm__page .asm__tech-col h3, .bde__page .bde__tech-col h3, .bi__page .bi__tech-col h3,
.dax__page .dax__tech-col h3, .deng__page .deng__tech-col h3, .dgov__page .dgov__tech-col h3,
.dwh__page .dwh__tech-col h3, .qas__page .qas__tech-col h3, .qst__page .qst__tech-col h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--kx-h);
}
.asm__page .asm__tech-col ul, .bde__page .bde__tech-col ul, .bi__page .bi__tech-col ul,
.dax__page .dax__tech-col ul, .deng__page .deng__tech-col ul, .dgov__page .dgov__tech-col ul,
.dwh__page .dwh__tech-col ul, .qas__page .qas__tech-col ul, .qst__page .qst__tech-col ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.asm__page .asm__tech-col li, .bde__page .bde__tech-col li, .bi__page .bi__tech-col li,
.dax__page .dax__tech-col li, .deng__page .deng__tech-col li, .dgov__page .dgov__tech-col li,
.dwh__page .dwh__tech-col li, .qas__page .qas__tech-col li, .qst__page .qst__tech-col li {
  margin: 0;
  padding: 2px 20px;
  border-left: 1px solid var(--kx-b);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--kx-t);
  transition: color .35s ease;
}
.asm__page .asm__tech-col li::before, .bde__page .bde__tech-col li::before,
.bi__page .bi__tech-col li::before, .dax__page .dax__tech-col li::before,
.deng__page .deng__tech-col li::before, .dgov__page .dgov__tech-col li::before,
.dwh__page .dwh__tech-col li::before, .qas__page .qas__tech-col li::before,
.qst__page .qst__tech-col li::before { content: none; display: none; }
/* fixed columns mean the first entry on each row is targetable, so no
   stray leading rule where the list wraps */
.asm__page .asm__tech-col li:nth-child(4n+1), .bde__page .bde__tech-col li:nth-child(4n+1),
.bi__page .bi__tech-col li:nth-child(4n+1), .dax__page .dax__tech-col li:nth-child(4n+1),
.deng__page .deng__tech-col li:nth-child(4n+1), .dgov__page .dgov__tech-col li:nth-child(4n+1),
.dwh__page .dwh__tech-col li:nth-child(4n+1), .qas__page .qas__tech-col li:nth-child(4n+1),
.qst__page .qst__tech-col li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.asm__page .asm__tech-col li:hover, .bde__page .bde__tech-col li:hover, .bi__page .bi__tech-col li:hover,
.dax__page .dax__tech-col li:hover, .deng__page .deng__tech-col li:hover,
.dgov__page .dgov__tech-col li:hover, .dwh__page .dwh__tech-col li:hover,
.qas__page .qas__tech-col li:hover, .qst__page .qst__tech-col li:hover { color: var(--kx-a); }

@media (max-width: 991px) {
  .asm__page .asm__tech-grid, .bde__page .bde__tech-grid, .bi__page .bi__tech-grid,
.dax__page .dax__tech-grid, .deng__page .deng__tech-grid, .dgov__page .dgov__tech-grid,
.dwh__page .dwh__tech-grid, .qas__page .qas__tech-grid, .qst__page .qst__tech-grid { margin-top: 40px; }
  .asm__page .asm__tech-col, .bde__page .bde__tech-col, .bi__page .bi__tech-col, .dax__page .dax__tech-col,
.deng__page .deng__tech-col, .dgov__page .dgov__tech-col, .dwh__page .dwh__tech-col,
.qas__page .qas__tech-col, .qst__page .qst__tech-col {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    padding: 26px 2px;
  }
  .asm__page .asm__tech-col h3, .bde__page .bde__tech-col h3, .bi__page .bi__tech-col h3,
.dax__page .dax__tech-col h3, .deng__page .deng__tech-col h3, .dgov__page .dgov__tech-col h3,
.dwh__page .dwh__tech-col h3, .qas__page .qas__tech-col h3, .qst__page .qst__tech-col h3 { font-size: 17px; }
  .asm__page .asm__tech-col ul, .bde__page .bde__tech-col ul, .bi__page .bi__tech-col ul,
.dax__page .dax__tech-col ul, .deng__page .deng__tech-col ul, .dgov__page .dgov__tech-col ul,
.dwh__page .dwh__tech-col ul, .qas__page .qas__tech-col ul, .qst__page .qst__tech-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asm__page .asm__tech-col li, .bde__page .bde__tech-col li, .bi__page .bi__tech-col li,
.dax__page .dax__tech-col li, .deng__page .deng__tech-col li, .dgov__page .dgov__tech-col li,
.dwh__page .dwh__tech-col li, .qas__page .qas__tech-col li, .qst__page .qst__tech-col li { padding: 2px 16px; }
  .asm__page .asm__tech-col li:nth-child(4n+1), .bde__page .bde__tech-col li:nth-child(4n+1),
.bi__page .bi__tech-col li:nth-child(4n+1), .dax__page .dax__tech-col li:nth-child(4n+1),
.deng__page .deng__tech-col li:nth-child(4n+1), .dgov__page .dgov__tech-col li:nth-child(4n+1),
.dwh__page .dwh__tech-col li:nth-child(4n+1), .qas__page .qas__tech-col li:nth-child(4n+1),
.qst__page .qst__tech-col li:nth-child(4n+1) { padding-left: 16px; border-left: 1px solid var(--kx-b); }
  .asm__page .asm__tech-col li:nth-child(2n+1), .bde__page .bde__tech-col li:nth-child(2n+1),
.bi__page .bi__tech-col li:nth-child(2n+1), .dax__page .dax__tech-col li:nth-child(2n+1),
.deng__page .deng__tech-col li:nth-child(2n+1), .dgov__page .dgov__tech-col li:nth-child(2n+1),
.dwh__page .dwh__tech-col li:nth-child(2n+1), .qas__page .qas__tech-col li:nth-child(2n+1),
.qst__page .qst__tech-col li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 575px) {
  .asm__page .asm__tech-col ul, .bde__page .bde__tech-col ul, .bi__page .bi__tech-col ul,
.dax__page .dax__tech-col ul, .deng__page .deng__tech-col ul, .dgov__page .dgov__tech-col ul,
.dwh__page .dwh__tech-col ul, .qas__page .qas__tech-col ul, .qst__page .qst__tech-col ul { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
  .asm__page .asm__tech-col li, .bde__page .bde__tech-col li, .bi__page .bi__tech-col li,
.dax__page .dax__tech-col li, .deng__page .deng__tech-col li, .dgov__page .dgov__tech-col li,
.dwh__page .dwh__tech-col li, .qas__page .qas__tech-col li, .qst__page .qst__tech-col li { padding: 2px 0; border-left: 0; font-size: 14px; }
  .asm__page .asm__tech-col li:nth-child(4n+1), .bde__page .bde__tech-col li:nth-child(4n+1),
.bi__page .bi__tech-col li:nth-child(4n+1), .dax__page .dax__tech-col li:nth-child(4n+1),
.deng__page .deng__tech-col li:nth-child(4n+1), .dgov__page .dgov__tech-col li:nth-child(4n+1),
.dwh__page .dwh__tech-col li:nth-child(4n+1), .qas__page .qas__tech-col li:nth-child(4n+1),
.qst__page .qst__tech-col li:nth-child(4n+1), .asm__page .asm__tech-col li:nth-child(2n+1), .bde__page .bde__tech-col li:nth-child(2n+1),
.bi__page .bi__tech-col li:nth-child(2n+1), .dax__page .dax__tech-col li:nth-child(2n+1),
.deng__page .deng__tech-col li:nth-child(2n+1), .dgov__page .dgov__tech-col li:nth-child(2n+1),
.dwh__page .dwh__tech-col li:nth-child(2n+1), .qas__page .qas__tech-col li:nth-child(2n+1),
.qst__page .qst__tech-col li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}

/* ---------- Archetype M :: Hairline industry mosaic ----------
   One ruled plane instead of separate tiles: a 1px grid gap over a
   border-coloured container draws the hairlines, cells sit flush, and the
   column spans are intentionally uneven (3/3 - 2/2/2 - 3/3 - 6).
   ------------------------------------------------------------- */
.aad__page .aad__ind-grid, .apd__page .apd__ind-grid, .cai__page .cai__ind-grid, .aas__page .aas__ind-grid, .cds__page .cds__ind-grid,
.csw__page .csw__ind-grid, .dex__page .dex__ind-grid, .dsy__page .dsy__ind-grid,
.gai__page .gai__ind-grid, .pd__page .pd__ind-grid, .uix__page .uix__ind-grid, .uxr__page .uxr__ind-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-top: 58px;
  background: var(--kx-b);
  border: 1px solid var(--kx-b);
}
.aad__page .aad__ind-card, .apd__page .apd__ind-card, .cai__page .cai__ind-card, .aas__page .aas__ind-card, .cds__page .cds__ind-card,
.csw__page .csw__ind-item, .dex__page .dex__ind-item, .dsy__page .dsy__ind-item,
.gai__page .gai__ind-card, .pd__page .pd__ind-item, .uix__page .uix__ind-item, .uxr__page .uxr__ind-item {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px 30px 32px;
  border: 0;
  border-radius: 0;
  background: #fff;  /* no ind-grid sits on a dark band (verified) */
  box-shadow: none;
  transform: none;
  overflow: hidden;
  transition: background .45s ease;
}
.aad__page .aad__ind-card:hover, .apd__page .apd__ind-card:hover, .cai__page .cai__ind-card:hover, .aas__page .aas__ind-card:hover, .cds__page .cds__ind-card:hover,
.csw__page .csw__ind-item:hover, .dex__page .dex__ind-item:hover, .dsy__page .dsy__ind-item:hover,
.gai__page .gai__ind-card:hover, .pd__page .pd__ind-item:hover, .uix__page .uix__ind-item:hover,
.uxr__page .uxr__ind-item:hover { transform: none; box-shadow: none; background: var(--kx-bg); }
.aad__page .aad__ind-card::before, .apd__page .apd__ind-card::before, .cai__page .cai__ind-card::before, .aas__page .aas__ind-card::before, .cds__page .cds__ind-card::before,
.csw__page .csw__ind-item::before, .dex__page .dex__ind-item::before, .dsy__page .dsy__ind-item::before,
.gai__page .gai__ind-card::before, .pd__page .pd__ind-item::before, .uix__page .uix__ind-item::before,
.uxr__page .uxr__ind-item::before { content: none; display: none; }
.aad__page .aad__ind-card::after, .apd__page .apd__ind-card::after, .cai__page .cai__ind-card::after, .aas__page .aas__ind-card::after, .cds__page .cds__ind-card::after,
.csw__page .csw__ind-item::after, .dex__page .dex__ind-item::after, .dsy__page .dsy__ind-item::after,
.gai__page .gai__ind-card::after, .pd__page .pd__ind-item::after, .uix__page .uix__ind-item::after,
.uxr__page .uxr__ind-item::after { content: none; display: none; }

/* uneven spans - the point of the composition */
.aad__page .aad__ind-card:nth-child(1), .apd__page .apd__ind-card:nth-child(1), .cai__page .cai__ind-card:nth-child(1), .aas__page .aas__ind-card:nth-child(1),
.cds__page .cds__ind-card:nth-child(1), .csw__page .csw__ind-item:nth-child(1),
.dex__page .dex__ind-item:nth-child(1), .dsy__page .dsy__ind-item:nth-child(1),
.gai__page .gai__ind-card:nth-child(1), .pd__page .pd__ind-item:nth-child(1),
.uix__page .uix__ind-item:nth-child(1), .uxr__page .uxr__ind-item:nth-child(1) { grid-column: span 3; padding: 40px 38px 36px; }
.aad__page .aad__ind-card:nth-child(2), .apd__page .apd__ind-card:nth-child(2), .cai__page .cai__ind-card:nth-child(2), .aas__page .aas__ind-card:nth-child(2),
.cds__page .cds__ind-card:nth-child(2), .csw__page .csw__ind-item:nth-child(2),
.dex__page .dex__ind-item:nth-child(2), .dsy__page .dsy__ind-item:nth-child(2),
.gai__page .gai__ind-card:nth-child(2), .pd__page .pd__ind-item:nth-child(2),
.uix__page .uix__ind-item:nth-child(2), .uxr__page .uxr__ind-item:nth-child(2) { grid-column: span 3; padding: 40px 38px 36px; }
.aad__page .aad__ind-card:nth-child(3), .apd__page .apd__ind-card:nth-child(3), .cai__page .cai__ind-card:nth-child(3), .aas__page .aas__ind-card:nth-child(3),
.cds__page .cds__ind-card:nth-child(3), .csw__page .csw__ind-item:nth-child(3),
.dex__page .dex__ind-item:nth-child(3), .dsy__page .dsy__ind-item:nth-child(3),
.gai__page .gai__ind-card:nth-child(3), .pd__page .pd__ind-item:nth-child(3),
.uix__page .uix__ind-item:nth-child(3), .uxr__page .uxr__ind-item:nth-child(3),
.aad__page .aad__ind-card:nth-child(4), .apd__page .apd__ind-card:nth-child(4), .cai__page .cai__ind-card:nth-child(4), .aas__page .aas__ind-card:nth-child(4),
.cds__page .cds__ind-card:nth-child(4), .csw__page .csw__ind-item:nth-child(4),
.dex__page .dex__ind-item:nth-child(4), .dsy__page .dsy__ind-item:nth-child(4),
.gai__page .gai__ind-card:nth-child(4), .pd__page .pd__ind-item:nth-child(4),
.uix__page .uix__ind-item:nth-child(4), .uxr__page .uxr__ind-item:nth-child(4),
.aad__page .aad__ind-card:nth-child(5), .apd__page .apd__ind-card:nth-child(5), .cai__page .cai__ind-card:nth-child(5), .aas__page .aas__ind-card:nth-child(5),
.cds__page .cds__ind-card:nth-child(5), .csw__page .csw__ind-item:nth-child(5),
.dex__page .dex__ind-item:nth-child(5), .dsy__page .dsy__ind-item:nth-child(5),
.gai__page .gai__ind-card:nth-child(5), .pd__page .pd__ind-item:nth-child(5),
.uix__page .uix__ind-item:nth-child(5), .uxr__page .uxr__ind-item:nth-child(5) { grid-column: span 2; }
.aad__page .aad__ind-card:nth-child(6), .apd__page .apd__ind-card:nth-child(6), .cai__page .cai__ind-card:nth-child(6), .aas__page .aas__ind-card:nth-child(6),
.cds__page .cds__ind-card:nth-child(6), .csw__page .csw__ind-item:nth-child(6),
.dex__page .dex__ind-item:nth-child(6), .dsy__page .dsy__ind-item:nth-child(6),
.gai__page .gai__ind-card:nth-child(6), .pd__page .pd__ind-item:nth-child(6),
.uix__page .uix__ind-item:nth-child(6), .uxr__page .uxr__ind-item:nth-child(6),
.aad__page .aad__ind-card:nth-child(7), .apd__page .apd__ind-card:nth-child(7), .cai__page .cai__ind-card:nth-child(7), .aas__page .aas__ind-card:nth-child(7),
.cds__page .cds__ind-card:nth-child(7), .csw__page .csw__ind-item:nth-child(7),
.dex__page .dex__ind-item:nth-child(7), .dsy__page .dsy__ind-item:nth-child(7),
.gai__page .gai__ind-card:nth-child(7), .pd__page .pd__ind-item:nth-child(7),
.uix__page .uix__ind-item:nth-child(7), .uxr__page .uxr__ind-item:nth-child(7) { grid-column: span 3; }
.aad__page .aad__ind-card:nth-child(8), .apd__page .apd__ind-card:nth-child(8), .cai__page .cai__ind-card:nth-child(8), .aas__page .aas__ind-card:nth-child(8),
.cds__page .cds__ind-card:nth-child(8), .csw__page .csw__ind-item:nth-child(8),
.dex__page .dex__ind-item:nth-child(8), .dsy__page .dsy__ind-item:nth-child(8),
.gai__page .gai__ind-card:nth-child(8), .pd__page .pd__ind-item:nth-child(8),
.uix__page .uix__ind-item:nth-child(8), .uxr__page .uxr__ind-item:nth-child(8) { grid-column: span 6; }
.aad__page .aad__ind-card--wide, .apd__page .apd__ind-card--wide, .cai__page .cai__ind-card--wide, .aas__page .aas__ind-card--wide, .cds__page .cds__ind-card--wide,
.csw__page .csw__ind-item--wide, .dex__page .dex__ind-item--wide, .dsy__page .dsy__ind-item--wide,
.gai__page .gai__ind-card--wide, .pd__page .pd__ind-item--wide, .uix__page .uix__ind-item--wide,
.uxr__page .uxr__ind-item--wide { grid-column: span 3; }
/* keep every row exactly full whatever the item count (6, 7, 8 or 9) */
.aad__page .aad__ind-card:nth-child(6):last-child, .apd__page .apd__ind-card:nth-child(6):last-child, .cai__page .cai__ind-card:nth-child(6):last-child, .aas__page .aas__ind-card:nth-child(6):last-child,
.cds__page .cds__ind-card:nth-child(6):last-child, .csw__page .csw__ind-item:nth-child(6):last-child,
.dex__page .dex__ind-item:nth-child(6):last-child, .dsy__page .dsy__ind-item:nth-child(6):last-child,
.gai__page .gai__ind-card:nth-child(6):last-child, .pd__page .pd__ind-item:nth-child(6):last-child,
.uix__page .uix__ind-item:nth-child(6):last-child, .uxr__page .uxr__ind-item:nth-child(6):last-child { grid-column: span 6; }
.aad__page .aad__ind-card:nth-child(8):not(:last-child),
.apd__page .apd__ind-card:nth-child(8):not(:last-child), .cai__page .cai__ind-card:nth-child(8):not(:last-child), .aas__page .aas__ind-card:nth-child(8):not(:last-child),
.cds__page .cds__ind-card:nth-child(8):not(:last-child),
.csw__page .csw__ind-item:nth-child(8):not(:last-child),
.dex__page .dex__ind-item:nth-child(8):not(:last-child),
.dsy__page .dsy__ind-item:nth-child(8):not(:last-child),
.gai__page .gai__ind-card:nth-child(8):not(:last-child),
.pd__page .pd__ind-item:nth-child(8):not(:last-child),
.uix__page .uix__ind-item:nth-child(8):not(:last-child),
.uxr__page .uxr__ind-item:nth-child(8):not(:last-child) { grid-column: span 3; }
.aad__page .aad__ind-card:nth-child(9), .apd__page .apd__ind-card:nth-child(9), .cai__page .cai__ind-card:nth-child(9), .aas__page .aas__ind-card:nth-child(9),
.cds__page .cds__ind-card:nth-child(9), .csw__page .csw__ind-item:nth-child(9),
.dex__page .dex__ind-item:nth-child(9), .dsy__page .dsy__ind-item:nth-child(9),
.gai__page .gai__ind-card:nth-child(9), .pd__page .pd__ind-item:nth-child(9),
.uix__page .uix__ind-item:nth-child(9), .uxr__page .uxr__ind-item:nth-child(9) { grid-column: span 3; }

.aad__page .aad__ind-card > span, .apd__page .apd__ind-card > span, .cai__page .cai__ind-card > span, .aas__page .aas__ind-card > span, .cds__page .cds__ind-card > span,
.csw__page .csw__ind-item > span, .dex__page .dex__ind-item > span, .dsy__page .dsy__ind-item > span,
.gai__page .gai__ind-card > span, .pd__page .pd__ind-item > span, .uix__page .uix__ind-item > span,
.uxr__page .uxr__ind-item > span {
  position: absolute;
  right: 26px;
  top: 26px;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 21px;
  opacity: .3;
  transition: opacity .45s ease;
}
.aad__page .aad__ind-card:hover > span, .apd__page .apd__ind-card:hover > span, .cai__page .cai__ind-card:hover > span, .aas__page .aas__ind-card:hover > span,
.cds__page .cds__ind-card:hover > span, .csw__page .csw__ind-item:hover > span,
.dex__page .dex__ind-item:hover > span, .dsy__page .dsy__ind-item:hover > span,
.gai__page .gai__ind-card:hover > span, .pd__page .pd__ind-item:hover > span,
.uix__page .uix__ind-item:hover > span, .uxr__page .uxr__ind-item:hover > span { opacity: 1; }
.aad__page .aad__ind-card > h3, .apd__page .apd__ind-card > h3, .cai__page .cai__ind-card > h3, .aas__page .aas__ind-card > h3, .cds__page .cds__ind-card > h3,
.csw__page .csw__ind-item > h3, .dex__page .dex__ind-item > h3, .dsy__page .dsy__ind-item > h3,
.gai__page .gai__ind-card > h3, .pd__page .pd__ind-item > h3, .uix__page .uix__ind-item > h3,
.uxr__page .uxr__ind-item > h3 {
  margin: 0 0 12px;
  padding-right: 46px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aad__page .aad__ind-card:hover > h3, .apd__page .apd__ind-card:hover > h3, .cai__page .cai__ind-card:hover > h3, .aas__page .aas__ind-card:hover > h3,
.cds__page .cds__ind-card:hover > h3, .csw__page .csw__ind-item:hover > h3,
.dex__page .dex__ind-item:hover > h3, .dsy__page .dsy__ind-item:hover > h3,
.gai__page .gai__ind-card:hover > h3, .pd__page .pd__ind-item:hover > h3,
.uix__page .uix__ind-item:hover > h3, .uxr__page .uxr__ind-item:hover > h3 { color: var(--kx-a); }
.aad__page .aad__ind-card > p, .apd__page .apd__ind-card > p, .cai__page .cai__ind-card > p, .aas__page .aas__ind-card > p, .cds__page .cds__ind-card > p,
.csw__page .csw__ind-item > p, .dex__page .dex__ind-item > p, .dsy__page .dsy__ind-item > p,
.gai__page .gai__ind-card > p, .pd__page .pd__ind-item > p, .uix__page .uix__ind-item > p,
.uxr__page .uxr__ind-item > p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.aad__page .aad__ind-card > i, .apd__page .apd__ind-card > i, .cai__page .cai__ind-card > i, .aas__page .aas__ind-card > i, .cds__page .cds__ind-card > i,
.csw__page .csw__ind-item > i, .dex__page .dex__ind-item > i, .dsy__page .dsy__ind-item > i,
.gai__page .gai__ind-card > i, .pd__page .pd__ind-item > i, .uix__page .uix__ind-item > i,
.uxr__page .uxr__ind-item > i {
  position: static;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 26px;
  width: auto;
  height: auto;
  font-size: 13px;
  color: var(--kx-a);
  opacity: .4;
  transform: translateX(0);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}
.aad__page .aad__ind-card:hover > i, .apd__page .apd__ind-card:hover > i, .cai__page .cai__ind-card:hover > i, .aas__page .aas__ind-card:hover > i,
.cds__page .cds__ind-card:hover > i, .csw__page .csw__ind-item:hover > i,
.dex__page .dex__ind-item:hover > i, .dsy__page .dsy__ind-item:hover > i,
.gai__page .gai__ind-card:hover > i, .pd__page .pd__ind-item:hover > i,
.uix__page .uix__ind-item:hover > i, .uxr__page .uxr__ind-item:hover > i { opacity: 1; transform: translateX(6px); }

@media (max-width: 991px) {
  .aad__page .aad__ind-grid, .apd__page .apd__ind-grid, .cai__page .cai__ind-grid, .aas__page .aas__ind-grid, .cds__page .cds__ind-grid,
.csw__page .csw__ind-grid, .dex__page .dex__ind-grid, .dsy__page .dsy__ind-grid,
.gai__page .gai__ind-grid, .pd__page .pd__ind-grid, .uix__page .uix__ind-grid, .uxr__page .uxr__ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; }
  .aad__page .aad__ind-card, .apd__page .apd__ind-card, .cai__page .cai__ind-card, .aas__page .aas__ind-card, .cds__page .cds__ind-card,
.csw__page .csw__ind-item, .dex__page .dex__ind-item, .dsy__page .dsy__ind-item,
.gai__page .gai__ind-card, .pd__page .pd__ind-item, .uix__page .uix__ind-item, .uxr__page .uxr__ind-item { grid-column: span 1; padding: 28px 26px 28px; }
  .aad__page .aad__ind-card:nth-child(1), .apd__page .apd__ind-card:nth-child(1), .cai__page .cai__ind-card:nth-child(1), .aas__page .aas__ind-card:nth-child(1),
.cds__page .cds__ind-card:nth-child(1), .csw__page .csw__ind-item:nth-child(1),
.dex__page .dex__ind-item:nth-child(1), .dsy__page .dsy__ind-item:nth-child(1),
.gai__page .gai__ind-card:nth-child(1), .pd__page .pd__ind-item:nth-child(1),
.uix__page .uix__ind-item:nth-child(1), .uxr__page .uxr__ind-item:nth-child(1), .aad__page .aad__ind-card:nth-child(2), .apd__page .apd__ind-card:nth-child(2), .cai__page .cai__ind-card:nth-child(2), .aas__page .aas__ind-card:nth-child(2),
.cds__page .cds__ind-card:nth-child(2), .csw__page .csw__ind-item:nth-child(2),
.dex__page .dex__ind-item:nth-child(2), .dsy__page .dsy__ind-item:nth-child(2),
.gai__page .gai__ind-card:nth-child(2), .pd__page .pd__ind-item:nth-child(2),
.uix__page .uix__ind-item:nth-child(2), .uxr__page .uxr__ind-item:nth-child(2) { grid-column: span 2; padding: 32px 30px 32px; }
  .aad__page .aad__ind-card:nth-child(3), .apd__page .apd__ind-card:nth-child(3), .cai__page .cai__ind-card:nth-child(3), .aas__page .aas__ind-card:nth-child(3),
.cds__page .cds__ind-card:nth-child(3), .csw__page .csw__ind-item:nth-child(3),
.dex__page .dex__ind-item:nth-child(3), .dsy__page .dsy__ind-item:nth-child(3),
.gai__page .gai__ind-card:nth-child(3), .pd__page .pd__ind-item:nth-child(3),
.uix__page .uix__ind-item:nth-child(3), .uxr__page .uxr__ind-item:nth-child(3),
.aad__page .aad__ind-card:nth-child(4), .apd__page .apd__ind-card:nth-child(4), .cai__page .cai__ind-card:nth-child(4), .aas__page .aas__ind-card:nth-child(4),
.cds__page .cds__ind-card:nth-child(4), .csw__page .csw__ind-item:nth-child(4),
.dex__page .dex__ind-item:nth-child(4), .dsy__page .dsy__ind-item:nth-child(4),
.gai__page .gai__ind-card:nth-child(4), .pd__page .pd__ind-item:nth-child(4),
.uix__page .uix__ind-item:nth-child(4), .uxr__page .uxr__ind-item:nth-child(4),
.aad__page .aad__ind-card:nth-child(5), .apd__page .apd__ind-card:nth-child(5), .cai__page .cai__ind-card:nth-child(5), .aas__page .aas__ind-card:nth-child(5),
.cds__page .cds__ind-card:nth-child(5), .csw__page .csw__ind-item:nth-child(5),
.dex__page .dex__ind-item:nth-child(5), .dsy__page .dsy__ind-item:nth-child(5),
.gai__page .gai__ind-card:nth-child(5), .pd__page .pd__ind-item:nth-child(5),
.uix__page .uix__ind-item:nth-child(5), .uxr__page .uxr__ind-item:nth-child(5) { grid-column: span 1; }
  .aad__page .aad__ind-card:nth-child(6), .apd__page .apd__ind-card:nth-child(6), .cai__page .cai__ind-card:nth-child(6), .aas__page .aas__ind-card:nth-child(6),
.cds__page .cds__ind-card:nth-child(6), .csw__page .csw__ind-item:nth-child(6),
.dex__page .dex__ind-item:nth-child(6), .dsy__page .dsy__ind-item:nth-child(6),
.gai__page .gai__ind-card:nth-child(6), .pd__page .pd__ind-item:nth-child(6),
.uix__page .uix__ind-item:nth-child(6), .uxr__page .uxr__ind-item:nth-child(6),
.aad__page .aad__ind-card:nth-child(7), .apd__page .apd__ind-card:nth-child(7), .cai__page .cai__ind-card:nth-child(7), .aas__page .aas__ind-card:nth-child(7),
.cds__page .cds__ind-card:nth-child(7), .csw__page .csw__ind-item:nth-child(7),
.dex__page .dex__ind-item:nth-child(7), .dsy__page .dsy__ind-item:nth-child(7),
.gai__page .gai__ind-card:nth-child(7), .pd__page .pd__ind-item:nth-child(7),
.uix__page .uix__ind-item:nth-child(7), .uxr__page .uxr__ind-item:nth-child(7) { grid-column: span 1; }
  .aad__page .aad__ind-card:nth-child(8), .apd__page .apd__ind-card:nth-child(8), .cai__page .cai__ind-card:nth-child(8), .aas__page .aas__ind-card:nth-child(8),
.cds__page .cds__ind-card:nth-child(8), .csw__page .csw__ind-item:nth-child(8),
.dex__page .dex__ind-item:nth-child(8), .dsy__page .dsy__ind-item:nth-child(8),
.gai__page .gai__ind-card:nth-child(8), .pd__page .pd__ind-item:nth-child(8),
.uix__page .uix__ind-item:nth-child(8), .uxr__page .uxr__ind-item:nth-child(8) { grid-column: span 2; }
  .aad__page .aad__ind-card:nth-child(6):last-child, .apd__page .apd__ind-card:nth-child(6):last-child, .cai__page .cai__ind-card:nth-child(6):last-child, .aas__page .aas__ind-card:nth-child(6):last-child,
.cds__page .cds__ind-card:nth-child(6):last-child, .csw__page .csw__ind-item:nth-child(6):last-child,
.dex__page .dex__ind-item:nth-child(6):last-child, .dsy__page .dsy__ind-item:nth-child(6):last-child,
.gai__page .gai__ind-card:nth-child(6):last-child, .pd__page .pd__ind-item:nth-child(6):last-child,
.uix__page .uix__ind-item:nth-child(6):last-child, .uxr__page .uxr__ind-item:nth-child(6):last-child { grid-column: span 2; }
  .aad__page .aad__ind-card:nth-child(8):not(:last-child),
.apd__page .apd__ind-card:nth-child(8):not(:last-child), .cai__page .cai__ind-card:nth-child(8):not(:last-child), .aas__page .aas__ind-card:nth-child(8):not(:last-child),
.cds__page .cds__ind-card:nth-child(8):not(:last-child),
.csw__page .csw__ind-item:nth-child(8):not(:last-child),
.dex__page .dex__ind-item:nth-child(8):not(:last-child),
.dsy__page .dsy__ind-item:nth-child(8):not(:last-child),
.gai__page .gai__ind-card:nth-child(8):not(:last-child),
.pd__page .pd__ind-item:nth-child(8):not(:last-child),
.uix__page .uix__ind-item:nth-child(8):not(:last-child),
.uxr__page .uxr__ind-item:nth-child(8):not(:last-child), .aad__page .aad__ind-card:nth-child(9), .apd__page .apd__ind-card:nth-child(9), .cai__page .cai__ind-card:nth-child(9), .aas__page .aas__ind-card:nth-child(9),
.cds__page .cds__ind-card:nth-child(9), .csw__page .csw__ind-item:nth-child(9),
.dex__page .dex__ind-item:nth-child(9), .dsy__page .dsy__ind-item:nth-child(9),
.gai__page .gai__ind-card:nth-child(9), .pd__page .pd__ind-item:nth-child(9),
.uix__page .uix__ind-item:nth-child(9), .uxr__page .uxr__ind-item:nth-child(9) { grid-column: span 1; }
  .aad__page .aad__ind-card--wide, .apd__page .apd__ind-card--wide, .cai__page .cai__ind-card--wide, .aas__page .aas__ind-card--wide, .cds__page .cds__ind-card--wide,
.csw__page .csw__ind-item--wide, .dex__page .dex__ind-item--wide, .dsy__page .dsy__ind-item--wide,
.gai__page .gai__ind-card--wide, .pd__page .pd__ind-item--wide, .uix__page .uix__ind-item--wide,
.uxr__page .uxr__ind-item--wide { grid-column: span 1; }
  .aad__page .aad__ind-card > h3, .apd__page .apd__ind-card > h3, .cai__page .cai__ind-card > h3, .aas__page .aas__ind-card > h3, .cds__page .cds__ind-card > h3,
.csw__page .csw__ind-item > h3, .dex__page .dex__ind-item > h3, .dsy__page .dsy__ind-item > h3,
.gai__page .gai__ind-card > h3, .pd__page .pd__ind-item > h3, .uix__page .uix__ind-item > h3,
.uxr__page .uxr__ind-item > h3 { font-size: 20px; }
}
@media (max-width: 575px) {
  .aad__page .aad__ind-grid, .apd__page .apd__ind-grid, .cai__page .cai__ind-grid, .aas__page .aas__ind-grid, .cds__page .cds__ind-grid,
.csw__page .csw__ind-grid, .dex__page .dex__ind-grid, .dsy__page .dsy__ind-grid,
.gai__page .gai__ind-grid, .pd__page .pd__ind-grid, .uix__page .uix__ind-grid, .uxr__page .uxr__ind-grid { grid-template-columns: minmax(0, 1fr); }
  .aad__page .aad__ind-card, .apd__page .apd__ind-card, .cai__page .cai__ind-card, .aas__page .aas__ind-card, .cds__page .cds__ind-card,
.csw__page .csw__ind-item, .dex__page .dex__ind-item, .dsy__page .dsy__ind-item,
.gai__page .gai__ind-card, .pd__page .pd__ind-item, .uix__page .uix__ind-item, .uxr__page .uxr__ind-item { grid-column: span 1; padding: 26px 22px 26px; }
  .aad__page .aad__ind-card:nth-child(1), .apd__page .apd__ind-card:nth-child(1), .cai__page .cai__ind-card:nth-child(1), .aas__page .aas__ind-card:nth-child(1),
.cds__page .cds__ind-card:nth-child(1), .csw__page .csw__ind-item:nth-child(1),
.dex__page .dex__ind-item:nth-child(1), .dsy__page .dsy__ind-item:nth-child(1),
.gai__page .gai__ind-card:nth-child(1), .pd__page .pd__ind-item:nth-child(1),
.uix__page .uix__ind-item:nth-child(1), .uxr__page .uxr__ind-item:nth-child(1), .aad__page .aad__ind-card:nth-child(2), .apd__page .apd__ind-card:nth-child(2), .cai__page .cai__ind-card:nth-child(2), .aas__page .aas__ind-card:nth-child(2),
.cds__page .cds__ind-card:nth-child(2), .csw__page .csw__ind-item:nth-child(2),
.dex__page .dex__ind-item:nth-child(2), .dsy__page .dsy__ind-item:nth-child(2),
.gai__page .gai__ind-card:nth-child(2), .pd__page .pd__ind-item:nth-child(2),
.uix__page .uix__ind-item:nth-child(2), .uxr__page .uxr__ind-item:nth-child(2), .aad__page .aad__ind-card:nth-child(8), .apd__page .apd__ind-card:nth-child(8), .cai__page .cai__ind-card:nth-child(8), .aas__page .aas__ind-card:nth-child(8),
.cds__page .cds__ind-card:nth-child(8), .csw__page .csw__ind-item:nth-child(8),
.dex__page .dex__ind-item:nth-child(8), .dsy__page .dsy__ind-item:nth-child(8),
.gai__page .gai__ind-card:nth-child(8), .pd__page .pd__ind-item:nth-child(8),
.uix__page .uix__ind-item:nth-child(8), .uxr__page .uxr__ind-item:nth-child(8) { grid-column: span 1; padding: 26px 22px 26px; }
  .aad__page .aad__ind-card:nth-child(3), .apd__page .apd__ind-card:nth-child(3), .cai__page .cai__ind-card:nth-child(3), .aas__page .aas__ind-card:nth-child(3),
.cds__page .cds__ind-card:nth-child(3), .csw__page .csw__ind-item:nth-child(3),
.dex__page .dex__ind-item:nth-child(3), .dsy__page .dsy__ind-item:nth-child(3),
.gai__page .gai__ind-card:nth-child(3), .pd__page .pd__ind-item:nth-child(3),
.uix__page .uix__ind-item:nth-child(3), .uxr__page .uxr__ind-item:nth-child(3),
.aad__page .aad__ind-card:nth-child(4), .apd__page .apd__ind-card:nth-child(4), .cai__page .cai__ind-card:nth-child(4), .aas__page .aas__ind-card:nth-child(4),
.cds__page .cds__ind-card:nth-child(4), .csw__page .csw__ind-item:nth-child(4),
.dex__page .dex__ind-item:nth-child(4), .dsy__page .dsy__ind-item:nth-child(4),
.gai__page .gai__ind-card:nth-child(4), .pd__page .pd__ind-item:nth-child(4),
.uix__page .uix__ind-item:nth-child(4), .uxr__page .uxr__ind-item:nth-child(4),
.aad__page .aad__ind-card:nth-child(5), .apd__page .apd__ind-card:nth-child(5), .cai__page .cai__ind-card:nth-child(5), .aas__page .aas__ind-card:nth-child(5),
.cds__page .cds__ind-card:nth-child(5), .csw__page .csw__ind-item:nth-child(5),
.dex__page .dex__ind-item:nth-child(5), .dsy__page .dsy__ind-item:nth-child(5),
.gai__page .gai__ind-card:nth-child(5), .pd__page .pd__ind-item:nth-child(5),
.uix__page .uix__ind-item:nth-child(5), .uxr__page .uxr__ind-item:nth-child(5), .aad__page .aad__ind-card:nth-child(6), .apd__page .apd__ind-card:nth-child(6), .cai__page .cai__ind-card:nth-child(6), .aas__page .aas__ind-card:nth-child(6),
.cds__page .cds__ind-card:nth-child(6), .csw__page .csw__ind-item:nth-child(6),
.dex__page .dex__ind-item:nth-child(6), .dsy__page .dsy__ind-item:nth-child(6),
.gai__page .gai__ind-card:nth-child(6), .pd__page .pd__ind-item:nth-child(6),
.uix__page .uix__ind-item:nth-child(6), .uxr__page .uxr__ind-item:nth-child(6),
.aad__page .aad__ind-card:nth-child(7), .apd__page .apd__ind-card:nth-child(7), .cai__page .cai__ind-card:nth-child(7), .aas__page .aas__ind-card:nth-child(7),
.cds__page .cds__ind-card:nth-child(7), .csw__page .csw__ind-item:nth-child(7),
.dex__page .dex__ind-item:nth-child(7), .dsy__page .dsy__ind-item:nth-child(7),
.gai__page .gai__ind-card:nth-child(7), .pd__page .pd__ind-item:nth-child(7),
.uix__page .uix__ind-item:nth-child(7), .uxr__page .uxr__ind-item:nth-child(7) { grid-column: span 1; }
  .aad__page .aad__ind-card:nth-child(6):last-child, .apd__page .apd__ind-card:nth-child(6):last-child, .cai__page .cai__ind-card:nth-child(6):last-child, .aas__page .aas__ind-card:nth-child(6):last-child,
.cds__page .cds__ind-card:nth-child(6):last-child, .csw__page .csw__ind-item:nth-child(6):last-child,
.dex__page .dex__ind-item:nth-child(6):last-child, .dsy__page .dsy__ind-item:nth-child(6):last-child,
.gai__page .gai__ind-card:nth-child(6):last-child, .pd__page .pd__ind-item:nth-child(6):last-child,
.uix__page .uix__ind-item:nth-child(6):last-child, .uxr__page .uxr__ind-item:nth-child(6):last-child, .aad__page .aad__ind-card:nth-child(8):not(:last-child),
.apd__page .apd__ind-card:nth-child(8):not(:last-child), .cai__page .cai__ind-card:nth-child(8):not(:last-child), .aas__page .aas__ind-card:nth-child(8):not(:last-child),
.cds__page .cds__ind-card:nth-child(8):not(:last-child),
.csw__page .csw__ind-item:nth-child(8):not(:last-child),
.dex__page .dex__ind-item:nth-child(8):not(:last-child),
.dsy__page .dsy__ind-item:nth-child(8):not(:last-child),
.gai__page .gai__ind-card:nth-child(8):not(:last-child),
.pd__page .pd__ind-item:nth-child(8):not(:last-child),
.uix__page .uix__ind-item:nth-child(8):not(:last-child),
.uxr__page .uxr__ind-item:nth-child(8):not(:last-child), .aad__page .aad__ind-card:nth-child(9), .apd__page .apd__ind-card:nth-child(9), .cai__page .cai__ind-card:nth-child(9), .aas__page .aas__ind-card:nth-child(9),
.cds__page .cds__ind-card:nth-child(9), .csw__page .csw__ind-item:nth-child(9),
.dex__page .dex__ind-item:nth-child(9), .dsy__page .dsy__ind-item:nth-child(9),
.gai__page .gai__ind-card:nth-child(9), .pd__page .pd__ind-item:nth-child(9),
.uix__page .uix__ind-item:nth-child(9), .uxr__page .uxr__ind-item:nth-child(9) { grid-column: span 1; }
  .aad__page .aad__ind-card--wide, .apd__page .apd__ind-card--wide, .cai__page .cai__ind-card--wide, .aas__page .aas__ind-card--wide, .cds__page .cds__ind-card--wide,
.csw__page .csw__ind-item--wide, .dex__page .dex__ind-item--wide, .dsy__page .dsy__ind-item--wide,
.gai__page .gai__ind-card--wide, .pd__page .pd__ind-item--wide, .uix__page .uix__ind-item--wide,
.uxr__page .uxr__ind-item--wide { grid-column: span 1; }
  .aad__page .aad__ind-card > h3, .apd__page .apd__ind-card > h3, .cai__page .cai__ind-card > h3, .aas__page .aas__ind-card > h3, .cds__page .cds__ind-card > h3,
.csw__page .csw__ind-item > h3, .dex__page .dex__ind-item > h3, .dsy__page .dsy__ind-item > h3,
.gai__page .gai__ind-card > h3, .pd__page .pd__ind-item > h3, .uix__page .uix__ind-item > h3,
.uxr__page .uxr__ind-item > h3 { font-size: 19px; padding-right: 40px; }
  .aad__page .aad__ind-card > i, .apd__page .apd__ind-card > i, .cai__page .cai__ind-card > i, .aas__page .aas__ind-card > i, .cds__page .cds__ind-card > i,
.csw__page .csw__ind-item > i, .dex__page .dex__ind-item > i, .dsy__page .dsy__ind-item > i,
.gai__page .gai__ind-card > i, .pd__page .pd__ind-item > i, .uix__page .uix__ind-item > i,
.uxr__page .uxr__ind-item > i { padding-top: 20px; opacity: .55; }
}

/* ---------- Archetype W1 :: Ruled quadrants, ghost glyph ----------
   No cards: a two-column plane split by internal hairlines, with the icon
   blown up behind the copy so the overlap carries the depth.
   ------------------------------------------------------------------ */
.aad__page .aad__why-grid, .apd__page .apd__why-grid, .cai__page .cai__why-grid, .aas__page .aas__why-grid, .aic__page .aic__why-grid, .ai__page .ai__why-grid,
.clc__page .clc__why-grid, .cds__page .cds__why-grid, .gai__page .gai__why-grid,
.soln__page .soln__why-grid, .tech__page .tech__why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 58px;
  border-top: 1px solid var(--kx-b);
}
.aad__page .aad__why-item, .apd__page .apd__why-item, .cai__page .cai__why-item, .aas__page .aas__why-item, .aic__page .aic__why-item, .ai__page .ai__why-item,
.clc__page .clc__why-item, .cds__page .cds__why-item, .gai__page .gai__why-item,
.soln__page .soln__why-item, .tech__page .tech__why-item {
  position: relative;
  margin: 0;
  padding: 40px 46px 42px;
  border: 0;
  border-bottom: 1px solid var(--kx-b);
  border-left: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: hidden;
  transition: background .45s ease;
}
.aad__page .aad__why-item:nth-child(odd), .apd__page .apd__why-item:nth-child(odd), .cai__page .cai__why-item:nth-child(odd), .aas__page .aas__why-item:nth-child(odd),
.aic__page .aic__why-item:nth-child(odd), .ai__page .ai__why-item:nth-child(odd),
.clc__page .clc__why-item:nth-child(odd), .cds__page .cds__why-item:nth-child(odd),
.gai__page .gai__why-item:nth-child(odd), .soln__page .soln__why-item:nth-child(odd),
.tech__page .tech__why-item:nth-child(odd) { border-left: 0; }
.aad__page .aad__why-item:hover, .apd__page .apd__why-item:hover, .cai__page .cai__why-item:hover, .aas__page .aas__why-item:hover, .aic__page .aic__why-item:hover,
.ai__page .ai__why-item:hover, .clc__page .clc__why-item:hover, .cds__page .cds__why-item:hover,
.gai__page .gai__why-item:hover, .soln__page .soln__why-item:hover, .tech__page .tech__why-item:hover { transform: none; box-shadow: none; background: var(--kx-bg); }
.aad__page .aad__why-item::before, .apd__page .apd__why-item::before, .cai__page .cai__why-item::before, .aas__page .aas__why-item::before, .aic__page .aic__why-item::before,
.ai__page .ai__why-item::before, .clc__page .clc__why-item::before, .cds__page .cds__why-item::before,
.gai__page .gai__why-item::before, .soln__page .soln__why-item::before,
.tech__page .tech__why-item::before { content: none; display: none; }
.aad__page .aad__why-item::after, .apd__page .apd__why-item::after, .cai__page .cai__why-item::after, .aas__page .aas__why-item::after, .aic__page .aic__why-item::after,
.ai__page .ai__why-item::after, .clc__page .clc__why-item::after, .cds__page .cds__why-item::after,
.gai__page .gai__why-item::after, .soln__page .soln__why-item::after, .tech__page .tech__why-item::after { content: none; display: none; }
.aad__page .aad__why-item > span, .apd__page .apd__why-item > span, .cai__page .cai__why-item > span, .aas__page .aas__why-item > span, .aic__page .aic__why-item > span,
.ai__page .ai__why-item > span, .clc__page .clc__why-item > span, .cds__page .cds__why-item > span,
.gai__page .gai__why-item > span, .soln__page .soln__why-item > span, .tech__page .tech__why-item > span {
  position: absolute;
  right: 22px;
  bottom: 6px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 92px;
  line-height: 1;
  opacity: .07;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.aad__page .aad__why-item:hover > span, .apd__page .apd__why-item:hover > span, .cai__page .cai__why-item:hover > span, .aas__page .aas__why-item:hover > span,
.aic__page .aic__why-item:hover > span, .ai__page .ai__why-item:hover > span,
.clc__page .clc__why-item:hover > span, .cds__page .cds__why-item:hover > span,
.gai__page .gai__why-item:hover > span, .soln__page .soln__why-item:hover > span,
.tech__page .tech__why-item:hover > span { opacity: .14; transform: translateY(-6px); }
.aad__page .aad__why-item > h3, .apd__page .apd__why-item > h3, .cai__page .cai__why-item > h3, .aas__page .aas__why-item > h3, .aic__page .aic__why-item > h3,
.ai__page .ai__why-item > h3, .clc__page .clc__why-item > h3, .cds__page .cds__why-item > h3,
.gai__page .gai__why-item > h3, .soln__page .soln__why-item > h3, .tech__page .tech__why-item > h3 {
  position: relative;
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aad__page .aad__why-item:hover > h3, .apd__page .apd__why-item:hover > h3, .cai__page .cai__why-item:hover > h3, .aas__page .aas__why-item:hover > h3,
.aic__page .aic__why-item:hover > h3, .ai__page .ai__why-item:hover > h3,
.clc__page .clc__why-item:hover > h3, .cds__page .cds__why-item:hover > h3,
.gai__page .gai__why-item:hover > h3, .soln__page .soln__why-item:hover > h3,
.tech__page .tech__why-item:hover > h3 { color: var(--kx-a); }
.aad__page .aad__why-item > p, .apd__page .apd__why-item > p, .cai__page .cai__why-item > p, .aas__page .aas__why-item > p, .aic__page .aic__why-item > p,
.ai__page .ai__why-item > p, .clc__page .clc__why-item > p, .cds__page .cds__why-item > p,
.gai__page .gai__why-item > p, .soln__page .soln__why-item > p, .tech__page .tech__why-item > p {
  position: relative;
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--kx-t);
}

@media (max-width: 767px) {
  .aad__page .aad__why-grid, .apd__page .apd__why-grid, .cai__page .cai__why-grid, .aas__page .aas__why-grid, .aic__page .aic__why-grid, .ai__page .ai__why-grid,
.clc__page .clc__why-grid, .cds__page .cds__why-grid, .gai__page .gai__why-grid,
.soln__page .soln__why-grid, .tech__page .tech__why-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .aad__page .aad__why-item, .apd__page .apd__why-item, .cai__page .cai__why-item, .aas__page .aas__why-item, .aic__page .aic__why-item, .ai__page .ai__why-item,
.clc__page .clc__why-item, .cds__page .cds__why-item, .gai__page .gai__why-item,
.soln__page .soln__why-item, .tech__page .tech__why-item { padding: 32px 20px 34px; border-left: 0; }
  .aad__page .aad__why-item:nth-child(odd), .apd__page .apd__why-item:nth-child(odd), .cai__page .cai__why-item:nth-child(odd), .aas__page .aas__why-item:nth-child(odd),
.aic__page .aic__why-item:nth-child(odd), .ai__page .ai__why-item:nth-child(odd),
.clc__page .clc__why-item:nth-child(odd), .cds__page .cds__why-item:nth-child(odd),
.gai__page .gai__why-item:nth-child(odd), .soln__page .soln__why-item:nth-child(odd),
.tech__page .tech__why-item:nth-child(odd) { border-left: 0; }
  .aad__page .aad__why-item > span, .apd__page .apd__why-item > span, .cai__page .cai__why-item > span, .aas__page .aas__why-item > span, .aic__page .aic__why-item > span,
.ai__page .ai__why-item > span, .clc__page .clc__why-item > span, .cds__page .cds__why-item > span,
.gai__page .gai__why-item > span, .soln__page .soln__why-item > span, .tech__page .tech__why-item > span { font-size: 70px; right: 12px; }
  .aad__page .aad__why-item > h3, .apd__page .apd__why-item > h3, .cai__page .cai__why-item > h3, .aas__page .aas__why-item > h3, .aic__page .aic__why-item > h3,
.ai__page .ai__why-item > h3, .clc__page .clc__why-item > h3, .cds__page .cds__why-item > h3,
.gai__page .gai__why-item > h3, .soln__page .soln__why-item > h3, .tech__page .tech__why-item > h3 { font-size: 18.5px; }
  .aad__page .aad__why-item > p, .apd__page .apd__why-item > p, .cai__page .cai__why-item > p, .aas__page .aas__why-item > p, .aic__page .aic__why-item > p,
.ai__page .ai__why-item > p, .clc__page .clc__why-item > p, .cds__page .cds__why-item > p,
.gai__page .gai__why-item > p, .soln__page .soln__why-item > p, .tech__page .tech__why-item > p { font-size: 14.5px; max-width: none; }
}

/* ---------- Archetype W2 :: Hanging-numeral measures ----------
   The existing index numeral is pulled out of the card and hung in the
   left margin at display scale; the copy keeps a narrow measure beside it.
   -------------------------------------------------------------- */
.csw__page .csw__why-grid, .dex__page .dex__why-grid, .dsy__page .dsy__why-grid,
.dva__page .dva__why-grid, .pd__page .pd__why-grid, .spe__page .spe__why-grid, .uix__page .uix__why-grid,
.uxr__page .uxr__why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 84px;
  row-gap: 0;
  margin-top: 58px;
}
.csw__page .csw__why-item, .dex__page .dex__why-item, .dsy__page .dsy__why-item,
.dva__page .dva__why-item, .pd__page .pd__why-item, .spe__page .spe__why-item, .uix__page .uix__why-item,
.uxr__page .uxr__why-item {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  column-gap: 6px;
  align-items: start;
  margin: 0;
  padding: 34px 0 34px;
  border: 0;
  border-top: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
.csw__page .csw__why-item:hover, .dex__page .dex__why-item:hover, .dsy__page .dsy__why-item:hover,
.dva__page .dva__why-item:hover, .pd__page .pd__why-item:hover, .spe__page .spe__why-item:hover,
.uix__page .uix__why-item:hover, .uxr__page .uxr__why-item:hover { transform: none; box-shadow: none; background: transparent; }
.csw__page .csw__why-item::before, .dex__page .dex__why-item::before, .dsy__page .dsy__why-item::before,
.dva__page .dva__why-item::before, .pd__page .pd__why-item::before, .spe__page .spe__why-item::before,
.uix__page .uix__why-item::before, .uxr__page .uxr__why-item::before { content: none; display: none; }
.csw__page .csw__why-item > span, .dex__page .dex__why-item > span, .dsy__page .dsy__why-item > span,
.dva__page .dva__why-item > span, .pd__page .pd__why-item > span, .spe__page .spe__why-item > span,
.uix__page .uix__why-item > span, .uxr__page .uxr__why-item > span {
  position: static;
  grid-column: 1;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 42px;
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--kx-b);
  transition: color .45s ease;
}
.csw__page .csw__why-item:hover > span, .dex__page .dex__why-item:hover > span,
.dsy__page .dsy__why-item:hover > span, .dva__page .dva__why-item:hover > span,
.pd__page .pd__why-item:hover > span, .spe__page .spe__why-item:hover > span,
.uix__page .uix__why-item:hover > span, .uxr__page .uxr__why-item:hover > span { color: var(--kx-a); }
.csw__page .csw__why-item > div, .dex__page .dex__why-item > div, .dsy__page .dsy__why-item > div,
.dva__page .dva__why-item > div, .pd__page .pd__why-item > div, .spe__page .spe__why-item > div,
.uix__page .uix__why-item > div, .uxr__page .uxr__why-item > div { grid-column: 2; }
.csw__page .csw__why-item h3, .dex__page .dex__why-item h3, .dsy__page .dsy__why-item h3,
.dva__page .dva__why-item h3, .pd__page .pd__why-item h3, .spe__page .spe__why-item h3,
.uix__page .uix__why-item h3, .uxr__page .uxr__why-item h3 {
  margin: 0 0 10px;
  font-size: 19.5px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.csw__page .csw__why-item:hover h3, .dex__page .dex__why-item:hover h3,
.dsy__page .dsy__why-item:hover h3, .dva__page .dva__why-item:hover h3, .pd__page .pd__why-item:hover h3,
.spe__page .spe__why-item:hover h3, .uix__page .uix__why-item:hover h3,
.uxr__page .uxr__why-item:hover h3 { color: var(--kx-a); }
.csw__page .csw__why-item p, .dex__page .dex__why-item p, .dsy__page .dsy__why-item p,
.dva__page .dva__why-item p, .pd__page .pd__why-item p, .spe__page .spe__why-item p,
.uix__page .uix__why-item p, .uxr__page .uxr__why-item p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--kx-t);
}

@media (max-width: 991px) {
  .csw__page .csw__why-grid, .dex__page .dex__why-grid, .dsy__page .dsy__why-grid,
.dva__page .dva__why-grid, .pd__page .pd__why-grid, .spe__page .spe__why-grid, .uix__page .uix__why-grid,
.uxr__page .uxr__why-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; margin-top: 40px; }
}
@media (max-width: 767px) {
  .csw__page .csw__why-item, .dex__page .dex__why-item, .dsy__page .dsy__why-item,
.dva__page .dva__why-item, .pd__page .pd__why-item, .spe__page .spe__why-item, .uix__page .uix__why-item,
.uxr__page .uxr__why-item { grid-template-columns: 56px minmax(0, 1fr); padding: 26px 0; }
  .csw__page .csw__why-item > span, .dex__page .dex__why-item > span, .dsy__page .dsy__why-item > span,
.dva__page .dva__why-item > span, .pd__page .pd__why-item > span, .spe__page .spe__why-item > span,
.uix__page .uix__why-item > span, .uxr__page .uxr__why-item > span { font-size: 32px; }
  .csw__page .csw__why-item h3, .dex__page .dex__why-item h3, .dsy__page .dsy__why-item h3,
.dva__page .dva__why-item h3, .pd__page .pd__why-item h3, .spe__page .spe__why-item h3,
.uix__page .uix__why-item h3, .uxr__page .uxr__why-item h3 { font-size: 17.5px; }
}

/* ---------- Archetype B :: Vertical-rule tiers ----------
   The eight-to-ten "what we build" entries become tiers separated by
   vertical hairlines with a counted tick above each - a set of measures
   across the page rather than a wall of small tiles.
   -------------------------------------------------------- */
.aad__page .aad__build-grid, .apd__page .apd__build-grid, .cai__page .cai__build-grid, .aas__page .aas__build-grid, .cdc__page .cdc__build-grid,
.dat__page .dat__build-grid, .gai__page .gai__build-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  counter-reset: kxTier;
  border-top: 1px solid var(--kx-b);
}
.aad__page .aad__build-card, .apd__page .apd__build-card, .cai__page .cai__build-card, .aas__page .aas__build-card, .cdc__page .cdc__build-card,
.dat__page .dat__build-card, .gai__page .gai__build-card {
  counter-increment: kxTier;
  position: relative;
  margin: 0;
  padding: 32px 28px 34px;
  border: 0;
  border-left: 1px solid var(--kx-b);
  border-bottom: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: background .45s ease;
}
.aad__page .aad__build-card:nth-child(4n+1), .apd__page .apd__build-card:nth-child(4n+1), .cai__page .cai__build-card:nth-child(4n+1), .aas__page .aas__build-card:nth-child(4n+1),
.cdc__page .cdc__build-card:nth-child(4n+1), .dat__page .dat__build-card:nth-child(4n+1),
.gai__page .gai__build-card:nth-child(4n+1) { border-left: 0; }
.aad__page .aad__build-card:hover, .apd__page .apd__build-card:hover, .cai__page .cai__build-card:hover, .aas__page .aas__build-card:hover, .cdc__page .cdc__build-card:hover,
.dat__page .dat__build-card:hover, .gai__page .gai__build-card:hover { transform: none; box-shadow: none; background: var(--kx-bg); border-color: var(--kx-b); }
.aad__page .aad__build-card::before, .apd__page .apd__build-card::before, .cai__page .cai__build-card::before, .aas__page .aas__build-card::before,
.cdc__page .cdc__build-card::before, .dat__page .dat__build-card::before,
.gai__page .gai__build-card::before {
  content: counter(kxTier, decimal-leading-zero);
  position: static;
  display: block;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0 0 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--kx-a);
  background: none;
  border-radius: 0;
  transform: none;
  opacity: 1;
}
.aad__page .aad__build-card::after, .apd__page .apd__build-card::after, .cai__page .cai__build-card::after, .aas__page .aas__build-card::after,
.cdc__page .cdc__build-card::after, .dat__page .dat__build-card::after,
.gai__page .gai__build-card::after { content: none; display: none; }
.aad__page .aad__build-card > span, .apd__page .apd__build-card > span, .cai__page .cai__build-card > span, .aas__page .aas__build-card > span,
.cdc__page .cdc__build-card > span, .dat__page .dat__build-card > span,
.gai__page .gai__build-card > span {
  width: 40px;
  height: 40px;
  margin: 0 0 18px;
  border-radius: 0;
  border: 1px solid var(--kx-b);
  background: transparent;
  color: var(--kx-a);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.aad__page .aad__build-card:hover > span, .apd__page .apd__build-card:hover > span, .cai__page .cai__build-card:hover > span, .aas__page .aas__build-card:hover > span,
.cdc__page .cdc__build-card:hover > span, .dat__page .dat__build-card:hover > span,
.gai__page .gai__build-card:hover > span { background: var(--kx-a); border-color: var(--kx-a); color: var(--kx-on-a); }
.aad__page .aad__build-card > h3, .apd__page .apd__build-card > h3, .cai__page .cai__build-card > h3, .aas__page .aas__build-card > h3, .cdc__page .cdc__build-card > h3,
.dat__page .dat__build-card > h3, .gai__page .gai__build-card > h3 {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.34;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aad__page .aad__build-card:hover > h3, .apd__page .apd__build-card:hover > h3, .cai__page .cai__build-card:hover > h3, .aas__page .aas__build-card:hover > h3,
.cdc__page .cdc__build-card:hover > h3, .dat__page .dat__build-card:hover > h3,
.gai__page .gai__build-card:hover > h3 { color: var(--kx-a); }
.aad__page .aad__build-card > p, .apd__page .apd__build-card > p, .cai__page .cai__build-card > p, .aas__page .aas__build-card > p, .cdc__page .cdc__build-card > p,
.dat__page .dat__build-card > p, .gai__page .gai__build-card > p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}

@media (max-width: 991px) {
  .aad__page .aad__build-grid, .apd__page .apd__build-grid, .cai__page .cai__build-grid, .aas__page .aas__build-grid, .cdc__page .cdc__build-grid,
.dat__page .dat__build-grid, .gai__page .gai__build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .aad__page .aad__build-card:nth-child(4n+1), .apd__page .apd__build-card:nth-child(4n+1), .cai__page .cai__build-card:nth-child(4n+1), .aas__page .aas__build-card:nth-child(4n+1),
.cdc__page .cdc__build-card:nth-child(4n+1), .dat__page .dat__build-card:nth-child(4n+1),
.gai__page .gai__build-card:nth-child(4n+1) { border-left: 1px solid var(--kx-b); }
  .aad__page .aad__build-card:nth-child(odd), .apd__page .apd__build-card:nth-child(odd), .cai__page .cai__build-card:nth-child(odd), .aas__page .aas__build-card:nth-child(odd),
.cdc__page .cdc__build-card:nth-child(odd), .dat__page .dat__build-card:nth-child(odd),
.gai__page .gai__build-card:nth-child(odd) { border-left: 0; }
}
@media (max-width: 575px) {
  .aad__page .aad__build-grid, .apd__page .apd__build-grid, .cai__page .cai__build-grid, .aas__page .aas__build-grid, .cdc__page .cdc__build-grid,
.dat__page .dat__build-grid, .gai__page .gai__build-grid { grid-template-columns: minmax(0, 1fr); }
  .aad__page .aad__build-card, .apd__page .apd__build-card, .cai__page .cai__build-card, .aas__page .aas__build-card, .cdc__page .cdc__build-card,
.dat__page .dat__build-card, .gai__page .gai__build-card { padding: 26px 4px 28px; border-left: 0; }
  .aad__page .aad__build-card:nth-child(4n+1), .apd__page .apd__build-card:nth-child(4n+1), .cai__page .cai__build-card:nth-child(4n+1), .aas__page .aas__build-card:nth-child(4n+1),
.cdc__page .cdc__build-card:nth-child(4n+1), .dat__page .dat__build-card:nth-child(4n+1),
.gai__page .gai__build-card:nth-child(4n+1) { border-left: 0; }
  .aad__page .aad__build-card:nth-child(odd), .apd__page .apd__build-card:nth-child(odd), .cai__page .cai__build-card:nth-child(odd), .aas__page .aas__build-card:nth-child(odd),
.cdc__page .cdc__build-card:nth-child(odd), .dat__page .dat__build-card:nth-child(odd),
.gai__page .gai__build-card:nth-child(odd) { border-left: 0; }
}

/* ---------- Archetype G :: Bracketed guardrail list ----------
   A minimal two-up register. Each guardrail is prefixed by a bracketed
   counter and separated only by a rule; the icon is dropped to a small
   inline mark beside the title rather than a stacked badge.
   ------------------------------------------------------------- */
.aad__page .aad__guard-grid, .apd__page .apd__guard-grid, .cai__page .cai__guard-grid, .aas__page .aas__guard-grid, .gai__page .gai__guard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 80px;
  row-gap: 0;
  margin-top: 56px;
  counter-reset: kxGuard;
}
.aad__page .aad__guard-item, .apd__page .apd__guard-item, .cai__page .cai__guard-item, .aas__page .aas__guard-item, .gai__page .gai__guard-item {
  counter-increment: kxGuard;
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-top: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
.aad__page .aad__guard-item:hover, .apd__page .apd__guard-item:hover, .cai__page .cai__guard-item:hover, .aas__page .aas__guard-item:hover, .gai__page .gai__guard-item:hover { transform: none; box-shadow: none; background: transparent; }
.aad__page .aad__guard-item::before, .apd__page .apd__guard-item::before, .cai__page .cai__guard-item::before, .aas__page .aas__guard-item::before,
.gai__page .gai__guard-item::before {
  content: "[" counter(kxGuard, decimal-leading-zero) "]";
  position: static;
  grid-column: 1;
  grid-row: 1;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--kx-a);
  background: none;
  border-radius: 0;
  transform: none;
  opacity: 1;
}
.aad__page .aad__guard-item > span, .apd__page .apd__guard-item > span, .cai__page .cai__guard-item > span, .aas__page .aas__guard-item > span,
.gai__page .gai__guard-item > span {
  grid-column: 3;
  grid-row: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 14px;
  opacity: .55;
}
.aad__page .aad__guard-item > h3, .apd__page .apd__guard-item > h3, .cai__page .cai__guard-item > h3, .aas__page .aas__guard-item > h3, .gai__page .gai__guard-item > h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 8px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aad__page .aad__guard-item:hover > h3, .apd__page .apd__guard-item:hover > h3, .cai__page .cai__guard-item:hover > h3, .aas__page .aas__guard-item:hover > h3,
.gai__page .gai__guard-item:hover > h3 { color: var(--kx-a); }
.aad__page .aad__guard-item > p, .apd__page .apd__guard-item > p, .cai__page .cai__guard-item > p, .aas__page .aas__guard-item > p, .gai__page .gai__guard-item > p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}

@media (max-width: 991px) {
  .aad__page .aad__guard-grid, .apd__page .apd__guard-grid, .cai__page .cai__guard-grid, .aas__page .aas__guard-grid, .gai__page .gai__guard-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; margin-top: 40px; }
}
@media (max-width: 575px) {
  .aad__page .aad__guard-item, .apd__page .apd__guard-item, .cai__page .cai__guard-item, .aas__page .aas__guard-item, .gai__page .gai__guard-item { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 22px 0; }
  .aad__page .aad__guard-item > h3, .apd__page .apd__guard-item > h3, .cai__page .cai__guard-item > h3, .aas__page .aas__guard-item > h3, .gai__page .gai__guard-item > h3 { font-size: 16.5px; }
}

/* ---------- Archetype X :: Woven capability index ----------
   Was: a repeat(4, 1fr) card grid of eight small tiles.
   Now: eight ruled full-width entries that alternate their indent, with a
   leader rule drawn into every indented row. The icon becomes an inline
   mark on the title line, so each entry is a line of type, not a box.
   design-experience.html, ui-ux-design.html and design-systems.html were
   carved out of this shared archetype into their own "capability deck"
   treatment further down this file, so those pages will not read the
   same as their siblings below.
   ----------------------------------------------------------- */
.db__page .db__cap-grid, .mt__page .mt__cap-grid,
.spe__page .spe__cap-grid {
  display: block;
  margin-top: 56px;
  border-top: 1px solid var(--kx-b);
}
.db__page .db__cap-card, .mt__page .mt__cap-tile,
.spe__page .spe__cap-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid var(--kx-b);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
  transition: padding-left .45s cubic-bezier(.22, .61, .36, 1);
}
.db__page .db__cap-card:hover,
.mt__page .mt__cap-tile:hover, .spe__page .spe__cap-item:hover { transform: none; box-shadow: none; background: transparent; }
.db__page .db__cap-card::before,
.mt__page .mt__cap-tile::before, .spe__page .spe__cap-item::before { content: none; display: none; }
.db__page .db__cap-card::after,
.mt__page .mt__cap-tile::after, .spe__page .spe__cap-item::after { content: none; display: none; }
/* every other entry steps in, with a leader drawn back to the margin */
.db__page .db__cap-card:nth-child(even),
.mt__page .mt__cap-tile:nth-child(even),
.spe__page .spe__cap-item:nth-child(even) { padding-left: 128px; }
.db__page .db__cap-card:nth-child(even)::before,
.mt__page .mt__cap-tile:nth-child(even)::before,
.spe__page .spe__cap-item:nth-child(even)::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 38px;
  width: 96px;
  height: 1px;
  background: var(--kx-b);
}
.db__page .db__cap-card > span,
.mt__page .mt__cap-tile > span, .spe__page .spe__cap-item > span {
  grid-column: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 16px;
  display: inline-flex;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.db__page .db__cap-card:hover > span,
.mt__page .mt__cap-tile:hover > span,
.spe__page .spe__cap-item:hover > span { transform: translateX(3px); }
.db__page .db__cap-card > h3,
.mt__page .mt__cap-tile > h3, .spe__page .spe__cap-item > h3 {
  grid-column: 2;
  margin: 0 0 8px;
  font-size: 19.5px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.db__page .db__cap-card:hover > h3,
.mt__page .mt__cap-tile:hover > h3,
.spe__page .spe__cap-item:hover > h3 { color: var(--kx-a); }
.db__page .db__cap-card > p,
.mt__page .mt__cap-tile > p, .spe__page .spe__cap-item > p {
  grid-column: 2;
  margin: 0;
  max-width: 74ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}

@media (max-width: 991px) {
  .db__page .db__cap-card:nth-child(even),
.mt__page .mt__cap-tile:nth-child(even),
.spe__page .spe__cap-item:nth-child(even) { padding-left: 72px; }
  .db__page .db__cap-card:nth-child(even)::before,
.mt__page .mt__cap-tile:nth-child(even)::before,
.spe__page .spe__cap-item:nth-child(even)::before { width: 48px; top: 36px; }
}
@media (max-width: 767px) {
  .db__page .db__cap-grid, .mt__page .mt__cap-grid,
.spe__page .spe__cap-grid { margin-top: 38px; }
  .db__page .db__cap-card, .mt__page .mt__cap-tile,
.spe__page .spe__cap-item { grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 22px 0; }
  .db__page .db__cap-card:nth-child(even),
.mt__page .mt__cap-tile:nth-child(even),
.spe__page .spe__cap-item:nth-child(even) { padding-left: 26px; }
  .db__page .db__cap-card:nth-child(even)::before,
.mt__page .mt__cap-tile:nth-child(even)::before,
.spe__page .spe__cap-item:nth-child(even)::before { width: 16px; top: 32px; }
  .db__page .db__cap-card > h3,
.mt__page .mt__cap-tile > h3, .spe__page .spe__cap-item > h3 { font-size: 17.5px; }
  .db__page .db__cap-card > p,
.mt__page .mt__cap-tile > p, .spe__page .spe__cap-item > p { font-size: 14px; max-width: none; }
}

/* ---------- Archetype P :: Bold editorial poster (all insight hubs) ----------
   Was, per page: a ruled table of contents (all five), on top of which
   ait__ separately tried a bento grid, two rail/panel explorers, a
   giant-type accordion, a glass/tilt grid and a connected node diagram,
   and sdh__ separately tried a restrained scroll-motion card grid. None of
   it stuck - approved direction was Swiss-poster styling, first built on
   sdh__ and now carried over verbatim to the other four hubs.
   Now: square corners (no border-radius anywhere), thick ink-black
   outlines, hard offset drop-shadows instead of soft blurred ones,
   oversized bleeding numerals, flat color-blocked icon plates (one flat
   hue per card, not a gradient), uppercase tracked-out headings, and a
   plain underlined text index instead of pill-chip links. Cards are
   different widths, staggered at different heights and each rotated a
   degree or two - confident and asymmetric rather than a tidy grid - and
   straighten up on hover. sdh__ has 3 topics and keeps its original
   3-card rhythm (kx-a / kx-a2 / kx-h, ending on the dark anchor card);
   ait__/bih__/cdh__/dth__ have 4 and use a 4-card rhythm (kx-a / kx-a2 /
   kx-a3 / kx-h) with its own stagger/rotation pattern. Every other rule
   in this block - the frame, the bleeding numeral, the head/body/links
   styling - is identical across all five and combined into one selector
   list.
   -------------------------------------------------------------------------- */
.ait__page .ait__topics, .bih__page .bih__topics, .cdh__page .cdh__topics,
.dth__page .dth__topics, .sdh__page .sdh__topics { background: #fff; }

.ait__page .ait__poster-wall, .bih__page .bih__poster-wall, .cdh__page .cdh__poster-wall,
.dth__page .dth__poster-wall, .sdh__page .sdh__poster-wall, .cr__page .cr__poster-wall { display: flex; align-items: flex-start; gap: 26px; margin-top: 68px; }

.ait__page .ait__poster-card, .bih__page .bih__poster-card, .cdh__page .cdh__poster-card,
.dth__page .dth__poster-card, .sdh__page .sdh__poster-card, .cr__page .cr__poster-card {
  position: relative;
  background: #fff;
  border: 3px solid var(--kx-h);
  box-shadow: 10px 10px 0 var(--pc);
  transition: transform .35s ease, box-shadow .35s ease;
}
.ait__page .ait__poster-card:hover, .bih__page .bih__poster-card:hover, .cdh__page .cdh__poster-card:hover,
.dth__page .dth__poster-card:hover, .sdh__page .sdh__poster-card:hover, .cr__page .cr__poster-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 16px 16px 0 var(--pc); }

.sdh__page .sdh__poster-card:nth-child(1) { --pc: var(--kx-a); flex: 0 0 40%; transform: rotate(-1.4deg); }
.sdh__page .sdh__poster-card:nth-child(2) { --pc: var(--kx-a2); flex: 0 0 30%; margin-top: 54px; transform: rotate(1.7deg); }
.sdh__page .sdh__poster-card:nth-child(3) { --pc: var(--kx-h); flex: 1 1 auto; margin-top: 96px; transform: rotate(-1deg); }

.ait__page .ait__poster-card:nth-child(1), .bih__page .bih__poster-card:nth-child(1), .cdh__page .cdh__poster-card:nth-child(1),
.dth__page .dth__poster-card:nth-child(1) { --pc: var(--kx-a); flex: 0 0 30%; transform: rotate(-1.4deg); }
.ait__page .ait__poster-card:nth-child(2), .bih__page .bih__poster-card:nth-child(2), .cdh__page .cdh__poster-card:nth-child(2),
.dth__page .dth__poster-card:nth-child(2) { --pc: var(--kx-a2); flex: 0 0 23%; margin-top: 60px; transform: rotate(1.6deg); }
.ait__page .ait__poster-card:nth-child(3), .bih__page .bih__poster-card:nth-child(3), .cdh__page .cdh__poster-card:nth-child(3),
.dth__page .dth__poster-card:nth-child(3) { --pc: var(--kx-a3); flex: 0 0 23%; margin-top: 24px; transform: rotate(-1deg); }
.ait__page .ait__poster-card:nth-child(4), .bih__page .bih__poster-card:nth-child(4), .cdh__page .cdh__poster-card:nth-child(4),
.dth__page .dth__poster-card:nth-child(4) { --pc: var(--kx-h); flex: 1 1 auto; margin-top: 82px; transform: rotate(1.3deg); }

.ait__page .ait__poster-head, .bih__page .bih__poster-head, .cdh__page .cdh__poster-head,
.dth__page .dth__poster-head, .sdh__page .sdh__poster-head, .cr__page .cr__poster-head { position: relative; overflow: hidden; padding: 30px 26px 66px; background: var(--pc); }
.ait__page .ait__poster-num, .bih__page .bih__poster-num, .cdh__page .cdh__poster-num,
.dth__page .dth__poster-num, .sdh__page .sdh__poster-num, .cr__page .cr__poster-num {
  position: absolute;
  right: -8px;
  bottom: -34px;
  font-size: 148px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ait__page .ait__poster-ico, .bih__page .bih__poster-ico, .cdh__page .cdh__poster-ico,
.dth__page .dth__poster-ico, .sdh__page .sdh__poster-ico, .cr__page .cr__poster-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: #fff;
  color: var(--pc);
  font-size: 22px;
}

.ait__page .ait__poster-body, .bih__page .bih__poster-body, .cdh__page .cdh__poster-body,
.dth__page .dth__poster-body, .sdh__page .sdh__poster-body, .cr__page .cr__poster-body { padding: 30px 28px 34px; }
.ait__page .ait__poster-body h3, .bih__page .bih__poster-body h3, .cdh__page .cdh__poster-body h3,
.dth__page .dth__poster-body h3, .sdh__page .sdh__poster-body h3, .cr__page .cr__poster-body h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--kx-h);
}
.ait__page .ait__poster-body p, .bih__page .bih__poster-body p, .cdh__page .cdh__poster-body p,
.dth__page .dth__poster-body p, .sdh__page .sdh__poster-body p, .cr__page .cr__poster-body p { margin: 0 0 26px; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--kx-t); }

.ait__page .ait__topic-links, .bih__page .bih__topic-links, .cdh__page .cdh__topic-links,
.dth__page .dth__topic-links, .sdh__page .sdh__topic-links { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 2px solid var(--kx-h); }
.ait__page .ait__topic-links li, .bih__page .bih__topic-links li, .cdh__page .cdh__topic-links li,
.dth__page .dth__topic-links li, .sdh__page .sdh__topic-links li { margin: 0; padding: 0; border: 0; }
.ait__page .ait__topic-links li::before, .bih__page .bih__topic-links li::before, .cdh__page .cdh__topic-links li::before,
.dth__page .dth__topic-links li::before, .sdh__page .sdh__topic-links li::before,
.ait__page .ait__topic-links li a::before, .bih__page .bih__topic-links li a::before, .cdh__page .cdh__topic-links li a::before,
.dth__page .dth__topic-links li a::before, .sdh__page .sdh__topic-links li a::before { content: none; display: none; }
.ait__page .ait__topic-links li a, .bih__page .bih__topic-links li a, .cdh__page .cdh__topic-links li a,
.dth__page .dth__topic-links li a, .sdh__page .sdh__topic-links li a {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--kx-h);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--kx-b);
  transition: color .25s ease, text-decoration-color .25s ease;
}
.ait__page .ait__topic-links li a:hover, .bih__page .bih__topic-links li a:hover, .cdh__page .cdh__topic-links li a:hover,
.dth__page .dth__topic-links li a:hover, .sdh__page .sdh__topic-links li a:hover { color: var(--pc); text-decoration-color: var(--pc); }

@media (max-width: 991px) {
  .ait__page .ait__poster-wall, .bih__page .bih__poster-wall, .cdh__page .cdh__poster-wall,
  .dth__page .dth__poster-wall, .sdh__page .sdh__poster-wall, .cr__page .cr__poster-wall { flex-direction: column; gap: 34px; margin-top: 48px; }
  .ait__page .ait__poster-card:nth-child(1), .ait__page .ait__poster-card:nth-child(2), .ait__page .ait__poster-card:nth-child(3), .ait__page .ait__poster-card:nth-child(4),
  .bih__page .bih__poster-card:nth-child(1), .bih__page .bih__poster-card:nth-child(2), .bih__page .bih__poster-card:nth-child(3), .bih__page .bih__poster-card:nth-child(4),
  .cdh__page .cdh__poster-card:nth-child(1), .cdh__page .cdh__poster-card:nth-child(2), .cdh__page .cdh__poster-card:nth-child(3), .cdh__page .cdh__poster-card:nth-child(4),
  .dth__page .dth__poster-card:nth-child(1), .dth__page .dth__poster-card:nth-child(2), .dth__page .dth__poster-card:nth-child(3), .dth__page .dth__poster-card:nth-child(4),
  .sdh__page .sdh__poster-card:nth-child(1), .sdh__page .sdh__poster-card:nth-child(2), .sdh__page .sdh__poster-card:nth-child(3),
  .cr__page .cr__poster-card:nth-child(1), .cr__page .cr__poster-card:nth-child(2), .cr__page .cr__poster-card:nth-child(3) { flex: 1 1 auto; margin-top: 0; transform: rotate(0deg); }
  .ait__page .ait__poster-card:hover, .bih__page .bih__poster-card:hover, .cdh__page .cdh__poster-card:hover,
  .dth__page .dth__poster-card:hover, .sdh__page .sdh__poster-card:hover, .cr__page .cr__poster-card:hover { transform: translateY(-4px); }
  .ait__page .ait__poster-num, .bih__page .bih__poster-num, .cdh__page .cdh__poster-num,
  .dth__page .dth__poster-num, .sdh__page .sdh__poster-num, .cr__page .cr__poster-num { font-size: 120px; }
}
@media (max-width: 767px) {
  .ait__page .ait__poster-head, .bih__page .bih__poster-head, .cdh__page .cdh__poster-head,
  .dth__page .dth__poster-head, .sdh__page .sdh__poster-head, .cr__page .cr__poster-head { padding: 24px 22px 54px; }
  .ait__page .ait__poster-num, .bih__page .bih__poster-num, .cdh__page .cdh__poster-num,
  .dth__page .dth__poster-num, .sdh__page .sdh__poster-num, .cr__page .cr__poster-num { font-size: 96px; bottom: -22px; }
  .ait__page .ait__poster-body, .bih__page .bih__poster-body, .cdh__page .cdh__poster-body,
  .dth__page .dth__poster-body, .sdh__page .sdh__poster-body, .cr__page .cr__poster-body { padding: 24px 22px 28px; }
}

/* ---------- Archetype P, soft pastel card variant (Digital Transformation hub only) ----------
   Client shared a reference image (rounded pastel cards, gradient/angled
   header, dark-on-pastel icon tile, dotted texture, soft colored shadow,
   near-aligned cards with only a hint of tilt, bulleted link list with no
   arrows) and asked to get close to it on one page first. No copy changed
   here - same headings, descriptions and article links as always - only
   the shell around them. Kept out: the reference's invented "Learn more"
   button and its three-word taglines, since neither maps to real content
   or a real link target on this page; flag those as follow-ups if wanted.
   Overrides the shared Archetype P poster rules for .dth__page only - the
   other four hubs are untouched.
   -------------------------------------------------------------------------- */
.dth__page .dth__poster-wall { gap: 22px; }
.dth__page .dth__poster-card {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .28), 0 4px 10px rgba(15, 23, 42, .06);
}
.dth__page .dth__poster-card:hover { box-shadow: 0 30px 56px -16px rgba(15, 23, 42, .32), 0 6px 14px rgba(15, 23, 42, .08); }
.dth__page .dth__poster-card:nth-child(1) { --pc: #cfe4fd; --pcd: #1d4ed8; flex: 1 1 0; transform: rotate(-1deg); margin-top: 0; }
.dth__page .dth__poster-card:nth-child(2) { --pc: #c8f3da; --pcd: #15803d; flex: 1 1 0; transform: rotate(1deg); margin-top: 16px; }
.dth__page .dth__poster-card:nth-child(3) { --pc: #aef0e2; --pcd: #0f766e; flex: 1 1 0; transform: rotate(-.6deg); margin-top: 2px; }
.dth__page .dth__poster-card:nth-child(4) { --pc: #e3daf9; --pcd: #6d28d9; flex: 1 1 0; transform: rotate(1.1deg); margin-top: 20px; }

.dth__page .dth__poster-head {
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1.4px, transparent 1.5px),
                     linear-gradient(150deg, color-mix(in srgb, var(--pc) 45%, #fff) 0%, var(--pc) 100%);
  background-size: 14px 14px, 100% 100%;
}
.dth__page .dth__poster-num { color: color-mix(in srgb, var(--pcd) 24%, transparent); }
.dth__page .dth__poster-ico { border-radius: 14px; color: var(--pcd); }

.dth__page .dth__topic-links { border-top-color: var(--kx-b); }
.dth__page .dth__topic-links li a { display: inline-flex; align-items: center; gap: 10px; color: var(--kx-t); text-decoration: none; }
.dth__page .dth__topic-links li a::before { content: ""; display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pcd); }
.dth__page .dth__topic-links li a::after { content: none; }
.dth__page .dth__topic-links li a:hover { color: var(--pcd); text-decoration: none; }

/* ---------- Archetype P, soft pastel card variant (remaining insight hubs) ----------
   Same treatment approved on dth__, now carried over to the other four
   insight hubs. Shared mechanics (card shape, shadow, gradient+dot header,
   numeral tint formula, icon tile, bulleted link list, light divider,
   muted link text) are combined into one selector list across
   ait__/bih__/cdh__/sdh__; only the --pc/--pcd color pairs and the
   per-card stagger differ, since sdh__ has 3 cards instead of 4. No copy
   changed on any of these pages - same headings, descriptions and article
   links as before.
   -------------------------------------------------------------------------- */
.ait__page .ait__poster-wall, .bih__page .bih__poster-wall, .cdh__page .cdh__poster-wall,
.sdh__page .sdh__poster-wall, .cr__page .cr__poster-wall { gap: 22px; }
.ait__page .ait__poster-card, .bih__page .bih__poster-card, .cdh__page .cdh__poster-card,
.sdh__page .sdh__poster-card, .cr__page .cr__poster-card {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .28), 0 4px 10px rgba(15, 23, 42, .06);
}
.ait__page .ait__poster-card:hover, .bih__page .bih__poster-card:hover, .cdh__page .cdh__poster-card:hover,
.sdh__page .sdh__poster-card:hover, .cr__page .cr__poster-card:hover { box-shadow: 0 30px 56px -16px rgba(15, 23, 42, .32), 0 6px 14px rgba(15, 23, 42, .08); }

.ait__page .ait__poster-card:nth-child(1) { --pc: #cfe4fd; --pcd: #1d4ed8; flex: 1 1 0; transform: rotate(-1deg); margin-top: 0; }
.ait__page .ait__poster-card:nth-child(2) { --pc: #e3daf9; --pcd: #6d28d9; flex: 1 1 0; transform: rotate(1deg); margin-top: 16px; }
.ait__page .ait__poster-card:nth-child(3) { --pc: #bae6fd; --pcd: #0369a1; flex: 1 1 0; transform: rotate(-.6deg); margin-top: 2px; }
.ait__page .ait__poster-card:nth-child(4) { --pc: #fbcfe8; --pcd: #be185d; flex: 1 1 0; transform: rotate(1.1deg); margin-top: 20px; }

.bih__page .bih__poster-card:nth-child(1) { --pc: #cfe4fd; --pcd: #1d4ed8; flex: 1 1 0; transform: rotate(-1deg); margin-top: 0; }
.bih__page .bih__poster-card:nth-child(2) { --pc: #fdedc9; --pcd: #a16207; flex: 1 1 0; transform: rotate(1deg); margin-top: 16px; }
.bih__page .bih__poster-card:nth-child(3) { --pc: #fed7aa; --pcd: #c2410c; flex: 1 1 0; transform: rotate(-.6deg); margin-top: 2px; }
.bih__page .bih__poster-card:nth-child(4) { --pc: #fbcfe8; --pcd: #be185d; flex: 1 1 0; transform: rotate(1.1deg); margin-top: 20px; }

.cdh__page .cdh__poster-card:nth-child(1) { --pc: #cfe4fd; --pcd: #1d4ed8; flex: 1 1 0; transform: rotate(-1deg); margin-top: 0; }
.cdh__page .cdh__poster-card:nth-child(2) { --pc: #cffafe; --pcd: #0e7490; flex: 1 1 0; transform: rotate(1deg); margin-top: 16px; }
.cdh__page .cdh__poster-card:nth-child(3) { --pc: #aef0e2; --pcd: #0f766e; flex: 1 1 0; transform: rotate(-.6deg); margin-top: 2px; }
.cdh__page .cdh__poster-card:nth-child(4) { --pc: #e3daf9; --pcd: #6d28d9; flex: 1 1 0; transform: rotate(1.1deg); margin-top: 20px; }

.sdh__page .sdh__poster-card:nth-child(1) { --pc: #aef0e2; --pcd: #0f766e; flex: 1 1 0; transform: rotate(-1deg); margin-top: 0; }
.sdh__page .sdh__poster-card:nth-child(2) { --pc: #fdedc9; --pcd: #a16207; flex: 1 1 0; transform: rotate(1deg); margin-top: 16px; }
.sdh__page .sdh__poster-card:nth-child(3) { --pc: #e3daf9; --pcd: #6d28d9; flex: 1 1 0; transform: rotate(-.6deg); margin-top: 2px; }

.cr__page .cr__poster-card:nth-child(1) { --pc: #cfe4fd; --pcd: #1d4ed8; flex: 1 1 0; transform: rotate(-1deg); margin-top: 0; }
.cr__page .cr__poster-card:nth-child(2) { --pc: #e3daf9; --pcd: #6d28d9; flex: 1 1 0; transform: rotate(1deg); margin-top: 16px; }
.cr__page .cr__poster-card:nth-child(3) { --pc: #bae6fd; --pcd: #0369a1; flex: 1 1 0; transform: rotate(-.6deg); margin-top: 2px; }

.ait__page .ait__poster-head, .bih__page .bih__poster-head, .cdh__page .cdh__poster-head,
.sdh__page .sdh__poster-head, .cr__page .cr__poster-head {
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1.4px, transparent 1.5px),
                     linear-gradient(150deg, color-mix(in srgb, var(--pc) 45%, #fff) 0%, var(--pc) 100%);
  background-size: 14px 14px, 100% 100%;
}
.ait__page .ait__poster-num, .bih__page .bih__poster-num, .cdh__page .cdh__poster-num,
.sdh__page .sdh__poster-num, .cr__page .cr__poster-num { color: color-mix(in srgb, var(--pcd) 24%, transparent); }
.ait__page .ait__poster-ico, .bih__page .bih__poster-ico, .cdh__page .cdh__poster-ico,
.sdh__page .sdh__poster-ico, .cr__page .cr__poster-ico { border-radius: 14px; color: var(--pcd); }

.ait__page .ait__topic-links, .bih__page .bih__topic-links, .cdh__page .cdh__topic-links,
.sdh__page .sdh__topic-links { border-top-color: var(--kx-b); }
.ait__page .ait__topic-links li a, .bih__page .bih__topic-links li a, .cdh__page .cdh__topic-links li a,
.sdh__page .sdh__topic-links li a { display: inline-flex; align-items: center; gap: 10px; color: var(--kx-t); text-decoration: none; }
.ait__page .ait__topic-links li a::before, .bih__page .bih__topic-links li a::before, .cdh__page .cdh__topic-links li a::before,
.sdh__page .sdh__topic-links li a::before { content: ""; display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pcd); }
.ait__page .ait__topic-links li a::after, .bih__page .bih__topic-links li a::after, .cdh__page .cdh__topic-links li a::after,
.sdh__page .sdh__topic-links li a::after { content: none; }
.ait__page .ait__topic-links li a:hover, .bih__page .bih__topic-links li a:hover, .cdh__page .cdh__topic-links li a:hover,
.sdh__page .sdh__topic-links li a:hover { color: var(--pcd); text-decoration: none; }

@media (max-width: 991px) {
  .ait__page .ait__poster-card, .bih__page .bih__poster-card, .cdh__page .cdh__poster-card, .sdh__page .sdh__poster-card,
  .dth__page .dth__poster-card, .cr__page .cr__poster-card { border-radius: 20px; }
}

/* ============================================================
   LONG TAIL - one-off card grids, 94 components over 57 pages
   ------------------------------------------------------------
   Assigned by the item's child structure, with the constraint
   that no page ever receives the same archetype twice (wave-1
   archetypes on that page count as taken, and close cousins
   are treated as taken too). Skipped on purpose: flip cards,
   gauge/sparkline visuals, the rack illustration, the contact
   options grid and the case-study compositions.
   ============================================================ */

/* ---------- tail :: baseline definition rows ---------- */
.cds__page .cds__use-item, .dgov__page .dgov__caps-item, .itsc__page .itsc__trig-tile,
.process__page .process__principle-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.cds__page .cds__use-item:hover, .dgov__page .dgov__caps-item:hover, .itsc__page .itsc__trig-tile:hover,
.process__page .process__principle-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.cds__page .cds__use-item::before, .dgov__page .dgov__caps-item::before,
.itsc__page .itsc__trig-tile::before, .process__page .process__principle-card::before { content: none; display: none; }
.cds__page .cds__use-item::after, .dgov__page .dgov__caps-item::after,
.itsc__page .itsc__trig-tile::after, .process__page .process__principle-card::after { content: none; display: none; }

.cds__page .cds__use-grid, .dgov__page .dgov__caps-group-grid, .itsc__page .itsc__trig-grid,
.process__page .process__principle-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.cds__page .cds__use-item, .dgov__page .dgov__caps-item, .itsc__page .itsc__trig-tile,
.process__page .process__principle-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 250px) minmax(0, 1fr);
  column-gap: 26px;
  align-items: baseline;
  padding: 26px 2px;
  border-bottom: 1px solid var(--kx-b);
  transition: padding-left .45s cubic-bezier(.22, .61, .36, 1);
}
.cds__page .cds__use-item:hover, .dgov__page .dgov__caps-item:hover, .itsc__page .itsc__trig-tile:hover,
.process__page .process__principle-card:hover { padding-left: 12px; }
.cds__page .cds__use-item > span:first-of-type, .dgov__page .dgov__caps-item > span:first-of-type,
.itsc__page .itsc__trig-tile > span:first-of-type,
.process__page .process__principle-card > span:first-of-type {
  grid-column: 1;
  justify-self: start;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 15px;
  display: inline-flex;
}
.cds__page .cds__use-item > h3, .cds__page .cds__use-item > h4, .dgov__page .dgov__caps-item > h3,
.dgov__page .dgov__caps-item > h4, .itsc__page .itsc__trig-tile > h3, .itsc__page .itsc__trig-tile > h4,
.process__page .process__principle-card > h3, .process__page .process__principle-card > h4 {
  grid-column: 2;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kx-h);
}
.cds__page .cds__use-item > p, .dgov__page .dgov__caps-item > p, .itsc__page .itsc__trig-tile > p,
.process__page .process__principle-card > p {
  grid-column: 3;
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.cds__page .cds__use-item > p:last-child, .dgov__page .dgov__caps-item > p:last-child,
.itsc__page .itsc__trig-tile > p:last-child, .process__page .process__principle-card > p:last-child { margin-bottom: 0; }
@media (max-width: 991px) {
  .cds__page .cds__use-item, .dgov__page .dgov__caps-item, .itsc__page .itsc__trig-tile,
.process__page .process__principle-card { grid-template-columns: 26px minmax(0, 1fr); row-gap: 9px; }
  .cds__page .cds__use-item > p, .dgov__page .dgov__caps-item > p, .itsc__page .itsc__trig-tile > p,
.process__page .process__principle-card > p { grid-column: 2; }
}

/* ---------- tail :: bracket frames ---------- */
.aisc__page .aisc__lens-card, .asm__page .asm__health-card, .ai__page .ai__sec-item,
.bde__page .bde__process-card, .clm__page .clm__approach-card, .cdc__page .cdc__principle-card,
.co__page .co__csr-card, .contact__page .contact__svc-card, .cto__page .cto__good-tile,
.deng__page .deng__stage-card, .dgov__page .dgov__coverage-card, .dwh__page .dwh__mart-card,
.db__page .db__fit-card, .dtc__page .dtc__people-tile, .engage__page .engage__principle-card,
.eac__page .eac__good-tile, .ent__page .ent__dash-tile, .fe__page .fe__outcomes-item,
.gov__page .gov__layer-card, .itsc__page .itsc__dim-card, .tcon__page .tcon__indicator-tile,
.tmc__page .tmc__good-tile, .why__page .why__expect-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.aisc__page .aisc__lens-card:hover, .asm__page .asm__health-card:hover, .ai__page .ai__sec-item:hover,
.bde__page .bde__process-card:hover, .clm__page .clm__approach-card:hover,
.cdc__page .cdc__principle-card:hover, .co__page .co__csr-card:hover,
.contact__page .contact__svc-card:hover, .cto__page .cto__good-tile:hover,
.deng__page .deng__stage-card:hover, .dgov__page .dgov__coverage-card:hover,
.dwh__page .dwh__mart-card:hover, .db__page .db__fit-card:hover, .dtc__page .dtc__people-tile:hover,
.engage__page .engage__principle-card:hover, .eac__page .eac__good-tile:hover,
.ent__page .ent__dash-tile:hover, .fe__page .fe__outcomes-item:hover, .gov__page .gov__layer-card:hover,
.itsc__page .itsc__dim-card:hover, .tcon__page .tcon__indicator-tile:hover,
.tmc__page .tmc__good-tile:hover, .why__page .why__expect-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.aisc__page .aisc__lens-card::before, .asm__page .asm__health-card::before,
.ai__page .ai__sec-item::before, .bde__page .bde__process-card::before,
.clm__page .clm__approach-card::before, .cdc__page .cdc__principle-card::before,
.co__page .co__csr-card::before, .contact__page .contact__svc-card::before,
.cto__page .cto__good-tile::before, .deng__page .deng__stage-card::before,
.dgov__page .dgov__coverage-card::before, .dwh__page .dwh__mart-card::before,
.db__page .db__fit-card::before, .dtc__page .dtc__people-tile::before,
.engage__page .engage__principle-card::before, .eac__page .eac__good-tile::before,
.ent__page .ent__dash-tile::before, .fe__page .fe__outcomes-item::before,
.gov__page .gov__layer-card::before, .itsc__page .itsc__dim-card::before,
.tcon__page .tcon__indicator-tile::before, .tmc__page .tmc__good-tile::before,
.why__page .why__expect-card::before { content: none; display: none; }
.aisc__page .aisc__lens-card::after, .asm__page .asm__health-card::after, .ai__page .ai__sec-item::after,
.bde__page .bde__process-card::after, .clm__page .clm__approach-card::after,
.cdc__page .cdc__principle-card::after, .co__page .co__csr-card::after,
.contact__page .contact__svc-card::after, .cto__page .cto__good-tile::after,
.deng__page .deng__stage-card::after, .dgov__page .dgov__coverage-card::after,
.dwh__page .dwh__mart-card::after, .db__page .db__fit-card::after, .dtc__page .dtc__people-tile::after,
.engage__page .engage__principle-card::after, .eac__page .eac__good-tile::after,
.ent__page .ent__dash-tile::after, .fe__page .fe__outcomes-item::after,
.gov__page .gov__layer-card::after, .itsc__page .itsc__dim-card::after,
.tcon__page .tcon__indicator-tile::after, .tmc__page .tmc__good-tile::after,
.why__page .why__expect-card::after { content: none; display: none; }

.aisc__page .aisc__lens-grid, .asm__page .asm__health-grid, .ai__page .ai__sec-grid,
.bde__page .bde__process-grid, .clm__page .clm__approach-grid, .cdc__page .cdc__principles-grid,
.co__page .co__csr-grid, .contact__page .contact__svc-grid, .cto__page .cto__good-grid,
.deng__page .deng__stages-grid, .dgov__page .dgov__coverage-grid, .dwh__page .dwh__marts-grid,
.db__page .db__fit-grid, .dtc__page .dtc__people-grid, .engage__page .engage__consistent-grid,
.eac__page .eac__good-grid, .ent__page .ent__dash-grid, .fe__page .fe__outcomes-grid,
.gov__page .gov__layer-row, .itsc__page .itsc__dim-grid, .tcon__page .tcon__indicator-grid,
.tmc__page .tmc__good-grid, .why__page .why__expect-grid { gap: 30px 26px; }
.aisc__page .aisc__lens-card, .asm__page .asm__health-card, .ai__page .ai__sec-item,
.bde__page .bde__process-card, .clm__page .clm__approach-card, .cdc__page .cdc__principle-card,
.co__page .co__csr-card, .contact__page .contact__svc-card, .cto__page .cto__good-tile,
.deng__page .deng__stage-card, .dgov__page .dgov__coverage-card, .dwh__page .dwh__mart-card,
.db__page .db__fit-card, .dtc__page .dtc__people-tile, .engage__page .engage__principle-card,
.eac__page .eac__good-tile, .ent__page .ent__dash-tile, .fe__page .fe__outcomes-item,
.gov__page .gov__layer-card, .itsc__page .itsc__dim-card, .tcon__page .tcon__indicator-tile,
.tmc__page .tmc__good-tile, .why__page .why__expect-card {
  position: relative;
  padding: 30px 28px 28px;
  transition: background .45s ease;
}
.aisc__page .aisc__lens-card::before, .asm__page .asm__health-card::before,
.ai__page .ai__sec-item::before, .bde__page .bde__process-card::before,
.clm__page .clm__approach-card::before, .cdc__page .cdc__principle-card::before,
.co__page .co__csr-card::before, .contact__page .contact__svc-card::before,
.cto__page .cto__good-tile::before, .deng__page .deng__stage-card::before,
.dgov__page .dgov__coverage-card::before, .dwh__page .dwh__mart-card::before,
.db__page .db__fit-card::before, .dtc__page .dtc__people-tile::before,
.engage__page .engage__principle-card::before, .eac__page .eac__good-tile::before,
.ent__page .ent__dash-tile::before, .fe__page .fe__outcomes-item::before,
.gov__page .gov__layer-card::before, .itsc__page .itsc__dim-card::before,
.tcon__page .tcon__indicator-tile::before, .tmc__page .tmc__good-tile::before,
.why__page .why__expect-card::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-left: 2px solid var(--kx-a);
  border-top: 2px solid var(--kx-a);
  transition: width .45s cubic-bezier(.22, .61, .36, 1),
              height .45s cubic-bezier(.22, .61, .36, 1);
}
.aisc__page .aisc__lens-card::after, .asm__page .asm__health-card::after, .ai__page .ai__sec-item::after,
.bde__page .bde__process-card::after, .clm__page .clm__approach-card::after,
.cdc__page .cdc__principle-card::after, .co__page .co__csr-card::after,
.contact__page .contact__svc-card::after, .cto__page .cto__good-tile::after,
.deng__page .deng__stage-card::after, .dgov__page .dgov__coverage-card::after,
.dwh__page .dwh__mart-card::after, .db__page .db__fit-card::after, .dtc__page .dtc__people-tile::after,
.engage__page .engage__principle-card::after, .eac__page .eac__good-tile::after,
.ent__page .ent__dash-tile::after, .fe__page .fe__outcomes-item::after,
.gov__page .gov__layer-card::after, .itsc__page .itsc__dim-card::after,
.tcon__page .tcon__indicator-tile::after, .tmc__page .tmc__good-tile::after,
.why__page .why__expect-card::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--kx-b);
  border-bottom: 2px solid var(--kx-b);
  transition: width .45s cubic-bezier(.22, .61, .36, 1),
              height .45s cubic-bezier(.22, .61, .36, 1),
              border-color .45s ease;
}
.aisc__page .aisc__lens-card:hover::before, .asm__page .asm__health-card:hover::before,
.ai__page .ai__sec-item:hover::before, .bde__page .bde__process-card:hover::before,
.clm__page .clm__approach-card:hover::before, .cdc__page .cdc__principle-card:hover::before,
.co__page .co__csr-card:hover::before, .contact__page .contact__svc-card:hover::before,
.cto__page .cto__good-tile:hover::before, .deng__page .deng__stage-card:hover::before,
.dgov__page .dgov__coverage-card:hover::before, .dwh__page .dwh__mart-card:hover::before,
.db__page .db__fit-card:hover::before, .dtc__page .dtc__people-tile:hover::before,
.engage__page .engage__principle-card:hover::before, .eac__page .eac__good-tile:hover::before,
.ent__page .ent__dash-tile:hover::before, .fe__page .fe__outcomes-item:hover::before,
.gov__page .gov__layer-card:hover::before, .itsc__page .itsc__dim-card:hover::before,
.tcon__page .tcon__indicator-tile:hover::before, .tmc__page .tmc__good-tile:hover::before,
.why__page .why__expect-card:hover::before { width: 30px; height: 30px; }
.aisc__page .aisc__lens-card:hover::after, .asm__page .asm__health-card:hover::after,
.ai__page .ai__sec-item:hover::after, .bde__page .bde__process-card:hover::after,
.clm__page .clm__approach-card:hover::after, .cdc__page .cdc__principle-card:hover::after,
.co__page .co__csr-card:hover::after, .contact__page .contact__svc-card:hover::after,
.cto__page .cto__good-tile:hover::after, .deng__page .deng__stage-card:hover::after,
.dgov__page .dgov__coverage-card:hover::after, .dwh__page .dwh__mart-card:hover::after,
.db__page .db__fit-card:hover::after, .dtc__page .dtc__people-tile:hover::after,
.engage__page .engage__principle-card:hover::after, .eac__page .eac__good-tile:hover::after,
.ent__page .ent__dash-tile:hover::after, .fe__page .fe__outcomes-item:hover::after,
.gov__page .gov__layer-card:hover::after, .itsc__page .itsc__dim-card:hover::after,
.tcon__page .tcon__indicator-tile:hover::after, .tmc__page .tmc__good-tile:hover::after,
.why__page .why__expect-card:hover::after { width: 30px; height: 30px; border-color: var(--kx-a); }
.aisc__page .aisc__lens-card:hover, .asm__page .asm__health-card:hover, .ai__page .ai__sec-item:hover,
.bde__page .bde__process-card:hover, .clm__page .clm__approach-card:hover,
.cdc__page .cdc__principle-card:hover, .co__page .co__csr-card:hover,
.contact__page .contact__svc-card:hover, .cto__page .cto__good-tile:hover,
.deng__page .deng__stage-card:hover, .dgov__page .dgov__coverage-card:hover,
.dwh__page .dwh__mart-card:hover, .db__page .db__fit-card:hover, .dtc__page .dtc__people-tile:hover,
.engage__page .engage__principle-card:hover, .eac__page .eac__good-tile:hover,
.ent__page .ent__dash-tile:hover, .fe__page .fe__outcomes-item:hover, .gov__page .gov__layer-card:hover,
.itsc__page .itsc__dim-card:hover, .tcon__page .tcon__indicator-tile:hover,
.tmc__page .tmc__good-tile:hover, .why__page .why__expect-card:hover { background: var(--kx-bg); }
.aisc__page .aisc__lens-card > span:first-of-type, .asm__page .asm__health-card > span:first-of-type,
.ai__page .ai__sec-item > span:first-of-type, .bde__page .bde__process-card > span:first-of-type,
.clm__page .clm__approach-card > span:first-of-type,
.cdc__page .cdc__principle-card > span:first-of-type, .co__page .co__csr-card > span:first-of-type,
.contact__page .contact__svc-card > span:first-of-type, .cto__page .cto__good-tile > span:first-of-type,
.deng__page .deng__stage-card > span:first-of-type,
.dgov__page .dgov__coverage-card > span:first-of-type, .dwh__page .dwh__mart-card > span:first-of-type,
.db__page .db__fit-card > span:first-of-type, .dtc__page .dtc__people-tile > span:first-of-type,
.engage__page .engage__principle-card > span:first-of-type,
.eac__page .eac__good-tile > span:first-of-type, .ent__page .ent__dash-tile > span:first-of-type,
.fe__page .fe__outcomes-item > span:first-of-type, .gov__page .gov__layer-card > span:first-of-type,
.itsc__page .itsc__dim-card > span:first-of-type, .tcon__page .tcon__indicator-tile > span:first-of-type,
.tmc__page .tmc__good-tile > span:first-of-type, .why__page .why__expect-card > span:first-of-type {
  width: auto;
  height: auto;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 19px;
  display: inline-flex;
}
.aisc__page .aisc__lens-card > h3, .aisc__page .aisc__lens-card > h4, .asm__page .asm__health-card > h3,
.asm__page .asm__health-card > h4, .ai__page .ai__sec-item > h3, .ai__page .ai__sec-item > h4,
.bde__page .bde__process-card > h3, .bde__page .bde__process-card > h4,
.clm__page .clm__approach-card > h3, .clm__page .clm__approach-card > h4,
.cdc__page .cdc__principle-card > h3, .cdc__page .cdc__principle-card > h4, .co__page .co__csr-card > h3,
.co__page .co__csr-card > h4, .contact__page .contact__svc-card > h3,
.contact__page .contact__svc-card > h4, .cto__page .cto__good-tile > h3, .cto__page .cto__good-tile > h4,
.deng__page .deng__stage-card > h3, .deng__page .deng__stage-card > h4,
.dgov__page .dgov__coverage-card > h3, .dgov__page .dgov__coverage-card > h4,
.dwh__page .dwh__mart-card > h3, .dwh__page .dwh__mart-card > h4, .db__page .db__fit-card > h3,
.db__page .db__fit-card > h4, .dtc__page .dtc__people-tile > h3, .dtc__page .dtc__people-tile > h4,
.engage__page .engage__principle-card > h3, .engage__page .engage__principle-card > h4,
.eac__page .eac__good-tile > h3, .eac__page .eac__good-tile > h4, .ent__page .ent__dash-tile > h3,
.ent__page .ent__dash-tile > h4, .fe__page .fe__outcomes-item > h3, .fe__page .fe__outcomes-item > h4,
.gov__page .gov__layer-card > h3, .gov__page .gov__layer-card > h4, .itsc__page .itsc__dim-card > h3,
.itsc__page .itsc__dim-card > h4, .tcon__page .tcon__indicator-tile > h3,
.tcon__page .tcon__indicator-tile > h4, .tmc__page .tmc__good-tile > h3, .tmc__page .tmc__good-tile > h4,
.why__page .why__expect-card > h3, .why__page .why__expect-card > h4 {
  margin: 0 0 10px;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aisc__page .aisc__lens-card > h3:hover, .aisc__page .aisc__lens-card > h4:hover,
.asm__page .asm__health-card > h3:hover, .asm__page .asm__health-card > h4:hover,
.ai__page .ai__sec-item > h3:hover, .ai__page .ai__sec-item > h4:hover,
.bde__page .bde__process-card > h3:hover, .bde__page .bde__process-card > h4:hover,
.clm__page .clm__approach-card > h3:hover, .clm__page .clm__approach-card > h4:hover,
.cdc__page .cdc__principle-card > h3:hover, .cdc__page .cdc__principle-card > h4:hover,
.co__page .co__csr-card > h3:hover, .co__page .co__csr-card > h4:hover,
.contact__page .contact__svc-card > h3:hover, .contact__page .contact__svc-card > h4:hover,
.cto__page .cto__good-tile > h3:hover, .cto__page .cto__good-tile > h4:hover,
.deng__page .deng__stage-card > h3:hover, .deng__page .deng__stage-card > h4:hover,
.dgov__page .dgov__coverage-card > h3:hover, .dgov__page .dgov__coverage-card > h4:hover,
.dwh__page .dwh__mart-card > h3:hover, .dwh__page .dwh__mart-card > h4:hover,
.db__page .db__fit-card > h3:hover, .db__page .db__fit-card > h4:hover,
.dtc__page .dtc__people-tile > h3:hover, .dtc__page .dtc__people-tile > h4:hover,
.engage__page .engage__principle-card > h3:hover, .engage__page .engage__principle-card > h4:hover,
.eac__page .eac__good-tile > h3:hover, .eac__page .eac__good-tile > h4:hover,
.ent__page .ent__dash-tile > h3:hover, .ent__page .ent__dash-tile > h4:hover,
.fe__page .fe__outcomes-item > h3:hover, .fe__page .fe__outcomes-item > h4:hover,
.gov__page .gov__layer-card > h3:hover, .gov__page .gov__layer-card > h4:hover,
.itsc__page .itsc__dim-card > h3:hover, .itsc__page .itsc__dim-card > h4:hover,
.tcon__page .tcon__indicator-tile > h3:hover, .tcon__page .tcon__indicator-tile > h4:hover,
.tmc__page .tmc__good-tile > h3:hover, .tmc__page .tmc__good-tile > h4:hover,
.why__page .why__expect-card > h3:hover, .why__page .why__expect-card > h4:hover { color: var(--kx-a); }
.aisc__page .aisc__lens-card > p, .asm__page .asm__health-card > p, .ai__page .ai__sec-item > p,
.bde__page .bde__process-card > p, .clm__page .clm__approach-card > p,
.cdc__page .cdc__principle-card > p, .co__page .co__csr-card > p, .contact__page .contact__svc-card > p,
.cto__page .cto__good-tile > p, .deng__page .deng__stage-card > p, .dgov__page .dgov__coverage-card > p,
.dwh__page .dwh__mart-card > p, .db__page .db__fit-card > p, .dtc__page .dtc__people-tile > p,
.engage__page .engage__principle-card > p, .eac__page .eac__good-tile > p,
.ent__page .ent__dash-tile > p, .fe__page .fe__outcomes-item > p, .gov__page .gov__layer-card > p,
.itsc__page .itsc__dim-card > p, .tcon__page .tcon__indicator-tile > p, .tmc__page .tmc__good-tile > p,
.why__page .why__expect-card > p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
@media (max-width: 767px) {
  .aisc__page .aisc__lens-card, .asm__page .asm__health-card, .ai__page .ai__sec-item,
.bde__page .bde__process-card, .clm__page .clm__approach-card, .cdc__page .cdc__principle-card,
.co__page .co__csr-card, .contact__page .contact__svc-card, .cto__page .cto__good-tile,
.deng__page .deng__stage-card, .dgov__page .dgov__coverage-card, .dwh__page .dwh__mart-card,
.db__page .db__fit-card, .dtc__page .dtc__people-tile, .engage__page .engage__principle-card,
.eac__page .eac__good-tile, .ent__page .ent__dash-tile, .fe__page .fe__outcomes-item,
.gov__page .gov__layer-card, .itsc__page .itsc__dim-card, .tcon__page .tcon__indicator-tile,
.tmc__page .tmc__good-tile, .why__page .why__expect-card { padding: 26px 22px 24px; }
  .aisc__page .aisc__lens-card > h3, .aisc__page .aisc__lens-card > h4, .asm__page .asm__health-card > h3,
.asm__page .asm__health-card > h4, .ai__page .ai__sec-item > h3, .ai__page .ai__sec-item > h4,
.bde__page .bde__process-card > h3, .bde__page .bde__process-card > h4,
.clm__page .clm__approach-card > h3, .clm__page .clm__approach-card > h4,
.cdc__page .cdc__principle-card > h3, .cdc__page .cdc__principle-card > h4, .co__page .co__csr-card > h3,
.co__page .co__csr-card > h4, .contact__page .contact__svc-card > h3,
.contact__page .contact__svc-card > h4, .cto__page .cto__good-tile > h3, .cto__page .cto__good-tile > h4,
.deng__page .deng__stage-card > h3, .deng__page .deng__stage-card > h4,
.dgov__page .dgov__coverage-card > h3, .dgov__page .dgov__coverage-card > h4,
.dwh__page .dwh__mart-card > h3, .dwh__page .dwh__mart-card > h4, .db__page .db__fit-card > h3,
.db__page .db__fit-card > h4, .dtc__page .dtc__people-tile > h3, .dtc__page .dtc__people-tile > h4,
.engage__page .engage__principle-card > h3, .engage__page .engage__principle-card > h4,
.eac__page .eac__good-tile > h3, .eac__page .eac__good-tile > h4, .ent__page .ent__dash-tile > h3,
.ent__page .ent__dash-tile > h4, .fe__page .fe__outcomes-item > h3, .fe__page .fe__outcomes-item > h4,
.gov__page .gov__layer-card > h3, .gov__page .gov__layer-card > h4, .itsc__page .itsc__dim-card > h3,
.itsc__page .itsc__dim-card > h4, .tcon__page .tcon__indicator-tile > h3,
.tcon__page .tcon__indicator-tile > h4, .tmc__page .tmc__good-tile > h3, .tmc__page .tmc__good-tile > h4,
.why__page .why__expect-card > h3, .why__page .why__expect-card > h4 { font-size: 17px; }
}

/* ---------- ai__page :: AI Security & Governance — restore the radial
   layout ----------
   Overrides the shared "corner-bracket" tail pattern above for this one
   section only (same .ai__page .ai__sec-item / .ai__sec-grid selectors,
   later in cascade, matching specificity), so the other ~20 page types
   sharing that pattern are untouched. The bracket pattern's `transform: none`
   and flattened card/icon styling clobbered this section's bespoke
   rotate/translate radial layout (see section 12 above); this restores the
   white cards, circular icon badges, and the hexagon-around-the-core
   positioning. */
.ai__page .ai__sec-item {
  display: block;
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 16px;
  box-shadow: none;
  padding: 26px 24px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ai__page .ai__sec-item:hover { background: #fff; border-color: rgba(0, 95, 204, .3); box-shadow: 0 22px 46px rgba(28, 30, 43, .09); transform: none; z-index: 3; }
.ai__page .ai__sec-item::before, .ai__page .ai__sec-item::after { content: none; display: none; }
.ai__page .ai__sec-item > span.ai__sec-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 95, 204, .25);
  background: rgba(0, 95, 204, .08);
  color: var(--ac);
  font-size: 20px;
}
.ai__page .ai__sec-item > h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: normal; color: var(--ah); }
.ai__page .ai__sec-item > p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--at); }
.ai__page .ai__sec-grid { gap: 0; }
@media only screen and (min-width: 992px) {
  .ai__page .ai__sec-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    transform: translate(-50%, -50%) rotate(var(--ang)) translate(320px) rotate(calc(-1 * var(--ang)));
  }
  .ai__page .ai__sec-item:hover { transform: translate(-50%, -50%) rotate(var(--ang)) translate(320px) rotate(calc(-1 * var(--ang))) translateY(-6px); }
}
@media only screen and (max-width: 991px) {
  .ai__page .ai__sec-grid { gap: 22px; }
}

/* ---------- why__page :: What You Can Expect — speech-bubble tiles ----------
   Overrides the shared "corner-bracket" tail pattern above for this one
   section only (same .why__page .why__expect-card selectors, later in
   cascade), so the other ~20 page types sharing that pattern are
   untouched. Each expectation reads like a chat message: an avatar
   icon beside the heading, a rounded card, and a small message tail. */
.why__page .why__expect-card {
  --exp-accent: var(--wc);
  border: 1px solid var(--wb);
  border-radius: 20px;
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.why__page .why__expect-card:nth-child(3n+2) { --exp-accent: var(--wc3); }
.why__page .why__expect-card:nth-child(3n+3) { --exp-accent: var(--wc2); }
.why__page .why__expect-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(7, 21, 47, .08); border-color: transparent; }
.why__page .why__expect-card::before { content: none; }
.why__page .why__expect-card::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-right: 1px solid var(--wb);
  border-bottom: 1px solid var(--wb);
  border-radius: 0 0 4px 0;
  transform: rotate(45deg);
  transition: border-color .35s ease;
}
.why__page .why__expect-card:hover::after { background: var(--wbg); border-color: transparent; }
.why__page .why__expect-card > span:first-of-type {
  float: left;
  width: 42px;
  height: 42px;
  margin: 0 14px 14px 0;
  border-radius: 50%;
  background: var(--exp-accent);
  color: #fff;
  font-size: 16px;
  transition: background .35s ease;
}
.why__page .why__expect-card > h3 { padding-top: 10px; overflow: hidden; }
.why__page .why__expect-card > p { clear: both; }

/* ---------- tail :: column rules ---------- */
.why__page .why__journey-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.why__page .why__journey-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.why__page .why__journey-card::before { content: none; display: none; }
.why__page .why__journey-card::after { content: none; display: none; }

.why__page .why__journey-grid { gap: 0; }
.why__page .why__journey-card {
  padding: 4px 30px;
  border-left: 1px solid var(--kx-b);
}
.why__page .why__journey-card:first-child { border-left: 0; padding-left: 0; }
.why__page .why__journey-card > h3,
.why__page .why__journey-card > h4 {
  margin: 0 0 10px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.34;
  color: var(--kx-h);
}
.why__page .why__journey-card > p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
@media (max-width: 767px) {
  .why__page .why__journey-card { padding: 20px 0; border-left: 0; border-top: 1px solid var(--kx-b); }
  .why__page .why__journey-card:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- why__page :: Built for Different Technology Journeys — connector rows ----------
   Overrides the shared "column rules" tail pattern above for this one
   section only (same .why__page .why__journey-card selectors, later in
   cascade), so .lead__page is untouched. Same alignment as the
   Engineering for the Long Term section: dashed-ring icon circle fed
   by a short accent line, a large index number, then title + text,
   with even rows mirrored to sit on the right. */
.why__page .why__journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.why__page .why__journey-card,
.why__page .why__journey-card:first-child {
  --jr-accent: var(--wc);
  position: relative;
  grid-column: 1 / -1;
  justify-self: start;
  display: grid;
  grid-template-columns: 70px max-content;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 6px;
  align-items: center;
  padding: 14px 40px 14px 40px;
  border: 1px solid var(--wb);
  background: #fff;
  border-radius: 18px;
  margin: 0;
  box-shadow: 0 10px 26px rgba(7, 21, 47, .05);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.why__page .why__journey-card:nth-child(3n+2) { --jr-accent: var(--wc3); }
.why__page .why__journey-card:nth-child(3n+3) { --jr-accent: var(--wc2); }
.why__page .why__journey-card::before { content: none; }
.why__page .why__journey-card::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 30px;
  border-radius: 0 17px 17px 0;
  background: var(--jr-accent);
}
.why__page .why__journey-card:hover {
  transform: none;
  box-shadow: 0 16px 34px rgba(7, 21, 47, .09);
  background: #fff;
  border-color: var(--wb);
}
.why__page .why__journey-ico {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0;
  border-radius: 50%;
  background: none;
  color: var(--jr-accent);
  font-size: 42px;
}
.why__page .why__journey-ico::after { content: none; }
.why__page .why__journey-card:hover .why__journey-ico { transform: none; }
.why__page .why__journey-card > h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--wt);
}
.why__page .why__journey-card:hover > h3 { color: var(--wt); }
.why__page .why__journey-card > p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
}
@media (max-width: 767px) {
  .why__page .why__journey-card,
  .why__page .why__journey-card:first-child {
    grid-template-columns: 50px 1fr;
    column-gap: 14px;
    padding: 24px 20px 24px 26px;
  }
  .why__page .why__journey-ico { width: 58px; height: 58px; font-size: 26px; }
  .why__page .why__journey-card > h3 { font-size: 16.5px; }
}
.why__page .why__journey-card:nth-child(even) {
  justify-self: end;
  grid-template-columns: max-content 70px;
  padding: 14px 40px 14px 40px;
}
.why__page .why__journey-card:nth-child(even)::after { right: auto; left: -1px; border-radius: 17px 0 0 17px; }
.why__page .why__journey-card:nth-child(even) .why__journey-ico { grid-column: 2; }
.why__page .why__journey-card:nth-child(even) > h3 { grid-column: 1; text-align: right; }
.why__page .why__journey-card:nth-child(even) > p { grid-column: 1; text-align: right; }
@media (max-width: 767px) {
  .why__page .why__journey-card:nth-child(even) {
    grid-template-columns: 1fr 50px;
    padding: 24px 26px 24px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .why__page .why__journey-card { transition: none !important; }
  .why__page .why__journey-card:hover { transform: none !important; }
}

/* ---------- tail :: directory rows ---------- */
.cds__page .cds__sol-card, .cto__page .cto__domain-card, .svc__page .svc__spot-card,
.tech__page .tech__need-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.cds__page .cds__sol-card:hover, .cto__page .cto__domain-card:hover, .svc__page .svc__spot-card:hover,
.tech__page .tech__need-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.cds__page .cds__sol-card::before, .cto__page .cto__domain-card::before,
.svc__page .svc__spot-card::before, .tech__page .tech__need-card::before { content: none; display: none; }
.cds__page .cds__sol-card::after, .cto__page .cto__domain-card::after, .svc__page .svc__spot-card::after,
.tech__page .tech__need-card::after { content: none; display: none; }

.cds__page .cds__sol-grid, .cto__page .cto__domains-grid, .svc__page .svc__spotlight-grid,
.tech__page .tech__need-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.cds__page .cds__sol-card, .cto__page .cto__domain-card, .svc__page .svc__spot-card,
.tech__page .tech__need-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 270px) minmax(0, 1fr) 26px;
  column-gap: 24px;
  align-items: baseline;
  padding: 26px 2px;
  border-bottom: 1px solid var(--kx-b);
  transition: padding-left .45s cubic-bezier(.22, .61, .36, 1),
              background .45s ease;
}
.cds__page .cds__sol-card:hover, .cto__page .cto__domain-card:hover, .svc__page .svc__spot-card:hover,
.tech__page .tech__need-card:hover { padding-left: 14px; background: var(--kx-bg); }
.cds__page .cds__sol-card > span:first-of-type, .cto__page .cto__domain-card > span:first-of-type,
.svc__page .svc__spot-card > span:first-of-type, .tech__page .tech__need-card > span:first-of-type {
  grid-column: 1;
  justify-self: start;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 15px;
  display: inline-flex;
}
.cds__page .cds__sol-card > h3, .cds__page .cds__sol-card > h4, .cto__page .cto__domain-card > h3,
.cto__page .cto__domain-card > h4, .svc__page .svc__spot-card > h3, .svc__page .svc__spot-card > h4,
.tech__page .tech__need-card > h3, .tech__page .tech__need-card > h4 {
  grid-column: 2;
  margin: 0;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--kx-h);
  transition: color .4s ease;
}
.cds__page .cds__sol-card > h3:hover, .cds__page .cds__sol-card > h4:hover,
.cto__page .cto__domain-card > h3:hover, .cto__page .cto__domain-card > h4:hover,
.svc__page .svc__spot-card > h3:hover, .svc__page .svc__spot-card > h4:hover,
.tech__page .tech__need-card > h3:hover, .tech__page .tech__need-card > h4:hover { color: var(--kx-a); }
.cds__page .cds__sol-card > p, .cto__page .cto__domain-card > p, .svc__page .svc__spot-card > p,
.tech__page .tech__need-card > p {
  grid-column: 3;
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--kx-t);
}
.cds__page .cds__sol-card > a, .cto__page .cto__domain-card > a, .svc__page .svc__spot-card > a,
.tech__page .tech__need-card > a {
  grid-column: 4;
  justify-self: end;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0;
  color: var(--kx-a);
}
.cds__page .cds__sol-card > a::after, .cto__page .cto__domain-card > a::after,
.svc__page .svc__spot-card > a::after, .tech__page .tech__need-card > a::after {
  content: "\2192";
  font-size: 14px;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
  display: inline-block;
}
.cds__page .cds__sol-card:hover > a::after, .cto__page .cto__domain-card:hover > a::after,
.svc__page .svc__spot-card:hover > a::after, .tech__page .tech__need-card:hover > a::after { transform: translateX(5px); }
@media (max-width: 991px) {
  .cds__page .cds__sol-card, .cto__page .cto__domain-card, .svc__page .svc__spot-card,
.tech__page .tech__need-card { grid-template-columns: 26px minmax(0, 1fr) 24px; row-gap: 8px; }
  .cds__page .cds__sol-card > p, .cto__page .cto__domain-card > p, .svc__page .svc__spot-card > p,
.tech__page .tech__need-card > p { grid-column: 2; }
  .cds__page .cds__sol-card > a, .cto__page .cto__domain-card > a, .svc__page .svc__spot-card > a,
.tech__page .tech__need-card > a { grid-column: 3; grid-row: 1; }
}

/* ---------- tail :: ghost-numeral slabs ---------- */
.aisc__page .aisc__good-tile, .be__page .be__api-card, .dt__page .dt__case-card,
.dtc__page .dtc__assess-tile, .eac__page .eac__principle-tile, .fit__page .fit__infra-item,
.food__page .food__infra-item, .fe__page .fe__stack-card, .gov__page .gov__ai-item, .ind__page .ind__cc,
.lead__page .lead__clients-card, .mkt__page .mkt__infra-item, .process__page .process__starting-card,
.re__page .re__infra-item, .su__page .su__infra-item, .why__page .why__eng-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.aisc__page .aisc__good-tile:hover, .be__page .be__api-card:hover, .dt__page .dt__case-card:hover,
.dtc__page .dtc__assess-tile:hover, .eac__page .eac__principle-tile:hover,
.fit__page .fit__infra-item:hover, .food__page .food__infra-item:hover, .fe__page .fe__stack-card:hover,
.gov__page .gov__ai-item:hover, .ind__page .ind__cc:hover, .lead__page .lead__clients-card:hover,
.mkt__page .mkt__infra-item:hover, .process__page .process__starting-card:hover,
.re__page .re__infra-item:hover, .su__page .su__infra-item:hover, .why__page .why__eng-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.aisc__page .aisc__good-tile::before, .be__page .be__api-card::before, .dt__page .dt__case-card::before,
.dtc__page .dtc__assess-tile::before, .eac__page .eac__principle-tile::before,
.fit__page .fit__infra-item::before, .food__page .food__infra-item::before,
.fe__page .fe__stack-card::before, .gov__page .gov__ai-item::before, .ind__page .ind__cc::before,
.lead__page .lead__clients-card::before, .mkt__page .mkt__infra-item::before,
.process__page .process__starting-card::before, .re__page .re__infra-item::before,
.su__page .su__infra-item::before, .why__page .why__eng-card::before { content: none; display: none; }
.aisc__page .aisc__good-tile::after, .be__page .be__api-card::after, .dt__page .dt__case-card::after,
.dtc__page .dtc__assess-tile::after, .eac__page .eac__principle-tile::after,
.fit__page .fit__infra-item::after, .food__page .food__infra-item::after,
.fe__page .fe__stack-card::after, .gov__page .gov__ai-item::after, .ind__page .ind__cc::after,
.lead__page .lead__clients-card::after, .mkt__page .mkt__infra-item::after,
.process__page .process__starting-card::after, .re__page .re__infra-item::after,
.su__page .su__infra-item::after, .why__page .why__eng-card::after { content: none; display: none; }

.aisc__page .aisc__good-grid, .be__page .be__api-grid, .dt__page .dt__cases-grid,
.dtc__page .dtc__assess-grid, .eac__page .eac__principle-grid, .fit__page .fit__infra-row,
.food__page .food__infra-row, .fe__page .fe__stack-grid, .gov__page .gov__ai-row,
.ind__page .ind__constraints-grid, .lead__page .lead__clients-grid, .mkt__page .mkt__infra-row,
.process__page .process__starting-grid, .re__page .re__infra-row, .su__page .su__infra-row,
.why__page .why__eng-grid { counter-reset: kxTailGhost; gap: 34px 46px; }
.aisc__page .aisc__good-tile, .be__page .be__api-card, .dt__page .dt__case-card,
.dtc__page .dtc__assess-tile, .eac__page .eac__principle-tile, .fit__page .fit__infra-item,
.food__page .food__infra-item, .fe__page .fe__stack-card, .gov__page .gov__ai-item, .ind__page .ind__cc,
.lead__page .lead__clients-card, .mkt__page .mkt__infra-item, .process__page .process__starting-card,
.re__page .re__infra-item, .su__page .su__infra-item, .why__page .why__eng-card {
  counter-increment: kxTailGhost;
  position: relative;
  padding: 26px 0 26px 62px;
  border-top: 1px solid var(--kx-b);
  overflow: hidden;
}
.aisc__page .aisc__good-tile::before, .be__page .be__api-card::before, .dt__page .dt__case-card::before,
.dtc__page .dtc__assess-tile::before, .eac__page .eac__principle-tile::before,
.fit__page .fit__infra-item::before, .food__page .food__infra-item::before,
.fe__page .fe__stack-card::before, .gov__page .gov__ai-item::before, .ind__page .ind__cc::before,
.lead__page .lead__clients-card::before, .mkt__page .mkt__infra-item::before,
.process__page .process__starting-card::before, .re__page .re__infra-item::before,
.su__page .su__infra-item::before, .why__page .why__eng-card::before {
  content: counter(kxTailGhost, decimal-leading-zero);
  display: block;
  position: absolute;
  left: -4px;
  top: 16px;
  font-size: 52px;
  font-weight: 300;
  line-height: .82;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--kx-b);
  pointer-events: none;
  transition: color .5s ease;
}
.aisc__page .aisc__good-tile:hover::before, .be__page .be__api-card:hover::before,
.dt__page .dt__case-card:hover::before, .dtc__page .dtc__assess-tile:hover::before,
.eac__page .eac__principle-tile:hover::before, .fit__page .fit__infra-item:hover::before,
.food__page .food__infra-item:hover::before, .fe__page .fe__stack-card:hover::before,
.gov__page .gov__ai-item:hover::before, .ind__page .ind__cc:hover::before,
.lead__page .lead__clients-card:hover::before, .mkt__page .mkt__infra-item:hover::before,
.process__page .process__starting-card:hover::before, .re__page .re__infra-item:hover::before,
.su__page .su__infra-item:hover::before, .why__page .why__eng-card:hover::before { color: var(--kx-a); }
.aisc__page .aisc__good-tile > h3, .aisc__page .aisc__good-tile > h4, .be__page .be__api-card > h3,
.be__page .be__api-card > h4, .dt__page .dt__case-card > h3, .dt__page .dt__case-card > h4,
.dtc__page .dtc__assess-tile > h3, .dtc__page .dtc__assess-tile > h4,
.eac__page .eac__principle-tile > h3, .eac__page .eac__principle-tile > h4,
.fit__page .fit__infra-item > h3, .fit__page .fit__infra-item > h4, .food__page .food__infra-item > h3,
.food__page .food__infra-item > h4, .fe__page .fe__stack-card > h3, .fe__page .fe__stack-card > h4,
.gov__page .gov__ai-item > h3, .gov__page .gov__ai-item > h4, .ind__page .ind__cc > h3,
.ind__page .ind__cc > h4, .lead__page .lead__clients-card > h3, .lead__page .lead__clients-card > h4,
.mkt__page .mkt__infra-item > h3, .mkt__page .mkt__infra-item > h4,
.process__page .process__starting-card > h3, .process__page .process__starting-card > h4,
.re__page .re__infra-item > h3, .re__page .re__infra-item > h4, .su__page .su__infra-item > h3,
.su__page .su__infra-item > h4, .why__page .why__eng-card > h3, .why__page .why__eng-card > h4 {
  position: relative;
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--kx-h);
  transition: color .4s ease;
}
.aisc__page .aisc__good-tile > h3:hover, .aisc__page .aisc__good-tile > h4:hover,
.be__page .be__api-card > h3:hover, .be__page .be__api-card > h4:hover,
.dt__page .dt__case-card > h3:hover, .dt__page .dt__case-card > h4:hover,
.dtc__page .dtc__assess-tile > h3:hover, .dtc__page .dtc__assess-tile > h4:hover,
.eac__page .eac__principle-tile > h3:hover, .eac__page .eac__principle-tile > h4:hover,
.fit__page .fit__infra-item > h3:hover, .fit__page .fit__infra-item > h4:hover,
.food__page .food__infra-item > h3:hover, .food__page .food__infra-item > h4:hover,
.fe__page .fe__stack-card > h3:hover, .fe__page .fe__stack-card > h4:hover,
.gov__page .gov__ai-item > h3:hover, .gov__page .gov__ai-item > h4:hover, .ind__page .ind__cc > h3:hover,
.ind__page .ind__cc > h4:hover, .lead__page .lead__clients-card > h3:hover,
.lead__page .lead__clients-card > h4:hover, .mkt__page .mkt__infra-item > h3:hover,
.mkt__page .mkt__infra-item > h4:hover, .process__page .process__starting-card > h3:hover,
.process__page .process__starting-card > h4:hover, .re__page .re__infra-item > h3:hover,
.re__page .re__infra-item > h4:hover, .su__page .su__infra-item > h3:hover,
.su__page .su__infra-item > h4:hover, .why__page .why__eng-card > h3:hover,
.why__page .why__eng-card > h4:hover { color: var(--kx-a); }
.aisc__page .aisc__good-tile > p, .be__page .be__api-card > p, .dt__page .dt__case-card > p,
.dtc__page .dtc__assess-tile > p, .eac__page .eac__principle-tile > p, .fit__page .fit__infra-item > p,
.food__page .food__infra-item > p, .fe__page .fe__stack-card > p, .gov__page .gov__ai-item > p,
.ind__page .ind__cc > p, .lead__page .lead__clients-card > p, .mkt__page .mkt__infra-item > p,
.process__page .process__starting-card > p, .re__page .re__infra-item > p, .su__page .su__infra-item > p,
.why__page .why__eng-card > p {
  position: relative;
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.aisc__page .aisc__good-tile > p:last-child, .be__page .be__api-card > p:last-child,
.dt__page .dt__case-card > p:last-child, .dtc__page .dtc__assess-tile > p:last-child,
.eac__page .eac__principle-tile > p:last-child, .fit__page .fit__infra-item > p:last-child,
.food__page .food__infra-item > p:last-child, .fe__page .fe__stack-card > p:last-child,
.gov__page .gov__ai-item > p:last-child, .ind__page .ind__cc > p:last-child,
.lead__page .lead__clients-card > p:last-child, .mkt__page .mkt__infra-item > p:last-child,
.process__page .process__starting-card > p:last-child, .re__page .re__infra-item > p:last-child,
.su__page .su__infra-item > p:last-child, .why__page .why__eng-card > p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .aisc__page .aisc__good-tile, .be__page .be__api-card, .dt__page .dt__case-card,
.dtc__page .dtc__assess-tile, .eac__page .eac__principle-tile, .fit__page .fit__infra-item,
.food__page .food__infra-item, .fe__page .fe__stack-card, .gov__page .gov__ai-item, .ind__page .ind__cc,
.lead__page .lead__clients-card, .mkt__page .mkt__infra-item, .process__page .process__starting-card,
.re__page .re__infra-item, .su__page .su__infra-item, .why__page .why__eng-card { padding: 22px 0 22px 48px; }
  .aisc__page .aisc__good-tile::before, .be__page .be__api-card::before, .dt__page .dt__case-card::before,
.dtc__page .dtc__assess-tile::before, .eac__page .eac__principle-tile::before,
.fit__page .fit__infra-item::before, .food__page .food__infra-item::before,
.fe__page .fe__stack-card::before, .gov__page .gov__ai-item::before, .ind__page .ind__cc::before,
.lead__page .lead__clients-card::before, .mkt__page .mkt__infra-item::before,
.process__page .process__starting-card::before, .re__page .re__infra-item::before,
.su__page .su__infra-item::before, .why__page .why__eng-card::before { font-size: 38px; top: 14px; }
  .aisc__page .aisc__good-tile > h3, .aisc__page .aisc__good-tile > h4, .be__page .be__api-card > h3,
.be__page .be__api-card > h4, .dt__page .dt__case-card > h3, .dt__page .dt__case-card > h4,
.dtc__page .dtc__assess-tile > h3, .dtc__page .dtc__assess-tile > h4,
.eac__page .eac__principle-tile > h3, .eac__page .eac__principle-tile > h4,
.fit__page .fit__infra-item > h3, .fit__page .fit__infra-item > h4, .food__page .food__infra-item > h3,
.food__page .food__infra-item > h4, .fe__page .fe__stack-card > h3, .fe__page .fe__stack-card > h4,
.gov__page .gov__ai-item > h3, .gov__page .gov__ai-item > h4, .ind__page .ind__cc > h3,
.ind__page .ind__cc > h4, .lead__page .lead__clients-card > h3, .lead__page .lead__clients-card > h4,
.mkt__page .mkt__infra-item > h3, .mkt__page .mkt__infra-item > h4,
.process__page .process__starting-card > h3, .process__page .process__starting-card > h4,
.re__page .re__infra-item > h3, .re__page .re__infra-item > h4, .su__page .su__infra-item > h3,
.su__page .su__infra-item > h4, .why__page .why__eng-card > h3, .why__page .why__eng-card > h4 { font-size: 17.5px; }
}

/* ---------- why__page :: Engineering for the Long Term — icon bento cards ----------
   Overrides the shared "ghost-numeral slabs" tail pattern above for this one
   section only (same .why__page .why__eng-card selector, later in cascade),
   so the other 16 page types sharing that pattern are untouched. */
.why__page .why__eng-grid { gap: 26px 24px; }
.why__page .why__eng-card {
  counter-increment: none;
  position: relative;
  padding: 36px 30px 32px;
  border: 1px solid var(--wb);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}
.why__page .why__eng-card::before { content: none; }
.why__page .why__eng-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wc), var(--wc2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.why__page .why__eng-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px rgba(7, 21, 47, .1);
  border-color: rgba(0, 95, 204, .18);
}
.why__page .why__eng-card:hover::after { transform: scaleX(1); }
.why__page .why__eng-num {
  position: absolute;
  top: 24px;
  right: 26px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--wb);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color .4s ease;
}
.why__page .why__eng-card:hover .why__eng-num { color: var(--wbg); }
.why__page .why__eng-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 0 22px;
  border-radius: 14px;
  background: var(--wbg);
  color: var(--wc);
  font-size: 20px;
  transition: background .4s ease, color .4s ease, transform .4s ease;
}
.why__page .why__eng-card:hover .why__eng-ico {
  background: linear-gradient(135deg, var(--wc), var(--wc2));
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}
.why__page .why__eng-card > h3 {
  position: relative;
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  color: var(--wh);
  transition: color .4s ease;
}
.why__page .why__eng-card:hover > h3 { color: var(--wc); }
.why__page .why__eng-card > p {
  position: relative;
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--wt);
}
@media (max-width: 767px) {
  .why__page .why__eng-card { padding: 30px 26px 28px; }
  .why__page .why__eng-num { font-size: 36px; top: 20px; right: 22px; }
  .why__page .why__eng-ico { width: 48px; height: 48px; font-size: 18px; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .why__page .why__eng-card,
  .why__page .why__eng-card::after,
  .why__page .why__eng-num,
  .why__page .why__eng-ico,
  .why__page .why__eng-card > h3 { transition: none !important; }
  .why__page .why__eng-card:hover { transform: none !important; }
  .why__page .why__eng-card:hover .why__eng-ico { transform: none !important; }
}

/* ---------- why__page :: Engineering for the Long Term — connector rows ----------
   All six items break from the bento grid into full-width rows: a
   dashed-ring icon circle fed by a short accent line, a large index
   number, then title + text. Accent color cycles blue / light-blue /
   purple across the six. */
.why__page .why__eng-card {
  --eng-accent: var(--wc);
  grid-column: 1 / -1;
  justify-self: start;
  display: grid;
  grid-template-columns: 70px auto minmax(0, 480px);
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 6px;
  align-items: center;
  padding: 30px 44px 30px 40px;
  transition: background .3s ease, border-color .3s ease;
}
.why__page .why__eng-card:nth-child(3n+2) { --eng-accent: var(--wc3); }
.why__page .why__eng-card:nth-child(3n+3) { --eng-accent: var(--wc2); }
.why__page .why__eng-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 3px;
  background: var(--eng-accent);
  transform: translateY(-50%);
}
.why__page .why__eng-card::after { content: none; }
.why__page .why__eng-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--wbg);
  border-color: var(--wb);
}
.why__page .why__eng-card .why__eng-ico {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 50%;
  background: var(--eng-accent);
  color: #fff;
  font-size: 22px;
}
.why__page .why__eng-card .why__eng-ico::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px dashed var(--eng-accent);
  border-radius: 50%;
  opacity: .45;
}
.why__page .why__eng-card:hover .why__eng-ico { transform: none; background: var(--eng-accent); }
.why__page .why__eng-card .why__eng-num {
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  font-size: 30px;
  color: var(--eng-accent);
  opacity: .55;
}
.why__page .why__eng-card:hover .why__eng-num { color: var(--eng-accent); }
.why__page .why__eng-card > h3 {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: 18px;
}
.why__page .why__eng-card:hover > h3 { color: var(--wh); }
.why__page .why__eng-card > p {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  margin: 0;
}
@media (max-width: 767px) {
  .why__page .why__eng-card {
    grid-template-columns: 50px auto 1fr;
    column-gap: 14px;
    padding: 24px 20px 24px 26px;
  }
  .why__page .why__eng-card::before { width: 26px; }
  .why__page .why__eng-card .why__eng-ico { width: 46px; height: 46px; font-size: 17px; }
  .why__page .why__eng-card .why__eng-num { font-size: 22px; }
  .why__page .why__eng-card > h3 { font-size: 16.5px; }
}

/* --- even rows (Maintainability, Architecture, Adaptability) mirrored: sit on the right, icon + number on the right, text right-aligned --- */
.why__page .why__eng-card:nth-child(even) {
  justify-self: end;
  grid-template-columns: minmax(0, 480px) auto 70px;
  padding: 30px 40px 30px 44px;
}
.why__page .why__eng-card:nth-child(even)::before { left: auto; right: 0; }
.why__page .why__eng-card:nth-child(even) .why__eng-ico { grid-column: 3; }
.why__page .why__eng-card:nth-child(even) .why__eng-num { grid-column: 2; }
.why__page .why__eng-card:nth-child(even) > h3 { grid-column: 1; text-align: right; }
.why__page .why__eng-card:nth-child(even) > p { grid-column: 1; text-align: right; }
@media (max-width: 767px) {
  .why__page .why__eng-card:nth-child(even) {
    grid-template-columns: 1fr auto 50px;
    padding: 24px 26px 24px 20px;
  }
}

/* ---------- tail :: inline-numeral rows ---------- */
.abt__page .abt__val-card, .bde__page .bde__scale-card, .bi__page .bi__cap-tile {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.abt__page .abt__val-card:hover, .bde__page .bde__scale-card:hover, .bi__page .bi__cap-tile:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.abt__page .abt__val-card::before, .bde__page .bde__scale-card::before, .bi__page .bi__cap-tile::before { content: none; display: none; }
.abt__page .abt__val-card::after, .bde__page .bde__scale-card::after, .bi__page .bi__cap-tile::after { content: none; display: none; }

.abt__page .abt__val-grid, .bde__page .bde__scale-grid, .bi__page .bi__caps-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.abt__page .abt__val-card, .bde__page .bde__scale-card, .bi__page .bi__cap-tile {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 22px;
  align-items: baseline;
  padding: 26px 2px;
  border-bottom: 1px solid var(--kx-b);
}
.abt__page .abt__val-card > span:first-of-type, .bde__page .bde__scale-card > span:first-of-type,
.bi__page .bi__cap-tile > span:first-of-type {
  grid-column: 1;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--kx-a);
  opacity: 1;
  display: inline-flex;
}
.abt__page .abt__val-card > span:last-of-type, .bde__page .bde__scale-card > span:last-of-type,
.bi__page .bi__cap-tile > span:last-of-type {
  grid-column: 1;
  grid-row: 2;
  width: auto;
  height: auto;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 14px;
  opacity: .5;
  display: inline-flex;
}
.abt__page .abt__val-card > h3, .abt__page .abt__val-card > h4, .bde__page .bde__scale-card > h3,
.bde__page .bde__scale-card > h4, .bi__page .bi__cap-tile > h3, .bi__page .bi__cap-tile > h4 {
  grid-column: 2;
  margin: 0 0 9px;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.32;
  color: var(--kx-h);
}
.abt__page .abt__val-card > p, .bde__page .bde__scale-card > p, .bi__page .bi__cap-tile > p {
  grid-column: 2;
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
@media (max-width: 767px) {
  .abt__page .abt__val-card, .bde__page .bde__scale-card, .bi__page .bi__cap-tile { grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; }
  .abt__page .abt__val-card > h3, .abt__page .abt__val-card > h4, .bde__page .bde__scale-card > h3,
.bde__page .bde__scale-card > h4, .bi__page .bi__cap-tile > h3, .bi__page .bi__cap-tile > h4 { font-size: 17px; }
}

/* ---------- About page :: "What We Believe" as a stack of rounded pill tabs.
   Each belief is a stadium-shaped row with a solid colour cap fused onto one
   end (alternating sides down the stack, like a filing-tab index), the
   number and icon on the left, copy on the right. Distinct from the card
   grids and timeline elsewhere on this page. ---------- */
.abt__manifesto { margin-top: 60px; }
.abt__manifesto-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--ab);
  border-radius: 18px;
  padding: 20px 40px;
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(28, 30, 43, .05);
  transition: box-shadow .3s ease, transform .3s ease;
}
.abt__manifesto-row:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(28, 30, 43, .09); }
.abt__manifesto-row:last-child { margin-bottom: 0; }
.abt__manifesto-num { display: none; }
.abt__manifesto-ico {
  order: 2;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--ac);
  font-size: 30px;
}
.abt__manifesto-row:nth-child(1) .abt__manifesto-ico { color: #f4b400; }
.abt__manifesto-row:nth-child(2) .abt__manifesto-ico { color: #6b7fd7; }
.abt__manifesto-row:nth-child(3) .abt__manifesto-ico { color: #4caf7d; }
.abt__manifesto-row:nth-child(4) .abt__manifesto-ico { color: #23b6a8; }
.abt__manifesto-row:nth-child(5) .abt__manifesto-ico { color: #3b82f6; }
.abt__manifesto-row:nth-child(6) .abt__manifesto-ico { color: #ec6fae; }
.abt__manifesto-copy { order: 3; flex: 1 1 auto; min-width: 0; }
.abt__manifesto-copy h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #7c8698; }
.abt__manifesto-copy p { margin: 0; max-width: none; font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--at); }

.abt__manifesto-row:nth-child(odd) { margin-right: 46px; padding-right: 96px; }
.abt__manifesto-row:nth-child(even) { margin-left: 46px; padding-left: 96px; }
.abt__manifesto-row::before, .abt__manifesto-row::after { content: none; }
.abt__manifesto-row:nth-child(1)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38px; border-radius: 0 18px 18px 0; background: #f4b400; }
.abt__manifesto-row:nth-child(2)::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 38px; border-radius: 18px 0 0 18px; background: #6b7fd7; }
.abt__manifesto-row:nth-child(3)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38px; border-radius: 0 18px 18px 0; background: #4caf7d; }
.abt__manifesto-row:nth-child(4)::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 38px; border-radius: 18px 0 0 18px; background: #23b6a8; }
.abt__manifesto-row:nth-child(5)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38px; border-radius: 0 18px 18px 0; background: #3b82f6; }
.abt__manifesto-row:nth-child(6)::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 38px; border-radius: 18px 0 0 18px; background: #ec6fae; }
@media only screen and (max-width: 767px) {
  .abt__manifesto-row {
    flex-wrap: wrap;
    border-radius: 24px;
    padding: 26px 26px 22px !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .abt__manifesto-row::before, .abt__manifesto-row::after { display: none; }
  .abt__manifesto-num { order: 1; }
  .abt__manifesto-ico { order: 2; }
  .abt__manifesto-copy { order: 3; flex: 1 1 100%; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .abt__manifesto-row { transition: none !important; }
  .abt__manifesto-row:hover { transform: none !important; }
}

/* ---------- tail :: eyebrow-stacked entries ---------- */
.co__page .co__trust-card, .ent__page .ent__track-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.co__page .co__trust-card:hover, .ent__page .ent__track-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.co__page .co__trust-card::before, .ent__page .ent__track-card::before { content: none; display: none; }
.co__page .co__trust-card::after, .ent__page .ent__track-card::after { content: none; display: none; }

.co__page .co__trust-grid, .ent__page .ent__track { gap: 30px 40px; }
.co__page .co__trust-card, .ent__page .ent__track-card {
  padding: 0 0 0 22px;
  border-left: 2px solid var(--kx-b);
  transition: border-color .45s ease, padding-left .45s cubic-bezier(.22, .61, .36, 1);
}
.co__page .co__trust-card:hover, .ent__page .ent__track-card:hover { border-left-color: var(--kx-a); padding-left: 28px; }
.co__page .co__trust-card > span:first-of-type, .ent__page .ent__track-card > span:first-of-type {
  width: auto;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 16px;
  display: inline-flex;
}
.co__page .co__trust-card > span:last-of-type, .ent__page .ent__track-card > span:last-of-type {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--kx-a);
}
.co__page .co__trust-card > h3, .co__page .co__trust-card > h4, .ent__page .ent__track-card > h3,
.ent__page .ent__track-card > h4 {
  margin: 0 0 9px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.32;
  color: var(--kx-h);
}
.co__page .co__trust-card > p, .ent__page .ent__track-card > p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
@media (max-width: 767px) {
  .co__page .co__trust-card > h3, .co__page .co__trust-card > h4, .ent__page .ent__track-card > h3,
.ent__page .ent__track-card > h4 { font-size: 17px; }
}

/* ---------- tail :: meta-tail rows ---------- */
.co__page .co__explore-card, .cto__page .cto__model-card, .dx__page .dx__connect-card,
.ent__page .ent__extend-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.co__page .co__explore-card:hover, .cto__page .cto__model-card:hover, .dx__page .dx__connect-card:hover,
.ent__page .ent__extend-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.co__page .co__explore-card::before, .cto__page .cto__model-card::before,
.dx__page .dx__connect-card::before, .ent__page .ent__extend-card::before { content: none; display: none; }
.co__page .co__explore-card::after, .cto__page .cto__model-card::after,
.dx__page .dx__connect-card::after, .ent__page .ent__extend-card::after { content: none; display: none; }

.co__page .co__explore-grid, .cto__page .cto__model-grid, .dx__page .dx__connect-grid,
.ent__page .ent__extend-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.co__page .co__explore-card, .cto__page .cto__model-card, .dx__page .dx__connect-card,
.ent__page .ent__extend-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  column-gap: 26px;
  align-items: baseline;
  padding: 26px 2px;
  border-bottom: 1px solid var(--kx-b);
  transition: background .45s ease;
}
.co__page .co__explore-card:hover, .cto__page .cto__model-card:hover, .dx__page .dx__connect-card:hover,
.ent__page .ent__extend-card:hover { background: var(--kx-bg); }
.co__page .co__explore-card > span:first-of-type, .cto__page .cto__model-card > span:first-of-type,
.dx__page .dx__connect-card > span:first-of-type, .ent__page .ent__extend-card > span:first-of-type {
  grid-column: 1;
  justify-self: start;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 15px;
  display: inline-flex;
}
.co__page .co__explore-card > h3, .co__page .co__explore-card > h4, .cto__page .cto__model-card > h3,
.cto__page .cto__model-card > h4, .dx__page .dx__connect-card > h3, .dx__page .dx__connect-card > h4,
.ent__page .ent__extend-card > h3, .ent__page .ent__extend-card > h4 {
  grid-column: 2;
  margin: 0 0 8px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.36;
  color: var(--kx-h);
  transition: color .4s ease;
}
.co__page .co__explore-card > h3:hover, .co__page .co__explore-card > h4:hover,
.cto__page .cto__model-card > h3:hover, .cto__page .cto__model-card > h4:hover,
.dx__page .dx__connect-card > h3:hover, .dx__page .dx__connect-card > h4:hover,
.ent__page .ent__extend-card > h3:hover, .ent__page .ent__extend-card > h4:hover { color: var(--kx-a); }
.co__page .co__explore-card > p, .cto__page .cto__model-card > p, .dx__page .dx__connect-card > p,
.ent__page .ent__extend-card > p {
  grid-column: 2;
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.co__page .co__explore-card > span:last-of-type, .cto__page .cto__model-card > span:last-of-type,
.dx__page .dx__connect-card > span:last-of-type, .ent__page .ent__extend-card > span:last-of-type {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: auto;
  height: auto;
  margin: 0;
  padding: 4px 0 4px 18px;
  border: 0;
  border-left: 1px solid var(--kx-b);
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kx-a);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .co__page .co__explore-card, .cto__page .cto__model-card, .dx__page .dx__connect-card,
.ent__page .ent__extend-card { grid-template-columns: 26px minmax(0, 1fr); row-gap: 10px; }
  .co__page .co__explore-card > span:last-of-type, .cto__page .cto__model-card > span:last-of-type,
.dx__page .dx__connect-card > span:last-of-type, .ent__page .ent__extend-card > span:last-of-type { grid-column: 2; grid-row: auto; justify-self: start; padding-left: 0; border-left: 0; }
}

/* ---------- tail :: two-measure register ---------- */
.dat__page .dat__stack-card, .eac__page .eac__distinct-card, .lead__page .lead__culture-card,
.tmc__page .tmc__distinct-card, .why__page .why__eng2-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.dat__page .dat__stack-card:hover, .eac__page .eac__distinct-card:hover,
.lead__page .lead__culture-card:hover, .tmc__page .tmc__distinct-card:hover,
.why__page .why__eng2-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.dat__page .dat__stack-card::before, .eac__page .eac__distinct-card::before,
.lead__page .lead__culture-card::before, .tmc__page .tmc__distinct-card::before,
.why__page .why__eng2-card::before { content: none; display: none; }
.dat__page .dat__stack-card::after, .eac__page .eac__distinct-card::after,
.lead__page .lead__culture-card::after, .tmc__page .tmc__distinct-card::after,
.why__page .why__eng2-card::after { content: none; display: none; }

.dat__page .dat__stack-grid, .eac__page .eac__distinct-grid, .lead__page .lead__culture-grid,
.tmc__page .tmc__distinct-grid, .why__page .why__eng2-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.dat__page .dat__stack-card, .eac__page .eac__distinct-card, .lead__page .lead__culture-card,
.tmc__page .tmc__distinct-card, .why__page .why__eng2-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  padding: 28px 2px;
  border-bottom: 1px solid var(--kx-b);
  transition: background .45s ease;
}
.dat__page .dat__stack-card:hover, .eac__page .eac__distinct-card:hover,
.lead__page .lead__culture-card:hover, .tmc__page .tmc__distinct-card:hover,
.why__page .why__eng2-card:hover { background: var(--kx-bg); }
.dat__page .dat__stack-card > h3, .dat__page .dat__stack-card > h4, .eac__page .eac__distinct-card > h3,
.eac__page .eac__distinct-card > h4, .lead__page .lead__culture-card > h3,
.lead__page .lead__culture-card > h4, .tmc__page .tmc__distinct-card > h3,
.tmc__page .tmc__distinct-card > h4, .why__page .why__eng2-card > h3, .why__page .why__eng2-card > h4 {
  margin: 0;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--kx-h);
}
.dat__page .dat__stack-card > p, .eac__page .eac__distinct-card > p, .lead__page .lead__culture-card > p,
.tmc__page .tmc__distinct-card > p, .why__page .why__eng2-card > p {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.dat__page .dat__stack-card > p:last-child, .eac__page .eac__distinct-card > p:last-child,
.lead__page .lead__culture-card > p:last-child, .tmc__page .tmc__distinct-card > p:last-child,
.why__page .why__eng2-card > p:last-child { margin-bottom: 0; }
@media (max-width: 991px) {
  .dat__page .dat__stack-card, .eac__page .eac__distinct-card, .lead__page .lead__culture-card,
.tmc__page .tmc__distinct-card, .why__page .why__eng2-card { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}

/* ---------- why__page :: Flexible Ways to Work — connected chain ----------
   Overrides the shared "two-measure register" list above for this one
   section only (same .why__page .why__eng2-* selectors, later in
   cascade), so the other 4 page types sharing that pattern are
   untouched. Five outlined, rounded tiles in a row, linked by a short
   dashed connector with a dot between each pair. */
.why__page .why__eng2-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  border-top: 0;
}
.why__page .why__eng2-card {
  --eng2-accent: var(--wc);
  position: relative;
  display: block;
  padding: 40px 22px 26px;
  border: 3px solid var(--eng2-accent);
  border-radius: 26px;
  background: #fff;
  box-shadow:
    0 20px 38px rgba(7, 21, 47, .08),
    inset 0 2px 3px rgba(255, 255, 255, .9),
    inset 0 -4px 10px rgba(15, 23, 42, .08),
    inset 4px 0 8px -4px rgba(15, 23, 42, .06),
    inset -4px 0 8px -4px rgba(15, 23, 42, .06);
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.why__page .why__eng2-card:nth-child(3n+2) { --eng2-accent: var(--wc3); }
.why__page .why__eng2-card:nth-child(3n+3) { --eng2-accent: var(--wc2); }
.why__page .why__eng2-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 46px rgba(7, 21, 47, .14),
    inset 0 2px 3px rgba(255, 255, 255, .9),
    inset 0 -4px 10px rgba(15, 23, 42, .08),
    inset 4px 0 8px -4px rgba(15, 23, 42, .06),
    inset -4px 0 8px -4px rgba(15, 23, 42, .06);
}
.why__page .why__eng2-card:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -4px;
  left: 100%;
  width: 24px;
  height: 2px;
  background-image: linear-gradient(90deg, currentColor 0 5px, transparent 5px 10px);
  color: var(--eng2-accent);
}
.why__page .why__eng2-card:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -8px;
  left: calc(100% + 7px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--eng2-accent);
  box-shadow: 0 0 0 3px #fff;
}
.why__page .why__eng2-ico {
  position: absolute;
  z-index: 4;
  top: -31px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  background: var(--eng2-accent);
  color: #fff;
  font-size: 20px;
  transition: background .35s ease, color .35s ease;
}
.why__page .why__eng2-card:hover .why__eng2-ico { background: var(--eng2-accent); color: #fff; }
.why__page .why__eng2-card > h3 { margin: 0 0 10px; font-size: 15.5px; }
.why__page .why__eng2-card:hover > h3 { color: var(--eng2-accent); }
@media (max-width: 991px) {
  .why__page .why__eng2-card:not(:last-child)::before,
  .why__page .why__eng2-card:not(:last-child)::after { content: none; }
  .why__page .why__eng2-grid { grid-template-columns: repeat(2, 1fr); }
  .why__page .why__eng2-card > h3 { font-size: 17px; }
}
@media (max-width: 575px) {
  .why__page .why__eng2-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .why__page .why__eng2-card,
  .why__page .why__eng2-ico { transition: none !important; }
  .why__page .why__eng2-card:hover { transform: none !important; }
}

/* ---------- lead__page :: Building the Right Culture — editorial manifesto ----------
   Overrides the shared "two-measure register" list above for this one
   section only (same .lead__page .lead__culture-* selectors, later in
   cascade), so the other page types sharing that pattern are untouched.
   No card chrome: a balanced two-column editorial list with large thin
   numerals, numbered by a CSS counter so no markup changes are needed. */
.lead__page .lead__culture-grid {
  display: block; column-count: 2; column-gap: 64px; column-rule: 1px solid var(--kx-b);
  border-top: 0; counter-reset: culture-step;
}
.lead__page .lead__culture-card {
  --cx-accent: var(--lc);
  position: relative; display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto;
  column-gap: 20px; row-gap: 8px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--kx-b);
  break-inside: avoid; -webkit-column-break-inside: avoid;
  counter-increment: culture-step;
}
.lead__page .lead__culture-card:first-child { border-top: 0; padding-top: 0; }
.lead__page .lead__culture-card::before {
  content: counter(culture-step, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  font-family: inherit; font-size: 40px; font-weight: 200; line-height: 1; letter-spacing: -.5px;
  color: var(--cx-accent);
}
.lead__page .lead__culture-card > h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 17.5px; font-weight: 600; color: var(--kx-h); }
.lead__page .lead__culture-card > p { grid-column: 2; grid-row: 2; margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.72; color: var(--kx-t); }
.lead__page .lead__culture-card:nth-child(1) { --cx-accent: var(--lc); }
.lead__page .lead__culture-card:nth-child(2) { --cx-accent: var(--lc2); }
.lead__page .lead__culture-card:nth-child(3) { --cx-accent: var(--lc3); }
.lead__page .lead__culture-card:nth-child(4) { --cx-accent: var(--lc2); }
.lead__page .lead__culture-card:nth-child(5) { --cx-accent: var(--lc); }
@media (max-width: 767px) {
  .lead__page .lead__culture-grid { column-count: 1; column-rule: none; }
  .lead__page .lead__culture-card::before { font-size: 32px; }
}

/* ---------- tail :: rule-topped entries ---------- */
.asm__page .asm__outcome-tile, .cds__page .cds__sec-item, .co__page .co__engage-card,
.contact__page .contact__why-card, .csw__page .csw__trust-item, .dgov__page .dgov__cycle-step,
.dwh__page .dwh__signal-card, .db__page .db__solve-item, .eac__page .eac__portfolio-tile,
.ent__page .ent__govern-card, .itsc__page .itsc__lens-card, .pd__page .pd__deliver-item,
.uix__page .uix__plat-item, .uxr__page .uxr__deliver-item {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.asm__page .asm__outcome-tile:hover, .cds__page .cds__sec-item:hover, .co__page .co__engage-card:hover,
.contact__page .contact__why-card:hover, .csw__page .csw__trust-item:hover,
.dgov__page .dgov__cycle-step:hover, .dwh__page .dwh__signal-card:hover, .db__page .db__solve-item:hover,
.eac__page .eac__portfolio-tile:hover, .ent__page .ent__govern-card:hover,
.itsc__page .itsc__lens-card:hover, .pd__page .pd__deliver-item:hover, .uix__page .uix__plat-item:hover,
.uxr__page .uxr__deliver-item:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.asm__page .asm__outcome-tile::before, .cds__page .cds__sec-item::before,
.co__page .co__engage-card::before, .contact__page .contact__why-card::before,
.csw__page .csw__trust-item::before, .dgov__page .dgov__cycle-step::before,
.dwh__page .dwh__signal-card::before, .db__page .db__solve-item::before,
.eac__page .eac__portfolio-tile::before, .ent__page .ent__govern-card::before,
.itsc__page .itsc__lens-card::before, .pd__page .pd__deliver-item::before,
.uix__page .uix__plat-item::before, .uxr__page .uxr__deliver-item::before { content: none; display: none; }
.asm__page .asm__outcome-tile::after, .cds__page .cds__sec-item::after,
.co__page .co__engage-card::after, .contact__page .contact__why-card::after,
.csw__page .csw__trust-item::after, .dgov__page .dgov__cycle-step::after,
.dwh__page .dwh__signal-card::after, .db__page .db__solve-item::after,
.eac__page .eac__portfolio-tile::after, .ent__page .ent__govern-card::after,
.itsc__page .itsc__lens-card::after, .pd__page .pd__deliver-item::after,
.uix__page .uix__plat-item::after, .uxr__page .uxr__deliver-item::after { content: none; display: none; }

.asm__page .asm__outcome-grid, .cds__page .cds__sec-grid, .co__page .co__engage-grid,
.contact__page .contact__why-grid, .csw__page .csw__trust-grid, .dgov__page .dgov__cycle-row,
.dwh__page .dwh__signals-grid, .db__page .db__solve-grid, .eac__page .eac__portfolio-grid,
.ent__page .ent__govern-grid, .itsc__page .itsc__lens-grid, .pd__page .pd__deliver-grid,
.uix__page .uix__plat-grid, .uxr__page .uxr__deliver-grid { gap: 34px 30px; }
.asm__page .asm__outcome-tile, .cds__page .cds__sec-item, .co__page .co__engage-card,
.contact__page .contact__why-card, .csw__page .csw__trust-item, .dgov__page .dgov__cycle-step,
.dwh__page .dwh__signal-card, .db__page .db__solve-item, .eac__page .eac__portfolio-tile,
.ent__page .ent__govern-card, .itsc__page .itsc__lens-card, .pd__page .pd__deliver-item,
.uix__page .uix__plat-item, .uxr__page .uxr__deliver-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 22px 0 0;
  border-top: 2px solid var(--kx-b);
  transition: border-color .45s ease;
}
.asm__page .asm__outcome-tile:hover, .cds__page .cds__sec-item:hover, .co__page .co__engage-card:hover,
.contact__page .contact__why-card:hover, .csw__page .csw__trust-item:hover,
.dgov__page .dgov__cycle-step:hover, .dwh__page .dwh__signal-card:hover, .db__page .db__solve-item:hover,
.eac__page .eac__portfolio-tile:hover, .ent__page .ent__govern-card:hover,
.itsc__page .itsc__lens-card:hover, .pd__page .pd__deliver-item:hover, .uix__page .uix__plat-item:hover,
.uxr__page .uxr__deliver-item:hover { border-top-color: var(--kx-a); }
.asm__page .asm__outcome-tile > span:first-of-type, .cds__page .cds__sec-item > span:first-of-type,
.co__page .co__engage-card > span:first-of-type, .contact__page .contact__why-card > span:first-of-type,
.csw__page .csw__trust-item > span:first-of-type, .dgov__page .dgov__cycle-step > span:first-of-type,
.dwh__page .dwh__signal-card > span:first-of-type, .db__page .db__solve-item > span:first-of-type,
.eac__page .eac__portfolio-tile > span:first-of-type, .ent__page .ent__govern-card > span:first-of-type,
.itsc__page .itsc__lens-card > span:first-of-type, .pd__page .pd__deliver-item > span:first-of-type,
.uix__page .uix__plat-item > span:first-of-type, .uxr__page .uxr__deliver-item > span:first-of-type {
  grid-column: 1;
  justify-self: start;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 15px;
  display: inline-flex;
}
.asm__page .asm__outcome-tile > h3, .asm__page .asm__outcome-tile > h4, .cds__page .cds__sec-item > h3,
.cds__page .cds__sec-item > h4, .co__page .co__engage-card > h3, .co__page .co__engage-card > h4,
.contact__page .contact__why-card > h3, .contact__page .contact__why-card > h4,
.csw__page .csw__trust-item > h3, .csw__page .csw__trust-item > h4, .dgov__page .dgov__cycle-step > h3,
.dgov__page .dgov__cycle-step > h4, .dwh__page .dwh__signal-card > h3, .dwh__page .dwh__signal-card > h4,
.db__page .db__solve-item > h3, .db__page .db__solve-item > h4, .eac__page .eac__portfolio-tile > h3,
.eac__page .eac__portfolio-tile > h4, .ent__page .ent__govern-card > h3,
.ent__page .ent__govern-card > h4, .itsc__page .itsc__lens-card > h3, .itsc__page .itsc__lens-card > h4,
.pd__page .pd__deliver-item > h3, .pd__page .pd__deliver-item > h4, .uix__page .uix__plat-item > h3,
.uix__page .uix__plat-item > h4, .uxr__page .uxr__deliver-item > h3, .uxr__page .uxr__deliver-item > h4 {
  grid-column: 2;
  margin: 0 0 9px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.32;
  color: var(--kx-h);
  transition: color .4s ease;
}
.asm__page .asm__outcome-tile > h3:hover, .asm__page .asm__outcome-tile > h4:hover,
.cds__page .cds__sec-item > h3:hover, .cds__page .cds__sec-item > h4:hover,
.co__page .co__engage-card > h3:hover, .co__page .co__engage-card > h4:hover,
.contact__page .contact__why-card > h3:hover, .contact__page .contact__why-card > h4:hover,
.csw__page .csw__trust-item > h3:hover, .csw__page .csw__trust-item > h4:hover,
.dgov__page .dgov__cycle-step > h3:hover, .dgov__page .dgov__cycle-step > h4:hover,
.dwh__page .dwh__signal-card > h3:hover, .dwh__page .dwh__signal-card > h4:hover,
.db__page .db__solve-item > h3:hover, .db__page .db__solve-item > h4:hover,
.eac__page .eac__portfolio-tile > h3:hover, .eac__page .eac__portfolio-tile > h4:hover,
.ent__page .ent__govern-card > h3:hover, .ent__page .ent__govern-card > h4:hover,
.itsc__page .itsc__lens-card > h3:hover, .itsc__page .itsc__lens-card > h4:hover,
.pd__page .pd__deliver-item > h3:hover, .pd__page .pd__deliver-item > h4:hover,
.uix__page .uix__plat-item > h3:hover, .uix__page .uix__plat-item > h4:hover,
.uxr__page .uxr__deliver-item > h3:hover, .uxr__page .uxr__deliver-item > h4:hover { color: var(--kx-a); }
.asm__page .asm__outcome-tile > p, .cds__page .cds__sec-item > p, .co__page .co__engage-card > p,
.contact__page .contact__why-card > p, .csw__page .csw__trust-item > p,
.dgov__page .dgov__cycle-step > p, .dwh__page .dwh__signal-card > p, .db__page .db__solve-item > p,
.eac__page .eac__portfolio-tile > p, .ent__page .ent__govern-card > p, .itsc__page .itsc__lens-card > p,
.pd__page .pd__deliver-item > p, .uix__page .uix__plat-item > p, .uxr__page .uxr__deliver-item > p {
  grid-column: 2;
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
@media (max-width: 767px) {
  .asm__page .asm__outcome-grid, .cds__page .cds__sec-grid, .co__page .co__engage-grid,
.contact__page .contact__why-grid, .csw__page .csw__trust-grid, .dgov__page .dgov__cycle-row,
.dwh__page .dwh__signals-grid, .db__page .db__solve-grid, .eac__page .eac__portfolio-grid,
.ent__page .ent__govern-grid, .itsc__page .itsc__lens-grid, .pd__page .pd__deliver-grid,
.uix__page .uix__plat-grid, .uxr__page .uxr__deliver-grid { gap: 26px 0; }
  .asm__page .asm__outcome-tile > h3, .asm__page .asm__outcome-tile > h4, .cds__page .cds__sec-item > h3,
.cds__page .cds__sec-item > h4, .co__page .co__engage-card > h3, .co__page .co__engage-card > h4,
.contact__page .contact__why-card > h3, .contact__page .contact__why-card > h4,
.csw__page .csw__trust-item > h3, .csw__page .csw__trust-item > h4, .dgov__page .dgov__cycle-step > h3,
.dgov__page .dgov__cycle-step > h4, .dwh__page .dwh__signal-card > h3, .dwh__page .dwh__signal-card > h4,
.db__page .db__solve-item > h3, .db__page .db__solve-item > h4, .eac__page .eac__portfolio-tile > h3,
.eac__page .eac__portfolio-tile > h4, .ent__page .ent__govern-card > h3,
.ent__page .ent__govern-card > h4, .itsc__page .itsc__lens-card > h3, .itsc__page .itsc__lens-card > h4,
.pd__page .pd__deliver-item > h3, .pd__page .pd__deliver-item > h4, .uix__page .uix__plat-item > h3,
.uix__page .uix__plat-item > h4, .uxr__page .uxr__deliver-item > h3, .uxr__page .uxr__deliver-item > h4 { font-size: 17px; }
}

/* ---------- tail :: specification sheet ---------- */
/* Note: .dx__panel (digital-transformation.html's radial-detail tab panel) is intentionally excluded from
   this archetype — it's a single-active-panel tabbed component with its own bespoke CSS, not a static list. */
.aic__page .aic__inc-card, .adi__page .adi__cap-card, .be__page .be__stack-card,
.cds__page .cds__tech-card, .tech__page .tech__cat-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.aic__page .aic__inc-card:hover, .adi__page .adi__cap-card:hover, .be__page .be__stack-card:hover,
.cds__page .cds__tech-card:hover,
.tech__page .tech__cat-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.aic__page .aic__inc-card::before, .adi__page .adi__cap-card::before, .be__page .be__stack-card::before,
.cds__page .cds__tech-card::before,
.tech__page .tech__cat-card::before { content: none; display: none; }
.aic__page .aic__inc-card::after, .adi__page .adi__cap-card::after, .be__page .be__stack-card::after,
.cds__page .cds__tech-card::after,
.tech__page .tech__cat-card::after { content: none; display: none; }

.aic__page .aic__inc-grid, .adi__page .adi__caps-grid, .be__page .be__stack-grid,
.cds__page .cds__tech-grid,
.tech__page .tech__cat-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.aic__page .aic__inc-card, .adi__page .adi__cap-card, .be__page .be__stack-card,
.cds__page .cds__tech-card, .tech__page .tech__cat-card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  column-gap: 64px;
  align-items: start;
  padding: 30px 2px 32px;
  border-bottom: 1px solid var(--kx-b);
  transition: background .45s ease;
}
.aic__page .aic__inc-card:hover, .adi__page .adi__cap-card:hover, .be__page .be__stack-card:hover,
.cds__page .cds__tech-card:hover,
.tech__page .tech__cat-card:hover { background: var(--kx-bg); }
.aic__page .aic__inc-card > span:first-of-type, .adi__page .adi__cap-card > span:first-of-type,
.be__page .be__stack-card > span:first-of-type,
.cds__page .cds__tech-card > span:first-of-type,
.tech__page .tech__cat-card > span:first-of-type {
  grid-column: 1;
  justify-self: start;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 18px;
  display: inline-flex;
}
.aic__page .aic__inc-card > h3, .aic__page .aic__inc-card > h4, .adi__page .adi__cap-card > h3,
.adi__page .adi__cap-card > h4, .be__page .be__stack-card > h3, .be__page .be__stack-card > h4,
.cds__page .cds__tech-card > h3,
.cds__page .cds__tech-card > h4,
.tech__page .tech__cat-card > h3, .tech__page .tech__cat-card > h4 {
  grid-column: 1;
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kx-h);
}
.aic__page .aic__inc-card > p, .adi__page .adi__cap-card > p, .be__page .be__stack-card > p,
.cds__page .cds__tech-card > p,
.tech__page .tech__cat-card > p {
  grid-column: 1;
  margin: 0;
  max-width: 44ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.aic__page .aic__inc-card ul, .adi__page .adi__cap-card ul, .be__page .be__stack-card ul,
.cds__page .cds__tech-card ul,
.tech__page .tech__cat-card ul {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: start;
  border-top: 1px solid var(--kx-b);
}
.aic__page .aic__inc-card ul li, .adi__page .adi__cap-card ul li, .be__page .be__stack-card ul li,
.cds__page .cds__tech-card ul li,
.tech__page .tech__cat-card ul li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--kx-b);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--kx-t);
}
.aic__page .aic__inc-card ul li i, .adi__page .adi__cap-card ul li i, .be__page .be__stack-card ul li i,
.cds__page .cds__tech-card ul li i,
.tech__page .tech__cat-card ul li i {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 10px;
}
@media (max-width: 991px) {
  .aic__page .aic__inc-card, .adi__page .adi__cap-card, .be__page .be__stack-card,
.cds__page .cds__tech-card, .tech__page .tech__cat-card { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .aic__page .aic__inc-card ul, .adi__page .adi__cap-card ul, .be__page .be__stack-card ul,
.cds__page .cds__tech-card ul,
.tech__page .tech__cat-card ul { grid-column: 1; grid-row: auto; }
  .aic__page .aic__inc-card > p, .adi__page .adi__cap-card > p, .be__page .be__stack-card > p,
.cds__page .cds__tech-card > p,
.tech__page .tech__cat-card > p { max-width: none; }
}
@media (max-width: 575px) {
  .aic__page .aic__inc-card ul li, .adi__page .adi__cap-card ul li, .be__page .be__stack-card ul li,
.cds__page .cds__tech-card ul li,
.tech__page .tech__cat-card ul li { padding: 9px 0; font-size: 13.5px; }
}

/* ---------- tail :: tag register ---------- */
.adi__page .adi__stack-cat, .apm__page .apm__stack-cat, .clc__page .clc__tools-card,
.clm__page .clm__tools-card, .cto__page .cto__cons-card,
.swe__page .swe__toolkit-cat {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.adi__page .adi__stack-cat:hover, .apm__page .apm__stack-cat:hover, .clc__page .clc__tools-card:hover,
.clm__page .clm__tools-card:hover, .cto__page .cto__cons-card:hover,
.swe__page .swe__toolkit-cat:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.adi__page .adi__stack-cat::before, .apm__page .apm__stack-cat::before,
.clc__page .clc__tools-card::before,
.clm__page .clm__tools-card::before, .cto__page .cto__cons-card::before,
.swe__page .swe__toolkit-cat::before { content: none; display: none; }
.adi__page .adi__stack-cat::after, .apm__page .apm__stack-cat::after, .clc__page .clc__tools-card::after,
.clm__page .clm__tools-card::after,
.cto__page .cto__cons-card::after, .swe__page .swe__toolkit-cat::after { content: none; display: none; }

.adi__page .adi__stack-grid, .apm__page .apm__stack-grid, .clc__page .clc__tools-grid,
.clm__page .clm__tools-grid, .cto__page .cto__cons-grid,
.swe__page .swe__toolkit-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.adi__page .adi__stack-cat, .apm__page .apm__stack-cat, .clc__page .clc__tools-card,
.clm__page .clm__tools-card, .cto__page .cto__cons-card,
.swe__page .swe__toolkit-cat {
  display: grid;
  grid-template-columns: 12px minmax(0, 250px) minmax(0, 1fr);
  column-gap: 22px;
  align-items: baseline;
  padding: 26px 2px;
  border-bottom: 1px solid var(--kx-b);
}
.adi__page .adi__stack-cat::before, .apm__page .apm__stack-cat::before,
.clc__page .clc__tools-card::before,
.clm__page .clm__tools-card::before, .cto__page .cto__cons-card::before,
.swe__page .swe__toolkit-cat::before {
  content: "";
  display: block;
  grid-column: 1;
  width: 8px;
  height: 8px;
  background: var(--kx-a);
  transform: translateY(-2px);
}
.adi__page .adi__stack-cat > span:first-of-type, .apm__page .apm__stack-cat > span:first-of-type,
.clc__page .clc__tools-card > span:first-of-type,
.clm__page .clm__tools-card > span:first-of-type, .cto__page .cto__cons-card > span:first-of-type,
.swe__page .swe__toolkit-cat > span:first-of-type {
  display: none;
}
.adi__page .adi__stack-cat > h3, .adi__page .adi__stack-cat > h4, .apm__page .apm__stack-cat > h3,
.apm__page .apm__stack-cat > h4, .clc__page .clc__tools-card > h3, .clc__page .clc__tools-card > h4,
.clm__page .clm__tools-card > h3,
.clm__page .clm__tools-card > h4, .cto__page .cto__cons-card > h3, .cto__page .cto__cons-card > h4,
.swe__page .swe__toolkit-cat > h3, .swe__page .swe__toolkit-cat > h4 {
  grid-column: 2;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--kx-h);
}
.adi__page .adi__stack-cat > div, .apm__page .apm__stack-cat > div, .clc__page .clc__tools-card > div,
.clm__page .clm__tools-card > div, .cto__page .cto__cons-card > div,
.swe__page .swe__toolkit-cat > div {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.adi__page .adi__stack-cat > div span, .apm__page .apm__stack-cat > div span,
.clc__page .clc__tools-card > div span,
.clm__page .clm__tools-card > div span, .cto__page .cto__cons-card > div span,
.swe__page .swe__toolkit-cat > div span {
  margin: 0;
  padding: 1px 16px;
  border: 0;
  border-left: 1px solid var(--kx-b);
  border-radius: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--kx-t);
}
.adi__page .adi__stack-cat > div span:first-child, .apm__page .apm__stack-cat > div span:first-child,
.clc__page .clc__tools-card > div span:first-child,
.clm__page .clm__tools-card > div span:first-child, .cto__page .cto__cons-card > div span:first-child,
.swe__page .swe__toolkit-cat > div span:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 991px) {
  .adi__page .adi__stack-cat, .apm__page .apm__stack-cat, .clc__page .clc__tools-card,
.clm__page .clm__tools-card, .cto__page .cto__cons-card,
.swe__page .swe__toolkit-cat { grid-template-columns: 12px minmax(0, 1fr); row-gap: 12px; }
  .adi__page .adi__stack-cat > div, .apm__page .apm__stack-cat > div, .clc__page .clc__tools-card > div,
.clm__page .clm__tools-card > div, .cto__page .cto__cons-card > div,
.swe__page .swe__toolkit-cat > div { grid-column: 2; }
}

/* ---------- tail :: two-tier list rows ---------- */
.hc__page .hc__persp-panel {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.hc__page .hc__persp-panel:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.hc__page .hc__persp-panel::before { content: none; display: none; }
.hc__page .hc__persp-panel::after { content: none; display: none; }

.hc__page .hc__persp-grid { display: block; border-top: 1px solid var(--kx-b); gap: 0; }
.hc__page .hc__persp-panel {
  padding: 30px 2px 32px;
  border-bottom: 1px solid var(--kx-b);
}
.hc__page .hc__persp-panel > span:first-of-type {
  width: auto;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--kx-a);
  font-size: 18px;
  display: inline-flex;
}
.hc__page .hc__persp-panel > h3,
.hc__page .hc__persp-panel > h4 {
  margin: 0 0 9px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--kx-h);
}
.hc__page .hc__persp-panel > p {
  margin: 0;
  max-width: 74ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.72;
  color: var(--kx-t);
}
.hc__page .hc__persp-panel ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 18px 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--kx-b);
  list-style: none;
}
.hc__page .hc__persp-panel ul li {
  margin: 0;
  padding: 2px 18px;
  border-left: 1px solid var(--kx-b);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--kx-h);
}
.hc__page .hc__persp-panel ul li:first-child { padding-left: 0; border-left: 0; }
.hc__page .hc__persp-panel ul li i { display: none; }
@media (max-width: 767px) {
  .hc__page .hc__persp-panel ul { padding-left: 16px; }
  .hc__page .hc__persp-panel ul li { padding: 2px 12px; }
  .hc__page .hc__persp-panel > h3,
.hc__page .hc__persp-panel > h4 { font-size: 17.5px; }
}

/* ---------- tail :: flatten the feature variants ---------- */
.aisc__page .aisc__lens-card--wide, .asm__page .asm__outcome-tile--wide, .bi__page .bi__cap-tile--wide,
.dtc__page .dtc__assess-tile--wide, .dtc__page .dtc__people-tile--feature,
.eac__page .eac__good-tile--wide, .ent__page .ent__dash-tile--lg, .ent__page .ent__dash-tile--wide,
.itsc__page .itsc__dim-card--wide, .itsc__page .itsc__trig-tile--lg, .tmc__page .tmc__good-tile--wide {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-align: left;
}

/* ---------- ent__page :: What Enterprise Leaders Track — restore the bento dashboard ----------
   Overrides the shared "corner-bracket" tail pattern above for this one
   section only (same .ent__page .ent__dash-tile / .ent__dash-grid selectors,
   later in cascade, matching specificity), so the other ~20 page types
   sharing that pattern are untouched. The bracket pattern's flattened
   card/icon styling and the "flatten the feature variants" rule just above
   clobbered this section's asymmetric bento layout (see section 10 in the
   main stylesheet body): the headline tile went transparent (white text on
   white), boxed icons collapsed to bare glyphs, and the wide tile lost its
   horizontal layout. This restores the boxed icons, gradient top bar, dark
   headline tile, and horizontal wide tile. */
.ent__page .ent__dash-grid { gap: 22px; }
.ent__page .ent__dash-tile {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid var(--eb);
  background: #fff;
  box-shadow: none;
  transform: none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ent__page .ent__dash-tile:hover { background: #fff; transform: translateY(-6px); border-color: rgba(0, 95, 204, .28); box-shadow: 0 22px 44px rgba(7, 21, 47, .1); }
.ent__page .ent__dash-tile::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: auto;
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, var(--ec), var(--ec2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.ent__page .ent__dash-tile:hover::before { transform: scaleX(1); }
.ent__page .ent__dash-tile::after { content: none; display: none; }
.ent__page .ent__dash-tile > span:first-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 16px;
  padding: 0;
  border-radius: 12px;
  background: rgba(128, 121, 248, .12);
  color: var(--ec2);
  font-size: 17px;
}
.ent__page .ent__dash-tile > h3, .ent__page .ent__dash-tile > h4 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: normal; line-height: 1.4; color: var(--eh); }
.ent__page .ent__dash-tile > h3:hover, .ent__page .ent__dash-tile > h4:hover { color: var(--eh); }
.ent__page .ent__dash-tile > p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--et); }
.ent__page .ent__dash-tile--lg {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: center;
  background: linear-gradient(155deg, #0b1e40, #142a52);
  border-color: transparent;
}
.ent__page .ent__dash-tile--lg::before { background: linear-gradient(90deg, var(--ec3), var(--ec2)); }
.ent__page .ent__dash-tile--lg > span:first-of-type { background: rgba(77, 163, 255, .16); color: var(--ec3); width: 54px; height: 54px; font-size: 21px; }
.ent__page .ent__dash-tile--lg > h3, .ent__page .ent__dash-tile--lg > h4 { color: #fff; font-size: 25px; }
.ent__page .ent__dash-tile--lg > h3:hover, .ent__page .ent__dash-tile--lg > h4:hover { color: #fff; }
.ent__page .ent__dash-tile--lg > p { color: var(--emuted); font-size: 15.5px; }
.ent__page .ent__dash-tile--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  background: #fff;
  border-color: var(--eb);
}
.ent__page .ent__dash-tile--wide > span:first-of-type { margin-bottom: 0; }
.ent__page .ent__dash-tile--wide > h3, .ent__page .ent__dash-tile--wide > h4,
.ent__page .ent__dash-tile--wide > p { margin: 0; }
.ent__page .ent__dash-tile--wide > h3, .ent__page .ent__dash-tile--wide > h4 { margin-bottom: 6px; }
@media (max-width: 767px) {
  .ent__page .ent__dash-tile { padding: 28px 22px; }
}

/* ==KX-REDESIGN-END== */