/*!
Theme Name: Mosaic Child
Theme URI: http://underscores.me/
Author: Invictus Studio
Author URI: http://invictusstudio.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alpha
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alpha is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  line-height: 1.5;
  color: #000;
}
::-webkit-scrollbar {
  width: 10px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: #6a91b9;
  border-radius: 6px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
  background-color: #f6f6f6;
}
ul {
  padding: 0;
  margin: 0;
}
.section {
  padding: 50px 0;
}
a {
  text-decoration: none !important;
  transition: 0.5s ease !important;
}
a,
input,
button {
  outline: 0 !important;
}
.post,
.page {
  margin: 0;
}
body,
p {
  font-weight: 400;
  color: #000;
  font-family: "Proxima Nova Rg";
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-family: "Proxima Nova Lt";
}
.home .entry-title {
  display: none;
}
ul li,
li {
  list-style: none;
}
.skip-link.screen-reader-text {
  display: none;
}
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: inherit;
  opacity: 1;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: inherit;
  opacity: 1;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: inherit;
  opacity: 1;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: inherit;
  opacity: 1;
}
#sidebar {
  display: none;
}
.entry-footer {
  clear: both;
}
#colophon {
  clear: both;
}

/* 404 - NOT FOUND PAGE */

.error-404.not-found {
  text-align: center;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  position: relative;
  background-image: url(/wp-content/uploads/2020/10/404.jpg);
  background-size: cover;
}
.not_found_inner {
  max-width: 69.5%;
}
.error404 #masthead,
.error404 #colophon {
  display: none;
}
.logo a {
  outline: 0 !important;
}
.error-404.not-found .logo {
  padding: 0;
  background-color: transparent;
}
.error-404.not-found h1 {
  font-size: 200px;
  line-height: 1;
  color: #404040;
  margin: 30px 0;
  font-weight: 800;
}
.error-404.not-found h1 span {
  color: #e01e26;
}
.page-header h3 {
  color: #000;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 40px;
}
.page-header p {
  font-size: 22px !important;
  color: #000;
  margin-bottom: 20px;
}
.page-content .return_home {
  background-color: #e01e26;
  color: #fff;
  padding: 20px 50px;
  display: inline-block;
  font-size: 20px;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  border: 2px solid #e01e26;
}
.page-content .return_home:hover {
  transform: translateY(-3px);
  background-color: transparent;
  color: #000;
  transform: scale(1.1);
}

/* 404 - NOT FOUND PAGE ENDS */

/*SEARCH RESULTS - NO RESULTS CSS */

.search-results article.product,
.search-results article.page {
  display: none;
}
.search-results .page-title span::before,
.search-results .page-title span::after {
  content: '"';
}
.search-results .page-title {
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
}
.search-results .page-header {
  width: 100%;
}
.search-results #primary {
  display: flex;
  flex-wrap: wrap;
}
.search-results #primary article {
  width: 30%;
  margin: 0 1.5%;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
  padding-top: 0;
  margin-bottom: 35px;
  border-radius: 6px;
}
.search-results #primary article a.post-thumbnail {
  display: block;
  margin-left: -20px;
  margin-right: -20px;
}
.search-results #primary article a.post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.search-results #primary article .entry-title a {
  display: block;
  color: #000;
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
}
.no-results.not-found {
  text-align: center;
  margin-bottom: 50px;
}
.no-results.not-found .search-form input.search-field {
  height: 45px;
  padding-left: 10px;
  border: 1px solid #eee;
  background-color: #eee;
  color: #333;
  font-size: 14px;
  width: 250px;
}
.no-results.not-found .search-form .search-submit {
  height: 45px;
  padding: 0 30px;
  border: 0;
  background-color: #0b204d;
  color: #fff;
  cursor: pointer;
}
.no-results.not-found .search-form .search-submit:hover {
  background-color: #252525;
}
.no-results.not-found .search-form label span {
  display: none;
  width: 0;
}

/*SEARCH RESULTS - NO RESULTS CSS ENDS*/

/* Modal box CSS*/

.modal {
  background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
  background-color: transparent !important;
  border: 0px solid rgba(0, 0, 0, 0.2) !important;
}
.modal-footer {
  display: none !important;
}
.modal-header {
  border-bottom: 0px !important;
}
.close {
  color: #000 !important;
  opacity: 1 !important;
  border: 1px solid #fff !important;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #fff !important;
  padding: 0 !important;
  float: left !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.modal-dialog {
  max-width: 650px !important;
  margin: 50px auto !important;
}
.close span {
  display: block;
  color: #fff;
  position: absolute;
  left: 120%;
  top: 0;
}
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  height: 50px !important;
}
.dgwt-wcas-no-submit
  .dgwt-wcas-sf-wrapp
  input[type="search"].dgwt-wcas-search-input {
  padding: 15px 15px 15px 40px !important;
}
.dgwt-wcas-details-main-image img {
  max-height: 200px !important;
}
.dgwt-wcas-suggestion-selected {
  background-color: #0b204d;
}
.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
  color: #fff;
}
.dgwt-wcas-suggestion-selected .dgwt-wcas-sp {
  color: #fff;
}
.dgwt-wcas-pd-addtc .add_to_cart_inline {
  margin-left: 20px;
}
.asl_nores {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.results .asl_nores .asl_keyword {
  padding: 5px 0px !important;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  border-top: 1px solid #eee;
}
.asl_nores_header {
  margin-bottom: 10px !important;
}
/*  Modal CSS ENDS */

/*  Drop down menu CSS*/
#primary-menu {
  text-align: center;
}
#primary-menu li {
  display: inline-block;
  padding: 0 10px;
}
#primary-menu li a {
  padding: 10px 0;
  color: #000;
}
.menu-item-has-children {
  position: relative;
}
.menu-item-has-children::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  right: -15px;
  top: 1px;
  display: block;
  color: #1C2956;
}
.menu-item-has-children .sub-menu {
  position: absolute;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.15);
  top: calc(100% + 10px);
  left: 0px;
  width: 220px;
  border-radius: 5px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease-in-out;
  visibility: hidden;
  overflow: hidden;
}
.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#primary-menu .sub-menu li {
  display: block;
  padding: 0;
}
#primary-menu .sub-menu li a:hover {
  color: #fff;
  border-color: transparent;
}
#primary-menu .sub-menu li a {
  display: block;
  text-align: left;
  padding: 17px 10px;
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 9;
  transition: all 0.5s ease-in-out;
  font-size: 16px;
}
#primary-menu .sub-menu li:last-child a {
  border-bottom: 0;
}
#primary-menu .sub-menu li a:hover::before {
  width: 100%;
  background-color: #6a91b9;
  border-color: #6a91b9;
}
#primary-menu .sub-menu li a::before {
  content: "";
  background-color: transparent;
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border-bottom: 1px solid transparent;
}
.menu-toggle {
  display: none;
}

/*  Drop down menu CSS ENDS */

/*
Nav bar
*/
#mm #primary-menu ul.sub-menu li a {
  padding-left: 35px;
}
#mm #primary-menu .sub-menu li a::before {
  content: unset;
}
#mm ul.sub-menu {
  position: relative;
  visibility: visible;
  opacity: 1;
  transform: translate(0);
  display: block !important;
  height: auto !important;
}
#mml {
  padding: 0 15px;
  color: #ffffff;
}
#mml h4 {
  display: inline-block;
  margin-bottom: 0;
  margin-top: 12px;
}
.mm {
  position: relative;
  background-color: #000;
  min-height: 49px;
}

#mmb {
  position: absolute;
  width: 40px;
  height: 50px;
  margin-right: 15px;
  top: 0;
  right: 0;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

#mmb span {
  display: block;
  position: absolute;
  height: 1.5px;
  width: 100%;
  background: #ffffff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#mmb span:nth-child(1) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb span:nth-child(2) {
  top: 26px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mmb.on span {
  height: 2px;
}
#mmb.on span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 11px;
  left: 8px;
}

#mmb.on span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#mmb.on span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

#mm ul {
  padding-left: 0;
  margin-bottom: 0;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1000;
  display: none;
}

#mm li {
  display: block;
  position: relative;
  padding: 0;
}
#mm #primary-menu a {
  display: block;
  padding: 16px 26px 15px 17px;
  border-bottom: #dedede 1px solid;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 25px;
  background-color: #000;
  word-wrap: break-word;
  text-align: left;
}
#mm #primary-menu a:hover {
  background-color: #0b204d;
}
.mm,
#mm {
  display: none;
}
/* 
 * NAVBAR CSS ENDS
 */

/* WOOCOMMERCE CSS START */

.woocommerce td.product-name a {
  color: #000;
  font-weight: 600;
}
.woocommerce td.product-name a:hover {
  color: #0b204d;
}
input#coupon_code {
  width: 200px !important;
  padding-left: 10px;
  margin-right: 10px;
  height: 45px;
  background-color: #eee;
  border: 0;
  border-radius: 3px;
  font-size: 14px;
}
.coupon .button {
  height: 45px;
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  color: #fff;
  height: 45px;
}
.actions button {
  height: 45px;
}
.woocommerce a.added_to_cart {
  padding: 10px 20px;
  border-radius: 3px;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  color: #fff;
  background-color: #0b204d;
  padding: 10px 20px;
  line-height: 1.5;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  color: #fff;
  background-color: #333;
}
.post-type-archive li .added_to_cart {
  background-color: #0b204d !important;
  color: #fff !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}
.wc-proceed-to-checkout a,
#place_order {
  background-color: #0b204d !important;
  color: #fff !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  margin-top: 8px !important;
  font-weight: 600 !important;
}
.wc-proceed-to-checkout a:hover,
#place_order:hover {
  background-color: #252525 !important;
  color: #fff !important;
}
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  float: unset;
  display: block;
  width: 100%;
  height: 45px;
}
a.shipping-calculator-button {
  color: #0b204d;
  text-transform: uppercase;
  font-weight: 600;
}
.woocommerce a.remove,
td.product-remove button {
  background: #0b204d !important;
  color: #fff !important;
  line-height: 17px;
}
#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 100px;
}
.woocommerce-cart-form {
  width: 62%;
  float: left;
}
.woocommerce .cart-collaterals {
  width: 35%;
  float: right;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  float: unset;
  width: 100%;
  background: rgba(84, 84, 84, 0.05);
  padding: 40px 40px 30px;
}
.woocommerce table.shop_table {
  border: 0;
}
#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
  text-align: center;
}
.woocommerce table.shop_table th {
  color: #000 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 13px !important;
}
.woocommerce table.shop_table .actions {
  padding-top: 40px !important;
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
  position: relative;
  margin-bottom: 30px;
  border-bottom: 1px solid #ebe9eb;
  padding-bottom: 20px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
}
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  font-size: 16px;
  padding-left: 0;
  padding-right: 0;
}
.woocommerce .cart-collaterals table.shop_table td {
  padding-left: 0;
  padding-right: 0;
}
.cart_totals tr:not(:last-child) td {
  padding-bottom: 30px !important;
}
.qib-container button {
  cursor: pointer;
}
.woocommerce-shipping-destination {
  font-size: 14px;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  font-size: 14px;
  color: #000;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  padding: 10px;
  font-size: 14px;
}

