/* ==========================================================================
   JKK Handyman Services — design layer
   Styles the JKK Components widgets plus a handful of section helper classes
   you can drop on any Elementor section (Advanced → CSS Classes):
     jkk-slant-b / jkk-slant-t / jkk-slant-tb   angled section edges
     jkk-hero                                   photo hero with a dark scrim
     jkk-lift                                   pulls a section up over the one above
     jkk-flag                                   faint flag stripes in the corner
     jkk-tilt / jkk-tilt-r                      tilted photo that straightens on hover
     jkk-card                                   soft white card (on a column)
     jkk-card-dark                              translucent card for dark bands
   ========================================================================== */

:root{
  --jkk-cream:#FDF8EE; --jkk-cream2:#F6ECD8; --jkk-sage:#EAF3EC; --jkk-paper:#FFFDF8;
  --jkk-green:#1C4A33; --jkk-green2:#2F6B48; --jkk-greenl:#4C8F63; --jkk-greend:#0F2E1E;
  --jkk-gold:#E9A93C; --jkk-goldd:#C98A21; --jkk-tan:#B5854F;
  --jkk-ink:#232C27; --jkk-ink2:#5A645E; --jkk-red:#C8323F; --jkk-navy:#142A63;
  --jkk-script:"Dancing Script","Brush Script MT",cursive;
  --jkk-sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------------------------------------------------------- helpers */
.jkk-slant-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 68px),0 100%)}
.jkk-slant-t{clip-path:polygon(0 68px,100% 0,100% 100%,0 100%)}
.jkk-slant-tb{clip-path:polygon(0 58px,100% 0,100% calc(100% - 58px),0 100%)}
@media(max-width:767px){
  .jkk-slant-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),0 100%)}
  .jkk-slant-t{clip-path:polygon(0 28px,100% 0,100% 100%,0 100%)}
  .jkk-slant-tb{clip-path:polygon(0 24px,100% 0,100% calc(100% - 24px),0 100%)}
}

.jkk-hero{position:relative;isolation:isolate}
.jkk-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(10,26,18,.26),rgba(10,26,18,.72) 78%),
             linear-gradient(180deg,rgba(10,26,18,.55),rgba(10,26,18,.16) 38%,rgba(10,26,18,.82))}
.jkk-hero > .elementor-container{position:relative;z-index:2}

.jkk-lift{margin-top:-78px;position:relative;z-index:5}
@media(max-width:1024px){.jkk-lift{margin-top:-40px}}
@media(max-width:767px){.jkk-lift{margin-top:0}}

.jkk-flag{position:relative;overflow:hidden}
.jkk-flag::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--jkk-red) 0 34px,transparent 34px 68px);
  opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 34%);
          mask-image:linear-gradient(90deg,#000,transparent 34%)}
.jkk-flag > .elementor-container{position:relative;z-index:2}

.jkk-card{background:var(--jkk-paper);border-radius:18px;
  box-shadow:0 14px 30px rgba(20,40,28,.10);border:1px solid rgba(28,74,51,.10)}
.jkk-card-dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:18px}

.jkk-tilt img{border-radius:14px;box-shadow:0 20px 40px rgba(20,40,28,.22);
  border:7px solid #fff;transform:rotate(-2.2deg);transition:transform .3s ease}
.jkk-tilt:hover img{transform:rotate(0)}
.jkk-tilt-r img{transform:rotate(2deg)}

/* ------------------------------------------------ JKK Script Heading */
.jkk-sh{font-family:var(--jkk-script)!important;font-weight:700;line-height:1.08;margin:0;
  text-transform:none!important;letter-spacing:normal}
.jkk-sh__after{display:inline}
.jkk-mark{position:relative;display:inline-block;z-index:1}
.jkk-mark::after{content:"";position:absolute;left:-6px;right:-6px;bottom:12%;height:32%;
  z-index:-1;border-radius:14px 4px 16px 6px;transform:rotate(-1.2deg);
  background:var(--jkk-gold);opacity:.38}
.jkk-mark--green::after{background:var(--jkk-greenl);opacity:.32}
.jkk-mark--white::after{background:rgba(255,255,255,.3);opacity:1}
.jkk-swoosh{display:block;width:200px;max-width:60%;height:14px;margin-top:4px;color:var(--jkk-gold)}

/* ------------------------------------------------------ JKK Checklist */
.jkk-pad{position:relative;background:var(--jkk-paper);border-radius:8px;padding:34px 30px 28px;
  box-shadow:0 22px 46px rgba(20,40,28,.17);
  background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(28,74,51,.12) 37px 38px);
  background-position:0 64px}
.jkk-pad--tape::before{content:"";position:absolute;top:-15px;left:50%;width:132px;height:29px;
  transform:translateX(-50%) rotate(-1.6deg);background:rgba(233,169,60,.55);border-radius:3px;
  box-shadow:0 3px 8px rgba(0,0,0,.10)}
