/* ==========================================================================
   Bounce House Rentals Hartford — call-to-book static site
   Mobile-first. Every CTA routes to the phone.
   ========================================================================== */

:root {
  --ink:        #12103a;
  --ink-soft:   #4a4770;
  --muted:      #6f6c93;

  --brand:      #2b2a86;
  --brand-dk:   #1b1a5e;
  --brand-lt:   #ecebff;

  --pop:        #ff5a1f;   /* primary CTA — orange converts hard on service sites */
  --pop-dk:     #e04408;
  --sun:        #ffc23c;

  --paper:      #ffffff;
  --wash:       #f6f5ff;
  --line:       #e4e2f5;

  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 2px 4px rgba(18,16,58,.05), 0 12px 28px rgba(18,16,58,.09);
  --shadow-lg:  0 8px 20px rgba(18,16,58,.10), 0 24px 56px rgba(18,16,58,.16);

  --wrap:       1180px;
  --call-bar-h: 0px;

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: var(--call-bar-h);
}

img { max-width: 100%; display: block; }
a { color: var(--brand); }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- buttons  */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-weight: 700; font-size: 1.05rem;
  padding: 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-call {
  background: var(--pop);
  color: #fff;
  box-shadow: 0 6px 0 var(--pop-dk), var(--shadow);
  flex-wrap: wrap;
}
.btn-call:hover { background: #ff6a33; }
.btn-call svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn-call strong {
  font-size: 1.15rem; letter-spacing: .01em;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.45);
}

.btn-ghost {
  background: transparent; color: var(--brand);
  border-color: var(--line); background: var(--paper);
}
.btn-ghost:hover { border-color: var(--brand); background: var(--brand-lt); }

