/* ============ Design System ============ */
:root{
  /* Palette */
  --ink: #0e1222;
  --ink-2: #1b2035;
  --muted: #616a84;
  --paper: #ffffff;
  --tint: #f6f8ff;

  --brand-a: #7c3aed;  /* violet */
  --brand-b: #2563eb;  /* blue */
  --brand-c: #14b8a6;  /* teal accent */
  --grad: linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 55%, #22d3ee 100%);

  /* Radii & shadows */
  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 12px;

  --shadow-xl: 0 40px 80px rgba(16, 20, 44, 0.25);
  --shadow-lg: 0 30px 60px rgba(16, 20, 44, 0.22);
  --shadow-md: 0 18px 30px rgba(16, 20, 44, 0.16);
  --shadow-sm: 0 8px 18px rgba(16, 20, 44, 0.12);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --speed: 540ms;

  /* Focus ring */
  --ring: 0 0 0 4px rgba(124,58,237,.22);

  /* Type scale */
  --fs-hero: clamp(30px, 3vw, 37px);
  --fs-h2: clamp(28px, 3.6vw, 40px);
  --fs-h3: clamp(20px, 3vw, 28px);
  --fs-body: 16px;
  --fs-lead: 18px;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;

  /* Section rhythm */
  --sec-pad: 56px;
  --sec-pad-sm: 44px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 800px at 10% -10%, #f1f5ff, transparent 60%), #f7f8ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-body);
  line-height: 1.55;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============ Global Type ============ */
h1, h2, h3{
  font-family: "Fraunces", "Plus Jakarta Sans", Inter, serif;
  margin: 0 0 15px;
  line-height: 1.08;
}
p{ margin: 0 0 15px; }
.lead{ font-size: var(--fs-lead); color: var(--muted); }

/* Enforce max line length for readability */
.section .lead, .section p, .card-text, .copy p{
  max-width: 70ch;
}

/* Links */
a{ color: #1f3fb8; text-decoration:none; }
a:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* Selection */
::selection{ background: rgba(124,58,237,.18); }

/* ============ Nav ============ */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(24, 32, 56, .08);
}
.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; gap:12px; color: inherit; }
.brand-mark{ width: 44px; height: 44px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.brand-text{ font-weight: 900; letter-spacing:.2px; }

.menu{ list-style:none; display:flex; gap: 26px; margin:0; padding:0; }
.menu a{
  position: relative;
  color: var(--ink-2);
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .2s var(--ease), color .2s var(--ease);
  text-decoration: none;
}
.menu a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg, #d3ddff, #93b4ff);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
  border-radius: 2px; opacity:.9;
}
.menu a:hover{ background: #eef2ff; color: #24329b; }
.menu a:hover::after{ transform: scaleX(1); }
.menu a.active{ color:#24329b; background:#e7ecff; }
.menu a.active::after{ transform: scaleX(1); }

.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span{ width: 26px; height: 3px; background: var(--ink); border-radius: 3px; }

/* ============ Pages & Transitions ============ */
main#pages{ min-height: calc(100vh - 160px); }
.page{ display:none; }
.page.active{ display:block; }
.slide-enter { transform: translateX(8%); opacity: 0; }
.slide-enter-active { transform: translateX(0); opacity: 1; transition: all var(--speed) var(--ease); }
.slide-exit { transform: translateX(0); opacity: 1; }
.slide-exit-active { transform: translateX(-8%); opacity: 0; transition: all var(--speed) var(--ease); }

/* ============ Hero (Editorial Gradient) ============ */
.hero{ position: relative; padding: 64px 0 48px; overflow: clip; }
.hero-bg{
  position:absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(1600px 900px at 90% -10%, rgba(37,99,235,.25), transparent 60%),
    radial-gradient(1600px 900px at 10% -10%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, #0f1026 0%, #181b3b 40%, #0f172a 100%);
}
.gradient-overlay{
  position:absolute; inset:0;
  background: radial-gradient(85% 65% at 50% 0%, rgba(255,255,255,.10) 0%, transparent 60%);
}
.noise{
  position:absolute; inset: 0; opacity: .05; mix-blend-mode: soft-light;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="1"/></svg>');
}
.orbs .orb{ position:absolute; filter: blur(24px); opacity:.6; border-radius: 999px; }
.orb-a{ width: 340px; height: 340px; left: -60px; top: -60px; background: radial-gradient(circle at 30% 30%, #8b5cf6, transparent 60%); }
.orb-b{ width: 300px; height: 300px; right: 10%; top: -80px; background: radial-gradient(circle at 70% 40%, #2563eb, transparent 60%); }
.orb-c{ width: 240px; height: 240px; right: -60px; bottom: -60px; background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 60%); }

.hero-inner{
  position: relative; z-index: 1;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center;
}
.eyebrow{
  display:inline-block; padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: #cbd5ff; border: 1px solid rgba(255,255,255,.25);
  font-weight: 700; letter-spacing: .2px;
}
.display{
  font-family: "Fraunces", "Plus Jakarta Sans", Inter, serif;
  font-weight: 900; line-height: 1.02; margin: 15px 0 15px;
  font-size: var(--fs-hero);
  background: linear-gradient(180deg, #ffffff, #d8e3ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.lead-hero{ color: #d6ddff; font-size: var(--fs-lead); max-width: 64ch; }

.cta-row{ display:flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.btn{
  appearance:none; border:none; cursor:pointer; font-weight: 800; letter-spacing:.2px;
  padding: 12px 18px; border-radius: 999px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s;
}
.btn-solid{
  background: var(--grad); color: white; box-shadow: 0 18px 36px rgba(37, 99, 235, .35);
}
.btn-solid:hover{ transform: translateY(-1px); box-shadow: 0 26px 50px rgba(37, 99, 235, .45); }
.btn-solid:active{ transform: translateY(0); }
.btn-ghost{
  background: rgba(255,255,255,.10); color: #e7edff; border: 1px solid rgba(255,255,255,.35);
}
.btn-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18); }
.btn-ghost:active{ transform: translateY(0); }

.trust-badges{ display:flex; flex-wrap: wrap; gap: 12px; margin-top: 75px; color: #c7d0ff; font-weight: 700; }
.tb{ display:flex; align-items:center; gap: 8px; }
.tb .dot{ width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.16); }

.hero-media .media-frame{
  border-radius: var(--radius-lg); overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: var(--shadow-lg);
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hero-media .media-frame:hover{ transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.hero-media img{
  width: 100%; height: 100%; object-fit: cover; display:block; aspect-ratio: 4 / 3;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.hero-media .media-frame:hover img{ transform: scale(1.03); filter: saturate(1.05) contrast(1.02); }

/* ============ Sections ============ */

/* .section{ padding: var(--sec-pad) 0; }
.section-head{
  display:flex; flex-direction: column; gap: 8px; margin-bottom: 18px;
} */

/* ===== Our Core Sectors (UI upgrade) ===== */
.section .section-head{
  margin-bottom: 16px;                 /* tighten header to content */
}
.section .section-head .h2{
  background: linear-gradient(180deg, #0a122d, #1b2b74);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section .section-head .subhead{
  color: var(--muted);
  max-width: 72ch;                     /* readable line length */
}

/* .split .img-wrap.ratio-16x9::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(37,99,235,.24), rgba(34,211,238,.20));
  mix-blend-mode: soft-light; opacity:.35;
}
.split .img-wrap img{
  width: 100%; height: 100%; object-fit: cover; display:block;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.split .img-wrap:hover img{
  transform: scale(1.03);
  filter: saturate(1.06) contrast(1.02);
} */

/* Subtle parallax-esque float on hover */
@media (hover:hover){
  .split .img-wrap:hover{
    box-shadow: 0 30px 60px rgba(16,20,44,.22);
    transform: translateY(-4px);
    border-color: rgba(15,23,42,.16);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  }
}

/* Decorative gradient halo behind image */
.split .img-wrap::after{
  content:"";
  position:absolute; inset: -18%;
  background: radial-gradient(40% 30% at 70% 20%, rgba(124,58,237,.18), transparent 65%),
              radial-gradient(50% 40% at 20% 80%, rgba(37,99,235,.16), transparent 70%);
  z-index: -1;
  filter: blur(26px);
}

/* Section spacing tuning */
.section{
  padding-top: 54px;
  padding-bottom: 54px;
}

/* Responsive behavior */
@media (max-width: 980px){
  .split{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .split .img-wrap::after{ inset: -24%; filter: blur(34px); }
}
@media (max-width: 760px){
  .section{ padding-top: 44px; padding-bottom: 44px; }
  .section .section-head{ margin-bottom: 12px; }
}

.h2{
  font-size: var(--fs-h2);
  background: linear-gradient(180deg, #0a122d, #1b2b74);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subhead{ color: var(--muted); }
.h3{ font-size: var(--fs-h3); }

/* ============ Universal Image System ============ */
.img-wrap{
  position: relative; overflow: hidden; background: #eef2ff;
}
.img-wrap img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.ratio-16x9{ aspect-ratio: 16/9; }
.ratio-4x3{ aspect-ratio: 4/3; }

/* Premium frames for prominent images (About, hero cards) */
.img-wrap.ratio-4x3, .img-wrap.ratio-16x9{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}
.img-wrap.ratio-4x3::before,
.img-wrap.ratio-16x9::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(37,99,235,.24), rgba(34,211,238,.20));
  mix-blend-mode: soft-light; opacity:.35;
}
.img-wrap.ratio-4x3 img, .img-wrap.ratio-16x9 img{
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.img-wrap:hover img{ transform: scale(1.02); filter: saturate(1.06); }

/* ============ Cards & Grids ============ */
.cards-3{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.cards-2{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Card base */
.card{
  background: #ffffff; border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-md);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(15, 23, 42, .16); }

/* Card media */
.card .img-wrap{ border-bottom: 1px solid rgba(15,23,42,.06); }
.cards-3 .card .img-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.08), transparent 60%);
}
.cards-3 .card .img-wrap img{ transition: transform .45s var(--ease), filter .45s var(--ease); }
.cards-3 .card:hover .img-wrap img{ transform: scale(1.04); filter: saturate(1.06); }

/* Card content */
.card-body{ padding: 18px; }
.kicker{
  display:inline-block; font-weight: 800; font-size: 12px; letter-spacing:.25px; text-transform: uppercase;
  color: #4338ca; background: #eef2ff; padding: 6px 10px; border-radius: 999px; border: 1px solid #e0e7ff;
}
.card-title{
  margin: 10px 0 6px; font-weight: 900; letter-spacing:.2px;
  font-family: "Fraunces","Plus Jakarta Sans",Inter,serif;
}
.card-text{ color: var(--muted); }
.card-cta{ margin-top: 8px; }
.text-link{ font-weight: 800; color: #1f3fb8; text-decoration: none; }
.text-link:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* Core Sectors: link arrow affordance */
.cards-3 .card .text-link{ position: relative; }
.cards-3 .card .text-link::after{ content:"→"; margin-left: 6px; transition: transform .2s var(--ease); }
.cards-3 .card:hover .text-link::after{ transform: translateX(2px); }

/* Subsidiaries: heavier look and clean lists */
.cards-2 .card{ border-radius: calc(var(--radius) + 2px); }
.cards-2 .card .kicker{ color:#0f1a5a; background:#eaf0ff; border-color:#dbe3ff; }
.cards-2 .card .list{ padding-left: 18px; margin: 10px 0 0; }
.cards-2 .card .list li{ margin: 6px 0; color: var(--ink-2); }
.cards-2 .card .list li::marker{ color:#4657d6; }

/* ============ Split Layouts ============ */
/* .split{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center;
} */
.copy .lead{ color: var(--muted); }
.value-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 10px; }
.value{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 16px 18px;
  min-height: 64px;

  font-weight: 900;
  color: #0f1a5a;
  text-align: center;

  background:
    linear-gradient(180deg, #ffffff, #f7f9ff);            /* soft panel */
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px rgba(16,20,44,.08);                       /* depth */

  transition:
    transform .18s var(--ease),
    box-shadow .22s var(--ease),
    border-color .22s var(--ease);
}
/* Gradient edge highlight */
.value::before{
  content:"";
  position:absolute; inset: -1px; border-radius: 14px;
  padding: 1px; pointer-events:none;
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(37,99,235,.24), rgba(34,211,238,.20));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;   /* gradient stroke */
  opacity: .65;
}

/* Emoji badge feel */
.value::after{
  content:"";
  position:absolute; top: 10px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8b5cf6, #2563eb);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
  opacity: .45;
}

/* Hover/active interactions */
.value:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(16,20,44,.14);
  border-color: rgba(15,23,42,.16);
}
.value:active{ transform: translateY(-1px); }

/* Subtle sheen on hover */
.value:hover{
  background:
    linear-gradient(180deg, #ffffff, #f4f7ff);
}

/* Emphasize first row (optional – conveys priority) */
.value-grid .value:nth-child(-n+3){
  background:
    linear-gradient(180deg, #ffffff, #f3f6ff);
  border-color: rgba(15,23,42,.12);
}

/* Emoji sizing and spacing */
.value{
  font-size: 16px;
  line-height: 1.25;
}
.value:has(> .emoji){ gap: 8px; }
.value .emoji{ font-size: 20px; }

/* Responsive layout */
@media (max-width: 980px){
  .value-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
}
@media (max-width: 760px){
  .value-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .value{ min-height: 58px; padding: 14px 16px; }
}

/* Pills */
.pill-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 25px; }
.pill{
  background: linear-gradient(180deg, #ffffff, #f6f7ff);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 999px; padding: 12px 14px; font-weight: 800; text-align:center;
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px rgba(16,20,44,.08);
  transition: transform .16s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(16,20,44,.12);
  border-color: rgba(15,23,42,.14);
}

/* Lists */
.list{ margin: 8px 0; padding-left: 18px; }
.list li{ margin: 6px 0; color: var(--ink-2); }

/* ============ Forms (Contact) ============ */
.form{
  background: #ffffff; border: 1px solid rgba(15,23,42,.10); border-radius: calc(var(--radius) + 2px);
  padding: 22px; box-shadow: var(--shadow-md);
}
.form.success{
  border-color: rgba(20, 184, 166, .35);
  box-shadow: 0 18px 36px rgba(20,184,166,.16);
  background: linear-gradient(180deg, #ffffff, #f6fffb);
}
.note{ color: var(--muted); font-size: 13px; }

.form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px; margin-top: 12px;
}
.fg{ display:flex; flex-direction: column; gap: 8px; }
.fg-full{ grid-column: 1 / -1; }
.fg span{
  font-weight: 800; font-size: 12px; color: #27349a; letter-spacing:.25px;
}
.fg input, .fg textarea{
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 12px; font: inherit; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  background: #fff;
}
.fg textarea{ min-height: 140px; resize: vertical; }
.fg input:hover, .fg textarea:hover{ border-color: #d2daf0; }
.fg input:focus, .fg textarea:focus{
  outline: none; border-color: #b2c4ff; box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,.9);
  background: #fbfdff;
}

.submit{ margin-top: 12px; display:flex; gap: 12px; align-items:center; flex-wrap: wrap; }
.status{ margin-top: 8px; font-weight: 800; color: #0b3b1b; }

/* ============ Footer ============ */
.footer{ border-top: 1px solid rgba(15,23,42,.08); background: #ffffff; }
.footer-inner{
  padding: 18px 0; display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap;
}
.foot-brand{ display:flex; align-items:center; gap: 10px; color: var(--muted); }
.foot-brand img{ width: 36px; height: 36px; border-radius: 8px; }
.foot-links{ display:flex; gap: 14px; }
.foot-links a{ color: #334155; font-weight:700; }
.foot-links a:hover{ color: #1e2d8e; }

/* ============ Accessibility focus ============ */
:focus-visible{ outline: 3px solid #b2c4ff; outline-offset: 2px; border-radius: 8px; }
a:focus-visible, button:focus-visible{ box-shadow: var(--ring); }

/* ============ Responsive ============ */
@media (max-width: 1200px){
  .container{ max-width: 100%; }
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .cards-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pill-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px){
  .menu{
    display:none; position:absolute; left:0; right:0; top:64px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
    padding: 12px 22px; border-bottom: 1px solid rgba(15,23,42,.08);
    flex-direction: column; gap: 10px;
  }
  .menu.show{ display:flex; }
  .hamburger{ display:flex; }
  .cards-3, .cards-2{ grid-template-columns: 1fr; }

  /* Avoid underline sweep in mobile sheet */
  .menu a::after{ display:none; }

  .hero{ padding-top: 54px; }
  .section{ padding: var(--sec-pad-sm) 0; }
}

/* ===== Our Journey Timeline (UI upgrade) ===== */
.timeline{
  position: relative;
  margin: 24px 0 0;
  padding-left: 28px;              /* space for the line + dots */
}
.timeline::before{
  content:"";
  position:absolute; left: 12px; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, rgba(124,58,237,.25), rgba(37,99,235,.25));
  border-radius: 2px;
}

/* Each item aligns to the vertical line, with a gradient dot */
.t-item{
  position: relative;
  padding: 12px 12px 12px 18px;
  margin: 0 0 10px 0;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(16,20,44,.06);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.t-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(16,20,44,.12);
  border-color: rgba(15,23,42,.14);
}

/* Dot connector on the left */
.t-item::before{
  content:"";
  position:absolute; left: -22px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8b5cf6, #2563eb);
  box-shadow:
    0 0 0 3px rgba(124,58,237,.15),
    0 10px 18px rgba(16,20,44,.25);
  border: 2px solid #fff;
}

/* Year badge */
.t-year{
  display:inline-block;
  font-weight: 900;
  color: #0f1a5a;
  background: #eaf0ff;
  border: 1px solid #dbe3ff;
  border-radius: 999px;
  padding: 6px 10px;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

/* Description */
.timeline p{
  margin: 4px 0 0;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Subtle shimmer on hover for the year */
.t-item:hover .t-year{
  background: linear-gradient(180deg, #eef4ff, #e6edff);
}

/* Optional: enter animation for a polished feel */
@media (prefers-reduced-motion: no-preference){
  .timeline .t-item{
    opacity: 0; transform: translateY(8px);
    animation: tItemIn .6s var(--ease) forwards;
  }
  .timeline .t-item:nth-child(1){ animation-delay: .02s; }
  .timeline .t-item:nth-child(2){ animation-delay: .08s; }
  .timeline .t-item:nth-child(3){ animation-delay: .14s; }
  .timeline .t-item:nth-child(4){ animation-delay: .20s; }

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

/* Responsive: tighten left padding on small screens */
@media (max-width: 760px){
  .timeline{ padding-left: 24px; }
  .timeline::before{ left: 10px; }
  .t-item::before{ left: -20px; }
}

/* ===== Contact Page (UI upgrade) ===== */

/* Contact intro split */
#contact .split{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}

#contact .split .copy{
  max-width: 100%;
}
#contact .split .copy .h2{
  margin-bottom: 10px;
}
#contact .split .copy .lead{
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 64ch;
}

/* Contact list styling */
#contact .list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#contact .list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #ffffff, #f9faff);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(16,20,44,.06);
  font-weight: 700;
  color: var(--ink-2);
  transition: transform .16s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
#contact .list li:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(16,20,44,.10);
  border-color: rgba(15,23,42,.12);
}

/* Icon prefix for each contact item */
#contact .list li::before{
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef2ff, #e7ecff);
  border: 1px solid #dbe3ff;
  font-size: 14px;
  color: #4338ca;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 #fff;
}

/* Specific icons per item type */
#contact .list li:nth-child(1)::before{ content: "✉"; }
#contact .list li:nth-child(2)::before{ content: "🌐"; }
#contact .list li:nth-child(3)::before{ content: "📞"; }
#contact .list li:nth-child(4)::before{ content: "📍"; }

#contact .list li a{
  color: #1f3fb8;
  font-weight: 800;
  text-decoration: none;
  transition: color .16s var(--ease);
}
#contact .list li a:hover{
  color: #4338ca;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Contact image frame */
#contact .img-wrap.ratio-4x3{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: var(--shadow-md);
  position: relative;
  transform: translateZ(0);
}
#contact .img-wrap.ratio-4x3::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(37,99,235,.24), rgba(34,211,238,.20));
  mix-blend-mode: soft-light; opacity:.35;
}
#contact .img-wrap img{
  width: 100%; height: 100%; object-fit: cover; display:block;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
#contact .img-wrap:hover img{
  transform: scale(1.03);
  filter: saturate(1.06) contrast(1.02);
}
#contact .img-wrap:hover{
  box-shadow: 0 30px 60px rgba(16,20,44,.22);
  transform: translateY(-4px);
  border-color: rgba(15,23,42,.16);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

/* ===== Contact Form (premium redesign) ===== */
.form{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: calc(var(--radius) + 4px);
  padding: 26px;
  box-shadow: var(--shadow-md);
  max-width: 720px;
  margin: 0 auto;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.form .h3{
  font-family: "Fraunces", "Plus Jakarta Sans", Inter, serif;
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 6px;
  background: linear-gradient(180deg, #0a122d, #1b2b74);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.form .note{
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 16px;
}

/* Form grid */
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 14px;
}

/* Field group */
.fg{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fg-full{
  grid-column: 1 / -1;
}

.fg span{
  font-weight: 800;
  font-size: 13px;
  color: #27349a;
  letter-spacing: .25px;
}

/* Inputs and textarea */
.fg input,
.fg textarea{
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.fg textarea{
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.55;
}

/* Hover state */
.fg input:hover,
.fg textarea:hover{
  border-color: #cbd5e1;
  background: #fafbff;
}

/* Focus state */
.fg input:focus,
.fg textarea:focus{
  outline: none;
  border-color: #b2c4ff;
  box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,.9);
  background: #fbfdff;
}

/* Placeholder styling */
.fg input::placeholder,
.fg textarea::placeholder{
  color: #94a3b8;
  opacity: 1;
}

/* Submit row */
.submit{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.submit .btn-solid{
  background: var(--grad);
  color: white;
  box-shadow: 0 18px 36px rgba(37, 99, 235, .35);
  font-weight: 800;
  letter-spacing: .2px;
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.submit .btn-solid:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 50px rgba(37, 99, 235, .45);
}
.submit .btn-solid:active{
  transform: translateY(0);
}

.submit .note{
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* Form status message */
.status{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  display: none;
}
.status.show{
  display: block;
}
.status.success{
  color: #0b3b1b;
  background: linear-gradient(180deg, #f0fdf4, #dcfce7);
  border: 1px solid rgba(34,197,94,.25);
  box-shadow: 0 10px 20px rgba(34,197,94,.12);
}
.status.error{
  color: #7f1d1d;
  background: linear-gradient(180deg, #fef2f2, #fee2e2);
  border: 1px solid rgba(239,68,68,.25);
  box-shadow: 0 10px 20px rgba(239,68,68,.12);
}

/* Success state for entire form */
.form.success{
  border-color: rgba(20, 184, 166, .35);
  box-shadow: 0 18px 36px rgba(20,184,166,.16);
  background: linear-gradient(180deg, #ffffff, #f6fffb);
}

/* Responsive */
@media (max-width: 980px){
  #contact .split{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 760px){
  .form{
    padding: 20px;
  }
  .form-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #contact .list li{
    font-size: 14px;
    padding: 9px 12px;
  }
  #contact .list li::before{
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
}

/* ===== Our Core Sectors — Premium UI ===== */

/* Section header spacing and readability */
.section .section-head{
  margin-bottom: 16px;
}
.section .section-head .h2{
  font-family: "Fraunces","Plus Jakarta Sans",Inter,serif;
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.08;
  background: linear-gradient(180deg, #0a122d, #1b2b74);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section .section-head .subhead{
  color: var(--muted);
  max-width: 72ch;
  margin-top: 4px;
}

/* Split layout: balanced columns, centered alignment */
.section .split{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: center;
}

/* Placeholder copy column: maintains rhythm if you add text later */
.section .split .copy > * + *{
  margin-top: 10px;
}

/* Image frame: cinematic, consistent 16:9, soft gradient stroke */
.section .split .img-wrap.ratio-16x9{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: 0 18px 30px rgba(16,20,44,.16);
  transform: translateZ(0);
}

/* Subtle gradient sheen overlay */
.section .split .img-wrap.ratio-16x9::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(37,99,235,.24), rgba(34,211,238,.20));
  mix-blend-mode: soft-light; opacity:.32;
}

/* Decorative gradient halo behind image for depth */
.section .split .img-wrap.ratio-16x9::after{
  content:"";
  position:absolute; inset: -18%;
  background:
    radial-gradient(40% 30% at 70% 20%, rgba(124,58,237,.18), transparent 65%),
    radial-gradient(50% 40% at 20% 80%, rgba(37,99,235,.16), transparent 70%);
  z-index: -1;
  filter: blur(28px);
}

/* Image behavior */
.section .split .img-wrap img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}

/* Hover lift and gentle zoom for a premium feel */
@media (hover:hover){
  .section .split .img-wrap:hover{
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(16,20,44,.22);
    border-color: rgba(15,23,42,.16);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  }
  .section .split .img-wrap:hover img{
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.02);
  }
}

/* Section padding rhythm (keeps page flow consistent) */
.section{
  padding-top: 54px;
  padding-bottom: 54px;
}

/* Responsive behavior */
@media (max-width: 980px){
  .section .split{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .section .split .img-wrap.ratio-16x9::after{
    inset: -24%;
    filter: blur(34px);
  }
}
@media (max-width: 760px){
  .section{ padding-top: 44px; padding-bottom: 44px; }
  .section .section-head{ margin-bottom: 12px; }
}