@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   CUEVUE - AI avatar concierge skin (derived from the Agentic Agency skin). Loads after custom2.css, wins by source
   order. Warm paper, ink and CueVue orange.

   Do not break:
   - Scope under .vidkitweb, except the SITE CHROME block.
   - Never declare `visibility` on .home-slider .what_we_do .about_h
     .our_services_h .why_choose .pricing_h .analyze .our_work .client_sec
     .testimonial .service_h_bg .why_choose_home2 - the editor reveals them
     inline during AI population.
   - Keep .wrk_col:hover .overlay_wrk on display:none -> flex.
   - Heading colour overrides must also reset background and
     -webkit-text-fill-color; custom2 clips heading text to a gradient.
   ========================================================================== */

.vidkitweb {
  --cv-paper:       #FBF5EC;
  --cv-paper-warm:  #F6ECDD;
  --cv-paper-edge:  #EBE3D6;
  --cv-surface:     #FFFDF9;
  --cv-ink:         #211A12;
  --cv-ink-soft:    #3A2E22;
  --cv-ink-mute:    #6E655A;
  --cv-coral:       #F5821E;
  --cv-coral-deep:  #D9680C;
  --cv-blush:       #FBA94C;
  --cv-blush-soft:  #FFF1E2;
  --cv-rule:        #E6D9C6;

  --cv-display: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --cv-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --cv-mono:    'Plus Jakarta Sans', system-ui, sans-serif;
}


.vidkitweb {
  background-color: var(--cv-paper);
  background-image:
    radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, .018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  color: var(--cv-ink-soft);
  font-family: var(--cv-body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -.005em;
}

/* TYPOGRAPHY */

/* Reset custom2's gradient-clipped heading text. */
.vidkitweb h1, .vidkitweb h2, .vidkitweb h3,
.vidkitweb h4, .vidkitweb h5, .vidkitweb h6,
.vidkitweb .h1, .vidkitweb .h2, .vidkitweb .h3,
.vidkitweb .h4, .vidkitweb .h5, .vidkitweb .h6 {
  font-family: var(--cv-display);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--cv-ink);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.vidkitweb h1, .vidkitweb .h1 { font-size: 60px; font-weight: 700; letter-spacing: -.04em; }
.vidkitweb h2, .vidkitweb .h2 { font-size: 40px; }
.vidkitweb h3, .vidkitweb .h3 { font-size: 30px; }
.vidkitweb h4, .vidkitweb .h4 { font-size: 20px; letter-spacing: -.02em; }
.vidkitweb h5, .vidkitweb .h5 { font-size: 17px; }
.vidkitweb h6, .vidkitweb .h6 { font-size: 15px; }

.vidkitweb p { color: var(--cv-ink-mute); font-size: 16px; line-height: 1.72; }
.vidkitweb a { color: var(--cv-coral-deep); }
.vidkitweb a:hover { color: var(--cv-ink); }

.vidkitweb .sml_title,
.vidkitweb .slider_content h6 {
  display: inline-block;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--cv-coral);
  font-family: var(--cv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 18px;
}

.vidkitweb .title_wrap { position: relative; padding-top: 26px; }
.vidkitweb .title_wrap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--cv-coral);
}
.vidkitweb .title_wrap h2 { margin-bottom: 14px; }

/* The renderer injects .app_edit_block between a .row and its column, so
   col-md-8/offset-md-2 resolves against a shrink-to-fit flex item and lands
   off-centre. No-op where the wrapper is absent. */
.vidkitweb .row > .app_edit_block { flex: 0 0 100%; max-width: 100%; }

/* .row's margin: 0 -15px expects to grow 15px past its parent; .w-100 pins it
   to parent width instead, leaving the row 15px short on the right. */
.vidkitweb .row.w-100 { width: calc(100% + 30px) !important; }

/* BUTTONS - custom2's `.vidkitweb .btn` is (0,2,0); match it to win */

.vidkitweb .btn {
  background: var(--cv-coral) !important;
  background-image: none !important;
  filter: none !important;
  color: #fff !important;
  font-family: var(--cv-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: 999px;
  border: none;
  min-width: 150px;
  transition: background .18s ease, transform .18s ease;
}

.vidkitweb .btn:hover {
  background: var(--cv-ink) !important;
  background-image: none !important;
  filter: none !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.vidkitweb .btn.btn1 {
  background: transparent !important;
  color: var(--cv-ink) !important;
  border: 1.5px solid var(--cv-ink) !important;
  min-width: 174px;
}
.vidkitweb .btn.btn1:hover {
  background: var(--cv-ink) !important;
  color: #fff !important;
  border-color: var(--cv-ink) !important;
}

.vidkitweb .ply_btn {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--cv-ink);
  font-family: var(--cv-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  background-color: transparent;
}
.vidkitweb .ply_btn .fa {
  background: var(--cv-ink) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-text-fill-color: #fff;
  color: #fff;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 20px;
  border-radius: 50%;
  transition: background .18s ease;
}
.vidkitweb .ply_btn:hover .fa { background: var(--cv-coral) !important; }

/* HERO / SLIDER */

.vidkitweb .home-slider { padding: 34px 0 56px; }

/* container-fluid's 15px gutter puts the edge-anchored controls on top of the
   copy and artwork. Widen it to clear them. */
.vidkitweb .home-slider .carousel-item > .container-fluid {
  padding-left: 92px;
  padding-right: 92px;
}

/* Sources are 780x590; uncapped they upscale to ~918 and drag the hero 100px
   taller. custom2 also bleeds the art 15px past its column, into the control
   gutter above. */
.vidkitweb .home-slider .slider_img { text-align: right; margin-right: 0; }
.vidkitweb .home-slider .slider_img img {
  width: 100%;
  max-width: 780px;
  height: auto;
}

/* order-xl-* reverses paint order, so the artwork paints over the copy. */
.vidkitweb .slider_content { max-width: 520px; position: relative; z-index: 2; }
.vidkitweb .slider_content h1 {
  font-family: var(--cv-display);
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.06;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--cv-ink);
  margin-bottom: 22px;
}
.vidkitweb .slider_content p {
  color: var(--cv-ink-mute);
  font-size: 17px;
  line-height: 1.7;
}
.vidkitweb .slider-desc {
  position: relative;
  padding-left: 18px;
}
.vidkitweb .slider-desc:before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 2px;
  background: var(--cv-coral);
}

