/* Hengchen Group — faithful clone of hengchen.lovable.app design system */
:root {
    --font-display: 'Space Grotesk', 'Segoe UI', -apple-system, sans-serif;
    --font-body: 'DM Sans', 'Segoe UI', -apple-system, Roboto, sans-serif;
    --background: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #5f5f5f;
    --ink-foreground: #fbfbfb;
    --muted-foreground: #767676;
    --gold: #b08d3e;
    --gold-soft: rgba(176, 141, 62, .5);
    --sand: #f4f3f0;
    --secondary: #f5f4f0;
    --hairline: rgba(26, 26, 26, .12);
    --shell: 90rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }

/* ------------------------------------------------ layout primitives */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: 1.25rem; }
.bg-background { background: var(--background); }
.bg-ink { background: var(--ink); }
.bg-sand { background: var(--sand); }
.bg-secondary { background: var(--secondary); }
.text-ink { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.text-ink-foreground { color: var(--ink-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-gold { color: var(--gold); }
.border-hairline { border-color: var(--hairline); }
.hairline-b { border-bottom: 1px solid var(--hairline); }
.hairline-t { border-top: 1px solid var(--hairline); }
.hairline-l { border-left: 1px solid var(--hairline); }
.hairline-r { border-right: 1px solid var(--hairline); }
.font-display { font-family: var(--font-display); }

.eyebrow {
    font-family: var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.4;
}
.display-xl {
    font-family: var(--font-display);
    letter-spacing: -.035em;
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    line-height: .98;
}
.display-lg {
    font-family: var(--font-display);
    letter-spacing: -.03em;
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    line-height: 1.02;
}
.rule-gold { background: linear-gradient(90deg, var(--gold), var(--gold)); }
.origin-left { transform-origin: left; }
.link-underline {
    background-image: linear-gradient(var(--gold), var(--gold));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .45s cubic-bezier(.22, 1, .36, 1);
}
.link-underline:hover { background-size: 100% 1px; }

/* gold sweep button (matches live "Explore five sectors" / "Contact the Group") */
.btn-fill {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ink);
    color: var(--ink-foreground);
    font-size: .875rem;
    font-weight: 500;
    padding: .75rem 2rem;
    white-space: nowrap;
}
.btn-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: var(--gold);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.btn-fill:hover::before { transform: scaleX(1); }
.btn-fill span { position: relative; transition: color .3s ease; }
.btn-fill:hover span { color: var(--ink); }
.btn-ghost {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    padding: .75rem 2rem;
    white-space: nowrap;
    transition: border-color .3s ease;
}
.btn-ghost:hover { border-color: var(--ink); }

/* ------------------------------------------------ header */
.hc-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    transition: box-shadow .3s ease;
}
.hc-header.scrolled { box-shadow: 0 1px 0 var(--hairline); }
.hc-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.hc-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.hc-brand img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.hc-brand__text { min-width: 0; }
.hc-brand__text strong { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-brand__text small { display: block; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-actions { display: flex; align-items: center; gap: .5rem; }
.hc-lang {
    display: none;
    align-items: center;
    border: 1px solid var(--hairline);
    border-radius: .25rem;
    overflow: hidden;
    margin-right: .25rem;
}
.hc-lang a { padding: .25rem .625rem; font-size: .75rem; font-weight: 500; letter-spacing: .02em; }
.hc-lang a.active { background: var(--ink); color: var(--ink-foreground); }
.hc-lang a:not(.active) { color: var(--muted-foreground); }
.hc-lang a:not(.active):hover { color: var(--ink); }
.hc-btn-inquiry {
    display: none;
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: .375rem 1.25rem;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    transition: background-color .3s ease, color .3s ease;
}
.hc-btn-inquiry:hover { background: var(--ink); color: var(--ink-foreground); }
.hc-burger {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: none;
    cursor: pointer;
}
.hc-burger:hover { border-color: var(--ink); }
.hc-burger span { position: relative; display: block; width: 1rem; height: .75rem; }
.hc-burger span i { position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink); }
.hc-burger span i:nth-child(1) { top: 0; }
.hc-burger span i:nth-child(2) { top: .375rem; }
.hc-burger span i:nth-child(3) { top: .75rem; }
@media (min-width: 640px) {
    .hc-lang { display: flex; }
    .hc-btn-inquiry { display: inline-flex; }
}

/* nav overlay menu (matches live full-page menu) */
.hc-menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    background: var(--background);
    padding: 6rem 0 4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.hc-menu.open { opacity: 1; visibility: visible; }
.hc-menu__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .hc-menu__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
.hc-menu-nav { border-top: 1px solid var(--hairline); }
.hc-menu-nav a {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hairline);
}
.hc-menu-nav .n {
    width: 2rem;
    flex-shrink: 0;
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    transition: color .2s ease;
}
.hc-menu-nav .t {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    transition: color .2s ease;
}
.hc-menu-nav a:hover .t, .hc-menu-nav a:hover .n,
.hc-menu-nav a.active .t, .hc-menu-nav a.active .n { color: var(--gold); }
.hc-menu-side .hc-menu-side-title { margin-bottom: 1rem; }
.hc-menu-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hc-menu-side ul { grid-template-columns: repeat(2, 1fr); } }
.hc-menu-side ul a { font-size: .875rem; color: var(--ink-soft); }
.hc-menu-side .hc-menu-contact { border-top: 1px solid var(--hairline); padding-top: 2rem; margin-top: 2.5rem; font-size: .875rem; color: var(--ink-soft); }
.hc-menu-side .hc-menu-contact a { display: block; margin-top: .5rem; }
.hc-menu-side .hc-menu-misc { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }

/* hamburger -> X */
.hc-burger span i { transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease, top .3s cubic-bezier(.22,1,.36,1); }
.hc-burger.open span i:nth-child(1) { top: .375rem; transform: rotate(45deg); }
.hc-burger.open span i:nth-child(2) { opacity: 0; }
.hc-burger.open span i:nth-child(3) { top: .375rem; transform: rotate(-45deg); }
body.menu-open { overflow: hidden; }

/* lang toggle inside the menu is mobile-only (matches live sm:hidden) */
.hc-menu-lang { display: flex; align-items: center; border: 1px solid var(--hairline); border-radius: .25rem; overflow: hidden; }
.hc-menu-lang a { padding: .25rem .625rem; font-size: .75rem; font-weight: 500; }
.hc-menu-lang a.active { background: var(--ink); color: var(--ink-foreground); }
.hc-menu-lang a:not(.active) { color: var(--muted-foreground); }
@media (min-width: 640px) { .hc-menu-lang { display: none; } }

/* ------------------------------------------------ hero */
.hc-hero { background: var(--background); }
.hc-hero__pad { padding-top: 7rem; }
.hc-hero h1 { margin-top: 1.5rem; }
.hc-hero h1 .word { display: inline-block; overflow: hidden; padding-bottom: .25rem; vertical-align: bottom; }
.hc-hero h1 .word > span { display: inline-block; }
.hc-hero__tag { margin-top: 2rem; height: 2.5rem; }
.hc-hero__tag p { font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--gold); max-width: 42rem; }
.hc-hero__row { margin-top: 2.5rem; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1024px) { .hc-hero__row { grid-template-columns: minmax(0, 1fr) auto; } }
.hc-hero__intro p { font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); max-width: 36rem; }
.hc-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hc-hero__img { margin-top: 2rem; position: relative; overflow: hidden; }
.hc-hero__img img { width: 100%; height: 46vh; min-height: 300px; object-fit: cover; }
@media (min-width: 1024px) { .hc-hero__img img { height: 68vh; } }
/* sector index strip under hero */
.hc-hero__index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 768px) { .hc-hero__index { grid-template-columns: repeat(5, 1fr); } }
.hc-hero__index a { padding: 1.5rem 1rem 1.5rem 0; }
.hc-hero__index a:hover span.t { color: var(--gold); }

