/* Auto-scoped house/sky art from spruce-works-design-vibe.html. Do not restyle the hub. */

#quoteDecisionOverlay .quote-vibe-art, #quoteDecisionOverlay .quote-vibe-art{
  --ink:#1a1612;
  --paper:#efe6d2;
  --paper-2:#e8dcc4;
  --paper-deep:#d9c9a8;
  --red:#7a1515;
  --gold:#c9a86c;
  --cream:#f5e6d8;
  --typewriter:"Special Elite",ui-monospace,monospace;
  --display:"Libre Baskerville",Georgia,serif;
  /* House art is drawn at 220×190; scale it up for 100% browser zoom */
  --house-scale:1.7;
  /* Hand-drawn pencil brick palette */
  --pencil:#2a241e;
  --graphite:#4a423a;
  --brick:#b56b52;
  --brick-mid:#a85f48;
  --brick-light:#c47860;
  --mortar:rgba(42,36,30,.48);
  --roof-lead:#2c2620;
  --glass:#e8dcc8;
  --wood:#5c4030;
  /* Set by JS from typing length; fallbacks if script fails */
  --t-spin:4.5s;
  --t-morph:4.9s;
}






/* The ad is an open sketchbook — spine, page edges, cover ajar at the binding */
#quoteDecisionOverlay .quote-vibe-art .book{
  position:relative;
  width:min(560px,94vw);
  perspective:1800px;
  transform-style:preserve-3d;
}
#quoteDecisionOverlay .quote-vibe-art .book-back{
  position:absolute;
  inset:-5px -7px -7px -11px;
  background:
    repeating-linear-gradient(118deg,transparent 0 2px,rgba(42,36,30,.06) 2px 3px),
    linear-gradient(160deg,#6b4228 0%,#5a3620 55%,#4a2c1a 100%);
  border-radius:3px 10px 10px 4px;
  box-shadow:0 44px 100px rgba(0,0,0,.55);
  z-index:0;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .book-spine{
  position:absolute;
  left:-8px;top:-2px;bottom:-3px;width:14px;
  background:
    linear-gradient(90deg,#3a2416 0%,#5c3a22 38%,#2e1c12 100%);
  border-radius:3px 0 0 3px;
  box-shadow:inset -1px 0 0 rgba(242,235,224,.12);
  z-index:2;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .book-spine::after{
  content:"";
  position:absolute;left:5px;top:10%;bottom:10%;width:2px;
  background:linear-gradient(180deg,transparent,rgba(201,168,108,.45),transparent);
  border-radius:1px;
}
#quoteDecisionOverlay .quote-vibe-art .book-edge{
  position:absolute;
  right:-6px;top:10px;bottom:10px;width:6px;
  background:
    repeating-linear-gradient(180deg,
      #f2ebe0 0 2px,
      #d9c9a8 2px 3px,
      #cfc0a4 3px 4px);
  border-radius:0 2px 2px 0;
  z-index:2;
  pointer-events:none;
  box-shadow:1px 0 0 rgba(42,36,30,.25);
}
#quoteDecisionOverlay .quote-vibe-art .book-ribbon{
  position:absolute;
  right:18%;
  top:-10px;
  width:10px;
  height:42px;
  background:linear-gradient(180deg,#7a1515,#5c1010);
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
  z-index:3;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .book-cover{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform:rotateY(-108deg);
  transform-style:preserve-3d;
  z-index:40;
  pointer-events:none;
  border-radius:2px 8px 8px 2px;
}
#quoteDecisionOverlay .quote-vibe-art .cover-face{
  position:absolute;
  inset:0;
  border-radius:2px 8px 8px 2px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#quoteDecisionOverlay .quote-vibe-art .cover-inside{
  transform:rotateY(180deg);
  background:
    radial-gradient(ellipse at 20% 15%,rgba(255,255,255,.35),transparent 40%),
    linear-gradient(165deg,var(--paper) 0%,var(--paper-2) 100%);
  box-shadow:inset 0 0 0 1px rgba(42,36,30,.2);
}
#quoteDecisionOverlay .quote-vibe-art .cover-inside::after{
  content:"";
  position:absolute;inset:12px;
  border:1.2px dashed rgba(42,36,30,.18);
  border-radius:2px;
}
#quoteDecisionOverlay .quote-vibe-art .cover-outside{
  background:
    repeating-linear-gradient(118deg,transparent 0 2px,rgba(42,36,30,.07) 2px 3px),
    repeating-linear-gradient(-28deg,transparent 0 3px,rgba(42,36,30,.04) 3px 4px),
    linear-gradient(165deg,#c4a06a 0%,#a8844e 48%,#8a6a3c 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:28px 24px 32px;
  text-decoration:none;
  color:#f2ebe0;
  box-shadow:
    inset 0 0 0 1.5px rgba(42,36,30,.45),
    inset 0 0 0 5px rgba(242,235,224,.08);
}
#quoteDecisionOverlay .quote-vibe-art .cover-mark{
  margin:0;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:0.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(242,235,224,.82);
  text-shadow:0 1px 0 rgba(42,36,30,.35);
}
#quoteDecisionOverlay .quote-vibe-art .cover-title{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(2.4rem,8vw,3.3rem);
  line-height:.92;
  letter-spacing:-.02em;
  text-align:center;
  color:#f5e6d8;
  text-shadow:
    0 1px 0 #2a241e,
    1px 1px 0 rgba(42,36,30,.35);
}
#quoteDecisionOverlay .quote-vibe-art .cover-title em{
  display:block;
  font-family:var(--typewriter);
  font-style:normal;
  font-weight:400;
  font-size:.72em;
  letter-spacing:.04em;
  margin-top:.12em;
}
#quoteDecisionOverlay .quote-vibe-art .cover-rule{
  width:46%;
  height:10px;
}
#quoteDecisionOverlay .quote-vibe-art .cover-rule svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .cover-house{
  width:72px;height:52px;
  margin-top:4px;
}
#quoteDecisionOverlay .quote-vibe-art .cover-house svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .book.is-closing .book-cover{
  animation:bookClose 1.55s cubic-bezier(.42,.02,.18,1) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .book.is-shut .book-cover{
  transform:rotateY(0deg);
  pointer-events:auto;
}
#quoteDecisionOverlay .quote-vibe-art .book.is-shut .book-cover:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}
@keyframes bookClose{
  0%{transform:rotateY(-108deg)}
  100%{transform:rotateY(0deg)}
}

/* Light page so dark roof stays visible */
#quoteDecisionOverlay .quote-vibe-art .card{
  width:100%;
  background:
    radial-gradient(ellipse at 18% 8%,rgba(255,255,255,.4),transparent 42%),
    radial-gradient(ellipse at 88% 92%,rgba(122,21,21,.04),transparent 40%),
    linear-gradient(165deg,var(--paper) 0%,var(--paper-2) 55%,var(--paper-deep) 100%);
  border-radius:2px 8px 8px 3px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.4);
  padding:clamp(36px,5vh,52px) clamp(28px,5vw,56px) clamp(32px,4.5vh,48px);
  text-align:center;
  overflow:visible;
  position:relative;
  z-index:1;
}
/* Same technique as .cleaning-refresh-brand on cleaning.html —
   circular gnome logo attached to wooden-sign background image.
   Anchored bottom-left of the house stage (may overlap the house). */
