/* ThinkScope - core design system */

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

:root {
  --navy-900: #061F35;
  --navy-800: #0B3255;
  --navy-700: #0F4A78;
  --navy-600: #145C94;
  --navy-100: #E7EEF5;
  --orange-600: #E67E0E;
  --orange-500: #F2960F;
  --orange-400: #F7A621;
  --orange-100: #FDECD3;
  --grey-50: #F7F8FA;
  --grey-100: #F0F2F5;
  --grey-200: #E3E7EC;
  --grey-400: #9AA5B1;
  --charcoal: #1E2530;
  --charcoal-soft: #4A5568;
  --white: #FFFFFF;

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-accent: 'Newsreader', Georgia, serif;

  --container: 1240px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(11, 50, 85, 0.06);
  --shadow-md: 0 12px 32px rgba(11, 50, 85, 0.10);
  --shadow-lg: 0 24px 60px rgba(6, 31, 53, 0.16);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-900);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); font-weight: 800; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--charcoal-soft); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--grey { background: var(--grey-50); }
.section--navy { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: rgba(255,255,255,.78); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--orange-600); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--orange-500); border-radius: 2px; }
.section--navy .eyebrow { color: var(--orange-400); }

.section-head { max-width: 720px; margin: 0 0 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: 100px; font-weight: 700; font-size: .96rem;
  border: 2px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orange-500); color: var(--white); box-shadow: 0 10px 24px rgba(242,150,15,.32); }
.btn-primary:hover { background: var(--orange-600); box-shadow: 0 14px 30px rgba(242,150,15,.4); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,.5); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn-navy { background: var(--navy-800); color: var(--white); }
.btn-navy:hover { background: var(--navy-900); }
.btn-ghost { background: var(--white); color: var(--navy-800); border-color: var(--grey-200); }
.btn-ghost:hover { border-color: var(--navy-700); color: var(--navy-900); }
.btn-sm { padding: 9px 18px; font-size: .84rem; }
.btn-block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy-800); }
.link-arrow .icon { width: 16px; height: 16px; color: var(--orange-500); transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.icon { width: 22px; height: 22px; }

/* =============== Site header =============== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--grey-200);
}
/* Frosted-glass fill lives on a pseudo-element, not .site-header itself —
   backdrop-filter on the header would make it the containing block for its
   position:fixed mobile-nav descendant, breaking the fullscreen menu. */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 92px; overflow: visible; }
.brand { display: flex; align-items: center; font-family: var(--font-display); }

/* Logo mark: real logo pixels are untouched — the motion lives in pseudo-elements
   layered behind/around the <img>, so the artwork itself never gets filtered or distorted.
   translateY pushes the whole badge down so it visibly "pops out" past the header's
   bottom edge, overlapping the hero section beneath it (visual only — the header's own
   layout height and the nav row next to it are completely unaffected). */
.brand-mark {
  position: relative; width: 96px; height: 96px; display: grid; place-items: center; flex-shrink: 0;
  transform: translateY(26px);
  filter: drop-shadow(0 10px 18px rgba(6,31,53,.28));
}
.brand-mark::before {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,150,15,.4), rgba(15,74,120,.18) 55%, transparent 72%);
  animation: brandGlow 3.2s ease-in-out infinite;
  z-index: 0;
}
.brand-mark::after {
  content: '';
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 1.5px dashed rgba(242,150,15,.55);
  animation: brandOrbit 12s linear infinite;
  z-index: 0;
}
.brand-mark img {
  position: relative; z-index: 1;
  height: 92px; width: 92px; object-fit: contain;
  border-radius: 50%;
  background: var(--white);
  transition: transform .35s var(--ease);
}
.brand:hover .brand-mark img { transform: scale(1.06); }
.brand:hover .brand-mark::before { animation-duration: 1.6s; }
.brand:hover .brand-mark::after { animation-duration: 5s; }
@keyframes brandGlow {
  0%, 100% { transform: scale(0.9); opacity: .5; }
  50% { transform: scale(1.14); opacity: 1; }
}
@keyframes brandOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 10px 16px; border-radius: 100px; font-weight: 600; font-size: .95rem; color: var(--navy-800);
  transition: background .2s, color .2s;
}
.main-nav a:hover, .main-nav a.is-active { background: var(--navy-100); color: var(--navy-900); }
.nav-cta { display: none; } /* shown only inside the mobile nav overlay — see media query below */
.header-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none; background: none; border: none; padding: 8px; color: var(--navy-900);
}