/* ------------------------------------------------ marquee */
.hc-marquee { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--ink); padding: 1rem 0; }
.hc-marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: hc-scroll 30s linear infinite; }
.hc-marquee:hover .hc-marquee__track { animation-play-state: paused; }
.hc-marquee__track span { display: flex; align-items: center; gap: 3.5rem; color: var(--gold); opacity: .8; font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.hc-marquee__track span::after { content: ''; width: 4px; height: 4px; background: var(--gold-soft); transform: rotate(45deg); }
@keyframes hc-scroll { to { transform: translateX(-50%); } }

/* ------------------------------------------------ sections */
.hc-section { padding: 5rem 0; }
@media (min-width: 1024px) { .hc-section { padding: 7rem 0; } }
.hc-section .shell.pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hc-sechead { margin-bottom: 2rem; }
.hc-sechead h2 { margin-top: 1rem; }
.hc-sechead .rule { margin-top: 2rem; width: 7rem; height: 1px; }

/* group profile */
.hc-profile { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 1024px) { .hc-profile { grid-template-columns: 1.4fr 1fr; gap: 3.5rem; } }
.hc-profile__text p { color: var(--ink-soft); margin: 0 0 1.25rem; }
.hc-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-self: start; border-top: 1px solid var(--hairline); padding-top: 2rem; }
@media (min-width: 1024px) { .hc-profile__stats { grid-template-columns: 1fr; border-left: 1px solid var(--hairline); border-top: 0; padding-left: 2.5rem; padding-top: 0; } }
.hc-profile__stats .n { font-family: var(--font-display); font-size: 3rem; color: var(--gold); line-height: 1; }
.hc-profile__stats .l { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }

/* sector list (Five sectors, one supply chain) */
.hc-sector-list { }
.hc-sector-row { display: block; border-top: 1px solid var(--hairline); padding: 2rem 0; }
.hc-sector-row:first-child { border-top: 0; padding-top: 0; }
.hc-sector-row__head { display: flex; align-items: baseline; gap: 1.25rem; }
.hc-sector-row__head .n { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }
.hc-sector-row__head h3 { font-family: var(--font-display); font-size: 1.5rem; transition: color .3s ease; }
.hc-sector-row:hover h3 { color: var(--gold); }
.hc-sector-row p { margin: .75rem 0 0; max-width: 36rem; font-size: .875rem; color: var(--muted-foreground); }
.hc-sector-row__img { margin-top: 1.5rem; overflow: hidden; background: var(--ink); }
.hc-sector-row__img img { width: 100%; height: 14rem; object-fit: cover; filter: grayscale(1); transform: scale(1); transition: transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1); }
@media (min-width: 768px) { .hc-sector-row__img img { height: 18rem; } }
.hc-sector-row:hover .hc-sector-row__img img { filter: grayscale(0); transform: scale(1.05); }

/* products */
.hc-products { display: grid; grid-template-columns: 1fr; gap: 3rem 2rem; margin-top: 3rem; }
@media (min-width: 640px) { .hc-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hc-products { grid-template-columns: repeat(3, 1fr); } }
.hc-product { display: flex; flex-direction: column; }
.hc-product__img { overflow: hidden; background: var(--sand); }
.hc-product__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.hc-product:hover .hc-product__img img { transform: scale(1.05); }
.hc-product__body { border-top: 1px solid var(--hairline); margin-top: 1.25rem; padding-top: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.hc-product__body .n { color: var(--muted-foreground); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.hc-product__body h3 { font-family: var(--font-display); font-size: 1.25rem; margin-top: .75rem; transition: color .3s ease; }
.hc-product:hover .hc-product__body h3 { color: var(--gold); }
.hc-product__body p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }

/* dark stats (Scale built on our own plants) */
.hc-dark-stats { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--ink-foreground); }
.hc-dark-stats__bg { position: absolute; inset: 0; z-index: -1; }
.hc-dark-stats__bg img { width: 100%; height: 124%; object-fit: cover; transform: translateY(-12%); }
.hc-dark-stats__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,26,26,.9), rgba(26,26,26,.6), rgba(26,26,26,.25)); }
.hc-dark-stats__pad { padding: 6rem 0; position: relative; }
@media (min-width: 1024px) { .hc-dark-stats__pad { padding: 8rem 0; } }
.hc-dark-stats h2 { margin-top: 1.25rem; }
.hc-dark-stats__grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid rgba(255,255,255,.15); }
@media (min-width: 1024px) { .hc-dark-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.hc-dark-stats__cell { background: rgba(26,26,26,.7); padding: 2.5rem 1.5rem; border: 0; }
@media (min-width: 1024px) { .hc-dark-stats__cell { padding: 3rem 2rem; } }
.hc-dark-stats__cell .n { font-family: var(--font-display); font-size: 3rem; color: var(--gold); line-height: 1; }
@media (min-width: 1024px) { .hc-dark-stats__cell .n { font-size: 3.75rem; } }
.hc-dark-stats__cell .l { margin-top: .75rem; font-size: .875rem; color: rgba(255,255,255,.75); }

/* final CTA */
.hc-final-cta { background: var(--ink); color: var(--ink-foreground); }
.hc-final-cta__pad { padding: 6rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; }
@media (min-width: 1024px) { .hc-final-cta__pad { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 8rem 0; } }
.hc-final-cta h2 { max-width: 48rem; }
.hc-final-cta .btn-fill { border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--ink-foreground); }

