/* Komatsu-inspired site theme (non-infringing, inspired visual language)
   Applies a deep-blue industrial palette, bold hero, and conservative layout.
*/
:root{
  --k-blue-dark: #002c5f;
  --k-blue: #0059a6;
  --k-blue-light: #2b8fe6;
  --k-yellow: #ffb800;
  --bg: #f6f8fa;
  --panel: #ffffff;
  --muted: #667085;
  --ink: #0b1220;
  --radius: 10px;
  --elev: 0 12px 36px rgba(2,6,23,0.10);
}

body.theme-modern{ background: var(--bg); color:var(--ink); font-family: 'Work Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; }
.container{ max-width:1280px; margin:0 auto; padding:0 20px; }

/* Header (matched to logo color) */
.site-header{ position:sticky; top:0; z-index:70; background: linear-gradient(90deg, #ED1C24 0%, #C4161F 100%) !important; color:#fff !important; box-shadow: 0 6px 30px rgba(196,22,31,0.18); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-header .brand img{ height:56px; filter: none; background: #ffffff; padding:6px 10px; border-radius:8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

/* subtle warm sheen that complements the logo */
.site-header::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(115deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 10%, rgba(255,255,255,0.02) 30%, transparent 80%); mix-blend-mode: overlay; opacity:0.9; transform: translateX(-20%); animation: sheen 10s linear infinite; }
@keyframes sheen{ 0%{ transform: translateX(-30%); } 100%{ transform: translateX(130%); } }

/* Navigation */
.main-nav ul{ display:flex; gap:8px; align-items:center; margin:0; padding:0; list-style:none; }
.main-nav a{ color:#fff !important; padding:12px 16px; font-weight:700; letter-spacing:0.02em; border-radius:6px; transition: background .18s ease, color .18s ease; }
.main-nav a:hover{ background: rgba(255,255,255,0.06); color:#fff !important; }
.main-nav a.is-active{ background: rgba(255,255,255,0.08); box-shadow: inset 0 -3px 0 rgba(255,255,255,0.06); }
.nav-toggle{ color:#fff; }
@media (max-width:900px){ .main-nav{ background: linear-gradient(90deg, var(--k-blue-dark), var(--k-blue)) !important; } .main-nav a{ color:#fff !important; } }

/* Hero */
.hero-media{ border-radius:0; min-height:420px; width:100%; overflow:hidden; position:relative; }
/* Lighter overlay so carousel images remain clear */
.hero-media::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,28,60,0.28), rgba(0,28,60,0.12)); z-index:1; pointer-events:none; }
/* Ensure hero slides and images render crisply */
.hero-media .hero-slide{ position:relative; z-index:0; background-size:cover; background-position:center; filter: none; backface-visibility: hidden; will-change: transform, opacity; }
.hero-media img, .hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter: none; }
.hero-media .hero-slide{ position:relative; z-index:0; background-size:cover; background-position:center; }
.hero-title, .hero-sub{ position:relative; z-index:2; color:#fff; }
.hero-title{ font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight:800; margin:0; }
.hero-sub{ color: rgba(255,255,255,0.9); margin-top:12px; }

/* Buttons */
.btn-primary{ background: linear-gradient(90deg,var(--k-blue),var(--k-blue-light)); color:#fff; border:none; padding:12px 20px; border-radius:6px; box-shadow: var(--elev); }
.btn-outline{ border:2px solid rgba(0,0,0,0.06); background:transparent; color:var(--ink); }

/* Cards and layout */
.product-card{ background:var(--panel); border-radius:8px; border:1px solid rgba(2,6,23,0.04); box-shadow: 0 8px 20px rgba(2,6,23,0.04); overflow:hidden; transition: transform .28s ease; }
.product-card:hover{ transform: translateY(-6px); }
.product-spec{ background: rgba(0,0,0,0.03); color:var(--muted); padding:6px 10px; border-radius:6px; }

/* CTA */
.cta-band{ background: linear-gradient(90deg, rgba(0,44,95,0.95), rgba(0,89,166,0.95)); color:#fff; border-radius:8px; padding:28px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.cta-band a.btn-primary{ background:#ffd100; color:var(--k-blue-dark); box-shadow:none; }

/* Footer */
.site-footer{ background: linear-gradient(180deg, #021223, #001625); color: rgba(255,255,255,0.9); padding:56px 0; }
.footer-top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:28px; }
.footer-col a, .footer-col li{ color: rgba(255,255,255,0.85); }
.footer-bottom{ color: rgba(255,255,255,0.65); }

/* Accessibility and tweaks */
:focus{ outline: 3px solid rgba(255,209,0,0.15); outline-offset:3px; }

@media (max-width:640px){
  .container{ padding:0 14px; }
  .brand img{ height:48px; }
  /* Make hero adapt to mobile viewport without being clipped */
  .hero-media{ min-height:220px; height:auto; position:relative; border-radius:0; margin-left: calc(50% - 50vw); width:100vw; overflow:hidden; }
  .hero-media::before{ background: linear-gradient(180deg, rgba(0,28,60,0.20), rgba(0,28,60,0.08)); }
  .hero-media .hero-slide{ position:relative; min-height:220px; background-size:cover; background-position:center; }
  .hero-media img, .hero-slide img{ width:100%; height:auto; max-height:60vh; object-fit:cover; display:block; }
  .main-nav ul{ flex-direction:column; }
}

.reveal{ transform: translateY(8px); opacity:0; transition: transform .6s ease, opacity .6s ease; }
.reveal.is-visible{ transform:none; opacity:1; }

/* Strong overrides to neutralize conflicting hero rules from other styles (modern.css)
   Ensures the carousel/banner displays at full image height by showing only the active slide (via display:block/none)
   rather than absolute stacking which collapses the container height.
*/
.hero-media{ margin-left:0 !important; width:100% !important; max-width:100% !important; height:auto !important; min-height:220px !important; overflow:visible !important; position:relative !important; }
/* Use display:block/none to show only active slide so hero-media can size to image height */
.hero-media .hero-slide{ position:relative !important; display:none !important; opacity:1 !important; transition: opacity .35s ease !important; width:100% !important; height:auto !important; }
.hero-media .hero-slide.is-active{ display:block !important; z-index:2 !important; }
/* Images fill width and keep natural height */
.hero-slide img, .hero-media img{ width:100% !important; height:auto !important; object-fit:cover !important; display:block !important; }

/* Ensure carousel controls/dots are above slides */
.hero-dots{ position:absolute; right:24px; bottom:18px; z-index:4 !important; }

/* Undo rules that hide the hero when mobile nav opens */
.nav-open .hero-media{ display:block !important; }
.nav-open .hero-slide{ display:block !important; }

@media (max-width:900px){
  .hero-media{ margin-left:0 !important; width:100vw !important; left:0 !important; border-radius:0 !important; min-height:160px !important; }
  .hero-media .hero-slide{ min-height:160px !important; position:relative !important; }
  .hero-media img, .hero-slide img{ max-height: none !important; }
}