.jkk-pad__title{font-family:var(--jkk-script)!important;font-size:36px!important;font-weight:700;
  color:var(--jkk-green);margin:0 0 14px;line-height:1.1;text-transform:none!important;letter-spacing:normal!important}
.jkk-pad__items{list-style:none;margin:0;padding:0;font-family:var(--jkk-sans);font-size:16px;
  color:var(--jkk-ink)}
.jkk-pad__items li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;min-height:38px;line-height:1.35}
.jkk-pad__box{flex:0 0 auto;width:15px;height:15px;margin-top:3px;border:2px solid var(--jkk-green2);
  border-radius:3px;background:transparent}
.jkk-pad__hand{font-family:var(--jkk-script)!important;font-size:30px;color:var(--jkk-green);text-align:right;
  margin:14px 0 6px;line-height:1.2}
.jkk-pad__heart{color:var(--jkk-red)}
.jkk-pad__kicker{font-family:var(--jkk-sans);font-weight:700;font-size:15px;color:var(--jkk-green);
  text-align:center;margin:0;border-top:1px dashed rgba(28,74,51,.25);padding-top:12px}

/* ------------------------------------------------------ JKK Step Card */
.jkk-step{text-align:center;padding:32px 24px 30px;border-radius:18px;height:100%}
.jkk-step--dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.jkk-step__n{width:52px;height:52px;line-height:52px;border-radius:50%;margin:0 auto 14px;
  background:var(--jkk-gold);color:#241A05;font-family:var(--jkk-script)!important;font-size:28px;font-weight:700}
.jkk-step__t{font-family:var(--jkk-script)!important;font-size:30px!important;font-weight:700;margin:0 0 8px;
  line-height:1.1;color:#fff;text-transform:none!important;letter-spacing:normal!important}
.jkk-step:not(.jkk-step--dark) .jkk-step__t{color:var(--jkk-green)}
.jkk-step__p{font-family:var(--jkk-sans);font-size:15.5px;line-height:1.6;margin:0;color:#CFE0D3}
.jkk-step:not(.jkk-step--dark) .jkk-step__p{color:var(--jkk-ink2)}

/* ----------------------------------------------------- JKK Trust Card */
.jkk-trust{background:var(--jkk-paper);border-radius:18px;padding:26px 18px 24px;text-align:center;
  box-shadow:0 16px 36px rgba(20,40,28,.14);border-top:4px solid var(--jkk-green);height:100%;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.jkk-trust__i{width:46px;height:46px;border-radius:50%;background:var(--jkk-sage);color:var(--jkk-green);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.jkk-trust__i svg{width:20px;height:20px;fill:currentColor}
.jkk-trust__i i{font-size:19px}
.jkk-trust__t{font-family:var(--jkk-sans);font-weight:800;font-size:16.5px;color:var(--jkk-green);
  line-height:1.25}
.jkk-trust__s{font-family:var(--jkk-sans);font-size:14px;color:var(--jkk-ink2)}

/* ---------------------------------------------------- JKK Review Card */
.jkk-rev{background:var(--jkk-paper);border-radius:18px;padding:26px 24px 24px;height:100%;
  box-shadow:0 14px 30px rgba(20,40,28,.10);border:1px solid rgba(28,74,51,.10);
  display:flex;flex-direction:column}
.jkk-rev__stars{color:var(--jkk-gold);font-size:16px;letter-spacing:2px;line-height:1}
.jkk-rev__q{font-family:var(--jkk-sans);font-size:15.5px;line-height:1.62;color:var(--jkk-ink2);
  margin:12px 0 18px;padding:0;border:0;font-style:normal;flex:1 1 auto}
.jkk-rev__who{display:flex;align-items:center;gap:12px}
.jkk-rev__av{flex:0 0 auto;width:40px;height:40px;line-height:40px;border-radius:50%;
  background:var(--jkk-green);color:#fff;text-align:center;font-family:var(--jkk-sans);
  font-weight:800;font-size:16px}
.jkk-rev__who strong{display:block;font-family:var(--jkk-sans);font-size:15px;color:var(--jkk-green)}
.jkk-rev__who em{display:block;font-family:var(--jkk-sans);font-size:13.5px;color:var(--jkk-ink2);font-style:normal}

/* --------------------------------------------------- JKK Before/After */
.jkk-ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jkk-ba__fig{position:relative;margin:0;overflow:hidden;border-radius:14px}
.jkk-ba__fig img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px}
.jkk-ba__fig figcaption{position:absolute;left:12px;bottom:12px;background:rgba(15,46,30,.86);color:#fff;
  font-family:var(--jkk-sans);font-weight:800;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px}
.jkk-ba__cap{font-family:var(--jkk-sans);font-size:14.5px;color:var(--jkk-ink2);text-align:center;margin:12px 0 0}

/* --------------------------------------------------------- JKK Polaroid */
.jkk-pol{background:#fff;padding:14px 14px 10px;border-radius:6px;max-width:260px;
  box-shadow:0 18px 34px rgba(20,40,28,.22)}
.jkk-pol__ph{background:var(--jkk-cream2);border-radius:3px;aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.jkk-pol__ph img{width:100%;height:100%;object-fit:cover;display:block}
.jkk-pol__icon{color:var(--jkk-greenl)}
.jkk-pol__icon svg{width:44px;height:44px;fill:currentColor}
.jkk-pol__icon i{font-size:42px}
.jkk-pol__cap{font-family:var(--jkk-script)!important;font-size:19px;line-height:1.2;color:var(--jkk-ink2);
  text-align:center;margin:10px 0 0}

/* ------------------------------------------------------ JKK Place Card */
.jkk-place{position:relative;border-radius:16px;overflow:hidden;background:var(--jkk-green2) center/cover no-repeat;
  display:flex;align-items:flex-end;box-shadow:0 14px 30px rgba(20,40,28,.18);transition:transform .3s ease}
.jkk-place::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,26,18,.72))}
.jkk-place__label{position:relative;z-index:2;font-family:var(--jkk-script)!important;font-size:22px;color:#fff;
  padding:14px 16px;line-height:1.15}

/* ------------------------------------------------------ JKK Seals Band */
.jkk-seals{border:5px solid var(--jkk-gold);border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 18px 36px rgba(0,0,0,.24)}
.jkk-seals img{width:100%;height:auto;display:block}
.jkk-seals__cap{background:var(--jkk-gold);color:#241A05;font-family:var(--jkk-sans);font-weight:800;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:9px 10px}

/* ----------------------------------------------------- estimate form */
.jkk-form .elementor-field-group > label{font-weight:700;color:var(--jkk-green);font-size:13.5px;margin-bottom:7px}
.jkk-form .elementor-field-textual{background:var(--jkk-cream);border:1.5px solid rgba(28,74,51,.18);
  border-radius:12px;padding:14px 16px;font-size:16px}
.jkk-form .elementor-field-textual:focus{border-color:var(--jkk-green);outline:none;
  box-shadow:0 0 0 4px rgba(28,74,51,.10)}
.jkk-form .elementor-field-subgroup{display:flex;flex-wrap:wrap}
.jkk-form .elementor-field-subgroup label{background:var(--jkk-cream);border:1.5px solid rgba(28,74,51,.16);
  border-radius:999px;padding:9px 16px;margin:0 8px 8px 0;font-size:14.5px;cursor:pointer}

/* --------------------------------------------------------------- misc */
.jkk-page #ast-scroll-top{display:none!important}

/* ==========================================================================
   Header and footer (Elementor Theme Builder templates)
   ========================================================================== */

/* thin navy strip above the header */
.jkk-topbar{font-family:var(--jkk-sans)}
.jkk-topbar .elementor-icon-list-item,
.jkk-topbar a{color:#DCE4F5!important;font-size:13px;font-weight:600}
.jkk-topbar a:hover{color:#fff!important}
.jkk-topbar .jkk-vet .elementor-icon-list-text{color:#fff!important;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;font-size:12.5px}

/* sticky main bar */
.jkk-header{background:rgba(253,248,238,.97);backdrop-filter:blur(10px);
  border-bottom:3px solid var(--jkk-gold);position:sticky;top:0;z-index:99}
.admin-bar .jkk-header{top:32px}
@media(max-width:782px){.admin-bar .jkk-header{top:46px}}
.jkk-header .elementor-nav-menu .elementor-item{font-family:var(--jkk-sans);font-weight:800;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--jkk-ink)}
.jkk-header .elementor-nav-menu .elementor-item:hover,
.jkk-header .elementor-nav-menu .elementor-item.elementor-item-active{color:var(--jkk-green)}

/* footer */
.jkk-footer{font-family:var(--jkk-sans)}
.jkk-footer h4,.jkk-footer .elementor-heading-title{font-family:var(--jkk-sans)!important;
  font-weight:800!important;font-size:13px!important;letter-spacing:.16em!important;
  text-transform:uppercase!important;color:var(--jkk-gold)!important}
.jkk-footer .elementor-icon-list-item a,
.jkk-footer .elementor-icon-list-text{color:#D6E3D9!important;font-size:15.5px}
.jkk-footer .elementor-icon-list-item a:hover{color:#fff!important}
.jkk-footer-bottom{border-top:1px solid rgba(255,255,255,.14)}

/* the tagline under the footer logo */
.jkk-footer-tag .elementor-heading-title{font-family:var(--jkk-script)!important;
  font-size:26px!important;color:#EFE3C8!important;text-transform:none!important;
  letter-spacing:normal!important;font-weight:700!important}

/* veteran pill */
.jkk-vetpill .elementor-icon-list-item{background:rgba(233,169,60,.16);
  border:1px solid rgba(233,169,60,.5);border-radius:999px;padding:8px 15px}
.jkk-vetpill .elementor-icon-list-text{font-weight:800!important;font-size:12px!important;
  letter-spacing:.1em;text-transform:uppercase;color:#F3DDB4!important}