.vidkitweb .slide_ic1,
.vidkitweb .slide_ic2 { opacity: .5; }

/* The control ships a hardcoded rgb(240,240,240) grey strip down both edges. */
.vidkitweb .carousel-control-prev,
.vidkitweb .carousel-control-next {
  width: auto;
  opacity: 1;
  background: transparent;
  background-image: none;
}
/* Sized to the hero gutter above so the hit area never covers the slide. */
.vidkitweb .home-slider > .carousel-control-prev,
.vidkitweb .home-slider > .carousel-control-next { width: 92px; }
.vidkitweb .carousel-control-prev-icon,
.vidkitweb .carousel-control-next-icon {
  background-image: none !important;
  width: 42px;
  height: 42px;
  line-height: 42px;
  border: 1.5px solid var(--cv-rule);
  border-radius: 999px;
  background-color: var(--cv-surface);
  color: var(--cv-ink);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.vidkitweb .carousel-control-prev:hover .carousel-control-prev-icon,
.vidkitweb .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--cv-coral);
  border-color: var(--cv-coral);
  color: #fff;
}
.vidkitweb .carousel-control-prev-icon .fa,
.vidkitweb .carousel-control-next-icon .fa { font-size: 15px; }

/* WHAT WE DO - flat numbered cards */

.vidkitweb .what_we_do { padding: 90px 0; counter-reset: agwwd; }

/* The pastel card rules are (0,4,0); .vidkitweb reaches (0,5,0). */
.vidkitweb .wwd_col,
.vidkitweb .affortable_service,
.vidkitweb .quality_output,
.vidkitweb .expert_team,
.vidkitweb .what_we_do.home2 .wwd_col,
.vidkitweb .what_we_do.home2 .wwd_col.affortable_service,
.vidkitweb .what_we_do.home2 .wwd_col.quality_output,
.vidkitweb .what_we_do.home2 .wwd_col.expert_team {
  background-image: none;
  background-color: var(--cv-surface);
  box-shadow: none;
  border: 1px solid var(--cv-rule);
  border-radius: 22px;
  padding: 40px 32px 36px;
  text-align: left;
  position: relative;
  transition: border-color .2s ease, transform .2s ease;
}

.vidkitweb .wwd_col:hover {
  border-color: var(--cv-ink);
  transform: translateY(-3px);
}

.vidkitweb .wwd_col:after {
  counter-increment: agwwd;
  content: "0" counter(agwwd);
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--cv-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--cv-ink-mute);
  opacity: .55;
}

.vidkitweb .wwd_col figure img { height: 56px; width: auto; }
.vidkitweb .wwd_col h4 { margin: 22px 0 12px; }
.vidkitweb .wwd_col figcaption p { color: var(--cv-ink-mute); font-size: 15px; }

/* Equal-height rows. gen_content2 rewrites every string at site creation, so
   the columns must stretch. .home2 staggers deliberately and is left alone. */
.vidkitweb .what_we_do:not(.home2) .row.adddeletetool > [class*="col-"],
.vidkitweb .our_services_h .row.adddeleteservice > [class*="col-"],
.vidkitweb .our_team_section .row.adddeletememberrow > [class*="col-"] {
  display: flex;
}
.vidkitweb .what_we_do:not(.home2) .row.adddeletetool .wwd_col,
.vidkitweb .our_services_h .row.adddeleteservice .o_serv_col,
.vidkitweb .our_team_section .row.adddeletememberrow .team_col {
  width: 100%;
}
/* Pin the CTA/body to a common baseline once the box is stretched. */
.vidkitweb .what_we_do:not(.home2) .row.adddeletetool .wwd_col,
.vidkitweb .our_services_h .row.adddeleteservice .o_serv_col {
  display: flex;
  flex-direction: column;
}

/* ABOUT */

.vidkitweb .about_h { padding: 60px 0 90px; }
.vidkitweb .about_h_detail h2 { margin-bottom: 18px; }

/* SERVICES - numbered hairline cards */

.vidkitweb .our_services_h {
  padding: 90px 0 40px;
  counter-reset: agsvc;
  background-color: var(--cv-paper-warm);
  border-top: 1px solid var(--cv-rule);
  border-bottom: 1px solid var(--cv-rule);
}

.vidkitweb .o_serv_col {
  text-align: left;
  margin-bottom: 40px;
  padding: 34px 28px;
  background: var(--cv-surface);
  border: 1px solid var(--cv-rule);
  border-radius: 22px;
  transition: border-color .2s ease, transform .2s ease;
}
.vidkitweb .o_serv_col:hover {
  border-color: var(--cv-coral);
  transform: translateY(-3px);
}

.vidkitweb .o_serv_col:before {
  counter-increment: agsvc;
  content: "0" counter(agsvc);
  display: block;
  font-family: var(--cv-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cv-coral);
  margin-bottom: 16px;
}

.vidkitweb .o_serv_col figure img { height: 52px; width: auto; }
.vidkitweb .o_serv_col .h4 { margin: 18px 0 10px; }
.vidkitweb .o_serv_col p { font-size: 15px; color: var(--cv-ink-mute); }

.vidkitweb .o_s_thmnl { margin-left: 0; margin-right: 0; }

/* WHY CHOOSE - ink band. custom2 overlaps it upward via margin-top:-140px
   and margin-bottom:-42%; both reset here */

.vidkitweb .why_choose {
  margin-top: 0;
  padding: 90px 0;
  background: var(--cv-ink);
  color: rgba(255, 255, 255, .72);
}

