/* PrimeLayer — "See our work" gallery.
   Depends on /assets/site.css for tokens, header/nav, buttons, fonts, and .reveal. */

/* ---------- hero ---------- */
.sw-hero { position: relative; overflow: hidden; text-align: center; padding: 88px 0 60px; border-bottom: 1px solid var(--line); }
.sw-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(780px 380px at 50% -8%, rgba(52,198,214,.18), transparent 62%),
    radial-gradient(640px 420px at 84% 26%, rgba(63,123,255,.10), transparent 60%);
}
.sw-hero > .wrap { position: relative; z-index: 1; }
.sw-hero h1 { font-size: clamp(34px, 5.4vw, 62px); font-weight: 800; letter-spacing: -.035em; max-width: 20ch; margin: 16px auto 0; }
.sw-hero h1 .t { color: var(--teal); }
.sw-hero p.sub { color: var(--ink-2); font-size: clamp(16px, 2vw, 19px); max-width: 62ch; margin: 20px auto 0; line-height: 1.6; }
.sw-hero .cta { margin-top: 32px; display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* confidentiality note */
.sw-note { margin: 30px auto 0; max-width: 660px; display: flex; align-items: flex-start; gap: 10px; justify-content: center;
  font-size: 13px; color: var(--ink-2); border: 1px solid var(--line-2); background: rgba(52,198,214,.05);
  border-radius: 14px; padding: 12px 18px; text-align: left; }
.sw-note svg { flex: none; color: var(--teal); margin-top: 1px; }
.sw-note b { color: var(--ink); font-weight: 600; }

/* ---------- groups + grid ---------- */
.groups { padding: 62px 0 30px; }
.group { margin-bottom: 48px; }
.group > h2 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-3); font-weight: 500; margin: 0 0 20px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* ---------- card ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; min-height: 190px;
  border-radius: 18px; border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--panel), var(--bg-1));
  transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.card::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent); opacity: 0; transition: opacity .24s; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px 160px at 50% -20%, rgba(52,198,214,.12), transparent 70%); opacity: 0; transition: opacity .24s; }
.card:hover { transform: translateY(-6px); border-color: var(--line-2);
  box-shadow: 0 26px 55px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(52,198,214,.14); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card .top { display: flex; align-items: center; gap: 13px; }
.card .glyph { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 20px;
  color: #04121a; font-weight: 800; flex: none; background: linear-gradient(135deg, var(--teal-2), var(--teal));
  box-shadow: 0 10px 22px -8px rgba(52,198,214,.55); transition: transform .3s ease; }
.card:hover .glyph { animation: floaty 2.6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.card p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.card .try { color: var(--teal-2); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.card .try .arr { transition: transform .18s ease; }
.card:hover .try .arr { transform: translateX(4px); }
.card.dash .glyph { background: linear-gradient(135deg, #6fe4ef, #3f7bff); box-shadow: 0 10px 22px -8px rgba(63,123,255,.5); }

/* ---------- intake form ---------- */
.sw-intake { border-top: 1px solid var(--line); padding: 78px 0 40px; position: relative; overflow: hidden; }
.sw-intake::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 300px at 50% 0%, rgba(52,198,214,.10), transparent 60%); }
.sw-intake .wrap { position: relative; z-index: 1; }
.sw-intake .lead { text-align: center; max-width: 620px; margin: 0 auto 34px; }
.sw-intake .lead h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.sw-intake .lead p { color: var(--ink-2); font-size: 17px; margin: 14px 0 0; }
.sw-form { max-width: 680px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: 22px; padding: 30px 30px 26px;
  background: linear-gradient(180deg, var(--panel), var(--bg-1)); box-shadow: 0 30px 70px -34px rgba(0,0,0,.8); }
@media (max-width: 540px) { .sw-form { padding: 22px 18px; } }
.sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .sw-row { grid-template-columns: 1fr; } }
.sw-field { margin-top: 14px; }
.sw-field:first-child, .sw-row .sw-field { margin-top: 0; }
.sw-row + .sw-field { margin-top: 14px; }
.sw-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.sw-field .opt { color: var(--ink-3); font-weight: 400; }
.sw-input, .sw-select, .sw-textarea {
  width: 100%; background: rgba(8,17,31,.62); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 12px 14px; color: var(--ink); font-family: var(--body); font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sw-input::placeholder, .sw-textarea::placeholder { color: var(--ink-3); }
.sw-input:focus, .sw-select:focus, .sw-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(52,198,214,.14); }
.sw-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.sw-select { appearance: none; cursor: pointer; padding-right: 36px; background-repeat: no-repeat; background-position: right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb3ca' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sw-select option { background: #0d1a2e; color: var(--ink); }
.sw-submit { margin-top: 20px; }
.sw-submit .btn { width: 100%; justify-content: center; font-size: 16px; padding: 15px 22px; }
.sw-submit .btn[disabled] { opacity: .6; cursor: default; transform: none; }
.sw-formnote { margin-top: 12px; font-size: 13.5px; text-align: center; min-height: 1em; color: var(--ink-2); }
.sw-formnote.err { color: #ff9b9b; }
.sw-fine { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

.sw-success { display: none; text-align: center; padding: 20px 6px; }
.sw-success.show { display: block; }
.sw-success .chk { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(52,198,214,.12); border: 1px solid rgba(52,198,214,.35); }
.sw-success h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sw-success p { color: var(--ink-2); font-size: 15px; margin: 12px auto 0; max-width: 42ch; }
.sw-success .acts { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- footer ---------- */
.sw-foot { border-top: 1px solid var(--line); padding: 34px 0; margin-top: 40px; display: flex; align-items: center; gap: 14px;
  color: var(--ink-3); font-size: 13px; flex-wrap: wrap; }
.sw-foot .sp { flex: 1; }
.sw-foot a { color: var(--ink-2); } .sw-foot a:hover { color: var(--teal-2); }