/* ============================================================
   GLOBAL FONT OVERRIDE — fonts.css
   Replaces Public Sans with Barlow + Barlow Condensed
   Loaded after all other stylesheets
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

/* ── Base body font ─────────────────────────────────────── */
*,
body,
html,
p, span, a, li, td, th,
input, textarea, select, button,
blockquote, cite, figcaption,
.wpcf7, .wpforms-field,
[class*="wpforms-"],
[class*="wpcf7-"] {
  font-family: 'Barlow', sans-serif !important;
}

/* ── Headings ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* ── Specific heading sizes ─────────────────────────────── */
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem) !important; font-weight: 800 !important; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; font-weight: 700 !important; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important; font-weight: 700 !important; }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem) !important; font-weight: 700 !important; }
h5 { font-size: 1rem !important; font-weight: 600 !important; }
h6 { font-size: 0.9rem !important; font-weight: 600 !important; }

/* ── Navigation ─────────────────────────────────────────── */
nav, nav a, nav li,
.nav, .navbar, .navbar-nav,
.menu-item, .menu-item a,
.nav-link {
  font-family: 'Barlow Condensed', sans-serif !important;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn, button,
[type="submit"],
[type="button"] {
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.08em !important;
}

/* ── Labels / eyebrows ──────────────────────────────────── */
label,
.sec-hdr.sm,
.eyebrow,
small,
caption {
  font-family: 'Barlow Condensed', sans-serif !important;
}

/* ── Body text sizes ────────────────────────────────────── */
body {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #1a2030 !important;
}

p {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #4a5568 !important;
}

/* ── WordPress core classes ─────────────────────────────── */
.entry-title,
.page-title,
.widget-title,
.site-title {
  font-family: 'Barlow Condensed', sans-serif !important;
}

.entry-content,
.entry-summary,
.widget,
.comment-content {
  font-family: 'Barlow', sans-serif !important;
}

/* ── ACF / WPForms / CF7 ────────────────────────────────── */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem !important;
}

.wpforms-field label,
.wpcf7-form label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ── Footer ─────────────────────────────────────────────── */
.ftr, .ftr * {
  font-family: 'Barlow', sans-serif !important;
}

.ftr h1, .ftr h2, .ftr h3,
.ftr h4, .ftr h5, .ftr h6,
.ftr .ftr__col-heading,
.ftr .ftr__brand-tagline,
.ftr .ftr__menu li a,
.ftr .ftr__contact-val,
.ftr .ftr__newsletter-input,
.ftr .ftr__newsletter-btn,
.ftr .ftr__copyright,
.ftr .ftr__policy-menu li a {
  font-family: 'Barlow Condensed', sans-serif !important;
}


/* ============================================================
   HOMEPAGE — home.css
   Full redesign | hm-* prefix | Heavy CSS tricks
   Brand: #5184c5 | #274069 | #c8a255
   ============================================================ */

/* ─── VARIABLES ──────────────────────────────────────────── */
:root {
  --p:        #5184c5;
  --p4:       rgba(81, 132, 197, 0.4);
  --p15:      rgba(81, 132, 197, 0.15);
  --p08:      rgba(81, 132, 197, 0.08);
  --s:        #274069;
  --g:        #c8a255;
  --dk:       #0d1117;
  --dk2:      #111827;
  --wh:       #ffffff;
  --off:      #f7f8fb;
  --txt:      #3d4a5c;
  --border:   #e8ecf2;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mid: cubic-bezier(0.4, 0, 0.2, 1);
  --px:       clamp(1.5rem, 5vw, 6rem);
  --py:       clamp(3.5rem, 7vw, 7rem);
}

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes hm-fadeUp    { from { opacity:0; transform:translateY(32px); }  to { opacity:1; transform:translateY(0); } }
@keyframes hm-fadeLeft  { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:translateX(0); } }
@keyframes hm-fadeRight { from { opacity:0; transform:translateX(32px); }  to { opacity:1; transform:translateX(0); } }
@keyframes hm-scaleIn   { from { opacity:0; transform:scale(0.92); }        to { opacity:1; transform:scale(1); } }
@keyframes hm-lineGrow  { from { width:0; } to { width:28px; } }
@keyframes hm-scroll    { 0%,100% { transform:scaleY(1); opacity:1; } 50% { transform:scaleY(0.4); opacity:0.3; } }
@keyframes hm-float     { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes hm-shimmer   { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes hm-ken       { from { transform:scale(1); } to { transform:scale(1.06); } }
@keyframes hm-wm-drift  { from { transform:translateX(0); } to { transform:translateX(-3%); } }
@keyframes hm-chip-in   { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes hm-bar-grow  { from { width:0; } to { width:100%; } }
@keyframes hm-reveal    { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0% 0 0); } }

/* ─── SHARED ─────────────────────────────────────────────── */
.hm-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: 0.75rem;
}

.hm-eyebrow--lt { color: rgba(255,255,255,0.55); }
.hm-eyebrow--lt .hm-eyebrow__line { background: linear-gradient(90deg, rgba(255,255,255,0.6), var(--g)); }

.hm-eyebrow__line {
  display: inline-block;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--p), var(--g));
  border-radius: 1px;
  flex-shrink: 0;
  animation: hm-lineGrow 0.6s var(--ease) 0.4s forwards;
}

.hm-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--dk);
  margin: 0 0 1.25rem;
}

.hm-h2 em { font-style: normal; color: var(--p); }
.hm-h2--lt { color: var(--wh); }
.hm-h2--lt em { color: var(--g); }

/* Watermark — shared */
.hm-wm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(6rem, 18vw, 18rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: var(--p4);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: hm-wm-drift 12s ease-in-out infinite alternate;
}

.hm-wm--lt { color: rgba(255,255,255,0.06); }

/* Scroll reveal */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease),
              transform 0.75s var(--ease);
}

.js-reveal[data-dir="left"]  { transform: translateX(-32px); }
.js-reveal[data-dir="right"] { transform: translateX(32px); }

.js-reveal.revealed {
  opacity: 1;
  transform: translate(0);
}

/* ============================================================
   HERO
   ============================================================ */
.hm-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--dk);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Media */
.hm-hero__media { position: absolute; inset: 0; z-index: 0; }

.hm-hero__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  animation: hm-ken 10s ease-in-out forwards;
}

.hm-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Overlays */
.hm-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,
    rgba(13,17,23,0.88) 0%,
    rgba(39,64,105,0.55) 50%,
    rgba(13,17,23,0.3) 100%);
}

.hm-hero__overlay-grad {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50%; z-index: 2;
  background: linear-gradient(to top, rgba(13,17,23,0.98) 0%, transparent 100%);
}

/* Watermark */
.hm-hero__watermark {
  position: absolute;
  bottom: -1rem; 
  right: -2rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  color: rgba(81,132,197,0.4);
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  animation: hm-wm-drift 15s ease-in-out infinite alternate;
}

/* Floating chips top-right */
.hm-hero__chips {
  position: absolute;
  top: clamp(5rem, 10vw, 7rem);
  right: clamp(1.5rem, 5vw, 5rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hm-hero__chip {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: hm-chip-in 0.7s var(--ease) both;
  transition: transform 0.3s var(--ease), background 0.3s;
}

.hm-hero__chip:nth-child(2) { animation-delay: 0.15s; }

.hm-hero__chip:hover {
  transform: translateX(-4px);
  background: rgba(81,132,197,0.2);
}

.hm-hero__chip-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wh);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hm-hero__chip-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* Pill tags top-left */
.hm-hero__tags {
  position: absolute;
  top: clamp(5rem, 10vw, 7rem);
  left: var(--px);
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  animation: hm-fadeLeft 0.7s var(--ease) 0.2s both;
}

.hm-hero__tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  backdrop-filter: blur(8px);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.hm-hero__tag--on,
.hm-hero__tag:hover {
  background: rgba(81,132,197,0.25);
  border-color: rgba(81,132,197,0.5);
  color: var(--wh);
}

/* Caption — bottom-anchored (Image 3 / 4 reference) */
.hm-hero__caption {
  position: relative;
  z-index: 4;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hm-hero__h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--wh);
  margin: 0.5rem 0 1.5rem;
  animation: hm-fadeUp 0.9s var(--ease) 0.3s both;
  max-width: 820px;
}

/* CSS trick: shimmer underline on title */
.hm-hero__h1::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--p), var(--g), var(--p));
  background-size: 200% auto;
  border-radius: 2px;
  margin-top: 0.85rem;
  animation: hm-shimmer 3s linear infinite;
}

.hm-hero__foot {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
  flex-wrap: wrap;
  animation: hm-fadeUp 0.9s var(--ease) 0.55s both;
}

.hm-hero__desc {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.6);
  max-width: 420px;
  margin: 0;
}

.hm-hero__btns {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.hm-hero__ghost {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.25s;
}

.hm-hero__ghost:hover { color: var(--wh); }

/* Scroll line */
.hm-hero__scroll-line {
  position: absolute;
  bottom: 0;
  right: clamp(1.5rem, 3vw, 3rem);
  width: 1.5px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(81,132,197,0.7));
  z-index: 5;
  animation: hm-scroll 2.5s ease-in-out infinite;
}

@media (max-width: 768px) {
  .hm-hero__chips { display: none; }
  .hm-hero__h1 { font-size: clamp(2.4rem, 9vw, 4rem); }
  .hm-hero__foot { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.hm-about {
  position: relative;
  padding: var(--py) var(--px);
  background: var(--wh);
  overflow: hidden;
}

.hm-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .hm-about__grid { grid-template-columns: 1fr; }
}

/* Image */
.hm-about__media { position: relative; }

.hm-about__photo {
  width: 100%;
  padding-bottom: 68%;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 28px 64px rgba(39,64,105,0.16);
  overflow: hidden;
  transition: transform 0.7s var(--ease);
}

.hm-about__media:hover .hm-about__photo { transform: scale(1.02); }

/* CSS trick: corner bracket accents */
.hm-about__corner {
  position: absolute;
  width: 48px; height: 48px;
  pointer-events: none;
}

.hm-about__corner--a {
  top: -10px; left: -10px;
  border-top: 3px solid var(--p);
  border-left: 3px solid var(--p);
  border-radius: 12px 0 0 0;
}

.hm-about__corner--b {
  bottom: -10px; right: -10px;
  border-bottom: 3px solid var(--g);
  border-right: 3px solid var(--g);
  border-radius: 0 0 12px 0;
}

/* Floating badge */
.hm-about__badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: linear-gradient(135deg, var(--p), var(--s));
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 16px 40px rgba(81,132,197,0.35);
  z-index: 2;
  animation: hm-float 4s ease-in-out infinite;
}

.hm-about__badge-n {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--wh);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hm-about__badge-l {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
}

/* Content */
.hm-about__prose {
  font-family: 'Barlow', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--txt);
  margin-bottom: 1.5rem;
}

/* Key points — numbered list */
.hm-about__pts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 2rem;
}

.hm-about__pt {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--off);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--txt);
  transition: border-color 0.3s, background 0.3s, transform 0.35s var(--ease);
}

.hm-about__pt:hover {
  border-color: rgba(81,132,197,0.3);
  background: rgba(81,132,197,0.05);
  transform: translateX(4px);
}

.hm-about__pt-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--p);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   SERVICES
   ============================================================ */
.hm-services {
  position: relative;
  background: var(--dk);
  padding: var(--py) 0;
  overflow: hidden;
}

.hm-services__hdr {
  position: relative;
  z-index: 1;
  margin-bottom: 2.5rem;
}

.hm-services__hdr-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hm-svc-wrap {
  position: relative;
  z-index: 1;
}

/* ============================================================
   LOGISTICS & SUPPLY CHAIN — Accordion section
   Reference: mental:mi image — left content + right accordion
   ============================================================ */
.hm-logi {
  position: relative;
  padding: var(--py) var(--px);
  background: var(--wh);
  overflow: hidden;
}

/* Grid */
.hm-logi__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .hm-logi__grid { grid-template-columns: 1fr; }
}

/* Left side */
.hm-logi__left { position: relative; }

.hm-logi__intro {
  font-family: 'Barlow', sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--txt);
  margin: 0 0 2rem;
}

/* Floating badge */
.hm-logi__badge {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(135deg, var(--p), var(--s));
  border-radius: 10px;
  padding: 1.1rem 1.5rem;
  box-shadow: 0 12px 32px rgba(81,132,197,0.28);
  animation: hm-float 4s ease-in-out infinite;
}

.hm-logi__badge-main {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wh);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hm-logi__badge-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Right: Accordion */
.hm-logi__accordion { width: 100%; }

.hm-logi__item {
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.hm-logi__item:last-child { border-bottom: 1px solid var(--border); }

/* Button row */
.hm-logi__item-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  text-align: left;
  transition: padding-left 0.3s var(--ease);
}

.hm-logi__item--open .hm-logi__item-btn,
.hm-logi__item-btn:hover { padding-left: 0.4rem; }

.hm-logi__item-left {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex: 1;
}

.hm-logi__item-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--p);
  flex-shrink: 0;
  transition: color 0.3s;
}

.hm-logi__item:not(.hm-logi__item--open) .hm-logi__item-num {
  color: #a0aab8;
}

.hm-logi__item-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dk);
  transition: color 0.3s;
  line-height: 1.2;
}

.hm-logi__item:not(.hm-logi__item--open) .hm-logi__item-title {
  color: #5a6478;
}

.hm-logi__item-img {
  margin-left: 1.85rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(39,64,105,0.12);
  /* CSS trick: clip-path reveal on open */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
 
.hm-logi__item--open .hm-logi__item-img {
  clip-path: inset(0 0 0% 0);
}
 
.hm-logi__item-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
 
.hm-logi__item--open .hm-logi__item-img img:hover {
  transform: scale(1.04);
}

/* Right side: icon + chevron */
.hm-logi__item-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.hm-logi__item-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--p08);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.35s var(--ease),
              background 0.3s;
}

.hm-logi__item--open .hm-logi__item-icon {
  opacity: 1;
  transform: scale(1);
  background: var(--p15);
}

/* Chevron circle */
.hm-logi__item-chevron {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0aab8;
  transition: border-color 0.3s, color 0.3s, transform 0.35s var(--ease),
              background 0.3s;
  flex-shrink: 0;
}

.hm-logi__item--open .hm-logi__item-chevron {
  border-color: var(--p);
  color: var(--p);
  background: var(--p08);
  transform: rotate(45deg);
}

/* Body — hidden by default, reveals when open */
.hm-logi__item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease), opacity 0.35s;
  opacity: 0;
}

.hm-logi__item--open .hm-logi__item-body {
  max-height: 400px;
  opacity: 1;
}

.hm-logi__item-desc {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--txt);
  padding-bottom: 1.25rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--p15);
  margin-left: 0.2rem;
}

/* ============================================================
   MID CTA
   ============================================================ */
.hm-mid {
  position: relative;
  background: var(--dk);
  background-image: var(--mid-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

.hm-mid__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(130deg,
    rgba(26,45,74,0.96) 0%,
    rgba(81,132,197,0.75) 100%);
  z-index: 0;
}

.hm-mid__inner {
  position: relative;
  z-index: 1;
  padding: var(--py) var(--px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 768px) {
  .hm-mid__inner { grid-template-columns: 1fr; }
  .hm-mid { background-attachment: scroll; }
}

.hm-mid__body { position: relative; }

.hm-mid__text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.65);
  margin-bottom: 2rem;
  max-width: 480px;
}

/* ============================================================
   PROJECTS — Masonry
   ============================================================ */
.hm-projects {
  position: relative;
  padding: var(--py) var(--px);
  background: var(--wh);
  overflow: hidden;
}

.hm-projects__hdr {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* CSS trick: masonry-style grid */
.hm-projects__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

/* Featured card spans 2 rows left */
.hm-pcard--feat {
  grid-row: span 2;
}

@media (max-width: 991px) {
  .hm-projects__grid { grid-template-columns: repeat(2, 1fr); }
  .hm-pcard--feat { grid-row: span 1; }
}

@media (max-width: 576px) {
  .hm-projects__grid { grid-template-columns: 1fr; }
}

/* Project card */
.hm-pcard {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: var(--s);
  min-height: 240px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}

.hm-pcard--feat { min-height: 500px; }

.hm-pcard:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 52px rgba(39,64,105,0.22);
}

.hm-pcard__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease);
}

.hm-pcard:hover .hm-pcard__img { transform: scale(1.07); }

.hm-pcard__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,14,22,0.95) 0%,
    rgba(10,14,22,0.15) 55%,
    rgba(10,14,22,0.0) 100%);
  z-index: 1;
  transition: opacity 0.3s;
}

