html{scroll-behavior:smooth}
body{margin:0;background:#0B0E13}
a{color:inherit}a:hover{color:inherit}
@keyframes whFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes whFloatSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes whShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.55}}
@keyframes whWave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(16deg)}}
@keyframes whBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes whBrow{0%,62%,100%{transform:translateY(0)}70%,86%{transform:translateY(-6px)}}
@keyframes whLook{0%,38%,100%{transform:translateX(0)}46%,84%{transform:translateX(-5px)}}
@keyframes whDrift{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(5px,-12px) rotate(4deg)}}
@keyframes whRise{0%{transform:translate(0,0) rotate(0deg);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(70px,-130px) rotate(14deg);opacity:0}}
@keyframes whSpin{to{transform:rotate(360deg)}}
@keyframes whSwing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes whTilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes whGlow{0%,100%{fill:#FF5A1F}50%{fill:#FFE7A8}}
@keyframes whDroop{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes whTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes whFlash{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes whBob{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-5deg)}}
@keyframes whPeek{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(-14px) rotate(-3deg)}}
@keyframes whFlow{to{stroke-dashoffset:-28}}
@keyframes whPlug{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@keyframes whFillIn{0%,6%{transform:scaleX(0)}18%,86%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
@keyframes whPop{0%,14%{transform:scale(0)}22%,86%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes whFeed{0%,6%{opacity:0;transform:translateY(10px)}14%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes whCursor{0%,12%{transform:translate(-120px,58px) scale(1)}40%{transform:translate(0,0) scale(1)}48%{transform:translate(0,0) scale(.8)}56%{transform:translate(0,0) scale(1)}62%{transform:translate(0,0) scale(1)}90%,100%{transform:translate(-120px,58px) scale(1)}}
@keyframes whPress{0%,44%,54%,100%{transform:translateY(0)}48%{transform:translateY(3px)}}
@keyframes whCheck{0%,100%{fill:#FFF4E6}10%,45%{fill:#4ADE80}}
@keyframes whPass{0%,100%{background-color:#FFF4E6}10%,60%{background-color:#4ADE80}}
@keyframes whDropIn{0%,8%{transform:translateY(-26px);opacity:0}20%,86%{transform:translateY(0);opacity:1}94%,100%{transform:translateY(0);opacity:0}}
@keyframes whCarry{0%{transform:translateX(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateX(64px);opacity:0}}
.whBtn{transition:transform .15s ease,box-shadow .15s ease}
.whBtn:hover{transform:translateY(-3px);box-shadow:0 5px 0 #0B0E13}
.whCard{transition:transform .2s ease,box-shadow .2s ease}
.whCard:hover{transform:translateY(-6px);box-shadow:0 6px 0 #0B0E13}
.whRow{transition:background-color .2s ease,color .2s ease}
.whRow:hover{background-color:#FF5A1F;color:#0B0E13}
@media (max-width: 1359px){.whHideNarrow{display:none}}
@media (max-width: 1439px){.whHideBelow1440{display:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* ===== Live-site layer: added on top of the canvas CSS by launch/export.py ===== */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFF4E6;color:#0B0E13}
.wx-root{min-width:0!important;min-height:100vh;overflow-x:clip}
main{display:flex;flex-direction:column;flex-grow:1}
[id]{scroll-margin-top:24px}

/* keyboard focus: an ink ring with a lemon halo reads on cream, cobalt, orange and ink */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #0B0E13;outline-offset:2px;box-shadow:0 0 0 6px #FFE04D}
.wx-skip{position:absolute;left:16px;top:-120px;z-index:100;padding:12px 20px;border:3px solid #0B0E13;border-radius:999px;background:#FFE04D;color:#0B0E13;font-weight:700;text-decoration:none}
.wx-skip:focus{top:16px}
.wx-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header: services drop-down on desktop, menu button below 1100px */
.wx-header{position:relative;z-index:40}
.wx-dd{position:relative;display:flex;align-items:center}
.wx-dd-panel{position:absolute;top:calc(100% + 6px);left:-18px;display:none;flex-direction:column;gap:2px;min-width:272px;padding:10px;border:3px solid #0B0E13;border-radius:22px;background:#FFF4E6;box-shadow:6px 6px 0 #0B0E13;z-index:50}
.wx-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.wx-dd:hover .wx-dd-panel,.wx-dd:focus-within .wx-dd-panel{display:flex}
.wx-dd-panel a{display:block;padding:11px 14px;border-radius:14px;color:#0B0E13;text-decoration:none;font-size:16px;font-weight:700;line-height:1.3}
.wx-dd-panel a:hover{background:#FF5A1F}
.wx-menu-btn{display:none;flex-shrink:0;align-items:center;justify-content:center;width:48px;height:48px;padding:0;box-sizing:border-box;border:3px solid #0B0E13;border-radius:50%;background:#FF5A1F;color:#0B0E13;cursor:pointer}
.wx-menu{display:none}
.wx-menu.is-open{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;padding:8px 20px 24px;background:#2E4BFF;border-bottom:3px solid #0B0E13}
.wx-menu a{display:flex;align-items:center;min-height:54px;border-bottom:2px solid rgba(255,244,230,.22);color:#FFF4E6;text-decoration:none;font-size:21px;font-weight:800;font-stretch:112.5%;letter-spacing:-.01em}
.wx-menu a.wx-menu-cta{justify-content:center;margin-top:18px;border:3px solid #0B0E13;border-radius:999px;background:#FF5A1F;color:#0B0E13;font-size:18px}

/* contact form */
.wx-pill{background:#FFFFFF!important;cursor:pointer}
.wx-pill:has(input:checked){background:#FF5A1F!important}
.wx-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* ---------- tablet and small laptop ---------- */
@media (max-width:1099px){
  .wx-pad{padding-left:32px!important;padding-right:32px!important}
  .wx-sec{padding-top:72px!important;padding-bottom:72px!important}
  .wx-sec.wx-flush-top{padding-top:0!important}
  .wx-hero{padding-top:32px!important;padding-bottom:64px!important}
  .wx-g12{grid-template-columns:minmax(0,1fr)!important;row-gap:36px!important}
  .wx-g12>*{grid-column:1/-1!important}
  .wx-g3,.wx-g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wx-fluid{width:auto!important;max-width:100%!important}
  .wx-svgfluid{max-width:100%;height:auto}
  h1{font-size:clamp(40px,8vw,76px)!important}
  h2{font-size:clamp(30px,5.6vw,52px)!important}
  nav[aria-label="Services"]{flex-wrap:wrap}
  .wx-header{height:76px!important}
  .wx-header .wx-nav-links{display:none!important}
  .wx-header .wx-nav-cta{margin-left:auto;margin-right:12px}
  .wx-menu-btn{display:flex}
  .wx-footer{height:auto!important}
  .wx-footer .wx-g12{row-gap:28px!important}
  .wx-wordmark{font-size:24vw!important;margin-top:56px!important}
  .wx-h3l{font-size:30px!important}
  .wx-cta{padding-bottom:210px!important}
  .wx-peek{width:240px!important;height:240px!important;right:24px!important;bottom:-48px!important}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  .wx-pad{padding-left:20px!important;padding-right:20px!important}
  .wx-sec{padding-top:56px!important;padding-bottom:56px!important}
  .wx-hero{padding-top:20px!important;padding-bottom:48px!important}
  .wx-g2,.wx-g3,.wx-g4{grid-template-columns:minmax(0,1fr)!important}
  h1{font-size:clamp(34px,10.2vw,46px)!important;line-height:.98!important}
  h2{font-size:clamp(28px,8.4vw,38px)!important;line-height:1!important}
  .wx-h3l{font-size:26px!important}
  .wx-header{height:68px!important}
  .wx-header>a:first-child{font-size:26px!important}
  .wx-header .wx-nav-cta{display:none!important}
  .wx-root a.whBtn{max-width:100%;height:auto!important;min-height:52px;padding-top:10px!important;padding-bottom:10px!important;white-space:normal!important;text-align:center;justify-content:center}
  .wx-cta{padding-bottom:150px!important}
  .wx-peek{width:170px!important;height:170px!important;right:12px!important;bottom:-34px!important}
  .wx-hide-sm{display:none!important}
  .wx-wordmark{font-size:25vw!important}
  .wx-legal{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
  .wx-legal>div{flex-wrap:wrap}
  .wx-form{padding:24px 20px!important}
  .wx-stat{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
  nav[aria-label="Services"]{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:12px!important}
  nav[aria-label="Services"]::-webkit-scrollbar{display:none}
  nav[aria-label="Services"]>a{flex-shrink:0}
  /* custom grids, phone layouts */
  .wx-gc-sec{grid-template-columns:minmax(0,1fr) auto!important;row-gap:12px!important}
  .wx-gc-sec>:nth-child(2){grid-column:1/-1;grid-row:2}
  .wx-gc-who{grid-template-columns:48px minmax(0,1fr)!important;row-gap:4px!important;align-items:start!important;border-radius:28px!important;padding:16px 18px 16px 14px!important}
  .wx-gc-who>:nth-child(1){grid-row:1/span 2}
  .wx-gc-who>:nth-child(3){grid-column:2}
  .wx-gc-run{grid-template-columns:34px minmax(0,1fr) auto!important}
  .wx-gc-run>:nth-child(2){display:none!important}
  .wx-gc-run+div{flex-wrap:wrap;padding-left:8px!important}
  .wx-portal-col{padding-top:0!important}
  .wx-gc-portal{grid-template-columns:minmax(0,1fr)!important}
  .wx-gc-portal>:first-child{display:none!important}
  .wx-gc-table{grid-template-columns:minmax(0,1fr) auto!important}
  .wx-gc-table>:nth-child(2){display:none!important}
  .wx-gc-noapi{grid-template-columns:minmax(0,1fr)!important;row-gap:20px!important;padding:24px!important}
}

/* the menu has five items and two drop-downs: switch to the menu button a little earlier */
@media (max-width:1279px){
  .wx-header .wx-nav-links{display:none!important}
  .wx-header .wx-nav-cta{margin-left:auto;margin-right:12px}
  .wx-menu-btn{display:flex}
}

/* products page: the Donna panel sits over the foot of the blue hero; Donna's own buttons */
.dn-btn{transition:background-color .2s ease}
.dn-btn:hover{background:#7A2E47!important}
.dn-btn2{transition:background-color .2s ease}
.dn-btn2:hover{background:#FFFFFF!important}
@media (max-width:1099px){
  .pr-hero{padding-bottom:136px!important}
  .pr-lift{margin-top:-88px!important}
  .dn-main{padding:48px 32px 44px!important}
}
@media (max-width:640px){
  .pr-hero{padding-bottom:112px!important}
  .pr-lift{margin-top:-72px!important;border-radius:24px!important}
  .dn-bar{padding:16px 20px!important}
  .dn-main{padding:32px 20px 28px!important}
  .dn-win{grid-template-columns:minmax(0,1fr)!important}
  .dn-side{display:none!important}
  .dn-title{font-size:22px!important}
  .dn-cell{padding:22px 20px 24px!important}
  .dn-with{padding:18px 20px 22px!important}
}

/* Whitty motion, in the spirit of iamstobbs.com (29 Sept 2026).
   Each character has ONE idle loop (4s) in which its parts move together:
   the body settles, the head tilts a beat later, the antenna follows through, a blink, a wave.
   Props only drift gently. No flashing lights, flowing dashes, spinning eyes or objects crossing the page.
   --ph shifts a character's place in the loop so characters never move in unison. */

:root { --loop: 4s; --idle: cubic-bezier(.45, 0, .55, 1); --settle: cubic-bezier(.33, 1, .68, 1); }

.rg-bob     { animation: rgBob var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-head    { transform-box: fill-box; transform-origin: 50% 100%; animation: rgHead var(--loop) var(--idle) calc(var(--ph, 0s) - .3s) infinite; }
.rg-antenna { transform-box: fill-box; transform-origin: 50% 100%; animation: rgAntenna var(--loop) var(--idle) calc(var(--ph, 0s) - .6s) infinite; }
.rg-wave    { transform-box: fill-box; transform-origin: 100% 100%; animation: rgWave var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-blink   { transform-box: fill-box; transform-origin: 50% 50%; animation: rgBlink var(--loop) linear var(--ph, 0s) infinite; }
.rg-shadow  { transform-box: fill-box; transform-origin: 50% 50%; animation: rgShadow var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-plug    { animation: rgPlug var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-spark   { transform-box: fill-box; transform-origin: 0% 50%; animation: rgSpark var(--loop) ease-out var(--ph, 0s) infinite; }
.rg-fill    { transform-box: fill-box; transform-origin: 0% 50%; animation: rgFill var(--loop) var(--settle) var(--ph, 0s) infinite; }
.rg-check   { transform-box: fill-box; transform-origin: 50% 50%; animation: rgCheck var(--loop) var(--settle) var(--ph, 0s) infinite; }
.rg-float   { animation: rgFloat var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-droop   { animation: rgDroop var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-twitch  { transform-box: fill-box; transform-origin: 50% 50%; animation: rgTwitch var(--loop) ease-in-out var(--ph, 0s) infinite; }
.rg-carry   { animation: rgCarry var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-brow    { animation: rgBrow var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-lid     { transform-box: fill-box; transform-origin: 0% 100%; animation: rgLid var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-point   { transform-box: view-box; transform-origin: 168px 260px; animation: rgPoint var(--loop) var(--idle) var(--ph, 0s) infinite; }
.rg-pulse   { transform-box: fill-box; transform-origin: 50% 50%; animation: rgPulse var(--loop) var(--idle) var(--ph, 0s) infinite; }
/* a beat apart, for things that happen in a row (the CRM rows filling in) */
.rg-d1 { animation-delay: calc(var(--ph, 0s) + .1s); }
.rg-d2 { animation-delay: calc(var(--ph, 0s) + .3s); }
.rg-d3 { animation-delay: calc(var(--ph, 0s) + .5s); }

@keyframes rgBob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes rgHead    { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes rgAntenna { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes rgWave    { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-16deg); } 75% { transform: rotate(6deg); } 85% { transform: rotate(-12deg); } }
@keyframes rgBlink   { 0%, 60%, 66%, 100% { transform: scaleY(1); } 63% { transform: scaleY(.1); } }
@keyframes rgShadow  { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.05); } }
@keyframes rgPlug    { 0%, 5%, 60%, 100% { transform: translateX(0); } 18%, 45% { transform: translateX(5px); } }
@keyframes rgSpark   { 0%, 16% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; transform: scale(1.1); } 34%, 100% { opacity: 0; transform: scale(1); } }
@keyframes rgFill    { 0%, 22% { transform: scaleX(0); opacity: 1; } 40%, 86% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes rgCheck   { 0%, 34% { transform: scale(0); } 42% { transform: scale(1.18); } 48%, 86% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes rgFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes rgDroop   { 0%, 25%, 100% { transform: translateY(0); } 40%, 75% { transform: translateY(7px); } }
@keyframes rgTwitch  { 0%, 58%, 82%, 100% { transform: rotate(0); } 64% { transform: rotate(-7deg); } 70% { transform: rotate(6deg); } 76% { transform: rotate(-3deg); } }
@keyframes rgCarry   { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateX(46px); opacity: 1; } 90%, 100% { transform: translateX(46px); opacity: 0; } }
@keyframes rgBrow    { 0%, 45%, 100% { transform: translateY(0); } 55%, 75% { transform: translateY(-4px); } }
@keyframes rgLid     { 0%, 40%, 100% { transform: rotate(0); } 52% { transform: rotate(-5deg); } 64% { transform: rotate(0); } }
@keyframes rgPoint   { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-6deg); } }
@keyframes rgPulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Products page: Donna's matter view files an email, once every 6s. At rest (and with motion off) the note shows. */
.dn-drop  { opacity: 0; animation: dnDrop 6s var(--settle) infinite; }
.dn-zone  { animation: dnZone 6s var(--idle) infinite; }
.dn-filed { animation: dnFiled 6s var(--settle) infinite; }
@keyframes dnDrop  { 0% { opacity: 0; transform: translateY(-6px); } 10% { opacity: 1; transform: translateY(-6px); } 30% { opacity: 1; transform: translateY(34px); } 40%, 100% { opacity: 0; transform: translateY(38px) scale(.85); } }
@keyframes dnZone  { 0%, 24%, 48%, 100% { border-color: rgba(26, 22, 20, .25); background-color: rgba(253, 244, 247, 0); } 32%, 40% { border-color: #B85570; background-color: rgba(253, 244, 247, 1); } }
@keyframes dnFiled { 0%, 40% { opacity: 0; transform: translateY(6px); } 50%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

/* cards and buttons ease out slowly instead of snapping */
.whCard { transition: transform .5s var(--settle), box-shadow .5s var(--settle); }
.whCard:hover { transform: translateY(-4px); box-shadow: 0 4px 0 #0B0E13; }
.whBtn { transition: transform .35s var(--settle), box-shadow .35s var(--settle), background-color .15s ease; }

/* blocks rise into place as they scroll into view. Everything is visible at rest; site.js marks blocks that start
   below the fold (.rv-wait) and plays the rise when each one arrives (.rv-in). --rv-delay staggers cards in a row. */
@keyframes rvIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rv-wait.rv-in { animation: rvIn 1s var(--settle) both; animation-delay: var(--rv-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  [class*="rg-"], .dn-drop, .dn-zone, .dn-filed { animation: none !important; }
  .rv-wait.rv-in { animation: none; }
}