/* Scan to stay in touch, and a quiet footer that closes in the one site green (sage #e6ede7).
   Installed from the approved final sketch. */
/* ---------- Connect: a cream breath between the two green bands ---------- */
#connect.connect{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ivory-veil);
  padding:clamp(72px,10vw,120px) 0;
}
#connect .connect-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(16rem,0.9fr) minmax(0,1.25fr);
  align-items:center;
  gap:48px;
}
#connect .connect-grid>div:first-child p:last-of-type{
  font:1.15rem/1.7 var(--serif);
  color:var(--muted);
  margin:0;
  max-width:36ch;
}
#connect .qr-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  min-width:0;
}
#connect .qr{
  margin:0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#connect .qr-card{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
#connect .qr-card img{
  width:min(248px,100%);
  height:auto;
  margin:0 auto;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
#connect .qr figcaption{
  margin-top:14px;
}
#connect .qr figcaption a{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  font-weight:700;
  color:var(--green);
  text-decoration:none;
  border-bottom:2px solid var(--gold);
}
#connect .sk-connect-rings{
  position:absolute;
  right:-4%;
  bottom:-18%;
  width:min(340px,50vw);
  height:auto;
  opacity:.18;
  pointer-events:none;
  z-index:0;
}

/* ---------- Footer: a quiet sage close, same colour as the Free Consultation card ---------- */
footer.footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--sage-veil);
  background-image:var(--sage-grad-veil);
  border-top:3px solid var(--brand-green);
  color:var(--ink);
  padding:64px 0 32px;
}
footer.footer a{
  color:var(--green);
}
footer.footer a:focus-visible{
  outline-color:var(--gold-t);
}
footer.footer .foot-grid{
  position:relative;
  z-index:1;
  align-items:start;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr) minmax(0,1.05fr);
}
.nowrap{white-space:nowrap}
footer.footer .foot-brand{
  color:var(--ink);
}
footer.footer .foot-brand .brand-text span{
  color:var(--green);
}
footer.footer .brand-mark{
  background:transparent;
  border-radius:0;
  padding:0;
  height:52px;
}
footer.footer p{margin:0 0 6px}
footer.footer .fine{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line);
  margin-top:36px;
  padding-top:20px;
  font-size:.85rem;
  color:var(--ink);
}
footer.footer .sk-foot-rings{
  position:absolute;
  left:-10%;
  top:50%;
  width:min(460px,70vw);
  height:auto;
  transform:translateY(-50%);
  opacity:.16;
  pointer-events:none;
  z-index:0;
}
footer.footer .sk-foot-rings g{stroke:var(--gold-t)}

@media (prefers-reduced-motion:reduce){
  #connect .qr figcaption a{transition:none}
}

@media (max-width:900px){
  #connect .connect-grid{grid-template-columns:1fr;gap:36px}
  #connect .qr-row{grid-template-columns:1fr;gap:28px;justify-items:center}
  #connect .qr-card img{width:min(248px,70vw)}
  #connect .sk-connect-rings{right:-20%;width:70vw}
  footer.footer .foot-grid{grid-template-columns:1fr;gap:28px}
}

@media (max-width:520px){
  #connect .qr-card{padding:0}
  footer.footer{padding:52px 0 28px}
}

/* Compact footer on 404 and thank-you: same green close, no empty rule line */
footer.footer:not(:has(.foot-grid)){
  padding:36px 0 28px;
}
footer.footer:not(:has(.foot-grid)) .fine{
  border-top:0;
  margin-top:0;
  padding-top:0;
  text-align:center;
}

/* Fix pass Nov 10: only the Instagram QR remains, so centre the single card */
#connect .qr-row.qr-single{grid-template-columns:1fr;justify-items:center}
/* Fix pass Nov 10: let the About badge wrap on phones if it ever gets long */
@media (max-width:520px){#about .badge{white-space:normal;border-radius:18px;line-height:1.45}}