/* ===================== Pixora Works — Contact (CSS) ===================== */

/* -------- Vars -------- */
:root{
  --pw-bg:#fff; --pw-text:#0f1115; --pw-muted:#5f6b7a; --pw-border:rgba(15,17,21,.12);
  --pw-soft:#f6f7f9; --pw-focus:#6c8cff;
  --pw-gradient: linear-gradient(90deg,#6c8cff,#ff7a7a,#ffa24c);

  --hero-offset-desktop: 0px; --hero-offset-mobile: 86px;

  --field-h: 48px;      /* unified control height */
  --field-pad-x: 14px;
  --chev-w: 12px;       /* dropdown chevron width */
  --chev-right: 14px;   /* chevron right spacing */
}

/* ================= Hero ================= */
#contact-hero{
  margin-top: var(--hero-offset-desktop);
  padding: clamp(60px,7vw,100px) 0 30px;
  border-bottom:1px solid var(--pw-border);
  text-align:center; position: relative; isolation:isolate; overflow:hidden; background: transparent;
}
#contact-hero .kicker{
  display:inline-block; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  font-size:.75rem; color:var(--pw-text); background:rgba(0,0,0,.05);
  border-radius:999px; padding:.4rem .7rem; margin-top: 90px; position: relative; overflow: hidden;
}
#contact-hero .kicker::after{
  content:""; position:absolute; inset:0; transform: skewX(-20deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transition: transform .6s ease;
}
#contact-hero .kicker:hover::after{ transform: skewX(-20deg) translateX(120%); }
#contact-hero .title{ font-weight:900; margin-top:10px; letter-spacing:-.02em; position: relative; }
#contact-hero .title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px;
  width:clamp(120px,28vw,360px); height:10px; border-radius:999px; background:var(--pw-gradient);
  filter: blur(10px); opacity:.35;
}
#contact-hero .sub{ color:var(--pw-muted); max-width:60ch; margin:10px auto 0; }