.hm-pcard:hover .hm-pcard__overlay { opacity: 0.95; }

/* Top accent bar */
.hm-pcard__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--p), var(--g));
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.hm-pcard:hover .hm-pcard__bar { transform: scaleX(1); }

.hm-pcard__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  z-index: 2;
  transform: translateY(5px);
  transition: transform 0.35s var(--ease);
}

.hm-pcard:hover .hm-pcard__body { transform: translateY(0); }

.hm-pcard__date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--g);
  margin-bottom: 0.35rem;
}

.hm-pcard__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--wh);
  margin: 0;
}

/* Status tag */
.hm-pcard__tag {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 3;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.hm-pcard__tag--active,
.hm-pcard__tag--ongoing { background: rgba(81,132,197,0.85); color: var(--wh); }
.hm-pcard__tag--completed { background: rgba(200,162,85,0.85); color: var(--dk); }
.hm-pcard__tag--upcoming { background: rgba(255,255,255,0.18); color: var(--wh); border: 1px solid rgba(255,255,255,0.3); }

/* Arrow */
.hm-pcard__arrow {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 3;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(81,132,197,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p);
  transition: background 0.3s, border-color 0.3s,
              color 0.3s, transform 0.35s var(--ease);
}

.hm-pcard:hover .hm-pcard__arrow {
  background: var(--p);
  border-color: var(--p);
  color: var(--wh);
  transform: translateX(3px);
}

/* ============================================================
   NEWS
   ============================================================ */
.hm-news {
  position: relative;
  padding: var(--py) var(--px);
  background: var(--off);
  overflow: hidden;
}

.hm-news__hdr {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hm-news__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .hm-news__grid { grid-template-columns: 1fr; }
}

/* Featured news card */
.hm-nfeat {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 460px;
  text-decoration: none;
  background: var(--s);
  box-shadow: 0 8px 32px rgba(39,64,105,0.14);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}

.hm-nfeat:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(39,64,105,0.2);
}

.hm-nfeat__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease);
}

.hm-nfeat:hover .hm-nfeat__img { transform: scale(1.06); }

.hm-nfeat__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,14,22,0.96) 0%,
    rgba(10,14,22,0.2) 60%);
  z-index: 1;
}

.hm-nfeat__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.75rem;
  z-index: 2;
}

.hm-nfeat__cat {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--g);
  margin-bottom: 0.5rem;
  display: block;
}

.hm-nfeat__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--wh);
  margin: 0 0 0.5rem;
}

.hm-nfeat__date {
  font-family: 'Barlow', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
}

/* News list items */
.hm-news__list-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hm-nitem {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.2s;
  border-radius: 0;
}

.hm-nitem:first-child { border-top: 1px solid var(--border); }

.hm-nitem:hover { background: rgba(81,132,197,0.04); padding-left: 0.5rem; }

.hm-nitem__img {
  height: 70px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}

.hm-nitem:hover .hm-nitem__img { transform: scale(1.04); }

.hm-nitem__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  position: relative;
}

.hm-nitem__date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p);
}

.hm-nitem__title {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dk);
  margin: 0;
  transition: color 0.2s;
}

.hm-nitem:hover .hm-nitem__title { color: var(--p); }

.hm-nitem__arrow {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--p);
  opacity: 0;
  transition: opacity 0.25s, transform 0.3s var(--ease);
}

.hm-nitem:hover .hm-nitem__arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
}

/* ============================================================
   SERVICE CARDS — svc-grid / svc-card
   Full-bleed image | Dark overlay | Hover reveal
   CSS tricks: clip-path reveal, pseudo shimmer,
               number badge, gradient bar, desc slide-up
   ============================================================ */

/* ─── GRID ─────────────────────────────────────────────────── */
.svc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

@media (max-width: 991px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 576px) {
  .svc-grid { grid-template-columns: 1fr !important; }
}

/* ─── CARD ─────────────────────────────────────────────────── */
.svc-card {
  position: relative !important;
  height: 400px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  isolation: isolate !important;

  /* Lift on hover */
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
}

.svc-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 60px rgba(39, 64, 105, 0.32) !important;
}

/* ─── BACKGROUND IMAGE ────────────────────────────────────── */
.svc-card__bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: 0 !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svc-card:hover .svc-card__bg {
  transform: scale(1.08) !important;
}

/* ─── BASE OVERLAY ────────────────────────────────────────── */
.svc-card__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(
    to top,
    rgba(10, 14, 22, 0.97) 0%,
    rgba(10, 14, 22, 0.6)  45%,
    rgba(10, 14, 22, 0.15) 100%
  ) !important;
  transition: opacity 0.4s !important;
}

/* ─── HOVER OVERLAY (deeper on hover) ────────────────────── */
.svc-card__overlay-hover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(
    160deg,
    rgba(39, 64, 105, 0.45) 0%,
    rgba(13, 17, 23, 0.0)   60%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.5s !important;
}

.svc-card:hover .svc-card__overlay-hover {
  opacity: 1 !important;
}

/* ─── CSS TRICK 1: Shimmer sweep on hover ─────────────────── */
.svc-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -75% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  ) !important;
  z-index: 4 !important;
  transform: skewX(-15deg) !important;
  transition: left 0s !important;
  pointer-events: none !important;
}

.svc-card:hover::before {
  left: 150% !important;
  transition: left 0.65s ease !important;
}

/* ─── TOP ACCENT BAR ──────────────────────────────────────── */
.svc-card__bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  z-index: 5 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svc-card:hover .svc-card__bar {
  transform: scaleX(1) !important;
}

/* ─── CSS TRICK 2: Number badge ───────────────────────────── */
.svc-card__num {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.06) !important;
  z-index: 2 !important;
  letter-spacing: -0.04em !important;
  transition: color 0.4s, transform 0.4s !important;
  pointer-events: none !important;
  user-select: none !important;
}

.svc-card:hover .svc-card__num {
  color: rgba(81, 132, 197, 0.18) !important;
  transform: scale(1.1) !important;
}

/* ─── CARD BODY ───────────────────────────────────────────── */
.svc-card__body {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1.75rem !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* ─── EYEBROW ─────────────────────────────────────────────── */
.svc-card__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 0.55rem !important;
  transition: color 0.3s !important;
}

.svc-card:hover .svc-card__eyebrow {
  color: #c8a255 !important;
}

.svc-card__eyebrow-line {
  display: inline-block !important;
  width: 18px !important;
  height: 1.5px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
}

/* ─── TITLE ───────────────────────────────────────────────── */
.svc-card__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 0 0.9rem !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.svc-card:hover .svc-card__title {
  transform: translateY(-4px) !important;
}

/* ─── CSS TRICK 3: Description clip-path reveal ───────────── */
.svc-card__desc {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  margin: 0 0 1rem !important;

  /* clip-path reveal — cleaner than max-height */
  clip-path: inset(0 0 100% 0) !important;
  transform: translateY(12px) !important;
  opacity: 0 !important;
  transition: clip-path 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform  0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity    0.35s ease !important;
}

.svc-card:hover .svc-card__desc {
  clip-path: inset(0 0 0% 0) !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ─── CTA ROW ─────────────────────────────────────────────── */
.svc-card__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: border-color 0.3s !important;
}

.svc-card:hover .svc-card__cta {
  border-color: rgba(81, 132, 197, 0.35) !important;
}

.svc-card__cta-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  transition: color 0.3s, letter-spacing 0.3s !important;
}

.svc-card:hover .svc-card__cta-label {
  color: #c8a255 !important;
  letter-spacing: 0.16em !important;
}

/* Arrow circle */
.svc-card__cta-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(81, 132, 197, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  transition: background 0.3s,
              border-color 0.3s,
              color 0.3s,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.svc-card:hover .svc-card__cta-icon {
  background: rgba(200, 162, 85, 0.15) !important;
  border-color: rgba(200, 162, 85, 0.55) !important;
  color: #c8a255 !important;
  transform: translateX(4px) !important;
}

/* ============================================================
   SERVICES CAROUSEL ARROWS — svc-arrow
   .svc-arrow--prev  white + border
   .svc-arrow--next  solid blue gradient
   ============================================================ */

/* ─── WRAP — gives arrows their absolute context ────────── */
.svc-carousel-wrap {
    position: relative !important;
    padding: 0 2rem !important;
}

/* ─── BASE ARROW ─────────────────────────────────────────── */
.svc-arrow {
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s,
                background 0.3s !important;
}

/* ─── PREV — white with blue border ─────────────────────── */
.svc-arrow--prev {
    left: -14px !important;
    background: #ffffff !important;
    border: 1.5px solid #e0e4ec !important;
    box-shadow: 0 4px 16px rgba(39, 64, 105, 0.1) !important;
    color: #5184c5 !important;
}

.svc-arrow--prev:hover {
    background: #f4f6fb !important;
    border-color: #5184c5 !important;
    box-shadow: 0 8px 24px rgba(81, 132, 197, 0.22) !important;
    transform: translateY(-50%) translateX(-2px) !important;
    color: #274069 !important;
}

/* ─── NEXT — solid blue gradient ────────────────────────── */
.svc-arrow--next {
    right: -14px !important;
    background: linear-gradient(135deg, #5184c5 0%, #274069 100%) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(81, 132, 197, 0.38) !important;
    color: #ffffff !important;
}

.svc-arrow--next:hover {
    box-shadow: 0 10px 28px rgba(81, 132, 197, 0.52) !important;
    transform: translateY(-50%) translateX(2px) !important;
}

/* ─── DISABLED ───────────────────────────────────────────── */
.svc-arrow:disabled,
.svc-arrow.slick-disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
}

/* ─── SLICK DOTS ─────────────────────────────────────────── */
.svc-carousel-wrap .slick-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 1.5rem 0 0 !important;
    padding: 0 !important;
}

.svc-carousel-wrap .slick-dots li button {
    width: 24px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: #d4d8e2 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    transition: background 0.3s, width 0.3s !important;
}

.svc-carousel-wrap .slick-dots li.slick-active button {
    background: linear-gradient(90deg, #5184c5, #c8a255) !important;
    width: 32px !important;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .svc-carousel-wrap { padding: 0 2.5rem !important; }
}

@media (max-width: 576px) {
    .svc-carousel-wrap { padding: 0 2rem !important; }
}

/* ============================================================
   SERVICE SINGLE PAGE — single-services.css
   Split hero | Main + Sidebar | CTA strip | Related cards
   Brand: #5184c5 | #274069 | #c8a255
   Fonts: Barlow Condensed (headings) | Barlow (body)
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes ssvc-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ssvc-lineGrow {
    from { width: 0; }
    to   { width: 20px; }
}

@keyframes ssvc-barDrop {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ============================================================
   HERO — SPLIT
   ============================================================ */
.ssvc-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: 520px !important;
    overflow: hidden !important;
}

/* ── Left dark panel ── */
.ssvc-hero__left {
    background: #0d1117 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.ssvc-hero__left-inner {
    padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem) !important;
    position: relative !important;
    width: 100% !important;
    animation: ssvc-fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both !important;
}

/* Vertical accent bar */
.ssvc-hero__accent-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(to bottom, #5184c5, #c8a255) !important;
    transform-origin: top !important;
    animation: ssvc-barDrop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both !important;
}

/* Eyebrow */
.ssvc-hero__eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #5184c5 !important;
    margin-bottom: 1.1rem !important;
}

.ssvc-hero__eyebrow-line {
    display: inline-block !important;
    width: 0 !important;
    height: 1.5px !important;
    background: #5184c5 !important;
    flex-shrink: 0 !important;
    animation: ssvc-lineGrow 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards !important;
}

/* Title */
.ssvc-hero__title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.06 !important;
    color: #ffffff !important;
    margin: 0 0 1.25rem !important;
}

/* Intro */
.ssvc-hero__intro {
    font-family: 'Barlow', sans-serif !important;
    font-size: clamp(0.88rem, 1.4vw, 1rem) !important;
    font-weight: 300 !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    max-width: 440px !important;
    margin: 0 0 2rem !important;
}

/* Breadcrumb */
.ssvc-hero__breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
}

.ssvc-hero__breadcrumb a,
.ssvc-hero__breadcrumb span {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: color 0.2s !important;
}

.ssvc-hero__breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

.ssvc-hero__breadcrumb span:last-child {
    color: #5184c5 !important;
}

.ssvc-hero__breadcrumb-sep {
    color: rgba(255, 255, 255, 0.15) !important;
}

/* ── Right image panel ── */
.ssvc-hero__right {
    position: relative !important;
    overflow: hidden !important;
    background: #1a2d4a !important;
}

.ssvc-hero__img {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 8s ease !important;
    animation: ssvc-fadeUp 1s ease 0s both !important;
}

.ssvc-hero__right:hover .ssvc-hero__img {
    transform: scale(1.04) !important;
}

.ssvc-hero__img-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to left,
        rgba(13, 17, 23, 0.1) 0%,
        rgba(13, 17, 23, 0.45) 100%
    ) !important;
    z-index: 1 !important;
}

/* Ghost number on image */
.ssvc-hero__ghost-num {
    position: absolute !important;
    bottom: 1.5rem !important;
    right: 1.75rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 6rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
    color: rgba(255, 255, 255, 0.05) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* ── Hero responsive ── */
@media (max-width: 768px) {
    .ssvc-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .ssvc-hero__right {
        height: 260px !important;
        order: -1 !important;
    }
}

/* ============================================================
   MAIN LAYOUT — content + sidebar
   ============================================================ */
.ssvc-layout {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 2rem !important;
    padding-top: clamp(2rem, 4vw, 3.5rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3.5rem) !important;
    align-items: start !important;
}

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

    .ssvc-sidebar {
        order: -1 !important;
    }
}

/* ============================================================
   SHARED BLOCK STYLES
   ============================================================ */
.ssvc-block {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) !important;
    border: 1px solid #eaecf2 !important;
    box-shadow: 0 2px 16px rgba(39, 64, 105, 0.05) !important;
    margin-bottom: 1.5rem !important;
}

/* Eyebrow inside blocks */
.ssvc-block__eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #5184c5 !important;
    margin-bottom: 0.65rem !important;
}

.ssvc-block__eyebrow span {
    display: inline-block !important;
    width: 20px !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, #5184c5, #c8a255) !important;
    flex-shrink: 0 !important;
    border-radius: 1px !important;
}

.ssvc-block__heading {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: #0d1117 !important;
    margin: 0 0 1.25rem !important;
}

/* ── Prose content ── */
.ssvc-prose {
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    color: #4a5568 !important;
}

.ssvc-prose p { margin: 0 0 1rem !important; }
.ssvc-prose ul { padding-left: 1.25rem !important; margin: 0 0 1rem !important; }
.ssvc-prose li { margin-bottom: 0.4rem !important; }

.ssvc-prose h2,
.ssvc-prose h3 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    color: #0d1117 !important;
    margin: 1.5rem 0 0.75rem !important;
    letter-spacing: -0.02em !important;
}

/* ============================================================
   KEY FEATURES GRID
   ============================================================ */
.ssvc-features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
}

@media (max-width: 576px) {
    .ssvc-features-grid { grid-template-columns: 1fr !important; }
}

.ssvc-feature {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem 1.1rem !important;
    border-radius: 7px !important;
    background: #f7f8fb !important;
    border: 1px solid #eaecf2 !important;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s !important;
}

.ssvc-feature:hover {
    border-color: rgba(81, 132, 197, 0.3) !important;
    box-shadow: 0 6px 20px rgba(81, 132, 197, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Gradient dot */
.ssvc-feature__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #5184c5, #c8a255) !important;
    flex-shrink: 0 !important;
    margin-top: 4px !important;
}

.ssvc-feature__title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #1a2d4a !important;
    margin-bottom: 0.25rem !important;
}

.ssvc-feature__desc {
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    color: #6b7a8d !important;
}

/* ============================================================
   CTA STRIP
   ============================================================ */
.ssvc-cta-strip {
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #274069 0%, #1a2d4a 100%) !important;
    margin-bottom: 1.5rem !important;
}

/* Ghost text */
.ssvc-cta-strip__ghost {
    position: absolute !important;
    right: -10px !important;
    bottom: -20px !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 6rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em !important;
    color: rgba(255, 255, 255, 0.04) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Top gradient bar */
.ssvc-cta-strip::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #5184c5, #c8a255) !important;
}

.ssvc-cta-strip__inner {
    padding: 2.25rem clamp(1.5rem, 3vw, 2.5rem) !important;
    position: relative !important;
    z-index: 1 !important;
}

