/* NexVerto voice widget, "Talk to Atlas" (Joe, issue #7), inline on /atlas in the page flow, so it never covers anything
   (Joe, 2026-10-15). Built on the site's own tokens, type and motion; every token has a fallback so the widget also reads
   correctly on pages that load a different stylesheet. */
a {text-decoration:none!important;}

.atlas {
  --a-bg:var(--surface,#152029); --a-bg-2:var(--surface-2,#1a2731); --a-bg-3:var(--surface-3,#22313d);
  --a-ink:var(--ink,#f3f3ed); --a-muted:var(--ink-muted,#b9c5cc); --a-dim:var(--ink-dim,#97a7b1);
  --a-line:var(--border,#263540); --a-line-2:var(--border-strong,#3b4d5a);
  --a-brand:var(--brand,#104fb6); --a-brand-ink:var(--brand-ink,#ffffff); --a-accent:var(--accent,#8cbfff);
  --a-shadow:var(--shadow-lift,0 1px 0 rgba(255,255,255,.05) inset,0 20px 44px rgba(0,0,0,.42));
  --a-sans:var(--sans,"IBM Plex Sans","IBM Plex Fallback",-apple-system,"Segoe UI",Arial,sans-serif);
  --a-serif:var(--serif,"Fraunces","Fraunces Fallback",Georgia,serif);
  --a-orb-1:#8cbfff; --a-orb-2:#104fb6; --a-ring:#8cbfff;
  display:block; max-width:480px; margin-top:32px; color:var(--a-ink); font:400 16px/1.5 var(--a-sans); text-align:left;
  min-height:272px;   /* the ready panel's height, up to a three-line hint, kept before atlas.js builds it: nothing below moves */
}
html[data-theme=light] .atlas {
  --a-bg:var(--surface,#ffffff); --a-bg-2:var(--surface-2,#f1f0ea); --a-bg-3:var(--surface-3,#e8e7e0);
  --a-ink:var(--ink,#132430); --a-muted:var(--ink-muted,#475863); --a-dim:var(--ink-dim,#5a6a75);
  --a-line:var(--border,#e1dfd7); --a-line-2:var(--border-strong,#c4c1b7);
  --a-accent:var(--accent,#104fb6);
  --a-shadow:var(--shadow-lift,0 2px 4px rgba(19,36,48,.06),0 18px 40px rgba(19,36,48,.11));
  --a-ring:#104fb6;
}
.atlas *,.atlas *::before,.atlas *::after {box-sizing:border-box;}
.atlas [hidden] {display:none!important;}
:where(.atlas button) {font:inherit; color:inherit; -webkit-tap-highlight-color:transparent;}
.atlas :focus-visible {outline:3px solid var(--a-accent); outline-offset:3px;}

/* The orb: Atlas's presence. Its ring carries the call state. */
.atlas-orb {position:relative; display:inline-grid; place-items:center; flex:none; width:28px; height:28px;}
.atlas-core {width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 34% 30%,var(--a-orb-1),var(--a-orb-2) 78%);}
.atlas-ring {position:absolute; inset:0; border-radius:50%; border:2px solid var(--a-ring); opacity:0;}
.atlas[data-state=connecting] .atlas-ring {opacity:1; border-style:dashed;}
.atlas[data-state=listening] .atlas-ring {opacity:.7;}
.atlas[data-state=speaking] .atlas-ring {opacity:1; border-width:4px;}
.atlas[data-state=muted] .atlas-ring {opacity:.7; border-style:dashed;}
.atlas[data-state=muted] .atlas-core,.atlas[data-state=error] .atlas-core {opacity:.5;}
.atlas[data-state=error] .atlas-core {filter:grayscale(1);}

/* Panel */
.atlas-panel {display:flex; flex-direction:column; gap:16px; padding:20px;
  border:1px solid var(--a-line); border-radius:18px; background:var(--a-bg); box-shadow:var(--a-shadow);}
.atlas-head {display:flex; align-items:center; gap:12px;}
.atlas-head .atlas-orb {width:36px; height:36px;}
.atlas-head .atlas-core {width:22px; height:22px;}
.atlas-title {flex:1; min-width:0; font:500 22px/1.2 var(--a-serif); color:var(--a-ink);}
.atlas-mute svg {fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.atlas-hint {margin:0; color:var(--a-muted); font-size:15px; line-height:1.5;}
.atlas-status {margin:0; min-height:1.5em; color:var(--a-ink); font-size:17px; font-weight:500; line-height:1.5;}
.atlas-error {display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; border:1px solid var(--a-line-2); border-left:3px solid var(--a-accent); border-radius:10px; background:var(--a-bg-2);}
.atlas-error-text {margin:0; color:var(--a-ink); font-size:16px; line-height:1.5;}
.atlas-actions {display:flex; gap:12px;}

/* Controls: press, hover and focus follow the site's own buttons */
.atlas-btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 22px; border:1px solid var(--a-line-2); border-radius:10px;
  background:transparent; color:var(--a-ink); font:600 16px/1.3 var(--a-sans); white-space:nowrap; cursor:pointer;
  transition:transform 120ms ease-out,box-shadow 120ms ease-out,background-color 150ms,border-color 150ms;}
.atlas-go {flex:1;}
.atlas-btn.is-primary {background:var(--a-brand); border-color:var(--a-brand); color:var(--a-brand-ink); box-shadow:0 6px 16px rgba(0,0,0,.18);}
.atlas-btn:active {transform:translateY(1px); box-shadow:none;}
.atlas-mute {padding-inline:18px;}
.atlas-mute .atlas-slash {display:none;}
.atlas-mute[aria-pressed=true] {background:var(--a-bg-3); border-color:var(--a-accent);}
.atlas-mute[aria-pressed=true] .atlas-slash {display:inline;}
@media (hover:hover) and (pointer:fine) {
  .atlas-btn:hover {background:var(--a-bg-3); transform:translateY(-1px);}
  .atlas-btn.is-primary:hover {background:var(--a-brand); box-shadow:0 10px 22px rgba(0,0,0,.24);}
  .atlas-btn:active {transform:translateY(1px);}
}

/* The phone number is a link: the anchor stays transparent and its child carries the colour, as on the rest of the site. */
.atlas-call {display:inline-flex; align-items:center; min-height:44px; color:transparent!important; --link-ink:var(--a-accent); font-weight:600;}
.atlas-call > * {color:var(--link-ink)!important; background-image:linear-gradient(var(--link-ink),var(--link-ink)); background-position:left bottom; background-repeat:no-repeat; background-size:0 1px;
  transition:background-size 180ms ease-out;}
.atlas-call:is(:hover,:focus-visible) > * {background-size:100% 1px;}

/* Motion: the panel rises in, the ring moves with the call. Reduced motion keeps every state, still. */
@media (prefers-reduced-motion:no-preference) {
  .atlas-panel {animation:atlas-rise 200ms cubic-bezier(.2,.7,.2,1);}
  .atlas[data-state=connecting] .atlas-ring {animation:atlas-spin 1s linear infinite;}
  .atlas[data-state=listening] .atlas-ring {animation:atlas-breathe 2.8s ease-in-out infinite;}
  .atlas[data-state=speaking] .atlas-ring {animation:atlas-speak 1.2s ease-out infinite;}
}
@keyframes atlas-rise {from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:none;}}
@keyframes atlas-spin {to {transform:rotate(360deg);}}
@keyframes atlas-breathe {0%,100% {transform:scale(.92);} 50% {transform:scale(1.1);}}
@keyframes atlas-speak {0% {transform:scale(.9); opacity:1;} 100% {transform:scale(1.4); opacity:0;}}
@media (prefers-reduced-motion:reduce) {
  .atlas *,.atlas *::before,.atlas *::after {animation:none!important; transition:none!important;}
}
@media (forced-colors:active) {
  .atlas-panel,.atlas-btn,.atlas-error {border:1px solid CanvasText;}
  .atlas-core {forced-color-adjust:none;}
}
@media print {.atlas {display:none;}}

/* The /atlas page (Joe, 2026-10-15: "the /atlas is aligned left"): the site's hero split, heading and introduction on the left and
   Atlas on the right, on every screen wider than a phone; one column on a phone. The page fills the screen between the header and the
   footer with the split centred in it, so a tall screen has no dead gap, and the hero ends with a section's own spacing. */
body.p-atlas .wrap {display:flex; flex-direction:column; min-height:100vh; min-height:100svh;}
body.p-atlas main {flex:1 0 auto; display:flex; flex-direction:column; justify-content:center;}
body.p-atlas .p-page-hero {max-width:none; padding-bottom:88px;}
@media (width > 700px) {
  body.p-atlas .p-page-hero {display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:64px; align-items:center;}
  body.p-atlas .p-page-hero .atlas {justify-self:end; width:100%; margin-top:0;}
}
@media (700px < width <= 1100px) {body.p-atlas .p-page-hero {grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px;}}
@media (max-width:640px) {body.p-atlas .p-page-hero {padding-bottom:64px;}}