/* ── JS na chale to bhi content nazar aana chahiye ──
   Hide-rules sirf tab lagti hain jab har section ka inline bootstrap script
   `.cx-js` laga deta hai. Agar koi caching/optimization plugin external JS tor de,
   to content bilkul dikhta rehta hai — sirf animation nahi hoti. */

/* Connex Contact Form — routing cards + multi-step form.
   Source: tested section files. Edit karna ho to plugin ke andar hi karein. */

:root{
  --cx-green:#9EC23C; --cx-green-d:#8DB030; --cx-forest:#3E4B20; --cx-graphite:#1A1D19;
  --cx-slate:#5B6459; --cx-line:#DDE3D2; --cx-mist:#F4F6EF; --cx-teal:#1F7A6B;
  --cx-max:1200px; --cx-r:8px;
  --cx-display:'Inter Tight','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --cx-body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --cx-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --cx-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── routing cards ── */
.cx-t1,
.cx-t1 *,
.cx-t1 *::before,
.cx-t1 *::after{box-sizing:border-box}

.cx-t1{background:#fff;font-family:var(--cx-body);color:var(--cx-graphite);font-size:17px;line-height:1.65;padding:80px 0 70px}
.cx-t1 .cx-wrap{max-width:var(--cx-max);margin:0 auto;padding:0 32px}
.cx-t1 .cx-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cx-green-d);margin:0 0 12px}
.cx-t1 h2{font-family:var(--cx-display);font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 34px;max-width:22ch}

.cx-t1 .cx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cx-t1 .cx-route{background:#fff;border:1px solid var(--cx-line);border-radius:var(--cx-r);padding:24px;
  text-align:left;cursor:pointer;font-family:var(--cx-body);color:inherit;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .25s var(--cx-ease),transform .25s var(--cx-ease),box-shadow .25s var(--cx-ease)}
.cx-t1 .cx-route::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cx-green);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s var(--cx-ease)}
.cx-t1 .cx-route:hover{border-color:var(--cx-green);transform:translateY(-4px);box-shadow:0 12px 28px rgba(26,29,25,.09)}
.cx-t1 .cx-route:hover::before{transform:scaleY(1);transform-origin:top}
.cx-t1 .cx-route.cx-on{border-color:var(--cx-forest);box-shadow:0 0 0 2px rgba(62,75,32,.14)}
.cx-t1 .cx-route.cx-on::before{transform:scaleY(1);background:var(--cx-forest)}

.cx-t1 .cx-n{font-family:var(--cx-mono);font-size:11px;letter-spacing:.08em;color:var(--cx-green-d);
  display:block;margin-bottom:14px}
.cx-t1 .cx-route h3{font-family:var(--cx-display);font-size:18px;line-height:1.22;margin:0 0 8px;letter-spacing:-.01em}
.cx-t1 .cx-route p{font-size:14px;color:var(--cx-slate);margin:0 0 18px;flex:1}
.cx-t1 .cx-tlink{font-family:var(--cx-display);font-weight:600;font-size:14.5px;color:var(--cx-forest);
  display:inline-flex;gap:6px;align-items:center;margin-top:auto}
.cx-t1 .cx-ar{transition:transform .22s var(--cx-ease)}
.cx-t1 .cx-route:hover .cx-tlink{color:var(--cx-green-d)}
.cx-t1 .cx-route:hover .cx-ar{transform:translateX(5px)}
.cx-t1 .cx-route.cx-on .cx-tlink{color:var(--cx-forest)}

.cx-t1.cx-js [data-cx-in]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--cx-ease),transform .7s var(--cx-ease)}
.cx-t1 [data-cx-in].cx-in{opacity:1;transform:none}
.cx-t1 :focus-visible{outline:3px solid var(--cx-forest);outline-offset:3px}

