/* ============================================================
   TRUELINE GROUP OF COMPANIES — Premium Stylesheet
   Palette: #002C71 (blue) · #00A99D (green) · #5E5858 (gray) · #FFFFFF
   ============================================================ */

:root{
  --blue:#002C71;
  --blue-700:#00265f;
  --green:#00A99D;
  --green-600:#009488;
  --gray:#5E5858;
  --white:#FFFFFF;

  --ink:#1c2a44;                 /* deep readable text (blue-derived) */
  --muted:#5E5858;
  --line:rgba(0,44,113,.10);
  --tint:#f5f8fc;                /* very light blue tint bg */
  --tint-green:#f0faf9;
  --shadow-sm:0 4px 20px rgba(0,44,113,.06);
  --shadow-md:0 14px 40px rgba(0,44,113,.10);
  --shadow-lg:0 30px 70px rgba(0,44,113,.16);
  --radius:18px;
  --radius-lg:26px;
  --container:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:'Sora',sans-serif;color:var(--blue);line-height:1.12;margin:0;font-weight:700;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,40px)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:100px;border:2px solid transparent;
  cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
  white-space:nowrap;letter-spacing:.01em;
}
.btn--lg{padding:16px 34px;font-size:16px}
.btn--primary{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(0,169,157,.30)}
.btn--primary:hover{background:var(--green-600);transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,169,157,.40)}
.btn--ghost{background:transparent;color:var(--blue);border-color:rgba(0,44,113,.22)}
.btn--ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-3px)}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{
  display:inline-block;font-family:'Manrope';font-weight:700;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  padding:6px 14px;border-radius:100px;background:var(--tint);border:1px solid var(--line);
  margin-bottom:20px;
}
.eyebrow--green{color:var(--green);background:var(--tint-green);border-color:rgba(0,169,157,.16)}

.section{padding:clamp(64px,9vw,120px) 0}
.section--tint{background:var(--tint)}
.section--dark-tint{background:linear-gradient(180deg,var(--tint) 0%,#eef4fb 100%)}
.section__head{max-width:760px;margin:0 auto clamp(40px,6vw,64px);text-align:center}
.section__title{font-size:clamp(30px,5vw,50px);font-weight:800}
.section__sub{margin-top:16px;color:var(--muted);font-size:clamp(16px,2.2vw,19px)}

.subhead{margin:clamp(40px,6vw,64px) 0 28px}
.subhead h3{font-size:clamp(21px,3vw,28px);position:relative;padding-left:18px}
.subhead h3::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;border-radius:4px;background:linear-gradient(var(--blue),var(--green))}

/* ============================================================
   NAVIGATION
   ============================================================ */
/* Floating premium navbar */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  padding:clamp(10px,1.6vw,16px) clamp(14px,4vw,34px);
  transition:padding .35s var(--ease)}
.nav__shell{position:relative;max-width:1400px;margin:0 auto;
  display:flex;align-items:center;gap:18px;height:76px;padding:0 14px 0 22px;
  background:#fff;border:1px solid #EAEAEA;border-radius:20px;
  box-shadow:0 10px 34px rgba(0,44,113,.09);
  animation:navFade .8s var(--ease) both}