#quoteDecisionOverlay .quote-vibe-art .brand-lockup{
  --brand-gnome:48px;
  --brand-gap:0.22rem;
  position:absolute;
  /* Left edge of the scaled house, nudged further left so it sits by the bush */
  left:max(0px, calc(50% - (110px * var(--house-scale)) - 16px));
  bottom:4px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--brand-gap);
  margin:0;
  /* Top/bottom pad matches wood; right pad leaves room for the pointed tip */
  padding:0.38rem 0.85rem 0.4rem 0.14rem;
  color:#f2ebe0;
  text-decoration:none;
  isolation:isolate;
  opacity:0;
  transform:translateY(10px) scale(.94) rotate(-2deg);
  animation:brandIn 0.7s cubic-bezier(.2,.9,.2,1) calc(var(--t-morph) + 2.05s) forwards;
  /* Keep the sign crisp — not under the house pencil filter */
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));
  transition:filter .2s ease;
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup:hover{
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.34)) brightness(1.04);
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup:focus-visible{
  outline:2px solid var(--red);
  outline-offset:5px;
  border-radius:6px;
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup::before{
  content:"";
  position:absolute;
  /* Wood sits under the text and tucks under the right half of the gnome */
  top:-0.06rem;
  right:-0.2rem;
  bottom:-0.04rem;
  left:calc(var(--brand-gnome) * 0.42);
  background:url("assets/wooden-sign-v1.webp") center / 100% 100% no-repeat;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.25));
  z-index:-1;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup img{
  width:var(--brand-gnome);
  height:var(--brand-gnome);
  min-width:var(--brand-gnome);
  border:2.5px solid #3a0d12;
  border-radius:50%;
  object-fit:cover;
  object-position:center 42%;
  box-shadow:0 3px 8px rgba(2,15,19,.3);
  background:#1a2a1a;
  flex-shrink:0;
  position:relative;
  z-index:1;
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup span{
  /* One base size so title + sub scale and center as a single block */
  --brand-type:0.7rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.14em;
  font-size:var(--brand-type);
  /* Stage width tracks the title; keeps both lines on the same center axis */
  width:9.35em;
  min-width:0;
  max-width:none;
  padding:0.06em 0.2em 0.1em 0.05em;
  text-align:center;
  position:relative;
  z-index:1;
  box-sizing:border-box;
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup strong,
#quoteDecisionOverlay .quote-vibe-art .brand-lockup small{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
  color:#f2ebe0;
  text-shadow:
    0 1px 0 rgba(44,25,10,.45),
    0 1px 3px rgba(3,18,23,.4);
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup strong{
  font-size:1em;
  letter-spacing:0.02em;
  line-height:1.08;
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup small{
  font-size:0.62em;
  letter-spacing:0.1em;
  text-transform:uppercase;
  line-height:1.2;
  color:rgba(242,235,224,.94);
  opacity:0.96;
}
@keyframes brandIn{
  to{opacity:1;transform:rotate(-2.5deg)}
}

#quoteDecisionOverlay .quote-vibe-art .tagline{
  font-family:var(--display);
  font-size:clamp(1.35rem,3.2vw,1.85rem);
  font-weight:700;
  font-style:italic;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:20ch;
  margin:0 auto clamp(22px,3.5vh,34px);
  text-wrap:balance;
  opacity:0;
  transform:translateY(8px);
  /* After house animation wraps */
  animation:rise 0.65s ease calc(var(--t-morph) + 1.7s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .contact{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 24px;
  margin-top:clamp(22px,3.5vh,34px);
  opacity:0;
  transform:translateY(8px);
  animation:rise 0.6s ease calc(var(--t-morph) + 1.95s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .contact a{
  color:var(--ink);
  text-decoration:none;
  font-family:var(--typewriter);
  font-size:clamp(1.05rem,2.4vw,1.28rem);
  letter-spacing:.04em;
  border-bottom:1.5px dashed rgba(26,22,18,.35);
  padding-bottom:3px;
  border-radius:1px;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
#quoteDecisionOverlay .quote-vibe-art .contact a:hover{
  color:var(--red);
  border-bottom-color:var(--red);
}
#quoteDecisionOverlay .quote-vibe-art .contact a:focus-visible{
  color:var(--red);
  border-bottom-color:var(--red);
  outline:2px solid var(--red);
  outline-offset:4px;
}
#quoteDecisionOverlay .quote-vibe-art .contact-phone{
  font-size:clamp(1.15rem,2.6vw,1.42rem);
  letter-spacing:.08em;
}
#quoteDecisionOverlay .quote-vibe-art .contact-sep{
  color:rgba(26,22,18,.32);
  font-family:var(--typewriter);
  font-size:1.05rem;
  user-select:none;
}

/* House illustration — laptop → browser → hand-drawn pencil brick house */
#quoteDecisionOverlay .quote-vibe-art .house-stage{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  /* Reserve layout space for the scaled house + bush overhang */
  width:min(420px,86vw);
  height:calc(190px * var(--house-scale) + 28px);
  margin:0 auto;
  position:relative;
  overflow:visible;
}
#quoteDecisionOverlay .quote-vibe-art .house-defs{
  position:absolute;
  width:1px;
  height:1px;
  overflow:visible;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .house{
  width:220px;
  height:190px;
  position:relative;
  transform:scale(var(--house-scale));
  transform-origin:center bottom;
  overflow:visible;
}
#quoteDecisionOverlay .quote-vibe-art .house>*{position:absolute}

/* ── Geometry (all bottoms measured from house floor)
   ground top after morph: 24px
   wall: bottom 24px, height 78px → top 102px
   roof base sits at 102px so it meets the wall top exactly
── */

/* Phase 1: screen (wall). Lawn line stays hidden until the house morph. */
#quoteDecisionOverlay .quote-vibe-art .ground{
  left:10px;right:10px;bottom:18px;height:6px;
  background:
    repeating-linear-gradient(90deg,
      var(--pencil) 0 4px,
      var(--graphite) 4px 6px,
      var(--pencil) 6px 12px,
      transparent 12px 14px);
  background-color:var(--pencil);
  border-radius:2px 3px 1px 2px;
  box-shadow:
    0 1px 0 rgba(42,36,30,.35),
    0 0 0 1px rgba(42,36,30,.5);
  opacity:0;
  transform-origin:center;
  animation:baseToGround 0.4s ease var(--t-morph) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .ground::after{
  /* sketchy understroke on the lawn line after morph */
  content:"";
  position:absolute;left:-4px;right:-4px;bottom:-3px;height:3px;
  background:
    radial-gradient(ellipse 8px 3px at 15% 50%,var(--pencil) 40%,transparent 70%),
    radial-gradient(ellipse 10px 3px at 45% 60%,var(--graphite) 35%,transparent 70%),
    radial-gradient(ellipse 9px 3px at 75% 40%,var(--pencil) 40%,transparent 70%),
    radial-gradient(ellipse 7px 3px at 92% 55%,var(--graphite) 35%,transparent 70%);
  opacity:0;
  animation:pop 0.3s ease calc(var(--t-morph) + 0.15s) forwards;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .wall{
  left:48px;bottom:28px;width:124px;height:78px;
  background:#2a241c;
  border:2.5px solid var(--pencil);
  border-radius:2px 3px 1px 2px;
  box-shadow:
    inset 0 0 0 1px rgba(201,168,108,.12),
    1px 1px 0 rgba(42,36,30,.25),
    -0.5px 0.5px 0 rgba(42,36,30,.15);
  opacity:0;
  transform:scaleY(.15);
  transform-origin:bottom;
  overflow:hidden;
  z-index:2;
  animation:buildUp 0.55s cubic-bezier(.2,.8,.2,1) 0.55s forwards,
             screenToWall 0.45s ease calc(var(--t-morph) + 0.05s) forwards;
}
/* Pencil bricks — individually sketched running bond, fades in as the screen becomes a wall */
#quoteDecisionOverlay .quote-vibe-art .bricks{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
  pointer-events:none;
  opacity:0;
  animation:brickReveal 0.45s ease calc(var(--t-morph) + 0.05s) forwards;
}

/* Phase 2: browser chrome inside screen */
#quoteDecisionOverlay .quote-vibe-art .browser{
  position:absolute;inset:5px 5px 6px;display:flex;flex-direction:column;
  background:var(--paper);border:1.5px solid var(--pencil);border-radius:2px 3px 2px 1px;
  opacity:0;transform:scale(.92);transform-origin:top center;
  animation:browserIn 0.35s ease 1.05s forwards,fadeOut 0.35s ease calc(var(--t-morph) + 0.05s) forwards;
  overflow:hidden;z-index:3; /* above brick face */
}
#quoteDecisionOverlay .quote-vibe-art .browser-bar{
  position:relative;height:12px;flex:0 0 auto;
  background:var(--paper-deep);border-bottom:1px solid var(--pencil);
  display:flex;align-items:center;gap:3px;padding:0 5px;
}
#quoteDecisionOverlay .quote-vibe-art .browser-bar i{
  position:relative;width:4px;height:4px;border-radius:50%;background:var(--pencil);opacity:.55;
}
#quoteDecisionOverlay .quote-vibe-art .browser-bar i:nth-child(1){background:var(--red);opacity:.85}
#quoteDecisionOverlay .quote-vibe-art .browser-bar i:nth-child(2){background:var(--gold);opacity:.9}
#quoteDecisionOverlay .quote-vibe-art .addr{
  position:relative;margin:3px 4px 0;height:11px;flex:0 0 auto;
  background:#fffdf7;border:1px solid var(--pencil);border-radius:1px 2px 1px 2px;
  display:flex;align-items:center;padding:0 4px;overflow:hidden;
  /* JS types into .addr-text; when the caret hits the right edge, .addr-scroll shifts left */
}
#quoteDecisionOverlay .quote-vibe-art .addr-scroll{
  display:inline-flex;
  align-items:center;
  min-width:0;
  white-space:nowrap;
  font-family:var(--typewriter);
  font-size:8px;
  letter-spacing:.02em;
  color:var(--ink);
  transform:translateX(0);
  will-change:transform;
}
#quoteDecisionOverlay .quote-vibe-art .addr-text{
  white-space:nowrap;
}
#quoteDecisionOverlay .quote-vibe-art .addr-caret{
  display:inline-block;
  width:1px;
  height:7px;
  margin-left:1px;
  flex-shrink:0;
  background:var(--ink);
  animation:blink 0.45s step-end infinite,cursorHide 0.01s linear var(--t-morph) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .browser-body{
  position:relative;flex:1;margin:3px 4px 4px;background:var(--cream);
  border:1px solid rgba(26,22,18,.25);overflow:hidden;
}
#quoteDecisionOverlay .quote-vibe-art .spinner{
  position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border:1.5px solid rgba(26,22,18,.15);border-top-color:var(--red);border-radius:50%;
  opacity:0;
  animation:spinShow 0.25s ease var(--t-spin) forwards,fadeOut 0.22s ease calc(var(--t-spin) + 0.45s) forwards,spin 0.5s linear infinite;
}
#quoteDecisionOverlay .quote-vibe-art .addr-lock{
  width:6px;height:7px;margin-right:3px;flex-shrink:0;
  display:block;
}
#quoteDecisionOverlay .quote-vibe-art .page-sketch{
  position:absolute;inset:2px 3px 2px;
  opacity:0;
  animation:pageSketchIn .4s ease calc(var(--t-spin) + 0.42s) forwards,
            fadeOut .3s ease calc(var(--t-morph) + .05s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .page-sketch svg{display:block;width:100%;height:100%;overflow:visible}

/* Laptop-only desk scene — fades when the house arrives */
#quoteDecisionOverlay .quote-vibe-art .laptop-prop{
  pointer-events:none;
  opacity:0;
  z-index:1;
}
#quoteDecisionOverlay .quote-vibe-art .laptop-prop svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .desk-line{
  left:2px;right:2px;bottom:8px;height:8px;
  animation:propIn .4s ease .7s forwards,fadeOut .35s ease var(--t-morph) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .laptop-deck{
  left:26px;bottom:10px;width:168px;height:18px;
  z-index:1;
  animation:propIn .4s ease .8s forwards,fadeOut .32s ease var(--t-morph) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .lid-bezel{
  position:absolute;
  left:0;right:0;top:0;height:8px;
  z-index:4;
  animation:propIn .3s ease .7s forwards,fadeOut .25s ease var(--t-morph) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .mug{
  left:4px;bottom:14px;width:20px;height:26px;
  z-index:3;
  animation:propIn .4s cubic-bezier(.2,1.15,.3,1) 1s forwards,fadeOut .3s ease var(--t-morph) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .mug .steam-wisp{
  transform-origin:center bottom;
  animation:steamWisp 2.1s ease-in-out 1.3s infinite;
}
#quoteDecisionOverlay .quote-vibe-art .mug .steam-wisp:nth-child(2){animation-delay:1.7s}
#quoteDecisionOverlay .quote-vibe-art .sketch-pencil{
  left:194px;bottom:16px;width:28px;height:9px;
  z-index:3;
  animation:propIn .4s cubic-bezier(.2,1.15,.3,1) 1.12s forwards,fadeOut .3s ease var(--t-morph) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .notepad{
  left:-6px;bottom:10px;width:18px;height:16px;
  z-index:2;
  animation:propIn .4s cubic-bezier(.2,1.15,.3,1) 1.18s forwards,fadeOut .3s ease var(--t-morph) forwards;
}
@keyframes propIn{
  from{opacity:0;transform:translateY(5px) scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes pageSketchIn{
  from{opacity:0;transform:translateY(3px)}
  to{opacity:1;transform:none}
}
@keyframes steamWisp{
  0%,100%{transform:translate(0,0);opacity:.6}
  50%{transform:translate(1.2px,-3px);opacity:.15}
}

/* Phase 3–4: pencil house parts
   Wall top after morph = 24 + 78 = 102px from floor.
   Roof base sits exactly on that line. */
#quoteDecisionOverlay .quote-vibe-art .roof{
  left:36px;
  bottom:102px;          /* base of triangle = wall top */
  width:148px;
  height:62px;
  background:transparent;
  border:none;
  opacity:0;
  transform:translateY(-18px) scale(.9);
  transform-origin:center bottom;  /* scale from the base so it lands on the wall */
  animation:roofDrop 0.45s cubic-bezier(.2,.9,.2,1.1) calc(var(--t-morph) + 0.1s) forwards;
  z-index:3;
  overflow:visible;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .roof-draw{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

#quoteDecisionOverlay .quote-vibe-art .chimney{
  left:142px;
  bottom:120px;          /* sits on the roof slope */
  width:18px;
  height:36px;
  background:#d4c2a6;
  border:2px solid var(--pencil);
  border-radius:1px 2px 1px 1px;
  box-shadow:
    1px 1px 0 rgba(42,36,30,.2),
    inset 0 0 0 1px rgba(196,120,96,.15);
  opacity:0;
  transform:translateY(10px) rotate(1deg);
  animation:chimneyIn 0.35s ease calc(var(--t-morph) + 0.3s) forwards;
  z-index:2;             /* under roof so slope clips it cleanly */
  overflow:visible;
}
#quoteDecisionOverlay .quote-vibe-art .chimney-bricks{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .chimney::after{
  content:"";position:absolute;left:-4px;top:-6px;right:-4px;height:8px;
  background:
    repeating-linear-gradient(90deg,
      var(--pencil) 0 4px,
      var(--graphite) 4px 6px,
      var(--pencil) 6px 10px);
  background-color:var(--pencil);
  border-radius:1px 2px 0 0;
  box-shadow:0 0 0 1px rgba(42,36,30,.35);
}

/* Chimney smoke — pencil cloud-puffs rising from the stack */
#quoteDecisionOverlay .quote-vibe-art .smoke{
  position:absolute;
  left:151px;          /* chimney center: 142 + 18/2 */
  bottom:166px;        /* just above the chimney cap */
  width:0;height:0;
  z-index:7;
  pointer-events:none;
  opacity:0;
  animation:smokeOn 0.01s linear calc(var(--t-morph) + 0.7s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .puff{
  position:absolute;
  left:0;bottom:0;     /* sit on the chimney mouth, rise from there */
  width:18px;height:13px;
  margin-left:-9px;
  opacity:0;
  pointer-events:none;
  animation:smokePuff 3.1s ease-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .puff svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .puff-1{animation-delay:calc(var(--t-morph) + 0.75s);width:16px;height:12px;margin-left:-8px}
#quoteDecisionOverlay .quote-vibe-art .puff-2{animation-delay:calc(var(--t-morph) + 1.5s);width:19px;height:14px;margin-left:-9.5px}
#quoteDecisionOverlay .quote-vibe-art .puff-3{animation-delay:calc(var(--t-morph) + 2.25s);width:17px;height:13px;margin-left:-8.5px}
#quoteDecisionOverlay .quote-vibe-art .puff-4{animation-delay:calc(var(--t-morph) + 3s);width:20px;height:14px;margin-left:-10px}

#quoteDecisionOverlay .quote-vibe-art .door{
  left:96px;bottom:30px;width:28px;height:46px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(42,36,30,.28) 6px 7px),
    repeating-linear-gradient(180deg,
      transparent 0 3px,
      rgba(42,36,30,.06) 3px 4px),
    linear-gradient(180deg,#6b4a38 0%,var(--wood) 55%,#4a3226 100%);
  border:2px solid var(--pencil);
  border-radius:2px 1px 1px 2px;
  box-shadow:
    1px 1px 0 rgba(42,36,30,.2),
    inset 0 0 0 1px rgba(201,168,108,.1);
  opacity:0;transform:scaleY(.1);transform-origin:bottom;
  animation:buildUp 0.35s ease calc(var(--t-morph) + 0.4s) forwards;z-index:4;
}
#quoteDecisionOverlay .quote-vibe-art .door::before{
  /* arched top pencil line */
  content:"";position:absolute;left:2px;right:2px;top:3px;height:8px;
  border:1.5px solid rgba(42,36,30,.35);
  border-bottom:none;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .door::after{
  content:"";position:absolute;right:5px;top:52%;width:5px;height:5px;
  border-radius:50%;
  background:var(--gold);
  border:1.2px solid var(--pencil);
  box-shadow:0.5px 0.5px 0 rgba(42,36,30,.25);
}
#quoteDecisionOverlay .quote-vibe-art .win{
  width:28px;height:28px;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 3px,
      rgba(255,255,255,.12) 3px 4px),
    linear-gradient(160deg,rgba(245,230,216,.95) 0%,var(--glass) 100%);
  border:2.5px solid var(--pencil);
  border-radius:2px 1px 2px 1px;
  box-shadow:
    1px 1px 0 rgba(42,36,30,.2),
    inset 0 0 0 1px rgba(42,36,30,.12),
    inset 0 0 6px rgba(255,255,255,.15);
  opacity:0;animation:pop 0.3s ease forwards;z-index:4;
  overflow:hidden;
}
#quoteDecisionOverlay .quote-vibe-art .win::before,
#quoteDecisionOverlay .quote-vibe-art .win::after{
  content:"";position:absolute;background:var(--pencil);z-index:3;pointer-events:none;
  opacity:.9;
}
#quoteDecisionOverlay .quote-vibe-art .win::before{left:50%;top:1px;bottom:1px;width:2px;transform:translateX(-50%) rotate(.5deg)}
#quoteDecisionOverlay .quote-vibe-art .win::after{top:50%;left:1px;right:1px;height:2px;transform:translateY(-50%) rotate(-.4deg)}
#quoteDecisionOverlay .quote-vibe-art .win-l{
  left:60px;bottom:62px;
  animation:winPopL 0.3s ease calc(var(--t-morph) + 0.55s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .win-r{
  left:132px;bottom:62px;
  animation:winPopR 0.3s ease calc(var(--t-morph) + 0.7s) forwards;
}

/* Bushes: stacked pencil leaf-puffs, same sketch language as bricks/roof */
#quoteDecisionOverlay .quote-vibe-art .shrub{
  width:52px;
  height:38px;
  bottom:14px;
  background:transparent;
  border:none;
  opacity:0;
  transform-origin:center bottom;
  z-index:5;
  overflow:visible;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .shrub svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
#quoteDecisionOverlay .quote-vibe-art .shrub-l{
  left:8px;
  animation:shrubPopL 0.35s cubic-bezier(.2,1.1,.3,1) calc(var(--t-morph) + 0.85s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .shrub-r{
  right:8px;left:auto;
  animation:shrubPopR 0.35s cubic-bezier(.2,1.1,.3,1) calc(var(--t-morph) + 0.95s) forwards;
}

/* Pencil sparkles — sketched 4-point stars, not CSS plus-signs */
#quoteDecisionOverlay .quote-vibe-art .spark{
  width:16px;height:16px;
  opacity:0;
  z-index:6;
  pointer-events:none;
  animation:sparkIn .5s cubic-bezier(.2,1.2,.3,1) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .spark svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .spark-draw{
  width:100%;height:100%;
  transform-origin:center;
  animation:sparkTwinkle 2.7s ease-in-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .spark-1{left:168px;top:46px;width:17px;height:17px;animation-delay:calc(var(--t-morph) + 1.15s)}
#quoteDecisionOverlay .quote-vibe-art .spark-1 .spark-draw{animation-delay:calc(var(--t-morph) + 1.65s)}
#quoteDecisionOverlay .quote-vibe-art .spark-2{left:38px;top:68px;width:13px;height:13px;animation-delay:calc(var(--t-morph) + 1.32s)}
#quoteDecisionOverlay .quote-vibe-art .spark-2 .spark-draw{animation-delay:calc(var(--t-morph) + 1.9s);animation-duration:3.1s}
#quoteDecisionOverlay .quote-vibe-art .spark-3{left:108px;top:36px;width:15px;height:15px;animation-delay:calc(var(--t-morph) + 1.48s)}
#quoteDecisionOverlay .quote-vibe-art .spark-3 .spark-draw{animation-delay:calc(var(--t-morph) + 2.05s);animation-duration:2.4s}
#quoteDecisionOverlay .quote-vibe-art .spark-4{left:176px;top:98px;width:12px;height:12px;animation-delay:calc(var(--t-morph) + 1.62s)}
#quoteDecisionOverlay .quote-vibe-art .spark-4 .spark-draw{animation-delay:calc(var(--t-morph) + 2.2s);animation-duration:2.9s}
#quoteDecisionOverlay .quote-vibe-art .spark-5{left:26px;top:112px;width:14px;height:14px;animation-delay:calc(var(--t-morph) + 1.78s)}
#quoteDecisionOverlay .quote-vibe-art .spark-5 .spark-draw{animation-delay:calc(var(--t-morph) + 2.35s);animation-duration:3.3s}

/* ── Sky: pencil sun, clouds, butterflies, occasional bird (over the card, not under house filter) ── */
#quoteDecisionOverlay .quote-vibe-art .sky{
  position:absolute;
  inset:-28px -12px 0;
  overflow:visible;
  pointer-events:none;
  z-index:18;
  border-radius:inherit;
}

/* Pencil sun — wobble disc, uneven rays, hatch fill */
#quoteDecisionOverlay .quote-vibe-art .sun{
  position:absolute;
  top:6px;
  right:8px;
  width:78px;
  height:78px;
  z-index:14;
  opacity:0;
  transform:scale(.82) rotate(-8deg);
  pointer-events:none;
  animation:sunIn .7s cubic-bezier(.2,.9,.2,1) calc(var(--t-morph) + .5s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .sun svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .sun-rays{
  transform-box:fill-box;
  transform-origin:center;
  animation:sunRayBreathe 6.4s ease-in-out calc(var(--t-morph) + 1.25s) infinite;
}
@keyframes sunIn{
  to{opacity:1;transform:rotate(-5deg)}
}
@keyframes sunRayBreathe{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(5deg) scale(1.05)}
}

/* Pencil clouds — bush-style silhouette, hatch, slow drift */
#quoteDecisionOverlay .quote-vibe-art .cloud{
  position:absolute;
  z-index:13;
  opacity:0;
  pointer-events:none;
}
#quoteDecisionOverlay .quote-vibe-art .cloud svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .cloud-1{
  width:104px;height:50px;
  top:8px;left:2px;
  animation:
    cloudIn .75s ease calc(var(--t-morph) + .65s) forwards,
    cloudDrift1 24s ease-in-out calc(var(--t-morph) + 1.4s) infinite;
}
#quoteDecisionOverlay .quote-vibe-art .cloud-2{
  width:74px;height:38px;
  top:26%;left:4%;
  animation:
    cloudIn .75s ease calc(var(--t-morph) + 1.05s) forwards,
    cloudDrift2 30s ease-in-out calc(var(--t-morph) + 1.8s) infinite;
}
#quoteDecisionOverlay .quote-vibe-art .cloud-3{
  width:58px;height:30px;
  top:16px;left:36%;
  animation:
    cloudIn .75s ease calc(var(--t-morph) + .85s) forwards,
    cloudDrift3 20s ease-in-out calc(var(--t-morph) + 1.55s) infinite;
}
@keyframes cloudIn{to{opacity:.9}}
@keyframes cloudDrift1{
  0%,100%{transform:translate(0,0) rotate(-2deg)}
  50%{transform:translate(20px,-5px) rotate(1.5deg)}
}
@keyframes cloudDrift2{
  0%,100%{transform:translate(0,0) rotate(1.2deg)}
  50%{transform:translate(16px,6px) rotate(-2deg)}
}
@keyframes cloudDrift3{
  0%,100%{transform:translate(0,0) rotate(-1deg)}
  50%{transform:translate(-18px,-4px) rotate(2deg)}
}

