.light-ctl{position:relative;display:flex;align-items:center;gap:8px;margin-right:6px}
.dial{position:relative;flex:none;display:block;width:46px;height:46px;border-radius:50%;cursor:grab;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
.dial:active{cursor:grabbing}
.dial:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.dial::after{content:"";position:absolute;inset:-4px}
.dial .dot{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--c) 48%,#d4d4d8);transition:width .12s,height .12s,margin .12s}
.dial .dot.is-off{background:#a8a8ae}
/* the chosen notch: solid colour, a crisp white ring and a hairline edge; no blur */
.dial .dot[data-on]{width:7px;height:7px;margin:-3.5px;background:var(--c);box-shadow:0 0 0 1px #fff,0 0 0 2px color-mix(in srgb,var(--c) 62%,#000)}
.dial .dot.is-off[data-on]{background:#4a4a51;box-shadow:0 0 0 1px #fff,0 0 0 2px #2a2a2e}
.dial .dot.pop{animation:dial-pop .22s cubic-bezier(.3,1.6,.5,1)}
@keyframes dial-pop{0%{scale:1.45}100%{scale:1}}
/* the knob: a raised cap, bevel lit from the top left, an engraved pointer; it presses in and snaps notch to notch */
.dial .knob{position:absolute;inset:10px;border-radius:50%;pointer-events:none;--press:1;
  background:radial-gradient(circle at 34% 28%,#fff 0,#f3f3f5 36%,#d6d6db 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -2px 3px rgb(0 0 0 / .14),0 1px 1px rgb(0 0 0 / .28),0 3px 6px -1px rgb(0 0 0 / .26);
  transform:rotate(var(--rot,0deg)) scale(var(--press));
  transition:transform .17s cubic-bezier(.34,1.7,.5,1),box-shadow .08s}
.dial.is-pressed .knob{--press:.94;box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),inset 0 -1px 2px rgb(0 0 0 / .18),0 1px 1px rgb(0 0 0 / .3);transition:transform .08s ease-out,box-shadow .08s}
.dial .knob::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(rgb(0 0 0 / .09) 0 4deg,transparent 4deg 12deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,transparent 62%,#000 64%)}
.dial .knob::after{content:"";position:absolute;left:50%;top:2.5px;width:3px;height:9px;margin-left:-1.5px;border-radius:2px;
  background:#222226;box-shadow:1px 0 0 rgb(255 255 255 / .75),inset 0 1px 1px rgb(0 0 0 / .5)}
.dial-name{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);min-width:44px}
@media (max-width:800px){.light-ctl{margin-right:2px;gap:4px}.dial-name{display:none}}
@media (prefers-reduced-motion:reduce){.dial .knob{transition:none}.dial .dot.pop{animation:none}}

:root{--ink:#292b32;--ink-2:#50515a;--accent:#b50961;--accent-top:#e83998;--accent-deep:#800640;--accent-rgb:181,9,97;--glow:.18}
:root[data-neon=gold]{--accent:#8a5a00;--accent-top:#ffd45e;--accent-deep:#a37914;--accent-rgb:255,189,31}   /* --accent is also text on the light page, so it stays deep amber; the call to action itself is bright gold with dark lettering (below) */
:root[data-neon=green]{--accent:#087346;--accent-top:#179e65;--accent-deep:#045332;--accent-rgb:34,224,122}
:root[data-neon=blue]{--accent:#1555ca;--accent-top:#3986ff;--accent-deep:#103c91;--accent-rgb:28,109,255}
:root[data-neon=black]{--accent:#6a1fd8;--accent-top:#9a4cff;--accent-deep:#4a1596;--accent-rgb:154,76,255}   /* black light: UV violet */
:root[data-light=off]{--accent:#45464b;--accent-top:#696a70;--accent-deep:#292a30;--accent-rgb:90,90,90;--glow:0}
header .light-ctl{margin-left:auto;margin-right:20px}header{gap:14px;box-shadow:0 6px 18px -10px rgba(var(--accent-rgb),var(--glow))}.cta,header .small-cta,#intake .button{background:linear-gradient(165deg,var(--accent-top),var(--accent) 70%);border-color:var(--accent-top);border-bottom-color:var(--accent-deep);box-shadow:0 4px 0 var(--accent-deep),0 9px 18px rgba(var(--accent-rgb),var(--glow)),inset 0 1px 0 #ffffff66}.cta:hover,.cta:focus-visible,header .small-cta:hover,header .small-cta:focus-visible{box-shadow:0 4px 0 var(--accent-deep),0 8px 24px rgba(var(--accent-rgb),var(--glow)),inset 0 1px 0 #ffffff88}.light{background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08)}.hero:before{background:radial-gradient(ellipse at 90% 45%,rgba(var(--accent-rgb),var(--glow)),transparent 60%),radial-gradient(ellipse at 5% 5%,#fff9,transparent 48%)}.service-number,summary>span,.switches button[aria-pressed=true]{color:var(--accent)}.film-slab{box-shadow:0 16px 28px -18px #18191a70,8px 6px 30px -20px rgba(var(--accent-rgb),.6);border-right-color:#cac8c0}.film-slab:after{box-shadow:inset -2px 0 0 rgba(var(--accent-rgb),var(--glow)),inset 1px 1px 0 #fff}.service-panel{border-right-color:#cac8c0;box-shadow:0 3px 0 #cccac2,inset -18px 0 35px -26px rgba(var(--accent-rgb),var(--glow))}.project-open{box-shadow:0 4px 0 #c1c0b8,0 16px 20px -16px #28292c88,8px 0 22px -18px rgba(var(--accent-rgb),var(--glow))}.project-open:active{box-shadow:0 2px 0 #b6b3ac,0 0 0 1px var(--accent),0 5px 16px rgba(var(--accent-rgb),var(--glow))}.dial .dot{background:var(--c,#aaa)}.dial .dot[data-on]{box-shadow:0 0 0 1px #fff,0 0 0 2px #777}.dial:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:500px){header{gap:7px}header .light-ctl{margin-right:4px}.dial{width:46px;height:46px}.wordmark{width:125px}}@media(max-width:360px){header{padding:0 14px}.wordmark{width:112px}.small-cta{padding:9px 7px}.small-cta span{margin-left:5px}}

/* The header action is a primary CTA, using the selected light color. */
header .small-cta{color:#fff;font-weight:600;min-height:44px}
header .small-cta.is-depressed{box-shadow:0 1px 0 var(--accent-deep),inset 0 2px 5px #0002}

/* gold: the call to action is bright gold with dark lettering (white on gold is 1.7:1) */
:root[data-neon=gold] .cta,:root[data-neon=gold] header .small-cta,:root[data-neon=gold] #intake .button{background:linear-gradient(165deg,#ffd45e,#ffbd1f 70%);color:#1c1400;border-color:#ffd45e;border-bottom-color:var(--accent-deep)}