*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,canvas{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:8px;top:-60px;background:#111;color:#fff;padding:10px 14px;z-index:200;border-radius:6px}
.skip-link:focus{top:8px}
:focus-visible{outline:3px solid #4EE68D;outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.noscript{position:fixed;bottom:0;left:0;right:0;background:#fff;color:#111;padding:12px;text-align:center;z-index:300}

/* View switching: only one site is in the layout at a time */
#online-site,#o-bg,#scene-canvas{display:none}
body[data-view="online"] #online-site,body[data-view="online"] #o-bg,body[data-view="online"] #scene-canvas{display:block}
body[data-view="online"] #offline-site{display:none}
body.is-locked,html:has(body.is-locked){overflow:hidden}

/* The Offline / Go Online switch (shared) */
.switch-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.mode-switch{display:inline-flex;align-items:center;gap:14px;border:2px solid #1f2937;background:#fff;color:#1f2937;border-radius:999px;padding:10px 18px;font:700 14px/1 Arial,sans-serif;letter-spacing:.06em;cursor:pointer;box-shadow:0 2px 0 #1f2937;transition:box-shadow .2s,transform .2s}
.mode-switch:hover{box-shadow:0 4px 0 #1f2937;transform:translateY(-1px)}
.ms-track{position:relative;width:64px;height:30px;border-radius:999px;background:#d1d5db;transition:background .35s;flex:none}
.ms-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.mode-switch[aria-checked="true"] .ms-track{background:linear-gradient(90deg,#A74FE6,#7D6191,#4EE68D)}
.mode-switch[aria-checked="true"] .ms-knob{transform:translateX(34px)}
.mode-switch[aria-checked="false"] .ms-label--off,.mode-switch[aria-checked="true"] .ms-label--on{opacity:1}
.mode-switch[aria-checked="false"] .ms-label--on,.mode-switch[aria-checked="true"] .ms-label--off{opacity:.45}
.mode-status{margin:0;font:600 14px/1 Arial,sans-serif;color:#374151;display:flex;align-items:center;gap:8px}
.mode-dot{width:10px;height:10px;border-radius:50%;background:#9ca3af}
body[data-state="online"] .mode-dot{background:#4ade80;box-shadow:0 0 10px #4ade80}
body[data-state="transforming"] .mode-dot{background:#fbbf24;animation:blink .6s infinite alternate}
@keyframes blink{to{opacity:.3}}

/* Contact form (shared structure) */
.contact-form{display:grid;gap:16px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-weight:600}
.field input,.field select,.field textarea{font:inherit;padding:12px 14px;border-radius:8px;width:100%}
.field-error{color:#b91c1c;font-size:.9rem;min-height:1em}
.field [aria-invalid="true"]{outline:2px solid #ef4444}
.form-status{margin:0;min-height:1.4em;font-weight:600}
.form-status.ok{color:#15803d}.form-status.err{color:#b91c1c}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- Colour veil: while the site is being built it looks uncoloured (grey/light).
        The paint spreading from the middle opens a circular "hole" (--r) that shows the real colours. ---- */
#color-veil{display:none;position:fixed;inset:0;pointer-events:none;z-index:120;--r:0px;--cx:50%;--cy:50%;
  -webkit-backdrop-filter:grayscale(1) invert(1) contrast(.95);backdrop-filter:grayscale(1) invert(1) contrast(.95);
  -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent calc(var(--r) - 24px),#000 var(--r));
  mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent calc(var(--r) - 24px),#000 var(--r))}
body.is-bare #color-veil{display:block}
/* stacking order for the finale: veil < paint < character < flash (raise these if your online.css uses bigger numbers) */
body #paint-canvas{z-index:130}
body #dev-wrap{z-index:140}
body #fx-flash{z-index:150}