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

/* ============================================================================
   AGENTIC AGENCY - Template 4 skin. Loads after custom2.css, wins by source
   order. Editorial paper & ink.

   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 {
  --ag-paper:       #f4efe6;
  --ag-paper-warm:  #eee7dd;
  --ag-paper-edge:  #dfd6cd;
  --ag-surface:     #f8f5f2;
  --ag-ink:         #0f0f0f;
  --ag-ink-soft:    #242424;
  --ag-ink-mute:    #616161;
  --ag-coral:       #ff6857;
  --ag-coral-deep:  #f24936;
  --ag-blush:       #f4b8c4;
  --ag-blush-soft:  #f7dee3;
  --ag-rule:        #cfc7bf;

  --ag-display: 'Instrument Sans', 'Inter', sans-serif;
  --ag-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ag-mono:    'JetBrains Mono', ui-monospace, monospace;
}


.vidkitweb {
  background-color: var(--ag-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(--ag-ink-soft);
  font-family: var(--ag-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(--ag-display);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ag-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(--ag-ink-mute); font-size: 16px; line-height: 1.72; }
.vidkitweb a { color: var(--ag-coral-deep); }
.vidkitweb a:hover { color: var(--ag-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(--ag-coral);
  font-family: var(--ag-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(--ag-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(--ag-coral) !important;
  background-image: none !important;
  filter: none !important;
  color: #fff !important;
  font-family: var(--ag-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: 3px;
  border: none;
  min-width: 150px;
  transition: background .18s ease, transform .18s ease;
}

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

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

.vidkitweb .ply_btn {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ag-ink);
  font-family: var(--ag-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  background-color: transparent;
}
.vidkitweb .ply_btn .fa {
  background: var(--ag-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(--ag-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(--ag-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(--ag-ink);
  margin-bottom: 22px;
}
.vidkitweb .slider_content p {
  color: var(--ag-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(--ag-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(--ag-rule);
  border-radius: 3px;
  background-color: var(--ag-surface);
  color: var(--ag-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(--ag-coral);
  border-color: var(--ag-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(--ag-surface);
  box-shadow: none;
  border: 1px solid var(--ag-rule);
  border-radius: 6px;
  padding: 40px 32px 36px;
  text-align: left;
  position: relative;
  transition: border-color .2s ease, transform .2s ease;
}

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

.vidkitweb .wwd_col:after {
  counter-increment: agwwd;
  content: "№ 0" counter(agwwd);
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--ag-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ag-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(--ag-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(--ag-paper-warm);
  border-top: 1px solid var(--ag-rule);
  border-bottom: 1px solid var(--ag-rule);
}

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

.vidkitweb .o_serv_col:before {
  counter-increment: agsvc;
  content: "№ 0" counter(agsvc);
  display: block;
  font-family: var(--ag-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ag-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(--ag-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(--ag-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(--ag-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: 6px; }

/* `.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: 4px;
  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(--ag-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(--ag-paper-warm);
  border-bottom: 1px solid var(--ag-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(--ag-surface);
  border: 1px solid var(--ag-rule);
  border-radius: 6px;
  transition: border-color .2s ease, transform .2s ease;
}
.vidkitweb .price_col:hover { border-color: var(--ag-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(--ag-display);
  margin-bottom: 16px;
}
.vidkitweb .price_fig {
  color: var(--ag-ink);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.vidkitweb .price_per {
  font-family: var(--ag-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ag-ink-mute);
}

.vidkitweb .price_note {
  font-size: 15px;
  color: var(--ag-ink-mute);
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ag-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(--ag-ink-soft);
}
.vidkitweb .price_list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 11px;
  height: 2px;
  background: var(--ag-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(--ag-ink);
  border-color: var(--ag-ink);
}
.vidkitweb .price_col.price_col_feat:hover { border-color: var(--ag-coral); }
.vidkitweb .price_col_feat .sml_title { color: var(--ag-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: 6px; }

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

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

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

.vidkitweb .overlay_wrk {
  background: rgba(15, 15, 15, .78);
  border-radius: 6px;
  padding: 20px;
  align-items: flex-end;
}
.vidkitweb .overlay_wrk .btn {
  border-radius: 3px;
  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(--ag-blush-soft);
  border-top: 1px solid var(--ag-rule);
}

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

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

.vidkitweb .name_customer {
  font-family: var(--ag-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ag-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(--ag-rule);
  position: relative;
}
.vidkitweb .inner_header.service_h_bg { background-image: url(../images/agentic/hero-services.png); }
.vidkitweb .inner_header.team_h_bg    { background-image: url(../images/agentic/hero-team.png); }
.vidkitweb .inner_header.contact_h_bg { background-image: url(../images/agentic/hero-contact.png); }
.vidkitweb .inner_header.hdr_bg       { background-image: url(../images/agentic/hero-blog.png); }
.vidkitweb .inner_header .container { position: relative; z-index: 2; }
.vidkitweb .inner_header h1 {
  color: var(--ag-ink);
  -webkit-text-fill-color: var(--ag-ink);
  background: none;
  font-family: var(--ag-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(--ag-ink) !important;
  -webkit-text-fill-color: var(--ag-ink) !important;
}
.vidkitweb .inner_header .w_clr2 { color: var(--ag-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(--ag-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(--ag-ink-soft);
  font-family: var(--ag-mono);
  font-size: 12px;
  letter-spacing: .04em;
}
.vidkitweb .skill_rw .progress {
  height: 6px;
  border-radius: 0;
  background: var(--ag-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(--ag-ink);
  background-image: none;
  filter: none;
}
.vidkitweb .skill_1 .progress-bar { background: var(--ag-coral); }
.vidkitweb .skill_rw .skillText { color: var(--ag-ink-soft); }
.vidkitweb .skill_rw .skillPer { color: var(--ag-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(--ag-surface);
  border: 1px solid var(--ag-rule);
  border-radius: 6px;
}
/* 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(--ag-paper);
  border: 1px solid var(--ag-rule);
  border-radius: 3px;
  font-family: var(--ag-body);
  font-size: 15px;
  color: var(--ag-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(--ag-ink-mute); opacity: .8; }
.vidkitweb .gfr_form .txt1:focus {
  outline: none;
  background: #fff;
  border-color: var(--ag-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(--ag-rule);
  font-family: var(--ag-body);
  color: var(--ag-ink-soft);
}
.vidkitweb .getintouch ul li:last-child { border-bottom: none; padding-bottom: 0; }
.vidkitweb .getintouch ul li h6 {
  font-family: var(--ag-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ag-ink-mute);
  margin-bottom: 7px;
}
.vidkitweb .getintouch ul li p {
  color: var(--ag-ink-soft);
  font-size: 16px;
  margin-bottom: 0;
}

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

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

:root {
  --ag-paper:        #f4efe6;
  --ag-paper-warm:   #eee7dd;
  --ag-paper-edge:   #dfd6cd;
  --ag-surface:      #f8f5f2;
  --ag-ink:          #0f0f0f;
  --ag-ink-soft:     #242424;
  --ag-ink-mute:     #616161;
  --ag-coral:        #ff6857;
  --ag-coral-deep:   #f24936;
  --ag-blush:        #f4b8c4;
  --ag-blush-soft:   #f7dee3;
  --ag-rule:         #cfc7bf;
  --ag-display:      'Instrument Sans','Inter',sans-serif;
  --ag-body:         'Inter',system-ui,-apple-system,sans-serif;
  --ag-mono:         'JetBrains Mono',ui-monospace,monospace;
}

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

/* header / nav */