/* ------------------------------------------------ footer */
.hc-footer { background: var(--background); }
.hc-footer__grid { display: grid; gap: 3.5rem; padding: 5rem 0; }
@media (min-width: 1024px) { .hc-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.hc-footer__brand { display: flex; align-items: center; gap: .75rem; }
.hc-footer__brand img { width: 44px; height: 44px; object-fit: contain; }
.hc-footer__brand strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.hc-footer__tagline { margin-top: 1.5rem; max-width: 20rem; font-size: .875rem; color: var(--muted-foreground); }
.hc-footer__socials { display: flex; gap: 1.25rem; margin-top: 2rem; font-size: .875rem; color: var(--ink-soft); }
.hc-footer h4 { font-family: var(--font-body); letter-spacing: .18em; text-transform: uppercase; font-size: .6875rem; font-weight: 500; color: var(--muted-foreground); }
.hc-footer ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; font-size: .875rem; color: var(--ink-soft); }
.hc-footer ul a:hover { color: var(--gold); }
.hc-footer__bottom { border-top: 1px solid var(--hairline); }
.hc-footer__bottom .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: .75rem; color: var(--muted-foreground); }

/* ------------------------------------------------ animations */
.hc-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; }
.hc-reveal.is-in { opacity: 1; transform: none; }
[data-d] { transition-delay: var(--d); }
@media (prefers-reduced-motion: reduce) { .hc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* hero entrance */
.hc-anim > * { opacity: 0; animation: hc-up .8s cubic-bezier(.22, 1, .36, 1) forwards; }
.hc-anim > *:nth-child(1) { animation-delay: .05s; }
.hc-anim > *:nth-child(2) { animation-delay: .18s; }
.hc-anim > *:nth-child(3) { animation-delay: .30s; }
.hc-anim > *:nth-child(4) { animation-delay: .42s; }
.hc-anim > *:nth-child(5) { animation-delay: .54s; }
@keyframes hc-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* h1 word-reveal (staggered lines, like live site) */
.hc-wordline { display: inline-block; overflow: hidden; padding-bottom: .25rem; vertical-align: bottom; }
.hc-wordline > span { display: inline-block; }
.hc-wordline > span { animation: hc-word .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hc-word { from { transform: translateY(110%); } to { transform: none; } }

/* counters */
.hc-counter { display: inline-block; }

/* misc page-hero for subpages */
.hc-page-hero { background: var(--background); }
.hc-page-hero__pad { padding: 8rem 0 4rem; }
.hc-page-hero h1 { margin-top: 1.5rem; }
.hc-page-hero p { margin-top: 1.5rem; max-width: 42rem; color: var(--ink-soft); font-size: 1.125rem; }


/* ================= inner page layout (About / Sectors / etc.) ================= */
.hc-inner { background: var(--background); }
.hc-inner-hero { background: var(--background); }
.hc-inner-hero .shell { padding-top: 8rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .hc-inner-hero .shell { padding-bottom: 4rem; } }
.hc-inner-hero h1 { margin-top: 1.5rem; max-width: 64rem; }
.hc-inner-hero p { margin-top: 2rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); }

.hc-inner-section { padding: 4rem 0; }
@media (min-width: 1024px) { .hc-inner-section { padding: 7rem 0; } }
.hc-inner-section + .hc-inner-section { }

.hc-split { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .hc-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 4rem; } }
.hc-split__left { }
@media (min-width: 1024px) { .hc-split__left { position: sticky; top: 7rem; align-self: flex-start; } }
.hc-split__left h2 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.06; letter-spacing: -.02em; margin-top: 1.25rem; }
@media (min-width: 640px) { .hc-split__left h2 { font-size: 2.1rem; } }
.hc-split__right { min-width: 0; }

/* hairline bordered grid (cells separated by 1px lines) */
.hc-gridline { display: grid; gap: 1px; border: 1px solid var(--hairline); background: var(--hairline); }
.hc-gridline > * { background: var(--background); min-width: 0; }
.hc-gridline--2 { }
.hc-gridline--3 { }
@media (min-width: 768px) { .hc-gridline--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .hc-gridline--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hc-gridline--3 { grid-template-columns: repeat(3, 1fr); } }
.hc-gridline--2-cols { }
@media (min-width: 768px) { .hc-gridline--2-cols { grid-template-columns: repeat(2, 1fr); } }

