/* Ask Northline (23 Oct, concept build). Storyboard: directions/assistant-storyboard (the owner said yes).
   A full screen assistant after the Nature Haus concierge, made Northline: near black, logo blue, an orb of warm orange and cool blue.
   It keeps its own dark colours in the Light look too, like a photo. Uses the page's 4 text sizes and its two button heights (48 and 44).
   Concept only: set answers, nothing is sent anywhere. */

.cq, .ask-pill, .ask-mini {
  --c-ink: #0B1117; --c-stone: #F2F1EE; --c-muted: #A9B3BB; --c-line: rgba(242, 241, 238, .16); --c-line-strong: rgba(242, 241, 238, .4);
  --c-accent: #22709F; --c-accent-text: #9CC4E2; --c-warm: #E0A15E; --c-cool: #9DB4C2;
}

/* The orb: heat and cool in one sphere. It breathes while it talks. */
.orb { display: inline-block; flex: none; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 26%),
              conic-gradient(from 210deg, #E0A15E, #C96F3B, #22709F, #9DB4C2, #E0A15E);
  box-shadow: 0 0 44px rgba(34, 112, 159, .55), 0 0 22px rgba(224, 161, 94, .35), inset 0 -10px 22px rgba(11, 17, 23, .35); }
.orb.sm { width: 28px; height: 28px; box-shadow: 0 0 14px rgba(34, 112, 159, .6); }

/* The way in: a glass button bottom right (computer), and Ask beside Call in the phone's bottom bar */
.ask-pill { position: fixed; left: 50%; bottom: 16px; z-index: 44; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(520px, calc(100vw - 480px)); height: 48px;
  padding: 0 6px 0 10px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: rgba(11, 17, 23, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--c-stone); font: 400 var(--s4)/1 var(--text); cursor: pointer; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); text-align: left; }
.ask-pill b { font-weight: 600; white-space: nowrap; }
.ask-pill .ask-ex { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--c-muted); transition: opacity .4s; }
.ask-pill .ask-go { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent); color: #fff; }
.ask-pill .ask-go svg { width: 16px; height: 16px; }
.ask-pill:hover { border-color: var(--c-stone); }
@media (max-width: 1100px) { .ask-pill { width: auto; left: auto; right: 24px; transform: none; } .ask-pill .ask-ex { display: none; } }
.ask-mini { display: none; }
@media (max-width: 760px) {
  .ask-pill { display: none; }
  .call-bar { display: flex !important; gap: 8px; }
  .call-bar .btn { flex: 1; width: auto; }
  .ask-mini { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 48px; padding: 0 16px 0 10px; border-radius: 999px; border: 1px solid var(--c-line-strong);
    background: none; color: var(--c-stone); font: 600 var(--s4)/1 var(--text); cursor: pointer; }
}

/* The full screen */
.cq { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; color: var(--c-stone); font: 400 var(--s4)/1.55 var(--text);
  background: radial-gradient(60% 70% at 0% 100%, rgba(224, 161, 94, .14) 0%, rgba(224, 161, 94, 0) 70%),
              radial-gradient(60% 70% at 100% 0%, rgba(34, 112, 159, .30) 0%, rgba(34, 112, 159, 0) 70%), var(--c-ink); }
