:root{
  --wood-dark:#2b1d12;
  --wood-darker:#1f150d;
  --wood-mid:#8B5A2B;
  --wood-mid2:#a86f38;
  --wood-light:#e6dccd;
  --paper:#f4f1ea;
  --ink:#2b2b2b;
  --muted:#6b4b35;
  --card:#ffffff;
  --shadow: 0 14px 30px rgba(0,0,0,.10);
  --shadow-strong: 0 18px 44px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: Georgia, serif;background:var(--paper);color:var(--ink);scroll-behavior:smooth;}
a{color:inherit}

/* Header */
header{
  position:fixed; inset:0 0 auto 0; height:66px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; background:rgba(31,21,13,.86);
  backdrop-filter: blur(7px); z-index:1000;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-badge{
  width:34px;height:34px;border-radius:10px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  display:grid; place-items:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  font-weight:bold; color:#fff;
}
header h3{margin:0;color:#fff;letter-spacing:2px;font-size:14px;text-transform:uppercase;}
header nav{display:flex; align-items:center; gap:10px}
header nav a{
  color:var(--wood-light); text-decoration:none; font-size:13px; opacity:.95;
  padding:8px 10px; border-radius:10px;
}
header nav a:hover{opacity:1;background:rgba(255,255,255,.08)}

/* HERO (new look) */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
  padding-top:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.layer{position:absolute; inset:-12%; background-size:cover; background-position:center; transform:translate3d(0,0,0); will-change:transform;}
.hero-wood{
  /* warmer, more intentional wood texture */
  background-image:
    linear-gradient(rgba(18,12,7,.40), rgba(18,12,7,.82)),
    url('https://images.unsplash.com/photo-1519710164239-da123dc03ef4?auto=format&fit=crop&w=2400&q=80');
}
.hero-vignette{
  background-image:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.10), rgba(0,0,0,.55) 60%),
    linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.55));
  opacity:.9;
}
.hero-grain{
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 10px,
      rgba(0,0,0,.04) 10px 20px);
  mix-blend-mode: overlay;
  opacity:.20;
}