/* Wrapper is .container-fluid, so pad the copy onto the .container grid line
   (1170px here, not 1140px); artwork still bleeds right. max() stops it
   collapsing to 0 where the query's viewport and this element's width differ,
   as in the editor. */
@media (min-width: 1200px) {
  .vidkitweb .why_choose > .container-fluid {
    padding-left: max(15px, calc((100% - 1170px) / 2 + 15px));
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .vidkitweb .why_choose > .container-fluid {
    padding-left: max(15px, calc((100% - 960px) / 2 + 15px));
  }
}
/* editor.php forces .container to width:94%, so the grid line is 3% in.
   .editor-pages exists only in the editor. */
@media (min-width: 1200px) {
  .editor-pages .why_choose > .container-fluid {
    padding-left: calc(3% + 15px);
  }
}

.vidkitweb .why_choose_detail {
  float: none;
  width: 100%;
  max-width: 560px;
  margin: 0 0 0 auto;
  margin-bottom: 0;
  color: rgba(255, 255, 255, .72);
}

.vidkitweb .why_choose .why_choose_detail h2,
.vidkitweb .why_choose_home2 .why_choose_detail h2 {
  color: #fff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
}
.vidkitweb .why_choose .sml_title,
.vidkitweb .why_choose_home2 .sml_title { color: var(--cv-blush); }
.vidkitweb .why_choose p,
.vidkitweb .why_choose_home2 p { color: rgba(255, 255, 255, .68); }

.vidkitweb .why_cs_thmnl { margin-left: 0; margin-right: 0; }
.vidkitweb .why_cs_thmnl img { border-radius: 22px; }

/* `.whc_ul ul li` is (0,1,2); .vidkitweb reaches (0,2,2). */
.vidkitweb .whc_ul ul li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-left: 16px;
  margin-bottom: 10px;
  min-height: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
}
.vidkitweb .whc_ul ul li i,
.vidkitweb .whc_ul ul li img {
  position: relative;
  left: auto;
  top: auto;
  flex: 0 0 auto;
  width: 22px;
  height: auto;
}

.vidkitweb .why_choose_home2 {
  background-image: none;
  background-color: var(--cv-ink);
  padding: 90px 0;
}
.vidkitweb .why_choose_home2 .why_choose_detail {
  max-width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, .72);
}

/* PRICING - three hairline plan cards. Warm paper to break the seam under
   the ink WHY CHOOSE band */

.vidkitweb .pricing_h {
  padding: 90px 0;
  background-color: var(--cv-paper-warm);
  border-bottom: 1px solid var(--cv-rule);
}

/* custom2's .price_col is (0,1,0), padded for badge artwork we do not use. */
.vidkitweb .price_col {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding: 34px 30px 32px;
  background: var(--cv-surface);
  border: 1px solid var(--cv-rule);
  border-radius: 22px;
  transition: border-color .2s ease, transform .2s ease;
}
.vidkitweb .price_col:hover { border-color: var(--cv-ink); transform: translateY(-3px); }

/* Equal-height cards - gen_content2 rewrites every string at site creation. */
.vidkitweb .pricing_h .row > [class*="col-"] { display: flex; margin-bottom: 30px; }
/* The 30px is only wanted between wrapped rows; on one line it goes bottom-heavy. */
.vidkitweb .pricing_h > .container > .row { margin-bottom: -30px; }

.vidkitweb .price_col .sml_title { margin-bottom: 14px; }

.vidkitweb .price_amt {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--cv-display);
  margin-bottom: 16px;
}
.vidkitweb .price_fig {
  color: var(--cv-ink);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.vidkitweb .price_per {
  font-family: var(--cv-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cv-ink-mute);
}

.vidkitweb .price_note {
  font-size: 15px;
  color: var(--cv-ink-mute);
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--cv-rule);
}

.vidkitweb .price_list { margin: 0 0 28px; padding: 0; list-style: none; }
.vidkitweb .price_list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cv-ink-soft);
}
.vidkitweb .price_list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 11px;
  height: 2px;
  background: var(--cv-coral);
}

/* Pin the CTA to a common baseline once the box has been stretched. */
.vidkitweb .price_col .btn { margin-top: auto; align-self: flex-start; }

/* Featured plan - ink card. No `visibility` here; the editor owns it. */
.vidkitweb .price_col.price_col_feat {
  background: var(--cv-ink);
  border-color: var(--cv-ink);
}
.vidkitweb .price_col.price_col_feat:hover { border-color: var(--cv-coral); }
.vidkitweb .price_col_feat .sml_title { color: var(--cv-blush); }
.vidkitweb .price_col_feat .price_fig { color: #fff; -webkit-text-fill-color: #fff; }
.vidkitweb .price_col_feat .price_per { color: rgba(255, 255, 255, .55); }
.vidkitweb .price_col_feat .price_note {
  color: rgba(255, 255, 255, .68);
  border-bottom-color: rgba(255, 255, 255, .16);
}
.vidkitweb .price_col_feat .price_list li { color: rgba(255, 255, 255, .82); }

/* ANALYZE */

.vidkitweb .analyze { padding: 90px 0; }
.vidkitweb .analyze h2 { margin-bottom: 18px; }
.vidkitweb .analyze img { border-radius: 22px; }

/* PORTFOLIO - reveal stays display:none -> flex (custom2 .wrk_col:hover) */

.vidkitweb .our_work { padding: 90px 0; background-color: var(--cv-paper-warm); border-top: 1px solid var(--cv-rule); }

.vidkitweb .wrk_col { margin-bottom: 30px; }
.vidkitweb .wrk_col .img_full {
  border-radius: 22px;
  box-shadow: none;
  border: 1px solid var(--cv-rule);
}

.vidkitweb .overlay_wrk {
  background: rgba(33, 26, 18, .78);
  border-radius: 22px;
  padding: 20px;
  align-items: flex-end;
}
.vidkitweb .overlay_wrk .btn {
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 12px;
  padding: 13px 20px;
}

/* CLIENTS */

.vidkitweb .client_sec { padding: 80px 0; }
.vidkitweb .cl_rw ul li { margin: 14px 28px; }
.vidkitweb .cl_rw ul li img {
  height: 42px;
  filter: grayscale(100%);
  opacity: .5;
  transition: filter .2s ease, opacity .2s ease;
}
.vidkitweb .cl_rw ul li img:hover { filter: grayscale(0); opacity: 1; }

/* TESTIMONIAL */

.vidkitweb .testimonial {
  padding: 90px 0 100px;
  background-color: var(--cv-blush-soft);
  border-top: 1px solid var(--cv-rule);
}

.vidkitweb .test_col figure { width: 88px; margin-bottom: 28px; }
.vidkitweb .test_col figure img { border-radius: 50%; }

.vidkitweb .test_content {
  font-family: var(--cv-display);
  font-style: normal;
  font-weight: 500;
  font-size: 27px;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--cv-ink);
  margin-bottom: 28px;
}