/* Butterflies — cartoon-real: upper/lower wings, body, antennae, flap */
#quoteDecisionOverlay .quote-vibe-art .bfly{
  position:absolute;
  width:28px;
  height:24px;
  opacity:0;
  --bfly-x:50%;
  --bfly-y:55%;
  left:var(--bfly-x);
  top:var(--bfly-y);
  z-index:16;
  filter:drop-shadow(0 1px 1px rgba(42,36,30,.18));
}
#quoteDecisionOverlay .quote-vibe-art .bfly-inner{
  width:100%;
  height:100%;
  transform-origin:center center;
}
#quoteDecisionOverlay .quote-vibe-art .bfly svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .bfly .wing-l{
  transform-box:fill-box;
  transform-origin:right center; /* hinge at body */
}
#quoteDecisionOverlay .quote-vibe-art .bfly .wing-r{
  transform-box:fill-box;
  transform-origin:left center;
}
#quoteDecisionOverlay .quote-vibe-art .bfly.is-alive{
  opacity:1;
  animation:bflyDrift var(--bfly-dur,8s) ease-in-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bfly.is-alive .bfly-inner{
  animation:bflyBob 1.1s ease-in-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bfly.is-alive .wing-l{
  animation:bflyWingL .18s ease-in-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bfly.is-alive .wing-r{
  animation:bflyWingR .18s ease-in-out infinite;
  animation-delay:.03s;
}
#quoteDecisionOverlay .quote-vibe-art .bfly-1{--bfly-x:56%;--bfly-y:46%;--bfly-dur:8s}
#quoteDecisionOverlay .quote-vibe-art .bfly-2{--bfly-x:30%;--bfly-y:60%;--bfly-dur:9.5s;animation-delay:.5s}
#quoteDecisionOverlay .quote-vibe-art .bfly-3{--bfly-x:70%;--bfly-y:55%;--bfly-dur:7.8s;animation-delay:1s}
#quoteDecisionOverlay .quote-vibe-art .bfly-2.is-alive{animation-name:bflyDrift2}
#quoteDecisionOverlay .quote-vibe-art .bfly-3.is-alive{animation-name:bflyDrift3}
@keyframes bflyWingL{
  0%,100%{transform:scaleX(1) rotate(-4deg)}
  50%{transform:scaleX(.22) rotate(6deg)}
}
@keyframes bflyWingR{
  0%,100%{transform:scaleX(1) rotate(4deg)}
  50%{transform:scaleX(.22) rotate(-6deg)}
}
@keyframes bflyBob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-3px) rotate(3deg)}
}
@keyframes bflyDrift{
  0%{transform:translate(0,0)}
  18%{transform:translate(22px,-20px)}
  40%{transform:translate(-8px,-42px)}
  62%{transform:translate(26px,-28px)}
  82%{transform:translate(6px,-12px)}
  100%{transform:translate(0,0)}
}
@keyframes bflyDrift2{
  0%{transform:translate(0,0)}
  22%{transform:translate(-24px,-14px)}
  48%{transform:translate(8px,-38px)}
  74%{transform:translate(-16px,-22px)}
  100%{transform:translate(0,0)}
}
@keyframes bflyDrift3{
  0%{transform:translate(0,0)}
  28%{transform:translate(16px,-30px)}
  55%{transform:translate(-20px,-18px)}
  78%{transform:translate(12px,-36px)}
  100%{transform:translate(0,0)}
}

