@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
:root{--ink:#171416;--ink2:#251b22;--plum:#4a2639;--plum2:#6d3a54;--cream:#f7f0e8;--paper:#fffaf5;--copper:#b77647;--sage:#7f8b78;--line:rgba(23,20,22,.12);--white:#fff;--shadow:0 30px 70px rgba(37,27,34,.14);--r:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.section{padding:96px 0}.eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--copper);display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";width:34px;height:1px;background:currentColor}.display{font-family:'Playfair Display',serif;font-size:clamp(3.2rem,7vw,7.4rem);line-height:.92;letter-spacing:-.045em;margin:18px 0 24px}.section-title{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,4.6vw,4.9rem);line-height:1;letter-spacing:-.035em;margin:12px 0 18px}.lead{font-size:1.08rem;line-height:1.75;color:#5c5056;max-width:720px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;border-radius:999px;border:1px solid transparent;font-weight:600;transition:.25s;cursor:pointer}.btn.primary{background:var(--ink);color:white}.btn.primary:hover{background:var(--plum);transform:translateY(-2px)}.btn.light{background:var(--paper);color:var(--ink);border-color:var(--line)}.btn.light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn.accent{background:var(--copper);color:white}.btn.accent:hover{filter:brightness(.92);transform:translateY(-2px)}
/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;padding:16px 0;transition:.3s}.site-header.scrolled{background:rgba(247,240,232,.92);backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(20,10,16,.08)}.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:11px;justify-self:start}.mark{width:44px;height:44px;border-radius:14px;background:var(--ink);position:relative;display:grid;place-items:center;color:var(--cream);font-family:'Playfair Display',serif;font-size:1.45rem}.mark:after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.24);border-radius:10px}.brandcopy strong{display:block;font-size:.92rem}.brandcopy small{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#7a6c72;margin-top:2px}.navlinks{display:flex;align-items:center;gap:30px;justify-self:center}.navlinks a{font-size:.9rem;font-weight:500;position:relative}.navlinks a:after{content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:1px;background:var(--copper);transition:.25s}.navlinks a:hover:after,.navlinks a.active:after{left:0;right:0}.navright{display:flex;align-items:center;gap:12px;justify-self:end}.phone{font-size:.86rem;font-weight:600}.menu-btn{display:none;background:none;border:0;font-size:1.5rem}.mobile-panel{display:none}
/* hero */
.hero{min-height:100vh;padding:130px 0 58px;display:flex;align-items:flex-end;position:relative;background:linear-gradient(120deg,rgba(247,240,232,.98) 0%,rgba(247,240,232,.9) 40%,rgba(247,240,232,.2) 72%),url('https://www.crown.co.za/images/Latest_news_2024/Construction-World/Rapid_progress_on_the_Bertrams_Multipurpose_Centre.jpg') center/cover no-repeat}.hero:after{content:"";position:absolute;right:4vw;top:17vh;width:26vw;height:26vw;border:1px solid rgba(183,118,71,.28);border-radius:50%;box-shadow:0 0 0 45px rgba(183,118,71,.06),0 0 0 90px rgba(183,118,71,.04)}.hero-inner{position:relative;z-index:2;max-width:920px}.hero .display em{color:var(--copper);font-weight:600}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.hero-meta{margin-top:52px;display:flex;gap:14px;flex-wrap:wrap}.meta-chip{background:rgba(255,250,245,.88);backdrop-filter:blur(10px);border:1px solid rgba(23,20,22,.08);border-radius:999px;padding:10px 14px;font-size:.8rem}
/* proof */
.proofbar{background:var(--ink);color:white}.proofgrid{display:grid;grid-template-columns:repeat(4,1fr)}.proofitem{padding:34px;border-right:1px solid rgba(255,255,255,.1)}.proofitem:last-child{border-right:0}.proofitem b{font-family:'Playfair Display',serif;font-size:1.7rem;display:block;margin-bottom:6px}.proofitem span{font-size:.78rem;color:#cfc5ca;line-height:1.5}.proofitem a{color:#f0d0bb}
/* cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.service-card{padding:30px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;transition:.28s;position:relative}.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.service-card .num{font-family:'Playfair Display',serif;color:var(--copper);font-size:2rem}.service-card h3{font-family:'Playfair Display',serif;font-size:2rem;margin:30px 0 12px;line-height:1}.service-card p{color:#655a60;line-height:1.7}.service-card .arrow{font-size:1.2rem}.service-card.dark{background:var(--ink);color:#fff}.service-card.dark p{color:#d8ced3}.service-card.plum{background:var(--plum);color:#fff}.service-card.plum p{color:#eadde4}
/* showcase */
.showcase{background:var(--ink);color:white;overflow:hidden}.showcase-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:690px}.showcase-copy{padding:80px max(30px,5vw);display:flex;flex-direction:column;justify-content:center}.showcase-copy .lead{color:#cfc4ca}.showcase-media{position:relative;background:linear-gradient(180deg,rgba(23,20,22,.02),rgba(23,20,22,.6)),url('https://construction.capetown/uploads/interior-renovation-property-refurbishment.jpg') center/cover no-repeat}.showcase-media .badge{position:absolute;right:28px;bottom:28px;background:rgba(255,250,245,.92);color:var(--ink);padding:18px 20px;border-radius:18px;max-width:280px}.badge small{display:block;text-transform:uppercase;letter-spacing:.15em;font-size:.64rem;color:var(--copper);margin-bottom:6px}.showcase-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}.tab{border:1px solid rgba(255,255,255,.18);background:transparent;color:white;border-radius:999px;padding:10px 14px;cursor:pointer}.tab.active{background:white;color:var(--ink)}
/* interactive brief */
.brief{background:var(--plum);color:white;border-radius:38px;padding:54px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}.brief .lead{color:#eadde4}.brief-panel{background:#fff;color:var(--ink);border-radius:26px;padding:24px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.choice{padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;cursor:pointer;transition:.2s}.choice:hover,.choice.active{background:var(--cream);border-color:var(--copper)}.brief-result{margin-top:18px;padding:18px;border-radius:16px;background:#f6efe8}.brief-result strong{display:block;margin-bottom:4px}.brief-result p{margin:0;color:#665b60;line-height:1.6}
/* work */
.work-card{position:relative;min-height:500px;border-radius:30px;overflow:hidden;color:#fff;background:#2d2529}.work-card .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:.5s}.work-card:hover .img{transform:scale(1.04)}.work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(13,10,12,.88))}.work-content{position:absolute;z-index:2;left:28px;right:28px;bottom:28px}.work-content h3{font-family:'Playfair Display',serif;font-size:2.1rem;margin:8px 0}.tag{display:inline-block;border:1px solid rgba(255,255,255,.3);background:rgba(20,15,18,.3);backdrop-filter:blur(8px);border-radius:999px;padding:7px 10px;font-size:.7rem;margin:2px}.note{font-size:.75rem;color:#766a70}
/* public record */
.record{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-radius:34px;overflow:hidden;border:1px solid var(--line)}.record-left{padding:50px}.record-right{padding:50px;background:#eee3da}.record-kpi{font-family:'Playfair Display',serif;font-size:3.2rem;color:var(--plum);margin:8px 0}.record-list{display:grid;gap:12px;margin-top:26px}.record-list div{padding:14px 0;border-bottom:1px solid rgba(23,20,22,.12)}
/* page hero */
.page-hero{padding:165px 0 70px;background:var(--ink);color:white;position:relative;overflow:hidden}.page-hero:after{content:"CZ";position:absolute;right:-2vw;bottom:-8vw;font-family:'Playfair Display',serif;font-size:28vw;color:rgba(255,255,255,.025);line-height:1}.page-hero .lead{color:#d5cbd0}.crumb{font-size:.78rem;color:#bcaeb5;margin-bottom:28px}
/* services page */
.service-row{display:grid;grid-template-columns:120px 1fr 1fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}.service-row .big-num{font-family:'Playfair Display',serif;font-size:3rem;color:var(--copper)}.service-row h2{font-family:'Playfair Display',serif;font-size:2.5rem;margin:0}.service-row ul{margin:0;padding-left:18px;line-height:1.9;color:#62565c}
/* about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.portrait{min-height:560px;border-radius:34px;background:linear-gradient(180deg,transparent,rgba(20,15,18,.32)),url('https://d2xsxph8kpxj0f.cloudfront.net/310519663379990927/j7iQDKfeNsvqemx2uwJdwY/about-bg-Lz8NBc4oHdd4vQXMLZZPSk.webp') center/cover no-repeat}.timeline{display:grid;gap:0}.time{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}.time b{font-family:'Playfair Display',serif;font-size:2rem;color:var(--copper)}
/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px}.contact-card{background:var(--ink);color:white;border-radius:34px;padding:40px}.contact-card a{color:white}.contact-line{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}.contact-line small{display:block;color:#c2b4bb;text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;margin-bottom:6px}.form{background:var(--paper);border-radius:34px;padding:38px;border:1px solid var(--line)}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#756970}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:white;border-radius:13px;padding:14px;color:var(--ink);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper);box-shadow:0 0 0 3px rgba(183,118,71,.12)}
/* footer */
footer{background:#0f0d0f;color:white;padding:70px 0 28px}.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:40px}.footer-brand{font-family:'Playfair Display',serif;font-size:3.2rem;line-height:.95}.footer-links{display:grid;gap:10px;color:#c9bec3}.footer-bottom{margin-top:56px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:#9e9097;font-size:.75rem}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:.7s}.reveal.in{opacity:1;transform:none}
@media(max-width:960px){.nav{grid-template-columns:1fr auto}.navlinks,.navright{display:none}.menu-btn{display:block}.mobile-panel{position:fixed;inset:76px 16px auto;background:var(--paper);border-radius:22px;padding:18px;box-shadow:var(--shadow);z-index:70}.mobile-panel.open{display:grid;gap:6px}.mobile-panel a{padding:14px;border-bottom:1px solid var(--line)}.proofgrid{grid-template-columns:1fr 1fr}.proofitem:nth-child(2){border-right:0}.grid-3{grid-template-columns:1fr 1fr}.showcase-grid,.brief,.split,.contact-grid,.record{grid-template-columns:1fr}.showcase-media{min-height:560px}.service-row{grid-template-columns:80px 1fr}.service-row>div:last-child{grid-column:2}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.wrap{width:min(100% - 30px,1180px)}.section{padding:70px 0}.site-header{padding:11px 0}.brandcopy small{display:none}.hero{padding:120px 0 40px;min-height:92vh;background-position:68% center}.hero:after{display:none}.display{font-size:clamp(3rem,16vw,5rem)}.proofgrid,.grid-3,.grid-2,.formgrid,.choice-grid{grid-template-columns:1fr}.proofitem{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.brief{padding:28px;border-radius:26px}.showcase-copy{padding:58px 24px}.showcase-media{min-height:430px}.service-row{grid-template-columns:1fr;gap:10px}.service-row>div:last-child{grid-column:auto}.record-left,.record-right{padding:30px}.page-hero{padding-top:130px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{display:grid;gap:8px}.phone{display:none}.work-card{min-height:420px}.contact-card,.form{padding:26px}}