.ssvc-cta-strip__eyebrow {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #c8a255 !important;
    margin-bottom: 0.5rem !important;
}

.ssvc-cta-strip__heading {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    margin: 0 0 0.75rem !important;
    max-width: 480px !important;
}

.ssvc-cta-strip__text {
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    max-width: 440px !important;
    margin: 0 0 1.5rem !important;
}

.ssvc-cta-strip__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #ffffff !important;
    padding: 0.8rem 1.75rem !important;
    border-radius: 3px !important;
    background: linear-gradient(135deg, #5184c5, #274069) !important;
    box-shadow: 0 6px 20px rgba(81, 132, 197, 0.35) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    position: relative !important;
    overflow: hidden !important;
}

.ssvc-cta-strip__btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(81, 132, 197, 0.48) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.ssvc-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    position: sticky !important;
    top: 90px !important;
}

.ssvc-sidebar__card {
    border-radius: 10px !important;
    border: 1px solid #eaecf2 !important;
    overflow: hidden !important;
}

/* ── Form card ── */
.ssvc-form-card {
    background: #ffffff !important;
    padding: 1.75rem !important;
    box-shadow: 0 4px 24px rgba(39, 64, 105, 0.08) !important;
}

.ssvc-form-card__eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #5184c5 !important;
    margin-bottom: 0.6rem !important;
}

.ssvc-form-card__eyebrow span {
    display: inline-block !important;
    width: 16px !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, #5184c5, #c8a255) !important;
}

.ssvc-form-card__heading {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #0d1117 !important;
    margin: 0 0 1.25rem !important;
}

/* Form fields */
.ssvc-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
}

.ssvc-form__field input,
.ssvc-form__field textarea {
    width: 100% !important;
    padding: 0.7rem 0.9rem !important;
    border: 1px solid #eaecf2 !important;
    border-radius: 5px !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.83rem !important;
    font-weight: 400 !important;
    color: #1a2d4a !important;
    background: #fafbfd !important;
    outline: none !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
    -webkit-appearance: none !important;
}

.ssvc-form__field input::placeholder,
.ssvc-form__field textarea::placeholder {
    color: #b0bac8 !important;
}

.ssvc-form__field input:focus,
.ssvc-form__field textarea:focus {
    border-color: #5184c5 !important;
    box-shadow: 0 0 0 3px rgba(81, 132, 197, 0.1) !important;
    background: #ffffff !important;
}

.ssvc-form__field textarea {
    resize: vertical !important;
    min-height: 90px !important;
}

.ssvc-form__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.85rem !important;
    background: linear-gradient(135deg, #5184c5 0%, #274069 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 5px !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(81, 132, 197, 0.3) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    margin-top: 0.25rem !important;
}

.ssvc-form__btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(81, 132, 197, 0.42) !important;
}

/* ── Contact card ── */
.ssvc-contact-card {
    background: #0d1117 !important;
    padding: 1.25rem 1.5rem !important;
    border-color: rgba(81, 132, 197, 0.2) !important;
}

.ssvc-contact-card__label {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.3) !important;
    margin-bottom: 0.4rem !important;
}

.ssvc-contact-card__email,
.ssvc-contact-card__phone {
    display: block !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    margin-bottom: 0.25rem !important;
    transition: color 0.2s !important;
}

.ssvc-contact-card__email:hover,
.ssvc-contact-card__phone:hover {
    color: #5184c5 !important;
}

/* ── Category card ── */
.ssvc-cat-card {
    background: #f7f8fb !important;
    padding: 1.25rem 1.5rem !important;
}

.ssvc-cat-card__label {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #a0aab8 !important;
    margin-bottom: 0.3rem !important;
}

.ssvc-cat-card__value {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #274069 !important;
    margin-bottom: 0.75rem !important;
}

.ssvc-cat-card__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #5184c5 !important;
    text-decoration: none !important;
    transition: gap 0.25s, color 0.25s !important;
}

.ssvc-cat-card__link:hover {
    color: #274069 !important;
    gap: 0.65rem !important;
}

/* ============================================================
   RELATED SERVICES
   ============================================================ */
.ssvc-related {
    padding-top: clamp(2rem, 4vw, 3.5rem) !important;
    padding-bottom: clamp(2rem, 4vw, 4rem) !important;
    border-top: 1px solid #eaecf2 !important;
}

.ssvc-related__header {
    margin-bottom: 1.75rem !important;
}

.ssvc-related__heading {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #0d1117 !important;
    margin: 0 !important;
}

/* Related grid */
.ssvc-related__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
}

@media (max-width: 768px) {
    .ssvc-related__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .ssvc-related__grid { grid-template-columns: 1fr !important; }
}

/* Related card */
.ssvc-rel-card {
    position: relative !important;
    display: block !important;
    height: 180px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    background: #1a2d4a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ssvc-rel-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 44px rgba(39, 64, 105, 0.22) !important;
}

.ssvc-rel-card__img {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ssvc-rel-card:hover .ssvc-rel-card__img {
    transform: scale(1.07) !important;
}

.ssvc-rel-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to top,
        rgba(10, 14, 22, 0.92) 0%,
        rgba(10, 14, 22, 0.2) 65%
    ) !important;
    z-index: 1 !important;
}

/* Top bar scales in on hover */
.ssvc-rel-card__bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #5184c5, #c8a255) !important;
    z-index: 3 !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ssvc-rel-card:hover .ssvc-rel-card__bar {
    transform: scaleX(1) !important;
}

.ssvc-rel-card__body {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1rem 1.25rem !important;
    z-index: 2 !important;
}

.ssvc-rel-card__cat {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #5184c5 !important;
    margin-bottom: 0.3rem !important;
    transition: color 0.3s !important;
}

.ssvc-rel-card:hover .ssvc-rel-card__cat {
    color: #c8a255 !important;
}

.ssvc-rel-card__title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
}

/* Arrow circle — bottom right */
.ssvc-rel-card__arrow {
    position: absolute !important;
    bottom: 1rem !important;
    right: 1rem !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(81, 132, 197, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #5184c5 !important;
    z-index: 2 !important;
    transition: background 0.3s, border-color 0.3s,
                color 0.3s, transform 0.3s !important;
}

.ssvc-rel-card:hover .ssvc-rel-card__arrow {
    background: #5184c5 !important;
    border-color: #5184c5 !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

/* ============================================================
   ABOUT PAGE — page-about.css
   All sections | CSS tricks throughout
   Brand: #5184c5 | #274069 | #c8a255 | #0d1117
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes abt-fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes abt-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes abt-lineGrow {
  from { width: 0; }
  to   { width: 20px; }
}
@keyframes abt-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.3; }
  50%       { transform: scale(2.2); opacity: 0; }
}
@keyframes abt-partnerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes abt-watermarkFloat {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-12px); }
}
@keyframes abt-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes abt-barGrow {
  from { width: 0; }
  to   { width: 100%; }
}

/* ─── SHARED ELEMENTS ─────────────────────────────────────── */
.abt-section-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 0.65rem !important;
}

.abt-section-eyebrow span {
  display: inline-block !important;
  width: 20px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
  animation: abt-lineGrow 0.5s cubic-bezier(0.16,1,0.3,1) 0.4s both !important;
}

.abt-section-heading {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #0d1117 !important;
  margin: 0 0 1.25rem !important;
}

.abt-prose {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  color: #4a5568 !important;
}

.abt-prose p { margin: 0 0 1rem !important; }

/* ============================================================
   1. HERO — LIGHT
   ============================================================ */
.abt-hero {
  position: relative !important;
  background: #f7f8fb !important;
  overflow: hidden !important;
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem) !important;
}

.abt-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.08 !important;
}

.abt-hero__bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(247,248,251,0.4), #f7f8fb) !important;
}

.abt-hero__inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
}

.abt-hero__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 1rem !important;
  animation: abt-fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s both !important;
}

.abt-hero__eyebrow-line {
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  border-radius: 1px !important;
}

.abt-hero__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(3rem, 7vw, 6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: #0d1117 !important;
  margin: 0 0 1.25rem !important;
  animation: abt-fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both !important;
}

/* CSS trick: shimmer highlight on title */
.abt-hero__title::after {
  content: '' !important;
  display: block !important;
  width: 80px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255, #5184c5) !important;
  background-size: 200% auto !important;
  border-radius: 2px !important;
  margin-top: 0.75rem !important;
  animation: abt-shimmer 3s linear infinite !important;
}

.abt-hero__subtitle {
  font-family: 'Barlow', sans-serif !important;
  font-size: clamp(1rem, 1.8vw, 1.15rem) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: #5a6478 !important;
  max-width: 560px !important;
  margin: 0 0 1.75rem !important;
  animation: abt-fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.35s both !important;
}

.abt-hero__breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  animation: abt-fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s both !important;
}

.abt-hero__breadcrumb a,
.abt-hero__breadcrumb span {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #a0aab8 !important;
  transition: color 0.2s !important;
}

.abt-hero__breadcrumb a:hover { color: #5184c5 !important; }
.abt-hero__breadcrumb span:last-child { color: #5184c5 !important; }

.abt-hero__wave {
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  line-height: 0 !important;
}

.abt-hero__wave svg {
  width: 100% !important;
  height: 60px !important;
  display: block !important;
}

/* ============================================================
   2. OVERVIEW
   ============================================================ */
.abt-overview {
  padding: clamp(3rem, 6vw, 6rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #ffffff !important;
}

.abt-overview__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .abt-overview__grid { grid-template-columns: 1fr !important; }
}

.abt-overview__img-wrap {
  position: relative !important;
}

.abt-overview__img {
  width: 100% !important;
  padding-bottom: 70% !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(39, 64, 105, 0.15) !important;
}

/* Corner brackets */
.abt-overview__img::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  left: -10px !important;
  width: 50% !important;
  height: 50% !important;
  border-top: 3px solid #5184c5 !important;
  border-left: 3px solid #5184c5 !important;
  border-radius: 12px 0 0 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.abt-overview__img::after {
  content: '' !important;
  position: absolute !important;
  bottom: -10px !important;
  right: -10px !important;
  width: 50% !important;
  height: 50% !important;
  border-bottom: 3px solid #c8a255 !important;
  border-right: 3px solid #c8a255 !important;
  border-radius: 0 0 12px 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Floating stat card */
.abt-overview__float-card {
  position: absolute !important;
  display: none;
  bottom: -1.5rem !important;
  right: -1.5rem !important;
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: 0 16px 40px rgba(81, 132, 197, 0.35) !important;
  z-index: 3 !important;
  animation: abt-fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s both !important;
}

.abt-overview__float-num {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

.abt-overview__float-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  margin-top: 4px !important;
}

/* ============================================================
   3. MISSION / VISION / CORE VALUES
   ============================================================ */
.abt-mvv {
  padding: clamp(3rem, 6vw, 6rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #f7f8fb !important;
}

.abt-mvv__top {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  margin-bottom: 3rem !important;
}

@media (max-width: 768px) {
  .abt-mvv__top { grid-template-columns: 1fr !important; }
}

.abt-mvv__card {
  border-radius: 12px !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s !important;
}

.abt-mvv__card:hover {
  transform: translateY(-5px) !important;
}

.abt-mvv__card--mission {
  background: linear-gradient(135deg, #274069 0%, #1a2d4a 100%) !important;
  box-shadow: 0 8px 32px rgba(39, 64, 105, 0.2) !important;
}

.abt-mvv__card--vision {
  background: linear-gradient(135deg, #0d1117 0%, #1a2d4a 100%) !important;
  box-shadow: 0 8px 32px rgba(13, 17, 23, 0.2) !important;
  border-color: rgba(81, 132, 197, 0.2) !important;
}

/* Gradient top bar on cards */
.abt-mvv__card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
}

.abt-mvv__card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: rgba(81, 132, 197, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.1rem !important;
  color: #5184c5 !important;
}

.abt-mvv__card-eyebrow {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #c8a255 !important;
  margin-bottom: 0.6rem !important;
}

.abt-mvv__card-text {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.72) !important;
  margin: 0 !important;
}

/* Values header */
.abt-mvv__values-header {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.abt-mvv__values-header .abt-section-eyebrow {
  justify-content: center !important;
}

/* Values grid — Image 1 style */
.abt-values-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 991px) {
  .abt-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 576px) {
  .abt-values-grid { grid-template-columns: 1fr !important; }
}

.abt-value-card {
  background: #ffffff !important;
  border: 1.5px solid #eaecf2 !important;
  border-radius: 12px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s,
              box-shadow 0.4s !important;
}

.abt-value-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(81, 132, 197, 0.4) !important;
  box-shadow: 0 20px 48px rgba(81, 132, 197, 0.12) !important;
}

/* Bottom fill on hover — CSS trick */
.abt-value-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 0 !important;
  background: linear-gradient(to top,
    rgba(81, 132, 197, 0.06) 0%,
    transparent 100%) !important;
  transition: height 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  z-index: 0 !important;
}

.abt-value-card:hover::after {
  height: 100% !important;
}

.abt-value-card__icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 1.1rem !important;
  border-radius: 12px !important;
  background: rgba(81, 132, 197, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background 0.3s, color 0.3s !important;
}

.abt-value-card:hover .abt-value-card__icon {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  color: #ffffff !important;
}

.abt-value-card__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #0d1117 !important;
  margin: 0 0 0.6rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.abt-value-card__desc {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: #6b7a8d !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   4. STATS STRIP
   ============================================================ */
.abt-stats {
  background: linear-gradient(135deg, #274069 0%, #1a2d4a 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.abt-stats::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 4px,
    rgba(255,255,255,0.015) 4px,
    rgba(255,255,255,0.015) 8px
  ) !important;
  pointer-events: none !important;
}

.abt-stats__inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .abt-stats__inner { grid-template-columns: repeat(2, 1fr) !important; }
}

.abt-stat {
  padding: 2.5rem 2rem !important;
  text-align: center !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  transition: background 0.3s !important;
  position: relative !important;
}

.abt-stat:last-child { border-right: none !important; }

.abt-stat:hover {
  background: rgba(81, 132, 197, 0.1) !important;
}

.abt-stat__icon {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto 0.75rem !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.6 !important;
  display: block !important;
}

.abt-stat__num {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 2px !important;
  letter-spacing: -0.03em !important;
}

.abt-stat__suffix {
  font-size: 1.5rem !important;
  color: #c8a255 !important;
}

.abt-stat__label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 0.4rem !important;
}

/* ============================================================
   5. WHY CHOOSE US — Accordion + Image switcher
   ============================================================ */
.abt-wcu {
  padding: clamp(3rem, 6vw, 6rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
}

/* CSS trick: massive watermark behind content */
.abt-wcu__watermark {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(6rem, 18vw, 16rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: rgba(81, 132, 197, 0.04) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
  animation: abt-watermarkFloat 6s ease-in-out infinite alternate !important;
}

.abt-wcu__header {
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 2.5rem !important;
}

.abt-wcu__layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: start !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .abt-wcu__layout { grid-template-columns: 1fr !important; }
}

/* Accordion */
.abt-wcu__accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.abt-wcu__item {
  border-bottom: 1px solid #eaecf2 !important;
  overflow: hidden !important;
}

.abt-wcu__item:first-child {
  border-top: 1px solid #eaecf2 !important;
}

.abt-wcu__item-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 1.1rem 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  gap: 1rem !important;
  transition: padding-left 0.3s !important;
}

.abt-wcu__item.active .abt-wcu__item-btn,
.abt-wcu__item-btn:hover {
  padding-left: 0.5rem !important;
}

.abt-wcu__item-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #3d4a5c !important;
  transition: color 0.3s !important;
}

.abt-wcu__item.active .abt-wcu__item-title {
  color: #5184c5 !important;
}

.abt-wcu__item-chevron {
  flex-shrink: 0 !important;
  color: #a0aab8 !important;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), color 0.3s !important;
}

.abt-wcu__item.active .abt-wcu__item-chevron {
  transform: rotate(180deg) !important;
  color: #5184c5 !important;
}

.abt-wcu__item-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1),
              padding 0.35s !important;
}

.abt-wcu__item.active .abt-wcu__item-body {
  max-height: 200px !important;
  padding-bottom: 1rem !important;
}

