@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
    --charcoal: #1c1f24;
    --steel: #454e57;
    --steel-light: #c7ccd1;
    --spark: #ff6620;
    --spark-dark: #d94f10;
    --off-white: #f6f5f2;
    --ink: #16181b;
}

.public-site {
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: var(--off-white);
}

.public-site h1, .public-site h2, .public-site h3, .public-site h4 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.public-site .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--spark);
}

/* ===== Navbar ===== */
.public-navbar {
    background-color: var(--charcoal);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.public-navbar .nav-link {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--steel-light) !important;
}
.public-navbar .nav-link.active,
.public-navbar .nav-link:hover {
    color: #fff !important;
}
.public-site { padding-top: 76px; }

/* ===== Hero ===== */
.hero-section {
    background: linear-gradient(135deg, var(--charcoal) 0%, #2b2f36 100%);
    color: #fff;
    position: relative;
    padding: 5rem 0 7rem;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    margin-bottom: -4rem;
}
.hero-section.p-0 { padding: 0 !important; }
.hero-fallback { padding: 5rem 0 7rem; }
.hero-section h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.05;
}

/* Hero image slider */
.hero-carousel { position: relative; }
.hero-slide-img {
    width: 100%;
    height: 620px;
    object-fit: cover;
}
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28,31,36,0.25) 0%, rgba(28,31,36,0.8) 100%);
}
.hero-caption {
    right: 15%;
    left: 15%;
    bottom: 3rem;
}
.hero-caption h1 {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
}
.hero-caption .lead { color: var(--steel-light); }
.carousel-indicators [data-bs-target] { background-color: var(--spark); }
@media (max-width: 767.98px) {
    .hero-slide-img { height: 420px; }
    .hero-caption h1 { font-size: 1.7rem; }
    .hero-caption { bottom: 1.5rem; }
}
.hero-section h1 .accent { color: var(--spark); }
.hero-section p.lead {
    color: var(--steel-light);
    font-size: 1.15rem;
    max-width: 560px;
}
.btn-spark {
    background-color: var(--spark);
    border: none;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.7rem 1.6rem;
}
.btn-spark:hover { background-color: var(--spark-dark); color: #fff; }
.btn-outline-steel {
    border: 1.5px solid var(--steel-light);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.65rem 1.5rem;
}
.btn-outline-steel:hover { background-color: rgba(255,255,255,0.1); color: #fff; }

/* ===== Section framing ===== */
.section-pad { padding: 5rem 0; position: relative; }
.section-dark {
    background: var(--charcoal);
    color: #fff;
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
    padding: 6rem 0 5rem;
    margin-top: -3rem;
}
.section-dark .steel-light { color: var(--steel-light); }

/* ===== Service cards ===== */
.service-card {
    background: #fff;
    border-radius: 4px;
    border-left: 4px solid var(--spark);
    padding: 1.75rem;
    height: 100%;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transition: transform .15s ease;
}
.service-card:hover { transform: translateY(-4px); }
.service-card .service-icon {
    font-size: 1.6rem;
    color: var(--spark);
    margin-bottom: 0.75rem;
}
.service-card h4 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}
.service-card p { color: #555; font-size: 0.92rem; margin-bottom: 0; }

/* ===== Why choose us ===== */
.reason-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}
.reason-number {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--spark);
    font-size: 1.4rem;
    font-weight: 600;
    min-width: 2.2rem;
}

/* ===== Portfolio / gallery preview ===== */
.portfolio-card {
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}
.portfolio-card .cap {
    padding: 0.85rem 1rem;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* ===== Process steps (about page) ===== */
.process-step { position: relative; padding-left: 3.5rem; margin-bottom: 2rem; }
.process-step .step-num {
    position: absolute;
    left: 0; top: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--spark);
    border: 2px solid var(--spark);
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* ===== CTA band ===== */
.cta-band {
    background: linear-gradient(120deg, var(--spark) 0%, var(--spark-dark) 100%);
    color: #fff;
    padding: 3rem 0;
}
.cta-band h3 { font-weight: 700; }

/* ===== Footer ===== */
.public-footer {
    background: var(--charcoal);
    color: #fff;
}
.public-footer a:hover { color: #fff !important; }

@media (max-width: 767.98px) {
    .hero-section { padding: 3.5rem 0 5rem; clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
    .hero-section h1 { font-size: 2.1rem; }
    .section-dark { clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%); padding: 4rem 0 3rem; }
}

/* ===== Bilingual copy (English / Bahasa Malaysia) ===== */
.lang-my {
    display: block;
    font-size: 0.82em;
    opacity: 0.72;
    font-style: italic;
    font-family: 'Inter', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0.15rem;
}
h1 .lang-my, h2 .lang-my { font-size: 0.42em; margin-top: 0.4rem; }
.nav-link .lang-my, .btn .lang-my { display: inline; font-size: 0.78em; opacity: 0.65; }