/* =========================================================
   Ark Studio — contact.css 
   ========================================================= */

/* Layout width + vertical rhythm */
.contact .section { padding: clamp(2rem, 4.5vw, 3.75rem) 0; }
.contact .container { width: min(var(--container), 92vw); margin-inline: auto; }

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.contact-hero{ position: relative; text-align:center; overflow:hidden; }
.contact-hero .eyebrow{ color: var(--accent); font-weight: 700; letter-spacing: .2px; margin: 0 0 .5rem; }
.contact-title{
  margin:.25rem 0 .25rem;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  line-height:1.15;
}
.contact-sub{ color: var(--muted); margin: 0 auto; max-width: 60ch; }

/* No blobs in top hero */
.contact-hero .contact-ambient{ display:none !important; }

/* ---------------------------------------------------------
   BODY + AMBIENT BLOBS 
   --------------------------------------------------------- */
.contact-body{
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

/* Give the blur extra room and avoid hard edges */
.contact-body .contact-ambient{
  position: absolute;
  inset: -10% -2% -22% -2%;
  pointer-events: none;
  z-index: 0;
  overflow: visible; /* no rectangular clipping */
}
@supports (-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000)) {
  .contact-body .contact-ambient{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  }
}


.contact-ambient .blob{
  position:absolute; border-radius:50%;
  filter: blur(var(--contact-blob-blur, 20px));
  opacity: var(--contact-blob-opacity, .30);
}
/* Light/Dark tuning just for this page */
:root{ --contact-blob-blur: 18px; --contact-blob-opacity: .26; }
html[data-theme="dark"]{ --contact-blob-blur: 22px; --contact-blob-opacity: .38; }
/* GREEN left */
.contact-ambient .blob.a{
  width: clamp(280px, 34vw, 560px);
  height: clamp(280px, 34vw, 560px);
  left: max(-8%, -40px);
  top: clamp(0%, 6vh, 10%);
  background:
    radial-gradient(52% 52% at 40% 40%, rgba(16,185,129,.65) 0 42%, rgba(16,185,129,.22) 58%, transparent 72%),
    radial-gradient(80% 80% at 60% 60%, rgba(16,185,129,.18) 0, transparent 70%);
}
/* YELLOW right */
.contact-ambient .blob.b{
  width: clamp(240px, 28vw, 520px);
  height: clamp(240px, 28vw, 520px);
  right: max(-6%, -32px);
  bottom: clamp(-8%, -6vh, -12%);
  background:
    radial-gradient(50% 50% at 55% 45%, rgba(250,204,21,.62) 0 40%, rgba(250,204,21,.20) 56%, transparent 74%),
    radial-gradient(80% 80% at 40% 60%, rgba(250,204,21,.14) 0, transparent 70%);
}

/* Keep content above blobs */
.contact-body .container{ position: relative; z-index: 1; }

/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */
.contact-grid{
  display: grid; gap: clamp(1.1rem, 3vw, 1.6rem);
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 960px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   CARDS 
   --------------------------------------------------------- */
.contact{
  --card-bg: color-mix(in oklab, var(--surface) 92%, transparent);
  --card-border: var(--border);
  --card-shadow: var(--shadow);
}
html[data-theme="dark"] .contact{
  --card-bg: #0f141b;
  --card-border: #233041;
  --card-shadow: 0 20px 44px rgba(0,0,0,.6);
}

.form-card,
.info-card{
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: clamp(1.25rem, 3.8vw, 1.75rem);
}

/* subtle inner sheen */
.form-card::before,
.info-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  opacity:.45;
}

/* ---------------------------------------------------------
   FORM LAYOUT + FIELDS
   --------------------------------------------------------- */
.form-row{ display:grid; gap: clamp(.9rem, 2vw, 1.1rem); grid-template-columns: 1fr 1fr; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:.55rem; }
.field + .field{ margin-top:.35rem; }

.field .label,
.field label:not(.chip){
  font-weight:600;
  padding-inline:.15rem;
}

.input, .select, .textarea{
  width:100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: .95rem 1.05rem; /* a touch more comfort */
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.textarea{ resize: vertical; min-height: 9rem; }

/* focus ring */
.input:focus, .select:focus, .textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent);
}