/* Occasional pencil sparrow — flies across the upper sky, then waits */
#quoteDecisionOverlay .quote-vibe-art .bird{
  position:absolute;
  top:var(--bird-y,12%);
  left:0;
  width:44px;
  height:26px;
  opacity:0;
  z-index:17;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(42,36,30,.2));
  will-change:transform,opacity;
}
#quoteDecisionOverlay .quote-vibe-art .bird-inner{
  width:100%;
  height:100%;
  transform-origin:center center;
}
#quoteDecisionOverlay .quote-vibe-art .bird.is-left .bird-inner{transform:scaleX(-1)}
#quoteDecisionOverlay .quote-vibe-art .bird svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .bird-wing{
  transform-box:fill-box;
  transform-origin:center 88%;
}
#quoteDecisionOverlay .quote-vibe-art .bird.is-flying{
  animation:birdCross var(--bird-dur,6.4s) cubic-bezier(.35,.1,.65,.9) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .bird.is-flying .bird-inner{
  animation:birdBob .58s ease-in-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bird.is-left.is-flying .bird-inner{
  animation:birdBobLeft .58s ease-in-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bird.is-flying .bird-wing-near{
  animation:birdFlap .2s ease-in-out infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bird.is-flying .bird-wing-far{
  animation:birdFlapFar .2s ease-in-out infinite;
}
@keyframes birdCross{
  0%{
    transform:translate3d(var(--bird-from),0,0);
    opacity:0;
  }
  7%{opacity:1}
  48%{
    transform:translate3d(var(--bird-mid),var(--bird-arc,-12px),0);
  }
  90%{opacity:1}
  100%{
    transform:translate3d(var(--bird-to),var(--bird-end,6px),0);
    opacity:0;
  }
}
@keyframes birdBob{
  0%,100%{transform:translateY(0) rotate(-7deg)}
  50%{transform:translateY(-6px) rotate(5deg)}
}
@keyframes birdBobLeft{
  0%,100%{transform:scaleX(-1) translateY(0) rotate(-7deg)}
  50%{transform:scaleX(-1) translateY(-6px) rotate(5deg)}
}
@keyframes birdFlap{
  0%,100%{transform:rotate(-22deg)}
  50%{transform:rotate(48deg)}
}
@keyframes birdFlapFar{
  0%,100%{transform:rotate(16deg) scaleY(.8)}
  50%{transform:rotate(-38deg) scaleY(1)}
}

/* Floor flowers — pencil SVG petals (inside .house, so they scale) */
#quoteDecisionOverlay .quote-vibe-art .flowerbed{
  position:absolute;
  left:-8px;right:-8px;bottom:10px;
  height:40px;
  pointer-events:none;
  z-index:8;
  overflow:visible;
}
#quoteDecisionOverlay .quote-vibe-art .flower{
  position:absolute;
  bottom:0;
  width:26px;
  height:32px;
  margin-left:-13px;
  transform:scale(var(--size,1));
  transform-origin:center bottom;
  animation:flowerLife 5.2s ease forwards;
}
#quoteDecisionOverlay .quote-vibe-art .flower svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .flower .stem-g{
  transform-box:view-box;
  transform-origin:14px 33px;
  transform:scaleY(0);
  animation:stemGrow 0.35s cubic-bezier(.2,.9,.2,1) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .flower .petal{
  fill:var(--petal,#c45c5c);
  stroke:#2a241e;
  stroke-width:1.12;
  stroke-linejoin:round;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  transform:scale(0);
  animation:petalPop 0.42s cubic-bezier(.2,1.35,.35,1) forwards;
  animation-delay:calc(0.22s + var(--i) * 0.1s);
}
#quoteDecisionOverlay .quote-vibe-art .flower .petal-scratch{
  fill:none;
  stroke:#2a241e;
  stroke-width:0.55;
  stroke-linecap:round;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center bottom;
  transform:scale(0);
  animation:petalScratchPop 0.42s cubic-bezier(.2,1.35,.35,1) forwards;
  animation-delay:calc(0.22s + var(--i) * 0.1s);
}
#quoteDecisionOverlay .quote-vibe-art .flower .flower-center{
  fill:var(--gold);
  stroke:#2a241e;
  stroke-width:1.1;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  animation:petalPop 0.35s cubic-bezier(.2,1.35,.35,1) forwards;
  animation-delay:calc(0.22s + 5 * 0.1s + 0.05s);
}
#quoteDecisionOverlay .quote-vibe-art .flower .flower-seed{
  fill:#2a241e;
  opacity:0;
  animation:petalPop 0.3s ease forwards;
  animation-delay:calc(0.22s + 5 * 0.1s + 0.12s);
}

