/* ============================================================
   Nakamura Trading — Theme overlay (navy + champagne gold)
   Editorial premium restyle. Loads LAST, overrides ml_index.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

/* ---------- Design tokens (re-skin the template) ---------- */
:root {
    --main-color: #b4894e;          /* champagne gold (accent / hovers) */
    --gold: #b4894e;
    --gold-soft: #c9a467;
    --gold-deep: #9a7f4d;
    --navy: #0e1c33;                /* deep navy ink */
    --navy-2: #16294a;
    --slate: #5a6680;               /* secondary text */
    --line: #e6e9ee;                /* hairline */
    --paper: #fafbfc;               /* light section bg */
    --paper-2: #f4f6f8;

    /* re-map template grays to navy ink so headings/footer turn navy */
    --main-color-222: #0e1c33;      /* headings + footer bg */
    --main-color-333: #25324d;      /* body strong */
    --main-color-555: #4a5570;
    --main-color-666: #5a6680;
    --main-color-999: #98a0b0;
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Base typography ---------- */
body, .inside p, .liright_n p, .con4conleft p, .con3txtbox span {
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    color: #2a3550;
}
body { background: #fff; }
html { scroll-behavior: smooth; }

/* ---------- Header ---------- */
.pchead {
    height: 92px !important;
    background-image: none !important;
    background-color: rgba(255,255,255,0.92) !important;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 1px 0 rgba(14,28,51,0.02);
}
.pcheader, .pcnav > li > a { height: 92px !important; }
.pcnav > li > a {
    line-height: 92px !important;
    font-family: var(--sans);
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--navy) !important;
    padding: 0 16px !important;
    position: relative;
}
.pcnav > li > a::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 26px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.pcnav > li:hover > a::after,
.pcnav li:hover .first_a::after { transform: scaleX(1); }
.pcnav > li:hover > a, .pcnav li:hover .first_a { color: var(--gold-deep) !important; }
.pc_sea i { color: var(--navy); transition: color .3s; }
.pc_sea:hover i { color: var(--gold); }

/* ---------- Brand logo (SVG wordmark) ---------- */
.pclogo .brand-logo { height: 50px; width: auto; display: block; }
.ml_mb_logo .brand-logo { height: 38px; width: auto; display: block; }
.brand-logo { direction: ltr; }
.brand-logo text { direction: ltr; unicode-bidi: isolate; }
.pclogo img, .ml_mb_logo img { display: none; }   /* hide legacy raster logo if any remains */
.foot .brand-logo { height: 46px; width: auto; margin-bottom: 22px; }

/* ---------- Hero banner + editorial overlay ---------- */
.ml_banner { position: relative; }
.ml_banner .swiper-slide { position: relative; }
.ml_banner .swiper-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(8,16,30,0.78) 0%, rgba(8,16,30,0.45) 42%, rgba(8,16,30,0.10) 70%, rgba(8,16,30,0) 100%);
    pointer-events: none;
}
.hero-copy {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: max(5%, calc((100% - 1550px)/2 + 25px));
    transform: translateY(-50%);
    max-width: 620px;
    color: #fff;
    pointer-events: none;
}
.hero-eyebrow {
    display: inline-block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201,164,103,0.5);
}
.hero-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 60px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin: 0 0 22px;
}
.hero-title i { font-style: italic; color: var(--gold-soft); }
.hero-sub {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    max-width: 480px;
    margin-bottom: 30px;
}
.hero-cta {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--gold-soft);
    padding: 15px 30px;
    border-radius: 4px;
    transition: all .3s ease;
}
.hero-cta:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }
@media (max-width: 996px) {
    .hero-copy { left: 6%; right: 6%; max-width: none; }
    .hero-title { font-size: 30px; }
    .hero-sub { display: none; }
}

/* ---------- Section titles + eyebrows ---------- */
.con_title strong {
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    font-size: clamp(30px, 3.2vw, 44px) !important;
    color: var(--navy) !important;
    letter-spacing: -0.01em;
    margin-bottom: 28px !important;
}
.con_title strong::after {
    width: 56px !important;
    height: 3px !important;
    bottom: -16px !important;
    background: var(--gold) !important;
    border-radius: 2px;
}
.con_title strong::before {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 14px;
}
.con1 .con_title strong::before { content: 'Why Shcenstar'; }
.con2 .con_title strong::before { content: 'Our Portfolio'; }
.con5 .con_title strong::before { content: 'Newsroom'; }
.con_title p { color: var(--slate) !important; font-size: 16px !important; line-height: 1.7; }

