/* ======================= ACE — About Us (Final) ======================= */
:root{
  --bg:#ffffff;
  --ink-900:#0f172a; --ink-800:#1f2937; --ink-700:#334155; --ink-600:#475569;
  --metal-050:#f8fafc; --metal-100:#f1f5f9; --metal-200:#e2e8f0;
  --brand:#0ea5e9; --brand-600:#0284c7;
  --s4:8px; --s6:12px; --s8:16px; --s10:20px; --s12:24px; --s16:32px; --s20:40px;
  --r:14px;
  --fs-sm:.94rem; --fs-base:1rem; --fs-h1:clamp(1.9rem,2.2vw+1rem,2.6rem); --fs-h2:clamp(1.2rem,1.2vw+1rem,1.5rem);
  --container:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink-900);font:400 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600);text-decoration:underline}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s8)}

header.site-header{border-bottom:1px solid var(--metal-200);background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(6px);position:sticky;top:0;z-index:20}
.site-header .row{display:flex;align-items:center;justify-content:space-between;gap:var(--s8);padding:var(--s8) 0}
.logo{display:flex;align-items:center;gap:var(--s6);font-weight:800;color:var(--ink-900)}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:var(--s8)}
.nav a{color:var(--ink-700);padding:6px 10px;border-radius:10px}
.nav a:hover{background:var(--metal-100);text-decoration:none;color:var(--ink-900)}

.hero{padding:var(--s16) 0 var(--s12)}
.hero h1{font-size:var(--fs-h1);margin:0 0 var(--s6)}
.hero p{color:var(--ink-700);margin:0}

.grid{display:grid;gap:var(--s12)}
.two{grid-template-columns: 1fr 1fr}
@media (max-width: 980px){ .two{grid-template-columns: 1fr} }

.panel{border:1px solid var(--metal-200);border-radius:var(--r);background:#fff}
.panel .head{padding:var(--s10);border-bottom:1px solid var(--metal-200);display:flex;align-items:center;justify-content:space-between}
.panel .title{font-size:var(--fs-h2);margin:0}
.panel .body{padding:var(--s10)}

.prose p{margin:0 0 var(--s8);color:var(--ink-800)}

.timeline{position:relative;display:grid;gap:12px;margin-top:10px}
.timeline::before{content:"";position:absolute;left:90px;top:0;bottom:0;width:2px;background:var(--metal-200)}
.ti{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:start}
.ti .yr{font-weight:800;color:var(--brand-600)}
.ti .txt{color:var(--ink-700)}

.infra-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media (max-width: 680px){ .infra-gallery{grid-template-columns:1fr} }
.photo{aspect-ratio:16/9;border-radius:12px;border:1px solid var(--metal-200);background:linear-gradient(180deg,#f6fafe,#fbfdff);display:grid;place-items:center;color:#8aa0b6;font-weight:700;letter-spacing:.08em}
.map{border:1px solid var(--metal-200);border-radius:12px;overflow:hidden}
.map iframe{width:100%;height:250px;border:0;display:block}

.team-list{display:grid;gap:8px}
.row{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--metal-200);border-radius:12px;padding:10px;background:#fff}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--metal-100);border:1px solid var(--metal-200);display:grid;place-items:center;font-weight:800;color:#64748b}
.imgph{width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--metal-200);background:var(--metal-100)}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 680px){ .facts{grid-template-columns:1fr} }
.fact{border:1px solid var(--metal-200);border-radius:12px;padding:12px;background:#fff}
.fact .k{font-weight:800;color:var(--ink-800)}
.fact .v{color:var(--ink-600);margin-top:4px}

.logo-wall{display:flex;flex-wrap:wrap;gap:10px}
.logo-chip{border:1px solid var(--metal-200);border-radius:10px;padding:8px 12px;background:#fff;color:var(--ink-800);font-size:var(--fs-sm)}
.exports{display:flex;flex-wrap:wrap;gap:10px}
.country{background:var(--metal-100);border:1px solid var(--metal-200);border-radius:999px;padding:6px 10px;color:var(--ink-700);font-size:var(--fs-sm)}

.quote{border-left:3px solid var(--brand);padding-left:12px;color:var(--ink-800)}
.meta{color:var(--ink-600);font-size:var(--fs-sm)}

footer.site-footer{border-top:1px solid var(--metal-200);margin-top:var(--s20);background:linear-gradient(180deg,var(--metal-100),var(--metal-050))}
.site-footer .micro{padding:var(--s8) 0;color:var(--ink-600);font-size:var(--fs-sm);display:flex;justify-content:space-between;gap:var(--s8);flex-wrap:wrap}
:focus-visible{outline:3px solid rgba(56,189,248,.35);outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

/* Buttons */
.btn{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  will-change: transform, box-shadow;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-hover); text-decoration: none; }
.btn:active{ transform: translateY(0); box-shadow: var(--shadow); }
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,.35), var(--shadow-hover); /* brand focus ring + elevation */
}

/* Primary button: gradient + subtle shine */
.btn.primary{
  background: var(--brand-grad);
  border-color: transparent;
  color: #fff;
}
.btn.primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient( to right, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100% );
  width: 40%; height: 200%; top: -50%; left: -60%;
  transform: rotate(20deg);
  transition: transform 500ms var(--ease-out), opacity var(--dur) var(--ease);
  opacity: .0;
}
.btn.primary:hover::after{ transform: rotate(20deg) translateX(220%); opacity: .8; }

/* Disabled buttons (attribute or class) */
.btn[disabled], .btn.disabled, .btn[aria-disabled="true"]{
  opacity: .6; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Nav links: animated underline */
.nav a{
  position: relative; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:2px;
  background: var(--brand-grad);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease);
  border-radius: 2px;
}
.nav a:hover::after, .nav a:focus-visible::after{ transform: scaleX(1); }

/* Cards: lift + tighter shadow on hover */
.card{
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(2,132,199,.25); }

/* Image tiles: small zoom on hover */
.ph-img img{
  transition: transform var(--dur) var(--ease);
}
.ph-img:hover img{
  transform: scale(1.03);
}

/* Chips: interactive + selected state */
.chip{
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chip:hover{ background:#fff; color:var(--ink-900); border-color: rgba(2,132,199,.35); transform: translateY(-1px); }
.chip[aria-selected="true"], .chip.is-active{
  background: rgba(14,165,233,.10); border-color: rgba(14,165,233,.45); color: var(--brand-600);
}

/* KPI tiles: tiny pop on hover */
.kpis .kpi{
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kpis .kpi:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgba(2,132,199,.25); }

/* Hero visual: allow a gentle parallax-y lift on hover */
.hero .visual{
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero .visual:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}