/* ══════════════════════════════════════════════════════════════════════════════
   The Plush Maker — Unified Stylesheet
   ══════════════════════════════════════════════════════════════════════════════
   Covers: about-us, our-factory, and future page migrations.
   
   SECTIONS:
   1. Design Tokens / CSS Variables
   2. Reset & Base
   3. Header & Navigation
   4. Buttons
   5. Typography
   6. Sections / Layout
   7. Breadcrumb
   8. Hero Sections (About + Factory)
   9. Story Section
   10. Timeline
   11. Project Manager Block
   12. Brand Story Narrative
   13. Stats (Dark Section)
   14. Certifications
   15. Product Scope / What We Make
   16. Vision & Mission
   17. Values
   18. Workshop / Plant Display
   19. Locations
   20. Why Choose Us / Selling Points
   21. Location Card (Find Us)
   22. Video Card (Factory Tour)
   23. Why Our Factory (4 Reasons)
   24. Factory Tour Cards
   25. Production Line (Numbered Steps)
   26. Equipment
   27. Eco / Environmentally Friendly
   28. Badges / Compliance
   29. CTA Strip
   30. Quote / Contact Form
   31. Footer
   32. Modal (Quote Popup)
   33. Upload Drop-Zone
   34. Responsive
   ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS / CSS VARIABLES
   Change colors, fonts, spacing here to rebrand the whole site.
══════════════════════════════════════════════════════════════════════════════ */
:root {
    --txt: #1A1814;
    --mut: #6E665A;
    --brd: #E8DDC8;
    --acc: #B5471F;
    --acc-d: #8E3415;
    --acc-l: #D4A24C;
    --warm: #D4A24C;
    --pink: #B5471F;
    --cream: #fff6e6;
    --tint: #F5EFE3;
    --tint2: #FFF6E6;
    --bg: #fff;
    --navy: #1f2b3a;
    --primary: var(--acc);
    --secondary: #2F4A3D;
    --accent: var(--acc-l);
}


/* ══════════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--txt);
    background: var(--bg);
    line-height: 1.65;
}
.wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
a { color: var(--acc); }
img, svg { max-width: 100%; display: block; }

/* Hide Chinese-only footer elements */
.footer-cn, [data-cn-copy], .copyright-cn {
    display: none !important;
    visibility: hidden !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   3. HEADER & NAVIGATION
══════════════════════════════════════════════════════════════════════════════ */
header.site {
    background: rgb(255 255 255 / .92);
    border-bottom: 1px solid var(--brd);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(6px);
}
header.site .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.logo {
    font-family: Georgia, 'Playfair Display', 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.34rem;
    color: var(--navy);
    letter-spacing: .003em;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.logo .logo-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; }
.logo .the { font-size: .78em; font-style: italic; margin-right: 3px; color: #5a6678; }

/* Main nav */
nav.main ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 22px; flex-wrap: wrap; }
nav.main a {
    text-decoration: none;
    color: var(--txt);
    font-weight: 500;
    font-size: .95rem;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: .2s;
}
nav.main a:hover, nav.main a.active { color: var(--acc); border-color: var(--acc); }

/* Dropdown submenus */
nav.main li.has-sub { position: relative; }
nav.main li.has-sub > a .caret {
    font-size: .72em;
    margin-left: 4px;
    color: var(--acc);
    display: inline-block;
    transform: translateY(-1px);
}
nav.main li.has-sub > ul.sub {
    position: absolute;
    top: calc(100% + 10px);
    left: -14px;
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 14px;
    padding: 8px 0;
    min-width: 260px;
    display: none;
    box-shadow: 0 20px 40px -16px rgb(181 71 31 / .3);
    z-index: 100;
    list-style: none;
    margin: 0;
}
nav.main li.has-sub > ul.sub::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 10px;
}
nav.main li.has-sub:hover > ul.sub,
nav.main li.has-sub:focus-within > ul.sub { display: block; }
nav.main li.has-sub > ul.sub li { display: block; margin: 0; padding: 0; }
nav.main li.has-sub > ul.sub a {
    display: block;
    padding: 8px 22px;
    font-size: .9rem;
    font-weight: 500;
    border: none;
    color: var(--txt);
    white-space: nowrap;
}
nav.main li.has-sub > ul.sub a:hover { color: var(--acc); background: var(--tint); border: none; }


/* ══════════════════════════════════════════════════════════════════════════════
   4. BUTTONS
══════════════════════════════════════════════════════════════════════════════ */
.btn {
    background: var(--acc);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: .95rem;
    box-shadow: 0 6px 16px -6px rgb(181 71 31 / .55);
    transition: .2s;
}
.btn:hover { background: var(--acc-d); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--acc); border: 1.5px solid var(--acc); box-shadow: none; }
.btn-outline:hover { background: var(--tint2); color: var(--acc-d); }


/* ══════════════════════════════════════════════════════════════════════════════
   5. TYPOGRAPHY
══════════════════════════════════════════════════════════════════════════════ */
main { padding: 0; }
h1 { font-size: 2.6rem; margin: 0 0 14px; line-height: 1.15; letter-spacing: -.02em; }
h1 em { font-style: normal; color: var(--primary); }
h2 { font-size: 1.9rem; margin: 0 0 10px; line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; margin: 0 0 8px; }
p { margin: 0 0 14px; }
.lede { font-size: 1.15rem; color: var(--mut); }
.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 0 0 8px;
    margin-bottom: 10px;
    position: relative;
}
.eyebrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--accent);
}


