/* Sozou / intelligence in motion. Content stays readable before JS starts. */
.experience-site { --r: 14px; }
.experience-site .btn { border-radius: 8px; min-height: 46px; transition: transform 250ms var(--ease), background 250ms, box-shadow 250ms, border-color 250ms; }
.experience-site .btn b { font-size: 1.2em; font-weight: 400; margin-left: 18px; }
.experience-site :focus-visible { outline: 2px solid var(--spark); outline-offset: 5px; }
/* Portrait close controls stay as plain crosses without a ring or underline. */
@media (max-width: 760px) and (orientation: portrait) {
  .experience-site :is(.oc-close, .bk-dialog-x) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  .experience-site :is(.oc-close, .bk-dialog-x):focus-visible {
    outline: none;
    box-shadow: none;
  }
  .experience-site .bk-dialog-x { width: 44px; height: 44px; font-size: 0; color: var(--ink); }
  .experience-site .bk-dialog-x svg { display: none; }
  .experience-site .bk-dialog-x::before,
  .experience-site .bk-dialog-x::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 18px; height: 1.6px; margin: -.8px 0 0 -9px;
    border-radius: .8px; background: currentColor; transform: rotate(45deg);
  }
  .experience-site .bk-dialog-x::after { transform: rotate(-45deg); }
}
.experience-site .bar .btn { min-height: 38px; }
.experience-site .bar nav a { font-size: .8rem; }
.experience-site:not(.experience-home) { background: radial-gradient(ellipse at 85% 0%,rgba(148,184,248,.18),transparent 750px),#fafafc; }
.experience-site:not(.experience-home) .svc-title,
.experience-site:not(.experience-home) .sec-head h2,
.experience-site:not(.experience-home) .svc-copy h2 { font-family: var(--sans); font-weight: 500; letter-spacing: -.05em; line-height: 1.13; }
.experience-site:not(.experience-home) .svc-copy h2 em { font-family: var(--display); font-size: 1.13em; color: #264f8f; }
.experience-site:not(.experience-home) .offer-icon { gap: 14px; border: 0; overflow: visible; background: transparent; }
.experience-site:not(.experience-home) .offer-icon > a { border: 1px solid rgba(89,130,195,.2); border-radius: 14px; background: rgba(255,255,255,.68); box-shadow: 0 10px 30px -25px #385783; transition: background .3s,box-shadow .3s,border-color .3s; }
.experience-site:not(.experience-home) .offer-icon > a:hover { background: #fff; border-color: rgba(72,108,252,.5); box-shadow: 0 20px 40px -25px rgba(48,93,169,.4); }
.experience-site:not(.experience-home) .svc-viz { border: 1px solid rgba(81,129,196,.13); border-radius: 24px; background: radial-gradient(ellipse at 65% 30%,rgba(188,211,255,.2),rgba(255,255,255,.2)); box-shadow: inset 0 1px 0 #fff,0 24px 80px -60px rgba(50,85,147,.4); }
.experience-site:not(.experience-home) .svc-viz canvas { transition: scale .7s var(--ease); }.experience-site:not(.experience-home) .svc-viz:hover canvas { scale: 1.035; }
.experience-site:not(.experience-home) .posts a { border-radius: 10px; transition: padding .35s,background .35s; }.experience-site:not(.experience-home) .posts a:hover { background: rgba(154,189,247,.08); }

.experience-home {
  --maxw: 1360px; --pad: clamp(22px,5vw,76px); --header-overlap: 52px;
  background: var(--bg); color-scheme: light;
}
.experience-home::selection { background: #dce6ff; color: var(--navy); }
.experience-home :is(h1, h2, h3):where(:not(.rnews *, .work *)) { font-family: var(--sans); font-weight: 500; letter-spacing: -.055em; }
.experience-home h2 em:where(:not(.rnews *, .work *)), .experience-home h1 em { font-family: var(--display); font-weight: 400; letter-spacing: -.025em; color: var(--navy); }
.experience-home .bar-cta { border-color: var(--hair-2); color: var(--navy); }
/* The rule above outranks .btn:hover, which left the label navy on the dark fill. */
.experience-home .bar-cta:hover { color: var(--on-ink); }
.experience-home .btn-primary { color: var(--on-ink); background: var(--navy); border-color: var(--navy); box-shadow: 0 8px 30px -14px rgba(12,36,84,.35); }
.experience-home .btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); box-shadow: 0 10px 30px -12px rgba(12,36,84,.3); }
.experience-home .btn-primary::before { background: rgba(255,255,255,.2); }
.experience-home .btn-ghost { color: var(--ink-2); }
.experience-home .btn-ghost:hover { background: rgba(72,108,252,.05); }
.experience-home .field-glow { display: none; }
.experience-home .progress { background: var(--spark); box-shadow: 0 0 12px rgba(72,108,252,.3); }
.experience-home main > section { position: relative; }

/* A generous stage for a legible headline and an actual dimensional object. */
.experience-home .hero { margin-top: calc(-1 * var(--header-overlap)); padding: calc(48px + var(--header-overlap)) 0 24px; min-height: 100svh; overflow: clip; isolation: isolate; justify-content: center; }
.experience-home .hero::before { z-index: -1; top: -12%; right: -12%; width: 82vw; height: 95%; max-width: none; max-height: none; background: radial-gradient(ellipse at 70% 18%,rgba(130,169,243,.22),transparent 68%); transform: none; }
.experience-home .hero::after { z-index: -1; inset: 0; width: auto; height: auto; max-width: none; max-height: none; background-image: linear-gradient(rgba(12,36,84,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(12,36,84,.035) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(transparent,#000 28%,#000 70%,transparent); transform: none; }
.experience-home .hero-grid { width: 100%; grid-template-columns: 1.03fr 1fr; gap: 10px; align-items: center; }
.experience-home .hero-copy { position: relative; z-index: 2; grid-template-rows: auto auto auto auto; }
.hero-intro { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font: 500 .64rem/1.5 var(--mono); color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.intro-line { width: 30px; height: 1px; background: var(--spark); box-shadow: 0 0 12px rgba(72,108,252,.2); }
.experience-home .hd-slide { grid-area: 2 / 1; }
.experience-home .hd-slide .kicker { display: inline-flex; align-items: center; margin-bottom: 18px; color: var(--navy); font-size: .76rem; letter-spacing: .025em; }
.experience-home .spark-dot { background: var(--spark); box-shadow: 0 0 10px rgba(72,108,252,.2); }
.experience-home .hd-slide h2 { max-width: none; font-size: clamp(2.85rem,4.65vw,4.55rem); line-height: 1.08; font-weight: 500; letter-spacing: -.055em; text-wrap: auto; }
.experience-home .hd-slide h2 em { color: var(--navy); font-size: 1.1em; }
.experience-home .hero-sub { margin-top: 24px; font-size: .95rem; line-height: 1.85; max-width: 44ch; color: var(--ink-2); }
.experience-home .hero-copy .hero-acts { grid-area: 3 / 1; margin-top: 30px; gap: 14px; }
.experience-home .hero-acts .btn { font-size: .78rem; padding: 13px 20px; }
.hero-reassurance { grid-area: 4 / 1; margin-top: 20px; font-size: .66rem; color: var(--ink-3); letter-spacing: .01em; }
.experience-home .hero-ring { order: initial; position: relative; z-index: 1; width: calc(100% + 70px); margin-right: -60px; height: min(60svh,620px); aspect-ratio: auto; max-height: none; transform: translate3d(0,calc(var(--hero-progress,0) * 80px),0) scale(calc(1 + var(--hero-progress,0) * .12)); }
.experience-home #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: clamp(36px,5vh,70px); padding-top: 22px; position: relative; z-index: 3; }
.hero-bottom::before { content: ''; height: 1px; position: absolute; top: 0; left: var(--pad); right: var(--pad); background: linear-gradient(90deg,var(--hair-2),var(--hair)); }
.hero-explore { display: inline-flex; align-items: center; gap: 12px; font: .58rem var(--mono); color: var(--ink-3); text-transform: none; letter-spacing: .02em; }
.scroll-symbol { font-size: 1.1rem; color: var(--navy); transition: transform .3s; }.hero-explore:hover .scroll-symbol { transform: translateY(4px); }
.hero-controls { display: flex; align-items: center; gap: 22px; }.hero-count { font: .62rem var(--mono); color: var(--ink-3); white-space: nowrap; }.hero-count b { color: var(--navy); font-weight: 400; }
.experience-home .hd-dots { position: static; top: auto; margin: 0; gap: 1px; align-items: center; }
.experience-home .hd-dot { width: 18px; height: 34px; flex: 0 0 18px; }
.experience-home .hd-dot::after { width: 4px; height: 4px; border-radius: 2px; background: var(--navy); opacity: .4; }
.experience-home .hd-dot.on::after { height: 14px; transform: none; opacity: 1; background: var(--spark); box-shadow: 0 0 12px rgba(72,108,252,.18); }
.hero-playback { display: flex; align-items: center; gap: 4px; }
.hero-arrow,.hero-toggle { display: grid; place-items: center; background: transparent; color: var(--navy); border: 1px solid var(--hair); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; transition: color .2s,background .2s,border-color .2s; }
.hero-toggle { font-size: .65rem; }.hero-arrow:hover,.hero-toggle:hover { color: var(--navy); border-color: var(--hair-2); background: #e9eefb; }

/* Demonstrations and conversion. Work, research and footer use the original layout. */
.experience-home .sec-head h2 { font-size: clamp(2.4rem,4.2vw,3.8rem); max-width: 25ch; }
.experience-home .sec-head p { font-size: .9rem; color: var(--ink-2); line-height: 1.85; }
.experience-home .chan-wrap { max-width: none; padding-inline: clamp(20px,2.8vw,48px); }
.experience-home .sw { grid-template-columns: repeat(4,minmax(0,1fr)); border-radius: 16px; box-shadow: 0 24px 80px -40px rgba(12,36,84,.22); }
.experience-home .sw-core { background: #f0f3fb; }
.experience-home .sw-lane { background: var(--surface); transition: background .5s,border-color .5s; }
.experience-home .sw.live .sw-lane.live { background: #f5f7fc; }
.experience-home .sw-in .sw-say { background: #f0f2f8; border-color: var(--hair); }
.experience-home .sw-out .sw-say { background: #eaf0fd; border-color: rgba(72,108,252,.1); }
.experience-home .sw-rail b.on { color: var(--navy); }.experience-home .sw-acts { margin-top: 32px; }
.sw-voice-stage { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 12px 0 6px; }
.sw-orbw { --sw-glow: rgba(72,108,252,.18); width: 132px; height: 132px; border-radius: 50%; position: relative; box-shadow: 0 0 52px 7px var(--sw-glow); transition: box-shadow .5s; }
.sw-orb { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 36%,#e4f3ff,#5cb0f0 44%,#2a72d8 74%,#0f3a8a 120%); }
.sw-orb canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.sw-voice-state { min-height: 1.4em; font: 500 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sw-lane.speaking-customer .sw-orbw { --sw-glow: rgba(39,146,220,.34); }
.sw-lane.speaking-agent .sw-orbw { --sw-glow: rgba(72,108,252,.34); }
.sw-video { gap: 18px; }
.sw-video .sw-head { min-height: 30px; flex-wrap: nowrap; container-type: inline-size; }
.sw-video .sw-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 262px) { .sw-video .sw-meta { display: none; } }
.sw-vlang { flex: none; margin-left: auto; display: inline-flex; }
.sw-vlang[hidden] { display: none; }
.sw-vlang select { appearance: none; -webkit-appearance: none; width: 104px; height: 30px; padding: 0 24px 0 10px; border: 1px solid var(--hair-2); border-radius: 100px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%230c2454' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center / 9px 6px; color: var(--ink-2); color-scheme: light; font: 600 .72rem/1 var(--sans); letter-spacing: var(--ls); text-overflow: ellipsis; cursor: pointer; transition: color .2s,border-color .2s; }
.sw-vlang select:hover { color: var(--ink); border-color: var(--navy); }
.sw-vlang select:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
@media (pointer: coarse) { .sw-vlang select { font-size: 16px; } }
.sw-vlang select[hidden] { display: none; }
.sw-lang-trigger { display: inline-flex; align-items: center; gap: 7px; max-width: 132px; min-height: 34px; padding: 7px 10px; border: 1px solid #dce3f0; border-radius: 11px; background: linear-gradient(180deg,#fff,#f3f6fc); color: var(--navy); font: 600 .72rem/1.2 var(--sans); box-shadow: 0 2px 5px rgba(12,36,84,.04); cursor: pointer; }
.sw-lang-trigger span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sw-lang-trigger::after { content: ''; flex: none; width: 5px; height: 5px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sw-lang-trigger:hover,.sw-lang-trigger[aria-expanded="true"] { border-color: #a8badc; background: #eef3ff; }
.sw-lang-trigger img,.sw-lang-menu img { flex: none; width: 20px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(12,36,84,.08); }
.sw-lang-menu { position: fixed; z-index: 10000; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 4px; border: 1px solid rgba(12,36,84,.12); border-radius: 14px; background: #fff; color: #16181f; font-family: var(--sans); box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.sw-lang-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sw-lang-menu[hidden] { display: none; }
.sw-lang-menu button { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: inherit; font: 400 14px/1.4 var(--sans); text-align: start; white-space: nowrap; cursor: pointer; transition: background .1s; }
.sw-lang-menu button:hover,.sw-lang-menu button:focus-visible { background: #fafafc; }
.sw-lang-menu button[aria-checked="true"] { background: rgba(72,108,252,.1); font-weight: 600; }
.sw-lang-menu img { width: 22px; box-shadow: none; }
.sw-lang-trigger:focus-visible,.sw-lang-menu button:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
@media (pointer: coarse) { .sw-lang-trigger { min-height: 40px; }.sw-lang-menu button { min-height: 44px; } }
.sw-video-stage { position: relative; width: 100%; min-width: 0; aspect-ratio: 3/4; border-radius: 13px; overflow: hidden; background: #0c2454; }
/* Karmen's face: a still background plate (layout v3: with her torso baked in), then the moving part of her, cut
   into horizontal bands (video-demo.js bandMatrices): the head band (one still + an SVG of mouth patches and eye /
   brow / lid sprites drawn in the 720x960 frame's own coordinates, so they land on the still's pixel grid) turns
   rigidly about her neck and fades out over the seam below her chin; the neck band below follows its shift less and
   less down to the still torso. Every band is a box only as tall as its strip, and its images carry the person's
   alpha (export_tile_bands.py): no CSS mask, no clip, so nothing is drawn off-screen or twice. A mouth change, a
   glance or a blink swaps one small SVG image: it repaints only that image's box in its band's layer. The bands are
   compositor layers only while animations move them (.moving). Mouth patches change over two display frames: the
   one on top at half opacity (.half), then the swap. (.sw-face-frame / .sw-face-eyes: the older full-frame markup;
   its incoming frame fades in on top of the outgoing one, which stays opaque (.prev), or, going back to that frame,
   the shown one fades out on top of it (.out).) The slow zoom is for idle moments only - it pauses while she speaks,
   when the head motion takes over - and the compositor plays it smoothly, at the display's own rate (2026-10-05:
   until then it stepped at 10 fps, beating against the sway's 12.5 fps steps and the loop's 25 fps frames - on a real
   iPhone her idle looked jittery). video-demo.js holds it where it is (data-zoom="held") on a device that cannot carry
   motion laid over the loop. The pre-rendered clips (the recorded demo, the greeting
   in each language) play in .sw-face-clip, one <video> over all of it inside .sw-face (so the idle zoom scales it
   with the face), fading in and out over 200 ms (= CLIP_FADE in video-demo.js); video-demo.js makes it on demand. While
   she is not speaking the idle loop (her breathing, sway, blinks) plays in .sw-face-idle, under the clip and over the
   live face, with the same 200 ms dissolve (= IDLE_FADE); .off takes it out of view (it keeps its frame) while the live
   face speaks. While it plays, video-demo.js sways it a little (a transform animation about the transform-origin
   below the tile, interpolated by the compositor: her upper body drifts), and .sw-face-idle-mat - the room, with her
   cut out and the cut feathered - lies over it, so the room stays put; the two always carry the same .on / .off. */
.sw-face { position: absolute; inset: 0; animation: swPortraitDrift 18s ease-in-out infinite alternate; }
.sw-video.sounding .sw-face,.sw-face[data-zoom="held"] { animation-play-state: paused; }
.sw-face img,.sw-face svg { position: absolute; display: block; }
.sw-face-frame,.sw-face-plate { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-face-body { position: absolute; inset: 0; }
.sw-face-band { position: absolute; left: 0; width: 100%; transform-origin: 0 0; }
.sw-face.moving .sw-face-band { will-change: transform; }
.sw-face-band img,.sw-face-plate { object-fit: fill; }
.sw-face-still { inset: 0; width: 100%; height: 100%; }
.sw-face svg { inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 4; }
.sw-face-frame { opacity: 0; z-index: 0; }
.sw-face-frame.prev { opacity: 1; z-index: 1; }
.sw-face-frame.on { opacity: 1; z-index: 2; transition: opacity 55ms linear; }
.sw-face-frame.out { opacity: 0; z-index: 3; transition: opacity 55ms linear; }
.sw-face-sprite { opacity: 0; }
.sw-face-sprite.on { opacity: 1; }
.sw-face-sprite.on.half { opacity: .5; }
.sw-face-idle,.sw-face-idle-mat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .2s linear; }
.sw-face-idle { transform-origin: 50% 125%; }
.sw-face-idle.on,.sw-face-idle-mat.on { opacity: 1; }
.sw-face-idle.off,.sw-face-idle-mat.off { visibility: hidden; }
.sw-face-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 6; opacity: 0; pointer-events: none; transition: opacity .2s linear; }
.sw-face-clip.on { opacity: 1; }
.sw-face-clip[hidden] { display: none; }
.sw-face-eyes { z-index: 4; }
.sw-face-eyes { opacity: 0; transition: opacity 40ms linear; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.sw-face-eyes.on { opacity: 1; }
@keyframes swPortraitDrift { from { transform: scale(1.01) translateY(0); } to { transform: scale(1.035) translateY(-.6%); } }
.sw-video-start { position: absolute; z-index: 3; top: 80%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; transform: translate(-50%,-50%); border: 0; background: none; color: #fff; cursor: pointer; }
.sw-video-start svg { width: 43px; height: 43px; margin-left: 5px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.72)); transition: transform .2s ease,filter .2s ease; }
.sw-video-start:hover svg { transform: scale(1.15); filter: drop-shadow(0 4px 13px rgba(0,0,0,.85)); }
.sw-video-start:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
.sw-video-start[hidden],.sw-video-stop[hidden] { display: none; }
.sw-video-stop { position: absolute; z-index: 4; right: 12px; bottom: 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 30px; padding: 8px 14px; background: rgba(7,24,55,.72); color: #fff; font: 600 .72rem var(--sans); cursor: pointer; }
.sw-video-stop:hover { background: #0c2454; }
@media (prefers-reduced-motion: reduce) { .sw-face { animation: none; } }
.sw-video-status { color: var(--ink-2); font-size: .78rem; }.sw-video-transcript { color: var(--navy); font-size: .9rem; line-height: 1.55; }
.sw-video-status:empty,.sw-video-transcript:empty { display: none; }
/* --- the recorded demo (no live minutes to give): a bubble, not a status line ---
   Same visual language as the switchboard's own agent bubbles (.sw-out .sw-say),
   so a visitor who scrolled up past the chat/voice/phone lanes recognises this as
   the same kind of thing, not a different, lesser control. The wave reuses
   .sw-wave/.sw-lane.sounding wholesale: this article already carries .sw-lane,
   so toggling .sounding on it is the exact mechanism the Voice lane's "Hear it"
   uses, and it needed no new animation. */
.sw-video-demo { display: flex; align-items: flex-start; gap: 12px; }
.sw-video-demo[hidden] { display: none; }
.sw-video-demo-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 2px; padding: 0; border: 1px solid var(--hair-2); border-radius: 50%; background: var(--surface); color: var(--navy); cursor: pointer; transition: color .2s,border-color .2s,background .2s; }
.sw-video-demo-play:hover { color: var(--spark); border-color: var(--spark); }
.sw-video-demo-play svg { width: 15px; height: 15px; margin-left: 2px; }
.sw-video-demo-play.playing svg { display: none; }
.sw-video-demo-play.playing::before { content: ''; width: 11px; height: 11px; border-radius: 1px; background: currentColor; }
.sw-video-demo-say { flex: 1 1 auto; min-width: 0; }
.sw-video-demo-say .sw-say { background: rgba(12,36,84,.07); border: 1px solid transparent; border-radius: var(--r) var(--r) var(--r) 1px; transition: box-shadow var(--mid) var(--ease); }
.sw-video.sounding .sw-video-demo-say .sw-say { box-shadow: inset 3px 0 0 var(--spark); }
.sw-video-demo-say .sw-wave { height: 16px; margin-top: 8px; max-width: 90px; }
.sw-video-demo-note { margin-top: 7px; font-size: .68rem; letter-spacing: var(--ls); color: var(--ink-3); }
.sw-langsel-row { justify-content: center; }.sw-langsel { display: grid; place-items: center; min-height: 38px; }
.sw-langsel button { grid-area: 1/1; visibility: hidden; opacity: 0; pointer-events: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 7px 0; background: none; color: var(--ink-3); font-size: .76rem; font-weight: 500; transition: opacity .35s,color .2s; }
.sw-langsel button[aria-pressed="true"] { visibility: visible; opacity: 1; pointer-events: auto; background: none; color: var(--navy); border-bottom-color: var(--spark); }
.sw-langsel button[aria-pressed="true"]:hover { color: var(--spark); }
.experience-home .faq-head h2 { font-size: clamp(2.1rem,4vw,3.4rem); }.experience-home .faq-list { gap: 50px; }.experience-home .faq-q { color: var(--navy); }
/* No border-top and no hard-edged tint: the section's wash lives on ::before and is
   masked in over its first 240px, so the FAQ melts into it with no visible seam.
   The eased stops (a smoothstep, not a straight ramp) avoid a faint band where a
   linear fade starts. */
.experience-home #contact { position: relative; isolation: isolate; margin-top: 50px; padding: 120px 0; }
.experience-home #contact::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 0%,rgba(139,175,245,.1),transparent 60%),linear-gradient(#f5f7fc,var(--bg)); -webkit-mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.16) 60px,rgba(0,0,0,.5) 120px,rgba(0,0,0,.84) 180px,#000 240px); mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.16) 60px,rgba(0,0,0,.5) 120px,rgba(0,0,0,.84) 180px,#000 240px); }
.experience-home .bk-head { margin-bottom: 60px; }.experience-home .bk-head h2 { font-size: clamp(2.5rem,4.5vw,4rem); }.experience-home .bk-head p.sub { max-width: 58ch; margin: 0 auto; text-wrap: balance; color: var(--ink-2); line-height: 1.9; }
.experience-home .bk-col-head { color: var(--navy); font-weight: 500; }.experience-home .bk-lede { color: var(--ink-3); }
.experience-home .bk-day.on { color: var(--on-ink); background: var(--navy); }.experience-home .bk-pill input:checked + span { color: var(--on-ink); background: var(--navy); border-color: var(--navy); }.experience-home .bk-select select { background-color: var(--surface); color-scheme: light; }
.experience-home .bk-select select::picker(select) { background: var(--surface); border-color: var(--hair-2); color: var(--ink); }
.experience-home .form-msg.ok { color: #2b6a45; }.experience-home .form-msg.bad { color: #a3242b; }

@media (min-width: 1500px) { .experience-home .hero-grid { max-width: 1460px; }.experience-home .hero-ring { max-height: 720px; } }
/* Laptops (1280-1600) and tablets get the four doors as a 2x2 grid; four across only from 1680 (owner, 2026-10-01). The cells
   are wide here, so bubbles keep a chat-widget measure and the portrait keeps the size it has at ~1000px instead of
   growing to ~700x930 and stretching the phone lane next to it. */
@media (max-width: 1679px) and (min-width: 821px) {
  .experience-home .sw { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .experience-home .sw-msg { max-width: min(92%,30rem); }
  .experience-home .sw-video-stage { max-width: 440px; margin-inline: auto; }
}
@media (max-width: 1100px) {
  .experience-home .hero-grid { grid-template-columns: 1fr 1fr; }.experience-home .hero-ring { width: calc(100% + 50px); margin-right: -40px; }.experience-home .hd-slide h2 { font-size: 3.3rem; }
  .hero-controls { gap: 12px; }.hero-explore { font-size: .5rem; }
}
@media (max-width: 820px) {
  .experience-home .sw { grid-template-columns: 1fr; }
  .experience-home .hero { padding-top: calc(48px + var(--header-overlap)); padding-bottom: 30px; min-height: 0; }
  .experience-home .hero-grid { grid-template-columns: 1fr; gap: 10px; }.experience-home .hero-copy { text-align: left; max-width: 640px; }.hero-intro { margin-bottom: 24px; }.experience-home .hd-slide h2 { font-size: clamp(2.8rem,7vw,4rem); }
  .experience-home .hero-sub { max-width: 47ch; font-size: .9rem; }.experience-home .hero-copy .hero-acts { justify-content: flex-start; }.experience-home .hero-ring { order: 1; width: min(100%,530px); height: auto; aspect-ratio: 1; max-height: none; margin: -15px 0 -15px; justify-self: center; transform: none; }
  .hero-reassurance { font-size: .61rem; }.hero-bottom { margin-top: 20px; flex-wrap: wrap; justify-content: center; padding-top: 20px; gap: 18px; }.hero-explore { order: 2; font-size: .57rem; }.hero-controls { gap: 16px; }
  /* Common Questions, one column (owner, 2026-10-01: "even spacing"). site.css stacks the two
     .faq-col here, so the desktop 50px gap above turns into an empty band between the languages
     and not-technical questions. Close it, and drop the second column's top rule, which would
     otherwise sit on the first column's last bottom rule as a doubled line. */
  .experience-home .faq-list { gap: 0; }.experience-home .faq-col + .faq-col { border-top: 0; }
}

@media (max-width: 600px) {.experience-site .bar-cta { font-size: .65rem; padding: 6px 12px; }.experience-site .bar nav a { font-size: .65rem; }
  .experience-home .hero { padding-top: calc(40px + var(--header-overlap)); }.hero-intro { font-size: .54rem; margin-bottom: 24px; }.experience-home .hd-slide .kicker { font-size: .69rem; margin-bottom: 13px; }.experience-home .hd-slide h2 { font-size: clamp(2.45rem,9.7vw,3.2rem); line-height: 1.1; }
  .experience-home .hero-sub { font-size: .86rem; margin-top: 20px; line-height: 1.85; }.experience-home .hero-copy .hero-acts { margin-top: 26px; gap: 8px; }.experience-home .hero-acts .btn { font-size: .68rem; padding: 11px 14px; }.experience-home .btn b { margin-left: 10px; }.hero-reassurance { max-width: 44ch; font-size: .56rem; margin-top: 18px; }
  .experience-home .hero-ring { margin-top: 5px; width: calc(100% + 20px); margin-bottom: -5px; }.hero-controls { display: grid; grid-template-columns: auto auto; width: 100%; justify-content: space-between; gap: 8px; }.hero-playback { grid-row: 1; grid-column: 2; }.experience-home .hd-dots { grid-row: 2; grid-column: 1/-1; justify-content: space-between; }.experience-home .hd-dot { width: 26px; flex-basis: 26px; }.hero-arrow,.hero-toggle { width: 38px; height: 38px; }
  .experience-home .faq-list { gap: 0; }.experience-home #contact { margin-top: 0; padding-top: 75px; }.experience-home .bk-head { margin-bottom: 35px; }.experience-home .bk-head h2 { font-size: 2.8rem; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .experience-home .hero { padding-top: calc(20px + var(--header-overlap)); padding-bottom: 12px; }
  .experience-home .hero-grid { gap: 4px; }
  .experience-home .hero-ring { order: -1; height: clamp(190px, calc(100svh - 520px), 380px); aspect-ratio: auto; margin: 0 0 4px; }
  .experience-home .hd-slide .kicker { margin-bottom: 8px; }
  .experience-home .hero-sub { margin-top: 12px; line-height: 1.65; }
  .experience-home .hero-copy .hero-acts { margin-top: 14px; }
  .experience-home .hero-reassurance { margin-top: 10px; }
  .experience-home .hero-bottom { margin-top: 12px; padding-top: 12px; gap: 10px; }
  .experience-home .hd-dots { grid-row: 1; }
  .experience-home .hero-controls { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .experience-home .hero-count { grid-row: 2; grid-column: 1; justify-self: end; }
  .experience-home .hero-playback { grid-row: 2; justify-self: start; }
  .experience-home .hero-bottom::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-face { animation: none !important; }
  .experience-site *, .experience-site *::before, .experience-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .experience-site:not(.experience-home) .svc-viz:hover canvas { scale: 1; }.experience-home .hero-ring { transform: none; }.experience-home .hero-toggle { display: none; }
}