/* Nutman — css/styles.css */
/* Fonts: DM Serif Display (headings) + DM Sans (body) loaded via Google Fonts in HTML */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#FAF6F0;--bg-alt:#F0EAE0;--bg-card:#FFFFFF;--bg-dark:#2A2018;
  --text:#2A2018;--text-muted:#5A4A38;--text-faint:#8A7A68;
  --primary:#6A3A1A;--primary-rgb:106,58,26;--primary-light:#F0E0D0;
  --accent:#C49A2A;--accent-light:#F8EED0;--border:#DDD0C0;--border-light:#F0EAE0;
  --font-heading:'DM Serif Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --radius:0.5rem;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,.1);
  --transition:200ms ease;
}

html.dark{
  --bg:#1A1510;--bg-alt:#221C15;--bg-card:#2A2420;--bg-dark:#100A05;
  --text:#F0EAE0;--text-muted:#B0A090;--text-faint:#706050;
  --primary:#A06030;--primary-rgb:160,96,48;--primary-light:#2A1A10;
  --accent:#D4AA3A;--accent-light:#2A2010;--border:#3A3020;--border-light:#221C15;
  --shadow:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15);
  --shadow-md:0 4px 12px rgba(0,0,0,.25);
  --shadow-lg:0 10px 30px rgba(0,0,0,.3);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400;line-height:1.2;color:var(--text)}
h1{font-size:clamp(2.25rem,4vw,3.5rem)}
h2{font-size:clamp(1.5rem,2.5vw,2.25rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}

a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent)}

img{max-width:100%;height:auto;display:block}

::selection{background:var(--accent-light);color:var(--primary)}

/* ---------- Utility ---------- */
.container{width:100%;max-width:72rem;margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}
.section-sm{padding:3rem 0}
.text-balance{text-wrap:balance}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:var(--radius);font-family:var(--font-body);font-weight:700;font-size:.9375rem;line-height:1;cursor:pointer;border:none;transition:all var(--transition);text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--primary)}
.btn-white:hover{background:var(--accent-light);transform:translateY(-1px)}

/* ---------- Nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border-light);transition:box-shadow var(--transition)}
.site-nav.scrolled{box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.nav-logo{font-family:var(--font-heading);font-size:1.5rem;color:var(--primary);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.nav-logo:hover{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:.9375rem;font-weight:500;color:var(--text-muted);text-decoration:none;transition:color var(--transition)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--primary)}
.nav-cta{padding:.5rem 1.25rem;border-radius:var(--radius);background:var(--primary);color:#fff!important;font-weight:700;font-size:.875rem}
.nav-cta:hover{background:var(--accent);color:#fff!important}

.theme-toggle{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:.375rem;border-radius:var(--radius);display:flex;align-items:center}
.theme-toggle:hover{color:var(--primary);background:var(--bg-alt)}
.theme-toggle svg{width:1.25rem;height:1.25rem}
html.dark .theme-toggle .icon-sun{display:block}
html.dark .theme-toggle .icon-moon{display:none}
html:not(.dark) .theme-toggle .icon-sun{display:none}
html:not(.dark) .theme-toggle .icon-moon{display:block}

/* Mobile nav */
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--text);padding:.25rem}
.nav-hamburger svg{width:1.5rem;height:1.5rem}
.mobile-menu{display:none;position:absolute;top:4rem;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border-light);padding:1rem 1.5rem;box-shadow:var(--shadow-md)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:.75rem 0;color:var(--text-muted);font-weight:500;border-bottom:1px solid var(--border-light)}
.mobile-menu a:last-child{border-bottom:none}

@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:6rem 0;min-height:80vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(42,32,24,.85) 0%,rgba(42,32,24,.6) 50%,rgba(42,32,24,.4) 100%)}
.hero-content{position:relative;z-index:1;max-width:38rem}
.hero h1{color:#fff;margin-bottom:1rem}
.hero .hero-sub{color:rgba(255,255,255,.85);font-size:1.125rem;line-height:1.7;margin-bottom:2rem}
.hero .hero-since{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

@media(max-width:640px){
  .hero{min-height:auto;padding:4rem 0}
}

/* ---------- Products grid ---------- */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.product-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden;transition:all var(--transition)}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.product-card-icon{width:3.5rem;height:3.5rem;background:var(--primary-light);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--primary)}
.product-card-icon svg{width:1.75rem;height:1.75rem}
.product-card-body{padding:1.75rem}
.product-card h3{margin-bottom:.5rem}
.product-card p{color:var(--text-muted);font-size:.9375rem;line-height:1.6}

@media(max-width:1024px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.products-grid{grid-template-columns:1fr}}

/* ---------- Why / Features ---------- */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.feature-item{text-align:center;padding:2rem 1.5rem}
.feature-icon{width:3rem;height:3rem;margin:0 auto 1rem;color:var(--accent)}
.feature-icon svg{width:100%;height:100%}

@media(max-width:768px){.features-grid{grid-template-columns:1fr}}