@media (max-width: 960px) {
  .main-nav { position: fixed; top: 92px; right: 0; bottom: 0; left: 0; background: var(--white); flex-direction: column; align-items: stretch;
    padding: 20px 24px; gap: 6px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
    overflow-y: auto; }
  .main-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav a { padding: 14px 16px; font-size: 1.05rem; }
  .nav-cta { display: inline-flex; margin-top: 12px; }
  .nav-toggle { display: inline-flex; }
  .header-cta .btn-primary-desktop { display: none; }
}

/* =============== Hero =============== */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 15% 20%, #0D4370 0%, var(--navy-900) 55%, #051624 100%);
  color: var(--white);
  padding: 130px 0 150px;
  min-height: 680px;
  display: flex; align-items: center;
}

/* Background photo slideshow: three full-bleed photos crossfade behind the
   hero copy. JS just toggles .is-active every few seconds; the transition
   itself is a plain CSS opacity fade, and if JS never runs (or the visitor
   prefers reduced motion) slide 1 stays put as a perfectly normal static
   hero photo — see main.js. */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.8s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(5,16,28,.48) 0%, rgba(6,31,53,.45) 30%, rgba(9,42,71,.3) 58%, rgba(11,50,85,.19) 100%),
    linear-gradient(180deg, rgba(4,13,23,.13), rgba(4,13,23,.28));
}

.hero__bg { position: absolute; inset: 0; z-index: 2; opacity: .55; }
.hero__bg span {
  position: absolute; border-radius: 50%; filter: blur(2px);
  animation: float 12s ease-in-out infinite;
}
.hero__bg span:nth-child(1) { width: 340px; height: 340px; top: -80px; right: 6%; background: radial-gradient(circle, rgba(242,150,15,.35), transparent 70%); }
.hero__bg span:nth-child(2) { width: 220px; height: 220px; bottom: 0; left: 4%; background: radial-gradient(circle, rgba(20,92,148,.55), transparent 70%); animation-delay: -4s; }
.hero__bg span:nth-child(3) { width: 160px; height: 160px; top: 40%; right: 28%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); animation-delay: -8s; }
.hero__bg svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .25; }
@keyframes float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-22px) translateX(12px); } }

.hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__title { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-bottom: .4em; color: var(--white); text-shadow: 0 2px 18px rgba(4,13,23,.55); }
.hero__title em { font-style: normal; color: var(--orange-400); }
.hero__subtitle { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 540px; margin-bottom: 2em; text-shadow: 0 1px 10px rgba(4,13,23,.5); }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__visual { position: relative; height: 500px; }
.hero-path {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;
}
.hero-node {
  display: flex; align-items: center; gap: 14px; background: rgba(6,20,36,.6); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); padding: 14px 18px; border-radius: 16px; max-width: 280px;
  box-shadow: 0 12px 28px rgba(4,13,23,.35);
  animation: nodeIn .8s var(--ease) both;
}
.hero-node:nth-child(2) { align-self: flex-end; animation-delay: .15s; }
.hero-node:nth-child(3) { animation-delay: .3s; }
.hero-node:nth-child(4) { align-self: flex-end; animation-delay: .45s; }
@keyframes nodeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero-node__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--orange-500); display: grid; place-items: center; flex-shrink: 0; }
.hero-node__icon .icon { width: 20px; height: 20px; color: var(--navy-900); }
.hero-node strong { display: block; font-size: .92rem; }
.hero-node span { font-size: .78rem; color: rgba(255,255,255,.7); }
.hero-connector { position: absolute; left: 24px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(var(--orange-400), transparent, var(--navy-600)); opacity: .35; }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { height: 320px; }
}

