/* ==== Wurks · Studio
   Paper and ink, with orange as the only accent and violet kept for small details. Type is Geist
   with Geist Mono for labels. Product shots (client sites, the dashboard, the service screens) stay
   dark, like real app screenshots, so they pop off the paper. Spacing, type and corners use the
   scales defined in index.html (--s*, --t-*, --r-*). Loaded last, so it overrides the dark theme. */
html.studio{
  --paper:#F4F1EB;--paper-2:#ECE7DF;--card:#FFFFFF;--ink:#141016;--ink-2:#3A3440;--muted:#6B6470;
  --line:rgba(20,16,22,.12);--line-2:rgba(20,16,22,.07);--o:#E8561A;--o-2:#C94512;--v:#6D3FD9;
  --display:"Geist",system-ui,sans-serif;--body:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  --shadow:0 1px 2px rgba(20,16,22,.06),0 24px 48px -28px rgba(20,16,22,.28);
  color-scheme:light}
.studio body{background:var(--paper)!important;color:var(--ink)!important;font-family:var(--body)}
.studio body::before,.studio html::after,.studio .glassband,.studio .liquid{display:none!important}
.studio html::after{display:none!important}
html.studio::after{display:none!important}
/* a faint 12-column grid behind everything, the studio's measuring sheet */
.studio body::after{content:""!important;display:block!important;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1!important;animation:none!important;
  background:repeating-linear-gradient(90deg,transparent 0 calc((min(1140px,100vw - 32px) + 16px)/12 - 1px),rgba(20,16,22,.035) calc((min(1140px,100vw - 32px) + 16px)/12 - 1px) calc((min(1140px,100vw - 32px) + 16px)/12)) calc(50% - min(570px,50vw - 16px)) 0/min(1156px,100vw - 16px) 100% no-repeat!important}

/* type */
.studio h1,.studio h2,.studio h3,.studio h4{font-family:var(--display);font-weight:600;letter-spacing:-.045em;color:var(--ink);text-shadow:none!important}
.studio main h2 em,.studio .wa em,.studio .wiz-step h3 em,.studio .wiz-done h3 em,.studio .hero h1 mark,.studio .score b{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--o)!important}
.studio .kl{color:inherit}
.studio .kg{background:none!important;-webkit-text-fill-color:var(--o)!important;color:var(--o)!important}
.studio p,.studio li,.studio span,.studio small,.studio summary{text-shadow:none!important}
.studio .label,.studio main p.label{font:500 12px/1 var(--mono)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--muted)!important;gap:12px!important}
.studio main p.label::before,.studio .hero .label::before{width:7px;height:7px;border-radius:50%;background:var(--o);box-shadow:none;transform:none}
.studio .note{color:var(--o-2);text-shadow:none}
.studio .note-arrow path{stroke:var(--o-2)}
.studio .tier.pop::before{color:var(--o-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M48 4 C 40 22, 30 34, 10 44 M 10 31 L 9 45 L 22 46' fill='none' stroke='%23C94512' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* header: paper glass */
.studio header{top:0!important;margin:0!important;width:100%!important;border-radius:0!important;
  background:rgba(244,241,235,.82)!important;-webkit-backdrop-filter:blur(14px) saturate(1.4)!important;backdrop-filter:blur(14px) saturate(1.4)!important;
  border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.studio header::before{display:none}
.studio main{margin-top:0}
.studio header .bar{padding-block:0!important;height:72px;padding-inline:max(16px,env(safe-area-inset-left,0px))!important}
.studio .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;letter-spacing:-.02em;font-size:18px}
.studio .logo-img{height:22px!important;min-width:0!important;padding:7px 8px;box-sizing:content-box;background:var(--ink);border-radius:9px}
.studio header nav{align-items:center;gap:28px}
.studio header nav a{color:var(--ink)!important;font-weight:500;font-size:15px}
.studio .nav-cta{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper)!important;text-decoration:none}
.studio .nav-cta i{width:7px;height:7px;border-radius:50%;background:var(--o)}

/* buttons: ink pills, the primary carries the orange point */
.studio .btn{min-height:48px;padding:0 22px!important;border-radius:999px!important;font:500 16px/1 var(--body)!important;color:var(--ink)!important;letter-spacing:-.01em}
.studio .btn::before{border-radius:999px!important;background:transparent!important;border:1px solid var(--ink)!important;box-shadow:none!important}
.studio .btn.primary{color:var(--paper)!important;padding-left:40px!important}
.studio .btn.primary::before{background:var(--ink)!important;border-color:var(--ink)!important}
.studio .btn.primary::after{content:"";position:absolute;left:20px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--o)}
.studio .btn:hover::before{transform:none!important}
.studio .btn:not(.primary):hover::before{background:var(--ink)!important}
.studio .btn:not(.primary):hover{color:var(--paper)!important}
.studio .btn.link{color:var(--muted)!important}
.studio .visit,.studio .g-link,.studio .for a{color:var(--ink)!important}
.studio .visit::before,.studio .g-link::before,.studio .for a::before{border-radius:999px!important;border:1px solid var(--line)!important;background:transparent!important}
.studio .visit:hover,.studio .g-link:hover{color:var(--paper)!important}
.studio .visit:hover::before,.studio .g-link:hover::before{background:var(--ink)!important;border-color:var(--ink)!important}
.studio .case-copy .tags span,.studio .concept-card .tags span,.studio .meta span,.studio .kind{font:500 11.5px/1 var(--mono)!important;letter-spacing:.06em;color:var(--ink-2)!important}
.studio .case-copy .tags span::before,.studio .concept-card .tags span::before,.studio .meta span::before{border:1px solid var(--line)!important;background:transparent!important;border-radius:999px!important}

