/* --- Base / Reset --- */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}:focus-visible { outline: 2px dashed #2563EB; outline-offset: 3px; }.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #2563EB; color: #000; padding: 8px 12px; border-radius: 6px;
}.skip-link:focus { left: 12px; top: 12px; z-index: 9999; }/* Floating Nav */
.site-nav {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 8px 12px;
  display: flex; gap: 8px; align-items: center;
}.nav-link {
  color: #ddd; text-decoration: none; font-size: 14px;
  padding: 6px 10px; border-radius: 999px; transition: 0.25s;
}.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }@media (max-width: 720px) {.site-nav { left: 50%; right: auto; transform: translateX(-50%); top: 10px; }.nav-link { font-size: 12px; padding: 6px 8px; }
}/* HERO */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
}.hero spline-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.6));
}.hero-overlay h1 {
  font-size: clamp(28px, 5vw, 68px);
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}.hero-overlay p {
  margin-top: 1rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.8);
}.scroll-cue {
  position: absolute;
  bottom: 80px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  animation: fadeMove 3s infinite;
  cursor: pointer;
  pointer-events: auto;
}@keyframes fadeMove {0%, 100% { opacity: 0; transform: translateY(0); }50% { opacity: 1; transform: translateY(6px); }
}/* Visual cover for the Spline badge */
.badge-cover {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 230px;
  height: 60px;
  background: #000;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(0,0,0,0.7);
  z-index: 2;
}/* Sections */
.about { position: relative; background: #0b0b0b; padding: 120px 10vw 100px; text-align: center; margin-top: -50px; z-index: 3; }.about::before { content: ""; position: absolute; top: -80px; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, #0b0b0b 0%, rgba(11,11,11,0.0) 100%); pointer-events: none; }.about h2 { font-weight: 300; letter-spacing: 0.1em; margin-bottom: 20px; }.about p { max-width: 800px; margin: 0 auto; line-height: 1.8; color: #ccc; }.expertise { background: #050505; padding: 100px 8vw; text-align: center; }.expertise h2 { font-weight: 300; margin-bottom: 60px; letter-spacing: 0.15em; }.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}.card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 40px 20px;
  transition: transform 0.4s, background 0.4s, box-shadow 0.4s;
  will-change: transform;
}.card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}.icon { font-size: 32px; margin-bottom: 12px; }.card h3 { font-weight: 300; margin: 0 0 12px; }.card p { color: #ccc; line-height: 1.6; font-weight: 300; }.testimonials { background: #050505; padding: 100px 10vw; text-align: center; }.testimonials h2 { font-weight: 300; margin-bottom: 40px; }.carousel { position: relative; max-width: 900px; margin: 0 auto; }.slide { display: none; margin: 0; }.slide.is-active { display: block; }.slide blockquote { font-style: italic; color: #ccc; max-width: 800px; margin: 0 auto 8px; }.slide figcaption { color: #999; font-size: 14px; }.carousel-controls {
  display: flex; justify-content: center; gap: 16px; margin-top: 20px;
}.carousel-controls button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; border-radius: 999px; padding: 8px 14px;
  cursor: pointer; transition: 0.25s;
}.carousel-controls button:hover { background: rgba(255,255,255,0.18); }.dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }.dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4); background: transparent;
  cursor: pointer; transition: 0.25s;
}.dots button.is-active { background: #fff; }.contact { background: linear-gradient(180deg, #0b0b0b 0%, #111 100%); text-align: center; padding: 120px 10vw; }.contact h2 { font-weight: 300; margin-bottom: 12px; }.contact p { color: #ccc; font-weight: 300; margin: 8px 0; }.email { color: #2563EB; font-size: 20px; text-decoration: none; font-weight: 400; transition: 0.3s; }.email:hover { text-shadow: 0 0 8px #2563EB; }.email-wrap { display: inline-flex; align-items: center; gap: 10px; }.copy-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: #fff; padding: 8px 12px; cursor: pointer; transition: 0.25s;
}.copy-btn:hover { background: rgba(255,255,255,0.18); }.copied-toast { margin-left: 6px; color: #9ae6b4; font-size: 14px; }.footer { background: #000; border-top: 1px solid rgba(255,255,255,0.1); padding: 40px 10vw; text-align: center; color: #777; font-size: 14px; }.footer .socials { margin-top: 10px; }.footer .socials a { color: #aaa; margin: 0 8px; text-decoration: none; transition: 0.3s; }.footer .socials a:hover { color: #2563EB; }/* Back to top */
.back-to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; border-radius: 999px; padding: 10px 12px;
  cursor: pointer; transition: 0.25s;
}.back-to-top:hover { background: rgba(255,255,255,0.2); }/* Reveal animations */
.reveal-up { opacity: 0; transform: translateY(16px); transition: 600ms ease; }.reveal-up.is-visible { opacity: 1; transform: translateY(0); }.reveal-up.delay-1 { transition-delay: 120ms; }.reveal-up.delay-2 { transition-delay: 240ms; }.reveal-fade { opacity: 0; transition: opacity 700ms ease; }.reveal-fade.is-visible { opacity: 1; }/* Tilt effect limits */
.tilt { transform-style: preserve-3d; }.tilt > * { transform: translateZ(0.01px); }/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}/* Tech ticker (marquee-style) */
.tech-ticker { background: #050505; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }.ticker-mask { overflow: hidden; position: relative; }.ticker-track {
  display: inline-flex;
  gap: clamp(40px, 6vw, 100px);
  white-space: nowrap;
  will-change: transform;
  padding: 22px 4vw;
  animation: ticker-scroll 38s linear infinite;
}.ticker-seq {
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}@keyframes ticker-scroll {from { transform: translateX(0); }to { transform: translateX(-50%); }
}/* Soft fade on edges */
.ticker-mask::before, .ticker-mask::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 8rem; pointer-events: none;
  background: linear-gradient(to right, #050505, rgba(5,5,5,0));
}.ticker-mask::after {
  right: 0;
  transform: scaleX(-1);
  left: auto;
}.ticker-mask::before { left: 0; }/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}/* === Premium Look & Motion Enhancements === */

