@charset "utf-8";

:root { --primary: #0d2942; --primary2: #173e63; --dark: #07121d; --accent: #d19a3c; --accent2: #f2d18e; --green: #1d8d4e; --bg: #f4f8fc; --card: #ffffff; --text: #182431; --muted: #627487; --line: #dde6ef; --shadow: 0 22px 55px rgba(13,41,66,.14); --radius: 24px; --max: 1240px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0px; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; line-height: 1.6; }

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; color: var(--primary); line-height: 1.12; margin: 0px 0px 0.7rem; }

p { margin: 0.35rem 0px 1rem; }

.container { width: min(92%,var(--max)); margin: auto; }

.editbar { position: sticky; top: 0px; z-index: 6000; background: rgb(11, 79, 134); color: rgb(255, 255, 255); padding: 12px 16px; font-size: 14px; }

.topbar { background: rgb(8, 22, 37); color: rgb(220, 231, 242); font-size: 14px; }

.topbar .container { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 10px 0px; }

.topbar a { color: rgb(220, 231, 242); }

header { position: sticky; top: 44px; z-index: 3000; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(13, 41, 66, 0.08); }

.nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0px; }

.brand { display: flex; align-items: center; gap: 12px; }

.brand img { width: 64px; background: rgb(255, 255, 255); padding: 4px; border-radius: 12px; box-shadow: var(--shadow); }

.brand-text b { font-size: 20px; color: var(--primary); display: block; }

.brand-text span { font-size: 12px; color: rgb(107, 123, 140); font-weight: 700; }

.nav-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.nav-links a { font-weight: 700; color: var(--primary); }

.mobile-toggle { display: none; }

.btn, .btn-outline, .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font-weight: 800; transition: 0.25s; }

.btn { background: linear-gradient(135deg,var(--accent),#a96d17); color: rgb(255, 255, 255); box-shadow: var(--shadow); }

.btn-outline { background: rgb(255, 255, 255); border: 1.5px solid var(--primary); color: var(--primary); }

.btn-dark { background: rgb(9, 23, 38); color: rgb(255, 255, 255); }

.btn:hover, .btn-outline:hover, .btn-dark:hover { transform: translateY(-2px); }

.hero { position: relative; min-height: 88vh; color: rgb(255, 255, 255); overflow: hidden; }

.hero-slide { position: absolute; inset: 0px; background-size: cover; background-position: center center; opacity: 0; transition: opacity 1s; }

.hero-slide.active { opacity: 1; }

.hero-overlay { position: absolute; inset: 0px; background: linear-gradient(rgba(7, 18, 29, 0.68), rgba(7, 18, 29, 0.72)), radial-gradient(circle at right top, rgba(209, 154, 60, 0.24), transparent 30%); z-index: 1; }

.hero-grid { position: relative; z-index: 2; min-height: 88vh; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 34px; align-items: center; padding: 88px 0px 72px; }

.kicker { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); font-weight: 700; margin-bottom: 18px; }

.hero h1 { color: rgb(255, 255, 255); font-size: clamp(40px, 6vw, 74px); max-width: 820px; }

.hero p { font-size: 18px; color: rgb(237, 244, 250); max-width: 760px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

.glass { background: rgba(255, 255, 255, 0.11); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); }

.glass h3, .glass p, .glass b, .glass span { color: rgb(255, 255, 255); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }

.stat { background: rgba(255, 255, 255, 0.1); padding: 18px; border-radius: 18px; }

.stat b { display: block; font-size: 28px; }

.hero-dots { display: flex; gap: 8px; margin-top: 18px; }

.hero-dots button { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.38); cursor: pointer; }

.hero-dots button.active { background: rgb(255, 255, 255); }

section { padding: 84px 0px; }

.section-title { max-width: 840px; margin-bottom: 28px; }

.section-title h2 { font-size: clamp(30px, 4vw, 48px); }

.section-title p { color: var(--muted); font-size: 17px; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; }

.grid-2 { grid-template-columns: repeat(2, 1fr); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }

.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }

.card h3 { font-size: 26px; }

.card p, .card li { color: rgb(95, 111, 128); }

.badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgb(239, 245, 251); color: var(--primary); font-size: 13px; font-weight: 700; margin-bottom: 12px; }

.feature-list { list-style: none; padding: 0px; margin: 0px; display: grid; gap: 12px; }

.feature-list li { position: relative; padding-left: 28px; }

.feature-list li::before { content: "✓"; position: absolute; left: 0px; top: 0px; color: var(--accent); font-weight: 900; }

.band { background: linear-gradient(135deg,var(--primary),var(--primary2)); color: rgb(255, 255, 255); }

.band h2, .band h3, .band p, .band li { color: rgb(255, 255, 255); }

.metrics .metric { text-align: center; background: rgb(255, 255, 255); border-radius: 22px; padding: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); }

.metrics b { font-size: 34px; color: var(--primary); display: block; }

.showcase { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 18px; }

.showcase img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); }

.showcase .side { display: grid; gap: 18px; }

.cards-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.process-step { position: relative; padding: 28px; border-radius: 24px; background: rgb(255, 255, 255); border: 1px solid var(--line); box-shadow: var(--shadow); }

.process-step .num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,var(--accent),#a86d17); color: rgb(255, 255, 255); font-weight: 900; margin-bottom: 14px; }

.gallery-masonry { columns: 280px 3; column-gap: 16px; }

.gallery-masonry img { width: 100%; margin: 0px 0px 16px; border-radius: 22px; box-shadow: var(--shadow); break-inside: avoid; }

.table { width: 100%; border-collapse: collapse; background: rgb(255, 255, 255); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }

.table th, .table td { padding: 14px 16px; border-bottom: 1px solid rgb(228, 235, 243); text-align: left; }

.table th { background: rgb(239, 245, 251); color: var(--primary); }

.form { display: grid; gap: 14px; }

.form input, .form select, .form textarea { width: 100%; padding: 14px 16px; border: 1px solid rgb(207, 217, 229); border-radius: 14px; background: rgb(255, 255, 255); font: inherit; }

.form textarea { min-height: 130px; resize: vertical; }

.notice { background: rgb(255, 247, 231); border: 1px solid rgb(239, 213, 156); color: rgb(123, 93, 34); padding: 14px 16px; border-radius: 14px; }

.easy-note { background: rgb(231, 245, 255); border: 1px solid rgb(183, 223, 255); color: rgb(9, 77, 123); padding: 14px 16px; border-radius: 14px; }

.cta-box { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; padding: 34px; border-radius: 28px; background: linear-gradient(135deg, rgb(13, 41, 66), rgb(31, 76, 116)); color: rgb(255, 255, 255); box-shadow: var(--shadow); }

.cta-box h2, .cta-box p { color: rgb(255, 255, 255); }

.page-hero { background: linear-gradient(rgba(7, 18, 29, 0.72), rgba(7, 18, 29, 0.72)), url("../images/gallery-2.jpg") center center / cover no-repeat; color: rgb(255, 255, 255); padding: 78px 0px 58px; }

.page-hero h1, .page-hero p { color: rgb(255, 255, 255); }

.page-hero h1 { font-size: clamp(36px, 5vw, 60px); }

footer { background: rgb(7, 19, 31); color: rgb(214, 223, 235); padding: 28px 0px 40px; }

footer .cols { display: grid; grid-template-columns: 1.1fr 0.8fr 0.8fr; gap: 24px; }

footer h4 { color: rgb(255, 255, 255); }

footer a { color: rgb(214, 223, 235); }

.small-text { font-size: 14px; color: rgb(214, 223, 235); }

.sticky-wa { position: fixed; right: 18px; bottom: 18px; z-index: 5000; background: rgb(37, 211, 102); color: rgb(255, 255, 255); border-radius: 999px; padding: 14px 18px; box-shadow: rgba(0, 0, 0, 0.22) 0px 14px 34px; font-weight: 800; }

.enquiry-popup { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 7000; padding: 18px; }

.enquiry-popup.open { display: flex; }

.popup-card { width: min(100%, 560px); background: rgb(255, 255, 255); border-radius: 24px; padding: 26px; box-shadow: var(--shadow); position: relative; }