.nav.scrolled{padding-top:clamp(6px,1vw,10px);padding-bottom:clamp(6px,1vw,10px)}
.nav.scrolled .nav__shell{height:70px;border-color:#e3e7ef;box-shadow:0 14px 40px rgba(0,44,113,.14)}

/* 3-column balance: brand (left) · menu (perfectly centered) · spacer (right) */
.brand{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.brand__mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--green));
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,44,113,.25);flex-shrink:0}
.brand__dot{width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__text strong{font-family:'Sora';font-size:17px;color:var(--blue);letter-spacing:.02em}
.brand__text em{font-style:normal;font-size:10px;color:var(--gray);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}

.nav__spacer{flex:1 1 0}

.nav__menu{display:flex;align-items:center;justify-content:center;gap:3px;flex:0 0 auto}
.nav__menu a{font-size:14px;font-weight:600;color:var(--gray);padding:9px 14px;border-radius:100px;
  transition:color .2s,background .2s;white-space:nowrap}
.nav__menu a:hover{color:var(--blue);background:#f3f6fc}
.nav__menu a.active{color:var(--blue);background:rgba(0,44,113,.09)}

.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:26px;height:2.5px;background:var(--blue);border-radius:3px;transition:.3s var(--ease)}
.nav__toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@keyframes navFade{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ============================================================
   FLOATING SOCIAL BAR
   ============================================================ */
.social-bar{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:10px}
.social-bar a{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--line);position:relative;
  transition:transform .28s var(--ease),background .28s,box-shadow .28s}
.social-bar a svg{width:22px;height:22px;fill:var(--blue);transition:fill .28s}
.social-bar a:hover{transform:translateX(-4px) scale(1.06);background:var(--green);box-shadow:var(--shadow-md)}
.social-bar a:hover svg{fill:#fff}
.social-bar a[data-tip]::after{content:attr(data-tip);position:absolute;right:120%;top:50%;transform:translateY(-50%);
  background:var(--blue);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s}
.social-bar a:hover[data-tip]::after{opacity:1}
.social-bar__call svg{fill:var(--green)!important}
.social-bar__call:hover svg{fill:#fff!important}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:calc(108px + clamp(24px,4vw,54px)) 0 clamp(56px,7vw,96px);
  background:
    radial-gradient(46% 46% at 82% 6%,rgba(0,169,157,.12),transparent 62%),
    radial-gradient(46% 52% at 4% 28%,rgba(0,44,113,.09),transparent 60%),
    radial-gradient(42% 40% at 60% 104%,rgba(0,169,157,.06),transparent 60%),
    var(--white);
  position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}

/* ---- Left content ---- */
.hero__badge{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:700;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);
  padding:8px 16px;border-radius:100px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);margin-bottom:22px;
  animation:heroUp .7s var(--ease) both}
.hero__name{font-size:clamp(44px,6.4vw,76px);font-weight:800;letter-spacing:-.03em;line-height:1.02;color:var(--blue);
  animation:heroUp .8s var(--ease) .08s both}
.hero__statement{margin-top:14px;font-family:'Sora';font-weight:700;font-size:clamp(20px,2.8vw,30px);
  letter-spacing:-.01em;line-height:1.25;color:var(--blue);
  animation:heroUp .8s var(--ease) .16s both}
.hero__statement .grad{background:linear-gradient(100deg,var(--green),#00c7b8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__desc{margin-top:22px;max-width:560px;font-size:clamp(16px,1.5vw,17.5px);color:var(--muted);line-height:1.72;
  animation:heroFade .9s var(--ease) .26s both}

.hero__roles{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:30px 0 34px;max-width:560px;
  animation:heroFade .9s var(--ease) .34s both}
.hero__roles li{display:flex;align-items:center;gap:12px}
.hero__role-ic{flex-shrink:0;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--tint-green);border:1px solid rgba(0,169,157,.18)}
.hero__role-ic svg{width:21px;height:21px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero__roles li>span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.hero__roles strong{font-family:'Sora';font-size:14.5px;color:var(--blue);font-weight:700}
.hero__roles small{font-size:13px;color:var(--muted);font-weight:500}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;font-family:'Manrope';font-weight:700;
  font-size:15px;padding:15px 30px;border-radius:100px;border:2px solid transparent;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s;
  animation:heroUp .7s var(--ease) both}
.btn-cta--primary{background:var(--blue);color:#fff;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,44,113,.26);animation-delay:.44s}
.btn-cta--primary:hover{background:#013a90;transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,44,113,.34)}
.btn-cta--ghost{background:#f1f3f7;color:var(--blue);border-color:#e6e9f0;animation-delay:.54s}
.btn-cta--ghost:hover{background:#e7ebf3;transform:translateY(-3px);box-shadow:var(--shadow-sm)}

/* ---- Right image card ---- */
.hero__media{position:relative;animation:heroScale 1s var(--ease) .2s both}
.hero__card{position:relative;margin:0 0 0 auto;max-width:480px;aspect-ratio:4/5;
  border-radius:28px;overflow:hidden;background:#fff;border:8px solid #fff;
  box-shadow:0 40px 90px rgba(0,44,113,.20)}
.hero__card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.30),transparent 30%),
             linear-gradient(180deg,transparent 56%,rgba(0,44,113,.36))}
.hero__card img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero__leader{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;
  display:flex;flex-direction:column;padding:14px 20px;border-radius:16px;
  background:rgba(0,20,54,.52);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,20,54,.30)}
