/* Neon v11 (2026-09-26): the header's underglow is on from the moment the page loads, over the film too (James: "add the
   bottom glow back to the nav header on hero load"). Forked from v10.

   Neon v10 (2026-09-26), forked from neon-v9.css. James on the dial: "the selection is fuzzy... make it tactile and snappy".
   The chosen notch is a solid dot with a crisp white ring (no glow); the knob is a raised, bevelled cap with an engraved
   pointer that presses in under the finger; each notch snaps with a short overshoot and the new dot pops.

   Neon v9 (2026-09-25), forked from neon-v8.css. James picked the rotary dial from the colour switch study
   (share.neonstudio.ai/neonstudio-color-switch-ideas/): one knob replaces the light switch and the tubes. Its first
   click is off, then coral, green, blue, indigo, pink. Click to turn it on a notch, drag it round, or use the arrow keys.

   Neon v8 (2026-09-25), forked from neon-v7.css. James: "add blue and green as colors... consider a better color switch".
   Five colours, ordered by hue: coral, green, blue (from the hero painting's cobalt), indigo, pink. The bulbs became a row
   of small neon tubes (the chosen one lit, the rest unlit tinted glass); on phones one lit tube opens a tray of all five.
   Each colour has a bright tube (--neon-rgb) and a deep CTA fill (--cta-rgb) that carries white lettering (AA, 4.5:1 or better;
   coral and green lifted to #d2401e and #0f8446 after James found them "a bit dark").

   Neon v7, James on v6:
   - the header light animates on when you scroll past the hero film (dark over the film, lit after it);
   - turning lights on flickers like a neon sign for about a second;
   - the colour lights the buttons themselves (a lit tube fill), not a halo around ink;
   - colours: indigo #3c1ff9 (deeper again; earlier #4e33ff, first pass #3355ff read too blue), coral, pink;
   - bars are saturated neon everywhere (step bars, the Care bar, the progress rail, the separators); the header is underglow only;
   - the header button lights with the switch and colour like every button; only the header's underglow waits for the film;
   - a slicker colour control: three neon bulbs inline (one bulb that cycles on phones);
   - every neon bar casts its glow downward.

   System: neutral slate, ink, one neon. Every glow and every lit fill scales with the registered --lit (the switch)
   and, in the header, with --hlit (past the film). Off = unlit glass. */

@property --lit{syntax:"<number>";inherits:true;initial-value:1}
@property --hlit{syntax:"<number>";inherits:true;initial-value:0}
/* a button's own tube: --flk dims the face, --fhalo is the light it throws; both run only while it flickers */
@property --flk{syntax:"<number>";inherits:false;initial-value:1}
@property --fhalo{syntax:"<number>";inherits:false;initial-value:0}
/* --cta-rgb is the button fill: the same hue as the tube, deep enough to carry white lettering at 5:1 or better
   (James, 2026-09-25: "the pink and coral need to be dark and saturated enough to accommodate white lettering on CTAs").
   The tube itself (--neon-rgb: glow, bars, lamps) stays bright. */
:root{--lit:1;--neon-rgb:255 61 154;--cta-rgb:197 15 102;--neon-core:#ffe2ef;--on-neon:#ffffff;
  --n90:rgb(var(--neon-rgb) / calc(.9 * var(--lit)));--n70:rgb(var(--neon-rgb) / calc(.7 * var(--lit)));
  --n45:rgb(var(--neon-rgb) / calc(.45 * var(--lit)));--n25:rgb(var(--neon-rgb) / calc(.25 * var(--lit)));
  --n16:rgb(var(--neon-rgb) / calc(.16 * var(--lit)));--n08:rgb(var(--neon-rgb) / calc(.08 * var(--lit)));
  --tube:var(--neon-core);--tube-dark:var(--neon-core);--tube-sat:rgb(var(--neon-rgb));--tube-sat-dark:rgb(var(--neon-rgb));--sign:#fff4f9;--num-dark:rgb(var(--neon-rgb));
  --ink:#1f1f23;--ink-2:#56565d;--btn-fg:var(--on-neon);--btn-fg-dark:var(--on-neon);
  transition:--lit .3s ease-out}