.close-popup { position: absolute; right: 16px; top: 16px; border: none; background: rgb(238, 244, 251); width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; }

@media (max-width: 980px) {
  header { top: 44px; }
  .hero-grid, .grid-2, .grid-3, .grid-4, .showcase, .cards-strip, footer .cols { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; left: 4%; right: 4%; top: 78px; background: rgb(255, 255, 255); padding: 18px; border-radius: 18px; flex-direction: column; align-items: flex-start; box-shadow: var(--shadow); }
  .mobile-toggle { display: inline-flex; background: rgb(255, 255, 255); border: 1px solid rgb(216, 227, 238); padding: 12px 14px; border-radius: 14px; font-weight: 800; color: var(--primary); }
  .hero { min-height: auto; }
  .hero-grid { min-height: auto; padding: 80px 0px 60px; }
  .gallery-masonry { columns: 1; }
}

/* FINAL MOBILE TOP PANEL REFINEMENT */
@media (max-width: 980px){
  .topbar{
    display:none !important;
  }
  header{
    top:0 !important;
  }
  .nav{
    min-height:96px !important;
  }
  .brand img{
    width:92px !important;
  }
  .brand-text b{
    font-size:28px !important;
  }
  .brand-text span{
    font-size:15px !important;
  }
  .mobile-toggle{
    min-width:110px !important;
    min-height:56px !important;
    font-size:20px !important;
  }
  .hero-grid{
    padding-top:150px !important;
  }
  .cards-strip{
    grid-template-columns:1fr !important;
  }
}


/* FINAL V7 HEADER + MOBILE MENU + VISION COLOR FIX */
:root{
  --topbar-height: 64px;
  --header-height: 96px;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 5001;
}

.topbar .container{
  min-height: var(--topbar-height);
  align-items: center;
}

header{
  position: sticky;
  top: var(--topbar-height);
  z-index: 5000;
}

.nav{
  min-height: var(--header-height);
}

.brand img{
  width: 108px;
  max-height: 84px;
  object-fit: contain;
  padding: 2px;
  border-radius: 14px;
}

.nav-links a{
  font-size: 15px;
}

.band .card{
  background: #f7fbff;
  border-color: #d7e6f3;
}

.band .card h3,
.band .card p,
.band .card li,
.band .badge{
  color: var(--primary) !important;
}

.band .badge{
  background: #e7f0f8;
}

@media (max-width: 980px){
  :root{
    --topbar-height: 78px;
    --header-height: 112px;
  }

  .topbar{
    display:block !important;
  }

  .topbar .container{
    padding: 12px 0;
    min-height: var(--topbar-height);
  }

  header{
    top: var(--topbar-height) !important;
    box-shadow: 0 10px 28px rgba(13,41,66,.10) !important;
  }

  .nav{
    min-height: var(--header-height) !important;
    padding: 12px 0 !important;
    position: relative;
  }

  .brand{
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
  }

  .brand img{
    width: 116px !important;
    max-height: 86px !important;
    padding: 2px !important;
    box-shadow: 0 12px 28px rgba(13,41,66,.14) !important;
  }

  .brand-text b{
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  .brand-text span{
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .mobile-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 94px !important;
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
    position: relative;
    z-index: 7002;
  }

  .nav-links{
    display: none !important;
  }

  .nav-links.open{
    display: flex !important;
    position: fixed !important;
    top: calc(var(--topbar-height) + var(--header-height) - 8px) !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100vh - (var(--topbar-height) + var(--header-height)) - 24px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid rgba(13,41,66,.10);
    box-shadow: 0 18px 42px rgba(13,41,66,.18) !important;
    border-radius: 18px;
    padding: 18px !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
    z-index: 7001;
  }

  .nav-links a{
    width: 100%;
    display: block;
    padding: 14px 16px !important;
    border-radius: 12px;
    font-size: 18px !important;
    background: #f7fbff;
  }

  .nav-links a.btn{
    color: #fff;
    background: linear-gradient(135deg,var(--accent),#a96d17);
  }

  .hero-grid{
    padding-top: 110px !important;
  }

  body.menu-open{
    overflow: hidden;
  }
}