#myHeader {
  background: var(--ag-paper);
  border-bottom: 1px solid var(--ag-rule);
}
#myHeader .navbar {
  background: transparent;
  padding-top: 22px;
  padding-bottom: 22px;
}
#myHeader.sticky {
  background: rgba(244, 239, 230, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ag-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(--ag-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ag-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(--ag-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(--ag-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(--ag-rule);
  border-radius: 0;
  color: var(--ag-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(--ag-ink);
}

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

#footer .subscribe_section {
  background: var(--ag-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(--ag-coral);
}
#footer .subscribe_section h6.white {
  font-family: var(--ag-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ag-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(--ag-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--ag-paper) !important;
  -webkit-text-fill-color: currentColor;
}
#footer .subscribe_section form input[type=text] {
  background: transparent;
  border: 1px solid rgba(244, 239, 230, 0.28);
  border-radius: 2px;
  color: var(--ag-paper);
  font-family: var(--ag-body);
  font-size: 14px;
  height: 50px;
  padding: 0 18px;
}
#footer .subscribe_section form input[type=text]::placeholder {
  color: rgba(244, 239, 230, 0.45);
}
#footer .subscribe_section form input[type=text]:focus {
  outline: none;
  border-color: var(--ag-coral);
}
#footer .subscribe_section form .btn,
#footer .subscribe_section .btn.autoresponser {
  background: var(--ag-coral);
  background-image: none;
  border: none;
  border-radius: 2px;
  box-shadow: none;
  color: #fff;
  font-family: var(--ag-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(--ag-coral-deep);
  background-image: none;
  transform: translateY(-1px);
}

/* footer body - paper, not ink */

#footer {
  background: var(--ag-paper-warm);
  color: var(--ag-ink-mute);
  font-family: var(--ag-body);
}
#footer .footer_top {
  border-top: 1px solid var(--ag-rule);
  padding: 66px 0 44px;
}
#footer .footer_top h6 {
  display: block;
  font-family: var(--ag-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ag-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(--ag-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(--ag-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(--ag-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(--ag-coral);
  padding-left: 5px;
}
#footer .contact_ftr ul li i {
  color: var(--ag-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(--ag-rule);
  background: var(--ag-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(--ag-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(--ag-rule);
  padding-top: 24px;
  padding-bottom: 26px;
  font-family: var(--ag-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ag-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(--ag-mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  -webkit-text-fill-color: var(--ag-coral);
  border-bottom: 1px solid rgba(255, 104, 87, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
#footer .footer_bottom a:hover {
  -webkit-text-fill-color: var(--ag-ink);
  border-bottom-color: var(--ag-ink);
  text-decoration: none;
}

#footer .link1 {
  font-family: var(--ag-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ag-coral);
  text-decoration: none;
  border-bottom: 1px solid var(--ag-coral);
  padding-bottom: 2px;
}
#footer .link1:hover {
  color: var(--ag-ink);
  border-bottom-color: var(--ag-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(--ag-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; }
}