/* =====================================================================
   CodeCraft — /contact (Book a Call). Loaded only on /contact.
   Builds on services.css (.cc-svc tokens, reveals, .cc-mag, .cc-magnet).
   Immersive hero + ballpark estimator + form + scheduler + details.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------- */
.ct-hero{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(118px,15vh,170px) var(--pad) clamp(30px,5vh,56px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,68px);
  align-items:center;min-height:80vh;
}
.ct-hero__text{ max-width:46ch;min-width:0; }
.ct-hero__cta{ display:flex;gap:14px;flex-wrap:wrap;margin-top:30px; }
.ct-hero__cta .cc-btn{ padding:15px 26px;font-size:.98rem; }
.ct-reassure{ list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:26px; }
.ct-reassure li{ display:flex;align-items:center;gap:10px;color:var(--mute);font-size:.92rem; }
.ct-reassure svg{ width:17px;height:17px;color:var(--accent);flex:none; }

.ct-stage{ position:relative;width:100%;aspect-ratio:1;max-width:480px;margin-inline:auto;display:grid;place-items:center; }
.ct-stage__canvas{ position:relative;z-index:1;width:100% !important;height:100% !important;display:block;
  opacity:0;transition:opacity .9s var(--ease-expo); }
.ct-stage.is-live .ct-stage__canvas{ opacity:1; }
.ct-stage__glow{ position:absolute;inset:8%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 48%, color-mix(in srgb,var(--peri) 48%,transparent), transparent 62%);
  filter:blur(34px);opacity:.7; }

/* ---------------------------------------------------------------------
   BALLPARK ESTIMATOR
   ------------------------------------------------------------------- */
.ct-est__panel{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(26px,4vw,40px);border-radius:24px;
  background:linear-gradient(165deg, color-mix(in srgb,var(--peri) 14%,var(--slate-panel)), var(--slate-panel));
  border:1px solid color-mix(in srgb,var(--peri-bright) 22%,transparent);
  display:flex;flex-direction:column;gap:24px;
}
.ct-est__label{ display:block;color:var(--mute);font-size:.68rem;margin-bottom:12px; }
.ct-chips{ display:flex;flex-wrap:wrap;gap:10px; }
.ct-chip{
  appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  padding:11px 16px;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:.9rem;
  color:var(--mute);background:var(--glass);border:1px solid var(--hairline);
  transition:color .25s,background .25s,border-color .25s,transform .25s var(--ease-expo);
}
.ct-chip:hover{ color:var(--bone);transform:translateY(-2px); }
.ct-chip__ic{ display:inline-flex;width:18px;height:18px; }
.ct-chip__ic svg{ width:18px;height:18px; }
.ct-chip.is-active{
  color:var(--bone);background:color-mix(in srgb,var(--peri) 30%,transparent);
  border-color:color-mix(in srgb,var(--peri-bright) 45%,transparent);
}
.ct-chips--sm .ct-chip{ padding:9px 15px;font-size:.86rem; }

.ct-slider{ display:flex;align-items:center;gap:18px; }
.ct-slider input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;outline:none;
  background:linear-gradient(90deg, var(--peri) 0%, var(--peri) var(--fill,40%), rgba(255,255,255,.10) var(--fill,40%));
}
.ct-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:var(--bone);border:3px solid var(--peri);box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .2s var(--ease-expo);
}
.ct-slider input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
.ct-slider input[type=range]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;cursor:pointer;background:var(--bone);border:3px solid var(--peri); }
.ct-slider__out{
  flex:none;min-width:104px;text-align:center;font-family:var(--font-display);font-weight:800;
  font-size:1.05rem;color:var(--accent);padding:7px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
}

.ct-est__summary{ color:var(--bone);font-size:1.04rem;line-height:1.5; }
.ct-est__summary b{ color:var(--accent);font-weight:700; }
.ct-est__use{ align-self:flex-start;padding:13px 22px;font-size:.94rem; }
.ct-est__use svg{ width:16px;height:16px; }

/* ---------------------------------------------------------------------
   FORM + SIDE
   ------------------------------------------------------------------- */
