.elementor-kit-1071{--e-global-color-primary:#F2F2F0;--e-global-color-secondary:#A3A8B0;--e-global-color-text:#F2F2F0;--e-global-color-accent:#C24703;--e-global-color-1d42a72:#F27A2A;--e-global-color-0ba9ce4:#17191C;--e-global-color-fe1b5bf:#33363C;--e-global-color-91e6525:#A9A9A9;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:800;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:700;background-color:#17191C;}.elementor-kit-1071 button:hover,.elementor-kit-1071 button:focus,.elementor-kit-1071 input[type="button"]:hover,.elementor-kit-1071 input[type="button"]:focus,.elementor-kit-1071 input[type="submit"]:hover,.elementor-kit-1071 input[type="submit"]:focus,.elementor-kit-1071 .elementor-button:hover,.elementor-kit-1071 .elementor-button:focus{background-color:#F7F7F721;}.elementor-kit-1071 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   JCWS redesign: site CSS (DARK edition)
   Paste into: Elementor > Site Settings > Custom CSS
   (or Appearance > Customize > Additional CSS)
   Classes go in each element's Advanced > CSS Classes field.
   Replaces jcws-site.css — use this one, not the original.
   ========================================================= */

:root{
  --jc-ink:#F2F2F0;        /* light text on dark */
  --jc-muted:#A3A8B0;      /* secondary text */
  --jc-paper:#17191C;      /* page background */
  --jc-surface:#202226;    /* cards, alternate sections */
  --jc-line:#33363C;       /* dividers */
  --jc-on-orange:#1C1D20;  /* dark text on orange blocks */
  --jc-orange:#F27A2A;     /* logo orange, brightened for dark backgrounds */
  --jc-orange-lt:#F27A2A;  /* orange text on dark */
  --jc-btn:#C24703;        /* logo's shaded orange: buttons, links, focus */
  --jc-btn-hover:#A93D02;
  --jc-btn-shadow:#7E2E02;
  --jc-tint:#3A2518;
  --jc-silver:#A9A9A9;
  --jc-deep-2:#26282D;
}

/* ---------- Type: Archivo expanded headings ----------
   Needs the Archivo width-axis font link from jcws-snippet-1-fonts.html */
body{ -webkit-font-smoothing:antialiased; }
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
.jc-wide{ font-stretch:118%; letter-spacing:-.02em; }
.jc-hero-title .elementor-heading-title{ font-stretch:115%; letter-spacing:-.03em; line-height:.98; }
.jc-proof .elementor-heading-title{ font-stretch:122%; letter-spacing:-.03em; }

/* ---------- Buttons: orange "pressable" ---------- */
.jc-btn .elementor-button{
  box-shadow:0 6px 0 -2px var(--jc-btn-shadow);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.jc-btn .elementor-button:hover{ background-color:var(--jc-btn-hover); transform:translateY(-2px); box-shadow:0 8px 0 -2px var(--jc-btn-shadow); }
.jc-btn .elementor-button:active{ transform:translateY(2px); box-shadow:0 2px 0 -2px var(--jc-btn-shadow); }
.jc-btn-line .elementor-button{ background:transparent; box-shadow:inset 0 0 0 2px var(--jc-line); }
.jc-btn-line .elementor-button:hover{ box-shadow:inset 0 0 0 2px var(--jc-ink); }

/* ---------- Header: shrink + blur once sticky ----------
   Header container: Motion Effects > Sticky: Top, Effects Offset: 20 */
.jc-header{ transition:background-color .3s ease, box-shadow .3s ease, min-height .3s ease; border:0 !important; box-shadow:none; }
.jc-header.elementor-sticky--effects{
  background-color:rgba(23,25,28,.88) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:none;
  min-height:66px !important;
}
.jc-nav .elementor-nav-menu--main .elementor-item::after{ background-color:var(--jc-orange) !important; }

/* ---------- Hero heading: line-mask reveal ----------
   Heading widget title (HTML allowed):
   <span class="ln"><span>Websites for small businesses,</span></span><span class="ln"><span>built right and kept running.</span></span> */
.jc-hero-title .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.jc-hero-title .ln > span{ display:inline-block; transform:translateY(105%); animation:jcLineUp .9s cubic-bezier(.2,.8,.2,1) forwards; }
.jc-hero-title .ln:nth-child(2) > span{ animation-delay:.12s; }
@keyframes jcLineUp{ to{ transform:none; } }
.elementor-editor-active .jc-hero-title .ln > span{ transform:none; animation:none; }

/* Angled orange wedge behind the hero scene, echoing the logo (hero container) */
.jc-hero{ position:relative !important; overflow:hidden !important; isolation:isolate; }
.jc-hero::before{
  content:""; position:absolute !important; top:auto !important; left:auto !important;
  right:0 !important; bottom:0 !important; width:46% !important; height:72% !important; pointer-events:none; z-index:0;
  background:linear-gradient(135deg,transparent 0%,var(--jc-tint) 70%);
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);
}
.jc-hero > .e-con-inner, .jc-hero > *{ position:relative; z-index:1; }

/* ---------- Marquee (HTML widget markup in the build guide) ---------- */
.jc-marquee{ overflow:hidden; }
.jc-marquee__track{ display:flex; width:max-content; animation:jcScroll 38s linear infinite; }
.jc-marquee:hover .jc-marquee__track{ animation-play-state:paused; }
.jc-marquee ul{ display:flex; list-style:none; margin:0; padding:0; }
.jc-marquee li{
  font-stretch:125%; font-weight:700; font-size:clamp(1.25rem,2.4vw,1.8rem); letter-spacing:-.01em;
  color:#F2F2F0; padding:0 28px; display:flex; align-items:center; white-space:nowrap;
}
.jc-marquee li::after{ content:""; width:22px; height:14px; margin-left:56px; background:var(--jc-orange); clip-path:polygon(0 0,62% 0,100% 100%,38% 100%); }
@keyframes jcScroll{ to{ transform:translateX(-50%); } }

/* ---------- Service rows ---------- */
.jc-svc-row{ position:relative; }
.jc-svc-row::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:3px; z-index:1;
  background:var(--jc-orange); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.jc-svc-row:hover::before{ transform:scaleX(1); }
.jc-svc-row .elementor-icon{ transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
.jc-svc-row:hover .elementor-icon{ background-color:var(--jc-orange) !important; border-color:var(--jc-orange) !important; color:#fff !important; }
.jc-svc-row:hover .elementor-icon svg{ fill:#fff !important; }

/* ---------- Process: scroll-linked rail ----------
   Steps wrapper container: jc-steps  (left padding 76px)
   Each step container:     jc-step
   Number heading widget:   jc-step-num
   JS in jcws-snippet-1-fonts.html and jcws-snippet-2-effects.html sets --jc-p and .is-reached */
.jc-steps{ position:relative; --jc-p:0; }
.jc-steps::before, .jc-steps::after{
  content:""; position:absolute; left:23px; top:8px; bottom:8px; width:3px; border-radius:3px;
}
.jc-steps::before{ background:var(--jc-line); }
.jc-steps::after{ background:var(--jc-orange); transform-origin:top; transform:scaleY(var(--jc-p)); }
.jc-step{ position:relative; z-index:1; }
.jc-step-num{ position:absolute !important; left:-76px; top:-4px; width:50px !important; }
.jc-step-num .elementor-heading-title{
  width:50px; height:50px; border-radius:4px; display:grid; place-items:center;
  background:var(--jc-surface); border:3px solid var(--jc-line);
  transition:background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.jc-step.is-reached .jc-step-num .elementor-heading-title{
  background:var(--jc-orange); border-color:var(--jc-orange); color:var(--jc-on-orange); transform:scale(1.06);
}
.elementor-editor-active .jc-steps{ --jc-p:1; }

/* ---------- Proof band ---------- */
.jc-proof .jc-count{ color:var(--jc-orange-lt); font-variant-numeric:tabular-nums; }

/* ---------- Work: scroll the full-page screenshot on hover ----------
   Image widget, class jc-shot. Upload a tall full-page screenshot (1440px wide). */
.jc-shot .elementor-widget-container{
  height:300px; overflow:hidden; border-radius:14px; border:1px solid var(--jc-line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75), 0 8px 20px -12px rgba(0,0,0,.6);
}
.jc-shot img{ width:100%; height:auto !important; max-height:none !important; object-fit:initial; transition:transform 3.2s cubic-bezier(.45,0,.3,1); }
.jc-shot:hover img{ transform:translateY(calc(-100% + 300px)); }

/* ---------- Founder photo shape ---------- */
.jc-founder-photo img{ border-radius:6px; clip-path:polygon(0 0,78% 0,100% 16%,100% 100%,0 100%); aspect-ratio:4/5; object-fit:cover; }

/* ---------- Reviews ---------- */
.jc-quote-lead .elementor-testimonial-content,
.jc-quote-lead .elementor-widget-text-editor{ font-stretch:115%; letter-spacing:-.02em; line-height:1.15; }

/* ---------- FAQ (Accordion widget) ---------- */
.jc-faq .elementor-accordion-item{ border-width:0 0 1px !important; border-color:var(--jc-line) !important; }
.jc-faq .elementor-accordion-item:first-child{ border-top:2px solid var(--jc-ink) !important; }
.jc-faq .elementor-accordion-icon{ transition:transform .35s ease; }
.jc-faq .elementor-active .elementor-accordion-icon{ transform:rotate(180deg); }

/* ---------- Contact panel + WPForms ---------- */
.jc-contact{ position:relative; overflow:hidden; }
.jc-contact::before, .jc-contact::after{ content:""; position:absolute; right:0; width:220px; height:170px; pointer-events:none; }
.jc-contact::before{ top:0; background:var(--jc-orange); clip-path:polygon(0 0,100% 0,100% 100%); }
.jc-contact::after{ bottom:0; background:var(--jc-deep-2); clip-path:polygon(100% 0,100% 100%,0 100%); }
.jc-contact > *{ position:relative; }
.jc-form .wpforms-container{ margin:0 !important; }
.jc-form .wpforms-field-label{ font-weight:700 !important; font-size:.9rem !important; color:var(--jc-ink) !important; }
.jc-form input[type=text], .jc-form input[type=email], .jc-form select, .jc-form textarea{
  background:var(--jc-paper) !important; border:2px solid var(--jc-line) !important; border-radius:12px !important;
  padding:12px 14px !important; height:auto !important; font:inherit !important; color:var(--jc-ink) !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.jc-form input:focus, .jc-form select:focus, .jc-form textarea:focus{
  border-color:var(--jc-orange) !important; box-shadow:0 0 0 4px rgba(242,122,42,.22) !important; outline:none !important;
}
.jc-form button[type=submit]{
  background:var(--jc-btn) !important; color:#fff !important; border:0 !important;
  border-radius:999px !important; padding:15px 26px !important; height:auto !important;
  font-weight:700 !important; box-shadow:0 6px 0 -2px var(--jc-btn-shadow) !important;
  transition:transform .2s ease;
}
.jc-form button[type=submit]:hover{ background:var(--jc-btn-hover) !important; transform:translateY(-2px); }

/* ---------- Focus + reduced motion ---------- */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible{ outline:3px solid var(--jc-btn); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .jc-hero-title .ln > span{ transform:none; animation:none; }
  .jc-marquee__track{ animation:none; width:auto; }
  .jc-marquee ul[aria-hidden]{ display:none; }
  .jc-marquee ul{ flex-wrap:wrap; justify-content:center; row-gap:12px; }
  .jc-shot img, .jc-svc-row::before, .jc-step-num .elementor-heading-title{ transition:none; }
  .elementor-invisible{ visibility:visible !important; }
  .animated{ animation:none !important; }
}

/* ---------- Astra scroll-to-top: match JCWS buttons ---------- */
#ast-scroll-top{
  background-color:#C24703 !important;
  color:#fff !important;
  border-radius:4px;
  box-shadow:0 6px 0 -2px #7E2E02;
  transition:background-color .2s ease, transform .2s ease;
}
#ast-scroll-top:hover{ background-color:#A93D02 !important; transform:translateY(-2px); }
#ast-scroll-top svg{ fill:#fff; }/* End custom CSS */