.cq::after { content: ""; position: absolute; inset: 0; padding: 3px; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: conic-gradient(from var(--ring, 0deg), #E0A15E, #22709F, #9DB4C2, #E0A15E);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cq.speaking::after { opacity: .9; }
.cq.urgent::after { background: conic-gradient(from var(--ring, 0deg), #E0A15E, #FF9C8F, #E0A15E); }
.cq button { font: inherit; color: inherit; }
.cq :focus-visible { outline: 2px solid var(--c-accent-text); outline-offset: 3px; }

.cq-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px var(--pad); }
.cq-word { font: 800 var(--s3)/1 var(--display); letter-spacing: -.02em; }
.cq-tag { color: var(--c-muted); }
.cq-top .cq-sp { margin-left: auto; }
.cq-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); background: none; cursor: pointer; }
.cq-icon svg { width: 20px; height: 20px; }
.cq-icon[aria-pressed="true"] { background: var(--c-stone); color: var(--c-ink); }
.cq-link { height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 6px; }

.cq-body { position: relative; flex: 1; min-height: 0; }

/* Home: the orb, one question, four pictures, ask anything */
.cq-home { position: absolute; inset: 0; overflow-y: auto; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 16px var(--pad) 40px; text-align: center; }
.cq-hi { color: var(--c-muted); }
.cq-h { font: 700 var(--s1)/1.05 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.cq-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); gap: 20px; margin-top: 12px; }
.cq-pick { display: grid; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-weight: 600; }
.cq-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .3s; }
.cq-pick:hover img { transform: scale(1.03); filter: brightness(1.08); }
.cq-more { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.cq-form { display: flex; align-items: center; gap: 8px; width: min(520px, 100%); height: 60px; padding: 0 8px 0 22px; border-radius: 999px;
  border: 1px solid var(--c-line-strong); background: rgba(242, 241, 238, .07); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cq-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--c-stone); font: inherit; outline: none; }
.cq-form input::placeholder { color: var(--c-muted); }
.cq-form .go { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.cq-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: none; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--c-stone); }
.cq-chip:hover { border-color: var(--c-stone); }
.cq-chip[aria-pressed="true"] { background: var(--c-stone); border-color: var(--c-stone); color: var(--c-ink); }
.cq-act { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 4px; border: 1px solid var(--c-accent);
  background: var(--c-accent); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; }
.cq-act.warm { background: var(--c-warm); border-color: var(--c-warm); color: var(--c-ink); }
.cq-act.line { background: none; border-color: var(--c-line-strong); color: var(--c-stone); }
.cq-act svg { width: 18px; height: 18px; }

/* Answer: the talk on the left, the picture or the house on the right. On a phone the picture is on top. */
.cq-ans { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 48px; padding: 8px var(--pad) 24px; }
.cq-talk { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 96px; scrollbar-width: thin; }
.cq-you { align-self: flex-end; max-width: 85%; padding: 10px 18px; border-radius: 18px 18px 4px 18px; background: rgba(242, 241, 238, .12); }
.cq-says { display: flex; gap: 12px; align-items: flex-start; }
.cq-says p { font-size: var(--s3); line-height: 1.45; }
.cq-says .w { opacity: 0; transition: opacity .35s; }
.cq-says .w.in { opacity: 1; }
.cq-says mark { background: none; color: var(--c-warm); font-weight: 600; }
.cq-says mark.cool { color: var(--c-cool); }
.cq-note { color: var(--c-muted); }
.cq-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cq-card { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--c-line); background: rgba(242, 241, 238, .06); }
.cq-card b { display: block; margin-bottom: 4px; }
.cq-card span { color: var(--c-muted); }
.cq-steps { display: flex; gap: 6px; }
.cq-steps i { flex: 1; height: 4px; border-radius: 2px; background: rgba(242, 241, 238, .2); }
.cq-steps i.on { background: var(--c-accent-text); }
.cq-q { font-weight: 600; }
.cq-field { display: grid; gap: 6px; }
.cq-field input, .cq-field textarea { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--c-line-strong); background: rgba(11, 17, 23, .5);
  color: var(--c-stone); font: inherit; }
.cq-field textarea { height: 96px; padding: 12px 16px; resize: vertical; }
.cq-field input[type=file] { padding: 10px 16px; }
.cq-err { color: #FF9C8F; }
.cq-done { display: grid; gap: 8px; padding: 18px; border-radius: 12px; border: 1px solid var(--c-accent-text); }
.cq-sum dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin: 0; }
.cq-sum dt { color: var(--c-muted); }
.cq-sum dd { margin: 0; font-weight: 600; }
.cq-line { display: grid; }
.cq-line div { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.cq-line div::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-line-strong); justify-self: center; }
.cq-line .done::before { background: var(--c-accent-text); border-color: var(--c-accent-text); }
.cq-line .now::before { background: var(--c-warm); border-color: var(--c-warm); box-shadow: 0 0 0 6px rgba(224, 161, 94, .25); }
.cq-line em { font-style: normal; color: var(--c-muted); }
.cq-sample { color: var(--c-warm); font-weight: 600; }

