/* ═══════════════════════════════════════════════════════════════════════
   CONTACT THE CREW
   ═══════════════════════════════════════════════════════════════════════ */

.ct{
  padding:0 var(--pad) 90px;
  padding-left:calc(var(--rail) + var(--pad));
}
@media (max-width:860px){ .ct{ padding-left:var(--pad); } }

.ct-h{
  margin:0 0 18px;
  display:flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.8vw,21px); letter-spacing:.09em;
  text-transform:uppercase; color:var(--cream);
}
.ct-h::before{
  content:''; width:13px; height:13px; flex:none;
  background:var(--gold);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.ct-hero{
  position:relative;
  margin:0 calc(var(--pad) * -1) 26px;
  margin-left:calc((var(--rail) + var(--pad)) * -1);
  min-height:min(62vh, 460px);
  display:grid; place-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--hair-2);
}
@media (max-width:860px){ .ct-hero{ margin-left:calc(var(--pad) * -1); } }

.ct-hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
}
.ct-hero::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(78% 68% at 50% 46%, rgba(4,4,6,.22), rgba(4,4,6,.78) 80%),
    linear-gradient(180deg, rgba(8,8,10,.8), transparent 30%, rgba(8,8,10,.92));
}

.ct-hero-in{
  position:relative; z-index:2;
  padding:calc(var(--bar) + 44px) 22px 52px;
  text-align:center; max-width:660px;
}
.ct-hero-in h1{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,6vw,64px); line-height:1.03;
  letter-spacing:.02em; color:var(--cream);
  text-shadow:0 4px 40px rgba(0,0,0,.9);
}
.ct-hero-in .ornament{ display:block; margin:16px auto 14px; width:120px; color:var(--gold-soft); }
.ct-hero-in .ornament svg{ width:100%; }
.ct-hero-in p{
  margin:0 auto; max-width:46ch;
  color:var(--cream-dim); text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.ct-hero-acts{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.btn-gold{
  background:linear-gradient(180deg,#d9b877,#b8934f);
  border-color:transparent; color:#17130a;
}
.btn-gold:hover{ filter:brightness(1.08); color:#17130a; }

/* ── quick routes ──────────────────────────────────────────────────────── */
.ct-cards{
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
.ct-cards a{
  display:block; height:100%; padding:20px 22px;
  background:var(--panel); border:1px solid var(--hair-2); border-radius:3px;
  text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.ct-cards a:hover{ border-color:var(--gold-soft); transform:translateY(-2px); }
.ct-cards h2{
  margin:0 0 7px;
  font-family:var(--display); font-weight:400; font-size:16px;
  letter-spacing:.05em; color:var(--cream);
}
.ct-cards p{ margin:0; font-size:13px; color:var(--muted); }

/* ── layout ────────────────────────────────────────────────────────────── */
.ct-grid{
  display:grid; gap:18px;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ .ct-grid{ grid-template-columns:1fr; } }

.ct-panel{
  padding:clamp(20px,2.6vw,32px);
  background:var(--panel); border:1px solid var(--hair-2); border-radius:3px;
}
.ct-side{ display:grid; gap:18px; }

/* ── forms ─────────────────────────────────────────────────────────────── */
.ct form label{
  display:block; margin-bottom:16px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-soft);
}
.ct form label em{ font-style:normal; color:#c2452d; }
.ct-opt{ letter-spacing:.1em; color:var(--muted); }

.ct form input,
.ct form select,
.ct form textarea{
  display:block; width:100%; margin-top:8px; padding:13px 15px;
  background:#0a0a0c; border:1px solid var(--hair-2); border-radius:2px;
  color:var(--cream); font:inherit; font-size:14.5px;
  letter-spacing:normal; text-transform:none;
}
.ct form textarea{ resize:vertical; line-height:1.65; }
.ct form input:focus,
.ct form select:focus,
.ct form textarea:focus{ outline:none; border-color:var(--gold-soft); }
.ct form input::placeholder,
.ct form textarea::placeholder{ color:#57534c; }

.ct-two{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .ct-two{ grid-template-columns:1fr; } }

/* The honeypot must be reachable by a robot and invisible to a person —
   `display:none` is the one thing that gets skipped by naive bots. */
.ct-hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.ct-send{
  margin-top:8px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.ct-secure{
  margin:0; display:flex; align-items:center; gap:9px;
  font-size:12px; color:var(--muted); max-width:36ch;
}
.ct-secure svg{ width:16px; height:16px; flex:none; color:var(--gold-soft); }

.ct-msg{ margin:16px 0 0; font-size:13.5px; min-height:1.2em; }
.ct-msg.is-good{ color:#8fae7f; }
.ct-msg.is-bad{ color:#d98b7a; }
.ct-note{ margin:10px 0 0; font-size:12.5px; color:var(--muted); }
.ct-note a{ color:var(--gold); }

/* ── tracker ───────────────────────────────────────────────────────────── */
.ct-track form{ margin-top:14px; }
.ct-track .btn{ width:100%; text-align:center; }

.ct-found{ margin-top:18px; padding-top:18px; border-top:1px solid var(--hair-2); }
.ct-found-ref{
  margin:0; font-family:var(--display); font-size:19px;
  letter-spacing:.1em; color:var(--gold);
}
.ct-found-stage{ margin:8px 0 16px; color:var(--cream); font-size:14.5px; }
.ct-found-meta{ list-style:none; margin:0; padding:0; font-size:13px; }
.ct-found-meta li{
  display:flex; justify-content:space-between; gap:16px;
  padding:6px 0; border-bottom:1px solid rgba(233,226,212,.05);
}
.ct-found-meta span:first-child{ color:var(--muted); }
.ct-sub{
  margin:16px 0 8px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-soft);
}
.ct-ships{ list-style:none; margin:0; padding:0; font-size:13px; }
.ct-ships li{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; }
.ct-ships a{ color:var(--gold); word-break:break-all; }
.ct-ships code{ color:var(--cream-dim); word-break:break-all; }

/* ── facts ─────────────────────────────────────────────────────────────── */
.ct-fact{ padding:16px 0; border-bottom:1px solid rgba(233,226,212,.06); }
.ct-fact:first-child{ padding-top:0; }
.ct-fact:last-child{ border-bottom:0; padding-bottom:0; }
.ct-fact h3{
  margin:0 0 7px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-soft); font-weight:400;
}
.ct-fact p{ margin:0; font-size:13.5px; color:var(--cream-dim); }
.ct-fact b{ color:var(--cream); font-weight:400; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.ct-faq{ margin-top:32px; }
.ct-faq-grid{
  display:grid; gap:0 26px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  border-top:1px solid var(--hair-2);
}
.ct-faq details{ border-bottom:1px solid var(--hair-2); }
.ct-faq summary{
  list-style:none; cursor:pointer; padding:18px 2px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:14px; color:var(--cream-dim);
  transition:color .25s var(--ease);
}
.ct-faq summary::-webkit-details-marker{ display:none; }
.ct-faq summary::after{
  content:'+'; color:var(--gold); font-size:18px; line-height:1; flex:none;
  transition:transform .3s var(--ease);
}
.ct-faq details[open] summary{ color:var(--cream); }
.ct-faq details[open] summary::after{ transform:rotate(45deg); }
.ct-faq summary:hover{ color:var(--cream); }
.ct-faq details > div{ padding:0 2px 20px; }
.ct-faq details p{ margin:0; font-size:13.5px; color:var(--muted); max-width:56ch; }

.ct-shoplink{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none; margin-right:6px;
}
.ct-shoplink:hover{ color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  .ct-cards a:hover{ transform:none; }
}