@media(max-width:1080px){.cx-t1 .cx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .cx-t1{padding:56px 0 46px}
  .cx-t1 .cx-wrap{padding:0 20px}
  .cx-t1 .cx-grid{grid-template-columns:1fr;gap:12px}
  .cx-t1 .cx-route{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  .cx-t1 *{transition:none!important;animation:none!important}
  .cx-t1 [data-cx-in]{opacity:1;transform:none}
}

/* ── form + direct contact ── */
.cx-t2,
.cx-t2 *,
.cx-t2 *::before,
.cx-t2 *::after{box-sizing:border-box}

.cx-t2{background:var(--cx-mist);font-family:var(--cx-body);color:var(--cx-graphite);font-size:17px;
  line-height:1.65;padding:80px 0 88px}
.cx-t2 .cx-wrap{max-width:var(--cx-max);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:start}

/* ── carried-over banner ── */
.cx-t2 .cx-carry{grid-column:1/-1;display:none;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--cx-line);border-left:4px solid var(--cx-green);border-radius:0 var(--cx-r) var(--cx-r) 0;
  padding:14px 20px;margin-bottom:-16px;font-size:14.5px;color:var(--cx-slate)}
.cx-t2 .cx-carry.cx-show{display:flex;animation:cx-t2pop .4s var(--cx-ease)}
@keyframes cx-t2pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cx-t2 .cx-carry b{color:var(--cx-graphite)}

/* ── form card ── */
.cx-t2 .cx-card{background:#fff;border:1px solid var(--cx-line);border-radius:var(--cx-r);padding:32px;
  box-shadow:0 10px 34px rgba(26,29,25,.05)}

.cx-t2 .cx-prog{display:flex;gap:6px;margin-bottom:20px}
.cx-t2 .cx-pseg{flex:1;height:4px;border-radius:100px;background:#E9EDE0;cursor:default;position:relative;
  overflow:hidden}
.cx-t2 .cx-pseg i{position:absolute;inset:0;background:var(--cx-green);border-radius:100px;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--cx-ease)}
.cx-t2 .cx-pseg.cx-done i,
.cx-t2 .cx-pseg.cx-now i{transform:scaleX(1)}
.cx-t2 .cx-pseg.cx-done{cursor:pointer}
.cx-t2 .cx-pseg.cx-done i{background:var(--cx-forest)}

.cx-t2 .cx-stepline{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cx-green-d);margin:0 0 10px}
.cx-t2 .cx-card h3{font-family:var(--cx-display);font-size:25px;line-height:1.15;letter-spacing:-.02em;margin:0 0 6px}
.cx-t2 .cx-blurb{color:var(--cx-slate);font-size:15px;margin:0 0 24px}
.cx-t2 .cx-blurb i{font-style:normal;color:var(--cx-red)}

.cx-t2 .cx-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cx-t2 .cx-field{min-width:0}
.cx-t2 .cx-field.cx-full{grid-column:1/-1}
.cx-t2 .cx-field label{display:block;font-size:13.5px;font-weight:600;color:var(--cx-slate);margin-bottom:6px}
.cx-t2 .cx-field label i{font-style:normal;color:var(--cx-red)}
.cx-t2 .cx-field input,
.cx-t2 .cx-field select,
.cx-t2 .cx-field textarea{width:100%;font-family:var(--cx-body);font-size:14.5px;padding:0 12px;
  border:1px solid var(--cx-line);border-radius:4px;background:#fff;color:var(--cx-graphite);
  transition:border-color .2s var(--cx-ease),box-shadow .2s var(--cx-ease)}
.cx-t2 .cx-field input,
.cx-t2 .cx-field select{height:44px}
.cx-t2 .cx-field select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6459' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.cx-t2 .cx-field textarea{padding:11px 12px;resize:vertical;min-height:96px;line-height:1.55}
.cx-t2 .cx-field input:focus,
.cx-t2 .cx-field select:focus,
.cx-t2 .cx-field textarea:focus{outline:none;border-color:var(--cx-green);box-shadow:0 0 0 3px rgba(158,194,60,.24)}
.cx-t2 .cx-field small{display:block;font-size:12.5px;color:var(--cx-slate);margin-top:5px}
.cx-t2 .cx-field .cx-err{display:none;font-size:12.5px;color:var(--cx-red);font-weight:600;margin-top:5px}
.cx-t2 .cx-field.cx-bad input,
.cx-t2 .cx-field.cx-bad select,
.cx-t2 .cx-field.cx-bad textarea{border-color:var(--cx-red)}
.cx-t2 .cx-field.cx-bad .cx-err{display:block}
.cx-t2 .cx-field.cx-bad small{display:none}

