:root {
    --ntu-blue: #0798d7;
    --ntu-blue-strong: #008dcc;
    --ntu-blue-soft: #dceff7;
    --ntu-deep: #4f5961;
    --ntu-ink: #30383e;
    --ntu-steel: #737c83;
    --ntu-metal: #a7a9ac;
    --ntu-light: #ececec;
    --ntu-light-2: #f7f8f9;
    --ntu-white: #ffffff;
    --ntu-border: #d8dde0;
    --ntu-shadow: 0 22px 54px rgba(60, 73, 84, .12);
    --shell: min(1390px, calc(100% - 72px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ntu-ink);
    background: var(--ntu-light-2);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.site-shell { width: var(--shell); margin-inline: auto; }
.skip-link {
    position: fixed; left: 16px; top: -100px; z-index: 9999;
    background: #fff; color: #000; padding: 12px 18px; border: 2px solid var(--ntu-blue);
}
.skip-link:focus { top: 16px; }
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.topbar {
    background: #f4f5f6;
    border-bottom: 1px solid var(--ntu-border);
    font-size: 13px;
    color: #5e6870;
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; min-height: 42px; gap:24px; }
.topbar-contact { display:flex; align-items:center; gap:28px; min-width:0; }
.topbar-contact a:hover { color: var(--ntu-blue); }
.language-switcher { display:flex; gap:8px; align-items:center; font-weight:700; }
.language-switcher a.active { color: var(--ntu-blue); }

.site-header {
    background:#fff;
    border-bottom:1px solid #e1e4e7;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 16px rgba(79,89,97,.05);
}
.header-inner { min-height: 86px; display:flex; align-items:center; gap:36px; }
.brand { flex:0 0 auto; display:block; width:300px; }
.brand img, .custom-logo { max-height:58px; width:auto; }
.custom-logo-link { display:block; }
.primary-nav { margin-left:auto; display:flex; align-items:center; gap:30px; font-size:13px; font-weight:700; text-transform:uppercase; }
.primary-nav a { padding:32px 0 27px; border-bottom:3px solid transparent; white-space:nowrap; color:#3f4c55; }
.primary-nav a:hover, .primary-nav a.active { color:var(--ntu-blue); border-bottom-color:var(--ntu-blue); }
.menu-toggle { display:none; margin-left:auto; border:0; background:transparent; padding:10px; cursor:pointer; }
.menu-toggle span:not(.screen-reader-text) { display:block; width:26px; height:2px; margin:5px 0; background:var(--ntu-ink); }

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f4f5f6 100%);
    border-bottom: 1px solid #dce1e4;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 66% 50%, transparent 0 43%, rgba(7,152,215,.09) 43.2% 43.7%, transparent 44%),
        radial-gradient(ellipse at 69% 52%, transparent 0 49%, rgba(167,169,172,.30) 49.1% 49.5%, transparent 49.8%);
}
.hero::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -170px;
    width: 70%;
    height: 270px;
    background: var(--ntu-blue);
    border-top-left-radius: 70% 100%;
    pointer-events: none;
}
.hero-image {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -2%;
    bottom: 0;
    width: 58%;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.80) 8%, rgba(255,255,255,.20) 23%, rgba(255,255,255,0) 40%),
        url("../images/hero-process.jpg");
    background-size: cover;
    background-position: center;
    border-top-left-radius: 58% 100%;
    border-bottom-left-radius: 42% 82%;
    overflow: hidden;
    box-shadow: inset 2px 0 0 rgba(7,152,215,.45);
}
.hero-image::before {
    content: "";
    position: absolute;
    inset: -8px 0 0 -13px;
    border-top-left-radius: 58% 100%;
    border-left: 10px solid var(--ntu-blue);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    z-index: 3;
    min-height: 570px;
    display: flex;
    align-items: center;
}
.hero-copy {
    width: min(625px, 47%);
    padding: 74px 0 82px;
}
.eyebrow {
    color: var(--ntu-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.eyebrow.light { color: #dceff7; }
.hero h1 {
    font-size: clamp(48px, 4.25vw, 70px);
    line-height: 1.03;
    margin: 0 0 25px;
    letter-spacing: -.045em;
    color: #222c33;
    font-weight: 700;
}
.hero h1 span,
.hero h1 strong { display: block; white-space: nowrap; }
.hero h1 strong { color: var(--ntu-blue); font-weight: 700; }
.hero h2 {
    font-size: 21px;
    color: #7a8085;
    margin: 0 0 18px;
    font-weight: 600;
}
.hero-copy > p:not(.eyebrow) {
    max-width: 585px;
    margin: 0;
    font-size: 17px;
    color: #3e484f;
}
.hero-actions { display: flex; gap: 16px; margin-top: 32px; }
.button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 25px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: .22s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: var(--ntu-shadow); }
.button-primary { background: var(--ntu-blue); color: #fff; }
.button-outline { border-color: #77bfe1; color: var(--ntu-blue-strong); background: #fff; }
.button-light { background: #fff; color: var(--ntu-deep); }

.capability-strip { border-block:1px solid #d9dde0; background:#fff; }
.capability-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.capability-item {
    min-height:112px;
    padding:25px 30px;
    display:flex;
    align-items:center;
    gap:20px;
    border-right:1px solid #dfe3e6;
}
.capability-item:last-child { border-right:0; }
.capability-item h3 { font-size:15px; margin:0 0 4px; color:#26323a; }
.capability-item p { font-size:13px; margin:0; color:#6c757d; }
.line-icon, .solution-icon, .industry-icon, .smart-icon {
    width:54px; height:54px; flex:0 0 54px; border:2px solid var(--ntu-blue); border-radius:50%;
    position:relative; display:inline-grid; place-items:center; color:var(--ntu-blue);
    background:#fff;
}
.line-icon::before, .solution-icon::before, .industry-icon::before, .smart-icon::before { font-size:26px; line-height:1; }
.icon-valve::before, .icon-gear::before, .icon-cog::before { content:"⚙"; }
.icon-monitor::before { content:"▣"; }
.icon-people::before, .icon-bottle::before { content:"♙"; }
.icon-factory::before { content:"▥"; }
.icon-sensor::before { content:"⌾"; }
.icon-crane::before, .icon-robot::before { content:"⌁"; }
.icon-tools::before { content:"⚒"; }
.icon-drop::before { content:"◉"; }
.icon-network::before { content:"⌘"; }
.icon-brain::before { content:"✣"; }

.section { padding:78px 0; }
.section-heading { margin-bottom:34px; }
.section-heading.centered { text-align:center; }
.section-heading h2 {
    margin:0;
    color:#1f2a31;
    font-size:clamp(30px,2.7vw,44px);
    line-height:1.14;
    letter-spacing:-.03em;
}
.section-heading h2 strong { color:var(--ntu-blue); font-weight:700; }
.heading-rule { display:block; width:44px; height:3px; background:var(--ntu-blue); margin:16px auto 0; }

.solutions-section { background:#f8f8f8; }
.solution-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.solution-card {
    border:1px solid #d8dde0;
    padding:30px 28px 28px;
    min-height:300px;
    background:#fff;
    transition:.22s ease;
    box-shadow: 0 6px 18px rgba(79,89,97,.04);
}
.solution-card:hover { transform:translateY(-5px); border-color:#a7d6e8; box-shadow:var(--ntu-shadow); }
.solution-card h3 { font-size:20px; margin:20px 0 10px; color:#1e2830; }
.solution-card p { font-size:14px; color:#616b72; margin:0 0 22px; }
.solution-card a { color:var(--ntu-blue); font-size:13px; font-weight:800; }

.industries-section { padding-top:12px; background:#fff; }
.industry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.industry-card {
    position:relative;
    border:1px solid #dbe0e3;
    background:#fff;
    overflow:hidden;
    box-shadow: 0 8px 22px rgba(79,89,97,.04);
}
.industry-card > img { width:100%; aspect-ratio:1.9/1; object-fit:cover; filter:saturate(.9) contrast(1.03); transition:.3s ease; }
.industry-card:hover > img { transform:scale(1.035); }
.industry-caption { position:relative; min-height:72px; padding:18px 54px 16px 72px; display:flex; align-items:center; background:#fff; }
.industry-caption h3 { margin:0; font-size:16px; color:#223039; }
.industry-caption > a {
    position:absolute; right:15px; width:34px; height:34px; display:grid; place-items:center;
    border:1px solid var(--ntu-blue); color:var(--ntu-blue); background:#fff;
}
.industry-icon { width:48px; height:48px; position:absolute; left:14px; top:-25px; background:#fff; }

.partners-section { padding:28px 0 0; text-align:center; background:#fff; }
.partners-section h2 { margin:0 0 20px; font-size:24px; color:#27343c; }
.partners-section h2 strong { color:var(--ntu-blue); }
.partner-strip {
    border-block:1px solid #dce1e4;
    display:grid;
    grid-template-columns:repeat(12,1fr);
    overflow:auto;
    background:#f6f7f8;
}
.partner-strip span {
    min-width:120px;
    padding:22px 14px;
    font-size:15px;
    font-weight:800;
    color:#55626b;
    border-right:1px solid #e1e5e8;
    display:grid;
    place-items:center;
    white-space:nowrap;
}

.smart-section {
    position: relative;
    overflow: hidden;
    color: var(--ntu-ink);
    background: linear-gradient(90deg, #ececec 0%, #f7f8f9 49%, #dceff7 100%);
    border-block: 1px solid #d7dde1;
}
.smart-image {
    position: absolute;
    inset: 0 0 0 73%;
    background:
        linear-gradient(90deg, rgba(220,239,247,.95) 0%, rgba(220,239,247,.20) 40%),
        url("../images/smart-control.jpg") center / cover;
}
.smart-section::before {
    content: "";
    position: absolute;
    left: -8%;
    bottom: -110px;
    width: 66%;
    height: 190px;
    background: var(--ntu-blue);
    border-top-right-radius: 70% 100%;
    opacity: .96;
}
.smart-inner {
    position: relative;
    z-index: 2;
    min-height: 340px;
    display: grid;
    grid-template-columns: 1.15fr 2fr;
    gap: 52px;
    align-items: center;
}
.smart-intro { padding: 58px 0 78px; max-width: 420px; }
.smart-intro h2 { margin: 0 0 15px; font-size: 40px; line-height: 1.08; color: #27323a; }
.smart-intro h2 strong { color: var(--ntu-blue); }
.smart-intro p:last-child { color: #535e66; font-size: 15px; }
.smart-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-right: 170px; }
.smart-grid article {
    min-height: 162px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-left: 1px solid rgba(115,124,131,.24);
}
.smart-grid h3 { font-size: 15px; margin: 13px 0 0; color: #253139; }
.smart-icon { border-color: var(--ntu-blue); color: var(--ntu-blue); background: #fff; }

.process-section { padding-block:60px; background:#fff; }
.process-flow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.process-step { text-align:center; width:135px; }
.process-step span {
    width:58px; height:58px; display:grid; place-items:center; margin:0 auto 12px;
    border:1px solid #bcd4df; border-radius:50%; color:var(--ntu-blue); font-weight:800; background:#fff;
}
.process-step h3 { font-size:12px; line-height:1.35; margin:0; color:#445159; }
.process-flow b { color:var(--ntu-blue); font-size:28px; font-weight:400; }

.projects-section { background:#f3f4f5; }
.project-layout { display:grid; grid-template-columns:1.1fr 2.5fr .95fr; gap:26px; align-items:center; }
.project-copy h2 { font-size:30px; line-height:1.1; margin:0 0 12px; color:#243038; }
.project-copy p:not(.eyebrow) { color:#657179; font-size:14px; }
.project-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.project-gallery img { width:100%; aspect-ratio:1.45/1; object-fit:cover; border:1px solid #dce1e4; background:#fff; }
.project-services { list-style:none; padding:0; margin:0; }
.project-services li { padding:12px 0 12px 34px; border-bottom:1px solid #d9dfe3; position:relative; font-size:14px; color:#48555e; }
.project-services li::before {
    content:"✓";
    position:absolute; left:0; width:24px; height:24px;
    border:1px solid var(--ntu-blue); border-radius:50%; display:grid; place-items:center;
    color:var(--ntu-blue); font-size:12px; background:#fff;
}

.contact-cta {
    background: linear-gradient(90deg, #4f5961 0%, #6b7379 40%, #1398d4 100%);
    color:#fff;
    padding:50px 0;
}
.contact-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.contact-cta h2 { margin:0; max-width:900px; font-size:30px; line-height:1.2; }

.site-footer { background:#626a71; color:#fff; padding:56px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:65px; }
.footer-brand img { width:240px; }
.footer-brand p { color:#dceff7; max-width:280px; }
.site-footer h2 { font-size:16px; margin:0 0 18px; }
.site-footer p, .site-footer a { color:#edf3f6; font-size:14px; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.footer-links a:hover, .site-footer a:hover { color:#bfe6f5; }
.footer-bottom {
    margin-top:45px;
    padding:18px 0;
    border-top:1px solid rgba(255,255,255,.18);
    display:flex;
    justify-content:space-between;
    gap:24px;
    color:#dde8ee;
    font-size:12px;
}

.content-main { min-height:60vh; padding:80px 0; background:#fff; }
.content-shell.narrow { max-width:920px; }
.content-header h1 { font-size:52px; line-height:1.05; }
.entry-content { font-size:18px; }
.entry-content h2 { margin-top:2em; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.post-card { border:1px solid #dce3e7; padding:22px; background:#fff; }
.post-card h2 { font-size:24px; }
.single-hero { width:100%; margin:25px 0; }

@media (max-width: 1280px) {
    :root { --shell:min(100% - 48px, 1240px); }
    .hero-image { inset:0 0 0 51%; }
    .smart-grid { margin-right:100px; }
}

@media (max-width: 1180px) {
    :root { --shell:min(100% - 40px, 1120px); }
    .topbar-address { display:none; }
    .brand { width:240px; }
    .primary-nav { gap:18px; font-size:12px; }
    .hero-inner { min-height:560px; }
    .hero-copy { width:min(560px, 48%); }
    .hero-image { inset:0 0 0 50%; }
    .smart-grid { margin-right:40px; }
    .project-layout { grid-template-columns:1fr 2fr; }
    .project-services { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
}

@media (max-width: 900px) {
    .topbar-contact { gap:16px; }
    .header-inner { min-height:72px; }
    .brand { width:230px; }
    .menu-toggle { display:block; }
    .primary-nav {
        position:absolute; left:0; right:0; top:100%; background:#fff; display:none; flex-direction:column;
        align-items:stretch; gap:0; padding:10px 22px 22px; border-bottom:1px solid #dfe5e8; box-shadow:var(--ntu-shadow);
    }
    .primary-nav.open { display:flex; }
    .primary-nav a { padding:14px 0; border-bottom:1px solid #edf1f3; }

    .hero::before { width:75%; height:140px; top:-85px; }
    .hero::after { left:32%; width:52%; height:124%; border-width:32px; opacity:.55; }
    .hero-image {
        inset:0;
        opacity:.22;
        border-radius:0;
        background-image:linear-gradient(90deg, rgba(236,236,236,.94) 0%, rgba(236,236,236,.88) 34%, rgba(236,236,236,.55) 100%), url("../images/hero-process.jpg");
    }
    .hero-copy { width:82%; }
    .capability-grid, .solution-grid, .industry-grid { grid-template-columns:repeat(2,1fr); }
    .capability-item:nth-child(2) { border-right:0; }
    .capability-item:nth-child(-n+2) { border-bottom:1px solid #dfe5e8; }
    .smart-inner { grid-template-columns:1fr; gap:0; }
    .smart-image { inset:0; opacity:.12; }
    .smart-intro { max-width:620px; padding-bottom:18px; }
    .smart-grid { margin:0 0 48px; }
    .process-flow { overflow:auto; justify-content:flex-start; padding-bottom:12px; }
    .process-step { flex:0 0 125px; }
    .project-layout { grid-template-columns:1fr; }
    .project-services { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .footer-brand { grid-column:1/-1; }
}

@media (max-width: 620px) {
    :root { --shell:calc(100% - 28px); }
    .topbar-inner { min-height:36px; }
    .topbar-contact a:nth-child(2), .topbar-address { display:none; }
    .header-inner { gap:12px; }
    .brand { width:200px; }
    .hero-inner { min-height:560px; align-items:flex-end; }
    .hero::before { width:88%; height:120px; top:-72px; }
    .hero::after { display:none; }
    .hero-image { background-position:62% center; opacity:.22; }
    .hero-copy { width:100%; padding:92px 0 44px; }
    .hero h1 { font-size:46px; }
    .hero h2 { font-size:17px; }
    .hero-copy > p:not(.eyebrow) { font-size:15px; }
    .hero-actions { flex-direction:column; align-items:stretch; }
    .capability-grid, .solution-grid, .industry-grid, .smart-grid { grid-template-columns:1fr; }
    .capability-item { border-right:0; border-bottom:1px solid #dfe5e8; }
    .section { padding:54px 0; }
    .solution-card { min-height:auto; }
    .smart-grid article { border-left:0; border-top:1px solid rgba(123,132,139,.25); min-height:110px; }
    .project-gallery { grid-template-columns:1fr; }
    .project-services { grid-template-columns:1fr; }
    .contact-cta-inner { flex-direction:column; align-items:flex-start; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-brand { grid-column:auto; }
    .footer-bottom { flex-direction:column; }
    .post-grid { grid-template-columns:1fr; }
}


/* NTU Process Horizon 1.2 refinements */
.solutions-section { background: #f8f9fa; }
.industries-section { background: #ffffff; }
.partner-strip span { color: #52616b; }
.site-footer {
    background: #063653;
    border-top: 5px solid var(--ntu-blue);
}
.footer-bottom { background: rgba(0,0,0,.08); padding-inline: 0; }

@media (max-width: 1180px) {
    .hero h1 span,
    .hero h1 strong { white-space: normal; }
    .hero-image { width: 56%; }
    .hero-copy { width: 48%; }
}
@media (max-width: 900px) {
    .hero::after { display: none; }
    .hero-image {
        inset: 0;
        width: 100%;
        opacity: .25;
        border-radius: 0;
        background-image:
            linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 48%, rgba(255,255,255,.62) 100%),
            url("../images/hero-process.jpg");
    }
    .hero-image::before { display: none; }
    .hero-copy { width: 82%; }
}
@media (max-width: 620px) {
    .hero-copy { width: 100%; }
    .hero h1 span,
    .hero h1 strong { white-space: normal; }
}

/* =========================================================
   NTU Process Horizon 1.2.1 — Image Alignment Fix
   ========================================================= */

/* Keep the hero composition visually centered instead of pushed to the right. */
.hero-image {
    right: 0 !important;
    width: 55% !important;
    background-position: 38% center !important;
}

.hero-copy {
    width: min(600px, 45%) !important;
}

/* Give the Smart Industry image more room and move the focal point inward. */
.smart-image {
    inset: 0 0 0 68% !important;
    background-position: 42% center !important;
}

.smart-grid {
    margin-right: 110px !important;
}

/* Consistent, centered crop for all visual cards. */
.industry-card > img,
.project-gallery img {
    object-fit: cover !important;
    object-position: center center !important;
}

/* Fine-tune individual industry focal points. */
.industry-card:nth-child(1) > img { object-position: 48% center !important; }
.industry-card:nth-child(2) > img { object-position: 50% center !important; }
.industry-card:nth-child(3) > img { object-position: 46% center !important; }
.industry-card:nth-child(4) > img { object-position: 44% center !important; }

/* Project crops stay centered and no longer lean to the right. */
.project-gallery img:nth-child(1) { object-position: 47% center !important; }
.project-gallery img:nth-child(2) { object-position: 50% center !important; }
.project-gallery img:nth-child(3) { object-position: 45% center !important; }

@media (max-width: 1280px) {
    .hero-image {
        right: 0 !important;
        width: 54% !important;
        background-position: 40% center !important;
        inset: 0 0 0 auto !important;
    }
    .hero-copy { width: 46% !important; }
    .smart-grid { margin-right: 70px !important; }
}

@media (max-width: 1180px) {
    .hero-image {
        right: 0 !important;
        width: 53% !important;
        background-position: 42% center !important;
        inset: 0 0 0 auto !important;
    }
    .hero-copy { width: 46% !important; }
    .smart-image { inset: 0 0 0 66% !important; }
    .smart-grid { margin-right: 28px !important; }
}

@media (max-width: 900px) {
    .hero-image {
        inset: 0 !important;
        width: 100% !important;
        right: auto !important;
        background-position: 58% center !important;
    }
    .hero-copy { width: 82% !important; }
    .smart-image {
        inset: 0 !important;
        background-position: 56% center !important;
    }
    .smart-grid { margin: 0 0 48px !important; }
}

@media (max-width: 620px) {
    .hero-image { background-position: 62% center !important; }
    .hero-copy { width: 100% !important; }
    .industry-card > img,
    .project-gallery img { object-position: center center !important; }
}