.vidkitweb .name_customer {
  font-family: var(--cv-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cv-ink-mute);
}

.vidkitweb .quot_lf,
.vidkitweb .quot_rg { opacity: .35; width: 54px; }

.vidkitweb .test_frame1,
.vidkitweb .test_frame2 { opacity: .18; }

.vidkitweb #testimonial_slider .carousel-control-prev,
.vidkitweb #testimonial_slider .carousel-control-next { width: 54px; opacity: .6; }
.vidkitweb #testimonial_slider .carousel-control-prev:hover,
.vidkitweb #testimonial_slider .carousel-control-next:hover { opacity: 1; }

/* INNER PAGE HEADERS - custom2 aims these classes at template 1 art */

.vidkitweb .inner_header {
  height: auto;
  min-height: 380px;
  padding: 110px 0 80px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-bottom: 1px solid var(--cv-rule);
  position: relative;
}
.vidkitweb .inner_header.service_h_bg { background-image: url(../images/cuevue/hero-services.png); }
.vidkitweb .inner_header.team_h_bg    { background-image: url(../images/cuevue/hero-team.png); }
.vidkitweb .inner_header.contact_h_bg { background-image: url(../images/cuevue/hero-contact.png); }
.vidkitweb .inner_header.hdr_bg       { background-image: url(../images/cuevue/hero-blog.png); }
.vidkitweb .inner_header .container { position: relative; z-index: 2; }
.vidkitweb .inner_header h1 {
  color: var(--cv-ink);
  -webkit-text-fill-color: var(--cv-ink);
  background: none;
  font-family: var(--cv-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.04em;
  margin-bottom: 16px;
}
/* outranks custom2's .h2.white, which forces #fff !important */
.vidkitweb .inner_header h1.white {
  color: var(--cv-ink) !important;
  -webkit-text-fill-color: var(--cv-ink) !important;
}
.vidkitweb .inner_header .w_clr2 { color: var(--cv-ink-mute); }

/* SERVICES PAGE - section rhythm */

.vidkitweb .what_we_do.what_we_do2 { background-color: transparent; }
.vidkitweb .our_services_h.our_services_h2 { background-color: var(--cv-paper-warm); }
.vidkitweb .our_work.our_work2 { background-color: transparent; }
.vidkitweb .p_t_70 { padding-top: 90px; }
.vidkitweb .p_b_70 { padding-bottom: 90px; }

.vidkitweb .our_tool_s:before,
.vidkitweb .our_tool_s:after,
.vidkitweb .qp_s:before,
.vidkitweb .qp_s:after { display: none; }

/* .qp_s is a .wwd_col in services4, so the rule above also killed its counter. */
.vidkitweb .wwd_col.qp_s:after {
  display: block;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  background: none;
}

/* RESPONSIVE - custom2 sets .why_choose margin-top at 3 breakpoints */

@media (min-width: 992px) and (max-width: 1199px) {
  .vidkitweb .slider_content h1 { font-size: 46px; }
  .vidkitweb h1, .vidkitweb .h1 { font-size: 48px; }
  .vidkitweb h2, .vidkitweb .h2 { font-size: 34px; }
  .vidkitweb .test_content { font-size: 24px; }
  .vidkitweb .why_choose { margin-top: 0; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .vidkitweb .home-slider .carousel-item > .container-fluid {
    padding-left: 74px;
    padding-right: 74px;
  }
  .vidkitweb .home-slider > .carousel-control-prev,
  .vidkitweb .home-slider > .carousel-control-next { width: 74px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .vidkitweb .slider_content h1 { font-size: 38px; }
  .vidkitweb .home-slider .carousel-item > .container-fluid {
    padding-left: 58px;
    padding-right: 58px;
  }
  .vidkitweb .home-slider > .carousel-control-prev,
  .vidkitweb .home-slider > .carousel-control-next { width: 58px; }
  .vidkitweb h1, .vidkitweb .h1 { font-size: 40px; }
  .vidkitweb h2, .vidkitweb .h2 { font-size: 30px; }
  .vidkitweb .why_choose { margin-top: 0; padding: 70px 0; }
  .vidkitweb .wwd_col { padding: 28px 22px; }
  .vidkitweb .o_serv_col { padding: 26px 20px; }
  .vidkitweb .test_content { font-size: 21px; }
  .vidkitweb .what_we_do,
  .vidkitweb .our_services_h,
  .vidkitweb .our_work,
  .vidkitweb .analyze,
  .vidkitweb .pricing_h,
  .vidkitweb .testimonial { padding-top: 70px; padding-bottom: 70px; }
  .vidkitweb .price_col { padding: 28px 24px; }
  .vidkitweb .price_fig { font-size: 36px; }
  .vidkitweb .contact_form_aside,
  .vidkitweb .getintouch { padding: 30px 26px; }
  .vidkitweb .inner_header { min-height: 300px; padding: 90px 0 60px; }
  .vidkitweb .inner_header h1 { font-size: 40px; }
}

@media (max-width: 767px) {
  .vidkitweb { font-size: 15px; }
  .vidkitweb h1, .vidkitweb .h1 { font-size: 32px; }
  .vidkitweb h2, .vidkitweb .h2 { font-size: 28px; }
  .vidkitweb h3, .vidkitweb .h3 { font-size: 24px; }
  .vidkitweb .slider_content { text-align: left; }
  .vidkitweb .slider_content h1 { font-size: 32px; }
  .vidkitweb .home-slider { padding: 26px 0 34px; }

  /* Stacked hero has no side gutter, so the controls drop below the slide. */
  .vidkitweb .home-slider .carousel-item > .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 60px;
  }
  .vidkitweb .home-slider > .carousel-control-prev,
  .vidkitweb .home-slider > .carousel-control-next {
    width: 44px;
    height: 44px;
    top: auto;
    bottom: 0;
  }
  .vidkitweb .home-slider > .carousel-control-prev { left: 15px; right: auto; }
  .vidkitweb .home-slider > .carousel-control-next { left: 65px; right: auto; }
  .vidkitweb .home-slider .slider_img { text-align: left; }

  .vidkitweb .why_choose { margin-top: 0; padding: 60px 0; }
  .vidkitweb .why_choose_detail { text-align: left; padding-top: 26px; max-width: 100%; }
  .vidkitweb .whc_ul ul li { padding-left: 16px; }
  .vidkitweb .whc_ul ul li i,
  .vidkitweb .whc_ul ul li img { display: inline-block; }

  .vidkitweb .what_we_do,
  .vidkitweb .our_services_h,
  .vidkitweb .our_work,
  .vidkitweb .analyze,
  .vidkitweb .pricing_h,
  .vidkitweb .client_sec,
  .vidkitweb .testimonial { padding-top: 55px; padding-bottom: 55px; }

  .vidkitweb .price_col { padding: 28px 22px; }
  .vidkitweb .price_fig { font-size: 36px; }

  /* custom2 centres both blocks here; keep that, just trim the padding. */
  .vidkitweb .contact_form_aside,
  .vidkitweb .getintouch { padding: 28px 22px; height: auto; }
  .vidkitweb .getintouch { margin-bottom: 30px; }
  .vidkitweb .price_list li { text-align: left; }

  .vidkitweb .wwd_col { padding: 28px 22px; margin-bottom: 20px; }
  .vidkitweb .o_serv_col { padding: 26px 20px; margin-bottom: 20px; }
  .vidkitweb .o_serv_col.mb-0 { margin-bottom: 20px !important; }
  .vidkitweb .o_serv_col.mb-2 { margin-bottom: 20px !important; }
  .vidkitweb .o_s_thmnl { margin: 0 0 30px; }

  .vidkitweb .test_content { font-size: 19px; line-height: 1.5; }
  .vidkitweb .quot_lf,
  .vidkitweb .quot_rg { width: 34px; }
  .vidkitweb .test_frame1,
  .vidkitweb .test_frame2 { display: none; }

  .vidkitweb .inner_header { min-height: 240px; padding: 70px 0 50px; }
  .vidkitweb .inner_header h1 { font-size: 30px; }

  .vidkitweb .p_t_70 { padding-top: 55px; }
  .vidkitweb .p_b_70 { padding-bottom: 55px; }
}

/* TEAM PAGE - skill meters. custom2's per-bar rainbow gradients flattened to
   ink rails; markup and widths untouched */

.vidkitweb .skill_rw {
  color: var(--cv-ink-soft);
  font-family: var(--cv-mono);
  font-size: 12px;
  letter-spacing: .04em;
}
.vidkitweb .skill_rw .progress {
  height: 6px;
  border-radius: 0;
  background: var(--cv-paper-edge);
  overflow: hidden;
}
.vidkitweb .skill_rw .progress .progress-bar { border-radius: 0; }
.vidkitweb .skill_1 .progress-bar,
.vidkitweb .skill_2 .progress-bar,
.vidkitweb .skill_3 .progress-bar,
.vidkitweb .skill_4 .progress-bar {
  background: var(--cv-ink);
  background-image: none;
  filter: none;
}
.vidkitweb .skill_1 .progress-bar { background: var(--cv-coral); }
.vidkitweb .skill_rw .skillText { color: var(--cv-ink-soft); }
.vidkitweb .skill_rw .skillPer { color: var(--cv-ink-mute); }

/* CONTACT PAGE - custom2 insets the blocks asymmetrically
   (.contact_form_aside margin-right:30px, .getintouch margin-left:30px), so
   each renders 30px narrower than its column and the pair reads as a 90px
   channel where every other section uses 30px. Drop the insets, then card
   both - unstyled they were the only surfaces on the site with none */

.vidkitweb .contact_form_aside { margin-right: 0; }
.vidkitweb .getintouch { margin-left: 0; }

.vidkitweb .contact_form_aside,
.vidkitweb .getintouch {
  height: 100%;
  padding: 40px 36px;
  background: var(--cv-surface);
  border: 1px solid var(--cv-rule);
  border-radius: 22px;
}
/* Uneven column lengths would leave one bordered box floating short. */
.vidkitweb .contact_m_section > .row { align-items: stretch; }

/* .col-md-7's mb-5 separates the cards once stacked; side by side it just
   stops the form 42px short. .contact_m_section's own mb-5 clears the map. */
@media (min-width: 768px) {
  .vidkitweb .contact_m_section .col-md-7.mb-5 { margin-bottom: 0 !important; }
}

.vidkitweb .contact_form_aside .title_c h3,
.vidkitweb .getintouch .title_c h3 { margin-bottom: 14px; }

/* Bare bottom-ruled inputs in custom2's lilac. `.gfr_form .txt1` is (0,2,0). */
.vidkitweb .gfr_form { padding-top: 8px; }
.vidkitweb .gfr_form .txt1 {
  height: 48px;
  padding: 0 14px;
  margin-bottom: 20px;
  background: var(--cv-paper);
  border: 1px solid var(--cv-rule);
  border-radius: 999px;
  font-family: var(--cv-body);
  font-size: 15px;
  color: var(--cv-ink-soft);
  transition: border-color .18s ease, background .18s ease;
}
/* The textarea carries .h-100, so height is not ours to set. */
.vidkitweb .gfr_form textarea.txt1 {
  min-height: 118px;
  padding: 13px 14px;
  resize: vertical;
}
.vidkitweb .gfr_form .txt1::placeholder { color: var(--cv-ink-mute); opacity: .8; }
.vidkitweb .gfr_form .txt1:focus {
  outline: none;
  background: #fff;
  border-color: var(--cv-coral);
}

/* `.getintouch ul li` is (0,1,2) and `.getintouch ul li h6` is (0,1,3). */
.vidkitweb .getintouch ul { margin: 0; padding: 0; list-style: none; }
.vidkitweb .getintouch ul li {
  margin-bottom: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--cv-rule);
  font-family: var(--cv-body);
  color: var(--cv-ink-soft);
}
.vidkitweb .getintouch ul li:last-child { border-bottom: none; padding-bottom: 0; }
.vidkitweb .getintouch ul li h6 {
  font-family: var(--cv-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cv-ink-mute);
  margin-bottom: 7px;
}
.vidkitweb .getintouch ul li p {
  color: var(--cv-ink-soft);
  font-size: 16px;
  margin-bottom: 0;
}

.vidkitweb .map_contact {
  border: 1px solid var(--cv-rule);
  border-radius: 22px;
  overflow: hidden;
}

/* SITE CHROME - header / nav / subscribe / footer. Outside .vidkitweb so it
   cannot be scoped there. Safe unscoped: this sheet only loads for the CueVue temp_id
   and editor.php has no #myHeader/#footer/.navbar */

:root {
  --cv-paper:        #FBF5EC;
  --cv-paper-warm:   #F6ECDD;
  --cv-paper-edge:   #EBE3D6;
  --cv-surface:      #FFFDF9;
  --cv-ink:          #211A12;
  --cv-ink-soft:     #3A2E22;
  --cv-ink-mute:     #6E655A;
  --cv-coral:        #F5821E;
  --cv-coral-deep:   #D9680C;
  --cv-blush:        #FBA94C;
  --cv-blush-soft:   #FFF1E2;
  --cv-rule:         #E6D9C6;
  --cv-display:      'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif;
  --cv-body:         'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --cv-mono:         'Plus Jakarta Sans',system-ui,sans-serif;
}

/* Paper seam fix. :has() is the scope guard - editor.php has no #myHeader. */
body:has(#myHeader) {
  background: var(--cv-paper);
  font-family: var(--cv-body);
  color: var(--cv-ink-soft);
}

/* header / nav */

#myHeader {
  background: var(--cv-paper);
  border-bottom: 1px solid var(--cv-rule);
}
#myHeader .navbar {
  background: transparent;
  padding-top: 22px;
  padding-bottom: 22px;
}
#myHeader.sticky {
  background: rgba(251, 245, 236, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cv-rule);
  box-shadow: none;
}
#myHeader.sticky .navbar {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Client logos arrive at arbitrary aspect, so fix the lane height and contain
   the image - otherwise the nav baseline moves per client. */
