:root{--gold:#f7bd20;--gold2:#f6d36d;--navy:#26394b;--copper:#b56c3e;--cream:#fff8e9;--ink:#242424}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.65;background:#f7f4ee;position:relative;isolation:isolate}
body:before{content:"";position:fixed;inset:0;background:url("images/rok-brick-wall.png") center center/cover no-repeat;opacity:.60;z-index:-2;pointer-events:none}body:after{content:"";position:fixed;inset:0;background:rgba(255,252,245,.76);z-index:-1;pointer-events:none}
a{color:var(--navy)}.topbar{background:var(--navy);color:white;padding:.55rem 5%;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-size:.92rem;text-align:center}
header{background:rgba(247,189,32,.94);padding:1.1rem 4%;display:flex;align-items:center;justify-content:center;gap:1rem;text-align:center;border-bottom:5px solid var(--copper);flex-direction:column}.logo{width:96px;height:96px;object-fit:contain;border-radius:50%;background:white;border:3px solid var(--navy);flex-shrink:0}.brand h1{font-family:Georgia,serif;margin:0;font-size:clamp(1.5rem,4vw,2.5rem);line-height:1.15;color:#171717}.brand .trading{font-weight:bold;font-style:normal;margin:.4rem 0 0;font-size:1rem}.brand p{font-family:Georgia,serif;font-style:italic;margin:.25rem 0 0;font-size:1.05rem}
nav{background:var(--navy);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.15rem;padding:.4rem 2%}nav a{color:white;text-decoration:none;padding:.7rem 1rem;font-weight:bold;border-bottom:3px solid transparent}nav a:hover,nav a.active{background:#354d63;border-bottom-color:var(--gold)}
main{max-width:1160px;margin:1.4rem auto;padding:1.5rem 5% 3.5rem;background:rgba(255,255,255,.87);border-radius:12px;box-shadow:0 5px 24px #26394b18}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#8c4e26;font-weight:bold;font-size:.82rem}h2{font-family:Georgia,serif;color:var(--navy);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2;margin:.25rem 0 1rem}h3{color:var(--navy)}p{max-width:78ch}.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;padding:1rem 0 2rem}.hero img,.feature-img{width:100%;height:auto;display:block;border-radius:14px;border:5px solid white;box-shadow:0 8px 22px #26394b20}
.btn{display:inline-block;background:var(--navy);color:white;text-decoration:none;font-weight:bold;padding:.75rem 1.1rem;border-radius:6px;margin:.35rem .4rem .35rem 0;border:2px solid var(--navy)}.btn.gold{background:var(--gold);color:#222;border-color:var(--gold)}.btn:hover{filter:brightness(1.12)}.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin:2.4rem 0}.split img{width:100%;border-radius:12px;border:4px solid white;box-shadow:0 5px 18px #00000018}.split.reverse img{order:2}.panel{background:rgba(255,240,196,.94);border-left:6px solid var(--copper);padding:1.3rem 1.5rem;border-radius:8px;margin:1.5rem 0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin:1.5rem 0}.card{background:rgba(255,255,255,.96);padding:1.1rem;border-radius:10px;border-top:5px solid var(--gold);box-shadow:0 4px 16px #26394b13}.card img{width:100%;height:auto;border-radius:7px}.card h3{margin:.7rem 0 .3rem}.service-list{columns:2;column-gap:2.5rem;padding-left:1.2rem}.service-list li{padding:.25rem 0;break-inside:avoid}
form{background:rgba(255,255,255,.97);padding:1.5rem;border-radius:12px;box-shadow:0 4px 20px #26394b14;max-width:850px}label{display:block;font-weight:bold;color:var(--navy);margin:.85rem 0 .25rem}input,select,textarea{width:100%;padding:.8rem;border:1px solid #b9b9b9;border-radius:5px;font:inherit;background:#fffdf8}textarea{min-height:130px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.notice{font-size:.92rem;background:#f2f5f7;padding:1rem;border-radius:6px}.branch{background:white;border-radius:12px;padding:1.3rem;margin:1.2rem 0;border-left:6px solid var(--gold);box-shadow:0 4px 16px #26394b12}.branch img{max-width:100%;height:auto;border-radius:8px}.maplink{display:inline-block;margin:.4rem 0;color:#7d3e1e;font-weight:bold}
.project-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:1.5rem 0}.project-gallery a{display:block;overflow:hidden;border-radius:9px;background:#eee;box-shadow:0 3px 12px #0002}.project-gallery img{display:block;width:100%;height:190px;object-fit:cover;transition:transform .25s}.project-gallery a:hover img{transform:scale(1.04)}.project-gallery figcaption{padding:.4rem .65rem;background:#fff;font-size:.88rem}
footer{background:var(--navy);color:#fff;padding:2rem 5%;text-align:center}footer a{color:#ffdb70}footer .social{display:flex;justify-content:center;flex-wrap:wrap;gap:1.2rem;margin:1rem auto;max-width:800px}.social a{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;color:#fff;text-decoration:none;font-weight:bold;padding:.5rem .7rem;border:1px solid #ffffff44;border-radius:8px;min-width:95px}.social a:hover{background:#ffffff20}.social svg{width:23px;height:23px;fill:currentColor}.social .whatsapp{color:#25D366}.social .youtube{color:#ff3333}.social .instagram{color:#f08ab5}.social .facebook{color:#6ea8ff}.social .tiktok{color:#fff}.social .flickr{color:#ff5aa5}footer p{margin:.5rem auto}.small{font-size:.9rem;color:#d9e0e5}
@media(max-width:760px){.logo{width:76px;height:76px}header{padding:.9rem 3%}nav{gap:.2rem;padding:.45rem .3rem}nav a{padding:.55rem .65rem;font-size:.9rem}.hero,.split{grid-template-columns:1fr}.split.reverse img{order:0}.service-list{columns:1}.form-grid{grid-template-columns:1fr}.topbar{justify-content:center;text-align:center}main{margin:.7rem .45rem;padding:1.1rem 1rem 2.5rem}.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.project-gallery img{height:145px}.social a{min-width:85px}}
@media(max-width:380px){nav a{font-size:.82rem;padding:.5rem .45rem}.project-gallery{grid-template-columns:1fr}.project-gallery img{height:210px}}