/* Scroll progress bar */
.scroll-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 0; z-index: 100; background: linear-gradient(90deg,#2563EB,#8B5CF6); box-shadow: 0 0 12px rgba(37,99,235,0.45); transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(37,99,235,0.6);
  transition: width 0.1s linear;
}/* Hero staggered headline */
.hero-overlay h1 span {
  display:inline-block; opacity:0; transform: translateY(20px) scale(0.98);
  animation: hero-stagger 900ms cubic-bezier(.2,.65,.2,1) forwards;
}.hero-overlay h1 span:nth-child(odd) { animation-delay: calc(var(--i, 0) * 32ms); }.hero-overlay h1 span:nth-child(even) { animation-delay: calc(var(--i, 0) * 32ms + 100ms); }@keyframes hero-stagger {to { opacity:1; transform: translateY(0) scale(1); }
}/* Parallax drift for hero overlay content */
.hero-overlay { will-change: transform; }/* Premium card aura + glass */
.card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(4px);
}.card::before { content:""; position:absolute; inset:-40%; background: conic-gradient(from 180deg at 50% 50%, rgba(37,99,235,0.30), rgba(139,92,246,0.22), rgba(96,165,250,0.22), rgba(37,99,235,0.30)); filter: blur(40px); transform: rotate(0deg); animation: aura-rotate 12s linear infinite; opacity: 0; transition: opacity .35s ease;
  filter: blur(40px);
  transform: rotate(0deg); animation: aura-rotate 12s linear infinite;
  opacity: 0; transition: opacity .35s ease;
}.card:hover::before { opacity: 1; }@keyframes aura-rotate {to { transform: rotate(360deg); } }/* Magnetic hover targets */
[ data-magnetic ] { position: relative; will-change: transform; transition: transform .15s ease; }/* Cursor glow (premium pointer) */
.cursor-glow {
  position: fixed; top:0; left:0; width: 160px; height: 160px; pointer-events:none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,99,235,.18), rgba(37,99,235,.08), rgba(37,99,235,0));
  mix-blend-mode: screen;
  opacity: 0; transform: translate(-50%, -50%) scale(0.7);
  transition: opacity .35s ease, transform .25s ease;
  z-index: 80;
}/* Base presence only when the page has focus/hover */
body:hover .cursor-glow { opacity: .15; }/* Slightly stronger when hovering interactive elements */
body.cursor-boost .cursor-glow { opacity: .32; transform: translate(-50%, -50%) scale(0.78); }@media (prefers-reduced-motion: reduce) {.cursor-glow { display:none; }
}body:hover .cursor-glow {
  position: fixed; top:0; left:0; width: 160px; height: 160px; pointer-events:none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,99,235,.18), rgba(37,99,235,.08), rgba(37,99,235,0));
  mix-blend-mode: screen;
  opacity: 0; transform: translate(-50%, -50%) scale(0.7);
  transition: opacity .35s ease, transform .25s ease;
  z-index: 80;
}/* Base presence only when the page has focus/hover */
body:hover .cursor-glow { opacity: .15; }/* Slightly stronger when hovering interactive elements */
body.cursor-boost .cursor-glow { opacity: .32; transform: translate(-50%, -50%) scale(0.78); }@media (prefers-reduced-motion: reduce) {.cursor-glow { display:none; }
}/* Film grain / subtle noise across the page */
.fx-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.06'/></svg>");
  opacity: .25;
}/* Section separators with soft gradient rims */
.about::before {
  content:""; position: absolute; left:0; right:0; top:-80px; height:80px;
  background: radial-gradient(60% 120% at 50% 0%, rgba(37,99,235,.25), rgba(0,0,0,0));
  pointer-events:none;
}/* Elevated nav with active underline */
.site-nav .nav-link {
  position: relative;
}.site-nav .nav-link::after { content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background: linear-gradient(90deg,#2563EB,#8B5CF6); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}.site-nav .nav-link:hover::after { transform: scaleX(1); }/* Scroll-in reveal: gradient wipe */
.reveal-fade.is-visible {
  animation: gradient-wipe 900ms cubic-bezier(.2,.65,.2,1) both;
}@keyframes gradient-wipe {0% { clip-path: inset(0 100% 0 0); opacity:.4; }100% { clip-path: inset(0 0 0 0); opacity:1; }
}/* Ticker subtle glow pulse */
.ticker-track { text-shadow: 0 0 10px rgba(37,99,235,0.22); }/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cursor-glow{
  position: fixed; top:0; left:0; width: 160px; height: 160px; pointer-events:none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37,99,235,.18), rgba(37,99,235,.08), rgba(37,99,235,0));
  mix-blend-mode: screen;
  opacity: 0; transform: translate(-50%, -50%) scale(0.7);
  transition: opacity .35s ease, transform .25s ease;
  z-index: 80;
}
/* Base presence only when the page has focus/hover */
body:hover .cursor-glow{ opacity: .15; }
/* Slightly stronger when hovering interactive elements */
body.cursor-boost .cursor-glow{ opacity: .32; transform: translate(-50%, -50%) scale(0.78); }
@media (prefers-reduced-motion: reduce){
  .cursor-glow{ display:none; }
}
  .card::before{ display:none; }
  .reveal-fade.is-visible{ animation: none; }
  .hero-overlay h1 span{ animation: none; opacity: 1; transform: none; }
}/* === Premium Cards (scoped) — Expertise & Industries === */
.expertise .card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 50px 24px;

  /* Rich “glass + depth” surface */
  background: linear-gradient(145deg, rgba(28,28,28,0.85), rgba(12,12,12,0.9));
  backdrop-filter: blur(6px);

  /* Crisp edge + subtle inner rim */
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 8px 28px rgba(0,0,0,0.45);
}/* Override the global aura for these sections with a stronger conic glow */
.expertise .card::before {
  content:"";
  position:absolute; inset:-45%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(37,99,235,0.30),
    rgba(139,92,246,0.22),
    rgba(96,165,250,0.22),
    rgba(37,99,235,0.30)
  );
  filter: blur(42px);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
  animation: aura-rotate 12s linear infinite;
}.expertise .card:hover::before { opacity: .85; }/* Soft shimmer sweep on hover (feels premium but restrained) */
.expertise .card::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
  transform: translateX(-120%);
  z-index: 1;
}.expertise .card:hover::after {
  transform: translateX(120%);
  transition: transform 1.15s ease;
}/* Typography polish */
.expertise .card h3 {
  position: relative; z-index: 2;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0 14px rgba(37,99,235,0.28);
  margin-bottom: 10px;
}.expertise .card p {
  position: relative; z-index: 2;
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
  font-size: 15px;
}/* Icon badge (if used) */
.expertise .card .icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px;
  background:
    radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,0.18), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(37,99,235,0.35), rgba(139,92,246,0.28));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 6px rgba(255,255,255,0.12),
    0 8px 24px rgba(37,99,235,0.22);
}/* Hover state: deepen the shadow; keep transforms to JS (no conflicts) */
.expertise .card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 22px 62px rgba(37,99,235,0.28);
}/* Mobile tuning */
@media (max-width: 720px) {
  .expertise .card,
  .industries .card{ padding: 36px 20px; border-radius: 16px; }
}/* === Premium Cards v2 (scoped) — icon badges, gradient rim, spotlight === */
.expertise .card .icon { display: none; }/* hide placeholder squares */