#myHeader .navbar-brand {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0;
  margin-right: 38px;
}
#myHeader .navbar-brand img {
  max-height: 38px;
  max-width: 230px;
  width: auto;
  height: auto;
  object-fit: contain;
}

#myHeader .navbar-expand-md .navbar-nav .nav-link {
  position: relative;
  font-family: var(--cv-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cv-ink-soft);
  padding: 4px 0;
  margin: 0 16px;
  transition: color 0.2s ease;
}
#myHeader .navbar-expand-md .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--cv-coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#myHeader .navbar-expand-md .navbar-nav li:hover .nav-link,
#myHeader .navbar-expand-md .navbar-nav li.active .nav-link {
  color: var(--cv-coral);
}
#myHeader .navbar-expand-md .navbar-nav li:hover .nav-link::after,
#myHeader .navbar-expand-md .navbar-nav li.active .nav-link::after {
  transform: scaleX(1);
}

#myHeader .navbar-toggler {
  border: 1px solid var(--cv-rule);
  border-radius: 0;
  color: var(--cv-ink);
  padding: 6px 11px;
}
#myHeader .navbar-toggler .navbar-toggler-icon {
  width: auto;
  height: auto;
  background-image: none;
  font-size: 18px;
  line-height: 1;
  color: var(--cv-ink);
}

