:root { --ink:#080808; --paper:#fbfbfa; --red:#ef3e2c; --display:'Barlow Condensed', Impact, sans-serif; --body:'DM Sans', Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); }
.site-header { height:130px; padding:0 3.35vw; display:flex; align-items:center; justify-content:space-between; background:#fff; border-top:1px solid #ececec; border-bottom:1px solid #f0f0f0; }
.wordmark { color:var(--ink); text-decoration:none; font:800 32px/.82 var(--display); letter-spacing:-.7px; }
.main-nav { display:flex; gap:45px; } .main-nav a { color:var(--ink); text-decoration:none; font-size:16px; padding:8px 0; } .main-nav .active { border-bottom:1px solid; } .menu-toggle { display:none; }
.hero { min-height:480px; height:min(48vw,620px); position:relative; overflow:hidden; background:#171717; color:#fff; }
.studio-scene, .dark-overlay { position:absolute; inset:0; }
.studio-scene { background:url('assets/cmar-hero.jpg') left top / cover no-repeat; filter:grayscale(1) contrast(1.08); }
.dark-overlay { background:linear-gradient(90deg,#000a 0%,#0003 45%,transparent 78%),linear-gradient(0deg,#000b,transparent 55%); }
.hero-content { position:absolute; inset:0 3.35vw; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero-content p { align-self:flex-start; margin:0 0 -45px; text-align:left; font-size:12px; line-height:1.6; letter-spacing:.02em; }
.hero h1 { margin:0; font:900 clamp(64px,6.5vw,148px)/.78 var(--display); letter-spacing:-.025em; text-transform:uppercase; text-shadow:0 2px 20px #000a; white-space:nowrap; }
.hero-content a { margin-top:52px; padding-bottom:6px; border-bottom:1px solid; color:#fff; text-decoration:none; font-size:13px; }.hero-content a span { margin-left:14px; font-size:17px; }
.work { padding:clamp(90px,8vw,160px) 3.35vw clamp(180px,14vw,280px); background:#fff; text-align:center; }.work h2 { margin:0 0 clamp(56px,5vw,88px); font:900 clamp(60px,5.6vw,100px)/.8 var(--display); letter-spacing:.01em; text-transform:uppercase; }.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:100%; margin:0 auto; }.work-grid a { display:block; overflow:hidden; aspect-ratio:16 / 9; background:#eee; }.work-grid img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .2s ease; }.work-grid a:hover img { filter:grayscale(1) brightness(.88); }.video-link { display:inline-flex; align-items:center; justify-content:center; width:360px; height:100px; margin-top:clamp(48px,4.5vw,72px); border:0; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font:700 19px Arial,Helvetica,sans-serif; letter-spacing:0; text-transform:uppercase; transition:background .2s ease; }.video-link:hover { background:#3b3b3b; }.video-link span { display:none; }
@media (max-width:900px) { .work-grid { width:86%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
@media (max-width:650px) { .site-header { height:90px; padding:0 6vw; }.wordmark { font-size:30px; }.menu-toggle { display:block; border:0; background:none; font:600 10px var(--body); letter-spacing:.1em; text-transform:uppercase; }.main-nav { display:none; position:absolute; z-index:8; top:90px; left:0; right:0; justify-content:space-between; padding:24px 6vw; border-top:1px solid #ddd; background:#fff; }.hero { min-height:620px; height:calc(100vh - 90px); }.studio-scene { background-position:left top; }.hero-content { inset:0 6vw; padding:0; }.hero h1 { font-size:15vw; white-space:normal; }.work { padding:76px 6vw 130px; }.work h2 { margin-bottom:48px; font-size:46px; }.work-grid { width:100%; grid-template-columns:1fr; gap:14px; }.video-link { margin-top:50px; } }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 3.35vw; border-top:1px solid #dedede; background:#fff; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }.site-footer nav { display:flex; gap:28px; }.site-footer a { display:inline-flex; align-items:center; gap:7px; color:#000; text-decoration:none; }.site-footer a::before { display:inline-grid; place-items:center; width:20px; height:20px; color:#000; font-size:19px; font-weight:700; line-height:1; }.site-footer a[href*="instagram"]::before { content:''; width:17px; height:17px; border:2px solid #000; border-radius:5px; background:radial-gradient(circle at center,transparent 0 3px,#000 3.2px 4.5px,transparent 4.7px); }.site-footer a[href*="tiktok"]::before { content:'♪'; }.site-footer a[href*="youtube"]::before { content:'▶'; font-size:15px; }.site-footer a:hover { text-decoration:underline; text-underline-offset:4px; }@media (max-width:650px) { .site-footer { display:block; padding:28px 6vw; }.site-footer nav { margin-top:18px; gap:20px; } }