.expertise .card .icon-badge {
  display:block;
  margin-bottom:14px;
  filter: drop-shadow(0 6px 18px rgba(37,99,235,0.25));
  opacity:.95;
}/* Typographic polish */
.expertise .card h3 { font-weight:600; letter-spacing:.01em; }.expertise .card p { color: rgba(255,255,255,0.82); }/* Cursor spotlight (CSS vars set by JS) */
.expertise .card {
  --mx: 50%;
  --my: 50%;
  background-image:
    radial-gradient(220px 220px at var(--mx) var(--my),
      rgba(37,99,235,0.10),
      rgba(37,99,235,0.00) 60%);
  background-blend-mode: screen;
}/* Mobile tweaks */
@media (max-width: 720px) {
  .industries .card{ padding: 36px 20px; border-radius: 18px; }
}@media (max-width: 720px) {
}@media (max-width: 720px) {
}

/* === Premium Contact — Concierge + Brief === */
.contact--premium { padding: 120px 8vw 140px; position: relative; }
.contact--premium .contact-wrap {
  display: grid; gap: clamp(24px, 4vw, 40px);
  grid-template-columns: 1fr 1.3fr;
}
@media (max-width: 980px){ .contact--premium .contact-wrap { grid-template-columns: 1fr; } }

.contact-card {
  position: relative; overflow: hidden; border-radius: 22px;
  background: linear-gradient(145deg, rgba(18,18,18,.9), rgba(10,10,10,.9));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.45);
  padding: clamp(22px, 3vw, 36px);
  backdrop-filter: blur(8px);
}
.contact-card .contact-halo {
  content:""; position:absolute; inset:-50%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(37,99,235,.25), rgba(139,92,246,.2), rgba(96,165,250,.18), rgba(37,99,235,.25));
  filter: blur(48px); opacity: .0; transition: opacity .4s ease;
  z-index: 0; pointer-events:none;
}
.contact-card:hover .contact-halo { opacity:.75; }
.contact-card > * { position: relative; z-index: 1; }

