@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');
:root{--gold:#b18a52;--dark:#111;--light:#fff;--grey:#f5f5f5;--max:1170px}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Montserrat,Arial,sans-serif;color:#333;font-size:14px;line-height:1.7}a{text-decoration:none;color:inherit}
.top-header{background:#171717;color:#fff;height:112px;display:flex;align-items:center}.header-inner{width:min(var(--max),92%);margin:auto;display:flex;align-items:center;justify-content:space-between}
.logo{width:205px;height:70px;display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(255,255,255,.35);letter-spacing:7px;font-size:25px;font-weight:600}.nav{display:flex;gap:27px;align-items:center;color:#fff;text-transform:uppercase;font-size:12px;letter-spacing:1px}.nav a{color:#fff}.nav a:hover{color:var(--gold)}
.hero{min-height:650px;display:grid;grid-template-columns:repeat(3,1fr);background:#222}.hero-card{min-height:650px;position:relative;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}.hero-card:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}.hero-card .content{position:relative;z-index:1}.hero-card h1{font-size:43px;line-height:1.1;margin:10px 0;text-transform:uppercase;font-weight:500;letter-spacing:2px}.hero-card .stars{letter-spacing:7px;font-size:15px}.hero-card .btn{margin-top:25px}
.btn{display:inline-block;border:1px solid #fff;color:#fff;padding:11px 27px;text-transform:uppercase;font-size:11px;letter-spacing:1.5px}.btn.dark{border-color:#222;background:#222}
.section{padding:85px 0}.section.light{background:#fff}.section.grey{background:#f4f4f4}.wrap{width:min(var(--max),92%);margin:auto}.center{text-align:center}.heading{font-size:33px;text-transform:uppercase;font-weight:500;letter-spacing:2px;margin:0 0 28px}.lead{max-width:900px;margin:0 auto 55px;font-size:15px;color:#555}
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff}.class{min-height:265px;padding:35px 35px 28px;text-align:center;border:1px solid #e6e6e6;background:#fff}.class h3{font-size:19px;font-weight:500;text-transform:uppercase;letter-spacing:1px;margin:0 0 18px}.class p{font-size:13px;max-width:300px;margin:0 auto 12px}.class .cost{font-weight:600;line-height:1.9}.class .enquire{display:inline-block;margin-top:15px;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#222;border-bottom:1px solid #222}
.catering{background:#111;color:#fff;position:relative;overflow:hidden}.catering:before{content:"";position:absolute;inset:0;background:url('https://www.top-nosh.co.za/wp-content/uploads/2020/11/catering-canapes.jpg') center/cover;opacity:.18}.catering .wrap{position:relative}.catering .heading{color:#fff}.catering .lead{color:#ddd}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.service{text-align:center;padding:20px 30px}.service h3{font-size:18px;text-transform:uppercase;font-weight:500;letter-spacing:1px}.service p{font-size:13px;color:#ddd;min-height:74px}
.recipes{background:#f4f4f4}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.recipe{background:#fff;padding:28px}.recipe h3{font-size:18px;text-transform:uppercase;font-weight:500}.recipe .meta{font-size:11px;color:#999}
.footer{background:#151515;color:#eee;position:relative;padding:75px 0 30px}.footer:before{content:"";position:absolute;inset:0;background:url('https://www.top-nosh.co.za/wp-content/uploads/2020/11/fine-dining.jpg') center/cover;opacity:.13}.footer .wrap{position:relative}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:60px}.footer h3{text-transform:uppercase;letter-spacing:2px;font-size:16px;font-weight:500;color:#fff}.footer p,.footer a{font-size:13px;color:#ccc}.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:45px;padding-top:20px;color:#888;font-size:11px}
.pagehead{background:#eee;padding:65px 0}.pagehead h1{font-size:44px;text-transform:uppercase;font-weight:500;margin:0}.prose{max-width:850px}
@media(max-width:850px){.nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}.top-header{height:auto;padding:18px 0}.hero{grid-template-columns:1fr}.hero-card{min-height:480px}.classes,.service-grid,.recipe-grid,.footer-grid{grid-template-columns:1fr}}