/* ---------- Testimonials ---------- */
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.testimonial-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:2rem;position:relative}
.testimonial-card::before{content:'\201C';position:absolute;top:-.25rem;left:1rem;font-size:4rem;color:var(--accent);opacity:.3;font-family:var(--font-heading);line-height:1}
.testimonial-card blockquote{font-size:1rem;line-height:1.7;color:var(--text-muted);margin-bottom:1rem;padding-top:1.5rem}
.testimonial-card cite{font-style:normal;font-weight:700;font-size:.875rem;color:var(--text)}

@media(max-width:640px){.testimonials-grid{grid-template-columns:1fr}}

/* ---------- Corporate CTA ---------- */
.corporate-cta{background:var(--primary-light);border-radius:var(--radius);padding:3rem;display:flex;align-items:center;gap:2.5rem}
.corporate-cta-text{flex:1}
.corporate-cta h2{margin-bottom:.75rem}
.corporate-cta p{color:var(--text-muted)}

@media(max-width:768px){.corporate-cta{flex-direction:column;text-align:center}}

/* ---------- Visit / Dark section ---------- */
.dark-section{background:var(--bg-dark);color:#F0EAE0;padding:5rem 0}
.dark-section h2{color:#fff}
.dark-section p,.dark-section address{color:rgba(240,234,224,.75)}
.dark-section a{color:var(--accent)}
.dark-section a:hover{color:#fff}
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.visit-item h3{color:#fff;margin-bottom:.5rem}

@media(max-width:768px){.visit-grid{grid-template-columns:1fr;text-align:center}}

/* ---------- Section headers ---------- */
.section-header{text-align:center;max-width:38rem;margin:0 auto 3rem}
.section-header p{color:var(--text-muted);margin-top:.5rem}
.section-label{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}

/* ---------- About page ---------- */
.about-hero{background:var(--bg-alt);padding:5rem 0 3rem}
.about-content{max-width:42rem;margin:0 auto}
.about-content p{margin-bottom:1.25rem;color:var(--text-muted)}
.about-content p:first-of-type{font-size:1.125rem;color:var(--text)}
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
.value-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:1.5rem}
.value-card h3{margin-bottom:.5rem;font-size:1.125rem}
.value-card p{color:var(--text-muted);font-size:.9375rem}

@media(max-width:640px){.values-grid{grid-template-columns:1fr}}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.contact-info-item{display:flex;gap:1rem;align-items:start}
.contact-info-item svg{width:1.25rem;height:1.25rem;color:var(--accent);flex-shrink:0;margin-top:.25rem}
.contact-info-item h4{font-family:var(--font-body);font-weight:700;font-size:.875rem;margin-bottom:.125rem}
.contact-info-item p,.contact-info-item a{color:var(--text-muted);font-size:.9375rem}

.contact-form{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:2rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-weight:500;font-size:.875rem;margin-bottom:.375rem;color:var(--text)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.625rem .875rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:.9375rem;transition:border-color var(--transition)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1)}
.form-group textarea{resize:vertical;min-height:6rem}
.form-group input.error,.form-group textarea.error{border-color:#C53030}
.form-error{color:#C53030;font-size:.875rem;margin-bottom:1rem;display:none}
.form-success{text-align:center;padding:2rem;display:none}
.form-success h3{color:var(--primary);margin-bottom:.5rem}
.form-success p{color:var(--text-muted)}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.ship-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-light);color:var(--primary);font-weight:700;font-size:.875rem;padding:.5rem 1rem;border-radius:var(--radius);margin-top:1rem}

@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--border-light);padding:3rem 0 1.5rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.8125rem;color:var(--text-faint)}
.footer-links{display:flex;gap:1.5rem;list-style:none}
.footer-links a{font-size:.8125rem;color:var(--text-faint)}
.footer-links a:hover{color:var(--primary)}
.footer-credit{font-size:.75rem;color:var(--text-faint);text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-light)}
.footer-credit a{color:var(--text-faint);text-decoration:underline;text-decoration-color:var(--border)}
.footer-credit a:hover{color:var(--primary)}

/* ---------- 404 ---------- */
.page-404{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:4rem 1.5rem}
.page-404 h1{margin-bottom:.5rem}
.page-404 p{color:var(--text-muted);margin-bottom:2rem;max-width:28rem}

/* ---------- Page hero (about/contact) ---------- */
.page-hero{background:var(--bg-alt);padding:4rem 0 3rem;text-align:center}
.page-hero h1{margin-bottom:.5rem}
.page-hero p{color:var(--text-muted);max-width:32rem;margin:0 auto}

/* ---------- Animations ---------- */
.fade-up{opacity:0;transform:translateY(1.5rem);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--primary);color:#fff;padding:.5rem 1rem;border-radius:var(--radius);z-index:100;font-size:.875rem}
.skip-link:focus{top:1rem}

/* ---------- Disclaimer overlay ---------- */
.zs-disclaimer{position:fixed;bottom:0;left:0;right:0;z-index:101;background:var(--bg-dark);color:rgba(240,234,224,.7);font-size:.75rem;text-align:center;padding:.75rem 1.5rem;display:none}
.zs-disclaimer a{color:var(--accent);text-decoration:underline}
.zs-disclaimer button{background:none;border:none;color:rgba(240,234,224,.5);cursor:pointer;margin-left:.75rem;font-size:.875rem}
.zs-disclaimer button:hover{color:#fff}