.abt-wcu__item-body p {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: #6b7a8d !important;
  margin: 0 !important;
  padding-left: 0.5rem !important;
  border-left: 2px solid linear-gradient(#5184c5, #c8a255) !important;
  border-left: 2px solid #5184c5 !important;
}

/* Image panels */
.abt-wcu__images {
  position: relative !important;
  height: 420px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.abt-wcu__img-panel {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #1a2d4a !important;
  opacity: 0 !important;
  transform: scale(1.04) !important;
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}

.abt-wcu__img-panel.active {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.abt-wcu__img-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(39,64,105,0.55) 0%,
    rgba(13,17,23,0.2) 100%
  ) !important;
  z-index: 1 !important;
}

.abt-wcu__img-num {
  position: absolute !important;
  bottom: 1.25rem !important;
  right: 1.5rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 4rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  color: rgba(255,255,255,0.08) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ============================================================
   6. SERVICES PILLS
   ============================================================ */
.abt-pills {
  padding: clamp(3rem, 6vw, 6rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #f7f8fb !important;
}

.abt-pills__header {
  text-align: center !important;
  margin-bottom: 2.5rem !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.abt-pills__header .abt-section-eyebrow {
  justify-content: center !important;
}

.abt-pills__intro {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.92rem !important;
  color: #6b7a8d !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

.abt-pills__wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
  justify-content: center !important;
}

/* Pill — image 4 style with border + plus sign */
.abt-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.75rem 1.5rem !important;
  border: 1.5px solid #d0d8e8 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  background: #ffffff !important;
  transition: border-color 0.3s,
              background 0.3s,
              transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s !important;
  position: relative !important;
  overflow: hidden !important;
}

/* CSS trick: fill sweep on hover */
.abt-pill::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  border-radius: inherit !important;
}

.abt-pill:hover {
  border-color: #5184c5 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(81, 132, 197, 0.2) !important;
}

.abt-pill:hover::before {
  opacity: 1 !important;
}

.abt-pill__text {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #274069 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color 0.3s !important;
}

.abt-pill:hover .abt-pill__text {
  color: #ffffff !important;
}

.abt-pill__plus {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid #d0d8e8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  transition: border-color 0.3s, color 0.3s, transform 0.3s !important;
}

.abt-pill:hover .abt-pill__plus {
  border-color: rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
  transform: rotate(45deg) !important;
}

/* Featured/active pill */
.abt-pill.abt-pill--active {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-color: transparent !important;
}

.abt-pill.abt-pill--active .abt-pill__text {
  color: #ffffff !important;
}

.abt-pill.abt-pill--active .abt-pill__plus {
  border-color: rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
}

/* ============================================================
   7. TRADING & COMMERCIAL OPERATIONS
   ============================================================ */
.abt-trading {
  padding: clamp(3rem, 6vw, 6rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #0d1117 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* CSS trick: massive ghost bg word */
.abt-trading__bg-num {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(8rem, 22vw, 20rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  color: rgba(255,255,255,0.02) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
}

.abt-trading__header {
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 3rem !important;
}

.abt-trading__header .abt-section-heading {
  color: #ffffff !important;
}

.abt-trading__intro {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.55) !important;
  max-width: 560px !important;
  margin: 0 !important;
}

.abt-trading__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 991px) {
  .abt-trading__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 576px) {
  .abt-trading__grid { grid-template-columns: 1fr !important; }
}

.abt-trading__card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 1.75rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background 0.3s,
              border-color 0.3s,
              transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.abt-trading__card:hover {
  background: rgba(81, 132, 197, 0.1) !important;
  border-color: rgba(81, 132, 197, 0.35) !important;
  transform: translateY(-5px) !important;
}

/* CSS trick: animated bar fills bottom on hover */
.abt-trading__card-bar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  width: 0 !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.abt-trading__card:hover .abt-trading__card-bar {
  width: 100% !important;
}

.abt-trading__card-num {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: rgba(255,255,255,0.05) !important;
  line-height: 1 !important;
  margin-bottom: 0.5rem !important;
  transition: color 0.3s !important;
}

.abt-trading__card:hover .abt-trading__card-num {
  color: rgba(81, 132, 197, 0.2) !important;
}

.abt-trading__card-icon {
  color: #5184c5 !important;
  font-size: 1.25rem !important;
  margin-bottom: 0.85rem !important;
}

.abt-trading__card-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  margin: 0 0 0.6rem !important;
}

.abt-trading__card-text {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
}

/* ============================================================
   8. GLOBAL REACH
   ============================================================ */
.abt-reach {
  padding: clamp(3rem, 6vw, 6rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #ffffff !important;
}

.abt-reach__header {
  margin-bottom: 2.5rem !important;
}

.abt-reach__intro {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.92rem !important;
  color: #6b7a8d !important;
  line-height: 1.75 !important;
  max-width: 480px !important;
  margin: 0 !important;
}

.abt-reach__layout {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 3rem !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .abt-reach__layout { grid-template-columns: 1fr !important; }
}

.abt-reach__map {
  background: #f7f8fb !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  border: 1px solid #eaecf2 !important;
}

.abt-reach__map-svg {
  width: 100% !important;
  height: auto !important;
}

.abt-reach__landmass path {
  transition: fill 0.3s !important;
}

/* Blinking dot animation */
.abt-reach__dot circle:first-child {
  animation: abt-pulse 2.5s ease-out infinite !important;
}

.abt-reach__dot:nth-child(2) circle:first-child {
  animation-delay: 0.5s !important;
}

.abt-reach__dot:nth-child(3) circle:first-child {
  animation-delay: 1s !important;
}

.abt-reach__dot:nth-child(4) circle:first-child {
  animation-delay: 1.5s !important;
}

.abt-reach__dot:nth-child(5) circle:first-child {
  animation-delay: 0.8s !important;
}

/* Region list */
.abt-reach__regions {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.abt-reach__region {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  padding: 1rem 1.1rem !important;
  border-radius: 8px !important;
  border: 1px solid #eaecf2 !important;
  transition: border-color 0.3s, background 0.3s, transform 0.35s !important;
  cursor: default !important;
}

.abt-reach__region:hover {
  border-color: rgba(81, 132, 197, 0.3) !important;
  background: rgba(81, 132, 197, 0.04) !important;
  transform: translateX(4px) !important;
}

.abt-reach__region-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5184c5, #c8a255) !important;
  flex-shrink: 0 !important;
  margin-top: 5px !important;
}

.abt-reach__region-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #274069 !important;
  margin-bottom: 0.2rem !important;
}

.abt-reach__region-desc {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: #8a95a8 !important;
}

/* ============================================================
   9. PARTNERS CAROUSEL — infinite CSS scroll
   ============================================================ */
.abt-partners {
  padding: clamp(2.5rem, 5vw, 5rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #f7f8fb !important;
}

.abt-partners__header {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.abt-partners__header .abt-section-eyebrow {
  justify-content: center !important;
}

.abt-partners__track-wrap {
  overflow: hidden !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  ) !important;
}

.abt-partners__track {
  display: flex !important;
  gap: 3rem !important;
  width: max-content !important;
  animation: abt-partnerScroll 30s linear infinite !important;
}

.abt-partners__track:hover {
  animation-play-state: paused !important;
}

.abt-partners__logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.abt-partners__logo img {
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(1) !important;
  opacity: 0.45 !important;
  transition: filter 0.3s, opacity 0.3s !important;
}

.abt-partners__logo:hover img {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}

/* ============================================================
   10. MID CTA — Let's Build Together
   ============================================================ */
.abt-cta {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #274069 0%, #0d1117 100%) !important;
  background-size: cover !important;
  background-position: center !important;
}

.abt-cta__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(39, 64, 105, 0.92) 0%,
    rgba(13, 17, 23, 0.88) 100%
  ) !important;
  z-index: 0 !important;
}

.abt-cta__inner {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  padding-top: clamp(3.5rem, 8vw, 7rem) !important;
  padding-bottom: clamp(3.5rem, 8vw, 7rem) !important;
}

.abt-cta__eyebrow {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #c8a255 !important;
  margin-bottom: 0.85rem !important;
}

.abt-cta__heading {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  margin: 0 0 1rem !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CSS trick: shimmer on heading */
.abt-cta__heading::after {
  content: '' !important;
  display: block !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255, #5184c5) !important;
  background-size: 200% auto !important;
  border-radius: 2px !important;
  margin: 0.85rem auto 0 !important;
  animation: abt-shimmer 3s linear infinite !important;
}

.abt-cta__text {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.55) !important;
  max-width: 480px !important;
  margin: 0 auto 2rem !important;
}

.abt-cta__btns {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.abt-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.85rem 2rem !important;
  border-radius: 3px !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.abt-cta__btn--primary {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(81, 132, 197, 0.35) !important;
}

.abt-cta__btn--primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(81, 132, 197, 0.48) !important;
}

.abt-cta__btn--outline {
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
}

.abt-cta__btn--outline:hover {
  border-color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-3px) !important;
}

/* ============================================================
   11. WHY PARTNER WITH US
   ============================================================ */
.abt-partner {
  padding: clamp(3rem, 6vw, 6rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #f7f8fb !important;
  position: relative !important;
  overflow: hidden !important;
}

/* CSS trick: floating watermark */
.abt-partner__watermark {
  position: absolute !important;
  bottom: -2rem !important;
  right: -2rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(6rem, 16vw, 14rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: rgba(81, 132, 197, 0.05) !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
  line-height: 1 !important;
}

.abt-partner__header {
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 2.5rem !important;
  max-width: 600px !important;
}

.abt-partner__intro {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.92rem !important;
  color: #6b7a8d !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

.abt-partner__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.85rem !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 576px) {
  .abt-partner__grid { grid-template-columns: 1fr !important; }
}

.abt-partner__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  padding: 1rem 1.25rem !important;
  background: #ffffff !important;
  border: 1px solid #eaecf2 !important;
  border-radius: 8px !important;
  transition: border-color 0.3s,
              transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s !important;
}

.abt-partner__item:hover {
  border-color: rgba(81, 132, 197, 0.3) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 4px 16px rgba(81, 132, 197, 0.08) !important;
}

.abt-partner__item-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.abt-partner__item span {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #3d4a5c !important;
}

/* ============================================================
   ABOUT PAGE — REDESIGN OVERRIDES
   Targets: mission/vision, stats, trading grid,
            core values, partner points, btn class fix
   All ACF field names unchanged.
   ============================================================ */

/* ─── NEW KEYFRAMES ──────────────────────────────────────── */
@keyframes mvv-lineSlide {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}
@keyframes mvv-dotPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mvv-cardReveal {
  from { opacity: 0; transform: translateY(20px) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes stat-countUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PRIMARY BUTTON — .btn.primary.bold.lg
   ============================================================ */
.btn.primary.bold.lg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #ffffff !important;
  padding: 0.85rem 2rem !important;
  border-radius: 3px !important;
  border: none !important;
  background: linear-gradient(135deg, #5184c5 0%, #274069 100%) !important;
  box-shadow: 0 6px 20px rgba(81, 132, 197, 0.32) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s !important;
}

.btn.primary.bold.lg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  opacity: 0 !important;
  transition: opacity 0.25s !important;
}

.btn.primary.bold.lg:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(81, 132, 197, 0.45) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.btn.primary.bold.lg:hover::after {
  opacity: 1 !important;
}

.slick-slider .slick-list, .slick-slider .slick-track {
  display: flex;
  gap: 1.5rem;
}

.slick-dotted.slick-slider {
  margin-bottom: 3rem;
}

/* ============================================================
   3. MISSION / VISION — Complete redesign
   Image 3 & 4 reference: bordered cards, large label,
   image in corner, step-line connector vibe
   ============================================================ */

/* Override old .abt-mvv__top */
.abt-mvv__top {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  margin-bottom: 4rem !important;
  position: relative !important;
}

/* Connector line between cards — CSS trick */
.abt-mvv__top::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(50% - 1px) !important;
  width: 1px !important;
  height: 60% !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(to bottom, transparent, rgba(81,132,197,0.25), transparent) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (max-width: 768px) {
  .abt-mvv__top {
    grid-template-columns: 1fr !important;
  }
  .abt-mvv__top::before { display: none !important; }
}

/* Override old card styles completely */
.abt-mvv__card {
  background: #ffffff !important;
  border: 1.5px solid #e0e4ec !important;
  border-radius: 16px !important;
  padding: 2.25rem !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(39, 64, 105, 0.06) !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s,
              border-color 0.3s !important;
  animation: mvv-cardReveal 0.7s cubic-bezier(0.16,1,0.3,1) both !important;
}

.abt-mvv__card:first-child { animation-delay: 0.1s !important; }
.abt-mvv__card:last-child  { animation-delay: 0.25s !important; }

.abt-mvv__card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 52px rgba(81, 132, 197, 0.13) !important;
  border-color: rgba(81, 132, 197, 0.35) !important;
}

/* Remove old dark backgrounds */
.abt-mvv__card--mission,
.abt-mvv__card--vision {
  background: #ffffff !important;
  box-shadow: 0 4px 24px rgba(39, 64, 105, 0.06) !important;
}

/* Top accent line replaces old gradient bar */
.abt-mvv__card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 2rem !important;
  width: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  border-radius: 0 0 2px 2px !important;
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1) !important;
}

.abt-mvv__card:hover::before {
  width: calc(100% - 4rem) !important;
}

/* CSS trick: decorative notch top-left corner */
.abt-mvv__card::after {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: 20px !important;
  height: 20px !important;
  background: #f7f8fb !important;
  border-radius: 0 0 12px 0 !important;
  border-right: 1.5px solid #e0e4ec !important;
  border-bottom: 1.5px solid #e0e4ec !important;
  transition: background 0.3s !important;
}

/* Icon — now a small accent dot */
.abt-mvv__card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(81, 132, 197, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
  color: #5184c5 !important;
  border: 1px solid rgba(81, 132, 197, 0.15) !important;
  transition: background 0.3s, border-color 0.3s !important;
}

.abt-mvv__card:hover .abt-mvv__card-icon {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Label — large bold uppercase like Image 4 */
.abt-mvv__card-eyebrow {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0d1117 !important;
  margin-bottom: 0.85rem !important;
  line-height: 1 !important;
}

/* Text — dark readable on white */
.abt-mvv__card-text {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #5a6478 !important;
  margin: 0 !important;
  border-left: 2px solid rgba(81,132,197,0.2) !important;
  padding-left: 0.85rem !important;
}

/* ============================================================
   4. STATS — Bordered pill card (Image 3 style)
   Single contained rounded card, numbers + labels inline
   ============================================================ */

/* Override old dark gradient background */
.abt-stats {
  background: #f7f8fb !important;
  padding: clamp(2.5rem, 5vw, 5rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
}

.abt-stats::before {
  display: none !important;
}

/* New pill card wrapper */
.abt-stats__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  border: 1.5px solid #e0e4ec !important;
  border-radius: 100px !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 24px rgba(39, 64, 105, 0.06) !important;
  overflow: hidden !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

@media (max-width: 768px) {
  .abt-stats__inner {
    flex-direction: column !important;
    border-radius: 16px !important;
  }
}

.abt-stat {
  flex: 1 !important;
  padding: 2rem 2.5rem !important;
  text-align: left !important;
  border-right: 1px solid #e8ecf2 !important;
  border-bottom: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  transition: background 0.3s !important;
}

.abt-stat:last-child {
  border-right: none !important;
}

.abt-stat:hover {
  background: rgba(81, 132, 197, 0.04) !important;
}

@media (max-width: 768px) {
  .abt-stat {
    border-right: none !important;
    border-bottom: 1px solid #e8ecf2 !important;
    width: 100% !important;
  }
  .abt-stat:last-child { border-bottom: none !important; }
}

/* Icon hidden in new design — keep for potential use */
.abt-stat__icon { display: none !important; }

/* Large number */
.abt-stat__num {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  color: #274069 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  letter-spacing: -0.03em !important;
  flex-shrink: 0 !important;
  animation: stat-countUp 0.6s cubic-bezier(0.16,1,0.3,1) both !important;
}

.abt-stat__suffix {
  font-size: 1.6rem !important;
  color: #5184c5 !important;
  font-weight: 700 !important;
}

/* Label stacked next to number */
.abt-stat__label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #8a95a8 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}

/* ============================================================
   CORE VALUES — Image 1 style
   3-step row with horizontal connector line between items
   ============================================================ */
.abt-values-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  position: relative !important;
}

/* Horizontal connector line */
.abt-values-grid::before {
  content: '' !important;
  position: absolute !important;
  top: 52px !important;
  left: calc(100% / 6) !important;
  right: calc(100% / 6) !important;
  height: 2px !important;
  background: linear-gradient(90deg, #5184c5 33%, #d0d8e8 33%, #d0d8e8 66%, #d0d8e8 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 991px) {
  .abt-values-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
  .abt-values-grid::before { display: none !important; }
}

@media (max-width: 576px) {
  .abt-values-grid { grid-template-columns: 1fr !important; }
}

/* Override old card */
.abt-value-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 1.5rem 0 !important;
  text-align: center !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.abt-value-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Kill old ::after fill trick */
.abt-value-card::after {
  display: none !important;
}

/* Step circle (replaces icon box) — like Image 1 */
.abt-value-card__icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 1.5rem !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #5184c5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  position: relative !important;
  z-index: 1 !important;
  transition: background 0.3s, border-color 0.3s, color 0.3s,
              transform 0.35s cubic-bezier(0.16,1,0.3,1) !important;
  box-shadow: 0 0 0 6px #f7f8fb !important;
}

.abt-value-card:hover .abt-value-card__icon {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* Step number label above icon — CSS trick */
.abt-value-card__icon::before {
  content: attr(data-step) !important;
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  white-space: nowrap !important;
}

.abt-value-card__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #0d1117 !important;
  margin: 0 0 0.5rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.abt-value-card__desc {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #6b7a8d !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   7. TRADING & COMMERCIAL OPERATIONS
   Image 2 style: numbered items, 2 up 2 down (2x2 grid)
   No CTA. Clean light cards on dark background.
   ============================================================ */
.abt-trading__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.25rem !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
}

@media (max-width: 576px) {
  .abt-trading__grid { grid-template-columns: 1fr !important; }
}

/* Override card style — cleaner, less glassmorphism */
.abt-trading__card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background 0.3s,
              border-color 0.3s,
              transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.abt-trading__card:hover {
  background: rgba(81, 132, 197, 0.08) !important;
  border-color: rgba(81, 132, 197, 0.3) !important;
  transform: translateY(-4px) !important;
}

/* Large number top-left — Image 2 style */
.abt-trading__card-num {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

.abt-trading__card-icon {
  font-size: 1.35rem !important;
  color: #5184c5 !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
  transition: color 0.3s !important;
}

.abt-trading__card:hover .abt-trading__card-icon {
  color: #c8a255 !important;
}

.abt-trading__card-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 0 0.65rem !important;
}

.abt-trading__card-text {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  line-height: 1.78 !important;
  color: rgba(255,255,255,0.52) !important;
  margin: 0 !important;
}

/* Bottom gradient bar — grows on hover */
.abt-trading__card-bar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 0 !important;
  width: 100% !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  opacity: 0 !important;
  transition: height 0.35s cubic-bezier(0.16,1,0.3,1),
              opacity 0.35s !important;
}

.abt-trading__card:hover .abt-trading__card-bar {
  height: 3px !important;
  opacity: 1 !important;
}

/* ============================================================
   WHY PARTNER — Item redesign
   Larger, more impactful styling
   ============================================================ */
.abt-partner__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 576px) {
  .abt-partner__grid { grid-template-columns: 1fr !important; }
}

