/* ARQORA v12 — enquiry UX, service chooser, progressive form storytelling */

/* Tiny truth label on the Google phone mockup. */
.gbp-device{isolation:isolate}
.gbp-example-badge{
  position:absolute;
  right:18px;
  bottom:13px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:4px 7px 3px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(8,8,8,.76);
  backdrop-filter:blur(5px);
  color:rgba(255,255,255,.82);
  font:800 6px/1 var(--body);
  letter-spacing:.13em;
  white-space:nowrap;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
  pointer-events:none;
}
.gbp-illustrative{letter-spacing:.1em;opacity:.8}

/* Form header becomes a lightweight guided journey instead of a static heading. */
.contact-kicker-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.contact-kicker-row .eyebrow{margin:0}
.contact-kicker-row>span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#766f66;
  font:800 8px/1 var(--body);
  letter-spacing:.14em;
  white-space:nowrap;
}
.contact-kicker-row>span:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(255,90,0,.08);
}
.form-progress{
  display:grid;
  gap:10px;
  margin-top:22px;
  padding:14px 15px 13px;
  border:1px solid #d4cabd;
  border-radius:11px;
  background:rgba(255,255,255,.42);
}
.form-progress-copy{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}
.form-progress-copy strong{
  color:#1e1c19;
  font:800 11px/1 var(--body);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.form-progress-copy span{
  color:#746d64;
  font-size:9px;
  line-height:1.35;
  text-align:right;
}
.form-progress-track{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#d9d1c6;
}
.form-progress-track i{
  display:block;
  width:33.333%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#ff5a00,#ff8a46);
  box-shadow:0 0 16px rgba(255,90,0,.24);
  transition:width .38s cubic-bezier(.2,.8,.2,1);
}

/* Step tabs now work as navigation and status, but remain deliberately quiet. */
.contact-steps button{
  appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 10px;
  border:1px solid #d1c8bb;
  background:rgba(255,255,255,.45);
  border-radius:8px;
  color:#554f48;
  font:700 9px/1 var(--body);
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s,color .2s;
}
.contact-steps button b{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#111;
  color:#fff;
  font:800 10px/1 var(--display);
  flex:none;
  transition:background .2s,color .2s;
}
.contact-steps button.is-current{
  border-color:rgba(255,90,0,.52);
  background:#fff9f4;
  color:#1a1816;
}
.contact-steps button.is-current b{background:var(--orange);color:#141414}
.contact-steps button.is-done b{background:#191919;color:#fff}
.contact-steps button.is-done b:after{content:"✓";font-family:var(--body);font-size:10px}
.contact-steps button.is-done b{font-size:0}
@media(hover:hover) and (pointer:fine){
  .contact-steps button:hover{transform:translateY(-1px);border-color:#b9afa2;background:#fff}
}

/* Section state makes the form feel progressive without hiding fields. */
.contact-card-v2 .form-section{
  position:relative;
  transition:border-color .22s,box-shadow .22s,background .22s,transform .22s;
}
.contact-card-v2 .form-section:focus-within{
  border-color:#c7a991;
  background:rgba(255,255,255,.58);
  box-shadow:0 14px 34px rgba(42,31,22,.065),inset 3px 0 0 rgba(255,90,0,.72);
}
.contact-card-v2 .form-section.is-complete{
  border-color:#c4d6c7;
}
.contact-card-v2 .form-section.is-complete .form-section-title>span{
  background:#1d7a45;
  font-size:0;
}
.contact-card-v2 .form-section.is-complete .form-section-title>span:after{
  content:"✓";
  color:#fff;
  font:800 12px/1 var(--body);
}

/* Custom service chooser replaces the oversized Android native dropdown. */
.service-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.service-option{
  appearance:none;
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:92px;
  padding:13px 13px;
  overflow:hidden;
  border:1px solid #cbc2b6;
  border-radius:11px;
  background:rgba(255,253,248,.8);
  color:#1b1917;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  transition:border-color .2s,box-shadow .2s,transform .2s,background .2s;
}
.service-option:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 100% 0%,rgba(255,90,0,.11),transparent 42%);
  transition:opacity .2s;
}
.service-option-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#171717;
  color:#fff;
  font:900 11px/1 var(--display);
  flex:none;
}
.service-option-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.service-option-copy strong{
  color:#181614;
  font:800 14px/1.08 var(--display);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.service-option-copy small{
  color:#70685f;
  font-size:9px;
  line-height:1.35;
}
.service-option-price{
  display:grid;
  justify-items:end;
  align-self:center;
  color:#1b1917;
  font:900 20px/1 var(--display);
  white-space:nowrap;
}
.service-option-price em{
  margin-top:4px;
  color:#80786e;
  font:800 7px/1 var(--body);
  letter-spacing:.11em;
  font-style:normal;
}
.service-option-price-text{font-size:12px;letter-spacing:.08em}
.service-option-check{
  position:absolute;
  top:9px;
  right:9px;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--orange);
  color:#121212;
  font:900 11px/1 var(--body);
  opacity:0;
  transform:scale(.72);
  transition:opacity .2s,transform .2s;
}
.service-option.is-selected{
  border-color:var(--orange);
  background:#fff9f3;
  box-shadow:0 0 0 2px rgba(255,90,0,.12),0 12px 26px rgba(80,45,22,.07);
}
.service-option.is-selected:before{opacity:1}
.service-option.is-selected .service-option-icon{background:var(--orange);color:#111}
.service-option.is-selected .service-option-check{opacity:1;transform:scale(1)}
.service-option:focus-visible{outline:3px solid rgba(255,90,0,.3);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .service-option:hover{transform:translateY(-2px);border-color:#b8aa9d;box-shadow:0 11px 25px rgba(54,40,29,.07)}
}
.service-selection-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 11px;
  border-radius:9px;
  background:#f1ebe2;
  color:#5f584f;
}
.service-selection-note>span{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#1d7a45;
  color:#fff;
  font:800 10px/1 var(--body);
  flex:none;
}
.service-selection-note p{margin:0;font-size:9px;line-height:1.45}
.service-selection-note strong{color:#2a2723}

/* Small usability details that reduce form friction. */
.message-field>span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.message-field>span>small{
  color:#91897f;
  font:600 8px/1 var(--body);
  letter-spacing:0;
  white-space:nowrap;
}
.message-field>span>small b{font-weight:700;color:#6b645c}
.form-ready{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 13px;
  border:1px solid #d2c9bd;
  border-radius:9px;
  background:#f5f0e8;
  color:#625b53;
  transition:background .2s,border-color .2s;
}
.form-ready span{
  color:#2b2824;
  font:800 9px/1 var(--body);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.form-ready p{margin:0;font-size:9px;line-height:1.4;text-align:right}
.form-ready.is-ready{background:#edf6ef;border-color:#b9d8c0}
.form-ready.is-ready span{color:#1d7a45}
.contact-card-v2 .btn.full:not(:disabled){position:relative;overflow:hidden}
.contact-card-v2 .btn.full:not(:disabled):before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -35%;
  width:22%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:0;
}
@media(hover:hover) and (pointer:fine){
  .contact-card-v2 .btn.full:not(:disabled):hover:before{animation:form-cta-sheen .7s ease}
}
@keyframes form-cta-sheen{0%{left:-35%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}

@media(max-width:700px){
  .gbp-example-badge{right:12px;bottom:10px;font-size:5px;padding:3px 5px;min-height:15px}
  .contact-card-v2 .contact-card-head{padding-bottom:18px}
  .contact-kicker-row>span{font-size:7px;letter-spacing:.09em}
  .form-progress{margin-top:16px;padding:11px 12px 10px;gap:8px}
  .form-progress-copy{display:grid;gap:3px}
  .form-progress-copy strong{font-size:9px}
  .form-progress-copy span{font-size:8px;text-align:left}
  .contact-steps button{gap:5px;padding:7px 6px;font-size:7px;letter-spacing:.03em}
  .contact-steps button b{width:20px;height:20px;font-size:8px}
  .service-options{grid-template-columns:1fr;gap:7px}
  .service-option{
    grid-template-columns:31px minmax(0,1fr) auto;
    min-height:76px;
    padding:11px 11px;
    gap:9px;
    border-radius:9px;
  }
  .service-option-icon{width:31px;height:31px;font-size:9px}
  .service-option-copy strong{font-size:13px}
  .service-option-copy small{font-size:8px;line-height:1.3}
  .service-option-price{font-size:18px;padding-right:16px}
  .service-option-price em{font-size:6px;letter-spacing:.08em}
  .service-option-price-text{font-size:10px}
  .service-option-check{top:7px;right:7px;width:17px;height:17px;font-size:9px}
  .service-selection-note{padding:9px 10px}.service-selection-note p{font-size:8px}
  .form-ready{display:grid;gap:3px;padding:10px 11px}.form-ready p{text-align:left;font-size:8px}.form-ready span{font-size:8px}
}

@media(max-width:390px){
  .service-option{grid-template-columns:29px minmax(0,1fr) auto;padding:10px 9px;gap:7px}
  .service-option-icon{width:29px;height:29px}
  .service-option-copy strong{font-size:12px}
  .service-option-copy small{font-size:7.5px}
  .service-option-price{font-size:16px;padding-right:14px}
}

@media(prefers-reduced-motion:reduce){
  .form-progress-track i,.service-option,.service-option:before,.service-option-check,.contact-steps button,.contact-card-v2 .form-section{transition:none!important}
  .contact-card-v2 .btn.full:before{display:none!important}
}
.contact-steps button>span{
  display:block;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
}