/* subscribe band - kept dark: the markup hardcodes .white / .h2.white here */

#footer .subscribe_section {
  background: var(--cv-ink);
  background-image: none;
  padding: 74px 0;
  position: relative;
}
#footer .subscribe_section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--cv-coral);
}
#footer .subscribe_section h6.white {
  font-family: var(--cv-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cv-coral) !important;
  background: none !important;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  margin-bottom: 14px;
}
#footer .subscribe_section .h2.white {
  font-family: var(--cv-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--cv-paper) !important;
  -webkit-text-fill-color: currentColor;
}
#footer .subscribe_section form input[type=text] {
  background: transparent;
  border: 1px solid rgba(251, 245, 236, 0.28);
  border-radius: 999px;
  color: var(--cv-paper);
  font-family: var(--cv-body);
  font-size: 14px;
  height: 50px;
  padding: 0 18px;
}
#footer .subscribe_section form input[type=text]::placeholder {
  color: rgba(251, 245, 236, 0.45);
}
#footer .subscribe_section form input[type=text]:focus {
  outline: none;
  border-color: var(--cv-coral);
}
#footer .subscribe_section form .btn,
#footer .subscribe_section .btn.autoresponser {
  background: var(--cv-coral);
  background-image: none;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font-family: var(--cv-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 30px;
  transition: background 0.2s ease, transform 0.2s ease;
}
#footer .subscribe_section form .btn:hover,
#footer .subscribe_section .btn.autoresponser:hover {
  background: var(--cv-coral-deep);
  background-image: none;
  transform: translateY(-1px);
}

/* footer body - paper, not ink */