/* hero */
.studio .hero-stage{background:none!important;padding:0}
.studio .hero-stage::before,.studio .hero-stage::after{display:none!important}
.studio .sh{padding-block:var(--s8) var(--s7)}
.studio .sh-meta{display:flex;justify-content:space-between;gap:16px;margin:0;padding-bottom:var(--s5);border-bottom:1px solid var(--line);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.studio .sh h1{margin:var(--s6) 0 0!important;font-size:clamp(48px,8.6vw,128px)!important;line-height:.93!important;letter-spacing:-.058em!important;max-width:12ch}
.studio .sh h1 .dot{color:var(--o)}
.studio .sh-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end;margin-top:var(--s6)}
.studio .sh .lede{margin:0!important;max-width:34ch;color:var(--ink-2)!important;font-size:var(--t-l)!important}
.studio .sh-act{display:grid;justify-items:end;gap:var(--s4)}
.studio .sh .ctas{margin:0!important}
.studio .proof{margin:0!important;color:var(--muted)!important}
.studio .proof b{color:var(--ink)}
.studio .stars{color:#E8A317!important}
.studio .sh-shot{position:relative;margin:var(--s7) 0 0;padding:0 7% 7% 0}
.studio .sh-browser{border-radius:var(--r-m);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 2px 4px rgba(20,16,22,.05),0 60px 100px -50px rgba(20,16,22,.45)}
.studio .sh-chrome{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-bottom:1px solid var(--line-2);background:#FAF8F5}
.studio .sh-chrome i{width:10px;height:10px;border-radius:50%;background:#DDD7CE}.studio .sh-chrome i:first-child{background:var(--o)}
.studio .sh-chrome span{margin:0 auto;padding:5px 14px;border-radius:999px;background:var(--paper-2);font:500 12px/1 var(--mono);color:var(--muted)}
.studio .sh-browser img{display:block;width:100%;height:auto}
.studio .sh-phone{position:absolute!important;right:0;bottom:0;width:22%!important;transform:rotate(3deg)}
.studio .sh-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--r-s);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
.studio .sh-chip.c2{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.studio .sh-chip.c2 i{width:7px;height:7px;border-radius:50%;background:var(--o)}
.studio .sh-chip.c1{left:-24px;top:22%}.studio .sh-chip.c2{right:14%;top:-22px}.studio .sh-chip.c3{left:8%;bottom:4%}
.studio .sh-shot figcaption{position:absolute;left:0;bottom:-8px;display:none}
@media (max-width:900px){
  .studio .sh-row{grid-template-columns:1fr}.studio .sh-act{justify-items:start}
  .studio .sh-meta span:last-child{display:none}
  .studio .sh-chip{font-size:13px;padding:9px 12px}.studio .sh-chip.c1{left:-6px}.studio .sh-chip.c3{display:none}.studio .sh-chip.c2{right:4%}
  .studio .sh-shot{padding:0 10% 14% 0}.studio .sh-phone{width:30%!important}
  .studio header nav a:not(.nav-cta){display:none}
}

/* surfaces: white cards with a hairline, no glass, no glow */
.studio .svc-tile,.studio .tier,.studio .b-card,.studio .fit-card,.studio .case,.studio .rev,.studio .val,.studio .wiz,.studio .addon,.studio .concept-card,.studio .limit,.studio .limit + .limit,.studio .tabs,.studio .panel,.studio .dash-board{
  background:var(--card)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;color:var(--ink)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.studio .svc-tile::after,.studio .tier::after,.studio .b-card::after,.studio .fit-card::after,.studio .case::after,.studio .rev::after,.studio .val::after,.studio .wiz::after,.studio .addon::after,.studio .concept-card::after,.studio .limit::after,.studio .dash-board::after,.studio .tabs::after,.studio .limits::after{display:none!important}
.studio .svc-tile p,.studio .fit-card p,.studio .limit p,.studio .case-copy p,.studio .tier .blurb,.studio .val-list span,.studio details p,.studio .step p,.studio .b-card ul,.studio .b-card .muted,.studio .concept-card p,.studio .dash-lede,.studio .val-lede,.studio main .svc-head>p,.studio .db-feed span,.studio .db-stat span,.studio .db-sub,.studio .db-ch,.studio .tier .price small,.studio .tier .price .from{color:var(--muted)!important}
.studio .tier li,.studio .tier .feat li,.studio .case-feats li,.studio .b-card li{color:var(--ink-2)!important}
.studio .limit-ic,.studio .cf-ic{background:var(--paper)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.studio .limit-ic svg,.studio .cf-ic svg{stroke:var(--ink)!important}
.studio .limits{background:none!important;border:0!important}
.studio .case-bar,.studio .case-feats li{background:var(--paper)!important;border-color:var(--line-2)!important}
.studio .cb-url{color:var(--ink)!important}
.studio .db-live{background:#E8F5EC!important;border-color:#BFE3CB!important;color:#1E7A43!important}
.studio .db-live i,.studio .db-live i::after{background:#1E9A50!important}
.studio .cb-dot,.studio .db-dot{background:var(--ink)!important}
.studio .case{background:var(--card)!important}
.studio .case-shots .dev-desk{border:1px solid var(--line);box-shadow:var(--shadow)}

/* service screens and the dashboard stay dark, like real app screenshots on paper */
.studio .svc-shot{background:#16131C!important;border:0!important}
.studio .svc-shot::before{display:none}
.studio .svc-tile .label{color:var(--o-2)!important}
.studio .svc-tile .go{color:var(--ink)!important;font-family:var(--mono)!important;font-weight:500!important;font-size:13px!important}
.studio .dash-board{background:#141118!important;border-color:#141118!important;color:#F4F1EE!important;box-shadow:0 2px 4px rgba(20,16,22,.08),0 60px 100px -50px rgba(20,16,22,.55)!important}
.studio .dash-board *{color:inherit}
.studio .dash-board .db-sub,.studio .dash-board .db-stat span,.studio .dash-board .db-ch,.studio .dash-board .db-feed span,.studio .dash-board time{color:#9C95A6!important}
.studio .dash-board .db-stat em.up{color:#7FD99A!important}
.studio .dash-board .db-dot{background:linear-gradient(160deg,#F5813F,#8B5CF6)!important}

/* sections: alternate paper and a slightly deeper paper; no dark bands, no blobs */
.studio main section::before,.studio main section::after{display:none!important}
.studio main section.reviews,.studio main section.process,.studio main section.faq{color:var(--ink)}
.studio main section.dash,.studio main section.reviews,.studio main section.care{position:relative;isolation:isolate}
.studio main section.dash::before,.studio main section.reviews::before,.studio main section.care::before{content:""!important;display:block!important;position:absolute;z-index:-1;inset:0 auto;left:50%;width:100vw;translate:-50% 0;background:var(--paper-2)!important;border-block:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;-webkit-mask:none!important;mask:none!important}
.studio main section.reviews{margin-block:0!important}
.studio main section.reviews .rev{background:#fff!important}
.studio main section.reviews .rev::before{color:rgba(232,86,26,.18)!important}
.studio main section.reviews .rev figcaption b{color:var(--ink)!important}
.studio main section.reviews .rev figcaption,.studio main section.reviews .rev figcaption span{color:var(--muted)!important}
.studio main section.reviews .rev blockquote{color:var(--ink)!important}
.studio .rev-score h2,.studio .process h2,.studio .faq>div:first-child h2{border-bottom:1px solid var(--line);padding-bottom:var(--s5)}
.studio .rev-score h2::after,.studio .process h2::after,.studio .faq>div:first-child h2::after{display:none}
.studio .score b{font-weight:600}

/* pricing */
.studio .tabs{padding:4px!important}
.studio .tabs button{color:var(--muted)!important}
.studio .tabs button[aria-selected="true"]{color:var(--paper)!important}
.studio .tabs button[aria-selected="true"]::before{background:var(--ink)!important;border-radius:999px!important}
.studio .tabs button::before{border-radius:999px!important}
.studio .tier .feat,.studio .tier .feat li{border-color:var(--line-2)!important}
.studio .tier .feat li::before{color:var(--o)!important}
.studio .tier .btn.add{color:var(--ink)!important}
.studio .tier .btn.add::before{background:transparent!important;border:1px solid var(--line)!important;border-radius:999px!important}
.studio .tier .btn.add:hover{color:var(--paper)!important}
.studio .tier .btn.add:hover::before{background:var(--ink)!important;border-color:var(--ink)!important}
.studio .tier.pop{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
.studio .tier.pop *{color:inherit}
.studio .tier.pop .blurb,.studio .tier.pop .price small,.studio .tier.pop .price .from{color:#A7A0B0!important}
.studio .tier.pop .feat li{color:#E9E4F0!important}
.studio .tier.pop .feat,.studio .tier.pop .feat li{border-color:rgba(255,255,255,.12)!important}
.studio .tier.pop .meta span{color:#E9E4F0!important}
.studio .tier.pop .meta span::before{border-color:rgba(255,255,255,.2)!important;background:transparent!important}
.studio .tier.pop .badge{color:var(--paper)!important}
.studio .tier.pop .badge::before{background:var(--o)!important}
.studio .tier.pop .btn.add{color:var(--ink)!important}
.studio .tier.pop .btn.add::before{background:var(--paper)!important;border-color:var(--paper)!important}
.studio .tier.picked{outline:2px solid var(--o)!important;outline-offset:3px}
.studio .addon b{color:var(--ink)}

/* care bento */
.studio .b-free{background:var(--o)!important;border-color:var(--o)!important;color:#fff!important}
.studio .b-free .muted,.studio .b-free *{color:#fff!important}
.studio .b-violet li::before{background:var(--v)!important}
.studio .b-card li::before{background:var(--o)}
.studio .h-live{color:#1E7A43!important}
.studio .h-grid,.studio .h-grid>div{background:var(--paper)!important;border-color:var(--line-2)!important}
.studio .h-grid span{color:var(--muted)!important}.studio .h-grid b{color:var(--ink)!important}
.studio .h-num b{color:var(--ink)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.studio .h-site b{color:var(--ink)!important}
.studio .h-bars i{background:var(--ink)!important;opacity:.85}.studio .h-bars i.dip{background:var(--o)!important}
.studio .b-price,.studio .b-big{color:inherit}

/* Val */
.studio .val-badge{background:var(--ink)!important;color:var(--paper)!important;box-shadow:none!important;border-radius:var(--r-m)!important;transform:none!important}
.studio .val-list li{background:var(--paper)!important;border:1px solid var(--line-2)!important}
.studio .val-list b{color:var(--ink)!important}
.studio .val-lede{color:var(--ink-2)!important}

/* work */
.studio .concept-card .cc-shot{border:1px solid var(--line-2)}
.studio .concepts-head p{color:var(--muted)}
.studio .dev-phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 3px #0b0a0e,0 30px 50px -24px rgba(20,16,22,.55)}

/* process and questions */
.studio .step::after{-webkit-text-stroke:1px rgba(20,16,22,.25)!important}
.studio .step .n{color:var(--o-2)!important}
.studio .step b{color:var(--ink)}
.studio details{border-color:var(--line)!important}
.studio summary{color:var(--ink)}
.studio summary::after{color:var(--o)!important}

/* quote builder */
.studio .wiz-steps li{color:var(--muted)}
.studio .wiz-steps li b{border-color:var(--line)!important;color:var(--ink)!important;background:transparent!important}
.studio .wiz-steps li[aria-current] b{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.studio .wiz-steps li[aria-current]{color:var(--ink)}
.studio .wiz-bar{background:var(--line-2)!important}.studio .wiz-bar i{background:var(--o)!important}
.studio .opts button{background:var(--paper)!important;border:1px solid var(--line)!important;color:var(--ink)!important;box-shadow:none!important}
.studio .opts button small{color:var(--muted)!important}
.studio .opts button[aria-checked="true"],.studio .opts button[aria-pressed="true"]{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.studio .opts button[aria-checked="true"] small,.studio .opts button[aria-pressed="true"] small{color:#B9B2C2!important}
.studio .wiz input,.studio .wiz textarea,.studio .wiz select{background:var(--paper)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.studio .wiz label,.studio .wiz .f{color:var(--ink)!important}
.studio .rec{background:var(--paper)!important;border-color:var(--line)!important;color:var(--ink)!important}
.studio .stamp-badge text{fill:var(--o-2)}
.studio .stamp-badge image{filter:none}

/* closing word art and footer */
.studio .wa{color:var(--ink)}
.studio .wa-out{-webkit-text-stroke:1.5px var(--ink)!important;color:transparent}
.studio .wa-pill{color:var(--o-2)!important}.studio .wa-pill::before{border-color:var(--o-2)!important}
.studio .wa-dot{color:var(--o)!important}
.studio footer{border-top:1px solid var(--line);color:var(--muted)}
.studio footer .wrap{color:var(--muted)!important}
.studio .bigword{-webkit-text-stroke:1px rgba(20,16,22,.14)!important;background:none!important}
.studio main p.label:not(.b-card p)::before,.studio .hero .label::before{width:7px!important;height:7px!important;border-radius:50%!important;background:var(--o)!important;box-shadow:none!important;transform:none!important}
.studio .logo,.studio .logo span{color:var(--ink)!important}

/* ==== background artwork (pick one with a class on <html>): bg-contours, bg-halftone, bg-strokes.
   Each sits behind the hero and repeats behind the dashboard and the quote, scrolling with the page. */
.studio .hero-stage,.studio main section.dash,.studio main section.quote{position:relative;isolation:isolate}
.studio .hero-stage::before,.studio main section.dash>.sec-head::before,.studio main section.quote::after{content:""!important;display:block!important;position:absolute;z-index:-1;pointer-events:none;opacity:1!important;transform:none!important;-webkit-mask:none;mask:none}
.studio .hero-stage::before{inset:0 0 0 auto;left:50%;width:100vw;translate:-50% 0}
.studio main section.dash>.sec-head{position:relative}
.studio main section.dash>.sec-head::before{left:50%;width:100vw;translate:-50% 0;top:-112px;height:520px}
.studio main section.quote::after{left:50%;width:100vw;translate:-50% 0;top:0;bottom:0}

/* contours: a terrain map in ink, fading out towards the headline */
.bg-contours .hero-stage::before,.bg-contours main section.dash>.sec-head::before,.bg-contours main section.quote::after{background:url(/art/contours.svg) center/cover no-repeat!important}
.bg-contours .hero-stage::before{-webkit-mask:linear-gradient(100deg,rgba(0,0,0,.25) 0%,#000 55%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(100deg,rgba(0,0,0,.25) 0%,#000 55%) intersect,linear-gradient(180deg,#000 70%,transparent)}
.bg-contours main section.dash>.sec-head::before,.bg-contours main section.quote::after{opacity:.55!important;-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}

/* halftone: a sunrise of printed dots, orange into violet */
.bg-halftone .hero-stage::before,.bg-halftone main section.dash>.sec-head::before,.bg-halftone main section.quote::after{
  background:linear-gradient(120deg,#E8561A 0%,#E8561A 35%,#A8357A 62%,#6D3FD9 100%)!important;
  -webkit-mask:radial-gradient(circle,#000 2.1px,transparent 2.4px) 0 0/12px 12px,radial-gradient(48% 70% at 96% 52%,#000 0%,rgba(0,0,0,.55) 40%,transparent 72%);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle,#000 2.1px,transparent 2.4px) 0 0/12px 12px intersect,radial-gradient(48% 70% at 96% 52%,#000 0%,rgba(0,0,0,.55) 40%,transparent 72%)}
.bg-halftone main section.dash>.sec-head::before{-webkit-mask:radial-gradient(circle,#000 1.6px,transparent 1.9px) 0 0/12px 12px,radial-gradient(40% 60% at 90% 40%,#000,transparent 70%);-webkit-mask-composite:source-in;mask:radial-gradient(circle,#000 1.6px,transparent 1.9px) 0 0/12px 12px intersect,radial-gradient(40% 60% at 90% 40%,#000,transparent 70%)}
.bg-halftone main section.quote::after{-webkit-mask:radial-gradient(circle,#000 1.6px,transparent 1.9px) 0 0/12px 12px,radial-gradient(40% 50% at 8% 80%,#000,transparent 70%);-webkit-mask-composite:source-in;mask:radial-gradient(circle,#000 1.6px,transparent 1.9px) 0 0/12px 12px intersect,radial-gradient(40% 50% at 8% 80%,#000,transparent 70%)}

/* strokes: the logo's strokes blown up, cropped off the right edge */
.bg-strokes .hero-stage::before{background:url(/art/strokes.svg) right center/auto 100% no-repeat!important;-webkit-mask:linear-gradient(180deg,#000 80%,transparent);mask:linear-gradient(180deg,#000 80%,transparent)}
.bg-strokes main section.dash>.sec-head::before{background:url(/art/strokes.svg) right center/auto 100% no-repeat!important;opacity:.18!important}
.bg-strokes main section.quote::after{background:url(/art/strokes.svg) left center/auto 70% no-repeat!important;transform:scaleX(-1)!important;opacity:.14!important}


@media (max-width:900px){
  .bg-contours .hero-stage::before{-webkit-mask:linear-gradient(180deg,rgba(0,0,0,.25),#000 60%,transparent);mask:linear-gradient(180deg,rgba(0,0,0,.25),#000 60%,transparent)}
  .bg-strokes .hero-stage::before{opacity:.35!important}
}

/* phones: solid menu (the live blur is the costly part on slow phones) */
@media (max-width:900px){.studio header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(244,241,235,.97)!important}}
.studio .reveal{transition-property:opacity,transform}

.bg-strokes .sh .btn:not(.primary)::before,.bg-halftone .sh .btn:not(.primary)::before{background:var(--paper)!important}
.bg-strokes .sh .proof,.bg-halftone .sh .proof{background:var(--paper);padding:6px 10px;border-radius:999px}
.bg-strokes .sh-meta span:last-child{background:var(--paper);padding:4px 8px;border-radius:6px}

/* ==== Studio dark: the same layout on near-black, so the 3D light (flow3d.js) can glow behind it ==== */
html.studio.dark{
  --paper:#09080D;--paper-2:#0F0D14;--card:#131118;--ink:#F2EEE8;--ink-2:#CBC5D2;--muted:#968FA2;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.06);
  --shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.85);color-scheme:dark}
.dark body{background:radial-gradient(70% 60% at 80% 20%,rgba(122,60,200,.18),transparent 70%),radial-gradient(60% 50% at 70% 60%,rgba(232,86,26,.14),transparent 70%),#09080D!important}
.dark .flow3d{position:fixed;inset:0;width:100vw!important;height:100vh!important;z-index:-1;pointer-events:none;display:block}
.dark body::after{background:repeating-linear-gradient(90deg,transparent 0 calc((min(1140px,100vw - 32px) + 16px)/12 - 1px),rgba(255,255,255,.028) calc((min(1140px,100vw - 32px) + 16px)/12 - 1px) calc((min(1140px,100vw - 32px) + 16px)/12)) calc(50% - min(570px,50vw - 16px)) 0/min(1156px,100vw - 16px) 100% no-repeat!important}
/* keep the headline side readable over the light */
.dark .hero-stage::before{background:linear-gradient(90deg,rgba(9,8,13,.8) 0%,rgba(9,8,13,.35) 38%,rgba(9,8,13,0) 58%)!important;-webkit-mask:none!important;mask:none!important}
@media (max-width:900px){.dark .hero-stage::before{background:linear-gradient(180deg,rgba(9,8,13,.85) 0%,rgba(9,8,13,.55) 45%,rgba(9,8,13,0) 75%)!important}}
.dark main section.dash>.sec-head::before,.dark main section.quote::after{display:none!important}
.dark header{background:rgba(9,8,13,.62)!important;border-bottom-color:var(--line)!important}
@media (max-width:900px){.dark header{background:rgba(9,8,13,.96)!important}}
.dark .logo-img{background:transparent!important;padding:0!important;height:30px!important}
/* bands and cards let the light show through a little, no live blur */
.dark main section.dash::before,.dark main section.reviews::before,.dark main section.care::before{background:rgba(15,13,20,.55)!important}
.dark .svc-tile,.dark .tier,.dark .b-card,.dark .fit-card,.dark .case,.dark .rev,.dark .val,.dark .wiz,.dark .addon,.dark .concept-card,.dark .limit,.dark .limit + .limit,.dark .tabs{background:rgba(19,17,24,.86)!important}
.dark main section.reviews .rev{background:rgba(19,17,24,.86)!important}
.dark .sh-chip{background:var(--card);color:var(--ink);border-color:var(--line)}
.dark .sh-chip.c2{background:var(--o);border-color:var(--o);color:#fff}
.dark .sh-chip.c2 i{background:#fff}
.dark .sh-browser{border-color:var(--line);box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.dark .sh-chrome{background:#17151C;border-color:var(--line-2)}
.dark .sh-chrome i{background:#3A3540}.dark .sh-chrome span{background:#221F28}
.dark .btn.primary::before{background:var(--o)!important;border-color:var(--o)!important}
.dark .btn.primary{color:#fff!important}
.dark .btn.primary::after,.dark .nav-cta i{background:#fff}
.dark .nav-cta{background:var(--o);color:#fff!important}
.dark .tier.pop{background:linear-gradient(155deg,#E8561A 0%,#B83A6A 58%,#6D3FD9 100%)!important;border-color:transparent!important;color:#fff!important}
.dark .tier.pop .blurb,.dark .tier.pop .price small,.dark .tier.pop .price .from{color:rgba(255,255,255,.78)!important}
.dark .tier.pop .badge::before{background:#fff!important}.dark .tier.pop .badge{color:#5B2DBF!important}
.dark .tier.pop .btn.add::before{background:#fff!important;border-color:#fff!important}.dark .tier.pop .btn.add{color:#141016!important}
.dark .db-live{background:rgba(80,200,120,.12)!important;border-color:rgba(80,200,120,.3)!important;color:#8FE0A6!important}
.dark .case-shots .dev-desk{border-color:var(--line)}
.dark .stars{color:#F2B33D!important}

/* ==== dark: readable text everywhere, and calmer light behind the content ==== */
.dark main section.reviews h2,.dark main section.process h2,.dark main section.faq h2,
.dark main section.process .step b,.dark main section.faq summary,.dark main section.reviews .rev blockquote,
.dark main section.reviews .rev figcaption b,.dark main section h2,.dark main h3,.dark summary{color:var(--ink)!important}
.dark main section.process .step p,.dark main section.faq details p,.dark main section.reviews .rev figcaption,.dark main section.reviews .rev figcaption span,.dark main section.reviews .score span{color:var(--muted)!important}
.dark main section.reviews .label,.dark main section.process .label,.dark main section.faq .label{color:var(--muted)!important}
.dark main section.process .step::after{-webkit-text-stroke:1px rgba(255,255,255,.22)!important}
.dark main section.faq details{border-color:var(--line)!important}
.dark main section.reviews .g-link{color:var(--ink)!important}
.dark .cb-dot{background:linear-gradient(160deg,#F5813F,#8B5CF6)!important}
/* text-heavy sections sit on a deep glass panel so the light never runs through the words */
.dark main section.reviews,.dark main section.process,.dark main section.faq,.dark main section.care{position:relative;isolation:isolate}
.dark main section.reviews::before,.dark main section.process::before,.dark main section.faq::before,.dark main section.care::before{content:""!important;display:block!important;position:absolute;z-index:-1;inset:0 auto;left:50%;width:100vw;translate:-50% 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,8,13,0) 0,rgba(9,8,13,.82) 120px,rgba(9,8,13,.82) calc(100% - 120px),rgba(9,8,13,0) 100%)!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-mask:none!important;mask:none!important}
.dark main section.process::before{background:linear-gradient(180deg,rgba(9,8,13,0) 0,rgba(9,8,13,.82) 120px)!important}
.dark main section.faq::before{background:linear-gradient(180deg,rgba(9,8,13,.82) calc(100% - 120px),rgba(9,8,13,0) 100%)!important}
.dark .sh .proof{background:rgba(9,8,13,.72);padding:6px 12px;border-radius:999px}

/* ==== glass cards: a real blur of the light behind, tinted dark grey into orange and violet ==== */
.dark .limit,.dark .limit + .limit,.dark .svc-tile,.dark .fit-card,.dark .rev,.dark .val,.dark .tier:not(.pop),.dark .b-card:not(.b-free),.dark .case,.dark .concept-card,.dark .addon,.dark .wiz{
  background:linear-gradient(150deg,rgba(28,26,32,.62) 0%,rgba(24,20,26,.5) 45%,rgba(70,30,18,.34) 78%,rgba(70,42,130,.36) 100%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid rgba(255,255,255,.09)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -32px rgba(0,0,0,.85)!important}
.dark main section.reviews .rev{background:linear-gradient(150deg,rgba(28,26,32,.7) 0%,rgba(24,20,26,.6) 50%,rgba(70,30,18,.4) 80%,rgba(70,42,130,.42) 100%)!important}
/* concept sites sit between client cases as slim rows */
.case-concept{display:block}
.case-concept .concept-card{display:grid!important;grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:var(--s6);align-items:center;text-decoration:none}
.case-concept .cc-shot{grid-row:span 3}
.case-concept .tags{margin-top:0}
@media (max-width:760px){.case-concept .concept-card{grid-template-columns:1fr}.case-concept .cc-shot{grid-row:auto}}
.case-concept .concept-card{align-content:center;row-gap:var(--s2)!important}
.case-concept .concept-card h4{margin:0}

/* ==== hero: a tighter headline whose last word cycles, and a strip of clients ==== */
.studio .sh h1{font-size:clamp(44px,6.6vw,96px)!important;max-width:none}
.rot{display:inline-block;height:.98em;overflow:hidden;vertical-align:bottom;color:var(--o)}
.rot-w{display:flex;flex-direction:column;animation:rot 10s cubic-bezier(.7,0,.2,1) infinite}
.rot-w b{display:block;height:.98em;line-height:.98;font-weight:inherit;white-space:nowrap}
@keyframes rot{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-.98em)}50%,70%{transform:translateY(-1.96em)}75%,95%{transform:translateY(-2.94em)}100%{transform:translateY(-3.92em)}}
.studio .sh h1 .dot{color:var(--o)}
.sh-strip{margin-top:var(--s7);overflow:hidden;border-block:1px solid var(--line);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sh-strip-in{display:flex;gap:var(--s8);width:max-content;padding-block:var(--s4);animation:strip 36s linear infinite}
.sh-strip span{font:600 var(--t-l)/1 var(--display);letter-spacing:-.03em;color:var(--muted);white-space:nowrap}
.sh-strip span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--o);margin-right:14px;vertical-align:middle}
@keyframes strip{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rot-w,.sh-strip-in{animation:none}}
.rot{height:1.02em}.rot-w b{height:1.02em;line-height:1.02}
@keyframes rot{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-1.02em)}50%,70%{transform:translateY(-2.04em)}75%,95%{transform:translateY(-3.06em)}100%{transform:translateY(-4.08em)}}

/* ==== buttons, after Linear / Vercel / Raycast: soft light pill, medium weight, an orange arrow
   tile that slides on hover; the secondary is a quiet glass outline ==== */
.studio.dark .btn,.studio.dark .nav-cta{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 20px!important;border-radius:999px!important;
  font:500 15.5px/1 var(--body)!important;letter-spacing:-.01em!important;text-transform:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.studio.dark .btn::before{border-radius:999px!important}
.studio.dark .btn.primary,.studio.dark .nav-cta{padding:0 6px 0 20px!important;color:#141016!important}
.studio.dark .btn.primary::before,.studio.dark .nav-cta{background:linear-gradient(180deg,#FFFFFF 0%,#ECE7E1 100%)!important;border:0!important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(255,255,255,.25)!important}
.studio.dark .btn.primary::after,.studio.dark .nav-cta::after{content:"";position:static;flex:none;width:34px;height:34px;margin:0;border-radius:50%;
  background:#E8561A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.studio.dark .nav-cta{min-height:42px;padding-left:18px!important;gap:10px}
.studio.dark .nav-cta::after{width:30px;height:30px;background-size:14px}
.studio.dark .nav-cta i,.studio.dark .btn.primary i{display:none}
.studio.dark .btn.primary:hover::after,.studio.dark .nav-cta:hover::after{transform:translateX(3px) rotate(-45deg)}
.studio.dark .btn.primary:hover,.studio.dark .nav-cta:hover{transform:translateY(-1px)}
.studio.dark .btn:not(.primary){color:var(--ink)!important}
.studio.dark .btn:not(.primary)::before{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important}
.studio.dark .btn:not(.primary):hover::before{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.28)!important}
.studio.dark .btn:not(.primary):hover{color:var(--ink)!important}
.studio.dark .tier .btn.add{justify-content:space-between}
.studio.dark .tier .btn.add::before{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.14)!important}
.studio.dark .tier .btn.add:hover::before{background:rgba(255,255,255,.1)!important}
.studio.dark .tier .btn.add:hover{color:var(--ink)!important}
.studio.dark .tier.pop .btn.add{color:#141016!important}
.studio.dark .tier.pop .btn.add::before{background:linear-gradient(180deg,#fff,#ECE7E1)!important;border:0!important}
.studio.dark .b-plan .btn.primary{justify-content:center}

/* ==== no hard edges between sections: every overlay and band fades out at its ends ==== */
.dark .hero-stage::before{-webkit-mask:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)!important;mask:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)!important}
.dark main section.dash::before,.dark main section.care::before{border:0!important;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%)!important;mask:linear-gradient(180deg,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%)!important}
.dark .sh-strip{border:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent) top/100% 1px no-repeat,linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent) bottom/100% 1px no-repeat}
.dark header{border-bottom:0!important;box-shadow:0 1px 0 rgba(255,255,255,.05)!important}
/* the 3D canvas fades in over the same glow the page shows while it loads */
.dark .flow3d{opacity:0;transition:opacity 1.4s ease}
.flow-on .flow3d{opacity:1}