.cq-dock { position: absolute; left: var(--pad); bottom: 24px; width: min(520px, calc(100% - 2 * var(--pad))); }

.cq-stage { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: #060A0E; }
.cq-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cq-cap { position: absolute; left: 20px; bottom: 20px; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 999px; background: rgba(11, 17, 23, .62);
  border: 1px solid var(--c-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-weight: 600; }
.cq-side { position: absolute; inset: 0; overflow-y: auto; display: grid; align-content: start; gap: 16px; padding: 20px; }
.cq-side img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }

/* The house inside the answer (the same pictures and drawings as the site's scroll story, driven by the talk) */
.cq-house { position: absolute; inset: 0; overflow: hidden; }
.cq-house .world { position: absolute; left: 0; top: 0; width: 1900px; height: 900px; transform-origin: 0 0; }
.cq-house .world::after { content: ""; position: absolute; left: 0; right: 0; top: 898px; height: 1200px; background: #0A0F14; }
.cq-house .w { position: absolute; left: 0; top: 0; width: 1900px; height: 900px; max-width: none; }
.cq-house .day { clip-path: inset(0 100% 0 0); }
.cq-house .ducts { clip-path: inset(100% 0 0 0); }
.cq-house .air path { stroke-width: 8; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cq-house .warm path { stroke: #E0A15E; }
.cq-house .cool path { stroke: #9DB4C2; }
.cq-house .front { position: absolute; max-width: none; object-fit: cover; }
.cq-house .blades { fill: rgba(214, 226, 234, .32); transform-box: view-box; transform-origin: 1633px 628px; animation: cq-spin 1.1s linear infinite; }
.cq-house .rain { position: absolute; top: -240px; right: -240px; bottom: 0; left: 0; pointer-events: none; background: url("assets/layers/rain-light.svg") repeat; animation: cq-rain 1.2s linear infinite; }
.cq-reads { position: absolute; right: 16px; top: 16px; display: flex; gap: 8px; }
.cq-reads p { display: grid; gap: 2px; padding: 8px 14px; border-radius: 12px; background: rgba(11, 17, 23, .7); border: 1px solid var(--c-line); }
.cq-reads b { font: 300 var(--s2)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cq-reads p > span, .cq-reads .lab { color: var(--c-muted); }
.cq-reads .lab { display: grid; }
.cq-reads .lab > span { grid-area: 1 / 1; }
.cq-reads .r-in { opacity: 0; }
.cq-reads .summer { opacity: 0; }

/* The site tour: a glass bar that walks the page */
.cq-tour { position: fixed; left: 50%; bottom: 24px; z-index: 69; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(720px, calc(100% - 32px));
  padding: 8px 8px 8px 12px; border-radius: 999px; border: 1px solid var(--c-line-strong); background: rgba(11, 17, 23, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--c-stone); font: 400 var(--s4)/1.4 var(--text); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
.cq-tour p { flex: 1; min-width: 0; }
.cq-tour button { font: inherit; }

@media (max-width: 760px) {
  .cq-h { font-size: var(--s2); }
  .cq-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .cq-home { place-content: start center; padding-top: 8px; }
  .cq-ans { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; overflow-y: auto; }
  .cq-stage { flex: none; order: -1; height: 34vh; min-height: 220px; }
  .cq-top { gap: 8px; padding: 10px 16px; }
  .cq-tag { display: none; }
  .cq-link { white-space: nowrap; }
  .cq-talk { overflow: visible; padding-bottom: 88px; }
  .cq-says p { font-size: var(--s4); }
  .cq-grid2 { grid-template-columns: 1fr; }
  .cq-dock { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; }
  .cq-side { position: relative; inset: auto; padding: 0; }
  .cq-tour { bottom: 88px; }
}

@property --ring { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: cq-breathe 3.2s ease-in-out infinite; }
  .cq.speaking::after { animation: cq-ring 6s linear infinite; }
  .cq-focus { animation: cq-focus 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .cq-in { animation: cq-up .5s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .cq-says .w { opacity: 1; transition: none; } .cq-house .blades, .cq-house .rain { animation: none; } }
@keyframes cq-breathe { 50% { transform: scale(1.06); filter: saturate(1.25); } }
@keyframes cq-ring { to { --ring: 360deg; } }
@keyframes cq-focus { from { filter: blur(14px); transform: scale(1.04); opacity: .4; } to { filter: none; transform: none; opacity: 1; } }
@keyframes cq-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cq-spin { to { transform: rotate(360deg); } }
@keyframes cq-rain { to { transform: translate3d(-48px, 240px, 0); } }

/* ---------- judges round 2 ---------- */
.cq-word { font-weight: 600; }
.ask-ic { width: 20px; height: 20px; flex: none; color: var(--c-stone); }
.ask-pill .orb, .ask-mini .orb { display: none; }
/* computer: a quiet strip across the bottom holds the bar, so it never sits on the page's buttons */
@media (min-width: 1101px) {
  .ask-strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: flex; justify-content: center; align-items: center; height: 72px;
    background: rgba(11, 17, 23, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(242, 241, 238, .14); }
  .ask-strip .ask-pill { position: static; transform: none; width: 480px; height: 44px; box-shadow: none; padding-left: 16px; }
  html.has-ask-strip body { padding-bottom: 72px; }
}
@media (max-width: 1100px) { .ask-strip { display: contents; } }
/* the assistant's answers never hide under its own bar; buttons keep their size */
.cq-talk > *, .cq-ans > * { flex-shrink: 0; }
.cq-act { min-height: 48px; }
.cq-done:focus { outline: none; }
@media (max-width: 760px) {
  .cq-ans { padding-bottom: 104px; }
  .cq-talk { padding-bottom: 24px; }
  .ask-mini { gap: 6px; }
}

/* ---------- judges round 3 ---------- */
.cq-mark { display: block; flex: none; width: 64px; height: 64px; }
.cq-mark.sm { width: 28px; height: 28px; }
.cq-topcall { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 4px; background: var(--c-warm); color: var(--c-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cq-topcall svg { width: 16px; height: 16px; }
.cq.urgent .cq-topcall { display: inline-flex; }
.cq-checks { display: grid; gap: 12px; margin: 0; padding-left: 20px; font-size: var(--s3); line-height: 1.45; }
.cq-sep { width: 100%; height: 0; margin: 8px 0; border: 0; border-top: 1px solid var(--c-line); }
@media (max-width: 760px) { .cq.urgent .cq-topcall { height: 44px; padding: 0 12px; } .cq.urgent .cq-word { display: none; } }

/* ---------- judges round 4: no band across the bottom; the bar floats on its own ---------- */
@media (min-width: 1101px) {
  .ask-strip { display: contents; }
  .ask-strip .ask-pill { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: 480px; height: 48px; box-shadow: 0 8px 28px rgba(0, 0, 0, .4); }
  html.has-ask-strip body { padding-bottom: 0; }
}
/* the top bar always has a way to call; on a phone it is an icon, and Close always fits */
.cq-topcall { display: inline-flex; background: none; border: 1px solid var(--c-line-strong); color: var(--c-stone); }
.cq.urgent .cq-topcall { background: var(--c-warm); border-color: var(--c-warm); color: var(--c-ink); }
.cq-home:not([hidden]) ~ .cq-ans[hidden] { display: none; }
@media (max-width: 760px) {
  .cq-top { gap: 6px; }
  .cq-word, .cq-tag { display: none; }
  .cq-topcall { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .cq-topcall svg { width: 18px; height: 18px; }
  .cq-link[data-home] { padding: 0 6px; }
}
/* the "While You Wait" panel is as tall as its words */
.cq-stage:has(.cq-side) { align-self: start; background: none; }
.cq-stage .cq-side { position: relative; inset: auto; }
/* closed earlier steps */
.cq-talk .is-closed { opacity: .5; pointer-events: none; }

/* ---------- judges round 5 ---------- */
/* the ask box: no square box inside the round pill; the whole pill gets one 2 px ring while you type */
.cq .cq-form input:focus, .cq .cq-form input:focus-visible { outline: none; }
.cq-form:focus-within { border-color: var(--c-accent-text); box-shadow: 0 0 0 1px var(--c-accent-text); }
/* Call is the site blue, like every main button (no amber) */
.cq-act.warm { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.cq.urgent .cq-topcall { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
/* one Call button at a time: while the answer's call button is on screen, the top one steps aside (assistant.js) */
.cq.call-in-view .cq-topcall { visibility: hidden; }
/* the four picture cards in one grade: the two darker ones lifted */
.cq-pick:nth-child(3) img, .cq-pick:nth-child(4) img { filter: brightness(1.25); }
.cq-pick:nth-child(3):hover img, .cq-pick:nth-child(4):hover img { filter: brightness(1.35); }
/* one corner for pictures and cards across the site: 4 px */
.cq-pick img, .cq-stage, .cq-side img, .cq-card, .cq-done, .cq-reads p, .cq-field input, .cq-field textarea { border-radius: 4px; }
/* phone: each picture or checklist right under its own answer, and it stays in the history */
@media (max-width: 760px) {
  .cq-ans > .cq-stage { display: none; }
  .cq-talk .cq-inline { order: 0; flex: none; width: 100%; height: auto; min-height: 0; }
  .cq-talk .cq-inline:has(> img), .cq-talk .cq-inline:has(.cq-house) { aspect-ratio: 4 / 3; }
  .cq-talk .cq-inline .cq-side { padding: 0; }
}
/* the focus ring of a field sits inside it, so the answer column never cuts it off */
.cq .cq-field input:focus-visible, .cq .cq-field textarea:focus-visible { outline-offset: -2px; }

/* ==================== 23 Oct, judges round 6 ==================== */
/* phone bar: Ask has the same shape as Call and Estimate (48 px, 4 px corners, outlined like Estimate) */
@media (max-width: 760px) {
  .call-bar .ask-mini { height: 48px; padding: 0 16px; border-radius: 4px; border-color: rgba(242, 241, 238, .42); font-weight: 500; }
  .call-bar .ask-mini:hover { border-color: var(--c-stone); }
}
/* the assistant's top bar: Call, Sound, Start Over and Close are one family of outlined 44 px controls with 4 px corners
   (44, not 40: the site keeps two button heights, 48 and 44) */
.cq-top .cq-topcall, .cq-top .cq-icon, .cq-top .cq-link { display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 4px;
  border: 1px solid var(--c-line-strong); background: none; color: var(--c-stone); font-weight: 500; text-decoration: none; }
.cq-top .cq-icon { width: 44px; padding: 0; }
.cq-top .cq-link { padding: 0 16px; }
.cq-top .cq-topcall:hover, .cq-top .cq-icon:hover, .cq-top .cq-link:hover { border-color: var(--c-stone); }
.cq-top .cq-icon[aria-pressed="true"] { background: var(--c-stone); border-color: var(--c-stone); color: var(--c-ink); }
.cq.urgent .cq-top .cq-topcall { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
@media (max-width: 760px) { .cq-top .cq-link, .cq-top .cq-link[data-home] { padding: 0 12px; } }
/* the four picture cards: every label two lines tall, so the cards in a row line up */
.cq-pick { align-content: start; }
@media (max-width: 760px) { .cq-pick-l { display: block; min-height: calc(2 * 1.55em); } }
/* an answered question or a sent form looks closed (the arrive move kept them at full strength before) */
.cq-talk .is-closed { animation: none; opacity: .5; }
.cq-talk form.is-closed .cq-act { display: none; }
/* errors like the estimate form: the field turns red, the message sits under it */
.cq-ferr { color: #FF9C8F; }
.cq-ferr:empty { display: none; }
.cq .cq-field input[aria-invalid="true"], .cq .cq-field textarea[aria-invalid="true"] { border-color: #FF9C8F; box-shadow: inset 0 0 0 1px #FF9C8F; }
.cq .cq-field input[aria-invalid="true"]:focus-visible, .cq .cq-field textarea[aria-invalid="true"]:focus-visible { outline-color: #FF9C8F; }
/* urgent: the answer's Call button stays on screen while the answer scrolls */
.cq-talk > a.cq-call-now { position: sticky; top: 0; z-index: 2; box-shadow: 0 8px 16px rgba(11, 17, 23, .85); }

/* ==================== 23 Oct, judges round 7 ==================== */
/* Owner's decision: on a computer the Ask button stays a floating pill, but it never covers what matters. It fades out while the estimate
   form, a review's name line, a page button, the brand names or the focused control would sit under it (assistant.js), and the page
   ends with room under the footer. */
.ask-pill { transition: opacity .25s, visibility 0s; }
.ask-pill.away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; }
@media (min-width: 761px) { html.has-ask-strip body { padding-bottom: 80px; } }
/* 3. the answer always has room to scroll its last button above the "Ask a follow up" bar */
@media (min-width: 761px) { .cq-talk { padding-bottom: 120px; } }
/* 7. Phone: the four picture cards a little shorter, so Talk to a Person shows without scrolling */
@media (max-width: 760px) {
  .cq-home { gap: 16px; padding-bottom: 24px; }
  .cq-picks { margin-top: 4px; }
  .cq-pick { gap: 8px; }
  .cq-pick img { aspect-ratio: 16 / 9; }
}
/* 12. Phone bar: Ask is plain words like Estimate (no line around it), 44 px to tap */
@media (max-width: 760px) {
  .call-bar .ask-mini, .call-bar .ask-mini:hover { flex: 1; justify-content: center; height: 44px; padding: 0 8px; border: 0; border-radius: 4px; background: none; font-weight: 600; color: var(--stone); }
  .call-bar .ask-mini .ask-ic { color: currentColor; }   /* the bar's words follow the page colours (they vanished in the Light look) */
}
/* 17. Corners: 4 px for chips, the ask box and its buttons, the captions, your messages and the tour bar (only the Ask button is fully round) */
.cq-chip, .cq-icon, .cq-form, .cq-form .cq-icon, .cq-cap, .cq-you, .cq-tour, .cq-tour .cq-chip, .cq-top .cq-topcall, .cq-top .cq-icon, .cq-top .cq-link { border-radius: 4px; }
/* 20. A marked word is white and 600 (no amber) */
.cq-says mark, .cq-says mark.cool { color: var(--c-stone); font-weight: 600; }
.cq-sample { color: var(--c-stone); }
/* 21. Two weights only: 400 and 600 */
.cq-h { font-weight: 600; }
.cq-reads b { font-weight: 400; }
.cq-top .cq-topcall, .cq-top .cq-icon, .cq-top .cq-link { font-weight: 600; }

/* ==================== 23 Oct, judges round 8 ==================== */
/* 8. Heat Pump or Furnace: the air as the home page draws it. Thin dashes about 2 px wide with arrowheads and a thin dark edge (cool
      #7CC4FF, warm amber #FFB062), along the ducts that are in the picture, never across the beds. assistant.js sets --hk (the
      picture's scale) so the lines keep their size on screen; each line is drawn in by a mask path (.rev). */
.cq-house .air .rev { stroke: #fff; stroke-width: 60; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cq-house .air .dash { stroke-width: calc(2px / var(--hk, 1)); stroke-dasharray: calc(7px / var(--hk, 1)) calc(5px / var(--hk, 1)); stroke-dashoffset: 0; stroke-opacity: 1; }
.cq-house .air .halo { stroke-width: calc(8px / var(--hk, 1)); stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: .32; filter: blur(calc(4px / var(--hk, 1))); }
.cq-house .warm .dash { stroke: #FFB062; }   /* amber: the pale #FFE2B8 of the night band was lost on the lit rooms */
.cq-house .air .dash { filter: drop-shadow(0 0 calc(1px / var(--hk, 1)) rgba(6, 10, 14, .85)); }   /* a thin dark edge, like the home page's air */
.cq-house .warm .halo { stroke: #FFB062; }
.cq-house .cool .dash, .cq-house .cool .halo { stroke: #7CC4FF; }
@media (prefers-reduced-motion: no-preference) {
  .cq-house .air .dash { animation: cq-air 1.4s linear infinite; }
}
@keyframes cq-air { to { stroke-dashoffset: calc(-12px / var(--hk, 1)); } }

/* ==================== 23 Oct, judges round 9 (design 7.5, UX 8) ==================== */
/* 8. The My Install card is the dusk house now (it was the brick wall of heat pumps, on screen four times); it needs no lift */
.cq-pick:nth-child(4) img { filter: none; }
.cq-pick:nth-child(4):hover img { filter: brightness(1.08); }

/* 10. Phone: the header is the logo, one call icon and Close. No large logo on the start screen (the header has it); Start Over sits
       beside the follow-up bar (the read-aloud button stays on the computer). Computer: Start Over stays in the header. */
.cq-dockrow { display: contents; }
.cq-again { display: none; }
@media (max-width: 760px) {
  .cq-home > .cq-mark { display: none; }
  .cq-top .cq-icon[data-sound], .cq-top .cq-link[data-home] { display: none; }
  .cq-dockrow { position: fixed; z-index: 1; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; }
  .cq-dockrow .cq-dock { position: static; flex: 1 1 auto; min-width: 0; width: auto; }
  .cq-again { display: inline-flex; flex: none; align-items: center; height: 48px; padding: 0 12px; border: 1px solid var(--c-line-strong); border-radius: 4px;
    background: var(--c-ink); color: var(--c-stone); font: 600 var(--s4)/1 var(--text); white-space: nowrap; cursor: pointer; }
  .cq-again:hover { border-color: var(--c-stone); }
  .cq-dockrow .cq-form { height: 48px; padding: 0 2px 0 16px; }
}

/* 13 and 14. The site tour: right after the Ask button in the Tab order (assistant.js). Phone: the words across the full width on one or
       two lines, Next and Stop side by side under them, the bar just above the call bar. */
@media (max-width: 760px) {
  .cq-tour { left: 16px; right: 16px; width: auto; transform: none; bottom: calc(68px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; padding: 12px; }
  .cq-tour .cq-mark { display: none; }
  .cq-tour p { flex: 1 1 100%; }
  .cq-tour .cq-chip { flex: 1 1 0; justify-content: center; }
}

/* 15. Which Fits My Home: the three answers in one card before the closing line */
.cq-recap { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 4px; background: rgba(242, 241, 238, .06); }
.cq-recap dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.cq-recap dt { color: var(--c-muted); }
.cq-recap dd { margin: 0; font-weight: 600; }

/* 17. The house's temperatures: Outside then Inside, the home page's numbers. Computer: two boxes on the picture, top right.
       Phone: under the picture, like the home page's band (no boxes, a thin line between the two). */
.cq-reads p { justify-items: center; min-width: 88px; }
@media (max-width: 760px) {
  .cq-talk .cq-inline.has-reads { aspect-ratio: auto; height: auto; overflow: visible; background: none; border-radius: 0; }
  .cq-inline.has-reads > .cq-house { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; background: #060A0E; }
  .cq-inline.has-reads > .cq-reads { position: static; display: flex; justify-content: center; gap: 0; padding-top: 12px; }
  .cq-inline.has-reads > .cq-reads p { min-width: 0; padding: 0 20px; border: 0; border-radius: 0; background: none; }
  .cq-inline.has-reads > .cq-reads p + p { border-left: 1px solid rgba(242, 241, 238, .45); }
}
/* 13. Computer: the tour bar sits just above the Ask button (16 px clear), so both show and Tab goes from Ask straight to Next */
@media (min-width: 761px) { .cq-tour { bottom: 80px; } }
/* the tour bar lives outside the assistant, so it gets the assistant's colours too (its outlines were missing); Next is the filled one */
.cq-tour { --c-ink: #0B1117; --c-stone: #F2F1EE; --c-muted: #A9B3BB; --c-line: rgba(242, 241, 238, .16); --c-line-strong: rgba(242, 241, 238, .4);
  --c-accent: #22709F; --c-accent-text: #9CC4E2; }
.cq-tour .cq-chip[data-next] { background: var(--c-stone); border-color: var(--c-stone); color: var(--c-ink); font-weight: 600; }

/* ==================== 23 Oct, judges round 10 (design 8, UX 7, assistant 7) ==================== */
/* 3. An answered question keeps only its line and your reply (assistant.js hides the choice row; no half strength grey rows).
      Phone: Walk Me Through the Site and Talk to a Person fill the width, 48 px tall. */
@media (max-width: 760px) {
  .cq-more { justify-self: stretch; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .cq-more .cq-chip { justify-content: center; width: 100%; height: 48px; }
}
/* 4. My furnace stopped: Call Me Back is an outline button beside the blue Call; the Heating & Furnaces picture sits above While You Wait */
.cq-act.line:hover { border-color: var(--c-stone); }
.cq-side img.cq-furnace { object-position: 50% 62%; }
/* 5. A photo: a 48 px row like the app's Add a Photo (camera, words, 1 px line). The real file box is out of sight but still a Tab stop;
      its focus ring shows on the row. After a pick the row shows the file's name. */
.cq-filefield { position: relative; }
.cq-file-in { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.cq-file { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--c-line-strong); border-radius: 4px;
  background: rgba(11, 17, 23, .5); color: var(--c-accent-text); font-weight: 600; cursor: pointer; }
.cq-file svg { flex: none; width: 24px; height: 24px; }
.cq-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-file:hover { border-color: var(--c-stone); }
.cq-file.added { border-color: var(--c-accent-text); }
.cq .cq-file-in:focus-visible + .cq-file { outline: 2px solid var(--c-accent-text); outline-offset: 2px; }
/* 13. While the site tour runs the Ask pill steps aside, and on a computer the tour bar takes its place at the foot of the screen */
.cq-touring .ask-pill, .cq-touring .ask-pill.away { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 761px) { .cq-tour { bottom: 16px; } }

/* ==================== 23 Oct, judges round 11 (design 7, UX 6) ==================== */
/* 2. Safety (gas, carbon monoxide, burning, smoke): "Leave the house now, then call 911." comes first and large (20 px on a computer,
      18 px on a phone, white, 600), then Northline's line and the check-words note. One centred column, no picture beside it. */
.cq-safety { margin: 0; font: 600 var(--s3)/1.35 var(--text); color: #FFFFFF; }
@media (min-width: 761px) {
  .cq-ans.cq-solo { grid-template-columns: minmax(0, 640px); justify-content: center; }
  .cq-ans.cq-solo > .cq-stage { display: none; }
  .cq-ans.cq-solo .cq-dock { left: max(var(--pad), calc(50% - 320px)); width: min(640px, calc(100% - 2 * var(--pad))); }
}
/* 4. When is my install: the sample install day, with the app's own sample times */
.cq-sample-card { display: grid; gap: 4px; }
.cq-sample-card b { margin: 0; }
/* 14. A picked chip and the tour's Next: the card colour (#18222C), light words and a 2 px light blue line under them
       (blue stays the only filled main button) */
.cq-chip[aria-pressed="true"], .cq-tour .cq-chip[data-next] { background: #18222C; border-color: #18222C; color: var(--c-stone); font-weight: 600; box-shadow: inset 0 -2px 0 #9CC4E2; }
.cq-tour .cq-chip[data-next]:hover { border-color: var(--c-line-strong); }

/* ==================== 23 Oct, judges round 12 (design 8, UX 7, assistant 7) ==================== */
/* 1. The brands answer: the 13 brands the site shows, in one card, one centred wrapping row of names (as on the page) */
.cq-brands { display: grid; gap: 8px; text-align: center; }
.cq-brands ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.cq-brands li { white-space: nowrap; color: var(--c-stone); }
/* 13. "Or we call you back:" goes with its form: hidden once the form is sent or closed (assistant.js) */
.cq-cb-note[hidden] { display: none; }
/* ==================== 23 Oct, judges round 14 (design 8, UX 7, assistant 5) ==================== */
/* 20. Phone: the call back fields never rest under the Ask bar. A focused field scrolls clear of the bar (its 48 px, its 16 px from
       the bottom and 16 px of room), and the form keeps that room under it (assistant.js lifts the form when it comes in). */
@media (max-width: 760px) {
  .cq-ans { scroll-padding-bottom: 80px; }
  .cq-talk form { scroll-margin-bottom: 80px; }
}