@import url('https://unpkg.com/aos@2.3.4/dist/aos.css'); :root{ --color-primary:#1A1A2E;--color-secondary:#2C2C3E;--color-accent:#D4AF37;--color-accent-dark:#B8860B;--color-accent-light:#E8C84A;--color-white:#ffffff;--color-off-white:#F5F0EB;--color-cream:#FAF8F5;--color-light-gray:#E8E4DF;--color-mid-gray:#888;--color-dark-gray:#444;--font-heading:'Playfair Display',"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",serif;--font-body:'Inter',"PingFang HK","PingFang TC","Noto Sans CJK HK","Microsoft JhengHei","微軟正黑體",-apple-system,sans-serif;--transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);--transition-slow:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);--transition-spring:all 0.4s cubic-bezier(0.34,1.56,0.64,1);--duration-fast:0.2s;--duration-normal:0.3s;--duration-slow:0.5s;--duration-slower:0.8s;--gradient-accent:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-dark) 100%);--gradient-accent-shine:linear-gradient(135deg,var(--color-accent-light) 0%,var(--color-accent) 50%,var(--color-accent-dark) 100%);--gradient-dark:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);--gradient-warm:linear-gradient(135deg,#F5F0EB 0%,#E8E4DF 50%,#D4CFC8 100%);--shadow-sm:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02);--shadow-md:0 4px 16px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.04);--shadow-lg:0 8px 32px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.04);--shadow-xl:0 16px 48px rgba(0,0,0,0.14),0 4px 16px rgba(0,0,0,0.06);--shadow-card:0 2px 8px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02);--shadow-card-hover:0 12px 32px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.04),0 0 0 1px rgba(212,175,55,0.1);--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-xl:24px;--max-width:1200px;--gutter:48px;--section-padding:60px;--nav-height:56px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} *,*::before,*::after{ margin:0;padding:0;box-sizing:border-box} html{ scroll-behavior:smooth;font-size:16px;overflow-x:clip} body{ font-family:var(--font-body);color:var(--color-primary);background:#F5F0EB;line-height:1.7;overflow:visible;-webkit-font-smoothing:antialiased} a{ color:inherit;text-decoration:none;transition:var(--transition)} img{ max-width:100%;height:auto;display:block} ul,ol{ list-style:none} h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading);font-weight:700;line-height:1.3} .container{ width:100%;max-width:var(--max-width);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box} .section-padding{ padding:var(--section-padding) 0} .inner-page .section-padding{ background:transparent} .inner-page .section-padding .container{ background:transparent;border-radius:0;padding:0;box-shadow:none} .inner-page .section-padding h2,.inner-page .section-padding h3{ color:var(--color-primary)} .inner-page .section-padding p{ color:#333} .text-center{ text-align:center} .text-left{ text-align:left} .text-accent{ color:var(--color-accent)} .bg-off-white{ background:var(--color-off-white)} .bg-dark{ background:#F5F0EB;color:var(--color-primary)} h1{ font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-0.02em} h2{ font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-0.01em;margin-bottom:1rem} h3{ font-size:clamp(1.3rem,2.5vw,1.8rem)} h4{ font-size:1.2rem} p{ font-size:1rem;color:var(--color-dark-gray);line-height:1.6} .section-subtitle{ font-size:0.85rem;text-transform:uppercase;letter-spacing:3px;color:var(--color-accent);font-weight:600;margin-bottom:0.5rem;display:inline-block;position:relative;padding-bottom:12px} .section-subtitle::after{ content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:40px;height:2px;background:var(--gradient-accent);border-radius:2px} .text-left .section-subtitle::after{ left:0;transform:none} .section-title{ margin-bottom:0.75rem;text-align:center} .section-desc{ max-width:700px;margin:0 auto 1.5rem} .btn{ display:inline-flex;align-items:center;gap:8px;padding:14px 36px;border:none;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:0.9rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden} .btn-primary{ background:var(--gradient-accent-shine);color:var(--color-primary);position:relative} .btn-primary::after{ content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.2) 50%,transparent 60%);transform:translateX(-100%);transition:transform 0.6s ease} .btn-primary:hover::after{ transform:translateX(100%)} .btn-primary:hover{ transform:translateY(-2px);box-shadow:0 4px 16px rgba(212,175,55,0.3),0 2px 4px rgba(0,0,0,0.06)} .btn-outline{ background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary)} .btn-outline:hover{ background:var(--color-primary);color:#F5F0EB;transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,26,46,0.2)} .btn-white{ background:#F5F0EB;color:var(--color-primary)} .btn-white:hover{ background:var(--color-off-white);transform:translateY(-2px);box-shadow:var(--shadow-md)} .navbar{ position:fixed;top:0;left:0;right:0;height:var(--nav-height);display:flex;align-items:center;z-index:1000;transition:var(--transition);background:rgba(245,240,235,0.95);box-shadow:0 2px 12px rgba(0,0,0,0.06);overflow:visible} .navbar.scrolled{ background:rgba(245,240,235,0.98);box-shadow:0 4px 20px rgba(0,0,0,0.12)} .navbar .container{ display:flex;align-items:center;justify-content:space-between} .nav-logo{ display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-primary);flex-shrink:0;position:relative;z-index:1002;margin-right:40px} .nav-logo img{ height:42px;width:auto;border-radius:6px;flex-shrink:0} .nav-logo-text{ display:flex;flex-direction:column;line-height:1.2;min-width:0;overflow:visible;white-space:nowrap} .nav-logo-text strong{ font-family:var(--font-heading);font-size:0.88rem;font-weight:700;color:#1A1A2E;letter-spacing:0.5px} .nav-logo-text small{ font-size:0.62rem;color:rgba(26,26,46,0.85);font-weight:500;letter-spacing:0.3px} .nav-links{ display:flex;align-items:center;gap:28px;flex-shrink:0;overflow:visible;flex-wrap:nowrap} .nav-links a{ font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color:#1A1A2E;position:relative} .nav-links a::after{ content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--color-accent);transition:var(--transition)} .nav-links a:hover::after,.nav-links a.active::after,.nav-dropdown>a.active::after{ width:100%} .nav-links a:hover{ color:var(--color-accent)} .nav-dropdown{ position:relative} .nav-dropdown>a::after{ content:'\25BE';font-size:0.6em;margin-left:4px;vertical-align:middle;display:inline-block;bottom:auto;width:auto;height:auto;background:none;transition:transform 0.3s ease} .nav-dropdown:hover>a::after{ transform:rotate(180deg)} .nav-dropdown:hover>a::after{ width:100%} .nav-dropdown>a{ display:flex;align-items:center;gap:2px} .mega-panel{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:480px;max-width:calc(100vw - 40px);background:#F5F0EB;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;opacity:0;visibility:hidden;pointer-events:none;border:1px solid rgba(0,0,0,0.04);z-index:9999;transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s;transition-delay:0s;transform:translateX(-50%) translateY(8px) translateZ(0);-webkit-transform:translateX(-50%) translateY(8px) translateZ(0)} .nav-dropdown:hover .mega-panel{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) translateZ(0);-webkit-transform:translateX(-50%) translateY(0) translateZ(0);pointer-events:auto;transition-delay:0.3s} .mega-panel:hover{ pointer-events:auto !important} .mega-panel-link{ pointer-events:auto !important} .mega-panel-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:4px 12px} .mega-panel-link{ display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-sm);transition:background 0.2s ease;text-decoration:none;color:var(--color-primary) !important;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none} .mega-panel-link::after{ display:none !important} .mega-panel-link:hover{ background:var(--color-off-white);color:var(--color-accent-dark) !important} .mega-panel-icon{ width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:flex-start;font-size:1.1rem;flex-shrink:0} .mega-panel-text{ display:flex;flex-direction:column;gap:2px} .mega-panel-text strong{ font-size:0.85rem;color:var(--color-primary)} .mega-panel-text span{ font-size:0.72rem;color:var(--color-mid-gray)} .mega-panel-link:hover .mega-panel-text strong{ color:var(--color-accent-dark)} .mega-panel-viewall{ grid-column:1 / -1;text-align:center;padding-top:16px;margin-top:8px;border-top:1px solid var(--color-light-gray)} .mega-panel-viewall a{ color:var(--color-accent-dark) !important;font-size:0.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase} .mega-panel-viewall a::after{ display:none !important} .mega-panel-viewall a:hover{ color:var(--color-accent) !important} .dropdown-panel{ position:absolute;top:100%;left:0;transform:translateY(8px) translateZ(0);-webkit-transform:translateY(8px) translateZ(0);min-width:360px;background:#F5F0EB;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:12px 16px;opacity:0;visibility:hidden;transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s;transition-delay:0s;pointer-events:none;border:1px solid rgba(0,0,0,0.04);z-index:9999;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 12px} .nav-dropdown:hover .dropdown-panel{ opacity:1;visibility:visible;transform:translateY(0) translateZ(0);-webkit-transform:translateY(0) translateZ(0);pointer-events:auto;transition-delay:0.3s} .dropdown-link{ display:block;padding:8px 12px;border-radius:var(--radius-sm);color:var(--color-primary) !important;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;transition:background 0.2s ease} .dropdown-link::after{ display:none !important} .dropdown-link:hover{ background:var(--color-off-white);color:var(--color-accent-dark) !important} .lang-switch{ display:flex;align-items:center;gap:4px;margin-left:40px;padding-left:0;border-left:none} .lang-switch a{ font-size:0.8rem;font-weight:600;letter-spacing:0;text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-sm);color:rgba(26,26,46,0.6) !important} .lang-switch a::after{ display:none !important} .lang-switch a.active{ color:var(--color-accent) !important;background:rgba(184,134,11,0.1)} .lang-switch a:hover{ color:var(--color-accent) !important} .lang-divider{ color:rgba(26,26,46,0.3);font-size:0.75rem} .nav-toggle{ display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1001;padding:8px} .nav-toggle span{ width:26px;height:2px;background:var(--color-primary);transition:var(--transition);border-radius:2px} .nav-toggle.active span:nth-child(1){ transform:rotate(45deg) translate(5px,6px)} .nav-toggle.active span:nth-child(2){ opacity:0} .nav-toggle.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-6px)} .hero{ position:relative;min-height:85vh;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;background:linear-gradient(135deg,#F5F0EB 0%,#E8E4DF 50%,#D4CFC8 100%)} .hero-bg-pattern{ position:absolute;inset:0;opacity:0.06;background-image:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(212,175,55,0.05) 40px,rgba(212,175,55,0.05) 41px),repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(212,175,55,0.03) 40px,rgba(212,175,55,0.03) 41px)} .hero-overlay{ position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,transparent 0%,rgba(0,0,0,0.05) 100%);pointer-events:none} .hero-content{ position:relative;color:var(--color-primary);z-index:2;text-align:center;padding:0 var(--gutter);max-width:var(--max-width);margin:0 auto;box-sizing:border-box} .hero-badge{ color:var(--color-primary);display:inline-block;padding:8px 24px;border:1px solid rgba(184,134,11,0.4);border-radius:30px;color:var(--color-accent-light);font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:30px;backdrop-filter:blur(10px)} .hero h1{ color:var(--color-primary);margin-bottom:10px} .hero h1 span{ color:var(--color-accent-light)} .hero-subtitle{ font-size:clamp(1rem,2vw,1.3rem);color:rgba(26,26,46,0.9),0.7);margin-bottom:24px;font-weight:300;letter-spacing:1px} .hero-buttons{ display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:100%} .hero-buttons .btn{ padding:12px 28px;font-size:0.9rem} @media (max-width: 480px){ .hero-buttons{ flex-direction:column;align-items:center;width:100%} .hero-buttons .btn{ width:100%;justify-content:center}} .scroll-indicator{ position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;animation:bounce 2s infinite} .scroll-indicator span{ display:block;width:24px;height:38px;border:2px solid rgba(255,255,255,0.3);border-radius:12px;position:relative} .scroll-indicator span::after{ content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--color-accent);border-radius:2px;animation:scroll-dot 2s infinite} .hero-video-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0} @media (max-width: 768px){ .has-video .hero-video-bg{ display:none} .hero{ background:linear-gradient(135deg,#F5F0EB 0%,#E8E4DF 50%,#D4CFC8 100%) !important}} .hero-grid-video{ min-height:auto;padding:40px 0 28px;background:linear-gradient(135deg,#F5F0EB 0%,#E8E4DF 50%,#D4CFC8 100%)} .hero-grid-video .container{ max-width:var(--max-width);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box} .hero-video-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px;width:100%} .hero-grid-item{ position:relative;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:#1a1a1e;box-shadow:0 4px 24px rgba(0,0,0,0.1)} .hero-grid-item video{ width:100%;height:100%;object-fit:cover;display:block} .hero-grid-label{ position:absolute;bottom:0;left:0;right:0;padding:10px 16px;background:linear-gradient(transparent,rgba(0,0,0,0.7));color:#fff;font-size:0.8rem;font-weight:500;letter-spacing:1px;text-align:left;z-index:2} .hero-grid-video .hero-content{ position:relative;color:var(--color-primary);z-index:2;text-align:center;padding:0 var(--gutter);max-width:var(--max-width);margin:0 auto;box-sizing:border-box} @media (max-width: 900px){ .hero-grid-video{ padding:40px 0 30px} .hero-video-grid{ gap:12px;margin-bottom:36px} .hero-grid-label{ font-size:0.72rem;padding:8px 12px}} @media (max-width: 600px){ .hero-grid-video{ padding:24px 0 16px} .hero-video-grid{ grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px} .hero-grid-item{ border-radius:8px} .hero-grid-label{ font-size:0.65rem;padding:6px 8px;letter-spacing:0.5px} .hero-grid-video .hero-content{ padding:0 12px} .hero-grid-video h1{ font-size:1.6rem !important} .hero-grid-video .hero-content p{ font-size:0.85rem}} .btn{ position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent} .btn::after{ content:'';position:absolute;inset:0;background:rgba(212,175,55,0.15);transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease} .btn:hover::after,.btn:focus::after{ transform:scaleX(1)} .btn:active{ transform:scale(0.97);transition:transform 0.1s ease} .stone-card,.featured-project-card,.news-card,.certificate-card,.trust-item,.stat-item{ transition:transform 0.3s ease,box-shadow 0.3s ease;-webkit-tap-highlight-color:transparent} .stone-card:hover{ transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)} .stone-card:active,.featured-project-card:active,.news-card:active{ transform:translateY(-2px) scale(0.99);transition:transform 0.1s ease} @keyframes bounce{ 0%,20%,50%,80%,100% { transform:translateX(-50%) translateY(0)} 40% { transform:translateX(-50%) translateY(-10px)} 60% { transform:translateX(-50%) translateY(-5px)}} @keyframes pulse-ring{ 0% { transform:scale(1);opacity:0.8} 100% { transform:scale(1.4);opacity:0}} @keyframes scroll-dot{ 0%{opacity:1;top:6px} 100%{opacity:0;top:18px}} .about-preview{ position:relative} .about-grid{ display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center} .about-image{ position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--color-accent-warm,linear-gradient(135deg,#d4c4a8 0%,#a89068 50%,#8b7355 100%))} .about-image::after{ content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(184,134,11,0.15),transparent);pointer-events:none} .about-stats{ display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;margin-top:40px} .stat-item{ text-align:center} .stat-number{ font-family:var(--font-heading);font-size:2.5rem;color:var(--color-accent);font-weight:700} .stat-label{ font-size:0.8rem;color:var(--color-mid-gray);text-transform:uppercase;letter-spacing:1px;margin-top:4px} .categories-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} .category-card{ position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;cursor:pointer;group:true} .category-card-bg{ position:absolute;inset:0;transition:transform 0.6s ease} .category-card:hover .category-card-bg{ transform:scale(1.08)} .category-card-overlay{ position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(26,26,46,0.25) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px} .category-card h3{ color:#1A1A2E !important;font-size:1.3rem;margin-bottom:6px} .category-card p{ color:rgba(26,26,46,0.75);font-size:0.85rem} .category-card-icon{ position:absolute;top:20px;right:20px;width:44px;height:44px;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:flex-start;font-size:1.2rem} .projects-preview-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px} .project-card{ position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;cursor:pointer} .project-card-bg{ position:absolute;inset:0;transition:transform 0.6s ease} .project-card:hover .project-card-bg{ transform:scale(1.06)} .project-card-overlay{ position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,26,46,0.3) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;opacity:0;transition:var(--transition);pointer-events:none} .project-card:hover .project-card-overlay{ opacity:1} .project-card-overlay h4{ color:#1A1A2E !important;margin-bottom:4px} .project-card-overlay p{ color:rgba(26,26,46,0.75);font-size:0.82rem} .cta-section{ background:#F5F0EB;text-align:center;position:relative;overflow:hidden} .cta-section::after{ content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)} .cta-section::before{ content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")} .cta-section .container{ position:relative;z-index:2} .cta-section .hero-buttons{ justify-content:center} .cta-section h2{ color:var(--color-primary);margin-bottom:16px} .cta-section p{ color:rgba(26,26,46,0.7);max-width:650px;margin:0 auto 24px} .advantages-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px} .advantage-card{ text-align:center;padding:40px 24px;border-radius:var(--radius-md);background:#F5F0EB;border:1px solid var(--color-light-gray);transition:var(--transition)} .advantage-card:hover{ transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:rgba(212,175,55,0.2)} .advantage-icon{ width:64px;height:64px;margin:0 auto 20px;background:linear-gradient(135deg,rgba(212,175,55,0.12),rgba(184,134,11,0.06));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;transition:var(--transition-spring)} .advantage-card:hover .advantage-icon{ transform:scale(1.1);background:linear-gradient(135deg,rgba(212,175,55,0.2),rgba(184,134,11,0.1))} .advantage-card h4{ margin-bottom:10px;color:var(--color-primary)} .advantage-card p{ font-size:0.88rem;color:var(--color-mid-gray)} .products-filter{ display:flex;justify-content:center;gap:12px;margin-bottom:20px;flex-wrap:wrap} .filter-btn{ padding:10px 28px;border:1.5px solid var(--color-light-gray);background:transparent;border-radius:30px;font-family:var(--font-body);font-size:0.85rem;font-weight:500;cursor:pointer;transition:var(--transition);color:var(--color-dark-gray)} .filter-btn:hover,.filter-btn.active{ border-color:var(--color-accent);background:var(--color-accent);color:#1A1A2E !important} .products-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px} .product-card{ border-radius:var(--radius-md);overflow:hidden;background:#F5F0EB;border:1px solid rgba(0,0,0,0.06);transition:var(--transition);cursor:pointer;box-shadow:var(--shadow-card)} .product-card:hover{ transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:rgba(212,175,55,0.15)} .product-card-image{ aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--color-off-white)} .product-card-image .bg{ position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.5s ease} .product-card:hover .product-card-image .bg{ transform:scale(1.08)} .product-card-zoom{ position:absolute;top:12px;right:12px;width:32px;height:32px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:flex-start;opacity:0;transform:scale(0.8);transition:opacity 0.3s,transform 0.3s;font-size:0.9rem;pointer-events:none} .product-card:hover .product-card-zoom{ opacity:1;transform:scale(1)} .product-card-info{ padding:16px 18px} .product-card-info h4{ font-size:1rem;margin-bottom:6px} .product-card-info p{ font-size:0.83rem;color:var(--color-mid-gray)} .projects-filter{ display:flex;justify-content:center;gap:12px;margin-bottom:20px;flex-wrap:wrap} .projects-masonry{ columns:3;column-gap:24px} .masonry-item{ break-inside:avoid;margin-bottom:24px;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;position:relative} .masonry-item .masonry-img{ aspect-ratio:4/3;position:relative;overflow:hidden} .masonry-item.tall .masonry-img{ aspect-ratio:3/4} .masonry-item .masonry-bg{ position:absolute;inset:0;transition:transform 0.5s ease} .masonry-item:hover .masonry-bg{ transform:scale(1.05)} .masonry-item .masonry-info{ position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,rgba(245,240,235,0.85));color:#1A1A2E} .masonry-item .masonry-info h4{ color:#1A1A2E !important;margin-bottom:4px} .masonry-item .masonry-info p{ color:rgba(26,26,46,0.75);font-size:0.82rem} .masonry-tags{ display:flex;gap:8px;margin-top:8px} .masonry-tag{ font-size:0.72rem;padding:3px 10px;background:rgba(26,26,46,0.08);border-radius:12px;color:#1A1A2E} .news-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px} .news-card{ border-radius:var(--radius-md);overflow:hidden;background:#F5F0EB;border:1px solid var(--color-light-gray);transition:var(--transition);cursor:pointer} .news-card:hover{ transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:rgba(212,175,55,0.15)} .news-card-image{ aspect-ratio:16/9;position:relative;overflow:hidden} .news-card-image .bg{ position:absolute;inset:0;transition:transform 0.5s ease} .news-card:hover .news-card-image .bg{ transform:scale(1.04)} .news-card-info{ padding:28px} .news-date{ font-size:0.78rem;color:var(--color-accent);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px} .news-category{ display:inline-block;font-size:0.72rem;padding:3px 12px;background:rgba(184,134,11,0.1);color:var(--color-accent);border-radius:12px;margin-bottom:12px;font-weight:600} .news-card-info h3{ font-size:1.2rem;margin-bottom:10px;line-height:1.4} .news-card-info p{ font-size:0.9rem} .contact-grid{ display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start} .contact-form{ padding-right:20px} .form-group{ margin-bottom:24px} .form-group label{ display:block;font-size:0.85rem;font-weight:600;margin-bottom:8px;color:var(--color-primary)} .form-group input,.form-group textarea{ width:100%;padding:14px 18px;border:1.5px solid var(--color-light-gray);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:0.95rem;transition:var(--transition);background:#F5F0EB;outline:none} .form-group input:focus,.form-group textarea:focus{ border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(184,134,11,0.1)} .form-group textarea{ min-height:140px;resize:vertical} .form-container-wide{ max-width:100%;margin:0 auto;text-align:left} .form-trust-badges{ display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap} .form-trust-badge{ display:inline-block;padding:6px 16px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:20px;font-size:13px;color:rgba(255,255,255,0.7)} .contact-info-list{ padding:0} .contact-info-item{ display:flex;gap:16px;margin-bottom:20px} .contact-info-icon{ width:48px;height:48px;min-width:48px;background:linear-gradient(135deg,rgba(184,134,11,0.1),rgba(184,134,11,0.05));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:flex-start;font-size:1.2rem} .contact-info-item h4{ font-size:1rem;margin-bottom:4px} .contact-info-item p{ font-size:0.9rem;color:var(--color-mid-gray)} .map-placeholder{ width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#e8e4df,#d4cfc8);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:flex-start;color:var(--color-mid-gray);font-size:0.9rem;margin-top:32px} .timeline{ position:relative;padding:40px 0} .timeline::before{ content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--color-light-gray);transform:translateX(-50%)} .timeline-item{ display:flex;margin-bottom:28px;position:relative} .timeline-item:nth-child(even){ flex-direction:row-reverse} .timeline-content{ width:calc(50% - 40px);padding:28px;background:#F5F0EB;border-radius:var(--radius-md);border:1px solid var(--color-light-gray);box-shadow:var(--shadow-sm)} .timeline-year{ font-family:var(--font-heading);font-size:1.5rem;color:var(--color-accent);font-weight:700;margin-bottom:8px} .timeline-dot{ position:absolute;left:50%;top:32px;transform:translateX(-50%);width:16px;height:16px;background:var(--color-accent);border:3px solid var(--color-white);border-radius:50%;box-shadow:0 0 0 3px rgba(184,134,11,0.2)} .page-header{ padding:0;background:#F5F0EB;text-align:center;position:relative;overflow:hidden} .page-header::before{ content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")} .page-header::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)} .page-header .container{ position:relative;z-index:2} .page-header h1{ color:#1A1A2E !important;margin-bottom:4px} .page-header p{ color:rgba(26,26,46,0.7);font-size:1.05rem} .breadcrumb{ display:flex;justify-content:flex-start;gap:8px;margin-top:4px;font-size:0.85rem;color:rgba(26,26,46,0.5)} .breadcrumb a{ color:rgba(26,26,46,0.65)} .breadcrumb a:hover{ color:var(--color-accent-light)} .breadcrumb span{ color:rgba(26,26,46,0.4)} .partners-strip{ display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 0} .partner-logo{ width:120px;height:50px;background:rgba(0,0,0,0.06);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:flex-start;color:var(--color-mid-gray);font-size:0.75rem;font-weight:600;letter-spacing:1px} .certificates-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:24px;max-width:100%;margin:0 auto} .certificate-card{ display:flex;align-items:flex-start;gap:16px;padding:20px;background:#F5F0EB;border-radius:var(--radius-md);box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)} .cert-badge{ flex-shrink:0;width:80px;height:80px;background:linear-gradient(135deg,var(--color-accent) 0%,#C9A227 100%);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:#1A1A2E !important;text-align:center} .cert-badge h4{ font-size:1.1rem;font-weight:700;margin:0;line-height:1.2} .cert-badge p{ font-size:0.65rem;margin:4px 0 0;opacity:0.9;line-height:1.3} .cert-info{ flex:1;text-align:left} .cert-info h5{ font-size:1rem;font-weight:600;color:var(--color-primary);margin:0 0 6px;line-height:1.4} .cert-info p{ font-size:0.85rem;color:var(--color-mid-gray);margin:0;line-height:1.6} .client-logos-grid{ display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:100%;margin:0 auto} .client-logo-item{ flex:1 1 180px;max-width:220px} .client-logo-item{ display:flex;align-items:center;justify-content:flex-start;padding:24px 16px;background:#F5F0EB;border-radius:var(--radius-md);box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04);min-height:80px;transition:transform 0.3s ease,box-shadow 0.3s ease} .client-logo-item:hover{ transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.1)} .client-logo-text{ font-size:0.95rem;font-weight:600;color:var(--color-primary);text-align:center;line-height:1.4} @media (max-width: 768px){ .client-logos-grid{ gap:8px} .client-logo-item{ flex:1 1 calc(50% - 8px);max-width:calc(50% - 8px)} .client-logo-item{ padding:20px 12px;min-height:60px} .client-logo-text{ font-size:0.85rem}} .modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:2000;display:none;align-items:center;justify-content:flex-start;opacity:0;transition:opacity 0.3s ease;color:#fff} .modal-overlay.active{ display:flex;opacity:1} .modal{ background:#F5F0EB;border-radius:var(--radius-lg);max-width:700px;width:90%;max-height:85vh;overflow-y:auto;position:relative} .modal-close{ position:absolute;top:16px;right:16px;width:36px;height:36px;background:var(--color-light-gray);border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;z-index:10;transition:var(--transition)} .modal-close:hover{ background:var(--color-dark-gray);color:#fff !important} .modal-image{ aspect-ratio:16/10;border-radius:var(--radius-lg) var(--radius-lg) 0 0} .modal-body{ padding:24px} .modal-body h2{ margin-bottom:12px} .modal-body p{ margin-bottom:16px} .fade-in{ opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease} .fade-in.visible{ opacity:1;transform:translateY(0)} @media (max-width: 1280px){ :root{ --gutter:32px;--max-width:100%}} @media (max-width: 1024px){ .footer-grid{ grid-template-columns:repeat(2,1fr)} .projects-masonry{ columns:2} .timeline::before{ left:20px} .timeline-item:nth-child(even){ flex-direction:row} .timeline-content{ width:calc(100% - 50px);margin-left:50px} .timeline-dot{ left:20px} .mega-panel{ min-width:520px;padding:24px} .mega-panel-grid{ grid-template-columns:repeat(2,1fr)} .nav-links a{ font-size:0.82rem;padding:0 10px} .nav-logo-text strong{ font-size:0.85rem} .nav-logo-text small{ font-size:0.6rem} .nav-logo img{ height:34px !important}} @media (max-width: 900px){ .nav-toggle{ display:flex} .nav-links{ position:fixed;top:0;right:-100%;width:300px;height:1000px;background:#F5F0EB;flex-direction:column;align-items:flex-start;padding:80px 24px 32px;gap:0;transition:right 0.4s ease;z-index:999;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:none} .nav-links.open{ right:0;pointer-events:auto} .nav-links a{ color:var(--color-primary) !important;padding:14px 0;font-size:1rem;border-bottom:1px solid rgba(26,26,46,0.08);width:100%} .nav-links a::after{ display:none !important} .nav-links a:hover{ color:var(--color-accent) !important} .mega-panel,.dropdown-panel{ display:none;position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border:none;border-radius:0;background:rgba(0,0,0,0.02);padding:0 0 0 16px;margin:0;min-width:0;width:100%;max-height:0;overflow:hidden;transition:max-height 0.35s ease} .nav-dropdown.mobile-open .mega-panel,.nav-dropdown.mobile-open .dropdown-panel{ display:block;max-height:none;padding:8px 0 8px 16px} .nav-dropdown>a::after{ display:inline-block !important;transition:transform 0.3s ease} .nav-dropdown.mobile-open>a::after{ transform:rotate(180deg) !important} .mega-panel-grid{ grid-template-columns:1fr;gap:0} .mega-panel-link{ padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06)} .mega-panel-icon{ width:36px;height:36px} .mega-panel-icon img{ width:36px;height:36px} .mega-panel-text span{ font-size:0.7rem} .mega-panel-viewall{ padding:12px 0 4px} .mega-panel-viewall a{ color:var(--color-accent) !important} .dropdown-item{ padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06);color:rgba(26,26,46,0.88) !important} .lang-switch{ border:none;border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;margin-left:0;margin-top:16px} .lang-divider{ color:rgba(26,26,46,0.3)} .lang-switch a{ color:rgba(26,26,46,0.6) !important}} @media (min-width: 768px) and (max-width: 1199px){ :root{ --gutter:28px;--max-width:100%} .container{ padding-left:var(--gutter);padding-right:var(--gutter)}} @media (max-width: 768px){ :root{ --nav-height:70px;--gutter:20px;--max-width:100%;--section-padding:32px} .container{ padding-left:var(--gutter);padding-right:var(--gutter)} .section-padding{ padding:var(--section-padding) 0} .nav-logo-text strong{ font-size:0.78rem} .nav-logo-text small{ font-size:0.55rem} .nav-logo img{ height:32px !important} .nav-links{ position:fixed;top:0;right:-100%;width:280px;height:1000px;background:#F5F0EB;flex-direction:column;align-items:flex-start;padding:80px 24px 32px;gap:0;transition:right 0.4s ease;z-index:999;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:none} .nav-links.open{ right:0;pointer-events:auto} .nav-links a{ color:var(--color-primary) !important;padding:14px 0;font-size:1rem;border-bottom:1px solid rgba(26,26,46,0.08);width:100%} .nav-links a::after{ display:none !important} .nav-links a:hover{ color:var(--color-accent) !important} .mega-panel,.dropdown-panel{ display:none;position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border:none;border-radius:0;background:rgba(0,0,0,0.02);padding:0 0 0 16px;margin:0;min-width:0;width:100%;max-height:0;overflow:hidden;transition:max-height 0.35s ease} .nav-dropdown.mobile-open .mega-panel,.nav-dropdown.mobile-open .dropdown-panel{ display:block;max-height:none;padding:8px 0 8px 16px} .nav-dropdown>a::after{ display:inline-block !important;transition:transform 0.3s ease} .nav-dropdown.mobile-open>a::after{ transform:rotate(180deg) !important} .mega-panel-grid{ grid-template-columns:1fr;gap:0} .mega-panel-link{ padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06)} .mega-panel-icon{ width:36px;height:36px} .mega-panel-icon img{ width:36px;height:36px} .mega-panel-text span{ font-size:0.7rem} .mega-panel-viewall{ padding:12px 0 4px} .mega-panel-viewall a{ color:var(--color-accent) !important} .dropdown-item{ padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06);color:rgba(26,26,46,0.88) !important} .lang-switch{ border:none;border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;margin-left:0;margin-top:16px} .lang-divider{ color:rgba(26,26,46,0.3)} .lang-switch a{ color:rgba(26,26,46,0.6) !important} .nav-toggle{ display:flex} .about-grid{ grid-template-columns:1fr;gap:24px} .categories-grid{ grid-template-columns:repeat(2,1fr);gap:16px} .projects-preview-grid{ grid-template-columns:1fr} .products-grid{ grid-template-columns:repeat(2,1fr);gap:16px} .advantages-grid{ grid-template-columns:1fr} .contact-grid{ grid-template-columns:1fr;gap:24px} .contact-form{ padding-right:0} .news-grid{ grid-template-columns:1fr} .projects-masonry{ columns:1} .footer-grid{ grid-template-columns:1fr;gap:20px} .footer-bottom{ flex-direction:column;gap:12px;text-align:center} .about-stats{ grid-template-columns:repeat(3,1fr);gap:16px} .stat-number{ font-size:1.8rem} .hero-buttons{ flex-direction:column;align-items:center} .hero h1{ font-size:2.2rem} .partners-strip{ gap:24px} .partner-logo{ width:90px;height:40px} .timeline-content{ margin-left:50px;width:calc(100% - 50px)}} @media (max-width: 480px){ .categories-grid{ grid-template-columns:1fr} .products-grid{ grid-template-columns:1fr} .about-stats{ grid-template-columns:1fr} .btn{ padding:12px 28px;font-size:0.82rem} .nav-logo-text{ display:none} .whatsapp-float{ bottom:16px;right:16px;width:50px;height:50px} .whatsapp-float svg{ width:24px;height:24px} .nav-links{ height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch} .nav-dropdown.mobile-open .mega-panel,.nav-dropdown.mobile-open .dropdown-panel{ max-height:none}} .gallery-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:48px} .gallery-item{ position:relative;aspect-ratio:16/10;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:var(--color-light-gray)} .gallery-item img{ width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease} .gallery-item:hover img{ transform:scale(1.05)} .gallery-overlay{ position:absolute;inset:0;background:rgba(26,26,46,0.25);display:flex;align-items:center;justify-content:flex-start;opacity:0;transition:opacity 0.3s ease} .gallery-item:hover .gallery-overlay{ opacity:1} .gallery-icon{ font-size:1.5rem;color:#1A1A2E !important} @media (max-width: 1024px){ .gallery-grid{ grid-template-columns:repeat(3,1fr)}} @media (max-width: 768px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);gap:12px}} .image-modal{ position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center} .image-modal.active{ display:flex} .image-modal-overlay{ position:absolute;inset:0;background:rgba(0,0,0,0.9);color:#fff} .image-modal-content{ position:relative;width:100vw;height:1000px;display:flex;align-items:center;justify-content:center;z-index:2001} .image-modal-content img{ max-width:100vw;max-height:1000px;width:auto;height:auto;object-fit:contain;border-radius:0} .image-modal-close{ position:absolute;top:16px;right:16px;width:40px;height:40px;padding:0;background:rgba(26,26,46,0.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.35);border-radius:50%;color:#fff !important;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2004;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,0.25);transition:background 0.2s ease,transform 0.2s ease} .image-modal-close svg{ display:block;width:18px;height:18px;pointer-events:none} .image-modal-close:hover{ background:rgba(26,26,46,0.88);transform:scale(1.08)} .image-modal-close:active{ transform:scale(0.94)} @media (max-width: 768px){ .image-modal-content{ width:100vw;height:100dvh} .image-modal-content img{ max-width:100vw;max-height:90dvh} .image-modal-close{ top:calc(env(safe-area-inset-top, 0px) + 12px);right:12px;width:44px;height:44px} .image-modal-prev,.image-modal-next{ top:auto !important;bottom:24px !important;width:56px !important;height:56px !important;font-size:1.4rem !important} .image-modal-prev{ left:24px !important;right:auto !important} .image-modal-next{ right:24px !important;left:auto !important} .image-modal-prev:hover,.image-modal-next:hover{ transform:scale(1.08)} .image-modal-prev:active,.image-modal-next:active{ transform:scale(0.94)}} .image-modal-prev,.image-modal-next{ position:absolute;top:50%;width:40px;height:40px;padding:0;background:rgba(26,26,46,0.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.35);border-radius:50%;color:#fff !important;font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2003 !important;box-shadow:0 2px 10px rgba(0,0,0,0.25);transition:background 0.2s ease,transform 0.2s ease} .image-modal-prev{ left:16px;transform:translateY(-50%)} .image-modal-next{ right:16px;transform:translateY(-50%)} .image-modal-prev:hover,.image-modal-next:hover{ background:rgba(26,26,46,0.88);transform:translateY(-50%) scale(1.08)} .image-modal-prev:active,.image-modal-next:active{ transform:translateY(-50%) scale(0.94)} .trust-bar{ background:#F5F0EB;padding:0;position:relative} .trust-bar::before{ content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(184,134,11,0.1) 0%,transparent 50%,rgba(184,134,11,0.1) 100%)} .trust-items{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:rgba(212,175,55,0.15)} @media (min-width: 1025px){ .trust-items{ grid-template-columns:repeat(4,1fr)}} .trust-item{ text-align:center;padding:32px 20px;background:#E8E4DF;position:relative} .trust-number{ display:block;font-family:var(--font-heading);font-size:2.2rem;font-weight:700;color:var(--color-accent-light);line-height:1;margin-bottom:8px} .trust-label{ display:block;font-size:0.8rem;color:rgba(26,26,46,0.55);text-transform:uppercase;letter-spacing:1px;font-weight:500} @media (max-width: 768px){ .trust-items{ grid-template-columns:repeat(2,1fr)} .trust-number{ font-size:1.8rem} .trust-item{ padding:24px 16px}} .scenarios-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:48px} .scenario-card{ position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;cursor:pointer} .scenario-card-bg{ position:absolute;inset:0;transition:transform 0.6s ease,filter 0.6s ease} .scenario-card:hover .scenario-card-bg{ transform:scale(1.08);filter:brightness(1.1)} .scenario-card-overlay{ position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,26,46,0.3) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:background 0.4s ease;pointer-events:none} .scenario-card:hover .scenario-card-overlay{ background:linear-gradient(180deg,rgba(26,26,46,0.1) 0%,rgba(26,26,46,0.35) 100%)} .scenario-card h3{ color:#1A1A2E !important;font-size:1.6rem;margin-bottom:6px;transform:translateY(8px);transition:transform 0.3s ease} .scenario-card:hover h3{ transform:translateY(0)} .scenario-card p{ color:var(--color-accent-light);font-size:0.9rem;font-weight:500;letter-spacing:1px} .scenario-cta{ color:var(--color-primary,#D4AF37);font-size:0.82rem;font-weight:600;margin-top:8px;opacity:0;transform:translateY(8px);transition:all 0.3s ease;display:block} .scenario-card:hover .scenario-cta{ opacity:1;transform:translateY(0)} @media (max-width: 768px){ .scenarios-grid{ grid-template-columns:1fr;gap:16px} .scenario-card{ aspect-ratio:16/10}} .featured-projects-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-template-rows:repeat(2,1fr);gap:24px;margin-top:48px} .featured-project-card{ position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;cursor:pointer} .featured-project-card .card-bg{ position:absolute;inset:0;transition:transform 0.6s ease} .featured-project-card:hover .card-bg{ transform:scale(1.06)} .featured-project-card .card-overlay{ position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,26,46,0.3));display:flex;flex-direction:column;justify-content:flex-end;padding:24px;opacity:0.9;transition:opacity 0.3s ease} .featured-project-card:hover .card-overlay{ opacity:1} .featured-project-card h4{ color:#1A1A2E !important;font-size:1.1rem;margin-bottom:6px;font-family:var(--font-heading)} .featured-project-card .card-desc{ color:rgba(26,26,46,0.75);font-size:0.85rem;margin-bottom:10px} .project-tags{ display:flex;gap:8px;flex-wrap:wrap} .project-tag{ font-size:0.72rem;padding:4px 10px;background:rgba(184,134,11,0.8);color:#1A1A2E !important;border-radius:12px;font-weight:600;letter-spacing:0.5px} @media (max-width: 1024px){ .featured-projects-grid{ grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}} @media (max-width: 768px){ .featured-projects-grid{ grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);gap:16px}} .product-cat-section{ padding:0 0;position:relative} .product-cat-section:nth-child(even){ background:var(--color-off-white)} .product-cat-grid{ display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center} .product-cat-grid.reverse{ direction:rtl} .product-cat-grid.reverse>*{ direction:ltr} .product-cat-image{ display:grid;grid-template-columns:1fr;gap:16px} .product-cat-image img{ width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);transition:transform 0.4s ease} .product-cat-image img:hover{ transform:scale(1.03)} .product-cat-image img{ cursor:zoom-in} .product-cat-image img:first-child{ grid-column:span 2;aspect-ratio:16/9} .product-cat-content h3{ font-size:2rem;margin-bottom:16px;color:var(--color-primary)} .product-cat-content h3 span{ color:var(--color-accent);font-size:0.9rem;display:block;margin-bottom:8px;font-family:var(--font-body);letter-spacing:2px;text-transform:uppercase} .product-cat-content p{ font-size:1rem;line-height:1.9;margin-bottom:16px} .product-features{ display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .product-feature{ font-size:0.8rem;padding:6px 14px;background:rgba(184,134,11,0.1);color:var(--color-accent);border-radius:20px;font-weight:500} @media (max-width: 768px){ .product-cat-grid{ grid-template-columns:1fr;gap:20px} .product-cat-grid.reverse{ direction:ltr} .product-cat-content h3{ font-size:1.6rem}} .why-choose-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px;margin-top:48px} .why-card{ text-align:center;padding:40px 28px;background:#F5F0EB;border-radius:var(--radius-md);border:1px solid var(--color-light-gray);transition:var(--transition);position:relative;overflow:hidden} .why-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent);transform:scaleX(0);transition:transform 0.3s ease} .why-card:hover::before{ transform:scaleX(1)} .why-card:hover{ transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent} .why-icon{ width:72px;height:72px;margin:0 auto 20px;background:linear-gradient(135deg,rgba(184,134,11,0.15),rgba(184,134,11,0.05));border-radius:50%;display:flex;align-items:center;justify-content:flex-start;font-size:2rem} .why-card h4{ font-size:1.1rem;margin-bottom:12px;color:var(--color-primary)} .why-card p{ font-size:0.88rem;color:var(--color-mid-gray);line-height:1.7} @media (max-width: 1024px){ .why-choose-grid{ grid-template-columns:repeat(2,1fr)}} @media (max-width: 768px){ .why-choose-grid{ grid-template-columns:1fr;gap:20px} .why-card{ padding:32px 24px}} @keyframes countUp{ from { opacity:0;transform:translateY(10px)} to { opacity:1;transform:translateY(0)}} .trust-number.animated{ animation:countUp 0.6s ease forwards} .nav-overlay{ position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:998;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.3s ease,visibility 0.3s ease;color:#fff} .nav-overlay.active{ opacity:1;visibility:visible;pointer-events:auto} .whatsapp-float{ position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:flex-start;box-shadow:0 4px 16px rgba(37,211,102,0.4);z-index:1000;transition:transform 0.2s,box-shadow 0.2s} .whatsapp-float:hover{ transform:scale(1.1);box-shadow:0 6px 24px rgba(37,211,102,0.5)} .whatsapp-float svg{ width:28px;height:28px} .contact-single{ max-width:100%;margin:0 auto} .contact-info-card{ text-align:center} .contact-info-card .contact-info-list{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:24px} .contact-info-card .contact-info-item{ background:var(--color-light);padding:24px;border-radius:var(--radius-md);border:1px solid var(--color-border);text-align:left} .contact-info-card .contact-visual{ margin-top:40px;border-radius:var(--radius-lg);overflow:hidden} .contact-info-card .contact-visual img{ width:100%;height:300px;object-fit:cover} .contact-section{ margin-bottom:24px} .contact-section:last-child{ margin-bottom:0} .contact-section-header{ display:flex;align-items:flex-start;gap:16px;margin-bottom:28px} .contact-section-icon{ width:48px;height:48px;background:var(--color-accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:flex-start;font-size:22px;flex-shrink:0;color:#1A1A2E !important} .contact-section-title-group{} .contact-section-num{ font-size:0.75rem;font-family:var(--font-body);color:var(--color-accent);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px} .contact-section-title{ font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--color-primary);line-height:1.3} .contact-core-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px} .contact-core-card{ background:var(--color-off-white);border:1px solid var(--color-light-gray);border-radius:var(--radius-md);padding:24px;display:flex;gap:16px;align-items:flex-start} .contact-core-card-icon{ width:40px;height:40px;background:var(--color-accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:flex-start;font-size:18px;flex-shrink:0;color:#1A1A2E !important} .contact-core-card-content{} .contact-core-card-label{ font-size:0.8rem;color:var(--color-accent);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px} .contact-core-card-value{ font-size:1rem;font-weight:600;color:var(--color-primary);line-height:1.5} .contact-core-card-value a{ color:var(--color-primary)} .contact-core-card-value a:hover{ color:var(--color-accent)} .contact-complaint-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px} .contact-complaint-card{ background:var(--color-off-white);border:1px solid var(--color-light-gray);border-radius:var(--radius-md);padding:24px} .contact-complaint-card h4{ font-family:var(--font-heading);font-size:1.1rem;margin-bottom:8px;color:var(--color-primary)} .contact-complaint-card p{ font-size:0.88rem;color:var(--color-mid-gray);line-height:1.6} .contact-philosophy-grid{ display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} @media (max-width: 768px){ .contact-philosophy-grid{ grid-template-columns:1fr}} .contact-philosophy-block{ background:var(--color-off-white);border-radius:var(--radius-lg);padding:24px} .contact-philosophy-block h4{ font-family:var(--font-heading);font-size:1.1rem;color:var(--color-primary);margin-bottom:12px;display:flex;align-items:center;gap:8px} .contact-philosophy-block p{ font-size:0.95rem;color:var(--color-dark-gray);line-height:1.6} .contact-commitments{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;margin-top:20px} .contact-commitment-item{ display:flex;gap:14px;align-items:flex-start;padding:16px;background:#fff;border:1px solid var(--color-light-gray);border-radius:var(--radius-md)} .contact-commitment-num{ width:32px;height:32px;background:var(--color-accent);color:#1A1A2E !important;border-radius:50%;display:flex;align-items:center;justify-content:flex-start;font-size:0.85rem;font-weight:700;flex-shrink:0} .contact-commitment-text{ font-size:0.88rem;color:var(--color-dark-gray);line-height:1.5} .contact-visit-grid{ display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} @media (max-width: 768px){ .contact-visit-grid{ grid-template-columns:1fr}} .contact-visit-info{ background:var(--color-off-white);border-radius:var(--radius-lg);padding:28px} .contact-visit-info h4{ font-family:var(--font-heading);font-size:1.1rem;margin-bottom:16px;color:var(--color-primary)} .contact-visit-item{ display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:0.9rem;color:var(--color-dark-gray);line-height:1.5} .contact-visit-item strong{ color:var(--color-primary);min-width:80px;flex-shrink:0} .contact-visit-note{ margin-top:16px;padding:14px 16px;background:rgba(184,134,11,0.08);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:0.85rem;color:var(--color-dark-gray);line-height:1.6} .contact-visit-map{ border-radius:var(--radius-lg);overflow:hidden;min-height:300px;box-shadow:var(--shadow-sm)} .contact-visit-map iframe{ width:100%;height:100%;min-height:300px;border:none} .contact-network-grid{ display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} @media (max-width: 768px){ .contact-network-grid{ grid-template-columns:1fr}} .contact-region-card{ background:var(--color-off-white);border:1px solid var(--color-light-gray);border-radius:var(--radius-lg);padding:24px} .contact-region-card h4{ font-family:var(--font-heading);font-size:1.05rem;color:var(--color-primary);margin-bottom:12px;display:flex;align-items:center;gap:8px} .contact-region-item{ font-size:0.88rem;color:var(--color-dark-gray);padding:8px 0;border-bottom:1px solid var(--color-light-gray);display:flex;align-items:center;gap:8px} .contact-region-item:last-child{ border-bottom:none} .contact-region-dot{ width:6px;height:6px;background:var(--color-accent);border-radius:50%;flex-shrink:0} .contact-service-note{ margin-top:24px;padding:16px 20px;background:rgba(184,134,11,0.06);border:1px dashed var(--color-accent);border-radius:var(--radius-md);font-size:0.9rem;color:var(--color-dark-gray);text-align:center;line-height:1.6} .contact-compliance-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px} .contact-compliance-card{ background:var(--color-off-white);border:1px solid var(--color-light-gray);border-radius:var(--radius-md);padding:24px} .contact-compliance-card h4{ font-family:var(--font-heading);font-size:1rem;color:var(--color-primary);margin-bottom:10px;display:flex;align-items:center;gap:8px} .contact-compliance-card p{ font-size:0.88rem;color:var(--color-dark-gray);line-height:1.7} .contact-eco-grid{ display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} @media (max-width: 768px){ .contact-eco-grid{ grid-template-columns:1fr}} .contact-eco-directions{ background:var(--color-off-white);border-radius:var(--radius-lg);padding:28px} .contact-eco-directions h4{ font-family:var(--font-heading);font-size:1.1rem;color:var(--color-primary);margin-bottom:16px} .contact-eco-direction-item{ display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--color-light-gray);font-size:0.9rem;color:var(--color-dark-gray)} .contact-eco-direction-item:last-child{ border-bottom:none} .contact-eco-icon{ width:28px;height:28px;background:var(--color-accent);border-radius:50%;display:flex;align-items:center;justify-content:flex-start;color:#1A1A2E !important;font-size:14px;flex-shrink:0} .contact-eco-vision{ background:linear-gradient(135deg,#F5F0EB 0%,#E8E4DF 100%);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;justify-content:flex-start} .contact-eco-vision h4{ font-family:var(--font-heading);font-size:1.1rem;color:var(--color-accent-light);margin-bottom:16px} .contact-eco-vision p{ font-size:0.95rem;color:rgba(26,26,46,0.8);line-height:1.6;margin-bottom:16px} .contact-eco-vision-quote{ font-family:var(--font-heading);font-size:1.05rem;color:var(--color-accent-light);font-style:italic;line-height:1.7;padding-top:16px;border-top:1px solid rgba(26,26,46,0.12)} .contact-page-divider{ height:1px;background:var(--color-light-gray);margin:56px 0} @media (max-width: 768px){ .contact-section-header{ flex-direction:column} .contact-core-grid{ grid-template-columns:1fr} .contact-complaint-grid{ grid-template-columns:1fr} .contact-commitments{ grid-template-columns:1fr} .contact-network-grid{ grid-template-columns:1fr} .contact-compliance-grid{ grid-template-columns:1fr} .contact-eco-grid{ grid-template-columns:1fr}} .news-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px;margin-top:48px} .news-card{ background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--color-light-gray);transition:var(--transition);cursor:pointer} .news-card:hover{ box-shadow:var(--shadow-md);transform:translateY(-4px)} .news-card-image{ height:200px;overflow:hidden} .news-card-image .bg{ width:100%;height:100%;transition:transform 0.5s} .news-card:hover .news-card-image .bg{ transform:scale(1.05)} .news-card-info{ padding:24px} .news-date{ font-size:0.8rem;color:var(--color-mid-gray);display:block;margin-bottom:8px} .news-category{ display:inline-block;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;padding:3px 10px;border-radius:20px;margin-bottom:10px} .news-category-company{ background:rgba(212,175,55,0.12);color:var(--color-accent-dark)} .news-category-industry{ background:rgba(26,26,46,0.08);color:var(--color-primary)} .news-category-project{ background:rgba(44,44,62,0.08);color:var(--color-secondary)} .news-category-exhibition{ background:rgba(184,134,11,0.08);color:var(--color-accent-dark)} .news-category-media{ background:rgba(139,115,85,0.1);color:#8B7355} .news-card-info h3{ font-family:var(--font-heading);font-size:1.05rem;line-height:1.4;margin-bottom:10px;color:var(--color-primary)} .news-card-info p{ font-size:0.88rem;color:var(--color-mid-gray);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-card-link{ display:inline-block;margin-top:12px;font-size:0.85rem;font-weight:600;color:var(--color-accent)} .news-card-link:hover{ color:var(--color-accent-light)} .news-filter{ display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px} .news-filter-btn{ padding:8px 20px;border:1px solid var(--color-light-gray);border-radius:20px;background:transparent;font-size:0.88rem;cursor:pointer;transition:var(--transition);color:var(--color-dark-gray)} .news-filter-btn.active,.news-filter-btn:hover{ background:var(--color-accent);color:#1A1A2E !important;border-color:var(--color-accent)} .design-scheme-section{ background:var(--color-off-white)} .scheme-timeline{ margin-top:48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px} .scheme-phase{ background:#fff;border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);border:1px solid var(--color-light-gray)} .phase-header{ margin-bottom:20px} .phase-tag{ display:inline-block;background:var(--color-accent);color:#1A1A2E !important;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;border-radius:20px;margin-bottom:8px} .phase-header h3{ font-family:var(--font-heading);font-size:1.05rem;color:var(--color-primary);margin:0} .scheme-steps{ display:flex;flex-direction:column;gap:12px} .scheme-step{ display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--color-off-white);border-radius:10px;cursor:pointer;transition:var(--transition);border:1px solid transparent} .scheme-step:hover{ background:#fff;border-color:var(--color-accent);transform:translateX(4px)} .step-num{ width:28px;height:28px;background:var(--color-accent);color:#1A1A2E !important;border-radius:50%;display:flex;align-items:center;justify-content:flex-start;font-size:0.75rem;font-weight:700;flex-shrink:0;margin-top:2px} .scheme-step h4{ font-size:0.9rem;font-weight:600;color:var(--color-primary);margin:0 0 4px} .scheme-step p{ font-size:0.8rem;color:var(--color-mid-gray);margin:0;line-height:1.5} .about-hero-video-section{ position:relative;width:100%;max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start} .about-video-wrap{ position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;max-width:100%;left:50%;transform:translateX(-50%)} .about-video-bg{ width:100%;height:100%;object-fit:cover} .about-hero-video-section.hero-fullpage{ height:1000px;min-height:1000px;max-height:1000px;margin:0;padding:0} .about-hero-video-section.hero-fullpage .about-video-wrap{ max-width:100% !important;left:50% !important;transform:translateX(-50%) !important} .about-hero-video-section.hero-fullpage .about-video-bg{ width:100%;height:100%;object-fit:cover} .about-video-content{ position:relative;z-index:1;max-width:100%;margin:0 auto;padding:32px 28px;text-align:left} .about-video-content .section-subtitle,.about-video-content h1,.about-video-content .breadcrumb{ text-align:left} .about-video-content>p{ text-align:justify;text-justify:inter-word;hyphens:auto;line-height:1.6;max-width:100%} .about-hero-video-section *{ max-width:100%;box-sizing:border-box} .about-hero-video-section .container,.about-content-section .container,.about-core-section .container,.about-team-section .container,.about-csr-section .container{ text-align:center} .about-hero-video-section p,.about-content-section .section-desc,.about-core-section .section-desc,.about-team-section .section-desc,.about-csr-section .section-desc{ max-width:700px;margin:0 auto 2rem;text-align:center} .about-hero-video-section .container>p{ margin:0 auto} .about-hero-video-section img,.about-content-section img,.about-core-section img,.about-team-section img,.about-csr-section img{ margin:0 auto} .about-text-block p{ text-align:justify;text-justify:inter-word;hyphens:auto;line-height:1.6;margin-bottom:1.5rem;padding:0} .about-text-block{ max-width:100%;margin:0 auto;padding:0 20px} .about-table-wrap{ overflow-x:auto;margin:24px auto 16px;max-width:100%;border-radius:10px;border:1px solid #e8e0d6} .about-table{ width:100%;border-collapse:collapse;font-size:0.93rem;font-family:var(--font-sans,Inter,sans-serif)} .about-table thead th{ background:var(--color-dark,#1a1a1a);color:#fff;padding:16px 20px;text-align:left;font-weight:600;font-size:0.86rem;letter-spacing:0.8px;text-transform:uppercase;white-space:nowrap} .about-table tbody td{ padding:14px 20px;border-bottom:1px solid #ece7df;color:var(--color-dark,#2a2a2a);line-height:1.6;vertical-align:top} .about-table tbody tr:nth-child(even){ background:#faf8f5} .about-table tbody tr:hover{ background:#f3efe7;transition:background 0.2s} .about-table .label-col{ font-weight:600;color:var(--color-accent,#c4a882);white-space:nowrap;min-width:140px} .about-table .val-col{ color:var(--color-dark,#1a1a1a)} @media(max-width:768px){ .about-table thead th{ padding:12px 14px;font-size:0.78rem} .about-table tbody td{ padding:10px 14px;font-size:0.82rem} .about-table .label-col{ min-width:100px}} .info-card-grid{ margin:24px 0} .info-card-grid-title{ font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--color-primary);margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--color-accent);display:inline-block} .info-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px} @media (min-width: 1025px){ .info-cards{ grid-template-columns:repeat(5,1fr)}} .info-card{ background:#fff;border-radius:var(--radius-md);padding:20px;border:1px solid var(--color-light-gray);transition:all 0.3s ease;display:flex;flex-direction:column;gap:6px} .info-card:hover{ transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.06),0 0 0 1px rgba(212,175,55,0.12);border-color:var(--color-accent)} .info-card-icon{ font-size:1.5rem;margin-bottom:4px} .info-card-label{ font-size:0.78rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.6px} .info-card-value{ font-size:0.92rem;color:var(--color-primary);line-height:1.5;font-weight:500} @media (max-width: 1024px){ .info-cards{ grid-template-columns:repeat(2,1fr)}} @media (max-width: 640px){ .info-cards{ grid-template-columns:1fr} .info-card{ padding:16px}} .service-card-grid{ margin:24px 0} .service-card-grid-title{ font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--color-primary);margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--color-accent);display:inline-block} .service-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:24px} .service-card{ background:#fff;border-radius:var(--radius-md);padding:24px 20px;border:1px solid var(--color-light-gray);transition:all 0.3s ease;text-align:center} .service-card:hover{ transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08);border-color:var(--color-accent)} .service-card-icon{ font-size:2rem;margin-bottom:10px} .service-card-title{ font-size:0.92rem;font-weight:700;color:var(--color-primary);margin-bottom:8px} .service-card-desc{ font-size:0.82rem;color:var(--color-mid-gray);line-height:1.6} @media (max-width: 1024px){ .service-cards{ grid-template-columns:repeat(2,1fr)}} @media (max-width: 640px){ .service-cards{ grid-template-columns:1fr} .service-card{ padding:20px 16px}} .advantage-card-grid{ margin:24px 0} .advantage-card-grid-title{ font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--color-primary);margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--color-accent);display:inline-block} .advantage-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:24px} @media (min-width: 1025px){ .advantage-cards{ grid-template-columns:repeat(5,1fr)}} .advantage-card{ background:#fff;border-radius:var(--radius-md);padding:22px 18px;border:1px solid var(--color-light-gray);transition:all 0.3s ease;position:relative;overflow:hidden} .advantage-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-dark))} .advantage-card:hover{ transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08)} .advantage-card-label{ font-size:0.75rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:10px} .advantage-card-value{ font-size:0.88rem;font-weight:700;color:var(--color-primary);margin-bottom:8px;line-height:1.4} .advantage-card-detail{ font-size:0.78rem;color:var(--color-mid-gray);line-height:1.6} @media (max-width: 1199px){ .advantage-cards{ grid-template-columns:repeat(3,1fr)}} @media (max-width: 768px){ .advantage-cards{ grid-template-columns:repeat(2,1fr)}} @media (max-width: 480px){ .advantage-cards{ grid-template-columns:1fr}} .contact-card-grid{ margin:24px 0} .contact-card-grid-title{ font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--color-primary);margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--color-accent);display:inline-block} .contact-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:24px} .contact-card{ background:#fff;border-radius:var(--radius-md);padding:20px;border:1px solid var(--color-light-gray);transition:all 0.3s ease;display:flex;align-items:flex-start;gap:14px} .contact-card:hover{ transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08);border-color:var(--color-accent)} .contact-card-icon{ font-size:1.4rem;flex-shrink:0;margin-top:2px} .contact-card-body{ display:flex;flex-direction:column;gap:4px} .contact-card-label{ font-size:0.75rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.6px} .contact-card-value{ font-size:0.88rem;color:var(--color-primary);line-height:1.5} .contact-card-value a{ color:var(--color-primary);text-decoration:none;transition:color 0.2s} .contact-card-value a:hover{ color:var(--color-accent)} @media (max-width: 1024px){ .contact-cards{ grid-template-columns:repeat(2,1fr)}} @media (max-width: 640px){ .contact-cards{ grid-template-columns:1fr} .contact-card{ padding:16px}} .spec-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:0 auto} .spec-grid>.spec-item:last-child:nth-child(odd){ grid-column:1 / -1} .spec-item{ background:#fff;border-radius:var(--radius-md);padding:18px 20px;border:1px solid var(--color-light-gray);transition:all 0.3s ease;display:flex;justify-content:space-between;align-items:center;gap:12px} .spec-item:hover{ border-color:var(--color-accent);box-shadow:0 4px 12px rgba(0,0,0,0.06)} .spec-item-left{ display:flex;flex-direction:column;gap:2px} .spec-item-name{ font-size:0.88rem;font-weight:600;color:var(--color-primary);line-height:1.3} .spec-item-name-en{ font-size:0.72rem;color:var(--color-mid-gray);font-weight:400} .spec-item-right{ text-align:right;display:flex;flex-direction:column;gap:2px} .spec-item-value{ font-size:1rem;font-weight:700;color:var(--color-primary)} .spec-item-meta{ font-size:0.7rem;color:var(--color-accent);font-weight:500} @media (max-width: 768px){ .spec-grid{ grid-template-columns:1fr} .spec-item{ padding:14px 16px}} .compare-cards{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:16px 0} .compare-card{ border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-light-gray)} .compare-card-header{ background:var(--color-primary);color:#fff;padding:12px 16px;font-size:0.85rem;font-weight:600;text-align:center} .compare-card-header.winner{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark))} .compare-card-body{ background:#fff;padding:16px} .compare-row{ display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--color-light-gray);font-size:0.85rem} .compare-row:last-child{ border-bottom:none} .compare-row-label{ color:var(--color-mid-gray);font-size:0.8rem} .compare-row-value{ font-weight:700;color:var(--color-primary)} .compare-row-value.highlight{ color:var(--color-accent)} @media (max-width: 640px){ .compare-cards{ grid-template-columns:1fr}} .hsst-form{max-width:680px;margin:32px auto 0;text-align:left} .hsst-form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:0} .hsst-form-group{margin-bottom:22px} .hsst-form-label{display:block;font-size:13px;font-weight:600;color:#1A1A2E !important;margin-bottom:8px;letter-spacing:0.4px} .hsst-form-label .required{color:#D4AF37 !important;margin-left:2px;font-weight:700} .hsst-form-input{ width:100% !important;height:48px !important;padding:12px 16px !important;background:#FFFFFF !important;border:2px solid #C4B8AA !important;border-radius:6px !important;color:#1A1A1A !important;font-size:14px !important;box-sizing:border-box !important;transition:border-color 0.3s ease,box-shadow 0.3s ease !important;outline:none !important;-webkit-appearance:none !important;appearance:none !important} .hsst-form-input:focus{border-color:#D4AF37 !important;box-shadow:0 0 0 3px rgba(212,175,55,0.2) !important;background:#FFFFFF !important} .hsst-form-input.error{border-color:#E74C3C !important;background:#FEF5F5 !important;color:#333 !important} .hsst-form-input::placeholder{color:#9B9285 !important;font-style:normal !important} .hsst-form-textarea{ width:100% !important;min-height:110px !important;padding:14px 16px !important;background:#FFFFFF !important;border:2px solid #C4B8AA !important;border-radius:6px !important;color:#1A1A1A !important;font-size:14px !important;box-sizing:border-box !important;resize:vertical !important;transition:border-color 0.3s ease,box-shadow 0.3s ease !important;outline:none !important;font-family:inherit !important;line-height:1.7 !important;-webkit-appearance:none !important;appearance:none !important} .hsst-form-textarea:focus{border-color:#D4AF37 !important;box-shadow:0 0 0 3px rgba(212,175,55,0.2) !important;background:#FFFFFF !important} .hsst-form-select{ width:100% !important;height:48px !important;padding:10px 36px 10px 16px !important;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center !important;border:2px solid #C4B8AA !important;border-radius:6px !important;color:#1A1A1A !important;font-size:14px !important;box-sizing:border-box !important;outline:none !important;appearance:none !important;-webkit-appearance:none !important;cursor:pointer !important} .hsst-form-select:focus{border-color:#D4AF37 !important;box-shadow:0 0 0 3px rgba(212,175,55,0.2) !important;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center !important} .hsst-form-btn{display:inline-block;width:auto;min-width:200px;height:50px;padding:0 48px;background:linear-gradient(135deg,#D4AF37 0%,#C5A059 100%) !important;color:#111 !important;font-size:15px;font-weight:700;border:none;border-radius:6px;cursor:pointer;transition:all 0.3s ease;letter-spacing:1.5px;text-align:center} .hsst-form-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(212,175,55,0.35)} .hsst-form-btn:disabled{opacity:0.65;cursor:not-allowed;transform:none;box-shadow:none} .hsst-form-error{color:#E74C3C !important;font-size:11.5px;margin-top:5px;display:none;line-height:1.4} .hsst-form-error.show{display:block !important} .hsst-form-hint{font-size:12px;color:#999 !important;margin-top:5px;line-height:1.5} .hsst-form-divider{height:1px;background:linear-gradient(to right,transparent,rgba(212,175,55,0.3),transparent);margin:28px 0} .hsst-form-privacy{font-size:12px;color:#999 !important;text-align:center;margin-top:24px;line-height:1.7} .hsst-form-success{display:none;text-align:center;padding:40px 20px;background:#FFFFFF;border-radius:12px;border:1px solid #E6DCC8;border-top:4px solid #C9A84C} .hsst-form-success.show{display:block !important} .hsst-form-success-icon{font-size:44px;margin-bottom:14px;color:#C9A84C} .hsst-form-success h3{font-size:20px;color:#1A1A1A !important;margin-bottom:8px} .hsst-form-success p{font-size:14px;color:#444444 !important;line-height:1.7} @media(max-width:768px){.hsst-form-row{grid-template-columns:1fr;gap:0}.hsst-form-btn{width:100%;min-width:0}} .form-scene-desc{color:#666;font-size:13px;margin-bottom:18px;text-align:center;line-height:1.6} .inquiry-form-section{background:#fff} .inquiry-form{max-width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px} .inquiry-form .form-full{grid-column:1/-1} .inquiry-form label{display:block;font-size:0.85rem;font-weight:600;color:var(--color-dark,#1a1a1a);margin-bottom:6px;letter-spacing:0.5px} .inquiry-form label .required{color:#c4a882;margin-left:2px} .inquiry-form input,.inquiry-form select,.inquiry-form textarea{width:100%;padding:12px 16px;border:1.5px solid #e0d8ce;border-radius:8px;font-size:0.95rem;font-family:inherit;color:var(--color-dark,#1a1a1a);background:#faf8f5;transition:border-color 0.3s;box-sizing:border-box} .inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{outline:none;border-color:var(--color-accent,#c4a882);box-shadow:0 0 0 3px rgba(196,168,130,0.15)} .inquiry-form textarea{min-height:140px;resize:vertical} .inquiry-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px} .inquiry-form button[type="submit"]{grid-column:1/-1;justify-self:start;padding:14px 48px;background:var(--color-dark,#1a1a1a);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;letter-spacing:1px;transition:background 0.3s} .inquiry-form button[type="submit"]:hover{background:var(--color-accent,#c4a882)} .form-note{grid-column:1/-1;font-size:0.8rem;color:#999;margin-top:-8px} @media(max-width:600px){.inquiry-form{grid-template-columns:1fr}} .products-cta{ background:#F5F0EB;color:#1A1A2E;padding:60px 0} .products-cta h2,.products-cta p{ color:#1A1A2E} .products-cta .form-container-wide{max-width:100%;margin:0 auto;padding:0 24px} .products-cta .form-group{margin-bottom:16px;text-align:left} .products-cta .form-group label{display:block;font-size:13px;color:#1A1A2E;margin-bottom:6px} .products-cta .form-group input,.products-cta .form-group textarea{width:100%;height:42px;padding:0 14px;background:#fff;border:1px solid #ddd;border-radius:6px;color:#1A1A2E;font-size:14px;box-sizing:border-box} .products-cta .form-group textarea{height:90px;padding:12px 14px;resize:vertical} .products-cta .form-group input:focus,.products-cta .form-group textarea:focus{border-color:#C9A84C;outline:none} .products-cta button[type="submit"]{width:100%;height:46px;background:#C9A84C;color:#111;font-size:15px;font-weight:700;border:none;border-radius:6px;cursor:pointer;transition:all 0.3s ease;margin-top:6px} .products-cta button[type="submit"]:hover{background:#D4AF37;transform:translateY(-1px)} .form-trust-badges{display:flex;gap:18px;justify-content:center;margin-top:22px;flex-wrap:wrap} .form-trust-badge{font-size:12px;color:#B8860B;padding:6px 16px;border:1px solid rgba(184,134,11,0.3);border-radius:20px} @media(max-width:768px){.products-cta .form-container-wide{padding:0 16px}} .about-video-content{ display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%} .about-video-content .section-subtitle,.about-video-content h1,.about-video-content .breadcrumb{ max-width:100%;text-align:left;margin-left:0;margin-right:auto} .about-video-content>p{ text-align:justify;text-justify:inter-word;hyphens:auto;line-height:1.6;width:100%} .section-padding{ overflow-x:clip} .stats-row{ display:flex;flex-direction:row;justify-content:space-between;align-items:center;max-width:100%;width:90%;margin:20px auto 0;padding:0} .stats-row .stat-number{ font-size:2.4rem;font-weight:700;color:var(--color-accent);line-height:1.2;margin-bottom:8px} .stats-row .stat-label{ font-size:0.9rem;color:var(--color-mid-gray);line-height:1.4} @media (max-width: 768px){ .stats-row{ flex-wrap:wrap;gap:24px} .stats-row{ width:40%}} .stats-row .stat-number{ font-size:2rem} .tech-service-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px} .tech-card{ background:#fff;border-radius:var(--radius-lg);padding:28px;border:1px solid var(--color-light-gray);box-shadow:var(--shadow-sm);transition:var(--transition)} .tech-card:hover{ box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--color-accent)} .tech-icon{ font-size:2.2rem;margin-bottom:16px} .tech-card h4{ font-family:var(--font-heading);font-size:1rem;color:var(--color-primary);margin-bottom:10px} .tech-card p{ font-size:0.88rem;color:var(--color-mid-gray);line-height:1.7;margin:0} .product-quick-nav{ display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:48px} .quick-nav-item{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--color-light-gray);text-decoration:none;transition:var(--transition);box-shadow:var(--shadow-sm)} .quick-nav-item:hover{ transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-accent)} .qn-icon{ width:72px;height:72px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;position:relative} .qn-icon img{ width:100%;height:100%;object-fit:cover;border-radius:50%} .quick-nav-item span{ font-weight:600;color:var(--color-primary);font-size:0.9rem;text-align:center} .quick-nav-item small{ font-size:0.75rem;color:var(--color-mid-gray);text-transform:uppercase;letter-spacing:0.5px} .series-header{ display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:center;margin-bottom:28px;padding-bottom:40px;border-bottom:2px solid var(--color-light-gray)} @media (max-width: 900px){ .series-header{ grid-template-columns:1fr} .series-header-image{ display:none}} .series-label{ display:inline-block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--color-accent);margin-bottom:8px} .series-title{ color:#1A1A2E;font-family:var(--font-heading);font-size:2rem;color:var(--color-primary);margin:0 0 16px} .series-desc{ font-size:0.92rem;color:var(--color-mid-gray);line-height:1.6;margin:0 0 24px} .series-stats{ display:flex;flex-wrap:wrap;gap:20px} .stat-num{ font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--color-accent);line-height:1} .stat-label{ font-size:0.78rem;color:var(--color-mid-gray);margin-top:4px} .series-header-image{ border-radius:var(--radius-lg);overflow:hidden;height:240px} .series-header-image img{ width:100%;height:100%;object-fit:cover} .stone-color-groups{ display:flex;flex-direction:column;gap:20px} .color-group-header{ display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--color-light-gray)} .color-dot{ width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,0.15);flex-shrink:0} .color-group-header h3{ font-family:var(--font-heading);font-size:1.1rem;color:var(--color-primary);margin:0} .variety-count{ margin-left:auto;font-size:0.78rem;color:var(--color-mid-gray);background:var(--color-light-gray);padding:2px 10px;border-radius:20px} .stone-cards-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px} .stone-card{ background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 0.4s;cursor:pointer;position:relative} .stone-card:hover{ transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,0.12);border-color:var(--color-accent)} .stone-card-img{ width:100%;aspect-ratio:4/3;overflow:hidden;position:relative;background:#f5f0eb;cursor:zoom-in} .stone-card-img img{ width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)} .stone-card:hover .stone-card-img img{ transform:scale(1.08)} .stone-card-zoom{ position:absolute;top:10px;right:10px;width:30px;height:30px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.7);transition:opacity 0.3s,transform 0.3s;font-size:0.85rem} .stone-card:hover .stone-card-zoom{ opacity:1;transform:scale(1)} .stone-card-info{ padding:16px 20px} .stone-card-info h4{ font-size:0.95rem;font-weight:600;color:var(--color-primary);margin:0 0 4px;line-height:1.4} .stone-card-info p{ font-size:0.8rem;color:var(--color-mid-gray);margin:0 0 8px} .stone-tags{ display:flex;gap:6px;flex-wrap:wrap} .stone-tag{ font-size:0.7rem;padding:3px 10px;background:rgba(184,134,11,0.08);color:var(--color-accent);border-radius:10px;font-weight:500} .stone-card-origin{ font-size:0.72rem;color:var(--color-mid-gray);margin-top:4px;display:flex;align-items:center;gap:4px} .stone-card-detail-link{ display:inline-block;margin-top:8px;font-size:0.78rem;font-weight:600;color:var(--color-accent);text-decoration:none;transition:color 0.2s} .stone-card-detail-link:hover{ color:var(--color-accent-dark)} .surface-treatment-bar{ margin-top:48px;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--color-light-gray);padding:24px 32px;box-shadow:var(--shadow-sm)} .surface-treatment-inner{ display:flex;align-items:center;gap:24px;flex-wrap:wrap} .st-label{ font-size:0.85rem;font-weight:600;color:var(--color-primary);white-space:nowrap} .st-options{ display:flex;gap:16px;flex-wrap:wrap;flex:1} .st-option{ display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--color-dark-gray);text-align:center} .st-icon{ font-size:1.2rem} .st-cta{ font-size:0.85rem;font-weight:600;color:var(--color-accent);white-space:nowrap;text-decoration:none;transition:color 0.2s} .st-cta:hover{ color:var(--color-accent-light)} .product-cat-section:nth-of-type(even){ background:var(--color-off-white)} .series-nav-bar{ background:#fff;border-bottom:1px solid #eee;position:sticky;top:70px;z-index:90;padding:12px 0;box-shadow:0 2px 10px rgba(0,0,0,0.05)} .series-nav-scroll{ display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .series-nav-scroll::-webkit-scrollbar{ height:4px} .series-nav-scroll::-webkit-scrollbar-thumb{ background:#ddd;border-radius:2px} .series-nav-item{ display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f8f8f8;border-radius:20px;color:#333;text-decoration:none;white-space:nowrap;font-size:14px;transition:all 0.3s} .series-nav-item:hover{ background:var(--color-primary);color:#fff !important} .series-nav-item:hover .sn-dot{ transform:scale(1.2)} .sn-dot{ width:12px;height:12px;border-radius:50%;transition:transform 0.3s} .sn-text{ font-weight:500} .series-overview-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin-top:40px;position:relative;z-index:1} .series-overview-card{ background:#fff;border-radius:14px;padding:24px 20px;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:2px solid transparent} .series-overview-card::before{ content:'';position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--stone-color,#c8a96e);border-radius:14px 0 0 14px;pointer-events:none;transition:width 0.3s} .series-overview-card:hover{ transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,0.15);border-color:var(--color-accent)} .series-overview-card:hover::before{ width:8px} a.series-card-link{ overflow:visible;display:block;text-decoration:none;color:inherit;position:relative;z-index:100 !important;touch-action:manipulation} a.series-card-link .series-overview-card,a.series-card-link .soc-number,a.series-card-link .soc-title,a.series-card-link .soc-count,a.series-card-link .soc-desc{ pointer-events:none !important} .series-overview-card::before{ pointer-events:none !important} .soc-number{ font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--stone-color,#c8a96e);line-height:1;margin-bottom:2px} .soc-title{ font-size:0.85rem;font-weight:600;color:#333;margin-bottom:2px;line-height:1.2} .soc-count{ font-size:0.75rem;color:#c8a96e;font-weight:600;margin-bottom:2px} .soc-desc{ font-size:0.7rem;color:#666;line-height:1.3} a.series-overview-card{ display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:inherit;position:relative;z-index:100 !important;cursor:pointer;touch-action:manipulation} a.series-overview-card .series-overview-icon,a.series-overview-card .series-overview-text,a.series-overview-card .series-overview-arrow,a.series-overview-card .series-overview-text h3,a.series-overview-card .series-overview-text p{ pointer-events:none !important} a.series-overview-card::before{ pointer-events:none !important} .series-overview-icon{ font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:#c8a96e;line-height:1;margin-bottom:2px} .series-overview-text{ flex:1} .series-overview-text h3{ font-size:0.85rem;font-weight:600;text-align:center;color:#333;margin:0 0 2px;line-height:1.2} .series-overview-text p{ font-size:0.7rem;color:#666;line-height:1.3;margin:0} .series-overview-arrow{ font-size:0.75rem;color:#c8a96e;font-weight:600;line-height:1;margin-top:2px} .product-series-section{ padding:0 !important;margin:0 !important;scroll-margin-top:100px !important} [id]:target,section[id],.section-padding[id]{ scroll-margin-top:100px !important} [id^="s"]{ scroll-margin-top:100px !important} .series-section-header{ padding:24px 0 !important;max-width:100%;margin:0 auto;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--color-accent),rgba(212,175,55,0.2),transparent) 1;display:flex;align-items:center;box-sizing:border-box;overflow:visible;position:relative} .series-section-header::after{ content:'';position:absolute;bottom:-2px;left:40px;width:60px;height:3px;background:var(--color-accent);border-radius:2px} .series-section-header .container{ max-width:100%;padding:0 40px} .series-section-content{ padding:20px 0} .series-header{ display:flex;align-items:center;gap:24px;width:100%} .series-header-left{ flex:1;display:flex;align-items:center;gap:24px;padding:0} .series-number{ font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:700;color:var(--color-primary);line-height:1;min-width:50px;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .series-header-content{ flex:1} .series-label{ font-size:0.7rem;font-weight:600;color:#c8a96e;text-transform:uppercase;letter-spacing:2px;margin-bottom:2px;display:block} .series-title{ font-family:"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:#1A1A2E;margin-bottom:2px} .series-desc{ font-size:1rem;color:#666;line-height:1.6;margin-bottom:20px} .series-desc-en{ font-size:0.7rem;color:#1A1A2E;opacity:0.65;font-weight:400;letter-spacing:1px} .series-meta{ display:flex;flex-wrap:wrap;gap:24px} .meta-item{ font-size:0.9rem;color:#666} .meta-item strong{ color:#333;font-weight:600} .series-header-image{ width:240px;height:80px;border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.12)} .series-header-image img{ width:100%;height:100%;object-fit:cover} .series-more-link{ text-align:center;margin-top:24px} .btn{ display:inline-block;padding:14px 32px;font-size:1rem;font-weight:600;text-decoration:none;border-radius:8px;transition:all 0.3s;cursor:pointer;border:none} .btn-primary{ background:linear-gradient(135deg,#c8a96e 0%,#a88b5a 100%);color:#1A1A2E !important} .btn-primary:hover{ background:linear-gradient(135deg,#a88b5a 0%,#8a7348 100%);transform:translateY(-2px);box-shadow:0 4px 15px rgba(200,169,110,0.4)} .btn-gold{ background:linear-gradient(135deg,#d4af37 0%,#b8962f 100%);color:#1a1a2e} .btn-gold:hover{ background:linear-gradient(135deg,#b8962f 0%,#9a7d28 100%);transform:translateY(-2px);box-shadow:0 4px 15px rgba(212,175,55,0.4)} .btn-outline-light{ background:transparent;color:#1A1A2E !important;border:2px solid #fff} .btn-outline-light:hover{ background:#fff;color:#333} .stone-modal{ display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;align-items:center;justify-content:flex-start;color:#fff} .stone-modal.active{ display:flex} .stone-modal-content{ background:#fff;border-radius:16px;max-width:95%;width:90%;max-height:90vh;overflow-y:auto;position:relative} .stone-modal-close{ position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#333;color:#1A1A2E !important;border:none;font-size:1.5rem;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:flex-start} .stone-modal-body{ display:flex} .stone-modal-img{ width:50%;height:400px;overflow:hidden} .stone-modal-img img{ width:100%;height:100%;object-fit:cover} .stone-modal-info{ width:50%;padding:28px} .stone-modal-info h3{ font-family:"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",'Playfair Display',serif;font-size:1.8rem;color:#333;margin-bottom:8px} .modal-en{ font-size:1rem;color:#888;margin-bottom:16px} .modal-tags{ display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .modal-tag{ font-size:0.8rem;padding:4px 12px;background:#f5f0eb;color:#666;border-radius:12px} .modal-desc{ font-size:0.95rem;color:#555;line-height:1.7;margin-bottom:24px} .modal-specs h4{ font-size:1rem;font-weight:600;color:#333;margin-bottom:12px} .modal-specs ul{ list-style:none;padding:0} .modal-specs li{ font-size:0.9rem;color:#555;padding:6px 0;border-bottom:1px solid #eee} @media (max-width: 900px){ .series-header{ flex-direction:column} .series-header-image{ width:100%;height:200px} .series-number{ color:#1A1A2E;font-size:3rem;min-width:50px} .series-title{ color:#1A1A2E;font-size:2rem} .stone-modal-body{ flex-direction:column} .stone-modal-img{ width:100%;height:250px} .stone-modal-info{ width:100%;padding:24px}} @media (max-width: 600px){ .series-nav-item{ padding:6px 12px;font-size:12px} .series-nav-item .sn-text{ display:none} .series-number{ color:#1A1A2E;font-size:2rem;min-width:40px} .series-title{ color:#1A1A2E;font-size:1.6rem} .series-meta{ flex-direction:column;gap:8px} .stone-cards-grid{ grid-template-columns:1fr}} .navbar .nav-logo-text strong{ color:#1A1A2E !important} .navbar .nav-logo-text small{ color:rgba(26,26,46,0.65)} .navbar .nav-links>a,.navbar .nav-dropdown>a{ color:var(--color-primary) !important} .navbar .nav-links>a:hover,.navbar .nav-dropdown>a:hover,.navbar .nav-links>a.active,.navbar .nav-dropdown>a.active{ color:var(--color-accent) !important} .navbar .nav-dropdown>a::after{ border-color:var(--color-primary) transparent transparent transparent} .mega-panel{ background:#F5F0EB;border-top:2px solid var(--color-accent);box-shadow:0 20px 60px rgba(0,0,0,0.4);overflow:visible !important} .mega-panel-link{ border-bottom:1px solid rgba(0,0,0,0.06)} .mega-panel-link:hover{ background:rgba(212,175,55,0.08)} .mega-panel-text strong{ color:var(--color-primary) !important} .mega-panel-text span{ color:rgba(26,26,46,0.6) !important} .mega-panel-viewall a{ color:var(--color-accent) !important} .dropdown-panel{ background:#F5F0EB;border-top:2px solid var(--color-accent);box-shadow:0 20px 60px rgba(0,0,0,0.4);overflow:visible !important} .dropdown-item{ color:var(--color-primary) !important;border-bottom:1px solid rgba(0,0,0,0.06)} .dropdown-item:hover{ background:rgba(212,175,55,0.1);color:var(--color-accent) !important} .hero{ background:linear-gradient(135deg,#F5F0EB 0%,#E8E4DF 50%,#D4CFC8 100%)} .cta-section{ background:#F5F0EB} .news-category-project{ background:rgba(139,115,85,0.12);color:#8B7355} .news-category-exhibition{ background:rgba(184,134,11,0.10);color:var(--color-accent-dark)} .stone-modal-overlay{ background:rgba(26,26,46,0.85);backdrop-filter:blur(8px);color:#fff} .stone-modal{ background:#F5F0EB;border-radius:16px;border-top:4px solid var(--color-accent);box-shadow:0 32px 80px rgba(0,0,0,0.3)} .stone-modal-header{ background:var(--color-primary);border-radius:12px 12px 0 0;color:#fff} .stone-modal-img-main{ border-radius:12px} .footer{ background:#F5F0EB;color:rgba(26,26,46,0.65);padding:32px 0 0;font-family:"Inter","PingFang HK","PingFang TC","Noto Sans CJK HK","Microsoft JhengHei","微軟正黑體",sans-serif} .footer-grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:24px;max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter) 28px;border-bottom:1px solid rgba(26,26,46,0.08)} .footer-brand{ grid-column:span 1;text-align:left !important;align-self:start} .footer-brand .nav-logo{ justify-content:flex-start !important;color:#1A1A2E !important;margin-bottom:16px;display:flex;align-items:center;gap:10px;text-decoration:none} .footer-brand .nav-logo-text{ display:flex;flex-direction:column;line-height:1.3} .footer-brand .nav-logo-text strong{ font-size:1rem;font-weight:600;color:#1A1A2E !important} .footer-brand .nav-logo-text small{ font-size:0.7rem;font-weight:400;color:rgba(26,26,46,0.55);text-transform:uppercase;letter-spacing:1px} .footer-brand p{ color:rgba(26,26,46,0.6);font-size:0.8rem;line-height:1.5;letter-spacing:0.3px;margin:12px 0 16px;max-width:95%;word-wrap:normal;overflow:hidden} .footer-copyright{ color:rgba(26,26,46,0.45);font-size:0.75rem;line-height:1.7;margin-top:8px} .footer-copyright:first-of-type{ margin-top:24px} .footer-social{ display:flex;gap:10px;margin-top:20px} .footer-social a{ width:36px;height:36px;border:1px solid rgba(26,26,46,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(26,26,46,0.7);transition:all 0.25s ease;font-size:0.85rem;text-decoration:none} .footer-social a:hover{ background:#D4AF37;border-color:#D4AF37;color:#1A1A2E;transform:translateY(-2px)} .footer-col{ display:flex;flex-direction:column;text-align:left} .footer-col h4{ color:#1A1A2E !important;font-size:0.88rem;font-weight:600;margin-bottom:20px;text-transform:uppercase;letter-spacing:1.5px;padding-bottom:12px;border-bottom:2px solid #D4AF37;display:inline-block} .footer-col ul{ list-style:none;padding:0;margin:0} .footer-col ul li{ margin-bottom:10px;padding-left:0} .footer-col ul li a{ color:rgba(26,26,46,0.65);font-size:0.85rem;font-weight:400;text-decoration:none;transition:all 0.2s ease;display:inline-block} .footer-col ul li a:hover{ color:#D4AF37;padding-left:6px} .footer-contact-info{ display:flex;flex-direction:column;gap:12px} .footer-contact-info p{ color:rgba(26,26,46,0.7);font-size:0.83rem;margin:0;display:flex;align-items:flex-start;gap:10px;line-height:1.5;text-align:left} .footer-contact-info p .icon{ flex-shrink:0;width:18px;color:#D4AF37} .footer-contact-info p strong{ color:#1A1A2E !important;font-weight:500} .footer-bottom{ max-width:var(--max-width);margin:0 auto;padding:20px var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:0.76rem;color:rgba(26,26,46,0.5) !important;background:#E8E4DF !important} .brand-intro{ color:rgba(26,26,46,0.6) !important;font-size:0.78rem !important;line-height:1.55 !important;letter-spacing:0.2px !important;margin-top:14px !important} .contact-item{ display:flex !important;align-items:baseline !important;gap:10px !important} .contact-item .icon{ flex-shrink:0;width:16px;text-align:center} .footer-bottom p{ margin:0;padding:0;font-size:0.72rem;color:rgba(26,26,46,0.45);text-align:left} @media (max-width: 1024px){ .footer-grid{ grid-template-columns:repeat(2,1fr) !important;gap:20px !important;padding:0 32px 36px !important}} @media (max-width: 640px){ .footer-grid{ grid-template-columns:1fr !important;gap:24px !important;padding:0 20px 28px !important} .footer-bottom{ padding:16px 20px !important;justify-content:flex-start !important}} .footer-col:nth-child(2) ul{ display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px 16px} .footer-col:nth-child(2) ul li{ margin-bottom:2px} .footer-col:nth-child(2) ul li a{ font-size:0.8rem;display:block} .inner-page .product-cat-section{ background:transparent} .inner-page .product-cat-section .container{ background:transparent;border-radius:0;padding:0;box-shadow:none} .inner-page .product-series-section{ background:transparent;padding:0 !important} .inner-page .product-series-section>.container{ background:transparent;border-radius:0;padding:0;box-shadow:none} .inner-page .series-overview-section{ background:transparent;padding:calc(var(--nav-height) + 20px) 0 60px 0;position:relative;z-index:1} .inner-page .series-overview-section .container{ background:transparent;border-radius:0;padding:0;box-shadow:none} .footer-col:nth-child(3) ul{ display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px 12px} .footer-col:nth-child(3) ul li{ margin-bottom:2px} .footer-col:nth-child(3) ul li a{ font-size:0.75rem;display:block} .navbar .nav-links>a.active,.navbar .nav-dropdown>a.active{ color:var(--color-accent) !important;font-weight:600 !important;position:relative} .navbar .nav-links>a.active::after,.navbar .nav-dropdown>a.active::after{ content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--color-accent) !important;width:100% !important} .nav-links>a.active,.nav-dropdown>a.active{ color:var(--color-accent) !important;font-weight:600 !important} .lang-switch{ display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:20px;background:rgba(212,175,55,0.15);border:1px solid rgba(26,26,46,0.12)} .lang-switch a{ padding:2px 8px;border-radius:12px;transition:all 0.2s ease} .lang-switch a:hover{ background:rgba(212,175,55,0.2)} .lang-switch a.active{ background:var(--color-accent);color:var(--color-primary) !important;font-weight:600} .news-modal-tpl{ display:none !important} .news-modal-overlay{ display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:9000;align-items:center;justify-content:center;padding:20px;overflow-y:auto;color:#fff} .news-modal-overlay.active{ display:flex} .news-modal{ background:#fff;border-radius:16px;max-width:760px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.35);margin:auto} .news-modal-close{ position:sticky;top:16px;float:right;margin:16px 16px 0 0;background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.12);border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;color:#333;display:flex;align-items:center;justify-content:center;z-index:10;flex-shrink:0;transition:background 0.2s} .news-modal-close:hover{ background:#f0f0f0} .news-modal-img-wrap{ width:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:16px 16px 0 0;background:#f5f5f5} .news-modal-img-wrap img{ width:100%;height:100%;object-fit:cover} .news-modal-body{ padding:28px 32px 36px} .news-modal-meta{ display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .news-modal-meta .news-date{ color:#888;font-size:0.875rem} .news-modal-title{ font-size:1.6rem;font-weight:700;line-height:1.3;color:#1a1a2e;margin:0 0 20px} .news-modal-text p{ font-size:1.05rem;line-height:1.6;color:#333;margin:0} @media (max-width: 600px){ .news-modal-overlay{ padding:0;align-items:flex-end;color:#fff} .news-modal{ border-radius:16px 16px 0 0;max-height:92vh} .news-modal-body{ padding:20px 20px 28px} .news-modal-title{ font-size:1.25rem}} @supports (-webkit-touch-callout: none){ :root{ --font-heading:'Playfair Display',"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",'PingFang SC','Hiragino Sans GB',-apple-system,serif;--font-body:'Inter',"PingFang HK","PingFang TC","Noto Sans CJK HK","Microsoft JhengHei","微軟正黑體",'PingFang SC','Hiragino Sans GB',-apple-system,sans-serif}} @media (max-width: 768px){ html{ overflow-x:clip;width:100%;max-width:100vw} *{ -webkit-tap-highlight-color:transparent;touch-action:manipulation} .section-padding{ padding:20px 0} .container{ width:92%} h1{ font-size:clamp(1.8rem,6vw,2.5rem);line-height:1.25} h2{ font-size:clamp(1.5rem,5vw,2rem);margin-bottom:0.75rem} h3{ font-size:clamp(1.1rem,4vw,1.4rem)} p{ font-size:0.95rem;line-height:1.7} .btn,button,.nav-links a,.footer-links a{ min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}} @media (max-width: 480px){ :root{ --nav-height:64px;--gutter:16px} .section-padding{ padding:16px 0} h1{ font-size:1.75rem;letter-spacing:-0.01em} h2{ font-size:1.4rem} h3{ font-size:1.15rem} p{ font-size:0.9rem;line-height:1.65} .container{ width:94%} .scenario-card,.featured-project-card,.product-cat-grid{ border-radius:12px} input,textarea,select{ font-size:16px !important;-webkit-appearance:none;border-radius:8px} .trust-items{ gap:12px} .trust-item{ padding:20px 12px} .trust-number{ font-size:1.6rem} .featured-projects-grid{ gap:12px} .featured-project-card .card-overlay{ padding:16px} .featured-project-card h4{ font-size:1rem} .product-cat-grid{ gap:20px} .product-cat-content h3{ font-size:1.3rem} .footer-grid{ gap:20px} .footer-bottom{ flex-direction:column;gap:16px;text-align:center}} @media (max-width: 375px){ h1{ font-size:1.6rem} h2{ font-size:1.25rem} .section-padding{ padding:16px 0} .trust-items{ grid-template-columns:repeat(2,1fr);gap:8px} .trust-item{ padding:16px 8px} .trust-number{ font-size:1.4rem} .trust-label{ font-size:0.7rem}} @supports (padding-top: env(safe-area-inset-top)){ .navbar{ padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} .mobile-menu{ padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)} body{ padding-bottom:env(safe-area-inset-bottom)}} @supports (-webkit-overflow-scrolling: touch){ .mobile-menu,.news-modal-body,.product-modal-body{ -webkit-overflow-scrolling:touch}} html{ -webkit-text-size-adjust:100%;text-size-adjust:100%} @media (max-width: 768px){ img{ image-rendering:-webkit-optimize-contrast} img[loading="lazy"]{ background:linear-gradient(110deg,#f0f0f0 8%,#f8f8f8 18%,#f0f0f0 33%);background-size:200% 100%}} @media (max-width: 768px){ .lang-switcher{ position:relative;z-index:1001} .lang-switcher a{ padding:8px 12px;font-size:0.85rem;min-height:36px}} @media (max-width: 900px){ .mega-panel{ min-width:auto;width:calc(100vw - 32px);left:16px !important;right:16px !important;transform:none !important} .mega-grid{ grid-template-columns:1fr;gap:24px} .mega-featured{ display:none}} @media (max-width: 480px){ .product-quick-nav{ grid-template-columns:repeat(2,1fr);gap:10px} .product-quick-item{ padding:12px 8px} .product-quick-item .num{ font-size:1.2rem} .product-quick-item .title{ font-size:0.8rem} .product-quick-item .desc{ font-size:0.7rem}} @media (max-width: 768px){ .contact-hero-content h1{ font-size:2rem} .contact-info-grid{ grid-template-columns:1fr;gap:24px} .contact-form-section .container{ padding:24px 16px} .form-row{ grid-template-columns:1fr;gap:0}} @media (max-width: 768px){ .project-filter{ flex-wrap:wrap;gap:8px} .project-filter button{ padding:8px 16px;font-size:0.85rem;flex:1;min-width:80px} .projects-grid{ grid-template-columns:1fr;gap:16px}} @media (max-width: 640px){ .news-grid{ grid-template-columns:1fr;gap:20px} .news-card{ border-radius:12px} .news-content{ padding:16px} .news-title{ font-size:1rem} .news-excerpt{ font-size:0.85rem}} @media (max-width: 768px){ .about-hero-content h1{ font-size:1.8rem} .about-intro-grid{ grid-template-columns:1fr;gap:20px} .timeline::before{ left:20px} .timeline-item{ padding-left:50px} .timeline-dot{ left:11px} .cert-grid{ grid-template-columns:repeat(2,1fr);gap:16px}} @media (max-width: 768px){ .hero{ min-height:70vh} .hero-content{ padding:0 12px} .hero-content h1{ font-size:1.8rem;margin-bottom:12px} .hero-content p{ font-size:0.9rem;margin-bottom:20px} .hero-buttons{ flex-direction:column;gap:10px} .hero-buttons .btn{ width:100%;justify-content:center;padding:10px 16px;font-size:0.82rem;white-space:nowrap}} @media (max-width: 768px){ .cta-section h2{ font-size:1.6rem} .cta-section p{ font-size:0.95rem}} @media (max-width: 768px){ .footer-grid{ grid-template-columns:1fr;gap:20px} .footer-brand{ text-align:center} .footer-social{ justify-content:center} .footer-links-grid{ grid-template-columns:repeat(2,1fr);gap:24px} .footer-contact-list li{ justify-content:center}} @media (max-width: 480px){ .footer-links-grid{ grid-template-columns:1fr;text-align:center} .footer-column h4::after{ left:50%;transform:translateX(-50%)}} @media screen and (max-width: 768px){ input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],textarea,select{ font-size:16px !important;transform:scale(1)}} @media (max-width: 768px){ .aos-init{ opacity:1 !important;transform:none !important;transition:none !important} .scenario-card:hover .scenario-card-bg,.featured-project-card:hover .card-bg,.product-cat-image img:hover{ transform:none}} @media (max-width: 900px){ .nav-toggle{ display:flex;flex-direction:column;justify-content:center;align-items:center;width:48px;height:48px;gap:6px;cursor:pointer;z-index:1001;padding:0;border-radius:8px;transition:background 0.3s ease;-webkit-tap-highlight-color:transparent} .nav-toggle:active{ background:rgba(212,175,55,0.15)} .nav-toggle span{ width:24px;height:2.5px;background:#1A1A2E;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:2px} .nav-toggle.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px)} .nav-toggle.active span:nth-child(2){ opacity:0;transform:translateX(-10px)} .nav-toggle.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px)}} @media (max-width: 900px){ .nav-links::before{ content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:-1} .nav-links.open::before{ opacity:1;visibility:visible} .nav-links{ position:fixed;top:0;right:-100%;width:320px;max-width:85vw;height:1000px;height:100dvh;background:linear-gradient(180deg,#F5F0EB 0%,#E8E4DF 100%);flex-direction:column;align-items:stretch;padding:80px 0 32px;gap:0;transition:right 0.4s cubic-bezier(0.4,0,0.2,1);z-index:999;overflow-y:auto;overflow-x:clip;-webkit-overflow-scrolling:touch;box-shadow:-8px 0 32px rgba(0,0,0,0.4);pointer-events:none} .nav-links.open{ right:0;pointer-events:auto} .nav-links>a,.nav-links>.nav-dropdown>a{ color:rgba(26,26,46,0.9) !important;padding:18px 24px;font-size:1.05rem;font-weight:500;border-bottom:1px solid rgba(0,0,0,0.06);width:100%;text-align:center;display:flex;align-items:center;justify-content:center;min-height:56px;transition:all 0.25s ease;position:relative;letter-spacing:0.5px} .nav-links>a::after,.nav-links>.nav-dropdown>a::after{ display:none !important} .nav-links>a.active,.nav-links>a:hover,.nav-links>.nav-dropdown>a.active,.nav-links>.nav-dropdown:hover>a{ color:var(--color-accent) !important;background:rgba(212,175,55,0.08)} .nav-links>a.active::before,.nav-links>.nav-dropdown>a.active::before{ content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:40px;height:2px;background:var(--color-accent);border-radius:1px} .nav-dropdown>a{ justify-content:center;gap:8px} .nav-dropdown>a::after{ content:'';display:inline-block !important;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid currentColor;transition:transform 0.3s ease;position:static !important;transform:none !important;opacity:0.6} .nav-dropdown.mobile-open>a::after{ transform:rotate(180deg) !important}} @media (max-width: 900px){ .mega-panel,.dropdown-panel{ display:none;position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border:none;border-radius:0;background:rgba(0,0,0,0.03);padding:0;margin:0;min-width:0;width:100%;max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1)} .nav-dropdown.mobile-open .mega-panel,.nav-dropdown.mobile-open .dropdown-panel{ display:block;max-height:none;overflow:visible} .mega-panel-grid{ display:flex;flex-direction:column;gap:0;padding:8px 0} .mega-panel-link{ display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid rgba(0,0,0,0.06);transition:all 0.2s ease;text-align:left} .mega-panel-link:last-child{ border-bottom:none} .mega-panel-link:active{ background:rgba(212,175,55,0.08)} .mega-panel-icon{ width:48px;height:48px;min-width:48px;border-radius:10px;overflow:hidden;background:rgba(212,175,55,0.15);display:flex;align-items:center;justify-content:center} .mega-panel-icon img{ width:100%;height:100%;object-fit:cover} .mega-panel-text{ display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .mega-panel-text strong{ font-size:0.95rem;color:rgba(26,26,46,0.95);font-weight:500;letter-spacing:0.3px;line-height:1.3} .mega-panel-text span{ font-size:0.75rem;color:rgba(26,26,46,0.5);font-weight:400;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mega-panel-viewall{ padding:16px 24px;border-top:1px solid rgba(0,0,0,0.06);text-align:center} .mega-panel-viewall a{ color:var(--color-accent) !important;font-size:0.9rem;font-weight:500;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;background:rgba(212,175,55,0.1);transition:all 0.2s ease} .mega-panel-viewall a:active{ background:rgba(212,175,55,0.2)} .dropdown-item{ display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid rgba(0,0,0,0.06);color:var(--color-primary) !important;font-size:0.95rem;transition:all 0.2s ease} .dropdown-item:active{ background:rgba(212,175,55,0.08);color:var(--color-accent) !important}} @media (max-width: 900px){ .lang-switch{ display:flex;align-items:center;justify-content:center;gap:0;border:none;border-top:1px solid rgba(0,0,0,0.08);padding:20px 24px;margin:16px 24px 0;background:transparent} .lang-switch a{ color:rgba(26,26,46,0.5) !important;font-size:0.9rem;font-weight:500;padding:10px 20px;min-width:60px;text-align:center;border-radius:20px;transition:all 0.25s ease;letter-spacing:1px} .lang-switch a:first-child{ border-radius:20px 0 0 20px} .lang-switch a:last-child{ border-radius:0 20px 20px 0} .lang-switch a:hover,.lang-switch a:active{ color:rgba(26,26,46,0.8) !important;background:rgba(212,175,55,0.1)} .lang-switch a.active{ color:var(--color-accent) !important;background:rgba(212,175,55,0.15);font-weight:600} .lang-divider{ color:rgba(26,26,46,0.2);font-size:0.8rem;padding:0 4px}} @supports (-webkit-touch-callout: none){ @media (max-width: 900px){ .nav-links{ padding-top:88px} .nav-links::after{ top:52px} .mega-panel-text strong{ font-weight:600} .nav-links>a,.mega-panel-text strong,.dropdown-item{ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}} @media (max-width: 375px){ .nav-links{ width:280px} .nav-links>a,.nav-links>.nav-dropdown>a{ padding:16px 20px;font-size:1rem;min-height:52px} .mega-panel-link{ padding:12px 20px;gap:12px} .mega-panel-icon{ width:44px;height:44px;min-width:44px} .mega-panel-text strong{ font-size:0.9rem} .mega-panel-text span{ font-size:0.7rem}} @media (max-width: 900px){ .nav-links,.nav-links.open,.mega-panel,.dropdown-panel,.nav-dropdown.mobile-open .mega-panel,.nav-dropdown.mobile-open .dropdown-panel{ will-change:transform,opacity} @media (prefers-reduced-motion: reduce){ .nav-links{ transition:none} .mega-panel,.dropdown-panel{ transition:none}}} @media print{ .navbar,.footer,.hero-buttons,.cta-section{ display:none} body{ font-size:12pt;line-height:1.5} a{ text-decoration:underline}} .about-hero-video-section{ width:100%;margin:0 auto;overflow:hidden;background:#F5F0EB} .about-hero-video-section:not(.hero-fullpage){ height:10vh;max-width:100%;margin-left:auto;margin-right:auto} .about-hero-video-section:not(.hero-fullpage) .about-video-wrap{ height:10vh !important;max-width:100% !important;left:0 !important;transform:none !important} @media (max-width: 1024px){ .about-hero-video-section.hero-fullpage{ height:600px !important;min-height:600px !important;max-height:600px !important} .about-hero-video-section.hero-fullpage .about-video-wrap{ max-width:100% !important}} @media (max-width: 768px){ .about-hero-video-section.hero-fullpage{ height:300px !important;min-height:300px !important;max-height:300px !important} .about-hero-video-section.hero-fullpage .about-video-wrap{ max-width:100% !important}} @media (max-width: 480px){ .about-hero-video-section.hero-fullpage{ height:220px !important;min-height:220px !important;max-height:220px !important} .about-hero-video-section.hero-fullpage .about-video-wrap{ max-width:100% !important}} @media (max-width: 900px){ .about-hero-video-section:not(.hero-fullpage){ max-width:100%}} @media (max-width: 768px){ .about-hero-video-section:not(.hero-fullpage){ max-width:100%;height:8vh} .about-hero-video-section:not(.hero-fullpage) .about-video-wrap{ height:8vh !important}} @media (max-width: 480px){ .about-hero-video-section:not(.hero-fullpage){ max-width:100%;height:6vh} .about-hero-video-section:not(.hero-fullpage) .about-video-wrap{ height:6vh !important}} .about-hero-video-section .about-video-content{ max-width:100%;margin:0 auto;width:90%} .tight-section{ padding-top:12px !important;padding-bottom:12px !important} .tight-section .container{ padding:16px 40px !important} .tight-section .text-left{ margin-bottom:16px !important} .tight-section .text-left{ margin-bottom:16px !important} .section-padding:has(+.about-hero-video-section){ padding-bottom:12px !important} .tight-section:has(+.about-hero-video-section){ padding-bottom:12px !important} .about-hero-video-section{ padding-top:0 !important;padding-bottom:0 !important} .about-hero-video-section .about-video-content{ padding:8px 0 !important} .before-video{ padding-bottom:0 !important} .before-video .container{ padding-bottom:0 !important} .footer-bottom,.cta-section,.footer,.hero,.page-header,.inner-page .navbar,.mega-panel,.dropdown-panel{ background:#F5F0EB !important} .nav-center-title{ display:none} @media (max-width: 900px){ .navbar .container{ display:flex;align-items:center;justify-content:space-between;position:relative} .nav-center-title{ display:block;position:absolute;left:50%;transform:translateX(-50%);font-family:"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",'Playfair Display',serif;font-size:1rem;font-weight:700;color:#1A1A2E;letter-spacing:2px;white-space:nowrap;pointer-events:none}} @media (max-width: 375px){ .nav-center-title{ font-size:0.85rem;letter-spacing:1px}} @supports (padding: env(safe-area-inset-bottom)){ .navbar{ padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} .footer{ padding-bottom:calc(32px + env(safe-area-inset-bottom))} .footer-bottom{ padding-bottom:calc(16px + env(safe-area-inset-bottom))} .whatsapp-float{ bottom:calc(20px + env(safe-area-inset-bottom))} .nav-links{ padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}} @media (max-width: 900px){ .nav-links>a,.nav-links>.nav-dropdown>a,.dropdown-item,.mega-panel-link,.lang-switch a{ min-height:48px;display:flex;align-items:center} .btn{ min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:14px 28px} .stone-tag{ padding:6px 12px;min-height:32px;display:inline-flex;align-items:center} .news-filter-btn,.project-filter button{ min-height:44px;display:inline-flex;align-items:center;justify-content:center}} @media (max-width: 900px){ .navbar{ height:auto;min-height:var(--nav-height,70px);padding:8px 16px;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)} .nav-container,.container{ padding-left:16px;padding-right:16px} .nav-logo{ display:flex;align-items:center;gap:8px} .nav-logo img{ height:36px !important} .nav-logo-text strong{ font-size:0.8rem} .nav-logo-text small{ font-size:0.55rem} .nav-links.open{ padding-top:calc(80px + env(safe-area-inset-top, 0px))} .nav-links>a,.nav-links>.nav-dropdown>a{ padding:16px 20px;font-size:1.05rem;letter-spacing:0.3px;border-bottom:1px solid rgba(0,0,0,0.06)} .mega-panel-link{ padding:14px 20px;gap:14px} .mega-panel-icon{ width:44px;height:44px;min-width:44px;border-radius:10px} .mega-panel-text strong{ font-size:0.95rem} .mega-panel-text span{ font-size:0.75rem}} @media (max-width: 768px){ .hero{ min-height:60vh;min-height:60dvh;padding-top:calc(var(--nav-height, 70px) + 20px)} .hero-content{ padding:0 20px} .hero-content h1{ font-size:clamp(1.6rem,7vw,2.4rem);margin-bottom:12px;line-height:1.2} .hero-content p{ font-size:0.95rem;margin-bottom:20px;line-height:1.6} .hero-buttons{ flex-direction:column;gap:10px;width:100%} .hero-buttons .btn{ width:100%;text-align:center;justify-content:center;padding:16px 24px;font-size:0.95rem} .scroll-indicator{ bottom:24px}} @media (max-width: 375px){ .hero{ min-height:55vh;min-height:55dvh} .hero-content h1{ font-size:1.5rem} .hero-content p{ font-size:0.9rem}} @media (max-width: 768px){ .page-header{ padding-top:calc(var(--nav-height, 70px) + 24px);padding-bottom:24px;min-height:auto} .page-header h1{ font-size:clamp(1.4rem,6vw,2rem);margin-bottom:8px} .page-header p{ font-size:0.9rem;line-height:1.6} .breadcrumb{ font-size:0.8rem;margin-top:12px}} @media (max-width: 768px){ .section-padding{ padding:20px 0} .inner-page .section-padding .container{ padding:0;border-radius:0} h2{ font-size:clamp(1.4rem,5vw,2rem);margin-bottom:12px} h3{ font-size:clamp(1.1rem,3.5vw,1.4rem)} p{ font-size:0.92rem;line-height:1.7} .section-subtitle{ font-size:0.9rem;margin-bottom:24px}} @media (max-width: 768px){ .about-hero-video-section:not(.hero-fullpage){ height:18vh} .about-hero-video-section:not(.hero-fullpage) .about-video-wrap{ height:18vh !important} .about-hero-video-section:not(.hero-fullpage) video{ height:18vh !important} .tight-section .container{ padding:12px 16px !important} .tight-section .text-left{ margin-bottom:8px !important} .about-stats{ grid-template-columns:repeat(3,1fr);gap:12px} .stat-number{ font-size:1.5rem} .stat-label{ font-size:0.7rem} .timeline-item{ padding-left:40px !important} .timeline-dot{ left:8px !important;width:16px;height:16px} .timeline-content{ margin-left:40px !important;width:calc(100% - 40px) !important;padding:16px} .cert-grid{ grid-template-columns:repeat(2,1fr);gap:12px}} @media (max-width: 480px){ .about-hero-video-section:not(.hero-fullpage){ height:12vh} .about-hero-video-section:not(.hero-fullpage) .about-video-wrap{ height:12vh !important} .about-hero-video-section:not(.hero-fullpage) video{ height:12vh !important}} @media (max-width: 375px){ .about-hero-video-section:not(.hero-fullpage){ height:10vh} .about-hero-video-section:not(.hero-fullpage) .about-video-wrap{ height:10vh !important} .about-hero-video-section:not(.hero-fullpage) video{ height:10vh !important}} @media (max-width: 768px){ .product-quick-nav{ grid-template-columns:repeat(3,1fr);gap:8px} .product-quick-item{ padding:10px 6px;border-radius:8px} .product-quick-item .num{ font-size:1rem} .product-quick-item .title{ font-size:0.72rem;line-height:1.3} .product-quick-item .desc{ font-size:0.65rem} .series-nav-bar{ top:60px;padding:8px 0} .series-nav-scroll{ gap:6px;padding:0 12px 8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory} .series-nav-item{ padding:8px 14px;font-size:0.82rem;scroll-snap-align:start;border-radius:20px} .sn-dot{ width:10px;height:10px} .series-overview-grid{ grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px} .series-overview-card{ height:auto;min-height:90px;max-height:none;padding:10px 12px;border-radius:8px} .soc-number{ font-size:1.3rem} .soc-title{ font-size:0.78rem} .soc-count{ font-size:0.68rem} .soc-desc{ font-size:0.65rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .series-overview-icon{ font-size:1.3rem} .series-overview-text h3{ font-size:0.78rem} .series-overview-text p{ font-size:0.65rem;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box} .series-section-header{ padding:14px 0 !important} .series-section-header .container{ padding:0 16px} .series-header{ flex-wrap:wrap;gap:8px} .series-header-left{ flex-wrap:wrap;gap:12px} .series-number{ font-size:1.4rem;min-width:30px} .series-title{ font-size:1rem} .series-desc{ font-size:0.85rem;margin-bottom:12px} .series-desc-en{ font-size:0.65rem} .series-header-image{ width:100%;height:60px} .series-meta{ gap:12px} .meta-item{ font-size:0.82rem} .stone-cards-grid{ grid-template-columns:repeat(2,1fr);gap:10px} .stone-card-img{ height:120px} .stone-card-info{ padding:10px} .stone-card-info h4{ font-size:0.78rem} .stone-card-info p{ font-size:0.7rem} .stone-tags{ gap:4px} .stone-tag{ font-size:0.6rem;padding:3px 8px}} @media (max-width: 375px){ .product-quick-nav{ grid-template-columns:repeat(2,1fr)} .series-overview-grid{ grid-template-columns:repeat(2,1fr);gap:8px} .stone-cards-grid{ grid-template-columns:repeat(2,1fr);gap:8px} .stone-card-img{ height:100px}} @media (max-width: 768px){ .project-filter{ flex-wrap:wrap;gap:6px;padding:0 4px} .project-filter button{ padding:8px 14px;font-size:0.82rem;flex:0 0 auto;border-radius:20px} .projects-grid{ grid-template-columns:1fr;gap:16px} .product-cat-section{ padding:0 !important} .inner-page .product-cat-section .container{ padding:16px;border-radius:0;box-shadow:none} .product-cat-image img{ height:200px;object-fit:cover} .project-card-overlay{ padding:16px} .project-card-overlay h4{ font-size:1rem} .project-card-overlay p{ font-size:0.85rem} .projects-masonry{ columns:1} .masonry-item{ break-inside:avoid;margin-bottom:16px}} @media (max-width: 768px){ .news-grid{ grid-template-columns:1fr;gap:16px} .news-card{ border-radius:10px;overflow:hidden} .news-card-img{ height:180px} .news-content{ padding:16px} .news-title{ font-size:1rem;line-height:1.4;margin-bottom:8px} .news-excerpt{ font-size:0.85rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-meta{ font-size:0.75rem} .news-filter-btn{ padding:8px 16px;font-size:0.82rem}} @media (max-width: 768px){ .contact-hero-content h1{ font-size:1.6rem} .contact-info-grid{ grid-template-columns:1fr;gap:16px} .contact-info-card{ padding:20px;border-radius:10px} .contact-form-section .container{ padding:16px} .form-row{ grid-template-columns:1fr;gap:0} .form-group input,.form-group textarea,.form-group select{ font-size:16px !important;padding:14px 16px;border-radius:8px} .form-group label{ font-size:0.85rem;margin-bottom:6px} .contact-philosophy-grid,.contact-visit-grid,.contact-network-grid,.contact-eco-grid{ grid-template-columns:1fr;gap:16px} .contact-commitment-num{ width:44px;height:44px;font-size:1.2rem}} @media (max-width: 768px){ .categories-grid{ grid-template-columns:repeat(2,1fr);gap:12px} .category-card{ aspect-ratio:3/2;border-radius:8px} .category-card-overlay{ padding:16px} .category-card h3{ font-size:1rem} .category-card p{ font-size:0.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}} @media (max-width: 375px){ .categories-grid{ grid-template-columns:1fr;gap:10px}} @media (max-width: 768px){ .about-grid{ grid-template-columns:1fr;gap:24px} .about-image{ border-radius:10px} .about-stats{ grid-template-columns:repeat(3,1fr);gap:12px}} @media (max-width: 768px){ .advantages-grid{ grid-template-columns:1fr;gap:16px} .advantage-card{ padding:20px;border-radius:10px}} @media (max-width: 768px){ .cta-section{ padding:32px 0} .cta-section h2{ font-size:1.4rem} .cta-section p{ font-size:0.9rem} .cta-section .btn{ width:100%;text-align:center}} @media (max-width: 768px){ .footer{ padding:32px 0 0} .footer-grid{ grid-template-columns:1fr;gap:24px;padding:0 16px} .footer-brand{ text-align:center} .footer-brand p{ font-size:0.85rem} .footer-links-grid{ grid-template-columns:repeat(2,1fr);gap:20px} .footer-column h4{ font-size:0.95rem;margin-bottom:12px} .footer-column a{ font-size:0.85rem;padding:4px 0} .footer-contact-list{ gap:8px} .footer-contact-list li{ font-size:0.85rem} .footer-social{ justify-content:center;gap:12px} .footer-social a{ width:40px;height:40px} .footer-bottom{ flex-direction:column;gap:8px;text-align:center;padding:16px;font-size:0.8rem}} @media (max-width: 375px){ .footer-links-grid{ grid-template-columns:1fr;text-align:center} .footer-column h4::after{ left:50%;transform:translateX(-50%)}} @media (max-width: 768px){ .image-modal-content{ padding:0} .image-modal-content img{ max-width:100vw;max-height:70vh;max-height:70dvh;object-fit:contain} .modal-close-btn{ width:48px !important;height:48px !important;font-size:1.5rem !important;top:calc(env(safe-area-inset-top, 16px) + 8px) !important;right:12px !important;background:rgba(255,255,255,0.95) !important;border-radius:50% !important;box-shadow:0 2px 12px rgba(0,0,0,0.2) !important;display:flex !important;align-items:center !important;justify-content:center !important;z-index:2003 !important} .modal-nav-btn{ width:44px !important;height:44px !important;font-size:1.3rem !important;background:rgba(255,255,255,0.9) !important;border-radius:50% !important;box-shadow:0 2px 10px rgba(0,0,0,0.15) !important} .modal-nav-prev{ left:8px !important} .modal-nav-next{ right:8px !important} .modal-counter{ bottom:calc(env(safe-area-inset-bottom, 16px) + 16px) !important;font-size:0.85rem !important;padding:8px 16px !important;background:rgba(0,0,0,0.6) !important;border-radius:20px !important;color:#fff !important}} @media (max-width: 768px){ .whatsapp-float{ bottom:calc(20px + env(safe-area-inset-bottom, 0px));right:16px;width:52px;height:52px;border-radius:50%;box-shadow:0 4px 16px rgba(37,211,102,0.4)} .whatsapp-float svg{ width:28px;height:28px}} @media (max-width: 768px){ .client-logos-grid{ grid-template-columns:repeat(2,1fr);gap:10px} .client-logo-item{ padding:14px 10px;min-height:56px;border-radius:8px} .client-logo-text{ font-size:0.8rem}} @media (max-width: 768px){ .surface-treatment-bar{ margin-top:24px;padding:16px;border-radius:10px} .surface-treatment-inner{ flex-direction:column;gap:12px;align-items:flex-start} .st-options{ gap:12px} .st-option{ font-size:0.82rem}} @media (max-width: 768px){ .trust-bar{ padding:16px 0} .trust-items{ flex-wrap:wrap;gap:12px;justify-content:center} .trust-item{ font-size:0.8rem;padding:8px 14px}} @media (max-width: 768px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);gap:8px} .gallery-item{ border-radius:6px;aspect-ratio:4/3}} @media (max-width: 768px){ .scheme-timeline{ grid-template-columns:1fr;gap:16px} .tech-service-grid{ grid-template-columns:1fr;gap:16px}} @media (max-width: 768px){ .modal-overlay{ align-items:flex-end;padding:0;color:#fff} .modal{ width:100%;max-width:100%;max-height:85vh;max-height:85dvh;border-radius:16px 16px 0 0} .modal-close{ width:36px;height:36px;top:12px;right:12px} .modal-image{ border-radius:16px 16px 0 0} .modal-body{ padding:20px 16px} .modal-body h2{ font-size:1.2rem} .modal-body p{ font-size:0.9rem}} @supports (-webkit-touch-callout: none){ .nav-links,.nav-toggle,.btn,.stone-card,.category-card,.news-card,.series-overview-card,.series-nav-item,.project-filter button,.news-filter-btn{ -webkit-touch-callout:none;-webkit-user-select:none;user-select:none} p,h1,h2,h3,h4,h5,h6,.modal-body,.news-content,.stone-card-info{ -webkit-user-select:auto;user-select:auto}} @supports (-webkit-overflow-scrolling: touch){ .nav-links,.series-nav-scroll,.mega-panel,.dropdown-panel,.modal{ -webkit-overflow-scrolling:touch}} @media (max-width: 440px) and (min-width: 394px){ .series-overview-grid{ grid-template-columns:repeat(3,1fr);gap:10px} .stone-cards-grid{ grid-template-columns:repeat(3,1fr);gap:10px} .product-quick-nav{ grid-template-columns:repeat(3,1fr)} .categories-grid{ grid-template-columns:repeat(3,1fr);gap:10px} .about-hero-video-section{ height:15vh} .about-hero-video-section .about-video-wrap{ height:15vh !important} .about-hero-video-section video{ height:15vh !important}} @media (max-width: 375px){ :root{ --nav-height:60px} .navbar{ padding:6px 12px} .nav-logo img{ height:30px !important} .nav-logo-text{ display:none} .nav-toggle{ width:44px;height:44px} .nav-toggle span{ width:20px} .nav-links{ width:270px} .hero-content h1{ font-size:1.4rem} .btn{ padding:12px 20px;font-size:0.85rem} .section-padding{ padding:24px 0} .inner-page .section-padding .container{ padding:0} .stat-number{ font-size:1.3rem} .stat-label{ font-size:0.65rem}} @media (max-width: 900px) and (orientation: landscape){ .hero{ min-height:50vh;min-height:50dvh} .nav-links{ width:260px} .image-modal-content img{ max-height:80vh;max-height:80dvh}} @supports (height: 100dvh){ .hero{ min-height:min(70vh,70dvh)} @media (max-width: 900px){ .nav-links{ height:100dvh}}} @media (max-width: 900px){ html{ overflow-x:clip;width:100%} *{ max-width:100vw} .categories-grid,.stone-cards-grid,.series-overview-grid,.news-grid,.projects-grid,.footer-grid,.gallery-grid,.client-logos-grid,.about-stats,.contact-info-grid,.contact-philosophy-grid,.contact-network-grid{ max-width:100%} .container{ width:100%;padding-left:16px;padding-right:16px;box-sizing:border-box} img{ max-width:100%;height:auto}} .strength-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px;max-width:100%;margin:0 auto} .strength-card{ background:#fff;border-radius:12px;padding:32px 24px;border:1px solid #E8E0D8;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s ease} .strength-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-4px);border-color:#D4A373} .strength-card-icon{ font-size:2rem;font-weight:700;color:#D4A373;font-family:var(--font-heading);margin-bottom:16px} .strength-card h4{ font-family:var(--font-heading);font-size:1.05rem;color:var(--color-primary);margin-bottom:12px;line-height:1.4} .strength-card p{ font-size:0.88rem;color:var(--color-mid-gray);line-height:1.75;margin:0} .team-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px;max-width:100%;margin:0 auto} .team-card{ background:#fff;border-radius:12px;padding:32px 24px;border:1px solid #E8E0D8;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s ease} .team-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-4px);border-color:#D4A373} .team-card-num{ font-size:2rem;font-weight:700;color:#D4A373;font-family:var(--font-heading);margin-bottom:16px} .team-card h4{ font-family:var(--font-heading);font-size:1.05rem;color:var(--color-primary);margin-bottom:12px;line-height:1.4} .team-card p{ font-size:0.88rem;color:var(--color-mid-gray);line-height:1.75;margin:0} .csr-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:24px;max-width:100%;margin:0 auto} .csr-card{ background:#fff;border-radius:12px;padding:32px 24px;border:1px solid #E8E0D8;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s ease} .csr-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-4px);border-color:#D4A373} .csr-card-icon{ font-size:2rem;margin-bottom:16px} .csr-card h4{ font-family:var(--font-heading);font-size:1.05rem;color:var(--color-primary);margin-bottom:12px;line-height:1.4} .csr-card p{ font-size:0.88rem;color:var(--color-mid-gray);line-height:1.75;margin:0} @media (max-width: 1024px){ .strength-grid{ grid-template-columns:repeat(2,1fr);gap:20px} .team-grid{ grid-template-columns:repeat(2,1fr);gap:20px}} @media (max-width: 768px){ .strength-grid{ grid-template-columns:1fr;gap:16px} .team-grid{ grid-template-columns:1fr;gap:16px} .csr-grid{ grid-template-columns:1fr;gap:16px} .strength-card,.team-card,.csr-card{ padding:24px 18px} .strength-card-icon,.team-card-num,.csr-card-icon{ font-size:1.6rem} .strength-card h4,.team-card h4,.csr-card h4{ font-size:0.95rem} .strength-card p,.team-card p,.csr-card p{ font-size:0.85rem}} @media (max-width: 480px){ .strength-card,.team-card,.csr-card{ padding:20px 16px}} @media (max-width: 768px){ .about-hero-video-section.hero-fullpage{ height:55vh !important;min-height:380px !important;max-height:none !important} .about-hero-video-section.hero-fullpage .about-video-wrap{ left:0 !important;transform:none !important;max-width:100% !important;width:100% !important}} @media (max-width: 480px){ .about-hero-video-section.hero-fullpage{ height:45vh !important;min-height:300px !important;max-height:none !important} .about-hero-video-section.hero-fullpage .about-video-wrap{ left:0 !important;transform:none !important;max-width:100% !important;width:100% !important}} .inner-page .series-overview-section h2{ text-align:center} .inner-page .series-overview-section .series-subtitle-zh{ text-align:center} .hsst-wm{ position:absolute;bottom:6px;left:6px;font-size:0.58rem;font-weight:600;color:rgba(255,255,255,0.85);background:rgba(0,0,0,0.40);padding:2px 6px;border-radius:3px;pointer-events:none;z-index:8;white-space:nowrap;letter-spacing:0.5px;line-height:1.5;font-family:"PingFang HK","PingFang TC","Noto Sans CJK HK","Microsoft JhengHei","微軟正黑體",-apple-system,BlinkMacSystemFont,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,0.3)} @media (max-width: 768px){ .hsst-wm{ font-size:0.48rem;padding:1px 4px;bottom:4px;left:4px}} @media (max-width: 480px){ .hsst-wm{ font-size:0.42rem;padding:1px 3px;bottom:3px;left:3px}} @media (max-width: 768px){ .form-container-wide{ max-width:100%;padding:0 16px} .form-trust-badges{ gap:8px} .form-trust-badge{ font-size:12px;padding:5px 12px}} .role-entry-section{ padding:40px 0} .role-entry-title{ text-align:center;font-size:28px;font-weight:700;color:#1A1A2E;margin-bottom:8px;font-family:'Playfair Display',"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",serif;position:relative;padding-bottom:12px} .role-entry-title::after{ content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)} .role-entry-subtitle{ text-align:center;font-size:15px;color:#6B7280;margin-bottom:20px;max-width:600px;margin-left:auto;margin-right:auto;text-align:center} .role-cards{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;max-width:100%;margin:0 auto} .role-card{ background:#FFFFFF;border:1px solid #E5E7EB;border-radius:12px;padding:32px 24px;text-align:center;transition:all 0.3s ease;cursor:pointer;text-decoration:none;display:block;color:inherit} .role-card:hover{ transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.08);border-color:#D4AF37} .role-card-icon{ font-size:44px;margin-bottom:16px;display:block} .role-card h4{ font-size:17px;font-weight:700;color:#1A1A2E;margin-bottom:8px} .role-card p{ font-size:13px;color:#6B7280;line-height:1.6;margin:0} .role-card .role-card-cta{ display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:#D4AF37} .role-card:hover .role-card-cta{ text-decoration:underline} .timeline-section{ padding:40px 0;max-width:100%;margin:0 auto} .timeline-heading{ text-align:center;font-size:28px;font-weight:700;color:#1A1A2E;margin-bottom:28px;font-family:'Playfair Display',"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",serif} .timeline{ position:relative;padding-left:40px} .timeline::before{ content:'';position:absolute;left:16px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#D4AF37 0%,#E5E7EB 100%)} .timeline-item{ position:relative;margin-bottom:36px;padding-left:32px} .timeline-item::before{ content:'';position:absolute;left:-28px;top:6px;width:12px;height:12px;background:#D4AF37;border-radius:50%;border:3px solid #FFFFFF;box-shadow:0 0 0 3px #D4AF37} .timeline-year{ font-size:14px;font-weight:700;color:#D4AF37;margin-bottom:4px;letter-spacing:1px} .timeline-title{ font-size:17px;font-weight:600;color:#1A1A2E;margin-bottom:6px} .timeline-desc{ font-size:14px;color:#6B7280;line-height:1.7;margin:0} .tech-section{ padding:40px 0;max-width:100%;margin:0 auto} .tech-heading{ text-align:center;font-size:28px;font-weight:700;color:#1A1A2E;margin-bottom:8px;font-family:'Playfair Display',"Songti TC","Songti SC","Noto Serif CJK TC","PMingLiU",serif;position:relative;padding-bottom:12px} .tech-heading::after{ content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)} .tech-subheading{ text-align:center;font-size:15px;color:#6B7280;margin-bottom:20px} .tech-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:28px} .tech-card{ background:#FFFFFF;border:1px solid #E5E7EB;border-radius:12px;padding:24px;transition:all 0.25s ease} .tech-card:hover{ border-color:#D4AF37;box-shadow:0 4px 20px rgba(0,0,0,0.05)} .tech-card-icon{ font-size:32px;margin-bottom:12px} .tech-card h4{ font-size:18px;font-weight:700;color:#1A1A2E;margin-bottom:8px} .tech-card p{ font-size:14px;color:#6B7280;line-height:1.7;margin-bottom:12px} .tech-card .tech-value{ font-size:13px;color:#D4AF37;font-weight:600;padding:6px 12px;background:rgba(212,175,55,0.08);border-radius:6px;display:inline-block} .cert-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;max-width:100%;margin:0 auto} .cert-card{ background:#FFFFFF;border:1px solid #E5E7EB;border-radius:10px;padding:28px 24px;text-align:center;transition:all 0.25s ease;text-decoration:none;color:inherit;display:block} .cert-card:hover{ border-color:#D4AF37;transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.06)} .cert-card-icon{ font-size:36px;margin-bottom:12px} .cert-card h4{ font-size:16px;font-weight:700;color:#1A1A2E;margin-bottom:6px} .cert-card p{ font-size:13px;color:#6B7280;line-height:1.5;margin:0} .filter-bar{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px} .filter-tag{ padding:8px 20px;font-size:13px;font-weight:500;color:#4B5563;background:#FFFFFF;border:1px solid #D1D5DB;border-radius:24px;cursor:pointer;transition:all 0.2s ease;user-select:none} .filter-tag:hover{ border-color:#D4AF37;color:#D4AF37} .filter-tag.active{ background:#D4AF37;color:#111;border-color:#D4AF37;font-weight:600} .compare-panel{ position:fixed;bottom:0;left:0;right:0;background:#1A1A2E;color:#FFFFFF;padding:16px 24px;z-index:999;display:flex;align-items:center;justify-content:center;gap:20px;transform:translateY(100%);transition:transform 0.3s ease;box-shadow:0 -4px 24px rgba(0,0,0,0.3)} .compare-panel.show{ transform:translateY(0)} .compare-panel-items{ display:flex;gap:12px;align-items:center} .compare-panel-item{ background:rgba(255,255,255,0.1);padding:6px 14px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:8px} .compare-panel-item .remove-compare{ cursor:pointer;color:#F87171;font-weight:700;font-size:16px;line-height:1} .compare-panel-btn{ padding:10px 24px;background:#D4AF37;color:#1A1A2E;border:none;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s} .compare-panel-btn:hover{ background:#C5A059} .compare-panel-clear{ background:none;border:1px solid rgba(255,255,255,0.3);color:#FFF;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:13px} .sample-modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s ease;color:#fff} .sample-modal-overlay.show{ opacity:1;pointer-events:auto} .sample-modal{ background:#FFFFFF;border-radius:16px;padding:40px 36px;max-width:520px;width:90%;max-height:85vh;overflow-y:auto;position:relative} .sample-modal-close{ position:absolute;top:16px;right:20px;background:none;border:none;font-size:24px;cursor:pointer;color:#6B7280;line-height:1} .sample-modal h3{ font-size:22px;font-weight:700;color:#1A1A2E;margin-bottom:8px} .sample-modal p{ font-size:14px;color:#6B7280;margin-bottom:24px} .form-purpose-select{ width:100%;padding:14px 16px;border:1.5px solid #E5E7EB;border-radius:8px;font-size:14px;color:#1A1A2E;background:#FAFAFA;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer} .form-purpose-select:focus{ border-color:#D4AF37;outline:none;box-shadow:0 0 0 3px rgba(212,175,55,0.15)} .form-dynamic-field{ display:none} .form-dynamic-field.show{ display:block} .scene-cards{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;max-width:100%;margin:0 auto} .scene-card{ background:#FFFFFF;border-radius:12px;overflow:hidden;border:1px solid #E5E7EB;transition:all 0.3s ease;text-decoration:none;color:inherit;display:block} .scene-card:hover{ transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.1);border-color:#D4AF37} .scene-card-img{ width:100%;height:200px;object-fit:cover} .scene-card-body{ padding:24px} .scene-card h4{ font-size:18px;font-weight:700;color:#1A1A2E;margin-bottom:8px} .scene-card p{ font-size:14px;color:#6B7280;line-height:1.6;margin-bottom:12px} .scene-card .scene-cta{ color:#D4AF37;font-weight:600;font-size:13px} .sustainability-section{ padding:40px 0;max-width:100%;margin:0 auto} .sustainability-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:24px} .sustainability-card{ background:#FFFFFF;border:1px solid #E5E7EB;border-radius:12px;padding:28px;transition:all 0.25s} .sustainability-card:hover{ border-color:#D4AF37} .sustainability-card h4{ font-size:17px;font-weight:700;color:#1A1A2E;margin-bottom:8px} .sustainability-card p{ font-size:14px;color:#6B7280;line-height:1.7;margin:0} .product-detail{ max-width:100%;margin:0 auto;padding:48px 24px} .product-detail-hero{ display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px} .product-detail-gallery{ border-radius:12px;overflow:hidden} .product-detail-gallery img{ width:100%;height:auto;display:block} .product-detail-info h2{ font-size:32px;font-weight:700;color:#1A1A2E;margin-bottom:8px;font-family:'Playfair Display',serif} .product-detail-info .stone-category{ color:#D4AF37;font-size:14px;font-weight:600;margin-bottom:20px} .product-detail-meta{ display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px} .product-detail-meta-item{ font-size:14px;color:#4B5563} .product-detail-meta-item strong{ color:#1A1A2E;display:block;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px} .tech-specs-table{ width:100%;border-collapse:collapse;margin-top:24px} .tech-specs-table th,.tech-specs-table td{ padding:12px 16px;text-align:left;border-bottom:1px solid #E5E7EB;font-size:14px} .tech-specs-table th{ background:#FAFAFA;font-weight:600;color:#1A1A2E;width:200px} .tech-specs-table td{ color:#4B5563} @media (max-width: 1024px){ .role-cards{ grid-template-columns:repeat(2,1fr)} .cert-grid{ grid-template-columns:repeat(2,1fr)} .product-detail-hero{ grid-template-columns:1fr;gap:20px}} @media (max-width: 768px){ .role-cards{ grid-template-columns:1fr;gap:16px} .scene-cards{ grid-template-columns:1fr;gap:20px} .tech-grid{ grid-template-columns:1fr} .cert-grid{ grid-template-columns:1fr} .sustainability-grid{ grid-template-columns:1fr} .timeline{ padding-left:24px} .timeline::before{ left:8px} .timeline-item{ padding-left:24px} .timeline-item::before{ left:-20px;width:10px;height:10px} .compare-panel{ flex-direction:column;padding:12px 16px;gap:12px} .product-detail-meta{ grid-template-columns:1fr}} .solutions-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:28px} .solutions-card{ background:#fff;border-radius:12px;padding:28px 24px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid #eee;transition:transform 0.25s,box-shadow 0.25s} .solutions-card:hover{ transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)} .solutions-icon{ font-size:2.2rem;margin-bottom:14px} .solutions-card h4{ font-size:1.1rem;font-weight:700;color:#1a1a1a;margin:0 0 8px} .solutions-card p{ font-size:0.92rem;color:#666;line-height:1.65;margin:0} .role-entry-subtitle{ font-size:1rem;color:#D4AF37;font-weight:500;margin:4px 0 0} @media (max-width: 640px){ .solutions-grid{ grid-template-columns:1fr}} .solutions-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:28px} .solutions-card{ background:#fff;border-radius:12px;padding:28px 24px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid #eee;transition:transform 0.25s,box-shadow 0.25s} .solutions-card:hover{ transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)} .solutions-icon{ font-size:2.2rem;margin-bottom:14px} .solutions-card h4{ font-size:1.1rem;font-weight:700;color:#1a1a1a;margin:0 0 8px} .solutions-card p{ font-size:0.92rem;color:#666;line-height:1.65;margin:0} .role-entry-subtitle{ font-size:1rem;color:#D4AF37;font-weight:500;margin:4px 0 0} @media (max-width: 640px){ .solutions-grid{ grid-template-columns:1fr}} .hero,.hero-grid-video,.page-header,.navbar,.footer,.cta-section,.about-hero-video-section,.contact-hero-section,[class*="-hero"],[class*="-banner"]{ overflow-x:clip} .hero .container,.hero-grid-video .container,.page-header .container,.navbar .container,.footer .container,.cta-section .container,.about-hero-video-section .container,.contact-hero-section .container{ max-width:var(--max-width);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box} html{ overflow-x:clip;width:100%;max-width:100vw} .hero,.hero-grid-video,.page-header,.about-hero-video-section,.contact-hero-section,[class*="-hero"],[class*="-banner"],.footer,.cta-section{ position:relative} @media (min-width: 901px) and (max-width: 1199px){ .nav-links{ flex-shrink:0;flex-wrap:nowrap;gap:16px;overflow:visible} .nav-links a{ font-size:0.78rem;letter-spacing:0.3px;padding:4px 6px;white-space:nowrap;flex-shrink:0} .navbar .container{ flex-wrap:nowrap} .nav-logo-text{ max-width:140px} .nav-logo-text strong{ font-size:0.9rem} .nav-logo-text small{ font-size:0.65rem}} @media (min-width: 1920px){ :root{ --max-width:1200px}} @media (min-width: 1440px) and (max-width: 1919px){ :root{ --max-width:1200px}} @media (min-width: 1200px) and (max-width: 1439px){ :root{ --max-width:1100px}} @media (min-width: 1024px) and (max-width: 1199px){ :root{ --max-width:960px}} .faq-q{ width:100% !important;text-align:left !important;padding:16px 20px !important;background:#fff !important;border:1px solid var(--color-light-gray) !important;border-radius:var(--radius-md) !important;font-size:0.92rem !important;font-weight:600 !important;color:var(--color-primary) !important;cursor:pointer !important;display:flex !important;justify-content:space-between !important;align-items:center !important;transition:all 0.2s ease !important;margin-bottom:8px !important} .faq-q:hover{ border-color:var(--color-accent) !important;box-shadow:0 2px 8px rgba(0,0,0,0.04) !important} .faq-q.active{ background:var(--color-off-white) !important;border-color:var(--color-accent) !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;margin-bottom:0 !important} .faq-icon{ color:var(--color-accent) !important;font-size:1.1rem !important;transition:transform 0.3s ease !important} .faq-q.active .faq-icon{ transform:rotate(45deg) !important} .faq-a{ max-height:0 !important;overflow:hidden !important;transition:max-height 0.35s ease,padding 0.35s ease !important;padding:0 20px !important;background:#fff !important;border:1px solid var(--color-light-gray) !important;border-top:none !important;border-bottom-left-radius:var(--radius-md) !important;border-bottom-right-radius:var(--radius-md) !important;margin-bottom:8px !important} .faq-a.open{ padding:16px 20px !important;border-color:var(--color-accent) !important} .hsst-form-input:focus,.hsst-form-textarea:focus,.hsst-form-select:focus{ border-color:var(--color-accent) !important;box-shadow:0 0 0 3px rgba(212,175,55,0.1) !important} .section-subtitle{ position:relative;display:inline-block} .strength-card,.csr-card,.tech-card,.role-card{ border-radius:var(--radius-md) !important} .product-hero{ position:relative;width:100%;min-height:560px;height:auto;padding:96px 0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#ffffff} .product-hero-bg{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none} .product-hero-overlay{ position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none} .product-hero.is-noimage{ min-height:400px;height:auto;background:linear-gradient(135deg,#fdfcfa 0%,#f2efe9 55%,#e9e4db 100%);border-bottom:1px solid rgba(10,42,107,0.10)} .product-hero.is-noimage .product-hero-overlay{ display:none} .product-hero.is-noimage .product-hero-title{ -webkit-text-stroke:1.5px rgba(0,0,0,0.6)} .product-hero-content{ position:relative;z-index:2;text-align:center;color:#0a2a6b;padding:0 24px} .product-hero-badge{ display:inline-block;background:transparent;color:#0a2a6b;padding:6px 20px;border:1px solid rgba(10,42,107,0.35);border-radius:20px;font-size:0.8rem;font-weight:600;letter-spacing:2px;margin-bottom:20px;text-shadow:0 1px 3px rgba(255,255,255,0.95),0 0 10px rgba(255,255,255,0.85)} .product-hero-title{ font-size:2.75rem;font-weight:700;letter-spacing:3px;margin-bottom:8px;color:#ffd400;-webkit-text-stroke:2px rgba(0,0,0,0.55);paint-order:stroke fill;text-shadow:0 2px 18px rgba(0,0,0,0.45)} .product-hero-subtitle{ font-size:1.1rem;color:#0a2a6b;font-weight:600;margin-bottom:24px;letter-spacing:1.5px;text-shadow:0 1px 3px rgba(255,255,255,0.95),0 0 10px rgba(255,255,255,0.85)} .product-hero-desc{ font-size:0.9rem;color:#10346b;max-width:700px;margin:0 auto;line-height:1.7;text-shadow:0 1px 3px rgba(255,255,255,0.95),0 0 10px rgba(255,255,255,0.8)} .product-action-bar{ background:#fafafa;padding:24px 0;border-bottom:1px solid #eee} .product-action-bar .container{ display:flex;align-items:center;gap:16px;flex-wrap:wrap} .product-action-btn{ flex:none;padding:10px 24px;border-radius:6px;font-size:0.875rem;font-weight:600;text-decoration:none;transition:all 0.3s ease;cursor:pointer;border:none} .product-action-btn.compare{ background:rgba(212,175,55,0.5);color:#fff} .product-action-btn.compare:hover{ background:rgba(212,175,55,0.85);transform:scale(1.03)} .product-action-btn.sample{ color:#111;border:1.5px solid var(--color-accent);background:transparent} .product-action-btn.sample:hover{ color:var(--color-accent);background:rgba(212,175,55,0.08)} .product-action-btn.inquire{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));color:#111} .product-action-btn.inquire:hover{ background:var(--color-accent);transform:translateY(-1px)} .product-gallery-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .product-gallery-item{ border-radius:10px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);background:#f9f9f9;transition:box-shadow 0.3s ease} .product-gallery-item:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.12)} .product-gallery-item-img{ position:relative;width:100%;padding-top:100%;overflow:hidden} .product-gallery-item-img img{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94)} .product-gallery-item:hover .product-gallery-item-img img{ transform:scale(1.05)} .product-section-title{ text-align:center;margin-bottom:32px} .product-section-title .label{ font-size:0.75rem;letter-spacing:2.5px;color:var(--color-accent);text-transform:uppercase;display:block} .product-section-title h2{ font-size:1.875rem;font-weight:700;color:var(--color-primary);margin-top:8px} .spec-grid-modern{ display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} .spec-card{ background:#fff;border-radius:12px;padding:24px 20px;border:1px solid #eee;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s ease;text-align:center} .spec-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-3px);border-color:var(--color-accent)} .spec-card-icon{ font-size:1.8rem;margin-bottom:10px;color:var(--color-accent)} .spec-card-label{ font-size:0.78rem;font-weight:600;color:var(--color-mid-gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px} .spec-card-value{ font-size:1.1rem;font-weight:700;color:var(--color-primary);font-family:var(--font-heading)} .spec-card-standard{ font-size:0.72rem;color:var(--color-mid-gray);margin-top:4px} .application-card{ background:#fff;border-radius:12px;padding:28px 24px;border:1px solid #eee;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s ease;text-align:center} .application-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-4px);border-color:var(--color-accent)} .application-card-icon{ width:56px;height:56px;margin:0 auto 14px;background:linear-gradient(135deg,rgba(212,175,55,0.15),rgba(212,175,55,0.05));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--color-accent);font-family:var(--font-heading);font-weight:700} .application-card h4{ font-size:1.05rem;font-weight:700;color:var(--color-primary);margin-bottom:8px} .application-card p{ font-size:0.85rem;color:var(--color-mid-gray);line-height:1.6;margin-bottom:12px} .application-card .surface-tag{ display:inline-block;font-size:0.72rem;padding:4px 12px;background:rgba(212,175,55,0.08);color:var(--color-accent);border-radius:12px;font-weight:500} .surface-treatment-tag{ display:inline-flex;align-items:center;gap:6px;font-size:0.8rem;font-weight:500;padding:6px 16px;background:#f5f0eb;border:1px solid rgba(212,175,55,0.2);color:var(--color-dark-gray);border-radius:20px;transition:all 0.2s} .surface-treatment-tag:hover{ border-color:var(--color-accent);color:var(--color-accent);background:rgba(212,175,55,0.06)} .related-product-card{ display:block;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #eee;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s ease;text-decoration:none;color:inherit} .related-product-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.1);transform:translateY(-4px);border-color:var(--color-accent)} .related-product-card img{ width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 0.5s} .related-product-card:hover img{ transform:scale(1.05)} .related-product-card-body{ padding:16px} .related-product-card-body h4{ font-size:0.95rem;font-weight:600;color:var(--color-primary);margin-bottom:4px} .related-product-card-body p{ font-size:0.8rem;color:var(--color-mid-gray)} .product-video-section{ background:#1a1a2e;padding:60px 0;text-align:center;color:#fff} .product-video-section h2{ color:#fff;font-size:1.875rem;font-weight:700;margin-bottom:30px} .product-video-wrap{ max-width:800px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,0.4)} .product-video-wrap video,.product-video-wrap iframe{ width:100%;display:block} .product-content-section{ background:#fff;padding:48px 0} .product-content-section.alt{ background:#fafafa} @media (max-width: 768px){ .product-hero{ min-height:320px;height:auto;padding:76px 0} .product-hero.is-noimage{ min-height:300px;height:auto} .product-hero-title{ font-size:1.75rem;-webkit-text-stroke-width:1.5px} .product-hero-subtitle{ font-size:1rem} .product-hero-desc{ font-size:0.85rem} .product-gallery-grid{ grid-template-columns:repeat(2,1fr);gap:12px} .spec-grid-modern{ grid-template-columns:repeat(2,1fr);gap:12px} .spec-card{ padding:16px 12px} .spec-card-icon{ font-size:1.4rem} .spec-card-value{ font-size:0.95rem} .product-action-bar .container{ justify-content:center} .product-action-btn{ padding:8px 18px;font-size:0.8rem}} @media (max-width: 480px){ .product-gallery-grid{ grid-template-columns:1fr} .spec-grid-modern{ grid-template-columns:1fr}} .application-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-bottom:32px} .app-card-title{ font-size:0.95rem;font-weight:700;color:var(--color-primary);margin-bottom:4px} .app-card-desc{ font-size:0.78rem;color:var(--color-mid-gray);line-height:1.6} .surface-treatment-section{ max-width:800px;margin:0 auto;background:#fafafa;border-radius:12px;padding:32px 40px;text-align:center} .surface-treatment-title{ font-size:1.25rem;font-weight:700;color:var(--color-primary);margin-bottom:16px} .surface-treatment-desc{ font-size:0.85rem;color:var(--color-mid-gray);margin-bottom:20px} .surface-treatment-tags{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .specs-dimensions-wrap{ margin:32px auto 0} .specs-dimensions-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px} .spec-dimension-card{ background:#fff;border:1px solid #eee;border-radius:10px;padding:20px;transition:all 0.3s ease} .spec-dimension-card:hover{ border-color:var(--color-accent);box-shadow:0 4px 16px rgba(0,0,0,0.06)} .spec-dimension-label{ font-size:0.8rem;font-weight:700;color:var(--color-accent);margin-bottom:8px} .spec-dimension-value{ font-size:0.875rem;color:#555;line-height:1.8} .spec-note{ margin:12px auto 0;font-size:0.7rem;color:#aaa;text-align:center} .section-desc{ font-size:0.875rem;color:var(--color-mid-gray);margin:12px auto 0} .related-cases-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} .related-case-img-wrap{ position:relative;width:100%;padding-top:66%;overflow:hidden;background:#e8e8e8} .related-case-img-wrap img{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease} .related-product-card:hover .related-case-img-wrap img{ transform:scale(1.05)} .case-title{ font-size:0.9rem;font-weight:700;color:var(--color-primary);margin-bottom:4px} .case-meta{ font-size:0.78rem;color:var(--color-mid-gray);margin-bottom:4px} .case-stone-usage{ font-size:0.72rem;color:var(--color-accent);font-weight:500} .related-products-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px} .related-product-img-wrap{ position:relative;width:100%;padding-top:100%;overflow:hidden;background:#f5f5f5} .related-product-img-wrap img{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} .rp-title{ font-size:0.875rem;font-weight:600;color:var(--color-primary)} .rp-subtitle{ font-size:0.7rem;color:var(--color-mid-gray);margin-top:2px} .product-video-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:24px;margin:0 auto} .product-video-card{ background:#fafafa;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);transition:all 0.3s ease} .product-video-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,0.1)} .product-video-placeholder{ position:relative;width:100%;padding-top:56.25%;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .product-video-info{ text-align:center;color:var(--color-accent);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)} .product-video-icon{ font-size:3rem;margin-bottom:8px} .product-video-label{ font-size:0.8rem;font-weight:600} .product-video-hint{ font-size:0.7rem;color:#888;margin-top:4px} .form-grid-2col{ display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px} @media (max-width: 768px){ .application-grid{ grid-template-columns:repeat(2,1fr);gap:12px} .surface-treatment-section{ padding:20px 16px} .surface-treatment-title{ font-size:1.05rem} .specs-dimensions-grid{ grid-template-columns:1fr} .related-cases-grid{ grid-template-columns:1fr;gap:16px} .related-products-grid{ grid-template-columns:repeat(2,1fr);gap:12px} .product-video-grid{ grid-template-columns:1fr} .form-grid-2col{ grid-template-columns:1fr}} @media (max-width: 480px){ .application-grid{ grid-template-columns:1fr} .related-products-grid{ grid-template-columns:1fr}} .series-section-content{ background:#fff;padding:20px 0} .series-section-header{ background:linear-gradient(to bottom,#e8dfd4,#d4cdc2)} .bg-light-gray{ background:#fafafa} .bg-light-cream{ background:var(--color-light-bg,#faf8f5)} .bg-white{ background:#fff} .pt-0{ padding-top:0} .pt-40{ padding-top:40px} .pb-0{ padding-bottom:0} .pb-24{ padding-bottom:24px} .border-top-light{ border-top:1px solid #eee} .solution-hero{ background:linear-gradient(135deg,#1a1a1a,#111);text-align:center;color:#fff} .cta-dark{ background:linear-gradient(135deg,#1a1a1a,#111);text-align:center;color:#fff} .news-hero{ padding:80px 0 28px;background:linear-gradient(135deg,#1a1a2e,#2c2c3e);position:relative;overflow:hidden} .hero-tag{ margin-top:24px;display:inline-block;background:rgba(201,168,76,0.15);padding:8px 24px;border-radius:20px;font-size:13px;color:#C9A84C} .section-header-center{ text-align:center;margin-bottom:32px} .section-header-center .label{ font-size:12px;letter-spacing:2.5px;color:#C9A84C} .section-header-center h2{ font-size:28px;font-weight:700;color:#1a1a1a;margin-top:8px} .section-header-center .sub{ font-size:14px;color:#888} .pain-point-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px} .pain-point-card{ background:#fff;border-radius:10px;padding:24px;border-left:3px solid #C9A84C;box-shadow:0 2px 12px rgba(0,0,0,0.05)} .pain-point-card h3{ font-size:16px;font-weight:700;color:#C9A84C;margin-bottom:4px} .pain-point-card p{ font-size:13px;color:#555;margin:0} .service-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} .service-card{ background:linear-gradient(135deg,#fafafa,#fff);border:1px solid #eee;border-radius:10px;padding:24px} .service-card h3{ font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:8px} .service-card p{ font-size:13px;color:#666;line-height:1.6;margin:0} .flow-steps{ display:flex;flex-wrap:wrap;gap:0;justify-content:center;align-items:flex-start} .flow-step{ flex:1;min-width:110px;text-align:center;padding:12px 6px} .flow-step-num{ width:44px;height:44px;border-radius:50%;background:#C9A84C;color:#111;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:16px;font-weight:700} .flow-step h3{ font-size:12px;font-weight:700;color:#1a1a1a;margin-bottom:2px} .flow-step p{ font-size:10.5px;color:#888;line-height:1.4;margin:0} .flow-arrow{ width:24px;display:flex;align-items:center;justify-content:center;padding-top:24px} .flow-arrow span{ color:#C9A84C;font-size:18px} .solution-cta{ background:linear-gradient(135deg,#1a1a1a,#111);text-align:center;color:#fff} .solution-cta-form{ margin:0 auto} .solution-cta-input{ padding:12px 16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#fff;font-size:14px} .solution-cta-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:14px;margin-bottom:14px} .solution-cta-textarea{ width:100%;padding:12px 16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#fff;font-size:14px;margin-bottom:14px;resize:vertical;box-sizing:border-box} .solution-cta-btn{ width:100%;padding:14px;background:#C9A84C;color:#111;font-size:15px;font-weight:700;border:none;border-radius:6px;cursor:pointer;transition:all 0.3s ease} .faq-item{ border:1px solid #eee;border-radius:10px;overflow:hidden;margin-bottom:16px} .faq-item-answer{ font-size:14px;color:#555;line-height:1.8;padding:16px 0;border-top:1px solid #eee} .news-filter-bar{ padding:16px 0;background:#fff;border-bottom:1px solid #eaeaea;position:sticky;top:80px;z-index:99} .news-filter-container{ display:flex;justify-content:center;gap:10px;flex-wrap:wrap} .news-filter-btn{ padding:8px 24px;border:1.5px solid #ddd;border-radius:24px;background:#fff;color:#444;font-size:14px;cursor:pointer;transition:all 0.25s} .news-filter-btn.active{ border-color:#1a1a2e;background:#1a1a2e;color:#fff} .news-hero-overlay{ position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 50%,rgba(212,175,55,0.1) 0%,transparent 70%)} .news-hero-content{ position:relative;z-index:1;text-align:center} .news-list-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px} .news-section-heading-row{ grid-column:1 / -1;margin:32px 0 8px} .cookie-banner-bar{ position:fixed;bottom:0;left:0;right:0;background:rgba(26,26,46,0.97);color:#fff;padding:16px 24px;z-index:1000;display:none;border-top:1px solid rgba(201,168,76,0.3)} .cookie-banner-inner{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .cookie-banner-text{ font-size:13px;color:rgba(255,255,255,0.7);margin:0;flex:1;min-width:200px} .cookie-banner-btns{ display:flex;gap:10px;flex-shrink:0} .cookie-btn-accept{ padding:8px 20px;background:#C9A84C;color:#111;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer} .cookie-btn-decline{ padding:8px 20px;background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.15);border-radius:6px;font-size:13px;cursor:pointer} .whatsapp-float{ position:fixed;bottom:28px;right:24px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,0.4);z-index:999;transition:all 0.3s ease;text-decoration:none} .back-to-top{ position:fixed;bottom:90px;right:24px;display:none;align-items:center;justify-content:center;transition:all 0.3s;z-index:998} .logo-img{ height:42px;width:auto;border-radius:6px} .project-search-input-styled{ padding:10px 18px;border:2px solid #e2e2e2;border-radius:50px;font-size:0.95rem;min-width:260px;outline:none;font-family:inherit;transition:border-color 0.2s} .project-filter-bar{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 8px} .privacy-content{ font-size:15px;line-height:1.9;color:#444} .privacy-section{ margin-bottom:32px} .privacy-section h2{ font-size:20px;font-weight:700;color:#1a1a1a;margin-bottom:12px} .privacy-section p{ margin:0} .privacy-updated{ color:#888;font-size:13px;margin-bottom:32px} .sample-form-mb-sm{ margin-bottom:12px} .sample-form-mb-md{ margin-bottom:14px} .sample-form-pt{ padding-top:10px} .sample-hero-inner{ position:relative;z-index:1} .text-center{ text-align:center} .info-tag{ background:#FAF8F5;border:1px solid #D4AF37;color:#8B7355;padding:8px 18px;border-radius:50px;font-size:0.85rem;font-weight:600} .info-tag-highlight{ background:#FFF8E1;border:1px solid #FFD700;color:#B8860B;padding:8px 18px;border-radius:50px;font-size:0.85rem;font-weight:700} .info-tags-flex{ display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px} .project-section-pb-0{ padding-bottom:0} .news-hero-title{ color:#fff;font-family:var(--font-heading);font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:12px;letter-spacing:2px} .news-hero-subtitle{ color:rgba(255,255,255,0.6);font-size:clamp(0.95rem,1.5vw,1.15rem);margin-bottom:20px;font-weight:300} .news-hero-breadcrumb{ justify-content:center} .news-filter-bar{ display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:32px} .news-section-title{ font-size:1.25rem;font-weight:700;color:#b8860b;border-bottom:2px solid #b8860b;padding-bottom:8px} .img-cover{ width:100%;height:auto;object-fit:cover} .img-rounded{ width:100%;height:auto;object-fit:cover;border-radius:12px} .img-thumb{ width:100%;height:140px;object-fit:cover} .img-thumb-md{ width:100%;height:180px;object-fit:cover;border-radius:8px} .img-thumb-md-mb{ width:100%;height:180px;object-fit:cover;border-radius:8px;margin-bottom:16px} .img-hero{ width:100%;height:320px;object-fit:cover;border-radius:12px} body{ padding-top:var(--nav-height)} .hero,.hero-grid-video,.news-hero,.project-hero,.solution-hero{ margin-top:calc(-1 * var(--nav-height))} #main-content>section:first-child:not(.hero):not(.hero-grid-video):not(.news-hero):not(.project-hero):not(.solution-hero){ padding-top:calc(var(--section-padding) + var(--nav-height))} .inner-page>section:first-child:not(.hero):not(.hero-grid-video):not(.news-hero):not(.project-hero):not(.solution-hero){ padding-top:calc(var(--section-padding) + var(--nav-height))} .inner-page>.container:first-child{ padding-top:calc(var(--section-padding) * 0.75)} .inner-page>.container:first-child+section:not(.hero):not(.hero-grid-video):not(.news-hero):not(.project-hero):not(.solution-hero){ padding-top:var(--section-padding)} .products-banner{ margin-top:calc(-1 * var(--nav-height))} .project-section,.project-section-alt{ padding:var(--section-padding) 0} .about-preview{ padding:var(--section-padding) 0} .filter-section{ padding:calc(var(--section-padding) * 0.75) 0} .inquiry-form-section{ padding:var(--section-padding) 0} .sample-form-section{ padding:var(--section-padding) 0} .client-logo-section{ padding:calc(var(--section-padding) * 0.6) 0} .project-container{ max-width:var(--max-width);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} *,*::before,*::after{ box-sizing:border-box} img,video,canvas,svg,iframe,embed,object{ max-width:100%} img,video{ height:auto} p,li,td,th,dd,dt,blockquote,pre,code,a,span,.article-body,.content,.section,.container,.card,.text-block,.about-table,.tech-specs-table,.table-responsive{ overflow-wrap:break-word;word-break:break-word} html{ overflow-x:clip} body{ overflow-x:clip;max-width:100%} table{ max-width:100%} @media (max-width: 480px){ :root{ --gutter:14px}} @media (max-width: 360px){ :root{ --gutter:12px}}