.hero__leader strong{font-family:'Sora';font-size:19px;color:#fff;font-weight:700}
.hero__leader span{font-size:13px;letter-spacing:.03em;color:var(--green);font-weight:600;margin-top:3px}

@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ============================================================
   ABOUT
   ============================================================ */
.about__content{max-width:1100px;margin:0 auto}
.about__vision{font-size:clamp(20px,2.8vw,28px);font-family:'Sora';font-weight:600;color:var(--blue);line-height:1.45;
  letter-spacing:-.01em;text-align:center;max-width:900px;margin:0 auto clamp(36px,5vw,52px)}
.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hl-card{padding:22px 24px;border-radius:var(--radius);background:var(--tint);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s;border-left:4px solid var(--green)}
.hl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.hl-card strong{display:block;font-family:'Sora';font-size:19px;color:var(--blue);font-weight:800;line-height:1.15}
.hl-card span{display:block;margin-top:6px;font-size:14px;color:var(--muted);font-weight:600}

/* Journey — centered flex: fills complete rows, centers incomplete last row */
.journey{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.journey__item{flex:1 1 280px;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s;border-left:4px solid var(--green)}
.journey__item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.journey__meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tag{font-size:12px;font-weight:700;color:var(--green);background:var(--tint-green);padding:5px 12px;border-radius:100px}
.loc{font-size:12.5px;color:var(--muted);font-weight:600}
.journey__item h4{font-size:19px;margin-bottom:4px}
.journey__org{color:var(--blue);font-weight:700;font-size:14.5px;margin-bottom:12px}
.journey__item p:last-child{color:var(--muted);font-size:15px}

/* Cards grids — centered flex: complete rows fill, incomplete last row centers */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.cards--2>*{flex:1 1 400px;max-width:550px}
.cards--3>*{flex:1 1 280px;max-width:360px}
.mini-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.mini-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.mini-card h5{font-size:16px;color:var(--blue);margin-bottom:6px;font-family:'Sora'}
.mini-card p{color:var(--muted);font-size:14.5px}

/* Skills */
.skills__flame{font-size:clamp(17px,2.5vw,21px);color:var(--muted);margin-bottom:22px}
.skills__flame strong{color:var(--green);font-family:'Sora'}
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chips span{font-size:14.5px;font-weight:600;color:var(--blue);padding:11px 18px;border-radius:100px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s,background .25s,color .25s}
.chips span:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}
.chips--scope span:hover{background:var(--green)}

/* ============================================================
   ECOSYSTEM
   ============================================================ */
/* Interactive ecosystem: diagram (left) + linked cards (right) */
.ecosys{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(28px,4vw,56px);align-items:center}

/* --- Diagram --- */
.ecosys__diagram{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1}
.ecosys__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ecosys__ring{fill:none;stroke:#00A99D;stroke-width:2.5;stroke-dasharray:8 10;stroke-linecap:round;opacity:.8;
  transform-origin:250px 250px;animation:ringSpin 60s linear infinite}
.ecosys__line{fill:none;stroke:url(#ecoGrad);stroke-width:2.5;stroke-linecap:round;opacity:.7;
  stroke-dasharray:6 7;animation:lineFlow 1.7s linear infinite;transition:opacity .3s,stroke-width .3s}
.ecosys__line.is-active{opacity:1;stroke-width:4}
@keyframes lineFlow{to{stroke-dashoffset:-24}}
@keyframes ringSpin{to{transform:rotate(360deg)}}

.node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;
  width:clamp(104px,24%,128px);aspect-ratio:1/1;border-radius:50%;background:#fff;
  border:3.5px solid var(--nc,var(--line));
  box-shadow:0 8px 22px rgba(0,44,113,.12);color:var(--blue);font-family:'Sora';font-weight:700;font-size:12px;line-height:1.16;
  padding:12px;cursor:pointer;z-index:2;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.node>span{display:block}
.node__dot{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;
  background:var(--nc);box-shadow:0 0 0 3px color-mix(in srgb,var(--nc) 22%,transparent)}
.node:not(.node--center):hover,.node.is-active{
  box-shadow:0 0 0 6px var(--ncg),0 16px 32px var(--ncg);transform:translate(-50%,-50%) scale(1.05);z-index:4}
.node:focus-visible{outline:3px solid var(--nc);outline-offset:3px}
/* per-node brand colors (border + dot + glow) */
.node--research,.node--publisher,.node--spectrum{--nc:#00A99D;--ncg:rgba(0,169,157,.22)}
.node--jaeid{--nc:#4A90E2;--ncg:rgba(74,144,226,.22)}
.node--startnet{--nc:#6C7BFF;--ncg:rgba(108,123,255,.22)}
.node--center{width:clamp(120px,27%,150px);background:linear-gradient(140deg,#002C71,#00A99D);color:#fff;
  border:0;font-size:14px;letter-spacing:.05em;box-shadow:0 18px 38px rgba(0,44,113,.34);z-index:3;cursor:default}
.node--center::before,.node--center::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(0,169,157,.5);animation:nodePulse 3s ease-out infinite}
.node--center::after{animation-delay:1.5s}
@keyframes nodePulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.node--research{left:50%;top:15%}
.node--publisher{left:85%;top:50%}
.node--spectrum{left:75%;top:75%}
.node--jaeid{left:25%;top:75%}
.node--startnet{left:15%;top:50%}
.node--center{left:50%;top:50%}

/* --- Cards --- */
.ecosys__cards{display:flex;flex-direction:column;gap:14px}
.ecocard{position:relative;display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:20px 22px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ecocard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--blue),var(--green));
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.ecocard:hover,.ecocard.is-active{transform:translateX(5px);box-shadow:var(--shadow-md);border-color:rgba(0,169,157,.4)}
.ecocard:hover::before,.ecocard.is-active::before{transform:scaleY(1)}
.ecocard__num{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--tint-green);color:var(--green);font-family:'Sora';font-weight:800;font-size:16px;transition:background .3s,color .3s}
.ecocard:hover .ecocard__num,.ecocard.is-active .ecocard__num{background:var(--green);color:#fff}
.ecocard__body{min-width:0}
.ecocard__body h3{font-size:18px;color:var(--blue);margin-bottom:3px;letter-spacing:-.01em}
.ecocard__tag{display:block;font-size:12px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ecocard__body p{color:var(--muted);font-size:14px;line-height:1.55}
.ecocard__arrow{margin-left:auto;align-self:center;color:var(--green);font-weight:700;font-size:20px;flex-shrink:0;
  opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.ecocard:hover .ecocard__arrow,.ecocard.is-active .ecocard__arrow{opacity:1;transform:none}

/* ============================================================
   COMPANY SECTIONS
   ============================================================ */
.company__head{margin-bottom:clamp(30px,4vw,48px);max-width:780px}
.company__head .eyebrow{margin-bottom:16px}
.company__head .section__title{font-size:clamp(28px,4.5vw,44px)}
.company__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px)}
.company__intro--single{grid-template-columns:1fr;max-width:900px}
.company__label{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:12px;font-family:'Manrope';font-weight:700}
.company__intro p{color:var(--muted);font-size:16.5px}

.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s;position:relative}
.section--tint .service{background:#fff}
.service::after{content:"";position:absolute;left:28px;bottom:22px;width:34px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--green));opacity:.5;transition:width .35s var(--ease)}
.service:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.service:hover::after{width:56px;opacity:1}
.service h4{font-size:18px;margin-bottom:12px;padding-bottom:18px}
.service p{color:var(--muted);font-size:15px}

.company__foot{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.company__foot span{font-size:14.5px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center}
.company__foot span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:9px}

/* ============================================================
   IMPACT / METRICS
   ============================================================ */
.impact-section{background:var(--white)}
.container--wide{max-width:1560px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.metric{position:relative;background:#fff;border:1px solid #E5E7EB;border-radius:24px;padding:40px 34px;text-align:center;
  min-height:250px;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.metric::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(0,169,157,.55),rgba(0,44,113,.30));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s var(--ease)}
.metric:hover{transform:translateY(-10px);box-shadow:0 38px 80px rgba(0,44,113,.18);border-color:transparent}
.metric:hover::after{opacity:1}
.metric__icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:var(--tint-green);margin-bottom:8px;transition:background .35s,transform .35s var(--ease)}
.metric__icon svg{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.metric:hover .metric__icon{background:var(--green);transform:scale(1.06)}
.metric:hover .metric__icon svg{stroke:#fff}
.metric.in .metric__icon{animation:iconPop .55s var(--ease)}
@keyframes iconPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.metric__num{font-family:'Sora';font-size:clamp(48px,3.6vw,58px);font-weight:800;color:var(--green);line-height:1.05;letter-spacing:-.02em}
.metric__label{margin-top:8px;font-size:15px;font-weight:500;color:var(--muted);line-height:1.55;max-width:100%;text-wrap:balance}

@media (max-width:1200px){
  .metrics{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:560px){
  .metrics{grid-template-columns:1fr}
  .metric{min-height:220px}
}

/* ============================================================
   AWARDS TIMELINE
   ============================================================ */
.timeline{position:relative;max-width:880px;margin:0 auto;padding-left:40px}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:linear-gradient(var(--blue),var(--green))}
.timeline__item{position:relative;margin-bottom:26px}
.timeline__item::before{content:"";position:absolute;left:-34px;top:6px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:4px solid var(--green);box-shadow:0 0 0 4px rgba(0,169,157,.14)}
.timeline__year{font-family:'Sora';font-weight:800;font-size:13px;color:var(--green);letter-spacing:.1em}
.timeline__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin-top:8px;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.timeline__card:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
.timeline__card h4{font-size:18px;margin-bottom:6px}
.timeline__card p{color:var(--muted);font-size:15px}

/* ============================================================
   MEMBERSHIPS
   ============================================================ */
.member{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s;position:relative;overflow:hidden}
.member::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--blue),var(--green));
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.member:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.member:hover::before{transform:scaleY(1)}
.member h4{font-size:19px;letter-spacing:.01em}
.member__tag{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--green);
  background:var(--tint-green);padding:4px 11px;border-radius:100px}

