:root{
        --accent:#b76e4a;
        --bg:#faf8f5;
        --card:#fff
    }
    *{box-sizing:border-box}
    body{
        margin:0;
        font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
        background:var(--bg);
        color:#222;
    }
    header{
        display:flex;
        align-items:center;
        justify-content:center;
        padding:14px 20px;
        background:var(--card);
        position:sticky;
        top:0;
        z-index:20;
        box-shadow:0 1px 6px rgba(0,0,0,.06);
    }
    .header-inner{
        width:100%;
        max-width:1100px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }
    .logo{
        font-weight:700;
        color:var(--accent);
        font-size:22px;
    }
    nav{
        display:flex;
        gap:18px;
        align-items:center;
    }
    nav a{
        text-decoration:none;
        color:#333;
        font-weight:600;
    }
    /* center page content when navigating anchors */
    section{
        display:block;
        padding:48px 20px;
    }
    .container{
        max-width:1100px;
        margin:0 auto;
    }
    /* Hero */
    .hero{
        height:60vh;
        border-radius:12px;
        overflow:hidden;
        position:relative;
        background:linear-gradient(180deg, rgba(183,110,74,0.12), rgba(250,248,245,0.12));
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .soap-track{
        position:absolute;
        left:-20%;
        top:50%;
        transform:translateY(-50%);
        display:flex;
        gap:18px;
        animation:track 12s linear infinite;
    }
    .soap-track img{
        width:160px;
        height:160px;
        object-fit:cover;
        border-radius:18px;
        box-shadow:0 8px 20px rgba(0,0,0,.12);
        border:6px solid rgba(255,255,255,.6);
    }
    @keyframes track{
      0%{transform:translateX(-30%) translateY(-50%) rotate(0deg)}
      25%{transform:translateX(10%) translateY(-54%) rotate(3deg)}
      50%{transform:translateX(50%) translateY(-48%) rotate(-2deg)}
      75%{transform:translateX(85%) translateY(-52%) rotate(2deg)}
      100%{transform:translateX(130%) translateY(-50%) rotate(0deg)}
    }
    .hero h1{
        position:relative;
        z-index:2;
        color:#222;
        background:rgba(255,255,255,.85);
        padding:14px 22px;
        border-radius:10px;
        font-size:28px;
    }
    /* Gallery */
    .gallery-grid{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
        justify-content:center;
    }
    .gallery-grid img{
        width:240px;
        height:240px;
        object-fit:cover;
        border-radius:12px;
        box-shadow:0 8px 18px rgba(0,0,0,.08);
        transition:transform .25s;
    }
    .gallery-grid img:hover{
        transform:scale(1.03);
    }
    /* auto slideshow small */
    .slideshow{
        position:relative;
        width:100%;
        max-width:700px;
        margin:18px auto;
    }
    .slideshow img{
        width:100%;
        height:420px;
        object-fit:cover;
        border-radius:12px;
        display:block;
    }
    /* Contact */
    .contact-card{
        background:var(--card);
        padding:20px;
        border-radius:12px;
        box-shadow:0 8px 20px rgba(0,0,0,.06);
        max-width:640px;
        margin:0 auto;
    }
    .contact-card input,
    .contact-card textarea{
        width:100%;
        padding:12px;
        margin-top:10px;
        border-radius:8px;
        border:1px solid #e6e2df;
        font-size:15px;
    }
    .contact-card button{
        margin-top:12px;
        padding:12px 14px;
        border-radius:10px;
        border:none;
        background:var(--accent);
        color:white;
        font-weight:700;
        cursor:pointer;
    }
    
    html, body {
        height: 100%;              /* full height */
        margin: 0;
        display: flex;
        flex-direction: column;    /* stack header, main, footer vertically */
    }
    
    main {
        flex: 1;                   /* take up remaining space */
    }
    
    footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
        background: var(--card);
        box-shadow: 0 -1px 6px rgba(0,0,0,.06);
        color: #666;
    }


    /* Responsive: keep nav visible, no hamburger menu */
    @media (max-width:700px){
      nav a{font-size:15px}
      .soap-track img{width:120px;height:120px}
      .hero{height:50vh}
      .hero h1{font-size:20px;padding:10px 14px}
      .slideshow img{height:260px}
    }