/* =========================================================
   City Choice — 5-step care quiz ([cc_care_quiz])
   Scoped under .ccq. Brand tokens (--green-*, --orange-grad,
   --ink, --radius-*, --shadow-*) come from citychoice-home,
   which this stylesheet is enqueued after.

   NOTE ON SPECIFICITY: home.css carries `.cc-home button{
   background:none;color:inherit}` at (0,1,1), which beats a
   bare `.ccq-submit` (0,1,0). Every button rule below is
   therefore written as `.ccq .ccq-x` (0,2,0).

   Mobile-first: the base rules ARE the phone layout.
   ========================================================= */

.ccq{
  --ccq-gut: 16px;
  width:100%;
  box-sizing:border-box;
  color:var(--ink,#1a1a1a);
}
.ccq *,.ccq *::before,.ccq *::after{box-sizing:border-box}

/* ---------- shell ---------- */
.ccq .ccq-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:center;
  max-width:var(--container,1300px);
  margin-inline:auto;
  padding-inline:var(--ccq-gut);
}
.ccq .ccq-shell[hidden]{display:none}

.ccq .ccq-main{min-width:0;max-width:560px;width:100%}

/* ---------- progress + back ---------- */
.ccq .ccq-head{margin-bottom:14px}
.ccq .ccq-progress{
  height:6px;border-radius:var(--radius-pill,999px);
  background:rgba(31,106,72,.14);overflow:hidden;
}
.ccq .ccq-progress-bar{
  display:block;height:100%;width:20%;
  border-radius:var(--radius-pill,999px);
  background:var(--green-grad,linear-gradient(225deg,#3BC084 0%,#1F6A48 100%));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.ccq .ccq-head-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:10px;min-height:44px;
}
.ccq .ccq-backlink{
  display:inline-flex;align-items:center;gap:4px;
  min-height:44px;padding:8px 10px 8px 0;
  background:none;border:0;
  font-family:inherit;font-size:15px;font-weight:700;
  color:var(--green-900,#1f6a48);cursor:pointer;
  border-radius:var(--radius,6px);
  transition:opacity .16s ease;
}
.ccq .ccq-backlink[hidden]{display:none}
.ccq .ccq-backlink:hover{opacity:.7}
.ccq .ccq-backlink:focus-visible{outline:3px solid var(--green-500,#3BC084);outline-offset:2px}
.ccq .ccq-backlink svg{width:15px;height:15px}
.ccq .ccq-step-label{
  margin-left:auto;
  font-size:14px;font-weight:700;
  color:var(--green-900,#1f6a48);
}

/* ---------- stage 1: hero furniture ---------- */
/* One transition owns both directions; `hidden` would kill the fade, so the
   collapse is done with max-height/opacity instead. */
.ccq .ccq-intro{
  overflow:hidden;
  max-height:600px;opacity:1;margin-bottom:18px;
  transition:max-height .42s cubic-bezier(.4,0,.2,1),
             opacity .26s ease,
             margin .42s cubic-bezier(.4,0,.2,1);
}
.ccq.is-stage-steps .ccq-intro,
.ccq.is-stage-done .ccq-intro{
  max-height:0;opacity:0;margin-block:0;pointer-events:none;
}

.ccq .ccq-h1{
  margin:0 0 10px;
  font-size:clamp(27px,6.6vw,52px);
  font-weight:800;line-height:1.06;letter-spacing:-0.02em;
  color:var(--ink,#1a1a1a);text-wrap:balance;
}
.ccq .ccq-h1 em{font-style:normal;color:var(--green-700,#229a67)}
.ccq .ccq-lede{
  margin:0 0 14px;
  font-size:clamp(14px,3.7vw,18px);line-height:1.45;
  color:var(--ink-2,#474747);text-wrap:pretty;
}
/* ---------- Google review badge ---------- */
.ccq .ccq-google{
  display:inline-flex;align-items:center;gap:11px;
  margin:0;padding:10px 16px 10px 13px;
  background:#fff;
  border:1px solid var(--line,#e6e6e6);
  border-radius:var(--radius-lg,10px);
  box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05));
  text-decoration:none;color:inherit;
  max-width:100%;
}
/* Only lift when it actually links somewhere. */
.ccq a.ccq-google{transition:box-shadow .16s ease,transform .12s ease}
@media (hover:hover){
  .ccq a.ccq-google:hover{
    box-shadow:var(--shadow-md,0 2px 8px rgba(0,0,0,.07));
    transform:translateY(-1px);
  }
}
.ccq a.ccq-google:focus-visible{outline:3px solid var(--green-500,#3BC084);outline-offset:3px}

.ccq .ccq-google-mark{flex:0 0 24px;display:grid;place-items:center}
.ccq .ccq-google-mark svg{width:24px;height:24px;display:block}

.ccq .ccq-google-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.ccq .ccq-google-top{display:flex;align-items:center;gap:7px}
.ccq .ccq-google-score{
  font-size:18px;font-weight:800;line-height:1;
  color:var(--ink,#1a1a1a);letter-spacing:-0.01em;
}
.ccq .ccq-stars{display:inline-flex;gap:1px;color:#FBBC05}
.ccq .ccq-stars svg{width:15px;height:15px}
.ccq .ccq-google-note{
  font-size:13px;line-height:1.3;color:var(--muted,#7a7a7a);
}

/* ---------- stage 1: reassurance + phone CTA ---------- */
.ccq .ccq-foot{
  overflow:hidden;
  max-height:240px;opacity:1;
  margin-top:30px;
  transition:max-height .42s cubic-bezier(.4,0,.2,1),
             opacity .26s ease,
             margin .42s cubic-bezier(.4,0,.2,1);
}
.ccq.is-stage-steps .ccq-foot,
.ccq.is-stage-done .ccq-foot{
  max-height:0;opacity:0;margin-top:0;pointer-events:none;
}
.ccq .ccq-foot-line{
  margin:0 0 16px;text-align:center;
  font-size:15px;font-weight:700;line-height:1.4;
  color:var(--ink,#1a1a1a);text-wrap:balance;
}
.ccq .ccq-call{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;padding:14px 26px;
  font-size:16px;font-weight:700;text-decoration:none;
  color:#fff;background:var(--green-grad,linear-gradient(225deg,#3BC084 0%,#1F6A48 100%));
  border-radius:var(--radius-pill,999px);
  transition:filter .16s ease,transform .12s ease;
}
.ccq .ccq-call:hover{filter:brightness(1.08);color:#fff}
.ccq .ccq-call:active{transform:translateY(1px)}
.ccq .ccq-call:focus-visible{outline:3px solid var(--green-500,#3BC084);outline-offset:3px}

/* ---------- step panels ---------- */
.ccq .ccq-step[hidden]{display:none}
.ccq .ccq-step.is-active{animation:ccq-in .34s cubic-bezier(.4,0,.2,1) both}
@keyframes ccq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.ccq-fieldset{border:0;margin:0;padding:0;min-width:0}
.ccq-legend{
  display:block;width:100%;padding:0;
  font-size:clamp(21px,5.4vw,30px);font-weight:800;line-height:1.16;
  letter-spacing:-0.015em;color:var(--ink,#1a1a1a);
  margin:0 0 18px;text-wrap:balance;
}
.ccq .ccq-copy{
  margin:-10px 0 22px;font-size:15px;line-height:1.5;
  color:var(--ink-2,#474747);text-wrap:pretty;
}

/* ---------- option cards ---------- */
.ccq .ccq-cards{display:grid;gap:10px;grid-template-columns:1fr}
.ccq .ccq-card{display:block;position:relative;cursor:pointer}

/* The radio stays focusable but invisible; .ccq-card-box is the visual. */
.ccq .ccq-card input{
  position:absolute;opacity:0;width:1px;height:1px;
  margin:0;pointer-events:none;
}

.ccq .ccq-card-box{
  display:flex;align-items:center;gap:12px;
  padding:15px 18px;min-height:58px;
  border:2px solid rgba(31,106,72,.22);
  border-radius:var(--radius-pill,999px);
  background:#fff;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.ccq .ccq-card-label{
  flex:1;font-size:16px;font-weight:600;line-height:1.35;
  color:var(--ink,#1a1a1a);text-wrap:pretty;
}
.ccq .ccq-card-tick{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(31,106,72,.3);
  display:grid;place-items:center;
  color:#fff;background:transparent;
  transition:border-color .16s ease,background .16s ease;
}
.ccq .ccq-card-tick svg{width:12px;height:12px;opacity:0;transition:opacity .16s ease}

/* Hover only where there's a real pointer — stops phones sticking hover on. */
@media (hover:hover){
  .ccq .ccq-card:hover .ccq-card-box{
    border-color:var(--green-600,#2BA972);
    background:var(--green-050,#f5faf6);
  }
}

.ccq .ccq-card input:focus-visible + .ccq-card-box{
  outline:3px solid var(--green-500,#3BC084);
  outline-offset:2px;
}

.ccq .ccq-card.is-selected .ccq-card-box,
.ccq .ccq-card input:checked + .ccq-card-box{
  border-color:var(--green-800,#23805a);
  background:var(--green-100,#e7f4ec);
  box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05));
}
.ccq .ccq-card.is-selected .ccq-card-tick,
.ccq .ccq-card input:checked + .ccq-card-box .ccq-card-tick{
  border-color:var(--green-800,#23805a);
  background:var(--green-800,#23805a);
}
.ccq .ccq-card.is-selected .ccq-card-tick svg,
.ccq .ccq-card input:checked + .ccq-card-box .ccq-card-tick svg{opacity:1}

/* Long service labels read better left-aligned in a softer shape. */
.ccq .ccq-step[data-ccq-step="2"] .ccq-card-box{
  border-radius:var(--radius-lg,10px);
  align-items:flex-start;padding:16px 18px;
}

/* ---------- "Others" free-text reveal ---------- */
.ccq .ccq-other{margin-top:14px;animation:ccq-in .24s ease both}
.ccq .ccq-other[hidden]{display:none}
.ccq .ccq-other label{
  display:block;margin-bottom:6px;
  font-size:14px;font-weight:600;color:var(--ink-2,#474747);
}

/* ---------- text fields ---------- */
.ccq .ccq-field{margin-bottom:14px}
.ccq .ccq-field > label{
  display:block;margin-bottom:6px;
  font-size:14px;font-weight:600;color:var(--ink-2,#474747);
}
.ccq .ccq-req{color:var(--orange-600,#E55E30)}
.ccq .ccq-optional{font-weight:500;color:var(--muted,#7a7a7a)}

.ccq input[type=text],
.ccq input[type=tel],
.ccq input[type=email]{
  width:100%;
  /* 16px minimum — anything smaller makes iOS Safari zoom on focus. */
  padding:14px 16px;font-size:16px;font-family:inherit;
  color:var(--ink,#1a1a1a);
  border:2px solid rgba(31,106,72,.22);
  border-radius:var(--radius-lg,10px);
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.ccq input[type=text]:focus,
.ccq input[type=tel]:focus,
.ccq input[type=email]:focus{
  outline:none;
  border-color:var(--green-700,#229a67);
  box-shadow:0 0 0 3px var(--green-100,#e7f4ec);
}
.ccq .ccq-field--zip input{max-width:220px;letter-spacing:1px}
.ccq .ccq-help{margin:8px 0 0;font-size:13px;color:var(--muted,#7a7a7a)}
.ccq .ccq-zip-ok{
  display:flex;align-items:center;gap:6px;
  margin:10px 0 0;font-size:14px;font-weight:700;
  color:var(--green-800,#23805a);
  animation:ccq-in .24s ease both;
}
.ccq .ccq-zip-ok[hidden]{display:none}
.ccq .ccq-zip-ok svg{width:15px;height:15px;flex:0 0 15px}

.ccq .ccq-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Honeypot — hidden from people, reachable by bots. */
.ccq .ccq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- errors ---------- */
.ccq .ccq-error{
  margin:14px 0 0;padding:10px 12px;
  font-size:14px;font-weight:600;line-height:1.4;
  color:#8B3210;background:#fdf0e9;
  border-left:3px solid var(--orange-600,#E55E30);
  border-radius:var(--radius,6px);
}
.ccq .ccq-error[hidden]{display:none}

/* ---------- nav ---------- */
.ccq .ccq-nav{display:flex;margin-top:24px}
.ccq .ccq-next,
.ccq .ccq-submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;padding:14px 26px;
  font-family:inherit;font-size:16px;font-weight:700;
  color:#fff;background:var(--orange-grad,linear-gradient(225deg,#D17A1F 0%,#B14418 100%));
  border:0;border-radius:var(--radius-pill,999px);
  box-shadow:0 2px 0 rgba(0,0,0,.08);
  cursor:pointer;text-align:center;
  transition:background .16s ease,transform .12s ease;
}
.ccq .ccq-next[hidden]{display:none}
.ccq .ccq-next:hover,
.ccq .ccq-submit:hover{background:var(--orange-grad-hov,linear-gradient(225deg,#B16210 0%,#8B3210 100%))}
.ccq .ccq-next:active,
.ccq .ccq-submit:active{transform:translateY(1px)}
.ccq .ccq-next:focus-visible,
.ccq .ccq-submit:focus-visible{outline:3px solid var(--green-500,#3BC084);outline-offset:2px}
.ccq .ccq-submit[disabled]{opacity:.65;cursor:default;transform:none}

/* Sits directly under the submit button and shares its alignment, so the two
   read as one block instead of a centred caption under a left-aligned CTA. */
.ccq .ccq-note{
  margin:12px 0 0;font-size:13px;line-height:1.45;
  color:var(--muted,#7a7a7a);text-align:center;
}
.ccq.is-sending{pointer-events:none}

/* ---------- right column ---------- */
/* On phones the aside becomes a short banner above the headline: enough
   warmth that the hero doesn't read as a bare form, short enough that the
   first answer card still lands above the fold on a 667px screen. The
   testimonial is desktop-only — stacked under a phone hero it just adds
   scroll before the question. */
.ccq .ccq-aside{
  order:-1;
  display:flex;align-items:center;justify-content:center;
  max-height:124px;overflow:hidden;
  transition:max-height .42s cubic-bezier(.4,0,.2,1),opacity .26s ease;
}
.ccq.is-stage-steps .ccq-aside,
.ccq.is-stage-done .ccq-aside{max-height:0;opacity:0}
.ccq .ccq-aside .ccq-quotes{display:none}

.ccq .ccq-photo{
  position:relative;
  opacity:1;transform:none;
  transition:opacity .34s ease,transform .42s cubic-bezier(.4,0,.2,1);
}
.ccq.is-stage-steps .ccq-photo,
.ccq.is-stage-done .ccq-photo{
  opacity:0;transform:scale(.97);pointer-events:none;
}
/* The brand hero image is a transparent cutout, not a rectangular photo, so
   it gets the same `contain` treatment .hero-visual already uses. A cropped
   or clipped frame would slice the subject and show nothing at the edges. */
.ccq .ccq-photo{display:flex;align-items:center;justify-content:center}
.ccq .ccq-photo img{
  display:block;width:100%;height:auto;
  max-height:124px;
  object-fit:contain;
}
@media (min-width:1000px){
  .ccq .ccq-photo img{max-height:clamp(340px,40vw,540px)}
}

.ccq .ccq-quotes{
  padding:0 8px;
  opacity:0;transform:translateY(10px);
  transition:opacity .38s ease .12s,transform .42s cubic-bezier(.4,0,.2,1) .12s;
}
.ccq .ccq-quotes[hidden]{display:none}
.ccq.is-stage-steps .ccq-quotes{opacity:1;transform:none}
.ccq .ccq-quote{margin:0;animation:ccq-in .34s ease both}
.ccq .ccq-quote[hidden]{display:none}
.ccq .ccq-quote-mark{
  display:block;
  font-size:64px;line-height:.7;font-weight:800;
  color:var(--green-700,#229a67);opacity:.5;
  margin-bottom:10px;
}
.ccq .ccq-quote blockquote{
  margin:0 0 12px;
  font-size:clamp(16px,1.5vw,19px);line-height:1.55;
  color:var(--ink-2,#474747);text-wrap:pretty;
}
/* Avatar + name, so the testimonial reads as a person rather than a pull-quote. */
.ccq .ccq-quote-by{
  display:flex;align-items:center;gap:12px;
}
.ccq .ccq-quote-avatar{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  object-fit:cover;display:block;
  border:2px solid #fff;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05));
  background:var(--green-100,#e7f4ec);
}
.ccq .ccq-quote-avatar--initials{
  display:grid;place-items:center;
  font-size:15px;font-weight:700;letter-spacing:.3px;
  color:var(--green-900,#1f6a48);
}
.ccq .ccq-quote-meta{display:flex;flex-direction:column;min-width:0}
.ccq .ccq-quote-name{
  font-size:15px;font-weight:700;line-height:1.3;color:var(--ink,#1a1a1a);
}
.ccq .ccq-quote-note{
  margin-top:1px;
  font-size:13px;font-weight:500;color:var(--muted,#7a7a7a);
}

/* ---------- stage 3: success ---------- */
.ccq .ccq-success{
  max-width:620px;margin-inline:auto;
  padding:24px var(--ccq-gut) 32px;
  text-align:center;
  animation:ccq-in .4s cubic-bezier(.4,0,.2,1) both;
}
.ccq .ccq-success[hidden]{display:none}

.ccq .ccq-badge{
  position:relative;display:inline-grid;place-items:center;
  width:96px;height:96px;margin:0 0 24px;
}
.ccq .ccq-badge-burst{
  position:absolute;inset:0;width:100%;height:100%;
  fill:var(--orange-500,#F08A2A);
  animation:ccq-rotate 14s linear infinite;
}
.ccq .ccq-badge-check{
  position:relative;width:38px;height:38px;color:#fff;
  animation:ccq-pop .5s cubic-bezier(.34,1.56,.64,1) .12s both;
}
@keyframes ccq-rotate{to{transform:rotate(360deg)}}
@keyframes ccq-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

.ccq-spark{
  position:absolute;width:9px;height:9px;
  background:var(--orange-400,#F8BD39);
  /* four-point sparkle */
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:ccq-twinkle 2.6s ease-in-out infinite;
}
.ccq .ccq-spark--a{top:2px;left:4px;animation-delay:.1s}
.ccq .ccq-spark--b{bottom:8px;left:0;animation-delay:.9s}
.ccq .ccq-spark--c{bottom:4px;right:6px;animation-delay:1.7s}
@keyframes ccq-twinkle{
  0%,100%{opacity:0;transform:scale(.5)}
  50%{opacity:1;transform:scale(1)}
}

.ccq .ccq-success-title{
  margin:0 0 14px;
  font-size:clamp(24px,5.6vw,36px);font-weight:800;
  letter-spacing:-0.02em;line-height:1.14;
  color:var(--ink,#1a1a1a);text-wrap:balance;
}
.ccq .ccq-success-copy{
  margin:0 auto 28px;max-width:44ch;font-size:16px;line-height:1.55;
  color:var(--ink-2,#474747);text-wrap:pretty;
}
.ccq .ccq-success-call{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 24px;
  font-size:15px;font-weight:700;text-decoration:none;
  color:var(--green-900,#1f6a48);
  border:2px solid rgba(31,106,72,.28);
  border-radius:var(--radius-pill,999px);
  transition:background .16s ease;
}
.ccq .ccq-success-call:hover{background:var(--green-050,#f5faf6);color:var(--green-900,#1f6a48)}
.ccq .ccq-success-call:focus-visible{outline:3px solid var(--green-500,#3BC084);outline-offset:2px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ccq .ccq-step.is-active,
  .ccq .ccq-other,
  .ccq .ccq-success{animation:none}
  .ccq .ccq-badge-burst,
  .ccq .ccq-spark{animation:none}
  .ccq .ccq-badge-check{animation:none;opacity:1}
  .ccq .ccq-progress-bar,
  .ccq .ccq-intro,
  .ccq .ccq-foot,
  .ccq .ccq-photo,
  .ccq .ccq-quotes{transition:none}
  .ccq .ccq-quote{animation:none}
}

/* ---------- compact badge on small phones ----------
   The badge costs ~60px of vertical space, which is enough to push the first
   answer card under the fold on a 667px screen. Same information, tighter box. */
@media (max-width:480px){
  .ccq .ccq-google{padding:8px 13px 8px 11px;gap:9px}
  .ccq .ccq-google-score{font-size:17px}
  .ccq .ccq-google-note{font-size:12px}
  .ccq .ccq-google-mark{flex-basis:21px}
  .ccq .ccq-google-mark svg{width:21px;height:21px}
}

/* ---------- tablet ---------- */
@media (min-width:640px){
  .ccq{--ccq-gut:28px}
  .ccq .ccq-next,
  .ccq .ccq-submit,
  .ccq .ccq-call{width:auto;min-width:260px}
  .ccq .ccq-nav{justify-content:flex-start}
  .ccq .ccq-foot-line{text-align:left}
  .ccq .ccq-foot{display:flex;flex-direction:column;align-items:flex-start}
  /* Shares the button's left edge instead of centring in its own box. */
  .ccq .ccq-note{text-align:left;max-width:46ch}
}

/* ---------- desktop: two columns ---------- */
@media (min-width:1000px){
  .ccq .ccq-shell{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:56px;
    padding-block:8px;
  }
  .ccq .ccq-main{max-width:600px;justify-self:end;width:100%}

  /* The photo occupies the column; the quote takes its place in the same
     grid cell rather than below it, so nothing jumps when they swap. */
  .ccq .ccq-aside{
    order:0;display:grid;min-width:0;
    max-height:none;overflow:visible;
  }
  .ccq.is-stage-steps .ccq-aside,
  .ccq.is-stage-done .ccq-aside{max-height:none;opacity:1}
  .ccq .ccq-aside .ccq-quotes{display:block}
  .ccq .ccq-photo,
  .ccq .ccq-quotes{grid-area:1/1}
  .ccq .ccq-quotes{align-self:center;padding-inline:8px 0;text-align:right}
  .ccq .ccq-quote-mark{margin-left:auto}
  /* Right-aligned column: name reads first, avatar anchors the right edge.
     NB row-reverse flips the main axis, so flex-START is the right-hand side
     here — flex-end would shove the pair back over to the left. */
  .ccq .ccq-quote-by{flex-direction:row-reverse;justify-content:flex-start}
  .ccq .ccq-quote-meta{text-align:right}

  .ccq .ccq-step[data-ccq-step="1"] .ccq-cards,
  .ccq .ccq-step[data-ccq-step="3"] .ccq-cards{grid-template-columns:1fr 1fr}
}

@media (min-width:1400px){
  .ccq .ccq-photo img{max-height:580px}
}