:root{ --gold:#ffd400; }

/* Make sure content sits above the background grid */
header, main, footer { position: relative; z-index: 2; }

/* Golden grid canvas (full page, behind everything) */
#gold-grid{
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* don’t block clicks */
  /* optional super-subtle vignette to help contrast */
  background:
    radial-gradient(120% 100% at 70% 20%, rgba(255,212,0,.06), rgba(0,0,0,0) 55%) ,
    rgba(6,6,6,1);
}
.no-tilt { transform: none !important; }
.no-tilt:hover { transform: none !important; }
/* layout */
.contact-section { padding-top: 24px; }
.contact-wrap{
  display:grid;
  grid-template-columns: minmax(320px, 560px) minmax(320px, 1fr);
  gap: 32px;
  align-items: stretch;
}

/* form card */
.contact-card{
  padding: 22px 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,212,0,.25);
  background: linear-gradient(180deg, rgba(255,212,0,.05), rgba(0,0,0,.12)) #0b0b0b;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,212,0,.06);
}
.contact-head h2{ margin:0 0 6px; font-size:clamp(22px,3vw,32px); color:#f9f5df; }
.contact-head .muted{ color: var(--muted, #c9c6b0); margin: 0 0 10px; }

.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-field{ display:grid; gap:6px; margin-bottom:12px; }
.form-field > span{ font-size:.9rem; color:#d8d3b2; }
.form-field input, .form-field textarea{
  width:100%; padding:12px;
  border-radius:12px; background:#0e0e0e; color:#fff;
  border:1px solid rgba(255,212,0,.28);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.form-field textarea{ resize:vertical; }
.form-field input:focus, .form-field textarea:focus{
  border-color: rgba(255,212,0,.6); box-shadow: 0 0 0 3px rgba(255,212,0,.18);
}
.form-actions{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.form-status{ color:#eae4c2; font-size:.92rem; }
.hidden{ display:none !important; }

/* shard — no card wrapper, full-bleed inside column */
.shard-art{ position: relative; min-height: 520px; }
#shard-stage{ position:absolute; inset:0; }
#shard-stage canvas{ display:block; width:100%; height:100%; }
.nojs{ height:100%; display:grid; place-items:center; color:#f3e58a; font-size:28px; }

/* responsive */
@media (max-width: 960px){
  .contact-wrap{ grid-template-columns: 1fr; gap: 24px; }
  .shard-art{ min-height: 400px; }
}

/* center the Contact heading (and subtitle) */
.contact-card .contact-head{
  text-align: center;
  display: grid;           /* ensures true centering even if parent uses flex */
  justify-items: center;
}

.contact-card .contact-head h2{
  margin: 0 auto 6px;      /* keep your existing spacing */
}

.contact-card .contact-head .muted{
  text-align: inherit;     /* centers the subtext too */
}



/* Dark bezel so the light widget doesn’t clash */
.captcha-wrap{
  position: relative;
  padding: 10px;
  border-radius: 12px;
  background:
    radial-gradient(140% 160% at 20% -10%, rgba(255,212,0,.06), transparent 55%),
    #0b0b0b;
  border: 1px solid rgba(255,212,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,212,0,.06), 0 12px 28px rgba(0,0,0,.45);
  min-height: 86px; /* space reserved while it injects */
}

/* Subtle loading shimmer until iframe appears */
.captcha-loading{
  position:absolute; inset: 10px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,212,0,.08), rgba(255,212,0,.16), rgba(255,212,0,.08));
  background-size: 300% 100%;
  animation: shimmer 1.2s linear infinite;
  color:#f3e58a; display:grid; place-items:center;
  font-size:.86rem; letter-spacing:.2px;
}
@keyframes shimmer{ 0%{background-position:0% 0} 100%{background-position:300% 0} }

/* ===== ReCAPTCHA: snug + centered ===== */
:root{
  /* you can tweak these if needed */
  --cap-scale: 1;   /* 1 = native size; 0.9 smaller; 0.8 even smaller */
  --cap-pad: 8px;   /* bezel padding around the widget */
}

/* reserve exactly the scaled iframe size + padding, and center it */
.captcha-wrap{
  position: relative;
  display: block;
  margin: 8px auto 0;                 /* center in the form */
  width: calc(304px * var(--cap-scale) + var(--cap-pad) * 2);
  height: calc(78px  * var(--cap-scale) + var(--cap-pad) * 2);
  padding: var(--cap-pad);
  border-radius: 12px;
  background:
    radial-gradient(140% 160% at 20% -10%, rgba(255,212,0,.06), transparent 55%),
    #0b0b0b;
  border: 1px solid rgba(255,212,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,212,0,.06), 0 12px 28px rgba(0,0,0,.45);
}

/* the actual widget — scaled to match the wrapper exactly */
.captcha-wrap iframe{
  width: 304px;      /* native recaptcha checkbox size */
  height: 78px;
  display: block;
  transform: scale(var(--cap-scale));
  transform-origin: top left;
  /* dark vibe without changing layout */
  filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(1.05) saturate(.9);
}

/* shimmer placeholder until the iframe appears */
.captcha-loading{
  position:absolute;
  inset: var(--cap-pad);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,212,0,.08), rgba(255,212,0,.16), rgba(255,212,0,.08));
  background-size: 300% 100%;
  animation: shimmer 1.2s linear infinite;
  color:#f3e58a; display:grid; place-items:center;
  font-size:.86rem; letter-spacing:.2px;
}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:300% 0}}

.captcha-wrap.has-iframe .captcha-loading{ display:none; }

/* Responsiveness: gently shrink on narrow screens */
@media (max-width: 380px){ :root{ --cap-scale: .9; } }
@media (max-width: 330px){ :root{ --cap-scale: .82; } }


/* === Lighter form fields (a few shades above the card) === */
/* === Lighter form fields (a few shades above the card) === */
:root{
  --field-bg: #151515;           /* lighter than #0b0b0b card */
  --field-bg-hover: #191919;
  --field-bg-focus: #1d1d1d;
  --field-border: rgba(255,212,0,.28);
  --field-border-focus: rgba(255,212,0,.60);
  --placeholder: #d6d0b5;        /* warm-muted placeholder */
}

/* base state */
.form-field input,
.form-field textarea{
  background: var(--field-bg) !important;
  border-color: var(--field-border) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,212,0,.06),
    0 4px 14px rgba(0,0,0,.28);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* hover & focus lift a touch */
.form-field input:hover,
.form-field textarea:hover{
  background: var(--field-bg-hover);
}

.form-field input:focus,
.form-field textarea:focus{
  background: var(--field-bg-focus);
  border-color: var(--field-border-focus);
  box-shadow:
    0 0 0 3px rgba(255,212,0,.18),
    inset 0 0 0 1px rgba(255,212,0,.10);
}

/* placeholder + caret */
.form-field ::placeholder{ color: var(--placeholder); opacity: .9; }
.form-field input, .form-field textarea{ caret-color: #fff; }

/* tame Chrome/Edge autofill yellow */
.form-field input:-webkit-autofill,
.form-field textarea:-webkit-autofill{
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-out;
  box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
}