/* ===== Contact / Let's Connect page — builds on home.css (vars, header, nav, button, button-solid, ico-arrow, footer) ===== */
.swrap{width:min(var(--max),calc(100% - 64px));margin:auto}
.nav a.active{color:var(--teal)}
.ct h1,.ct h2,.ct h3{font-family:Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.012em;margin:0}
.ct .sq{display:inline-block;width:.22em;height:.22em;background:var(--teal);border-radius:3px;margin-left:.1em;vertical-align:baseline}
.tl{color:var(--teal)}
.ct section{position:relative}

/* ---------- HERO ---------- */
.ct-hero{overflow:hidden;display:flex;align-items:center;min-height:600px;padding:150px 0 56px;background:linear-gradient(90deg,#03111e 0%,#03111e 34%,rgba(3,17,30,.72) 50%,rgba(3,17,30,.05) 100%)}
.ct-hero-photo{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:0;background:url('assets/images/jd-bike.jpg?v=p1') center 8%/cover;filter:saturate(1.05) contrast(1.04);-webkit-mask-image:linear-gradient(90deg,transparent 6%,#000 44%);mask-image:linear-gradient(90deg,transparent 6%,#000 44%)}
.ct-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#03111e 0%,#03111e 38%,rgba(3,17,30,.82) 48%,rgba(3,17,30,.45) 60%,rgba(3,17,30,.12) 76%,transparent 90%)}
.ct-hero-inner{position:relative;z-index:2}
.ct-hero h1{font-size:clamp(54px,6.4vw,104px);line-height:.96;font-weight:700;margin:14px 0 0}
.ct-hero-lead{font-size:19px;line-height:1.5;color:#e6ecef;margin:24px 0 0;font-weight:500}
.ct-hero-sub{font-size:14.5px;line-height:1.65;color:#9fb0b8;margin:18px 0 0}
.ct-hero-sign{position:absolute;right:9%;bottom:24%;width:200px;max-width:22vw;opacity:.9;z-index:3;pointer-events:none}
.ct-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px;max-width:600px}
.ct-feat{display:flex;flex-direction:column;gap:14px;max-width:none}
.ct-feat-ic{width:46px;height:46px;display:inline-flex}
.ct-feat-ic svg{width:100%;height:100%;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(19,209,207,.5))}
.ct-feat h4{font-size:13px;line-height:1.3;letter-spacing:.02em;margin:0;font-weight:700;text-transform:none}

/* ---------- FORM + DIRECT ---------- */
.ct-form-section{background:linear-gradient(180deg,#061827,#04131f);border-top:1px solid var(--line);padding:60px 0}
.ct-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.ct-form-col h2,.ct-direct-col h2{font-size:26px;margin:0 0 12px}
.ct-sub{font-size:14px;color:#aab4bb;line-height:1.6;margin:0 0 26px}
.ct-field{display:block;margin-bottom:16px;position:relative}
.ct-field input,.ct-field textarea,.ct-field select{width:100%;background:rgba(3,12,22,.55);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:15px 16px;color:#fff;font-size:14px;font-family:inherit;resize:none}
.ct-field select{appearance:none;-webkit-appearance:none;color:#8b97a0;cursor:pointer}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#8b97a0}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{outline:none;border-color:rgba(19,209,207,.7);box-shadow:0 0 0 2px rgba(19,209,207,.16)}
.ct-caret{position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid #8b97a0;border-bottom:2px solid #8b97a0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ct-form .button-solid{width:100%;margin-top:6px;padding:16px}
.ct-secure{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fb0b8;margin:16px 0 0}
.ct-lock{width:15px;height:15px;color:var(--teal);display:inline-flex}
.ct-lock svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* direct */
.ct-direct{list-style:none;margin:0 0 30px;padding:0}
.ct-direct li{display:flex;gap:18px;align-items:center;padding:14px 0}
.ct-di{flex:0 0 auto;width:46px;height:46px;border:1px solid rgba(19,209,207,.35);border-radius:10px;display:grid;place-items:center;color:var(--teal);box-shadow:0 0 16px rgba(19,209,207,.1) inset}
.ct-di svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-direct h4{font-size:14px;margin:0 0 4px;text-transform:none;font-family:Inter,sans-serif;font-weight:700;color:#fff}
.ct-direct a,.ct-direct span{font-size:13.5px;color:#9fb0b8}
.ct-direct a:hover{color:var(--teal)}
.ct-quote{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.18));padding:28px 30px;text-align:center}
.ct-quote p{font-size:16px;line-height:1.5;color:#dbe2e6;margin:0 0 12px;font-weight:500}
.ct-quote-sign{height:42px;width:auto;opacity:.85;filter:brightness(0) saturate(100%) invert(72%) sepia(64%) saturate(528%) hue-rotate(130deg) brightness(95%)}

/* ---------- WHAT I HELP WITH (white) ---------- */
.ct-help{background:#f4f3ef;color:var(--ink);padding:48px 0;border-top:1px solid var(--line)}
.ct-help-grid{position:relative;display:grid;grid-template-columns:1.5fr repeat(4,1fr);align-items:center;gap:0 28px}
.ct-help-grid::before{content:"";position:absolute;inset:-18px 0;background:radial-gradient(ellipse 62% 150% at 66% 50%,rgba(19,209,207,.14),rgba(19,209,207,.04) 52%,transparent 75%);filter:blur(16px);pointer-events:none;z-index:0}
.ct-help-grid>*{position:relative;z-index:1}
.ct-help-head{padding-right:24px}
.ct-help-head .section-kicker{color:#0c9aa1}
.ct-help-head h2{font-size:28px;line-height:1.14;margin:12px 0 0;color:#0a1824}
.ct-help-head .short-rule{background:var(--teal)}
.ct-help-item{text-align:center;padding:0 14px;border-left:1px solid #d8d6d0}
.ct-help-ic{width:42px;height:42px;display:inline-flex;margin:0 auto 14px}
.ct-help-ic svg{width:100%;height:100%;fill:none;stroke:#0c9aa1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(19,209,207,.4))}
.ct-help-item h3{font-family:Inter,sans-serif;font-size:14px;letter-spacing:.02em;margin:0 0 8px;color:#0a1824;text-transform:uppercase}
.ct-help-item p{font-size:13px;line-height:1.5;color:#5a6670;margin:0}

/* ---------- BUILT BY EXPERIENCE ---------- */
.ct-built{overflow:hidden;background:#04131f;border-top:1px solid var(--line);min-height:420px;display:flex;align-items:center;padding:60px 0}
.ct-built-photo{position:absolute;top:0;left:0;bottom:0;width:46%;z-index:0;background:url('assets/images/jd-laptop.jpg?v=p1') center 48%/cover}
.ct-built::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(270deg,#04131f 0%,#04131f 50%,rgba(4,19,31,.5) 62%,transparent 80%)}
.ct-built-inner{position:relative;z-index:2;display:flex;justify-content:flex-end}
.ct-built-copy{max-width:600px;position:relative;padding-left:30px}
.ct-built-copy::before{content:"\201C";position:absolute;left:-6px;top:36px;font-family:Oswald,serif;font-size:60px;color:var(--teal);line-height:0}
.ct-built-copy blockquote{font-size:19px;line-height:1.5;color:#e6ecef;margin:14px 0 0;font-weight:400;font-family:Inter,sans-serif}
.ct-built-close{font-size:15px;color:#bcc6cc;margin:18px 0 0}
.ct-built-sign{height:46px;width:auto;margin-top:18px;opacity:.85;filter:brightness(0) saturate(100%) invert(72%) sepia(64%) saturate(528%) hue-rotate(130deg) brightness(95%)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .ct-hero-photo{width:52%;opacity:.6}
  .ct-form-grid{grid-template-columns:1fr;gap:48px}
  .ct-help-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .ct-help-head{grid-column:1/-1;text-align:center;padding:0}
  .ct-help-item{border-left:0}
  .ct-built-photo{width:100%;opacity:.28}
  .ct-built-inner{justify-content:flex-start}
}
@media(max-width:680px){
  .swrap{width:min(var(--max),calc(100% - 34px))}
  .ct-hero{min-height:520px;padding-top:120px}
  .ct-hero-photo{inset:0;width:100%;opacity:.32}
  .ct-feats{grid-template-columns:1fr 1fr;gap:26px 22px;max-width:none}
  .ct-help-grid{grid-template-columns:1fr 1fr}
}