.concierge-head h2 { font-weight: 300; letter-spacing: .03em; margin: 0 0 8px; }
.concierge-head p { color: #cfcfcf; margin: 0 0 20px; }

.concierge-rows { display: grid; gap: 14px; }
.concierge-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.concierge-row .label { color: #9aa3b2; font-size: 14px; }
.concierge-row .value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #ddd; font-size: 13px; }

.concierge-actions { display:flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.brief-head h3 { margin: 0 0 6px; font-weight: 500; letter-spacing: .01em; }
.brief-head p { color: #cfcfcf; margin: 0 0 18px; }

.fields { display: grid; gap: 16px; }
.field label { display:block; font-size: 13px; color: #9aa3b2; margin: 0 0 8px; }
.field input, .field textarea {
  width: 100%; color:#fff; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 12px 14px; font: inherit; outline: none; transition: .25s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { border-color: rgba(37,99,235,.7); box-shadow: 0 0 0 3px rgba(37,99,235,.25); }

.chipset { display:flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border-radius: 999px; padding: 8px 12px; font-size: 14px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color:#ddd;
  transition: .25s;
}
.chip:hover { background: rgba(255,255,255,.12); }
.chip.is-selected { color:#fff; background: linear-gradient(90deg,#2563EB,#8B5CF6); border-color: transparent; }

.range-wrap { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
#budget { -webkit-appearance:none; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); outline: none; }
#budget::-webkit-slider-thumb { -webkit-appearance:none; width: 18px; height: 18px; border-radius: 50%; background:#fff; border:2px solid #2563EB; box-shadow: 0 0 0 6px rgba(37,99,235,.22); }
#budget::-moz-range-thumb { width: 18px; height: 18px; border-radius:50%; background:#fff; border:2px solid #2563EB; box-shadow: 0 0 0 6px rgba(37,99,235,.22); }
#budgetValue { font-size: 13px; color:#9aa3b2; min-width: 110px; text-align: right; }
.range-scale { display:flex; justify-content: space-between; color:#6f7990; font-size: 11px; margin-top: 8px; }

.actions { display:flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 12px; padding: 12px 14px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color:#fff; text-decoration:none; cursor:pointer; transition:.25s;
}
.btn:hover { background: rgba(255,255,255,.12); }
.btn-primary {
  background: linear-gradient(90deg,#2563EB,#8B5CF6);
  border-color: transparent; box-shadow: 0 10px 30px rgba(37,99,235,.35);
}
.btn-outline { background: transparent; }
.btn-ghost { background: rgba(255,255,255,.06); }

.sparkles {
  position:absolute; inset:0; pointer-events:none; opacity:.25;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 60% 70%, #fff, transparent),
    radial-gradient(2px 2px at 80% 20%, #fff, transparent),
    radial-gradient(2px 2px at 35% 80%, #fff, transparent);
  animation: twinkle 6s linear infinite;
}
@keyframes twinkle {
  0%,100% { opacity:.18; } 50% { opacity:.32; }
}

/* === Contact Lite (compact, premium, minimal) === */
.contact--lite{ padding:72px 6vw 84px; position:relative; }
.contact-lite-wrap{ 
  display:grid; grid-template-columns: 1.1fr 1fr; gap: min(4vw,28px); 
  align-items:center; border:1px solid rgba(255,255,255,.1); border-radius:18px;
  padding: clamp(16px,2.4vw,26px); background: rgba(14,14,16,.6); backdrop-filter: blur(6px);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
@media (max-width: 900px){ .contact-lite-wrap{ grid-template-columns:1fr; } }

.lite-left .lite-title{ margin:0 0 6px; font-weight:500; letter-spacing:.01em; }
.lite-left .dot{ color:#5a7dff; }
.lite-left .lite-sub{ margin:0 0 14px; color:#cfd4de; }

.lite-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.lite-btn{
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color:#fff; padding:10px 14px; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:.2s; cursor:pointer; font:inherit;
}
.lite-btn:hover{ background: rgba(255,255,255,.12); }
.lite-btn.outline{ background:transparent; }
.lite-btn.primary{ background: linear-gradient(90deg,#2563EB,#8B5CF6); border-color: transparent; }

.lite-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#d9dfeb; font-size:12px; }

/* Right: collapsible brief */
.brief-panel[hidden]{ display:none; }
.brief-panel{ animation: panelIn .18s ease; }
@keyframes panelIn{ from{opacity:0; transform: translateY(-4px);} to{opacity:1; transform:none;} }

.brief-lite-form{ display:grid; gap:10px; }
.brief-lite-form .row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.brief-lite-form .row.compact{ grid-template-columns: 1fr auto; align-items:center; }
@media (max-width: 600px){ .brief-lite-form .row{ grid-template-columns:1fr; } .brief-lite-form .row.compact{ grid-template-columns:1fr; gap:12px; } }

.brief-lite-form input, .brief-lite-form textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#fff;
  border-radius:10px; padding:10px 12px; outline:none; transition:.2s;
}
.brief-lite-form input:focus, .brief-lite-form textarea:focus{ border-color: rgba(37,99,235,.7); box-shadow: 0 0 0 2px rgba(37,99,235,.25); }

.chipset-lite{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-lite{
  border-radius:999px; padding:6px 10px; font-size:13px; cursor:pointer;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#d9dfeb; transition:.2s;
}
.chip-lite:hover{ background: rgba(255,255,255,.12); }
.chip-lite.is-selected{ color:#fff; background: rgba(90,125,255,.22); border-color: rgba(90,125,255,.4); }

/* === Contact Lite+ enhancements === */
.contact-lite-wrap{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) padding-box,
    linear-gradient(90deg, rgba(37,99,235,.5), rgba(139,92,246,.45)) border-box;
  border:1px solid transparent;
}
.contact-lite-wrap:after{
  content:""; position:absolute; inset: -20% -15% auto -15%; height:120%;
  background: radial-gradient(40% 30% at 20% 0%, rgba(90,125,255,.12), transparent 60%);
  pointer-events:none; filter: blur(20px);
}

.lite-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#a9b2c7;
  padding:4px 8px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
}

.lite-email{
  display:flex; align-items:center; gap:10px; margin: 6px 0 10px;
}
.lite-email a{
  color:#e7ecf8; text-decoration:none; border-bottom:1px dashed rgba(231,236,248,.35);
}
.lite-email a:hover{ opacity:.9; }
.copy-email{
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer; transition:.2s; font:inherit;
}
.copy-email:hover{ background: rgba(255,255,255,.12); }
.copied-toast{ font-size:12px; color:#b8ffc8; }


/* === Contact — Aurora Redesign (premium, restrained) === */
.contact--aurora{
  padding: clamp(80px, 8vw, 140px) clamp(6vw, 8vw, 10vw);
  position: relative;
}
.contact--aurora .contact-wrap{
  display:grid; gap: clamp(22px, 3.5vw, 44px);
  grid-template-columns: 1.05fr 1.25fr;
  background: radial-gradient(60% 120% at 10% 0%, rgba(90,125,255,.08), transparent 60%),
              radial-gradient(40% 100% at 90% 100%, rgba(139,92,246,.08), transparent 60%),
              rgba(14,14,16,.65);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: clamp(18px, 2.6vw, 28px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
}
.contact--aurora .contact-wrap::before{
  content:""; position:absolute; inset:0;
  border-radius: 22px;
  padding: 1px; /* gradient frame */
  background: linear-gradient(90deg, rgba(37,99,235,.55), rgba(139,92,246,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .6;
}

@media (max-width: 980px){ .contact--aurora .contact-wrap{ grid-template-columns: 1fr; } }

/* Left card — concierge */
.contact--aurora .concierge{
  background: linear-gradient(145deg, rgba(18,18,18,.9), rgba(10,10,10,.9));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 48px rgba(0,0,0,.45);
  position: relative; overflow: hidden;
}
.contact--aurora .concierge::after{
  content:""; position:absolute; inset:-45%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(37,99,235,.18), rgba(139,92,246,.16), rgba(96,165,250,.16), rgba(37,99,235,.18));
  filter: blur(42px); opacity: 0; transition: opacity .4s ease; z-index:0;
}
.contact--aurora .concierge:hover::after{ opacity:.75; }
.contact--aurora .concierge > *{ position: relative; z-index: 1; }

.contact--aurora .kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#a9b2c7;
  padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); margin-bottom:10px;
}
.contact--aurora .title{ margin:0 0 8px; font-weight:500; letter-spacing:.01em; }
.contact--aurora .sub{ color:#cfd4de; margin:0 0 16px; }

.contact--aurora .row{ display:grid; grid-template-columns: 110px 1fr; gap:12px; align-items:center; }
.contact--aurora .label{ color:#9aa3b2; font-size:13px; }
.contact--aurora .value{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Icon buttons */
.contact--aurora .icon-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color:#fff; padding:10px 14px; border-radius:12px; text-decoration:none;
  transition:.22s; cursor:pointer; font:inherit;
}
.contact--aurora .icon-btn:hover{ background: rgba(255,255,255,.12); }

/* Right card — brief */
.contact--aurora .brief{
  background: linear-gradient(145deg, rgba(18,18,18,.88), rgba(12,12,12,.92));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 48px rgba(0,0,0,.45);
}
.contact--aurora .brief h3{ margin:0 0 6px; font-weight:500; }
.contact--aurora .brief p{ color:#cfcfcf; margin:0 0 14px; }

/* Floating fields */
.contact--aurora .fields{ display:grid; gap:14px; }
.contact--aurora .field{ position:relative; }
.contact--aurora .field input,
.contact--aurora .field textarea{
  width:100%; color:#fff; background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding: 18px 14px 12px; font: inherit; outline: none; transition: .2s;
}
.contact--aurora .field textarea{ min-height: 110px; resize: vertical; }
.contact--aurora .field label{
  position:absolute; left:12px; top:12px; font-size:13px; color:#9aa3b2;
  transition:.2s; pointer-events:none; background: transparent; padding:0 4px;
}
.contact--aurora .field input:focus,
.contact--aurora .field textarea:focus{ border-color: rgba(37,99,235,.6); box-shadow: 0 0 0 3px rgba(37,99,235,.22); }
.contact--aurora .field input:not(:placeholder-shown) + label,
.contact--aurora .field textarea:not(:placeholder-shown) + label,
.contact--aurora .field input:focus + label,
.contact--aurora .field textarea:focus + label{
  transform: translateY(-9px) scale(.92); color:#b9c4ff; background: rgba(14,14,16,.9);
}

/* Chips */
.contact--aurora .chipset{ display:flex; gap:8px; flex-wrap:wrap; }
.contact--aurora .chip{
  border-radius:999px; padding:8px 12px; font-size:14px; cursor:pointer;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#dfe6ff; transition:.22s;
}
.contact--aurora .chip:hover{ background: rgba(255,255,255,.12); }
.contact--aurora .chip.is-selected{ color:#fff; background: linear-gradient(90deg,#2563EB,#8B5CF6); border-color: transparent; box-shadow: 0 10px 30px rgba(37,99,235,.28); }

/* Range */
.contact--aurora .range-wrap{ display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items:center; }
.contact--aurora #budget{ -webkit-appearance:none; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); outline: none; }
.contact--aurora #budget::-webkit-slider-thumb{ -webkit-appearance:none; width: 18px; height: 18px; border-radius: 50%; background:#fff; border:2px solid #2563EB; box-shadow: 0 0 0 6px rgba(37,99,235,.22); }
.contact--aurora #budget::-moz-range-thumb{ width: 18px; height: 18px; border-radius:50%; background:#fff; border:2px solid #2563EB; box-shadow: 0 0 0 6px rgba(37,99,235,.22); }
.contact--aurora #budgetValue{ font-size: 13px; color:#9aa3b2; min-width: 110px; text-align: right; }

/* Actions & smallprint */
.contact--aurora .actions{ display:flex; gap:10px; margin-top: 6px; flex-wrap: wrap; }
.contact--aurora .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 12px; padding: 12px 14px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color:#fff; text-decoration:none; cursor:pointer; transition:.22s;
}
.contact--aurora .btn:hover{ background: rgba(255,255,255,.12); }
.contact--aurora .btn-primary{ background: linear-gradient(90deg,#2563EB,#8B5CF6); border-color: transparent; box-shadow: 0 10px 30px rgba(37,99,235,.35); }
.contact--aurora .smallprint{ color:#9aa3b2; font-size:12px; margin-top: 8px; }


/* === Contact — Minimal Redesign (sleek & compact) === */
.contact--minimal{
  padding: clamp(56px, 6vw, 92px) clamp(6vw, 8vw, 10vw);
  position: relative;
}
.contact--minimal .wrap{
  max-width: 920px; margin: 0 auto;
  background: rgba(16,16,18,.6);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 24px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.contact--minimal .head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px;
}
.contact--minimal .title{ margin:0; font-weight:500; letter-spacing:.01em; }
.contact--minimal .email-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.contact--minimal .email-row .email{ color:#dfe6ff; text-decoration:none; border-bottom:1px dashed rgba(223,230,255,.35); }
.contact--minimal .email-row .copy-btn{
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer; transition:.18s; font:inherit;
}
.contact--minimal .email-row .copy-btn:hover{ background: rgba(255,255,255,.12); }
.contact--minimal .meta{ display:flex; gap:8px; flex-wrap:wrap; color:#9aa3b2; font-size:12px; }

/* Form: compact two columns on wide, single on small */
.contact--minimal .form{ display:grid; gap:10px; margin-top: 12px; }
.contact--minimal .row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 680px){ .contact--minimal .row{ grid-template-columns: 1fr; } }

.contact--minimal input, .contact--minimal textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#fff;
  border-radius:10px; padding:10px 12px; outline:none; transition:.18s; font:inherit;
}
.contact--minimal textarea{ min-height: 110px; resize: vertical; }
.contact--minimal input:focus, .contact--minimal textarea:focus{ border-color: rgba(37,99,235,.65); box-shadow: 0 0 0 2px rgba(37,99,235,.22); }

/* Chips: smaller, tighter */
.contact--minimal .chipset{ display:flex; gap:6px; flex-wrap:wrap; }
.contact--minimal .chip{
  border-radius:999px; padding:6px 10px; font-size:13px; cursor:pointer;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#d9dfeb; transition:.18s;
}
.contact--minimal .chip:hover{ background: rgba(255,255,255,.12); }
.contact--minimal .chip.is-selected{ color:#fff; background: rgba(90,125,255,.22); border-color: rgba(90,125,255,.4); }

/* Range: thin */
.contact--minimal .range{ display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items:center; }
.contact--minimal #budget{ -webkit-appearance:none; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); outline: none; }
.contact--minimal #budget::-webkit-slider-thumb{ -webkit-appearance:none; width: 16px; height: 16px; border-radius: 50%; background:#fff; border:2px solid #2563EB; box-shadow: 0 0 0 5px rgba(37,99,235,.22); }
.contact--minimal #budget::-moz-range-thumb{ width: 16px; height: 16px; border-radius:50%; background:#fff; border:2px solid #2563EB; box-shadow: 0 0 0 5px rgba(37,99,235,.22); }
.contact--minimal #budgetValue{ font-size: 12px; color:#9aa3b2; min-width: 100px; text-align: right; }
.contact--minimal .scale{ display:flex; justify-content: space-between; color:#6f7990; font-size: 11px; margin-top: 4px; }

/* Actions */
.contact--minimal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 6px; flex-wrap: wrap; }
.contact--minimal .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 10px; padding: 10px 12px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color:#fff; text-decoration:none; cursor:pointer; transition:.18s;
}
.contact--minimal .btn:hover{ background: rgba(255,255,255,.12); }
.contact--minimal .btn-primary{ background: linear-gradient(90deg,#2563EB,#8B5CF6); border-color: transparent; box-shadow: 0 8px 22px rgba(37,99,235,.32); }

/* Subtle edge halo (slimmer) */
.contact--minimal .wrap::after{
  content:""; position:absolute; inset: -6px; border-radius: 20px; pointer-events:none;
  background: radial-gradient(90% 40% at 50% 0%, rgba(90,125,255,.12), transparent 60%);
  filter: blur(12px);
  opacity:.6;
}


/* --- Minimal contact tweaks (overlap fix & simpler header) --- */
.contact--minimal .wrap{ position: relative; }
.contact--minimal .wrap > *{ position: relative; z-index: 1; }
.contact--minimal .wrap::after{ z-index: 0; }

.contact--minimal .head{
  display:flex; flex-direction: column; align-items:flex-start; gap:8px;
}
.contact--minimal .email-row{ order: 2; }
.contact--minimal .meta{ order: 3; }
.contact--minimal .title{ order: 1; }

/* Ensure form doesn't tuck under the header border */
.contact--minimal .form{ margin-top: 16px; }


/* --- Minimal contact overlap fix v2 --- */
.contact--minimal .head{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
  gap: 6px;
}
/* Remove subtle halo overlay that might sit over controls */
.contact--minimal .wrap::after{ display: none; }
/* Give the form extra breathing room from the header */
.contact--minimal .form{ margin-top: 18px; }
/* Ensure inputs render above any effects */
.contact--minimal input,
.contact--minimal textarea,
.contact--minimal .chipset,
.contact--minimal .actions{ position: relative; z-index: 2; }


/* --- Minimal contact: force single column input stack to avoid any overlap --- */
.contact--minimal .row{ grid-template-columns: 1fr !important; }
.contact--minimal .form{ gap: 12px; }


/* --- Minimal contact compact polish --- */
.contact--minimal .wrap{ max-width: 780px; padding: clamp(14px, 2vw, 20px); border-radius: 14px; }
.contact--minimal .title{ font-weight: 500; }
.contact--minimal .email-row .email{ border-bottom-color: rgba(223,230,255,.28); }
.contact--minimal .meta{ color:#a4aec4; gap:10px; }

/* Inputs: slightly denser */
.contact--minimal input, .contact--minimal textarea{
  border-radius: 9px; padding: 9px 12px; border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.contact--minimal textarea{ min-height: 120px; }

/* Chips: smaller, tighter */
.contact--minimal .chipset{ gap: 6px; }
.contact--minimal .chip{ font-size: 12px; padding: 5px 9px; border-radius: 999px; }

/* Actions: align left and reduce visual weight */
.contact--minimal .actions{ justify-content: flex-start; margin-top: 10px; }
.contact--minimal .btn{ padding: 9px 12px; border-radius: 10px; }
.contact--minimal .btn-primary{ box-shadow: 0 6px 18px rgba(37,99,235,.28); }


/* === Premium polish for the minimal contact without changing HTML === */
.contact--minimal{
  --qdx-accent: #2563EB;
  --qdx-accent-2: #8ee3ff;
  --qdx-bg: rgba(14,16,22,.72);
}

/* Animated gradient frame */
.contact--minimal .wrap{
  position: relative;
  isolation: isolate;
  background: var(--qdx-bg);
  border-radius: 16px;
  overflow: hidden;
}
.contact--minimal .wrap::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:18px;
  padding:1px;
  background: conic-gradient(from 180deg at 50% 50%, rgba(125,154,255,.35), rgba(86,214,255,.25), rgba(125,154,255,.35));
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: qdx-sheen 8s linear infinite;
  z-index:-1;
}
@keyframes qdx-sheen{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* Soft aurora blobs behind */
.contact--minimal .wrap::after{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(40% 30% at 20% 10%, rgba(140,188,255,.12), transparent 60%),
    radial-gradient(40% 30% at 80% 90%, rgba(122,226,255,.10), transparent 60%);
  filter: blur(30px);
  z-index:-2;
}

/* Header refinement */
.contact--minimal .title{ letter-spacing:.02em; font-weight:600; }
.contact--minimal .meta{ font-weight:400; color:#b7c2d8; }

/* Inputs with icons */
.contact--minimal input, .contact--minimal textarea{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35);
  transition: border-color .18s, box-shadow .18s, transform .12s;
}
.contact--minimal input:focus, .contact--minimal textarea:focus{
  transform: translateY(-1px);
  border-color: rgba(125,154,255,.55);
  box-shadow: 0 0 0 3px rgba(125,154,255,.20), inset 0 1px 0 rgba(255,255,255,.1);
}

/* Left icons via data-URI (no markup changes) */
.contact--minimal #name{ padding-left: 40px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="white" stroke-opacity=".55" stroke-width="1.5" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Z"/><path d="M2 22a10 10 0 0 1 20 0"/></svg>'); background-repeat:no-repeat; background-position: 12px 50%; background-size:20px;}
.contact--minimal #email{ padding-left: 40px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="white" stroke-opacity=".55" stroke-width="1.5" viewBox="0 0 24 24"><path d="M4 6h16v12H4z"/><path d="m22 6-10 7L2 6"/></svg>'); background-repeat:no-repeat; background-position: 12px 50%; background-size:20px;}
.contact--minimal #phone{ padding-left: 40px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="white" stroke-opacity=".55" stroke-width="1.5" viewBox="0 0 24 24"><path d="M6 2h12v20H6z"/><path d="M9 18h6"/></svg>'); background-repeat:no-repeat; background-position: 12px 50%; background-size:20px;}
.contact--minimal #message{ padding-left: 40px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="white" stroke-opacity=".55" stroke-width="1.5" viewBox="0 0 24 24"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>'); background-repeat:no-repeat; background-position: 12px 12px; background-size:20px;}

/* Chips — glassy pills with glow on select */
.contact--minimal .chip{
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 10px rgba(0,0,0,.25);
  color:#e8eeff;
  transition: transform .12s, box-shadow .18s, background .18s, border-color .18s;
}
.contact--minimal .chip:hover{ transform: translateY(-1px); }
.contact--minimal .chip.selected{
  background: linear-gradient(180deg, rgba(125,154,255,.35), rgba(120,232,255,.28));
  border-color: rgba(125,154,255,.6);
  box-shadow: 0 8px 24px rgba(125,154,255,.25);
  color:#0b1020;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Range — glossy track and glowy thumb */
.contact--minimal #budget{
  height: 6px;
  background: linear-gradient(90deg, rgba(125,154,255,.35), rgba(120,232,255,.28));
  border-radius: 999px;
}
.contact--minimal #budget::-webkit-slider-thumb{
  width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,.8);
  background: radial-gradient(circle at 30% 30%, #fff, #d7e1ff 45%, #93caff 70%);
  box-shadow: 0 0 0 6px rgba(125,154,255,.20);
}
.contact--minimal #budget::-moz-range-thumb{
  width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,.8);
  background: radial-gradient(circle at 30% 30%, #fff, #d7e1ff 45%, #93caff 70%);
  box-shadow: 0 0 0 6px rgba(125,154,255,.20);
}
.contact--minimal #budgetValue{
  font-weight:500; color:#e6f0ff; background: rgba(255,255,255,.08);
  padding:4px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.16);
}

/* Buttons — premium sheen */
.contact--minimal .btn{
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.contact--minimal .btn-primary{
  background: linear-gradient(90deg, #7aa2ff, #8ee3ff);
  color:#0b1220;
  border: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 12px 30px rgba(122,162,255,.35);
}

/* Email link + copy button refinement */
.contact--minimal .email-row .email{
  color:#e8eeff; border-bottom:1px dashed rgba(232,238,255,.45);
}
.contact--minimal .email-row .copy-btn{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.contact--minimal .email-row .copy-btn:hover{
  transform: translateY(-1px);
}

/* Slight layout breathing room */
.contact--minimal .form{ gap: 14px; }
.contact--minimal textarea{ min-height: 140px; }


/* === Alternative Style: "Editorial Minimal" (clean, no glow) === */
.contact--minimal .wrap{
  background: rgba(18,20,24,.8);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  /* Subtle grid */
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
}
/* Remove previous decorative layers */
.contact--minimal .wrap::before,
.contact--minimal .wrap::after{ content:none; display:none; }

/* Head */
.contact--minimal .title{ font-weight:700; letter-spacing:.01em; }
.contact--minimal .email-row .email{ border-bottom:1px solid rgba(223,230,255,.25); }
.contact--minimal .meta{ color:#9fb0c8; }

/* Inputs: crisp outline, no icons */
.contact--minimal input,
.contact--minimal textarea{
  padding: 12px 14px;
  background: rgba(14,16,18,.55);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: none;
  background-image: none !important;
}
.contact--minimal #name,
.contact--minimal #email,
.contact--minimal #phone,
.contact--minimal #message{ padding-left:14px; }

.contact--minimal input::placeholder,
.contact--minimal textarea::placeholder{ color:#8d96a9; }

.contact--minimal input:focus,
.contact--minimal textarea:focus{
  border-color: #6aa0ff;
  box-shadow: 0 0 0 4px rgba(106,160,255,.18);
  transform: none;
}

/* Chips: editorial pills */
.contact--minimal .chip{
  background: transparent;
  border:1.5px solid rgba(255,255,255,.16);
  color:#e3e9f7;
  box-shadow: none;
  transform: none;
}
.contact--minimal .chip:hover{ background: rgba(255,255,255,.06); }
.contact--minimal .chip.selected{
  background: #2b66ff;
  border-color: #2b66ff;
  color: #fff;
  text-shadow: none;
  box-shadow: 0 6px 16px rgba(43,102,255,.35);
}

/* Range: simple and clear */
.contact--minimal #budget{
  height: 6px;
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.contact--minimal #budget::-webkit-slider-thumb{
  width: 18px; height: 18px; border-radius: 999px;
  background: #fff; border: 2px solid #2b66ff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.contact--minimal #budget::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 999px;
  background: #fff; border: 2px solid #2b66ff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.contact--minimal #budgetValue{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color:#e6eefc;
}

/* Buttons: refined */
.contact--minimal .btn{
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.16);
  color:#e7ecf8;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.contact--minimal .btn:hover{ background: rgba(255,255,255,.12); }
.contact--minimal .btn-primary{
  background: #2b66ff;
  color:#fff;
  border-color: #2b66ff;
  text-shadow: none;
  box-shadow: 0 12px 26px rgba(43,102,255,.35);
}

/* Spacing tweaks */
.contact--minimal .form{ gap: 16px; }
.contact--minimal textarea{ min-height: 140px; }


/* === Contact CTA variant (hero-like, minimal) === */
.contact--cta{
  padding: clamp(72px, 8vw, 120px) clamp(6vw, 8vw, 10vw);
  text-align: center;
}
.contact--cta .cta-wrap{
  max-width: 980px; margin: 0 auto;
}
.contact--cta .cta-title{
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(32px, 5.2vw, 64px);
  letter-spacing: .01em;
  color: #eaf0ff;
}
.contact--cta .cta-title .accent{

color: #2563EB;
background: none;
-webkit-background-clip: initial;
        background-clip: initial;
}
.contact--cta .cta-sub{
  margin: 10px 0 26px;
  color: #a9b6cc;
  font-size: clamp(14px, 1.6vw, 18px);
}
.contact--cta .cta-email{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #eaf0ff;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.contact--cta .cta-email:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
}
.contact--cta .cta-note{
  margin: 18px 0 0;
  color: #8fa0ba;
  font-size: clamp(12px, 1.4vw, 16px);
}


/* --- Align CTA fonts & style with site --- */
.contact--cta .cta-title{
  font-weight: 600;
  letter-spacing: .005em;
  color: #fff;
}
.contact--cta .cta-title .accent{

color: #2563EB;
background: none;
-webkit-background-clip: initial;
        background-clip: initial;
}
.contact--cta .cta-email{
  font-size: 16px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.contact--cta .cta-email:hover{
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.contact--cta .cta-sub{ color:#b8c4d8; }
.contact--cta .cta-note{ color:#a0aec2; }


/* --- Make Contact CTA typography match site (Montserrat weights/spacing) --- */
.contact--cta .cta-title{
  font-family: inherit;          /* Montserrat from body */
  font-weight: 300;              /* match h2 weight */
  letter-spacing: 0.1em;         /* match h2 spacing */
  text-transform: none;          /* keep case as typed */
  font-size: clamp(28px, 5vw, 68px); /* align to h1 scale */
  line-height: 1.1;
}
.contact--cta .cta-title .accent{

color: #2563EB;
background: none;
-webkit-background-clip: initial;
        background-clip: initial;
}
.contact--cta .cta-sub,
.contact--cta .cta-note,
.contact--cta .cta-email{
  font-family: inherit;
}
.contact--cta .cta-email{
  font-weight: 400;
}


/* Brand logo in hero */
.brand-logo{
  width: clamp(84px, 12vw, 148px);
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
  opacity: .96;
  pointer-events: none; /* keep hero controls unchanged */
}


/* ===== Brand mark (top-left) ===== */
.site-brand{
  position:fixed;
  top:16px;
  left:20px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:1000;
  text-decoration:none;
  user-select:none;
}
.site-brand img{
  width: clamp(36px, 5vw, 56px);
  height:auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55));
  transform-origin:left top;
  transition: transform .25s ease, opacity .25s ease;
  opacity:.98;
}
.site-brand:hover img{ transform: scale(1.04); opacity:1; }
.sr-only{ 
  position:absolute; 
  width:1px; height:1px; 
  padding:0; margin:-1px; 
  overflow:hidden; clip:rect(0,0,0,0); border:0; 
}
/* remove old spacing reserved for hero logo if any */
.brand-logo{ display:none !important; }

/* === Patch: remove blue light separator under hero === */
.about::before{ background: none !important; }

/* === Patch: lift the .about section by 10px === */
.about{ margin-top: -10px !important; }


/* === Hero Spline crop (no overlay) ===
   Gently scales and nudges the Spline canvas so the bottom-right badge
   sits outside the clipped hero viewport. No overlays used. */
.hero { overflow: hidden; }
.hero .hero-spline{
  transform-origin: bottom right;
  transform: translate(72px, 64px) scale(1.06);
  will-change: transform;
}
@media (max-width: 720px){
  .hero .hero-spline{
    transform: translate(54px, 54px) scale(1.08);
  }
}


@media (max-width: 720px){
  .scroll-cue{ bottom: 56px; }
}


/* Slightly smaller Contact CTA heading */
.contact--cta .cta-title{
  font-size: clamp(24px, 4.2vw, 56px);
}


/* === Mobile & Touch Polishing (added by ChatGPT - 2025-10-24) =============================== */

/* Smaller phones: tighten paddings/spacing */
@media (max-width: 480px){
  .about { padding: 80px 6vw 72px; }
  .expertise { padding: 72px 6vw; }
  .grid { gap: 22px; }
  .hero-overlay h1 { letter-spacing: 0.18em; }
  .hero-overlay p { padding: 0 6vw; }
  .contact--cta { padding: 64px 6vw 80px; }
}

/* Ensure grids collapse gracefully on very narrow widths */
@media (max-width: 380px){
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Touch devices: remove hover/tilt “jumpiness” */
@media (pointer: coarse) {
  .card:hover { transform: none; }
  .card::before { opacity: 0 !important; } /* avoid extra GPU work on touch */
  [data-magnetic] { transition: none !important; transform: none !important; }
}

/* Make the floating nav comfy on mobile */
@media (max-width: 720px){
  .site-nav { gap: 4px; padding: 6px 10px; }
  .nav-link { font-size: 13px; padding: 6px 9px; }
}

/* Back-to-top: easier thumb target on phones */
@media (max-width: 720px){
  .back-to-top { right: 12px; bottom: 12px; padding: 12px 14px; font-size: 16px; }
}

/* Hero Spline: add one more step for ultra-narrow phones so the badge stays cropped */
@media (max-width: 380px){
  .hero .hero-spline{
    transform: translate(44px, 48px) scale(1.10);
  }
}

/* Prevent accidental horizontal scroll on tiny screens */
html, body { overflow-x: hidden; }