html{scroll-behavior:smooth}
body{background:#faf8f5;color:#111318}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal.show{opacity:1;transform:none}
.hero-grid{background-image:linear-gradient(rgba(23,43,93,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,43,93,.055) 1px,transparent 1px);background-size:46px 46px}
.product-card{transition:transform .45s ease,box-shadow .45s ease}
.product-card:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(23,43,93,.13)}
.product-visual{background:linear-gradient(135deg,#f0eee9,#fff 55%,#f7e9e5);position:relative;overflow:hidden}
.product-visual:before{content:"";position:absolute;inset:18px;border:1px solid rgba(239,43,37,.15);border-radius:24px}
.box-shape{position:absolute;width:135px;height:95px;border-radius:8px;background:linear-gradient(145deg,#d6a56f,#b87b43);box-shadow:0 20px 28px rgba(60,35,15,.16);transform:rotate(-6deg);left:50%;top:50%;translate:-50% -50%}
.box-shape:after{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:rgba(95,48,18,.25)}
.box-shape.navy{background:linear-gradient(145deg,#243d76,#172b5d)}
.box-shape.white{background:linear-gradient(145deg,#fff,#e8e6e2)}
.sheet-stack{position:absolute;width:190px;height:105px;left:50%;top:50%;translate:-50% -50%;transform:rotate(-4deg)}
.sheet-stack span{display:block;height:18px;margin-top:2px;border-radius:3px;background:linear-gradient(90deg,#bd8852,#d9ad7a,#bd8852);box-shadow:0 2px 3px rgba(0,0,0,.08)}
.partition{position:absolute;width:170px;height:105px;left:50%;top:50%;translate:-50% -50%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.partition span{border:5px solid #ad7440;border-radius:4px;background:#d6a36a}
.nav-shadow{box-shadow:0 10px 30px rgba(15,23,42,.06)}
@media(max-width:767px){.hero-title{font-size:2.6rem!important;line-height:1.02!important}.hero-copy{font-size:1rem!important}.product-visual{height:230px!important}}

/* Shared site layout: matches Home + About page container rhythm */
.container-site{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1.25rem}
@media(min-width:1024px){.container-site{padding-inline:2rem}}

/* Shared header/footer system now lives in main.css + components.js. */

/* Photo variant of .product-visual (the CSS-illustrated version stays in main.css). */
.product-visual.is-photo { background:#f4f1ec; }
.product-visual.is-photo::before { display:none; }
.product-visual.is-photo img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-visual.is-photo img { transform:scale(1.05); }