/* alternating section backgrounds for rhythm */
.con2 { background: #fff; padding: 96px 0 !important; }
.con3 { background: var(--paper) !important; padding: 96px 0 !important; }
.con4 { background: #fff; padding: 96px 0 !important; }
.con5 { background: var(--paper) !important; padding: 96px 0 !important; }

/* ---------- "Learn More" buttons → gold outline ---------- */
.more {
    width: auto !important;
    min-width: 180px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px !important;
    line-height: 1 !important;
    padding: 0 28px;
    font-family: var(--sans);
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 4px !important;
    background: transparent;
}
.more:hover {
    background: var(--gold) !important;
    color: #fff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 8px 20px rgba(180,137,78,0.28);
}

/* ---------- Products grid (con2) — gapped cards w/ persistent caption ---------- */
.con2con { max-width: 1650px; padding: 0 25px; margin: 0 auto; }
@media (min-width: 996px) {
    .con2con ul { gap: 24px; }
    .con2con ul li {
        width: calc((100% - 72px) / 4) !important;
        border-radius: 10px;
        box-shadow: 0 2px 14px rgba(14,28,51,0.06);
        border: 1px solid var(--line);
        background: #fff;
    }
    .con2con ul li img { height: 300px !important; border-radius: 10px 10px 0 0; }
}
.con2con ul li:hover { box-shadow: 0 16px 40px rgba(14,28,51,0.14); transform: translateY(-4px); transition: all .35s ease; }
.con2con ul li .con2pos {
    position: static !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #fff !important;
    color: var(--navy) !important;
    font-family: var(--serif) !important;
    font-size: 17px !important;
    font-weight: 500;
    text-align: left;
    align-items: flex-start !important;
    justify-content: center;
    padding: 18px 20px !important;
    min-height: 78px;
    border-top: 2px solid transparent;
    transition: border-color .3s, color .3s;
}
.con2con ul li:hover .con2pos { color: var(--gold-deep) !important; border-top-color: var(--gold); }
.con2 .con2con > .more { margin-top: 48px !important; }

/* ---------- Capabilities (revived con1) ---------- */
.con1 { background: var(--paper); padding: 96px 0; }
.con1con { max-width: 1650px; padding: 0 25px; margin: 0 auto; }
.con1con ul { display: flex; flex-wrap: wrap; gap: 30px; }
.con1con ul li {
    flex: 1 1 280px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: all .35s ease;
    display: flex; flex-direction: column;
}
.con1con ul li:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(14,28,51,0.12); }
.con1con ul li:hover .capicon { background: var(--navy); color: var(--gold-soft); border-color: var(--navy); }
.capicon {
    width: 66px; height: 66px;
    margin: 36px 28px 4px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(180,137,78,0.10);
    border: 1px solid rgba(180,137,78,0.30);
    color: var(--gold-deep);
    font-size: 26px;
    transition: all .35s ease;
}
.con1con ul li span {
    display: block;
    font-family: var(--sans);
    font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-deep);
    padding: 18px 28px 6px;
}
.con1con ul li strong {
    font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy);
    padding: 0 28px 14px; display: block;
}
.con1con ul li p {
    font-family: var(--sans); font-size: 14.5px; line-height: 1.75; color: var(--slate);
    padding: 0 28px 22px; flex: 1;
}
.con1con ul li .more { margin: 0 28px 28px !important; }

