/* Shared by every Capital Site Web demo page: the demo label bar, reveal/parallax helpers,
   photo frames with designed fallbacks, and the demo notice. Brand styling lives in each page. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.csw-bar {
  position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: #0A1315; color: #E8F1EF; font: 500 13px/1.3 "Figtree", system-ui, sans-serif;
}
.csw-bar a { color: inherit; text-decoration: none; }
.csw-bar .csw-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csw-bar .csw-left span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #92A7A3; }
.csw-bar .csw-left b { color: #E8F1EF; font-weight: 600; }
.csw-bar svg { width: 22px; height: 22px; flex: none; }
.csw-bar .csw-right { display: flex; gap: 8px; flex: none; }
.csw-bar .csw-back { padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(232,241,239,.18); }
.csw-bar .csw-back:hover { border-color: #7FE3D8; }
.csw-bar .csw-cta { padding: 7px 14px; border-radius: 99px; background: #FF6B4A; color: #1A0904; font-weight: 600; }
.csw-bar .csw-pause { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(232,241,239,.18); background: none; color: inherit; font: inherit; cursor: pointer; }
.csw-bar .csw-pause:hover { border-color: #7FE3D8; }
.csw-bar .csw-pause svg { width: 13px; height: 13px; }
.csw-pause .i-play, .motion-paused .csw-pause .i-pause { display: none; }
.motion-paused .csw-pause .i-play { display: block; }
@media (max-width: 560px) { .csw-bar .csw-left span, .csw-bar .csw-back, .csw-bar .csw-pause span { display: none; } }
/* "Pause animations" freezes every CSS animation on the page. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.csw-skip { position: fixed; left: 12px; top: -80px; z-index: 300; padding: 12px 18px; border-radius: 10px; background: #0A1315; color: #E8F1EF; font: 600 15px/1.2 "Figtree", system-ui, sans-serif; text-decoration: none; }
.csw-skip:focus { top: 12px; }
.csw-legal { flex-basis: 100%; margin-top: 28px; padding-top: 18px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); font: 400 13px/1.6 system-ui, sans-serif; }
footer.foot .csw-legal a { color: inherit; font-size: inherit; text-decoration: underline; }

/* Floating "Back to Capital Site Web" bubble (same pill shape as "Start a project"), in each demo's brand color */
.csw-fab {
  position: fixed; z-index: 80; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 13px 20px; border-radius: 99px;
  font: 600 15px/1 "Figtree", system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  background: var(--fab-bg, #FF6B4A); color: var(--fab-fg, #1A0904);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition: transform .2s ease, box-shadow .2s ease;
}
.csw-fab svg { width: 17px; height: 17px; flex: none; }
.csw-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12) inset; }
.csw-fab:focus-visible { outline: 3px solid var(--fab-bg, #FF6B4A); outline-offset: 3px; }
body[data-demo="ember"] { --fab-bg: #D9622B; --fab-fg: #1A0C05; }
body[data-demo="fade"]  { --fab-bg: #D4202A; --fab-fg: #FFFFFF; }
body[data-demo="north"] { --fab-bg: #FFD23F; --fab-fg: #0D2A4A; }
body[data-demo="rise"]  { --fab-bg: #4A1F1A; --fab-fg: #FFF7EF; }
/* Sit above Northline's phone call bar; step aside while a menu or the bag is open. */
@media (max-width: 760px) { body[data-demo="north"] .csw-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 400px) { .csw-fab { padding: 12px 16px; font-size: 14px; } }
.nav-open .csw-fab, .bag-open .csw-fab { opacity: 0; pointer-events: none; visibility: hidden; }

/* Photo frame: the designed background shows until the photo loads, and stays if it can't. */
.ph { position: relative; overflow: hidden; background: var(--ph, #333); isolation: isolate; }
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 4px 4px; mix-blend-mode: overlay;
}
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ph video { display: block; }
.ph img.loaded, .ph video.loaded { opacity: 1; }
.ph[data-label]::after {
  content: attr(data-label); position: absolute; left: 14px; bottom: 12px; z-index: -1;
  font: 500 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; opacity: .55; color: #fff;
}

/* Reveal: content is visible by default; script adds the motion only when it's allowed. */
.js-motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js-motion [data-reveal].in { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }

/* Demo notice (used after demo forms are submitted) */
.demo-note {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 200;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: all .35s ease;
  width: min(520px, calc(100% - 32px)); padding: 14px 18px; border-radius: 14px;
  background: #0A1315; color: #E8F1EF; font: 500 14px/1.45 "Figtree", system-ui, sans-serif; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.demo-note.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.demo-note b { color: #7FE3D8; }

/* Animations play on every device; with "reduce motion" turned on only smooth scrolling is dropped. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}