/* ══════════════════════════════════════════════════════════════════
   Green Edge Technologies — Get a Quote · quote.css
   Aesthetic: Mission-control form — dark precision, step-driven
══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────── */
:root {
  --bg:#0A0F1C; --bg-2:#121826; --bg-3:#0d1220;
  --surface:#1A2235; --surface-2:#202c42;
  --border:rgba(255,255,255,.07); --border-g:rgba(0,200,83,.22);
  --text:#FFFFFF; --text-muted:#B0B8C5; --text-faint:#6F7A8A;
  --green:#00C853; --green-dark:#006837;
  --green-glow:rgba(0,200,83,.30); --green-subtle:rgba(0,200,83,.08);
  --ai-blue:#00A8FF; --tech-purple:#6C63FF; --orange:#FF6B00;
  --grad-text:linear-gradient(120deg,#00C853 0%,#00A8FF 50%,#6C63FF 100%);
  --grad-btn:linear-gradient(135deg,#00C853,#006837);
  --font-d:'Manrope',sans-serif; --font-b:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:14px; --radius-lg:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:72px
}
body.light {
  --bg:#F4F6FA; --bg-2:#EBEEF5; --bg-3:#E0E5EE;
  --surface:#FFFFFF; --surface-2:#F0F3F8;
  --border:rgba(0,0,0,.08); --border-g:rgba(0,200,83,.30);
  --text:#0A0F1C; --text-muted:#4A5568; --text-faint:#9AA5B4;
  --green-subtle:rgba(0,200,83,.10)
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-b); font-size:16px; line-height:1.7;
  cursor:default;
  transition:background .4s,color .4s
}
a { color:inherit; text-decoration:none }
ul { list-style:none }
button { border:none; background:none; font-family:inherit; cursor:pointer }
input,select,textarea { font-family:inherit; font-size:inherit; outline:none }

/* NOISE */
/* CONTAINER */
.container { max-max-width: 1240px; width: 100%; margin:0 auto; padding:0 28px }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 26px; border-radius:9px;
  font-family:var(--font-d); font-weight:700; font-size:.9rem;
  letter-spacing:.01em; transition:all .3s var(--ease);
  position:relative; overflow:hidden; cursor:pointer
}
.btn::after {
  content:''; position:absolute; inset:0; opacity:0;
  background:rgba(255,255,255,.1); border-radius:inherit; transition:opacity .25s
}
.btn:hover::after { opacity:1 }
.btn-primary { background:var(--grad-btn); color:#fff; box-shadow:0 4px 22px var(--green-glow) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 40px var(--green-glow),0 0 0 1px rgba(0,200,83,.35) }
.btn-ghost { border:1.5px solid var(--green); color:var(--green); background:var(--green-subtle) }
.btn-ghost:hover { background:rgba(0,200,83,.16); transform:translateY(-2px) }
.btn-lg { padding:15px 34px; font-size:1rem; border-radius:11px }
.btn-sm { padding:9px 18px; font-size:.82rem }
.btn-pulse { animation:btnPulse 3s ease-in-out infinite }
.btn-pulse:hover { animation:none }
@keyframes btnPulse {
  0%,100% { box-shadow:0 4px 22px var(--green-glow) }
  50% { box-shadow:0 4px 44px rgba(0,200,83,.6),0 0 0 7px rgba(0,200,83,.07) }
}
.gradient-text {
  background:var(--grad-text); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text
}

/* PROGRESS RING / BACK TO TOP */
.progress-ring-wrap {
  position:fixed; bottom:2rem; right:2rem; z-index:2200;
  width:52px; height:52px; border-radius:50%;
  background:var(--surface); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(14px) scale(.9);
  transition:opacity .35s,visibility .35s,transform .35s var(--ease);
  box-shadow:0 4px 24px rgba(0,0,0,.4)
}
.progress-ring-wrap.visible { opacity:1; visibility:visible; transform:translateY(0) scale(1) }
.progress-ring-wrap:hover { transform:translateY(-3px) scale(1.06) }
.progress-ring { position:absolute; inset:0; transform:rotate(-90deg) }
.progress-ring__track { fill:none; stroke:rgba(255,255,255,.08); stroke-width:2.5 }
.progress-ring__fill {
  fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:125.66; stroke-dashoffset:125.66; transition:stroke-dashoffset .1s linear
}
.progress-ring__icon { position:relative; z-index:1; color:var(--green) }

/* ══ NAV ═════════════════════════════════════════════════════════════ */
/* ══ FOOTER ══════════════════════════════════════════════════════════ */
.footer-col ul { display:flex; flex-direction:column; gap:9px }
.footer-col a { font-size:.875rem; color:var(--text-muted); transition:color .2s; cursor:pointer }
.footer-col a:hover { color:var(--green) }

/* ══════════════════════════════════════════════════════════════════
   GET A QUOTE — PAGE SPECIFIC STYLES
   Aesthetic: Mission-control — dark, precise, step-driven
══════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO BANNER ─────────────────────────────────────────────── */
.quote-hero {
  padding-top:var(--nav-h); background:var(--bg);
  position:relative; overflow:hidden
}
.quote-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 80% 50%, rgba(0,200,83,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(0,168,255,.04) 0%, transparent 55%)
}
/* dot grid */
.quote-hero-dots {
  position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image:radial-gradient(circle, var(--green) 1px, transparent 1px);
  background-size:28px 28px
}
body.light .quote-hero-dots { opacity:.06 }
.quote-hero-inner {
  padding:4.5rem 0 4rem; display:grid;
  grid-template-columns:1fr auto; align-items:center;
  gap:3rem; position:relative; z-index:1
}
.quote-hero-badge {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:1.25rem;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  color:var(--green); letter-spacing:.12em; text-transform:uppercase;
  padding:5px 14px; border:1px solid var(--border-g);
  border-radius:4px; background:var(--green-subtle)
}
.quote-hero-badge::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green-glow); animation:gPulse 2s ease-in-out infinite
}
@keyframes gPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.quote-hero-title {
  font-family:var(--font-d); font-size:clamp(2.25rem, 4.2188vw, 3.5625rem);
  font-weight:800; letter-spacing:-.04em; line-height:1.08;
  margin-bottom:1rem; animation:qFadeUp .8s var(--ease) .05s both
}
@keyframes qFadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.quote-hero-sub {
  font-size:1.05rem; color:var(--text-muted); line-height:1.8;
  max-max-width: 520px; width: 100%; animation:qFadeUp .8s var(--ease) .14s both
}
/* right: trust chips row */
.quote-trust {
  display:flex; flex-direction:column; gap:1rem;
  animation:qFadeUp .8s var(--ease) .2s both
}
.qt-chip {
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.1rem; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
  white-space:nowrap; transition:border-color .3s,transform .3s var(--ease)
}
.qt-chip:hover { border-color:var(--border-g); transform:translateX(-4px) }
.qt-chip-icon {
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center
}
.qt-chip-text strong { display:block; font-family:var(--font-d); font-size:.88rem; font-weight:800 }
.qt-chip-text span { font-size:.74rem; color:var(--text-faint) }
/* bottom divider */
.quote-hero-divider {
  height:1px; background:linear-gradient(90deg,transparent,var(--border-g),transparent)
}