/* ============================================================
   EXECUTIVE MOMENTS — GALLERY
   ============================================================ */
.gallery{display:grid;grid-template-columns:1.7fr 1fr;grid-auto-rows:auto;gap:20px}
.gallery__item{position:relative;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;background:var(--tint);box-shadow:var(--shadow-sm);
  aspect-ratio:4/3;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.gallery__item--featured{grid-row:1 / span 3;aspect-ratio:auto}
.gallery__img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.gallery__item.is-loaded .gallery__img{opacity:1}
/* Loading skeleton (shimmer) — hidden once loaded or on error */
.gallery__item::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,#e9eef6 30%,#f6f9fc 50%,#e9eef6 70%);background-size:200% 100%;
  animation:skeleton 1.4s ease-in-out infinite;transition:opacity .5s var(--ease)}
.gallery__item.is-loaded::before,.gallery__item.is-error::before{opacity:0}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Error fallback */
.gallery__fallback{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#eef3fb,#e7f4f2)}
.gallery__item.is-error .gallery__fallback{display:flex}
.gallery__fallback svg{width:44px;height:44px;stroke:var(--blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.gallery__fallback em{font-style:normal;font-size:13px;font-weight:600;color:var(--gray);letter-spacing:.02em}
.gallery__item::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 60%,rgba(0,44,113,.28));
  opacity:0;transition:opacity .4s}
.gallery__item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(0,169,157,.4)}
.gallery__item:hover .gallery__img{transform:scale(1.08)}
.gallery__item:hover::after{opacity:1}
.gallery__item:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.gallery__zoom{position:absolute;top:14px;right:14px;z-index:4;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);
  opacity:0;transform:scale(.85);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.gallery__zoom svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gallery__item:hover .gallery__zoom{opacity:1;transform:scale(1)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);background:rgba(6,16,38,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lightbox.open{display:flex;animation:lbFade .3s var(--ease)}
.lightbox__stage{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lightbox__img{max-width:min(1100px,92vw);max-height:84vh;width:auto;height:auto;border-radius:16px;
  border:4px solid #fff;box-shadow:0 40px 90px rgba(0,0,0,.5);background:#fff}
.lightbox__close,.lightbox__nav{position:absolute;z-index:2;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background .25s,transform .25s var(--ease)}
.lightbox__close{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px);width:46px;height:46px;border-radius:50%;
  font-size:28px;line-height:1}
.lightbox__nav{top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;font-size:30px;line-height:1;padding-bottom:4px}
.lightbox__nav--prev{left:clamp(10px,3vw,32px)}
.lightbox__nav--next{right:clamp(10px,3vw,32px)}
.lightbox__close:hover{background:var(--green);transform:rotate(90deg)}
.lightbox__nav:hover{background:var(--green)}
.lightbox__nav--prev:hover{transform:translateY(-50%) translateX(-3px)}
.lightbox__nav--next:hover{transform:translateY(-50%) translateX(3px)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.lightbox__count{position:absolute;bottom:clamp(16px,3vw,30px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.85);font-family:'Sora';font-size:14px;font-weight:600;letter-spacing:.08em}
@keyframes lbFade{from{opacity:0}to{opacity:1}}

/* ============================================================
   THE INNOVATION ENGINE
   ============================================================ */
.engine__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.engine__card{flex:0 0 320px;max-width:320px;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:32px 28px 28px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.engine__card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--green));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.engine__card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(0,169,157,.4)}
.engine__card:hover::before{transform:scaleX(1)}
.engine__logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-family:'Sora';font-weight:800;
  font-size:18px;letter-spacing:.02em;box-shadow:0 8px 20px rgba(0,44,113,.22)}
