/* Quote form (/quote) and home page quote banner. Added 2026-11-05. */

/* Add-ons section on the home page (the site's Tailwind build has no 4-column grid) */
.ss-addons-grid { grid-template-columns: 1fr; max-width: 80rem; }
@media (min-width: 640px) { .ss-addons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ss-addons-grid { grid-template-columns: repeat(4, 1fr); } }
.ss-addon-card { padding: 1.75rem; }

/* Home page banner replaces the Get In Touch heading */
#contact .qf-cta + .text-center.mb-16 { display: none; }
.qf-cta {
  max-width: 72rem;
  margin: 0 auto 3.5rem;
  padding: 4.5rem 1.5rem;
  text-align: center;
  border: 1px solid hsl(var(--border));
  border-radius: 1.5rem;
  background:
    radial-gradient(ellipse at 0% 0%, hsl(var(--accent) / .10), transparent 55%),
    linear-gradient(160deg, hsl(220 35% 13%) 0%, hsl(220 40% 7%) 100%);
  box-shadow: var(--shadow-lg);
  animation: qf-in .6s ease-out both;
}
@media (max-width: 639px) { .qf-cta { padding: 3rem 1.25rem; margin-bottom: 2.5rem; } }
.qf-cta-logo {
  display: block; width: 104px; height: 104px; margin: 0 auto 1.75rem;
  border-radius: 1rem; border: 1px solid hsl(var(--border));
  object-fit: cover;
}
.qf-cta-title {
  font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.01em;
  color: hsl(var(--foreground));
  margin: 0 0 1.25rem;
}
.qf-cta-title span {
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.qf-cta-sub {
  max-width: 36rem; margin: 0 auto 2.25rem;
  color: hsl(var(--foreground) / .7); font-size: 1.05rem; line-height: 1.65;
}
.qf-cta-btns { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.qf-cta-btns a {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: 3.5rem; padding: 0 2rem; border-radius: 999px;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1rem;
  transition: transform .2s, background .2s, box-shadow .2s, border-color .2s;
}
.qf-cta-btns svg { width: 18px; height: 18px; }
.qf-cta-main {
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
  box-shadow: 0 0 0 4px hsl(var(--accent) / .18), var(--shadow-glow);
}
.qf-cta-main:hover { background: hsl(var(--accent) / .9); transform: scale(1.03); }
.qf-cta-alt {
  border: 1px solid hsl(var(--foreground) / .25); color: hsl(var(--foreground));
}
.qf-cta-alt:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); }
@media (max-width: 479px) { .qf-cta-btns a { width: 100%; } }
.qf-cta-note {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: 1.5rem 0 0; font-size: .85rem; color: hsl(var(--foreground) / .5);
}
.qf-cta-note svg { width: 15px; height: 15px; color: hsl(var(--accent)); flex: none; }
.qf-wrap {
  max-width: 42rem;
  margin: 0 auto 3rem;
  animation: qf-in .6s ease-out both;
}
@keyframes qf-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.qf-card {
  background: hsl(var(--secondary) / .3);
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
}
@media (max-width: 639px) { .qf-card { padding: 1.25rem; } }