/* ── QUOTE FORM WRAPPER ───────────────────────────────────────────── */
.quote-section {
  padding:60px 0 100px; background:var(--bg)
}
.quote-layout {
  display:grid; grid-template-columns:1fr 360px; gap:2.5rem; align-items:start
}

/* ── STEP PROGRESS INDICATOR ─────────────────────────────────────── */
.quote-steps {
  display:flex; align-items:center; gap:0; margin-bottom:2.5rem
}
.qstep {
  display:flex; align-items:center; gap:.65rem; flex:1;
  padding:.75rem 1rem; border-radius:10px; cursor:pointer;
  transition:background .25s; position:relative
}
.qstep:last-child { flex:none }
.qstep-num {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:.78rem; font-weight:800;
  border:2px solid var(--border); color:var(--text-faint);
  background:var(--surface); transition:all .3s var(--ease)
}
.qstep-label { font-family:var(--font-d); font-size:.78rem; font-weight:700; color:var(--text-faint); transition:color .3s }
/* connector line */
.qstep-line {
  flex:1; height:2px; margin:0 .5rem;
  background:var(--border); border-radius:2px; transition:background .4s
}
.qstep.active .qstep-num { background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 0 0 4px rgba(0,200,83,.18) }
.qstep.active .qstep-label { color:var(--green) }
.qstep.done .qstep-num { background:rgba(0,200,83,.15); border-color:var(--green); color:var(--green) }
.qstep.done .qstep-label { color:var(--text-muted) }
.qstep.done + .qstep-line { background:var(--green) }