/* ── review step ── */
.cx-t2 .cx-review{border:1px solid var(--cx-line);border-radius:var(--cx-r);overflow:hidden}
.cx-t2 .cx-rgroup{border-bottom:1px solid var(--cx-line)}
.cx-t2 .cx-rgroup:last-child{border-bottom:0}
.cx-t2 .cx-rhead{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--cx-mist);padding:10px 16px;font-family:var(--cx-mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cx-slate)}
.cx-t2 .cx-redit{background:none;border:0;font-family:var(--cx-display);font-weight:600;font-size:12px;
  color:var(--cx-forest);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cx-t2 .cx-rrow{display:flex;justify-content:space-between;gap:20px;padding:10px 16px;font-size:14px;
  border-top:1px solid var(--cx-line)}
.cx-t2 .cx-rrow span:first-child{color:var(--cx-slate);flex:0 0 42%}
.cx-t2 .cx-rrow span:last-child{font-weight:600;text-align:right;word-break:break-word}
.cx-t2 .cx-rrow em{font-style:normal;font-weight:400;color:var(--cx-slate)}

.cx-t2 .cx-consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:14px;
  color:var(--cx-slate)}
.cx-t2 .cx-consent input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--cx-forest);
  cursor:pointer}
.cx-t2 .cx-consent.cx-bad{color:var(--cx-red)}

/* ── actions ── */
.cx-t2 .cx-actions{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}
.cx-t2 .cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--cx-display);font-size:15px;font-weight:600;height:48px;padding:0 26px;
  border:0;border-radius:var(--cx-r);cursor:pointer;position:relative;overflow:hidden;
  transition:background .18s var(--cx-ease),transform .18s var(--cx-ease)}
.cx-t2 .cx-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg)}
.cx-t2 .cx-btn:hover::after{animation:cx-t2sheen .7s var(--cx-ease) forwards}
@keyframes cx-t2sheen{to{left:140%}}
.cx-t2 .cx-btn:hover{transform:translateY(-2px)}
.cx-t2 .cx-primary{background:var(--cx-green);color:var(--cx-forest)}
.cx-t2 .cx-primary:hover{background:var(--cx-green-d)}
.cx-t2 .cx-back{background:none;border:1px solid var(--cx-line);color:var(--cx-slate)}
.cx-t2 .cx-back:hover{border-color:var(--cx-forest);color:var(--cx-forest)}
.cx-t2 .cx-trust{font-size:12.5px;color:var(--cx-slate);margin:16px 0 0}

/* ── panel swap ── */
.cx-t2 .cx-step{display:none}
.cx-t2 .cx-step.cx-live{display:block;animation:cx-t2in .35s var(--cx-ease)}
@keyframes cx-t2in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── done state ── */
.cx-t2 .cx-done-panel{display:none}
.cx-t2 .cx-done-panel.cx-live{display:block;animation:cx-t2in .4s var(--cx-ease)}
.cx-t2 .cx-tick{width:52px;height:52px;border-radius:50%;background:var(--cx-green);display:grid;
  place-items:center;margin-bottom:18px}
.cx-t2 .cx-tick::after{content:"";width:12px;height:22px;border:solid var(--cx-forest);border-width:0 3px 3px 0;
  transform:rotate(45deg) translate(-2px,-2px)}
.cx-t2 .cx-summary{font-family:var(--cx-mono);font-size:12.5px;line-height:1.7;background:var(--cx-mist);
  border:1px solid var(--cx-line);border-radius:var(--cx-r);padding:18px;white-space:pre-wrap;
  max-height:280px;overflow:auto;margin:18px 0}

/* ── sidebar ── */
.cx-t2 .cx-side{position:sticky;top:100px}
.cx-t2 .cx-side h3{font-family:var(--cx-display);font-size:20px;margin:0 0 14px;letter-spacing:-.01em}
.cx-t2 .cx-spec{border-top:1px solid var(--cx-line)}
.cx-t2 .cx-spec div{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding:11px 0;
  border-bottom:1px solid var(--cx-line)}
.cx-t2 .cx-spec span:first-child{color:var(--cx-slate)}
.cx-t2 .cx-spec span:last-child{font-weight:600;text-align:right}
.cx-t2 .cx-spec a{color:var(--cx-forest);text-decoration:none;border-bottom:1px solid var(--cx-line);
  transition:border-color .18s var(--cx-ease)}
