/* ============================================================
   Just Bounce Around — concept rebuild
   Palette PIL-sampled from their own logo pixels.
   Display: Chango · UI/body: Quicksand (both self-hosted).
   Signature motion: SPRING-SETTLE (one soft decelerating bob).
   ============================================================ */

:root{
  --yellow:#f0e418;      /* logo wordmark fill — sunny lemon */
  --yellow-soft:#fdf6b0;
  --red:#d80c00;         /* logo slide/castle/dots */
  --red-cta:#c40b00;     /* AA white-on-red */
  --blue:#0c48b4;        /* logo tower/slide */
  --blue-soft:#6090f0;
  --teal:#0c6060;        /* logo slide base — the differentiator */
  --teal-bright:#0c9c9c;
  --orange:#fc7824;      /* tower tip / AROUND dot */
  --green:#007800;       /* AROUND dot */
  --ink:#221c16;         /* warm near-black */
  --ink-soft:#5a5148;
  --cream:#fdfaf0;       /* warm paper ground */
  --cream-2:#f6efdd;
  --white:#ffffff;
  --line:#e7dcc4;
  --shadow: 0 10px 30px rgba(34,28,22,.12);
  --shadow-hard: 6px 6px 0 var(--ink);
  --radius:20px;
  --maxw:1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:500;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* mandatory reset for reveal not to break no-JS */
h1,h2,h3,h4,p,ul{margin:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.display{font-family:'Chango',system-ui,cursive;font-weight:400;letter-spacing:.01em;line-height:1.02;}

/* ---- skip link ---- */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200;}
.skip:focus{left:0;}

/* =============== buttons (one system) =============== */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:'Chango',cursive;font-size:1.02rem;letter-spacing:.02em;
  padding:.85em 1.5em;border-radius:999px;border:3px solid var(--ink);
  cursor:pointer;transition:transform .16s ease, box-shadow .16s ease;
  box-shadow:var(--shadow-hard);text-decoration:none;line-height:1;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);text-decoration:none;}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.btn-red{background:var(--red-cta);color:#fff;}
.btn-yellow{background:var(--yellow);color:var(--ink);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-white{background:#fff;color:var(--ink);}
.btn-lg{font-size:1.18rem;padding:1em 1.8em;}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}

/* =============== nav =============== */
.nav{
  position:sticky;top:0;z-index:100;background:var(--cream);
  border-bottom:3px solid var(--ink);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;max-width:var(--maxw);margin:0 auto;}
.nav-logo{display:flex;align-items:center;gap:10px;}
.nav-logo img{height:52px;width:auto;}
.nav-links{display:flex;align-items:center;gap:8px;list-style:none;padding:0;margin:0;}
.nav-links a{
  font-family:'Quicksand';font-weight:700;color:var(--ink);padding:8px 12px;border-radius:10px;font-size:1rem;
}
.nav-links a:hover{background:var(--yellow-soft);text-decoration:none;}
.nav-call{font-family:'Chango';background:var(--red-cta);color:#fff;padding:9px 16px;border-radius:999px;border:2px solid var(--ink);}
.nav-call:hover{background:var(--red);text-decoration:none;color:#fff;}
.nav-toggle{display:none;}

/* =============== marquee-free party strip (their tagline, static) =============== */
.partystrip{
  background:var(--blue);color:var(--yellow);
  font-family:'Chango';font-size:.98rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:8px 12px;border-bottom:3px solid var(--ink);
}
.partystrip span{margin:0 .5em;opacity:.55;}

/* =============== hero =============== */
.hero{position:relative;background:var(--ink);overflow:hidden;}
.hero-media{position:absolute;inset:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,72,180,.30) 0%,rgba(34,28,22,.20) 40%,rgba(34,28,22,.72) 100%);}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:64px 22px 80px;min-height:min(74vh,620px);display:flex;flex-direction:column;justify-content:flex-end;}
.hero-kicker{
  display:inline-block;align-self:flex-start;background:var(--yellow);color:var(--ink);
  font-family:'Chango';font-size:.9rem;letter-spacing:.06em;padding:7px 15px;border-radius:999px;border:3px solid var(--ink);
  margin-bottom:16px;box-shadow:var(--shadow-hard);
}
.hero h1{
  font-family:'Chango';color:#fff;font-size:clamp(2.3rem,6.2vw,4.4rem);line-height:1.02;
  text-shadow:0 4px 0 rgba(12,72,180,.55), 0 14px 30px rgba(0,0,0,.45);max-width:15ch;
}
.hero h1 .hl{color:var(--yellow);}
.hero-sub{color:#fff;font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:600;margin-top:16px;max-width:38ch;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}

/* AROUND-dots motif (from the logo's colored letter-circles) */
.dots{display:flex;gap:9px;align-items:center;margin:0;padding:0;list-style:none;}
.dots li{width:15px;height:15px;border-radius:50%;border:2.5px solid var(--ink);}
.dots .d1{background:var(--red);} .dots .d2{background:var(--orange);}
.dots .d3{background:var(--yellow);} .dots .d4{background:var(--green);}
.dots .d5{background:var(--blue);} .dots .d6{background:var(--red);}

/* =============== sections =============== */
section{position:relative;}
.band{padding:64px 0;}
.band-cream{background:var(--cream);}
.band-cream2{background:var(--cream-2);}
.band-teal{background:var(--teal);color:#fff;}
.band-blue{background:var(--blue);color:#fff;}
.band-yellow{background:var(--yellow);color:var(--ink);}
.band-teal a,.band-blue a{color:#fff;}
.sec-head{text-align:center;max-width:40ch;margin:0 auto 40px;}
.sec-kicker{font-family:'Chango';font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:flex;gap:8px;align-items:center;justify-content:center;}
.band-teal .sec-kicker,.band-blue .sec-kicker{color:var(--yellow);}
.sec-head h2{font-family:'Chango';font-size:clamp(1.9rem,4.4vw,3rem);margin:12px 0 10px;}
.sec-head p{color:var(--ink-soft);font-size:1.08rem;font-weight:600;}
.band-teal .sec-head p,.band-blue .sec-head p{color:rgba(255,255,255,.9);}

/* dot divider */
.dot-div{display:flex;justify-content:center;padding:10px 0 0;}

/* =============== price / category cards =============== */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.pcard{
  background:#fff;border:3px solid var(--ink);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow-hard);display:flex;flex-direction:column;gap:6px;
}
.pcard .cat-img{margin:-24px -22px 14px;border-bottom:3px solid var(--ink);background:var(--cream-2);border-radius:17px 17px 0 0;overflow:hidden;}
.pcard .cat-img img{width:100%;height:150px;object-fit:contain;padding:8px;}
.pcard h3{font-family:'Chango';font-size:1.28rem;}
.pcard .pnote{color:var(--ink-soft);font-weight:600;font-size:.96rem;}
.pcard .price{margin-top:auto;font-family:'Chango';font-size:1.7rem;color:var(--red);padding-top:12px;}
.pcard .price .from{font-family:'Quicksand';font-weight:700;font-size:.9rem;color:var(--ink-soft);display:block;}
.pcard .per{font-size:.9rem;color:var(--ink-soft);font-family:'Quicksand';font-weight:600;}

/* included strip */
.included{
  background:var(--yellow-soft);border:3px dashed var(--ink);border-radius:var(--radius);
  padding:22px 26px;font-weight:600;text-align:center;max-width:820px;margin:34px auto 0;font-size:1.06rem;
}

/* =============== estimate CTA feature =============== */
.feat{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.feat-card{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);overflow:hidden;}
.feat-card img{width:100%;height:100%;min-height:280px;object-fit:cover;}
.feat h2{font-family:'Chango';font-size:clamp(1.8rem,4vw,2.7rem);}
.feat p{margin-top:14px;font-weight:600;color:var(--ink-soft);}
.band-teal .feat p{color:rgba(255,255,255,.9);}

/* =============== gallery =============== */
.gallery{columns:4 220px;column-gap:16px;}
.gallery figure{margin:0 0 16px;break-inside:avoid;border:3px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-hard);background:#fff;}
.gallery img{width:100%;height:auto;display:block;transition:transform .5s ease;}
.gallery figure:hover img{transform:scale(1.05);}

/* =============== about / safety =============== */
.safety{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:8px;}
.scard{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.4);border-radius:16px;padding:22px;}
.band-teal .scard h3{font-family:'Chango';color:var(--yellow);font-size:1.15rem;margin-bottom:6px;}
.about-lead{max-width:44ch;margin:0 auto;text-align:center;font-size:1.16rem;font-weight:600;}

/* =============== service area / contact =============== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;align-items:start;}
.callbox{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);padding:28px;text-align:center;}
.callbox .big-phone{font-family:'Chango';font-size:clamp(1.6rem,4vw,2.3rem);color:var(--red);display:block;margin:8px 0 14px;}
.callbox .big-phone:hover{text-decoration:none;color:var(--red-cta);}

/* =============== footer =============== */
.foot{background:var(--ink);color:#efe7d8;padding:48px 0 96px;}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;}
.foot img{height:64px;width:auto;margin-bottom:12px;}
.foot h4{font-family:'Chango';color:var(--yellow);font-size:1rem;letter-spacing:.06em;margin-bottom:12px;}
.foot a{color:#efe7d8;}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.foot .fnote{color:#b9ac97;font-size:.9rem;margin-top:18px;font-weight:500;}

/* =============== sticky mobile call bar =============== */
.mcall{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:var(--red-cta);border-top:3px solid var(--ink);padding:10px 14px;
}
.mcall a{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-family:'Chango';font-size:1.15rem;}
.mcall a:hover{text-decoration:none;color:#fff;}

/* =============== SPRING-SETTLE reveal (signature) =============== */
/* default: fully visible (robust with no JS). JS adds .spring to animate once. */
.reveal{opacity:1;}
.js .reveal{opacity:0;}
.js .reveal.spring{animation:springSettle .62s cubic-bezier(.22,.9,.32,1.15) forwards;}
@keyframes springSettle{
  0%  {opacity:0;transform:translateY(22px) scale(.985);}
  55% {opacity:1;transform:translateY(-7px) scale(1.004);} /* the single soft bob */
  100%{opacity:1;transform:translateY(0)    scale(1);}
}
/* total bob on add */
.bob{animation:oneBob .5s cubic-bezier(.22,.9,.32,1.15);}
@keyframes oneBob{
  0%{transform:translateY(0);}
  38%{transform:translateY(-8px);}
  100%{transform:translateY(0);}
}

/* =============== ESTIMATE PAGE =============== */
.est-hero{background:var(--blue);color:#fff;border-bottom:3px solid var(--ink);padding:44px 0 40px;}
.est-hero h1{font-family:'Chango';font-size:clamp(2rem,5vw,3.1rem);}
.est-hero p{margin-top:12px;font-weight:600;color:var(--yellow);max-width:46ch;}
.est-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;align-items:start;margin-top:-38px;position:relative;z-index:5;padding-bottom:40px;}
.est-layout>*{min-width:0;}
.est-panel{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);padding:22px;min-width:0;}
.est-panel h2{font-family:'Chango';font-size:1.3rem;margin-bottom:6px;}
.est-hint{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin-bottom:14px;}

.unit-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:2px solid var(--line);}
.unit-row:first-of-type{border-top:none;}
.unit-info{flex:1;min-width:0;}
.unit-info .un{font-family:'Chango';font-size:1.12rem;}
.unit-info .up{color:var(--ink-soft);font-weight:600;font-size:.9rem;}
.unit-price{font-family:'Chango';color:var(--red);font-size:1.15rem;white-space:nowrap;}
.unit-price .fr{display:block;font-family:'Quicksand';font-weight:700;font-size:.72rem;color:var(--ink-soft);}
.stepper{display:flex;align-items:center;gap:0;border:3px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff;}
.stepper button{
  width:44px;height:44px;border:none;background:var(--yellow);color:var(--ink);
  font-family:'Chango';font-size:1.3rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;
}
.stepper button:hover{background:var(--orange);}
.stepper button:disabled{opacity:.4;cursor:not-allowed;}
.stepper .qty{min-width:38px;text-align:center;font-family:'Chango';font-size:1.15rem;}

/* summary panel */
.sum{position:sticky;top:86px;}
.sum h2{font-family:'Chango';font-size:1.3rem;margin-bottom:4px;}
.sum-list{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:10px;min-height:40px;}
.sum-list li{display:flex;justify-content:space-between;gap:12px;font-weight:600;border-bottom:1px dashed var(--line);padding-bottom:9px;}
.sum-list .sn{flex:1;}
.sum-list .sq{color:var(--ink-soft);}
.sum-empty{color:var(--ink-soft);font-weight:600;font-style:italic;}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:3px solid var(--ink);padding-top:14px;margin-top:4px;}
.sum-total .tl{font-family:'Chango';font-size:1.2rem;}
.sum-total .tv{font-family:'Chango';font-size:2.1rem;color:var(--red);}
.est-note{font-size:.86rem;color:var(--ink-soft);font-weight:600;margin-top:12px;line-height:1.5;}
.est-actions{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.est-actions .btn{justify-content:center;width:100%;}
.copied-flash{font-family:'Quicksand';font-weight:700;color:var(--green);font-size:.9rem;text-align:center;min-height:1.1em;}

/* =============== responsive =============== */
@media (max-width:900px){
  .feat{grid-template-columns:1fr;}
  .est-layout{grid-template-columns:1fr;margin-top:-30px;}
  .sum{position:static;}
  .foot-in{grid-template-columns:1fr 1fr;}
  .gallery{columns:3 180px;}
}
@media (max-width:720px){
  body{font-size:16px;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--cream);
    border-bottom:3px solid var(--ink);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 14px 16px;opacity:0;pointer-events:none;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease;
  }
  .nav-links.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .nav-links a{padding:12px 10px;border-radius:10px;}
  .nav-links .nav-call{text-align:center;margin-top:6px;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
    background:var(--yellow);border:3px solid var(--ink);border-radius:12px;font-size:1.4rem;cursor:pointer;color:var(--ink);}
  .mcall{display:block;}
  .foot{padding-bottom:110px;}
  .foot-in{grid-template-columns:1fr;}
  .hero-in{min-height:60vh;padding-top:44px;}
  .gallery{columns:2 140px;}
  .band{padding:48px 0;}
  .est-panel{padding:16px;}
  .unit-row{gap:8px;}
  .unit-info .un{font-size:1rem;}
}
@media (max-width:420px){
  .gallery{columns:2 120px;column-gap:10px;}
}

/* =============== reduced motion =============== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1 !important;}
  .js .reveal.spring{animation:none !important;}
  .bob{animation:none !important;}
  .btn,.gallery img{transition:none !important;}
  .gallery figure:hover img{transform:none;}
}