/* ── FORM PANEL ───────────────────────────────────────────────────── */
.qform-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35)
}
body.light .qform-panel { box-shadow:0 8px 40px rgba(0,0,0,.08) }
.qform-header {
  padding:1.75rem 2rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:rgba(0,200,83,.03)
}
.qform-header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem }
.qform-step-label {
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  color:var(--green); letter-spacing:.1em; text-transform:uppercase
}
.qform-step-count {
  font-family:var(--mono); font-size:.62rem; color:var(--text-faint)
}
.qform-title {
  font-family:var(--font-d); font-size:1.3rem; font-weight:800;
  letter-spacing:-.02em; margin-bottom:.3rem
}
.qform-sub { font-size:.84rem; color:var(--text-muted) }
/* progress bar */
.qform-progress {
  height:3px; background:var(--border); margin-top:1rem; border-radius:2px; overflow:hidden
}
.qform-progress-fill {
  height:100%; background:var(--grad-btn); border-radius:2px;
  transition:width .5s var(--ease)
}

.qform-body { padding:2rem }

/* step panels */
.qstep-panel { display:none; animation:stepIn .45s var(--ease) both }
.qstep-panel.active { display:block }
@keyframes stepIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

/* ── service selector grid ── */
.svc-selector { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; margin-bottom:1.5rem }
.svc-sel-card {
  background:var(--bg-2); border:1.5px solid var(--border);
  border-radius:12px; padding:1.1rem 1rem;
  display:flex; align-items:flex-start; gap:.75rem;
  cursor:pointer; transition:all .25s var(--ease); position:relative
}
.svc-sel-card:hover { border-color:rgba(0,200,83,.35); background:var(--green-subtle); transform:translateY(-2px) }
.svc-sel-card.selected {
  border-color:var(--green); background:rgba(0,200,83,.1);
  box-shadow:0 0 0 3px rgba(0,200,83,.14)
}
.svc-sel-check {
  position:absolute; top:10px; right:10px;
  width:18px; height:18px; border-radius:50%;
  background:var(--green); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5); transition:all .2s var(--ease)
}
.svc-sel-card.selected .svc-sel-check { opacity:1; transform:scale(1) }
.svc-sel-icon {
  width:38px; height:38px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center
}
.svc-sel-name { font-family:var(--font-d); font-size:.86rem; font-weight:800; margin-bottom:2px }
.svc-sel-desc { font-size:.72rem; color:var(--text-faint); line-height:1.4 }