/* bordered list items */
.hc-listline li { border-bottom: 1px solid var(--hairline); padding-bottom: .75rem; }
.hc-listline { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }

/* culture / credentials two-col */
.hc-cols2 { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .hc-cols2 { grid-template-columns: repeat(2, 1fr); } }
.hc-cell-top { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.hc-cell-top h3 { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--gold); }
.hc-cell-top p { margin-top: 1rem; color: var(--ink-soft); }


/* ================= forms & buttons (live pattern) ================= */
.hc-label { display:block; margin-bottom:.5rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-foreground); }
.hc-input { width:100%; border:1px solid rgba(26,26,26,.2); background:var(--background); padding:.75rem 1rem; font-size:.875rem; color:var(--ink); outline:none; font-family:inherit; transition:border-color .2s ease; border-radius:0; }
.hc-input:focus { border-color: var(--gold); }
.hc-select { width:100%; border:1px solid rgba(26,26,26,.2); background:var(--background); padding:.75rem 1rem; font-size:.875rem; color:var(--ink); outline:none; font-family:inherit; transition:border-color .2s ease; }
.hc-select:focus { border-color: var(--gold); }
.hc-btn-gold { display:inline-block; border:1px solid var(--gold); background:var(--gold); padding:.75rem 2rem; font-size:.875rem; font-weight:500; color:var(--ink); transition:background-color .3s ease, color .3s ease; cursor:pointer; font-family:inherit; }
.hc-btn-gold:hover { background:transparent; color: var(--gold); }
.hc-btn-line { display:inline-block; border:1px solid rgba(26,26,26,.2); padding:.75rem 2rem; font-size:.875rem; color:var(--ink-soft); transition:border-color .3s ease, color .3s ease; }
.hc-btn-line:hover { border-color: var(--gold); color: var(--gold); }
.hc-link-gold { border-bottom:1px solid var(--gold); padding-bottom:.125rem; transition:color .3s ease; }
.hc-link-gold:hover { color: var(--gold); }

/* dark detail hero (sector pages) */
.hc-hero-dark { position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:var(--ink-foreground); }
.hc-hero-dark img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; z-index:-2; }
.hc-hero-dark::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink), rgba(26,26,26,.85), rgba(26,26,26,.3)); z-index:-1; }
.hc-hero-dark .shell { padding:10rem 0 6rem; }
@media (min-width:1024px) { .hc-hero-dark .shell { padding:12rem 0 8rem; } }
.hc-hero-dark h1 { margin-top:1.25rem; max-width:64rem; }
.hc-hero-dark p { margin-top:1.5rem; max-width:40rem; color:rgba(251,251,251,.7); font-size:1.125rem; line-height:1.6; }

/* spec table divide */
.hc-divide { border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.hc-divide > * + * { border-top:1px solid var(--hairline); }

/* pill filters (products / news) */
.hc-filter { border:1px solid var(--hairline); padding:.5rem 1.25rem; font-size:.875rem; color:var(--ink-soft); background:transparent; cursor:pointer; transition:border-color .2s ease, color .2s ease; }
.hc-filter:hover { border-color: var(--gold); color: var(--gold); }
.hc-filter.on { border-color: var(--gold); background: var(--gold); color: var(--ink); }

/* sectors listing grid */
.hc-sector-card { display:block; }
.hc-sector-card > div:first-child { overflow:hidden; background:var(--ink); }
.hc-sector-card img { width:100%; height:15rem; object-fit:cover; opacity:.9; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.hc-sector-card:hover img { transform:scale(1.05); }
.hc-sector-card:hover h2 { color:var(--gold); }
.hc-sector-card > div:nth-child(2) { margin-top:1.25rem; }
@media (min-width: 768px) { .hc-sector-list { grid-template-columns: repeat(2, 1fr) !important; } }
.hc-sector-list { display:grid !important; }

/* product / generic 2-col split (matches reference lg:grid-cols-2) */
.hc-split2 { display: grid; gap: 3.5rem; }
.hc-split2 > img { width: 100%; object-fit: cover; }
@media (min-width: 1024px) { .hc-split2 { grid-template-columns: 1fr 1fr; } }