:root[data-neon="gold"]{--neon-rgb:255 189 31;--cta-rgb:255 189 31;--neon-core:#fff1cc;--sign:#fffaf0;--on-neon:#1c1400}   /* bright gold fill carries dark lettering (10.9:1; white would be 1.7:1) */
:root[data-neon="black"]{--neon-rgb:154 76 255;--cta-rgb:122 46 230;--neon-core:#eee3ff;--sign:#f8f3ff;--on-neon:#ffffff;--num-dark:#b684ff}   /* black light: a UV violet tube, a deeper fill for white lettering (6.3:1); a lighter violet for the step numbers on the dark sections */
:root[data-neon="blue"]{--neon-rgb:28 109 255;--cta-rgb:10 75 214;--neon-core:#e0ebff;--sign:#f3f7ff;--on-neon:#ffffff}
:root[data-neon="green"]{--neon-rgb:34 224 122;--cta-rgb:15 132 70;--neon-core:#dcfbe9;--sign:#f2fff7;--on-neon:#ffffff}
:root[data-light="off"]{--lit:0;--tube:#cfcfd4;--tube-sat:#cfcfd4;--tube-sat-dark:#4c4c53;--tube-dark:#4c4c53;--sign:#ffffff;--num-dark:#b9b9c0;--btn-fg:#ffffff;--btn-fg-dark:var(--ink)}

/* a neon sign starting up: a stutter of strikes spread over about a second, then it holds */
@keyframes lit-ignite{0%{--lit:0}5%{--lit:.75}8%{--lit:0}14%{--lit:1}17%{--lit:.08}21%{--lit:.9}24%{--lit:.2}32%{--lit:1}36%{--lit:.5}44%{--lit:1}60%{--lit:.7}64%{--lit:1}79%{--lit:.85}83%,100%{--lit:1}}
:root.light-igniting{animation:lit-ignite 1.05s steps(1,end)}
@media (prefers-reduced-motion:reduce){:root{transition:none}:root.light-igniting{animation:none}}

/* ---------- Retire indigo as the old CTA colour, and the earlier accents ---------- */
:root{--indigo-edge:0 6px 15px -5px rgb(20 20 30 / .1);--indigo-halo:0 22px 46px -15px rgb(20 20 30 / .12)}
#intake,#project-detail,#study{box-shadow:0 24px 70px #1116,0 0 0 1px var(--n25),0 0 40px -6px var(--n25)}
.care-pricing strong{color:var(--ink)}
.wheel-controls>button{color:var(--ink)}
body .wheel-picker button[aria-current=true]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink);box-shadow:none}
body .wheel-controls [aria-current=true],body .wheel-controls [aria-current=page]{border-color:inherit;box-shadow:none}
body .build-pricing .overline,body .studio-services .service-plan .overline{color:var(--ink-2)}
body .studio-pricing .build-pricing .overline:before,body .studio-services .service-plan>.overline:before{content:none}
body .coral-number{color:inherit;font-weight:650}
body .motion-chapters [aria-current],body .motion-chapters [aria-current] span{color:var(--ink);font-weight:650}
body .motion-chapters button span,body #motion-count{color:var(--ink-2)}
body .review-grid article>span{color:var(--ink-2);font-weight:650}
.project-status{margin:10px 0 0;font-size:13px;color:#48484e}

/* ---------- Buttons: the live neonstudio.ai button, lit in the chosen neon (unlit = ink) ----------
   James, 2026-09-25: "I prefer the design of the buttons the live site neonstudio.ai". Same construction as the live
   cta-electric-v3 + palette-a-v2 + tactile-buttons-v2 button: a 165deg gradient (highlight, mid at 43%, base), a 1px
   border with a lighter top edge, an inner highlight and inner shade, a 3px solid base shadow and a soft drop shadow;
   press = travel down with a slight squash, then the live rebound. Every shade is mixed from the chosen colour.
   No hover effect (James, earlier the same day). Corners 4px (a little squarer than live's 6px, James). */
:root body .button{--fill:color-mix(in srgb,rgb(var(--cta-rgb)) calc(var(--lit) * var(--flk) * 100%),var(--ink));
  --hi:color-mix(in srgb,var(--fill) 86%,#fff);--lo:color-mix(in srgb,var(--fill) 72%,#000);--edge:color-mix(in srgb,var(--fill) 50%,#000);
  --rest:inset 0 1px 1px rgb(255 255 255 / .4),inset 0 -2px 3px color-mix(in srgb,var(--edge) 22%,transparent),
         0 3px 0 color-mix(in srgb,var(--edge) 33%,transparent),0 8px 18px color-mix(in srgb,var(--edge) 14%,transparent);
  background:linear-gradient(165deg,var(--hi) 0%,var(--fill) 43%,var(--lo) 100%);color:var(--btn-fg);
  border:1px solid color-mix(in srgb,var(--fill) 62%,#000);border-top-color:color-mix(in srgb,var(--fill) 55%,#fff);
  border-radius:4px;font-weight:650;animation:none;filter:none;transform:none;box-shadow:var(--rest)}
:root body .button:hover,:root body .button:focus{background:linear-gradient(165deg,var(--hi) 0%,var(--fill) 43%,var(--lo) 100%);color:var(--btn-fg);
  animation:none;filter:none;transform:none;box-shadow:var(--rest)}
:root body .button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
:root body .button.is-pressed,:root body .button.is-pressed:hover,:root body .button:active{transform:translateY(3px) scale(.975);filter:brightness(.94);
  box-shadow:inset 0 2px 5px color-mix(in srgb,var(--edge) 31%,transparent),inset 0 1px 0 rgb(255 255 255 / .15),
             0 1px 0 color-mix(in srgb,var(--edge) 25%,transparent),0 2px 5px color-mix(in srgb,var(--edge) 12%,transparent)}
:root body .button.is-rebounding,:root body .button.is-rebounding:hover{animation:cta-rebound .36s cubic-bezier(.2,.75,.3,1) both}
:root body .approach .button,:root body footer .button{--fill:color-mix(in srgb,color-mix(in srgb,rgb(var(--cta-rgb)) calc(var(--flk) * 100%),var(--ink)) calc(var(--lit) * 100%),#f4f4f5);color:var(--btn-fg-dark)}
:root body .approach .dark-button{border-radius:4px}
:root body .approach .dark-button:hover{border-color:rgb(var(--neon-rgb) / calc(.8 * var(--lit) + .2))}
/* Hover = the tube stutters like a neon sign, throws a flash of light, and settles lit (James, 2026-09-25: "hovering over
   buttons should make them flicker like neon"). Mouse and trackpad only; with the light switched off there is no neon to
   flicker, so an unlit button stays still. A press during the flicker keeps both (the names match, so neither restarts). */
@keyframes btn-flicker{0%{--flk:1;--fhalo:1}6%{--flk:.15;--fhalo:.1}10%{--flk:1;--fhalo:1}17%{--flk:.3;--fhalo:.2}21%{--flk:1;--fhalo:1}33%{--flk:.55;--fhalo:.4}37%{--flk:1;--fhalo:1}58%{--flk:.8;--fhalo:.7}62%{--flk:1;--fhalo:.85}74%{--flk:1;--fhalo:.55}84%{--flk:1;--fhalo:.3}92%,100%{--flk:1;--fhalo:.12}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :root body .button:hover{animation:btn-flicker 1s steps(1,end);
    box-shadow:var(--rest),0 0 12px 1px rgb(var(--neon-rgb) / calc(.55 * var(--fhalo) * var(--lit))),0 10px 30px 2px rgb(var(--neon-rgb) / calc(.35 * var(--fhalo) * var(--lit)))}
  :root body .button.is-rebounding:hover{animation:btn-flicker 1s steps(1,end),cta-rebound .36s cubic-bezier(.2,.75,.3,1) both}
}
@media (prefers-reduced-motion:reduce){:root body .button.is-pressed,:root body .button:active{transform:none}:root body .button.is-rebounding{animation:none}}

/* ---------- The glass header: underglow only (James, 2026-09-25), lit from the moment the page loads, over the film
   too (v11, James 2026-09-26: "add the bottom glow back to the nav header on hero load"; v7 to v10 kept it dark until the
   film was behind you). It starts up with the page's other signs (lit-ignite on :root) and follows the dial. ---------- */
body .nav{--hlit:1;--h90:rgb(var(--neon-rgb) / calc(.9 * var(--lit) * var(--hlit)));--h70:rgb(var(--neon-rgb) / calc(.7 * var(--lit) * var(--hlit)));
  --h45:rgb(var(--neon-rgb) / calc(.45 * var(--lit) * var(--hlit)));--h25:rgb(var(--neon-rgb) / calc(.25 * var(--lit) * var(--hlit)))}
body .nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 14px 28px -12px var(--h70),0 32px 72px -24px var(--h45)}
@media (max-width:800px){
  html body .nav{contain:none!important}
  html body .nav::before{inset:0;border:0;box-shadow:0 12px 22px -12px var(--h70),0 26px 44px -24px var(--h45)}
}

/* ---------- Control: a rotary dial. Off, then the five colours round the top of the knob ---------- */
.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}}

/* ---------- Neon bars cast their light downward ---------- */
/* scroll progress (vertical, so it glows both ways) */
body .reading-progress:before{background:var(--tube-sat);box-shadow:0 0 1px 1px var(--n90),0 0 7px 1px var(--n70),0 0 16px 2px var(--n25)}
/* separators into the dark rooms: tube + light falling into the section (glow reduced 2026-09-25, James) */
body .approach{position:relative;background-image:linear-gradient(180deg,rgb(var(--neon-rgb) / calc(.11 * var(--lit))) 0,rgb(var(--neon-rgb) / calc(.045 * var(--lit))) 55px,rgb(var(--neon-rgb) / calc(.012 * var(--lit))) 130px,transparent 190px)}
footer.wrap{position:relative;background-image:linear-gradient(180deg,rgb(var(--neon-rgb) / calc(.11 * var(--lit))) 0,rgb(var(--neon-rgb) / calc(.045 * var(--lit))) 55px,rgb(var(--neon-rgb) / calc(.012 * var(--lit))) 130px,transparent 190px)}
body .approach::before,footer.wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;pointer-events:none;
  background:var(--tube-sat-dark);box-shadow:0 0 1px 0 var(--n70),0 3px 8px 0 var(--n45),0 8px 22px 1px var(--n16)}
/* section 03 step tubes */
body .motion-chapters i{background:var(--tube-sat);box-shadow:0 0 2px var(--n90),0 4px 10px 0 var(--n70),0 10px 20px -2px var(--n25)}
/* the recommended plan: its neon bar and the light it threw into the card were removed (James, 2026-09-25: "remove this bar");
   the card keeps its soft neon edge */
body .studio-services .service-plan:nth-child(2){position:relative;
  background-image:linear-gradient(145deg,#fafbf6,#e9ece4 65%,#d9dfd4);
  box-shadow:0 3px 0 #b3b3b8,0 7px 0 #d2d2d6,0 16px 24px -18px rgb(20 20 30 / .3),0 0 0 1px var(--n25),0 10px 28px -8px var(--n45),0 28px 60px -20px var(--n45)}

/* ---------- The other lit things ---------- */
body .film-opening h1 span{color:var(--sign);text-shadow:0 0 1px rgb(255 255 255 / var(--lit)),0 0 6px var(--n90),0 0 18px var(--n70),0 0 44px var(--n45)}
#work.is-wheel .collection-item:has([data-project][tabindex="0"]){box-shadow:0 3px 0 #c0c0c0,0 5px 0 #e6e6e6,0 16px 26px -17px rgb(20 20 30 / .3),0 0 0 1px var(--n25),0 8px 26px -6px var(--n45),0 26px 60px -18px var(--n45)}
#work.is-wheel .collection-item::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0}
#work.is-wheel .collection-item.neon-on::after{opacity:1;box-shadow:0 0 0 1px var(--n45),0 0 22px 2px var(--n25);animation:neon-ignite 1.05s steps(1,end) both}
@keyframes neon-ignite{0%{opacity:0}5%{opacity:.75}8%{opacity:0}14%{opacity:1}17%{opacity:.08}21%{opacity:.9}24%{opacity:.2}32%{opacity:1}36%{opacity:.5}44%{opacity:1}60%{opacity:.7}64%{opacity:1}79%{opacity:.85}83%,100%{opacity:1}}
body .studio-pricing .build-pricing{box-shadow:0 3px 0 #b9b9bd,0 16px 25px -18px rgb(20 20 30 / .3),var(--indigo-edge),var(--indigo-halo)}
body .studio-services .service-plan:first-child,body .studio-services .service-plan:last-child{box-shadow:0 3px 0 #b3b3b8,0 7px 0 #d2d2d6,0 16px 24px -18px rgb(20 20 30 / .3),var(--indigo-edge),var(--indigo-halo)}
body .motion-lab .responsive-device{box-shadow:0 0 0 1px #dfe4dc,3px 5px 0 #88918a,7px 18px 24px -14px rgb(20 20 30 / .35),var(--indigo-edge),var(--indigo-halo)}
body .approach .offer-grid li>span{color:var(--num-dark);font-weight:650;text-shadow:0 0 6px var(--n70),0 0 16px var(--n25)}
@media (prefers-reduced-motion:reduce){#work.is-wheel .collection-item.neon-on::after{animation:none}}

/* Mobile QA (2026-09-25): every control a thumb can reach gets a 44px target without growing what it looks like. */
@media (max-width:800px){
  :root body .nav .button{position:relative}
  :root body .nav .button::after{content:"";position:absolute;inset:-6px -2px}
  body .faq summary{min-height:44px}
}