/* ── form fields ── */
.qfield { margin-bottom:1.4rem }
.qfield label {
  display:block; font-family:var(--font-d); font-size:.78rem; font-weight:700;
  color:var(--text-muted); margin-bottom:.55rem; letter-spacing:.01em
}
.qfield label span { color:var(--green) }
.qinput,.qselect,.qtextarea {
  width:100%; background:var(--bg-2); border:1.5px solid var(--border);
  border-radius:10px; padding:.85rem 1.1rem; color:var(--text); font-size:.9rem;
  transition:border-color .25s,box-shadow .25s; cursor:text
}
.qinput:focus,.qselect:focus,.qtextarea:focus {
  border-color:var(--green); box-shadow:0 0 0 3px rgba(0,200,83,.12); outline:none
}
body.light .qinput, body.light .qselect, body.light .qtextarea {
  background:var(--bg-2); color:var(--text)
}
.qselect { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F7A8A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem
}
.qselect option { background:var(--bg-2); color:var(--text) }
.qtextarea { min-height:120px; resize:vertical; cursor:text; font-family:var(--font-b) }
.qfield-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
/* error state */
.qinput.error,.qselect.error,.qtextarea.error { border-color:#FF2D55; box-shadow:0 0 0 3px rgba(255,45,85,.1) }
.qfield-error { font-size:.74rem; color:#FF2D55; margin-top:.4rem; display:none }
.qfield-error.visible { display:block }
/* budget range */
.budget-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem }
.budget-opt {
  padding:.7rem .6rem; border-radius:9px; border:1.5px solid var(--border);
  background:var(--bg-2); text-align:center; cursor:pointer;
  font-family:var(--font-d); font-size:.76rem; font-weight:700; color:var(--text-muted);
  transition:all .25s var(--ease)
}
.budget-opt:hover { border-color:rgba(0,200,83,.35); color:var(--text) }
.budget-opt.selected { border-color:var(--green); background:rgba(0,200,83,.1); color:var(--green) }
/* timeline */
.timeline-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem }
.timeline-opt {
  padding:.85rem 1rem; border-radius:9px; border:1.5px solid var(--border);
  background:var(--bg-2); cursor:pointer;
  font-family:var(--font-d); font-size:.8rem; font-weight:700;
  color:var(--text-muted); display:flex; align-items:center; gap:.6rem;
  transition:all .25s var(--ease)
}
.timeline-opt:hover { border-color:rgba(0,200,83,.35); color:var(--text) }
.timeline-opt.selected { border-color:var(--green); background:rgba(0,200,83,.1); color:var(--green) }

/* ── form nav buttons ── */
.qform-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 2rem; border-top:1px solid var(--border);
  background:rgba(0,0,0,.12)
}
.qform-nav-back {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-d); font-size:.84rem; font-weight:700;
  color:var(--text-muted); cursor:pointer; transition:color .2s
}
.qform-nav-back:hover { color:var(--green) }
.qform-nav-back.hidden { visibility:hidden }
.btn-next,.btn-submit {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:10px;
  font-family:var(--font-d); font-weight:700; font-size:.9rem;
  background:var(--grad-btn); color:#fff;
  box-shadow:0 4px 22px var(--green-glow);
  transition:all .3s var(--ease); cursor:pointer; border:none
}
.btn-next:hover,.btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 36px var(--green-glow) }

/* ── SIDEBAR PANEL ────────────────────────────────────────────────── */
.quote-sidebar { display:flex; flex-direction:column; gap:1.25rem }

/* What's included card */
.qs-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden
}
.qs-card-header {
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.7rem;
  background:rgba(0,200,83,.04)
}
.qs-card-header h4 {
  font-family:var(--font-d); font-size:.84rem; font-weight:800
}
.qs-card-body { padding:1.25rem 1.4rem }
.qs-list { display:flex; flex-direction:column; gap:.75rem }
.qs-item {
  display:flex; align-items:flex-start; gap:.75rem;
  font-size:.82rem; color:var(--text-muted); line-height:1.5
}
.qs-item-icon {
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,200,83,.1); margin-top:1px
}

/* selected services summary */
.qs-selected { padding:1.25rem 1.4rem }
.qs-selected-empty {
  text-align:center; padding:1rem 0;
  font-size:.82rem; color:var(--text-faint); font-style:italic
}
.qs-svc-chip {
  display:inline-flex; align-items:center; gap:5px; margin:3px;
  padding:4px 10px; border-radius:100px;
  font-family:var(--font-d); font-size:.72rem; font-weight:700;
  color:var(--green); background:var(--green-subtle); border:1px solid var(--border-g)
}