/* =============== Stats =============== */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--grey-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.stat-card { background: var(--white); padding: 36px 24px; text-align: center; }
.stat-card strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2vw, 2.2rem); font-weight: 800; color: var(--navy-900); }
.stat-card strong .icon { color: var(--orange-500); }
.stat-card span { font-size: .88rem; color: var(--charcoal-soft); font-weight: 600; }
@media (max-width: 760px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }

/* =============== Cards / grids =============== */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-md);
  padding: 32px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--navy-100); display: grid; place-items: center; margin-bottom: 20px; transition: background .3s, transform .3s; }
.card__icon .icon { color: var(--navy-700); }
.card:hover .card__icon { background: var(--orange-500); transform: rotate(-6deg) scale(1.05); }
.card:hover .card__icon .icon { color: var(--white); }
.card h3 { margin-bottom: .5em; }
.card p:last-of-type { margin-bottom: 1.4em; }

.service-card .card__index { font-family: var(--font-display); font-weight: 800; color: var(--grey-200); font-size: 2.2rem; position: absolute; top: 20px; right: 24px; }
.service-card { position: relative; overflow: hidden; }

/* Why ThinkScope */
.why-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--grey-200); }
.why-item:last-child { border-bottom: none; }
.why-item__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-100); display: grid; place-items: center; flex-shrink: 0; }
.why-item__icon .icon { color: var(--orange-600); width: 20px; height: 20px; }
.why-item h4 { margin: 0 0 4px; font-size: 1.02rem; color: var(--navy-900); }
.why-item p { margin: 0; font-size: .92rem; }

/* Beyond placement */
.beyond {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white); padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
/* Grid items default to min-width:auto, so a nowrap button (.btn) inside can
   force this column wider than the track and get silently clipped by the
   overflow:hidden above — min-width:0 lets the track shrink to fit instead. */
.beyond > div { min-width: 0; }
.beyond__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(242,150,15,.16); border: 1px solid rgba(242,150,15,.4); color: var(--orange-400); padding: 8px 16px; border-radius: 100px; font-size: .82rem; font-weight: 700; margin-bottom: 20px; }
.beyond h2 { color: var(--white); }
.beyond p { color: rgba(255,255,255,.8); }
.beyond ul { display: grid; gap: 14px; margin-top: 24px; }
.beyond ul li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: rgba(255,255,255,.92); }
.beyond ul li .icon { color: var(--orange-400); width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.beyond__visual { position: relative; height: 100%; min-height: 320px; display: grid; place-items: center; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Beyond Placement photo: a slow-orbiting dashed ring frames it (echoes the
   header logo's ring motif), and main.js adds a cursor-tracking 3D tilt on
   pointer devices — .beyond__photo-frame itself only holds the transition,
   so with JS disabled or reduced motion the photo just sits perfectly flat. */
.beyond__photo-frame {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 4/5;
  transition: transform .35s var(--ease);
  transform-style: preserve-3d;
}
.beyond__ring-deco {
  position: absolute; inset: -16px; border-radius: var(--radius-lg);
  border: 2px dashed rgba(242,150,15,.55);
  animation: spin 50s linear infinite;
  pointer-events: none;
}
.beyond__photo {
  position: relative; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(4,13,23,.5);
  border: 1px solid rgba(255,255,255,.18);
}
.beyond__badge-float {
  position: absolute; left: -18px; bottom: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange-500); color: var(--navy-900); font-weight: 700; font-size: .82rem;
  padding: 10px 18px; border-radius: 100px; box-shadow: 0 10px 24px rgba(4,13,23,.4);
  animation: badgeFloat 3.4s ease-in-out infinite;
}
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 900px) { .beyond { grid-template-columns: 1fr; padding: 40px 28px; } .beyond__visual { min-height: 200px; } .beyond__photo-frame { max-width: 300px; } }
@media (max-width: 420px) { .beyond .btn { white-space: normal; text-align: center; } }

/* Global reach */
.country-chip { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--grey-200); border-radius: 100px; padding: 10px 20px 10px 10px; transition: box-shadow .25s, transform .25s; }
.country-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.country-chip img, .country-chip .flag-fallback { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--grey-100); }
.country-chip strong { display: block; font-size: .95rem; color: var(--navy-900); }
.country-chip span { font-size: .78rem; color: var(--charcoal-soft); }

