/*
 * TheGrail Adapter CSS for Hello Elementor
 * Maps standard Elementor widgets to TheGrail's custom design system.
 */
:root{
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-text: #403E3E;
  --color-text-muted: #6b6b6b;
  --color-gold: #F1AE11;
  --color-orange: #F1AE11;
  --color-pink: #F26AAA;
  --color-blue: #285689;
  --color-blue-dark: #285689;
  --color-icon-bg: #595959;
  --color-border: #e0e0e0;
  --color-border-soft: #E1E4ED;
  --color-surface-muted: #F1F3F7;
  --color-surface-alt: #F8FAFF;
  --color-text-secondary: #6D758F;
  --radius-tab: 7px;
  --gradient-cta: linear-gradient(90deg, #F1AE11 0%, #F26AAA 100%);
  --gradient-text: linear-gradient(90deg, #F1AE11 0%, #ff3493 100%);
  --radius-pill: 9999px;
  --radius-card: 8px;
  --radius-btn: 6px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter", var(--font-sans);
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}
html{
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 100%;
}
/* Reserve the browser-native scrollbar on desktop. This prevents its
   indicator from appearing and disappearing as responsive content reflows,
   without applying any custom scrollbar styling. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */{
html{
    overflow-y: scroll !important;
  }
}
body{
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden !important;
  overflow-y: visible !important;
  min-height: 100vh;
}
/* ==========================================================================
   Global footer resilience fallback
   ========================================================================== */
/* Elementor's per-page generated CSS (wp-content/uploads/elementor/css/) is
   currently empty on disk site-wide; most posts/pages regenerate their file
   dynamically on request, but the shared footer template's own file
   (post-137.css) 404s instead — so none of its containers ever receive the
   inline --display custom property Elementor normally sets per element, and
   `.e-con { display: var(--display) }` silently resolves to CSS's initial
   value ("inline") wherever nothing else in the cascade supplies a fallback.
   Most footer containers already get a working display from elsewhere
   (header-footer.css's `.site-footer .footer-inner` rule, or the columns'
   own default block-level divs), but the outer .site-footer wrapper itself
   and .footer-bottom (the copyright bar) had no such fallback — the outer
   wrapper rendering as inline meant its correct navy background never
   painted as a proper block, and white-on-navy footer link text became
   invisible white-on-white. This is a stopgap: the real fix is regenerating
   Elementor's CSS cache (Elementor → Tools → Regenerate Files & Data) or
   restoring wp-content/uploads/elementor/css/ write access so post-137.css
   is written like the others. */
body .elementor-location-footer .site-footer,
body .elementor-location-footer .footer-bottom{
  display: flex;
  flex-direction: column;
}
/* ==========================================================================
   Hero Section Overrides
   ========================================================================== */
/* Hero Intro Text */
/* Hero Main Title */
/* Hero Description */
/* Buttons */
/* ==========================================================================
   Services Section Overrides
   ========================================================================== */
/* Make Icon List look like a grid of pills */
/* ==========================================================================
   Features Section Overrides
   ========================================================================== */
/* Icon Boxes — mockup treatment (left-aligned icon+text row, no card,
   rounded-square icon with a per-item colored glow) lives in
   thegrail-original.css. This file used to duplicate this same selector
   with the old circular/plain-shadow card look; since this file loads
   after thegrail-original.css, its !important declarations were silently
   winning every tie and overriding the updated styling there. Left as
   just the couple of properties that file doesn't already set, so there's
   one source of truth for the rest instead of two competing ones. */
.thegrail-feature-box .elementor-icon-box-title{
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}
.thegrail-feature-box .elementor-icon-box-description{
  color: var(--color-text-muted) !important;
}
/* ==========================================================================
   Testimonials Overrides
   ========================================================================== */
/* ==========================================================================
   CTA Section Overrides
   ========================================================================== */
/* ==========================================================================
   Brands Section Overrides
   ========================================================================== */
/* Site main spacing for theme wrapper content */
main.site-main{
  padding-top: clamp(3rem, calc(var(--hg-page-w, 100vw) * 6 / 100), 5.5rem) !important;
  padding-bottom: clamp(3rem, calc(var(--hg-page-w, 100vw) * 6 / 100), 5.5rem) !important;
}
body.elementor-page main.site-main{
  padding-top: 0 !important;
  /* Elementor sections already provide the closing rhythm. A theme-level
     bottom gutter leaves a blank band before the global footer. */
  padding-bottom: 0 !important;
}
/* Terms & Privacy (page-legal.php, isi = post_content .doc-wrap: h1, p.subtitle, h2, p, ul/li, div.footer-note) — MOBILE
   saja, tanpa mockup (mode konsistensi, permintaan user 2026-10-01): rata kiri (justify merusak spasi di layar sempit),
   gutter 20px, hierarki judul jelas, ritme paragraf/daftar konsisten, URL/email panjang boleh patah. Desktop tidak berubah. */
@media (max-width: 899px){
:where(html:not(.hg-page-zoom)) body.elementor-page main.site-main{
    /* 2026-10-09: header Nav Menu Pro sticky kini ada di dalam alur dokumen, jadi section Elementor pertama langsung menempel di bawah header
       (mockup mobile: konten mulai di y=72). Padding 35px lama (header dulu fixed) menimbulkan pita kosong di bawah header. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
/* The home hero begins below a full-width mobile header and has no
     page-local offset of its own. Give only this landing page the complete
     header clearance; the other Elementor pages retain their tuned 35px. */
:where(html:not(.hg-page-zoom)) body.home main.site-main{
    /* 2026-10-09: header Nav Menu Pro di dalam alur → hero Home langsung di bawah header (mockup: teks mulai y≈117). Dulu 70px untuk header fixed. */
    padding-top: 0 !important;
  }
/* A mobile navigation intentionally locks the document while its overlay
     is open. This must win over the generic body overflow reset. */
}
/* FAQ mobile uses a deliberately quiet lead-in beneath the compact header.
   Keep the page heading prominent enough to retain its intended two-line
   editorial lockup. */
/* FAQ preview collage — coordinates are taken from the desktop FAQ artwork
   (1440px canvas). The section is its clipping frame; the four portrait
   cards continue naturally above/below it instead of being squashed into a
   2×2 grid. */
/* Service pages use the shared Elementor header. Keep its native menu
   trigger available on the phone layout even when the desktop navigation is
   hidden by Elementor's container rules. */
/* The source collage deliberately uses absolute image positions on desktop.
   On the 440px Holographic reference it becomes a contained two-column grid.
   Give the Elementor inner wrapper a real, viewport-sized grid so its source
   image widths cannot establish an overflowing min-content width. */
/* Carousels own their horizontal gesture; they must not widen the document. */
/* 2026-10-02: strip 3-warna di atas section social DIHAPUS sitewide (keputusan user) — tidak boleh ada di
   halaman manapun, terlepas dari dugaan sebelumnya bahwa mockup service menunjukkannya. Lihat juga penghapusan
   ::before kedua (mobile) di blok @media (max-width:767px) bawah ini. */
/* Service content already ends with its own Elementor section.  Do not add a
 * second, blank theme gutter before the global footer. */
body.service-page main.site-main{
  padding-bottom: 0 !important;
}
/* Legacy service templates store all visual sections in a boxed root
 * container. The root itself must span the viewport; its child sections own
 * their individual content widths. */
body.service-page .elementor-element.service-detail-page.e-con-boxed,
body.service-page .elementor-element.service-detail-page.e-con-boxed>.e-con-inner{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Service pages are assembled from self-contained full-bleed sections. The
 * root Elementor Flexbox still contributes its default `gap` between those
 * children, producing blank bands before shared social/contact widgets and
 * between adjacent service sections. Let the sections' own padding define
 * their rhythm instead. */
body.service-page .elementor-element.service-detail-page.e-con-boxed,
body.service-page .elementor-element.service-detail-page.e-con-boxed>.e-con-inner{
  --gap: 0px !important;
  gap: 0 !important;
  row-gap: 0 !important;
}
body.service-page .elementor-element.service-detail-page.e-con-boxed>.e-con-inner>*{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Some restored service documents use `e-con-full` at the root rather than
 * `e-con-boxed`. Apply the same neutral wrapper rhythm to both structures. */
body.service-page .service-detail-page,
body.service-page .service-detail-page>.e-con-inner{
  --gap: 0px !important;
  gap: 0 !important;
  row-gap: 0 !important;
}
body.service-page .service-detail-page>.e-con-inner>*{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* The Instagram component owns its spacing.  Elementor's otherwise-empty
 * parent/container and widget wrappers add a visible band before it on some
 * service templates, so reset those wrappers only when they contain it. */
/* The all-blog page reuses the same social/contact shortcodes. Its native
 * Elementor wrappers stay neutral so the shared sections own their spacing. */
body.page-id-79 .blog-shared-contact,
body.page-id-79 .blog-shared-contact>.e-con-inner,
body.page-id-79 .blog-shared-contact .elementor-widget-container{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Social feed is a shared component (`parts/section-instagram.php`).  The
   homepage had a mobile-only Elementor override while posts and other pages
   fell back to the old two-column grid.  Keep the homepage carousel treatment
   on every instance so the component is visually identical everywhere. */
/* The social feed is a horizontal swipe carousel on every viewport it is
   rendered as `.is-slideshow`.  Disable text/image selection and native image
   drag on the whole track so the finger/trackpad gesture is not hijacked by
   the browser's selection or drag behaviour. */
/* Keep the gallery edge-to-edge: images meet without gutters or rounded
   corners on both the grid and carousel variants. */
/* Desktop composition for the shared [thegrail_instagram] section (Home,
   Contact, Blog, and all 24 service pages render the same widget). This was
   originally written only as page-scoped custom_css on Home's own Elementor
   container, so every other page fell back to the old pill-card default
   below (.section-social .social-handle, max-width:760px) instead of the
   wide flat-bar handle + edge-to-edge carousel the mockups actually show
   (verified against Services_Holographic.svg text x/y, which lines up with
   this composition, not the pill-card). Made global here so the component
   is identical wherever it appears — page-wide zoom (S0) handles the
   1440->viewport scale, so plain mockup px is written directly (no --u).
   Excludes body.single-post: standalone blog articles already have their
   own in-flow desktop treatment further down (real content width, variable
   height above the section) and must not get this fixed-height canvas. */
@media (min-width: 768px){
/* Halaman layanan (bukan home): mockup layanan TIDAK punya latar abu #F1F3F7 di section social (putih, hanya tile feed yang
     berselang abu/putih) dan kartu form Contact mulai 814.8px di bawah atas teks "Check Us Out!" (Services_Glam/Keychain/Express/
     Holo Name Card identik; home 1008.6 dengan pita abu 919). Kanvas 919 abu milik home membuat pita abu panjang di bawah titik
     pagination + Contact tampak mepet (padding-top 8). Geometri isi (judul 70.4 … pagination 800) tetap sama dengan home.
     Tinggi: judul CSS 70.4 = spec 77.4 − 7 (offset kotak teks) → kartu harus di 70.4 + 814.8 + 7 = 892.2 dari atas section;
     = tinggi social + padding-top contact (8) + offset kartu di dalam contact (0) → 884 (+ --hg-social-dy per halaman, lihat di bawah). Koordinator 2026-10-01. */
/* Jarak atas section social (= tepi atas strip 3 warna = akhir section sebelumnya) → teks "Check Us Out!" BERBEDA per
     mockup layanan: 96.4 (mayoritas), 63.4 glambot/roving-scribble, 64.8 hpb, 125.4 luggage-tag/name-card, 185.4 id-card;
     home 77.4. --hg-social-dy = offset − 77.4 menggeser seluruh isi (geometri home) + tinggi section; judul→kartu Contact
     tetap 814.8 di semua mockup (tinggi 884 + dy: judul CSS 70.4+dy, kartu = tinggi + pt 8). Strip: biru selebar
     --hg-bar-n (bagian yang terlihat di tiap mockup), pink 113, emas 111, tinggi 25. Diukur 2026-10-01 dari 25 SVG layanan.
     ai-photo-booth DIKECUALIKAN (keputusan user: pengecualian mockup — tata letak social berbeda, tanpa strip). */
/* 2026-10-02: ai-photo-booth dikecualikan dari rule di atas, tapi kontennya (judul/desc/handle/feed/pagination)
     tetap diposisikan absolute oleh rule GENERIK body:not(.single-post) .section.section-social (baris ~826-934,
     nilai top mentah 70.4/122.5/235/318/800 tanpa --hg-social-dy, sama seperti versi home). Percobaan pertama
     height:auto SALAH — anak absolute tidak berkontribusi ke auto-height induk, jadi seluruh konten Instagram
     hilang dari layout (ketahuan lewat screenshot, langsung dibatalkan). Section generik men-set height:919px
     (ukuran kanvas HOME, bukan service page) + latar abu #F1F3F7 — keduanya bocor ke sini karena tidak
     dikecualikan. Pagination generik berhenti di top:800, jadi 884px (base tanpa dy, sama dengan komentar baris
     936 "kartu Contact mulai 814.8px di bawah judul") sudah pas; height eksplisit, BUKAN auto. */
/* ::before strip 3-warna dihapus 2026-10-02 (keputusan user, lihat catatan di atas blok ini). --hg-bar-n/--hg-bar-x
     yang hanya dipakai strip ini juga dibuang; --hg-social-dy (geometri judul/kartu, tidak terkait strip) dipertahankan. */
/* 2026-10-05: ruang putih atas social sesuai mockup (isu prioritas user) — judul mockup ±183px dari tepi section. */
}
@media (min-width: 768px) and (max-width: 1024px){
:where(html:not(.hg-page-zoom)) body.page-id-78 .faq-preview-media{
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
  }
}
@media (max-width: 767px){
/* On article pages the content wrapper retained a 48px bottom padding
     before the shared social section. The section itself already owns its
     mobile rhythm, so that wrapper gap reads as an unintended empty band. */
body.single-post .blog-single-content{
    padding-bottom: 0 !important;
  }
/* `single.php` renders this section inside the article page wrapper, whose
     mobile gutter was still visible around the grey panel. Break only this
     shared section out to the viewport so there is no empty side strip. */
}
/* The standalone post template places the shared social section directly
   after the article. Do not add a second empty band there. On desktop the
   feed uses the document's real content width instead of `100vw`: `100vw`
   includes the browser scrollbar, which was clipping the first/last slide
   and prevented the carousel from reaching either edge. */
@media (min-width: 768px)
/* hg-zoom A12: was 1025px */{
body.single-post .blog-single-content{
    padding-bottom: 0 !important;
  }
}
/* Hello's default non-Elementor page wrapper caps a standalone article at
   1140px (and adds side gutters on small screens).  The article deliberately
   keeps its readable measure through its own `.container` elements; the main
   wrapper itself must remain full-bleed so the banner, social feed and contact
   section share the same edge-to-edge canvas as the rest of the site. */
body.single-post main.site-main{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Each article section has its own designed vertical rhythm. The generic
     theme gutter here duplicated it above the hero and after the contact
     module. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.single-post .blog-single,
body.single-post .section.section-contact{
  width: 100% !important;
  max-width: none !important;
}
/* The desktop hero's generous editorial breathing room is excessive once the
   article stacks below the 70px mobile header. Keep a clear, compact entrance
   and let the following full-bleed sections meet their own rhythm. */
@media (max-width: 767px){
body.single-post main.site-main{
    /* Matches the mobile page rhythm below the 70px header without restoring
       the old oversized desktop wrapper gap. */
    padding-top: 35px !important;
  }
body.single-post .blog-single-hero{
    padding-top: 56px !important;
    padding-bottom: 32px !important;
  }
/* Full-bleed media and shared sections remain edge-to-edge; editorial
     elements need a consistent readable gutter. */
body.single-post .blog-single-hero>.container,
  body.single-post .blog-single-content{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
body.single-post .blog-single-content{
    padding-top: 32px !important;
  }
}
/* Holographic Party Rover -------------------------------------------------
   Page 12 was assembled from the shared service blocks, but its stored
   Elementor spacing left the hero copy on the photograph and turned the
   reference's print/benefit sequence into a generic split layout. Keep the
   Elementor widgets intact while restoring the artwork's distinct sequence. */
body.service-page--holographic-party-rover main.site-main,
body.service-page--holographic-party-rover .service-detail-page.service-holographic-party-rover{
  max-width: none !important;
  padding-top: 0 !important;
}
body.service-page--holographic-party-rover .service-hpr-sec-1{
  position: relative !important;
  min-height: 0 !important;
  padding: 316px 0 4px !important;
  overflow: hidden !important;
  background: #fff !important;
  text-align: center;
}
body.service-page--holographic-party-rover .service-hpr-sec-1::before{
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 226px; /* 296 - 70 (mobile); >=768 dioverride */
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .14)),
    url("assets/uploads/ui_svg/extracted_982a1b31.webp") center / cover no-repeat;
}
body.service-page--holographic-party-rover .hpr-intro-title{
  margin: 0 0 5px !important;
  color: #f28482;
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.15;
}
body.service-page--holographic-party-rover .hpr-intro-title em{
  color: #f28482;
  font-family: var(--font-serif);
  font-style: italic;
}
body.service-page--holographic-party-rover .hpr-intro-tag{
  margin: 0 0 var(--space-3);
  color: var(--color-orange);
  font-size: var(--text-base);
  font-weight: 700;
}
body.service-page--holographic-party-rover .hpr-mobile-intro{
  display: none;
}
body.service-page--holographic-party-rover .service-hpr-sec-1 .service-paragraph{
  width: min(100% - 40px, 560px) !important;
  margin: 0 auto var(--space-4) !important;
  color: #53515a !important;
  font-size: var(--text-base) !important;
  line-height: 1.35 !important;
}
body.service-page--holographic-party-rover .service-hpr-sec-1 .btn .elementor-button{
  min-height: 40px !important;
  padding: 10px 20px !important;
  border-radius: 5px !important;
  font-size: var(--text-sm) !important;
}
body.service-page--holographic-party-rover .service-hpr-sec-2{
  padding: var(--space-12) 0 var(--space-8) !important;
  background: #f1f3f7 !important;
  text-align: center;
}
body.service-page--holographic-party-rover .service-hpr-sec-2 .service-heading,
body.service-page--holographic-party-rover .elementor-element-s4 .service-heading{
  margin: 0 auto var(--space-3) !important;
  font-size: clamp(var(--text-2xl), calc(var(--hg-page-w, 100vw) * 2.3 / 100), 2rem) !important;
  line-height: 1.15 !important;
  text-align: center !important;
}
body.service-page--holographic-party-rover .service-hpr-sec-2 .service-paragraph,
body.service-page--holographic-party-rover .elementor-element-s4 .service-paragraph{
  width: min(100% - 40px, 640px) !important;
  margin: 0 auto var(--space-8) !important;
  color: #53515a !important;
  font-size: var(--text-base) !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
/* sec-2 content area: heading + cards + right portrait photo */
body.service-page--holographic-party-rover .elementor-element-s2_hd{
  --margin-left: 0px !important;
  --margin-right: 0px !important;
  --margin-inline-start: 0px !important;
  --margin-inline-end: 0px !important;
  --margin-block-start: 0px !important;
  --margin-block-end: 0px !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(100% - 96px, 780px) !important;
}
body.service-page--holographic-party-rover .elementor-12 .elementor-element.elementor-element-s2_hd,
body.service-page--holographic-party-rover .elementor-12 .elementor-element.elementor-element-s2_hd>.e-con-inner{
  --margin-left: 0px !important;
  --margin-right: 0px !important;
  --margin-inline-start: 0px !important;
  --margin-inline-end: 0px !important;
  --margin-block-start: 0px !important;
  --margin-block-end: 0px !important;
  margin: 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 760px !important;
  padding: 0 1rem !important;
  justify-content: center !important;
  align-items: center !important;
}
body.service-page--holographic-party-rover .service-heading,
body.service-page--holographic-party-rover .service-paragraph,
body.service-page--holographic-party-rover .elementor-12 .elementor-element.elementor-element-s2_hd .service-heading,
body.service-page--holographic-party-rover .elementor-12 .elementor-element.elementor-element-s2_hd .service-paragraph{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body.service-page--holographic-party-rover .elementor-element-s2_hd>.e-con-inner,
body.service-page--holographic-party-rover .elementor-12 .elementor-element.elementor-element-s2_hd>.e-con-inner{
  display: block !important;
  width: 100% !important;
}
body.service-page--holographic-party-rover .service-heading{
  max-width: 560px !important;
}
body.service-page--holographic-party-rover .service-paragraph{
  max-width: 560px !important;
}
body.service-page--holographic-party-rover .elementor-element-s2_cards_wrap{
  max-width: none !important;
  padding: 32px 0 0 !important;
  margin-top: 0 !important;
}
/* sec-2 feature cards: 3 equal cards in a row (mobile default) */
body.service-page--holographic-party-rover .hpr-feature-cards{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
  width: min(100% - 40px, 640px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
body.service-page--holographic-party-rover .hpr-feature-cards>.e-con-inner{
  display: contents !important;
}
body.service-page--holographic-party-rover .hpr-feature-cards>.e-con,
body.service-page--holographic-party-rover .hpr-feature-cards>.e-con-inner>.e-con{
  padding: var(--space-4) var(--space-5) !important;
  border-radius: 8px !important;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(110deg, #f3ae0d, #f36ca7) border-box !important;
  border: 1.5px solid transparent !important;
  text-align: left !important;
}
body.service-page--holographic-party-rover .hpr-feature-cards .elementor-widget-html svg{
  display: block !important;
  margin-bottom: var(--space-2) !important;
}
body.service-page--holographic-party-rover .hpr-feature-cards h3{
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
}
body.service-page--holographic-party-rover .hpr-feature-cards .elementor-heading-title{
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
  color: #53515a !important;
}
body.service-page--holographic-party-rover .elementor-element-s4{
  padding: var(--space-12) 0 0 !important;
  overflow: hidden !important;
  background: linear-gradient(to bottom, #fff 0 42%, #f369a5 42%, #f2ae0d 100%) !important;
  text-align: center;
}
/* Desktop reference refinement.  The page's Elementor containers retain their
   widgets, while the inner wrappers become the deliberate three-up print and
   collage rows shown in the supplied artwork. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */{
body.service-page--holographic-party-rover .hpr-mobile-intro{
    display: none !important;
  }
body.service-page--holographic-party-rover .elementor-element-s4{
    padding-top: var(--space-12) !important;
    background: linear-gradient(to bottom, #fff 0 34%, #f369a5 34%, #f2ae0d 100%) !important;
  }
}
/* SVG-reference calibration (1440px desktop). The values below come from
 * `ui_svg/svg-text/desktop/services/Services_Holographic Party Rove.svg`,
 * keeping the native Elementor widgets while matching its actual geometry. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */{
body.service-page--holographic-party-rover .service-hpr-sec-1{
    padding: 879px 0 96px !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-1::before{
    height: 811px !important;
    background: url("assets/uploads/ui_svg/extracted_982a1b31.webp") center / cover no-repeat !important;
  }
body.service-page--holographic-party-rover .hpr-intro-title{
    margin: 0 0 18px !important;
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
body.service-page--holographic-party-rover .hpr-intro-tag{
    margin: 0 0 28px !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-1 .service-paragraph{
    width: min(100% - 48px, 620px) !important;
    margin: 0 auto 30px !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-1 .btn .elementor-button{
    min-height: 44px !important;
    padding: 11px 22px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-2{
    padding: 99px 0 157px !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-2 .service-heading,
  body.service-page--holographic-party-rover .elementor-element-s4 .service-heading{
    margin: 0 auto 38px !important;
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-2 .service-paragraph,
  body.service-page--holographic-party-rover .elementor-element-s4 .service-paragraph{
    width: min(100% - 48px, 640px) !important;
    margin: 0 auto 119px !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
/* sec-2 desktop: heading + content area left-aligned, right side has tall portrait */
body.service-page--holographic-party-rover .elementor-element-s2_hd{
    width: min(100% - 96px, 780px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-2 .service-heading{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 38px !important;
  }
body.service-page--holographic-party-rover .service-hpr-sec-2 .service-paragraph{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 119px !important;
    width: min(100%, 560px) !important;
  }
/* sec-2 desktop cards + right portrait: positioned layout */
body.service-page--holographic-party-rover .elementor-element-s2_cards_wrap{
    position: relative !important;
    max-width: 1040px !important;
    padding: 32px 0 0 !important;
    margin: 0 auto !important;
  }
body.service-page--holographic-party-rover .hpr-feature-cards{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    column-gap: clamp(18px, calc(var(--hg-page-w, 100vw) * 2 / 100), 30px) !important;
    row-gap: 18px !important;
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
body.service-page--holographic-party-rover .hpr-feature-cards>.e-con:nth-child(1),
  body.service-page--holographic-party-rover .hpr-feature-cards>.e-con:nth-child(2),
  body.service-page--holographic-party-rover .hpr-feature-cards>.e-con:nth-child(3),
  body.service-page--holographic-party-rover .hpr-feature-cards>.e-con-inner>.e-con:nth-child(1),
  body.service-page--holographic-party-rover .hpr-feature-cards>.e-con-inner>.e-con:nth-child(2),
  body.service-page--holographic-party-rover .hpr-feature-cards>.e-con-inner>.e-con:nth-child(3){
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
  }
body.service-page--holographic-party-rover .hpr-feature-cards>.e-con,
  body.service-page--holographic-party-rover .hpr-feature-cards>.e-con-inner>.e-con{
    box-sizing: border-box !important;
    min-height: 200px !important;
    height: auto !important;
    width: auto !important;
    padding: 24px 20px !important;
  }
body.service-page--holographic-party-rover .elementor-element-s4{
    min-height: 0 !important;
    padding: 0 !important;
    background-color: #fff !important;
    background-image: linear-gradient(to bottom, #fff 0 549px, #f369a5 549px, #f2ae0d 804px) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 804px !important;
    background-position: top center !important;
  }
body.service-page--holographic-party-rover .elementor-element-s4 .service-heading{
    margin: 0 auto 22px !important;
    text-align: center !important;
  }
body.service-page--holographic-party-rover .elementor-element-s4 .service-paragraph{
    margin: 0 auto 28px !important;
    text-align: center !important;
  }
body.service-page--holographic-party-rover .elementor-element-s4_hd_text,
  body.service-page--holographic-party-rover .elementor-element-s4_hd_text>.e-con-inner,
  body.service-page--holographic-party-rover .elementor-element-s4_title,
  body.service-page--holographic-party-rover .elementor-element-s4_sub,
  body.service-page--holographic-party-rover .elementor-element-s4 .service-heading,
  body.service-page--holographic-party-rover .elementor-element-s4 .service-paragraph{
    display: block !important;
    width: min(100%, 680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
/* Elementor may retain the inner container in the box tree. Cover both
   * widget layouts so the SVG order is always: Roving, Overlay, Crew. */
}
@media (max-width: 899px){
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover main.site-main{
    padding-top: 0 !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .service-hpr-sec-1{
    padding: 296px 0 22px !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .service-hpr-sec-1::before{
    height: 277px;
    background-position: center !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .hpr-desktop-intro{
    display: none;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .hpr-mobile-intro{
    display: inline;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .hpr-intro-title{
    margin-bottom: var(--space-2) !important;
    font-size: var(--text-xl);
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .hpr-intro-tag{
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .service-hpr-sec-1 .service-paragraph{
    width: min(100% - 40px, 360px) !important;
    margin-bottom: var(--space-4) !important;
    font-size: var(--text-sm) !important;
    line-height: 1.4 !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .service-hpr-sec-1 .btn .elementor-button{
    min-height: 38px !important;
    padding: 9px 16px !important;
    font-size: var(--text-sm) !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .service-hpr-sec-2{
    padding: var(--space-8) 0 var(--space-6) !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .service-hpr-sec-2 .service-heading,
  :where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4 .service-heading{
    margin-bottom: var(--space-3) !important;
    font-size: var(--text-2xl) !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .service-hpr-sec-2 .service-paragraph,
  :where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4 .service-paragraph{
    width: min(100% - 40px, 360px) !important;
    margin-bottom: var(--space-6) !important;
    font-size: var(--text-sm) !important;
    line-height: 1.4 !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .hpr-feature-cards{
    flex-direction: column !important;
    width: min(100% - 40px, 400px) !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4{
    padding-top: var(--space-8) !important;
    background: linear-gradient(to bottom, #fff 0 19%, #f369a5 19%, #f2ae0d 100%) !important;
  }
}
/* Final social-feed geometry override. The visible left gutter comes from
   the Elementor widget around the shared section, so make that wrapper and
   the section full-bleed instead of offsetting the feed itself. */
@media (max-width: 767px){
.service-split-text{
    align-items: center !important;
  }
.service-split-text .elementor-widget-heading,
  .service-split-text .elementor-widget-text-editor,
  .service-split-text .elementor-heading-title,
  .service-split-text h1,
  .service-split-text h2,
  .service-split-text p{
    text-align: center !important;
  }
.service-split-text .elementor-widget-button.btn{
    align-self: center !important;
  }
}
@media (max-width: 767px){
.service-split-media{
    margin-top: 40px !important;
  }
}
.service-page .service-split-text .elementor-widget-button.btn{
  width: auto;
  align-self: flex-start;
}
.service-page .service-split-text .elementor-widget-button.btn .elementor-button{
  min-height: 40px;
  /* KOREKSI 2026-09-27 (kategori B - padding tombol): padding vertikal 12px terlalu kecil vs mockup -
     diukur langsung dari 4 instance tombol berbeda (sticker-print-photo-booth S2, qa/conform/compare.mjs
     pengukuran padding baru) yang semuanya konsisten minta ~17.5-18px atas/bawah (bukan noise - across
     4 instance independen). Kiri/kanan (28px) sudah cocok rata-rata (sinyal noisier krn estimasi lebar
     teks di spec.mjs, tidak diubah). Rule ini dipakai lintas halaman (.service-page .service-split-text
     bukan slug tertentu) jadi perbaikan ini otomatis berlaku sitewide. */
  padding: 18px 28px 15px;
  border-radius: var(--radius-btn);
  font-size: 0.96rem;
  font-weight: var(--font-medium);
  letter-spacing: 0.02em;
  color: #fff;
  background-color: transparent !important;
  background-image: var(--gradient-cta) !important;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
/* Fix submit button style on Keychain page */
/* Typography scaling for service page descriptions */
.service-page .service-paragraph .elementor-heading-title{
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}
.service-page .service-process-desc .elementor-heading-title{
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}
.service-page .elementor-widget-icon-box .elementor-icon-box-description{
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}
/* Fix Hero Title size and gradient direction for Keychain page */
body.service-page--keychain .service-split-text h1.title-gradient{
  font-size: clamp(1.75rem, calc(var(--hg-page-w, 100vw) * 3 / 100), 2.5rem) !important;
  background-image: linear-gradient(90deg, var(--color-pink), var(--color-orange)) !important;
  line-height: 1.2 !important;
}
@media (max-width: 767px){
body.service-page--keychain .service-split-text h1.title-gradient{
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
}
/* Further scaling down typography to match mockups exactly */
/* Hero Tagline */
body.service-page--keychain .service-tagline .elementor-heading-title{
  font-size: clamp(1.1rem, calc(var(--hg-page-w, 100vw) * 2 / 100), 1.3rem) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}
/* Section Title 'Why Its More Than Just a Photo' */
body.service-page--keychain .service-section-center h2.title-gradient{
  font-size: clamp(1.5rem, calc(var(--hg-page-w, 100vw) * 4 / 100), 2rem) !important;
  line-height: 1.2 !important;
}
/* Process Steps Numbers */
body.service-page--keychain .service-process-number{
  font-size: clamp(2rem, calc(var(--hg-page-w, 100vw) * 5 / 100), 2.5rem) !important;
  font-weight: 700 !important;
}
/* Process Steps Titles (the pills) */
body.service-page--keychain .service-process-title .elementor-heading-title{
  font-size: clamp(0.9rem, calc(var(--hg-page-w, 100vw) * 2 / 100), 1.1rem) !important;
  padding: 6px 16px !important;
}
/* Feature Box Titles */
body.service-page--keychain .elementor-icon-box-title{
  font-size: 0.95rem !important;
}
/* Feature Box Descriptions (reduce further if needed) */
body.service-page--keychain .elementor-widget-icon-box .elementor-icon-box-description{
  font-size: 0.8rem !important;
}
/* Fix alignment on Keychain page */
/* Hero Text Alignment: Center text in the left column */
body.service-page--keychain .service-split-text{
  align-items: center !important;
  text-align: center !important;
}
body.service-page--keychain .service-split-text .elementor-widget-heading,
body.service-page--keychain .service-split-text .elementor-widget-text-editor,
body.service-page--keychain .service-split-text .elementor-heading-title,
body.service-page--keychain .service-split-text h1,
body.service-page--keychain .service-split-text h2,
body.service-page--keychain .service-split-text p{
  text-align: center !important;
}
body.service-page--keychain .service-split-text .elementor-widget-button.btn{
  align-self: center !important;
}
/* Fix text for a4ad113 and fc485d6f */
body.service-page--keychain .elementor-element-fc485d6f,
body.service-page--keychain .service-split-features p,
body.service-page--keychain .service-split-features h2,
body.service-page--keychain .service-split-features h3{
  font-size: clamp(1rem, calc(var(--hg-page-w, 100vw) * 2 / 100), 1.5rem) !important;
  line-height: 1.3 !important;
}
/* Shape Frames Selection */
body.service-page--keychain .elementor-element-729241d>.elementor-element:nth-child(1) .elementor-icon::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='322 2817 48 53' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='333.629' cy='2833.2' r='9.75428'/%3E%3Crect x='324.939' y='2849.49' width='16.8512' height='16.8512'/%3E%3Crect x='349.768' y='2819.88' width='17.8929' height='48.25' rx='1.125'/%3E%3C/svg%3E");
}
/* Unlimited Instant Prints */
body.service-page--keychain .elementor-element-729241d>.elementor-element:nth-child(2) .elementor-icon::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='711 2822 48 51' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M722.5 2840.87V2825.42H747.5V2840.87'/%3E%3Cpath d='M722.499 2860.75H718.333C717.228 2860.75 716.168 2860.28 715.386 2859.46C714.605 2858.63 714.166 2857.5 714.166 2856.33V2845.29C714.166 2844.12 714.605 2843 715.386 2842.17C716.168 2841.34 717.228 2840.88 718.333 2840.88H751.666C752.771 2840.88 753.831 2841.34 754.612 2842.17C755.394 2843 755.833 2844.12 755.833 2845.29V2856.33C755.833 2857.5 755.394 2858.63 754.612 2859.46C753.831 2860.28 752.771 2860.75 751.666 2860.75H747.499'/%3E%3Cpath d='M747.5 2851.92H722.5V2869.58H747.5V2851.92Z'/%3E%3C/svg%3E");
}
/* Custom Overlay Design */
body.service-page--keychain .elementor-element-729241d>.elementor-element:nth-child(3) .elementor-icon::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1087 2825 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1111 2828.17L1090.17 2838.58L1111 2849L1131.83 2838.58L1111 2828.17Z'/%3E%3Cpath d='M1090.17 2859.42L1111 2869.83L1131.83 2859.42'/%3E%3Cpath d='M1090.17 2849L1111 2859.42L1131.83 2849'/%3E%3C/svg%3E");
}
/* Seamless Sharing */
body.service-page--keychain .elementor-element-729241d>.elementor-element:nth-child(4) .elementor-icon::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='508 3129 46 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='544.5' cy='3138.42' r='6.25'/%3E%3Ccircle cx='519.5' cy='3153' r='6.25'/%3E%3Ccircle cx='544.5' cy='3167.58' r='6.25'/%3E%3Cpath d='M524.896 3156.15L539.126 3164.44'/%3E%3Cpath d='M539.105 3141.56L524.896 3149.85'/%3E%3C/svg%3E");
}
/* Supporting Crew */
body.service-page--keychain .elementor-element-729241d>.elementor-element:nth-child(5) .elementor-icon::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='885 3114 50 46' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M920.417 3156.75V3152.58C920.417 3150.37 919.539 3148.25 917.977 3146.69C916.414 3145.13 914.294 3144.25 912.084 3144.25H895.417C893.207 3144.25 891.088 3145.13 889.525 3146.69C887.962 3148.25 887.084 3150.37 887.084 3152.58V3156.75'/%3E%3Ccircle cx='903.749' cy='3127.58' r='8.33'/%3E%3Cpath d='M932.916 3156.75V3152.58C932.915 3150.74 932.3 3148.94 931.169 3147.48C930.038 3146.03 928.454 3144.98 926.666 3144.52'/%3E%3Cpath d='M918.334 3119.52C920.127 3119.98 921.715 3121.02 922.85 3122.48C923.984 3123.95 924.6 3125.74 924.6 3127.59C924.6 3129.44 923.984 3131.24 922.85 3132.7C921.715 3134.17 920.127 3135.21 918.334 3135.67'/%3E%3C/svg%3E");
}
/* Fix footer spacing on mobile */
/* Fix footer spacing on mobile */
/* Center align Process Steps - Services_Keychain.png (desktop) draws
   these 3 numbered steps left-aligned (number/pill/description flush
   left next to each step's photo); this rule was applying unconditionally,
   centering them on desktop too and contradicting the desktop mockup.
   Scoped to mobile only, where centering this content is this site's
   established pattern for these numbered-step components (see the
   Party Rover mobile-vs-desktop alignment note elsewhere in this file). */
@media (max-width: 767px){
body.service-page--keychain .service-process-step{
    align-items: center !important;
    text-align: center !important;
  }
body.service-page--keychain .service-process-step .elementor-widget-heading,
  body.service-page--keychain .service-process-step .elementor-widget-text-editor,
  body.service-page--keychain .service-process-step p.service-process-number,
  body.service-page--keychain .service-process-title .elementor-heading-title,
  body.service-page--keychain .service-process-desc .elementor-heading-title{
    text-align: center !important;
    align-self: center !important;
  }
body.service-page--keychain .service-process-step .service-process-title .elementor-heading-title{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Services_360.png draws all 3 .title-gradient headings on this page
   (hero "360° Video Booth", "What Sets Us Apart", "Experiential Builds
   That Wow") pink -> orange, opposite the shared .title-gradient default
   (orange -> pink, thegrail-original.css). Same mismatch already found and
   fixed once before on holographic-photo-booth's branding heading - use
   the same background-image longhand so background-clip:text /
   -webkit-text-fill-color:transparent from the shared rule stay intact. */
body.service-page--360-photo-booth .title-gradient{
  background-image: linear-gradient(90deg, var(--color-pink), var(--color-orange));
}
/* AR Experience "Strut Your Style" 2-video row (elementor-element-
   ar3photos, flex-wrap:wrap, justify-content:center): its own DB-stored
   custom_css correctly sizes each <video> to width:100% of its own
   widget div (aspect-ratio 384/682), but never gives that WIDGET DIV
   itself a width - so it falls back to indeterminate content-driven
   auto-sizing while its video is still lazy-loaded with no real
   dimensions (same class of bug as the Glambot/360-photo-booth video-row
   fixes above), resolving to two different widths (720px/900px
   observed) - both well over half the row, so flex-wrap stacks them
   instead of the mock's side-by-side pair. */
body.service-page--ar-experience .elementor-element-ar3photo1,
body.service-page--ar-experience .elementor-element-ar3photo2{
  flex: 0 1 calc(50% - 0.75rem) !important;
  width: calc(50% - 0.75rem) !important;
}
body.service-page--ar-experience .service-ar-package-col{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* AR Experience "Your Package At A Glance" 5th card (elementor-element-
   ar3c5, "Supporting Crew"): unlike its 4 siblings (plain custom HTML
   widgets: a 26x26 inline SVG + text-editor heading + heading
   description, in a flex-column card with a gradient border), this one
   card is built from Elementor's native icon-box widget with a 50px
   Font Awesome icon and a plain solid pink border - a leftover
   different-widget-type mismatch, not a mockup-intentional difference
   (the mockup draws this card identically styled to the other 4). The
   oversized icon also pushes "Supporting Crew" onto 2 lines instead of
   1. Normalize the icon size and border to match its siblings. */
body.service-page--ar-experience .elementor-element-ar3c5{
  border: 2px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f5b000, #f16f9d) border-box !important;
}
body.service-page--ar-experience .elementor-element-ar3c5 .elementor-icon-box-icon i{
  font-size: 26px !important;
}
body.service-page--ar-experience .elementor-element-ar3c5{
  grid-template-columns: 1fr !important;
}
body.service-page--ar-experience .elementor-element-ar3c5i{
  width: 100% !important;
}
/* Fix remaining stray section-level drift on the Sticker Print page. The previous custom_css entries for
   096977b / a6fbad9 / 7b96212 were literal placeholder text ("selector") so they never applied. */
body.service-page--sticker-print-photo-booth [data-id="096977b"]{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}
body.service-page--sticker-print-photo-booth [data-id="096977b"]>.elementor-widget-container{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 767px){
body.service-page--sticker-print-photo-booth [data-id="a6fbad9"],
  body.service-page--sticker-print-photo-booth [data-id="a6fbad9"] img{
    width: 220px !important;
    max-width: 220px !important;
    height: 390px !important;
    object-fit: cover !important;
  }
}
@media (min-width: 768px){
body.service-page--sticker-print-photo-booth [data-id="a6fbad9"],
  body.service-page--sticker-print-photo-booth [data-id="a6fbad9"] img{
    width: 429px !important;
    max-width: 429px !important;
    height: 762px !important;
    object-fit: cover !important;
    max-height: 762px !important;
  }
}
/* Wide Angle (0.5x) Photo Booth "More Space, More Fun, More Memories"
   4-image row (elementor-element-wa3strip, 1020px wide, flex, nowrap,
   16px gap): all 4 slide wrappers (wa3se07ed943/wa3s016475b0/
   wa3sb2ab98e9/wa3s0bb3b66a) are hardcoded to width:300px/flex-shrink:0
   - 4*300px+3*16px gaps = 1248px, well over the 1020px row, so the 4th
   image (the mockup's Charlotte Tilbury "Big Lip Plumpgasm" strip)
   overflows past the right edge of the viewport entirely instead of
   sitting inside the row alongside the other 3. Equal flex share
   instead of a fixed width self-corrects to whatever the row/gap
   actually are. */
body.service-page--wide-angle-photo-booth .elementor-element-wa3se07ed943,
body.service-page--wide-angle-photo-booth .elementor-element-wa3s016475b0,
body.service-page--wide-angle-photo-booth .elementor-element-wa3sb2ab98e9,
body.service-page--wide-angle-photo-booth .elementor-element-wa3s0bb3b66a{
  width: auto !important;
  flex: 1 1 0% !important;
}
/* AI Lanyard (page 97): all page-specific rules (hero, S2, "The Back" duplicate-image hide, "Optional customisation:" /
   feature-title ::before text, "Our AI Printed Options" plan cards + 5-card grid) moved into the page Elementor custom_css
   (root 8fadeb1, blocks hg:quick-d, hg:quick-d2, hg:quick-m, hg:quick-m2, hg:quick-m3 ai-lanyard) on 2026-10-02 — see docs/OPEN-GAPS.md B-ai-lanyard. */
/* Holographic Name Card "Your First Impressions, Re-envisioned" 2-up
   image row (.service-holographic-name-card-sample): the page's own DB
   Custom CSS literally recreates the mockup's own placeholder wireframe
   as live styling - it hides the real image widget
   (`> .e-con-inner { display: none !important }`) and draws a gray box
   with a ::after reading "(digital) card gif 1" / "2" instead, verbatim
   copies of Services_Holo Name Card.png's own "replace this" wireframe
   text. The real photos (assets/features/4.webp, 5.webp) are already
   wired up underneath, just hidden. Un-hide them and drop the
   placeholder overlay. */
body.service-page--holographic-name-card .service-holographic-name-card-sample>.e-con-inner{
  display: contents !important;
}
body.service-page--holographic-name-card .service-holographic-name-card-sample::after{
  content: none !important;
}
/* AR Experience "Strut Your Style" 2-video row: both source clips are
   portrait phone-camera shots of the whole booth (ceiling light rig,
   surrounding stand) with the actual subject (tablet+hand /
   green-screen treadmill) occupying only the lower half - the mockup
   crops in tight on just the subject. Since the display box's aspect
   ratio already matches the source almost exactly, object-fit:cover
   has essentially no room to crop, so the ceiling shows in full.
   Zooming past 100% (scale) and re-centering on the subject reproduces
   the mockup's tighter framing. */
body.service-page--ar-experience .elementor-element-ar3photo1,
body.service-page--ar-experience .elementor-element-ar3photo2{
  overflow: hidden !important;
}
body.service-page--ar-experience .elementor-element-ar3photo1 video,
body.service-page--ar-experience .elementor-element-ar3photo2 video{
  transform: scale(1.5);
  transform-origin: 50% 68%;
}
/* AI Photo Booth hero (elementor-element-c3e9d6a4, .ai-hero-media--mobile,
   inside .service-media-row): the page's own DB Custom CSS sets this
   mobile-only tilted photo to `display:block` in its UNCONDITIONAL base
   rule (outside any @media block), then redundantly repeats the same
   `display:block` inside its real @media(max-width:899px) mobile block
   - but nothing ever hides it again above 899px, so on desktop it
   floats absolutely-positioned over the "Our AI Printed Options"
   section below the hero, overlapping its heading text. This page's
   own breakpoint convention is 900px (see its @media(min-width:900px)
   rules for the desktop hero layout), so hide it from that width up. */
/* ==========================================================================
   Fix for Elementor Video Widgets
   Neutralizes the new native .elementor-wrapper so existing theme
   layouts (grids/masonry) can size the <video> tag naturally.
   ========================================================================== */
.elementor-widget-video .elementor-wrapper.e-hosted-video{
  padding-bottom: 0 !important;
  aspect-ratio: auto !important;
  position: static !important;
  height: 100% !important;
  width: 100% !important;
  display: block !important;
}
.elementor-widget-video .elementor-wrapper.e-hosted-video video.elementor-video{
  position: static !important;
  /* Retain 100% dimensions but let the theme's object-fit rules govern */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
/* Ensure the outer widget container itself fills the theme's media boxes
   (replacing the old .elementor-widget-html rules in thegrail-original.css) */
.service-card-media .elementor-widget-video,
.recommended-card-photo>.elementor-widget-video,
.addon-card-media .elementor-widget-video,
.hero-gallery-item .elementor-widget-video,
.elementor-element-s2_img_row .elementor-widget-video,
.elementor-element-s2_img_row .elementor-widget-html{
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}
.elementor-element-s2_img_row .elementor-widget-container{
  width: 100% !important;
  height: 100% !important;
}
.elementor-widget-video .elementor-wrapper.e-hosted-video video.elementor-video{
  border-radius: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ==========================================================================
   Exception: holographic-luggage-tag Section 1 hero composition
   The two animated tag videos (ca05ef14, ae857dc6) inside
   .luggage-tag-composition need position:absolute so they can be placed
   at pixel-exact mockup coordinates relative to the composition frame.
   The global `position:static !important` above kills this, so re-assert
   absolute positioning specifically for the composition context.
   ========================================================================== */
.luggage-tag-composition .elementor-widget-video,
.luggage-tag-composition .elementor-widget-video .elementor-wrapper.e-hosted-video{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
.luggage-tag-composition .elementor-widget-video .elementor-wrapper.e-hosted-video video.elementor-video{
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  /* width/height/top/left/transform are set per-widget in post-11.css
     custom_css (from the mockup px measurements) */
}
body.service-page--holographic-luggage-tag .service-hlt-sec-1 .elementor-widget-video,
body.service-page--holographic-luggage-tag .service-hlt-sec-1 .elementor-widget-video .elementor-wrapper.e-hosted-video{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
body.service-page--holographic-luggage-tag .service-hlt-sec-1 .elementor-widget-video .elementor-wrapper.e-hosted-video video.elementor-video{
  position: absolute !important;
  display: block !important;
  max-width: none !important;
}
body.service-page--holographic-luggage-tag .service-hlt-sec-1 .elementor-widget-video,
body.service-page--holographic-luggage-tag .service-hlt-sec-1 .elementor-widget-video .elementor-wrapper.e-hosted-video{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
/* --- Holographic Party Rover: Section 4 Absolute Position Reconstruction --- */
body.service-page--holographic-party-rover .elementor-element-s4{
  position: relative !important;
  overflow-x: hidden !important;
  padding-top: 150px !important;
  /* Space above title */
  padding-bottom: 0 !important;
}
/* Fix title alignment */
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_hd_text{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-left: auto !important;
  padding-right: 10% !important;
  width: 100% !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .service-heading,
body.service-page--holographic-party-rover .elementor-element-s4 .service-paragraph{
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  max-width: 600px !important;
}
/* The gradient background block */
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_gradient{
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 380px !important;
  z-index: 1 !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_gradient>.elementor-widget-wrap{
  height: 100% !important;
}
/* The wrapper for the images */
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_imgs{
  position: relative !important;
  z-index: 2 !important;
  width: var(--hg-page-w, 100vw) !important;
  left: 50% !important;
  margin-left: calc(var(--hg-page-w, 100vw) / -2) !important;
  padding: 0 !important;
  background: transparent !important;
}
/* The exact positioning box, sized/positioned from Services_Holographic Party
   Rove.svg's real rects (was hard-coded to a generic 1200px box with widths
   scaled down ~35-40% below the mockup's actual 213-568px images; see
   docs/fix/holographic-party-rover.md). Mockup's row spans x=-33..1653 (bleeds
   33px past the left edge, 213px past the right edge of the 1440 viewport) —
   box width/margin-left below reproduce that bleed exactly, assuming this
   element's un-shifted left edge sits at viewport x=0 (its ancestor
   .elementor-element-s4_imgs is full-viewport-width, see s4_imgs rule above). */
@media (min-width: 768px)
/* hg-zoom A12: was 769px */{
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_img_grid{
    position: relative !important;
    display: block !important;
    /* NO FLEX */
    width: 1686px !important;
    max-width: none !important;
    height: 700px !important;
    margin: 0 0 0 -33px !important;
  }
}
/* Absolute Positioning for each image (left/bottom relative to the box above) */
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_l2{
  position: absolute !important;
  left: 0px !important;
  bottom: 0px !important;
  width: 213px !important;
  height: auto !important;
  margin: 0 !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_l1{
  position: absolute !important;
  left: 262px !important;
  bottom: 0px !important;
  width: 214px !important;
  height: auto !important;
  margin: 0 !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_c{
  position: absolute !important;
  left: 519px !important;
  bottom: 106px !important;
  width: 550px !important;
  height: auto !important;
  margin: 0 !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_r{
  position: absolute !important;
  left: 1118px !important;
  bottom: 106px !important;
  width: 568px !important;
  height: auto !important;
  margin: 0 !important;
}
/* Force image aspect ratios and drop shadows */
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_img_grid img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_l2 img,
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_l1 img{
  aspect-ratio: 600 / 1800 !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_c img{
  aspect-ratio: 590 / 482 !important;
}
body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_r img{
  aspect-ratio: 360 / 384 !important;
}
/* Mobile Fallback: Stack them normally */
@media (max-width: 768px){
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_img_grid{
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
    padding-bottom: 50px !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_l2,
  :where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_l1,
  :where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_c,
  :where(html:not(.hg-page-zoom)) body.service-page--holographic-party-rover .elementor-element-s4 .elementor-element-s4_r{
    position: relative !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 80% !important;
  }
}
/* Remove underline on contact-info-channels links as requested */
.contact-info-channels a,
a.contact-social-icon{
  text-decoration: none !important;
}
/* ==========================================================================
   AI Photo Booth (page 22) - layout repairs against Services_AI Photo Booth
   ========================================================================== */
/* Hero collage (sec-1 .service-media-row, 34ec16a7). The page CSS (root
   container 8ed0942c custom CSS) absolutely positions the three collage
   cards via `.service-media-row > .e-con-inner > .elementor-widget-image`,
   but the cards were later converted to Elementor *video* widgets, so none
   of them matched: they fell back into normal flow (stacked 1000+px down
   the page, over sections 2-3) inside Elementor's 16:9 black video wrapper.
   The slot geometry below is the page CSS's own (desktop 650x635 artboard,
   mobile 390x423); only the clip-to-slot mapping is corrected to the
   mockup: Harry Potter "Gala Dinner" = back-left tilted card, amova sci-fi
   = right tilted card, CNY "Lunar New Year" = front square (its 2:3 clip
   letterboxes a square card, so it's cropped with object-fit:cover). */
body.service-page--ai-photo-booth .service-ai-photo-booth-sec-1 .service-media-row .elementor-widget-video.elementor-element{
  position: absolute !important;
  /* right/bottom: auto dihapus — nilai bawaan posisi absolut sudah auto; deklarasi !important di sini (specificity sama dgn aturan per-elemen di CSS halaman, yang kini dicetak LEBIH DULU) menimpa right:7px mobile → kolase rusak */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  line-height: 0;
}
body.service-page--ai-photo-booth .service-ai-photo-booth-sec-1 .service-media-row .elementor-widget-video .elementor-wrapper{
  aspect-ratio: auto !important;
  height: auto !important;
  background: none !important;
  overflow: visible !important;
}
body.service-page--ai-photo-booth .service-ai-photo-booth-sec-1 .service-media-row .elementor-widget-video video.elementor-video{
  display: block !important;
  object-fit: cover !important;
  transform-origin: top left;
  border-radius: 0 !important;
}
/* Capture filmstrip (sec-2 .ai-filmstrip-row). Three problems vs mockup:
   1. The card labels are `.service-badge` heading widgets, and
      thegrail-original.css hides `.service-badge` site-wide (meant for the
      /services/ grid's "*new" badges) - so no card had a label. Re-show
      them here, as gradient pills straddling the photo's bottom edge.
   2. The page CSS's last "final geometry" block shrank the carousel to
      268px/335px cards in a 960px row; the mockup is 335px side cards and a
      419px active card (626px tall) in a ~1176px row (x 132-1307), 44px gaps.
      Restored at >=1200px; narrower desktops keep the 960px variant.
   3. "LinkedIn Profile Photo" is a video widget, so the image sizing rules
      skipped it (and Elementor's 16:9 wrapper boxed it) - size it like the
      images. */
body.service-page--ai-photo-booth .ai-filmstrip-row .elementor-widget-heading.service-badge{
  display: block !important;
  bottom: -20px !important;
  padding: 9px 32px !important;
  font-size: 16px !important;
  line-height: 22px !important;
  white-space: nowrap;
  max-width: none !important;
}
body.service-page--ai-photo-booth .ai-filmstrip-row .service-badge .elementor-heading-title{
  color: #fff !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 500 !important;
}
body.service-page--ai-photo-booth .ai-filmstrip-row .elementor-widget-video .elementor-wrapper{
  aspect-ratio: auto !important;
  height: auto !important;
  background: none !important;
}
body.service-page--ai-photo-booth .ai-filmstrip-row .elementor-widget-video video.elementor-video{
  display: block !important;
  width: 268px !important;
  height: 402px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  transition: width .3s ease, height .3s ease;
}
body.service-page--ai-photo-booth .ai-filmstrip-row .is-active .elementor-widget-video video.elementor-video{
  width: 335px !important;
  height: 502px !important;
}
@media (min-width: 768px)
/* hg-zoom A12: was 1200px */{
body.service-page--ai-photo-booth .ai-filmstrip .ai-filmstrip-row{
    width: min(var(--hg-page-w, 100vw), 1176px) !important;
    height: 670px !important;
    gap: 44px !important;
  }
body.service-page--ai-photo-booth .ai-filmstrip-row>.e-con-inner>.e-con{
    flex: 0 0 335px !important;
    width: 335px !important;
    margin-top: 66px !important;
  }
body.service-page--ai-photo-booth .ai-filmstrip-row>.e-con-inner>.e-con.is-active{
    flex-basis: 419px !important;
    width: 419px !important;
    margin-top: 0 !important;
  }
body.service-page--ai-photo-booth .ai-filmstrip-row .elementor-widget-image img,
  body.service-page--ai-photo-booth .ai-filmstrip-row .elementor-widget-video video.elementor-video{
    width: 335px !important;
    height: 502px !important;
  }
body.service-page--ai-photo-booth .ai-filmstrip-row .is-active .elementor-widget-image img,
  body.service-page--ai-photo-booth .ai-filmstrip-row .is-active .elementor-widget-video video.elementor-video{
    width: 419px !important;
    height: 626px !important;
  }
}
@media (max-width: 899px){
:where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-filmstrip-row .elementor-widget-heading.service-badge{
    bottom: -14px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-filmstrip-row .elementor-widget-video video.elementor-video{
    width: 189px !important;
    height: 283px !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-filmstrip-row .is-active .elementor-widget-video video.elementor-video{
    width: 220px !important;
    height: 339px !important;
  }
}
body.service-page--ai-photo-booth .ai-filmstrip-row>.e-con-inner>.e-con{
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  padding: 0 !important;
}
/* Heading gradients: every title on Services_AI Photo Booth runs pink ->
   orange left-to-right (#F26AAA -> #F28C5E -> #F1AE11, the same stops the
   page's own "Your Package At A Glance" heading already uses), opposite
   the shared .title-gradient default. Same longhand override as the 360
   page above, so background-clip:text from the shared rule stays intact. */
body.service-page--ai-photo-booth .title-gradient,
body.service-page--ai-photo-booth .ai-how__header h2{
  background-image: linear-gradient(90deg, #f26aaa 0%, #f28c5e 50%, #f1ae11 100%) !important;
}
/* Printed Options (sec-3): mockup band is 1254px (x 93-1347) - a 412px
   Still card + 807px Holographic card, 34px apart, 380px photos inset 16px -
   vs the live 992px band with 267/280px photos. */
@media (min-width: 768px)
/* hg-zoom A12: was 1200px */{
body.service-page--ai-photo-booth .ai-print-options{
    width: min(calc(100% - 48px), 1254px) !important;
    max-width: 1254px !important;
  }
body.service-page--ai-photo-booth .ai-print-options__grid{
    grid-template-columns: minmax(0, 412fr) minmax(0, 807fr) !important;
    gap: 34px !important;
  }
body.service-page--ai-photo-booth .ai-print-card{
    height: auto !important;
    min-height: 854px;
    padding: 22px 16px 40px !important;
    grid-template-rows: auto auto 1fr !important;
    row-gap: 22px;
  }
body.service-page--ai-photo-booth .ai-print-card>img{
    width: 100% !important;
    max-width: 380px;
  }
body.service-page--ai-photo-booth .ai-print-card__variants{
    align-self: start !important;
    gap: 30px !important;
  }
body.service-page--ai-photo-booth .ai-print-card__variant strong,
  body.service-page--ai-photo-booth .ai-print-card__variant span{
    padding-inline: 33px 20px;
    font-size: 18px !important;
  }
body.service-page--ai-photo-booth .ai-print-card--still>ul{
    padding-inline: 28px 16px !important;
  }
body.service-page--ai-photo-booth .ai-print-card li{
    font-size: 18px !important;
    line-height: 1.22 !important;
  }
body.service-page--ai-photo-booth .ai-print-card__features{
    padding-inline: 20px;
  }
}
/* How It Works (sec-4, custom HTML .ai-how): mockup has a left-aligned
   40px title with no subtitle, 22px copy, and the two prompt examples as
   upright cards (273x409 behind, 326x507 in front) with large gradient
   "Justice Fighters" / "No Text" pills hanging off their corners; the style
   pair is a -10deg INZY card behind an upright Standard Chartered card. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */{
body.service-page--ai-photo-booth .ai-how{
    padding-top: 40px !important;
  }
body.service-page--ai-photo-booth .ai-how__header{
    margin-bottom: 74px !important;
    padding-left: 32px;
    text-align: left !important;
  }
body.service-page--ai-photo-booth .ai-how__header h2{
    display: inline-block;
    margin: 0 !important;
    font-size: 40px !important;
  }
body.service-page--ai-photo-booth .ai-how__header p{
    display: none !important;
  }
body.service-page--ai-photo-booth .ai-how__copy{
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 22px !important;
    padding-left: 37px;
  }
body.service-page--ai-photo-booth .ai-how__copy h3,
  body.service-page--ai-photo-booth .ai-how__note h3{
    margin-bottom: 4px !important;
    color: #403e3e !important;
    font-size: 22px !important;
    font-weight: 500 !important;
  }
body.service-page--ai-photo-booth .ai-how__copy p,
  body.service-page--ai-photo-booth .ai-how__note p{
    color: #403e3e !important;
    font-size: 22px !important;
    line-height: 28px !important;
  }
body.service-page--ai-photo-booth .ai-how__visual{
    margin-top: 56px !important;
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt{
    height: 610px !important;
  }
body.service-page--ai-photo-booth .ai-how__visual--style{
    height: 730px !important;
    margin-top: 113px !important;
  }
body.service-page--ai-photo-booth .ai-how__visual figure{
    transform: none !important;
  }
body.service-page--ai-photo-booth .ai-how__visual img{
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 8px !important;
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt figure:first-child{
    top: 20px !important;
    left: -7px !important;
    right: auto !important;
    width: 273px !important;
    height: 409px;
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt figure:last-child{
    top: 95px !important;
    left: 198px !important;
    right: auto !important;
    width: 326px !important;
    height: 507px;
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt figcaption{
    padding: 0 22px !important;
    height: 70px;
    border-radius: 6px !important;
    background: linear-gradient(90deg, #f26aaa, #f1ae11) !important;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 70px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt figcaption::before{
    content: "\201C";
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt figcaption::after{
    content: "\201D";
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt figure:first-child figcaption{
    top: -20px !important;
    bottom: auto !important;
    left: -54px !important;
  }
body.service-page--ai-photo-booth .ai-how__visual--prompt figure:last-child figcaption{
    top: 369px !important;
    bottom: auto !important;
    left: -92px !important;
  }
body.service-page--ai-photo-booth .ai-how__visual--style figcaption{
    display: none !important;
  }
body.service-page--ai-photo-booth .ai-how__visual--style figure:first-child{
    top: 24px !important;
    left: 4px !important;
    right: auto !important;
    width: 285px !important;
    height: 422px;
    transform: rotate(-10deg) !important;
  }
body.service-page--ai-photo-booth .ai-how__visual--style figure:last-child{
    top: 169px !important;
    left: 263px !important;
    right: auto !important;
    width: 296px !important;
    height: 445px;
  }
body.service-page--ai-photo-booth .ai-how__note{
    width: min(100%, 440px) !important;
    margin-top: 40px !important;
    padding-left: 49px;
  }
}
/* Discover our complete range of AI Services: mockup is a two-column
   header (2-line 40px title left, 22px intro right at x 824) above a
   1347px band of 313x386 photos, 4 + 3 centered, 32px gaps, each with a
   white shadowed pill label in the page gradient; a large peach circle
   top-left and a two-tone pink circle bottom-right. The live section had a
   stacked header, ~210px photos and gold-outlined labels. */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */{
body.service-page--ai-photo-booth .ai-discover-section{
    overflow: hidden;
  }
body.service-page--ai-photo-booth .ai-discover-section::before{
    width: 340px !important;
    height: 340px !important;
    left: -170px !important;
    top: -72px !important;
    background: #f9d0bd !important;
  }
body.service-page--ai-photo-booth .ai-discover-section::after{
    width: 320px !important;
    height: 320px !important;
    right: -84px !important;
    bottom: -140px !important;
    background: radial-gradient(circle at 60% 60%, #f5b7c7 0 58%, #fbdfe5 58.5%) !important;
  }
body.service-page--ai-photo-booth .ai-discover-row>.e-con-inner>.e-con{
    max-width: none !important;
    padding: 0 !important;
    gap: 20px !important;
  }
body.service-page--ai-photo-booth .ai-discover-row>.e-con-inner>.e-con:nth-child(n+5){
    transform: translateX(calc(50% + 16px)) !important;
  }
body.service-page--ai-photo-booth .ai-discover-row .elementor-widget-image img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 313 / 386;
    border-radius: 8px;
    object-fit: cover !important;
  }
body.service-page--ai-photo-booth .ai-discover-row .service-paragraph{
    margin: 0 !important;
  }
body.service-page--ai-photo-booth .ai-discover-row .service-paragraph a{
    min-width: 180px;
    padding: 10px 24px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    font-size: 20px;
    font-weight: 400 !important;
    line-height: 26px;
  }
body.service-page--ai-photo-booth .ai-discover-row .service-paragraph a span{
    background: linear-gradient(90deg, #f1ae11, #f26aaa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Discover + How It Works spacing follow-ups: the global .container
   padding (80px per side) was eating into both the discover header grid and
   the 1347px photo band, and the sec-3 -> sec-4 -> discover gaps stacked
   section padding on top of .ai-how's own padding (~220px each vs ~100px in
   the mockup). */
@media (min-width: 768px)
/* hg-zoom A12: was 900px */{
body.service-page--ai-photo-booth .service-ai-photo-booth-sec-4{
    padding-top: 0 !important;
  }
body.service-page--ai-photo-booth .ai-how{
    padding-top: 0 !important;
    padding-bottom: 20px !important;
  }
}
/* Tablet (900-1199px): the How It Works card geometry above is sized for
   the mockup's ~500px columns (cards reach ~560px wide); scale the visual
   blocks down with the narrower columns instead of letting them clip. The
   Package row/intro (pre-existing) were 1090px/500px wide at 1024 with a
   half-applied translateX(-50%) centering, clipping both edges. */
@media (min-width: 900px) and (max-width: 1199px){
:where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-how__methods{
    gap: 64px !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-how__visual{
    zoom: .72;
  }
:where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-package-row,
  :where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-package-row.elementor-element-5c2eab19{
    left: auto !important;
    --width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    transform: none !important;
  }
:where(html:not(.hg-page-zoom)) body.service-page--ai-photo-booth .ai-package-row>.e-con-inner>.e-con{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
/* Skala teks mobile sempit: ukuran font Elementor/tema berupa px tetap, jadi di <440px teks
 * terasa membesar terhadap lebar layar. --hg-vw-scale (= lebar/440, diisi skrip inline di
 * wp_head, functions.php) mengecilkan widget teks secara proporsional terhadap acuan mockup 440.
 * Di >=440px variabel tidak dipakai (zoom 1). */
@media (max-width: 439.98px){
.elementor-widget-heading,
  .elementor-widget-text-editor,
  .elementor-widget-button,
  .elementor-widget-icon-list,
  .elementor-widget-icon-box{
    zoom: var(--hg-vw-scale, 1);
  }
}
/* Fix hero description width and spacing */
body .hero-desc{
  max-width: 380px !important;
  margin: 0 auto 16px !important;
  font-size: 1.05rem !important;
}
/* ==========================================================================
   Contact (shared component parts/section-contact.php) — conform mockup
   2026-09-29. Desktop >=768: --u = 100vw/1440 (px mockup = calc(N * var(--u))).
   Mobile <768: px mockup 440 = calc(N * var(--s)), --s = --hg-vw-scale.
   Mobile order (mockup): title, desc, channels, then card [reach-out, follow, form];
   desktop: form card left, info right (title, desc, reach-out label/sub, channels).
   ========================================================================== */
html body .section.section-contact{
  background: #fff;
}
html body .section-contact .container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
html body .section-contact .contact-layout .contact-info-title{
  display: block;
  width: fit-content;
  background: linear-gradient(120deg, #F1AE11 0%, #F26AAA 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
html body .section-contact .contact-layout .contact-info-title .section-title-line{
  display: block !important;
}
html body .section-contact .contact-layout .contact-info-title em,
html body .section-contact .contact-layout .contact-card-top-label em{
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
  font-weight: inherit !important;
  background: none !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html body .section-contact .contact-channel-icon{
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html body .section-contact .contact-channel-icon--email{
  color: #A0A5B6 !important;
}
html body .section-contact .contact-channel-icon--whatsapp{
  color: #25D366 !important;
}
html body .section-contact .contact-channel{
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #F1F3F7 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
  box-sizing: border-box;
}
html body .section-contact .contact-channel-label,
html body .section-contact .contact-channel-value{
  display: block !important;
  color: #403E3E !important;
}
html body .section-contact .contact-channel-value{
  font-weight: 600 !important;
}
@media (min-width: 768px){
html body .section.section-contact{
    --u: calc(var(--hg-page-w, 100vw) / 1440);
  }
html body.home .section.section-contact{
    padding: calc(53 * var(--u)) 0 calc(167 * var(--u)) !important;
  }
html body.service-page .section.section-contact{
    padding: calc(8 * var(--u)) 0 calc(85 * var(--u)) !important;
  }
html body .section-contact .contact-layout{
    display: grid !important;
    grid-template-columns: calc(667 * var(--u)) calc(480 * var(--u)) !important;
    column-gap: calc(76 * var(--u)) !important;
    row-gap: 0 !important;
    justify-content: start !important;
    align-items: center !important;
    margin: 0 0 0 calc(99 * var(--u)) !important;
    max-width: none !important;
    width: auto !important;
  }
html body .section-contact .contact-card-top{
    display: none !important;
  }
html body .section-contact .contact-form-card{
    order: 1 !important;
  }
html body .section-contact .contact-info{
    order: 2 !important;
  }
html body .section-contact .contact-form-card{
    width: 100% !important;
    box-sizing: border-box !important;
    padding: calc(29 * var(--u)) calc(31 * var(--u)) calc(26 * var(--u)) !important;
    border: 1px solid #F1F3F7 !important;
    border-radius: calc(8 * var(--u)) !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05) !important;
    margin: 0 !important;
  }
html body .section-contact .contact-info{
    gap: 0 !important;
    width: calc(480 * var(--u)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
html body .section-contact .contact-layout .contact-info-title{
    font-size: calc(35 * var(--u)) !important;
    line-height: calc(45 * var(--u)) !important;
    margin: 0 0 calc(33.7 * var(--u)) !important;
    letter-spacing: calc(1 * var(--u)) !important;
    text-align: center !important;
  }
html body .section-contact .contact-info-desc{
    font-size: calc(16 * var(--u)) !important;
    line-height: calc(25 * var(--u)) !important;
    color: #403E3E !important;
    max-width: calc(428 * var(--u)) !important;
    letter-spacing: calc(0.6 * var(--u)) !important;
    margin: 0 0 calc(60 * var(--u)) !important;
    text-align: center !important;
  }
html body .section-contact .contact-info-direct{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
html body .section-contact .contact-info-direct-label{
    font-size: calc(20 * var(--u)) !important;
    line-height: calc(26 * var(--u)) !important;
    color: #403E3E !important;
    font-weight: 400 !important;
    margin: 0 0 calc(9.5 * var(--u)) !important;
    letter-spacing: calc(0.7 * var(--u)) !important;
    text-align: center !important;
  }
html body .section-contact .contact-info-direct-sub{
    font-size: calc(16 * var(--u)) !important;
    line-height: calc(24 * var(--u)) !important;
    color: #403E3E !important;
    margin: 0 0 calc(15 * var(--u)) !important;
    letter-spacing: calc(0.6 * var(--u)) !important;
    text-align: center !important;
  }
html body .section-contact .contact-info-channels{
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: calc(16 * var(--u)) !important;
    margin: 0 !important;
  }
html body .section-contact .contact-channel{
    height: calc(57 * var(--u)) !important;
    padding: 0 calc(18 * var(--u)) !important;
    border-radius: calc(6 * var(--u)) !important;
    display: flex !important;
    align-items: center !important;
    gap: calc(16 * var(--u)) !important;
    flex: none !important;
  }
html body .section-contact .contact-channel:nth-child(1){
    width: calc(245 * var(--u)) !important;
  }
html body .section-contact .contact-channel:nth-child(2){
    width: calc(190 * var(--u)) !important;
  }
html body .section-contact .contact-channel-icon{
    width: calc(28 * var(--u)) !important;
    height: calc(28 * var(--u)) !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
html body .section-contact .contact-channel-icon svg{
    width: 100% !important;
    height: 100% !important;
  }
html body .section-contact .contact-channel-label,
  html body .section-contact .contact-channel-value{
    font-size: calc(14 * var(--u)) !important;
    line-height: calc(18 * var(--u)) !important;
    text-align: left !important;
  }
/* Revisi: contact-channel-value jangan wrapped (satu baris, mockup tidak memenggal) */
html body .section-contact .contact-channel-label,
  html body .section-contact .contact-channel-value{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 767px){
html body .section.section-contact{
    --s: var(--hg-vw-scale, 1);
    padding: calc(52px * var(--s)) 0 calc(42px * var(--s)) !important;
  }
html body.home .section.section-contact{
    padding-top: calc(28px * var(--s)) !important;
  }
html body .section-contact .contact-layout{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
html body .section-contact .contact-info{
    gap: 0 !important;
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
html body .section-contact .contact-form-card{
    order: 2 !important;
  }
html body .section-contact .contact-layout .contact-info-title{
    font-size: calc(25px * var(--s)) !important;
    line-height: calc(30px * var(--s)) !important;
    margin: 0 0 calc(10.5px * var(--s)) !important;
    text-align: center !important;
  }
html body .section-contact .contact-info-desc{
    font-size: calc(18px * var(--s)) !important;
    line-height: calc(22px * var(--s)) !important;
    color: #403E3E !important;
    max-width: calc(270px * var(--s)) !important;
    margin: 0 0 calc(25.5px * var(--s)) !important;
    text-align: center !important;
  }
html body .section-contact .contact-info-direct{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
html body .section-contact .contact-info-direct-label,
  html body .section-contact .contact-info-direct-sub{
    display: none !important;
  }
html body .section-contact .contact-info-channels{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: calc(15px * var(--s)) !important;
    margin: 0 !important;
  }
html body .section-contact .contact-channel{
    width: calc(245px * var(--s)) !important;
    height: calc(57px * var(--s)) !important;
    padding: 0 calc(18px * var(--s)) !important;
    border-radius: calc(6px * var(--s)) !important;
    display: flex !important;
    align-items: center !important;
    gap: calc(16px * var(--s)) !important;
    flex: none !important;
  }
html body .section-contact .contact-channel-icon{
    width: calc(28px * var(--s)) !important;
    height: calc(28px * var(--s)) !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
html body .section-contact .contact-channel-icon svg{
    width: 100% !important;
    height: 100% !important;
  }
html body .section-contact .contact-channel-label,
  html body .section-contact .contact-channel-value{
    font-size: calc(14px * var(--s)) !important;
    line-height: calc(18px * var(--s)) !important;
    text-align: left !important;
  }
/* Revisi: contact-channel-value jangan wrapped (satu baris) */
html body .section-contact .contact-channel-label,
  html body .section-contact .contact-channel-value{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
html body .section-contact .contact-form-card{
    width: calc(360px * var(--s)) !important;
    box-sizing: border-box !important;
    margin: calc(46px * var(--s)) 0 0 !important;
    position: relative;
    left: calc(3px * var(--s));
    padding: calc(18px * var(--s)) calc(15px * var(--s)) calc(26px * var(--s)) !important;
    border: 1px solid #F1F3F7 !important;
    border-radius: calc(8px * var(--s)) !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05) !important;
  }
html body .section-contact .contact-card-top{
    display: block !important;
    text-align: center;
  }
html body .section-contact .contact-card-top-label{
    margin: 0 auto calc(5px * var(--s)) !important;
    font-size: calc(20px * var(--s)) !important;
    line-height: calc(26px * var(--s)) !important;
    font-weight: 600 !important;
    background: linear-gradient(120deg, #F1AE11, #F26AAA) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    width: fit-content;
  }
html body .section-contact .contact-card-top-sub{
    margin: 0 auto !important;
    max-width: calc(233px * var(--s)) !important;
    font-size: calc(14px * var(--s)) !important;
    line-height: calc(20px * var(--s)) !important;
    color: #403E3E !important;
  }
html body .section-contact .contact-social-follow{
    margin: calc(19px * var(--s)) calc(4px * var(--s)) 0 !important;
    padding: calc(19px * var(--s)) 0 0 !important;
    border-top: 1px solid #E9ECF3 !important;
    text-align: center;
    display: block !important;
  }
html body .section-contact .contact-social-follow-label{
    margin: 0 auto !important;
    font-size: calc(16px * var(--s)) !important;
    line-height: calc(22px * var(--s)) !important;
    font-weight: 600 !important;
    background: linear-gradient(120deg, #F1AE11, #F26AAA) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    width: fit-content;
  }
html body .section-contact .contact-social-follow-icons{
    display: flex !important;
    justify-content: center !important;
    gap: calc(15px * var(--s)) !important;
    margin: calc(10px * var(--s)) 0 calc(51px * var(--s)) !important;
  }
html body .section-contact .contact-social-icon{
    width: calc(25px * var(--s)) !important;
    height: calc(25px * var(--s)) !important;
    border-radius: calc(4px * var(--s)) !important;
    background: #B4B9C9 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
html body .section-contact .contact-social-follow-icons .contact-social-icon:hover,
  html body .section-contact .contact-social-follow-icons .contact-social-icon:focus-visible{
    background: #595959 !important;
    color: #fff !important;
  }
html body .section-contact .contact-social-icon--placeholder{
    display: flex !important;
  }
html body .section-contact .contact-social-icon svg{
    width: 55% !important;
    height: 55% !important;
  }
html body .section-contact .contact-social-icon .fa-tiktok{
    font-size: calc(14px * var(--s)) !important;
  }
}
/* Hero full-bleed sampai y=0 di mockup desktop (header mengambang DI ATAS hero): party-rover, glambot, 360, scribble-booth,
   roving-scribble. margin-bottom negatif = tinggi blok header (131) → hero mulai di y=0, header tetap sticky. Dicatat di OPEN-GAPS (utang teknis). */
@media (min-width: 768px){
body.service-page--holographic-party-rover header.elementor-location-header,
  body.service-page--glambot header.elementor-location-header,
  body.service-page--360-photo-booth header.elementor-location-header,
  body.service-page--scribble-booth header.elementor-location-header,
  body.service-page--roving-scribble-booth header.elementor-location-header{
    position: relative; z-index: 200; margin-bottom: -131px;
  }
}
/* Tinggi hero desktop = tinggi S1 mockup (hero mulai di y=0, bukan 131). */
@media (min-width: 768px){
body.service-page--glambot .service-glambot-hero{ height: 876px !important; min-height: 876px !important; }
body.service-page--360-photo-booth .service-360-hero{ min-height: 883px !important; }
body.service-page--scribble-booth .service-banner-grid3--tall{ min-height: 925px !important; }
}
/* Utilitas varian teks per perangkat (2026-10-04): <span class="hg-v-d">teks desktop</span><span class="hg-v-m">teks mobile</span> — mockup desktop/mobile kadang beda salinan. */
@media (max-width: 767px){
.hg-v-d{ display: none !important; }
}
@media (min-width: 768px){
.hg-v-m{ display: none !important; }
}
/* 2026-10-05 (isu prioritas user): ruang putih di atas section social — mockup memberi ±94px (desktop) / ±98px (mobile) sebelum judul
   "Check Us Out!" (tempat strip 3 warna yang dilarang). Section social dirender PHP tema, jadi tidak bisa native Elementor;
   dicatat di OPEN-GAPS "Utang teknis". Hanya halaman yang diminta user. */
/* 2026-10-06: a4-print-photo-booth — ruang putih atas social sesuai mockup (mobile +61px, latar putih; desktop lewat --hg-social-dy 49px). */
/* 2026-10-06: mobile — section social: latar putih + ruang atas sesuai mockup (diukur: judul Check Us Out ↔ kartu 'Supporting Crew'). Section social dirender PHP tema → utang teknis (OPEN-GAPS). */
/* 2026-10-06 (isu prioritas 'judul besar'): judul "Check Us Out!" section social mobile = 20px di mockup semua halaman layanan (live 24px). */
/* Social ("Check Us Out!"): latar PUTIH di semua halaman & ukuran (standar; revisi user 2026-10-05). Menimpa kelas
   .section-features--grey yang dipakai markup section-instagram.php. */
/* Pengecualian: latar abu section social/contact HANYA di Home (mockup); halaman lain putih. */
/* ==== Social: ruang atas diseimbangkan (revisi user 2026-10-05) ====
   Jarak konten terakhir section di atas → judul "Check Us Out!" disamakan: ±240px desktop, ±170px mobile (sebelumnya 175–375 / 119–309 menurut mockup per halaman). Dihasilkan dari ukuran live. */
/* ==== Dropdown header (desktop) disamakan dengan mockup header-desktop (revisi user 2026-10-05) ====
   Panel putih border 1px #E1E4ED radius 8, padding 6; baris 34px, teks Inter 14px #403E3E (normal), baris aktif/hover = latar #F8FAFF radius 6 + semibold
   (bukan oranye/abu); flyout kedua selebar 193 sejajar baris kategori. Header = widget thegrail_site_nav (PHP tema) → utang teknis (target: Nav Menu Pro). */
/* ==== Ikon kartu seragam (revisi user 2026-10-05): ukuran 50×50 desktop / 40×40 mobile, garis 2px konstan (Figma/Lucide 50×50 stroke 2) ====
   Sebelumnya ukuran 40–62px & tebal garis efektif 1.6–3.4px antar halaman. Berlaku untuk icon-box kartu fitur (service-number-card/-feature-card)
   dan ikon SVG inline widget HTML bergaris (fill="none"). Ikon bentuk-isi (FontAwesome) tidak disentuh. Target jangka panjang: ikon SVG upload di widget Icon (Full Elementor). */
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.service-number-card, .service-feature-card) .elementor-icon{ width: 50px !important; height: 50px !important; font-size: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.service-number-card, .service-feature-card) .elementor-icon svg{ width: 50px !important; height: 50px !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .elementor-widget-html > :is(svg, .elementor-widget-container > svg)[fill="none"][stroke]:not([width="16"]):not([width="18"]):not([width="20"]){ width: 50px !important; height: 50px !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.service-number-card, .service-feature-card) .elementor-icon svg[fill="none"] :is(path, circle, rect, line, polyline, polygon, ellipse),
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .elementor-widget-html > :is(svg, .elementor-widget-container > svg)[fill="none"][stroke] :is(path, circle, rect, line, polyline, polygon, ellipse){ stroke-width: 2px !important; vector-effect: non-scaling-stroke; }
@media (max-width: 767px){
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.service-number-card, .service-feature-card) .elementor-icon,
  html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.service-number-card, .service-feature-card) .elementor-icon svg{ width: 40px !important; height: 40px !important; font-size: 40px !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .elementor-widget-html > :is(svg, .elementor-widget-container > svg)[fill="none"][stroke]:not([width="16"]):not([width="18"]):not([width="20"]){ width: calc(40px * var(--hg-vw-scale, 1)) !important; height: calc(40px * var(--hg-vw-scale, 1)) !important; }
/* revisi-12 (151:3584): widget HTML TIDAK ber-zoom (beda dengan icon-box) → ikon 40px harus ikut --hg-vw-scale di <440, kalau tidak ikon menimpa teks kartu yang ber-zoom (360 S3/S4 di 320). 440 tetap 40px. */
}
/* Ikon kartu seragam — tambahan: widget Icon/Icon Box generik, kelas hg-r7-icon (Glambot), ai-how__icon (AI Photo Booth). */
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.elementor-widget-icon-box, .elementor-widget-icon):not(.hg-social__check) .elementor-icon{ width: 50px !important; height: 50px !important; font-size: 50px !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.elementor-widget-icon-box, .elementor-widget-icon):not(.hg-social__check) .elementor-icon svg{ width: 50px !important; height: 50px !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .ai-how__icon svg{ height: 50px !important; width: auto !important; max-width: none !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] :is(.elementor-widget-icon-box, .elementor-widget-icon):not(.hg-social__check) .elementor-icon svg[fill="none"] :is(path, circle, rect, line, polyline, polygon, ellipse){ stroke-width: 2px !important; vector-effect: non-scaling-stroke; }
@media (max-width: 767px){
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .elementor-widget-icon:not(.hg-social__check) .elementor-icon,
  html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .elementor-widget-icon:not(.hg-social__check) .elementor-icon svg{ width: calc(40px * var(--hg-vw-scale, 1)) !important; height: calc(40px * var(--hg-vw-scale, 1)) !important; font-size: calc(40px * var(--hg-vw-scale, 1)) !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .elementor-widget-icon-box .elementor-icon,
  html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .elementor-widget-icon-box .elementor-icon svg{ width: 40px !important; height: 40px !important; font-size: 40px !important; }
html body[class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"][class*="service-page--"] .ai-how__icon svg{ height: 40px !important; width: auto !important; }
}

/* Floating Contact Us / WhatsApp buttons: keep the standard look on every page.
   Service-page CTA gradients (e.g. body.service-page--glambot .elementor-button) must not leak into them. */
body .thegrail-floating-actions .elementor-button.elementor-button { background-image: none !important; }
body .thegrail-floating-actions .elementor-element-hgfloatct1 .elementor-button.elementor-button { background-color: #ffffff !important; }
body .thegrail-floating-actions .elementor-element-hgfloatwa1 .elementor-button.elementor-button { background-color: #25d366 !important; }

/* Add-ons: transparent product images (e.g. Customised Paper Sleeves) must be shown whole, never cropped to the card box. */
.addon-card-image--contain img { object-fit: contain !important; }