/* response time card */
.qs-response {
  background:linear-gradient(135deg,rgba(0,200,83,.08),rgba(0,168,255,.05));
  border:1px solid var(--border-g); border-radius:var(--radius-lg);
  padding:1.4rem; display:flex; gap:1rem; align-items:flex-start
}
.qs-resp-icon {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:rgba(0,200,83,.15); border:1px solid var(--border-g);
  display:flex; align-items:center; justify-content:center; color:var(--green)
}
.qs-resp-title { font-family:var(--font-d); font-size:.9rem; font-weight:800; margin-bottom:.25rem }
.qs-resp-desc { font-size:.78rem; color:var(--text-muted); line-height:1.6 }

/* testimonial mini */
.qs-testimonial {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.4rem
}
.qs-tq {
  font-size:.82rem; color:var(--text-muted); line-height:1.7;
  font-style:italic; margin-bottom:.85rem
}
.qs-tq::before { content:'\201C'; color:var(--green); font-size:1.6rem; line-height:0; vertical-align:-.35em; margin-right:2px }
.qs-ta { display:flex; align-items:center; gap:.65rem }
.qs-ta-av {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:rgba(0,200,83,.15); border:1.5px solid var(--border-g);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:.78rem; font-weight:800; color:var(--green)
}
.qs-ta-name { font-family:var(--font-d); font-size:.82rem; font-weight:800 }
.qs-ta-role { font-size:.72rem; color:var(--text-faint) }

/* ── SUCCESS STATE ────────────────────────────────────────────────── */
.quote-success {
  display:none; text-align:center; padding:4rem 2rem
}
.quote-success.visible { display:block }
.qs-checkmark {
  width:80px; height:80px; border-radius:50%; background:rgba(0,200,83,.12);
  border:2px solid var(--green); display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.75rem; animation:checkPop .6s var(--ease) both
}
@keyframes checkPop { 0%{transform:scale(0) rotate(-30deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
.quote-success h2 {
  font-family:var(--font-d); font-size:1.8rem; font-weight:800;
  letter-spacing:-.03em; margin-bottom:.75rem
}
.quote-success p { font-size:.95rem; color:var(--text-muted); line-height:1.8; max-max-width: 420px; width: 100%; margin:0 auto 2rem }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:1100px) {
  .quote-layout { grid-template-columns:1fr }
  .quote-sidebar { flex-direction:row; flex-wrap:wrap }
  .qs-card, .qs-response, .qs-testimonial { flex:1; min-width:280px }
  .quote-hero-inner { grid-template-columns:1fr }
  .quote-trust { flex-direction:row; flex-wrap:wrap }
}
@media(max-width:960px) {
@media(max-width:768px) {
  .svc-selector { grid-template-columns:1fr }
  .qfield-row { grid-template-columns:1fr }
  .budget-grid { grid-template-columns:repeat(2,1fr) }
  .timeline-grid { grid-template-columns:1fr }
  .quote-steps { gap:0 }
  .qstep-label { display:none }
  .qform-body { padding:1.4rem }
  .qform-nav { padding:1.25rem 1.4rem }
}
@media(max-width:560px) {
  .quote-hero-title { font-size:2.2rem }

img{max-width:100%;height:auto;}
img { max-width: 100%; height: auto; }

/* Logo Fix */

/* Logo sizing is controlled via Appearance → Customize → Logo & Branding.
   CSS custom properties are set by greenedge_logo_inline_css() in functions.php
   and consumed by components.css. Do not add hardcoded overrides here. */

/* ── Quote form grid validation error states ── */
.qfield-error.qgrid-error { display: none; margin-top: .5rem; font-size: .74rem; color: #FF2D55; }
.qfield-error.qgrid-error.visible { display: block; }
.budget-grid[style*='outline'], .timeline-grid[style*='outline'], .svc-selector[style*='outline'] {
  outline: 1.5px solid #FF2D55 !important;
  border-radius: 10px;
}
.qinput.valid, .qselect.valid, .qtextarea.valid {
  border-color: rgba(0, 200, 83, 0.5);
}