/* ---------------------------------------------------------
   CHIPS (the “What are you after?” pills)
   --------------------------------------------------------- */
.chip-group{
  display:flex; flex-wrap:wrap;
  gap: 1rem 1.1rem; /* row gap / column gap */
}

.chip-input{ position:absolute; opacity:0; width:0; height:0; }

label.chip, .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: .85rem 1.3rem;           /* breathing room */
  min-height: 44px;                 /* comfortable tap */
  font-size: 1rem; line-height:1.15;
  border-radius: 999px; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip:active{ transform: translateY(0); }

/* keyboard focus */
.chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent);
}

/* selected state — keep text readable on both themes */
.chip-input:checked + .chip{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  background:   color-mix(in oklab, var(--accent) 22%, var(--surface));
  color: #0b1f17;
  box-shadow: 0 8px 22px color-mix(in oklab, black 12%, transparent);
}
html[data-theme="dark"] .chip-input:checked + .chip{
  background: color-mix(in oklab, var(--accent) 22%, #0f141b);
  color: #eafff6;
}

/* small screens */
@media (max-width:420px){
  .chip{ padding: .7rem 1.05rem; font-size: .98rem; }
}

/* ---------------------------------------------------------
   AGREEMENT + NOTICES + ACTIONS
   --------------------------------------------------------- */
.agree{ display:flex; align-items:center; gap:.6rem; margin-top:.6rem; }
.agree a{ text-decoration: underline; }

.notice{
  display:none; margin:.9rem 0; padding:.8rem 1rem; border-radius:10px; font-weight:600;
}
.notice.show{ display:block; }
.notice.success{
  border:1px solid color-mix(in oklab, var(--accent) 45%, var(--border));
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
}
.notice.error{
  border:1px solid #ef4444;
  background: color-mix(in oklab, #ef4444 12%, var(--surface));
}

.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:.75rem; }
.actions .btn{ padding: 12px 18px; min-height:44px; }

/* ---------------------------------------------------------
   INFO CARD
   --------------------------------------------------------- */
.info-card h2{
  margin:.1rem 0 .9rem;
  font-size:1.25rem;
  display:flex; align-items:center; gap:.65rem;
}
.info-card h2::after{
  content:""; flex:1; height:3px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.5;
}

.info-list{ list-style:none; padding:0; margin:0 0 .9rem; }
.info-list li{ position:relative; margin:.45rem 0; padding-left:1.25rem; }
.info-list li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:.55rem; height:.55rem; border-radius:50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--card-bg) 100%, transparent) inset;
}

.tips{
  margin-top:.75rem; padding:.9rem 1rem; border-radius:12px;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  border:1px dashed color-mix(in oklab, var(--border) 80%, transparent);
}
.tips h3{ margin:.1rem 0 .35rem; font-size:1rem; }
.tips ul{ margin:0; padding-left:1rem; }
.tips li{ margin:.25rem 0; }

.info-card .cta .btn{ margin-top:.7rem; }

/* FINAL chip comfort override 
.contact .field label.chip{
  display:inline-flex;
  align-items:center;
  padding-block: .55rem !important;
  padding-inline: 1rem !important;
  min-height: 44px;
  line-height: 1.15;
  font-size: 1rem;
  border-radius: 999px;
}

.contact .chip-group{ gap: 1rem 1.1rem; }

/* One-row chips on desktop, wrap on smaller screens */
.contact .chip-group{
  display: flex;
  gap: .6rem .8rem;       /* a touch tighter */
  flex-wrap: nowrap;      /* keep a single line when there's room */
  white-space: nowrap;    /* prevent label line-breaks */
}

/* Comfortable but not bulky */
.contact label.chip,
.contact .chip{
  padding: .62rem .95rem;   /* ↓ from 0.85/1.3 */
  min-height: 40px;         /* solid tap size without ballooning */
  font-size: 1rem;
  line-height: 1.1;
  white-space: nowrap;
}

/* Allow wrapping on smaller viewports */
@media (max-width: 820px){
  .contact .chip-group{
    flex-wrap: wrap;
    white-space: normal;
  }
}