@keyframes stemGrow{
  to{transform:scaleY(1)}
}
@keyframes petalPop{
  0%{opacity:0;transform:scale(0) translateY(4px)}
  65%{opacity:1;transform:scale(1.2) translateY(0)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes petalScratchPop{
  0%{opacity:0;transform:scale(0) translateY(4px)}
  65%{opacity:.24;transform:scale(1.2) translateY(0)}
  100%{opacity:.22;transform:scale(1) translateY(0)}
}
@keyframes flowerLife{
  0%,78%{opacity:1;transform:scale(var(--size,1))}
  100%{opacity:0;transform:scale(calc(var(--size,1) * 0.9)) translateY(4px)}
}

/* Pencil bee — hovers the flowerbed */
#quoteDecisionOverlay .quote-vibe-art .bee{
  left:56px;bottom:26px;width:20px;height:16px;
  z-index:10;
  opacity:0;
  pointer-events:none;
  animation:beeIn .35s ease calc(var(--t-morph) + 2.15s) forwards;
}
#quoteDecisionOverlay .quote-vibe-art .bee svg{display:block;width:100%;height:100%;overflow:visible}
#quoteDecisionOverlay .quote-vibe-art .bee-hover{
  width:100%;height:100%;
  animation:beeHover 5.6s ease-in-out calc(var(--t-morph) + 2.15s) infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bee-inner{
  width:100%;height:100%;
  transform-origin:center center;
  animation:beeBob .3s ease-in-out calc(var(--t-morph) + 2.15s) infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bee-wing{
  transform-box:fill-box;
  transform-origin:center 90%;
}
#quoteDecisionOverlay .quote-vibe-art .bee-wing-near{
  animation:beeFlap .09s ease-in-out calc(var(--t-morph) + 2.15s) infinite;
}
#quoteDecisionOverlay .quote-vibe-art .bee-wing-far{
  animation:beeFlapFar .09s ease-in-out calc(var(--t-morph) + 2.15s) infinite;
}
@keyframes beeIn{to{opacity:1}}
@keyframes beeHover{
  0%{transform:translate(0,0)}
  16%{transform:translate(24px,-9px)}
  34%{transform:translate(54px,-3px)}
  50%{transform:translate(86px,-13px)}
  66%{transform:translate(48px,-17px)}
  82%{transform:translate(14px,-7px)}
  100%{transform:translate(0,0)}
}
@keyframes beeBob{
  0%,100%{transform:translateY(0) rotate(-10deg)}
  50%{transform:translateY(-2.5px) rotate(12deg)}
}
@keyframes beeFlap{
  0%,100%{transform:rotate(-18deg) scaleY(1)}
  50%{transform:rotate(32deg) scaleY(.28)}
}
@keyframes beeFlapFar{
  0%,100%{transform:rotate(14deg) scaleY(.75)}
  50%{transform:rotate(-30deg) scaleY(1)}
}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes chimneyIn{to{opacity:1;transform:rotate(1deg)}}
@keyframes buildUp{to{opacity:1;transform:scaleY(1)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes winPopL{
  from{opacity:0;transform:scale(.55) rotate(-1deg)}
  to{opacity:1;transform:scale(1) rotate(-1deg)}
}
@keyframes winPopR{
  from{opacity:0;transform:scale(.55) rotate(1.2deg)}
  to{opacity:1;transform:scale(1) rotate(1.2deg)}
}
@keyframes shrubPopL{
  from{opacity:0;transform:scale(.55) rotate(-2deg)}
  to{opacity:1;transform:scale(1) rotate(-2deg)}
}
@keyframes shrubPopR{
  from{opacity:0;transform:scale(.55) rotate(1.5deg)}
  to{opacity:1;transform:scale(1) rotate(1.5deg)}
}
@keyframes brickReveal{to{opacity:1}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}
@keyframes baseToGround{
  to{opacity:1}
}
@keyframes screenToWall{
  to{
    bottom:24px;
    background:#d4c2a6;
    box-shadow:
      inset 0 0 0 1px rgba(42,36,30,.2),
      1px 1px 0 rgba(42,36,30,.25),
      -0.5px 0.5px 0 rgba(42,36,30,.15);
  }
}
@keyframes browserIn{to{opacity:1;transform:scale(1)}}
@keyframes blink{50%{opacity:0}}
@keyframes cursorHide{to{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinShow{to{opacity:1}}
@keyframes roofDrop{to{opacity:1;transform:none}}
@keyframes sparkIn{
  from{opacity:0;transform:scale(.35) rotate(-14deg)}
  to{opacity:1;transform:none}
}
@keyframes sparkTwinkle{
  0%,100%{transform:scale(1) rotate(-5deg)}
  50%{transform:scale(.72) rotate(7deg)}
}
@keyframes smokeOn{to{opacity:1}}
@keyframes smokePuff{
  0%{
    opacity:0;
    transform:translate(0,2px) scale(.4) rotate(-6deg);
  }
  14%{opacity:.9}
  55%{opacity:.55}
  100%{
    opacity:0;
    transform:translate(calc(var(--dx,6px)), -36px) scale(1.45) rotate(8deg);
  }
}
#quoteDecisionOverlay .quote-vibe-art .puff-1{--dx:5px}
#quoteDecisionOverlay .quote-vibe-art .puff-2{--dx:-5px}
#quoteDecisionOverlay .quote-vibe-art .puff-3{--dx:8px}
#quoteDecisionOverlay .quote-vibe-art .puff-4{--dx:-7px}

@media (max-width:640px){
  #quoteDecisionOverlay .quote-vibe-art, #quoteDecisionOverlay .quote-vibe-art{--house-scale:1.35}
  #quoteDecisionOverlay .quote-vibe-art .card{padding:28px 20px 26px}
  #quoteDecisionOverlay .quote-vibe-art .tagline{max-width:18ch}
  #quoteDecisionOverlay .quote-vibe-art .contact{gap:8px 14px}
  #quoteDecisionOverlay .quote-vibe-art .brand-lockup{bottom:2px}
  #quoteDecisionOverlay .quote-vibe-art .sun{width:60px;height:60px;top:4px;right:4px}
  #quoteDecisionOverlay .quote-vibe-art .cloud-1{width:78px;height:38px}
  #quoteDecisionOverlay .quote-vibe-art .cloud-2{width:58px;height:30px;top:24%}
  #quoteDecisionOverlay .quote-vibe-art .cloud-3{width:46px;height:24px;left:32%}
}
@media (max-width:400px){
  #quoteDecisionOverlay .quote-vibe-art, #quoteDecisionOverlay .quote-vibe-art{--house-scale:1.15}
  #quoteDecisionOverlay .quote-vibe-art .brand-lockup{
    --brand-gnome:38px;
    left:max(0px, calc(50% - (110px * var(--house-scale)) - 8px));
    padding:0.3rem 0.68rem 0.32rem 0.1rem;
  }
  #quoteDecisionOverlay .quote-vibe-art .brand-lockup span{--brand-type:0.58rem;width:9em}
  #quoteDecisionOverlay .quote-vibe-art .brand-lockup img{border-width:2px}
  #quoteDecisionOverlay .quote-vibe-art .contact a{font-size:0.98rem}
}

@media (prefers-reduced-motion:reduce){
  #quoteDecisionOverlay .quote-vibe-art *,
#quoteDecisionOverlay .quote-vibe-art *::before,
#quoteDecisionOverlay .quote-vibe-art *::after{
    animation-duration:0.01ms !important;
    animation-delay:0s !important;
    transition:none !important;
  }
  #quoteDecisionOverlay .quote-vibe-art .brand-lockup,
#quoteDecisionOverlay .quote-vibe-art .tagline,
#quoteDecisionOverlay .quote-vibe-art .contact,
#quoteDecisionOverlay .quote-vibe-art .ground,
#quoteDecisionOverlay .quote-vibe-art .wall,
#quoteDecisionOverlay .quote-vibe-art .roof,
#quoteDecisionOverlay .quote-vibe-art .chimney,
#quoteDecisionOverlay .quote-vibe-art .door,
#quoteDecisionOverlay .quote-vibe-art .win,
#quoteDecisionOverlay .quote-vibe-art .shrub,
#quoteDecisionOverlay .quote-vibe-art .spark,
#quoteDecisionOverlay .quote-vibe-art .smoke,
#quoteDecisionOverlay .quote-vibe-art .sun,
#quoteDecisionOverlay .quote-vibe-art .cloud,
#quoteDecisionOverlay .quote-vibe-art .bee{
    opacity:1 !important;
    transform:none !important;
  }
  #quoteDecisionOverlay .quote-vibe-art .sun{transform:rotate(-5deg) !important}
  #quoteDecisionOverlay .quote-vibe-art .brand-lockup{transform:rotate(-2.5deg) !important}
  #quoteDecisionOverlay .quote-vibe-art .wall,
#quoteDecisionOverlay .quote-vibe-art .door{transform:scaleY(1) !important}
  #quoteDecisionOverlay .quote-vibe-art .wall{bottom:24px}
  #quoteDecisionOverlay .quote-vibe-art .bricks{opacity:1 !important}
  #quoteDecisionOverlay .quote-vibe-art .chimney{transform:rotate(1deg) !important}
  #quoteDecisionOverlay .quote-vibe-art .win-l{transform:rotate(-1deg) !important}
  #quoteDecisionOverlay .quote-vibe-art .win-r{transform:rotate(1.2deg) !important}
  #quoteDecisionOverlay .quote-vibe-art .shrub-l{transform:scale(1) rotate(-2deg) !important}
  #quoteDecisionOverlay .quote-vibe-art .shrub-r{transform:scale(1) rotate(1.5deg) !important}
  #quoteDecisionOverlay .quote-vibe-art .ground{
    left:10px;right:10px;height:6px;border-radius:2px 3px 1px 2px;
    background:
      repeating-linear-gradient(90deg,
        var(--pencil) 0 4px,
        var(--graphite) 4px 6px,
        var(--pencil) 6px 12px,
        transparent 12px 14px);
    background-color:var(--pencil);
  }
  #quoteDecisionOverlay .quote-vibe-art .ground::after{opacity:1 !important}
  #quoteDecisionOverlay .quote-vibe-art .browser{opacity:0 !important;visibility:hidden !important}
  #quoteDecisionOverlay .quote-vibe-art .flower .stem-g,
#quoteDecisionOverlay .quote-vibe-art .flower .petal,
#quoteDecisionOverlay .quote-vibe-art .flower .petal-scratch,
#quoteDecisionOverlay .quote-vibe-art .flower .flower-center,
#quoteDecisionOverlay .quote-vibe-art .flower .flower-seed{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  #quoteDecisionOverlay .quote-vibe-art .flower{animation:none !important;opacity:1 !important}
  #quoteDecisionOverlay .quote-vibe-art .puff{
    animation:none !important;
    opacity:.7 !important;
  }
  #quoteDecisionOverlay .quote-vibe-art .puff-1{transform:translate(2px,-4px) !important}
  #quoteDecisionOverlay .quote-vibe-art .puff-2{transform:translate(-4px,-12px) !important}
  #quoteDecisionOverlay .quote-vibe-art .puff-3,
