/* styles.css — Google Fonts loaded via HTML for non-blocking render */
/* ─── THEME VARIABLES ─── */
:root {
/* Brand */
--navy: hsl(220, 38%, 10%);
--navy-light: hsl(220, 30%, 18%);
--gold: hsl(43, 74%, 49%);
--gold-light: hsl(45, 90%, 60%);
--gold-dark: hsl(40, 65%, 38%);
/* Light mode surfaces (default) */
--bg-page: #ffffff;
--bg-surface: #ffffff;
--bg-gray: hsl(220, 10%, 95%);
--border: hsl(220, 14%, 90%);
/* Light mode text */
--text-primary: hsl(220, 20%, 12%);
--text-secondary: hsl(220, 10%, 40%);
--text-muted: hsl(220, 10%, 55%);
/* Misc */
--white: #ffffff;
--gray: hsl(220, 10%, 95%);
--gray-dark: hsl(220, 10%, 40%);
/* Header */
--header-bg: #ffffff;
--header-shadow: 0 1px 3px rgba(0,0,0,.08);
/* Card */
--card-bg: #ffffff;
--card-border: hsl(220,14%,90%);
}
/* ─── DARK MODE OVERRIDES ─── */
[data-theme="dark"] {
--bg-page: hsl(220, 38%, 7%);
--bg-surface: hsl(220, 35%, 11%);
--bg-gray: hsl(220, 32%, 14%);
--border: rgba(255,255,255,.08);
--text-primary: hsl(220, 15%, 90%);
--text-secondary: hsl(220, 10%, 60%);
--text-muted: hsl(220, 10%, 45%);
--gray: hsl(220, 32%, 14%);
--gray-dark: hsl(220, 10%, 60%);
--header-bg: hsl(220, 38%, 9%);
--header-shadow: 0 1px 0 rgba(255,255,255,.06);
--card-bg: hsl(220, 35%, 13%);
--card-border: rgba(255,255,255,.07);
--navy: hsl(220, 38%, 10%);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing:antialiased; line-height:1.6; padding-bottom:62px; transition: background .3s, color .3s; }
h1,h2,h3,h4,h5,h6 { font-family:'Playfair Display',Georgia,serif; line-height:1.2; color: var(--text-primary); }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul { list-style:none; }
/* ─── LAYOUT ─── */
.container { max-width:1280px; margin:0 auto; padding:0 1rem; }
@media(min-width:640px){ .container{padding:0 1.5rem;} }
@media(min-width:1024px){ .container{padding:0 2rem;} }
/* ─── BUTTONS ─── */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 2rem; background:var(--navy); color:#fff; font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-family:'Inter',sans-serif; transition:all .3s; }
.btn-primary:hover { background:var(--gold); color:var(--navy); }
.btn-gold { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 2rem; background:var(--gold); color:var(--navy); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-family:'Inter',sans-serif; transition:all .3s; }
.btn-gold:hover { background:var(--navy); color:#fff; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 2rem; border:2px solid #fff; color:#fff; font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-family:'Inter',sans-serif; transition:all .3s; }
.btn-outline:hover { background:#fff; color:var(--navy); }
/* ─── SECTION TITLES ─── */
.section-subtitle { font-size:.75rem; text-transform:uppercase; font-weight:700; letter-spacing:.2em; color:var(--gold-dark); font-family:'Inter',sans-serif; }
.section-title { font-size:clamp(1.75rem,4vw,2.25rem); font-weight:700; color:var(--navy); margin-top:.5rem; }
.gold-line { width:4rem; height:.25rem; background:var(--gold); margin:.75rem 0; }
.gold-line.center { margin:.75rem auto; }
/* ─── TOP BAR ─── */
.topbar { background:var(--navy); color:#fff; font-size:.75rem; display:none; }
@media(min-width:1024px){ .topbar{display:block;} }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:1.5rem; }
.topbar a { color:rgba(255,255,255,.8); display:flex; align-items:center; gap:.375rem; transition:color .2s; }
.topbar a:hover { color:var(--gold); }
.topbar-sep { color:rgba(255,255,255,.3); }
/* ─── HEADER ─── */
header { position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:box-shadow .3s; }
header.scrolled { box-shadow:0 4px 12px rgba(0,0,0,.12); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.logo img { height:3rem; width:auto; }
/* ─── NAV ─── */
nav.desktop-nav { display:none; align-items:center; }
@media(min-width:1024px){ nav.desktop-nav{display:flex;} }
.nav-item { position:relative; }
.nav-link { display:flex; align-items:center; gap:.25rem; padding:1.25rem 1rem; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); transition:color .2s; white-space:nowrap; }
.nav-link:hover,.nav-link.active { color:var(--gold-dark); }
.nav-link .indicator { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:2rem; height:.125rem; background:var(--gold); display:none; }
.nav-link.active .indicator { display:block; }
.nav-link svg { width:.75rem; height:.75rem; transition:transform .2s; }
.nav-item:hover .nav-link svg { transform:rotate(180deg); }
.dropdown { display:none; position:absolute; top:100%; left:0; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.12); border-top:2px solid var(--gold); min-width:15rem; z-index:100; padding:.5rem 0; }
.nav-item:hover .dropdown { display:block; animation:dropIn .25s ease-out; }
.dropdown a { display:block; padding:.625rem 1.5rem; font-size:.875rem; font-weight:500; color:var(--navy); transition:all .15s; }
.dropdown a:hover { color:var(--gold-dark); background:var(--gray); }
/* ─── MOBILE TOGGLE ─── */
.mobile-toggle { display:flex; align-items:center; padding:.5rem; color:var(--navy); }
@media(min-width:1024px){ .mobile-toggle{display:none;} }
.mobile-toggle svg { width:1.5rem; height:1.5rem; }
/* ─── MOBILE MENU ─── */
.mobile-menu { display:none; background:#fff; border-top:1px solid var(--border); max-height:calc(100vh - 5rem); overflow-y:auto; }
.mobile-menu.open { display:block; }
.mobile-menu-inner { padding:1rem 0; }
.mobile-nav-link { display:flex; align-items:center; justify-content:space-between; padding:.75rem .5rem; font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); width:100%; }
.mobile-submenu { display:none; padding-left:1.5rem; }
.mobile-submenu.open { display:block; }
.mobile-submenu a { display:block; padding:.625rem .5rem; font-size:.875rem; color:hsl(220,10%,40%); }
.mobile-menu-footer { padding:1rem .5rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.5rem; font-size:.75rem; color:hsl(220,10%,40%); margin-top:.5rem; }
/* ─── GOLD ACCENT LINE ─── */
.header-accent { height:.125rem; background:linear-gradient(to right, var(--gold), var(--gold-light), var(--gold)); }
/* ─── HERO SLIDER ─── */
.hero { position:relative; height:600px; overflow:hidden; background:var(--navy); }
@media(min-width:768px){ .hero{height:680px;} }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1s; }
.slide.active { opacity:1; }
.slide video,.slide img { width:100%; height:100%; object-fit:cover; }
.slide-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(10,17,36,.88),rgba(10,17,36,.55),transparent); }
.hero-content { position:relative; z-index:10; height:100%; display:flex; align-items:center; }
.hero-flex { display:flex; align-items:center; gap:4rem; width:100%; }
.hero-text { flex:1; min-width:0; }
.hero-title { font-size:clamp(1.75rem,5vw,3.5rem); font-weight:700; color:#fff; line-height:1.15; animation:heroFade 1.2s ease-out; }
.hero-actions { margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem; animation:heroFade 1.2s ease-out; }
.hero-prev,.hero-next { position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:3rem; height:3rem; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); color:#fff; transition:background .3s; backdrop-filter:blur(4px); }
.hero-prev:hover,.hero-next:hover { background:var(--gold); }
.hero-prev { left:1rem; }
.hero-next { right:1rem; }
.hero-dots { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:.5rem; }
.hero-dot { height:.25rem; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:all .3s; width:1.25rem; }
.hero-dot.active { width:2.5rem; background:var(--gold); }
.ken-burns { animation: none; }
.slide.active .ken-burns { animation:kenBurns 20s ease-out infinite alternate; }
/* ─── PSX LIVE CARD ─── */
.psx-card { flex-shrink:0; width:440px; animation:heroFade 1.2s ease-out; }
@media(max-width:1023px){ .psx-card{display:none;} }
.psx-card-inner { background:rgba(10,17,36,.85); backdrop-filter:blur(20px); border:1px solid rgba(201,168,76,.15); border-radius:16px; padding:28px; box-shadow:0 32px 80px rgba(0,0,0,.7); animation:floatCard 5s ease-in-out infinite; }
.psx-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.psx-label { font-size:10px; font-weight:600; color:rgba(255,255,255,.5); letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
.psx-price { font-family:'Playfair Display',Georgia,serif; font-size:38px; font-weight:700; color:#fff; letter-spacing:-1.5px; line-height:1; }
.psx-change { display:flex; align-items:center; gap:6px; margin-top:6px; }
.psx-change-num { font-size:14px; font-weight:600; color:#2ECC9A; }
.psx-change-pct { font-size:11px; color:#2ECC9A; background:rgba(46,204,154,.1); padding:2px 9px; border-radius:100px; }
.psx-live { display:flex; align-items:center; gap:5px; background:rgba(46,204,154,.08); border:1px solid rgba(46,204,154,.2); border-radius:100px; padding:5px 12px; }
.psx-live-dot { width:6px; height:6px; background:#2ECC9A; border-radius:50%; animation:pulseDot 1.5s ease-in-out infinite; }
.psx-live-text { font-size:10px; font-weight:600; color:#2ECC9A; letter-spacing:1.5px; }
.psx-chart { display:flex; align-items:flex-end; gap:3px; height:92px; margin-bottom:10px; }
.psx-chart-bar { flex:1; border-radius:2px 2px 0 0; min-width:0; }
.psx-time { display:flex; justify-content:space-between; margin-bottom:20px; }
.psx-time span { font-size:10px; color:rgba(255,255,255,.4); }
.psx-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:16px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:16px; }
.psx-stat-label { font-size:9px; color:rgba(255,255,255,.4); letter-spacing:1px; margin-bottom:4px; }
.psx-stat-val { font-size:12px; font-weight:500; color:#fff; }
.psx-stat-val.green { color:#2ECC9A; }
.psx-stat-val.red { color:#E85B5B; }
.psx-movers-title { font-size:9px; font-weight:600; color:rgba(255,255,255,.4); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.psx-mover { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.psx-mover-sym { font-size:12px; font-weight:500; color:#fff; }
.psx-mover-chg { font-size:11px; font-weight:600; padding:2px 9px; border-radius:100px; }
.psx-mover-chg.green { color:#2ECC9A; background:rgba(46,204,154,.1); }
.psx-mover-chg.red { color:#E85B5B; background:rgba(227,52,47,.1); }
.psx-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.psx-mini-card { background:rgba(10,17,36,.65); backdrop-filter:blur(10px); border:1px solid rgba(201,168,76,.1); border-radius:10px; padding:16px; }
.psx-mini-label { font-size:9px; font-weight:600; color:rgba(255,255,255,.4); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.psx-mini-val { font-family:'Playfair Display',Georgia,serif; font-size:20px; font-weight:700; color:#fff; }
.psx-mini-sub { font-size:11px; color:#2ECC9A; margin-top:4px; font-weight:500; }
.psx-mini-sub.muted { color:rgba(255,255,255,.4); }
/* ─── NEWS TICKER ─── */
.ticker { background:var(--navy); padding:1.5rem 0; overflow:hidden; }
.ticker-inner { display:flex; align-items:center; gap:1rem; }
.ticker-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; font-weight:700; color:var(--gold); white-space:nowrap; flex-shrink:0; font-family:'Inter',sans-serif; }
.ticker-track-wrap { flex:1; overflow:hidden; position:relative; }
.ticker-track { display:flex; gap:1rem; animation:marquee 40s linear infinite; width:max-content; }
.ticker-item { flex-shrink:0; width:18rem; display:block; }
.ticker-img-wrap { position:relative; height:8rem; overflow:hidden; }
.ticker-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ticker-item:hover .ticker-img-wrap img { transform:scale(1.05); }
.ticker-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,17,36,.95),rgba(10,17,36,.25),transparent); }
.ticker-caption { position:absolute; bottom:0; left:0; right:0; padding:.75rem; font-size:.75rem; color:#fff; font-weight:600; line-height:1.3; }
/* ─── STATS BAR ─── */
.stats-bar { background:#fff; border-bottom:1px solid var(--border); padding:2.5rem 0; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
@media(min-width:768px){ .stats-grid{grid-template-columns:repeat(4,1fr);} }
.stat-item { text-align:center; border-left:1px solid var(--border); }
.stat-item:first-child { border-left:none; }
@media(max-width:767px){ .stat-item{border-left:none;} }
.stat-icon { width:2rem; height:2rem; color:var(--gold-dark); margin:0 auto .5rem; }
.stat-value { font-size:clamp(1.75rem,4vw,2.25rem); font-weight:700; color:var(--navy); font-family:'Playfair Display',serif; }
.stat-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-dark); margin-top:.25rem; }
/* ─── SECTIONS ─── */
.section { padding:5rem 0; }
.section-gray { background:var(--gray); }
.section-navy { background:var(--navy); color:#fff; }
.section-gold { background:var(--gold); }
/* ─── ABOUT SECTION ─── */
.about-grid { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media(min-width:1024px){ .about-grid{grid-template-columns:1fr 1fr; gap:5rem;} }
.about-img-wrap { position:relative; }
.about-img-wrap img { aspect-ratio:4/3; width:100%; object-fit:cover; box-shadow:0 25px 50px rgba(0,0,0,.15); }
.about-img-deco1 { position:absolute; bottom:-1.5rem; left:-1.5rem; width:8rem; height:8rem; border:4px solid var(--gold); z-index:-1; display:none; }
.about-img-deco2 { position:absolute; top:-1.5rem; right:-1.5rem; width:10rem; height:10rem; background:rgba(10,17,36,.05); z-index:-1; display:none; }
@media(min-width:768px){ .about-img-deco1,.about-img-deco2{display:block;} }
.about-text .btn-group { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.text-body { color:hsl(220,10%,40%); font-size:.9375rem; line-height:1.8; }
.text-body p + p { margin-top:1rem; }
/* ─── SERVICES GRID ─── */
.services-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .services-grid{grid-template-columns:repeat(4,1fr);} }
.service-card { background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.04); padding:2rem; display:flex; flex-direction:column; transition:box-shadow .3s; }
.service-card:hover { box-shadow:0 8px 30px rgba(0,0,0,.12); }
.service-icon { width:3.5rem; height:3.5rem; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; transition:background .3s; }
.service-card:hover .service-icon { background:var(--gold); }
.service-icon svg { width:1.75rem; height:1.75rem; color:var(--gold); transition:color .3s; }
.service-card:hover .service-icon svg { color:var(--navy); }
.service-title { font-size:1.25rem; font-weight:700; color:var(--navy); margin-bottom:.75rem; }
.service-desc { font-size:.875rem; color:hsl(220,10%,40%); line-height:1.7; flex:1; }
.service-more { margin-top:1.25rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-dark); display:flex; align-items:center; gap:.5rem; transition:gap .3s; font-family:'Inter',sans-serif; }
.service-card:hover .service-more { gap:.75rem; }
/* ─── VISION MISSION ─── */
.vm-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:768px){ .vm-grid{grid-template-columns:1fr 1fr;} }
.vm-box { padding:2.5rem 3rem; }
.vm-box-navy { background:var(--navy); color:#fff; }
.vm-box-gold { background:var(--gold); color:var(--navy); }
.vm-line { width:3rem; height:.25rem; margin-bottom:1.5rem; }
.vm-box-navy .vm-line { background:var(--gold); }
.vm-box-gold .vm-line { background:var(--navy); }
.vm-title { font-size:1.5rem; font-weight:700; margin-bottom:1rem; }
.vm-box-navy .vm-text { color:rgba(255,255,255,.75); line-height:1.8; font-size:.9375rem; }
.vm-box-gold .vm-text { color:rgba(10,17,36,.8); line-height:1.8; font-size:.9375rem; }
/* ─── AWARDS ─── */
.awards-section { position:relative; overflow:hidden; }
.awards-glow1,.awards-glow2 { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.awards-glow1 { top:0; right:0; width:24rem; height:24rem; background:rgba(186,146,62,.05); }
.awards-glow2 { bottom:0; left:0; width:18rem; height:18rem; background:rgba(186,146,62,.05); }
.awards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media(min-width:768px){ .awards-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){ .awards-grid{grid-template-columns:repeat(6,1fr);} }
.award-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:1.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; transition:all .3s; }
.award-card:hover { background:rgba(255,255,255,.1); border-color:rgba(186,146,62,.5); }
.award-logo-wrap { height:4rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.award-logo-wrap img { max-height:100%; max-width:100%; object-fit:contain; filter:brightness(0) invert(1); opacity:.8; transition:opacity .3s; }
.award-card:hover .award-logo-wrap img { opacity:1; }
.award-org { font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-weight:700; margin-bottom:.5rem; font-family:'Inter',sans-serif; }
.award-desc { font-size:.7rem; color:rgba(255,255,255,.5); line-height:1.4; }
/* ─── GROUP COMPANIES ─── */
.group-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media(min-width:768px){ .group-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){ .group-grid{grid-template-columns:repeat(5,1fr);} }
.group-card { background:var(--gray); padding:1.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; border-bottom:2px solid transparent; transition:all .3s; }
.group-card:hover { box-shadow:0 8px 25px rgba(0,0,0,.1); border-color:var(--gold); }
.group-logo { height:5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.group-logo img { max-height:100%; max-width:100%; object-fit:contain; }
.group-name { font-size:.875rem; font-weight:700; color:var(--navy); line-height:1.3; }
.group-sector { font-size:.75rem; color:var(--gray-dark); margin-top:.25rem; }
/* ─── QUOTE ─── */
.quote-section { background:var(--gray); padding:5rem 0; }
.quote-wrap { max-width:56rem; margin:0 auto; text-align:center; }
.quote-icon { width:3rem; height:3rem; color:var(--gold); margin:0 auto 1.5rem; }
blockquote { font-size:clamp(1.25rem,3vw,1.75rem); color:var(--navy); line-height:1.6; font-style:italic; margin-bottom:1.5rem; }
.quote-line { width:4rem; height:.25rem; background:var(--gold); margin:.75rem auto; }
.quote-author { font-size:.875rem; font-weight:700; color:var(--gold-dark); text-transform:uppercase; letter-spacing:.1em; font-family:'Inter',sans-serif; }
.quote-sub { font-size:.75rem; color:var(--gray-dark); margin-top:.25rem; }
/* ─── FOUNDATION ─── */
.foundation-grid { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media(min-width:1024px){ .foundation-grid{grid-template-columns:1fr 1fr; gap:5rem;} }
.foundation-img { position:relative; }
.foundation-img img { aspect-ratio:4/3; width:100%; object-fit:cover; box-shadow:0 25px 50px rgba(0,0,0,.15); }
.foundation-deco { position:absolute; bottom:-1.5rem; right:-1.5rem; width:8rem; height:8rem; background:var(--gold); z-index:-1; display:none; }
@media(min-width:768px){ .foundation-deco{display:block;} }
.focus-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2rem 0; }
.focus-item { display:flex; align-items:center; gap:.75rem; padding:.75rem; border-left:2px solid var(--gold); background:var(--gray); }
.focus-item svg { width:1.25rem; height:1.25rem; color:var(--gold-dark); flex-shrink:0; }
.focus-item span { font-size:.875rem; font-weight:600; color:var(--navy); }
/* ─── LOCATIONS ─── */
.locations-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .locations-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .locations-grid{grid-template-columns:repeat(3,1fr);} }
.location-card { background:#fff; padding:1.5rem; box-shadow:0 4px 20px rgba(0,0,0,.06); border-top:2px solid transparent; transition:all .3s; display:flex; gap:1rem; }
.location-card:hover { box-shadow:0 8px 30px rgba(0,0,0,.12); border-color:var(--gold); }
.location-icon-wrap { width:3rem; height:3rem; background:var(--navy); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s; }
.location-card:hover .location-icon-wrap { background:var(--gold); }
.location-icon-wrap svg { width:1.5rem; height:1.5rem; color:var(--gold); transition:color .3s; }
.location-card:hover .location-icon-wrap svg { color:var(--navy); }
.location-city { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:.5rem; }
.location-addr { font-size:.875rem; color:hsl(220,10%,40%); line-height:1.6; margin-bottom:.5rem; }
.location-phone { font-size:.875rem; font-weight:600; color:var(--gold-dark); display:flex; align-items:center; gap:.5rem; }
.location-phone svg { width:.875rem; height:.875rem; }
/* ─── PERFORMANCE ─── */
.slide, .ken-burns, .psx-ticker-track, .ticker-track { will-change: transform; }
.slide { contain: layout style; }
/* ─── PSX LIVE TICKER ─── */
.psx-ticker-wrap { position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--navy); border-top:1px solid rgba(201,168,76,.16); padding:18px 0; overflow:hidden; }
.psx-ticker-left { position:absolute; left:0; top:0; bottom:0; z-index:2; display:flex; align-items:center; padding:0 20px 0 28px; background:linear-gradient(90deg,var(--navy) 65%,transparent); }
.psx-ticker-badge { display:flex; align-items:center; gap:9px; background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.22); border-radius:100px; padding:8px 20px; }
.psx-ticker-dot { width:8px; height:8px; background:var(--gold); border-radius:50%; animation:pulseDot 1.8s ease-in-out infinite; }
.psx-ticker-badge span { font-size:13px; font-weight:700; color:var(--gold); letter-spacing:2px; }
.psx-ticker-track-wrap { overflow:hidden; }
.psx-ticker-track { display:flex; padding-left:230px; animation:tickerScroll 42s linear infinite; width:max-content; }
.psx-ticker-wrap:hover .psx-ticker-track { animation-play-state:paused; }
.psx-ticker-item { display:flex; align-items:center; gap:12px; padding:0 32px; white-space:nowrap; border-right:1px solid rgba(255,255,255,.06); }
.psx-tk-sym { font-size:16px; font-weight:600; color:#fff; letter-spacing:.5px; }
.psx-tk-val { font-size:16px; color:rgba(255,255,255,.5); }
.psx-tk-chg { font-size:15px; font-weight:600; }
.psx-tk-chg.up { color:#2ECC9A; }
.psx-tk-chg.dn { color:#E85B5B; }
.psx-ticker-fade-r { position:absolute; right:0; top:0; bottom:0; z-index:2; width:80px; background:linear-gradient(270deg,var(--navy),transparent); pointer-events:none; }
/* ─── CTA SECTION ─── */
.cta-section { position:relative; padding:6rem 0; overflow:hidden; }
.cta-bg { position:absolute; inset:0; }
.cta-bg video { width:100%; height:100%; object-fit:cover; }
.cta-overlay { position:absolute; inset:0; background:rgba(10,17,36,.9); }
.cta-content { position:relative; z-index:10; text-align:center; max-width:56rem; margin:0 auto; }
.cta-title { font-size:clamp(1.75rem,4vw,3rem); font-weight:700; color:#fff; margin-bottom:1.5rem; }
.cta-text { color:rgba(255,255,255,.75); font-size:1.1rem; max-width:40rem; margin:0 auto 2.5rem; line-height:1.8; }
.cta-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
/* ─── FOOTER ─── */
footer { background:var(--navy); color:#fff; }
.footer-main { padding:4rem 0; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media(min-width:768px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1024px){ .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;} }
.footer-logo { height:3.5rem; width:auto; margin-bottom:1.25rem; filter:brightness(0) invert(1); }
.footer-tagline { font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:1.25rem; }
.footer-socials { display:flex; gap:.75rem; }
.social-btn { width:2.25rem; height:2.25rem; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.social-btn:hover { background:var(--gold); color:var(--navy); }
.social-btn svg { width:1rem; height:1rem; }
.footer-heading { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--gold); margin-bottom:1.25rem; font-family:'Inter',sans-serif; }
.footer-links { display:flex; flex-direction:column; gap:.625rem; }
.footer-links a { font-size:.875rem; color:rgba(255,255,255,.5); transition:color .2s; display:flex; align-items:center; gap:.5rem; }
.footer-links a:hover { color:var(--gold); }
.footer-contact-item { display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; color:rgba(255,255,255,.5); margin-bottom:.75rem; }
.footer-contact-item svg { width:1rem; height:1rem; color:var(--gold); flex-shrink:0; margin-top:.25rem; }
.footer-contact-item a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.25rem 0; }
.footer-bottom-inner { display:flex; flex-direction:column; gap:.75rem; align-items:center; text-align:center; font-size:.75rem; color:rgba(255,255,255,.35); }
@media(min-width:768px){ .footer-bottom-inner{flex-direction:row; justify-content:space-between; text-align:left;} }
.footer-bottom-links { display:flex; gap:1.25rem; }
.footer-bottom-links a:hover { color:var(--gold); }
/* ─── PAGE HERO ─── */
.page-hero { position:relative; height:340px; display:flex; align-items:flex-end; overflow:hidden; }
@media(min-width:768px){ .page-hero{height:380px;} }
.page-hero-bg { position:absolute; inset:0; }
.page-hero-bg img { width:100%; height:100%; object-fit:cover; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(10,17,36,1),rgba(10,17,36,.85),rgba(10,17,36,.5)); }
.page-hero-content { position:relative; z-index:10; padding-bottom:3rem; width:100%; }
.breadcrumbs { display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:rgba(255,255,255,.6); margin-bottom:1rem; flex-wrap:wrap; }
.breadcrumbs a:hover { color:var(--gold); }
.breadcrumbs span { color:var(--gold); }
.breadcrumbs svg { width:.75rem; height:.75rem; }
.page-title { font-size:clamp(2rem,5vw,3rem); font-weight:700; color:#fff; line-height:1.15; }
.page-subtitle { margin-top:.75rem; font-size:1rem; color:rgba(255,255,255,.75); max-width:40rem; line-height:1.7; }
.page-gold-line { width:4rem; height:.25rem; background:var(--gold); margin-top:1.25rem; }
/* ─── INNER PAGE SECTIONS ─── */
.inner-section { padding:5rem 0; }
.inner-section-gray { padding:5rem 0; background:var(--gray); }
.inner-section-navy { padding:5rem 0; background:var(--navy); }
.max-4xl { max-width:56rem; margin:0 auto; }
/* ─── CHECK LIST ─── */
.check-list { display:flex; flex-direction:column; gap:.625rem; }
.check-item { display:flex; align-items:flex-start; gap:.75rem; padding:1rem; background:var(--gray); }
.check-item svg { width:1.25rem; height:1.25rem; color:var(--gold-dark); flex-shrink:0; margin-top:.125rem; }
.check-item span { font-size:.875rem; color:var(--navy); font-weight:500; }
/* ─── GRID CHECK ─── */
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
/* ─── CARD HOVER NAVY ─── */
.hover-navy { transition:all .3s; }
.hover-navy:hover { background:var(--navy) !important; color:#fff !important; }
.hover-navy:hover * { color:#fff !important; }
/* ─── TIMELINE ─── */
.timeline { position:relative; }
.timeline-line { position:absolute; left:1rem; top:0; bottom:0; width:.125rem; background:var(--gold); }
@media(min-width:768px){ .timeline-line{left:50%; transform:translateX(-50%);} }
.timeline-item { position:relative; display:flex; align-items:flex-start; gap:1.5rem; margin-bottom:2rem; }
@media(min-width:768px){ .timeline-item{width:50%;} .timeline-item:nth-child(odd){margin-left:0; padding-right:3rem;} .timeline-item:nth-child(even){margin-left:50%; padding-left:3rem;} }
.timeline-dot { position:absolute; left:1rem; width:1rem; height:1rem; background:var(--gold); border:4px solid #fff; border-radius:50%; z-index:10; margin-top:.375rem; }
@media(min-width:768px){ .timeline-dot{left:auto; right:-2.5rem;} .timeline-item:nth-child(even) .timeline-dot{left:-2.5rem; right:auto;} }
.timeline-content { margin-left:2.5rem; background:var(--gray); padding:1.25rem; flex:1; }
@media(min-width:768px){ .timeline-content{margin-left:0;} }
.timeline-year { font-size:1.5rem; font-weight:700; color:var(--gold-dark); font-family:'Playfair Display',serif; }
.timeline-event { font-size:.875rem; color:hsl(220,10%,40%); line-height:1.6; margin-top:.5rem; }
/* ─── GALLERY GRID ─── */
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
@media(min-width:768px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){ .gallery-grid{grid-template-columns:repeat(6,1fr);} }
.gallery-thumb { aspect-ratio:1; overflow:hidden; position:relative; cursor:pointer; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gallery-thumb:hover img { transform:scale(1.1); }
.gallery-thumb-overlay { position:absolute; inset:0; background:rgba(10,17,36,0); display:flex; align-items:center; justify-content:center; transition:background .3s; }
.gallery-thumb:hover .gallery-thumb-overlay { background:rgba(10,17,36,.6); }
.gallery-thumb-overlay svg { width:2rem; height:2rem; color:#fff; opacity:0; transition:opacity .3s; }
.gallery-thumb:hover .gallery-thumb-overlay svg { opacity:1; }
/* ─── CARD GRID 3 ─── */
.card-grid-3 { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .card-grid-3{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .card-grid-3{grid-template-columns:repeat(3,1fr);} }
/* ─── CARD GRID 4 ─── */
.card-grid-4 { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .card-grid-4{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .card-grid-4{grid-template-columns:repeat(4,1fr);} }
/* ─── MEDIA CARD ─── */
.media-card { background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.06); overflow:hidden; transition:all .3s; cursor:pointer; }
.media-card:hover { box-shadow:0 8px 30px rgba(0,0,0,.12); }
.media-card-img { aspect-ratio:16/9; overflow:hidden; background:var(--navy); }
.media-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.media-card:hover .media-card-img img { transform:scale(1.05); }
.media-card-body { padding:1.25rem; }
.media-card-title { font-size:.9rem; font-weight:700; color:var(--navy); line-height:1.4; }
.media-card-meta { font-size:.7rem; color:var(--gold-dark); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:.375rem; font-family:'Inter',sans-serif; }
/* ─── FORM ─── */
.form-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:768px){ .form-grid{grid-template-columns:1fr 1fr;} }
.form-label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--navy); margin-bottom:.5rem; font-family:'Inter',sans-serif; }
.form-input { width:100%; padding:.75rem 1rem; border:1px solid var(--border); background:var(--gray); font-size:.875rem; color:var(--navy); font-family:'Inter',sans-serif; outline:none; transition:border-color .2s; }
.form-input:focus { border-color:var(--gold); }
.form-group { display:flex; flex-direction:column; }
/* ─── ANIMATIONS ─── */
@keyframes heroFade { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes kenBurns { from{transform:scale(1)} to{transform:scale(1.1)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }
@keyframes floatCard { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-10px)} }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* ─── REVEAL ─── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease-out,transform .7s ease-out; }
.reveal.visible { opacity:1; transform:translateY(0); }
/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:var(--gray)} ::-webkit-scrollbar-thumb{background:var(--navy)} ::-webkit-scrollbar-thumb:hover{background:var(--gold-dark)}
/* ─── UTILITIES ─── */
.text-center{text-align:center} .text-white{color:#fff} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem} .mb-14{margin-bottom:3.5rem} .flex{display:flex} .flex-wrap{flex-wrap:wrap} .items-center{align-items:center} .gap-4{gap:1rem} .justify-center{justify-content:center} .relative{position:relative} .w-full{width:100%}
.border-card { border-left:4px solid var(--gold); padding:2rem; background:var(--gray); }
.navy-card { background:var(--navy); padding:2.5rem; color:#fff; }
.gold-card { background:var(--gold); padding:2.5rem; color:var(--navy); }
.shadow-card { background:#fff; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,.07); }
.two-col-grid { display:grid; grid-template-columns:1fr; gap:3rem; }
@media(min-width:1024px){ .two-col-grid{grid-template-columns:1fr 1fr;} }
/* ══════════════════════════════════════════════
DARK MODE OVERRIDES
Applied when
══════════════════════════════════════════════ */
/* Base surfaces */
[data-theme="dark"] body { background:var(--bg-page); color:var(--text-primary); }
[data-theme="dark"] header { background:var(--header-bg); box-shadow:var(--header-shadow); }
[data-theme="dark"] .mobile-menu { background:hsl(220,35%,11%); border-color:var(--border); }
[data-theme="dark"] .mobile-nav-link { color:var(--text-primary); }
[data-theme="dark"] .mobile-submenu a { color:var(--text-secondary); }
/* Nav */
[data-theme="dark"] .nav-link { color:var(--text-primary); }
[data-theme="dark"] .dropdown { background:hsl(220,35%,11%); box-shadow:0 20px 60px rgba(0,0,0,.5); }
[data-theme="dark"] .dropdown a { color:var(--text-primary); }
[data-theme="dark"] .dropdown a:hover { background:hsl(220,32%,14%); color:var(--gold); }
/* Stats bar */
[data-theme="dark"] .stats-bar { background:var(--bg-surface); border-color:var(--border); }
[data-theme="dark"] .stat-item { border-color:var(--border); }
[data-theme="dark"] .stat-value { color:var(--text-primary); }
[data-theme="dark"] .stat-label { color:var(--text-secondary); }
/* Sections */
[data-theme="dark"] .section { background:var(--bg-page); }
[data-theme="dark"] .section-gray { background:var(--bg-gray); }
[data-theme="dark"] .section-title { color:var(--text-primary); }
[data-theme="dark"] .text-body { color:var(--text-secondary); }
/* About */
[data-theme="dark"] .about-img-deco2 { background:rgba(255,255,255,.03); }
/* Service cards */
[data-theme="dark"] .service-card { background:var(--card-bg); border-color:var(--card-border); box-shadow:none; }
[data-theme="dark"] .service-card:hover { box-shadow:0 8px 30px rgba(0,0,0,.3); }
[data-theme="dark"] .service-title { color:var(--text-primary); }
[data-theme="dark"] .service-desc { color:var(--text-secondary); }
/* Group cards */
[data-theme="dark"] .group-card { background:var(--bg-gray); }
[data-theme="dark"] .group-name { color:var(--text-primary); }
[data-theme="dark"] .group-sector { color:var(--text-secondary); }
/* Quote */
[data-theme="dark"] .quote-section { background:var(--bg-gray); }
[data-theme="dark"] blockquote { color:var(--text-primary); }
/* Focus items */
[data-theme="dark"] .focus-item { background:var(--bg-gray); }
[data-theme="dark"] .focus-item span { color:var(--text-primary); }
/* Location cards */
[data-theme="dark"] .location-card { background:var(--card-bg); box-shadow:none; }
[data-theme="dark"] .location-city { color:var(--text-primary); }
[data-theme="dark"] .location-addr { color:var(--text-secondary); }
/* Governance board cards */
[data-theme="dark"] .bd-list { border-color:var(--border); }
[data-theme="dark"] .bd-card { background:var(--card-bg); border-color:var(--border); }
[data-theme="dark"] .bd-card:hover { background:hsl(220,32%,16%); }
[data-theme="dark"] .bd-img-col { background:var(--bg-gray); }
[data-theme="dark"] .bd-text-col { border-color:var(--border); }
[data-theme="dark"] .bd-name { color:var(--text-primary); }
[data-theme="dark"] .bd-bio { color:var(--text-secondary); }
[data-theme="dark"] .bd-details { color:var(--text-muted); }
/* Media cards */
[data-theme="dark"] .media-card { background:var(--card-bg); box-shadow:none; }
[data-theme="dark"] .media-card-title { color:var(--text-primary); }
/* Form */
[data-theme="dark"] .form-label { color:var(--text-primary); }
[data-theme="dark"] .form-input { background:var(--bg-gray); border-color:var(--border); color:var(--text-primary); }
/* Check items */
[data-theme="dark"] .check-item { background:var(--bg-gray); }
[data-theme="dark"] .check-item span { color:var(--text-primary); }
/* Timeline */
[data-theme="dark"] .timeline-content { background:var(--bg-gray); }
[data-theme="dark"] .timeline-dot { border-color:var(--bg-page); }
[data-theme="dark"] .timeline-event { color:var(--text-secondary); }
/* Utility cards */
[data-theme="dark"] .border-card { background:var(--bg-gray); }
[data-theme="dark"] .shadow-card { background:var(--card-bg); box-shadow:none; }
/* Page hero pages (disclaimer, contact, 404) */
[data-theme="dark"] .inner-section { background:var(--bg-page); }
[data-theme="dark"] .inner-section-gray { background:var(--bg-gray); }
/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background:var(--bg-gray); }
/* ─── THEME TOGGLE BUTTON ─── */
.theme-toggle {
width:2.25rem; height:2.25rem; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:none; border:1px solid var(--border);
border-radius:50%; font-size:1rem; cursor:pointer;
color:var(--text-primary); transition:border-color .2s, background .2s;
margin-left:.5rem;
}
.theme-toggle:hover { border-color:var(--gold); background:rgba(201,168,76,.1); }