.abt-partner__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 1.25rem 1.5rem !important;
  background: #ffffff !important;
  border: 1.5px solid #e8ecf2 !important;
  border-radius: 10px !important;
  transition: border-color 0.3s,
              transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Left accent line — slides in on hover */
.abt-partner__item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: linear-gradient(to bottom, #5184c5, #c8a255) !important;
  border-radius: 10px 0 0 10px !important;
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}

.abt-partner__item:hover::before {
  width: 3px !important;
}

.abt-partner__item:hover {
  border-color: rgba(81, 132, 197, 0.25) !important;
  transform: translateX(6px) !important;
  box-shadow: 0 6px 20px rgba(81, 132, 197, 0.09) !important;
}

/* Checkmark icon circle */
.abt-partner__item-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(81, 132, 197, 0.08) !important;
  border: 1.5px solid rgba(81, 132, 197, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  flex-shrink: 0 !important;
  transition: background 0.3s, border-color 0.3s, color 0.3s !important;
}

.abt-partner__item:hover .abt-partner__item-icon {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.abt-partner__item span {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #3d4a5c !important;
}

/* ============================================================
   CONTACT PAGE — page-contact.css
   Info cards | Form + Sidebar | Map
   Brand: #5184c5 | #274069 | #c8a255
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes cnt-cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cnt-iconPop {
  0%   { transform: scale(0.8) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1)   rotate(0deg); opacity: 1; }
}
@keyframes cnt-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ============================================================
   INFO CARDS SECTION
   ============================================================ */
.cnt-cards {
  padding: clamp(2rem, 4vw, 4rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #ffffff !important;
}

.cnt-cards__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 768px) {
  .cnt-cards__grid { grid-template-columns: 1fr !important; }
}

/* ── Info card ── */
.cnt-info-card {
  border: 1.5px solid #e8ecf2 !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  background: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s,
              border-color 0.3s !important;
  animation: cnt-cardIn 0.6s cubic-bezier(0.16,1,0.3,1) both !important;
}

.cnt-info-card:nth-child(1) { animation-delay: 0.1s !important; }
.cnt-info-card:nth-child(2) { animation-delay: 0.2s !important; }
.cnt-info-card:nth-child(3) { animation-delay: 0.3s !important; }

.cnt-info-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(81, 132, 197, 0.12) !important;
  border-color: rgba(81, 132, 197, 0.3) !important;
}

/* CSS trick: gradient top bar slides in */
.cnt-info-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.cnt-info-card:hover::before {
  transform: scaleX(1) !important;
}

/* Icon circle */
.cnt-info-card__icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: rgba(81, 132, 197, 0.08) !important;
  border: 1.5px solid rgba(81, 132, 197, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  margin-bottom: 1.25rem !important;
  transition: background 0.3s, border-color 0.3s, color 0.3s !important;
  animation: cnt-iconPop 0.5s cubic-bezier(0.16,1,0.3,1) 0.4s both !important;
}

.cnt-info-card:hover .cnt-info-card__icon {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.cnt-info-card__label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 0.5rem !important;
}

.cnt-info-card__values {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

.cnt-info-card__value {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #1a2d4a !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  line-height: 1.5 !important;
}

.cnt-info-card__value:hover { color: #5184c5 !important; }

/* ============================================================
   MAIN LAYOUT — form + sidebar
   ============================================================ */
.cnt-main {
  padding: clamp(2.5rem, 5vw, 5rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #f7f8fb !important;
}

.cnt-main__grid {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 2.5rem !important;
  align-items: start !important;
}

@media (max-width: 991px) {
  .cnt-main__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Form wrapper ── */
.cnt-form-wrap {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
  border: 1.5px solid #eaecf2 !important;
  box-shadow: 0 4px 24px rgba(39, 64, 105, 0.06) !important;
}

.cnt-form-wrap__header {
  margin-bottom: 2rem !important;
}

.cnt-form-wrap__intro {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: #6b7a8d !important;
  margin: 0 !important;
}

/* Form layout */
.cnt-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.cnt-form__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

@media (max-width: 576px) {
  .cnt-form__row { grid-template-columns: 1fr !important; }
}

.cnt-form__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.cnt-form__field label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #3d4a5c !important;
}

.cnt-form__field input,
.cnt-form__field textarea,
.cnt-form__field select {
  width: 100% !important;
  padding: 0.78rem 1rem !important;
  border: 1.5px solid #e8ecf2 !important;
  border-radius: 6px !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: #1a2d4a !important;
  background: #fafbfd !important;
  outline: none !important;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s !important;
  -webkit-appearance: none !important;
}

.cnt-form__field input::placeholder,
.cnt-form__field textarea::placeholder {
  color: #b0bac8 !important;
}

.cnt-form__field input:focus,
.cnt-form__field textarea:focus,
.cnt-form__field select:focus {
  border-color: #5184c5 !important;
  box-shadow: 0 0 0 3px rgba(81, 132, 197, 0.1) !important;
  background: #ffffff !important;
}

.cnt-form__field textarea {
  resize: vertical !important;
  min-height: 120px !important;
}

/* Select arrow */
.cnt-form__field select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235184c5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}

/* Submit button — uses existing .btn.primary.bold.lg */
.cnt-form .btn.primary.bold.lg,
.cnt-form-wrap .btn.primary.bold.lg {
  margin-top: 0.5rem !important;
  width: 100% !important;
  justify-content: center !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.cnt-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  position: sticky !important;
  top: 90px !important;
}

.cnt-sidebar__card {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1.5px solid #eaecf2 !important;
}

/* ── Hours card ── */
.cnt-hours-card {
  background: #ffffff !important;
  padding: 1.75rem !important;
  box-shadow: 0 4px 16px rgba(39, 64, 105, 0.06) !important;
}

.cnt-hours-card__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 1.1rem !important;
}

.cnt-hours-card__eyebrow span {
  display: inline-block !important;
  width: 16px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
}

.cnt-hours-card__rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.cnt-hours-card__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.65rem 0 !important;
  border-bottom: 1px solid #f0f2f5 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem !important;
}

.cnt-hours-card__row:last-child { border-bottom: none !important; }

.cnt-hours-card__row span:first-child {
  font-weight: 500 !important;
  color: #3d4a5c !important;
}

.cnt-hours-card__row span:last-child {
  font-weight: 600 !important;
  color: #274069 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.04em !important;
}

.cnt-hours-card__row--closed span:last-child {
  color: #c0c8d5 !important;
}

.cnt-hours-card__note {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-top: 1rem !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.75rem !important;
  color: #a0aab8 !important;
}

/* ── Social card ── */
.cnt-social-card {
  background: #ffffff !important;
  padding: 1.5rem !important;
}

.cnt-social-card__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 1rem !important;
}

.cnt-social-card__eyebrow span {
  display: inline-block !important;
  width: 16px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
}

.cnt-social-card__links {
  display: flex !important;
  gap: 0.65rem !important;
  flex-wrap: wrap !important;
}

.cnt-social-link {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  border: 1.5px solid #e8ecf2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #5184c5 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  transition: background 0.3s, border-color 0.3s,
              color 0.3s, transform 0.35s cubic-bezier(0.16,1,0.3,1) !important;
  overflow: hidden !important;
}

.cnt-social-link img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  filter: invert(40%) sepia(70%) saturate(500%) hue-rotate(190deg) !important;
  transition: filter 0.3s !important;
}

.cnt-social-link:hover {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
}

.cnt-social-link:hover img {
  filter: brightness(0) invert(1) !important;
}

/* ── Quick contact card ── */
.cnt-quick-card {
  background: #0d1117 !important;
  padding: 1.5rem !important;
  border-color: rgba(81, 132, 197, 0.2) !important;
}

.cnt-quick-card__label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
  margin-bottom: 0.5rem !important;
}

.cnt-quick-card__phone,
.cnt-quick-card__email {
  display: block !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  margin-bottom: 0.3rem !important;
  transition: color 0.2s !important;
}

.cnt-quick-card__phone:hover,
.cnt-quick-card__email:hover {
  color: #5184c5 !important;
}

/* ============================================================
   MAP SECTION
   ============================================================ */
.cnt-map {
  padding: clamp(2.5rem, 5vw, 5rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #ffffff !important;
}

.cnt-map__header {
  margin-bottom: 1.75rem !important;
}

.cnt-map__embed {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid #e8ecf2 !important;
  box-shadow: 0 4px 24px rgba(39, 64, 105, 0.08) !important;
  height: 440px !important;
  position: relative !important;
}

.cnt-map__embed iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* ============================================================
   SHARED HERO MODIFIER — inner pages
   ============================================================ */
.pgr-hero {
  padding-bottom: clamp(2rem, 4vw, 4rem) !important;
}

.pgr-hero .abt-hero__title {
  font-size: clamp(2.6rem, 5vw, 4.5rem) !important;
}

/* ============================================================
   INNER PAGE HERO SHARED — pgr-hero modifier
   Applied on: About, Contact, Service Single, any inner page
   Extends .abt-hero base styles
   ============================================================ */

/* Shared inner page hero sizing */
.pgr-hero {
  padding-bottom: clamp(2rem, 4vw, 4rem) !important;
  min-height: auto !important;
}

/* Slightly smaller title on inner pages */
.pgr-hero .abt-hero__title {
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
}

/* ── Service single: featured image as subtle bg ── */
.ssvc-pgr-hero .abt-hero__bg.ssvc-pgr-hero__thumb {
  opacity: 0.07 !important;
  filter: grayscale(0.6) !important;
}

.ssvc-pgr-hero .abt-hero__bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(247, 248, 251, 0.85) 0%,
    rgba(247, 248, 251, 0.98) 100%
  ) !important;
}

/* Contact page hero */
.cnt-pgr-hero .abt-hero__title {
  font-size: clamp(2.6rem, 5vw, 4.5rem) !important;
}

/* ============================================================
   SERVICES ARCHIVE PAGE — page-services.css
   Grid of all service cards | Image top, content below
   Brand: #5184c5 | #274069 | #c8a255
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes sva-cardIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   INTRO STRIP
   ============================================================ */
.sva-intro {
  background: #ffffff !important;
  padding-top: 0 !important;
  padding-bottom: 2rem !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

.sva-intro__text {
  font-family: 'Barlow', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: #6b7a8d !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ============================================================
   SERVICES GRID SECTION
   ============================================================ */
.sva-grid-section {
  padding: clamp(2rem, 4vw, 4rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #f7f8fb !important;
}

.sva-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

@media (max-width: 991px) {
  .sva-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 576px) {
  .sva-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SERVICE CARD
   ============================================================ */
.sva-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1.5px solid #eaecf2 !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s !important;
  animation: sva-cardIn 0.6s cubic-bezier(0.16,1,0.3,1) both !important;
}

/* Stagger animation delays */
.sva-card:nth-child(1) { animation-delay: 0.05s !important; }
.sva-card:nth-child(2) { animation-delay: 0.12s !important; }
.sva-card:nth-child(3) { animation-delay: 0.19s !important; }
.sva-card:nth-child(4) { animation-delay: 0.26s !important; }
.sva-card:nth-child(5) { animation-delay: 0.33s !important; }
.sva-card:nth-child(6) { animation-delay: 0.40s !important; }

.sva-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 56px rgba(39, 64, 105, 0.14) !important;
  border-color: rgba(81, 132, 197, 0.25) !important;
}

/* ── Image top ── */
.sva-card__img {
  position: relative !important;
  height: 220px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.sva-card__photo {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1) !important;
}

.sva-card__photo--placeholder {
  background: linear-gradient(135deg, #1a2d4a, #274069) !important;
}

.sva-card:hover .sva-card__photo {
  transform: scale(1.07) !important;
}

/* Dark gradient overlay */
.sva-card__img-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(10, 14, 22, 0.75) 0%,
    rgba(10, 14, 22, 0.2)  55%,
    rgba(10, 14, 22, 0.0)  100%
  ) !important;
  z-index: 1 !important;
  transition: opacity 0.3s !important;
}

.sva-card:hover .sva-card__img-overlay {
  opacity: 0.9 !important;
}

/* Gradient top bar scales in on hover */
.sva-card__bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  z-index: 3 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.sva-card:hover .sva-card__bar {
  transform: scaleX(1) !important;
}

/* Ghost number */
.sva-card__num {
  position: absolute !important;
  top: 0.75rem !important;
  right: 1rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: rgba(255,255,255,0.07) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: color 0.4s !important;
}

.sva-card:hover .sva-card__num {
  color: rgba(81, 132, 197, 0.18) !important;
}

/* CSS trick: shimmer sweep on hover */
.sva-card__img::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -75% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.07) 50%,
    transparent 100%
  ) !important;
  transform: skewX(-15deg) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  transition: left 0s !important;
}

.sva-card:hover .sva-card__img::after {
  left: 150% !important;
  transition: left 0.6s ease !important;
}

/* ── Card body ── */
.sva-card__body {
  padding: 1.4rem 1.5rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  background: #ffffff !important;
}

/* Eyebrow */
.sva-card__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 0.55rem !important;
  transition: color 0.3s !important;
}

.sva-card:hover .sva-card__eyebrow { color: #c8a255 !important; }

.sva-card__eyebrow-line {
  display: inline-block !important;
  width: 16px !important;
  height: 1.5px !important;
  background: currentColor !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
}

/* Title */
.sva-card__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: #0d1117 !important;
  margin: 0 0 0.75rem !important;
  transition: color 0.3s !important;
}

.sva-card:hover .sva-card__title { color: #274069 !important; }

/* Description */
.sva-card__desc {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: #6b7a8d !important;
  margin: 0 0 1.25rem !important;
  flex: 1 !important;
}

/* CTA row */
.sva-card__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid #eaecf2 !important;
  transition: border-color 0.3s !important;
  margin-top: auto !important;
}

.sva-card:hover .sva-card__cta {
  border-color: rgba(81,132,197,0.2) !important;
}