.ct-grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(24px,4vw,48px);align-items:start;
  scroll-margin-top:90px;
}
.ct-form-wrap{
  padding:clamp(26px,4vw,40px);border-radius:24px;
  background:var(--slate-panel);border:1px solid var(--hairline);
}
.ct-form{ display:flex;flex-direction:column;gap:18px; }
.ct-row{ display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.ct-field{ display:flex;flex-direction:column;gap:8px;min-width:0; }
.ct-field__label{ font-size:.8rem;font-weight:600;color:var(--mute); }
.ct-field__label em{ color:var(--accent);font-style:normal; }
.ct-field input,.ct-field textarea,.ct-select select{
  width:100%;font-family:var(--font-body);font-size:.98rem;color:var(--bone);
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);border-radius:12px;
  padding:13px 15px;transition:border-color .25s,background .25s,box-shadow .25s;
}
.ct-field input::placeholder,.ct-field textarea::placeholder{ color:color-mix(in srgb,var(--mute) 75%,transparent); }
.ct-field input:focus,.ct-field textarea:focus,.ct-select select:focus{
  outline:none;border-color:color-mix(in srgb,var(--peri-bright) 55%,transparent);
  background:rgba(255,255,255,.06);box-shadow:0 0 0 3px color-mix(in srgb,var(--peri) 26%,transparent);
}
.ct-field textarea{ resize:vertical;min-height:120px;line-height:1.6; }
.ct-select{ position:relative;display:block; }
.ct-select select{ appearance:none;cursor:pointer;padding-right:40px; }
.ct-select::after{
  content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;pointer-events:none;
  border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:translateY(-70%) rotate(45deg);
}
.ct-form__submit{ align-self:flex-start;padding:15px 28px;font-size:1rem;margin-top:4px; }
.ct-form__submit svg{ width:18px;height:18px; }
.ct-form__fine{ color:var(--mute);font-size:.8rem; }

.ct-sent{
  text-align:center;padding:clamp(26px,4vw,44px);border-radius:18px;
  background:linear-gradient(165deg, color-mix(in srgb,var(--peri) 22%,var(--slate-panel)), var(--slate-panel));
  border:1px solid color-mix(in srgb,var(--peri-bright) 34%,transparent);
}
.ct-sent svg{ width:46px;height:46px;color:var(--accent);margin-bottom:12px; }
.ct-sent h2{ font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--bone);margin-bottom:10px; }
.ct-sent p{ color:var(--mute);line-height:1.6;max-width:46ch;margin-inline:auto; }
.ct-sent a{ color:var(--accent);text-decoration:underline; }

/* Side cards */
.ct-side{ display:flex;flex-direction:column;gap:16px; }
.ct-card{ padding:24px;border-radius:18px;border:1px solid var(--hairline);background:var(--slate-panel); }
.ct-card--book{
  background:linear-gradient(165deg, color-mix(in srgb,var(--peri) 22%,var(--slate-panel)), var(--slate-panel));
  border-color:color-mix(in srgb,var(--peri-bright) 30%,transparent);
}
.ct-card__kicker{ display:block;color:var(--accent);font-size:.66rem;margin-bottom:10px; }
.ct-card--book h3{ font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--bone);margin-bottom:8px; }
.ct-card--book p{ color:var(--mute);font-size:.92rem;line-height:1.5;margin-bottom:16px; }
.ct-card--book .cc-btn{ width:100%;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.ct-card--book .cc-btn svg{ width:16px;height:16px; }

.ct-details{ display:flex;flex-direction:column;gap:4px; }
.ct-detail{ display:flex;align-items:center;gap:13px;padding:11px 8px;border-radius:11px;text-decoration:none;color:var(--bone);transition:background .25s; }
.ct-detail:hover{ background:var(--glass); }
.ct-detail__ic{ width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent); }
.ct-detail__ic svg{ width:20px;height:20px; }
.ct-detail span span{ display:block; }
.ct-detail__k{ color:var(--mute);font-size:.6rem;margin-bottom:2px; }
.ct-details__loc{ color:var(--mute);font-size:.82rem;margin-top:10px;padding:0 8px;line-height:1.5; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width:900px){
  .ct-hero{ grid-template-columns:1fr;min-height:auto;gap:28px;text-align:left; }
  .ct-stage{ order:-1;max-width:320px; }
  .ct-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .ct-row{ grid-template-columns:1fr; }
  .ct-slider{ flex-direction:column;align-items:stretch;gap:12px; }
  .ct-slider__out{ min-width:0; }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ct-stage__canvas{ transition:none; }
  .ct-chip,.ct-slider input[type=range]::-webkit-slider-thumb,.ct-detail{ transition:none; }
}

/* =====================================================================
   LIGHT particles re-skin — dark panels (estimate, form, sent, side cards)
   keep light text inside; the on-background reassurance list goes dark.
   (Hero reuses .svc-* — handled in services.css.)
   ===================================================================== */
.ct-reassure li{ color:#4a5170; }
.ct-est__panel,.ct-form-wrap,.ct-sent,.ct-card{ color:var(--bone); }
/* WhatsApp / Call buttons (replaced the dead scheduler link) */
.ct-btn--ico{ display:inline-flex;align-items:center;gap:8px; }
.ct-btn--ico svg{ width:17px;height:17px;flex:none; }