:root{ --bg:#0B0C10; --ink:#EAECEF; --lead-ink:#CCD2D9; --lead-shadow-1: rgba(0,0,0,.45); --lead-shadow-2: rgba(0,0,0,.22); --muted:#9CA3AF; --line:#1f2937; --line-soft:#141923; --accent:#ffffff; --grid-alpha:.022; } @font-face{ font-family: "BPdots Square"; src: url("../fonts/BPdots/BPdotsSquare.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root{ --heading-font: "BPdots Square", "Space Grotesk", Inter, system-ui, sans-serif; } .scrollbar-track-y{position: fixed !important;} html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html, body { height: 100%; overflow: hidden; } main#content { position: relative; height: 100vh; overflow: hidden; } body{font-family:Inter,system-ui,sans-serif; color:var(--ink);} canvas.webgl { position:fixed; inset:0; display:block; } .loader{ position:fixed; inset:0; background:var(--bg); display:grid; place-items:center; z-index:9999; transition:opacity .6s ease; pointer-events:auto; } .loader-inner{ width:min(440px,64vw); color:var(--ink); } .bar{ height:6px; background:var(--line-soft); border-radius:0; overflow:hidden; box-shadow:0 0 0 1px var(--line) inset; } .bar > i{ display:block; height:100%; width:0%; transform-origin:left; background:linear-gradient(90deg, var(--muted), var(--ink)); } .label{ text-align:center; margin-top:12px; letter-spacing:.08em; font-size:14px; color:var(--muted); } .loading-logo img { width: 100px; filter: invert(1); display: block; margin: 0px auto 10px; } .loading-logo.anim img { animation-name: lion; animation-iteration-count:infinite; animation-duration:2s; } @keyframes lion{ 0%{ opacity:1; } 50%{ opacity:0.4; } 100%{ opacity:1; } } .audio-toggle { position: fixed; right: 18px; top: 18px; z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; background: transparent; } .audio-toggle .icon{ display:block } .audio-toggle .off{ display:none } .audio-toggle[data-muted="true"] .on{ display:none } .audio-toggle[data-muted="true"] .off{ display:block } .audio-toggle:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px } @media (max-width: 640px){ .audio-toggle{ right: 12px; bottom: 12px; width: 40px; height: 40px } } .grid-overlay{ position:fixed; inset:0; pointer-events:none; z-index:1; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.035) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,255,255,.035) 23px 24px); mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.7), rgba(0,0,0,1) 65%); } main{ position:relative; z-index:2; } section.sct{ min-height:100vh; display:flex; align-items:center; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); position:relative; } .container{ width:min(1120px,92vw); margin:0 auto; } .eyebrow{ font-size:.8rem; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; } .main-logo{ width: 100px; filter: invert(100%); } .h1,.h2,h3,h4,h5,h6,strong { font-family: var(--heading-font); letter-spacing: .02em; line-height: 1.05; font-weight: 400; font-variant-ligatures: none; font-feature-settings: "liga" 0; } .h1{ font-size: clamp(1.8rem, 6.5vw, 4.2rem); color:#ffffff;position:relative; text-shadow: 0 1px 0 var(--lead-shadow-1), 0 0 10px var(--lead-shadow-2);} .h2{ font-size: clamp(1.35rem, 3.4vw, 2.4rem); color: var(--ink);position:relative;display: inline; text-shadow: 0 1px 0 var(--lead-shadow-1), 0 0 10px var(--lead-shadow-2);} .lead{ max-width:64ch; color: #ffffff; font-weight:500; line-height:1.6; letter-spacing:.01em; text-shadow: 0 1px 0 var(--lead-shadow-1), 0 0 10px var(--lead-shadow-2); } .lead.scrim{ box-decoration-break: clone; border: 1px solid rgba(255,255,255,.04); padding: .2em .4em; border-radius: 2px; } .grid{ display:grid; gap:18px; } .grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .box{ border:1px solid var(--line); background: rgb(48 48 48 / 30%);02); padding:22px; position:relative; overflow:hidden; backdrop-filter: blur(2px) saturate(110%); } .box .rule{position:absolute;inset:auto 0 0 0;height:1px;background:var(--line);opacity:.8;display: none;} .shape{ position:absolute; width:40px; height:40px; border:1px solid var(--line); opacity:.45; transform:rotate(45deg); } .shape.tl{ top:32px; left:32px; } .shape.tr{ top:32px; right:32px; } .shape.bl{ bottom:32px; left:32px; } .shape.br{ bottom:32px; right:32px; } .btn{ display:inline-block; border:1px solid var(--ink); color:var(--bg); background:var(--ink); padding:.8rem 1rem; border-radius:0; font-weight:600; text-decoration:none; } .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); backdrop-filter: blur(2px) saturate(110%);} @media (max-width:900px){ .grid.cols-3{ grid-template-columns:1fr; } } .enter-btn{ appearance:none; border:1px solid var(--ink); background:var(--ink); color:var(--bg); font-weight:600; padding:.8rem 1rem; border-radius:0; letter-spacing:.02em; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .35s ease, transform .35s ease; } .loader.ready .enter-btn{ opacity:1; transform:none; pointer-events:auto; } @supports (-webkit-text-stroke: 1px black){ .lead.stroke{ -webkit-text-stroke: .3px rgba(0,0,0,.35); paint-order: stroke fill; } } #contact{ text-align: center; } #contact .lead{ width: auto; max-width:64ch; margin: 0 auto; display: block; } .video-box { padding: 0; overflow: hidden; background: #0e1117; } .reel { position: relative; display: block; } .reel video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0e1117; } .reel-btn { appearance: none; border:1px solid var(--line); background:rgba(255,255,255,.04); color: var(--ink); padding:10px; line-height:0; border-radius:0; cursor:pointer; } .reel .reel-play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; display:grid; place-items:center; backdrop-filter: blur(2px) saturate(110%); box-shadow: 0 0 0 1px var(--line) inset; opacity:.92; transition: opacity .25s ease; } .reel.is-playing .reel-play{ opacity:0; pointer-events:none; } .reel .reel-play .icon{ display:none; } .reel:not(.is-playing) .reel-play .play{ display:block; } .reel.is-playing .reel-play .pause{ display:block; } .reel-ui{ position:absolute; left:0; right:0; bottom:0; padding:10px 10px 12px; display:flex; align-items:center; gap:10px; background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0)); } .reel .progress{ position:relative; flex:1; height:3px; background:var(--line-soft); box-shadow:0 0 0 1px var(--line) inset; } .reel .progress i{ position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg, var(--muted), var(--ink)); } .reel .controls{ display:flex; gap:8px; } .reel .reel-mute .on{ display:none; } .reel .reel-mute[data-muted="false"] .on{ display:block; } .reel .reel-mute[data-muted="false"] .off{ display:none; } .reel:fullscreen .reel-play{ width:64px; height:64px; } .reel:fullscreen .reel-ui{ padding:14px 14px 16px; } .box.work-card{ padding:0; overflow:hidden; background:#0e1117; } .work-card .frame{ position:relative; } .work-card .work-video{ display:block; width:100%; aspect-ratio:16/9; background:#0e1117; } .work-card .meta{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); } .work-card .title{ font-weight:700; letter-spacing:.02em; } .work-card .tag{ color:var(--muted); font-size:.9rem; } .work-card .sound{ position:absolute; top:10px; right:10px; padding:8px; border-radius:0; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink); } .work-card .sound .on{ display:none; } .work-card .sound[data-muted="false"] .on{ display:inline; } .work-card .sound[data-muted="false"] .off{ display:none; } .work-card .progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line-soft); box-shadow:0 0 0 1px var(--line) inset; } .work-card .progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--muted), var(--ink)); } #services .box .ico{ display:inline-flex; width:28px; height:28px; margin-bottom:10px; color:var(--ink); opacity:.95; } #services .box .ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:640px){ #services .box .ico{ width:26px; height:26px; opacity:.9; } } #services .box .ico, #process .box .ico{ display:inline-flex; width:28px; height:28px; margin-bottom:10px; color:var(--ink); opacity:.95; } #services .box .ico svg, #process .box .ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:640px){ #services .box .ico, #process .box .ico{ width:26px; height:26px; opacity:.9; } } .box.video-box{ --reel-max: 820px; max-width: var(--reel-max); margin-inline: auto; } .reel video{ width: 100%; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; } .box.video-box.is-sm{ --reel-max: 720px; } .box.video-box.is-lg{ --reel-max: 960px; } @media (max-width: 640px){ .h2{ font-size: clamp(1.85rem, 6.8vw, 2.4rem); letter-spacing: .03em; line-height: 1.08; } } :root{ --section-pad: clamp(36px, 7svh, 72px); } section.sct{ padding-block: var(--section-pad); min-height: calc(100svh - (var(--section-pad) * 2)); box-sizing: border-box; } @media (max-width: 400px){ :root{ --section-pad: clamp(28px, 7svh, 56px); } }