.cx-t2 .cx-spec a:hover{border-color:var(--cx-green)}
.cx-t2 .cx-notice{margin-top:22px;background:#fff;border:1px solid var(--cx-line);border-left:4px solid var(--cx-teal);
  border-radius:0 var(--cx-r) var(--cx-r) 0;padding:18px 20px;font-size:14px;color:var(--cx-slate)}
.cx-t2 .cx-notice b{display:block;color:var(--cx-graphite);font-family:var(--cx-display);font-size:15.5px;
  margin-bottom:5px}
.cx-t2 .cx-notice button,
.cx-t2 .cx-notice a{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--cx-forest);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cx-t2 .cx-notice a:hover,
.cx-t2 .cx-notice button:hover{color:var(--cx-green-d)}

.cx-t2 .cx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cx-t2 .cx-senderr{display:none;margin:16px 0 0;padding:14px 18px;border-radius:var(--cx-r);
  background:#F7ECEC;border:1px solid #E2C9C9;border-left:4px solid var(--cx-red);
  color:#7A2020;font-size:14.5px;font-weight:500}
.cx-t2 .cx-senderr.cx-show{display:block}

/* sidebar chhupi ho to form poori chaurai le le */
.cx-t2.cx-noside .cx-wrap{grid-template-columns:1fr}

/* "Direct contact" panel akela istemal ho (apna shortcode) */
.cx-t2.cx-solo{padding:56px 0}
.cx-t2.cx-solo .cx-wrap{grid-template-columns:1fr}
.cx-t2.cx-solo .cx-side{position:static;max-width:560px}

.cx-t2.cx-js [data-cx-in]{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--cx-ease),transform .7s var(--cx-ease)}
.cx-t2 [data-cx-in].cx-in{opacity:1;transform:none}
.cx-t2 :focus-visible{outline:3px solid var(--cx-forest);outline-offset:2px}

/* show_contact="no" ho to form poori chaurai le leta hai */
.cx-t2.cx-noside .cx-wrap{grid-template-columns:1fr;max-width:860px}

/* [connex_direct_contact] — panel akela, kahin bhi */
.cx-t2.cx-solo{padding:64px 0}
.cx-t2.cx-solo .cx-wrap{grid-template-columns:1fr;max-width:760px}
.cx-t2.cx-solo .cx-side{position:static}
.cx-t2.cx-solo .cx-notice a{color:var(--cx-forest);font-weight:600}

@media(max-width:980px){
  .cx-t2 .cx-wrap{grid-template-columns:1fr;gap:32px}
  .cx-t2 .cx-side{position:static}
}
@media(max-width:600px){
  .cx-t2{padding:52px 0 60px}
  .cx-t2 .cx-wrap{padding:0 20px}
  .cx-t2 .cx-card{padding:22px}
  .cx-t2 .cx-fields{grid-template-columns:1fr}
  .cx-t2 .cx-actions .cx-btn{flex:1}
  .cx-t2 .cx-rrow{flex-direction:column;gap:2px}
  .cx-t2 .cx-rrow span:last-child{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .cx-t2 *{animation:none!important;transition:none!important}
  .cx-t2 [data-cx-in]{opacity:1;transform:none}
}

/* ── agar JS bilkul na chale ──
   Fields JavaScript banata hai, is liye card khali reh jata. Ye message us khali
   box ki jagah leta hai. Bootstrap script isay foran chhupa deta hai aur sirf tab
   dobara dikhata hai jab 3 second tak form na bane. */
.cx-t2 .cx-fallback{background:var(--cx-mist);border-left:4px solid var(--cx-red);
  border-radius:0 var(--cx-r) var(--cx-r) 0;padding:22px 24px}
.cx-t2 .cx-fallback b{display:block;font-family:var(--cx-display);font-size:17px;margin-bottom:6px}
.cx-t2 .cx-fallback p{margin:0 0 16px;color:var(--cx-slate);font-size:15px;max-width:60ch}
.cx-t2.cx-js .cx-fallback{display:none}
.cx-t2.cx-js.cx-dead .cx-fallback{display:block}

.cx-t2 .cx-fbdetail{font-family:var(--cx-mono);font-size:12px;color:var(--cx-slate);
  margin:14px 0 0;word-break:break-word}
.cx-t2 .cx-fbdetail:empty{display:none}