.engine__card h3{font-size:20px;color:var(--blue);margin-bottom:10px;letter-spacing:-.01em}
.engine__card p{color:var(--muted);font-size:15px;line-height:1.6;flex:1}
.engine__link{margin-top:20px;font-weight:700;font-size:14px;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;transition:color .25s,gap .25s var(--ease)}
.engine__card:hover .engine__link{color:var(--green);gap:12px}

/* ============================================================
   CONTACT
   ============================================================ */
/* ============================================================
   OUR LOCATIONS / OFFICES
   ============================================================ */
.locations{background:var(--white)}
.office__icon{width:60px;height:60px;border-radius:16px;background:var(--green);display:grid;place-items:center;
  flex-shrink:0;box-shadow:0 10px 22px rgba(0,169,157,.28)}
.office__icon svg{width:30px;height:30px;fill:#fff}
.office__tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);background:var(--tint-green);padding:5px 13px;border-radius:100px}
.office h3{color:var(--blue);letter-spacing:-.01em;font-size:22px}
.office__address{font-style:normal;color:var(--muted);font-weight:500;font-size:15px;line-height:1.7;flex:1}
.office__map{display:inline-flex;align-items:center;gap:9px;font-family:'Manrope';font-weight:700;font-size:14px;
  color:var(--green);border:2px solid rgba(0,169,157,.35);padding:12px 22px;border-radius:100px;margin-top:4px;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.office__map svg{width:17px;height:17px;flex-shrink:0}
.office__map-ext{width:15px !important;height:15px !important;opacity:.85}
.office__map:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,169,157,.3)}