#footer {
  background: var(--cv-paper-warm);
  color: var(--cv-ink-mute);
  font-family: var(--cv-body);
}
#footer .footer_top {
  border-top: 1px solid var(--cv-rule);
  padding: 66px 0 44px;
}
#footer .footer_top h6 {
  display: block;
  font-family: var(--cv-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cv-ink-mute);
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cv-rule);
}
#footer .logo_frt {
  display: flex;
  align-items: center;
  height: 44px;
}
#footer .logo_frt img {
  max-height: 36px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}
#footer .footer_top p {
  color: var(--cv-ink-mute);
  font-size: 14px;
  line-height: 1.7;
  max-width: 34ch;
}

#footer .menu_footer ul li a,
#footer .contact_ftr ul li {
  color: var(--cv-ink-mute);
  font-size: 14px;
}
#footer .menu_footer ul li a {
  display: block;
  margin-bottom: 11px;
  padding: 0;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
#footer .menu_footer ul li a:hover,
#footer .menu_footer ul li.active a {
  color: var(--cv-coral);
  padding-left: 5px;
}
#footer .contact_ftr ul li i {
  color: var(--cv-coral);
}
/* Shared assets - a teal phone, orange envelope and red pin belonging to no
   template. Flattened to ink so they read as one muted list. */
#footer .contact_ftr ul li i img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.5;
}

#footer .social_ftr ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--cv-rule);
  background: var(--cv-surface);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
#footer .social_ftr ul li a:hover {
  opacity: 1;
  border-color: var(--cv-coral);
  transform: translateY(-2px);
}
/* Shared brand assets - the LinkedIn one is a JPG whose white box shows
   through the circular mask. multiply drops the box into the surface;
   desaturating settles four competing brand colours into the palette. */
#footer .social_ftr ul li a img {
  width: 20px;
  height: 20px;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.82;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
#footer .social_ftr ul li a:hover img {
  filter: none;
  opacity: 1;
}

#footer .footer_bottom {
  border-top: 1px solid var(--cv-rule);
  padding-top: 24px;
  padding-bottom: 26px;
  font-family: var(--cv-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cv-ink-mute);
}

/* These links carry an inline `color: rgba(62,67,124,1) !important` from the
   shared renderer that no author !important can outrank. -webkit-text-fill-color
   paints the glyphs and is not set inline, so it wins. */
#footer .footer_bottom a {
  font-family: var(--cv-mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  -webkit-text-fill-color: var(--cv-coral);
  border-bottom: 1px solid rgba(245, 130, 30, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
#footer .footer_bottom a:hover {
  -webkit-text-fill-color: var(--cv-ink);
  border-bottom-color: var(--cv-ink);
  text-decoration: none;
}

#footer .link1 {
  font-family: var(--cv-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cv-coral);
  text-decoration: none;
  border-bottom: 1px solid var(--cv-coral);
  padding-bottom: 2px;
}
#footer .link1:hover {
  color: var(--cv-ink);
  border-bottom-color: var(--cv-ink);
  text-decoration: none;
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

@media (max-width: 991px) {
  #myHeader .navbar { padding-top: 16px; padding-bottom: 16px; }
  #myHeader .navbar-expand-md .navbar-nav .nav-link { margin: 0; padding: 9px 0; }
  #myHeader .navbar-expand-md .navbar-nav .nav-link::after { display: none; }
  #myHeader .navbar-collapse {
    border-top: 1px solid var(--cv-rule);
    margin-top: 14px;
    padding-top: 10px;
  }
  #footer .subscribe_section { padding: 54px 0; }
  #footer .subscribe_section form input[type=text] { width: 100%; margin-bottom: 12px; }
  #footer .subscribe_section form .btn { margin-left: 0; }
  #footer .footer_top { padding: 48px 0 32px; }
  #footer .footer_top p { max-width: none; }
  #footer .footer_bottom .text-right { text-align: left !important; margin-top: 10px; }
}

/* ============================================================================
   CUEVUE ACCENTS - brand layer on top of the derived base above.
   Same rules as the base: scope under .vidkitweb, never set `visibility`
   on section wrappers.
   ========================================================================== */

.vidkitweb {
  --cv-gold:   #F9CE46;
  --cv-pink:   #EE7CA8;
  --cv-mint:   #4FC0A0;
  --cv-blue:   #6E8CE8;
  --cv-cta-shadow: 0 15px 28px -10px rgba(233, 108, 15, .5);
  --cv-card-shadow: 0 1px 0 rgba(33, 26, 18, .04), 0 18px 40px -24px rgba(33, 26, 18, .28);
  background-image: none;
}

.vidkitweb h1, .vidkitweb .h1,
.vidkitweb h2, .vidkitweb .h2 { font-weight: 800; letter-spacing: -.035em; }

/* Eyebrow labels - pill chips instead of mono caps. */
.vidkitweb .sml_title,
.vidkitweb .slider_content h6 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--cv-coral-deep);
  background: #FFE9D2;
  padding: 7px 14px;
  border-radius: 999px;
}
.vidkitweb .title_wrap { padding-top: 0; }
.vidkitweb .title_wrap:before { display: none; }