.qf-unsure {
  display: flex; align-items: flex-start; gap: .9rem;
  width: 100%; text-align: left;
  background: hsl(var(--background) / .5);
  border: 1px solid hsl(var(--border));
  border-radius: .9rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  color: hsl(var(--foreground));
  transition: border-color .2s, background .2s;
}
.qf-unsure:hover { border-color: hsl(var(--accent) / .5); }
.qf-unsure[aria-pressed="true"] { border-color: hsl(var(--accent)); background: hsl(var(--accent) / .08); }
.qf-tick {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  border: 2px solid hsl(var(--muted-foreground));
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.qf-tick svg { width: 13px; height: 13px; opacity: 0; color: hsl(var(--accent-foreground)); }
.qf-unsure[aria-pressed="true"] .qf-tick { background: hsl(var(--accent)); border-color: hsl(var(--accent)); }
.qf-unsure[aria-pressed="true"] .qf-tick svg { opacity: 1; }
.qf-unsure strong { display: block; font-family: Montserrat, sans-serif; font-size: .95rem; font-weight: 700; }
.qf-unsure span.qf-sub { display: block; font-size: .8rem; color: hsl(var(--foreground) / .6); margin-top: .2rem; }

.qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
@media (max-width: 639px) { .qf-grid { grid-template-columns: 1fr; } }
.qf-full { grid-column: 1 / -1; }

.qf-field label, .qf-label {
  display: block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: hsl(var(--foreground) / .6);
  margin-bottom: .45rem;
}
.qf-field input, .qf-field select, .qf-field textarea {
  width: 100%;
  background: hsl(var(--background) / .7);
  border: 1px solid hsl(var(--border));
  border-radius: .7rem;
  color: hsl(var(--foreground));
  font: inherit; font-size: 1rem;
  padding: .8rem .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.qf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d9c39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
  padding-right: 2.5rem;
}
.qf-field select option { background: hsl(220 35% 10%); color: hsl(var(--foreground)); }
.qf-field textarea { min-height: 6.5rem; resize: vertical; }
.qf-field input::placeholder, .qf-field textarea::placeholder { color: hsl(var(--foreground) / .35); }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsl(var(--accent) / .15);
}
.qf-field select:disabled { opacity: .45; cursor: not-allowed; }
.qf-req { color: hsl(var(--accent)); }

.qf-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.qf-pill {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / .7);
  color: hsl(var(--foreground) / .85);
  border-radius: 999px;
  padding: .5rem 1rem;
  font: inherit; font-size: .875rem; font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.qf-pill:hover { border-color: hsl(var(--accent) / .6); }
.qf-pill[aria-pressed="true"] { background: hsl(var(--accent)); border-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-weight: 600; }

.qf-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 7rem;
  background: hsl(var(--background) / .7);
  border: 1px dashed hsl(var(--border));
  border-radius: .7rem;
  padding: 1.25rem;
  color: hsl(var(--foreground) / .7);
  font-size: .9rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s;
}
.qf-drop:hover, .qf-drop.qf-over { border-color: hsl(var(--accent)); }
.qf-drop svg { width: 22px; height: 22px; color: hsl(var(--accent)); }
.qf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qf-drop small { font-size: .75rem; color: hsl(var(--foreground) / .45); }
.qf-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.qf-thumb { position: relative; width: 64px; height: 64px; border-radius: .5rem; overflow: hidden; border: 1px solid hsl(var(--border)); }
.qf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qf-thumb button {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: hsl(220 40% 8% / .85); color: #fff;
  font-size: 13px; line-height: 20px; cursor: pointer; padding: 0;
}

.qf-submit {
  width: 100%;
  margin-top: 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3.5rem;
  border: 0; border-radius: .75rem;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-family: Montserrat, sans-serif; font-size: 1.05rem; font-weight: 700;
  box-shadow: var(--shadow-glow);
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.qf-submit:hover { background: hsl(var(--accent) / .9); box-shadow: var(--shadow-lg); }
.qf-submit:disabled { opacity: .6; cursor: wait; }
.qf-submit svg { width: 18px; height: 18px; transition: transform .2s; }
.qf-submit:hover svg { transform: translateX(3px); }

.qf-error { margin-top: .9rem; font-size: .875rem; color: hsl(0 84% 70%); text-align: center; }
.qf-error a { color: hsl(var(--accent)); text-decoration: underline; }
.qf-hp { position: absolute; left: -9999px; }

.qf-done { text-align: center; padding: 2rem 1rem; }
.qf-done .qf-done-icon {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
  display: flex; align-items: center; justify-content: center;
}
.qf-done .qf-done-icon svg { width: 28px; height: 28px; }
.qf-done h3 { font-family: Montserrat, sans-serif; font-size: 1.4rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: .5rem; }
.qf-done p { color: hsl(var(--foreground) / .7); }
.qf-done a { color: hsl(var(--accent)); font-weight: 600; }