/* Two location cards */
.offices{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.office{background:#fff;border:1px solid #E5E7EB;border-radius:24px;padding:clamp(28px,3vw,36px);
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:relative;overflow:hidden}
.office::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--green));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.office:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(0,169,157,.4)}
.office:hover::before{transform:scaleX(1)}

@media (max-width:720px){
  .offices{grid-template-columns:1fr}
  .office__map{width:100%;justify-content:center}
}

.contact{background:var(--white)}
.contact__grid{display:grid;grid-template-columns:40% 60%;gap:clamp(24px,3.5vw,40px);align-items:stretch}

/* LEFT — contact info cards */
.contact__panel{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.info-card{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #E5E7EB;border-radius:18px;
  padding:24px 26px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
  color:var(--ink);flex:1}
.info-card:not(.info-card--static):hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(0,169,157,.35)}
.info-card__icon{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:var(--green);
  display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,169,157,.28)}
.info-card__icon svg{width:26px;height:26px;fill:#fff;stroke:#fff}
.info-card__icon svg[fill="none"]{fill:none}
.info-card__body{display:flex;flex-direction:column;min-width:0}
.info-card__body strong{font-family:'Sora';font-size:16px;color:var(--blue);font-weight:700}
.info-card__body span{font-size:14.5px;color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.info-card__arrow{margin-left:auto;color:var(--green);font-size:18px;font-weight:700;transition:transform .3s var(--ease)}
.info-card:hover .info-card__arrow{transform:translateX(4px)}
.info-card--static{cursor:default}

/* RIGHT — premium booking block */
.contact__book{display:flex}
.book-block{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  background:linear-gradient(150deg,var(--blue) 0%,#013a90 55%,var(--green) 160%);
  border-radius:var(--radius-lg);padding:clamp(34px,4.5vw,56px);color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg)}
.book-block::before{content:"";position:absolute;top:-40%;right:-15%;width:60%;height:120%;
  background:radial-gradient(circle,rgba(0,169,157,.35),transparent 70%);pointer-events:none}
.book-block>*{position:relative;z-index:1}
.book-block__eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:6px 14px;border-radius:100px;margin-bottom:20px}
.book-block__title{font-size:clamp(28px,3.6vw,40px);color:#fff;font-weight:800;letter-spacing:-.02em}
.book-block__desc{margin:16px 0 30px;font-size:clamp(15.5px,1.6vw,17px);color:rgba(255,255,255,.9);max-width:44ch;line-height:1.6}
.book-block__cta{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--blue);
  font-family:'Manrope';font-weight:800;font-size:clamp(16px,1.8vw,18px);padding:18px 44px;border-radius:100px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s}
.book-block__cta:hover{transform:translateY(-4px);background:var(--green);color:#fff;box-shadow:0 20px 44px rgba(0,169,157,.4)}
.book-block__socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);width:100%}
.book-block__socials a{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);transition:transform .28s var(--ease),background .28s}
.book-block__socials a svg{width:22px;height:22px;fill:#fff;transition:fill .28s}
.book-block__socials a:hover{background:var(--green);transform:translateY(-4px)}
.book-block__socials a:hover svg{fill:#fff}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--blue);color:rgba(255,255,255,.82);padding-top:clamp(50px,7vw,72px)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,48px);padding-bottom:48px}
.brand__text--footer strong{color:#fff}
.brand__text--footer em{color:var(--green)}
.footer__brand p{margin:16px 0 22px;font-size:15px;max-width:340px}
.footer__col h4{color:#fff;font-size:15px;margin-bottom:18px;letter-spacing:.04em}
.footer__col a{display:block;color:rgba(255,255,255,.78);font-size:14.5px;padding:6px 0;transition:color .2s,transform .2s}
.footer__col a:hover{color:var(--green);transform:translateX(4px)}
.footer__bar{border-top:1px solid rgba(255,255,255,.14)}
.footer__bar-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:22px 0;font-size:13.5px;color:rgba(255,255,255,.6)}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__content{max-width:660px}
  .hero__desc,.hero__roles{max-width:none}
  .hero__media{max-width:440px;margin:0}
  .hero__card{margin:0}
  .ecosys{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .ecosys__diagram{max-width:420px}
  .company__intro{grid-template-columns:1fr;gap:28px}
  .contact__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:16px}
  .gallery__item--featured{grid-row:auto;grid-column:1 / -1;aspect-ratio:16/9}
  .gallery__item{aspect-ratio:4/3}
}

@media (max-width:1160px){
  .nav__toggle{display:flex;margin-left:auto}
  .nav__spacer{display:none}
  .nav__menu{
    position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;
    background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
    padding:14px;border:1px solid #EAEAEA;border-radius:18px;box-shadow:var(--shadow-md);
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
    max-height:calc(100vh - 130px);overflow-y:auto}
  .nav__menu.open{transform:none;opacity:1;pointer-events:auto}
  .nav__menu a{padding:13px 14px;font-size:15.5px;border-radius:12px;color:var(--blue)}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero__media{order:-1;margin:0 auto}
  .hero__card{margin:0 auto}
  .hero__roles{grid-template-columns:1fr;gap:12px}
  .hero__cta{width:100%}
  .btn-cta{flex:1 1 auto}
  .social-bar{right:auto;left:0;top:auto;bottom:0;transform:none;width:100%;flex-direction:row;
    justify-content:space-around;gap:0;padding:8px env(safe-area-inset-right) calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 -6px 24px rgba(0,44,113,.12);border-top:1px solid var(--line)}
  .social-bar a{width:44px;height:44px;box-shadow:none;border-color:transparent}
  .social-bar a:hover{transform:none}
  .social-bar a[data-tip]::after{display:none}
  main{padding-bottom:64px}
  .footer{padding-bottom:64px}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .channels{grid-template-columns:1fr}
  .highlight-cards{grid-template-columns:1fr}
  .contact__list li{grid-template-columns:1fr;gap:4px}
  .timeline{padding-left:32px}
  .ecosys__diagram{max-width:330px}
  .node{font-size:9.5px;width:clamp(66px,23%,80px);padding:6px;border-width:3px}
  .node__dot{top:6px;width:7px;height:7px}
  .node--center{font-size:11px;width:clamp(92px,28%,108px)}
  .ecocard{padding:16px 18px;gap:14px}
  .ecocard__arrow{display:none}
  .gallery{grid-template-columns:1fr;gap:16px}
  .gallery__item--featured{grid-column:auto;aspect-ratio:4/3}
  .engine__card{max-width:none;flex-basis:100%}
  .lightbox__nav{width:44px;height:44px;font-size:26px}
  .lightbox__close{width:42px;height:42px;font-size:26px}
}