/* Leadership */
.leader-card { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--grey-200); padding: 40px; box-shadow: var(--shadow-sm); }
.leader-photo { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(150deg, var(--navy-800), var(--navy-600)); display: grid; place-items: center; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; }
.leader-photo .icon { width: 84px; height: 84px; color: rgba(255,255,255,.5); }
.leader-copy .eyebrow { margin-bottom: 8px; }
.leader-copy h3 { font-size: 1.5rem; margin-bottom: 2px; }
.leader-copy .leader-title { color: var(--orange-600); font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.leader-copy .leader-subtitle { color: var(--charcoal-soft); font-size: .85rem; margin-bottom: 16px; }
@media (max-width: 760px) { .leader-card { grid-template-columns: 1fr; } .leader-photo { max-width: 220px; margin: 0 auto; } }

/* Approach pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--grey-200); border-radius: var(--radius-lg); overflow: hidden; }
.pillar { background: var(--white); padding: 40px 26px; text-align: center; position: relative; }
.pillar__num { font-family: var(--font-accent); font-style: italic; color: var(--grey-400); font-size: 2rem; margin-bottom: 12px; }
.pillar__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--navy-100); display: grid; place-items: center; margin: 0 auto 16px; }
.pillar__icon .icon { color: var(--navy-700); }
.pillar h4 { font-size: 1rem; margin-bottom: 8px; }
.pillar p { font-size: .88rem; margin: 0; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* Navy variant — "Who We Are" grid on the homepage */
.pillars--navy { background: rgba(255,255,255,.1); box-shadow: 0 20px 50px rgba(6,31,53,.25); }
.pillars--navy .pillar {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.pillars--navy .pillar h4 { color: var(--white); }
.pillars--navy .pillar p { color: rgba(255,255,255,.72); }
.pillars--navy .pillar__icon { background: rgba(255,255,255,.12); transition: background .3s var(--ease), transform .3s var(--ease); }
.pillars--navy .pillar__icon .icon { color: var(--orange-400); transition: color .3s var(--ease); }
.pillars--navy .pillar:hover { background: linear-gradient(160deg, var(--navy-700), var(--navy-800)); transform: translateY(-5px); z-index: 1; }
.pillars--navy .pillar:hover .pillar__icon { background: var(--orange-500); transform: scale(1.1) rotate(-8deg); }
.pillars--navy .pillar:hover .pillar__icon .icon { color: var(--navy-900); }

/* Final CTA */
.final-cta { text-align: center; padding: 90px 0; background: linear-gradient(160deg, var(--navy-900), #0A2A48); color: var(--white); position: relative; overflow: hidden; }
.final-cta h2 { color: var(--white); max-width: 760px; margin-left: auto; margin-right: auto; }
.final-cta p { color: rgba(255,255,255,.78); max-width: 620px; margin: 0 auto 2em; }
.final-cta .hero__actions { justify-content: center; }

/* =============== Page hero (inner pages) =============== */
.page-hero { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: var(--white); padding: 70px 0 90px; position: relative; overflow: hidden; }
.page-hero .eyebrow { color: var(--orange-400); }
.page-hero h1 { color: var(--white); max-width: 760px; }
.page-hero p { color: rgba(255,255,255,.8); max-width: 620px; font-size: 1.08rem; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,.85); }

/* Vision / Mission */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vm-card { border-radius: var(--radius-lg); padding: 44px; position: relative; }
.vm-card.vision { background: var(--navy-900); color: var(--white); }
.vm-card.vision p { color: rgba(255,255,255,.82); }
.vm-card.mission { background: var(--orange-100); }
.vm-card .icon-lg { width: 52px; height: 52px; color: var(--orange-400); margin-bottom: 20px; }
.vm-card.mission .icon-lg { color: var(--orange-600); }
.vm-card h3 { font-size: 1.6rem; }
.vm-card.vision h3 { color: var(--white); }
.vm-card p { font-family: var(--font-accent); font-size: 1.2rem; font-style: italic; line-height: 1.6; }
@media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } }

/* Accordion (leadership profile) */
.accordion-item { border: 1px solid var(--grey-200); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--grey-50); border: none; padding: 18px 22px; font-weight: 700; font-size: 1rem; color: var(--navy-900); text-align: left;
}
.accordion-trigger .icon { color: var(--orange-500); transition: transform .3s var(--ease); flex-shrink: 0; }
.accordion-item.is-open .accordion-trigger .icon { transform: rotate(180deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.accordion-panel__inner { padding: 20px 22px 22px; }
.accordion-panel__inner ul { display: grid; gap: 10px; }
.accordion-panel__inner li { display: flex; gap: 10px; font-size: .95rem; color: var(--charcoal-soft); }
.accordion-panel__inner li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); margin-top: 8px; flex-shrink: 0; }

