:root {
  --ink: #111827;
  --green: #071b4f;
  --mint: #2788e7;
  --lime: #ed1c24;
  --paper: #f3f0e7;
  --line: rgba(7, 27, 79, .16);
}

.site-header { border-bottom-color: rgba(255,255,255,.2); }
.site-header.scrolled { color: #071b4f; border-color: rgba(7,27,79,.12); }
.brand { width: 110px; height: 54px; }
.brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-header.scrolled .brand { height: 48px; }

.button { background: #ed1c24; color: #fff; box-shadow: 0 10px 30px rgba(237,28,36,.18); }
.button:hover { background: #075eb8; color: #fff; }
.hero {
  display: block;
  min-height: 820px;
  background-image:
    linear-gradient(90deg, rgba(4,18,53,.94) 0%, rgba(5,31,81,.82) 46%, rgba(5,31,81,.26) 78%, rgba(4,18,53,.12) 100%),
    url('./assets/kuala-lumpur-night.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-glow { display: none; }
.hero-copy { max-width: 1120px; }
.hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  white-space: normal;
  font-size: clamp(44px, 6.7vw, 92px);
  letter-spacing: -.06em;
  margin-bottom: 30px;
}
.hero h1 span {
  font-family: var(--latin);
  font-size: .68em;
  font-weight: 600;
  letter-spacing: -.045em;
  color: #fff;
}
.hero h1 em { display: block; }
.hero h1.seminar-title { font-size: clamp(40px, 5.6vw, 78px); }
.hero h1.seminar-title span { font-size: .32em; letter-spacing: .06em; color: #fff; }
.hero h1.seminar-title em { max-width: 900px; }
.hero-lead { max-width: 760px; }
.hero-facts { max-width: 760px; }
.eyebrow { color: #63b2ff; }
.hero h1 em, .section h2 em, .final-cta h2 em { color: #4aa4ff; }
.hero-visual { background: linear-gradient(155deg, #0a3f9b 0%, #061b55 58%, #7b101b 100%); border-color: rgba(255,255,255,.28); }
.orbit { border-color: rgba(237,28,36,.42); }
.petronas-hero {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -2%;
  width: 88%;
  height: 94%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.2));
}
.visual-note span, .section-number, .topic-list article>span, .steps-wrap li>span { color: #075eb8; }
.intro h2 em, .steps h2 em { color: #075eb8; }
.intro-copy>p, .section-heading>p, .steps-wrap p, details p { color: #535b6e; }
.quote { border-left-color: #ed1c24; }
.program, .faq { background: #e9e5db; }
.topic-list article:hover { background: rgba(7,94,184,.06); }
.topic-list p { color: #5d6475; }
.topic-list b { color: #76809a; }
.schedule { background: #071b4f; }
.light, .session-date strong, .contact-card a:last-child { color: #4aa4ff; }
.session { background: #0a255f; }
.session:hover { background: #0b347d; box-shadow: inset 4px 0 #ed1c24; }
.final-cta { background: linear-gradient(130deg,#06143c 0%,#071b4f 62%,#4e0b14 100%); }
.button-light { background: #ed1c24; color: #fff; }
.cta-map { -webkit-text-stroke-color: rgba(74,164,255,.16); }
.floating-cta { background: #ed1c24; color: #fff; }
.two-days .day-session { min-height: 560px; align-items: start; }
.session-agenda { list-style: none; padding: 0; margin: 28px 0 22px; counter-reset: agenda; }
.session-agenda li { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid rgba(255,255,255,.13); }
.session-agenda li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.session-agenda li::before { counter-increment: agenda; content: counter(agenda, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 600 10px var(--latin); color: #4aa4ff; }
.session-agenda b { display: block; margin-bottom: 5px; font-size: 14px; }
.session-agenda span { display: block; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.6; }
.session-fit { padding-left: 14px; border-left: 2px solid #ed1c24; color: rgba(255,255,255,.8) !important; }
.mm2h-benefit { display: block; margin-top: 70px; padding: 48px; background: #071b4f; color: #fff; }
.mm2h-benefit small { font: 600 10px var(--latin); letter-spacing: .14em; color: #4aa4ff; }
.mm2h-benefit h3 { margin: 16px 0 0; font-size: clamp(25px,3vw,42px); line-height: 1.4; }
.mm2h-benefit p { margin: 28px 0 0; color: rgba(255,255,255,.64); line-height: 1.9; }
.location { background: var(--paper); }
.location-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; }
.location-grid h2 { margin: 0 0 22px; font-size: clamp(40px,4.5vw,66px); }
.location-grid>div>p { color: #535b6e; line-height: 1.8; }
.location-grid dl { margin: 0; border-top: 1px solid var(--line); }
.location-grid dl>div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.location-grid dt { font: 700 11px var(--latin); letter-spacing: .12em; color: #075eb8; }
.location-grid dd { margin: 0; line-height: 1.75; color: #3e4658; }
.location-grid a { color: #075eb8; font-weight: 700; }
.location-grid .place-link { display: inline-block; color: #075eb8; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.contact-card span { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.7; }
.projects { background: #f3f0e7; }
.projects-heading { margin-bottom: 62px; }
.projects-heading .section-heading>div>p:last-child { max-width: 760px; }
.project-region { display: flex; align-items: center; gap: 14px; margin: 28px 0 18px; color: #075eb8; font: 600 11px var(--latin); letter-spacing: .08em; }
.project-region::after { content: ''; height: 1px; flex: 1; background: rgba(7,94,184,.22); }
.project-region strong { font: 500 13px var(--sans); letter-spacing: 0; color: #075eb8; }
.project-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.project-grid-kl .project-card { grid-column: span 2; }
.project-grid-jb .project-card { grid-column: span 3; }
.project-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(17,24,39,.12); border-radius: 0; box-shadow: none; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 14px 26px rgba(17,24,39,.1); }
.project-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dfe3ea; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none !important; transition: none !important; }
.project-grid-jb .project-card:last-child .project-image img { object-position: right center; }
.project-number { position: absolute; top: 12px; left: 12px; padding: 6px 8px; background: rgba(7,27,79,.88); color: #fff; font: 600 11px var(--latin); letter-spacing: .08em; }
.project-image small { position: absolute; right: 10px; bottom: 8px; color: rgba(255,255,255,.86); font: 500 8px var(--latin); letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.project-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 22px 22px 16px; }
.project-card-head h3 { margin: 0 0 5px; font-size: 22px; line-height: 1.25; }
.project-card-head p { margin: 0; color: #7a8190; font: 500 10px var(--latin); letter-spacing: .1em; line-height: 1.4; }
.project-card-head>b { flex: none; border: 1px solid rgba(7,94,184,.42); padding: 5px 7px; color: #075eb8; font: 600 9px var(--latin); letter-spacing: .08em; }
.project-meta { display: grid; grid-template-columns: 1.2fr 1fr 1fr; margin: 0 22px; border-top: 1px solid rgba(17,24,39,.12); border-bottom: 1px solid rgba(17,24,39,.12); }
.project-meta>div { padding: 14px 10px 14px 0; }
.project-meta>div+div { padding-left: 10px; border-left: 1px solid rgba(17,24,39,.1); }
.project-meta dt { margin-bottom: 6px; color: #7a8190; font: 600 9.5px var(--latin); letter-spacing: .08em; }
.project-meta dd { margin: 0; color: #263044; font-size: 13.5px; line-height: 1.35; }
.project-meta dd small { display: block; margin-top: 4px; color: #7a8190; font-size: 11px; line-height: 1.35; }
.project-card ul { list-style: none; margin: 0; padding: 18px 22px 12px; }
.project-card li { position: relative; margin: 0 0 9px; padding-left: 14px; color: #5d6475; font-size: 14px; line-height: 1.6; }
.project-card li::before { content: ''; position: absolute; left: 0; top: .75em; width: 7px; height: 2px; background: #075eb8; }
.project-card footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: auto; padding: 16px 22px 20px; }
.project-card footer span { color: #075eb8; font: 600 10px var(--latin); letter-spacing: .04em; }
.project-card footer small { color: #7a8190; font-size: 11px; text-align: right; }
.projects-note { margin: 34px 0 0; color: #7a8190; font-size: 12px; line-height: 1.7; }

@media(max-width:1000px) {
  .project-grid { gap: 16px; }
  .project-card-head { padding: 18px 16px 14px; }
  .project-meta { margin: 0 16px; }
  .project-card ul { padding-left: 16px; padding-right: 16px; }
  .project-card footer { padding-left: 16px; padding-right: 16px; }
}

@media(max-width:760px) {
  .project-grid, .project-grid-kl, .project-grid-jb { grid-template-columns: 1fr; }
  .project-grid-kl .project-card, .project-grid-jb .project-card { grid-column: auto; }
  .project-region { margin-top: 32px; }
  .project-card-head h3 { font-size: 21px; }
}

@media(max-width:560px) {
  .brand { width: 92px; height: 46px; }
  .hero {
    min-height: 760px;
    background-position: 62% center;
    background-image:
      linear-gradient(90deg, rgba(4,18,53,.95) 0%, rgba(5,31,81,.84) 58%, rgba(5,31,81,.42) 100%),
      url('./assets/kuala-lumpur-night.jpg');
  }
  .hero h1 { font-size: clamp(42px, 12vw, 56px); }
  .hero h1.seminar-title { font-size: clamp(35px, 10vw, 48px); }
  .hero h1.seminar-title span { font-size: .29em; letter-spacing: .025em; }
  .location-grid { grid-template-columns: 1fr; }
  .mm2h-benefit { padding: 28px 22px; }
  .two-days .day-session { min-height: auto; }
}