input[type="checkbox"],
input[type="radio"],
.input-radio,
.input-checkbox {
  width: 17px;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  outline-width: medium;
  position: relative;
  border: none;
  cursor: pointer;
  outline-width: 0;
  border-radius: 50%;
  top: 3px;
}
input[type="radio"]::before {
  background: #0b204d;
}
.input-radio::before,
input[type="radio"]::before,
.input-radio::before,
input[type="checkbox"]::before {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  width: 17px;
  height: 17px;
  display: block;
  border-radius: 50%;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.input-radio::before,
input[type="checkbox"]::before {
  border-radius: 0%;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after,
input[type="radio"]::before,
input[type="radio"]::after,
.input-radio::before,
.input-radio::after,
.input-checkbox::before,
.input-checkbox::after {
  content: "";
}
input[type="radio"]::after,
.input-radio::after,
input[type="checkbox"]::after,
.input-checkbox::after,
.widget_product_categories ul li a::before,
.widget_layered_nav ul li a::before,
.post_tags a,
.wpb_widgetised_column .tagcloud a,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  border-color: rgba(84, 84, 84, 0.8);
}
.input-radio::after,
input[type="radio"]::after {
  border-radius: 50%;
}
input[type="checkbox"]::after,
input[type="radio"]::after,
.input-radio::after,
.input-checkbox::after {
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid #a5a5a5;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
}
.input-radio:checked::before,
input[type="radio"]:checked::before,
.input-radio:checked::before,
input[type="checkbox"]:checked::before {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  background: #0b204d;
}
input[type="radio"]:checked::after,
.input-radio:checked::after,
input[type="checkbox"]:checked::after,
.input-checkbox:checked::after,
.return-to-shop .button.wc-backward {
  border-color: #0b204d;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  color: #000;
  font-weight: 400;
  height: 45px;
}
.woocommerce form .form-row {
  padding: 3px 0;
  margin: 0 0 06px;
  display: block;
}
#calc_shipping_city_field {
  margin-bottom: 2px;
}
.order-total .woocommerce-Price-amount {
  font-weight: 600 !important;
  font-size: 25px;
}
.woocommerce-checkout .checkout_coupon input#coupon_code {
  width: 100% !important;
  padding-left: 15px !important;
  display: inline-block;
  padding: 6px 10px;
}
.checkout.woocommerce-checkout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.woocommerce .col2-set,
.woocommerce-page .col2-set {
  width: 60%;
}
#order_review {
  width: 38%;
  background: rgba(84, 84, 84, 0.05);
  padding: 20px 40px 40px;
  position: relative;
}
#order_review_heading {
  display: none;
}
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
  float: unset;
  width: 100%;
  max-width: 100%;
}
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  float: unset;
  width: 100%;
  max-width: 100%;
}
.checkout_coupon.woocommerce-form-coupon .button {
  height: 45px;
}
.checkout_coupon.woocommerce-form-coupon .form-row-first {
  width: 50%;
}
.woocommerce-checkout
  form.checkout
  .woocommerce-checkout-review-order
  table.woocommerce-checkout-review-order-table
  .product-total {
  text-align: right;
}
.woocommerce-checkout
  form.checkout
  .woocommerce-checkout-review-order
  table.woocommerce-checkout-review-order-table
  thead
  td,
.woocommerce-checkout
  form.checkout
  .woocommerce-checkout-review-order
  table.woocommerce-checkout-review-order-table
  thead
  th,
.woocommerce-checkout
  form.checkout
  .woocommerce-checkout-review-order
  table.woocommerce-checkout-review-order-table
  tfoot
  td,
.woocommerce-checkout
  form.checkout
  .woocommerce-checkout-review-order
  table.woocommerce-checkout-review-order-table
  tfoot
  th {
  border: none;
  vertical-align: top;
}
.woocommerce .shop_table.woocommerce-checkout-review-order-table td {
  padding: 16px 0px;
}
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding-top: 40px;
}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
}
#add_payment_method #payment .payment_method_paypal .about_paypal,
.woocommerce-cart #payment .payment_method_paypal .about_paypal,
.woocommerce-checkout #payment .payment_method_paypal .about_paypal {
  float: right;
  line-height: 20px;
  margin-left: 10px;
  color: #000;
  font-weight: 300;
  font-size: 12px;
  border-bottom: 1px dashed;
}
#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
  width: 80px;
}
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
h3#order_review_heading,
#post-79 .entry-title,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-column__title,
.woocommerce-order-details__title,
.woocommerce-Address-title.title h3,
div#customer_login h2 {
  text-transform: uppercase;
  color: #252525;
  font-size: 24px !important;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 0;
  position: relative;
}
span.select2-selection.select2-selection--single {
  height: 45px !important;
  padding: 9px 0;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 45px;
  right: 10px;
}
form.checkout.woocommerce-checkout label {
  font-size: 14px;
  margin-bottom: 0px;
  font-weight: 500;
  text-transform: uppercase;
}
#order_comments {
  height: 100px;
}
#add_payment_method #payment ul.payment_methods li,
.woocommerce #payment ul.payment_methods li {
  border-bottom: 1px solid rgba(84, 84, 84, 0.15);
  line-height: 16px;
  padding: 17px 0 14px;
}
#add_payment_method #payment ul.payment_methods li div.payment_box,
.woocommerce #payment ul.payment_methods li div.payment_box {
  background-color: transparent;
  line-height: 1.538em;
  padding: 0 35px;
  margin: 0;
  width: 100%;
  font-size: 1rem;
  margin-top: 20px !important;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.woocommerce #payment div.payment_box p {
  font-size: 13px;
  line-height: 1.4285em;
  margin: -2px 0 0;
  margin-bottom: 0px;
  text-shadow: none;
  font-weight: 400;
  color: #333;
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
  content: unset;
}
.woocommerce-privacy-policy-text p {
  font-size: 14px;
  color: #333;
}
.shop_table.woocommerce-checkout-review-order-table thead th,
.shop_table.woocommerce-checkout-review-order-table tfoot th,
.shop_table.woocommerce-checkout-review-order-table tfoot td {
  padding: 10px 0;
}
.woocommerce ul#shipping_method li label {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
}
form.checkout.woocommerce-checkout ul.payment_methods li label {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 14px;
  text-transform: capitalize;
  line-height: 1.3em;
  font-weight: 700;
  color: #000;
  margin-top: 12px;
}
.woocommerce-error {
  border-color: #0b204d !important;
}
.woocommerce-message::before,
.woocommerce-error::before {
  color: #c12a30 !important;
}
.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
  width: 100%;
}
.woocommerce-message a,
a.woocommerce-Button.button,
p.return-to-shop a,
.added_to_cart {
  background-color: #0b204d !important;
  color: #fff !important;
  padding: 10px 22px !important;
  font-size: 16px !important;
  margin-top: 8px !important;
  font-weight: bold;
}
.woocommerce-message a:hover,
a.woocommerce-Button.button:hover,
p.return-to-shop a:hover,
.added_to_cart:hover {
  background-color: #252525 !important;
  color: #fff !important;
}
.woocommerce-message a {
  margin-top: 0 !important;
}
.woocommerce-message,
.woocommerce-notices-wrapper a,
.woocommerce-message::before {
  border-top-color: #0b204d !important;
}
.woocommerce-order-received .woocommerce-customer-details {
  display: none;
}
.woocommerce-order-received
  p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  color: #0b204d;
}
.woocommerce-order-received .woocommerce table.shop_table tfoot td,
.woocommerce-order-received .woocommerce table.shop_table tfoot th {
  border: 0;
  padding-top: 15px;
}
.woocommerce-order-received .woocommerce table.shop_table tbody td,
.woocommerce-order-received .woocommerce table.shop_table tbody th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.9);
  margin-bottom: 40px;
  padding: 15px 0;
}
.woocommerce-order-received .woocommerce table.shop_table td,
.woocommerce-order-received .woocommerce table.shop_table th {
  padding: 15px 0;
}
.woocommerce-order-received
  .woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
  border-collapse: collapse;
}
.woocommerce-order-received .woocommerce td.product-name a {
  color: #0b204d;
  font-weight: 600;
  font-size: 20px;
}
.woocommerce-order-received .woocommerce td.product-name a:hover {
  color: #252525;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
  vertical-align: middle;
  margin-bottom: 0;
  margin-top: 7px;
}
.woocommerce form .form-row.create-account .input-checkbox {
  display: inline-block;
  margin: -2px 8px 0 0;
  text-align: center;
  vertical-align: unset;
}
#ship-to-different-address label span {
  margin-left: 8px;
  font-weight: bold;
  color: #000;
}
.tinv-wishlist .product-action {
  width: 165px;
}
#tinvwl_product_actions {
  height: 45px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.tinvwl-table-manage-list tr td {
  border-top: 1px solid #ccc;
}
.tinvwl-to-left.look_in {
  display: flex;
  flex-wrap: wrap;
}
.select-wrapper {
  flex: 1;
  margin-right: 5px;
  position: relative;
}
.select-wrapper::after {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50%);
  line-height: 0;
  color: #666;
}
.tinvwl-to-left.look_in .tinvwl-input-group {
  width: 100%;
  border-collapse: collapse;
}
.wishlist_item .product-thumbnail img {
  width: 100px;
  height: auto;
  max-width: unset;
}
.woocommerce-Message.woocommerce-Message--info.woocommerce-info .button {
  margin-top: 0 !important;
}
.woocommerce-account .woocommerce-columns--addresses.col2-set.addresses,
.u-columns.woocommerce-Addresses.col2-set.addresses {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.woocommerce-account .woocommerce-column--shipping-address.col-2,
.woocommerce-account .woocommerce-column--billing-address.col-1,
.u-column1.col-1.woocommerce-Address,
.u-column2.col-2.woocommerce-Address {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 48%;
  flex: 0 0 48%;
  max-width: 48%;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
}
.woocommerce-account .col2-set::after,
.woocommerce-account .col2-set::before {
  content: unset;
}
.woocommerce-account .woocommerce .woocommerce-customer-details address {
  border: 0;
  padding: 0 0 10px;
  line-height: 1.8;
}
.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-table
  tfoot
  th {
  text-align: right;
  border-top: 0 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.woocommerce-account .woocommerce table.shop_table {
  border-collapse: collapse;
}
.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-table
  tbody
  tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table th {
  padding: 20px 10px;
}
.woocommerce-account .woocommerce .account-orders-table {
  text-align: center;
}
.woocommerce-account.woocommerce .col2-set,
.woocommerce-account.woocommerce-page .col2-set {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.woocommerce-account #customer_login .col-1,
#customer_login .col-2 {
  flex: 49%;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  height: 400px;
}
/*Dashboad*/
nav.woocommerce-MyAccount-navigation ul {
  padding: 0;
  list-style: none;
  margin: 0 !important;
}
nav.woocommerce-MyAccount-navigation ul li a {
  padding: 9px 10px;
  display: block;
  border: 1px solid #0b204d;
  margin-bottom: 9px;
  color: white;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease-in;
  background-color: #0b204d;
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: #252525;
  color: white;
  border: 1px solid #252525;
}
nav.woocommerce-MyAccount-navigation ul li a:hover {
  color: white !important;
  border: 1px solid #252525;
  background-color: #252525;
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: #0b204d;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: #252525;
}
form.woocommerce-EditAccountForm fieldset {
  padding-left: 0;
  padding-right: 0;
}
/**DASHBOARD END**/
.woocommerce table.my_account_orders .button {
  background-color: #0b204d;
  color: #fff;
  padding: 8px 25px;
  font-size: 14px;
  border-radius: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
  display: inline-block;
  font-weight: 300;
}
.woocommerce table.my_account_orders .button:hover {
  background-color: #252525;
  color: #fff;
}
.woocommerce-account .addresses .title h3 {
  position: relative;
}

.woocommerce-privacy-policy-text a {
  color: #252525;
}
.woocommerce-privacy-policy-text a:hover {
  color: #0b204d;
}
.woocommerce-info {
  border-top-color: #0b204d;
  margin-bottom: 10px !important;
}
.lost_password a {
  color: #252525 !important;
}
.lost_password a:hover {
  color: #0b204d !important;
}
.woocommerce-info::before {
  color: #0b204d;
}
.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
p.woocommerce-LostPassword.lost_password a {
  color: #252525 !important;
}
.woocommerce-form-login-toggle a:hover,
.woocommerce-form-coupon-toggle a:hover,
.woocommerce-privacy-policy-text a:hover,
p.woocommerce-LostPassword.lost_password a:hover {
  color: #0b204d !important;
}
.woocommerce-privacy-policy-text {
  padding-bottom: 20px;
}
.woocommerce form .form-row .required {
  color: #0b204d;
}
a.showcoupon {
  font-size: 16px;
  font-weight: 500;
}

h3#order_review_heading {
  margin-top: 40px;
}

form.woocommerce-cart-form .product-thumbnail {
  height: auto;
  border: none;
}
.woocommerce-cart-form .woocommerce-Price-amount.amount {
  font-size: 16px;
}

.woocommerce-form-coupon-toggle {
  margin-bottom: 40px;
}

ul.woocommerce-error {
  margin-bottom: 50px !important;
}

.tinv-header {
  display: none;
}
.tinv-wishlist.woocommerce.tinv-wishlist-clear {
  margin-top: 30px;
}

.post-type-archive .products li {
  text-align: center;
}

.tax-product_cat .products li {
  text-align: center;
}
.tax-product_cat li .added_to_cart {
  background-color: #c12a30 !important;
  color: #fff !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  border-radius: 25px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  margin-top: 8px !important;
  /*    display: inline-block !important; */
  font-weight: 300 !important;
}
.tax-product_cat li .added_to_cart:hover {
  background-color: #252525 !important;
  color: #fff !important;
}

.quantity {
  position: relative;
  width: fit-content;
}
.woocommerce-cart .quantity .minus {
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 8px 5px 14px 7px !important;
  border-color: #252525;
  font-size: 24px;
  line-height: 0;
}
.woocommerce-cart .quantity .plus {
  background: transparent;
  position: absolute;
  right: 0;
  top: 0px;
  padding: 12px 4px 11px 4px !important;
  border-color: #252525;
  font-size: 24px;
  line-height: 0;
}

a.restore-item {
  margin-left: 10px;
  margin-top: -10px !important;
}

.page-id-317 .woocommerce-form-login {
  height: 492px;
}

.woocommerce-order-received .woocommerce-order-details__title {
  position: relative;
}

.woocommerce-order-received .woocommerce-column__title {
  position: relative;
}

.page-id-316 .wc-backward {
  margin-left: 20px !important;
  color: #252525 !important;
}
.page-id-316 .wc-backward:hover {
  color: #c12a30 !important;
}

.page-id-317 .woocommerce-MyAccount-content .woocommerce-Button {
  position: relative;
  top: -10px !important;
}
/* Woo Commerce End Here */

/* =========================================================
   Header — Figma "Homepage 02" (desktop, >1200px only)
   Reuses existing custom logo + WP nav (menu-1 / #primary-menu).
   Last menu item ("Lets Talk") is styled as the CTA button.
   ========================================================= */
.site-header .header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 60px;
  padding: 25px 0;
}
.site-header .site-branding {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
}
.site-header .custom-logo-link {
  display: block;
  line-height: 0;
  outline: 0;
}
.site-header .custom-logo {
  display: block;
  height: 65px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}