.sva-card__cta-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  transition: color 0.3s, letter-spacing 0.3s !important;
}

.sva-card:hover .sva-card__cta-label {
  color: #274069 !important;
  letter-spacing: 0.16em !important;
}

.sva-card__cta-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(81,132,197,0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  flex-shrink: 0 !important;
  transition: background 0.3s,
              border-color 0.3s,
              color 0.3s,
              transform 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}

.sva-card:hover .sva-card__cta-icon {
  background: #5184c5 !important;
  border-color: #5184c5 !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

/* ============================================================
   BOTTOM CTA STRIP
   ============================================================ */
.sva-cta {
  padding: clamp(3rem, 6vw, 5rem) var(--section-px, clamp(1.5rem, 5vw, 6rem)) !important;
  background: #ffffff !important;
}

.sva-cta__inner {
  background: linear-gradient(135deg, #274069 0%, #1a2d4a 100%) !important;
  border-radius: 14px !important;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ghost watermark */
.sva-cta__inner::before {
  content: 'TRADE' !important;
  position: absolute !important;
  right: -1rem !important;
  bottom: -2rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  color: rgba(255,255,255,0.03) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Gradient top accent */
.sva-cta__inner::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
}

.sva-cta__eyebrow {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #c8a255 !important;
  margin-bottom: 0.65rem !important;
}

.sva-cta__heading {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 0.75rem !important;
}

.sva-cta__text {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.55) !important;
  max-width: 520px !important;
  margin: 0 auto 1.75rem !important;
}

.sva-cta .btn.primary.bold.lg {
  margin: 0 auto !important;
}

/* ============================================================
   FOOTER REDESIGN — footer.css
   Dark premium | 4-column grid | CSS tricks throughout
   Brand: #5184c5 | #274069 | #c8a255 | #0d1117
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes ftr-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes ftr-linkSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   FOOTER WRAPPER
   ============================================================ */
.ftr.site-footer {
  background: #0d1117 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Barlow', sans-serif !important;
  position: relative !important;
  overflow: hidden !important;
}

/* CSS trick: subtle diagonal stripe texture on bg */
.ftr.site-footer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.012) 4px,
    rgba(255,255,255,0.012) 8px
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Top gradient accent bar ── */
.ftr__topbar {
  height: 3px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255, #5184c5) !important;
  background-size: 200% auto !important;
  animation: ftr-shimmer 4s linear infinite !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   MAIN GRID
   ============================================================ */
.ftr__main {
  position: relative !important;
  z-index: 1 !important;
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.ftr__grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr 1.1fr !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

@media (max-width: 1100px) {
  .ftr__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 576px) {
  .ftr__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BRAND COLUMN
   ============================================================ */
.ftr__brand {
  margin-bottom: 1.75rem !important;
}

.ftr__brand-link {
  display: inline-block !important;
  text-decoration: none !important;
  margin-bottom: 0.5rem !important;
}

/* Logo background-image div */
.ftr__logo {
  width: 120px !important;
  height: 80px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  filter: brightness(0) invert(1) !important;
  transition: filter 0.3s !important;
  margin-bottom: 0.5rem !important;
}

.ftr__brand-link:hover .ftr__logo {
  filter: brightness(0) invert(0.85) sepia(0.5) hue-rotate(185deg) saturate(1.5) !important;
}

.ftr__brand-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.05em !important;
}

.ftr__brand-tagline {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
}

/* ── Contact items ── */
.ftr__contacts {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

.ftr__contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.ftr__contact-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(81, 132, 197, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5184c5 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  transition: background 0.3s, border-color 0.3s !important;
}

.ftr__contact-item:hover .ftr__contact-icon {
  background: rgba(81, 132, 197, 0.15) !important;
  border-color: rgba(81, 132, 197, 0.5) !important;
}

.ftr__contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

.ftr__contact-val {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  line-height: 1.5 !important;
  display: block !important;
}

.ftr__contact-val:hover { color: rgba(255, 255, 255, 0.9) !important; }

.ftr__contact-val--addr {
  margin: 0 !important;
  line-height: 1.65 !important;
}

/* ============================================================
   COLUMN HEADING
   ============================================================ */
.ftr__col-heading {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #5184c5 !important;
  margin-bottom: 1.1rem !important;
}

.ftr__col-heading-line {
  display: inline-block !important;
  width: 16px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, #5184c5, #c8a255) !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   NAV MENUS
   ============================================================ */
.ftr__nav-group { width: 100% !important; }

/* Override WP nav menu defaults */
.ftr__menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ftr__menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ftr__menu li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ftr__menu li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 0 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  transition: color 0.25s, padding-left 0.25s !important;
  position: relative !important;
}

/* CSS trick: arrow icon via ::after */
.ftr__menu li a::after {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  transform: rotate(45deg) !important;
  flex-shrink: 0 !important;
  transition: border-color 0.25s, transform 0.3s !important;
}

.ftr__menu li a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  padding-left: 0.4rem !important;
}

.ftr__menu li a:hover::after {
  border-color: #5184c5 !important;
  transform: rotate(45deg) translateX(2px) !important;
}

.ftr__menu li.current-menu-item > a {
  color: #5184c5 !important;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.ftr__newsletter-img {
  width: 28px !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  opacity: 0.7 !important;
}

.ftr__newsletter-form { margin-bottom: 1.75rem !important; }

.ftr__newsletter-field {
  display: flex !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: border-color 0.3s !important;
}

.ftr__newsletter-field:focus-within {
  border-color: rgba(81, 132, 197, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(81, 132, 197, 0.1) !important;
}

.ftr__newsletter-input {
  flex: 1 !important;
  padding: 0.72rem 0.9rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.82rem !important;
  outline: none !important;
  -webkit-appearance: none !important;
}

.ftr__newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.28) !important;
}

.ftr__newsletter-btn {
  padding: 0 1.1rem !important;
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.25s !important;
  flex-shrink: 0 !important;
}

.ftr__newsletter-btn:hover { opacity: 0.85 !important; }

/* ── Social wrap ── */
.ftr__social-wrap { margin-top: 0 !important; }

/* Override social-links template part styles */
.ftr__social-wrap .social-links,
.ftr__social-wrap ul {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ftr__social-wrap .social-links a,
.ftr__social-wrap ul li a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: none !important;
  font-size: 0.78rem !important;
  transition: background 0.3s, border-color 0.3s,
              color 0.3s, transform 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}

.ftr__social-wrap .social-links a:hover,
.ftr__social-wrap ul li a:hover {
  background: linear-gradient(135deg, #5184c5, #274069) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
}

.ftr__social-wrap .social-links i,
.ftr__social-wrap ul li a i {
  font-size: 0.85rem !important;
}

/* ============================================================
   BOTTOM BAR
   ============================================================ */
.ftr__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative !important;
  z-index: 1 !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.5rem !important;
}

.ftr__bottom-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.ftr__copyright span {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.28) !important;
}

/* Policy menu */
.ftr__policy-menu {
  display: flex !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ftr__policy-menu li {
  position: relative !important;
}

.ftr__policy-menu li + li::before {
  content: '|' !important;
  color: rgba(255, 255, 255, 0.12) !important;
  padding: 0 0.75rem !important;
  font-size: 0.75rem !important;
}

.ftr__policy-menu li a {
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.28) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.ftr__policy-menu li a:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}
/* ============================================================
   PRIMROSE HEADER — primr-hdr
   Prefix: primr- | Zero conflicts with existing theme
   ============================================================ */

.primr-hdr {
  --p:     #5184c5;
  --p10:   rgba(81,132,197,0.10);
  --p35:   rgba(81,132,197,0.35);
  --s:     #274069;
  --g:     #c8a255;
  --dk:    #0d1117;
  --wh:    #ffffff;
  --ease:  cubic-bezier(0.16,1,0.3,1);
  --h:     76px;
  --hm:    62px;
}

@keyframes primr-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes primr-ul {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes primr-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   WRAPPER
   ============================================================ */
.primr-hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  animation: primr-in 0.7s var(--ease) both;
  font-family: 'Barlow Condensed', sans-serif;
}

/* ── Scroll progress ── */
.primr-hdr__line {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--p), var(--g));
  z-index: 10;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── Bar — sits ABOVE the drawer ── */
.primr-hdr__bar {
  width: 100%;
  position: relative;
  z-index: 10002; /* above drawer */
  transition: background 0.4s ease,
              backdrop-filter 0.4s ease,
              box-shadow 0.4s ease;
  background: transparent;
}

/* Scrolled glass */
.primr-hdr.is-scrolled .primr-hdr__bar {
  background: rgba(13,17,23,0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06),
              0 8px 32px rgba(0,0,0,0.3);
}

/* When drawer is open — keep bar dark so logo + X are visible */
.primr-hdr.drawer-is-open .primr-hdr__bar {
  background: rgba(13,17,23,0.95) !important;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Inner pages — white glass */
body:not(.home) .primr-hdr .primr-hdr__bar {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(39,64,105,0.1),
              0 4px 20px rgba(39,64,105,0.07);
}

body:not(.home) .primr-hdr.is-scrolled .primr-hdr__bar {
  background: rgba(255,255,255,0.96);
}

/* ── Inner row ── */
.primr-hdr__wrap {
  display: flex;
  align-items: center;
  height: var(--h);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  gap: 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}

/* ============================================================
   LOGO
   ============================================================ */
.primr-logo {
  flex-shrink: 0;
  position: relative;
  z-index: 10003; /* above everything */
}

.primr-logo__a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
}

.primr-logo__wht,
.primr-logo__clr {
  height: 4rem;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s var(--ease);
}

.primr-logo__a:hover .primr-logo__wht,
.primr-logo__a:hover .primr-logo__clr { transform: scale(1.03); }

/* Dark bg — white logo */
.primr-logo__wht { display: block; }
.primr-logo__clr { display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

/* When drawer open — always show white logo */
.primr-hdr.drawer-is-open .primr-logo__wht { display: block !important; }
.primr-hdr.drawer-is-open .primr-logo__clr { display: none !important; }

/* Inner pages — colour logo */
body:not(.home) .primr-logo__wht { display: none; }
body:not(.home) .primr-logo__clr { display: block; position: relative; top: auto; transform: none; }

.primr-logo__txt {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--wh);
  letter-spacing: 0.06em;
}

/* ============================================================
   DESKTOP NAV
   ============================================================ */
.primr-nav { 
  /* flex: 1; */
  margin-left: auto;

}

.primr-nav__ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}

.primr-nav__ul > li { position: relative; }

.primr-nav__ul > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  position: relative;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.primr-nav__ul > li > a:hover {
  color: var(--wh);
  background: rgba(255,255,255,0.07);
}

.primr-nav__ul > li.current-menu-item > a,
.primr-nav__ul > li.current-menu-ancestor > a {
  color: var(--wh);
  background: var(--p10);
}

.primr-nav__ul > li.current-menu-item > a::after,
.primr-nav__ul > li.current-menu-ancestor > a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 0.85rem; right: 0.85rem;
  height: 2px;
  background: linear-gradient(90deg, var(--p), var(--g));
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  animation: primr-ul 0.4s var(--ease) forwards;
}

body:not(.home) .primr-nav__ul > li > a { color: rgba(39,64,105,0.72); }
body:not(.home) .primr-nav__ul > li > a:hover {
  color: var(--s);
  background: rgba(81,132,197,0.08);
}
body:not(.home) .primr-nav__ul > li.current-menu-item > a {
  color: var(--p);
  background: rgba(81,132,197,0.07);
}

.primr-nav__ul > li.menu-item-has-children > a::before {
  content: '';
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  order: 2;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.primr-nav__ul > li.menu-item-has-children:hover > a::before {
  transform: rotate(-135deg);
}

.primr-nav__ul > li > .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px); left: 0;
  min-width: 200px;
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.45rem 0;
  list-style: none;
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
  z-index: 100;
  overflow: hidden;
  animation: primr-drop 0.25s var(--ease) both;
}

.primr-nav__ul > li > .sub-menu::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--p), transparent);
  margin-bottom: 0.3rem;
}

.primr-nav__ul > li:hover > .sub-menu { display: block; }

.primr-nav__ul .sub-menu li a {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}

.primr-nav__ul .sub-menu li a:hover {
  color: var(--wh);
  background: rgba(81,132,197,0.15);
  padding-left: 1.5rem;
}

/* ============================================================
   DESKTOP ACTIONS
   ============================================================ */
.primr-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
  margin-left: auto;
}

.primr-actions__phone {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.primr-actions__phone-ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--p35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p);
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}

.primr-actions__phone:hover .primr-actions__phone-ring {
  background: rgba(81,132,197,0.15);
  border-color: rgba(81,132,197,0.6);
}

.primr-actions__phone-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.primr-actions__phone-sub {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  line-height: 1;
  transition: color 0.3s;
}

.primr-actions__phone-num {
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wh);
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.3s;
}

.primr-actions__phone:hover .primr-actions__phone-sub,
.primr-actions__phone:hover .primr-actions__phone-num { color: var(--g); }

body:not(.home) .primr-actions__phone-sub { color: rgba(39,64,105,0.5); }
body:not(.home) .primr-actions__phone-num { color: var(--s); }
body:not(.home) .primr-actions__phone-ring {
  border-color: rgba(39,64,105,0.25);
  color: var(--s);
}

.primr-actions__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wh);
  padding: 0.65rem 1.5rem;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--p), var(--s));
  box-shadow: 0 4px 16px rgba(81,132,197,0.3);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}

.primr-actions__cta::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity 0.25s;
}

.primr-actions__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(81,132,197,0.45);
  color: var(--wh);
}

.primr-actions__cta:hover::after { opacity: 1; }

/* ============================================================
   TOGGLE BUTTON — sits ABOVE drawer via z-index
   ============================================================ */
.primr-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0;
  margin-left: auto;
  flex-shrink: 0;
  outline: none;
  position: relative;
  z-index: 10003; /* same level as logo, above drawer */
}

.primr-toggle__lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
}

/* When drawer open — label shows X text handled by JS,
   keep white since bar is dark */
.primr-hdr.drawer-is-open .primr-toggle__lbl {
  color: rgba(255,255,255,0.85);
}

body:not(.home) .primr-toggle__lbl { color: var(--s); }
body:not(.home) .primr-hdr.drawer-is-open .primr-toggle__lbl {
  color: rgba(255,255,255,0.85);
}

.primr-toggle__box {
  width: 22px; height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.primr-toggle__bar {
  display: block;
  width: 100%; height: 2px;
  border-radius: 1px;
  background: var(--wh);
  transition: transform 0.35s var(--ease),
              opacity 0.25s,
              width 0.3s;
  transform-origin: center;
}

/* Keep bars white when drawer is open */
.primr-hdr.drawer-is-open .primr-toggle__bar { background: var(--wh); }

body:not(.home) .primr-toggle__bar { background: var(--s); }

.primr-toggle__bar--short { width: 65%; }

/* Open (X) state */
.primr-toggle.is-open .primr-toggle__bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.primr-toggle.is-open .primr-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.primr-toggle.is-open .primr-toggle__bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
  width: 100%;
}

/* ============================================================
   MOBILE DRAWER
   Starts BELOW the header bar (top = --hm)
   ============================================================ */
.primr-drawer {
  position: fixed;
  height: 100vh;
  top: var(--hm);    /* sits below the 62px header bar */
  left: 0; right: 0; bottom: 0;
  z-index: 10001;    /* above page, below header bar */
  background: rgba(10,14,22,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(81,132,197,0.25);

  /* Hidden */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: visibility 0s linear 0.35s,
              opacity 0.35s var(--ease),
              transform 0.35s var(--ease);
}

/* Open */
.primr-drawer.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: visibility 0s linear 0s,
              opacity 0.35s var(--ease),
              transform 0.35s var(--ease);
}

.primr-drawer__scroll {
  height: 100%;
  overflow-y: auto;
  padding: 1.75rem clamp(1.5rem, 6vw, 3rem) 3rem;
  display: flex;
  flex-direction: column;
}

/* ── Drawer nav ── */
.primr-drawer__ul {
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
}

.primr-drawer__ul > li {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.primr-drawer__ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  padding: 1rem 0;
  text-decoration: none;
  transition: color 0.2s, padding-left 0.25s;
}

.primr-drawer__ul > li > a:hover,
.primr-drawer__ul > li.current-menu-item > a {
  color: var(--wh);
  padding-left: 0.5rem;
}

.primr-drawer__ul > li.current-menu-item > a { color: var(--p); }

.primr-drawer__ul > li.menu-item-has-children > a::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(255,255,255,0.3);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

