/* EDIT: Change these variables to adjust the entire theme. */
:root{color-scheme:dark;--background:#080808;--surface:#111111;--text:#f2f2f2;--muted:#a1a1a1;--line:#272727;--blue:#0b65c3;--navy:#013473}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--background);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #68b1ff;outline-offset:6px}
::selection{background:var(--blue);color:white}
.page{max-width:1240px;margin:auto;padding:0 48px}
.skip{position:absolute;top:-80px;left:16px;background:var(--text);color:var(--background);padding:12px;z-index:2}
.skip:focus{top:12px}
.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:block;width:167px;line-height:0}
.brand img{width:100%;height:auto}
nav{display:flex;gap:32px;font-size:14px;color:#c0c0c0}
nav a:hover,footer a:hover{color:white}
nav span{margin-left:8px}
.hero{padding:98px 0 86px}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0;color:var(--muted);font-size:13px;line-height:1.5;letter-spacing:.02em}
.dot{width:6px;height:6px;background:#388edf;border-radius:50%;display:inline-block}
h1{font-size:clamp(62px,7.7vw,104px);font-weight:500;line-height:1.02;letter-spacing:-.065em;margin:30px 0 35px}
h1 span{color:#858585}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.hero-bottom p{font-size:17px;color:var(--muted);line-height:1.6;margin:0}
.button{display:flex;align-items:center;gap:25px;font-size:14px;padding:14px 19px;background:#171717;border:1px solid #333;border-radius:7px;transition:background .2s,border-color .2s}
.button:hover{background:#232323;border-color:#666}
.button span{color:var(--muted)}
.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px}
.section-label h2{margin:0;font-size:15px;font-weight:400}
.section-label>span{font-size:12px;color:var(--muted)}
.brand-showcase{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin:0;min-height:455px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.showcase-top,.showcase-bottom{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.showcase-top{font-size:10px;color:#919191;letter-spacing:.12em}
.showcase-logo{display:block;width:48%;max-width:510px;height:auto;margin:70px 0}
.showcase-bottom{color:var(--muted);font-size:12px;line-height:1.6}
.blue-square{width:24px;height:24px;background:var(--blue);border-radius:3px}
.identity-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;font-size:13px}
.identity-caption p{margin:0}
.identity-caption>span{color:var(--muted);font-size:12px}
.studio{padding:90px 0 80px;display:grid;grid-template-columns:1fr 1fr;gap:75px;border-bottom:1px solid var(--line)}
.studio h2{font-size:36px;line-height:1.15;letter-spacing:-.035em;font-weight:400;margin:18px 0 0}
.studio-copy>p:first-child{font-size:17px;line-height:1.7;color:var(--muted);margin:0}
.services{font-size:12px;color:#c1c1c1;line-height:2;margin:23px 0 0}
.services span{margin:0 6px;color:#656565}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0 38px;color:#949494;font-size:11px;line-height:1.5}
footer a span{margin-left:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.page{padding:0 24px}.header{height:88px}.brand{width:142px}nav{gap:22px;font-size:12px}.hero{padding:70px 0 64px}h1{font-size:76px}.hero-bottom{align-items:flex-start;flex-direction:column;gap:26px}.hero-bottom p{font-size:15px}.brand-showcase{min-height:335px;padding:24px}.showcase-logo{width:70%;margin:60px 0}.studio{grid-template-columns:1fr;gap:28px;padding:65px 0 55px}.studio h2{font-size:32px}.studio-copy>p:first-child{font-size:16px}footer{flex-wrap:wrap;row-gap:14px}footer>span:nth-child(2){order:3;flex-basis:100%}}
@media(max-width:400px){.page{padding:0 20px}.brand{width:124px}nav{gap:16px}h1{font-size:62px}.section-label h2{font-size:13px}.identity-caption{align-items:flex-start;flex-direction:column;gap:6px}.brand-showcase{min-height:290px;padding:20px}.showcase-logo{width:84%;margin:48px 0}.showcase-top{font-size:8px}.services span{margin:0 3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}