/* Tabs (executive profiles) */
.tabs-nav { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.tabs-nav button { padding: 10px 20px; border-radius: 100px; border: 1px solid var(--grey-200); background: var(--white); font-weight: 700; font-size: .88rem; color: var(--navy-800); }
.tabs-nav button.is-active { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Countries page */
.country-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--grey-200); background: var(--white); transition: box-shadow .3s, transform .3s; }
.country-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.country-card__media { height: 160px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); position: relative; display: flex; align-items: flex-end; padding: 20px; }
.country-card__flag { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); overflow: hidden; background: var(--white); position: absolute; left: 20px; bottom: -28px; box-shadow: var(--shadow-sm); }
.country-card__flag img { width: 100%; height: 100%; object-fit: cover; }
.country-card__media h3 { color: var(--white); margin: 0; font-size: 1.3rem; }
.country-card__body { padding: 40px 24px 24px; }
.country-card__body > p { font-size: .94rem; }
.country-card__toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--navy-800); background: none; border: none; padding: 0; }
.country-card__toggle .icon { width: 16px; height: 16px; color: var(--orange-500); transition: transform .3s; }
.country-card.is-open .country-card__toggle .icon { transform: rotate(180deg); }
.country-card__more { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.country-card__more-inner { padding-top: 16px; }
.country-card__more-inner .service-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--navy-100); color: var(--navy-800); font-size: .8rem; font-weight: 700; padding: 6px 14px; border-radius: 100px; margin-top: 10px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: flex-start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-card { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--grey-200); }
.contact-info-card:last-child { border-bottom: none; }
.contact-info-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--navy-100); display: grid; place-items: center; flex-shrink: 0; }
.contact-info-card__icon .icon { color: var(--navy-700); }
.contact-info-card strong { display: block; color: var(--navy-900); margin-bottom: 4px; }
.contact-info-card p { margin: 0; font-size: .92rem; }
.map-placeholder { margin-top: 24px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--grey-200); }

.form-card { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .86rem; color: var(--navy-900); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 10px; border: 1.5px solid var(--grey-200); font-family: inherit; font-size: .95rem;
  background: var(--grey-50); transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange-500); background: var(--white); }
