/* =============================================================================
   iPaint Nashville — funnel styles
   Built to the Crystal Clear Pools reference: near-white, hairline borders,
   line-art icon cards, near-black selected state. Restraint is the design —
   resist adding colour, shadow or gradient here.
   ========================================================================== */

:root {
  --ink:         #16181c;   /* headings, selected borders */
  --ink-soft:    #52555c;   /* body copy */
  --ink-faint:   #8a8d94;   /* eyebrow, helper, meta */
  --line:        #e4e2de;   /* hairline borders */
  --line-strong: #c9c6c1;   /* hover border */
  --page:        #f7f6f4;   /* page behind the sheet */
  --sheet:       #ffffff;   /* the card surface */
  --field:       #fbfaf9;   /* input fill */
  /* Sampled from the logo: red #E00000, wordmark pure black. Red is the
     interactive colour — hover, selection, buttons, progress. Everything else
     stays quiet so the red actually reads. */
  --brand:       #e00000;
  --brand-dark:  #b30000;
  --brand-tint:  #fdeceb;
  --accent:      #e00000;   /* selection + primary button */
  --star:        #f5a623;   /* review stars keep the familiar gold */

  --icon:        92px;   /* quiz tile artwork, SVG and masked PNG alike */
  --radius:      10px;
  --radius-sm:   7px;
  --wrap:        680px;
  --gutter:      20px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
img, svg { display: block; max-width: 100%; }

/* --- a11y ------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

/* --- config warning --------------------------------------------------- */
.config-warning {
  background: #fff6da; border-bottom: 1px solid #e3c469; color: #5c4400;
  padding: 10px var(--gutter); font-size: 13px; text-align: center;
}
.config-warning code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; }

/* --- top progress rail ------------------------------------------------ */
.rail {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 40;
}
.rail__fill {
  height: 100%; width: 0; background: var(--brand);
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* --- masthead --------------------------------------------------------- */
.masthead {
  background: var(--sheet);
  border-bottom: 1px solid var(--line);
  padding: 13px var(--gutter);
}
.masthead__inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.masthead__brand { display: block; line-height: 0; flex: 0 1 auto; min-width: 0; }
.masthead__brand img {
  width: auto; height: 34px; max-width: 100%;
}

/* Google rating, top right */
.rating { flex: none; text-align: right; line-height: 1.25; }
.rating__row { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.rating__score { font-size: 15px; font-weight: 700; color: var(--ink); }
.rating__stars { display: flex; gap: 1px; color: var(--star); }
.rating__stars svg { width: 13px; height: 13px; }
.rating__count { font-size: 11px; color: var(--ink-faint); margin-top: 1px; white-space: nowrap; }

/* --- sheet ------------------------------------------------------------ */
.sheet { background: var(--sheet); min-height: calc(100vh - 56px); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

main { padding: 30px 0 48px; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px;
}

.step-title { font-size: 21px; font-weight: 650; margin-bottom: 6px; }
.step-title:focus { outline: none; }
.step-help { color: var(--ink-faint); font-size: 14px; margin-bottom: 20px; }
.step-title + .tile-grid, .step-help + .tile-grid { margin-top: 20px; }

/* --- icon tiles ------------------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 178px; padding: 18px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--sheet); color: var(--ink-soft);
  font: inherit; cursor: pointer; text-align: center;
  transition: border-color .15s ease, color .15s ease;
}

.tile.is-selected {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  color: var(--ink);
  background: var(--brand-tint);
}
.tile.is-selected::after {
  content: ''; position: absolute; top: 10px; right: 10px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 8.3l2.8 2.8 5.6-5.6'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}

.tile__icon {
  display: block; width: var(--icon); height: var(--icon); flex: none;
  color: var(--ink); opacity: .85; transition: color .15s ease;
}
.tile__icon svg { width: 100%; height: 100%; display: block; }
.tile.is-selected .tile__icon { color: var(--brand); opacity: 1; }
.tile.is-selected .tile__icon { opacity: 1; }
/* A supplied PNG icon is drawn as a MASK filled with currentColor, not as an
   <img>. That is what lets flat black artwork tint red on hover and selection
   exactly like the inline SVG icons — an <img> could not. Requires a
   transparent background in the source file. */
.tile__maskicon {
  /* Height is the constant; width follows the drawing's own aspect ratio, set
     inline per icon. A square box would pad a wide drawing with dead space and
     leave its ink floating above the label. */
  display: block; height: var(--icon); width: auto;
  aspect-ratio: var(--ar, 1); max-width: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
  transition: background-color .15s ease;
}

/* A tile can carry a photo instead of line art — set `img` on the option.
   Falls back to a labelled placeholder if the file is missing. */
.tile--photo { padding: 0; gap: 0; justify-content: flex-start; overflow: hidden; }
.tile__photo { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--page); }
.tile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile--photo .tile__label { padding: 11px 12px; width: 100%; }
.tile__photo--missing {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg,#f0eeea,#f0eeea 10px,#e8e5e0 10px,#e8e5e0 20px);
  font-size: 11.5px; font-weight: 600; color: var(--ink-faint); text-align: center; padding: 0 8px;
}

.tile__label { font-size: 13.5px; font-weight: 500; line-height: 1.35; }

/* --- hover, pointer devices only -------------------------------------
   A touch device keeps :hover on the element under the last tap. The quiz
   re-renders the tile grid in place, so the next question's first tile lands
   under that same point and would light up as if it were already selected.
   The media query alone is not enough: (pointer: fine) is true in Chrome
   DevTools' device mode and on Android devices and tablets that accept a mouse
   or stylus, so a phone-sized viewport still picked up hover. `.has-mouse` is
   added by funnel.js only after a real mousemove, and removed on any touch, so
   hover styling needs actual proof of a mouse.

   `.tile-grid--nohover` covers the rest: a freshly rendered grid suppresses
   hover until the pointer actually MOVES over it. Advancing a question
   re-renders the grid under a stationary cursor or a finger that just tapped,
   and without this the new first tile lights up as though it were chosen. */
@media (hover: hover) and (pointer: fine) {
  .has-mouse .tile-grid:not(.tile-grid--nohover) .tile:hover {
    border-color: var(--brand); color: var(--ink);
  }
  .has-mouse .tile-grid:not(.tile-grid--nohover) .tile:hover .tile__icon {
    color: var(--brand); opacity: 1;
  }
  .has-mouse .btn--primary:hover { background: var(--brand-dark); }
  .has-mouse .btn--quiet:hover { color: var(--brand); }
}

/* --- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: opacity .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--brand); color: #fff; width: 100%; }
.btn--primary[disabled] {
  background: #edebe8; color: var(--ink-faint); cursor: not-allowed; opacity: 1;
}
.btn--quiet {
  background: transparent; color: var(--ink-faint);
  border: none; padding: 10px 2px; font-size: 13.5px; font-weight: 500;
}

.step-nav { margin-top: 18px; }

/* --- google reviews ----------------------------------------------------- */
.reviews { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
/* On the booked page the reviews are the point, not a footnote. */
.reviews--done { margin-top: 34px; }
.reviews--done .reviews__heading { text-align: center; }
.reviews__heading {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 16px;
}
.reviews iframe { width: 100%; border: none; display: block; }

/* Reviews already drew the rule, so the founder note sits under it plainly. */
.reviews + .founder { margin-top: 28px; padding-top: 0; border-top: none; }

/* --- founder note ------------------------------------------------------ */
.founder {
  display: flex; gap: 15px; align-items: flex-start;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
}
.founder__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--page); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); letter-spacing: .04em;
}
.founder__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.founder__name { font-size: 15.5px; font-weight: 650; margin: 0 0 2px; }
.founder__role {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 8px;
}
.founder__bio { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* --- GHL embeds -------------------------------------------------------- */
.ghl-embed {
  width: 100%; min-height: 620px; border: none; display: block;
  background: transparent;
}
.embed-host { min-height: 620px; }
.embed-fallback {
  padding: 22px; border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-soft); font-size: 14px; text-align: center;
}

