
/*
Theme Name: Ennaval — Spice Exact Layout Recreation
Description: Ennaval one-page WordPress theme recreating the supplied Spice demo's homepage structure, typography treatment, motion and mouse-helper interaction with original code.
Version: 3.0
*/
:root{
 --bg:#f5f1ec;--white:#fff;--dark:#27221f;--text:#4d4844;--light:#8d8580;--accent:#a88467;--line:#ddd6d0;
 --serif:"Cormorant Garamond",Georgia,serif;--sans:"Montserrat",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:#fff;font-family:var(--sans);font-size:14px;line-height:1.75}body.cursor-on,*{cursor:none!important}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.wrap{width:min(1200px,90%);margin:0 auto}
.mouse-helper{position:fixed;z-index:999999;left:0;top:0;width:34px;height:34px;border:1px solid rgba(255,255,255,.95);border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .28s cubic-bezier(.22,.61,.36,1),height .28s cubic-bezier(.22,.61,.36,1),border-color .2s,opacity .2s;will-change:left,top}.mouse-helper:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.mouse-helper.show{opacity:1}.mouse-helper.big{width:58px;height:58px;border-color:#fff}.mouse-helper.big:after{width:4px;height:4px}
@media(max-width:1279px){.mouse-helper{display:none}body.cursor-on,*{cursor:default!important}}
/* Header */
.header{position:absolute;z-index:100;top:0;left:0;right:0;color:#fff}.header-row{height:105px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.brand{justify-self:start}.brand img{width:160px}.menu{justify-self:center;display:flex;gap:36px;text-transform:uppercase;letter-spacing:.14em;font-size:10px}.menu a{position:relative}.menu a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:right .35s}.menu a:hover:after{right:0}.header-side{justify-self:end;display:flex;align-items:center;gap:20px;text-transform:uppercase;letter-spacing:.14em;font-size:10px}.mobile-menu{display:none}
/* Hero */
.hero{height:850px;position:relative;overflow:hidden;background:#2b2522;color:#fff}.hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(26,21,19,.64),rgba(26,21,19,.22)),url("https://images.unsplash.com/photo-1604654894610-df63bc536371?auto=format&fit=crop&w=2200&q=90");background-size:cover;background-position:center;transform:scale(1.03);animation:heroZoom 10s ease-out forwards}@keyframes heroZoom{to{transform:scale(1)}}.hero-inner{position:relative;height:100%;display:flex;align-items:center}.hero-copy{max-width:730px;padding-top:80px}.hero-kicker{text-transform:uppercase;letter-spacing:.35em;font-size:10px;margin:0 0 20px;color:#e3d8d0}.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(64px,8vw,118px);line-height:.78;letter-spacing:-.045em;margin:0;color:#fff}.hero h1 em{font-weight:400}.hero-desc{font-size:13px;line-height:2;color:#eee7e1;max-width:570px;margin:35px 0}.button{display:inline-flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.65);padding:14px 24px;text-transform:uppercase;font-size:9px;letter-spacing:.18em;transition:.35s}.button:after{content:"→";font-size:15px}.button:hover{background:#fff;color:var(--dark);border-color:#fff}
/* Intro feature cards — mirrors demo's three visual intro blocks */
.intro{background:var(--bg);padding:0}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:-1px}.intro-card{min-height:330px;padding:44px 38px;position:relative;overflow:hidden;border-right:1px solid rgba(50,43,39,.12)}.intro-card:last-child{border:0}.intro-card:nth-child(2){background:#eee8e2}.intro-card:nth-child(3){background:#2a2421;color:#fff}.intro-card .number{font:400 38px var(--serif);color:#b69a83}.intro-card h3{font:500 32px/1 var(--serif);margin:45px 0 15px}.intro-card p{font-size:11px;line-height:1.9;color:var(--light);max-width:270px}.intro-card:nth-child(3) p{color:#c8c0ba}.card-arrow{position:absolute;right:34px;bottom:30px;font-size:24px;color:var(--accent)}

/* Spice-style moving text marquee */
.spice-marquee{height:76px;background:#edf9fc;overflow:hidden;display:flex;align-items:center;white-space:nowrap;border:0}
.spice-marquee-track{display:flex;align-items:center;width:max-content;animation:spiceMarquee 28s linear infinite;will-change:transform}
.spice-marquee-item{font:400 29px/1 var(--serif);color:#192456;display:inline-flex;align-items:center}
.spice-marquee-dot{font-family:Arial,sans-serif;font-size:12px;margin:0 30px;color:#192456}
@keyframes spiceMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.spice-marquee:hover .spice-marquee-track{animation-play-state:paused}
@media(max-width:600px){.spice-marquee{height:62px}.spice-marquee-item{font-size:23px}.spice-marquee-dot{margin:0 20px}}

/* Generic */
.section{padding:115px 0}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:start;margin-bottom:65px}.eyebrow{text-transform:uppercase;letter-spacing:.31em;font-size:10px;color:var(--accent);margin:0 0 15px}.title{font:500 clamp(52px,5.3vw,78px)/.88 var(--serif);letter-spacing:-.035em;color:var(--dark);margin:0}.description{font-size:13px;line-height:2;color:var(--light);padding-top:24px}.description p{margin:0 0 18px}
/* Services */
.services{background:#fff}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.service{padding:32px 28px;min-height:290px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .4s,transform .4s}.service:hover{background:#f5f0eb;transform:translateY(-5px)}.service-no{font:400 32px var(--serif);color:#bba797}.service h3{font:500 26px/1.03 var(--serif);color:var(--dark);margin:45px 0 15px}.service p{font-size:11px;color:var(--light);line-height:1.8;margin:0;max-width:240px}.service-link{position:absolute;bottom:27px;right:28px;color:var(--accent);font-size:19px}
/* Split image section */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:730px;background:var(--bg)}.split-image{background:url("https://images.unsplash.com/photo-1610992015732-2449b76344bc?auto=format&fit=crop&w=1500&q=90") center/cover}.split-copy{display:flex;align-items:center;padding:90px 10%}.split-copy-inner{max-width:520px}.split-copy .title{margin-bottom:27px}.checks{list-style:none;padding:0;margin:30px 0}.checks li{padding:13px 0;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.09em;font-size:10px}.checks li:before{content:"→";color:var(--accent);margin-right:14px}.button.dark{color:var(--dark);border-color:var(--dark)}.button.dark:hover{background:var(--dark);color:#fff}
/* Product/work area styled like demo */
.work{background:#fff}.work-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:320px 320px;gap:12px}.work-item{background-size:cover;background-position:center;position:relative;overflow:hidden}.work-item:after{content:"";position:absolute;inset:0;background:rgba(25,20,18,.12);transition:.5s}.work-item:hover:after{background:rgba(25,20,18,.28)}.work-item:hover{background-size:106%}.work-a{grid-row:1/3;background-image:url("https://images.unsplash.com/photo-1519014816548-bf5e2f4f8c12?auto=format&fit=crop&w=1300&q=90")}.work-b{background-image:url("https://images.unsplash.com/photo-1604654894610-df63bc536371?auto=format&fit=crop&w=900&q=90")}.work-c{background-image:url("https://images.unsplash.com/photo-1632345031435-8727f6897d53?auto=format&fit=crop&w=900&q=90")}.work-d{background-image:url("https://images.unsplash.com/photo-1610992015732-2449b76344bc?auto=format&fit=crop&w=900&q=90")}
/* Dark statement */
.statement{background:#28221f;color:#fff;text-align:center;padding:125px 20px}.statement .title{color:#fff;max-width:900px;margin:auto}.statement p{color:#c9c0ba;max-width:580px;margin:28px auto 0;font-size:13px}
/* Contact */
.contact{background:var(--bg)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-box{border-top:1px solid var(--line);padding-top:25px}.contact-box h3{font:500 37px var(--serif);margin:0 0 14px;color:var(--dark)}.contact-box p{font-size:12px;color:var(--light);margin:0}.contact-box a{color:var(--accent)}
/* Footer */
.footer{background:#211d1b;color:#d3cbc5;padding:75px 0 28px}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:65px}.footer-logo{width:165px;margin-bottom:18px}.footer h4{text-transform:uppercase;letter-spacing:.2em;font-size:9px;color:#fff;margin:0 0 18px}.footer p{font-size:11px;line-height:1.9;color:#99918c}.footer-bottom{border-top:1px solid #413a35;margin-top:55px;padding-top:18px;display:flex;justify-content:space-between;color:#7f7771;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
/* Exact-feel motion system */
.anim{opacity:0;transform:translateY(42px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}.anim.visible{opacity:1;transform:none}.delay1{transition-delay:.08s}.delay2{transition-delay:.16s}.delay3{transition-delay:.24s}.delay4{transition-delay:.32s}
.img-reveal{overflow:hidden}.img-reveal>div{height:100%;transform:scale(1.12);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}.img-reveal.visible>div{transform:scale(1)}
@media(max-width:1023px){.header-row{grid-template-columns:auto 1fr auto}.menu{display:none}.mobile-menu{display:block;justify-self:end;border:0;background:transparent;color:#fff;font-size:24px}.header-side{display:none}.hero{height:760px}.intro-grid{grid-template-columns:1fr}.intro-card{min-height:230px}.service-grid{grid-template-columns:repeat(2,1fr)}.section-head{grid-template-columns:1fr;gap:20px}.split{grid-template-columns:1fr}.split-image{min-height:520px}.work-grid{grid-template-columns:1fr 1fr;grid-template-rows:300px 300px}.work-a{grid-row:1/3}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wrap{width:88%}.header-row{height:78px}.brand img{width:125px}.hero{height:720px}.hero-copy{padding-top:80px}.hero h1{font-size:58px}.hero-desc{font-size:12px}.intro-card{min-height:210px;padding:30px}.intro-card h3{margin:28px 0 10px;font-size:27px}.section{padding:75px 0}.service-grid{grid-template-columns:1fr}.service{min-height:240px}.split-image{min-height:430px}.split-copy{padding:70px 7%}.work-grid{display:block}.work-item{height:290px;margin-bottom:10px}.statement{padding:90px 20px}.contact-grid{grid-template-columns:1fr;gap:45px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}}

/* Guaranteed visible pointer + delayed Spice-style helper */
.mouse-pointer{position:fixed;z-index:1000000;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;will-change:left,top;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.mouse-pointer:before{content:"";position:absolute;left:0;top:0;width:0;height:0;border-top:0 solid transparent;border-bottom:17px solid transparent;border-left:11px solid #fff;transform:rotate(-3deg);mix-blend-mode:difference}
.mouse-pointer:after{content:"";position:absolute;left:2px;top:2px;width:0;height:0;border-top:0 solid transparent;border-bottom:13px solid transparent;border-left:8px solid #111;transform:rotate(-3deg);opacity:.92}
.mouse-pointer.show{opacity:1}
@media(max-width:1279px){.mouse-pointer{display:none}}