.primr-drawer__ul > li.sub-open > a::after {
  transform: rotate(-135deg);
}

.primr-drawer__ul .sub-menu {
  list-style: none;
  padding: 0 0 0.75rem 1rem;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}

.primr-drawer__ul > li.sub-open > .sub-menu { max-height: 400px; }

.primr-drawer__ul .sub-menu li a {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 0.5rem 0;
  text-decoration: none;
  transition: color 0.2s, padding-left 0.25s;
}

.primr-drawer__ul .sub-menu li a:hover {
  color: rgba(255,255,255,0.9);
  padding-left: 0.5rem;
}

/* ── Drawer footer ── */
.primr-drawer__foot {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 1.75rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.primr-drawer__info { display: flex; flex-direction: column; gap: 2px; }

.primr-drawer__info-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

.primr-drawer__info-val {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--wh);
  text-decoration: none;
  transition: color 0.2s;
}

.primr-drawer__info-val:hover { color: var(--p); }

.primr-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wh);
  padding: 0.9rem 2rem;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--p), var(--s));
  box-shadow: 0 6px 20px rgba(81,132,197,0.32);
  margin-top: 0.5rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.primr-drawer__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(81,132,197,0.45);
  color: var(--wh);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .primr-nav,
  .primr-actions   { display: none; }
  .primr-toggle    { display: flex; }
  .primr-hdr__wrap { height: var(--hm); }
}

@media (min-width: 992px) {
  .primr-toggle    { display: none; }
  .primr-drawer    { display: none; }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .primr-nav__ul > li > a {
    padding: 0.55rem 0.6rem;
    font-size: 0.74rem;
  }
  .primr-actions__phone-sub { display: none; }
  .primr-actions__phone-num { font-size: 0.82rem; }
}

/* ============================================================
   ABOUT SECTION — hm-about (homepage)
   Corner brackets | Photo hover | Floating badge
   ============================================================ */

/* ── Media wrapper — corners position relative to this ── */
.hm-about__media {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* ── Photo ── */
.hm-about__photo {
  width: 100%;
  padding-bottom: 68%;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 24px 56px rgba(39, 64, 105, 0.14);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
}

.hm-about__media:hover .hm-about__photo {
  transform: scale(1.02);
  box-shadow: 0 32px 72px rgba(39, 64, 105, 0.2);
}

/* CSS trick: shimmer sweep on hover */
.hm-about__photo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  transition: left 0s;
  pointer-events: none;
}

.hm-about__media:hover .hm-about__photo::after {
  left: 150%;
  transition: left 0.65s ease;
}

/* ── Corner bracket accents ── */
.hm-about__corner {
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 2;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s;
}

/* Top-left — blue */
.hm-about__corner--a {
  top: -10px;
  left: -10px;
  border-top: 3px solid #5184c5;
  border-left: 3px solid #5184c5;
  border-radius: 12px 0 0 0;
}

/* Bottom-right — gold */
.hm-about__corner--b {
  bottom: -10px;
  right: -10px;
  border-bottom: 3px solid #c8a255;
  border-right: 3px solid #c8a255;
  border-radius: 0 0 12px 0;
}

/* CSS trick: corners grow on hover */
.hm-about__media:hover .hm-about__corner {
  width: 60px;
  height: 60px;
}

/* ── Floating badge ── */
.hm-about__badge {
  position: absolute;
  bottom: -1.25rem;
  right: -1.25rem;
  background: linear-gradient(135deg, #5184c5, #274069);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  box-shadow: 0 14px 36px rgba(81, 132, 197, 0.35);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: about-float 4s ease-in-out infinite;
}

@keyframes about-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.hm-about__badge-n {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
}

.hm-about__badge-l {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hm-about__badge {
    bottom: -1rem;
    right: 0.5rem;
  }

  .hm-about__corner {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================
   HOMEPAGE PRODUCTS — hm-prods
   Wobbly draggable circles | Random scatter layout
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes hm-prod-wobble-1 {
  0%,100% { transform: rotate(-2deg) scale(1);    }
  25%     { transform: rotate(1.5deg) scale(1.02); }
  50%     { transform: rotate(2.5deg) scale(0.99); }
  75%     { transform: rotate(-1deg) scale(1.01);  }
}
@keyframes hm-prod-wobble-2 {
  0%,100% { transform: rotate(1.5deg) scale(1.01);  }
  33%     { transform: rotate(-2deg) scale(0.98);   }
  66%     { transform: rotate(2deg) scale(1.02);    }
}
@keyframes hm-prod-wobble-3 {
  0%,100% { transform: rotate(0deg) scale(1);      }
  20%     { transform: rotate(2deg) scale(1.02);   }
  60%     { transform: rotate(-1.5deg) scale(0.99); }
}
@keyframes hm-prod-float-1 {
  0%,100% { transform: translateY(0px);   }
  50%     { transform: translateY(-12px); }
}
@keyframes hm-prod-float-2 {
  0%,100% { transform: translateY(-6px); }
  50%     { transform: translateY(8px);  }
}
@keyframes hm-prod-float-3 {
  0%,100% { transform: translateY(4px);   }
  50%     { transform: translateY(-10px); }
}
@keyframes hm-prod-in {
  from { opacity: 0; transform: scale(0.6) rotate(15deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);  }
}

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.hm-prods {
  position: relative;
  padding-top: var(--py, clamp(3.5rem, 7vw, 7rem));
  padding-bottom: var(--py, clamp(3.5rem, 7vw, 7rem));
  background: #f7f8fb;
  overflow: hidden;
}

/* ── Header ── */
.hm-prods__hdr {
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
}

.hm-prods__hdr-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.hm-prods__sub {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: #8a95a8;
  margin: 0;
  max-width: 460px;
}

/* ============================================================
   STAGE — the scatter canvas
   ============================================================ */
.hm-prods__stage {
  position: relative;
  width: 100%;
  height: 640px;
  cursor: grab;
  user-select: none;
}

.hm-prods__stage:active { cursor: grabbing; }

/* Watermark inside stage */
.hm-prods__wm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: rgba(81, 132, 197, 0.06);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ============================================================
   BUBBLE
   ============================================================ */
.hm-prod-bubble {
  position: absolute;
  /* JS sets top/left random positions */
  z-index: 1;
  cursor: grab;
  will-change: transform;

  /* Staggered entrance */
  animation: hm-prod-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hm-prod-bubble:active { cursor: grabbing; }

/* Each bubble gets a different wobble + float animation via nth-child */
.hm-prod-bubble:nth-child(2)  { animation-delay: 0.05s; }
.hm-prod-bubble:nth-child(3)  { animation-delay: 0.10s; }
.hm-prod-bubble:nth-child(4)  { animation-delay: 0.15s; }
.hm-prod-bubble:nth-child(5)  { animation-delay: 0.20s; }
.hm-prod-bubble:nth-child(6)  { animation-delay: 0.25s; }
.hm-prod-bubble:nth-child(7)  { animation-delay: 0.30s; }
.hm-prod-bubble:nth-child(8)  { animation-delay: 0.35s; }
.hm-prod-bubble:nth-child(9)  { animation-delay: 0.40s; }

/* Continuous float per bubble (applied by JS class) */
.hm-prod-bubble.float-1 { animation: hm-prod-in 0.6s cubic-bezier(0.16,1,0.3,1) both, hm-prod-float-1 4.5s ease-in-out 0.6s infinite; }
.hm-prod-bubble.float-2 { animation: hm-prod-in 0.6s cubic-bezier(0.16,1,0.3,1) both, hm-prod-float-2 5.2s ease-in-out 0.8s infinite; }
.hm-prod-bubble.float-3 { animation: hm-prod-in 0.6s cubic-bezier(0.16,1,0.3,1) both, hm-prod-float-3 3.8s ease-in-out 0.4s infinite; }

/* Pause float while dragging */
.hm-prod-bubble.is-dragging {
  animation: none !important;
  z-index: 100;
  cursor: grabbing;
}

/* ── Inner wrapper — wobble ring ── */
.hm-prod-bubble__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hm-prod-bubble:not(.is-dragging):hover .hm-prod-bubble__inner {
  transform: scale(1.08);
}

/* CSS trick: wobble ring via ::before */
.hm-prod-bubble__inner::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #5184c5, #c8a255) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hm-prod-bubble:hover .hm-prod-bubble__inner::before {
  opacity: 1;
  transform: scale(1);
}

/* ── Circle image ── */
.hm-prod-bubble__img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: linear-gradient(135deg, #274069, #5184c5);
  background-image: linear-gradient(135deg, #1a2d4a 0%, #274069 100%);
  box-shadow: 0 12px 36px rgba(39, 64, 105, 0.22),
              0 2px 8px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* CSS trick: shimmer on hover */
.hm-prod-bubble__img::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  transform: skewX(-15deg);
  transition: left 0s;
  pointer-events: none;
}

.hm-prod-bubble:hover .hm-prod-bubble__img::after {
  left: 140%;
  transition: left 0.55s ease;
}

.hm-prod-bubble:hover .hm-prod-bubble__img {
  box-shadow: 0 20px 48px rgba(39, 64, 105, 0.32),
              0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Ghost number inside circle bottom-right */
.hm-prod-bubble__num {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ── Info label below circle ── */
.hm-prod-bubble__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  max-width: 140px;
}

.hm-prod-bubble__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a2d4a;
  line-height: 1.2;
  transition: color 0.2s;
}

.hm-prod-bubble:hover .hm-prod-bubble__name { color: #5184c5; }

.hm-prod-bubble__cat {
  font-family: 'Barlow', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  color: #9aa3b0;
  letter-spacing: 0.06em;
}

/* ── Size variants — JS adds these classes ── */
.hm-prod-bubble--lg .hm-prod-bubble__img  { width: 180px; height: 180px; }
.hm-prod-bubble--sm .hm-prod-bubble__img  { width: 110px; height: 110px; }
.hm-prod-bubble--lg .hm-prod-bubble__name { font-size: 1rem; }
.hm-prod-bubble--sm .hm-prod-bubble__name { font-size: 0.78rem; }

/* ── Drag hint tooltip ── */
.hm-prods__stage::after {
  content: 'drag to explore';
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(81, 132, 197, 0.4);
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hm-prods__stage { height: 900px; }
  .hm-prod-bubble__img { width: 110px; height: 110px; }
  .hm-prod-bubble--lg .hm-prod-bubble__img { width: 140px; height: 140px; }
  .hm-prod-bubble--sm .hm-prod-bubble__img { width: 90px;  height: 90px;  }
}

/* ============================================================
   PRODUCTS ARCHIVE PAGE — page-products.css
   ============================================================ */

.prd-grid-section {
  padding: clamp(2.5rem, 5vw, 5rem) var(--section-px, clamp(1.5rem, 5vw, 6rem));
  background: #f7f8fb;
}

.prd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1100px) { .prd-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .prd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .prd-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.prd-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1.5px solid #eaecf2;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s;
}

.prd-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px rgba(39,64,105,0.13);
  border-color: rgba(81,132,197,0.25);
}

/* Top bar scales on hover */
.prd-card__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5184c5, #c8a255);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.prd-card:hover .prd-card__bar { transform: scaleX(1); }

/* Image */
.prd-card__img-wrap {
  position: relative;
  height: 180px;
}

.prd-card__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: linear-gradient(135deg, #1a2d4a, #274069);
  background-image: linear-gradient(135deg, #1a2d4a 0%, #274069 100%);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.prd-card:hover .prd-card__img { transform: scale(1.06); }

.prd-card__num {
  position: absolute;
  bottom: 0.5rem; right: 0.75rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.1);
  line-height: 1;
  pointer-events: none;
}

/* Body */
.prd-card__body {
  padding: 1.25rem 1.4rem 1.5rem;
}

.prd-card__cat {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5184c5;
  margin-bottom: 0.35rem;
  transition: color 0.25s;
}

.prd-card:hover .prd-card__cat { color: #c8a255; }

.prd-card__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0d1117;
  margin: 0 0 0.6rem;
  transition: color 0.25s;
}

.prd-card:hover .prd-card__title { color: #274069; }

.prd-card__desc {
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.75;
  color: #6b7a8d;
  margin: 0;
}

/* ── CTA strip ── */
.prd-cta {
  padding: clamp(3rem, 6vw, 5rem) var(--section-px, clamp(1.5rem, 5vw, 6rem));
  background: #ffffff;
}

.prd-cta__inner {
  background: linear-gradient(135deg, #274069 0%, #1a2d4a 100%);
  border-radius: 14px;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.prd-cta__inner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5184c5, #c8a255);
}

.prd-cta__eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8a255;
  margin-bottom: 0.65rem;
}

.prd-cta__heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}

.prd-cta__text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 480px;
  margin: 0 auto 1.75rem;
}

/* ============================================================
   PRODUCTS PAGE FIX — prd-reveal-fix.css
   Cards render but js-reveal keeps them opacity:0
   Force visible on the products archive page
   ============================================================ */

/* Force all js-reveal elements on products page visible */
.prd-grid .js-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

/* Stagger them in via animation instead */
.prd-grid .prd-card:nth-child(1)  { animation: prd-cardIn 0.5s ease 0.05s both; }
.prd-grid .prd-card:nth-child(2)  { animation: prd-cardIn 0.5s ease 0.10s both; }
.prd-grid .prd-card:nth-child(3)  { animation: prd-cardIn 0.5s ease 0.15s both; }
.prd-grid .prd-card:nth-child(4)  { animation: prd-cardIn 0.5s ease 0.20s both; }
.prd-grid .prd-card:nth-child(5)  { animation: prd-cardIn 0.5s ease 0.25s both; }
.prd-grid .prd-card:nth-child(6)  { animation: prd-cardIn 0.5s ease 0.30s both; }
.prd-grid .prd-card:nth-child(7)  { animation: prd-cardIn 0.5s ease 0.35s both; }
.prd-grid .prd-card:nth-child(8)  { animation: prd-cardIn 0.5s ease 0.40s both; }
.prd-grid .prd-card:nth-child(9)  { animation: prd-cardIn 0.5s ease 0.45s both; }
.prd-grid .prd-card:nth-child(10) { animation: prd-cardIn 0.5s ease 0.50s both; }
.prd-grid .prd-card:nth-child(11) { animation: prd-cardIn 0.5s ease 0.55s both; }
.prd-grid .prd-card:nth-child(12) { animation: prd-cardIn 0.5s ease 0.60s both; }

@keyframes prd-cardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   NEWS SECTION — hm-news-sec
   3-col grid | First card full-width hero | Clean redesign
   ============================================================ */

@keyframes hm-news-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section wrapper ── */
.hm-news-sec {
  position: relative;
  padding-top: var(--py, clamp(3.5rem, 7vw, 7rem));
  padding-bottom: var(--py, clamp(3.5rem, 7vw, 7rem));
  background: #ffffff;
}

/* ── Header row ── */
.hm-news-sec__hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* ── Grid ── */
.hm-news-sec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 991px) {
  .hm-news-sec__grid  { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 576px) {
  .hm-news-sec__grid  { grid-template-columns: 1fr; }
  }

/* ============================================================
   NEWS CARD
   ============================================================ */
.hm-ncard {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  border: 1.5px solid #eaecf2;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s;
  animation: hm-news-in 0.5s ease both;
}

/* Stagger */
.hm-ncard:nth-child(1) { animation-delay: 0.05s; }
.hm-ncard:nth-child(2) { animation-delay: 0.12s; }
.hm-ncard:nth-child(3) { animation-delay: 0.19s; }
.hm-ncard:nth-child(4) { animation-delay: 0.26s; }
.hm-ncard:nth-child(5) { animation-delay: 0.33s; }
.hm-ncard:nth-child(6) { animation-delay: 0.40s; }

.hm-ncard:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px rgba(39,64,105,0.13);
  border-color: rgba(81,132,197,0.25);
}

/* ── Image wrap ── */
.hm-ncard__img-wrap {
  position: relative;
  overflow: hidden;
  height: 220px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hm-ncard__img-wrap                 { height: 180px; }
}

.hm-ncard__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1a2d4a;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.hm-ncard:hover .hm-ncard__img { transform: scale(1.06); }

/* Gradient overlay — stronger on hero */
.hm-ncard__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,14,22,0.55) 0%,
    rgba(10,14,22,0.0)  60%
  );
  z-index: 1;
  transition: opacity 0.3s;
}

.hm-ncard--hero .hm-ncard__overlay {
  background: linear-gradient(
    to top,
    rgba(10,14,22,0.75) 0%,
    rgba(10,14,22,0.1)  60%
  );
}