#quoteDecisionOverlay .quote-vibe-art .puff-4{display:none !important}
  #quoteDecisionOverlay .quote-vibe-art .bfly,
#quoteDecisionOverlay .quote-vibe-art .bird,
#quoteDecisionOverlay .quote-vibe-art .laptop-prop,
#quoteDecisionOverlay .quote-vibe-art .book-cover{display:none !important}
}


#quoteDecisionOverlay .quote-vibe-art {
  --house-scale: 1.08;
  /* Sign art was drawn for house-scale 1.7; keep that proportion when the overlay house is smaller. */
  --sign-scale: calc(var(--house-scale) / 1.7);
  position: relative;
  overflow: visible;
  z-index: 2;
}
#quoteDecisionOverlay .quote-vibe-art .book-cover {
  display: none !important;
}

/* Skip the laptop/browser morph — the overlay opens on the finished house. */
#quoteDecisionOverlay .quote-vibe-art.is-house-ready {
  --t-spin: 0ms;
  --t-morph: 0ms;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .laptop-prop,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .browser {
  display: none !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .ground,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .wall,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .roof,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .chimney,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .door,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .win,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .shrub,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .spark,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .smoke,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .sun,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .cloud,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .bee,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .brand-lockup,
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .bricks {
  opacity: 1 !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .wall {
  bottom: 24px;
  background: #d4c2a6;
  transform: scaleY(1) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .door {
  transform: scaleY(1) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .roof {
  transform: none !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .chimney {
  transform: rotate(1deg) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .win-l {
  transform: rotate(-1deg) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .win-r {
  transform: rotate(1.2deg) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .shrub-l {
  transform: scale(1) rotate(-2deg) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .shrub-r {
  transform: scale(1) rotate(1.5deg) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .sun {
  transform: rotate(-5deg) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .brand-lockup {
  transform: scale(var(--sign-scale)) rotate(-2.5deg) !important;
}
#quoteDecisionOverlay .quote-vibe-art.is-house-ready .ground::after {
  opacity: 1 !important;
}
#quoteDecisionOverlay .quote-vibe-art .bee,
#quoteDecisionOverlay .quote-vibe-art .flowerbed {
  z-index: 22;
  filter: none;
}
#quoteDecisionOverlay .quote-vibe-art .brand-lockup {
  pointer-events: none;
  transform-origin: left bottom;
  opacity: 1;
  animation: none;
  transform: scale(var(--sign-scale)) rotate(-2.5deg);
}
@media (max-width: 640px) {
  #quoteDecisionOverlay .quote-vibe-art { --house-scale: 0.82; }
}
@media (prefers-reduced-motion: reduce) {
  #quoteDecisionOverlay .quote-vibe-art .brand-lockup {
    transform: scale(var(--sign-scale)) rotate(-2.5deg) !important;
  }
}