/* Authoritative UI color roles, from the original Cre8tive Vibe brand kit.
   Tool logos and portfolio artwork retain their original source colors. */
:root{
 --brand-primary:#f75023;--brand-secondary:#59ca96;--brand-highlight:#f3ff6a;--brand-ink:#243c44;
 --brand-orange:var(--brand-primary);--brand-mint:var(--brand-secondary);--brand-lime:var(--brand-highlight);--brand-base:var(--brand-ink);
 --bg:#243c44;--surface:#2b454d;--surface-2:#314f57;--section-quiet:#20373e;--section-deep:#1b2e35;
 --text:#f8fcfa;--muted:#bdcece;--line:#d9eee329;--accent:var(--brand-secondary);--accent-text:#10262e;
 --nav:#243c44d9;--shadow:#10262e35;--button-bg:var(--brand-primary);--button-fg:#fff;
 --button-hover:#c13e1b;--button-hover-text:#fff;--button-border:var(--brand-primary);
 --link-hover:var(--brand-secondary);--focus:var(--brand-primary);--control-border:#819aa2;--soft-orange:#f7502310;--soft-mint:#59ca960c;
}
:root[data-theme=light]{
 --bg:#fff;--surface:#f2f6f4;--surface-2:#e7efeb;--section-quiet:#f7f9f8;--section-deep:#edf3f0;
 --text:var(--brand-ink);--muted:#52666b;--line:#243c4426;--accent:#bf411d;--accent-text:#10262e;
 --nav:#ffffffcc;--shadow:#243c4414;--button-bg:var(--brand-primary);--button-fg:#fff;--control-border:#74878d;
 --button-hover:var(--brand-ink);--button-hover-text:#fff;--link-hover:#bf411d;
 --soft-orange:#f7502308;--soft-mint:#59ca9608;
}
body,.hero.hero-brand,.work,.capabilities,.testimonials,.journal-page,.project-page{background-color:var(--bg);color:var(--text)}
.hero.hero-brand{background-image:none}
.philosophy,.story,.playground{background:var(--section-quiet)}
.games,.contact{background:var(--section-deep)}
[data-theme=light] .philosophy,[data-theme=light] .story,[data-theme=light] .playground{background:var(--section-quiet)}
[data-theme=light] .games,[data-theme=light] .contact{background:var(--section-deep)}
.skill-card,.service-craft,.testimonial-card,.journal-empty{background:var(--surface);border-color:var(--line)}
.header,.header.scrolled{background:var(--nav);border-color:var(--line);transition:transform .4s cubic-bezier(.22,.7,.3,1),opacity .3s,background-color .3s,border-color .3s;will-change:transform}
.header.is-away{transform:translateY(calc(-100% - 30px));opacity:0;pointer-events:none}
[data-theme=light] .header{background:linear-gradient(130deg,#ffffffd6,#ffffffc2 48%,#ffffffd6);border-color:#ffffffdd;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px var(--line),0 10px 35px var(--shadow)}
.contact,.contact h2,.contact .contact-bottom>a,.contact .copy-email,.contact .socials a,.contact .footer-line,.contact .footer-line a{color:var(--text)}
.contact .section-meta,.contact .contact-layout p,.contact .enquiry-form-wrap p{color:var(--muted)}
.contact .enquiry-form-wrap label,.contact .enquiry-form-wrap h3{color:var(--text)}
.contact .contact-layout h2 span,.hero-role .rotating-role,.philosophy .focus-statement strong,.testimonials h2 span{color:var(--accent)}
.philosophy .focus-statement{color:var(--text)}
[data-theme=light] .philosophy .focus-statement{color:#152124}
.philosophy .focus-statement>span[aria-hidden],.philosophy .focus-statement .focus-word,.philosophy .focus-statement .focus-char{color:inherit}
.philosophy .focus-statement strong,.games .section-heading h2 span,.about-title h2 span{color:var(--brand-primary)}
:root .primary-button,:root .service-actions .service-enquiry,:root .load-media{background:var(--button-bg);color:var(--button-fg);border-color:var(--button-border)}
:root .primary-button:hover,:root .primary-button:focus-visible,:root .service-actions .service-enquiry:hover,:root .service-actions .service-enquiry:focus-visible,:root .load-media:hover,:root .load-media:focus-visible{background:var(--button-hover);color:var(--button-hover-text);border-color:var(--button-hover);box-shadow:none}
:root .primary-button>span,:root .service-enquiry>span{color:inherit}
.text-link:hover,.text-link:focus-visible,.card-action:hover{color:var(--link-hover)}
.filters button[aria-pressed=true]{background:var(--button-bg);color:var(--button-fg);border-color:var(--button-border)}
.filters button[aria-pressed=true] sup{color:inherit}
:root[data-theme=light] .theme-sun,:root[data-theme=dark] .theme-moon{color:#fff}
.filters button:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.filters button[aria-pressed=true]:hover,.filters button[aria-pressed=true]:focus-visible{background:var(--button-bg);color:#fff;border-color:var(--button-border)}
.more-work{text-align:center}.more-work>summary{background:var(--surface);color:var(--text);border-color:var(--line);margin-inline:auto}
.more-work>.work-grid{text-align:left}.more-work>summary:hover,.more-work>summary:focus-visible{background:var(--button-hover);color:var(--button-hover-text);border-color:var(--button-hover)}
.collection-links{border-color:var(--line)}
.spiral-section{background:var(--brand-ink)}
.spiral-title h2,.spiral-bottom a{color:#f8fcfa}
.spiral-title h2 span,[data-theme=light] .spiral-title h2 span{color:var(--brand-primary)}
.spiral-sticky>.section-meta,.spiral-selected .mini-label{color:#bdcece}
.spiral-exit{background:var(--bg)}
.spiral-exit h3,.spiral-exit h3 span{color:var(--text)}
[data-theme=light] .spiral-exit{background:#fffffff2}
.service-graphic-panel{background:var(--soft-orange)}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{background:var(--surface);color:var(--text);border-color:var(--control-border)}
.logo-scene-caption.sr-only{min-height:0}
/* New open skill signatures replace the rejected framed icon tiles. */
.skill-signature{color:var(--text)}
.skill-card .skill-graphic-panel{padding:3px 10px;background:none}
.service-craft .service-graphic-panel{background:none}
.service-graphic-panel .skill-signature{width:300px;height:260px;max-width:100%}
.signature-cursor,.signature-mesh,.signature-turntable,.signature-echo,.signature-type,.signature-layout-tile,.signature-growth{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .7s}
#creative-design:hover .signature-cursor,#creative-design:focus-within .signature-cursor{transform:translate(-14px,8px)}
#creative-design:hover .signature-trace,#creative-design:focus-within .signature-trace{stroke-dasharray:500;animation:signature-draw .9s ease both}
#video-editing:hover .signature-playhead,#video-editing:focus-within .signature-playhead{animation:signature-scrub 1.8s ease-in-out infinite alternate}
#3d-modelling:hover .signature-mesh,#3d-modelling:focus-within .signature-mesh{transform:rotate(18deg)}
#product-animation:hover .signature-turntable,#product-animation:focus-within .signature-turntable{transform:rotate(-12deg)}
.skill-card:hover .signature-type{transform:translate(-7px,5px)}
.skill-card:hover .signature-echo{transform:translate(12px,-8px);opacity:.1}
.skill-card:hover .signature-layout-tile{transform:translate(8px,-5px)}
.skill-card:hover .signature-growth{transform:translate(4px,-4px)}
@keyframes signature-draw{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}
@keyframes signature-scrub{from{transform:translateX(-50px)}to{transform:translateX(59px)}}
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus{outline-color:var(--focus)}
@media(max-width:760px){
 .hero.hero-brand{padding:108px 22px 26px}
 .hero-stage{gap:10px;min-height:0}
 .hero-brand .hero-copy>.eyebrow{font-size:10px;line-height:1.6;letter-spacing:.8px}
 .hero-brand h1{font-size:clamp(36px,10.3vw,46px);line-height:1.16;margin:13px 0 11px}
 .hero-role{font-size:18px;line-height:1.55;min-height:1.6em;max-width:none}
 .hero-brand .hero-intro{margin-top:17px;gap:17px;max-width:100%}
 .hero-brand .hero-description{font-size:14px;line-height:1.75;max-width:34ch}
 .hero-brand .primary-button{min-height:50px;padding:15px 22px;font-size:12px;gap:28px}
 .hero-brand .hero-logo-space{min-height:0;padding:0;gap:0}
 .logo-stage{height:clamp(160px,27svh,230px);width:100%;max-width:340px}
 .logo-canvas{border-radius:20px}
 .hero-brand .skills-fan{margin-top:28px}
}
@media(max-width:360px){.hero.hero-brand{padding-top:103px;padding-inline:21px}.hero-brand h1{font-size:36px}.hero-role{font-size:17px}.hero-brand .hero-description{font-size:13px;line-height:1.75}.hero-brand .hero-intro{gap:15px;margin-top:15px}.logo-stage{height:clamp(155px,27svh,195px)}}
@media(prefers-reduced-motion:reduce){.header{transition:none}.skill-signature *{animation:none!important;transition:none!important;transform:none!important}}

/* Latest theme-specific feedback, 25 October. */
:root .primary-button,:root .primary-button span,:root .service-enquiry,:root .service-enquiry span,:root .filters button[aria-pressed=true],:root .filters button[aria-pressed=true] sup{color:#fff!important}
:root[data-theme=light] .philosophy .focus-statement,:root[data-theme=light] .philosophy .focus-statement strong{color:#111}
:root[data-theme=dark] .philosophy .focus-statement strong,.games .section-heading h2 span,.about-title h2 span{color:#f75023!important}
.hero-brand .skills-fan .skill-graphic-panel{padding:0 12px;background:none}
.skill-work-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:13px}
.hero-brand .skills-fan .skill-card{transition:transform .65s cubic-bezier(.22,1,.36,1)!important}
@media(hover:hover) and (pointer:fine){.hero-brand .skills-fan .skill-card:hover{--raise:8px;--zoom:1}}
.testimonial-card{transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .5s}
.testimonial-card:hover{transform:translateY(-6px);border-color:#f75023;box-shadow:0 16px 35px #243c4412}
.testimonial-card.testimonial-ready{opacity:0;transform:translateY(25px)}
.testimonial-card.testimonial-visible{opacity:1;transform:translateY(0);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .5s}
@media(prefers-reduced-motion:reduce){.testimonial-card,.testimonial-card.testimonial-ready{opacity:1;transform:none;transition:none}.hero-brand .skills-fan .skill-card{transition:none!important}}
:root[data-theme=light]{--accent:#f75023;--link-hover:#f75023}
.hero-brand .skills-fan .skill-card img{pointer-events:none;user-select:none;-webkit-user-drag:none}

/* Stable desktop fan: image feedback stays inside fixed card hit areas. */
.hero-brand .skills-fan .skill-card,.hero-brand .skills-fan .skill-card:hover,.hero-brand .skills-fan .skill-card:focus-visible{--raise:0px!important;--zoom:1!important;filter:none!important}
.hero-brand .skills-fan .skill-visual{overflow:hidden;border-radius:13px;margin-inline:12px;padding:0}
.skill-work-image{transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
.skill-card:hover .skill-work-image,.skill-card:focus-visible .skill-work-image{transform:scale(1.035)}
.skill-card:hover .fan-caption strong{color:var(--brand-primary)}
.modelling-object{transform-origin:140px 132px;animation:model-breathe 5s ease-in-out infinite}
.modelling-handle{animation:handle-breathe 5s ease-in-out infinite}
.animated-product{transform-origin:140px 140px;animation:product-float 4s ease-in-out infinite}
.product-keyframes{animation:keyframe-pulse 4s ease-in-out infinite}
@keyframes model-breathe{0%,100%{transform:rotate(-4deg) translateY(3px)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes handle-breathe{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes product-float{0%,100%{transform:translateY(3px) rotate(-5deg)}50%{transform:translateY(-9px) rotate(5deg)}}
@keyframes keyframe-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.modelling-object,.modelling-handle,.animated-product,.product-keyframes{animation:none}.skill-work-image{transition:none}}
.skill-card:first-child .skill-work-image{object-position:center 72%}

/* Mobile art direction: logo first, introduction below. */
@media(max-width:760px){
 .hero-brand .hero-stage{display:flex;flex-direction:column;gap:15px}
 .hero-brand .hero-logo-space{order:-1;width:100%;margin:0}
 .hero-brand .hero-copy{width:100%}
 .hero-brand .logo-stage{height:clamp(210px,31svh,265px);max-width:390px}
}
@media(max-width:360px){.hero-brand .logo-stage{height:195px}}