/* ---------------------------------------------------------------- header  */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 74px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { font-size: 1.9rem; line-height: 1; }
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text em { font-style: normal; font-size: .78rem; color: var(--pop); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 42px; padding: 0 10px;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

.site-nav { display: none; width: 100%; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.site-nav a {
  display: block; padding: 12px 4px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.site-nav a[aria-current="page"] { color: var(--pop); }

.header-call { display: none; padding: 11px 18px; font-size: .95rem; }
.header-call strong { font-size: 1rem; }

@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; width: auto; }
  .site-nav ul { flex-direction: row; gap: 4px; margin: 0; }
  .site-nav a { border: 0; padding: 8px 11px; font-size: .93rem; border-radius: 8px; }
  .site-nav a:hover { background: var(--brand-lt); }
  .header-call { display: inline-flex; }
}

/* ------------------------------------------------------------------ hero  */

.hero {
  background:
    radial-gradient(1000px 460px at 78% -12%, rgba(255,194,60,.30), transparent 60%),
    linear-gradient(168deg, var(--brand) 0%, var(--brand-dk) 62%, #141248 100%);
  color: #fff;
  padding: 56px 0 64px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 60px;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 24%, 100% 100%);
}
.hero-inner { display: grid; gap: 36px; position: relative; z-index: 1; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 14px;
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 span { color: var(--sun); }
.hero .lede { font-size: 1.14rem; color: #d9d7f5; max-width: 34em; margin-bottom: 26px; }
.hero-note { margin: 16px 0 0; font-size: .9rem; color: #b6b3e0; }

.trust {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.trust li { font-size: .87rem; color: #cfcdf0; display: flex; align-items: center; gap: 7px; }
.trust li::before { content: "✓"; color: var(--sun); font-weight: 800; }

.hero-art img {
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  border: 5px solid rgba(255,255,255,.14);
  width: 100%; height: auto;
}

@media (min-width: 900px) {
  .hero { padding: 76px 0 92px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 52px; }
}

/* ------------------------------------------------------------- page hero  */

.page-hero {
  background: linear-gradient(168deg, var(--brand) 0%, var(--brand-dk) 100%);
  color: #fff; padding: 48px 0 52px; text-align: center;
}
.page-hero h1 { color: #fff; }
.page-hero .lede { color: #d3d1f2; max-width: 44em; margin: 0 auto 26px; font-size: 1.08rem; }

.jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.jump a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: 9px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
}
.jump a:hover { background: rgba(255,255,255,.12); }

/* --------------------------------------------------------------- section  */

.section { padding: 56px 0; }
.section-alt { background: var(--wash); }

.section-head { text-align: center; max-width: 46em; margin: 0 auto 36px; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* ----------------------------------------------------------------- cards  */

.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cfccf0; }

.card-img { position: relative; aspect-ratio: 4 / 3; background: var(--brand-lt); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }

.card-tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(18,16,58,.86); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}

.card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 10px; font-size: 1.05rem; }

.specs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.specs li {
  font-size: .74rem; color: var(--ink-soft); background: var(--wash);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}

.card-actions {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
}

/* Both card actions carry vertical padding so they clear the 44px minimum
   touch target on phones, where these sit inside a scrolling grid. */
.card-cta {
  font-weight: 700; font-size: .95rem; color: var(--pop); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px;
}
.card-cta::before { content: "\260E"; font-size: .95em; }
.card-cta:hover { text-decoration: underline; }

.card-book {
  font-weight: 600; font-size: .88rem; color: var(--brand);
  text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.card-book span, .card-book { border-bottom-color: transparent; }
.card-book:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- tiles  */

.tiles { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.tile {
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.tile-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.tile-body p { color: var(--muted); font-size: .94rem; flex: 1; }
.tile-link { color: var(--pop); font-weight: 700; font-size: .93rem; }

/* ------------------------------------------------------------ size cards  */

.size-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.size-card {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--pop);
  border-radius: var(--radius); padding: 24px;
}
.size-card p { color: var(--muted); font-size: .96rem; }

/* ----------------------------------------------------------------- steps  */

.steps { list-style: none; counter-reset: s; margin: 0 0 32px; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.steps li { text-align: center; padding: 0 10px; }
.steps span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 14px;
  background: var(--pop); color: #fff; font-weight: 800; font-size: 1.3rem;
  border-radius: 50%; box-shadow: 0 4px 0 var(--pop-dk);
}
.steps p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ----------------------------------------------------------------- towns  */

.towns { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.towns li {
  background: var(--wash); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: .92rem; color: var(--ink-soft);
}
.towns .town-primary { background: var(--brand-lt); border-color: #c9c6f2; color: var(--brand); font-weight: 700; }
.towns.big li { font-size: 1rem; padding: 10px 20px; }
.note { color: var(--muted); }

/* ------------------------------------------------------------------- faq  */

.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--paper); }
.faq-item summary {
  cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 1.04rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--pop); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-body { padding: 16px 20px 4px; }
.faq-body p { color: var(--ink-soft); }

/* ------------------------------------------------------------- cta band   */

.cta-band {
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(255,194,60,.22), transparent 62%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand-dk) 100%);
  color: #fff; text-align: center; padding: 60px 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cdcbf0; max-width: 40em; margin-inline: auto; }
.cta-note { font-size: .88rem; color: #a9a6d8; margin-top: 18px; }
.cta-band .btn-call { margin-top: 12px; }

/* ---------------------------------------------------------------- footer  */

.site-footer { background: var(--ink); color: #b9b6dd; padding: 52px 0 0; font-size: .93rem; }
.site-footer h3 { color: #fff; font-size: 1.1rem; }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px; }
.site-footer a { color: #b9b6dd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }

.footer-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding-bottom: 40px; }
.footer-phone { margin: 14px 0 8px; }
.footer-phone a { color: var(--sun); font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }

.footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: 20px; }
.footer-legal p { margin: 0; font-size: .84rem; color: #837fb0; }

/* ------------------------------------------------- sticky mobile callbar  */

.call-bar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; align-items: stretch;
  background: var(--pop);
  box-shadow: 0 -4px 20px rgba(18,16,58,.28);
  padding-bottom: env(safe-area-inset-bottom);
}
.call-bar a { text-decoration: none; color: #fff; }

.call-bar-call {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 11px 16px;
}
.call-bar-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; opacity: .92; }
.call-bar-call strong { font-size: 1.32rem; font-weight: 800; letter-spacing: .01em; }

.call-bar-text {
  flex: 0 0 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(0,0,0,.17);
  border-left: 1px solid rgba(255,255,255,.22);
}
.call-bar-text svg { width: 22px; height: 22px; fill: currentColor; }
.call-bar-text span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

@media (min-width: 1040px) { .call-bar { display: none; } }
@media (max-width: 1039px) { body { --call-bar-h: 74px; } }

/* ------------------------------------------------------------ chat widget  */

/* The vendor bundle (cdn.chatwidgets.net) mounts a full-viewport fixed overlay
   at #widget-root with pointer-events:none and floats its launcher bottom-right
   inside it. It does not block the page, but it lands directly on top of our
   sticky call bar on mobile. Lift the launcher clear of the bar.

   Offset is derived from --call-bar-h so the two stay in sync if the bar height
   changes. Do NOT override #widget-root's own height — it correctly uses dvh. */
@media (max-width: 1039px) {
  .widget-fab-wrapper {
    transform: translateY(calc(-1 * var(--call-bar-h) - 10px));
  }
}

/* --------------------------------------------------------------- motion   */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ----------------------------------------------------------------- print  */

@media print {
  .site-header, .call-bar, .cta-band, .nav-toggle { display: none !important; }
}