.hm-ncard:hover .hm-ncard__overlay { opacity: 0.85; }

/* Top accent bar */
.hm-ncard__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5184c5, #c8a255);
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.hm-ncard:hover .hm-ncard__bar { transform: scaleX(1); }

/* Featured badge */
.hm-ncard__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 3;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0d1117;
  background: #c8a255;
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
}

/* ── Body ── */
.hm-ncard__body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Meta row */
.hm-ncard__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.hm-ncard__date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5184c5;
}

.hm-ncard__sep {
  color: #c8d0dc;
  font-size: 0.75rem;
}

.hm-ncard__cat {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a0aab8;
}

/* Title */
.hm-ncard__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #0d1117;
  margin: 0 0 0.6rem;
  transition: color 0.25s;
  flex: 1;
}

.hm-ncard:hover .hm-ncard__title { color: #274069; }

/* Excerpt — only on hero */
.hm-ncard__excerpt {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  color: #6b7a8d;
  margin: 0 0 1rem;
  max-width: 560px;
}

/* CTA row */
.hm-ncard__cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5184c5;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid #eaecf2;
  transition: gap 0.25s, color 0.25s;
}

.hm-ncard:hover .hm-ncard__cta {
  gap: 0.65rem;
  color: #274069;
}

/* ── Ensure no card ever spans full width ── */
.hm-news-sec__grid .hm-ncard,
.hm-news-sec__grid .hm-ncard--hero {
  grid-column: span 1 !important;
}

/* ============================================================
   NEWS ARCHIVE PAGE — archive-news.css
   Extends section-news.css — add both stylesheets
   Adds: archive wrapper, pagination, empty state
   ============================================================ */

/* ── Archive section wrapper ── */
.nws-archive {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  background: #f7f8fb;
}

/* Inherit the grid from section-news.css */
.nws-archive__grid {
  margin-bottom: 3rem;
}

/* ── Pagination ── */
.nws-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid #eaecf2;
}

.nws-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #6b7a8d;
  padding: 0.55rem 1rem;
  border-radius: 5px;
  border: 1.5px solid #e8ecf2;
  background: #ffffff;
  transition: background 0.25s, border-color 0.25s,
              color 0.25s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.nws-pagination .page-numbers:hover {
  background: rgba(81,132,197,0.06);
  border-color: rgba(81,132,197,0.3);
  color: #5184c5;
  transform: translateY(-2px);
}

.nws-pagination .page-numbers.current {
  background: linear-gradient(135deg, #5184c5, #274069);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(81,132,197,0.3);
}

.nws-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: #c0c8d5;
  pointer-events: none;
}

.nws-pagination .prev.page-numbers,
.nws-pagination .next.page-numbers {
  padding: 0.55rem 1.25rem;
}

/* ── Empty state ── */
.nws-empty {
  text-align: center;
  padding: 5rem 2rem;
}

.nws-empty p {
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  color: #a0aab8;
}

/* ── Card overrides for archive bg ── */
.nws-archive .hm-ncard {
  background: #ffffff;
}

/* On f7f8fb bg, remove the white-on-white border */
.nws-archive .hm-ncard {
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(39,64,105,0.07);
}

.nws-archive .hm-ncard:hover {
  border-color: rgba(81,132,197,0.2);
  box-shadow: 0 20px 48px rgba(39,64,105,0.13);
}

/* ============================================================
   SINGLE NEWS — single-news.css
   Hero | Article + Sidebar | Related cards
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes snws-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes snws-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ============================================================
   HERO
   ============================================================ */
.snws-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0d1117;
}

/* Background */
.snws-hero__bg { position: absolute; inset: 0; z-index: 0; }

.snws-hero__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.04);
  transition: transform 8s ease;
}

.snws-hero:hover .snws-hero__img { transform: scale(1); }

.snws-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.snws-hero__overlay {
  position: absolute; inset: 0;
  background: rgba(10,14,22,0.52);
  z-index: 1;
}

.snws-hero__overlay-grad {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 65%; z-index: 2;
  background: linear-gradient(to top,
    rgba(10,14,22,0.97) 0%,
    rgba(10,14,22,0.0)  100%);
}

/* Watermark */
.snws-hero__wm {
  position: absolute;
  bottom: -2rem; right: -1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(6rem, 18vw, 16rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: rgba(81,132,197,0.07);
  pointer-events: none;
  user-select: none;
  z-index: 2;
  line-height: 1;
}

/* Caption */
.snws-hero__caption {
  position: relative;
  z-index: 4;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 860px;
}

.snws-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.snws-hero__breadcrumb a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s;
}

.snws-hero__breadcrumb a:hover { color: rgba(255,255,255,0.8); }

.snws-hero__breadcrumb span:last-child {
  color: rgba(255,255,255,0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

/* Category pill */
.snws-hero__cat {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0d1117;
  background: #c8a255;
  border-radius: 100px;
  padding: 0.28rem 0.8rem;
  margin-bottom: 1rem;
}

/* Title */
.snws-hero__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 1.25rem;
  animation: snws-in 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}

/* Shimmer underline */
.snws-hero__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #5184c5, #c8a255, #5184c5);
  background-size: 200% auto;
  border-radius: 2px;
  margin-top: 1rem;
  animation: snws-shimmer 3s linear infinite;
}

/* Meta */
.snws-hero__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  animation: snws-in 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both;
}

.snws-hero__date,
.snws-hero__author,
.snws-hero__read {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
}

.snws-hero__sep { color: rgba(255,255,255,0.2); font-size: 0.9rem; }

/* ============================================================
   LAYOUT — content + sidebar
   ============================================================ */
.snws-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3.5rem;
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background: #ffffff;
}

@media (max-width: 991px) {
  .snws-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .snws-sidebar { order: -1; }
}

/* ── Share bar ── */
.snws-share {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #eaecf2;
  margin-bottom: 2rem;
}

.snws-share--foot {
  border-bottom: none;
  border-top: 1px solid #eaecf2;
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding-top: 1.25rem;
}

.snws-share__lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a0aab8;
  flex-shrink: 0;
}

/* ── Article content ── */
.snws-content {
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  color: #3d4a5c;
}

.snws-content h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0d1117;
  margin: 2.5rem 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #eaecf2;
}

.snws-content h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a2d4a;
  margin: 2rem 0 0.65rem;
}

.snws-content p { margin: 0 0 1.25rem; }

.snws-content img,
.snws-content .content-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.75rem 0;
  display: block;
  box-shadow: 0 8px 28px rgba(39,64,105,0.1);
}

.snws-content a {
  color: #5184c5;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.snws-content a:hover { color: #274069; }

.snws-content blockquote {
  border-left: 3px solid #5184c5;
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: rgba(81,132,197,0.05);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #5a6478;
}

.snws-content ul,
.snws-content ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}

.snws-content li { margin-bottom: 0.4rem; }

/* ── Tags ── */
.snws-tags {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eaecf2;
}

.snws-tags__lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a0aab8;
  padding-top: 0.3rem;
  flex-shrink: 0;
}

.snws-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.snws-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5184c5;
  border: 1.5px solid rgba(81,132,197,0.25);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.snws-tag:hover {
  background: #5184c5;
  border-color: #5184c5;
  color: #ffffff;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.snws-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.snws-sidebar__card {
  background: #ffffff;
  border: 1.5px solid #eaecf2;
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 12px rgba(39,64,105,0.05);
}

.snws-sidebar__card-hdr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5184c5;
  margin-bottom: 1rem;
}

.snws-sidebar__card-line {
  display: inline-block;
  width: 16px;
  height: 1.5px;
  background: linear-gradient(90deg, #5184c5, #c8a255);
}

/* TOC */
.snws-toc__links {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.snws-toc__links a {
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: #6b7a8d;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
  border-left: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s, padding-left 0.25s;
  line-height: 1.4;
}

.snws-toc__links a:hover,
.snws-toc__links a.active {
  background: rgba(81,132,197,0.07);
  border-left-color: #5184c5;
  color: #274069;
  padding-left: 0.9rem;
}

/* Info card */
.snws-info__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f0f2f5;
}

.snws-info__row:last-child { border-bottom: none; }

.snws-info__lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a0aab8;
}

.snws-info__val {
  font-family: 'Barlow', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #274069;
}

/* Back link */
.snws-sidebar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5184c5;
  text-decoration: none;
  padding: 0.7rem 1rem;
  border: 1.5px solid rgba(81,132,197,0.25);
  border-radius: 6px;
  transition: background 0.25s, border-color 0.25s,
              color 0.25s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.snws-sidebar__back:hover {
  background: rgba(81,132,197,0.07);
  border-color: rgba(81,132,197,0.5);
  color: #274069;
  transform: translateX(-3px);
}

/* ============================================================
   RELATED NEWS
   ============================================================ */
.snws-related {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  background: #f7f8fb;
}

.snws-related__hdr {
  margin-bottom: 2.5rem;
}

.snws-related__grid {
  /* Inherits hm-news-sec__grid = repeat(3, 1fr) */
}

/* Force 3 col, no hero span */
.snws-related__grid .hm-ncard {
  grid-column: span 1 !important;
}

@media (max-width: 768px) {
  .snws-related__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   404 PAGE — 404.css
   Full-bleed hero | Huge watermark | Floating chips
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes nf-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nf-chip {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nf-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes nf-wm-drift {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes nf-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes nf-line-pulse {
  0%,100% { opacity: 0.4; transform: scaleY(1); }
  50%     { opacity: 1;   transform: scaleY(0.5); }
}

/* ── Page wrapper ── */
.nf-page { background: #0d1117; }

/* ============================================================
   HERO
   ============================================================ */
.nf-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0d1117;
}

/* Background */
.nf-hero__bg {
  position: absolute; inset: 0;
  background-image: var(--nf-bg,
    linear-gradient(135deg, #0d1117 0%, #1a2d4a 50%, #274069 100%));
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.04);
  animation: nf-wm-drift 12s ease-in-out infinite alternate;
}

.nf-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(10,14,22,0.62);
}

.nf-hero__overlay-grad {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 70%; z-index: 2;
  background: linear-gradient(to top,
    rgba(10,14,22,0.98) 0%,
    rgba(10,14,22,0.0)  100%);
}

/* ── Watermark ── */
.nf-hero__wm {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14rem, 35vw, 32rem);
  font-weight: 800;
  letter-spacing: -0.1em;
  line-height: 1;
  color: rgba(81,132,197,0.07);
  pointer-events: none;
  user-select: none;
  z-index: 2;
  white-space: nowrap;
}

/* ── Floating chips ── */
.nf-hero__chips {
  position: absolute;
  top: clamp(5rem, 10vw, 8rem);
  right: clamp(1.5rem, 5vw, 5rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nf-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  animation: nf-chip 0.6s cubic-bezier(0.16,1,0.3,1) both,
             nf-float 5s ease-in-out 0.6s infinite;
}

.nf-chip:nth-child(2) {
  animation-delay: 0.12s, 0.8s;
  animation-duration: 0.6s, 4.2s;
}

.nf-chip__icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(81,132,197,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5184c5;
  flex-shrink: 0;
}

.nf-chip__icon--warn {
  background: rgba(200,162,85,0.2);
  color: #c8a255;
}

@media (max-width: 576px) {
  .nf-hero__chips { display: none; }
}

/* ── Caption ── */
.nf-hero__caption {
  position: relative;
  z-index: 4;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  max-width: 720px;
}

/* Eyebrow */
.nf-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1rem;
  animation: nf-in 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}

.nf-hero__eyebrow-line {
  display: inline-block;
  width: 24px; height: 1.5px;
  background: linear-gradient(90deg, #5184c5, #c8a255);
}

/* Title */
.nf-hero__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: #ffffff;
  margin: 0 0 1.5rem;
  animation: nf-in 0.8s cubic-bezier(0.16,1,0.3,1) 0.25s both;
}

.nf-hero__title em {
  font-style: normal;
  color: #5184c5;
}

/* Shimmer underline */
.nf-hero__title::after {
  content: '';
  display: block;
  width: 80px; height: 3px;
  background: linear-gradient(90deg, #5184c5, #c8a255, #5184c5);
  background-size: 200% auto;
  border-radius: 2px;
  margin-top: 1rem;
  animation: nf-shimmer 3s linear infinite;
}

/* Description */
.nf-hero__desc {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
  margin: 0 0 2rem;
  max-width: 520px;
  animation: nf-in 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both;
}

.nf-hero__desc a {
  color: #5184c5;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.nf-hero__desc a:hover { color: #c8a255; }

/* Actions */
.nf-hero__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  animation: nf-in 0.8s cubic-bezier(0.16,1,0.3,1) 0.55s both;
}

.nf-hero__ghost {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}

.nf-hero__ghost:hover {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.6);
}

/* Scroll line */
.nf-hero__line {
  position: absolute;
  bottom: 0;
  right: clamp(1.5rem, 3vw, 3.5rem);
  width: 1.5px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(81,132,197,0.6));
  z-index: 5;
  animation: nf-line-pulse 2s ease-in-out infinite;
}

.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
}

/* ============================================================
   GLOBAL REACH — glb-reach
   Interactive world map + regions list
   ============================================================ */

@keyframes glb-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}
@keyframes glb-dot-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes glb-region-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Section ── */
.glb-reach {
  position: relative;
  padding-top: var(--py, clamp(3.5rem, 7vw, 7rem));
  padding-bottom: var(--py, clamp(3.5rem, 7vw, 7rem));
  background: #f7f8fb;
  overflow: hidden;
}

/* ── Header ── */
.glb-reach__hdr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .glb-reach__hdr { grid-template-columns: 1fr; gap: 1rem; }
}

.glb-reach__intro {
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.85;
  color: #5a6478;
  margin: 0;
  max-width: 420px;
  justify-self: end;
}

/* ── Body: map + list ── */
.glb-reach__body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}

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

/* ── Map wrapper ── */
.glb-reach__map-wrap {
  background: #eef2f8;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
  position: relative;
  min-height: 400px;
}

.glb-reach__map-inner {
  width: 100%;
  height: 100%;
}

/* SVG map injected by JS */
.glb-reach__map-inner svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Continent paths */
.glb-continent {
  fill: #c8d5e8;
  stroke: #ffffff;
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill 0.3s ease;
}

.glb-continent:hover,
.glb-continent.is-active {
  fill: #5184c5;
}

/* Trade dots */
.glb-trade-dot {
  fill: #5184c5;
  cursor: pointer;
  animation: glb-dot-in 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.glb-trade-dot.dot-gold { fill: #c8a255; }

/* Pulse ring */
.glb-pulse-ring {
  fill: none;
  stroke: #5184c5;
  stroke-width: 1;
  animation: glb-pulse 2.5s ease-out infinite;
  transform-origin: center;
}

.glb-pulse-ring.ring-gold { stroke: #c8a255; }

/* Trade route lines */
.glb-route {
  fill: none;
  stroke: rgba(81,132,197,0.25);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: glb-route-dash 3s linear infinite;
}

@keyframes glb-route-dash {
  to { stroke-dashoffset: -24; }
}

/* ── Region list ── */
.glb-reach__regions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.glb-reach__region {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s,
              transform 0.3s cubic-bezier(0.16,1,0.3,1);
  animation: glb-region-in 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.glb-reach__region:nth-child(1) { animation-delay: 0.05s; }
.glb-reach__region:nth-child(2) { animation-delay: 0.12s; }
.glb-reach__region:nth-child(3) { animation-delay: 0.19s; }
.glb-reach__region:nth-child(4) { animation-delay: 0.26s; }
.glb-reach__region:nth-child(5) { animation-delay: 0.33s; }

.glb-reach__region:hover {
  background: rgba(81,132,197,0.06);
  border-color: rgba(81,132,197,0.2);
  transform: translateX(4px);
}

.glb-reach__region.is-active {
  background: rgba(81,132,197,0.08);
  border-color: rgba(81,132,197,0.3);
  transform: translateX(4px);
}

.glb-reach__region-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0c8d5;
  flex-shrink: 0;
  margin-top: 5px;
  transition: background 0.25s, transform 0.25s;
}

.glb-reach__region:hover .glb-reach__region-dot,
.glb-reach__region.is-active .glb-reach__region-dot {
  background: #5184c5;
  transform: scale(1.4);
}

.glb-reach__region-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.glb-reach__region-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a2d4a;
  transition: color 0.25s;
}

.glb-reach__region:hover .glb-reach__region-name,
.glb-reach__region.is-active .glb-reach__region-name {
  color: #5184c5;
}

.glb-reach__region-desc {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.5;
  color: #8a95a8;
}