/* Page stays white; content above particles */
body { background:#fff; }

/* Lift content above fx-layer */
.contact-hero, .contact-body { background: rgba(255,255,255,.96); color:#0d0a0c; }
.contact-hero .contact-hero__inner,
.ticker-wrap .ticker-rail,
.contact-body .contact-inner { position: relative; z-index: 3; }

/* ===== Colours / Text ===== */
.text-grad{
  background: linear-gradient(135deg,var(--pink),var(--gold));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.contact-hero .hero-subtitle, .contact-body .lead { color: rgba(13,10,12,.78); }
.link-strong { color:#0d0a0c; font-weight:800; text-decoration:none; border-bottom:1px solid rgba(13,10,12,.18); }
.link-strong:hover { border-bottom-color:#0d0a0c; }

/* ===== Hero ===== */
.contact-hero{ padding: clamp(84px,12vw,160px) var(--page-gutter) clamp(28px,6vw,44px); }
.contact-hero__inner{ width: var(--content-width); margin:0 auto; }
.contact-hero .hero-title{ margin-bottom: clamp(14px,3vw,22px); }
.contact-hero .cta{ margin-top: clamp(12px,2vw,18px); }

/* ===== ANGLED TICKER (GRADIENT PER-SPAN, NO STROKE) ===== */
.ticker-wrap {
  padding: 8px 0;
  margin: clamp(12px,2vw,20px) 0 clamp(16px,2.6vw,24px);
}
.ticker-rail {
  overflow: hidden;
  transform: rotate(-2deg);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.ticker {
  --gap: 72px;
  display: flex;
  gap: var(--gap);
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  padding: 4px 0;

  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 35px);
  letter-spacing: .01em;
  line-height: 1.1;

  animation: ticker-move 45s linear infinite;
}

/* Key: gradient + text-clip applied on each span so per-word color survives the ticker animation */
.ticker span {
  display: inline-block;
  background: linear-gradient(135deg, var(--pink), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  opacity: .98;
}

/* Belt and braces: null out any global text-stroke that might bleed in */
@supports (-webkit-text-stroke: 0.5px #000) {
  .ticker { -webkit-text-stroke: 0 !important; }
  .ticker span { -webkit-text-stroke: 0 !important; }
}

@keyframes ticker-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Contact Body ===== */
.contact-body{ padding-top: clamp(36px,6vw,56px); }
.contact-inner{
  width: var(--content-width); margin:0 auto;
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(22px,3vw,36px);
}
@media (max-width:1024px){ .contact-inner{ grid-template-columns:1fr; } }

.contact-cards{
  margin-top:14px;
  display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(12px,2vw,16px);
}
.contact-cards .card{ padding: clamp(16px,2.2vw,22px); }
.contact-cards h3{ margin:.2em 0 .35em; font-size: clamp(16px,2vw,18px); font-weight:900; }
.contact-cards p{ margin:0; }

/* White form card (match buttons & feel from index) */
.card-white{
  background:#fff; border:1px solid rgba(13,10,12,.10);
  border-radius:16px; padding: clamp(18px,2.6vw,26px);
  box-shadow: var(--shadow-1); color:#0d0a0c;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s, filter .18s;
}
.card-white.hvr:hover{ transform: translateY(-3px) scale(1.02); filter:none; box-shadow: var(--shadow-2); }

.contact-form{ display:grid; gap:14px; }
.contact-form .field{ display:grid; gap:6px; }
.contact-form label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(13,10,12,.65); }

/* Inputs — hover/focus micro-interactions */
.contact-form input,
.contact-form textarea,
.contact-form select{
  background:#fff;
  border:1px solid rgba(13,10,12,.12);
  border-radius:12px; color:#0d0a0c;
  padding:12px 14px; font:inherit; line-height:1.4;
  box-shadow: 0 8px 20px rgba(0,0,0,.04) inset;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover{
  border-color: rgba(13,10,12,.22);
  box-shadow: 0 0 0 0 rgba(0,0,0,0), 0 2px 10px rgba(0,0,0,.06);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline: none;
  border-color: rgba(244,196,48,.55);
  box-shadow: 0 0 0 3px rgba(244,196,48,.18);
  transform: translateY(-1px);
}

.contact-form textarea{ resize:vertical; }
.contact-form .checkbox input{ transform: translateY(1px); margin-right:8px; }

.tiny-footnote{ margin-top:10px; font-size:12px; color: rgba(13,10,12,.6); }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .ticker{ animation:none; }
}