*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px;line-height:1.7;scroll-behavior:smooth}
body{background-color:#1C1A17;color:#B8AFA0;font-family:'Source Sans 3',sans-serif;font-weight:300;overflow-x:hidden}
.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
.monogram{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Bebas Neue',sans-serif;font-size:40vw;color:#C9A54E;opacity:0;transition:opacity 600ms;pointer-events:none;z-index:0}
.monogram.visible{opacity:0.06}
.top-nav{position:fixed;top:0;left:0;width:100%;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;z-index:100;opacity:0;transition:opacity 300ms}
.top-nav.visible{opacity:1}
.nav-brand{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:#C9A54E;letter-spacing:0.06em}
.nav-links{display:flex;gap:24px}
.nav-links a{font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:0.75rem;color:#8B7D5E;text-decoration:none;text-transform:uppercase;letter-spacing:0.08em;transition:color 200ms}
.nav-links a:hover{color:#C9A54E}
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 80px;max-width:1200px;margin:0 auto}
.hero-divider{position:absolute;top:0;right:0;width:0;height:100%;background:#C9A54E;opacity:0.15;transform:skewX(-4deg);transition:width 400ms ease-out}
.hero-divider.visible{width:2px}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:4.8rem;color:#C9A54E;letter-spacing:0.06em;line-height:1.1;opacity:0;transform:translateX(-60px);transition:opacity 500ms ease-out,transform 500ms ease-out}
.hero-title.visible{opacity:1;transform:translateX(0)}
.hero-statement{font-family:'Source Sans 3',sans-serif;font-weight:300;font-size:1.05rem;color:#8B7D5E;max-width:500px;margin-top:24px;opacity:0;transition:opacity 400ms ease-out}
.hero-statement.visible{opacity:1}
.section-header{margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid #2A261D}
.section-label{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:0.65rem;color:#8B7D5E;letter-spacing:0.12em;text-transform:uppercase;display:block;margin-bottom:8px}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;color:#C9A54E;letter-spacing:0.06em}
.mandate-section,.cases-section,.council-section{max-width:1200px;margin:0 auto;padding:80px 80px}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.portfolio-grid.three-col{grid-template-columns:repeat(3,1fr)}
.portfolio-card{background:#252219;border:1px solid #2A261D;padding:32px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));opacity:0;transform:translateY(20px);transition:opacity 450ms ease-out,transform 450ms ease-out,border-color 300ms}
.portfolio-card.visible{opacity:1;transform:translateY(0)}
.portfolio-card:hover{border-color:#C9A54E}
.card-label{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:0.65rem;color:#A67C52;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:8px}
.card-heading{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:#D4B870;letter-spacing:0.04em;margin-bottom:12px}
.card-body{font-family:'Source Sans 3',sans-serif;font-weight:300;font-size:0.9rem;color:#8B7D5E;line-height:1.65}
.council-statement{font-family:'Source Sans 3',sans-serif;font-weight:300;font-size:1.3rem;font-style:italic;color:#C9A54E;max-width:600px;line-height:1.6}
.site-footer{max-width:1200px;margin:0 auto;padding:40px 80px}
.footer-divider{height:1px;background:linear-gradient(to right,#2A261D,transparent);margin-bottom:16px}
.footer-text{font-family:'Source Sans 3',sans-serif;font-size:0.7rem;color:#7A7264;letter-spacing:0.06em}
@media(max-width:768px){.hero{padding:0 24px}.hero-title{font-size:2.8rem}.mandate-section,.cases-section,.council-section{padding:48px 24px}.portfolio-grid,.portfolio-grid.three-col{grid-template-columns:1fr}}