:root { --bg:#080808; --bg-mid:#101010; --bg-card:#151515; --bg-card2:#1c1c1c; --accent:#CAFF00; --accent-dk:#9acc00; --accent-bg:rgba(202,255,0,.07); --white:#f0f0f0; --muted:#555; --muted2:#888; --border:#1e1e1e; --border2:#2a2a2a; --danger:#ff4455; --font-d:'Bebas Neue',sans-serif; --font-b:'Ubuntu',sans-serif; --t-hero:clamp(54px,10vw,100px); --t-h2:clamp(32px,5vw,58px); --t-h3:clamp(18px,3vw,26px); --t-lg:clamp(15px,1.8vw,19px); --t-base:15px; --t-sm:13px; --t-xs:11px; --hdr:60px; --ftr:46px; --r:3px; --r2:6px; --tr:.25s ease; --tr2:.5s ease; }   html[data-budget="4"] { --bg:#f7f7f7; --bg-mid:#eee; --bg-card:#fff; --bg-card2:#f0f0f0; --accent:#1976D2; --accent-dk:#0d47a1; --accent-bg:rgba(25,118,210,.08); --white:#1a1a1a; --muted:#777; --muted2:#aaa; --border:#ddd; --border2:#ccc; --font-d:'Ubuntu',sans-serif; } html[data-budget="4"] body { background:#f7f7f7; } html[data-budget="4"] .site-header { background:#1976D2 !important; border:none; backdrop-filter:none; } html[data-budget="4"] .logo { filter:brightness(0) invert(1); } html[data-budget="4"] .site-nav a { color:rgba(255,255,255,.85); } html[data-budget="4"] .nav-cta { background:#fff !important; color:#1976D2 !important; } html[data-budget="4"] .btn-primary { border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.2); } html[data-budget="4"] .footer-bar { background:#1976D2 !important; border-top:none; } html[data-budget="4"] .snap-section { background:#f7f7f7; } html[data-budget="4"] .what-bg { background:#eee; } html[data-budget="4"] .hero { background:linear-gradient(135deg,#1976D2,#0d47a1) !important; } html[data-budget="4"] .hero-title,html[data-budget="4"] .hero-eyebrow { color:#fff; } html[data-budget="4"] .hero-body { color:rgba(255,255,255,.75); } html[data-budget="4"] .hero-title .accent { color:#CAFF00; } html[data-budget="4"] .cluster-card { background:#fff; border-color:#ddd; } html[data-budget="4"] .field input,html[data-budget="4"] .field textarea,html[data-budget="4"] .field select { background:#fff; border-color:#ddd; color:#1a1a1a; } html[data-budget="4"] .field label { color:#777; } html[data-budget="4"] .service-card label,html[data-budget="4"] .radio-card label { background:#fff; border-color:#ddd; }   html[data-budget="3"] { --bg:#f5f5f5; --bg-mid:#e8e8e8; --bg-card:#fff; --bg-card2:#f0f0f0; --accent:#428bca; --accent-dk:#2a6496; --accent-bg:rgba(66,139,202,.1); --white:#333; --muted:#999; --muted2:#bbb; --border:#ddd; --border2:#ccc; --font-d:'Ubuntu',sans-serif; --r:4px; --r2:6px; } html[data-budget="3"] body { font-family:Helvetica,Arial,sans-serif !important; background:#f5f5f5; } html[data-budget="3"] .site-header { background:linear-gradient(#3c3c3c,#222) !important; border-bottom:1px solid #080808; backdrop-filter:none; } html[data-budget="3"] .logo { filter:brightness(0) invert(1); } html[data-budget="3"] .hero { background:linear-gradient(#f5f5f5,#e8e8e8) !important; } html[data-budget="3"] .hero-title { color:#333; text-shadow:0 1px 0 #fff; } html[data-budget="3"] .hero-body { color:#666; } html[data-budget="3"] .btn-primary { background:linear-gradient(#428bca,#2a6496) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075); text-shadow:0 -1px 0 rgba(0,0,0,.25); border:1px solid #2a6496; } html[data-budget="3"] .snap-section { background:#f5f5f5; } html[data-budget="3"] .snap-section:nth-child(even) { background:#e8e8e8; } html[data-budget="3"] .what-bg { background:#e8e8e8; } html[data-budget="3"] .footer-bar { background:#222 !important; border-top:1px solid #080808; } html[data-budget="3"] .cluster-card { background:#fff; border-color:#ddd; } html[data-budget="3"] .field input,html[data-budget="3"] .field textarea,html[data-budget="3"] .field select { background:#fff; border-color:#ccc; color:#333; } html[data-budget="3"] .field label { color:#999; } html[data-budget="3"] .service-card label,html[data-budget="3"] .radio-card label { background:#fff; border-color:#ddd; }   html[data-budget="2"] { --bg:#000033; --bg-mid:#000055; --bg-card:#000066; --bg-card2:#000044; --accent:#ffcc00; --accent-dk:#ff9900; --accent-bg:rgba(255,204,0,.1); --white:#fff; --muted:#aac; --muted2:#88a; --border:#00a; --border2:#00d; --font-d:Georgia,serif; --r:12px; --r2:20px; } html[data-budget="2"] body { font-family:Georgia,'Times New Roman',serif !important; background:#000033; } html[data-budget="2"] .site-header { background:linear-gradient(#003399,#000033) !important; border-bottom:2px solid #ffcc00; backdrop-filter:none; box-shadow:0 0 20px rgba(0,100,255,.5); } html[data-budget="2"] .hero { background:radial-gradient(ellipse at 60% 40%,#0000cc,#000033 70%) !important; } html[data-budget="2"] .hero-title { font-family:Georgia,serif; text-shadow:0 0 30px #06f,0 0 60px #03f; color:#fff; } html[data-budget="2"] .hero-title .accent { color:#ffcc00; text-shadow:0 0 20px #f90; } html[data-budget="2"] .btn-primary { background:linear-gradient(#ffee88,#ffcc00 50%,#cc9900) !important; border:2px outset #ffdd44 !important; border-radius:0 !important; color:#000 !important; box-shadow:2px 2px 8px rgba(0,0,0,.6) !important; } html[data-budget="2"] .snap-section { background:radial-gradient(ellipse at center,#000055,#000033); border-bottom:1px solid #00a; } html[data-budget="2"] .what-bg { background:transparent; } html[data-budget="2"] .footer-bar { background:linear-gradient(#003399,#000033) !important; border-top:2px solid #ffcc00; } html[data-budget="2"] .cluster-card { background:#000066; border-color:#00a; box-shadow:0 0 8px rgba(0,100,255,.3); } html[data-budget="2"] .field input,html[data-budget="2"] .field textarea,html[data-budget="2"] .field select { background:#000066; border-color:#006; box-shadow:0 0 6px rgba(0,102,255,.4) inset; color:#fff; } html[data-budget="2"] .service-card label,html[data-budget="2"] .radio-card label { background:#000066; border-color:#00a; }   html[data-budget="1"] { --bg:#000080; --bg-mid:#000066; --bg-card:#00a; --bg-card2:#000066; --accent:#ff0; --accent-dk:#fa0; --accent-bg:rgba(255,255,0,.1); --white:#fff; --muted:#ccf; --muted2:#aad; --border:#fff; --border2:#ff0; --font-d:Impact,'Arial Black',sans-serif; --r:0px; --r2:0px; } html[data-budget="1"] body { font-family:'Comic Sans MS','Trebuchet MS',cursive !important; background:#000080 !important; background-image:radial-gradient(1px 1px at 8% 12%,#fff,transparent),radial-gradient(1px 1px at 23% 45%,#fff,transparent),radial-gradient(1px 1px at 41% 18%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 58% 72%,#fff,transparent),radial-gradient(1px 1px at 76% 33%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 91% 57%,#fff,transparent),radial-gradient(1px 1px at 14% 83%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 49% 91%,#fff,transparent) !important; } html[data-budget="1"] h1,html[data-budget="1"] h2,html[data-budget="1"] h3,html[data-budget="1"] .step-heading { font-family:Impact,'Arial Black',sans-serif !important; animation:rainbow-txt .7s linear infinite !important; } html[data-budget="1"] .site-header { background:#000080 !important; border-bottom:3px solid #ff0; backdrop-filter:none; } html[data-budget="1"] .snap-section { background:#000080; border-bottom:3px ridge #ff0; } html[data-budget="1"] .what-bg { background:transparent; } html[data-budget="1"] .btn-primary { background:#ff0 !important; color:#000080 !important; border:3px outset #ffeeaa !important; border-radius:0 !important; font-family:Impact,sans-serif !important; text-transform:uppercase; letter-spacing:2px; } html[data-budget="1"] .nav-cta { background:#ff0 !important; color:#000 !important; } html[data-budget="1"] .hero { background:#000080 !important; } html[data-budget="1"] .hero-title { color:#ff0 !important; } html[data-budget="1"] .hero-title .accent { color:#f0f !important; } html[data-budget="1"] .step-label { color:#f0f !important; } html[data-budget="1"] .cluster-card { background:#00a; border:2px outset #8888ff; } html[data-budget="1"] .field input,html[data-budget="1"] .field textarea,html[data-budget="1"] .field select { background:#00a; border:2px inset #8888ff; color:#fff; font-family:'Comic Sans MS',cursive; } html[data-budget="1"] .field label { color:#ff0; } html[data-budget="1"] .service-card label,html[data-budget="1"] .radio-card label { background:#00a; border:2px outset #8888ff; } html[data-budget="1"] .service-card input:checked + label,html[data-budget="1"] .radio-card input:checked + label { background:#4444cc; border:2px inset #8888ff; } html[data-budget="1"] .footer-bar { background:#000080 !important; border-top:3px solid #ff0; } html[data-budget="1"] .site-nav a { color:#ffeeaa; }   html[data-budget="0"] { --bg:#c0c0c0; --bg-mid:#d4d0c8; --bg-card:#fff; --bg-card2:#d4d0c8; --accent:#008080; --accent-dk:#004040; --accent-bg:rgba(0,128,128,.2); --white:#000; --muted:#444; --muted2:#666; --border:#808080; --border2:#404040; --font-d:'Comic Sans MS',cursive; --font-b:'Comic Sans MS',cursive; --r:0px; --r2:0px; } html[data-budget="0"] * { transition:none !important; } html[data-budget="0"] body { font-family:'Comic Sans MS',cursive !important; background:#c0c0c0 !important; } html[data-budget="0"] .site-header { background:#c0c0c0 !important; backdrop-filter:none; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff,inset -2px -2px 0 #404040,inset 2px 2px 0 #dfdfdf; border:none; } html[data-budget="0"] .logo { filter:none; } html[data-budget="0"] h1,html[data-budget="0"] h2,html[data-budget="0"] .step-heading { animation:blink 1s step-end infinite,rainbow-txt .4s linear infinite !important; } html[data-budget="0"] .btn,html[data-budget="0"] .btn-primary,html[data-budget="0"] .btn-ghost { background:#c0c0c0 !important; color:#000 !important; border:none !important; border-radius:0 !important; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff,inset -2px -2px 0 #404040,inset 2px 2px 0 #dfdfdf !important; font-family:'Comic Sans MS',cursive !important; } html[data-budget="0"] .nav-cta { background:#c0c0c0 !important; color:#000 !important; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff !important; } html[data-budget="0"] .snap-section { background:#c0c0c0; } html[data-budget="0"] .what-bg { background:#d4d0c8; } html[data-budget="0"] .footer-bar { background:#c0c0c0 !important; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff; border:none; } html[data-budget="0"] .service-bg { display:none !important; } html[data-budget="0"] .depth-zone { display:none !important; } html[data-budget="0"] .hero-video-area { display:none !important; } html[data-budget="0"] .hero { background:#c0c0c0 !important; } html[data-budget="0"] .hero-title,html[data-budget="0"] .hero-body { color:#000 !important; } html[data-budget="0"] .marquee-bar { display:block !important; } html[data-budget="0"] .visitor-ctr { display:block; } html[data-budget="0"] .construction { display:flex; }   html[data-flow] .nav-cta { background:deeppink !important; color:#fff !important; }  html[data-flow] #s-work-a, html[data-flow] #depth-a, html[data-flow] #s-work-b, html[data-flow] #depth-b, html[data-flow] #s-made, html[data-flow] #s-statement, html[data-flow] #s-footer { display:none; }  html.footer-force-show #s-footer { display:block !important; }   @keyframes reveal { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} } @keyframes blink { 0%,49%{visibility:visible}50%,100%{visibility:hidden} } @keyframes rainbow-txt { 0%{color:#f00}14%{color:#f80}28%{color:#ff0}42%{color:#0f0}57%{color:#0ff}71%{color:#00f}85%{color:#f0f}100%{color:#f00} } @keyframes marquee { from{transform:translateX(100vw)}to{transform:translateX(-100%)} } @keyframes wave { 0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)} } @keyframes pulse-glow { 0%,100%{filter:drop-shadow(0 0 6px var(--accent))}50%{filter:drop-shadow(0 0 16px var(--accent))} } @keyframes diagonalMarquee { from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--move-x),0,0)} }   *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { background:var(--bg); color:var(--white); font-family:var(--font-b); font-size:var(--t-base); line-height:1.65; overflow-x:hidden; transition:background var(--tr2),color var(--tr2); } ::selection { background:var(--accent); color:#000; } img { max-width:100%; display:block; } button { cursor:pointer; font-family:inherit; } a { color:inherit; text-decoration:none; }   .marquee-bar { display:none; position:fixed; top:var(--hdr); left:0; right:0; background:#ff0; color:#f00; font-family:'Comic Sans MS',cursive; font-size:12px; font-weight:bold; padding:3px 0; z-index:9001; overflow:hidden; border-top:2px solid #f00; border-bottom:2px solid #f00; white-space:nowrap; } .marquee-inner { display:inline-block; animation:marquee 26s linear infinite; padding:0 24px; }   .site-header { position:fixed; top:0; left:0; right:0; height:var(--hdr); z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,4vw,56px); background:rgba(8,8,8,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:background var(--tr),border-color var(--tr); } .logo { height:30px; width:auto; mix-blend-mode:screen; cursor:pointer; transition:opacity var(--tr); } .logo:hover { opacity:.8; } .site-nav { display:flex; align-items:center; gap:clamp(12px,2.5vw,36px); list-style:none; } .site-nav a { color:var(--muted2); text-decoration:none; font-family:var(--font-d); font-size:clamp(16px,1.5vw,19px); letter-spacing:.06em; text-transform:uppercase; transition:color var(--tr); } .site-nav a:hover { color:var(--accent); } .nav-cta { background:var(--accent) !important; color:#000 !important; height:calc(var(--hdr) + 6px); margin:-3px 0; padding:0 22px; display:inline-flex; align-items:center; font-family:var(--font-d) !important; font-size:clamp(16px,1.5vw,19px) !important; letter-spacing:.06em; font-weight:normal !important; text-transform:uppercase; transition:background var(--tr) !important; border-radius:0 0 3px 3px; } .nav-cta:hover { background:var(--accent-dk) !important; } .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; } .hamburger span { width:22px; height:2px; background:var(--white); display:block; border-radius:1px; transition:var(--tr); }   .scroll-wrap { margin-top:var(--hdr); height:calc(100svh - var(--hdr) - var(--ftr)); overflow-y:scroll; -webkit-overflow-scrolling:touch; }  .scroll-wrap[data-snap="on"] { scroll-snap-type:y mandatory; } .snap-stop { scroll-snap-align:start; scroll-snap-stop:always; }  .snap-section {  min-height:calc(100svh - var(--hdr) - var(--ftr)); display:flex; flex-direction:column; padding:0 clamp(16px,6vw,80px); position:relative; overflow:hidden; transition:background var(--tr2); } .snap-section[data-locked] { display:none; } .snap-section.revealed { animation:reveal .45s ease forwards; }  .section-inner { max-width:900px; width:100%; position:relative; z-index:1; margin:auto; padding-top:clamp(24px,4vw,60px); padding-bottom:clamp(24px,4vw,60px); } .section-inner.wide { max-width:1160px; }   .snap-step .section-inner { padding-bottom:max(calc(var(--ftr) + 100px), 40vh); }  .step-label { font-size:var(--t-sm); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:14px; display:block; transition:color var(--tr2); } .step-heading { font-family:var(--font-d); font-size:var(--t-h2); line-height:1; color:var(--white); margin-bottom:10px; transition:font-family var(--tr2),color var(--tr2),font-size var(--tr2); } .step-sub { font-size:var(--t-lg); color:var(--muted2); margin-bottom:28px; max-width:520px; line-height:1.7; }   .reveal { opacity:0; transform:translateY(22px); animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; } @supports not (animation-timeline:view()) { .reveal { opacity:1; transform:none; animation:none; } } @media(prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; animation:none !important; } }   .hero { background:var(--bg); } .hero-bg { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle,transparent 40%,rgba(0,0,0,.6) 100%); } .hero-video-area { position:absolute; inset:0; z-index:0; width:100%; clip-path:none; filter:brightness(.72) contrast(1.1); overflow:hidden; } #heroVideo { position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; object-fit:cover; } .hero-content { position:relative; z-index:2; max-width:624px; } .hero-eyebrow { font-size:var(--t-sm); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:18px; display:block; } .hero-eyebrow small { color:#999; font-size:.9em; letter-spacing:.05em; text-transform:none; } .hero-title { font-family:var(--font-d); font-size:var(--t-hero); line-height:.93; color:var(--white); margin-bottom:14px; transition:font-family var(--tr2),color var(--tr2); } .hero-title .accent { color:var(--accent); display:block; transition:color var(--tr2); } .accent-pink { color:deeppink; } .hero-body { font-size:var(--t-lg); color:#f3f3f3; max-width:440px; margin-bottom:40px; line-height:1.7; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; } .scroll-hint { position:absolute; bottom:28px; left:28px; display:flex; flex-direction:row; align-items:center; gap:8px; color:var(--muted); font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase; z-index:2; } .scroll-hint-line { width:40px; height:1px; background:linear-gradient(90deg,var(--muted),transparent); }   @font-face { font-family:'Anton';   src:url(fonts/anton-latin-400-normal.woff2) format('woff2');   font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Archivo'; src:url(fonts/archivo-latin-400-normal.woff2) format('woff2');  font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Archivo'; src:url(fonts/archivo-latin-600-normal.woff2) format('woff2');  font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'DM Mono'; src:url(fonts/dm-mono-latin-400-normal.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'DM Mono'; src:url(fonts/dm-mono-latin-500-normal.woff2) format('woff2'); font-weight:500; font-style:normal; font-display:swap; }   #s-what { --w-font:'Anton','Impact','Arial Narrow',sans-serif; --w-body:'Archivo',var(--font-b),'Helvetica Neue',Arial,sans-serif; --w-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --w-fade:700ms; --w-bg:#151914; --w-fg:#c2b7a2; --w-dim:rgba(194,183,162,.34); --w-mute:#9e9379; --w-hi:var(--accent); --w-tint:rgba(21,25,20,.66); --w-label:clamp(120px,21vw,300px); --w-line:#3a3d33; --w-track:#151914; padding:0; background:var(--w-bg); color:var(--w-fg); isolation:isolate; font-family:var(--w-body); transition:background var(--tr2),color var(--tr2); } #s-what[data-variant="b"] { --w-bg:var(--accent); --w-fg:#0b0b0b; --w-dim:#0b0b0b; --w-mute:#0b0b0b; --w-hi:var(--accent); --w-tint:transparent; } #s-what[data-variant="c"] { --w-bg:#0d0f0c; --w-fg:#c2b7a2; --w-dim:rgba(194,183,162,.5); --w-tint:transparent; } #s-what[data-variant="b"][data-video-on] { --w-fg:#f2efe6; --w-mute:#f2efe6; --w-dim:#f2efe6; }  .what-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }   #s-what .what-bg { display:none; }   #s-what .what-inner { flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(10px,2svh,24px); padding:clamp(20px,5svh,48px) clamp(20px,5vw,72px); } #s-what .what-inner > * { position:relative; z-index:2; } #s-what .what-inner > .what-monitor, #s-what .what-inner > .what-field { position:absolute; inset:0; } #s-what .what-inner > .what-sr { position:absolute; } #s-what .what-inner > .what-monitor { z-index:0; } #s-what .what-inner > .what-field { z-index:1; display:none; background:var(--accent); transition:opacity var(--w-fade) ease; } #s-what[data-variant="b"] .what-inner > .what-field { display:block; } #s-what[data-video-on] .what-inner > .what-field { opacity:0; }  .what-head, .what-foot { display:flex; justify-content:space-between; align-items:baseline; gap:24px; font-family:var(--w-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--w-mute); } .what-caption { margin:0; max-width:64ch; font-size:13px; letter-spacing:.12em; text-transform:uppercase; line-height:1.5; } .what-cap-name { color:var(--w-fg); font-weight:500; } .what-cap-name:empty, .what-cap-tags:empty { display:none; } .what-cap-tags { opacity:.85; } .what-act { display:flex; align-items:baseline; gap:24px; flex-shrink:0; } .what-cta { color:var(--w-fg); text-decoration:underline; text-underline-offset:4px; white-space:nowrap; } .what-cta:hover { color:var(--w-hi); } #s-what[data-variant="b"] .what-cta:hover { color:#0b0b0b; text-decoration-thickness:3px; } .what-cta:focus-visible, .what-reset:focus-visible { outline:2px solid var(--w-hi); outline-offset:4px; } .what-reset { display:none; background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--w-mute); cursor:pointer; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; } .what-reset:hover { color:var(--w-fg); } #s-what[data-variant="c"][data-moved] .what-reset { display:inline; }   .what-stage { position:absolute; inset:0; overflow:hidden; background:var(--w-bg); } .what-stage > * { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } .what-stage::after { content:''; position:absolute; inset:0; background:var(--w-tint); pointer-events:none; z-index:1; } .what-still { display:none; } .what-vid { opacity:0; transition:opacity var(--w-fade) ease; } .what-vid.is-on { opacity:1; } .what-glitch { z-index:2; opacity:0; mix-blend-mode:screen; filter:contrast(1.25) saturate(1.2); transition:opacity .12s linear; pointer-events:none; } #s-what[data-glitching] .what-glitch { opacity:1; }  .what-flash { z-index:3; background:#fff; opacity:0; pointer-events:none; } #s-what[data-flashing] .what-flash { animation:what-flash .9s ease-out 1; } #s-what[data-flashing] .what-vid.is-on { animation:what-expose 1.2s ease-out 1; } @keyframes what-flash  { 0% { opacity:0; } 6% { opacity:1; } 100% { opacity:0; } } @keyframes what-expose { 0% { filter:brightness(4) contrast(1.3) saturate(.3); } 100% { filter:none; } }   .what-list { position:relative; z-index:2; list-style:none; margin:0; padding:0; } .what-btn { appearance:none; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; text-transform:inherit; letter-spacing:inherit; } .what-btn:focus-visible { outline:2px solid var(--w-hi); outline-offset:4px; }  #s-what[data-playing="1"] .what-btn { pointer-events:none; } #s-what[data-playing="1"] .what-item:not(.is-focus) .what-btn { opacity: 0.4; } .what-short, .what-clip, .what-tags, .what-title, .what-tbox, .what-ruler, .what-playhead, .what-range, .what-reset { display:none; } .what-lanes { display:contents; }   #s-what[data-variant="a"] .what-still { display:block; object-position:62% 45%; } #s-what[data-variant="c"] .what-still { display:block; filter:saturate(.7) brightness(.8); }  .what-idle { display:none; } #s-what[data-variant="c"]:not([data-idle="clay"]) .what-still { display:none; } #s-what[data-variant="c"]:not([data-idle="clay"]) .what-idle { display:block; background:#0b0d0a; overflow:hidden; } .what-idle-grain { position:absolute; inset:-60px; background:url(media/grain.png) 0 0 / 512px 512px repeat; opacity:.55; mix-blend-mode:screen; filter:contrast(1.8) brightness(1.5); animation:what-idle-jit .42s steps(1) infinite; } .what-idle-grain-b { background-size:300px 300px; opacity:.35; animation-duration:.31s; animation-direction:reverse; } @keyframes what-idle-jit { 0% { transform:translate(0,0); } 17% { transform:translate(-37px,23px); } 33% { transform:translate(21px,-41px); } 50% { transform:translate(-12px,-9px); } 67% { transform:translate(44px,31px); } 83% { transform:translate(-28px,-36px); } } .what-idle-lbl { display:none; } #s-what[data-idle="slate"] .what-idle-grain { opacity:.3; } #s-what[data-idle="slate"] .what-idle-grain-b { opacity:.18; } #s-what[data-idle="slate"] .what-idle::before { content:''; position:absolute; left:6%; right:6%; bottom:12%; height:14px; background:repeating-linear-gradient(90deg, rgba(194,183,162,.55) 0 1px, transparent 1px 12px); border-bottom:1px solid rgba(194,183,162,.55); } #s-what[data-idle="slate"] .what-idle::after { content:''; position:absolute; left:0; right:0; height:2px; top:0; background:rgba(194,183,162,.12); animation:what-idle-scan 3.2s linear infinite; } #s-what[data-idle="slate"] .what-idle-lbl { display:block; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--w-mono); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:rgba(194,183,162,.7); white-space:nowrap; padding:7px 12px 7px 16px; border:1px solid rgba(194,183,162,.4); } @keyframes what-idle-scan { from { top:-2%; } to { top:100%; } }  #s-what[data-video-on] .what-idle-grain, #s-what[data-video-on][data-idle="slate"] .what-idle::after, #s-what:not([data-in-view]) .what-idle-grain, #s-what:not([data-in-view])[data-idle="slate"] .what-idle::after { animation-play-state:paused; } @media (prefers-reduced-motion:reduce) { .what-idle-grain, #s-what[data-idle="slate"] .what-idle::after { animation:none; } } #s-what[data-variant="a"] .what-list { margin-block:auto; font-family:var(--w-font); text-transform:uppercase; letter-spacing:.005em; line-height:.96; font-size:clamp(40px,min(6vw,8.2svh),90px); } #s-what[data-variant="a"] .what-item { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 28px; } #s-what[data-variant="a"] .what-btn { color:var(--w-dim); transition:color .25s; } #s-what[data-variant="a"] .what-item.is-focus .what-btn { color:var(--w-hi); } #s-what[data-variant="a"] .what-tags { list-style:none; margin:0; padding:0; font:400 15px/1.2 var(--w-mono); letter-spacing:.1em; text-transform:lowercase; color:var(--w-fg); } #s-what[data-variant="a"] .what-item.is-focus .what-tags { display:flex; flex-wrap:wrap; gap:0 .6ch; } .what-tags li + li::before { content:'\00b7'; margin-right:.6ch; } #s-what[data-variant="a"] .what-cap-tags { display:none; }   #s-what[data-variant="b"] .what-list { margin-block:auto; display:flex; flex-wrap:wrap; column-gap:.28em; row-gap:.02em; font-family:var(--w-font); text-transform:uppercase; line-height:.9; font-size:clamp(64px,min(14.4vw,19svh),216px); } #s-what[data-variant="b"] .what-name { display:none; } #s-what[data-variant="b"] .what-short { display:inline; } #s-what[data-variant="b"] .what-btn { padding:0 .08em; margin:0 -.08em; color:var(--w-fg); transition:background .2s,color .2s; } #s-what[data-variant="b"] .what-item.is-focus .what-btn { background:#0b0b0b; color:var(--accent); } #s-what[data-variant="b"][data-video-on] .what-list { mix-blend-mode:difference; color:#fff; } #s-what[data-variant="b"][data-video-on] .what-btn { color:#fff; } #s-what[data-variant="b"][data-video-on] .what-item.is-focus .what-btn { background:#fff; color:#000; }   #s-what[data-variant="c"] .what-inner { display:grid; column-gap:clamp(20px,4vw,64px); row-gap:clamp(10px,1.8svh,20px); padding-block:clamp(14px,3svh,40px); align-content:space-between; grid-template-columns:minmax(0,1fr) minmax(0,min(44vw,calc(40svh - 28px))); grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:"head head" "title monitor" "lanes lanes" "foot foot"; } #s-what[data-variant="c"] .what-head { grid-area:head; } #s-what[data-variant="c"] .what-foot { grid-area:foot; } #s-what[data-variant="c"] .what-title { display:block; grid-area:title; align-self:end; margin:0; font-family:var(--w-font); text-transform:uppercase; line-height:.95; color:var(--w-fg); font-size:clamp(40px,min(4.4vw,8svh),72px); max-width:6.5em; }  #s-what[data-variant="c"] .what-tbox { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:clamp(10px,1.8svh,20px); grid-area:title; align-self:end; height:0; min-width:0; } #s-what[data-variant="c"] .what-tbox .what-title { align-self:flex-start; flex:none; } #s-what[data-variant="c"] .what-inner > .what-monitor { position:relative; inset:auto; z-index:2; grid-area:monitor; align-self:center; justify-self:end; width:100%; max-height:100%; aspect-ratio:16/9; background:#151914; outline:1px solid var(--w-line); overflow:hidden; } #s-what[data-variant="c"] .what-lanes { display:block; grid-area:lanes; position:relative; padding-top:26px; touch-action:pan-y; user-select:none; -webkit-user-select:none; } #s-what[data-variant="c"] .what-ruler { display:flex; justify-content:space-between; margin-left:var(--w-label); padding-bottom:8px; border-bottom:1px solid var(--w-line); font:400 12px var(--w-mono); letter-spacing:.1em; color:var(--w-mute); } #s-what[data-variant="c"] .what-list { display:flex; flex-direction:column; gap:clamp(3px,.7svh,8px); margin-top:clamp(6px,1svh,10px); } #s-what[data-variant="c"] .what-item { position:relative; display:block; height:clamp(24px,4.4svh,52px); --clip:#5b5b47; } #s-what[data-variant="c"] .what-item:nth-child(4n+2) { --clip:#807057; } #s-what[data-variant="c"] .what-item:nth-child(4n+3) { --clip:#8a4b2a; } #s-what[data-variant="c"] .what-item:nth-child(4n+4) { --clip:#9e9379; } #s-what[data-variant="c"] .what-item::before { content:''; position:absolute; top:0; bottom:0; left:var(--w-label); right:0; background:var(--w-track); } #s-what[data-variant="c"] .what-btn { display:flex; align-items:center; width:var(--w-label); height:100%; font-family:var(--w-font); text-transform:uppercase; letter-spacing:.01em; line-height:1; font-size:clamp(18px,min(2.1vw,3.8svh),32px); white-space:nowrap; color:var(--w-dim); transition:color .25s; } #s-what[data-variant="c"] .what-item.is-focus .what-btn { color:var(--w-hi); }  #s-what[data-variant="c"] .what-clip { display:block; position:absolute; top:16%; bottom:16%; z-index:1; background:var(--clip); left:calc(var(--w-label) + (100% - var(--w-label)) * var(--cs,0) / 100); width:calc((100% - var(--w-label)) * var(--cl,10) / 100); cursor:grab; touch-action:none; transition:background .25s, box-shadow .15s, top .15s, bottom .15s; } #s-what[data-variant="c"] .what-clip::after { content:''; position:absolute; inset:-6px 0; } #s-what[data-variant="c"] .what-clip:hover { top:10%; bottom:10%; } #s-what[data-variant="c"] .what-item.is-focus .what-clip { background:var(--accent); } #s-what[data-variant="c"] .what-clip.is-drag { cursor:grabbing; top:2%; bottom:2%; z-index:5; box-shadow:0 10px 24px rgba(0,0,0,.55); } #s-what[data-variant="c"] .what-playhead { display:block; position:absolute; top:6px; bottom:-8px; width:2px; margin-left:-1px; background:#f2efe6; pointer-events:none; z-index:6; left:calc(var(--w-label) + (100% - var(--w-label)) * var(--ph,.05)); } #s-what[data-variant="c"] .what-playhead::before { content:'FR ' attr(data-frame); position:absolute; top:21px; left:50%; transform:translate(-50%,-100%); padding:2px 8px; background:#f2efe6; color:#0d0f0c; font:400 12px/1.4 var(--w-mono); letter-spacing:.08em; white-space:nowrap; } #s-what[data-variant="c"][data-scrubbing] .what-lanes { cursor:ew-resize; } #s-what[data-variant="c"] .what-item::after { content:''; position:absolute; top:0; bottom:0; left:var(--w-label); right:0; cursor:ew-resize; z-index:0; }  #s-what[data-variant="c"] .what-range { display:block; position:absolute; z-index:0; margin:0; opacity:0; pointer-events:none; top:26px; left:var(--w-label); width:calc(100% - var(--w-label)); height:calc(100% - 26px); } #s-what[data-variant="c"] .what-lanes:has(.what-range:focus-visible) .what-playhead { outline:2px solid var(--w-hi); outline-offset:3px; }   @media (max-height:760px) and (min-width:761px) { #s-what[data-variant="c"] .what-inner { grid-template-columns:minmax(0,1fr) minmax(0,min(44vw,30svh)); padding-block:12px; row-gap:10px; } #s-what[data-variant="c"] .what-item { height:clamp(22px,4svh,52px); } #s-what[data-variant="c"] .what-lanes { padding-top:22px; } }   @media (max-width:760px) { #s-what { --w-label:min(50vw,200px); } #s-what .what-inner { padding-inline:18px; } .what-head, .what-foot { font-size:12px; }   #s-what[data-variant="a"] .what-list { font-size:clamp(44px,min(13.5vw,5.8svh),72px); line-height:.95; } #s-what[data-variant="a"] .what-item.is-focus .what-tags { display:none; } #s-what[data-variant="a"] .what-cap-tags { display:inline; }   #s-what[data-variant="b"] .what-list { font-size:clamp(64px,min(23vw,9.8svh),150px); column-gap:.22em; }  #s-what[data-variant="c"] .what-ruler span:nth-child(even) { visibility:hidden; } #s-what[data-variant="c"] .what-inner { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto auto; grid-template-areas:"head" "monitor" "ctl" "lanes" "foot"; } #s-what[data-variant="c"] .what-title { display:none; } #s-what[data-variant="c"] .what-tbox { grid-area:ctl; align-self:auto; height:auto; } #s-what[data-variant="c"][data-play-style="o"] .what-tbox, #s-what[data-variant="c"][data-play-style="d"] .what-tbox { display:none; }  #s-what[data-variant="c"]:is([data-play-style="a"], [data-play-style="b"], [data-play-style="c"]) .what-item { height:clamp(22px,3.3svh,34px); } #s-what[data-play-style="a"] .what-play { min-height:42px; } #s-what[data-play-style="b"] .what-play { min-height:44px; } #s-what[data-play-style="c"] .what-play { min-height:50px; } #s-what[data-variant="c"] .what-inner > .what-monitor { justify-self:end; width:min(100%,37svh); } #s-what[data-variant="c"] .what-item { height:clamp(26px,4svh,40px); } #s-what[data-variant="c"] .what-btn { font-size:clamp(15px,5vw,22px); } .what-foot { flex-wrap:wrap; } }  @media (prefers-reduced-motion:reduce) { #s-what *, #s-what *::before, #s-what *::after { transition:none !important; } .what-glitch, .what-flash { display:none; } #s-what[data-flashing] .what-vid.is-on { animation:none; } }   html:is([data-budget="0"],[data-budget="1"],[data-budget="2"],[data-budget="3"],[data-budget="4"]) #s-what { --w-bg:var(--bg-mid); --w-fg:var(--white); --w-dim:var(--muted2); --w-mute:var(--muted2); --w-hi:var(--accent); --w-tint:transparent; } html:is([data-budget="0"],[data-budget="1"],[data-budget="2"],[data-budget="3"],[data-budget="4"]) #s-what .what-stage, html:is([data-budget="0"],[data-budget="1"],[data-budget="2"],[data-budget="3"],[data-budget="4"]) #s-what .what-field { display:none !important; }   #s-made { --m-bg:#151914; --m-fg:#c2b7a2; --m-hi:#f2efe6; --m-mute:#9e9379; --m-line:#3a3d33; --m-accent:var(--accent); --m-font:'Anton','Impact','Arial Narrow',sans-serif; --m-body:'Archivo',var(--font-b),'Helvetica Neue',Arial,sans-serif; --m-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace; padding:0; background:var(--m-bg); color:var(--m-fg); isolation:isolate; font-family:var(--m-body); } #s-made .m-stage { position:absolute; inset:0; overflow:hidden; container-type:inline-size; user-select:none; -webkit-user-select:none; } #s-made[data-variant="seam"] .m-stage:not([data-stage="seam"]), #s-made[data-variant="jog"]  .m-stage:not([data-stage="jog"]), #s-made[data-variant="cord"] .m-stage:not([data-stage="cord"]) { display:none; } #s-made .m-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none; } #s-made .m-hd { position:absolute; z-index:6; top:0; left:0; right:0; display:flex; justify-content:space-between; gap:16px; padding:clamp(14px,3svh,28px) clamp(18px,5vw,72px); font:500 13px var(--m-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--m-hi); text-shadow:0 1px 8px rgba(0,0,0,.7); pointer-events:none; } #s-made .m-hl { position:absolute; z-index:3; left:clamp(18px,5vw,72px); font:400 clamp(40px,min(9cqw,13svh),132px)/.92 var(--m-font); text-transform:uppercase; color:var(--m-fg); max-width:72%; pointer-events:none; text-shadow:0 2px 24px rgba(0,0,0,.45); } #s-made .m-hl em { font-style:normal; color:var(--m-accent); } #s-made .m-hint { position:absolute; z-index:5; font:500 12px var(--m-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--m-hi); pointer-events:none; transition:opacity .6s; text-shadow:0 1px 8px rgba(0,0,0,.8); } #s-made .m-hint.gone { opacity:0; } #s-made .what-cta:focus-visible { outline:2px solid var(--m-accent); outline-offset:3px; } #s-made .what-cta { font:500 12px var(--m-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--m-hi); text-decoration:underline; text-underline-offset:4px; }   #s-made [data-stage="seam"] { touch-action:pan-y; cursor:ew-resize; } #s-made [data-stage="seam"] .m-still { animation:m-jit .5s steps(1) infinite; } @keyframes m-jit { 0% { transform:scale(1.03) translate(0,0); } 25% { transform:scale(1.032) translate(-.5px,.4px); } 50% { transform:scale(1.03) translate(.4px,-.3px); } 75% { transform:scale(1.031) translate(-.3px,-.4px); } } #s-made .m-rev { position:absolute; inset:0; clip-path:inset(0 0 0 31%); z-index:2; } #s-made .m-rev::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,15,12,.35),rgba(13,15,12,0) 30%); pointer-events:none; } #s-made .m-rev.hit { filter:contrast(1.7) saturate(1.6) hue-rotate(18deg); transform:translateX(4px); } #s-made [data-stage="seam"] .m-hl { bottom:calc(56px + clamp(18px,4svh,48px)); } #s-made .m-seam { position:absolute; z-index:4; top:0; bottom:56px; left:31%; width:44px; margin-left:-22px; outline:none; pointer-events:none; } #s-made .m-seam::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:3px; margin-left:-1.5px; background:var(--m-accent); transform:scaleX(calc(1 + var(--sp,0) * 2.4)); } #s-made .m-knob { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:var(--m-accent); color:#0d0f0c; display:grid; place-items:center; font:500 15px var(--m-mono); letter-spacing:.1em; transition:transform .14s; } #s-made .m-knob::before { content:'\2039  \203A'; white-space:pre; } #s-made .m-seam.pulse .m-knob { transform:scale(1.22); } #s-made .m-seam:focus-visible .m-knob { outline:2px solid var(--m-hi); outline-offset:4px; } #s-made .m-takes { position:absolute; z-index:5; left:0; right:0; bottom:0; height:56px; display:grid; grid-template-columns:repeat(8,1fr); background:rgba(13,15,12,.55); border-top:1px solid rgba(194,183,162,.25); pointer-events:none; } #s-made .m-takes span { display:grid; place-items:center; font:500 12px var(--m-mono); letter-spacing:.1em; color:var(--m-mute); border-left:1px solid rgba(194,183,162,.18); } #s-made .m-takes span:first-child { border-left:0; } #s-made .m-takes span.on { color:#0d0f0c; background:var(--m-accent); } #s-made [data-stage="seam"] .m-hint { right:clamp(18px,5vw,72px); bottom:74px; }   #s-made [data-stage="jog"] { touch-action:pan-y; cursor:grab; outline:none; } #s-made [data-stage="jog"].grabbing { cursor:grabbing; } #s-made [data-stage="jog"]:focus-visible { outline:2px solid var(--m-hi); outline-offset:-2px; } #s-made [data-stage="jog"] .m-vid { opacity:0; transition:opacity .3s; z-index:2; } #s-made [data-stage="jog"] .m-vid.flash { opacity:1; transition:none; filter:contrast(1.5) saturate(1.6); } #s-made [data-stage="jog"] .m-vid.cut { opacity:1; transition:opacity .5s; } #s-made [data-stage="jog"] .m-vid.expose { animation:m-expose 1.3s ease-out 1; }  #s-made [data-stage="cord"].arrive { animation:m-arrive .6s ease-out 1; } @keyframes m-arrive { 0% { opacity:0; } 100% { opacity:1; } } @keyframes m-expose { 0% { filter:brightness(4) contrast(1.4) saturate(.3); } 100% { filter:brightness(1) contrast(1) saturate(1); } } #s-made [data-stage="jog"].hit { animation:m-shake .24s steps(2) 1; } @keyframes m-shake { 0% { transform:translate(6px,-3px); } 50% { transform:translate(-5px,4px); } 100% { transform:translate(0,0); } } #s-made [data-stage="jog"] .m-hl { bottom:calc(104px + clamp(40px,9svh,80px)); } #s-made .m-hud { position:absolute; z-index:6; top:calc(clamp(14px,3svh,28px) + 30px); right:clamp(18px,5vw,72px); display:flex; gap:22px; flex-wrap:wrap; justify-content:flex-end; font:500 12px var(--m-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--m-hi); text-shadow:0 1px 8px rgba(0,0,0,.8); pointer-events:none; } #s-made .m-pips, #s-made .m-bars { display:inline-flex; gap:4px; vertical-align:middle; margin-left:8px; } #s-made .m-pips i, #s-made .m-bars i { width:12px; height:12px; border:1px solid var(--m-fg); display:block; } #s-made .m-bars i { width:6px; height:14px; border-color:var(--m-mute); } #s-made .m-pips i.on, #s-made .m-bars i.on { background:var(--m-accent); border-color:var(--m-accent); } #s-made .m-rulerbox { position:absolute; z-index:5; left:0; right:0; bottom:0; height:104px; background:linear-gradient(0deg,rgba(13,15,12,.85),rgba(13,15,12,.55) 70%,rgba(13,15,12,0)); } #s-made .m-ruler { position:absolute; inset:0; width:100%; height:100%; display:block; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); } #s-made .m-ph { position:absolute; z-index:6; left:50%; bottom:0; width:4px; height:78px; margin-left:-2px; background:var(--m-accent); box-shadow:0 0 calc(4px + var(--heat,0) * 30px) rgba(206,250,19,calc(.25 + var(--heat,0) * .75)); pointer-events:none; } #s-made [data-stage="jog"] .m-hint { left:50%; bottom:118px; transform:translateX(-50%); white-space:nowrap; } #s-made .m-xflash { position:absolute; z-index:8; inset:0; background:#fff; opacity:0; pointer-events:none; } #s-made .m-xflash.go { animation:m-xf 1s ease-out 1; } @keyframes m-xf { 0% { opacity:0; } 7% { opacity:1; } 100% { opacity:0; } } #s-made [data-stage="jog"] :is(.m-hd,.m-hud,.m-hl,.m-hint,.m-rulerbox,.m-ph) { transition:opacity .2s; } #s-made[data-cut] [data-stage="jog"] :is(.m-hd,.m-hud,.m-hl,.m-hint) { opacity:0; visibility:hidden; } #s-made[data-cut] [data-stage="jog"] { cursor:default; }  #s-made { --m-rec:#ff3b30; } #s-made .m-cutmsg { position:absolute; z-index:7; left:clamp(18px,5vw,72px); bottom:156px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:min(60%,760px); pointer-events:none; } #s-made .m-cutmsg[hidden] { display:none; } #s-made .m-cutmsg h3 { margin:0; font:400 clamp(30px,6.4cqw,84px)/.92 var(--m-font); text-transform:uppercase; color:var(--m-hi); text-shadow:0 2px 24px rgba(0,0,0,.55); } #s-made .m-cutmsg h3 em { font-style:normal; color:var(--m-accent); } #s-made .m-cutmsg p { margin:0; max-width:44ch; color:var(--m-hi); font:500 12px/1.5 var(--m-mono); letter-spacing:.1em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.8); } #s-made .m-cutmsg .what-cta { pointer-events:auto; color:var(--m-hi); font:500 12px var(--m-mono); letter-spacing:.12em; text-transform:uppercase; padding:10px 0; text-shadow:0 1px 8px rgba(0,0,0,.8); } #s-made .m-rec, #s-made .m-recr, #s-made .m-vf, #s-made .m-transport { display:none; } #s-made[data-cut] .m-rec, #s-made[data-cut] .m-recr { display:flex; } #s-made[data-cut] .m-vf { display:block; } #s-made .m-rec { position:absolute; z-index:7; top:20px; left:clamp(18px,5vw,72px); align-items:center; gap:10px; font:500 12px var(--m-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--m-hi); text-shadow:0 1px 8px rgba(0,0,0,.8); pointer-events:none; } #s-made .m-rec i { width:13px; height:13px; border-radius:50%; background:var(--m-rec); box-shadow:0 0 14px rgba(255,59,48,.85); animation:m-recblink 1.1s steps(1) infinite; } #s-made .m-rec b { font-weight:500; color:var(--m-rec); } #s-made .m-recr { position:absolute; z-index:7; top:20px; right:clamp(18px,5vw,72px); font:500 12px var(--m-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--m-hi); text-shadow:0 1px 8px rgba(0,0,0,.8); pointer-events:none; } @keyframes m-recblink { 0%,62% { opacity:1; } 63%,100% { opacity:.15; } } #s-made .stopped .m-rec i { animation:none; background:#4a1613; box-shadow:none; } #s-made .stopped .m-rec b { color:var(--m-hi); } #s-made .m-vf { position:absolute; z-index:6; inset:56px 24px 124px; pointer-events:none; } #s-made .m-vf i { position:absolute; width:28px; height:28px; border:0 solid rgba(242,239,230,.75); } #s-made .m-vf i:nth-child(1) { left:0; top:0; border-width:2px 0 0 2px; } #s-made .m-vf i:nth-child(2) { right:0; top:0; border-width:2px 2px 0 0; } #s-made .m-vf i:nth-child(3) { left:0; bottom:0; border-width:0 0 2px 2px; } #s-made .m-vf i:nth-child(4) { right:0; bottom:0; border-width:0 2px 2px 0; } #s-made .m-vf::before, #s-made .m-vf::after { content:''; position:absolute; left:50%; top:50%; background:rgba(242,239,230,.55); } #s-made .m-vf::before { width:22px; height:1px; margin:0 0 0 -11px; } #s-made .m-vf::after { width:1px; height:22px; margin:-11px 0 0 0; } #s-made[data-cut] [data-stage="jog"] .m-ph { background:var(--m-rec); box-shadow:0 0 14px rgba(255,59,48,.7); } #s-made .m-transport { position:absolute; z-index:8; right:24px; bottom:124px; } #s-made[data-cut] .m-transport:not([hidden]) { display:flex; flex-direction:column; align-items:flex-end; gap:8px; } #s-made .m-stop { display:flex; align-items:center; gap:14px; min-height:58px; padding:0 16px 0 14px; font:500 13px var(--m-mono); letter-spacing:.18em; text-transform:uppercase; color:#fff; cursor:pointer; background:rgba(24,8,8,.78); border:1.5px solid var(--m-rec); border-radius:6px; box-shadow:0 0 0 0 rgba(255,59,48,.55), inset 0 -4px 0 rgba(0,0,0,.5); backdrop-filter:blur(6px); animation:m-stoppulse 1.8s ease-out infinite; transition:background .12s, transform .06s, box-shadow .06s; } #s-made .m-sq { width:20px; height:20px; border-radius:2px; background:var(--m-rec); box-shadow:0 0 14px rgba(255,59,48,.75); transition:background .06s; } #s-made .m-stop kbd { font:500 10px var(--m-mono); letter-spacing:.1em; padding:3px 6px; border:1px solid rgba(255,255,255,.35); border-radius:3px; opacity:.7; } #s-made .m-stop:hover { background:rgba(255,59,48,.22); } #s-made .m-stop:focus-visible { outline:2px solid var(--m-hi); outline-offset:4px; } #s-made .m-stop:active, #s-made .m-stop.pressed { transform:translateY(3px); background:var(--m-rec); animation:none; box-shadow:0 0 0 5px rgba(255,59,48,.25); } #s-made .m-stop:active .m-sq, #s-made .m-stop.pressed .m-sq { background:#fff; box-shadow:none; } @keyframes m-stoppulse { 0% { box-shadow:0 0 0 0 rgba(255,59,48,.55), inset 0 -4px 0 rgba(0,0,0,.5); } 70%,100% { box-shadow:0 0 0 14px rgba(255,59,48,0), inset 0 -4px 0 rgba(0,0,0,.5); } }  #s-made [data-stage="jog"].tape .m-vid, #s-made [data-stage="jog"].tape .m-still { filter:saturate(.45) contrast(1.25) brightness(.9); animation:m-tapejit .09s steps(1) infinite; } @keyframes m-tapejit { 0% { transform:translateY(0); } 33% { transform:translateY(2px); } 66% { transform:translateY(-1px); } }  #s-made [data-stage="jog"].crt { background:#000; } #s-made [data-stage="jog"].crt .m-vid, #s-made [data-stage="jog"].crt .m-still { animation:m-crtoff .44s cubic-bezier(.65,0,.85,.35) forwards; } @keyframes m-crtoff { 0% { clip-path:inset(0 0 0 0); filter:brightness(1); } 55% { clip-path:inset(49.3% 0 49.3% 0); filter:brightness(3); } 85% { clip-path:inset(49.3% 47% 49.3% 47%); filter:brightness(6); } 100% { clip-path:inset(50% 50% 50% 50%); filter:brightness(0); } } #s-made .crt :is(.m-rec,.m-recr,.m-vf,.m-transport,.m-cutmsg,.m-rulerbox,.m-ph) { opacity:0; transition:opacity .16s; } #s-made .m-crtdot { position:absolute; z-index:9; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff; box-shadow:0 0 26px 10px rgba(255,255,255,.85); opacity:0; pointer-events:none; } #s-made .crt .m-crtdot { animation:m-crtdot .8s ease-out .34s forwards; } @keyframes m-crtdot { 0% { opacity:1; transform:scale(1.5); } 100% { opacity:0; transform:scale(0); } } #s-made .wake .m-still { animation:m-wake .7s ease-out 1; } @keyframes m-wake { 0% { filter:brightness(0); } 100% { filter:brightness(1); } }  #s-made .m-vol { display:flex; flex-direction:column; align-items:center; gap:4px; width:58px; padding:6px 0 8px; background:rgba(13,15,12,.62); border:1px solid rgba(242,239,230,.22); border-radius:6px; backdrop-filter:blur(6px); } #s-made .m-volbtn { display:flex; align-items:center; justify-content:center; gap:8px; min-width:40px; height:40px; padding:0 6px; color:var(--m-hi); background:transparent; border:0; border-radius:4px; cursor:pointer; font:500 12px var(--m-mono); letter-spacing:.14em; text-transform:uppercase; } #s-made .m-volbtn:hover { background:rgba(242,239,230,.12); } #s-made .m-volbtn:focus-visible, #s-made .m-vsl:focus-visible { outline:2px solid var(--m-hi); outline-offset:2px; } #s-made .m-volbtn svg { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #s-made .m-volbtn .m-x { display:none; stroke:var(--m-rec); stroke-width:2.4; } #s-made .m-vol.muted .m-waves { display:none; } #s-made .m-vol.muted .m-x { display:block; } #s-made .m-volbtn .m-tog { display:none; } #s-made .m-vsl { position:relative; width:44px; height:124px; display:grid; place-items:center; cursor:pointer; touch-action:none; outline-offset:0; } #s-made .m-meter { position:relative; width:18px; height:112px; border-radius:2px; background:linear-gradient(0deg,var(--m-accent) 0 66%,#ffb020 66% 88%,var(--m-rec) 88%); overflow:hidden; } #s-made .m-meter::before { content:''; position:absolute; left:0; right:0; top:0; height:calc((100 - var(--v,50)) * 1%); background:rgba(13,15,12,.84); } #s-made .m-meter::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(13,15,12,.9) 12px 14px); pointer-events:none; } #s-made .m-lbl { font:500 10px var(--m-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--m-hi); opacity:.8; text-align:center; min-height:14px; } @container (max-width:860px) { #s-made .m-cutmsg { bottom:196px; max-width:86%; } #s-made .m-transport { right:auto; left:16px; bottom:124px; } #s-made[data-cut] .m-transport:not([hidden]) { flex-direction:row; align-items:stretch; gap:10px; } #s-made .m-rec { left:16px; } #s-made .m-recr { display:none !important; } #s-made .m-vol { flex-direction:row; width:auto; height:58px; padding:0 6px; gap:0; } #s-made .m-vsl, #s-made .m-lbl { display:none; } #s-made .m-volbtn { height:100%; padding:0 12px; } #s-made .m-volbtn .m-tog { display:inline; min-width:3ch; text-align:left; } } @media (max-height:700px) { #s-made[data-cut] .m-transport:not([hidden]) { flex-direction:row; align-items:stretch; gap:10px; } #s-made .m-vol { flex-direction:row; width:auto; height:58px; padding:0 6px; gap:0; } #s-made .m-vsl, #s-made .m-lbl { display:none; } #s-made .m-volbtn { height:100%; padding:0 12px; } #s-made .m-volbtn .m-tog { display:inline; min-width:3ch; text-align:left; } }   #s-made [data-stage="cord"] { touch-action:pan-y; } #s-made [data-stage="cord"] .m-still { filter:brightness(.6) saturate(.7); transition:filter .12s; } #s-made [data-stage="cord"] .m-vid { opacity:0; transition:opacity .12s; z-index:2; } #s-made[data-lit] [data-stage="cord"] .m-still { filter:none; } #s-made[data-lit] [data-stage="cord"] .m-vid { opacity:1; } #s-made .m-dark { position:absolute; z-index:3; inset:0; background:radial-gradient(circle 190px at var(--mx,30%) var(--my,62%),rgba(6,8,6,0) 0,rgba(6,8,6,.5) 48%,rgba(6,8,6,.93) 100%); transition:opacity .12s; pointer-events:none; } #s-made[data-lit] .m-dark { opacity:0; } #s-made [data-stage="cord"].hit { animation:m-shake .24s steps(2) 1; } #s-made .m-sub { position:absolute; z-index:4; left:clamp(18px,5vw,72px); bottom:calc(clamp(24px,6svh,60px) + clamp(40px,min(9cqw,13svh),132px) * .92 + 14px); font:500 12px var(--m-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--m-hi); text-shadow:0 1px 8px rgba(0,0,0,.8); pointer-events:none; max-width:52ch; } #s-made [data-stage="cord"] .m-hl { bottom:clamp(24px,6svh,60px); z-index:4; max-width:60%; } #s-made .m-cord { position:absolute; z-index:5; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; } #s-made .m-cord-visual { fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } #s-made .m-cord-drop { stroke:#000; stroke-width:6.5; opacity:.22; transform:translate(2px,3px); } #s-made .m-cord-body { stroke:#9a9382; stroke-width:5; } #s-made .m-cord-mid { stroke:#c0b9a9; stroke-width:3.2; } #s-made .m-cord-braid { stroke:#554d40; stroke-width:4.6; stroke-linecap:butt; stroke-dasharray:1.3 3.1; opacity:.38; }  #s-made[data-cord-dark="a"]:not([data-lit="1"]) .m-cord { filter:brightness(0.2) !important; mix-blend-mode:darken; } #s-made[data-cord-dark="b"]:not([data-lit="1"]) .m-cord { -webkit-mask-image:radial-gradient(circle 190px at var(--mx,30%) var(--my,62%),#000 0,rgba(0,0,0,.5) 48%,rgba(0,0,0,.06) 100%); mask-image:radial-gradient(circle 190px at var(--mx,30%) var(--my,62%),#000 0,rgba(0,0,0,.5) 48%,rgba(0,0,0,.06) 100%); } #s-made .m-bead { pointer-events:all; cursor:grab; touch-action:none; outline:none; } #s-made .m-bead.drag { cursor:grabbing; } #s-made .m-bead-hit { fill:transparent; }  @media (max-width:760px) { #s-made .m-hd { flex-direction:column; gap:4px; } #s-made .m-hud { right:auto; left:clamp(18px,5vw,72px); top:calc(clamp(14px,3svh,28px) + 44px); justify-content:flex-start; gap:6px 16px; } #s-made .m-hl { max-width:88%; } #s-made [data-stage="seam"] .m-hint { display:none; } #s-made [data-stage="cord"] .m-hl { max-width:56%; } } @media (prefers-reduced-motion:reduce) { #s-what .what-play { animation:none !important; } #s-made [data-stage="seam"] .m-still { animation:none; } #s-made [data-stage="jog"].hit, #s-made [data-stage="cord"].hit { animation:none; } #s-made .m-vid.expose { animation:none; } #s-made .m-rec i, #s-made .m-stop { animation:none; } } html:is([data-budget="0"],[data-budget="1"],[data-budget="2"],[data-budget="3"],[data-budget="4"]) #s-made { display:none; }     .what-caption { display:grid; } .what-caption > * { grid-area:1 / 1; } .what-cap-ghost { visibility:hidden; pointer-events:none; } .what-cap-live { min-width:0; }   #s-what:not([data-variant="c"]) :is(.what-tc, .what-play) { display:none; } .what-tc { position:absolute; z-index:3; left:8px; top:8px; right:8px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 8px 22px; margin:-8px -8px 0; background:linear-gradient(180deg,rgba(13,15,12,.78),rgba(13,15,12,0)); pointer-events:none; font-family:var(--w-mono); text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.85); } .what-tc-main { font-size:clamp(13px,1.2vw,17px); letter-spacing:.12em; color:#f2efe6; font-variant-numeric:tabular-nums; } .what-tc-clip { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; letter-spacing:.1em; color:#c2b7a2; font-variant-numeric:tabular-nums; } #s-what[data-playing] .what-tc-main::before { content:''; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:baseline; }   .what-play { position:absolute; z-index:3; right:8px; bottom:8px; display:flex; align-items:center; gap:10px; min-height:36px; padding:0 14px 0 12px; font:500 12px var(--w-mono); letter-spacing:.14em; text-transform:uppercase; color:#f2efe6; cursor:pointer; background:rgba(13,15,12,.72); border:1px solid rgba(242,239,230,.4); border-radius:4px; backdrop-filter:blur(6px); transition:background .15s, border-color .15s, color .15s; } .what-play:hover { background:rgba(13,15,12,.9); border-color:var(--accent); color:var(--accent); } .what-play:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .what-play-ico { width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; } #s-what[data-playing] .what-play { border-color:var(--accent); color:var(--accent); } #s-what[data-playing] .what-play-ico { width:11px; height:11px; border:0; background:currentColor; border-radius:1px; }   .what-ctl, .what-pb, .what-pb-tc, .what-key { display:none; } #s-what[data-variant="c"][data-play-style="a"] .what-ctl, #s-what[data-variant="c"][data-play-style="b"] .what-ctl, #s-what[data-variant="c"][data-play-style="c"] .what-ctl { display:flex; align-items:center; gap:14px; max-width:100%; } #s-what[data-play-style="a"] .what-play, #s-what[data-play-style="b"] .what-play, #s-what[data-play-style="c"] .what-play { position:static; right:auto; bottom:auto; backdrop-filter:none; flex:none; } #s-what[data-play-style="d"] .what-play { position:absolute; right:auto; bottom:auto; backdrop-filter:none; } #s-what[data-playing] .what-play-lbl { min-width:0; } .what-key { font:500 10px/1 var(--w-mono); letter-spacing:.14em; text-transform:uppercase; padding:4px 6px 3px; border:1px solid currentColor; border-radius:3px; opacity:.65; } @media (hover:none) { .what-key { display:none !important; } }   #s-what[data-play-style="a"] .what-play { min-height:46px; padding:0 18px 0 18px; gap:12px; font-size:13px; color:var(--accent); background:transparent; border:1.5px solid var(--accent); border-radius:999px; } #s-what[data-play-style="a"] .what-play:hover { background:var(--accent); color:#0d0f0c; border-color:var(--accent); } #s-what[data-play-style="a"] .what-key { display:inline-block; margin-left:4px; } #s-what[data-play-style="a"][data-playing] .what-play { background:var(--accent); color:#0d0f0c; }   #s-what[data-play-style="b"] .what-ctl { gap:0; width:min(100%,460px); border:1px solid var(--w-line); background:rgba(242,239,230,.03); } #s-what[data-play-style="b"] .what-play { min-height:48px; padding:0 16px 0 14px; gap:12px; font-size:12px; color:var(--w-hi); background:transparent; border:0; border-right:1px solid var(--w-line); border-radius:0; } #s-what[data-play-style="b"] .what-play .what-play-ico { color:var(--accent); } #s-what[data-play-style="b"] .what-play:hover { background:rgba(206,250,19,.12); color:var(--accent); } #s-what[data-play-style="b"] .what-key { display:inline-block; margin-left:2px; } #s-what[data-play-style="b"] .what-pb { display:block; position:relative; flex:1; height:2px; margin:0 14px; background:var(--w-line); min-width:30px; } #s-what[data-play-style="b"] .what-pb-fill { display:block; position:absolute; left:0; top:0; bottom:0; width:calc(var(--ph,0) * 100%); background:var(--accent); } #s-what[data-play-style="b"] .what-pb-fill::after { content:''; position:absolute; right:-3px; top:-4px; width:2px; height:10px; background:#f2efe6; } #s-what[data-play-style="b"] .what-pb-tc { display:block; padding-right:14px; font:400 12px var(--w-mono); letter-spacing:.1em; color:var(--w-mute); font-variant-numeric:tabular-nums; } #s-what[data-play-style="b"][data-playing] .what-pb-tc { color:var(--w-hi); }   #s-what[data-play-style="c"] .what-play { min-height:58px; padding:0 26px 0 22px; gap:14px; font-size:14px; color:#0d0f0c; background:var(--accent); border:0; border-radius:0; } #s-what[data-play-style="c"] .what-play .what-play-ico { border-width:8px 0 8px 13px; } #s-what[data-play-style="c"][data-playing] .what-play .what-play-ico { width:13px; height:13px; border:0; } #s-what[data-play-style="c"] .what-play:hover { background:#f2efe6; color:#0d0f0c; border-color:transparent; } #s-what[data-play-style="c"] .what-key { display:inline-block; margin-left:6px; } #s-what[data-play-style="c"]:not([data-played]) .what-play { animation:what-ping 2.2s ease-out infinite; } @keyframes what-ping { 0% { box-shadow:0 0 0 0 rgba(206,250,19,.55); } 70%, 100% { box-shadow:0 0 0 16px rgba(206,250,19,0); } }   #s-what[data-play-style="d"] .what-lanes .what-play { left:0; top:0; z-index:7; height:42px; min-height:0; width:calc(var(--w-label) - 14px); padding:0 12px; gap:10px; justify-content:flex-start; font-size:12px; color:var(--accent); background:transparent; border:1.5px solid var(--accent); border-radius:3px; } #s-what[data-play-style="d"] .what-lanes .what-play:hover { background:var(--accent); color:#0d0f0c; } #s-what[data-play-style="d"][data-playing] .what-lanes .what-play { background:var(--accent); color:#0d0f0c; } #s-what[data-play-style="d"] .what-key { display:inline-block; margin-left:auto; } @media (max-width:760px) { #s-what[data-play-style="d"] .what-key { display:none !important; } }   .cluster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-top:20px; } .cluster-card { background:var(--bg-card); border:1px solid var(--border2); border-radius:var(--r2); padding:22px 18px; cursor:default; transition:border-color var(--tr),transform var(--tr),background var(--tr2); } .cluster-card:hover { border-color:var(--accent); transform:translateY(-2px); } .cluster-icon { font-size:24px; margin-bottom:10px; } .cluster-name { font-family:var(--font-d); font-size:20px; color:var(--white); margin-bottom:6px; line-height:1; transition:font-family var(--tr2),color var(--tr2); } .cluster-desc { font-size:var(--t-sm); color:var(--muted2); line-height:1.5; }   .service-bg { --angle:-18deg; --gap:2rem; --font-size:clamp(3rem,9vw,10rem); width:100vw; height:100%; overflow:hidden; position:absolute; left:0; right:0; top:0; bottom:0; isolation:isolate; pointer-events:none; } .service-bg::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,#080808 0%,transparent 12%,transparent 72%,#080808 92%); pointer-events:none; z-index:5; } .service-bg::after { content:''; position:absolute; inset:0; opacity:.04; mix-blend-mode:overlay; background-image:repeating-radial-gradient(circle at 0 0,transparent 0,rgba(255,255,255,.7) 1px,transparent 2px); background-size:4px 4px; pointer-events:none; z-index:6; } .marquee-stage { position:absolute; inset:-35%; display:flex; flex-direction:column; justify-content:center; gap:var(--gap); transform:rotate(var(--angle)); will-change:transform; } .marquee-row { display:flex; width:max-content; white-space:nowrap; will-change:transform; transform:translate3d(0,0,0); animation-name:diagonalMarquee; animation-timing-function:linear; animation-iteration-count:infinite; } .marquee-row:nth-child(odd) { animation-direction:reverse; } .marquee-row span { display:inline-block; padding-right:.34em; font-family:Impact,Haettenschweiler,'Arial Black',sans-serif; font-size:var(--font-size); line-height:.82; text-transform:uppercase; letter-spacing:.05em; color:#1b1b1b; } @media(max-width:768px) { .service-bg { --font-size:clamp(2.6rem,11vw,6rem); --gap:1.25rem; } } @media(prefers-reduced-motion:reduce) { .marquee-row { animation-play-state:paused; } }     .depth-zone { position:relative; height:240px; overflow-x:clip; overflow-y:visible; pointer-events:none; view-timeline-name:--depth-zone; view-timeline-axis:block; z-index:10; } .depth-layer { position:absolute; left:-10%; width:120%; will-change:transform; } .depth-layer--shadow { top:60px; opacity:.55; animation:depth-shadow linear both; animation-timeline:--depth-zone; animation-range:entry 0% exit 100%; } .depth-layer--base   { top:20px; animation:depth-base linear both; animation-timeline:--depth-zone; animation-range:entry 0% exit 100%; } .depth-layer--hi     { top:0; animation:depth-hi linear both; animation-timeline:--depth-zone; animation-range:entry 0% exit 100%; } @keyframes depth-shadow { from{transform:translateY(-28px)}to{transform:translateY(28px)} } @keyframes depth-base   { from{transform:translateY(-46px)}to{transform:translateY(46px)} } @keyframes depth-hi     { from{transform:translateY(-58px)}to{transform:translateY(58px)} } .depth-scene { perspective:900px; perspective-origin:50% 50%; transition:perspective-origin .4s ease; } @supports not (animation-timeline:view()) { .depth-layer { animation:none; transform:none; } } @media(prefers-reduced-motion:reduce) { .depth-layer { animation:none !important; transform:none !important; } } .depth-placeholder { width:100%; height:200px; background:linear-gradient(135deg,var(--bg-card2),var(--bg-mid)); border:1px solid var(--border2); border-radius:var(--r2); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; opacity:.5; }    .cluster-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; } .cluster-tag  { font-size:var(--t-xs); padding:2px 8px; background:rgba(202,255,0,.06); border:1px solid var(--border2); border-radius:100px; color:var(--muted2); line-height:1.6; }      .btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:var(--r); font-family:var(--font-b); font-size:var(--t-base); font-weight:700; text-decoration:none; border:2px solid transparent; transition:all .2s ease; letter-spacing:.03em; cursor:pointer; } .btn-primary { background:var(--accent); color:#000; border:none; } .btn-primary:hover { background:var(--accent-dk); transform:translateY(-2px); } .btn-ghost { background:transparent; color:var(--white); border-color:var(--border2); } .btn-ghost:hover { border-color:var(--accent); color:var(--accent); } .btn-sm { padding:9px 20px; font-size:var(--t-sm); } .btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }   .field { position:relative; margin-bottom:20px; } .field input,.field textarea,.field select { width:100%; background:var(--bg-card); border:1px solid var(--border2); border-radius:var(--r); color:var(--white); font-family:var(--font-b); font-size:var(--t-base); padding:22px 14px 8px; outline:none; transition:border-color var(--tr),background var(--tr2),box-shadow var(--tr); resize:none; appearance:none; } .field textarea { min-height:110px; padding-top:26px; } .field input:focus,.field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(202,255,0,.1); } .field label { position:absolute; top:15px; left:14px; font-size:var(--t-base); color:var(--muted2); transition:all .15s; pointer-events:none; user-select:none; } .field input:focus ~ label,.field input:not(:placeholder-shown) ~ label,.field textarea:focus ~ label,.field textarea:not(:placeholder-shown) ~ label { top:6px; font-size:var(--t-xs); color:var(--accent); letter-spacing:.05em; } .field select { padding-top:14px; padding-bottom:14px; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .field input.field-error,.field textarea.field-error { border-color:var(--danger) !important; box-shadow:0 0 0 2px rgba(255,68,85,.15) !important; } .inline-error { font-size:var(--t-xs); color:var(--danger); margin-top:8px; display:none; } .inline-error.show { display:block; } .captcha-wrap { overflow:hidden; border-radius:6px; background:#111; height:71px; width:297px; margin:8px 0; } .captcha-wrap iframe { margin:-3px 0 0 -3px; padding:2px; }   .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin-top:14px; } .service-card,.radio-card { position:relative; } .service-card input[type=checkbox],.radio-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; } .service-card label,.radio-card label { display:flex; flex-direction:column; gap:7px; padding:14px 12px; border:1px solid var(--border2); border-radius:var(--r2); cursor:pointer; user-select:none; transition:all var(--tr); background:var(--bg-card); min-height:78px; height:100%; } .service-card label:hover,.radio-card label:hover { border-color:var(--muted2); } .service-card input:checked + label,.radio-card input:checked + label { border-color:var(--accent); background:var(--accent-bg); } .card-icon { font-size:18px; line-height:1; } .card-name { font-size:var(--t-sm); font-weight:700; color:var(--white); line-height:1.3; } .card-desc { font-size:var(--t-xs); color:var(--muted2); line-height:1.4; } .card-check { position:absolute; top:9px; right:9px; width:15px; height:15px; border-radius:50%; border:1px solid var(--border2); background:transparent; transition:all var(--tr); display:flex; align-items:center; justify-content:center; font-size:9px; color:transparent; } .service-card input:checked + label .card-check,.radio-card input:checked + label .card-check { background:var(--accent); border-color:var(--accent); color:transparent; }   .progress-bar { position:fixed; top:var(--hdr); left:0; right:0; height:2px; z-index:999; } .progress-fill { height:100%; background:var(--accent); width:0%; transition:width .4s ease; }   .footer-bar { position:fixed; bottom:0; left:0; right:0; height:var(--ftr); background:rgba(8,8,8,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,4vw,56px); z-index:1000; transition:background var(--tr),border-color var(--tr); } .footer-bar-left { font-size:var(--t-xs); color:var(--muted2); letter-spacing:.1em; text-transform:uppercase; } .footer-bar-right { display:flex; align-items:center; gap:20px; } .fbar-link { color:var(--muted2); text-decoration:none; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; transition:color var(--tr); } .fbar-link:hover { color:var(--accent); } .fbar-email { color:var(--accent); text-decoration:none; font-size:var(--t-sm); font-weight:700; }    .visitor-ctr { display:none; text-align:center; margin:18px 0; font-family:'Courier New',monospace; font-size:13px; color:#000080; } .visitor-ctr-inner { display:inline-block; background:#fff; border:3px groove #808080; padding:6px 16px; } .construction { display:none; align-items:center; justify-content:center; gap:14px; margin:16px 0; font-family:'Comic Sans MS',cursive; color:#f00; font-weight:bold; font-size:14px; } .con-icon { font-size:28px; display:inline-block; animation:wave .5s ease-in-out infinite; }   .mt-sm{margin-top:10px} .mt-md{margin-top:22px} .mt-lg{margin-top:36px} .mt-xl{margin-top:52px} .text-accent{color:var(--accent)} .text-muted{color:var(--muted2)} .text-sm{font-size:var(--t-sm)} .divider{height:1px;background:var(--border2);margin:24px 0} .thanks-icon{font-size:60px;margin-bottom:22px;display:block;animation:pulse-glow 2s ease-in-out infinite} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}   @media(max-width:768px) { :root { --hdr:54px; --ftr:42px; } .site-nav { display:none; } .hamburger { display:flex; } .site-nav.open { display:flex; flex-direction:column; position:fixed; top:var(--hdr); left:0; right:0; background:var(--bg-card2); border-bottom:1px solid var(--border2); padding:18px clamp(16px,4vw,56px) 22px; gap:14px; z-index:999; } .field-row { grid-template-columns:1fr; } .cluster-grid { grid-template-columns:repeat(2,1fr); } .hero-content { max-width:100%; } } @media(max-width:480px) { .cards-grid { grid-template-columns:repeat(2,1fr); } }   :root { --q-bg:var(--bg); --q-bg2:var(--bg-mid); --q-card:var(--bg-card); --q-card2:var(--bg-card2); --q-ink:var(--white); --q-mut:#9a9a9a; --q-mut2:#7a7a7a; --q-line:#242424; --q-line2:#3a3a3a; --q-acc:var(--accent); --q-acc-dk:var(--accent-dk); --q-acc-ink:#000; --q-acc-bg:var(--accent-bg); --q-fd:'Anton','Impact','Arial Narrow',sans-serif; --q-fb:'Archivo',system-ui,sans-serif; --q-fm:'DM Mono',ui-monospace,Menlo,Consolas,monospace; }  html[data-budget="0"] { --q-bg2:#d4d0c8; --q-card:#c0c0c0; --q-card2:#d4d0c8; --q-ink:#000; --q-mut:#333; --q-mut2:#666; --q-line:#808080; --q-line2:#808080; --q-acc:#000080; --q-acc-dk:#000060; --q-acc-ink:#fff; --q-acc-bg:#e0e0f0; --q-fd:'Comic Sans MS','Comic Neue',cursive; --q-fb:'Comic Sans MS','Comic Neue',cursive; --q-fm:'Comic Sans MS','Comic Neue',cursive; } html[data-budget="1"] { --q-card:#0000aa; --q-card2:#000099; --q-mut:#ffeeaa; --q-mut2:#aaaaff; --q-line:#8888ff; --q-line2:#8888ff; --q-acc:#ffff00; --q-acc-dk:#cccc00; --q-acc-ink:#000080; --q-acc-bg:#4444cc; --q-fd:Impact,'Arial Black',sans-serif; --q-fb:'Comic Sans MS','Trebuchet MS',cursive; --q-fm:'Comic Sans MS',cursive; } html[data-budget="2"] { --q-card:#000066; --q-card2:#000044; --q-mut:#aaaacc; --q-mut2:#8888aa; --q-line:#0000aa; --q-line2:#0000dd; --q-acc:#ffcc00; --q-acc-dk:#ff9900; --q-acc-ink:#000; --q-acc-bg:rgba(255,204,0,.12); --q-fd:Georgia,serif; --q-fb:Georgia,'Times New Roman',serif; --q-fm:Georgia,serif; } html[data-budget="3"] { --q-mut:#777; --q-mut2:#aaa; --q-line:#ddd; --q-line2:#ccc; --q-acc:#428bca; --q-acc-dk:#2a6496; --q-acc-ink:#fff; --q-acc-bg:rgba(66,139,202,.1); --q-fd:'Ubuntu',sans-serif; --q-fb:Helvetica,Arial,sans-serif; --q-fm:Helvetica,Arial,sans-serif; } html[data-budget="4"] { --q-mut:#777; --q-mut2:#aaa; --q-line:#ddd; --q-line2:#ccc; --q-acc:#1976D2; --q-acc-dk:#0d47a1; --q-acc-ink:#fff; --q-acc-bg:rgba(25,118,210,.08); --q-fd:'Ubuntu',sans-serif; --q-fb:'Ubuntu',sans-serif; --q-fm:'Ubuntu',sans-serif; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks).snap-section { padding:0; overflow:visible; color:var(--q-ink); font:15px/1.5 var(--q-fb); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks).revealed { animation:none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb { flex:1; display:flex; flex-direction:column; min-width:0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-main { flex:1; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-loading { padding:40px clamp(16px,6vw,80px); color:var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) button { font-family:inherit; }  .q-ovl { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-label { font: 500 12px/1 var(--q-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-h { font: 400 clamp(32px, 5vw, 58px)/1 var(--q-fd); text-transform: uppercase; letter-spacing: .01em; margin: 10px 0 8px; text-wrap: balance; color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sub { color: var(--q-mut); max-width: 62ch; margin: 0 0 22px; font-size: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sh { font: 500 12px/1 var(--q-fm); letter-spacing: .12em; text-transform: uppercase; color: var(--q-mut); margin: 22px 0 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-err { display: none; color: var(--danger); font-size: 13px; margin: 10px 0 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-err.show { display: block; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-none { color: var(--q-mut); font-size: 13px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn { font: 500 14px/1 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; padding: 15px 22px; background: var(--q-acc); color: var(--q-acc-ink); border: 1px solid var(--q-acc); border-radius: var(--r); cursor: pointer; transition: transform .12s, background .15s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn:hover { transform: translateY(-1px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn:active { transform: translateY(1px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn.ghost { background: transparent; color: var(--q-ink); border-color: var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn.ghost:hover { border-color: var(--q-acc); color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt { position: relative; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt label { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px 40px 14px 16px; background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--r2); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt:hover label { border-color: var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt input:focus-visible + label { outline: 2px solid var(--q-acc); outline-offset: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt.on label { background: var(--q-acc-bg); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-ck { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--q-line2); border-radius: 50%; font-size: 11px; color: transparent; transition: .15s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt.rad .q-ck { border-radius: 50%; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-opt.on .q-ck { background: var(--q-acc); border-color: var(--q-acc); color: var(--q-acc-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-nm { font: 600 15px/1.25 var(--q-fb); color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-ds { font-size: 13px; color: var(--q-mut); line-height: 1.35; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-ic { font-size: 24px; line-height: 1; margin-bottom: 4px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-tags span { font: 11px/1 var(--q-fm); color: var(--q-mut); border: 1px solid var(--q-line); border-radius: 20px; padding: 4px 7px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-blocks { display: grid; gap: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-blk { display: grid; gap: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-subgrp:not([hidden]) { padding-left: 14px; border-left: 2px solid var(--q-line2); }    :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-toggle { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--r2); cursor: pointer; position: relative; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-toggle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-toggle:has(input:focus-visible) { outline: 2px solid var(--q-acc); outline-offset: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-track { flex: none; width: 40px; height: 22px; border-radius: 22px; background: var(--q-card2); border: 1px solid var(--q-line2); position: relative; transition: .2s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--q-mut); transition: .2s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-toggle.on { border-color: var(--q-acc); background: var(--q-acc-bg); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-toggle.on .q-track { background: var(--q-acc); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-toggle.on .q-track i { left: 20px; background: var(--q-acc-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-copy { display: grid; gap: 2px; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-copy b { font-weight: 600; font-size: 15px; color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-copy i { font-style: normal; font-size: 13px; color: var(--q-mut); }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field { position: relative; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field input, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field textarea, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field select { width: 100%; background: var(--q-card); color: var(--q-ink); border: 1px solid var(--q-line2); border-radius: var(--r); padding: 27px 14px 9px; font: 16px/1.4 var(--q-fb); outline: none; transition: border-color .15s; resize: vertical; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field select { padding: 15px 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field label { position: absolute; left: 14px; top: 16px; color: var(--q-mut); font-size: 15px; pointer-events: none; transition: .15s; transform-origin: left top; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field input:focus, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field textarea:focus, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field select:focus { border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field input:focus ~ label, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field textarea:focus ~ label, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field input:not(:placeholder-shown) ~ label, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field textarea:not(:placeholder-shown) ~ label { top: 8px; font-size: 11px; color: var(--q-acc); letter-spacing: .06em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-count { position: absolute; right: 10px; bottom: 8px; font: 11px/1 var(--q-fm); color: var(--q-mut2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-count.hot { color: var(--danger); }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-q { font: 500 13px/1 var(--q-fm); padding: 12px 16px; background: var(--q-card); color: var(--q-ink); border: 1px solid var(--q-line2); border-radius: 30px; cursor: pointer; transition: .15s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-q:hover { border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-q.on { background: var(--q-acc); color: var(--q-acc-ink); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-datewrap { position: relative; display: inline-block; margin-bottom: 18px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-datebtn { font: 14px/1 var(--q-fb); padding: 14px 16px; background: var(--q-card); color: var(--q-mut); border: 1px solid var(--q-line2); border-radius: var(--r); cursor: pointer; min-width: 240px; text-align: left; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-datebtn.has { color: var(--q-ink); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-calpop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 290px; background: var(--q-card2); border: 1px solid var(--q-line2); border-radius: var(--r2); padding: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-h button { background: none; border: 1px solid var(--q-line2); color: var(--q-ink); width: 30px; height: 30px; border-radius: var(--r); cursor: pointer; font-size: 18px; line-height: 1; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-w, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-w span { font: 11px/1 var(--q-fm); color: var(--q-mut); padding: 6px 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d span, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d button { font: 13px/1 var(--q-fb); padding: 9px 0; border: 0; background: none; color: var(--q-ink); border-radius: var(--r); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d button { cursor: pointer; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d button:hover { background: var(--q-acc-bg); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d .o { color: var(--q-mut2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d .past { color: var(--q-mut2); cursor: not-allowed; text-decoration: line-through; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d .today { outline: 1px solid var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-cal-d .sel { background: var(--q-acc); color: var(--q-acc-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-dltypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bdisp { text-align: center; margin-bottom: 18px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bamt { font: 400 clamp(52px, 11vw, 110px)/1 var(--q-fd); color: var(--q-acc); text-transform: uppercase; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bdesc { font-size: 18px; color: var(--q-ink); margin-top: 4px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bera { min-height: 22px; font: 13px/1.4 var(--q-fm); color: var(--q-mut); margin-top: 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-barea { padding: 0 12px; transition: opacity .2s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-barea.is-disabled { opacity: .3; pointer-events: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btrack { position: relative; height: 40px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btrk { position: absolute; left: 0; right: 0; top: 17px; height: 6px; background: var(--q-card2); border: 1px solid var(--q-line2); border-radius: 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bfill { position: absolute; left: 0; top: 17px; height: 6px; background: var(--q-acc); border-radius: 6px; pointer-events: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bthumb { position: absolute; top: 8px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--q-acc); border: 3px solid var(--q-bg); box-shadow: 0 0 0 1px var(--q-acc); pointer-events: none; transition: left .12s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btrack input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btrack:has(input:focus-visible) .q-bthumb { outline: 2px solid var(--q-ink); outline-offset: 3px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bticks { display: flex; justify-content: space-between; margin-top: 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btick { background: none; border: 0; padding: 6px 2px; font: 11px/1 var(--q-fm); color: var(--q-mut2); cursor: pointer; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btick.on { color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-unsure { margin-top: 22px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sb { position: relative; background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--r2); padding: 16px; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sb.wide { grid-column: 1 / -1; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sbt { font: 500 12px/1 var(--q-fm); letter-spacing: .12em; text-transform: uppercase; color: var(--q-acc); margin-bottom: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-edit { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--q-mut); font: 11px/1 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 4px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-edit:hover { color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sl { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--q-line); font-size: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sl:last-child { border-bottom: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sl span { color: var(--q-mut); flex: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sl strong { font-weight: 500; text-align: right; overflow-wrap: anywhere; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-stags { display: flex; flex-wrap: wrap; gap: 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-stag { font-size: 13px; padding: 5px 10px; border-radius: 20px; background: var(--q-acc-bg); border: 1px solid var(--q-acc); color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-stag.flag { background: transparent; border-style: dashed; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sg { margin-top: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sg:first-child { margin-top: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sgn { font: 11px/1 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; color: var(--q-mut); margin-bottom: 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-stext { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }   .q-bars { background: #000; overflow: hidden; cursor: pointer; animation: q-flick 4.5s steps(1) infinite; } .q-bars-top, .q-bars-mid, .q-bars-low { position: absolute; left: 0; right: 0; display: flex; } .q-bars-top { top: 0; height: 66%; } .q-bars-mid { top: 66%; height: 9%; } .q-bars-low { top: 75%; bottom: 0; } .q-bars i { flex: 1; display: block; } .q-bars .b0 { background: #c0c0c0 } .q-bars .b1 { background: #c0c000 } .q-bars .b2 { background: #00c0c0 } .q-bars .b3 { background: #00c000 } .q-bars .b4 { background: #c000c0 } .q-bars .b5 { background: #c00000 } .q-bars .b6 { background: #0000c0 } .q-bars .m0 { background: #0000c0 } .q-bars .m1 { background: #131313 } .q-bars .m2 { background: #c000c0 } .q-bars .m3 { background: #131313 } .q-bars .m4 { background: #00c0c0 } .q-bars .m5 { background: #131313 } .q-bars .m6 { background: #c0c0c0 } .q-bars-low i:nth-child(1) { background: #00214c; flex: 1.4 } .q-bars-low i:nth-child(2) { background: #fff; flex: 1.4 } .q-bars-low i:nth-child(3) { background: #32006a; flex: 1.4 } .q-bars-low i:nth-child(4) { background: #131313; flex: 3 } .q-bars::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); pointer-events: none; } .q-bars-slate { position: relative; z-index: 2; width: min(520px, 88vw); background: rgba(8, 8, 6, .94); border: 2px solid #f0f0f0; padding: 22px 24px 24px; text-align: left; } .q-bars-rec { font: 500 12px/1 'DM Mono', monospace; letter-spacing: .14em; color: #f0f0f0; display: flex; align-items: center; gap: 10px; } .q-bars-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: q-blink 1s steps(1) infinite; } .q-bars-h { font: 400 clamp(34px, 8vw, 58px)/1 'Anton', Impact, sans-serif; text-transform: uppercase; color: #fff; margin: 14px 0 8px; } .q-bars-s { font: 13px/1.5 'DM Mono', monospace; color: #b9b9a8; margin-bottom: 18px; } .q-bars-btn { font: 500 13px/1 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 13px 18px; background: #f0f0f0; color: #000; border: 0; cursor: pointer; } .q-bars-btn:focus-visible { outline: 3px solid #CEFA13; outline-offset: 3px; } @keyframes q-blink { 50% { opacity: 0 } } @keyframes q-flick { 0%, 92% { transform: none } 93% { transform: translateX(8px) } 94% { transform: translateX(-12px) } 95% { transform: none } }    :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) { scroll-margin-top: 84px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) [hidden] { display: none !important; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) button { font-family: inherit; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-top, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-main, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-foot-in { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-top { padding-top: 18px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding-bottom: 12px; border-bottom: 2px solid var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 9px 9px 10px; background: var(--q-card); color: var(--q-mut); border: 1px solid var(--q-line); border-radius: var(--r); cursor: pointer; text-align: left; min-width: 0; transition: transform .12s, border-color .15s, background .15s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb .n { font: 500 11px/1 var(--q-fm); letter-spacing: .08em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb .t { font: 400 17px/1 var(--q-fd); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb .s { position: absolute; top: 6px; right: 8px; font: 700 12px/1 var(--q-fm); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb:hover { border-color: var(--q-line2); color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb:active { transform: translateY(1px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb.done { color: var(--q-ink); border-color: var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb.done .s { color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb.need { border-color: var(--danger); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb.need .s { color: var(--danger); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb.idle { opacity: .5; border-style: dashed; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb.cur { background: var(--q-acc); color: var(--q-acc-ink); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb.cur::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--q-acc); border-bottom: 0; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-stage { padding: 30px 0 28px; min-height: 46vh; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-stage.in { animation: qb-in .22s ease-out; } @keyframes qb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-h:focus { outline: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sub { color: var(--q-mut); max-width: 66ch; margin: 0 0 24px; font-size: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fine { color: var(--q-mut); font-size: 13px; margin: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-empty { padding: 26px; border: 2px dashed var(--q-line2); border-radius: var(--r2); display: grid; gap: 14px; justify-items: start; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-empty p { margin: 0; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-foot { position: sticky; bottom: 0; z-index: 30; background: var(--q-bg); border-top: 2px solid var(--q-line2); box-shadow: 0 -12px 28px rgba(0, 0, 0, .35); padding-bottom: env(safe-area-inset-bottom, 0px); } html:is([data-budget="0"],[data-budget="1"],[data-budget="2"],[data-budget="3"],[data-budget="4"]) :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-foot { box-shadow: 0 -6px 14px rgba(0, 0, 0, .12); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-msg { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-msg.show { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--danger); border-left-width: 6px; border-radius: var(--r); background: var(--q-bg2); color: var(--q-ink); font-size: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fix { background: none; border: 0; border-bottom: 1px solid var(--danger); color: var(--q-ink); font: 500 13px/1.2 var(--q-fb); padding: 0 0 1px; cursor: pointer; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fix:hover { color: var(--q-acc); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-nav { display: flex; align-items: center; gap: 12px; padding: 8px 0 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-nav .q-btn { padding: 10px 18px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-where { flex: 1; min-width: 0; text-align: center; font: 500 12px/1.2 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--q-mut); }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tl { --lw: 156px; --rw: 132px; position: relative; padding: 8px 0 10px; border-top: 1px solid var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tlb { display: grid; grid-template-columns: minmax(0, 1fr) var(--rw); gap: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tlm { position: relative; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-row, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); align-items: stretch; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-corner { display: flex; align-items: center; font: 500 10px/1 var(--q-fm); letter-spacing: .12em; text-transform: uppercase; color: var(--q-mut2); padding-left: 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-ruler { position: relative; height: 24px; background: var(--q-card); border: 1px solid var(--q-line2); border-radius: var(--r); background-image: repeating-linear-gradient(90deg, var(--q-line2) 0 1px, transparent 1px 10%); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-work { position: absolute; left: 0; top: 0; bottom: 0; background: var(--q-acc-bg); border-right: 2px solid var(--q-acc); transition: width .2s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-out { position: absolute; top: 0; bottom: 0; width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-out::after { content: ''; position: absolute; left: -5px; bottom: -1px; border: 5px solid transparent; border-bottom: 6px solid var(--q-acc); border-top: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-stop { position: absolute; bottom: 2px; transform: translateX(-100%); padding-right: 6px; font: 500 9px/1 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; color: var(--q-mut); white-space: nowrap; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag { position: absolute; top: 0; height: 100%; width: 0; transition: left .25s cubic-bezier(.3, 1.4, .5, 1); z-index: 2; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag .pole { position: absolute; left: -1px; top: -4px; bottom: -3px; width: 2px; background: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag .pen { position: absolute; left: 1px; top: -4px; height: 15px; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 4px; background: var(--q-acc); color: var(--q-acc-ink); font: 600 9px/1 var(--q-fm); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-radius: 0 2px 2px 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag.flip .pen { left: auto; right: 1px; padding: 0 4px 0 6px; flex-direction: row-reverse; border-radius: 2px 0 0 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag.off { opacity: .5; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag.off .pole { background: repeating-linear-gradient(180deg, var(--q-mut) 0 3px, transparent 3px 5px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag.off .pen { background: var(--q-card2); color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lock { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lock rect { fill: currentColor; stroke: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lock .sho { display: inline; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lock .shc { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lock.closed .sho { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lock.closed .shc { display: inline; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tracks { display: grid; gap: 3px; margin-top: 5px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk { height: 20px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tracks.dense .qb-tk { height: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tkn { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 6px; background: transparent; border: 0; border-radius: 2px; color: var(--q-ink); font: 600 12px/1 var(--q-fb); text-align: left; cursor: pointer; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tkn b { font: 500 10px/1 var(--q-fm); color: var(--q-acc); letter-spacing: .06em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tkn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tkn i { margin-left: auto; font: 500 9px/1 var(--q-fm); font-style: normal; padding: 2px 4px; border-radius: 8px; background: var(--q-acc); color: var(--q-acc-ink); flex: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) button.qb-tkn:hover { background: var(--q-card2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) button.qb-tkn:focus-visible { outline: 2px solid var(--q-acc); outline-offset: -2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tracks.dense .qb-tkn { font-size: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tracks.dense .qb-tkn i { padding: 1px 3px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lane { position: relative; background: var(--q-card); border: 1px solid var(--q-line); border-radius: 2px; cursor: pointer; overflow: hidden; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk.ghost .qb-lane { background: transparent; border-style: dashed; cursor: default; display: grid; align-items: center; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk.ghost .qb-tkn b { color: var(--q-mut2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk.ghost em { font: 500 10px/1 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--q-mut2); padding-left: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clipbar { position: absolute; left: 0; top: 1px; bottom: 1px; background: var(--q-acc); border-radius: 1px; transform-origin: left center; transition: width .25s cubic-bezier(.3, 1.3, .5, 1); background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .18) 6px 7px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clipbar.nolen { background: var(--q-acc-bg); border: 1px dashed var(--q-acc); background-image: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clipbar.ongoing { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clipbar .kf { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--q-acc-ink); transform: rotate(45deg); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tracks.dense .kf { width: 5px; height: 5px; margin: -2px 0 0 -2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk.laid .qb-clipbar { animation: qb-lay .34s cubic-bezier(.3, 1.6, .5, 1) .2s both; } @keyframes qb-lay { 0% { transform: scaleX(0); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-phlane { position: absolute; left: var(--lw); right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 3; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-ph { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--danger); transition: left .3s cubic-bezier(.3, 1.2, .5, 1); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-ph b { position: absolute; top: -1px; left: 0; padding: 2px 5px; background: var(--danger); color: var(--q-bg); font: 600 8px/1 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-ph::before { content: ''; position: absolute; top: -1px; left: -6px; border: 5px solid transparent; border-top: 7px solid var(--danger); border-bottom: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drophint { position: absolute; inset: 0; display: none; place-items: center; background: var(--q-acc-bg); border: 2px dashed var(--q-acc); border-radius: var(--r); font: 600 12px/1 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--q-acc); pointer-events: none; z-index: 5; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tl.armed .qb-drophint { display: grid; opacity: .45; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tl.drop .qb-drophint { opacity: 1; background: color-mix(in srgb, var(--q-acc) 22%, var(--q-bg)); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-side { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mst, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sl { background: var(--q-card); border: 1px solid var(--q-line2); border-radius: var(--r); padding: 6px 8px; display: grid; gap: 5px; align-content: center; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-side .lab { font: 500 9px/1 var(--q-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mst .segs { display: flex; gap: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mst .segs i { flex: 1; height: 8px; background: var(--q-card2); border: 1px solid var(--q-line2); transition: background .12s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mst .segs i.on { background: var(--q-acc); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mst .segs i.hot { background: var(--danger); border-color: var(--danger); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mst .amt { font: 400 20px/1 var(--q-fd); letter-spacing: .02em; color: var(--q-ink); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sl .row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 7px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sl .nm { font: 600 13px/1.1 var(--q-fb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sl .cl { position: relative; flex: none; width: 24px; height: 18px; border: 2px solid var(--q-ink); border-top: 0; display: block; font-style: normal; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sl .cl s { position: absolute; left: -2px; right: -2px; bottom: 100%; height: 6px; background: repeating-linear-gradient(-55deg, var(--q-ink) 0 4px, var(--q-bg) 4px 8px); border: 2px solid var(--q-ink); transform-origin: 0 100%; transform: rotate(-22deg); transition: transform .12s cubic-bezier(.6, -.2, .7, 1); text-decoration: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sl .cl.shut s { transform: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sl .cl.shut { border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-meta { display: none; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-binline { margin: 0 0 14px; font: 500 12px/1 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bin { counter-reset: clip; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip { counter-increment: clip; --spk: var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip.on { --spk: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip label, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip.on label { padding: 28px 16px 26px; min-height: 168px; background-color: var(--q-card); background-image: repeating-linear-gradient(90deg, var(--spk) 0 9px, transparent 9px 18px), repeating-linear-gradient(90deg, var(--spk) 0 9px, transparent 9px 18px); background-size: 100% 6px, 100% 6px; background-position: 0 8px, 0 calc(100% - 8px); background-repeat: no-repeat; border-width: 2px; border-radius: var(--r); box-shadow: 4px 4px 0 var(--q-line); transition: transform .1s, box-shadow .1s, border-color .15s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip.on label { background-color: var(--q-acc-bg); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip:hover label { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip input { cursor: grab; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip:active label { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip label::before { content: 'Clip ' counter(clip, decimal-leading-zero); font: 500 10px/1 var(--q-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip.on label::before { color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip .q-nm { font: 400 26px/1.02 var(--q-fd); text-transform: uppercase; letter-spacing: .02em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip .q-ck { top: 22px; right: 14px; border-radius: 2px; width: 22px; height: 22px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip .q-tags span { border-radius: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vn { position: absolute; right: 14px; bottom: 12px; font: 600 10px/1 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--q-mut2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip.on .qb-vn { color: var(--q-acc); } .qb-ghost { position: fixed; z-index: 1100; pointer-events: none; display: grid; align-items: center; padding: 0 10px; background: var(--q-acc); color: var(--q-acc-ink); font: 400 15px/1 var(--q-fd); letter-spacing: .03em; text-transform: uppercase; border-radius: 2px; overflow: hidden; white-space: nowrap; box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); transform-origin: 0 0; } .qb-ghost.drag { width: auto; height: 34px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxcols { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxlist { display: grid; gap: 6px; position: sticky; top: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; background: var(--q-card); color: var(--q-ink); border: 1px solid var(--q-line2); border-radius: var(--r); cursor: pointer; text-align: left; font: 600 14px/1.2 var(--q-fb); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxt b { font: 500 11px/1 var(--q-fm); color: var(--q-acc); letter-spacing: .08em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxt i { font: 500 10px/1 var(--q-fm); font-style: normal; padding: 3px 6px; border-radius: 9px; background: var(--q-acc); color: var(--q-acc-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxt i:empty { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxt:hover { border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxt.sel { background: var(--q-acc-bg); border-color: var(--q-acc); box-shadow: 4px 0 0 var(--q-acc) inset; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxt:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-ig { background: var(--q-bg2); border: 1px solid var(--q-line2); border-radius: var(--r2); padding: 18px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-igh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-igh h3 { margin: 0; font: 400 30px/1 var(--q-fd); text-transform: uppercase; letter-spacing: .02em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-igh h3::before { content: attr(data-v); font: 500 12px/1 var(--q-fm); color: var(--q-acc); margin-right: 10px; letter-spacing: .08em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-igc { font: 500 11px/1 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fx label { padding: 11px 38px 11px 12px; border-radius: var(--r); gap: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fx .q-nm { font-size: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fx .q-ck { top: 50%; right: 12px; margin-top: -7px; width: 14px; height: 14px; border-radius: 2px; font-size: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fx.on .q-ck { box-shadow: 0 0 8px var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fx.rad .q-ck { border-radius: 50%; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxtog { margin-top: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxsel select { appearance: auto; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-blocks { gap: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-subgrp:not([hidden]) { padding-left: 14px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scwrap { position: relative; padding-bottom: 26px; margin-bottom: 8px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scbar { position: relative; height: 96px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sctrack { position: absolute; inset: 0; background: var(--q-card); border: 2px solid var(--q-line2); border-radius: var(--r); background-image: repeating-linear-gradient(90deg, var(--q-line2) 0 1px, transparent 1px 5%); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scfill { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 0; background: var(--q-acc-bg); border-right: 3px solid var(--q-acc); border-radius: var(--r) 0 0 var(--r); transition: width .22s cubic-bezier(.3, 1.3, .5, 1); overflow: hidden; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scfill i { display: block; flex: 1; max-height: 12px; background: var(--q-acc); background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0, 0, 0, .2) 10px 11px); opacity: .9; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scfill.ongoing i { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sctick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--q-line2); pointer-events: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-schandle { position: absolute; top: -8px; bottom: -8px; width: 26px; margin-left: -26px; background: var(--q-ink); color: var(--q-bg); border-radius: var(--r); display: grid; place-items: center; cursor: ew-resize; box-shadow: 3px 3px 0 rgba(0, 0, 0, .4); transition: left .22s cubic-bezier(.3, 1.3, .5, 1); touch-action: pan-y; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-schandle i { width: 8px; height: 30px; background: repeating-linear-gradient(180deg, var(--q-bg) 0 2px, transparent 2px 5px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-schandle.parked { margin-left: 0; background: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-schandle:focus-visible { outline: 3px solid var(--q-acc); outline-offset: 3px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scstops span { position: absolute; bottom: 0; transform: translateX(-100%); font: 500 11px/1 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--q-mut); white-space: nowrap; padding-right: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scread { margin: 0 0 18px; font: 500 13px/1.4 var(--q-fm); letter-spacing: .04em; color: var(--q-ink); min-height: 20px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-zone label { padding: 18px 40px 18px 16px; min-height: 108px; border-width: 2px; box-shadow: 4px 4px 0 var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-zone .q-nm { font: 400 24px/1 var(--q-fd); text-transform: uppercase; letter-spacing: .02em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-zone.on label { box-shadow: 4px 4px 0 var(--q-acc); }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-briefcols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-editor { border: 2px solid var(--q-line2); border-radius: var(--r); background: var(--q-bg2); overflow: hidden; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cap { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--q-card2); border-bottom: 2px solid var(--q-line2); font: 500 11px/1.3 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cap b { color: var(--q-acc); font-weight: 500; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: .02em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cap .rec { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none; animation: qb-rec 1.2s steps(1) infinite; } @keyframes qb-rec { 50% { opacity: .15; } } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-gut { position: relative; overflow: hidden; background: var(--q-card); border-right: 1px solid var(--q-line2); height: 264px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-gutin { padding: 10px 0; will-change: transform; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-gutin span { display: block; height: 24px; line-height: 24px; text-align: right; padding-right: 8px; font: 10px/24px var(--q-fm); color: var(--q-mut2); letter-spacing: .02em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody .q-field input, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody .q-field textarea { background: transparent; border: 0; border-radius: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody .q-field textarea { height: 264px; padding: 10px 12px 28px; font: 15px/24px var(--q-fm); resize: none; display: block; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody .q-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody .q-count { right: 12px; bottom: 6px; background: var(--q-bg2); padding: 2px 4px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody .q-field textarea:focus { box-shadow: inset 3px 0 0 var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-broll { display: grid; gap: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bsw .q-copy b::before { content: 'B-roll'; display: inline-block; margin-right: 8px; padding: 2px 6px; font: 500 10px/1.2 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; background: var(--q-acc); color: var(--q-acc-ink); border-radius: 2px; vertical-align: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bbox { display: grid; gap: 12px; padding: 14px; border: 2px dashed var(--q-line2); border-radius: var(--r2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-th { position: relative; height: 46px; display: grid; place-items: center; background: var(--q-card2); border: 1px solid var(--q-line2); border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--q-line2) 0 5px, transparent 5px 10px), repeating-linear-gradient(90deg, var(--q-line2) 0 5px, transparent 5px 10px); background-size: 100% 3px; background-position: 0 3px, 0 calc(100% - 3px); background-repeat: no-repeat; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-th b { font: 500 12px/1 var(--q-fm); color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-th i { position: absolute; right: 5px; bottom: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--q-mut2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-th.has { background-color: var(--q-acc-bg); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-th.has b { color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-th.has i { background: var(--q-acc); }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-prerow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 22px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-presets { margin: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-prerow .q-datewrap { margin: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-pre { border-radius: var(--r); font-size: 13px; padding: 12px 16px; border-width: 2px; box-shadow: 3px 3px 0 var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-pre:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-pre.on { box-shadow: 3px 3px 0 var(--q-acc-dk, var(--q-line2)); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-dr { background: var(--q-bg2); border: 2px solid var(--q-line2); border-radius: var(--r); padding: 0 0 0; overflow: hidden; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drcap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 14px; background: var(--q-card2); border-bottom: 2px solid var(--q-line2); font: 500 11px/1.3 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drcap b { color: var(--q-acc); font-weight: 500; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drcap span { letter-spacing: .03em; text-transform: none; color: var(--q-mut2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drtrack { position: relative; height: 150px; margin: 0 30px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drline { position: absolute; left: 0; right: 0; top: 92px; height: 8px; background: var(--q-card); border: 1px solid var(--q-line2); border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--q-line2) 0 1px, transparent 1px 3.3%); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt { position: absolute; top: 92px; width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt i { position: absolute; left: -1px; top: -6px; width: 2px; height: 20px; background: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt b { position: absolute; top: 20px; left: 0; transform: translateX(-50%); font: 500 12px/1 var(--q-fm); letter-spacing: .06em; text-transform: uppercase; color: var(--q-ink); white-space: nowrap; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt small { position: absolute; top: 38px; left: 0; transform: translateX(-50%); font: 10px/1 var(--q-fm); color: var(--q-mut); white-space: nowrap; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt:first-of-type b, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt:first-of-type small { transform: translateX(-14px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt:last-of-type b, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt:last-of-type small { transform: translateX(-70%); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drn { position: absolute; top: 88px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: var(--q-mut2); pointer-events: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf { position: absolute; top: 6px; height: 96px; width: 30px; margin-left: -15px; cursor: grab; transition: left .25s cubic-bezier(.3, 1.4, .5, 1); z-index: 2; touch-action: pan-y; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drtrack:active .qb-drf { transition: none; cursor: grabbing; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf .pole { position: absolute; left: 14px; top: 0; bottom: 0; width: 3px; background: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf .pen { position: absolute; left: 17px; top: 0; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 9px; background: var(--q-acc); color: var(--q-acc-ink); font: 600 13px/1 var(--q-fm); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf.flip .pen { left: auto; right: 17px; padding: 0 9px 0 12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf .qb-lock { width: 14px; height: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf::after { content: ''; position: absolute; left: 8px; bottom: -3px; width: 15px; height: 6px; background: var(--q-ink); border-radius: 50% 50% 0 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf.off { opacity: .6; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf.off .pole { background: repeating-linear-gradient(180deg, var(--q-mut) 0 5px, transparent 5px 8px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf.off .pen { background: var(--q-card2); color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf:focus-visible { outline: 3px solid var(--q-acc); outline-offset: 2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drread { margin: 12px 0 18px; font: 500 13px/1.4 var(--q-fm); letter-spacing: .03em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lockwrap .q-sh { margin-top: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-locks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lockopt label { padding-left: 52px; border-width: 2px; box-shadow: 3px 3px 0 var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lockopt .qb-lock { position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lockopt.on .qb-lock { color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-lockopt .q-nm { font: 400 20px/1.1 var(--q-fd); text-transform: uppercase; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-datebtn { min-width: 220px; border-width: 2px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mix { max-width: 880px; border: 2px solid var(--q-line2); border-radius: var(--r); background: var(--q-bg2); box-shadow: 6px 6px 0 var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-chan { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--q-card2); border-bottom: 2px solid var(--q-line2); font: 500 11px/1 var(--q-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-chan b { color: var(--q-acc); font-weight: 500; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-chan .led { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--q-acc); box-shadow: 0 0 8px var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer { padding: 18px 22px 16px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "disp vu" "area area" "uns uns"; gap: 0 28px; align-items: center; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-bdisp { grid-area: disp; text-align: left; margin: 0 0 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-barea { grid-area: area; margin-top: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-unsure { grid-area: uns; margin-top: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-bamt { font-size: clamp(48px, 8vw, 84px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-bdesc { font-size: 17px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vu { grid-area: vu; display: grid; gap: 4px; margin: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vur { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 8px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vur span { font: 500 10px/1 var(--q-fm); color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vur div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vur i { height: 12px; background: var(--q-card2); border: 1px solid var(--q-line2); transition: background .1s; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vur i.on { background: var(--q-acc); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vur i.hot { background: var(--danger); border-color: var(--danger); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vur i.pk { animation: qb-pk .5s steps(2) infinite alternate; } @keyframes qb-pk { to { opacity: .55; } } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-btrack { height: 52px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-btrk { top: 22px; height: 8px; border-radius: 1px; background: var(--q-card); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-bfill { top: 22px; height: 8px; border-radius: 1px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-notch { position: absolute; top: 12px; width: 2px; height: 28px; margin-left: -1px; background: var(--q-line2); pointer-events: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-bthumb { top: 2px; width: 28px; height: 48px; margin-left: -14px; border-radius: 3px; background: var(--q-ink); border: 0; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); background-image: linear-gradient(90deg, transparent 0 12px, var(--q-acc) 12px 16px, transparent 16px), repeating-linear-gradient(180deg, transparent 0 5px, rgba(0, 0, 0, .35) 5px 6px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-btrack:has(input:focus-visible) .q-bthumb { outline: 3px solid var(--q-acc); outline-offset: 3px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-btick { font-size: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-unsure { border-width: 2px; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clap { max-width: 820px; padding-top: 50px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sticks { position: relative; height: 34px; margin-bottom: -2px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-arm, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sbase { position: absolute; left: 0; right: 0; height: 26px; border: 3px solid var(--q-ink); background: repeating-linear-gradient(-55deg, var(--q-ink) 0 22px, var(--q-bg) 22px 44px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sbase { bottom: 0; background-position: 22px 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-arm { bottom: 28px; transform-origin: 0 100%; transform: rotate(-3.5deg); transition: transform .14s cubic-bezier(.6, -.2, .7, 1); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clap.shut .qb-arm { transform: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clap.hit .qb-board { animation: qb-hit .3s ease-out; } @keyframes qb-hit { 0% { transform: translateY(0); } 30% { transform: translateY(5px); } 100% { transform: none; } } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-board { border: 3px solid var(--q-ink); background: var(--q-bg2); padding: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bmeta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 3px solid var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bmeta span { padding: 10px 14px; font: 400 22px/1 var(--q-fd); text-transform: uppercase; letter-spacing: .03em; border-right: 3px solid var(--q-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bmeta span:last-child { border-right: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bmeta small { display: block; margin-bottom: 5px; font: 500 10px/1 var(--q-fm); letter-spacing: .14em; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell { padding: 10px; border-right: 1px solid var(--q-line2); border-bottom: 1px solid var(--q-line2); min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell:nth-child(2n) { border-right: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell.wide { grid-column: 1 / -1; border-right: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell .q-field input, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell .q-field textarea, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell .q-field select { border-width: 1px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell.bad .q-field input { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-slstat { margin: 0; padding: 12px 14px; font: 500 12px/1.4 var(--q-fm); letter-spacing: .05em; text-transform: uppercase; color: var(--q-mut); background: var(--q-card2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clap.shut .qb-slstat { color: var(--q-acc); }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-rv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "go sum" "edl sum"; grid-template-rows: auto 1fr; gap: 22px; align-items: start; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-rvedl { grid-area: edl; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-rvsum { grid-area: sum; min-width: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-rvgo { grid-area: go; min-width: 0; display: grid; gap: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edlh { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--q-card2); border: 2px solid var(--q-line2); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; font: 500 11px/1.3 var(--q-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edlh b { color: var(--q-acc); font-weight: 500; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl { padding: 14px; background: var(--q-bg2); border: 2px solid var(--q-line2); border-radius: 0 0 var(--r) var(--r); font: 12.5px/1.65 var(--q-fm); max-height: 560px; overflow: auto; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl .ln { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--q-mut); min-height: 1.65em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl .ln.hd { color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl .ln.ev { color: var(--q-acc); background: var(--q-acc-bg); margin: 0 -14px; padding: 0 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl .ln.fx { color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl .ln.dim { color: var(--q-mut2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl .ln.miss { color: var(--danger); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sumh { margin-top: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sum { grid-template-columns: minmax(0, 1fr); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sum .q-sb { border-width: 2px; box-shadow: 3px 3px 0 var(--q-line); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sum .q-edit { border: 1px solid var(--q-line2); border-radius: var(--r); padding: 6px 10px; color: var(--q-ink); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sum .q-edit:hover, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sum .q-edit:focus-visible { background: var(--q-acc); color: var(--q-acc-ink); border-color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-miss { padding: 12px 14px; border: 1px solid var(--danger); border-left-width: 6px; border-radius: var(--r); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-gorow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-render { padding: 18px 40px; font-size: 18px; border-width: 2px; box-shadow: 4px 4px 0 var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-render:active { box-shadow: 1px 1px 0 var(--q-line2); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-pg { height: 18px; border: 2px solid var(--q-line2); background: var(--q-card); border-radius: 2px; overflow: hidden; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-pg i { display: block; height: 100%; width: 0; background: var(--q-acc); background-image: repeating-linear-gradient(-55deg, transparent 0 8px, rgba(0, 0, 0, .18) 8px 16px); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-plab { margin: 0; font: 500 12px/1.3 var(--q-fm); letter-spacing: .08em; text-transform: uppercase; color: var(--q-mut); min-height: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-done { padding: 14px 16px; border: 2px solid var(--q-acc); border-radius: var(--r); background: var(--q-acc-bg); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-done .q-btn { padding: 9px 14px; font-size: 12px; margin-left: auto; }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn:focus-visible, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-q:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }   html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-sb, .qb-fxt, .qb-pre) { box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; border: 0; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-sb.cur, .qb-fxt.sel) { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf; background: #a8a8a8; color: #000; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip label { box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; border: 0; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip.on label { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-mix, .qb-ig, .qb-dr, .qb-editor, .qb-board) { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff; border-width: 0; background: #d4d0c8; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-bthumb { background-color: #c0c0c0; border: 2px outset #fff; border-radius: 0; background-image: linear-gradient(90deg, transparent 0 12px, #000080 12px 16px, transparent 16px); } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-schandle, .qb-ghost) { border-radius: 0; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-clip label, .qb-mix, .qb-ig, .qb-dr) { border-style: outset; } html[data-budget="2"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-clip label, .qb-mix, .qb-dr) { box-shadow: 0 0 10px rgba(0, 100, 255, .35); } html[data-budget="3"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-clip label, .qb-zone label, .qb-pre, .qb-mix, .qb-sum .q-sb), html[data-budget="4"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-clip label, .qb-zone label, .qb-pre, .qb-mix, .qb-sum .q-sb) { box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } html[data-budget="4"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.qb-clip label, .qb-zone label) { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }   @media (max-width: 960px) { :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxcols { grid-template-columns: minmax(0, 1fr); gap: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxlist { position: static; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-briefcols, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-rv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "go" "sum" "edl"; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-top, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-main, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-foot-in { padding-left: 16px; padding-right: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-top { padding-top: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-strip { gap: 3px; padding-bottom: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb { align-items: center; padding: 9px 0 8px; gap: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb .t { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb .n { font-size: 13px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-sb .s { position: static; margin-top: 3px; height: 10px; font-size: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-stage { padding-top: 20px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-where { font-size: 10px; letter-spacing: .06em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-nav { gap: 8px; padding: 8px 0 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-nav .q-btn { padding: 11px 13px; font-size: 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tl { --lw: 0px; --rw: 0px; padding-bottom: 6px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tlb { grid-template-columns: minmax(0, 1fr); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-side, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-corner, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tkn { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-row, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk { grid-template-columns: minmax(0, 1fr); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-ruler { height: 22px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-stop { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tracks { gap: 2px; margin-top: 3px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk.ghost em { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tk, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tracks.dense .qb-tk { height: 8px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clipbar .kf { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-tflag .pen { height: 13px; font-size: 8px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font: 500 10px/1.3 var(--q-fm); letter-spacing: .06em; text-transform: uppercase; color: var(--q-mut); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-meta span:first-child { color: var(--q-acc); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bin { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip label, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip.on label { padding: 24px 12px 24px; min-height: 150px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip .q-nm { font-size: 21px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip .q-tags { display: none; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-clip .q-ck { right: 8px; top: 18px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vn { left: 12px; right: auto; bottom: 9px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-ig { padding: 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-fxgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scbar { height: 80px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-scstops span { font-size: 9px; letter-spacing: .04em; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-zone label { min-height: 92px; padding: 14px 34px 14px 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-zone .q-nm { font-size: 19px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edbody { grid-template-columns: 56px minmax(0, 1fr); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-gutin span { font-size: 9px; padding-right: 5px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drtrack { margin: 0 22px; height: 150px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt b { font-size: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drt small { font-size: 9px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-drf .pen { font-size: 11px; height: 26px; padding-right: 10px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer { padding: 16px 12px 14px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-btick { font-size: 10px; padding: 6px 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-vu { margin: 0 0 12px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "disp" "vu" "area" "uns"; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-mixer .q-bdisp { text-align: center; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bmeta span { padding: 8px 8px; font-size: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-bgrid { grid-template-columns: minmax(0, 1fr); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell, :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-cell:nth-child(2n) { border-right: 0; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-edl { font-size: 11px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-render { width: 100%; padding: 16px; } }   :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-main :is(input, select, textarea, button, [tabindex], .q-opt, .q-toggle) { scroll-margin-bottom: calc(var(--qb-foot, 200px) + 16px); scroll-margin-top: 16px; } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .qb-plab:empty { display: none; }       html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-opt label, .q-toggle, .q-btn, .q-q, .q-datebtn) { box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; border: 0; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-opt.on label, .q-toggle.on, .q-q.on) { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf; background: #a8a8a8; color: #000; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-field input, .q-field textarea, .q-field select) { background: #fff; color: #000; border: 0; box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn { background: #c0c0c0; color: #000; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bamt, html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sbt, html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-label { color: #000080; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-sb { background: #fff; box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff; border: 0; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-stag { background: #000080; color: #fff; border-radius: 0; border-color: #000080; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bfill { background: #000080; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bthumb { border-radius: 0; background: #c0c0c0; border: 2px outset #fff; box-shadow: none; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-track { border-radius: 0; } html[data-budget="0"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-track i { border-radius: 0; }      html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-opt label, .q-toggle, .q-q, .q-datebtn, .q-sb) { border: 2px outset #8888ff; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-opt.on label, .q-toggle.on, .q-q.on) { border-style: inset; background: #4444cc; color: #fff; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-q.on { color: #fff; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-field input, .q-field textarea, .q-field select) { background: #00a; border: 2px inset #8888ff; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-field label { color: #ff0; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn { background: #ff0; color: #000080; border: 3px outset #ffeeaa; font-family: Impact, sans-serif; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-stag { background: #4444cc; border-color: #8888ff; border-radius: 0; } html[data-budget="1"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bthumb { border-radius: 0; border-color: #000080; }     html[data-budget="2"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn { background: linear-gradient(#ffee88, #ffcc00 50%, #cc9900); border: 2px outset #ffdd44; border-radius: 0; color: #000; box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); } html[data-budget="2"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-opt label, .q-sb, .q-toggle) { box-shadow: 0 0 8px rgba(0, 100, 255, .3); } html[data-budget="2"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) :is(.q-field input, .q-field textarea, .q-field select) { box-shadow: 0 0 6px rgba(0, 102, 255, .4) inset; } html[data-budget="2"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bamt { text-shadow: 0 0 20px #f90; }     html[data-budget="3"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn { background: linear-gradient(#428bca, #2a6496); border: 1px solid #2a6496; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); } html[data-budget="3"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-bthumb { border-color: #fff; box-shadow: 0 0 0 1px #428bca, 0 1px 3px rgba(0, 0, 0, .3); }     html[data-budget="4"] :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-btn { border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }   @media (max-width: 560px) { :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .q-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) .sh-acts { margin-left: 0; } }  @media (prefers-reduced-motion: reduce) { :is(#s-quote, #s-sup1, #s-thanks, #s-sup-thanks, #s-contact-thanks) *, .q-ovl, .q-ovl *, .qb-ghost { animation: none !important; transition: none !important; } }    #s-sup1 .sup-main { padding-top: 22px; padding-bottom: 44px; } #s-sup1 .sup-bin { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } #s-sup1 .qb-clip label, #s-sup1 .qb-clip.on label { min-height: 138px; } #s-sup1 .qb-clip input { cursor: pointer; } #s-sup1 .sup-script { display: grid; gap: 14px; max-width: 820px; } #s-sup1 .qb-clap { margin-top: 4px; } #s-sup1 .qb-cell .inline-error { margin: 6px 0 0; } #s-sup1 .q-field input.field-error, #s-sup1 .q-field textarea.field-error { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); } #s-sup1 .sup-main > .captcha-wrap { margin-top: 22px; } #s-sup1 .sup-main > .qb-fine { margin-top: 8px; } #s-sup1 #sup-send-error { margin-top: 12px; padding: 9px 12px; border: 1px solid var(--danger); border-left-width: 6px; border-radius: var(--r); } #s-sup1 .qb-where { text-align: left; } #s-sup1 .qb-nav .qb-render { margin-left: auto; flex: none; } #s-sup1 .sup-ruler { display: flex; align-items: center; justify-content: flex-end; } #s-sup1 .sup-open { padding-right: 10px; font: 500 10px/1 var(--q-fm); letter-spacing: .12em; text-transform: uppercase; color: var(--q-mut2); } #s-sup1 .sup-cl { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 8px; font: 600 10px/1 var(--q-fb); letter-spacing: .05em; text-transform: uppercase; color: var(--q-acc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 760px) { #s-sup1 .sup-cl, #s-sup1 .sup-open { display: none; } #s-sup1 .qb-where { display: none; } #s-sup1 .qb-nav .qb-render { padding: 11px 14px; font-size: 12px; } #s-sup1 .sup-main { padding-top: 14px; } }    :is(#s-thanks, #s-sup-thanks, #s-contact-thanks) .tk-root { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; color: var(--q-ink); font: 15px/1.5 var(--q-fb); } .tk { width: 100%; max-width: 980px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 20px clamp(36px, 6vw, 80px); display: grid; gap: 22px; animation: qb-in .4s ease both; } .tk .tk-h { margin: 6px 0 4px; font-size: clamp(34px, 6vw, 72px); } .tk .tk-h:focus { outline: none; } .tk .tk-lead { margin: 0; max-width: 56ch; color: var(--q-mut); font-size: 17px; } .tk .tk-mock { margin: 0; font: 500 12px/1.4 var(--q-fm); letter-spacing: .06em; text-transform: uppercase; color: var(--q-mut2); } .tk .tk-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .tk .tk-back { text-decoration: none; display: inline-block; } .tk .tk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: tk; } .tk .tk-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 12px 14px; background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--r); } .tk .tk-steps li b { font: 400 26px/1 var(--q-fd); color: var(--q-acc); letter-spacing: .02em; } .tk .tk-steps li span { color: var(--q-ink); }   .tk-a .tk-clap { max-width: 880px; width: 100%; padding-top: 50px; } .tk-a .tk-clap .qb-arm { animation: tk-shut .5s cubic-bezier(.6, -.2, .7, 1) .15s both; } .tk-a .tk-clap .qb-board { animation: qb-hit .3s ease-out .55s both; } .tk-a .tk-bbody { padding: 22px 22px 24px; display: grid; gap: 6px; background: var(--q-bg2); } .tk-a .tk-bbody .tk-h { font-size: clamp(34px, 6vw, 68px); } @keyframes tk-shut { from { transform: rotate(-9deg); } to { transform: none; } } .tk-a .tk-cut { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; max-width: 880px; } .tk-a .tk-cutl { font: 500 10px/1 var(--q-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--q-mut2); } .tk-a .tk-lane { position: relative; height: 30px; background: var(--q-card); border: 1px solid var(--q-line2); border-radius: 2px; overflow: hidden; } .tk-a .tk-lane i { position: absolute; top: 2px; bottom: 2px; display: flex; align-items: center; padding: 0 8px; background: var(--q-acc); color: var(--q-acc-ink); border-radius: 1px; transform-origin: left center; animation: qb-lay .4s cubic-bezier(.3, 1.6, .5, 1) both; overflow: hidden; } .tk-a .tk-lane i span { font: 600 10px/1 var(--q-fb); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .tk-a .tk-steps { max-width: 880px; }  @media (max-width: 760px) { .tk { padding-left: 16px; padding-right: 16px; } .tk-a .tk-cut { grid-template-columns: minmax(0, 1fr); gap: 6px; } .tk-a .tk-bbody { padding: 16px 14px 18px; } } @media (prefers-reduced-motion: reduce) { .tk, .tk-a .tk-clap .qb-arm, .tk-a .tk-clap .qb-board, .tk-a .tk-lane i { animation: none; opacity: 1; } }    :root { --pe-bg:#0d0f0c; --pe-bg2:#050605; --pe-fg:#c2b7a2; --pe-hi:#e6dcc6; --pe-dim:#9e9379; --pe-line:#3a3d33; --pe-line2:#5b5846; --pe-cream:#c2b7a2; --pe-rec:#d8452b; --pe-acc:var(--accent); --pe-acc-ink:#0d0f0c; --pe-fd:'Anton','Impact','Arial Narrow',sans-serif; --pe-fb:'Archivo',system-ui,sans-serif; --pe-fm:'DM Mono',ui-monospace,Menlo,Consolas,monospace; --pe-pad:clamp(20px,4vw,56px); } html:is([data-budget="0"],[data-budget="1"],[data-budget="2"],[data-budget="3"],[data-budget="4"]) { --pe-bg:var(--bg); --pe-bg2:var(--bg-mid); --pe-fg:var(--q-ink); --pe-hi:var(--q-ink); --pe-dim:var(--q-mut); --pe-line:var(--q-line); --pe-line2:var(--q-line2); --pe-cream:var(--q-card); --pe-rec:#d8452b; --pe-acc:var(--q-acc); --pe-acc-ink:var(--q-acc-ink); --pe-fd:var(--q-fd); --pe-fb:var(--q-fb); --pe-fm:var(--q-fm); } :is(#s-entry, #s-work-a, #s-work-b, #s-statement, #s-footer) { padding:0; background:var(--pe-bg); color:var(--pe-fg); font-family:var(--pe-fb); } :is(#s-entry, #s-work-a, #s-work-b, #s-statement, #s-footer) button { font-family:inherit; } .pe-mono { font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; } .pe-vh { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }   #s-entry[data-variant="e1"] .v-e4, #s-entry[data-variant="e4"] .v-e1 { display:none; } #s-entry .ent { flex:1; display:flex; flex-direction:column; min-height:calc(100svh - var(--hdr) - var(--ftr)); } #s-entry .ent-head { display:flex; justify-content:space-between; gap:16px; padding:clamp(24px,4vw,48px) var(--pe-pad) clamp(16px,2.4vw,28px); font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-dim); } #s-entry .entry-cards { margin:0; display:flex; } #s-entry .entry-card { appearance:none; margin:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; transition:background .2s, color .2s, border-color .2s; } #s-entry .entry-card:focus-visible { outline:2px solid var(--pe-hi); outline-offset:-6px; } #s-entry .ent-idx { font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-dim); } #s-entry .ent-body { display:block; } #s-entry .ent-t { display:block; font-family:var(--pe-fd); font-weight:400; text-transform:uppercase; color:var(--pe-hi); } #s-entry .ent-cta { display:block; font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-dim); } #s-entry .ent-d { color:var(--pe-dim); } #s-entry .ent-arrow { font-style:normal; }  #s-entry .entry-card:is(:hover, :focus-visible, .active), #s-entry .entry-cards:not(:hover):not(:focus-within):not(:has(.active)) #card-new { background:var(--pe-acc); color:var(--pe-acc-ink); border-color:var(--pe-acc); } #s-entry .entry-card:is(:hover, :focus-visible, .active) :is(.ent-idx, .ent-t, .ent-cta, .ent-d), #s-entry .entry-cards:not(:hover):not(:focus-within):not(:has(.active)) #card-new :is(.ent-idx, .ent-t, .ent-cta, .ent-d) { color:var(--pe-acc-ink); }   #s-entry[data-variant="e1"] .ent-title, #s-entry[data-variant="e1"] .ent-sub, #s-entry[data-variant="e1"] .ent-d { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } #s-entry[data-variant="e1"] .entry-cards { flex:1; flex-direction:row; } #s-entry[data-variant="e1"] .entry-card { flex:1 1 0; min-width:0; padding:clamp(20px,2.4vw,32px) clamp(20px,2.8vw,40px) clamp(24px,3.4vw,48px); border-left:1px solid var(--pe-line); } #s-entry[data-variant="e1"] .entry-card:first-child { border-left:0; } #s-entry[data-variant="e1"] .ent-t { font-size:clamp(44px,8.6vw,124px); line-height:.92; } #s-entry[data-variant="e1"] .ent-cta { margin-top:20px; } #s-entry[data-variant="e1"] .ent-arrow { display:none; }   #s-entry[data-variant="e4"] .ent { padding-bottom:clamp(32px,5vw,64px); } #s-entry[data-variant="e4"] .ent-title { margin:clamp(8px,1.6vw,24px) var(--pe-pad) 0; font:400 clamp(48px,7.2vw,104px)/.92 var(--pe-fd); text-transform:uppercase; color:var(--pe-hi); } #s-entry[data-variant="e4"] .ent-sub { margin:16px var(--pe-pad) clamp(20px,3vw,36px); max-width:480px; font-size:18px; line-height:1.45; color:var(--pe-fg); } #s-entry[data-variant="e4"] .entry-cards { flex-direction:column; align-items:flex-start; gap:14px; padding:0 var(--pe-pad); } #s-entry[data-variant="e4"] .entry-card { width:min(100%,640px); gap:clamp(18px,2.4vw,30px); padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px); border:1px solid var(--pe-line); } #s-entry[data-variant="e4"] .ent-t { font-size:clamp(38px,4.8vw,64px); line-height:1; } #s-entry[data-variant="e4"] .ent-d { display:block; margin-top:8px; font-size:17px; line-height:1.4; } #s-entry[data-variant="e4"] .ent-cta { margin-top:0; font-size:14px; letter-spacing:.1em; color:var(--pe-hi); }   .work-block { position:relative; min-height:calc(100svh - var(--hdr) - var(--ftr)); overflow:hidden; } .work-block .wb-frame { background:#000; overflow:hidden; } .work-block .work-block-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.85); } .work-block .wb-meta { display:flex; justify-content:space-between; gap:16px; font:500 13px/1.5 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; } .work-block .work-block-title { margin:0; font-family:var(--pe-fd); font-weight:400; line-height:.92; text-transform:uppercase; } .work-block .work-block-sub { margin:20px 0 0; font:500 13px/1.6 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; } .work-block[data-variant="w4"] .wb-hud, .work-block[data-variant="w3"] .wb-cap { display:none; } .work-block[data-variant="w3"] .wb-hud .tc { display:none; } .work-block .wb-cap { position:absolute; bottom:22px; font:500 13px/1 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-hi); z-index:1; }   .work-block[data-variant="w4"] { display:flex; } .work-block[data-variant="w4"] .work-block-content { flex:0 0 50%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:clamp(24px,3.4vw,48px) var(--pe-pad); text-align:left; background:var(--pe-acc); color:var(--pe-acc-ink); } #s-work-b[data-variant="w4"] { justify-content:flex-end; } #s-work-b[data-variant="w4"] .work-block-content { background:var(--pe-cream); color:#0d0f0c; } .work-block[data-variant="w4"] .wb-frame { position:absolute; top:0; bottom:0; right:0; width:50%; } #s-work-b[data-variant="w4"] .wb-frame { right:auto; left:0; } .work-block[data-variant="w4"] .work-block-title { font-size:clamp(38px,min(4.8vw,8svh),72px); } .work-block[data-variant="w4"] .wb-cap { right:28px; } #s-work-b[data-variant="w4"] .wb-cap { right:auto; left:28px; }   #s-work-a[data-variant="w3"], #s-work-b[data-variant="w3"] { display:flex; gap:clamp(24px,3.4vw,48px); padding:clamp(24px,3.4vw,48px) var(--pe-pad); box-sizing:border-box; border-bottom:1px solid var(--pe-line); } .work-block[data-variant="w3"] .work-block-content { flex:0 0 clamp(280px,30.5vw,440px); display:flex; flex-direction:column; justify-content:space-between; gap:32px; text-align:left; color:var(--pe-dim); } .work-block[data-variant="w3"] .work-block-title { font-size:clamp(36px,4.6vw,68px); color:var(--pe-hi); } .work-block[data-variant="w3"] .wb-hi { color:var(--pe-acc); } #s-work-b[data-variant="w3"] .wb-hi { text-shadow: 0 -10px 13px #000; } .work-block .wb-t3 { display:none; } .work-block[data-variant="w3"] .wb-t3 { display:inline; } .work-block[data-variant="w3"] .wb-t4 { display:none; } .work-block[data-variant="w3"] .work-block-sub { color:var(--pe-dim); } .work-block[data-variant="w3"] .wb-frame { position:relative; flex:1; min-width:0; min-height:300px; } #s-work-b[data-variant="w3"] .wb-frame { order:-1; } .work-block .wb-hud { position:absolute; inset:0; color:var(--pe-hi); font:500 13px/1 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; pointer-events:none; } .work-block .wb-hud i { position:absolute; width:28px; height:28px; border:0 solid var(--pe-hi); } .work-block .wb-hud .c1 { top:18px; left:18px; border-top-width:2px; border-left-width:2px; } .work-block .wb-hud .c2 { top:18px; right:18px; border-top-width:2px; border-right-width:2px; } .work-block .wb-hud .c3 { bottom:18px; left:18px; border-bottom-width:2px; border-left-width:2px; } .work-block .wb-hud .c4 { bottom:18px; right:18px; border-bottom-width:2px; border-right-width:2px; } .work-block .wb-hud span { position:absolute; } .work-block .wb-hud .rec { top:30px; left:64px; display:flex; align-items:center; gap:10px; } .work-block .wb-hud .rec::before { content:''; width:10px; height:10px; border-radius:50%; background:var(--pe-rec); } .work-block .wb-hud .tc { top:30px; right:64px; } .work-block .wb-hud .raw { bottom:30px; left:64px; } .work-block .wb-hud .tag { bottom:30px; right:64px; color:var(--pe-acc); }   #s-statement { padding:clamp(24px,3.4vw,48px) var(--pe-pad) clamp(32px,4vw,56px); background:var(--pe-acc); color:var(--pe-acc-ink); text-align:left; } #s-statement .stm-head { display:flex; justify-content:space-between; gap:16px; font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; } #s-statement .stm-title { flex:1; display:flex; flex-direction:column; justify-content:center; margin:0; padding:clamp(20px,3vw,48px) 0; font:400 clamp(56px,min(12vw,13svh),180px)/.88 var(--pe-fd); text-transform:uppercase; } #s-statement .stm-title span { display:block; } #s-statement .stm-cols { border-top:3px solid currentColor; padding-top:32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px clamp(24px,3.9vw,56px); } #s-statement .stm-cols h3 { margin:0 0 16px; font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; } #s-statement .stm-cols p { margin:0; font-size:clamp(17px,1.5vw,21px); line-height:1.4; } #s-statement .stm-cols b { font-weight:600; } #s-statement .stm-cols a { color:inherit; text-decoration:underline; text-underline-offset:3px; }   #s-footer[data-variant="f4"] .v-f1, #s-footer[data-variant="f1"] .v-f4 { display:none; } #s-footer .ft { flex:1; display:flex; flex-direction:column; padding:clamp(24px,4vw,48px) var(--pe-pad) 0; } #s-footer .ft-head { display:flex; justify-content:space-between; gap:16px; font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-dim); } #s-footer .ft-main { flex:1; display:flex; gap:clamp(32px,6.7vw,96px); margin-top:clamp(20px,2.5vw,36px); } #s-footer .ft-info { flex:1 1 0; min-width:0; display:flex; flex-direction:column; } #s-footer .ft-form { flex:1 1 0; min-width:40%; display:flex; flex-direction:column; } #s-footer .ft-mark { font-family:var(--pe-fd); font-weight:400; text-transform:uppercase; color:var(--pe-hi); line-height:.95; } #s-footer .ft-tag { margin:0; font-size:19px; line-height:1.45; color:var(--pe-fg); max-width:520px; } #s-footer .footer-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } #s-footer .footer-links a { color:inherit; text-decoration:none; letter-spacing:normal; text-transform:none; font-size:inherit; transition:color .15s; } #s-footer .ft-form-h { margin:0 0 20px; font:400 clamp(32px,3.6vw,52px)/1 var(--pe-fd); text-transform:uppercase; color:var(--pe-hi); } #s-footer .field { margin:0 0 14px; } #s-footer .field input, #s-footer .field textarea { background:transparent; color:var(--pe-hi); font:400 16px/1.3 var(--pe-fb); border-radius:0; } #s-footer .field label { font:500 12px/1 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-dim); } #s-footer .field input:focus ~ label, #s-footer .field input:not(:placeholder-shown) ~ label, #s-footer .field textarea:focus ~ label, #s-footer .field textarea:not(:placeholder-shown) ~ label { color:var(--pe-acc); letter-spacing:.12em; } #s-footer .field input:focus, #s-footer .field textarea:focus { border-color:var(--pe-acc); box-shadow:none; } #s-footer .field-row { gap:16px; } #s-footer .captcha-wrap { margin:4px 0 16px; } #s-footer #contactSendBtn { align-self:flex-start; border-radius:0; padding:20px 36px; background:var(--pe-acc); color:var(--pe-acc-ink); font:500 14px/1 var(--pe-fm); letter-spacing:.1em; text-transform:uppercase; } #s-footer #contactSendBtn:disabled { opacity:.4; } #s-footer .footer-bottom { margin:clamp(20px,2.5vw,36px) 0 0; padding:22px 0; border-top:1px solid var(--pe-line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font:500 12px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-dim); } #s-footer .footer-copy { font:inherit; color:inherit; }   #s-footer[data-variant="f1"] .ft-label { display:contents; } #s-footer[data-variant="f1"] .ft-label-top, #s-footer[data-variant="f1"] .ft-barcode { display:none; } #s-footer[data-variant="f1"] .ft-mark { order:1; font-size:clamp(52px,6.7vw,96px); } #s-footer[data-variant="f1"] .ft-tag { order:2; margin:16px 0 clamp(20px,2.5vw,36px); } #s-footer[data-variant="f1"] .footer-links { order:3; border-top:1px solid var(--pe-line); } #s-footer[data-variant="f1"] .footer-links li { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--pe-line); } #s-footer[data-variant="f1"] .ft-role { font:500 12px/1 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; color:var(--pe-dim); } #s-footer[data-variant="f1"] .footer-links a { font:400 clamp(22px,2.4vw,34px)/1.1 var(--pe-fd); letter-spacing:.01em; text-transform:uppercase; color:var(--pe-hi); } #s-footer[data-variant="f1"] .footer-links .ft-mail a { color:var(--pe-acc); } #s-footer[data-variant="f1"] .field input, #s-footer[data-variant="f1"] .field textarea { border:0; border-bottom:1px solid var(--pe-line2); padding:24px 0 8px; } #s-footer[data-variant="f1"] .field label { left:0; } #s-footer[data-variant="f1"] .ft-form-h { font-size:clamp(30px,3vw,44px); }   #s-footer[data-variant="f4"] .ft-info { flex:0 1 640px; justify-content:space-between; } #s-footer[data-variant="f4"] .ft-label { background:var(--pe-cream); color:#0d0f0c; padding:clamp(20px,2.5vw,32px) clamp(20px,2.5vw,36px) clamp(22px,2.5vw,36px); transform:rotate(-1.4deg); transform-origin:left top; } #s-footer[data-variant="f4"] .ft-label-top { display:flex; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:2px solid #0d0f0c; font:500 13px/1.4 var(--pe-fm); letter-spacing:.12em; text-transform:uppercase; } #s-footer[data-variant="f4"] .ft-mark { margin-top:18px; font-size:clamp(44px,6.6vw,96px); color:#0d0f0c; } #s-footer[data-variant="f4"] .footer-links { margin-top:20px; flex-direction:row; flex-wrap:wrap; gap:6px 28px; font:500 17px/1.4 var(--pe-fm); letter-spacing:.08em; text-transform:uppercase; } #s-footer[data-variant="f4"] .footer-links li { flex:0 0 auto; } #s-footer[data-variant="f4"] .footer-links .ft-wide { flex-basis:100%; } #s-footer[data-variant="f4"] .ft-role { display:none; } #s-footer[data-variant="f4"] .ft-barcode { height:30px; margin-top:22px; background:repeating-linear-gradient(90deg,#0d0f0c 0,#0d0f0c 3px,transparent 3px,transparent 7px,#0d0f0c 7px,#0d0f0c 8px,transparent 8px,transparent 13px,#0d0f0c 13px,#0d0f0c 17px,transparent 17px,transparent 20px); } #s-footer[data-variant="f4"] .ft-tag { margin-top:clamp(20px,2.5vw,36px); padding-bottom:20px; } #s-footer[data-variant="f4"] .field input, #s-footer[data-variant="f4"] .field textarea { border:1px solid var(--pe-line2); padding:26px 14px 8px; } #s-footer[data-variant="f4"] .field label { left:14px; }   html:is([data-budget="5"],[data-budget="6"],[data-budget="7"]):has(#s-footer[data-variant="f1"]) .footer-bar { background:var(--pe-bg2); border-top:1px solid var(--pe-line); backdrop-filter:none; -webkit-backdrop-filter:none; } html:is([data-budget="5"],[data-budget="6"],[data-budget="7"]):has(#s-footer[data-variant="f1"]) .footer-bar-left { color:var(--pe-hi); font:500 13px/1 var(--pe-fm); letter-spacing:.1em; } html:is([data-budget="5"],[data-budget="6"],[data-budget="7"]):has(#s-footer[data-variant="f1"]) .fbar-link { color:var(--pe-dim); font:500 13px/1 var(--pe-fm); letter-spacing:.1em; } html:is([data-budget="5"],[data-budget="6"],[data-budget="7"]):has(#s-footer[data-variant="f1"]) .fbar-email { color:var(--pe-acc); font:500 13px/1 var(--pe-fm); letter-spacing:.1em; text-transform:uppercase; } html:is([data-budget="5"],[data-budget="6"],[data-budget="7"]):has(#s-footer[data-variant="f4"]) .footer-bar { background:var(--pe-cream); border-top:0; backdrop-filter:none; -webkit-backdrop-filter:none; } html:is([data-budget="5"],[data-budget="6"],[data-budget="7"]):has(#s-footer[data-variant="f4"]) :is(.footer-bar-left, .fbar-link, .fbar-email) { color:#0d0f0c; font:500 13px/1 var(--pe-fm); letter-spacing:.1em; text-transform:uppercase; } html:is([data-budget="5"],[data-budget="6"],[data-budget="7"]):has(#s-footer[data-variant="f4"]) .fbar-link:hover { color:#0d0f0c; text-decoration:underline; }   @media (max-width:768px) { #s-entry[data-variant="e1"] .entry-cards { flex-direction:column; } #s-entry[data-variant="e1"] .entry-card { min-height:26svh; border-left:0; border-top:1px solid var(--pe-line); } #s-entry[data-variant="e1"] .entry-card:first-child { border-top:0; } #s-entry[data-variant="e1"] .ent-t { font-size:clamp(44px,15vw,84px); } .work-block[data-variant="w4"], .work-block[data-variant="w3"] { flex-direction:column; min-height:0; } .work-block[data-variant="w4"] .wb-frame { position:relative; width:100%; height:42svh; order:-1; right:auto; left:auto; } .work-block[data-variant="w4"] .work-block-content { flex:1 1 auto; } .work-block[data-variant="w4"] .work-block-title { font-size:clamp(44px,13vw,84px); } .work-block[data-variant="w3"] .work-block-content { flex:1 1 auto; } .work-block[data-variant="w3"] .wb-frame { order:-1; flex:0 0 auto; height:42svh; min-height:0; } .work-block[data-variant="w3"] .work-block-title { font-size:clamp(40px,12vw,72px); } #s-statement .stm-cols { grid-template-columns:1fr; } #s-footer .ft-main { flex-direction:column; } #s-footer[data-variant="f4"] .ft-label { transform:none; } #s-footer[data-variant="f4"] .ft-info { flex:0 0 auto; } #s-footer[data-variant="f1"] .footer-links a { font-size:clamp(20px,6.4vw,30px); } } @media (prefers-reduced-motion:reduce) { #s-entry .entry-card { transition:none; } }   @media (max-width:600px) { .footer-bar-left { display:none; } .footer-bar { justify-content:center; } .footer-bar-right { gap:10px; white-space:nowrap; } .footer-bar .footer-bar-right :is(.fbar-link, .fbar-email) { white-space:nowrap; font-size:10.5px !important; letter-spacing:.03em !important; } }    #card-browse { position:relative; overflow:hidden; isolation:isolate; } #card-browse .ent-vid, #card-browse .ent-scrim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; } #card-browse .ent-vid { object-fit:cover; object-position:44% 40%; opacity:0; transition:opacity .35s ease; } #card-browse .ent-scrim { background:linear-gradient(180deg, rgba(8,10,8,.42) 0%, rgba(8,10,8,.62) 100%); opacity:0; transition:opacity .35s ease; } #card-browse[data-vid]:is([data-play], :hover, :focus-visible) .ent-vid, #card-browse[data-vid]:is([data-play], :hover, :focus-visible) .ent-scrim { opacity:1; } #s-entry .entry-card#card-browse[data-vid]:is([data-play], :hover, :focus-visible) { background:transparent; border-color:var(--pe-line); color:var(--pe-hi); } #s-entry .entry-card#card-browse[data-vid]:is([data-play], :hover, :focus-visible) :is(.ent-idx, .ent-t, .ent-cta, .ent-d) { color:var(--pe-hi); }  #s-entry .entry-card#card-browse.active:not(:hover):not(:focus-visible):not([data-play]) { background:transparent; border-color:var(--pe-line); color:var(--pe-fg); box-shadow:inset 0 0 0 2px var(--pe-acc); } #s-entry .entry-card#card-browse.active:not(:hover):not(:focus-visible):not([data-play]) .ent-idx, #s-entry .entry-card#card-browse.active:not(:hover):not(:focus-visible):not([data-play]) .ent-cta, #s-entry .entry-card#card-browse.active:not(:hover):not(:focus-visible):not([data-play]) .ent-d { color:var(--pe-dim); } #s-entry .entry-card#card-browse.active:not(:hover):not(:focus-visible):not([data-play]) .ent-t { color:var(--pe-hi); } @media (prefers-reduced-motion:reduce) { #card-browse .ent-vid, #card-browse .ent-scrim { transition:none; } }    .fx-split-go { animation:fx-rgb .46s steps(1,end) 1 both; } @keyframes fx-rgb { 0%   { text-shadow:-.052em 0 0 rgba(255,32,80,.8), .052em 0 0 rgba(0,225,255,.8); } 20%  { text-shadow: .034em .006em 0 rgba(255,32,80,.75), -.034em -.006em 0 rgba(0,225,255,.75); } 42%  { text-shadow:-.022em 0 0 rgba(255,32,80,.65), .022em 0 0 rgba(0,225,255,.65); } 64%  { text-shadow: .012em 0 0 rgba(255,32,80,.5), -.012em 0 0 rgba(0,225,255,.5); } 82%  { text-shadow:-.006em 0 0 rgba(255,32,80,.35), .006em 0 0 rgba(0,225,255,.35); } 100% { text-shadow:0 0 0 rgba(255,32,80,0), 0 0 0 rgba(0,225,255,0); } } html[data-fx-split="off"] .fx-split:not(.hero-title), html[data-fx-split-hero="off"] .hero-title.fx-split { animation:none !important; } @media (prefers-reduced-motion:reduce) { .fx-split-go { animation:none !important; } }   .fx-host { isolation:isolate; } .fx-grain { display:none; position:absolute; inset:0; z-index:6; pointer-events:none; opacity:var(--fxg,.16); background:url(media/grain.png) var(--gox,0) var(--goy,0) / 1024px 1024px repeat; -webkit-mask-image:radial-gradient(ellipse 58% 62% at var(--b1x,20%) var(--b1y,80%), #000 0%, transparent 100%), radial-gradient(ellipse 42% 48% at var(--b2x,85%) var(--b2y,15%), #000 0%, transparent 100%), linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)); mask-image:radial-gradient(ellipse 58% 62% at var(--b1x,20%) var(--b1y,80%), #000 0%, transparent 100%), radial-gradient(ellipse 42% 48% at var(--b2x,85%) var(--b2y,15%), #000 0%, transparent 100%), linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)); animation:fx-drift .96s steps(1,end) infinite; animation-play-state:paused; } .fx-host.fx-live > .fx-grain { animation-play-state:running; } @keyframes fx-drift { 0%   { background-position:var(--gox,0) var(--goy,0); } 12%  { background-position:calc(var(--gox,0px) - 30px) calc(var(--goy,0px) + 20px); } 25%  { background-position:calc(var(--gox,0px) + 20px) calc(var(--goy,0px) - 30px); } 37%  { background-position:calc(var(--gox,0px) - 20px) calc(var(--goy,0px) - 10px); } 50%  { background-position:calc(var(--gox,0px) + 30px) calc(var(--goy,0px) + 30px); } 62%  { background-position:calc(var(--gox,0px) - 10px) calc(var(--goy,0px) + 30px); } 75%  { background-position:calc(var(--gox,0px) + 20px) calc(var(--goy,0px) + 10px); } 87%  { background-position:calc(var(--gox,0px) - 30px) calc(var(--goy,0px) - 20px); } } } @media (min-resolution:2dppx) { .fx-grain { background-size:512px 512px; } } @media (prefers-reduced-motion:reduce) { .fx-grain { animation:none; } }  html[data-fx-grain="light"]  { --fxg:.16; } html[data-fx-grain="medium"] { --fxg:.30; } html[data-fx-grain="heavy"]  { --fxg:.50; } html:is([data-fx-grain="light"],[data-fx-grain="medium"],[data-fx-grain="heavy"]) .fx-grain[data-k="solid"] { display:block; } html:is([data-fx-grain="light"],[data-fx-grain="medium"],[data-fx-grain="heavy"])[data-fx-grain-video="on"] .fx-grain[data-k="video"] { display:block; opacity:calc(var(--fxg,.16) * .8); } html:is([data-fx-grain="light"],[data-fx-grain="medium"],[data-fx-grain="heavy"])[data-fx-grain-dark="on"] .fx-grain[data-k="dark"] { display:block; }  #s-footer[data-variant="f1"] .ft-label > .fx-grain { display:none !important; }  html:not([data-fx-grain-dark="on"]) .work-block[data-variant="w3"] .work-block-content > .fx-grain { display:none !important; }  html:not([data-fx-grain-dark="on"]) #s-entry .entry-cards:is(:hover,:focus-within,:has(.active)) #card-new:not(:hover):not(:focus-visible) > .fx-grain { display:none !important; } html:not([data-fx-grain-dark="on"]):has(#s-footer[data-variant="f1"]) .footer-bar > .fx-grain { display:none !important; }  #s-made[data-cord-dark="a"]:not([data-lit="1"]) .m-bead:not(.drag), #s-made[data-cord-dark="b"]:not([data-lit="1"]) .m-bead:not(.drag) { cursor:default; }   #contactSendBtn.shake { animation: sf-shake .45s cubic-bezier(.36, .07, .19, .97) both; } @keyframes sf-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } } @media (prefers-reduced-motion: reduce) { #contactSendBtn.shake { animation: none; } } #contactSendError { margin-top: 14px; max-width: 46ch; }.qb-senderr.show[role="alert"] { background: #2d0808; color: #fb2d2d; padding: 2px 6px; border-radius: 2px; }
 .body hero { font-family: 'Archivo', sans-serif; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.8; color: #f0f0f0; max-width: 46ch; margin-bottom: 36px; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); } .hero-actions .btn:hover { transform: translateY(-2px); } #s-hero .hero-body mark{ background:var(--accent); color:#080808; padding:.05em .3em; font-weight:600; text-shadow:none; -webkit-box-decoration-break:clone; box-decoration-break:clone; } #s-hero .hero-body{ font-family:'Archivo',sans-serif; line-height:1.8; color:#f0f0f0; max-width:48ch; margin-bottom:36px; text-shadow:0 1px 12px rgba(0,0,0,.6); } .hero-actions .btn-ghost { background: #fff; border:none; color: #211; }
 .scroll-wrap{scrollbar-width:none}
.scroll-wrap::-webkit-scrollbar{display:none}
.sx-rail{position:fixed;top:var(--hdr);bottom:var(--ftr);right:0;width:26px;z-index:60;cursor:pointer;touch-action:none;user-select:none}
.sx-line{position:absolute;right:11px;top:0;bottom:0;width:1px;background:#2a2a2a}
.sx-tick{position:absolute;right:6px;width:11px;height:1px;background:#777;transition:width .15s,background .15s}
.sx-tick.on{width:20px;height:2px;background:#CAFF00}
.sx-thumb{position:absolute;right:9px;width:5px;min-height:28px;background:#CAFF00}
.sx-label{position:absolute;right:32px;transform:translateY(-50%);padding:6px 9px;background:#080808;border:1px solid #CAFF00;color:#CAFF00;font:500 11px/1 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.sx-rail.live .sx-label{opacity:1}
@media (pointer:coarse){.sx-rail{display:none}}
@media (prefers-reduced-motion:reduce){.sx-tick,.sx-label{transition:none}}
html[data-flow] .sx-rail{opacity:.25;transition:opacity .3s}
html[data-flow] .sx-rail.live{opacity:.7}
html[data-flow] .sx-rail:hover{opacity:1}
@media (prefers-reduced-motion:reduce){html[data-flow] .sx-rail{transition:none}}
 /** Remember.. The true sign of intelligence is not knowledge but imagination. // White **/