/* Site title / description + search icon are not part of the Figma header */
.site-header .site-title,
.site-header .site-description {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.site-header .header-search {
  display: none;
}

/* Navigation */
.site-header .main-navigation {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}
.site-header .main-navigation .menu-menu-container {
  width: 100%;
}
.site-header #primary-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: initial;
}
.site-header #primary-menu > li {
  display: block;
  margin: 0;
  padding: 0;
}
.site-header #primary-menu > li > a {
  display: block;
  padding: 0;
  font-family:
    "General Sans", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #020202;
}
.site-header #primary-menu > li > a:hover {
  color: #e9992d;
}
.site-header #primary-menu > li:last-child {
    margin-left: 40px;
}
/* CTA button = last menu item ("Lets Talk") */
.site-header #primary-menu > li:last-child > a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  height: 50px;
  padding: 0 30px;
  /* base #020202 + light-blue fill layered on top; fill wipes L->R on hover */
  background-color: #020202;
  background-image: linear-gradient(#6a91b9, #6a91b9);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  border: 1px solid #6a91b9;
  border-radius: 4px;
  box-shadow: 0 0 11.5px rgba(106, 145, 185, 0.6);
  color: #6a91b9;
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  /* match Figma smart-animate: ~300ms ease-out (override global 0.5s) */
  transition:
    background-size 0.3s ease-out,
    color 0.3s ease-out !important;
}
.site-header #primary-menu > li:last-child > a::before {
  content: "\f061"; /* Font Awesome: arrow-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: #6a91b9;
  transition: color 0.3s ease-out;
}
/* Hover = light-blue fill wipes in from left, label + arrow turn white */
.site-header #primary-menu > li:last-child > a:hover {
  background-size: 100% 100%;
  color: #ffffff;
}
.site-header #primary-menu > li:last-child > a:hover::before {
  color: #ffffff;
}

/* =========================================================
   Footer — Figma "Homepage 02" footer (128:683)
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  background: #1c2956;
  padding-top: 80px;
  padding-bottom: 50px;
  z-index: 1;
}
.site-footer .container {
  position: relative;
  z-index: 2;
}

/* Top row: brand | contact | subscribe */
.site-footer .footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-right: 72px;
  padding-bottom: 40px;
}

/* Brand + slogan */
.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 353px;
}
.site-footer .footer-logo {
  display: block;
  line-height: 0;
}
.site-footer .footer-logo img {
  display: block;
  width: 219px;
  height: auto;
}
.site-footer .footer-slogan {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
  color: #ffffff;
}

/* Contact */
.site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 183px;
  font-style: normal;
}
.site-footer .footer-contact__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer .footer-label {
  font-size: 16px;
  line-height: 24px;
  color: #6a91b9;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
}
.site-footer .footer-label--poppins {
  font-family: "Poppins", Arial, sans-serif;
}
.site-footer .footer-value {
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  text-decoration: none !important;
  white-space: nowrap;
}
.site-footer a.footer-value:hover,
.site-footer .footer-copyright a:hover,
.site-footer .footer-backtop:hover {
  color: #e9992d;
}

/* Subscribe + social */
.site-footer .footer-subscribe {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 415px;
}
.site-footer .footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}
.site-footer .footer-newsletter .footer-label {
  display: block;
  margin-bottom: 24px; /* label -> field spacing (Figma gap 48 total incl. field top) */
}
.site-footer .footer-field {
  position: relative;
  width: 399px;
  max-width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 12px;
}
.site-footer .footer-field input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
}
.site-footer .footer-field input::placeholder {
  color: #ffffff;
  opacity: 1;
}
.site-footer .footer-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  height: 40px;
  padding: 8px 24px;
  /* same fill-wipe pattern as the primary CTA buttons; keeps the blue brand */
  background-color: #6a91b9;
  background-image: linear-gradient(#020202, #020202);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}
.site-footer .footer-submit i {
  font-size: 14px;
  /* transform: rotate(-45deg); */
}
.site-footer .footer-submit:hover {
  background-size: 100% 100%;
}

/* Newsletter status message */
.site-footer .footer-newsletter__msg {
  margin: 12px 0 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.site-footer .footer-newsletter__msg--success {
  color: #6a91b9;
}
.site-footer .footer-newsletter__msg--invalid,
.site-footer .footer-newsletter__msg--error {
  color: #e9992d;
}

/* Social icons */
.site-footer .footer-social {
  display: flex;
  gap: 16px;
}
.site-footer .footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #9a9dc1;
  border-radius: 100px;
  color: #ffffff;
  font-size: 18px;
}
.site-footer .footer-social__link svg {
  display: block;
  width: 24px;
  height: 24px;
}
.site-footer .footer-social__link:hover {
  border-color: #e9992d;
  background: #e9992d;
}

/* Bottom bar */
.site-footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  margin-top: 40px;
}
.site-footer .footer-copyright,
.site-footer .footer-copyright a {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #f4f7ff;
}
.site-footer .footer-backtop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #f4f7ff;
}
.site-footer .footer-backtop i {
  font-size: 16px;
}

/* Consistent, subtle transitions across all footer interactive elements
   (overrides the global `a { transition: .5s }` for a unified, premium feel) */
.site-footer a,
.site-footer .footer-submit,
.site-footer .footer-social__link,
.site-footer .footer-field,
.site-footer .footer-field input {
  transition: 0.5s all ease;
}
/* Fill-wipe timing for the submit button (matches the primary CTA buttons) */
.site-footer .footer-submit {
  transition:
    background-size 0.3s ease-out,
    color 0.3s ease-out !important;
}
.site-footer .footer-field:focus-within {
  border-bottom-color: rgba(255, 255, 255, 0.8);
}

/* Giant decorative wordmark */
.site-footer .footer-watermark {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  margin-bottom: -0.16em; /* clip lower edge like Figma */
  text-align: center;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(140px, 15.6vw, 300px);
  line-height: 1;
  letter-spacing: 6px;
  color: #ffffff;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* =========================================================
   Site background video (reusable) — animated plexus behind
   the header and all homepage sections (footer stays static).
   ========================================================= */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #ffffff;
  pointer-events: none;
}
.bg-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
/* Header + homepage content sit above the fixed video */
.home-main {
  position: relative;
  z-index: 1;
}
.home #masthead {
  position: relative;
  z-index: 2;
}

/* =========================================================
   Hero (front-page.php) — Figma "Homepage 02"
   ========================================================= */
.hero {
  position: relative;
  background: transparent;
}
.hero .container {
  position: relative;
  z-index: 1;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding-top: 168px;
  padding-bottom: 120px;
  text-align: center;
}

/* Heading */
.hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.hero__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(60px, 5.2vw, 100px);
  line-height: 1.25;
  text-align: center;
}
.hero__line {
  display: block;
}
.hero__where {
  font-style: italic;
  font-weight: 700;
  color: #1c2956;
}
.hero__line--dark {
  font-weight: 600;
  color: #020202;
}
/* Rotating orange word — continuous vertical belt, pure CSS.
   The slot shrink-wraps to the widest phrase (all phrases live in the track),
   so its width is constant: "Where" never moves and "Work as One." never shifts.
   A cloned first phrase at the end makes the loop seamless (no jump/flicker). */
.hero__rotator {
  display: inline-block;
  overflow: hidden;
  height: 1.25em; /* one line tall */
  vertical-align: bottom;
  color: #e9992d;
  font-weight: 700;
  font-style: normal;
}
.hero__track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  animation: hero-belt 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.hero__word {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  white-space: nowrap;
  text-align: left;
}
/* 4 items (3 phrases + clone) -> each step is -25% of the track */
@keyframes hero-belt {
  0%,
  27% {
    transform: translateY(0);
  } /* Enterprise Systems */
  33%,
  60% {
    transform: translateY(-25%);
  } /* People */
  66%,
  93% {
    transform: translateY(-50%);
  } /* AI Agents */
  100% {
    transform: translateY(-75%);
  } /* clone -> seamless loop */
}
@media (prefers-reduced-motion: reduce) {
  .hero__track {
    animation: none;
  }
}
.hero__divider {
  display: block;
  width: 122px;
  height: 4px;
  background: #6a91b9;
}

/* Subtitle */
.hero__subtitle {
  margin: 0;
  max-width: 914px;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 44px;
  color: #020202;
  text-align: center;
  text-transform: capitalize;
}

/* CTA buttons */
.hero__actions {
  display: flex;
  gap: 20px;
}
.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 260px;
  height: 60px;
  padding: 0 30px;
  border-radius: 4px;
  background-color: #020202;
  background-image: linear-gradient(var(--hero-fill), var(--hero-fill));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition:
    background-size 0.3s ease-out,
    color 0.3s ease-out !important;
}
.hero__btn i {
  font-size: 14px;
}
.hero__btn--blue {
  --hero-fill: #6a91b9;
  border: 1px solid #6a91b9;
  box-shadow: 0 0 11.5px rgba(106, 145, 185, 0.6);
  color: #6a91b9;
}
.hero__btn--orange {
  --hero-fill: #e9992d;
  border: 1px solid #e9992d;
  box-shadow: 0 0 11.5px rgba(233, 153, 45, 0.4);
  color: #e9992d;
}
.hero__btn:hover {
  background-size: 100% 100%;
  color: #ffffff;
}

/* =========================================================
   Technology Is Only Half the Equation (front-page.php)
   ========================================================= */
.tech {
  padding: 60px 0 100px;
  background: transparent;
  position: relative;
}
.tech__inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
/* Columns keep the Figma 851 : 638 ratio and scale with the container */
.tech__media {
  flex: 851 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.tech__content {
  flex: 638 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Image collage */
.tech__pic {
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 28px 35px rgba(0, 0, 0, 0.1),
    0 0 14px rgba(0, 0, 0, 0.07);
}
.tech__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tech__pic--wide {
  width: 86.7%; /* top image is narrower than the row below */
  aspect-ratio: 738 / 360;
}
.tech__row {
  display: flex;
  gap: 34px;
}
.tech__row .tech__pic {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 408 / 360;
}
.tech__pic--wide img {
  object-position: center 30%;
}
.tech__row .tech__pic:first-child img {
  object-position: 30% center;
}

/* Content */
.tech__heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tech__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 65px;
  color: #1c2956;
}
.tech__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}
.tech__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.tech__body p {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #020202;
  text-transform: capitalize;
}

/* =========================================================
   One Partner. Three Ways We Help. (front-page.php)
   ========================================================= */
.ways {
  padding: 60px 0 100px;
  background: transparent;
  position: relative;
}
.ways__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 914px;
  margin: 0 auto 50px;
  text-align: center;
}
.ways__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ways__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: #1c2956;
}
.ways__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}
.ways__intro {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 44px;
  color: #020202;
  text-transform: capitalize;
}
.ways__grid {
  display: flex;
  gap: 30px;
}

/* Reusable image card with hover-reveal overlay */
.card {
  position: relative !important;
  flex: 1 1 0;
  min-width: 0px !important;
  aspect-ratio: 1 / 1;
  border-radius: 20px !important;
  overflow: hidden;
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card--pos-ukg .card__img {
  object-position: 32% center;
}
.card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card:hover .card__overlay,
.card:focus-within .card__overlay {
  opacity: 1;
}
.card__title,
.card__desc,
.card__arrow {
  transform: translateY(14px);
  transition: transform 0.4s ease;
}
.card:hover .card__title,
.card:hover .card__desc,
.card:hover .card__arrow,
.card:focus-within .card__title,
.card:focus-within .card__desc,
.card:focus-within .card__arrow {
  transform: translateY(0);
}
.card__title {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  color: #ffffff;
}
.card__desc {
  margin: 0;
  max-width: 429px;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #ffffff;
  text-transform: capitalize;
}
.card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  color: #ffffff;
}
.card__arrow i {
  font-size: 34px;
  transform: rotate(-45deg);
}
.card__arrow:hover {
  color: #6a91b9;
}
/* =========================================================
   Why Organizations Choose Mosaic (front-page.php)
   Reusable scroll-snap carousel (.carousel).
   ========================================================= */
.why {
  padding: 60px 0 100px;
  background: transparent;
}
.why__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 60px;
}
.why__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.why__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 55px;
  line-height: 1.1;
  color: #1c2956;
}
.why__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}

/* Carousel (reusable) */
.carousel__nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  background: transparent;
  border: 1px solid #6a91b9;
  color: #6a91b9;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease;
}
/* .carousel__arrow--next {
  background: #6a91b9;
  color: #ffffff;
} */
.carousel__arrow:hover {
  background: #6a91b9;
  color: #ffffff;
}
/* .carousel__arrow--next:hover {
  opacity: 0.85;
} */
.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Carousel breaks out of the container on the right, to the screen edge
   (heading + arrows stay container-aligned). */
.why .carousel__viewport,
.tst .carousel__viewport {
  margin-right: calc(50% - 50vw);
}
.carousel__viewport::-webkit-scrollbar {
  display: none;
}
.carousel__track {
  display: flex;
  gap: 30px;
}

/* --- Slick overrides -----------------------------------------------------
   Slick's CSS is enqueued BEFORE style.css, so our `.why-card` / `.tcard`
   rules win the height/width ties at every breakpoint (no per-breakpoint
   hacks). Only Slick rules that still win by specificity are overridden. */
.carousel__track.slick-slider {
  display: block;
} /* root stays block, not our .carousel__track flex */
.carousel__track .slick-list {
  overflow: hidden;
}
.carousel__track .slick-track {
  display: block;
} /* float layout -> track height = tallest slide */
.carousel__track .slick-slide {
  margin-right: 30px;
} /* inter-card gap; height/width come from the card */
/* Slick forces `.slick-initialized .slick-slide{display:block}` — restore the
   cards that rely on flex (why panel right-aligned; quote card column). */
.why-card.slick-slide {
  display: flex;
}
.tcard--quote.slick-slide {
  display: flex;
}
/* Testimonials use a 21.648px gap in Figma, not 30px */
.tst .carousel__track .slick-slide {
  margin-right: 21.648px;
}

/* Why card */
.why-card {
  flex: 0 0 980px;
  width: 980px;
  max-width: 92%;
  height: 550px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
}
.why-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-card__panel {
  position: relative;
  width: 560px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 30px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.5);
}
.why-card__logo {
  display: block;
  height: 51px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.why-card__logo--white {
  filter: brightness(0) invert(1);
}
.why-card__title {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
  color: #ffffff;
}
.why-card__text {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
}

/* =========================================================
   Proven. Trusted. Recognized. (front-page.php)
   Staggered glass stat cards over a decorative line/dot art.
   ========================================================= */
.proven {
  padding: 60px 0 100px;
  background: transparent;
  position: relative;
}
.proven__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  margin-bottom: 40px;
}
.proven__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.proven__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 55px;
  line-height: 1.1;
  color: #1c2956;
}
.proven__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}
.proven__intro {
  margin: 0;
  max-width: 993px;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 44px;
  color: #020202;
  text-align: center;
  text-transform: capitalize;
}

/* Stat band — aspect-locked stage (1620 x 508 in Figma) so the cards and
   the decorative line/dot art register exactly and scale together. */
.proven__stats {
  position: relative;
  width: 100%;
  aspect-ratio: 1620 / 508;
}
/* Decorative line/dot art (Figma group: 1890 x 918, offset above the cards). */
.proven__lines {
  position: absolute;
  left: -8.35%;
  top: -48.03%;
  width: 116.7%;
  height: 180.51%;
  z-index: 0;
  pointer-events: none;
}
.proven__lines img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Reusable stat card — absolutely placed on the stage (Figma coords). */
.stat-card {
  position: absolute;
  z-index: 1;
  width: 23.89%;
  height: 57.09%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 20px;
  text-align: center;
  background: #fff;
  border: 2px solid #6a91b9;
  border-radius: 16px;
}
/* Small connector notch at the top-center of each card */
.stat-card::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 4px;
  background: #6a91b9;
  border-radius: 20px;
}
/* Staggered positions (match Figma exactly) */
.stat-card--a {
  left: 0;
  top: 18.31%;
}
.stat-card--b {
  left: 25.28%;
  top: 42.91%;
}
.stat-card--c {
  left: 50.81%;
  top: 0;
}
.stat-card--d {
  left: 76.34%;
  top: 42.91%;
}

.stat-card__num {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: 55px;
  line-height: 1.12;
  letter-spacing: -1.65px;
  color: #6a91b9;
}
.stat-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.stat-card__label {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  color: #1c2956;
}
.stat-card__desc {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #020202;
}

/* =========================================================
   2025 UKG Partner of the Year (front-page.php)
   ========================================================= */
.ukg {
  padding: 60px 0 80px;
  background: transparent;
  position: relative;
}
.ukg__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: 60px;
}
.ukg__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ukg__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: #1c2956;
}
.ukg__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}
.ukg__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #020202;
}
.ukg__rating i {
  color: #e9992d;
  font-size: 20px;
}

/* Reusable client-logo chip row */
.ukg__logos {
  display: flex;
  gap: 17px;
}
.logo-chip {
  flex: 1 1 0;
  min-width: 0;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: #ffffff;
  border: 4px solid transparent;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 0 10px rgba(0, 0, 0, 0.07);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.logo-chip img {
  max-width: 80%;
  max-height: 66px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.6;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
  filter: contrast(1) grayscale(1);
}
/* Hover = the Figma "hover" variant: 4px light-blue border, full-colour logo,
   chip scales up (no drop-shadow change). */
.logo-chip:hover {
  transform: scale(1.08);
  border-color: #6a91b9;
  box-shadow: none;
  z-index: 1;
}
.logo-chip:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* =========================================================
   Built for Innovation. Driven by People. (front-page.php)
   ========================================================= */
.innov {
  padding: 60px 0 0;
  background: transparent;
  position: relative;
}
.innov__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.innov__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.innov__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: #1c2956;
}
.innov__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}
.innov__body {
  margin: 0;
  max-width: 1101px;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 44px;
  color: #020202;
  text-align: center;
  text-transform: capitalize;
}

/* Full-bleed staggered collage (aspect-locked to the Figma 1920 x 612 group) */
.innov__collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 611.9;
  margin-top: 60px;
}
.innov__pic {
  position: absolute;
  transform: translateX(-50%);
  border-radius: 18px;
  overflow: hidden;
}
.innov__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.innov__pic--1 {
  left: 9.52%;
  top: 6.81%;
  width: 19.03%;
  height: 81.93%;
  border-radius: 0 18px 18px 0;
}
.innov__pic--2 {
  left: 28.44%;
  top: 15.31%;
  width: 17.01%;
  height: 66.02%;
}
.innov__pic--3 {
  left: 47.92%;
  top: 53.22%;
  width: 20.14%;
  height: 41.84%;
}
.innov__pic--4 {
  left: 68.33%;
  top: 27.51%;
  width: 18.89%;
  height: 72.49%;
}
.innov__pic--5 {
  left: 89.34%;
  top: 0;
  width: 21.32%;
  height: 88.52%;
  border-radius: 18px 0 0 18px;
}

/* Hanging Mosaic icon on a line */
.innov__hang {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}
.innov__line {
  width: 2px;
  height: 160px;
  background: #6a91b9;
}
.innov__icon {
  display: block;
  width: 90px;
  height: auto;
}

/* =========================================================
   Deep Expertise Across Nine Industries (front-page.php)
   CSS-only expanding accordion grid.
   ========================================================= */
.ind {
  padding: 60px 0 100px;
  background: transparent;
  position: relative;
}
.ind__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  margin-bottom: 50px;
}
.ind__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ind__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: #1c2956;
}
.ind__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}
.ind__intro {
  margin: 0;
  max-width: 992px;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 44px;
  color: #020202;
  text-align: center;
  text-transform: capitalize;
}

/* Accordion grid */
.ind__grid {
  display: flex;
  gap: 10px;
  height: 650px;
}
.ind-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 0.5s ease;
}
.ind-tile__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.75);
  transition: filter 0.5s ease;
}
.ind-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0) 55%
  );
  pointer-events: none;
}
.ind-tile__label {
  position: absolute;
  left: 44px;
  bottom: 30px;
  z-index: 2;
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
  opacity: 0;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
/* Default active tile (first) */
.ind-tile--default {
  flex-grow: 6.5;
}
.ind-tile--default .ind-tile__img {
  filter: none;
}
.ind-tile--default .ind-tile__label {
  transform: none;
  opacity: 1;
}
/* Hover: collapse all, then expand the hovered one */
.ind__grid:hover .ind-tile {
  flex-grow: 1;
}
.ind__grid:hover .ind-tile__img {
  filter: grayscale(1) brightness(0.75);
}
.ind__grid:hover .ind-tile__label {
  opacity: 0;
}
.ind__grid .ind-tile:hover {
  flex-grow: 6.5;
}
.ind__grid .ind-tile:hover .ind-tile__img {
  filter: none;
}
.ind__grid .ind-tile:hover .ind-tile__label {
  transform: none;
  opacity: 1;
}

/* =========================================================
   What Our Clients Say (front-page.php) — reuses .carousel
   ========================================================= */
.tst {
  padding: 60px 0 100px;
  background: transparent;
  position: relative;
}
.tst__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}
.tst__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tst__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: #1c2956;
}
.tst__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}

/* Reusable testimonial card */
.tcard {
  flex: 0 0 306px;
  width: 306px;
  max-width: 90%;
  height: 378px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
}
/* Video-thumbnail card */
.tcard--video .tcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
}
.tcard--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}
.tcard__foot {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tcard__play {
  flex-shrink: 0;
  width: 43px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}
.tcard__play i {
  margin-left: 2px;
}
.tcard__play:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.08);
}
/* Quote card */
.tcard--quote {
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  background: #1c2956;
  border: 1px solid #6a91b9;
}
.tcard__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tcard__quote {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #ffffff;
}
.tcard--quote .tcard__person {
  margin-top: auto;
}
/* Shared name / org */
.tcard__name {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
}
.tcard--quote .tcard__name {
  font-size: 20px;
}
.tcard__org {
  margin: 4px 0 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
}

/* =========================================================
   Let's Build Something Better Together (front-page.php)
   Sits on the reusable plexus background video.
   ========================================================= */
.cta {
  background: transparent;
  position: relative;
  padding: 250px 0;
  padding-bottom: 300px;
  margin-bottom: 50px;
}
.cta .container {
  position: relative;
  z-index: 1;
}
.cta__globe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 796px;
  max-width: 92%;
  z-index: 0;
  pointer-events: none;
}
.cta__globe img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  animation: cta-globe-spin 15s linear infinite;
}
@keyframes cta-globe-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta__globe img {
    animation: none;
  }
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.cta__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cta__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: #1c2956;
}
.cta__underline {
  display: block;
  width: 122px;
  height: 4px;
  background: #e9992d;
}
.cta__sub {
  margin: 0;
  max-width: 900px;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 44px;
  color: #020202;
  text-align: center;
  text-transform: capitalize;
}

/* =========================================================
   Responsive — homepage below 1200px (desktop 1200px+ unchanged)
   One consolidated block per breakpoint. Header not touched.
   ========================================================= */
/* Same desktop header, spacing scaled down to fit the 1240 container on a
   single line (no wrap / no responsive switch). Placed after the base header
   rules so it wins on source order within the 1200-1650 range. */
/* Custom container widths (Mosaic).
   >=1651px  -> 1600px
   1200-1650 -> 1240px
   <1200px   -> Bootstrap default (untouched, responsive TBD) */
@media (min-width: 1651px) {
  .container {
    max-width: 1600px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1650px) {
  .container {
    max-width: 1240px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1650px) {
  .site-header .header-inner {
    gap: 24px;
  }
  .site-header .custom-logo {
    height: 48px;
  }
  .site-header #primary-menu {
    gap: 30px;
  }
  .site-header #primary-menu > li > a, #primary-menu .sub-menu li a {
    font-size: 15px;
  }
  .site-header #primary-menu > li:last-child > a {
    padding: 0 22px;
    gap: 12px;
  }
}

/* =========================================================
   1600px polish — tighten vertical rhythm + oversized art so
   the homepage reads balanced on shorter (1600x780) screens.
   Header not touched. Desktop (>1600) unaffected.
   ========================================================= */
@media (max-width: 1600px) {
  /* Hero: pull content up, trim the display heading */
  .hero__inner {
    padding-top: 120px;
    padding-bottom: 80px;
    gap: 36px;
  }
  .hero__title {
    font-size: clamp(48px, 4.6vw, 74px);
  }
  .hero__subtitle {
    font-size: 20px;
    line-height: 34px;
  }

  /* Technology */
  .tech {
    padding: 50px 0 70px;
  }
  .tech__inner {
    gap: 48px;
  }
  .tech__title {
    font-size: 44px;
    line-height: 56px;
  }

  /* Three Ways */
  .ways {
    padding: 50px 0 70px;
  }
  .ways__head {
    margin: 0 auto 40px;
  }

  /* Why Choose */
  .why {
    padding: 50px 0 70px;
  }
  .why__head {
    margin-bottom: 44px;
  }
  .why-card {
    height: 480px;
  }

  /* Proven */
  .proven {
    padding: 50px 0 70px;
  }

  /* UKG */
  .ukg {
    padding: 50px 0 60px;
  }
  .ukg__head {
    margin-bottom: 44px;
  }

  /* Innovation */
  .innov {
    padding: 50px 0 0;
  }
  .innov__collage {
    margin-top: 44px;
  }

  /* Industries */
  .ind {
    padding: 50px 0 70px;
  }
  .ind__head {
    margin-bottom: 40px;
  }
  .ind__grid {
    height: 560px;
  }

  /* Testimonials */
  .tst {
    padding: 50px 0 70px;
  }
  .tst__head {
    margin-bottom: 40px;
  }

  /* CTA: huge 250/300 padding + 796px globe overwhelm a 780px screen */
  .cta {
    padding: 160px 0 200px;
  }
  .cta__globe {
    width: 620px;
  }

  /* Footer */
  .site-footer {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .innov__line {
    height: 100px;
  }
  .innov__icon {
    width: 70px;
  }
}

/* =========================================================
   1440px polish — tighter rhythm again for smaller laptops
   (verified 1366x700). Header + >1440 + 1600-block untouched.
   ========================================================= */
@media (max-width: 1440px) {
  /* Hero */
  .hero__inner {
    padding-top: 90px;
    padding-bottom: 60px;
    gap: 30px;
  }
  .hero__title {
    font-size: clamp(42px, 4.4vw, 64px);
  }
  .hero__subtitle {
    font-size: 18px;
    line-height: 32px;
    max-width: 820px;
  }

  /* Technology */
  .tech {
    padding: 40px 0 56px;
  }
  .tech__title {
    font-size: 40px;
    line-height: 52px;
  }

  /* Three Ways */
  .ways {
    padding: 40px 0 56px;
  }

  /* Why Choose */
  .why {
    padding: 40px 0 56px;
  }
  .why__head {
    margin-bottom: 36px;
  }
  .why__title {
    font-size: 46px;
  }
  .why-card {
    height: 440px;
  }

  /* Proven */
  .proven {
    padding: 40px 0 56px;
  }
  .proven__title {
    font-size: 46px;
  }

  /* UKG */
  .ukg {
    padding: 40px 0 50px;
  }

  /* Innovation */
  .innov {
    padding: 40px 0 0;
  }
  .innov__collage {
    margin-top: 36px;
  }

  /* Industries */
  .ind {
    padding: 40px 0 56px;
  }
  .ind__grid {
    height: 500px;
  }

  /* Testimonials */
  .tst {
    padding: 40px 0 56px;
  }

  /* CTA */
  .cta {
    padding: 120px 0 160px;
  }
  .cta__globe {
    width: 520px;
  }

  /* Footer */
  .site-footer {
    padding-top: 48px;
    padding-bottom: 36px;
  }
}

/* =========================================================
   1365px polish — narrower stage (verified 1200x800).
   Header + >1365 + 1600/1440 blocks untouched.
   ========================================================= */
@media (max-width: 1365px) {
  /* Hero */
  .hero__title {
    font-size: clamp(38px, 4.4vw, 56px);
  }
  .hero__subtitle {
    max-width: 760px;
  }

  /* Technology two-column: tighten gap + heading */
  .tech__inner {
    gap: 40px;
  }
  .tech__title {
    font-size: 36px;
    line-height: 48px;
  }

  /* Section headings scale down for the narrower stage */
  .ways__title,
  .why__title,
  .proven__title,
  .ukg__title,
  .innov__title,
  .ind__title,
  .tst__title,
  .cta__title {
    font-size: 42px;
  }

  /* Three Ways cards */
  .ways__grid {
    gap: 24px;
  }

  /* Why carousel */
  .why-card {
    height: 420px;
  }

  /* Industries */
  .ind__grid {
    height: 460px;
  }

  /* CTA */
  .cta {
    padding: 110px 0 150px;
  }
  .cta__globe {
    width: 460px;
  }

  /* Footer: relax right padding so subscribe column isn't cramped */
  .site-footer .footer-main {
    padding-right: 24px;
  }
}

/* Mobile off-canvas nav — hidden on desktop; revealed in the 1199 block. */
.mnav {
  display: none;
}

/* Industries slider arrows — hidden on desktop (accordion); shown <=991px. */
.ind__nav {
  display: none;
}

/* =========================================================
   1199px — homepage balance + mobile header/off-canvas nav
   (verified 1200-below at 1199x800). >1199 untouched.
   ========================================================= */
@media (max-width: 1199px) {
  /* Content stage: keep a comfortable width instead of the narrow default */
  .container {
    max-width: 1140px;
  }

  /* Desktop header off, mobile header on */
  #masthead {
    display: none;
  }
  .mnav {
    display: block;
    position: relative;
    z-index: 1002;
  }

  /* --- Mobile top bar (transparent, sits over the hero like desktop) --- */
  .mnav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: transparent;
  }
  .mnav__brand {
    display: inline-flex;
    line-height: 0;
  }
  .mnav__brand .custom-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
  }
  .mnav__open {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 32px;
    padding: 5px 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .mnav__open span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    border-radius: 2px;
    background: #020202;
  }

  /* --- Overlay --- */
  .mnav__overlay {
    position: fixed;
    inset: 0;
    z-index: 1003;
    background: rgba(2, 2, 2, 0.6);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease;
  }

  /* --- Drawer (full-screen, slides from right) --- */
  .mnav__drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1004;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #1c2956;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mnav__drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    background: #1c2956;
  }
  /* Dark drawer -> white logo */
  .mnav__drawer-top .custom-logo {
    filter: brightness(0) invert(1);
  }
  .mnav__close {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .mnav__close span {
    position: absolute;
    left: 8px;
    top: 50%;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
  }
  .mnav__close span:first-child {
    transform: rotate(45deg);
  }
  .mnav__close span:last-child {
    transform: rotate(-45deg);
  }

  /* --- Nav (existing WP menu) --- */
  .mnav__nav {
    padding: 8px 0 40px;
  }
  .mnav__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mnav__nav li {
    display: block;
  }
  .mnav__nav a {
    display: block;
    padding: 16px 24px;
    color: #ffffff;
    font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mnav__nav a:hover,
  .mnav__nav .current-menu-item > a {
    color: #e9992d;
  }
  /* Submenus: expanded + indented (no JS toggle needed) */
  .mnav__nav .sub-menu {
    position: static;
  }
  .mnav__nav .sub-menu a {
    padding-left: 44px;
    font-size: 16px;
    color: #cdd6ea;
  }
  /* Last nav item = the desktop "Let's Talk" CTA button (exact same style:
     arrow-first, fill-wipe hover, same colours/typography). */
  .mnav__nav > ul > li:last-child {
    padding: 22px 24px;
  }
  .mnav__nav > ul > li:last-child > a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    height: 50px;
    padding: 0 30px;
    background-color: #020202;
    background-image: linear-gradient(#6a91b9, #6a91b9);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    border: 1px solid #6a91b9;
    border-radius: 4px;
    box-shadow: 0 0 11.5px rgba(106, 145, 185, 0.6);
    color: #6a91b9;
    font-weight: 600;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    transition:
      background-size 0.3s ease-out,
      color 0.3s ease-out;
  }
  .mnav__nav > ul > li:last-child > a::before {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    color: #6a91b9;
    transition: color 0.3s ease-out;
  }
  .mnav__nav > ul > li:last-child > a:hover {
    background-size: 100% 100%;
    color: #ffffff;
  }
  .mnav__nav > ul > li:last-child > a:hover::before {
    color: #ffffff;
  }

  /* --- Open state --- */
  .mnav.is-open .mnav__overlay {
    opacity: 1;
    visibility: visible;
  }
  .mnav.is-open .mnav__drawer {
    transform: translateX(0);
  }

  /* Lock body scroll while the drawer is open. position:fixed (with JS-set
     `top`) fully freezes the background incl. iOS Safari; overflow:hidden
     alone is insufficient on mobile. */
  body.mnav-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  /* --- Typography: scale headings + paragraphs down for tablet/mobile --- */
  .hero__title {
    font-size: clamp(30px, 5vw, 44px);
  }
  .hero__subtitle {
    font-size: 16px;
    line-height: 28px;
    max-width: 680px;
  }
  .ways__title,
  .why__title,
  .proven__title,
  .ukg__title,
  .innov__title,
  .ind__title,
  .tst__title,
  .cta__title {
    font-size: 34px;
    line-height: 1.15;
  }
  .tech__title {
    font-size: 32px;
    line-height: 42px;
  }
  .ways__intro,
  .proven__intro,
  .innov__body,
  .ind__intro {
    font-size: 16px;
    line-height: 30px;
  }
  .cta__sub {
    font-size: 18px;
    line-height: 32px;
  }
  .tech__body p {
    font-size: 14px;
    line-height: 26px;
  }
  .card__title {
    font-size: 26px;
  }
  .card__desc {
    font-size: 16px;
    line-height: 26px;
  }
  /* Why card: keep the desktop 980:550 proportion (don't inherit the 1365
     420px height, which squashes it). Scale width down to the narrower
     container here so the next-card peek stays clearly visible like desktop.
     aspect-ratio keeps equal heights and no stretch/squash. */
  .why-card {
    width: min(800px, 84vw);
    height: auto;
    aspect-ratio: 980 / 550;
  }
  .why-card__title {
    font-size: 24px;
    line-height: 32px;
  }
  .why-card__text {
    font-size: 16px;
    line-height: 26px;
  }
  .stat-card__num {
    font-size: 40px;
  }
  .stat-card__label {
    font-size: 18px;
  }
  .stat-card__desc {
    font-size: 14px;
    line-height: 20px;
  }

  /* --- Homepage buttons: smaller, same fill-wipe hover --- */
  .hero__actions {
    gap: 16px;
  }
  .hero__btn {
    width: 210px;
    height: 50px;
    padding: 0 22px;
    gap: 12px;
    font-size: 12px;
    letter-spacing: 1.2px;
  }
  .hero__btn i {
    font-size: 12px;
  }

  /* --- Footer: wrap columns, fix spacing/alignment, tame watermark --- */
  .site-footer .footer-main {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
    padding-right: 0;
    padding-bottom: 30px;
  }
  .site-footer .footer-brand {
    flex: 1 1 100%;
    width: auto;
    max-width: 560px;
    gap: 20px;
  }
  .site-footer .footer-contact {
    flex: 1 1 200px;
    width: auto;
    gap: 28px;
  }
  .site-footer .footer-subscribe {
    flex: 1 1 320px;
    width: auto;
  }
  .site-footer .footer-field {
    width: 100%;
  }
  .site-footer .footer-value {
    font-size: 16px;
    line-height: 26px;
  }
  .site-footer .footer-bottom {
    margin-top: 24px;
    padding: 20px 0;
  }
  .site-footer .footer-watermark {
    font-size: clamp(90px, 15vw, 200px);
  }
  .ind-tile__label {
    font-size: 26px;
    left: 25px;
    bottom: 25px;
  }
  .innov__line {
    height: 70px;
  }
  .innov__icon {
    width: 60px;
  }
}

/* =========================================================
   991px — tablet portrait. Stack multi-column sections, wrap
   grids, convert aspect-locked stages to flow. Header/mobile
   nav (finalized) untouched. Hover/animations preserved.
   ========================================================= */
@media (max-width: 991px) {
  /* --- Typography: one step smaller --- */
  .hero__title {
    font-size: clamp(28px, 6vw, 40px);
  }
  .hero__subtitle {
    font-size: 15px;
    line-height: 26px;
    max-width: 620px;
  }
  .ways__title,
  .why__title,
  .proven__title,
  .ukg__title,
  .innov__title,
  .ind__title,
  .tst__title,
  .cta__title {
    font-size: 30px;
  }
  .tech__title {
    font-size: 28px;
    line-height: 38px;
  }
  .ways__intro,
  .proven__intro,
  .innov__body,
  .ind__intro {
    font-size: 15px;
    line-height: 28px;
  }
  .cta__sub {
    font-size: 16px;
    line-height: 30px;
  }

  /* --- Hero: tighter --- */
  .hero__inner {
    padding-top: 64px;
    padding-bottom: 48px;
    gap: 26px;
  }

  /* --- Technology: stack collage above copy --- */
  .tech {
    padding: 40px 0 56px;
  }
  .tech__inner {
    flex-direction: column;
    gap: 32px;
  }
  .tech__media,
  .tech__content {
    flex: 1 1 auto;
    width: 100%;
  }

  /* --- Three Ways: 2 equal cards per row; last card same size, centered --- */
  .ways__grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .ways__grid .card {
    flex: 0 0 calc(50% - 10px);
  }

  /* --- Slider arrows: scale down (design + hover unchanged) --- */
  .carousel__arrow {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  /* --- Why carousel: one card in view --- */
  .why__head {
    margin-bottom: 32px;
  }
  .why-card {
    width: min(720px, 90vw);
    height: auto;
    aspect-ratio: 980 / 560;
  }
  .why-card__panel {
    width: 66%;
    min-width: 240px;
    padding: 28px 22px;
  }
  .why-card__title {
    font-size: 22px;
    line-height: 30px;
  }
  .why-card__text {
    font-size: 15px;
    line-height: 24px;
  }

  /* --- Proven: absolute stage -> vertical stack, hide line art --- */
  .proven__stats {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 0;
  }
  .proven__lines {
    display: none;
  }
  .stat-card {
    position: static;
    width: 100%;
    max-width: 440px;
    height: auto;
    padding: 30px 24px;
  }
  .stat-card--a,
  .stat-card--b,
  .stat-card--c,
  .stat-card--d {
    left: auto;
    top: auto;
  }

  /* --- UKG logos: 3 per row --- */
  .ukg__logos {
    flex-wrap: wrap;
    gap: 16px;
  }
  .logo-chip {
    flex: 1 1 28%;
    max-width: 31%;
    height: 100px;
  }

  /* --- Innovation: full-bleed stage -> centered wrapped image row --- */
  .innov__collage {
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 50px;
    padding-top: 190px;
  }
  .innov__pic {
    position: static;
    transform: none;
    flex: 0 0 calc(33.333% - 10px);
    width: auto;
    height: auto;
    aspect-ratio: 3 / 4;
  }
  /* --- Industries: accordion -> one-card Slick slider (<=991px) --- */
  .ind__slider {
    position: relative;
  }
  .ind__nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }
  .ind__grid {
    flex-direction: row;
    height: auto;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ind__grid::-webkit-scrollbar {
    display: none;
  }
  /* Slick internals for the industries slider (Slick CSS loads first, so
     .ind-tile height wins; force block root/track for the float layout) */
  .ind__grid.slick-slider {
    display: block;
  }
  .ind__grid .slick-track {
    display: block;
  }
  .ind__grid .slick-slide {
    margin-right: 16px;
  }
  .ind-tile {
    flex: 0 0 auto;
    width: min(640px, 82vw);
    height: 420px;
    scroll-snap-align: center;
  }
  /* Every slide full-colour + label (touch: no hover accordion) */
  .ind-tile__img,
  .ind__grid:hover .ind-tile__img {
    filter: none;
  }
  .ind-tile__label,
  .ind__grid:hover .ind-tile__label {
    transform: none;
    opacity: 1;
    left: 28px;
    bottom: 24px;
    font-size: 28px;
  }
  /* Neutralise the desktop flex-grow expand inside the scroller */
  .ind__grid:hover .ind-tile,
  .ind__grid .ind-tile:hover,
  .ind-tile--default {
    flex-grow: 0;
  }

  /* --- Testimonials --- */
  .tst__head {
    margin-bottom: 32px;
  }
  .tcard {
    width: 300px;
  }

  /* --- CTA: smaller stage + globe --- */
  .cta {
    padding: 90px 0 120px;
  }
  .cta__globe {
    width: 380px;
  }

  /* --- Footer: subscribe drops to its own row --- */
  .site-footer .footer-subscribe {
    flex: 1 1 100%;
  }
  .tech__pic--wide {
    width: 100%;
  }
  .innov__pic--1,
  .innov__pic--5 {
    border-radius: 18px;
  }
}

/* =========================================================
   767px — tablet portrait. Relocated after the 991 block so it
   wins the cascade. (Legacy header mobile-menu rules kept intact;
   .mm/#mm are no longer in the DOM — the finalized nav is .mnav.)
   ========================================================= */
@media (max-width: 767px) {
  .mm,
  #mm {
    display: block;
  }
  #primary-menu {
    display: none;
  }

  /* --- Typography: tablet scale --- */
  .hero__title {
    font-size: clamp(24px, 7vw, 34px);
  }
  .hero__subtitle {
    font-size: 14px;
    line-height: 24px;
    max-width: 520px;
  }
  .ways__title,
  .why__title,
  .proven__title,
  .ukg__title,
  .innov__title,
  .ind__title,
  .tst__title,
  .cta__title {
    font-size: 26px;
    line-height: 1.2;
  }
  .tech__title {
    font-size: 24px;
    line-height: 32px;
  }
  .ways__intro,
  .proven__intro,
  .innov__body,
  .ind__intro {
    font-size: 14px;
    line-height: 26px;
  }
  .cta__sub {
    font-size: 15px;
    line-height: 28px;
  }
  .tech__body p {
    font-size: 14px;
    line-height: 25px;
  }
  .card__title {
    font-size: 22px;
  }
  .card__desc {
    font-size: 15px;
    line-height: 24px;
  }

  /* --- Section rhythm (consistent vertical spacing) --- */
  .hero__inner {
    padding-top: 52px;
    padding-bottom: 40px;
    gap: 20px;
  }
  .tech {
    padding: 32px 0 44px;
  }
  .tech__inner {
    gap: 26px;
  }
  .ways {
    padding: 32px 0 44px;
  }
  .ways__head {
    margin: 0 auto 28px;
  }
  .why {
    padding: 32px 0 44px;
  }
  .why__head {
    margin-bottom: 26px;
  }
  .proven {
    padding: 32px 0 44px;
  }
  .ukg {
    padding: 32px 0 40px;
  }
  .ukg__head {
    margin-bottom: 28px;
  }
  .innov {
    padding: 32px 0 0;
  }
  .innov__collage {
    margin-top: 26px;
  }
  .ind {
    padding: 32px 0 44px;
  }
  .ind__head {
    margin-bottom: 28px;
  }
  .tst {
    padding: 32px 0 44px;
  }
  .tst__head {
    margin-bottom: 26px;
  }

  /* --- Buttons: tablet-sized --- */
  .hero__actions {
    gap: 14px;
  }
  .hero__btn {
    width: auto;
    min-width: 168px;
    height: 46px;
    padding: 0 18px;
    gap: 10px;
    font-size: 11px;
  }

  /* --- Three Ways: single column, cards fill width --- */
  .ways__grid .card {
    flex: 0 0 100%;
  }

  /* --- Why: one card, panel fills; clear peek --- */
  .why-card {
    width: min(600px, 88vw);
    height: auto;
    aspect-ratio: 980 / 620;
  }
  .why-card__panel {
    width: 100%;
    min-width: 0;
    padding: 24px 20px;
  }
  .why-card__title {
    font-size: 20px;
    line-height: 28px;
  }
  .why-card__text {
    font-size: 14px;
    line-height: 23px;
  }

  /* --- Proven: stat cards fill width --- */
  .stat-card {
    max-width: 100%;
  }

  /* --- UKG: 2 logos per row --- */
  .logo-chip {
    flex: 1 1 44%;
    max-width: 47%;
    height: 90px;
  }

  /* --- Innovation: 2-column image grid --- */
  .innov__pic {
    flex: 0 0 calc(50% - 7px);
  }

  /* --- Industries: one-card slider, tablet size --- */
  .ind-tile {
    width: min(520px, 86vw);
    height: 360px;
  }
  .ind-tile__label {
    font-size: 24px;
    left: 24px;
    bottom: 22px;
  }

  /* --- Testimonials: slightly smaller card + clear peek --- */
  .tcard {
    width: 260px;
    height: 340px;
  }

  /* --- CTA: smaller stage + globe --- */
  .cta {
    padding: 70px 0 100px;
  }
  .cta__globe {
    /* width: 300px; */
  }

  /* --- Footer: single column, balanced --- */
  .site-footer {
    padding-top: 44px;
    padding-bottom: 32px;
  }
  .site-footer .footer-main {
    flex-direction: column;
    gap: 32px;
  }
  .site-footer .footer-brand,
  .site-footer .footer-contact,
  .site-footer .footer-subscribe {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    margin-top: 0;
  }
  .site-footer .footer-watermark {
    font-size: clamp(70px, 20vw, 130px);
  }
  .tcard__quote {
    font-size: 14px;
    line-height: 24px;
  }
}

/* =========================================================
   575px — phones (verified 360px). Premium mobile layout.
   Placed last so it wins the cascade. Header/mnav untouched.
   ========================================================= */
@media (max-width: 575px) {
  /* --- Typography --- */
  .hero__title {
    font-size: clamp(30px, 9vw, 34px);
    line-height: 1.25;
  }
  .hero__subtitle {
    font-size: 16px;
    line-height: 26px;
    max-width: 100%;
  }
  .ways__title,
  .why__title,
  .proven__title,
  .ukg__title,
  .innov__title,
  .ind__title,
  .tst__title,
  .cta__title {
    font-size: 28px;
    line-height: 38px;
  }
  .tech__title {
    font-size: 28px;
    line-height: 38px;
  }
  .ways__intro,
  .proven__intro,
  .innov__body,
  .ind__intro,
  .cta__sub {
    font-size: 16px;
    line-height: 26px;
  }
  .tech__body p {
    font-size: 16px;
    line-height: 26px;
  }
  .card__title {
    font-size: 22px;
  }
  .card__desc {
    font-size: 16px;
    line-height: 25px;
  }

  /* --- Section rhythm (consistent) --- */
  .hero__inner {
    padding-top: 48px;
    padding-bottom: 36px;
    gap: 20px;
  }
  .tech {
    padding: 30px 0 40px;
  }
  .tech__inner {
    gap: 24px;
  }
  .ways {
    padding: 30px 0 40px;
  }
  .ways__head {
    margin: 0 auto 24px;
  }
  .why {
    padding: 30px 0 40px;
  }
  .why__head {
    margin-bottom: 24px;
  }
  .proven {
    padding: 30px 0 40px;
  }
  .ukg {
    padding: 30px 0 36px;
  }
  .ukg__head {
    margin-bottom: 24px;
  }
  .innov {
    padding: 30px 0 0;
  }
  .innov__collage {
    margin-top: 24px;
    padding: 0 15px;
    padding-top: 190px;
  }
  .ind {
    padding: 30px 0 40px;
  }
  .ind__head {
    margin-bottom: 24px;
  }
  .tst {
    padding: 30px 0 40px;
  }
  .tst__head {
    margin-bottom: 24px;
  }

  /* --- Buttons: full-width, centered --- */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 14px;
  }
  .hero__btn {
    width: 100%;
    max-width: 300px;
    min-width: 0;
    height: 50px;
    font-size: 12px;
  }

  /* --- Three Ways: full-width cards --- */
  .ways__grid .card {
    flex: 0 0 100%;
  }

  /* --- Why: one card, portrait aspect, panel full --- */
  .why-card {
    width: min(340px, 92vw);
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .why-card__panel {
    width: 100%;
    min-width: 0;
    padding: 22px 18px;
    gap: 18px;
  }
  .why-card__title {
    font-size: 19px;
    line-height: 26px;
  }
  .why-card__text {
    font-size: 15px;
    line-height: 23px;
  }

  /* --- Proven: stat cards full width, even spacing --- */
  .proven__stats {
    gap: 16px;
  }
  .stat-card {
    max-width: 100%;
  }

  /* --- UKG: 2 logos per row, equal --- */
  .logo-chip {
    flex: 1 1 44%;
    max-width: 47%;
    height: 84px;
  }

  /* --- Innovation: single-column stack --- */
  .innov__pic {
    flex: 0 0 100%;
    aspect-ratio: 16 / 10;
  }

  /* --- Industries: single-card slider --- */
  .ind-tile {
    width: min(300px, 88vw);
    height: 340px;
  }
  .ind-tile__label {
    font-size: 22px;
    left: 22px;
    bottom: 20px;
  }

  /* --- Testimonials: one full-width card, equal height --- */
  .tcard {
    width: min(320px, 90vw);
    height: 360px;
  }

  /* --- CTA: globe scales behind content --- */
  .cta {
    padding: 60px 0 84px;
    margin-bottom: 10px;
  }
  .cta__globe {
    /* width: 240px; */
  }

  /* --- Footer: clean single column --- */
  .site-footer {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .site-footer .footer-main {
    gap: 28px;
  }
  .site-footer .footer-watermark {
    font-size: clamp(48px, 18vw, 90px);
  }
  .mnav__brand .custom-logo {
    height: 40px;
  }
}

/* =========================================================
   Inner pages (Solutions / UKG / SAP / AI) — reuses homepage
   hero, .card grid, section-head pattern and .cta. Only the
   items below are page-specific. Layouts are fluid (flex-wrap)
   so they inherit responsive behaviour without new breakpoints.
   ========================================================= */

/* Content sits above the fixed background video (like the homepage). */
.page .site-main {
  position: relative;
  z-index: 1;
}
.page #masthead {
  position: relative;
  z-index: 2;
}

/* Generic inner-page section rhythm (matches homepage spacing). */
.pg {
  position: relative;
  padding: clamp(40px, 6vw, 60px) 0 clamp(56px, 9vw, 100px);
}

/* Feature / bullet list (How We Engage, What We Do, What We Offer) */
.feature-list {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.08),
    0 0 10px rgba(0, 0, 0, 0.05);
}
.feature-list__item::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 26px;
  color: #6a91b9;
  flex: 0 0 auto;
}
.feature-list__text {
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #020202;
}

/* Six-pillar grid (UKG) */
.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.pillar {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.08),
    0 0 10px rgba(0, 0, 0, 0.05);
}
.pillar__num {
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1px;
  color: #6a91b9;
}
.pillar__title {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #1c2956;
}
.pillar__desc {
  margin: 0;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #020202;
}

/* Proof quote (UKG) */
.proof__quote {
  margin: 0 auto;
  max-width: 860px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
  color: #1c2956;
  text-align: center;
}
.proof__cite {
  margin: 24px 0 0;
  text-align: center;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #6a91b9;
}

/* =========================================================
   INNER PAGES — premium system (Solutions / UKG / SAP / AI)
   Reuses the homepage design tokens: navy #1c2956, blue #6a91b9,
   orange #e9992d, Cormorant display, General Sans UI, fill-wipe
   buttons, orange underline, card shadows. Namespaced `.ip-*`.
   Fluid-first; 2 bespoke breakpoints (900 / 560) at the end.
   ========================================================= */

/* --- Scroll reveal (only hidden once the JS gate is active, so the page
   stays fully visible if scripts fail to load) --- */
.ip-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.7, 0.24, 1),
    transform 0.8s cubic-bezier(0.22, 0.7, 0.24, 1);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.ip-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ip-reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Page canvas --- */
.ip-page {
  position: relative;
}
.ip-section {
  position: relative;
  padding: clamp(60px, 9vw, 130px) 0;
}
.ip-section--tight {
  padding: clamp(40px, 6vw, 80px) 0;
}
.ip-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Decorative soft gradient blobs (brand colours, low opacity) */
.ip-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.ip-blob--blue {
  background: radial-gradient(circle at 30% 30%, rgba(106, 145, 185, 0.55), transparent 70%);
}
.ip-blob--orange {
  background: radial-gradient(circle at 30% 30%, rgba(233, 153, 45, 0.4), transparent 70%);
}
.ip-blob--navy {
  background: radial-gradient(circle at 30% 30%, rgba(28, 41, 86, 0.35), transparent 70%);
}

/* --- Eyebrow / headings --- */
.ip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6a91b9;
}
.ip-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #e9992d;
}
.ip-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  color: #1c2956;
  letter-spacing: -0.5px;
}
.ip-title .accent {
  color: #e9992d;
  font-style: italic;
}
.ip-lead {
  margin: 22px 0 0;
  max-width: 56ch;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
  color: #3a4260;
}
.ip-head {
  max-width: 760px;
}
.ip-head--center {
  margin: 0 auto;
  text-align: center;
}
.ip-head--center .ip-lead {
  margin-left: auto;
  margin-right: auto;
}
.ip-head--center .ip-eyebrow::before {
  display: none;
}

/* Reuse the homepage button; add a ghost variant for dark panels */
.ip-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.hero__btn--ghost {
  --hero-fill: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  box-shadow: none;
}
.hero__btn--ghost:hover {
  color: #1c2956;
}

/* =========================================================
   HERO — split, layered media, floating glass
   ========================================================= */
.ip-hero {
  position: relative;
  padding: clamp(130px, 16vh, 200px) 0 clamp(70px, 9vw, 120px);
}
.ip-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ip-hero__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.03;
  letter-spacing: -1px;
  color: #1c2956;
}
.ip-hero__title .accent {
  font-style: italic;
  color: #e9992d;
}
.ip-hero__copy {
  margin: 26px 0 0;
  max-width: 52ch;
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.7;
  color: #3a4260;
}

/* Hero media: masked image + floating glass chip + accent ring */
.ip-hero__media {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 28px;
}
.ip-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 40px 80px -24px rgba(28, 41, 86, 0.45);
}
.ip-hero__media::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 46%;
  height: 46%;
  border: 2px solid #e9992d;
  border-radius: 24px;
  z-index: -1;
}
.ip-float {
  position: absolute;
  left: -28px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 24px 48px -18px rgba(28, 41, 86, 0.35);
}
.ip-float__num {
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: #6a91b9;
}
.ip-float__label {
  font-family: "General Sans", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #1c2956;
  max-width: 130px;
}
.ip-float--top {
  left: auto;
  right: -24px;
  top: 30px;
  bottom: auto;
}

/* Hero badge chip (award etc.) */
.ip-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 8px 16px 8px 8px;
  background: rgba(28, 41, 86, 0.06);
  border: 1px solid rgba(28, 41, 86, 0.12);
  border-radius: 100px;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1c2956;
}
.ip-chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e9992d;
  color: #fff;
  font-size: 12px;
}

/* =========================================================
   SHOWCASE — alternating rows, ghost numerals, masked image
   ========================================================= */
.ip-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 120px);
}
.ip-show {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.ip-show:nth-child(even) .ip-show__media {
  order: 2;
}
.ip-show__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
}
.ip-show__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 60px -20px rgba(28, 41, 86, 0.4);
}
.ip-show__num {
  position: absolute;
  top: -0.55em;
  left: -0.1em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(120px, 16vw, 220px);
  line-height: 1;
  color: rgba(106, 145, 185, 0.16);
  z-index: 0;
  pointer-events: none;
}
.ip-show__body {
  position: relative;
  z-index: 1;
}
.ip-show__title {
  margin: 14px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  color: #1c2956;
}
.ip-show__text {
  margin: 18px 0 0;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #3a4260;
}
.ip-show__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1c2956;
  transition: gap 0.3s ease, color 0.3s ease;
}
.ip-show__link i {
  color: #e9992d;
  transition: transform 0.3s ease;
}
.ip-show__link:hover {
  color: #6a91b9;
  gap: 16px;
}
.ip-show__link:hover i {
  transform: translateX(4px);
}

/* =========================================================
   BENTO — asymmetric pillar grid
   ========================================================= */
.ip-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.ip-bento__card {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 32px;
  background: #ffffff;
  border-radius: 22px;
  box-shadow:
    0 24px 45px -18px rgba(28, 41, 86, 0.18),
    0 0 0 1px rgba(28, 41, 86, 0.04);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.7, 0.24, 1),
    box-shadow 0.4s ease;
}
.ip-bento__card--wide {
  grid-column: span 3;
}
.ip-bento__card--full {
  grid-column: 1 / -1;
}
.ip-bento__card--tall {
  grid-row: span 2;
  justify-content: space-between;
}
.ip-bento__card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 40px 70px -20px rgba(28, 41, 86, 0.32),
    0 0 0 1px rgba(106, 145, 185, 0.3);
}
.ip-bento__card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 145, 185, 0.14), transparent 70%);
}
.ip-bento__num {
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -1px;
  color: #6a91b9;
}
.ip-bento__title {
  margin: 0;
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  color: #1c2956;
}
.ip-bento__text {
  margin: 0;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #3a4260;
}
.ip-bento__card--feature {
  background: linear-gradient(150deg, #1c2956 0%, #26356e 100%);
}
.ip-bento__card--feature .ip-bento__num {
  color: #e9992d;
}
.ip-bento__card--feature .ip-bento__title {
  color: #ffffff;
}
.ip-bento__card--feature .ip-bento__text {
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================================
   TIMELINE / PROCESS
   ========================================================= */
.ip-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ip-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(106, 145, 185, 0.5) 12%, rgba(106, 145, 185, 0.5) 88%, transparent);
  z-index: 0;
}
.ip-step {
  position: relative;
  z-index: 1;
  text-align: left;
}
.ip-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #6a91b9;
  color: #1c2956;
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  box-shadow: 0 16px 30px -14px rgba(28, 41, 86, 0.3);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.ip-step:hover .ip-step__dot {
  transform: translateY(-6px);
  background: #1c2956;
  color: #fff;
}
.ip-step__title {
  margin: 0 0 8px;
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #1c2956;
}
.ip-step__text {
  margin: 0;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3a4260;
}

/* =========================================================
   STATS RIBBON (glass)
   ========================================================= */
.ip-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(28, 41, 86, 0.1);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(28, 41, 86, 0.3);
}
.ip-stat {
  padding: 40px 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ip-stat__num {
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1;
  color: #6a91b9;
  letter-spacing: -1px;
}
.ip-stat__label {
  margin-top: 12px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1c2956;
}

/* =========================================================
   PULL QUOTE (oversized)
   ========================================================= */
.ip-quote {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 72px);
  background: linear-gradient(150deg, #1c2956 0%, #223163 100%);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 40px 80px -28px rgba(28, 41, 86, 0.55);
}
.ip-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.28em;
  left: 0.1em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 320px;
  line-height: 1;
  color: rgba(106, 145, 185, 0.22);
}
.ip-quote__text {
  position: relative;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 3.1vw, 40px);
  line-height: 1.32;
  color: #ffffff;
}
.ip-quote__cite {
  position: relative;
  display: block;
  margin-top: 28px;
  font-family: "Poppins", Arial, sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e9992d;
}

/* =========================================================
   STATEMENT (big type, floating stat)
   ========================================================= */
.ip-statement {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ip-statement__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.12;
  color: #1c2956;
}
.ip-statement__text {
  margin: 22px 0 0;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #3a4260;
  max-width: 60ch;
}
.ip-bigstat {
  position: relative;
  padding: 44px 36px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 30px 60px -22px rgba(28, 41, 86, 0.35);
}
.ip-bigstat__num {
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 6vw, 74px);
  line-height: 1;
  color: #6a91b9;
  letter-spacing: -2px;
}
.ip-bigstat__label {
  margin-top: 14px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1c2956;
}

/* =========================================================
   FEATURE SPLIT (sticky text + list) & AI dashboard mock
   ========================================================= */
