.motion-dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: rgba(8, 17, 43, .985);
}

.motion-dialog::backdrop { background: rgba(4, 9, 24, .82); }
.motion-dialog-inner { box-sizing: border-box; display: flex; width: min(100%, 1600px); min-height: 100%; margin-inline: auto; padding: clamp(20px, 3vw, 48px); flex-direction: column; }
.motion-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.motion-dialog-head span { display: block; color: rgba(255,255,255,.54); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.motion-dialog-head h2 { margin: 7px 0 0; font-size: clamp(24px, 2.2vw, 36px); font-weight: 620; letter-spacing: -.035em; }
.motion-dialog-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.motion-dialog-actions > span { letter-spacing: .08em; }
.motion-dialog-head button, .motion-nav, .motion-timeline button { appearance: none; border: 1px solid rgba(255,255,255,.24); color: #fff; background: transparent; cursor: pointer; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; }
.motion-dialog-head button { min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
.motion-dialog-head button b { margin-left: 7px; color: #ff8b47; font-size: 20px; font-weight: 500; line-height: 0; vertical-align: -2px; }
.motion-viewer { position: relative; display: grid; flex: 1; min-height: 0; margin-block: clamp(20px, 3vh, 38px); place-items: center; }
.motion-media { position: relative; width: min(100%, 68vh, 960px); }
/* The frame carries the rounded corner and shadow so the video layer itself stays un-clipped for the compositor. */
.motion-frame { position: relative; overflow: hidden; border-radius: 16px; background: #030714; box-shadow: 0 36px 96px -42px rgba(0,0,0,.9); }
.motion-frame video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #030714; cursor: pointer; }
.motion-frame::after { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid rgba(255,255,255,.22); border-top-color: #ff8b47; border-radius: 50%; opacity: 0; content: ""; transition: opacity 200ms ease 120ms; animation: motion-spin 900ms linear infinite; pointer-events: none; }
.motion-frame.is-buffering::after { opacity: 1; }
@keyframes motion-spin { to { transform: rotate(360deg); } }
.motion-nav { position: absolute; z-index: 2; top: 50%; width: 54px; height: 54px; border-radius: 50%; transform: translateY(-50%); font-size: 24px; }
.motion-prev { left: max(0px, calc(50% - min(43vw, 560px))); transform: translate(-100%, -50%); }
.motion-next { right: max(0px, calc(50% - min(43vw, 560px))); transform: translate(100%, -50%); }

.motion-timeline { display: grid; grid-template-columns: auto 42px minmax(0, 1fr) 42px auto; align-items: center; gap: 12px; margin-top: 10px; }
.motion-timeline button { min-width: 60px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.motion-timeline span { color: rgba(255,255,255,.58); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.motion-timeline span:nth-of-type(2) { text-align: right; }
.motion-timeline input { --scrub-progress: 0%; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.motion-timeline input::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, #ff8b47 0 var(--scrub-progress), rgba(255,255,255,.26) var(--scrub-progress) 100%); }
.motion-timeline input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid var(--ink); border-radius: 50%; background: #ff8b47; }
.motion-timeline input::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, #ff8b47 0 var(--scrub-progress), rgba(255,255,255,.26) var(--scrub-progress) 100%); }
.motion-timeline input::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; background: #ff8b47; }
.motion-timeline input:focus-visible { outline: 2px solid #ff8b47; outline-offset: 2px; }
.motion-dialog-hint { margin: 0; color: rgba(255,255,255,.52); font-size: 11px; letter-spacing: .04em; text-align: center; }

#collins-project-form-modal {
  box-sizing: border-box;
  width: min(1520px, calc(100vw - 64px));
  height: min(900px, calc(100vh - 64px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: transparent;
  box-shadow: none;
}

#collins-project-form-modal::backdrop { background: rgba(7, 19, 44, .66); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }
#collins-project-form-modal iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 1; transition: opacity 160ms ease; }
#collins-project-form-modal .project-form-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; padding: 32px; color: var(--ink); background: linear-gradient(135deg, #f8fbff, #eef5ff); text-align: center; visibility: hidden; opacity: 0; }
#collins-project-form-modal .project-form-loading strong { font-size: clamp(24px, 3vw, 42px); letter-spacing: -.04em; }
#collins-project-form-modal .project-form-loading span { width: min(360px, 64vw); height: 8px; overflow: hidden; border-radius: 99px; background: rgba(15, 31, 68, .09); }
#collins-project-form-modal .project-form-loading span::after { content: ""; display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--blue); animation: project-form-load 900ms ease-in-out infinite alternate; }
#collins-project-form-modal.is-loading .project-form-loading { visibility: visible; opacity: 1; }
#collins-project-form-modal.is-loading iframe { opacity: 0; }
@keyframes project-form-load { to { transform: translateX(122%); } }
html.collins-project-form-open,
html.collins-project-form-open body { overflow: hidden !important; overscroll-behavior: none; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }


@media(max-width:760px){
  .motion-dialog-inner { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
  .motion-dialog-head { align-items: center; }
  .motion-dialog-head h2 { font-size: 22px; }
  .motion-dialog-head > div:first-child > span { display: none; }
  .motion-dialog-actions { gap: 10px; }
  .motion-viewer { align-content: center; margin-block: 14px; padding-bottom: 56px; }
  .motion-media { width: min(100%, calc(100dvh - 236px)); margin-inline: auto; }
  .motion-frame { border-radius: 12px; }
  .motion-nav { top: auto; bottom: 0; transform: none; }
  .motion-prev { left: 0; }
  .motion-next { right: 0; }
  .motion-timeline { grid-template-columns: auto 1fr auto; gap: 9px; }
  .motion-timeline [data-motion-elapsed], .motion-timeline [data-motion-duration] { display: none; }
  .motion-timeline button { min-width: 56px; }
  .motion-dialog-hint { display: none; }
  #collins-project-form-modal {inset:var(--project-form-top,0) 0 auto;width:100vw;max-width:100vw;height:var(--project-form-height,100dvh);max-height:none;margin:0;border-radius:0;overscroll-behavior:none;}
}
html.motion-open{overflow:hidden}
.motion-error{padding:20px;color:#fff;background:#223952;border-radius:8px;margin-top:15px;font-size:15px;line-height:1.5}
.motion-error button{color:#fff;background:none;border:1px solid #aebeca;padding:10px 16px;border-radius:22px;margin-left:12px}
.motion-dialog-description{font-size:15px;color:#d0dce3;max-width:700px;margin:0 auto 20px;text-align:center}
.motion-dialog-head span{color:#aebbc9;font-size:12px}
.motion-dialog-hint{color:#aebbc9;font-size:12px}
.motion-timeline button,.motion-timeline span{font-size:12px}
@media(prefers-reduced-motion:reduce){.motion-frame::after,#collins-project-form-modal .project-form-loading span::after{animation:none}}

@media (hover:hover) and (pointer:fine){
.motion-dialog-head button:hover,
.motion-nav:hover,
.motion-timeline button:hover { border-color: #ff8b47; color: var(--ink); background: #ff8b47; }
}

#site-preview.section-space { padding-bottom: clamp(56px, 6vw, 88px); }


/* ── Mobile responsiveness: no horizontal overflow, headings always wrap ── */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .halos-v2 :is(h1, h2, h3, h4, blockquote, p, li, dt, dd, figcaption) { overflow-wrap: break-word; text-wrap: pretty; }
  .halos-v2 :is(h1, h2, h3, blockquote) > span { white-space: normal; }
  .halos-v2 :is(img, video, iframe, svg, canvas, picture) { max-width: 100%; }
  .halos-v2 :is(table, pre) { max-width: 100%; overflow-x: auto; }
}
/* Large premium type that still fits a 320px screen */
@media (max-width: 430px) {
  .case-hero h1 { font-size: clamp(38px, 11.8vw, 52px); line-height: 1; letter-spacing: -.038em; }
  .section-head h2, .lead-copy h2, .challenge-copy h2, .mobile-copy h2, .scope-heading h2, .chapter-copy h2 { font-size: clamp(34px, 10.4vw, 46px); line-height: 1.02; letter-spacing: -.034em; }
  .pull-quote blockquote { font-size: clamp(34px, 10.6vw, 46px); line-height: 1.04; letter-spacing: -.034em; }
  .stats strong { font-size: clamp(34px, 10.4vw, 46px); }
  .eyebrow, .kicker { overflow-wrap: break-word; }
}
@media (max-width: 360px) {
  :root { --shell: calc(100vw - 36px); }
}