/* ---------- Capabilities cards (con3 reused, if kept) ---------- */
.con3con ul li { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 14px rgba(14,28,51,0.06); border: 1px solid var(--line); }
.con3imgbox img { height: 210px !important; }
.con3txtbox { background: #fff !important; }
.con3con ul li:hover .con3txtbox { background: var(--navy) !important; }
.con3txtbox p { font-family: var(--serif); font-size: 18px !important; color: var(--navy) !important; }

/* ---------- About (con4) ---------- */
.con4con { max-width: 1650px; padding: 0 25px; margin: 0 auto; gap: 0; align-items: stretch; }
.con4conleft { background: var(--navy) !important; padding: 64px 5% !important; border-radius: 14px 0 0 14px; }
.con4conleft strong {
    font-family: var(--serif) !important; font-weight: 400 !important;
    font-size: 40px !important; color: #fff !important; line-height: 1.1;
}
.con4conleft strong::after {
    content: ''; display: block; width: 56px; height: 3px; background: var(--gold); margin: 20px 0 4px; border-radius: 2px;
}
.con4conleft p { color: rgba(255,255,255,0.78) !important; font-size: 15px !important; line-height: 1.85 !important; -webkit-line-clamp: 8 !important; }
.con4conleft .more { color: var(--gold-soft) !important; border-color: var(--gold-soft) !important; }
.con4conleft .more:hover { background: var(--gold-soft) !important; color: var(--navy) !important; }
.con4conright img { height: 100% !important; min-height: 480px; object-fit: cover; border-radius: 0 14px 14px 0; }

/* ---------- News (con5) ---------- */
.con5boxleft img { border-radius: 12px; }
.con5boxright ul li {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 16px !important;
    background: #fff;
    transition: all .3s ease;
    overflow: hidden;
}
.con5boxright ul li:hover { background: #fff !important; border-color: var(--gold); box-shadow: 0 10px 28px rgba(14,28,51,0.10); transform: translateX(4px); }
.con5boxright ul li:hover .lileft_n p,
.con5boxright ul li:hover .lileft_n span,
.con5boxright ul li:hover .liright_n strong,
.con5boxright ul li:hover .liright_n p { color: inherit; }
.con5boxright ul li:hover .liright_n strong { color: var(--gold-deep); }
.lileft_n { border-right: 1px solid var(--line) !important; background: var(--paper-2); }
.lileft_n p { font-family: var(--serif); color: var(--navy) !important; font-size: 34px !important; margin-bottom: 6px !important; }
.lileft_n span { color: var(--gold-deep) !important; font-size: 13px !important; letter-spacing: 0.05em; }
.liright_n strong { font-family: var(--serif); font-weight: 500; color: var(--navy) !important; font-size: 17px !important; }
.liright_n p { color: var(--slate) !important; }

/* ---------- Footer ---------- */
.foot { background: var(--navy) !important; padding: 72px 5% 56px !important; border-top: 3px solid var(--gold); }
.footeritem strong {
    font-family: var(--sans) !important;
    font-size: 13px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-soft) !important;
    margin-bottom: 22px !important; display: block;
}
.footeritem, .footeritem span, .footeritem a, .footeritem p { color: rgba(255,255,255,0.7) !important; }
.footeritem a { transition: color .25s; }
.footeritem a:hover { color: var(--gold-soft) !important; }
.footeritem li { line-height: 1.7; }
.copy { background: #081225 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; padding: 18px !important; }
.copycon, .copycon a { color: rgba(255,255,255,0.45) !important; }
.copycon a:hover { color: var(--gold-soft) !important; }

/* ---------- Inner page banner / titles ---------- */
.inbanner::after { content:''; position:absolute; inset:0; background: rgba(14,28,51,0.55); }
.inbanner { position: relative; }
.inbanner strong { font-family: var(--serif) !important; font-size: 42px !important; position: relative; z-index: 2; }

/* ---------- Inner: About page (.aboutus1) ---------- */
.con4.aboutus1 { padding: 80px 0 !important; }
.aboutus1 .con4con { align-items: stretch; }
.aboutus1 .con4conleft { padding: 56px 4.5% !important; }
.aboutus1 .con4conleft p {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    font-size: 15.5px !important;
    line-height: 1.95 !important;
}
.aboutus1 .con4conright img { height: 100% !important; min-height: 420px; }
@media (max-width: 996px) {
    .aboutus1 .con4conleft { border-radius: 14px 14px 0 0; }
    .aboutus1 .con4conright img { border-radius: 0 0 14px 14px; min-height: 280px; }
}

/* ---------- Inner: breadcrumb ---------- */
.ml_bread_inner {
    max-width: 1650px; margin: 0 auto; padding: 22px 25px 0;
    font-family: var(--sans); font-size: 13px; color: var(--slate);
}
.ml_bread_inner a { color: var(--slate); transition: color .25s; }
.ml_bread_inner a:hover { color: var(--gold-deep); }
.ml_bread_inner span { margin: 0 8px; color: #c4ccd8; }

/* ---------- Inner: generic article body (.inside) ---------- */
.inside { max-width: 1100px !important; }
.inside p { font-size: 15.5px !important; line-height: 1.95 !important; color: #2a3550 !important; margin-bottom: 16px; }

/* ---------- Inner: News list as cards ---------- */
.Ml_temlpate_news_1 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.newitem1 {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 28px 30px; transition: all .3s ease; position: relative; overflow: hidden;
}
.newitem1::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
.newitem1:hover { border-color: var(--gold); box-shadow: 0 16px 40px rgba(14,28,51,.10); transform: translateY(-4px); }
.newitem1:hover::before { transform: scaleY(1); }
.newitem1_top { margin-bottom: 14px; }
.newitem1_top a {
    font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.4;
    color: var(--navy); display: block; margin-bottom: 10px; transition: color .25s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.newitem1:hover .newitem1_top a { color: var(--gold-deep); }
.newitem1_top span {
    font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    color: var(--gold-deep); display: inline-flex; align-items: center;
}
.newitem1_top span::before { content: '\f133'; font-family: 'FontAwesome'; margin-right: 7px; opacity: .7; font-weight: 400; }
.newitem1_bot span {
    font-family: var(--sans); font-size: 14px; line-height: 1.75; color: var(--slate);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 768px) { .Ml_temlpate_news_1 { grid-template-columns: 1fr; } }

/* ---------- Mobile bottom bar accent ---------- */
.ml_mbbot li a:hover i, .ml_mbbot li a:hover p { color: var(--gold) !important; }

/* ============================================================
   Language switcher + multilingual
   ============================================================ */
.lang-switch { position: relative; display: flex; align-items: center; margin-left: 6px; }
.lang-cur {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em;
    color: var(--navy); padding: 0 12px; height: 92px; line-height: 92px;
    transition: color .25s;
}
.lang-cur:hover { color: var(--gold-deep); }
.lang-cur .fa-globe { font-size: 14px; color: var(--gold-deep); }
.lang-cur .fa-angle-down { font-size: 12px; opacity: .6; }
.lang-menu {
    position: absolute; top: 78%; right: 0; min-width: 150px;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 16px 40px rgba(14,28,51,.14); padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .25s ease; z-index: 200;
}
.lang-switch:hover .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li {
    font-family: var(--sans); font-size: 14px; color: var(--navy);
    padding: 9px 14px; border-radius: 6px; cursor: pointer; transition: all .2s;
}
.lang-menu li:hover { background: var(--paper-2); color: var(--gold-deep); }
.lang-menu li.on { color: var(--gold-deep); font-weight: 600; }
.lang-menu li.on::after { content: " ✓"; }
/* mobile language row */
.lang-switch-mb { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 5%; border-bottom: 1px solid rgba(0,0,0,.06); }
.lang-switch-mb a {
    font-family: var(--sans); font-size: 13px; color: var(--navy);
    padding: 7px 13px; border: 1px solid var(--line); border-radius: 20px; cursor: pointer;
}
.lang-switch-mb a.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* CJK / Arabic / Devanagari font stacks */
.lang-zh, .lang-zh .con_title strong, .lang-zh .con4conleft strong, .lang-zh .hero-title,
.lang-zh .liright_n strong, .lang-zh .con2con ul li .con2pos, .lang-zh .con1con ul li strong {
    font-family: var(--sans), "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif !important;
}
.lang-ar, .lang-ar .con_title strong, .lang-ar .con4conleft strong, .lang-ar .hero-title,
.lang-ar .liright_n strong, .lang-ar .con1con ul li strong, .lang-ar .more, .lang-ar .pcnav>li>a {
    font-family: "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif !important;
}
.lang-hi, .lang-hi .con_title strong, .lang-hi .con4conleft strong, .lang-hi .hero-title,
.lang-hi .liright_n strong, .lang-hi .con1con ul li strong {
    font-family: "Noto Sans Devanagari", "Mangal", sans-serif !important;
}

/* ---------- RTL (Arabic) ---------- */
body.rtl { direction: rtl; }
body.rtl .pcheader { flex-direction: row-reverse; }
body.rtl .pcnav { flex-direction: row-reverse; }
body.rtl .hero-copy { left: auto; right: max(5%, calc((100% - 1550px)/2 + 25px)); text-align: right; }
body.rtl .hero-eyebrow { }
/* keep swipers LTR (they were initialised before dir flip) so slides/images position correctly */
body.rtl .swiper-container { direction: ltr; }
body.rtl .ml_banner .swiper-slide::after {
    background: linear-gradient(260deg, rgba(8,16,30,0.78) 0%, rgba(8,16,30,0.45) 42%, rgba(8,16,30,0.10) 70%, rgba(8,16,30,0) 100%);
}
body.rtl .con_title strong::before { text-align: center; }
body.rtl .con4conleft strong::after { margin-left: auto; }
body.rtl .lileft_n { border-right: none !important; border-left: 1px solid var(--line) !important; }
body.rtl .liright_n { padding-left: 0; padding-right: 30px; }
body.rtl .footer, body.rtl .con1con ul, body.rtl .con2con ul { direction: rtl; }
body.rtl .lang-menu { right: auto; left: 0; }
body.rtl .con4conleft { border-radius: 0 14px 14px 0; }
body.rtl .con4conright img { border-radius: 14px 0 0 14px; }