/* --- thank you --------------------------------------------------------- */
.done { text-align: center; padding-top: 12px; }
.done__mark {
  width: 46px; height: 46px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 8.3l2.8 2.8 5.6-5.6'/%3E%3C/svg%3E")
    center/22px no-repeat;
}
.done h1 { font-size: 23px; }
.done > p { color: var(--ink-soft); font-size: 15px; max-width: 42ch; margin-inline: auto; }

.next-steps {
  list-style: none; counter-reset: step; padding: 0; margin: 30px 0 0;
  text-align: left; display: grid; gap: 14px;
  border-top: 1px solid var(--line); padding-top: 26px;
}
.next-steps li {
  counter-increment: step; display: flex; gap: 13px; align-items: flex-start;
  font-size: 14px; color: var(--ink-soft);
}
.next-steps li::before {
  content: counter(step); flex: none; width: 23px; height: 23px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--page);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--ink);
}

.done__cta { margin: 26px 0 0; }

/* --- footer ------------------------------------------------------------ */
.site-footer {
  padding: 26px var(--gutter) 34px; font-size: 12px; color: var(--ink-faint);
  text-align: center; background: var(--sheet);
}
.site-footer a { color: var(--ink-faint); }
.site-footer p { margin: 0 0 5px; }

/* --- wider ------------------------------------------------------------- */
@media (min-width: 420px) {
  .masthead__brand img { height: 40px; }
}

@media (min-width: 560px) {
  .tile-grid { gap: 14px; }
  .tile { min-height: 204px; }
  :root { --icon: 106px; }
  /* A supplied PNG icon is drawn as a MASK filled with currentColor, not as an
   <img>. That is what lets flat black artwork tint red on hover and selection
   exactly like the inline SVG icons — an <img> could not. Requires a
   transparent background in the source file. */
.tile__maskicon {
  /* Height is the constant; width follows the drawing's own aspect ratio, set
     inline per icon. A square box would pad a wide drawing with dead space and
     leave its ink floating above the label. */
  display: block; height: var(--icon); width: auto;
  aspect-ratio: var(--ar, 1); max-width: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
  transition: background-color .15s ease;
}

/* A tile can carry a photo instead of line art — set `img` on the option.
   Falls back to a labelled placeholder if the file is missing. */
.tile--photo { padding: 0; gap: 0; justify-content: flex-start; overflow: hidden; }
.tile__photo { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--page); }
.tile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile--photo .tile__label { padding: 11px 12px; width: 100%; }
.tile__photo--missing {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg,#f0eeea,#f0eeea 10px,#e8e5e0 10px,#e8e5e0 20px);
  font-size: 11.5px; font-weight: 600; color: var(--ink-faint); text-align: center; padding: 0 8px;
}

.tile__label { font-size: 14px; }
  .step-title { font-size: 23px; }
  main { padding: 38px 0 56px; }
  .btn--primary { width: auto; min-width: 200px; }
}

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