:root{--navy:#1a2a3a;--navy2:#0d1d2b;--brown:#7a5c38;--warm:#c4956e;--warm2:#a8773e;--cream:#f7f3ee;--white:#ffffff;--text:#2c2c2a;--muted:#6b6b68;--border:rgba(44,44,42,0.12);--radius:4px;--tr:0.28s cubic-bezier(0.4,0,0.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:1000;background:rgba(13,29,43,0.97);backdrop-filter:blur(10px);padding:0 5vw;display:flex;align-items:center;justify-content:space-between;height:68px;border-bottom:1px solid rgba(255,255,255,0.07)}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-k-wrap{width:38px;height:38px;perspective:140px;flex-shrink:0}
.logo-k-3d{width:38px;height:38px;background:linear-gradient(135deg,var(--warm) 0%,var(--brown) 100%);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900;color:#fff;transform-style:preserve-3d;animation:spinK 5s linear infinite;letter-spacing:0}
@keyframes spinK{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
.nav-logo-text{display:flex;flex-direction:column}
.nav-logo-main{font-size:17px;font-weight:900;color:#fff;letter-spacing:2px;line-height:1}
.nav-logo-sub{font-size:8.5px;font-weight:400;color:var(--warm);letter-spacing:3px;text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{color:rgba(255,255,255,0.75);text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;transition:color var(--tr);padding-bottom:3px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--warm);border-bottom-color:var(--warm)}
.nav-cta{background:var(--warm);color:#fff;padding:9px 20px;font-size:11.5px;font-weight:700;letter-spacing:.8px;border:none;cursor:pointer;border-radius:var(--radius);text-decoration:none;transition:background var(--tr);white-space:nowrap}
.nav-cta:hover{background:var(--warm2)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;transition:all var(--tr);transform-origin:center}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translateY(10px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translateY(-10px)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;background:linear-gradient(140deg,var(--navy) 0%,var(--navy2) 55%,#1c1208 100%);padding:68px 5vw 0;position:relative;overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;opacity:.035;background-image:repeating-linear-gradient(0deg,var(--warm) 0,var(--warm) 1px,transparent 0,transparent 60px),repeating-linear-gradient(90deg,var(--warm) 0,var(--warm) 1px,transparent 0,transparent 60px)}
.hero-inner{position:relative;max-width:1140px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:center}
.hero-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--warm);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--warm)}
.hero-h1{font-size:clamp(34px,4.2vw,60px);font-weight:900;color:#fff;line-height:1.08;margin-bottom:20px}
.hero-h1 em{font-style:normal;color:var(--warm)}
.hero-lead{font-family:'Lora',serif;font-style:italic;font-size:16px;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:36px;max-width:480px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.btn-primary{background:var(--warm);color:#fff;padding:14px 28px;font-size:12.5px;font-weight:700;letter-spacing:.8px;border:2px solid var(--warm);cursor:pointer;border-radius:var(--radius);text-decoration:none;transition:all var(--tr);display:inline-block}
.btn-primary:hover{background:var(--warm2);border-color:var(--warm2)}
.btn-outline{background:transparent;color:#fff;padding:14px 28px;font-size:12.5px;font-weight:700;letter-spacing:.8px;border:2px solid rgba(255,255,255,.28);cursor:pointer;border-radius:var(--radius);text-decoration:none;transition:all var(--tr);display:inline-block}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.55);background:rgba(255,255,255,.07);padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.1)}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:400px}
.hw{border-radius:8px;overflow:hidden;position:relative}
.hw:first-child{grid-row:span 2}
.hw-label{position:absolute;bottom:12px;left:14px;color:rgba(255,255,255,.88);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.wl{position:absolute;inset:0;background-image:repeating-linear-gradient(168deg,transparent 0,transparent 5px,rgba(0,0,0,.07) 5px,rgba(0,0,0,.07) 6px)}
.w-oak{background:linear-gradient(160deg,#dab97a 0%,#b8862e 40%,#9a6d1f 100%)}
.w-walnut{background:linear-gradient(160deg,#6b4c30 0%,#4a311c 50%,#351f10 100%)}
.w-maple{background:linear-gradient(160deg,#f0dca0 0%,#dbb96a 50%,#c09040 100%)}
.w-cherry{background:linear-gradient(160deg,#9b3a2a 0%,#7a2418 50%,#5c1a10 100%)}
.w-beech{background:linear-gradient(160deg,#e8c890 0%,#d4a860 50%,#b88840 100%)}
.w-pine{background:linear-gradient(160deg,#e0c878 0%,#c9a848 50%,#aa8830 100%)}
.w-gray{background:linear-gradient(160deg,#c8c4bc 0%,#a0a098 50%,#808078 100%)}

/* SECTIONS */
.sec{padding:80px 5vw}
.sec-inner{max-width:1140px;margin:0 auto}
.sec-tag{font-size:10.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--warm);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sec-tag::before{content:'';display:block;width:22px;height:2px;background:var(--warm)}
.sec-h2{font-size:clamp(26px,3vw,42px);font-weight:900;color:var(--navy);line-height:1.12;margin-bottom:16px}
.sec-lead{font-size:15.5px;color:var(--muted);line-height:1.75;max-width:560px}

/* WHY US */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.why-card{background:var(--cream);border-radius:10px;padding:28px 22px;border-bottom:3px solid transparent;transition:border-color var(--tr),transform var(--tr)}
.why-card:hover{border-bottom-color:var(--warm);transform:translateY(-4px)}
.why-icon{width:46px;height:46px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 2px 10px rgba(26,42,58,.08)}
.why-card h3{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:8px}
.why-card p{font-size:12.5px;color:var(--muted);line-height:1.65}

/* PRODUCTS */
.prod-sec{background:var(--cream)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.prod-card{background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--border);transition:transform var(--tr),box-shadow var(--tr)}
.prod-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(26,42,58,.11)}
.prod-img{aspect-ratio:16/9;position:relative}
.prod-badge{position:absolute;top:10px;left:10px;background:var(--warm);color:#fff;font-size:9.5px;font-weight:700;padding:4px 10px;border-radius:2px;letter-spacing:1px;text-transform:uppercase}
.prod-body{padding:18px}
.prod-name{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.prod-desc{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:14px}
.prod-link{font-size:11.5px;font-weight:700;color:var(--warm);text-decoration:none;letter-spacing:.8px;text-transform:uppercase;transition:letter-spacing var(--tr)}
.prod-link:hover{letter-spacing:1.2px}
.centered{display:flex;justify-content:center;margin-top:36px}

/* ILCE */
.ilce-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:44px}
.ilce-card{background:var(--cream);border-radius:8px;padding:16px 18px;border:1px solid transparent;transition:border-color var(--tr),background var(--tr)}
.ilce-card:hover{border-color:var(--warm);background:#fff}
.ilce-card h3{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:5px}
.ilce-card p{font-size:11.5px;color:var(--muted);line-height:1.55}
.ilce-cta{background:var(--navy);border-radius:10px;padding:28px 32px;margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ilce-cta p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.65;max-width:560px}
.ilce-cta strong{color:#fff;font-size:15.5px;display:block;margin-bottom:6px}

/* REFERENCES */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.ref-item{border-radius:8px;overflow:hidden;position:relative}
.ref-item:first-child,.ref-item:nth-child(4){grid-column:span 2}
.ref-img{width:100%;aspect-ratio:16/9;transition:transform .5s ease}
.ref-item:first-child .ref-img,.ref-item:nth-child(4) .ref-img{aspect-ratio:21/9}
.ref-item:hover .ref-img{transform:scale(1.04)}
.ref-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,29,43,.75) 0%,transparent 55%);display:flex;align-items:flex-end;padding:18px}
.ref-cap strong{display:block;font-size:14px;font-weight:700;color:#fff}
.ref-cap span{font-size:11px;color:rgba(255,255,255,.65);letter-spacing:1px;text-transform:uppercase}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.blog-card{background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--border);transition:transform var(--tr)}
.blog-card:hover{transform:translateY(-4px)}
.blog-img{width:100%;aspect-ratio:16/9;position:relative}
.blog-body{padding:20px}
.blog-cat{font-size:9.5px;font-weight:700;color:var(--warm);letter-spacing:2px;text-transform:uppercase}
.blog-title{font-size:14.5px;font-weight:700;color:var(--navy);margin:8px 0 10px;line-height:1.4}
.blog-excerpt{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:14px}
.blog-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:12px}
.blog-read{color:var(--warm);font-weight:700;text-decoration:none}

/* BLOG POST */
.post-hero{padding:110px 5vw 34px;background:linear-gradient(145deg,var(--navy) 0%,var(--navy2) 100%)}
.post-hero-inner{max-width:900px;margin:0 auto}
.post-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--warm);background:rgba(196,149,110,.12);padding:8px 12px;border-radius:999px;margin-bottom:18px}
.post-h1{font-size:clamp(28px,4vw,48px);font-weight:900;line-height:1.12;color:#fff;margin-bottom:16px}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:12px;color:rgba(255,255,255,.72)}
.post-body{max-width:900px;margin:0 auto;padding:0 5vw 72px}
.post-body p{font-size:15px;line-height:1.8;color:var(--text);margin:0 0 18px}
.post-body h2{font-size:clamp(22px,2.6vw,32px);line-height:1.2;color:var(--navy);margin:40px 0 14px}
.post-body h3{font-size:19px;line-height:1.3;color:var(--navy);margin:28px 0 12px}
.post-body ul,.post-body ol{padding-left:20px;margin:0 0 20px}
.post-body li{font-size:14px;line-height:1.75;color:var(--text);margin-bottom:8px}
.post-body a{color:var(--warm2)}
.post-intro{margin-top:-18px;padding-top:0}
.post-cover{display:none}
.post-cover img{width:100%;display:block;border-radius:16px;box-shadow:0 20px 44px rgba(26,42,58,.12)}
.post-highlight{background:var(--cream);border:1px solid rgba(196,149,110,.18);border-left:4px solid var(--warm);padding:18px 20px;border-radius:10px;margin:28px 0;font-size:14px;line-height:1.75;color:var(--text)}
.post-table-wrap{overflow-x:auto;margin:22px 0}
.post-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.post-table th,.post-table td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px;text-align:left}
.post-table th{background:var(--cream);color:var(--navy);font-weight:700}
.post-table tr:last-child td{border-bottom:none}
.post-cta{margin-top:38px;padding:28px;background:var(--cream);border-radius:14px;text-align:center}
.post-cta h3{margin:0 0 10px}
.post-cta p{margin:0 0 18px;color:var(--muted)}
.post-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;text-decoration:none;color:var(--warm2);font-weight:700;font-size:12px;letter-spacing:.6px;text-transform:uppercase}

/* FAQ */
.faq-list{margin-top:48px;max-width:780px;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border-radius:8px;border:1px solid var(--border);overflow:hidden}
.faq-q{width:100%;background:none;border:none;padding:18px 22px;text-align:left;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q::after{content:'+';font-size:20px;font-weight:400;color:var(--warm);flex-shrink:0;transition:transform var(--tr)}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 22px 18px;font-size:13px;color:var(--muted);line-height:1.75}
.faq-item.open .faq-a{max-height:220px}

/* CONTACT STRIP */
.cs{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);padding:72px 5vw}
.cs-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.cs-form{display:flex;flex-direction:column;gap:14px}
.cs-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-form input,.cs-form textarea,.cs-form select{width:100%;padding:12px 16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);color:#fff;font-family:'Montserrat',sans-serif;font-size:12.5px;outline:none;transition:border-color var(--tr)}
.cs-form input::placeholder,.cs-form textarea::placeholder{color:rgba(255,255,255,.3)}
.cs-form input:focus,.cs-form textarea:focus,.cs-form select:focus{border-color:var(--warm)}
.cs-form select option{color:var(--text)}
.cs-form textarea{min-height:110px;resize:vertical}
.cs-info{display:flex;flex-direction:column;gap:22px}
.ci-item{display:flex;gap:14px;align-items:flex-start}
.ci-icon{width:42px;height:42px;background:rgba(196,149,110,.15);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-text h4{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px}
.ci-text p,.ci-text a{font-size:14.5px;color:#fff;text-decoration:none;font-weight:600;line-height:1.5}
.wa-btn{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:13px 22px;border-radius:7px;text-decoration:none;font-weight:700;font-size:13.5px;transition:background var(--tr);width:fit-content;margin-top:4px}
.wa-btn:hover{background:#1da851}

/* FOOTER */
footer{background:#080f16;padding:52px 5vw 24px}
.fi{max-width:1140px;margin:0 auto}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.fb-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;text-decoration:none}
.fb-k{width:34px;height:34px;background:linear-gradient(135deg,var(--warm),var(--brown));border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff}
.fb-lt .l1{font-size:15px;font-weight:900;color:#fff;letter-spacing:2px;line-height:1}
.fb-lt .l2{font-size:8px;color:var(--warm);letter-spacing:3px;text-transform:uppercase;margin-top:2px}
.fb p{font-size:12.5px;color:rgba(255,255,255,.35);line-height:1.75}
.fc h5{font-size:10px;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,.35);text-transform:uppercase;margin-bottom:16px}
.fc a{display:block;font-size:12.5px;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:9px;transition:color var(--tr)}
.fc a:hover{color:var(--warm)}
.fbot{border-top:1px solid rgba(255,255,255,.07);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.fbot p{font-size:11.5px;color:rgba(255,255,255,.25)}
.fseo{font-size:10px;color:rgba(255,255,255,.15);line-height:1.7}

/* FLOAT WA */
.float-wa{position:fixed;bottom:26px;right:26px;z-index:999;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 20px;border-radius:50px;text-decoration:none;font-weight:700;font-size:13px;box-shadow:0 4px 20px rgba(37,211,102,.35);transition:all var(--tr)}
.float-wa:hover{background:#1da851;transform:translateY(-2px)}
.fwt{white-space:nowrap}

/* RESPONSIVE */
@media(max-width:1024px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .cs-inner{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav{height:60px;padding:0 4vw}
  .nav-logo-main{font-size:15px;letter-spacing:1px}
  .nav-logo-sub{font-size:7px;letter-spacing:2px}
  .nav-cta{padding:8px 16px;font-size:11px}
  .nav-links{display:none;gap:0}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:var(--navy2);padding:16px 4vw;gap:10px;border-top:1px solid rgba(255,255,255,.08);z-index:999}
  .nav-links.open li{border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:10px}
  .nav-links.open li:last-child{border-bottom:none;padding-bottom:0}
  .hamburger{display:flex}
  .hero{padding:65px 4vw 0}
  .hero-h1{font-size:clamp(28px,5vw,48px)}
  .hero-lead{font-size:14px}
  .hero-eyebrow{gap:6px}
  .hero-eyebrow::before{width:20px}
  .why-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .ref-grid{grid-template-columns:1fr}
  .ref-item:first-child,.ref-item:nth-child(4){grid-column:span 1}
  .cs-row{grid-template-columns:1fr}
  .cs-form{gap:11px}
  .fg{grid-template-columns:1fr}
  .fwt{display:none}
  .float-wa{padding:11px;bottom:20px;right:20px}
  .float-wa svg{width:18px;height:18px}
  .faq-list{max-width:100%}
  .faq-item.open .faq-a{max-height:320px}
  .ilce-cta{flex-direction:column;align-items:flex-start}
  .ilce-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .page-hero{padding:100px 4vw 48px}
  .sec{padding:60px 4vw}
  .sec-h2{font-size:clamp(22px,2.8vw,36px)}
  .post-hero{padding:96px 4vw 28px}
  .post-body{padding:0 4vw 56px}
  .post-cover{padding:0 4vw}
  .post-meta{gap:8px 12px}
}