/* Gradient mesh bg + grain */
#contact-hero::before{
  content:""; position:absolute; inset:-20%; z-index:0; filter:blur(42px); transform:translateZ(0);
  background:
    radial-gradient(38% 38% at 18% 28%, rgba(108,140,255,.35) 0 60%, transparent 61%),
    radial-gradient(34% 34% at 82% 22%, rgba(255,122,122,.35) 0 60%, transparent 61%),
    radial-gradient(32% 32% at 62% 78%, rgba(255,162,76,.35) 0 60%, transparent 61%);
  animation: pwMeshFloat 16s ease-in-out infinite alternate;
}
#contact-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.08; mix-blend-mode:soft-light;
  background-image:
    radial-gradient(#000 1px, transparent 1.5px),
    radial-gradient(#000 1px, transparent 1.5px);
  background-size:12px 12px, 18px 18px; background-position:0 0, 6px 9px;
}
#contact-hero .container{ position: relative; z-index:2; }

@keyframes pwMeshFloat{ 0%{ transform:translate(-2%,-1%) scale(1); filter:blur(42px);} 100%{ transform:translate(2%,1%) scale(1.06); filter:blur(46px);} }
@media (prefers-reduced-motion: reduce){ #contact-hero::before{ animation:none; } #contact-hero .kicker::after{ transition:none; } }
@media (max-width:575.98px){ #contact-hero{ padding:56px 0 28px; } #contact-hero .kicker{ margin-top:16px; } }
@media (min-width:992px){ .pixoraworks__header.sticky + #contact-hero{ margin-top:120px; } }

/* ================= Main ================= */
#contact-main{
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(108,140,255,.08), transparent 60%),
    radial-gradient(50% 40% at 90% 10%, rgba(255,162,76,.08), transparent 60%),
    var(--pw-bg);
  padding: clamp(40px,5vw,100px) 0;
}
@media (min-width: 992px) {
  .contact-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch; /* 👈 ensures equal height for both columns */
    gap: 24px;
  }

  /* Make sure the child containers expand fully */
  .contact-grid > div {
    display: flex;
    flex-direction: column;
  }

  /* If cards should expand to full height inside */
  .info-card,
  .map-card,
  .form-card {
    height: 100%;
  }
}

/* ================= Cards ================= */
.info-card,.form-card,.map-card{
  position:relative; background:#fff; border:1px solid var(--pw-border); border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.info-card:hover,.form-card:hover,.map-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.08); }
.info-card::before,.form-card::before,.map-card::before{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px; pointer-events:none;
  background:linear-gradient(120deg, rgba(108,140,255,.35), rgba(255,122,122,.25), rgba(255,162,76,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.info-card{ padding:24px; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.info-card .list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.info-card .list li{ display:flex; align-items:flex-start; gap:12px; }
.info-card .icon{ width:36px; height:36px; flex:0 0 36px; border-radius:10px; display:grid; place-items:center; background:rgba(0,0,0,.04); font-size:1.2rem; }
.info-card .hd{ margin:0; font-weight:800; }
.info-card .sm{ margin:0; color:var(--pw-muted); }
.info-card .sm a{ color:var(--pw-text); text-decoration:none; font-weight:600; }
.info-card .sm a:hover{ color:var(--pw-focus); text-decoration:underline; }
.trust{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.seal{ background:var(--pw-soft); padding:.4rem .6rem; border-radius:10px; font-size:.9rem; color:var(--pw-muted); }

/* ================= Map ================= */
.map-card{ overflow:hidden; }
.map-card .map-skeleton{
  height:280px; border-radius:16px;
  background:linear-gradient(90deg,#eef1f6 25%, #f6f8fb 37%, #eef1f6 63%); background-size:400% 100%;
  animation: mapShimmer 1.2s infinite;
}
@keyframes mapShimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.map-card iframe{ width:100%; height:280px; border:0; display:block; opacity:0; transition:opacity .35s ease; }
@media (min-width:1200px){ .map-card .map-skeleton,.map-card iframe{ height:340px; } }
.map-card.is-loaded .map-skeleton{ display:none; } .map-card.is-loaded iframe{ opacity:1; }
.map-fallback-link{ display:none; position:absolute; inset:auto 16px 16px auto; z-index:3; background:#111; color:#fff; text-decoration:none; font-weight:700; padding:.45rem .65rem; border-radius:10px; }
.map-card.is-fallback .map-fallback-link{ display:inline-block; }

/* ================= Reveal on scroll ================= */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ transition:none; } }

/* ================= Form (base) ================= */
.form-card{ padding:24px; }
.field{ position:relative; }
.field + .field{ margin-top:14px; }

.input,.select,.textarea{
  width:100%; border:1px solid var(--pw-border); background:#fff; border-radius:12px;
  padding:14px; font-size:1rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input,.select{ height:var(--field-h); display:inline-flex; align-items:center; padding:0 var(--field-pad-x); }
.textarea{ min-height:120px; resize:vertical; padding:14px; }

/* Placeholders invisible (for float label) */
.input::placeholder,.textarea::placeholder{ color:transparent; }

/* Focus ring */
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--pw-focus); box-shadow:0 0 0 3px rgba(108,140,255,.18);
}

/* Floating labels */
.lbl{
  position:absolute; left:12px; top:12px; background:#fff; padding:0 6px;
  color:var(--pw-muted); pointer-events:none; transform-origin:left top;
  transition: transform .2s, color .2s;
}
.input:not(:placeholder-shown) ~ .lbl,
.textarea:not(:placeholder-shown) ~ .lbl,
.input:focus ~ .lbl,
.textarea:focus ~ .lbl{ transform: translateY(-12px) scale(.85); color:var(--pw-focus); }

/* ---------- ROWS ---------- */
/* let .row-gap control spacing only (no layout) */
.row-gap{ gap:14px; align-items:start; }

/* Option A: when a row has BOTH .row-gap & .row-2 → force FLEX grid */
.form-card--sleek .row-gap.row-2{
  display:flex !important;        /* override any grid from other rules */
  flex-wrap:wrap; gap:16px; align-items:flex-start;
}
/* Equal, responsive columns inside the combo row */
.form-card--sleek .row-gap.row-2 > .field{ flex:1 1 260px; min-width:0; }

/* Stack-only rows (no columns) */
.form-card--sleek .row-stack{ display:flex; flex-direction:column; gap:14px; }

/* ---------- Select (floating label) ---------- */
.field--select{ position:relative; }
.select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding:0 calc(var(--chev-right) + var(--chev-w) + 8px) 0 var(--field-pad-x);
  line-height:1.25; background-color:#fff;
}
.field--select .lbl{ left: calc(var(--field-pad-x) - 2px); top:12px; }
.field--select.is-focused .lbl,
.field--select.is-filled  .lbl{ transform: translateY(-12px) scale(.85); color:var(--pw-focus); }
.field--select::after{
  content:""; position:absolute; right:var(--chev-right); top:50%;
  width:var(--chev-w); height:var(--chev-w); transform:translateY(-50%); pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%236c7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,7 10,13 16,7'/></svg>");
  background-repeat:no-repeat; background-size:100% 100%;
}
@supports (-webkit-touch-callout: none){ .select{ line-height:normal; } }

/* ---------- Range + badge ---------- */
.ctrl{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.range{ width:100%; }
.badge-val{ background:#111; color:#fff; padding:.35rem .6rem; border-radius:999px; font-weight:800; font-size:.85rem; }

/* ---------- Upload (drag & drop) ---------- */
.drop{
  border:1px dashed var(--pw-border); border-radius:12px; padding:16px;
  background:var(--pw-soft); text-align:center; cursor:pointer;
  transition: background .2s, border-color .2s;
}
.drop.dragover{ background:#eef3ff; border-color:var(--pw-focus); }
.drop small{ color:var(--pw-muted); }

/* ---------- Buttons ---------- */
.btn-primary-pw{
  background:var(--pw-gradient); border:none; border-radius:12px;
  color:#111; font-weight:900; padding:.9rem 1.2rem;
  box-shadow:0 10px 20px rgba(0,0,0,.12); transition:transform .2s;
}
.btn-primary-pw:hover{ transform:translateY(-2px); }
.btn-ghost{ background:#fff; border:1px solid var(--pw-border); border-radius:12px; font-weight:800; padding:.9rem 1rem; }

/* ---------- Alerts ---------- */
.alert-inline{ display:none; border-radius:12px; padding:.8rem 1rem; margin-top:10px; }
.alert-inline.show{ display:block; }
.alert-success{ background:#eafff2; border:1px solid #bff0d1; color:#0a7a3b; }
.alert-error{ background:#ffecec; border:1px solid #ffc9c9; color:#991b1b; }

/* ---------- Actions layout ---------- */
.form-actions{ display:grid; gap:10px; }
@media (min-width:576px){
  .form-actions{ grid-template-columns:1fr 1fr; align-items:start; gap:12px 16px; }
}

/* ---------------- Sleek skin ---------------- */
.form-card--sleek{
  --card-bg: rgba(255,255,255,.75); --card-br:16px; --stroke:rgba(4,6,23,.10);
  --shadow:0 20px 50px rgba(3,4,28,.10); --ring:0 0 0 4px rgba(99,102,241,.18);
  --field-bg: rgba(255,255,255,.9); --field-br:14px;
  background:var(--card-bg); border:1px solid var(--stroke); border-radius:var(--card-br);
  box-shadow:var(--shadow); backdrop-filter:blur(12px); padding:clamp(18px,3vw,28px);
}
.form-card--sleek[data-reveal]{ transform:translateY(12px); opacity:0; transition: transform .5s cubic-bezier(.2,.65,.2,1), opacity .5s; }
.form-card--sleek.in-view{ transform:none; opacity:1; }

.form-card--sleek .field{ position:relative; }
.form-card--sleek .input,.form-card--sleek .select,.form-card--sleek .textarea{
  width:100%; border:1px solid rgba(13,15,31,.12); background:var(--field-bg); border-radius:var(--field-br);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.form-card--sleek .input:hover,.form-card--sleek .select:hover,.form-card--sleek .textarea:hover{ border-color: rgba(13,15,31,.25); }
.form-card--sleek .input:focus,.form-card--sleek .select:focus,.form-card--sleek .textarea:focus{ border-color:#6366F1; box-shadow:var(--ring); outline:none; }
.form-card--sleek .lbl{ position:absolute; left:12px; top:12px; background:transparent; padding:0 6px; font-size:12px; line-height:1; color:#6b7280; transform:translateY(-140%); opacity:.95; pointer-events:none; transition:color .2s; }
.form-card--sleek .input::placeholder,.form-card--sleek .textarea::placeholder{ color:#9aa3b2; opacity:.65; }

/* Valid/invalid hints (toned down until interaction) */
.form-card--sleek .input:invalid,.form-card--sleek .select:invalid,.form-card--sleek .textarea:invalid{ border-color:rgba(220,38,38,.35); }
.form-card--sleek .input:valid,.form-card--sleek .select:valid,.form-card--sleek .textarea:valid{ border-color:rgba(16,185,129,.4); }

/* Range styling */
.form-card--sleek .range{ width:100%; appearance:none; height:4px; border-radius:999px; background:#e5e7eb; }
.form-card--sleek .range::-webkit-slider-thumb{ appearance:none; width:18px; height:18px; border-radius:50%; background:#6366F1; box-shadow:0 0 0 4px rgba(99,102,241,.20); cursor:pointer; transition: transform .1s; }
.form-card--sleek .range::-webkit-slider-thumb:active{ transform:scale(1.05); }
.form-card--sleek .range::-moz-range-thumb{ width:18px; height:18px; border:none; border-radius:50%; background:#6366F1; box-shadow:0 0 0 4px rgba(99,102,241,.20); cursor:pointer; }
.form-card--sleek .drop{ border:1px dashed rgba(13,15,31,.25); background:rgba(99,102,241,.06); border-radius:14px; padding:16px; transition:border-color .2s, background-color .2s; }
.form-card--sleek .drop:hover{ border-color:#6366F1; }
.form-card--sleek .drop.dragover{ background:rgba(99,102,241,.12); }

.form-card--sleek .btn-primary-pw{
  background:linear-gradient(90deg,#6366F1 0%, #6267AF 50%, #DC72AC 100%); color:#fff; border:0;
  padding:12px 18px; border-radius:12px; font-weight:800;
  transition: transform .08s ease, box-shadow .2s ease; box-shadow:0 10px 20px rgba(99,102,241,.20);
}
.form-card--sleek .btn-primary-pw:hover{ transform:translateY(-1px); }
.form-card--sleek .btn-primary-pw:active{ transform:translateY(0); }
.form-card--sleek .btn-ghost{ border:1px solid rgba(13,15,31,.18); background:transparent; color:#111827; padding:12px 16px; border-radius:12px; }

.form-card--sleek .alert-inline{ display:inline-block; min-height:20px; font-size:14px; line-height:1.4; }
.form-card--sleek .alert-inline.show.alert-success{ color:#065f46; }
.form-card--sleek .alert-inline.show.alert-error{ color:#b91c1c; }
.form-card--sleek .sm{ color:#6b7280; }

/* Dark mode */
@media (prefers-color-scheme: dark){
  .form-card--sleek{ --card-bg:rgba(17,18,28,.6); --stroke:rgba(255,255,255,.08); --shadow:0 20px 60px rgba(0,0,0,.45); --field-bg:rgba(22,23,34,.85); }
  .form-card--sleek .btn-ghost{ color:#e5e7eb; border-color:rgba(255,255,255,.18); }
  .form-card--sleek .sm{ color:#9aa3b2; }
}

/* 1) Force the first block (name/email/company/phone) to be 2-up */
.form-card--sleek .row-gap.row-2 {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

/* mobile: stack; ≥576px: exactly two per row (name|email / company|phone) */
.form-card--sleek .row-gap.row-2 > .field { flex: 1 1 100%; }
@media (min-width: 576px){
  .form-card--sleek .row-gap.row-2 > .field { flex: 1 1 calc(50% - 8px); }
}

/* 2) Add space above the Topic/Timeline row */
.form-card--sleek .row-gap + .row-stack { margin-top: 16px; }

/* 3) Ensure inputs align perfectly */
.form-card--sleek .row-gap.row-2 .input,
.form-card--sleek .row-gap.row-2 .select {
  height: var(--field-h);
  padding: 0 var(--field-pad-x);
  display: inline-flex;
  align-items: center;
}

/* 4) Float label baseline so both columns match */
.form-card--sleek .row-gap.row-2 .lbl {
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
}

/* ================= Fix alignment for paired inputs ================= */
.form-card--sleek .row-gap.row-2 {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch; /* ensures both inputs equal height */
}

/* Each field gets consistent height and vertical alignment */
.form-card--sleek .row-gap.row-2 > .field {
  flex: 1 1 calc(50% - 8px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* aligns label and input visually */
}

/* Make inputs the same height and baseline aligned */
.form-card--sleek .row-gap.row-2 .input {
  height: 56px; /* match all */
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* === Fix: first-row label alignment (Name/Email/Company/Phone) === */
.form-card--sleek .row-gap.row-2 .field .lbl{
  top:12px;
  left:12px;
  transform: translateY(-150%) !important; /* unify baseline */
  background:#fff;                          /* avoids border overlap on light */
  z-index:1;                                /* never tuck under the field edge */
}
/* === 1) Align just the Name label in the first row === */
/* Enforce the same pre-floated baseline as the other first-row fields */
.form-card--sleek .row-gap.row-2 .field > input#name + .lbl{
  top:12px;
  left:12px;
  transform: translateY(-150%) !important; /* wins over earlier rules */
  background:#fff;
  z-index:1;
}

/* === 2) Apply the current (pre-floated) label style to Topic & Timeline === */
/* Make the select labels use the same pre-floated baseline as first-row inputs */
.form-card--sleek .row-stack .field--select .lbl{
  top:12px;
  left:12px;
  transform: translateY(-150%); /* match first-row look */
  background:#fff;
  z-index:1;
}

/* Keep nice focus color when interacting with the selects */
.form-card--sleek .row-stack .field--select.is-focused .lbl,
.form-card--sleek .row-stack .field--select.is-filled  .lbl{
  transform: translateY(-150%);           /* stay floated */
  color: var(--pw-focus);
}

/* === Final precise fix: Name label alignment === */
.form-card--sleek .row-gap.row-2 .field input#name + .lbl,
.form-card--sleek .row-gap.row-2 .field label.lbl[for="name"] {
  top: 26px !important; /* Adjust this number up/down (14–18px) for pixel-perfect alignment */
  left: 12px !important;
  transform: translateY(-155%) !important; /* slightly more float to match others */
  background: #fff;
  z-index: 1;
}


/* === Fix: Align Project Details (textarea) label with others === */
.form-card--sleek textarea.textarea + .lbl {
  top: 12px;
  left: 12px;
  transform: translateY(-150%) !important; /* same baseline as other labels */
  background: #fff;
  z-index: 1;
}

/* === iPhone Safari fix: lighten form background in dark mode === */
@supports (-webkit-touch-callout: none) {
  @media (prefers-color-scheme: dark) {
    .form-card--sleek {
      --card-bg: rgba(28,29,40,.55);  /* lighter base */
      --field-bg: rgba(32,33,45,.75);
      backdrop-filter: saturate(120%) blur(10px);
    }
  }
}