/* ══════════════════════════════════════════════════════════════════════════════
   6. SECTIONS / LAYOUT
══════════════════════════════════════════════════════════════════════════════ */
section { padding: 72px 0; position: relative; overflow: hidden; }
section.tint { background: var(--tint); }
section.cream { background: var(--cream); }
section.dark { background-color: var(--secondary); color: #fff; position: relative; }
section.dark.dark-charcoal { background-color: #1A1814; }
section.dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(0 0 0 / .18) 0%, transparent 55%, rgb(0 0 0 / .22) 100%);
    pointer-events: none;
}
section.dark > * { position: relative; z-index: 1; }
section.dark h2, section.dark p, section.dark h3 { color: #fff !important; }
section.dark .eyebrow { color: var(--accent); background: transparent; }
section.dark .eyebrow::after { background: var(--accent); }


/* ══════════════════════════════════════════════════════════════════════════════
   7. BREADCRUMB
══════════════════════════════════════════════════════════════════════════════ */
.breadcrumb { padding: 18px 0 0; font-size: .85rem; color: var(--mut); }
.breadcrumb a { color: var(--mut); text-decoration: none; }
.breadcrumb a:hover { color: var(--acc); }


/* ══════════════════════════════════════════════════════════════════════════════
   8. HERO SECTIONS
══════════════════════════════════════════════════════════════════════════════ */

/* --- Shared hero background pattern --- */
.about-hero,
.fac-hero {
    padding: 60px 0 110px;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgb(181 71 31 / .28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 90%, rgb(181 71 31 / .22) 0%, transparent 60%),
        linear-gradient(180deg, #FAF6EF 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}
.about-hero::before,
.fac-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .45;
    background-image: radial-gradient(circle, rgb(181 71 31 / .18) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    pointer-events: none;
}
.about-hero .wrap,
.fac-hero .wrap { position: relative; z-index: 1; }

.about-hero .grid,
.fac-hero .grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* About hero specific */
.about-hero .tagline { display: flex; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--brd); flex-wrap: wrap; }
.about-hero .tagline span { font-weight: 700; color: var(--acc); font-size: 1.05rem; letter-spacing: .05em; }
.about-hero .tagline span::before { content: "●"; margin-right: 8px; color: var(--pink); }

/* Hero art (shared) */
.hero-art {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 24px;
    background: linear-gradient(135deg, #F5EFE3 0%, #FFF6E6 100%);
    box-shadow: 0 24px 60px -24px rgb(181 71 31 / .35);
    overflow: hidden;
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; }

/* About page: hero-art also used as flex container */
.about-hero .hero-art { display: flex; align-items: center; justify-content: center; }

/* Photo caption — About style (pill) */
.about-hero .photo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    background: rgb(26 24 20 / .74);
    color: #fff;
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    text-align: center;
}

/* Photo caption — Factory style (text shadow) */
.fac-hero .photo-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 12px rgb(0 0 0 / .55);
}

/* Factory hero: gradient overlay on hero-art */
.fac-hero .hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .28));
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════════
   9. STORY SECTION (About)
══════════════════════════════════════════════════════════════════════════════ */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.story-art {
    position: relative;
    border-radius: 20px;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #F5EFE3, #F5EFE3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 16px 44px -20px rgb(181 71 31 / .25);
    border: 1px solid var(--brd);
}
.story-art img { width: 100%; height: 100%; object-fit: cover; }

/* Story art photo-caption (pill style) */
.story-art .photo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    background: rgb(26 24 20 / .74);
    color: #fff;
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    text-align: center;
}


/* ══════════════════════════════════════════════════════════════════════════════
   10. TIMELINE (About)
══════════════════════════════════════════════════════════════════════════════ */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 32px; position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 28px;
    height: 3px;
    background: linear-gradient(90deg, var(--acc), var(--pink));
    border-radius: 2px;
    z-index: 0;
}
.tl-item { text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.tl-dot {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--acc);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    font-weight: 800;
    color: var(--acc);
    font-size: .9rem;
    box-shadow: 0 8px 18px -8px rgb(181 71 31 / .5);
}
.tl-item strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.tl-item span { color: var(--mut); font-size: .88rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   11. PROJECT MANAGER BLOCK (About)
══════════════════════════════════════════════════════════════════════════════ */
.pm-block { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pm-art {
    position: relative;
    aspect-ratio: 5/4;
    border-radius: 20px;
    background: linear-gradient(135deg, #F5EFE3, #FFF6E6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 20px 50px -22px rgb(181 71 31 / .35);
    border: 1px solid var(--brd);
}
.pm-art img { width: 100%; height: 100%; object-fit: cover; }
.pm-art .photo-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    background: rgb(26 24 20 / .74);
    color: #fff;
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    text-align: center;
}
.pm-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.pm-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--mut); font-size: .95rem; }
.pm-points svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--acc); margin-top: 2px; }


/* ══════════════════════════════════════════════════════════════════════════════
   12. BRAND STORY NARRATIVE (About)
══════════════════════════════════════════════════════════════════════════════ */
.story-narrative {
    background: linear-gradient(135deg, var(--tint) 0%, var(--cream) 100%);
    border-radius: 24px;
    padding: 56px 48px;
    position: relative;
    overflow: hidden;
}
.story-narrative::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(181 71 31 / .25), transparent 70%);
}
.story-narrative::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(181 71 31 / .2), transparent 70%);
}
.story-narrative .inner { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.story-narrative p { font-size: 1.05rem; color: var(--txt); }
.story-narrative p:first-of-type::first-letter {
    font-size: 3rem;
    font-weight: 800;
    color: var(--acc);
    float: left;
    line-height: 1;
    margin: 4px 10px 0 0;
    font-family: Georgia, serif;
}


/* ══════════════════════════════════════════════════════════════════════════════
   13. STATS (Dark Section — shared)
══════════════════════════════════════════════════════════════════════════════ */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 36px;
}
.stat {
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    backdrop-filter: blur(4px);
}
.stat .num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    color: #fff;
}
/* Factory page uses gradient text for stat numbers */
.fac-hero ~ .dark .stat .num,
section.dark.dark-secondary .stat .num {
    background: linear-gradient(135deg, #fff, #F5EFE3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat .label { font-size: .88rem; opacity: .9; }


/* ══════════════════════════════════════════════════════════════════════════════
   14. CERTIFICATIONS (About)
══════════════════════════════════════════════════════════════════════════════ */
.certs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 32px; }
.cert-card {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 18px;
    padding: 30px 26px;
    text-align: center;
    transition: .25s;
    box-shadow: 0 4px 14px -10px rgb(20 15 10 / .15);
}
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgb(181 71 31 / .25); border-color: var(--acc-l); }
.cert-badge {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--acc), var(--pink));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .05em;
    text-align: center;
    line-height: 1.15;
    padding: 4px;
}
.cert-card h3 { margin: 0 0 6px; }
.cert-card p { color: var(--mut); font-size: .92rem; margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════════
   15. PRODUCT SCOPE / WHAT WE MAKE (About)
══════════════════════════════════════════════════════════════════════════════ */
.scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.scope-group {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 18px;
    padding: 24px 26px 28px;
    transition: .25s;
    position: relative;
    overflow: hidden;
}
.scope-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--acc), var(--pink));
}
.scope-group:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -14px rgb(181 71 31 / .22); }
.scope-group h3 { margin: 6px 0 14px; font-size: 1.1rem; }
.scope-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.scope-group ul li {
    background: var(--tint2);
    color: var(--acc);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════════════════════
   16. VISION & MISSION (About)
══════════════════════════════════════════════════════════════════════════════ */
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.vm-card {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
}
.vm-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--acc), var(--pink));
}
.vm-card .ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--acc), var(--pink));
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}
.vm-card .ico svg { width: 28px; height: 28px; }
.vm-card h3 { font-size: 1.3rem; margin: 0 0 12px; }
.vm-card p { color: var(--mut); margin: 0; }
.vm-card ul { padding-left: 20px; margin: 0; color: var(--mut); }
.vm-card ul li { margin-bottom: 8px; }
.vm-card ul li::marker { color: var(--acc); }


