/* Niko's Tile — Home v2 · ported from design "Nikos Tile Home v2.dc.html" */
html { scroll-behavior: smooth; }
body { margin: 0; background: #F4F1EB; color: #1C1814; font-family: 'Instrument Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #1C1814; text-decoration: none; }
a:hover { color: #A6552F; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
@keyframes v2hero { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes v2fade { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes v2grow { from { transform: scale(0.92); } to { transform: scale(1); } }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; box-sizing: border-box; z-index: 90; display: flex; justify-content: space-between; align-items: center; padding: 14px 40px; background: rgba(18,15,12,0.72); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); color: #F4F1EB; }
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; }
.lnk-logo { display: flex; align-items: center; gap: 12px; color: #F4F1EB; }
.lnk-logo:hover { color: #F4F1EB; }
.lnk-nav { color: rgba(244,241,235,0.75); transition: color .25s; }
.lnk-nav:hover { color: #F4F1EB; }
.btn-consult { background: #A6552F; color: #F7F3EC; padding: 9px 20px; border-radius: 999px; font-weight: 600; transition: background .25s; }
.btn-consult:hover { background: #8F4523; color: #F7F3EC; }

/* hero */
.hero { background: #14110D; color: #F4F1EB; min-height: 88vh; min-height: 88svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 150px 40px 100px; box-sizing: border-box; }
.hero-ctas { display: flex; gap: 36px; align-items: center; animation: v2hero 1s .36s cubic-bezier(.2,.6,.2,1) both; }
.btn-cta { background: #A6552F; color: #F7F3EC; border-radius: 999px; font-size: 15px; font-weight: 600; transition: background .25s, transform .25s; }
.btn-cta:hover { background: #8F4523; color: #F7F3EC; transform: scale(1.03); }
.lnk-work { color: #C97C50; font-size: 15px; font-weight: 500; }
.lnk-work:hover { color: #E09668; }
.hero-grow { animation: v2grow 1s linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; transform-origin: center top; }
.hero-visual { position: relative; height: 92vh; height: 92svh; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4,1fr); max-width: 1200px; margin: 0 auto; padding: 72px 40px; gap: 0; }
.stat { border-left: 1px solid rgba(28,24,20,0.15); padding: 6px 28px; animation: v2fade .9s cubic-bezier(.2,.6,.2,1) both; animation-timeline: view(); animation-range: entry 5% entry 40%; }

/* story */
.sec-story { max-width: 1080px; margin: 0 auto; padding: 90px 40px 140px; }
.story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 920px; animation: v2fade 1s cubic-bezier(.2,.6,.2,1) both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
.lnk-rust { color: #A6552F; font-weight: 600; }
.lnk-rust:hover { color: #8F4523; }

/* work chapters */
.chapter { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #14110D; }
.chapter-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,13,10,0.78) 0%, rgba(16,13,10,0.15) 45%, rgba(16,13,10,0) 70%); pointer-events: none; }
.chapter-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 48px 56px; color: #F4F1EB; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.btn-explore { color: #F4F1EB; border: 1px solid rgba(244,241,235,0.4); border-radius: 999px; padding: 12px 26px; font-size: 14px; font-weight: 500; transition: background .25s, border-color .25s; white-space: nowrap; }
.btn-explore:hover { background: rgba(244,241,235,0.14); border-color: #F4F1EB; color: #F4F1EB; }

/* materials */
.sec-materials { position: relative; background: #F4F1EB; padding: 140px 40px; }
.mat-row { display: grid; grid-template-columns: 64px 1fr 1.2fr 40px; gap: 24px; align-items: baseline; padding: 28px 8px; border-top: 1px solid rgba(28,24,20,0.15); color: #1C1814; transition: padding-left .3s, background .3s; }
.mat-row:hover { padding-left: 24px; background: #EDE8DF; color: #1C1814; }
.mat-row:last-of-type { border-bottom: 1px solid rgba(28,24,20,0.15); }
.mat-num { font-size: 13px; color: #A6552F; }
.mat-name { font-family: 'Instrument Serif', serif; font-size: clamp(24px,2.6vw,36px); }
.mat-desc { font-size: 14px; color: #8A8071; }
.mat-arrow { color: #A6552F; }

/* process */
.sec-process { position: relative; background: #ECE7DF; padding: 140px 40px; }
.process-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 40px; }

/* reviews */
.sec-reviews { background: #F4F1EB; padding: 150px 40px; overflow: hidden; }
.rev-track { display: flex; transition: transform .6s cubic-bezier(.3,.6,.2,1); }
.rev-slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding: 0 4px; }
.car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(28,24,20,0.25); background: transparent; color: #1C1814; font-size: 16px; cursor: pointer; transition: background .25s, border-color .25s; }
.car-btn:hover { background: #ECE7DF; border-color: #A6552F; }

/* faq */
.sec-faq { background: #ECE7DF; padding: 140px 40px; }

/* contact */
.sec-contact { background: #14110D; color: #F4F1EB; padding: 160px 40px 120px; text-align: center; }
.phone-hero { display: inline-block; font-family: 'Instrument Serif', serif; font-size: clamp(32px,4.6vw,56px); color: #F4F1EB; border-bottom: 1px solid rgba(244,241,235,0.3); padding-bottom: 8px; transition: color .25s, border-color .25s; }
.phone-hero:hover { color: #C97C50; border-color: #C97C50; }
.btn-email { border: 1px solid rgba(244,241,235,0.35); color: #F4F1EB; padding: 15px 36px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: border-color .25s, background .25s; }
.btn-email:hover { border-color: #F4F1EB; background: rgba(244,241,235,0.08); color: #F4F1EB; }
.addr-link { color: rgba(244,241,235,0.5); }
.addr-link:hover { color: #C97C50; }

/* footer */
.site-footer { background: #100D0A; color: rgba(244,241,235,0.55); padding: 36px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.lnk-flogo { display: flex; align-items: center; gap: 10px; color: rgba(244,241,235,0.8); }
.lnk-flogo:hover { color: #F4F1EB; }
.lnk-dim { color: rgba(244,241,235,0.55); }
.lnk-dim:hover { color: #C97C50; }

/* ============ responsive ============ */
@media (max-width: 1024px) {
  .nav-links { gap: 18px; }
  .process-grid { grid-template-columns: repeat(3,1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .nav { padding: 12px 20px; }
  .navsec { display: none; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 44px; padding: 56px 24px; }
  .story-cols { grid-template-columns: 1fr; gap: 28px; }
  .chapter-caption { padding: 0 24px 44px; }
  .mat-row { grid-template-columns: 40px 1fr 28px; grid-template-rows: auto auto; row-gap: 6px; }
  .mat-num { grid-area: 1 / 1; }
  .mat-name { grid-area: 1 / 2; }
  .mat-desc { grid-area: 2 / 2; }
  .mat-arrow { grid-area: 1 / 3; }
  .sec-story { padding: 70px 24px 100px; }
  .sec-materials, .sec-process, .sec-faq { padding: 100px 24px; }
  .sec-reviews { padding: 110px 24px; }
  .sec-contact { padding: 120px 24px 90px; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .hero { padding: 130px 20px 80px; }
  .hero-ctas { flex-wrap: wrap; justify-content: center; gap: 24px; }
  .stats { padding: 48px 16px; }
  .stat { padding: 6px 16px; }
  .process-grid { grid-template-columns: 1fr; gap: 24px; }
  .chapter-caption { padding: 0 18px 36px; }
  .sec-story { padding: 60px 18px 90px; }
  .sec-materials, .sec-process, .sec-faq { padding: 84px 18px; }
  .sec-reviews { padding: 90px 18px; }
  .sec-contact { padding: 100px 18px 80px; }
  .site-footer { flex-direction: column; justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .nav-links { gap: 12px; }
  .lnk-phone-nav { display: none; }
}