/* Buttons - orange pill with the app's CTA glow. */
.vidkitweb .btn {
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: var(--cv-cta-shadow);
}
.vidkitweb .btn:hover { box-shadow: 0 10px 22px -10px rgba(33, 26, 18, .55); }
.vidkitweb .ply_btn { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.vidkitweb .ply_btn .fa { background: var(--cv-coral) !important; box-shadow: var(--cv-cta-shadow); }
.vidkitweb .ply_btn:hover .fa { background: var(--cv-ink) !important; }

/* Hero - warm glow wash behind the slides. */
.vidkitweb .home-slider {
  background:
    radial-gradient(60% 70% at 78% 45%, rgba(249, 206, 70, .28), transparent 70%),
    radial-gradient(40% 50% at 8% 90%, rgba(238, 124, 168, .12), transparent 70%);
}
.vidkitweb .slider-desc { padding-left: 0; }
.vidkitweb .slider-desc:before { display: none; }
.vidkitweb .slide_ic1, .vidkitweb .slide_ic2 { opacity: 1; margin-bottom: 18px; }
.vidkitweb .slide_ic1 img, .vidkitweb .slide_ic2 img { width: 52px; }
.vidkitweb .carousel-control-prev-icon,
.vidkitweb .carousel-control-next-icon { box-shadow: var(--cv-card-shadow); }

/* Cards - white, soft shadow, rounded. */
.vidkitweb .wwd_col,
.vidkitweb .affortable_service,
.vidkitweb .quality_output,
.vidkitweb .expert_team,
.vidkitweb .o_serv_col,
.vidkitweb .price_col,
.vidkitweb .contact_form_aside,
.vidkitweb .getintouch {
  box-shadow: var(--cv-card-shadow);
  border-color: var(--cv-paper-edge);
}
.vidkitweb .wwd_col:hover,
.vidkitweb .o_serv_col:hover,
.vidkitweb .price_col:hover { border-color: var(--cv-coral); }

.vidkitweb .wwd_col:after {
  top: 22px;
  right: 22px;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background: #FFE9D2;
  color: var(--cv-coral-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  opacity: 1;
}
.vidkitweb .wwd_col figure img { height: auto; width: 100%; max-width: 100%; border-radius: 16px; background: #FFF6EC; }
.vidkitweb .o_serv_col figure img { height: auto; width: 100%; border-radius: 16px; background: #FFF6EC; }
.vidkitweb .o_serv_col:before {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Why choose - ink band with orange glow and cream chips. */
.vidkitweb .why_choose {
  background:
    radial-gradient(50% 60% at 85% 50%, rgba(245, 130, 30, .30), transparent 70%),
    var(--cv-ink);
}
.vidkitweb .why_choose .sml_title { background: rgba(245, 130, 30, .16); color: var(--cv-blush); }
.vidkitweb .why_cs_thmnl img { border-radius: 26px; }
.vidkitweb .whc_ul ul li { border-radius: 18px; gap: 14px; }
.vidkitweb .whc_ul ul li i,
.vidkitweb .whc_ul ul li img { width: 38px; }

/* Pricing - featured plan in brand orange. */
.vidkitweb .price_list li:before {
  width: 16px;
  height: 16px;
  top: .2em;
  border-radius: 50%;
  background: var(--cv-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23211A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.vidkitweb .price_list li { padding-left: 28px; }
.vidkitweb .price_col.price_col_feat {
  background: linear-gradient(160deg, #F98E28, #E96C0F);
  border-color: #E96C0F;
  box-shadow: 0 30px 50px -24px rgba(233, 108, 15, .65);
}
.vidkitweb .price_col.price_col_feat:hover { border-color: var(--cv-ink); }
.vidkitweb .price_col_feat .sml_title { background: rgba(255, 255, 255, .22); color: #fff; }
.vidkitweb .price_col_feat .price_per { color: rgba(255, 255, 255, .8); }
.vidkitweb .price_col_feat .price_note { color: rgba(255, 255, 255, .9); border-bottom-color: rgba(255, 255, 255, .3); }
.vidkitweb .price_col_feat .price_list li { color: #fff; }
.vidkitweb .price_col_feat .btn { background: var(--cv-ink) !important; box-shadow: none; }
.vidkitweb .price_col_feat .btn:hover { background: #fff !important; color: var(--cv-ink) !important; }

/* About / analyze artwork. */
.vidkitweb .about_h img,
.vidkitweb .analyze img { border-radius: 26px; }

/* Portfolio - ink overlay, orange pill. */
.vidkitweb .wrk_col .img_full { border-color: var(--cv-paper-edge); box-shadow: var(--cv-card-shadow); }
.vidkitweb .overlay_wrk { border-radius: 22px; }

/* Clients - wordmarks at full colour on hover. */
.vidkitweb .cl_rw ul li img { height: 46px; }

/* Testimonial - soft peach band, rounded portrait. */
.vidkitweb .testimonial {
  background:
    radial-gradient(45% 60% at 50% 0%, rgba(249, 206, 70, .25), transparent 70%),
    var(--cv-blush-soft);
}
.vidkitweb .test_col figure img { border: 3px solid var(--cv-coral); }
.vidkitweb .quot_lf, .vidkitweb .quot_rg { opacity: .9; width: 44px; }
.vidkitweb .name_customer { font-weight: 700; letter-spacing: .1em; color: var(--cv-coral-deep); }

/* Forms - textareas cannot be pills. */
.vidkitweb .gfr_form .txt1 { padding: 0 20px; }
.vidkitweb .gfr_form textarea.txt1 { border-radius: 20px; padding: 14px 20px; }

/* Site chrome. */
#myHeader .navbar-expand-md .navbar-nav .nav-link {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
#myHeader .navbar-expand-md .navbar-nav .nav-link::after { height: 2px; border-radius: 2px; }
#myHeader .navbar-toggler { border-radius: 12px; }
#footer .subscribe_section {
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(245, 130, 30, .35), transparent 70%),
    var(--cv-ink);
}
#footer .subscribe_section form .btn,
#footer .subscribe_section .btn.autoresponser {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: 0 15px 28px -10px rgba(233, 108, 15, .5);
}
#footer .subscribe_section form input[type=text] { border-radius: 999px; padding: 0 22px; }
#footer .footer_top h6 { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--cv-ink); }
#footer .social_ftr ul li a { border-radius: 50%; }

@media (max-width: 767px) {
  .vidkitweb .slide_ic1 img, .vidkitweb .slide_ic2 img { width: 44px; }
}

/* Plan cards are flex columns, which stretch the eyebrow chip full width. */
.vidkitweb .price_col .sml_title { align-self: flex-start; }

/* custom2 paints the mobile toggler in its own red. */
#myHeader .navbar-toggler { background: var(--cv-surface); background-image: none; border-color: var(--cv-rule); }
#myHeader .navbar-toggler:hover { background: #FFE9D2 !important; color: var(--cv-ink); }