/* ══════════════════════════════════════════════════════════════════════════════
   17. VALUES (About)
══════════════════════════════════════════════════════════════════════════════ */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.val {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 16px;
    padding: 28px 24px;
    transition: .25s;
    position: relative;
    overflow: hidden;
}
.val::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--acc), var(--pink));
}
.val:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -14px rgb(181 71 31 / .25); }
.val .vn { font-size: .75rem; letter-spacing: .15em; color: var(--acc); font-weight: 700; margin-bottom: 8px; }
.val p { color: var(--mut); margin: 0; font-size: .94rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   18. WORKSHOP / PLANT DISPLAY (About)
══════════════════════════════════════════════════════════════════════════════ */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.wk {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 16px;
    padding: 0;
    transition: .2s;
    display: block;
    overflow: hidden;
}
.wk:hover { border-color: var(--acc-l); box-shadow: 0 18px 36px -16px rgb(181 71 31 / .25); transform: translateY(-3px); }
.wk-photo { aspect-ratio: 4/3; background: var(--tint); border-bottom: 1px solid var(--brd); overflow: hidden; }
.wk-photo img { width: 100%; height: 100%; object-fit: cover; }
.wk-body { padding: 18px 20px 22px; }
.wk strong { display: block; margin-bottom: 5px; }
.wk span { color: var(--mut); font-size: .88rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   19. LOCATIONS (About)
══════════════════════════════════════════════════════════════════════════════ */
.locs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.loc { background: #fff; border: 1px solid var(--brd); border-radius: 14px; padding: 22px; text-align: center; }
.loc svg { width: 36px; height: 36px; color: var(--acc); margin: 0 auto 10px; }
.loc strong { display: block; margin-bottom: 2px; }
.loc span { color: var(--mut); font-size: .86rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   20. WHY CHOOSE US / SELLING POINTS (About)
══════════════════════════════════════════════════════════════════════════════ */
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.sp {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: .25s;
}
.sp:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgb(181 71 31 / .25); border-color: var(--acc-l); }
.sp-ico {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tint2), #fff);
    display: grid;
    place-items: center;
    color: var(--acc);
    border: 1px solid var(--brd);
}
.sp-ico svg { width: 30px; height: 30px; }
.sp h3 { margin: 0 0 8px; font-size: 1.02rem; }
.sp p { color: var(--mut); margin: 0; font-size: .9rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   21. LOCATION CARD / FIND US (About)
══════════════════════════════════════════════════════════════════════════════ */
.loc-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 22px;
    overflow: hidden;
    margin-top: 32px;
    box-shadow: 0 10px 40px -20px rgb(181 71 31 / .25);
}
.loc-map { background: linear-gradient(135deg, #FFF6E6, #FFF6E6); display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; }
.loc-info { padding: 40px 36px; }
.loc-info h3 { margin: 0 0 10px; font-size: 1.2rem; }
.loc-info .li-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; color: var(--mut); font-size: .92rem; }
.loc-info .li-row svg { width: 18px; height: 18px; color: var(--acc); flex-shrink: 0; margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════════════════════
   22. VIDEO CARD (Factory)
══════════════════════════════════════════════════════════════════════════════ */
.video-card {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 32px;
    box-shadow: 0 30px 80px -30px rgb(181 71 31 / .4);
    background: linear-gradient(135deg, var(--navy) 0%, var(--acc-d) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(31 43 58 / .42), rgb(181 71 31 / .34));
    opacity: .95;
    z-index: 1;
}
.video-card img.video-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 0; }
.play-btn {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 16px 40px -10px rgb(0 0 0 / .5);
    transition: .3s;
    z-index: 2;
}
.video-card:hover .play-btn {
    transform: scale(1.08);
    box-shadow: 0 20px 50px -10px rgb(181 71 31 / .8);
}
.play-btn::after {
    content: "";
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent var(--acc);
    margin-left: 6px;
}
.video-caption {
    position: absolute;
    bottom: 24px;
    left: 28px;
    right: 28px;
    z-index: 2;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.video-caption .vc-l strong { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.video-caption .vc-l span { opacity: .78; font-size: .88rem; }
.video-caption .vc-r {
    font-size: .82rem;
    background: rgb(255 255 255 / .18);
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}


/* ══════════════════════════════════════════════════════════════════════════════
   23. WHY OUR FACTORY (4 Reasons) (Factory)
══════════════════════════════════════════════════════════════════════════════ */
.why4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 36px;
}
.why4 .w {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 18px;
    padding: 30px 32px;
    display: flex;
    gap: 20px;
    transition: .25s;
}
.why4 .w:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px rgb(181 71 31 / .25);
    border-color: var(--acc-l);
}
.why4 .w-num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--acc), var(--pink));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.3rem;
    box-shadow: 0 8px 20px -6px rgb(181 71 31 / .5);
}
.why4 .w h3 { margin: 4px 0 8px; }
.why4 .w p { color: var(--mut); margin: 0; font-size: .94rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   24. FACTORY TOUR CARDS (Factory)
══════════════════════════════════════════════════════════════════════════════ */
.tour {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 36px;
}
.tour-card {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--brd);
    transition: .25s;
    position: relative;
}
.tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px rgb(181 71 31 / .3);
}
.tour-img {
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    background: var(--tint);
}
.tour-img img { width: 100%; height: 100%; object-fit: cover; }
.tour-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .28));
    pointer-events: none;
}
.tour-card:nth-child(1) .tour-img { background: linear-gradient(135deg, #F5EFE3, #b69dff); }
.tour-card:nth-child(2) .tour-img { background: linear-gradient(135deg, #F5EFE3, #F5EFE3); }
.tour-card:nth-child(3) .tour-img { background: linear-gradient(135deg, #c5f0e0, #83dcb8); }
.tour-card:nth-child(4) .tour-img { background: linear-gradient(135deg, #F5EFE3, #D4A24C); }
.tour-card:nth-child(5) .tour-img { background: linear-gradient(135deg, #c2dffb, #8cbaf0); }
.tour-card:nth-child(6) .tour-img { background: linear-gradient(135deg, #f0d0ff, #cea0f0); }
.tour-card:nth-child(7) .tour-img { background: linear-gradient(135deg, #b3ebeb, #7fd1d1); }
.tour-card:nth-child(8) .tour-img { background: linear-gradient(135deg, #ffcfb3, #ff9966); }
.tour-body { padding: 16px 18px 20px; }
.tour-body h3 { font-size: 1rem; margin: 0 0 4px; }
.tour-body p { color: var(--mut); font-size: .82rem; margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════════
   25. PRODUCTION LINE / NUMBERED STEPS (Factory)
══════════════════════════════════════════════════════════════════════════════ */
.line {
    list-style: none;
    padding: 0;
    margin: 36px 0 0;
    display: grid;
    gap: 18px;
    position: relative;
}
.line::before {
    content: "";
    position: absolute;
    left: 31px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(180deg, var(--acc), var(--pink), var(--acc));
}
.line li {
    position: relative;
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 14px;
    padding: 22px 26px 22px 82px;
    transition: .2s;
}
.line li:hover {
    border-color: var(--acc-l);
    box-shadow: 0 14px 30px -14px rgb(181 71 31 / .22);
}
.line .ln-num {
    position: absolute;
    left: 16px;
    top: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--acc);
    color: var(--acc);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .88rem;
    z-index: 1;
}
.line strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.line p { color: var(--mut); margin: 0 0 8px; font-size: .93rem; }
.line .spec {
    display: inline-block;
    font-size: .76rem;
    background: var(--tint2);
    color: var(--acc);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    margin-right: 6px;
    margin-top: 4px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   26. EQUIPMENT (Factory)
══════════════════════════════════════════════════════════════════════════════ */
.equip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}
.eq {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 18px;
    overflow: hidden;
    transition: .25s;
}
.eq:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px rgb(181 71 31 / .25);
}
.eq-top {
    aspect-ratio: 5/3;
    position: relative;
    overflow: hidden;
    background: var(--tint);
}
.eq-top img { width: 100%; height: 100%; object-fit: cover; }
.eq-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .28));
    pointer-events: none;
}
.eq:nth-child(1) .eq-top { background: linear-gradient(135deg, #F5EFE3, #F5EFE3); }
.eq:nth-child(2) .eq-top { background: linear-gradient(135deg, #fff6e6, #ffeec2); }
.eq:nth-child(3) .eq-top { background: linear-gradient(135deg, #f3f9ff, #d9edff); }
.eq-body { padding: 20px 22px 24px; }
.eq-body h3 { margin: 0 0 6px; font-size: 1.05rem; }
.eq-body p { color: var(--mut); margin: 0 0 10px; font-size: .9rem; }
.eq-body .specs { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-body .specs span {
    font-size: .74rem;
    color: var(--acc);
    background: var(--tint2);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════════
   27. ECO / ENVIRONMENTALLY FRIENDLY (Factory)
══════════════════════════════════════════════════════════════════════════════ */
.eco {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}
.eco-card {
    background: #fff;
    border: 1px solid #dcefdc;
    border-radius: 16px;
    padding: 26px 24px;
    transition: .25s;
    position: relative;
}
.eco-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7cc47c, #a8dc8f);
}
.eco-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -14px rgb(124 196 124 / .3);
}
.eco-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf7e6, #d2ecca);
    display: grid;
    place-items: center;
    color: #3f7a3f;
    margin-bottom: 14px;
}
.eco-ico svg { width: 26px; height: 26px; }
.eco-card h3 { margin: 0 0 6px; }
.eco-card p { color: var(--mut); margin: 0; font-size: .9rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   28. BADGES / COMPLIANCE (Factory)
══════════════════════════════════════════════════════════════════════════════ */
.badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 36px;
}
.badge {
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .25);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    backdrop-filter: blur(4px);
}
.badge strong { display: block; font-size: 1.15rem; letter-spacing: .02em; }
.badge span { font-size: .78rem; opacity: .82; margin-top: 4px; display: block; }


/* ══════════════════════════════════════════════════════════════════════════════
   29. CTA STRIP (Shared)
══════════════════════════════════════════════════════════════════════════════ */
.cta-strip {
    background: linear-gradient(135deg, var(--acc) 0%, var(--pink) 100%);
    color: #fff;
    border-radius: 20px;
    padding: 36px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 40px 0 0;
    box-shadow: 0 20px 40px -16px rgb(181 71 31 / .4);
}
.cta-strip h3 { margin: 0 0 4px; font-size: 1.3rem; color: #fff; }
.cta-strip p { margin: 0; color: rgb(255 255 255 / .88); font-size: .95rem; }
.cta-strip .btn { background: #fff; color: var(--acc); box-shadow: none; }
.cta-strip .btn:hover { background: #fff7e6; }


/* ══════════════════════════════════════════════════════════════════════════════
   30. QUOTE / CONTACT FORM (Shared)
══════════════════════════════════════════════════════════════════════════════ */
.quote-wrap {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: start;
    margin-top: 32px;
}
.quote-wrap .intro p { color: var(--mut); }
.contact-info { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.contact-info .ci { display: flex; gap: 12px; align-items: center; color: var(--mut); font-size: .92rem; }
.contact-info svg { width: 20px; height: 20px; color: var(--acc); }

.contact {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px -20px rgb(181 71 31 / .2);
}
.contact .field { margin-bottom: 14px; }
.contact label { display: block; font-size: .82rem; font-weight: 600; color: var(--txt); margin-bottom: 6px; }
.contact input, .contact textarea, .contact select {
    width: 100%;
    border: 1px solid var(--brd);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    font-size: .95rem;
    background: var(--tint);
    color: var(--txt);
    transition: .15s;
}
.contact input:focus, .contact textarea:focus, .contact select:focus {
    outline: none;
    border-color: var(--acc);
    background: #fff;
    box-shadow: 0 0 0 3px rgb(181 71 31 / .15);
}
.contact textarea { min-height: 100px; resize: vertical; }
.contact .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact .btn { width: 100%; text-align: center; margin-top: 6px; padding: 14px; }


/* ══════════════════════════════════════════════════════════════════════════════
   31. FOOTER (Shared)
══════════════════════════════════════════════════════════════════════════════ */
footer.site { background: #1A1814; color: #c8c1b2; padding: 60px 0 24px; }
footer.site .row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
footer.site h4 { color: #fff; margin: 0 0 14px; font-size: .95rem; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin: 0 0 8px; }
footer.site a { color: #c8c1b2; text-decoration: none; }
footer.site a:hover { color: #fff; }
.legal {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgb(255 255 255 / .08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .82rem;
    color: #8a8272;
}
.legal a { color: #8a8272; }


/* ══════════════════════════════════════════════════════════════════════════════
   32. MODAL (Quote Popup — Shared)
══════════════════════════════════════════════════════════════════════════════ */
.tpm-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tpm-modal[hidden] { display: none !important; }
.tpm-modal-backdrop { position: absolute; inset: 0; background: rgba(26,18,48,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: tpmFadeIn .2s ease; }
.tpm-modal-box { position: relative; background: #fff; border-radius: 24px; max-width: 540px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 40px 100px -30px rgba(26,18,48,.6); animation: tpmPopIn .25s ease; }
@keyframes tpmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tpmPopIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.tpm-modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.08); border: 0; color: #1A1814; font-size: 26px; line-height: 1; cursor: pointer; z-index: 3; padding: 0; }
.tpm-modal-close:hover { background: rgba(0,0,0,.15); }
.tpm-modal-head { background: linear-gradient(135deg, #B5471F 0%, #B5471F 100%); color: #fff; padding: 40px 36px 28px; border-radius: 24px 24px 0 0; position: relative; overflow: hidden; }
.tpm-modal-head::before { content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(212,162,76,.35), transparent 70%); z-index: 0; }
.tpm-modal-head::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); z-index: 0; }
.tpm-modal-eyebrow { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.25); padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; position: relative; z-index: 1; }
.tpm-modal-head h2 { color: #fff; margin: 0 0 10px; font-size: 1.65rem; position: relative; z-index: 1; line-height: 1.2; letter-spacing: -.01em; }
.tpm-modal-head p { color: rgba(255,255,255,.9); margin: 0; font-size: .95rem; position: relative; z-index: 1; line-height: 1.5; }
.tpm-modal-form { padding: 28px 36px 32px; }
.tpm-modal-form .tpm-field { margin-bottom: 14px; }
.tpm-modal-form label { display: block; font-size: .84rem; font-weight: 600; color: #1A1814; margin-bottom: 6px; }
.tpm-modal-form label span { color: #B5471F; }
.tpm-modal-form input, .tpm-modal-form textarea { width: 100%; border: 1.5px solid #E8DDC8; border-radius: 10px; padding: 12px 14px; font: inherit; font-size: .95rem; background: #F5EFE3; color: #1A1814; transition: .15s; box-sizing: border-box; }
.tpm-modal-form input:focus, .tpm-modal-form textarea:focus { outline: none; border-color: #B5471F; background: #fff; box-shadow: 0 0 0 3px rgba(181,71,31,.15); }
.tpm-modal-form textarea { resize: vertical; min-height: 100px; }
.tpm-modal-form .tpm-honey { position: absolute; left: -9999px; width: 1px; height: 1px; }
.tpm-modal-submit { width: 100%; background: linear-gradient(135deg, #B5471F, #B5471F); color: #fff; border: 0; border-radius: 12px; padding: 15px; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 6px; box-shadow: 0 10px 24px -8px rgba(181,71,31,.5); transition: .2s; }
.tpm-modal-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(181,71,31,.6); }
.tpm-modal-submit:disabled { opacity: .6; cursor: wait; }
.tpm-modal-note { text-align: center; font-size: .82rem; color: #6E665A; margin: 14px 0 0; }
.tpm-modal-note a { color: #B5471F; font-weight: 600; }
body.tpm-modal-open { overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════════════
   33. UPLOAD DROP-ZONE (Shared)
══════════════════════════════════════════════════════════════════════════════ */
.tpm-upload { display: block; border: 2px dashed #E8DDC8; border-radius: 12px; padding: 18px; text-align: center; background: #FFF6E6; cursor: pointer; transition: .2s; position: relative; }
.tpm-upload:hover, .tpm-upload.drag { background: #fff; border-color: #B5471F; transform: translateY(-1px); }
.tpm-upload svg { width: 28px; height: 28px; margin: 0 auto 6px; color: #B5471F; display: block; }
.tpm-upload strong { display: block; font-size: .9rem; color: #1A1814; margin-bottom: 3px; font-weight: 600; }
.tpm-upload .tpm-upload-hint { font-size: .76rem; color: #6E665A; line-height: 1.45; display: block; }
.tpm-upload-list { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; font-size: .82rem; color: #1A1814; display: grid; gap: 4px; }
.tpm-upload-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; border: 1px solid #E8DDC8; border-radius: 8px; }
.tpm-upload-list li .tpm-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpm-upload-list li .tpm-file-size { color: #6E665A; font-size: .74rem; flex-shrink: 0; }
.tpm-upload-list li button { background: transparent; border: 0; color: #6E665A; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px; flex-shrink: 0; }
.tpm-upload-list li button:hover { color: #B5471F; }
.tpm-upload-error { color: #B5471F; font-size: .78rem; margin: 8px 0 0; display: block; }


/* ══════════════════════════════════════════════════════════════════════════════
   34. RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    /* Layout collapses */
    .about-hero .grid,
    .fac-hero .grid,
    .story,
    .pm-block,
    .vm,
    .loc-card,
    .quote-wrap { grid-template-columns: 1fr; }

    .hero-art, .story-art, .pm-art { max-width: 460px; margin: 0 auto; }

    .timeline, .stats, .certs-grid, .values, .work, .locs, .scope, .sp-grid,
    .why4, .equip, .eco, .badges,
    footer.site .row { grid-template-columns: 1fr 1fr; }

    .tour { grid-template-columns: repeat(2, 1fr); }
    .timeline::before { display: none; }
    .story-narrative { padding: 40px 26px; }

    /* Header / nav */
    header.site .row { flex-wrap: wrap; row-gap: 6px; }
    nav.main { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    nav.main::-webkit-scrollbar { display: none; }
    nav.main ul { display: flex; gap: 14px; justify-content: center; flex-wrap: nowrap; padding: 4px 2px; min-width: max-content; }
    nav.main a { font-size: .82rem; padding: 4px 0; white-space: nowrap; }
    .logo { font-size: 1.05rem; }
    .logo .logo-mark { width: 34px; height: 34px; }
    h1 { font-size: 2rem; }
    section { padding: 56px 0; }

    /* Mobile dropdown handling */
    nav.main li.has-sub > a .caret { transition: transform .2s; }
    nav.main li.has-sub.open > a .caret { transform: rotate(180deg); }
    nav.main li.has-sub.open > ul.sub {
        display: block !important;
        position: fixed;
        left: 12px;
        right: 12px;
        top: 110px;
        min-width: 0;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        z-index: 200;
        border: 1px solid var(--brd);
        border-radius: 14px;
        box-shadow: 0 20px 50px rgb(0 0 0 / .2);
        padding: 6px 0;
        background: #fff;
    }

    /* Modal */
    .tpm-modal-head { padding: 32px 24px 24px; }
    .tpm-modal-form { padding: 24px; }
    .tpm-modal-head h2 { font-size: 1.35rem; }
}

@media (max-width: 520px) {
    .timeline, .stats, .certs-grid, .values, .work, .locs, .scope, .sp-grid,
    .why4, .equip, .eco, .badges, .tour,
    footer.site .row { grid-template-columns: 1fr; }

    .contact .row2 { grid-template-columns: 1fr; }

    /* Production line mobile */
    .line li { padding: 56px 20px 20px 20px; }
    .line::before { display: none; }
    .line .ln-num { left: 20px; top: 16px; }

    /* Nav wrap on small screens */
    nav.main { overflow: visible; }
    nav.main ul { min-width: 0; flex-wrap: wrap; justify-content: flex-start; gap: 10px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   35. PROCESS PAGE — HERO
══════════════════════════════════════════════════════════════════════════════ */
.proc-hero {
    padding: 60px 0 110px;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgb(181 71 31 / .28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 90%, rgb(181 71 31 / .22) 0%, transparent 60%),
        linear-gradient(180deg, #FAF6EF 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}
.proc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .45;
    background-image: radial-gradient(circle, rgb(181 71 31 / .18) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    pointer-events: none;
}
.proc-hero .wrap { position: relative; z-index: 1; }
.proc-hero .grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}
.proc-hero .hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .25));
    pointer-events: none;
}
.proc-hero .photo-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 12px rgb(0 0 0 / .55);
}

/* Hero KPIs */
.hero-kpis {
    display: flex;
    gap: 28px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--brd);
    flex-wrap: wrap;
}
.hero-kpis .k { display: flex; flex-direction: column; }
.hero-kpis .k strong { font-size: 1.5rem; color: var(--acc); font-weight: 800; line-height: 1; }
.hero-kpis .k span { font-size: .85rem; color: var(--mut); margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════════════════════
   36. PROCESS PAGE — 4-STEP FLOW
══════════════════════════════════════════════════════════════════════════════ */
.flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
    position: relative;
}
.flow-step {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 20px;
    padding: 0;
    text-align: center;
    position: relative;
    transition: .25s;
    z-index: 1;
    overflow: hidden;
}
.flow-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px rgb(181 71 31 / .25);
    border-color: var(--acc-l);
}
.fs-photo {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--tint);
    overflow: hidden;
}
.fs-photo img { width: 100%; height: 100%; object-fit: cover; }
.fs-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .25));
    pointer-events: none;
}
.fs-body { padding: 0 20px 24px; }
.flow-step .fs-num {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acc), var(--pink));
    color: #fff;
    line-height: 40px;
    font-weight: 800;
    font-size: 1rem;
    margin: -20px 0 14px;
    box-shadow: 0 8px 16px -6px rgb(181 71 31 / .5);
    position: relative;
    z-index: 2;
}
.flow-step .fs-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--tint2), #fff);
    display: grid;
    place-items: center;
    color: var(--acc);
    border: 1px solid var(--brd);
}
.flow-step .fs-icon svg { width: 30px; height: 30px; }
.flow-step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.flow-step p { color: var(--mut); font-size: .88rem; margin: 0 0 10px; }
.flow-step .fs-time {
    display: inline-block;
    font-size: .75rem;
    color: var(--acc);
    background: var(--tint2);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .05em;
}


/* ══════════════════════════════════════════════════════════════════════════════
   37. PROCESS PAGE — PHASE BLOCKS & SUB-TIMELINE
══════════════════════════════════════════════════════════════════════════════ */
.phase {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 22px;
    padding: 36px 40px;
    margin-top: 32px;
    box-shadow: 0 10px 40px -22px rgb(181 71 31 / .2);
}
.phase .ph-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--brd);
}
.phase .ph-head h3 { margin: 0 0 6px; font-size: 1.45rem; }
.phase .ph-head .total {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--acc);
    line-height: 1;
}
.phase .ph-head .total small {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: var(--mut);
    margin-top: 4px;
}

.sub-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sub-timeline li {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px dashed var(--brd);
}
.sub-timeline li:last-child { border-bottom: none; }
.sub-timeline .day {
    font-weight: 800;
    color: var(--acc);
    background: var(--tint2);
    padding: 8px 14px;
    border-radius: 8px;
    text-align: center;
    font-size: .88rem;
}
.sub-timeline strong { display: block; margin-bottom: 4px; }
.sub-timeline p { color: var(--mut); margin: 0; font-size: .92rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   38. PROCESS PAGE — TIMING COMPARISON
══════════════════════════════════════════════════════════════════════════════ */
.compare { margin-top: 36px; display: grid; gap: 26px; }
.cmp-row {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 14px;
    padding: 24px 28px;
}
.cmp-row .cmp-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.cmp-row h4 { margin: 0; font-size: 1rem; }
.cmp-row .cmp-val { font-weight: 800; color: var(--acc); }
.cmp-row .cmp-val.industry { color: var(--mut); }
.cmp-bar {
    height: 14px;
    border-radius: 999px;
    background: #f0ebfa;
    overflow: hidden;
    position: relative;
}
.cmp-bar .fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4A7C59, #2a9674);
    transition: width 1s;
}
.cmp-bar .fill.industry {
    background: linear-gradient(90deg, #ccc, #999);
}
.cmp-summary {
    background: linear-gradient(135deg, var(--acc) 0%, var(--pink) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 22px 28px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cmp-summary strong { font-size: 1.15rem; display: block; margin-bottom: 2px; }
.cmp-summary small { opacity: .88; }


/* ══════════════════════════════════════════════════════════════════════════════
   39. PROCESS PAGE — CHECKLIST (Your Side / Our Side)
══════════════════════════════════════════════════════════════════════════════ */
.checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 36px;
}
.cl {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 20px;
    padding: 32px 30px;
    position: relative;
    overflow: hidden;
}
.cl::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
}
.cl.you::before { background: linear-gradient(90deg, var(--warm), var(--pink)); }
.cl.us::before { background: linear-gradient(90deg, var(--acc), var(--pink)); }
.cl h3 { margin: 6px 0 4px; font-size: 1.25rem; }
.cl .cl-sub { color: var(--mut); margin-bottom: 18px; font-size: .92rem; }
.cl ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cl li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--txt); }
.cl li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; }
.cl.you li svg { color: var(--warm); }
.cl.us li svg { color: var(--acc); }


/* ══════════════════════════════════════════════════════════════════════════════
   40. PROCESS PAGE — FAQ ACCORDION
══════════════════════════════════════════════════════════════════════════════ */
.faq-list { margin-top: 36px; display: grid; gap: 12px; }
.faq-list details {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 14px;
    padding: 18px 22px;
    transition: .2s;
}
.faq-list details[open] { background: var(--tint); border-color: var(--acc-l); }
.faq-list summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: "+";
    font-size: 1.4rem;
    color: var(--acc);
    font-weight: 400;
    transition: .2s;
    flex-shrink: 0;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 12px 0 0; color: var(--mut); font-size: .94rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   41. PROCESS PAGE — RESPONSIVE ADDITIONS
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .proc-hero .grid,
    .checklist { grid-template-columns: 1fr; }
    .flow { grid-template-columns: 1fr 1fr; }
    .sub-timeline li { grid-template-columns: 80px 1fr; }
}

@media (max-width: 520px) {
    .flow { grid-template-columns: 1fr; }
    .phase { padding: 26px 22px; }
    .sub-timeline li { grid-template-columns: 1fr; gap: 4px; }
    .sub-timeline .day { justify-self: start; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   42. CUSTOMER REVIEWS PAGE — HERO
══════════════════════════════════════════════════════════════════════════════ */
.cs-hero {
    padding: 60px 0 110px;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgb(181 71 31 / .28), transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 90%, rgb(181 71 31 / .22), transparent 60%),
        linear-gradient(180deg, #FAF6EF, #fff);
    position: relative;
    overflow: hidden;
}
.cs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .45;
    background-image: radial-gradient(circle, rgb(181 71 31 / .18) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    pointer-events: none;
}
.cs-hero .wrap { position: relative; z-index: 1; text-align: center; }

.cs-hero-photo {
    position: relative;
    margin: 34px auto 0;
    max-width: 920px;
    aspect-ratio: 16/9;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px -32px rgb(181 71 31 / .45);
    border: 1px solid rgb(232 221 200 / .9);
}
.cs-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgb(0 0 0 / .35));
    pointer-events: none;
}
.cs-hero-photo .photo-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 12px rgb(0 0 0 / .55);
    text-align: left;
}


/* ══════════════════════════════════════════════════════════════════════════════
   43. CUSTOMER REVIEWS PAGE — AGGREGATE RATING
══════════════════════════════════════════════════════════════════════════════ */
.agg {
    display: flex;
    gap: 28px;
    justify-content: center;
    margin-top: 26px;
    flex-wrap: wrap;
    align-items: center;
}
.agg-star {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.3rem;
}
.agg-star svg { width: 22px; height: 22px; color: #D4A24C; fill: #D4A24C; }
.agg-num { font-size: 3rem; font-weight: 800; color: var(--acc); line-height: 1; }
.agg-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    border-right: 1px solid var(--brd);
}
.agg-kpi:last-child { border-right: none; }
.agg-kpi span { font-size: .82rem; color: var(--mut); margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════════════════════
   44. CUSTOMER REVIEWS PAGE — TABS
══════════════════════════════════════════════════════════════════════════════ */
.tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 28px;
}
.tab {
    background: #fff;
    border: 1.5px solid var(--brd);
    color: var(--txt);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
}
.tab:hover, .tab.active {
    background: var(--acc);
    color: #fff;
    border-color: var(--acc);
}


/* ══════════════════════════════════════════════════════════════════════════════
   45. CUSTOMER REVIEWS PAGE — REVIEW CARDS
══════════════════════════════════════════════════════════════════════════════ */
.reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 32px;
}
.rv {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 18px;
    padding: 26px 28px;
    position: relative;
    transition: .25s;
    display: flex;
    flex-direction: column;
}
.rv:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px rgb(181 71 31 / .3);
    border-color: var(--acc-l);
}
.rv::before {
    content: "\201C";
    position: absolute;
    top: 8px;
    right: 20px;
    font-size: 5rem;
    line-height: 1;
    color: var(--tint2);
    font-family: Georgia, serif;
    z-index: 0;
}
.rv-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.rv-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acc), var(--pink));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.rv-name { font-weight: 700; font-size: .98rem; }
.rv-meta { color: var(--mut); font-size: .82rem; }
.rv-stars { color: #D4A24C; margin-bottom: 10px; }
.rv-stars svg { width: 15px; height: 15px; display: inline-block; fill: currentColor; }
.rv-text { color: var(--txt); font-size: .94rem; flex: 1; position: relative; z-index: 1; }
.rv-tag {
    display: inline-block;
    margin-top: 14px;
    font-size: .72rem;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--acc);
    background: var(--tint2);
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    align-self: flex-start;
}


/* ══════════════════════════════════════════════════════════════════════════════
   46. CUSTOMER REVIEWS PAGE — CASE STUDIES
══════════════════════════════════════════════════════════════════════════════ */
.cases { display: grid; gap: 28px; margin-top: 32px; }
.case {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    transition: .25s;
}
.case:hover {
    box-shadow: 0 24px 60px -24px rgb(181 71 31 / .3);
    transform: translateY(-4px);
}
.case:nth-child(even) { grid-template-columns: 1fr 1.2fr; }
.case:nth-child(even) .case-art { order: 2; }

.case-art {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 320px;
}
.case-art .ba {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.case-art .ba:first-child { background: linear-gradient(135deg, #F5EFE3, #F5EFE3); border-right: 1px dashed var(--brd); }
.case-art .ba:last-child { background: linear-gradient(135deg, #FFF6E6, #F5EFE3); }
.case-art .ba img { width: 100%; height: 100%; object-fit: cover; }
.case-art .ba-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgb(255 255 255 / .92);
    color: var(--acc);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    z-index: 2;
}

.case-body {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.case-body .c-type {
    font-size: .76rem;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--acc);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.case-body h3 { font-size: 1.4rem; margin: 0 0 10px; }
.case-body p { color: var(--mut); }
.case-body .c-stats {
    display: flex;
    gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--brd);
    flex-wrap: wrap;
}
.case-body .c-stats div { display: flex; flex-direction: column; }
.case-body .c-stats strong { color: var(--acc); font-size: 1.1rem; line-height: 1; }
.case-body .c-stats span { font-size: .78rem; color: var(--mut); margin-top: 3px; }


/* ══════════════════════════════════════════════════════════════════════════════
   47. CUSTOMER REVIEWS PAGE — SEGMENTS
══════════════════════════════════════════════════════════════════════════════ */
.segments {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}
.seg {
    background: #fff;
    border: 1px solid var(--brd);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
    transition: .25s;
}
.seg:hover {
    transform: translateY(-4px);
    border-color: var(--acc-l);
    box-shadow: 0 16px 36px -14px rgb(181 71 31 / .22);
}
.seg-ico {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--tint2), #fff);
    display: grid;
    place-items: center;
    color: var(--acc);
    margin: 0 auto 14px;
    border: 1px solid var(--brd);
}
.seg-ico svg { width: 30px; height: 30px; }
.seg strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }
.seg p { color: var(--mut); font-size: .88rem; margin: 0; }
.seg .seg-n {
    display: inline-block;
    margin-top: 12px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--acc);
    background: var(--tint2);
    padding: 4px 12px;
    border-radius: 999px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   48. CUSTOMER REVIEWS PAGE — VIDEO CAPTION (alt class)
══════════════════════════════════════════════════════════════════════════════ */
.video-cap {
    position: absolute;
    bottom: 24px;
    left: 28px;
    right: 28px;
    z-index: 2;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.video-cap strong { display: block; font-size: 1.12rem; }
.video-cap span { opacity: .8; font-size: .88rem; }
.video-cap .vc-r {
    font-size: .82rem;
    background: rgb(255 255 255 / .18);
    padding: 6px 14px;
    border-radius: 999px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   49. CUSTOMER REVIEWS PAGE — RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .reviews, .segments { grid-template-columns: 1fr 1fr; }
    .case, .case:nth-child(even) { grid-template-columns: 1fr; }
    .case:nth-child(even) .case-art { order: 0; }
    .agg-kpi { border: none; padding: 8px 14px; }
}

@media (max-width: 520px) {
    .reviews, .segments { grid-template-columns: 1fr; }
}

/* Two-column row inside modal form */
.tpm-field-row {
    display: flex;
    gap: 12px;
}
.tpm-field-row .tpm-field {
    flex: 1;
}
@media (max-width: 600px) {
    .tpm-field-row {
        flex-direction: column;
        gap: 0;
    }
}