.elementor-93 .elementor-element.elementor-element-5784d26{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-4401981{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-93 .elementor-element.elementor-element-c7e70d9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-93 .elementor-element.elementor-element-dcc222c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-99a2058 .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-93 .elementor-element.elementor-element-3966d93{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-edcd294{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-ff73aef{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-93 .elementor-element.elementor-element-833092b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-93 .elementor-element.elementor-element-6b020c6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-ac61c41{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-93 .elementor-element.elementor-element-9d3457c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-45da2a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-b68c506{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-93 .elementor-element.elementor-element-b92a9ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-a25baa2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-47929a3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-bc83d2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-32b3caa{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-93 .elementor-element.elementor-element-729241d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-93 .elementor-element.elementor-element-1a5e48e .elementor-icon-box-wrapper{gap:15px;}.elementor-93 .elementor-element.elementor-element-366a291 .elementor-icon-box-wrapper{gap:15px;}.elementor-93 .elementor-element.elementor-element-7130397 .elementor-icon-box-wrapper{gap:15px;}.elementor-93 .elementor-element.elementor-element-8a769e4 .elementor-icon-box-wrapper{gap:15px;}.elementor-93 .elementor-element.elementor-element-6f79d78 .elementor-icon-box-wrapper{gap:15px;}.elementor-93 .elementor-element.elementor-element-9550ff2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-ab76c42{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-ab0ec5b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-93 .elementor-element.elementor-element-9550ff2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-93 .elementor-element.elementor-element-32b3caa{--padding-top:10px;--padding-bottom:10px;--padding-left:52px;--padding-right:52px;}.elementor-93 .elementor-element.elementor-element-729241d{--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-93 .elementor-element.elementor-element-9550ff2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for heading, class: .elementor-element-64c871f *//* hg:P2:kc-sub-gap — subjudul 10px lebih dekat ke judul (mockup). Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element.elementor-element-64c871f.elementor-element-64c871f.elementor-element-64c871f { margin-top: -10px !important; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-ad60203 *//* hg:P2:kc-para-gap — paragraf +14px dari subjudul (mockup). Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element.elementor-element-ad60203.elementor-element-ad60203.elementor-element-ad60203 { margin-top: 14px !important; }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ac0efa6 *//* hg:P2:kc-btn-gap — tombol +9px dari paragraf (mockup). Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element.elementor-element-ac0efa6.elementor-element-ac0efa6.elementor-element-ac0efa6 { margin-top: 9px !important; }
}

/* hg:P2:kc-btn-pos — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-ac0efa6.elementor-element-ac0efa6.elementor-element-ac0efa6.elementor-element-ac0efa6 { margin-top: 9px !important; }
}

/* hg:P5:kc-btn-ukuran — tombol hero mockup 145x39 (live 158x48). Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-ac0efa6 .elementor-button.elementor-button { padding: 9px 23px !important; min-height: 0 !important; }
}/* End custom CSS */
/* Start custom CSS for video, class: .elementor-element-99a2058 */@media (min-width: 768px) {
  .elementor-93 .elementor-element.elementor-element-99a2058 { width: 565px !important; max-width: none !important; }
}
.elementor-93 .elementor-element.elementor-element-99a2058 .elementor-wrapper { border-radius: 12px; overflow: hidden; }
.elementor-93 .elementor-element.elementor-element-99a2058 video.elementor-video { width: 100%; height: 100%; object-fit: cover; }

/* revisi-14: desktop — mockup keychain hero 565×758 (crop dari video 9:16) */
@media (min-width: 768px) { .elementor-93 .elementor-element.elementor-element-99a2058 .elementor-wrapper { height:758px !important; aspect-ratio:auto !important; padding-bottom:0 !important; } .elementor-93 .elementor-element.elementor-element-99a2058 video.elementor-video { height:100% !important; object-fit:cover; } }
@media (min-width: 768px) { .elementor-93 .elementor-element.elementor-element-99a2058 { position:relative; left:-42px; } }
@media (max-width: 767px) { html body .elementor-93 .elementor-element.elementor-element-99a2058, html body .elementor-93 .elementor-element-99a2058 .elementor-widget-container, html body .elementor-93 .elementor-element-99a2058 .elementor-wrapper, html body .elementor-93 .elementor-element-99a2058 video { border-radius:0 !important; } }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dcc222c *//* hg:P3:kc-img-naik — gambar hero 15px lebih tinggi dari posisi setelah padding (mockup top y290). Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element.elementor-element-dcc222c.elementor-element-dcc222c.elementor-element-dcc222c { margin-top: -15px !important; }
}

/* hg:P2:kc-img-hero — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-dcc222c.elementor-element-dcc222c.elementor-element-dcc222c.elementor-element-dcc222c { margin-top: -29px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4401981 *//* Services_Keychain_Mobile.svg shows the hero photo ABOVE the title/text (image-then-text), but DOM order here is text-then-media, matching Elementor's default mobile stack. */
@media (max-width: 767px) {
  body.service-page--keychain .service-hero-split { display: flex !important; flex-direction: column !important; }
  body.service-page--keychain .service-hero-split .service-media { order: -1; }
  body.service-page--keychain .service-hero-split .service-split-text { order: 1; }
}
/* hg:P2:kc-desk-hero — mockup desktop: teks hero rata kiri x177, paragraf 22px/24px, tombol rata kiri. */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element.elementor-element-c7e70d9 { margin-left: -94px !important; width: 480px !important; max-width: none !important; align-items: flex-start !important; }
  body.service-page--keychain .elementor-element-c7e70d9 .elementor-widget { text-align: left !important; width: 100% !important; max-width: none !important; }
  body.service-page--keychain .elementor-element-c7e70d9 .elementor-heading-title { text-align: left !important; margin-left: 0 !important; }
  body.service-page--keychain .elementor-element-ad60203 .elementor-heading-title.elementor-heading-title { font-size: 22px !important; line-height: 24px !important; text-align: left !important; }
  body.service-page--keychain .elementor-element.elementor-element-ac0efa6 { align-self: flex-start !important; width: auto !important; }
}
/* hg:P2:kc-desk-hero2 — spesifisitas lebih tinggi: judul/tagline/tombol hero rata kiri. */
@media (min-width: 768px) {
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-c7e70d9 .elementor-widget, body.service-page--keychain.service-page--keychain.service-page .elementor-element-c7e70d9 .elementor-widget .elementor-heading-title.elementor-heading-title { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-c7e70d9 .elementor-widget-button.btn { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; width: auto !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-64c871f .elementor-heading-title.elementor-heading-title { font-size: 24px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5784d26 *//* These 3 step-photo widgets are set to display:none at desktop somewhere
 * in Elementor's own per-page CSS (not in this file) — confirmed via
 * getComputedStyle, no matching .elementor-93 .elementor-element.elementor-element-5784d26 in any of our tracked stylesheets.
 * Effect: the <img> collapses to 0x0, which also means native
 * loading="lazy" never fires (a 0-area element never intersects the
 * viewport), so the photo never even starts downloading. Restore
 * visibility directly; Keychain_Mobile.svg confirms these are meant to
 * show on every breakpoint, not just mobile. */
body.service-page--keychain .service-media .elementor-widget-image {
  display: block !important;
}


body.service-page--keychain .elementor-element.elementor-element-55bc3ea,
body.service-page--keychain .elementor-element.elementor-element-2492cf2,
body.service-page--keychain .elementor-element.elementor-element-a83ea8d {
  display: block !important;
}



.service-page--keychain .site-main {
  padding-top: 0;
}



.service-page--keychain .section-contact--override-heading .contact-info-title--single-line {
  font-size: var(--text-2xl);
  line-height: 1.3;
}



/* Elementor page 93 — spacing and decorative geometry from Services_Keychain. */
body.service-page--keychain {
  overflow-x: hidden;
}



body.service-page--keychain .elementor-element-4401981 {
  width: min(calc(100% - 96px), 1080px) !important;
  /* Was min-height:760px — a stale value from before the hero photo was
     resized; the tallest child (image column) only needs ~570px, leaving
     ~190px of dead space above the section's own bottom padding. */
  min-height: 0;
  margin-inline: auto;
  align-items: center;
}



body.service-page--keychain .elementor-element-5784d26 {
  padding: 120px 0 145px;
}



body.service-page--keychain .elementor-element-5784d26 > .e-con-inner {
  width: min(calc(100% - 96px), 1080px) !important;
  max-width: 1080px !important;
  margin-inline: auto;
}



body.service-page--keychain .service-section-center {
  margin-bottom: 70px;
  text-align: center;
}



body.service-page--keychain .elementor-element-5784d26 .service-split-grid {
  min-height: 410px;
  align-items: center;
}



body.service-page--keychain .elementor-element-5784d26 .service-media {
  position: relative;
  min-height: 270px;
  box-shadow: none !important;
  background: transparent !important;
}



body.service-page--keychain .elementor-element-5784d26 .service-media img {
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
}



/* The first media block belongs to the hero and remains photographic. */
body.service-page--keychain .elementor-element-4401981 .service-media img {
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
}



body.service-page--keychain .elementor-element-4401981 .service-media::before {
  content: none !important;
}



body.service-page--keychain :is(.elementor-element-ff73aef,.elementor-element-ac61c41,.elementor-element-b68c506) .service-media {
  min-height: 250px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}



body.service-page--keychain :is(.elementor-element-ff73aef,.elementor-element-ac61c41,.elementor-element-b68c506) .service-media > .e-con-inner > .elementor-widget-image {
  display: none !important;
}



body.service-page--keychain :is(.elementor-element-ff73aef,.elementor-element-ac61c41,.elementor-element-b68c506) .service-media::before {
  /* Was z-index:1, which beat the photo's own z-index:auto and covered it
     entirely. Services_Keychain.svg shows this circle as a decorative
     accent peeking out from behind/beside the photo, not on top of it. */
  z-index: -1;
}



body.service-page--keychain .elementor-element-ac61c41 .service-media::before {
  width: 155px;
  height: 155px;
  background: #f9d778;
  box-shadow: 0 0 0 30px #fce8ac;
}



body.service-page--keychain .elementor-element-b68c506 .service-media::before {
  width: 185px;
  height: 120px;
  border-radius: 60% 40% 58% 42%;
  background: #f6c4aa;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(-24deg);
}



/* Exact Elementor media nodes; higher specificity clears the shared card skin. */
body.service-page--keychain :is(.elementor-element-833092b,.elementor-element-45da2a1,.elementor-element-b92a9ed) {
  position: relative !important;
  /* z-index:0 (with position:relative) pins down a local stacking context
     so the circle's z-index:-1 stays contained here — behind the photo,
     in front of whatever this transparent box itself sits on — instead of
     escaping to the nearest ancestor that happens to establish one, which
     could be an opaque section background further up the tree. */
  z-index: 0;
  min-height: 250px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}



body.service-page--keychain :is(.elementor-element-833092b,.elementor-element-45da2a1,.elementor-element-b92a9ed) > :is(.e-con-inner,.elementor-widget-image) {
  display: none !important;
}



body.service-page--keychain :is(.elementor-element-833092b,.elementor-element-45da2a1,.elementor-element-b92a9ed)::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: #f9dce3;
  transform: translate(-50%, -50%);
}



body.service-page--keychain .elementor-element-45da2a1::before {
  width: 155px;
  height: 155px;
  background: #f9d778;
  box-shadow: 0 0 0 30px #fce8ac;
}



body.service-page--keychain .elementor-element-b92a9ed::before {
  width: 185px;
  height: 120px;
  border-radius: 60% 40% 58% 42%;
  background: #f6c4aa;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(-24deg);
}



/* Circles were all dead-centered on their photo (left:50%/top:50% above).
   Services_Keychain.svg positions each one at a specific corner instead,
   peeking out from behind the photo rather than sitting behind its middle:
   card 1 (pink) top-left, card 2 (yellow ring) top-right, card 3 (peach
   blob) bottom-right. */
body.service-page--keychain .elementor-element-833092b::before {
  left: 0;
  top: 0;
}



body.service-page--keychain .elementor-element-45da2a1::before {
  /* Measured via pixel-sampling: this blob's math (centered exactly at
     the image's top-right corner, per the shared corner-anchor pattern)
     is identical to step 1's, but step 1's pale pink blends into its
     dark red photo while this bright yellow (#f9d778) + its 30px
     #fce8ac glow read as clearly overlapping the lighter PRADA photo.
     Push the corner anchor further outside so neither the base circle
     nor its glow visibly sits on the photo. */
  left: calc(100% + 30px);
  top: -30px;
}



body.service-page--keychain .elementor-element-b92a9ed::before {
  left: 100%;
  top: 100%;
}



/* Step titles (.service-process-title) render as plain text with no CSS
   backing at all. Services_Keychain.svg shows each one as a rounded,
   tinted chip (rect rx=5.5, ~45px tall) in its own step's accent color —
   colors/opacity read directly from the mock's rects. */
body.service-page--keychain .service-process-title .elementor-heading-title {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
}



body.service-page--keychain .elementor-element-342d896 .elementor-heading-title {
  background: rgba(247, 174, 188, 0.35);
  border-color: #f7aebc;
}



body.service-page--keychain .elementor-element-30599ef .elementor-heading-title {
  background: rgba(254, 199, 73, 0.27);
  border-color: #f1ae11;
}



body.service-page--keychain .elementor-element-f6b095b .elementor-heading-title {
  background: rgba(241, 141, 91, 0.4);
  border-color: #f28c5e;
}



body.service-page--keychain .elementor-element-5784d26 .service-media::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: #f9dce3;
  transform: translate(-50%, -50%);
}



body.service-page--keychain .elementor-element-5784d26 .service-split-grid:nth-child(3) .service-media::before {
  width: 155px;
  height: 155px;
  background: #f9d778;
  box-shadow: 0 0 0 30px #fce8ac;
}



body.service-page--keychain .elementor-element-5784d26 .service-split-grid:nth-child(4) .service-media::before {
  width: 185px;
  height: 120px;
  border-radius: 60% 40% 58% 42%;
  background: #f6c4aa;
  transform: translate(-50%, -50%) rotate(-24deg);
}



body.service-page--keychain .elementor-element-3966d93,
body.service-page--keychain .elementor-element-47929a3 {
  padding-block: 115px;
}



body.service-page--keychain .elementor-element-3966d93 > .e-con-inner,
body.service-page--keychain .elementor-element-47929a3 > .e-con-inner {
  width: min(calc(100% - 96px), 1140px) !important;
  max-width: 1140px !important;
  margin-inline: auto;
}



/* .service-feature-grid's shared default (service-detail.css) is
   repeat(2,1fr) — correct for pages with an even card count, but this page
   has 5. Services_Keychain.svg wants 3 columns, and — per the mock's own
   card x-positions — the leftover row of 2 cards is horizontally *centered*
   as a group (row 2's card centers sit at the same midpoint as row 1's 3
   cards), not left-hugging columns 1-2 the way plain CSS Grid auto-placement
   would. A grid can't center an incomplete row on its own, so switch to
   flex-wrap with justify-content:center instead, sizing each card to match
   the same 3-per-row width. */
@media (min-width: 768px) /* hg-zoom A12: was 900px */ {
  body.service-page--keychain .elementor-element-729241d {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.service-page--keychain .elementor-element-729241d .service-feature-card {
    flex: 0 1 calc(33.333% - 16px);
  }
}



@media (max-width: 767px) {

  body.service-page--keychain .elementor-element-4401981 {
    width: 100% !important;
    min-height: 0;
    padding: 0 !important;
  }


  body.service-page--keychain .elementor-element-4401981 .service-split-text {
    width: calc(100% - 96px) !important;
    margin-inline: auto;
    /* Keychain_Mobile.svg centers the heading/subheading/paragraph/button
       column under the full-bleed hero photo; this container had no
       text-align at all, so it fell back to the browser default (left). */
    text-align: center;
  }


  body.service-page--keychain .elementor-element-4401981 .service-media {
    width: 100% !important;
    max-width: none !important;
    /* Keychain_Mobile.svg's hero photo rect is y=70,height=604 (full-bleed,
       directly under the header) — was 425px, a ~179px undersized crop. */
    height: 604px;
    min-height: 604px;
    padding: 0 !important;
    overflow: hidden;
  }


  body.service-page--keychain .elementor-element-4401981 .service-media img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 604px !important;
    object-fit: cover;
    border-radius: 0 !important;
  }


  body.service-page--keychain .elementor-element-5784d26 { padding: 0 0 70px; }


  body.service-page--keychain .elementor-element-5784d26 > .e-con-inner,
  body.service-page--keychain .elementor-element-3966d93 > .e-con-inner,
  body.service-page--keychain .elementor-element-47929a3 > .e-con-inner {
    width: calc(100% - 96px) !important;
  }


  body.service-page--keychain .elementor-element-5784d26 .service-split-grid {
    min-height: 0;
    margin-bottom: 75px;
  }


  body.service-page--keychain .elementor-element-5784d26 .service-media { min-height: 230px; }


  body.service-page--keychain .elementor-element-3966d93,
  body.service-page--keychain .elementor-element-47929a3 { padding-block: 58px; }



  /* Step 2's photo+text pair (data-id ac61c41) has its widgets in the
     opposite DOM order from steps 1 and 3 (text widget before image widget)
     — intentional at desktop, where it produces the alternating left/right
     zigzag confirmed against Services_Keychain.png (row 2's image sits on
     the right, text on the left). On mobile everything collapses to one
     column with no grid-row override, so plain source order took over and
     rendered step 2's title/description above its photo instead of below
     it, unlike steps 1 and 3 and unlike Keychain_Mobile.svg (every step:
     photo, then number, then title, then description). Force the image
     first here only. */
  body.service-page--keychain .elementor-element-45da2a1 {
    order: -1;
  }
}
/* hg:P4:ukuran-mockup — Services_Keychain.svg / Keychain_Mobile.svg. Aturan tema (thegrail-adapter.css "scaling down…") memberi clamp yang lebih
   kecil dari mockup: tagline desktop ≤20.8px (mockup 30/w500, 2 baris "…Your Daily / Carry"), "Why It's More Than Just a Photo" ≤32px (mockup 40),
   mobile tagline 17.6 (mockup 20, "Memories Made for / Your Daily Carry"), "Boost…" mobile 24 (mockup 20).
   max-width dari lebar baris Inter terukur: desktop 435 ≤ w < 523 → 470; mobile 186 ≤ w < 235 → 210. */
body.service-page--keychain .elementor-element-64c871f.service-tagline .elementor-heading-title { font-size: 30px !important; line-height: 36px !important; font-weight: 500 !important; max-width: 470px !important; background-image: linear-gradient(90deg, #F1AE11, #F26AAA) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; }
body.service-page--keychain .service-section-center h2.title-gradient.title-gradient { font-size: 40px !important; line-height: 46px !important; }
@media (max-width: 767px) {
  body.service-page--keychain .elementor-element-64c871f.service-tagline .elementor-heading-title { font-size: 20px !important; line-height: 28px !important; max-width: 210px !important; margin-left: auto !important; margin-right: auto !important; }
  body.service-page--keychain .service-section-center h2.title-gradient.title-gradient { font-size: 25px !important; line-height: 30px !important; }
  body.service-page--keychain .elementor-element-a4ad113 h2.title-gradient.title-gradient { font-size: 20px !important; line-height: 25px !important; }
}
/* hg:P4:gradien-judul — hero desktop 3 titik #F26AAA→#F28C5E→#F1AE11 (mobile 2 titik = live); "Why It's More…" & "Boost Your Brand Engagement"
   3 titik di kedua viewport (live default oranye→pink). */
@media (min-width: 768px) {
  body.service-page--keychain .service-split-text h1.title-gradient.title-gradient { background-image: linear-gradient(90deg, #F26AAA, #F28C5E 50%, #F1AE11) !important; }
}
body.service-page--keychain .service-section-center h2.title-gradient.title-gradient, body.service-page--keychain .elementor-element-a4ad113 h2.title-gradient.title-gradient { background-image: linear-gradient(90deg, #F26AAA, #F28C5E 50%, #F1AE11) !important; }
/* hg:P5:kartu — rx 9 + stroke 2 → tepi luar 10 (live 9, gradien vertikal sudah benar). */
body.service-page--keychain .elementor-element-729241d > .elementor-element.elementor-element { border-radius: 10px !important; }
/* hg:quick-m:keychain — Keychain_Mobile.png (440). Mobile saja; px mentah di widget ber-zoom, calc(N px * --hg-vw-scale) di luar. */
@media (max-width: 767px) {
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-dcc222c { height: calc(604px * var(--hg-vw-scale, 1)) !important; min-height: calc(604px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-5784d26 .elementor-element.elementor-element-143148c img { height: calc(604px * var(--hg-vw-scale, 1)) !important; width: 100% !important; object-fit: cover !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-4401981 .elementor-element.elementor-element-c7e70d9 { width: calc(100% - 80px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-f10ee98 h1.title-gradient.title-gradient { font-size: 25px !important; line-height: 30px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-ad60203 .elementor-heading-title { font-size: 18px !important; line-height: 24px !important; max-width: 330px !important; margin-left: auto !important; margin-right: auto !important; color: #403e3e !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-ac0efa6 .elementor-button.elementor-button { width: 146px !important; height: 39px !important; min-height: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; line-height: 1 !important; }
  /* S2 */
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-b3097fc h2.title-gradient.title-gradient { max-width: 240px !important; margin-left: auto !important; margin-right: auto !important; }
  body.service-page--keychain.service-page--keychain :is(.elementor-element-55bc3ea,.elementor-element-2492cf2,.elementor-element-a83ea8d).elementor-element { align-self: center !important; margin-left: auto !important; margin-right: auto !important; }
  body.service-page--keychain.service-page--keychain :is(.elementor-element-3184fa0,.elementor-element-7e25377,.elementor-element-8943a03).elementor-element :is(p, .service-process-number) { font-size: 60px !important; line-height: 60px !important; font-weight: 600 !important; margin: 0 !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-3184fa0, body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-3184fa0 p { color: rgba(247, 174, 188, 0.56) !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-7e25377, body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-7e25377 p { color: rgba(241, 173, 19, 0.71) !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-8943a03, body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-8943a03 p { color: rgba(241, 141, 91, 0.68) !important; }
  body.service-page--keychain.service-page--keychain .service-process-title.elementor-element .elementor-heading-title.elementor-heading-title { font-size: 18px !important; line-height: 22px !important; font-weight: 600 !important; padding: 7px 18px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-342d896 .elementor-heading-title { color: #e94565 !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-30599ef .elementor-heading-title { color: #ffb300 !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-f6b095b .elementor-heading-title { color: #f95e00 !important; }
  body.service-page--keychain.service-page--keychain .service-process-desc.elementor-element .elementor-heading-title.elementor-heading-title { font-size: 18px !important; line-height: 24px !important; color: #403e3e !important; margin-left: auto !important; margin-right: auto !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-3a4cf93 .elementor-heading-title { max-width: 306px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-fa583c4 .elementor-heading-title { max-width: 278px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-b7ae5da.service-process-desc .elementor-heading-title.elementor-heading-title { max-width: 348px !important; line-height: 28px !important; }
  /* S3 */
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-47929a3 { background-color: #f1f3f7 !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-4f35e74 .elementor-heading-title { font-size: 18px !important; line-height: 24px !important; color: #403e3e !important; }
  /* jarak vertikal (pita tinta mockup vs live) */
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-f10ee98 { margin-top: 4px !important; margin-bottom: -19px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-64c871f { margin-bottom: 2px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-ad60203 { margin-bottom: 9px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-5784d26 { padding-bottom: 0 !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-3966d93 { padding-top: calc(43px * var(--hg-vw-scale, 1)) !important; padding-bottom: calc(39px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-ff73aef { margin-top: calc(-102px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain :is(.elementor-element-ac61c41,.elementor-element-b68c506).elementor-element { margin-top: calc(-8px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain :is(.elementor-element-6b020c6,.elementor-element-9d3457c,.elementor-element-a25baa2).elementor-element { margin-top: calc(-18px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain .service-process-title.elementor-element.elementor-element { margin-top: -14px !important; }
  body.service-page--keychain.service-page--keychain .service-process-desc.elementor-element.elementor-element { margin-top: 2px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-47929a3 { padding-top: calc(20px * var(--hg-vw-scale, 1)) !important; padding-bottom: calc(61px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-a4ad113 h2.title-gradient.title-gradient { white-space: nowrap !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-4f35e74 { margin-top: -12px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-729241d { margin-top: calc(16px * var(--hg-vw-scale, 1)) !important; row-gap: calc(32px * var(--hg-vw-scale, 1)) !important; width: calc(314px * var(--hg-vw-scale, 1)) !important; max-width: none !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  /* langkah 2 & 3 di mockup berjarak lebih longgar dari langkah 1 (gambar→nomor 42, nomor→chip 28) */
  body.service-page--keychain.service-page--keychain :is(.elementor-element-9d3457c,.elementor-element-a25baa2).elementor-element.elementor-element { margin-top: calc(-6px * var(--hg-vw-scale, 1)) !important; }
  body.service-page--keychain.service-page--keychain :is(.elementor-element-30599ef,.elementor-element-f6b095b).service-process-title.elementor-element.elementor-element { margin-top: 1px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element.elementor-element-b68c506 { margin-top: calc(-13px * var(--hg-vw-scale, 1)) !important; }
  /* kartu S3: tinggi per kartu dari mockup (konten rata atas) */
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-1a5e48e, body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-366a291 { min-height: 222px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-7130397 { min-height: 194px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-8a769e4 { min-height: 191px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-6f79d78 { min-height: 242px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-4f35e74 .elementor-heading-title { max-width: 276px !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element-729241d > .elementor-widget-icon-box.elementor-element { display: flex !important; flex-direction: column !important; justify-content: center !important; }
  /* dekorasi: lingkaran pink (pusat 40,1262 r125) & cincin kuning (pusat 439,1877, inti 120 + glow 32) dari mockup */
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element.elementor-element-833092b::before { width: calc(250px * var(--hg-vw-scale, 1)) !important; height: calc(250px * var(--hg-vw-scale, 1)) !important; left: calc(14px * var(--hg-vw-scale, 1)) !important; top: calc(75px * var(--hg-vw-scale, 1)) !important; background: #fce3e8 !important; }
  body.service-page--keychain.service-page--keychain .elementor-element.elementor-element.elementor-element-45da2a1::before { width: calc(120px * var(--hg-vw-scale, 1)) !important; height: calc(120px * var(--hg-vw-scale, 1)) !important; box-shadow: 0 0 0 calc(32px * var(--hg-vw-scale, 1)) #fce8ac !important; left: calc(100% + 25px * var(--hg-vw-scale, 1)) !important; top: calc(65px * var(--hg-vw-scale, 1)) !important; }
}
/* hg:P2:kc-desk-gap — mockup desktop: jarak hero→S2 judul 119px (live 303px): padding bawah hero 145→0, atas S2 115→76; tagline 30px. */
@media (min-width: 768px) {
  body.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-5784d26 { padding-bottom: 0 !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-3966d93 { padding-top: 76px !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-64c871f .elementor-heading-title.elementor-heading-title { font-size: 30px !important; line-height: 36px !important; }
}
/* hg:kcv-c1:S1-desktop hero */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-143148c { margin-left: -42px; }
  body.service-page--keychain .elementor-element-c7e70d9 { padding-bottom: 150px; }
  body.service-page--keychain .elementor-element-4401981 { margin-bottom: -46px; }
}

/* hg:P2:kc-hero-naik — audit waived 2026-10-04 (pixel desktop): judul hero 26px lebih rendah dari mockup → padding-top 120→108, bawah 0 (review P7: teks hero 14px terlalu tinggi) (S2 ikut -13). Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element.elementor-element-5784d26.elementor-element-5784d26.elementor-element-5784d26 { padding-top: 108px !important; padding-bottom: 13px !important; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-55bc3ea */@media (min-width: 768px) {
  .elementor-93 .elementor-element.elementor-element-55bc3ea, .elementor-93 .elementor-element.elementor-element-55bc3ea img { width: 390px !important; height: 390px !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
}
@media (max-width: 767px) {
  .elementor-93 .elementor-element.elementor-element-55bc3ea, .elementor-93 .elementor-element.elementor-element-55bc3ea img { width: calc(329px * var(--hg-vw-scale, 1)) !important; height: calc(329px * var(--hg-vw-scale, 1)) !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
}
/* hg:lm-P2 radius media = 8px (mockup) */
.elementor-93 .elementor-element.elementor-element-55bc3ea.elementor-element.elementor-element, .elementor-93 .elementor-element.elementor-element-55bc3ea.elementor-element.elementor-element img, .elementor-93 .elementor-element.elementor-element-55bc3ea.elementor-element.elementor-element video, .elementor-93 .elementor-element.elementor-element-55bc3ea.elementor-element.elementor-element .elementor-wrapper, .elementor-93 .elementor-element.elementor-element-55bc3ea.elementor-element.elementor-element .elementor-widget-container { border-radius:8px !important; }
.elementor-93 .elementor-element.elementor-element-55bc3ea.elementor-element.elementor-element .elementor-widget-container, .elementor-93 .elementor-element.elementor-element-55bc3ea.elementor-element.elementor-element .elementor-wrapper { overflow:hidden; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-833092b *//* hg:P5:r12-kc-m-circles — revisi-12 144:3125: S2 langkah 01 mobile = mockup mobile: Ellipse 456 r119 @38.75,1268.74 (#F7AEBC 35%) + 2 lingkaran kecil Ellipse 449 (#FFE2DF r26.5 @45.99,1103.77) & 448 (#F7AEBC 76%, 18.5x18 @-3.9,1129.75). Posisi relatif foto (mockup 55,1196; host x26, foto host+10). Mobile saja. */
@media (max-width: 767px) {
  html body.service-page--keychain .elementor-element.elementor-element.elementor-element-833092b.elementor-element-833092b::before { width: calc(238px * var(--hg-vw-scale, 1)) !important; height: calc(238px * var(--hg-vw-scale, 1)) !important; left: calc(38.75px * var(--hg-vw-scale, 1) - 26px) !important; top: calc(10px + 72.74px * var(--hg-vw-scale, 1)) !important; }
  html body.service-page--keychain .elementor-element.elementor-element-833092b.elementor-element-833092b::after { content: "" !important; display: block !important; position: absolute; z-index: -1; pointer-events: none; left: calc(-30px * var(--hg-vw-scale, 1) - 26px); top: calc(10px - 126px * var(--hg-vw-scale, 1)); width: calc(110px * var(--hg-vw-scale, 1)); height: calc(90px * var(--hg-vw-scale, 1)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 1070 110 90'%3E%3Cellipse cx='-3.89846' cy='1129.75' rx='18.5' ry='18' transform='rotate(-70.7069 -3.89846 1129.75)' fill='%23F7AEBC' fill-opacity='0.76'/%3E%3Ccircle cx='45.9881' cy='1103.77' r='26.5' fill='%23FFE2DF'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3184fa0 *//* hg:P2:kc-s2-n01 — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-3184fa0.elementor-element-3184fa0.elementor-element-3184fa0.elementor-element-3184fa0 { position: relative !important; top: -25px !important; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-342d896 *//* hg:P2:kc-s2-t01 — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-342d896.elementor-element-342d896.elementor-element-342d896.elementor-element-342d896 { position: relative !important; top: -39px !important; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-3a4cf93 *//* hg:P4:kc-s2-lebar1 — audit 2026-10-04: paragraf 01 mockup 4 baris (live 5): lebar 370→392. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element.elementor-element-3a4cf93.elementor-element-3a4cf93.elementor-element-3a4cf93 { max-width: 392px !important; width: 392px !important; }
}

/* hg:P2:kc-s2-p01 — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-3a4cf93.elementor-element-3a4cf93.elementor-element-3a4cf93.elementor-element-3a4cf93 { position: relative !important; top: -23px !important; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2492cf2 */@media (min-width: 768px) {
  .elementor-93 .elementor-element.elementor-element-2492cf2, .elementor-93 .elementor-element.elementor-element-2492cf2 img { width: 390px !important; height: 390px !important; max-width: none !important; max-height: none !important; }
}
@media (max-width: 767px) {
  .elementor-93 .elementor-element.elementor-element-2492cf2, .elementor-93 .elementor-element.elementor-element-2492cf2 img { width: calc(329px * var(--hg-vw-scale, 1)) !important; height: calc(329px * var(--hg-vw-scale, 1)) !important; max-width: none !important; max-height: none !important; }
}
/* hg:lm-P2 radius media = 8px (mockup) */
.elementor-93 .elementor-element.elementor-element-2492cf2.elementor-element.elementor-element, .elementor-93 .elementor-element.elementor-element-2492cf2.elementor-element.elementor-element img, .elementor-93 .elementor-element.elementor-element-2492cf2.elementor-element.elementor-element video, .elementor-93 .elementor-element.elementor-element-2492cf2.elementor-element.elementor-element .elementor-wrapper, .elementor-93 .elementor-element.elementor-element-2492cf2.elementor-element.elementor-element .elementor-widget-container { border-radius:8px !important; }
.elementor-93 .elementor-element.elementor-element-2492cf2.elementor-element.elementor-element .elementor-widget-container, .elementor-93 .elementor-element.elementor-element-2492cf2.elementor-element.elementor-element .elementor-wrapper { overflow:hidden; }/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a83ea8d */@media (min-width: 768px) {
  .elementor-93 .elementor-element.elementor-element-a83ea8d, .elementor-93 .elementor-element.elementor-element-a83ea8d img { width: 390px !important; height: 390px !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
}
@media (max-width: 767px) {
  .elementor-93 .elementor-element.elementor-element-a83ea8d, .elementor-93 .elementor-element.elementor-element-a83ea8d img { width: calc(329px * var(--hg-vw-scale, 1)) !important; height: calc(329px * var(--hg-vw-scale, 1)) !important; max-width: none !important; max-height: none !important; object-fit: cover !important; }
}
/* hg:lm-P2 radius media = 8px (mockup) */
.elementor-93 .elementor-element.elementor-element-a83ea8d.elementor-element.elementor-element, .elementor-93 .elementor-element.elementor-element-a83ea8d.elementor-element.elementor-element img, .elementor-93 .elementor-element.elementor-element-a83ea8d.elementor-element.elementor-element video, .elementor-93 .elementor-element.elementor-element-a83ea8d.elementor-element.elementor-element .elementor-wrapper, .elementor-93 .elementor-element.elementor-element-a83ea8d.elementor-element.elementor-element .elementor-widget-container { border-radius:8px !important; }
.elementor-93 .elementor-element.elementor-element-a83ea8d.elementor-element.elementor-element .elementor-widget-container, .elementor-93 .elementor-element.elementor-element-a83ea8d.elementor-element.elementor-element .elementor-wrapper { overflow:hidden; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b92a9ed *//* hg:P5:r11-kc-blob - blob peach langkah 03 = path Ellipse 450 svg-path mockup (bbox 536.4,2295.1 200.5x166.7, relatif foto), di belakang foto (revisi-11) */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element.elementor-element-b92a9ed.elementor-element-b92a9ed::before { left: 335.39px; top: 308.1px; width: 200.53px; height: 166.7px; border-radius: 0; box-shadow: none; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='536.387 2295.096 200.528 166.7'%3E%3Cpath d='M724.653 2313.77C698.377 2268.25 699.225 2316.83 651.547 2344.36C603.869 2371.88 514.866 2374.2 541.143 2419.71C567.42 2465.23 638.226 2473.54 685.904 2446.02C733.582 2418.49 750.93 2359.28 724.653 2313.77Z' fill='%23F18D5B' fill-opacity='0.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
}
/* hg:P5:r12-kc-m-blob — revisi-12 151:3839: blob peach langkah 03 mobile = path Ellipse 450 svg-path mobile (bbox 270.4,2696.1 200.5x166.7; foto mockup 55,2469), di belakang foto; menggantikan elips CSS terputar. Mobile saja. */
@media (max-width: 767px) {
  html body.service-page--keychain .elementor-element.elementor-element.elementor-element-b92a9ed.elementor-element-b92a9ed::before { left: calc(270.387px * var(--hg-vw-scale, 1) - 26px) !important; top: calc(10px + 227.096px * var(--hg-vw-scale, 1)) !important; width: calc(200.528px * var(--hg-vw-scale, 1)) !important; height: calc(166.7px * var(--hg-vw-scale, 1)) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='270.387 2696.096 200.528 166.7'%3E%3Cpath d='M458.653 2714.77C432.377 2669.25 433.225 2717.83 385.547 2745.36C337.869 2772.88 248.866 2775.2 275.143 2820.71C301.42 2866.23 372.226 2874.54 419.904 2847.02C467.582 2819.49 484.93 2760.28 458.653 2714.77Z' fill='%23F18D5B' fill-opacity='0.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat !important; }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-8943a03 *//* hg:P2:kc-s2-n03 — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-8943a03.elementor-element-8943a03.elementor-element-8943a03.elementor-element-8943a03 { position: relative !important; top: 48px !important; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-f6b095b *//* hg:P2:kc-s2-t03 — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-f6b095b.elementor-element-f6b095b.elementor-element-f6b095b.elementor-element-f6b095b { position: relative !important; top: 40px !important; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-b7ae5da *//* hg:P4:kc-s2-lebar3 — paragraf 03 mockup 5 baris (live 6): lebar 468→500. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element.elementor-element-b7ae5da.elementor-element-b7ae5da.elementor-element-b7ae5da { max-width: 500px !important; width: 500px !important; }
}

/* hg:P2:kc-s2-p03 — review P7 2026-10-04. Desktop saja. */
@media (min-width: 768px) {
  html body .elementor-93 .elementor-element-b7ae5da.elementor-element-b7ae5da.elementor-element-b7ae5da.elementor-element-b7ae5da { position: relative !important; top: 58px !important; width: 460px !important; max-width: 460px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3966d93 *//* hg:P3:kc-desk-s2 — mockup desktop S2: numeral 75px/600 berwarna pastel, chip 22px/600 berwarna, deskripsi 22px lh28, langkah 02 rata kanan. */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-3184fa0 .elementor-heading-title, body.service-page--keychain .elementor-element-7e25377 .elementor-heading-title, body.service-page--keychain .elementor-element-8943a03 .elementor-heading-title { font-size: 75px !important; font-weight: 600 !important; line-height: 78px !important; }
  body.service-page--keychain .elementor-element-3184fa0 .elementor-heading-title { color: #F7AEBC !important; -webkit-text-fill-color: #F7AEBC !important; }
  body.service-page--keychain .elementor-element-7e25377 .elementor-heading-title { color: #F1AD13 !important; -webkit-text-fill-color: #F1AD13 !important; }
  body.service-page--keychain .elementor-element-8943a03 .elementor-heading-title { color: #F18D5B !important; -webkit-text-fill-color: #F18D5B !important; }
  body.service-page--keychain .elementor-element-342d896 .elementor-heading-title { font-size: 22px !important; font-weight: 600 !important; color: #E94565 !important; -webkit-text-fill-color: #E94565 !important; }
  body.service-page--keychain .elementor-element-30599ef .elementor-heading-title { font-size: 22px !important; font-weight: 600 !important; color: #FFB300 !important; -webkit-text-fill-color: #FFB300 !important; }
  body.service-page--keychain .elementor-element-f6b095b .elementor-heading-title { font-size: 22px !important; font-weight: 600 !important; color: #F95E00 !important; -webkit-text-fill-color: #F95E00 !important; }
  body.service-page--keychain .service-process-desc .elementor-heading-title.elementor-heading-title, body.service-page--keychain .service-process-desc p { font-size: 22px !important; line-height: 28px !important; }
  body.service-page--keychain .elementor-element-9d3457c .elementor-widget, body.service-page--keychain .elementor-element-9d3457c .elementor-heading-title { text-align: right !important; }
  body.service-page--keychain .elementor-element-9d3457c { align-items: flex-end !important; }
}
/* hg:P3:kc-desk-s2b — numeral (text-editor) 75px/600 berwarna, chip 22px/600 berwarna (spesifisitas lebih tinggi). */
@media (min-width: 768px) {
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-3184fa0, body.service-page--keychain.service-page--keychain.service-page .elementor-element-3184fa0 * { font-size: 75px !important; font-weight: 600 !important; line-height: 78px !important; color: #F7AEBC !important; -webkit-text-fill-color: #F7AEBC !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-7e25377, body.service-page--keychain.service-page--keychain.service-page .elementor-element-7e25377 * { font-size: 75px !important; font-weight: 600 !important; line-height: 78px !important; color: #F1AD13 !important; -webkit-text-fill-color: #F1AD13 !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-8943a03, body.service-page--keychain.service-page--keychain.service-page .elementor-element-8943a03 * { font-size: 75px !important; font-weight: 600 !important; line-height: 78px !important; color: #F18D5B !important; -webkit-text-fill-color: #F18D5B !important; }
  body.service-page--keychain.service-page--keychain.service-page .service-process-title .elementor-heading-title.elementor-heading-title { font-size: 22px !important; font-weight: 600 !important; line-height: 1.3 !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-342d896 .elementor-heading-title.elementor-heading-title { color: #E94565 !important; -webkit-text-fill-color: #E94565 !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-30599ef .elementor-heading-title.elementor-heading-title { color: #FFB300 !important; -webkit-text-fill-color: #FFB300 !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-f6b095b .elementor-heading-title.elementor-heading-title { color: #F95E00 !important; -webkit-text-fill-color: #F95E00 !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-9d3457c .elementor-widget, body.service-page--keychain.service-page--keychain.service-page .elementor-element-9d3457c .elementor-widget * { text-align: right !important; }
}
/* hg:kcv-c1:S2-desktop rows */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-b3097fc { max-width: 420px; margin-inline: auto; }
  body.service-page--keychain :is(.elementor-element-ac61c41,.elementor-element-b68c506) { margin-top: -50px; }
  body.service-page--keychain :is(.elementor-element-833092b,.elementor-element-b92a9ed) { padding-left: 85px; }
  body.service-page--keychain .elementor-element-45da2a1 { padding-left: 64px; }
  body.service-page--keychain .elementor-element-833092b::before { left: 94px; top: 34px; }
  body.service-page--keychain .elementor-element-45da2a1::before { left: calc(100% - 44px); top: 10px; width: 120px; height: 120px; box-shadow: 0 0 0 32px #fce8ac; }
  body.service-page--keychain .elementor-element-3a4cf93 { max-width: 370px; }
  body.service-page--keychain :is(.elementor-element-7e25377,.elementor-element-30599ef,.elementor-element-fa583c4) { margin-right: -33px; }
  body.service-page--keychain .elementor-element-fa583c4 { max-width: 350px; margin-left: auto; }
}
/* hg:kcv-c1:S2-fix pitch */
@media (min-width: 768px) {
  body.service-page--keychain :is(.elementor-element-ac61c41,.elementor-element-b68c506) { margin-top: -70px; }
  body.service-page--keychain .elementor-element-45da2a1 { padding-left: 54px; }
  body.service-page--keychain .elementor-element-45da2a1::before { left: calc(100% - 44px); }
  body.service-page--keychain .elementor-element-3a4cf93.elementor-widget { max-width: 370px !important; width: 370px !important; }
  body.service-page--keychain .elementor-element-fa583c4.elementor-widget { max-width: 350px !important; width: 350px !important; margin-left: auto; }
}
/* hg:kcv-c1:S2-text-col center */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-b3097fc { max-width: 380px; }
  body.service-page--keychain :is(.elementor-element-6b020c6,.elementor-element-9d3457c,.elementor-element-a25baa2) { justify-content: center; gap: 8px; }
  body.service-page--keychain :is(.elementor-element-3184fa0,.elementor-element-7e25377,.elementor-element-8943a03) { margin-bottom: -20px; }
}
/* hg:kcv-c1:S2-title wrap */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-b3097fc.elementor-element-b3097fc { width: 380px !important; max-width: 380px !important; }
  body.service-page--keychain .elementor-element-b3097fc h2.title-gradient.title-gradient { max-width: none !important; }
}
/* hg:kcv-c1:S2-gap-below-heading */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-edcd294 { margin-bottom: -2px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-47929a3 *//* hg:P5:kc-desk-s3 — mockup desktop S3: latar #f1f3f7, kartu 362/334/334 gap 42 + baris ke-2 2 kartu di tengah, judul 1 baris, paragraf 18px (live putih, grid 3 kolom 304px). */
@media (min-width: 768px) {
  body.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-47929a3 { background-color: #f1f3f7 !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-729241d { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 42px 46px !important; width: 1113px !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-729241d .service-feature-card { width: 334px !important; max-width: none !important; flex: none !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-729241d .elementor-element-1a5e48e { width: 362px !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-a4ad113 { width: 600px !important; max-width: none !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-4f35e74 { width: 560px !important; max-width: none !important; margin-left: 15px !important; }
  body.service-page--keychain.service-page--keychain.service-page .elementor-element-4f35e74 .elementor-heading-title.elementor-heading-title { font-size: 18px !important; }
}
/* hg:P5:kc-desk-s3b — lebar grid 1130 agar 3 kartu muat sebaris (1114px). */
@media (min-width: 768px) {
  body.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-729241d.elementor-element-729241d { width: 1130px !important; }
}
/* hg:kcv-c1:S3-desktop centering */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-47929a3 { padding-bottom: 63px; }
  body.service-page--keychain .elementor-element-32b3caa { margin-left: -62px; }
  body.service-page--keychain .elementor-element-4f35e74 { margin-left: 120px; }
  body.service-page--keychain .elementor-element-729241d { width: 1109px !important; max-width: none !important; margin-left: -38px; }
}
/* hg:kcv-c1:S3-grid width */
@media (min-width: 768px) {
  body.service-page--keychain.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-729241d.elementor-element-729241d { width: 1130px !important; margin-left: -42px !important; margin-right: 0 !important; }
}
/* hg:kcv-c1:S3-gridwidth-fix */
@media (min-width: 768px) {
  body.service-page--keychain.service-page--keychain.service-page--keychain.service-page .elementor-element.elementor-element-729241d.elementor-element-729241d { width: 1130px !important; margin-left: -42px !important; margin-right: 0 !important; }
}
/* hg:kcv-c1:S3-title-offset */
@media (min-width: 768px) {
  body.service-page--keychain .elementor-element-32b3caa { margin-top: -28px; margin-bottom: 28px; }
  body.service-page--keychain .elementor-element-4f35e74 { margin-top: -20px; }
}
/* hg:kcv-c1:S3-card-text-width */
@media (min-width: 768px) {
  body.service-page--keychain :is(.elementor-element-366a291,.elementor-element-7130397) { padding-left: 46px; padding-right: 46px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab76c42 *//* hg: social-var */
.elementor-93 .elementor-element.elementor-element-ab76c42{--hg-social-t:139.4px;--hg-social-pb:76px;--hg-social-bg:#FFFFFF;--hg-social-tm:14.55vw;--hg-social-pbm:6.34vw;--hg-social-fsm:20px;--hg-social-lhm:24px;width:100%}/* End custom CSS */
/* Start custom CSS *//* hg:themecss */
/* Restore images on Keychain page that were hidden by service-keychain.css */
body.service-page--keychain .elementor-element-5784d26 .service-media img{
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px;
}
/* Restore left alignment for Boost Your Brand Engagement title and text */
body.service-page--keychain .elementor-element-a4ad113,
body.service-page--keychain .elementor-element-a4ad113 h2.title-gradient,
body.service-page--keychain .elementor-element-4f35e74 p.elementor-heading-title{
  text-align: left !important;
  font-size: clamp(1.5rem, calc(var(--hg-page-w, 100vw) * 3.5 / 100), 2.2rem) !important;
  /* Proper size for title */
}
body.service-page--keychain .elementor-element-4f35e74 p.elementor-heading-title{
  font-size: 1rem !important;
  /* Proper size for paragraph */
}
/* Keychain "Boost Your Brand Engagement" feature cards (elementor-element-
   729241d, .service-feature-grid): 5 native icon-box widgets, which rendered
   with Elementor defaults (no card, blue solid Font Awesome icons) and
   overflowed the viewport on mobile. Rebuilt to Services_Keychain.svg:
   - desktop: 1111px band (x 165-1276), 3 cards on row 1, the last 2 centered
     on row 2 (flex-wrap + justify-content:center gives that for free),
     44px gaps, 252px-tall cards, 9px radius, 2px top-to-bottom
     #F1AE11 -> #F26AAA gradient stroke on white;
   - icons are the mockup's own 2px black outline glyphs (paths lifted from
     the SVG) painted as ::before backgrounds; the FA glyph Elementor
     outputs is hidden, so the widgets stay editable in Elementor;
   - Inter 20/500 #403E3E titles, 16px #403E3E descriptions;
   - tablet: 2 per row; mobile (Keychain_Mobile.svg): single column,
     cards inset to ~313px of a 440px screen (capped at 320px here), 34px
     gap, 18px black titles, 14px descriptions. */
body.service-page--keychain .elementor-element-729241d{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 44px !important;
  width: min(100% - 40px, 1111px) !important;
  max-width: 1111px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
body.service-page--keychain .elementor-element-729241d>.elementor-element{
  flex: 0 0 calc((100% - 88px) / 3) !important;
  width: calc((100% - 88px) / 3) !important;
  max-width: calc((100% - 88px) / 3) !important;
  min-width: 0 !important;
  min-height: 252px !important;
  margin: 0 !important;
  padding: 30px 16px 26px !important;
  box-sizing: border-box !important;
  border: 2px solid transparent !important;
  border-radius: 9px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, #f1ae11, #f26aaa) border-box !important;
  box-shadow: none !important;
  text-align: center !important;
}
body.service-page--keychain .elementor-element-729241d .elementor-icon-box-wrapper{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
}
body.service-page--keychain .elementor-element-729241d .elementor-icon-box-icon{
  margin: 0 0 22px !important;
  line-height: 0 !important;
}
body.service-page--keychain .elementor-element-729241d .elementor-icon{
  display: block !important;
  width: 48px !important;
  height: 50px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
body.service-page--keychain .elementor-element-729241d .elementor-icon>svg,
body.service-page--keychain .elementor-element-729241d .elementor-icon>i{
  display: none !important;
}
body.service-page--keychain .elementor-element-729241d .elementor-icon::before{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: center / contain no-repeat;
}
body.service-page--keychain .elementor-element-729241d .elementor-icon-box-title{
  margin: 0 0 8px !important;
  font-family: "Inter", var(--font-body, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #403e3e !important;
}
body.service-page--keychain .elementor-element-729241d .elementor-icon-box-title span{
  color: inherit !important;
}
body.service-page--keychain .elementor-element-729241d .elementor-widget-icon-box .elementor-icon-box-description,
body.service-page--keychain .elementor-element-729241d .elementor-icon-box-description{
  margin: 0 !important;
  font-family: "Inter", var(--font-body, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #403e3e !important;
}
@media (max-width: 1024px){
:where(html:not(.hg-page-zoom)) body.service-page--keychain .elementor-element-729241d{
    gap: 32px !important;
  }
}
@media (max-width: 1024px){
:where(html:not(.hg-page-zoom)) body.service-page--keychain .elementor-element-729241d>.elementor-element{
    flex-basis: calc((100% - 32px) / 2) !important;
    width: calc((100% - 32px) / 2) !important;
    max-width: calc((100% - 32px) / 2) !important;
  }
}
@media (max-width: 767px){
body.service-page--keychain .elementor-element-729241d{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 34px !important;
    width: min(100%, 320px) !important;
  }
}
@media (max-width: 767px){
body.service-page--keychain .elementor-element-729241d>.elementor-element{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 24px 22px !important;
    border-radius: 8px !important;
  }
}
@media (max-width: 767px){
body.service-page--keychain .elementor-element-729241d .elementor-icon-box-icon{
    margin-bottom: 18px !important;
  }
}
@media (max-width: 767px){
body.service-page--keychain .elementor-element-729241d .elementor-icon{
    width: 40px !important;
    height: 42px !important;
  }
}
@media (max-width: 767px){
body.service-page--keychain .elementor-element-729241d .elementor-icon-box-title{
    font-size: 18px !important;
    color: #000 !important;
  }
}
@media (max-width: 767px){
body.service-page--keychain .elementor-element-729241d .elementor-widget-icon-box .elementor-icon-box-description,
  body.service-page--keychain .elementor-element-729241d .elementor-icon-box-description{
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}
/* /hg:themecss *//* End custom CSS */