/* Shared basics for SGV Site Co. sample sites */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus, #2f6bff); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

/* "This is a sample" ribbon */
.sample-bar { position: relative; z-index: 60; font: 500 12.5px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; padding: 8px 16px; background: #111; color: #e8e8e8; }
.sample-bar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sample-bar b { color: #ff5a5a; }

/* Reveal (visible without JS) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* Dialog base */
dialog { border: 0; padding: 0; max-width: min(560px, calc(100vw - 28px)); width: 100%; border-radius: 22px; box-shadow: 0 40px 100px rgba(0,0,0,.4); }
dialog::backdrop { background: rgba(10,10,12,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog[open] { animation: pop-in .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dlg-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 20px; line-height: 1; }
.demo-note { font-size: 12.5px; opacity: .7; margin-top: 14px; line-height: 1.45; }

/* Chips */
[data-choice] { border-radius: 999px; padding: 9px 14px; border: 1px solid currentColor; background: transparent; font-size: 14px; font-weight: 600; opacity: .8; transition: background .2s, color .2s, opacity .2s; }
[data-choice][aria-pressed="true"] { opacity: 1; }

/* Floating call bar on phones */
.callbar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50; display: none; gap: 8px; padding: 6px; border-radius: 999px; }
@media (max-width: 760px) { .callbar { display: grid; grid-template-columns: 1fr 1fr; } body { padding-bottom: 84px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  dialog[open] { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}