.field textarea { resize: vertical; min-height: 130px; }
.field-hint { font-size: .78rem; color: var(--grey-400); margin-top: 6px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

.alert { padding: 16px 20px; border-radius: 12px; font-size: .92rem; font-weight: 600; margin-bottom: 22px; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: #E7F6EC; color: #1D6B3B; }
.alert-error { background: #FBE9E7; color: #B23B2E; }
.alert .icon { flex-shrink: 0; margin-top: 1px; }

/* Footer */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.72); padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 56px; width: 56px; object-fit: cover; margin-bottom: 16px; border-radius: 14px; background: var(--white); padding: 4px; box-shadow: var(--shadow-sm); }
.footer-brand p { color: rgba(255,255,255,.62); font-size: .9rem; max-width: 300px; }
.footer-tagline { color: var(--orange-400); font-weight: 700; font-family: var(--font-accent); font-style: italic; margin-bottom: 10px; }
.site-footer h4 { color: var(--white); font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.site-footer ul { display: grid; gap: 12px; }
.site-footer a { color: rgba(255,255,255,.68); font-size: .92rem; transition: color .2s; }
.site-footer a:hover { color: var(--orange-400); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.footer-contact .icon { width: 16px; height: 16px; color: var(--orange-400); margin-top: 3px; flex-shrink: 0; }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.social-row a:hover { background: var(--orange-500); color: var(--navy-900); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: .82rem; color: rgba(255,255,255,.5); flex-wrap: wrap; gap: 10px; }

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: var(--white);
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37,211,102,.5);
  transition: transform .25s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float .icon { width: 30px; height: 30px; }

/* Scroll reveal (progressive enhancement: content is fully visible without JS;
   the "js" class is added by an inline head script only once JS is confirmed running) */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible .reveal-item { transition-delay: calc(var(--i, 0) * 90ms); }

/* Badges/tags */
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-100); color: var(--orange-600); font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: 100px; }

/* Services page detail rows */
.service-row { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: flex-start; padding: 56px 0; border-bottom: 1px solid var(--grey-200); }
.service-row:last-child { border-bottom: none; }
.service-row:nth-child(even) .service-row__visual { order: 2; }
.service-row__visual { position: relative; }
.service-row__panel { aspect-ratio: 4/5; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--navy-900), var(--navy-600)); display: grid; place-items: center; box-shadow: var(--shadow-md); }
.service-row__panel .icon { width: 72px; height: 72px; color: var(--orange-400); }
.service-row__panel--photo { position: relative; overflow: hidden; background: var(--navy-900); }
.service-row__photo { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.service-row__panel--photo:hover .service-row__photo { transform: scale(1.06); }
.service-row__icon-badge {
  position: absolute; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--orange-500); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(4,13,23,.4);
  transition: transform .3s var(--ease);
}
.service-row__icon-badge .icon { width: 24px; height: 24px; color: var(--navy-900); }
.service-row__panel--photo:hover .service-row__icon-badge { transform: scale(1.1) rotate(-8deg); }
.service-row__num { position: absolute; top: -18px; left: -14px; background: var(--orange-500); color: var(--white); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); box-shadow: var(--shadow-sm); z-index: 1; }
.service-row__body h2 { margin-bottom: .3em; }
.service-row__body .free-tag { margin-bottom: 16px; }
.service-row__body ul { display: grid; gap: 10px; margin: 18px 0; }
.service-row__body li { display: flex; gap: 10px; font-size: .96rem; color: var(--charcoal-soft); }
.service-row__body li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); margin-top: 9px; flex-shrink: 0; }
.service-row__body p { font-size: .98rem; }
@media (max-width: 860px) { .service-row { grid-template-columns: 1fr; } .service-row__panel { max-width: 220px; margin: 0 auto; } }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }