/* =========================================
   GALAXYWING — Custom Styles (Bootstrap 5.3)
   ========================================= */


/* ---------- About Us dropdown (desktop) ---------- */

@media (min-width:992px) {
   .hero-nav .nav-item.has-about {
      position: relative;
   }

   .hero-nav .about-menu {
      min-width: 280px;
      padding: 12px 10px;
      margin-top: 8px;
      border: 1px solid rgba(9, 16, 46, 0.06);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 24px 60px -12px rgba(9, 16, 46, 0.22), 0 8px 24px -6px rgba(9, 16, 46, 0.08), 0 0 0 1px rgba(122, 204, 13, 0.04);
      animation: aboutMenuFade .22s cubic-bezier(.2, .8, .2, 1);
      overflow: visible;
      position: relative;
   }

   .hero-nav .about-menu .dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      border-radius: 12px;
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      font-weight: 600;
      color: #09102e;
      position: relative;
      overflow: hidden;
      transition: background .25s cubic-bezier(.2, .8, .2, 1), color .25s ease, transform .25s ease, padding-left .25s ease;
   }

   /* mint accent bar that slides in on hover */
   .hero-nav .about-menu .dropdown-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 3px;
      background: linear-gradient(180deg, #7ACC0D 0%, #5fa80a 100%);
      border-radius: 0 3px 3px 0;
      opacity: 0;
      transform: translateX(-4px);
      transition: all .25s cubic-bezier(.2, .8, .2, 1);
   }

   /* icon tile */
   .hero-nav .about-menu .dropdown-item i {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(122, 204, 13, 0.10);
      color: #3d7c00;
      font-size: 15px;
      border: 1px solid rgba(122, 204, 13, 0.18);
      transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
   }

   .hero-nav .about-menu .dropdown-item:hover {
      background: linear-gradient(135deg, rgba(122, 204, 13, 0.10) 0%, rgba(122, 204, 13, 0.04) 100%);
      color: #09102e;
      padding-left: 18px;
   }

   .hero-nav .about-menu .dropdown-item:hover::before {
      opacity: 1;
      transform: translateX(0);
   }

   .hero-nav .about-menu .dropdown-item:hover i {
      background: linear-gradient(135deg, #7ACC0D 0%, #5fa80a 100%);
      color: #ffffff;
      border-color: #7ACC0D;
      transform: rotate(-4deg) scale(1.06);
      box-shadow: 0 6px 14px rgba(122, 204, 13, 0.35);
   }

   .hero-nav .about-menu .dropdown-item:active {
      background: rgba(122, 204, 13, 0.14);
      color: #09102e;
   }
}

@keyframes aboutMenuFade {
   from {
      opacity: 0;
      transform: translateY(-6px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ========================================= GLOBAL SPACING TOKENS — section vertical rhythm (4 tiers, auto-scale on tablet/mobile) Usage: section { padding: var(--sec-py-lg) 0; } ========================================= */
:root {
   --sec-py-sm: 60px;
   /* compact strips — trust bars, logo rows */
   --sec-py-md: 80px;
   /* short content sections */
   --sec-py-lg: 110px;
   /* feature sections — default */
   --sec-py-xl: 140px;
   /* large spotlight / banner-adjacent */
}

/* iPad portrait + tablet: collapse vertical rhythm */
@media (max-width:1024px) {
   :root {
      --sec-py-sm: 44px;
      --sec-py-md: 60px;
      --sec-py-lg: 76px;
      --sec-py-xl: 92px;
   }
}

@media (max-width:767px) {
   :root {
      --sec-py-sm: 36px;
      --sec-py-md: 48px;
      --sec-py-lg: 60px;
      --sec-py-xl: 72px;
   }
}

@media (max-width:575px) {
   :root {
      --sec-py-sm: 28px;
      --sec-py-md: 40px;
      --sec-py-lg: 52px;
      --sec-py-xl: 60px;
   }
}

/* ========================== BOOKING MODAL (Book a Meeting — split premium form) ========================== */
.booking-modal .modal-dialog {
   max-width: 1100px;
   width: 100%;
}

@media (max-width:1200px) {
   .booking-modal .modal-dialog {
      max-width: calc(100% - 32px);
   }
}

.booking-modal-content {
   position: relative;
   border: 0;
   border-radius: 24px;
   overflow: hidden;
   background: #ffffff;
   box-shadow: 0 40px 100px rgba(9, 16, 46, 0.4), 0 0 0 1px rgba(9, 16, 46, 0.06);
}

.booking-close {
   position: absolute;
   top: 18px;
   right: 18px;
   z-index: 10;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   /* Dark fill + white icon — visible on both the dark aside and the white form panel */
   background: #09102e;
   border: 1px solid rgba(255, 255, 255, 0.18);
   color: #fff;
   font-size: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.25s ease;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.booking-close:hover {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
   transform: rotate(90deg);
   box-shadow: 0 8px 22px rgba(122, 204, 13, 0.4);
}

.booking-split {
   display: grid;
   grid-template-columns: 380px 1fr;
   min-height: 620px;
}

/* LEFT brand pane — dark navy */
.booking-aside {
   position: relative;
   background: linear-gradient(180deg, #0b1436 0%, #09102e 50%, #060a24 100%);
   color: #fff;
   padding: 48px 40px 40px;
   display: flex;
   flex-direction: column;
   gap: 30px;
   overflow: hidden;
}

.booking-aside-glow {
   position: absolute;
   top: -140px;
   right: -100px;
   width: 340px;
   height: 340px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.25) 0%, transparent 65%);
   filter: blur(30px);
   pointer-events: none;
}

.booking-aside-shapes {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.bs-dot {
   position: absolute;
   border-radius: 50%;
   background: rgba(122, 204, 13, 0.5);
}

.bs-dot-1 {
   width: 8px;
   height: 8px;
   top: 18%;
   right: 28%;
   box-shadow: 0 0 16px rgba(122, 204, 13, 0.7);
}

.bs-dot-2 {
   width: 5px;
   height: 5px;
   top: 45%;
   left: 18%;
   background: rgba(255, 255, 255, 0.7);
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.bs-dot-3 {
   width: 6px;
   height: 6px;
   bottom: 22%;
   right: 18%;
   box-shadow: 0 0 14px rgba(122, 204, 13, 0.6);
}

.booking-aside-top {
   position: relative;
   z-index: 2;
}

.booking-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 14px;
   border-radius: 999px;
   background: rgba(122, 204, 13, 0.14);
   border: 1px solid rgba(122, 204, 13, 0.35);
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 22px;
}

.booking-eyebrow i {
   font-size: 13px;
}

.booking-aside-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 32px;
   line-height: 1.15;
   letter-spacing: -0.4px;
   color: #fff;
   margin: 0 0 14px;
}

.booking-aside-sub {
   color: rgba(255, 255, 255, 0.72);
   font-size: 15px;
   line-height: 1.55;
   margin: 0;
}

.booking-perks {
   position: relative;
   z-index: 2;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.booking-perks li {
   display: flex;
   align-items: flex-start;
   gap: 14px;
}

.perk-icon {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 11px;
   background: rgba(122, 204, 13, 0.12);
   border: 1px solid rgba(122, 204, 13, 0.28);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
}

.booking-perks li>div {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.booking-perks strong {
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   font-weight: 700;
   letter-spacing: -0.16px;
}

.booking-aside-art {
   margin-top: auto;
   position: relative;
   z-index: 2;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   min-height: 120px;
   padding-top: 18px;
}

.booking-aside-img {
   display: block;
   width: 100%;
   max-width: 260px;
   height: auto;
   filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
   animation: bookingArtFloat 5.5s ease-in-out infinite;
   transform-origin: center bottom;
}

@keyframes bookingArtFloat {

   0%,
   100% {
      transform: translateY(0) rotate(0deg);
   }

   50% {
      transform: translateY(-8px) rotate(-1.5deg);
   }
}

@media (prefers-reduced-motion:reduce) {
   .booking-aside-img {
      animation: none;
   }
}

@media (max-width:991px) {
   .booking-aside-art {
      min-height: 0;
      padding-top: 8px;
   }

   .booking-aside-img {
      max-width: 200px;
   }
}

.booking-perks span {
   color: rgba(255, 255, 255, 0.6);
   font-size: 13px;
   line-height: 1.45;
}

.booking-proof {
   position: relative;
   z-index: 2;
   padding: 18px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   margin-top: auto;
}

.booking-proof-stars {
   color: var(--btn);
   font-size: 15px;
   letter-spacing: 2px;
   margin-bottom: 8px;
}

.booking-proof-text {
   color: rgba(255, 255, 255, 0.85);
   font-size: 13.5px;
   line-height: 1.5;
   font-style: italic;
   margin-bottom: 12px;
}

.booking-proof-author {
   display: flex;
   align-items: center;
   gap: 10px;
}

.bp-author-avatar {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--btn), #68b10a);
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
}

.booking-proof-author>div {
   display: flex;
   flex-direction: column;
   font-family: 'Inter', sans-serif;
}

.booking-proof-author strong {
   color: #fff;
   font-size: 13px;
   font-weight: 700;
}

.booking-proof-author span {
   color: rgba(255, 255, 255, 0.5);
   font-size: 11.5px;
}

/* ========================================================= RIGHT PANE — GRAVITY FORMS NATIVE MARKUP (matches GF 2.5+ classes so it transfers cleanly to WP) ========================================================= */
.booking-form-wrap.gform_wrapper {
   padding: 48px 52px;
   background: #ffffff;
   max-height: calc(100vh - 32px);
   overflow-y: auto;
}

/* Subtle scrollbar so it doesn't dominate the right edge */
.booking-form-wrap.gform_wrapper::-webkit-scrollbar {
   width: 10px;
}

.booking-form-wrap.gform_wrapper::-webkit-scrollbar-thumb {
   background: rgba(9, 16, 46, 0.18);
   border-radius: 999px;
   border: 3px solid #fff;
}

/* Form heading */
.booking-form-wrap .gform_heading {
   margin-bottom: 28px;
}

.booking-form-wrap .gform_title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 32px;
   line-height: 1.18;
   color: var(--navy);
   letter-spacing: -0.4px;
   margin: 0 0 8px;
}

.booking-form-wrap .gform_description {
   color: #64748b;
   font-size: 14.5px;
   margin: 0;
   display: block;
}

/* Fields list (GF uses UL by default) */
.booking-form-wrap .gform_body {
   margin: 0;
   padding: 0;
}

.booking-form-wrap .gform_fields {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px 18px;
}

.booking-form-wrap .gfield {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin: 0;
   padding: 0;
}

.booking-form-wrap .gfield--width-half,
.booking-form-wrap .gf_left_half,
.booking-form-wrap .gf_right_half {
   grid-column: span 1;
}

.booking-form-wrap .gfield--width-full,
.booking-form-wrap .gf_full_width {
   grid-column: 1 / -1;
}

/* Orphan-last: only the very last half-width field (with no sibling) spans full. */
.booking-form-wrap .gfield--width-half:last-child,
.booking-form-wrap .gf_left_half:last-child,
.booking-form-wrap .gf_right_half:last-child {
   grid-column: 1 / -1;
}

/* Labels */
.booking-form-wrap .gfield_label,
.booking-form-wrap .gform-field-label {
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 700;
   color: var(--navy);
   letter-spacing: 0.16px;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 6px;
}

.booking-form-wrap .gfield_required,
.booking-form-wrap .gfield_required_asterisk {
   color: var(--btn);
   font-weight: 700;
   margin-left: 2px;
}

.booking-form-wrap .gfield_description_inline {
   font-weight: 500;
   color: #94a3b8;
   font-size: 11.5px;
   letter-spacing: 0;
   margin-left: 4px;
}

/* Input containers — left-side icon via ::before */
.booking-form-wrap .ginput_container {
   position: relative;
   display: flex;
   align-items: center;
}

.booking-form-wrap .ginput_container::before {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: #94a3b8;
   font-size: 15px;
   font-family: "bootstrap-icons";
   pointer-events: none;
   transition: color 0.2s;
   z-index: 2;
}

.booking-form-wrap .gf-icon-person::before {
   content: "\f4da";
}

/* bi-person-fill */
.booking-form-wrap .gf-icon-email::before {
   content: "\f32e";
}

/* bi-envelope-fill */
.booking-form-wrap .gf-icon-phone::before {
   content: "\f5c1";
}

/* bi-telephone-fill */
.booking-form-wrap .gf-icon-website::before {
   content: "\f3ac";
}

/* bi-globe2 */
.booking-form-wrap .gf-icon-budget::before {
   content: "\f262";
}

/* bi-cash-coin */
.booking-form-wrap .gf-icon-date::before {
   content: "\f1e8";
}

/* bi-calendar-event-fill */
.booking-form-wrap .gf-icon-message::before {
   content: "\f268";
   top: 14px;
   transform: none;
}

/* bi-chat-left-text-fill */
/* Inputs / selects / textareas — shared styles */
.booking-form-wrap .gform_wrapper input[type="text"],
.booking-form-wrap input[type="text"],
.booking-form-wrap input[type="email"],
.booking-form-wrap input[type="tel"],
.booking-form-wrap input[type="url"],
.booking-form-wrap input[type="date"],
.booking-form-wrap select,
.booking-form-wrap textarea {
   width: 100%;
   height: 46px;
   padding: 0 14px 0 44px;
   font-family: 'Inter', sans-serif;
   font-size: 14px !important;
   color: var(--navy);
   background: #f6f9fc;
   border: 1.5px solid rgba(9, 16, 46, 0.08);
   border-radius: 12px;
   outline: none;
   transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.booking-form-wrap select {
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   padding-right: 42px;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 1l6 7 6-7' stroke='%237ACC0D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 18px center;
   background-size: 12px 9px;
}

.booking-form-wrap select:focus {
   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 8l6-7 6 7' stroke='%23568f00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.booking-form-wrap select option,
.booking-form-wrap select optgroup {
   background: #ffffff;
   color: #1a2240;
   font-size: 14.5px;
   padding: 10px 12px;
}

.booking-form-wrap input::placeholder,
.booking-form-wrap textarea::placeholder {
   color: #a2aabc;
}

.booking-form-wrap input:focus,
.booking-form-wrap select:focus,
.booking-form-wrap textarea:focus {
   background: #fff;
   border-color: var(--btn);
   box-shadow: 0 0 0 4px rgba(122, 204, 13, 0.12);
}

.booking-form-wrap .ginput_container:focus-within::before {
   color: var(--btn);
}

/* Textarea specifics */
.booking-form-wrap .ginput_container_textarea {
   align-items: flex-start;
}

.booking-form-wrap textarea {
   height: auto;
   resize: vertical;
   min-height: 92px;
   padding: 13px 14px 13px 44px;
}

/* Booking modal textarea — give it enough height to actually use. 75px showed only 2 lines and made the field unusable on mobile. */
body .booking-form-wrap .gform_wrapper textarea {
   min-height: 120px !important;
   height: 120px !important;
   padding: 12px 14px 12px 44px !important;
   resize: vertical !important;
   line-height: 1.5 !important;
}

@media (max-width:575px) {
   body .booking-form-wrap .gform_wrapper textarea {
      min-height: 110px !important;
      height: 110px !important;
   }
}

/* GF legacy markup wrapper — give the input container a tiny top breathing room so labels don't visually collide with the input. */
body .gform_legacy_markup_wrapper .top_label div.ginput_container {
   margin-top: 2px !important;
}

/* Service tiles — GF radio group with custom `.gf-service-tiles` class. Force the field itself to span the full grid row so the 2-column tile grid uses the full form width (matches Phone / Company-website above). */
/* Any radio field inside the booking form spans the full form width so its inner 2-column tile grid uses the same column tracks as the Phone / Company-website fields above. Targets by GF's built-in `.gfield--type-radio` class so the rule applies even if the form editor hasn't manually added `.gf-service-tiles`.                    */
body .booking-form-wrap .gfield.gfield--type-radio,
body .booking-form-wrap .gfield.gf-service-tiles,
body .booking-form-wrap li.gfield--type-radio,
body .booking-form-wrap li.gf-service-tiles {
   grid-column: 1 / -1 !important;
   width: 100% !important;
   max-width: none !important;
   flex-basis: 100% !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
}

/* Wipe padding/margin on intermediate wrappers so the inner grid lines up perfectly with the outer form grid. */
body .booking-form-wrap .gfield--type-radio>.ginput_container,
body .booking-form-wrap .gf-service-tiles>.ginput_container,
body .booking-form-wrap .gfield--type-radio .ginput_container_radio,
body .booking-form-wrap .gf-service-tiles .ginput_container_radio {
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   display: block !important;
}

/* Inner 2-col tile grid — column-gap matches the parent form grid (18px) so each tile column == 50% − 9px, identical to Phone / Website widths. */
body .booking-form-wrap .gfield--type-radio .gfield_radio,
body .booking-form-wrap .gf-service-tiles .gfield_radio {
   display: grid !important;
   grid-template-columns: repeat(2, 1fr) !important;
   column-gap: 18px !important;
   row-gap: 14px !important;
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   list-style: none !important;
}

/* Each tile fills its column cell. */
body .booking-form-wrap .gfield--type-radio .gchoice,
body .booking-form-wrap .gf-service-tiles .gchoice {
   width: 100% !important;
   max-width: none !important;
   margin: 0 !important;
   padding: 0 !important;
}

body .booking-form-wrap .gfield--type-radio .gchoice label,
body .booking-form-wrap .gf-service-tiles .gchoice label {
   width: 100% !important;
   box-sizing: border-box !important;
}

.booking-form-wrap .gf-service-tiles .gchoice {
   margin: 0;
   position: relative;
}

.booking-form-wrap .gf-service-tiles .gchoice input[type="radio"] {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.booking-form-wrap .gf-service-tiles .gchoice label {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 14px;
   background: #f6f9fc;
   border: 1.5px solid rgba(9, 16, 46, 0.08);
   border-radius: 12px;
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 600;
   color: var(--navy);
   cursor: pointer;
   transition: all 0.22s ease;
   line-height: 1.3;
}

.booking-form-wrap .gf-service-tiles .gchoice label i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 9px;
   background: rgba(9, 16, 46, 0.05);
   color: var(--navy);
   font-size: 14.5px;
   flex-shrink: 0;
   transition: background 0.2s ease, color 0.2s ease;
}

.booking-form-wrap .gf-service-tiles .gchoice:hover label {
   border-color: rgba(122, 204, 13, 0.35);
   background: #fff;
}

.booking-form-wrap .gf-service-tiles .gchoice:has(input:checked) label {
   border-color: var(--btn);
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.1), rgba(122, 204, 13, 0.02));
   box-shadow: 0 6px 16px rgba(122, 204, 13, 0.15);
}

.booking-form-wrap .gf-service-tiles .gchoice:has(input:checked) label i {
   background: var(--btn);
   color: var(--navy);
}

/* Submit button (GF uses .gform_footer + .gform_button) */
.booking-form-wrap .gform_footer {
   padding: 0;
   margin-top: 26px;
}

.booking-form-wrap .gform_button {
   width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   padding: 16px 28px;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
   border: 0;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 15.5px;
   letter-spacing: 0.32px;
   cursor: pointer;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 14px 32px rgba(122, 204, 13, 0.4);
}

.booking-form-wrap .gform_button:hover {
   transform: translateY(-2px);
   box-shadow: 0 18px 40px rgba(122, 204, 13, 0.55);
}

.booking-form-wrap .gform_button_arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   font-size: 13px;
   transition: transform 0.25s ease;
}

.booking-form-wrap .gform_button:hover .gform_button_arrow {
   transform: translateX(4px);
}

/* Reassurance line below submit */
.booking-form-wrap .gform_reassure {
   font-size: 12px;
   color: #64748b;
   text-align: center;
   margin: 12px 0 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.booking-form-wrap .gform_reassure i {
   color: var(--btn);
}

/* GF native validation — booking modal uses the universal styling defined in forms-bridge.css (plain red text, no boxes/borders). The only field-level visual cue we keep is a subtle red input border so the user sees which input is wrong. */
.booking-form-wrap .gfield.gfield_error input,
.booking-form-wrap .gfield.gfield_error select,
.booking-form-wrap .gfield.gfield_error textarea {
   border-color: #d23030;
}

/* Responsive */
/* Mobile + iPad portrait — hide the dark left aside entirely; show form only */
@media (max-width:991.98px) {
   .booking-split {
      grid-template-columns: 1fr;
   }

   .booking-aside {
      display: none;
   }

   .booking-form-wrap.gform_wrapper {
      padding: 36px 28px;
   }

   .booking-form-wrap .gform_title {
      font-size: 26px;
   }

   .booking-form-wrap .gf-service-tiles .gfield_radio {
      grid-template-columns: repeat(2, 1fr);
   }

   .booking-close {
      top: 12px;
      right: 12px;
   }
}

@media (max-width:520px) {
   .booking-form-wrap .gform_fields {
      grid-template-columns: 1fr;
   }

   .booking-form-wrap .gfield--width-half {
      grid-column: 1 / -1;
   }

   .booking-form-wrap .gf-service-tiles .gfield_radio {
      grid-template-columns: 1fr 1fr;
   }
}

/* ========================== FLOATING ACTION BUTTONS (bottom-right stack) ========================== */
.fab-stack {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 12px;
}

/* Back-to-top button with circular scroll-progress ring */
.back-to-top {
   position: relative;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   border: 0;
   background: #09102e;
   color: #fff;
   font-size: 20px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 24px rgba(9, 16, 46, 0.35);
   opacity: 0;
   pointer-events: none;
   transform: translateY(10px);
   transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.back-to-top.visible {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
}

.back-to-top:hover {
   background: var(--btn);
   color: #09102e;
   transform: translateY(-3px);
   box-shadow: 0 14px 30px rgba(122, 204, 13, 0.45);
}

.back-to-top:hover .btt-ring-track {
   stroke: rgba(9, 16, 46, 0.25);
}

.back-to-top:hover .btt-ring-progress {
   stroke: #09102e;
}

/* The arrow icon sits above the ring */
.back-to-top>i {
   position: relative;
   z-index: 2;
   line-height: 1;
}

/* SVG progress ring (top-to-bottom fill as user scrolls) */
.btt-ring {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   /* start circle stroke from 12 o'clock position */
   transform: rotate(-90deg);
}

.btt-ring circle {
   fill: none;
   stroke-width: 2.5;
   stroke-linecap: round;
}

.btt-ring-track {
   stroke: rgba(255, 255, 255, 0.15);
}

.btt-ring-progress {
   stroke: var(--btn);
   /* circumference = 2 * PI * r (r=21) ≈ 131.95 */
   stroke-dasharray: 131.95;
   stroke-dashoffset: 131.95;
   transition: stroke-dashoffset 0.1s linear;
   filter: drop-shadow(0 0 4px rgba(122, 204, 13, 0.5));
}

.chat-fab {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 22px 14px 14px;
   background: linear-gradient(135deg, #7ACC0D 0%, #68b10a 100%);
   color: #09102e;
   border: 0;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.16px;
   cursor: pointer;
   box-shadow: 0 12px 30px rgba(122, 204, 13, 0.45), 0 4px 12px rgba(9, 16, 46, 0.2);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-fab:hover {
   transform: translateY(-3px) scale(1.03);
   box-shadow: 0 18px 40px rgba(122, 204, 13, 0.55), 0 6px 16px rgba(9, 16, 46, 0.25);
}

.chat-fab:active {
   transform: translateY(-1px) scale(1.01);
}

.chat-fab-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: #09102e;
   color: #fff;
   font-size: 17px;
   flex-shrink: 0;
}

.chat-fab-label {
   white-space: nowrap;
   padding-right: 2px;
}

.chat-fab-pulse {
   position: absolute;
   inset: 0;
   border-radius: 999px;
   background: var(--btn);
   opacity: 0.5;
   animation: chatFabPulse 2.2s ease-out infinite;
   z-index: -1;
   pointer-events: none;
}

@keyframes chatFabPulse {
   0% {
      transform: scale(1);
      opacity: 0.5;
   }

   100% {
      transform: scale(1.35);
      opacity: 0;
   }
}

.chat-fab-badge {
   position: absolute;
   top: -4px;
   right: -4px;
   min-width: 22px;
   height: 22px;
   padding: 0 6px;
   border-radius: 999px;
   background: #ff5252;
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 2px solid #fff;
   box-shadow: 0 4px 10px rgba(255, 82, 82, 0.4);
}

@media (max-width:575px) {
   .fab-stack {
      bottom: 16px;
      right: 16px;
      gap: 10px;
   }

   .chat-fab {
      padding: 12px;
      gap: 0;
   }

   .chat-fab-label {
      display: none;
   }

   .chat-fab-icon {
      width: 32px;
      height: 32px;
      font-size: 16px;
   }

   .back-to-top {
      width: 46px;
      height: 46px;
      font-size: 17px;
   }
}

@media (prefers-reduced-motion:reduce) {
   .chat-fab-pulse {
      animation: none;
      opacity: 0;
   }
}

/* ========================== TOP ANNOUNCEMENT BAR ========================== */
.topbar-announce {
   position: relative;
   background: linear-gradient(90deg, #060a24 0%, #09102e 50%, #0b1436 100%);
   color: #fff;
   padding: 12px 0;
   overflow: hidden;
   z-index: 999;
   border-bottom: 1px solid rgba(122, 204, 13, 0.2);
}

.topbar-bg-shapes {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
}

.tbs-dot {
   position: absolute;
   border-radius: 50%;
   filter: blur(40px);
}

.tbs-dot-1 {
   width: 200px;
   height: 200px;
   top: -80px;
   left: 5%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.28), transparent 65%);
}

.tbs-dot-2 {
   width: 140px;
   height: 140px;
   bottom: -70px;
   left: 40%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.16), transparent 65%);
}

.tbs-dot-3 {
   width: 120px;
   height: 120px;
   top: -50px;
   right: 32%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.12), transparent 65%);
}

.tbs-dot-4 {
   width: 240px;
   height: 240px;
   bottom: -120px;
   right: -60px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.22), transparent 65%);
}

/* Bullet-proof single-line layout. .container Bootstrap max-width is widened on the topbar so the strip uses the full viewport. Everything inside is rendered as inline text on one row — no flex, no grid, no chance of wrapping. */
.topbar-announce>.container.topbar-announce-inner,
.topbar-announce-inner.container {
   max-width: 100% !important;
   width: 100% !important;
}

.topbar-announce-inner {
   position: relative;
   z-index: 1;
   display: block !important;
   text-align: center !important;
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0;
   line-height: 1.3;
   color: rgba(255, 255, 255, 0.92);
   white-space: nowrap !important;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 18px;
   padding-right: 18px;
}

.topbar-announce-inner,
.topbar-announce-inner * {
   white-space: nowrap !important;
}

/* Below the width where the full announcement fits on one line, allow it to wrap to multiple lines instead of being truncated. */
@media (max-width:1100px) {
   .topbar-announce {
      padding: 10px 0;
   }

   .topbar-announce-inner,
   .topbar-announce-inner *,
   .topbar-announce-inner .topbar-text,
   .topbar-announce-inner .topbar-headline,
   .topbar-announce-inner .topbar-headline strong,
   .topbar-announce-inner .topbar-cta,
   .topbar-announce-inner .topbar-badge {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
   }

   .topbar-announce-inner {
      font-size: 13.5px;
      line-height: 1.4;
      padding-left: 14px;
      padding-right: 14px;
   }
}

@media (max-width:575px) {
   .topbar-announce-inner {
      font-size: 12.5px;
      line-height: 1.4;
      padding: 0 12px;
   }
}

.topbar-announce-inner br {
   display: none !important;
}

.topbar-announce-inner .topbar-text,
.topbar-announce-inner .topbar-badge,
.topbar-announce-inner .topbar-headline,
.topbar-announce-inner .topbar-headline strong,
.topbar-announce-inner .topbar-cta {
   display: inline !important;
   float: none !important;
   clear: none !important;
}

.topbar-text {
   display: inline !important;
}

.topbar-badge,
.topbar-headline,
.topbar-headline strong,
.topbar-cta {
   display: inline !important;
   padding: 0 !important;
   margin: 0;
   background: none;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   text-shadow: none;
   text-transform: none;
   letter-spacing: 0;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   vertical-align: baseline;
   white-space: normal;
   flex-basis: auto;
   flex-grow: 0;
   flex-shrink: 0;
}

.topbar-badge {
   color: #ff3b30;
   font-weight: 800;
   margin-right: 6px;
}

.topbar-headline {
   color: rgba(255, 255, 255, 0.92);
   font-weight: 600;
}

.topbar-headline strong {
   color: #7ACC0D;
   font-weight: 800;
}

.topbar-headline p {
   margin-bottom: 0;
}

.topbar-cta {
   color: #ff3b30;
   font-weight: 800;
   text-decoration: none;
   margin-left: 6px;
   cursor: pointer;
}

.topbar-cta:hover,
.topbar-cta:focus-visible {
   color: #d92e23;
   text-decoration: underline;
}

.topbar-cta i {
   font-size: inherit;
}

.topbar-cta i {
   transition: transform 0.2s;
}

.topbar-cta:hover i {
   transform: translateX(2px);
}

@media (max-width:991px) {
   .topbar-announce {
      padding: 10px 0;
   }

   .topbar-announce-inner {
      font-size: 13px;
   }
}

@media (max-width:640px) {
   .topbar-announce-inner {
      font-size: 12px;
   }
}

:root {
   --navy: #09102e;
   --navy-deep: #09102e;
   --orange: #7ACC0D;
   --orange-hover: #68b10a;
   --btn: #7ACC0D;
   --btn-hover: #68b10a;
   --teal: #7ACC0D;
   --text: #09102e;
   --muted: #5a6378;
   --line: rgba(9, 16, 46, 0.1);
   --bg-alt: #fafafa;
   --star: #7ACC0D;
   --radius: 16px;
}

/* Override default Bootstrap container width to 1600px */
@media (min-width:1400px) {

   .container,
   .container-sm,
   .container-md,
   .container-lg,
   .container-xl,
   .container-xxl {
      max-width: 1600px;
   }
}

/* Base */
body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   color: var(--text);
   font-weight: 400;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   overflow-x: clip;
   /* clip (not hidden) preserves position:sticky on descendants */
}

html {
   overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   letter-spacing: -0.32px;
   color: var(--navy);
}

/* Gradient text helpers — both gradients stay within the visible lime range so the final character never fades into the background. Previously `.grad-light` ended at #ffffff (invisible on white sections) and `.grad-dark` ended at #09102e (invisible on navy sections). */
.grad-light {
   background: linear-gradient(90deg, #c5f07a 0%, #7ACC0D 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: transparent;
   /* Prevent right-edge clipping when text is italic (slant overflows the bounding box) */
   display: inline-block;
   padding-right: 0.08em;
}

.grad-dark {
   background: linear-gradient(90deg, #7ACC0D 0%, #3d7c00 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: transparent;
   /* Prevent right-edge clipping when text is italic (slant overflows the bounding box) */
   display: inline-block;
   padding-right: 0.08em;
}

a {
   text-decoration: none;
   transition: all 0.2s ease;
}

.stars {
   color: var(--star);
   letter-spacing: 2px;
   font-size: 14px;
}

/* ========================== TOPBAR ========================== */
.topbar {
   background: var(--navy-deep);
   color: #cbd5e1;
   font-size: 13px;
   padding: 8px 0;
}

.topbar a {
   color: #cbd5e1;
}

.topbar a:hover {
   color: var(--orange);
}

/* ========================== HERO (Dark) ========================== */
.hero-wrap {
   background-color: var(--navy);
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI4MDMiIHZpZXdCb3g9IjAgMCAxOTIwIDgwMyI+DQogIDxkZWZzPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIj4NCiAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMTM1NyIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMTM1NyIgd2lkdGg9IjE5MjAiIGhlaWdodD0iODAzIiBmaWxsPSIjZmZmIiBzdHJva2U9IiM3MDcwNzAiIHN0cm9rZS13aWR0aD0iMSIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIwLjUiIHgyPSIwLjUiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+DQogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwOTEwMmUiLz4NCiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzRmNWM5MyIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtMiIgeDE9IjAuNSIgeDI9IjAuNSIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzA5MTAyZSIvPg0KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjIyYTRiIi8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgPC9kZWZzPg0KICA8ZyBpZD0iTWFza19Hcm91cF8xMTIiIGRhdGEtbmFtZT0iTWFzayBHcm91cCAxMTIiIGNsaXAtcGF0aD0idXJsKCNjbGlwLXBhdGgpIj4NCiAgICA8ZyBpZD0iR3JvdXBfMTA1MCIgZGF0YS1uYW1lPSJHcm91cCAxMDUwIj4NCiAgICAgIDxnIGlkPSJHcm91cF8xMDQ4IiBkYXRhLW5hbWU9Ikdyb3VwIDEwNDgiPg0KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzIiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDIiIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjgwMyIgZmlsbD0iIzA5MTAyZSIvPg0KICAgICAgICA8Y2lyY2xlIGlkPSJFbGxpcHNlXzUiIGRhdGEtbmFtZT0iRWxsaXBzZSA1IiBjeD0iMzk3LjUiIGN5PSIzOTcuNSIgcj0iMzk3LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjEgMzMyKSIgb3BhY2l0eT0iMC4zMDUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50KSIvPg0KICAgICAgPC9nPg0KICAgICAgPGcgaWQ9Ikdyb3VwXzEwNDkiIGRhdGEtbmFtZT0iR3JvdXAgMTA0OSI+DQogICAgICAgIDxjaXJjbGUgaWQ9IkVsbGlwc2VfMTQ0NyIgZGF0YS1uYW1lPSJFbGxpcHNlIDE0NDciIGN4PSIzOTcuNSIgY3k9IjM5Ny41IiByPSIzOTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA0NyAtMjg5KSIgb3BhY2l0eT0iMC4zMDUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50LTIpIi8+DQogICAgICA8L2c+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg==);
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   color: #fff;
   position: relative;
   overflow: hidden;
   padding-bottom: 60px;
}

.hero-nav,
.hero-content {
   position: relative;
   z-index: 2;
}

/* NAV */
.hero-nav {
   padding: 14px 0;
   position: relative;
   z-index: 10;
}

/* Sticky header */
.sticky-nav {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: var(--navy);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: box-shadow 0.25s ease, padding 0.25s ease;
}

/* ===== ISTC-style Burger Button (3 bars → X animation) ===== */
.burger-btn {
   display: none;
   width: 38px;
   height: 38px;
   padding: 0;
   background: transparent;
   border: none;
   cursor: pointer;
   position: relative;
   z-index: 1100;
   box-shadow: none !important;
   outline: none !important;
}

.burger-btn:focus {
   box-shadow: none !important;
   outline: none !important;
}

.burger-btn .icon-bar {
   display: block;
   width: 28px;
   height: 3px;
   background: #fff;
   border-radius: 2px;
   margin: 5px auto;
   transition: all 0.3s ease;
}

/* When menu is OPEN (button loses .collapsed class) → bars transform into X */
.burger-btn:not(.collapsed) .icon-bar:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
}

.burger-btn:not(.collapsed) .icon-bar:nth-child(2) {
   opacity: 0;
}

.burger-btn:not(.collapsed) .icon-bar:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
}

/* Drawer overlay */
.drawer-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(2px);
   z-index: 1040;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.drawer-overlay.active {
   display: block;
   opacity: 1;
}

/* ===== Mobile/tablet drawer (below 1255px) ===== Bootstrap's navbar-expand-lg activates the desktop inline nav at 992px+, but our menu has 10 items + logo + CTA which doesn't fit until ≥1255px. Below that we force the burger drawer. */
@media (min-width:992px) and (max-width:1254px) {
   .navbar.navbar-expand-lg .navbar-toggler {
      display: inline-flex !important;
   }

   .navbar.navbar-expand-lg .navbar-collapse:not(.show) {
      display: none !important;
   }

   .navbar.navbar-expand-lg .navbar-collapse.show {
      display: block !important;
   }
}

@media (max-width:1254px) {
   .burger-btn {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
   }

   .drawer-nav {
      position: fixed !important;
      top: 0;
      right: -100%;
      bottom: 0;
      width: 100vw;
      max-width: 100%;
      height: 100vh;
      background: var(--navy);
      padding: 0 0 40px;
      z-index: 1060;
      overflow-y: auto;
      overflow-x: hidden;
      transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex !important;
      flex-direction: column;
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
   }

   .drawer-nav.show {
      right: 0;
   }

   .drawer-nav.collapsing {
      height: 100vh !important;
      transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   /* Drawer header — logo centered, close X pinned to the top-right corner */
   .drawer-header {
      position: sticky;
      top: 0;
      z-index: 2;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: var(--navy);
      text-align: center;
      min-height: 88px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .drawer-logo {
      display: inline-block;
      line-height: 0;
   }

   .drawer-logo img {
      max-height: 54px;
      width: auto;
   }

   .drawer-close {
      position: absolute;
      top: 14px;
      right: 14px;
      transform: none;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      color: #fff;
      font-size: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
      z-index: 3;
   }

   .drawer-close:hover {
      background: var(--btn);
      border-color: var(--btn);
      color: var(--navy);
      transform: rotate(90deg);
   }

   /* Hide the original burger button while drawer is open — no duplicate X */
   body.drawer-open .burger-btn {
      opacity: 0;
      pointer-events: none;
   }

   /* Nav list */
   .drawer-nav .navbar-nav {
      flex-direction: column !important;
      width: 100%;
      gap: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      align-items: stretch !important;
   }

   .drawer-nav .nav-item {
      width: 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
   }

   .drawer-nav .nav-link {
      color: #fff !important;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      padding: 16px 22px !important;
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      transition: background 0.2s, color 0.2s;
   }

   .drawer-nav .nav-link:hover {
      background: rgba(122, 204, 13, 0.1);
      color: var(--btn) !important;
   }

   /* ACTIVE state (Home or current page) — green bg */
   .drawer-nav .nav-item.active>.nav-link,
   .drawer-nav .nav-item:first-child>.nav-link {
      background: var(--btn);
      color: var(--navy) !important;
      font-weight: 600;
   }

   .drawer-nav .nav-item:first-child>.nav-link:hover {
      background: var(--btn-hover);
      color: var(--navy) !important;
   }

   /* Hide default Bootstrap caret — we use separate + button */
   .drawer-nav .dropdown-toggle::after {
      display: none;
   }

   /* + / − toggle button next to dropdown link (galaxywing.com style) */
   .drawer-nav .nav-item {
      position: relative;
   }

   .drawer-nav .sub-menu-toggle {
      position: absolute;
      top: 0;
      right: 0;
      width: 54px;
      height: 54px;
      background: transparent;
      border: none;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      padding: 0;
      transition: background 0.2s;
   }

   .drawer-nav .sub-menu-toggle:hover {
      background: rgba(122, 204, 13, 0.1);
      color: var(--btn);
   }

   .drawer-nav .sub-menu-toggle .icon-plus,
   .drawer-nav .sub-menu-toggle .icon-minus {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: opacity 0.2s, transform 0.2s;
   }

   .drawer-nav .sub-menu-toggle .icon-minus {
      display: none;
   }

   .drawer-nav .nav-item.dropdown.open>.sub-menu-toggle .icon-plus {
      display: none;
   }

   .drawer-nav .nav-item.dropdown.open>.sub-menu-toggle .icon-minus {
      display: inline-flex;
   }

   .drawer-nav .nav-item.dropdown.open>.sub-menu-toggle {
      background: rgba(122, 204, 13, 0.15);
      color: var(--btn);
   }

   /* Make room for the + button on dropdown links */
   .drawer-nav .nav-item.dropdown>.nav-link {
      padding-right: 64px !important;
   }

   /* Sub-menu expands inline */
   .drawer-nav .dropdown-menu {
      position: static !important;
      width: 100% !important;
      margin: 0 !important;
      border-radius: 0 !important;
      background: rgba(0, 0, 0, 0.25) !important;
      box-shadow: none !important;
      border: none !important;
      padding: 0 !important;
      max-height: 0;
      overflow: hidden;
      display: block !important;
      transition: max-height 0.35s ease;
   }

   .drawer-nav .nav-item.dropdown.open>.dropdown-menu {
      max-height: 2000px;
   }

   /* Simplified mega-menu on mobile — just show items as flat list */
   .drawer-nav .mega-layout {
      display: block !important;
      min-height: 0;
   }

   .drawer-nav .mega-tabs {
      background: rgba(0, 0, 0, 0.25);
      flex-direction: row;
      overflow-x: auto;
      padding: 10px 14px;
      gap: 6px;
      scrollbar-width: none;
   }

   .drawer-nav .mega-tabs::-webkit-scrollbar {
      display: none;
   }

   .drawer-nav .mega-tab {
      color: rgba(255, 255, 255, 0.7) !important;
      background: transparent;
      padding: 6px 12px;
      white-space: nowrap;
      font-size: 13px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.15);
   }

   .drawer-nav .mega-tab.active {
      background: var(--btn);
      color: var(--navy) !important;
      border-color: var(--btn);
   }

   .drawer-nav .mega-panel {
      display: none !important;
      grid-template-columns: 1fr !important;
      padding: 0;
      gap: 0 !important;
   }

   .drawer-nav .mega-panel.active {
      display: block !important;
   }

   .drawer-nav .mega-panels {
      padding: 0;
   }

   .drawer-nav .mega-item {
      color: #fff;
      padding: 14px 22px 14px 44px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 0;
   }

   .drawer-nav .mega-item:last-of-type {
      border-bottom: none;
   }

   .drawer-nav .mega-item strong {
      color: #fff;
      font-size: 14px;
   }

   .drawer-nav .mega-item p {
      color: rgba(255, 255, 255, 0.5);
      font-size: 12px;
   }

   .drawer-nav .mega-item:hover {
      background: rgba(122, 204, 13, 0.08);
   }

   .drawer-nav .mega-icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
      background: var(--btn);
      color: var(--navy);
   }

   .drawer-nav .mega-grid-simple {
      padding: 0;
      display: block;
   }

   .drawer-nav .mega-simple-item {
      color: #fff;
      padding: 13px 22px 13px 44px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 0;
      display: flex;
      align-items: center;
      gap: 12px;
   }

   .drawer-nav .mega-simple-item:last-of-type {
      border-bottom: none;
   }

   .drawer-nav .mega-simple-item i {
      color: var(--btn);
      font-size: 14px;
      width: 18px;
   }

   .drawer-nav .mega-simple-item:hover {
      background: rgba(122, 204, 13, 0.08);
      color: var(--btn);
   }

   .drawer-nav .mega-view-all {
      position: static !important;
      display: inline-flex !important;
      margin: 14px 22px;
   }

   /* Nav phone + Book a Meeting button inside drawer */
   .drawer-nav .nav-phone {
      padding: 16px 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 15px;
      display: flex;
      justify-content: center;
   }

   .drawer-nav>.btn-cta,
   .drawer-nav .nav-item:last-child>.btn-cta {
      margin: 20px 22px !important;
      display: block;
      text-align: center;
   }

   /* Lock body scroll when drawer open */
   body.drawer-open {
      overflow: hidden;
   }
}

/* Hide drawer header + submenu toggle + mobile-nav on full desktop (≥1255px) */
@media (min-width:1255px) {
   .drawer-header {
      display: none;
   }

   .sub-menu-toggle {
      display: none !important;
   }

   .mobile-nav {
      display: none !important;
   }
}

/* ===== MOBILE NAV (drawer mode, accordion-style) ===== */
@media (max-width:1254px) {

   /* Hide the desktop mega-menu nav entirely while in drawer mode */
   .drawer-nav .navbar-nav {
      display: none !important;
   }

   .mobile-nav {
      display: flex;
      flex-direction: column;
      background: var(--navy);
      width: 100%;
   }

   .mnav-list {
      list-style: none;
      padding: 0;
      margin: 0;
      flex: 1;
   }

   .mnav-item,
   .mnav-has-sub {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      list-style: none;
   }

   .mnav-item:last-child {
      border-bottom: none;
   }

   .mnav-row {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
   }

   .mnav-link {
      flex: 1;
      color: #fff !important;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      padding: 16px 20px;
      text-decoration: none;
      display: block;
      transition: background 0.2s, color 0.2s;
   }

   .mnav-link:hover {
      background: rgba(122, 204, 13, 0.1);
      color: var(--btn) !important;
   }

   /* Active state (Home etc) — green bg */
   .mnav-active>.mnav-link,
   .mnav-item:not(.mnav-has-sub).mnav-active>.mnav-link,
   .mnav-list>.mnav-active>.mnav-link {
      background: var(--btn);
      color: var(--navy) !important;
      font-weight: 600;
   }

   .mnav-list>.mnav-active>.mnav-link:hover {
      background: var(--btn-hover);
      color: var(--navy) !important;
   }

   /* Plain top-level items without submenu */
   .mnav-item:not(.mnav-has-sub) {
      display: block;
   }

   /* Chevron toggle button */
   .mnav-toggle {
      width: 52px;
      background: transparent;
      border: none;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: all 0.2s;
      padding: 0;
   }

   .mnav-toggle:hover {
      background: rgba(122, 204, 13, 0.1);
      color: var(--btn);
   }

   .mnav-toggle i {
      transition: transform 0.3s ease;
   }

   .mnav-has-sub.open>.mnav-row>.mnav-toggle i {
      transform: rotate(180deg);
   }

   .mnav-has-sub.open>.mnav-row>.mnav-toggle {
      background: rgba(122, 204, 13, 0.12);
      color: var(--btn);
   }

   /* Sub-list (level 1: shown below parent, darker bg) */
   .mnav-sub {
      list-style: none;
      padding: 0;
      margin: 0;
      background: #06102a;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
   }

   .mnav-has-sub.open>.mnav-sub {
      max-height: 3000px;
   }

   .mnav-sub>li {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      list-style: none;
   }

   .mnav-sub>li>a,
   .mnav-sub>li>.mnav-row>.mnav-link {
      color: rgba(255, 255, 255, 0.85) !important;
      font-size: 14.5px;
      font-weight: 500;
      padding: 14px 20px 14px 36px;
      display: block;
   }

   .mnav-sub>li>a:hover,
   .mnav-sub>li>.mnav-row>.mnav-link:hover {
      background: rgba(122, 204, 13, 0.08);
      color: var(--btn) !important;
   }

   /* Level 2 sub (nested deeper — darker bg and deeper indent) */
   .mnav-sub-l2 {
      background: #040b1f;
   }

   .mnav-sub-l2>li>a {
      padding-left: 52px !important;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.75) !important;
   }

   .mnav-sub-l2>li>a:hover {
      color: var(--btn) !important;
      background: rgba(122, 204, 13, 0.06);
   }

   /* Mobile nav footer (Book a Meeting button) */
   .mnav-footer {
      padding: 20px;
      background: var(--navy);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
   }

   .mnav-footer .btn-cta {
      font-weight: 700;
      letter-spacing: 0.96px;
      text-transform: uppercase;
   }
}

/* Hide overlay entirely on full desktop (≥1255px) */
@media (min-width:1255px) {
   .drawer-overlay {
      display: none !important;
   }
}

/* ===== Sticky country bar (appears on scroll) ===== */
.country-bar {
   position: sticky;
   top: 78px;
   z-index: 999;
   background: #ffffff;
   border-bottom: 1px solid rgba(9, 16, 46, 0.08);
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.35s ease, box-shadow 0.25s ease;
}

.country-bar.visible {
   max-height: 100px;
   box-shadow: 0 6px 16px rgba(9, 16, 46, 0.08);
}

.country-bar-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 12px 0;
   overflow-x: auto;
   scrollbar-width: none;
   flex-wrap: nowrap;
}

.country-bar-inner::-webkit-scrollbar {
   display: none;
}

.country-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 5px 16px 5px 5px;
   border-radius: 999px;
   text-decoration: none;
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 12.5px;
   font-weight: 500;
   white-space: nowrap;
   background: #f5f7fb;
   border: 1px solid rgba(9, 16, 46, 0.06);
   transition: all 0.2s ease;
   flex-shrink: 0;
}

/* Narrow desktop (1200-1554px): keep pills on one line by shrinking font/padding/gap AND expanding the .container to full viewport width (Bootstrap caps .container at 1140px from 1200-1399px, which is too narrow to fit 6 pills + phone numbers). */
@media (min-width:1200px) and (max-width:1554px) {
   .country-bar>.container {
      max-width: 100% !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
   }

   .country-pill {
      font-size: 12.5px;
      padding: 5px 10px 5px 5px;
      gap: 6px;
   }

   .country-text {
      gap: 5px;
   }

   .country-text strong {
      font-size: 12.5px;
   }

   .country-flag {
      width: 24px;
      height: 24px;
      font-size: 13px;
   }

   .country-bar-inner {
      padding: 12px 0;
      gap: 4px;
      flex-wrap: nowrap;
      justify-content: space-between;
      overflow-x: hidden;
   }

   .country-pill {
      flex: 1 1 auto;
      justify-content: center;
      min-width: 0;
   }
}

/* Full desktop: +3px font size on country bar */
@media (min-width:1555px) {
   .country-pill {
      font-size: 15.5px;
      padding: 6px 20px 6px 6px;
   }

   .country-text strong {
      font-size: 16px;
   }

   .country-flag {
      width: 30px;
      height: 30px;
      font-size: 17px;
   }

   .country-bar-inner {
      padding: 14px 0;
      gap: 12px;
   }

   .country-bar.visible {
      max-height: 110px;
   }
}

.country-pill:hover {
   background: var(--navy);
   color: #fff;
   border-color: var(--navy);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(9, 16, 46, 0.15);
}

.country-flag {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   flex-shrink: 0;
   overflow: hidden;
   border: 1px solid rgba(9, 16, 46, 0.08);
}

.country-text {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.country-text strong {
   font-weight: 700;
   font-size: 13px;
   letter-spacing: -0.16px;
}

.country-pill:hover .country-flag {
   border-color: rgba(255, 255, 255, 0.3);
}

/* Sticky-bar flag image: show the entire flag inside the circle (no crop) */
.country-flag img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
   background: #fff;
   border-radius: 50%;
}

/* ==== COUNTRY-BAR "CALL US NOW" BUTTON (tablet + mobile) ==== */
.country-callus-btn {
   display: none;
   align-items: center;
   gap: 14px;
   width: 100%;
   padding: 14px 18px;
   background: linear-gradient(135deg, #7ACC0D 0%, #68b10a 100%);
   color: #09102e !important;
   border-radius: 0;
   text-decoration: none;
   transition: background .2s ease;
   cursor: pointer;
   border: none;
   box-shadow: none;
}

.country-callus-btn:hover {
   background: linear-gradient(135deg, #68b10a 0%, #568f00 100%);
}

.country-callus-btn .country-callus-ic {
   width: 42px;
   height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(9, 16, 46, 0.12);
   color: #09102e;
   border-radius: 12px;
   font-size: 20px;
   flex-shrink: 0;
}

.country-callus-btn .country-callus-text {
   flex: 1;
   line-height: 1.2;
   text-align: left;
}

.country-callus-btn .country-callus-text strong {
   display: block;
   font-size: 16px;
   font-weight: 800;
   letter-spacing: -0.16px;
}

.country-callus-btn .country-callus-text small {
   font-size: 11.5px;
   font-weight: 600;
   opacity: 0.75;
   letter-spacing: 0.32px;
}

.country-callus-btn .country-callus-arrow {
   color: #09102e;
   font-size: 22px;
   opacity: 0.7;
}

/* Modal */
.country-call-modal .modal-dialog {
   max-width: 540px;
}

.country-call-modal-content {
   border-radius: 20px;
   border: none;
   overflow: hidden;
   background: linear-gradient(180deg, #ffffff 0%, #f8faf4 100%);
   padding: 34px 28px 28px;
   position: relative;
}

.country-call-close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: #f5f7fb;
   color: #09102e;
   font-size: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background .2s ease, transform .2s ease;
   z-index: 2;
}

.country-call-close:hover {
   background: #09102e;
   color: #fff;
   transform: rotate(90deg);
}

.country-call-header {
   text-align: center;
   margin-bottom: 26px;
   padding: 0 20px;
}

.country-call-header .country-call-eyebrow {
   display: inline-block;
   padding: 6px 14px;
   border-radius: 999px;
   background: rgba(122, 204, 13, 0.14);
   color: #568f00;
   font-weight: 700;
   font-size: 11.5px;
   letter-spacing: 0.96px;
   margin-bottom: 10px;
}

.country-call-header h3 {
   font-family: 'Fraunces', 'Inter', sans-serif;
   font-weight: 800;
   font-size: 26px;
   color: #09102e;
   margin: 0 0 6px;
   letter-spacing: -0.16px;
}

.country-call-header p {
   color: #5a6378;
   font-size: 14px;
   margin: 0;
}

.country-call-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
}

.country-call-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 14px;
   padding: 14px 18px;
   width: 100%;
   box-sizing: border-box;
   background: #fff;
   border: 1px solid #e6ecf1;
   border-radius: 14px;
   text-decoration: none;
   text-align: left;
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.country-call-item:hover {
   transform: translateY(-2px);
   border-color: rgba(122, 204, 13, 0.5);
   box-shadow: 0 10px 24px rgba(9, 16, 46, 0.08);
}

.country-call-flag {
   width: 44px;
   height: 44px;
   min-width: 44px;
   flex: 0 0 44px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   background: #f8faf4;
   border: 1px solid #e6ecf1;
   flex-shrink: 0;
   overflow: hidden;
}

.country-call-flag img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.country-call-body {
   flex: 1 1 auto;
   min-width: 0;
   line-height: 1.2;
   text-align: left;
}

.country-call-body strong {
   display: block;
   font-size: 12px;
   color: #6b7591;
   font-weight: 700;
   letter-spacing: 0.64px;
   margin-bottom: 4px;
   text-align: left;
}

.country-call-body span {
   display: block;
   font-size: 16px;
   color: #09102e;
   font-weight: 700;
   text-align: left;
}

.country-call-item i.bi-telephone-fill {
   color: #568f00;
   font-size: 18px;
}

/* On tablet & mobile: hide individual pills, show single Call Us button */
@media (max-width:1199px) {
   .country-pill {
      display: none !important;
   }

   .country-callus-btn {
      display: inline-flex;
      align-items: center;
      align-self: stretch;
      height: auto;
      min-height: 72px;
      padding: 0 16px;
   }

   .country-callus-btn .country-callus-ic {
      width: 38px;
      height: 38px;
      font-size: 18px;
   }

   .country-callus-btn .country-callus-text strong {
      font-size: 15px;
   }

   .country-callus-btn .country-callus-text small {
      font-size: 11px;
   }

   .country-bar {
      overflow: hidden !important;
   }

   .country-bar-inner {
      padding: 0 !important;
      flex-wrap: nowrap !important;
      justify-content: stretch !important;
      gap: 0 !important;
      align-items: stretch !important;
      min-height: 72px;
   }

   .country-bar.visible {
      max-height: 84px !important;
   }
}

@media (max-width:575px) {
   .country-call-modal .modal-dialog {
      margin: 16px;
   }

   .country-call-modal-content {
      padding: 28px 20px 22px;
   }

   .country-call-header h3 {
      font-size: 22px;
   }
}

@media (max-width:1199px) {
   .country-bar {
      padding: 0 !important;
   }

   .country-bar>.container,
   .country-bar>.container-fluid {
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
   }

   .country-bar-inner {
      justify-content: stretch;
      flex-wrap: wrap;
      gap: 0;
      overflow-x: visible;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
   }

   .country-callus-btn {
      width: 100% !important;
      margin: 0 !important;
      border-radius: 0 !important;
   }

   .country-pill {
      flex: 1 1 50%;
      justify-content: center;
      font-size: 13px;
      padding: 12px 10px;
      border-radius: 0;
      border: none;
      border-right: 1px solid rgba(9, 16, 46, 0.08);
      border-bottom: 1px solid rgba(9, 16, 46, 0.08);
      background: #f5f7fb;
   }

   .country-pill:nth-child(2n) {
      border-right: none;
   }

   .country-pill:nth-last-child(-n+2) {
      border-bottom: none;
   }

   .country-pill:hover {
      transform: none;
      box-shadow: none;
      border-radius: 0;
   }

   .country-flag {
      width: 24px;
      height: 24px;
      font-size: 13px;
      border-radius: 50%;
      background: transparent;
      border: none;
   }

   .country-bar.visible {
      max-height: 260px;
   }
}

@media (max-width:991px) {
   .country-bar {
      top: 78px;
   }

   .country-bar.visible {
      max-height: 300px;
   }
}

@media (max-width:575px) {
   .country-pill {
      font-size: 12px;
      padding: 10px 8px;
      gap: 8px;
   }

   .country-flag {
      width: 22px;
      height: 22px;
      font-size: 12px;
   }

   .country-text strong {
      font-size: 12px;
   }
}

.sticky-nav.scrolled {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   padding: 8px 0;
}

.sticky-nav.scrolled .brand-logo {
   max-height: 52px;
}

.hero-nav .brand-logo {
   filter: brightness(0) invert(1);
   max-height: 72px;
   width: auto;
}

.brand-confetti {
   position: absolute;
   top: -10px;
   right: -20px;
   pointer-events: none;
}

.hero-nav .nav-link {
   color: #fff !important;
   font-weight: 500;
   font-size: 17px;
   padding: 6px 14px !important;
   letter-spacing: -0.16px;
   white-space: nowrap;
}

@media (min-width:1255px) {
   .hero-nav .navbar-nav.mx-lg-auto {
      gap: 10px !important;
      flex-wrap: nowrap;
   }

   .hero-nav .navbar-collapse {
      max-width: none;
   }

   .hero-nav .navbar-nav .nav-item {
      flex-shrink: 0;
   }

   .hero-nav .btn-cta {
      white-space: nowrap;
   }
}

/* Narrow desktop (1255-1399px): shrink padding/font so 10 items + CTA fit. */
@media (min-width:1400px) and (max-width:1499px) {
   .hero-nav .nav-link {
      font-size: 16px;
      padding: 6px 12px !important;
   }
}

@media (min-width:1255px) and (max-width:1399px) {
   .hero-nav .nav-link {
      font-size: 14px;
      padding: 6px 8px !important;
   }

   .hero-nav .navbar-nav.mx-lg-auto {
      gap: 2px !important;
   }

   .hero-nav .btn-cta {
      font-size: 13px;
      padding: 10px 16px !important;
   }
}

.hero-nav .nav-link:hover {
   color: var(--orange) !important;
}

.hero-nav .dropdown-menu {
   background: #fff;
   border: none;
   border-radius: 10px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   padding: 8px;
}

.hero-nav .dropdown-item {
   border-radius: 8px;
   padding: 10px 14px;
   color: var(--navy) !important;
   font-weight: 500;
   font-size: 14px;
}

.hero-nav .dropdown-item:hover {
   background: var(--bg-alt);
   color: var(--orange) !important;
}

/* ========================== MEGA MENU ========================== */
@media (min-width:1255px) {
   .hero-nav .nav-item.has-mega {
      position: static;
   }

   .hero-nav .mega-menu {
      left: 0;
      right: 0;
      width: min(1100px, calc(100vw - 40px));
      margin: 6px auto 0;
      padding: 0;
      border-radius: 14px;
      overflow: visible;
   }

   /* Hover-bridge: extend the parent nav-item's hover area DOWN to cover the gap */
   .hero-nav .nav-item.dropdown {
      padding-bottom: 22px;
      /* extends hit area below the link */
      margin-bottom: -22px;
      /* keeps layout unchanged */
   }

   /* Belt-and-suspenders: also bridge above the dropdown menu itself */
   .hero-nav .nav-item.dropdown>.dropdown-menu::before {
      content: '';
      position: absolute;
      top: -22px;
      left: -8px;
      right: -8px;
      height: 28px;
      background: transparent;
   }

   /* Keep the dropdown rendered briefly after mouse leaves so diagonal cursor moves don't drop it */
   .hero-nav .nav-item.dropdown>.dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
   }

   .hero-nav .nav-item.dropdown:hover>.dropdown-menu,
   .hero-nav .nav-item.dropdown>.dropdown-menu:hover,
   .hero-nav .nav-item.dropdown.show>.dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
   }

   /* Keep the inner content visually clipped while keeping bridge accessible */
   .hero-nav .mega-menu>.mega-layout,
   .hero-nav .mega-menu>.mega-grid-simple {
      border-radius: 14px;
      overflow: hidden;
   }
}

@keyframes megaFade {
   from {
      opacity: 0;
      transform: translateY(-6px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.mega-layout {
   display: grid;
   grid-template-columns: 280px 1fr;
   min-height: 380px;
}

.mega-tabs {
   background: linear-gradient(180deg, #0b1436 0%, #09102e 60%, #060a24 100%);
   padding: 24px 14px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   position: relative;
   overflow: hidden;
}

.mega-tabs::before {
   content: '';
   position: absolute;
   top: -80px;
   right: -80px;
   width: 220px;
   height: 220px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.18) 0%, transparent 70%);
   pointer-events: none;
}

.mega-tabs::after {
   content: '';
   position: absolute;
   bottom: -100px;
   left: -80px;
   width: 240px;
   height: 240px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.10) 0%, transparent 70%);
   pointer-events: none;
}

.mega-tabs-label {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 3.52px;
   color: rgba(255, 255, 255, 0.45);
   text-transform: uppercase;
   padding: 6px 14px 16px;
   position: relative;
   z-index: 1;
}

.mega-tab {
   background: transparent;
   border: 0;
   text-align: left;
   padding: 13px 16px;
   font-size: 15px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.78);
   cursor: pointer;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
   border-radius: 12px;
   z-index: 1;
   font-family: 'Inter', sans-serif;
   letter-spacing: 0.16px;
}

.mega-tab-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 9px;
   background: rgba(255, 255, 255, 0.06);
   color: rgba(255, 255, 255, 0.75);
   font-size: 15px;
   flex-shrink: 0;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-tab-text {
   flex: 1;
   white-space: nowrap;
}

.mega-tab-arrow {
   font-size: 14px;
   opacity: 0;
   transform: translateX(-6px);
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   color: var(--btn);
}

.mega-tab-pill {
   display: inline-block;
   padding: 2px 8px;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.6px;
   border-radius: 999px;
   box-shadow: 0 4px 12px rgba(122, 204, 13, 0.4);
}

.mega-tab:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.04);
   transform: translateX(2px);
}

.mega-tab:hover .mega-tab-icon {
   background: rgba(122, 204, 13, 0.15);
   color: var(--btn);
}

.mega-tab:hover .mega-tab-arrow {
   opacity: 0.8;
   transform: translateX(0);
}

.mega-tab.active {
   color: var(--navy);
   background: linear-gradient(135deg, #7ACC0D 0%, #8fe015 100%);
   box-shadow: 0 8px 24px rgba(122, 204, 13, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   font-weight: 700;
   transform: translateX(0);
}

.mega-tab.active .mega-tab-icon {
   background: rgba(9, 16, 46, 0.15);
   color: var(--navy);
}

.mega-tab.active .mega-tab-arrow {
   opacity: 1;
   transform: translateX(0);
   color: var(--navy);
}

.mega-tab.active .mega-tab-pill {
   background: var(--navy);
   color: var(--btn);
   box-shadow: 0 2px 8px rgba(9, 16, 46, 0.3);
}

.mega-panels {
   position: relative;
   padding: 36px 40px 16px;
}

.mega-panel {
   display: none;
   grid-template-columns: 1fr 1fr;
   gap: 28px 40px;
}

.mega-panel.active {
   display: grid;
}

/* View all link — dark navy pill, pinned bottom-right, gently pulsing so the user's eye lands on it quickly when the mega-panel opens. */
.mega-view-all {
   position: absolute;
   bottom: 20px;
   right: 28px;
   color: #ffffff;
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.64px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
   border-radius: 999px;
   background: linear-gradient(135deg, #09102e 0%, #050717 100%);
   border: 1px solid #09102e;
   box-shadow: 0 4px 14px rgba(9, 16, 46, 0.28);
   transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
   z-index: 2;
   animation: gw-mega-pulse 2.4s ease-in-out infinite;
}

.mega-view-all:hover,
.mega-view-all:focus-visible {
   background: linear-gradient(135deg, #7ACC0D 0%, #68b10a 100%);
   color: #09102e;
   border-color: #68b10a;
   box-shadow: 0 6px 20px rgba(122, 204, 13, 0.45);
   transform: translateX(3px) scale(1.02);
   animation: none;
}

.mega-view-all i {
   font-size: 12px;
   transition: transform 0.2s;
}

.mega-view-all:hover i {
   transform: translateX(3px);
}

@keyframes gw-mega-pulse {

   0%,
   100% {
      box-shadow: 0 4px 14px rgba(9, 16, 46, 0.28), 0 0 0 0 rgba(122, 204, 13, 0.55);
   }

   50% {
      box-shadow: 0 4px 14px rgba(9, 16, 46, 0.28), 0 0 0 10px rgba(122, 204, 13, 0);
   }
}

/* Respect users who set prefers-reduced-motion */
@media (prefers-reduced-motion:reduce) {
   .mega-view-all {
      animation: none !important;
   }
}

/* Industries + Locations also get the "Visit All" style */
.mega-grid-simple {
   position: relative;
   padding-bottom: 56px;
}

.mega-industries .mega-view-all,
.mega-locations .mega-view-all {
   position: absolute;
   bottom: 16px;
   right: 20px;
}

.mega-locations .mega-panels {
   padding-bottom: 60px;
}

.mega-item {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   text-decoration: none;
   color: var(--navy);
   padding: 6px 4px;
   border-radius: 8px;
   transition: background 0.15s ease;
}

.mega-item:hover {
   background: #f8fafc;
}

.mega-item strong {
   display: block;
   font-size: 15px;
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 4px;
}

.mega-item p {
   font-size: 13px;
   color: #64748b;
   margin: 0;
   line-height: 1.45;
}

.mega-icon {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
}

/* ========================== INDUSTRIES MEGA MENU (v2 — big icon tile grid) ========================== */
.mega-industries-v2 {
   padding: 32px !important;
   min-width: 860px;
   background: linear-gradient(180deg, #0b1436 0%, #09102e 60%, #060a24 100%) !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
   position: relative;
}

.mega-industries-v2::before {
   content: '';
   position: absolute;
   top: 20px;
   right: 20px;
   width: 260px;
   height: 260px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.15) 0%, transparent 65%);
   pointer-events: none;
   border-radius: 14px;
}

.mega-industries-v2::after {
   content: '';
   position: absolute;
   bottom: 20px;
   left: 20px;
   width: 260px;
   height: 260px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.08) 0%, transparent 65%);
   pointer-events: none;
   border-radius: 14px;
}

.mega-industries-v2>* {
   position: relative;
   z-index: 1;
}

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

.mi-tile {
   display: block;
   padding: 12px 14px;
   border-radius: 12px;
   text-decoration: none;
   color: #fff;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.06);
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
}

.mi-tile:hover {
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.18), rgba(122, 204, 13, 0.04));
   border-color: rgba(122, 204, 13, 0.5);
   transform: translateY(-3px);
   color: #fff;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(122, 204, 13, 0.25);
}

.mi-icon {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   background: rgba(122, 204, 13, 0.12);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   margin-bottom: 8px;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid rgba(122, 204, 13, 0.2);
}

.mi-tile:hover .mi-icon {
   background: var(--btn);
   color: var(--navy);
   transform: rotate(-4deg) scale(1.08);
   border-color: var(--btn);
   box-shadow: 0 6px 18px rgba(122, 204, 13, 0.4);
}

.mi-title {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 13.5px;
   color: #fff;
   margin-bottom: 2px;
   letter-spacing: -0.16px;
}

.mi-desc {
   font-size: 11.5px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.4;
}

.mi-tile:hover .mi-desc {
   color: rgba(255, 255, 255, 0.78);
}

.mega-industries-v2 .mega-view-all {
   position: static !important;
   display: inline-flex !important;
   margin: 18px auto 4px !important;
   grid-column: unset !important;
   color: var(--btn);
}

.mega-industries-v2 .mega-view-all:hover {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
}

/* ========================== LOCATIONS MEGA MENU (v2 — flag cards) ========================== */
.mega-locations-v2 {
   padding: 32px !important;
   min-width: 780px;
   background: linear-gradient(180deg, #0b1436 0%, #09102e 60%, #060a24 100%) !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
   position: relative;
}

.mega-locations-v2::before {
   content: '';
   position: absolute;
   top: 20px;
   right: 20px;
   width: 280px;
   height: 280px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.15) 0%, transparent 65%);
   pointer-events: none;
   border-radius: 14px;
}

.mega-locations-v2::after {
   content: '';
   position: absolute;
   bottom: 20px;
   left: 20px;
   width: 280px;
   height: 280px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.08) 0%, transparent 65%);
   pointer-events: none;
   border-radius: 14px;
}

.mega-locations-v2>* {
   position: relative;
   z-index: 1;
}

.ml-header {
   margin-bottom: 22px;
   padding: 0 4px;
}

.ml-eyebrow {
   display: inline-block;
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2.24px;
   text-transform: uppercase;
   margin-bottom: 6px;
}

.ml-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 26px;
   color: #fff;
   letter-spacing: -0.32px;
   margin: 0;
}

.ml-title .grad-dark,
.ml-title span {
   background: linear-gradient(90deg, var(--btn) 0%, #a8f043 50%, #ffffff 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
}

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

.ml-card {
   position: relative;
   display: block;
   padding: 20px 18px 18px;
   border-radius: 14px;
   text-decoration: none;
   color: #fff;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
}

.ml-card::before {
   content: '';
   position: absolute;
   top: -30px;
   right: -30px;
   width: 90px;
   height: 90px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.25), transparent 65%);
   opacity: 0;
   transition: opacity 0.3s;
}

.ml-card:hover {
   background: rgba(122, 204, 13, 0.08);
   border-color: rgba(122, 204, 13, 0.5);
   transform: translateY(-3px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(122, 204, 13, 0.3);
   color: #fff;
}

.ml-card:hover::before {
   opacity: 1;
}

.ml-flag {
   font-size: 32px;
   line-height: 1;
   margin-bottom: 10px;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 2px solid rgba(255, 255, 255, 0.12);
   transition: all 0.3s ease;
}

.ml-card:hover .ml-flag {
   border-color: var(--btn);
   transform: scale(1.05);
   box-shadow: 0 6px 18px rgba(122, 204, 13, 0.3);
}

.ml-country {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 17px;
   color: #fff;
   letter-spacing: -0.16px;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.ml-badge {
   display: inline-block;
   background: var(--btn);
   color: var(--navy);
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.6px;
   padding: 3px 8px;
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(122, 204, 13, 0.35);
}

.ml-cities {
   font-size: 13.5px;
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.7;
   margin-bottom: 14px;
   min-height: 36px;
   display: flex;
   flex-wrap: wrap;
   gap: 6px 4px;
   align-items: center;
}

.ml-card:hover .ml-cities {
   color: #ffffff;
}

.ml-cities a {
   display: inline-block;
   color: rgba(255, 255, 255, 0.92);
   text-decoration: none;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.10);
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
   white-space: nowrap;
}

.ml-cities a:hover {
   color: #09102e;
   background: #c5f07a;
   border-color: #7ACC0D;
   transform: translateY(-1px);
}

.ml-link {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-size: 12px;
   transition: gap 0.2s;
}

.ml-link i {
   font-size: 11px;
}

.ml-card:hover .ml-link {
   gap: 8px;
}

.ml-card-india {
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.15), rgba(122, 204, 13, 0.03));
   border-color: rgba(122, 204, 13, 0.4);
}

.ml-card-india .ml-flag {
   border-color: rgba(122, 204, 13, 0.4);
   background: rgba(122, 204, 13, 0.12);
}

/* Legacy simple grid (still used by other menus if any) */
.mega-grid-simple {
   padding: 30px 36px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px 24px;
}

.mega-simple-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border-radius: 8px;
   text-decoration: none;
   color: var(--navy);
   font-weight: 500;
   font-size: 14px;
   transition: background 0.15s ease, color 0.15s ease;
}

.mega-simple-item i {
   color: var(--orange);
   font-size: 16px;
   width: 20px;
   text-align: center;
}

.mega-simple-item:hover {
   background: #f1f5f9;
   color: var(--orange);
}

.mega-locations .mega-panel {
   display: none;
   grid-template-columns: repeat(3, 1fr);
   gap: 6px 20px;
}

.mega-locations .mega-panel.active {
   display: grid;
}

.nav-flags {
   display: inline-flex;
   gap: 6px;
   align-items: center;
}

.flag-btn {
   font-size: 18px;
   cursor: pointer;
   padding: 4px 6px;
   border-radius: 6px;
   transition: background 0.15s ease;
   line-height: 1;
}

.flag-btn:hover {
   background: rgba(255, 255, 255, 0.12);
}

.hero-nav .dropdown-toggle::after {
   margin-left: 6px;
   vertical-align: 2px;
}

@media (max-width:991px) {
   .mega-layout {
      grid-template-columns: 1fr;
   }

   .mega-tabs {
      flex-direction: row;
      overflow-x: auto;
      padding: 10px;
      gap: 6px;
   }

   .mega-tabs-label {
      display: none;
   }

   .mega-tab {
      padding: 8px 14px;
      white-space: nowrap;
      flex-shrink: 0;
   }

   .mega-tab-arrow {
      display: none;
   }

   .mega-tab-icon {
      width: 26px;
      height: 26px;
      font-size: 13px;
   }

   .mega-tab-pill {
      font-size: 8px;
      padding: 1px 6px;
   }

   .mega-panels {
      padding: 18px;
   }

   .mega-panel {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .mega-grid-simple {
      grid-template-columns: repeat(2, 1fr);
      padding: 16px;
   }

   .mega-locations .mega-panel {
      grid-template-columns: repeat(2, 1fr);
   }

   .hero-nav .mega-menu {
      width: 100%;
      margin: 8px 0 0;
   }
}

.nav-phone {
   color: #fff;
   font-weight: 600;
   font-size: 15px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.nav-phone:hover {
   color: var(--orange);
}

/* BUTTON — flat green pill, navy text, no shadows/glow */
.btn-cta {
   background: var(--btn);
   color: #09102e !important;
   font-weight: 700;
   font-size: 17px;
   padding: 18px 38px;
   letter-spacing: 0.32px;
   border: none;
   border-radius: 999px;
   box-shadow: none !important;
   transition: background 0.2s ease;
}

.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active {
   background: var(--btn-hover);
   color: #09102e !important;
   transform: none !important;
   box-shadow: none !important;
   outline: none !important;
}

/* Keep the nav "Book a Meeting" small (exception — user request) */
.hero-nav .btn-cta,
.sticky-nav .btn-cta {
   padding: 12px 22px !important;
   font-size: 15px !important;
   font-weight: 600 !important;
}

.mnav-cta {
   padding: 20px;
}

/* Large button override */
.btn-lg.btn-cta,
.btn-cta.btn-lg {
   padding: 20px 46px;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 0.48px;
}

/* Kill Bootstrap's default blue focus ring on all buttons */
.btn:focus,
.btn:focus-visible,
button:focus,
button:focus-visible {
   box-shadow: none !important;
   outline: none !important;
}

/* HERO CONTENT */
.hero-content {
   padding: 60px 0 80px;
   position: relative;
   z-index: 2;
}

.hero-title {
   font-size: clamp(30px, 5.5vw, 68px);
   line-height: 1.2;
   color: #fff;
   margin-bottom: 24px;
   font-weight: 600;
}

.script-accent {
   font-family: 'Caveat', cursive;
   color: var(--orange);
   font-weight: 700;
   font-size: 62px;
   font-style: normal;
   display: inline-block;
   transform: translateY(6px) rotate(-2deg);
   padding: 0 8px;
}

.hero-sub {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.75);
   margin-bottom: 28px;
   max-width: 520px;
}

.hero-features {
   margin-bottom: 32px;
}

.hero-features li {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   padding: 6px 0;
}

.check-circle {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   border: 2px solid var(--orange);
   color: var(--orange);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   flex-shrink: 0;
}

/* HERO FORM (lead capture) */
.hero-form-card {
   background: #fff;
   border-radius: 24px;
   padding: 36px 32px 28px;
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 10px 20px rgba(0, 0, 0, 0.25);
   position: relative;
   max-width: 480px;
   margin: 0 auto;
   z-index: 2;
}

.hero-form-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(122, 204, 13, 0.15);
   color: var(--btn-hover);
   padding: 6px 14px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.92px;
   margin-bottom: 16px;
}

.hero-form-pill i {
   font-size: 13px;
}

.hero-form-title {
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 28px;
   color: var(--navy);
   line-height: 1.2;
   margin-bottom: 10px;
   letter-spacing: -0.32px;
}

.hero-form-sub {
   font-size: 14.5px;
   color: #5a6378;
   line-height: 1.45;
   margin-bottom: 24px;
}

.hero-form {
   display: flex;
   flex-direction: column;
}

.hero-form .gform_fields {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.hero-form .gform_footer {
   margin-top: 12px;
}

.hero-form .screen-reader-text {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   width: 1px;
   overflow: hidden;
}

.hero-field {
   position: relative;
}

.hero-field .ginput_container {
   position: relative;
   display: flex;
   align-items: center;
}

.hero-field i {
   position: absolute;
   left: 16px;
   color: #94a3b8;
   font-size: 16px;
   pointer-events: none;
   z-index: 2;
}

.hero-field input {
   width: 100%;
   height: 52px;
   padding: 0 16px 0 46px;
   border: 1.5px solid rgba(9, 16, 46, 0.12);
   background: #f7f9fc;
   border-radius: 12px;
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   color: var(--navy);
   outline: none;
   transition: all 0.2s;
}

.hero-field input::placeholder {
   color: #94a3b8;
}

.hero-field input:focus {
   border-color: var(--btn);
   background: #fff;
   box-shadow: 0 0 0 4px rgba(122, 204, 13, 0.12);
}

.hero-form-btn {
   height: 56px;
   background: var(--btn);
   color: #09102e !important;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 1.28px;
   text-transform: uppercase;
   border: none;
   border-radius: 999px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-top: 4px;
   padding: 0 32px;
   box-shadow: none !important;
   transition: background 0.2s ease;
}

.hero-form-btn:hover,
.hero-form-btn:focus,
.hero-form-btn:active {
   background: var(--btn-hover);
   color: #09102e !important;
   transform: none !important;
   box-shadow: none !important;
   outline: none !important;
}

.hero-form-btn i {
   font-size: 16px;
   transition: transform 0.2s;
}

.hero-form-btn:hover i {
   transform: translateX(3px);
}

.hero-form-reassure {
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: center;
   color: #5a6378;
   font-size: 12.5px;
   margin-top: 14px;
   font-weight: 500;
}

.hero-form-reassure i {
   color: var(--btn);
   font-size: 15px;
}

.hero-form-trust {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
   border-top: 1px solid rgba(9, 16, 46, 0.08);
   padding-top: 18px;
   margin-top: 18px;
}

.hero-form-trust .stars {
   color: var(--btn);
}

.hero-form-trust small {
   color: #5a6378;
   font-size: 12px;
   font-weight: 600;
}

/* HERO VISUAL */
.hero-visual-col {
   min-height: 500px;
}

.hero-circle {
   width: 420px;
   height: 420px;
   background: rgba(122, 204, 13, 0.18);
   border-radius: 50%;
   margin: 20px auto;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

.hero-person {
   width: 100%;
   max-width: 380px;
   height: auto;
   display: block;
}

.chat-bubble {
   position: absolute;
   background: #fff;
   color: var(--navy);
   padding: 14px 18px;
   border-radius: 14px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   min-width: 240px;
   z-index: 3;
}

.chat-bubble-1 {
   top: 10%;
   left: 0;
}

.chat-bubble-2 {
   top: 35%;
   right: 0;
}

.chat-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 13px;
   color: var(--navy);
   flex-shrink: 0;
}

.chat-name {
   font-weight: 700;
   font-size: 13px;
   margin-bottom: 2px;
}

.chat-msg {
   font-size: 13px;
   color: var(--muted);
}

.confetti-1 {
   position: absolute;
   top: 5%;
   right: 10%;
   width: 60px;
   transform: rotate(15deg);
   opacity: 0.9;
}

.confetti-2 {
   position: absolute;
   bottom: 10%;
   left: 5%;
   width: 50px;
   transform: rotate(-20deg);
   opacity: 0.8;
}

/* Curved bottom */
.hero-curve {
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 100%;
   height: 80px;
   display: block;
}

/* ========================== HERO VIDEO BUTTON — pulsing play trigger ========================== */
.hero-video-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 20px;
   margin-top: 42px;
   padding: 0;
   border: 0;
   background: transparent;
   cursor: pointer;
   font-family: 'Inter', sans-serif;
   color: #fff;
   outline: 0;
   transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-video-btn:hover {
   transform: translateX(4px);
}

.hero-video-btn:focus-visible {
   outline: 2px solid #7ACC0D;
   outline-offset: 8px;
   border-radius: 999px;
}

/* The solid play disc */
.hvb-core {
   position: relative;
   z-index: 3;
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: linear-gradient(135deg, #7ACC0D 0%, #5fa908 100%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #09102e;
   font-size: 30px;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px rgba(122, 204, 13, 0.35), inset 0 -4px 10px rgba(0, 0, 0, 0.15);
   transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .35s ease;
}

.hvb-core i {
   transform: translateX(2px);
   filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
}

.hero-video-btn:hover .hvb-core {
   transform: scale(1.08);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 40px rgba(122, 204, 13, 0.5), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
}

/* Pulsing rings (3, staggered) */
.hvb-ring {
   position: absolute;
   top: 50%;
   left: 36px;
   width: 72px;
   height: 72px;
   margin: -36px 0 0 -36px;
   border-radius: 50%;
   border: 2px solid rgba(122, 204, 13, 0.5);
   pointer-events: none;
   z-index: 1;
   opacity: 0;
   animation: hvbPulse 2.4s cubic-bezier(0.3, 0, 0.5, 1) infinite;
}

.hvb-ring-2 {
   animation-delay: 0.8s;
}

.hvb-ring-3 {
   animation-delay: 1.6s;
}

@keyframes hvbPulse {
   0% {
      transform: scale(0.6);
      opacity: 0.9;
      border-color: rgba(122, 204, 13, 0.8);
   }

   70% {
      transform: scale(1.8);
      opacity: 0;
   }

   100% {
      transform: scale(1.8);
      opacity: 0;
   }
}

/* Arrow-pointer label (right of button) */
.hvb-label {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   text-align: left;
   line-height: 1.25;
}

.hvb-label-top {
   font-family: 'Caveat', 'Kalam', cursive;
   font-weight: 700;
   font-size: 24px;
   color: #7ACC0D;
   letter-spacing: 0.16px;
   transform: rotate(-2deg);
   transform-origin: left center;
}

.hvb-label-bottom {
   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.72);
   letter-spacing: 0.64px;
   text-transform: uppercase;
}

@media (max-width:575px) {
.script-accent {
    font-size: 50px;
}

}
@media (max-width:575px) {
   .hero-video-btn {
      gap: 14px;
      margin-top: 32px;
   }

   .hvb-core {
      width: 58px;
      height: 58px;
      font-size: 24px;
   }

   .hvb-ring {
      width: 58px;
      height: 58px;
      margin: -29px 0 0 -29px;
      left: 29px;
   }

   .hvb-label-top {
      font-size: 20px;
   }

   .hvb-label-bottom {
      font-size: 11px;
   }
}

@media (prefers-reduced-motion:reduce) {
   .hvb-ring {
      animation: none;
   }
}

/* ========================== VIDEO MODAL ========================== */
.video-modal .video-modal-dialog {
   max-width: 960px;
   width: 92vw;
}

.video-modal .video-modal-content {
   background: #000;
   border: 0;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 60px 120px rgba(0, 0, 0, 0.6);
   position: relative;
}

.video-modal-close {
   position: absolute;
   top: -46px;
   right: 0;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 0;
   background: rgba(255, 255, 255, 0.12);
   color: #fff;
   font-size: 15px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   backdrop-filter: blur(8px);
   transition: background .25s ease, transform .25s ease;
   z-index: 2;
}

.video-modal-close:hover {
   background: rgba(255, 255, 255, 0.22);
   transform: rotate(90deg);
}

.video-modal-frame {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   background: #000;
}

.video-modal-frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

.video-modal .modal-backdrop.show,
.video-modal-dialog+.modal-backdrop {
   opacity: 0.92;
}

/* ========================== LOGOS + BIG INTRO ========================== */
.logos-intro {
   background: #ffffff;
   padding: var(--sec-py-lg) 0;
}

.logos-label {
   text-align: center;
   color: var(--muted);
   font-size: 15px;
   font-weight: 500;
   margin-bottom: 40px;
}

.client-logo-big {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 30px;
   color: #1a202c;
   letter-spacing: -0.48px;
   opacity: 0.85;
   transition: opacity 0.25s;
}

.client-logo-big:hover {
   opacity: 1;
}

/* ========================== REVIEW PLATFORM BADGES (real logos from /3rdlogos/) ========================== */
.review-badges {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-around;
   gap: 28px 40px;
   margin: 0 auto 60px;
   max-width: 1280px;
   padding: 0 16px;
}

.rb {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: opacity 0.25s ease, transform 0.25s ease;
   opacity: 0.9;
}

.rb:hover {
   opacity: 1;
   transform: translateY(-2px);
}

.rb img {
   display: block;
   height: 48px;
   width: auto;
   max-width: 180px;
   object-fit: contain;
}

@media (max-width:767px) {
   .review-badges {
      gap: 20px 24px;
      margin-bottom: 44px;
   }

   .rb img {
      height: 38px;
      max-width: 140px;
   }
}

.rb-brand {
   font-weight: 800;
   font-size: 26px;
   letter-spacing: -0.32px;
   color: #1a202c;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   gap: 2px;
}

.rb-brand strong {
   font-weight: 800;
   color: #1a202c;
}

.rb-tag {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 2.88px;
   color: #4a5568;
   text-transform: uppercase;
}

.rb-icon-box {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 8px;
   font-size: 16px;
   color: #fff;
}

/* 1. Clutch — red dot + dark text */
.rb-clutch {
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
}

.rb-clutch .rb-brand {
   color: #17313B;
   font-size: 28px;
}

.rb-clutch-dot {
   display: inline-block;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #E62415;
   margin-right: 4px;
   vertical-align: middle;
   position: relative;
   top: -2px;
}

/* 2. GoodFirms — navy + yellow accent */
.rb-goodfirms .rb-icon-box {
   background: linear-gradient(135deg, #17355c 0%, #1f4572 100%);
   color: #fbbf24;
   border-radius: 6px;
}

.rb-goodfirms .rb-brand {
   color: #17355c;
   font-size: 24px;
}

.rb-goodfirms .rb-brand strong {
   color: #1f4572;
}

/* 3. UpCity — orange icon */
.rb-upcity-icon {
   background: #ffffff;
   color: #EA6831;
   border: 2px solid #EA6831;
   border-radius: 50%;
}

.rb-upcity .rb-brand {
   color: #EA6831;
   font-size: 26px;
}

.rb-upcity sup {
   font-size: 11px;
   opacity: 0.7;
}

/* 4. ITFirms — navy with yellow star */
.rb-itfirms-icon {
   background: #0f2b4f;
   color: #fbbf24;
   border-radius: 50%;
}

.rb-itfirms .rb-brand {
   color: #0f2b4f;
   font-size: 24px;
}

.rb-itfirms .rb-brand strong {
   color: #0f2b4f;
}

/* 5. Extract — 3 bars + bold black */
.rb-extract {
   flex-direction: row;
   gap: 8px;
}

.rb-extract .rb-brand {
   color: #111;
   font-size: 20px;
   letter-spacing: 0.64px;
   font-weight: 900;
}

.rb-extract-bars {
   display: inline-flex;
   flex-direction: column;
   gap: 3px;
   width: 28px;
}

.rb-extract-bars span {
   display: block;
   height: 3px;
   background: #4299E1;
   border-radius: 2px;
}

.rb-extract-bars span:nth-child(1) {
   width: 100%;
}

.rb-extract-bars span:nth-child(2) {
   width: 70%;
}

.rb-extract-bars span:nth-child(3) {
   width: 100%;
}

/* 6. Google — Google G + 5 stars */
.rb-google {
   flex-direction: column;
   gap: 3px;
   align-items: center;
}

.rb-google-g {
   width: 58px;
   height: 20px;
}

.rb-stars {
   color: #FBBC04;
   font-size: 14px;
   letter-spacing: 1px;
   line-height: 1;
}

/* 7. Facebook — blue f + 5 stars */
.rb-facebook {
   flex-direction: column;
   gap: 3px;
   align-items: center;
}

.rb-facebook>.rb-fb-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   background: #1877F2;
   color: #fff;
   font-family: Georgia, serif;
   font-weight: 900;
   font-size: 17px;
   border-radius: 4px;
}

.rb-facebook .rb-brand {
   color: #1877F2;
   font-size: 20px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   letter-spacing: -0.16px;
}

.rb-facebook-row {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

/* Override: FB layout — first row (icon + name), second row (stars) */
.rb-facebook {
   align-items: center;
}

.rb-facebook>.rb-fb-icon,
.rb-facebook>.rb-brand {
   display: inline-block;
}

.rb-stars-facebook {
   color: #1877F2;
}

.rb-stars-google {
   color: #FBBC04;
   font-size: 13px;
   letter-spacing: 2px;
}

/* Re-do FB badge with row layout */
.rb-facebook {
   display: inline-grid;
   grid-template-columns: auto auto;
   grid-template-rows: auto auto;
   gap: 0 6px;
   align-items: center;
}

.rb-facebook .rb-fb-icon {
   grid-row: 1;
   grid-column: 1;
}

.rb-facebook .rb-brand {
   grid-row: 1;
   grid-column: 2;
}

.rb-facebook .rb-stars {
   grid-row: 2;
   grid-column: 1 / span 2;
   justify-self: start;
}

@media (max-width:767px) {
   .review-badges {
      gap: 24px 28px;
      margin-bottom: 44px;
   }

   .rb-brand {
      font-size: 22px;
   }

   .rb-clutch .rb-brand {
      font-size: 22px;
   }

   .rb-extract .rb-brand {
      font-size: 17px;
   }

   .rb-google-g {
      width: 48px;
      height: 17px;
   }

   .rb-icon-box {
      width: 28px;
      height: 28px;
      font-size: 13px;
   }
}

.big-intro {
   max-width: 900px;
   margin: 80px auto 0;
   padding: 0 20px;
}

.big-intro-top {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-size: clamp(36px, 4.5vw, 58px);
   font-weight: 700;
   color: var(--navy);
   letter-spacing: -0.32px;
   line-height: 1.05;
   margin-bottom: 8px;
}

.big-intro-bottom {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-size: clamp(30px, 5.5vw, 72px);
   font-weight: 700;
   color: var(--navy);
   letter-spacing: -0.32px;
   line-height: 1.05;
   margin-bottom: 24px;
   letter-spacing: -0.48px;
}

.sparkle {
   color: var(--orange);
   font-size: 48px;
   display: inline-block;
   transform: translateY(-4px);
   text-shadow: 0 0 20px rgba(122, 204, 13, 0.4);
}

.big-intro-sub {
   font-size: 19px;
   color: var(--muted);
   max-width: 640px;
   margin: 0 auto;
   line-height: 1.6;
}

/* ========================== PORTFOLIO MARQUEE (Dark) ========================== */
.portfolio-marquee {
   background: var(--navy);
   padding: var(--sec-py-lg) 0;
   overflow: hidden;
   position: relative;
}

.portfolio-marquee::before {
   content: '';
   position: absolute;
   top: -300px;
   left: -350px;
   width: 1000px;
   height: 1000px;
   background: radial-gradient(circle at center, rgba(122, 204, 13, 0.08) 0%, rgba(122, 204, 13, 0.02) 45%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.portfolio-marquee::after {
   content: '';
   position: absolute;
   bottom: -400px;
   right: -400px;
   width: 1100px;
   height: 1100px;
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.portfolio-marquee>.container,
.portfolio-marquee>.marquee-row {
   position: relative;
   z-index: 2;
}

.portfolio-header {
   max-width: 780px;
   margin: 0 auto 64px;
   color: #fff;
}

.portfolio-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   color: #fff;
   font-size: clamp(30px, 4vw, 48px);
   font-weight: 500;
   letter-spacing: -0.32px;
   line-height: 1.2;
   margin-bottom: 0;
}

.portfolio-title-accent {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   color: #fffbd5;
   font-size: clamp(42px, 5.5vw, 64px);
   font-weight: 700;
   letter-spacing: -0.32px;
   line-height: 1.1;
   letter-spacing: -0.32px;
   margin-bottom: 24px;
}

.portfolio-sub {
   color: rgba(255, 255, 255, 0.7);
   font-size: 17px;
   max-width: 580px;
   margin: 0 auto 12px;
}

.marquee-row {
   overflow-x: auto;
   overflow-y: hidden;
   margin-top: 28px;
   cursor: grab;
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee-row::-webkit-scrollbar {
   display: none;
}

.marquee-row:active {
   cursor: grabbing;
}

.marquee-track {
   display: flex;
   gap: 24px;
   width: max-content;
   will-change: scroll-position;
   user-select: none;
}

.marquee-track img {
   user-select: none;
   -webkit-user-drag: none;
   pointer-events: none;
}

.marq-card {
   width: 380px;
   height: 240px;
   border-radius: 16px;
   flex-shrink: 0;
   background-color: #1e293b;
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   position: relative;
   overflow: hidden;
   cursor: pointer;
   display: block;
   transition: transform 0.3s, box-shadow 0.3s;
}

.marq-card:hover {
   transform: scale(1.03);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.marq-browser {
   display: flex;
   gap: 6px;
   padding: 10px 14px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(6px);
   border-radius: 10px 10px 0 0;
}

.marq-browser span {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.15);
}

.marq-browser span:first-child {
   background: #ff5f57;
}

.marq-browser span:nth-child(2) {
   background: #febc2e;
}

.marq-browser span:nth-child(3) {
   background: #28c840;
}

.marq-label {
   position: absolute;
   bottom: 16px;
   left: 16px;
   right: 16px;
   background: rgba(11, 31, 58, 0.85);
   backdrop-filter: blur(10px);
   color: #fff;
   padding: 10px 16px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 600;
}

/* Gradient variations for each card */
.marq-c1 {
   background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}

.marq-c2 {
   background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
}

.marq-c3 {
   background: linear-gradient(135deg, #84fab0, #8fd3f4);
}

.marq-c4 {
   background: linear-gradient(135deg, #fddb92, #d1fdff);
}

.marq-c5 {
   background: linear-gradient(135deg, #f093fb, #f5576c);
}

.marq-c6 {
   background: linear-gradient(135deg, #667eea, #764ba2);
}

.marq-c7 {
   background: linear-gradient(135deg, #f6d365, #fda085);
}

.marq-c8 {
   background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.marq-c9 {
   background: linear-gradient(135deg, #89f7fe, #66a6ff);
}

.marq-c10 {
   background: linear-gradient(135deg, #fbc2eb, #a18cd1);
}

.marq-c11 {
   background: linear-gradient(135deg, #fad0c4, #ffd1ff);
}

.marq-c12 {
   background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

@media (max-width:767px) {
   .marq-card {
      width: 280px;
      height: 180px;
   }

   .portfolio-marquee {
      padding: var(--sec-py-sm) 0;
   }

   .logos-intro {
      padding: var(--sec-py-sm) 0;
   }

   .big-intro {
      margin-top: 50px;
   }
}

/* ========================== CREATIVE / FOUNDER SECTION ========================== */
.creative-section {
   background: #f5f2e9;
   padding: var(--sec-py-lg) 0;
   overflow: hidden;
}

.creative-label {
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 600;
   color: var(--navy);
   letter-spacing: 2.88px;
   text-transform: uppercase;
   margin-bottom: 20px;
}

.creative-divider {
   border: none;
   height: 1px;
   background: var(--navy);
   opacity: 0.35;
   margin: 0 0 50px;
}

.creative-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-size: clamp(30px, 5vw, 68px);
   line-height: 1.05;
   font-weight: 500;
   color: var(--navy);
   letter-spacing: -0.32px;
   margin-bottom: 36px;
}

.creative-italic {
   font-family: "Fraunces", Georgia, serif;
   font-style: italic;
   font-weight: 500;
}

.creative-subtitle {
   font-family: 'Inter', sans-serif;
   font-size: clamp(18px, 2.2vw, 28px);
   font-weight: 500;
   color: var(--navy);
   line-height: 1.5;
   margin-bottom: 28px;
   letter-spacing: -0.16px;
}

.creative-text {
   font-size: 17px;
   color: #3b4a5e;
   line-height: 1.7;
   margin-bottom: 40px;
   max-width: 520px;
}

.creative-btn {
   background: #0a1a2e;
   color: #fff !important;
   font-weight: 600;
   font-size: 15px;
   border: none;
   transition: all 0.25s ease;
}

.creative-btn:hover {
   background: var(--btn);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(10, 26, 46, 0.25);
}

.creative-photo-wrap {
   position: relative;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 30px 60px rgba(11, 31, 58, 0.15);
}

.creative-photo {
   width: 100%;
   height: auto;
   min-height: 480px;
   max-height: 640px;
   object-fit: cover;
   object-position: center top;
   display: block;
}

/* "Made with AI" chip overlay */
.creative-ai-chip {
   position: absolute;
   top: 20px;
   right: 20px;
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 8px 14px 8px 12px;
   background: rgba(9, 16, 46, 0.82);
   backdrop-filter: blur(14px) saturate(140%);
   -webkit-backdrop-filter: blur(14px) saturate(140%);
   border: 1px solid rgba(122, 204, 13, 0.4);
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.28px;
   text-transform: uppercase;
   color: #fff;
   box-shadow: 0 10px 24px rgba(9, 16, 46, 0.35), 0 0 22px rgba(122, 204, 13, 0.18);
   z-index: 3;
}

.cac-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--btn);
   font-size: 14px;
   animation: cac-sparkle 2.4s ease-in-out infinite;
}

@keyframes cac-sparkle {

   0%,
   100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
   }

   50% {
      transform: scale(1.2) rotate(18deg);
      opacity: 0.8;
   }
}

.cac-text {
   line-height: 1;
}

.cac-dot {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--btn);
   box-shadow: 0 0 10px rgba(122, 204, 13, 0.9);
   animation: cac-pulse 1.8s ease-in-out infinite;
}

@keyframes cac-pulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.4;
      transform: scale(1.5);
   }
}

@media (max-width:575px) {
   .creative-ai-chip {
      top: 12px;
      right: 12px;
      font-size: 10.5px;
      padding: 6px 11px 6px 10px;
   }

   .cac-icon {
      font-size: 12px;
   }
}

@media (max-width:991px) {
   .creative-section {
      padding: var(--sec-py-md) 0;
   }

   .creative-photo {
      min-height: 380px;
   }

   .creative-divider {
      margin-bottom: 30px;
   }
}

/* ========================== WHY US / ABOUT (Dark) ========================== */
.why-section {
   background: var(--navy);
   color: #fff;
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
}

.why-section::before {
   content: '';
   position: absolute;
   top: -350px;
   left: -400px;
   width: 1100px;
   height: 1100px;
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.why-section::after {
   content: '';
   position: absolute;
   bottom: -450px;
   right: -450px;
   width: 1200px;
   height: 1200px;
   background: radial-gradient(circle at center, rgba(122, 204, 13, 0.1) 0%, rgba(122, 204, 13, 0.03) 45%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.why-section>.container {
   position: relative;
   z-index: 2;
}

.why-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   color: #fff;
   font-size: clamp(36px, 4.5vw, 56px);
   line-height: 1.1;
   letter-spacing: -0.32px;
   margin-bottom: 24px;
}

.why-text {
   color: rgba(255, 255, 255, 0.75);
   font-size: 17px;
   line-height: 1.7;
   margin-bottom: 36px;
   max-width: 540px;
}

.why-link {
   color: #fff;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 4px;
}

.why-link:hover {
   color: var(--orange);
}

.why-list {
   margin: 0;
   padding: 0;
}

.why-item {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 22px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.why-item:last-child {
   border-bottom: none;
}

.why-check {
   width: 44px;
   height: 44px;
   border: 2px solid var(--orange);
   border-radius: 50%;
   color: var(--orange);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0;
   transition: all 0.25s ease;
}

.why-item-text {
   flex: 1;
   color: #fff;
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(18px, 1.6vw, 22px);
   line-height: 1.3;
   letter-spacing: -0.16px;
}

.why-arrow {
   width: 42px;
   height: 42px;
   background: #7ACC0D;
   border-radius: 50%;
   color: #09102e;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
   box-shadow: 0 6px 16px rgba(122, 204, 13, 0.35);
   transition: all 0.25s ease;
}

.why-arrow:hover {
   background: #c5f07a;
   color: #09102e;
   transform: translateX(4px);
   box-shadow: 0 10px 24px rgba(122, 204, 13, 0.5);
}

.why-item:hover .why-check {
   background: var(--orange);
   color: #fff;
}

@media (max-width:767px) {
   .why-section {
      padding: var(--sec-py-sm) 0;
   }

   .why-item {
      gap: 14px;
      padding: 18px 0;
   }

   .why-check {
      width: 38px;
      height: 38px;
      font-size: 16px;
   }

   .why-arrow {
      width: 36px;
      height: 36px;
      font-size: 14px;
   }
}

/* ========================== SECTIONS ========================== */
.section {
   padding: var(--sec-py-lg) 0;
}

.section-alt {
   background: var(--bg-alt);
}

.section-head {
   max-width: 720px;
   margin-bottom: 64px;
}

.section-label {
   display: inline-block;
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 700;
   color: var(--orange);
   text-transform: uppercase;
   letter-spacing: 1.92px;
   margin-bottom: 16px;
}

/* Homepage section eyebrows — pill style applied to every section-label on the homepage. Scoped per section so the text colour can match each section's background. Shared base; per-section overrides only the colour. */
.blog-section .section-label,
.process-steps .section-label,
.offices-v2 .section-label,
.clients-section .section-label,
.ourwork-feature .section-label,
.ourwork-portfolio .section-label,
.ourwork-why .section-label,
.ourwork-hero .owh-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 16px;
   background: rgba(122, 204, 13, 0.14);
   border: 1px solid rgba(122, 204, 13, 0.55);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.22em;
   border-radius: 999px;
   margin-bottom: 18px;
   text-transform: uppercase;
}

.blog-section .section-label::before,
.process-steps .section-label::before,
.offices-v2 .section-label::before,
.clients-section .section-label::before,
.ourwork-feature .section-label::before,
.ourwork-portfolio .section-label::before,
.ourwork-why .section-label::before,
.ourwork-hero .owh-eyebrow::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #7ACC0D;
   box-shadow: 0 0 8px rgba(122, 204, 13, 0.6);
   flex-shrink: 0;
}

/* Light-bg sections — dark-lime text. */
.blog-section .section-label,
.process-steps .section-label,
.clients-section .section-label,
.ourwork-feature .section-label,
.ourwork-portfolio .section-label,
.ourwork-why .section-label,
.ourwork-hero .owh-eyebrow {
   color: #3d7c00;
}

/* Dark-bg sections — light-lime text. */
.offices-v2 .section-label {
   color: #c5f07a;
}

/* Why-section trailing anchor — extracted from the body wysiwyg by why-section.php so it sits below the paragraph as its own green-underline anchor instead of a blue inline link. */
.why-text-link-wrap {
   margin: 18px 0 0 !important;
   font-size: 16px;
}

/* Force every anchor inside the why-section body to be green + underlined, independent of the JS link-mover. This catches the case where the link is still inline in the paragraph (JS couldn't detect "trailing"), the case where it was moved below by JS, and any wysiwyg inline color the admin may have set. */
.why-text a,
.why-text a:link,
.why-text a:visited,
.why-text-link,
.why-text-link:link,
.why-text-link:visited {
   color: #3d7c00 !important;
   font-weight: 600;
   text-decoration: underline !important;
   text-underline-offset: 3px;
   text-decoration-thickness: 1.5px;
   transition: color .2s ease;
}

.why-text a:hover,
.why-text a:focus,
.why-text-link:hover,
.why-text-link:focus {
   color: #7ACC0D !important;
   text-decoration: underline !important;
}

h2 {
   font-size: clamp(32px, 4vw, 48px);
   line-height: 1.1;
   margin-bottom: 16px;
}

.section-sub {
   font-size: 18px;
   color: var(--muted);
}

/* ========================== TESTIMONIALS V2 (photo left + slider right) ========================== */
.testi-v2 {
   background: var(--navy);
   overflow: hidden;
   position: relative;
}

.testi-v2::before {
   content: '';
   position: absolute;
   top: -300px;
   left: -350px;
   width: 900px;
   height: 900px;
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 50%, transparent 72%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.testi-v2::after {
   content: '';
   position: absolute;
   bottom: -400px;
   right: -380px;
   width: 1100px;
   height: 1100px;
   background: radial-gradient(circle at center, rgba(122, 204, 13, 0.12) 0%, rgba(122, 204, 13, 0.04) 50%, transparent 72%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.testi-v2>.container-fluid {
   position: relative;
   z-index: 2;
}

/* LEFT photo + number */
.testi-left-col {
   position: relative;
   min-height: 640px;
}

.testi-left {
   position: relative;
   height: 100%;
   min-height: 640px;
   overflow: hidden;
}

.testi-bg-photo {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   opacity: 0.7;
   filter: grayscale(0.15) brightness(0.85);
}

.testi-left::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(9, 16, 46, 0.5) 0%, rgba(9, 16, 46, 0.85) 85%, rgba(9, 16, 46, 1) 100%);
   pointer-events: none;
}

.testi-left-content {
   position: absolute;
   left: 64px;
   bottom: 80px;
   right: 64px;
   z-index: 2;
   color: #fff;
   max-width: 440px;
}

.testi-big-num {
   font-family: 'Inter', sans-serif;
   font-size: clamp(88px, 10vw, 140px);
   font-weight: 700;
   color: #fff;
   line-height: 1;
   letter-spacing: -0.64px;
   margin-bottom: 40px;
}

.testi-tagline {
   font-size: clamp(18px, 1.6vw, 22px);
   line-height: 1.45;
   color: #fff;
   font-weight: 500;
   margin-bottom: 40px;
}

.testi-nav {
   display: flex;
   gap: 16px;
}

.testi-arrow {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: transparent;
   border: 1.5px solid rgba(255, 255, 255, 0.4);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 18px;
   transition: all 0.25s;
}

.testi-arrow:hover {
   background: var(--btn);
   border-color: var(--btn);
   color: #fff;
   transform: scale(1.08);
}

/* RIGHT scrollable cards */
.testi-slider {
   display: flex;
   gap: 24px;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   padding: 80px 32px 80px 24px;
   height: 100%;
   min-height: 640px;
   align-items: center;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.testi-slider::-webkit-scrollbar {
   display: none;
}

.testi-card {
   flex: 0 0 420px;
   scroll-snap-align: start;
   background: #ffffff;
   color: var(--navy);
   padding: 44px 40px;
   border-radius: 8px 32px 32px 32px;
   min-height: 540px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);
   position: relative;
}

.testi-head {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 24px;
}

.testi-score {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 28px;
   color: var(--navy);
   letter-spacing: -0.32px;
}

.testi-card .stars {
   color: var(--btn);
   letter-spacing: 5px;
   font-size: 30px;
   line-height: 1;
   text-shadow: 0 0 18px rgba(122, 204, 13, 0.35);
}

.testi-divider {
   border: none;
   border-top: 1px solid rgba(9, 16, 46, 0.12);
   margin: 0 0 28px;
   opacity: 1;
}

.testi-body {
   font-size: 17px;
   line-height: 1.6;
   color: var(--navy);
   font-weight: 500;
   flex: 1;
   margin-bottom: 32px;
}

.testi-author {
   display: flex;
   align-items: center;
   gap: 14px;
}

.testi-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--btn);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 16px;
   flex-shrink: 0;
   box-shadow: 0 4px 12px rgba(122, 204, 13, 0.35);
}

.testi-author strong {
   color: var(--navy);
   font-size: 16px;
   font-weight: 700;
   font-family: 'Inter', sans-serif;
}

.testi-author small {
   color: rgba(9, 16, 46, 0.65);
   font-size: 13px;
   margin-top: 2px;
}

@media (max-width:991px) {

   .testi-left,
   .testi-left-col {
      min-height: 440px;
   }

   .testi-slider {
      padding: 40px 20px;
      min-height: auto;
   }

   .testi-left-content {
      left: 32px;
      right: 32px;
      bottom: 48px;
   }

   .testi-card {
      flex: 0 0 320px;
      padding: 32px 28px;
      min-height: 460px;
   }
}

/* ========================== TESTIMONIALS (legacy) ========================== */
.testimonial-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 32px;
   height: 100%;
   box-shadow: 0 1px 3px rgba(11, 31, 58, 0.06);
   transition: all 0.3s;
}

.testimonial-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 50px rgba(11, 31, 58, 0.1);
}

.testimonial-text {
   font-size: 16px;
   line-height: 1.6;
   color: var(--navy);
   font-weight: 500;
   margin-bottom: 0;
}

.avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--orange), var(--teal));
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-family: "Publico Banner", serif;
   font-size: 16px;
}

/* ========================== BLOG / INSIGHTS SECTION ========================== */
.blog-section {
   position: relative;
   background: #fafafa;
   padding: var(--sec-py-lg) 0;
   overflow: hidden;
}

.blog-bg-glow {
   position: absolute;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   filter: blur(40px);
   pointer-events: none;
}

.blog-bg-glow-a {
   top: -200px;
   left: -200px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.1) 0%, transparent 65%);
}

.blog-bg-glow-b {
   bottom: -200px;
   right: -200px;
   background: radial-gradient(circle, rgba(9, 16, 46, 0.06) 0%, transparent 65%);
}

.blog-section>.container {
   position: relative;
   z-index: 2;
}

.blog-head {
   text-align: center;
   margin-bottom: 54px;
}

.blog-head-left {
   max-width: 720px;
   margin: 0 auto;
}

.blog-head-left .blog-sub {
   margin-left: auto;
   margin-right: auto;
}

.blog-heading {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 52px;
   line-height: 1.2;
   letter-spacing: -0.32px;
   color: var(--navy);
   margin: 6px 0 14px;
}

.blog-sub {
   color: #64748b;
   font-size: 17px;
   line-height: 1.6;
   margin: 0;
   max-width: 560px;
}

.blog-head-cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 22px;
   background: var(--navy);
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 14px;
   border-radius: 999px;
   text-decoration: none;
   transition: all 0.25s ease;
   white-space: nowrap;
}

.blog-head-cta span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--btn);
   color: var(--navy);
   font-size: 12px;
   transition: transform 0.25s ease;
}

.blog-head-cta:hover {
   background: var(--btn);
   color: var(--navy);
   transform: translateY(-2px);
   box-shadow: 0 10px 24px rgba(122, 204, 13, 0.35);
}

.blog-head-cta:hover span {
   background: var(--navy);
   color: var(--btn);
   transform: translateX(3px);
}

/* Grid: 3 equal cards in a row */
.blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
}

.blog-card {
   position: relative;
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid rgba(9, 16, 46, 0.06);
   text-decoration: none;
   color: var(--navy);
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 14px rgba(9, 16, 46, 0.04);
}

.blog-card:hover {
   transform: translateY(-6px);
   border-color: rgba(122, 204, 13, 0.3);
   box-shadow: 0 20px 45px rgba(9, 16, 46, 0.12), 0 0 0 1px rgba(122, 204, 13, 0.2);
   color: var(--navy);
}

.blog-card-img {
   position: relative;
   aspect-ratio: 16 / 9;
   background-size: cover;
   background-position: center;
   overflow: hidden;
}

.blog-card-img-pattern {
   position: absolute;
   bottom: -20px;
   right: -10px;
   font-size: 180px;
   color: rgba(255, 255, 255, 0.08);
   line-height: 1;
   pointer-events: none;
   transform: rotate(-8deg);
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-card-img-pattern {
   transform: rotate(-14deg) scale(1.08);
   color: rgba(122, 204, 13, 0.22);
}

.blog-card-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 5px 11px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.28px;
   text-transform: uppercase;
   border-radius: 999px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.blog-card-badge i {
   font-size: 12px;
   color: var(--btn);
}

.blog-card-badge-featured {
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
}

.blog-card-badge-featured i {
   color: var(--navy);
}

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

.blog-card-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
   flex-wrap: wrap;
}

.blog-card-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.96px;
   text-transform: uppercase;
}

.blog-card-tag i {
   font-size: 13px;
}

.blog-card-dot {
   color: rgba(9, 16, 46, 0.25);
}

.blog-card-time,
.blog-card-date {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: #94a3b8;
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 500;
}

.blog-card-time i {
   font-size: 12px;
}

.blog-card-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 21px;
   line-height: 1.22;
   letter-spacing: -0.16px;
   color: var(--navy);
   margin: 0 0 14px;
   transition: color 0.25s ease;
}

.blog-card:hover .blog-card-title {
   color: var(--btn);
}

.blog-card-excerpt {
   color: #64748b;
   font-size: 14.5px;
   line-height: 1.6;
   margin: 0 0 auto;
}

/* Centered CTA below grid */
.blog-cta-wrap {
   text-align: center;
   margin-top: 48px;
}

.blog-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   padding: 14px 26px;
   background: var(--navy);
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 0.32px;
   border-radius: 999px;
   text-decoration: none;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 10px 24px rgba(9, 16, 46, 0.2);
}

.blog-cta-btn:hover {
   background: var(--btn);
   color: var(--navy);
   transform: translateY(-2px);
   box-shadow: 0 14px 30px rgba(122, 204, 13, 0.4);
}

.blog-cta-arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--btn);
   color: var(--navy);
   font-size: 13px;
   transition: all 0.28s ease;
}

.blog-cta-btn:hover .blog-cta-arrow {
   background: var(--navy);
   color: var(--btn);
   transform: translateX(4px);
}

/* Inline author chip at bottom of card */
.blog-card-author-inline {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: 'Inter', sans-serif;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--navy);
}

.bca-avatar-sm {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--navy) 0%, #1a2857 100%);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   border: 1.5px solid rgba(122, 204, 13, 0.3);
}

/* Card footer */
.blog-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
   padding-top: 16px;
   border-top: 1px solid rgba(9, 16, 46, 0.06);
}

.blog-card-arrow {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: rgba(9, 16, 46, 0.06);
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   flex-shrink: 0;
}

.blog-card:hover .blog-card-arrow {
   background: var(--btn);
   color: var(--navy);
   transform: rotate(-8deg) scale(1.1);
   box-shadow: 0 6px 16px rgba(122, 204, 13, 0.4);
}

@media (max-width:991px) {
   .blog-section {
      padding: var(--sec-py-md) 0;
   }

   .blog-heading {
      font-size: 40px;
   }

   .blog-grid {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: auto;
   }

   .blog-card-featured {
      grid-row: span 1;
      grid-column: span 2;
   }

   .blog-card-featured .blog-card-title {
      font-size: 26px;
   }
}

@media (max-width:640px) {
   .blog-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
   }

   .blog-heading {
      font-size: 32px;
   }

   .blog-grid {
      grid-template-columns: 1fr;
   }

   .blog-card-featured {
      grid-column: span 1;
   }

   .blog-card-featured .blog-card-title {
      font-size: 22px;
   }

   .blog-card-title {
      font-size: 19px;
   }
}

/* ========================== FAQ SECTION ========================== */
.faq-section {
   position: relative;
   background: #ffffff;
   padding: var(--sec-py-lg) 0;
   overflow: hidden;
}

.faq-glow {
   position: absolute;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   filter: blur(40px);
   pointer-events: none;
}

.faq-glow-a {
   top: -180px;
   left: -180px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.1) 0%, transparent 65%);
}

.faq-glow-b {
   bottom: -180px;
   right: -180px;
   background: radial-gradient(circle, rgba(9, 16, 46, 0.05) 0%, transparent 65%);
}

.faq-section>.container {
   position: relative;
   z-index: 2;
}

.faq-split {
   display: grid;
   grid-template-columns: minmax(0, 420px) 1fr;
   gap: 80px;
   align-items: start;
}

.faq-left {
   position: sticky;
   top: 100px;
}

.faq-left .section-label {
   display: inline-block;
   margin-bottom: 10px;
   color: var(--btn);
}

.faq-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 46px;
   line-height: 1.05;
   letter-spacing: -0.32px;
   color: var(--navy);
   margin: 0 0 16px;
}

.faq-sub {
   color: #64748b;
   font-size: 16px;
   line-height: 1.65;
   margin: 0 0 32px;
}

.faq-sub a {
   color: var(--navy);
   font-weight: 600;
   text-decoration: underline;
   text-decoration-color: rgba(122, 204, 13, 0.5);
   text-underline-offset: 3px;
   transition: color 0.2s;
}

.faq-sub a:hover {
   color: var(--btn);
}

/* FAQ visual — dark navy card wrapping a white illustration panel */
.faq-visual {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   padding: 22px;
   margin-bottom: 20px;
   background: radial-gradient(at 100% 0%, rgba(122, 204, 13, 0.15), transparent 55%), linear-gradient(180deg, #141c42 0%, #0b1235 100%);
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 30px 60px rgba(9, 16, 46, 0.3), 0 0 0 1px rgba(122, 204, 13, 0.1) inset;
}

.faq-visual-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
}

.fv-blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(30px);
}

.fv-blob-a {
   width: 260px;
   height: 260px;
   top: -80px;
   right: -60px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.4), transparent 65%);
}

.fv-blob-b {
   width: 200px;
   height: 200px;
   bottom: -60px;
   left: -40px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.2), transparent 65%);
}

.faq-visual-inner {
   position: relative;
   z-index: 2;
   border-radius: 16px;
   overflow: hidden;
   background: #ffffff;
   aspect-ratio: 16 / 10;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.faq-visual-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-visual:hover .faq-visual-img {
   transform: scale(1.04);
}

/* "Online" pill — top inside the dark frame, above the white panel */
.faq-visual-badge {
   position: absolute;
   top: 32px;
   left: 32px;
   z-index: 4;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px 6px 10px;
   background: rgba(9, 16, 46, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: 0.16px;
   border-radius: 999px;
   border: 1px solid rgba(122, 204, 13, 0.35);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.faq-visual-badge-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--btn);
   box-shadow: 0 0 10px rgba(122, 204, 13, 0.9);
   animation: fvb-pulse 2s ease-in-out infinite;
}

@keyframes fvb-pulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.4;
      transform: scale(1.35);
   }
}

/* Floating chip badges around the illustration */
.faq-visual-chip {
   position: absolute;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   background: linear-gradient(135deg, #ffffff, #f4f7fb);
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 700;
   border-radius: 999px;
   box-shadow: 0 10px 24px rgba(9, 16, 46, 0.4), 0 0 0 1px rgba(122, 204, 13, 0.2);
   transform: translateY(0);
   animation: fv-float 5s ease-in-out infinite;
}

.faq-visual-chip i {
   color: var(--btn);
   font-size: 14px;
}

.faq-visual-chip-tl {
   top: 38%;
   left: 14px;
   animation-delay: 0s;
}

.faq-visual-chip-br {
   bottom: 96px;
   right: 14px;
   animation-delay: 1.5s;
}

@keyframes fv-float {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-8px);
   }
}

/* Stats footer sitting inside dark frame, below the illustration */
.faq-visual-stat {
   position: relative;
   z-index: 2;
   margin-top: 18px;
   padding: 4px 6px 2px;
   color: #fff;
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
}

.fvs-num {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 44px;
   line-height: 1;
   letter-spacing: -0.32px;
   color: #fff;
}

.fvs-num span {
   color: var(--btn);
   font-size: 26px;
   margin-left: 2px;
   vertical-align: top;
   line-height: 1;
}

.fvs-label {
   font-family: 'Inter', sans-serif;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 2.24px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.7);
   text-align: right;
   max-width: 140px;
   line-height: 1.3;
}

@media (max-width:991px) {
   .faq-visual-chip-tl {
      left: 0;
      top: 30%;
   }

   .faq-visual-chip-br {
      right: 0;
      bottom: 72px;
   }
}

@media (max-width:575px) {
   .faq-visual {
      padding: 16px;
   }

   .faq-visual-badge {
      top: 24px;
      left: 24px;
      font-size: 10.5px;
   }

   .faq-visual-chip {
      font-size: 10.5px;
      padding: 6px 11px;
   }

   .faq-visual-chip-tl,
   .faq-visual-chip-br {
      position: static;
      margin: 8px 4px 0 0;
      animation: none;
   }

   .fvs-num {
      font-size: 36px;
   }
}

.faq-help-card {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 20px;
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.08) 0%, rgba(9, 16, 46, 0.02) 100%);
   border: 1px solid rgba(122, 204, 13, 0.25);
   border-radius: 16px;
   text-decoration: none;
}

.faq-help-avatar {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--navy), #1a2857);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
   border: 2px solid rgba(122, 204, 13, 0.3);
}

.faq-help-text {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1;
   min-width: 0;
}

.faq-help-text strong {
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 700;
}

.faq-help-text span {
   color: #64748b;
   font-size: 12.5px;
   line-height: 1.4;
}

.faq-help-cta {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--btn);
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   text-decoration: none;
   flex-shrink: 0;
   transition: all 0.25s ease;
}

.faq-help-cta:hover {
   background: var(--navy);
   color: var(--btn);
   transform: rotate(45deg);
}

/* Right — accordion */
.faq-accordion {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.faq-item {
   background: #ffffff;
   border: 1px solid rgba(9, 16, 46, 0.08);
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 14px rgba(9, 16, 46, 0.05);
}

.faq-item:has(.faq-a.show) {
   border-color: rgba(122, 204, 13, 0.45);
   box-shadow: 0 16px 34px rgba(9, 16, 46, 0.14), 0 0 0 1px rgba(122, 204, 13, 0.28);
}

.faq-q {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 18px;
   width: 100%;
   padding: 20px 24px;
   background: radial-gradient(at 100% 0%, rgba(122, 204, 13, 0.1), transparent 60%), linear-gradient(180deg, #141c42 0%, #0b1235 100%);
   border: 0;
   text-align: left;
   cursor: pointer;
   color: #ffffff;
   font-family: 'Inter', sans-serif;
   transition: all 0.25s ease;
}

.faq-q:hover .faq-q-text {
   color: var(--btn);
}

.faq-q-num {
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.4);
   letter-spacing: 1.6px;
   transition: color 0.25s;
}

.faq-q[aria-expanded="true"] .faq-q-num {
   color: var(--btn);
}

.faq-q-text {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 17px;
   color: #ffffff;
   line-height: 1.4;
   letter-spacing: -0.16px;
   transition: color 0.25s;
}

.faq-q-icon {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   color: #ffffff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   flex-shrink: 0;
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-q[aria-expanded="true"] .faq-q-icon {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
   transform: rotate(135deg);
   box-shadow: 0 6px 14px rgba(122, 204, 13, 0.4);
}

.faq-q:hover .faq-q-icon {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
}

.faq-a-inner {
   padding: 20px 24px 22px 62px;
   background: #ffffff;
   color: #4b5468;
   font-size: 15px;
   line-height: 1.7;
}

.faq-a-inner p {
   margin: 0;
}

.faq-a-inner strong {
   color: var(--navy);
   font-weight: 700;
}

/* Extra FAQs wrapper — spacing between items inside the collapse */
.faq-more>.faq-item {
   margin-top: 12px;
}

/* Read-more / Show-less toggle button */
.faq-read-more {
   margin-top: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 12px 22px;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
   border: 1.5px solid var(--btn);
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.16px;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   align-self: flex-start;
   box-shadow: 0 8px 20px rgba(122, 204, 13, 0.3);
}

.faq-read-more:hover {
   background: var(--navy);
   color: #ffffff;
   border-color: var(--navy);
   transform: translateY(-2px);
   box-shadow: 0 10px 24px rgba(9, 16, 46, 0.35);
}

.faq-read-more i {
   font-size: 13px;
   transition: transform 0.25s ease;
}

.faq-read-more .frm-hide {
   display: none;
}

.faq-read-more[aria-expanded="true"] .frm-show {
   display: none;
}

.faq-read-more[aria-expanded="true"] .frm-hide {
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

@media (max-width:991px) {
   .faq-section {
      padding: var(--sec-py-md) 0;
   }

   .faq-split {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .faq-left {
      position: static;
   }

   .faq-title {
      font-size: 36px;
   }
}

@media (max-width:575px) {
   .faq-title {
      font-size: 28px;
   }

   .faq-q {
      padding: 16px 18px;
      gap: 12px;
   }

   .faq-q-text {
      font-size: 15px;
   }

   .faq-q-icon {
      width: 30px;
      height: 30px;
      font-size: 13px;
   }

   .faq-a-inner {
      padding: 10px 18px 18px 18px;
      font-size: 14px;
   }
}

/* ========================== CASE STUDIES (legacy — kept for portfolio/work pages) ========================== */
.case-card {
   background: #fff;
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid var(--line);
   transition: all 0.3s ease;
   color: inherit;
   display: block;
   height: 100%;
   box-shadow: 0 1px 3px rgba(11, 31, 58, 0.06);
}

.case-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 50px rgba(11, 31, 58, 0.12);
   border-color: var(--orange);
}

.case-image {
   height: 220px;
   position: relative;
   overflow: hidden;
}

.case-badge {
   position: absolute;
   top: 20px;
   left: 20px;
   background: #fff;
   padding: 10px 16px;
   border-radius: 999px;
   font-family: "Publico Banner", serif;
   font-weight: 700;
   font-size: 14px;
   color: var(--orange);
   box-shadow: 0 10px 30px rgba(11, 31, 58, 0.2);
}

.case-body {
   padding: 28px;
}

.case-tag {
   color: var(--muted);
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.28px;
   margin-bottom: 12px;
}

.case-body h3 {
   font-size: 22px;
   margin-bottom: 12px;
   line-height: 1.3;
}

.case-body p {
   color: var(--muted);
   font-size: 15px;
   margin: 0;
}

/* ========================== SERVICES ========================== */
.service-card {
   background: #fff;
   border-radius: 20px;
   padding: 36px;
   border: 1px solid var(--line);
   height: 100%;
   transition: all 0.3s;
}

.service-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 50px rgba(11, 31, 58, 0.1);
   border-color: var(--orange);
}

.service-icon {
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.15), rgba(122, 204, 13, 0.05));
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   color: var(--orange);
   margin-bottom: 24px;
}

.service-card h3 {
   font-size: 22px;
   margin-bottom: 12px;
}

.service-card p {
   color: var(--muted);
   font-size: 15px;
   margin-bottom: 20px;
}

.service-link {
   color: var(--orange);
   font-weight: 600;
   font-size: 14px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: gap 0.2s;
}

.service-link:hover {
   gap: 10px;
   color: var(--orange-hover);
}

/* ========================== CUTTING-EDGE TECHNOLOGIES — sticky stacking cards (LIGHT theme, inside .logos-intro) ========================== */
.techstack-stack {
   position: relative;
   max-width: 1180px;
   margin: 60px auto 0;
}

/* Each card — position:sticky with staggered top offsets creates the deck look */
.tech-card {
   position: sticky;
   top: calc(156px + (var(--i) * 14px));
   margin-bottom: 28px;
   border-radius: 28px;
   will-change: transform;
}

.tech-card-inner {
   position: relative;
   display: grid;
   grid-template-columns: 1.25fr 1fr;
   align-items: center;
   gap: 40px;
   padding: 52px 56px;
   background: radial-gradient(at 100% 0%, rgba(122, 204, 13, 0.14), transparent 50%), linear-gradient(180deg, #141c42 0%, #0b1235 100%);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 26px;
   min-height: 380px;
   overflow: hidden;
   box-shadow: 0 30px 60px rgba(9, 16, 46, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.tech-card-inner::before {
   content: '';
   position: absolute;
   top: -140px;
   right: -120px;
   width: 380px;
   height: 380px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.18) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
}

.tech-card-content {
   position: relative;
   z-index: 2;
}

.tech-card-eyebrow {
   display: inline-block;
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2.88px;
   text-transform: uppercase;
   margin-bottom: 10px !important;
}

.tech-card-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 46px;
   line-height: 1.2;
   letter-spacing: -0.32px;
   color: #ffffff;
   margin: 0 0 20px !important;
}

.tech-card-desc {
   color: rgba(255, 255, 255, 0.72);
   font-size: 16px;
   line-height: 1.65;
   margin: 0 0 14px;
   max-width: 540px;
}

.tech-card-desc-sm {
   color: rgba(255, 255, 255, 0.52);
   margin-bottom: 28px;
}

.tech-cta {
   display: inline-flex;
   align-items: center;
   padding: 8px 8px 8px 26px;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 0.16px;
   border-radius: 999px;
   text-decoration: none;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 10px 28px rgba(122, 204, 13, 0.4);
}

.tech-cta:hover {
   color: var(--navy);
   transform: translateY(-2px);
   box-shadow: 0 14px 34px rgba(122, 204, 13, 0.55);
}

.tech-cta-arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #ffffff;
   color: var(--navy);
   margin-left: 14px;
   font-size: 13px;
   transition: transform 0.3s ease;
}

.tech-cta:hover .tech-cta-arrow {
   transform: translateX(4px);
}

/* Visual pane (right side) — circular icon composition */
.tech-card-visual {
   position: relative;
   aspect-ratio: 1 / 1;
   max-width: 360px;
   margin-left: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
}

.tv-ring {
   position: absolute;
   inset: 10%;
   border-radius: 50%;
   border: 1.5px dashed rgba(122, 204, 13, 0.35);
   animation: tv-spin 18s linear infinite;
}

.tv-ring-2 {
   inset: 22%;
   border-color: rgba(255, 255, 255, 0.1);
   border-style: solid;
   animation-direction: reverse;
   animation-duration: 24s;
}

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

.tv-icon {
   font-size: 100px;
   background: linear-gradient(180deg, #ffffff 0%, #7ACC0D 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   position: relative;
   z-index: 2;
   filter: drop-shadow(0 10px 30px rgba(122, 204, 13, 0.35));
}

.tv-dot {
   position: absolute;
   border-radius: 50%;
   background: var(--btn);
   box-shadow: 0 0 18px rgba(122, 204, 13, 0.8);
}

.tv-dot-1 {
   width: 10px;
   height: 10px;
   top: 14%;
   right: 22%;
   animation: tv-pulse 3s ease-in-out infinite;
}

.tv-dot-2 {
   width: 6px;
   height: 6px;
   bottom: 20%;
   left: 18%;
   background: #fff;
   box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
   animation: tv-pulse 2.5s ease-in-out infinite 0.6s;
}

.tv-dot-3 {
   width: 8px;
   height: 8px;
   top: 55%;
   right: 10%;
   animation: tv-pulse 3.5s ease-in-out infinite 1.2s;
}

@keyframes tv-pulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 1;
   }

   50% {
      transform: scale(1.4);
      opacity: 0.5;
   }
}

/* FEATURED card (Branding now, flagship service) — stronger green accent */
.tech-card-featured .tech-card-inner {
   background: linear-gradient(135deg, #ffffff 0%, #f2fde3 100%);
   border: 2px solid rgba(122, 204, 13, 0.5);
   box-shadow: 0 30px 70px rgba(122, 204, 13, 0.18), 0 0 0 4px rgba(122, 204, 13, 0.08);
}

.tech-card-featured .tech-card-inner::before {
   background: radial-gradient(circle, rgba(122, 204, 13, 0.22) 0%, transparent 65%);
   width: 420px;
   height: 420px;
   top: -140px;
   right: -120px;
}

.tech-featured-ribbon {
   position: absolute;
   top: 20px;
   right: 24px;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 1.92px;
   text-transform: uppercase;
   border-radius: 999px;
   box-shadow: 0 8px 20px rgba(122, 204, 13, 0.4);
}

.tech-featured-ribbon i {
   font-size: 13px;
}

.tech-card-featured .tv-icon {
   font-size: 110px;
   filter: drop-shadow(0 10px 30px rgba(122, 204, 13, 0.45));
}

@media (max-width:991px) {
   .techstack-stack {
      margin-top: 44px;
   }

   .tech-card {
      top: calc(156px + (var(--i) * 10px));
      margin-bottom: 22px;
   }

   .tech-card-inner {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 40px 32px;
      min-height: 0;
      text-align: left;
   }

   .tech-card-title {
      font-size: 32px;
      margin-bottom: 16px;
   }

   .tech-card-desc {
      font-size: 15px;
   }

   .tech-card-visual {
      max-width: 220px;
      order: -1;
      margin: 0 auto 8px;
   }

   .tv-icon {
      font-size: 68px;
   }

   .tech-card-featured .tv-icon {
      font-size: 76px;
   }

   .tech-featured-ribbon {
      top: 14px;
      right: 14px;
      font-size: 10px;
      padding: 5px 11px;
   }
}

@media (max-width:575px) {
   .tech-card-inner {
      padding: 32px 22px;
   }

   .tech-card-title {
      font-size: 26px;
   }

   .tech-card-visual {
      max-width: 170px;
   }

   .tv-icon {
      font-size: 54px;
   }

   .tech-card-featured .tv-icon {
      font-size: 62px;
   }
}

/* Reduce-motion accessibility */
@media (prefers-reduced-motion:reduce) {

   .tv-ring,
   .tv-dot {
      animation: none !important;
   }
}

/* ========================== INDUSTRIES WE SERVE — dark split layout ========================== */
.industries-dark {
   background: linear-gradient(180deg, #0b1436 0%, #09102e 60%, #060a24 100%);
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
   color: #fff;
}

.ind-dark-glow {
   position: absolute;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(20px);
}

.ind-dark-glow-a {
   top: -200px;
   right: -140px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.2) 0%, transparent 65%);
}

.ind-dark-glow-b {
   bottom: -200px;
   left: -140px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.12) 0%, transparent 65%);
}

.industries-dark>.container {
   position: relative;
   z-index: 2;
}

.ind-split {
   display: grid;
   grid-template-columns: minmax(0, 440px) 1fr;
   gap: 80px;
   align-items: stretch;
}

/* LEFT — visual with image + stat overlay */
.ind-left {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

.ind-visual {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   aspect-ratio: 4 / 5;
   max-height: 420px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.ind-visual-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.ind-visual-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(9, 16, 46, 0.85) 0%, rgba(9, 16, 46, 0.45) 50%, rgba(122, 204, 13, 0.25) 100%);
}

.ind-visual-stat {
   position: absolute;
   top: 28px;
   left: 28px;
   color: #fff;
   z-index: 2;
}

.ind-visual-num {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 112px;
   line-height: 0.9;
   letter-spacing: -0.64px;
   background: linear-gradient(180deg, #ffffff 0%, #9fe92d 70%, #7ACC0D 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   display: inline-flex;
   align-items: flex-start;
}

.ind-visual-num span {
   font-size: 48px;
   line-height: 1;
   margin-top: 12px;
   -webkit-text-fill-color: var(--btn);
   color: var(--btn);
   background: none;
}

.ind-visual-stat-label {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 3.2px;
   text-transform: uppercase;
   color: #fff;
   margin-top: 4px;
   opacity: 0.85;
}

.ind-visual-badges {
   position: absolute;
   bottom: 24px;
   right: 24px;
   display: flex;
   gap: 10px;
   z-index: 2;
}

.ind-badge {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 18px;
}

.ind-badge:nth-child(2) {
   color: var(--btn);
   background: rgba(122, 204, 13, 0.18);
   border-color: rgba(122, 204, 13, 0.4);
}

.ind-left-text .ind-eyebrow {
   color: var(--btn);
   margin-bottom: 10px;
   display: inline-block;
}

.ind-heading {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 46px;
   line-height: 1.05;
   letter-spacing: -0.32px;
   color: #fff;
   margin: 0 0 14px;
}

.ind-sub {
   color: rgba(255, 255, 255, 0.65);
   font-size: 15px;
   line-height: 1.65;
   margin: 0;
   max-width: 420px;
}

/* RIGHT — bold clickable list, no boxes */
.ind-right {
   display: flex;
   flex-direction: column;
}

.ind-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 48px;
}

.ind-list li {
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ind-link {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 16px;
   padding: 14px 0;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.85);
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 22px;
   letter-spacing: -0.16px;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ind-link-num {
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2.24px;
   color: rgba(255, 255, 255, 0.3);
   min-width: 24px;
   transition: color 0.25s;
}

.ind-link-name {
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ind-link-arrow {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.06);
   color: rgba(255, 255, 255, 0.5);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   opacity: 0;
   transform: translateX(-8px);
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ind-link:hover {
   color: var(--btn);
}

.ind-link:hover .ind-link-num {
   color: var(--btn);
}

.ind-link:hover .ind-link-name {
   transform: translateX(6px);
}

.ind-link:hover .ind-link-arrow {
   opacity: 1;
   transform: translateX(0);
   background: var(--btn);
   color: var(--navy);
}

.ind-explore-btn {
   align-self: flex-start;
   margin-top: 32px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 26px;
   border-radius: 999px;
   background: var(--btn);
   color: var(--navy);
   text-decoration: none;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.32px;
   transition: all 0.25s ease;
   box-shadow: 0 12px 28px rgba(122, 204, 13, 0.35);
}

.ind-explore-btn:hover {
   background: #68b10a;
   color: var(--navy);
   transform: translateY(-2px);
   box-shadow: 0 16px 34px rgba(122, 204, 13, 0.45);
}

@media (max-width:1100px) {
   .ind-split {
      gap: 50px;
   }

   .ind-heading {
      font-size: 38px;
   }

   .ind-visual-num {
      font-size: 92px;
   }

   .ind-link {
      font-size: 19px;
      gap: 12px;
   }
}

@media (max-width:991px) {
   .industries-dark {
      padding: var(--sec-py-md) 0;
   }

   .ind-split {
      grid-template-columns: 1fr;
      gap: 25px;
   }

   .ind-visual {
      aspect-ratio: 16 / 9;
      max-height: 360px;
   }

   .ind-list {
      column-gap: 32px;
   }
}

@media (max-width:575px) {
   .industries-dark {
      padding: var(--sec-py-sm) 0;
   }

   .ind-heading {
      font-size: 32px;
   }

   .ind-visual-num {
      font-size: 76px;
   }

   .ind-visual-num span {
      font-size: 34px;
      margin-top: 8px;
   }

   .ind-list {
      grid-template-columns: 1fr;
      column-gap: 0;
   }

   .ind-link {
      font-size: 18px;
      padding: 12px 0;
   }
}

/* ========================== ZERO TO HERO (Big Services Showcase) ========================== */
.zero-to-hero {
   background: var(--navy);
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
}

.zero-to-hero::before,
.zero-to-hero::after {
   content: '';
   position: absolute;
   top: 50%;
   width: 900px;
   height: 900px;
   transform: translateY(-50%);
   background: radial-gradient(circle at center, rgba(122, 204, 13, 0.1) 0%, rgba(122, 204, 13, 0.03) 45%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.zero-to-hero::before {
   left: -500px;
}

.zero-to-hero::after {
   right: -500px;
}

.zero-to-hero>.container {
   position: relative;
   z-index: 2;
}

.zth-title {
   text-align: center;
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 5vw, 64px);
   line-height: 1.1;
   letter-spacing: -0.32px;
   color: #fff;
   margin-bottom: 64px;
}

.zth-gradient {
   background: linear-gradient(90deg, #7ACC0D 0%, #c5f07a 50%, #ffffff 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.zth-wrapper {
   background: #fff;
   border-radius: 28px;
   padding: 24px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
   margin-bottom: 24px;
}

/* When wrapper is "open" — cards live directly on the section bg, no white box */
.zth-wrapper.zth-wrapper-open {
   background: transparent;
   padding: 0;
   box-shadow: none;
   margin-bottom: 40px;
}

.zth-card {
   background: #f5f5f5;
   border-radius: 22px;
   padding: 40px 36px;
   height: 100%;
   transition: transform 0.3s;
}

.zth-card:hover {
   transform: translateY(-4px);
}

/* WHITE variant */
.zth-card-white {
   background: #fff;
   color: var(--navy);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.zth-card-white .zth-card-header h3 {
   color: var(--navy);
}

.zth-card-white .zth-card-header {
   border-bottom-color: rgba(9, 16, 46, 0.1);
}

.zth-card-white .zth-icon-outline {
   border-color: rgba(9, 16, 46, 0.25);
   color: var(--navy);
}

.zth-card-white .zth-icon-outline:hover {
   background: var(--navy);
   color: #fff;
   border-color: var(--navy);
}

.zth-card-white .zth-icon-filled {
   background: var(--btn);
   box-shadow: 0 4px 14px rgba(122, 204, 13, 0.4);
}

.zth-card-white .zth-list li a {
   color: var(--navy);
   border-bottom-color: rgba(9, 16, 46, 0.08);
}

.zth-card-white .zth-list li a:hover {
   color: var(--btn);
}

.zth-card-white .zth-arrow {
   color: var(--navy);
}

.zth-card-white .zth-list li a:hover .zth-arrow {
   color: var(--btn);
}

/* CREAM variant (keeps .zth-card-green class name for compatibility) */
.zth-card-green {
   background: #f5f2e9;
   color: var(--navy);
   box-shadow: 0 20px 50px rgba(9, 16, 46, 0.12);
}

.zth-card-green .zth-card-header h3 {
   color: var(--navy);
}

.zth-card-green .zth-card-header {
   border-bottom-color: rgba(9, 16, 46, 0.12);
}

.zth-card-green .zth-icon-outline {
   border-color: rgba(9, 16, 46, 0.25);
   color: var(--navy);
}

.zth-card-green .zth-icon-outline:hover {
   background: var(--navy);
   color: #fff;
   border-color: var(--navy);
}

.zth-card-green .zth-list li a {
   color: var(--navy);
   border-bottom-color: rgba(9, 16, 46, 0.1);
}

.zth-card-green .zth-list li a:hover {
   color: var(--btn);
}

.zth-card-green .zth-arrow {
   color: var(--navy);
}

.zth-card-green .zth-list li a:hover .zth-arrow {
   color: var(--btn);
}

.zth-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 24px;
   border-bottom: 1px solid rgba(9, 16, 46, 0.1);
   margin-bottom: 8px;
}

.zth-card-header h3 {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 36px;
   color: var(--navy);
   margin: 0;
   letter-spacing: -0.32px;
}

.zth-card-icons {
   display: flex;
   align-items: center;
   gap: 8px;
}

.zth-icon-outline {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 1.5px solid rgba(9, 16, 46, 0.25);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--navy);
   transition: all 0.25s;
}

.zth-icon-outline:hover {
   background: var(--navy);
   color: #fff;
   border-color: var(--navy);
}

.zth-icon-filled {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 14px rgba(122, 204, 13, 0.4);
}

.zth-list li a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 22px 0;
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 18px;
   font-weight: 500;
   text-decoration: none;
   border-bottom: 1px solid rgba(9, 16, 46, 0.08);
   transition: color 0.25s, padding 0.25s;
}

.zth-list li:last-child a {
   border-bottom: none;
}

.zth-list li a:hover {
   color: var(--btn);
   padding-left: 8px;
}

.zth-arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--navy);
   transition: transform 0.25s, color 0.25s;
}

.zth-list li a:hover .zth-arrow {
   color: var(--btn);
   transform: translate(3px, -3px);
}

.zth-cta-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   background: #ffffff;
   border: 2px solid var(--navy);
   border-radius: 24px;
   padding: 22px 28px;
   margin-top: 60px;
   position: relative;
   box-shadow: 10px 10px 0 0 var(--navy), 14px 14px 0 0 var(--btn);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.zth-cta-bar:hover {
   transform: translate(-3px, -3px);
   box-shadow: 13px 13px 0 0 var(--navy), 18px 18px 0 0 var(--btn);
}

.zth-cta-left {
   display: flex;
   align-items: center;
   gap: 20px;
   flex: 1;
}

.zth-logo-badge {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--navy);
   border: 2px solid var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 4px 14px rgba(9, 16, 46, 0.25);
}

.zth-logo-badge img {
   width: 34px;
   height: 34px;
   object-fit: contain;
}

.zth-cta-left p {
   color: var(--navy);
   margin: 0;
   font-size: 20px;
   font-weight: 600;
   line-height: 1.35;
}

.zth-cta-bar .btn-cta {
   padding: 14px 30px;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1.28px;
   text-transform: uppercase;
   flex-shrink: 0;
}

@media (max-width:767px) {
   .zth-cta-bar {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
      gap: 20px;
      padding: 24px 20px;
   }

   .zth-cta-left {
      flex-direction: column;
      gap: 16px;
   }

   .zth-cta-left p {
      font-size: 17px;
   }

   .zth-logo-badge {
      margin: 0 auto;
   }
}

@media (max-width:767px) {
   .zero-to-hero {
      padding: var(--sec-py-sm) 0;
   }

   .zth-title {
      margin-bottom: 40px;
   }

   .zth-wrapper {
      padding: 12px;
      border-radius: 20px;
   }

   .zth-card {
      padding: 28px 24px;
      border-radius: 14px;
   }

   .zth-card-header h3 {
      font-size: 28px;
   }

   .zth-list li a {
      font-size: 16px;
      padding: 18px 0;
   }

   .zth-cta-bar {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
      gap: 16px;
   }
}

/* ========================== CLIENTS SECTION ========================== */
.clients-section {
   padding: 0 0 120px;
   position: relative;
}

.clients-stats-wrap {
   background: var(--bg-alt);
   padding: 100px 0 140px;
   margin-bottom: -60px;
   position: relative;
   overflow: hidden;
}

.stats-art {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 200px;
   height: 300px;
   pointer-events: none;
   z-index: 0;
}

.stats-art svg {
   width: 100%;
   height: 100%;
}

.stats-art-left {
   left: 2%;
}

.stats-art-right {
   right: 2%;
}

.clients-stats-wrap>.container {
   position: relative;
   z-index: 2;
}

.stats-eyebrow {
   display: inline-block;
   color: var(--btn);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 2.24px;
   text-transform: uppercase;
   margin-bottom: 16px;
}

.stats-heading {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 4.5vw, 54px);
   color: var(--navy);
   line-height: 1.1;
   letter-spacing: -0.32px;
   margin-bottom: 20px;
   max-width: 820px;
   margin-left: auto;
   margin-right: auto;
}

.stats-sub {
   font-size: 18px;
   color: #5a6378;
   line-height: 1.55;
   max-width: 640px;
   margin: 0 auto;
}

@media (max-width:1199px) {
   .stats-art {
      width: 140px;
      height: 210px;
      opacity: 0.7;
   }
}

@media (max-width:767px) {
   .stats-art {
      display: none;
   }

   .clients-stats-wrap {
      padding: 70px 0 100px;
   }
}

.stat-card {
   background: #fff;
   border-radius: 20px;
   padding: 40px 30px;
   text-align: center;
   box-shadow: 0 20px 40px rgba(11, 31, 58, 0.08);
   min-height: 220px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   transition: transform 0.3s;
}

.stat-card:hover {
   transform: translateY(-6px);
}

.stat-num {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-size: clamp(48px, 5vw, 68px);
   font-weight: 700;
   color: #1e40af;
   line-height: 1;
   margin-bottom: 16px;
   letter-spacing: -0.48px;
}

.stat-text {
   font-weight: 600;
   color: var(--navy);
   font-size: 15px;
}

.google-logo {
   display: block;
   margin: 0 auto 12px;
}

.google-stars {
   color: var(--star);
   font-size: 24px;
   letter-spacing: 4px;
   margin-bottom: 14px;
}

.client-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   border: 1px solid var(--line);
   border-radius: 16px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 10px 40px rgba(11, 31, 58, 0.05);
   margin-top: 40px;
}

.client-cell {
   padding: 24px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   min-height: 200px;
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   transition: all 0.25s;
   cursor: pointer;
}

.client-cell:hover {
   background: var(--bg-alt);
   transform: scale(1.02);
}

.client-cell:nth-child(5n) {
   border-right: none;
}

.client-cell:nth-last-child(-n+5) {
   border-bottom: none;
}

.cg-logo {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 20px;
   color: var(--navy);
   letter-spacing: -0.32px;
   line-height: 1.2;
}

.client-cell small {
   color: var(--muted);
   font-size: 11px;
   margin-top: 4px;
   font-weight: 500;
}

.client-cell img {
   max-width: 100%;
   max-height: 150px;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: transform 0.3s ease;
}

.client-cell:hover img {
   transform: scale(1.05);
}

/* ========================== LOGO GRID — SLIDING (bordered grid, all rows sync left) ========================== */
.logo-grid-slide {
   background: #fff;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   overflow: hidden;
   margin-top: 40px;
   width: 100%;
}

.grid-row {
   overflow: hidden;
   border-bottom: 1px solid var(--line);
}

.grid-row:last-child {
   border-bottom: none;
}

.grid-track {
   display: flex;
   width: max-content;
   will-change: transform;
}

/* Row 1 slides LEFT (content moves left, same as portfolio marquee-left) */
.grid-row-left .grid-track {
   animation: logo-slide-left 80s linear infinite;
}

/* Row 2 slides RIGHT (content moves right, opposite direction) */
.grid-row-right .grid-track {
   animation: logo-slide-right 80s linear infinite;
}

.logo-grid-slide:hover .grid-track {
   animation-play-state: paused;
}

@keyframes logo-slide-left {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

@keyframes logo-slide-right {
   0% {
      transform: translateX(-50%);
   }

   100% {
      transform: translateX(0);
   }
}

.grid-cell {
   flex-shrink: 0;
   width: 240px;
   height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   border-right: 1px solid var(--line);
   background: #fff;
   transition: background 0.25s;
}

.grid-cell:hover {
   background: var(--bg-alt);
}

.grid-cell img {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: transform 0.3s ease;
}

.grid-cell:hover img {
   transform: scale(1.06);
}

@media (max-width:767px) {
   .grid-cell {
      width: 180px;
      height: 140px;
      padding: 16px;
   }

   .logo-grid-slide {
      margin-top: 24px;
   }
}

@media (prefers-reduced-motion:reduce) {

   .grid-track,
   .marquee-track {
      animation: none !important;
   }
}

/* ========================== PROCESS STEPS (Dark) ========================== */
.process-steps {
   background: #ffffff;
   color: var(--navy);
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
}

.process-steps::before {
   content: '';
   position: absolute;
   top: -300px;
   right: -400px;
   width: 1100px;
   height: 1100px;
   background: radial-gradient(circle at center, rgba(122, 204, 13, 0.08) 0%, rgba(122, 204, 13, 0.02) 45%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.process-steps::after {
   content: '';
   position: absolute;
   bottom: -400px;
   left: -400px;
   width: 1000px;
   height: 1000px;
   background: radial-gradient(circle at center, rgba(9, 16, 46, 0.05) 0%, rgba(9, 16, 46, 0.02) 45%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.process-steps>.container {
   position: relative;
   z-index: 2;
}

.process-head {
   margin-bottom: 60px;
   max-width: 720px;
}

.process-head .section-label {
   display: inline-block;
   margin-bottom: 10px;
   color: var(--btn);
}

.process-title {
   color: var(--navy);
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-size: clamp(30px, 4vw, 48px);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.32px;
   margin-bottom: 14px;
}

.process-sub {
   color: #64748b;
   font-size: 16.5px;
   line-height: 1.6;
   margin: 0;
}

.process-col {
   padding: 0 12px;
   position: relative;
   z-index: 2;
}

.step-circle {
   position: relative;
   width: 120px;
   height: 120px;
   margin: 0 auto 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   border-radius: 50%;
   box-shadow: 0 12px 32px rgba(9, 16, 46, 0.08), 0 0 0 6px rgba(122, 204, 13, 0.08);
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-col:hover .step-circle {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(9, 16, 46, 0.12), 0 0 0 10px rgba(122, 204, 13, 0.14);
}

.step-scribble {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: visible;
}

.step-icon {
   position: absolute;
   top: -14px;
   right: -6px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   z-index: 3;
   box-shadow: 0 6px 16px rgba(122, 204, 13, 0.4);
}

.step-num {
   font-family: 'Kalam', 'Architects Daughter', 'Caveat', cursive;
   font-size: 72px;
   font-weight: 700;
   color: var(--btn);
   line-height: 1;
   letter-spacing: 0;
   display: inline-block;
   position: relative;
   z-index: 2;
}

.process-col:nth-child(1) .step-num {
   transform: rotate(-6deg);
}

.process-col:nth-child(2) .step-num {
   transform: rotate(3deg);
}

.process-col:nth-child(3) .step-num {
   transform: rotate(-2deg);
}

.step-eyebrow {
   display: inline-block;
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2.88px;
   text-transform: uppercase;
   padding: 4px 11px;
   background: rgba(122, 204, 13, 0.1);
   border-radius: 999px;
   margin-bottom: 14px;
}

.step-title {
   color: var(--navy);
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-size: clamp(22px, 2vw, 28px);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.16px;
   margin-bottom: 14px;
}

.step-desc {
   color: #64748b;
   font-size: 15.5px;
   line-height: 1.65;
   max-width: 340px;
   margin: 0 auto;
}

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

@media (max-width:767px) {
   .process-steps {
      padding: var(--sec-py-sm) 0;
   }

   .process-head {
      margin-bottom: 44px;
   }

   .step-circle {
      width: 96px;
      height: 96px;
      margin-bottom: 22px;
   }

   .step-icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
      top: -10px;
      right: -4px;
   }

   .step-num {
      font-size: 54px;
   }

   .process-col {
      margin-bottom: 36px;
   }
}

/* ========================== STATS (legacy, kept for services stats if needed) ========================== */
.stats-bar {
   background: var(--navy);
   color: #fff;
   padding: 50px 40px;
   border-radius: 24px;
}

.stat-value {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-size: 48px;
   font-weight: 700;
   color: var(--orange);
   letter-spacing: -0.48px;
   line-height: 1;
   margin-bottom: 8px;
}

.stat-label {
   color: #cbd5e1;
   font-size: 15px;
}

/* ========================== FAQ ========================== */
.custom-faq .accordion-item {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 14px !important;
   margin-bottom: 12px;
   overflow: hidden;
}

.custom-faq .accordion-button {
   font-family: "Publico Banner", "Fraunces", serif;
   font-size: 17px;
   font-weight: 600;
   color: var(--navy);
   padding: 22px 28px;
   background: #fff;
   box-shadow: none;
}

.custom-faq .accordion-button:not(.collapsed) {
   background: #fff;
   color: var(--orange);
}

.custom-faq .accordion-button:focus {
   box-shadow: none;
}

.custom-faq .accordion-body {
   padding: 0 28px 24px;
   color: var(--muted);
   font-size: 15px;
}

/* ========================== COMPARISON V2 (modern, spacious) ========================== */
.compare-v2 {
   background: var(--navy);
   padding: var(--sec-py-lg) 0;
   position: relative;
}

/* Decorative glow — wrapped in its own clipped container so it doesn't break sticky */
.compare-v2-glow {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
   z-index: 0;
}

.compare-v2-glow::before {
   content: '';
   position: absolute;
   top: -400px;
   right: -400px;
   width: 1100px;
   height: 1100px;
   background: radial-gradient(circle at center, rgba(122, 204, 13, 0.12) 0%, rgba(122, 204, 13, 0.03) 45%, transparent 70%);
   border-radius: 50%;
}

.compare-v2>.container {
   position: relative;
   z-index: 2;
}

.compare-head {
   max-width: 820px;
   margin: 0 auto 72px;
}

.compare-heading {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 5vw, 62px);
   letter-spacing: -0.32px;
   line-height: 1.2;
   color: #fff;
   letter-spacing: -0.48px;
   margin-bottom: 20px;
}

.compare-sub {
   color: rgba(255, 255, 255, 0.7);
   font-size: 20px;
   line-height: 1.5;
   margin: 0;
}

/* Rows — simple vertical stack */
.compare-list {
   display: flex;
   flex-direction: column;
   gap: 24px;
   position: relative;
}

.compare-row {
   display: grid;
   grid-template-columns: 1fr 1.4fr 1.4fr;
   gap: 20px;
   align-items: stretch;
}

/* Sticky-stack animation on desktop — each row pins with staggered offsets */
@media (min-width:1025px) {
   .compare-list {
      overflow: visible;
   }

   .compare-row {
      position: sticky;
      top: calc(100px + (var(--i, 0) * 14px));
      margin-bottom: 22px;
      will-change: transform;
   }
}

/* Feature label column */
.compare-feature {
   background: #0d1533;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 18px;
   padding: 32px 28px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 14px;
}

.compare-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: rgba(122, 204, 13, 0.15);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
}

.compare-feature h3 {
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 26px;
   margin: 0;
   letter-spacing: -0.32px;
}

/* Us column */
.compare-us {
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.18), rgba(122, 204, 13, 0.04)), #0d1533;
   border: 1.5px solid rgba(122, 204, 13, 0.4);
   border-radius: 18px;
   padding: 32px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
   transition: transform 0.25s;
}

.compare-us:hover {
   transform: translateY(-3px);
}

/* Them column */
.compare-them {
   background: #0d1533;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 18px;
   padding: 32px;
   opacity: 0.8;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
   transition: opacity 0.25s;
}

.compare-them:hover {
   opacity: 1;
}

.compare-tag {
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2.24px;
   text-transform: uppercase;
   margin-bottom: 18px;
}

.compare-us .compare-tag {
   color: var(--btn);
}

.compare-them .compare-tag {
   color: rgba(255, 255, 255, 0.5);
}

.compare-body {
   display: flex;
   gap: 16px;
   align-items: flex-start;
}

.compare-mark {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
}

.compare-mark.yes {
   background: var(--btn);
   color: #fff;
   box-shadow: 0 4px 14px rgba(122, 204, 13, 0.4);
}

.compare-mark.no {
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.45);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-body p {
   color: #fff;
   font-size: 18px;
   line-height: 1.5;
   font-weight: 500;
   margin: 0;
}

.compare-them .compare-body p {
   color: rgba(255, 255, 255, 0.65);
   font-weight: 400;
}

/* Tablet/mobile — WHITE theme 3-column comparison ≤1024px */
@media (max-width:1024px) {
   .compare-v2 {
      padding: var(--sec-py-md) 0;
   }

   .compare-v2-glow {
      display: none;
   }

   /* White table card */
   .compare-list {
      background: #ffffff;
      border: 1px solid rgba(9, 16, 46, 0.08);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(9, 16, 46, 0.08);
      position: relative;
      gap: 0px;
   }

   .compare-v2 .compare-list .compare-row {
      gap: 0 !important;
   }

   .compare-v2 .compare-head-row {
      margin: 0 !important;
   }

   .faq-split {
      gap: 40px;
   }

   .offices-v2 .row {
      gap: 0 !important;
   }

   /* Header — dark navy bar with green Galaxywing label */
   .compare-head-row {
      display: grid !important;
      grid-template-columns: 1.1fr 1fr 1fr;
      align-items: center;
      padding: 14px 16px;
      background: linear-gradient(180deg, #0b1436, #09102e);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.56px;
      text-transform: uppercase;
   }

   .compare-head-row .ch-feature {
      color: rgba(255, 255, 255, 0.6);
      text-align: left;
   }

   .compare-head-row .ch-us {
      color: var(--btn);
      text-align: left;
      padding-left: 14px;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
   }

   .compare-head-row .ch-them {
      color: rgba(255, 255, 255, 0.45);
      text-align: left;
      padding-left: 14px;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
   }

   /* Data rows — 3 columns with dividers */
   .compare-row {
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: 0;
      align-items: stretch;
      border-bottom: 1px solid rgba(9, 16, 46, 0.07);
      padding: 0;
   }

   .compare-row:last-child {
      border-bottom: 0;
   }

   /* Feature cell — white, dark text, left aligned */
   .compare-feature {
      background: #ffffff;
      border: 0;
      border-radius: 0;
      padding: 16px 16px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 10px;
   }

   .compare-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      font-size: 16px;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(9, 16, 46, 0.04), rgba(122, 204, 13, 0.10));
      color: var(--btn);
      border: 1px solid rgba(122, 204, 13, 0.15);
   }

   .compare-feature h3 {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--navy);
      margin: 0;
      line-height: 1.25;
   }

   /* Galaxywing + Others cells — white, with text visible */
   .compare-us,
   .compare-them {
      background: #ffffff;
      border: 0;
      border-left: 1px solid rgba(9, 16, 46, 0.07);
      border-radius: 0;
      box-shadow: none;
      padding: 16px 14px;
      opacity: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
   }

   .compare-us {
      background: linear-gradient(180deg, rgba(122, 204, 13, 0.06), rgba(122, 204, 13, 0.02));
   }

   .compare-tag {
      display: none;
   }

   .compare-body {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 10px;
      text-align: left;
      width: 100%;
   }

   .compare-body p {
      display: block;
      font-size: 12px;
      line-height: 1.4;
      font-weight: 500;
      color: var(--navy);
      margin: 0;
   }

   .compare-them .compare-body p {
      color: #64748b;
      font-weight: 400;
   }

   .compare-mark {
      width: 24px;
      height: 24px;
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 1px;
   }

   .compare-mark.yes {
      background: var(--btn);
      color: #fff;
      box-shadow: 0 2px 8px rgba(122, 204, 13, 0.35);
   }

   .compare-mark.no {
      background: rgba(9, 16, 46, 0.06);
      color: rgba(9, 16, 46, 0.4);
      border: 1px solid rgba(9, 16, 46, 0.08);
   }

   .compare-us:hover,
   .compare-them:hover {
      transform: none;
   }

   /* White heading text on dark section — invert to navy on white bg */
   .compare-heading {
      color: var(--navy);
   }

   .compare-sub {
      color: #64748b;
   }

   .compare-v2 {
      background: #f6f9fc;
   }
}

@media (min-width:1025px) {
   .compare-head-row {
      display: none !important;
   }
}

@media (max-width:576px) {
   .compare-head-row {
      padding: 12px 12px;
      font-size: 10px;
   }

   .compare-head-row .ch-us,
   .compare-head-row .ch-them {
      padding-left: 10px;
   }

   .compare-feature {
      padding: 14px 12px;
      gap: 8px;
   }
.portfolio-sub {
    font-size: 16px;
}
.stats-sub {
    font-size: 16px;
}
   .compare-icon {
      width: 32px;
      height: 32px;
      font-size: 13px;
      border-radius: 8px;
   }

   .compare-feature h3 {
      font-size: 12px;
   }

   .compare-us,
   .compare-them {
      padding: 14px 10px;
   }

   .compare-body {
      gap: 7px;
   }

   .compare-body p {
      font-size: 11px;
      line-height: 1.35;
   }

   .compare-mark {
      width: 20px;
      height: 20px;
      font-size: 10px;
   }
}

/* ========================== LEADERSHIP TEAM V2 (passport-portrait style) ========================== */
.leadership-v2 {
   background: radial-gradient(ellipse at 50% 6%, rgba(122, 204, 13, 0.18) 0%, transparent 45%), linear-gradient(180deg, #09102e 0%, #0b1436 6%, #141c42 11%, #3a476a 16%, #7e8aa8 22%, #c8cdda 30%, #ececec 38%, #f5f5f5 50%, #ffffff 70%);
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
}

.leadership-v2::before {
   content: '';
   position: absolute;
   top: -200px;
   right: -200px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.18) 0%, transparent 65%);
   filter: blur(40px);
   pointer-events: none;
}

.leadership-v2::after {
   content: '';
   position: absolute;
   top: -160px;
   left: -200px;
   width: 420px;
   height: 420px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.12) 0%, transparent 65%);
   filter: blur(40px);
   pointer-events: none;
}

.leadership-v2>.container {
   position: relative;
   z-index: 2;
}

.leadership-head {
   text-align: center;
   margin-bottom: 70px;
}

.leadership-sparkle {
   display: inline-block;
   color: var(--btn);
   font-size: 26px;
   margin-bottom: 8px;
   transform: rotate(-8deg);
   text-shadow: 0 0 20px rgba(122, 204, 13, 0.4);
}

.leadership-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 4.5vw, 58px);
   color: #ffffff;
   letter-spacing: -0.32px;
   line-height: 1.05;
   margin: 0 0 16px;
}

.leadership-divider {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   justify-content: center;
}

.leadership-divider-line {
   display: inline-block;
   width: 60px;
   height: 3px;
   background: var(--btn);
}

.leadership-divider-logo {
   width: 34px;
   height: 34px;
   object-fit: contain;
}

/* Rows */
.leadership-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   align-items: start;
   max-width: 1200px;
   margin: 0 auto 24px;
}

.leadership-row-secondary {
   grid-template-columns: repeat(2, 1fr);
   max-width: 840px;
}

.leadership-row-four {
   grid-template-columns: repeat(4, 1fr);
   max-width: 1280px;
   gap: 22px;
   margin-top: 48px;
}

.leadership-row-four .leader-photo {
   height: 360px;
}

.leadership-row-four .leader-name {
   font-size: 16px;
}

.leadership-row-four .leader-role {
   font-size: 11px;
}

/* Individual leader card */
.leader-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
}

.leader-photo {
   position: relative;
   background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #f0f0f0 100%);
   border-radius: 0;
   overflow: hidden;
   height: 420px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

.leader-photo::before {
   /* soft shadow at base */
   content: '';
   position: absolute;
   bottom: 0;
   left: 10%;
   right: 10%;
   height: 20px;
   background: radial-gradient(ellipse, rgba(9, 16, 46, 0.15), transparent 70%);
   pointer-events: none;
}

.leader-photo img {
   max-height: 100%;
   max-width: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   object-position: center bottom;
   display: block;
   position: relative;
   z-index: 2;
   transition: transform 0.4s ease;
}

.leader-card:hover .leader-photo img {
   transform: translateY(-6px) scale(1.02);
}

/* Name plate */
.leader-plate {
   background: var(--navy);
   color: #fff;
   padding: 14px 18px 16px;
   text-align: center;
   position: relative;
   z-index: 3;
   margin: -8px 20px 0;
   box-shadow: 0 10px 30px rgba(9, 16, 46, 0.2);
}

.leader-name {
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 17px;
   line-height: 1.25;
   letter-spacing: 0.16px;
   color: #fff;
   margin-bottom: 7px;
   min-height: calc(20px * 1);
   display: flex;
   align-items: center;
   justify-content: center;
}

.leader-line {
   display: block;
   width: 28px;
   height: 2px;
   background: rgba(255, 255, 255, 0.3);
   margin: 0 auto 7px;
}

.leader-role {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 11px;
   letter-spacing: 1.92px;
   color: rgba(255, 255, 255, 0.7);
   text-transform: uppercase;
}

/* Featured CEO card — bigger, green accent */
.leader-card-main .leader-photo {
   height: 480px;
}

.leader-card-main .leader-plate {
   background: var(--navy);
   padding: 22px 24px 24px;
   margin: -8px 10px 0;
}

.leader-card-main .leader-name {
   font-size: 20px;
}

.leader-card-main .leader-line {
   background: var(--btn);
   width: 48px;
   height: 3px;
}

.leader-card-main .leader-role {
   color: var(--btn);
   font-weight: 800;
   font-size: 13px;
}

/* CTA button below */
.leadership-cta {
   margin-top: 60px;
}

@media (max-width:991px) {
   .leadership-v2 {
      padding: var(--sec-py-md) 0;
   }

   .leadership-row {
      grid-template-columns: 1fr;
      gap: 40px;
      max-width: 420px;
   }

   .leadership-row-secondary {
      grid-template-columns: 1fr;
   }

   .leadership-row-four {
      grid-template-columns: repeat(2, 1fr);
      max-width: 680px;
      gap: 24px;
   }

   .leader-photo {
      height: 380px;
   }

   .leadership-row-four .leader-photo {
      height: 320px;
   }

   .leader-card-main .leader-photo {
      height: 420px;
   }
}

@media (max-width:575px) {
   .leadership-row-four {
      grid-template-columns: 1fr;
      max-width: 360px;
      gap: 32px;
   }

   .leadership-row-four .leader-photo {
      height: 360px;
   }
}

/* ========================== TEAM SECTION (LEGACY — kept for reference) ========================== */
.team-v2 {
   background: var(--bg-alt);
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
}

.team-v2 .section-head {
   margin-bottom: 60px;
}

/* FEATURED CEO BLOCK */
.team-lead {
   position: relative;
   background: radial-gradient(at 100% 0%, rgba(122, 204, 13, 0.18), transparent 50%), linear-gradient(180deg, #141c42 0%, #0b1235 100%);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 28px;
   overflow: hidden;
   box-shadow: 0 30px 70px rgba(9, 16, 46, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
   margin-bottom: 60px;
   max-width: 1280px;
   margin-left: auto;
   margin-right: auto;
}

.team-lead::before {
   content: '';
   position: absolute;
   top: -140px;
   right: -120px;
   width: 420px;
   height: 420px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.22) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
}

.team-lead::after {
   content: '';
   position: absolute;
   bottom: -140px;
   left: -100px;
   width: 340px;
   height: 340px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.1) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
}

.team-lead-badge {
   position: absolute;
   top: 24px;
   left: 24px;
   background: var(--btn);
   color: var(--navy);
   padding: 8px 18px;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 12px;
   letter-spacing: 1.92px;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   z-index: 3;
}

.team-lead-badge i {
   font-size: 14px;
}

.team-lead-inner {
   display: grid;
   grid-template-columns: 440px 1fr;
   gap: 60px;
   align-items: center;
   padding: 50px 60px;
   position: relative;
   z-index: 2;
}

.team-lead-inner>* {
   position: relative;
   z-index: 2;
}

.team-lead-photo {
   position: relative;
   aspect-ratio: 1 / 1.15;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 20px 50px rgba(9, 16, 46, 0.18);
}

.team-lead-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   display: block;
   transition: transform 0.5s ease;
}

.team-lead:hover .team-lead-photo img {
   transform: scale(1.04);
}

.team-lead-photo-frame {
   position: absolute;
   inset: -8px;
   border: 2px solid var(--btn);
   border-radius: 28px;
   z-index: -1;
   transform: translate(16px, 16px);
   opacity: 0.85;
   box-shadow: 0 0 30px rgba(122, 204, 13, 0.25);
}

.team-lead-content {
   color: #fff;
   position: relative;
   z-index: 2;
}

.team-lead-name {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 48px;
   color: #ffffff;
   line-height: 1;
   letter-spacing: -0.32px;
   margin: 0 0 12px;
}

.team-lead-title {
   font-family: 'Inter', sans-serif;
   font-size: 17px;
   font-weight: 600;
   color: var(--btn);
   letter-spacing: 0.32px;
   margin-bottom: 24px;
}

.team-lead-bio {
   font-size: 17px;
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.72);
   margin-bottom: 32px;
}

.team-lead-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-bottom: 28px;
   padding: 24px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.team-stat-num {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 32px;
   color: #ffffff;
   line-height: 1;
   letter-spacing: -0.32px;
}

.team-stat-label {
   font-size: 12px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 1.28px;
   text-transform: uppercase;
   margin-top: 6px;
}

.team-lead-socials {
   display: flex;
   gap: 10px;
}

.team-lead-socials a {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   color: #fff !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 17px;
   transition: all 0.25s ease;
   border: 1px solid rgba(255, 255, 255, 0.12);
}

.team-lead-socials a:hover {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
   transform: translateY(-2px);
   box-shadow: 0 8px 18px rgba(122, 204, 13, 0.35);
   color: #000 !important;
}

/* TEAM MEMBER CARDS — 5-column grid (4 members + "Meet all" CTA) */
.team-row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
   max-width: 1600px;
   margin: 0 auto;
}

.team-card {
   background: #fff;
   border-radius: 20px;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0;
   align-items: stretch;
   text-align: center;
   box-shadow: 0 10px 30px rgba(9, 16, 46, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   border: 1px solid rgba(9, 16, 46, 0.06);
   text-decoration: none;
   overflow: hidden;
}

.team-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 50px rgba(9, 16, 46, 0.12);
   border-color: rgba(122, 204, 13, 0.3);
}

/* Photo area — passport-style, white→green gradient backdrop */
.team-card-photo {
   width: 100%;
   height: 260px;
   overflow: hidden;
   background: linear-gradient(180deg, #ffffff 0%, #eefbdc 55%, #d8f5a5 100%);
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

.team-card-photo::before {
   /* soft radial glow behind the person */
   content: '';
   position: absolute;
   bottom: -40px;
   left: 50%;
   transform: translateX(-50%);
   width: 220px;
   height: 180px;
   background: radial-gradient(ellipse, rgba(122, 204, 13, 0.35) 0%, transparent 65%);
   pointer-events: none;
}

.team-card-photo img {
   width: auto;
   height: 100%;
   max-width: 100%;
   object-fit: contain;
   object-position: center bottom;
   display: block;
   position: relative;
   z-index: 2;
   transition: transform 0.4s ease;
}

.team-card:hover .team-card-photo img {
   transform: scale(1.06);
}

/* Card body below photo */
.team-card-body {
   padding: 22px 22px 24px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: center;
   flex: 1;
}

/* Initials placeholder (no photo) */
.team-avatar-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 80px;
   color: var(--navy);
   letter-spacing: -0.32px;
   position: relative;
   z-index: 2;
}

.team-avatar-placeholder::before {
   content: attr(data-initials);
}

.team-card-role {
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 700;
   color: var(--btn);
   letter-spacing: 1.92px;
   text-transform: uppercase;
   margin-bottom: 6px;
}

.team-card-name {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 24px;
   color: var(--navy);
   letter-spacing: -0.32px;
   margin: 0 0 10px;
}

.team-card-bio {
   font-size: 14.5px;
   line-height: 1.55;
   color: #5a6378;
   margin-bottom: 14px;
}

.team-card-socials {
   display: flex;
   gap: 8px;
}

.team-card-socials a {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #f5f7fb;
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   transition: all 0.2s;
   border: 1px solid rgba(9, 16, 46, 0.08);
}

.team-card-socials a:hover {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
}

/* "Meet the full team" CTA card — full-bleed group photo with overlay */
.team-card-more {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff;
   position: relative;
   overflow: hidden;
   padding: 0;
   min-height: 340px;
}

.team-more-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   z-index: 0;
   transition: transform 0.5s ease;
}

.team-card-more::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(9, 16, 46, 0.1) 0%, rgba(9, 16, 46, 0.2) 50%, rgba(9, 16, 46, 0.85) 100%);
   z-index: 1;
   pointer-events: none;
}

.team-card-more .team-card-body {
   position: relative;
   z-index: 2;
   margin-top: auto;
   padding: 24px 22px;
   width: 100%;
}

.team-card-more:hover {
   background: var(--navy);
   border-color: var(--btn);
   transform: translateY(-6px);
}

.team-card-more:hover .team-more-bg {
   transform: scale(1.06);
}

.team-more-arrow {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 0.8px;
   transition: gap 0.2s;
}

.team-card-more:hover .team-more-arrow {
   gap: 10px;
}

@media (max-width:1399px) {
   .team-row {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width:991px) {
   .team-row {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width:991px) {
   .team-v2 {
      padding: var(--sec-py-md) 0;
   }

   .team-lead-inner {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 40px 32px;
   }

   .team-lead-photo {
      max-width: 360px;
      margin: 0 auto;
   }

   .team-lead-name {
      font-size: 36px;
   }
}

@media (max-width:575px) {
   .team-row {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .team-card {
      align-items: center;
      text-align: center;
      padding: 28px 22px;
   }
}

/* ========================== CTA V2 (white card + laurel badges) ========================== */
.cta-v2 {
   background: var(--navy);
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
}

.cta-v2::before {
   content: '';
   position: absolute;
   top: -350px;
   left: -400px;
   width: 1000px;
   height: 1000px;
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 50%, transparent 72%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.cta-v2::after {
   content: '';
   position: absolute;
   bottom: -400px;
   right: -380px;
   width: 1200px;
   height: 1200px;
   background: radial-gradient(circle at center, rgba(122, 204, 13, 0.14) 0%, rgba(122, 204, 13, 0.04) 50%, transparent 72%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
}

.cta-v2>.container {
   position: relative;
   z-index: 2;
}

.cta-card {
   background: #fff;
   border-radius: 40px;
   padding: 120px 60px 140px;
   position: relative;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
   margin-bottom: 90px;
}

/* 2-column split — robot on left, content on right */
.cta-card-split {
   display: grid;
   grid-template-columns: 0.85fr 1fr;
   gap: 50px;
   align-items: center;
   padding: 70px 70px 70px 50px;
}

.cta-card-split .cta-content {
   text-align: left;
}

.cta-art {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.cta-art-img {
   display: block;
   width: 100%;
   max-width: 380px;
   height: auto;
   filter: drop-shadow(0 20px 32px rgba(9, 16, 46, 0.18));
   animation: ctaArtFloat 5.5s ease-in-out infinite;
   transform-origin: center bottom;
}

@keyframes ctaArtFloat {

   0%,
   100% {
      transform: translateY(0) rotate(0deg);
   }

   50% {
      transform: translateY(-10px) rotate(-2deg);
   }
}

@media (prefers-reduced-motion:reduce) {
   .cta-art-img {
      animation: none;
   }
}

@media (max-width:1399px) {
   .leadership-row-four .leader-photo {
      height: 248px;
   }
}

@media (max-width:1199px) {
   .cta-card-split {
      padding: 70px 45px 70px 50px;
   }
}

@media (max-width:1024px) {
   .leader-plate {
      margin: -8px 10px 0;
   }

   .leadership-row-four .leader-photo {
      height: 218px;
   }
}

@media (max-width:991px) {
   .cta-card-split {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 60px 32px;
   }

   .cta-card-split .cta-content {
      text-align: center;
   }

   .cta-art-img {
      max-width: 280px;
      margin: 0 auto;
   }
}

/* Folder-tab cut on top-right — disabled so all 4 corners are rounded */
.cta-tab {
   display: none;
}

.cta-heading {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 5.5vw, 68px);
   line-height: 1.2;
   margin-bottom: 32px;
   letter-spacing: -0.32px;
   color: var(--navy);
}

.cta-subtext {
   font-size: 22px;
   line-height: 1.55;
   color: rgba(9, 16, 46, 0.72);
   max-width: 720px;
   margin: 0 auto 48px;
   font-weight: 500;
}

.cta-book-btn {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   padding: 8px 8px 8px 36px;
   background: var(--btn);
   color: #fff;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   text-decoration: none;
   transition: background 0.2s ease;
   box-shadow: none;
}

.cta-book-btn:hover {
   background: var(--btn-hover);
   color: #fff;
   transform: none;
   box-shadow: none;
}

.cta-btn-icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #fff;
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
}

/* BADGES */
.cta-badges {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
}

.cta-badge {
   text-align: center;
   color: #fff;
}

.cta-badge-laurel {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-bottom: 14px;
}

.cta-badge-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   min-width: 100px;
}

.cta-badge-brand {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 22px;
   color: #fff;
   letter-spacing: -0.32px;
   line-height: 1;
}

.cta-badge-stars {
   color: var(--btn);
   font-size: 14px;
   letter-spacing: 2px;
}

.cta-badge-stars.small {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.6px;
   color: var(--btn);
}

.laurel-left,
.laurel-right {
   width: 36px;
   height: 54px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   opacity: 0.9;
}

.laurel-left {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none'><path d='M32,58 C20,50 10,35 10,18 C10,8 14,2 20,2' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M14,14 Q8,14 6,20 Q12,22 16,18 Z' fill='white' opacity='0.9'/><path d='M12,22 Q6,22 4,28 Q10,30 14,26 Z' fill='white' opacity='0.9'/><path d='M12,30 Q6,30 4,36 Q10,38 14,34 Z' fill='white' opacity='0.9'/><path d='M14,38 Q8,38 6,44 Q12,46 16,42 Z' fill='white' opacity='0.9'/><path d='M18,46 Q12,46 10,52 Q16,54 20,50 Z' fill='white' opacity='0.9'/></svg>");
}

.laurel-right {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none'><path d='M8,58 C20,50 30,35 30,18 C30,8 26,2 20,2' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M26,14 Q32,14 34,20 Q28,22 24,18 Z' fill='white' opacity='0.9'/><path d='M28,22 Q34,22 36,28 Q30,30 26,26 Z' fill='white' opacity='0.9'/><path d='M28,30 Q34,30 36,36 Q30,38 26,34 Z' fill='white' opacity='0.9'/><path d='M26,38 Q32,38 34,44 Q28,46 24,42 Z' fill='white' opacity='0.9'/><path d='M22,46 Q28,46 30,52 Q24,54 20,50 Z' fill='white' opacity='0.9'/></svg>");
}

.cta-badge-text {
   color: rgba(255, 255, 255, 0.9);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 1.28px;
   line-height: 1.5;
   margin: 0;
}

@media (max-width:991px) {
   .cta-badges {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 24px;
   }

   .cta-card {
      padding: 80px 32px 90px;
      border-radius: 32px;
      margin-bottom: 60px;
   }

   .cta-tab {
      width: 100px;
      height: 44px;
      border-bottom-left-radius: 22px;
      border-top-right-radius: 32px;
   }
}

@media (max-width:520px) {
   .cta-badges {
      grid-template-columns: 1fr;
   }
}

/* ========================== FINAL CTA (legacy) ========================== */
.final-cta {
   background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
   color: #fff;
   padding: 80px 40px;
   border-radius: 24px;
   position: relative;
   overflow: hidden;
}

.final-cta::before {
   content: '';
   position: absolute;
   top: -150px;
   right: -150px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.25), transparent 60%);
   border-radius: 50%;
}

.final-cta>* {
   position: relative;
   z-index: 2;
}

.final-cta h2 {
   color: #fff;
   margin-bottom: 16px;
}

.final-cta p {
   color: #cbd5e1;
   font-size: 18px;
   margin-bottom: 36px;
   max-width: 560px;
   margin-left: auto;
   margin-right: auto;
}

/* ========================== OFFICES V2 (global footer strip) ========================== */
.offices-v2 {
   background: radial-gradient(ellipse at 50% 12%, rgba(122, 204, 13, 0.15) 0%, transparent 55%), linear-gradient(180deg, #09102e 0%, #0b1436 14%, #141c42 28%, #2a355e 42%, #5a6586 58%, #9ba4bf 72%, #d8dde7 84%, #f4f5f9 93%, #ffffff 100%);
   padding: var(--sec-py-lg) 0;
   position: relative;
   overflow: hidden;
}

.offices-v2::before {
   content: '';
   position: absolute;
   top: -200px;
   right: -200px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.18) 0%, transparent 65%);
   filter: blur(40px);
   pointer-events: none;
}

.offices-v2::after {
   content: '';
   position: absolute;
   top: -160px;
   left: -200px;
   width: 420px;
   height: 420px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.12) 0%, transparent 65%);
   filter: blur(40px);
   pointer-events: none;
}

.offices-v2>.container {
   position: relative;
   z-index: 2;
}

.office-head {
   max-width: 850px;
   margin: 0 auto 70px;
   text-align: center;
}

.office-head .section-label {
   display: inline-block;
   margin-bottom: 10px;
   color: var(--btn);
}

.office-heading {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 4.5vw, 60px);
   letter-spacing: -0.32px;
   line-height: 1.2;
   color: #ffffff;
   margin-bottom: 18px;
   margin-top: 16px;
}

.office-sub {
   color: rgba(255, 255, 255, 0.75);
   font-size: 18px;
   line-height: 1.55;
   margin: 0;
}

.office-card {
   background: #fff;
   border-radius: 18px;
   padding: 26px 24px;
   text-align: center;
   border: 1px solid rgba(9, 16, 46, 0.08);
   box-shadow: 0 6px 20px rgba(9, 16, 46, 0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
   align-items: center;
}

.office-card:hover {
   transform: translateY(-6px);
   border-color: rgba(122, 204, 13, 0.4);
   box-shadow: 0 24px 50px rgba(9, 16, 46, 0.1);
}

/* ========================== MAP-PIN STYLE FLAG (office-pin) ========================== */
.office-pin {
   position: relative;
   width: 96px;
   height: 120px;
   margin: 0 auto 18px;
   filter: drop-shadow(0 12px 18px rgba(9, 16, 46, 0.28));
}

/* Pin teardrop body — darker slate-blue so it pops on white card bg */
.office-pin-body {
   position: absolute;
   top: 0;
   left: 50%;
   width: 96px;
   height: 96px;
   margin-left: -48px;
   background: linear-gradient(135deg, #8996b0 0%, #5f6c87 60%, #4a5670 100%);
   border-radius: 50% 50% 50% 0;
   transform: rotate(-45deg);
   box-shadow: inset 0 -6px 14px rgba(9, 16, 46, 0.25), inset 0 4px 10px rgba(255, 255, 255, 0.15);
}

/* Circular flag window — SVG flag fills it edge-to-edge */
.office-pin-flag {
   position: absolute;
   top: 10px;
   left: 50%;
   width: 76px;
   height: 76px;
   margin-left: -38px;
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 0 0 3px #ffffff, inset 0 0 0 1px rgba(9, 16, 46, 0.15), 0 4px 10px rgba(9, 16, 46, 0.2);
   z-index: 2;
   background: #fff;
}

.office-pin-flag img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 50%;
}

/* Soft ellipse shadow under the pin point */
.office-pin-shadow {
   position: absolute;
   left: 50%;
   bottom: -2px;
   width: 34px;
   height: 6px;
   margin-left: -17px;
   background: radial-gradient(ellipse, rgba(9, 16, 46, 0.22) 0%, transparent 70%);
   border-radius: 50%;
   filter: blur(1px);
}

/* ---- Scroll-triggered reveal (stagger) ---- */
/* Default (pre-reveal) state */
.office-card .office-pin,
.office-card .office-country,
.office-card .office-address,
.office-card .office-phone {
   opacity: 0;
   transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
   transition-delay: calc(var(--office-i, 0) * 110ms + var(--part-delay, 0ms));
}

.office-card .office-pin {
   transform: translateX(-40px) scale(0.85);
}

.office-card .office-country {
   transform: translateX(22px);
   --part-delay: 160ms;
}

.office-card .office-address {
   transform: translateX(22px);
   --part-delay: 240ms;
}

.office-card .office-phone {
   transform: translateX(22px);
   --part-delay: 320ms;
}

/* Revealed state (toggled by JS IntersectionObserver) */
.office-card.is-visible .office-pin,
.office-card.is-visible .office-country,
.office-card.is-visible .office-address,
.office-card.is-visible .office-phone {
   opacity: 1;
   transform: translateX(0) scale(1);
}

/* Hover: subtle pin bob + tilt — one-shot, not infinite */
.office-card:hover .office-pin {
   animation: office-pin-bob 0.8s ease-out;
}

@keyframes office-pin-bob {
   0% {
      transform: translateY(0) rotate(0deg);
   }

   30% {
      transform: translateY(-6px) rotate(-6deg);
   }

   60% {
      transform: translateY(-2px) rotate(4deg);
   }

   100% {
      transform: translateY(0) rotate(0deg);
   }
}

/* Slow shimmer pass across the flag window every 6s */
.office-card .office-pin-flag::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
   transform: translateX(-120%);
   pointer-events: none;
}

.office-card.is-visible .office-pin-flag::after {
   animation: office-flag-shimmer 6s ease-in-out infinite;
   animation-delay: calc(var(--office-i, 0) * 400ms + 1.2s);
}

@keyframes office-flag-shimmer {

   0%,
   85%,
   100% {
      transform: translateX(-120%);
   }

   92% {
      transform: translateX(120%);
   }
}

@media (max-width:767px) {
   .office-pin {
      width: 78px;
      height: 100px;
      margin-bottom: 14px;
   }

   .office-pin-body {
      width: 78px;
      height: 78px;
      margin-left: -39px;
   }

   .office-pin-flag {
      width: 60px;
      height: 60px;
      margin-left: -30px;
      font-size: 48px;
      top: 9px;
   }
}

@media (prefers-reduced-motion:reduce) {

   .office-card .office-pin,
   .office-card .office-country,
   .office-card .office-address,
   .office-card .office-phone {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }

   .office-card:hover .office-pin,
   .office-card .office-pin-flag::after {
      animation: none !important;
   }
}

.office-icon {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   margin-bottom: 24px;
   transition: all 0.3s ease;
   box-shadow: 0 8px 20px rgba(9, 16, 46, 0.15);
}

.office-card:hover .office-icon {
   background: var(--btn);
   transform: scale(1.08);
   box-shadow: 0 10px 24px rgba(122, 204, 13, 0.35);
}

/* Legacy flag circle (kept for fallback) */
.office-flag {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: linear-gradient(135deg, #ffffff 0%, #f4f6fb 100%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   line-height: 1;
   margin-bottom: 14px;
   border: 3px solid rgba(9, 16, 46, 0.08);
   box-shadow: 0 10px 26px rgba(9, 16, 46, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.9);
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   position: relative;
}

.office-card:hover .office-flag {
   transform: scale(1.08) rotate(-4deg);
   border-color: var(--btn);
   box-shadow: 0 14px 32px rgba(122, 204, 13, 0.3), 0 0 0 4px rgba(122, 204, 13, 0.1);
}

.office-country {
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 22px;
   color: var(--btn);
   letter-spacing: -0.16px;
   margin-bottom: 8px;
}

.office-address {
   color: #5a6378;
   font-size: 13.5px;
   line-height: 1.45;
   margin-bottom: 12px;
   min-height: 36px;
}

.office-phone {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 16px;
   color: var(--navy);
   text-decoration: none;
   transition: color 0.2s;
   letter-spacing: -0.16px;
}

.office-phone:hover {
   color: var(--btn);
}

@media (max-width:1399px) {
   .cta-heading {
      font-size: clamp(30px, 5.5vw, 50px);
   }
}

@media (max-width:767px) {
   .offices-v2 {
      padding: var(--sec-py-sm) 0;
   }

   .office-head {
      margin-bottom: 40px;
   }

   /* 2-per-row on mobile instead of full-width stack */
   .offices-v2 .row>[class*="col-"] {
      flex: 0 0 50% !important;
      max-width: 50% !important;
      width: 50% !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
   }

   .offices-v2 .row {
      margin-left: -8px !important;
      margin-right: -8px !important;
   }

   .office-card {
      padding: 18px 14px;
   }

   .office-icon {
      width: 44px;
      height: 44px;
      font-size: 18px;
      margin-bottom: 10px;
   }

   .office-flag {
      width: 44px;
      height: 44px;
      font-size: 22px;
      margin-bottom: 10px;
   }

   .office-country {
      font-size: 16px;
   }

   .office-phone {
      font-size: 13.5px;
   }

   .office-address {
      font-size: 12px;
   }
}

/* ========================== FOOTER V2 (big headline + columns + bottom bar) ========================== */
.footer-v2 {
   background-color: var(--navy);
   color: #fff;
   margin-top: 0;
   position: relative;
   background-image: linear-gradient(180deg, rgba(9, 16, 46, 0.55) 0%, rgba(9, 16, 46, 0.72) 25%, rgba(9, 16, 46, 0.90) 55%, rgba(9, 16, 46, 0.96) 80%, rgba(9, 16, 46, 0.99) 100%), url('../images/officebg-web.webp');
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

/* Hero headline block */
.footer-hero {
   padding: 160px 0 140px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   position: relative;
   overflow: hidden;
}

.footer-hero>.container {
   position: relative;
   z-index: 2;
}

.footer-hero-logo {
   display: block;
   margin: 0 auto 44px;
   max-height: 150px;
   width: auto;
   filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
}

.footer-headline {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 800;
   font-size: clamp(48px, 8vw, 128px);
   line-height: 1.3;
   color: #fff;
   letter-spacing: -0.64px;
   margin: 0 0 48px;
}

@media (max-width:575px) {
   .footer-headline {
      font-size: clamp(36px, 8vw, 128px);
      line-height: 1.2;
   }
.team-lead-name {
        font-size: 30px;
    }


}

.footer-headline em {
   font-family: "Fraunces", Georgia, serif;
   font-style: italic;
   font-weight: 500;
   letter-spacing: -0.48px;
}

.footer-headline sup {
   font-size: 5.6px;
   vertical-align: super;
   font-weight: 500;
}

.footer-cta {
   display: inline-flex;
   align-items: center;
   background: var(--btn);
   color: var(--navy);
   padding: 16px 36px;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 17px;
   text-decoration: none;
   transition: background 0.2s ease;
   box-shadow: none;
}

.footer-cta:hover {
   background: var(--btn-hover);
   color: var(--navy);
   transform: none;
   box-shadow: none;
}

/* ===== ISTC-style Footer Main (4-column grid) ===== */
.footer-main {
   padding: 80px 0 60px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Top centered brand row (logo + tagline) */
.footer-brand-row {
   padding-bottom: 56px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   margin-bottom: 56px;
}

.footer-main-logo {
   max-height: 130px;
   width: auto;
   margin: 0 auto 24px;
   display: block;
}

.footer-brand-row .finfo-tagline {
   max-width: 560px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-size: 19px;
}

/* Info column */
.finfo-col {
   display: flex;
   flex-direction: column;
}

.finfo-brand img {
   max-height: 90px;
   width: auto;
   margin-bottom: 20px;
}

.finfo-tagline {
   color: rgba(255, 255, 255, 0.85);
   font-family: 'Inter', sans-serif;
   font-size: 17px;
   font-weight: 500;
   line-height: 1.55;
   margin: 0 0 32px;
}

.finfo-head {
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 20px;
   margin: 0 0 20px;
   letter-spacing: -0.16px;
}

.finfo-phones {
   list-style: none;
   padding: 0;
   margin: 0 0 32px;
   max-width: fit-content;
}

.finfo-phones li {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px 0;
   font-family: 'Inter', sans-serif;
   font-size: 17px;
   font-weight: 600;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.finfo-phones li:last-child {
   border-bottom: 0;
}

.finfo-flag {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   flex-shrink: 0;
   border: 2px solid rgba(255, 255, 255, 0.12);
   transition: all 0.3s ease;
   overflow: hidden;
   line-height: 1;
}

.finfo-phones li:hover .finfo-flag {
   border-color: var(--btn);
   transform: scale(1.05);
   box-shadow: 0 6px 18px rgba(122, 204, 13, 0.25);
}

/* Footer office flag image: show the entire flag inside the circle (no crop) */
.finfo-flag img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
   background: #fff;
   border-radius: 50%;
}

.finfo-office {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
}

.finfo-office-name {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2.24px;
   text-transform: uppercase;
   color: var(--btn);
}

.finfo-phones a {
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   font-size: 16px;
   letter-spacing: -0.16px;
   transition: color 0.2s;
}

.finfo-phones a:hover {
   color: var(--btn);
}

.finfo-socials {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.finfo-socials a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.25);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.8);
   font-size: 15px;
   text-decoration: none;
   transition: all 0.25s ease;
}

.finfo-socials a:hover {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
   transform: translateY(-2px);
}

/* Spacing between stacked pill menus in a column */
.fmenu-col-spaced {
   margin-top: 28px;
}

/* ===== Clean text-heading menus (desktop footer) ===== */
.fsection {
   margin-bottom: 36px;
}

.fsection:last-child {
   margin-bottom: 0;
}

.fsection-head {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 22px;
   text-decoration: none;
   margin-bottom: 20px;
   letter-spacing: -0.32px;
   transition: color 0.2s;
}

.fsection-head:hover {
   color: var(--btn);
}

.fsection-head i {
   font-size: 13px;
   opacity: 0.7;
   transition: transform 0.2s, opacity 0.2s;
}

.fsection-head:hover i {
   transform: translate(2px, -2px);
   opacity: 1;
}

.fsection-head-accent {
   color: var(--btn);
}

.fsection-head-accent:hover {
   color: var(--btn-hover);
}

.fsection-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.fsection-list li {
   margin-bottom: 2px;
}

.fsection-list li a {
   display: inline-block;
   color: rgba(255, 255, 255, 0.75);
   font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-weight: 500;
   text-decoration: none;
   padding: 8px 0;
   transition: color 0.2s, transform 0.2s;
}

.fsection-list li a:hover {
   color: var(--btn);
   transform: translateX(3px);
}

/* ===== Mobile/Tablet (≤1024px): text headings become full-width green pills ===== */
@media (max-width:1024px) {
   .footer-main>.container {
      padding-left: 0;
      padding-right: 0;
      max-width: 100%;
   }

   .footer-main>.container>.row {
      margin: 0;
      --bs-gutter-x: 0;
      --bs-gutter-y: 0;
   }

   .footer-main>.container>.row>[class^="col-"] {
      padding: 0;
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
   }

   /* Inner Services row (DESIGN / DEVELOPMENT / AI DEV) also stacks */
   .footer-services-row>[class^="col-"] {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
   }

   .footer-services-row {
      --bs-gutter-x: 0 !important;
      --bs-gutter-y: 0 !important;
      margin: 0 !important;
      gap: 0 !important;
   }

   /* Info column keeps normal padding since it's text content */
   .footer-main>.container>.row>[class^="col-"]:first-child {
      padding: 0 20px 40px;
   }

   /* Section groups: no spacing between them, edge-to-edge */
   .fsection {
      margin-bottom: 0;
   }

   /* Headings become full-width green pills */
   .fsection-head {
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--btn);
      color: var(--navy) !important;
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: 1.92px;
      text-transform: uppercase;
      padding: 18px 20px;
      margin-bottom: 0;
      width: 100%;
      text-align: center;
      border-radius: 0;
   }

   .fsection-head:hover {
      background: var(--btn-hover);
      color: var(--navy) !important;
   }

   .fsection-head i {
      font-size: 12px;
      opacity: 0.9;
   }

   .fsection-head:hover i {
      transform: none;
      opacity: 1;
   }

   .fsection-head-accent {
      background: #fff;
      color: var(--navy) !important;
   }

   .fsection-head-accent:hover {
      background: var(--btn);
      color: var(--navy) !important;
   }

   /* Menu items become full-width with dividers */
   .fsection-list {
      text-align: center;
      background: rgba(0, 0, 0, 0.15);
   }

   .fsection-list li {
      margin-bottom: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .fsection-list li:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .fsection-list li a {
      display: block;
      padding: 16px 12px;
      font-size: 15px;
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
   }

   .fsection-list li a:hover {
      color: var(--btn);
      transform: none;
      background: rgba(122, 204, 13, 0.05);
   }

   /* Info column — Our Offices: centered heading/socials, full-width bordered office boxes on mobile */
   .finfo-head {
      text-align: center;
   }

   .finfo-col {
      text-align: left;
      align-items: stretch;
   }

   .finfo-phones {
      max-width: none;
   }

   .finfo-phones li {
      justify-content: flex-start;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 12px;
   }

   .finfo-phones li:last-child {
      margin-bottom: 0;
   }

   .finfo-office {
      align-items: flex-start;
      text-align: left;
   }

   .finfo-socials {
      justify-content: center;
   }

   .finfo-brand img {
      max-height: 64px;
      margin: 0 auto 14px;
   }

   /* Show Quick Links col on mobile, hide the horizontal pipe menu */
   .fquick-col-mobile {
      display: block !important;
      padding: 0 !important;
   }

   .footer-quick-menu {
      display: none !important;
   }
}

/* Very small screens — tighter */
@media (max-width:480px) {
   .fsection-head {
      font-size: 13px;
      padding: 16px 16px;
   }

   .fsection-list li a {
      font-size: 14px;
      padding: 14px 12px;
   }
}

/* Mobile-only Quick Links col (hidden on desktop) */
.fquick-col-mobile {
   display: none;
}

/* ========================== INLINE FOOTER MOTTO (fills dead space beside Offices column) ========================== */
.footer-motto-inline {
   position: relative;
   margin-top: 44px;
   padding: 40px 44px;
   border-radius: 20px;
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.12) 0%, rgba(9, 16, 46, 0.4) 100%);
   border: 1px solid rgba(122, 204, 13, 0.25);
   overflow: hidden;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fmi-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
}

.fmi-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(40px);
}

.fmi-orb-a {
   width: 280px;
   height: 280px;
   top: -120px;
   left: -80px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.4), transparent 65%);
   animation: fmi-orb-float 14s ease-in-out infinite;
}

.fmi-orb-b {
   width: 220px;
   height: 220px;
   bottom: -100px;
   right: -60px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.25), transparent 65%);
   animation: fmi-orb-float 16s ease-in-out infinite 2s reverse;
}

@keyframes fmi-orb-float {

   0%,
   100% {
      transform: translate(0, 0);
   }

   50% {
      transform: translate(30px, -25px);
   }
}

/* Subtle grid pattern */
.fmi-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: 32px 32px;
   mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
   -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
   opacity: 0.5;
}

/* --- CSS galaxy (decorative, right side of motto) --- */
.fmi-galaxy {
   position: absolute;
   top: 50%;
   right: 48px;
   transform: translateY(-50%);
   width: 210px;
   height: 210px;
   pointer-events: none;
   z-index: 1;
   opacity: 0.85;
}

.fmi-galaxy-core {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   background: radial-gradient(circle, #ffffff 0%, #c5f07a 40%, rgba(122, 204, 13, 0.6) 70%, transparent 100%);
   box-shadow: 0 0 18px rgba(197, 240, 122, 0.9), 0 0 36px rgba(122, 204, 13, 0.5), 0 0 72px rgba(122, 204, 13, 0.25);
   animation: fmi-pulse 3.5s ease-in-out infinite;
   z-index: 3;
}

.fmi-galaxy-ring {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: conic-gradient(from 0deg, transparent 0deg, rgba(197, 240, 122, 0.3) 30deg, rgba(255, 255, 255, 0.2) 60deg, transparent 125deg, rgba(122, 204, 13, 0.28) 190deg, rgba(255, 255, 255, 0.18) 235deg, transparent 310deg, rgba(197, 240, 122, 0.22) 360deg);
   filter: blur(8px);
   mask-image: radial-gradient(circle, transparent 14%, #000 20%, #000 72%, transparent 94%);
   -webkit-mask-image: radial-gradient(circle, transparent 14%, #000 20%, #000 72%, transparent 94%);
   animation: fmi-rotate 60s linear infinite;
   z-index: 2;
}

.fmi-galaxy-ring::after {
   content: "";
   position: absolute;
   inset: 10%;
   border-radius: 50%;
   background: conic-gradient(from 180deg, transparent 0deg, rgba(255, 255, 255, 0.25) 45deg, transparent 90deg, rgba(197, 240, 122, 0.3) 200deg, transparent 280deg);
   filter: blur(4px);
   mask-image: radial-gradient(circle, transparent 30%, #000 40%, #000 80%, transparent 100%);
   -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 40%, #000 80%, transparent 100%);
}

.fmi-galaxy-stars {
   position: absolute;
   inset: -18px;
   z-index: 2;
}

.fmi-galaxy-stars>span {
   position: absolute;
   display: block;
   width: 2px;
   height: 2px;
   border-radius: 50%;
   background: #ffffff;
   box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
   animation: fmi-twinkle 2.6s ease-in-out infinite;
}

.fmi-galaxy-stars>span:nth-child(1) {
   top: 6%;
   left: 18%;
   animation-delay: 0s;
}

.fmi-galaxy-stars>span:nth-child(2) {
   top: 12%;
   left: 70%;
   animation-delay: .4s;
   width: 3px;
   height: 3px;
}

.fmi-galaxy-stars>span:nth-child(3) {
   top: 22%;
   left: 8%;
   animation-delay: .8s;
   background: #c5f07a;
   box-shadow: 0 0 6px rgba(197, 240, 122, 0.9);
}

.fmi-galaxy-stars>span:nth-child(4) {
   top: 28%;
   left: 86%;
   animation-delay: 1.2s;
}

.fmi-galaxy-stars>span:nth-child(5) {
   top: 36%;
   left: 26%;
   animation-delay: .2s;
   width: 3px;
   height: 3px;
   background: #c5f07a;
   box-shadow: 0 0 8px rgba(197, 240, 122, 1);
}

.fmi-galaxy-stars>span:nth-child(6) {
   top: 42%;
   left: 80%;
   animation-delay: 1.6s;
}

.fmi-galaxy-stars>span:nth-child(7) {
   top: 52%;
   left: 10%;
   animation-delay: 2s;
}

.fmi-galaxy-stars>span:nth-child(8) {
   top: 58%;
   left: 92%;
   animation-delay: .6s;
   width: 2.5px;
   height: 2.5px;
}

.fmi-galaxy-stars>span:nth-child(9) {
   top: 68%;
   left: 22%;
   animation-delay: 1s;
   background: #c5f07a;
   box-shadow: 0 0 6px rgba(197, 240, 122, 0.9);
}

.fmi-galaxy-stars>span:nth-child(10) {
   top: 72%;
   left: 76%;
   animation-delay: 1.4s;
}

.fmi-galaxy-stars>span:nth-child(11) {
   top: 82%;
   left: 14%;
   animation-delay: 1.8s;
}

.fmi-galaxy-stars>span:nth-child(12) {
   top: 88%;
   left: 68%;
   animation-delay: .3s;
   width: 2.5px;
   height: 2.5px;
}

.fmi-galaxy-stars>span:nth-child(13) {
   top: 4%;
   left: 48%;
   animation-delay: .9s;
}

.fmi-galaxy-stars>span:nth-child(14) {
   top: 94%;
   left: 42%;
   animation-delay: 1.3s;
   background: #c5f07a;
   box-shadow: 0 0 6px rgba(197, 240, 122, 0.9);
}

.fmi-galaxy-stars>span:nth-child(15) {
   top: 46%;
   left: 2%;
   animation-delay: 1.7s;
}

.fmi-galaxy-stars>span:nth-child(16) {
   top: 50%;
   left: 96%;
   animation-delay: 2.1s;
   width: 2.5px;
   height: 2.5px;
}

.fmi-galaxy-stars>span:nth-child(17) {
   top: 16%;
   left: 42%;
   animation-delay: 1.5s;
}

.fmi-galaxy-stars>span:nth-child(18) {
   top: 78%;
   left: 54%;
   animation-delay: .7s;
   width: 2.5px;
   height: 2.5px;
   background: #c5f07a;
   box-shadow: 0 0 6px rgba(197, 240, 122, 0.9);
}

@keyframes fmi-rotate {
   to {
      transform: rotate(360deg);
   }
}

@keyframes fmi-pulse {

   0%,
   100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.95;
   }

   50% {
      transform: translate(-50%, -50%) scale(1.15);
      opacity: 1;
   }
}

@keyframes fmi-twinkle {

   0%,
   100% {
      opacity: 0.3;
      transform: scale(0.8);
   }

   50% {
      opacity: 1;
      transform: scale(1.25);
   }
}

@media (max-width:991px) {
   .fmi-galaxy {
      width: 160px;
      height: 160px;
      right: 24px;
      opacity: 0.7;
   }
}

@media (max-width:767px) {
   .fmi-galaxy {
      display: none;
   }
}

.fmi-content {
   position: relative;
   z-index: 2;
}

.fmi-top {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 18px;
}

.fmi-sparkle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.22), rgba(122, 204, 13, 0.05));
   color: var(--btn);
   font-size: 16px;
   border: 1px solid rgba(122, 204, 13, 0.4);
   animation: fmi-sparkle 2.8s ease-in-out infinite;
   box-shadow: 0 0 18px rgba(122, 204, 13, 0.3);
}

@keyframes fmi-sparkle {

   0%,
   100% {
      transform: scale(1) rotate(0);
      box-shadow: 0 0 18px rgba(122, 204, 13, 0.3);
   }

   50% {
      transform: scale(1.12) rotate(14deg);
      box-shadow: 0 0 28px rgba(122, 204, 13, 0.55);
   }
}

.fmi-eyebrow {
   color: rgba(255, 255, 255, 0.55);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 3.84px;
   text-transform: uppercase;
}

.fmi-text {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(26px, 3.2vw, 40px);
   line-height: 1.15;
   letter-spacing: -0.32px;
   color: #ffffff;
   margin: 0;
}

.fmi-text em {
   font-style: italic;
   color: rgba(255, 255, 255, 0.9);
   position: relative;
}

.fmi-text em::after {
   content: '';
   position: absolute;
   left: 4%;
   right: 4%;
   bottom: -2px;
   height: 2.5px;
   background: linear-gradient(90deg, transparent, var(--btn), transparent);
   border-radius: 2px;
}

.fmi-accent {
   background: linear-gradient(90deg, #7ACC0D 0%, #a8f043 55%, #ffffff 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   font-style: italic;
}

.fmi-cursor {
   display: inline-block;
   width: 3px;
   height: 13.6px;
   background: var(--btn);
   margin-left: 6px;
   vertical-align: -0.64px;
   animation: fmi-cursor-blink 1.1s step-end infinite;
   box-shadow: 0 0 10px rgba(122, 204, 13, 0.7);
}

@keyframes fmi-cursor-blink {

   0%,
   49% {
      opacity: 1;
   }

   50%,
   100% {
      opacity: 0;
   }
}

.fmi-dots {
   display: flex;
   gap: 8px;
   margin-top: 22px;
}

.fmi-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--btn);
   opacity: 0.6;
   animation: fmi-dot-pulse 1.6s ease-in-out infinite;
   box-shadow: 0 0 8px rgba(122, 204, 13, 0.5);
}

.fmi-dot:nth-child(2) {
   animation-delay: 0.2s;
}

.fmi-dot:nth-child(3) {
   animation-delay: 0.4s;
}

@keyframes fmi-dot-pulse {

   0%,
   100% {
      opacity: 0.3;
      transform: scale(0.85);
   }

   50% {
      opacity: 1;
      transform: scale(1.2);
   }
}

@media (max-width:991px) {
   .footer-motto-inline {
      margin-top: 24px;
      padding: 28px 24px;
   }

   .fmi-text {
      font-size: clamp(24px, 6vw, 32px);
   }
}

@media (prefers-reduced-motion:reduce) {

   .fmi-orb,
   .fmi-sparkle,
   .fmi-cursor,
   .fmi-dot {
      animation: none !important;
   }
}

/* ========================== FOOTER MOTTO / TAGLINE BANNER (legacy full-width — kept for compat) ========================== */
.footer-motto {
   position: relative;
   padding: 56px 0 60px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   overflow: hidden;
   background: radial-gradient(ellipse at 50% 50%, rgba(122, 204, 13, 0.06) 0%, transparent 60%);
}

.footer-motto-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

/* Floating glow orbs */
.fm-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(50px);
   pointer-events: none;
}

.fm-orb-1 {
   width: 340px;
   height: 340px;
   top: -140px;
   left: 8%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.22), transparent 65%);
   animation: fm-orb-float 12s ease-in-out infinite;
}

.fm-orb-2 {
   width: 260px;
   height: 260px;
   bottom: -120px;
   right: 12%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.15), transparent 65%);
   animation: fm-orb-float 14s ease-in-out infinite 2s reverse;
}

.fm-orb-3 {
   width: 180px;
   height: 180px;
   top: 30%;
   right: 40%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.1), transparent 65%);
   animation: fm-orb-float 10s ease-in-out infinite 1s;
}

@keyframes fm-orb-float {

   0%,
   100% {
      transform: translate(0, 0);
   }

   50% {
      transform: translate(30px, -20px);
   }
}

/* Decorative diagonal lines on left/right edges */
.fm-line {
   position: absolute;
   top: 50%;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(122, 204, 13, 0.35), transparent);
}

.fm-line-l {
   left: 0;
   width: 28%;
   transform: translateY(-50%);
}

.fm-line-r {
   right: 0;
   width: 28%;
   transform: translateY(-50%);
}

/* Inner centered content */
.footer-motto-inner {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: 960px;
   margin: 0 auto;
}

.footer-motto-sparkle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.18), rgba(122, 204, 13, 0.05));
   color: var(--btn);
   font-size: 20px;
   margin-bottom: 14px;
   border: 1px solid rgba(122, 204, 13, 0.35);
   animation: fm-sparkle 2.8s ease-in-out infinite;
   box-shadow: 0 0 30px rgba(122, 204, 13, 0.3);
}

@keyframes fm-sparkle {

   0%,
   100% {
      transform: scale(1) rotate(0);
      box-shadow: 0 0 30px rgba(122, 204, 13, 0.3);
   }

   50% {
      transform: scale(1.1) rotate(12deg);
      box-shadow: 0 0 40px rgba(122, 204, 13, 0.55);
   }
}

.footer-motto-eyebrow {
   display: inline-block;
   color: rgba(255, 255, 255, 0.5);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 4.48px;
   text-transform: uppercase;
   margin-bottom: 18px;
   padding: 0 14px;
   position: relative;
}

.footer-motto-eyebrow::before,
.footer-motto-eyebrow::after {
   content: '';
   position: absolute;
   top: 50%;
   width: 24px;
   height: 1px;
   background: rgba(122, 204, 13, 0.5);
}

.footer-motto-eyebrow::before {
   right: 100%;
}

.footer-motto-eyebrow::after {
   left: 100%;
}

.footer-motto-text {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(32px, 4.5vw, 54px);
   line-height: 1.15;
   letter-spacing: -0.32px;
   color: #ffffff;
   margin: 0;
   position: relative;
   display: inline;
}

.fm-accent-italic {
   font-style: italic;
   color: rgba(255, 255, 255, 0.88);
   position: relative;
}

.fm-accent-italic::after {
   content: '';
   position: absolute;
   left: 3%;
   right: 3%;
   bottom: -4px;
   height: 3px;
   background: linear-gradient(90deg, transparent, var(--btn), transparent);
   border-radius: 2px;
   opacity: 0.8;
}

.fm-accent-grad {
   background: linear-gradient(90deg, #7ACC0D 0%, #a8f043 50%, #ffffff 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   font-style: italic;
}

.fm-cursor {
   display: inline-block;
   width: 3px;
   height: 14.4px;
   background: var(--btn);
   margin-left: 6px;
   vertical-align: -0.8px;
   animation: fm-cursor-blink 1.1s step-end infinite;
   box-shadow: 0 0 12px rgba(122, 204, 13, 0.7);
}

@keyframes fm-cursor-blink {

   0%,
   49% {
      opacity: 1;
   }

   50%,
   100% {
      opacity: 0;
   }
}

/* Bottom trail of dots */
.footer-motto-trail {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 28px;
}

.fm-dot {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--btn);
   opacity: 0.6;
   animation: fm-dot-pulse 1.6s ease-in-out infinite;
   box-shadow: 0 0 8px rgba(122, 204, 13, 0.5);
}

.fm-dot-2 {
   animation-delay: 0.2s;
}

.fm-dot-3 {
   animation-delay: 0.4s;
}

@keyframes fm-dot-pulse {

   0%,
   100% {
      opacity: 0.3;
      transform: scale(0.85);
   }

   50% {
      opacity: 1;
      transform: scale(1.2);
   }
}

@media (max-width:767px) {
   .footer-motto {
      padding: 44px 0 48px;
   }

   .fm-line {
      display: none;
   }

   .footer-motto-text {
      font-size: clamp(26px, 7vw, 36px);
   }

   .footer-motto-sparkle {
      width: 38px;
      height: 38px;
      font-size: 17px;
   }

   .footer-main {
      padding: 50px 0 60px;
   }

   .team-lead-inner {
      padding: 40px 22px;
   }
}

@media (prefers-reduced-motion:reduce) {

   .fm-orb,
   .footer-motto-sparkle,
   .fm-cursor,
   .fm-dot {
      animation: none !important;
   }
}

/* Horizontal quick-links menu (between main block and copyright) */
.footer-quick-menu {
   padding: 20px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fquick-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px 0;
   align-items: center;
}

.fquick-list li {
   display: inline-flex;
   align-items: center;
}

.fquick-list li:not(:last-child)::after {
   content: '|';
   color: rgba(255, 255, 255, 0.25);
   margin: 0 14px;
   font-weight: 300;
}

.fquick-list a {
   color: rgba(255, 255, 255, 0.75);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.2s;
}

.fquick-list a:hover {
   color: var(--btn);
}

/* Services menu block (legacy — keep for pill styling classes still used) */
.footer-services-block {
   padding: 80px 0 50px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fmenu-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 32px;
}

.fmenu-grid.fmenu-grid-nav {
   grid-template-columns: repeat(3, 1fr);
   max-width: 1000px;
   margin: 0 auto;
   gap: 32px;
}

@media (max-width:1024px) {

   /* Footer main container — remove padding so pills can go edge-to-edge */
   .footer-main>.container {
      padding-left: 0;
      padding-right: 0;
      max-width: 100%;
   }

   .footer-main>.container>.row {
      margin: 0;
   }

   .footer-main>.container>.row>[class^="col-"] {
      padding: 0;
   }

   /* Info column gets its own padding since it has normal text content */
   .footer-main>.container>.row>.col-lg-3:first-child {
      padding: 0 20px 40px;
   }

   /* Pill menu cols get no spacing between them on mobile */
   .fmenu-col-spaced {
      margin-top: 0;
   }

   .fmenu-col {
      margin-bottom: 0;
      align-items: stretch;
   }

   /* Pills — full width edge-to-edge, squared button style */
   .fmenu-pill {
      border-radius: 0 !important;
      margin-bottom: 0;
      box-shadow: none !important;
      padding: 18px 20px;
      font-size: 14px;
      text-align: center;
      width: 100%;
      display: block;
   }

   .fmenu-pill:hover {
      transform: none;
      box-shadow: none !important;
   }

   /* Menu list — full width items with dividers */
   .fmenu-list {
      text-align: center;
      background: rgba(0, 0, 0, 0.15);
   }

   .fmenu-list li {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .fmenu-list li a {
      padding: 16px 12px;
      font-size: 15px;
      text-align: center;
      display: block;
   }

   .fmenu-list li:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   /* Info col on mobile — Our Offices: centered heading/socials, full-width bordered office boxes */
   .finfo-head {
      text-align: center;
   }

   .finfo-col {
      text-align: left;
      align-items: stretch;
   }

   .finfo-phones {
      max-width: none;
   }

   .finfo-phones li {
      justify-content: flex-start;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 12px;
   }

   .finfo-phones li:last-child {
      margin-bottom: 0;
   }

   .finfo-office {
      align-items: flex-start;
      text-align: left;
   }

   .finfo-socials {
      justify-content: center;
   }

   .finfo-brand img {
      max-height: 64px;
      margin: 0 auto 14px;
   }
}

/* Very small screens — tighter spacing */
@media (max-width:480px) {
   .fmenu-pill {
      font-size: 13px;
      padding: 16px 16px;
   }

   .fmenu-list li a {
      font-size: 14px;
      padding: 14px 12px;
   }
}

.fmenu-col {
   display: flex;
   flex-direction: column;
   align-items: stretch;
}

.fmenu-pill {
   display: block;
   text-align: center;
   background: var(--btn);
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 13px;
   letter-spacing: 1.92px;
   text-transform: uppercase;
   padding: 14px 22px;
   border-radius: 999px;
   text-decoration: none;
   margin-bottom: 6px;
   box-shadow: none;
   transition: background 0.2s ease;
}

.fmenu-pill:hover {
   background: var(--btn-hover);
   color: var(--navy);
   transform: none;
   box-shadow: none;
}

.fmenu-pill-accent {
   background: #fff;
   color: var(--navy);
}

.fmenu-pill-accent:hover {
   background: var(--btn);
   color: var(--navy);
}

.fmenu-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.fmenu-list li {
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fmenu-list li:last-child {
   border-bottom: none;
}

.fmenu-list li a {
   display: block;
   text-align: center;
   padding: 14px 8px;
   color: rgba(255, 255, 255, 0.85);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.2s, transform 0.2s;
   line-height: 1.3;
}

.fmenu-list li a:hover {
   color: var(--btn);
   transform: translateX(2px);
}

.fs-header {
   margin-bottom: 48px;
   text-align: center;
}

.fs-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 3.5vw, 44px);
   color: #fff;
   line-height: 1.15;
   letter-spacing: -0.32px;
   margin: 12px 0 0;
}

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

@media (max-width:991px) {
   .fs-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width:575px) {
   .fs-grid {
      grid-template-columns: 1fr;
   }
.why-item-text {
    font-weight: 600;
}


}

.fs-card {
   display: flex;
   flex-direction: column;
   padding: 28px;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   text-decoration: none;
   color: #fff;
   transition: all 0.3s ease;
   backdrop-filter: blur(8px);
   min-height: 240px;
}

.fs-card:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(122, 204, 13, 0.5);
   transform: translateY(-4px);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
   color: #fff;
}

.fs-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 20px;
}

.fs-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: rgba(122, 204, 13, 0.15);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   transition: all 0.3s;
}

.fs-card:hover .fs-icon {
   background: var(--btn);
   color: #fff;
   transform: rotate(-6deg) scale(1.08);
}

.fs-arrow {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.4);
   transition: all 0.3s;
}

.fs-card:hover .fs-arrow {
   color: var(--btn);
   transform: translate(4px, -4px);
}

.fs-badge {
   padding: 3px 10px;
   background: var(--btn);
   color: var(--navy);
   border-radius: 999px;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1.6px;
   margin-left: auto;
   margin-right: 8px;
}

.fs-card h5 {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 26px;
   color: #fff;
   margin: 0 0 18px;
   letter-spacing: -0.32px;
}

.fs-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.fs-tags span {
   padding: 5px 11px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 999px;
   font-size: 12px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.75);
   transition: all 0.2s;
}

.fs-card:hover .fs-tags span {
   border-color: rgba(122, 204, 13, 0.4);
   color: #fff;
}

/* Featured card (AI Development) */
.fs-card-featured {
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.18), rgba(122, 204, 13, 0.06));
   border-color: rgba(122, 204, 13, 0.4);
}

.fs-card-featured .fs-icon {
   background: var(--btn);
   color: var(--navy);
}

.fs-card-featured:hover {
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.28), rgba(122, 204, 13, 0.1));
   border-color: var(--btn);
}

/* CTA card (last slot) */
.fs-card-cta {
   background: #ffffff;
   color: var(--navy);
   border-color: #ffffff;
}

.fs-card-cta:hover {
   background: #fff;
   color: var(--navy);
   border-color: var(--btn);
   transform: translateY(-6px);
}

.fs-icon-green {
   background: var(--btn) !important;
   color: #fff !important;
}

.fs-card-cta h5 {
   color: var(--navy);
}

.fs-cta-text {
   color: #5a6378;
   font-size: 14px;
   line-height: 1.5;
   margin-bottom: 18px;
}

.fs-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--btn);
   color: #fff;
   padding: 10px 18px;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 0.8px;
   text-transform: uppercase;
   align-self: flex-start;
   margin-top: auto;
}

.fs-card-cta:hover .fs-cta-btn {
   background: var(--btn-hover);
}

/* Links block (now only navigation) */
.footer-links {
   padding: 60px 0 50px;
}

.footer-list-cols {
   column-count: 1;
}

@media (min-width:576px) {
   .footer-list-cols {
      column-count: 2;
      column-gap: 32px;
   }
}

.footer-section-title {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 18px;
   color: #fff;
   margin-bottom: 28px;
   letter-spacing: -0.16px;
}

.footer-col-head {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-size: 15px;
   text-decoration: none;
   margin-bottom: 16px;
   transition: color 0.2s;
}

.footer-col-head:hover {
   color: var(--btn);
}

.footer-col-head.plain {
   cursor: default;
   color: #fff;
}

.footer-col-head.plain:hover {
   color: #fff;
}

.footer-col-head i {
   font-size: 11px;
   opacity: 0.7;
   transition: transform 0.2s;
}

.footer-col-head:hover i {
   transform: translate(2px, -2px);
   opacity: 1;
}

.footer-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-list li {
   margin-bottom: 10px;
}

.footer-list a {
   color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   font-weight: 400;
   transition: color 0.2s;
}

.footer-list a:hover {
   color: #fff;
}

/* Bottom bar */
.footer-bottom-bar {
   padding: 24px 0;
   background: rgba(0, 0, 0, 0.3);
}

.footer-bottom-grid {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px 32px;
   flex-wrap: wrap;
}

.footer-copy-line {
   color: rgba(255, 255, 255, 0.7);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 400;
}

.footer-copy-line strong {
   color: #fff;
   font-weight: 700;
}

.footer-legal {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
}

.footer-legal a {
   color: rgba(255, 255, 255, 0.7);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.2s;
}

.footer-legal a:hover {
   color: var(--btn);
}

.footer-legal .sep {
   color: rgba(255, 255, 255, 0.3);
   margin: 0 6px;
}

/* wp_nav_menu output for `footer-resources` wraps each link in <li>. Style them inline and add the "/" separator between items so the bar reads "Sitemap / Terms And Conditions / Privacy Policy". */
.footer-legal li {
   list-style: none;
   display: inline-flex;
   align-items: center;
   margin: 0;
   padding: 0;
}

.footer-legal li+li::before {
   content: "/";
   color: rgba(255, 255, 255, 0.3);
   margin: 0 10px;
}

.footer-socials {
   display: flex;
   gap: 10px;
   align-items: center;
}

.footer-socials a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.7);
   font-size: 15px;
   text-decoration: none;
   transition: all 0.25s ease;
}

.footer-socials a:hover {
   background: var(--btn);
   color: var(--navy);
   border-color: var(--btn);
   transform: translateY(-2px);
}

@media (max-width:991px) {
   .footer-hero {
      padding: 90px 0 80px;
   }

   .footer-hero-logo {
      max-height: 100px;
      margin-bottom: 32px;
   }

   .footer-links {
      padding: 60px 0 40px;
   }

   .footer-bottom-grid {
      justify-content: center;
      text-align: center;
   }

   .footer-brand {
      flex-direction: column;
      gap: 8px;
   }

   .footer-legal {
      justify-content: center;
      gap: 20px;
   }
}

/* Footer hero — keep generous space below the "Get a Free Consultation" button on mobile so it doesn't touch the section's bottom border. Body prefix beats the sitewide hero sweep which sets 32px bottom. */
@media (max-width:575px) {
   body .footer-hero {
      padding-top: 36px !important;
      padding-bottom: 64px !important;
   }

    body .footer-hero .footer-hero-cta, body .footer-hero .btn-cta, body .footer-hero .footer-cta {
        margin-bottom: 12px;
        padding: 12px 30px;
    }
}

@media (max-width:575px) {

   /* Stack legal links vertically on small phones — the "/" separators leak to the start of a wrapped line because they're ::before pseudos on the next <li>. Drop them entirely and stack instead. */
   .footer-legal {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
   }

   .footer-legal ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 0;
      margin: 0;
      width: 100%;
   }

   .footer-legal li+li::before {
      content: none;
      margin: 0;
   }

   .footer-legal li {
      width: 100%;
      justify-content: center;
   }

   .footer-legal a {
      font-size: 14px;
   }
}

/* ========================== FOOTER (legacy) ========================== */
.site-footer {
   background: var(--navy-deep);
   color: #94a3b8;
   padding: 70px 0 30px;
}

.site-footer h5 {
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 15px;
   margin-bottom: 16px;
   letter-spacing: 0;
}

.site-footer ul li {
   margin-bottom: 10px;
}

.site-footer a {
   color: #94a3b8;
   font-size: 14px;
}

.site-footer a:hover {
   color: var(--orange);
}

.footer-desc {
   font-size: 14px;
   line-height: 1.6;
   margin-top: 12px;
   max-width: 380px;
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   font-size: 13px;
   color: #64748b;
}

/* ========================== RESPONSIVE ========================== */
@media (max-width:991px) {
   .hero-nav .navbar-collapse {
      background: var(--navy-deep);
      border-radius: 0;
      padding: 0;
      margin-top: 0px;
   }

   div#mainNav .drawer-header {
      width: 100%;
      margin: 0 !important;
   }

   .hero-nav .nav-phone {
      padding: 6px 0;
   }

   .hero-circle {
      width: 320px;
      height: 320px;
   }

   .chat-bubble {
      min-width: 200px;
   }

   .section {
      padding: var(--sec-py-md) 0;
   }

   .hero-content {
      padding: 40px 0 60px;
   }

   .final-cta {
      padding: 60px 24px;
   }

   .stats-bar {
      padding: 40px 20px;
   }
}

@media (max-width:575px) {
   .hero-circle {
      width: 260px;
      height: 260px;
   }

   .chat-bubble {
      min-width: 180px;
      font-size: 12px;
      padding: 10px 14px;
   }

   .chat-bubble-1 {
      top: 0;
      left: -10px;
   }

   .chat-bubble-2 {
      top: 20%;
      right: -10px;
   }

   .hero-title {
      font-size: 38px;
   }
}

/* ========================================================= OUR WORK — HERO BANNER + Swiper coverflow portfolio ========================================================= */
/* Same background treatment as homepage .hero-wrap */
.ourwork-hero {
   position: relative;
   padding: 90px 0 0;
   background-color: var(--navy);
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI4MDMiIHZpZXdCb3g9IjAgMCAxOTIwIDgwMyI+DQogIDxkZWZzPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIj4NCiAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMTM1NyIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMTM1NyIgd2lkdGg9IjE5MjAiIGhlaWdodD0iODAzIiBmaWxsPSIjZmZmIiBzdHJva2U9IiM3MDcwNzAiIHN0cm9rZS13aWR0aD0iMSIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIwLjUiIHgyPSIwLjUiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+DQogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwOTEwMmUiLz4NCiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzRmNWM5MyIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtMiIgeDE9IjAuNSIgeDI9IjAuNSIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzA5MTAyZSIvPg0KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjIyYTRiIi8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgPC9kZWZzPg0KICA8ZyBpZD0iTWFza19Hcm91cF8xMTIiIGRhdGEtbmFtZT0iTWFzayBHcm91cCAxMTIiIGNsaXAtcGF0aD0idXJsKCNjbGlwLXBhdGgpIj4NCiAgICA8ZyBpZD0iR3JvdXBfMTA1MCIgZGF0YS1uYW1lPSJHcm91cCAxMDUwIj4NCiAgICAgIDxnIGlkPSJHcm91cF8xMDQ4IiBkYXRhLW5hbWU9Ikdyb3VwIDEwNDgiPg0KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzIiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDIiIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjgwMyIgZmlsbD0iIzA5MTAyZSIvPg0KICAgICAgICA8Y2lyY2xlIGlkPSJFbGxpcHNlXzUiIGRhdGEtbmFtZT0iRWxsaXBzZSA1IiBjeD0iMzk3LjUiIGN5PSIzOTcuNSIgcj0iMzk3LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjEgMzMyKSIgb3BhY2l0eT0iMC4zMDUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50KSIvPg0KICAgICAgPC9nPg0KICAgICAgPGcgaWQ9Ikdyb3VwXzEwNDkiIGRhdGEtbmFtZT0iR3JvdXAgMTA0OSI+DQogICAgICAgIDxjaXJjbGUgaWQ9IkVsbGlwc2VfMTQ0NyIgZGF0YS1uYW1lPSJFbGxpcHNlIDE0NDciIGN4PSIzOTcuNSIgY3k9IjM5Ny41IiByPSIzOTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA0NyAtMjg5KSIgb3BhY2l0eT0iMC4zMDUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50LTIpIi8+DQogICAgICA8L2c+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg==);
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   color: #fff;
   overflow: visible;
}

.owh-overlay {
   display: none;
}

/* not needed with homepage bg */
.ourwork-hero>.container {
   position: relative;
   z-index: 3;
}

.owh-head {
   max-width: 720px;
   margin: 0 auto;
   color: #fff;
   text-align: center;
}

.owh-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 14px;
   background: rgba(9, 16, 46, 0.4);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.22);
   border-radius: 999px;
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 2.88px;
   text-transform: uppercase;
   margin-bottom: 18px;
}

.owh-eyebrow i {
   color: var(--btn);
   font-size: 13px;
}

.owh-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 5vw, 88px);
   line-height: 0.95;
   letter-spacing: -0.48px;
   color: #ffffff;
   margin: 0 0 16px;
   text-shadow: 0 4px 30px rgba(9, 16, 46, 0.25);
}

.owh-sub {
   font-size: 17px;
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.55;
   max-width: 560px;
   margin: 0 auto;
   text-shadow: 0 2px 16px rgba(9, 16, 46, 0.3);
}

/* Portfolio strip — slides LEFT continuously (pure CSS marquee, like homepage) */
.owh-strip {
   position: relative;
   z-index: 3;
   margin-top: 70px;
   margin-bottom: -260px;
   overflow: hidden;
   padding: 30px 0 40px;
   mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.owh-strip-track {
   display: flex;
   align-items: center;
   gap: 20px;
   width: max-content;
   animation: owh-strip-slide 60s linear infinite;
   will-change: transform;
}

.owh-strip:hover .owh-strip-track {
   animation-play-state: paused;
}

@keyframes owh-strip-slide {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

/* Card base — standard size */
.owh-card {
   flex-shrink: 0;
   display: block;
   width: 380px;
   height: 320px;
   border-radius: 20px;
   overflow: hidden;
   background: #fff;
   border: 5px solid #ffffff;
   box-shadow: 0 24px 50px rgba(9, 16, 46, 0.35);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.owh-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 32px 64px rgba(9, 16, 46, 0.45);
   z-index: 5;
}

.owh-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   display: block;
}

/* Featured BIG card — every 4th is larger */
.owh-card-big {
   width: 560px;
   height: 440px;
   border-width: 6px;
   border-radius: 24px;
   box-shadow: 0 36px 72px rgba(9, 16, 46, 0.5), 0 0 0 1px rgba(122, 204, 13, 0.28);
}

.ourwork-hero+* {
   padding-top: 280px !important;
}

@media (max-width:1200px) {
   .owh-card {
      width: 320px;
      height: 270px;
   }

   .owh-card-big {
      width: 460px;
      height: 370px;
   }

   .owh-strip {
      margin-bottom: -220px;
   }

   .ourwork-hero+* {
      padding-top: 240px !important;
   }
}

@media (max-width:991px) {
   .ourwork-hero {
      padding-top: 70px;
   }

   .owh-strip {
      margin-top: 0px;
      margin-bottom: -170px;
   }

   .owh-card {
      width: 260px;
      height: 220px;
      border-width: 4px;
   }

   .owh-card-big {
      width: 260px;
      height: 220px;
   }

   .ourwork-hero+* {
      padding-top: 190px !important;
   }
}

@media (max-width:640px) {
   .owh-strip {
      margin-bottom: -110px;
      padding: 20px 0 28px;
   }

   .owh-strip-track {
      gap: 12px;
      animation-duration: 45s;
   }

   .owh-card {
      width: 180px;
      height: 140px;
      border-width: 3px;
      border-radius: 14px;
   }

   .owh-card-big {
      width: 180px;
      height: 140px;
      border-radius: 14px;
   }

   .ourwork-hero+* {
      padding-top: 130px !important;
   }
}

@media (prefers-reduced-motion:reduce) {
   .owh-strip-track {
      animation: none !important;
   }
}

/* ========================================================= OUR WORK — BEST WORKS SECTION (split folder-tab cards) ========================================================= */
.ourwork-best {
   background: var(--navy);
   padding: var(--sec-py-lg) 0;
   position: relative;
}

@media (max-width:991px) {}

@media (max-width:575px) {
   .ourwork-best {
      padding: var(--sec-py-sm) 0;
   }
}

/* ========================================================= OUR WORK — PORTFOLIO (sticky sidebar + grid + pagination) — LIGHT ========================================================= */
.ourwork-portfolio {
   background: #ffffff;
   padding: var(--sec-py-lg) 0;
   color: var(--navy);
   position: relative;
}

@media (prefers-reduced-motion:reduce) {}

/* ---- Responsive ---- */
@media (max-width:991px) {
   .owp-layout {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .owp-sidebar {
      position: static;
   }

   .owp-sidebar-inner {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
   }

   .owp-filter-group {
      flex: 1 1 220px;
      border-bottom: 0;
   }

   .owp-sidebar-cta {
      flex: 1 1 100%;
   }

   .owp-page {
      width: 48px;
      height: 48px;
      font-size: 14px;
   }

   .owp-pagination {
      gap: 10px;
   }
}

@media (max-width:640px) {
   .ourwork-portfolio {
      padding: var(--sec-py-sm) 0;
   }
}

/* ========================================================= OUR WORK — WHY CHOOSE US + FORM (split, white bg) ========================================================= */
.ourwork-why {
   position: relative;
   background: linear-gradient(180deg, #e4e8f1 0%, #eef1f7 60%, #f1f4f9 100%);
   padding: var(--sec-py-lg) 0;
   overflow: hidden;
}

.ourwork-why>.container {
   position: relative;
   z-index: 2;
}

@media (max-width:991px) {
   .ourwork-why {
      padding: var(--sec-py-md) 0;
   }
}

@media (max-width:575px) {}

/* ========================================================= OUR WORK — FEATURED WORK SHOWCASE (dark + grid + 3 mockups) ========================================================= */
.ourwork-feature {
   position: relative;
   background: #090e28;
   padding: var(--sec-py-lg) 0;
   overflow: hidden;
   color: #fff;
}

/* Subtle grid pattern backdrop */
.owf-grid-bg {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: 60px 60px;
   background-position: center;
   mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
   -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 90%);
   pointer-events: none;
}

/* Green atmospheric glows */
.owf-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(50px);
   pointer-events: none;
}

.owf-glow-a {
   width: 520px;
   height: 520px;
   top: -180px;
   left: -140px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.14), transparent 65%);
}

.owf-glow-b {
   width: 460px;
   height: 460px;
   bottom: -140px;
   right: -120px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.1), transparent 65%);
}

.ourwork-feature>.container {
   position: relative;
   z-index: 2;
}

/* Heading block */
.owf-head {
   max-width: 780px;
   margin: 0 auto 70px;
}

.owf-eyebrow {
   display: inline-block;
   margin-bottom: 10px;
   color: var(--btn);
}

.owf-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(30px, 4.5vw, 58px);
   line-height: 1.2;
   letter-spacing: -0.32px;
   color: #ffffff;
   margin: 0 0 16px;
}

.owf-sub {
   color: rgba(255, 255, 255, 0.7);
   font-size: 17px;
   line-height: 1.6;
   max-width: 600px;
   margin: 0 auto;
}

/* 6 website mockups — BIG spans 2 rows + 2 cols, smalls are 1×1 */
.owf-mockups {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 240px;
   gap: 28px;
   max-width: 1200px;
   margin: 0 auto;
}

/* Block 1 (rows 1-2): BIG_1 left (2 cols × 2 rows), small_1 + small_2 stacked right */
.owf-mockup:nth-child(1) {
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
}

.owf-mockup:nth-child(2) {
   grid-column: 3;
   grid-row: 1;
}

.owf-mockup:nth-child(3) {
   grid-column: 3;
   grid-row: 2;
}

/* Block 2 (rows 3-4): small_3 + small_4 stacked left, BIG_2 right (2 cols × 2 rows) */
.owf-mockup:nth-child(4) {
   grid-column: 1;
   grid-row: 3;
}

.owf-mockup:nth-child(5) {
   grid-column: 1;
   grid-row: 4;
}

.owf-mockup:nth-child(6) {
   grid-column: 2 / span 2;
   grid-row: 3 / span 2;
}

.owf-mockup {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   color: #fff;
   min-height: 0;
}

.owf-mockup-frame {
   width: 100%;
   flex: 1;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
   background: #0b1436;
   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.35s ease;
}

.owf-mockup-frame img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
}

.owf-mockup-label {
   margin-top: 22px;
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 4.16px;
   text-transform: uppercase;
   color: #ffffff;
   transition: color 0.25s ease;
}

.owf-mockup:hover .owf-mockup-frame {
   transform: translateY(-8px);
   border-color: rgba(122, 204, 13, 0.4);
   box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(122, 204, 13, 0.3);
}

.owf-mockup:hover .owf-mockup-label {
   color: var(--btn);
}

@media (max-width:991px) {
   .ourwork-feature {
      padding: var(--sec-py-md) 0;
   }

   .owf-head {
      margin-bottom: 50px;
   }

   .owf-mockups {
      gap: 20px;
      grid-auto-rows: 190px;
   }

   .owf-mockup-label {
      font-size: 12px;
      margin-top: 12px;
   }
}

@media (max-width:640px) {
   .ourwork-feature {
      padding: var(--sec-py-sm) 0;
   }

   .owf-mockups {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
      gap: 28px;
      max-width: 440px;
   }

   /* On mobile every mockup is 1 col × 1 row */
   .owf-mockup:nth-child(1),
   .owf-mockup:nth-child(2),
   .owf-mockup:nth-child(3),
   .owf-mockup:nth-child(4),
   .owf-mockup:nth-child(5),
   .owf-mockup:nth-child(6) {
      grid-column: 1;
      grid-row: auto;
   }

   .owf-mockup-frame {
      aspect-ratio: 4 / 3;
      min-height: 0;
      flex: 0 0 auto;
   }

   .owf-grid-bg {
      background-size: 40px 40px;
   }
}

/* ========================================================= BLOG — HEADER BANNER (AI portrait left, title/text right) ========================================================= */
.blog-hero {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   padding: clamp(6rem, 11vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
   background: radial-gradient(120% 100% at 50% 0%, #1a2050 0%, #09102e 45%, #050717 100%);
   color: #fff;
   text-align: center;
}

/* Ambient glow */
.blog-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(38rem 30rem at 18% 12%, rgba(122, 204, 13, 0.18), transparent 65%), radial-gradient(34rem 26rem at 82% 28%, rgba(79, 92, 147, 0.42), transparent 70%);
   pointer-events: none;
   z-index: 0;
}

/* Subtle masked grid */
.blog-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
   background-size: 64px 64px;
   -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 80%);
   mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 80%);
   pointer-events: none;
   z-index: 0;
}

.blog-hero>.container {
   position: relative;
   z-index: 2;
}

/* ---- Galaxy stars on the right half (lightweight — only transform/opacity) ---- */
.blog-hero-stars {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: hidden;
   z-index: 1;
}

.bhs-star {
   position: absolute;
   display: block;
   border-radius: 50%;
   background: var(--btn);
   opacity: 0;
   animation: bhs-twinkle 4s ease-in-out infinite;
   will-change: transform, opacity;
}

/* Size + position + timing per star (hand-placed for nice distribution) */
.bhs-star-1 {
   top: 8%;
   left: 14%;
   width: 5px;
   height: 5px;
   animation-delay: 0s;
}

.bhs-star-2 {
   top: 22%;
   left: 68%;
   width: 3px;
   height: 3px;
   animation-delay: 0.5s;
   background: #fff;
}

.bhs-star-3 {
   top: 38%;
   left: 30%;
   width: 6px;
   height: 6px;
   animation-delay: 1s;
}

.bhs-star-4 {
   top: 54%;
   left: 80%;
   width: 4px;
   height: 4px;
   animation-delay: 1.5s;
   background: #fff;
}

.bhs-star-5 {
   top: 68%;
   left: 18%;
   width: 5px;
   height: 5px;
   animation-delay: 2s;
}

.bhs-star-6 {
   top: 12%;
   left: 48%;
   width: 3px;
   height: 3px;
   animation-delay: 2.5s;
   background: #fff;
}

.bhs-star-7 {
   top: 80%;
   left: 55%;
   width: 4px;
   height: 4px;
   animation-delay: 3s;
}

.bhs-star-8 {
   top: 30%;
   left: 88%;
   width: 5px;
   height: 5px;
   animation-delay: 0.8s;
}

.bhs-star-9 {
   top: 62%;
   left: 42%;
   width: 3px;
   height: 3px;
   animation-delay: 1.8s;
   background: #fff;
}

.bhs-star-10 {
   top: 88%;
   left: 74%;
   width: 4px;
   height: 4px;
   animation-delay: 2.8s;
}

@keyframes bhs-twinkle {

   0%,
   100% {
      opacity: 0.15;
      transform: scale(0.6);
   }

   50% {
      opacity: 1;
      transform: scale(1.3);
   }
}

/* Soft glow on brand-green stars only (skip on white ones to keep render cost low) */
.bhs-star-1,
.bhs-star-3,
.bhs-star-5,
.bhs-star-7,
.bhs-star-8,
.bhs-star-10 {
   box-shadow: 0 0 8px rgba(122, 204, 13, 0.7);
}

/* Shooting stars — 2 only, minimal animation */
.bhs-shoot {
   position: absolute;
   height: 1.5px;
   width: 70px;
   background: linear-gradient(90deg, transparent, rgba(122, 204, 13, 0.85), rgba(255, 255, 255, 0.6));
   border-radius: 2px;
   opacity: 0;
   transform-origin: left center;
   will-change: transform, opacity;
}

.bhs-shoot-1 {
   top: 20%;
   left: 20%;
   transform: rotate(18deg) translateX(0);
   animation: bhs-shoot-fly 6s ease-out infinite;
   animation-delay: 1.2s;
}

.bhs-shoot-2 {
   top: 58%;
   left: 40%;
   transform: rotate(22deg) translateX(0);
   animation: bhs-shoot-fly 7s ease-out infinite;
   animation-delay: 4s;
}

@keyframes bhs-shoot-fly {
   0% {
      opacity: 0;
      transform: rotate(18deg) translateX(0) scaleX(0.3);
   }

   5% {
      opacity: 0.9;
      transform: rotate(18deg) translateX(40px) scaleX(1);
   }

   20% {
      opacity: 0;
      transform: rotate(18deg) translateX(240px) scaleX(0.4);
   }

   100% {
      opacity: 0;
      transform: rotate(18deg) translateX(240px) scaleX(0.4);
   }
}

/* Flying rocket — diagonal trip from bottom-left to top-right every 9s */
.bhs-rocket {
   position: absolute;
   bottom: 8%;
   /* start near the bottom edge */
   left: 0;
   /* start at the left of the stars area */
   font-size: 34px;
   color: var(--btn);
   filter: drop-shadow(0 0 10px rgba(122, 204, 13, 0.6));
   transform: rotate(-45deg) translate(0, 0);
   transform-origin: center center;
   will-change: transform, opacity;
   opacity: 0;
   animation: bhs-rocket-fly 9s ease-in-out infinite;
   animation-delay: 2s;
}

.bhs-rocket-trail {
   position: absolute;
   top: 50%;
   right: 100%;
   width: 90px;
   height: 3px;
   margin-top: -1.5px;
   background: linear-gradient(90deg, transparent, rgba(122, 204, 13, 0.6), rgba(255, 255, 255, 0.85));
   border-radius: 3px;
   opacity: 0.85;
}

/* Bottom-left → top-right diagonal. Rotate -45deg means rocket points up-right. */
@keyframes bhs-rocket-fly {
   0% {
      opacity: 0;
      transform: rotate(-45deg) translate(0, 0);
   }

   8% {
      opacity: 1;
      transform: rotate(-45deg) translate(60px, -60px);
   }

   90% {
      opacity: 1;
      transform: rotate(-45deg) translate(760px, -760px);
   }

   96% {
      opacity: 0;
      transform: rotate(-45deg) translate(820px, -820px);
   }

   100% {
      opacity: 0;
      transform: rotate(-45deg) translate(820px, -820px);
   }
}

/* Only show the star/rocket FX on laptops and up (≥1280px). Hidden on smaller devices. */
@media (max-width:1279px) {
   .blog-hero-stars {
      display: none;
   }
}

@media (prefers-reduced-motion:reduce) {

   .bhs-star,
   .bhs-shoot,
   .bhs-rocket {
      animation: none !important;
      opacity: 0;
   }
}

/* ========================================================= BLOG — NEWSLETTER STRIP (short dark ribbon) ========================================================= */
.blog-newsletter {
   position: relative;
   background: radial-gradient(ellipse at 50% 0%, rgba(122, 204, 13, 0.1) 0%, transparent 55%), linear-gradient(180deg, #0b1436 0%, #09102e 100%);
   padding: var(--sec-py-sm) 0;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   overflow: hidden;
}

.bnl-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(40px);
   pointer-events: none;
}

.bnl-orb-a {
   width: 340px;
   height: 340px;
   top: -140px;
   left: -80px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.18), transparent 65%);
}

.bnl-orb-b {
   width: 300px;
   height: 300px;
   bottom: -120px;
   right: -60px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.12), transparent 65%);
}

.blog-newsletter>.container {
   position: relative;
   z-index: 2;
}

.bnl-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   flex-wrap: wrap;
}

/* LEFT: icon + text */
.bnl-left {
   display: flex;
   align-items: center;
   gap: 18px;
   flex: 1 1 auto;
   min-width: 0;
}

.bnl-icon {
   flex-shrink: 0;
   width: 54px;
   height: 54px;
   border-radius: 14px;
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.2), rgba(122, 204, 13, 0.06));
   border: 1px solid rgba(122, 204, 13, 0.35);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   box-shadow: 0 0 24px rgba(122, 204, 13, 0.25);
}

.bnl-text {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.bnl-eyebrow {
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 2.88px;
   text-transform: uppercase;
}

.bnl-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(18px, 1.8vw, 24px);
   line-height: 1.25;
   letter-spacing: -0.16px;
   color: #fff;
   margin: 0;
}

.bnl-title strong {
   color: var(--btn);
   font-weight: 700;
}

/* RIGHT: form */
.bnl-form {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-shrink: 0;
   min-width: 360px;
}

/* GF structural wrappers collapse visually so the inline flex layout is preserved */
.bnl-form .gform_body,
.bnl-form .gform-body,
.bnl-form .gform_fields,
.bnl-form .gfield,
.bnl-form .gform_footer {
   display: contents;
}

.bnl-form .gfield_label,
.gform-field-label.screen-reader-text {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

.bnl-input-wrap {
   position: relative;
   flex: 1;
}

.bnl-input-wrap>i {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: rgba(255, 255, 255, 0.45);
   font-size: 15px;
   pointer-events: none;
   transition: color 0.2s;
}

.bnl-input-wrap input {
   width: 100%;
   padding: 13px 16px 13px 42px;
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   color: #fff;
   background: rgba(255, 255, 255, 0.06);
   border: 1.5px solid rgba(255, 255, 255, 0.12);
   border-radius: 999px;
   outline: none;
   transition: all 0.2s ease;
}

.bnl-input-wrap input::placeholder {
   color: rgba(255, 255, 255, 0.4);
}

.bnl-input-wrap input:focus {
   background: rgba(255, 255, 255, 0.08);
   border-color: var(--btn);
   box-shadow: 0 0 0 4px rgba(122, 204, 13, 0.12);
}

.bnl-input-wrap:focus-within>i {
   color: var(--btn);
}

/* ============================================================ .bnl-form-wrap fallback — applies the same newsletter styling to whatever GF renders, without depending on filter-based class injection. The wrapper is placed by template-parts/sections/ blog-newsletter.php around the gravity_form() output. ============================================================ */
.bnl-form-wrap {
   flex: 1;
   min-width: 360px;
}

.bnl-form-wrap form,
.bnl-form-wrap .gform_wrapper,
.bnl-form-wrap .gform_legacy_markup_wrapper {
   display: flex !important;
   gap: 10px;
   align-items: center;
   width: 100%;
   margin: 0;
   padding: 0;
}

.bnl-form-wrap .gform_body,
.bnl-form-wrap .gform-body,
.bnl-form-wrap .gform_fields,
.bnl-form-wrap .gfield,
.bnl-form-wrap .gform_footer {
   display: contents !important;
}

.bnl-form-wrap .gfield_label,
.bnl-form-wrap .gform-field-label,
.bnl-form-wrap .screen-reader-text {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0 0 0 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

/* Keep validation messages visible. Show them as a small red line below the input, breaking out of the flex row by spanning the wrapper width. */
.bnl-form-wrap .gfield_validation_message,
.bnl-form-wrap .validation_message,
.bnl-form-wrap .gfield_description.validation_message {
   display: block !important;
   position: static !important;
   width: 100% !important;
   height: auto !important;
   padding: 8px 18px 0 !important;
   margin: 6px 0 0 !important;
   overflow: visible !important;
   clip: auto !important;
   white-space: normal !important;
   background: transparent !important;
   border: 0 !important;
   color: #ff7b86 !important;
   font-size: 12px !important;
   font-weight: 600 !important;
   letter-spacing: 0.2px;
   flex-basis: 100%;
   order: 99;
}

/* Top-of-form summary GF adds when validation fails — show it too. */
.bnl-form-wrap .gform_validation_errors {
   display: block !important;
   background: rgba(255, 123, 134, 0.08) !important;
   border: 1px solid rgba(255, 123, 134, 0.4) !important;
   color: #ff7b86 !important;
   border-radius: 10px !important;
   padding: 10px 14px !important;
   font-size: 12px !important;
   font-weight: 600 !important;
   margin: 0 0 10px !important;
   flex-basis: 100%;
}

.bnl-form-wrap .gform_validation_errors a {
   color: #ff7b86 !important;
   text-decoration: underline;
}

.bnl-form-wrap .ginput_container_email {
   position: relative;
   flex: 1;
}

.bnl-form-wrap .ginput_container_email::before {
   content: "\f32c";
   /* bi-envelope-fill — Bootstrap Icons unicode */
   font-family: "bootstrap-icons" !important;
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: rgba(255, 255, 255, 0.45);
   font-size: 15px;
   pointer-events: none;
   z-index: 1;
}

.bnl-form-wrap .ginput_container_email>i {
   /* Hide the legacy injected <i> if a filter already added it — the ::before above is the canonical source of truth. */
   display: none !important;
}

.bnl-form-wrap input[type="email"],
.bnl-form-wrap input[type="text"],
.bnl-form-wrap .ginput_container_email input,
.bnl-form-wrap .gfield_error input,
.bnl-form-wrap .gform_validation_error input {
   width: 100% !important;
   padding: 13px 16px 13px 42px !important;
   font-family: 'Inter', sans-serif !important;
   font-size: 14px !important;
   color: #fff !important;
   background: rgba(255, 255, 255, 0.06) !important;
   border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
   border-radius: 999px !important;
   outline: none !important;
   transition: all 0.2s ease !important;
   box-shadow: none !important;
   -webkit-text-fill-color: #fff !important;
   caret-color: #fff !important;
}

.bnl-form-wrap input::placeholder,
.bnl-form-wrap input::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.45) !important;
   opacity: 1 !important;
}

.bnl-form-wrap input:focus {
   background: rgba(255, 255, 255, 0.08) !important;
   border-color: var(--btn) !important;
   box-shadow: 0 0 0 4px rgba(122, 204, 13, 0.12) !important;
}

.bnl-form-wrap .ginput_container_email:focus-within::before {
   color: var(--btn);
}

/* Error state: turn the border red but keep the dark translucent bg. */
.bnl-form-wrap .gfield_error input {
   border-color: #ff7b86 !important;
   box-shadow: 0 0 0 4px rgba(255, 123, 134, 0.18) !important;
}

/* Browser autofill: Chrome/Edge/Safari paint a yellow fill + dark text by default. Force the dark translucent style instead. */
.bnl-form-wrap input:-webkit-autofill,
.bnl-form-wrap input:-webkit-autofill:hover,
.bnl-form-wrap input:-webkit-autofill:focus,
.bnl-form-wrap input:-webkit-autofill:active {
   -webkit-text-fill-color: #fff !important;
   -webkit-box-shadow: 0 0 0 1000px rgba(20, 28, 60, 0.95) inset !important;
   caret-color: #fff !important;
   transition: background-color 9999s ease-in-out 0s;
}

.bnl-form-wrap .gform_footer {
   display: contents !important;
}

.bnl-form-wrap .gform_button,
.bnl-form-wrap [type="submit"] {
   display: inline-flex !important;
   align-items: center !important;
   gap: 10px !important;
   padding: 6px 8px 6px 20px !important;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%) !important;
   color: var(--navy) !important;
   border: 0 !important;
   border-radius: 999px !important;
   font-family: 'Inter', sans-serif !important;
   font-weight: 800 !important;
   font-size: 14px !important;
   letter-spacing: 0.32px !important;
   cursor: pointer;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
   box-shadow: 0 8px 20px rgba(122, 204, 13, 0.4) !important;
   white-space: nowrap !important;
   width: auto !important;
   height: auto !important;
   min-width: 0 !important;
   text-shadow: none !important;
}

.bnl-form-wrap .gform_button:hover,
.bnl-form-wrap [type="submit"]:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 12px 26px rgba(122, 204, 13, 0.55) !important;
}

@media (max-width:575px) {
   .bnl-form-wrap {
      min-width: 100% !important;
   }

   .bnl-form-wrap form,
   .bnl-form-wrap .gform_wrapper,
   .bnl-form-wrap .gform_legacy_markup_wrapper {
      flex-direction: column !important;
      align-items: stretch !important;
   }

   /* Input wrapper + input itself: full row width so they match the button */
   .bnl-form-wrap .ginput_container_email {
      width: 100% !important;
      flex: 0 0 auto !important;
   }

   .bnl-form-wrap input[type="email"],
   .bnl-form-wrap input[type="text"] {
      width: 100% !important;
      height: 52px !important;
      box-sizing: border-box !important;
   }

   .bnl-form-wrap .gform_button,
   .bnl-form-wrap [type="submit"] {
      width: 100% !important;
      height: 52px !important;
      justify-content: center !important;
      padding: 0 18px !important;
      box-sizing: border-box !important;
   }
}

.bnl-submit {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 6px 8px 6px 20px;
   background: linear-gradient(135deg, var(--btn) 0%, #68b10a 100%);
   color: var(--navy);
   border: 0;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 14px;
   letter-spacing: 0.32px;
   cursor: pointer;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 8px 20px rgba(122, 204, 13, 0.4);
   white-space: nowrap;
}

.bnl-submit:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 26px rgba(122, 204, 13, 0.55);
}

.bnl-submit-arrow {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   transition: transform 0.25s ease;
}

.bnl-submit:hover .bnl-submit-arrow {
   transform: translateX(3px);
}

.bnl-reassure {
   margin: 18px 0 0;
   text-align: center;
   color: rgba(255, 255, 255, 0.5);
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.bnl-reassure i {
   color: var(--btn);
}

@media (max-width:900px) {
   .blog-newsletter {
      padding: var(--sec-py-sm) 0;
   }

   .bnl-inner {
      gap: 20px;
   }

   .bnl-left {
      flex: 1 1 100%;
      justify-content: center;
      text-align: left;
   }

   .bnl-form {
      min-width: 100%;
   }
}

@media (max-width:575px) {
   .bnl-icon {
      width: 44px;
      height: 44px;
      font-size: 20px;
   }

   .bnl-title {
      font-size: 17px;
   }

   .bnl-form {
      flex-direction: column;
      gap: 10px;
   }

   .bnl-form>* {
      width: 100%;
   }

   .bnl-submit {
      justify-content: center;
      padding: 12px 18px;
   }
}

/* ========================================================= BLOG LIST — featured post + grid + pagination ========================================================= */
.blog-list {
   background: #ffffff;
   padding: var(--sec-py-lg) 0;
}

/* --- FEATURED BIG POST --- */
.blog-featured {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 0;
   background: #ffffff;
   border: 1px solid rgba(9, 16, 46, 0.08);
   border-radius: 24px;
   overflow: hidden;
   text-decoration: none;
   color: var(--navy);
   box-shadow: 0 16px 40px rgba(9, 16, 46, 0.06);
   margin-bottom: 70px;
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.blog-featured:hover {
   transform: translateY(-4px);
   border-color: rgba(122, 204, 13, 0.35);
   box-shadow: 0 24px 54px rgba(9, 16, 46, 0.12), 0 0 0 1px rgba(122, 204, 13, 0.15);
   color: var(--navy);
}

.blf-img {
   position: relative;
   aspect-ratio: 16 / 11;
   overflow: hidden;
   background: #0b1436;
}

.blf-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.5s ease;
}

.blog-featured:hover .blf-img img {
   transform: scale(1.04);
}

.blf-badge {
   position: absolute;
   top: 20px;
   left: 20px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   background: linear-gradient(135deg, var(--btn), #68b10a);
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 11.5px;
   font-weight: 800;
   letter-spacing: 2.24px;
   text-transform: uppercase;
   border-radius: 999px;
   box-shadow: 0 8px 20px rgba(122, 204, 13, 0.4);
}

.blf-badge i {
   font-size: 13px;
}

.blf-body {
   padding: 44px 44px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.blf-meta {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 16px;
   flex-wrap: wrap;
}

.blf-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 2.24px;
   text-transform: uppercase;
}

.blf-dot {
   color: rgba(9, 16, 46, 0.25);
}

.blf-time,
.blf-date {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: #94a3b8;
   font-family: 'Inter', sans-serif;
   font-size: 12.5px;
   font-weight: 500;
}

.blf-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: clamp(26px, 2.5vw, 36px);
   line-height: 1.15;
   letter-spacing: -0.16px;
   color: var(--navy);
   margin: 0 0 18px;
   transition: color 0.25s ease;
}

.blog-featured:hover .blf-title {
   color: var(--btn);
}

.blf-excerpt {
   color: #64748b;
   font-size: 15.5px;
   line-height: 1.65;
   margin: 0 0 28px;
}

.blf-author {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: auto;
   padding-top: 22px;
   border-top: 1px solid rgba(9, 16, 46, 0.08);
}

.blf-author-avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--navy), #1a2857);
   color: var(--btn);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   border: 2px solid rgba(122, 204, 13, 0.3);
   flex-shrink: 0;
}

.blf-author-meta {
   display: flex;
   flex-direction: column;
   flex: 1;
}

.blf-author-meta strong {
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 700;
}

.blf-author-meta span {
   color: #94a3b8;
   font-family: 'Inter', sans-serif;
   font-size: 12.5px;
}

.blf-arrow {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(9, 16, 46, 0.06);
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-featured:hover .blf-arrow {
   background: var(--btn);
   color: var(--navy);
   transform: rotate(-8deg) scale(1.06);
   box-shadow: 0 8px 18px rgba(122, 204, 13, 0.35);
}

/* --- REGULAR POSTS GRID --- */
.blog-grid-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-bottom: 30px;
}

.bl-card {
   display: flex;
   flex-direction: column;
   background: #ffffff;
   border: 1px solid rgba(9, 16, 46, 0.08);
   border-radius: 20px;
   overflow: hidden;
   text-decoration: none;
   color: var(--navy);
   box-shadow: 0 4px 14px rgba(9, 16, 46, 0.04);
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.bl-card:hover {
   transform: translateY(-6px);
   border-color: rgba(122, 204, 13, 0.35);
   box-shadow: 0 18px 44px rgba(9, 16, 46, 0.1), 0 0 0 1px rgba(122, 204, 13, 0.15);
   color: var(--navy);
}

.bl-card-img {
   position: relative;
   aspect-ratio: 16 / 10;
   overflow: hidden;
   background: #0b1436;
}

.bl-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.5s ease;
}

.bl-card:hover .bl-card-img img {
   transform: scale(1.06);
}

.bl-card-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 5px 11px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   color: var(--navy);
   font-family: 'Inter', sans-serif;
   font-size: 10.5px;
   font-weight: 800;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   border-radius: 999px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bl-card-badge i {
   font-size: 11px;
   color: var(--btn);
}

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

.bl-card-meta {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
}

.bl-card-tag {
   color: var(--btn);
   font-family: 'Inter', sans-serif;
   font-size: 11.5px;
   font-weight: 800;
   letter-spacing: 1.92px;
   text-transform: uppercase;
}

.bl-card-time {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: #94a3b8;
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   margin-left: auto;
}

.bl-card-title {
   font-family: "Publico Banner", "Fraunces", Georgia, serif;
   font-weight: 700;
   font-size: 18px;
   line-height: 1.25;
   letter-spacing: -0.16px;
   color: var(--navy);
   margin: 0 0 14px;
   transition: color 0.25s ease;
}

.bl-card:hover .bl-card-title {
   color: var(--btn);
}

.bl-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
   padding-top: 14px;
   border-top: 1px solid rgba(9, 16, 46, 0.06);
}

.bl-card-date {
   color: #94a3b8;
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 500;
}

.bl-card-arrow {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(9, 16, 46, 0.06);
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.bl-card:hover .bl-card-arrow {
   background: var(--btn);
   color: var(--navy);
   transform: rotate(-8deg) scale(1.1);
   box-shadow: 0 6px 14px rgba(122, 204, 13, 0.35);
}

/* --- RESPONSIVE --- */
@media (max-width:991px) {
   .blog-featured {
      grid-template-columns: 1fr;
      margin-bottom: 50px;
   }

   .blf-body {
      padding: 32px 28px 30px;
   }

   .blog-grid-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      margin-bottom: 14px;
   }

   .owf-sub {
      font-size: 16px;
   }
}

@media (max-width:575px) {
   .blog-list {
      padding: var(--sec-py-sm) 0;
   }

   .blog-grid-list {
      grid-template-columns: 1fr;
   }

   .blf-body {
      padding: 26px 22px 24px;
   }

   .blf-title {
      font-size: 24px;
   }
}

.blog-hero-content {
   max-width: 56rem;
   margin: 0 auto;
   padding: 0 1rem;
   text-align: center;
   position: relative;
   z-index: 2;
}

.blog-hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: .55rem;
   margin-bottom: 1.75rem;
   padding: .5rem 1.1rem;
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: #c5f07a;
   border: 1px solid rgba(122, 204, 13, .4);
   background: rgba(122, 204, 13, .08);
   border-radius: 100px;
}

.blog-hero-eyebrow::before {
   content: "";
   width: .45rem;
   height: .45rem;
   background: #7ACC0D;
   border-radius: 50%;
   box-shadow: 0 0 12px #7ACC0D;
}

.blog-hero-title {
   font-family: "Fraunces", "Publico Banner", Georgia, serif;
   font-weight: 700;
   font-size: clamp(2.6rem, 6.4vw, 5.5rem);
   line-height: 1.04;
   letter-spacing: -.025em;
   color: #fff;
   margin: 0 0 1.6rem;
}

/* Pin the accent span (whether .grad-dark or .grad-light) to a light lime gradient on this dark editorial hero — works regardless of which class the saved heading data uses. */
.blog-hero-title .grad-dark,
.blog-hero-title .grad-light {
   background: linear-gradient(135deg, #c5f07a 0%, #7ACC0D 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.blog-hero-sub {
   max-width: 38rem;
   margin: 0 auto;
   color: rgba(255, 255, 255, .68);
   font-size: clamp(1rem, 1.25vw, 1.15rem);
   line-height: 1.65;
}

/* Hide the playful rocket + shooters — too marketing-y for an editorial hero. */
.blog-hero .bhs-rocket,
.blog-hero .bhs-shoot {
   display: none !important;
}

/* Editorial SVG accents — left "note cards" + right "knowledge graph" flanking the centered headline. Subtle, decorative, hidden on mobile. */
.blog-hero-art {
   position: absolute;
   pointer-events: none;
   z-index: 1;
}

.blog-hero-art--left {
   top: 50%;
   left: clamp(-3rem, -1vw, 2.5rem);
   width: clamp(10rem, 14vw, 16rem);
   height: auto;
   transform: translateY(-50%);
   opacity: .7;
}

.blog-hero-art--right {
   top: 50%;
   right: clamp(-4rem, -2vw, 2rem);
   width: clamp(14rem, 22vw, 22rem);
   height: auto;
   transform: translateY(-50%);
   opacity: .6;
   filter: drop-shadow(0 0 30px rgba(122, 204, 13, .15));
}

@media (max-width:1199px) {
   .blog-hero-art--left {
      width: 10rem;
      opacity: .45;
   }

   .blog-hero-art--right {
      width: 13rem;
      opacity: .45;
   }
}

@media (max-width:991px) {
   .blog-hero-art {
      display: none;
   }
}

@media (max-width:991px) {

   /* Calmer ambient layer on tablet/mobile — fewer distractions */
   .blog-hero-stars {
      display: none;
   }
}

@media (max-width:640px) {
   .blog-hero-title {
      font-size: clamp(2rem, 8vw, 3rem);
   }

   .blog-hero-sub {
      font-size: .95rem;
   }
}

/* ========================================================== SINGLE-BLOG HERO BANNER — single background image with dark navy overlay + centered faded title/text ========================================================== */
.sbh-hero {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   min-height: 360px;
   padding: 60px 0 55px;
   display: flex;
   align-items: center;
   justify-content: center;
   /* Same navy + decorative circles SVG as the homepage .hero-wrap. Featured image inline-style on the section is intentionally NOT used so every blog post gets the consistent brand banner. */
   background-color: #09102e;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI4MDMiIHZpZXdCb3g9IjAgMCAxOTIwIDgwMyI+DQogIDxkZWZzPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIj4NCiAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMTM1NyIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMTM1NyIgd2lkdGg9IjE5MjAiIGhlaWdodD0iODAzIiBmaWxsPSIjZmZmIiBzdHJva2U9IiM3MDcwNzAiIHN0cm9rZS13aWR0aD0iMSIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIwLjUiIHgyPSIwLjUiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+DQogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwOTEwMmUiLz4NCiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzRmNWM5MyIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtMiIgeDE9IjAuNSIgeDI9IjAuNSIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzA5MTAyZSIvPg0KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjIyYTRiIi8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgPC9kZWZzPg0KICA8ZyBpZD0iTWFza19Hcm91cF8xMTIiIGRhdGEtbmFtZT0iTWFzayBHcm91cCAxMTIiIGNsaXAtcGF0aD0idXJsKCNjbGlwLXBhdGgpIj4NCiAgICA8ZyBpZD0iR3JvdXBfMTA1MCIgZGF0YS1uYW1lPSJHcm91cCAxMDUwIj4NCiAgICAgIDxnIGlkPSJHcm91cF8xMDQ4IiBkYXRhLW5hbWU9Ikdyb3VwIDEwNDgiPg0KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzIiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDIiIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjgwMyIgZmlsbD0iIzA5MTAyZSIvPg0KICAgICAgICA8Y2lyY2xlIGlkPSJFbGxpcHNlXzUiIGRhdGEtbmFtZT0iRWxsaXBzZSA1IiBjeD0iMzk3LjUiIGN5PSIzOTcuNSIgcj0iMzk3LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjEgMzMyKSIgb3BhY2l0eT0iMC4zMDUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50KSIvPg0KICAgICAgPC9nPg0KICAgICAgPGcgaWQ9Ikdyb3VwXzEwNDkiIGRhdGEtbmFtZT0iR3JvdXAgMTA0OSI+DQogICAgICAgIDxjaXJjbGUgaWQ9IkVsbGlwc2VfMTQ0NyIgZGF0YS1uYW1lPSJFbGxpcHNlIDE0NDciIGN4PSIzOTcuNSIgY3k9IjM5Ny41IiByPSIzOTcuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA0NyAtMjg5KSIgb3BhY2l0eT0iMC4zMDUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50LTIpIi8+DQogICAgICA8L2c+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg==) !important;
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
}

/* ----- dark navy overlay ----- */
.sbh-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: radial-gradient(ellipse at center, rgba(9, 16, 46, 0.55) 0%, rgba(9, 16, 46, 0.82) 55%, rgba(9, 16, 46, 0.94) 100%), linear-gradient(180deg, rgba(9, 16, 46, 0.35) 0%, rgba(9, 16, 46, 0.75) 100%);
}

/* ----- centered content (opacity / faded style) ----- */
.sbh-content {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: 920px;
   color: #fff;
}

.sbh-crumb {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: center;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.64px;
   text-transform: uppercase;
   padding: 7px 16px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   color: rgba(255, 255, 255, 0.85);
   margin-bottom: 14px;
}

.sbh-crumb a {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
   transition: color 0.2s ease;
}

.sbh-crumb a:hover {
   color: #7ACC0D;
}

.sbh-crumb a i {
   color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
}

.sbh-crumb-sep {
   font-size: 9px !important;
   color: rgba(255, 255, 255, 0.4) !important;
}

.sbh-crumb span {
   color: #7ACC0D;
   font-weight: 700;
}

.sbh-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 18px;
   border-radius: 999px;
   background: rgba(122, 204, 13, 0.14);
   border: 1px solid rgba(122, 204, 13, 0.35);
   color: #7ACC0D;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.92px;
   text-transform: uppercase;
   margin-bottom: 28px;
}

.sbh-eyebrow i {
   font-size: 14px;
}

.sbh-title {
   font-family: 'Publico Banner', 'Fraunces', serif;
   font-weight: 700;
   font-size: clamp(26px, 3.4vw, 38px);
   line-height: 1.2;
   letter-spacing: -0.32px;
   color: rgba(255, 255, 255, 0.95);
   margin: 0 0 14px;
   text-shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
}
i.bi.bi-headset {
    margin: 0 !important;
}
.sbh-sub {
   font-size: clamp(14px, 1.05vw, 16px);
   line-height: 1.55;
   color: rgba(255, 255, 255, 0.75);
   max-width: 720px;
   margin: 0 auto;
}

.sbh-meta {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
   padding: 14px 26px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

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

.sbh-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: linear-gradient(135deg, #7ACC0D, #5aa00a);
   color: #09102e;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
}

.sbh-author-info {
   display: flex;
   flex-direction: column;
   text-align: left;
   line-height: 1.25;
}

.sbh-author-info strong {
   color: #fff;
   font-size: 14px;
   font-weight: 700;
}

.sbh-author-info span {
   color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
}

.sbh-dot {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
}

.sbh-meta-item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 13px;
   font-weight: 500;
}

.sbh-meta-item i {
   color: #7ACC0D;
   font-size: 14px;
}

/* ----- responsive ----- */
@media (max-width:991px) {
   .sbh-hero {
      min-height: 320px;
      padding: 50px 0 45px;
   }
}

@media (max-width:767px) {
   .sbh-hero {
      min-height: 280px;
      padding: 40px 0 36px;
   }

   .sbh-sub {
      font-size: 14px;
   }
.hero-form-sub {
       margin-bottom: 10px;
}




}

@media (max-width:575px) {
   .sbh-hero {
      min-height: 260px;
      padding: 32px 0 32px;
   }

   .sbh-crumb {
      font-size: 10px;
      padding: 5px 12px;
      gap: 8px;
   }
}

/* ========================================================== RESPONSIVE — SINGLE BLOG LAYOUT ========================================================== */
@media (max-width:1199px) {
   .sbp-grid {
      gap: 44px;
      grid-template-columns: minmax(0, 1fr) 300px;
   }

   .sbp-article {
      padding: 48px 44px;
   }

   .sbp-quote {
      margin: 36px -12px;
      padding: 34px 40px 30px;
   }
}

@media (max-width:991px) {}

@media (max-width:767px) {}

@media (max-width:575px) {}

@keyframes tyOrbDrift {
   0% {
      transform: translate(0, 0) scale(1);
   }

   50% {
      transform: translate(30px, -20px) scale(1.08);
   }

   100% {
      transform: translate(-20px, 25px) scale(0.95);
   }
}

@keyframes tyStarTwinkle {

   0%,
   100% {
      opacity: 0.2;
      transform: scale(0.8);
   }

   50% {
      opacity: 1;
      transform: scale(1.3);
   }
}

@keyframes tyConfettiFall {
   0% {
      transform: translateY(-20px) rotate(0deg);
      opacity: 0;
   }

   8% {
      opacity: 0.9;
   }

   50% {
      transform: translateY(50vh) rotate(360deg);
      opacity: 0.85;
   }

   100% {
      transform: translateY(110vh) rotate(720deg);
      opacity: 0;
   }
}

@keyframes tyShapeFloat {

   0%,
   100% {
      transform: translate(0, 0) rotate(0deg);
   }

   50% {
      transform: translate(10px, -15px) rotate(180deg);
   }
}

@keyframes tyCheckIn {
   0% {
      opacity: 0;
      transform: scale(0.4) rotate(-12deg);
   }

   60% {
      opacity: 1;
      transform: scale(1.08) rotate(4deg);
   }

   100% {
      opacity: 1;
      transform: scale(1) rotate(0);
   }
}

@keyframes tyRingDraw {
   to {
      stroke-dashoffset: 0;
   }
}

@keyframes tyPulseOut {
   0% {
      transform: scale(1);
      opacity: 0.8;
   }

   100% {
      transform: scale(1.9);
      opacity: 0;
   }
}

@keyframes tyFadeUp {
   0% {
      opacity: 0;
      transform: translateY(24px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width:1199px) {}

@media (max-width:991px) {}

@media (max-width:767px) {}

@media (max-width:575px) {}

@keyframes nfOrbDrift {
   0% {
      transform: translate(0, 0) scale(1);
   }

   50% {
      transform: translate(-30px, 25px) scale(1.1);
   }

   100% {
      transform: translate(25px, -20px) scale(0.95);
   }
}

@keyframes nfTwinkle {

   0%,
   100% {
      opacity: 0.15;
      transform: scale(0.7);
   }

   50% {
      opacity: 1;
      transform: scale(1.4);
   }
}

@keyframes nfShootStar {
   0% {
      transform: translate(0, 0) rotate(-18deg);
      opacity: 0;
   }

   8% {
      opacity: 1;
   }

   60% {
      opacity: 1;
   }

   100% {
      transform: translate(120vw, 40vh) rotate(-18deg);
      opacity: 0;
   }
}

@keyframes nfRocketDrift {
   0% {
      transform: translate(0, 0) rotate(35deg);
      opacity: 0;
   }

   6% {
      opacity: 1;
   }

   94% {
      opacity: 1;
   }

   100% {
      transform: translate(120vw, -50vh) rotate(35deg);
      opacity: 0;
   }
}

@keyframes nfSatFloat {

   0%,
   100% {
      transform: translate(0, 0) rotate(-6deg);
   }

   50% {
      transform: translate(-14px, -20px) rotate(6deg);
   }
}

@keyframes nfBroadcastBlink {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.35;
   }
}

@keyframes nfDigitIn {
   0% {
      opacity: 0;
      transform: translateY(40px) scale(0.85);
   }

   100% {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

@keyframes nfDigitFloat {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-8px);
   }
}

@keyframes nfPlanetIn {
   0% {
      opacity: 0;
      transform: scale(0.4) rotate(-90deg);
   }

   100% {
      opacity: 1;
      transform: scale(1) rotate(0);
   }
}

@keyframes nfPlanetFloat {

   0%,
   100% {
      transform: translateY(0) rotate(0);
   }

   50% {
      transform: translateY(-10px) rotate(2deg);
   }
}

@keyframes nfRingRotate {
   from {
      transform: rotate(0);
   }

   to {
      transform: rotate(360deg);
   }
}

@keyframes nfFadeUp {
   0% {
      opacity: 0;
      transform: translateY(22px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width:1199px) {}

@media (max-width:991px) {}

@media (max-width:767px) {}

@media (max-width:575px) {}

/* ========================================================================= REDUCED MOTION — both pages ========================================================================= */
@media (prefers-reduced-motion:reduce) {

   .ty-orb,
   .ty-star,
   .ty-confetti,
   .ty-shape,
   .ty-check-pulse,
   .ty-check-pulse-2,
   .nf-orb,
   .nf-star,
   .nf-shoot,
   .nf-rocket,
   .nf-sat,
   .nf-digit,
   .nf-planet,
   .nf-planet-body,
   .nf-planet-ring,
   .nf-eyebrow i {
      animation: none !important;
   }

   .ty-check,
   .ty-eyebrow,
   .ty-title,
   .ty-sub,
   .ty-next-card,
   .ty-cta-row,
   .ty-social,
   .nf-eyebrow,
   .nf-title,
   .nf-sub,
   .nf-search,
   .nf-cta-row,
   .nf-popular {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
   }

   .ty-check-ring,
   .ty-check-mark {
      stroke-dashoffset: 0 !important;
   }
}

/* ========================================================== TRUST LOGOS STRIP — shown above footer on thank-you & 404 ========================================================== */
.trust-logos {
   background: #fff;
   padding: var(--sec-py-sm) 0;
   border-top: 1px solid rgba(9, 16, 46, 0.06);
   position: relative;
}

.trust-logos::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 160px;
   height: 3px;
   background: linear-gradient(90deg, transparent 0%, #7ACC0D 50%, transparent 100%);
   border-radius: 999px;
}

.trust-logos-label {
   text-align: center;
   font-size: 15px;
   font-weight: 500;
   color: #4a5070;
   margin: 0 0 36px;
   letter-spacing: 0.16px;
}

.trust-star {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   font-weight: 700;
   color: #09102e;
}

.trust-star i {
   color: #FFB400;
   font-size: 14px;
}

.trust-logos-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 36px;
   flex-wrap: wrap;
}

.trust-logo {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 110px;
   max-width: 180px;
   padding: 8px 10px;
   transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.trust-logo img {
   max-width: 100%;
   max-height: 46px;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: transform 0.3s ease;
}

.trust-logo:hover {
   transform: translateY(-3px);
}

.trust-logo:hover img {
   transform: scale(1.05);
}

@media (max-width:991px) {
   .trust-logos {
      padding: var(--sec-py-sm) 0;
   }

   .trust-logos-row {
      gap: 24px 28px;
      justify-content: center;
   }

   .trust-logo {
      min-width: 100px;
      max-width: 140px;
   }

   .trust-logo img {
      max-height: 40px;
   }
}

@media (max-width:767px) {
   .trust-logos {
      padding: 32px 0;
   }

   .trust-logos-label {
      font-size: 14px;
      margin-bottom: 28px;
   }

   .trust-logos-row {
      gap: 20px 24px;
   }

   .trust-logo {
      min-width: 90px;
      max-width: 120px;
      padding: 6px 6px;
   }

   .trust-logo img {
      max-height: 34px;
   }
}

@media (max-width:575px) {
   .trust-logos-row {
      gap: 18px 20px;
   }

   .trust-logo {
      flex: 0 0 calc(50% - 16px);
      min-width: 0;
      max-width: none;
   }

   .trust-logo img {
      max-height: 32px;
   }
}

/* ========================================================== RESPONSIVE — new left-side blocks ========================================================== */
@media (max-width:767px) {
   .sbp-toc-inline {
      padding: 20px 20px;
      margin: 26px 0 30px;
   }

   .sbp-toc-inline-eyebrow {
      font-size: 17px;
   }

   .sbp-toc-inline-list a {
      padding: 9px 10px;
      font-size: 14px !important;
      gap: 10px;
   }

   .sbp-refs {
      padding: 22px 22px;
   }

   .sbp-refs-title {
      font-size: 18px;
   }

   .sbp-post-nav {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .sbp-post-prev,
   .sbp-post-next {
      grid-template-columns: 80px 1fr !important;
      text-align: left !important;
   }

   .sbp-post-next .sbp-post-nav-thumb {
      order: -1;
   }

   .sbp-post-next .sbp-post-nav-label {
      justify-content: flex-start;
   }

   .sbp-comments {
      padding-top: 36px;
      margin-top: 36px;
   }

   .sbp-comment-form {
      padding: 22px 20px;
   }

   .sbp-comment-form-grid {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .sbp-cf-footer {
      flex-direction: column;
      align-items: stretch;
   }

   .sbp-cf-submit {
      width: 100%;
      justify-content: center;
   }

   .sbp-comment-list-nested {
      margin-left: 0 !important;
      padding-left: 14px !important;
   }

   .sbp-comment-item {
      grid-template-columns: 40px 1fr;
      gap: 12px;
   }

   .sbp-comment-avatar {
      width: 40px;
      height: 40px;
      font-size: 18px;
   }
}

@media (max-width:575px) {}

/* ========================================================== TEAM PAGE ========================================================== */
.team-main {
   background: #0b1436;
}

@keyframes tm-orb-float {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   33% {
      transform: translate(30px, -20px) scale(1.05);
   }

   66% {
      transform: translate(-20px, 30px) scale(0.95);
   }
}

@keyframes tm-twinkle {

   0%,
   100% {
      opacity: 0.3;
      transform: scale(1);
   }

   50% {
      opacity: 1;
      transform: scale(1.4);
   }
}

@keyframes tm-pulse {

   0%,
   100% {
      box-shadow: 0 0 0 4px rgba(122, 204, 13, 0.25);
   }

   50% {
      box-shadow: 0 0 0 8px rgba(122, 204, 13, 0.1);
   }
}

@keyframes tm-glow-pulse {

   0%,
   100% {
      opacity: 0.65;
      transform: translateX(-50%) scale(1);
   }

   50% {
      opacity: 1;
      transform: translateX(-50%) scale(1.08);
   }
}

@keyframes tm-rotate {
   from {
      transform: translateX(-50%) rotate(0deg);
   }

   to {
      transform: translateX(-50%) rotate(360deg);
   }
}

@keyframes tm-ceo-float {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-12px);
   }
}

@keyframes tm-float-anim {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-8px);
   }
}

@keyframes tm-rotate-slow {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* ========================================================== RESPONSIVE — TEAM PAGE ========================================================== */
@media (max-width:1199px) {
   .tm-hero-grid {
      gap: 40px;
   }

   .tm-float-1 {
      left: -4%;
   }

   .tm-float-2 {
      right: -6%;
   }

   .tm-float-3 {
      left: -6%;
   }

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

   .tm-standout-grid-inner {
      gap: 50px;
   }
}

@media (max-width:991px) {}

@media (max-width:767px) {}

@media (max-width:575px) {}

@media (prefers-reduced-motion:reduce) {}

/* ----- responsive ----- */
@media (max-width:991px) {
   .tm-gallery {
      padding: var(--sec-py-md) 0;
   }

   .tm-gallery-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 200px;
   }

   .tm-gal-big {
      grid-column: span 2;
      grid-row: span 2;
   }

   .tm-gal-wide {
      grid-column: span 3;
   }
}

@media (max-width:767px) {}

@media (max-width:575px) {}

/* ========================================================== ABOUT PAGE — HERO Cosmic bg (about-banner-bg.webp) + centered serif headline, stats ribbon, and subtle floating trust badges. ========================================================== */
.about-main {
   background: #09102e;
}

@keyframes ab-pulse {

   0%,
   100% {
      box-shadow: 0 0 0 4px rgba(122, 204, 13, 0.25);
   }

   50% {
      box-shadow: 0 0 0 8px rgba(122, 204, 13, 0.08);
   }
}

@keyframes ab-float-anim {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-10px);
   }
}

/* Responsive */
@media (max-width:1199px) {
   .ab-float-tl {
      top: 10%;
      left: 2%;
   }

   .ab-float-tr {
      top: 14%;
      right: 2%;
   }

   .ab-float-bl {
      bottom: 16%;
      left: 2%;
   }
}

@media (max-width:991px) {}

@media (max-width:767px) {}

@media (max-width:575px) {
   .creative-text {
    font-size: 16px;
}


}

@media (prefers-reduced-motion:reduce) {}

@keyframes ab-tl-pulse {

   0%,
   100% {
      box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(122, 204, 13, 0.35);
   }

   50% {
      box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(122, 204, 13, 0.12);
   }
}

/* ========================================================== ABOUT PAGE — RESPONSIVE ========================================================== */
@media (max-width:991px) {
   .ab-story {
      padding: var(--sec-py-md) 0;
   }

   .ab-story-media {
      max-width: 480px;
      margin: 0 auto 16px;
   }

   .ab-mvv,
   .ab-process,
   .ab-why {
      padding: var(--sec-py-md) 0;
   }

   .ab-timeline {
      padding: var(--sec-py-md) 0;
   }

   .ab-awards {
      padding: var(--sec-py-md) 0;
   }

   .ab-stats-strip {
      padding: var(--sec-py-md) 0;
   }

   .ab-final-cta {
      padding: var(--sec-py-lg) 0;
   }

   .ab-section-head {
      margin-bottom: 44px;
   }

   .ab-proc-row {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }

   .ab-proc-arrow {
      display: none;
   }

   .ab-tl::before {
      left: 24px;
      transform: none;
   }

   .ab-tl-item {
      width: 100%;
      margin: 0;
      padding: 0 0 40px 58px;
      text-align: left !important;
   }

   .ab-tl-left,
   .ab-tl-right {
      margin: 0;
   }

   .ab-tl-card {
      max-width: none;
      width: 100%;
   }

   .ab-tl-left .ab-tl-dot,
   .ab-tl-right .ab-tl-dot {
      left: 15px;
      right: auto;
   }

   .ab-final-card {
      padding: 60px 36px 54px;
   }
}

@media (max-width:767px) {}

@media (max-width:575px) {}

@media (prefers-reduced-motion:reduce) {}

@keyframes ty-bold-spin {
   to {
      transform: rotate(360deg);
   }
}

@keyframes ty-bold-spin-reverse {
   to {
      transform: rotate(-360deg);
   }
}

@keyframes ty-bold-bob {

   0%,
   100% {
      transform: translateY(0) rotate(-4deg);
   }

   50% {
      transform: translateY(-10px) rotate(4deg);
   }
}

/* Responsive */
@media (max-width:1199px) {
   .ty-bold {
      padding: 80px 0 90px;
      min-height: 600px;
   }

   .ty-bold-title {
      font-size: clamp(64px, 11vw, 136px);
   }
}

@media (max-width:991px) {}

@media (max-width:767px) {}

@media (max-width:575px) {}

@media (prefers-reduced-motion:reduce) {}

/* ============================================================ SITE-WIDE SELECT — ensures native dropdown options always render light/readable regardless of the page's own theme (prevents unreadable OS dark-mode options on dark pages). ============================================================ */
select option,
select optgroup {
   background: #ffffff;
   color: #1a2240;
   font-size: 14.5px;
   padding: 8px 12px;
}

select option:checked,
select option:hover {
   background: #f3f6ec;
   color: #09102e;
}

select option[disabled] {
   color: #9aa0b3;
}

/* Default chevron arrow for custom-styled selects with appearance:none */
select.has-custom-arrow,
select.form-select-custom {
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 1l6 7 6-7' stroke='%237ACC0D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 16px center;
   background-size: 12px 9px;
   padding-right: 40px;
}

/* ========================================= PHASE 2 — RESPONSIVE SAFETY PATCHES Fill in mobile collapse rules for grids that were missing them. ========================================= */
@media (max-width:991px) {
   .fmenu-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
   }

   .client-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .team-lead-stats {
      gap: 14px;
   }
}

@media (max-width:575px) {
   .fmenu-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .client-grid {
      grid-template-columns: repeat(2, 1fr);
   }
.team-stat-num {
    font-size: 22px;
}
.team-stat-label {
    font-size: 10px;
}
.btn-cta {
    font-size: 16px;
    padding: 13px 25px;
}

}

/* ============================================================ DEFAULT PAGE BANNER — green strap with breadcrumb + title + icon. Used by page.php and template-legal.php (Terms, Privacy, Cookie, etc.) Mirrors `.default-banner` from new-site/terms-and-conditions.html. ============================================================ */
.default-banner {
   position: relative;
   padding: 40px 0;
   background: #7ACC0D;
   color: #09102e;
   overflow: hidden;
   isolation: isolate;
}

.default-banner::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(9, 16, 46, 0.08) 1px, transparent 1.4px);
   background-size: 28px 28px;
   mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
   -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
   pointer-events: none;
   z-index: 0;
}

.default-banner>.container {
   position: relative;
   z-index: 2;
}

.default-banner-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   min-height: 130px;
}

.default-banner-copy {
   flex: 1 1 auto;
   min-width: 0;
}

.default-banner-crumb {
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   color: rgba(9, 16, 46, 0.75);
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 10px;
   letter-spacing: 0.02em;
}

.default-banner-crumb a {
   color: rgba(9, 16, 46, 0.85);
   text-decoration: none;
}

.default-banner-crumb a:hover {
   color: #09102e;
}

.default-banner-crumb .sep {
   color: rgba(9, 16, 46, 0.4);
}

.default-banner h1 {
   font-family: 'Fraunces', 'Inter', serif;
   font-weight: 800;
   font-size: clamp(28px, 3.6vw, 44px);
   line-height: 1.08;
   letter-spacing: -0.02em;
   color: #09102e;
   margin: 0;
   max-width: 640px;
}

/* Floating icon on the right */
.default-banner-rocket {
   position: relative;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 130px;
   height: 130px;
   animation: drbHover 3.4s ease-in-out infinite;
}

.default-banner-rocket i {
   font-size: 118px;
   line-height: 1;
   color: #09102e;
   filter: drop-shadow(-5px 6px 0 rgba(9, 16, 46, 0.22)) drop-shadow(0 18px 28px rgba(9, 16, 46, 0.38));
   position: relative;
   z-index: 2;
}

.default-banner-rocket .drb-flame {
   position: absolute;
   bottom: -6px;
   left: 50%;
   transform: translateX(-50%);
   width: 30px;
   height: 46px;
   background: radial-gradient(ellipse at 50% 20%, #fff 0%, #fff 18%, #ffeaa7 40%, #ff7a00 75%, rgba(255, 122, 0, 0) 100%);
   border-radius: 50% 50% 40% 40% / 35% 35% 65% 65%;
   filter: blur(0.5px);
   opacity: 0.9;
   z-index: 1;
   animation: drbFlame 0.5s ease-in-out infinite alternate;
   transform-origin: 50% 0%;
}

@keyframes drbHover {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-8px);
   }
}

@keyframes drbFlame {
   from {
      transform: translateX(-50%) scaleY(0.9) scaleX(0.95);
      opacity: 0.85;
   }

   to {
      transform: translateX(-50%) scaleY(1.15) scaleX(1.05);
      opacity: 1;
   }
}

@media (prefers-reduced-motion:reduce) {

   .default-banner-rocket,
   .default-banner-rocket .drb-flame {
      animation: none;
   }
}

@media (max-width:767px) {
   .default-banner {
      padding: 32px 0;
   }

   .default-banner-inner {
      gap: 20px;
      min-height: 100px;
   }

   .default-banner h1 {
      font-size: clamp(22px, 5.5vw, 32px);
   }

   .default-banner-rocket {
      width: 90px;
      height: 90px;
   }

   .default-banner-rocket i {
      font-size: 80px;
   }

   .default-banner-rocket .drb-flame {
      width: 22px;
      height: 32px;
   }
}

@media (max-width:479px) {
   .default-banner-rocket {
      width: 72px;
      height: 72px;
   }

   .default-banner-rocket i {
      font-size: 64px;
   }
}

/* Default content area (page.php / template-legal.php) */
.default-section {
   padding: 80px 0 90px;
   background: #fff;
}

.default-css {
   font-family: 'Inter', sans-serif;
   font-size: 16px;
   line-height: 1.75;
   color: #2a3353;
}

.default-css h2 {
   font-family: 'Fraunces', serif;
   font-weight: 800;
   font-size: clamp(22px, 2.4vw, 30px);
   color: #09102e;
   margin: 1.8em 0 0.6em;
}

.default-css h3 {
   font-family: 'Fraunces', serif;
   font-weight: 700;
   font-size: clamp(18px, 1.8vw, 22px);
   color: #09102e;
   margin: 1.4em 0 0.5em;
}

.default-css p {
   margin: 0 0 1.2em;
}

.default-css a {
   color: #5a8d05;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.default-css a:hover {
   color: #3d7c00;
}

.default-css ul,
.default-css ol {
   margin: 0 0 1.4em 1.4em;
}

.default-css li {
   margin-bottom: 0.5em;
}

/* ============================================================ GLOBAL CONTENT TYPOGRAPHY OVERRIDES Applies across the whole site to rich-text/content wrappers: .gw-prose, .sbp-body, .default-css, .entry-content, .post-content, plus the comment area. Locks anchors and strong text to brand green (#7ACC0D), with hover swapping to navy (#09102e). Forces left-align so any inline `text-align: justify` styles from past content don't leak through. ============================================================ */
.gw-prose,
.sbp-body,
.default-css,
.entry-content,
.post-content {
   text-align: left;
}

.gw-prose p,
.sbp-body p,
.default-css p,
.entry-content p,
.post-content p {
   text-align: left;
}

/* Anchor + bold = brand green */
.gw-prose a,
.sbp-body a,
.default-css a,
.entry-content a,
.post-content a,
.gw-prose strong,
.gw-prose b,
.sbp-body strong,
.sbp-body b,
.default-css strong,
.default-css b,
.entry-content strong,
.entry-content b,
.post-content strong,
.post-content b {
   color: #7ACC0D;
   text-decoration: none;
   transition: color 0.18s ease;
}

.gw-prose a,
.sbp-body a,
.default-css a,
.entry-content a,
.post-content a {
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-thickness: 1.5px;
   text-decoration-color: rgba(122, 204, 13, 0.5);
}

.gw-prose a:hover,
.sbp-body a:hover,
.default-css a:hover,
.entry-content a:hover,
.post-content a:hover,
.gw-prose strong:hover,
.gw-prose b:hover,
.sbp-body strong:hover,
.sbp-body b:hover,
.default-css strong:hover,
.default-css b:hover,
.entry-content strong:hover,
.entry-content b:hover,
.post-content strong:hover,
.post-content b:hover {
   color: #09102e;
   text-decoration-color: #09102e;
}

/* ============================================================ SINGLE-POST SIDEBAR WIDGET HEADING — bumped from 11px micro-label to a proper heading size so it reads as a real section title. ============================================================ */
.sbp-widget-eyebrow {
   display: flex !important;
   align-items: center !important;
   gap: 10px !important;
   font-family: 'Fraunces', 'Inter', serif !important;
   font-size: 20px !important;
   font-weight: 800 !important;
   color: #09102e !important;
   letter-spacing: -0.01em !important;
   text-transform: none !important;
   margin: 0 0 18px !important;
   line-height: 1.2 !important;
}

.sbp-widget-eyebrow i {
   color: #7ACC0D !important;
   font-size: 22px !important;
}

/* ============================================================ SINGLE-POST SIDEBAR — Categories widget .sbp-cat-icon had no default background (only branded variants like .sbp-cat-ai got coloured), and .sbp-cat-count used a 5% navy chip that vanished on white. Force both visible. ============================================================ */
.sbp-cat-icon {
   background: linear-gradient(135deg, #7ACC0D 0%, #5fa908 100%) !important;
   color: #09102e !important;
   box-shadow: 0 4px 10px rgba(122, 204, 13, 0.28);
}

.sbp-cat-list a:hover .sbp-cat-icon {
   background: linear-gradient(135deg, #09102e 0%, #1a2657 100%) !important;
   color: #c5f07a !important;
}

.sbp-cat-count {
   background: rgba(9, 16, 46, 0.08) !important;
   border: 1px solid rgba(9, 16, 46, 0.12);
   color: #09102e !important;
   font-size: 12.5px !important;
   font-weight: 800 !important;
   min-width: 28px;
   text-align: center;
   padding: 4px 10px !important;
   border-radius: 999px !important;
}

.sbp-cat-list a:hover .sbp-cat-count {
   background: #7ACC0D !important;
   border-color: #7ACC0D !important;
   color: #09102e !important;
}

/* ============================================================ SINGLE BLOG BODY — heading sizing. The global h2 (clamp 32–48px) was too loud for inline article headings; bring h2/h3/h4 inside .sbp-body down to a reading- friendly scale, and let the page-single-blog.css h-tag styles handle the rest. ============================================================ */
.sbp-body h2 {
   font-family: 'Fraunces', 'Inter', serif;
   font-weight: 800;
   font-size: clamp(24px, 2.8vw, 32px);
   line-height: 1.2;
   letter-spacing: -0.015em;
   color: #09102e;
   margin: 1.8em 0 0.6em;
}

.sbp-body h3 {
   font-family: 'Fraunces', 'Inter', serif;
   font-weight: 700;
   font-size: clamp(20px, 2.2vw, 24px);
   line-height: 1.25;
   color: #09102e;
   margin: 1.5em 0 0.5em;
}

.sbp-body h4 {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: clamp(17px, 1.8vw, 20px);
   line-height: 1.3;
   color: #09102e;
   margin: 1.3em 0 0.5em;
}

/* ============================================================ HEADING RHYTHM — blog single body (.sbp-body) and default page content (.default-css). Tight bottom margin + airy top margin so each heading visually groups with the paragraph(s) that follow it. First heading in a block gets no extra top space. ============================================================ */
.sbp-body h1,
.sbp-body h2,
.sbp-body h3,
.sbp-body h4,
.sbp-body h5,
.sbp-body h6,
.default-css h1,
.default-css h2,
.default-css h3,
.default-css h4,
.default-css h5,
.default-css h6 {
   padding: 0;
   color: #09102e;
   font-family: 'Fraunces', 'Inter', serif;
   letter-spacing: -0.015em;
}

/* Sizes — apply to both blog body and default content. (Blog-only h2/h3/h4 sizes earlier in this file remain; these add h1/h5/h6 and also cover .default-css.) */
.sbp-body h1,
.default-css h1 {
   font-weight: 800;
   font-size: clamp(28px, 3.4vw, 38px);
   line-height: 1.15;
}

.default-css h2 {
   font-weight: 800;
   font-size: clamp(24px, 2.8vw, 32px);
   line-height: 1.2;
}

.default-css h3 {
   font-weight: 700;
   font-size: clamp(20px, 2.2vw, 24px);
   line-height: 1.25;
}

.default-css h4 {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: clamp(17px, 1.8vw, 20px);
   line-height: 1.3;
}

.sbp-body h5,
.default-css h5 {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: clamp(15.5px, 1.4vw, 17px);
   line-height: 1.35;
   letter-spacing: 0;
}

.sbp-body h6,
.default-css h6 {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #4a5170;
   line-height: 1.4;
}

/* Margins — top space above (room to breathe from prior block), smaller bottom space (binds to the following paragraph). Applies to every content wrapper used across the site: .sbp-body (single blog), .default-css (default/legal pages), .gw-prose (generic prose), .entry-content / .post-content (WP editor outputs). */
.sbp-body h1,
.default-css h1,
.gw-prose h1,
.entry-content h1,
.post-content h1 {
   margin: 2em 0 0.7em;
   padding: 0;
}

.sbp-body h2,
.default-css h2,
.gw-prose h2,
.entry-content h2,
.post-content h2 {
   margin: 0.7em 0 0.6em;
   padding: 0;
}

.sbp-body h3,
.default-css h3,
.gw-prose h3,
.entry-content h3,
.post-content h3 {
   margin: 0.6em 0 0.5em;
   padding: 0;
}

.sbp-body h4,
.default-css h4,
.gw-prose h4,
.entry-content h4,
.post-content h4 {
   margin: 0.6em 0 0.5em;
   padding: 0;
}

.sbp-body h5,
.default-css h5,
.gw-prose h5,
.entry-content h5,
.post-content h5 {
   margin: 1.2em 0 0.4em;
   padding: 0;
}

.sbp-body h6,
.default-css h6,
.gw-prose h6,
.entry-content h6,
.post-content h6 {
   margin: 1.2em 0 0.4em;
   padding: 0;
}

/* First-child override — first heading in the block shouldn't push away from the top edge with a giant gap. */
.sbp-body>h1:first-child,
.sbp-body>h2:first-child,
.sbp-body>h3:first-child,
.sbp-body>h4:first-child,
.sbp-body>h5:first-child,
.sbp-body>h6:first-child,
.default-css>h1:first-child,
.default-css>h2:first-child,
.default-css>h3:first-child,
.default-css>h4:first-child,
.default-css>h5:first-child,
.default-css>h6:first-child,
.gw-prose>h1:first-child,
.gw-prose>h2:first-child,
.gw-prose>h3:first-child,
.gw-prose>h4:first-child,
.gw-prose>h5:first-child,
.gw-prose>h6:first-child,
.entry-content>h1:first-child,
.entry-content>h2:first-child,
.entry-content>h3:first-child,
.entry-content>h4:first-child,
.entry-content>h5:first-child,
.entry-content>h6:first-child,
.post-content>h1:first-child,
.post-content>h2:first-child,
.post-content>h3:first-child,
.post-content>h4:first-child,
.post-content>h5:first-child,
.post-content>h6:first-child {
   margin-top: 0;
}

/* Headings directly after another heading should sit closer to it, not get the full airy gap (sub-heading pattern). */
.sbp-body h1+h2,
.sbp-body h2+h3,
.sbp-body h3+h4,
.sbp-body h4+h5,
.sbp-body h5+h6,
.default-css h1+h2,
.default-css h2+h3,
.default-css h3+h4,
.default-css h4+h5,
.default-css h5+h6,
.gw-prose h1+h2,
.gw-prose h2+h3,
.gw-prose h3+h4,
.gw-prose h4+h5,
.gw-prose h5+h6,
.entry-content h1+h2,
.entry-content h2+h3,
.entry-content h3+h4,
.entry-content h4+h5,
.entry-content h5+h6,
.post-content h1+h2,
.post-content h2+h3,
.post-content h3+h4,
.post-content h4+h5,
.post-content h5+h6 {
   margin-top: 0.6em;
}

/* ============================================================ ARCHIVE / SEARCH ROUTES — green banner uses banner-archive, posts-grid renders .blog-grid-list inside .blog-list. Add a little vertical breathing room around the grid and style the "no results" empty state. ============================================================ */
.page-archive .blog-list {
   padding: 60px 0 80px;
   background: #fff;
}

.default-banner-desc {
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   color: rgba(9, 16, 46, 0.78);
   margin: 8px 0 0;
   max-width: 640px;
   line-height: 1.55;
}

.archive-empty {
   max-width: 560px;
   margin: 30px auto;
   text-align: center;
   padding: 56px 32px;
   background: #fff;
   border: 1px solid #e6ecf1;
   border-radius: 18px;
   box-shadow: 0 12px 30px rgba(9, 16, 46, 0.05);
}

.archive-empty-icon {
   display: inline-flex;
   width: 64px;
   height: 64px;
   border-radius: 16px;
   background: linear-gradient(135deg, rgba(122, 204, 13, 0.18), rgba(122, 204, 13, 0.06));
   color: #5a8d05;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   margin-bottom: 20px;
}

.archive-empty h2 {
   font-family: 'Fraunces', serif;
   font-weight: 800;
   font-size: clamp(22px, 2.4vw, 28px);
   color: #09102e;
   margin: 0 0 8px;
}

.archive-empty p {
   color: #5b637a;
   font-size: 15px;
   line-height: 1.6;
   margin: 0 0 18px;
}

.archive-empty form {
   display: flex;
   gap: 8px;
   max-width: 360px;
   margin: 0 auto;
}

.archive-empty input[type="search"] {
   flex: 1 1 auto;
   padding: 11px 14px;
   border: 1.5px solid #e6ecf1;
   border-radius: 999px;
   font-size: 14px;
   outline: none;
}

.archive-empty input[type="search"]:focus {
   border-color: #7ACC0D;
}

.archive-empty button[type="submit"] {
   padding: 11px 22px;
   border-radius: 999px;
   border: none;
   background: linear-gradient(135deg, #7ACC0D 0%, #5fa908 100%);
   color: #09102e;
   font-weight: 800;
   font-size: 13px;
   cursor: pointer;
}

/* ============================================================ PROFESSIONAL TABLES — applied to every editorial content wrapper (.sbp-body, .gw-prose, .default-css, .entry-content, .post-content). Theme-coloured header, soft zebra rows, hover highlight, full responsive wrap on phones. ============================================================ */
.sbp-body table,
.gw-prose table,
.default-css table,
.entry-content table,
.post-content table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   margin: 1.6em 0 1.8em;
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   line-height: 1.6;
   color: #2a3353;
   background: #fff;
   border: 1px solid #e6ecf1;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 14px 32px -18px rgba(9, 16, 46, 0.15);
}

.sbp-body table thead,
.gw-prose table thead,
.default-css table thead,
.entry-content table thead,
.post-content table thead {
   background: #09102e !important;
}

/* Dark navy gradient applied directly on each <th> — `border-collapse: separate` prevents a <thead> background from propagating to the cells in some browsers, so we paint each cell. */
.sbp-body table thead th,
.sbp-body table thead tr th,
.gw-prose table thead th,
.gw-prose table thead tr th,
.default-css table thead th,
.default-css table thead tr th,
.entry-content table thead th,
.entry-content table thead tr th,
.post-content table thead th,
.post-content table thead tr th {
   padding: 16px 20px !important;
   font-family: 'Inter', sans-serif !important;
   font-size: 13px !important;
   font-weight: 800 !important;
   letter-spacing: 0.14em !important;
   text-transform: uppercase !important;
   /* Vibrant lime → dark-lime → navy diagonal gradient for the brand pop */
   background: linear-gradient(135deg, #7ACC0D 0%, #3d7c00 55%, #09102e 100%) !important;
   background-color: #7ACC0D !important;
   color: #ffffff !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
   text-align: left !important;
   vertical-align: middle !important;
   border: none !important;
   border-bottom: 3px solid #c5f07a !important;
   border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
   position: relative;
}

.sbp-body table thead th:last-child,
.gw-prose table thead th:last-child,
.default-css table thead th:last-child,
.entry-content table thead th:last-child,
.post-content table thead th:last-child {
   border-right: 0 !important;
}

.sbp-body table thead th:first-child,
.gw-prose table thead th:first-child,
.default-css table thead th:first-child,
.entry-content table thead th:first-child,
.post-content table thead th:first-child {
   border-top-left-radius: 14px !important;
}

.sbp-body table thead th:last-child,
.gw-prose table thead th:last-child,
.default-css table thead th:last-child,
.entry-content table thead th:last-child,
.post-content table thead th:last-child {
   border-top-right-radius: 14px !important;
}

.sbp-body table tbody td,
.sbp-body table tbody th,
.gw-prose table tbody td,
.gw-prose table tbody th,
.default-css table tbody td,
.default-css table tbody th,
.entry-content table tbody td,
.entry-content table tbody th,
.post-content table tbody td,
.post-content table tbody th {
   padding: 13px 20px;
   border: none;
   border-top: 1px solid #eef0f4;
   vertical-align: top;
   text-align: left;
   font-weight: 500;
   color: #2a3353;
}

.sbp-body table tbody tr,
.gw-prose table tbody tr,
.default-css table tbody tr,
.entry-content table tbody tr,
.post-content table tbody tr {
   transition: background 0.2s ease;
}

.sbp-body table tbody tr:nth-child(even),
.gw-prose table tbody tr:nth-child(even),
.default-css table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even),
.post-content table tbody tr:nth-child(even) {
   background: #fafbfc;
}

.sbp-body table tbody tr:hover,
.gw-prose table tbody tr:hover,
.default-css table tbody tr:hover,
.entry-content table tbody tr:hover,
.post-content table tbody tr:hover {
   background: rgba(122, 204, 13, 0.06);
}

.sbp-body table tbody tr:first-child td,
.sbp-body table tbody tr:first-child th,
.gw-prose table tbody tr:first-child td,
.gw-prose table tbody tr:first-child th,
.default-css table tbody tr:first-child td,
.default-css table tbody tr:first-child th,
.entry-content table tbody tr:first-child td,
.entry-content table tbody tr:first-child th,
.post-content table tbody tr:first-child td,
.post-content table tbody tr:first-child th {
   border-top: none;
}

/* Tables without an explicit <thead> — style the first row as a header. */
.sbp-body table:not(:has(thead)) tr:first-child td,
.sbp-body table:not(:has(thead)) tr:first-child th,
.gw-prose table:not(:has(thead)) tr:first-child td,
.gw-prose table:not(:has(thead)) tr:first-child th,
.default-css table:not(:has(thead)) tr:first-child td,
.default-css table:not(:has(thead)) tr:first-child th,
.entry-content table:not(:has(thead)) tr:first-child td,
.entry-content table:not(:has(thead)) tr:first-child th,
.post-content table:not(:has(thead)) tr:first-child td,
.post-content table:not(:has(thead)) tr:first-child th {
   background: linear-gradient(135deg, #09102e 0%, #0f1845 100%);
   color: #c5f07a;
   font-weight: 800;
   letter-spacing: 0.06em;
   border-top: none;
   text-transform: uppercase;
   font-size: 12.5px;
}

/* Table caption */
.sbp-body table caption,
.gw-prose table caption,
.default-css table caption,
.entry-content table caption,
.post-content table caption {
   caption-side: top;
   text-align: left;
   font-family: 'Fraunces', serif;
   font-weight: 700;
   font-size: 17px;
   color: #09102e;
   padding: 0 0 10px;
}

/* Responsive — convert tables into stacked cards on mobile (no scroll). Each <tr> becomes a card; each <td>/<th> is a labeled row using the value from data-label (injected via JS in script.js by reading thead). Falls back to a clean vertical stack if data-label is absent. */
@media (max-width:767px) {

   .sbp-body table,
   .gw-prose table,
   .default-css table,
   .entry-content table,
   .post-content table {
      display: block;
      width: 100%;
      border: 0;
      box-shadow: none;
      background: transparent;
      border-radius: 0;
      overflow: visible;
      font-size: 14px;
      white-space: normal;
   }

   /* Hide the desktop header row — labels move into each cell */
   .sbp-body table thead,
   .gw-prose table thead,
   .default-css table thead,
   .entry-content table thead,
   .post-content table thead {
      display: none !important;
   }

   /* tbody becomes a flex column of cards */
   .sbp-body table tbody,
   .gw-prose table tbody,
   .default-css table tbody,
   .entry-content table tbody,
   .post-content table tbody {
      display: flex;
      flex-direction: column;
      gap: 12px;
   }

   /* Each row is a card */
   .sbp-body table tbody tr,
   .gw-prose table tbody tr,
   .default-css table tbody tr,
   .entry-content table tbody tr,
   .post-content table tbody tr {
      display: block;
      background: #fff;
      border: 1px solid rgba(9, 16, 46, 0.08);
      border-radius: 12px;
      padding: 8px 14px;
      box-shadow: 0 4px 14px rgba(9, 16, 46, 0.04);
   }

   .sbp-body table tbody tr:nth-child(even),
   .gw-prose table tbody tr:nth-child(even),
   .default-css table tbody tr:nth-child(even),
   .entry-content table tbody tr:nth-child(even),
   .post-content table tbody tr:nth-child(even) {
      background: #fff;
   }

   /* Each cell becomes a labeled row */
   .sbp-body table tbody td,
   .sbp-body table tbody th,
   .gw-prose table tbody td,
   .gw-prose table tbody th,
   .default-css table tbody td,
   .default-css table tbody th,
   .entry-content table tbody td,
   .entry-content table tbody th,
   .post-content table tbody td,
   .post-content table tbody th {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 0;
      border: 0;
      border-bottom: 1px solid rgba(9, 16, 46, 0.06);
      text-align: right;
      font-size: 14px;
      line-height: 1.45;
      white-space: normal;
      word-break: break-word;
   }

   /* Last cell in row — no divider */
   .sbp-body table tbody tr td:last-child,
   .sbp-body table tbody tr th:last-child,
   .gw-prose table tbody tr td:last-child,
   .gw-prose table tbody tr th:last-child,
   .default-css table tbody tr td:last-child,
   .default-css table tbody tr th:last-child,
   .entry-content table tbody tr td:last-child,
   .entry-content table tbody tr th:last-child,
   .post-content table tbody tr td:last-child,
   .post-content table tbody tr th:last-child {
      border-bottom: 0;
   }

   /* The data-label injected from thead by JS — left side of each row */
   .sbp-body table tbody td[data-label]::before,
   .sbp-body table tbody th[data-label]::before,
   .gw-prose table tbody td[data-label]::before,
   .gw-prose table tbody th[data-label]::before,
   .default-css table tbody td[data-label]::before,
   .default-css table tbody th[data-label]::before,
   .entry-content table tbody td[data-label]::before,
   .entry-content table tbody th[data-label]::before,
   .post-content table tbody td[data-label]::before,
   .post-content table tbody th[data-label]::before {
      content: attr(data-label);
      flex: 0 0 40%;
      text-align: left;
      font-weight: 700;
      color: #09102e;
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
   }

   /* For tables with no thead/data-label, fall back to making the first cell of each row a bold heading-like label. */
   .sbp-body table:not(:has(thead)) tbody tr td:first-child,
   .gw-prose table:not(:has(thead)) tbody tr td:first-child,
   .default-css table:not(:has(thead)) tbody tr td:first-child,
   .entry-content table:not(:has(thead)) tbody tr td:first-child,
   .post-content table:not(:has(thead)) tbody tr td:first-child {
      font-weight: 700;
      color: #09102e;
      background: rgba(122, 204, 13, 0.06);
      margin: -8px -14px 0;
      padding: 10px 14px;
      border-radius: 12px 12px 0 0;
      text-align: left;
      justify-content: flex-start;
   }
}

/* ============================================================ ARCHIVES WIDGET — monthly archive list (single-post sidebar). Mirrors the Categories widget so the sidebar feels consistent. ============================================================ */
.sbp-archive-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.sbp-archive-list a {
   display: grid;
   grid-template-columns: 36px 1fr auto;
   align-items: center;
   gap: 12px;
   padding: 10px 10px;
   border-radius: 10px;
   text-decoration: none;
   transition: all 0.2s ease;
}

.sbp-archive-list a:hover {
   background: rgba(122, 204, 13, 0.08);
   transform: translateX(3px);
}

.sbp-archive-icon {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   background: linear-gradient(135deg, #7ACC0D 0%, #5fa908 100%);
   color: #09102e;
   flex-shrink: 0;
   box-shadow: 0 4px 10px rgba(122, 204, 13, 0.28);
   transition: background 0.2s ease, color 0.2s ease;
}

.sbp-archive-list a:hover .sbp-archive-icon {
   background: linear-gradient(135deg, #09102e 0%, #1a2657 100%);
   color: #c5f07a;
}

.sbp-archive-name {
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 600;
   color: #09102e;
}

.sbp-archive-count {
   background: rgba(9, 16, 46, 0.08);
   border: 1px solid rgba(9, 16, 46, 0.12);
   color: #09102e;
   font-size: 12.5px;
   font-weight: 800;
   min-width: 28px;
   text-align: center;
   padding: 4px 10px;
   border-radius: 999px;
   transition: all 0.2s ease;
}

.sbp-archive-list a:hover .sbp-archive-count {
   background: #7ACC0D;
   border-color: #7ACC0D;
   color: #09102e;
}

/* ============================================================ GLOBAL FINAL CTA — rocket card. Mirrors the `.sv-final-cta` block from services.css so the partial template-parts/sections/global-final-cta.php renders correctly on every route (page.php, single.php, template-legal, archive.php, search.php), not only on the Services page. CSS variables from services.css are inlined here. ============================================================ */
.sv-final-cta {
   padding: 110px 0;
   background: #fff;
}

.sv-final-card {
   position: relative;
   border-radius: 32px;
   padding: 90px 48px;
   background: linear-gradient(135deg, #09102e 0%, #0b1436 60%, #113c17 100%);
   overflow: hidden;
   text-align: center;
   color: #fff;
   box-shadow: 0 40px 80px -30px rgba(9, 16, 46, 0.4);
}

.sv-final-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.sv-final-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
}

.sv-final-orb-a {
   width: 440px;
   height: 440px;
   top: -120px;
   left: -100px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.55), transparent 65%);
   opacity: 0.6;
}

.sv-final-orb-b {
   width: 380px;
   height: 380px;
   bottom: -120px;
   right: -80px;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.4), transparent 70%);
   opacity: 0.55;
}

.sv-final-orb-c {
   width: 260px;
   height: 260px;
   top: 30%;
   left: 55%;
   background: radial-gradient(circle, rgba(122, 204, 13, 0.28), transparent 70%);
   opacity: 0.5;
   animation: sv-float 14s ease-in-out infinite;
}

.sv-final-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: 48px 48px;
   mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 75%);
   -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 75%);
}

.sv-final-content {
   position: relative;
   z-index: 2;
   max-width: 820px;
   margin: 0 auto;
}

/* Flying rocket */
.sv-final-rocket {
   position: absolute;
   left: 4%;
   top: 50%;
   width: clamp(180px, 22vw, 320px);
   height: auto;
   transform: translateY(-50%) rotate(-18deg);
   z-index: 1;
   pointer-events: none;
   filter: drop-shadow(0 30px 60px rgba(122, 204, 13, 0.35));
   animation: sv-rocket-fly 6s ease-in-out infinite;
}

.sv-rocket-svg {
   width: 100%;
   height: auto;
   display: block;
}

.sv-rocket-flames {
   transform-origin: 100px 245px;
   animation: sv-rocket-flame 0.18s ease-in-out infinite alternate;
}

.sv-rocket-trail {
   position: absolute;
   top: 50%;
   right: -10%;
   width: 60%;
   height: 14px;
   background: linear-gradient(90deg, transparent 0%, rgba(122, 204, 13, 0.55) 40%, rgba(255, 210, 74, 0.45) 70%, transparent 100%);
   filter: blur(8px);
   border-radius: 999px;
   transform: translateY(-50%);
}

@keyframes sv-rocket-fly {

   0%,
   100% {
      transform: translateY(-50%) translateX(0) rotate(-18deg);
   }

   50% {
      transform: translateY(-58%) translateX(-6px) rotate(-18deg);
   }
}

@keyframes sv-rocket-flame {
   0% {
      transform: scaleY(1) scaleX(1);
      opacity: 0.95;
   }

   100% {
      transform: scaleY(1.15) scaleX(0.92);
      opacity: 1;
   }
}

@keyframes sv-float {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-20px);
   }
}

@media (prefers-reduced-motion:reduce) {

   .sv-final-rocket,
   .sv-rocket-flames,
   .sv-final-orb-c {
      animation: none;
   }
}

@media (max-width:991px) {
   .sv-final-rocket {
      left: 50%;
      top: -10%;
      width: 140px;
      transform: translateX(-50%) rotate(0deg);
      opacity: 0.55;
   }

   .sv-final-card {
      padding: 60px 30px;
      border-radius: 24px;
   }
}

@media (max-width:575px) {
   .sv-final-rocket {
      display: none;
   }

   .sv-final-card {
      padding: 48px 22px;
   }
}

.sv-final-script {
   display: inline-block;
   font-family: 'Caveat', cursive;
   font-size: 30px;
   font-weight: 700;
   color: #7ACC0D;
   letter-spacing: 0.16px;
   margin-bottom: 14px;
}

.sv-final-title {
   font-family: 'Publico Banner', 'Fraunces', serif;
   font-size: clamp(35.2px, 4.4vw, 57.6px);
   line-height: 1.2;
   font-weight: 700;
   letter-spacing: -0.32px;
   color: #fff;
   margin: 0 0 20px;
}

.sv-final-title .grad-light {
   background: linear-gradient(135deg, #c5f07a 0%, #7ACC0D 60%, #b9f05a 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.sv-final-sub {
   font-family: 'Inter', sans-serif;
   font-size: 17px;
   line-height: 1.7;
   color: rgba(255, 255, 255, 0.78);
   margin: 0 auto 36px;
   max-width: 640px;
}

.sv-final-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   justify-content: center;
   margin-bottom: 26px;
}

.sv-final-reassure {
   font-family: 'Inter', sans-serif;
   font-size: 13.5px;
   color: rgba(255, 255, 255, 0.55);
   margin: 0;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   justify-content: center;
   width: 100%;
}

.sv-final-reassure i {
   color: #7ACC0D;
}

/* Buttons (mirror of services.css .sv-btn family) */
.sv-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 26px;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   font-weight: 600;
   text-decoration: none;
   border: 2px solid transparent;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
   line-height: 1;
}

.sv-btn i {
   transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sv-btn:hover i {
   transform: translateX(4px);
}

.sv-btn-primary {
   background: linear-gradient(135deg, #7ACC0D, #5fa008);
   color: #09102e;
   border-color: #7ACC0D;
   box-shadow: 0 10px 28px rgba(122, 204, 13, 0.35);
}

.sv-btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 16px 36px rgba(122, 204, 13, 0.45);
   color: #09102e;
}

.sv-btn-ghost-dark {
   background: transparent;
   color: #fff;
   border-color: rgba(255, 255, 255, 0.3);
}

.sv-btn-ghost-dark:hover {
   background: #fff;
   color: #09102e;
   border-color: #fff;
}

.sv-btn-lg {
   padding: 18px 34px;
   font-size: 15.5px;
}

/* ============================================================ SITEMAP PAGE (page-templates/template-sitemap.php) ============================================================ */
.page-sitemap .sitemap-grid-section {
   padding: 70px 0 90px;
   background: radial-gradient(700px 460px at 100% 0%, rgba(122, 204, 13, 0.08), transparent 60%), #fff;
}

.sitemap-card {
   background: #fff;
   border: 1px solid #e6ecf1;
   border-radius: 18px;
   padding: 28px 28px 24px;
   margin-bottom: 22px;
   box-shadow: 0 12px 28px -18px rgba(9, 16, 46, 0.18);
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sitemap-card:hover {
   border-color: rgba(122, 204, 13, 0.4);
   box-shadow: 0 24px 48px -22px rgba(9, 16, 46, 0.25);
}

.sitemap-card-head {
   display: flex;
   align-items: center;
   gap: 16px;
   padding-bottom: 18px;
   margin-bottom: 18px;
   border-bottom: 1px solid #eef0f4;
}

.sitemap-card-icon {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #7ACC0D 0%, #5fa908 100%);
   color: #09102e;
   font-size: 20px;
   flex-shrink: 0;
   box-shadow: 0 8px 18px rgba(122, 204, 13, 0.28);
}

.sitemap-card-head h2 {
   font-family: 'Fraunces', serif;
   font-weight: 800;
   font-size: clamp(20px, 2vw, 24px);
   letter-spacing: -0.01em;
   color: #09102e;
   margin: 0;
   line-height: 1.2;
}

.sitemap-card-head p {
   font-size: 13.5px;
   color: #5b637a;
   margin: 4px 0 0;
   line-height: 1.45;
}

.sitemap-card-head>div {
   flex: 1 1 auto;
   min-width: 0;
}

.sitemap-card-count {
   background: rgba(9, 16, 46, 0.08);
   border: 1px solid rgba(9, 16, 46, 0.12);
   color: #09102e;
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 800;
   min-width: 36px;
   text-align: center;
   padding: 5px 12px;
   border-radius: 999px;
   flex-shrink: 0;
}

/* Body lists */
.sitemap-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.sitemap-list .sitemap-list {
   margin: 4px 0 4px 18px;
   padding-left: 14px;
   border-left: 1.5px dashed rgba(9, 16, 46, 0.12);
}

.sitemap-item a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 10px;
   border-radius: 8px;
   text-decoration: none;
   font-family: 'Inter', sans-serif;
   font-size: 14.5px;
   color: #2a3353;
   transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sitemap-item a i {
   color: #7ACC0D;
   font-size: 14px;
   flex-shrink: 0;
}

.sitemap-item a:hover {
   background: rgba(122, 204, 13, 0.08);
   color: #09102e;
   transform: translateX(3px);
}

.sitemap-item a:hover i {
   color: #5a8d05;
}

/* Category groups */
.sitemap-cat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 22px;
}

.sitemap-cat-title {
   margin: 0 0 8px;
   font-family: 'Fraunces', serif;
   font-weight: 700;
   font-size: 15.5px;
   letter-spacing: -0.005em;
}

.sitemap-cat-title a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #09102e;
   text-decoration: none;
}

.sitemap-cat-title a i {
   color: #7ACC0D;
   font-size: 14px;
}

.sitemap-cat-title:hover a {
   color: #5a8d05;
}

.sitemap-cat-count {
   background: rgba(9, 16, 46, 0.06);
   border: 1px solid rgba(9, 16, 46, 0.1);
   color: #09102e;
   font-family: 'Inter', sans-serif;
   font-size: 11.5px;
   font-weight: 800;
   padding: 2px 9px;
   border-radius: 999px;
}

/* Two-column card grid for CPTs + chip blocks */
.sitemap-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 22px;
   margin-bottom: 0;
}

.sitemap-card-wide {
   grid-column: 1 / -1;
}

/* Chip rows for categories + tags */
.sitemap-chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.sitemap-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   border-radius: 999px;
   background: rgba(122, 204, 13, 0.1);
   border: 1px solid rgba(122, 204, 13, 0.3);
   color: #2d4d05;
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sitemap-chip:hover {
   background: #7ACC0D;
   color: #09102e;
   transform: translateY(-2px);
}

.sitemap-chip span {
   background: rgba(9, 16, 46, 0.1);
   font-size: 11px;
   font-weight: 800;
   padding: 1px 7px;
   border-radius: 999px;
}

.sitemap-chip-tag {
   background: rgba(9, 16, 46, 0.06);
   border-color: rgba(9, 16, 46, 0.1);
   color: #2a3353;
}

.sitemap-chip-tag:hover {
   background: #09102e;
   color: #fff;
}

@media (max-width:575px) {
   .sitemap-card {
      padding: 22px 18px;
   }

   .sitemap-card-head {
      gap: 12px;
   }

   .sitemap-cat-grid {
      grid-template-columns: 1fr;
      gap: 18px;
   }
}

/* ============================================================ SERVICES MEGA-MENU — 'Visit Page' CTA in the right (white) panel Lives inside .mega-panels-wrap so it sits flush with the panels only — NOT spanning the dark tabs column. Bottom-right anchored. ============================================================ */
.mega-panels-wrap {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.mega-panels-wrap>.mega-panels {
   flex: 1 1 auto;
}

.mega-menu .mega-footer {
   display: flex !important;
   flex-direction: row !important;
   flex-wrap: nowrap !important;
   align-items: center !important;
   justify-content: space-between !important;
   gap: 12px !important;
   padding: 0 40px 28px !important;
   background: transparent !important;
   width: auto !important;
}

.mega-menu .mega-footer .mega-footer-btn {
   display: inline-flex !important;
   align-items: center !important;
   gap: 10px !important;
   padding: 11px 22px !important;
   border-radius: 999px !important;
   font-family: 'Inter', sans-serif !important;
   font-size: 13.5px !important;
   font-weight: 700 !important;
   letter-spacing: 0.02em !important;
   text-decoration: none !important;
   line-height: 1 !important;
   white-space: nowrap !important;
   width: auto !important;
   flex: 0 0 auto !important;
   border: 1.5px solid transparent !important;
   transition: all 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.mega-menu .mega-footer .mega-footer-btn i {
   font-size: 13px !important;
   transition: transform 0.22s, color 0.22s !important;
}

.mega-menu .mega-footer .mega-footer-btn:hover i {
   transform: translateX(3px) !important;
}

/* LEFT — primary (dark navy) */
.mega-menu .mega-footer .mega-footer-btn-primary {
   background: #09102e !important;
   color: #ffffff !important;
   border-color: #09102e !important;
   box-shadow: 0 8px 20px rgba(9, 16, 46, 0.22) !important;
}

.mega-menu .mega-footer .mega-footer-btn-primary i {
   color: #ffffff !important;
}

.mega-menu .mega-footer .mega-footer-btn-primary:hover {
   background: #7ACC0D !important;
   color: #09102e !important;
   border-color: #7ACC0D !important;
   box-shadow: 0 12px 26px rgba(122, 204, 13, 0.4) !important;
   transform: translateY(-1px) !important;
}

.mega-menu .mega-footer .mega-footer-btn-primary:hover i {
   color: #09102e !important;
}

/* RIGHT — ghost outline (transparent / dark text) */
.mega-menu .mega-footer .mega-footer-btn-ghost {
   background: transparent !important;
   color: #09102e !important;
   border-color: rgba(9, 16, 46, 0.25) !important;
   box-shadow: none !important;
}

.mega-menu .mega-footer .mega-footer-btn-ghost i {
   color: #09102e !important;
}

.mega-menu .mega-footer .mega-footer-btn-ghost:hover {
   background: rgba(122, 204, 13, 0.1) !important;
   border-color: #7ACC0D !important;
   color: #09102e !important;
   transform: translateY(-1px) !important;
}

.mega-menu .mega-footer .mega-footer-btn-ghost:hover i {
   color: #09102e !important;
   transform: translate(2px, -2px) !important;
}

@media (max-width:991px) {
   .mega-menu .mega-footer {
      padding: 0 20px 18px !important;
      gap: 8px !important;
   }

   .mega-menu .mega-footer .mega-footer-btn {
      flex: 1 1 0 !important;
      justify-content: center !important;
      padding: 11px 14px !important;
   }
}

/* Drawer (mobile collapsed nav) — stack the two buttons full-width */
.drawer-nav .mega-panels-wrap {
   display: block;
}

.drawer-nav .mega-footer {
   padding: 14px 18px;
   flex-direction: column;
   gap: 8px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.03);
}

.drawer-nav .mega-footer-btn {
   width: 100%;
   justify-content: center;
}

.drawer-nav .mega-footer-btn-primary {
   background: #7ACC0D;
   color: #09102e !important;
   border-color: #7ACC0D;
}

.drawer-nav .mega-footer-btn-primary i {
   color: #09102e;
}

.drawer-nav .mega-footer-btn-ghost {
   background: rgba(255, 255, 255, 0.06);
   color: #ffffff !important;
   border-color: rgba(255, 255, 255, 0.2);
}

.drawer-nav .mega-footer-btn-ghost i {
   color: #ffffff;
}

/* ============================================================ PACKAGE INQUIRY MODAL (global, mounted in footer.php) Opened by any pricing-card CTA across the site. JS in assets/js/script.js pipes data-pkg-* into the GF hidden fields. ============================================================ */
.pkg-modal .pkg-modal-content {
   position: relative;
   background: linear-gradient(160deg, #ffffff 0%, #fbfaf5 100%);
   border-radius: 22px;
   border: 1px solid rgba(122, 204, 13, 0.18);
   box-shadow: 0 40px 80px rgba(9, 16, 46, 0.28);
   overflow: hidden;
   padding: 0;
}

.pkg-modal-close {
   position: absolute;
   top: 14px;
   right: 14px;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: none;
   background: rgba(9, 16, 46, 0.06);
   color: #09102e;
   cursor: pointer;
   font-size: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, transform 0.2s ease;
   z-index: 2;
}

.pkg-modal-close:hover {
   background: #09102e;
   color: #fff;
   transform: rotate(90deg);
}

.pkg-modal-head {
   padding: 32px 36px 22px;
   border-bottom: 1px solid rgba(9, 16, 46, 0.06);
}

.pkg-modal-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 14px;
   border-radius: 999px;
   background: rgba(122, 204, 13, 0.14);
   border: 1px solid rgba(122, 204, 13, 0.4);
   color: #3d7c00;
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 11px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   margin-bottom: 14px;
}

.pkg-modal-title {
   font-family: 'Fraunces', serif;
   font-weight: 800;
   font-size: clamp(22px, 2.4vw, 28px);
   line-height: 1.2;
   color: #09102e;
   margin: 0 0 6px;
   letter-spacing: -0.015em;
}

.pkg-modal-title [data-pkg-name-label] {
   color: #5a8d05;
}

.pkg-modal-sub {
   font-family: 'Inter', sans-serif;
   font-size: 13.5px;
   color: #5b637a;
   margin: 0 0 6px;
}

.pkg-modal-sub [data-pkg-sep] {
   color: rgba(9, 16, 46, 0.3);
}

.pkg-modal-reply {
   font-family: 'Inter', sans-serif;
   font-size: 12.5px;
   color: #5a8d05;
   margin: 6px 0 0;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.pkg-modal-reply i {
   font-size: 13px;
}

.pkg-modal-body {
   padding: 22px 36px 30px;
}

.pkg-modal-body .gform_wrapper {
   margin: 0 !important;
}

.pkg-modal-body .gform_fields {
   gap: 14px !important;
}

.pkg-modal-body .gfield {
   display: flex !important;
   flex-direction: column !important;
}

.pkg-modal-body .gfield_label {
   font-family: 'Inter', sans-serif !important;
   font-size: 12px !important;
   font-weight: 800 !important;
   letter-spacing: 0.14em !important;
   text-transform: uppercase !important;
   color: #2a2a35 !important;
   margin-bottom: 6px !important;
   display: block !important;
   line-height: 1.4 !important;
}

.pkg-modal-body .gfield_required {
   color: #e25b4b !important;
   margin-left: 3px;
   font-weight: 800;
}

.pkg-modal-body .gfield_description {
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   color: #6a7090;
   margin-top: 4px;
}

/* All text-like inputs + textarea + select — unified pill style */
.pkg-modal-body input[type="text"],
.pkg-modal-body input[type="email"],
.pkg-modal-body input[type="tel"],
.pkg-modal-body input[type="url"],
.pkg-modal-body input[type="number"],
.pkg-modal-body input[type="search"],
.pkg-modal-body input[type="date"],
.pkg-modal-body input[type="password"],
.pkg-modal-body select,
.pkg-modal-body textarea {
   width: 100% !important;
   padding: 12px 14px !important;
   border: 1.5px solid #e3e1d8 !important;
   border-radius: 10px !important;
   background: #fafaf6 !important;
   font-family: 'Inter', sans-serif !important;
   font-size: 14.5px !important;
   color: #06091c !important;
   line-height: 1.5 !important;
   transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
   outline: none !important;
   box-shadow: none !important;
   height: auto !important;
   min-height: 0 !important;
}

/* Select — custom chevron, no native dropdown arrow */
.pkg-modal-body select {
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   cursor: pointer;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%235a5a65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
   background-repeat: no-repeat !important;
   background-position: right 14px center !important;
   background-color: #fafaf6 !important;
   padding-right: 38px !important;
}

/* Textarea */
.pkg-modal-body textarea {
   resize: vertical !important;
   min-height: 96px !important;
   line-height: 1.55 !important;
   padding-top: 12px !important;
   padding-bottom: 12px !important;
}

/* Placeholders */
.pkg-modal-body input::placeholder,
.pkg-modal-body textarea::placeholder {
   color: #a1a6b3 !important;
   opacity: 1;
}

/* Focus state — brand green ring */
.pkg-modal-body input:focus,
.pkg-modal-body select:focus,
.pkg-modal-body textarea:focus {
   border-color: #7ACC0D !important;
   background: #fff !important;
   box-shadow: 0 0 0 3px rgba(122, 204, 13, 0.18) !important;
}

/* Disabled */
.pkg-modal-body input:disabled,
.pkg-modal-body select:disabled,
.pkg-modal-body textarea:disabled {
   background: #f3f3ef !important;
   color: #a1a6b3 !important;
   cursor: not-allowed;
}

/* Validation error state */
.pkg-modal-body .gfield_error input,
.pkg-modal-body .gfield_error select,
.pkg-modal-body .gfield_error textarea {
   border-color: #e25b4b !important;
   background: #fff5f3 !important;
   box-shadow: 0 0 0 3px rgba(226, 91, 75, 0.12) !important;
}

.pkg-modal-body .gfield_validation_message,
.pkg-modal-body .validation_message {
   background: rgba(226, 91, 75, 0.08) !important;
   border: 1px solid rgba(226, 91, 75, 0.4) !important;
   color: #c4392a !important;
   font-family: 'Inter', sans-serif !important;
   font-size: 12.5px !important;
   font-weight: 600 !important;
   padding: 8px 12px !important;
   border-radius: 8px !important;
   margin-top: 6px !important;
}

/* Checkbox / radio fallbacks (in case future fields are added) */
.pkg-modal-body input[type="checkbox"],
.pkg-modal-body input[type="radio"] {
   width: auto !important;
   margin-right: 8px !important;
   accent-color: #7ACC0D;
}

.pkg-modal-body .ginput_container_checkbox label,
.pkg-modal-body .ginput_container_radio label,
.pkg-modal-body .gchoice label {
   font-family: 'Inter', sans-serif !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   color: #2a3353 !important;
   letter-spacing: 0 !important;
   text-transform: none !important;
   margin: 0 !important;
   cursor: pointer;
}

/* Submit button — full-width green pill */
.pkg-modal-body .gform_footer,
.pkg-modal-body .gform-footer {
   padding: 0 !important;
   margin: 18px 0 0 !important;
   display: block !important;
}

.pkg-modal-body .gform_button,
.pkg-modal-body .gform-button,
.pkg-modal-body button[type="submit"] {
   display: inline-flex !important;
   width: 100% !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 10px !important;
   padding: 14px 22px !important;
   border: none !important;
   border-radius: 999px !important;
   background: linear-gradient(135deg, #7ACC0D 0%, #5fa908 100%) !important;
   color: #09102e !important;
   font-family: 'Inter', sans-serif !important;
   font-weight: 800 !important;
   font-size: 15px !important;
   letter-spacing: 0.04em !important;
   cursor: pointer;
   box-shadow: 0 14px 30px rgba(122, 204, 13, 0.35) !important;
   transition: transform 0.2s, box-shadow 0.2s, gap 0.25s;
   text-transform: none !important;
   line-height: 1.2 !important;
}

.pkg-modal-body .gform_button:hover,
.pkg-modal-body button[type="submit"]:hover {
   transform: translateY(-2px);
   box-shadow: 0 18px 38px rgba(122, 204, 13, 0.45) !important;
   gap: 14px !important;
}

.pkg-modal-body .gform_button:disabled,
.pkg-modal-body button[type="submit"]:disabled {
   opacity: 0.6;
   cursor: wait;
   transform: none !important;
}

/* Hidden GF fields — must not take vertical space */
.pkg-modal-body .gfield--type-hidden,
.pkg-modal-body .gfield_hidden {
   display: none !important;
}

.pkg-modal-placeholder {
   padding: 30px;
   color: #5b637a;
   font-size: 14px;
   text-align: center;
}

/* Personalised confirmation message (rendered by gform_confirmation filter) */
.pkg-confirm {
   text-align: center;
   padding: 12px 4px;
   font-family: 'Inter', sans-serif;
}

.pkg-confirm-icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: linear-gradient(135deg, #7ACC0D 0%, #5fa908 100%);
   color: #09102e;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   margin: 0 auto 18px;
   box-shadow: 0 14px 32px rgba(122, 204, 13, 0.35);
}

.pkg-confirm-title {
   font-family: 'Fraunces', serif;
   font-weight: 800;
   font-size: clamp(22px, 2.4vw, 28px);
   color: #09102e;
   margin: 0 0 14px;
   letter-spacing: -0.015em;
}

.pkg-confirm-line {
   font-size: 15.5px;
   line-height: 1.6;
   color: #2a3353;
   margin: 0 0 14px;
}

.pkg-confirm-line strong {
   color: #5a8d05;
}

.pkg-confirm-price {
   display: inline-block;
   padding: 2px 9px;
   margin-left: 4px;
   background: rgba(122, 204, 13, 0.14);
   border: 1px solid rgba(122, 204, 13, 0.4);
   border-radius: 999px;
   color: #3d7c00;
   font-weight: 700;
   font-size: 13.5px;
}

.pkg-confirm-sla {
   font-size: 14px;
   line-height: 1.6;
   color: #2a3353;
   margin: 0 0 18px;
}

.pkg-confirm-sla strong {
   color: #09102e;
}

.pkg-confirm-sig {
   font-family: 'Caveat', cursive;
   font-size: 22px;
   color: #5a8d05;
   margin: 0;
}

@media (max-width:575px) {
   .pkg-modal-head {
      padding: 26px 22px 18px;
   }

   .pkg-modal-body {
      padding: 18px 22px 24px;
   }

   .pkg-modal-close {
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
   }
}

/* ========================================================= SITEWIDE TABLET/MOBILE SPACING SWEEP --------------------------------------------------------- Catches sections that hardcode padding/gaps and skip the --sec-py-* variable system. Single sweeping override so we don't have to edit 47 CSS files individually. Tiers: ≤1024px  → iPad portrait & tablet ≤767px   → phones + small tablets ≤575px   → narrow phones ========================================================= */
@media (max-width:1024px) {

   /* Cap any section that hardcodes large vertical padding. */
   section[class],
   .section,
   main>.page-section,
   main>article>section {
      padding-top: clamp(30px, 7vw, 76px);
      padding-bottom: clamp(30px, 7vw, 76px);
   }

   /* Heroes / banners can still go a bit taller, but capped */
   body .banner,
   body .ab-hero,
   body .sv-hero,
   body .lh-hero,
   body .gw-hero,
   body .au-hero,
   body .uk-hero,
   body .us-hero,
   body .ca-hero,
   body .ae-hero,
   body .in-hero,
   body .hire-hero,
   body .blog-hero,
   body .lc-hero,
   body [class$="-hero"],
   body [class*="-hero "],
   body [class$="-banner"],
   body [class*="-banner "] {
      padding-top: clamp(60px, 9vw, 110px) !important;
      padding-bottom: clamp(60px, 9vw, 110px) !important;
      min-height: 0 !important;
   }

   /* Inter-row gaps: cap CSS grid/flex gaps that look fine on desktop but breathe too much on tablet/mobile. */
   .row {
      --bs-gutter-y: 20px;
   }

   [class*="-grid"],
   [class*="-row"]:not(.row),
   [class*="-list"][class*="grid"] {
      gap: clamp(16px, 2.5vw, 28px) !important;
   }

   /* Section heading margins */
   h1,
   h2,
   h3 {
      margin-bottom: 14px;
   }

   .section-head,
   [class$="-section-head"],
   [class*="-head"]:not(input):not(button):not(a) {
      margin-bottom: 28px !important;
   }

   /* Container side padding — give content breathing room without bleed */
   .container {
      padding-left: 20px;
      padding-right: 20px;
   }
}

@media (max-width:991px) {
   .blog-grid> :last-child:nth-child(odd) {
      grid-template-columns: 1fr;
      grid-column: 1 / 3;
      justify-self: center;
      width: 50%;
   }
}

@media (max-width:767px) {

   section[class],
   .section,
   main>.page-section,
   main>article>section {
      padding-top: clamp(34px, 6vw, 56px);
      padding-bottom: clamp(34px, 6vw, 56px);
   }

   body .banner,
   body .ab-hero,
   body .sv-hero,
   body .lh-hero,
   body .gw-hero,
   body .au-hero,
   body .uk-hero,
   body .us-hero,
   body .ca-hero,
   body .ae-hero,
   body .in-hero,
   body .hire-hero,
   body .blog-hero,
   body .lc-hero,
   body [class$="-hero"],
   body [class*="-hero "],
   body [class$="-banner"],
   body [class*="-banner "] {
      padding-top: clamp(48px, 8vw, 80px) !important;
      padding-bottom: clamp(48px, 8vw, 80px) !important;
   }

   .row {
      --bs-gutter-y: 16px;
   }

   [class*="-grid"],
   [class*="-row"]:not(.row),
   [class*="-list"][class*="grid"] {
      gap: clamp(14px, 2vw, 22px) !important;
   }

   .section-head,
   [class$="-section-head"],
   [class*="-head"]:not(input):not(button):not(a) {
      margin-bottom: 22px !important;
   }

   .footer-motto-inline {
      margin: 24px 15px 0;
      padding: 28px 24px;
   }

   /* Card/box margin-bottom defaults */
   /* [class*="-card"],[class*="-box"],[class*="-tile"]{margin-bottom:0;} */
   section.dv-trust .dv-trust-row {
      gap: 0 !important;
   }

   .hero-visual-col {
      margin-top: 55px;
   }

   .hero-title {
      font-size: clamp(30px, 5.5vw, 50px);
   }

   .hero-sub {
      margin-bottom: 15px;
   }

   .creative-title {
      font-size: clamp(32px, 4vw, 62px);
      line-height: 1.2;
      margin-bottom: 15px;
   }

   .creative-subtitle {
      margin-bottom: 15px;
   }

   .creative-text {
      margin-bottom: 20px;
   }

   .why-text {
      margin-bottom: 0;
   }

   .text-center.mt-5.pt-4 {
      margin: 0 !important;
      padding: 0 !important;
   }

   .btn-lg.btn-cta,
   .btn-cta.btn-lg {
      font-size: 16px;
   }

   .portfolio-title-accent {
      font-size: clamp(30px, 5.5vw, 64px);
   }

   .cta-heading {
      font-size: clamp(30px, 5.5vw, 50px);
   }

   .cta-subtext {
      font-size: 18px;
      margin: 0 auto 28px;
      font-weight: 500;
   }

   .cta-card {
      padding: 50px 20px 60px;
      border-radius: 32px;
      margin-bottom: 60px;
   }

   .leadership-cta {
      margin-top: 40px;
   }

   .compare-sub {
      font-size: 18px;
   }

   .ind-heading {
      font-size: 30px;
   }

   .script-accent {
      font-size: 40px;
      padding: 0 8px 0 0;
   }

   .blog-grid> :last-child:nth-child(odd) {
      grid-template-columns: 1fr;
      grid-column: 1;
      justify-self: center;
      width: 100%;
   }
}

@media (max-width:575px) {

   section[class],
   .section,
   main>.page-section,
   main>article>section {
      padding-top: clamp(28px, 5vw, 44px);
      padding-bottom: clamp(28px, 5vw, 44px);
   }
    .compare-sub {
        font-size: 16px;
    }
.team-lead-bio {
    font-size: 16px;
}


   body .banner,
   body .ab-hero,
   body .sv-hero,
   body .lh-hero,
   body .gw-hero,
   body .au-hero,
   body .uk-hero,
   body .us-hero,
   body .ca-hero,
   body .ae-hero,
   body .in-hero,
   body .hire-hero,
   body .blog-hero,
   body .lc-hero,
   body [class$="-hero"],
   body [class*="-hero "],
   body [class$="-banner"],
   body [class*="-banner "] {
      padding-top: 24px !important;
      padding-bottom: 32px !important;
   }

   [class*="-grid"],
   [class*="-row"]:not(.row),
   [class*="-list"][class*="grid"] {
      gap: 14px !important;
   }

   .section-head,
   [class$="-section-head"],
   [class*="-head"]:not(input):not(button):not(a) {
      margin-bottom: 18px !important;
   }

   .container {
      padding-left: 16px;
      padding-right: 16px;
   }

   .compare-body {
      display: block;
   }

   .compare-mark {
      margin-bottom: 10px;
   }

   .ind-visual {
      aspect-ratio: 16 / 12;
   }
}

/* ========================================================= GLOBAL TYPOGRAPHY — H1-H6 baseline + responsive caps --------------------------------------------------------- 1. Base (any viewport): fluid clamp() values so headings scale smoothly between mobile and desktop. 2. Tablet/mobile/phone caps via `body h2…` prefix → wins against page-specific .xxx-heading rules thanks to the bumped specificity, without using !important on every property (keeps the cascade healthy). ========================================================= */
:where(h1) {
   font-size: clamp(32px, 5vw, 56px);
   line-height: 1.1;
   margin: 0 0 18px;
}

:where(h2) {
   font-size: clamp(26px, 4vw, 44px);
   line-height: 1.15;
   margin: 0 0 16px;
}

:where(h3) {
   font-size: clamp(22px, 2.6vw, 30px);
   line-height: 1.2;
   margin: 0 0 14px;
}

:where(h4) {
   font-size: clamp(19px, 2vw, 24px);
   line-height: 1.3;
   margin: 0 0 12px;
}

:where(h5) {
   font-size: clamp(17px, 1.6vw, 20px);
   line-height: 1.35;
   margin: 0 0 10px;
}

:where(h6) {
   font-size: clamp(15px, 1.4vw, 17px);
   line-height: 1.4;
   margin: 0 0 8px;
}

/* Tablet (≤1024px): cap any heading that hardcodes a bigger size. */
@media (max-width:1024px) {

   body h1,
   body .h1 {
      font-size: clamp(28px, 5.4vw, 44px);
      line-height: 1.1;
   }

   body h2,
   body .h2 {
      font-size: clamp(24px, 4.4vw, 36px);
      line-height: 1.15;
   }

   body h3,
   body .h3 {
      font-size: clamp(20px, 2.8vw, 26px);
      line-height: 1.2;
   }

   body h4,
   body .h4 {
      font-size: clamp(18px, 2.2vw, 22px);
      line-height: 1.3;
   }

   body h5,
   body .h5 {
      font-size: clamp(16px, 1.8vw, 19px);
      line-height: 1.35;
   }

   body h6,
   body .h6 {
      font-size: clamp(14px, 1.6vw, 17px);
      line-height: 1.4;
   }

   section.clients-section {
      padding: 0;
   }

   section#testimonials {
      padding: 0;
   }
}

/* Mobile (≤767px): tighten further. */
@media (max-width:767px) {

   body h1,
   body .h1 {
      font-size: clamp(26px, 7vw, 36px);
      line-height: 1.1;
   }

   body h2,
   body .h2 {
      font-size: clamp(22px, 6vw, 30px);
      line-height: 1.15;
   }

   body h3,
   body .h3 {
      font-size: clamp(19px, 4.6vw, 24px);
      line-height: 1.2;
   }

   body h4,
   body .h4 {
      font-size: clamp(17px, 4vw, 21px);
      line-height: 1.3;
   }

   body h5,
   body .h5 {
      font-size: clamp(16px, 3.6vw, 18px);
      line-height: 1.35;
   }

   body h6,
   body .h6 {
      font-size: clamp(14px, 3.4vw, 16px);
      line-height: 1.4;
   }

   .hero-features li {
      align-items: baseline;
   }

   .big-intro {
      margin-top: 0;
      padding: 0;
   }

   .big-intro-top {
      font-size: clamp(30px, 4.5vw, 58px);
      line-height: 1.2;
   }

   .big-intro-bottom {
      font-size: clamp(30px, 5.5vw, 72px);
      line-height: 1.2;
      margin-bottom: 20px;
   }

   .big-intro-sub {
      font-size: 18px;
   }

   .zth-title {
      margin-bottom: 30px;
      font-size: clamp(30px, 5vw, 64px);
      line-height: 1.2;
   }

   .ind-heading {
      font-size: 30px;
      line-height: 1.2;
   }

   .creative-title {
      font-size: clamp(30px, 4vw, 62px);
   }

   .clients-stats-wrap {
      padding: 50px 0 50px;
      margin-bottom: 0;
   }

   .mt-5 {
      margin-top: 2rem !important;
   }
}

/* Phone (≤575px): smallest tier, still readable. */
@media (max-width:575px) {

   body h1,
   body .h1 {
      font-size: clamp(24px, 7.5vw, 32px);
      line-height: 1.1;
   }

   body h2,
   body .h2 {
      font-size: clamp(20px, 6.4vw, 26px);
      line-height: 1.15;
   }

   body h3,
   body .h3 {
      font-size: clamp(18px, 5vw, 22px);
      line-height: 1.2;
   }

   body h4,
   body .h4 {
      font-size: clamp(16px, 4.4vw, 19px);
      line-height: 1.3;
   }

   body h5,
   body .h5 {
      font-size: clamp(15px, 4vw, 17px);
      line-height: 1.35;
   }

   body h6,
   body .h6 {
      font-size: 14px;
      line-height: 1.4;
   }
.big-intro-sub {
        font-size: 16px;
    }
.hero-sub {
    font-size: 16px;
}
.check-circle {
    width: 22px;
    height: 22px;
    font-size: 13px;
}
.hero-features {
    margin-bottom: 22px;
}
.hero-form-card {
    padding: 26px 22px 28px;
}
    .btn-lg.btn-cta, .btn-cta.btn-lg {
        font-size: 16px;
        padding: 12px 25px !important;
    }
.creative-btn {
    font-size: 16px;
    padding: 12px 25px !important;
}
body .hero-form-card .gform_wrapper input[type="submit"], body .hero-form-card .gform_wrapper button[type="submit"], body .hero-form-card .gform_wrapper .gform_button {
    height: 52px !important;
}





}

/* HARD CAPS — last-resort for any heading that uses inline style or ultra-specific selectors with hardcoded font-size (e.g. 64px+) that slipped past the body-prefix rules. Only applies on phones where any heading >36px is almost certainly broken. */
@media (max-width:575px) {
   body:is(h1, h2, h3, h4, h5, h6) {
      word-break: break-word;
      overflow-wrap: anywhere;
   }
}

/* ========================================================= GLOBAL LINK COLOR SWEEP — any phone (tel:), email (mailto:), or unstyled anchor that previously rendered in browser-default blue gets brand DARK NAVY. Specificity bumped with `body` so it wins over generic `a { color: blue } ` browser styles, but any classed anchor (e.g. .btn, .nav-link, .footer-legal a) keeps its own color via the existing higher-specificity rules. */
body a[href^="tel:"]:not([class*="btn"]):not([class*="-cta"]):link,
body a[href^="tel:"]:not([class*="btn"]):not([class*="-cta"]):visited,
body a[href^="mailto:"]:not([class*="btn"]):not([class*="-cta"]):link,
body a[href^="mailto:"]:not([class*="btn"]):not([class*="-cta"]):visited,
body a[href^="sms:"]:not([class*="btn"]):not([class*="-cta"]):link,
body a[href^="sms:"]:not([class*="btn"]):not([class*="-cta"]):visited,
body a[href^="https://wa.me"]:not([class*="btn"]):not([class*="-cta"]):link,
body a[href^="https://wa.me"]:not([class*="btn"]):not([class*="-cta"]):visited {
   color: #09102e !important;
   text-decoration: none;
}

body a[href^="tel:"]:not([class*="btn"]):not([class*="-cta"]):hover,
body a[href^="mailto:"]:not([class*="btn"]):not([class*="-cta"]):hover,
body a[href^="sms:"]:not([class*="btn"]):not([class*="-cta"]):hover,
body a[href^="https://wa.me"]:not([class*="btn"]):not([class*="-cta"]):hover {
   color: #050717 !important;
   text-decoration: underline;
}

/* Footer "Our Offices" phone/email/website links — the footer is dark navy so the global navy tel: color makes them invisible. Force WHITE. Specificity matched to the global tel rule (0,4,2) so source order wins. Selector boosted via `.footer-v2` parent + `[href]` + `:link`. */
body .footer-v2 .finfo-phones a[href]:link,
body .footer-v2 .finfo-phones a[href]:visited,
body .footer-v2 .finfo-office a[href]:link,
body .footer-v2 .finfo-office a[href]:visited,
body .footer-v2 .finfo-list a[href]:link,
body .footer-v2 .finfo-list a[href]:visited,
body .footer-v2 .finfo-phones a,
body .footer-v2 .finfo-office a,
body .footer-v2 .finfo-list a {
   color: #ffffff !important;
   text-decoration: none !important;
}

body .footer-v2 .finfo-phones a:hover,
body .footer-v2 .finfo-office a:hover,
body .footer-v2 .finfo-list a:hover {
   color: #7ACC0D !important;
   text-decoration: underline !important;
}

/* UAE page contact-info card — phone/email/website links should display in the Dubai GOLD theme color instead of the global navy. Specificity matched to the global tel rule (0,4,2) so source order wins (this block is later in the file). */
body .ae-contact .ae-contact-list a[href]:link,
body .ae-contact .ae-contact-list a[href]:visited,
body .ae-contact .ae-contact-info a[href]:link,
body .ae-contact .ae-contact-info a[href]:visited,
body .ae-contact .ae-contact-list a,
body .ae-contact .ae-contact-info a {
   color: #D4AF37 !important;
   text-decoration: none !important;
}

body .ae-contact .ae-contact-list a:hover,
body .ae-contact .ae-contact-info a:hover {
   color: #f1c850 !important;
   text-decoration: underline !important;
}

/* USA page contact-info card — dark navy backdrop means the global navy tel:/mailto: color renders invisible. Force WHITE. */
body .us-contact .us-contact-meta a[href]:link,
body .us-contact .us-contact-meta a[href]:visited,
body .us-contact .us-contact-meta a,
body .us-contact-meta a[href]:link,
body .us-contact-meta a[href]:visited,
body .us-contact-meta a {
   color: #ffffff !important;
   text-decoration: none !important;
}

body .us-contact .us-contact-meta a:hover,
body .us-contact-meta a:hover {
   color: #B22234 !important;
   text-decoration: underline !important;
}

/* Country-bar pill hover: the pill background turns navy on hover, so force white text/icon. Wins over the global tel: hover rule above. */
body a.country-pill[href^="tel:"]:hover,
body a.country-pill[href^="tel:"]:hover *,
body a.country-pill[href^="mailto:"]:hover,
body a.country-pill[href^="mailto:"]:hover * {
   color: #ffffff !important;
   text-decoration: none !important;
}

i.bi.bi-envelope-fill {
   color: #fff;
}

i.bi.bi-envelope-fill:hover {
   color: #000;
}

.team-card img {
   height: 100%;
}

body .us-contact-meta a[href^="tel:"]:not([class*="btn"]):not([class*="-cta"]):link {
   color: #fff !important;
}

body .us-contact-meta a[href^="tel:"]:not([class*="btn"]):not([class*="-cta"]):link:hover {
   color: #9a1c2c !important;
}

body .us-contact-meta a[href^="mailto:"]:not([class*="btn"]):not([class*="-cta"]):link {
   color: #fff !important;
}

body .us-contact-meta a[href^="mailto:"]:not([class*="btn"]):not([class*="-cta"]):link:hover {
   color: #9a1c2c !important;
}

body .ae-contact .ae-contact-info a:hover i {
   color: #fff !important;
}

@media (max-width:1399px) {
   .hero-title {
      font-size: clamp(30px, 5.5vw, 50px);
   }

   .review-badges {
      gap: 28px 30px;
   }

   .why-title {
      font-size: clamp(30px, 4.5vw, 40px);
   }

   .creative-title {
      font-size: clamp(30px, 4vw, 62px);
      line-height: 1.2;
   }


}

@media (max-width: 1199px) {
   .review-badges {
      gap: 25px 15px;
   }

   .rb img {
      height: 40px;
   }

   .why-title {
      font-size: clamp(30px, 4.5vw, 35px);
      margin-bottom: 10px;
   }

   .script-accent {
      padding: 0 8px 0 0;
   }

   .clients-stats-wrap {
      padding: 60px 0 100px;
   }

   .ind-list {
      column-gap: 25px;
   }

   .grad-light {
      background: linear-gradient(90deg, #7ACC0D 0%, #c5f07a 50%, #4CAF50 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
   }

   section.ourwork-hero {
      padding: 60px 0 !important;
   }

   section.zero-to-hero .zth-card-header {
      margin: 0 !important;
   }
}

@media (max-width:992px) {
   .review-badges {
      gap: 20px 15px;
      justify-content: center;
   }
}

@media (max-width:767px) {
   .clients-stats-wrap {
      padding: 60px 0 60px;
      margin-bottom: -25px;
   }
.modal-dialog {
    margin: 10px auto;
}


}

/* ============================================================ bi-showcase — Brand Identity portfolio showcase Minimal black-theme portfolio grid. Partial: template-parts/sections/bi-showcase.php ============================================================ */
.bi-showcase {
   background: #000;
   color: #fff;
   padding: clamp(4rem, 8vw, 8rem) 0;
}

/* Section heading */
.bi-showcase__head {
   max-width: 50rem;
   margin: 0 auto clamp(3rem, 6vw, 5rem);
   text-align: center;
}

.bi-showcase__eyebrow {
   display: inline-block;
   margin-bottom: 1.1rem;
   padding: .42rem 1.05rem;
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: #c5f07a;
   border: 1px solid rgba(122, 204, 13, .35);
   border-radius: 100px;
}

.bi-showcase .bi-showcase__title {
   margin: 0 0 1rem;
   font-size: clamp(2rem, 4.2vw, 3.2rem);
   font-weight: 700;
   line-height: 1.14;
   letter-spacing: -.02em;
   color: #fff;
}

.bi-showcase__sub {
   font-size: 1.05rem;
   line-height: 1.7;
   color: rgba(255, 255, 255, .6);
}

.bi-showcase__sub p {
   margin: 0 0 1rem;
}

.bi-showcase__sub p:last-child {
   margin-bottom: 0;
}

/* Portfolio grid */
.bi-showcase__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(2.5rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3.5rem);
   width: min(1600px, 95vw);
   margin-left: 50%;
   transform: translateX(-50%);
}

.bi-item__media {
   border-radius: 1.25rem;
   overflow: hidden;
   background: #111;
   aspect-ratio: 16 / 11;
}

.bi-item__media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}

.bi-item:hover .bi-item__media img {
   transform: scale(1.04);
}

.bi-item__bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.25rem 2rem;
   flex-wrap: wrap;
   margin-top: 1.5rem;
}

.bi-item__info {
   flex: 1 1 16rem;
   min-width: 0;
}

.bi-item__name {
   margin: 0;
   font-size: clamp(1.5rem, 2vw, 2rem);
   font-weight: 700;
   letter-spacing: -.01em;
   color: #fff;
}

.bi-item__desc {
   margin: .5rem 0 0;
   font-size: 1rem;
   line-height: 1.6;
   color: rgba(255, 255, 255, .55);
   max-width: 34rem;
}

.bi-item__tags {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   margin: 0;
   padding: 0;
   list-style: none;
   flex-shrink: 0;
}

.bi-item__tags li {
   padding: .5rem 1rem;
   font-size: .72rem;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .85);
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 100px;
   transition: border-color .3s ease, color .3s ease;
}

.bi-item:hover .bi-item__tags li {
   border-color: rgba(122, 204, 13, .5);
   color: #c5f07a;
}

@media (max-width:1024px) {
   section.seo-trust .seo-trust-row {
      gap: 0 !important;
   }
}

@media (max-width:991.98px) {
   .bi-showcase__grid {
      grid-template-columns: 1fr;
   }
}

@media (prefers-reduced-motion:reduce) {
   .bi-item__media img {
      transition: none;
   }
}

/* ============================================================ gw-reveal — scroll-reveal hooks (paired with assets/js/gw-reveal.js) Apply via: <section data-reveal>          single fade-up <div data-reveal-stagger>      staggered children (80ms step) <div data-reveal-stagger="120"> custom step ============================================================ */
[data-reveal] {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
   will-change: opacity, transform;
}

[data-reveal].is-in {
   opacity: 1;
   transform: translateY(0);
}

/* Reduced-motion users: no transform, no transition. */
@media (prefers-reduced-motion: reduce) {
   [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
   }
}

/* ============================================================ PORTFOLIO IMAGE TOP-ANCHOR — sitewide Every portfolio / work / case-study card screenshot must crop from the TOP of the source image so the website's header/hero is always visible (not the middle of the page). Targets every common card wrapper used across country pages, hub pages and landing pages. ============================================================ */
.owp-card-img img,
.gaw-work-card-frame img,
.gaw-theme-card-frame img,
.gaw-marquee-item img,
[class*="-portfolio"] .owp-card-img img,
[class*="-portfolio"] [class*="-card-img"] img,
[class*="-portfolio"] [class*="-card-thumb"] img,
[class*="-portfolio"] [class*="-card-media"] img,
[class*="-port "] [class*="-card"] img,
[class*="-showcase"] [class*="-card"] img,
[class*="-work"] [class*="-card-img"] img,
[class*="-work"] [class*="-card-thumb"] img,
.au-port-card img,
.ae-port-card img,
.ca-port-card img,
.uk-show-card img,
.us-portfolio .owp-card-img img,
.ai-work-card img,
.dn-work-card img,
.gw-work-card img,
.portfolio-marquee-item img,
.hire-case-card img {
   object-fit: cover !important;
   object-position: top center !important;
}

@media (max-width:600px) {
   .bi-item__tags {
      flex-shrink: 1;
      justify-content: left;
   }
}