*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f1ece3;color:#1b1916;font-family:Georgia,"Times New Roman",serif;line-height:1.7}.site-header{position:absolute;z-index:10;top:0;left:0;right:0;padding:22px;display:flex;justify-content:space-between;align-items:center}.brand{color:#fff;text-decoration:none;font:700 18px Arial,sans-serif;letter-spacing:4px}.brand span{display:block;font-size:8px;font-weight:400;letter-spacing:4px;margin-top:3px}.menu-btn{width:48px;height:48px;border:1px solid #fff9;background:#0005;color:#fff;font-size:28px}.site-header nav{display:none;position:absolute;right:22px;top:82px;background:#171512;padding:12px 20px;min-width:230px}.site-header nav.open{display:flex;flex-direction:column}.site-header nav a{color:#fff;text-decoration:none;padding:11px 0;border-bottom:1px solid #fff2;font:700 10px Arial;letter-spacing:2px}.hero{min-height:100svh;background-image:linear-gradient(90deg,rgba(36,33,29,.98) 0%,rgba(36,33,29,.90) 34%,rgba(36,33,29,.35) 55%,rgba(20,18,16,.18) 100%),url("images/warna-hero-website-photo.jpg");background-size:cover;background-position:center;color:#fff;display:flex;align-items:flex-end;padding:0 7vw 85px;position:relative}.hero:after{content:none}.hero-inner{position:relative;z-index:1;max-width:850px}.eyebrow{font:700 10px Arial,sans-serif;letter-spacing:3px;opacity:.65}.hero h1{font-size:clamp(45px,8vw,82px);line-height:1.02;font-weight:500;margin:15px 0}.lead{font-size:17px;max-width:580px}.btn{display:inline-block;margin-top:15px;padding:14px 23px;background:#f4eee5;color:#171512;text-decoration:none;font:700 10px Arial;letter-spacing:2px}.scroll{position:absolute;z-index:1;right:22px;bottom:25px;writing-mode:vertical-rl;font:9px Arial;letter-spacing:2px;opacity:.55}.section{max-width:1200px;margin:auto;padding:105px 7vw}.about{display:grid;gap:55px;align-items:center}.visual{min-height:450px;display:grid;place-items:center;position:relative}.visual-dark{background:linear-gradient(135deg,#75634e,#29251f);color:#eee;font:700 30px Arial;letter-spacing:7px;text-align:center}.visual-dark:after,.tile:after,.process-art:after,.photo:after{content:"";position:absolute;inset:14px;border:1px solid #fff3}.visual-dark small{font-size:9px;letter-spacing:4px;font-weight:400}.section h2{font-size:clamp(40px,7vw,68px);font-weight:500;line-height:1.05;margin:10px 0 24px}.section p:not(.eyebrow){font-size:16px;opacity:.76}.dark{max-width:none;background:#201d19;color:#f1ece3}.dark>*{max-width:1050px;margin-left:auto;margin-right:auto}.cards{display:grid;gap:28px;margin-top:45px}.tile{height:330px;position:relative;display:grid;place-items:center;text-align:center;color:#eee;font:10px Arial;letter-spacing:5px}.tile small{display:block;font-size:7px;letter-spacing:2px;opacity:.7;margin-top:7px}.tile1{background:linear-gradient(135deg,#6c5b46,#28241f)}.tile2{background:linear-gradient(135deg,#514a41,#95806a)}.tile3{background:linear-gradient(135deg,#89765d,#302c27)}.cards h3,.process h3{font-size:24px;font-weight:500;margin:16px 0 4px}.cards p{margin-top:0}.process{display:grid;gap:35px;margin-top:45px}.process b{font:700 10px Arial;letter-spacing:2px;opacity:.5}.process-art{height:250px;margin:18px 0;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#75634e,#2d2924);color:#eee;font:10px Arial;letter-spacing:5px}.process p{margin-top:0}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:45px}.photo{min-height:210px;position:relative;display:grid;place-items:end start;padding:18px;color:#eee;font:700 9px Arial;letter-spacing:3px}.photo:after{inset:10px}.p1{min-height:430px;background:linear-gradient(145deg,#685842,#29241f);grid-row:span 2}.p2{background:linear-gradient(135deg,#95836b,#494036)}.p3{background:linear-gradient(135deg,#403b35,#8b755b)}.p4{background:linear-gradient(135deg,#76634e,#302c27)}.p5{background:linear-gradient(135deg,#4d463d,#a28d72)}.contact{text-align:center}.contact>p:not(.eyebrow){max-width:650px;margin:0 auto}.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px auto 0}.socials a{color:inherit;text-decoration:none;border:1px solid #17151255;padding:11px 14px;font:700 9px Arial;letter-spacing:2px}.phone{margin-top:20px;font:11px Arial;letter-spacing:2px;opacity:.55}footer{background:#11100e;color:#ddd;text-align:center;padding:45px 20px;font:10px Arial;letter-spacing:2px}footer p{opacity:.55;font-size:9px;letter-spacing:1px}footer small{opacity:.4;font-size:8px}@media(min-width:760px){.site-header{padding:30px 48px}.menu-btn{display:none}.site-header nav{display:flex;position:static;background:transparent;padding:0;min-width:0;gap:28px}.site-header nav a{border:0;padding:0}.about{grid-template-columns:1fr 1fr}.cards{grid-template-columns:repeat(3,1fr)}.process{grid-template-columns:repeat(3,1fr)}.gallery-grid{grid-template-columns:1.35fr 1fr 1fr;grid-auto-rows:250px}.p1{grid-row:span 2}.p2{grid-column:span 2}.hero{padding-left:7vw}.section{padding-top:125px;padding-bottom:125px}}
/* Exact final WARNA hero artwork already contains its own logo, headline, copy, button and feature row. */
.hero-inner{display:none}
.scroll{display:none}