.hero-panel{
  position:relative;
  z-index:6;
  max-width:820px;
  padding:34px 26px;
  border-radius:22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  animation: fadeIn 1.1s ease both;
}
.hero-mark{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
.hero-panel h1{
  margin:14px 0 0;
  font-size:58px;
  letter-spacing:2px;
}
.hero-panel p{
  margin:16px auto 0;
  font-size:18px;
  line-height:1.65;
  opacity:.95;
  max-width:720px;
}
.hero-actions{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.button{
  display:inline-block; padding:14px 24px; background:var(--wood-mid);
  color:#fff; text-decoration:none; border-radius:14px; font-weight:bold;
  transition:.25s ease; box-shadow: 0 12px 24px rgba(0,0,0,.20);
}
.button:hover{background:var(--wood-mid2); transform: translateY(-2px);}
.button.ghost{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);}
.button.ghost:hover{background:rgba(255,255,255,.16);}
.hero-verse{
  margin-top:18px;
  font-style:italic;
  font-size:14px;
  opacity:.9;
}

.scroll-hint{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.75;
}

/* Saw cut (kept, but lower) */
.cut-wrap{
  position:absolute;
  left:50%;
  bottom:84px;
  width:min(980px, 92vw);
  transform: translateX(-50%);
  z-index:5;
  pointer-events:none;
}
.board{
  position:relative; height:110px; border-radius:14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 18px, rgba(0,0,0,.06) 18px 36px),
    linear-gradient(#b78a56, #8c5c2b);
  box-shadow: var(--shadow-strong);
  overflow:hidden; border:1px solid rgba(255,255,255,.10);
}
.board .stamp{position:absolute; right:18px; top:14px; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.75;}
.cut{position:absolute; top:0; left:0; height:100%; width:0%; background: linear-gradient(#24160e, #140c07); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);}
.kerf{position:absolute; top:0; left:0; height:100%; width:0%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0));
  mix-blend-mode: overlay; opacity:.55;
}
.saw{
  position:absolute; top:50%; left:0%; width:86px; height:86px;
  transform: translate(-50%,-50%); border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.85) 0 16px, transparent 17px),
    radial-gradient(circle at center, #d4d4d4 0 44px, #8c8c8c 45px 46px, #5a5a5a 47px 50px, #2d2d2d 51px 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  filter: saturate(.2);
}
.saw::before{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background: conic-gradient(from 0deg, #e1e1e1 0 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 0 46px, #000 47px 100%);
  mask: radial-gradient(circle, transparent 0 46px, #000 47px 100%);
  opacity:.9;
}
.saw::after{
  content:""; position:absolute; inset:22px; border-radius:50%;
  background: radial-gradient(circle, #f3f3f3, #9a9a9a);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.sparks{position:absolute; top:50%; left:0%; width:1px; height:1px; transform: translate(-50%,-50%); opacity:0;}
.spark{position:absolute; width:8px; height:2px; border-radius:999px; background:#ffd48a; box-shadow: 0 0 12px rgba(255,196,94,.85); transform-origin:left center;}

/* Sections */
.section{padding:90px 20px; max-width:1180px; margin:0 auto;}
.center{text-align:center}
.section h2{margin:0 0 14px; font-size:42px;}
.subhead{margin:0 auto 34px; max-width:860px; color:var(--muted); font-size:18px; line-height:1.6;}

.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:22px;}
.card{background:var(--card); border-radius:18px; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.06); overflow:hidden;}
.pad{padding:22px}

.reveal{opacity:0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease;}
.reveal.show{opacity:1; transform: translateY(0);}

.feature{grid-column: span 4; transition:.25s ease;}
.feature:hover{transform: translateY(-4px)}
.feature h3{margin:10px 0 6px}
.feature p{margin:0; color:#4b3a2d; line-height:1.55}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(139,90,43,.10); color:#5b3a1d;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
}

/* Scenes */
.scene{
  position:relative; min-height:520px; overflow:hidden; color:#fff;
  display:flex; align-items:center;
}
.scene .scene-bg{position:absolute; inset:-14%; background-size:cover; background-position:center; transform: translate3d(0,0,0); will-change: transform;}
.scene .scene-glow{position:absolute; inset:0; background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 55%),
  linear-gradient(rgba(10,7,4,.50), rgba(10,7,4,.78));
}
.scene .scene-content{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:80px 20px;}
.scene h2{margin:0 0 10px; font-size:48px;}
.scene p{margin:0 0 18px; max-width:820px; font-size:18px; line-height:1.6; opacity:.95;}
.scene .chips{display:flex; gap:12px; flex-wrap:wrap;}
.chip{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:10px 12px; border-radius:999px;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
}

/* Gallery */
.gallery{grid-column: span 12; display:grid; grid-template-columns: repeat(12, 1fr); gap:18px;}
.tile{position:relative; border-radius:18px; overflow:hidden; min-height:220px; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.06); background:#ddd; transition:.25s ease;}
.tile:hover{transform: translateY(-4px)}
.tile .img{position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.02);}
.tile .overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.68));}
.tile .label{position:absolute; left:16px; right:16px; bottom:14px; color:#fff; font-size:16px; font-weight:bold; letter-spacing:.5px;}
.t1{grid-column: span 7; min-height:380px}
.t2{grid-column: span 5; min-height:380px}
.t3{grid-column: span 4}
.t4{grid-column: span 4}
.t5{grid-column: span 4}

/* FAQ */
.faq{grid-column: span 6;}
details{padding:14px 18px; border-top:1px solid rgba(0,0,0,.08);}
details:first-child{border-top:none}
summary{cursor:pointer; font-weight:bold;}
details p{margin:10px 0 0; color:#4b3a2d; line-height:1.6;}

/* Footer */
.footer-banner{background:var(--wood-light); padding:60px 20px; text-align:center; border-top:4px solid var(--wood-mid);}
.footer-banner p{font-style:italic; font-size:18px; margin:0 auto; max-width:980px;}
.contact{margin-top:22px; font-size:16px;}
.smallprint{margin-top:14px; color:#6a4a33; font-size:12px; opacity:.9;}

@keyframes fadeIn{from{opacity:0; transform: translateY(18px)} to{opacity:1; transform: translateY(0)}}

@media (prefers-reduced-motion: reduce){
  html,body{scroll-behavior:auto}
  .layer,.scene .scene-bg{transform:none !important}
  .reveal{opacity:1; transform:none; transition:none}
}

@media (max-width: 980px){
  .feature{grid-column: span 6}
  .t1,.t2,.t3,.t4,.t5{grid-column: span 12}
  .faq{grid-column: span 12}
  .scene h2{font-size:40px}
}
@media (max-width: 720px){
  header{padding:0 14px}
  header nav{display:none}
  .hero-panel h1{font-size:40px}
  .hero-panel p{font-size:16px}
  .board{height:96px}
  .saw{width:76px;height:76px}
  .section h2{font-size:32px}
  .subhead{font-size:16px}
}