.ip-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.ip-split__sticky {
  position: sticky;
  top: 120px;
}
.ip-featlist {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ip-featlist__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 26px 28px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 20px 40px -20px rgba(28, 41, 86, 0.16),
    0 0 0 1px rgba(28, 41, 86, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ip-featlist__item:hover {
  transform: translateX(8px);
  box-shadow:
    0 26px 50px -20px rgba(28, 41, 86, 0.28),
    0 0 0 1px rgba(106, 145, 185, 0.3);
}
.ip-featlist__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(150deg, #6a91b9, #1c2956);
  color: #fff;
  font-size: 18px;
}
.ip-featlist__title {
  margin: 0 0 6px;
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1c2956;
}
.ip-featlist__text {
  margin: 0;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3a4260;
}

/* CSS-built dashboard mock (AI page) */
.ip-dash {
  position: relative;
  padding: 26px;
  background: linear-gradient(160deg, #1c2956 0%, #26356e 100%);
  border-radius: 24px;
  box-shadow: 0 40px 80px -26px rgba(28, 41, 86, 0.55);
  overflow: hidden;
}
.ip-dash__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
}
.ip-dash__bar {
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #6a91b9, rgba(106, 145, 185, 0.35));
  transform-origin: bottom;
  animation: ip-bar 1.6s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.ip-dash__bar:nth-child(2) {
  background: linear-gradient(180deg, #e9992d, rgba(233, 153, 45, 0.35));
}
@keyframes ip-bar {
  from { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ip-dash__bar { animation: none; }
}
.ip-dash__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.ip-dash__chip {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.ip-dash__chip b {
  display: block;
  font-size: 20px;
  color: #fff;
}

/* =========================================================
   PREMIUM CTA BAND
   ========================================================= */
.ip-cta {
  position: relative;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 96px);
  background: linear-gradient(140deg, #1c2956 0%, #223163 60%, #2a3a72 100%);
  border-radius: 34px;
  overflow: hidden;
  text-align: center;
}
.ip-cta__globe {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  max-width: 60%;
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
}
.ip-cta__globe img {
  width: 100%;
  height: auto;
  animation: cta-globe-spin 26s linear infinite;
}
.ip-cta__inner {
  position: relative;
  z-index: 1;
}
.ip-cta__title {
  margin: 0 auto;
  max-width: 20ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.08;
  color: #ffffff;
}
.ip-cta__sub {
  margin: 22px auto 0;
  max-width: 56ch;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}
.ip-cta .ip-btn-row {
  justify-content: center;
}

/* =========================================================
   INNER-PAGE RESPONSIVE (bespoke breakpoints: 900 / 560)
   ========================================================= */
@media (max-width: 900px) {
  .ip-hero__grid {
    grid-template-columns: 1fr;
  }
  .ip-hero__media {
    aspect-ratio: 16 / 11;
    max-width: 560px;
  }
  .ip-show {
    grid-template-columns: 1fr;
  }
  .ip-show:nth-child(even) .ip-show__media {
    order: 0;
  }
  .ip-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .ip-bento__card,
  .ip-bento__card--wide {
    grid-column: span 1;
  }
  .ip-bento__card--tall {
    grid-row: auto;
  }
  .ip-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
  .ip-timeline::before {
    display: none;
  }
  .ip-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .ip-statement {
    grid-template-columns: 1fr;
  }
  .ip-split {
    grid-template-columns: 1fr;
  }
  .ip-split__sticky {
    position: static;
  }
}
@media (max-width: 560px) {
  .ip-bento,
  .ip-timeline,
  .ip-stats {
    grid-template-columns: 1fr;
  }
  .ip-float {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .ip-float--top {
    display: none;
  }
  .ip-hero__media::after {
    display: none;
  }
}

/* =========================================================
   EDITORIAL INNER PAGES (.ed-*) — Awwwards-style composition
   Uses the homepage .container. Section rhythm 100px 0.
   Tokens: navy #1c2956, blue #6a91b9, orange #e9992d,
   Cormorant display, General Sans UI, Poppins labels.
   ========================================================= */
.ed {
  position: relative;
  z-index: 1;
  padding: 100px 0;
  overflow: hidden; /* clips oversized ghost words to the section */
}
.ed > .container {
  position: relative;
  z-index: 2;
}
.ed--flush-top {
  padding-top: 0;
}
.ed--dark {
  background: linear-gradient(150deg, #1c2956 0%, #223163 55%, #2a3a72 100%);
  color: #fff;
}

/* Oversized ghost word behind a section */
.ed-word {
  position: absolute;
  z-index: 0;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(140px, 24vw, 400px);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: rgba(28, 41, 86, 0.05);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.ed--dark .ed-word {
  color: rgba(255, 255, 255, 0.05);
}
.ed-word--tr {
  top: 40px;
  right: -0.08em;
}
.ed-word--bl {
  bottom: 20px;
  left: -0.06em;
}
.ed-word--c {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Kicker + hairline divider */
.ed-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6a91b9;
}
.ed-kicker__no {
  color: #e9992d;
  font-weight: 600;
}
.ed-kicker--rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(28, 41, 86, 0.16);
}
.ed--dark .ed-kicker {
  color: #9fb6d4;
}
.ed--dark .ed-kicker--rule::after {
  background: rgba(255, 255, 255, 0.18);
}

/* Premium full-width divider */
.ed-rule {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ed-rule::before,
.ed-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(28, 41, 86, 0.16);
}
.ed-rule__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e9992d;
  flex: 0 0 auto;
}

/* Display type helpers */
.ed-display {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #1c2956;
}
.ed-display .i {
  font-style: italic;
  color: #e9992d;
}
.ed--dark .ed-display {
  color: #fff;
}
.ed-lead {
  font-family: "General Sans", "Proxima Nova", Arial, sans-serif;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.75;
  color: #3a4260;
}
.ed--dark .ed-lead {
  color: rgba(255, 255, 255, 0.78);
}

/* =========================================================
   HERO — asymmetric editorial
   ========================================================= */
.ed-hero {
  padding: clamp(150px, 18vh, 230px) 0 100px;
}
.ed-hero__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}
/* Hero heading reuses the homepage .hero__title type scale exactly
   (font, weight, size clamp, line-height + its responsive overrides).
   .ed-hero__title is only a layout hook + left alignment for the editorial hero. */
.ed-hero__title {
  margin: 22px 0 0;
}
.ed-hero .hero__title {
  text-align: left;
}
.ed-hero__title .i {
  font-style: italic;
  color: #e9992d;
}
.ed-hero__aside {
  padding-bottom: 12px;
}
.ed-hero__copy {
  margin: 0 0 30px;
  font-family: "General Sans", Arial, sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
  color: #3a4260;
}
.ed-hero__figure {
  position: relative;
  margin-top: 60px;
  aspect-ratio: 21 / 8;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 50px 90px -30px rgba(28, 41, 86, 0.5);
}
.ed-hero__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.ed-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  box-shadow: 0 22px 44px -18px rgba(28, 41, 86, 0.4);
  z-index: 3;
}
.ed-tag__num {
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: #6a91b9;
}
.ed-tag__label {
  font-family: "General Sans", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: #1c2956;
  max-width: 130px;
}

/* =========================================================
   EDITORIAL INDEX LIST — numbered rows w/ hover thumbnail
   ========================================================= */
.ed-list {
  border-top: 1px solid rgba(28, 41, 86, 0.14);
}
.ed-item {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 3fr auto;
  align-items: center;
  gap: 40px;
  padding: 46px 0;
  border-bottom: 1px solid rgba(28, 41, 86, 0.14);
  text-decoration: none;
  transition: padding-left 0.45s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.ed-item:hover {
  padding-left: 24px;
}
.ed-item__no {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.9;
  color: rgba(106, 145, 185, 0.55);
  transition: color 0.4s ease;
}
.ed-item:hover .ed-item__no {
  color: #e9992d;
}
.ed-item__title {
  margin: 10px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.02;
  color: #1c2956;
  transition: transform 0.4s ease;
}
.ed-item__text {
  margin: 12px 0 0;
  max-width: 52ch;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #3a4260;
}
.ed-item__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(28, 41, 86, 0.2);
  color: #1c2956;
  font-size: 16px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.ed-item:hover .ed-item__go {
  background: #1c2956;
  color: #fff;
  transform: rotate(-45deg);
}
.ed-item__thumb {
  position: absolute;
  right: 92px;
  top: 50%;
  width: 230px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  transform: translateY(-50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 30px 60px -20px rgba(28, 41, 86, 0.5);
  transition: opacity 0.45s ease, transform 0.45s ease;
  z-index: 2;
}
.ed-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-item:hover .ed-item__thumb {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* =========================================================
   MARQUEE (outline word strip)
   ========================================================= */
.ed-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid rgba(28, 41, 86, 0.14);
  border-bottom: 1px solid rgba(28, 41, 86, 0.14);
}
.ed-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  animation: ed-marq 26s linear infinite;
}
.ed-marquee__track span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(28, 41, 86, 0.3);
}
.ed-marquee__track b {
  color: #e9992d;
  font-size: 18px;
}
@keyframes ed-marq {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-marquee__track { animation: none; }
}

/* =========================================================
   STAT STRIP (inline, hairline dividers)
   ========================================================= */
.ed-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ed-stat {
  padding: 12px 30px;
  border-left: 1px solid rgba(28, 41, 86, 0.14);
}
.ed-stat:first-child {
  border-left: 0;
  padding-left: 0;
}
.ed--dark .ed-stat {
  border-color: rgba(255, 255, 255, 0.18);
}
.ed-stat__num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1;
  color: #1c2956;
}
.ed--dark .ed-stat__num {
  color: #fff;
}
.ed-stat__num .u {
  color: #e9992d;
}
.ed-stat__label {
  margin-top: 10px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6a91b9;
}

/* =========================================================
   EDITORIAL QUOTE
   ========================================================= */
.ed-quote {
  position: relative;
  max-width: 15ch;
}
.ed-quote__mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.6;
  color: #e9992d;
  display: block;
}
.ed-quote__text {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.25;
  color: #1c2956;
}
.ed--dark .ed-quote__text {
  color: #fff;
}
.ed-quote__cite {
  display: block;
  margin-top: 30px;
  font-family: "Poppins", Arial, sans-serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e9992d;
}
.ed-quote__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

/* =========================================================
   STATEMENT (huge type + oversized numeral)
   ========================================================= */
.ed-statement {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.ed-statement__title {
  margin: 22px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #1c2956;
}
.ed-statement__title .i {
  font-style: italic;
  color: #e9992d;
}
.ed-bignum {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(90px, 13vw, 200px);
  line-height: 0.8;
  color: #6a91b9;
  letter-spacing: -0.04em;
  text-align: right;
}
.ed-bignum small {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1c2956;
}

/* =========================================================
   PROCESS (editorial numbered)
   ========================================================= */
.ed-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.ed-proc {
  padding-top: 26px;
  border-top: 2px solid #1c2956;
}
.ed-proc__no {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  color: #6a91b9;
}
.ed-proc__title {
  margin: 16px 0 8px;
  font-family: "General Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1c2956;
}
.ed-proc__text {
  margin: 0;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3a4260;
}

/* =========================================================
   FEATURE ROWS (masked image + index) — for SAP/AI bodies
   ========================================================= */
.ed-rows {
  display: flex;
  flex-direction: column;
}
.ed-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  align-items: baseline;
  padding: 38px 0;
  border-top: 1px solid rgba(28, 41, 86, 0.14);
}
.ed-row:last-child {
  border-bottom: 1px solid rgba(28, 41, 86, 0.14);
}
.ed-row__no {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  color: #e9992d;
  padding-top: 8px;
}
.ed-row__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.1;
  color: #1c2956;
}
.ed-row__text {
  margin: 12px 0 0;
  max-width: 60ch;
  font-family: "General Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #3a4260;
}

/* =========================================================
   EDITORIAL CTA
   ========================================================= */
.ed-cta {
  text-align: center;
}
.ed-cta__title {
  margin: 0 auto;
  max-width: 18ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #fff;
}
.ed-cta__title .i {
  font-style: italic;
  color: #e9992d;
}
.ed-cta__row {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* =========================================================
   EDITORIAL RESPONSIVE (980 / 600)
   ========================================================= */
@media (max-width: 980px) {
  .ed {
    padding: 72px 0;
  }
  .ed-hero {
    padding-top: clamp(120px, 16vh, 180px);
  }
  .ed-hero__grid,
  .ed-quote__grid,
  .ed-statement {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ed-statement {
    gap: 24px;
  }
  .ed-bignum {
    text-align: left;
  }
  .ed-process {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .ed-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 0;
  }
  .ed-stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .ed-item {
    grid-template-columns: auto 1fr;
    gap: 20px 24px;
  }
  .ed-item__go {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
  }
  .ed-item__thumb {
    position: static;
    transform: none;
    opacity: 1;
    width: 100%;
    max-width: 320px;
    margin-top: 18px;
    grid-column: 1 / -1;
  }
  .ed-item:hover {
    padding-left: 0;
  }
}
@media (max-width: 600px) {
  .ed-stats,
  .ed-process {
    grid-template-columns: 1fr;
  }
  .ed-stat {
    border-left: 0;
    padding-left: 0;
  }
  .ed-item {
    grid-template-columns: 1fr;
  }
  .ed-item__go {
    grid-column: 1;
  }
}